@raydenui/ui 0.9.7 → 0.10.0

package/dist/blocks/ProductCollectionBlock.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductCollectionBlock = ProductCollectionBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../components/Button/index.cjs");
+const cn_1 = require("../utils/cn.cjs");
+const commerce_1 = require("./commerce.cjs");
+function ProductCollectionBlock({ title = "Thoughtful everyday essentials", description, products, layout = "grid", onSelectProduct, onAddToCart, pendingProductIds = [], status = "ready", errorMessage = "We couldn’t load the collection.", onRetry, emptyMessage = "No products are available yet.", currency, locale, ...frame }) {
+    const id = (0, react_1.useId)();
+    const [query, setQuery] = (0, react_1.useState)("");
+    const [category, setCategory] = (0, react_1.useState)("");
+    const [sort, setSort] = (0, react_1.useState)("featured");
+    const ProductHeading = `h${Math.min(Number((frame.headingLevel ?? "h2").slice(1)) + 1, 6)}`;
+    const categories = [...new Set(products.flatMap((p) => (p.category ? [p.category] : [])))];
+    const currentCategory = categories.includes(category) ? category : "";
+    const visible = products.filter((p) => (!currentCategory || p.category === currentCategory) &&
+        `${p.name} ${p.description ?? ""}`
+            .toLocaleLowerCase(locale ?? "en-GB")
+            .includes(query.trim().toLocaleLowerCase(locale ?? "en-GB")));
+    if (sort !== "featured")
+        visible.sort((a, b) => (sort === "price-low" ? a.price - b.price : b.price - a.price));
+    return ((0, jsx_runtime_1.jsx)(commerce_1.CommerceFrame, { ...frame, title: title, description: description, busy: status === "loading", children: status === "loading" ? ((0, jsx_runtime_1.jsx)("p", { role: "status", className: "border-y border-surface-border py-12 text-grey-600", children: "Loading collection\u2026" })) : status === "error" ? ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("p", { children: errorMessage }), onRetry && ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: "h-auto min-h-11", variant: "secondary", onClick: onRetry, children: "Try again" }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-5 grid grid-cols-2 items-end gap-3 border-y border-surface-border py-4 @min-[640px]:grid-cols-[minmax(160px,1fr)_minmax(140px,180px)_minmax(140px,180px)]", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: `${id}-search`, className: "col-span-2 flex min-w-0 flex-col gap-2 text-sm text-grey-600 @min-[640px]:col-span-1", children: ["Search products", (0, jsx_runtime_1.jsx)("input", { id: `${id}-search`, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Find your next favourite", className: (0, cn_1.cn)(commerce_1.commerceControl, "w-full cursor-text") })] }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: `${id}-category`, className: "flex min-w-0 flex-col gap-2 text-sm text-grey-600", children: ["Category", (0, jsx_runtime_1.jsxs)("select", { id: `${id}-category`, value: currentCategory, onChange: (e) => setCategory(e.target.value), className: (0, cn_1.cn)(commerce_1.commerceControl, "w-full text-sm"), children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "All categories" }), categories.map((c) => ((0, jsx_runtime_1.jsx)("option", { children: c }, c)))] })] }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: `${id}-sort`, className: "flex min-w-0 flex-col gap-2 text-sm text-grey-600", children: ["Sort by", (0, jsx_runtime_1.jsxs)("select", { id: `${id}-sort`, value: sort, onChange: (e) => setSort(e.target.value), className: (0, cn_1.cn)(commerce_1.commerceControl, "w-full text-sm"), children: [(0, jsx_runtime_1.jsx)("option", { value: "featured", children: "Featured" }), (0, jsx_runtime_1.jsx)("option", { value: "price-low", children: "Price: low to high" }), (0, jsx_runtime_1.jsx)("option", { value: "price-high", children: "Price: high to low" })] })] })] }), (0, jsx_runtime_1.jsxs)("p", { role: "status", className: "mb-5 text-sm text-grey-600", children: [visible.length, " ", visible.length === 1 ? "product" : "products"] }), visible.length ? ((0, jsx_runtime_1.jsx)("ul", { className: (0, cn_1.cn)(layout === "grid"
+                        ? "grid gap-x-4 gap-y-8 @min-[300px]:grid-cols-2 @min-[880px]:grid-cols-4 @min-[760px]:gap-x-6"
+                        : "divide-y divide-surface-border"), children: visible.map((product) => {
+                        const productId = `${id}-${product.id}`;
+                        const visual = ((0, jsx_runtime_1.jsxs)("div", { className: "relative overflow-hidden rounded-lg", children: [(0, jsx_runtime_1.jsx)(commerce_1.CommercePhoto, { image: product.image, className: (0, cn_1.cn)("motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.025]", layout === "grid" && "aspect-[4/5]") }), layout === "grid" && product.badge && ((0, jsx_runtime_1.jsx)("span", { className: "absolute top-3 left-3 max-w-[calc(100%-1.5rem)] rounded bg-surface px-2 py-1 text-left text-sm font-medium text-grey-900", children: product.badge }))] }));
+                        return ((0, jsx_runtime_1.jsxs)("li", { className: (0, cn_1.cn)("min-w-0", layout === "grid"
+                                ? "flex flex-col"
+                                : "grid grid-cols-[88px_minmax(0,1fr)] items-center gap-4 py-5 @min-[560px]:grid-cols-[112px_minmax(0,1fr)_auto]"), children: [product.href ? ((0, jsx_runtime_1.jsx)("a", { href: product.href, "aria-labelledby": productId, className: "group block rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-action-primary", children: visual })) : onSelectProduct ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onSelectProduct(product), "aria-labelledby": productId, className: "group block w-full cursor-pointer rounded-lg text-left focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-action-primary", children: visual })) : (visual), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("min-w-0", layout === "grid" && "flex flex-1 flex-col pt-4"), children: [product.category && ((0, jsx_runtime_1.jsx)("p", { className: "mb-1.5 text-sm text-grey-600", children: product.category })), (0, jsx_runtime_1.jsx)(ProductHeading, { id: productId, className: "text-base leading-snug font-semibold tracking-tight", children: product.name }), product.description && ((0, jsx_runtime_1.jsx)("p", { className: "mt-2 text-sm leading-relaxed text-grey-600", children: product.description })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-auto flex flex-wrap items-center justify-between gap-2 pt-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium tabular-nums", children: (0, commerce_1.formatCommerceMoney)(product.price, currency, locale) }), product.stock === 0 && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-grey-600", children: "Sold out" })] })] }), onAddToCart && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "grey", appearance: "outlined", className: (0, cn_1.cn)("h-auto min-h-11 whitespace-normal", layout === "grid"
+                                        ? "mt-4 w-full"
+                                        : "col-start-2 justify-self-start @min-[560px]:col-start-3 @min-[560px]:row-start-1"), disabled: product.stock === 0 || pendingProductIds.includes(product.id), onClick: () => onAddToCart(product), "aria-label": `Add ${product.name} to bag`, children: pendingProductIds.includes(product.id) ? "Adding…" : "Add to bag" }))] }, product.id));
+                    }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "border-b border-surface-border px-4 py-12 text-center", children: [(0, jsx_runtime_1.jsx)("p", { children: products.length ? "No products match your search." : emptyMessage }), products.length > 0 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", className: "mt-4 h-auto min-h-11", onClick: () => {
+                                setQuery("");
+                                setCategory("");
+                            }, children: "Clear filters" }))] }))] })) }));
+}

