@raydenui/ui 0.9.6 → 0.10.0

package/dist/blocks/ProfileSettingsBlock.js

@@ -0,0 +1,126 @@
+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 { Alert } from "../components/Alert/index.js";
+import { Avatar } from "../components/Avatar/index.js";
+import { Button } from "../components/Button/index.js";
+import { Icon } from "../components/Icon/index.js";
+import { Input } from "../components/Input/index.js";
+import { Spinner } from "../components/Spinner/index.js";
+/* ─── Defaults ───────────────────────────────────────────────────────── */
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const defaultLabels = {
+    firstName: "First name",
+    lastName: "Last name",
+    email: "Email address",
+    jobTitle: "Job title",
+    timeZone: "Time zone",
+    bio: "About you",
+};
+export const defaultProfileTimeZones = [
+    { value: "Europe/London", label: "London (GMT+01:00)" },
+    { value: "Europe/Berlin", label: "Berlin (GMT+02:00)" },
+    { value: "America/New_York", label: "New York (GMT−04:00)" },
+    { value: "America/Los_Angeles", label: "Los Angeles (GMT−07:00)" },
+    { value: "Africa/Lagos", label: "Lagos (GMT+01:00)" },
+    { value: "Asia/Singapore", label: "Singapore (GMT+08:00)" },
+];
+/* ─── Component ──────────────────────────────────────────────────────── */
+export function ProfileSettingsBlock({ title = "Profile", description = "These details appear next to your name across the workspace.", headingLevel = "h2", value, onSave, onCancel, onDirtyChange, status = "idle", errorMessage, successMessage, fieldErrors, canEdit = true, readOnlyMessage = "You can view this profile but not change it. Ask a workspace administrator for edit access.", readOnlyFields, readOnlyFieldMessages, avatar, onAvatarChange, onAvatarRemove, avatarStatus = "idle", avatarErrorMessage, avatarSlot, avatarAccept = "image/png,image/jpeg,image/webp", timeZones = defaultProfileTimeZones, bioMaxLength = 280, labels, saveLabel = "Save changes", cancelLabel = "Cancel", className, }) {
+    const uid = useId();
+    const titleId = `${uid}-title`;
+    const bioId = `${uid}-bio`;
+    const bioCountId = `${uid}-bio-count`;
+    const serializedSaved = JSON.stringify(value);
+    const [draft, setDraft] = useState(value);
+    const [touched, setTouched] = useState({});
+    const [saveAttempted, setSaveAttempted] = useState(false);
+    const lastSavedRef = useRef(serializedSaved);
+    const fileInputRef = useRef(null);
+    // Saved values changed under us (a save landed, or the app swapped profile).
+    // Re-sync the draft during render rather than in an effect, so the form never
+    // paints one frame of stale content.
+    if (lastSavedRef.current !== serializedSaved) {
+        lastSavedRef.current = serializedSaved;
+        setDraft(value);
+        setTouched({});
+        setSaveAttempted(false);
+    }
+    const saving = status === "saving";
+    const loading = status === "loading";
+    const locked = !canEdit || saving || loading;
+    const dirty = useMemo(() => JSON.stringify(draft) !== serializedSaved, [draft, serializedSaved]);
+    const dirtyRef = useRef(dirty);
+    useEffect(() => {
+        if (dirtyRef.current !== dirty) {
+            dirtyRef.current = dirty;
+            onDirtyChange?.(dirty);
+        }
+    }, [dirty, onDirtyChange]);
+    const localErrors = useMemo(() => {
+        const next = {};
+        if (!draft.firstName.trim())
+            next.firstName = "Enter a first name.";
+        if (!draft.lastName.trim())
+            next.lastName = "Enter a last name.";
+        if (!draft.email.trim())
+            next.email = "Enter an email address.";
+        else if (!EMAIL_PATTERN.test(draft.email.trim()))
+            next.email = "Enter an email address such as name@example.com.";
+        if (draft.bio.length > bioMaxLength)
+            next.bio = `Shorten this to ${bioMaxLength} characters or fewer.`;
+        return next;
+    }, [draft, bioMaxLength]);
+    const errorFor = useCallback((field) => {
+        const serverError = fieldErrors?.[field];
+        if (serverError)
+            return serverError;
+        if (!saveAttempted && !touched[field])
+            return undefined;
+        return localErrors[field];
+    }, [fieldErrors, localErrors, saveAttempted, touched]);
+    const isFieldReadOnly = useCallback((field) => !canEdit || Boolean(readOnlyFields?.includes(field)), [canEdit, readOnlyFields]);
+    const setField = useCallback((field, next) => setDraft((prev) => ({ ...prev, [field]: next })), []);
+    const markTouched = useCallback((field) => setTouched((prev) => ({ ...prev, [field]: true })), []);
+    const handleSubmit = useCallback((event) => {
+        event.preventDefault();
+        // Guard duplicate submission and honour the permission contract.
+        if (locked || !dirty)
+            return;
+        setSaveAttempted(true);
+        if (Object.keys(localErrors).length > 0)
+            return;
+        onSave(draft);
+    }, [dirty, draft, localErrors, locked, onSave]);
+    const handleCancel = useCallback(() => {
+        if (saving)
+            return;
+        setDraft(value);
+        setTouched({});
+        setSaveAttempted(false);
+        onCancel?.();
+    }, [onCancel, saving, value]);
+    const handleAvatarInput = useCallback((event) => {
+        const file = event.target.files?.[0];
+        if (file)
+            onAvatarChange?.(file);
+        // Allow re-selecting the same file after a failed upload.
+        event.target.value = "";
+    }, [onAvatarChange]);
+    const Heading = headingLevel;
+    const label = (field) => labels?.[field] ?? defaultLabels[field];
+    const readOnlyNote = (field) => isFieldReadOnly(field) && canEdit ? readOnlyFieldMessages?.[field] : undefined;
+    const bioError = errorFor("bio");
+    const bioReadOnly = isFieldReadOnly("bio");
+    return (_jsx("section", { "aria-labelledby": titleId, className: cn("@container w-full", className), children: _jsxs("div", { className: "flex flex-col gap-6 rounded-12 border border-surface-border bg-surface p-4 @min-[420px]:p-6", children: [_jsxs("header", { className: "flex flex-col gap-2", children: [_jsx(Heading, { id: titleId, className: "text-h6 font-semibold text-grey-900", children: title }), description && _jsx("p", { className: "text-body-sm text-grey-600", children: description })] }), !canEdit && (_jsx(Alert, { state: "information", icon: "lock", role: "status", title: "View only", description: readOnlyMessage, className: "bg-surface dark:bg-surface" })), status === "error" && errorMessage && (_jsx(Alert, { state: "error", icon: "info-triangle", role: "alert", title: "Your changes were not saved", description: errorMessage, className: "bg-surface dark:bg-surface" })), status === "success" && successMessage && (_jsx(Alert, { state: "success", icon: "check-circle", role: "status", title: successMessage, className: "bg-surface dark:bg-surface" })), loading ? (_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: _jsx(Spinner, { size: "md", label: "Loading your profile\u2026", labelPosition: "below" }) })) : (_jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-3 border-b border-surface-border pb-6 @min-[520px]:flex-row @min-[520px]:items-center @min-[520px]:gap-5", children: [_jsx(Avatar, { type: avatar?.src ? "image" : "initials", size: "2xl", src: avatar?.src, alt: avatar?.alt ?? `${draft.firstName} ${draft.lastName}`.trim(), initials: avatar?.initials ??
+                                        (`${draft.firstName.charAt(0)}${draft.lastName.charAt(0)}`.toUpperCase() || "?") }), _jsx("div", { className: "flex min-w-0 flex-col gap-2", children: avatarSlot ?? (_jsxs(_Fragment, { children: [onAvatarChange ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("input", { ref: fileInputRef, id: `${uid}-avatar`, type: "file", accept: avatarAccept, disabled: locked || avatarStatus === "uploading", onChange: handleAvatarInput, className: "sr-only" }), _jsxs("label", { htmlFor: `${uid}-avatar`, className: cn("inline-flex h-9 cursor-pointer items-center gap-2 rounded-lg border-[1.5px] border-current px-4 text-sm font-semibold text-action-primary-text", "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-action-primary-text", (locked || avatarStatus === "uploading") &&
+                                                            "cursor-not-allowed opacity-50"), children: [_jsx(Icon, { name: "image-add", size: "md" }), "Change photo"] }), onAvatarRemove && avatar?.src && (_jsx(Button, { type: "button", variant: "grey", appearance: "outlined", size: "sm", disabled: locked || avatarStatus === "uploading", onClick: onAvatarRemove, children: "Remove photo" }))] })) : (_jsx("p", { className: "text-body-sm text-grey-600", children: "Your photo is managed outside this workspace." })), _jsx("p", { className: "text-body-xs text-grey-600", children: "PNG, JPG or WebP. A square image works best." }), avatarStatus === "uploading" && (_jsxs("output", { className: "flex items-center gap-2 text-body-sm text-grey-600", children: [_jsx(Spinner, { size: "xs" }), "Uploading your photo\u2026"] })), avatarStatus === "error" && avatarErrorMessage && (_jsx("p", { role: "alert", className: "text-body-sm text-feedback-error", children: avatarErrorMessage }))] })) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 @min-[520px]:grid-cols-2", children: [_jsx(Input, { id: `${uid}-firstName`, name: "firstName", size: "md", label: label("firstName"), autoComplete: "given-name", required: true, value: draft.firstName, readOnly: isFieldReadOnly("firstName"), disabled: saving, error: errorFor("firstName"), helperText: readOnlyNote("firstName"), onChange: (e) => setField("firstName", e.target.value), onBlur: () => markTouched("firstName") }), _jsx(Input, { id: `${uid}-lastName`, name: "lastName", size: "md", label: label("lastName"), autoComplete: "family-name", required: true, value: draft.lastName, readOnly: isFieldReadOnly("lastName"), disabled: saving, error: errorFor("lastName"), helperText: readOnlyNote("lastName"), onChange: (e) => setField("lastName", e.target.value), onBlur: () => markTouched("lastName") })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 @min-[520px]:grid-cols-2", children: [_jsx(Input, { id: `${uid}-email`, name: "email", type: "email", inputMode: "email", size: "md", label: label("email"), autoComplete: "email", required: true, value: draft.email, readOnly: isFieldReadOnly("email"), disabled: saving, error: errorFor("email"), helperText: readOnlyNote("email"), onChange: (e) => setField("email", e.target.value), onBlur: () => markTouched("email") }), _jsx(Input, { id: `${uid}-jobTitle`, name: "jobTitle", size: "md", label: label("jobTitle"), autoComplete: "organization-title", value: draft.jobTitle, readOnly: isFieldReadOnly("jobTitle"), disabled: saving, error: errorFor("jobTitle"), helperText: readOnlyNote("jobTitle"), onChange: (e) => setField("jobTitle", e.target.value), onBlur: () => markTouched("jobTitle") })] }), isFieldReadOnly("timeZone") ? (_jsx(Input, { id: `${uid}-timeZone`, name: "timeZone", size: "md", label: label("timeZone"), readOnly: true, value: timeZones.find((z) => z.value === draft.timeZone)?.label ?? draft.timeZone, helperText: readOnlyNote("timeZone"), onChange: () => undefined })) : (_jsxs("div", { className: "flex w-full flex-col gap-1", children: [_jsx("label", { htmlFor: `${uid}-timeZone`, className: "text-sm font-medium leading-[1.45] text-grey-900", children: label("timeZone") }), _jsx("select", { id: `${uid}-timeZone`, name: "timeZone", disabled: saving, value: draft.timeZone, onChange: (e) => setField("timeZone", e.target.value), className: cn("h-12 w-full rounded-lg border border-grey-300 bg-surface px-4 text-sm text-grey-900", "transition-colors hover:border-primary-100 focus-visible:border-primary-400", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", "disabled:cursor-not-allowed disabled:bg-grey-50"), children: timeZones.map((zone) => (_jsx("option", { value: zone.value, children: zone.label }, zone.value))) })] })), _jsxs("div", { className: "flex w-full flex-col gap-1", children: [_jsx("label", { htmlFor: bioId, className: "text-sm font-medium leading-[1.45] text-grey-900", children: label("bio") }), _jsx("textarea", { id: bioId, name: "bio", rows: 4, readOnly: bioReadOnly, disabled: saving, value: draft.bio, "aria-invalid": bioError ? true : undefined, "aria-describedby": bioCountId, onChange: (e) => setField("bio", e.target.value), onBlur: () => markTouched("bio"), className: cn("w-full resize-y rounded-lg border px-4 py-3 text-sm text-grey-900 transition-colors", "placeholder:text-grey-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", bioError
+                                        ? "border-error-400 bg-surface"
+                                        : bioReadOnly
+                                            ? "border-grey-300 bg-grey-100"
+                                            : "border-grey-300 bg-surface hover:border-primary-100 focus-within:border-primary-400", saving && "cursor-not-allowed opacity-70") }), _jsx("p", { id: bioCountId, className: cn("text-sm leading-[1.45]", bioError ? "text-feedback-error" : "text-grey-600"), children: bioError ?? `${draft.bio.length} of ${bioMaxLength} characters used.` })] }), canEdit && (_jsxs("div", { className: "flex flex-col gap-3 border-t border-surface-border pt-5 @min-[520px]:flex-row @min-[520px]:items-center @min-[520px]:justify-between", children: [_jsx("output", { className: "text-body-sm text-grey-600", children: saving
+                                        ? "Saving your changes…"
+                                        : dirty
+                                            ? "You have unsaved changes."
+                                            : "All changes saved." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { type: "button", variant: "grey", appearance: "outlined", size: "sm", disabled: !dirty || saving, onClick: handleCancel, children: cancelLabel }), _jsx(Button, { type: "submit", variant: "primary", size: "sm", disabled: !dirty || saving, children: saving ? "Saving…" : saveLabel })] })] }))] }))] }) }));
+}

