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

package/dist/Components/MediaGallery/mediaGalleryModel.d.ts

@@ -0,0 +1,22 @@
+import type { ProductMedia } from "../Commerce/commerceTypes";
+export type FrameKind = "image" | "video" | "embed";
+export type Embed = {
+    provider: "youtube" | "vimeo";
+    id: string;
+    src: string;
+    poster?: string;
+};
+/** Only whitelisted ids reach an iframe `src`, so a product feed can never inject an arbitrary frame URL. */
+export declare const parseEmbed: (url: string) => Embed | undefined;
+export declare const frameKind: (media: ProductMedia) => FrameKind;
+/** Still image to show for a frame before it plays, if the data offers one. */
+export declare const framePoster: (media: ProductMedia) => string | undefined;
+export declare const frameThumb: (media: ProductMedia) => string | undefined;
+/** `activeMediaIds` order wins; unknown ids are dropped; an empty result falls back to every frame. */
+export declare const resolveFrames: (media: ProductMedia[], activeMediaIds?: string[]) => ProductMedia[];
+export declare const clampIndex: (index: number, count: number) => number;
+/** Where a navigation key lands, or undefined when the key is not navigation. */
+export declare const indexForKey: (key: string, index: number, count: number) => number | undefined;
+/** Arrow keys belong to a focused video, iframe or field, never to the carousel. */
+export declare const keyBelongsToTarget: (target: EventTarget | null) => boolean;
+export declare const frameSignature: (frames: ProductMedia[]) => string;

