@raydenui/ui 0.9.7 → 0.10.0

package/dist/Table-DCNSxua1.d.cts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+
+declare const illustrationNames: readonly ["calendar", "chat", "contacts", "dashboard", "favorites", "file-manager", "forms", "gallery", "inbox", "invoice", "notifications", "product-catalog", "project-list", "search", "shopping-cart", "subscriptions", "survey", "task-templates", "team"];
+type IllustrationName = (typeof illustrationNames)[number];
+
+type TableProps = HTMLAttributes<HTMLTableElement>;
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+declare const TableHeader: react.ForwardRefExoticComponent<TableHeaderProps & react.RefAttributes<HTMLTableSectionElement>>;
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Whether this row is selected */
+    selected?: boolean;
+}
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+type SortDirection = "asc" | "desc" | null;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Enable sort indicator and click-to-sort behavior */
+    sortable?: boolean;
+    /** Current sort direction for this column */
+    sortDirection?: SortDirection;
+    /** Called when the sort indicator is clicked */
+    onSort?: () => void;
+}
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
+type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+
+export { type IllustrationName as I, type SortDirection as S, Table as T, TableBody as a, type TableBodyProps as b, TableCell as c, type TableCellProps as d, TableHead as e, type TableHeadProps as f, TableHeader as g, type TableHeaderProps as h, type TableProps as i, TableRow as j, type TableRowProps as k, illustrationNames as l };

package/dist/Table-DCNSxua1.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+
+declare const illustrationNames: readonly ["calendar", "chat", "contacts", "dashboard", "favorites", "file-manager", "forms", "gallery", "inbox", "invoice", "notifications", "product-catalog", "project-list", "search", "shopping-cart", "subscriptions", "survey", "task-templates", "team"];
+type IllustrationName = (typeof illustrationNames)[number];
+
+type TableProps = HTMLAttributes<HTMLTableElement>;
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+declare const TableHeader: react.ForwardRefExoticComponent<TableHeaderProps & react.RefAttributes<HTMLTableSectionElement>>;
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Whether this row is selected */
+    selected?: boolean;
+}
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+type SortDirection = "asc" | "desc" | null;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Enable sort indicator and click-to-sort behavior */
+    sortable?: boolean;
+    /** Current sort direction for this column */
+    sortDirection?: SortDirection;
+    /** Called when the sort indicator is clicked */
+    onSort?: () => void;
+}
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
+type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+
+export { type IllustrationName as I, type SortDirection as S, Table as T, TableBody as a, type TableBodyProps as b, TableCell as c, type TableCellProps as d, TableHead as e, type TableHeadProps as f, TableHeader as g, type TableHeaderProps as h, type TableProps as i, TableRow as j, type TableRowProps as k, illustrationNames as l };

