cv-manager / packages / ui / src / components / Checkbox.tsx

import { cn } from "../lib/cn";

interface CheckboxProps {
  label?: string;
  checked?: boolean;
  onChange?: (checked: boolean) => void;
  disabled?: boolean;
  className?: string;
  id?: string;
}

export const Checkbox = ({
  label,
  checked = false,
  onChange,
  disabled = false,
  className = "",
  id,
}: CheckboxProps) => {
  const checkboxId =
    id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);

  return (
    <div className="flex items-center space-x-2">
      <input
        id={checkboxId}
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange?.(e.target.checked)}
        disabled={disabled}
        className={cn(
          "h-4 w-4 rounded border-ctp-surface1 bg-transparent text-ctp-blue focus:ring-2 focus:ring-ctp-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          className,
        )}
      />
      {label && (
        <label
          htmlFor={checkboxId}
          className="text-sm font-medium text-ctp-text cursor-pointer"
        >
          {label}
        </label>
      )}
    </div>
  );
};