package/dist/blocks/ProductCollectionBlock.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Button } from "../components/Button/index.js";
+import { cn } from "../utils/cn.js";
+import { CommerceFrame, CommercePhoto, commerceControl, formatCommerceMoney, } from "./commerce.js";
+export function ProductCollectionBlock({ title = "Thoughtful everyday essentials", description, products, layout = "grid", onSelectProduct, onAddToCart, pendingProductIds = [], status = "ready", errorMessage = "We couldn’t load the collection.", onRetry, emptyMessage = "No products are available yet.", currency, locale, ...frame }) {
+    const id = useId();
+    const [query, setQuery] = useState("");
+    const [category, setCategory] = useState("");
+    const [sort, setSort] = useState("featured");
+    const ProductHeading = `h${Math.min(Number((frame.headingLevel ?? "h2").slice(1)) + 1, 6)}`;
+    const categories = [...new Set(products.flatMap((p) => (p.category ? [p.category] : [])))];
+    const currentCategory = categories.includes(category) ? category : "";
+    const visible = products.filter((p) => (!currentCategory || p.category === currentCategory) &&
+        `${p.name} ${p.description ?? ""}`
+            .toLocaleLowerCase(locale ?? "en-GB")
+            .includes(query.trim().toLocaleLowerCase(locale ?? "en-GB")));
+    if (sort !== "featured")
+        visible.sort((a, b) => (sort === "price-low" ? a.price - b.price : b.price - a.price));
+    return (_jsx(CommerceFrame, { ...frame, title: title, description: description, busy: status === "loading", children: status === "loading" ? (_jsx("p", { role: "status", className: "border-y border-surface-border py-12 text-grey-600", children: "Loading collection\u2026" })) : status === "error" ? (_jsxs("div", { role: "alert", className: "space-y-4", children: [_jsx("p", { children: errorMessage }), onRetry && (_jsx(Button, { className: "h-auto min-h-11", variant: "secondary", onClick: onRetry, children: "Try again" }))] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-5 grid grid-cols-2 items-end gap-3 border-y border-surface-border py-4 @min-[640px]:grid-cols-[minmax(160px,1fr)_minmax(140px,180px)_minmax(140px,180px)]", children: [_jsxs("label", { htmlFor: `${id}-search`, className: "col-span-2 flex min-w-0 flex-col gap-2 text-sm text-grey-600 @min-[640px]:col-span-1", children: ["Search products", _jsx("input", { id: `${id}-search`, type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Find your next favourite", className: cn(commerceControl, "w-full cursor-text") })] }), _jsxs("label", { htmlFor: `${id}-category`, className: "flex min-w-0 flex-col gap-2 text-sm text-grey-600", children: ["Category", _jsxs("select", { id: `${id}-category`, value: currentCategory, onChange: (e) => setCategory(e.target.value), className: cn(commerceControl, "w-full text-sm"), children: [_jsx("option", { value: "", children: "All categories" }), categories.map((c) => (_jsx("option", { children: c }, c)))] })] }), _jsxs("label", { htmlFor: `${id}-sort`, className: "flex min-w-0 flex-col gap-2 text-sm text-grey-600", children: ["Sort by", _jsxs("select", { id: `${id}-sort`, value: sort, onChange: (e) => setSort(e.target.value), className: cn(commerceControl, "w-full text-sm"), children: [_jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "price-low", children: "Price: low to high" }), _jsx("option", { value: "price-high", children: "Price: high to low" })] })] })] }), _jsxs("p", { role: "status", className: "mb-5 text-sm text-grey-600", children: [visible.length, " ", visible.length === 1 ? "product" : "products"] }), visible.length ? (_jsx("ul", { className: cn(layout === "grid"
+                        ? "grid gap-x-4 gap-y-8 @min-[300px]:grid-cols-2 @min-[880px]:grid-cols-4 @min-[760px]:gap-x-6"
+                        : "divide-y divide-surface-border"), children: visible.map((product) => {
+                        const productId = `${id}-${product.id}`;
+                        const visual = (_jsxs("div", { className: "relative overflow-hidden rounded-lg", children: [_jsx(CommercePhoto, { image: product.image, className: cn("motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.025]", layout === "grid" && "aspect-[4/5]") }), layout === "grid" && product.badge && (_jsx("span", { className: "absolute top-3 left-3 max-w-[calc(100%-1.5rem)] rounded bg-surface px-2 py-1 text-left text-sm font-medium text-grey-900", children: product.badge }))] }));
+                        return (_jsxs("li", { className: cn("min-w-0", layout === "grid"
+                                ? "flex flex-col"
+                                : "grid grid-cols-[88px_minmax(0,1fr)] items-center gap-4 py-5 @min-[560px]:grid-cols-[112px_minmax(0,1fr)_auto]"), children: [product.href ? (_jsx("a", { href: product.href, "aria-labelledby": productId, className: "group block rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-action-primary", children: visual })) : onSelectProduct ? (_jsx("button", { type: "button", onClick: () => onSelectProduct(product), "aria-labelledby": productId, className: "group block w-full cursor-pointer rounded-lg text-left focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-action-primary", children: visual })) : (visual), _jsxs("div", { className: cn("min-w-0", layout === "grid" && "flex flex-1 flex-col pt-4"), children: [product.category && (_jsx("p", { className: "mb-1.5 text-sm text-grey-600", children: product.category })), _jsx(ProductHeading, { id: productId, className: "text-base leading-snug font-semibold tracking-tight", children: product.name }), product.description && (_jsx("p", { className: "mt-2 text-sm leading-relaxed text-grey-600", children: product.description })), _jsxs("div", { className: "mt-auto flex flex-wrap items-center justify-between gap-2 pt-3", children: [_jsx("p", { className: "font-medium tabular-nums", children: formatCommerceMoney(product.price, currency, locale) }), product.stock === 0 && _jsx("p", { className: "text-sm text-grey-600", children: "Sold out" })] })] }), onAddToCart && (_jsx(Button, { variant: "grey", appearance: "outlined", className: cn("h-auto min-h-11 whitespace-normal", layout === "grid"
+                                        ? "mt-4 w-full"
+                                        : "col-start-2 justify-self-start @min-[560px]:col-start-3 @min-[560px]:row-start-1"), disabled: product.stock === 0 || pendingProductIds.includes(product.id), onClick: () => onAddToCart(product), "aria-label": `Add ${product.name} to bag`, children: pendingProductIds.includes(product.id) ? "Adding…" : "Add to bag" }))] }, product.id));
+                    }) })) : (_jsxs("div", { className: "border-b border-surface-border px-4 py-12 text-center", children: [_jsx("p", { children: products.length ? "No products match your search." : emptyMessage }), products.length > 0 && (_jsx(Button, { variant: "secondary", className: "mt-4 h-auto min-h-11", onClick: () => {
+                                setQuery("");
+                                setCategory("");
+                            }, children: "Clear filters" }))] }))] })) }));
+}

