{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-section",
  "title": "Collapsible section",
  "description": "A titled disclosure: a tracked-uppercase header (with an optional count) that toggles its content.",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/collapsible-section.tsx",
      "content": "\"use client\";\n\nimport { type ReactNode, useState } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface CollapsibleSectionProps {\n  /** Section heading. */\n  title: ReactNode;\n  /** Right-aligned count / summary (e.g. item count). */\n  count?: ReactNode;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * A titled disclosure: a tracked-uppercase header (with an optional count) that\n * toggles its content. Works controlled (`open`/`onOpenChange`) or uncontrolled\n * (`defaultOpen`). The bucket/section header used across dense inventory views.\n */\nexport function CollapsibleSection({\n  title,\n  count,\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange,\n  children,\n  className,\n}: CollapsibleSectionProps) {\n  const [internal, setInternal] = useState(defaultOpen);\n  const open = openProp ?? internal;\n  const toggle = () => {\n    if (openProp === undefined) setInternal(!open);\n    onOpenChange?.(!open);\n  };\n  return (\n    <div className={cn(\"flex flex-col\", className)}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        onClick={toggle}\n        className=\"flex items-center gap-2 py-1.5 text-left text-engram-muted transition-colors hover:text-engram-fg\"\n      >\n        <svg\n          viewBox=\"0 0 12 12\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-2.5 transition-transform\",\n            open ? \"rotate-90\" : \"rotate-0\",\n          )}\n        >\n          <path d=\"M4 2.5 8 6l-4 3.5z\" fill=\"currentColor\" />\n        </svg>\n        <span className=\"font-engram-display font-semibold text-[11px] uppercase tracking-engram-label\">\n          {title}\n        </span>\n        {count != null ? (\n          <span className=\"ml-auto font-engram-display text-[11px] text-engram-faint tabular-nums\">\n            {count}\n          </span>\n        ) : null}\n      </button>\n      {open ? <div className=\"pt-1\">{children}</div> : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/collapsible-section.tsx"
    }
  ],
  "meta": {
    "level": "component"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "interaction"
  ],
  "type": "registry:component"
}