@sincpro/web-ui 1.6.0 → 1.7.1

package/dist/primitives/date/DateTime.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateFormatter, parseDateTime, parseTime, toCalendarDate, } from "@internationalized/date";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { Calendar } from "./Calendar.js";
 import { Segments } from "./DatePicker.js";
@@ -81,7 +81,7 @@ export function TimeField({ value, onChange, id: ownId, describedBy: ownDescribe
                 ? ""
                 : format.format(new Date(Date.UTC(1970, 0, 1, time.hour, time.minute))) }));
     }
-    return (_jsx(AriaLocale, { children: _jsx(AriaTimeField, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parseClock(value), onChange: (next) => onChange?.(next === null ? null : hhmm(next)), minValue: parseClock(min) ?? undefined, maxValue: parseClock(max) ?? undefined, hourCycle: hourCycle, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
+    return (_jsx(AriaLocale, { children: _jsx(AriaTimeField, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: parseClock(value), onChange: (next) => onChange?.(next === null ? null : hhmm(next)), minValue: parseClock(min) ?? undefined, maxValue: parseClock(max) ?? undefined, hourCycle: hourCycle, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
 }
 /** A day and its time — a delivery slot, an appointment: the day typed or picked on the
  *  calendar, the time typed after it. The value is a local `"YYYY-MM-DDTHH:MM"`, or `null`. */
@@ -96,5 +96,5 @@ export function DateTimePicker({ value, onChange, id: ownId, describedBy: ownDes
         const stamp = parseStamp(value);
         return _jsx(ReadValue, { value: stamp === null ? "" : format.format(stamp.toDate("UTC")) });
     }
-    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parseStamp(value), onChange: (next) => onChange?.(next === null ? null : stampOf(next)), minValue: parseStamp(min) ?? undefined, maxValue: parseStamp(max) ?? undefined, granularity: "minute", hourCycle: hourCycle, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, {}), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(Calendar, {}) }) })] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: parseStamp(value), onChange: (next) => onChange?.(next === null ? null : stampOf(next)), minValue: parseStamp(min) ?? undefined, maxValue: parseStamp(max) ?? undefined, granularity: "minute", hourCycle: hourCycle, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, {}), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(Calendar, {}) }) })] }) }));
 }

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 {};

package/dist/primitives/field/ContactInputs.js

