{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-headless-tabs",
  "title": "Tabs",
  "description": "Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@animate-ui/v1/primitives-headless-tabs"
  ],
  "files": [
    {
      "path": "registry/components/headless/tabs/index.tsx",
      "content": "import * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  TabGroup as TabGroupPrimitive,\n  TabList as TabListPrimitive,\n  Tab as TabPrimitive,\n  TabPanel as TabPanelPrimitive,\n  TabPanels as TabPanelsPrimitive,\n  TabHighlight as TabHighlightPrimitive,\n  TabHighlightItem as TabHighlightItemPrimitive,\n  type TabGroupProps as TabGroupPrimitiveProps,\n  type TabListProps as TabListPrimitiveProps,\n  type TabProps as TabPrimitiveProps,\n  type TabPanelProps as TabPanelPrimitiveProps,\n  type TabPanelsProps as TabPanelsPrimitiveProps,\n} from '@/components/animate-ui/primitives/headless/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabGroupProps<TTag extends React.ElementType = 'div'> =\n  TabGroupPrimitiveProps<TTag>;\n\nfunction TabGroup<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabGroupProps<TTag>) {\n  return (\n    <TabGroupPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabListProps<TTag extends React.ElementType = 'div'> =\n  TabListPrimitiveProps<TTag>;\n\nfunction TabList<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabListProps<TTag>) {\n  return (\n    <TabHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabListPrimitive\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    </TabHighlightPrimitive>\n  );\n}\n\ntype TabProps<TTag extends React.ElementType = 'button'> =\n  TabPrimitiveProps<TTag>;\n\nfunction Tab<TTag extends React.ElementType = 'button'>({\n  className,\n  ...props\n}: TabProps<TTag>) {\n  return (\n    <TabHighlightItemPrimitive index={props.index} className=\"flex-1\">\n      <TabPrimitive\n        className={cn(\n          \"data-[active='true']: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    </TabHighlightItemPrimitive>\n  );\n}\n\ntype TabPanelsProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelsPrimitiveProps<TTag>;\n\nfunction TabPanels<TTag extends React.ElementType = typeof motion.div>(\n  props: TabPanelsProps<TTag>,\n) {\n  return <TabPanelsPrimitive {...props} />;\n}\n\ntype TabPanelProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelPrimitiveProps<TTag>;\n\nfunction TabPanel<TTag extends React.ElementType = typeof motion.div>({\n  className,\n  ...props\n}: TabPanelProps<TTag>) {\n  return (\n    <TabPanelPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabGroup,\n  TabList,\n  Tab,\n  TabPanels,\n  TabPanel,\n  type TabGroupProps,\n  type TabListProps,\n  type TabProps,\n  type TabPanelsProps,\n  type TabPanelProps,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/components/headless/tabs.tsx"
    }
  ],
  "type": "registry:ui"
}