{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "fluid-functionalism",
  "homepage": "https://github.com/mickadesign/fluid-functionalism",
  "items": [
    {
      "name": "surfaces",
      "type": "registry:theme",
      "title": "Surfaces",
      "description": "Eight-level surface and shadow ladder for elevation. Light: two color steps then flat white, differentiated by shadow. Dark: additive white-opacity ladder with layered inset highlights and drops.",
      "cssVars": {
        "theme": {
          "color-surface-1": "var(--surface-1)",
          "color-surface-2": "var(--surface-2)",
          "color-surface-3": "var(--surface-3)",
          "color-surface-4": "var(--surface-4)",
          "color-surface-5": "var(--surface-5)",
          "color-surface-6": "var(--surface-6)",
          "color-surface-7": "var(--surface-7)",
          "color-surface-8": "var(--surface-8)",
          "shadow-surface-1": "var(--shadow-1)",
          "shadow-surface-2": "var(--shadow-2)",
          "shadow-surface-3": "var(--shadow-3)",
          "shadow-surface-4": "var(--shadow-4)",
          "shadow-surface-5": "var(--shadow-5)",
          "shadow-surface-6": "var(--shadow-6)",
          "shadow-surface-7": "var(--shadow-7)",
          "shadow-surface-8": "var(--shadow-8)"
        },
        "light": {
          "surface-1": "#FAFAFA",
          "surface-2": "#FCFCFC",
          "surface-3": "#FFFFFF",
          "surface-4": "#FFFFFF",
          "surface-5": "#FFFFFF",
          "surface-6": "#FFFFFF",
          "surface-7": "#FFFFFF",
          "surface-8": "#FFFFFF",
          "shadow-color": "rgb(0 0 0 / 0.06)",
          "shadow-1": "0 0 0 1px var(--shadow-color)",
          "shadow-2": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color)",
          "shadow-3": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color)",
          "shadow-4": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color)",
          "shadow-5": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color)",
          "shadow-6": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color)",
          "shadow-7": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(--shadow-color)",
          "shadow-8": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(--shadow-color), 0 96px 96px -48px var(--shadow-color)"
        },
        "dark": {
          "surface-1": "#171717",
          "surface-2": "#1E1E1E",
          "surface-3": "#252525",
          "surface-4": "#2C2C2C",
          "surface-5": "#333333",
          "surface-6": "#3A3A3A",
          "surface-7": "#414141",
          "surface-8": "#484848",
          "dm-hi-base": "rgba(255,255,255,0.01)",
          "dm-hi-mid": "rgba(255,255,255,0.02)",
          "dm-hi-high": "rgba(255,255,255,0.04)",
          "dm-hi-peak": "rgba(255,255,255,0.06)",
          "dm-ring-base": "rgba(255,255,255,0.02)",
          "dm-ring-mid": "rgba(255,255,255,0.04)",
          "dm-ring-high": "rgba(255,255,255,0.06)",
          "dm-drop": "rgba(0,0,0,0.18)",
          "shadow-1": "inset 0 0 0 1px var(--dm-ring-base)",
          "shadow-2": "inset 0 1px 0 0 var(--dm-hi-base), inset 0 0 0 1px var(--dm-ring-base), 0 1px 1px -0.5px var(--dm-drop)",
          "shadow-3": "inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-base), 0 0 0 1px rgba(0,0,0,0.12), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop)",
          "shadow-4": "inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0,0,0,0.14), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop)",
          "shadow-5": "inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0,0,0,0.16), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop)",
          "shadow-6": "inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0,0,0,0.18), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop)",
          "shadow-7": "inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0,0,0,0.20), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop), 0 48px 48px -24px var(--dm-drop)",
          "shadow-8": "inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0,0,0,0.22), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop), 0 48px 48px -24px var(--dm-drop), 0 96px 96px -48px var(--dm-drop)"
        }
      }
    },
    {
      "name": "utils",
      "type": "registry:lib",
      "title": "Utilities",
      "description": "Utility function for merging Tailwind CSS classes with clsx and tailwind-merge.",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "registry/default/lib/utils.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "springs",
      "type": "registry:lib",
      "title": "Spring Animations",
      "description": "Spring animation token presets for Framer Motion (fast, moderate, slow).",
      "files": [
        {
          "path": "registry/default/lib/springs.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "font-weight",
      "type": "registry:lib",
      "title": "Font Weight Tokens",
      "description": "Variable font weight tokens for Inter (normal, medium, semibold, bold) using font-variation-settings.",
      "files": [
        {
          "path": "registry/default/lib/font-weight.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "surface-context",
      "type": "registry:lib",
      "title": "Surface Context",
      "description": "React context that tracks the current substrate elevation level. Elevated components (Dropdown, Select, etc.) read it via useSurface() and render at substrate + offset, then re-provide a new substrate so further nesting elevates further.",
      "files": [
        {
          "path": "registry/default/lib/surface-context.tsx",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "surface-classes",
      "type": "registry:lib",
      "title": "Surface Class Lookup",
      "description": "Static lookup tables for bg-surface-N and shadow-surface-N utilities. Required because Tailwind v4 cannot detect template-literal class names.",
      "files": [
        {
          "path": "registry/default/lib/surface-classes.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "elevated",
      "type": "registry:lib",
      "title": "Elevated",
      "description": "Elevation primitive. Wraps the read-substrate / compute-level / apply-classes / re-provide-context pattern into one component. Pulls in the surface theme tokens, substrate context, and class lookup so a single install drops in the whole elevation system.",
      "registryDependencies": [
        "https://www.fluidfunctionalism.com/r/surfaces.json",
        "utils",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json"
      ],
      "files": [
        {
          "path": "registry/default/lib/elevated.tsx",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "shape-context",
      "type": "registry:lib",
      "title": "Shape Context",
      "description": "React context provider for runtime shape variant switching (pill or rounded). Controls border-radius across all Fluid Functionalism components.",
      "files": [
        {
          "path": "registry/default/lib/shape-context.tsx",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "icon-context",
      "type": "registry:lib",
      "title": "Icon Context",
      "description": "Named icon slots with a Lucide default set; swap any icon via IconProvider.",
      "dependencies": [
        "lucide-react"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/default/lib/icon-context.tsx",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "use-proximity-hover",
      "type": "registry:hook",
      "title": "useProximityHover",
      "description": "React hook for proximity-based hover detection. Tracks the closest item to the mouse cursor within a container, enabling smooth animated background indicators.",
      "files": [
        {
          "path": "registry/default/hooks/use-proximity-hover.ts",
          "type": "registry:hook"
        }
      ]
    },
    {
      "name": "use-touch-primary",
      "type": "registry:hook",
      "title": "useTouchPrimary",
      "description": "Detects touch-primary devices (coarse pointer + touch points), updating live on pointer-mode and media-query changes. Adapted from Lina (https://lina.sameer.sh).",
      "files": [
        {
          "path": "registry/default/hooks/use-touch-primary.tsx",
          "type": "registry:hook"
        }
      ]
    },
    {
      "name": "use-merge-split",
      "type": "registry:hook",
      "title": "useMergeSplitBlocks",
      "description": "React hook + renderer for the selected-background merge/split animation. When one row bridges or splits two contiguous selected runs, their inner edges glide together (or apart) and swap to a single block, instead of one block spring-growing over the union.",
      "registryDependencies": [
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/default/hooks/use-merge-split.tsx",
          "type": "registry:hook"
        }
      ]
    },
    {
      "name": "accordion",
      "type": "registry:ui",
      "title": "Accordion",
      "description": "Collapsible accordion with animated height transitions, spring-animated chevron, and proximity hover in grouped mode. Built on Radix UI Accordion.",
      "dependencies": [
        "framer-motion",
        "@radix-ui/react-accordion",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/radix/accordion.tsx",
          "type": "registry:ui",
          "target": "components/ui/accordion.tsx"
        }
      ]
    },
    {
      "name": "accordion-base",
      "type": "registry:ui",
      "title": "Accordion (Base UI)",
      "description": "Collapsible accordion with animated height transitions, spring-animated chevron, and proximity hover in grouped mode. Base UI flavor.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/base/accordion.tsx",
          "type": "registry:ui",
          "target": "components/ui/accordion.tsx"
        }
      ]
    },
    {
      "name": "ask-user-questions",
      "type": "registry:ui",
      "title": "Ask User Questions",
      "description": "Stepped question flow with numbered options, keyboard shortcuts (1–9), single or multi-select, inline 'other' text input, optional skip, proximity-based hover, and multi-question navigation. Auto-advances on selection in single-select.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json",
        "https://www.fluidfunctionalism.com/r/use-merge-split.json",
        "https://www.fluidfunctionalism.com/r/button.json"
      ],
      "files": [
        {
          "path": "registry/default/ask-user-questions.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "badge",
      "type": "registry:ui",
      "title": "Badge",
      "description": "Compact label with solid and dot variants, Tailwind color palette, and three sizes.",
      "dependencies": [
        "class-variance-authority"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/shape-context.json"
      ],
      "files": [
        {
          "path": "registry/default/badge.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on hover.",
      "dependencies": [
        "framer-motion",
        "@radix-ui/react-slot",
        "class-variance-authority",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json"
      ],
      "files": [
        {
          "path": "registry/radix/button.tsx",
          "type": "registry:ui",
          "target": "components/ui/button.tsx"
        }
      ],
      "css": {
        "@keyframes spinner-move": {
          "to": {
            "stroke-dashoffset": "-100"
          }
        },
        "@keyframes spinner-dash": {
          "0%, 100%": {
            "stroke-dasharray": "15 85"
          },
          "50%": {
            "stroke-dasharray": "40 60"
          }
        }
      }
    },
    {
      "name": "button-base",
      "type": "registry:ui",
      "title": "Button (Base UI)",
      "description": "Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on hover. Base UI flavor.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react",
        "class-variance-authority",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json"
      ],
      "files": [
        {
          "path": "registry/base/button.tsx",
          "type": "registry:ui",
          "target": "components/ui/button.tsx"
        }
      ],
      "css": {
        "@keyframes spinner-move": {
          "to": {
            "stroke-dashoffset": "-100"
          }
        },
        "@keyframes spinner-dash": {
          "0%, 100%": {
            "stroke-dasharray": "15 85"
          },
          "50%": {
            "stroke-dasharray": "40 60"
          }
        }
      }
    },
    {
      "name": "dropdown",
      "type": "registry:ui",
      "title": "Dropdown",
      "description": "Dropdown menu with proximity hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-select. Includes MenuItem. Radix flavor.",
      "dependencies": [
        "@radix-ui/react-dropdown-menu",
        "framer-motion"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json",
        "https://www.fluidfunctionalism.com/r/elevated.json"
      ],
      "files": [
        {
          "path": "registry/radix/dropdown.tsx",
          "type": "registry:ui",
          "target": "components/ui/dropdown.tsx"
        },
        {
          "path": "registry/default/menu-item.tsx",
          "type": "registry:ui",
          "target": "components/ui/menu-item.tsx"
        }
      ]
    },
    {
      "name": "dropdown-base",
      "type": "registry:ui",
      "title": "Dropdown",
      "description": "Dropdown menu with proximity hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-select. Includes MenuItem. Base UI flavor.",
      "dependencies": [
        "@base-ui/react",
        "framer-motion"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json",
        "https://www.fluidfunctionalism.com/r/elevated.json"
      ],
      "files": [
        {
          "path": "registry/base/dropdown.tsx",
          "type": "registry:ui",
          "target": "components/ui/dropdown.tsx"
        },
        {
          "path": "registry/default/menu-item.tsx",
          "type": "registry:ui",
          "target": "components/ui/menu-item.tsx"
        }
      ]
    },
    {
      "name": "checkbox-group",
      "type": "registry:ui",
      "title": "Checkbox Group",
      "description": "Animated checkbox group with proximity hover, contiguous selection merging, and spring-animated check marks. Built on Radix UI Checkbox.",
      "dependencies": [
        "framer-motion",
        "@radix-ui/react-checkbox"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json",
        "https://www.fluidfunctionalism.com/r/use-merge-split.json"
      ],
      "files": [
        {
          "path": "registry/radix/checkbox-group.tsx",
          "type": "registry:ui",
          "target": "components/ui/checkbox-group.tsx"
        }
      ]
    },
    {
      "name": "checkbox-group-base",
      "type": "registry:ui",
      "title": "Checkbox Group (Base UI)",
      "description": "Animated checkbox group with proximity hover, contiguous selection merging, and spring-animated check marks. Base UI flavor.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json",
        "https://www.fluidfunctionalism.com/r/use-merge-split.json"
      ],
      "files": [
        {
          "path": "registry/base/checkbox-group.tsx",
          "type": "registry:ui",
          "target": "components/ui/checkbox-group.tsx"
        }
      ]
    },
    {
      "name": "radio-group",
      "type": "registry:ui",
      "title": "Radio Group",
      "description": "Animated radio group with proximity hover, spring-animated selection dot, and optional Radix UI integration. Supports both controlled index and value-based APIs.",
      "dependencies": [
        "framer-motion",
        "@radix-ui/react-radio-group"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/radix/radio-group.tsx",
          "type": "registry:ui",
          "target": "components/ui/radio-group.tsx"
        }
      ]
    },
    {
      "name": "radio-group-base",
      "type": "registry:ui",
      "title": "Radio Group (Base UI)",
      "description": "Animated radio group with proximity hover, spring-animated selection dot. Base UI flavor.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/base/radio-group.tsx",
          "type": "registry:ui",
          "target": "components/ui/radio-group.tsx"
        }
      ]
    },
    {
      "name": "dialog",
      "type": "registry:ui",
      "title": "Dialog",
      "description": "Animated modal dialog with spring-based scale and opacity transitions. Built on Radix UI Dialog with overlay, header, footer, title, and description sub-components.",
      "dependencies": [
        "framer-motion",
        "@radix-ui/react-dialog",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/button.json"
      ],
      "files": [
        {
          "path": "registry/radix/dialog.tsx",
          "type": "registry:ui",
          "target": "components/ui/dialog.tsx"
        }
      ]
    },
    {
      "name": "dialog-base",
      "type": "registry:ui",
      "title": "Dialog (Base UI)",
      "description": "Animated modal dialog with spring-based scale and opacity transitions. Base UI flavor.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/base/button.json"
      ],
      "files": [
        {
          "path": "registry/base/dialog.tsx",
          "type": "registry:ui",
          "target": "components/ui/dialog.tsx"
        }
      ]
    },
    {
      "name": "mobile-drawer",
      "type": "registry:ui",
      "title": "Mobile Drawer",
      "description": "Slide-in navigation drawer with scrim, focus trap, and scroll lock. Radix flavor.",
      "dependencies": [
        "@radix-ui/react-dialog",
        "framer-motion"
      ],
      "registryDependencies": [
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json"
      ],
      "files": [
        {
          "path": "registry/radix/mobile-drawer.tsx",
          "type": "registry:ui",
          "target": "components/ui/mobile-drawer.tsx"
        }
      ]
    },
    {
      "name": "mobile-drawer-base",
      "type": "registry:ui",
      "title": "Mobile Drawer",
      "description": "Slide-in navigation drawer with scrim, focus trap, and scroll lock. Base UI flavor.",
      "dependencies": [
        "@base-ui/react",
        "framer-motion"
      ],
      "registryDependencies": [
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json"
      ],
      "files": [
        {
          "path": "registry/base/mobile-drawer.tsx",
          "type": "registry:ui",
          "target": "components/ui/mobile-drawer.tsx"
        }
      ]
    },
    {
      "name": "input-copy",
      "type": "registry:ui",
      "title": "Input Copy",
      "description": "Read-only input with a copy-to-clipboard button and animated check feedback. Supports optional label and shape context.",
      "dependencies": [
        "framer-motion",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json"
      ],
      "files": [
        {
          "path": "registry/default/input-copy.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input-group",
      "type": "registry:ui",
      "title": "Input Group",
      "description": "Grouped input fields with proximity-based highlighting, animated label transitions, optional icons, and error states.",
      "dependencies": [
        "lucide-react",
        "@base-ui/react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/default/input-group.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "input-message",
      "type": "registry:ui",
      "title": "Input Message",
      "description": "Chat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible left/right action slots, and a built-in send button on a Surface-2 substrate.",
      "dependencies": [
        "framer-motion"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json",
        "https://www.fluidfunctionalism.com/r/file-thumbnail.json",
        "https://www.fluidfunctionalism.com/r/button.json",
        "https://www.fluidfunctionalism.com/r/tooltip.json"
      ],
      "files": [
        {
          "path": "registry/default/input-message.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "file-thumbnail",
      "type": "registry:ui",
      "title": "File Thumbnail",
      "description": "Read-only square preview of a File. Images render via object-cover; PDFs render their first page via pdfjs; a spinner shows while either resolves. Adapts its corner radius to the global shape setting.",
      "dependencies": [
        "pdfjs-dist"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/shape-context.json"
      ],
      "files": [
        {
          "path": "registry/default/file-thumbnail.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "chat-message",
      "type": "registry:ui",
      "title": "Chat Message",
      "description": "A single chat transcript entry with baked-in entrance and layout motion. Right-aligned accent bubble for the user, left-aligned muted bubble for the assistant, with optional file attachments. Adapts to the global shape setting.",
      "dependencies": [
        "framer-motion"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/use-touch-primary.json",
        "https://www.fluidfunctionalism.com/r/file-thumbnail.json"
      ],
      "files": [
        {
          "path": "registry/default/chat-message.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "tabs-subtle",
      "type": "registry:ui",
      "title": "Tabs Subtle",
      "description": "Horizontal tab navigation with proximity hover, animated pill selection indicator, and fluid font-weight transitions. Radix flavor.",
      "dependencies": [
        "@radix-ui/react-tabs",
        "framer-motion",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/radix/tabs-subtle.tsx",
          "type": "registry:ui",
          "target": "components/ui/tabs-subtle.tsx"
        }
      ]
    },
    {
      "name": "tabs-subtle-base",
      "type": "registry:ui",
      "title": "Tabs Subtle",
      "description": "Horizontal tab navigation with proximity hover, animated pill selection indicator, and fluid font-weight transitions. Base UI flavor.",
      "dependencies": [
        "@base-ui/react",
        "framer-motion",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/base/tabs-subtle.tsx",
          "type": "registry:ui",
          "target": "components/ui/tabs-subtle.tsx"
        }
      ]
    },
    {
      "name": "switch",
      "type": "registry:ui",
      "title": "Switch",
      "description": "Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Built on Radix UI Switch.",
      "dependencies": [
        "framer-motion",
        "@radix-ui/react-switch"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json"
      ],
      "files": [
        {
          "path": "registry/radix/switch.tsx",
          "type": "registry:ui",
          "target": "components/ui/switch.tsx"
        }
      ]
    },
    {
      "name": "switch-base",
      "type": "registry:ui",
      "title": "Switch (Base UI)",
      "description": "Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Base UI flavor.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json"
      ],
      "files": [
        {
          "path": "registry/base/switch.tsx",
          "type": "registry:ui",
          "target": "components/ui/switch.tsx"
        }
      ]
    },
    {
      "name": "table",
      "type": "registry:ui",
      "title": "Table",
      "description": "Animated table with proximity-based row hover highlighting and fluid border transitions. Includes TableHeader, TableBody, TableRow, TableHead, and TableCell sub-components.",
      "dependencies": [
        "framer-motion"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/default/table.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "card",
      "type": "registry:ui",
      "title": "Card",
      "description": "shadcn's compositional card (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) with the Fluid Functionalism layer: transparent substrate, weight-animated title, media/logo/feature/image slots, and a CardGroup that owns stacked, inline, and grid layouts plus 2-D proximity-hover highlighting.",
      "dependencies": [
        "framer-motion"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/default/card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "slider",
      "type": "registry:ui",
      "title": "Slider",
      "description": "Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider.",
      "dependencies": [
        "framer-motion",
        "@radix-ui/react-slider"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json"
      ],
      "files": [
        {
          "path": "registry/radix/slider.tsx",
          "type": "registry:ui",
          "target": "components/ui/slider.tsx"
        }
      ]
    },
    {
      "name": "slider-base",
      "type": "registry:ui",
      "title": "Slider (Base UI)",
      "description": "Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Base UI flavor.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json"
      ],
      "files": [
        {
          "path": "registry/base/slider.tsx",
          "type": "registry:ui",
          "target": "components/ui/slider.tsx"
        }
      ]
    },
    {
      "name": "tabs",
      "type": "registry:ui",
      "title": "Tabs",
      "description": "Segmented control tabs with sliding active indicator, proximity hover, and spring animations. Built on Radix UI Tabs.",
      "dependencies": [
        "framer-motion",
        "@radix-ui/react-tabs",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/radix/tabs.tsx",
          "type": "registry:ui",
          "target": "components/ui/tabs.tsx"
        }
      ]
    },
    {
      "name": "tabs-base",
      "type": "registry:ui",
      "title": "Tabs (Base UI)",
      "description": "Segmented control tabs with sliding active indicator, proximity hover, and spring animations. Base UI flavor.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json"
      ],
      "files": [
        {
          "path": "registry/base/tabs.tsx",
          "type": "registry:ui",
          "target": "components/ui/tabs.tsx"
        }
      ]
    },
    {
      "name": "thinking-indicator",
      "type": "registry:ui",
      "title": "Thinking Indicator",
      "description": "Animated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through customizable status words.",
      "dependencies": [
        "framer-motion"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/font-weight.json"
      ],
      "files": [
        {
          "path": "registry/default/thinking-indicator.tsx",
          "type": "registry:ui"
        }
      ],
      "css": {
        "@keyframes shimmer": {
          "0%": {
            "background-position": "0% 0"
          },
          "100%": {
            "background-position": "100% 0"
          }
        },
        ".shimmer-text": {
          "color": "transparent",
          "background": "linear-gradient(90deg, #a3a3a3 0%, #a3a3a3 35%, #525252 50%, #a3a3a3 65%, #a3a3a3 100%)",
          "background-size": "300% 100%",
          "background-clip": "text",
          "-webkit-background-clip": "text",
          "animation": "shimmer 1.5s ease-in-out infinite"
        }
      }
    },
    {
      "name": "scroll-area",
      "type": "registry:ui",
      "title": "Scroll Area",
      "description": "Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native overflow scrolling on touch-primary devices. Built on Radix UI Scroll Area; adapted from Lina (https://lina.sameer.sh).",
      "dependencies": [
        "@radix-ui/react-scroll-area"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/use-touch-primary.json"
      ],
      "files": [
        {
          "path": "registry/radix/scroll-area.tsx",
          "target": "components/ui/scroll-area.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "scroll-area-base",
      "type": "registry:ui",
      "title": "Scroll Area (Base UI)",
      "description": "Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native overflow scrolling on touch-primary devices. Base UI flavor; adapted from Lina (https://lina.sameer.sh).",
      "dependencies": [
        "@base-ui/react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/use-touch-primary.json"
      ],
      "files": [
        {
          "path": "registry/base/scroll-area.tsx",
          "target": "components/ui/scroll-area.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "select",
      "type": "registry:ui",
      "title": "Select",
      "description": "Animated select menu with collision-aware positioning, typeahead, proximity hover, spring-animated popover, and animated checkmark. Radix flavor.",
      "dependencies": [
        "@radix-ui/react-select",
        "framer-motion",
        "class-variance-authority",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json",
        "https://www.fluidfunctionalism.com/r/elevated.json"
      ],
      "files": [
        {
          "path": "registry/radix/select.tsx",
          "type": "registry:ui",
          "target": "components/ui/select.tsx"
        }
      ]
    },
    {
      "name": "select-base",
      "type": "registry:ui",
      "title": "Select",
      "description": "Animated select menu with collision-aware positioning, typeahead, proximity hover, spring-animated popover, and animated checkmark. Base UI flavor.",
      "dependencies": [
        "@base-ui/react",
        "framer-motion",
        "class-variance-authority",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json",
        "https://www.fluidfunctionalism.com/r/elevated.json"
      ],
      "files": [
        {
          "path": "registry/base/select.tsx",
          "type": "registry:ui",
          "target": "components/ui/select.tsx"
        }
      ]
    },
    {
      "name": "tooltip",
      "type": "registry:ui",
      "title": "Tooltip",
      "description": "Floating tooltip with spring-based animations, configurable placement, and rich content support.",
      "dependencies": [
        "framer-motion",
        "@radix-ui/react-tooltip"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json"
      ],
      "files": [
        {
          "path": "registry/radix/tooltip.tsx",
          "target": "components/ui/tooltip.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "tooltip-base",
      "type": "registry:ui",
      "title": "Tooltip (Base UI)",
      "description": "Floating tooltip with spring-based animations, configurable placement, and rich content support. Base UI flavor.",
      "dependencies": [
        "framer-motion",
        "@base-ui/react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json"
      ],
      "files": [
        {
          "path": "registry/base/tooltip.tsx",
          "target": "components/ui/tooltip.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "thinking-steps",
      "type": "registry:ui",
      "title": "Thinking Steps",
      "description": "Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Radix flavor.",
      "dependencies": [
        "@radix-ui/react-collapsible",
        "framer-motion",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/badge.json"
      ],
      "files": [
        {
          "path": "registry/radix/thinking-steps.tsx",
          "type": "registry:ui",
          "target": "components/ui/thinking-steps.tsx"
        }
      ],
      "css": {
        "@keyframes shimmer": {
          "0%": {
            "background-position": "0% 0"
          },
          "100%": {
            "background-position": "100% 0"
          }
        },
        ".shimmer-text": {
          "color": "transparent",
          "background": "linear-gradient(90deg, #a3a3a3 0%, #a3a3a3 35%, #525252 50%, #a3a3a3 65%, #a3a3a3 100%)",
          "background-size": "300% 100%",
          "background-clip": "text",
          "-webkit-background-clip": "text",
          "animation": "shimmer 1.5s ease-in-out infinite"
        }
      }
    },
    {
      "name": "thinking-steps-base",
      "type": "registry:ui",
      "title": "Thinking Steps",
      "description": "Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI flavor.",
      "dependencies": [
        "@base-ui/react",
        "framer-motion",
        "lucide-react"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/badge.json"
      ],
      "files": [
        {
          "path": "registry/base/thinking-steps.tsx",
          "type": "registry:ui",
          "target": "components/ui/thinking-steps.tsx"
        }
      ],
      "css": {
        "@keyframes shimmer": {
          "0%": {
            "background-position": "0% 0"
          },
          "100%": {
            "background-position": "100% 0"
          }
        },
        ".shimmer-text": {
          "color": "transparent",
          "background": "linear-gradient(90deg, #a3a3a3 0%, #a3a3a3 35%, #525252 50%, #a3a3a3 65%, #a3a3a3 100%)",
          "background-size": "300% 100%",
          "background-clip": "text",
          "-webkit-background-clip": "text",
          "animation": "shimmer 1.5s ease-in-out infinite"
        }
      }
    },
    {
      "name": "color-picker",
      "type": "registry:ui",
      "title": "Color Picker",
      "description": "Color picker with HEX, RGB, HSL, and OKLCH formats, alpha channel, optional swatches, and a popover trigger. Built on Base UI's Popover, Menu, and NumberField primitives with native EyeDropper support.",
      "dependencies": [
        "@base-ui/react",
        "framer-motion"
      ],
      "registryDependencies": [
        "utils",
        "https://www.fluidfunctionalism.com/r/springs.json",
        "https://www.fluidfunctionalism.com/r/font-weight.json",
        "https://www.fluidfunctionalism.com/r/shape-context.json",
        "https://www.fluidfunctionalism.com/r/surface-context.json",
        "https://www.fluidfunctionalism.com/r/surface-classes.json",
        "https://www.fluidfunctionalism.com/r/icon-context.json",
        "https://www.fluidfunctionalism.com/r/use-proximity-hover.json",
        "https://www.fluidfunctionalism.com/r/elevated.json",
        "https://www.fluidfunctionalism.com/r/slider.json"
      ],
      "files": [
        {
          "path": "registry/default/color-picker.tsx",
          "type": "registry:ui"
        }
      ]
    }
  ]
}