package/dist/blocks/ProductDetailBlock.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductDetailBlock = ProductDetailBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../components/Button/index.cjs");
+const cn_1 = require("../utils/cn.cjs");
+const commerce_1 = require("./commerce.cjs");
+/** Reset the selection when switching products. */
+function ProductDetailBlock(props) {
+    return (0, jsx_runtime_1.jsx)(ProductDetailView, { ...props }, props.product.id);
+}
+function ProductDetailView({ product, title = product.name, description = product.description, images, layout = "split", options = [], optionLabel = "Finish", details = [], onAddToCart, pending = false, errorMessage, successMessage, deliveryNote, currency, locale, headingLevel, className, }) {
+    const id = (0, react_1.useId)();
+    const [optionId, setOptionId] = (0, react_1.useState)(options.find((o) => o.stock !== 0)?.id ?? options[0]?.id);
+    const [requestedQuantity, setQuantity] = (0, react_1.useState)(1);
+    const [imageIndex, setImageIndex] = (0, react_1.useState)(0);
+    const gallery = images?.length ? images : product.image ? [product.image] : [];
+    const activeImage = Math.min(imageIndex, Math.max(0, gallery.length - 1));
+    const option = options.find((o) => o.id === optionId) ?? options.find((o) => o.stock !== 0) ?? options[0];
+    const stock = Math.min(product.stock ?? 99, option?.stock ?? 99);
+    const quantity = Math.max(1, Math.min(requestedQuantity, stock));
+    return ((0, jsx_runtime_1.jsx)("section", { "aria-labelledby": `${id}-title`, "aria-busy": pending || undefined, className: (0, cn_1.cn)("@container w-full min-w-0 bg-surface text-grey-900 [overflow-wrap:anywhere]", className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("grid items-start gap-8", layout === "split" &&
+                "@min-[700px]:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] @min-[900px]:gap-14"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 space-y-3", children: [(0, jsx_runtime_1.jsx)(commerce_1.CommercePhoto, { image: gallery[activeImage], priority: true, className: "aspect-[4/5]" }), gallery.length > 1 && ((0, jsx_runtime_1.jsx)("div", { role: "group", "aria-label": `Images of ${product.name}`, className: "flex flex-wrap gap-3", children: gallery.map((image, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": `View image ${index + 1}: ${image.alt}`, "aria-pressed": index === activeImage, onClick: () => setImageIndex(index), className: (0, cn_1.cn)("w-16 cursor-pointer rounded-lg border-2 p-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary", index === activeImage
+                                    ? "border-action-primary"
+                                    : "border-transparent hover:border-surface-border-strong"), children: (0, jsx_runtime_1.jsx)(commerce_1.CommercePhoto, { image: { ...image, alt: "" }, className: "rounded" }) }, `${image.src}-${index}`))) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 @min-[700px]:py-2", children: [product.category && ((0, jsx_runtime_1.jsx)("p", { className: "mb-4 text-sm font-medium text-grey-600", children: product.category })), (0, jsx_runtime_1.jsx)(commerce_1.CommerceHeading, { id: `${id}-title`, title: title, description: description, headingLevel: headingLevel }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6 flex flex-wrap items-center justify-between gap-3 border-b border-surface-border pb-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-medium tracking-tight tabular-nums", children: (0, commerce_1.formatCommerceMoney)(product.price, currency, locale) }), (0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-2 text-sm text-grey-600", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: (0, cn_1.cn)("size-1.5 rounded-full", stock ? "bg-success-700" : "bg-grey-500") }), stock === 0 ? "Currently sold out" : "Available to order"] })] }), options.length > 0 && ((0, jsx_runtime_1.jsxs)("fieldset", { disabled: pending, className: "mt-6 space-y-3", children: [(0, jsx_runtime_1.jsxs)("legend", { className: "text-sm font-semibold", children: [optionLabel, option && ((0, jsx_runtime_1.jsxs)("span", { "aria-hidden": "true", className: "font-normal text-grey-600", children: [" ", "\u00B7 ", option.label] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2", children: options.map((o) => ((0, jsx_runtime_1.jsxs)("label", { className: `${commerce_1.commerceControl} inline-flex items-center gap-2 has-[:checked]:border-action-primary has-[:checked]:bg-surface-muted has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50`, children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: `${id}-option`, value: o.id, checked: option?.id === o.id, disabled: o.stock === 0, onChange: () => {
+                                                    setOptionId(o.id);
+                                                    setQuantity(1);
+                                                }, className: "accent-action-primary" }), o.label, o.stock === 0 && " · Sold out"] }, o.id))) })] })), onAddToCart && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-6 space-y-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold", children: "Quantity" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-3", children: [(0, jsx_runtime_1.jsx)(commerce_1.CommerceQuantity, { name: product.name, quantity: quantity, max: stock, disabled: pending || stock === 0, onChange: setQuantity }), (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: pending || stock === 0, className: "h-auto min-h-12 min-w-[140px] flex-1 whitespace-normal", onClick: () => onAddToCart({ product, option, quantity }), children: pending ? "Adding…" : stock === 0 ? "Sold out" : "Add to bag" })] })] })), errorMessage && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "mt-4 text-sm text-error-700", children: errorMessage })), successMessage && ((0, jsx_runtime_1.jsx)("p", { role: "status", className: "mt-4 text-sm text-success-700", children: successMessage })), deliveryNote && ((0, jsx_runtime_1.jsx)("p", { className: "mt-6 border-y border-surface-border py-5 text-sm leading-relaxed text-grey-600", children: deliveryNote })), details.length > 0 && ((0, jsx_runtime_1.jsxs)("details", { className: "mt-4", open: true, children: [(0, jsx_runtime_1.jsxs)("summary", { className: "flex min-h-11 cursor-pointer items-center justify-between rounded text-sm font-semibold focus-visible:outline-2 focus-visible:outline-action-primary", children: ["Product details ", (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2195" })] }), (0, jsx_runtime_1.jsx)("dl", { className: "space-y-3 py-3 text-sm", children: details.map((detail) => ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsx)("dt", { className: "text-grey-600", children: detail.label }), (0, jsx_runtime_1.jsx)("dd", { children: detail.value })] }, detail.label))) })] }))] })] }) }));
+}

package/dist/blocks/ProductDetailBlock.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Button } from "../components/Button/index.js";
+import { cn } from "../utils/cn.js";
+import { CommerceHeading, CommercePhoto, CommerceQuantity, commerceControl, formatCommerceMoney, } from "./commerce.js";
+/** Reset the selection when switching products. */
+export function ProductDetailBlock(props) {
+    return _jsx(ProductDetailView, { ...props }, props.product.id);
+}
+function ProductDetailView({ product, title = product.name, description = product.description, images, layout = "split", options = [], optionLabel = "Finish", details = [], onAddToCart, pending = false, errorMessage, successMessage, deliveryNote, currency, locale, headingLevel, className, }) {
+    const id = useId();
+    const [optionId, setOptionId] = useState(options.find((o) => o.stock !== 0)?.id ?? options[0]?.id);
+    const [requestedQuantity, setQuantity] = useState(1);
+    const [imageIndex, setImageIndex] = useState(0);
+    const gallery = images?.length ? images : product.image ? [product.image] : [];
+    const activeImage = Math.min(imageIndex, Math.max(0, gallery.length - 1));
+    const option = options.find((o) => o.id === optionId) ?? options.find((o) => o.stock !== 0) ?? options[0];
+    const stock = Math.min(product.stock ?? 99, option?.stock ?? 99);
+    const quantity = Math.max(1, Math.min(requestedQuantity, stock));
+    return (_jsx("section", { "aria-labelledby": `${id}-title`, "aria-busy": pending || undefined, className: cn("@container w-full min-w-0 bg-surface text-grey-900 [overflow-wrap:anywhere]", className), children: _jsxs("div", { className: cn("grid items-start gap-8", layout === "split" &&
+                "@min-[700px]:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] @min-[900px]:gap-14"), children: [_jsxs("div", { className: "min-w-0 space-y-3", children: [_jsx(CommercePhoto, { image: gallery[activeImage], priority: true, className: "aspect-[4/5]" }), gallery.length > 1 && (_jsx("div", { role: "group", "aria-label": `Images of ${product.name}`, className: "flex flex-wrap gap-3", children: gallery.map((image, index) => (_jsx("button", { type: "button", "aria-label": `View image ${index + 1}: ${image.alt}`, "aria-pressed": index === activeImage, onClick: () => setImageIndex(index), className: cn("w-16 cursor-pointer rounded-lg border-2 p-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary", index === activeImage
+                                    ? "border-action-primary"
+                                    : "border-transparent hover:border-surface-border-strong"), children: _jsx(CommercePhoto, { image: { ...image, alt: "" }, className: "rounded" }) }, `${image.src}-${index}`))) }))] }), _jsxs("div", { className: "min-w-0 @min-[700px]:py-2", children: [product.category && (_jsx("p", { className: "mb-4 text-sm font-medium text-grey-600", children: product.category })), _jsx(CommerceHeading, { id: `${id}-title`, title: title, description: description, headingLevel: headingLevel }), _jsxs("div", { className: "mt-6 flex flex-wrap items-center justify-between gap-3 border-b border-surface-border pb-6", children: [_jsx("p", { className: "text-2xl font-medium tracking-tight tabular-nums", children: formatCommerceMoney(product.price, currency, locale) }), _jsxs("p", { className: "flex items-center gap-2 text-sm text-grey-600", children: [_jsx("span", { "aria-hidden": "true", className: cn("size-1.5 rounded-full", stock ? "bg-success-700" : "bg-grey-500") }), stock === 0 ? "Currently sold out" : "Available to order"] })] }), options.length > 0 && (_jsxs("fieldset", { disabled: pending, className: "mt-6 space-y-3", children: [_jsxs("legend", { className: "text-sm font-semibold", children: [optionLabel, option && (_jsxs("span", { "aria-hidden": "true", className: "font-normal text-grey-600", children: [" ", "\u00B7 ", option.label] }))] }), _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((o) => (_jsxs("label", { className: `${commerceControl} inline-flex items-center gap-2 has-[:checked]:border-action-primary has-[:checked]:bg-surface-muted has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50`, children: [_jsx("input", { type: "radio", name: `${id}-option`, value: o.id, checked: option?.id === o.id, disabled: o.stock === 0, onChange: () => {
+                                                    setOptionId(o.id);
+                                                    setQuantity(1);
+                                                }, className: "accent-action-primary" }), o.label, o.stock === 0 && " · Sold out"] }, o.id))) })] })), onAddToCart && (_jsxs("div", { className: "mt-6 space-y-3", children: [_jsx("p", { className: "text-sm font-semibold", children: "Quantity" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(CommerceQuantity, { name: product.name, quantity: quantity, max: stock, disabled: pending || stock === 0, onChange: setQuantity }), _jsx(Button, { disabled: pending || stock === 0, className: "h-auto min-h-12 min-w-[140px] flex-1 whitespace-normal", onClick: () => onAddToCart({ product, option, quantity }), children: pending ? "Adding…" : stock === 0 ? "Sold out" : "Add to bag" })] })] })), errorMessage && (_jsx("p", { role: "alert", className: "mt-4 text-sm text-error-700", children: errorMessage })), successMessage && (_jsx("p", { role: "status", className: "mt-4 text-sm text-success-700", children: successMessage })), deliveryNote && (_jsx("p", { className: "mt-6 border-y border-surface-border py-5 text-sm leading-relaxed text-grey-600", children: deliveryNote })), details.length > 0 && (_jsxs("details", { className: "mt-4", open: true, children: [_jsxs("summary", { className: "flex min-h-11 cursor-pointer items-center justify-between rounded text-sm font-semibold focus-visible:outline-2 focus-visible:outline-action-primary", children: ["Product details ", _jsx("span", { "aria-hidden": "true", children: "\u2195" })] }), _jsx("dl", { className: "space-y-3 py-3 text-sm", children: details.map((detail) => (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx("dt", { className: "text-grey-600", children: detail.label }), _jsx("dd", { children: detail.value })] }, detail.label))) })] }))] })] }) }));
+}

