@sincpro/web-ui 1.6.0 → 1.7.0

package/dist/primitives/field/DurationInput.d.ts

@@ -0,0 +1,20 @@
+import { type ControlProps } from "./Field.js";
+/**
+ * A duration in hours, typed and read as «8:30» — the hours of a timesheet, the time a task
+ * is estimated at.
+ *
+ * Context: a `NumberInput` with «8,5» is right for the sum and wrong for the person, who
+ * says «ocho y media» and thinks in minutes. So the value stays a NUMBER of hours (8.5, what
+ * adds up) and the box speaks hours and minutes. While typing it is free text — «8:30»,
+ * «8,5», «8h30», «45m» all mean something — and on leaving the field (or Enter) it is read
+ * and redrawn as «h:mm». Something that is not a duration goes back to the last good value
+ * instead of being saved as zero. ↑/↓ add or take `step` minutes, 15 by default.
+ */
+export declare function DurationInput({ id: ownId, value, onChange, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, mode, step, "aria-label": ariaLabel, }: ControlProps & {
+    /** Hours: 8.5 is «8:30». `""` is the empty field. */
+    value: number | "";
+    onChange?: (hours: number | "") => void;
+    placeholder?: string;
+    /** Minutes the arrow keys add or take. */
+    step?: number;
+}): import("react").JSX.Element;

package/dist/primitives/field/DurationInput.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds, useFormMode } from "../../foundations/form.js";
+import { formatDuration, parseDuration } from "./duration.js";
+import { controlClasses, nameOf, ReadValue, } from "./Field.js";
+import { useState } from "react";
+import { Input, TextField as AriaTextField } from "react-aria-components";
+/**
+ * A duration in hours, typed and read as «8:30» — the hours of a timesheet, the time a task
+ * is estimated at.
+ *
+ * Context: a `NumberInput` with «8,5» is right for the sum and wrong for the person, who
+ * says «ocho y media» and thinks in minutes. So the value stays a NUMBER of hours (8.5, what
+ * adds up) and the box speaks hours and minutes. While typing it is free text — «8:30»,
+ * «8,5», «8h30», «45m» all mean something — and on leaving the field (or Enter) it is read
+ * and redrawn as «h:mm». Something that is not a duration goes back to the last good value
+ * instead of being saved as zero. ↑/↓ add or take `step` minutes, 15 by default.
+ */
+export function DurationInput({ id: ownId, value, onChange, placeholder = "0:00", describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, mode, step = 15, "aria-label": ariaLabel, }) {
+    const copy = useUiCopy();
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    /** What is being typed; `null` when the box just shows the value. */
+    const [draft, setDraft] = useState(null);
+    const shown = value === "" ? "" : formatDuration(value);
+    if (useFormMode(mode) === "read") {
+        return (_jsx(ReadValue, { value: value === "" ? null : (_jsxs("span", { className: "tabular-nums", children: [shown, " ", copy.field.hours] })) }));
+    }
+    const commit = () => {
+        if (draft === null)
+            return;
+        const parsed = parseDuration(draft);
+        setDraft(null);
+        if (parsed !== null && parsed !== value)
+            onChange?.(parsed);
+    };
+    const arrows = (event) => {
+        if (event.key === "Enter")
+            return commit();
+        if (event.key !== "ArrowUp" && event.key !== "ArrowDown")
+            return;
+        event.preventDefault();
+        const base = draft === null ? value : parseDuration(draft);
+        const hours = base === "" || base === null ? 0 : base;
+        const minutes = Math.round(hours * 60) + (event.key === "ArrowUp" ? step : -step);
+        setDraft(null);
+        onChange?.(minutes / 60);
+    };
+    return (_jsxs(AriaTextField, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel, placeholder), value: draft ?? shown, onChange: setDraft, inputMode: "decimal", isInvalid: invalid, isDisabled: disabled, className: "flex w-full min-w-0 items-center gap-2", children: [_jsx(Input, { "aria-describedby": describedBy, placeholder: placeholder, spellCheck: false, onBlur: commit, onKeyDown: arrows, className: `${controlClasses(invalid)} tabular-nums` }), _jsx("span", { className: "shrink-0 text-meta text-muted", children: copy.field.hours })] }));
+}

package/dist/primitives/field/Field.d.ts

@@ -1,6 +1,7 @@
 import { type FieldIds } from "../../foundations/form.js";
 import { type FormMode } from "../../foundations/form.js";
 import { type FieldNote } from "./note.js";
