pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/ProductCard/ProductCardMedia.js

@@ -0,0 +1,35 @@
+"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 lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const cardMetrics_1 = require("./cardMetrics");
+const DIMMED_OPACITY = 0.6;
+const Frame = ({ src, srcSet, sizes, alt, fallbackText, quiet = false }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ref = (0, react_1.useRef)(null);
+    const [loaded, setLoaded] = (0, react_1.useState)(false);
+    const [failed, setFailed] = (0, react_1.useState)(src === "");
+    (0, react_1.useEffect)(() => {
+        const el = ref.current;
+        if (el && el.complete && el.naturalWidth > 0)
+            setLoaded(true);
+    }, []);
+    if (failed) {
+        if (quiet)
+            return null;
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { role: "img", "aria-label": alt, position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 1.5, color: colors.textMuted, bg: colors.background[100], children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ImageOff, { size: 24, "aria-hidden": true }), fallbackText ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", fontWeight: 500, children: fallbackText })) : null] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", ref: ref, src: src, srcSet: srcSet, sizes: sizes, alt: alt, loading: "lazy", decoding: "async", draggable: false, onLoad: () => setLoaded(true), onError: () => setFailed(true), position: "absolute", inset: 0, w: "100%", h: "100%", objectFit: "cover", display: "block", opacity: loaded ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)() }));
+};
+/** Tonal media well: cover-fitted primary frame, optional hover frame, broken-image tile; overlays are children. */
+const ProductCardMedia = ({ primary, hover, title, alt, aspectRatio, dimmed, selected, fallbackText, width, children, }) => {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-media": true, "data-ratio": aspectRatio, position: "relative", flexShrink: 0, w: width !== null && width !== void 0 ? width : "100%", sx: { aspectRatio: cardMetrics_1.CSS_RATIO[aspectRatio] }, borderRadius: cardMetrics_1.MEDIA_RADIUS, overflow: "hidden", bg: colors.background[100], boxShadow: selected ? `0 0 0 2px ${colors.header[900]}` : "none", transition: (0, motion_1.transitionFor)(["box-shadow"]), children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-primary": true, position: "absolute", inset: 0, opacity: dimmed ? DIMMED_OPACITY : 1, transition: (0, motion_1.transitionFor)(["transform", "opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: primary ? ((0, jsx_runtime_1.jsx)(Frame, { src: primary.src, srcSet: primary.srcSet, sizes: primary.sizes, alt: (_b = (_a = primary.alt) !== null && _a !== void 0 ? _a : alt) !== null && _b !== void 0 ? _b : title, fallbackText: fallbackText }, primary.src)) : ((0, jsx_runtime_1.jsx)(Frame, { src: "", alt: alt !== null && alt !== void 0 ? alt : title, fallbackText: fallbackText }, "none")) }), hover ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-hover-frame": true, "aria-hidden": true, position: "absolute", inset: 0, opacity: 0, pointerEvents: "none", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Frame, { src: hover.src, srcSet: hover.srcSet, sizes: hover.sizes, alt: "", quiet: true }, hover.src) })) : null, children] }));
+};
+exports.default = ProductCardMedia;

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