package/dist/blocks/QuickSendBlock.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickSendBlock = QuickSendBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn.cjs");
+const Avatar_1 = require("../components/Avatar/index.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+// ─── Component ───────────────────────────────────────────────────────
+function QuickSendBlock({ title = "Quick Send", seeAllLabel = "See all beneficiaries", onSeeAll, beneficiaries, onSelect, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col gap-3", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-grey-900", children: title }), onSeeAll && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onSeeAll, className: "flex items-center gap-1.5 rounded text-xs font-semibold text-action-primary-text cursor-pointer hover:underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [seeAllLabel, (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-right", size: "xs" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-surface border border-surface-border rounded-10 px-6 py-6", children: (0, jsx_runtime_1.jsx)("div", { className: "flex gap-5 overflow-x-auto", children: beneficiaries.map((b) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onSelect?.(b.id), className: "flex flex-col items-center gap-2 shrink-0 group", children: [b.avatar ?? ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { type: "initials", initials: b.initials ?? b.name.slice(0, 2).toUpperCase(), size: "lg" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-grey-900 whitespace-nowrap max-w-[80px] truncate", children: b.name }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-grey-500 whitespace-nowrap", children: ["@", b.handle] })] })] }, b.id))) }) })] }));
+}

package/dist/blocks/QuickSendBlock.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.js";
+import { Avatar } from "../components/Avatar/index.js";
+import { Icon } from "../components/Icon/index.js";
+// ─── Component ───────────────────────────────────────────────────────
+export function QuickSendBlock({ title = "Quick Send", seeAllLabel = "See all beneficiaries", onSeeAll, beneficiaries, onSelect, className, }) {
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-grey-900", children: title }), onSeeAll && (_jsxs("button", { type: "button", onClick: onSeeAll, className: "flex items-center gap-1.5 rounded text-xs font-semibold text-action-primary-text cursor-pointer hover:underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [seeAllLabel, _jsx(Icon, { name: "chevron-right", size: "xs" })] }))] }), _jsx("div", { className: "bg-surface border border-surface-border rounded-10 px-6 py-6", children: _jsx("div", { className: "flex gap-5 overflow-x-auto", children: beneficiaries.map((b) => (_jsxs("button", { type: "button", onClick: () => onSelect?.(b.id), className: "flex flex-col items-center gap-2 shrink-0 group", children: [b.avatar ?? (_jsx(Avatar, { type: "initials", initials: b.initials ?? b.name.slice(0, 2).toUpperCase(), size: "lg" })), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("span", { className: "text-xs font-semibold text-grey-900 whitespace-nowrap max-w-[80px] truncate", children: b.name }), _jsxs("span", { className: "text-xs text-grey-500 whitespace-nowrap", children: ["@", b.handle] })] })] }, b.id))) }) })] }));
+}

