{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "transitions-tab-switcher",
  "type": "registry:component",
  "title": "Tab Switcher",
  "description": "Animated tab navigation with multiple visual styles.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/new-york/animations/transitions/tab-switcher.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useId } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Tab {\n    id: string;\n    label: string;\n    content: React.ReactNode;\n    icon?: React.ReactNode;\n}\n\ninterface TabSwitcherProps {\n    tabs: Tab[];\n    defaultTab?: string;\n    className?: string;\n    variant?: \"pill\" | \"underline\" | \"segmented\";\n}\n\nexport function TabSwitcher({ tabs, defaultTab, className, variant = \"pill\" }: TabSwitcherProps) {\n    const [activeTab, setActiveTab] = useState(defaultTab || tabs[0].id);\n    const id = useId();\n\n    return (\n        <div className={cn(\"flex flex-col items-center justify-start p-8 bg-zinc-50 dark:bg-zinc-900 rounded-xl min-h-[400px] w-full\", className)}>\n            <div className={cn(\n                \"flex items-center\",\n                variant === \"pill\" && \"space-x-1 bg-white dark:bg-zinc-950 p-1.5 rounded-full shadow-sm border border-zinc-200 dark:border-zinc-800\",\n                variant === \"underline\" && \"border-b border-zinc-200 dark:border-zinc-800 w-full justify-center gap-8\",\n                variant === \"segmented\" && \"bg-zinc-100 dark:bg-zinc-800 p-1 rounded-lg w-full max-w-md\"\n            )}>\n                {tabs.map((tab) => (\n                    <button\n                        key={tab.id}\n                        onClick={() => setActiveTab(tab.id)}\n                        className={cn(\n                            \"relative px-4 py-2 text-sm font-semibold outline-none transition-colors duration-200 z-10 flex items-center gap-2\",\n                            variant === \"pill\" && \"rounded-full\",\n                            variant === \"underline\" && \"rounded-t-md pb-3\",\n                            variant === \"segmented\" && \"rounded-md flex-1\",\n                            activeTab === tab.id\n                                ? \"text-zinc-900 dark:text-zinc-100\"\n                                : \"text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200\"\n                        )}\n                        style={{\n                            WebkitTapHighlightColor: \"transparent\",\n                        }}\n                    >\n                        {activeTab === tab.id && variant === \"pill\" && (\n                            <motion.div\n                                layoutId={`${id}-bubble`}\n                                className=\"absolute inset-0 bg-zinc-100 dark:bg-zinc-800 rounded-full -z-10 shadow-sm border border-zinc-200/50 dark:border-zinc-700/50\"\n                                transition={{ type: \"spring\", bounce: 0.2, duration: 0.6 }}\n                            />\n                        )}\n                        {activeTab === tab.id && variant === \"underline\" && (\n                            <motion.div\n                                layoutId={`${id}-underline`}\n                                className=\"absolute bottom-0 left-0 right-0 h-0.5 bg-zinc-900 dark:bg-zinc-100\"\n                                transition={{ type: \"spring\", bounce: 0.2, duration: 0.6 }}\n                            />\n                        )}\n                        {activeTab === tab.id && variant === \"segmented\" && (\n                            <motion.div\n                                layoutId={`${id}-segmented`}\n                                className=\"absolute inset-0 bg-white dark:bg-zinc-900 rounded-md -z-10 shadow-sm\"\n                                transition={{ type: \"spring\", bounce: 0.2, duration: 0.6 }}\n                            />\n                        )}\n                        {tab.icon && <span className=\"w-4 h-4\">{tab.icon}</span>}\n                        {tab.label}\n                    </button>\n                ))}\n            </div>\n\n            <motion.div\n                layout\n                className=\"mt-8 w-full max-w-md bg-white dark:bg-zinc-950 rounded-2xl p-6 shadow-sm border border-zinc-100 dark:border-zinc-800 overflow-hidden\"\n                transition={{ duration: 0.3 }}\n            >\n                <AnimatePresence mode=\"wait\">\n                    {tabs.map((tab) =>\n                        tab.id === activeTab ? (\n                            <motion.div\n                                key={tab.id}\n                                initial={{ opacity: 0, x: -10 }}\n                                animate={{ opacity: 1, x: 0 }}\n                                exit={{ opacity: 0, x: 10 }}\n                                transition={{ duration: 0.2 }}\n                                className=\"text-zinc-600 dark:text-zinc-400 text-sm\"\n                            >\n                                {tab.content}\n                            </motion.div>\n                        ) : null\n                    )}\n                </AnimatePresence>\n            </motion.div>\n        </div>\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}