{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-tabs",
  "type": "registry:ui",
  "title": "Tabs",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwind-merge",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Tabs.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanels as RACTabPanels,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  SelectionIndicator,\n  type TabListProps,\n  type TabPanelProps,\n  type TabPanelsProps,\n  type TabProps,\n  type TabsProps\n} from 'react-aria-components/Tabs';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {tv} from 'tailwind-variants';\nimport {focusRing} from '@/registry/react-aria/lib/react-aria-utils';\nimport {twMerge} from 'tailwind-merge';\n\nconst tabsStyles = tv({\n  base: 'flex gap-4 font-sans max-w-full',\n  variants: {\n    orientation: {\n      horizontal: 'flex-col',\n      vertical: 'flex-row'\n    }\n  }\n});\n\nexport function Tabs(props: TabsProps) {\n  return (\n    <RACTabs\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        tabsStyles({...renderProps, className})\n      )}\n    />\n  );\n}\n\nconst tabListStyles = tv({\n  base: 'flex max-w-full p-1 -m-1 overflow-x-auto overflow-y-clip [scrollbar-width:none]',\n  variants: {\n    orientation: {\n      horizontal: 'flex-row',\n      vertical: 'flex-col items-start'\n    }\n  }\n});\n\nexport function TabList<T>(props: TabListProps<T>) {\n  return (\n    <RACTabList\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        tabListStyles({...renderProps, className})\n      )}\n    />\n  );\n}\n\nconst tabProps = tv({\n  extend: focusRing,\n  base: 'group relative flex items-center cursor-default rounded-full px-3 py-1.5 text-sm font-medium transition forced-color-adjust-none [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isDisabled: {\n      true: 'text-neutral-200 dark:text-neutral-600 forced-colors:text-[GrayText] selected:text-white dark:selected:text-neutral-500 forced-colors:selected:text-[HighlightText] selected:bg-neutral-200 dark:selected:bg-neutral-600 forced-colors:selected:bg-[GrayText]'\n    }\n  }\n});\n\nexport function Tab(props: TabProps) {\n  return (\n    <RACTab\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        tabProps({...renderProps, className})\n      )}>\n      {composeRenderProps(props.children, children => (\n        <>\n          {children}\n          <SelectionIndicator className=\"absolute top-0 left-0 w-full h-full z-10 bg-white rounded-full mix-blend-difference group-disabled:bg-neutral-400 group-disabled:mix-blend-normal group-disabled:dark:bg-neutral-600 group-disabled:-z-1 motion-safe:transition-[translate,width,height] \" />\n        </>\n      ))}\n    </RACTab>\n  );\n}\n\nexport function TabPanels<T>(props: TabPanelsProps<T>) {\n  return (\n    <RACTabPanels\n      {...props}\n      className={twMerge(\n        'relative h-(--tab-panel-height) motion-safe:transition-[height] overflow-clip',\n        props.className\n      )}\n    />\n  );\n}\n\nconst tabPanelStyles = tv({\n  extend: focusRing,\n  base: 'flex-1 box-border p-4 text-sm text-neutral-900 dark:text-neutral-100 transition entering:opacity-0 exiting:opacity-0 exiting:absolute exiting:top-0 exiting:left-0 exiting:w-full'\n});\n\nexport function TabPanel(props: TabPanelProps) {\n  return (\n    <RACTabPanel\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        tabPanelStyles({...renderProps, className})\n      )}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}