package/dist/blocks/RecentTransactionsBlock.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecentTransactionsBlock = RecentTransactionsBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+// ─── Component ───────────────────────────────────────────────────────
+function RecentTransactionsBlock({ title = "Recent Transactions", seeAllLabel = "See all", onSeeAll, transactions, onTransactionClick, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col gap-3", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-grey-900", children: title }), onSeeAll && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onSeeAll, className: "flex items-center gap-1.5 rounded text-xs font-semibold text-action-primary-text cursor-pointer hover:underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [seeAllLabel, (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-right", size: "xs" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-surface border border-surface-border rounded-10 px-5 py-6", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-5", children: transactions.map((tx) => {
+                        const isOutgoing = tx.direction === "outgoing";
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onTransactionClick?.(tx.id), className: "flex items-center gap-3 group text-left", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex items-center justify-center size-10 rounded-full shrink-0", isOutgoing ? "bg-error-50" : "bg-success-50"), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: isOutgoing ? "arrow-up" : "arrow-down", size: "sm", className: isOutgoing ? "text-error-400" : "text-success-400" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 items-center justify-between min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col min-w-0", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-grey-900 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-normal", children: isOutgoing ? "to" : "from" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "font-semibold", children: tx.name })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-grey-500", children: tx.category })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-semibold text-grey-900 shrink-0 ml-4", children: [isOutgoing ? "-" : "+", " ", tx.amount] })] })] }, tx.id));
+                    }) }) })] }));
+}

package/dist/blocks/RecentTransactionsBlock.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.js";
+import { Icon } from "../components/Icon/index.js";
+// ─── Component ───────────────────────────────────────────────────────
+export function RecentTransactionsBlock({ title = "Recent Transactions", seeAllLabel = "See all", onSeeAll, transactions, onTransactionClick, className, }) {
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-grey-900", children: title }), onSeeAll && (_jsxs("button", { type: "button", onClick: onSeeAll, className: "flex items-center gap-1.5 rounded text-xs font-semibold text-action-primary-text cursor-pointer hover:underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [seeAllLabel, _jsx(Icon, { name: "chevron-right", size: "xs" })] }))] }), _jsx("div", { className: "bg-surface border border-surface-border rounded-10 px-5 py-6", children: _jsx("div", { className: "flex flex-col gap-5", children: transactions.map((tx) => {
+                        const isOutgoing = tx.direction === "outgoing";
+                        return (_jsxs("button", { type: "button", onClick: () => onTransactionClick?.(tx.id), className: "flex items-center gap-3 group text-left", children: [_jsx("div", { className: cn("flex items-center justify-center size-10 rounded-full shrink-0", isOutgoing ? "bg-error-50" : "bg-success-50"), children: _jsx(Icon, { name: isOutgoing ? "arrow-up" : "arrow-down", size: "sm", className: isOutgoing ? "text-error-400" : "text-success-400" }) }), _jsxs("div", { className: "flex flex-1 items-center justify-between min-w-0", children: [_jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("span", { className: "text-sm text-grey-900 truncate", children: [_jsx("span", { className: "font-normal", children: isOutgoing ? "to" : "from" }), " ", _jsx("span", { className: "font-semibold", children: tx.name })] }), _jsx("span", { className: "text-xs font-medium text-grey-500", children: tx.category })] }), _jsxs("span", { className: "text-sm font-semibold text-grey-900 shrink-0 ml-4", children: [isOutgoing ? "-" : "+", " ", tx.amount] })] })] }, tx.id));
+                    }) }) })] }));
+}

