@raydenui/ui 0.9.7 → 0.10.0

package/dist/blocks/PageHeaderBlock.cjs

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeaderBlock = PageHeaderBlock;
+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");
+/* ─── Recipes ────────────────────────────────────────────────────────── */
+const FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+/** Minimum height, never a fixed width: a translated label must be able to grow (audit B13). */
+const ACTION_BASE = (0, cn_1.cn)("inline-flex min-h-11 cursor-pointer items-center justify-center gap-2 rounded-lg px-3 py-2 text-body-sm font-semibold break-words transition-colors", FOCUS_RING);
+const ACTION_PRIMARY = "bg-action-primary text-white hover:bg-action-primary-hover";
+const ACTION_SECONDARY = "border border-surface-border bg-surface text-grey-700 hover:bg-surface-muted hover:text-grey-900";
+const STATUS_TONE = {
+    neutral: "bg-grey-100 text-grey-700",
+    success: "bg-success-50 text-success-700",
+    warning: "bg-warning-50 text-warning-700",
+    danger: "bg-error-50 text-error-700",
+};
+/* ─── Component ──────────────────────────────────────────────────────── */
+function PageHeaderBlock({ title, headingLevel = "h1", eyebrow, description, breadcrumbs = [], breadcrumbLabel = "Breadcrumb", maxVisibleBreadcrumbs = 4, breadcrumbExpandLabel = (count) => count === 1 ? "Show 1 hidden level" : `Show ${count} hidden levels`, breadcrumbCollapseLabel = (count) => (count === 1 ? "Hide 1 level" : `Hide ${count} levels`), status, meta = [], metaLabel = "Page details", collapseMetaOnSmallScreens = true, variant = "surface", backAction, actions = [], actionsLabel = "Page actions", maxInlineActions = 3, overflowLabel = "More actions", state = "default", errorTitle = "This page could not be loaded", errorDescription, onRetry, loadingMessage = "Loading page details", children, className, }) {
+    const uid = (0, react_1.useId)();
+    const Heading = headingLevel;
+    const overflowId = `${uid}-overflow`;
+    const statusDescriptionId = `${uid}-status-description`;
+    const [metaExpanded, setMetaExpanded] = (0, react_1.useState)(false);
+    const metaId = `${uid}-meta`;
+    const surfaceClass = (0, cn_1.cn)("flex w-full flex-col gap-4 border-b border-surface-border py-5", variant === "surface" && "bg-surface px-4 @min-[640px]:px-6");
+    const [crumbsExpanded, setCrumbsExpanded] = (0, react_1.useState)(false);
+    const [overflowOpen, setOverflowOpen] = (0, react_1.useState)(false);
+    const overflowToggleRef = (0, react_1.useRef)(null);
+    /* ── Action partitioning ─────────────────────────────────────────── */
+    const primaryActions = actions.filter((action) => action.priority === "primary");
+    const explicitOverflow = actions.filter((action) => action.priority === "overflow");
+    const secondaryActions = actions.filter((action) => action.priority !== "primary" && action.priority !== "overflow");
+    const inlineSecondaryBudget = Math.max(0, maxInlineActions - primaryActions.length);
+    const inlineSecondary = secondaryActions.slice(0, inlineSecondaryBudget);
+    const overflowActions = [...secondaryActions.slice(inlineSecondaryBudget), ...explicitOverflow];
+    function closeOverflow() {
+        setOverflowOpen(false);
+    }
+    function handleKeyDown(event) {
+        if (event.key !== "Escape" || !overflowOpen)
+            return;
+        setOverflowOpen(false);
+        overflowToggleRef.current?.focus();
+    }
+    /* ── Action rendering ────────────────────────────────────────────── */
+    function renderAction(action, tone) {
+        const unavailable = "unavailableReason" in action ? action.unavailableReason : undefined;
+        const reasonId = `${uid}-${action.id}-reason`;
+        const classes = (0, cn_1.cn)(ACTION_BASE, tone === "primary" && ACTION_PRIMARY, tone === "secondary" && ACTION_SECONDARY, tone === "stacked" && "w-full justify-start text-grey-700 hover:bg-surface-muted");
+        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: "sm", className: "shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "break-words", children: action.label }), action.description && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: action.description })] }));
+        if (unavailable) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: true, "aria-describedby": reasonId, className: (0, cn_1.cn)(classes, "cursor-not-allowed border-surface-border bg-grey-100 text-grey-500"), children: inner }), (0, jsx_runtime_1.jsx)("p", { id: reasonId, className: "max-w-[28ch] text-body-xs break-words text-grey-500", children: unavailable })] }, action.id));
+        }
+        if (action.href) {
+            return ((0, jsx_runtime_1.jsx)("a", { href: action.href, onClick: () => {
+                    action.onClick?.();
+                    if (tone === "stacked")
+                        closeOverflow();
+                }, ...(action.external ? { target: "_blank", rel: "noreferrer" } : {}), className: classes, children: inner }, action.id));
+        }
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                action.onClick?.();
+                if (tone === "stacked")
+                    closeOverflow();
+            }, className: classes, children: inner }, action.id));
+    }
+    /* ── Breadcrumbs ─────────────────────────────────────────────────── */
+    function renderCrumbContent(crumb, isLast) {
+        const label = ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [crumb.icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: crumb.icon, size: "sm", className: "shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "break-words", children: crumb.label })] }));
+        if (isLast) {
+            return ((0, jsx_runtime_1.jsx)("span", { "aria-current": "page", className: "font-semibold text-grey-900", children: label }));
+        }
+        if (crumb.href) {
+            return ((0, jsx_runtime_1.jsx)("a", { href: crumb.href, onClick: crumb.onClick, className: (0, cn_1.cn)("rounded text-grey-500 underline-offset-4 hover:text-grey-900 hover:underline", FOCUS_RING), children: label }));
+        }
+        if (crumb.onClick) {
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: crumb.onClick, className: (0, cn_1.cn)("cursor-pointer rounded text-grey-500 underline-offset-4 hover:text-grey-900 hover:underline", FOCUS_RING), children: label }));
+        }
+        return (0, jsx_runtime_1.jsx)("span", { className: "text-grey-500", children: label });
+    }
+    function renderBreadcrumbs() {
+        if (breadcrumbs.length === 0)
+            return null;
+        const lastIndex = breadcrumbs.length - 1;
+        // A long trail keeps its root and its final two levels. Everything between
+        // stays mounted and hidden, so the toggle's `aria-controls` always resolves
+        // to real elements and the trail can be collapsed again after expanding.
+        const collapses = maxVisibleBreadcrumbs >= 3 && breadcrumbs.length > maxVisibleBreadcrumbs;
+        const hiddenFrom = 1;
+        const hiddenTo = collapses ? lastIndex - 1 : 1;
+        const hiddenCount = Math.max(0, hiddenTo - hiddenFrom);
+        const hiddenIds = collapses
+            ? breadcrumbs.slice(hiddenFrom, hiddenTo).map((crumb) => `${uid}-crumb-${crumb.id}`)
+            : [];
+        const rows = [];
+        breadcrumbs.forEach((crumb, index) => {
+            const isLast = index === lastIndex;
+            const isCollapsible = collapses && index >= hiddenFrom && index < hiddenTo;
+            if (collapses && index === hiddenFrom) {
+                rows.push((0, jsx_runtime_1.jsxs)("li", { className: "flex min-w-0 items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-right", size: "sm", className: "shrink-0 text-grey-400" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-expanded": crumbsExpanded, "aria-controls": hiddenIds.join(" "), onClick: () => setCrumbsExpanded((open) => !open), className: (0, cn_1.cn)("inline-flex min-h-8 min-w-8 cursor-pointer items-center justify-center rounded px-1.5 text-grey-500 hover:bg-surface-muted hover:text-grey-900", FOCUS_RING), children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2026" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: crumbsExpanded
+                                        ? breadcrumbCollapseLabel(hiddenCount)
+                                        : breadcrumbExpandLabel(hiddenCount) })] })] }, "__collapse"));
+            }
+            rows.push((0, jsx_runtime_1.jsxs)("li", { id: `${uid}-crumb-${crumb.id}`, className: (0, cn_1.cn)("flex min-w-0 items-center gap-1", isCollapsible && !crumbsExpanded && "hidden"), children: [index > 0 && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-right", size: "sm", className: "shrink-0 text-grey-400" }), renderCrumbContent(crumb, isLast)] }, crumb.id));
+        });
+        return ((0, jsx_runtime_1.jsx)("nav", { "aria-label": breadcrumbLabel, className: "min-w-0", children: (0, jsx_runtime_1.jsx)("ol", { className: "flex list-none flex-wrap items-center gap-x-1 gap-y-1 text-body-sm", children: rows }) }));
+    }
+    /* ── States ──────────────────────────────────────────────────────── */
+    if (state === "loading") {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("@container relative w-full", className), children: (0, jsx_runtime_1.jsxs)("div", { "aria-busy": "true", className: surfaceClass, children: [(0, jsx_runtime_1.jsxs)("div", { "aria-hidden": "true", className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-4 w-40 max-w-full rounded bg-grey-100" }), (0, jsx_runtime_1.jsx)("div", { className: "h-8 w-72 max-w-full rounded bg-grey-100" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-full max-w-[52ch] rounded bg-grey-100" })] }), (0, jsx_runtime_1.jsxs)("p", { role: "status", className: "flex items-center gap-2 text-body-sm text-grey-500", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)("span", { children: loadingMessage })] })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { onKeyDown: handleKeyDown, 
+        // `@container` on the outer element, outside the padded surface, so the
+        // `@min-[…]` padding inside resolves against the header's real width.
+        className: (0, cn_1.cn)("@container relative w-full", className), children: (0, jsx_runtime_1.jsxs)("div", { className: surfaceClass, children: [backAction &&
+                    (backAction.href ? ((0, jsx_runtime_1.jsxs)("a", { href: backAction.href, onClick: backAction.onClick, className: (0, cn_1.cn)("inline-flex min-h-8 w-fit items-center gap-1.5 rounded text-body-sm font-medium text-grey-500 hover:text-grey-900", FOCUS_RING), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: "sm" }), (0, jsx_runtime_1.jsx)("span", { className: "break-words", children: backAction.label })] })) : backAction.onClick ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: backAction.onClick, className: (0, cn_1.cn)("inline-flex min-h-8 w-fit cursor-pointer items-center gap-1.5 rounded text-body-sm font-medium text-grey-500 hover:text-grey-900", FOCUS_RING), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: "sm" }), (0, jsx_runtime_1.jsx)("span", { className: "break-words", children: backAction.label })] })) : null), renderBreadcrumbs(), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 @min-[720px]:flex-row @min-[720px]:items-start @min-[720px]:justify-between @min-[720px]:gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [eyebrow && ((0, jsx_runtime_1.jsx)("p", { className: "text-caption-sm font-semibold break-words text-action-primary-text uppercase", children: eyebrow })), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2", children: [(0, jsx_runtime_1.jsx)(Heading, { className: "min-w-0 text-h6 font-semibold break-words text-grey-900 @min-[640px]:text-h5", children: title }), status && ((0, jsx_runtime_1.jsx)("span", { "aria-describedby": status.description ? statusDescriptionId : undefined, className: (0, cn_1.cn)("inline-flex shrink-0 items-center rounded-full px-2.5 py-1 text-body-xs font-semibold break-words", STATUS_TONE[status.tone ?? "neutral"]), children: status.label }))] }), status?.description && ((0, jsx_runtime_1.jsx)("p", { id: statusDescriptionId, className: "text-body-sm break-words text-grey-500", children: status.description })), description && ((0, jsx_runtime_1.jsx)("p", { className: "max-w-[68ch] text-body-sm break-words text-grey-500", children: description }))] }), actions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 shrink-0 flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { role: "group", "aria-label": actionsLabel, className: "flex flex-wrap items-start gap-2 @min-[720px]:justify-end", children: [inlineSecondary.map((action) => renderAction(action, "secondary")), primaryActions.map((action) => renderAction(action, "primary")), overflowActions.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { ref: overflowToggleRef, type: "button", "aria-expanded": overflowOpen, "aria-controls": overflowId, onClick: () => setOverflowOpen((open) => !open), className: (0, cn_1.cn)(ACTION_BASE, ACTION_SECONDARY), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "dots-h", size: "sm" }), (0, jsx_runtime_1.jsx)("span", { className: "break-words", children: overflowLabel })] }))] }), (0, jsx_runtime_1.jsx)("div", { id: overflowId, className: (0, cn_1.cn)("flex w-full flex-col gap-1 rounded-lg border border-surface-border bg-surface p-1 @min-[720px]:min-w-[220px]", !overflowOpen && "hidden"), children: overflowActions.map((action) => renderAction(action, "stacked")) })] }))] }), meta.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [collapseMetaOnSmallScreens && ((0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-expanded": metaExpanded, "aria-controls": metaId, onClick: () => setMetaExpanded((value) => !value), className: (0, cn_1.cn)("inline-flex min-h-11 cursor-pointer items-center gap-2 rounded text-body-sm font-medium text-grey-600 @min-[640px]:hidden", FOCUS_RING), children: [metaLabel, (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: metaExpanded ? "chevron-up" : "chevron-down", size: "sm" })] })), (0, jsx_runtime_1.jsx)("dl", { id: metaId, "aria-label": metaLabel, className: (0, cn_1.cn)("flex flex-wrap gap-x-6 gap-y-3 border-t border-surface-border pt-4", collapseMetaOnSmallScreens && !metaExpanded && "hidden @min-[640px]:flex"), children: meta.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("dt", { className: "text-body-xs font-medium break-words text-grey-500", children: item.label }), (0, jsx_runtime_1.jsxs)("dd", { className: "flex min-w-0 items-center gap-1.5 text-body-sm font-medium break-words text-grey-900", children: [item.icon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: item.icon, size: "sm", className: "shrink-0 text-grey-500" })), (0, jsx_runtime_1.jsx)("span", { className: "min-w-0 break-words", children: item.value })] })] }, item.id))) })] })), state === "error" && ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: "flex flex-col gap-2 rounded-lg border border-error-200 bg-error-50 px-4 py-3 text-error-700", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-sm font-semibold break-words", children: errorTitle }), errorDescription && (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm break-words", children: errorDescription }), onRetry && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onRetry, className: (0, cn_1.cn)("inline-flex min-h-10 w-fit cursor-pointer items-center gap-2 rounded-lg border-[1.5px] border-current px-4 py-2 text-body-sm font-semibold", FOCUS_RING), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "refresh", size: "sm" }), "Try again"] }))] })), children] }) }));
+}

