{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-lever",
  "title": "Toggle lever",
  "description": "An everyday on/off switch, as a bat-handle toggle on a small plate. The lever swings through its bushing toward the side that's on and settles with a little spring; a lamp at the end of the plate lights. For settings rows. (For banks of config bits use DIP switches; for dangerous actions, the guarded switch.)",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json",
    "https://bevel-ui.vercel.app/r/feedback.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/toggle-lever.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Field } from \"@base-ui/react/field\"\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\nimport { cn } from \"cn\"\nimport { useBevelFeedback } from \"@/lib/feedback\"\n\ntype ToggleLeverProps = Omit<SwitchPrimitive.Root.Props, \"children\"> & {\n  /** md prints OFF and ON on the plate; sm is the lever and lamp alone, for dense rows. */\n  size?: \"sm\" | \"md\"\n}\n\n/**\n * An everyday on/off switch, as a bat-handle toggle on a small plate. The\n * lever swings through the bushing toward the side that's on, settling with\n * a little spring, and a lamp beside it lights. A Base UI Switch: Space\n * flips it.\n */\nfunction ToggleLever({ className, size = \"md\", onCheckedChange, ...props }: ToggleLeverProps) {\n  const feedback = useBevelFeedback()\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"toggle-lever\"\n      data-size={size}\n      onCheckedChange={(checked, details) => {\n        feedback.toggle()\n        onCheckedChange?.(checked, details)\n      }}\n      className={cn(\n        \"bevel-metal inline-flex h-6 shrink-0 cursor-pointer items-center gap-1.5 rounded-(--bevel-radius-xs) px-1.5 select-none\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-(--toggle-lever-focus) focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-60\",\n        \"in-data-[slot=toggle-lever-field]:col-start-2 in-data-[slot=toggle-lever-field]:row-span-2 in-data-[slot=toggle-lever-field]:row-start-1 in-data-[slot=toggle-lever-field]:self-center\",\n        className\n      )}\n      {...props}\n    >\n      {size === \"md\" && (\n        <span aria-hidden data-slot=\"toggle-lever-legend\" data-side=\"off\" className=\"toggle-lever-print\">\n          Off\n        </span>\n      )}\n      <span aria-hidden data-slot=\"toggle-lever-throw\" className=\"relative h-full w-(--toggle-lever-throw)\">\n        <SwitchPrimitive.Thumb\n          data-slot=\"toggle-lever-bat\"\n          className={cn(\n            \"toggle-lever-bat absolute top-1/2 left-1/2 flex h-2 w-(--toggle-lever-reach) origin-left -translate-y-1/2 items-center\",\n            // Off points left, on points right: the bat swings out toward you and over, foreshortening on the way.\n            \"-scale-x-100 data-checked:scale-x-100\",\n            \"transition-[scale] duration-(--bevel-duration-move) ease-(--bevel-ease-spring) motion-reduce:transition-none\"\n          )}\n        >\n          <span className=\"h-1 flex-1 rounded-full bg-(--toggle-lever-chrome-shaft)\" />\n          <span className=\"toggle-lever-ball size-2 shrink-0 rounded-full\" />\n        </SwitchPrimitive.Thumb>\n        <span data-slot=\"toggle-lever-bushing\" className=\"toggle-lever-bushing absolute top-1/2 left-1/2 size-2.5 -translate-1/2 rounded-full\" />\n      </span>\n      {size === \"md\" && (\n        <span aria-hidden data-slot=\"toggle-lever-legend\" data-side=\"on\" className=\"toggle-lever-print\">\n          On\n        </span>\n      )}\n      <span aria-hidden data-slot=\"toggle-lever-lamp\" className=\"bevel-led size-1.5 shrink-0 rounded-full\" />\n    </SwitchPrimitive.Root>\n  )\n}\n\n/**\n * A settings row: label and description on the left, the lever on the right.\n * Base UI Field, so the label names the switch and the description describes it.\n */\nfunction ToggleLeverField({ className, ...props }: Field.Root.Props) {\n  return (\n    <Field.Root\n      data-slot=\"toggle-lever-field\"\n      className={cn(\"grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ToggleLeverLabel({ className, ...props }: Field.Label.Props) {\n  return (\n    <Field.Label\n      data-slot=\"toggle-lever-label\"\n      className={cn(\"col-start-1 text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ToggleLeverDescription({ className, ...props }: Field.Description.Props) {\n  return (\n    <Field.Description\n      data-slot=\"toggle-lever-description\"\n      className={cn(\"col-start-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { ToggleLever, ToggleLeverField, ToggleLeverLabel, ToggleLeverDescription }\nexport type { ToggleLeverProps }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--toggle-lever-plate": "oklch(0.88 0.004 260)",
      "--toggle-lever-plate-edge": "oklch(0.68 0.006 260)",
      "--toggle-lever-print": "oklch(0.42 0.01 260)",
      "--toggle-lever-print-lit": "oklch(0.2 0.01 260)",
      "--toggle-lever-print-size": "0.5625rem",
      "--toggle-lever-chrome": "oklch(0.97 0.003 260)",
      "--toggle-lever-chrome-shaft": "oklch(0.8 0.004 260)",
      "--toggle-lever-chrome-edge": "oklch(0.55 0.006 260)",
      "--toggle-lever-bushing": "oklch(0.6 0.006 260)",
      "--toggle-lever-lamp-off": "oklch(0.55 0.01 260)",
      "--toggle-lever-lamp-on": "oklch(0.8 0.17 145)",
      "--toggle-lever-focus": "oklch(0.76 0.15 68)",
      "--toggle-lever-cast": "0 1px 0.5px oklch(0 0 0 / 0.45)",
      "--toggle-lever-glint": "oklch(1 0 0)",
      "--toggle-lever-lamp-shade": "oklch(0 0 0 / 0.35)",
      "--toggle-lever-throw": "1.5rem",
      "--toggle-lever-reach": "0.6875rem"
    },
    ".dark": {
      "--toggle-lever-plate": "oklch(0.34 0.006 260)",
      "--toggle-lever-plate-edge": "oklch(0.22 0.006 260)",
      "--toggle-lever-print": "oklch(0.66 0.01 260)",
      "--toggle-lever-print-lit": "oklch(0.95 0.005 260)",
      "--toggle-lever-bushing": "oklch(0.24 0.006 260)",
      "--toggle-lever-lamp-off": "oklch(0.3 0.01 260)"
    },
    "[data-slot=\"toggle-lever\"]": {
      "--bevel-material": "var(--toggle-lever-plate)",
      "--bevel-material-edge": "var(--toggle-lever-plate-edge)",
      "--bevel-led": "var(--toggle-lever-lamp-off)"
    },
    "[data-slot=\"toggle-lever\"][data-checked]": {
      "--bevel-led": "var(--toggle-lever-lamp-on)"
    },
    "[data-slot=\"toggle-lever\"]:not([data-checked]) [data-slot=\"toggle-lever-lamp\"]": {
      "box-shadow": "inset 0 -1px 1px var(--toggle-lever-lamp-shade), 0 1px 0 var(--bevel-highlight)"
    },
    "@utility toggle-lever-print": {
      "font-size": "var(--toggle-lever-print-size)",
      "font-weight": "700",
      "line-height": "1",
      "letter-spacing": "var(--bevel-tracking-label)",
      "text-transform": "uppercase",
      "color": "var(--toggle-lever-print)",
      "text-shadow": "var(--bevel-deboss)"
    },
    "[data-slot=\"toggle-lever\"][data-checked] [data-side=\"on\"], [data-slot=\"toggle-lever\"][data-unchecked] [data-side=\"off\"]": {
      "color": "var(--toggle-lever-print-lit)"
    },
    "@utility toggle-lever-bat": {
      "filter": "drop-shadow(var(--toggle-lever-cast))"
    },
    "@utility toggle-lever-ball": {
      "background-color": "var(--toggle-lever-chrome)",
      "background-image": "radial-gradient(circle at 35% 30%, var(--toggle-lever-glint), transparent 55%)",
      "box-shadow": "inset 0 0 0 0.5px var(--toggle-lever-chrome-edge)"
    },
    "@utility toggle-lever-bushing": {
      "background-color": "var(--toggle-lever-bushing)",
      "background-image": "radial-gradient(circle at 50% 35%, var(--bevel-highlight-strong), transparent 60%)",
      "box-shadow": "inset 0 0 0 1px var(--toggle-lever-chrome-edge), 0 1px 0 var(--bevel-highlight)"
    },
    "@media (forced-colors: active)": {
      "[data-slot=\"toggle-lever\"]": {
        "border": "1px solid CanvasText"
      },
      "[data-slot=\"toggle-lever-bat\"] > *": {
        "background": "CanvasText"
      },
      "[data-slot=\"toggle-lever\"][data-checked] [data-slot=\"toggle-lever-lamp\"]": {
        "background": "Highlight"
      }
    }
  },
  "categories": [
    "essentials"
  ],
  "type": "registry:ui"
}