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

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 }];

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;

package/dist/Components/ProductCard/productCardModel.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.firstMissingAxis = exports.valueSoldOut = exports.rangeOf = exports.variantsFor = exports.framesFor = exports.deriveAction = exports.lowStockCount = exports.isSoldOut = exports.soleVariantOf = exports.swatchAxisOf = exports.hasChoice = exports.DEFAULT_SWATCH_LIMIT = void 0;
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+exports.DEFAULT_SWATCH_LIMIT = 3;
+const hasChoice = (axes) => axes.some((axis) => axis.values.length > 1);
+exports.hasChoice = hasChoice;
+/** The first colour-like axis whose values all carry a swatch; the card draws dots only for this one. */
+const swatchAxisOf = (axes) => axes.find((axis) => (axis.type === "swatch" || axis.type === "image-tile") &&
+    axis.values.length > 1 &&
+    axis.values.every((value) => value.swatch));
+exports.swatchAxisOf = swatchAxisOf;
+/** The one variant a product without a real choice resolves to, when there is one. */
+const soleVariantOf = (axes, variants) => {
+    var _a;
+    if ((0, exports.hasChoice)(axes))
+        return undefined;
+    const selection = {};
+    axes.forEach((axis) => {
+        if (axis.values[0])
+            selection[axis.id] = axis.values[0].id;
+    });
+    return (_a = (0, commerceVariants_1.findVariant)(axes, variants, selection)) !== null && _a !== void 0 ? _a : (axes.length === 0 ? variants[0] : undefined);
+};
+exports.soleVariantOf = soleVariantOf;
+const isSoldOut = (outOfStock, stock, variants) => {
+    if (outOfStock !== undefined)
+        return outOfStock;
+    if (stock !== undefined)
+        return stock <= 0;
+    return variants.length > 0 && variants.every((variant) => (0, commerceVariants_1.stockState)(variant) === "out-of-stock");
+};
+exports.isSoldOut = isSoldOut;
+/** Units left, only when a real count says the product is low; undefined otherwise. */
+const lowStockCount = (stock, sole) => {
+    const count = stock !== null && stock !== void 0 ? stock : sole === null || sole === void 0 ? void 0 : sole.stock;
+    if (count === undefined)
+        return undefined;
+    const state = (0, commerceVariants_1.stockState)({ stock: count, backorder: sole === null || sole === void 0 ? void 0 : sole.backorder });
+    return state === "low-stock" ? count : undefined;
+};
+exports.lowStockCount = lowStockCount;
+const deriveAction = (override, soldOut, axes) => {
+    if (override)
+        return override;
+    if (soldOut)
+        return "notify";
+    return (0, exports.hasChoice)(axes) ? "options" : "add";
+};
+exports.deriveAction = deriveAction;
+const optionKey = (axisId, valueId) => `${axisId}:${valueId}`;
+/** Frames for the active swatch value: its mapped media, else the whole pool. */
+const framesFor = (media, mediaIdsByOption, axisId, valueId) => {
+    if (!axisId || !valueId || !mediaIdsByOption)
+        return media;
+    const ids = mediaIdsByOption[optionKey(axisId, valueId)];
+    if (!ids)
+        return media;
+    const frames = ids.map((id) => media.find((item) => item.id === id)).filter((item) => !!item);
+    return frames.length > 0 ? frames : media;
+};
+exports.framesFor = framesFor;
+/** Variants that share the picked colour, so the price range follows the dot. */
+const variantsFor = (variants, axisId, valueId) => {
+    if (!axisId || !valueId)
+        return variants;
+    const scoped = variants.filter((variant) => variant.options[axisId] === valueId);
+    return scoped.length > 0 ? scoped : variants;
+};
+exports.variantsFor = variantsFor;
+const rangeOf = (variants) => {
+    const range = (0, commerceVariants_1.priceRange)(variants);
+    return range && range.min !== range.max ? range : undefined;
+};
+exports.rangeOf = rangeOf;
+const valueSoldOut = (variants, axisId, valueId) => variants.length > 0 && !(0, commerceVariants_1.isOptionAvailable)(variants, {}, axisId, valueId);
+exports.valueSoldOut = valueSoldOut;
+const firstMissingAxis = (axes, selection) => axes.find((axis) => selection[axis.id] === undefined);
+exports.firstMissingAxis = firstMissingAxis;

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

@@ -0,0 +1,2 @@
+/** `matches` for a media query; false where matchMedia does not exist (SSR, jsdom). */
+export declare const useMinWidth: (query: string) => boolean;

package/dist/Components/ProductCard/useMinWidth.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMinWidth = void 0;
+const react_1 = require("react");
+const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+/** `matches` for a media query; false where matchMedia does not exist (SSR, jsdom). */
+const useMinWidth = (query) => {
+    const [matches, setMatches] = (0, react_1.useState)(() => (supported() ? window.matchMedia(query).matches : false));
+    (0, react_1.useEffect)(() => {
+        if (!supported())
+            return undefined;
+        const list = window.matchMedia(query);
+        const onChange = () => setMatches(list.matches);
+        onChange();
+        list.addEventListener("change", onChange);
+        return () => list.removeEventListener("change", onChange);
+    }, [query]);
+    return matches;
+};
+exports.useMinWidth = useMinWidth;

package/dist/Components/ProductDetails/ProductDetails.d.ts

@@ -1,3 +1,4 @@
-import { ProductDetailsProps } from "./ProductDetailsProps";
-declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable, displayRating, }: ProductDetailsProps) => import("react/jsx-runtime").JSX.Element;
+import type { ProductDetailsProps } from "./ProductDetailsProps";
+/** Product page that wires one selection to price, stock, gallery frames and the primary action; every region has a slot. */
+declare const ProductDetails: ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity, onQuantityChange, maxQuantity, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading, labels: labelOverrides, currency, locale, "data-testid": testId, }: ProductDetailsProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductDetails;