{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-tabs",
  "title": "Animated Tabs",
  "description": "Tabs with smooth animated indicator transitions.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/wise-ui/components/animated-tabs.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion } from \"motion/react\"\nimport { cn } from \"@/registry/wise-ui/lib/utils\"\n\ninterface Tab {\n  id: string\n  label: string\n  icon?: React.ReactNode\n}\n\ninterface AnimatedTabsProps {\n  tabs: Tab[]\n  activeTab: string\n  onTabChange: (tabId: string) => void\n  className?: string\n}\n\nfunction AnimatedTabs({\n  tabs,\n  activeTab,\n  onTabChange,\n  className,\n}: AnimatedTabsProps) {\n  const layoutId = React.useId()\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex items-center gap-1 rounded-lg border border-border bg-muted/50 p-1\",\n        className\n      )}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === activeTab\n        return (\n          <button\n            key={tab.id}\n            onClick={() => onTabChange(tab.id)}\n            className={cn(\n              \"relative z-10 inline-flex cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors\",\n              isActive\n                ? \"text-foreground\"\n                : \"text-muted-foreground hover:text-foreground\"\n            )}\n          >\n            {isActive && (\n              <motion.div\n                layoutId={`tab-pill-${layoutId}`}\n                className=\"absolute inset-0 rounded-md bg-background shadow-sm\"\n                transition={{ type: \"spring\", stiffness: 500, damping: 35 }}\n                style={{ zIndex: -1 }}\n              />\n            )}\n            {tab.icon && <span className=\"inline-flex shrink-0\">{tab.icon}</span>}\n            {tab.label}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\nAnimatedTabs.displayName = \"AnimatedTabs\"\n\nexport { AnimatedTabs }\nexport type { AnimatedTabsProps, Tab }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}