{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "continuous-tabs",
  "type": "registry:component",
  "title": "Continuous Tabs",
  "description": "Button-like tabs with a smooth sliding background pill.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/continuous-tabs.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { useState, useEffect, type FC } from \"react\";\nimport { motion, LayoutGroup } from \"motion/react\";\n\n/* ---------- Types ---------- */\ninterface TabItem {\n    id: string;\n    label: string;\n}\n\ninterface ContinuousTabsProps {\n    tabs?: TabItem[];\n    defaultActiveId?: string;\n    onChange?: (id: string) => void;\n}\n\n/* ---------- Defaults ---------- */\nconst DEFAULT_TABS: TabItem[] = [\n    { id: \"home\", label: \"Home\" },\n    { id: \"interactions\", label: \"Interactions\" },\n    { id: \"resources\", label: \"Resources\" },\n    { id: \"docs\", label: \"Docs\" },\n];\n\nexport const ContinuousTabs: FC<ContinuousTabsProps> = ({\n    tabs = DEFAULT_TABS,\n    defaultActiveId = \"home\",\n    onChange,\n}) => {\n    const [active, setActive] = useState<string>(defaultActiveId);\n    const [isMounted, setIsMounted] = useState<boolean>(false);\n\n    useEffect(() => {\n        requestAnimationFrame(() => setIsMounted(true));\n    }, []);\n\n    const handleChange = (id: string) => {\n        setActive(id);\n        onChange?.(id);\n    };\n\n    if (!isMounted) return null;\n\n    return (\n        <LayoutGroup>\n            <nav\n                className=\"\n          relative flex items-center gap-0.5 sm:gap-1 p-1 sm:p-1.5\n            rounded-full\n            border border-[#E5E5E9] dark:border-zinc-800\n            bg-linear-to-b from-[#ffffff] to-[#e9e9f2]\n            dark:from-zinc-900 dark:to-zinc-950\n            shadow-[inset_0_-2px_4px_rgba(0,0,0,0.08),\n                    inset_0_1px_0_rgba(255,255,255,0.9),\n                    0_4px_12px_rgba(0,0,0,0.03)]\n            dark:shadow-[inset_0_-2px_4px_rgba(0,0,0,0.5),\n                    inset_0_1px_0_rgba(255,255,255,0.05),\n                    0_10px_20px_rgba(0,0,0,0.4)]\n            transition-all duration-300\n          \"\n            >\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=\"relative px-4 py-2 sm:px-6 sm:py-3 rounded-full outline-none\"\n                        >\n                            {/* Active pill */}\n                            {isActive && (\n                                <motion.div\n                                    layoutId=\"active-pill\"\n                                    transition={{\n                                        type: \"spring\",\n                                        stiffness: 380,\n                                        damping: 30,\n                                        mass: 0.9,\n                                    }}\n                                    className=\"\n                      absolute inset-0 rounded-full\n                      bg-[#252528] dark:bg-zinc-100\n                      shadow-xs\n                    \"\n                                />\n                            )}\n\n                            {/* Text */}\n                            <motion.span\n                                layout=\"position\"\n                                className={`relative z-10 text-sm sm:text-base font-semibold transition-colors duration-200\n                    ${isActive\n                                        ? \"text-[#EDEDEC] dark:text-zinc-950\"\n                                        : \"text-[#343437] dark:text-zinc-500 hover:text-[#62625D] dark:hover:text-zinc-300\"\n                                    }\n                  `}\n                            >\n                                {tab.label}\n                            </motion.span>\n                        </button>\n                    );\n                })}\n            </nav>\n        </LayoutGroup>\n    );\n};"
    }
  ]
}