package/dist/blocks/ProductHeroBlock.cjs

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductHeroBlock = 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";
+}
+/* ─── Shared call-to-action appearance ─────────────────────────────────────
+   One recipe drives both the anchor and the button so a destination and an
+   action can sit side by side without looking different. Heights are minimums,
+   not fixed values, so a long translated label grows instead of clipping.
+   ------------------------------------------------------------------------ */
+const CTA_BASE = "inline-flex max-w-full items-center justify-center gap-2 rounded-lg px-6 py-4 text-base font-semibold leading-[1.45] min-h-14 text-center break-words no-underline transition-colors cursor-pointer 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",
+    secondary: "bg-transparent text-action-primary-text border-[1.5px] border-current hover:bg-primary-50",
+};
+function HeroCta({ cta, tone }) {
+    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: "md", className: "shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "min-w-0", children: cta.label })] }));
+    if (isLinkCta(cta)) {
+        const externalAttributes = cta.external
+            ? { target: "_blank", rel: "noreferrer" }
+            : {};
+        return ((0, jsx_runtime_1.jsxs)("a", { href: cta.href, onClick: cta.onClick, 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, className: (0, cn_1.cn)(CTA_BASE, CTA_TONE[tone]), children: content }));
+}
+/* ─── Media ────────────────────────────────────────────────────────────── */
+function MediaPlaceholder({ label }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-h-[200px] w-full flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-surface-border-strong bg-surface-muted px-6 py-10 text-center", role: "img", "aria-label": label, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "image", size: "xl", className: "text-grey-400", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { className: "max-w-full text-sm break-words text-grey-600", children: label })] }));
+}
+const MEDIA_RATIO_CLASS = {
+    auto: "h-auto",
+    video: "aspect-video object-cover",
+    wide: "aspect-[16/10] object-cover",
+    square: "aspect-square object-cover",
+};
+function HeroMedia({ media, slot, fallback }) {
+    const [failed, setFailed] = (0, react_1.useState)(false);
+    if (slot) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "w-full min-w-0", children: slot });
+    }
+    if (!media)
+        return null;
+    const missing = !media.src || failed;
+    const placeholderLabel = media.alt || "Product example unavailable";
+    return ((0, jsx_runtime_1.jsxs)("figure", { className: "m-0 w-full min-w-0", children: [missing ? ((fallback ?? (0, jsx_runtime_1.jsx)(MediaPlaceholder, { label: placeholderLabel }))) : ((0, jsx_runtime_1.jsx)("img", { src: media.src, alt: media.alt, width: media.width, height: media.height, loading: "lazy", decoding: "async", onError: () => setFailed(true), className: (0, cn_1.cn)("w-full rounded-xl border border-surface-border bg-surface", MEDIA_RATIO_CLASS[media.aspectRatio ?? "auto"]) })), media.caption && ((0, jsx_runtime_1.jsx)("figcaption", { className: "mt-3 text-sm break-words text-grey-600", children: media.caption }))] }));
+}
+/* ─── Loading skeleton ─────────────────────────────────────────────────── */
+function HeroSkeleton({ withMedia }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("grid w-full gap-10", withMedia && "@min-[1136px]:grid-cols-2 @min-[1136px]:items-center @min-[1136px]:gap-16"), "aria-hidden": "true", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-5 w-32 max-w-full rounded-full bg-grey-200" }), (0, jsx_runtime_1.jsx)("div", { className: "h-10 w-full rounded-lg bg-grey-200" }), (0, jsx_runtime_1.jsx)("div", { className: "h-10 w-4/5 rounded-lg bg-grey-200" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2 h-4 w-full rounded bg-grey-100" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-11/12 rounded bg-grey-100" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex flex-wrap gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-14 w-40 max-w-full rounded-lg bg-grey-200" }), (0, jsx_runtime_1.jsx)("div", { className: "h-14 w-36 max-w-full rounded-lg bg-grey-100" })] })] }), withMedia && ((0, jsx_runtime_1.jsx)("div", { className: "aspect-[16/10] w-full min-w-0 rounded-xl bg-grey-100" }))] }));
+}
+/* ─── Block ────────────────────────────────────────────────────────────── */
+/**
+ * Product Hero — explains the product, shows a relevant example, and leads to a
+ * primary next step.
+ *
+ * States: `default`, `loading`, `error`. An "empty" state is not meaningful (a
+ * hero without a headline is not a hero); missing media degrades to a labelled
+ * placeholder instead. No success state is manufactured — the block performs no
+ * submission.
+ */
+exports.ProductHeroBlock = (0, react_1.forwardRef)(({ eyebrow, eyebrowBadge, headline, description, headingLevel = "h1", primaryCta, secondaryCta, note, highlights, media, mediaSlot, mediaFallback, align = "start", state = "default", loadingLabel = "Loading product introduction", errorTitle = "We could not load this introduction", errorDescription, onRetry, retryLabel = "Try again", className, ...rest }, ref) => {
+    const headingId = (0, react_1.useId)();
+    const Heading = headingLevel;
+    const HighlightHeading = nextHeadingLevel(headingLevel);
+    const hasMedia = Boolean(mediaSlot || media);
+    const centred = align === "center" && !hasMedia;
+    const headingSize = headingLevel === "h1"
+        ? "text-h3 @min-[600px]:text-h1 @min-[1136px]:text-display-sm"
+        : "text-h4 @min-[600px]:text-h3 @min-[1136px]:text-h2";
+    return ((0, jsx_runtime_1.jsx)("section", { ref: ref, "aria-labelledby": state === "loading" ? undefined : headingId, "aria-label": state === "loading" ? loadingLabel : undefined, "aria-busy": state === "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-10 px-4 py-12 @min-[600px]:px-8 @min-[600px]:py-16 @min-[1136px]:py-20", children: [state === "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)(HeroSkeleton, { withMedia: hasMedia })] })), state === "error" && ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: "flex w-full min-w-0 flex-col items-start gap-4 rounded-xl border border-surface-border bg-surface px-5 py-6 @min-[600px]:px-8 @min-[600px]:py-10", 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)(Heading, { id: headingId, className: "text-h5 font-semibold break-words text-grey-900", children: errorTitle }), errorDescription && ((0, jsx_runtime_1.jsx)("p", { className: "max-w-[60ch] text-base 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, "min-h-9 px-4 py-2 text-sm"), 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 })] }))] })), state === "default" && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("grid w-full gap-10", hasMedia && "@min-[1136px]:grid-cols-2 @min-[1136px]:items-center @min-[1136px]:gap-16"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex min-w-0 flex-col gap-5", centred && "mx-auto max-w-[68ch] items-center text-center"), children: [(eyebrow || eyebrowBadge) && ((0, jsx_runtime_1.jsxs)("p", { className: (0, cn_1.cn)("flex flex-wrap items-center gap-2 text-sm font-semibold break-words text-action-primary-text", centred && "justify-center"), children: [eyebrowBadge && ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { color: "orange", type: "accent", size: "md", children: eyebrowBadge })), eyebrow] })), (0, jsx_runtime_1.jsx)(Heading, { id: headingId, className: (0, cn_1.cn)("font-semibold break-words text-balance text-grey-900", headingSize), children: headline }), description && ((0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("max-w-[60ch] text-base break-words text-grey-600 @min-[600px]:text-body-lg", centred && "mx-auto"), children: description })), (primaryCta || secondaryCta) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("mt-1 flex w-full min-w-0 flex-col gap-3 @min-[600px]:flex-row @min-[600px]:flex-wrap @min-[600px]:items-center", centred && "@min-[600px]:justify-center"), children: [primaryCta && (0, jsx_runtime_1.jsx)(HeroCta, { cta: primaryCta, tone: "primary" }), secondaryCta && (0, jsx_runtime_1.jsx)(HeroCta, { cta: secondaryCta, tone: "secondary" })] })), note && (0, jsx_runtime_1.jsx)("p", { className: "text-sm break-words text-grey-500", children: note }), highlights && highlights.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: (0, cn_1.cn)("mt-3 flex list-none flex-col gap-4 p-0 @min-[600px]:flex-row @min-[600px]:flex-wrap @min-[600px]:gap-8", centred && "@min-[600px]:justify-center"), children: highlights.map((highlight) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex min-w-0 items-start gap-2", children: [highlight.icon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: highlight.icon, size: "md", className: "mt-0.5 shrink-0 text-action-primary-text", "aria-hidden": "true" })), (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-col", children: [highlight.value !== undefined && ((0, jsx_runtime_1.jsx)(HighlightHeading, { className: "text-h6 font-semibold break-words text-grey-900", children: highlight.value })), (0, jsx_runtime_1.jsx)("span", { className: "text-sm break-words text-grey-600", children: highlight.label })] })] }, highlight.id))) }))] }), hasMedia && ((0, jsx_runtime_1.jsx)(HeroMedia, { media: media, slot: mediaSlot, fallback: mediaFallback }))] }))] }) }));
+});
+exports.ProductHeroBlock.displayName = "ProductHeroBlock";

