import * as React from 'react' import { cn } from '@/lib/utils' import { useMergedRefs } from '@/lib/merge-refs' export interface CheckboxProps extends Omit, 'type' | 'size'> { /** * Rendered beside the box inside a wrapping ``, so the text is part * of the hit area. Without it the caller supplies `aria-label`. */ label?: React.ReactNode /** * The mixed state, for a parent box governing a partial selection. It is a * DOM property with no HTML attribute, so it is applied through the ref and * cannot be expressed in markup alone. Checked wins if both are set, which * mirrors the platform. */ indeterminate?: boolean } const BOX = cn( // Same field vocabulary as Input and SearchField -- solid border, no fill of // its own, deboss recess -- at the smallest size the border radius still // reads as the family's `rounded-lg` rather than a circle. 'peer relative h-[18px] w-[18px] shrink-0 appearance-none rounded-[5px]', 'border border-[var(--color-border-light)] dark:border-[var(--color-border-dark)]', 'bg-transparent shadow-deboss', 'hover:border-[var(--color-warm-300)] dark:hover:border-[var(--color-neutral-700)]', 'transition-colors wj-focus-ring', // Both filled states take the accent, so a mixed parent and a checked child // read as the same control in two positions. 'checked:border-[var(--color-accent-500)] checked:bg-[var(--color-accent-500)]', 'indeterminate:border-[var(--color-accent-500)] indeterminate:bg-[var(--color-accent-500)]', 'checked:shadow-none indeterminate:shadow-none', 'disabled:cursor-not-allowed disabled:opacity-50', 'disabled:hover:border-[var(--color-border-light)] dark:disabled:hover:border-[var(--color-border-dark)]', ) // The mark sits over the box rather than inside it, because an appearance-none // input cannot hold children. Inline SVG instead of an icon library: the DS // bundles none. const MARK = cn( 'pointer-events-none absolute left-0 top-0 h-[18px] w-[18px]', 'text-[var(--color-accent-foreground-icon)] opacity-0', 'peer-checked:opacity-100 peer-indeterminate:opacity-0', ) const DASH = cn( 'pointer-events-none absolute left-0 top-0 h-[18px] w-[18px]', 'text-[var(--color-accent-foreground-icon)] opacity-0', 'peer-indeterminate:opacity-100', ) /** * A single checkbox: a real `` with the DS field shape * drawn on it. * * `CheckboxGroup` is a tile grid answering "which of these", and it owns its * own boxes. This is the one you reach for when a checkbox stands alone -- a * selectable row in a table, a tile's selection affordance, a lone consent * box -- and it is the only DS control that carries a mixed state. * * The box is 18px, which is smaller than the 44px touch floor on purpose: a * dense grid of them would be unusable at 44px, and a labelled row already * clears it. **A bare box in a touch context needs its hit area from the * caller** (`touch-target` on the cell, gated on `useInputType()`), the way a * bulk-selection grid does. * * ```tsx * setReduceMotion(e.target.checked)} * /> * * * ``` */ const Checkbox = React.forwardRef( ({ className, label, indeterminate = false, disabled, ...props }, ref) => { const innerRef = React.useRef(null) const mergedRef = useMergedRefs(innerRef, ref) React.useEffect(() => { const el = innerRef.current if (el) el.indeterminate = indeterminate }, [indeterminate, props.checked, props.defaultChecked]) const box = ( ) if (label === undefined) return box return ( {box} {label} ) }, ) Checkbox.displayName = 'Checkbox' export { Checkbox }