package/dist/Components/MediaGallery/mediaGalleryModel.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.frameSignature = exports.keyBelongsToTarget = exports.indexForKey = exports.clampIndex = exports.resolveFrames = exports.frameThumb = exports.framePoster = exports.frameKind = exports.parseEmbed = void 0;
+const YOUTUBE = [
+    /youtube\.com\/watch\?[^#]*v=([A-Za-z0-9_-]{6,})/i,
+    /youtube\.com\/(?:embed|shorts|live)\/([A-Za-z0-9_-]{6,})/i,
+    /youtu\.be\/([A-Za-z0-9_-]{6,})/i,
+];
+const VIMEO = [/vimeo\.com\/(?:video\/)?(\d+)/i];
+const firstMatch = (patterns, url) => {
+    for (const pattern of patterns) {
+        const found = pattern.exec(url);
+        if (found)
+            return found[1];
+    }
+    return undefined;
+};
+/** Only whitelisted ids reach an iframe `src`, so a product feed can never inject an arbitrary frame URL. */
+const parseEmbed = (url) => {
+    const youtube = firstMatch(YOUTUBE, url);
+    if (youtube) {
+        return {
+            provider: "youtube",
+            id: youtube,
+            src: `https://www.youtube.com/embed/${youtube}?rel=0&autoplay=1`,
+            poster: `https://img.youtube.com/vi/${youtube}/hqdefault.jpg`,
+        };
+    }
+    const vimeo = firstMatch(VIMEO, url);
+    if (vimeo)
+        return { provider: "vimeo", id: vimeo, src: `https://player.vimeo.com/video/${vimeo}?autoplay=1` };
+    return undefined;
+};
+exports.parseEmbed = parseEmbed;
+const frameKind = (media) => {
+    if (media.type !== "video")
+        return "image";
+    return (0, exports.parseEmbed)(media.src) ? "embed" : "video";
+};
+exports.frameKind = frameKind;
+/** Still image to show for a frame before it plays, if the data offers one. */
+const framePoster = (media) => {
+    var _a, _b;
+    if (media.type !== "video")
+        return media.src;
+    return (_a = media.poster) !== null && _a !== void 0 ? _a : (_b = (0, exports.parseEmbed)(media.src)) === null || _b === void 0 ? void 0 : _b.poster;
+};
+exports.framePoster = framePoster;
+const frameThumb = (media) => { var _a; return (_a = media.thumb) !== null && _a !== void 0 ? _a : (media.type === "video" ? (0, exports.framePoster)(media) : media.src); };
+exports.frameThumb = frameThumb;
+/** `activeMediaIds` order wins; unknown ids are dropped; an empty result falls back to every frame. */
+const resolveFrames = (media, activeMediaIds) => {
+    if (!activeMediaIds)
+        return media;
+    const byId = new Map(media.map((item) => [item.id, item]));
+    const picked = activeMediaIds.flatMap((id) => {
+        const found = byId.get(id);
+        return found ? [found] : [];
+    });
+    return picked.length > 0 ? picked : media;
+};
+exports.resolveFrames = resolveFrames;
+const clampIndex = (index, count) => count <= 0 ? 0 : Math.min(Math.max(Math.trunc(index) || 0, 0), count - 1);
+exports.clampIndex = clampIndex;
+/** Where a navigation key lands, or undefined when the key is not navigation. */
+const indexForKey = (key, index, count) => {
+    if (key === "ArrowLeft")
+        return (0, exports.clampIndex)(index - 1, count);
+    if (key === "ArrowRight")
+        return (0, exports.clampIndex)(index + 1, count);
+    if (key === "Home")
+        return 0;
+    if (key === "End")
+        return (0, exports.clampIndex)(count - 1, count);
+    return undefined;
+};
+exports.indexForKey = indexForKey;
+const OWN_KEYS = "video, iframe, input, textarea, select, [contenteditable='true']";
+/** Arrow keys belong to a focused video, iframe or field, never to the carousel. */
+const keyBelongsToTarget = (target) => target instanceof Element && target.closest(OWN_KEYS) !== null;
+exports.keyBelongsToTarget = keyBelongsToTarget;
+const frameSignature = (frames) => frames.map((frame) => frame.id).join("|");
+exports.frameSignature = frameSignature;

package/dist/Components/MediaGallery/motion.d.ts

@@ -0,0 +1,5 @@
+/** Frame change: one slide per gesture, `transform` only. */
+export declare const SLIDE_MS = 320;
+/** Colour-linked frame set swap and the lightbox frame change. */
+export declare const CROSSFADE_MS = 160;
+export declare const fadeIn: (ms?: number) => string;

package/dist/Components/MediaGallery/motion.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fadeIn = exports.CROSSFADE_MS = exports.SLIDE_MS = void 0;
+const react_1 = require("@emotion/react");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+/** Frame change: one slide per gesture, `transform` only. */
+exports.SLIDE_MS = 320;
+/** Colour-linked frame set swap and the lightbox frame change. */
+exports.CROSSFADE_MS = 160;
+const fade = (0, react_1.keyframes) `from { opacity: 0; } to { opacity: 1; }`;
+const fadeIn = (ms = exports.CROSSFADE_MS) => `${fade} ${ms}ms ${motion_1.MOTION_EASE} both`;
+exports.fadeIn = fadeIn;

package/dist/Components/MediaGallery/useMatchMedia.d.ts

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

package/dist/Components/MediaGallery/useMatchMedia.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMatchMedia = void 0;
+const react_1 = require("react");
+const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+/** `matches` for a media query, or `fallback` where matchMedia does not exist (SSR, jsdom). */
+const useMatchMedia = (query, fallback) => {
+    const [matches, setMatches] = (0, react_1.useState)(() => (supported() ? window.matchMedia(query).matches : fallback));
+    (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.useMatchMedia = useMatchMedia;

package/dist/Components/OffersList/OffersList.d.ts

@@ -0,0 +1,4 @@
+import type { OffersListProps } from "./OffersListProps";
+/** One collapsed tonal row ("Offers (3) · Best: ...") that opens into the full list with copy-code buttons; renders nothing for no offers. */
+declare const OffersList: ({ offers, bestOfferId, isOpen, defaultOpen, onOpenChange, onCopy, labels, "data-testid": testId, }: OffersListProps) => import("react/jsx-runtime").JSX.Element | null;
+export default OffersList;

package/dist/Components/OffersList/OffersList.js

@@ -0,0 +1,83 @@
+"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 focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const COPIED_MS = 1600;
+const DEFAULT_LABELS = {
+    summary: (count, best) => `Offers (${count}) · Best: ${best}`,
+    summaryCount: (count) => `Offers (${count})`,
+    copy: "Copy",
+    copied: "Copied",
+    copyCode: (code) => `Copy code ${code}`,
+    copiedMessage: (code) => `Code ${code} copied`,
+};
+const writeToClipboard = (code) => {
+    var _a;
+    try {
+        const pending = (_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(code);
+        pending === null || pending === void 0 ? void 0 : pending.catch(() => undefined);
+    }
+    catch {
+        return;
+    }
+};
+/** One collapsed tonal row ("Offers (3) · Best: ...") that opens into the full list with copy-code buttons; renders nothing for no offers. */
+const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenChange, onCopy, labels, "data-testid": testId, }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const panelId = (0, react_1.useId)();
+    const [innerOpen, setInnerOpen] = (0, react_1.useState)(defaultOpen);
+    const [copiedId, setCopiedId] = (0, react_1.useState)(null);
+    const [message, setMessage] = (0, react_1.useState)("");
+    const timer = (0, react_1.useRef)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const open = isOpen !== null && isOpen !== void 0 ? isOpen : innerOpen;
+    (0, react_1.useEffect)(() => () => clearTimeout(timer.current), []);
+    if (offers.length === 0)
+        return null;
+    const best = (_a = offers.find((offer) => offer.id === bestOfferId)) !== null && _a !== void 0 ? _a : offers[0];
+    const summary = offers.length === 1
+        ? `${best.title} · ${best.detail}`
+        : best.title
+            ? copy.summary(offers.length, best.title)
+            : copy.summaryCount(offers.length);
+    const toggle = () => {
+        const next = !open;
+        if (isOpen === undefined)
+            setInnerOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    };
+    const copyCode = (offer, code) => {
+        writeToClipboard(code);
+        setCopiedId(offer.id);
+        setMessage(copy.copiedMessage(code));
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            setCopiedId(null);
+            setMessage("");
+        }, COPIED_MS);
+        onCopy === null || onCopy === void 0 ? void 0 : onCopy(offer);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { bg: colors.background[100], borderRadius: "xl", overflow: "hidden", "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", w: "100%", minH: "3rem", px: 4, py: 3, align: "center", gap: 3, textAlign: "left", borderRadius: "xl", color: colors.header[900], "aria-expanded": open, "aria-controls": panelId, onClick: toggle, transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Tag, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flex: "1", minW: 0, fontSize: "sm", fontWeight: 600, noOfLines: open ? undefined : 1, children: summary }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.textMuted, transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: panelId, hidden: !open, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "ul", listStyleType: "none", m: 0, px: 4, pb: 2, children: offers.map((offer) => {
+                        const copied = copiedId === offer.id;
+                        const { code } = offer;
+                        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "li", position: "relative", align: "center", justify: "space-between", gap: 3, py: 3, sx: {
+                                "&:not(:first-of-type)::before": {
+                                    content: '""',
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    height: "1px",
+                                    background: colors.background[200],
+                                },
+                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: { fontVariantNumeric: "tabular-nums" }, children: code }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
+                    }) }) }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { "aria-live": "polite", children: message })] }));
+};
+exports.default = OffersList;

