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,79 @@
+import clsx from "clsx";
+import type { InputHTMLAttributes, Ref, TextareaHTMLAttributes } from "react";
+import { fieldClass, type FieldSize } from "./fieldStyles";
+
+// The text-field primitives (docs/DESIGN.md A4, E28 S3c). Every text, number, password, e-mail, search
+// and date box is an `Input`; a multi-line one a `Textarea`; a box whose frame also holds an icon,
+// chips or a clear button is a wrapper painted with `fieldClass` around an `InnerInput`. A raw
+// `<input>` or `<textarea>` anywhere else is a lint error (`local/input-primitive`), so the
+// frame, the focus edge and the coarse-pointer 1rem text cannot drift apart again.
+//
+// `className` lays the field out (width, margin, font weight); its box and edge are the rung's.
+
+type Common = {
+  /** The rung (`FieldSize`): `md` 32 in a form (default), `sm` 28 in a toolbar, a popover or an inline rename, `xs` 24 in a row, `heading` for a title rename. */
+  size?: FieldSize;
+  /** A toolbar search (A4): a pill instead of r8. */
+  pill?: boolean;
+  /** Marks the field invalid (the danger edge) and says so to a screen reader. */
+  invalid?: boolean;
+};
+
+export function Input({
+  size,
+  pill,
+  invalid,
+  className,
+  ref,
+  ...rest
+}: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & Common & { ref?: Ref<HTMLInputElement> }) {
+  return (
+    <input
+      ref={ref}
+      aria-invalid={invalid || undefined}
+      className={clsx(fieldClass({ size, pill }), className)}
+      {...rest}
+    />
+  );
+}
+
+export function Textarea({
+  invalid,
+  className,
+  ref,
+  ...rest
+}: TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  invalid?: boolean;
+  ref?: Ref<HTMLTextAreaElement>;
+}) {
+  return (
+    <textarea
+      ref={ref}
+      aria-invalid={invalid || undefined}
+      className={clsx(
+        fieldClass({ size: "free" }),
+        "px-3 py-1.5 text-sm pointer-coarse:text-base",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}
+
+/** The bare text box inside a `fieldClass` frame: no edge, no box, it fills the frame's free width. */
+export function InnerInput({
+  className,
+  ref,
+  ...rest
+}: InputHTMLAttributes<HTMLInputElement> & { ref?: Ref<HTMLInputElement> }) {
+  return (
+    <input
+      ref={ref}
+      className={clsx(
+        "min-w-0 flex-1 bg-transparent text-fg outline-hidden placeholder:text-muted",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}