{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "dependencies": [
    "@radix-ui/react-tabs",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://powui.dev/r/utils.json",
    "https://powui.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/tabs.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst TabsContext = React.createContext<{\n  orientation: \"horizontal\" | \"vertical\";\n  tabsPlacement: \"top\" | \"bottom\" | \"left\" | \"right\";\n  tabWidth: string;\n  tabHeight: string | undefined;\n  activeTabClassName?: string;\n}>({\n  orientation: \"horizontal\",\n  tabsPlacement: \"top\",\n  tabWidth: \"120px\",\n  tabHeight: undefined,\n});\n\nconst tabsVariants = cva(\"flex\", {\n  variants: {\n    tabsPlacement: {\n      top: \"flex-col\",\n      bottom: \"flex-col-reverse\",\n      left: \"flex-row items-stretch\",\n      right: \"flex-row-reverse items-stretch\",\n    },\n  },\n  defaultVariants: {\n    tabsPlacement: \"top\",\n  },\n});\n\nfunction Tabs({\n  className,\n  tabsPlacement = \"top\",\n  tabWidth = \"120px\",\n  tabHeight,\n  activeTabClassName,\n  style,\n  ...props\n}: Omit<React.ComponentProps<typeof TabsPrimitive.Root>, \"orientation\"> &\n  VariantProps<typeof tabsVariants> & {\n    tabWidth?: string;\n    tabHeight?: string;\n    activeTabClassName?: string;\n  }) {\n  const orientation =\n    tabsPlacement === \"left\" || tabsPlacement === \"right\"\n      ? \"vertical\"\n      : \"horizontal\";\n  return (\n    <TabsContext.Provider\n      value={{\n        orientation,\n        tabsPlacement,\n        tabWidth,\n        tabHeight,\n        activeTabClassName,\n      }}\n    >\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        orientation={orientation}\n        style={{\n          ...(orientation === \"vertical\"\n            ? {\n                [tabsPlacement === \"left\" ? \"paddingLeft\" : \"paddingRight\"]:\n                  `calc(${tabWidth} * 0.25)`,\n              }\n            : {}),\n          ...style,\n        }}\n        className={cn(tabsVariants({ tabsPlacement }), className)}\n        {...props}\n      />\n    </TabsContext.Provider>\n  );\n}\n\nconst tabsListVariants = cva(\"text-muted-foreground no-scrollbar\", {\n  variants: {\n    tabsPlacement: {\n      top: \"inline-flex items-stretch max-w-full overflow-auto\",\n      bottom: \"inline-flex items-stretch max-w-full overflow-auto\",\n      left: \"flex flex-col items-stretch\",\n      right: \"flex flex-col items-stretch\",\n    },\n  },\n  defaultVariants: {\n    tabsPlacement: \"top\",\n  },\n});\n\nfunction TabsList({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const { tabsPlacement, tabWidth, orientation, tabHeight } =\n    React.useContext(TabsContext);\n\n  const listStyle: React.CSSProperties = { ...style };\n  if (orientation === \"vertical\") {\n    listStyle.width = tabWidth;\n  } else {\n    // Bleed padding for horizontal: max(8px fallback, 25% of height)\n    const paddingValue = `max(8px, calc(${tabHeight || \"2rem\"} * 0.25))`;\n    if (tabsPlacement === \"top\") listStyle.paddingTop = paddingValue;\n    if (tabsPlacement === \"bottom\") listStyle.paddingBottom = paddingValue;\n  }\n\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      style={listStyle}\n      className={cn(tabsListVariants({ tabsPlacement }), className)}\n      {...props}\n    />\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground inline-flex flex-1 items-center justify-center gap-1.5 px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow,transform] 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 border-foreground bg-card hover:bg-card\",\n  {\n    variants: {\n      tabsPlacement: {\n        top: [\n          \"border-l-4 last:border-r-4 border-y-4\",\n          \"data-[state=active]:last:translate-x-[-12.5%] data-[state=active]:first:translate-x-[12.5%] data-[state=active]:translate-x-[6.25%] data-[state=active]:translate-y-[-12.5%] data-[state=active]:z-10 data-[state=active]:scale-125 data-[state=active]:border-4 data-[state=active]:border-b-0 dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input\",\n        ],\n        bottom: [\n          \"border-l-4 last:border-r-4 border-y-4\",\n          \"data-[state=active]:last:translate-x-[-12.5%] data-[state=active]:first:translate-x-[12.5%] data-[state=active]:translate-x-[6.25%] data-[state=active]:translate-y-[12.5%] data-[state=active]:z-10 data-[state=active]:scale-125 data-[state=active]:border-4 data-[state=active]:border-t-0 dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input\",\n        ],\n        left: [\n          \"w-full whitespace-normal border-t-4 last:border-b-4 border-x-4\",\n          \"data-[state=active]:translate-y-[6.25%] data-[state=active]:first:translate-y-[12.5%] data-[state=active]:last:translate-y-[-12.5%] data-[state=active]:z-10 data-[state=active]:scale-125 data-[state=active]:border-4 data-[state=active]:border-r-0 dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input data-[state=active]:-translate-x-[12.5%]\",\n        ],\n        right: [\n          \"w-full whitespace-normal border-t-4 last:border-b-4 border-x-4\",\n          \"data-[state=active]:translate-y-[6.25%] data-[state=active]:first:translate-y-[12.5%] data-[state=active]:last:translate-y-[-12.5%] data-[state=active]:z-10 data-[state=active]:scale-125 data-[state=active]:border-4 data-[state=active]:border-l-0 dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input data-[state=active]:translate-x-[12.5%]\",\n        ],\n      },\n    },\n    defaultVariants: {\n      tabsPlacement: \"top\",\n    },\n  },\n);\n\nfunction TabsTrigger({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const { orientation, tabsPlacement, tabHeight, activeTabClassName } =\n    React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      style={\n        orientation === \"horizontal\" && tabHeight\n          ? { height: tabHeight, ...style }\n          : style\n      }\n      className={cn(\n        tabsTriggerVariants({ tabsPlacement }),\n        className,\n        activeTabClassName,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst tabsContentVariants = cva(\"outline-none border-4 border-foreground\", {\n  variants: {\n    tabsPlacement: {\n      top: \"border-t-0\",\n      bottom: \"border-b-0\",\n      left: \"border-l-0 flex-1 min-w-0 self-stretch flex flex-col [&>*]:flex-1\",\n      right:\n        \"border-r-0 flex-1 min-w-0 self-stretch flex flex-col [&>*]:flex-1\",\n    },\n  },\n  defaultVariants: {\n    tabsPlacement: \"top\",\n  },\n});\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  const { tabsPlacement } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(tabsContentVariants({ tabsPlacement }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}