{
  "name": "FilterChipGroup",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/FilterChipGroup.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "filter-chip-group",
  "elName": "FilterChipGroup",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#filter-chip-group",
  "hasLiveDemo": false,
  "description": "Multi-select chip cluster with a leading \"All\" chip and an optional\n\"+N more\" overflow popover. Wraps the kit's existing `.chip` styles.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "FilterChipGroup",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "FilterChipGroupProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "FilterChipOption",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "FilterChipTint",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { FilterChipGroup } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "options",
      "optional": false,
      "type": "FilterChipOption[]",
      "doc": "All available options."
    },
    {
      "name": "selected",
      "optional": false,
      "type": "string[]",
      "doc": "Currently selected values. Empty = \"All\" is active."
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(next: string[]) => void",
      "doc": "Fires whenever the selection changes."
    },
    {
      "name": "multiple",
      "optional": true,
      "type": "boolean",
      "doc": "Allow multiple chips to be selected at once. Default `true`."
    },
    {
      "name": "required",
      "optional": true,
      "type": "boolean",
      "doc": "When `true` AND `multiple={false}`, blocks the empty-selection state. Deselect-click on the active chip is a no-op, and the \"All\" clear action is suppressed. With `required` the consumer's `selected` array is guaranteed length 1 for every onChange call. Pair with `showAll={false}` for the canonical \"select-one\" UI. v1.61.0 (app-team R2)."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional label rendered before the chip cluster."
    },
    {
      "name": "showAll",
      "optional": true,
      "type": "boolean",
      "doc": "Render the leading \"All\" chip that clears the selection. Default `true`."
    },
    {
      "name": "maxVisible",
      "optional": true,
      "type": "number",
      "doc": "Maximum chips rendered inline before the overflow trigger appears."
    },
    {
      "name": "allLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the \"All\" chip label. Default `\"All\"`."
    },
    {
      "name": "overflowLabel",
      "optional": true,
      "type": "(hiddenCount: number) => ReactNode",
      "doc": "Override the overflow-trigger label template. Receives the hidden count."
    }
  ],
  "classesUsed": [
    "chip",
    "chip-active",
    "chip-amber",
    "chip-blue",
    "chip-button",
    "chip-count",
    "chip-green",
    "chip-overflow",
    "chip-red",
    "filter-chip-group",
    "filter-chip-group-chips",
    "filter-chip-group-label",
    "filter-chip-group-overflow"
  ],
  "examples": {
    "react": "<FilterChipGroup\n    label=\"Status\"\n    options={[\n      { value: \"open\",   label: \"Open\",   count: 24, tint: \"info\" },\n      { value: \"won\",    label: \"Won\",    count: 12, tint: \"success\" },\n      { value: \"lost\",   label: \"Lost\",   count: 4,  tint: \"error\" },\n    ]}\n    selected={status}\n    onChange={setStatus}\n  />",
    "html": "<div role=\"group\" aria-label=\"Status\" class=\"filter-chip-group\">\n  <span class=\"filter-chip-group-label\">Status</span>\n  <div class=\"filter-chip-group-chips\">\n    <button type=\"button\" role=\"checkbox\" aria-checked=\"true\" class=\"chip chip-button chip-active\">All</button>\n    <button type=\"button\" role=\"checkbox\" aria-checked=\"false\" class=\"chip chip-blue chip-button\">Open<span class=\"chip-count\">24</span></button>\n    <button type=\"button\" role=\"checkbox\" aria-checked=\"false\" class=\"chip chip-green chip-button\">Won<span class=\"chip-count\">12</span></button>\n    <button type=\"button\" role=\"checkbox\" aria-checked=\"false\" class=\"chip chip-red chip-button\">Lost<span class=\"chip-count\">4</span></button>\n  </div>\n</div>",
    "css": ".chip {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--r-pill);\n  font: 500 12.5px/1.3 var(--f-body);\n  background: var(--bg-paper);\n  color: var(--fg);\n  border: 1px solid var(--hair);\n  white-space: nowrap;\n}\n\n.chip-active {\n  background: var(--accent);\n  color: var(--paper);\n  border-color: var(--accent);\n}\n\n.chip-amber { background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in oklab, var(--warning) 25%, transparent); }\n\n.chip-blue { background: var(--info-soft);    color: var(--info-text);    border-color: color-mix(in oklab, var(--info) 25%, transparent); }\n\n.chip-button {\n  appearance: none;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);\n}\n\n.chip-count {\n  display: inline-block;\n  font: 500 11px/1 var(--f-mono);\n  padding: 2px 6px;\n  border-radius: var(--r-pill);\n  background: color-mix(in oklab, currentColor 15%, transparent);\n}\n\n.chip-green { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in oklab, var(--success) 25%, transparent); }\n\n.chip-overflow { font-style: italic; }\n\n.chip-red { background: var(--error-soft);   color: var(--error-text);   border-color: color-mix(in oklab, var(--error) 25%, transparent); }\n\n.filter-chip-group {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--s-3);\n}\n\n.filter-chip-group-chips {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--s-2);\n  align-items: center;\n}\n\n.filter-chip-group-label {\n  font: 500 13px/1.3 var(--f-body);\n  color: var(--fg-soft);\n}\n\n.filter-chip-group-overflow {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n  min-width: 180px;\n}"
  }
}