import type { ReactNode } from "react"; import Tooltip from "./Tooltip"; import { FocusSafeButton } from "./FocusSafeButton"; import { SURFACE } from "./surfaces"; import { SectionLabel } from "./Headings"; // Shared form/settings primitives, factored out of the many panels that each re-declared // them (Settings, Config, Stats, admin pages, Setup wizard). Visual contract unchanged. /** Pill on/off switch — the bare control. In a settings list use `SwitchRow`, whose whole row toggles; * a row laid out by hand points a `` at it. `label` is the accessible name (the * visible row text), required: the control has no inner text to be named by. The button is its own box * around the 36×20 track: 24 tall on a mouse (the B1 floor) and the 44 touch target on a coarse pointer * (A3), a real box rather than an invisible hit area. */ export function Switch({ checked, onChange, label, disabled, id, }: { checked: boolean; onChange: (v: boolean) => void; label: string; disabled?: boolean; id?: string; }) { // FocusSafeButton: a switch is disabled by its caller while the change it made is saving, and a // natively disabled switch that holds the focus throws it to . return ( onChange(!checked)} className="group inline-flex h-6 min-w-9 shrink-0 items-center justify-center rounded-full disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-(--touch-target) pointer-coarse:min-w-(--touch-target)" > ); } /** A titled settings block. Default = a plain block with an uppercase caption (the section's `h2`); * `card` wraps it in a glass card (the admin pages' style). */ export function Section({ title, card, children, }: { title: string; card?: boolean; children: ReactNode; }) { return (

{title} {children}

); } /** A label that reveals an explanatory caption on hover (dotted underline) when `hint` is set. * No-op styling when there's no hint, so it's safe to use unconditionally. */ export function HintLabel({ hint, children }: { hint?: string; children: ReactNode }) { return ( {children} ); } /** A settings row whose control is a switch: the whole row is a ``, so its text toggles the switch * as the switch does (the iOS / Material settings row, owner decision F12). A `