chadtmiller.com/pds.js

Switch repository

Loading…

import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
import { CheckIcon } from 'lucide-react';
import { cn } from '#/lib/utils.js';

/**
 * A tick box, taking the border, the surface and the focus ring a text field
 * and a button take. The tick renders only when the box is on.
 * @param {{checked: boolean, onCheckedChange: (checked: boolean) => void, id?: string, disabled?: boolean, className?: string}} props
 */
export function Checkbox({
  checked,
  onCheckedChange,
  id,
  disabled = false,
  className,
}) {
  return (
    <BaseCheckbox.Root
      id={id}
      checked={checked}
      onCheckedChange={onCheckedChange}
      disabled={disabled}
      className={cn(
        'flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[5px] border border-input bg-background shadow-xs outline-none transition-[background-color,border-color,box-shadow]',
        'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
        'data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground',
        'disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
    >
      <BaseCheckbox.Indicator className="flex">
        <CheckIcon className="size-3" strokeWidth={3} />
      </BaseCheckbox.Indicator>
    </BaseCheckbox.Root>
  );
}