package/dist/blocks/SearchableTableBlock.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchableTableBlock = SearchableTableBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Input_1 = require("../components/Input/index.cjs");
+const Button_1 = require("../components/Button/index.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+const Table_1 = require("../components/Table/index.cjs");
+const useTableSelection_1 = require("../components/Table/useTableSelection.cjs");
+const FormControl_1 = require("../components/FormControl/index.cjs");
+const Pagination_1 = require("../components/Pagination/index.cjs");
+// ─── Kebab Button ────────────────────────────────────────────────────
+function KebabButton({ onClick, rowLabel }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, "aria-label": rowLabel ? `More actions for ${rowLabel}` : "More actions", className: "flex items-center justify-center size-8 rounded-md hover:bg-grey-50 text-grey-500", children: (0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "3", r: "1.5", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "13", r: "1.5", fill: "currentColor" })] }) }));
+}
+// ─── Component ───────────────────────────────────────────────────────
+function SearchableTableBlock({ title, columns, rows, searchPlaceholder = "Search here...", onSearch, onSort, onSearchClick, onSortClick, showFilter, onFilter, showDateSelector, onDateSelect, selectable = false, selectedIds, onSelectionChange, onRowAction, page, totalPages, onPageChange, className, }) {
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
+    const [sortKey, setSortKey] = (0, react_1.useState)(null);
+    const [sortDirection, setSortDirection] = (0, react_1.useState)(null);
+    // ─── Handlers ────────────────────────────────────────────────────
+    const handleSearch = (value) => {
+        setSearchQuery(value);
+        onSearch?.(value);
+    };
+    const handleSort = (key) => {
+        let nextKey = key;
+        let nextDirection;
+        if (sortKey === key) {
+            nextDirection = sortDirection === "asc" ? "desc" : sortDirection === "desc" ? null : "asc";
+            if (nextDirection === null)
+                nextKey = null;
+        }
+        else {
+            nextDirection = "asc";
+        }
+        setSortKey(nextKey);
+        setSortDirection(nextDirection);
+        onSort?.(key, nextDirection);
+    };
+    // Previously the indicator moved but the rows never did, so the table announced an
+    // order it was not in. Unless the consumer takes control via onSearch / onSort, do
+    // the filtering and ordering here so indicator and content always agree.
+    const searched = onSearch || !searchQuery
+        ? rows
+        : rows.filter((row) => columns.some((col) => String(row[col.key] ?? "")
+            .toLowerCase()
+            .includes(searchQuery.toLowerCase())));
+    const visibleRows = onSort || !sortKey || !sortDirection
+        ? searched
+        : [...searched].sort((a, b) => {
+            const left = a[sortKey];
+            const right = b[sortKey];
+            if (left == null && right == null)
+                return 0;
+            if (left == null)
+                return 1;
+            if (right == null)
+                return -1;
+            const result = typeof left === "number" && typeof right === "number"
+                ? left - right
+                : String(left).localeCompare(String(right), undefined, { numeric: true });
+            return sortDirection === "asc" ? result : -result;
+        });
+    // `dataIds` is the whole data set and `scopeIds` only the rows on screen, so locally
+    // filtering or sorting keeps a hidden row's selection while the header still reports
+    // the visible rows. Rows the consumer removes from `rows` are dropped.
+    const selection = (0, useTableSelection_1.useTableSelection)({
+        dataIds: rows.map((row) => row.id),
+        scopeIds: visibleRows.map((row) => row.id),
+        selectedIds,
+        onSelectionChange,
+    });
+    // Every visible control needs somewhere to go: a toolbar button with no handler is
+    // dead, so presence of the handler is what makes it available.
+    const filterAvailable = Boolean(onFilter) && showFilter !== false;
+    const dateSelectorAvailable = Boolean(onDateSelect) && showDateSelector !== false;
+    // ─── Toolbar ─────────────────────────────────────────────────────
+    const toolbar = title ? (
+    /* Title variant toolbar */
+    (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 pb-5", children: [(0, jsx_runtime_1.jsx)("h3", { className: "min-w-0 text-xl font-semibold text-grey-900", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [onSearchClick && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onSearchClick, className: "flex items-center gap-1 text-sm text-grey-500 hover:text-grey-700", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "search", size: "xs" }), (0, jsx_runtime_1.jsx)("span", { children: "Search" })] })), filterAvailable && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onFilter, className: "flex items-center gap-1 text-sm text-grey-500 hover:text-grey-700", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "filter", size: "xs" }), (0, jsx_runtime_1.jsx)("span", { children: "Filter" })] })), onSortClick && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onSortClick, className: "flex items-center gap-1 text-sm text-grey-500 hover:text-grey-700", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-v", size: "xs" }), (0, jsx_runtime_1.jsx)("span", { children: "Sort" })] }))] })] })) : (
+    /* Search variant toolbar */
+    (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { size: "sm", placeholder: searchPlaceholder, leadingIcon: "search", value: searchQuery, onChange: (e) => handleSearch(e.target.value), wrapperClassName: "w-full min-w-0 sm:w-[260px]" }), filterAvailable && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "grey", appearance: "outlined", size: "sm", icon: "filter", iconPosition: "leading", onClick: onFilter, children: "Filter" }))] }), dateSelectorAvailable && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "grey", appearance: "outlined", size: "sm", icon: "calendar", iconPosition: "leading", onClick: onDateSelect, children: "Select dates" }))] }));
+    // ─── Render ──────────────────────────────────────────────────────
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col", className), children: [toolbar, (0, jsx_runtime_1.jsxs)(Table_1.Table, { "aria-label": title || "Data table", children: [(0, jsx_runtime_1.jsx)(Table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(Table_1.TableRow, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableHead, { className: "w-[52px]", children: (0, jsx_runtime_1.jsx)(FormControl_1.Checkbox, { checked: selection.allSelected, indeterminate: selection.someSelected, onChange: selection.toggleAll, "aria-label": "Select all rows" }) })), columns.map((col) => ((0, jsx_runtime_1.jsx)(Table_1.TableHead, { sortable: col.sortable, sortDirection: sortKey === col.key ? sortDirection : undefined, onSort: () => handleSort(col.key), style: col.width ? { width: col.width } : undefined, children: col.label }, col.key))), onRowAction && ((0, jsx_runtime_1.jsx)(Table_1.TableHead, { className: "w-[60px]", children: (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Actions" }) }))] }) }), (0, jsx_runtime_1.jsx)(Table_1.TableBody, { children: visibleRows.map((row) => {
+                            const rowLabel = columns[0] ? String(row[columns[0].key] ?? row.id) : row.id;
+                            return ((0, jsx_runtime_1.jsxs)(Table_1.TableRow, { selected: selection.isSelected(row.id), children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, { children: (0, jsx_runtime_1.jsx)(FormControl_1.Checkbox, { checked: selection.isSelected(row.id), onChange: () => selection.toggleRow(row.id), "aria-label": `Select ${rowLabel}` }) })), columns.map((col) => ((0, jsx_runtime_1.jsx)(Table_1.TableCell, { children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "") }, col.key))), onRowAction && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, { children: (0, jsx_runtime_1.jsx)(KebabButton, { onClick: () => onRowAction(row.id), rowLabel: rowLabel }) }))] }, row.id));
+                        }) })] }), totalPages != null && page != null && onPageChange && ((0, jsx_runtime_1.jsx)(Pagination_1.Pagination, { currentPage: page, totalPages: totalPages, onPageChange: onPageChange }))] }));
+}

