{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breaker",
  "title": "Breaker",
  "description": "A circuit breaker: on, off, or tripped until someone resets it. For spending caps, kill switches and feature flags.",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/breaker.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\nimport { cn } from \"cn\"\n\n/** A panel of breakers, like a fuse box. Label it with BreakerPanelTitle. */\nfunction BreakerPanel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"breaker-panel\"\n      className={cn(\n        \"bevel-metal bevel-object flex flex-col gap-4 rounded-(--bevel-radius-md) p-5 text-(--breaker-lever)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreakerPanelTitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"breaker-panel-title\"\n      className={cn(\n        \"bevel-deboss text-(length:--bevel-label) font-semibold tracking-(--bevel-tracking-label) uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreakerRow({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"breaker-row\" className={cn(\"flex flex-wrap gap-4\", className)} {...props} />\n}\n\ntype BreakerState = \"on\" | \"off\" | \"tripped\"\n\ntype BreakerProps = Omit<SwitchPrimitive.Root.Props, \"children\"> & {\n  /** Tripped: the lever drops to the middle and a red flag shows until it's reset. */\n  tripped?: boolean\n  /** What this breaker protects, shown on the label strip. */\n  label: React.ReactNode\n  /** A second line under the label: the limit, or why it's locked. */\n  description?: React.ReactNode\n}\n\nconst stateText: Record<BreakerState, string> = { on: \"On\", off: \"Off\", tripped: \"Tripped\" }\n\n/**\n * One breaker. A switch with a third, tripped state. Switching a tripped\n * breaker resets it: handle that in onCheckedChange by clearing `tripped`.\n */\nfunction Breaker({\n  className,\n  tripped = false,\n  label,\n  description,\n  checked: checkedProp,\n  defaultChecked,\n  onCheckedChange,\n  disabled,\n  ...props\n}: BreakerProps) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultChecked ?? false)\n  const checked = checkedProp ?? uncontrolled\n  const state: BreakerState = tripped ? \"tripped\" : checked ? \"on\" : \"off\"\n  const labelId = React.useId()\n  const statusId = React.useId()\n  const descriptionId = React.useId()\n\n  return (\n    <div\n      data-slot=\"breaker\"\n      data-state={state}\n      data-disabled={disabled ? \"\" : undefined}\n      className={cn(\"group/breaker flex w-24 flex-col items-center gap-2 text-center\", className)}\n    >\n      <SwitchPrimitive.Root\n        data-slot=\"breaker-switch\"\n        checked={checked && !tripped}\n        onCheckedChange={(next, details) => {\n          if (checkedProp === undefined) setUncontrolled(next)\n          onCheckedChange?.(next, details)\n        }}\n        disabled={disabled}\n        aria-labelledby={labelId}\n        aria-describedby={description ? `${statusId} ${descriptionId}` : statusId}\n        className={cn(\n          \"bevel-recessed relative flex h-(--breaker-slot-height) w-12 items-center justify-center rounded-(--bevel-radius-sm) outline-none\",\n          \"cursor-pointer focus-visible:ring-3 focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-(--breaker-panel)\",\n          \"data-disabled:cursor-not-allowed\"\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden\n          className=\"absolute top-1.5 left-1/2 hidden h-2 w-5 -translate-x-1/2 rounded-full bg-(--breaker-tripped) group-data-[state=tripped]/breaker:block\"\n        />\n        <SwitchPrimitive.Thumb\n          data-slot=\"breaker-lever\"\n          className={cn(\n            \"bevel-raised block h-7 w-8 rounded-(--bevel-radius-xs)\",\n            \"translate-y-(--breaker-throw) data-checked:-translate-y-(--breaker-throw) group-data-[state=tripped]/breaker:translate-y-0\",\n            \"transition-[translate] duration-(--bevel-duration-small) ease-(--bevel-ease-spring) motion-reduce:transition-none\"\n          )}\n        />\n      </SwitchPrimitive.Root>\n      <span className=\"flex items-center gap-1.5 text-(length:--bevel-fine) font-semibold tracking-(--bevel-tracking-print) uppercase\">\n        <span aria-hidden className=\"bevel-led size-1.5 rounded-full\" />\n        <span id={statusId}>{stateText[state]}</span>\n      </span>\n      <span\n        data-slot=\"breaker-label\"\n        className=\"bevel-paper w-full rounded-(--bevel-radius-xs) px-1.5 py-1 text-(length:--bevel-fine) leading-tight font-semibold\"\n      >\n        <span id={labelId}>{label}</span>\n        {description && (\n          <span id={descriptionId} className=\"block font-normal text-(--bevel-paper-muted)\">\n            {description}\n          </span>\n        )}\n      </span>\n    </div>\n  )\n}\n\nexport { BreakerPanel, BreakerPanelTitle, BreakerRow, Breaker }\nexport type { BreakerProps, BreakerState }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--breaker-panel": "oklch(0.36 0.008 260)",
      "--breaker-panel-edge": "oklch(0.22 0.008 260)",
      "--breaker-body": "oklch(0.2 0.006 260)",
      "--breaker-lever": "oklch(0.93 0.008 90)",
      "--breaker-lever-edge": "oklch(0.7 0.01 90)",
      "--breaker-tripped": "oklch(0.6 0.21 27)",
      "--breaker-on": "oklch(0.8 0.17 150)",
      "--breaker-off": "oklch(0.4 0.01 260)",
      "--breaker-throw": "1.25rem",
      "--breaker-slot-height": "4.5rem"
    },
    "[data-slot=\"breaker-panel\"]": {
      "--bevel-material": "var(--breaker-panel)",
      "--bevel-material-edge": "var(--breaker-panel-edge)"
    },
    "[data-slot=\"breaker-switch\"]": {
      "--bevel-material-recess": "var(--breaker-body)"
    },
    "[data-slot=\"breaker-lever\"]": {
      "--bevel-material": "var(--breaker-lever)",
      "--bevel-material-edge": "var(--breaker-lever-edge)"
    },
    "[data-slot=\"breaker\"]": {
      "--bevel-led": "var(--breaker-off)"
    },
    "[data-slot=\"breaker\"][data-state=\"on\"]": {
      "--bevel-led": "var(--breaker-on)"
    },
    "[data-slot=\"breaker\"][data-state=\"tripped\"]": {
      "--bevel-led": "var(--breaker-tripped)"
    }
  },
  "categories": [
    "instruments"
  ],
  "type": "registry:ui"
}