{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-animate-tabs",
  "title": "Tabs",
  "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
  "registryDependencies": [
    "@animate-ui/primitives-animate-tabs"
  ],
  "files": [
    {
      "path": "registry/components/animate/tabs/index.tsx",
      "content": "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTrigger as TabsTriggerPrimitive,\n  TabsContent as TabsContentPrimitive,\n  TabsContents as TabsContentsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTriggerProps as TabsTriggerPrimitiveProps,\n  type TabsContentProps as TabsContentPrimitiveProps,\n  type TabsContentsProps as TabsContentsPrimitiveProps,\n} from '@/components/animate-ui/primitives/animate/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTriggerPrimitive\n        className={cn(\n          \"data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n  return <TabsContentsPrimitive {...props} />;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsContentPrimitive\n      className={cn('outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/components/animate/tabs.tsx"
    }
  ],
  "type": "registry:ui"
}