@sincpro/web-ui 1.5.0 → 1.7.0

package/dist/foundations/copy.es.js

@@ -110,6 +110,14 @@ export const SPANISH_COPY = {
         unset: "sin definir",
         none: "Ninguna",
         changed: "modificado",
+        showSecret: "Mostrar contraseña",
+        hideSecret: "Ocultar contraseña",
+        capsLock: "Bloq Mayús está activado",
+        secretSet: "contraseña establecida",
+        newTab: "se abre en otra pestaña",
+        hours: "h",
+        unit: "Unidad",
+        palette: "Paleta",
     },
     choice: {
         noResults: "Sin resultados",
@@ -260,12 +268,44 @@ export const SPANISH_COPY = {
         field: "Copiar «{label}»",
         empty: "No hay nada que copiar",
     },
+    richText: {
+        toolbar: "Formato del texto",
+        bold: "Negrita",
+        italic: "Cursiva",
+        underline: "Subrayado",
+        strike: "Tachado",
+        heading: "Título",
+        subheading: "Subtítulo",
+        bulletList: "Lista con viñetas",
+        orderedList: "Lista numerada",
+        quote: "Cita",
+        link: "Enlace",
+        linkUrl: "Dirección del enlace",
+        applyLink: "Aplicar",
+        removeLink: "Quitar enlace",
+        badLink: "Escribí una web (empresa.bo), un correo o un teléfono.",
+        table: "Insertar tabla",
+        undo: "Deshacer",
+        redo: "Rehacer",
+        clear: "Quitar formato",
+        mentions: "Personas",
+        noMatches: "No coincide nadie",
+    },
     sorting: {
         label: "Ordenar",
         by: "ordenar por",
         asc: "ascendente",
         desc: "descendente",
         clear: "sin orden",
+        addHint: "Mayús+clic para agregarla como desempate",
+        place: "orden {place}, {direction}",
+        add: "Agregar criterio",
+        none: "Sin orden: las filas van como llegaron.",
+        flip: "Invertir el orden por {field}",
+        remove: "Quitar el orden por {field}",
+        move: "Mover el orden por {field}",
+        more: "{label} +{count}",
+        then: "luego por",
     },
     time: { justNow: "recién", invalid: "fecha inválida", noDate: "sin fecha" },
     calendar: {
@@ -324,6 +364,18 @@ export const SPANISH_COPY = {
         finish: "Terminar",
         busy: "Procesando…",
     },
+    stepFlow: {
+        steps: "Pasos",
+        position: "Paso {index} de {total}",
+        announce: "{position}: {title}",
+        done: "hecho",
+        pending: "pendiente",
+        cancel: "Cancelar",
+        back: "Atrás",
+        next: "Siguiente",
+        finish: "Terminar",
+        working: "Procesando…",
+    },
     report: { open: "Abrir {name}", close: "Cerrar {name}", concept: "Concepto" },
     builder: {
         filter: "Filtro",
@@ -478,6 +530,20 @@ export const SPANISH_COPY = {
         createTag: "Crear «{name}»",
         editCell: "Editar {column}",
     },
+    attachments: {
+        label: "Adjuntos",
+        empty: "Todavía no hay archivos adjuntos.",
+        emptyAdd: "Todavía no hay archivos adjuntos. Soltá uno acá o elegilo.",
+        add: "Soltá otro archivo acá o elegilo.",
+        download: "Descargar",
+        remove: "Quitar el archivo",
+        removed: "Se quitó «{name}».",
+        undo: "Deshacer",
+        uploading: "Subiendo {name}",
+        cancelUpload: "Cancelar la subida",
+        failed: "No se pudo subir el archivo.",
+        retry: "Reintentar",
+    },
     theme: {
         label: "Tema",
         system: "Sistema",
@@ -517,4 +583,24 @@ export const SPANISH_COPY = {
         to: "a",
         empty: "vacío",
     },
+    media: {
+        dropImage: "Soltá una imagen acá, pegala o elegila.",
+        chooseImage: "Elegir imagen",
+        changeImage: "Cambiar imagen",
+        removeImage: "Quitar imagen",
+        notImage: "El archivo no es una imagen. Elegí un PNG, JPG o WebP.",
+        crop: "Recorte de la imagen",
+        cropHelp: "Arrastrá la imagen o movela con las flechas; + y − acercan y alejan.",
+        zoomIn: "Acercar",
+        zoomOut: "Alejar",
+        applyCrop: "Aplicar recorte",
+        cancel: "Cancelar",
+        signaturePad: "Área de firma",
+        signatureHelp: "Firmá con el mouse o con el dedo sobre la línea.",
+        clear: "Limpiar",
+        typeName: "Escribir mi nombre",
+        drawInstead: "Dibujar la firma",
+        typedName: "Nombre para la firma",
+        signature: "Firma",
+    },
 };

package/dist/foundations/copy.js

@@ -86,6 +86,14 @@ export const ENGLISH_COPY = {
         unset: "not set",
         none: "None",
         changed: "changed",
+        showSecret: "Show password",
+        hideSecret: "Hide password",
+        capsLock: "Caps Lock is on",
+        secretSet: "password set",
+        newTab: "opens in a new tab",
+        hours: "h",
+        unit: "Unit",
+        palette: "Palette",
     },
     choice: {
         noResults: "No results",
@@ -208,12 +216,44 @@ export const ENGLISH_COPY = {
         field: "Copy «{label}»",
         empty: "Nothing to copy",
     },
+    richText: {
+        toolbar: "Text formatting",
+        bold: "Bold",
+        italic: "Italic",
+        underline: "Underline",
+        strike: "Strikethrough",
+        heading: "Heading",
+        subheading: "Subheading",
+        bulletList: "Bulleted list",
+        orderedList: "Numbered list",
+        quote: "Quote",
+        link: "Link",
+        linkUrl: "Link address",
+        applyLink: "Apply",
+        removeLink: "Remove link",
+        badLink: "Write a website (example.com), an email or a phone number.",
+        table: "Insert table",
+        undo: "Undo",
+        redo: "Redo",
+        clear: "Clear formatting",
+        mentions: "People",
+        noMatches: "Nobody matches",
+    },
     sorting: {
         label: "Sort",
         by: "sort by",
         asc: "ascending",
         desc: "descending",
         clear: "no order",
+        addHint: "Shift+click to add as a tie-breaker",
+        place: "sort {place}, {direction}",
+        add: "Add a criterion",
+        none: "No order: the rows go as they came.",
+        flip: "Flip the order by {field}",
+        remove: "Remove the order by {field}",
+        move: "Move the order by {field}",
+        more: "{label} +{count}",
+        then: "then by",
     },
     dates: {
         last: "last {count} {unit}",
@@ -310,6 +350,18 @@ export const ENGLISH_COPY = {
         finish: "Finish",
         busy: "Working…",
     },
+    stepFlow: {
+        steps: "Steps",
+        position: "Step {index} of {total}",
+        announce: "{position}: {title}",
+        done: "done",
+        pending: "to do",
+        cancel: "Cancel",
+        back: "Back",
+        next: "Next",
+        finish: "Finish",
+        working: "Working…",
+    },
     report: {
         open: "Open {name}",
         close: "Close {name}",
@@ -473,6 +525,20 @@ export const ENGLISH_COPY = {
         createTag: "Create «{name}»",
         editCell: "Edit {column}",
     },
+    attachments: {
+        label: "Attachments",
+        empty: "No files attached yet.",
+        emptyAdd: "No files attached yet. Drop one here, or choose it.",
+        add: "Drop another file here, or choose one.",
+        download: "Download",
+        remove: "Remove the file",
+        removed: "Removed «{name}».",
+        undo: "Undo",
+        uploading: "Uploading {name}",
+        cancelUpload: "Cancel the upload",
+        failed: "The file could not be uploaded.",
+        retry: "Try again",
+    },
     theme: {
         label: "Theme",
         system: "System",
@@ -512,6 +578,26 @@ export const ENGLISH_COPY = {
         to: "to",
         empty: "empty",
     },
+    media: {
+        dropImage: "Drop an image here, paste it, or choose one.",
+        chooseImage: "Choose image",
+        changeImage: "Change image",
+        removeImage: "Remove image",
+        notImage: "That file is not an image. Choose a PNG, JPG or WebP.",
+        crop: "Image crop",
+        cropHelp: "Drag the image, or move it with the arrow keys; + and − zoom in and out.",
+        zoomIn: "Zoom in",
+        zoomOut: "Zoom out",
+        applyCrop: "Apply crop",
+        cancel: "Cancel",
+        signaturePad: "Signature pad",
+        signatureHelp: "Sign with the mouse or a finger over the line.",
+        clear: "Clear",
+        typeName: "Type my name instead",
+        drawInstead: "Draw the signature",
+        typedName: "Name for the signature",
+        signature: "Signature",
+    },
 };
 /* The mechanism is `catalog.tsx`, the same one an application uses for its own words. */
 const ui = createCopy(ENGLISH_COPY);

package/dist/foundations/form.d.ts

@@ -18,7 +18,24 @@ export type FieldIds = {
     invalid: boolean;
 };
 export declare const FieldIdsContext: import("react").Context<FieldIds | null>;
-/** The ids of the enclosing `Field`, resolved against the control's own props. */
+/**
+ * What a place WITHOUT a `Field` says to the control in it: what describes it and whether it
+ * is in error — no id, no label.
+ *
+ * Context: a cell of an editable table has no label of its own (its control carries an
+ * `aria-label`, the column's name) but it can be wrong — «la cantidad supera el stock» — and
+ * that has to reach the control the same way a field's error does, or the error is a red
+ * cell nobody hears. The table provides this around each control it edits; every control
+ * that reads `useFieldIds` (the package's and an application's own) gets `aria-invalid` and
+ * `aria-describedby` without the table knowing what control it is.
+ */
+export type ControlState = {
+    describedBy?: string;
+    invalid?: boolean;
+};
+export declare const ControlStateContext: import("react").Context<ControlState | null>;
+/** The ids of the enclosing `Field` — or, outside one, the state of the place the control
+ *  sits in (a cell) — resolved against the control's own props. */
 export declare function useFieldIds(own: {
     id?: string;
     describedBy?: string;

package/dist/foundations/form.js

@@ -2,14 +2,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 export const FieldIdsContext = createContext(null);
-/** The ids of the enclosing `Field`, resolved against the control's own props. */
+export const ControlStateContext = createContext(null);
+/** The ids of the enclosing `Field` — or, outside one, the state of the place the control
+ *  sits in (a cell) — resolved against the control's own props. */
 export function useFieldIds(own) {
     const field = useContext(FieldIdsContext);
+    const place = useContext(ControlStateContext);
     return {
         id: own.id ?? field?.id,
         labelledBy: field?.labelId,
-        describedBy: own.describedBy ?? field?.describedBy,
-        invalid: own.invalid ?? field?.invalid ?? false,
+        describedBy: own.describedBy ?? field?.describedBy ?? place?.describedBy,
+        invalid: own.invalid ?? field?.invalid ?? place?.invalid ?? false,
     };
 }
 const Ctx = createContext("edit");

package/dist/primitives/button/Button.js

@@ -195,7 +195,9 @@ const TONE = {
         chrome: "text-chrome-bad hover:bg-chrome-bad/12",
     },
 };
-const BOX = "inline-flex shrink-0 items-center justify-center rounded-pill transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+/* `aria-pressed` is a TOGGLE's state — bold on, a filter applied: it reads as the action
+   tint, the same as a chosen option, so «on» is seen and not only heard. */
+const BOX = "inline-flex shrink-0 items-center justify-center rounded-pill transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-pressed:bg-primary/12 aria-pressed:text-primary";
 const SQUARE = {
     sm: "size-(--size-control-sm)",
     md: "size-(--size-control-md)",

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

@@ -0,0 +1,41 @@
+import { type CardBrand } from "./card.js";
+import { type ControlProps } from "./Field.js";
+export declare function CardNumberInput({ id: ownId, value, onChange, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, mode, brand: givenBrand, masked, "aria-label": ariaLabel, }: ControlProps & {
+    /** The digits, without spaces. Whatever else comes in (a pasted «4242-4242…») is dropped. */
+    value: string;
+    onChange?: (digits: string) => void;
+    placeholder?: string;
+    /** The brand when the digits cannot say it — a stored card known only by its last four. */
+    brand?: CardBrand;
+    /** In read mode, only the last four. On by default. */
+    masked?: boolean;
+}): import("react").JSX.Element;
+/**
+ * The expiry of a card, «MM/AA». The value is the four digits («1228»); the slash is drawn.
+ *
+ * Context: the month that can only be one digit gets its zero while typing — «4» is April,
+ * so «04/» — which is what a card's face says and what saves a keystroke. The caret is kept
+ * by digit, like `CardNumberInput`. Whether it already EXPIRED is the form's to say, with
+ * `isExpiryValid`: good through the last day of its month.
+ */
+export declare function CardExpiryInput({ mode, value, onChange, placeholder, ...props }: ControlProps & {
+    /** The four digits, MMAA. */
+    value: string;
+    onChange?: (digits: string) => void;
+    placeholder?: string;
+}): import("react").JSX.Element;
+/**
+ * The security code on the back of a card (on the front of an Amex): three digits, four for
+ * Amex — `brand` decides, so it can be the one `CardNumberInput` recognised.
+ *
+ * Read mode never shows it: a fixed row of dots, as long as the brand's code, and the copy
+ * button finds nothing to copy. It is asked once and not stored — a form that keeps it is
+ * outside what a card network allows.
+ */
+export declare function CardCodeInput({ mode, value, onChange, brand, placeholder, ...props }: ControlProps & {
+    value: string;
+    onChange?: (digits: string) => void;
+    /** The card's brand, for its length. */
+    brand?: CardBrand | null;
+    placeholder?: string;
+}): import("react").JSX.Element;

package/dist/primitives/field/CardNumberInput.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFieldIds, useFormMode } from "../../foundations/form.js";
+import { FieldGroup } from "./aria.js";
+import { cardBrand, cardBrandName, cardCodeLength, cardDigits, cardMaxDigits, formatCardNumber, formatExpiry, maskCardNumber, } from "./card.js";
+import { controlClasses, nameOf, ReadValue, } from "./Field.js";
+import { maskedChange, useMaskCaret } from "./mask.js";
+import { CreditCard } from "lucide-react";
+import { Input, TextField as AriaTextField } from "react-aria-components";
+/**
+ * A payment card number: typed in the brand's groups, the brand named as it is recognised.
+ *
+ * Context: the value is the DIGITS (`card.ts`); the spaces are drawn. Formatting while
+ * typing has one trap — inserting a space moves the text under the caret, and a caret that
+ * jumps to the end on every fourth digit makes correcting the middle of a number impossible.
+ * So the caret is kept by DIGIT, not by character: after each change it goes back after the
+ * same number of digits it was after. Deleting a space deletes the digit before it, which is
+ * what the person meant.
+ *
+ * What it does not decide is whether the number is WRONG: `isValidCardNumber` (Luhn, length
+ * by brand) is exported for the form to say it in the field's `error`, when the person tries
+ * — not on every keystroke, while the number is still half typed.
+ *
+ * Read mode shows the brand and the last four («Visa •••• 4242»): a stored card is shown that
+ * way everywhere. `masked={false}` shows it whole, for the one screen that has to. An
+ * application that only keeps the last four passes those and the `brand`.
+ */
+const isDigit = (char) => /\d/.test(char);
+export function CardNumberInput({ id: ownId, value, onChange, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, mode, brand: givenBrand, masked = true, "aria-label": ariaLabel, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const digits = cardDigits(value);
+    const brand = givenBrand ?? cardBrand(digits);
+    const formatted = formatCardNumber(digits, brand);
+    const { input, keep } = useMaskCaret(formatted, isDigit);
+    if (useFormMode(mode) === "read") {
+        const shown = masked ? maskCardNumber(digits) : formatted;
+        return (_jsx(ReadValue, { mono: true, value: digits === "" ? null : brand === null ? shown : `${cardBrandName(brand)} ${shown}` }));
+    }
+    const change = (raw) => {
+        const { next, caret } = maskedChange({
+            raw,
+            at: input.current?.selectionStart ?? raw.length,
+            current: digits,
+            drawn: formatted,
+            clean: cardDigits,
+            max: cardMaxDigits(cardDigits(raw), givenBrand),
+        });
+        keep(caret);
+        onChange?.(next);
+    };
+    return (_jsx(AriaTextField, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel, placeholder), value: formatted, onChange: change, inputMode: "numeric", autoComplete: "cc-number", isInvalid: invalid, isDisabled: disabled, className: "w-full min-w-0", children: _jsxs(FieldGroup, { isInvalid: invalid, isDisabled: disabled, children: [_jsx(CreditCard, { "aria-hidden": true, className: "ml-2.5 size-(--size-icon-sm) shrink-0 text-muted", strokeWidth: 2 }), _jsx(Input, { ref: input, "aria-describedby": describedBy, placeholder: placeholder, spellCheck: false, className: "h-full min-w-0 flex-1 bg-transparent px-2 font-mono text-meta text-ink tabular-nums outline-0 placeholder:text-muted disabled:cursor-not-allowed" }), brand === null ? null : (
+                /* The brand as it is recognised: a wrong first digit shows up here, before the
+                   sixteenth. Read with the number, as part of what the field holds. */
+                _jsx("span", { className: "mr-2.5 shrink-0 text-micro font-medium whitespace-nowrap text-muted", children: cardBrandName(brand) }))] }) }));
+}
+/** The box of a short card datum: numeric keyboard, its autofill, digits in tabular mono. */
+function CardDatumBox({ id: ownId, value, onChange, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, "aria-label": ariaLabel, autoComplete, inputRef, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    return (_jsx(AriaTextField, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel, placeholder), value: value, onChange: onChange, inputMode: "numeric", autoComplete: autoComplete, isInvalid: invalid, isDisabled: disabled, className: "w-full min-w-0", children: _jsx(Input, { ...(inputRef === undefined ? {} : { ref: inputRef }), "aria-describedby": describedBy, placeholder: placeholder, spellCheck: false, className: `${controlClasses(invalid)} font-mono tabular-nums` }) }));
+}
+/**
+ * The expiry of a card, «MM/AA». The value is the four digits («1228»); the slash is drawn.
+ *
+ * Context: the month that can only be one digit gets its zero while typing — «4» is April,
+ * so «04/» — which is what a card's face says and what saves a keystroke. The caret is kept
+ * by digit, like `CardNumberInput`. Whether it already EXPIRED is the form's to say, with
+ * `isExpiryValid`: good through the last day of its month.
+ */
+export function CardExpiryInput({ mode, value, onChange, placeholder = "MM/AA", ...props }) {
+    const digits = cardDigits(value).slice(0, 4);
+    const drawn = formatExpiry(digits);
+    const { input, keep } = useMaskCaret(drawn, isDigit);
+    if (useFormMode(mode) === "read") {
+        return _jsx(ReadValue, { mono: true, value: digits === "" ? null : drawn });
+    }
+    const change = (raw) => {
+        let { next, caret } = maskedChange({
+            raw,
+            at: input.current?.selectionStart ?? raw.length,
+            current: digits,
+            drawn,
+            clean: cardDigits,
+            max: 4,
+        });
+        /* Only while TYPING: deleting the zero of «04» must not put it back. */
+        if (raw.length > drawn.length && /^[2-9]/.test(next)) {
+            next = `0${next}`.slice(0, 4);
+            caret = Math.min(caret + 1, next.length);
+        }
+        keep(caret);
+        onChange?.(next);
+    };
+    return (_jsx(CardDatumBox, { ...props, value: drawn, onChange: change, placeholder: placeholder, autoComplete: "cc-exp", inputRef: input }));
+}
+/**
+ * The security code on the back of a card (on the front of an Amex): three digits, four for
+ * Amex — `brand` decides, so it can be the one `CardNumberInput` recognised.
+ *
+ * Read mode never shows it: a fixed row of dots, as long as the brand's code, and the copy
+ * button finds nothing to copy. It is asked once and not stored — a form that keeps it is
+ * outside what a card network allows.
+ */
+export function CardCodeInput({ mode, value, onChange, brand, placeholder, ...props }) {
+    const length = cardCodeLength(brand);
+    if (useFormMode(mode) === "read") {
+        return (_jsx(ReadValue, { value: value === "" ? null : (_jsx("span", { "aria-hidden": true, "data-copy-skip": "", className: "tracking-widest", children: "•".repeat(length) })) }));
+    }
+    return (_jsx(CardDatumBox, { ...props, value: cardDigits(value).slice(0, length), onChange: (raw) => onChange?.(cardDigits(raw).slice(0, length)), placeholder: placeholder ?? "•".repeat(length), autoComplete: "cc-csc" }));
+}

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

@@ -0,0 +1,18 @@
+import { type ControlProps } from "./Field.js";
+/**
+ * A verification code of N characters — the one an SMS or an email sends — drawn as N boxes.
+ *
+ * Context: the boxes are only drawn. Underneath is ONE input, transparent over them: six
+ * inputs that pass the focus from one to the next break pasting the whole code, the
+ * device's «fill from SMS» (`autoComplete="one-time-code"`), and a screen reader, which
+ * hears six fields with no name. One input does all three, and the boxes show where the next
+ * character goes.
+ */
+export declare function CodeInput({ id: ownId, value, onChange, length, alphanumeric, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, mode, "aria-label": ariaLabel, }: ControlProps & {
+    value: string;
+    onChange?: (code: string) => void;
+    /** How many characters. */
+    length?: number;
+    /** Letters too, in capitals. Digits only by default. */
+    alphanumeric?: boolean;
+}): import("react").JSX.Element;

package/dist/primitives/field/CodeInput.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFieldIds, useFormMode } from "../../foundations/form.js";
+import { nameOf, ReadValue } from "./Field.js";
+import { useState } from "react";
+import { Input, TextField as AriaTextField } from "react-aria-components";
+/**
+ * A verification code of N characters — the one an SMS or an email sends — drawn as N boxes.
+ *
+ * Context: the boxes are only drawn. Underneath is ONE input, transparent over them: six
+ * inputs that pass the focus from one to the next break pasting the whole code, the
+ * device's «fill from SMS» (`autoComplete="one-time-code"`), and a screen reader, which
+ * hears six fields with no name. One input does all three, and the boxes show where the next
+ * character goes.
+ */
+export function CodeInput({ id: ownId, value, onChange, length = 6, alphanumeric = false, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, mode, "aria-label": ariaLabel, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const [focused, setFocused] = useState(false);
+    const clean = (text) => (alphanumeric
+        ? text.replace(/[^a-z\d]/gi, "").toUpperCase()
+        : text.replace(/\D/g, "")).slice(0, length);
+    const code = clean(value);
+    if (useFormMode(mode) === "read") {
+        return _jsx(ReadValue, { mono: true, value: code === "" ? null : code });
+    }
+    /* The box the next character goes into; the last one once the code is whole. */
+    const current = Math.min(code.length, length - 1);
+    return (_jsxs(AriaTextField, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel), value: code, onChange: (next) => onChange?.(clean(next)), inputMode: alphanumeric ? "text" : "numeric", autoComplete: "one-time-code", isInvalid: invalid, isDisabled: disabled, className: "relative inline-flex", children: [_jsx("span", { "aria-hidden": true, className: "flex gap-1.5", children: Array.from({ length }, (_, index) => (_jsx("span", { className: `flex size-(--size-control-md) items-center justify-center rounded-control border bg-surface font-mono text-lead text-ink transition-colors duration-(--duration-instant) ${invalid
+                        ? "border-danger"
+                        : focused && index === current
+                            ? "border-primary outline-2 outline-offset-1 outline-primary"
+                            : "border-line-strong"} ${disabled ? "bg-ground text-muted" : ""}`, children: code[index] ?? "" }, index))) }), _jsx(Input, { "aria-describedby": describedBy, spellCheck: false, onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: "absolute inset-0 size-full cursor-text bg-transparent text-transparent caret-transparent outline-0 selection:bg-transparent disabled:cursor-not-allowed" })] }));
+}

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

@@ -0,0 +1,21 @@
+import { type ControlProps } from "./Field.js";
+/**
+ * A color: the label of a tag, the color of a stage, a brand color — as a hex «#1F6FEB».
+ *
+ * Context: it is React Aria's colour set. `ColorField` takes the hex typed or pasted (with or
+ * without `#`) and reads it back normalised; `ColorSwatch` draws it with the colour's NAME
+ * as its accessible name («azul oscuro vívido»), so a screen reader hears a colour and not
+ * six hex digits; `ColorSwatchPicker` is the row of `swatches` the application offers — its
+ * own palette, never one baked in here — moved through with the arrow keys.
+ *
+ * The colours are DATA (what the record holds), so they are drawn from the value and not
+ * from the tokens; everything around them is the system's.
+ */
+export declare function ColorInput({ id: ownId, value, onChange, swatches, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, mode, "aria-label": ariaLabel, }: ControlProps & {
+    /** «#RRGGBB»; `""` is no colour. */
+    value: string;
+    onChange?: (hex: string) => void;
+    /** The application's palette, offered above the field. */
+    swatches?: readonly string[];
+    placeholder?: string;
+}): import("react").JSX.Element;

package/dist/primitives/field/ColorInput.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds, useFormMode } from "../../foundations/form.js";
+import { FieldGroup } from "./aria.js";
+import { nameOf, ReadValue } from "./Field.js";
+import { ColorField, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, Input, parseColor, } from "react-aria-components";
+/** A hex the color parser takes, or `null`. */
+function colorOf(value) {
+    try {
+        return value.trim() === "" ? null : parseColor(value);
+    }
+    catch {
+        return null;
+    }
+}
+const SWATCH = "size-(--size-icon-md) shrink-0 rounded-mark border border-line-strong";
+/**
+ * A color: the label of a tag, the color of a stage, a brand color — as a hex «#1F6FEB».
+ *
+ * Context: it is React Aria's colour set. `ColorField` takes the hex typed or pasted (with or
+ * without `#`) and reads it back normalised; `ColorSwatch` draws it with the colour's NAME
+ * as its accessible name («azul oscuro vívido»), so a screen reader hears a colour and not
+ * six hex digits; `ColorSwatchPicker` is the row of `swatches` the application offers — its
+ * own palette, never one baked in here — moved through with the arrow keys.
+ *
+ * The colours are DATA (what the record holds), so they are drawn from the value and not
+ * from the tokens; everything around them is the system's.
+ */
+export function ColorInput({ id: ownId, value, onChange, swatches, placeholder = "#RRGGBB", 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 color = colorOf(value);
+    if (useFormMode(mode) === "read") {
+        return (_jsx(ReadValue, { mono: true, value: color === null ? null : (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(ColorSwatch, { color: color, className: SWATCH }), color.toString("hex")] })) }));
+    }
+    return (_jsxs("div", { className: "flex w-full min-w-0 flex-col gap-1.5", children: [swatches === undefined || swatches.length === 0 ? null : (_jsx(ColorSwatchPicker, { "aria-label": copy.field.palette, ...(color === null ? {} : { value: color }), onChange: (next) => onChange?.(next.toString("hex")), className: "flex flex-wrap gap-1", children: swatches.map((one) => (_jsx(ColorSwatchPickerItem, { color: one, isDisabled: disabled, className: "rounded-mark p-0.5 outline-0 data-focus-visible:outline-2 data-focus-visible:outline-primary data-selected:ring-2 data-selected:ring-primary", children: _jsx(ColorSwatch, { className: SWATCH }) }, one))) })), _jsx(ColorField, { id: id, "aria-labelledby": labelledBy, "aria-label": nameOf(labelledBy, ariaLabel, placeholder), value: color, onChange: (next) => onChange?.(next === null ? "" : next.toString("hex")), isInvalid: invalid, isDisabled: disabled, className: "w-full min-w-0", children: _jsxs(FieldGroup, { isInvalid: invalid, isDisabled: disabled, children: [color === null ? (_jsx("span", { "aria-hidden": true, className: `ml-2 ${SWATCH} bg-ground` })) : (_jsx(ColorSwatch, { color: color, className: `ml-2 ${SWATCH}` })), _jsx(Input, { "aria-describedby": describedBy, placeholder: placeholder, spellCheck: false, className: "h-full min-w-0 flex-1 bg-transparent px-2 font-mono text-meta text-ink uppercase outline-0 placeholder:text-muted disabled:cursor-not-allowed" })] }) })] }));
+}

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

@@ -0,0 +1,18 @@
+import { type ControlProps } from "./Field.js";
+type AddressProps = ControlProps & {
+    value: string;
+    onChange?: (next: string) => void;
+    placeholder?: string;
+};
+/** An email: the email keyboard and autofill; in read mode, a `mailto:` link. */
+export declare function EmailInput({ mode, ...props }: AddressProps): import("react").JSX.Element;
+/** A phone as people write it — «+591 7 123-4567», kept as typed. The phone keyboard and
+ *  autofill; in read mode a `tel:` link, and with `whatsapp` a second link to write there. */
+export declare function PhoneInput({ mode, whatsapp, ...props }: AddressProps & {
+    /** Also offer WhatsApp in read mode — the number needs its country code. */
+    whatsapp?: boolean;
+}): import("react").JSX.Element;
+/** A website: the URL keyboard; in read mode a link that opens in a new tab, read without
+ *  its `https://`. A bare «sincpro.com.bo» is kept as typed and linked with `https://`. */
+export declare function UrlInput({ mode, ...props }: AddressProps): import("react").JSX.Element;
+export {};