package/dist/blocks/SearchableTableBlock.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../utils/cn.js";
+import { Input } from "../components/Input/index.js";
+import { Button } from "../components/Button/index.js";
+import { Icon } from "../components/Icon/index.js";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "../components/Table/index.js";
+import { useTableSelection } from "../components/Table/useTableSelection.js";
+import { Checkbox } from "../components/FormControl/index.js";
+import { Pagination } from "../components/Pagination/index.js";
+// ─── Kebab Button ────────────────────────────────────────────────────
+function KebabButton({ onClick, rowLabel }) {
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-label": rowLabel ? `More actions for ${rowLabel}` : "More actions", className: "flex items-center justify-center size-8 rounded-md hover:bg-grey-50 text-grey-500", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "3", r: "1.5", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "13", r: "1.5", fill: "currentColor" })] }) }));
+}
+// ─── Component ───────────────────────────────────────────────────────
+export function SearchableTableBlock({ title, columns, rows, searchPlaceholder = "Search here...", onSearch, onSort, onSearchClick, onSortClick, showFilter, onFilter, showDateSelector, onDateSelect, selectable = false, selectedIds, onSelectionChange, onRowAction, page, totalPages, onPageChange, className, }) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const [sortKey, setSortKey] = useState(null);
+    const [sortDirection, setSortDirection] = useState(null);
+    // ─── Handlers ────────────────────────────────────────────────────
+    const handleSearch = (value) => {
+        setSearchQuery(value);
+        onSearch?.(value);
+    };
+    const handleSort = (key) => {
+        let nextKey = key;
+        let nextDirection;
+        if (sortKey === key) {
+            nextDirection = sortDirection === "asc" ? "desc" : sortDirection === "desc" ? null : "asc";
+            if (nextDirection === null)
+                nextKey = null;
+        }
+        else {
+            nextDirection = "asc";
+        }
+        setSortKey(nextKey);
+        setSortDirection(nextDirection);
+        onSort?.(key, nextDirection);
+    };
+    // Previously the indicator moved but the rows never did, so the table announced an
+    // order it was not in. Unless the consumer takes control via onSearch / onSort, do
+    // the filtering and ordering here so indicator and content always agree.
+    const searched = onSearch || !searchQuery
+        ? rows
+        : rows.filter((row) => columns.some((col) => String(row[col.key] ?? "")
+            .toLowerCase()
+            .includes(searchQuery.toLowerCase())));
+    const visibleRows = onSort || !sortKey || !sortDirection
+        ? searched
+        : [...searched].sort((a, b) => {
+            const left = a[sortKey];
+            const right = b[sortKey];
+            if (left == null && right == null)
+                return 0;
+            if (left == null)
+                return 1;
+            if (right == null)
+                return -1;
+            const result = typeof left === "number" && typeof right === "number"
+                ? left - right
+                : String(left).localeCompare(String(right), undefined, { numeric: true });
+            return sortDirection === "asc" ? result : -result;
+        });
+    // `dataIds` is the whole data set and `scopeIds` only the rows on screen, so locally
+    // filtering or sorting keeps a hidden row's selection while the header still reports
+    // the visible rows. Rows the consumer removes from `rows` are dropped.
+    const selection = useTableSelection({
+        dataIds: rows.map((row) => row.id),
+        scopeIds: visibleRows.map((row) => row.id),
+        selectedIds,
+        onSelectionChange,
+    });
+    // Every visible control needs somewhere to go: a toolbar button with no handler is
+    // dead, so presence of the handler is what makes it available.
+    const filterAvailable = Boolean(onFilter) && showFilter !== false;
+    const dateSelectorAvailable = Boolean(onDateSelect) && showDateSelector !== false;
+    // ─── Toolbar ─────────────────────────────────────────────────────
+    const toolbar = title ? (
+    /* Title variant toolbar */
+    _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 pb-5", children: [_jsx("h3", { className: "min-w-0 text-xl font-semibold text-grey-900", children: title }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [onSearchClick && (_jsxs("button", { type: "button", onClick: onSearchClick, className: "flex items-center gap-1 text-sm text-grey-500 hover:text-grey-700", children: [_jsx(Icon, { name: "search", size: "xs" }), _jsx("span", { children: "Search" })] })), filterAvailable && (_jsxs("button", { type: "button", onClick: onFilter, className: "flex items-center gap-1 text-sm text-grey-500 hover:text-grey-700", children: [_jsx(Icon, { name: "filter", size: "xs" }), _jsx("span", { children: "Filter" })] })), onSortClick && (_jsxs("button", { type: "button", onClick: onSortClick, className: "flex items-center gap-1 text-sm text-grey-500 hover:text-grey-700", children: [_jsx(Icon, { name: "chevron-v", size: "xs" }), _jsx("span", { children: "Sort" })] }))] })] })) : (
+    /* Search variant toolbar */
+    _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 p-4", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: [_jsx(Input, { size: "sm", placeholder: searchPlaceholder, leadingIcon: "search", value: searchQuery, onChange: (e) => handleSearch(e.target.value), wrapperClassName: "w-full min-w-0 sm:w-[260px]" }), filterAvailable && (_jsx(Button, { variant: "grey", appearance: "outlined", size: "sm", icon: "filter", iconPosition: "leading", onClick: onFilter, children: "Filter" }))] }), dateSelectorAvailable && (_jsx(Button, { variant: "grey", appearance: "outlined", size: "sm", icon: "calendar", iconPosition: "leading", onClick: onDateSelect, children: "Select dates" }))] }));
+    // ─── Render ──────────────────────────────────────────────────────
+    return (_jsxs("div", { className: cn("flex flex-col", className), children: [toolbar, _jsxs(Table, { "aria-label": title || "Data table", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableHead, { className: "w-[52px]", children: _jsx(Checkbox, { checked: selection.allSelected, indeterminate: selection.someSelected, onChange: selection.toggleAll, "aria-label": "Select all rows" }) })), columns.map((col) => (_jsx(TableHead, { sortable: col.sortable, sortDirection: sortKey === col.key ? sortDirection : undefined, onSort: () => handleSort(col.key), style: col.width ? { width: col.width } : undefined, children: col.label }, col.key))), onRowAction && (_jsx(TableHead, { className: "w-[60px]", children: _jsx("span", { className: "sr-only", children: "Actions" }) }))] }) }), _jsx(TableBody, { children: visibleRows.map((row) => {
+                            const rowLabel = columns[0] ? String(row[columns[0].key] ?? row.id) : row.id;
+                            return (_jsxs(TableRow, { selected: selection.isSelected(row.id), children: [selectable && (_jsx(TableCell, { children: _jsx(Checkbox, { checked: selection.isSelected(row.id), onChange: () => selection.toggleRow(row.id), "aria-label": `Select ${rowLabel}` }) })), columns.map((col) => (_jsx(TableCell, { children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "") }, col.key))), onRowAction && (_jsx(TableCell, { children: _jsx(KebabButton, { onClick: () => onRowAction(row.id), rowLabel: rowLabel }) }))] }, row.id));
+                        }) })] }), totalPages != null && page != null && onPageChange && (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: onPageChange }))] }));
+}