package/dist/Components/OffersList/OffersListProps.d.ts

@@ -0,0 +1,34 @@
+/** One offer; `code` adds a copy button. */
+export interface Offer {
+    id: string;
+    title: string;
+    detail: string;
+    code?: string;
+}
+/** Every string the list renders; override all of them for another language. */
+export interface OffersListLabels {
+    /** Collapsed summary, given the offer count and the best offer's title. */
+    summary: (count: number, best: string) => string;
+    /** Collapsed summary when there is no best offer to name. */
+    summaryCount: (count: number) => string;
+    copy: string;
+    copied: string;
+    /** Accessible name of a copy button, given the code. */
+    copyCode: (code: string) => string;
+    /** Screen-reader announcement after a copy, given the code. */
+    copiedMessage: (code: string) => string;
+}
+/** One collapsed row ("Offers (3) · Best: ...") that opens into the full list with copy-code buttons; renders nothing for no offers. */
+export interface OffersListProps {
+    offers: Offer[];
+    /** Offer named in the collapsed summary; defaults to the first. */
+    bestOfferId?: string;
+    /** Controlled open state; pair with `onOpenChange`. */
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Fires after a code is copied, with the offer. */
+    onCopy?: (offer: Offer) => void;
+    labels?: Partial<OffersListLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/OffersList/OffersListProps.js

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

package/dist/Components/OptionChip/OptionChip.d.ts

@@ -0,0 +1,4 @@
+import type { OptionChipProps } from "./OptionChipProps";
+/** The one selectable option control: text chip, colour swatch, image tile or pack. Parent group supplies the radiogroup. */
+declare const OptionChip: import("react").ForwardRefExoticComponent<OptionChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default OptionChip;

package/dist/Components/OptionChip/OptionChip.js

@@ -0,0 +1,97 @@
+"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 focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const optionInk_1 = require("./optionInk");
+const CHIP_HEIGHT = { md: "2.75rem", lg: "3.25rem" };
+const PACK_HEIGHT = { md: "3.5rem", lg: "4rem" };
+const DOT = { md: "1.75rem", lg: "2rem" };
+const TILE = { md: { w: "4rem", h: "5rem" }, lg: { w: "4.5rem", h: "5.625rem" } };
+const DIM_OPACITY = 0.5;
+const band = (color, half) => `linear-gradient(to top right, transparent calc(50% - ${half}), ${color} calc(50% - ${half}), ${color} calc(50% + ${half}), transparent calc(50% + ${half}))`;
+const strikeImage = (ink, halo) => `${band(ink, "0.5px")}, ${band(halo, "1.5px")}`;
+const strikeLayer = (image) => ({
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit",
+    pointerEvents: "none",
+    backgroundImage: image,
+});
+const CheckGrow = ({ selected }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", alignItems: "center", flexShrink: 0, overflow: "hidden", w: selected ? "1.125rem" : 0, opacity: selected ? 1 : 0, transition: (0, motion_1.transitionFor)(["width", "opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2.5 }) }));
+const errorRing = (colors) => `inset 0 0 0 1px ${colors.semanticText.error}`;
+/** The one selectable option control: text chip, colour swatch, image tile or pack. Parent group supplies the radiogroup. */
+const OptionChip = (0, react_1.forwardRef)(function OptionChip({ label, selected = false, disabled = false, unavailable = false, invalid = false, variant = "chip", swatch, image, hint, showLabel = false, size = "md", fullWidth = false, onSelect, onFocus, tabIndex, "data-testid": testId, }, ref) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { rest, selected: picked } = (0, optionInk_1.optionInk)(colors);
+    const tone = selected ? picked : rest;
+    const dimmed = unavailable || disabled;
+    const accessibleName = [label, hint, unavailable ? "unavailable" : null].filter(Boolean).join(", ");
+    const strikeBackground = strikeImage(colors.text[800], colors.background[50]);
+    const base = {
+        ref,
+        as: "button",
+        type: "button",
+        role: "radio",
+        "aria-checked": selected,
+        "aria-disabled": unavailable || undefined,
+        "aria-label": accessibleName,
+        "data-testid": testId,
+        disabled,
+        tabIndex,
+        onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(),
+        onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(),
+        position: "relative",
+        flexShrink: 0,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: dimmed ? DIM_OPACITY : 1,
+        w: fullWidth ? "100%" : undefined,
+        transition: (0, motion_1.transitionFor)(["background-color", "color", "box-shadow", "border-color", "transform"]),
+        _active: dimmed ? undefined : { transform: "scale(0.97)" },
+    };
+    const motion = {
+        ...(0, focusRing_styles_1.focusVisibleStyles)(colors),
+        ...(0, motion_2.reducedMotionSx)({ "&:active": { transform: "none" } }),
+    };
+    if (variant === "swatch") {
+        const dot = DOT[size];
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...base, display: "inline-flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "0.25rem", minW: CHIP_HEIGHT[size], minH: CHIP_HEIGHT[size], borderRadius: "xl", bg: "transparent", color: colors.text[800], title: showLabel ? undefined : label, sx: {
+                ...motion,
+                "&:hover:not(:disabled) [data-ring]:not([data-selected])": { borderColor: colors.boxborder[500] },
+            }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "data-ring": true, "data-selected": selected ? "" : undefined, display: "inline-flex", p: "0.125rem", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : invalid ? colors.semanticText.error : "transparent", transition: (0, motion_1.transitionFor)(["border-color"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", position: "relative", display: "block", boxSize: dot, borderRadius: "full", backgroundColor: swatch !== null && swatch !== void 0 ? swatch : colors.background[200], boxShadow: `inset 0 0 0 1px ${colors.boxborder[200]}`, sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined }) }), showLabel ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", fontWeight: selected ? 600 : 500, color: selected ? colors.header[900] : rest.ink, lineHeight: "short", children: label })) : null] }));
+    }
+    if (variant === "image-tile") {
+        const tile = TILE[size];
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...base, display: "inline-flex", flexDirection: "column", alignItems: "center", gap: "0.375rem", bg: "transparent", color: rest.ink, w: fullWidth ? "100%" : undefined, maxW: `calc(${tile.w} + 0.5rem)`, sx: motion, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", p: "0.125rem", borderWidth: "2px", borderStyle: "solid", borderRadius: "calc(0.75rem + 4px)", borderColor: selected ? colors.header[900] : invalid ? colors.semanticText.error : "transparent", transition: (0, motion_1.transitionFor)(["border-color"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", position: "relative", display: "block", w: tile.w, h: tile.h, borderRadius: "xl", overflow: "hidden", backgroundColor: swatch !== null && swatch !== void 0 ? swatch : colors.background[100], sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined, children: [image ? (0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", src: image, alt: "", loading: "lazy", w: "100%", h: "100%", objectFit: "cover", display: "block" }) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, position: "absolute", top: "0.25rem", right: "0.25rem", display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "1.125rem", borderRadius: "full", bg: picked.fill, color: picked.ink, opacity: selected ? 1 : 0, transform: selected ? "scale(1)" : "scale(0.6)", transition: (0, motion_1.transitionFor)(["opacity", "transform"], "base"), sx: (0, motion_2.reducedMotionSx)({ transform: "none" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", maxW: "100%", fontSize: "xs", fontWeight: selected ? 600 : 500, lineHeight: "short", textAlign: "center", noOfLines: 2, wordBreak: "break-word", children: label }), hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", lineHeight: "short", color: rest.hint, noOfLines: 1, children: hint })) : null] }));
+    }
+    const isPack = variant === "pack";
+    const surface = {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minW: isPack ? "5.75rem" : "3.5rem",
+        h: isPack ? PACK_HEIGHT[size] : CHIP_HEIGHT[size],
+        px: isPack ? 3 : 4,
+        borderRadius: "xl",
+        bg: tone.fill,
+        color: tone.ink,
+        fontSize: size === "lg" ? "md" : "sm",
+        fontWeight: 600,
+        lineHeight: "short",
+        whiteSpace: "nowrap",
+        boxShadow: invalid && !selected ? errorRing(colors) : "none",
+    };
+    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckGrow, { selected: selected }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: label })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...base, ...surface, sx: {
+            ...motion,
+            "&:hover:not(:disabled):not([aria-checked=true])": unavailable ? undefined : { backgroundColor: tone.hoverFill },
+            ...(unavailable ? { "&::after": { content: '""', ...strikeLayer(band("currentColor", "0.5px")) } } : {}),
+        }, children: [content, isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", mt: "0.125rem", fontSize: "0.6875rem", fontWeight: 500, color: tone.hint, sx: { fontVariantNumeric: "tabular-nums" }, children: hint })) : null, !isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "0.0625rem", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 1px ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
+});
+exports.default = OptionChip;