+import { type Rounding } from "../value/rounding.js";
 import { type ReactNode } from "react";
 export declare function Field({ label, hint, error, required, children, htmlFor, layout, action, mode, note, changed, copy: copyAs, }: {
     label: string;
@@ -83,8 +84,9 @@ export declare function ReadValue({ value, mono }: {
  *  be born with another height, another radius or another focus. That was the
  *  original defect: every file wrote its own `<input className="…">`. */
 export declare function controlClasses(invalid?: boolean): string;
-/** What every text control shares: the field's wiring, overridable prop by prop. */
-type ControlProps = {
+/** What every text control shares: the field's wiring, overridable prop by prop. Exported for
+ *  the family's other controls (`PasswordInput`, `CardNumberInput`), not from the barrel. */
+export type ControlProps = {
     id?: string;
     describedBy?: string;
     invalid?: boolean;
@@ -95,6 +97,11 @@ type ControlProps = {
      *  the box of a message. Inside a field, the field's label names it. */
     "aria-label"?: string;
 };
+/** The accessible name of a control. Inside a `Field` the field's label names it; outside,
+ *  the consumer's `aria-label`, and as a last resort the placeholder — which is what a
+ *  browser reads for a bare `<input placeholder>` anyway, so a control outside a form is
+ *  never nameless. */
+export declare function nameOf(labelledBy: string | undefined, ariaLabel?: string, placeholder?: string): string | undefined;
 /**
  * One line of text: a business name, a reference, a NIT.
  *
@@ -129,7 +136,7 @@ export declare function TextInput({ id: ownId, value, onChange, placeholder, des
  * number the field would have accepted. The value stays a plain `number`, and `""` is the
  * empty field — never `NaN`, which is how React Aria says it inside.
  */
-export declare function NumberInput({ id: ownId, value, onChange, min, max, step, unit, format, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, mode, "aria-label": ariaLabel, }: ControlProps & {
+export declare function NumberInput({ id: ownId, value, onChange, min, max, step, unit, units, rounding, format, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, mode, "aria-label": ariaLabel, }: ControlProps & {
     value: number | "";
     onChange?: (next: number | "") => void;
     min?: number;
@@ -138,6 +145,20 @@ export declare function NumberInput({ id: ownId, value, onChange, min, max, step
     /** The unit, attached to the field: "días", "u.", "kg". A number without a unit in a
      *  form is half a question. For money, prefer `format` with a currency. */
     unit?: string;
+    /** The unit (or the currency) is CHOSEN, in the same box: «12 · kg ▾», «500 · USD ▾». The
+     *  number does not convert — what a kilo is in tonnes is the application's — it only says
+     *  which one was meant. Takes the place of `unit`. */
+    units?: {
+        options: readonly {
+            id: string;
+            label: string;
+        }[];
+        value: string;
+        onChange: (id: string) => void;
+    };
+    /** The VALUE is rounded when it is committed — to 0,05 for cash, to the unit's precision —
+     *  so what the form submits is what is drawn. See `roundTo`. */
+    rounding?: Rounding;
     /** How the number is written: `{ style: "currency", currency: "BOB" }`,
      *  `{ style: "percent" }`, `{ minimumFractionDigits: 2 }`. In the copy's locale. */
     format?: Intl.NumberFormatOptions;
@@ -180,4 +201,3 @@ export declare function Select({ id: ownId, value, options, onChange, describedB
     onChange?: (next: string) => void;
     placeholder?: string;
 }): import("react").JSX.Element;
-export {};

package/dist/primitives/field/Field.js

@@ -12,6 +12,7 @@ import { useSheetLayout } from "./layout.js";
 import { describedByOf, NoteCard, NoteFlag, } from "./note.js";
 import { Hint } from "../hint/Hint.js";
 import { Popover } from "../overlay/Popover.js";
+import { roundTo } from "../value/rounding.js";
 import { AlertCircle, Check, ChevronDown, ChevronUp } from "lucide-react";
 import { useId, useRef } from "react";
 import { Button as AriaButton, Input, ListBox, ListBoxItem, NumberField as AriaNumberField, Select as AriaSelect, SelectValue, TextArea as AriaTextArea, TextField as AriaTextField, } from "react-aria-components";
@@ -137,7 +138,7 @@ export function controlClasses(invalid = false) {
  *  the consumer's `aria-label`, and as a last resort the placeholder — which is what a
  *  browser reads for a bare `<input placeholder>` anyway, so a control outside a form is
  *  never nameless. */
-function nameOf(labelledBy, ariaLabel, placeholder) {
+export function nameOf(labelledBy, ariaLabel, placeholder) {
     return labelledBy === undefined ? (ariaLabel ?? placeholder) : ariaLabel;
 }
 /**
@@ -180,17 +181,29 @@ const stepper = "flex min-h-0 flex-1 cursor-default items-center justify-center
  * number the field would have accepted. The value stays a plain `number`, and `""` is the
  * empty field — never `NaN`, which is how React Aria says it inside.
  */
-export function NumberInput({ id: ownId, value, onChange, min, max, step, unit, format, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, mode, "aria-label": ariaLabel, }) {
+export function NumberInput({ id: ownId, value, onChange, min, max, step, unit, units, rounding, format, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, mode, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
         invalid: ownInvalid,
     });
+    const unitId = `${useId()}-unit`;
+    const copy = useUiCopy();
     const read = useReadNumber(format);
+    const unitLabel = units === undefined ? unit : units.options.find((one) => one.id === units.value)?.label;
     if (useFormMode(mode) === "read") {
-        return (_jsx(ReadValue, { value: value === "" ? null : (_jsxs("span", { className: "tabular-nums", children: [read(value), unit === undefined ? "" : ` ${unit}`] })) }));
+        return (_jsx(ReadValue, { value: value === "" ? null : (_jsxs("span", { className: "tabular-nums", children: [read(value), unitLabel === undefined ? "" : ` ${unitLabel}`] })) }));
     }
-    return (_jsx(AriaLocale, { children: _jsxs(AriaNumberField, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel, placeholder), value: value === "" ? Number.NaN : value, onChange: (next) => onChange?.(Number.isNaN(next) ? "" : next), minValue: min, maxValue: max, step: step, formatOptions: format, isInvalid: invalid, isDisabled: disabled, className: "flex w-full min-w-0 items-center gap-2", children: [_jsxs(FieldGroup, { children: [_jsx(Input, { "aria-describedby": describedBy, placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent px-2.5 text-meta text-ink tabular-nums outline-0 placeholder:text-muted disabled:cursor-not-allowed" }), _jsxs("span", { className: "flex h-full shrink-0 flex-col border-l border-line", children: [_jsx(AriaButton, { slot: "increment", className: stepper, children: _jsx(ChevronUp, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 }) }), _jsx(AriaButton, { slot: "decrement", className: `${stepper} border-t border-line`, children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 }) })] })] }), unit === undefined ? null : (_jsx("span", { className: "shrink-0 text-meta whitespace-nowrap text-muted", children: unit }))] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaNumberField, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel, placeholder), value: value === "" ? Number.NaN : value, onChange: (next) => onChange?.(Number.isNaN(next)
+                ? ""
+                : rounding === undefined
+                    ? next
+                    : roundTo(next, rounding.increment, rounding.method)), minValue: min, maxValue: max, step: step, formatOptions: format, isInvalid: invalid, isDisabled: disabled, className: "flex w-full min-w-0 items-center gap-2", children: [_jsxs(FieldGroup, { children: [_jsx(Input, { "aria-describedby": describedBy, placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent px-2.5 text-meta text-ink tabular-nums outline-0 placeholder:text-muted disabled:cursor-not-allowed" }), _jsxs("span", { className: "flex h-full shrink-0 flex-col border-l border-line", children: [_jsx(AriaButton, { slot: "increment", className: stepper, children: _jsx(ChevronUp, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 }) }), _jsx(AriaButton, { slot: "decrement", className: `${stepper} border-t border-line`, children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 }) })] }), units === undefined ? null : (
+                        /* A native select: a short closed list inside a box, where a popover would be one
+                           more layer over the form for three options. */
+                        _jsx("select", { ...(labelledBy === undefined
+                                ? { "aria-label": copy.field.unit }
+                                : { "aria-labelledby": `${unitId} ${labelledBy}` }), value: units.value, disabled: disabled, onChange: (event) => units.onChange(event.target.value), className: "h-full shrink-0 cursor-pointer border-l border-line bg-transparent px-2 text-meta text-ink outline-0 focus-visible:bg-primary/8 disabled:cursor-not-allowed", children: units.options.map((one) => (_jsx("option", { value: one.id, children: one.label }, one.id))) })), units === undefined ? null : (_jsx("span", { id: unitId, hidden: true, children: copy.field.unit }))] }), unit === undefined || units !== undefined ? null : (_jsx("span", { className: "shrink-0 text-meta whitespace-nowrap text-muted", children: unit }))] }) }));
 }
 /**
  * Several lines of prose: the notes of an order, the reason of a credit note.

package/dist/primitives/field/ImageInput.d.ts

@@ -0,0 +1,51 @@
+import { type ControlProps } from "./Field.js";
+/** What `onChange` hands over: the FILE, for the upload — a multipart part with its name and
+ *  type, the thing a server stores — and its `url` (a data URL), to show it right away. */
+export type ImageChange = {
+    file: File;
+    url: string;
+};
+/**
+ * An image the record holds — a product photo, a logo, the face on a contact: chosen,
+ * dropped or pasted, previewed, replaced and removed, and cropped to a shape when the field
+ * has one.
+ *
+ * Context: `Thumb` and `Avatar` showed an image and nothing could change it; this is the
+ * control that does. The way in is `DropZone`'s — React Aria's `DropZone` and `FileTrigger`,
+ * so a drop, a paste (⌘/Ctrl+V of a copied image) and the keyboard all reach it — but what
+ * it holds is the image itself, drawn where the file's name would be.
+ *
+ * **The value is a string; the change carries the file.** `value` is whatever an `<img>` can
+ * draw — the URL the server keeps, or the data URL of a pick not yet saved — so the record
+ * passes what it has and the control never asks which. `onChange` hands over `{ file, url }`:
+ * the `File` for the upload (with its real name and type), and the `url` to put back into
+ * `value` at once, so the new image shows before the server answers. A data URL and not an
+ * object URL on purpose: it needs no `revoke`, it does not die with the page, and the form
+ * can hold it in state without anyone owning its lifetime. `null` is «removed».
+ *
+ * **The crop is the field's, not the person's.** With `aspect` (1 for an avatar, 16/9 for a
+ * banner) a picked image opens in a frame of that shape before it is taken: drag it or move
+ * it with the arrows, zoom with the two buttons or with + and −, Enter applies and Escape
+ * leaves it as it was. It is drawn on a canvas, so the file that comes out is ALREADY the
+ * crop — the server receives the avatar, not a photo plus four numbers to apply later — and
+ * at most `maxSide` pixels on its longer side. Without `aspect` the image is taken as it is.
+ *
+ * In read mode it draws the image with its `alt`; with no image, the «not set» mark.
+ */
+export declare function ImageInput({ id: ownId, value, onChange, alt, aspect: ownAspect, shape, accept, maxSide, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, mode, "aria-label": ariaLabel, }: ControlProps & {
+    /** What an `<img>` draws: a stored URL or a data URL. `null` or `""` is no image. */
+    value: string | null;
+    onChange?: (next: ImageChange | null) => void;
+    /** What the image shows, said to whoever cannot see it: «Foto de Ana Gutiérrez». `""` when
+     *  the name beside it already says everything. */
+    alt: string;
+    /** Width over height of the crop. Present, a picked image is cropped to it before it is
+     *  taken. A `circle` crops to 1 by default. */
+    aspect?: number;
+    /** `circle` for a face: the frame and the preview are round (the file stays square). */
+    shape?: "rect" | "circle";
+    /** The file dialog's filter. A drop is checked as an image whatever this says. */
+    accept?: string;
+    /** The longest side the cropped file is written at, in pixels. */
+    maxSide?: number;
+}): import("react").JSX.Element;

package/dist/primitives/field/ImageInput.js

@@ -0,0 +1,267 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds, useFormMode } from "../../foundations/form.js";
+import { cn } from "../../foundations/variants.js";
+import { Button, buttonClasses, IconButton } from "../button/Button.js";
+import { nameOf, ReadValue } from "./Field.js";
+import { capturePointer, clampCrop, CROP_CENTERED, CROP_MAX_ZOOM, croppedName, croppedType, cropRegion, isImageFile, outputSize, panCrop, zoomCrop, } from "./media.js";
+import { AlertCircle, ImagePlus, ZoomIn, ZoomOut } from "lucide-react";
+import { useEffect, useId, useRef, useState, } from "react";
+import { Button as AriaButton, DropZone as AriaDropZone, FileTrigger, } from "react-aria-components";
+function readDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(reader.error ?? new Error("unreadable"));
+        reader.readAsDataURL(file);
+    });
+}
+function loadImage(url) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error("not an image"));
+        image.src = url;
+    });
+}
+function canvasBlob(canvas, type) {
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => (blob === null ? reject(new Error("no blob")) : resolve(blob)), type, 0.92);
+    });
+}
+/** How far one press of an arrow moves the image: a twentieth of the frame, a fifth with
+ *  Shift — fine enough to centre a face, coarse enough not to take forty presses. */
+const STEP = 0.05;
+const BIG_STEP = 0.2;
+const ZOOM_STEP = 1.2;
+const FRAME = {
+    rect: "w-40 rounded-box",
+    circle: "w-24 rounded-pill",
+};
+/**
+ * An image the record holds — a product photo, a logo, the face on a contact: chosen,
+ * dropped or pasted, previewed, replaced and removed, and cropped to a shape when the field
+ * has one.
+ *
+ * Context: `Thumb` and `Avatar` showed an image and nothing could change it; this is the
+ * control that does. The way in is `DropZone`'s — React Aria's `DropZone` and `FileTrigger`,
+ * so a drop, a paste (⌘/Ctrl+V of a copied image) and the keyboard all reach it — but what
+ * it holds is the image itself, drawn where the file's name would be.
+ *
+ * **The value is a string; the change carries the file.** `value` is whatever an `<img>` can
+ * draw — the URL the server keeps, or the data URL of a pick not yet saved — so the record
+ * passes what it has and the control never asks which. `onChange` hands over `{ file, url }`:
+ * the `File` for the upload (with its real name and type), and the `url` to put back into
+ * `value` at once, so the new image shows before the server answers. A data URL and not an
+ * object URL on purpose: it needs no `revoke`, it does not die with the page, and the form
+ * can hold it in state without anyone owning its lifetime. `null` is «removed».
+ *
+ * **The crop is the field's, not the person's.** With `aspect` (1 for an avatar, 16/9 for a
+ * banner) a picked image opens in a frame of that shape before it is taken: drag it or move
+ * it with the arrows, zoom with the two buttons or with + and −, Enter applies and Escape
+ * leaves it as it was. It is drawn on a canvas, so the file that comes out is ALREADY the
+ * crop — the server receives the avatar, not a photo plus four numbers to apply later — and
+ * at most `maxSide` pixels on its longer side. Without `aspect` the image is taken as it is.
+ *
+ * In read mode it draws the image with its `alt`; with no image, the «not set» mark.
+ */
+export function ImageInput({ id: ownId, value, onChange, alt, aspect: ownAspect, shape = "rect", accept = "image/*", maxSide = 1024, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, mode, "aria-label": ariaLabel, }) {
+    const copy = useUiCopy();
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const readMode = useFormMode(mode) === "read";
+    const [editing, setEditing] = useState(null);
+    const [failed, setFailed] = useState(false);
+    const [refocus, setRefocus] = useState(false);
+    const chooser = useRef(null);
+    const own = useId();
+    const errorId = `${own}-error`;
+    const aspect = ownAspect ?? (shape === "circle" ? 1 : undefined);
+    const has = value !== null && value !== "";
+    /* The editor and the remove button take their buttons with them when they close: the
+       focus goes back to the chooser, not to the top of the page. */
+    useEffect(() => {
+        if (!refocus)
+            return;
+        chooser.current?.focus();
+        setRefocus(false);
+    }, [refocus]);
+    if (readMode) {
+        return has ? (_jsx("span", { className: cn("block overflow-clip bg-ground", FRAME[shape]), children: _jsx("img", { src: value, alt: alt, style: { aspectRatio: aspect ?? 4 / 3 }, className: cn("block size-full", aspect === undefined ? "object-contain" : "object-cover") }) })) : (_jsx(ReadValue, { value: null }));
+    }
+    async function take(file) {
+        if (disabled)
+            return;
+        if (!isImageFile(file)) {
+            setFailed(true);
+            return;
+        }
+        try {
+            const url = await readDataUrl(file);
+            if (aspect === undefined) {
+                setFailed(false);
+                onChange?.({ file, url });
+                return;
+            }
+            const image = await loadImage(url);
+            const size = { width: image.naturalWidth, height: image.naturalHeight };
+            setFailed(false);
+            setEditing({ file, image, size, crop: clampCrop(size, aspect, CROP_CENTERED) });
+        }
+        catch {
+            setFailed(true);
+        }
+    }
+    async function onDrop(items) {
+        for (const item of items) {
+            if (item.kind === "file") {
+                await take(await item.getFile());
+                return;
+            }
+        }
+    }
+    const types = accept
+        .split(",")
+        .map((t) => t.trim())
+        .filter((t) => t !== "");
+    const describedAll = [describedBy, failed ? errorId : null].filter(Boolean).join(" ") || undefined;
+    const error = failed ? (_jsxs("p", { id: errorId, role: "alert", className: "flex items-start gap-1.5 text-micro text-danger", children: [_jsx(AlertCircle, { "aria-hidden": true, className: "mt-px size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "max-w-prose", children: copy.media.notImage })] })) : null;
+    if (editing !== null && aspect !== undefined) {
+        return (_jsx("div", { id: id, role: "group", "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel), "aria-describedby": describedBy, className: "flex w-full min-w-0 flex-col gap-2", children: _jsx(CropEditor, { editing: editing, aspect: aspect, shape: shape, onCrop: (crop) => setEditing({ ...editing, crop }), onCancel: () => {
+                    setEditing(null);
+                    setRefocus(true);
+                }, onApply: async () => {
+                    const { file, image, size, crop } = editing;
+                    const region = cropRegion(size, aspect, crop);
+                    const out = outputSize(region, maxSide);
+                    const canvas = document.createElement("canvas");
+                    canvas.width = out.width;
+                    canvas.height = out.height;
+                    canvas
+                        .getContext("2d")
+                        ?.drawImage(image, region.x, region.y, region.width, region.height, 0, 0, out.width, out.height);
+                    const type = croppedType(file.type);
+                    const url = canvas.toDataURL(type, 0.92);
+                    const blob = await canvasBlob(canvas, type);
+                    onChange?.({
+                        file: new File([blob], croppedName(file.name, type), { type }),
+                        url,
+                    });
+                    setEditing(null);
+                    setRefocus(true);
+                } }) }));
+    }
+    return (_jsxs("div", { id: id, role: "group", "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel), "aria-describedby": describedAll, className: "flex w-full min-w-0 flex-col gap-2", children: [_jsxs(AriaDropZone, { "aria-label": copy.media.dropImage, isDisabled: disabled, getDropOperation: () => (disabled ? "cancel" : "copy"), onDrop: (event) => void onDrop(event.items), className: ({ isDropTarget, isFocusVisible }) => cn("flex min-w-0 items-center gap-4 rounded-box border p-3 transition-colors duration-(--duration-instant) outline-primary outline-offset-2", isDropTarget
+                    ? "border-primary bg-primary/8 forced-colors:border-[Highlight]"
+                    : invalid || failed
+                        ? "border-danger bg-surface"
+                        : "border-dashed border-line-strong bg-surface", isFocusVisible ? "outline-2" : "outline-0"), children: [_jsx("span", { className: cn("flex shrink-0 items-center justify-center overflow-clip border border-line bg-ground text-muted", FRAME[shape]), style: { aspectRatio: aspect ?? 4 / 3 }, children: has ? (_jsx("img", { src: value, alt: alt, className: cn("block size-full", aspect === undefined ? "object-contain" : "object-cover") })) : (_jsx(ImagePlus, { "aria-hidden": true, className: "size-(--size-icon-lg)", strokeWidth: 1.5 })) }), _jsxs("div", { className: "flex min-w-0 flex-col items-start gap-2", children: [has ? null : _jsx("p", { className: "text-meta text-muted", children: copy.media.dropImage }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(FileTrigger, { acceptedFileTypes: types, onSelect: (files) => {
+                                            const file = files?.[0];
+                                            if (file !== undefined)
+                                                void take(file);
+                                        }, children: _jsx(AriaButton, { ref: chooser, isDisabled: disabled, "data-emphasis": "secondary", className: buttonClasses("secondary", "sm"), children: has ? copy.media.changeImage : copy.media.chooseImage }) }), has ? (_jsx(Button, { role: "ghost", size: "sm", disabled: disabled, onClick: () => {
+                                            setFailed(false);
+                                            onChange?.(null);
+                                            setRefocus(true);
+                                        }, children: copy.media.removeImage })) : null] })] })] }), error] }));
+}
+/**
+ * The frame a picked image is cropped in: the image on a canvas, moved by the pointer and by
+ * the keys, and the two zoom buttons.
+ *
+ * Context: one focusable surface (`role="application"`, so a screen reader hands the arrows
+ * to it instead of reading by line), named and described by the instruction that is also
+ * written under it — the keys are not a secret for whoever cannot see the frame, nor for
+ * whoever can. The zoom is said as a figure in a polite live region.
+ */
+function CropEditor({ editing, aspect, shape, onCrop, onCancel, onApply, }) {
+    const copy = useUiCopy();
+    const canvas = useRef(null);
+    const drag = useRef(null);
+    const helpId = `${useId()}-help`;
+    const { image, size, crop } = editing;
+    /* The frame is the person's first stop: the image just appeared, and the keys move it. */
+    useEffect(() => {
+        canvas.current?.focus();
+    }, []);
+    useEffect(() => {
+        const el = canvas.current;
+        if (el === null)
+            return;
+        const paint = () => {
+            const dpr = window.devicePixelRatio || 1;
+            const width = Math.max(1, Math.round(el.clientWidth * dpr));
+            const height = Math.max(1, Math.round((el.clientWidth / aspect) * dpr));
+            if (el.width !== width)
+                el.width = width;
+            if (el.height !== height)
+                el.height = height;
+            const ctx = el.getContext("2d");
+            if (ctx === null)
+                return;
+            const region = cropRegion(size, aspect, crop);
+            ctx.clearRect(0, 0, width, height);
+            ctx.drawImage(image, region.x, region.y, region.width, region.height, 0, 0, width, height);
+            if (shape === "circle") {
+                /* What the round preview will cut off, veiled in the surface's colour — read from
+                   the token at paint time, so the veil follows the theme. */
+                const veil = getComputedStyle(el).getPropertyValue("--color-surface").trim();
+                ctx.save();
+                ctx.globalAlpha = 0.6;
+                ctx.fillStyle = veil === "" ? getComputedStyle(el).backgroundColor : veil;
+                ctx.beginPath();
+                ctx.rect(0, 0, width, height);
+                ctx.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, Math.PI * 2);
+                ctx.fill("evenodd");
+                ctx.restore();
+            }
+        };
+        paint();
+        const observer = new ResizeObserver(paint);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [image, size, aspect, crop, shape]);
+    const pan = (dx, dy) => onCrop(panCrop(size, aspect, crop, dx, dy));
+    const zoom = (factor) => onCrop(zoomCrop(size, aspect, crop, factor));
+    function onKeyDown(event) {
+        const step = event.shiftKey ? BIG_STEP : STEP;
+        const keys = {
+            ArrowLeft: () => pan(-step, 0),
+            ArrowRight: () => pan(step, 0),
+            ArrowUp: () => pan(0, -step),
+            ArrowDown: () => pan(0, step),
+            "+": () => zoom(ZOOM_STEP),
+            "=": () => zoom(ZOOM_STEP),
+            "-": () => zoom(1 / ZOOM_STEP),
+            _: () => zoom(1 / ZOOM_STEP),
+            "0": () => onCrop(clampCrop(size, aspect, CROP_CENTERED)),
+            Enter: () => void onApply(),
+            Escape: onCancel,
+        };
+        const run = keys[event.key];
+        if (run === undefined)
+            return;
+        event.preventDefault();
+        run();
+    }
+    function onPointerDown(event) {
+        capturePointer(event);
+        drag.current = { x: event.clientX, y: event.clientY };
+    }
+    function onPointerMove(event) {
+        const from = drag.current;
+        if (from === null)
+            return;
+        const box = event.currentTarget.getBoundingClientRect();
+        drag.current = { x: event.clientX, y: event.clientY };
+        pan((event.clientX - from.x) / box.width, (event.clientY - from.y) / box.height);
+    }
+    const endDrag = () => {
+        drag.current = null;
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("canvas", { ref: canvas, role: "application", tabIndex: 0, "aria-label": copy.media.crop, "aria-describedby": helpId, onKeyDown: onKeyDown, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, style: { aspectRatio: aspect }, className: cn("block w-full max-w-xs cursor-grab touch-none border border-line-strong bg-ground outline-primary outline-offset-2 focus-visible:outline-2 active:cursor-grabbing", shape === "circle" ? "rounded-box" : "rounded-control") }), _jsx("p", { id: helpId, className: "max-w-xs text-micro text-muted", children: copy.media.cropHelp }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(IconButton, { icon: ZoomOut, label: copy.media.zoomOut, disabled: crop.zoom <= 1, onClick: () => zoom(1 / ZOOM_STEP) }), _jsxs("span", { "aria-live": "polite", className: "min-w-10 text-center text-micro text-muted tabular-nums", children: [Math.round(crop.zoom * 100), " %"] }), _jsx(IconButton, { icon: ZoomIn, label: copy.media.zoomIn, disabled: crop.zoom >= CROP_MAX_ZOOM, onClick: () => zoom(ZOOM_STEP) }), _jsxs("span", { className: "ml-auto flex items-center gap-2", children: [_jsx(Button, { role: "ghost", size: "sm", onClick: onCancel, children: copy.media.cancel }), _jsx(Button, { size: "sm", onClick: () => void onApply(), children: copy.media.applyCrop })] })] })] }));
+}

