{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fluid-tabs",
  "type": "registry:component",
  "title": "Fluid Tabs",
  "description": "A fluid, spring-animated tab component with floating active indicator and icon scaling.",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/fluid-tabs.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, type ReactNode, type FC } from 'react';\nimport { motion } from 'motion/react';\nimport { BiSolidPieChartAlt2 } from 'react-icons/bi';\nimport { FaInbox, FaLandmark } from 'react-icons/fa';\n\nexport interface TabItem {\n  id: string;\n  label: string;\n  icon: ReactNode;\n}\n\ninterface FluidTabsProps {\n  tabs?: TabItem[];\n  defaultActive?: string;\n  onChange?: (id: string) => void;\n}\n\nconst DEFAULT_TABS: TabItem[] = [\n  { id: 'accounts', label: 'Accounts', icon: <FaLandmark size={22} /> },\n  { id: 'deposits', label: 'Deposits', icon: <FaInbox size={22} /> },\n  { id: 'funds', label: 'Funds', icon: <BiSolidPieChartAlt2 size={22} /> },\n];\n\nexport const FluidTabs: FC<FluidTabsProps> = ({\n  tabs = DEFAULT_TABS,\n  defaultActive = tabs[0]?.id,\n  onChange,\n}) => {\n  const [active, setActive] = useState<string>(defaultActive);\n\n  const handleChange = (id: string) => {\n    setActive(id);\n    onChange?.(id);\n  };\n\n  return (\n    <div className=\"relative flex items-center gap-1 rounded-full border-[1.6px] border-[#f5f1ebf4] bg-[#F5F1EB] px-1 py-1 transition-colors sm:gap-2 dark:border-neutral-800 dark:bg-neutral-900\">\n      {tabs.map((tab) => {\n        const isActive = active === tab.id;\n\n        return (\n          <button\n            key={tab.id}\n            onClick={() => handleChange(tab.id)}\n            className=\"group relative rounded-full px-3 py-2.5 outline-none sm:px-4 sm:py-3.5\"\n          >\n            {isActive && (\n              <motion.div\n                layoutId=\"active-pill\"\n                transition={{\n                  type: 'spring',\n                  stiffness: 280,\n                  damping: 25,\n                  mass: 0.8,\n                }}\n                className=\"absolute inset-0 rounded-full border border-[#fefefe]/90 bg-gradient-to-b from-[#fefefe] to-gray-50/80 shadow-xs dark:border-neutral-600/50 dark:from-neutral-700 dark:to-neutral-800/90\"\n              />\n            )}\n\n            <motion.div\n              transition={{\n                duration: 0.3,\n                ease: 'easeOut',\n              }}\n              animate={{\n                filter: isActive\n                  ? ['blur(0px)', 'blur(4px)', 'blur(0px)']\n                  : 'blur(0px)',\n              }}\n              className={`relative z-10 flex items-center gap-1.5 transition-colors duration-200 sm:gap-3 ${\n                isActive\n                  ? 'font-bold text-[#292926] dark:text-white'\n                  : 'font-semibold text-[#585652] dark:text-neutral-500 group-hover:dark:text-neutral-300'\n              }`}\n            >\n              <motion.div\n                animate={{ scale: isActive ? 1.03 : 1 }}\n                transition={{\n                  scale: { type: 'spring', stiffness: 300, damping: 15 },\n                }}\n                className=\"flex shrink-0 items-center justify-center\"\n              >\n                {tab.icon}\n              </motion.div>\n\n              <span className=\"text-sm tracking-tight whitespace-nowrap sm:text-base\">\n                {tab.label}\n              </span>\n            </motion.div>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n"
    }
  ]
}