package/dist/Components/OptionChip/OptionChipProps.d.ts

@@ -0,0 +1,33 @@
+/** Which control shape renders: a text chip, a colour dot, an image tile, or a label-plus-unit-price pack. */
+export type OptionChipVariant = "chip" | "swatch" | "image-tile" | "pack";
+/** md is a 44px hit; lg is 52px. */
+export type OptionChipSize = "md" | "lg";
+/** One selectable option. Renders role="radio"; the parent supplies the radiogroup and arrow keys. */
+export interface OptionChipProps {
+    /** Visible text for chip, pack and image-tile; the accessible name for a swatch. */
+    label: string;
+    selected?: boolean;
+    /** Native disabled: dimmed, not focusable, onSelect never fires. */
+    disabled?: boolean;
+    /** Struck through and dimmed but still focusable and announced as unavailable; onSelect still fires so a parent can re-derive. */
+    unavailable?: boolean;
+    /** Draws a 1px error ring; use when the group needs a pick. */
+    invalid?: boolean;
+    variant?: OptionChipVariant;
+    /** Any CSS colour from product data; the one place a literal colour is allowed. */
+    swatch?: string;
+    /** Image source for an image-tile. */
+    image?: string;
+    /** Secondary text: a corner badge on a chip ("3 left"), a second line on a pack or tile. */
+    hint?: string;
+    /** Swatch only: print the colour name under the dot. */
+    showLabel?: boolean;
+    size?: OptionChipSize;
+    /** Stretch to the parent's width, for grid layouts. */
+    fullWidth?: boolean;
+    onSelect?: () => void;
+    onFocus?: () => void;
+    /** Roving tabindex from the parent group; omit for a standalone chip. */
+    tabIndex?: number;
+    "data-testid"?: string;
+}