package/dist/blocks/PageHeaderBlock.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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";
+/* ─── Recipes ────────────────────────────────────────────────────────── */
+const FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+/** Minimum height, never a fixed width: a translated label must be able to grow (audit B13). */
+const ACTION_BASE = cn("inline-flex min-h-11 cursor-pointer items-center justify-center gap-2 rounded-lg px-3 py-2 text-body-sm font-semibold break-words transition-colors", FOCUS_RING);
+const ACTION_PRIMARY = "bg-action-primary text-white hover:bg-action-primary-hover";
+const ACTION_SECONDARY = "border border-surface-border bg-surface text-grey-700 hover:bg-surface-muted hover:text-grey-900";
+const STATUS_TONE = {
+    neutral: "bg-grey-100 text-grey-700",
+    success: "bg-success-50 text-success-700",
+    warning: "bg-warning-50 text-warning-700",
+    danger: "bg-error-50 text-error-700",
+};
+/* ─── Component ──────────────────────────────────────────────────────── */
+export function PageHeaderBlock({ title, headingLevel = "h1", eyebrow, description, breadcrumbs = [], breadcrumbLabel = "Breadcrumb", maxVisibleBreadcrumbs = 4, breadcrumbExpandLabel = (count) => count === 1 ? "Show 1 hidden level" : `Show ${count} hidden levels`, breadcrumbCollapseLabel = (count) => (count === 1 ? "Hide 1 level" : `Hide ${count} levels`), status, meta = [], metaLabel = "Page details", collapseMetaOnSmallScreens = true, variant = "surface", backAction, actions = [], actionsLabel = "Page actions", maxInlineActions = 3, overflowLabel = "More actions", state = "default", errorTitle = "This page could not be loaded", errorDescription, onRetry, loadingMessage = "Loading page details", children, className, }) {
+    const uid = useId();
+    const Heading = headingLevel;
+    const overflowId = `${uid}-overflow`;
+    const statusDescriptionId = `${uid}-status-description`;
+    const [metaExpanded, setMetaExpanded] = useState(false);
+    const metaId = `${uid}-meta`;
+    const surfaceClass = cn("flex w-full flex-col gap-4 border-b border-surface-border py-5", variant === "surface" && "bg-surface px-4 @min-[640px]:px-6");
+    const [crumbsExpanded, setCrumbsExpanded] = useState(false);
+    const [overflowOpen, setOverflowOpen] = useState(false);
+    const overflowToggleRef = useRef(null);
+    /* ── Action partitioning ─────────────────────────────────────────── */
+    const primaryActions = actions.filter((action) => action.priority === "primary");
+    const explicitOverflow = actions.filter((action) => action.priority === "overflow");
+    const secondaryActions = actions.filter((action) => action.priority !== "primary" && action.priority !== "overflow");
+    const inlineSecondaryBudget = Math.max(0, maxInlineActions - primaryActions.length);
+    const inlineSecondary = secondaryActions.slice(0, inlineSecondaryBudget);
+    const overflowActions = [...secondaryActions.slice(inlineSecondaryBudget), ...explicitOverflow];
+    function closeOverflow() {
+        setOverflowOpen(false);
+    }
+    function handleKeyDown(event) {
+        if (event.key !== "Escape" || !overflowOpen)
+            return;
+        setOverflowOpen(false);
+        overflowToggleRef.current?.focus();
+    }
+    /* ── Action rendering ────────────────────────────────────────────── */
+    function renderAction(action, tone) {
+        const unavailable = "unavailableReason" in action ? action.unavailableReason : undefined;
+        const reasonId = `${uid}-${action.id}-reason`;
+        const classes = cn(ACTION_BASE, tone === "primary" && ACTION_PRIMARY, tone === "secondary" && ACTION_SECONDARY, tone === "stacked" && "w-full justify-start text-grey-700 hover:bg-surface-muted");
+        const inner = (_jsxs(_Fragment, { children: [action.icon && _jsx(Icon, { name: action.icon, size: "sm", className: "shrink-0" }), _jsx("span", { className: "break-words", children: action.label }), action.description && _jsx("span", { className: "sr-only", children: action.description })] }));
+        if (unavailable) {
+            return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("button", { type: "button", disabled: true, "aria-describedby": reasonId, className: cn(classes, "cursor-not-allowed border-surface-border bg-grey-100 text-grey-500"), children: inner }), _jsx("p", { id: reasonId, className: "max-w-[28ch] text-body-xs break-words text-grey-500", children: unavailable })] }, action.id));
+        }
+        if (action.href) {
+            return (_jsx("a", { href: action.href, onClick: () => {
+                    action.onClick?.();
+                    if (tone === "stacked")
+                        closeOverflow();
+                }, ...(action.external ? { target: "_blank", rel: "noreferrer" } : {}), className: classes, children: inner }, action.id));
+        }
+        return (_jsx("button", { type: "button", onClick: () => {
+                action.onClick?.();
+                if (tone === "stacked")
+                    closeOverflow();
+            }, className: classes, children: inner }, action.id));
+    }
+    /* ── Breadcrumbs ─────────────────────────────────────────────────── */
+    function renderCrumbContent(crumb, isLast) {
+        const label = (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [crumb.icon && _jsx(Icon, { name: crumb.icon, size: "sm", className: "shrink-0" }), _jsx("span", { className: "break-words", children: crumb.label })] }));
+        if (isLast) {
+            return (_jsx("span", { "aria-current": "page", className: "font-semibold text-grey-900", children: label }));
+        }
+        if (crumb.href) {
+            return (_jsx("a", { href: crumb.href, onClick: crumb.onClick, className: cn("rounded text-grey-500 underline-offset-4 hover:text-grey-900 hover:underline", FOCUS_RING), children: label }));
+        }
+        if (crumb.onClick) {
+            return (_jsx("button", { type: "button", onClick: crumb.onClick, className: cn("cursor-pointer rounded text-grey-500 underline-offset-4 hover:text-grey-900 hover:underline", FOCUS_RING), children: label }));
+        }
+        return _jsx("span", { className: "text-grey-500", children: label });
+    }
+    function renderBreadcrumbs() {
+        if (breadcrumbs.length === 0)
+            return null;
+        const lastIndex = breadcrumbs.length - 1;
+        // A long trail keeps its root and its final two levels. Everything between
+        // stays mounted and hidden, so the toggle's `aria-controls` always resolves
+        // to real elements and the trail can be collapsed again after expanding.
+        const collapses = maxVisibleBreadcrumbs >= 3 && breadcrumbs.length > maxVisibleBreadcrumbs;
+        const hiddenFrom = 1;
+        const hiddenTo = collapses ? lastIndex - 1 : 1;
+        const hiddenCount = Math.max(0, hiddenTo - hiddenFrom);
+        const hiddenIds = collapses
+            ? breadcrumbs.slice(hiddenFrom, hiddenTo).map((crumb) => `${uid}-crumb-${crumb.id}`)
+            : [];
+        const rows = [];
+        breadcrumbs.forEach((crumb, index) => {
+            const isLast = index === lastIndex;
+            const isCollapsible = collapses && index >= hiddenFrom && index < hiddenTo;
+            if (collapses && index === hiddenFrom) {
+                rows.push(_jsxs("li", { className: "flex min-w-0 items-center gap-1", children: [_jsx(Icon, { name: "chevron-right", size: "sm", className: "shrink-0 text-grey-400" }), _jsxs("button", { type: "button", "aria-expanded": crumbsExpanded, "aria-controls": hiddenIds.join(" "), onClick: () => setCrumbsExpanded((open) => !open), className: cn("inline-flex min-h-8 min-w-8 cursor-pointer items-center justify-center rounded px-1.5 text-grey-500 hover:bg-surface-muted hover:text-grey-900", FOCUS_RING), children: [_jsx("span", { "aria-hidden": "true", children: "\u2026" }), _jsx("span", { className: "sr-only", children: crumbsExpanded
+                                        ? breadcrumbCollapseLabel(hiddenCount)
+                                        : breadcrumbExpandLabel(hiddenCount) })] })] }, "__collapse"));
+            }
+            rows.push(_jsxs("li", { id: `${uid}-crumb-${crumb.id}`, className: cn("flex min-w-0 items-center gap-1", isCollapsible && !crumbsExpanded && "hidden"), children: [index > 0 && _jsx(Icon, { name: "chevron-right", size: "sm", className: "shrink-0 text-grey-400" }), renderCrumbContent(crumb, isLast)] }, crumb.id));
+        });
+        return (_jsx("nav", { "aria-label": breadcrumbLabel, className: "min-w-0", children: _jsx("ol", { className: "flex list-none flex-wrap items-center gap-x-1 gap-y-1 text-body-sm", children: rows }) }));
+    }
+    /* ── States ──────────────────────────────────────────────────────── */
+    if (state === "loading") {
+        return (_jsx("div", { className: cn("@container relative w-full", className), children: _jsxs("div", { "aria-busy": "true", className: surfaceClass, children: [_jsxs("div", { "aria-hidden": "true", className: "flex flex-col gap-3", children: [_jsx("div", { className: "h-4 w-40 max-w-full rounded bg-grey-100" }), _jsx("div", { className: "h-8 w-72 max-w-full rounded bg-grey-100" }), _jsx("div", { className: "h-4 w-full max-w-[52ch] rounded bg-grey-100" })] }), _jsxs("p", { role: "status", className: "flex items-center gap-2 text-body-sm text-grey-500", children: [_jsx(Spinner, { size: "sm" }), _jsx("span", { children: loadingMessage })] })] }) }));
+    }
+    return (_jsx("div", { onKeyDown: handleKeyDown, 
+        // `@container` on the outer element, outside the padded surface, so the
+        // `@min-[…]` padding inside resolves against the header's real width.
+        className: cn("@container relative w-full", className), children: _jsxs("div", { className: surfaceClass, children: [backAction &&
+                    (backAction.href ? (_jsxs("a", { href: backAction.href, onClick: backAction.onClick, className: cn("inline-flex min-h-8 w-fit items-center gap-1.5 rounded text-body-sm font-medium text-grey-500 hover:text-grey-900", FOCUS_RING), children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), _jsx("span", { className: "break-words", children: backAction.label })] })) : backAction.onClick ? (_jsxs("button", { type: "button", onClick: backAction.onClick, className: cn("inline-flex min-h-8 w-fit cursor-pointer items-center gap-1.5 rounded text-body-sm font-medium text-grey-500 hover:text-grey-900", FOCUS_RING), children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), _jsx("span", { className: "break-words", children: backAction.label })] })) : null), renderBreadcrumbs(), _jsxs("div", { className: "flex flex-col gap-4 @min-[720px]:flex-row @min-[720px]:items-start @min-[720px]:justify-between @min-[720px]:gap-6", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [eyebrow && (_jsx("p", { className: "text-caption-sm font-semibold break-words text-action-primary-text uppercase", children: eyebrow })), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2", children: [_jsx(Heading, { className: "min-w-0 text-h6 font-semibold break-words text-grey-900 @min-[640px]:text-h5", children: title }), status && (_jsx("span", { "aria-describedby": status.description ? statusDescriptionId : undefined, className: cn("inline-flex shrink-0 items-center rounded-full px-2.5 py-1 text-body-xs font-semibold break-words", STATUS_TONE[status.tone ?? "neutral"]), children: status.label }))] }), status?.description && (_jsx("p", { id: statusDescriptionId, className: "text-body-sm break-words text-grey-500", children: status.description })), description && (_jsx("p", { className: "max-w-[68ch] text-body-sm break-words text-grey-500", children: description }))] }), actions.length > 0 && (_jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-2", children: [_jsxs("div", { role: "group", "aria-label": actionsLabel, className: "flex flex-wrap items-start gap-2 @min-[720px]:justify-end", children: [inlineSecondary.map((action) => renderAction(action, "secondary")), primaryActions.map((action) => renderAction(action, "primary")), overflowActions.length > 0 && (_jsxs("button", { ref: overflowToggleRef, type: "button", "aria-expanded": overflowOpen, "aria-controls": overflowId, onClick: () => setOverflowOpen((open) => !open), className: cn(ACTION_BASE, ACTION_SECONDARY), children: [_jsx(Icon, { name: "dots-h", size: "sm" }), _jsx("span", { className: "break-words", children: overflowLabel })] }))] }), _jsx("div", { id: overflowId, className: cn("flex w-full flex-col gap-1 rounded-lg border border-surface-border bg-surface p-1 @min-[720px]:min-w-[220px]", !overflowOpen && "hidden"), children: overflowActions.map((action) => renderAction(action, "stacked")) })] }))] }), meta.length > 0 && (_jsxs("div", { children: [collapseMetaOnSmallScreens && (_jsxs("button", { type: "button", "aria-expanded": metaExpanded, "aria-controls": metaId, onClick: () => setMetaExpanded((value) => !value), className: cn("inline-flex min-h-11 cursor-pointer items-center gap-2 rounded text-body-sm font-medium text-grey-600 @min-[640px]:hidden", FOCUS_RING), children: [metaLabel, _jsx(Icon, { name: metaExpanded ? "chevron-up" : "chevron-down", size: "sm" })] })), _jsx("dl", { id: metaId, "aria-label": metaLabel, className: cn("flex flex-wrap gap-x-6 gap-y-3 border-t border-surface-border pt-4", collapseMetaOnSmallScreens && !metaExpanded && "hidden @min-[640px]:flex"), children: meta.map((item) => (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("dt", { className: "text-body-xs font-medium break-words text-grey-500", children: item.label }), _jsxs("dd", { className: "flex min-w-0 items-center gap-1.5 text-body-sm font-medium break-words text-grey-900", children: [item.icon && (_jsx(Icon, { name: item.icon, size: "sm", className: "shrink-0 text-grey-500" })), _jsx("span", { className: "min-w-0 break-words", children: item.value })] })] }, item.id))) })] })), state === "error" && (_jsxs("div", { role: "alert", className: "flex flex-col gap-2 rounded-lg border border-error-200 bg-error-50 px-4 py-3 text-error-700", children: [_jsx("p", { className: "text-body-sm font-semibold break-words", children: errorTitle }), errorDescription && _jsx("p", { className: "text-body-sm break-words", children: errorDescription }), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: cn("inline-flex min-h-10 w-fit cursor-pointer items-center gap-2 rounded-lg border-[1.5px] border-current px-4 py-2 text-body-sm font-semibold", FOCUS_RING), children: [_jsx(Icon, { name: "refresh", size: "sm" }), "Try again"] }))] })), children] }) }));
+}

