{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:ui",
  "title": "Tabs",
  "description": "Switches between views in the same space. Variants line (page sections) and segmented (small view switchers).",
  "dependencies": [
    "@radix-ui/react-tabs@^1.2.1",
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/tabs.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\n\nexport const tabsVariants = tv({\n  slots: {\n    list: \"inline-flex items-center\",\n    trigger: [\n      \"inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium text-muted-foreground\",\n      \"transition-colors duration-fast ease-standard hover:text-foreground\",\n      \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n      \"data-[state=active]:text-foreground\",\n    ],\n    content: \"mt-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[state=active]:animate-fade\",\n  },\n  variants: {\n    variant: {\n      /** Underline under the active tab. For page sections. */\n      line: {\n        list: \"w-full gap-4 border-b border-border\",\n        trigger: [\n          \"relative -mb-px h-9 border-b-2 border-transparent px-0.5\",\n          \"data-[state=active]:border-foreground\",\n        ],\n      },\n      /** Segmented control look. For switching views in a small area. */\n      segmented: {\n        list: \"gap-0.5 rounded-control border border-border bg-muted p-0.5\",\n        trigger: \"h-7 rounded-xs px-2.5 data-[state=active]:bg-surface data-[state=active]:shadow-[0_0_0_1px_var(--border)]\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"line\" },\n});\n\ntype TabsVariant = VariantProps<typeof tabsVariants>[\"variant\"];\nconst TabsVariantContext = React.createContext<TabsVariant>(\"line\");\n\nexport interface TabsProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,\n    VariantProps<typeof tabsVariants> {}\n\n/**\n * Switches between views in the same space. Variants line (page sections) and segmented (small view switchers).\n *\n *   <Tabs defaultValue=\"overview\">\n *     <TabsList><TabsTrigger value=\"overview\">Overview</TabsTrigger>...</TabsList>\n *     <TabsContent value=\"overview\">...</TabsContent>\n *   </Tabs>\n */\nexport const Tabs = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsProps>(\n  ({ variant = \"line\", ...props }, ref) => (\n    <TabsVariantContext.Provider value={variant}>\n      <TabsPrimitive.Root ref={ref} {...props} />\n    </TabsVariantContext.Provider>\n  ),\n);\nTabs.displayName = \"Tabs\";\n\nexport const TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const variant = React.useContext(TabsVariantContext);\n  return <TabsPrimitive.List ref={ref} className={tabsVariants({ variant }).list({ className })} {...props} />;\n});\nTabsList.displayName = \"TabsList\";\n\nexport const TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => {\n  const variant = React.useContext(TabsVariantContext);\n  return <TabsPrimitive.Trigger ref={ref} className={tabsVariants({ variant }).trigger({ className })} {...props} />;\n});\nTabsTrigger.displayName = \"TabsTrigger\";\n\nexport const TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => {\n  const variant = React.useContext(TabsVariantContext);\n  return <TabsPrimitive.Content ref={ref} className={cn(tabsVariants({ variant }).content(), className)} {...props} />;\n});\nTabsContent.displayName = \"TabsContent\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/tabs",
  "meta": {
    "hash": "4ce19bd3f9a9a829",
    "source": "packages/react/src/components/tabs.tsx",
    "exports": [
      "tabsVariants",
      "TabsProps",
      "Tabs",
      "TabsList",
      "TabsTrigger",
      "TabsContent"
    ],
    "props": {
      "Tabs": {
        "extends": "React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, VariantProps<typeof tabsVariants>",
        "props": []
      }
    },
    "variants": {
      "variants": {
        "variant": [
          "line",
          "segmented"
        ]
      },
      "defaultVariants": {
        "variant": "line"
      }
    },
    "usage": "<Tabs defaultValue=\"overview\">\n  <TabsList><TabsTrigger value=\"overview\">Overview</TabsTrigger>...</TabsList>\n  <TabsContent value=\"overview\">...</TabsContent>\n</Tabs>",
    "docsUrl": "https://junco.madebytobi.com/docs/components/tabs"
  }
}