{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented",
  "type": "registry:ui",
  "title": "Segmented control",
  "description": "A pill of pills on Base UI RadioGroup: a well track, segments on the height ladder, and a raised thumb that glides to the selection on the part spring.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/segmented/segmented.tsx",
      "type": "registry:ui",
      "target": "components/metalui/segmented/segmented.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { RadioGroup } from '@base-ui/react/radio-group';\nimport { Radio } from '@base-ui/react/radio';\nimport { SlidingIndicator } from '../../motion/indicator';\n\n/* ─────────────────────────────────────────────────────────\n * SEGMENTED CONTROL (object sheet) on Base UI RadioGroup\n *\n *   rest      a well track; segments in ink2, the selected one a raised thumb in ink\n *   hover     the label turns ink (settle)\n *   select    the thumb glides to the new segment on the part spring (a track with\n *             ends, so it may overshoot against the stop); labels recolour on settle\n *   focus     a 1.5 ring with no offset (a dense strip); arrows move the selection\n *   disabled  40 %\n * First paint and resizing place the thumb without motion. Reduce Motion: it moves at once.\n * ───────────────────────────────────────────────────────── */\n\nexport interface SegmentedOption<V extends string = string> {\n  value: V;\n  label: React.ReactNode;\n  /** A leading glyph at the size the height gives (12 in 24, 14 in 28). */\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SegmentedProps<V extends string = string> {\n  options: SegmentedOption<V>[];\n  value?: V;\n  defaultValue?: V;\n  onValueChange?: (value: V) => void;\n  /** compact is 24 tall (in a lens bar, a strip), regular 28. */\n  size?: 'compact' | 'regular';\n  disabled?: boolean;\n  'aria-label': string;\n  className?: string;\n}\n\n/* Styled with the theme's utilities (the segmented recipe): a track well, a raised thumb that glides\n * to the chosen segment, and segments that ink up on hover and when chosen. */\nconst TRACK = 'mu-segmented relative inline-flex p-segmented-pad rounded-pill recipe-segmented data-disabled:opacity-segmented-segment-disabled';\nconst THUMB = 'mu-segmented-thumb rounded-pill recipe-segmented-thumb';\nconst SEGMENT = {\n  compact: 'mu-segment relative z-1 inline-flex items-center gap-segmented-gap h-segmented-segment-height px-segmented-segment-pad-x m-0 border-0 rounded-pill bg-transparent whitespace-nowrap type-segmented-segment text-segmented-segment-ink cursor-pointer tap-highlight-none transition-segmented-segment hover:text-segmented-segment-ink-on data-checked:text-segmented-segment-ink-on focus-visible:segment-focus data-disabled:opacity-segmented-segment-disabled data-disabled:cursor-default',\n  regular: 'mu-segment relative z-1 inline-flex items-center gap-segmented-gap h-segmented-segment-height-regular px-segmented-segment-pad-x m-0 border-0 rounded-pill bg-transparent whitespace-nowrap type-segmented-segment text-segmented-segment-ink cursor-pointer tap-highlight-none transition-segmented-segment hover:text-segmented-segment-ink-on data-checked:text-segmented-segment-ink-on focus-visible:segment-focus data-disabled:opacity-segmented-segment-disabled data-disabled:cursor-default',\n};\n\n/** A pill of pills: one of a few views or modes, always visible. */\nexport function Segmented<V extends string = string>({ options, value, defaultValue, onValueChange, size = 'regular', disabled, className, ...props }: SegmentedProps<V>) {\n  return (\n    <RadioGroup\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={(v) => onValueChange?.(v as V)}\n      disabled={disabled}\n      aria-label={props['aria-label']}\n      data-size={size}\n      className={className ? `${TRACK} ${className}` : TRACK}\n    >\n      <SlidingIndicator className={THUMB} />\n      {options.map((o) => (\n        <Radio.Root key={o.value} value={o.value} disabled={o.disabled} className={SEGMENT[size]}>\n          {o.icon}\n          {o.label}\n        </Radio.Root>\n      ))}\n    </RadioGroup>\n  );\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/segmented.md. SwiftUI: MetalSegmented in the MetalUI Swift package."
}