package/dist/Components/OptionChip/OptionChipProps.js

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

package/dist/Components/OptionChip/optionInk.d.ts

@@ -0,0 +1,12 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export type OptionInk = {
+    fill: string;
+    hoverFill: string;
+    ink: string;
+    hint: string;
+};
+/** Resting and selected fills for an option; selection is the neutral ink fill, never the brand. */
+export declare const optionInk: (colors: PaletteProps) => {
+    rest: OptionInk;
+    selected: OptionInk;
+};

package/dist/Components/OptionChip/optionInk.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionInk = void 0;
+const color_1 = require("../../Theme/tokens/builders/color");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/** Resting and selected fills for an option; selection is the neutral ink fill, never the brand. */
+const optionInk = (colors) => {
+    const selectedFill = colors.header[900];
+    const selectedInk = (0, accentText_1.onFilled)(selectedFill, colors.white, colors.black);
+    const rest = {
+        fill: colors.background[300],
+        hoverFill: colors.background[400],
+        ink: colors.text[800],
+        hint: (0, outlineRung_1.liftToContrast)(colors.text[700], colors.background[400], accentText_1.AA_NORMAL_TEXT),
+    };
+    const selected = {
+        fill: selectedFill,
+        hoverFill: selectedFill,
+        ink: selectedInk,
+        hint: (0, outlineRung_1.liftToContrast)((0, color_1.mix)(selectedInk, selectedFill, 0.2), selectedFill, accentText_1.AA_NORMAL_TEXT),
+    };
+    return { rest, selected };
+};
+exports.optionInk = optionInk;