package/dist/blocks/ApplicationShellBlock.cjs

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApplicationShellBlock = ApplicationShellBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+const Spinner_1 = require("../components/Spinner/index.cjs");
+const TIER = {
+    sm: {
+        expandedFlex: "hidden @min-[720px]:flex",
+        collapsed: "@min-[720px]:hidden",
+        row: "@min-[720px]:flex-row",
+        sidebarWidth: "@min-[720px]:w-[248px]",
+        pad: "@min-[720px]:px-6",
+    },
+    md: {
+        expandedFlex: "hidden @min-[900px]:flex",
+        collapsed: "@min-[900px]:hidden",
+        row: "@min-[900px]:flex-row",
+        sidebarWidth: "@min-[900px]:w-[264px]",
+        pad: "@min-[900px]:px-6",
+    },
+    lg: {
+        expandedFlex: "hidden @min-[1080px]:flex",
+        collapsed: "@min-[1080px]:hidden",
+        row: "@min-[1080px]:flex-row",
+        sidebarWidth: "@min-[1080px]:w-[280px]",
+        pad: "@min-[1080px]:px-6",
+    },
+};
+/* ─── Shared recipes ─────────────────────────────────────────────────── */
+const FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+const NAV_ITEM_BASE = (0, cn_1.cn)("group flex min-h-11 w-full min-w-0 items-start gap-3 rounded-lg px-3 py-2 text-left text-body-sm font-medium transition-colors", FOCUS_RING);
+/* ─── Navigation item ────────────────────────────────────────────────── */
+function NavBadge({ badge, badgeDescription, }) {
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "ml-auto inline-flex shrink-0 items-center rounded-full bg-grey-100 px-2 py-0.5 text-body-xs font-semibold text-grey-700", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": badgeDescription ? true : undefined, children: badge }), badgeDescription && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: badgeDescription })] }));
+}
+/**
+ * One element for both arrangements. The collapsed panel used to rebuild
+ * destinations as buttons, which dropped the href and sent them nowhere
+ * (audit B01); rendering an anchor whenever there is an href makes that
+ * impossible to reintroduce.
+ */
+function ShellNavItem({ item, showDescription, onNavigate, reasonIdPrefix, }) {
+    const unavailable = "unavailableReason" in item ? item.unavailableReason : undefined;
+    const reasonId = `${reasonIdPrefix}-${item.id}-reason`;
+    const body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: item.icon, size: "md", className: (0, cn_1.cn)("mt-0.5 shrink-0", item.current ? "text-action-primary-text" : "text-grey-500") })), (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "break-words", children: item.label }), showDescription && item.description && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-normal break-words text-grey-500", children: item.description }))] }), item.badge && (0, jsx_runtime_1.jsx)(NavBadge, { badge: item.badge, badgeDescription: item.badgeDescription })] }));
+    if (unavailable) {
+        return ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", disabled: true, "aria-describedby": reasonId, className: (0, cn_1.cn)(NAV_ITEM_BASE, "cursor-not-allowed text-grey-500"), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "lock", size: "md", className: "mt-0.5 shrink-0 text-grey-500", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: (0, jsx_runtime_1.jsx)("span", { className: "break-words", children: item.label }) })] }), (0, jsx_runtime_1.jsx)("p", { id: reasonId, className: "px-3 pb-1 text-body-xs break-words text-grey-500", children: unavailable })] }));
+    }
+    const tone = item.current
+        ? "bg-primary-50 text-grey-900"
+        : "text-grey-700 hover:bg-surface-muted hover:text-grey-900";
+    if (item.href) {
+        return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { href: item.href, "aria-current": item.current ? "page" : undefined, onClick: () => {
+                    item.onClick?.();
+                    onNavigate?.();
+                }, ...(item.external ? { target: "_blank", rel: "noreferrer" } : {}), className: (0, cn_1.cn)(NAV_ITEM_BASE, tone), children: body }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-current": item.current ? "page" : undefined, onClick: () => {
+                item.onClick?.();
+                onNavigate?.();
+            }, className: (0, cn_1.cn)(NAV_ITEM_BASE, "cursor-pointer", tone), children: body }) }));
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+function ApplicationShellBlock({ brand, brandHref, onBrandClick, navSections = [], navLabel = "Main", sectionHeadingLevel = "h2", navStatus = "idle", navErrorMessage = "Navigation could not be loaded.", onRetryNav, navLoadingMessage = "Loading navigation", navEmptyMessage, search, switcher, actions = [], actionsLabel = "Account and tools", sidebarFooter, openMenuLabel = "Open navigation", closeMenuLabel = "Close navigation", skipLinkLabel = "Skip to main content", skipNavLabel = "Skip links", expandAt = "md", mainScroll = "page", stickyTopBar = true, mainLabel = "Workspace", children, className, }) {
+    const uid = (0, react_1.useId)();
+    const mainId = `${uid}-main`;
+    const panelId = `${uid}-nav-panel`;
+    const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
+    const toggleRef = (0, react_1.useRef)(null);
+    const tier = TIER[expandAt];
+    const SectionHeading = sectionHeadingLevel;
+    const itemCount = navSections.reduce((total, section) => total + section.items.length, 0);
+    /**
+     * A shell with nothing to navigate to renders no rail and no toggle, rather
+     * than an empty rail and a control that opens nothing. Supplying
+     * `navEmptyMessage` is how a consumer asks for the empty rail instead.
+     */
+    const hasNav = navStatus !== "idle" || itemCount > 0 || Boolean(navEmptyMessage);
+    const regionScroll = mainScroll === "region";
+    function closeMenu() {
+        setMenuOpen(false);
+    }
+    function handleKeyDown(event) {
+        if (event.defaultPrevented || event.key !== "Escape" || !menuOpen)
+            return;
+        setMenuOpen(false);
+        toggleRef.current?.focus();
+    }
+    /* ── Navigation body, rendered in the sidebar and in the collapsed panel ── */
+    function renderNav(placement) {
+        if (navStatus === "loading") {
+            return ((0, jsx_runtime_1.jsxs)("div", { role: "status", className: "flex items-center gap-2 px-3 py-4 text-body-sm text-grey-500", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)("span", { children: navLoadingMessage })] }));
+        }
+        if (navStatus === "error") {
+            return ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: "mx-1 rounded-lg border border-error-200 bg-error-50 px-3 py-3 text-body-sm text-error-700", children: [(0, jsx_runtime_1.jsx)("p", { className: "break-words", children: navErrorMessage }), onRetryNav && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onRetryNav, className: (0, cn_1.cn)("mt-2 inline-flex min-h-9 cursor-pointer items-center gap-2 rounded-lg border-[1.5px] border-current px-3 py-1.5 font-semibold", FOCUS_RING), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "refresh", size: "sm", "aria-hidden": "true" }), "Try again"] }))] }));
+        }
+        if (itemCount === 0) {
+            return navEmptyMessage ? ((0, jsx_runtime_1.jsx)("p", { className: "px-3 py-4 text-body-sm break-words text-grey-500", children: navEmptyMessage })) : null;
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-5", children: navSections.map((section) => {
+                const headingId = `${uid}-${placement}-${section.id}`;
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [section.label && ((0, jsx_runtime_1.jsx)(SectionHeading, { id: headingId, className: "px-3 pb-1 text-caption-sm font-semibold break-words text-grey-500 uppercase", children: section.label })), (0, jsx_runtime_1.jsx)("ul", { className: "flex list-none flex-col gap-0.5", ...(section.label ? { "aria-labelledby": headingId } : {}), children: section.items.map((item) => ((0, jsx_runtime_1.jsx)(ShellNavItem, { item: item, showDescription: placement === "panel", onNavigate: placement === "panel" ? closeMenu : undefined, reasonIdPrefix: `${uid}-${placement}` }, item.id))) })] }, section.id));
+            }) }));
+    }
+    /* ── Brand ── */
+    function renderBrand(extraClassName) {
+        if (!brand)
+            return null;
+        const content = (0, jsx_runtime_1.jsx)("span", { className: "flex min-w-0 items-center gap-2 break-words", children: brand });
+        if (brandHref) {
+            return ((0, jsx_runtime_1.jsx)("a", { href: brandHref, onClick: onBrandClick, className: (0, cn_1.cn)("rounded", FOCUS_RING, extraClassName), children: content }));
+        }
+        if (onBrandClick) {
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onBrandClick, className: (0, cn_1.cn)("cursor-pointer rounded text-left", FOCUS_RING, extraClassName), children: content }));
+        }
+        return (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("min-w-0", extraClassName), children: content });
+    }
+    /* ── Top-bar actions ── */
+    function renderAction(action) {
+        const iconOnly = Boolean(action.icon);
+        const inner = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [action.icon ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: action.icon, size: "md", "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)("span", { className: "break-words", children: action.label })), iconOnly && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: action.label }), action.badge && ((0, jsx_runtime_1.jsxs)("span", { className: "absolute top-0.5 right-0.5 inline-flex min-w-4 items-center justify-center rounded-full bg-action-primary px-1 text-[10px] leading-4 font-semibold text-white", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": action.badgeDescription ? true : undefined, children: action.badge }), action.badgeDescription && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: action.badgeDescription })] }))] }));
+        const classes = (0, cn_1.cn)("relative inline-flex min-h-11 min-w-11 items-center justify-center gap-2 rounded-lg px-2 text-body-sm font-medium text-grey-700 transition-colors hover:bg-surface-muted hover:text-grey-900", FOCUS_RING);
+        if (action.href) {
+            return ((0, jsx_runtime_1.jsx)("a", { href: action.href, onClick: action.onClick, ...(action.external ? { target: "_blank", rel: "noreferrer" } : {}), className: classes, children: inner }, action.id));
+        }
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: action.onClick, className: (0, cn_1.cn)(classes, "cursor-pointer"), children: inner }, action.id));
+    }
+    const sidebarInner = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [brand && (0, jsx_runtime_1.jsx)("div", { className: "px-3 pb-4", children: renderBrand("inline-flex min-h-10 items-center") }), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex-1", regionScroll && "min-h-0 overflow-y-auto"), children: renderNav("sidebar") }), sidebarFooter && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 border-t border-surface-border px-3 pt-4", children: sidebarFooter }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { onKeyDown: handleKeyDown, className: (0, cn_1.cn)(
+        // `@container` sits on the outermost element, outside the padded
+        // surfaces, so `@min-[…]` padding inside resolves against the shell's
+        // real width. `relative` keeps the skip link's positioned box inside
+        // the shell instead of widening the document (audit B03).
+        "@container relative flex w-full flex-col bg-surface-muted", regionScroll && "h-full max-h-full overflow-hidden", className), children: [(0, jsx_runtime_1.jsx)("nav", { "aria-label": skipNavLabel, children: (0, jsx_runtime_1.jsx)("a", { href: `#${mainId}`, className: (0, cn_1.cn)("sr-only rounded-lg bg-surface px-4 py-2 text-body-sm font-semibold text-action-primary-text shadow-soft-sm", "focus:not-sr-only focus:absolute focus:top-3 focus:left-3 focus:z-40", FOCUS_RING), children: skipLinkLabel }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex min-h-0 w-full flex-1 flex-col", tier.row), children: [hasNav && (
+                    // The landmark wraps the brand, the destinations, and the sidebar
+                    // footer. With the landmark on an inner element the brand and footer
+                    // were page content outside every landmark, which axe's `region` rule
+                    // reported and a screen-reader user would meet as stray text.
+                    (0, jsx_runtime_1.jsx)("nav", { "aria-label": navLabel, className: (0, cn_1.cn)("w-full shrink-0 flex-col border-r border-surface-border bg-surface px-3 py-5", tier.sidebarWidth, regionScroll && "min-h-0", tier.expandedFlex), children: sidebarInner })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex min-w-0 min-h-0 flex-1 flex-col"), children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, cn_1.cn)("flex w-full flex-wrap items-center gap-2 border-b border-surface-border bg-surface px-4 py-2", tier.pad, stickyTopBar && !regionScroll && "sticky top-0 z-20"), children: [hasNav && ((0, jsx_runtime_1.jsxs)("button", { ref: toggleRef, type: "button", onClick: () => setMenuOpen((open) => !open), "aria-expanded": menuOpen, "aria-controls": panelId, className: (0, cn_1.cn)("inline-flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-lg text-grey-700 hover:bg-surface-muted hover:text-grey-900", FOCUS_RING, tier.collapsed), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: menuOpen ? "multiply" : "list", size: "md", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: menuOpen ? closeMenuLabel : openMenuLabel })] })), brand && !(hasNav && switcher) && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("min-w-0", hasNav ? tier.collapsed : undefined), children: renderBrand("inline-flex min-h-10 items-center") })), switcher && (
+                                    // A floor, not a fixed width: the switcher is a feature, and a
+                                    // feature squeezed to nothing has been dropped. It wraps onto the
+                                    // next row before it shrinks below this.
+                                    (0, jsx_runtime_1.jsx)("div", { className: "flex min-w-0 flex-1 @min-[640px]:min-w-[168px] @min-[640px]:flex-none", children: switcher })), search && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(
+                                        // Wraps onto its own row while the shell is narrow rather
+                                        // than being removed. One instance, so its state is stable.
+                                        "order-last w-full min-w-0 basis-full", "@min-[640px]:order-none @min-[640px]:w-auto @min-[640px]:max-w-[420px] @min-[640px]:flex-1 @min-[640px]:basis-auto"), children: search })), actions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { role: "group", "aria-label": actionsLabel, className: "ml-auto flex shrink-0 items-center gap-1", children: actions.map((action) => renderAction(action)) }))] }), hasNav && ((0, jsx_runtime_1.jsxs)("nav", { id: panelId, "aria-label": navLabel, className: (0, cn_1.cn)("border-b border-surface-border bg-surface px-3 py-4", tier.collapsed, !menuOpen && "hidden"), children: [brand && switcher && ((0, jsx_runtime_1.jsx)("div", { className: "px-3 pb-4", children: renderBrand("inline-flex min-h-11 items-center") })), renderNav("panel"), sidebarFooter && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 border-t border-surface-border px-3 pt-4", children: sidebarFooter }))] })), (0, jsx_runtime_1.jsx)("main", { id: mainId, 
+                                /**
+                                 * In `region` mode the workspace is its own scroll container, so it
+                                 * has to be reachable from the keyboard even when the content it
+                                 * holds is not focusable (WCAG 2.1.1). In `page` mode it is only a
+                                 * skip-link target and should not be a tab stop.
+                                 */
+                                tabIndex: regionScroll ? 0 : -1, "aria-label": mainLabel, className: (0, cn_1.cn)("min-w-0 flex-1 px-4 py-6", tier.pad, regionScroll && "min-h-0 overflow-y-auto"), children: children })] })] })] }));
+}

