{
  "name": "SegmentedControlItem",
  "source": "src/components/SegmentedControl.tsx",
  "propsType": "SegmentedControlItemProps",
  "import": "import { SegmentedControlItem } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One segment: a radio drawn as part of the track, with an optional icon.",
  "useWhen": [
    "inside a SegmentedControl, once per option"
  ],
  "useInstead": [
    {
      "when": "outside a segmented track",
      "use": "Radio"
    }
  ],
  "slots": {
    "children": {
      "accepts": "text",
      "note": "one or two words. Segments do not wrap, and a long label truncates"
    },
    "icon": {
      "accepts": "Icon",
      "note": "decorative beside a label; with no label, pass aria-label"
    }
  },
  "a11y": {
    "requires": [
      "`aria-label` when the segment has an icon and no text — the accessible name otherwise comes from its children"
    ]
  },
  "antiPatterns": [
    {
      "dont": "using it outside SegmentedControl",
      "why": "it reads its selection state from the group, and throws without one"
    }
  ],
  "stylesheet": "src/styles/segmented-control.css",
  "tokens": [
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-medium",
    "--icon-size-md",
    "--icon-size-sm",
    "--ion-duration-base",
    "--ion-ease-out",
    "--ion-segmented-font-size",
    "--ion-segmented-icon-size",
    "--ion-segmented-item-gap",
    "--ion-segmented-item-height",
    "--ion-segmented-item-padding-x",
    "--ion-segmented-line-height",
    "--radius-lg",
    "--radius-md",
    "--ring-focus",
    "--spacing-12",
    "--spacing-16",
    "--spacing-2",
    "--spacing-20",
    "--spacing-24",
    "--spacing-32",
    "--spacing-4",
    "--spacing-40",
    "--spacing-6",
    "--spacing-8",
    "--surface-default",
    "--surface-hover",
    "--surface-muted",
    "--surface-page",
    "--text-default",
    "--text-disabled",
    "--text-tertiary",
    "--type-body",
    "--type-body-lg",
    "--type-body-lg-line-height",
    "--type-body-line-height",
    "--type-body-sm",
    "--type-body-sm-line-height"
  ],
  "props": {
    "value": {
      "type": "string",
      "required": true,
      "origin": "own",
      "description": "The value this segment selects."
    },
    "icon": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Icon before the label. `aria-hidden` is applied for you."
    },
    "aria-label": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Required when the segment has no visible text — an icon-only segment is\notherwise announced as an unnamed radio button."
    },
    "isDisabled": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "default": false
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    },
    "className": {
      "type": "string | undefined",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 6,
    "aria": 0,
    "dom": 0,
    "other": 0
  }
}