package/dist/blocks/ShoppingCartBlock.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShoppingCartBlock = ShoppingCartBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../components/Button/index.cjs");
+const cn_1 = require("../utils/cn.cjs");
+const commerce_1 = require("./commerce.cjs");
+function ShoppingCartBlock({ title = "Your bag", description, items, layout = "split", onQuantityChange, onRemoveItem, onCheckout, onContinueShopping, pending = false, errorMessage, totalsNote, shipping, tax, discount, currency, locale, ...frame }) {
+    const unavailable = items.some((item) => item.quantity < 1 ||
+        !Number.isInteger(item.quantity) ||
+        item.quantity > (item.stock ?? Infinity));
+    return ((0, jsx_runtime_1.jsxs)(commerce_1.CommerceFrame, { ...frame, title: title, description: description, busy: pending, children: [errorMessage && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "mb-4 text-sm text-error-700", children: errorMessage })), items.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "border-y border-surface-border px-4 py-12", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-lg font-medium", children: "Your bag is empty" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-2 text-sm text-grey-600", children: "Find something you\u2019ll enjoy every day." }), onContinueShopping && ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: "mt-6 h-auto min-h-11", onClick: onContinueShopping, children: "Explore the collection" }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("grid items-start gap-8", layout === "split" &&
+                    "@min-[760px]:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)] @min-[960px]:gap-14"), children: [(0, jsx_runtime_1.jsx)("ul", { className: "divide-y divide-surface-border", children: items.map((item) => ((0, jsx_runtime_1.jsxs)("li", { className: "grid grid-cols-[80px_minmax(0,1fr)] gap-4 py-6 first:pt-0 @min-[460px]:grid-cols-[120px_minmax(0,1fr)]", children: [(0, jsx_runtime_1.jsx)(commerce_1.CommercePhoto, { image: item.image }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: item.name }), item.variant && (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-grey-600", children: item.variant }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-sm text-grey-600", children: [(0, commerce_1.formatCommerceMoney)(item.price, currency, locale), " each"] })] }), (0, jsx_runtime_1.jsx)("p", { className: "font-semibold tabular-nums", children: (0, commerce_1.formatCommerceMoney)(item.price * item.quantity, currency, locale) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [onQuantityChange ? ((0, jsx_runtime_1.jsx)(commerce_1.CommerceQuantity, { name: item.name + (item.variant ? `, ${item.variant}` : ""), quantity: item.quantity, max: item.stock, disabled: pending, onChange: (quantity) => onQuantityChange(item.id, quantity) })) : ((0, jsx_runtime_1.jsxs)("p", { className: "text-sm", children: ["Quantity: ", item.quantity] })), onRemoveItem && ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: pending, className: `${commerce_1.commerceControl} border-transparent bg-transparent px-2 text-sm text-grey-600 underline underline-offset-4 hover:border-transparent hover:text-grey-900`, "aria-label": `Remove ${item.name}${item.variant ? `, ${item.variant}` : ""}`, onClick: () => onRemoveItem(item.id), children: "Remove" }))] }), item.quantity > (item.stock ?? Infinity) && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-error-700", children: item.stock === 0
+                                                ? "This item is no longer available. Remove it to continue."
+                                                : `Only ${item.stock} available. Please reduce the quantity.` }))] })] }, item.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: "rounded-xl border border-surface-border bg-surface-muted p-5 @min-[440px]:p-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-6 text-lg font-semibold tracking-tight", children: "Order summary" }), (0, jsx_runtime_1.jsx)(commerce_1.CommerceTotals, { items: items, shipping: shipping, tax: tax, discount: discount, currency: currency, locale: locale }), totalsNote && ((0, jsx_runtime_1.jsx)("p", { className: "mt-4 text-sm leading-relaxed text-grey-600", children: totalsNote })), onCheckout && ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: "mt-6 h-auto min-h-12 w-full whitespace-normal", disabled: pending || unavailable, onClick: onCheckout, children: pending ? "Updating bag…" : "Review checkout" })), unavailable && ((0, jsx_runtime_1.jsx)("p", { role: "status", className: "mt-3 text-sm text-error-700", children: "Update the unavailable quantities before checkout." })), onContinueShopping && ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: pending, className: `${commerce_1.commerceControl} mt-3 w-full border-transparent bg-transparent text-sm hover:border-transparent hover:underline`, onClick: onContinueShopping, children: "Continue shopping" }))] })] }))] }));
+}