package/dist/blocks/PricingPlansBlock.cjs

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PricingPlansBlock = 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");
+const HEADING_ORDER = ["h1", "h2", "h3", "h4", "h5", "h6"];
+function nextHeadingLevel(level) {
+    const index = HEADING_ORDER.indexOf(level);
+    return HEADING_ORDER[Math.min(index + 1, HEADING_ORDER.length - 1)];
+}
+function isLinkCta(cta) {
+    return typeof cta.href === "string";
+}
+/* ─── Formatting ───────────────────────────────────────────────────────── */
+function formatCurrency(amount, currency, locale, options) {
+    const whole = Number.isInteger(amount);
+    const base = currency
+        ? {
+            style: "currency",
+            currency,
+            minimumFractionDigits: whole ? 0 : 2,
+            maximumFractionDigits: whole ? 0 : 2,
+        }
+        : { maximumFractionDigits: whole ? 0 : 2 };
+    try {
+        return new Intl.NumberFormat(locale, { ...base, ...options }).format(amount);
+    }
+    catch {
+        // An unknown locale or currency code must not break the page.
+        return currency ? `${currency} ${amount}` : String(amount);
+    }
+}
+/* ─── Appearance ───────────────────────────────────────────────────────── */
+const PLAN_COLUMN_CLASS = {
+    1: "@min-[600px]:grid-cols-1 @min-[1136px]:grid-cols-1",
+    2: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-2",
+    3: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-3",
+    4: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-4",
+};
+const CTA_BASE = "inline-flex w-full max-w-full items-center justify-center gap-2 min-h-11 rounded-lg px-4 py-2.5 text-sm font-semibold leading-[1.45] text-center break-words no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+const CTA_TONE = {
+    primary: "bg-action-primary text-white hover:bg-action-primary-hover cursor-pointer",
+    secondary: "bg-transparent text-action-primary-text border-[1.5px] border-current hover:bg-primary-50 cursor-pointer",
+};
+const NOTICE_TONE = {
+    success: {
+        border: "border-success-300",
+        icon: "check-circle",
+        text: "text-action-success",
+    },
+    info: { border: "border-secondary-300", icon: "info-circle", text: "text-action-info" },
+    warning: { border: "border-warning-300", icon: "info-triangle", text: "text-action-warning" },
+    error: { border: "border-error-300", icon: "info-triangle", text: "text-action-danger-text" },
+};
+function PlanCta({ cta, tone, disabled = false, describedBy }) {
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [cta.icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: cta.icon, size: "sm", className: "shrink-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "min-w-0", children: cta.label })] }));
+    // A control that cannot be used is rendered as an explicitly disabled button,
+    // never as an active link that goes nowhere.
+    if (disabled) {
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: true, "aria-describedby": describedBy, className: (0, cn_1.cn)(CTA_BASE, "cursor-not-allowed border-[1.5px] border-surface-border-strong bg-grey-100 text-grey-600"), children: content }));
+    }
+    if (isLinkCta(cta)) {
+        const externalAttributes = cta.external
+            ? { target: "_blank", rel: "noreferrer" }
+            : {};
+        return ((0, jsx_runtime_1.jsxs)("a", { href: cta.href, onClick: cta.onClick, "aria-describedby": describedBy, className: (0, cn_1.cn)(CTA_BASE, CTA_TONE[tone]), ...externalAttributes, children: [content, cta.external && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "(opens in a new tab)" })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: cta.onClick, "aria-describedby": describedBy, className: (0, cn_1.cn)(CTA_BASE, CTA_TONE[tone]), children: content }));
+}
+function PlanCard({ plan, periodId, locale, priceFormatOptions, formatPrice, limitsLabel, featuresVisibleLimit, defaultUnavailableReason, headingElement, }) {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const reasonId = (0, react_1.useId)();
+    const PlanHeading = headingElement;
+    // Unavailability is conveyed by the disabled control and its associated reason,
+    // never by dimming the card: reducing opacity drops every label below AA.
+    const availability = plan.availability ?? "available";
+    const unavailable = availability === "unavailable";
+    const isCurrent = availability === "current";
+    const price = plan.prices[periodId];
+    const features = plan.features ?? [];
+    const limit = featuresVisibleLimit && featuresVisibleLimit > 0 ? featuresVisibleLimit : undefined;
+    const collapsible = limit !== undefined && features.length > limit;
+    const visibleFeatures = collapsible && !expanded ? features.slice(0, limit) : features;
+    const planNameText = typeof plan.name === "string" ? plan.name : undefined;
+    const reason = unavailable ? (plan.unavailableReason ?? defaultUnavailableReason) : undefined;
+    let priceBody = null;
+    if (!price) {
+        priceBody = (0, jsx_runtime_1.jsx)("span", { className: "text-base text-grey-600", children: "Price unavailable" });
+    }
+    else if (formatPrice) {
+        priceBody = formatPrice(price, { locale, periodId });
+    }
+    else if (price.custom !== undefined) {
+        priceBody = ((0, jsx_runtime_1.jsx)("span", { className: "text-h5 font-semibold break-words text-grey-900 @min-[600px]:text-h4", children: price.custom }));
+    }
+    else if (price.amount !== undefined) {
+        priceBody = ((0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1", children: [price.originalAmount !== undefined && ((0, jsx_runtime_1.jsxs)("span", { className: "text-base text-grey-600 line-through tabular-nums", children: [(0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Was " }), formatCurrency(price.originalAmount, price.currency, locale, priceFormatOptions)] })), (0, jsx_runtime_1.jsx)("span", { className: "text-h4 font-semibold break-words tabular-nums text-grey-900 @min-[600px]:text-h3", children: formatCurrency(price.amount, price.currency, locale, priceFormatOptions) }), price.unit && ((0, jsx_runtime_1.jsx)("span", { className: "min-w-0 text-sm break-words text-grey-600", children: price.unit }))] }));
+    }
+    else {
+        priceBody = (0, jsx_runtime_1.jsx)("span", { className: "text-base text-grey-600", children: "Price unavailable" });
+    }
+    return ((0, jsx_runtime_1.jsxs)("li", { className: (0, cn_1.cn)("flex min-w-0 flex-col gap-5 rounded-xl border bg-surface p-5 @min-[600px]:p-6", plan.highlighted ? "border-primary-400 shadow-soft-sm @min-[600px]:border-2" : "border-surface-border"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [(0, jsx_runtime_1.jsx)(PlanHeading, { className: "min-w-0 text-body-lg font-semibold break-words text-grey-900", children: plan.name }), plan.badge && ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { color: "orange", type: "accent", size: "md", children: plan.badge })), isCurrent && ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { color: "success", type: "accent", size: "md", children: plan.currentLabel ?? "Current plan" }))] }), plan.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm break-words text-grey-600", children: plan.description }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1", children: [priceBody, price?.note && (0, jsx_runtime_1.jsx)("p", { className: "text-sm break-words text-grey-600", children: price.note })] }), reason && ((0, jsx_runtime_1.jsx)("p", { id: reasonId, className: "text-sm break-words text-grey-600", children: reason })), plan.cta ? ((0, jsx_runtime_1.jsx)(PlanCta, { cta: plan.cta, tone: plan.highlighted ? "primary" : "secondary", disabled: unavailable, describedBy: reason ? reasonId : undefined })) : (isCurrent && ((0, jsx_runtime_1.jsx)("p", { className: "rounded-lg border border-surface-border bg-surface-muted px-4 py-2.5 text-center text-sm font-semibold break-words text-grey-700", children: plan.currentLabel ?? "Current plan" }))), plan.limits && plan.limits.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-2 border-t border-surface-border pt-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-caption-sm font-semibold tracking-[0.08em] text-grey-600 uppercase", children: limitsLabel }), (0, jsx_runtime_1.jsx)("dl", { className: "m-0 flex min-w-0 flex-col gap-1.5", children: plan.limits.map((entry) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-wrap justify-between gap-x-3 gap-y-0.5", children: [(0, jsx_runtime_1.jsx)("dt", { className: "min-w-0 text-sm break-words text-grey-600", children: entry.label }), (0, jsx_runtime_1.jsx)("dd", { className: "m-0 min-w-0 text-sm font-semibold break-words tabular-nums text-grey-900", children: entry.value })] }, entry.id))) })] })), features.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-3 border-t border-surface-border pt-4", children: [(0, jsx_runtime_1.jsx)("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: visibleFeatures.map((feature) => {
+                            const included = feature.included !== false;
+                            return ((0, jsx_runtime_1.jsxs)("li", { className: "flex min-w-0 items-start gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: included ? "check-circle" : "minus-circle", size: "sm", className: (0, cn_1.cn)("mt-0.5 shrink-0", included ? "text-action-success" : "text-grey-400"), "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("min-w-0 break-words", included ? "text-grey-700" : "text-grey-600"), children: [(0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: included ? "Included: " : "Not included: " }), feature.label, feature.note && ((0, jsx_runtime_1.jsxs)("span", { className: "text-grey-600", children: [" (", feature.note, ")"] }))] })] }, feature.id));
+                        }) }), collapsible && ((0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-expanded": expanded, onClick: () => setExpanded((open) => !open), className: "inline-flex max-w-full items-center gap-1.5 self-start rounded text-sm font-semibold break-words text-action-primary-text cursor-pointer hover:underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [(0, jsx_runtime_1.jsx)("span", { className: "min-w-0", children: expanded
+                                    ? `Show fewer features${planNameText ? ` in ${planNameText}` : ""}`
+                                    : `Show all ${features.length} features${planNameText ? ` in ${planNameText}` : ""}` }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: expanded ? "chevron-up" : "chevron-down", size: "sm", className: "shrink-0", "aria-hidden": "true" })] }))] }))] }));
+}
+/* ─── Block ────────────────────────────────────────────────────────────── */
+/**
+ * Pricing Plans — compare plans, switch billing period, and understand included
+ * usage and limits.
+ *
+ * States: `default`, `loading`, `empty`, `error`, plus per-plan `available`,
+ * `current`, and `unavailable`. Choosing a plan calls `cta.onClick` or follows
+ * `cta.href`; the block performs no purchase and never claims one succeeded.
+ * Pass `notice` to show an outcome the consuming application has confirmed.
+ */
+exports.PricingPlansBlock = (0, react_1.forwardRef)(({ eyebrow, title, description, headingLevel = "h2", periods, period: controlledPeriod, defaultPeriod, onPeriodChange, periodLegend = "Billing period", plans, locale = "en-US", priceFormatOptions, formatPrice, limitsLabel = "Included usage", featuresVisibleLimit, defaultUnavailableReason = "This plan is not available for your account.", notice, footnote, state, loadingPlanCount = 3, loadingLabel = "Loading pricing plans", emptyTitle = "No plans are available right now", emptyDescription, errorTitle = "We could not load pricing", errorDescription, onRetry, retryLabel = "Try again", className, ...rest }, ref) => {
+    const headingId = (0, react_1.useId)();
+    const radioName = (0, react_1.useId)();
+    const Heading = headingLevel;
+    const PlanHeading = nextHeadingLevel(headingLevel);
+    const periodList = (0, react_1.useMemo)(() => periods ?? [], [periods]);
+    const fallbackPeriodId = periodList[0]?.id ?? "default";
+    const [internalPeriod, setInternalPeriod] = (0, react_1.useState)(defaultPeriod ?? fallbackPeriodId);
+    const activePeriod = controlledPeriod ?? internalPeriod;
+    const selectPeriod = (0, react_1.useCallback)((id) => {
+        if (controlledPeriod === undefined)
+            setInternalPeriod(id);
+        onPeriodChange?.(id);
+    }, [controlledPeriod, onPeriodChange]);
+    const resolvedState = state ?? (plans.length === 0 ? "empty" : "default");
+    const showSwitcher = resolvedState === "default" && periodList.length > 1;
+    const columnClass = PLAN_COLUMN_CLASS[Math.min(Math.max(plans.length, 1), 4)];
+    return ((0, jsx_runtime_1.jsx)("section", { ref: ref, "aria-labelledby": headingId, "aria-busy": resolvedState === "loading" || undefined, className: (0, cn_1.cn)("@container relative w-full", className), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[1136px] flex-col gap-8 px-4 py-12 @min-[600px]:gap-10 @min-[600px]:px-8 @min-[600px]:py-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 max-w-[68ch] flex-col gap-3", children: [eyebrow && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold break-words text-action-primary-text", children: eyebrow })), (0, jsx_runtime_1.jsx)(Heading, { id: headingId, className: "text-h5 font-semibold break-words text-balance text-grey-900 @min-[600px]:text-h3", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-base break-words text-grey-600 @min-[600px]:text-body-lg", children: description }))] }), showSwitcher && ((0, jsx_runtime_1.jsxs)("fieldset", { className: "m-0 min-w-0 border-0 p-0", children: [(0, jsx_runtime_1.jsx)("legend", { className: "sr-only", children: periodLegend }), (0, jsx_runtime_1.jsx)("div", { className: "inline-flex max-w-full flex-wrap gap-1 rounded-xl border border-surface-border bg-surface-muted p-1", children: periodList.map((entry) => {
+                                        const checked = entry.id === activePeriod;
+                                        return ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("relative inline-flex max-w-full cursor-pointer items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold break-words transition-colors", "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-action-primary-text", checked
+                                                ? "bg-surface text-grey-900 shadow-soft-xxs"
+                                                : "text-grey-600 hover:text-grey-900"), children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: radioName, value: entry.id, checked: checked, onChange: () => selectPeriod(entry.id), className: "sr-only" }), (0, jsx_runtime_1.jsx)("span", { className: "min-w-0", children: entry.label }), entry.badge && ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { color: "success", type: "accent", size: "sm", children: entry.badge }))] }, entry.id));
+                                    }) })] }))] }), notice && ((0, jsx_runtime_1.jsxs)("div", { role: "status", className: (0, cn_1.cn)("flex min-w-0 items-start gap-3 rounded-xl border bg-surface p-4", NOTICE_TONE[notice.tone].border), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: NOTICE_TONE[notice.tone].icon, size: "md", className: (0, cn_1.cn)("mt-0.5 shrink-0", NOTICE_TONE[notice.tone].text), "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold break-words text-grey-900", children: notice.title }), notice.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm break-words text-grey-600", children: notice.description }))] })] })), resolvedState === "loading" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { role: "status", className: "sr-only", children: loadingLabel }), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("grid grid-cols-1 gap-5 @min-[600px]:gap-6", PLAN_COLUMN_CLASS[3]), "aria-hidden": "true", children: Array.from({ length: Math.max(1, loadingPlanCount) }).map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-4 rounded-xl border border-surface-border bg-surface p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-5 w-28 rounded bg-grey-200" }), (0, jsx_runtime_1.jsx)("div", { className: "h-9 w-40 max-w-full rounded bg-grey-200" }), (0, jsx_runtime_1.jsx)("div", { className: "h-11 w-full rounded-lg bg-grey-100" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-full rounded bg-grey-100" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-5/6 rounded bg-grey-100" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-4/6 rounded bg-grey-100" })] }, `plan-skeleton-${index}`))) })] })), resolvedState === "error" && ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: "flex min-w-0 flex-col items-start gap-3 rounded-xl border border-surface-border bg-surface p-5 @min-[600px]:p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-error-50 text-action-danger-text", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "info-triangle", size: "lg", "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-base font-semibold break-words text-grey-900", children: errorTitle }), errorDescription && ((0, jsx_runtime_1.jsx)("p", { className: "max-w-[60ch] text-sm break-words text-grey-600", children: errorDescription })), onRetry && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onRetry, className: (0, cn_1.cn)(CTA_BASE, CTA_TONE.secondary, "w-auto"), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "refresh", size: "sm", className: "shrink-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "min-w-0", children: retryLabel })] }))] })), resolvedState === "empty" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col items-start gap-3 rounded-xl border border-dashed border-surface-border-strong bg-surface p-6 @min-[600px]:p-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-grey-100 text-grey-600", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "receipt", size: "lg", "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-base font-semibold break-words text-grey-900", children: emptyTitle }), emptyDescription && ((0, jsx_runtime_1.jsx)("p", { className: "max-w-[60ch] text-sm break-words text-grey-600", children: emptyDescription }))] })), resolvedState === "default" && plans.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: (0, cn_1.cn)("grid list-none grid-cols-1 items-start gap-5 p-0 @min-[600px]:gap-6", columnClass), children: plans.map((plan) => ((0, jsx_runtime_1.jsx)(PlanCard, { plan: plan, periodId: activePeriod, locale: locale, priceFormatOptions: priceFormatOptions, formatPrice: formatPrice, limitsLabel: limitsLabel, featuresVisibleLimit: featuresVisibleLimit, defaultUnavailableReason: defaultUnavailableReason, headingElement: PlanHeading }, plan.id))) })), footnote && (0, jsx_runtime_1.jsx)("p", { className: "text-sm break-words text-grey-600", children: footnote })] }) }));
+});
+exports.PricingPlansBlock.displayName = "PricingPlansBlock";

