{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "discrete-tabs",
  "type": "registry:component",
  "title": "Discrete Tabs",
  "description": "Animated tabs component with smooth morphing transitions between active states.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/discrete-tabs.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useEffect, useState, type FC, type ReactNode } from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface TabItem {\n  id: string;\n  icon: ReactNode;\n  label: string;\n  activeColor: string;\n}\n\ninterface DiscreteTabsProps {\n  tabs: TabItem[];\n  onTabChange?: (tabId: string) => void;\n  defaultTab?: string;\n}\n\nexport const DiscreteTabs: FC<DiscreteTabsProps> = ({\n  tabs,\n  onTabChange,\n  defaultTab,\n}) => {\n  const [activeTab, setActiveTab] = useState<string>(defaultTab || tabs[0]?.id);\n  const [shine, setShine] = useState<boolean>(false);\n\n  const handleTabClick = (tabId: string) => {\n    setActiveTab(tabId);\n    if (onTabChange) onTabChange(tabId);\n  };\n\n  useEffect(() => {\n    const timer = setTimeout(() => setShine(true), 600);\n    return () => {\n      clearTimeout(timer);\n      setShine(false);\n    };\n  }, [activeTab]);\n\n  return (\n    <motion.div\n      layout\n      className=\"mx-auto flex w-fit items-center justify-center gap-2 overflow-hidden rounded-full py-6\"\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === activeTab;\n\n        return (\n          <button\n            key={tab.id}\n            onClick={() => handleTabClick(tab.id)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleTabClick(tab.id);\n              }\n            }}\n            className=\"relative focus:outline-none\"\n          >\n            <motion.div\n              layout=\"position\"\n              transition={{\n                type: 'spring',\n                stiffness: 210,\n                damping: 18,\n                mass: 1,\n              }}\n              className=\"flex h-16 w-full items-center justify-center\"\n            >\n              <div\n                className={cn(\n                  'flex h-12 cursor-pointer items-center justify-center rounded-full bg-zinc-50 border border-border px-3 dark:bg-zinc-900',\n                  isActive && '',\n                )}\n                tabIndex={0}\n              >\n                <motion.div\n                  className={cn(\n                    'flex items-center justify-center transition-colors duration-300',\n                    isActive\n                      ? tab.activeColor\n                      : 'text-neutral-800 dark:text-white',\n                  )}\n                >\n                  {tab.icon}\n                </motion.div>\n\n                <motion.span\n                  animate={{\n                    width: isActive ? 'auto' : 0,\n                    opacity: isActive ? 1 : 0,\n                    marginLeft: isActive ? 8 : 0,\n                  }}\n                  className={cn(\n                    'relative overflow-hidden text-xl font-semibold whitespace-nowrap transition-colors duration-300',\n                    isActive ? tab.activeColor : 'text-black dark:text-white',\n                  )}\n                >\n                  {tab.label}\n\n                  <AnimatePresence>\n                    {isActive && shine && (\n                      <motion.span\n                        initial={{ left: '-120%' }}\n                        animate={{ left: '120%' }}\n                        transition={{\n                          duration: 0.5,\n                          ease: 'linear',\n                        }}\n                        className=\"absolute top-0 bottom-0 w-16 bg-linear-to-r from-transparent via-white/80 to-transparent dark:from-transparent dark:via-neutral-900/80 dark:to-transparent\"\n                      />\n                    )}\n                  </AnimatePresence>\n                </motion.span>\n              </div>\n            </motion.div>\n          </button>\n        );\n      })}\n    </motion.div>\n  );\n};\n"
    }
  ]
}