feat(ui): styled Checkbox primitive matching the form controls (#518) (#519)

Native checkboxes kept the OS accent + a bright white box, clashing with
the themed text inputs — worst in dark mode, where inputs are dark but
the boxes stayed white (the dark-mode input remap intentionally skips
native checkboxes).

Add a generic @dar/ui Checkbox: an appearance-none box with the same
border as the inputs and a transparent background (so it inherits the
same card/table surface in both themes, exactly like an input), a
primary fill + inline-SVG tick when checked, a focus ring, and a
disabled state. No icon-library dependency (the tick is inline SVG, so
@dar/ui stays dependency-free).

Swap every native checkbox to it: the changelist select-all / row select
(Table), the boolean field + M2M multi-select (FieldInput), the inline
delete toggle + boolean cell (InlineEditor), and the column customizer
(ListPage).

Co-authored-by: Martin Castro Laminrs <mcastro@laminr.ai>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

frontend/apps/web/src/pages/ListPage.tsx

@@ -20,7 +20,7 @@ import {
   usePersistedState,
   writeJSON,
 } from '@dar/customization';
-import { Breadcrumb, Button, Card, EmptyState, Modal, Skeleton, Table } from '@dar/ui';
+import { Breadcrumb, Button, Card, Checkbox, EmptyState, Modal, Skeleton, Table } from '@dar/ui';
 import { FieldValueView } from '@dar/details';
 import { DateHierarchyBar } from '@dar/list';
 import { FilterBar } from '@dar/search';
@@ -682,8 +682,7 @@ export function ListPage() {
                       locked && !pk ? 'text-gray-400' : 'text-gray-800'
                     }`}
                   >
-                    <input
-                      type="checkbox"
+                    <Checkbox
                       checked={visible}
                       disabled={locked}
                       onChange={() => toggleColumn(c.name, visibleColumnCount)}

frontend/packages/form/src/FieldInput.tsx

@@ -10,6 +10,7 @@
 
 import type { FieldDescriptor, FieldValue, WriteValue } from '@dar/data';
 import { FieldValueView } from '@dar/details';
+import { Checkbox } from '@dar/ui';
 
 import { AutocompleteInput } from './AutocompleteInput';
 
@@ -51,13 +52,7 @@ export function FieldInput({ name, field, value, error, onChange }: FieldInputPr
 
   if (field.type === 'boolean') {
     control = (
-      <input
-        id={id}
-        type="checkbox"
-        checked={value === true}
-        onChange={(e) => onChange(e.target.checked)}
-        className="h-4 w-4 rounded border-gray-300"
-      />
+      <Checkbox id={id} checked={value === true} onChange={(e) => onChange(e.target.checked)} />
     );
   } else if (field.type === 'text') {
     control = (
@@ -134,16 +129,14 @@ export function FieldInput({ name, field, value, error, onChange }: FieldInputPr
             const key = String(c.value);
             return (
               <label key={key} className="flex items-center gap-2 text-sm">
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={selected.has(key)}
                   onChange={(e) => {
                     const next = new Set(selected);
                     if (e.target.checked) next.add(key);
                     else next.delete(key);
                     onChange(Array.from(next));
                   }}
-                  className="h-4 w-4 rounded border-gray-300"
                 />
                 {c.label}
               </label>

frontend/packages/form/src/InlineEditor.tsx

@@ -17,7 +17,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import type { InlineDescriptor, InlineWriteItem, WriteValue } from '@dar/data';
-import { Button } from '@dar/ui';
+import { Button, Checkbox } from '@dar/ui';
 
 interface EditRow {
   key: string;
@@ -152,8 +152,7 @@ export function InlineEditor({ inline, onItems }: InlineEditorProps) {
     row.pk !== null ? (
       inline.can_delete ? (
         <label className="flex items-center gap-1 text-xs text-gray-500">
-          <input
-            type="checkbox"
+          <Checkbox
             checked={row.deleted}
             // Block removing below min_num: a not-yet-deleted row can't be
             // checked once at the floor (an already-checked one can still
@@ -276,8 +275,7 @@ function InlineCellInput({ type, value, disabled, onChange }: InlineCellInputPro
 
   if (type === 'boolean') {
     return (
-      <input
-        type="checkbox"
+      <Checkbox
         checked={value === true}
         disabled={disabled}
         onChange={(e) => onChange(e.target.checked)}

frontend/packages/ui/src/Checkbox.tsx

@@ -0,0 +1,42 @@
+// Styled checkbox primitive. The native checkbox is intentionally
+// excluded from the app's dark-mode input remap (it keeps its OS accent),
+// which leaves a bright native box that clashes with the themed form
+// controls. This renders an `appearance-none` box styled to match the
+// text inputs — same border, the same surface (transparent, so it picks
+// up the card/table background in both themes exactly like an input) —
+// with a primary fill + check mark when checked. Generic, props-driven:
+// no business knowledge (CLAUDE.md §7). The check is an inline SVG so
+// @dar/ui stays free of an icon-library dependency.
+
+import type { InputHTMLAttributes } from 'react';
+
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export function Checkbox({ className = '', ...rest }: CheckboxProps) {
+  return (
+    <span className="relative inline-flex h-4 w-4 shrink-0 align-middle">
+      <input
+        type="checkbox"
+        className={`peer h-4 w-4 cursor-pointer appearance-none rounded border border-gray-300 bg-transparent transition-colors checked:border-primary checked:bg-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        {...rest}
+      />
+      {/* Tick shows only when the box is checked (peer-checked); white
+          reads on the primary fill. pointer-events-none so the click
+          falls through to the input underneath. */}
+      <svg
+        className="pointer-events-none absolute inset-0 m-auto hidden h-3 w-3 text-white peer-checked:block"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden
+      >
+        <path
+          d="M2.5 6.5 5 9l4.5-5"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </span>
+  );
+}

frontend/packages/ui/src/Table.tsx

@@ -4,6 +4,7 @@
 
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 
+import { Checkbox } from './Checkbox';
 import { Skeleton } from './Skeleton';
 
 // Smallest a column can be dragged to — keeps a handle reachable.
@@ -161,8 +162,7 @@ export function Table<Row>({
           <tr>
             {selectable && (
               <th scope="col" className="w-10 px-4 py-2">
-                <input
-                  type="checkbox"
+                <Checkbox
                   aria-label="Select all rows on this page"
                   checked={allSelected}
                   onChange={(e) => onToggleAll?.(e.target.checked)}
@@ -263,8 +263,7 @@ export function Table<Row>({
                   >
                     {selectable && (
                       <td className="w-10 px-4 py-2" onClick={(e) => e.stopPropagation()}>
-                        <input
-                          type="checkbox"
+                        <Checkbox
                           aria-label="Select row"
                           checked={selected.has(key)}
                           onChange={() => onToggleRow?.(key)}

frontend/packages/ui/src/index.ts

@@ -26,6 +26,9 @@ export type { TableColumn, TableProps } from './Table';
 export { Input } from './Input';
 export type { InputProps } from './Input';
 
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+
 export { Modal } from './Modal';
 export type { ModalProps } from './Modal';