{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"collapsible","type":"registry:ui","title":"Collapsible","description":"A single disclosure for optional detail.","dependencies":["clsx","lucide-react","tailwind-merge"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/collapsible.tsx","type":"registry:ui","target":"components/ui/collapsible.tsx","content":"\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { useId, useState, type ReactNode } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/accordion-panel.css\";\n\nexport function Collapsible({\n  title,\n  children,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  className,\n}: {\n  title: string;\n  children: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n}) {\n  const [local, setLocal] = useState(defaultOpen);\n  const shown = open ?? local;\n  const panelId = useId();\n\n  return (\n    <div data-slot=\"collapsible\" className={cn(\"max-w-lg rounded-overlay border border-border px-3\", className)}>\n      <button\n        type=\"button\"\n        aria-expanded={shown}\n        aria-controls={panelId}\n        data-slot=\"accordion-trigger\"\n        className=\"flex min-h-11 w-full items-center justify-between gap-3 text-left text-sm font-medium outline-none active:opacity-70 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        onClick={() => {\n          const next = !shown;\n          if (open == null) setLocal(next);\n          onOpenChange?.(next);\n        }}\n      >\n        {title}\n        <ChevronDown aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n      </button>\n      <div id={panelId} data-slot=\"accordion-panel\" data-open={shown || undefined} inert={shown ? undefined : true}>\n        <div className=\"pb-3 text-sm leading-6 text-muted-foreground\">{children}</div>\n      </div>\n    </div>\n  );\n}\n"},{"path":"ui/lib/cn.ts","type":"registry:ui","target":"components/ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"},{"path":"ui/shared/accordion-panel.css","type":"registry:file","target":"components/ui/shared/accordion-panel.css","content":"/* Shared by accordion.tsx, collapsible.tsx, expandable-card.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"accordion-panel\"] {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--duration-travel) var(--ease-settle);\n  }\n  [data-slot=\"accordion-panel\"][data-open=\"true\"] {\n    grid-template-rows: 1fr;\n  }\n  [data-slot=\"accordion-panel\"] > div {\n    min-height: 0;\n    overflow: hidden;\n    opacity: 0;\n    transform: translateY(6px);\n    transition:\n      opacity var(--duration-fast) var(--ease-out),\n      transform var(--duration-travel) var(--ease-showcase);\n  }\n  [data-slot=\"accordion-panel\"][data-open=\"true\"] > div {\n    opacity: 1;\n    transform: none;\n  }\n  [data-slot=\"accordion-trigger\"] svg {\n    transition: transform var(--duration-travel) var(--ease-showcase);\n  }\n  [data-slot=\"accordion-trigger\"][aria-expanded=\"true\"] svg {\n    transform: rotate(180deg);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"accordion-panel\"] > div {\n      transition:\n        opacity 120ms var(--ease-out),\n        transform 400ms var(--ease-showcase);\n    }\n    [data-slot=\"accordion-panel\"] {\n      transition: grid-template-rows 400ms var(--ease-settle);\n    }\n    [data-slot=\"accordion-trigger\"] svg {\n      transition-duration: 400ms;\n    }\n  }\n}\n"}],"categories":["overlays"],"meta":{"tier":"free","license":"MIT","family":"disclosure","docs":"/docs/components/collapsible"}}