{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "title": "Collapsible",
  "description": "Collapsible component built on Base UI, styled with sc1m tokens.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://sc1m.vercel.app/r/tokens.json",
    "https://sc1m.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "src/components/ui/collapsible/collapsible.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport { cn } from \"@/lib/cn\";\n\nexport const Collapsible = BaseCollapsible.Root;\n\nexport function CollapsibleTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseCollapsible.Trigger>) {\n  return (\n    <BaseCollapsible.Trigger\n      className={cn(\n        \"group flex w-full items-center justify-between gap-2 rounded-md border border-line bg-surface-raised px-3 py-2 text-left text-sm font-medium text-fg\",\n        \"transition-colors duration-fast ease-out-quad hover:bg-surface\",\n        \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {/* the caret flips scaleY(-1) rather than morphing its path — CSS `d:`\n          interpolation is Chromium-only, and the flip passes through the same\n          flat midpoint. Phosphor's caret is NOT centred in its 256 box — round\n          caps put the bbox centre at y=136 — so the geometry is translated by\n          -8 to make the flip land on the \"^\" without a 1px jump. */}\n      {/* phosphor: caret-down regular */}\n      <svg\n        aria-hidden\n        viewBox=\"0 0 256 256\"\n        fill=\"currentColor\"\n        className=\"size-4 shrink-0 text-fg-subtle transition-transform duration-(--acc-chevron) ease-(--acc-spring) group-data-panel-open:-scale-y-100 motion-reduce:transition-none\"\n      >\n        <g transform=\"translate(0,-8)\">\n          <path d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\" />\n        </g>\n      </svg>\n    </BaseCollapsible.Trigger>\n  );\n}\n\nexport function CollapsiblePanel({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseCollapsible.Panel>) {\n  return (\n    <BaseCollapsible.Panel\n      className={cn(\n        // Base UI measures the content into --collapsible-panel-height;\n        // entering/exiting states pin height to 0 so open/close tweens.\n        \"h-(--collapsible-panel-height) overflow-hidden text-sm text-fg-muted\",\n        // spring on the way open only: the overshoot settles the panel into\n        // its measured height. Closing keeps --acc-ease — an overshoot there\n        // drives height past 0, which clamps, so the motion just ends flat.\n        \"transition-[height,opacity,filter] duration-(--acc-collapse) ease-(--acc-ease)\",\n        \"data-open:duration-(--acc-expand) data-open:ease-(--acc-spring)\",\n        \"data-starting-style:h-0 data-starting-style:opacity-0 data-starting-style:blur-[2px]\",\n        \"data-ending-style:h-0 data-ending-style:opacity-0 data-ending-style:blur-[2px]\",\n        \"motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    >\n      {/* padding lives on the inner element, never the measured panel —\n          padding on the collapsing box leaves a residual height strip */}\n      <div className=\"px-3 pt-2 pb-3\">{children}</div>\n    </BaseCollapsible.Panel>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}