{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "type": "registry:ui",
  "title": "Toggle",
  "description": "A latching push button: the button cap with a lamp; pressing sinks it past the catch, releasing into on settles it at the latch on the part spring with the lamp lit. Toggle group puts the keys in a row.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/toggle/toggle.tsx",
      "type": "registry:ui",
      "target": "components/metalui/toggle/toggle.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Toggle as BaseToggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';\nimport { buttonParts } from '../button/button';\nimport { Led } from '../led/led';\n\n/* ─────────────────────────────────────────────────────────\n * TOGGLE and TOGGLE GROUP, latching push buttons, on Base UI Toggle and ToggleGroup\n *\n *   rest      the button cap with an unlit lamp at the start of its label: it latches\n *   press     the cap sinks past the catch (2) in 50 ms, linear, in the pressed look\n *   → on      on release it rises to the latch (1) on the part spring, overshooting a touch\n *             against the catch; it keeps the pressed look and the lamp lights\n *   → off     on release it rises all the way on the release spring; the lamp goes dark\n *   focus     the green ring; Space or Enter latch and unlatch\n *   group     the same keys in a row; arrows move between them; one or several can latch\n *   disabled  40 %\n * Reduce Motion: the latch snaps to its depth (the part spring is instant); the lamp still lights.\n * The cap is the button recipe and the lamp the LED part; the toggle recipe adds depths and motion.\n * ───────────────────────────────────────────────────────── */\n\nconst KEY = `mu-toggle ${buttonParts.FRAME} ${buttonParts.REGULAR} text-ink recipe-button toggle-travel data-pressed:recipe-button-pressed not-data-disabled:active:recipe-button-pressed`;\nconst GROUP = 'mu-toggle-group inline-flex flex-wrap items-center gap-toggle-gap';\n\nexport interface ToggleProps extends Omit<BaseToggle.Props, 'className'> {\n  /** Hide the lamp (an icon-only key whose icon already shows its state). */\n  lamp?: boolean;\n  className?: string;\n}\n\n/** A button that latches: pressed stays pressed, with its lamp lit. */\nexport const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(function Toggle({ lamp = true, className, children, ...props }, ref) {\n  return (\n    <BaseToggle\n      ref={ref}\n      className={className ? `${KEY} ${className}` : KEY}\n      render={(p, state) => (\n        <button {...p}>\n          {lamp && <Led kind={state.pressed ? 'live' : 'off'} size=\"small\" />}\n          {children}\n        </button>\n      )}\n      {...props}\n    />\n  );\n});\n\nexport interface ToggleGroupProps extends Omit<BaseToggleGroup.Props, 'className'> {\n  className?: string;\n}\n\n/** Toggles in a row. `multiple` lets several latch at once; otherwise latching one releases the other. */\nexport function ToggleGroup({ className, ...props }: ToggleGroupProps) {\n  return <BaseToggleGroup className={className ? `${GROUP} ${className}` : GROUP} {...props} />;\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/toggle.md. SwiftUI: MetalToggle in the MetalUI Swift package."
}