@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/forms/controls/FormSteps.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useRef, useState, } from "react";
+import { warnOnce } from "../../buttons/runtime/dev.js";
+import { stillMotion } from "../../buttons/runtime/press.js";
+import { useMorph } from "../runtime/useMorph.js";
+import { STEPS_CSS } from "../steps.js";
+import { EffectSheets } from "./choiceParts.js";
+import { effectList, withUid } from "./shared.js";
+const WORDS = { progress: "Progress", status: "Step {n} of {total}: {title}", done: "(done)" };
+const Ctx = createContext(null);
+const Index = createContext(-1);
+function useSteps(part) {
+    const c = useContext(Ctx);
+    if (!c)
+        throw new Error(`[@sharedex/ui] FormSteps.${part} goes inside FormSteps.Root`);
+    return c;
+}
+/** Where the steps are, and the moves: for your own buttons, a summary, a step that jumps back. */
+export function useFormSteps() {
+    const c = useSteps("useFormSteps");
+    return { step: c.at, count: c.count, next: c.next, back: c.back, go: c.go };
+}
+const LAZY = Symbol.for("react.lazy");
+/**
+ * Whether a child is a `FormSteps.Step`. Children written in a Server Component reach this client component with a lazy
+ * reference as their type, not the function itself: unwrap it the way React does (its `_init`), then look for the
+ * Step's own mark (which also holds when the package is installed twice).
+ */
+function isStepElement(child) {
+    if (!isValidElement(child))
+        return false;
+    let type = child.type;
+    for (let i = 0; i < 4 && type && typeof type === "object" && type.$$typeof === LAZY; i++) {
+        try {
+            type = type._init(type._payload);
+        }
+        catch {
+            return false;
+        }
+    }
+    return type === FormStepsStep || (typeof type === "function" && type.sxFormStep === true);
+}
+const FIELDS = "input:not([type=hidden]), select, textarea";
+const FOCUSABLE = `${FIELDS.replace("input:not([type=hidden])", "input:not([type=hidden]):not(:disabled)")}, [tabindex]:not([tabindex="-1"])`;
+/** The browser's own checks on a step's fields: the first wrong one shows its message and takes the focus. */
+function checkStep(step) {
+    if (!step)
+        return true;
+    const bad = [...step.querySelectorAll(FIELDS)].find((f) => !f.disabled && !f.checkValidity());
+    if (!bad)
+        return true;
+    bad.focus();
+    bad.reportValidity();
+    return false;
+}
+/**
+ * A form in steps. Only the current step shows; Next checks it (your `validate`, or the browser's own checks) before
+ * moving on, and the new step's first field takes the focus, with "Step 2 of 4: Address" read out. The box eases to the
+ * new step's height. Every step stays in the page (the others inert), so a plain form submits every field.
+ *
+ * ```tsx
+ * <FormSteps.Root validate={(i) => trigger(FIELDS[i])} effect={[stepSlide(), stepProgress()]}>
+ *   <FormSteps.Progress />
+ *   <FormSteps.Step title="Account">…</FormSteps.Step>
+ *   <FormSteps.Step title="Address">…</FormSteps.Step>
+ *   <FormSteps.Back>Back</FormSteps.Back> <FormSteps.Next submit="Send">Next</FormSteps.Next>
+ * </FormSteps.Root>
+ * ```
+ */
+export function FormStepsRoot(props) {
+    const { step, defaultStep = 0, onStepChange, validate, mode = "slide", effect, labels, unstyled, className, style, children } = props;
+    const effects = effectList(effect);
+    const words = { ...WORDS, ...labels };
+    const uid = `sx${useId().replace(/[^\w-]/g, "")}`;
+    const items = Children.toArray(children);
+    const steps = items.filter(isStepElement);
+    const count = steps.length;
+    const titles = steps.map((s) => s.props.title);
+    if (process.env.NODE_ENV !== "production") {
+        for (const e of effects)
+            if (!e.fits.includes("steps"))
+                warnOnce(`the effect ${e.id} is not made for FormSteps: it fits ${e.fits.join(", ")}.`);
+        if (count === 0)
+            warnOnce("FormSteps.Root has no FormSteps.Step directly inside it.");
+    }
+    const controlled = step !== undefined;
+    const [held, setHeld] = useState(defaultStep);
+    const at = Math.max(0, Math.min(count - 1, controlled ? step : held));
+    const [way, setWay] = useState(1);
+    const [leaving, setLeaving] = useState(null);
+    const [moved, setMoved] = useState(false);
+    const [said, setSaid] = useState("");
+    const root = useRef(null);
+    const view = useRef(null);
+    const stepEl = (i) => view.current?.querySelectorAll(":scope > [data-sx-step]")[i] ?? null;
+    useMorph(view, at, true);
+    const go = (i) => {
+        const to = Math.max(0, Math.min(count - 1, i));
+        if (to === at)
+            return;
+        setWay(to > at ? 1 : -1);
+        setLeaving(at);
+        setMoved(true);
+        if (!controlled)
+            setHeld(to);
+        onStepChange?.(to);
+    };
+    const next = async () => {
+        const ok = validate ? await validate(at) : checkStep(stepEl(at));
+        if (ok && at < count - 1)
+            go(at + 1);
+        return ok;
+    };
+    const back = () => go(at - 1);
+    // the step leaving: shown until its way-out ends (at once when nothing animates it)
+    useEffect(() => {
+        if (leaving === null)
+            return;
+        const el = stepEl(leaving);
+        const drop = () => setLeaving(null);
+        if (!el || getComputedStyle(el).animationName === "none")
+            return drop();
+        el.addEventListener("animationend", drop, { once: true });
+        const t = setTimeout(drop, 1200);
+        return () => {
+            el.removeEventListener("animationend", drop);
+            clearTimeout(t);
+        };
+    }, [leaving]); // eslint-disable-line react-hooks/exhaustive-deps
+    // a new step: its first field takes the focus, and the step is read out; never on load
+    useEffect(() => {
+        if (!moved)
+            return;
+        const el = stepEl(at);
+        el?.querySelector(FOCUSABLE)?.focus({ preventScroll: true });
+        root.current?.scrollIntoView({ block: "nearest", behavior: stillMotion() ? "auto" : "smooth" });
+        const title = titles[at];
+        setSaid(words.status.replace("{n}", String(at + 1)).replace("{total}", String(count)).replace("{title}", typeof title === "string" ? title : ""));
+    }, [at]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Enter in a field moves on (the last step's Enter submits, as the form's own)
+    const keys = (e) => {
+        const t = e.target;
+        if (e.key !== "Enter" || e.nativeEvent.isComposing || e.defaultPrevented || at >= count - 1)
+            return;
+        if (t.tagName !== "INPUT" || ["submit", "button", "reset", "checkbox", "radio", "file", "image"].includes(t.type))
+            return;
+        e.preventDefault();
+        void next();
+    };
+    const c = { at, count, titles, leaving, effects, uid, words, next, back, go };
+    let placed = false;
+    let i = 0;
+    const body = items.map((item) => {
+        if (!isStepElement(item))
+            return item;
+        if (placed)
+            return null;
+        placed = true;
+        return (_jsx("div", { ref: view, "data-sx-steps-view": "", children: steps.map((s) => (_jsx(Index.Provider, { value: i++, children: s }, s.key ?? i))) }, "sx-steps-view"));
+    });
+    const vars = {
+        ...withUid(Object.assign({}, ...effects.map((e) => e.vars)), uid),
+        "--sx-steps-way": way,
+        "--sx-steps-at": at,
+        "--sx-steps-count": count,
+        "--sx-steps-fill": count > 1 ? at / (count - 1) : 1,
+        ...style,
+    };
+    return (_jsxs(Ctx.Provider, { value: c, children: [_jsx(EffectSheets, { name: "form-steps", base: STEPS_CSS, effects: effects }), _jsxs("div", { ref: root, "data-sx-steps": effects.map((e) => e.id).join(" "), "data-sx-mode": mode, "data-sx-moved": moved ? "" : undefined, "data-sx-styled": unstyled ? undefined : "", className: className, style: vars, onKeyDown: keys, children: [body, _jsx("p", { "data-sx-steps-sr": "", role: "status", children: said })] })] }));
+}
+/** One step: a group named by its title. Only the current one shows; the others stay in the page, inert. */
+export function FormStepsStep({ title, className, children }) {
+    const c = useSteps("Step");
+    const i = useContext(Index);
+    const active = i === c.at;
+    return (_jsx("div", { role: "group", "aria-label": typeof title === "string" ? title : undefined, "data-sx-step": "", "data-sx-active": active ? "" : undefined, "data-sx-leaving": c.leaving === i && !active ? "" : undefined, inert: !active, className: className, children: children }));
+}
+FormStepsStep.sxFormStep = true;
+/** The steps as numbered marks on a rail that fills; a step done shows a check, the current one is `aria-current`. */
+export function FormStepsProgress({ className }) {
+    const c = useSteps("Progress");
+    return (_jsxs("div", { "data-sx-steps-progress": "", className: className, children: [_jsxs("span", { "data-sx-steps-rail": "", "aria-hidden": true, children: [_jsx("span", { "data-sx-steps-fill": "" }), c.effects.flatMap((e) => e.layers
+                        .filter((l) => l.slot === "track")
+                        .map((l, k) => _jsx("span", { "data-sx-steps-layer": e.id, "data-sx-steps-part": l.part, "data-sx-steps-keep": l.keep ? "" : undefined }, `${e.id}-${k}`)))] }), _jsx("ol", { "aria-label": c.words.progress, children: c.titles.map((title, i) => (_jsxs("li", { "data-sx-step-mark": "", "data-sx-done": i < c.at ? "" : undefined, "aria-current": i === c.at ? "step" : undefined, children: [_jsxs("span", { "data-sx-step-dot": "", "aria-hidden": true, children: [_jsx("span", { "data-sx-step-number": "", children: i + 1 }), _jsx("svg", { viewBox: "0 0 24 24", focusable: "false", children: _jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5", pathLength: 1 }) })] }), _jsxs("span", { "data-sx-step-name": "", children: [title, i < c.at ? _jsxs("span", { "data-sx-steps-sr": "", children: [" ", c.words.done] }) : null] })] }, i))) })] }));
+}
+/** Moves on, once the step checks out. On the last step it is the form's submit button, with the `submit` words. */
+export function FormStepsNext({ submit = "Send", children = "Next", onClick, ...rest }) {
+    const c = useSteps("Next");
+    // a new button for the last step: the click that moves onto it can't submit the form on its way
+    return c.at >= c.count - 1 ? (_jsx("button", { type: "submit", "data-sx-steps-next": "", onClick: onClick, ...rest, children: submit }, "sx-submit")) : (_jsx("button", { type: "button", "data-sx-steps-next": "", onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                void c.next();
+        }, ...rest, children: children }, "sx-next"));
+}
+/** Goes back a step, without checking it. Hidden on the first step. */
+export function FormStepsBack({ children = "Back", onClick, ...rest }) {
+    const c = useSteps("Back");
+    return (_jsx("button", { type: "button", "data-sx-steps-back": "", hidden: c.at === 0, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                c.back();
+        }, ...rest, children: children }));
+}

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

@@ -0,0 +1,27 @@
+import { type CSSProperties, type ReactNode } from "react";
+export interface FormSwapProps {
+    /** The second view shows (the success message, the sign-up form, the card's back). */
+    readonly swapped: boolean;
+    readonly first: ReactNode;
+    readonly second: ReactNode;
+    /**
+     * `"success"`: the form gives way to a message, a check drawing itself; `"panel"`: two forms side by side, a panel
+     * sliding over the one not in use (stacked in a box under 36rem); `"flip"`: a card turned over. Default `"success"`.
+     */
+    readonly look?: "success" | "panel" | "flip";
+    /** With `look="panel"`: what the panel shows over the second view and over the first (a line, a button to swap). */
+    readonly panel?: readonly [ReactNode, ReactNode];
+    readonly unstyled?: boolean;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Two views in one place: a form and its success message, a sign-in and a sign-up form, a card's two sides. The one not
+ * shown is unseen and inert. On a swap the box eases to the new view's height and the focus moves into it: onto the
+ * success message itself (read out), or the new form's first field.
+ *
+ * ```tsx
+ * <FormSwap swapped={sent} first={<ContactForm onSent={() => setSent(true)} />} second={<p>Thanks: we will be in touch.</p>} />
+ * ```
+ */
+export declare function FormSwap({ swapped, first, second, look, panel, unstyled, className, style }: FormSwapProps): import("react").JSX.Element;

package/dist/forms/controls/FormSwap.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { styleHref } from "../../backgrounds/hosts/CssHost.js";
+import { motionOnly } from "../../transitions/progress.js";
+import { useMorph } from "../runtime/useMorph.js";
+import { SWAP_CSS, SWAP_MOTION } from "../swap.js";
+const FOCUSABLE = "input:not([type=hidden]):not(:disabled), select:not(:disabled), textarea:not(:disabled), button:not(:disabled), a[href]";
+/**
+ * Two views in one place: a form and its success message, a sign-in and a sign-up form, a card's two sides. The one not
+ * shown is unseen and inert. On a swap the box eases to the new view's height and the focus moves into it: onto the
+ * success message itself (read out), or the new form's first field.
+ *
+ * ```tsx
+ * <FormSwap swapped={sent} first={<ContactForm onSent={() => setSent(true)} />} second={<p>Thanks: we will be in touch.</p>} />
+ * ```
+ */
+export function FormSwap({ swapped, first, second, look = "success", panel, unstyled, className, style }) {
+    const stage = useRef(null);
+    const [moved, setMoved] = useState(false);
+    const was = useRef(swapped);
+    useMorph(stage, swapped, look !== "flip");
+    useEffect(() => {
+        if (was.current === swapped)
+            return;
+        was.current = swapped;
+        setMoved(true);
+        const view = stage.current?.querySelector(`[data-sx-swap-view="${swapped ? "second" : "first"}"]`);
+        if (!view)
+            return;
+        if (look === "success" && swapped)
+            view.focus({ preventScroll: true });
+        else
+            (view.querySelector(FOCUSABLE) ?? view).focus({ preventScroll: true });
+    }, [swapped, look]);
+    const motion = motionOnly(SWAP_MOTION);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { href: styleHref("form-swap", SWAP_CSS), precedence: "sx", children: SWAP_CSS }), _jsx("style", { href: styleHref("form-swap-motion", motion), precedence: "sx", children: motion }), _jsx("div", { "data-sx-swap": "", "data-sx-look": look, "data-sx-swapped": swapped ? "" : undefined, "data-sx-moved": moved ? "" : undefined, "data-sx-styled": unstyled ? undefined : "", className: className, style: style, children: _jsxs("div", { ref: stage, "data-sx-swap-stage": "", children: [_jsx("div", { "data-sx-swap-view": "first", "data-sx-active": swapped ? undefined : "", inert: swapped, tabIndex: -1, children: first }), _jsxs("div", { "data-sx-swap-view": "second", "data-sx-active": swapped ? "" : undefined, inert: !swapped, tabIndex: -1, children: [look === "success" ? (_jsx("span", { "data-sx-swap-check": "", "aria-hidden": true, children: _jsxs("svg", { viewBox: "0 0 48 48", focusable: "false", children: [_jsx("circle", { cx: "24", cy: "24", r: "21" }), _jsx("path", { d: "m14 25 7 7 14-15", pathLength: 1 })] }) })) : null, second] }), look === "panel" && panel ? (_jsxs("div", { "data-sx-swap-panel": "", children: [_jsx("div", { "data-sx-swap-face": "first", "data-sx-active": swapped ? undefined : "", inert: swapped, children: panel[0] }), _jsx("div", { "data-sx-swap-face": "second", "data-sx-active": swapped ? "" : undefined, inert: !swapped, children: panel[1] })] })) : null] }) })] }));
+}

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

@@ -0,0 +1,50 @@
+import { type ComponentPropsWithRef, type CSSProperties } from "react";
+/** The words an InlineEdit says, for your language. `{label}` is its label. */
+export interface InlineEditLabels {
+    readonly edit?: string;
+    readonly saved?: string;
+    readonly failed?: string;
+}
+interface InlineEditOwnProps {
+    /** What the text is ("Title"): names the field and its edit button ("Edit Title"). The text alone doesn't say. */
+    readonly label: string;
+    /** `"textarea"` for several lines: Enter adds a line there, Ctrl / ⌘ + Enter keeps the edit. Default `"input"`. */
+    readonly as?: "input" | "textarea";
+    readonly value?: string;
+    readonly defaultValue?: string;
+    /**
+     * Called with the new text once an edit is kept (Enter, or leaving the field). Return a promise and the text shows as
+     * saving until it settles; if it fails, the text goes back and the field says so.
+     */
+    readonly onSave?: (value: string) => void | Promise<unknown>;
+    /** Called when an edit is thrown away (Esc). */
+    readonly onCancel?: () => void;
+    /** Shown, quieter, while the text is empty. */
+    readonly placeholder?: string;
+    /** Leaving the field keeps the edit. `false`: leaving throws it away, only Enter keeps it. Default `true`. */
+    readonly saveOnBlur?: boolean;
+    readonly labels?: InlineEditLabels;
+    readonly unstyled?: boolean;
+    /** Goes on the input. */
+    readonly className?: string;
+    /** Goes on the text (the button you click to edit). */
+    readonly textClassName?: string;
+    readonly rootClassName?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Every other prop goes on the real input, `ref` included: `name`, `onChange`, `onBlur`, `required`, `maxLength`, so
+ * `{...register("title")}` spreads onto it, and a plain form submits the text even while nobody edits it.
+ */
+export type InlineEditProps = InlineEditOwnProps & Omit<ComponentPropsWithRef<"input">, keyof InlineEditOwnProps | "type">;
+/**
+ * Text that turns into a field and back: a click (or Enter on it) opens the field with the text selected, Enter or
+ * leaving it keeps the edit, Esc throws it away and gives the text back. The real input is always in the page, so a
+ * form submits it; at rest it is inert and unseen.
+ *
+ * ```tsx
+ * <InlineEdit label="Title" defaultValue={page.title} onSave={(title) => save({ title })} />
+ * ```
+ */
+export declare function InlineEdit(props: InlineEditProps): import("react").JSX.Element;
+export {};

package/dist/forms/controls/InlineEdit.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { styleHref } from "../../backgrounds/hosts/CssHost.js";
+import { motionOnly } from "../../transitions/progress.js";
+import { INLINE_CSS, INLINE_MOTION } from "../inline.js";
+import { setNativeValue } from "./fieldTools.js";
+const WORDS = { edit: "Edit {label}", saved: "Saved", failed: "Couldn't save: the change was undone" };
+/**
+ * Text that turns into a field and back: a click (or Enter on it) opens the field with the text selected, Enter or
+ * leaving it keeps the edit, Esc throws it away and gives the text back. The real input is always in the page, so a
+ * form submits it; at rest it is inert and unseen.
+ *
+ * ```tsx
+ * <InlineEdit label="Title" defaultValue={page.title} onSave={(title) => save({ title })} />
+ * ```
+ */
+export function InlineEdit(props) {
+    const { label, as = "input", value, defaultValue, onSave, onCancel, placeholder, saveOnBlur = true, labels, unstyled, className, textClassName, rootClassName, style, disabled, id: ownId, ...rest } = props;
+    const words = { ...WORDS, ...labels };
+    const auto = useId().replace(/[^\w-]/g, "");
+    const id = ownId ?? `sx-inline${auto}`;
+    const textId = `${id}-text`;
+    const input = useRef(null);
+    const view = useRef(null);
+    const [editing, setEditing] = useState(false);
+    const live = useRef(false);
+    live.current = editing;
+    const [text, setText] = useState(() => String(value ?? defaultValue ?? ""));
+    const [status, setStatus] = useState("idle");
+    const [said, setSaid] = useState("");
+    const kept = useRef("");
+    const shown = value ?? text;
+    const start = () => {
+        const el = input.current;
+        if (!el || disabled)
+            return;
+        kept.current = el.value;
+        setEditing(true);
+    };
+    useLayoutEffect(() => {
+        const el = input.current;
+        if (!editing || !el)
+            return;
+        el.focus();
+        el.select();
+    }, [editing]);
+    useEffect(() => {
+        if (status !== "saved")
+            return;
+        const t = setTimeout(() => setStatus("idle"), 1600);
+        return () => clearTimeout(t);
+    }, [status]);
+    // a form reset puts the input back: show its text again
+    useEffect(() => {
+        const el = input.current;
+        const form = el?.form;
+        if (!el || !form)
+            return;
+        const later = () => setTimeout(() => setText(el.value));
+        form.addEventListener("reset", later);
+        return () => form.removeEventListener("reset", later);
+    }, []);
+    const finish = (keep, refocus) => {
+        const el = input.current;
+        if (!el || !live.current)
+            return;
+        const before = kept.current;
+        // a kept edit the field's own checks refuse (required, a pattern): Enter stays to fix it, leaving undoes it
+        if (keep && !el.checkValidity()) {
+            if (refocus)
+                return;
+            keep = false;
+        }
+        live.current = false;
+        setEditing(false);
+        if (refocus)
+            requestAnimationFrame(() => view.current?.focus());
+        const next = el.value;
+        if (!keep) {
+            if (next !== before)
+                setNativeValue(el, before);
+            onCancel?.();
+            return;
+        }
+        if (next === before)
+            return;
+        const result = onSave?.(next);
+        const say = (s) => setSaid((now) => (now === s ? `${s} ` : s));
+        if (result && typeof result.then === "function") {
+            setStatus("saving");
+            result.then(() => {
+                setStatus("saved");
+                say(words.saved);
+            }, () => {
+                setNativeValue(el, before);
+                setStatus("failed");
+                say(words.failed);
+            });
+        }
+        else {
+            setStatus("saved");
+            say(words.saved);
+        }
+    };
+    const keys = (e) => {
+        rest.onKeyDown?.(e);
+        if (e.defaultPrevented || e.nativeEvent.isComposing)
+            return;
+        if (e.key === "Escape") {
+            e.preventDefault();
+            finish(false, true);
+        }
+        else if (e.key === "Enter" && (as === "input" || e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            finish(true, true);
+        }
+    };
+    const ownRef = rest.ref;
+    const setRef = (el) => {
+        input.current = el;
+        if (typeof ownRef === "function")
+            ownRef(el);
+        else if (ownRef)
+            ownRef.current = el;
+    };
+    const { ref: _ref, onKeyDown: _keys, onChange, onBlur, ...own } = rest;
+    const Control = as;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { href: styleHref("form-inline", INLINE_CSS), precedence: "sx", children: INLINE_CSS }), _jsx("style", { href: styleHref("form-inline-motion", INLINE_MOTION), precedence: "sx", children: motionOnly(INLINE_MOTION) }), _jsxs("span", { "data-sx-inline": "", "data-sx-styled": unstyled ? undefined : "", "data-sx-editing": editing ? "" : undefined, "data-sx-saving": status === "saving" ? "" : undefined, "data-sx-saved": status === "saved" ? "" : undefined, "data-sx-empty": shown === "" ? "" : undefined, className: rootClassName, style: style, children: [_jsxs("button", { ref: view, type: "button", "data-sx-inline-view": "", "aria-label": words.edit.replace("{label}", label), "aria-describedby": textId, "aria-busy": status === "saving" || undefined, disabled: disabled, inert: editing, className: textClassName, onClick: start, children: [_jsx("span", { "data-sx-inline-text": "", id: textId, children: shown === "" ? placeholder : shown }), _jsx("svg", { "data-sx-inline-icon": "", viewBox: "0 0 24 24", "aria-hidden": true, focusable: "false", children: _jsx("path", { d: "M4 20h4L19 9l-4-4L4 16v4ZM13.5 6.5l4 4" }) }), _jsx("svg", { "data-sx-inline-done": "", viewBox: "0 0 24 24", "aria-hidden": true, focusable: "false", children: _jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5", pathLength: 1 }) })] }), _jsx(Control, { "aria-label": rest["aria-labelledby"] ? undefined : label, ...own, ...(value !== undefined ? { value } : defaultValue !== undefined ? { defaultValue } : {}), ...(as === "input" ? { size: 1 } : { cols: 1, rows: own.rows ?? 2 }), ref: setRef, id: id, "data-sx-inline-control": "", placeholder: placeholder, disabled: disabled, inert: !editing, className: className, onChange: (e) => {
+                            setText(e.target.value);
+                            onChange?.(e);
+                        }, onKeyDown: keys, onBlur: (e) => {
+                            finish(saveOnBlur, false);
+                            onBlur?.(e);
+                        } }), _jsx("span", { "data-sx-inline-sr": "", role: "status", children: said })] })] }));
+}

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

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+import { type FieldProps } from "./Field.js";
+import { type FieldLabels } from "./fieldTools.js";
+/** The words a NumberField says, for your language, besides Field's own. */
+export interface NumberFieldLabels extends FieldLabels {
+    readonly increment?: string;
+    readonly decrement?: string;
+}
+interface NumberOwnProps {
+    /** The number, when you hold it. `null` or `""`: empty. */
+    readonly value?: number | string | null;
+    readonly defaultValue?: number | string;
+    /** Numbers, or number strings as React Hook Form's `register()` passes them. */
+    readonly min?: number | string;
+    readonly max?: number | string;
+    /** How far one press of − / + or one arrow key goes. Page Up / Page Down go ten. Default `1`. */
+    readonly step?: number | string;
+    /** How the number reads while the field doesn't have the focus: `Intl.NumberFormat` options (currency, percent …). */
+    readonly format?: Intl.NumberFormatOptions;
+    /** The locale for the digits and separators. Default the visitor's. */
+    readonly locale?: string;
+    /** Drag across the label to change the number: `true`, or the pixels per step (default 6). A click still types. */
+    readonly scrub?: boolean | number;
+    /** `false`: the number changes at once, without rolling. */
+    readonly roll?: boolean;
+    readonly labels?: NumberFieldLabels;
+    /** Your own content at the end, before − / +. */
+    readonly end?: ReactNode;
+}
+/** Every other prop is Field's, and goes on the real `<input type="number">`: `name`, `onChange`, `ref` … */
+export type NumberFieldProps = NumberOwnProps & Omit<FieldProps<"input">, keyof NumberOwnProps | "as" | "type">;
+/**
+ * A number field on the browser's own `<input type="number">` (so its checks, `min` / `max` / `step`, a phone's number
+ * keyboard and a plain form submit all work), built on `Field`: its look and its effects apply. − and + step the number
+ * (↑ / ↓ too, Page Up / Page Down by ten); the digits roll to each new value; pushing past `min` or `max` shakes the
+ * field instead. With `scrub`, a drag across the label changes the number.
+ *
+ * ```tsx
+ * <NumberField label="Guests" min={1} max={12} defaultValue={2} scrub {...register("guests", { valueAsNumber: true })} />
+ * ```
+ */
+export declare function NumberField(props: NumberFieldProps): import("react").JSX.Element;
+export {};