{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "tabs",
  "title": "tabs",
  "description": "tabs",
  "dependencies": [
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive"
  ],
  "files": [
    {
      "path": "src/components/ui/tabs.tsx",
      "content": "\"use client\"\n\nimport { createContext, use, useSyncExternalStore } 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  TabPanels as PrimitiveTabPanels,\n  TabList as TabListPrimitive,\n  TabPanel as TabPanelPrimitive,\n  Tab as TabPrimitive,\n  TabsContext,\n  Tabs as TabsPrimitive,\n} from \"react-aria-components/Tabs\"\nimport { cn } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\n\nexport interface TabsProps extends TabsPrimitiveProps {\n  ref?: React.RefObject<HTMLDivElement>\n}\nexport function 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}\nexport interface 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\nexport interface TabListProps<T extends object>\n  extends TabListPrimitiveProps<T>, TabListContextValue {\n  ref?: React.RefObject<HTMLDivElement>\n}\nexport function 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          cn([\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={cn(\"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\nexport interface TabProps extends TabPrimitiveProps {\n  ref?: React.RefObject<HTMLDivElement>\n}\n\nfunction subscribeToHydration() {\n  return () => {}\n}\n\nexport function Tab({ className, ref, ...props }: TabProps) {\n  const isHydrated = useSyncExternalStore(\n    subscribeToHydration,\n    () => true,\n    () => false\n  )\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-foreground selected:*:[svg]:text-primary-subtle-foreground\",\n        \"selected:text-primary-subtle-foreground text-muted-foreground hover:bg-secondary selected:hover:bg-primary-subtle hover:text-foreground selected:hover:text-primary-subtle-foreground 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 && isHydrated && (\n            <SelectionIndicator\n              data-slot=\"selected-indicator\"\n              className={cn(\n                \"absolute bg-primary-subtle-foreground 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\nexport interface TabPanelProps extends TabPanelPrimitiveProps {\n  ref?: React.RefObject<HTMLDivElement>\n}\n\nexport function TabPanels<T extends object>(props: TabPanelsProps<T>) {\n  return <PrimitiveTabPanels {...props} />\n}\n\nexport function 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-foreground text-sm/6 focus-visible:outline-hidden\", className)}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-primary-subtle": "var(--primary-subtle)",
      "color-primary-subtle-foreground": "var(--primary-subtle-foreground)"
    },
    "light": {
      "primary-subtle": "oklch(0.623 0.214 259.815 / 0.15)",
      "primary-subtle-foreground": "oklch(0.488 0.243 264.376)"
    },
    "dark": {
      "primary-subtle": "oklch(0.623 0.214 259.815 / 0.1)",
      "primary-subtle-foreground": "oklch(0.707 0.165 254.624)"
    }
  },
  "type": "registry:ui"
}