{
  "id": "status-row",
  "name": "StatusRow",
  "level": "molecule",
  "status": "stable",
  "purpose": "The state of one thing, named and explained in a line.",
  "description": "One-line status display with leading tone dot (or icon), title, optional description, trailing Badge and trailing action. Tone colours only the leading dot (or tinted icon); the row is chrome-less, so a stack is grouped by its host (a Card with `divide-y divide-boundary-subtle`). Pair the trailing status with an outline Badge so the dot stays the only saturated mark. The body always reads in the surface's default content tone, so meaning never relies on colour alone (R14). Patterns consulted: Patterns/Feedback · LocalVsGlobalFeedback, Patterns/Visual Priority · StatusHierarchy.",
  "role": "status",
  "import": "@rrios-forge/ui/molecules/status-row",
  "exports": [
    "StatusRow",
    "STATUS_ROW_TONES",
    "statusRowDotVariants",
    "statusRowIconVariants",
    "statusRowVariants"
  ],
  "source": "packages/ui/src/molecules/status-row",
  "axes": [
    {
      "axis": "tone",
      "part": null,
      "values": [
        "neutral",
        "info",
        "success",
        "warning",
        "danger"
      ],
      "default": "neutral",
      "meaning": "Which semantic colour family the element speaks in."
    }
  ],
  "needs": [],
  "patterns": [],
  "a11yExceptions": [],
  "decisions": [
    {
      "id": "ADR-030",
      "title": "Axis vocabulary: one name, one meaning"
    }
  ],
  "stories": [
    {
      "name": "Playground",
      "id": "components-molecules-statusrow--playground",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-statusrow--playground",
      "frame": "/iframe.html?id=components-molecules-statusrow--playground&viewMode=story"
    },
    {
      "name": "Tones",
      "id": "components-molecules-statusrow--tones",
      "interaction": false,
      "snapshots": [
        "dark",
        "high-contrast",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-statusrow--tones",
      "frame": "/iframe.html?id=components-molecules-statusrow--tones&viewMode=story"
    },
    {
      "name": "With action",
      "id": "components-molecules-statusrow--with-action",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-statusrow--with-action",
      "frame": "/iframe.html?id=components-molecules-statusrow--with-action&viewMode=story"
    },
    {
      "name": "System health",
      "id": "components-molecules-statusrow--system-health",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-statusrow--system-health",
      "frame": "/iframe.html?id=components-molecules-statusrow--system-health&viewMode=story"
    },
    {
      "name": "Billing status",
      "id": "components-molecules-statusrow--billing-status",
      "interaction": false,
      "snapshots": [
        "dark",
        "light"
      ],
      "skipsSnapshot": false,
      "docs": "/?path=/story/components-molecules-statusrow--billing-status",
      "frame": "/iframe.html?id=components-molecules-statusrow--billing-status&viewMode=story"
    }
  ],
  "storyFile": "tooling/storybook/stories/components/molecules/status-row.stories.tsx"
}