{
  "schemaVersion": 1,
  "name": "install-tabs",
  "useFor": "Use under a closing call to action or in a getting-started section, for the one command that installs the SDK. Pass one entry per package manager.",
  "constraints": [
    "More than one command per tab",
    "A light install box",
    "Tabs that change anything but the command"
  ],
  "documentation": "`InstallTabs` takes `commands` (`{ label, command }[]`, one per package manager), `label` (the tab list's accessible\nname, default \"Package manager\"), `defaultIndex` and `className`. The first word of each command is set as the tool,\nthe rest as its arguments. Copy always copies the selected command.",
  "source": "opencommerce-agentcard-web src/components/install-tabs.tsx, src/components/cta.tsx",
  "exports": [
    "InstallTabs",
    "Install"
  ],
  "client": true,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/install-tabs",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/install-tabs.md",
  "examples": [
    {
      "path": "examples/install-tabs.tsx",
      "content": "import { InstallTabs } from \"@/components/ui/install-tabs\";\n\nconst INSTALL = [\n  { label: \"npm\", command: \"npm install @agentcard/sdk\" },\n  { label: \"pnpm\", command: \"pnpm add @agentcard/sdk\" },\n  { label: \"yarn\", command: \"yarn add @agentcard/sdk\" },\n  { label: \"bun\", command: \"bun add @agentcard/sdk\" },\n];\n\nexport function Site() {\n  return (\n    <div className=\"flex justify-center rounded-shell border border-line bg-subtle px-6 py-16\">\n      <InstallTabs commands={INSTALL} />\n    </div>\n  );\n}\n",
      "exports": [
        "Site"
      ],
      "requires": [
        "install-tabs"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/install-tabs/Site"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Install tabs",
  "description": "One install line on ink, a tab per package manager and a Copy key.",
  "surface": "site",
  "kinds": [
    "code-window",
    "tabs"
  ],
  "requires": [
    "theme",
    "copy-button",
    "utils"
  ],
  "packages": [],
  "files": [
    {
      "path": "components/ui/install-tabs.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { CopyButton } from \"@/components/ui/copy-button\";\nimport { cn } from \"@/lib/utils\";\n\ntype Install = { label: string; command: string };\n\n// The brand's install box (install-tabs.tsx; computed): one line to install the SDK on ink, with a tab per package\n// manager and the dark Copy key. 12px corners on a 9 percent ink edge with the code box's drop; the tabs are the 13px\n// platform mono, half white and turning white under the pointer, the selected one on a 2px white rule. The command is\n// 14px mono: the tool in the lifted blue, its arguments in sky. Arrow keys, Home and End move between tabs.\nfunction InstallTabs({ commands, label = \"Package manager\", defaultIndex = 0, className }: { commands: Install[]; label?: string; defaultIndex?: number; className?: string }) {\n  const [active, setActive] = React.useState(defaultIndex);\n  const id = React.useId();\n  const tab = commands[active] ?? commands[0];\n  if (!tab) return null;\n  const [tool, ...args] = tab.command.split(\" \");\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    const last = commands.length - 1;\n    const next = { ArrowRight: active === last ? 0 : active + 1, ArrowLeft: active === 0 ? last : active - 1, Home: 0, End: last }[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    setActive(next);\n    event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')[next]?.focus();\n  };\n\n  return (\n    <div data-slot=\"install-tabs\" className={cn(\"w-full max-w-md overflow-hidden rounded-panel border border-line bg-code text-left shadow-code\", className)}>\n      <div className=\"flex items-center justify-between border-b border-line-on-code pr-2 pl-3\">\n        <div role=\"tablist\" aria-label={label} className=\"flex\">\n          {commands.map((t, i) => (\n            <button\n              key={t.label}\n              type=\"button\"\n              role=\"tab\"\n              id={`${id}-tab-${i}`}\n              aria-selected={i === active}\n              aria-controls={`${id}-panel`}\n              tabIndex={i === active ? 0 : -1}\n              onClick={() => setActive(i)}\n              onKeyDown={onKeyDown}\n              className={cn(\n                \"-mb-px border-b-2 px-3 py-2.5 font-mono text-snippet leading-none outline-none transition-[border-color,color] duration-160 ease-out focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-sky\",\n                i === active ? \"border-white text-white\" : \"border-transparent text-white/50 hover:text-white/80\",\n              )}\n            >\n              {t.label}\n            </button>\n          ))}\n        </div>\n        <CopyButton key={active} value={tab.command} label={`Copy ${tab.label} command`} dark />\n      </div>\n      <div role=\"tabpanel\" id={`${id}-panel`} aria-labelledby={`${id}-tab-${active}`} className=\"px-5 py-4 font-mono text-body-sm leading-code text-fg-code\">\n        <span className=\"text-fg-code-key\">{tool}</span> <span className=\"text-fg-code-string\">{args.join(\" \")}</span>\n      </div>\n    </div>\n  );\n}\n\nexport { InstallTabs };\nexport type { Install };\n"
    }
  ]
}