{
  "schemaVersion": 1,
  "name": "collapsible",
  "useFor": "Use to tuck away secondary detail on a page (an order's line items, advanced checkout settings). Make the CollapsibleTrigger a row with its name and a CollapsibleChevron. For a list of questions use the accordion.",
  "constraints": [
    "Hiding the main content of a page",
    "A collapsible inside a collapsible",
    "Opening on hover"
  ],
  "documentation": "",
  "source": "Extension from opencommerce-agentcard-web src/app/globals.css (the questions' slide) and accordion.tsx",
  "exports": [
    "Collapsible",
    "CollapsibleChevron",
    "CollapsibleContent",
    "CollapsibleTrigger"
  ],
  "client": true,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/collapsible",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/collapsible.md",
  "examples": [
    {
      "path": "examples/collapsible.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\n\nconst ITEMS = [\n  { name: \"Trail runner, size 10\", qty: 1, price: \"$128.00\" },\n  { name: \"Merino socks, 3 pack\", qty: 2, price: \"$36.00\" },\n  { name: \"Water bottle, 750ml\", qty: 1, price: \"$22.00\" },\n];\n\nexport function Site() {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <div className=\"w-full max-w-110 rounded-panel border border-line-window bg-surface p-5 shadow-card\">\n      <div className=\"flex items-baseline justify-between gap-4\">\n        <p className=\"font-display text-h5 font-medium tracking-tight text-fg\">Order ord_8KQ2</p>\n        <p className=\"font-mono text-snippet text-fg tabular-nums\">$222.00</p>\n      </div>\n      <Collapsible open={open} onOpenChange={setOpen} className=\"mt-3\">\n        <CollapsibleTrigger className=\"flex w-full items-center justify-between gap-3 rounded-menu py-1.5 text-left text-body-sm text-fg-muted transition-colors duration-150 ease-out hover:text-fg motion-reduce:transition-none\">\n          {open ? \"Hide items\" : \"Show 3 items\"}\n          <CollapsibleChevron />\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <ul className=\"mt-2 border-t border-line\">\n            {ITEMS.map((item) => (\n              <li key={item.name} className=\"flex items-center justify-between gap-4 border-b border-line py-2.5 text-body-sm last:border-b-0\">\n                <span className=\"text-fg\">\n                  {item.name} <span className=\"text-fg-muted\">x{item.qty}</span>\n                </span>\n                <span className=\"font-mono text-snippet text-fg tabular-nums\">{item.price}</span>\n              </li>\n            ))}\n          </ul>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  );\n}\n\nexport function Settings() {\n  return (\n    <Collapsible defaultOpen className=\"w-full max-w-110\">\n      <CollapsibleTrigger className=\"flex w-full items-center justify-between gap-3 border-b border-line py-3 text-left text-body text-fg\">\n        Advanced checkout settings\n        <CollapsibleChevron />\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <dl className=\"grid grid-cols-[1fr_auto] gap-x-4 gap-y-2 py-3 text-body-sm\">\n          <dt className=\"text-fg-muted\">Retry a failed checkout</dt>\n          <dd className=\"text-fg\">Twice</dd>\n          <dt className=\"text-fg-muted\">Ask before orders over</dt>\n          <dd className=\"font-mono text-snippet text-fg tabular-nums\">$500.00</dd>\n          <dt className=\"text-fg-muted\">Ship to</dt>\n          <dd className=\"text-fg\">Billing address</dd>\n        </dl>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n",
      "exports": [
        "Site",
        "Settings"
      ],
      "requires": [
        "collapsible"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/collapsible/Site"
        },
        {
          "name": "Settings",
          "url": "https://opencommerce-ds.vercel.app/preview/collapsible/Settings"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Collapsible",
  "description": "A section that slides open in place under a quiet row with a turning chevron.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "@radix-ui/react-collapsible"
  ],
  "files": [
    {
      "path": "components/ui/collapsible.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nimport { cn } from \"@/lib/utils\";\n\n// A section that opens in place (the questions' slide, accordion.tsx): the content slides open to its height (200ms\n// ease-out) and closes faster (160ms). The trigger is the page's quiet row: 14px Inter at 64 percent ink that\n// turns ink under the pointer, with a drawn chevron that turns a half when open. Reduced motion opens it at once.\nfunction Collapsible(props: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-slot=\"collapsible-trigger\"\n      className={cn(\n        \"group/collapsible-trigger outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring disabled:pointer-events-none disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The chevron a trigger can carry: it points down, and up while open (200ms ease-out). */\nfunction CollapsibleChevron({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden\n      data-slot=\"collapsible-chevron\"\n      viewBox=\"0 0 16 16\"\n      className={cn(\"size-3.5 shrink-0 fill-none stroke-current text-fg-muted transition-[rotate] duration-200 ease-out [stroke-linecap:round] [stroke-linejoin:round] [stroke-width:1.5] group-data-[state=open]/collapsible-trigger:rotate-180 motion-reduce:transition-none\", className)}\n    >\n      <path d=\"m4 6 4 4 4-4\" />\n    </svg>\n  );\n}\n\nfunction CollapsibleContent({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-slot=\"collapsible-content\"\n      className={cn(\n        \"overflow-hidden [--radix-accordion-content-height:var(--radix-collapsible-content-height)] motion-safe:data-[state=closed]:animate-accordion-up data-[state=closed]:[animation-duration:var(--ds-duration-fast)] motion-safe:data-[state=open]:animate-accordion-down motion-reduce:animate-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger };\n"
    }
  ]
}