{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "core-toggle-headless",
  "type": "registry:ui",
  "title": "Toggle Headless",
  "description": "The unstyled switch primitive a toggle is built on: controlled and uncontrolled state, the full role=\"switch\" contract, the click and keyboard paths, and the pressed flag every hardware-style face needs. Renders no appearance — a render prop hands your face the state.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/toggle-headless.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/toggle-headless\n * Copyright © [Maru](https://maru.audio)\n *\n * Maru UI Kit — https://maru.audio/ui-kit\n *\n * Installed from the Maru UI registry. This file is yours now: edit it\n * freely, it will not be overwritten unless you re-run the add command.\n *\n * Keep this item’s companion files and CSS imports together. Dependencies\n * declared by the registry are installed with the source.\n */\n/**\n * ToggleHeadless — the unstyled switch primitive a toggle is built on.\n *\n * The same split the knob already has: this owns the *behaviour* — controlled\n * and uncontrolled state, the `role=\"switch\"` contract, the click and keyboard\n * paths, and the transient \"finger is down\" flag — and renders no appearance\n * whatsoever. Children draw the switch.\n *\n * That flag is the reason this is a render prop rather than plain children: a\n * hardware-style switch has to look pressed while the pointer is down, and\n * every face needs it, so the primitive tracks it once instead of each face\n * wiring its own pointer listeners. `on` comes through the same way, so a face\n * is a pure function of state and never touches React state itself.\n *\n * What it deliberately does *not* own: labels, readouts and MIDI CC. Those sit\n * above it in `ToggleSwitch`, exactly as they do above `KnobHeadless`, so a\n * custom switch can opt into as much or as little of that as it wants.\n */\n\nimport { forwardRef, useState } from \"react\"\nimport type { ComponentProps, KeyboardEvent, ReactNode } from \"react\"\n\n/** What a face is handed on every render. */\nexport interface ToggleRenderState {\n  /** Current state. */\n  on: boolean\n  /** True while the pointer (or Space/Enter) is held down. */\n  pressed: boolean\n  /** True when the switch cannot be operated. */\n  disabled: boolean\n}\n\ntype NativeButtonProps = Omit<\n  ComponentProps<\"button\">,\n  \"role\" | \"aria-checked\" | \"type\" | \"children\" | \"onChange\"\n>\n\nexport interface ToggleHeadlessProps extends NativeButtonProps {\n  /** Controlled state. Omit for uncontrolled operation. */\n  checked?: boolean\n  /** Initial state when uncontrolled. */\n  defaultChecked?: boolean\n  onChange?: (checked: boolean) => void\n  disabled?: boolean\n  children: (state: ToggleRenderState) => ReactNode\n}\n\nexport const ToggleHeadless = forwardRef<HTMLButtonElement, ToggleHeadlessProps>(\n  function ToggleHeadless(\n    { checked, defaultChecked = false, onChange, disabled = false, children, ...rest },\n    forwardedRef,\n  ) {\n    const isControlled = checked !== undefined\n    const [internal, setInternal] = useState(defaultChecked)\n    const [pressed, setPressed] = useState(false)\n    const current = isControlled ? checked : internal\n\n    const toggle = () => {\n      if (disabled) return\n      const next = !current\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    return (\n      <button\n        ref={forwardedRef}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={current}\n        aria-disabled={disabled || undefined}\n        disabled={disabled}\n        onClick={toggle}\n        onPointerDown={() => setPressed(true)}\n        onPointerUp={() => setPressed(false)}\n        onPointerLeave={() => setPressed(false)}\n        // Space and Enter fire click natively; this only mirrors the pressed\n        // look so a keyboard operator sees the same feedback as a mouse one.\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === \" \" || event.key === \"Enter\") setPressed(true)\n        }}\n        onKeyUp={() => setPressed(false)}\n        {...rest}\n      >\n        {children({ on: current, pressed, disabled })}\n      </button>\n    )\n  },\n)\n",
      "type": "registry:component",
      "target": "@ui/toggle-headless.tsx"
    }
  ]
}