package/dist/blocks/ProductHeroBlock.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, 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";
+}
+/* ─── Shared call-to-action appearance ─────────────────────────────────────
+   One recipe drives both the anchor and the button so a destination and an
+   action can sit side by side without looking different. Heights are minimums,
+   not fixed values, so a long translated label grows instead of clipping.
+   ------------------------------------------------------------------------ */
+const CTA_BASE = "inline-flex max-w-full items-center justify-center gap-2 rounded-lg px-6 py-4 text-base font-semibold leading-[1.45] min-h-14 text-center break-words no-underline transition-colors cursor-pointer 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",
+    secondary: "bg-transparent text-action-primary-text border-[1.5px] border-current hover:bg-primary-50",
+};
+function HeroCta({ cta, tone }) {
+    const content = (_jsxs(_Fragment, { children: [cta.icon && _jsx(Icon, { name: cta.icon, size: "md", className: "shrink-0" }), _jsx("span", { className: "min-w-0", children: cta.label })] }));
+    if (isLinkCta(cta)) {
+        const externalAttributes = cta.external
+            ? { target: "_blank", rel: "noreferrer" }
+            : {};
+        return (_jsxs("a", { href: cta.href, onClick: cta.onClick, 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, className: cn(CTA_BASE, CTA_TONE[tone]), children: content }));
+}
+/* ─── Media ────────────────────────────────────────────────────────────── */
+function MediaPlaceholder({ label }) {
+    return (_jsxs("div", { className: "flex min-h-[200px] w-full flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-surface-border-strong bg-surface-muted px-6 py-10 text-center", role: "img", "aria-label": label, children: [_jsx(Icon, { name: "image", size: "xl", className: "text-grey-400", "aria-hidden": "true" }), _jsx("p", { className: "max-w-full text-sm break-words text-grey-600", children: label })] }));
+}
+const MEDIA_RATIO_CLASS = {
+    auto: "h-auto",
+    video: "aspect-video object-cover",
+    wide: "aspect-[16/10] object-cover",
+    square: "aspect-square object-cover",
+};
+function HeroMedia({ media, slot, fallback }) {
+    const [failed, setFailed] = useState(false);
+    if (slot) {
+        return _jsx("div", { className: "w-full min-w-0", children: slot });
+    }
+    if (!media)
+        return null;
+    const missing = !media.src || failed;
+    const placeholderLabel = media.alt || "Product example unavailable";
+    return (_jsxs("figure", { className: "m-0 w-full min-w-0", children: [missing ? ((fallback ?? _jsx(MediaPlaceholder, { label: placeholderLabel }))) : (_jsx("img", { src: media.src, alt: media.alt, width: media.width, height: media.height, loading: "lazy", decoding: "async", onError: () => setFailed(true), className: cn("w-full rounded-xl border border-surface-border bg-surface", MEDIA_RATIO_CLASS[media.aspectRatio ?? "auto"]) })), media.caption && (_jsx("figcaption", { className: "mt-3 text-sm break-words text-grey-600", children: media.caption }))] }));
+}
+/* ─── Loading skeleton ─────────────────────────────────────────────────── */
+function HeroSkeleton({ withMedia }) {
+    return (_jsxs("div", { className: cn("grid w-full gap-10", withMedia && "@min-[1136px]:grid-cols-2 @min-[1136px]:items-center @min-[1136px]:gap-16"), "aria-hidden": "true", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [_jsx("div", { className: "h-5 w-32 max-w-full rounded-full bg-grey-200" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-grey-200" }), _jsx("div", { className: "h-10 w-4/5 rounded-lg bg-grey-200" }), _jsx("div", { className: "mt-2 h-4 w-full rounded bg-grey-100" }), _jsx("div", { className: "h-4 w-11/12 rounded bg-grey-100" }), _jsxs("div", { className: "mt-4 flex flex-wrap gap-3", children: [_jsx("div", { className: "h-14 w-40 max-w-full rounded-lg bg-grey-200" }), _jsx("div", { className: "h-14 w-36 max-w-full rounded-lg bg-grey-100" })] })] }), withMedia && (_jsx("div", { className: "aspect-[16/10] w-full min-w-0 rounded-xl bg-grey-100" }))] }));
+}
+/* ─── Block ────────────────────────────────────────────────────────────── */
+/**
+ * Product Hero — explains the product, shows a relevant example, and leads to a
+ * primary next step.
+ *
+ * States: `default`, `loading`, `error`. An "empty" state is not meaningful (a
+ * hero without a headline is not a hero); missing media degrades to a labelled
+ * placeholder instead. No success state is manufactured — the block performs no
+ * submission.
+ */
+export const ProductHeroBlock = forwardRef(({ eyebrow, eyebrowBadge, headline, description, headingLevel = "h1", primaryCta, secondaryCta, note, highlights, media, mediaSlot, mediaFallback, align = "start", state = "default", loadingLabel = "Loading product introduction", errorTitle = "We could not load this introduction", errorDescription, onRetry, retryLabel = "Try again", className, ...rest }, ref) => {
+    const headingId = useId();
+    const Heading = headingLevel;
+    const HighlightHeading = nextHeadingLevel(headingLevel);
+    const hasMedia = Boolean(mediaSlot || media);
+    const centred = align === "center" && !hasMedia;
+    const headingSize = headingLevel === "h1"
+        ? "text-h3 @min-[600px]:text-h1 @min-[1136px]:text-display-sm"
+        : "text-h4 @min-[600px]:text-h3 @min-[1136px]:text-h2";
+    return (_jsx("section", { ref: ref, "aria-labelledby": state === "loading" ? undefined : headingId, "aria-label": state === "loading" ? loadingLabel : undefined, "aria-busy": state === "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-10 px-4 py-12 @min-[600px]:px-8 @min-[600px]:py-16 @min-[1136px]:py-20", children: [state === "loading" && (_jsxs(_Fragment, { children: [_jsx("p", { role: "status", className: "sr-only", children: loadingLabel }), _jsx(HeroSkeleton, { withMedia: hasMedia })] })), state === "error" && (_jsxs("div", { role: "alert", className: "flex w-full min-w-0 flex-col items-start gap-4 rounded-xl border border-surface-border bg-surface px-5 py-6 @min-[600px]:px-8 @min-[600px]:py-10", 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(Heading, { id: headingId, className: "text-h5 font-semibold break-words text-grey-900", children: errorTitle }), errorDescription && (_jsx("p", { className: "max-w-[60ch] text-base break-words text-grey-600", children: errorDescription })), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: cn(CTA_BASE, CTA_TONE.secondary, "min-h-9 px-4 py-2 text-sm"), children: [_jsx(Icon, { name: "refresh", size: "sm", className: "shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "min-w-0", children: retryLabel })] }))] })), state === "default" && (_jsxs("div", { className: cn("grid w-full gap-10", hasMedia && "@min-[1136px]:grid-cols-2 @min-[1136px]:items-center @min-[1136px]:gap-16"), children: [_jsxs("div", { className: cn("flex min-w-0 flex-col gap-5", centred && "mx-auto max-w-[68ch] items-center text-center"), children: [(eyebrow || eyebrowBadge) && (_jsxs("p", { className: cn("flex flex-wrap items-center gap-2 text-sm font-semibold break-words text-action-primary-text", centred && "justify-center"), children: [eyebrowBadge && (_jsx(Badge, { color: "orange", type: "accent", size: "md", children: eyebrowBadge })), eyebrow] })), _jsx(Heading, { id: headingId, className: cn("font-semibold break-words text-balance text-grey-900", headingSize), children: headline }), description && (_jsx("p", { className: cn("max-w-[60ch] text-base break-words text-grey-600 @min-[600px]:text-body-lg", centred && "mx-auto"), children: description })), (primaryCta || secondaryCta) && (_jsxs("div", { className: cn("mt-1 flex w-full min-w-0 flex-col gap-3 @min-[600px]:flex-row @min-[600px]:flex-wrap @min-[600px]:items-center", centred && "@min-[600px]:justify-center"), children: [primaryCta && _jsx(HeroCta, { cta: primaryCta, tone: "primary" }), secondaryCta && _jsx(HeroCta, { cta: secondaryCta, tone: "secondary" })] })), note && _jsx("p", { className: "text-sm break-words text-grey-500", children: note }), highlights && highlights.length > 0 && (_jsx("ul", { className: cn("mt-3 flex list-none flex-col gap-4 p-0 @min-[600px]:flex-row @min-[600px]:flex-wrap @min-[600px]:gap-8", centred && "@min-[600px]:justify-center"), children: highlights.map((highlight) => (_jsxs("li", { className: "flex min-w-0 items-start gap-2", children: [highlight.icon && (_jsx(Icon, { name: highlight.icon, size: "md", className: "mt-0.5 shrink-0 text-action-primary-text", "aria-hidden": "true" })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [highlight.value !== undefined && (_jsx(HighlightHeading, { className: "text-h6 font-semibold break-words text-grey-900", children: highlight.value })), _jsx("span", { className: "text-sm break-words text-grey-600", children: highlight.label })] })] }, highlight.id))) }))] }), hasMedia && (_jsx(HeroMedia, { media: media, slot: mediaSlot, fallback: mediaFallback }))] }))] }) }));
+});
+ProductHeroBlock.displayName = "ProductHeroBlock";

package/dist/blocks/ProfileSettingsBlock.cjs

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