Checkbox

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/checkbox v1.1.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/checkbox
7// What changed since: https://ds.interlace.tools/c/checkbox#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — Checkbox
12 *
13 * Tri-state boolean form control (checked / unchecked / indeterminate).
14 * Built on @base-ui/react/checkbox: Base UI owns `role="checkbox"`,
15 * `aria-checked="mixed"`, Space activation, and the controlled/uncontrolled
16 * pair (`checked` + `onCheckedChange` / `defaultChecked`).
17 * Mirrors: https://base-ui.com/react/components/checkbox
18 *
19 * ## Anatomy
20 *
21 *   Checkbox (Root)               (button[role=checkbox] — data-min-viewport=320)
22 *     └─ CheckboxIndicator        (Check / Minus glyph)
23 *
24 * ## MIN_VIEWPORT — 320
25 *
26 * ## Target size (SC 2.5.8, AA)
27 *
28 * The painted box is 16×16 CSS px. Rather than lean on the spacing
29 * exception (a 24px circle must not intersect a neighbour's — true only
30 * while callers keep ≥8px gaps, which the DS cannot enforce at the call
31 * site), a transparent `before:` pseudo-element extends the hit area to
32 * 24×24. Visual unchanged; the target genuinely measures 24px.
33 *
34 * ## Contrast (verified by token math)
35 *
36 * | Composite                                          | Light  | Dark    | Floor           |
37 * | -------------------------------------------------- | ------ | ------- | --------------- |
38 * | unchecked `border-input` on `--background`         | 3.62:1 | 3.35:1  | 3:1 (SC 1.4.11) |
39 * | checked `bg-primary` on `--background`             | 8.80:1 | 11.79:1 | 3:1 (SC 1.4.11) |
40 * | indeterminate `bg-primary` on `--background`       | 8.80:1 | 11.79:1 | 3:1 (SC 1.4.11) |
41 * | glyph `text-primary-foreground` on `bg-primary`    | 8.80:1 | 11.79:1 | 3:1 (SC 1.4.11) |
42 * | `aria-invalid:border-destructive` on `--background`| 8.31:1 | 10.43:1  | 3:1 (SC 1.4.11) |
43 * | `focus-visible:ring-ring/60` on `--background`     | 3.23:1 | 4.73:1  | 3:1 (SC 2.4.13) |
44 *
45 * `disabled:opacity-50` is exempt — SC 1.4.11 carves out inactive
46 * user-interface components.
47 *
48 * ## API parity
49 *
50 * `rounded-[4px]` is an arbitrary radius: the DS radius scale starts at
51 * `--interlace-radius-sm` = 8px, which fully rounds a 16px box into a
52 * squircle. Kept for shadcn parity until the scale grows an `xs` step.
53 *
54// … truncated