{
  "name": "InputGroup",
  "type": "component",
  "description": "A field with parts attached inside its boundary: prefixes, units, icons, or a button.",
  "export": "InputGroup",
  "path": "@gtmi/strix-react/atoms/input-group",
  "figma": null,
  "figmaAbsent": "shadcn composition. Figma draws `.input-cellphone` as two separate boxes, which is why that atom is NOT this component.",
  "parts": [
    "InputGroup",
    "InputGroupAddon",
    "InputGroupButton",
    "InputGroupInput",
    "InputGroupText",
    "InputGroupTextarea"
  ],
  "props": [
    {
      "name": "className",
      "type": "string",
      "description": "Applied to the container, which is what draws the boundary and owns the focus ring."
    }
  ],
  "ai_tags": ["input", "input-group", "addon", "form", "composition"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-surface-secondary",
    "--color-surface-base",
    "--color-surface-disabled",
    "--color-border-control",
    "--color-border-accent",
    "--color-text-primary",
    "--color-text-secondary",
    "--color-text-tertiary",
    "--color-text-disabled-on-surface",
    "--color-icon-secondary",
    "--spacing-borders-sm",
    "--spacing-small",
    "--spacing-padding-vertical-sm",
    "--spacing-gap-100",
    "--spacing-touch-target",
    "--radius-large",
    "--text-size-body-small"
  ],
  "notes": "The composable counterpart to Input's startAddon/endAddon props, which stay as they are — they cover the common case and Field and chat-input already use them. Those props take one node in a fixed position; this takes parts, so a caller can put two addons on one side, a button inside the boundary, or a textarea instead of an input. The container draws the boundary and owns the focus ring via has-[input:focus-visible]:, so the inner control is borderless: two boundaries read as a field inside a field. InputGroupButton overrides Button's pill to rounded-none, because a pill dropped inside a field reads as a separate control. InputGroupText is deliberately not aria-hidden: \"https://\" or \"kg\" is part of what the field means."
}