{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-tabs",
  "title": "Animated Tabs",
  "author": "designbycode",
  "dependencies": [
    "framer-motion",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "resources/js/registry/new-york/components/ui/tabs/animated-tabs.tsx",
      "content": "'use client';\n\nimport { motion } from 'framer-motion';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useId, useState } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type AnimatedTabsProps = Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'onChange'\n> & {\n    tabs: {\n        id: string;\n        label: ReactNode;\n        content?: ReactNode;\n    }[];\n    value?: string;\n    defaultValue?: string;\n    onChange?: (tabId: string) => void;\n    tabsClassName?: string;\n    tabClassName?: string;\n    activeTabClassName?: string;\n    inactiveTabClassName?: string;\n    indicatorClassName?: string;\n    contentClassName?: string;\n    showContent?: boolean;\n};\n\nexport function AnimatedTabs({\n    tabs,\n    value,\n    defaultValue,\n    onChange,\n    className,\n    tabsClassName,\n    tabClassName,\n    activeTabClassName,\n    inactiveTabClassName,\n    indicatorClassName,\n    contentClassName,\n    showContent = false,\n    ...props\n}: AnimatedTabsProps) {\n    const id = useId();\n\n    const resolveIndex = (tabId?: string) => {\n        if (!tabId) {\n            return 0;\n        }\n\n        const idx = tabs.findIndex((t) => t.id === tabId);\n\n        return idx >= 0 ? idx : 0;\n    };\n\n    const [activeIndex, setActiveIndex] = useState(() =>\n        resolveIndex(defaultValue),\n    );\n\n    const isControlled = value !== undefined;\n    const activeTabIndex = isControlled ? resolveIndex(value) : activeIndex;\n    const activeTab = tabs[activeTabIndex] ?? tabs[0];\n\n    const handleChange = (index: number) => {\n        if (!isControlled) {\n            setActiveIndex(index);\n        }\n\n        onChange?.(tabs[index].id);\n    };\n\n    return (\n        <div className={cn('w-full', className)} {...props}>\n            <div\n                role=\"tablist\"\n                className={cn(\n                    'flex items-center gap-1 rounded-md border border-border bg-background p-1',\n                    tabsClassName,\n                )}\n            >\n                {tabs.map((tab, index) => (\n                    <button\n                        key={tab.id}\n                        role=\"tab\"\n                        aria-selected={activeTabIndex === index}\n                        aria-controls={`${id}-panel-${tab.id}`}\n                        id={`${id}-tab-${tab.id}`}\n                        onClick={() => handleChange(index)}\n                        className={cn(\n                            'relative rounded-sm px-4 py-2 text-xs font-medium transition focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none',\n                            tabClassName,\n                            activeTabIndex === index\n                                ? cn('text-foreground', activeTabClassName)\n                                : cn(\n                                      'text-muted-foreground hover:text-foreground',\n                                      inactiveTabClassName,\n                                  ),\n                        )}\n                    >\n                        {activeTabIndex === index && (\n                            <motion.div\n                                layoutId={`${id}-indicator`}\n                                className={cn(\n                                    'absolute inset-0 rounded-sm bg-muted',\n                                    indicatorClassName,\n                                )}\n                                transition={{\n                                    type: 'spring',\n                                    stiffness: 500,\n                                    damping: 30,\n                                }}\n                            />\n                        )}\n                        <span className=\"relative z-10\">{tab.label}</span>\n                    </button>\n                ))}\n            </div>\n\n            {showContent && activeTab?.content && (\n                <div\n                    role=\"tabpanel\"\n                    id={`${id}-panel-${activeTab.id}`}\n                    aria-labelledby={`${id}-tab-${activeTab.id}`}\n                    className={cn('mt-4', contentClassName)}\n                >\n                    <motion.div\n                        key={activeTab.id}\n                        initial={{ opacity: 0, y: 4 }}\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: -4 }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {activeTab.content}\n                    </motion.div>\n                </div>\n            )}\n        </div>\n    );\n}\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "category": "components",
    "version": "1.0.0"
  },
  "type": "registry:ui"
}