package/dist/blocks/ShoppingCartBlock.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../components/Button/index.js";
+import { cn } from "../utils/cn.js";
+import { CommerceFrame, CommercePhoto, CommerceQuantity, CommerceTotals, commerceControl, formatCommerceMoney, } from "./commerce.js";
+export function ShoppingCartBlock({ title = "Your bag", description, items, layout = "split", onQuantityChange, onRemoveItem, onCheckout, onContinueShopping, pending = false, errorMessage, totalsNote, shipping, tax, discount, currency, locale, ...frame }) {
+    const unavailable = items.some((item) => item.quantity < 1 ||
+        !Number.isInteger(item.quantity) ||
+        item.quantity > (item.stock ?? Infinity));
+    return (_jsxs(CommerceFrame, { ...frame, title: title, description: description, busy: pending, children: [errorMessage && (_jsx("p", { role: "alert", className: "mb-4 text-sm text-error-700", children: errorMessage })), items.length === 0 ? (_jsxs("div", { className: "border-y border-surface-border px-4 py-12", children: [_jsx("p", { className: "text-lg font-medium", children: "Your bag is empty" }), _jsx("p", { className: "mt-2 text-sm text-grey-600", children: "Find something you\u2019ll enjoy every day." }), onContinueShopping && (_jsx(Button, { className: "mt-6 h-auto min-h-11", onClick: onContinueShopping, children: "Explore the collection" }))] })) : (_jsxs("div", { className: cn("grid items-start gap-8", layout === "split" &&
+                    "@min-[760px]:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)] @min-[960px]:gap-14"), children: [_jsx("ul", { className: "divide-y divide-surface-border", children: items.map((item) => (_jsxs("li", { className: "grid grid-cols-[80px_minmax(0,1fr)] gap-4 py-6 first:pt-0 @min-[460px]:grid-cols-[120px_minmax(0,1fr)]", children: [_jsx(CommercePhoto, { image: item.image }), _jsxs("div", { className: "min-w-0 space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: item.name }), item.variant && _jsx("p", { className: "mt-1 text-sm text-grey-600", children: item.variant }), _jsxs("p", { className: "mt-1 text-sm text-grey-600", children: [formatCommerceMoney(item.price, currency, locale), " each"] })] }), _jsx("p", { className: "font-semibold tabular-nums", children: formatCommerceMoney(item.price * item.quantity, currency, locale) })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [onQuantityChange ? (_jsx(CommerceQuantity, { name: item.name + (item.variant ? `, ${item.variant}` : ""), quantity: item.quantity, max: item.stock, disabled: pending, onChange: (quantity) => onQuantityChange(item.id, quantity) })) : (_jsxs("p", { className: "text-sm", children: ["Quantity: ", item.quantity] })), onRemoveItem && (_jsx("button", { type: "button", disabled: pending, className: `${commerceControl} border-transparent bg-transparent px-2 text-sm text-grey-600 underline underline-offset-4 hover:border-transparent hover:text-grey-900`, "aria-label": `Remove ${item.name}${item.variant ? `, ${item.variant}` : ""}`, onClick: () => onRemoveItem(item.id), children: "Remove" }))] }), item.quantity > (item.stock ?? Infinity) && (_jsx("p", { className: "text-sm text-error-700", children: item.stock === 0
+                                                ? "This item is no longer available. Remove it to continue."
+                                                : `Only ${item.stock} available. Please reduce the quantity.` }))] })] }, item.id))) }), _jsxs("div", { className: "rounded-xl border border-surface-border bg-surface-muted p-5 @min-[440px]:p-6", children: [_jsx("p", { className: "mb-6 text-lg font-semibold tracking-tight", children: "Order summary" }), _jsx(CommerceTotals, { items: items, shipping: shipping, tax: tax, discount: discount, currency: currency, locale: locale }), totalsNote && (_jsx("p", { className: "mt-4 text-sm leading-relaxed text-grey-600", children: totalsNote })), onCheckout && (_jsx(Button, { className: "mt-6 h-auto min-h-12 w-full whitespace-normal", disabled: pending || unavailable, onClick: onCheckout, children: pending ? "Updating bag…" : "Review checkout" })), unavailable && (_jsx("p", { role: "status", className: "mt-3 text-sm text-error-700", children: "Update the unavailable quantities before checkout." })), onContinueShopping && (_jsx("button", { type: "button", disabled: pending, className: `${commerceControl} mt-3 w-full border-transparent bg-transparent text-sm hover:border-transparent hover:underline`, onClick: onContinueShopping, children: "Continue shopping" }))] })] }))] }));
+}

