@raydenui/ui 0.9.7 → 0.10.1

package/dist/blocks/CommandPaletteBlock.js

@@ -0,0 +1,331 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { cn } from "../utils/cn.js";
+import { Icon } from "../components/Icon/index.js";
+import { Spinner } from "../components/Spinner/index.js";
+/* ─── Recipes ────────────────────────────────────────────────────────── */
+const FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+/**
+ * Only elements Tab can actually reach. A roving-tabindex option is an
+ * `a[href]` parked at `tabindex="-1"`: focusable in code, skipped by Tab. Left
+ * in this list it became the computed final stop and focus escaped the dialog.
+ */
+const FOCUSABLE = [
+    'a[href]:not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([tabindex="-1"])',
+    'select:not([disabled]):not([tabindex="-1"])',
+    'textarea:not([disabled]):not([tabindex="-1"])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+function itemMatches(item, needle) {
+    const haystack = [item.label, item.description ?? "", ...(item.keywords ?? [])]
+        .join(" ")
+        .toLocaleLowerCase();
+    return haystack.includes(needle);
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+export function CommandPaletteBlock({ items = [], groups = [], suggestions, suggestionsLabel = "Suggestions", showAllWhenEmpty = false, filterMode = "local", onQueryChange, onSelect, status = "idle", errorTitle = "Search is unavailable", errorDescription = "The search service did not respond. Nothing has been changed.", onRetry, loadingMessage = "Searching", dialogLabel = "Command palette", searchLabel = "Search destinations and actions", searchPlaceholder = "Search or jump to…", searchHint = "Use the up and down arrow keys to move through results, then Enter to open one.", promptTitle = "Type to search", promptDescription = "Start typing to find a page, a record, or an action.", noResultsTitle = (query) => `No results for “${query}”`, noResultsDescription = "Check the spelling, or try a shorter search term.", emptySourceTitle = "Nothing is available to search yet", emptySourceDescription = "This workspace has no destinations or actions configured.", resultCountLabel = (count) => (count === 1 ? "1 result" : `${count} results`), showTrigger = true, triggerLabel = "Search", triggerClassName, shortcut = null, defaultOpen = false, open: controlledOpen, onOpenChange, closeLabel = "Close", lockScroll = true, footer, className, }) {
+    const uid = useId();
+    const dialogId = `${uid}-dialog`;
+    const listId = `${uid}-list`;
+    const inputId = `${uid}-input`;
+    const hintId = `${uid}-hint`;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const open = controlledOpen ?? uncontrolledOpen;
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(0);
+    const triggerRef = useRef(null);
+    const dialogRef = useRef(null);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    /** Whatever had focus before the overlay opened, restored on close. */
+    const returnFocusRef = useRef(null);
+    const setOpen = useCallback((next) => {
+        if (controlledOpen === undefined)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [controlledOpen, onOpenChange]);
+    const close = useCallback(() => setOpen(false), [setOpen]);
+    /* ── Result set ──────────────────────────────────────────────────── */
+    const trimmed = query.trim();
+    const needle = trimmed.toLocaleLowerCase();
+    const results = useMemo(() => {
+        if (!trimmed) {
+            if (suggestions && suggestions.length > 0)
+                return suggestions;
+            return showAllWhenEmpty ? items : [];
+        }
+        if (filterMode === "external")
+            return items;
+        return items.filter((item) => itemMatches(item, needle));
+    }, [trimmed, needle, items, suggestions, showAllWhenEmpty, filterMode]);
+    const showingSuggestions = !trimmed && Boolean(suggestions && suggestions.length > 0);
+    const hasSource = items.length > 0 || (suggestions?.length ?? 0) > 0;
+    const promptState = !trimmed && results.length === 0 && hasSource;
+    const noResultsState = Boolean(trimmed) && results.length === 0 && status === "idle";
+    /** Grouped for display, ordered by `groups`, with anything ungrouped first. */
+    const sections = useMemo(() => {
+        if (showingSuggestions) {
+            return [{ id: "__suggestions", label: suggestionsLabel, items: results }];
+        }
+        const ungrouped = results.filter((item) => !item.groupId);
+        const known = groups
+            .map((group) => ({
+            id: group.id,
+            label: group.label,
+            items: results.filter((item) => item.groupId === group.id),
+        }))
+            .filter((section) => section.items.length > 0);
+        const knownIds = new Set(groups.map((group) => group.id));
+        const orphans = results.filter((item) => item.groupId && !knownIds.has(item.groupId));
+        const head = ungrouped.length > 0 || orphans.length > 0
+            ? [
+                {
+                    id: "__ungrouped",
+                    label: undefined,
+                    items: [...ungrouped, ...orphans],
+                },
+            ]
+            : [];
+        return [...head, ...known];
+    }, [results, groups, showingSuggestions, suggestionsLabel]);
+    /** Flat order, so arrow keys cross group boundaries the way the eye does. */
+    const flatItems = useMemo(() => sections.flatMap((section) => section.items), [sections]);
+    useEffect(() => {
+        setActiveIndex(0);
+    }, [query, open]);
+    /* ── Open / close side effects ───────────────────────────────────── */
+    useEffect(() => {
+        if (!open)
+            return;
+        returnFocusRef.current = document.activeElement ?? null;
+        // Focused in the same commit that removes `hidden`, so the field has focus
+        // by the time the click that opened the dialog has settled.
+        inputRef.current?.focus();
+    }, [open]);
+    useEffect(() => {
+        if (open)
+            return;
+        setQuery("");
+    }, [open]);
+    /**
+     * Focus goes back to whatever opened the palette, which is the trigger when
+     * the block renders its own. A dialog that drops focus on the document body
+     * strands a keyboard user at the top of the page.
+     */
+    const wasOpen = useRef(open);
+    useEffect(() => {
+        if (wasOpen.current && !open) {
+            const target = triggerRef.current ?? returnFocusRef.current;
+            target?.focus();
+        }
+        wasOpen.current = open;
+    }, [open]);
+    useEffect(() => {
+        if (!open || !lockScroll || typeof document === "undefined")
+            return;
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = previous;
+        };
+    }, [open, lockScroll]);
+    useEffect(() => {
+        if (!shortcut || typeof document === "undefined")
+            return;
+        const wanted = shortcut.key.toLowerCase();
+        const modifier = shortcut.modifier ?? "mod";
+        function handle(event) {
+            if (event.defaultPrevented || event.isComposing || event.repeat)
+                return;
+            if (event.key.toLowerCase() !== wanted)
+                return;
+            const target = event.target;
+            // Single-letter shortcuts must never consume text entry, including our search field.
+            if (modifier === "none" &&
+                (event.altKey ||
+                    event.shiftKey ||
+                    (target instanceof HTMLElement &&
+                        (target.isContentEditable ||
+                            target.closest("input, textarea, select, [role='textbox']")))))
+                return;
+            const mod = event.metaKey || event.ctrlKey;
+            if (modifier === "mod" && !mod)
+                return;
+            if (modifier === "none" && mod)
+                return;
+            event.preventDefault();
+            setOpen(true);
+        }
+        document.addEventListener("keydown", handle);
+        return () => document.removeEventListener("keydown", handle);
+    }, [shortcut, setOpen]);
+    /* ── Roving focus ────────────────────────────────────────────────── */
+    function optionNodes() {
+        if (!listRef.current)
+            return [];
+        return Array.from(listRef.current.querySelectorAll("[data-option]"));
+    }
+    function focusOptionAt(index) {
+        const nodes = optionNodes();
+        if (nodes.length === 0)
+            return;
+        const wrapped = ((index % nodes.length) + nodes.length) % nodes.length;
+        setActiveIndex(wrapped);
+        nodes[wrapped]?.focus();
+    }
+    function activateAt(index) {
+        const nodes = optionNodes();
+        nodes[index]?.click();
+    }
+    function handleInputKeyDown(event) {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            focusOptionAt(0);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            focusOptionAt(-1);
+        }
+        else if (event.key === "Enter" && flatItems.length > 0) {
+            event.preventDefault();
+            activateAt(activeIndex);
+        }
+    }
+    function handleOptionKeyDown(event, index) {
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                focusOptionAt(index + 1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                focusOptionAt(index - 1);
+                break;
+            case "Home":
+                event.preventDefault();
+                focusOptionAt(0);
+                break;
+            case "End":
+                event.preventDefault();
+                focusOptionAt(-1);
+                break;
+            default:
+                break;
+        }
+    }
+    /** Tab stays inside the overlay; Escape leaves it. */
+    function handleDialogKeyDown(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            close();
+            return;
+        }
+        if (event.key !== "Tab" || !dialogRef.current)
+            return;
+        const nodes = Array.from(dialogRef.current.querySelectorAll(FOCUSABLE)).filter((node) => node.offsetParent !== null || node === document.activeElement);
+        if (nodes.length === 0)
+            return;
+        const first = nodes[0];
+        const last = nodes[nodes.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && (active === first || !dialogRef.current.contains(active))) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    /* ── Option ──────────────────────────────────────────────────────── */
+    function renderOption(item, index) {
+        const unavailable = "unavailableReason" in item ? item.unavailableReason : undefined;
+        const reasonId = `${uid}-${item.id}-reason`;
+        const isActive = index === activeIndex;
+        const body = (_jsxs(_Fragment, { children: [item.icon && (_jsx(Icon, { name: item.icon, size: "md", className: cn("mt-0.5 shrink-0", unavailable ? "text-grey-400" : "text-grey-500") })), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [_jsx("span", { className: "text-body-sm font-medium break-words", children: item.label }), item.description && (_jsx("span", { className: "text-body-xs break-words text-grey-500", children: item.description })), unavailable && (_jsx("span", { id: reasonId, className: "text-body-xs break-words text-grey-500", children: unavailable }))] }), item.shortcut && (_jsx("span", { "aria-hidden": "true", className: "ml-auto shrink-0 rounded border border-surface-border px-1.5 py-0.5 text-body-xs font-medium text-grey-500", children: item.shortcut }))] }));
+        const classes = cn("flex w-full min-w-0 items-start gap-3 rounded-lg px-3 py-2 transition-colors", FOCUS_RING, unavailable
+            ? "cursor-not-allowed text-grey-500"
+            : "cursor-pointer text-grey-900 hover:bg-surface-muted");
+        const shared = {
+            "data-option": "true",
+            role: "option",
+            "aria-selected": isActive,
+            tabIndex: isActive ? 0 : -1,
+            className: classes,
+        };
+        if (unavailable) {
+            return (_jsx("div", { ...shared, "aria-disabled": "true", "aria-describedby": reasonId, onKeyDown: (event) => handleOptionKeyDown(event, index), onFocus: () => setActiveIndex(index), children: body }, item.id));
+        }
+        if (item.href) {
+            // Destinations stay anchors: Enter activates them natively, middle-click
+            // opens a new tab, and the href is never rebuilt into a dead button.
+            return (_jsx("a", { ...shared, href: item.href, ...(item.external ? { target: "_blank", rel: "noreferrer" } : {}), onClick: () => {
+                    item.onSelect?.();
+                    onSelect?.(item);
+                    close();
+                }, onKeyDown: (event) => handleOptionKeyDown(event, index), onFocus: () => setActiveIndex(index), children: body }, item.id));
+        }
+        return (_jsx("div", { ...shared, onClick: () => {
+                item.onSelect?.();
+                onSelect?.(item);
+                close();
+            }, onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    item.onSelect?.();
+                    onSelect?.(item);
+                    close();
+                    return;
+                }
+                handleOptionKeyDown(event, index);
+            }, onFocus: () => setActiveIndex(index), children: body }, item.id));
+    }
+    /* ── Body ────────────────────────────────────────────────────────── */
+    function renderBody() {
+        if (status === "loading") {
+            return (_jsxs("p", { role: "status", className: "flex items-center gap-2 px-4 py-10 text-body-sm text-grey-500", children: [_jsx(Spinner, { size: "sm" }), _jsx("span", { children: loadingMessage })] }));
+        }
+        if (status === "error") {
+            return (_jsxs("div", { role: "alert", className: "m-3 flex flex-col gap-2 rounded-lg border border-error-200 bg-error-50 px-4 py-3 text-error-700", children: [_jsx("p", { className: "text-body-sm font-semibold break-words", children: errorTitle }), _jsx("p", { className: "text-body-sm break-words", children: errorDescription }), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: cn("inline-flex min-h-10 w-fit cursor-pointer items-center gap-2 rounded-lg border-[1.5px] border-current px-4 py-2 text-body-sm font-semibold", FOCUS_RING), children: [_jsx(Icon, { name: "refresh", size: "sm" }), "Try again"] }))] }));
+        }
+        if (!hasSource) {
+            return (_jsxs("div", { className: "flex flex-col gap-1 px-4 py-10 text-center", children: [_jsx("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: emptySourceTitle }), _jsx("p", { className: "text-body-sm break-words text-grey-500", children: emptySourceDescription })] }));
+        }
+        if (promptState) {
+            return (_jsxs("div", { className: "flex flex-col gap-1 px-4 py-10 text-center", children: [_jsx("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: promptTitle }), _jsx("p", { className: "text-body-sm break-words text-grey-500", children: promptDescription })] }));
+        }
+        if (noResultsState) {
+            return (_jsxs("div", { className: "flex flex-col gap-1 px-4 py-10 text-center", children: [_jsx("p", { className: "text-body-sm font-semibold break-words text-grey-900", children: noResultsTitle(trimmed) }), _jsx("p", { className: "text-body-sm break-words text-grey-500", children: noResultsDescription })] }));
+        }
+        let cursor = -1;
+        return (_jsx("div", { ref: listRef, role: "listbox", "aria-label": dialogLabel, className: "flex flex-col gap-3 p-2", children: sections.map((section) => {
+                const sectionHeadingId = `${uid}-${section.id}-label`;
+                return (_jsxs("div", { role: "group", ...(section.label ? { "aria-labelledby": sectionHeadingId } : {}), className: "flex flex-col gap-0.5", children: [section.label && (_jsx("p", { id: sectionHeadingId, className: "px-3 pt-1 pb-1 text-caption-sm font-semibold break-words text-grey-500 uppercase", children: section.label })), section.items.map((item) => {
+                            cursor += 1;
+                            return renderOption(item, cursor);
+                        })] }, section.id));
+            }) }));
+    }
+    const countText = status === "idle" && hasSource && !promptState ? resultCountLabel(flatItems.length) : "";
+    /* ── Render ──────────────────────────────────────────────────────── */
+    return (
+    // Not an `@container`: the trigger is a flex item in the shell's top bar,
+    // and inline-size containment would stop it sizing from its own contents.
+    // The overlay is viewport-anchored, so nothing here needs a container query.
+    _jsxs("div", { className: cn("relative w-full min-w-0", className), children: [showTrigger && (_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": dialogId, onClick: () => setOpen(true), className: cn("flex min-h-11 w-full min-w-0 cursor-pointer items-center gap-2 rounded-lg border border-surface-border bg-surface px-3 py-2 text-left text-body-sm text-grey-500 transition-colors hover:bg-surface-muted", FOCUS_RING, triggerClassName), children: [_jsx(Icon, { name: "search", size: "sm", className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: triggerLabel }), shortcut?.hint && (_jsx("span", { "aria-hidden": "true", className: "ml-auto hidden shrink-0 rounded border border-surface-border px-1.5 py-0.5 text-body-xs font-medium sm:inline", children: shortcut.hint }))] })), _jsxs("div", { id: dialogId, className: cn(
+                // The overlay is anchored to the viewport, not to the container the
+                // trigger sits in, so this is the one place in the batch where a
+                // viewport breakpoint is the correct signal. A `@min-[…]` here would
+                // read the trigger's width, which has nothing to do with the space
+                // the overlay actually has.
+                "fixed inset-0 z-50 flex items-start justify-center px-3 py-12 md:px-8 md:py-[12vh]", !open && "hidden"), children: [_jsx("div", { "aria-hidden": "true", onClick: close, className: "absolute inset-0 bg-[var(--color-overlay,rgba(16,25,40,0.56))]" }), _jsxs("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, onKeyDown: handleDialogKeyDown, className: "relative flex max-h-full w-full max-w-[640px] flex-col overflow-hidden rounded-xl border border-surface-border bg-surface shadow-soft-xl", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-surface-border px-3 py-2 text-on-surface-muted", children: [_jsx(Icon, { name: "search", size: "md", className: "shrink-0 text-grey-500" }), _jsx("label", { htmlFor: inputId, className: "sr-only", children: searchLabel }), _jsx("input", { ref: inputRef, id: inputId, type: "search", value: query, placeholder: searchPlaceholder, autoComplete: "off", "aria-controls": listId, "aria-describedby": hintId, onChange: (event) => {
+                                            setQuery(event.target.value);
+                                            onQueryChange?.(event.target.value);
+                                        }, onKeyDown: handleInputKeyDown, className: cn(
+                                        // No `focus:outline-none` here: it wins over the focus-visible
+                                        // ring below and leaves the field with no visible indicator at
+                                        // all, which a tab walk measured before this comment existed.
+                                        "min-h-10 w-full min-w-0 rounded-lg bg-surface px-1 py-2 text-body-md text-grey-900 placeholder:text-grey-500", FOCUS_RING) }), _jsxs("button", { type: "button", onClick: close, className: cn("inline-flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-lg text-grey-500 hover:bg-surface-muted hover:text-grey-900", FOCUS_RING), children: [_jsx(Icon, { name: "multiply", size: "md" }), _jsx("span", { className: "sr-only", children: closeLabel })] })] }), _jsx("p", { id: hintId, className: "sr-only", children: searchHint }), _jsx("div", { id: listId, className: "flex min-h-0 max-h-[min(60vh,420px)] flex-col overflow-y-auto", children: renderBody() }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-surface-border px-4 py-2 text-body-xs text-grey-500", children: [_jsx("p", { role: "status", "aria-live": "polite", className: "min-w-0 break-words", children: countText }), footer] })] })] })] }));
+}

package/dist/blocks/CreateAccountBlock.cjs

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultCreateAccountPasswordRules = void 0;
+exports.CreateAccountBlock = CreateAccountBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Alert_1 = require("../components/Alert/index.cjs");
+const Button_1 = require("../components/Button/index.cjs");
+const FormControl_1 = require("../components/FormControl/index.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+const Input_1 = require("../components/Input/index.cjs");
+const Spinner_1 = require("../components/Spinner/index.cjs");
+/* ─── Defaults ───────────────────────────────────────────────────────── */
+exports.defaultCreateAccountPasswordRules = [
+    { id: "length", label: "At least 8 characters", test: (v) => v.length >= 8 },
+    {
+        id: "case",
+        label: "An upper and a lower case letter",
+        test: (v) => /[a-z]/.test(v) && /[A-Z]/.test(v),
+    },
+    { id: "number", label: "At least one number", test: (v) => /\d/.test(v) },
+];
+// Deliberately permissive: the authority on a deliverable address is the
+// consuming application, not a regular expression.
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const emptyValues = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+};
+/* ─── Component ──────────────────────────────────────────────────────── */
+function CreateAccountBlock({ title = "Create your account", description = "Set up a free workspace. No card required.", headingLevel = "h2", onSubmit, status = "idle", errorMessage, successMessage, fieldErrors, defaultValues, passwordRules = exports.defaultCreateAccountPasswordRules, requireConfirmPassword = true, consentLabel, consentErrorMessage = "Please accept the terms before creating an account.", signIn, submitLabel = "Create account", submittingLabel = "Creating account…", disabled = false, disabledMessage = "Account creation is currently unavailable.", labels, className, }) {
+    const uid = (0, react_1.useId)();
+    const titleId = `${uid}-title`;
+    const consentId = `${uid}-consent`;
+    const consentTextId = `${uid}-consent-text`;
+    const consentErrorId = `${uid}-consent-error`;
+    const passwordRulesId = `${uid}-password-rules`;
+    const passwordErrorId = `${uid}-password-error`;
+    const unsavedRegionId = `${uid}-form-status`;
+    const [values, setValues] = (0, react_1.useState)({
+        ...emptyValues,
+        ...defaultValues,
+    });
+    const [confirmPassword, setConfirmPassword] = (0, react_1.useState)("");
+    const [consent, setConsent] = (0, react_1.useState)(false);
+    const [touched, setTouched] = (0, react_1.useState)({});
+    const [submitAttempted, setSubmitAttempted] = (0, react_1.useState)(false);
+    const [revealPassword, setRevealPassword] = (0, react_1.useState)(false);
+    const fieldRefs = (0, react_1.useRef)({});
+    const pending = status === "submitting";
+    const succeeded = status === "success";
+    const loading = status === "loading";
+    const locked = disabled || pending || succeeded;
+    const ruleResults = (0, react_1.useMemo)(() => passwordRules.map((rule) => ({ ...rule, met: rule.test(values.password) })), [passwordRules, values.password]);
+    const localErrors = (0, react_1.useMemo)(() => {
+        const next = {};
+        if (!values.firstName.trim())
+            next.firstName = "Enter your first name.";
+        if (!values.lastName.trim())
+            next.lastName = "Enter your last name.";
+        if (!values.email.trim())
+            next.email = "Enter your email address.";
+        else if (!EMAIL_PATTERN.test(values.email.trim()))
+            next.email = "Enter an email address such as name@example.com.";
+        if (!values.password)
+            next.password = "Choose a password.";
+        else if (ruleResults.some((rule) => !rule.met))
+            next.password = "Your password does not meet all of the requirements below.";
+        if (requireConfirmPassword) {
+            if (!confirmPassword)
+                next.confirmPassword = "Type your password again.";
+            else if (confirmPassword !== values.password)
+                next.confirmPassword = "The two passwords do not match.";
+        }
+        if (!consent)
+            next.consent = consentErrorMessage;
+        return next;
+    }, [values, confirmPassword, consent, consentErrorMessage, requireConfirmPassword, ruleResults]);
+    const errorFor = (0, react_1.useCallback)((field) => {
+        const serverError = fieldErrors?.[field];
+        if (serverError)
+            return serverError;
+        if (!submitAttempted && !touched[field])
+            return undefined;
+        return localErrors[field];
+    }, [fieldErrors, localErrors, submitAttempted, touched]);
+    const markTouched = (0, react_1.useCallback)((field) => setTouched((prev) => ({ ...prev, [field]: true })), []);
+    const handleSubmit = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        // Guard duplicate submission: a second attempt while one is in flight is
+        // dropped rather than queued.
+        if (locked)
+            return;
+        setSubmitAttempted(true);
+        const order = [
+            "firstName",
+            "lastName",
+            "email",
+            "password",
+            "confirmPassword",
+            "consent",
+        ];
+        const firstInvalid = order.find((field) => localErrors[field]);
+        if (firstInvalid) {
+            fieldRefs.current[firstInvalid]?.focus();
+            return;
+        }
+        onSubmit({ ...values, consent });
+    }, [consent, localErrors, locked, onSubmit, values]);
+    const Heading = headingLevel;
+    const passwordError = errorFor("password");
+    const consentError = errorFor("consent");
+    const resolvedConsentLabel = consentLabel ?? "I agree to the terms of service and privacy policy.";
+    return (
+    // `@container` makes the block adapt to the column it is placed in, not
+    // to the viewport: a 360px settings column at 1440px behaves like a phone.
+    (0, jsx_runtime_1.jsx)("section", { "aria-labelledby": titleId, className: (0, cn_1.cn)("@container w-full", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6 rounded-12 border border-surface-border bg-surface p-4 @min-[420px]:p-6", children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(Heading, { id: titleId, className: "text-h6 font-semibold text-grey-900", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm text-grey-600", children: description })] }), disabled && ((0, jsx_runtime_1.jsx)(Alert_1.Alert, { state: "information", icon: "info-circle", role: "status", title: disabledMessage, className: "bg-surface dark:bg-surface" })), status === "error" && errorMessage && ((0, jsx_runtime_1.jsx)(Alert_1.Alert, { state: "error", icon: "info-triangle", role: "alert", title: "We could not create your account", description: errorMessage, className: "bg-surface dark:bg-surface" })), succeeded && successMessage && ((0, jsx_runtime_1.jsx)(Alert_1.Alert, { state: "success", icon: "check-circle", role: "status", title: successMessage, className: "bg-surface dark:bg-surface" })), loading ? ((0, jsx_runtime_1.jsx)("div", { "aria-busy": "true", className: "flex min-h-40 flex-col items-center justify-center gap-3 rounded-8 border border-dashed border-surface-border-strong p-6", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "md", label: "Preparing the sign-up form\u2026", labelPosition: "below" }) })) : ((0, jsx_runtime_1.jsxs)("form", { noValidate: true, onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 gap-4 @min-[520px]:grid-cols-2", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { id: `${uid}-firstName`, ref: (node) => {
+                                        fieldRefs.current.firstName = node;
+                                    }, name: "firstName", label: labels?.firstName ?? "First name", autoComplete: "given-name", required: true, size: "md", disabled: locked, value: values.firstName, error: errorFor("firstName"), onChange: (e) => setValues((p) => ({ ...p, firstName: e.target.value })), onBlur: () => markTouched("firstName") }), (0, jsx_runtime_1.jsx)(Input_1.Input, { id: `${uid}-lastName`, ref: (node) => {
+                                        fieldRefs.current.lastName = node;
+                                    }, name: "lastName", label: labels?.lastName ?? "Last name", autoComplete: "family-name", required: true, size: "md", disabled: locked, value: values.lastName, error: errorFor("lastName"), onChange: (e) => setValues((p) => ({ ...p, lastName: e.target.value })), onBlur: () => markTouched("lastName") })] }), (0, jsx_runtime_1.jsx)(Input_1.Input, { id: `${uid}-email`, ref: (node) => {
+                                fieldRefs.current.email = node;
+                            }, name: "email", type: "email", inputMode: "email", label: labels?.email ?? "Work email", placeholder: "name@example.com", autoComplete: "email", required: true, size: "md", disabled: locked, value: values.email, error: errorFor("email"), onChange: (e) => setValues((p) => ({ ...p, email: e.target.value })), onBlur: () => markTouched("email") }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { id: `${uid}-password`, ref: (node) => {
+                                        fieldRefs.current.password = node;
+                                    }, name: "password", type: revealPassword ? "text" : "password", label: labels?.password ?? "Password", autoComplete: "new-password", required: true, size: "md", disabled: locked, value: values.password, 
+                                    // Boolean error: the message and the guidance list are rendered
+                                    // here so a single `aria-describedby` can reference both.
+                                    error: Boolean(passwordError), "aria-describedby": [passwordError ? passwordErrorId : null, passwordRulesId]
+                                        .filter(Boolean)
+                                        .join(" "), onChange: (e) => setValues((p) => ({ ...p, password: e.target.value })), onBlur: () => markTouched("password"), trailingAction: (0, jsx_runtime_1.jsxs)("button", { type: "button", 
+                                        // Stays available while a submission is in flight: it only
+                                        // changes how an already-entered value is displayed.
+                                        onClick: () => setRevealPassword((v) => !v), className: "inline-flex cursor-pointer items-center rounded p-1 text-grey-500 hover:text-grey-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: revealPassword ? "eye-slash" : "eye", size: "md" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: revealPassword ? "Hide password" : "Show password" })] }) }), passwordError && ((0, jsx_runtime_1.jsx)("p", { id: passwordErrorId, className: "text-body-sm text-feedback-error", children: passwordError })), (0, jsx_runtime_1.jsx)("ul", { id: passwordRulesId, role: "list", className: "flex flex-col gap-1", children: ruleResults.map((rule) => ((0, jsx_runtime_1.jsxs)("li", { className: (0, cn_1.cn)("flex items-center gap-2 text-body-sm", rule.met ? "text-feedback-success" : "text-grey-600"), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: rule.met ? "check-circle" : "minus-circle", size: "sm" }), (0, jsx_runtime_1.jsx)("span", { children: rule.label }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: rule.met ? "— met" : "— not met yet" })] }, rule.id))) })] }), requireConfirmPassword && ((0, jsx_runtime_1.jsx)(Input_1.Input, { id: `${uid}-confirmPassword`, ref: (node) => {
+                                fieldRefs.current.confirmPassword = node;
+                            }, name: "confirmPassword", type: revealPassword ? "text" : "password", label: labels?.confirmPassword ?? "Confirm password", autoComplete: "new-password", required: true, size: "md", disabled: locked, value: confirmPassword, error: errorFor("confirmPassword"), onChange: (e) => setConfirmPassword(e.target.value), onBlur: () => markTouched("confirmPassword") })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "pt-0.5", children: (0, jsx_runtime_1.jsx)(FormControl_1.Checkbox, { id: consentId, ref: (node) => {
+                                                    fieldRefs.current.consent = node;
+                                                }, name: "consent", checked: consent, disabled: locked, required: true, "aria-labelledby": consentTextId, "aria-invalid": consentError ? true : undefined, "aria-describedby": consentError ? consentErrorId : undefined, onChange: (e) => {
+                                                    setConsent(e.target.checked);
+                                                    markTouched("consent");
+                                                } }) }), (0, jsx_runtime_1.jsx)("label", { id: consentTextId, htmlFor: consentId, className: (0, cn_1.cn)("text-body-sm text-grey-700", locked ? "opacity-60" : "cursor-pointer"), children: resolvedConsentLabel })] }), consentError && ((0, jsx_runtime_1.jsx)("p", { id: consentErrorId, className: "text-body-sm text-feedback-error", children: consentError }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", size: "lg", variant: "primary", className: "w-full", disabled: locked, children: pending ? submittingLabel : submitLabel }), (0, jsx_runtime_1.jsx)("output", { id: unsavedRegionId, className: "sr-only", children: pending ? submittingLabel : "" }), signIn && ((0, jsx_runtime_1.jsxs)("p", { className: "text-center text-body-sm text-grey-600", children: ["Already have an account?", " ", (0, jsx_runtime_1.jsx)("a", { href: signIn.href, "aria-disabled": pending || undefined, tabIndex: pending ? -1 : undefined, onClick: (event) => {
+                                                if (pending)
+                                                    event.preventDefault();
+                                            }, className: (0, cn_1.cn)("rounded font-semibold text-action-primary-text underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", pending && "pointer-events-none opacity-60"), children: signIn.label })] }))] })] }))] }) }));
+}