@sincpro/web-ui 1.5.0 → 1.7.0

package/dist/primitives/field/SignatureInput.js

@@ -0,0 +1,215 @@
+"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 { cn } from "../../foundations/variants.js";
+import { Button } from "../button/Button.js";
+import { controlClasses, nameOf, ReadValue, } from "./Field.js";
+import { capturePointer, fitFontSize, strokeSteps, } from "./media.js";
+import { Eraser, PenLine, Type } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+/** The pen, in CSS pixels: the weight of a ballpoint at the size the pad is drawn. */
+const PEN = 2.25;
+/** Where the line sits, from the top of the pad — the same fraction the drawn line uses
+ *  (`bottom-1/4`), so a typed name rests on the line the person sees. */
+const BASELINE = 0.75;
+/** The gap between the pad's edge and the start of a typed name — `inset-x-4`. */
+const INSET = 16;
+/** The pen's colour: the INK token of the paper the canvas is on, read when it paints. The
+ *  pad is a light subtree (see below), so this is the dark ink in either theme. */
+function inkOf(el) {
+    const style = getComputedStyle(el);
+    return style.getPropertyValue("--color-ink").trim() || style.color;
+}
+function paint(canvas, strokes) {
+    const ctx = canvas.getContext("2d");
+    if (ctx === null)
+        return;
+    const dpr = canvas.clientWidth === 0 ? 1 : canvas.width / canvas.clientWidth;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const ink = inkOf(canvas);
+    ctx.strokeStyle = ink;
+    ctx.fillStyle = ink;
+    ctx.lineWidth = PEN;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    for (const stroke of strokes) {
+        ctx.beginPath();
+        for (const step of strokeSteps(stroke)) {
+            if (step.kind === "dot") {
+                ctx.arc(step.at.x, step.at.y, PEN / 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            else if (step.kind === "move")
+                ctx.moveTo(step.to.x, step.to.y);
+            else if (step.kind === "quad") {
+                ctx.quadraticCurveTo(step.control.x, step.control.y, step.to.x, step.to.y);
+            }
+            else
+                ctx.lineTo(step.to.x, step.to.y);
+        }
+        ctx.stroke();
+    }
+}
+/** A typed name, written as a signature: the system's font in italic, on the line, as big as
+ *  the pad allows and smaller when the name is long. */
+function typedSignature(text, pad) {
+    const dpr = window.devicePixelRatio || 1;
+    const width = pad.clientWidth || 480;
+    const height = pad.clientHeight || 128;
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    const ctx = canvas.getContext("2d");
+    if (ctx === null)
+        return "";
+    ctx.scale(dpr, dpr);
+    const family = getComputedStyle(pad).fontFamily;
+    const font = (size) => `italic 400 ${size}px ${family}`;
+    const base = Math.round(height * 0.42);
+    ctx.font = font(base);
+    const size = fitFontSize(ctx.measureText(text).width, base, width - INSET * 2);
+    ctx.font = font(size);
+    ctx.fillStyle = inkOf(pad);
+    ctx.textBaseline = "alphabetic";
+    ctx.fillText(text, INSET, height * BASELINE - 2);
+    return canvas.toDataURL("image/png");
+}
+/**
+ * A signature: drawn with the mouse, a pen or a finger — or typed, for whoever cannot draw.
+ *
+ * Context: the pad is a canvas that follows the pointer (`touch-none`, so a finger draws
+ * instead of scrolling the page) and smooths each stroke through the midpoints of its
+ * samples (`strokeSteps`) — no pressure, no library, and no corners. When a stroke ends the
+ * pad is exported as a PNG data URL and handed to `onChange`; «Limpiar» empties it and
+ * hands `null`.
+ *
+ * **A canvas alone shuts people out.** Whoever works with a keyboard or a screen reader, or
+ * whose hand does not hold a pointer steady, cannot draw. «Escribir mi nombre» turns the pad
+ * into a text box: the name typed (starting from `name`, when the form knows who signs) is
+ * written into the same PNG in the system's font, in italic, on the same line — the value
+ * has the same shape whichever way it was made, and the form does not have to know.
+ *
+ * **The pad is paper.** It is a forced-light subtree (`data-theme="light"`): the pen reads
+ * `--color-ink` there, so a signature made in the dark theme is still dark ink on a
+ * transparent PNG — the thing a printed contract or a PDF expects — and read mode lays it on
+ * the same paper, so it is legible on either theme.
+ *
+ * A value that did not come from this pad (a signature already saved) is shown as it is,
+ * not drawn over: «Limpiar» starts a new one. In read mode it draws the image.
+ */
+export function SignatureInput({ id: ownId, value, onChange, name = "", alt, 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 [typing, setTyping] = useState(false);
+    const [typed, setTyped] = useState(name);
+    const pad = useRef(null);
+    const canvas = useRef(null);
+    const strokes = useRef([]);
+    const drawing = useRef(false);
+    /* The last value this pad handed out: a `value` equal to it is the pad's own work, and the
+       canvas keeps drawing it; anything else came from outside and is shown as an image. */
+    const emitted = useRef(null);
+    const own = useId();
+    const helpId = `${own}-help`;
+    const has = value !== null && value !== "";
+    const stored = has && value !== emitted.current;
+    const label = alt ?? copy.media.signature;
+    /* The canvas is as many device pixels as it is drawn at, or the line blurs on a dense
+       screen; a resize repaints the strokes, which are kept in CSS pixels. */
+    useEffect(() => {
+        const el = canvas.current;
+        if (el === null)
+            return;
+        const fit = () => {
+            const dpr = window.devicePixelRatio || 1;
+            el.width = Math.max(1, Math.round(el.clientWidth * dpr));
+            el.height = Math.max(1, Math.round(el.clientHeight * dpr));
+            paint(el, strokes.current);
+        };
+        fit();
+        const observer = new ResizeObserver(fit);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [typing, stored, readMode]);
+    if (readMode) {
+        return has ? (_jsx("span", { "data-theme": "light", className: "inline-flex rounded-control border border-line bg-surface p-1", children: _jsx("img", { src: value, alt: label, className: "h-16 w-auto" }) })) : (_jsx(ReadValue, { value: null }));
+    }
+    const emit = (next) => {
+        emitted.current = next;
+        onChange?.(next);
+    };
+    const pointOf = (event) => {
+        const box = event.currentTarget.getBoundingClientRect();
+        return { x: event.clientX - box.left, y: event.clientY - box.top };
+    };
+    function onPointerDown(event) {
+        if (disabled || (event.pointerType === "mouse" && event.button !== 0))
+            return;
+        capturePointer(event);
+        drawing.current = true;
+        strokes.current.push([pointOf(event)]);
+        paint(event.currentTarget, strokes.current);
+    }
+    function onPointerMove(event) {
+        if (!drawing.current)
+            return;
+        const stroke = strokes.current[strokes.current.length - 1];
+        if (stroke === undefined)
+            return;
+        /* The samples the browser merged into this event: a fast stroke between two frames is
+           several points, and drawing only the last one cuts its curves into chords. */
+        const native = event.nativeEvent;
+        const samples = typeof native.getCoalescedEvents === "function" ? native.getCoalescedEvents() : [];
+        const box = event.currentTarget.getBoundingClientRect();
+        if (samples.length > 0) {
+            for (const one of samples)
+                stroke.push({ x: one.clientX - box.left, y: one.clientY - box.top });
+        }
+        else
+            stroke.push(pointOf(event));
+        paint(event.currentTarget, strokes.current);
+    }
+    function onPointerUp(event) {
+        if (!drawing.current)
+            return;
+        drawing.current = false;
+        emit(event.currentTarget.toDataURL("image/png"));
+    }
+    function clear() {
+        strokes.current = [];
+        if (canvas.current !== null)
+            paint(canvas.current, []);
+        if (typing)
+            setTyped("");
+        emit(null);
+    }
+    function writeTyped(text) {
+        setTyped(text);
+        emit(text.trim() === "" || pad.current === null ? null : typedSignature(text, pad.current));
+    }
+    /* One signature, either way: switching starts the other one from scratch, and a typed name
+       that is already there is written at once. */
+    function switchMode() {
+        strokes.current = [];
+        if (typing) {
+            setTyping(false);
+            emit(null);
+        }
+        else {
+            setTyping(true);
+            writeTyped(typed);
+        }
+    }
+    const paper = cn("relative h-32 w-full overflow-clip rounded-control border bg-surface font-sans text-ink", invalid ? "border-danger" : "border-line-strong", disabled ? "bg-ground" : "");
+    return (_jsxs("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: [_jsxs("div", { ref: pad, "data-theme": "light", className: paper, children: [stored || (typing && has) ? (_jsx("img", { src: value ?? "", alt: label, className: "size-full object-contain object-left" })) : typing ? null : (_jsx("canvas", { ref: canvas, role: "img", "aria-label": copy.media.signaturePad, "aria-describedby": helpId, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, className: cn("absolute inset-0 size-full touch-none", disabled ? "cursor-not-allowed" : "cursor-crosshair") })), _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-4 bottom-1/4 border-t border-line-strong" })] }), typing ? (_jsxs("label", { className: "flex flex-col gap-1 text-micro font-medium text-muted", children: [copy.media.typedName, _jsx("input", { 
+                        /* The person asked for this box by pressing the button: the focus goes there. */
+                        autoFocus: true, value: typed, disabled: disabled, autoComplete: "name", onChange: (event) => writeTyped(event.target.value), className: `${controlClasses(invalid)} font-normal` })] })) : (_jsx("p", { id: helpId, className: "text-micro text-muted", children: copy.media.signatureHelp })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", icon: typing ? PenLine : Type, disabled: disabled, onClick: switchMode, children: typing ? copy.media.drawInstead : copy.media.typeName }), _jsx(Button, { role: "ghost", size: "sm", icon: Eraser, disabled: disabled, onClick: clear, children: copy.media.clear })] })] }));
+}

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

@@ -0,0 +1,33 @@
+export type CardBrand = "visa" | "mastercard" | "amex" | "discover" | "diners" | "jcb" | "unionpay" | "maestro";
+/** The longest a card number gets, of any brand. */
+export declare const CARD_MAX_DIGITS = 19;
+/** Only the digits of what was typed or pasted: «4242 4242-4242» → «424242424242». */
+export declare function cardDigits(text: string): string;
+/** The brand the first digits say, or `null` while they do not say one yet. */
+export declare function cardBrand(digits: string): CardBrand | null;
+/** How the brand is written: «American Express». */
+export declare function cardBrandName(brand: CardBrand): string;
+/** The most digits a number of this brand takes — where typing stops. */
+export declare function cardMaxDigits(digits: string, brand?: CardBrand | null): number;
+/** The digits in the brand's groups: «378282246310005» → «3782 822463 10005». */
+export declare function formatCardNumber(digits: string, brand?: CardBrand | null): string;
+/** The Luhn check digit holds: a mistyped digit or two swapped neighbours fail it. */
+export declare function luhnValid(digits: string): boolean;
+/** A whole number: a known brand, one of its lengths, and the check digit holds. */
+export declare function isValidCardNumber(digits: string): boolean;
+/** Only the last four, the way a card is shown once it is stored: «•••• 4242». */
+export declare function maskCardNumber(digits: string): string;
+/** The digits of an expiry, a leading zero put in for a month that can only be one digit:
+ *  «4» is April, so «04»; «1» may still be October. At most four: MMAA. */
+export declare function expiryDigits(text: string): string;
+/** How the expiry reads: «1228» → «12/28». */
+export declare function formatExpiry(digits: string): string;
+/** The month and the full year of a whole expiry, or `null` while it is not one. */
+export declare function expiryParts(digits: string): {
+    month: number;
+    year: number;
+} | null;
+/** A real month that has not ended yet: a card is good through the last day of its month. */
+export declare function isExpiryValid(digits: string, now?: Date): boolean;
+/** How many digits the security code has: four on the front of an Amex, three elsewhere. */
+export declare function cardCodeLength(brand: CardBrand | null | undefined): 3 | 4;

package/dist/primitives/field/card.js

@@ -0,0 +1,173 @@
+/* ==================================================================== *
+ *  A PAYMENT CARD NUMBER — what it is, how it is written, whether it holds.
+ *
+ *  Pure: the control (`CardNumberInput`) draws with it, and an application
+ *  validates with the same functions before sending, so «the field accepted it»
+ *  and «the form accepts it» never disagree.
+ *
+ *  ── Digits in, digits out ───────────────────────────────────────────
+ *
+ *  The value is the DIGITS: «4242424242424242». The spaces are how it is read,
+ *  not what it is — the grouping depends on the brand (Amex is 4-6-5, the rest
+ *  4-4-4-4), so storing them would store a presentation.
+ *
+ *  ── The brand from the first digits (IIN) ───────────────────────────
+ *
+ *  The ranges are the published issuer prefixes, most specific first: Discover's
+ *  `622126–622925` lives inside UnionPay's `62`, so Discover is asked before.
+ *  The names are proper nouns and are not translated.
+ * ==================================================================== */
+const FOUR = [4, 4, 4, 4, 3];
+const RULES = [
+    {
+        brand: "amex",
+        name: "American Express",
+        prefix: /^3[47]/,
+        lengths: [15],
+        groups: [4, 6, 5],
+    },
+    {
+        brand: "diners",
+        name: "Diners Club",
+        prefix: /^3(?:0[0-5]|[689])/,
+        lengths: [14, 15, 16, 17, 18, 19],
+        groups: [4, 6, 4, 5],
+    },
+    { brand: "jcb", name: "JCB", prefix: /^35/, lengths: [16, 17, 18, 19], groups: FOUR },
+    { brand: "visa", name: "Visa", prefix: /^4/, lengths: [13, 16, 19], groups: FOUR },
+    {
+        brand: "mastercard",
+        name: "Mastercard",
+        prefix: /^(?:5[1-5]|2(?:2[2-9]|[3-6]\d|7[01]|720))/,
+        lengths: [16],
+        groups: FOUR,
+    },
+    {
+        brand: "discover",
+        name: "Discover",
+        prefix: /^(?:6011|65|64[4-9]|622(?:12[6-9]|1[3-9]\d|[2-8]\d\d|9[01]\d|92[0-5]))/,
+        lengths: [16, 17, 18, 19],
+        groups: FOUR,
+    },
+    {
+        brand: "unionpay",
+        name: "UnionPay",
+        prefix: /^62/,
+        lengths: [16, 17, 18, 19],
+        groups: FOUR,
+    },
+    {
+        brand: "maestro",
+        name: "Maestro",
+        prefix: /^(?:5[06-9]|6\d)/,
+        lengths: [12, 13, 14, 15, 16, 17, 18, 19],
+        groups: FOUR,
+    },
+];
+/** The longest a card number gets, of any brand. */
+export const CARD_MAX_DIGITS = 19;
+/** Only the digits of what was typed or pasted: «4242 4242-4242» → «424242424242». */
+export function cardDigits(text) {
+    return text.replace(/\D/g, "");
+}
+function ruleOf(digits, brand) {
+    if (brand !== undefined && brand !== null)
+        return RULES.find((one) => one.brand === brand);
+    return RULES.find((one) => one.prefix.test(digits));
+}
+/** The brand the first digits say, or `null` while they do not say one yet. */
+export function cardBrand(digits) {
+    return ruleOf(cardDigits(digits))?.brand ?? null;
+}
+/** How the brand is written: «American Express». */
+export function cardBrandName(brand) {
+    return RULES.find((one) => one.brand === brand)?.name ?? brand;
+}
+/** The most digits a number of this brand takes — where typing stops. */
+export function cardMaxDigits(digits, brand) {
+    const lengths = ruleOf(cardDigits(digits), brand)?.lengths;
+    return lengths === undefined ? CARD_MAX_DIGITS : Math.max(...lengths);
+}
+/** The digits in the brand's groups: «378282246310005» → «3782 822463 10005». */
+export function formatCardNumber(digits, brand) {
+    const clean = cardDigits(digits);
+    const groups = ruleOf(clean, brand)?.groups ?? FOUR;
+    const parts = [];
+    let at = 0;
+    for (const size of groups) {
+        if (at >= clean.length)
+            break;
+        parts.push(clean.slice(at, at + size));
+        at += size;
+    }
+    if (at < clean.length)
+        parts.push(clean.slice(at));
+    return parts.join(" ");
+}
+/** The Luhn check digit holds: a mistyped digit or two swapped neighbours fail it. */
+export function luhnValid(digits) {
+    const clean = cardDigits(digits);
+    if (clean.length === 0)
+        return false;
+    let sum = 0;
+    for (let i = 0; i < clean.length; i++) {
+        let digit = Number(clean[clean.length - 1 - i]);
+        if (i % 2 === 1) {
+            digit *= 2;
+            if (digit > 9)
+                digit -= 9;
+        }
+        sum += digit;
+    }
+    return sum % 10 === 0;
+}
+/** A whole number: a known brand, one of its lengths, and the check digit holds. */
+export function isValidCardNumber(digits) {
+    const clean = cardDigits(digits);
+    const rule = ruleOf(clean);
+    if (rule === undefined)
+        return false;
+    return rule.lengths.includes(clean.length) && luhnValid(clean);
+}
+/** Only the last four, the way a card is shown once it is stored: «•••• 4242». */
+export function maskCardNumber(digits) {
+    const clean = cardDigits(digits);
+    if (clean.length === 0)
+        return "";
+    return `•••• ${clean.slice(-4)}`;
+}
+/* ── The expiry «MM/AA» and the security code ─────────────────────────── */
+/** The digits of an expiry, a leading zero put in for a month that can only be one digit:
+ *  «4» is April, so «04»; «1» may still be October. At most four: MMAA. */
+export function expiryDigits(text) {
+    const clean = cardDigits(text);
+    const padded = /^[2-9]/.test(clean) ? `0${clean}` : clean;
+    return padded.slice(0, 4);
+}
+/** How the expiry reads: «1228» → «12/28». */
+export function formatExpiry(digits) {
+    const clean = cardDigits(digits).slice(0, 4);
+    return clean.length <= 2 ? clean : `${clean.slice(0, 2)}/${clean.slice(2)}`;
+}
+/** The month and the full year of a whole expiry, or `null` while it is not one. */
+export function expiryParts(digits) {
+    const clean = cardDigits(digits);
+    if (clean.length !== 4)
+        return null;
+    const month = Number(clean.slice(0, 2));
+    if (month < 1 || month > 12)
+        return null;
+    return { month, year: 2000 + Number(clean.slice(2)) };
+}
+/** A real month that has not ended yet: a card is good through the last day of its month. */
+export function isExpiryValid(digits, now = new Date()) {
+    const parts = expiryParts(digits);
+    if (parts === null)
+        return false;
+    const current = now.getFullYear() * 12 + now.getMonth();
+    return parts.year * 12 + (parts.month - 1) >= current;
+}
+/** How many digits the security code has: four on the front of an Amex, three elsewhere. */
+export function cardCodeLength(brand) {
+    return brand === "amex" ? 4 : 3;
+}

package/dist/primitives/field/clipboard.js

@@ -39,8 +39,9 @@ export function FieldCopyProvider({ value, children, }) {
 export function useFieldCopy() {
     return useContext(FieldCopyContext);
 }
-/** What skipping means: not seen, or not the value. */
-const SKIP = '[hidden], [aria-hidden="true"], [data-placeholder], .sr-only, button[aria-label], [data-copy-skip], select';
+/** What skipping means: not seen, or not the value. A password while it is hidden is not
+ *  SEEN — the dots are — so it is not copied; revealed, it is text like any other. */
+const SKIP = '[hidden], [aria-hidden="true"], [data-placeholder], .sr-only, button[aria-label], [data-copy-skip], select, input[type="password"]';
 /** The text a value area shows, inputs included, placeholders and named buttons left out. */
 export function shownText(root) {
     const parts = [];

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

@@ -0,0 +1,17 @@
+/** Something that reads as an email: one `@`, a name before it and a domain with a dot after. */
+export declare function isEmail(text: string): boolean;
+/** The `mailto:` of an email, or `null` when it does not read as one. */
+export declare function emailHref(text: string): string | null;
+/** The `tel:` of a phone as people write it — «+591 7 123-4567» → `tel:+59171234567`. `null`
+ *  when there are no digits to call. */
+export declare function telHref(text: string): string | null;
+/** The `wa.me` link of a phone with its country code. `wa.me` takes digits only. */
+export declare function whatsappHref(text: string): string | null;
+/** The `href` of a website, `https://` added when it has no scheme; `null` for anything that
+ *  is not `http(s)` or does not parse — a «javascript:» never becomes a link. */
+export declare function urlHref(text: string): string | null;
+/** Something that reads as a website. */
+export declare function isUrl(text: string): boolean;
+/** How a website is read: without the scheme, the `www.` and the trailing slash —
+ *  «https://www.sincpro.com.bo/» reads «sincpro.com.bo». */
+export declare function urlLabel(text: string): string;

package/dist/primitives/field/contact.js

@@ -0,0 +1,65 @@
+/* ==================================================================== *
+ *  AN ADDRESS TO REACH SOMEONE — an email, a phone, a website.
+ *
+ *  Pure: the controls (`EmailInput`, `PhoneInput`, `UrlInput`) build their read
+ *  mode links with it, and a form validates with the same checks.
+ *
+ *  ── A link is built, never trusted ──────────────────────────────────
+ *
+ *  What people type becomes an `href`. A website written «javascript:…» must not
+ *  turn into a link that runs it, so a URL keeps only `http:` and `https:` —
+ *  anything else with a scheme is no link at all, and a bare «sincpro.com.bo»
+ *  gets `https://` in front, the way a browser's address bar reads it.
+ * ==================================================================== */
+/** Something that reads as an email: one `@`, a name before it and a domain with a dot after. */
+export function isEmail(text) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(text.trim());
+}
+/** The `mailto:` of an email, or `null` when it does not read as one. */
+export function emailHref(text) {
+    const clean = text.trim();
+    return isEmail(clean) ? `mailto:${clean}` : null;
+}
+/** The `tel:` of a phone as people write it — «+591 7 123-4567» → `tel:+59171234567`. `null`
+ *  when there are no digits to call. */
+export function telHref(text) {
+    const digits = text.replace(/[^\d+]/g, "").replace(/(?!^)\+/g, "");
+    return /\d/.test(digits) ? `tel:${digits}` : null;
+}
+/** The `wa.me` link of a phone with its country code. `wa.me` takes digits only. */
+export function whatsappHref(text) {
+    const digits = text.replace(/\D/g, "");
+    return digits.length === 0 ? null : `https://wa.me/${digits}`;
+}
+/** The `href` of a website, `https://` added when it has no scheme; `null` for anything that
+ *  is not `http(s)` or does not parse — a «javascript:» never becomes a link. */
+export function urlHref(text) {
+    const clean = text.trim();
+    if (clean === "" || /\s/.test(clean))
+        return null;
+    const withScheme = /^[a-z][a-z\d+.-]*:/i.test(clean) ? clean : `https://${clean}`;
+    try {
+        const url = new URL(withScheme);
+        if (url.protocol !== "http:" && url.protocol !== "https:")
+            return null;
+        if (!url.hostname.includes(".") && url.hostname !== "localhost")
+            return null;
+        return url.href;
+    }
+    catch {
+        return null;
+    }
+}
+/** Something that reads as a website. */
+export function isUrl(text) {
+    return urlHref(text) !== null;
+}
+/** How a website is read: without the scheme, the `www.` and the trailing slash —
+ *  «https://www.sincpro.com.bo/» reads «sincpro.com.bo». */
+export function urlLabel(text) {
+    return text
+        .trim()
+        .replace(/^https?:\/\//i, "")
+        .replace(/^www\./i, "")
+        .replace(/\/$/, "");
+}

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

@@ -0,0 +1,5 @@
+/** Hours as «h:mm», rounded to the minute: 8.5 → «8:30», 0.25 → «0:15», -1.25 → «-1:15». */
+export declare function formatDuration(hours: number): string;
+/** What was typed, as hours; `""` for an empty box and `null` for something that is not a
+ *  duration (minutes past 59 included: «8:75» is a typo, not 9:15). */
+export declare function parseDuration(text: string): number | "" | null;

package/dist/primitives/field/duration.js

@@ -0,0 +1,48 @@
+/* ==================================================================== *
+ *  A DURATION in hours — «8:30» is 8.5, the `float_time` of an ERP.
+ *
+ *  Stored as a number of hours (what a timesheet sums), read as hours and
+ *  minutes (what a person says). Typed any of the ways people write it:
+ *
+ *      8:30   8,5   8.5   8h30   8h 30m   45m   2h   -1:15
+ *
+ *  Pure: the control writes and reads with it, and a report formats a total the
+ *  same way.
+ * ==================================================================== */
+/** Hours as «h:mm», rounded to the minute: 8.5 → «8:30», 0.25 → «0:15», -1.25 → «-1:15». */
+export function formatDuration(hours) {
+    const total = Math.round(Math.abs(hours) * 60);
+    const sign = hours < 0 && total > 0 ? "-" : "";
+    return `${sign}${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+}
+/** What was typed, as hours; `""` for an empty box and `null` for something that is not a
+ *  duration (minutes past 59 included: «8:75» is a typo, not 9:15). */
+export function parseDuration(text) {
+    const clean = text.trim().toLowerCase().replace(/\s+/g, "");
+    if (clean === "")
+        return "";
+    const sign = clean.startsWith("-") ? -1 : 1;
+    const body = clean.replace(/^[-+]/, "");
+    const colon = /^(\d+):(\d{1,2})$/.exec(body);
+    if (colon !== null) {
+        const minutes = Number(colon[2]);
+        return minutes > 59 ? null : sign * (Number(colon[1]) + minutes / 60);
+    }
+    const decimal = /^\d+(?:[.,]\d+)?$/.exec(body);
+    if (decimal !== null)
+        return sign * Number(body.replace(",", "."));
+    const units = /^(?:(\d+)h)?(?:(\d+)m(?:in)?)?$/.exec(body);
+    if (units !== null && (units[1] !== undefined || units[2] !== undefined)) {
+        const minutes = Number(units[2] ?? 0);
+        if (units[1] !== undefined && minutes > 59)
+            return null;
+        return sign * (Number(units[1] ?? 0) + minutes / 60);
+    }
+    /* «8h30» — hours, then bare minutes. */
+    const short = /^(\d+)h(\d{1,2})$/.exec(body);
+    if (short !== null) {
+        const minutes = Number(short[2]);
+        return minutes > 59 ? null : sign * (Number(short[1]) + minutes / 60);
+    }
+    return null;
+}

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

@@ -1,7 +1,21 @@
+export { CARD_MAX_DIGITS, type CardBrand, cardBrand, cardBrandName, cardCodeLength, cardDigits, expiryDigits, expiryParts, formatCardNumber, formatExpiry, isExpiryValid, isValidCardNumber, luhnValid, maskCardNumber, } from "./card.js";
+export { CardCodeInput, CardExpiryInput, CardNumberInput, } from "./CardNumberInput.js";
 export { Checkbox, type CheckItem, CheckList } from "./Checks.js";
+export { CodeInput } from "./CodeInput.js";
+export { ColorInput } from "./ColorInput.js";
+export { emailHref, isEmail, isUrl, telHref, urlHref, urlLabel, whatsappHref, } from "./contact.js";
+export { EmailInput, PhoneInput, UrlInput, } from "./ContactInputs.js";
 export { FieldCopyProvider, shownText, useFieldCopy, } from "./clipboard.js";
 export { DropZone, type DropZoneProps } from "./DropZone.js";
+export { formatDuration, parseDuration } from "./duration.js";
+export { DurationInput } from "./DurationInput.js";
 export { controlClasses, DataField, Field, NumberInput, ReadValue, Select, type SelectOption, TextArea, TextInput, } from "./Field.js";
+export { type ImageChange, ImageInput } from "./ImageInput.js";
 export { type FieldLayout, FieldLayoutProvider, useSheetLayout, } from "./layout.js";
+export { PasswordInput } from "./PasswordInput.js";
+export { type MentionItem, RichTextInput, } from "./RichTextInput.js";
+export { formatPattern, isPatternComplete, patternLength, patternValue, } from "./pattern.js";
+export { PatternInput } from "./PatternInput.js";
+export { SignatureInput } from "./SignatureInput.js";
 export { Suggest, type SuggestProps } from "./Suggest.js";
 export { type FieldNote } from "./note.js";

package/dist/primitives/field/index.js

@@ -4,12 +4,32 @@
    What ARRANGES them —the sheet, the section, the footer— lives in `components/form`: a
    control does not know a form exists, and is used the same way inside a cell, a filter or
    a dialog. */
+/* A payment card: the control, and the same checks for the form to validate with. */
+export { CARD_MAX_DIGITS, cardBrand, cardBrandName, cardCodeLength, cardDigits, expiryDigits, expiryParts, formatCardNumber, formatExpiry, isExpiryValid, isValidCardNumber, luhnValid, maskCardNumber, } from "./card.js";
+export { CardCodeInput, CardExpiryInput, CardNumberInput, } from "./CardNumberInput.js";
+/* An address to reach someone: typed with its keyboard, read as a link. */
 export { Checkbox, CheckList } from "./Checks.js";
+export { CodeInput } from "./CodeInput.js";
+export { ColorInput } from "./ColorInput.js";
+export { emailHref, isEmail, isUrl, telHref, urlHref, urlLabel, whatsappHref, } from "./contact.js";
+export { EmailInput, PhoneInput, UrlInput, } from "./ContactInputs.js";
 /* The copy button every field carries by its label — on by default, off by field or by form. */
 export { FieldCopyProvider, shownText, useFieldCopy, } from "./clipboard.js";
 export { DropZone } from "./DropZone.js";
+/* A duration in hours, read «8:30». */
+export { formatDuration, parseDuration } from "./duration.js";
+export { DurationInput } from "./DurationInput.js";
 export { controlClasses, DataField, Field, NumberInput, ReadValue, Select, TextArea, TextInput, } from "./Field.js";
+/* An image the record holds (chosen, dropped, pasted, cropped) and a signature (drawn or typed). */
+export { ImageInput } from "./ImageInput.js";
 export { FieldLayoutProvider, useSheetLayout, } from "./layout.js";
+export { PasswordInput } from "./PasswordInput.js";
+/* Formatted text (an Odoo `html` field): Tiptap, loaded only on editing. */
+export { RichTextInput, } from "./RichTextInput.js";
+/* An identifier with a fixed shape: NIT, CI, account, IBAN. */
+export { formatPattern, isPatternComplete, patternLength, patternValue, } from "./pattern.js";
+export { PatternInput } from "./PatternInput.js";
+export { SignatureInput } from "./SignatureInput.js";
 export { Suggest } from "./Suggest.js";
 /* A note that belongs to one field: a card in the record's margin, or a flag by its label. */
 export {} from "./note.js";