package/dist/blocks/PricingPlansBlock.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useId, useMemo, useState, } from "react";
+import { cn } from "../utils/cn.js";
+import { Badge } from "../components/Badge/index.js";
+import { Icon } from "../components/Icon/index.js";
+const HEADING_ORDER = ["h1", "h2", "h3", "h4", "h5", "h6"];
+function nextHeadingLevel(level) {
+    const index = HEADING_ORDER.indexOf(level);
+    return HEADING_ORDER[Math.min(index + 1, HEADING_ORDER.length - 1)];
+}
+function isLinkCta(cta) {
+    return typeof cta.href === "string";
+}
+/* ─── Formatting ───────────────────────────────────────────────────────── */
+function formatCurrency(amount, currency, locale, options) {
+    const whole = Number.isInteger(amount);
+    const base = currency
+        ? {
+            style: "currency",
+            currency,
+            minimumFractionDigits: whole ? 0 : 2,
+            maximumFractionDigits: whole ? 0 : 2,
+        }
+        : { maximumFractionDigits: whole ? 0 : 2 };
+    try {
+        return new Intl.NumberFormat(locale, { ...base, ...options }).format(amount);
+    }
+    catch {
+        // An unknown locale or currency code must not break the page.
+        return currency ? `${currency} ${amount}` : String(amount);
+    }
+}
+/* ─── Appearance ───────────────────────────────────────────────────────── */
+const PLAN_COLUMN_CLASS = {
+    1: "@min-[600px]:grid-cols-1 @min-[1136px]:grid-cols-1",
+    2: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-2",
+    3: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-3",
+    4: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-4",
+};
+const CTA_BASE = "inline-flex w-full max-w-full items-center justify-center gap-2 min-h-11 rounded-lg px-4 py-2.5 text-sm font-semibold leading-[1.45] text-center break-words no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+const CTA_TONE = {
+    primary: "bg-action-primary text-white hover:bg-action-primary-hover cursor-pointer",
+    secondary: "bg-transparent text-action-primary-text border-[1.5px] border-current hover:bg-primary-50 cursor-pointer",
+};
+const NOTICE_TONE = {
+    success: {
+        border: "border-success-300",
+        icon: "check-circle",
+        text: "text-action-success",
+    },
+    info: { border: "border-secondary-300", icon: "info-circle", text: "text-action-info" },
+    warning: { border: "border-warning-300", icon: "info-triangle", text: "text-action-warning" },
+    error: { border: "border-error-300", icon: "info-triangle", text: "text-action-danger-text" },
+};
+function PlanCta({ cta, tone, disabled = false, describedBy }) {
+    const content = (_jsxs(_Fragment, { children: [cta.icon && _jsx(Icon, { name: cta.icon, size: "sm", className: "shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "min-w-0", children: cta.label })] }));
+    // A control that cannot be used is rendered as an explicitly disabled button,
+    // never as an active link that goes nowhere.
+    if (disabled) {
+        return (_jsx("button", { type: "button", disabled: true, "aria-describedby": describedBy, className: cn(CTA_BASE, "cursor-not-allowed border-[1.5px] border-surface-border-strong bg-grey-100 text-grey-600"), children: content }));
+    }
+    if (isLinkCta(cta)) {
+        const externalAttributes = cta.external
+            ? { target: "_blank", rel: "noreferrer" }
+            : {};
+        return (_jsxs("a", { href: cta.href, onClick: cta.onClick, "aria-describedby": describedBy, className: cn(CTA_BASE, CTA_TONE[tone]), ...externalAttributes, children: [content, cta.external && _jsx("span", { className: "sr-only", children: "(opens in a new tab)" })] }));
+    }
+    return (_jsx("button", { type: "button", onClick: cta.onClick, "aria-describedby": describedBy, className: cn(CTA_BASE, CTA_TONE[tone]), children: content }));
+}
+function PlanCard({ plan, periodId, locale, priceFormatOptions, formatPrice, limitsLabel, featuresVisibleLimit, defaultUnavailableReason, headingElement, }) {
+    const [expanded, setExpanded] = useState(false);
+    const reasonId = useId();
+    const PlanHeading = headingElement;
+    // Unavailability is conveyed by the disabled control and its associated reason,
+    // never by dimming the card: reducing opacity drops every label below AA.
+    const availability = plan.availability ?? "available";
+    const unavailable = availability === "unavailable";
+    const isCurrent = availability === "current";
+    const price = plan.prices[periodId];
+    const features = plan.features ?? [];
+    const limit = featuresVisibleLimit && featuresVisibleLimit > 0 ? featuresVisibleLimit : undefined;
+    const collapsible = limit !== undefined && features.length > limit;
+    const visibleFeatures = collapsible && !expanded ? features.slice(0, limit) : features;
+    const planNameText = typeof plan.name === "string" ? plan.name : undefined;
+    const reason = unavailable ? (plan.unavailableReason ?? defaultUnavailableReason) : undefined;
+    let priceBody = null;
+    if (!price) {
+        priceBody = _jsx("span", { className: "text-base text-grey-600", children: "Price unavailable" });
+    }
+    else if (formatPrice) {
+        priceBody = formatPrice(price, { locale, periodId });
+    }
+    else if (price.custom !== undefined) {
+        priceBody = (_jsx("span", { className: "text-h5 font-semibold break-words text-grey-900 @min-[600px]:text-h4", children: price.custom }));
+    }
+    else if (price.amount !== undefined) {
+        priceBody = (_jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1", children: [price.originalAmount !== undefined && (_jsxs("span", { className: "text-base text-grey-600 line-through tabular-nums", children: [_jsx("span", { className: "sr-only", children: "Was " }), formatCurrency(price.originalAmount, price.currency, locale, priceFormatOptions)] })), _jsx("span", { className: "text-h4 font-semibold break-words tabular-nums text-grey-900 @min-[600px]:text-h3", children: formatCurrency(price.amount, price.currency, locale, priceFormatOptions) }), price.unit && (_jsx("span", { className: "min-w-0 text-sm break-words text-grey-600", children: price.unit }))] }));
+    }
+    else {
+        priceBody = _jsx("span", { className: "text-base text-grey-600", children: "Price unavailable" });
+    }
+    return (_jsxs("li", { className: cn("flex min-w-0 flex-col gap-5 rounded-xl border bg-surface p-5 @min-[600px]:p-6", plan.highlighted ? "border-primary-400 shadow-soft-sm @min-[600px]:border-2" : "border-surface-border"), children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(PlanHeading, { className: "min-w-0 text-body-lg font-semibold break-words text-grey-900", children: plan.name }), plan.badge && (_jsx(Badge, { color: "orange", type: "accent", size: "md", children: plan.badge })), isCurrent && (_jsx(Badge, { color: "success", type: "accent", size: "md", children: plan.currentLabel ?? "Current plan" }))] }), plan.description && (_jsx("p", { className: "text-sm break-words text-grey-600", children: plan.description }))] }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [priceBody, price?.note && _jsx("p", { className: "text-sm break-words text-grey-600", children: price.note })] }), reason && (_jsx("p", { id: reasonId, className: "text-sm break-words text-grey-600", children: reason })), plan.cta ? (_jsx(PlanCta, { cta: plan.cta, tone: plan.highlighted ? "primary" : "secondary", disabled: unavailable, describedBy: reason ? reasonId : undefined })) : (isCurrent && (_jsx("p", { className: "rounded-lg border border-surface-border bg-surface-muted px-4 py-2.5 text-center text-sm font-semibold break-words text-grey-700", children: plan.currentLabel ?? "Current plan" }))), plan.limits && plan.limits.length > 0 && (_jsxs("div", { className: "flex min-w-0 flex-col gap-2 border-t border-surface-border pt-4", children: [_jsx("p", { className: "text-caption-sm font-semibold tracking-[0.08em] text-grey-600 uppercase", children: limitsLabel }), _jsx("dl", { className: "m-0 flex min-w-0 flex-col gap-1.5", children: plan.limits.map((entry) => (_jsxs("div", { className: "flex min-w-0 flex-wrap justify-between gap-x-3 gap-y-0.5", children: [_jsx("dt", { className: "min-w-0 text-sm break-words text-grey-600", children: entry.label }), _jsx("dd", { className: "m-0 min-w-0 text-sm font-semibold break-words tabular-nums text-grey-900", children: entry.value })] }, entry.id))) })] })), features.length > 0 && (_jsxs("div", { className: "flex min-w-0 flex-col gap-3 border-t border-surface-border pt-4", children: [_jsx("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: visibleFeatures.map((feature) => {
+                            const included = feature.included !== false;
+                            return (_jsxs("li", { className: "flex min-w-0 items-start gap-2 text-sm", children: [_jsx(Icon, { name: included ? "check-circle" : "minus-circle", size: "sm", className: cn("mt-0.5 shrink-0", included ? "text-action-success" : "text-grey-400"), "aria-hidden": "true" }), _jsxs("span", { className: cn("min-w-0 break-words", included ? "text-grey-700" : "text-grey-600"), children: [_jsx("span", { className: "sr-only", children: included ? "Included: " : "Not included: " }), feature.label, feature.note && (_jsxs("span", { className: "text-grey-600", children: [" (", feature.note, ")"] }))] })] }, feature.id));
+                        }) }), collapsible && (_jsxs("button", { type: "button", "aria-expanded": expanded, onClick: () => setExpanded((open) => !open), className: "inline-flex max-w-full items-center gap-1.5 self-start rounded text-sm font-semibold break-words text-action-primary-text cursor-pointer hover:underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [_jsx("span", { className: "min-w-0", children: expanded
+                                    ? `Show fewer features${planNameText ? ` in ${planNameText}` : ""}`
+                                    : `Show all ${features.length} features${planNameText ? ` in ${planNameText}` : ""}` }), _jsx(Icon, { name: expanded ? "chevron-up" : "chevron-down", size: "sm", className: "shrink-0", "aria-hidden": "true" })] }))] }))] }));
+}
+/* ─── Block ────────────────────────────────────────────────────────────── */
+/**
+ * Pricing Plans — compare plans, switch billing period, and understand included
+ * usage and limits.
+ *
+ * States: `default`, `loading`, `empty`, `error`, plus per-plan `available`,
+ * `current`, and `unavailable`. Choosing a plan calls `cta.onClick` or follows
+ * `cta.href`; the block performs no purchase and never claims one succeeded.
+ * Pass `notice` to show an outcome the consuming application has confirmed.
+ */
+export const PricingPlansBlock = forwardRef(({ eyebrow, title, description, headingLevel = "h2", periods, period: controlledPeriod, defaultPeriod, onPeriodChange, periodLegend = "Billing period", plans, locale = "en-US", priceFormatOptions, formatPrice, limitsLabel = "Included usage", featuresVisibleLimit, defaultUnavailableReason = "This plan is not available for your account.", notice, footnote, state, loadingPlanCount = 3, loadingLabel = "Loading pricing plans", emptyTitle = "No plans are available right now", emptyDescription, errorTitle = "We could not load pricing", errorDescription, onRetry, retryLabel = "Try again", className, ...rest }, ref) => {
+    const headingId = useId();
+    const radioName = useId();
+    const Heading = headingLevel;
+    const PlanHeading = nextHeadingLevel(headingLevel);
+    const periodList = useMemo(() => periods ?? [], [periods]);
+    const fallbackPeriodId = periodList[0]?.id ?? "default";
+    const [internalPeriod, setInternalPeriod] = useState(defaultPeriod ?? fallbackPeriodId);
+    const activePeriod = controlledPeriod ?? internalPeriod;
+    const selectPeriod = useCallback((id) => {
+        if (controlledPeriod === undefined)
+            setInternalPeriod(id);
+        onPeriodChange?.(id);
+    }, [controlledPeriod, onPeriodChange]);
+    const resolvedState = state ?? (plans.length === 0 ? "empty" : "default");
+    const showSwitcher = resolvedState === "default" && periodList.length > 1;
+    const columnClass = PLAN_COLUMN_CLASS[Math.min(Math.max(plans.length, 1), 4)];
+    return (_jsx("section", { ref: ref, "aria-labelledby": headingId, "aria-busy": resolvedState === "loading" || undefined, className: cn("@container relative w-full", className), ...rest, children: _jsxs("div", { className: "mx-auto flex w-full max-w-[1136px] flex-col gap-8 px-4 py-12 @min-[600px]:gap-10 @min-[600px]:px-8 @min-[600px]:py-16", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [_jsxs("div", { className: "flex min-w-0 max-w-[68ch] flex-col gap-3", children: [eyebrow && (_jsx("p", { className: "text-sm font-semibold break-words text-action-primary-text", children: eyebrow })), _jsx(Heading, { id: headingId, className: "text-h5 font-semibold break-words text-balance text-grey-900 @min-[600px]:text-h3", children: title }), description && (_jsx("p", { className: "text-base break-words text-grey-600 @min-[600px]:text-body-lg", children: description }))] }), showSwitcher && (_jsxs("fieldset", { className: "m-0 min-w-0 border-0 p-0", children: [_jsx("legend", { className: "sr-only", children: periodLegend }), _jsx("div", { className: "inline-flex max-w-full flex-wrap gap-1 rounded-xl border border-surface-border bg-surface-muted p-1", children: periodList.map((entry) => {
+                                        const checked = entry.id === activePeriod;
+                                        return (_jsxs("label", { className: cn("relative inline-flex max-w-full cursor-pointer items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold break-words transition-colors", "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-action-primary-text", checked
+                                                ? "bg-surface text-grey-900 shadow-soft-xxs"
+                                                : "text-grey-600 hover:text-grey-900"), children: [_jsx("input", { type: "radio", name: radioName, value: entry.id, checked: checked, onChange: () => selectPeriod(entry.id), className: "sr-only" }), _jsx("span", { className: "min-w-0", children: entry.label }), entry.badge && (_jsx(Badge, { color: "success", type: "accent", size: "sm", children: entry.badge }))] }, entry.id));
+                                    }) })] }))] }), notice && (_jsxs("div", { role: "status", className: cn("flex min-w-0 items-start gap-3 rounded-xl border bg-surface p-4", NOTICE_TONE[notice.tone].border), children: [_jsx(Icon, { name: NOTICE_TONE[notice.tone].icon, size: "md", className: cn("mt-0.5 shrink-0", NOTICE_TONE[notice.tone].text), "aria-hidden": "true" }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("p", { className: "text-sm font-semibold break-words text-grey-900", children: notice.title }), notice.description && (_jsx("p", { className: "text-sm break-words text-grey-600", children: notice.description }))] })] })), resolvedState === "loading" && (_jsxs(_Fragment, { children: [_jsx("p", { role: "status", className: "sr-only", children: loadingLabel }), _jsx("div", { className: cn("grid grid-cols-1 gap-5 @min-[600px]:gap-6", PLAN_COLUMN_CLASS[3]), "aria-hidden": "true", children: Array.from({ length: Math.max(1, loadingPlanCount) }).map((_, index) => (_jsxs("div", { className: "flex min-w-0 flex-col gap-4 rounded-xl border border-surface-border bg-surface p-6", children: [_jsx("div", { className: "h-5 w-28 rounded bg-grey-200" }), _jsx("div", { className: "h-9 w-40 max-w-full rounded bg-grey-200" }), _jsx("div", { className: "h-11 w-full rounded-lg bg-grey-100" }), _jsx("div", { className: "h-4 w-full rounded bg-grey-100" }), _jsx("div", { className: "h-4 w-5/6 rounded bg-grey-100" }), _jsx("div", { className: "h-4 w-4/6 rounded bg-grey-100" })] }, `plan-skeleton-${index}`))) })] })), resolvedState === "error" && (_jsxs("div", { role: "alert", className: "flex min-w-0 flex-col items-start gap-3 rounded-xl border border-surface-border bg-surface p-5 @min-[600px]:p-6", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-error-50 text-action-danger-text", children: _jsx(Icon, { name: "info-triangle", size: "lg", "aria-hidden": "true" }) }), _jsx("p", { className: "text-base font-semibold break-words text-grey-900", children: errorTitle }), errorDescription && (_jsx("p", { className: "max-w-[60ch] text-sm break-words text-grey-600", children: errorDescription })), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: cn(CTA_BASE, CTA_TONE.secondary, "w-auto"), children: [_jsx(Icon, { name: "refresh", size: "sm", className: "shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "min-w-0", children: retryLabel })] }))] })), resolvedState === "empty" && (_jsxs("div", { className: "flex min-w-0 flex-col items-start gap-3 rounded-xl border border-dashed border-surface-border-strong bg-surface p-6 @min-[600px]:p-8", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-grey-100 text-grey-600", children: _jsx(Icon, { name: "receipt", size: "lg", "aria-hidden": "true" }) }), _jsx("p", { className: "text-base font-semibold break-words text-grey-900", children: emptyTitle }), emptyDescription && (_jsx("p", { className: "max-w-[60ch] text-sm break-words text-grey-600", children: emptyDescription }))] })), resolvedState === "default" && plans.length > 0 && (_jsx("ul", { className: cn("grid list-none grid-cols-1 items-start gap-5 p-0 @min-[600px]:gap-6", columnClass), children: plans.map((plan) => (_jsx(PlanCard, { plan: plan, periodId: activePeriod, locale: locale, priceFormatOptions: priceFormatOptions, formatPrice: formatPrice, limitsLabel: limitsLabel, featuresVisibleLimit: featuresVisibleLimit, defaultUnavailableReason: defaultUnavailableReason, headingElement: PlanHeading }, plan.id))) })), footnote && _jsx("p", { className: "text-sm break-words text-grey-600", children: footnote })] }) }));
+});
+PricingPlansBlock.displayName = "PricingPlansBlock";