{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "title": "Switch",
  "description": "A glossy black ON/OFF switch with a big domed knob across a colored track.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/clover-ui/switch.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst switchVariants = cva(\n  [\n    \"group relative inline-flex h-[4.2em] w-[8.2em] shrink-0 cursor-pointer rounded-full p-[0.3em] outline-none select-none\",\n    \"bg-[linear-gradient(145deg,#353737_0%,#111212_18%,#080909_40%,#434545_72%,#1b1c1c_88%,#0b0c0c_100%)]\",\n    \"shadow-[0_0.12em_0.18em_rgb(0_0_0/0.55),0_0.28em_0.5em_rgb(0_0_0/0.4),0_0.05em_0.8em_rgb(0_0_0/0.3),inset_0_0.025em_0.025em_rgb(255_255_255/0.12),inset_0_-0.03em_0.04em_rgb(0_0_0/0.8)]\",\n    \"focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-[6px]\",\n        default: \"text-[8px]\",\n        lg: \"text-[11px]\",\n      },\n    },\n    defaultVariants: { size: \"default\" },\n  },\n);\n\nexport type SwitchSize = NonNullable<VariantProps<typeof switchVariants>[\"size\"]>;\n\nexport interface SwitchProps\n  extends\n    Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\" | \"onChange\" | \"color\">,\n    VariantProps<typeof switchVariants> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  showLabels?: boolean;\n  color?: string;\n}\n\nconst KNOB = \"3.6em\";\nconst TRACK_SURFACE = {\n  backgroundImage:\n    \"linear-gradient(180deg, rgb(255 255 255 / 0.07), transparent 38%), radial-gradient(ellipse at 27% 72%, rgb(255 255 255 / 0.035), transparent 65%), linear-gradient(180deg, rgb(0 0 0 / 0.13), transparent 36%, transparent 70%, rgb(0 0 0 / 0.06))\",\n  boxShadow:\n    \"inset 0 0.1em 0.18em rgb(0 0 0 / 0.58), inset 0.055em 0 0.1em rgb(0 0 0 / 0.18), inset 0 -0.025em 0.07em rgb(0 0 0 / 0.2)\",\n} satisfies React.CSSProperties;\n\nconst BEVEL_MASK = {\n  maskImage: \"linear-gradient(#000 0 0), linear-gradient(#000 0 0)\",\n  maskClip: \"content-box, border-box\",\n  maskComposite: \"exclude\",\n} satisfies React.CSSProperties;\n\nfunction Switch({\n  checked,\n  defaultChecked = true,\n  onCheckedChange,\n  showLabels = true,\n  color = \"#42aa78\",\n  size = \"default\",\n  className,\n  style,\n  disabled,\n  ...props\n}: SwitchProps) {\n  const [inner, setInner] = React.useState(defaultChecked);\n  const on = checked ?? inner;\n\n  const toggle = () => {\n    if (checked === undefined) setInner(!on);\n    onCheckedChange?.(!on);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={on}\n      aria-label={props[\"aria-label\"] ?? (on ? \"ON\" : \"OFF\")}\n      disabled={disabled}\n      className={cn(switchVariants({ size }), className)}\n      style={{ \"--ds-color\": color, ...style } as React.CSSProperties}\n      onClick={toggle}\n      {...props}\n    >\n      <span\n        aria-hidden\n        className=\"pointer-events-none absolute inset-[0.025em] rounded-full p-[0.025em]\"\n        style={{\n          ...BEVEL_MASK,\n          background:\n            \"linear-gradient(165deg, rgb(255 255 255 / 0.42) 4%, rgb(255 255 255 / 0.08) 28%, transparent 42%, rgb(255 255 255 / 0.05) 72%, transparent 88%)\",\n        }}\n      />\n      <span\n        aria-hidden\n        className=\"pointer-events-none absolute inset-[0.035em] rounded-full p-[0.18em]\"\n        style={{\n          ...BEVEL_MASK,\n          background: \"linear-gradient(180deg, rgb(255 255 255 / 0.15), transparent 0.3em)\",\n        }}\n      />\n      <span\n        aria-hidden\n        className=\"pointer-events-none absolute inset-[0.19em] rounded-full bg-[#050606]\"\n        style={{\n          boxShadow: \"0 0.025em 0.035em rgb(255 255 255 / 0.09), inset 0 0.05em 0.08em #000\",\n        }}\n      />\n      <span\n        className=\"relative flex size-full items-center overflow-hidden rounded-full bg-[#1c1c1c]\"\n        style={{ boxShadow: \"0 0 0 0.035em #020303\" }}\n      >\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 rounded-full bg-[var(--ds-color)]\"\n          style={{ clipPath: on ? \"inset(0 1.8em 0 0)\" : \"inset(0 100% 0 0)\" }}\n        />\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 rounded-full\"\n          style={TRACK_SURFACE}\n        />\n        {showLabels && (\n          <>\n            <span\n              aria-hidden\n              className=\"pointer-events-none absolute inset-y-0 flex items-center justify-center font-bold tracking-[0.01em] whitespace-nowrap text-white\"\n              style={{ left: 0, right: KNOB }}\n            >\n              <span className=\"text-[1.35em]\">ON</span>\n            </span>\n            <span\n              aria-hidden\n              className=\"pointer-events-none absolute inset-y-0 flex items-center justify-center font-bold tracking-[0.01em] whitespace-nowrap text-white/60\"\n              style={{ left: KNOB, right: 0 }}\n            >\n              <span className=\"text-[1.35em]\">OFF</span>\n            </span>\n          </>\n        )}\n        <span\n          aria-hidden\n          className={cn(\"relative z-10 shrink-0 rounded-full\", on && \"translate-x-[4em]\")}\n          style={{\n            width: KNOB,\n            height: KNOB,\n            background:\n              \"conic-gradient(from 215deg, #060707 0deg, #121414 38deg, #4c4f4f 91deg, #7e8181 135deg, #333535 166deg, #4b4e4e 210deg, #121313 252deg, #090a0a 300deg, #060707 360deg)\",\n            boxShadow:\n              \"0 0 0 0.065em #080909, 0 0.1em 0.12em rgb(0 0 0 / 0.75), -0.16em 0.04em 0.25em rgb(0 0 0 / 0.38), -0.3em 0.05em 0.55em rgb(0 0 0 / 0.28), inset 0 0.035em 0.06em rgb(255 255 255 / 0.22)\",\n          }}\n        >\n          <span\n            className=\"absolute top-[0.12em] right-[0.19em] bottom-[0.075em] left-[0.055em] overflow-hidden rounded-full\"\n            style={{\n              background:\n                \"radial-gradient(ellipse at 36% 28%, #222424 0%, #1d1e1e 62%, #202222 100%)\",\n              boxShadow:\n                \"inset 0 0.065em 0.09em rgb(0 0 0 / 0.85), inset -0.035em -0.025em 0.06em rgb(255 255 255 / 0.07), 0 0.025em 0.035em rgb(0 0 0 / 0.8)\",\n            }}\n          >\n            <span\n              className=\"absolute inset-0 rounded-full p-[0.08em]\"\n              style={{\n                ...BEVEL_MASK,\n                background:\n                  \"conic-gradient(from 205deg, transparent 0deg, transparent 100deg, rgb(255 255 255 / 0.08) 140deg, rgb(255 255 255 / 0.22) 185deg, rgb(255 255 255 / 0.26) 215deg, transparent 260deg, transparent 360deg)\",\n              }}\n            />\n          </span>\n        </span>\n      </span>\n    </button>\n  );\n}\n\nexport { Switch, switchVariants };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}