pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Components/ProductCard/ProductCardAction.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Bell, Plus } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { MOTION_EASE, MOTION_MS, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import { FINE_POINTER } from "./cardMetrics.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+const morphIn = keyframes `
+  0% { opacity: 0; transform: scale(0.85); }
+  100% { opacity: 1; transform: scale(1); }
+`;
+const DISC = "2.25rem";
+const BAR_HEIGHT = "2.5rem";
+/** The card's one control: glass circle (or hover bar), notify pill, or the stepper it morphs into. */
+const ProductCardAction = ({ kind, title, labels, placement, inset, hoverBar, quantity, maxQuantity, onPress, onQuantityChange, onRemove, }) => {
+    const { colors } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const onMedia = placement === "media";
+    const place = onMedia
+        ? { position: "absolute", right: inset, bottom: inset, zIndex: 2 }
+        : { position: "relative", zIndex: 2 };
+    if (quantity > 0) {
+        return (_jsx(Box, { "data-control": true, "data-stepper": true, ...place, display: "inline-flex", borderRadius: "full", bg: onMedia ? colors.surfaceRaised : colors.transparent, boxShadow: onMedia ? "sm" : "none", animation: reduced ? undefined : `${morphIn} ${MOTION_MS.enter}ms ${MOTION_EASE}`, children: _jsx(QuantityStepper, { size: "sm", value: quantity, min: 1, max: maxQuantity, removable: true, itemLabel: title, onValueChange: onQuantityChange, onRemove: onRemove }) }));
+    }
+    const isNotify = kind === "notify";
+    const name = isNotify ? labels.notifyMeFor(title) : kind === "options" ? labels.chooseOptions(title) : labels.addToBag(title);
+    const barText = kind === "options" ? labels.chooseOptionsText : labels.addToBagText;
+    const bar = onMedia && hoverBar && !isNotify;
+    const look = onMedia
+        ? { bg: overlayScrim(colors), hoverBg: overlayScrim(colors), color: colors.white }
+        : { bg: colors.background[100], hoverBg: tonalHover(colors), color: colors.header[900] };
+    return (_jsxs(Box, { as: "button", type: "button", "data-control": true, "data-bar": bar || undefined, "data-action": kind, "aria-label": name, onClick: onPress, ...place, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 1.5, h: DISC, minW: DISC, px: isNotify ? 3 : 0, borderRadius: "full", bg: look.bg, color: look.color, cursor: "pointer", transition: transitionFor(["background-color", "opacity", "transform"], "base"), _hover: { bg: look.hoverBg }, _active: reduced ? undefined : { transform: "scale(0.9)" }, sx: {
+            outline: "none",
+            ...(onMedia ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),
+            ...focusVisibleStyles(colors),
+            ...reducedMotionSx({ "&:active": { transform: "none" } }),
+            "&::before": { content: '""', position: "absolute", inset: "-0.25rem" },
+            "& [data-label]": { display: isNotify ? "inline" : "none" },
+            ...(bar
+                ? {
+                    [FINE_POINTER]: {
+                        left: inset,
+                        right: "auto",
+                        width: `calc(100% - 2 * ${inset})`,
+                        height: BAR_HEIGHT,
+                        borderRadius: "lg",
+                        opacity: 0,
+                        transform: reduced ? "none" : "translateY(0.5rem)",
+                        "& [data-label]": { display: "inline" },
+                        "&:focus-visible": { opacity: 1, transform: "none" },
+                    },
+                }
+                : {}),
+        }, children: [isNotify ? _jsx(Bell, { size: 16, "aria-hidden": true }) : _jsx(Plus, { size: 18, strokeWidth: 2.25, "aria-hidden": true }), _jsx(Text, { as: "span", "data-label": true, fontSize: "xs-plus", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", children: isNotify ? labels.notifyMe : barText })] }));
+};
+export default ProductCardAction;

package/dist/esm/Components/ProductCard/ProductCardGrid.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { Box } from "@chakra-ui/react";
+const DEFAULT_COLUMNS = { base: 2, sm: 2, md: 3, lg: 4, xl: 5 };
+const template = (columns) => `repeat(${columns}, minmax(0, 1fr))`;
+/** List of cards on one grid: 12 px columns and 24 px rows on a phone, 24 and 32 from lg (override with `gap`), rows level in height. */
+const ProductCardGrid = ({ children, columns, gap, columnGap, rowGap, "aria-label": ariaLabel, "data-testid": testId }) => {
+    var _a, _b;
+    const cols = { ...DEFAULT_COLUMNS, ...columns };
+    return (_jsx(Box, { as: "ul", role: "list", "aria-label": ariaLabel, "data-testid": testId, listStyleType: "none", m: 0, p: 0, display: "grid", alignItems: "stretch", columnGap: (_a = columnGap !== null && columnGap !== void 0 ? columnGap : gap) !== null && _a !== void 0 ? _a : { base: "0.75rem", lg: "1.5rem" }, rowGap: (_b = rowGap !== null && rowGap !== void 0 ? rowGap : gap) !== null && _b !== void 0 ? _b : { base: "1.5rem", lg: "2rem" }, gridTemplateColumns: {
+            base: template(cols.base),
+            sm: template(cols.sm),
+            md: template(cols.md),
+            lg: template(cols.lg),
+            xl: template(cols.xl),
+        }, children: Children.toArray(children).map((child, index) => (_jsx(Box, { as: "li", display: "flex", minW: 0, children: _jsx(Box, { display: "flex", flexDirection: "column", flex: 1, minW: 0, children: child }) }, index))) }));
+};
+export default ProductCardGrid;

package/dist/esm/Components/ProductCard/ProductCardMedia.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Text } from "@chakra-ui/react";
+import { ImageOff } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { CSS_RATIO, MEDIA_RADIUS } from "./cardMetrics.js";
+const DIMMED_OPACITY = 0.6;
+const Frame = ({ src, srcSet, sizes, alt, fallbackText, quiet = false }) => {
+    const { colors } = useCustomTheme();
+    const ref = useRef(null);
+    const [loaded, setLoaded] = useState(false);
+    const [failed, setFailed] = useState(src === "");
+    useEffect(() => {
+        const el = ref.current;
+        if (el && el.complete && el.naturalWidth > 0)
+            setLoaded(true);
+    }, []);
+    if (failed) {
+        if (quiet)
+            return null;
+        return (_jsxs(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: [_jsx(ImageOff, { size: 24, "aria-hidden": true }), fallbackText ? (_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, children: fallbackText })) : null] }));
+    }
+    return (_jsx(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: transitionFor(["opacity"]), sx: 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 } = useCustomTheme();
+    return (_jsxs(Box, { "data-media": true, "data-ratio": aspectRatio, position: "relative", flexShrink: 0, w: width !== null && width !== void 0 ? width : "100%", sx: { aspectRatio: CSS_RATIO[aspectRatio] }, borderRadius: MEDIA_RADIUS, overflow: "hidden", bg: colors.background[100], boxShadow: selected ? `0 0 0 2px ${colors.header[900]}` : "none", transition: transitionFor(["box-shadow"]), children: [_jsx(Box, { "data-primary": true, position: "absolute", inset: 0, opacity: dimmed ? DIMMED_OPACITY : 1, transition: transitionFor(["transform", "opacity"], "base"), sx: reducedMotionSx(), children: primary ? (_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)) : (_jsx(Frame, { src: "", alt: alt !== null && alt !== void 0 ? alt : title, fallbackText: fallbackText }, "none")) }), hover ? (_jsx(Box, { "data-hover-frame": true, "aria-hidden": true, position: "absolute", inset: 0, opacity: 0, pointerEvents: "none", transition: transitionFor(["opacity"], "base"), sx: reducedMotionSx(), children: _jsx(Frame, { src: hover.src, srcSet: hover.srcSet, sizes: hover.sizes, alt: "", quiet: true }, hover.src) })) : null, children] }));
+};
+export default ProductCardMedia;

package/dist/esm/Components/ProductCard/ProductCardSkeleton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, VisuallyHidden } from "@chakra-ui/react";
+import Skeletons from "../Skeletons/Skeletons.js";
+import { CSS_RATIO, DENSITY, MEDIA_RADIUS, TITLE_LINES } from "./cardMetrics.js";
+/** 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 = DENSITY[density];
+    const horizontal = layout === "list";
+    const rail = layout === "rail";
+    return (_jsxs(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: [_jsx(VisuallyHidden, { children: "Loading product" }), _jsx(Box, { flexShrink: 0, w: horizontal ? m.listMedia : "100%", borderRadius: MEDIA_RADIUS, overflow: "hidden", sx: { aspectRatio: CSS_RATIO[aspectRatio] }, children: _jsx(Skeletons, { type: "skeleton", height: "100%", width: "100%", borderRadius: MEDIA_RADIUS }) }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: m.bodyGap, pt: horizontal ? 0 : m.bodyTop, "aria-hidden": true, children: [_jsx(Skeletons, { type: "skeleton", height: `${m.brand.line - 4}px`, width: "35%" }), _jsxs(Flex, { direction: "column", gap: "4px", minH: `${m.title.line * TITLE_LINES}px`, justify: "center", children: [_jsx(Skeletons, { type: "skeleton", height: `${m.title.line - 6}px`, width: "92%" }), _jsx(Skeletons, { type: "skeleton", height: `${m.title.line - 6}px`, width: "60%" })] }), _jsx(Skeletons, { type: "skeleton", height: "1rem", width: "45%" }), _jsx(Skeletons, { type: "skeleton", height: "1.25rem", width: "55%" })] })] }));
+};
+export default ProductCardSkeleton;

package/dist/esm/Components/ProductCard/ProductCardSwatches.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+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 } = useCustomTheme();
+    const cells = 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 (_jsxs(Flex, { "data-control": true, position: "relative", zIndex: 2, align: "center", minH: TARGET, ml: "-0.375rem", maxW: "100%", children: [_jsx(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 (_jsx(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", ...focusVisibleStyles(colors) }, children: _jsx(Box, { as: "span", display: "inline-flex", p: "2px", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : "transparent", transition: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsx(Box, { as: "span", display: "block", boxSize: `${dot}px`, borderRadius: "full", backgroundColor: value.swatch, opacity: soldOut ? UNAVAILABLE_OPACITY : 1, boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${colors.boxborder[200]}` }) }) }, value.id));
+                }) }), rest > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { as: "span", "aria-hidden": true, ml: 1, fontSize: "xs", fontWeight: 500, color: colors.textMuted, sx: NUMERIC_TEXT, children: ["+", rest] }), _jsx(VisuallyHidden, { children: labels.moreColours(rest) })] })) : null] }));
+};
+export default ProductCardSwatches;

package/dist/esm/Components/ProductCard/QuickAddSheet.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+import Drawer, { DrawerBody, DrawerFooter, DrawerHeader } from "../Drawer/Drawer.js";
+import Modal, { ModalBody, ModalFooter } from "../Modal/Modal.js";
+import PriceBlock from "../PriceBlock/PriceBlock.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import VariantSelector from "../VariantSelector/VariantSelector.js";
+import { findVariant } from "../Commerce/commerceVariants.js";
+import { rangeOf, firstMissingAxis } from "./productCardModel.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
+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 } = useCustomTheme();
+    const desktop = useMatchMedia(DESKTOP_QUERY);
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const [selection, setSelection] = useState(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
+    const [quantity, setQuantity] = useState(1);
+    const [error, setError] = useState();
+    const [wasOpen, setWasOpen] = 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 = findVariant(axes, variants, selection);
+    const range = 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(formatPrice(variant.price * quantity, fmt)) : copy.confirm;
+    const onSelect = (next) => {
+        setSelection(next);
+        setError(undefined);
+        const nextVariant = 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 = 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 = (_jsxs(Flex, { align: "center", gap: 3, mb: 4, children: [media ? (_jsx(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, _jsxs(Flex, { direction: "column", gap: 0.5, minW: 0, children: [brand ? (_jsx(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: brand })) : null, _jsx(Text, { fontSize: "sm", fontWeight: 500, color: colors.header[900], noOfLines: 2, children: title }), _jsx(PriceBlock, { 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 = (_jsxs(Flex, { direction: "column", gap: 5, "data-testid": testId, children: [summary, _jsx(VariantSelector, { axes: axes, variants: variants, value: selection, onValueChange: onSelect, error: error, showSelectedLabel: true, showLowStock: true }), _jsxs(Flex, { align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: copy.quantity }), _jsx(QuantityStepper, { value: quantity, min: 1, max: maxQuantity, onValueChange: setQuantity, itemLabel: title })] })] }));
+    const action = (_jsx(Button, { size: "lg", width: "100%", onClick: confirm, children: confirmLabel }));
+    const asModal = presentation === "modal" || (presentation === "auto" && desktop);
+    if (asModal) {
+        return (_jsxs(Modal, { size: "md", isOpen: isOpen, onClose: onClose, isCentered: true, title: copy.heading, children: [_jsx(ModalBody, { children: body }), _jsx(ModalFooter, { children: action })] }));
+    }
+    return (_jsxs(Drawer, { isOpen: isOpen, onClose: onClose, placement: "bottom", size: "md", contentProps: { maxW: "100%", w: "100%", maxH: "90vh", borderTopRadius: "2xl", overflow: "auto", ...drawerContentProps }, children: [_jsx(DrawerHeader, { children: copy.heading }), _jsx(DrawerBody, { children: body }), _jsx(DrawerFooter, { children: action })] }));
+};
+export default QuickAddSheet;

package/dist/esm/Components/ProductCard/QuickAddSheetProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/ProductCard/cardLabels.js

@@ -0,0 +1,13 @@
+export const 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/esm/Components/ProductCard/cardMetrics.js

@@ -0,0 +1,54 @@
+import radii from "../../Theme/tokens/primitives/radii.js";
+export const 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",
+    },
+};
+export const CSS_RATIO = {
+    "4/5": "4 / 5",
+    "1/1": "1 / 1",
+    "3/4": "3 / 4",
+};
+export const MEDIA_RADIUS = radii["2xl"];
+export const TITLE_LINES = 2;
+export const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+export const FINE_POINTER = `@media ${FINE_POINTER_QUERY}`;

package/dist/esm/Components/ProductCard/productCardModel.js

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