{
  "name": "KitCommandPalette",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/KitCommandPalette.tsx",
  "chapterTag": "Kit chrome",
  "chapter": null,
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Universal Cmd-K palette for the kit-site. Searches across components,\nchapter sections, assets, chapters, and top-level pages.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "KitCommandPalette",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "KitCommandPaletteProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "KitCommandPaletteItem",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { KitCommandPalette } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "items",
      "optional": true,
      "type": "KitCommandPaletteItem[]",
      "doc": "Items to search across. If omitted, fetched from `indexUrl` on mount."
    },
    {
      "name": "indexUrl",
      "optional": true,
      "type": "string",
      "doc": "URL to fetch the index from on mount. Default `/api/library-index.json`."
    },
    {
      "name": "open",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled open state."
    },
    {
      "name": "defaultOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Initial uncontrolled open state."
    },
    {
      "name": "onOpenChange",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": "Fires whenever the open state changes."
    },
    {
      "name": "hotkey",
      "optional": true,
      "type": "false | string[]",
      "doc": "Hotkeys that toggle the palette. Default `[\"Meta+k\", \"Control+k\"]`. Pass `false` to disable."
    },
    {
      "name": "maxPerCategory",
      "optional": true,
      "type": "number",
      "doc": "Max results per category. Default `6`."
    },
    {
      "name": "onSelect",
      "optional": true,
      "type": "(item: KitCommandPaletteItem) => void",
      "doc": "Override what happens when an item is selected. Defaults to `window.location.href = item.href`."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Optional className spread onto the dialog root."
    }
  ],
  "classesUsed": [
    "cmdk",
    "cmdk-empty",
    "cmdk-foot",
    "cmdk-group",
    "cmdk-group-label",
    "cmdk-input",
    "cmdk-input-wrap",
    "cmdk-kbd",
    "cmdk-overlay",
    "cmdk-results",
    "cmdk-row",
    "cmdk-row-body",
    "cmdk-row-icon",
    "cmdk-row-meta",
    "cmdk-row-sub",
    "cmdk-row-title",
    "page",
    "section"
  ],
  "examples": {
    "react": "<KitCommandPalette />                    // fetches /api/library-index.json\n  <KitCommandPalette items={myItems} />    // explicit items",
    "html": null,
    "css": ".cmdk {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  box-shadow: var(--sh-3);\n  width: 100%;\n  max-width: 560px;\n  overflow: hidden;\n}\n\n.cmdk-empty {\n  padding: var(--s-7) var(--s-5);\n  text-align: center;\n  font: 400 13px/1.5 var(--f-body);\n  color: var(--fg-dim);\n}\n\n.cmdk-foot {\n  display: flex; gap: var(--s-4); align-items: center;\n  padding: var(--s-3) var(--s-5);\n  background: var(--bg-sunk);\n  border-top: 1px solid var(--hair);\n  font: 400 11px/1 var(--f-mono); color: var(--fg-dim);\n}\n\n.cmdk-group {\n  display: flex; flex-direction: column;\n  padding: var(--s-2) 0;\n}\n\n.cmdk-group-label {\n  font: 500 10px/1 var(--f-mono);\n  text-transform: uppercase; letter-spacing: 0.08em;\n  color: var(--fg-faint);\n  padding: var(--s-2) var(--s-5) var(--s-2);\n}\n\n.cmdk-input {\n  flex: 1; border: 0; background: transparent;\n  font: 400 16px/1.4 var(--f-body); color: var(--fg);\n  outline: none;\n}\n\n.cmdk-input-wrap {\n  display: flex; align-items: center; gap: var(--s-3);\n  padding: var(--s-4) var(--s-5);\n  border-bottom: 1px solid var(--hair);\n}\n\n.cmdk-kbd {\n  font: 500 11px/1 var(--f-mono);\n  padding: 4px 7px; border-radius: var(--r-xs);\n  background: var(--bg-sunk); color: var(--fg-dim);\n  border: 1px solid var(--hair);\n}\n\n.cmdk-overlay {\n  position: fixed; inset: 0; z-index: 100;\n  background: color-mix(in oklab, var(--ink) 32%, transparent);\n  backdrop-filter: blur(4px);\n  display: flex; align-items: flex-start; justify-content: center;\n  padding: 12vh var(--s-5) var(--s-5);\n  animation: cmdk-fade 160ms var(--ease);\n}\n\n.cmdk-results { max-height: 380px; overflow-y: auto; padding: var(--s-2) 0; }\n\n.cmdk-row {\n  display: grid;\n  grid-template-columns: 28px 1fr auto;\n  gap: var(--s-3); align-items: center;\n  padding: 8px var(--s-5);\n  cursor: pointer;\n  transition: background var(--dur-1) var(--ease);\n  border: 0; background: transparent; width: 100%; text-align: left;\n}\n\n.cmdk-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.cmdk-row-icon {\n  width: 28px; height: 28px;\n  display: inline-flex; align-items: center; justify-content: center;\n  background: var(--bg-sunk); border-radius: var(--r-sm);\n  color: var(--fg-dim);\n}\n\n.cmdk-row-meta { font: 500 11px/1 var(--f-mono); color: var(--fg-faint); }\n\n.cmdk-row-sub { font: 400 12px/1.2 var(--f-mono); color: var(--fg-dim); }\n\n.cmdk-row-title { font: 500 14px/1.2 var(--f-body); color: var(--fg); }\n\n.page {\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 var(--s-7);\n}\n\n.section {\n  padding: var(--s-11) 0;\n  border-bottom: 1px solid var(--hair);\n}\n.section { scroll-margin-top: 80px; }"
  }
}