package/dist/blocks/ApplicationShellBlock.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useRef, useState, } from "react";
+import { cn } from "../utils/cn.js";
+import { Icon } from "../components/Icon/index.js";
+import { Spinner } from "../components/Spinner/index.js";
+const TIER = {
+    sm: {
+        expandedFlex: "hidden @min-[720px]:flex",
+        collapsed: "@min-[720px]:hidden",
+        row: "@min-[720px]:flex-row",
+        sidebarWidth: "@min-[720px]:w-[248px]",
+        pad: "@min-[720px]:px-6",
+    },
+    md: {
+        expandedFlex: "hidden @min-[900px]:flex",
+        collapsed: "@min-[900px]:hidden",
+        row: "@min-[900px]:flex-row",
+        sidebarWidth: "@min-[900px]:w-[264px]",
+        pad: "@min-[900px]:px-6",
+    },
+    lg: {
+        expandedFlex: "hidden @min-[1080px]:flex",
+        collapsed: "@min-[1080px]:hidden",
+        row: "@min-[1080px]:flex-row",
+        sidebarWidth: "@min-[1080px]:w-[280px]",
+        pad: "@min-[1080px]:px-6",
+    },
+};
+/* ─── Shared recipes ─────────────────────────────────────────────────── */
+const FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+const NAV_ITEM_BASE = cn("group flex min-h-11 w-full min-w-0 items-start gap-3 rounded-lg px-3 py-2 text-left text-body-sm font-medium transition-colors", FOCUS_RING);
+/* ─── Navigation item ────────────────────────────────────────────────── */
+function NavBadge({ badge, badgeDescription, }) {
+    return (_jsxs("span", { className: "ml-auto inline-flex shrink-0 items-center rounded-full bg-grey-100 px-2 py-0.5 text-body-xs font-semibold text-grey-700", children: [_jsx("span", { "aria-hidden": badgeDescription ? true : undefined, children: badge }), badgeDescription && _jsx("span", { className: "sr-only", children: badgeDescription })] }));
+}
+/**
+ * One element for both arrangements. The collapsed panel used to rebuild
+ * destinations as buttons, which dropped the href and sent them nowhere
+ * (audit B01); rendering an anchor whenever there is an href makes that
+ * impossible to reintroduce.
+ */
+function ShellNavItem({ item, showDescription, onNavigate, reasonIdPrefix, }) {
+    const unavailable = "unavailableReason" in item ? item.unavailableReason : undefined;
+    const reasonId = `${reasonIdPrefix}-${item.id}-reason`;
+    const body = (_jsxs(_Fragment, { children: [item.icon && (_jsx(Icon, { name: item.icon, size: "md", className: cn("mt-0.5 shrink-0", item.current ? "text-action-primary-text" : "text-grey-500") })), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "break-words", children: item.label }), showDescription && item.description && (_jsx("span", { className: "text-body-xs font-normal break-words text-grey-500", children: item.description }))] }), item.badge && _jsx(NavBadge, { badge: item.badge, badgeDescription: item.badgeDescription })] }));
+    if (unavailable) {
+        return (_jsxs("li", { children: [_jsxs("button", { type: "button", disabled: true, "aria-describedby": reasonId, className: cn(NAV_ITEM_BASE, "cursor-not-allowed text-grey-500"), children: [_jsx(Icon, { name: "lock", size: "md", className: "mt-0.5 shrink-0 text-grey-500", "aria-hidden": "true" }), _jsx("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: _jsx("span", { className: "break-words", children: item.label }) })] }), _jsx("p", { id: reasonId, className: "px-3 pb-1 text-body-xs break-words text-grey-500", children: unavailable })] }));
+    }
+    const tone = item.current
+        ? "bg-primary-50 text-grey-900"
+        : "text-grey-700 hover:bg-surface-muted hover:text-grey-900";
+    if (item.href) {
+        return (_jsx("li", { children: _jsx("a", { href: item.href, "aria-current": item.current ? "page" : undefined, onClick: () => {
+                    item.onClick?.();
+                    onNavigate?.();
+                }, ...(item.external ? { target: "_blank", rel: "noreferrer" } : {}), className: cn(NAV_ITEM_BASE, tone), children: body }) }));
+    }
+    return (_jsx("li", { children: _jsx("button", { type: "button", "aria-current": item.current ? "page" : undefined, onClick: () => {
+                item.onClick?.();
+                onNavigate?.();
+            }, className: cn(NAV_ITEM_BASE, "cursor-pointer", tone), children: body }) }));
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+export function ApplicationShellBlock({ brand, brandHref, onBrandClick, navSections = [], navLabel = "Main", sectionHeadingLevel = "h2", navStatus = "idle", navErrorMessage = "Navigation could not be loaded.", onRetryNav, navLoadingMessage = "Loading navigation", navEmptyMessage, search, switcher, actions = [], actionsLabel = "Account and tools", sidebarFooter, openMenuLabel = "Open navigation", closeMenuLabel = "Close navigation", skipLinkLabel = "Skip to main content", skipNavLabel = "Skip links", expandAt = "md", mainScroll = "page", stickyTopBar = true, mainLabel = "Workspace", children, className, }) {
+    const uid = useId();
+    const mainId = `${uid}-main`;
+    const panelId = `${uid}-nav-panel`;
+    const [menuOpen, setMenuOpen] = useState(false);
+    const toggleRef = useRef(null);
+    const tier = TIER[expandAt];
+    const SectionHeading = sectionHeadingLevel;
+    const itemCount = navSections.reduce((total, section) => total + section.items.length, 0);
+    /**
+     * A shell with nothing to navigate to renders no rail and no toggle, rather
+     * than an empty rail and a control that opens nothing. Supplying
+     * `navEmptyMessage` is how a consumer asks for the empty rail instead.
+     */
+    const hasNav = navStatus !== "idle" || itemCount > 0 || Boolean(navEmptyMessage);
+    const regionScroll = mainScroll === "region";
+    function closeMenu() {
+        setMenuOpen(false);
+    }
+    function handleKeyDown(event) {
+        if (event.defaultPrevented || event.key !== "Escape" || !menuOpen)
+            return;
+        setMenuOpen(false);
+        toggleRef.current?.focus();
+    }
+    /* ── Navigation body, rendered in the sidebar and in the collapsed panel ── */
+    function renderNav(placement) {
+        if (navStatus === "loading") {
+            return (_jsxs("div", { role: "status", className: "flex items-center gap-2 px-3 py-4 text-body-sm text-grey-500", children: [_jsx(Spinner, { size: "sm" }), _jsx("span", { children: navLoadingMessage })] }));
+        }
+        if (navStatus === "error") {
+            return (_jsxs("div", { role: "alert", className: "mx-1 rounded-lg border border-error-200 bg-error-50 px-3 py-3 text-body-sm text-error-700", children: [_jsx("p", { className: "break-words", children: navErrorMessage }), onRetryNav && (_jsxs("button", { type: "button", onClick: onRetryNav, className: cn("mt-2 inline-flex min-h-9 cursor-pointer items-center gap-2 rounded-lg border-[1.5px] border-current px-3 py-1.5 font-semibold", FOCUS_RING), children: [_jsx(Icon, { name: "refresh", size: "sm", "aria-hidden": "true" }), "Try again"] }))] }));
+        }
+        if (itemCount === 0) {
+            return navEmptyMessage ? (_jsx("p", { className: "px-3 py-4 text-body-sm break-words text-grey-500", children: navEmptyMessage })) : null;
+        }
+        return (_jsx("div", { className: "flex flex-col gap-5", children: navSections.map((section) => {
+                const headingId = `${uid}-${placement}-${section.id}`;
+                return (_jsxs("div", { className: "flex flex-col gap-1", children: [section.label && (_jsx(SectionHeading, { id: headingId, className: "px-3 pb-1 text-caption-sm font-semibold break-words text-grey-500 uppercase", children: section.label })), _jsx("ul", { className: "flex list-none flex-col gap-0.5", ...(section.label ? { "aria-labelledby": headingId } : {}), children: section.items.map((item) => (_jsx(ShellNavItem, { item: item, showDescription: placement === "panel", onNavigate: placement === "panel" ? closeMenu : undefined, reasonIdPrefix: `${uid}-${placement}` }, item.id))) })] }, section.id));
+            }) }));
+    }
+    /* ── Brand ── */
+    function renderBrand(extraClassName) {
+        if (!brand)
+            return null;
+        const content = _jsx("span", { className: "flex min-w-0 items-center gap-2 break-words", children: brand });
+        if (brandHref) {
+            return (_jsx("a", { href: brandHref, onClick: onBrandClick, className: cn("rounded", FOCUS_RING, extraClassName), children: content }));
+        }
+        if (onBrandClick) {
+            return (_jsx("button", { type: "button", onClick: onBrandClick, className: cn("cursor-pointer rounded text-left", FOCUS_RING, extraClassName), children: content }));
+        }
+        return _jsx("div", { className: cn("min-w-0", extraClassName), children: content });
+    }
+    /* ── Top-bar actions ── */
+    function renderAction(action) {
+        const iconOnly = Boolean(action.icon);
+        const inner = (_jsxs(_Fragment, { children: [action.icon ? (_jsx(Icon, { name: action.icon, size: "md", "aria-hidden": "true" })) : (_jsx("span", { className: "break-words", children: action.label })), iconOnly && _jsx("span", { className: "sr-only", children: action.label }), action.badge && (_jsxs("span", { className: "absolute top-0.5 right-0.5 inline-flex min-w-4 items-center justify-center rounded-full bg-action-primary px-1 text-[10px] leading-4 font-semibold text-white", children: [_jsx("span", { "aria-hidden": action.badgeDescription ? true : undefined, children: action.badge }), action.badgeDescription && _jsx("span", { className: "sr-only", children: action.badgeDescription })] }))] }));
+        const classes = cn("relative inline-flex min-h-11 min-w-11 items-center justify-center gap-2 rounded-lg px-2 text-body-sm font-medium text-grey-700 transition-colors hover:bg-surface-muted hover:text-grey-900", FOCUS_RING);
+        if (action.href) {
+            return (_jsx("a", { href: action.href, onClick: action.onClick, ...(action.external ? { target: "_blank", rel: "noreferrer" } : {}), className: classes, children: inner }, action.id));
+        }
+        return (_jsx("button", { type: "button", onClick: action.onClick, className: cn(classes, "cursor-pointer"), children: inner }, action.id));
+    }
+    const sidebarInner = (_jsxs(_Fragment, { children: [brand && _jsx("div", { className: "px-3 pb-4", children: renderBrand("inline-flex min-h-10 items-center") }), _jsx("div", { className: cn("flex-1", regionScroll && "min-h-0 overflow-y-auto"), children: renderNav("sidebar") }), sidebarFooter && (_jsx("div", { className: "mt-4 border-t border-surface-border px-3 pt-4", children: sidebarFooter }))] }));
+    return (_jsxs("div", { onKeyDown: handleKeyDown, className: cn(
+        // `@container` sits on the outermost element, outside the padded
+        // surfaces, so `@min-[…]` padding inside resolves against the shell's
+        // real width. `relative` keeps the skip link's positioned box inside
+        // the shell instead of widening the document (audit B03).
+        "@container relative flex w-full flex-col bg-surface-muted", regionScroll && "h-full max-h-full overflow-hidden", className), children: [_jsx("nav", { "aria-label": skipNavLabel, children: _jsx("a", { href: `#${mainId}`, className: cn("sr-only rounded-lg bg-surface px-4 py-2 text-body-sm font-semibold text-action-primary-text shadow-soft-sm", "focus:not-sr-only focus:absolute focus:top-3 focus:left-3 focus:z-40", FOCUS_RING), children: skipLinkLabel }) }), _jsxs("div", { className: cn("flex min-h-0 w-full flex-1 flex-col", tier.row), children: [hasNav && (
+                    // The landmark wraps the brand, the destinations, and the sidebar
+                    // footer. With the landmark on an inner element the brand and footer
+                    // were page content outside every landmark, which axe's `region` rule
+                    // reported and a screen-reader user would meet as stray text.
+                    _jsx("nav", { "aria-label": navLabel, className: cn("w-full shrink-0 flex-col border-r border-surface-border bg-surface px-3 py-5", tier.sidebarWidth, regionScroll && "min-h-0", tier.expandedFlex), children: sidebarInner })), _jsxs("div", { className: cn("flex min-w-0 min-h-0 flex-1 flex-col"), children: [_jsxs("header", { className: cn("flex w-full flex-wrap items-center gap-2 border-b border-surface-border bg-surface px-4 py-2", tier.pad, stickyTopBar && !regionScroll && "sticky top-0 z-20"), children: [hasNav && (_jsxs("button", { ref: toggleRef, type: "button", onClick: () => setMenuOpen((open) => !open), "aria-expanded": menuOpen, "aria-controls": panelId, className: cn("inline-flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-lg text-grey-700 hover:bg-surface-muted hover:text-grey-900", FOCUS_RING, tier.collapsed), children: [_jsx(Icon, { name: menuOpen ? "multiply" : "list", size: "md", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: menuOpen ? closeMenuLabel : openMenuLabel })] })), brand && !(hasNav && switcher) && (_jsx("div", { className: cn("min-w-0", hasNav ? tier.collapsed : undefined), children: renderBrand("inline-flex min-h-10 items-center") })), switcher && (
+                                    // A floor, not a fixed width: the switcher is a feature, and a
+                                    // feature squeezed to nothing has been dropped. It wraps onto the
+                                    // next row before it shrinks below this.
+                                    _jsx("div", { className: "flex min-w-0 flex-1 @min-[640px]:min-w-[168px] @min-[640px]:flex-none", children: switcher })), search && (_jsx("div", { className: cn(
+                                        // Wraps onto its own row while the shell is narrow rather
+                                        // than being removed. One instance, so its state is stable.
+                                        "order-last w-full min-w-0 basis-full", "@min-[640px]:order-none @min-[640px]:w-auto @min-[640px]:max-w-[420px] @min-[640px]:flex-1 @min-[640px]:basis-auto"), children: search })), actions.length > 0 && (_jsx("div", { role: "group", "aria-label": actionsLabel, className: "ml-auto flex shrink-0 items-center gap-1", children: actions.map((action) => renderAction(action)) }))] }), hasNav && (_jsxs("nav", { id: panelId, "aria-label": navLabel, className: cn("border-b border-surface-border bg-surface px-3 py-4", tier.collapsed, !menuOpen && "hidden"), children: [brand && switcher && (_jsx("div", { className: "px-3 pb-4", children: renderBrand("inline-flex min-h-11 items-center") })), renderNav("panel"), sidebarFooter && (_jsx("div", { className: "mt-4 border-t border-surface-border px-3 pt-4", children: sidebarFooter }))] })), _jsx("main", { id: mainId, 
+                                /**
+                                 * In `region` mode the workspace is its own scroll container, so it
+                                 * has to be reachable from the keyboard even when the content it
+                                 * holds is not focusable (WCAG 2.1.1). In `page` mode it is only a
+                                 * skip-link target and should not be a tab stop.
+                                 */
+                                tabIndex: regionScroll ? 0 : -1, "aria-label": mainLabel, className: cn("min-w-0 flex-1 px-4 py-6", tier.pad, regionScroll && "min-h-0 overflow-y-auto"), children: children })] })] })] }));
+}

package/dist/blocks/CheckoutReviewBlock.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutReviewBlock = CheckoutReviewBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../components/Button/index.cjs");
+const commerce_1 = require("./commerce.cjs");
+function CheckoutReviewBlock({ title = "Review your order", description = "Check the details before placing your order.", items, deliveryAddress, deliveryMethod, paymentSummary, onEditDelivery, onEditPayment, onEditCart, onConfirm, confirmLabel = "Place order", pending = false, errorMessage, confirmation, terms, totalsNote, shipping, tax, discount, currency, locale, ...frame }) {
+    const canConfirm = items.length > 0 &&
+        deliveryAddress.some((line) => line.trim()) &&
+        deliveryMethod.trim() &&
+        paymentSummary.trim() &&
+        items.every((item) => Number.isInteger(item.quantity) &&
+            item.quantity > 0 &&
+            item.quantity <= (item.stock ?? Infinity));
+    return ((0, jsx_runtime_1.jsx)(commerce_1.CommerceFrame, { ...frame, title: confirmation?.title ?? title, description: confirmation ? confirmation.description : description, busy: pending, children: confirmation ? ((0, jsx_runtime_1.jsxs)("div", { role: "status", className: "rounded-2xl bg-surface-muted p-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: confirmation.title }), confirmation.reference && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-2 text-sm text-grey-600", children: ["Order reference: ", confirmation.reference] }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "grid items-start gap-8 @min-[760px]:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] @min-[960px]:gap-14", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-b border-surface-border pb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-lg font-semibold tracking-tight", children: "Delivery details" }), onEditDelivery && ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: pending, className: `${commerce_1.commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditDelivery, children: "Edit delivery" }))] }), (0, jsx_runtime_1.jsx)("address", { className: "mt-3 text-sm leading-relaxed not-italic text-grey-600", children: deliveryAddress.map((line, i) => ((0, jsx_runtime_1.jsx)("span", { className: "block", children: line }, i))) }), (0, jsx_runtime_1.jsx)("p", { className: "mt-3 text-sm", children: deliveryMethod })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-b border-surface-border pb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-lg font-semibold tracking-tight", children: "Payment method" }), onEditPayment && ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: pending, className: `${commerce_1.commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditPayment, children: "Edit payment" }))] }), (0, jsx_runtime_1.jsx)("p", { className: "mt-3 text-sm text-grey-600", children: paymentSummary })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: "Items in your order" }), onEditCart && ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: pending, className: `${commerce_1.commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditCart, children: "Edit bag" }))] }), (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-[48px_minmax(0,1fr)_auto] items-center gap-3 py-4 text-sm", children: [(0, jsx_runtime_1.jsx)(commerce_1.CommercePhoto, { image: item.image, className: "rounded" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: item.name }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-grey-600", children: [item.variant ? `${item.variant} · ` : "", "Quantity: ", item.quantity] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-right tabular-nums", children: (0, commerce_1.formatCommerceMoney)(item.price * item.quantity, currency, locale) })] }, 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 total" }), (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 text-grey-600", children: totalsNote }), terms && (0, jsx_runtime_1.jsx)("div", { className: "mt-5 text-sm leading-relaxed text-grey-600", children: terms }), errorMessage && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "mt-4 text-sm text-error-700", children: errorMessage })), !canConfirm && ((0, jsx_runtime_1.jsx)("p", { role: "status", className: "mt-4 text-sm text-error-700", children: "Add available items and complete the delivery and payment details to continue." })), onConfirm && ((0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: pending || !canConfirm, className: "mt-6 h-auto min-h-12 w-full whitespace-normal", onClick: onConfirm, children: pending ? "Placing order…" : confirmLabel }))] })] })) }));
+}

package/dist/blocks/CheckoutReviewBlock.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../components/Button/index.js";
+import { CommerceFrame, CommerceTotals, CommercePhoto, commerceControl, formatCommerceMoney, } from "./commerce.js";
+export function CheckoutReviewBlock({ title = "Review your order", description = "Check the details before placing your order.", items, deliveryAddress, deliveryMethod, paymentSummary, onEditDelivery, onEditPayment, onEditCart, onConfirm, confirmLabel = "Place order", pending = false, errorMessage, confirmation, terms, totalsNote, shipping, tax, discount, currency, locale, ...frame }) {
+    const canConfirm = items.length > 0 &&
+        deliveryAddress.some((line) => line.trim()) &&
+        deliveryMethod.trim() &&
+        paymentSummary.trim() &&
+        items.every((item) => Number.isInteger(item.quantity) &&
+            item.quantity > 0 &&
+            item.quantity <= (item.stock ?? Infinity));
+    return (_jsx(CommerceFrame, { ...frame, title: confirmation?.title ?? title, description: confirmation ? confirmation.description : description, busy: pending, children: confirmation ? (_jsxs("div", { role: "status", className: "rounded-2xl bg-surface-muted p-6", children: [_jsx("p", { className: "font-medium", children: confirmation.title }), confirmation.reference && (_jsxs("p", { className: "mt-2 text-sm text-grey-600", children: ["Order reference: ", confirmation.reference] }))] })) : (_jsxs("div", { className: "grid items-start gap-8 @min-[760px]:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] @min-[960px]:gap-14", children: [_jsxs("div", { className: "min-w-0 space-y-6", children: [_jsxs("div", { className: "border-b border-surface-border pb-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("p", { className: "text-lg font-semibold tracking-tight", children: "Delivery details" }), onEditDelivery && (_jsx("button", { type: "button", disabled: pending, className: `${commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditDelivery, children: "Edit delivery" }))] }), _jsx("address", { className: "mt-3 text-sm leading-relaxed not-italic text-grey-600", children: deliveryAddress.map((line, i) => (_jsx("span", { className: "block", children: line }, i))) }), _jsx("p", { className: "mt-3 text-sm", children: deliveryMethod })] }), _jsxs("div", { className: "border-b border-surface-border pb-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("p", { className: "text-lg font-semibold tracking-tight", children: "Payment method" }), onEditPayment && (_jsx("button", { type: "button", disabled: pending, className: `${commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditPayment, children: "Edit payment" }))] }), _jsx("p", { className: "mt-3 text-sm text-grey-600", children: paymentSummary })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-3", children: [_jsx("p", { className: "font-semibold", children: "Items in your order" }), onEditCart && (_jsx("button", { type: "button", disabled: pending, className: `${commerceControl} border-transparent bg-transparent px-2 text-sm underline underline-offset-4 hover:border-transparent`, onClick: onEditCart, children: "Edit bag" }))] }), _jsx("ul", { className: "divide-y divide-surface-border", children: items.map((item) => (_jsxs("li", { className: "grid grid-cols-[48px_minmax(0,1fr)_auto] items-center gap-3 py-4 text-sm", children: [_jsx(CommercePhoto, { image: item.image, className: "rounded" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: item.name }), _jsxs("p", { className: "mt-1 text-grey-600", children: [item.variant ? `${item.variant} · ` : "", "Quantity: ", item.quantity] })] }), _jsx("p", { className: "text-right tabular-nums", children: formatCommerceMoney(item.price * item.quantity, currency, locale) })] }, 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 total" }), _jsx(CommerceTotals, { items: items, shipping: shipping, tax: tax, discount: discount, currency: currency, locale: locale }), totalsNote && _jsx("p", { className: "mt-4 text-sm text-grey-600", children: totalsNote }), terms && _jsx("div", { className: "mt-5 text-sm leading-relaxed text-grey-600", children: terms }), errorMessage && (_jsx("p", { role: "alert", className: "mt-4 text-sm text-error-700", children: errorMessage })), !canConfirm && (_jsx("p", { role: "status", className: "mt-4 text-sm text-error-700", children: "Add available items and complete the delivery and payment details to continue." })), onConfirm && (_jsx(Button, { disabled: pending || !canConfirm, className: "mt-6 h-auto min-h-12 w-full whitespace-normal", onClick: onConfirm, children: pending ? "Placing order…" : confirmLabel }))] })] })) }));
+}