@@ -1,47 +1,149 @@
-export type SizeType = "xs" | "sm" | "md" | "lg";
-export type ProductCardProps = {
-    id: string | number;
-    label: string;
-    description?: string;
-    productImage: productImage[];
-    tags?: string[];
-    rating?: string | number;
-    reviews?: string | number;
-    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;
-    onOptionChange?: (option: options) => void;
-    addToCart?: boolean;
-    goToCart?: boolean;
-    notifyMe?: boolean;
-    OnGoToCart?: () => void;
-    batch?: batch;
-    size?: SizeType;
-    avalabilitys?: boolean;
-    isQtyEditable?: boolean;
-    displayRating?: boolean;
-};
-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 {
+    /** Product name; the title link or button text, and the card's accessible name. */
+    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;
-};
-export type batch = {
-    label: string;
-    color?: string;
-};
-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;
+    /** Review count shown beside the stars in compact form; has no effect when `rating` is missing or 0. */
+    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;
+    /** Card arrangement; defaults to `grid`. */
+    layout?: ProductCardLayout;
+    /** Type, inset and control scale; defaults to `comfortable`. */
+    density?: ProductCardDensity;
+    /** Media well ratio; defaults to `4/5`. */
+    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;
+    /** Fires with the new wishlist state when the heart is toggled. */
+    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;
+    /** Overrides for the card's own control copy; unspecified strings keep the English defaults. */
+    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 {
+    /** Card arrangement to mirror; defaults to `grid`. */
+    layout?: ProductCardLayout;
+    /** Density to mirror; defaults to `compact`, unlike ProductCard's `comfortable`. */
+    density?: ProductCardDensity;
+    /** Media well ratio to mirror; defaults to `4/5`. */
+    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,39 @@
+"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 typography_1 = require("../../Theme/tokens/primitives/typography");
+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 borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+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 ${borderWidths_1.BORDER_WIDTHS.hairline} ${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: "xs", fontWeight: 500, color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, 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 useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+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, useMatchMedia_1.useMatchMedia)(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,46 @@
+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 {
+    /** Whether the sheet is shown; each time it opens, selection resets to `defaultSelection` and quantity to 1. */
+    isOpen: boolean;
+    /** Fires on dismissal (close button, overlay or Escape); also required to close after `onConfirm`. */
+    onClose: () => void;
+    /** Product name shown beside the thumbnail and used to label the quantity stepper. */
+    title: string;
+    /** Muted line above the title; omitted when absent. */
+    brand?: string;
+    /** Thumbnail beside the title. */
+    media?: ProductMedia;
+    /** Option axes the shopper picks from; each must be chosen before confirming. */
+    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;
+    /** How the sheet opens; defaults to `auto`. */
+    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;
+    /** Overrides for the sheet copy; unspecified strings keep the English defaults. */
+    labels?: Partial<QuickAddSheetLabels>;
+    /** Set on the sheet body wrapper, not on the dialog root. */
+    "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,28 @@
+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: string;
+export declare const TITLE_LINES = 2;
+export declare const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+export declare const FINE_POINTER = "@media (hover: hover) and (pointer: fine)";

package/dist/Components/ProductCard/cardMetrics.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FINE_POINTER = exports.FINE_POINTER_QUERY = exports.TITLE_LINES = exports.MEDIA_RADIUS = exports.CSS_RATIO = exports.DENSITY = void 0;
+const radii_1 = __importDefault(require("../../Theme/tokens/primitives/radii"));
+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 = radii_1.default["2xl"];
+exports.TITLE_LINES = 2;
+exports.FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+exports.FINE_POINTER = `@media ${exports.FINE_POINTER_QUERY}`;

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

@@ -0,0 +1,22 @@
+import type { OptionAxis, ProductMedia, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+import type { ProductCardAction } from "./ProductCardProps";
+export declare const DEFAULT_SWATCH_LIMIT = 3;
+export declare const hasChoice: (axes: OptionAxis[]) => boolean;
+/** The first colour-like axis whose values all carry a swatch; the card draws dots only for this one. */
+export declare const swatchAxisOf: (axes: OptionAxis[]) => OptionAxis | undefined;
+/** The one variant a product without a real choice resolves to, when there is one. */
+export declare const soleVariantOf: (axes: OptionAxis[], variants: ProductVariant[]) => ProductVariant | undefined;
+export declare const isSoldOut: (outOfStock: boolean | undefined, stock: number | undefined, variants: ProductVariant[]) => boolean;
+/** Units left, only when a real count says the product is low; undefined otherwise. */
+export declare const lowStockCount: (stock: number | undefined, sole: ProductVariant | undefined) => number | undefined;
+export declare const deriveAction: (override: ProductCardAction | undefined, soldOut: boolean, axes: OptionAxis[]) => ProductCardAction;
+/** Frames for the active swatch value: its mapped media, else the whole pool. */
+export declare const framesFor: (media: ProductMedia[], mediaIdsByOption: Record<string, string[]> | undefined, axisId: string | undefined, valueId: string | undefined) => ProductMedia[];
+/** Variants that share the picked colour, so the price range follows the dot. */
+export declare const variantsFor: (variants: ProductVariant[], axisId: string | undefined, valueId: string | undefined) => ProductVariant[];
+export declare const rangeOf: (variants: ProductVariant[]) => {
+    min: number;
+    max: number;
+} | undefined;
+export declare const valueSoldOut: (variants: ProductVariant[], axisId: string, valueId: string) => boolean;
+export declare const firstMissingAxis: (axes: OptionAxis[], selection: VariantSelection) => OptionAxis | undefined;