pixelize-design-library 2.4.2-beta.55 → 2.4.2-beta.57

package/dist/Components/ProductCard/ProductCardProps.d.ts

@@ -1,57 +1,139 @@
-/** Card size; drives width, image height and padding via ProductCard's own sizeStyles map. */
-export type SizeType = "xs" | "sm" | "md" | "lg";
-/** Compact catalog/grid tile (image + price + cart actions) — for a full gallery/description page use ProductDetails instead. */
-export type ProductCardProps = {
-    id: string | number;
-    label: string;
-    /** Accepted by the type but never read by ProductCard — passing it has no effect. */
-    description?: string;
-    productImage: productImage[];
-    /** Renders nothing at all past 4 tags — ProductTags' row layout has no case for 5 or more. */
-    tags?: string[];
-    rating?: string | number;
-    reviews?: string | number;
-    /** Non-empty when provided — `[]` crashes the price dropdown; selection won't refresh if this array is later replaced. */
-    options?: options[];
-    onClick?: () => void;
-    button?: {
-        label: string;
-        onClick: () => void;
-    };
-    onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
-    onNotifyMe?: (id: string | number, var_id: number) => void;
-    /** Also fires once on mount for the default (first) option, not only when the shopper picks a different one. */
-    onOptionChange?: (option: options) => void;
-    addToCart?: boolean;
-    goToCart?: boolean;
-    notifyMe?: boolean;
-    OnGoToCart?: () => void;
-    batch?: batch;
-    size?: SizeType;
-    /** Accepted by the type but never read anywhere in ProductCard — always a no-op regardless of value. */
-    avalabilitys?: boolean;
-    isQtyEditable?: boolean;
-    displayRating?: boolean;
-};
-/** One purchase variant (weight/price/stock) shown in the price dropdown; var_id identifies it to cart callbacks. */
-export type options = {
-    label: string;
-    weight: number;
-    unit?: number;
+import type { ComponentPropsWithoutRef, ElementType, MouseEvent, ReactNode } from "react";
+import type { OptionAxis, PriceFormat, ProductBadge, ProductMedia, ProductVariant } from "../Commerce/commerceTypes";
+import type { UnitPrice } from "../../Utils/price";
+import type { QuickAddPresentation, QuickAddSheetProps } from "./QuickAddSheetProps";
+/** grid fills its column, list is a horizontal row with the action in the body, rail is a fixed-width scroll-snap item. */
+export type ProductCardLayout = "grid" | "list" | "rail";
+/** Type, insets and the add affordance scale together: compact is the 173 px phone 2-up, spacious the desktop 4-up. */
+export type ProductCardDensity = "compact" | "comfortable" | "spacious";
+/** Ratio of the media well; images cover it, so one ratio per grid keeps rows level. */
+export type ProductCardAspectRatio = "4/5" | "1/1" | "3/4";
+/** What the primary control does: choose options in the sheet, add at once, or ask to be notified. */
+export type ProductCardAction = "options" | "add" | "notify";
+/** Fires when the card (title link or button) is pressed anywhere outside its own controls. */
+export type ProductCardPressHandler = (event: MouseEvent<HTMLElement>) => void;
+/** Visible and screen-reader copy of the card's own controls; override every string for another language. */
+export interface ProductCardLabels {
+    /** Wishlist button name, given the product title. */
+    save: (title: string) => string;
+    /** Name of the control that opens the option sheet, given the product title. */
+    chooseOptions: (title: string) => string;
+    /** Name of the control that adds a product with no options, given the product title. */
+    addToBag: (title: string) => string;
+    /** Visible text of the notify control. */
+    notifyMe: string;
+    /** Name of the notify control, given the product title. */
+    notifyMeFor: (title: string) => string;
+    /** Visible text on the hover bar of a spacious card whose action opens options. */
+    chooseOptionsText: string;
+    /** Visible text on the hover bar of a spacious card that adds directly. */
+    addToBagText: string;
+    /** Status text of an unavailable product. */
+    soldOut: string;
+    /** Screen-reader text added to a selected card. */
+    selected: string;
+    /** Screen-reader text after the "+N" swatch count, given N. */
+    moreColours: (count: number) => string;
+    /** Image fallback text. */
+    imageUnavailable: string;
+}
+/** Product card for listings, rails and search: media, brand, title, rating, price, swatches and one action; owns no product vocabulary beyond `axes`. */
+export interface ProductCardProps extends PriceFormat {
+    title: string;
+    /** Muted line above the title; own-brand stores omit it. */
+    brand?: string;
+    /** First frame is the primary image, the second is the hover frame; every frame is also the pool `mediaIdsByOption` points into. */
+    media: ProductMedia[];
+    /** Alt text for the primary image when the media item has none; defaults to the title. */
+    alt?: string;
+    /** Selling price; a range replaces it when `variants` differ in price. */
     price: number;
-    offer: number;
-    var_id: number;
-    stocks: number;
-};
-/** Corner ribbon badge on the product image (e.g. "Sale"); color defaults to green when unset. */
-export type batch = {
-    label: string;
-    color?: string;
-};
-/** One gallery image; the first two (after filtering isImage !== false) are the cover and hover-swap. */
-export type productImage = {
-    imageUrl: string;
-    imageId: number;
-    order: number;
-    isImage?: boolean;
-};
+    /** List price; the strike and discount show only when above `price` and the product is in stock. */
+    mrp?: number;
+    /** A `unitPrice()` result or a ready string, shown under the price. */
+    unitPrice?: UnitPrice | string | null;
+    /** 0 to 5; the row is hidden when missing or 0, never rendered as "0 reviews". */
+    rating?: number;
+    ratingCount?: number;
+    /** Badges in priority order; at most two are drawn, and none on a sold-out card. */
+    badges?: ProductBadge[];
+    /** Option axes; any axis with more than one value makes the primary action open the quick-add sheet. */
+    axes?: OptionAxis[];
+    /** Variants the axes resolve to; drive availability, the price range and the sheet's confirm button. */
+    variants?: ProductVariant[];
+    /** Maps `"<axisId>:<valueId>"` to the media ids shown for that value, so a swatch swaps the card image. */
+    mediaIdsByOption?: Record<string, string[]>;
+    /** Most colour dots shown before "+N". */
+    swatchLimit?: number;
+    /** Units left for a product without variants; shown as "Only N left" at or under the low-stock threshold. */
+    stock?: number;
+    /** Forces the sold-out state; derived from `variants` or `stock` when omitted. */
+    outOfStock?: boolean;
+    /** Renders the title as a link and makes the whole card its target. */
+    href?: string;
+    /** Component for the title link, e.g. a router Link; receives `href` and `linkProps`. */
+    linkAs?: ElementType;
+    /** Extra props for the title link, e.g. `{ to: "/p/jacket" }` for a router Link. */
+    linkProps?: Omit<ComponentPropsWithoutRef<"a">, "href" | "onClick">;
+    /** Makes the title a stretched button when there is no `href`, or runs beside navigation when there is. */
+    onPress?: ProductCardPressHandler;
+    layout?: ProductCardLayout;
+    density?: ProductCardDensity;
+    aspectRatio?: ProductCardAspectRatio;
+    /** Overrides the action derived from the data (notify when sold out, options when an axis has choices, else add). */
+    action?: ProductCardAction;
+    /** Units in the bag; above 0 the add control becomes a stepper. Omit to let the card track it after a direct add. */
+    quantity?: number;
+    /** Fires from the stepper; 0 means the shopper removed the product. */
+    onQuantityChange?: (quantity: number) => void;
+    /** How the quick-add sheet opens; `auto` follows the window width, so pass `drawer` inside a phone-width frame. */
+    quickAddPresentation?: QuickAddPresentation;
+    /** Forwarded to the quick-add drawer panel; the drawer portals to the window; see `QuickAddSheetProps.drawerContentProps` for capping its width. */
+    quickAddDrawerProps?: QuickAddSheetProps["drawerContentProps"];
+    /** Fires on a direct add (quantity 1) and from the quick-add sheet; `variantId` is the chosen variant when one is known. */
+    onAdd?: (variantId: string | undefined, quantity: number) => void;
+    /** Fires when the stepper's minus is pressed at 1, after `onQuantityChange(0)`. */
+    onRemove?: () => void;
+    /** Fires from the notify control of a sold-out card. */
+    onNotify?: () => void;
+    /** Controlled wishlist state. */
+    wishlisted?: boolean;
+    onWishlistChange?: (wishlisted: boolean) => void;
+    /** Marks the card as chosen (compare, bulk select): a ring on the media and a check, never colour alone. */
+    selected?: boolean;
+    /** Renders the skeleton with the same box model, so nothing shifts on load. */
+    isLoading?: boolean;
+    /** Glass content laid over the media well, clear of the badge, wishlist and action corners. */
+    mediaOverlay?: ReactNode;
+    /** Replaces the default meta line (low-stock status) under the price; sold-out status stays. */
+    meta?: ReactNode;
+    /** Replaces the derived add control, keeping its footprint. */
+    actions?: ReactNode;
+    labels?: Partial<ProductCardLabels>;
+    "data-testid"?: string;
+}
+/** Skeleton with the card's box model; pass the same layout, density and ratio as the loaded cards. */
+export interface ProductCardSkeletonProps {
+    layout?: ProductCardLayout;
+    density?: ProductCardDensity;
+    aspectRatio?: ProductCardAspectRatio;
+    "data-testid"?: string;
+}
+/** Column counts per breakpoint of a card grid. */
+export type ProductCardGridColumns = Partial<Record<"base" | "sm" | "md" | "lg" | "xl", number>>;
+/** Responsive grid for cards: 2 columns on a phone up to 5 on a wide screen, equal-height rows, one gap scale. */
+export interface ProductCardGridProps {
+    /** One card per child; each is wrapped in a list item that stretches it to the row height. */
+    children: ReactNode;
+    /** Columns per breakpoint; defaults to 2, 3 from md, 4 from lg and 5 from xl. */
+    columns?: ProductCardGridColumns;
+    /** Gap on both axes, overriding the window-based gaps; a number is in Chakra space units, a string any CSS length. */
+    gap?: string | number;
+    /** Column gap only; wins over `gap`. */
+    columnGap?: string | number;
+    /** Row gap only; wins over `gap`. */
+    rowGap?: string | number;
+    /** Accessible name of the list, e.g. "Jackets". */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/ProductCard/ProductCardSkeleton.d.ts

@@ -0,0 +1,4 @@
+import type { ProductCardSkeletonProps } from "./ProductCardProps";
+/** Loading twin of ProductCard: same media ratio, title reservation and gaps, so the swap never moves the grid. */
+declare const ProductCardSkeleton: ({ layout, density, aspectRatio, "data-testid": testId, }: ProductCardSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductCardSkeleton;

package/dist/Components/ProductCard/ProductCardSkeleton.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const cardMetrics_1 = require("./cardMetrics");
+/** Loading twin of ProductCard: same media ratio, title reservation and gaps, so the swap never moves the grid. */
+const ProductCardSkeleton = ({ layout = "grid", density = "compact", aspectRatio = "4/5", "data-testid": testId, }) => {
+    const m = cardMetrics_1.DENSITY[density];
+    const horizontal = layout === "list";
+    const rail = layout === "rail";
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-busy": "true", "data-testid": testId, "data-layout": layout, direction: horizontal ? "row" : "column", gap: horizontal ? 3 : 0, w: rail ? m.railWidth : "100%", h: "100%", minW: 0, flexShrink: rail ? 0 : undefined, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: "Loading product" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, w: horizontal ? m.listMedia : "100%", borderRadius: cardMetrics_1.MEDIA_RADIUS, overflow: "hidden", sx: { aspectRatio: cardMetrics_1.CSS_RATIO[aspectRatio] }, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "100%", width: "100%", borderRadius: cardMetrics_1.MEDIA_RADIUS }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: m.bodyGap, pt: horizontal ? 0 : m.bodyTop, "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: `${m.brand.line - 4}px`, width: "35%" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: "4px", minH: `${m.title.line * cardMetrics_1.TITLE_LINES}px`, justify: "center", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: `${m.title.line - 6}px`, width: "92%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: `${m.title.line - 6}px`, width: "60%" })] }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "45%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1.25rem", width: "55%" })] })] }));
+};
+exports.default = ProductCardSkeleton;

package/dist/Components/ProductCard/ProductCardSwatches.d.ts

@@ -0,0 +1,15 @@
+import type { OptionAxis } from "../Commerce/commerceTypes";
+import type { ProductCardLabels } from "./ProductCardProps";
+type ProductCardSwatchesProps = {
+    axis: OptionAxis;
+    limit: number;
+    dot: number;
+    activeId: string;
+    soldOutIds: ReadonlySet<string>;
+    labels: ProductCardLabels;
+    onPreview: (valueId: string | null) => void;
+    onPick: (valueId: string) => void;
+};
+/** Colour dots for the first swatch axis: hover or focus previews the image, a press keeps it. */
+declare const ProductCardSwatches: ({ axis, limit, dot, activeId, soldOutIds, labels, onPreview, onPick }: ProductCardSwatchesProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductCardSwatches;

package/dist/Components/ProductCard/ProductCardSwatches.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const TARGET = "1.5rem";
+const UNAVAILABLE_OPACITY = 0.45;
+/** Colour dots for the first swatch axis: hover or focus previews the image, a press keeps it. */
+const ProductCardSwatches = ({ axis, limit, dot, activeId, soldOutIds, labels, onPreview, onPick }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const cells = (0, react_1.useRef)([]);
+    const shown = axis.values.slice(0, limit);
+    const rest = axis.values.length - shown.length;
+    const activeIndex = Math.max(0, shown.findIndex((value) => value.id === activeId));
+    const onKeyDown = (event) => {
+        var _a;
+        const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+        if (step === 0)
+            return;
+        event.preventDefault();
+        const next = (activeIndex + step + shown.length) % shown.length;
+        onPick(shown[next].id);
+        (_a = cells.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-control": true, position: "relative", zIndex: 2, align: "center", minH: TARGET, ml: "-0.375rem", maxW: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { role: "radiogroup", "aria-label": axis.label, onKeyDown: onKeyDown, onMouseLeave: () => onPreview(null), children: shown.map((value, index) => {
+                    const selected = value.id === activeId;
+                    const soldOut = soldOutIds.has(value.id);
+                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", role: "radio", ref: (el) => {
+                            cells.current[index] = el;
+                        }, "aria-checked": selected, "aria-label": soldOut ? `${value.label}, ${labels.soldOut.toLowerCase()}` : value.label, tabIndex: index === activeIndex ? 0 : -1, title: value.label, onClick: () => onPick(value.id), onMouseEnter: () => onPreview(value.id), onFocus: () => onPreview(value.id), onBlur: () => onPreview(null), display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: TARGET, flexShrink: 0, borderRadius: "full", cursor: "pointer", sx: { outline: "none", ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", p: "2px", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : "transparent", transition: (0, motion_1.transitionFor)(["border-color"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", boxSize: `${dot}px`, borderRadius: "full", backgroundColor: value.swatch, opacity: soldOut ? UNAVAILABLE_OPACITY : 1, boxShadow: `inset 0 0 0 1px ${colors.boxborder[200]}` }) }) }, value.id));
+                }) }), rest > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", "aria-hidden": true, ml: 1, fontSize: "0.75rem", fontWeight: 500, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: ["+", rest] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: labels.moreColours(rest) })] })) : null] }));
+};
+exports.default = ProductCardSwatches;