package/dist/blocks/SiteFooterBlock.cjs

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteFooterBlock = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Badge_1 = require("../components/Badge/index.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+/* ─── Appearance ───────────────────────────────────────────────────────── */
+const LINK_CLASS = "inline-flex max-w-full flex-wrap items-center gap-x-2 gap-y-1 rounded text-sm break-words text-grey-600 no-underline hover:text-grey-900 hover:underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+/* Two columns below about 420px leaves roughly 130px per link, which forces long
+   compound words to break mid-word. Start at one column and add the second only
+   once the container can hold a full word. */
+const GROUP_COLUMN_CLASS = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 @min-[420px]:grid-cols-2",
+    3: "grid-cols-1 @min-[420px]:grid-cols-2 @min-[600px]:grid-cols-3",
+    4: "grid-cols-1 @min-[420px]:grid-cols-2 @min-[600px]:grid-cols-3 @min-[1136px]:grid-cols-4",
+    5: "grid-cols-1 @min-[420px]:grid-cols-2 @min-[600px]:grid-cols-3 @min-[1136px]:grid-cols-5",
+};
+function FooterLinkAnchor({ link, className }) {
+    const externalAttributes = link.external
+        ? { target: "_blank", rel: "noreferrer" }
+        : {};
+    return ((0, jsx_runtime_1.jsxs)("a", { href: link.href, onClick: link.onClick, className: (0, cn_1.cn)(LINK_CLASS, className), ...externalAttributes, children: [(0, jsx_runtime_1.jsx)("span", { className: "min-w-0", children: link.label }), link.badge && ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { color: "orange", type: "accent", size: "sm", children: link.badge })), link.external && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "(opens in a new tab)" })] }));
+}
+/**
+ * A native select is used deliberately. It keeps the control usable at 320px,
+ * gives the platform picker on touch devices, and follows the semantic
+ * `--color-surface` role so a consumer theme reaches it.
+ */
+function LocaleSelect({ control }) {
+    const selectId = (0, react_1.useId)();
+    const hintId = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full min-w-0 max-w-[240px] flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: selectId, className: "text-sm font-medium break-words text-grey-700", children: control.label }), (0, jsx_runtime_1.jsxs)("div", { className: "relative w-full min-w-0", children: [(0, jsx_runtime_1.jsx)("select", { id: selectId, value: control.value, "aria-describedby": control.hint ? hintId : undefined, onChange: (event) => control.onChange(event.target.value), className: "h-11 w-full min-w-0 cursor-pointer appearance-none truncate rounded-md border border-grey-500 bg-surface py-2 pr-10 pl-3 text-sm text-grey-900 transition-colors hover:border-grey-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: control.options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.value))) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: "md", "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-grey-500" })] }), control.hint && ((0, jsx_runtime_1.jsx)("p", { id: hintId, className: "text-xs break-words text-grey-500", children: control.hint }))] }));
+}
+/* ─── Block ────────────────────────────────────────────────────────────── */
+/**
+ * Site Footer — browse grouped site links, legal information, social
+ * destinations, and locale controls.
+ *
+ * Only a default state is meaningful: the footer presents destinations the
+ * consuming application already knows. There is nothing to load, submit, or
+ * confirm, so no loading, error, or success state is offered. Every section is
+ * optional; omitting one removes it rather than rendering an empty shell. A
+ * locale control requires an `onChange` handler, so the footer can never render
+ * a switcher that does nothing.
+ */
+exports.SiteFooterBlock = (0, react_1.forwardRef)(({ label = "Site footer", brand, groups, groupHeadingLevel = "h2", social, socialLabel = "Social media", copyright, legalLinks, legalLabel = "Legal", localeControls, children, className, ...rest }, ref) => {
+    const groupIdPrefix = (0, react_1.useId)();
+    const GroupHeading = groupHeadingLevel;
+    const groupList = groups ?? [];
+    const socialList = social ?? [];
+    const localeList = localeControls ?? [];
+    const legalList = legalLinks ?? [];
+    const hasTop = Boolean(brand) || groupList.length > 0;
+    const hasBottom = Boolean(copyright) || legalList.length > 0 || socialList.length > 0 || localeList.length > 0;
+    const brandBody = brand && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: brand.logo ??
+            (brand.name && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-lg font-semibold break-words text-grey-900", children: brand.name }))) }));
+    return ((0, jsx_runtime_1.jsx)("footer", { ref: ref, "aria-label": label, className: (0, cn_1.cn)("@container relative w-full border-t border-surface-border-strong bg-surface-muted", className), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[1136px] flex-col gap-10 px-4 py-10 @min-[600px]:px-8 @min-[600px]:py-14", children: [hasTop && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-10 @min-[1136px]:flex-row @min-[1136px]:gap-16", children: [brand && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-3 @min-[1136px]:max-w-[300px] @min-[1136px]:shrink-0", children: [brand.href ? ((0, jsx_runtime_1.jsx)("a", { href: brand.href, className: "inline-flex max-w-full items-center gap-2 rounded no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: brandBody })) : ((0, jsx_runtime_1.jsx)("div", { className: "inline-flex max-w-full items-center gap-2", children: brandBody })), brand.description && ((0, jsx_runtime_1.jsx)("p", { className: "max-w-[46ch] text-sm break-words text-grey-600", children: brand.description }))] })), groupList.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("grid min-w-0 gap-x-6 gap-y-8 @min-[1136px]:flex-1", GROUP_COLUMN_CLASS[Math.min(Math.max(groupList.length, 1), 5)]), children: groupList.map((group) => {
+                                const headingId = `${groupIdPrefix}-${group.id}`;
+                                return ((0, jsx_runtime_1.jsxs)("nav", { "aria-labelledby": headingId, className: "flex min-w-0 flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(GroupHeading, { id: headingId, className: "text-sm font-semibold break-words text-grey-900", children: group.title }), (0, jsx_runtime_1.jsx)("ul", { className: "m-0 flex list-none flex-col gap-2.5 p-0", children: group.links.map((link) => ((0, jsx_runtime_1.jsx)("li", { className: "min-w-0", children: (0, jsx_runtime_1.jsx)(FooterLinkAnchor, { link: link }) }, link.id))) })] }, group.id));
+                            }) }))] })), localeList.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex min-w-0 flex-col gap-4 border-t border-surface-border pt-8 @min-[600px]:flex-row @min-[600px]:flex-wrap @min-[600px]:gap-6", children: localeList.map((control) => ((0, jsx_runtime_1.jsx)(LocaleSelect, { control: control }, control.id))) })), children && (0, jsx_runtime_1.jsx)("div", { className: "min-w-0", children: children }), hasBottom && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-5 border-t border-surface-border pt-8 @min-[600px]:flex-row @min-[600px]:flex-wrap @min-[600px]:items-center @min-[600px]:justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [copyright && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm break-words text-grey-600", children: copyright })), legalList.length > 0 && ((0, jsx_runtime_1.jsx)("nav", { "aria-label": legalLabel, className: "min-w-0", children: (0, jsx_runtime_1.jsx)("ul", { className: "m-0 flex list-none flex-wrap gap-x-5 gap-y-2 p-0", children: legalList.map((link) => ((0, jsx_runtime_1.jsx)("li", { className: "min-w-0", children: (0, jsx_runtime_1.jsx)(FooterLinkAnchor, { link: link }) }, link.id))) }) }))] }), socialList.length > 0 && ((0, jsx_runtime_1.jsx)("nav", { "aria-label": socialLabel, className: "min-w-0", children: (0, jsx_runtime_1.jsx)("ul", { className: "m-0 flex list-none flex-wrap items-center gap-2 p-0", children: socialList.map((entry) => {
+                                    const isExternal = entry.external !== false;
+                                    const visual = entry.artwork ?? (entry.icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: entry.icon, size: "md", "aria-hidden": "true" }));
+                                    return ((0, jsx_runtime_1.jsx)("li", { className: "min-w-0", children: (0, jsx_runtime_1.jsx)("a", { href: entry.href, "aria-label": visual ? entry.label : undefined, className: (0, cn_1.cn)("inline-flex min-h-11 min-w-11 max-w-full items-center justify-center gap-2 rounded-lg border border-transparent px-2 text-grey-600 no-underline transition-colors hover:border-surface-border-strong hover:bg-surface hover:text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", !visual && "text-sm font-medium break-words"), ...(isExternal ? { target: "_blank", rel: "noreferrer" } : {}), children: visual ?? (0, jsx_runtime_1.jsx)("span", { className: "min-w-0", children: entry.label }) }) }, entry.id));
+                                }) }) }))] }))] }) }));
+});
+exports.SiteFooterBlock.displayName = "SiteFooterBlock";