{
  "name": "ResultItem",
  "type": "component",
  "description": "A 32px result row: label left, value right, one hairline rule beneath, and a severity on the value.",
  "export": "@gtmi/strix-react/atoms/result-item",
  "path": "@gtmi/strix-react/atoms/result-item",
  "props": [
    {
      "name": "label",
      "type": "ReactNode",
      "required": true,
      "description": "The left-hand label. Figma's First-text."
    },
    {
      "name": "value",
      "type": "ReactNode",
      "required": true,
      "description": "The right-hand value. Figma's Second-text."
    },
    {
      "name": "state",
      "type": "default | loading | highlighted | alert | error",
      "default": "default",
      "description": "What kind of result this is. A DATA prop, not a CSS state: the atom declares no hover, pressed, focus or disabled treatment at all."
    },
    {
      "name": "stateLabels",
      "type": "Partial<Record<ResultItemState, string>>",
      "default": "{ alert: 'Alert:', error: 'Error:' }",
      "description": "Visually-hidden prefixes announcing the severity, so it is never carried by colour alone."
    },
    {
      "name": "className",
      "type": "string",
      "description": "Merged through cn(), so a caller's utility wins."
    }
  ],
  "parts": [
    {
      "name": "result-item",
      "description": "Root, via data-slot. Also carries data-state and aria-busy when loading."
    },
    {
      "name": "result-item-label",
      "description": "The left label"
    },
    {
      "name": "result-item-value",
      "description": "The right value, including the visually-hidden severity prefix"
    }
  ],
  "ai_tags": ["result", "row", "label", "value", "status", "severity", "lookup"],
  "since": "0.2.0",
  "figma": {
    "file": "zT3vGm4QlFEI2Jp9nxyFKI",
    "fileName": "Demo components library",
    "node": "22:5805",
    "component": ".result-item"
  },
  "tokens_used": [
    "--color-text-primary",
    "--color-text-secondary",
    "--color-text-accent-strong",
    "--color-text-error",
    "--color-border-neutral-soft",
    "--spacing-gap-300"
  ],
  "notes": "STATE IS A DATA PROP, UNUSUALLY FOR AN AXIS FIGMA CALLS STATE. Nothing in the atom is driven by the pointer or the focus ring: a result's severity is data about the result, the way ChatLog's severity is data about an event. Five options, four distinct treatments -- Loading is byte-identical to Default in every recorded role, so Figma declares the state and then does not draw it. It is kept in the enum because a result row really does have a pending state, and it differs here only in aria-busy rather than in an invented visual treatment.\n\nEVERY FIGMA COLOUR LITERAL IS DECLINED, ON MEASUREMENT. The three coloured states are blue-200 #3acefa, an unbound amber #d6a452 and accesible-red-dark-theme #ef223a: 10.5:1, 8.57:1 and 4.57:1 on Figma's dark page, and 1.84:1, 2.26:1 and 4.23:1 on a white one. All three fail AA in light mode. The atom is authored dark-only and never had to face that, so the colour AXIS ports and its hexes do not. The contrast test names --color-highlight as the REJECTED token so reinstating it fails, and derives the chosen inks from the component's own cva; mutation-tested by swapping the highlighted ink for text-highlight, which fails and quotes 1.84:1.\n\nALERT HAS NO WARNING INK, BECAUSE THE TOKEN LAYER HAS NONE. --color-text-warning does not exist; only --color-text-warning-disabled does, which is the same gap Badge recorded when upstream asked for a token that was never declared. --color-icon-warning is not a substitute at 2.61:1 on the light page, which is why ChatLog refused it for its warning glyph too. So alert takes --color-text-secondary and the severity is carried by a visually-hidden label instead. That is also the WCAG 1.4.1 answer: alert against default would otherwise be a faint difference in grey. Minting a warning ink from one atom's evidence would be inventing.\n\nNOT MetricList, WHICH IS THE NEAREST EXISTING THING. That is grouped numeric measurement: an uppercase eyebrow per group, a 16px monospace figure, a divider that flips orientation at sm, and keyboard-reachable tooltips. This is a single prose row with a severity. Sharing one component would mean a prop that switches all four. MetricList's own binding already recorded the value-tone gap as deferred for exactly this reason.\n\nTHE RULE IS NOT A CONTROL BOUNDARY. Figma draws gray-800 at 1.39:1 against its page. A result row takes no input and has no pressed or selected state, so WCAG 1.4.11's 3:1 does not apply and --color-border-control is NOT the remedy -- there is no control to bound. The row's own content is what stands clear of the page, which the contrast test measures.\n\nDEFERRED: the 32px height is a fixed frame around a 20px line box with no padding token, the same shape as .badge. Figma also weights the LABEL heavier than the value and draws a rule under every row; MetricList does the reverse on both counts. Neither is a contradiction worth resolving on one atom."
}