{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "title": "Switch",
  "description": "A switch component",
  "dependencies": [
    "@radix-ui/react-switch"
  ],
  "files": [
    {
      "path": "registry/cs/ui/switch/switch.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { CsSwitchColor } from \"@/registry/cs/ui/checkbox/checkbox\"\n\nconst SWITCH_SIZES = {\n  xs: { track: \"w-6 h-3\", thumb: \"size-2.5\", checkedThumb: \"peer-checked:translate-x-3\" },\n  sm: { track: \"w-8 h-4\", thumb: \"size-3.5\", checkedThumb: \"peer-checked:translate-x-4\" },\n  md: { track: \"w-10 h-5\", thumb: \"size-4\", checkedThumb: \"peer-checked:translate-x-5\" },\n  lg: { track: \"w-12 h-6\", thumb: \"size-5\", checkedThumb: \"peer-checked:translate-x-6\" },\n  xl: { track: \"w-14 h-7\", thumb: \"size-6\", checkedThumb: \"peer-checked:translate-x-7\" },\n}\n\nconst SWITCH_COLORS: Record<CsSwitchColor, string> = {\n  default: \"peer-checked:bg-cs-primary\",\n  dark: \"peer-checked:bg-cs-dark\",\n  green: \"peer-checked:bg-cs-green\",\n  red: \"peer-checked:bg-cs-red\",\n  blue: \"peer-checked:bg-cs-blue\",\n  yellow: \"peer-checked:bg-cs-yellow\",\n}\n\nexport interface SwitchProps extends Omit<React.ComponentProps<\"input\">, \"size\" | \"color\" | \"type\"> {\n  /** Switch label. */\n  label?: string\n  /** Description text shown below the switch. */\n  description?: string\n  /** Switch size. */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Switch color when checked. */\n  color?: CsSwitchColor\n  /** Callback when switch state changes. */\n  onSwitch?: (checked: boolean, value?: string) => void\n}\n\nconst Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n  (\n    {\n      className,\n      label,\n      description,\n      size = \"md\",\n      color = \"default\",\n      disabled,\n      checked,\n      defaultChecked,\n      onChange,\n      onSwitch,\n      id: idProp,\n      name,\n      value,\n      ...props\n    },\n    ref\n  ) => {\n    const autoId = React.useId()\n    const id = idProp ?? autoId\n    const sizeConfig = SWITCH_SIZES[size]\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e)\n      onSwitch?.(e.currentTarget.checked, e.currentTarget.value)\n    }\n\n    return (\n      <div\n        data-slot=\"switch\"\n        data-size={size}\n        className={cn(\"flex flex-col gap-1\", className)}\n      >\n        {description && label && (\n          <label htmlFor={id} className=\"text-sm font-medium text-foreground cursor-pointer\">\n            {label}\n          </label>\n        )}\n        <div className=\"flex items-center gap-2\">\n          <label htmlFor={id} className=\"relative inline-block cursor-pointer\">\n            <input\n              ref={ref}\n              id={id}\n              type=\"checkbox\"\n              className=\"peer sr-only\"\n              data-color={color}\n              checked={checked}\n              defaultChecked={defaultChecked}\n              disabled={disabled}\n              onChange={handleChange}\n              name={name}\n              value={value}\n              {...props}\n            />\n            <span\n              className={cn(\n                \"block rounded-full bg-input transition-colors\",\n                sizeConfig.track,\n                SWITCH_COLORS[color],\n                disabled && \"opacity-50 cursor-not-allowed\"\n              )}\n            />\n            <span\n              className={cn(\n                \"absolute left-0.5 top-1/2 -translate-y-1/2 block rounded-full bg-white shadow-sm transition-transform\",\n                sizeConfig.thumb,\n                sizeConfig.checkedThumb\n              )}\n            />\n          </label>\n          {(description ? !label : true) && label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"text-sm text-foreground cursor-pointer select-none\",\n                disabled && \"opacity-50 cursor-not-allowed\"\n              )}\n            >\n              {description ?? label}\n            </label>\n          )}\n        </div>\n      </div>\n    )\n  }\n)\nSwitch.displayName = \"Switch\"\n\nexport { Switch, SWITCH_SIZES }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}