{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox",
  "description": "A simple checkbox component",
  "dependencies": [
    "@radix-ui/react-checkbox",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/cs/ui/checkbox/checkbox.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/** Checkbox switch color. */\nexport type CsSwitchColor = \"default\" | \"dark\" | \"green\" | \"red\" | \"blue\" | \"yellow\"\n\nconst CHECKBOX_SIZES = {\n  xs: \"size-3.5\",\n  sm: \"size-4\",\n  md: \"size-[18px]\",\n  lg: \"size-[22px]\",\n  xl: \"size-[27px]\",\n}\n\nconst CHECKBOX_ICON_SIZES = {\n  xs: \"size-2.5\",\n  sm: \"size-3\",\n  md: \"size-3.5\",\n  lg: \"size-4\",\n  xl: \"size-5\",\n}\n\nconst LABEL_SIZES = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n  xl: \"text-lg\",\n}\n\nconst colorMap: Record<CsSwitchColor, string> = {\n  default: \"accent-cs-primary\",\n  dark: \"accent-cs-dark\",\n  green: \"accent-cs-green\",\n  red: \"accent-cs-red\",\n  blue: \"accent-cs-blue\",\n  yellow: \"accent-cs-yellow\",\n}\n\nconst checkedBg: Record<CsSwitchColor, string> = {\n  default: \"bg-cs-primary border-cs-primary\",\n  dark: \"bg-cs-dark border-cs-dark\",\n  green: \"bg-cs-green border-cs-green\",\n  red: \"bg-cs-red border-cs-red\",\n  blue: \"bg-cs-blue border-cs-blue\",\n  yellow: \"bg-cs-yellow border-cs-yellow\",\n}\n\nexport interface CheckboxProps extends Omit<React.ComponentProps<\"input\">, \"size\" | \"color\" | \"type\"> {\n  /** Label text. */\n  label?: string\n  /** Checkbox size. */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Checkbox color when checked. */\n  color?: CsSwitchColor\n  /** Is bold label text. */\n  bold?: boolean\n  /** Label position relative to checkbox. Default is \"right\". */\n  labelPosition?: \"left\" | \"right\"\n  /** Indeterminate state. */\n  indeterminate?: boolean\n  /** Callback when checked state changes. */\n  onCheck?: (checked: boolean, value?: string) => void\n}\n\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      className,\n      label,\n      size = \"md\",\n      color = \"default\",\n      bold = false,\n      labelPosition = \"right\",\n      indeterminate = false,\n      checked,\n      defaultChecked,\n      disabled,\n      onChange,\n      onCheck,\n      id: idProp,\n      ...props\n    },\n    ref\n  ) => {\n    const autoId = React.useId()\n    const id = idProp ?? autoId\n    const innerRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = (node: HTMLInputElement | null) => {\n      (innerRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n      if (typeof ref === \"function\") ref(node)\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n    }\n\n    React.useEffect(() => {\n      if (innerRef.current) {\n        innerRef.current.indeterminate = indeterminate\n      }\n    }, [indeterminate])\n\n    const [isChecked, setIsChecked] = React.useState(defaultChecked ?? false)\n    const controlledChecked = checked !== undefined ? checked : isChecked\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (checked === undefined) setIsChecked(e.currentTarget.checked)\n      onChange?.(e)\n      onCheck?.(e.currentTarget.checked, e.currentTarget.value)\n    }\n\n    return (\n      <label\n        data-slot=\"checkbox\"\n        htmlFor={id}\n        className={cn(\n          \"inline-flex items-center gap-2 select-none\",\n          labelPosition === \"left\" && \"flex-row-reverse\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          !disabled && \"cursor-pointer\",\n          className\n        )}\n      >\n        <span\n          className={cn(\n            \"relative inline-flex shrink-0 items-center justify-center rounded-[3px] border-2 border-input transition-colors\",\n            CHECKBOX_SIZES[size],\n            (controlledChecked || indeterminate) && checkedBg[color],\n            (controlledChecked || indeterminate) && \"text-white\"\n          )}\n        >\n          <input\n            ref={combinedRef}\n            id={id}\n            type=\"checkbox\"\n            checked={checked}\n            defaultChecked={defaultChecked}\n            disabled={disabled}\n            onChange={handleChange}\n            className=\"absolute inset-0 opacity-0 cursor-[inherit]\"\n            {...props}\n          />\n          {controlledChecked && !indeterminate && (\n            <CheckIcon className={cn(CHECKBOX_ICON_SIZES[size])} />\n          )}\n          {indeterminate && (\n            <MinusIcon className={cn(CHECKBOX_ICON_SIZES[size])} />\n          )}\n        </span>\n        {label && (\n          <span className={cn(LABEL_SIZES[size], bold && \"font-bold\")}>\n            {label}\n          </span>\n        )}\n      </label>\n    )\n  }\n)\nCheckbox.displayName = \"Checkbox\"\n\nexport { Checkbox, CHECKBOX_SIZES }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}