{
  "name": "RailGroup",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/RailGroup.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "A collapsible section in the builder rail: a header (glyph · label ·\ncount · chevron) over a body of rows. Drop-in uncontrolled by default;\npass `open` / `onOpenChange` to control it.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "RailGroup",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "RailGroupProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { RailGroup } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Group label (e.g. \"General\", \"Journey\")."
    },
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Leading glyph — rendered in `.ab-rail-group-glyph`, hidden from a11y."
    },
    {
      "name": "count",
      "optional": true,
      "type": "number",
      "doc": "Optional count chip after the title."
    },
    {
      "name": "group",
      "optional": true,
      "type": "string",
      "doc": "Tags the group for surface-specific styling — `\"journey\"` paints the body with the soft accent wash used for sortable block lists."
    },
    {
      "name": "defaultOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Open by default (uncontrolled). Defaults to `true`."
    },
    {
      "name": "open",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled open state."
    },
    {
      "name": "onOpenChange",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": "Fires whenever open state changes."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "Group body — `RailItem`s or a Journey `SortableList`."
    }
  ],
  "classesUsed": [
    "ab-rail-group",
    "ab-rail-group-body",
    "ab-rail-group-head",
    "title"
  ],
  "examples": {
    "react": "<RailGroup title=\"Journey\" count={4} group=\"journey\" defaultOpen>\n  <SortableList items={blocks} rowId={(b) => b.id} onReorder={setBlocks}\n    renderRow={(b) => <RailBlockItem name={b.name} … />} />\n</RailGroup>",
    "html": null,
    "css": ".ab-rail-group { display: flex; flex-direction: column; }\n\n.ab-rail-group-body { padding: 2px 0 var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 1px; }\n\n.ab-rail-group-head {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  align-items: center; gap: 8px;\n  padding: 8px var(--s-3); border-radius: 6px;\n  font: 600 13px/1 var(--f-body); color: var(--fg);\n  background: transparent; border: 0; cursor: pointer; text-align: left;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}