{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switcher",
  "type": "registry:ui",
  "title": "Switcher",
  "description": "A pill of pills on Base UI RadioGroup: a well track, options 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/switcher/switcher.tsx",
      "type": "registry:ui",
      "target": "components/metalui/switcher/switcher.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 * SWITCHER (object sheet) on Base UI RadioGroup\n *\n *   rest      a well track; options 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 option 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 SwitcherOption<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 SwitcherProps<V extends string = string> {\n  options: SwitcherOption<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 switcher recipe): a track well, a raised thumb that glides\n * to the chosen option, and options that ink up on hover and when chosen. */\nconst TRACK = 'mu-switcher relative inline-flex p-switcher-pad rounded-pill recipe-switcher data-disabled:opacity-switcher-option-disabled';\nconst THUMB = 'mu-switcher-thumb rounded-pill recipe-switcher-thumb';\nconst OPTION = {\n  compact: 'mu-switcher-option relative z-1 inline-flex items-center gap-switcher-gap h-switcher-option-height px-switcher-option-pad-x m-0 border-0 rounded-pill bg-transparent whitespace-nowrap type-switcher-option text-switcher-option-ink cursor-pointer tap-highlight-none transition-switcher-option hover:text-switcher-option-ink-on data-checked:text-switcher-option-ink-on data-active:text-switcher-option-ink-on focus-visible:switcher-option-focus data-disabled:opacity-switcher-option-disabled data-disabled:cursor-default',\n  regular: 'mu-switcher-option relative z-1 inline-flex items-center gap-switcher-gap h-switcher-option-height-regular px-switcher-option-pad-x m-0 border-0 rounded-pill bg-transparent whitespace-nowrap type-switcher-option text-switcher-option-ink cursor-pointer tap-highlight-none transition-switcher-option hover:text-switcher-option-ink-on data-checked:text-switcher-option-ink-on data-active:text-switcher-option-ink-on focus-visible:switcher-option-focus data-disabled:opacity-switcher-option-disabled data-disabled:cursor-default',\n};\n\n/** The track, thumb and option looks, shared with Tabs: one look for \"one of a few\", two behaviours. */\nexport const trackParts = { TRACK, THUMB, OPTION } as const;\n\n/** A pill of pills: one of a few views or modes, always visible. */\nexport function Switcher<V extends string = string>({ options, value, defaultValue, onValueChange, size = 'regular', disabled, className, ...props }: SwitcherProps<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={OPTION[size]}>\n          {o.icon}\n          {o.label}\n        </Radio.Root>\n      ))}\n    </RadioGroup>\n  );\n}\n\n/** @deprecated Renamed to Switcher. */\nexport const Segmented = Switcher;\n/** @deprecated Renamed to SwitcherProps. */\nexport type SegmentedProps<V extends string = string> = SwitcherProps<V>;\n/** @deprecated Renamed to SwitcherOption. */\nexport type SegmentedOption<V extends string = string> = SwitcherOption<V>;\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/switcher.md. SwiftUI: MetalSwitcher in the MetalUI Swift package."
}