{
  "name": "DashboardNavGroup",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/DashboardNavGroup.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "dash-nav-group",
  "elName": "Two groups (Today open, Pipeline collapsed)",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#dash-nav-group",
  "hasLiveDemo": false,
  "description": "Collapsible nav-group wrapper. Renders a `<details>` element styled by\nthe kit's `.dash-nav-group` class — the section heading is the\n`<summary>` (`.dash-nav-label`), and children are the rows\n(`.dash-nav-item` anchors typically).",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "DashboardNavGroup",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "DashboardNavGroupProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { DashboardNavGroup } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "label",
      "optional": false,
      "type": "ReactNode",
      "doc": "Section label rendered in the header (e.g. `\"Today\"`, `\"Pipeline\"`). Uppercase styling is provided by `.dash-nav-label`."
    },
    {
      "name": "defaultOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Initial open state. Defaults to `true`. Used as the source of truth when `persistKey` is unset OR when the saved preference is missing."
    },
    {
      "name": "open",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled open state. When provided, the consumer owns toggle state and `onOpenChange` fires for every change. `persistKey` is ignored when controlled."
    },
    {
      "name": "onOpenChange",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": "Fires whenever the group toggles. Pairs with `open` for controlled mode, or fires alongside the localStorage write when `persistKey` is set."
    },
    {
      "name": "persistKey",
      "optional": true,
      "type": "string",
      "doc": "When set, the group's open / closed state persists across reloads via `localStorage`. Pass a stable, app-unique key (e.g. `\"crm.nav.today\"`). Storage writes are namespaced under `magicblocks.nav-group.<persistKey>` to avoid colliding with consumer-side localStorage keys. Ignored in controlled mode (when `open` is set)."
    },
    {
      "name": "storagePrefix",
      "optional": true,
      "type": "string",
      "doc": "Override the storage prefix used when `persistKey` is set. Default: `\"magicblocks.nav-group.\"`. Useful when multiple kit consumers share a hostname and you want isolation."
    },
    {
      "name": "forceOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Force the group open regardless of the persisted preference. Use to auto-expand the group containing the currently-active route so users never lose their place after a reload (or after clicking into a collapsed section). The persisted preference is preserved unchanged — when `forceOpen` flips back to `false`/`undefined`, the group returns to whatever the user last toggled it to. Toggle clicks are no-ops while `forceOpen` is true (the heading stays interactive but flipping the `<details>` open is suppressed — letting the user collapse a force-open group would race with the forcing logic). v1.12.0 — Spark Round 13 R11-4."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Children — typically `.dash-nav-item` anchors / links."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class on the root `<details>` element (in addition to `.dash-nav-group`)."
    },
    {
      "name": "mode",
      "optional": true,
      "type": "SidebarMode",
      "doc": "Render mode. Falls back to the nearest `<AppShell sidebarMode>` via React context, defaulting to `\"expanded\"` outside an AppShell. In `\"collapsed\"` mode the label is hidden and items render icon-stacked (vertical icon + small label). Set explicitly to override the context. v1.61.0 (app-team R2)."
    }
  ],
  "classesUsed": [
    "badge",
    "dash-nav-group",
    "dash-nav-item",
    "dash-nav-item-label",
    "dash-nav-label"
  ],
  "examples": {
    "react": "<DashboardNavGroup label=\"Today\" persistKey=\"crm.nav.today\">\n    <a href=\"/overview\" className=\"dash-nav-item\">\n      <HomeIcon />\n      <span className=\"dash-nav-item-label\">Overview</span>\n    </a>\n    <a href=\"/inbox\" className=\"dash-nav-item\">\n      <InboxIcon />\n      <span className=\"dash-nav-item-label\">Inbox</span>\n      <span className=\"badge\">7</span>\n    </a>\n    <a href=\"/tasks\" className=\"dash-nav-item\">\n      <CheckIcon />\n      <span className=\"dash-nav-item-label\">Tasks</span>\n    </a>\n  </DashboardNavGroup>",
    "html": "<div class=\"dash-nav-group-demo\">\n  <details class=\"dash-nav-group\" open>\n    <summary class=\"dash-nav-label\">Today</summary>\n    <a href=\"#\" class=\"dash-nav-item is-active\"><span class=\"dash-nav-item-label\">Overview</span></a>\n    <a href=\"#\" class=\"dash-nav-item\"><span class=\"dash-nav-item-label\">Inbox</span><span class=\"badge\">7</span></a>\n    <a href=\"#\" class=\"dash-nav-item\"><span class=\"dash-nav-item-label\">Tasks</span></a>\n  </details>\n  <details class=\"dash-nav-group\">\n    <summary class=\"dash-nav-label\">Pipeline</summary>\n    <a href=\"#\" class=\"dash-nav-item\"><span class=\"dash-nav-item-label\">Leads</span></a>\n    <a href=\"#\" class=\"dash-nav-item\"><span class=\"dash-nav-item-label\">Deals</span></a>\n    <a href=\"#\" class=\"dash-nav-item\"><span class=\"dash-nav-item-label\">Won</span></a>\n  </details>\n</div>",
    "css": ".badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  white-space: nowrap;\n  padding: 3px 8px;\n  border-radius: var(--r-pill);\n  font: 500 11.5px/1.2 var(--f-body);\n  background: var(--hair-soft);\n  color: var(--fg);\n  border: 1px solid transparent;\n}\n\n.dash-nav-group { margin: 0; padding: 0; }\n\n.dash-nav-item {\n  display: flex; align-items: center; gap: 10px;\n  /* v1.4.0: bumped from 8px → 7px and exposed as a custom property so\n     consumers can set their own vertical rhythm without overriding the\n     whole padding shorthand. */\n  padding-top: var(--dash-nav-item-py, 7px);\n  padding-right: 10px;\n  padding-bottom: var(--dash-nav-item-py, 7px);\n  padding-left: 10px;\n  font: 500 13.5px/1 var(--f-body);\n  color: var(--fg-soft);\n  text-decoration: none;\n  border-radius: var(--r-sm);\n  margin-bottom: 2px;\n  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);\n}\n\n.dash-nav-item-label { flex: 1; min-width: 0; }\n\n.dash-nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-dim); font-weight: 600; margin: 0 10px var(--s-2); }"
  }
}