{
  "docPath": "data-display/org-chart.tsx",
  "example": "import { Avatar, AvatarFallback, Badge } from \"@godxjp/ui/data-display\";\nimport { OrgChart } from \"@godxjp/ui/lab\";\n\n<OrgChart\n  label=\"Company org chart\"\n  data={[\n    {\n      key: \"ceo\", name: \"Haruka Tanaka\", title: \"CEO\",\n      avatar: <Avatar size=\"sm\"><AvatarFallback>HT</AvatarFallback></Avatar>,\n      children: [\n        { key: \"cto\", name: \"Kenji Watanabe\", title: \"CTO\" },\n        { key: \"bot\", name: \"Review Agent\", title: \"Code review\", variant: \"agent\",\n          extra: <Badge tone=\"success\">Running</Badge> },\n      ],\n    },\n  ]}\n/>",
  "group": "data-display",
  "importPath": "@godxjp/ui/lab",
  "name": "OrgChart",
  "props": [
    {
      "description": "The hierarchy: { key, name, title?, avatar?, extra?, variant?: \"person\" | \"agent\", children? }. `key` is unique across the chart. `avatar` is usually an <Avatar>; `extra` a Badge or status.",
      "name": "data",
      "type": "OrgChartNodeProp[]"
    },
    {
      "description": "Replace a box's content. The box, its border, the connectors and the keyboard stay the library's; the narrow Tree form uses it too.",
      "name": "renderNode",
      "type": "(node: OrgChartNodeProp) => ReactNode"
    },
    {
      "description": "Accessible name of the role=\"tree\" (a plain string). Localized default \"Organization chart\".",
      "name": "label",
      "type": "string"
    },
    {
      "description": "DOM id of the root.",
      "name": "id",
      "type": "string"
    },
    {
      "description": "Root class.",
      "name": "className",
      "type": "string"
    }
  ],
  "related": [
    "Tree — the indented, collapsible outline. OrgChart renders it as its narrow form.",
    "Avatar — the mark in each box.",
    "Badge — a status in a box's `extra` slot."
  ],
  "rules": [
    2,
    6,
    23,
    44,
    45
  ],
  "storyPath": "data-display/org-chart.tsx",
  "tagline": "An organization chart: boxes (avatar, name, title, extra) joined by CSS connector lines, top-down; `agent` nodes are dashed. Scrolls horizontally in its own named region when wider than its container, and turns into an indented Tree when the CONTAINER is under 40rem. APG tree view (tree/treeitem/group, roving tabindex, arrow keys).",
  "tier": "lab",
  "usage": [
    "DO mark AI agents with `variant: \"agent\"` — the box is dashed AND its accessible name ends in a localized \"AI agent\", so the kind is never carried by the stroke alone.",
    "DO give it the width it has; the breakpoint is a container query, so a chart in a narrow side panel switches to the Tree form on a wide screen too.",
    "DO retune boxes and lines through the --org-chart-* tokens (node size, gaps, line width/colour, agent border style).",
    "DON'T wrap it in your own overflow-x scroller — it owns its scroll region, which only becomes a named tab stop when the chart actually overflows.",
    "DON'T use it for an outline users expand and collapse — that is Tree. OrgChart always shows every node."
  ],
  "useCases": [
    "A company or team org chart with people and AI agents side by side.",
    "Reporting lines on an admin screen, falling back to an indented list in a narrow panel or on a phone."
  ]
}