package/dist/primitives/field/PasswordInput.d.ts

@@ -0,0 +1,29 @@
+import { type ControlProps } from "./Field.js";
+/**
+ * A password: hidden while it is typed, shown on purpose with the eye.
+ *
+ * Context: it is `TextInput`'s wiring — React Aria's `TextField`, named and described by
+ * its `Field` through `useFieldIds` — with three things a password owes and a text does not:
+ *
+ * - **The eye.** Typing blind is where a long password goes wrong; the button shows it as
+ *   text and hides it again, and says which of the two it will do. `revealable={false}`
+ *   removes it, for a screen where it must not be shown.
+ * - **Caps Lock.** The most common reason a right password is refused. While it is on, a
+ *   line under the control says so — in the warn tone, with an icon and the words.
+ * - **Read mode never shows it.** It draws a fixed row of dots, the same for every length
+ *   (a length is a hint), and says «password set» to a screen reader. The field's copy
+ *   button copies what is SEEN: the dots are not a value, and a hidden input is skipped
+ *   (`clipboard.tsx`); revealed, it copies like any text.
+ *
+ * `autoComplete` tells a password manager what this is: `current-password` fills a login,
+ * `new-password` offers to generate one.
+ */
+export declare function PasswordInput({ id: ownId, value, onChange, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, mode, autoComplete, revealable, "aria-label": ariaLabel, }: ControlProps & {
+    value: string;
+    onChange?: (next: string) => void;
+    placeholder?: string;
+    /** `current-password` for a login, `new-password` when choosing one. */
+    autoComplete?: "current-password" | "new-password" | "off";
+    /** The eye that shows it. On by default; `false` where it must never be shown. */
+    revealable?: boolean;
+}): import("react").JSX.Element;