package/dist/Components/ProductCard/QuickAddSheet.d.ts

@@ -0,0 +1,4 @@
+import type { QuickAddSheetProps } from "./QuickAddSheetProps";
+/** Bottom sheet on phones, centred panel on desktop; holds the option picker so a card never grows. */
+declare const QuickAddSheet: ({ isOpen, onClose, title, brand, media, axes, variants, defaultSelection, onConfirm, presentation, drawerContentProps, labels, currency, locale, "data-testid": testId, }: QuickAddSheetProps) => import("react/jsx-runtime").JSX.Element;
+export default QuickAddSheet;

package/dist/Components/ProductCard/QuickAddSheet.js

@@ -0,0 +1,109 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const price_1 = require("../../Utils/price");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Drawer_1 = __importStar(require("../Drawer/Drawer"));
+const Modal_1 = __importStar(require("../Modal/Modal"));
+const PriceBlock_1 = __importDefault(require("../PriceBlock/PriceBlock"));
+const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantityStepper"));
+const VariantSelector_1 = __importDefault(require("../VariantSelector/VariantSelector"));
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+const productCardModel_1 = require("./productCardModel");
+const useMinWidth_1 = require("./useMinWidth");
+const DEFAULT_LABELS = {
+    heading: "Choose options",
+    quantity: "Quantity",
+    confirm: "Add to bag",
+    confirmWithTotal: (total) => `Add to bag — ${total}`,
+    prompt: (axisLabel) => `Select a ${axisLabel}`,
+};
+const DESKTOP_QUERY = "(min-width: 48em)";
+/** Bottom sheet on phones, centred panel on desktop; holds the option picker so a card never grows. */
+const QuickAddSheet = ({ isOpen, onClose, title, brand, media, axes, variants, defaultSelection, onConfirm, presentation = "auto", drawerContentProps, labels, currency, locale, "data-testid": testId, }) => {
+    var _a, _b, _c;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const desktop = (0, useMinWidth_1.useMinWidth)(DESKTOP_QUERY);
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const [selection, setSelection] = (0, react_1.useState)(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
+    const [quantity, setQuantity] = (0, react_1.useState)(1);
+    const [error, setError] = (0, react_1.useState)();
+    const [wasOpen, setWasOpen] = (0, react_1.useState)(isOpen);
+    if (isOpen !== wasOpen) {
+        setWasOpen(isOpen);
+        if (isOpen) {
+            setSelection(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
+            setQuantity(1);
+            setError(undefined);
+        }
+    }
+    const fmt = { currency, locale };
+    const variant = (0, commerceVariants_1.findVariant)(axes, variants, selection);
+    const range = (0, productCardModel_1.rangeOf)(variants);
+    const maxQuantity = (variant === null || variant === void 0 ? void 0 : variant.stock) !== undefined && variant.stock > 0 ? variant.stock : undefined;
+    const confirmLabel = variant ? copy.confirmWithTotal((0, price_1.formatPrice)(variant.price * quantity, fmt)) : copy.confirm;
+    const onSelect = (next) => {
+        setSelection(next);
+        setError(undefined);
+        const nextVariant = (0, commerceVariants_1.findVariant)(axes, variants, next);
+        if ((nextVariant === null || nextVariant === void 0 ? void 0 : nextVariant.stock) !== undefined && nextVariant.stock > 0)
+            setQuantity((q) => Math.min(q, nextVariant.stock));
+    };
+    const confirm = () => {
+        var _a;
+        if (!variant) {
+            const missing = (0, productCardModel_1.firstMissingAxis)(axes, selection);
+            setError(copy.prompt(((_a = missing === null || missing === void 0 ? void 0 : missing.label) !== null && _a !== void 0 ? _a : "option").toLowerCase()));
+            return;
+        }
+        onConfirm(variant, quantity);
+    };
+    const summary = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, mb: 4, children: [media ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", src: (_a = media.thumb) !== null && _a !== void 0 ? _a : media.src, alt: "", boxSize: "4.5rem", flexShrink: 0, borderRadius: "xl", objectFit: "cover", bg: colors.background[100] })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 0.5, minW: 0, children: [brand ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: brand })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, color: colors.header[900], noOfLines: 2, children: title }), (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "sm", price: (_b = variant === null || variant === void 0 ? void 0 : variant.price) !== null && _b !== void 0 ? _b : (_c = variants[0]) === null || _c === void 0 ? void 0 : _c.price, mrp: variant === null || variant === void 0 ? void 0 : variant.mrp, priceRange: variant ? undefined : range, currency: currency, locale: locale })] })] }));
+    const body = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, "data-testid": testId, children: [summary, (0, jsx_runtime_1.jsx)(VariantSelector_1.default, { axes: axes, variants: variants, value: selection, onValueChange: onSelect, error: error, showSelectedLabel: true, showLowStock: true }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: copy.quantity }), (0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { value: quantity, min: 1, max: maxQuantity, onValueChange: setQuantity, itemLabel: title })] })] }));
+    const action = ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "lg", width: "100%", onClick: confirm, children: confirmLabel }));
+    const asModal = presentation === "modal" || (presentation === "auto" && desktop);
+    if (asModal) {
+        return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { size: "md", isOpen: isOpen, onClose: onClose, isCentered: true, title: copy.heading, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: body }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: action })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { isOpen: isOpen, onClose: onClose, placement: "bottom", size: "md", contentProps: { maxW: "100%", w: "100%", maxH: "90vh", borderTopRadius: "2xl", overflow: "auto", ...drawerContentProps }, children: [(0, jsx_runtime_1.jsx)(Drawer_1.DrawerHeader, { children: copy.heading }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { children: body }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerFooter, { children: action })] }));
+};
+exports.default = QuickAddSheet;

