{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "continuous-tabs-base",
  "type": "registry:component",
  "title": "Continuous Tabs (base)",
  "description": "Theme-ready base variant of 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\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\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 className=\"theme-injected border-2 border-border bg-background shadow-[inset_0_-2px_4px_hsl(var(--foreground)/0.08), inset_0_1px_0_hsl(var(--background)/0.9), 0_4px_12px_hsl(var(--foreground)/0.03)] relative flex items-center gap-0.5 rounded-lg border p-1 transition-all duration-300 sm:gap-1 sm:p-1.5\">\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 rounded-lg px-4 py-2 outline-none sm:px-6 sm:py-3\"\n            >\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=\"bg-foreground absolute inset-0 rounded-lg shadow-xs\"\n                />\n              )}\n\n              <motion.span\n                layout=\"position\"\n                className={`relative z-10 text-sm font-semibold transition-colors duration-200 sm:text-base ${\n                  isActive\n                    ? 'text-background'\n                    : 'text-muted-foreground hover:text-foreground'\n                } `}\n              >\n                {tab.label}\n              </motion.span>\n            </button>\n          );\n        })}\n      </nav>\n    </LayoutGroup>\n  );\n};\n"
    }
  ]
}