{
  "schemaVersion": 1,
  "name": "tabs",
  "useFor": "Use to switch between views of the same thing on a page (Mailboxes, Contact rules, Custom domains). Pass full to TabsList for two equal choices that fill a form's width (Login, Sign up).",
  "constraints": [
    "Underlined tabs",
    "A purple selected tab",
    "Animating the white key between tabs"
  ],
  "documentation": "",
  "source": "Figma 427:2715: Email, iMessage, Webhooks and Login tabs",
  "exports": [
    "Tabs",
    "TabsList",
    "TabsTrigger",
    "TabsContent"
  ],
  "client": true,
  "docsUrl": "https://inkbox-ds.vercel.app/components/tabs",
  "markdownUrl": "https://inkbox-ds.vercel.app/r/tabs.md",
  "examples": [
    {
      "path": "examples/tabs.tsx",
      "content": "\"use client\";\n\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport function Preview() {\n  return (\n    <Tabs defaultValue=\"mailboxes\" className=\"w-full\">\n      <TabsList>\n        <TabsTrigger value=\"mailboxes\">Mailboxes</TabsTrigger>\n        <TabsTrigger value=\"rules\">Contact rules</TabsTrigger>\n        <TabsTrigger value=\"domains\">Custom domains</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"mailboxes\" className=\"text-body text-fg-muted\">Manage mailboxes for your organization.</TabsContent>\n      <TabsContent value=\"rules\" className=\"text-body text-fg-muted\">Allow or block who can reach each agent.</TabsContent>\n      <TabsContent value=\"domains\" className=\"text-body text-fg-muted\">Send and receive from your own domain.</TabsContent>\n    </Tabs>\n  );\n}\n\nexport function Full() {\n  return (\n    <Tabs defaultValue=\"login\" className=\"w-full max-w-86\">\n      <TabsList full>\n        <TabsTrigger value=\"login\">Login</TabsTrigger>\n        <TabsTrigger value=\"signup\">Sign up</TabsTrigger>\n      </TabsList>\n    </Tabs>\n  );\n}\n",
      "exports": [
        "Preview",
        "Full"
      ],
      "requires": [
        "tabs"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Preview",
          "url": "https://inkbox-ds.vercel.app/preview/tabs/Preview"
        },
        {
          "name": "Full",
          "url": "https://inkbox-ds.vercel.app/preview/tabs/Full"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Tabs",
  "description": "A lilac track of medium labels; the selected tab is a white key with Shadow/S.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "radix-ui"
  ],
  "files": [
    {
      "path": "components/ui/tabs.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\n// The console's tabs (Email: Mailboxes, Contact rules, Custom domains; Login and Sign up): a 42px lilac track with\n// 10px corners and a 2px inset, 38px tabs 8px apart with 9px of side padding and a 14px medium ink label. The selected\n// tab is a white key with 8px corners and Shadow/S. `full` stretches the tabs to share the track (Login, Sign up).\n// Switching is instant: tabs are used many times a day, and the white key moving would only slow the eye.\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" className={cn(\"flex flex-col gap-4\", className)} {...props} />;\n}\n\nfunction TabsList({ className, full = false, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & { full?: boolean }) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-full={full ? \"true\" : undefined}\n      className={cn(\"inline-flex h-10.5 w-fit max-w-full items-center gap-2 overflow-x-auto rounded-panel bg-subtle p-0.5 [scrollbar-width:none]\", full && \"flex w-full\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"inline-flex h-9.5 shrink-0 items-center justify-center gap-2 rounded-control px-2.25 font-sans text-body leading-tight font-medium whitespace-nowrap text-fg outline-none transition-[background-color,box-shadow,color] duration-150 ease-out hover:text-fg-brand focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring disabled:pointer-events-none disabled:text-fg-muted data-[state=active]:bg-surface data-[state=active]:shadow-s data-[state=active]:hover:text-fg motion-reduce:transition-none in-data-[full=true]:flex-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content data-slot=\"tabs-content\" className={cn(\"min-w-0 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\", className)} {...props} />;\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"
    }
  ]
}