feat: add Dot Background component with interactive examples and documentation

[phev8]

No description provided.

[greptile-apps]

Greptile Summary

Adds a new DotBackground component to the c-ui registry — a decorative surface wrapper that renders a configurable dot grid pattern using CSS radial-gradient and custom properties. The component supports five semantic color variants (default, muted, card, accent, secondary), four spacing presets (dense, default, relaxed, loose), and a fully custom mode driven by a vars prop for per-instance overrides.

• New registry/radix-nova/dot-background.tsx component using CVA for variant key registration and inline CSS custom properties for all visual styling
• Interactive documentation example showcasing all color/spacing variants and custom overrides
• MDX documentation page with install commands, usage examples, and a complete props/configuration table
• Registry entry added to registry.json following existing conventions

Confidence Score: 4/5

• This PR is safe to merge — it adds a self-contained decorative component with no side effects on existing code.
• Score reflects clean, well-structured code that follows established codebase patterns (Slot import, CVA, cn utility). The component is purely presentational with no state, side effects, or external API calls. The CSS variable layering strategy is sound. Minor point deducted because CVA variant entries are empty strings (purely for key registration), which is functional but unconventional.
• No files require special attention.

Important Files Changed

Filename	Overview
registry/radix-nova/dot-background.tsx	New DotBackground component with semantic color/spacing variants and CSS variable overrides. Well-structured, follows existing codebase patterns (Slot import, CVA usage, cn utility). Uses a clever approach of inline CSS custom properties for theming while leveraging CVA for variant key registration.
components/docs/interactive-examples/dot-background.tsx	Interactive example demonstrating all color variants, spacing variants, and custom overrides. Clean, stateless component with well-typed const arrays.
components/docs/interactive-examples/index.ts	Barrel export file updated with new DotBackgroundInteractiveExample export in correct alphabetical order.
content/docs/components/dot-background.mdx	Documentation page with install instructions, live example, usage snippets, and a complete configuration table. Accurate and consistent with the component API.
registry.json	New dot-background component entry added in correct position. Follows existing registry structure.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["DotBackground Props"] --> B{"variant?"}
    B -->|"default/muted/card/accent/secondary"| C["Lookup colorVariant from dotBackgroundColorVariants"]
    B -->|"custom"| D["Use fallback defaults"]
    
    A --> E{"spacing?"}
    E -->|"dense/default/relaxed/loose"| F["Lookup spacingVariant from dotBackgroundSpacingVariants"]
    E -->|"custom"| G["Use fallback defaults"]
    
    A --> H{"vars provided?"}
    H -->|Yes| I["Set --dot-background-* CSS vars"]
    H -->|No| J["CSS vars omitted, fallbacks used"]
    
    C --> K["Build resolvedStyle"]
    D --> K
    F --> K
    G --> K
    I --> K
    J --> K
    
    K --> L["--dot-pattern-bg = var(--dot-background-color, colorVariant)"]
    K --> M["--dot-pattern-color = var(--dot-background-dot-color, colorVariant)"]
    K --> N["--dot-pattern-spacing = var(--dot-background-spacing, spacingVariant)"]
    K --> O["--dot-pattern-dot-size = var(--dot-background-dot-size, 1px)"]
    
    L --> P["Render div/Slot with radial-gradient background"]
    M --> P
    N --> P
    O --> P

Loading

_{Last reviewed commit: 3bb06f8}