{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "tabs",
  "title": "tabs",
  "description": "tabs",
  "dependencies": [
    "react-aria-components",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive"
  ],
  "files": [
    {
      "path": "src/components/ui/tabs.tsx",
      "content": "'use client'\n\nimport { createContext, use } from 'react'\nimport { composeRenderProps } from 'react-aria-components/composeRenderProps'\nimport { SelectionIndicator } from 'react-aria-components/SelectionIndicator'\nimport { useSlottedContext } from 'react-aria-components/slots'\nimport type {\n  TabListProps as TabListPrimitiveProps,\n  TabPanelProps as TabPanelPrimitiveProps,\n  TabPanelsProps,\n  TabProps as TabPrimitiveProps,\n  TabsProps as TabsPrimitiveProps,\n} from 'react-aria-components/Tabs'\nimport {\n  Tab as TabPrimitive,\n  TabList as TabListPrimitive,\n  TabPanel as TabPanelPrimitive,\n  TabPanels as PrimitiveTabPanels,\n  Tabs as TabsPrimitive,\n  TabsContext,\n} from 'react-aria-components/Tabs'\nimport { twMerge } from 'tailwind-merge'\nimport { cx } from '@/lib/primitive'\n\ninterface TabsProps extends TabsPrimitiveProps {\n  ref?: React.RefObject<HTMLDivElement>\n}\nconst Tabs = ({ className, ref, orientation = 'horizontal', ...props }: TabsProps) => {\n  return (\n    <TabsContext value={{ orientation }}>\n      <TabsPrimitive\n        orientation={orientation}\n        className={cx(\n          orientation === 'vertical' ? 'w-full flex-row' : 'flex-col',\n          'group/tabs flex gap-4 self-start forced-color-adjust-none',\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    </TabsContext>\n  )\n}\ninterface TabListContextValue {\n  selectionIndicator?: boolean\n}\nconst TabListContext = createContext<TabListContextValue | undefined>(undefined)\n\nexport function useTabListContext() {\n  const context = use(TabListContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within TabsContext.Provider')\n  }\n  return context\n}\n\ninterface TabListProps<T extends object> extends TabListPrimitiveProps<T>, TabListContextValue {\n  ref?: React.RefObject<HTMLDivElement>\n}\nconst TabList = <T extends object>({\n  className,\n  selectionIndicator = true,\n  ref,\n  ...props\n}: TabListProps<T>) => {\n  return (\n    <TabListContext value={{ selectionIndicator }}>\n      <TabListPrimitive\n        ref={ref}\n        data-slot=\"tab-list\"\n        {...props}\n        className={composeRenderProps(className, (className, { orientation }) =>\n          twMerge([\n            '[--tab-list-gutter:--spacing(1)]',\n            'relative flex forced-color-adjust-none',\n            orientation === 'horizontal' &&\n              'flex-row gap-x-(--tab-list-gutter) rounded-(--tab-list-rounded) border-b py-(--tab-list-gutter)',\n            orientation === 'vertical' &&\n              'min-w-56 shrink-0 flex-col items-start gap-y-(--tab-list-gutter) border-l px-(--tab-list-gutter) [--tab-list-gutter:--spacing(2)]',\n            className,\n          ])\n        )}\n      />\n    </TabListContext>\n  )\n}\n\nexport function TabScrollArea({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div className=\"relative\">\n      <div className={twMerge('scrollbar-none overflow-x-auto sm:overflow-x-visible', className)}>\n        <div\n          className=\"pointer-events-none absolute inset-x-0 bottom-0 h-px w-full bg-border\"\n          aria-hidden\n        />\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\ninterface TabProps extends TabPrimitiveProps {\n  ref?: React.RefObject<HTMLDivElement>\n}\nconst Tab = ({ className, ref, ...props }: TabProps) => {\n  const { orientation } = useSlottedContext(TabsContext)!\n  const { selectionIndicator } = useTabListContext()\n  return (\n    <TabPrimitive\n      {...props}\n      data-slot=\"tab\"\n      ref={ref}\n      className={cx(\n        'group/tab rounded-lg [--tab-gutter:var(--tab-gutter-x)]',\n        orientation === 'horizontal'\n          ? '[--tab-gutter-x:--spacing(2.5)] [--tab-gutter-y:--spacing(1)] first:-ms-(--tab-gutter) last:-me-(--tab-gutter)'\n          : 'w-full justify-start [--tab-gutter-x:--spacing(4)] [--tab-gutter-y:--spacing(1.5)]',\n        'relative flex cursor-default items-center whitespace-nowrap font-medium text-sm/6 outline-hidden transition [-webkit-tap-highlight-color:transparent]',\n        'px-(--tab-gutter-x) py-(--tab-gutter-y)',\n        '*:[svg]:-ms-0.5 *:[svg]:me-2 *:[svg]:size-4 *:[svg]:shrink-0 *:[svg]:self-center *:[svg]:text-muted-fg selected:*:[svg]:text-primary-subtle-fg',\n        'selected:text-primary-subtle-fg text-muted-fg hover:bg-secondary selected:hover:bg-primary-subtle hover:text-fg selected:hover:text-primary-subtle-fg focus:ring-0',\n        'disabled:opacity-50',\n        'href' in props ? 'cursor-pointer' : 'cursor-default',\n        className\n      )}\n    >\n      {composeRenderProps(props.children, (children) => (\n        <>\n          {children}\n          {selectionIndicator && (\n            <SelectionIndicator\n              data-slot=\"selected-indicator\"\n              className={twMerge(\n                'absolute bg-primary-subtle-fg duration-200 will-change-transform',\n                orientation === 'horizontal'\n                  ? 'inset-e-(--tab-gutter-x) start-(--tab-gutter-x) -bottom-[calc(var(--tab-gutter-y)+1px)] h-0.5 motion-safe:transition-[translate,width]'\n                  : '-inset-s-[calc(var(--tab-gutter-x)-var(--tab-list-gutter)+1px)] top-(--tab-gutter-y) bottom-(--tab-gutter-y) w-0.5 motion-safe:transition-[translate,height]'\n              )}\n            />\n          )}\n        </>\n      ))}\n    </TabPrimitive>\n  )\n}\n\ninterface TabPanelProps extends TabPanelPrimitiveProps {\n  ref?: React.RefObject<HTMLDivElement>\n}\n\nconst TabPanels = <T extends object>(props: TabPanelsProps<T>) => {\n  return <PrimitiveTabPanels {...props} />\n}\n\nconst TabPanel = ({ className, ref, ...props }: TabPanelProps) => {\n  return (\n    <TabPanelPrimitive\n      {...props}\n      ref={ref}\n      data-slot=\"tab-panel\"\n      className={cx('flex-1 text-fg text-sm/6 focus-visible:outline-hidden', className)}\n    />\n  )\n}\n\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps }\nexport { Tab, TabList, TabPanel, TabPanels, Tabs }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}