feat(design): the field family, the dropdown trigger, native controls, the no-raw-input lint rule (E28 S3c)

- ui/Input, Textarea, InnerInput + fieldClass (A4): the >= 3:1 edge, a 2px accent focus edge, the danger edge for invalid, md/sm/xs/heading rungs, 1rem and 44 on touch - ui/SelectTrigger (A5): SortControl, FilterSelect, the view switcher and the date filter on one trigger, a pill in a toolbar, r8 in a form - ui/NativeControls (A6): Checkbox, CheckRow, Slider, ColorInput - every raw input swept (~100 sites); inputCls retired; local/input-primitive - useReturnFocus: an in-place editor hands the focus back to its trigger on Enter/Escape (the playlist and Plex title renames, the priority number); the Plex playlist rename gains Escape and an accessible name - back to top: a round 48 FAB (owner decision); DESIGN.md A2 and the log
2026-09-24 23:48:22 +02:00
parent 81936e9f56
commit dac9d89f91
63 changed files with 923 additions and 416 deletions
@@ -0,0 +1,98 @@
+import clsx from "clsx";
+import type { InputHTMLAttributes, ReactNode, Ref } from "react";
+
+// A6 (docs/DESIGN.md, E28 S3c): checkbox, slider and colour well are the BROWSER's controls, tinted
+// with the accent — keyboard, screen reader and forced-colours support come free, and a drawn copy
+// would have to rebuild all three. What the browser does not give is the 44 touch target: the labelled
+// row (`CheckRow`) or the slider's own box grows to it on a coarse pointer. Like `Input`, a raw
+// `<input>` for any of them anywhere else is a lint error.
+
+type Native = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange">;
+
+/** The bare checkbox: inside your own `<label>`, or with an `aria-label`. Prefer `CheckRow`. */
+export function Checkbox({
+  onChange,
+  className,
+  ref,
+  ...rest
+}: Native & { onChange?: (checked: boolean) => void; ref?: Ref<HTMLInputElement> }) {
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      onChange={(e) => onChange?.(e.target.checked)}
+      className={clsx(
+        "size-4 shrink-0 cursor-pointer accent-accent disabled:cursor-not-allowed",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}
+
+/** A checkbox and its label as one row, the whole row the target (44 on touch). */
+export function CheckRow({
+  checked,
+  onChange,
+  disabled,
+  className,
+  children,
+}: {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  /** Lays the row out (text size, colour, margin); the target geometry is the primitive's. */
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <label
+      className={clsx(
+        "inline-flex cursor-pointer items-center gap-2 select-none pointer-coarse:min-h-(--touch-target)",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+    >
+      <Checkbox checked={checked} onChange={onChange} disabled={disabled} />
+      {children}
+    </label>
+  );
+}
+
+/** A range slider; `onChange` hands back the number. */
+export function Slider({
+  onChange,
+  className,
+  ...rest
+}: Native & { onChange: (value: number) => void }) {
+  return (
+    <input
+      type="range"
+      onChange={(e) => onChange(Number(e.target.value))}
+      className={clsx(
+        "w-full cursor-pointer accent-accent pointer-coarse:min-h-(--touch-target)",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}
+
+/** The browser's colour well, a small swatch. */
+export function ColorInput({
+  onChange,
+  className,
+  ...rest
+}: Native & { onChange: (value: string) => void }) {
+  return (
+    <input
+      type="color"
+      onChange={(e) => onChange(e.target.value)}
+      className={clsx(
+        "h-6 w-10 cursor-pointer rounded-sm bg-transparent pointer-coarse:h-(--touch-target) pointer-coarse:w-14",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}