package/dist/Components/OrderStatusTimeline/OrderStatusTimeline.d.ts

@@ -0,0 +1,4 @@
+import type { OrderStatusTimelineProps } from "./OrderStatusTimelineProps";
+/** Order tracking steps: filled check, ringed dot and hollow ring markers, each backed by spoken state text. */
+declare const OrderStatusTimeline: ({ steps, orientation, labels, "aria-label": ariaLabel, "data-testid": testId, }: OrderStatusTimelineProps) => import("react/jsx-runtime").JSX.Element;
+export default OrderStatusTimeline;

package/dist/Components/OrderStatusTimeline/OrderStatusTimeline.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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 accentText_1 = require("../../Theme/tokens/builders/accentText");
+const DEFAULT_LABELS = { done: "Completed", current: "In progress", upcoming: "Upcoming" };
+const MARKER = "1.5rem";
+const RULE = "2px";
+const Marker = ({ state, colors }) => {
+    const ink = colors.header[900];
+    const base = {
+        as: "span",
+        "aria-hidden": true,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSize: MARKER,
+        flexShrink: 0,
+        borderRadius: "full",
+        transition: (0, motion_1.transitionFor)(["background-color", "box-shadow"]),
+        sx: (0, motion_2.reducedMotionSx)(),
+    };
+    if (state === "done") {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...base, bg: ink, color: (0, accentText_1.onFilled)(ink, colors.white, colors.black), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 3 }) }));
+    }
+    if (state === "current") {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 2px ${ink}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", boxSize: "0.5rem", borderRadius: "full", bg: ink }) }));
+    }
+    return (0, jsx_runtime_1.jsx)(react_1.Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 1.5px ${colors.textMuted}` });
+};
+const StepText = ({ step, copy, align, colors, }) => {
+    const active = step.state !== "upcoming";
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: align, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: active ? 700 : 500, lineHeight: 1.4, color: active ? colors.header[900] : colors.textMuted, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy[step.state], ": "] }), step.label] }), step.date && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: step.date })), step.detail && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: step.detail }))] }));
+};
+/** Order tracking steps: filled check, ringed dot and hollow ring markers, each backed by spoken state text. */
+const OrderStatusTimeline = ({ steps, orientation = "vertical", labels, "aria-label": ariaLabel = "Order status", "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const filledRule = colors.header[900];
+    const idleRule = colors.boxborder[300];
+    if (orientation === "horizontal") {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "ol", "aria-label": ariaLabel, display: "grid", gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))`, m: 0, p: 0, listStyleType: "none", "data-testid": testId, children: steps.map((step, i) => {
+                const before = i > 0 && steps[i - 1].state === "done";
+                const after = step.state === "done";
+                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", direction: "column", align: "center", gap: 2, px: 1, "aria-current": step.state === "current" ? "step" : undefined, "data-state": step.state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, h: RULE, bg: i === 0 ? "transparent" : before ? filledRule : idleRule }), (0, jsx_runtime_1.jsx)(Marker, { state: step.state, colors: colors }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, h: RULE, bg: i === steps.length - 1 ? "transparent" : after ? filledRule : idleRule })] }), (0, jsx_runtime_1.jsx)(StepText, { step: step, copy: copy, align: "center", colors: colors })] }, step.id));
+            }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "ol", "aria-label": ariaLabel, m: 0, p: 0, listStyleType: "none", "data-testid": testId, children: steps.map((step, i) => {
+            const last = i === steps.length - 1;
+            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", gap: 3, "aria-current": step.state === "current" ? "step" : undefined, "data-state": step.state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(Marker, { state: step.state, colors: colors }), !last && (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, w: RULE, minH: "1.5rem", my: 1, bg: step.state === "done" ? filledRule : idleRule })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { pb: last ? 0 : 4, pt: "0.125rem", flex: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(StepText, { step: step, copy: copy, align: "left", colors: colors }) })] }, step.id));
+        }) }));
+};
+exports.default = OrderStatusTimeline;

