51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T135b,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 } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/merge-refs.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/checkbox.tsx","content":"$53","type":"registry:ui","target":"components/ui/checkbox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]