@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/controls/PasswordRules.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { styleHref } from "../../backgrounds/hosts/styleHref.js";
+import { motionOnly } from "../../transitions/progress.js";
+import { SPRING } from "../effects/kit.js";
+const PART = "data-sx-rule-part";
+const CSS = `@layer components {
+  :where([data-sx-password-rules]) {
+    position: relative;
+  }
+  :where([data-sx-password-rules] ul) {
+    display: grid;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :where([data-sx-password-rules] li) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  :where([data-sx-password-rules] svg) {
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where([${PART}]) {
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  :where([${PART}="check"]) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+  }
+  :where([data-sx-met] [${PART}="check"]) {
+    stroke-dashoffset: 0;
+  }
+  :where([data-sx-met] [${PART}="dot"]) {
+    opacity: 0;
+    scale: 0;
+  }
+  :where([data-sx-rules-sr]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}`;
+const MOTION = `@layer components {
+  :where([${PART}="check"]) {
+    transition: stroke-dashoffset 250ms ease-out;
+  }
+  :where([${PART}="dot"]) {
+    transition: opacity 150ms ease-out, scale 150ms ease-out;
+  }
+  :where([data-sx-met] svg) {
+    animation: sx-form-rule-pop 350ms ${SPRING};
+  }
+  @keyframes sx-form-rule-pop {
+    0% { scale: 0.7; }
+    100% { scale: 1; }
+  }
+}`;
+const fill = (s, met, total) => s.replace("{met}", String(met)).replace("{total}", String(total));
+/**
+ * The rules a new password must meet, each ticking off as it is met: a dot turns into a check that draws in. Screen
+ * readers hear "done" or "not yet" on each rule, and a count when it changes. Your app checks the rules.
+ *
+ * ```tsx
+ * <PasswordRules id="pw-rules" rules={[{ label: "8 characters or more", met: pw.length >= 8 }]} />
+ * <Field type="password" aria-describedby="pw-rules" … />
+ * ```
+ */
+export function PasswordRules({ rules, id, labels, className, unstyled }) {
+    const met = rules.filter((r) => r.met).length;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { href: styleHref("form-rules", CSS), precedence: "sx", children: CSS }), _jsx("style", { href: styleHref("form-rules-motion", MOTION), precedence: "sx", children: motionOnly(MOTION) }), _jsxs("div", { id: id, "data-sx-password-rules": "", "data-sx-styled": unstyled ? undefined : "", className: className, children: [_jsx("ul", { children: rules.map((rule, i) => (_jsxs("li", { "data-sx-met": rule.met ? "" : undefined, children: [_jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": true, focusable: "false", children: [_jsx("circle", { [PART]: "dot", cx: "8", cy: "8", r: "2" }), _jsx("path", { [PART]: "check", d: "m3 8.5 3 3 7-7", pathLength: 1 })] }), _jsx("span", { children: rule.label }), _jsx("span", { "data-sx-rules-sr": "", children: rule.met ? (labels?.met ?? "done") : (labels?.unmet ?? "not yet") })] }, i))) }), _jsx("span", { "data-sx-rules-sr": "", role: "status", children: fill(labels?.progress ?? "{met} of {total} requirements met", met, rules.length) })] })] }));
+}

package/dist/forms/controls/RadioGroup.d.ts

@@ -0,0 +1,69 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from "react";
+import type { FormEffect } from "../types.js";
+/** One choice of a group. */
+export interface RadioOption {
+    readonly value: string;
+    /** Its words. A star or a face shows them to screen readers only. */
+    readonly label: ReactNode;
+    /** Help under the words (a card shows it inside). */
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+}
+interface RadioGroupOwnProps {
+    /** The group's question: a real `<legend>`. */
+    readonly label?: ReactNode;
+    /** Help under the question, read with the group. */
+    readonly description?: ReactNode;
+    /** The error message. While set, every radio is `aria-invalid` and the group points at the message. */
+    readonly error?: ReactNode;
+    /** Invalid with no message of its own. */
+    readonly invalid?: boolean;
+    /** The choices. Or put `<Radio>` elements inside instead. */
+    readonly options?: readonly RadioOption[];
+    readonly children?: ReactNode;
+    /** The chosen value, when you hold it (with `onChange` or `onValueChange`). */
+    readonly value?: string;
+    /** The value chosen at first, when the browser holds it. */
+    readonly defaultValue?: string;
+    /** Called with the new value. */
+    readonly onValueChange?: (value: string) => void;
+    /** Default `"vertical"`. */
+    readonly orientation?: "vertical" | "horizontal";
+    /** One effect or a list; they stack. Radio effects dress the whole group: each option, and a track behind them. */
+    readonly effect?: FormEffect | readonly FormEffect[];
+    /** The browser's own radios, coloured with `accent-color`. Effects don't apply. */
+    readonly native?: boolean;
+    /** Drop the default look. */
+    readonly unstyled?: boolean;
+    /** Goes on the options' box. */
+    readonly className?: string;
+    /** Goes on the `<fieldset>`. */
+    readonly rootClassName?: string;
+    /** Goes on the `<legend>`. */
+    readonly labelClassName?: string;
+    /** Goes on the `<fieldset>`, beside the effects' variables. */
+    readonly style?: CSSProperties;
+}
+/**
+ * Every other prop goes on each radio, `ref` included: `name`, `onChange`, `onBlur`, `required`, `disabled`, so
+ * `{...register("plan")}` from React Hook Form spreads onto all of them (it groups radios by name).
+ */
+export type RadioGroupProps = RadioGroupOwnProps & Omit<ComponentPropsWithRef<"input">, keyof RadioGroupOwnProps | "type" | "checked" | "defaultChecked">;
+export interface RadioProps extends Omit<RadioOption, "value"> {
+    readonly value: string;
+    /** Set by the group: the option's place, for effects that stagger or count (`--sx-choice-i`). */
+    readonly index?: number;
+}
+/** One radio of a `RadioGroup`, for a layout of your own. Outside a group it renders nothing. */
+export declare function Radio({ value, label, description, disabled, index }: RadioProps): import("react").JSX.Element | null;
+/**
+ * A group of radios in a real `<fieldset>`, its question a `<legend>`. The radios share one name, so the browser moves
+ * between them with the arrow keys and submits the chosen one. Effects dress the options (a dot, a card, a star, a
+ * face) and the group (a sliding segment, a tab underline, a travelling dot).
+ *
+ * ```tsx
+ * <RadioGroup label="Plan" options={plans} effect={radioSegment()} {...register("plan")} />
+ * ```
+ */
+export declare function RadioGroup(props: RadioGroupProps): import("react").JSX.Element;
+export {};

package/dist/forms/controls/RadioGroup.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, useContext, useId, useRef, } from "react";
+import { CHOICE_BASE_CSS } from "../choice.js";
+import { fieldDescribedBy, fieldIds } from "../ids.js";
+import { checkChoice } from "./choiceChecks.js";
+import { ChoiceItem, EffectSheets, choiceLayers, usePrograms } from "./choiceParts.js";
+import { effectList, filled, withUid } from "./shared.js";
+const RadioContext = createContext(null);
+/** One radio of a `RadioGroup`, for a layout of your own. Outside a group it renders nothing. */
+export function Radio({ value, label, description, disabled, index = 0 }) {
+    const group = useContext(RadioContext);
+    if (!group)
+        return null;
+    const id = `${group.idBase}-${index}`;
+    const onChange = group.shared.onChange;
+    return (_jsx(ChoiceItem, { kind: "radio", effects: group.effects, uid: group.uid, label: label, description: description, descriptionId: filled(description) ? `${id}-description` : undefined, root: {
+            "data-sx-choice": "",
+            "data-sx-kind": "radio",
+            "data-sx-styled": group.unstyled ? undefined : "",
+            "data-sx-native": group.native ? "" : undefined,
+            style: { "--sx-choice-i": index },
+        }, control: {
+            ...group.shared,
+            id,
+            type: "radio",
+            name: group.name,
+            value,
+            disabled: disabled || group.shared.disabled,
+            ...(group.value === undefined ? { defaultChecked: group.defaultValue === undefined ? undefined : group.defaultValue === value } : { checked: group.value === value }),
+            onChange,
+            "aria-invalid": group.invalid || undefined,
+            "aria-describedby": filled(description) ? `${id}-description` : undefined,
+        } }));
+}
+/**
+ * A group of radios in a real `<fieldset>`, its question a `<legend>`. The radios share one name, so the browser moves
+ * between them with the arrow keys and submits the chosen one. Effects dress the options (a dot, a card, a star, a
+ * face) and the group (a sliding segment, a tab underline, a travelling dot).
+ *
+ * ```tsx
+ * <RadioGroup label="Plan" options={plans} effect={radioSegment()} {...register("plan")} />
+ * ```
+ */
+export function RadioGroup(props) {
+    const { label, description, error, invalid, options, children, value, defaultValue, onValueChange, orientation = "vertical", effect, native, unstyled, className, rootClassName, labelClassName, style, id: ownId, ...rest } = props;
+    const effects = native ? [] : effectList(effect);
+    const auto = useId().replace(/[^\w-]/g, "");
+    const idBase = ownId ?? `sx-radios${auto}`;
+    const uid = `sx${auto}`;
+    const ids = fieldIds(idBase);
+    const hasError = filled(error);
+    const isInvalid = hasError || invalid === true;
+    const describedBy = fieldDescribedBy(ids, { error: hasError, description: filled(description), own: rest["aria-describedby"] });
+    if (process.env.NODE_ENV !== "production") {
+        checkChoice({
+            control: "radio",
+            effects,
+            labelled: filled(label) || !!rest["aria-label"] || !!rest["aria-labelledby"],
+            nativeWithEffects: !!native && !!effect && effectList(effect).length > 0,
+            invalidWithoutWords: invalid === true && !hasError,
+        });
+    }
+    const root = useRef(null);
+    usePrograms(root, effects);
+    const { "aria-describedby": _own, "aria-label": groupLabel, "aria-labelledby": groupLabelledBy, ...shared } = rest;
+    const ownChange = shared.onChange;
+    const context = {
+        name: shared.name ?? `sx-radios${auto}`,
+        effects,
+        uid,
+        idBase,
+        value,
+        defaultValue,
+        invalid: isInvalid,
+        unstyled,
+        native,
+        shared: {
+            ...shared,
+            onChange: (e) => {
+                ownChange?.(e);
+                onValueChange?.(e.target.value);
+            },
+        },
+    };
+    const items = options
+        ? options.map((o, i) => _jsx(Radio, { ...o, index: i }, o.value))
+        : Children.toArray(children).map((child, i) => isValidElement(child) ? cloneElement(child, { index: i }) : child);
+    const vars = {
+        "--sx-radios-n": items.length,
+        ...withUid(Object.assign({}, ...effects.map((e) => e.vars)), uid),
+        ...style,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(EffectSheets, { name: "form-choice", base: CHOICE_BASE_CSS, effects: effects }), _jsxs("fieldset", { ref: root, id: idBase, "data-sx-radios": effects.map((e) => e.id).join(" "), "data-sx-group": "radio", "data-sx-styled": unstyled ? undefined : "", "data-sx-orientation": orientation, "aria-describedby": describedBy, "aria-label": groupLabel, "aria-labelledby": groupLabelledBy, className: rootClassName, style: vars, children: [filled(label) ? (_jsx("legend", { "data-sx-group-legend": "", className: labelClassName, children: label })) : null, filled(description) ? (_jsx("p", { "data-sx-group-description": "", id: ids.description, children: description })) : null, _jsxs("div", { "data-sx-group-options": "", className: className, children: [choiceLayers(effects, "track", uid), _jsx(RadioContext, { value: context, children: items })] }), _jsx("div", { "data-sx-choice-message": "", children: _jsx("p", { "data-sx-choice-error": "", id: ids.error, role: "alert", children: hasError ? (_jsx("span", { "data-sx-choice-says": "", children: error }, typeof error === "string" ? error : undefined)) : null }) })] })] }));
+}

package/dist/forms/controls/Range.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from "react";
+import type { FormEffect } from "../types.js";
+type Value = number | readonly [number, number];
+/** The words a Range says, for your language: the two thumbs' names. */
+export interface RangeLabels {
+    readonly min?: string;
+    readonly max?: string;
+}
+interface RangeOwnProps {
+    /** The visible label. */
+    readonly label?: ReactNode;
+    readonly description?: ReactNode;
+    /** The error message, with `aria-invalid` and a `role="alert"` region. */
+    readonly error?: ReactNode;
+    readonly invalid?: boolean;
+    /** The value: a number, or `[low, high]` for two thumbs. Held by you, with `onValueChange`. */
+    readonly value?: Value;
+    /** The first value, when the browser holds it: a number, or `[low, high]` for two thumbs. */
+    readonly defaultValue?: Value;
+    /** Called with the new value (a pair with two thumbs) as it moves: fits React Hook Form's `Controller`. */
+    readonly onValueChange?: (value: number | [number, number]) => void;
+    /** Numbers, or number strings as React Hook Form's `register()` passes them. */
+    readonly min?: number | string;
+    readonly max?: number | string;
+    readonly step?: number | string;
+    /** `"vertical"` stands it upright, the lowest value at the bottom. Its height: `--sx-range-length` (10rem). */
+    readonly orientation?: "horizontal" | "vertical";
+    /** Shows the value beside the label, as an `<output>`. */
+    readonly showValue?: boolean;
+    /** How the value reads, on screen and to a screen reader (`aria-valuetext`): `Intl.NumberFormat` options. */
+    readonly format?: Intl.NumberFormatOptions;
+    /** The locale for the numbers. Default the visitor's. */
+    readonly locale?: string;
+    /** One effect or a list; they stack. */
+    readonly effect?: FormEffect | readonly FormEffect[];
+    readonly labels?: RangeLabels;
+    readonly unstyled?: boolean;
+    /** Goes on the box with the rail and thumbs. */
+    readonly className?: string;
+    readonly rootClassName?: string;
+    readonly labelClassName?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Every other prop goes on the real range input (the low one with two thumbs): `name`, `disabled`, `onChange`, `ref`, so
+ * `{...register("volume", { valueAsNumber: true })}` spreads onto a one-thumb Range.
+ */
+export type RangeProps = RangeOwnProps & Omit<ComponentPropsWithRef<"input">, keyof RangeOwnProps | "type" | "children">;
+/**
+ * A slider on the browser's own range input: it takes the keys, the screen reader, a phone's drag and a plain form
+ * submit, at opacity 0 over a drawn rail and thumb that effects paint. One thumb, or two (`value={[20, 80]}`), each its
+ * own input with its own name to a screen reader; upright with `orientation="vertical"`.
+ *
+ * ```tsx
+ * <Range label="Volume" defaultValue={40} effect={[rangeFill(), rangeBubble()]} {...register("volume", { valueAsNumber: true })} />
+ * <Range label="Price" min={0} max={500} value={price} onValueChange={setPrice} format={{ style: "currency", currency: "EUR" }} />
+ * ```
+ */
+export declare function Range(props: RangeProps): import("react").JSX.Element;
+export {};

package/dist/forms/controls/Range.js

@@ -0,0 +1,169 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState, } from "react";
+import { fieldDescribedBy, fieldIds } from "../ids.js";
+import { RANGE_BASE_CSS, autoTicks } from "../range.js";
+import { EffectSheets, choiceLayers, usePrograms } from "./choiceParts.js";
+import { checkRange } from "./rangeChecks.js";
+import { effectList, filled, withUid } from "./shared.js";
+const WORDS = { min: "Minimum", max: "Maximum" };
+const pair = (v, min, max) => v === undefined ? [min, max] : typeof v === "number" ? [v, v] : [v[0], v[1]];
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+/**
+ * A slider on the browser's own range input: it takes the keys, the screen reader, a phone's drag and a plain form
+ * submit, at opacity 0 over a drawn rail and thumb that effects paint. One thumb, or two (`value={[20, 80]}`), each its
+ * own input with its own name to a screen reader; upright with `orientation="vertical"`.
+ *
+ * ```tsx
+ * <Range label="Volume" defaultValue={40} effect={[rangeFill(), rangeBubble()]} {...register("volume", { valueAsNumber: true })} />
+ * <Range label="Price" min={0} max={500} value={price} onValueChange={setPrice} format={{ style: "currency", currency: "EUR" }} />
+ * ```
+ */
+export function Range(props) {
+    const { label, description, error, invalid, value, defaultValue, onValueChange, min: rawMin = 0, max: rawMax = 100, step: rawStep = 1, orientation, showValue, format, locale, effect, labels, unstyled, className, rootClassName, labelClassName, style, id: ownId, ...rest } = props;
+    const effects = effectList(effect);
+    const words = { ...WORDS, ...labels };
+    const min = Number(rawMin);
+    const max = Number(rawMax);
+    const step = Number(rawStep);
+    const auto = useId().replace(/[^\w-]/g, "");
+    const id = ownId ?? `sx-range${auto}`;
+    const uid = `sx${auto}`;
+    const ids = fieldIds(id);
+    const dual = Array.isArray(value ?? defaultValue);
+    const vertical = orientation === "vertical";
+    const hasError = filled(error);
+    const isInvalid = hasError || invalid === true || rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
+    const describedBy = fieldDescribedBy(ids, { error: hasError, description: filled(description), own: rest["aria-describedby"] });
+    if (process.env.NODE_ENV !== "production") {
+        checkRange({ effects, labelled: filled(label) || !!rest["aria-label"] || !!rest["aria-labelledby"], min, max, step, vertical, dual });
+    }
+    const controlled = value !== undefined;
+    // like the browser's own: one thumb starts in the middle, two at the ends
+    const [held, setHeld] = useState(() => pair(defaultValue, min + (max - min) / 2, min + (max - min) / 2));
+    const [lo, hi] = controlled ? pair(value, min, max) : held;
+    const [dragging, setDragging] = useState(null);
+    const root = useRef(null);
+    const box = useRef(null);
+    const inputs = useRef([null, null]);
+    usePrograms(root, effects);
+    const span = max - min || 1;
+    const at = (n) => clamp((n - min) / span, 0, 1);
+    const formatter = useMemo(() => {
+        if (!format && !locale)
+            return null;
+        try {
+            return new Intl.NumberFormat(locale, format);
+        }
+        catch {
+            // options the browser doesn't know (a unit it lacks): plain digits rather than a broken page
+            return null;
+        }
+    }, [JSON.stringify(format), locale]); // eslint-disable-line react-hooks/exhaustive-deps
+    const fmt = (n) => (formatter ? formatter.format(n) : String(n));
+    const commit = (next) => {
+        if (!controlled)
+            setHeld(next);
+        onValueChange?.(dual ? next : next[0]);
+    };
+    const moved = (which) => (e) => {
+        const n = Number(e.target.value);
+        // two thumbs never cross: the moving one stops at the other
+        const next = which === 0 ? [dual ? Math.min(n, hi) : n, dual ? hi : n] : [lo, Math.max(n, lo)];
+        if (dual && next[which] !== n)
+            e.target.value = String(next[which]);
+        commit(next);
+        if (which === 0)
+            rest.onChange?.(e);
+    };
+    // after a form reset (or a value React Hook Form set on the input), read the inputs again
+    useEffect(() => {
+        const form = inputs.current[0]?.form;
+        if (!form || controlled)
+            return;
+        const read = () => setTimeout(() => {
+            const [a, b] = inputs.current;
+            if (a)
+                setHeld([Number(a.value), b ? Number(b.value) : Number(a.value)]);
+        });
+        form.addEventListener("reset", read);
+        return () => form.removeEventListener("reset", read);
+    }, [controlled]);
+    // a drag ends wherever the pointer is let go
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const stop = () => setDragging(null);
+        addEventListener("pointerup", stop);
+        addEventListener("pointercancel", stop);
+        return () => {
+            removeEventListener("pointerup", stop);
+            removeEventListener("pointercancel", stop);
+        };
+    }, [dragging]);
+    // two thumbs: a press on the rail moves the nearer thumb there, and a drag carries it on
+    const fromPointer = (e) => {
+        const r = box.current.getBoundingClientRect();
+        const thumb = box.current.querySelector("[data-sx-range-thumb]")?.offsetWidth ?? 0;
+        const room = (vertical ? r.height : r.width) - thumb;
+        const along = vertical ? r.bottom - e.clientY : getComputedStyle(box.current).direction === "rtl" ? r.right - e.clientX : e.clientX - r.left;
+        const raw = min + clamp((along - thumb / 2) / (room || 1), 0, 1) * span;
+        return clamp(Math.round((raw - min) / step) * step + min, min, max);
+    };
+    const setInput = (which, n) => {
+        const el = inputs.current[which];
+        if (!el || Number(el.value) === n)
+            return;
+        const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+        set?.call(el, String(n));
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        el.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    const railDown = (e) => {
+        if (!dual || e.button !== 0 || e.target.matches("input") || inputs.current[0]?.disabled)
+            return;
+        const n = fromPointer(e);
+        const which = Math.abs(n - lo) < Math.abs(n - hi) || (n < lo && lo === hi) ? 0 : 1;
+        e.preventDefault();
+        box.current.setPointerCapture(e.pointerId);
+        inputs.current[which]?.focus();
+        setDragging(which === 0 ? "a" : "b");
+        setInput(which, n);
+        const move = (ev) => setInput(which, fromPointer(ev));
+        const up = () => {
+            box.current?.removeEventListener("pointermove", move);
+            box.current?.removeEventListener("pointerup", up);
+        };
+        box.current.addEventListener("pointermove", move);
+        box.current.addEventListener("pointerup", up);
+    };
+    const setRef = (which) => (el) => {
+        inputs.current[which] = el;
+        if (which !== 0)
+            return;
+        const ref = rest.ref;
+        if (typeof ref === "function")
+            ref(el);
+        else if (ref)
+            ref.current = el;
+    };
+    const { ref: _ref, onChange: _onChange, ...own } = rest;
+    void _ref;
+    void _onChange;
+    const steps = (max - min) / step;
+    const vars = {
+        "--sx-range-from": dual ? at(lo) : 0,
+        "--sx-range-to": at(hi),
+        "--sx-range-steps": Math.round(steps),
+        "--sx-range-ticks": autoTicks(steps),
+        ...withUid(Object.assign({}, ...effects.map((e) => e.vars)), uid),
+        ...style,
+    };
+    const named = filled(label);
+    const thumbs = dual ? ["a", "b"] : ["a"];
+    return (_jsxs(_Fragment, { children: [_jsx(EffectSheets, { name: "form-range", base: RANGE_BASE_CSS, effects: effects }), _jsxs("div", { ref: root, "data-sx-range": effects.map((e) => e.id).join(" "), "data-sx-kind": "range", "data-sx-styled": unstyled ? undefined : "", "data-sx-dual": dual ? "" : undefined, "data-sx-vertical": vertical ? "" : undefined, "data-sx-dragging": dragging ?? undefined, "data-sx-top": dual && lo === hi && lo > min + span / 2 ? "a" : undefined, role: dual ? "group" : undefined, "aria-labelledby": dual && named ? ids.label : undefined, className: rootClassName, style: vars, children: [named || showValue ? (_jsxs("div", { "data-sx-range-head": "", children: [named ? (dual ? (_jsx("span", { "data-sx-range-label": "", id: ids.label, className: labelClassName, children: label })) : (_jsx("label", { "data-sx-range-label": "", id: ids.label, htmlFor: id, className: labelClassName, children: label }))) : null, showValue ? (_jsx("output", { "data-sx-range-output": "", htmlFor: dual ? `${id} ${id}-b` : id, "aria-live": "off", children: dual ? `${fmt(lo)} – ${fmt(hi)}` : fmt(lo) })) : null] })) : null, _jsxs("div", { ref: box, "data-sx-range-box": "", className: className, onPointerDown: railDown, children: [_jsx("span", { "data-sx-range-track": "", "aria-hidden": true, children: choiceLayers(effects, "track", uid) }), thumbs.map((t) => (_jsxs("span", { "data-sx-range-thumb": "", "data-sx-thumb": t, "aria-hidden": true, style: { "--sx-at": at(t === "a" ? lo : hi) }, children: [_jsx("span", { "data-sx-range-says": "", children: fmt(t === "a" ? lo : hi) }), choiceLayers(effects, "thumb", uid)] }, t))), thumbs.map((t, i) => {
+                                const n = t === "a" ? lo : hi;
+                                const which = i;
+                                return (_jsx("input", { ...own, ...(controlled ? { value: n } : { defaultValue: n }), ref: setRef(which), id: t === "a" ? id : `${id}-b`, type: "range", min: min, max: max, step: step, "data-sx-range-control": "", "data-sx-thumb": t, "aria-orientation": vertical ? "vertical" : undefined, "aria-valuetext": formatter ? fmt(n) : undefined, "aria-labelledby": dual ? [named ? ids.label : "", `${id}-${t}-name`].filter(Boolean).join(" ") : own["aria-labelledby"], "aria-invalid": isInvalid || undefined, "aria-describedby": describedBy, onChange: moved(which), onPointerDown: () => setDragging(t) }, t));
+                            }), dual ? (_jsxs(_Fragment, { children: [_jsx("span", { "data-sx-range-name": "", id: `${id}-a-name`, children: words.min }), _jsx("span", { "data-sx-range-name": "", id: `${id}-b-name`, children: words.max })] })) : null] }), filled(description) ? (_jsx("p", { "data-sx-range-description": "", id: ids.description, children: description })) : null, _jsx("div", { "data-sx-range-message": "", children: _jsx("p", { "data-sx-range-error": "", id: ids.error, role: "alert", children: hasError ? (_jsx("span", { "data-sx-range-says-error": "", children: error }, typeof error === "string" ? error : undefined)) : null }) })] })] }));
+}

package/dist/forms/controls/SaveStatus.d.ts

@@ -0,0 +1,25 @@
+/** Where an autosave stands. */
+export type SaveState = "idle" | "saving" | "saved" | "error";
+export interface SaveStatusProps {
+    /** Where it stands. `"idle"` shows nothing (the live region stays, so the next change is read out). */
+    readonly state: SaveState;
+    /** The words, for your language. Default "Saving…", "Saved", "Couldn't save". */
+    readonly labels?: {
+        readonly saving?: string;
+        readonly saved?: string;
+        readonly error?: string;
+    };
+    /** Goes on the status. */
+    readonly className?: string;
+    /** Drop the default look. */
+    readonly unstyled?: boolean;
+}
+/**
+ * An autosave's status: a spinner and "Saving…", then a check that draws in and "Saved" (or a cross and "Couldn't
+ * save"). A live region, so screen readers hear each change. Your app sets `state`.
+ *
+ * ```tsx
+ * <SaveStatus state={saving ? "saving" : saved ? "saved" : "idle"} />
+ * ```
+ */
+export declare function SaveStatus({ state, labels, className, unstyled }: SaveStatusProps): import("react").JSX.Element;

package/dist/forms/controls/SaveStatus.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { styleHref } from "../../backgrounds/hosts/styleHref.js";
+import { motionOnly } from "../../transitions/progress.js";
+import { SPRING } from "../effects/kit.js";
+const PART = "data-sx-save-part";
+const CSS = `@layer components {
+  :where([data-sx-save]) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-block-size: 1.5rem;
+  }
+  :where([data-sx-save="idle"] > svg) {
+    visibility: hidden;
+  }
+  :where([data-sx-save] > svg) {
+    flex: none;
+    inline-size: 1.125em;
+    block-size: 1.125em;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where([${PART}]) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  :where([${PART}="ring"]) {
+    rotate: -90deg;
+  }
+  :where([data-sx-save="saving"] [${PART}="ring"]) {
+    stroke-dashoffset: 0.7;
+  }
+  :where([data-sx-save="saved"] [${PART}="check"], [data-sx-save="error"] [${PART}="cross"]) {
+    stroke-dashoffset: 0;
+  }
+  :where([data-sx-save] > span) {
+    display: inline-block;
+  }
+}`;
+const MOTION = `@layer components {
+  :where([data-sx-save="saving"] > svg) {
+    animation: sx-form-save-spin 0.8s linear infinite;
+  }
+  :where(html[data-sx-loops-paused] [data-sx-save] > svg) {
+    animation-play-state: paused;
+  }
+  :where([${PART}="check"], [${PART}="cross"]) {
+    transition: stroke-dashoffset 300ms ease-out;
+  }
+  :where([data-sx-save="saved"] > svg, [data-sx-save="error"] > svg) {
+    animation: sx-form-save-pop 400ms ${SPRING};
+  }
+  :where([data-sx-save] > span) {
+    transition: opacity 180ms ease-out, translate 180ms ease-out;
+  }
+  @starting-style {
+    :where([data-sx-save] > span) {
+      opacity: 0;
+      translate: 0 0.4em;
+    }
+  }
+  @keyframes sx-form-save-spin {
+    to { rotate: 1turn; }
+  }
+  @keyframes sx-form-save-pop {
+    0% { scale: 0.6; }
+    100% { scale: 1; }
+  }
+}`;
+const WORDS = { saving: "Saving…", saved: "Saved", error: "Couldn't save" };
+/**
+ * An autosave's status: a spinner and "Saving…", then a check that draws in and "Saved" (or a cross and "Couldn't
+ * save"). A live region, so screen readers hear each change. Your app sets `state`.
+ *
+ * ```tsx
+ * <SaveStatus state={saving ? "saving" : saved ? "saved" : "idle"} />
+ * ```
+ */
+export function SaveStatus({ state, labels, className, unstyled }) {
+    const text = state === "idle" ? "" : (labels?.[state] ?? WORDS[state]);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { href: styleHref("form-save", CSS), precedence: "sx", children: CSS }), _jsx("style", { href: styleHref("form-save-motion", MOTION), precedence: "sx", children: motionOnly(MOTION) }), _jsxs("span", { "data-sx-save": state, "data-sx-styled": unstyled ? undefined : "", role: "status", className: className, children: [_jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": true, focusable: "false", children: [_jsx("circle", { [PART]: "ring", cx: "12", cy: "12", r: "9", pathLength: 1 }), _jsx("path", { [PART]: "check", d: "m8 12.5 2.75 2.75L16 9.5", pathLength: 1 }), _jsx("path", { [PART]: "cross", d: "m9 9 6 6m0-6-6 6", pathLength: 1 })] }), _jsx("span", { children: text }, state)] })] }));
+}

package/dist/forms/controls/Select.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from "react";
+import type { FormEffect } from "../types.js";
+/** One choice of a Select. */
+export interface SelectOption {
+    readonly value: string;
+    /** Plain words: a `<select>` shows text only. */
+    readonly label: string;
+    readonly disabled?: boolean;
+}
+interface SelectOwnProps {
+    /** The visible label: a real `<label for>`. */
+    readonly label?: ReactNode;
+    readonly description?: ReactNode;
+    /** The error message, with `aria-invalid` and a `role="alert"` region. */
+    readonly error?: ReactNode;
+    readonly invalid?: boolean;
+    /** The choices. Or put `<option>` elements inside instead. */
+    readonly options?: readonly SelectOption[];
+    readonly children?: ReactNode;
+    /** Shown while nothing is chosen: a first option that can't be picked again. */
+    readonly placeholder?: string;
+    /** One effect or a list; they stack. Most reach the browser's own picker only where it can be styled. */
+    readonly effect?: FormEffect | readonly FormEffect[];
+    /** A select inside a sentence ("I'd like a ___ website"): it sits in the line; its label is read by screen readers only. */
+    readonly inline?: boolean;
+    readonly unstyled?: boolean;
+    /** Goes on the box you see. */
+    readonly className?: string;
+    readonly rootClassName?: string;
+    readonly labelClassName?: string;
+    readonly style?: CSSProperties;
+}
+/** Every other prop goes on the real `<select>`, `ref` included, so `{...register("country")}` spreads onto it. */
+export type SelectProps = SelectOwnProps & Omit<ComponentPropsWithRef<"select">, keyof SelectOwnProps>;
+/**
+ * The browser's own `<select>`, wearing effects. Where the browser lets a page style its picker (Chrome 135+, Safari 27:
+ * `appearance: base-select`), the picker effects reach the list that opens; elsewhere (Firefox) the browser's own list
+ * opens, and the box, the arrow and the error still look the part. The keyboard, the screen reader, autofill and a
+ * phone's own picker all keep working, because it is the real one.
+ *
+ * ```tsx
+ * <Select label="Country" options={countries} placeholder="Choose…" effect={[pickerArrow(), pickerOpen()]} {...register("country")} />
+ * ```
+ */
+export declare function Select(props: SelectProps): import("react").JSX.Element;
+export {};