{
  "v": 0,
  "components": {
    "foundations-icon": {
      "id": "foundations-icon",
      "name": "Icon",
      "path": "./src/components/Icon.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Icon",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Icon.tsx",
        "actualName": "Icon",
        "exportName": "Icon",
        "props": {
          "name": {
            "required": true,
            "tsType": {
              "name": "union",
              "raw": "keyof typeof PATHS",
              "elements": [
                {
                  "name": "literal",
                  "value": "check"
                },
                {
                  "name": "literal",
                  "value": "minus"
                },
                {
                  "name": "literal",
                  "value": "x"
                },
                {
                  "name": "literal",
                  "value": "info"
                },
                {
                  "name": "literal",
                  "value": "alert"
                },
                {
                  "name": "literal",
                  "value": "success"
                },
                {
                  "name": "literal",
                  "value": "plus"
                },
                {
                  "name": "literal",
                  "value": "search"
                },
                {
                  "name": "literal",
                  "value": "folder"
                },
                {
                  "name": "literal",
                  "value": "user"
                },
                {
                  "name": "literal",
                  "value": "arrowUp"
                },
                {
                  "name": "literal",
                  "value": "arrowDown"
                },
                {
                  "name": "literal",
                  "value": "chevronDown"
                },
                {
                  "name": "literal",
                  "value": "chevronUp"
                },
                {
                  "name": "literal",
                  "value": "chevronLeft"
                },
                {
                  "name": "literal",
                  "value": "chevronRight"
                },
                {
                  "name": "literal",
                  "value": "calendar"
                },
                {
                  "name": "literal",
                  "value": "sort"
                },
                {
                  "name": "literal",
                  "value": "menu"
                },
                {
                  "name": "literal",
                  "value": "home"
                },
                {
                  "name": "literal",
                  "value": "settings"
                },
                {
                  "name": "literal",
                  "value": "bell"
                },
                {
                  "name": "literal",
                  "value": "more"
                },
                {
                  "name": "literal",
                  "value": "sparkle"
                },
                {
                  "name": "literal",
                  "value": "copy"
                },
                {
                  "name": "literal",
                  "value": "refresh"
                },
                {
                  "name": "literal",
                  "value": "edit"
                },
                {
                  "name": "literal",
                  "value": "thumbUp"
                },
                {
                  "name": "literal",
                  "value": "thumbDown"
                },
                {
                  "name": "literal",
                  "value": "stop"
                },
                {
                  "name": "literal",
                  "value": "paperclip"
                },
                {
                  "name": "literal",
                  "value": "tool"
                },
                {
                  "name": "literal",
                  "value": "shield"
                },
                {
                  "name": "literal",
                  "value": "clock"
                },
                {
                  "name": "literal",
                  "value": "globe"
                },
                {
                  "name": "literal",
                  "value": "file"
                },
                {
                  "name": "literal",
                  "value": "external"
                },
                {
                  "name": "literal",
                  "value": "undo"
                },
                {
                  "name": "literal",
                  "value": "lightbulb"
                },
                {
                  "name": "literal",
                  "value": "code"
                }
              ]
            },
            "description": ""
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "number"
            },
            "description": "",
            "defaultValue": {
              "value": "20",
              "computed": false
            }
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "foundations-icon--default",
          "name": "Default",
          "snippet": "const Default = () => <Icon name=\"search\" size={20} />;"
        },
        {
          "id": "foundations-icon--all-glyphs",
          "name": "All Glyphs",
          "snippet": "const AllGlyphs = (args) => (\n  <div className=\"sb-row\" style={{ color: 'var(--color-fg-secondary)' }}>\n    {NAMES.map((n) => (\n      <span key={n} title={n} style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4, width: 88, fontSize: 'var(--font-size-tiny)', color: 'var(--color-text-tertiary)' }}>\n        <Icon {...args} name={n} size={24} />\n        {n}\n      </span>\n    ))}\n  </div>\n);"
        }
      ],
      "import": "import { Icon } from '@stanvision/atomus-react';"
    },
    "actions-button": {
      "id": "actions-button",
      "name": "Button",
      "path": "./src/components/Button.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Button",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Button.tsx",
        "actualName": "Button",
        "exportName": "Button",
        "props": {
          "hierarchy": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'primary' | 'secondary' | 'outline' | 'tertiary' | 'link'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'primary'"
                },
                {
                  "name": "literal",
                  "value": "'secondary'"
                },
                {
                  "name": "literal",
                  "value": "'outline'"
                },
                {
                  "name": "literal",
                  "value": "'tertiary'"
                },
                {
                  "name": "literal",
                  "value": "'link'"
                }
              ]
            },
            "description": "Figma: Hierarchy",
            "defaultValue": {
              "value": "'secondary'",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'xs'"
                },
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                },
                {
                  "name": "literal",
                  "value": "'xl'"
                }
              ]
            },
            "description": "Figma: Size — xs 24 · sm 32 · md 40 · lg 48 · xl 56",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "iconLeading": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Leading icon + Leading icon swap"
          },
          "iconTrailing": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Trailing icon + Trailing icon swap"
          },
          "loading": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: State=Loading"
          },
          "iconOnly": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Square icon-only button (Figma: Button icon). Requires aria-label."
          },
          "fullWidth": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": ""
          },
          "type": {
            "defaultValue": {
              "value": "'button'",
              "computed": false
            },
            "required": false
          }
        },
        "composes": [
          "ButtonHTMLAttributes"
        ]
      },
      "stories": [
        {
          "id": "actions-button--primary",
          "name": "Primary",
          "snippet": "const Primary = () => <Button hierarchy=\"primary\" size=\"md\">Save changes</Button>;"
        },
        {
          "id": "actions-button--hierarchies",
          "name": "Hierarchies",
          "snippet": "const Hierarchies = () => <div className=\"sb-row\">\n    <Button size=\"md\" hierarchy=\"primary\">Save changes</Button>\n    <Button size=\"md\" hierarchy=\"secondary\">Preview</Button>\n    <Button size=\"md\" hierarchy=\"outline\">Export</Button>\n    <Button size=\"md\" hierarchy=\"tertiary\">Cancel</Button>\n    <Button size=\"md\" hierarchy=\"link\">Learn more</Button>\n</div>;"
        },
        {
          "id": "actions-button--sizes",
          "name": "Sizes",
          "snippet": "const Sizes = (args) => (\n  <div className=\"sb-row\">\n    {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((s) => <Button key={s} {...args} size={s}>Size {s}</Button>)}\n  </div>\n);"
        },
        {
          "id": "actions-button--with-icons",
          "name": "With Icons",
          "snippet": "const WithIcons = () => <div className=\"sb-row\">\n    <Button hierarchy=\"primary\" size=\"md\" iconLeading={<Icon name=\"plus\" />}>New project</Button>\n    <Button size=\"md\" hierarchy=\"outline\" iconTrailing={<Icon name=\"chevronRight\" />}>Continue</Button>\n    <Button\n        size=\"md\"\n        hierarchy=\"outline\"\n        iconOnly\n        aria-label=\"Search\"\n        iconLeading={<Icon name=\"search\" />}>Save changes</Button>\n    <Button\n        size=\"md\"\n        hierarchy=\"tertiary\"\n        iconOnly\n        aria-label=\"More actions\"\n        iconLeading={<Icon name=\"more\" />}>Save changes</Button>\n</div>;"
        },
        {
          "id": "actions-button--states",
          "name": "States",
          "snippet": "const States = (args) => (\n  <div className=\"sb-stack\">\n    {(['primary', 'secondary', 'outline', 'tertiary', 'link'] as const).map((h) => (\n      <div key={h} className=\"sb-row\">\n        <Button {...args} hierarchy={h}>Default</Button>\n        <Button {...args} hierarchy={h} loading>Saving</Button>\n        <Button {...args} hierarchy={h} disabled>Disabled</Button>\n      </div>\n    ))}\n  </div>\n);"
        },
        {
          "id": "actions-button--full-width",
          "name": "Full Width",
          "snippet": "const FullWidth = () => <Button hierarchy=\"primary\" size=\"lg\" fullWidth>Save changes</Button>;"
        }
      ],
      "import": "import { Button, Icon } from '@stanvision/atomus-react';"
    },
    "forms-calendar": {
      "id": "forms-calendar",
      "name": "Calendar",
      "path": "./src/components/Calendar.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Date picker body with Calendar day cells (Default, Today, Selected, In range, Outside, Disabled). Arrow keys move days, PageUp/PageDown move months.",
      "reactDocgen": {
        "description": "Figma: Date picker body with Calendar day cells (Default, Today, Selected, In range, Outside, Disabled). Arrow keys move days, PageUp/PageDown move months.",
        "methods": [],
        "displayName": "Calendar",
        "definedInFile": "/opt/buildhome/repo/react/src/components/DatePicker.tsx",
        "actualName": "Calendar",
        "exportName": "Calendar",
        "props": {
          "type": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'single' | 'range'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'single'"
                },
                {
                  "name": "literal",
                  "value": "'range'"
                }
              ]
            },
            "description": "Figma: Date picker Type",
            "defaultValue": {
              "value": "'single'",
              "computed": false
            }
          },
          "value": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "ISODate | null",
              "elements": [
                {
                  "name": "string"
                },
                {
                  "name": "null"
                }
              ]
            },
            "description": ""
          },
          "range": {
            "required": false,
            "tsType": {
              "name": "DateRange"
            },
            "description": ""
          },
          "onChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(value: ISODate) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "string"
                    },
                    "name": "value"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": ""
          },
          "onRangeChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(range: DateRange) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "DateRange"
                    },
                    "name": "range"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": ""
          },
          "min": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "max": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "weekStartsOn": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "0 | 1",
              "elements": [
                {
                  "name": "literal",
                  "value": "0"
                },
                {
                  "name": "literal",
                  "value": "1"
                }
              ]
            },
            "description": "Monday-first by default",
            "defaultValue": {
              "value": "1",
              "computed": false
            }
          },
          "locale": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "forms-calendar--single",
          "name": "Single",
          "snippet": "const Single = args => {\n    const [value, setValue] = useState(args.value);\n\n    return (\n        <Calendar\n            type=\"single\"\n            locale=\"en-GB\"\n            weekStartsOn={1}\n            value={value}\n            onChange={setValue} />\n    );\n};"
        },
        {
          "id": "forms-calendar--range",
          "name": "Range",
          "snippet": "const Range = () => {\n    const [range, setRange] = useState<DateRange>({ start: '2024-03-08', end: '2024-03-15' });\n\n    return (\n        <Calendar\n            type=\"range\"\n            value=\"2024-03-12\"\n            locale=\"en-GB\"\n            weekStartsOn={1}\n            range={range}\n            onRangeChange={setRange} />\n    );\n};"
        },
        {
          "id": "forms-calendar--min-max",
          "name": "Min Max",
          "snippet": "const MinMax = () => <Calendar\n    type=\"single\"\n    value=\"2024-03-12\"\n    locale=\"en-GB\"\n    weekStartsOn={1}\n    min=\"2024-03-05\"\n    max=\"2024-03-25\" />;"
        }
      ],
      "import": "import { Calendar } from '@stanvision/atomus-react';"
    },
    "forms-checkbox": {
      "id": "forms-checkbox",
      "name": "Checkbox",
      "path": "./src/components/Checkbox.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Checkbox",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Choice.tsx",
        "actualName": "Checkbox",
        "exportName": "Checkbox",
        "props": {
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Label (+ Show label)"
          },
          "description": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Description (+ Show description)"
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "Figma: Size — sm (16 control, 14px label) · md (20 control, 16px label)",
            "defaultValue": {
              "value": "'sm'",
              "computed": false
            }
          },
          "indeterminate": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Checked=Indeterminate"
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "forms-checkbox--default",
          "name": "Default",
          "snippet": "const Default = () => <Checkbox label=\"Email me product updates\" size=\"sm\" />;"
        },
        {
          "id": "forms-checkbox--states",
          "name": "States",
          "snippet": "const States = () => <div className=\"sb-stack\">\n    <Checkbox size=\"sm\" label=\"Unchecked\" />\n    <Checkbox size=\"sm\" label=\"Checked\" defaultChecked />\n    <Checkbox size=\"sm\" label=\"Indeterminate\" indeterminate />\n    <Checkbox size=\"sm\" label=\"Disabled\" disabled />\n    <Checkbox size=\"sm\" label=\"Disabled and checked\" disabled defaultChecked />\n</div>;"
        },
        {
          "id": "forms-checkbox--with-description",
          "name": "With Description",
          "snippet": "const WithDescription = () => <Checkbox\n    label=\"Share analytics\"\n    size=\"sm\"\n    description=\"Anonymous usage data helps us improve Atomus.\" />;"
        },
        {
          "id": "forms-checkbox--sizes",
          "name": "Sizes",
          "snippet": "const Sizes = () => <div className=\"sb-stack\">\n    <Checkbox size=\"sm\" label=\"Small\" defaultChecked />\n    <Checkbox size=\"md\" label=\"Medium\" defaultChecked />\n</div>;"
        }
      ],
      "import": "import { Checkbox } from '@stanvision/atomus-react';"
    },
    "forms-date-picker": {
      "id": "forms-date-picker",
      "name": "DatePicker",
      "path": "./src/components/DatePicker.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Date input + Date picker. A field that opens the calendar in a popover.",
      "reactDocgen": {
        "description": "Figma: Date input + Date picker. A field that opens the calendar in a popover.",
        "methods": [],
        "displayName": "DatePicker",
        "definedInFile": "/opt/buildhome/repo/react/src/components/DatePicker.tsx",
        "actualName": "DatePicker",
        "exportName": "DatePicker",
        "props": {
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Date input — Label"
          },
          "hint": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "error": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "placeholder": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md' | 'lg'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                }
              ]
            },
            "description": "",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "disabled": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": ""
          },
          "id": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "defaultOpen": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Start open (docs and tests)"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "forms-date-picker--empty",
          "name": "Empty",
          "snippet": "const Empty = () => <DatePicker\n    label=\"Start date\"\n    locale=\"en-GB\"\n    size=\"md\"\n    hint=\"The project starts on this day.\" />;"
        },
        {
          "id": "forms-date-picker--with-value",
          "name": "With Value",
          "snippet": "const WithValue = () => <DatePicker label=\"Start date\" locale=\"en-GB\" size=\"md\" value=\"2024-03-12\" />;"
        },
        {
          "id": "forms-date-picker--open",
          "name": "Open",
          "snippet": "const Open = () => {\n    const [value, setValue] = useState<string | null>('2024-03-12');\n\n    return (\n        <DatePicker\n            label=\"Start date\"\n            locale=\"en-GB\"\n            size=\"md\"\n            defaultOpen\n            value={value}\n            onChange={setValue} />\n    );\n};"
        },
        {
          "id": "forms-date-picker--range-open",
          "name": "Range Open",
          "snippet": "const RangeOpen = () => {\n    const [range, setRange] = useState<DateRange>({ start: '2024-03-08', end: '2024-03-15' });\n\n    return (\n        <DatePicker\n            label=\"Campaign dates\"\n            locale=\"en-GB\"\n            size=\"md\"\n            type=\"range\"\n            defaultOpen\n            range={range}\n            onRangeChange={setRange} />\n    );\n};"
        },
        {
          "id": "forms-date-picker--with-error",
          "name": "With Error",
          "snippet": "const WithError = () => <DatePicker\n    label=\"Start date\"\n    locale=\"en-GB\"\n    size=\"md\"\n    error=\"Pick a date after today.\"\n    value=\"2024-03-12\" />;"
        },
        {
          "id": "forms-date-picker--disabled",
          "name": "Disabled",
          "snippet": "const Disabled = () => <DatePicker label=\"Start date\" locale=\"en-GB\" size=\"md\" disabled value=\"2024-03-12\" />;"
        }
      ],
      "import": "import { DatePicker } from '@stanvision/atomus-react';"
    },
    "forms-input": {
      "id": "forms-input",
      "name": "Input",
      "path": "./src/components/Input.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Input",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Input.tsx",
        "actualName": "Input",
        "exportName": "Input",
        "props": {
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Label (+ Show label). Always give one; use aria-label when it is hidden."
          },
          "hint": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Hint (+ Show hint)"
          },
          "error": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: State=Error — replaces the hint and turns the border red"
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md' | 'lg'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                }
              ]
            },
            "description": "Figma: Size — sm 32 · md 40 · lg 48, matching Button",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "iconLeading": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": ""
          },
          "iconTrailing": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": ""
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "forms-input--default",
          "name": "Default",
          "snippet": "const Default = () => <Input label=\"Email\" placeholder=\"you@company.com\" size=\"md\" />;"
        },
        {
          "id": "forms-input--with-hint",
          "name": "With Hint",
          "snippet": "const WithHint = () => <Input\n    label=\"Email\"\n    placeholder=\"you@company.com\"\n    size=\"md\"\n    hint=\"We never share your email.\" />;"
        },
        {
          "id": "forms-input--with-error",
          "name": "With Error",
          "snippet": "const WithError = () => <Input\n    label=\"Workspace URL\"\n    placeholder=\"you@company.com\"\n    size=\"md\"\n    defaultValue=\"atomus\"\n    error=\"This URL is taken. Try another one.\" />;"
        },
        {
          "id": "forms-input--disabled",
          "name": "Disabled",
          "snippet": "const Disabled = () => <Input\n    label=\"Plan\"\n    placeholder=\"you@company.com\"\n    size=\"md\"\n    defaultValue=\"Agency\"\n    disabled />;"
        },
        {
          "id": "forms-input--with-icon",
          "name": "With Icon",
          "snippet": "const WithIcon = () => <Input\n    label=\"Search\"\n    placeholder=\"Search projects\"\n    size=\"md\"\n    iconLeading={<Icon name=\"search\" size={16} />} />;"
        },
        {
          "id": "forms-input--sizes",
          "name": "Sizes",
          "snippet": "const Sizes = (args) => (\n  <div className=\"sb-stack\">\n    {(['sm', 'md', 'lg'] as const).map((s) => <Input key={s} {...args} size={s} label={`Size ${s}`} />)}\n  </div>\n);"
        }
      ],
      "import": "import { Icon, Input } from '@stanvision/atomus-react';\nimport { Icon } from './Icon';"
    },
    "forms-radio": {
      "id": "forms-radio",
      "name": "Radio",
      "path": "./src/components/Radio.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Radio",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Choice.tsx",
        "actualName": "Radio",
        "exportName": "Radio",
        "props": {
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Label (+ Show label)"
          },
          "description": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Description (+ Show description)"
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "Figma: Size — sm (16 control, 14px label) · md (20 control, 16px label)",
            "defaultValue": {
              "value": "'sm'",
              "computed": false
            }
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "forms-radio--default",
          "name": "Default",
          "snippet": "const Default = () => <Radio label=\"Starter\" name=\"plan\" size=\"sm\" />;"
        },
        {
          "id": "forms-radio--group",
          "name": "Group",
          "snippet": "const Group = () => <div className=\"sb-stack\" role=\"radiogroup\" aria-label=\"Plan\">\n    <Radio\n        size=\"sm\"\n        name=\"plan-group\"\n        label=\"Starter\"\n        description=\"Up to 3 projects\"\n        defaultChecked />\n    <Radio size=\"sm\" name=\"plan-group\" label=\"Pro\" description=\"Unlimited projects\" />\n    <Radio\n        size=\"sm\"\n        name=\"plan-group\"\n        label=\"Enterprise\"\n        description=\"Talk to sales\"\n        disabled />\n</div>;"
        },
        {
          "id": "forms-radio--sizes",
          "name": "Sizes",
          "snippet": "const Sizes = () => <div className=\"sb-stack\" role=\"radiogroup\" aria-label=\"Size\">\n    <Radio name=\"size-group\" size=\"sm\" label=\"Small\" defaultChecked />\n    <Radio name=\"size-group\" size=\"md\" label=\"Medium\" />\n</div>;"
        }
      ],
      "import": "import { Radio } from '@stanvision/atomus-react';"
    },
    "forms-select": {
      "id": "forms-select",
      "name": "Select",
      "path": "./src/components/Select.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Select (trigger) + Dropdown menu (list). A WAI-ARIA select-only combobox.",
      "reactDocgen": {
        "description": "Figma: Select (trigger) + Dropdown menu (list). A WAI-ARIA select-only combobox.",
        "methods": [],
        "displayName": "Select",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Select.tsx",
        "actualName": "Select",
        "exportName": "Select",
        "props": {
          "options": {
            "required": true,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "SelectOption"
                }
              ],
              "raw": "SelectOption[]"
            },
            "description": ""
          },
          "value": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "defaultValue": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "onChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(value: string) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "string"
                    },
                    "name": "value"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": ""
          },
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Label (+ Show label)"
          },
          "hint": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Show hint"
          },
          "error": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: State=Error"
          },
          "placeholder": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "",
            "defaultValue": {
              "value": "'Select an option'",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md' | 'lg'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                }
              ]
            },
            "description": "Figma: Size — sm 32 · md 40 · lg 48",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "disabled": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": ""
          },
          "name": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Form field name; a hidden input carries the value"
          },
          "id": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "defaultOpen": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Start open (docs and tests)"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "forms-select--placeholder",
          "name": "Placeholder",
          "snippet": "const Placeholder = () => <Select\n    label=\"Team\"\n    options={[\n      { value: 'design', label: 'Design' },\n      { value: 'product', label: 'Product' },\n      { value: 'marketing', label: 'Marketing' },\n      { value: 'eng', label: 'Engineering' },\n      { value: 'ops', label: 'Operations', disabled: true },\n    ]}\n    placeholder=\"Select a team\"\n    size=\"md\" />;"
        },
        {
          "id": "forms-select--with-value",
          "name": "With Value",
          "snippet": "const WithValue = () => <Select\n    label=\"Team\"\n    options={[\n      { value: 'design', label: 'Design' },\n      { value: 'product', label: 'Product' },\n      { value: 'marketing', label: 'Marketing' },\n      { value: 'eng', label: 'Engineering' },\n      { value: 'ops', label: 'Operations', disabled: true },\n    ]}\n    placeholder=\"Select a team\"\n    size=\"md\"\n    defaultValue=\"product\"\n    hint=\"You can change it later.\" />;"
        },
        {
          "id": "forms-select--open",
          "name": "Open",
          "snippet": "const Open = () => <Select\n    label=\"Team\"\n    options={[\n      { value: 'design', label: 'Design' },\n      { value: 'product', label: 'Product' },\n      { value: 'marketing', label: 'Marketing' },\n      { value: 'eng', label: 'Engineering' },\n      { value: 'ops', label: 'Operations', disabled: true },\n    ]}\n    placeholder=\"Select a team\"\n    size=\"md\"\n    defaultValue=\"design\"\n    defaultOpen />;"
        },
        {
          "id": "forms-select--with-error",
          "name": "With Error",
          "snippet": "const WithError = () => <Select\n    label=\"Team\"\n    options={[\n      { value: 'design', label: 'Design' },\n      { value: 'product', label: 'Product' },\n      { value: 'marketing', label: 'Marketing' },\n      { value: 'eng', label: 'Engineering' },\n      { value: 'ops', label: 'Operations', disabled: true },\n    ]}\n    placeholder=\"Select a team\"\n    size=\"md\"\n    error=\"Choose a team to continue.\" />;"
        },
        {
          "id": "forms-select--disabled",
          "name": "Disabled",
          "snippet": "const Disabled = () => <Select\n    label=\"Team\"\n    options={[\n      { value: 'design', label: 'Design' },\n      { value: 'product', label: 'Product' },\n      { value: 'marketing', label: 'Marketing' },\n      { value: 'eng', label: 'Engineering' },\n      { value: 'ops', label: 'Operations', disabled: true },\n    ]}\n    placeholder=\"Select a team\"\n    size=\"md\"\n    defaultValue=\"design\"\n    disabled />;"
        }
      ],
      "import": "import { Select } from '@stanvision/atomus-react';"
    },
    "forms-toggle": {
      "id": "forms-toggle",
      "name": "Toggle",
      "path": "./src/components/Toggle.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Toggle",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Choice.tsx",
        "actualName": "Toggle",
        "exportName": "Toggle",
        "props": {
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Label (+ Show label)"
          },
          "description": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Description (+ Show description)"
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "Figma: Size — sm (16 control, 14px label) · md (20 control, 16px label)",
            "defaultValue": {
              "value": "'sm'",
              "computed": false
            }
          },
          "shape": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'pill' | 'square'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'pill'"
                },
                {
                  "name": "literal",
                  "value": "'square'"
                }
              ]
            },
            "description": "Figma: Shape",
            "defaultValue": {
              "value": "'pill'",
              "computed": false
            }
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "forms-toggle--default",
          "name": "Default",
          "snippet": "const Default = () => <Toggle label=\"Dark mode\" size=\"sm\" shape=\"pill\" />;"
        },
        {
          "id": "forms-toggle--states",
          "name": "States",
          "snippet": "const States = () => <div className=\"sb-stack\">\n    <Toggle size=\"sm\" shape=\"pill\" label=\"Off\" />\n    <Toggle size=\"sm\" shape=\"pill\" label=\"On\" defaultChecked />\n    <Toggle size=\"sm\" shape=\"pill\" label=\"Disabled\" disabled />\n    <Toggle size=\"sm\" shape=\"pill\" label=\"Disabled and on\" disabled defaultChecked />\n</div>;"
        },
        {
          "id": "forms-toggle--shapes-and-sizes",
          "name": "Shapes And Sizes",
          "snippet": "const ShapesAndSizes = () => <div className=\"sb-stack\">\n    <Toggle\n        shape=\"pill\"\n        size=\"md\"\n        label=\"Weekly digest\"\n        description=\"Every Monday\"\n        defaultChecked />\n    <Toggle size=\"sm\" shape=\"square\" label=\"Square\" defaultChecked />\n</div>;"
        }
      ],
      "import": "import { Toggle } from '@stanvision/atomus-react';"
    },
    "feedback-alert": {
      "id": "feedback-alert",
      "name": "Alert",
      "path": "./src/components/Alert.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Alert",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Alert.tsx",
        "actualName": "Alert",
        "exportName": "Alert",
        "props": {
          "title": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Title"
          },
          "children": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Description (+ Show description)"
          },
          "color": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "AlertColor | AlertColorAlias",
              "elements": [
                {
                  "name": "union",
                  "raw": "'brand' | 'gray' | 'error' | 'warning' | 'success'",
                  "elements": [
                    {
                      "name": "literal",
                      "value": "'brand'"
                    },
                    {
                      "name": "literal",
                      "value": "'gray'"
                    },
                    {
                      "name": "literal",
                      "value": "'error'"
                    },
                    {
                      "name": "literal",
                      "value": "'warning'"
                    },
                    {
                      "name": "literal",
                      "value": "'success'"
                    }
                  ]
                },
                {
                  "name": "union",
                  "raw": "'info' | 'neutral' | 'danger'",
                  "elements": [
                    {
                      "name": "literal",
                      "value": "'info'"
                    },
                    {
                      "name": "literal",
                      "value": "'neutral'"
                    },
                    {
                      "name": "literal",
                      "value": "'danger'"
                    }
                  ]
                }
              ]
            },
            "description": "Figma: Color. Aliases: `info` = brand, `neutral` = gray, `danger` = error.",
            "defaultValue": {
              "value": "'brand'",
              "computed": false
            }
          },
          "variant": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'subtle' | 'outline' | 'solid'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'subtle'"
                },
                {
                  "name": "literal",
                  "value": "'outline'"
                },
                {
                  "name": "literal",
                  "value": "'solid'"
                }
              ]
            },
            "description": "Figma: Style.\n`subtle` (default) — tinted fill and hairline border.\n`outline` — white surface with a coloured border; use on tinted or grey surfaces.\n`solid` — full-colour fill; only for blocking, page-level issues.",
            "defaultValue": {
              "value": "'subtle'",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "Figma: Size — `md` (default) or the compact `sm` for dense UI, forms and side panels.",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "flush": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Removes the radius and side borders so the alert can span the full width of a card or page edge.",
            "defaultValue": {
              "value": "false",
              "computed": false
            }
          },
          "actions": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Actions — up to two small buttons"
          },
          "onClose": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Figma: Close"
          },
          "icon": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Replaces the default status icon"
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "feedback-alert--default",
          "name": "Default",
          "snippet": "const Default = () => <Alert color=\"brand\" variant=\"subtle\" size=\"md\" title={COPY.brand[0]}>{COPY.brand[1]}</Alert>;",
          "warning": "Incomplete snippet: `COPY` could not be resolved statically."
        },
        {
          "id": "feedback-alert--subtle",
          "name": "Subtle",
          "error": {
            "name": "SyntaxError",
            "message": "Expected story to be csf factory, function or an object expression\n  37 |   ),\n  38 | });\n> 39 | export const Subtle = all('subtle');\n     |                       ^^^^^^^^^^^^^\n  40 | export const Outline = all('outline');\n  41 | export const Solid = all('solid');\n  42 |"
          }
        },
        {
          "id": "feedback-alert--outline",
          "name": "Outline",
          "error": {
            "name": "SyntaxError",
            "message": "Expected story to be csf factory, function or an object expression\n  38 | });\n  39 | export const Subtle = all('subtle');\n> 40 | export const Outline = all('outline');\n     |                        ^^^^^^^^^^^^^^\n  41 | export const Solid = all('solid');\n  42 |\n  43 | export const WithActions: Story = {"
          }
        },
        {
          "id": "feedback-alert--solid",
          "name": "Solid",
          "error": {
            "name": "SyntaxError",
            "message": "Expected story to be csf factory, function or an object expression\n  39 | export const Subtle = all('subtle');\n  40 | export const Outline = all('outline');\n> 41 | export const Solid = all('solid');\n     |                      ^^^^^^^^^^^^\n  42 |\n  43 | export const WithActions: Story = {\n  44 |   args: {"
          }
        },
        {
          "id": "feedback-alert--with-actions",
          "name": "With Actions",
          "snippet": "const WithActions = () => <Alert\n    color=\"warning\"\n    variant=\"subtle\"\n    size=\"md\"\n    title={COPY.warning[0]}\n    actions={<><Button hierarchy=\"tertiary\" size=\"sm\">Dismiss</Button><Button hierarchy=\"link\" size=\"sm\">Add payment method</Button></>}>{COPY.warning[1]}</Alert>;",
          "warning": "Incomplete snippet: `COPY` could not be resolved statically."
        },
        {
          "id": "feedback-alert--small",
          "name": "Small",
          "snippet": "const Small = () => <Alert color=\"error\" variant=\"subtle\" size=\"sm\" title={COPY.error[0]}>{COPY.error[1]}</Alert>;",
          "warning": "Incomplete snippet: `COPY` could not be resolved statically."
        },
        {
          "id": "feedback-alert--flush",
          "name": "Flush",
          "snippet": "const Flush = () => <Alert color=\"gray\" variant=\"subtle\" size=\"md\" title={COPY.gray[0]} flush>{COPY.gray[1]}</Alert>;",
          "warning": "Incomplete snippet: `COPY` could not be resolved statically."
        }
      ],
      "import": "import { Alert, Button } from '@stanvision/atomus-react';\nimport { Button } from './Button';"
    },
    "feedback-empty-state": {
      "id": "feedback-empty-state",
      "name": "EmptyState",
      "path": "./src/components/EmptyState.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "EmptyState",
        "definedInFile": "/opt/buildhome/repo/react/src/components/EmptyState.tsx",
        "actualName": "EmptyState",
        "exportName": "EmptyState",
        "props": {
          "title": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Title"
          },
          "description": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Description"
          },
          "icon": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Featured icon glyph"
          },
          "actions": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Actions — usually Outline + Primary buttons"
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "Figma: Size — sm (panels) · md (pages)",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "feedback-empty-state--default",
          "name": "Default",
          "snippet": "const Default = () => <EmptyState\n    title=\"No projects found\"\n    description=\"Your search “Atlas” did not match any projects. Try another search.\"\n    size=\"md\" />;"
        },
        {
          "id": "feedback-empty-state--with-actions",
          "name": "With Actions",
          "snippet": "const WithActions = () => <EmptyState\n    title=\"No projects found\"\n    description=\"Your search “Atlas” did not match any projects. Try another search.\"\n    size=\"md\"\n    actions={<><Button hierarchy=\"outline\">Clear search</Button><Button hierarchy=\"primary\" iconLeading={<Icon name=\"plus\" />}>New project</Button></>} />;"
        },
        {
          "id": "feedback-empty-state--small",
          "name": "Small",
          "snippet": "const Small = () => <EmptyState\n    title=\"No files yet\"\n    description=\"Upload a file to get started.\"\n    size=\"sm\"\n    icon={<Icon name=\"folder\" size={24} />} />;"
        }
      ],
      "import": "import { Button, EmptyState, Icon } from '@stanvision/atomus-react';\nimport { Button } from './Button';\nimport { Icon } from './Icon';"
    },
    "feedback-progress-bar": {
      "id": "feedback-progress-bar",
      "name": "ProgressBar",
      "path": "./src/components/ProgressBar.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "ProgressBar",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ProgressBar.tsx",
        "actualName": "ProgressBar",
        "exportName": "ProgressBar",
        "props": {
          "value": {
            "required": true,
            "tsType": {
              "name": "number"
            },
            "description": "0–100"
          },
          "labelPosition": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'none' | 'right' | 'bottom'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'none'"
                },
                {
                  "name": "literal",
                  "value": "'right'"
                },
                {
                  "name": "literal",
                  "value": "'bottom'"
                }
              ]
            },
            "description": "Figma: Label — where the percentage sits",
            "defaultValue": {
              "value": "'right'",
              "computed": false
            }
          },
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Accessible name, e.g. \"Storage used\"",
            "defaultValue": {
              "value": "'Progress'",
              "computed": false
            }
          }
        },
        "composes": [
          "HTMLAttributes"
        ]
      },
      "stories": [
        {
          "id": "feedback-progress-bar--label-right",
          "name": "Label Right",
          "snippet": "const LabelRight = () => <ProgressBar value={64} label=\"Storage used\" labelPosition=\"right\" />;"
        },
        {
          "id": "feedback-progress-bar--label-bottom",
          "name": "Label Bottom",
          "snippet": "const LabelBottom = () => <ProgressBar value={64} label=\"Storage used\" labelPosition=\"bottom\" />;"
        },
        {
          "id": "feedback-progress-bar--no-label",
          "name": "No Label",
          "snippet": "const NoLabel = () => <ProgressBar value={64} label=\"Storage used\" labelPosition=\"none\" />;"
        },
        {
          "id": "feedback-progress-bar--values",
          "name": "Values",
          "snippet": "const Values = (args) => <div className=\"sb-stack\">{[0, 25, 50, 75, 100].map((v) => <ProgressBar key={v} {...args} value={v} label={`Step ${v / 25 + 1} of 5`} />)}</div>;"
        }
      ],
      "import": "import { ProgressBar } from '@stanvision/atomus-react';"
    },
    "feedback-toast": {
      "id": "feedback-toast",
      "name": "Toast",
      "path": "./src/components/Toast.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Toast — a single floating notification. Use ToastProvider + useToast to show them.",
      "reactDocgen": {
        "description": "Figma: Toast — a single floating notification. Use ToastProvider + useToast to show them.",
        "methods": [],
        "displayName": "Toast",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Toast.tsx",
        "actualName": "Toast",
        "exportName": "Toast",
        "props": {
          "title": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Title"
          },
          "description": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Description"
          },
          "color": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'brand' | 'gray' | 'error' | 'warning' | 'success'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'brand'"
                },
                {
                  "name": "literal",
                  "value": "'gray'"
                },
                {
                  "name": "literal",
                  "value": "'error'"
                },
                {
                  "name": "literal",
                  "value": "'warning'"
                },
                {
                  "name": "literal",
                  "value": "'success'"
                }
              ]
            },
            "description": "Figma: Color",
            "defaultValue": {
              "value": "'gray'",
              "computed": false
            }
          },
          "onClose": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Figma: Close"
          },
          "action": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": ""
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "feedback-toast--default",
          "name": "Default",
          "snippet": "const Default = () => <Toast\n    title=\"Changes saved\"\n    description=\"Your workspace settings are up to date.\"\n    color=\"success\"\n    onClose={() => {}} />;"
        },
        {
          "id": "feedback-toast--colors",
          "name": "Colors",
          "snippet": "const Colors = (args) => <div className=\"sb-stack\">{COLORS.map((c) => <Toast key={c} {...args} color={c} title={`${c[0].toUpperCase()}${c.slice(1)} toast`} />)}</div>;"
        },
        {
          "id": "feedback-toast--with-action",
          "name": "With Action",
          "snippet": "const WithAction = () => <Toast\n    title=\"Project archived\"\n    description={undefined}\n    color=\"gray\"\n    onClose={() => {}}\n    action={<Button hierarchy=\"link\" size=\"sm\">Undo</Button>} />;"
        },
        {
          "id": "feedback-toast--with-provider",
          "name": "With Provider",
          "snippet": "const WithProvider = () => <ToastProvider position=\"bottom-right\"><Trigger /></ToastProvider>;",
          "description": "ToastProvider + useToast(): click the button to show a toast."
        }
      ],
      "import": "import { Button, Toast, ToastProvider } from '@stanvision/atomus-react';\nimport { Button } from './Button';"
    },
    "navigation-app-header": {
      "id": "navigation-app-header",
      "name": "AppHeader",
      "path": "./src/components/AppHeader.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: App header — top navigation bar for apps.",
      "reactDocgen": {
        "description": "Figma: App header — top navigation bar for apps.",
        "methods": [],
        "displayName": "AppHeader",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Navigation.tsx",
        "actualName": "AppHeader",
        "exportName": "AppHeader",
        "props": {
          "brand": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Logo or product name"
          },
          "nav": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Primary links (NavItem or anchors)"
          },
          "actions": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Right side: search, notifications, avatar"
          }
        },
        "composes": [
          "HTMLAttributes"
        ]
      },
      "stories": [
        {
          "id": "navigation-app-header--default",
          "name": "Default",
          "snippet": "const Default = () => <AppHeader\n    brand={<strong style={{ color: 'var(--color-text-primary)' }}>Atomus</strong>}\n    nav={(<>\n      <NavItem href=\"#overview\" label=\"Overview\" active />\n      <NavItem href=\"#projects\" label=\"Projects\" />\n      <NavItem href=\"#reports\" label=\"Reports\" />\n    </>)}\n    actions={(<>\n      <Input size=\"sm\" type=\"search\" aria-label=\"Search\" placeholder=\"Search\" iconLeading={<Icon name=\"search\" size={16} />} />\n      <Button hierarchy=\"tertiary\" iconOnly aria-label=\"Notifications\" iconLeading={<Icon name=\"bell\" />} />\n      <Avatar name=\"Olivia Rhye\" size=\"sm\" />\n    </>)} />;"
        },
        {
          "id": "navigation-app-header--without-nav",
          "name": "Without Nav",
          "snippet": "const WithoutNav = () => <AppHeader\n    brand={<strong style={{ color: 'var(--color-text-primary)' }}>Atomus</strong>}\n    nav={undefined}\n    actions={(<>\n      <Input size=\"sm\" type=\"search\" aria-label=\"Search\" placeholder=\"Search\" iconLeading={<Icon name=\"search\" size={16} />} />\n      <Button hierarchy=\"tertiary\" iconOnly aria-label=\"Notifications\" iconLeading={<Icon name=\"bell\" />} />\n      <Avatar name=\"Olivia Rhye\" size=\"sm\" />\n    </>)} />;"
        }
      ],
      "import": "import { AppHeader, Avatar, Button, Icon, Input, NavItem } from '@stanvision/atomus-react';\nimport { NavItem } from './Navigation';\nimport { Input } from './Input';\nimport { Icon } from './Icon';\nimport { Button } from './Button';\nimport { Avatar } from './Avatar';"
    },
    "navigation-nav-item": {
      "id": "navigation-nav-item",
      "name": "NavItem",
      "path": "./src/components/NavItem.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Nav item. Renders a link; pass href (or onClick).",
      "reactDocgen": {
        "description": "Figma: Nav item. Renders a link; pass href (or onClick).",
        "methods": [],
        "displayName": "NavItem",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Navigation.tsx",
        "actualName": "NavItem",
        "exportName": "NavItem",
        "props": {
          "label": {
            "required": true,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Label"
          },
          "icon": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Icon swap"
          },
          "badge": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Badge — a count or short label after the text"
          },
          "chevron": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Chevron — marks an item with children"
          },
          "active": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: State=Active"
          },
          "collapsed": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Collapsed — icon only, label becomes the tooltip and accessible name"
          }
        },
        "composes": [
          "AnchorHTMLAttributes"
        ]
      },
      "stories": [
        {
          "id": "navigation-nav-item--default",
          "name": "Default",
          "snippet": "const Default = () => <NavItem label=\"Projects\" href=\"#projects\" icon={<Icon name=\"folder\" />} />;"
        },
        {
          "id": "navigation-nav-item--active",
          "name": "Active",
          "snippet": "const Active = () => <NavItem label=\"Projects\" href=\"#projects\" icon={<Icon name=\"folder\" />} active />;"
        },
        {
          "id": "navigation-nav-item--with-badge",
          "name": "With Badge",
          "snippet": "const WithBadge = () => <NavItem\n    label=\"Projects\"\n    href=\"#projects\"\n    icon={<Icon name=\"folder\" />}\n    badge={12} />;"
        },
        {
          "id": "navigation-nav-item--with-chevron",
          "name": "With Chevron",
          "snippet": "const WithChevron = () => <NavItem label=\"Reports\" href=\"#projects\" icon={<Icon name=\"sort\" />} chevron />;"
        },
        {
          "id": "navigation-nav-item--collapsed",
          "name": "Collapsed",
          "snippet": "const Collapsed = () => <NavItem label=\"Projects\" href=\"#projects\" icon={<Icon name=\"folder\" />} collapsed />;"
        }
      ],
      "import": "import { Icon, NavItem } from '@stanvision/atomus-react';\nimport { Icon } from './Icon';"
    },
    "navigation-sidebar-navigation": {
      "id": "navigation-sidebar-navigation",
      "name": "SidebarNavigation",
      "path": "./src/components/SidebarNavigation.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Sidebar navigation (280px, or a 72px rail when collapsed).",
      "reactDocgen": {
        "description": "Figma: Sidebar navigation (280px, or a 72px rail when collapsed).",
        "methods": [],
        "displayName": "SidebarNavigation",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Navigation.tsx",
        "actualName": "SidebarNavigation",
        "exportName": "SidebarNavigation",
        "props": {
          "header": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Logo or workspace switcher at the top"
          },
          "children": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "NavItems"
          },
          "footer": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Pinned at the bottom: secondary links, user card"
          },
          "collapsed": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Collapsed — 280px or a 72px rail"
          },
          "aria-label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        },
        "composes": [
          "HTMLAttributes"
        ]
      },
      "stories": [
        {
          "id": "navigation-sidebar-navigation--default",
          "name": "Default",
          "snippet": "const Default = () => <SidebarNavigation\n    aria-label=\"Main\"\n    header={<strong style={{ color: 'var(--color-text-primary)' }}>Atomus</strong>}\n    footer={<NavItem href=\"#settings\" label=\"Settings\" icon={<Icon name=\"settings\" />} />}>{items()}</SidebarNavigation>;",
          "warning": "Incomplete snippet: `items` could not be resolved statically."
        },
        {
          "id": "navigation-sidebar-navigation--with-user",
          "name": "With User",
          "snippet": "const WithUser = () => <SidebarNavigation\n    aria-label=\"Main\"\n    header={<strong style={{ color: 'var(--color-text-primary)' }}>Atomus</strong>}\n    footer={(<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-lg)' }}>\n      <Avatar name=\"Olivia Rhye\" status=\"online\" />\n      <span style={{ fontSize: 'var(--font-size-small)', lineHeight: 'var(--line-height-small)' }}>Olivia Rhye</span>\n    </div>)}>{items()}</SidebarNavigation>;",
          "warning": "Incomplete snippet: `items` could not be resolved statically."
        },
        {
          "id": "navigation-sidebar-navigation--collapsed",
          "name": "Collapsed",
          "snippet": "const Collapsed = () => <SidebarNavigation\n    aria-label=\"Main\"\n    header={<Icon name=\"home\" />}\n    footer={<NavItem href=\"#settings\" label=\"Settings\" icon={<Icon name=\"settings\" />} collapsed />}\n    collapsed>{items(true)}</SidebarNavigation>;",
          "warning": "Incomplete snippet: `items` could not be resolved statically."
        }
      ],
      "import": "import { Avatar, Icon, NavItem, SidebarNavigation } from '@stanvision/atomus-react';\nimport { NavItem } from './Navigation';\nimport { Icon } from './Icon';\nimport { Avatar } from './Avatar';"
    },
    "navigation-tabs": {
      "id": "navigation-tabs",
      "name": "Tabs",
      "path": "./src/components/Tabs.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Tabs",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Tabs.tsx",
        "actualName": "Tabs",
        "exportName": "Tabs",
        "props": {
          "items": {
            "required": true,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "TabItem"
                }
              ],
              "raw": "TabItem[]"
            },
            "description": ""
          },
          "variant": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'underline' | 'pill' | 'segmented'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'underline'"
                },
                {
                  "name": "literal",
                  "value": "'pill'"
                },
                {
                  "name": "literal",
                  "value": "'segmented'"
                }
              ]
            },
            "description": "Figma: Style",
            "defaultValue": {
              "value": "'underline'",
              "computed": false
            }
          },
          "value": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "defaultValue": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "onChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(value: string) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "string"
                    },
                    "name": "value"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": ""
          },
          "aria-label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Accessible name for the tab list"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "navigation-tabs--underline",
          "name": "Underline",
          "snippet": "const Underline = () => <Tabs\n    items={[\n      { value: 'overview', label: 'Overview' },\n      { value: 'activity', label: 'Activity', count: 4 },\n      { value: 'settings', label: 'Settings' },\n      { value: 'billing', label: 'Billing', disabled: true },\n    ]}\n    variant=\"underline\"\n    defaultValue=\"overview\"\n    aria-label=\"Project sections\" />;"
        },
        {
          "id": "navigation-tabs--pill",
          "name": "Pill",
          "snippet": "const Pill = () => <Tabs\n    items={[\n      { value: 'overview', label: 'Overview' },\n      { value: 'activity', label: 'Activity', count: 4 },\n      { value: 'settings', label: 'Settings' },\n      { value: 'billing', label: 'Billing', disabled: true },\n    ]}\n    variant=\"pill\"\n    defaultValue=\"overview\"\n    aria-label=\"Project sections\" />;"
        },
        {
          "id": "navigation-tabs--segmented",
          "name": "Segmented",
          "snippet": "const Segmented = () => <Tabs\n    items={[\n      { value: 'overview', label: 'Overview' },\n      { value: 'activity', label: 'Activity', count: 4 },\n      { value: 'settings', label: 'Settings' },\n      { value: 'billing', label: 'Billing', disabled: true },\n    ]}\n    variant=\"segmented\"\n    defaultValue=\"activity\"\n    aria-label=\"Project sections\" />;"
        }
      ],
      "import": "import { Tabs } from '@stanvision/atomus-react';"
    },
    "data-display-avatar": {
      "id": "data-display-avatar",
      "name": "Avatar",
      "path": "./src/components/Avatar.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Avatar",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Avatar.tsx",
        "actualName": "Avatar",
        "exportName": "Avatar",
        "props": {
          "name": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Person or workspace name — used for initials, tooltip and accessible name"
          },
          "src": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Type=Image"
          },
          "initials": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Initials — overrides the initials derived from name"
          },
          "icon": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Type=Icon + Icon swap"
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'xs'"
                },
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                },
                {
                  "name": "literal",
                  "value": "'xl'"
                },
                {
                  "name": "literal",
                  "value": "'2xl'"
                }
              ]
            },
            "description": "Figma: Size — xs 24 · sm 32 · md 40 · lg 48 · xl 56 · 2xl 64",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "shape": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'circle' | 'rounded'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'circle'"
                },
                {
                  "name": "literal",
                  "value": "'rounded'"
                }
              ]
            },
            "description": "Figma: Shape",
            "defaultValue": {
              "value": "'circle'",
              "computed": false
            }
          },
          "status": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'online' | 'away' | 'offline'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'online'"
                },
                {
                  "name": "literal",
                  "value": "'away'"
                },
                {
                  "name": "literal",
                  "value": "'offline'"
                }
              ]
            },
            "description": "Figma: Status"
          }
        },
        "composes": [
          "HTMLAttributes"
        ]
      },
      "stories": [
        {
          "id": "data-display-avatar--initials",
          "name": "Initials",
          "snippet": "const Initials = () => <Avatar name=\"Olivia Rhye\" size=\"md\" shape=\"circle\" />;"
        },
        {
          "id": "data-display-avatar--sizes",
          "name": "Sizes",
          "snippet": "const Sizes = (args) => <div className=\"sb-row\">{SIZES.map((s) => <Avatar key={s} {...args} size={s} />)}</div>;"
        },
        {
          "id": "data-display-avatar--status",
          "name": "Status",
          "snippet": "const Status = () => <div className=\"sb-row\">\n    <Avatar size=\"md\" shape=\"circle\" name=\"Mila Petrova\" status=\"online\" />\n    <Avatar size=\"md\" shape=\"circle\" name=\"Ivan Georgiev\" status=\"away\" />\n    <Avatar size=\"md\" shape=\"circle\" name=\"Nora Lee\" status=\"offline\" />\n</div>;"
        },
        {
          "id": "data-display-avatar--shapes-and-fallback",
          "name": "Shapes And Fallback",
          "snippet": "const ShapesAndFallback = () => <div className=\"sb-row\">\n    <Avatar name=\"Atomus\" shape=\"rounded\" size=\"lg\" />\n    <Avatar shape=\"circle\" name={undefined} size=\"lg\" />\n    <Avatar name=\"Olivia Rhye\" shape=\"circle\" initials=\"SV\" size=\"lg\" />\n</div>;"
        }
      ],
      "import": "import { Avatar } from '@stanvision/atomus-react';"
    },
    "data-display-badge": {
      "id": "data-display-badge",
      "name": "Badge",
      "path": "./src/components/Badge.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Badge",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Badge.tsx",
        "actualName": "Badge",
        "exportName": "Badge",
        "props": {
          "children": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Label"
          },
          "color": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'gray' | 'brand' | 'error' | 'warning' | 'success'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'gray'"
                },
                {
                  "name": "literal",
                  "value": "'brand'"
                },
                {
                  "name": "literal",
                  "value": "'error'"
                },
                {
                  "name": "literal",
                  "value": "'warning'"
                },
                {
                  "name": "literal",
                  "value": "'success'"
                }
              ]
            },
            "description": "Figma: Color",
            "defaultValue": {
              "value": "'gray'",
              "computed": false
            }
          },
          "variant": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'light' | 'solid'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'light'"
                },
                {
                  "name": "literal",
                  "value": "'solid'"
                }
              ]
            },
            "description": "Figma: Style — light (tinted) or solid",
            "defaultValue": {
              "value": "'light'",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md' | 'lg'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                }
              ]
            },
            "description": "Figma: Size — sm 20 · md 24 · lg 28",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "dot": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Dot"
          },
          "icon": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Leading icon + Leading icon swap"
          },
          "onClose": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Figma: Close — shows a remove button"
          }
        },
        "composes": [
          "HTMLAttributes"
        ]
      },
      "stories": [
        {
          "id": "data-display-badge--default",
          "name": "Default",
          "snippet": "const Default = () => <Badge color=\"success\" variant=\"light\" size=\"md\" dot>Active</Badge>;"
        },
        {
          "id": "data-display-badge--colors",
          "name": "Colors",
          "snippet": "const Colors = (args) => (\n  <div className=\"sb-stack\">\n    <div className=\"sb-row\">{COLORS.map((c) => <Badge key={c} {...args} color={c} variant=\"light\">{c}</Badge>)}</div>\n    <div className=\"sb-row\">{COLORS.map((c) => <Badge key={c} {...args} color={c} variant=\"solid\" dot={false}>{c}</Badge>)}</div>\n  </div>\n);"
        },
        {
          "id": "data-display-badge--sizes",
          "name": "Sizes",
          "snippet": "const Sizes = (args) => <div className=\"sb-row\">{(['sm', 'md', 'lg'] as const).map((s) => <Badge key={s} {...args} size={s}>Size {s}</Badge>)}</div>;"
        },
        {
          "id": "data-display-badge--with-icon-and-close",
          "name": "With Icon And Close",
          "snippet": "const WithIconAndClose = () => <div className=\"sb-row\">\n    <Badge\n        color=\"brand\"\n        variant=\"light\"\n        size=\"md\"\n        dot={false}\n        icon={<Icon name=\"check\" size={12} />}>Verified</Badge>\n    <Badge variant=\"light\" size=\"md\" dot={false} color=\"gray\" onClose={() => {}}>Design</Badge>\n</div>;"
        }
      ],
      "import": "import { Badge, Icon } from '@stanvision/atomus-react';"
    },
    "data-display-metric-card": {
      "id": "data-display-metric-card",
      "name": "MetricCard",
      "path": "./src/components/MetricCard.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "MetricCard",
        "definedInFile": "/opt/buildhome/repo/react/src/components/MetricCard.tsx",
        "actualName": "MetricCard",
        "exportName": "MetricCard",
        "props": {
          "label": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Label"
          },
          "value": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Value — pre-formatted (\"$48.2k\")"
          },
          "type": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'simple' | 'trend' | 'chart'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'simple'"
                },
                {
                  "name": "literal",
                  "value": "'trend'"
                },
                {
                  "name": "literal",
                  "value": "'chart'"
                }
              ]
            },
            "description": "Figma: Type — simple · trend · chart",
            "defaultValue": {
              "value": "'trend'",
              "computed": false
            }
          },
          "change": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Change vs the comparison period, e.g. \"12%\" or \"-0.4%\""
          },
          "trend": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'up' | 'down'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'up'"
                },
                {
                  "name": "literal",
                  "value": "'down'"
                }
              ]
            },
            "description": "Inferred from a leading \"-\" in change when omitted"
          },
          "caption": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Comparison period, e.g. \"vs last month\""
          },
          "data": {
            "required": false,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "number"
                }
              ],
              "raw": "number[]"
            },
            "description": "Sparkline values for type=\"chart\""
          },
          "action": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Header action, e.g. a tertiary icon button"
          }
        },
        "composes": [
          "HTMLAttributes"
        ]
      },
      "stories": [
        {
          "id": "data-display-metric-card--trend",
          "name": "Trend",
          "snippet": "const Trend = () => <MetricCard\n    label=\"Revenue\"\n    value=\"$48.2k\"\n    type=\"trend\"\n    change=\"12%\"\n    caption=\"vs last month\" />;"
        },
        {
          "id": "data-display-metric-card--simple",
          "name": "Simple",
          "snippet": "const Simple = () => <MetricCard\n    label=\"Active projects\"\n    value=\"24\"\n    type=\"simple\"\n    change=\"12%\"\n    caption=\"vs last month\" />;"
        },
        {
          "id": "data-display-metric-card--chart",
          "name": "Chart",
          "snippet": "const Chart = () => <MetricCard\n    label=\"Revenue\"\n    value=\"$48.2k\"\n    type=\"chart\"\n    change=\"12%\"\n    caption=\"vs last month\"\n    data={[12, 18, 15, 22, 24, 21, 30, 34]} />;"
        },
        {
          "id": "data-display-metric-card--down",
          "name": "Down",
          "snippet": "const Down = () => <MetricCard\n    label=\"Churn rate\"\n    value=\"1.9%\"\n    type=\"chart\"\n    change=\"-0.4%\"\n    caption=\"vs last month\"\n    data={[30, 28, 29, 25, 26, 22, 21, 19]} />;"
        },
        {
          "id": "data-display-metric-card--with-action",
          "name": "With Action",
          "snippet": "const WithAction = () => <MetricCard\n    label=\"Revenue\"\n    value=\"$48.2k\"\n    type=\"trend\"\n    change=\"12%\"\n    caption=\"vs last month\"\n    action={<Button hierarchy=\"tertiary\" size=\"sm\" iconOnly aria-label=\"More options\" iconLeading={<Icon name=\"more\" />} />} />;"
        }
      ],
      "import": "import { Button, Icon, MetricCard } from '@stanvision/atomus-react';\nimport { Button } from './Button';\nimport { Icon } from './Icon';"
    },
    "data-display-table": {
      "id": "data-display-table",
      "name": "MemberTable",
      "path": "./src/components/Table.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Table header cell + Table cell. Sorting is built in; filtering and pagination stay with the page (Filter bar, Pagination).",
      "reactDocgen": {
        "description": "Figma: Table header cell + Table cell. Sorting is built in; filtering and pagination stay with the page (Filter bar, Pagination).",
        "methods": [],
        "displayName": "Table",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Table.tsx",
        "actualName": "Table",
        "exportName": "Table",
        "props": {
          "columns": {
            "required": true,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "TableColumn",
                  "elements": [
                    {
                      "name": "Row"
                    }
                  ],
                  "raw": "TableColumn<Row>"
                }
              ],
              "raw": "TableColumn<Row>[]"
            },
            "description": ""
          },
          "rows": {
            "required": true,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "Row"
                }
              ],
              "raw": "Row[]"
            },
            "description": ""
          },
          "rowKey": {
            "required": true,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(row: Row) => string",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "Row"
                    },
                    "name": "row"
                  }
                ],
                "return": {
                  "name": "string"
                }
              }
            },
            "description": ""
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "Figma: Table cell Size — sm 52 · md 72",
            "defaultValue": {
              "value": "'sm'",
              "computed": false
            }
          },
          "selectable": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Table header cell — Checkbox; adds a select-all column"
          },
          "selected": {
            "required": false,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "string"
                }
              ],
              "raw": "string[]"
            },
            "description": ""
          },
          "onSelectedChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(keys: string[]) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "Array",
                      "elements": [
                        {
                          "name": "string"
                        }
                      ],
                      "raw": "string[]"
                    },
                    "name": "keys"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": ""
          },
          "caption": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Accessible table caption"
          },
          "empty": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Rendered when rows is empty, e.g. an EmptyState"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "data-display-table--default",
          "name": "Default",
          "snippet": "const Default = () => <Table\n    columns={[\n      { key: 'name', header: 'Name', sortable: true, render: (r) => <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--spacing-lg)' }}><Avatar name={r.name} size=\"sm\" />{r.name}</span>, supporting: (r) => r.email },\n      { key: 'role', header: 'Role', sortable: true },\n      { key: 'status', header: 'Status', render: (r) => <Badge color={STATUS[r.status]} dot>{r.status}</Badge> },\n      { key: 'projects', header: 'Projects', sortable: true, align: 'end' },\n    ]}\n    rows={[\n      { id: 'm1', name: 'Olivia Rhye', email: 'olivia@atomus.io', role: 'Owner', status: 'Active', projects: 12 },\n      { id: 'm2', name: 'Mila Petrova', email: 'mila@atomus.io', role: 'Designer', status: 'Active', projects: 8 },\n      { id: 'm3', name: 'Ivan Georgiev', email: 'ivan@atomus.io', role: 'Engineer', status: 'Invited', projects: 0 },\n      { id: 'm4', name: 'Nora Lee', email: 'nora@atomus.io', role: 'Viewer', status: 'Suspended', projects: 3 },\n    ]}\n    rowKey={(r: Member) => r.id}\n    caption=\"Team members\"\n    size=\"sm\" />;",
          "warning": "Incomplete snippet: `STATUS` could not be resolved statically."
        },
        {
          "id": "data-display-table--selectable",
          "name": "Selectable",
          "snippet": "const Selectable = () => <Table\n    columns={[\n      { key: 'name', header: 'Name', sortable: true, render: (r) => <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--spacing-lg)' }}><Avatar name={r.name} size=\"sm\" />{r.name}</span>, supporting: (r) => r.email },\n      { key: 'role', header: 'Role', sortable: true },\n      { key: 'status', header: 'Status', render: (r) => <Badge color={STATUS[r.status]} dot>{r.status}</Badge> },\n      { key: 'projects', header: 'Projects', sortable: true, align: 'end' },\n    ]}\n    rows={[\n      { id: 'm1', name: 'Olivia Rhye', email: 'olivia@atomus.io', role: 'Owner', status: 'Active', projects: 12 },\n      { id: 'm2', name: 'Mila Petrova', email: 'mila@atomus.io', role: 'Designer', status: 'Active', projects: 8 },\n      { id: 'm3', name: 'Ivan Georgiev', email: 'ivan@atomus.io', role: 'Engineer', status: 'Invited', projects: 0 },\n      { id: 'm4', name: 'Nora Lee', email: 'nora@atomus.io', role: 'Viewer', status: 'Suspended', projects: 3 },\n    ]}\n    rowKey={(r: Member) => r.id}\n    caption=\"Team members\"\n    size=\"sm\"\n    selectable\n    selected={['m2']} />;",
          "warning": "Incomplete snippet: `STATUS` could not be resolved statically."
        },
        {
          "id": "data-display-table--medium",
          "name": "Medium",
          "snippet": "const Medium = () => <Table\n    columns={[\n      { key: 'name', header: 'Name', sortable: true, render: (r) => <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--spacing-lg)' }}><Avatar name={r.name} size=\"sm\" />{r.name}</span>, supporting: (r) => r.email },\n      { key: 'role', header: 'Role', sortable: true },\n      { key: 'status', header: 'Status', render: (r) => <Badge color={STATUS[r.status]} dot>{r.status}</Badge> },\n      { key: 'projects', header: 'Projects', sortable: true, align: 'end' },\n    ]}\n    rows={[\n      { id: 'm1', name: 'Olivia Rhye', email: 'olivia@atomus.io', role: 'Owner', status: 'Active', projects: 12 },\n      { id: 'm2', name: 'Mila Petrova', email: 'mila@atomus.io', role: 'Designer', status: 'Active', projects: 8 },\n      { id: 'm3', name: 'Ivan Georgiev', email: 'ivan@atomus.io', role: 'Engineer', status: 'Invited', projects: 0 },\n      { id: 'm4', name: 'Nora Lee', email: 'nora@atomus.io', role: 'Viewer', status: 'Suspended', projects: 3 },\n    ]}\n    rowKey={(r: Member) => r.id}\n    caption=\"Team members\"\n    size=\"md\" />;",
          "warning": "Incomplete snippet: `STATUS` could not be resolved statically."
        },
        {
          "id": "data-display-table--empty",
          "name": "Empty",
          "snippet": "const Empty = () => <Table\n    columns={[\n      { key: 'name', header: 'Name', sortable: true, render: (r) => <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--spacing-lg)' }}><Avatar name={r.name} size=\"sm\" />{r.name}</span>, supporting: (r) => r.email },\n      { key: 'role', header: 'Role', sortable: true },\n      { key: 'status', header: 'Status', render: (r) => <Badge color={STATUS[r.status]} dot>{r.status}</Badge> },\n      { key: 'projects', header: 'Projects', sortable: true, align: 'end' },\n    ]}\n    rows={[]}\n    rowKey={(r: Member) => r.id}\n    caption=\"Team members\"\n    size=\"sm\"\n    empty={<EmptyState size=\"sm\" title=\"No members yet\" description=\"Invite people to collaborate.\" />} />;",
          "warning": "Incomplete snippet: `STATUS` could not be resolved statically."
        },
        {
          "id": "data-display-table--sorting",
          "name": "Sorting",
          "snippet": "const Sorting = () => <Table\n    columns={[\n      { key: 'name', header: 'Name', sortable: true, render: (r) => <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--spacing-lg)' }}><Avatar name={r.name} size=\"sm\" />{r.name}</span>, supporting: (r) => r.email },\n      { key: 'role', header: 'Role', sortable: true },\n      { key: 'status', header: 'Status', render: (r) => <Badge color={STATUS[r.status]} dot>{r.status}</Badge> },\n      { key: 'projects', header: 'Projects', sortable: true, align: 'end' },\n    ]}\n    rows={[\n      { id: 'm1', name: 'Olivia Rhye', email: 'olivia@atomus.io', role: 'Owner', status: 'Active', projects: 12 },\n      { id: 'm2', name: 'Mila Petrova', email: 'mila@atomus.io', role: 'Designer', status: 'Active', projects: 8 },\n      { id: 'm3', name: 'Ivan Georgiev', email: 'ivan@atomus.io', role: 'Engineer', status: 'Invited', projects: 0 },\n      { id: 'm4', name: 'Nora Lee', email: 'nora@atomus.io', role: 'Viewer', status: 'Suspended', projects: 3 },\n    ]}\n    rowKey={(r: Member) => r.id}\n    caption=\"Team members\"\n    size=\"sm\" />;",
          "warning": "Incomplete snippet: `STATUS` could not be resolved statically."
        }
      ],
      "import": "import { Avatar, Badge, EmptyState, Table } from '@stanvision/atomus-react';\nimport { Avatar } from './Avatar';\nimport { Badge } from './Badge';\nimport { EmptyState } from './EmptyState';"
    },
    "data-display-tag": {
      "id": "data-display-tag",
      "name": "Tag",
      "path": "./src/components/Tag.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Tag",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Tag.tsx",
        "actualName": "Tag",
        "exportName": "Tag",
        "props": {
          "children": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Label"
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md' | 'lg'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                }
              ]
            },
            "description": "Figma: Size — sm 24 · md 28 · lg 32",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "icon": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Leading icon + Leading icon swap"
          },
          "onRemove": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Figma: Close — shows the × button"
          }
        },
        "composes": [
          "HTMLAttributes"
        ]
      },
      "stories": [
        {
          "id": "data-display-tag--default",
          "name": "Default",
          "snippet": "const Default = () => <Tag size=\"md\">Figma</Tag>;"
        },
        {
          "id": "data-display-tag--sizes",
          "name": "Sizes",
          "snippet": "const Sizes = (args) => <div className=\"sb-row\">{(['sm', 'md', 'lg'] as const).map((s) => <Tag key={s} {...args} size={s}>Size {s}</Tag>)}</div>;"
        },
        {
          "id": "data-display-tag--removable",
          "name": "Removable",
          "snippet": "const Removable = () => <div className=\"sb-row\">\n    <Tag size=\"md\" onRemove={() => {}}>Tokens</Tag>\n    <Tag size=\"md\" icon={<Icon name=\"folder\" size={14} />} onRemove={() => {}}>Web</Tag>\n</div>;"
        }
      ],
      "import": "import { Icon, Tag } from '@stanvision/atomus-react';"
    },
    "overlays-dropdown-menu": {
      "id": "overlays-dropdown-menu",
      "name": "DropdownMenu",
      "path": "./src/components/DropdownMenu.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Dropdown menu / Context menu — keyboard: ↑ ↓ Home End Enter Esc.",
      "reactDocgen": {
        "description": "Figma: Dropdown menu / Context menu — keyboard: ↑ ↓ Home End Enter Esc.",
        "methods": [],
        "displayName": "DropdownMenu",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Menu.tsx",
        "actualName": "DropdownMenu",
        "exportName": "DropdownMenu",
        "props": {
          "trigger": {
            "required": true,
            "tsType": {
              "name": "ReactElement"
            },
            "description": "The element that opens the menu, usually a Button"
          },
          "items": {
            "required": true,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "union",
                  "raw": "| { type?: 'item'; label: ReactNode; icon?: ReactNode; shortcut?: string; disabled?: boolean; destructive?: boolean; onSelect?: () => void }\n| { type: 'separator' }\n| { type: 'heading'; label: ReactNode }",
                  "elements": [
                    {
                      "name": "signature",
                      "type": "object",
                      "raw": "{ type?: 'item'; label: ReactNode; icon?: ReactNode; shortcut?: string; disabled?: boolean; destructive?: boolean; onSelect?: () => void }",
                      "signature": {
                        "properties": [
                          {
                            "key": "type",
                            "value": {
                              "name": "literal",
                              "value": "'item'",
                              "required": false
                            }
                          },
                          {
                            "key": "label",
                            "value": {
                              "name": "ReactNode",
                              "required": true
                            }
                          },
                          {
                            "key": "icon",
                            "value": {
                              "name": "ReactNode",
                              "required": false
                            }
                          },
                          {
                            "key": "shortcut",
                            "value": {
                              "name": "string",
                              "required": false
                            }
                          },
                          {
                            "key": "disabled",
                            "value": {
                              "name": "boolean",
                              "required": false
                            }
                          },
                          {
                            "key": "destructive",
                            "value": {
                              "name": "boolean",
                              "required": false
                            }
                          },
                          {
                            "key": "onSelect",
                            "value": {
                              "name": "signature",
                              "type": "function",
                              "raw": "() => void",
                              "signature": {
                                "arguments": [],
                                "return": {
                                  "name": "void"
                                }
                              },
                              "required": false
                            }
                          }
                        ]
                      }
                    },
                    {
                      "name": "signature",
                      "type": "object",
                      "raw": "{ type: 'separator' }",
                      "signature": {
                        "properties": [
                          {
                            "key": "type",
                            "value": {
                              "name": "literal",
                              "value": "'separator'",
                              "required": true
                            }
                          }
                        ]
                      }
                    },
                    {
                      "name": "signature",
                      "type": "object",
                      "raw": "{ type: 'heading'; label: ReactNode }",
                      "signature": {
                        "properties": [
                          {
                            "key": "type",
                            "value": {
                              "name": "literal",
                              "value": "'heading'",
                              "required": true
                            }
                          },
                          {
                            "key": "label",
                            "value": {
                              "name": "ReactNode",
                              "required": true
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              ],
              "raw": "DropdownItem[]"
            },
            "description": "Figma: Items slot"
          },
          "align": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'start' | 'end'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'start'"
                },
                {
                  "name": "literal",
                  "value": "'end'"
                }
              ]
            },
            "description": "",
            "defaultValue": {
              "value": "'start'",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "",
            "defaultValue": {
              "value": "'sm'",
              "computed": false
            }
          },
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Accessible name for the menu"
          },
          "defaultOpen": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Start open (docs and tests)"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "overlays-dropdown-menu--closed",
          "name": "Closed",
          "snippet": "const Closed = () => <DropdownMenu\n    trigger={<Button hierarchy=\"outline\" iconTrailing={<Icon name=\"chevronDown\" />}>Actions</Button>}\n    items={[\n      { type: 'heading', label: 'Project' },\n      { label: 'Rename', icon: <Icon name=\"settings\" size={16} />, shortcut: 'R' },\n      { label: 'Duplicate', icon: <Icon name=\"folder\" size={16} />, shortcut: '⌘D' },\n      { label: 'Share', icon: <Icon name=\"user\" size={16} />, disabled: true },\n      { type: 'separator' },\n      { label: 'Delete', icon: <Icon name=\"x\" size={16} />, destructive: true },\n    ]}\n    label=\"Project actions\"\n    align=\"start\"\n    size=\"sm\" />;"
        },
        {
          "id": "overlays-dropdown-menu--open",
          "name": "Open",
          "snippet": "const Open = () => <DropdownMenu\n    trigger={<Button hierarchy=\"outline\" iconTrailing={<Icon name=\"chevronDown\" />}>Actions</Button>}\n    items={[\n      { type: 'heading', label: 'Project' },\n      { label: 'Rename', icon: <Icon name=\"settings\" size={16} />, shortcut: 'R' },\n      { label: 'Duplicate', icon: <Icon name=\"folder\" size={16} />, shortcut: '⌘D' },\n      { label: 'Share', icon: <Icon name=\"user\" size={16} />, disabled: true },\n      { type: 'separator' },\n      { label: 'Delete', icon: <Icon name=\"x\" size={16} />, destructive: true },\n    ]}\n    label=\"Project actions\"\n    align=\"start\"\n    size=\"sm\"\n    defaultOpen />;"
        },
        {
          "id": "overlays-dropdown-menu--keyboard-navigation",
          "name": "Keyboard Navigation",
          "snippet": "const KeyboardNavigation = () => <DropdownMenu\n    trigger={<Button hierarchy=\"outline\" iconTrailing={<Icon name=\"chevronDown\" />}>Actions</Button>}\n    items={[\n      { type: 'heading', label: 'Project' },\n      { label: 'Rename', icon: <Icon name=\"settings\" size={16} />, shortcut: 'R' },\n      { label: 'Duplicate', icon: <Icon name=\"folder\" size={16} />, shortcut: '⌘D' },\n      { label: 'Share', icon: <Icon name=\"user\" size={16} />, disabled: true },\n      { type: 'separator' },\n      { label: 'Delete', icon: <Icon name=\"x\" size={16} />, destructive: true },\n    ]}\n    label=\"Project actions\"\n    align=\"start\"\n    size=\"sm\" />;"
        }
      ],
      "import": "import { Button, DropdownMenu, Icon } from '@stanvision/atomus-react';\nimport { Button } from './Button';\nimport { Icon } from './Icon';"
    },
    "overlays-menu-item": {
      "id": "overlays-menu-item",
      "name": "MenuItem",
      "path": "./src/components/MenuItem.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Menu item — row for dropdowns, selects, context and command menus.",
      "reactDocgen": {
        "description": "Figma: Menu item — row for dropdowns, selects, context and command menus.",
        "methods": [],
        "displayName": "MenuItem",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Menu.tsx",
        "actualName": "MenuItem",
        "exportName": "MenuItem",
        "props": {
          "label": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Label"
          },
          "icon": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Leading icon + Leading icon swap"
          },
          "shortcut": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Shortcut + Shortcut text"
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "Figma: Size — sm 32 · md 40",
            "defaultValue": {
              "value": "'sm'",
              "computed": false
            }
          },
          "selected": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: State=Selected — shows a check"
          },
          "disabled": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": ""
          },
          "destructive": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Red label for destructive actions (Context menu)"
          },
          "onSelect": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": ""
          },
          "role": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'menuitem' | 'option' | 'menuitemcheckbox'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'menuitem'"
                },
                {
                  "name": "literal",
                  "value": "'option'"
                },
                {
                  "name": "literal",
                  "value": "'menuitemcheckbox'"
                }
              ]
            },
            "description": "",
            "defaultValue": {
              "value": "'menuitem'",
              "computed": false
            }
          },
          "id": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "active": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "overlays-menu-item--default",
          "name": "Default",
          "snippet": "const Default = () => <MenuItem label=\"Duplicate\" size=\"sm\" />;"
        },
        {
          "id": "overlays-menu-item--states",
          "name": "States",
          "snippet": "const States = () => <>\n    <MenuItem size=\"sm\" label=\"Default\" icon={<Icon name=\"folder\" size={16} />} />\n    <MenuItem\n        size=\"sm\"\n        label=\"Active (keyboard)\"\n        icon={<Icon name=\"user\" size={16} />}\n        active />\n    <MenuItem\n        size=\"sm\"\n        label=\"With shortcut\"\n        icon={<Icon name=\"search\" size={16} />}\n        shortcut=\"⌘K\" />\n    <MenuItem\n        size=\"sm\"\n        label=\"Disabled\"\n        icon={<Icon name=\"settings\" size={16} />}\n        disabled />\n    <MenuItem size=\"sm\" label=\"Delete\" icon={<Icon name=\"x\" size={16} />} destructive />\n</>;"
        },
        {
          "id": "overlays-menu-item--medium",
          "name": "Medium",
          "snippet": "const Medium = () => <MenuItem\n    label=\"Duplicate\"\n    size=\"md\"\n    icon={<Icon name=\"home\" size={16} />}\n    shortcut=\"⌘D\" />;"
        }
      ],
      "import": "import { Icon, MenuItem } from '@stanvision/atomus-react';\nimport { Icon } from './Icon';"
    },
    "overlays-modal": {
      "id": "overlays-modal",
      "name": "Modal",
      "path": "./src/components/Modal.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Modal. Uses the native dialog element: focus trap, Esc to close and inert background come built in.",
      "reactDocgen": {
        "description": "Figma: Modal. Uses the native dialog element: focus trap, Esc to close and inert background come built in.",
        "methods": [],
        "displayName": "Modal",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Modal.tsx",
        "actualName": "Modal",
        "exportName": "Modal",
        "props": {
          "open": {
            "required": true,
            "tsType": {
              "name": "boolean"
            },
            "description": ""
          },
          "onClose": {
            "required": true,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": ""
          },
          "title": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Title"
          },
          "description": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Description"
          },
          "children": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Content slot"
          },
          "actions": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Actions — buttons, primary last"
          },
          "featuredIcon": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "boolean | ReactNode",
              "elements": [
                {
                  "name": "boolean"
                },
                {
                  "name": "ReactNode"
                }
              ]
            },
            "description": "Figma: Featured icon — true for the default glyph, or pass an icon"
          },
          "closeButton": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Close button",
            "defaultValue": {
              "value": "true",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md' | 'lg'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                }
              ]
            },
            "description": "Figma: Size — sm 400 · md 544 · lg 720",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "type": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'default' | 'destructive'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'default'"
                },
                {
                  "name": "literal",
                  "value": "'destructive'"
                }
              ]
            },
            "description": "Figma: Type — destructive tints the featured icon red",
            "defaultValue": {
              "value": "'default'",
              "computed": false
            }
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "overlays-modal--default",
          "name": "Default",
          "snippet": "const Default = () => <div style={{ minHeight: 480, padding: 'var(--spacing-3xl)' }}><ModalDemo\n        open\n        onClose={() => {}}\n        title=\"Invite team members\"\n        description=\"They get access to every project in this workspace.\"\n        size=\"md\"\n        type=\"default\"\n        closeButton\n        featuredIcon\n        actions={<><Button hierarchy=\"outline\">Cancel</Button><Button hierarchy=\"primary\">Send invite</Button></>}><Input label=\"Email address\" placeholder=\"you@company.com\" /></ModalDemo></div>;"
        },
        {
          "id": "overlays-modal--destructive",
          "name": "Destructive",
          "snippet": "const Destructive = () => <div style={{ minHeight: 480, padding: 'var(--spacing-3xl)' }}><ModalDemo\n        open\n        onClose={() => {}}\n        title=\"Delete project?\"\n        description=\"This permanently deletes “Website relaunch” and its 24 files.\"\n        size=\"sm\"\n        type=\"destructive\"\n        closeButton\n        featuredIcon\n        actions={<><Button hierarchy=\"outline\">Cancel</Button><Button hierarchy=\"primary\">Delete</Button></>} /></div>;"
        },
        {
          "id": "overlays-modal--large",
          "name": "Large",
          "snippet": "const Large = () => <div style={{ minHeight: 480, padding: 'var(--spacing-3xl)' }}><ModalDemo\n        open\n        onClose={() => {}}\n        title=\"Release notes\"\n        description=\"What changed in Atomus 4.1.\"\n        size=\"lg\"\n        type=\"default\"\n        closeButton\n        actions={<Button hierarchy=\"primary\">Got it</Button>}><p style={{ margin: 0 }}>Brand and radius modes, a shadcn registry, Storybook with accessibility and visual tests, and 20 React components whose props mirror the Figma properties.</p></ModalDemo></div>;"
        }
      ],
      "import": "import { Button, Input, Modal } from '@stanvision/atomus-react';\nimport { Input } from './Input';\nimport { Button } from './Button';"
    },
    "layout-card": {
      "id": "layout-card",
      "name": "Card",
      "path": "./src/components/Card.stories.tsx",
      "jsDocTags": {},
      "reactDocgen": {
        "description": "",
        "methods": [],
        "displayName": "Card",
        "definedInFile": "/opt/buildhome/repo/react/src/components/Card.tsx",
        "actualName": "Card",
        "exportName": "Card",
        "props": {
          "title": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Title (Header on)"
          },
          "supportingText": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Supporting text"
          },
          "headerAction": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Header action — e.g. a Button or icon button, top right"
          },
          "children": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Content slot"
          },
          "footer": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Footer — buttons aligned right"
          },
          "variant": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'outlined' | 'elevated' | 'filled'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'outlined'"
                },
                {
                  "name": "literal",
                  "value": "'elevated'"
                },
                {
                  "name": "literal",
                  "value": "'filled'"
                }
              ]
            },
            "description": "Figma: Style",
            "defaultValue": {
              "value": "'outlined'",
              "computed": false
            }
          },
          "padding": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'md' | 'lg'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                }
              ]
            },
            "description": "Figma: Padding — md 16 · lg 24",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "layout-card--default",
          "name": "Default",
          "snippet": "const Default = () => <Card\n    title=\"Team members\"\n    supportingText=\"Invite colleagues to collaborate on projects.\"\n    variant=\"outlined\"\n    padding=\"md\">Eight people have access to this workspace. Owners can change roles and remove members.</Card>;"
        },
        {
          "id": "layout-card--with-header-action-and-footer",
          "name": "With Header Action And Footer",
          "snippet": "const WithHeaderActionAndFooter = () => <Card\n    title=\"Team members\"\n    supportingText=\"Invite colleagues to collaborate on projects.\"\n    variant=\"outlined\"\n    padding=\"md\"\n    headerAction={<Button hierarchy=\"tertiary\" size=\"sm\" iconOnly aria-label=\"More actions\" iconLeading={<Icon name=\"more\" />} />}\n    footer={<><Button hierarchy=\"outline\">Cancel</Button><Button hierarchy=\"primary\">Invite</Button></>}>Eight people have access to this workspace. Owners can change roles and remove members.</Card>;"
        },
        {
          "id": "layout-card--variants",
          "name": "Variants",
          "snippet": "const Variants = (args) => (\n  <div className=\"sb-stack\">\n    {(['outlined', 'elevated', 'filled'] as const).map((v) => <Card key={v} {...args} variant={v} title={`${v[0].toUpperCase()}${v.slice(1)}`} />)}\n  </div>\n);"
        },
        {
          "id": "layout-card--large-padding",
          "name": "Large Padding",
          "snippet": "const LargePadding = () => <Card\n    title=\"Team members\"\n    supportingText=\"Invite colleagues to collaborate on projects.\"\n    variant=\"outlined\"\n    padding=\"lg\">Eight people have access to this workspace. Owners can change roles and remove members.</Card>;"
        }
      ],
      "import": "import { Button, Card, Icon } from '@stanvision/atomus-react';\nimport { Button } from './Button';\nimport { Icon } from './Icon';"
    },
    "ai-ai-label": {
      "id": "ai-ai-label",
      "name": "AILabel",
      "path": "./src/components/ai/AILabel.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: AI label — marks AI-generated content and is the entry point to explainability.\nWith `explanation` it is a button with a non-modal popover (Esc and outside click close it).",
      "reactDocgen": {
        "description": "Figma: AI label — marks AI-generated content and is the entry point to explainability.\nWith `explanation` it is a button with a non-modal popover (Esc and outside click close it).",
        "methods": [],
        "displayName": "AILabel",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/AILabel.tsx",
        "actualName": "AILabel",
        "exportName": "AILabel",
        "props": {
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Label — the visible word. Keep it short: \"AI\", \"AI generated\", \"Draft by AI\".",
            "defaultValue": {
              "value": "'AI'",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'xs' | 'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'xs'"
                },
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "Figma: Size — xs 20 · sm 24 · md 28",
            "defaultValue": {
              "value": "'sm'",
              "computed": false
            }
          },
          "variant": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'chip' | 'inline' | 'icon'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'chip'"
                },
                {
                  "name": "literal",
                  "value": "'inline'"
                },
                {
                  "name": "literal",
                  "value": "'icon'"
                }
              ]
            },
            "description": "Figma: Style.\n`chip` (default) — tinted pill with the gradient mark.\n`inline` — mark and text, no fill; for message headers and table cells.\n`icon` — the mark only; the label stays available to screen readers.",
            "defaultValue": {
              "value": "'chip'",
              "computed": false
            }
          },
          "explanation": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Explainability popover. Short, plain-language answer to \"why am I seeing this?\".\nWhen set, the label becomes a button that opens the popover."
          },
          "explanationTitle": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Popover title — defaults to \"About this AI content\".",
            "defaultValue": {
              "value": "'About this AI content'",
              "computed": false
            }
          },
          "model": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Model or agent that produced the content, shown in the popover footer."
          },
          "edited": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Edited — the person changed the AI content; the label reads \"Edited\" and loses the AI fill.",
            "defaultValue": {
              "value": "false",
              "computed": false
            }
          },
          "onRevert": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Figma: Revert to AI — shows a \"Revert to AI\" action in the popover (only while `edited`)."
          },
          "align": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'start' | 'end'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'start'"
                },
                {
                  "name": "literal",
                  "value": "'end'"
                }
              ]
            },
            "description": "Which edge of the label the popover lines up with; use `end` near the right edge of a layout",
            "defaultValue": {
              "value": "'start'",
              "computed": false
            }
          },
          "defaultOpen": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Start with the popover open (docs and tests)"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-ai-label--chip",
          "name": "Chip",
          "snippet": "const Chip = () => <AILabel size=\"sm\" variant=\"chip\" />;"
        },
        {
          "id": "ai-ai-label--variants",
          "name": "Variants",
          "snippet": "const Variants = () => <div className=\"sb-row\">\n    <AILabel variant=\"chip\" size=\"xs\" />\n    <AILabel variant=\"chip\" size=\"sm\" />\n    <AILabel variant=\"chip\" size=\"md\" />\n    <AILabel size=\"sm\" variant=\"inline\" />\n    <AILabel size=\"sm\" variant=\"icon\" />\n</div>;"
        },
        {
          "id": "ai-ai-label--with-explanation",
          "name": "With Explanation",
          "snippet": "const WithExplanation = () => <div className=\"sb-pop\"><AILabel\n        size=\"sm\"\n        variant=\"chip\"\n        explanation={<p>Written by an assistant from your project notes. Review it before you publish.</p>}\n        model=\"Atomus Pro\" /></div>;"
        },
        {
          "id": "ai-ai-label--edited",
          "name": "Edited",
          "snippet": "const Edited = () => <AILabel size=\"sm\" variant=\"chip\" edited onRevert={() => {}} />;"
        }
      ],
      "import": "import { AILabel } from '@stanvision/atomus-react';"
    },
    "ai-approval": {
      "id": "ai-approval",
      "name": "Approval",
      "path": "./src/components/ai/Approval.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Approval — human-in-the-loop confirmation before an agent acts. Approve, deny, or edit then approve.\nThe person stays the decision-maker; the outcome stays visible after they decide.",
      "reactDocgen": {
        "description": "Figma: Approval — human-in-the-loop confirmation before an agent acts. Approve, deny, or edit then approve.\nThe person stays the decision-maker; the outcome stays visible after they decide.",
        "methods": [],
        "displayName": "Approval",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/Approval.tsx",
        "actualName": "Approval",
        "exportName": "Approval",
        "props": {
          "title": {
            "required": true,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Title — the action as a question: \"Send this email to 12 people?\""
          },
          "children": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Summary — what will happen and what it affects, in one or two sentences."
          },
          "risk": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'low' | 'medium' | 'high'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'low'"
                },
                {
                  "name": "literal",
                  "value": "'medium'"
                },
                {
                  "name": "literal",
                  "value": "'high'"
                }
              ]
            },
            "description": "Figma: Risk — low · medium · high; shown with an icon and a word, never colour alone.",
            "defaultValue": {
              "value": "'medium'",
              "computed": false
            }
          },
          "toolName": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Tool name — the function that will run (`send_email`)."
          },
          "details": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Details — a preview of what will be sent or changed (read-only)."
          },
          "editableText": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Editable — plain text the person may edit before approving (\"edit then approve\")."
          },
          "editLabel": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Label of the editable field",
            "defaultValue": {
              "value": "'Edit before approving'",
              "computed": false
            }
          },
          "alwaysAllowLabel": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Always allow — shows the checkbox with this label (\"Always allow send_email in this chat\")."
          },
          "status": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'pending' | 'approved' | 'denied'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'pending'"
                },
                {
                  "name": "literal",
                  "value": "'approved'"
                },
                {
                  "name": "literal",
                  "value": "'denied'"
                }
              ]
            },
            "description": "Figma: State — `pending` asks; `approved` and `denied` show the outcome in place of the buttons.",
            "defaultValue": {
              "value": "'pending'",
              "computed": false
            }
          },
          "approveLabel": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Approve label — name the action for high risk (\"Delete variables\")",
            "defaultValue": {
              "value": "'Approve'",
              "computed": false
            }
          },
          "denyLabel": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Deny label",
            "defaultValue": {
              "value": "'Deny'",
              "computed": false
            }
          },
          "onApprove": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(decision: ApprovalDecision) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "ApprovalDecision"
                    },
                    "name": "decision"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called with the decision when the person approves (after any edits)"
          },
          "onDeny": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called when the person denies; keep the card and set `status=\"denied\"`"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-approval--pending",
          "name": "Pending",
          "snippet": "const Pending = () => <Approval\n    title=\"File 3 issues in Linear?\"\n    risk=\"medium\"\n    toolName=\"linear.create_issues\"\n    status=\"pending\"\n    onApprove={() => {}}\n    onDeny={() => {}}>Creates three issues in the <strong>Checkout</strong>project.</Approval>;"
        },
        {
          "id": "ai-approval--editable",
          "name": "Editable",
          "snippet": "const Editable = () => <Approval\n    title=\"File 3 issues in Linear?\"\n    risk=\"medium\"\n    toolName=\"linear.create_issues\"\n    status=\"pending\"\n    onApprove={() => {}}\n    onDeny={() => {}}\n    editableText=\"1. Pay button contrast\\n2. Card number label\\n3. Error focus\"\n    alwaysAllowLabel=\"Always allow in this chat\">Creates three issues in the <strong>Checkout</strong>project.</Approval>;"
        },
        {
          "id": "ai-approval--high-risk",
          "name": "High Risk",
          "snippet": "const HighRisk = () => <Approval\n    title=\"Delete 12 unused components?\"\n    risk=\"high\"\n    toolName=\"figma.delete_nodes\"\n    status=\"pending\"\n    onApprove={() => {}}\n    onDeny={() => {}}\n    approveLabel=\"Delete\">Creates three issues in the <strong>Checkout</strong>project.</Approval>;"
        },
        {
          "id": "ai-approval--approved",
          "name": "Approved",
          "snippet": "const Approved = () => <Approval\n    title=\"File 3 issues in Linear?\"\n    risk=\"medium\"\n    toolName=\"linear.create_issues\"\n    status=\"approved\"\n    onApprove={() => {}}\n    onDeny={() => {}}>Creates three issues in the <strong>Checkout</strong>project.</Approval>;"
        },
        {
          "id": "ai-approval--denied",
          "name": "Denied",
          "snippet": "const Denied = () => <Approval\n    title=\"File 3 issues in Linear?\"\n    risk=\"medium\"\n    toolName=\"linear.create_issues\"\n    status=\"denied\"\n    onApprove={() => {}}\n    onDeny={() => {}}>Creates three issues in the <strong>Checkout</strong>project.</Approval>;"
        }
      ],
      "import": "import { Approval } from '@stanvision/atomus-react';"
    },
    "ai-context-meter": {
      "id": "ai-context-meter",
      "name": "ContextMeter",
      "path": "./src/components/ai/ContextMeter.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Context meter — how much of the model's context window a conversation uses, and what it cost.\nA WAI-ARIA meter; the compact variant is a button that opens the details.",
      "reactDocgen": {
        "description": "Figma: Context meter — how much of the model's context window a conversation uses, and what it cost.\nA WAI-ARIA meter; the compact variant is a button that opens the details.",
        "methods": [],
        "displayName": "ContextMeter",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/ContextMeter.tsx",
        "actualName": "ContextMeter",
        "exportName": "ContextMeter",
        "props": {
          "used": {
            "required": true,
            "tsType": {
              "name": "number"
            },
            "description": "Figma: Used — tokens in the context window now"
          },
          "limit": {
            "required": true,
            "tsType": {
              "name": "number"
            },
            "description": "Figma: Limit — the model's context window in tokens"
          },
          "cost": {
            "required": false,
            "tsType": {
              "name": "number"
            },
            "description": "Figma: Cost — spend for this conversation, in `currency`"
          },
          "currency": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "ISO 4217 currency of `cost`",
            "defaultValue": {
              "value": "'USD'",
              "computed": false
            }
          },
          "breakdown": {
            "required": false,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "ContextUsagePart"
                }
              ],
              "raw": "ContextUsagePart[]"
            },
            "description": "Optional split of `used` (input, output, cached …) shown in the details"
          },
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Name of the meter",
            "defaultValue": {
              "value": "'Context window'",
              "computed": false
            }
          },
          "variant": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'compact' | 'bar'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'compact'"
                },
                {
                  "name": "literal",
                  "value": "'bar'"
                }
              ]
            },
            "description": "Figma: Style.\n`compact` (default) — a ring and percentage for a prompt toolbar; details open on click.\n`bar` — label, bar and numbers inline, for side panels and settings.",
            "defaultValue": {
              "value": "'compact'",
              "computed": false
            }
          },
          "warnAt": {
            "required": false,
            "tsType": {
              "name": "number"
            },
            "description": "Percentage at which the meter turns warning; error from 95%",
            "defaultValue": {
              "value": "80",
              "computed": false
            }
          },
          "locale": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "BCP 47 locale for numbers"
          },
          "placement": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'up' | 'down'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'up'"
                },
                {
                  "name": "literal",
                  "value": "'down'"
                }
              ]
            },
            "description": "Which way the compact details open; `up` suits a prompt input at the bottom of the screen",
            "defaultValue": {
              "value": "'up'",
              "computed": false
            }
          },
          "defaultOpen": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Start with the compact details open (docs and tests)"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-context-meter--compact",
          "name": "Compact",
          "snippet": "const Compact = () => <ContextMeter\n    used={48210}\n    limit={200000}\n    cost={0.184}\n    variant=\"compact\"\n    placement=\"down\"\n    breakdown={[{ label: 'Input', tokens: 39200 }, { label: 'Output', tokens: 6810 }, { label: 'Tools', tokens: 2200 }]} />;"
        },
        {
          "id": "ai-context-meter--bar",
          "name": "Bar",
          "snippet": "const Bar = () => <ContextMeter\n    used={48210}\n    limit={200000}\n    cost={0.184}\n    variant=\"bar\"\n    placement=\"down\"\n    breakdown={[{ label: 'Input', tokens: 39200 }, { label: 'Output', tokens: 6810 }, { label: 'Tools', tokens: 2200 }]} />;"
        },
        {
          "id": "ai-context-meter--nearly-full",
          "name": "Nearly Full",
          "snippet": "const NearlyFull = () => <ContextMeter\n    used={194000}\n    limit={200000}\n    cost={0.184}\n    variant=\"bar\"\n    placement=\"down\"\n    breakdown={[{ label: 'Input', tokens: 39200 }, { label: 'Output', tokens: 6810 }, { label: 'Tools', tokens: 2200 }]} />;"
        },
        {
          "id": "ai-context-meter--open",
          "name": "Open",
          "snippet": "const Open = () => <div className=\"sb-pop\"><ContextMeter\n        used={48210}\n        limit={200000}\n        cost={0.184}\n        variant=\"compact\"\n        placement=\"down\"\n        breakdown={[{ label: 'Input', tokens: 39200 }, { label: 'Output', tokens: 6810 }, { label: 'Tools', tokens: 2200 }]}\n        defaultOpen /></div>;"
        }
      ],
      "import": "import { ContextMeter } from '@stanvision/atomus-react';"
    },
    "ai-feedback": {
      "id": "ai-feedback",
      "name": "Feedback",
      "path": "./src/components/ai/Feedback.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Feedback — thumbs up / down on an AI reply, with an optional reason form.\nThumbs are toggle buttons (aria-pressed); the form opens in place and takes focus.",
      "reactDocgen": {
        "description": "Figma: Feedback — thumbs up / down on an AI reply, with an optional reason form.\nThumbs are toggle buttons (aria-pressed); the form opens in place and takes focus.",
        "methods": [],
        "displayName": "Feedback",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/Feedback.tsx",
        "actualName": "Feedback",
        "exportName": "Feedback",
        "props": {
          "value": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "FeedbackRating | null",
              "elements": [
                {
                  "name": "union",
                  "raw": "'up' | 'down'",
                  "elements": [
                    {
                      "name": "literal",
                      "value": "'up'"
                    },
                    {
                      "name": "literal",
                      "value": "'down'"
                    }
                  ]
                },
                {
                  "name": "null"
                }
              ]
            },
            "description": "Figma: Rating (controlled); null clears it"
          },
          "defaultValue": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "FeedbackRating | null",
              "elements": [
                {
                  "name": "union",
                  "raw": "'up' | 'down'",
                  "elements": [
                    {
                      "name": "literal",
                      "value": "'up'"
                    },
                    {
                      "name": "literal",
                      "value": "'down'"
                    }
                  ]
                },
                {
                  "name": "null"
                }
              ]
            },
            "description": "Initial rating when uncontrolled",
            "defaultValue": {
              "value": "null",
              "computed": false
            }
          },
          "onChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(rating: FeedbackRating | null) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "union",
                      "raw": "FeedbackRating | null",
                      "elements": [
                        {
                          "name": "union",
                          "raw": "'up' | 'down'",
                          "elements": [
                            {
                              "name": "literal",
                              "value": "'up'"
                            },
                            {
                              "name": "literal",
                              "value": "'down'"
                            }
                          ]
                        },
                        {
                          "name": "null"
                        }
                      ]
                    },
                    "name": "rating"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called on every thumb press"
          },
          "onSubmit": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(feedback: FeedbackSubmission) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "FeedbackSubmission"
                    },
                    "name": "feedback"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called when the reason form is sent"
          },
          "reasons": {
            "required": false,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "string"
                }
              ],
              "raw": "string[]"
            },
            "description": "Figma: Reasons — chips offered after a thumbs down",
            "defaultValue": {
              "value": "['Not accurate', 'Not helpful', 'Too long', 'Didn’t follow instructions', 'Unsafe or harmful']",
              "computed": false
            }
          },
          "positiveReasons": {
            "required": false,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "string"
                }
              ],
              "raw": "string[]"
            },
            "description": "Reasons offered after a thumbs up; no form opens for a thumbs up when empty",
            "defaultValue": {
              "value": "[]",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'xs' | 'sm'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'xs'"
                },
                {
                  "name": "literal",
                  "value": "'sm'"
                }
              ]
            },
            "description": "Figma: Size — xs 24 · sm 32",
            "defaultValue": {
              "value": "'xs'",
              "computed": false
            }
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-feedback--default",
          "name": "Default",
          "snippet": "const Default = () => <Feedback size=\"sm\" onSubmit={() => {}} />;"
        },
        {
          "id": "ai-feedback--positive",
          "name": "Positive",
          "snippet": "const Positive = () => <Feedback size=\"sm\" onSubmit={() => {}} defaultValue=\"up\" />;"
        },
        {
          "id": "ai-feedback--negative-with-reasons",
          "name": "Negative With Reasons",
          "snippet": "const NegativeWithReasons = () => <Feedback size=\"sm\" onSubmit={() => {}} defaultValue=\"down\" />;"
        }
      ],
      "import": "import { Feedback } from '@stanvision/atomus-react';"
    },
    "ai-message": {
      "id": "ai-message",
      "name": "Message",
      "path": "./src/components/ai/Message.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Message — one turn in a conversation. Every message is an `<article>` named by its speaker,\nso screen-reader users always know who said what (Primer: speaker clarity).",
      "reactDocgen": {
        "description": "Figma: Message — one turn in a conversation. Every message is an `<article>` named by its speaker,\nso screen-reader users always know who said what (Primer: speaker clarity).",
        "methods": [],
        "displayName": "Message",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/Message.tsx",
        "actualName": "Message",
        "exportName": "Message",
        "props": {
          "role": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'user' | 'assistant' | 'system' | 'tool'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'user'"
                },
                {
                  "name": "literal",
                  "value": "'assistant'"
                },
                {
                  "name": "literal",
                  "value": "'system'"
                },
                {
                  "name": "literal",
                  "value": "'tool'"
                }
              ]
            },
            "description": "Figma: Role — who is speaking. Sets layout, label and default name.",
            "defaultValue": {
              "value": "'assistant'",
              "computed": false
            }
          },
          "status": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'streaming' | 'done' | 'error' | 'stopped'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'streaming'"
                },
                {
                  "name": "literal",
                  "value": "'done'"
                },
                {
                  "name": "literal",
                  "value": "'error'"
                },
                {
                  "name": "literal",
                  "value": "'stopped'"
                }
              ]
            },
            "description": "Figma: Status — `streaming` keeps the message busy; `error` and `stopped` show an inline notice.",
            "defaultValue": {
              "value": "'done'",
              "computed": false
            }
          },
          "name": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Name — the speaker (\"You\", \"Atomus AI\", \"Research agent\"). Always announced to screen readers."
          },
          "avatar": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Avatar — an Avatar or logo; assistants default to the AI mark."
          },
          "showName": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Show name — show the speaker name visually (screen readers always get it). Defaults to true except for user messages."
          },
          "aiLabel": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: AI label — shows the AI label next to an assistant's name.",
            "defaultValue": {
              "value": "true",
              "computed": false
            }
          },
          "time": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Timestamp — display text (\"2:41 PM\")"
          },
          "dateTime": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Machine-readable time (ISO 8601) for the `<time>` element"
          },
          "children": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Content"
          },
          "copyText": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Plain text of the message for the Copy action; Copy is hidden without it."
          },
          "onRegenerate": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Figma: Regenerate — assistant messages; also the retry action for `status=\"error\"`."
          },
          "onEdit": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Figma: Edit — user messages"
          },
          "branch": {
            "required": false,
            "tsType": {
              "name": "MessageBranch"
            },
            "description": "Figma: Branch — ‹ 1/3 › switcher between regenerated or edited versions"
          },
          "actions": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Extra actions after the built-in ones (e.g. Feedback)"
          },
          "actionsVisibility": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'always' | 'hover'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'always'"
                },
                {
                  "name": "literal",
                  "value": "'hover'"
                }
              ]
            },
            "description": "Figma: Actions visibility — `always`, or on `hover` and keyboard focus (always shown on touch screens)",
            "defaultValue": {
              "value": "'always'",
              "computed": false
            }
          },
          "errorMessage": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Error text for `status=\"error\"`",
            "defaultValue": {
              "value": "'Something went wrong while generating this response.'",
              "computed": false
            }
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "ai-message--assistant",
          "name": "Assistant",
          "snippet": "const Assistant = () => <Message\n    role=\"assistant\"\n    name=\"Atomus Assistant\"\n    time=\"2:40 PM\"\n    status=\"done\"\n    copyText=\"Use border-secondary.\"\n    onRegenerate={() => {}}\n    actions={<Feedback />}>\n    <p>Use <code>--color-border-secondary</code>for card borders. It switches with Light and Dark mode.</p>\n</Message>;"
        },
        {
          "id": "ai-message--user",
          "name": "User",
          "snippet": "const User = () => <Message\n    role=\"user\"\n    name=\"Kristina\"\n    time=\"2:40 PM\"\n    status=\"done\"\n    copyText=\"Use border-secondary.\"\n    onEdit={() => {}}><p>Which token should I use for a card border?</p></Message>;"
        },
        {
          "id": "ai-message--system",
          "name": "System",
          "snippet": "const System = () => <Message\n    role=\"system\"\n    name={undefined}\n    time={undefined}\n    status=\"done\"\n    copyText={undefined}>Kristina added the <strong>QA agent</strong>to this chat · Today</Message>;"
        },
        {
          "id": "ai-message--with-branches",
          "name": "With Branches",
          "snippet": "const WithBranches = () => <Message\n    role=\"assistant\"\n    name=\"Atomus Assistant\"\n    time=\"2:40 PM\"\n    status=\"done\"\n    copyText=\"Use border-secondary.\"\n    branch={{ index: 2, count: 3, onPrevious: () => {}, onNext: () => {} }}\n    onRegenerate={() => {}}>\n    <p>Use <code>--color-border-secondary</code>for card borders. It switches with Light and Dark mode.</p>\n</Message>;"
        },
        {
          "id": "ai-message--streaming",
          "name": "Streaming",
          "snippet": "const Streaming = () => <Message\n    role=\"assistant\"\n    name=\"Atomus Assistant\"\n    time=\"2:40 PM\"\n    status=\"streaming\"\n    copyText={undefined}>\n    <p>Use <code>--color-border-secondary</code>for card borders. It switches with Light and Dark mode.</p>\n</Message>;"
        },
        {
          "id": "ai-message--error",
          "name": "Error",
          "snippet": "const Error = () => <Message\n    role=\"assistant\"\n    name=\"Atomus Assistant\"\n    time=\"2:40 PM\"\n    status=\"error\"\n    copyText=\"Use border-secondary.\"\n    errorMessage=\"The model is overloaded. Try again in a minute.\"\n    onRegenerate={() => {}}>\n    <p>Use <code>--color-border-secondary</code>for card borders. It switches with Light and Dark mode.</p>\n</Message>;"
        }
      ],
      "import": "import { Feedback, Message } from '@stanvision/atomus-react';\nimport { Feedback } from './Feedback';"
    },
    "ai-model-selector": {
      "id": "ai-model-selector",
      "name": "ModelSelector",
      "path": "./src/components/ai/ModelSelector.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Model selector — Select for AI models with provider icon, description and capability badges.\nThe same select-only combobox pattern as Select: ↑ ↓ Home End Enter Esc and type-ahead.",
      "reactDocgen": {
        "description": "Figma: Model selector — Select for AI models with provider icon, description and capability badges.\nThe same select-only combobox pattern as Select: ↑ ↓ Home End Enter Esc and type-ahead.",
        "methods": [],
        "displayName": "ModelSelector",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/ModelSelector.tsx",
        "actualName": "ModelSelector",
        "exportName": "ModelSelector",
        "props": {
          "models": {
            "required": true,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "ModelOption"
                }
              ],
              "raw": "ModelOption[]"
            },
            "description": "Figma: Models"
          },
          "value": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "defaultValue": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          },
          "onChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(value: string) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "string"
                    },
                    "name": "value"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": ""
          },
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Accessible name; shown only when `showLabel` is set",
            "defaultValue": {
              "value": "'Model'",
              "computed": false
            }
          },
          "showLabel": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Shows `label` above the trigger (forms and settings)",
            "defaultValue": {
              "value": "false",
              "computed": false
            }
          },
          "variant": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'ghost' | 'outline'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'ghost'"
                },
                {
                  "name": "literal",
                  "value": "'outline'"
                }
              ]
            },
            "description": "Figma: Style.\n`ghost` (default) — borderless trigger for a prompt toolbar.\n`outline` — bordered like Select, for settings pages.",
            "defaultValue": {
              "value": "'ghost'",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'sm' | 'md'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'sm'"
                },
                {
                  "name": "literal",
                  "value": "'md'"
                }
              ]
            },
            "description": "Figma: Size — sm 32 · md 40",
            "defaultValue": {
              "value": "'sm'",
              "computed": false
            }
          },
          "placement": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'down' | 'up'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'down'"
                },
                {
                  "name": "literal",
                  "value": "'up'"
                }
              ]
            },
            "description": "Which way the list opens; `up` suits a prompt input at the bottom of the screen",
            "defaultValue": {
              "value": "'up'",
              "computed": false
            }
          },
          "disabled": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": ""
          },
          "defaultOpen": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Start open (docs and tests)"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-model-selector--ghost",
          "name": "Ghost",
          "snippet": "const Ghost = () => <div className=\"sb-pop\"><ModelSelector\n        models={[\n          { value: 'atomus-pro', label: 'Atomus Pro', provider: 'StanVision', description: 'Best for long, careful work', capabilities: ['Reasoning', 'Tools'], badge: 'New' },\n          { value: 'atomus-fast', label: 'Atomus Fast', provider: 'StanVision', description: 'Quick answers and drafts', capabilities: ['Fast'] },\n          { value: 'local-8b', label: 'Local 8B', provider: 'On device', description: 'Private, works offline', disabled: true },\n        ]}\n        defaultValue=\"atomus-pro\"\n        variant=\"ghost\"\n        size=\"md\"\n        placement=\"down\" /></div>;"
        },
        {
          "id": "ai-model-selector--outline-with-label",
          "name": "Outline With Label",
          "snippet": "const OutlineWithLabel = () => <div className=\"sb-pop\"><ModelSelector\n        models={[\n          { value: 'atomus-pro', label: 'Atomus Pro', provider: 'StanVision', description: 'Best for long, careful work', capabilities: ['Reasoning', 'Tools'], badge: 'New' },\n          { value: 'atomus-fast', label: 'Atomus Fast', provider: 'StanVision', description: 'Quick answers and drafts', capabilities: ['Fast'] },\n          { value: 'local-8b', label: 'Local 8B', provider: 'On device', description: 'Private, works offline', disabled: true },\n        ]}\n        defaultValue=\"atomus-pro\"\n        variant=\"outline\"\n        size=\"md\"\n        placement=\"down\"\n        showLabel /></div>;"
        },
        {
          "id": "ai-model-selector--open",
          "name": "Open",
          "snippet": "const Open = () => <div className=\"sb-pop\"><ModelSelector\n        models={[\n          { value: 'atomus-pro', label: 'Atomus Pro', provider: 'StanVision', description: 'Best for long, careful work', capabilities: ['Reasoning', 'Tools'], badge: 'New' },\n          { value: 'atomus-fast', label: 'Atomus Fast', provider: 'StanVision', description: 'Quick answers and drafts', capabilities: ['Fast'] },\n          { value: 'local-8b', label: 'Local 8B', provider: 'On device', description: 'Private, works offline', disabled: true },\n        ]}\n        defaultValue=\"atomus-pro\"\n        variant=\"ghost\"\n        size=\"md\"\n        placement=\"down\"\n        defaultOpen /></div>;"
        }
      ],
      "import": "import { ModelSelector } from '@stanvision/atomus-react';"
    },
    "ai-prompt-input": {
      "id": "ai-prompt-input",
      "name": "PromptInput",
      "path": "./src/components/ai/PromptInput.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Prompt input — the composer of an AI chat: auto-growing text, attachments, a toolbar slot,\nsend ↔ stop, and \"/\" or \"@\" menus. Enter sends, Shift+Enter adds a line, Esc closes a menu.",
      "reactDocgen": {
        "description": "Figma: Prompt input — the composer of an AI chat: auto-growing text, attachments, a toolbar slot,\nsend ↔ stop, and \"/\" or \"@\" menus. Enter sends, Shift+Enter adds a line, Esc closes a menu.",
        "methods": [],
        "displayName": "PromptInput",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/PromptInput.tsx",
        "actualName": "PromptInput",
        "exportName": "PromptInput",
        "props": {
          "value": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Text (controlled)"
          },
          "defaultValue": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Initial text when uncontrolled",
            "defaultValue": {
              "value": "''",
              "computed": false
            }
          },
          "onChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(value: string) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "string"
                    },
                    "name": "value"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": ""
          },
          "onSubmit": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(text: string, attachments: PromptAttachment[]) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "string"
                    },
                    "name": "text"
                  },
                  {
                    "type": {
                      "name": "Array",
                      "elements": [
                        {
                          "name": "PromptAttachment"
                        }
                      ],
                      "raw": "PromptAttachment[]"
                    },
                    "name": "attachments"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called with the trimmed text and the attachments on Enter or the send button"
          },
          "onStop": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called by the stop button while `status` is `submitted` or `streaming`"
          },
          "status": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'ready' | 'submitted' | 'streaming' | 'error'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'ready'"
                },
                {
                  "name": "literal",
                  "value": "'submitted'"
                },
                {
                  "name": "literal",
                  "value": "'streaming'"
                },
                {
                  "name": "literal",
                  "value": "'error'"
                }
              ]
            },
            "description": "Figma: State — `submitted` and `streaming` turn Send into Stop and block new submits.",
            "defaultValue": {
              "value": "'ready'",
              "computed": false
            }
          },
          "placeholder": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Placeholder — a hint, never the label",
            "defaultValue": {
              "value": "'Ask anything…'",
              "computed": false
            }
          },
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Accessible name of the text area (visually hidden)",
            "defaultValue": {
              "value": "'Message'",
              "computed": false
            }
          },
          "attachments": {
            "required": false,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "PromptAttachment"
                }
              ],
              "raw": "PromptAttachment[]"
            },
            "description": "Figma: Attachments — chips above the text",
            "defaultValue": {
              "value": "[]",
              "computed": false
            }
          },
          "onAttach": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "() => void",
              "signature": {
                "arguments": [],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Figma: Attach button — shows the paperclip button; open your file picker here"
          },
          "onRemoveAttachment": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(id: string) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "string"
                    },
                    "name": "id"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called by a chip's remove button"
          },
          "toolbar": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Toolbar slot — left of the bottom bar (ModelSelector, tool toggles)"
          },
          "actions": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Actions slot — right of the bottom bar, before Send (ContextMeter, voice)"
          },
          "triggers": {
            "required": false,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "PromptTrigger"
                }
              ],
              "raw": "PromptTrigger[]"
            },
            "description": "Figma: Command menu — \"/\" and \"@\" menus that open while typing",
            "defaultValue": {
              "value": "[]",
              "computed": false
            }
          },
          "disclaimer": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Disclaimer — one line under the input (\"AI can make mistakes. Check important info.\")"
          },
          "minRows": {
            "required": false,
            "tsType": {
              "name": "number"
            },
            "description": "Rows shown when empty",
            "defaultValue": {
              "value": "1",
              "computed": false
            }
          },
          "maxRows": {
            "required": false,
            "tsType": {
              "name": "number"
            },
            "description": "Rows before the text area scrolls",
            "defaultValue": {
              "value": "8",
              "computed": false
            }
          },
          "size": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'md' | 'lg'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'md'"
                },
                {
                  "name": "literal",
                  "value": "'lg'"
                }
              ]
            },
            "description": "Figma: Size — md for side panels, lg for a full-page chat",
            "defaultValue": {
              "value": "'md'",
              "computed": false
            }
          },
          "disabled": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": ""
          },
          "autoFocus": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Focuses the text area on mount — only on pages whose main task is the chat"
          },
          "submitLabel": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Accessible name of the send button",
            "defaultValue": {
              "value": "'Send message'",
              "computed": false
            }
          },
          "stopLabel": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Accessible name of the stop button",
            "defaultValue": {
              "value": "'Stop generating'",
              "computed": false
            }
          },
          "clearOnSubmit": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Clears the text after submit (uncontrolled only)",
            "defaultValue": {
              "value": "true",
              "computed": false
            }
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-prompt-input--default",
          "name": "Default",
          "snippet": "const Default = () => <PromptInput\n    placeholder=\"Ask anything… type / for commands\"\n    status=\"ready\"\n    size=\"md\"\n    disclaimer=\"AI can make mistakes. Check important information.\" />;"
        },
        {
          "id": "ai-prompt-input--streaming",
          "name": "Streaming",
          "snippet": "const Streaming = () => <PromptInput\n    placeholder=\"Ask anything… type / for commands\"\n    status=\"streaming\"\n    size=\"md\"\n    disclaimer=\"AI can make mistakes. Check important information.\"\n    defaultValue=\"Summarize the latest release notes\"\n    onStop={() => {}} />;"
        },
        {
          "id": "ai-prompt-input--with-attachments-and-toolbar",
          "name": "With Attachments And Toolbar",
          "snippet": "const WithAttachmentsAndToolbar = () => <PromptInput\n    placeholder=\"Ask anything… type / for commands\"\n    status=\"ready\"\n    size=\"lg\"\n    disclaimer=\"AI can make mistakes. Check important information.\"\n    onAttach={() => {}}\n    onRemoveAttachment={() => {}}\n    attachments={[\n      { id: '1', name: 'checkout-flow.fig', size: '4.2 MB' },\n      { id: '2', name: 'audit-report.pdf', size: '820 KB' },\n    ]}\n    triggers={[{ char: '/', label: 'Commands', items: [{ value: 'audit', label: 'Audit a page', icon: <Icon name=\"shield\" size={16} /> }] }]}\n    toolbar={<ModelSelector models={[{ value: 'pro', label: 'Atomus Pro' }, { value: 'fast', label: 'Atomus Fast' }]} defaultValue=\"pro\" />}\n    actions={<ContextMeter used={48210} limit={200000} />} />;"
        },
        {
          "id": "ai-prompt-input--disabled",
          "name": "Disabled",
          "snippet": "const Disabled = () => <PromptInput\n    placeholder=\"Upgrade to keep chatting\"\n    status=\"ready\"\n    size=\"md\"\n    disclaimer=\"AI can make mistakes. Check important information.\"\n    disabled />;"
        }
      ],
      "import": "import { ContextMeter, Icon, ModelSelector, PromptInput } from '@stanvision/atomus-react';\nimport { Icon } from '../Icon';"
    },
    "ai-reasoning": {
      "id": "ai-reasoning",
      "name": "Reasoning",
      "path": "./src/components/ai/Reasoning.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Reasoning — a collapsible \"Thought for 12s\" disclosure with the agent's steps.\nSeparates the model's working from its answer (Primer: speaker clarity).",
      "reactDocgen": {
        "description": "Figma: Reasoning — a collapsible \"Thought for 12s\" disclosure with the agent's steps.\nSeparates the model's working from its answer (Primer: speaker clarity).",
        "methods": [],
        "displayName": "Reasoning",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/Reasoning.tsx",
        "actualName": "Reasoning",
        "exportName": "Reasoning",
        "props": {
          "status": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'thinking' | 'done'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'thinking'"
                },
                {
                  "name": "literal",
                  "value": "'done'"
                }
              ]
            },
            "description": "Figma: State — `thinking` while the model reasons, `done` afterwards.",
            "defaultValue": {
              "value": "'done'",
              "computed": false
            }
          },
          "duration": {
            "required": false,
            "tsType": {
              "name": "number"
            },
            "description": "Figma: Duration — seconds spent thinking; the trigger reads \"Thought for 12s\"."
          },
          "steps": {
            "required": false,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "ReasoningStep"
                }
              ],
              "raw": "ReasoningStep[]"
            },
            "description": "Figma: Steps — a short list of what the agent did."
          },
          "children": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Free-form reasoning text (summary or raw thoughts) under the steps."
          },
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Label — overrides \"Thinking…\" / \"Thought for 12s\"."
          },
          "open": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Expanded (controlled)"
          },
          "defaultOpen": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Initial expanded state when uncontrolled. Defaults to open while thinking."
          },
          "onOpenChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(open: boolean) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "boolean"
                    },
                    "name": "open"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called when the person expands or collapses it"
          },
          "autoCollapse": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Collapse automatically when `status` turns `done` (uncontrolled only).",
            "defaultValue": {
              "value": "true",
              "computed": false
            }
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-reasoning--thinking",
          "name": "Thinking",
          "snippet": "const Thinking = () => <Reasoning\n    status=\"thinking\"\n    duration={6}\n    steps={[\n      { id: 'a', label: 'Load checkout.atomus.io in a headless browser', status: 'done' as const },\n      { id: 'b', label: 'Run axe-core against WCAG 2.2 AA rules', detail: '68 rules · 3 violations', status: 'done' as const },\n      { id: 'c', label: 'Group violations by component and draft fixes', status: 'active' as const },\n    ]}\n    defaultOpen />;"
        },
        {
          "id": "ai-reasoning--done",
          "name": "Done",
          "snippet": "const Done = () => <Reasoning\n    status=\"done\"\n    duration={12}\n    steps={STEPS.map((s) => ({ ...s, status: 'done' as const }))}\n    defaultOpen={false} />;",
          "warning": "Incomplete snippet: `STEPS` could not be resolved statically."
        },
        {
          "id": "ai-reasoning--done-open",
          "name": "Done Open",
          "snippet": "const DoneOpen = () => <Reasoning\n    status=\"done\"\n    duration={12}\n    steps={STEPS.map((s) => ({ ...s, status: 'done' as const }))}\n    defaultOpen />;",
          "warning": "Incomplete snippet: `STEPS` could not be resolved statically."
        }
      ],
      "import": "import { Reasoning } from '@stanvision/atomus-react';"
    },
    "ai-sources": {
      "id": "ai-sources",
      "name": "Sources",
      "path": "./src/components/ai/Sources.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Sources — the numbered list of sources behind an AI answer. Numbers match InlineCitation.",
      "reactDocgen": {
        "description": "Figma: Sources — the numbered list of sources behind an AI answer. Numbers match InlineCitation.",
        "methods": [],
        "displayName": "Sources",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/Sources.tsx",
        "actualName": "Sources",
        "exportName": "Sources",
        "props": {
          "sources": {
            "required": true,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "SourceItem"
                }
              ],
              "raw": "SourceItem[]"
            },
            "description": "Figma: Sources — in citation order; item 1 is citation [1]."
          },
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Label — the disclosure text; defaults to \"N sources\"."
          },
          "variant": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'collapsible' | 'list'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'collapsible'"
                },
                {
                  "name": "literal",
                  "value": "'list'"
                }
              ]
            },
            "description": "Figma: Style.\n`collapsible` (default) — a \"N sources\" disclosure under the answer.\n`list` — always expanded, for side panels.",
            "defaultValue": {
              "value": "'collapsible'",
              "computed": false
            }
          },
          "open": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Expanded (controlled, `collapsible` only)"
          },
          "defaultOpen": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Initial expanded state when uncontrolled",
            "defaultValue": {
              "value": "false",
              "computed": false
            }
          },
          "onOpenChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(open: boolean) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "boolean"
                    },
                    "name": "open"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called when the person expands or collapses it"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-sources--collapsible",
          "name": "Collapsible",
          "snippet": "const Collapsible = () => <Sources\n    sources={[\n      { id: 'contrast', title: 'Understanding SC 1.4.3: Contrast (Minimum)', url: 'https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum', snippet: 'Text has a contrast ratio of at least 4.5:1.' },\n      { id: 'labels', title: 'Understanding SC 3.3.2: Labels or Instructions', url: 'https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions', snippet: 'A placeholder is not a label.' },\n      { id: 'focus', title: 'Understanding SC 2.4.3: Focus Order', url: 'https://www.w3.org/WAI/WCAG22/Understanding/focus-order' },\n    ]}\n    variant=\"collapsible\"\n    defaultOpen />;"
        },
        {
          "id": "ai-sources--list",
          "name": "List",
          "snippet": "const List = () => <Sources\n    sources={[\n      { id: 'contrast', title: 'Understanding SC 1.4.3: Contrast (Minimum)', url: 'https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum', snippet: 'Text has a contrast ratio of at least 4.5:1.' },\n      { id: 'labels', title: 'Understanding SC 3.3.2: Labels or Instructions', url: 'https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions', snippet: 'A placeholder is not a label.' },\n      { id: 'focus', title: 'Understanding SC 2.4.3: Focus Order', url: 'https://www.w3.org/WAI/WCAG22/Understanding/focus-order' },\n    ]}\n    variant=\"list\"\n    defaultOpen />;"
        },
        {
          "id": "ai-sources--with-inline-citations",
          "name": "With Inline Citations",
          "snippet": "const WithInlineCitations = () => <div className=\"sb-stack\">\n    <p>The Pay button has a contrast of 3.1:1, below the minimum <InlineCitation index={1} source={SOURCES[0]} />. The card field uses its placeholder as its label <InlineCitation index={2} source={SOURCES[1]} />.</p>\n    <Sources\n        sources={[\n          { id: 'contrast', title: 'Understanding SC 1.4.3: Contrast (Minimum)', url: 'https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum', snippet: 'Text has a contrast ratio of at least 4.5:1.' },\n          { id: 'labels', title: 'Understanding SC 3.3.2: Labels or Instructions', url: 'https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions', snippet: 'A placeholder is not a label.' },\n          { id: 'focus', title: 'Understanding SC 2.4.3: Focus Order', url: 'https://www.w3.org/WAI/WCAG22/Understanding/focus-order' },\n        ]}\n        variant=\"collapsible\"\n        defaultOpen={false} />\n</div>;"
        }
      ],
      "import": "import { InlineCitation, Sources } from '@stanvision/atomus-react';"
    },
    "ai-streaming-text": {
      "id": "ai-streaming-text",
      "name": "StreamingText",
      "path": "./src/components/ai/StreamingText.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Streaming text — renders an AI reply as it arrives, with a caret and batched,\npolite screen-reader announcements. Framework-agnostic: feed it any growing string.",
      "reactDocgen": {
        "description": "Figma: Streaming text — renders an AI reply as it arrives, with a caret and batched,\npolite screen-reader announcements. Framework-agnostic: feed it any growing string.",
        "methods": [],
        "displayName": "StreamingText",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/StreamingText.tsx",
        "actualName": "StreamingText",
        "exportName": "StreamingText",
        "props": {
          "text": {
            "required": true,
            "tsType": {
              "name": "string"
            },
            "description": "The text received so far. Pass the growing string on every chunk; the component only appends."
          },
          "streaming": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: State=Streaming — shows the caret and keeps the region busy for screen readers.",
            "defaultValue": {
              "value": "false",
              "computed": false
            }
          },
          "caret": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Figma: Caret — blinking caret at the end while streaming (static under reduced motion).",
            "defaultValue": {
              "value": "true",
              "computed": false
            }
          },
          "announce": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'polite' | 'end' | 'off'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'polite'"
                },
                {
                  "name": "literal",
                  "value": "'end'"
                },
                {
                  "name": "literal",
                  "value": "'off'"
                }
              ]
            },
            "description": "How screen readers hear the stream (Primer: announce progress, not every token).\n`polite` (default) — finished sentences in batches, at most every `announceInterval` ms.\n`end` — only `doneMessage` once the stream ends.\n`off` — nothing; use when an outer live region already announces the reply.",
            "defaultValue": {
              "value": "'polite'",
              "computed": false
            }
          },
          "announceInterval": {
            "required": false,
            "tsType": {
              "name": "number"
            },
            "description": "Minimum time between announcements in ms",
            "defaultValue": {
              "value": "1500",
              "computed": false
            }
          },
          "doneMessage": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Announced when the stream ends with `announce=\"end\"`",
            "defaultValue": {
              "value": "'Response complete'",
              "computed": false
            }
          },
          "render": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(text: string) => ReactNode",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "string"
                    },
                    "name": "text"
                  }
                ],
                "return": {
                  "name": "ReactNode"
                }
              }
            },
            "description": "Renders the text (e.g. Markdown). Defaults to plain text with preserved line breaks."
          }
        },
        "composes": [
          "Omit"
        ]
      },
      "stories": [
        {
          "id": "ai-streaming-text--streaming",
          "name": "Streaming",
          "snippet": "const Streaming = () => <StreamingText\n    text=\"I audited the checkout page and found 3 issues that block WCAG 2.2 AA. The Pay button label has a contrast of 3.1:1\"\n    streaming\n    caret />;"
        },
        {
          "id": "ai-streaming-text--done",
          "name": "Done",
          "snippet": "const Done = () => <StreamingText\n    text=\"I audited the checkout page and found 3 issues that block WCAG 2.2 AA.\"\n    streaming={false}\n    caret />;"
        },
        {
          "id": "ai-streaming-text--shimmer-status",
          "name": "Shimmer Status",
          "snippet": "const ShimmerStatus = () => (\n  <div className=\"sb-stack\">\n    <Shimmer>Searching the documentation…</Shimmer>\n    <Shimmer active={false}>Searched the documentation</Shimmer>\n  </div>\n);"
        }
      ],
      "import": "import { Shimmer, StreamingText } from '@stanvision/atomus-react';"
    },
    "ai-suggestions": {
      "id": "ai-suggestions",
      "name": "Suggestions",
      "path": "./src/components/ai/Suggestions.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Suggestions — follow-up prompts and prompt starters as chips or cards.",
      "reactDocgen": {
        "description": "Figma: Suggestions — follow-up prompts and prompt starters as chips or cards.",
        "methods": [],
        "displayName": "Suggestions",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/Suggestions.tsx",
        "actualName": "Suggestions",
        "exportName": "Suggestions",
        "props": {
          "suggestions": {
            "required": true,
            "tsType": {
              "name": "Array",
              "elements": [
                {
                  "name": "union",
                  "raw": "string | SuggestionItem",
                  "elements": [
                    {
                      "name": "string"
                    },
                    {
                      "name": "SuggestionItem"
                    }
                  ]
                }
              ],
              "raw": "Array<string | SuggestionItem>"
            },
            "description": "Figma: Items — strings or items with a separate prompt, description and icon."
          },
          "onSelect": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(prompt: string, item: SuggestionItem) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "string"
                    },
                    "name": "prompt"
                  },
                  {
                    "type": {
                      "name": "SuggestionItem"
                    },
                    "name": "item"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called with the chosen prompt and the item."
          },
          "mode": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'send' | 'insert'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'send'"
                },
                {
                  "name": "literal",
                  "value": "'insert'"
                }
              ]
            },
            "description": "Figma: Action.\n`send` (default) — choosing a chip sends the prompt right away.\n`insert` — puts the prompt into the input so the person can edit it first.",
            "defaultValue": {
              "value": "'send'",
              "computed": false
            }
          },
          "variant": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'chips' | 'cards'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'chips'"
                },
                {
                  "name": "literal",
                  "value": "'cards'"
                }
              ]
            },
            "description": "Figma: Style.\n`chips` (default) — one row of pills that scrolls sideways (wraps with `wrap`).\n`cards` — a grid of prompt starters for a welcome state.",
            "defaultValue": {
              "value": "'chips'",
              "computed": false
            }
          },
          "wrap": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Chips wrap onto several lines instead of scrolling",
            "defaultValue": {
              "value": "false",
              "computed": false
            }
          },
          "label": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": "Accessible name of the group",
            "defaultValue": {
              "value": "'Suggested prompts'",
              "computed": false
            }
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-suggestions--chips",
          "name": "Chips",
          "snippet": "const Chips = () => <Suggestions\n    label=\"Follow-up prompts\"\n    suggestions={['Fix the contrast issue', 'Show the axe report', 'Audit the account page too']}\n    mode=\"send\"\n    variant=\"chips\"\n    onSelect={() => {}} />;"
        },
        {
          "id": "ai-suggestions--wrapped",
          "name": "Wrapped",
          "snippet": "const Wrapped = () => <Suggestions\n    label=\"Follow-up prompts\"\n    suggestions={['Fix the contrast issue', 'Show the axe report', 'Audit the account page too']}\n    mode=\"insert\"\n    variant=\"chips\"\n    onSelect={() => {}}\n    wrap />;"
        },
        {
          "id": "ai-suggestions--cards",
          "name": "Cards",
          "snippet": "const Cards = () => <Suggestions\n    label=\"Prompt starters\"\n    suggestions={[\n      { id: 'audit', label: 'Audit our checkout page', description: 'Find WCAG 2.2 issues', icon: <Icon name=\"shield\" size={16} /> },\n      { id: 'tokens', label: 'Which token for a card border?', description: 'Pick semantic tokens by role', icon: <Icon name=\"search\" size={16} /> },\n      { id: 'draft', label: 'Draft release notes', description: 'From the merged pull requests', icon: <Icon name=\"edit\" size={16} /> },\n    ]}\n    mode=\"send\"\n    variant=\"cards\"\n    onSelect={() => {}} />;"
        }
      ],
      "import": "import { Icon, Suggestions } from '@stanvision/atomus-react';\nimport { Icon } from '../Icon';"
    },
    "ai-tool-call": {
      "id": "ai-tool-call",
      "name": "ToolCall",
      "path": "./src/components/ai/ToolCall.stories.tsx",
      "jsDocTags": {},
      "description": "Figma: Tool call — one function call by the agent: name, status, duration, and a disclosure with\nthe input and output. Status changes are announced politely.",
      "reactDocgen": {
        "description": "Figma: Tool call — one function call by the agent: name, status, duration, and a disclosure with\nthe input and output. Status changes are announced politely.",
        "methods": [],
        "displayName": "ToolCall",
        "definedInFile": "/opt/buildhome/repo/react/src/components/ai/ToolCall.tsx",
        "actualName": "ToolCall",
        "exportName": "ToolCall",
        "props": {
          "name": {
            "required": true,
            "tsType": {
              "name": "string"
            },
            "description": "Figma: Tool name — the function the agent called, shown in monospace (`search_docs`)."
          },
          "title": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Figma: Title — what the call does in plain language (\"Searched the docs\"). Defaults to `name`."
          },
          "status": {
            "required": false,
            "tsType": {
              "name": "union",
              "raw": "'pending' | 'running' | 'success' | 'error'",
              "elements": [
                {
                  "name": "literal",
                  "value": "'pending'"
                },
                {
                  "name": "literal",
                  "value": "'running'"
                },
                {
                  "name": "literal",
                  "value": "'success'"
                },
                {
                  "name": "literal",
                  "value": "'error'"
                }
              ]
            },
            "description": "Figma: Status",
            "defaultValue": {
              "value": "'success'",
              "computed": false
            }
          },
          "input": {
            "required": false,
            "tsType": {
              "name": "unknown"
            },
            "description": "Figma: Input — the arguments. Objects are shown as formatted JSON."
          },
          "output": {
            "required": false,
            "tsType": {
              "name": "unknown"
            },
            "description": "Figma: Output — the result. Objects are shown as formatted JSON."
          },
          "error": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Error message for `status=\"error\"`; shown in place of the output."
          },
          "duration": {
            "required": false,
            "tsType": {
              "name": "number"
            },
            "description": "Figma: Duration — run time in milliseconds"
          },
          "icon": {
            "required": false,
            "tsType": {
              "name": "ReactNode"
            },
            "description": "Replaces the wrench icon (e.g. the integration's logo)"
          },
          "open": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Expanded (controlled)"
          },
          "defaultOpen": {
            "required": false,
            "tsType": {
              "name": "boolean"
            },
            "description": "Initial expanded state when uncontrolled",
            "defaultValue": {
              "value": "false",
              "computed": false
            }
          },
          "onOpenChange": {
            "required": false,
            "tsType": {
              "name": "signature",
              "type": "function",
              "raw": "(open: boolean) => void",
              "signature": {
                "arguments": [
                  {
                    "type": {
                      "name": "boolean"
                    },
                    "name": "open"
                  }
                ],
                "return": {
                  "name": "void"
                }
              }
            },
            "description": "Called when the person expands or collapses it"
          },
          "className": {
            "required": false,
            "tsType": {
              "name": "string"
            },
            "description": ""
          }
        }
      },
      "stories": [
        {
          "id": "ai-tool-call--success",
          "name": "Success",
          "snippet": "const Success = () => <ToolCall\n    name=\"run_axe_audit\"\n    title=\"Audited checkout.atomus.io\"\n    status=\"success\"\n    duration={1480}\n    input={{ url: 'https://checkout.atomus.io', standard: 'wcag22aa' }}\n    output={{ violations: 3, passes: 65 }} />;"
        },
        {
          "id": "ai-tool-call--expanded",
          "name": "Expanded",
          "snippet": "const Expanded = () => <ToolCall\n    name=\"run_axe_audit\"\n    title=\"Audited checkout.atomus.io\"\n    status=\"success\"\n    duration={1480}\n    input={{ url: 'https://checkout.atomus.io', standard: 'wcag22aa' }}\n    output={{ violations: 3, passes: 65 }}\n    defaultOpen />;"
        },
        {
          "id": "ai-tool-call--statuses",
          "name": "Statuses",
          "snippet": "const Statuses = () => <div className=\"sb-stack\">\n    <ToolCall\n        name=\"run_axe_audit\"\n        input={{ url: 'https://checkout.atomus.io', standard: 'wcag22aa' }}\n        status=\"pending\"\n        title=\"Waiting to run\"\n        output={undefined}\n        duration={undefined} />\n    <ToolCall\n        name=\"run_axe_audit\"\n        input={{ url: 'https://checkout.atomus.io', standard: 'wcag22aa' }}\n        status=\"running\"\n        title=\"Auditing checkout.atomus.io\"\n        output={undefined}\n        duration={undefined} />\n    <ToolCall\n        name=\"run_axe_audit\"\n        title=\"Audited checkout.atomus.io\"\n        duration={1480}\n        input={{ url: 'https://checkout.atomus.io', standard: 'wcag22aa' }}\n        output={{ violations: 3, passes: 65 }}\n        status=\"success\" />\n    <ToolCall\n        name=\"run_axe_audit\"\n        duration={1480}\n        input={{ url: 'https://checkout.atomus.io', standard: 'wcag22aa' }}\n        status=\"error\"\n        title=\"Audit failed\"\n        output={undefined}\n        error=\"Navigation timeout after 30s\" />\n</div>;"
        }
      ],
      "import": "import { ToolCall } from '@stanvision/atomus-react';"
    }
  },
  "meta": {
    "docgen": "react-docgen",
    "durationMs": 1166
  }
}