package/dist/Components/OrderStatusTimeline/OrderStatusTimelineProps.d.ts

@@ -0,0 +1,29 @@
+/** Where a step is: finished, happening now, or still ahead. */
+export type OrderStepState = "done" | "current" | "upcoming";
+/** One stage of an order, e.g. Placed, Packed, Shipped, Out for delivery, Delivered. */
+export interface OrderStatusStep {
+    id: string;
+    label: string;
+    /** Muted line under the label, e.g. "Bengaluru hub". */
+    detail?: string;
+    /** Pre-formatted date or time, e.g. "Tue, 7 Oct"; for an upcoming step this is the expected date. */
+    date?: string;
+    state: OrderStepState;
+}
+/** Vertical for a track page, horizontal for a compact strip on the order-success screen. */
+export type OrderStatusOrientation = "vertical" | "horizontal";
+/** Words read out for each state, so status never rides on the marker alone. */
+export interface OrderStatusTimelineLabels {
+    done: string;
+    current: string;
+    upcoming: string;
+}
+/** Order tracking steps as an ordered list; markers pair an icon shape with screen-reader text for each state. */
+export interface OrderStatusTimelineProps {
+    steps: OrderStatusStep[];
+    orientation?: OrderStatusOrientation;
+    labels?: Partial<OrderStatusTimelineLabels>;
+    /** Accessible name of the list; defaults to "Order status". */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/OrderStatusTimeline/OrderStatusTimelineProps.js

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

package/dist/Components/OrderSummary/OrderSummary.d.ts

@@ -0,0 +1,4 @@
+import type { OrderSummaryProps } from "./OrderSummaryProps";
+/** Tonal price panel: label/amount rows, a large tabular total, a calm savings banner and free-delivery progress. */
+declare const OrderSummary: ({ lines, total, savings, taxNote, freeShippingProgress, hideTitle, isLoading, currency, locale, labels, "data-testid": testId, }: OrderSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export default OrderSummary;