{
  "name": "Combobox",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/Combobox.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "combobox-kit",
  "elName": "Combobox",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#combobox-kit",
  "hasLiveDemo": false,
  "description": "Searchable single-select combobox. See `ComboboxProps` for the full\nsurface; pair static `options` with `getLabel` for client-side\nfiltering, or pass `search` for an async (debounced) resolver.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "Combobox",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ComboboxProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { Combobox } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "combobox",
    "combobox-empty",
    "combobox-list",
    "combobox-loading",
    "combobox-option",
    "combobox-option-tick",
    "combobox-popover",
    "combobox-search",
    "combobox-trigger",
    "combobox-trigger-actions",
    "combobox-trigger-clear",
    "combobox-trigger-ic",
    "combobox-trigger-label",
    "combobox-trigger-placeholder",
    "input",
    "popover"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"combobox\">\n  <button type=\"button\" class=\"combobox-trigger input\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n    <span class=\"combobox-trigger-label combobox-trigger-placeholder\">Assign owner</span>\n    <span class=\"combobox-trigger-actions\">\n      <span aria-hidden=\"true\" class=\"combobox-trigger-ic\">▾</span>\n    </span>\n  </button>\n</div>",
    "css": ".combobox { display: inline-flex; flex-direction: column; min-width: 220px; }\n\n.combobox-empty {\n  padding: var(--s-4) var(--s-3);\n  font: 400 13px/1.4 var(--f-body);\n  color: var(--fg-dim);\n  text-align: center;\n}\n\n.combobox-list {\n  list-style: none;\n  margin: 0; padding: var(--s-2);\n  display: flex; flex-direction: column; gap: 2px;\n  overflow-y: auto;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n.combobox-loading {\n  padding: var(--s-4) var(--s-3);\n  font: 400 13px/1.4 var(--f-body);\n  color: var(--fg-dim);\n  text-align: center;\n}\n\n.combobox-option {\n  display: flex; align-items: center; gap: var(--s-3);\n  padding: 8px var(--s-3);\n  background: transparent; border: 0;\n  border-radius: var(--r-xs);\n  font: 500 13.5px/1.3 var(--f-body);\n  color: var(--fg); cursor: pointer;\n  text-align: left; width: 100%;\n  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);\n}\n\n.combobox-option-tick {\n  margin-left: auto;\n  flex: 0 0 auto;\n  color: var(--accent);\n  font-size: 12px;\n}\n\n.combobox-popover {\n  width: 320px;\n  padding: 0;\n  display: flex; flex-direction: column;\n  max-height: 320px;\n}\n\n.combobox-search {\n  padding: var(--s-3);\n  border-bottom: 1px solid var(--hair);\n}\n\n.combobox-trigger {\n  display: inline-flex; align-items: center; justify-content: space-between;\n  gap: var(--s-3);\n  cursor: pointer;\n  background: var(--bg-paper);\n  text-align: left;\n  width: 100%;\n}\n\n.combobox-trigger-actions { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }\n\n.combobox-trigger-clear {\n  appearance: none; background: transparent; border: 0; cursor: pointer;\n  width: 18px; height: 18px; border-radius: var(--r-xs);\n  color: var(--fg-faint); display: inline-flex; align-items: center; justify-content: center;\n  padding: 0;\n}\n\n.combobox-trigger-ic { font-size: 10px; color: var(--fg-faint); }\n\n.combobox-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.combobox-trigger-placeholder { color: var(--fg-faint); }\n\n.input {\n  display: block; width: 100%;\n  font: 400 14.5px/1.4 var(--f-body);\n  color: var(--fg);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  padding: 10px 14px;\n  transition: border-color var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease);\n  appearance: none; -webkit-appearance: none; -moz-appearance: none;\n}\n\n.popover {\n  position: relative;\n  width: 320px;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  padding: var(--s-4);\n  box-shadow: var(--sh-3);\n}"
  }
}