package/dist/Components/ProductCard/QuickAddSheetProps.d.ts

@@ -0,0 +1,38 @@
+import type { DrawerContentProps } from "@chakra-ui/react";
+import type { OptionAxis, PriceFormat, ProductMedia, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+/** Visible copy of the sheet; override every string for another language. */
+export interface QuickAddSheetLabels {
+    /** Sheet heading, which also names the dialog. */
+    heading: string;
+    /** Label of the quantity stepper row. */
+    quantity: string;
+    /** Confirm button text while no variant is chosen. */
+    confirm: string;
+    /** Confirm button text for a chosen variant, given the formatted total. */
+    confirmWithTotal: (total: string) => string;
+    /** Prompt shown when confirming with an axis unpicked, given the lower-cased axis label ("size"). */
+    prompt: (axisLabel: string) => string;
+}
+/** drawer slides up from the bottom edge, modal is a centred panel, auto picks modal from 48em up. */
+export type QuickAddPresentation = "auto" | "drawer" | "modal";
+/** Option picker shown before an add: the product, a `VariantSelector`, a quantity stepper and a confirm button naming the total. */
+export interface QuickAddSheetProps extends PriceFormat {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    brand?: string;
+    /** Thumbnail beside the title. */
+    media?: ProductMedia;
+    axes: OptionAxis[];
+    /** Availability and the confirm total are derived from these. */
+    variants: ProductVariant[];
+    /** Picks to start from each time the sheet opens, e.g. the colour already chosen on the card. */
+    defaultSelection?: VariantSelection;
+    /** Fires with the chosen variant and quantity; the sheet does not close itself. */
+    onConfirm: (variant: ProductVariant, quantity: number) => void;
+    presentation?: QuickAddPresentation;
+    /** Merged over the drawer panel defaults, e.g. `{ maxW: "390px !important", mx: "auto" }` inside a phone-width frame; the slide sets an inline max-width. */
+    drawerContentProps?: DrawerContentProps;
+    labels?: Partial<QuickAddSheetLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/ProductCard/QuickAddSheetProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ProductCard/cardLabels.d.ts

@@ -0,0 +1,2 @@
+import type { ProductCardLabels } from "./ProductCardProps";
+export declare const DEFAULT_LABELS: ProductCardLabels;

package/dist/Components/ProductCard/cardLabels.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_LABELS = void 0;
+exports.DEFAULT_LABELS = {
+    save: (title) => `Save ${title}`,
+    chooseOptions: (title) => `Choose options for ${title}`,
+    addToBag: (title) => `Add to bag: ${title}`,
+    notifyMe: "Notify me",
+    notifyMeFor: (title) => `Notify me when ${title} is back`,
+    chooseOptionsText: "Choose options",
+    addToBagText: "Add to bag",
+    soldOut: "Sold out",
+    selected: "Selected",
+    moreColours: (count) => `${count} more colours`,
+    imageUnavailable: "Image unavailable",
+};

package/dist/Components/ProductCard/cardMetrics.d.ts

@@ -0,0 +1,27 @@
+import type { ProductCardAspectRatio, ProductCardDensity } from "./ProductCardProps";
+import type { PriceBlockSize } from "../PriceBlock/PriceBlockProps";
+export type DensityMetrics = {
+    badgeInset: string;
+    wishlistInset: string;
+    actionInset: string;
+    bodyTop: string;
+    bodyGap: string;
+    brand: {
+        size: string;
+        line: number;
+    };
+    title: {
+        size: string;
+        line: number;
+    };
+    price: PriceBlockSize;
+    dot: number;
+    railWidth: string;
+    listMedia: string;
+    rowGap: string;
+};
+export declare const DENSITY: Record<ProductCardDensity, DensityMetrics>;
+export declare const CSS_RATIO: Record<ProductCardAspectRatio, string>;
+export declare const MEDIA_RADIUS = "1rem";
+export declare const TITLE_LINES = 2;
+export declare const FINE_POINTER = "@media (hover: hover) and (pointer: fine)";

package/dist/Components/ProductCard/cardMetrics.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FINE_POINTER = exports.TITLE_LINES = exports.MEDIA_RADIUS = exports.CSS_RATIO = exports.DENSITY = void 0;
+exports.DENSITY = {
+    compact: {
+        badgeInset: "0.5rem",
+        wishlistInset: "0",
+        actionInset: "0.25rem",
+        bodyTop: "0.5rem",
+        bodyGap: "1px",
+        brand: { size: "0.75rem", line: 16 },
+        title: { size: "0.8125rem", line: 18 },
+        price: "sm",
+        dot: 12,
+        railWidth: "9.75rem",
+        listMedia: "6rem",
+        rowGap: "1.5rem",
+    },
+    comfortable: {
+        badgeInset: "0.625rem",
+        wishlistInset: "0.125rem",
+        actionInset: "0.375rem",
+        bodyTop: "0.625rem",
+        bodyGap: "2px",
+        brand: { size: "0.75rem", line: 16 },
+        title: { size: "0.875rem", line: 20 },
+        price: "sm",
+        dot: 14,
+        railWidth: "12.5rem",
+        listMedia: "7rem",
+        rowGap: "1.5rem",
+    },
+    spacious: {
+        badgeInset: "0.75rem",
+        wishlistInset: "0.25rem",
+        actionInset: "0.5rem",
+        bodyTop: "0.75rem",
+        bodyGap: "3px",
+        brand: { size: "0.8125rem", line: 18 },
+        title: { size: "0.9375rem", line: 22 },
+        price: "md",
+        dot: 16,
+        railWidth: "12.5rem",
+        listMedia: "7rem",
+        rowGap: "2rem",
+    },
+};
+exports.CSS_RATIO = {
+    "4/5": "4 / 5",
+    "1/1": "1 / 1",
+    "3/4": "3 / 4",
+};
+exports.MEDIA_RADIUS = "1rem";
+exports.TITLE_LINES = 2;
+exports.FINE_POINTER = "@media (hover: hover) and (pointer: fine)";

package/dist/Components/ProductCard/productCardFixtures.d.ts

@@ -0,0 +1,7 @@
+import type { OptionAxis, ProductMedia, ProductVariant } from "../Commerce/commerceTypes";
+export declare const jacketMedia: ProductMedia[];
+export declare const jacketAxes: OptionAxis[];
+export declare const jacketVariants: ProductVariant[];
+export declare const jacketMediaIds: Record<string, string[]>;
+export declare const mugMedia: ProductMedia[];
+export declare const mugVariants: ProductVariant[];

package/dist/Components/ProductCard/productCardFixtures.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mugVariants = exports.mugMedia = exports.jacketMediaIds = exports.jacketVariants = exports.jacketAxes = exports.jacketMedia = void 0;
+exports.jacketMedia = [
+    { id: "indigo-front", src: "/p/indigo-front.webp", alt: "Jacket in indigo, front" },
+    { id: "indigo-back", src: "/p/indigo-back.webp", alt: "Jacket in indigo, back" },
+    { id: "ice-front", src: "/p/ice-front.webp", alt: "Jacket in ice blue, front" },
+    { id: "ice-back", src: "/p/ice-back.webp", alt: "Jacket in ice blue, back" },
+    { id: "black-front", src: "/p/black-front.webp", alt: "Jacket in black, front" },
+    { id: "olive-front", src: "/p/olive-front.webp", alt: "Jacket in olive, front" },
+];
+exports.jacketAxes = [
+    {
+        id: "colour",
+        label: "Colour",
+        type: "swatch",
+        values: [
+            { id: "indigo", label: "Indigo Wash", swatch: "steelblue" },
+            { id: "ice", label: "Ice Blue", swatch: "lightsteelblue" },
+            { id: "black", label: "Washed Black", swatch: "black" },
+            { id: "olive", label: "Olive", swatch: "olive" },
+        ],
+    },
+    {
+        id: "size",
+        label: "Size",
+        type: "chip",
+        values: [
+            { id: "m", label: "M" },
+            { id: "l", label: "L" },
+        ],
+    },
+];
+const sized = (colour, size, stock) => ({
+    id: `jacket-${colour}-${size}`,
+    options: { colour, size },
+    price: 3499,
+    mrp: 4999,
+    stock,
+});
+exports.jacketVariants = [
+    sized("indigo", "m", 10),
+    sized("indigo", "l", 4),
+    sized("ice", "m", 9),
+    sized("ice", "l", 9),
+    sized("black", "m", 0),
+    sized("black", "l", 0),
+    sized("olive", "m", 6),
+    sized("olive", "l", 6),
+];
+exports.jacketMediaIds = {
+    "colour:indigo": ["indigo-front", "indigo-back"],
+    "colour:ice": ["ice-front", "ice-back"],
+    "colour:black": ["black-front"],
+    "colour:olive": ["olive-front"],
+};
+exports.mugMedia = [
+    { id: "front", src: "/p/mug.webp", alt: "Mug, front" },
+    { id: "detail", src: "/p/mug-d.webp", alt: "Mug, glaze close-up" },
+];
+exports.mugVariants = [{ id: "mug-default", options: {}, price: 699, stock: 46 }];