{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fluid-tabs",
  "title": "Fluid Tabs",
  "description": "Tabs with Framer Motion layout-animated underline or pill indicator",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/fluid-tabs.tsx",
      "content": "\"use client\"\n\nimport React, { useState, useRef } from \"react\"\nimport { motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface FluidTabItem {\n  value: string\n  label: string\n  content?: React.ReactNode\n  icon?: React.ReactNode\n}\n\nexport interface FluidTabsProps {\n  tabs: FluidTabItem[]\n  defaultValue?: string\n  onChange?: (value: string) => void\n  className?: string\n  listClassName?: string\n  contentClassName?: string\n  variant?: \"underline\" | \"pill\"\n}\n\nexport function FluidTabs({\n  tabs,\n  defaultValue,\n  onChange,\n  className,\n  listClassName,\n  contentClassName,\n  variant = \"underline\",\n}: FluidTabsProps) {\n  const [active, setActive] = useState(defaultValue ?? tabs[0]?.value ?? \"\")\n\n  const handleChange = (value: string) => {\n    setActive(value)\n    onChange?.(value)\n  }\n\n  const activeTab = tabs.find((t) => t.value === active)\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {/* Tab List */}\n      <div\n        role=\"tablist\"\n        className={cn(\n          \"relative flex\",\n          variant === \"underline\"\n            ? \"border-b border-border gap-1\"\n            : \"rounded-xl bg-muted p-1 gap-1\",\n          listClassName,\n        )}\n      >\n        {tabs.map((tab) => (\n          <button\n            key={tab.value}\n            role=\"tab\"\n            aria-selected={active === tab.value}\n            onClick={() => handleChange(tab.value)}\n            className={cn(\n              \"relative flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors duration-150 focus-visible:outline-none\",\n              variant === \"underline\"\n                ? cn(\n                    \"rounded-t-md\",\n                    active === tab.value\n                      ? \"text-foreground\"\n                      : \"text-muted-foreground hover:text-foreground\",\n                  )\n                : cn(\n                    \"rounded-lg z-10\",\n                    active === tab.value ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\",\n                  ),\n            )}\n          >\n            {/* Underline indicator */}\n            {variant === \"underline\" && active === tab.value && (\n              <motion.span\n                layoutId=\"fluid-tab-underline\"\n                className=\"absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-primary\"\n                transition={{ type: \"spring\", stiffness: 500, damping: 35 }}\n              />\n            )}\n            {/* Pill indicator */}\n            {variant === \"pill\" && active === tab.value && (\n              <motion.span\n                layoutId=\"fluid-tab-pill\"\n                className=\"absolute inset-0 rounded-lg bg-background shadow-sm\"\n                transition={{ type: \"spring\", stiffness: 500, damping: 35 }}\n              />\n            )}\n            {tab.icon && <span className=\"relative z-10\">{tab.icon}</span>}\n            <span className=\"relative z-10\">{tab.label}</span>\n          </button>\n        ))}\n      </div>\n\n      {/* Tab Content */}\n      {activeTab?.content && (\n        <motion.div\n          key={active}\n          initial={{ opacity: 0, y: 4 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.15 }}\n          role=\"tabpanel\"\n          className={cn(\"mt-4\", contentClassName)}\n        >\n          {activeTab.content}\n        </motion.div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/fluid-tabs.tsx"
    }
  ],
  "type": "registry:ui"
}