package/dist/primitives/field/PasswordInput.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds, useFormMode } from "../../foundations/form.js";
+import { FieldButton, FieldGroup } from "./aria.js";
+import { nameOf, ReadValue } from "./Field.js";
+import { Eye, EyeOff, TriangleAlert } from "lucide-react";
+import { useId, useState } from "react";
+import { Input, TextField as AriaTextField } from "react-aria-components";
+/**
+ * A password: hidden while it is typed, shown on purpose with the eye.
+ *
+ * Context: it is `TextInput`'s wiring — React Aria's `TextField`, named and described by
+ * its `Field` through `useFieldIds` — with three things a password owes and a text does not:
+ *
+ * - **The eye.** Typing blind is where a long password goes wrong; the button shows it as
+ *   text and hides it again, and says which of the two it will do. `revealable={false}`
+ *   removes it, for a screen where it must not be shown.
+ * - **Caps Lock.** The most common reason a right password is refused. While it is on, a
+ *   line under the control says so — in the warn tone, with an icon and the words.
+ * - **Read mode never shows it.** It draws a fixed row of dots, the same for every length
+ *   (a length is a hint), and says «password set» to a screen reader. The field's copy
+ *   button copies what is SEEN: the dots are not a value, and a hidden input is skipped
+ *   (`clipboard.tsx`); revealed, it copies like any text.
+ *
+ * `autoComplete` tells a password manager what this is: `current-password` fills a login,
+ * `new-password` offers to generate one.
+ */
+export function PasswordInput({ id: ownId, value, onChange, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, mode, autoComplete = "current-password", revealable = true, "aria-label": ariaLabel, }) {
+    const copy = useUiCopy();
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const [shown, setShown] = useState(false);
+    const [capsLock, setCapsLock] = useState(false);
+    const capsId = `${useId()}-caps`;
+    if (useFormMode(mode) === "read") {
+        return (_jsx(ReadValue, { value: value === "" ? null : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, "data-copy-skip": "", className: "tracking-widest", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }), _jsx("span", { className: "sr-only", children: copy.field.secretSet })] })) }));
+    }
+    const readCaps = (event) => setCapsLock(event.getModifierState("CapsLock"));
+    return (_jsxs("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [_jsx(AriaTextField, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel, placeholder), value: value, onChange: (next) => onChange?.(next), type: shown ? "text" : "password", autoComplete: autoComplete, isInvalid: invalid, isDisabled: disabled, className: "w-full min-w-0", children: _jsxs(FieldGroup, { isInvalid: invalid, isDisabled: disabled, children: [_jsx(Input, { "aria-describedby": [describedBy, capsLock ? capsId : null].filter(Boolean).join(" ") || undefined, placeholder: placeholder, spellCheck: false, onKeyDown: readCaps, onKeyUp: readCaps, onBlur: () => setCapsLock(false), className: "h-full min-w-0 flex-1 bg-transparent px-2.5 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed" }), revealable ? (_jsx(FieldButton, { "aria-label": shown ? copy.field.hideSecret : copy.field.showSecret, isDisabled: disabled, onPress: () => setShown((now) => !now), className: "mr-1", children: shown ? (_jsx(EyeOff, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 })) : (_jsx(Eye, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 })) })) : null] }) }), capsLock ? (_jsxs("p", { id: capsId, className: "flex items-center gap-1.5 text-micro text-warn", children: [_jsx(TriangleAlert, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), copy.field.capsLock] })) : null] }));
+}

package/dist/primitives/field/PatternInput.d.ts

@@ -0,0 +1,23 @@
+import { type ControlProps } from "./Field.js";
+/**
+ * An identifier with a fixed shape — a NIT, a CI, a bank account, an IBAN — typed on its
+ * `pattern` (`#` digit, `A` letter, `*` either; see `pattern.ts`).
+ *
+ * Context: written into a `TextInput`, «1020304-5», «10203045» and «1020304 5» were three
+ * values for the same company, and the search found one of them. Here the value is only the
+ * characters (`"10203045"`), the separators are drawn as they are typed, a character the
+ * slot does not take is not let in, and the caret stays where it was while the separators
+ * appear (`mask.ts`). Pasting «BO12 3456…» with any spacing lands in the slots.
+ *
+ * Read mode draws it on the pattern, in mono — a value written by a machine and compared
+ * with the one next to it. Whether it is COMPLETE is the form's to say: `isPatternComplete`.
+ */
+export declare function PatternInput({ id: ownId, value, onChange, pattern, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, mode, "aria-label": ariaLabel, }: ControlProps & {
+    /** The characters only, without separators. */
+    value: string;
+    onChange?: (value: string) => void;
+    /** «###-#######», «AA## #### #### ####». */
+    pattern: string;
+    /** Without one, the pattern itself with `0` for a digit: «000-0000000». */
+    placeholder?: string;
+}): import("react").JSX.Element;