{
  "name": "CategoryGroupList",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/CategoryGroupList.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "category-group-list",
  "elName": "CategoryGroupList",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#category-group-list",
  "hasLiveDemo": false,
  "description": "Grouped expandable list — each group has a header (label + count + meta)\nand a body of items that's revealed when expanded. Backs the Contact\nMemories surface (5 categories), Knowledge categories rail, and any\nother \"label + count + expand to see items\" surface.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "CategoryGroupList",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "CategoryGroupListProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "CategoryGroup",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { CategoryGroupList } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "groups",
      "optional": false,
      "type": "CategoryGroup[]",
      "doc": "Available groups."
    },
    {
      "name": "value",
      "optional": true,
      "type": "string[]",
      "doc": "Controlled list of open group ids."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string[]",
      "doc": "Uncontrolled initial list of open group ids."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(open: string[]) => void",
      "doc": "Fires when the open set changes."
    },
    {
      "name": "allowMultiple",
      "optional": true,
      "type": "boolean",
      "doc": "Allow more than one group open at once. Default `true`."
    }
  ],
  "classesUsed": [
    "category-group",
    "category-group-caption",
    "category-group-chevron",
    "category-group-count",
    "category-group-icon",
    "category-group-label",
    "category-group-list",
    "category-group-meta",
    "category-group-panel",
    "category-group-panel-inner",
    "category-group-title-block",
    "category-group-trigger"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"category-group-list\">\n  <div class=\"category-group\">\n    <button type=\"button\" class=\"category-group-trigger\" aria-expanded=\"false\">\n      <span class=\"category-group-chevron\" aria-hidden=\"true\"></span>\n      <span class=\"category-group-title-block\">\n        <span class=\"category-group-label\">Personal facts</span>\n      </span>\n      <span class=\"category-group-count\">4</span>\n    </button>\n  </div>\n  <div class=\"category-group\">\n    <button type=\"button\" class=\"category-group-trigger\" aria-expanded=\"false\">\n      <span class=\"category-group-chevron\" aria-hidden=\"true\"></span>\n      <span class=\"category-group-title-block\">\n        <span class=\"category-group-label\">Preferences</span>\n      </span>\n      <span class=\"category-group-count\">7</span>\n    </button>\n  </div>\n  <div class=\"category-group\">\n    <button type=\"button\" class=\"category-group-trigger\" aria-expanded=\"false\">\n      <span class=\"category-group-chevron\" aria-hidden=\"true\"></span>\n      <span class=\"category-group-title-block\">\n        <span class=\"category-group-label\">Objections</span>\n      </span>\n      <span class=\"category-group-count\">0</span>\n    </button>\n  </div>\n</div>",
    "css": ".category-group {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  overflow: hidden;\n}\n\n.category-group-caption { font: 400 12.5px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.category-group-chevron {\n  width: 10px; height: 10px;\n  flex-shrink: 0;\n  position: relative;\n  transition: transform var(--dur-2) var(--ease);\n}\n\n.category-group-count {\n  font: 500 12px/1 var(--f-mono);\n  color: var(--fg-faint);\n  font-variant-numeric: tabular-nums;\n}\n\n.category-group-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--fg-soft);\n  width: 20px;\n  height: 20px;\n}\n\n.category-group-label { font: 500 14px/1.3 var(--f-body); }\n\n.category-group-list { display: flex; flex-direction: column; gap: var(--s-2); }\n\n.category-group-meta { display: inline-flex; align-items: center; gap: var(--s-2); }\n\n.category-group-panel { border-top: 1px solid var(--hair-soft); }\n\n.category-group-panel-inner { padding: var(--s-3) var(--s-4); }\n\n.category-group-title-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.category-group-trigger {\n  appearance: none;\n  display: grid;\n  grid-template-columns: auto auto 1fr auto auto;\n  align-items: center;\n  gap: var(--s-3);\n  width: 100%;\n  padding: var(--s-3) var(--s-4);\n  background: transparent;\n  border: 0;\n  text-align: left;\n  cursor: pointer;\n  color: var(--fg);\n  transition: background var(--dur-2) var(--ease);\n}"
  }
}