@@ -0,0 +1,70 @@
+"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 { emailHref, telHref, urlHref, urlLabel, whatsappHref, } from "./contact.js";
+import { nameOf, ReadValue } from "./Field.js";
+import { Globe, Mail, MessageCircle, Phone } from "lucide-react";
+import { Input, TextField as AriaTextField } from "react-aria-components";
+/* ==================================================================== *
+ *  EMAIL, PHONE, WEBSITE — a text that is an ADDRESS.
+ *
+ *  Context: written into a `TextInput` they were plain text twice over. In
+ *  edit mode the phone's keyboard was the letters one, the browser offered no
+ *  autofill and underlined «agutierrez@» as a misspelling; in read mode an
+ *  email was a string you had to select and paste into the mail client.
+ *
+ *  So each one asks for its keyboard (`inputMode`), its autofill
+ *  (`autoComplete`) and its `type`, draws its icon inside the box so the field
+ *  says what it holds before anything is typed, and in read mode is a LINK —
+ *  `mailto:`, `tel:` (and WhatsApp when asked), the website in a new tab. The
+ *  links are built by `contact.ts`, which never turns «javascript:…» into one.
+ *
+ *  Whether the value is WRONG is the form's to say, on trying: `isEmail` and
+ *  `isUrl` are exported for that, like `isValidCardNumber`.
+ * ==================================================================== */
+const LINK = "min-w-0 truncate rounded-mark text-primary underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary";
+/** The shared box: React Aria's `TextField`, its keyboard and autofill, the icon in front. */
+function AddressInput({ id: ownId, value, onChange, placeholder, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, "aria-label": ariaLabel, icon: Icon, type, inputMode, autoComplete, }) {
+    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: (next) => onChange?.(next), type: type, inputMode: inputMode, autoComplete: autoComplete, isInvalid: invalid, isDisabled: disabled, className: "w-full min-w-0", children: _jsxs(FieldGroup, { isInvalid: invalid, isDisabled: disabled, children: [_jsx(Icon, { "aria-hidden": true, className: "ml-2.5 size-(--size-icon-sm) shrink-0 text-muted", strokeWidth: 2 }), _jsx(Input, { "aria-describedby": describedBy, placeholder: placeholder, spellCheck: false, className: `h-full min-w-0 flex-1 bg-transparent px-2 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed ${type === "tel" ? "tabular-nums" : ""}` })] }) }));
+}
+/** The read mode: a link when the value makes one, the plain text when it does not. */
+function ReadLink({ value, href, label, external = false, after, }) {
+    const copy = useUiCopy();
+    if (value.trim() === "")
+        return _jsx(ReadValue, { value: null });
+    if (href === null)
+        return _jsx(ReadValue, { value: value });
+    return (_jsx(ReadValue, { value: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsxs("a", { href: href, className: LINK, ...(external ? { target: "_blank", rel: "noopener noreferrer" } : {}), children: [label ?? value, external ? _jsxs("span", { className: "sr-only", children: [" (", copy.field.newTab, ")"] }) : null] }), after] }) }));
+}
+/** An email: the email keyboard and autofill; in read mode, a `mailto:` link. */
+export function EmailInput({ mode, ...props }) {
+    if (useFormMode(mode) === "read") {
+        return _jsx(ReadLink, { value: props.value, href: emailHref(props.value) });
+    }
+    return (_jsx(AddressInput, { ...props, icon: Mail, type: "email", inputMode: "email", autoComplete: "email" }));
+}
+/** 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 function PhoneInput({ mode, whatsapp = false, ...props }) {
+    const copy = useUiCopy();
+    if (useFormMode(mode) === "read") {
+        const chat = whatsapp ? whatsappHref(props.value) : null;
+        return (_jsx(ReadLink, { value: props.value, href: telHref(props.value), after: chat === null ? null : (_jsx("a", { href: chat, target: "_blank", rel: "noopener noreferrer", "aria-label": `${copy.person.whatsapp} (${copy.field.newTab})`, title: copy.person.whatsapp, "data-copy-skip": "", className: "inline-flex shrink-0 items-center rounded-mark p-0.5 text-primary hover:bg-primary/8 focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(MessageCircle, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 }) })) }));
+    }
+    return (_jsx(AddressInput, { ...props, icon: Phone, type: "tel", inputMode: "tel", autoComplete: "tel" }));
+}
+/** 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 function UrlInput({ mode, ...props }) {
+    if (useFormMode(mode) === "read") {
+        return (_jsx(ReadLink, { value: props.value, href: urlHref(props.value), label: urlLabel(props.value), external: true }));
+    }
+    return (_jsx(AddressInput, { ...props, icon: Globe, type: "url", inputMode: "url", autoComplete: "url" }));
+}

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;
@@ -92,9 +94,15 @@ type ControlProps = {
     /** Forces the mode. By default it inherits the form's: in read mode it draws the value. */
     mode?: FormMode;
     /** The name of the control when it is NOT inside a `Field` — a cell of an editable table,
-     *  the box of a message. Inside a field, the field's label names it. */
+     *  the box of a message. Inside a field the field's label names it and this is IGNORED
+     *  (`controlName`): with both, the control was read twice. */
     "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 +137,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 +146,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 +202,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

@@ -4,7 +4,7 @@ import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { FieldIdsContext, useFieldIds, } from "../../foundations/form.js";
-import { FormModeProvider, useFormMode, } from "../../foundations/form.js";
+import { controlName, FormModeProvider, useFormMode, } from "../../foundations/form.js";
 import { focusRing, tv } from "../../foundations/variants.js";
 import { FieldGroup, listOptionStyles } from "./aria.js";
 import { FieldCopy, useFieldCopy } from "./clipboard.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,8 +138,8 @@ 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) {
-    return labelledBy === undefined ? (ariaLabel ?? placeholder) : ariaLabel;
+export function nameOf(labelledBy, ariaLabel, placeholder) {
+    return controlName(labelledBy, ariaLabel, placeholder);
 }
 /**
  * One line of text: a business name, a reference, a NIT.
@@ -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.