{
  "name": "HelpText",
  "type": "component",
  "description": "Hint or validation text below a form control, announced when it reports an error.",
  "export": "HelpText",
  "path": "@gtmi/strix-react/atoms/help-text",
  "figma": null,
  "figmaAbsent": "shadcn composition. Figma draws no help-text role; `.legal-text` is a specific consent disclaimer.",
  "props": [
    {
      "name": "id",
      "type": "string",
      "required": true,
      "description": "Referenced from the input's aria-describedby. Required because help text nothing points at is decoration."
    },
    {
      "name": "state",
      "type": "completed | default | error | info | success | warning",
      "default": "default",
      "description": "Color treatment. `error` also sets role=\"alert\" so the message is announced when it appears."
    },
    {
      "name": "as",
      "type": "h1 | h2 | h3 | h4 | h5 | h6 | span | label | p | div",
      "default": "div",
      "description": "HTML element to render."
    },
    {
      "name": "variant",
      "type": "TypographyVariantsType",
      "default": "body-s",
      "description": "Override the typography role."
    },
    {
      "name": "marginTop",
      "type": "boolean",
      "default": "false",
      "description": "Add the standard gap above, for help text sitting directly under a field."
    },
    {
      "name": "className",
      "type": "string",
      "description": "Merged through cn()."
    }
  ],
  "ai_tags": ["help-text", "hint", "validation", "form", "primitive"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-text-secondary",
    "--color-text-error",
    "--color-text-success",
    "--color-text-primary",
    "--spacing-gap-200"
  ],
  "notes": "role=\"alert\" on error is the reason to use this rather than a styled div. Only three of the six states carry their own color: info, warning and completed read as primary text, because the field already signals the state and coloring the hint too makes a form look alarming."
}