@sincpro/web-ui 1.6.0 → 1.7.1

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;

package/dist/primitives/field/PatternInput.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFieldIds, useFormMode } from "../../foundations/form.js";
+import { controlClasses, nameOf, ReadValue, } from "./Field.js";
+import { maskedChange, useMaskCaret } from "./mask.js";
+import { formatPattern, patternLength, patternValue, } from "./pattern.js";
+import { Input, TextField as AriaTextField } from "react-aria-components";
+const isSlotChar = (char) => /[a-z\d]/i.test(char);
+/**
+ * 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 function PatternInput({ id: ownId, value, onChange, pattern, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, mode, "aria-label": ariaLabel, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const clean = patternValue(value, pattern);
+    const drawn = formatPattern(clean, pattern);
+    const { input, keep } = useMaskCaret(drawn, isSlotChar);
+    if (useFormMode(mode) === "read") {
+        return _jsx(ReadValue, { mono: true, value: clean === "" ? null : drawn });
+    }
+    const change = (raw) => {
+        const { next, caret } = maskedChange({
+            raw,
+            at: input.current?.selectionStart ?? raw.length,
+            current: clean,
+            drawn,
+            clean: (text) => patternValue(text, pattern),
+            max: patternLength(pattern),
+        });
+        keep(caret);
+        onChange?.(next);
+    };
+    const shown = placeholder ?? pattern.replace(/#/g, "0").replace(/\*/g, "X");
+    return (_jsx(AriaTextField, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel, shown), value: drawn, onChange: change, inputMode: /[A*]/.test(pattern) ? "text" : "numeric", isInvalid: invalid, isDisabled: disabled, className: "w-full min-w-0", children: _jsx(Input, { ref: input, "aria-describedby": describedBy, placeholder: shown, spellCheck: false, autoCapitalize: "characters", className: `${controlClasses(invalid)} font-mono tabular-nums` }) }));
+}

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

@@ -0,0 +1,18 @@
+export type MentionItem = {
+    id: string;
+    label: string;
+};
+export type RichTextEditorProps = {
+    id: string | undefined;
+    labelledBy: string | undefined;
+    describedBy: string | undefined;
+    invalid: boolean;
+    ariaLabel: string | undefined;
+    value: string;
+    onChange: ((html: string) => void) | undefined;
+    placeholder: string | undefined;
+    disabled: boolean;
+    toolbar: "full" | "basic" | "none";
+    mentions: ((query: string) => readonly MentionItem[] | Promise<readonly MentionItem[]>) | undefined;
+};
+export declare function RichTextEditor({ id, labelledBy, describedBy, invalid, ariaLabel, value, onChange, placeholder, disabled, toolbar, mentions, }: RichTextEditorProps): import("react").JSX.Element;