{ "name": "KitChapterNav", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/KitChapterNav.tsx", "chapterTag": "Kit chrome", "chapter": null, "sectionId": null, "elName": null, "demoUrl": null, "hasLiveDemo": false, "description": "The kit's deployed top-nav chrome — brand + breadcrumb pill + inline\nsections strip + mega-dropdown chapter picker + scroll-capped mobile drawer\n+ light/dark ``. Wraps `.topnav` from `_shared.css`.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "KitChapterNav", "isPrincipal": true, "isType": false }, { "name": "KitChapterNavProps", "isPrincipal": false, "isType": true }, { "name": "KitChapterNavChapter", "isPrincipal": false, "isType": false }, { "name": "KitChapterNavGroup", "isPrincipal": false, "isType": true }, { "name": "KitChapterNavSection", "isPrincipal": false, "isType": true } ], "importStatement": "import { KitChapterNav } from \"@magicblocksai/ui\";", "props": [ { "name": "brandHref", "optional": true, "type": "string", "doc": "Brand mark + wordmark href. Default `\"/\"`." }, { "name": "brandLabel", "optional": true, "type": "ReactNode", "doc": "Brand wordmark text. Default `\"magicblocks\"`." }, { "name": "brandSection", "optional": true, "type": "{ href: string", "doc": "Optional pill rendered after the brand (e.g. `{ href: \"/library\", label: \"Library\" }`)." }, { "name": "label", "optional": false, "type": "ReactNode }", "doc": "" }, { "name": "sections", "optional": true, "type": "KitChapterNavSection[]", "doc": "Inline `.nav-sections` strip (e.g. `Library / Components / Downloads`)." }, { "name": "currentChapter", "optional": true, "type": "string", "doc": "Current chapter id — matches `chapters[i].id`." }, { "name": "currentChapterName", "optional": true, "type": "ReactNode", "doc": "Text rendered in the trigger. Defaults to the current chapter's `name`." }, { "name": "groups", "optional": true, "type": "KitChapterNavGroup[]", "doc": "Chapter groupings rendered in the mega-dropdown. If empty, no chapter picker." }, { "name": "backLink", "optional": true, "type": "{ href: string", "doc": "Optional back link rendered after the chapter panel (e.g. `{ href: \"/\", label: \"← Brand kit\" }`)." }, { "name": "label", "optional": false, "type": "ReactNode }", "doc": "" }, { "name": "showThemeToggle", "optional": true, "type": "boolean", "doc": "Show the embedded `` at the right edge. Default `true`." }, { "name": "themeToggleProps", "optional": true, "type": "Omit", "doc": "Pass-through props for the embedded ``." }, { "name": "showSearch", "optional": true, "type": "boolean", "doc": "Render a search-icon button immediately before the ``. Default behaviour on click: dispatches a `kit:command-palette:open` custom event on `document` (the event API `KitCommandPalette` listens for). Pass `onSearchClick` to override. Pass `false` to omit." }, { "name": "onSearchClick", "optional": true, "type": "() => void", "doc": "Override the search-button click." }, { "name": "searchLabel", "optional": true, "type": "ReactNode; // ── Drawer (mobile menu) state ── drawerOpen?: boolean", "doc": "Visible label for the search button. Default `\"Search\"`." }, { "name": "defaultDrawerOpen", "optional": true, "type": "boolean", "doc": "" }, { "name": "onDrawerOpenChange", "optional": true, "type": "(open: boolean) => void; // ── Mega-dropdown state ── chaptersOpen?: boolean", "doc": "" }, { "name": "defaultChaptersOpen", "optional": true, "type": "boolean", "doc": "" }, { "name": "onChaptersOpenChange", "optional": true, "type": "(open: boolean) => void", "doc": "" } ], "classesUsed": [ "menu", "nav-back", "nav-chapters", "nav-chapters-group", "nav-chapters-panel", "nav-chapters-trigger", "nav-search", "nav-search-icon", "nav-search-kbd", "nav-search-label", "nav-toggle", "nav-toggle-bar", "page", "site-menu", "topnav", "topnav-inner" ], "examples": { "react": "", "html": null, "css": ".menu {\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-lg);\n padding: var(--s-2);\n display: flex; flex-direction: column; gap: 2px;\n box-shadow: var(--sh-3);\n min-width: 260px;\n}\n\n.nav-back {\n font: 500 12.5px/1 var(--f-body);\n color: var(--fg-dim);\n text-decoration: none;\n padding: 6px 12px;\n border-radius: var(--r-pill);\n transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);\n flex-shrink: 0;\n display: inline-flex; align-items: center; gap: 6px;\n}\n\n.nav-chapters { position: relative; }\n\n.nav-chapters-group { display: flex; flex-direction: column; gap: 2px; }\n\n.nav-chapters-panel {\n position: absolute;\n top: calc(100% + 10px); right: 0;\n /* Mega panel: one column per bucket (5 groups → 5 columns) so every\n eyebrow lines up on the top row and each bucket flows its own\n chapters straight down. The Operator bucket is the tall one (10\n chapters) — in its own column that just reads as a longer list,\n no ragged gaps. Width clamps to the viewport (minus the topnav\n gutter) so the right edge is never clipped on narrow desktops. */\n width: min(920px, calc(100vw - var(--s-7) * 2));\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-lg);\n padding: var(--s-5);\n box-shadow: 0 24px 48px -20px color-mix(in oklab, var(--ink) 50%, transparent),\n 0 8px 16px -8px color-mix(in oklab, var(--ink) 25%, transparent);\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n align-items: start;\n gap: var(--s-5) var(--s-3);\n /* Cap to the viewport below the trigger and let the inside scroll, so\n the tall Operator column can never run off the bottom of the fold\n on a short laptop screen. */\n max-height: calc(100vh - var(--s-9) * 2);\n overflow-y: auto;\n overscroll-behavior: contain;\n opacity: 0; transform: translateY(-6px) scale(0.98);\n transform-origin: top right;\n pointer-events: none;\n transition: opacity 200ms var(--ease), transform 200ms var(--ease);\n z-index: 10;\n}\n\n.nav-chapters-trigger {\n appearance: none; -webkit-appearance: none;\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-pill);\n padding: 7px 14px 7px 16px;\n font: 500 13px/1 var(--f-body);\n color: var(--fg);\n cursor: pointer;\n display: inline-flex; align-items: center; gap: 8px;\n transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);\n}\n\n.nav-search {\n appearance: none; -webkit-appearance: none;\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-pill);\n padding: 6px 12px 6px 11px;\n font: 500 12.5px/1 var(--f-body);\n color: var(--fg-soft);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: var(--s-2);\n flex-shrink: 0;\n transition: border-color var(--dur-2) var(--ease),\n color var(--dur-2) var(--ease),\n background var(--dur-2) var(--ease);\n}\n\n.nav-search-icon { color: var(--fg-dim); flex-shrink: 0; }\n\n.nav-search-kbd {\n font: 500 11px/1 var(--f-mono);\n padding: 2px 6px;\n border-radius: var(--r-xs);\n background: var(--bg-sunk);\n color: var(--fg-dim);\n border: 1px solid var(--hair-soft);\n}\n\n.nav-search-label { color: inherit; }\n\n.nav-toggle {\n display: none;\n appearance: none; -webkit-appearance: none; background: transparent;\n border: 1px solid var(--hair); border-radius: var(--r-md);\n width: 36px; height: 36px; padding: 0;\n flex-direction: column; justify-content: center; align-items: center; gap: 4px;\n cursor: pointer; color: var(--fg);\n margin-left: auto;\n}\n\n.nav-toggle-bar {\n display: block; width: 16px; height: 1.75px; background: currentColor;\n border-radius: 1px;\n transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);\n}\n\n.page {\n max-width: 1160px;\n margin: 0 auto;\n padding: 0 var(--s-7);\n}\n\n.site-menu {\n flex: 1;\n display: flex; align-items: center; gap: var(--s-3); justify-content: " } }