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

package/dist/Components/LimitReachedModal/limitReachedCopy.d.ts

@@ -0,0 +1,8 @@
+import { LimitKind } from "./LimitReachedModalProps";
+/** title is the same for both audiences — only message swaps between admin and member copy. */
+export declare function resolveLimitCopy(kind: LimitKind, canManageBilling: boolean): {
+    title: string;
+    message: string;
+};
+/** Returns null unless BOTH used and limit are non-null — no partial "X used" line. */
+export declare function formatLimitUsage(kind: LimitKind, used?: number | null, limit?: number | null): string | null;

package/dist/Components/LimitReachedModal/limitReachedCopy.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveLimitCopy = resolveLimitCopy;
+exports.formatLimitUsage = formatLimitUsage;
+// NOTE: strings ported verbatim from crm-frontend/account-frontend's limit gates; projects/tickets are new, matched voice.
+const COPY = {
+    record: {
+        title: "Record limit reached",
+        unit: "records",
+        admin: "You have reached your plan record limit. Upgrade to add more records.",
+        member: "Your organization has reached its record limit. Contact your organization administrator to upgrade the plan.",
+    },
+    automation: {
+        title: "Automation limit reached",
+        unit: "automations",
+        admin: "You have reached your plan automation limit. Upgrade to create more workflows and cadences.",
+        member: "Your organization has reached its automation limit. Contact your organization administrator to upgrade the plan.",
+    },
+    custom_modules: {
+        title: "Custom module limit reached",
+        unit: "custom modules",
+        admin: "You have reached your plan custom module limit. Upgrade to add more custom modules.",
+        member: "Your organization has reached its custom module limit. Contact your organization administrator to upgrade the plan.",
+    },
+    user: {
+        title: "Seat limit reached",
+        unit: "users",
+        admin: "You have reached the number of users included on your plan. Upgrade to add more.",
+        member: "Your organization has reached its user limit. Contact your organization administrator to upgrade the plan.",
+    },
+    projects: {
+        title: "Project limit reached",
+        unit: "projects",
+        admin: "You have reached your plan project limit. Upgrade to create more projects.",
+        member: "Your organization has reached its project limit. Contact your organization administrator to upgrade the plan.",
+    },
+    tickets: {
+        title: "Ticket limit reached",
+        unit: "tickets",
+        admin: "You have reached your plan ticket limit. Upgrade to create more tickets.",
+        member: "Your organization has reached its ticket limit. Contact your organization administrator to upgrade the plan.",
+    },
+};
+/** title is the same for both audiences — only message swaps between admin and member copy. */
+function resolveLimitCopy(kind, canManageBilling) {
+    const c = COPY[kind];
+    return { title: c.title, message: canManageBilling ? c.admin : c.member };
+}
+/** Returns null unless BOTH used and limit are non-null — no partial "X used" line. */
+function formatLimitUsage(kind, used, limit) {
+    if (used == null || limit == null)
+        return null;
+    return `${used} of ${limit} ${COPY[kind].unit} used`;
+}

package/dist/Components/Loading/Loading.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { LoadingProps } from "./LoadingProps";
-export default function Loading({ text, isLoading, onlytext }: LoadingProps): React.JSX.Element | null;
+/** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
+export default function Loading({ text, isLoading, onlytext, container, variant, allowBackgroundInteraction, }: LoadingProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/Loading/Loading.js

@@ -1,38 +1,29 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Loading;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var react_3 = require("@emotion/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-// const blurAnimation = keyframes`
-//   0% {
-//     filter: blur(0);
-//   }
-//   50% {
-//     filter: blur(2px);
-//   }
-//   100% {
-//     filter: blur(0);
-//   }
-// `;
-var colorTransition = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    color: black;\n  }\n  50% {\n    color: gray;\n  }\n  100% {\n    color: black;\n  }\n"], ["\n  0% {\n    color: black;\n  }\n  50% {\n    color: gray;\n  }\n  100% {\n    color: black;\n  }\n"])));
-function Loading(_a) {
-    var text = _a.text, isLoading = _a.isLoading, onlytext = _a.onlytext;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("@emotion/react");
+const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
+const Backdrop_1 = __importDefault(require("../Backdrop/Backdrop"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const pulse = (0, react_2.keyframes) `
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+`;
+/** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
+function Loading({ text, isLoading, onlytext, container, variant = "frosted", allowBackgroundInteraction, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (variant === "dim" && !onlytext) {
+        return ((0, jsx_runtime_1.jsx)(Backdrop_1.default, { open: isLoading, loader: true, text: text, container: container, allowBackgroundInteraction: allowBackgroundInteraction }));
+    }
     if (!isLoading) {
         return null;
     }
-    return (react_1.default.createElement(react_2.Box, { position: "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: "blackAlpha.600", backdropFilter: "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: "9999" },
-        react_1.default.createElement(react_2.Center, { height: "100vh" }, !onlytext ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.primary[500], size: "xl" }),
-            react_1.default.createElement(react_2.Text, { mt: "2", ml: "5" }, text))) : (react_1.default.createElement(react_2.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_3.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              animation: ", " 2s infinite;\n            "], ["\n              animation: ", " 2s infinite;\n            "])), colorTransition) }, text)))));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", "aria-live": "polite", "aria-busy": true, position: container ? "absolute" : "fixed", inset: "0", ...(0, overlay_styles_1.overlayScrimStyles)(colors), color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, zIndex: container ? "10" : "9999", children: onlytext ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "3.125rem", textTransform: "uppercase", fontWeight: 500, animation: `${pulse} 2s ease-in-out infinite`, sx: (0, motion_1.reducedMotionSx)(), children: text })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: text })] })) }));
 }
-var templateObject_1, templateObject_2;

package/dist/Components/Loading/LoadingProps.d.ts

@@ -1,5 +1,15 @@
+/** Props for Loading, a full-viewport (or container-scoped) blocking overlay gated on `isLoading`. */
 export type LoadingProps = {
+    /** Label under the spinner; without it the spinner is named "Loading". With `onlytext` it is the heading. */
     text?: string;
+    /** Shows the overlay; renders nothing when false. */
     isLoading: boolean;
+    /** Swaps the spinner+label for a large pulsing 50px uppercase heading — a different treatment, not just "no spinner". */
     onlytext?: boolean;
+    /** Scope the overlay to the nearest positioned ancestor instead of full-viewport. */
+    container?: boolean;
+    /** "dim" renders through Backdrop: lighter scrim, no blur, fades in. Defaults to "frosted" so existing screens are unchanged. */
+    variant?: "frosted" | "dim";
+    /** Only with `variant="dim"` — lets clicks reach the page behind the scrim. */
+    allowBackgroundInteraction?: boolean;
 };

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

@@ -0,0 +1,31 @@
+import type { ProductMedia } from "../Commerce/commerceTypes";
+export type FrameZoom = {
+    scale: number;
+    x: number;
+    y: number;
+};
+type MediaFrameProps = {
+    media: ProductMedia;
+    alt: string;
+    fit?: "cover" | "contain";
+    /** False for frames the viewer is not looking at: lazy-loads images and stops any playing video. */
+    active?: boolean;
+    eager?: boolean;
+    autoPlay?: boolean;
+    zoom?: FrameZoom;
+    surface?: string;
+    playLabel: string;
+    unavailableLabel: string;
+};
+/** One frame: skeleton, then image fade-in with the ratio already reserved; broken images become a tile. */
+export declare const FrameImage: ({ src, alt, fit, eager, zoom, unavailableLabel, }: {
+    src: string;
+    alt: string;
+    fit: "cover" | "contain";
+    eager: boolean;
+    zoom?: FrameZoom;
+    unavailableLabel: string;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Image, or a video that shows its poster behind a play button until asked to play. */
+declare const MediaFrame: ({ media, alt, fit, active, eager, autoPlay, zoom, surface, playLabel, unavailableLabel, }: MediaFrameProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaFrame;

package/dist/Components/MediaGallery/MediaFrame.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FrameImage = void 0;
+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 Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const glass_1 = require("./glass");
+const mediaGalleryModel_1 = require("./mediaGalleryModel");
+const CENTER = { position: "absolute", inset: 0 };
+/** One frame: skeleton, then image fade-in with the ratio already reserved; broken images become a tile. */
+const FrameImage = ({ src, alt, fit, eager, zoom, unavailableLabel, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [state, setState] = (0, react_1.useState)("loading");
+    const settle = (0, react_1.useCallback)((node) => {
+        if (node && node.complete && node.naturalWidth > 0)
+            setState("loaded");
+    }, []);
+    if (state === "failed") {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ...CENTER, direction: "column", align: "center", justify: "center", gap: 2, color: colors.textMuted, role: "img", "aria-label": `${unavailableLabel}: ${alt}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ImageOff, { size: 24, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", children: unavailableLabel })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state === "loading" && ((0, jsx_runtime_1.jsx)(react_2.Box, { ...CENTER, "data-testid": "media-skeleton", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "100%", width: "100%", borderRadius: "0" }) })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", ref: settle, src: src, alt: alt, loading: eager ? "eager" : "lazy", decoding: "async", draggable: false, onLoad: () => setState("loaded"), onError: () => setState("failed"), ...CENTER, w: "100%", h: "100%", objectFit: fit, opacity: state === "loaded" ? 1 : 0, transform: zoom ? `scale(${zoom.scale})` : undefined, transformOrigin: zoom ? `${zoom.x}% ${zoom.y}%` : undefined, transition: (0, motion_1.transitionFor)(["opacity", "transform"], "base"), sx: (0, motion_2.reducedMotionSx)() })] }));
+};
+exports.FrameImage = FrameImage;
+/** Image, or a video that shows its poster behind a play button until asked to play. */
+const MediaFrame = ({ media, alt, fit = "cover", active = true, eager = true, autoPlay = false, zoom, surface, playLabel, unavailableLabel, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const kind = (0, mediaGalleryModel_1.frameKind)(media);
+    const [playing, setPlaying] = (0, react_1.useState)(autoPlay);
+    (0, react_1.useEffect)(() => {
+        if (!active)
+            setPlaying(false);
+    }, [active]);
+    const poster = (0, mediaGalleryModel_1.framePoster)(media);
+    let content;
+    if (kind === "image") {
+        content = (0, jsx_runtime_1.jsx)(exports.FrameImage, { src: media.src, alt: alt, fit: fit, eager: eager, zoom: zoom, unavailableLabel: unavailableLabel }, media.src);
+    }
+    else if (playing) {
+        const embed = (0, mediaGalleryModel_1.parseEmbed)(media.src);
+        content = embed ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "iframe", ...CENTER, w: "100%", h: "100%", border: "0", src: embed.src, title: alt, allow: "autoplay; encrypted-media; picture-in-picture; fullscreen", allowFullScreen: true })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", ...CENTER, w: "100%", h: "100%", objectFit: "contain", src: media.src, poster: media.poster, controls: true, autoPlay: true, playsInline: true, "aria-label": alt }));
+    }
+    else {
+        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [poster ? ((0, jsx_runtime_1.jsx)(exports.FrameImage, { src: poster, alt: alt, fit: fit, eager: eager, unavailableLabel: unavailableLabel }, poster)) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { ...CENTER, align: "center", justify: "center", color: colors.textMuted, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Video, { size: 32 }) })), (0, jsx_runtime_1.jsx)(glass_1.GlassIconButton, { label: playLabel, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 20, "aria-hidden": true, fill: "currentColor" }), onClick: () => setPlaying(true), size: 56, left: "calc(50% - 28px)", top: "calc(50% - 28px)", tabIndex: active ? 0 : -1 })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", w: "100%", h: "100%", overflow: "hidden", bg: surface !== null && surface !== void 0 ? surface : colors.background[100], "data-frame-kind": kind, children: content }));
+};
+exports.default = MediaFrame;

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

@@ -0,0 +1,4 @@
+import type { MediaGalleryProps } from "./MediaGalleryProps";
+/** Product media carousel: scroll-snap track, thumbnail rail or dots, lightbox, colour-linked frame sets. */
+declare const MediaGallery: ({ media, layout, aspectRatio, zoom, index, defaultIndex, onIndexChange, activeMediaIds, badges, actions, sticky, stickyTop, rounded, isLoading, labels: labelOverrides, lightboxLabels, "aria-label": ariaLabel, "data-testid": testId, }: MediaGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaGallery;

package/dist/Components/MediaGallery/MediaGallery.js

@@ -0,0 +1,206 @@
+"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("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 scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const MediaFrame_1 = __importDefault(require("./MediaFrame"));
+const MediaThumb_1 = __importDefault(require("./MediaThumb"));
+const MediaLightbox_1 = __importDefault(require("./MediaLightbox"));
+const glass_1 = require("./glass");
+const motion_3 = require("./motion");
+const useContainerWidth_1 = require("../Commerce/useContainerWidth");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const mediaGalleryModel_1 = require("./mediaGalleryModel");
+const MediaGalleryProps_1 = require("./MediaGalleryProps");
+const WIDE_QUERY = "(min-width: 768px)";
+const WIDE_MIN_WIDTH = 560;
+const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+const MAX_DOTS = 8;
+const INNER_ZOOM = 2;
+const SETTLE_MS = 700;
+const HIDDEN_SCROLLBAR = { scrollbarWidth: "none", "&::-webkit-scrollbar": { display: "none" } };
+const revealWithin = (container, child, axis) => {
+    const [start, size, view] = axis === "x"
+        ? [child.offsetLeft, child.offsetWidth, container.clientWidth]
+        : [child.offsetTop, child.offsetHeight, container.clientHeight];
+    const key = axis === "x" ? "scrollLeft" : "scrollTop";
+    const at = container[key];
+    if (start < at)
+        container[key] = start;
+    else if (start + size > at + view)
+        container[key] = start + size - view;
+};
+const GallerySkeleton = ({ arrangement, aspectRatio, rounded, label }) => {
+    const rail = arrangement !== "swipe";
+    const vertical = arrangement === "thumbs-left";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "status", "aria-label": label, direction: vertical ? "row" : "column", gap: 4, w: "100%", "data-testid": "media-gallery-skeleton", children: [rail && vertical && ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 3, w: "72px", flexShrink: 0, children: [0, 1, 2, 3].map((n) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "90px", width: "72px", borderRadius: "xl" }, n))) })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, sx: { aspectRatio }, borderRadius: rounded ? "2xl" : 0, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "100%", width: "100%", borderRadius: "0" }) }), rail && !vertical && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 3, children: [0, 1, 2, 3].map((n) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "80px", width: "64px", borderRadius: "xl" }, n))) }))] }));
+};
+/** Product media carousel: scroll-snap track, thumbnail rail or dots, lightbox, colour-linked frame sets. */
+const MediaGallery = ({ media, layout = "auto", aspectRatio = "4/5", zoom = "lightbox", index, defaultIndex = 0, onIndexChange, activeMediaIds, badges, actions, sticky = false, stickyTop = 24, rounded, isLoading = false, labels: labelOverrides, lightboxLabels, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const rootRef = (0, react_1.useRef)(null);
+    const containerWidth = (0, useContainerWidth_1.useContainerWidth)(rootRef);
+    const windowWide = (0, useMatchMedia_1.useMatchMedia)(WIDE_QUERY, false);
+    const wide = containerWidth === undefined ? windowWide : containerWidth >= WIDE_MIN_WIDTH;
+    const finePointer = (0, useMatchMedia_1.useMatchMedia)(FINE_POINTER_QUERY, false);
+    const labels = { ...MediaGalleryProps_1.defaultMediaGalleryLabels, ...labelOverrides };
+    const arrangement = layout === "auto" ? (wide ? "thumbs-left" : "swipe") : layout;
+    const isSwipe = arrangement === "swipe";
+    const squared = rounded === undefined ? isSwipe : !rounded;
+    const activeKey = JSON.stringify(activeMediaIds !== null && activeMediaIds !== void 0 ? activeMediaIds : null);
+    const frames = (0, react_1.useMemo)(() => { var _a; return (0, mediaGalleryModel_1.resolveFrames)(media, (_a = JSON.parse(activeKey)) !== null && _a !== void 0 ? _a : undefined); }, [media, activeKey]);
+    const signature = (0, mediaGalleryModel_1.frameSignature)(frames);
+    const count = frames.length;
+    const isControlled = index !== undefined;
+    const [ownIndex, setOwnIndex] = (0, react_1.useState)(defaultIndex);
+    const current = (0, mediaGalleryModel_1.clampIndex)(isControlled ? index : ownIndex, count);
+    const latest = (0, react_1.useRef)(current);
+    latest.current = current;
+    const onChangeRef = (0, react_1.useRef)(onIndexChange);
+    onChangeRef.current = onIndexChange;
+    const commit = (next) => {
+        var _a;
+        const target = (0, mediaGalleryModel_1.clampIndex)(next, count);
+        if (target === latest.current)
+            return;
+        latest.current = target;
+        if (!isControlled)
+            setOwnIndex(target);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, target);
+    };
+    const commitRef = (0, react_1.useRef)(commit);
+    commitRef.current = commit;
+    const trackRef = (0, react_1.useRef)(null);
+    const railRef = (0, react_1.useRef)(null);
+    const settling = (0, react_1.useRef)(null);
+    const settleTimer = (0, react_1.useRef)();
+    const alignedTrack = (0, react_1.useRef)(null);
+    const lightboxReturn = (0, react_1.useRef)(null);
+    const [lightboxOpen, setLightboxOpen] = (0, react_1.useState)(false);
+    const [inner, setInner] = (0, react_1.useState)({ on: false, x: 50, y: 50 });
+    const [fadeKey, setFadeKey] = (0, react_1.useState)(0);
+    const seenSignature = (0, react_1.useRef)(signature);
+    (0, react_1.useEffect)(() => {
+        if (seenSignature.current === signature)
+            return;
+        seenSignature.current = signature;
+        setFadeKey((key) => key + 1);
+        commitRef.current(0);
+    }, [signature]);
+    (0, react_1.useEffect)(() => setInner((state) => (state.on ? { ...state, on: false } : state)), [current, signature]);
+    (0, react_1.useEffect)(() => () => window.clearTimeout(settleTimer.current), []);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const track = trackRef.current;
+        const width = (_a = track === null || track === void 0 ? void 0 : track.clientWidth) !== null && _a !== void 0 ? _a : 0;
+        if (!track || !width)
+            return;
+        const firstPass = alignedTrack.current !== track;
+        alignedTrack.current = track;
+        const left = current * width;
+        if (Math.abs(track.scrollLeft - left) < 2)
+            return;
+        settling.current = current;
+        window.clearTimeout(settleTimer.current);
+        settleTimer.current = window.setTimeout(() => {
+            settling.current = null;
+        }, SETTLE_MS);
+        if (firstPass || reduced || typeof track.scrollTo !== "function")
+            track.scrollLeft = left;
+        else
+            track.scrollTo({ left, behavior: "smooth" });
+    }, [current, fadeKey, arrangement, reduced]);
+    (0, react_1.useEffect)(() => {
+        const rail = railRef.current;
+        const selected = rail === null || rail === void 0 ? void 0 : rail.querySelector('[aria-current="true"]');
+        if (rail && selected)
+            revealWithin(rail, selected, arrangement === "thumbs-left" ? "y" : "x");
+    }, [current, fadeKey, arrangement]);
+    const onScroll = () => {
+        const track = trackRef.current;
+        if (!track || !track.clientWidth)
+            return;
+        const at = (0, mediaGalleryModel_1.clampIndex)(Math.round(track.scrollLeft / track.clientWidth), count);
+        if (settling.current !== null) {
+            if (at === settling.current)
+                settling.current = null;
+            return;
+        }
+        commit(at);
+    };
+    const onKeyDown = (event) => {
+        if (event.ctrlKey || event.metaKey || event.altKey || (0, mediaGalleryModel_1.keyBelongsToTarget)(event.target))
+            return;
+        const next = (0, mediaGalleryModel_1.indexForKey)(event.key, latest.current, count);
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        commit(next);
+    };
+    const openLightbox = (event) => {
+        lightboxReturn.current = event.currentTarget;
+        setLightboxOpen(true);
+    };
+    const toggleInner = (event) => {
+        const box = event.currentTarget.getBoundingClientRect();
+        const x = box.width ? ((event.clientX - box.left) / box.width) * 100 : 50;
+        const y = box.height ? ((event.clientY - box.top) / box.height) * 100 : 50;
+        setInner((state) => ({ on: !state.on, x, y }));
+    };
+    const panInner = (event) => {
+        if (!inner.on || event.pointerType !== "mouse")
+            return;
+        const box = event.currentTarget.getBoundingClientRect();
+        if (!box.width || !box.height)
+            return;
+        setInner({ on: true, x: ((event.clientX - box.left) / box.width) * 100, y: ((event.clientY - box.top) / box.height) * 100 });
+    };
+    const ratio = aspectRatio.replace("/", " / ");
+    const radius = squared ? 0 : "2xl";
+    const showArrows = count > 1 && (finePointer || !isSwipe);
+    const showRail = count > 1 && !isSwipe;
+    const arrowSize = isSwipe ? 36 : 44;
+    const arrowInset = isSwipe ? 12 : 16;
+    const currentFrame = frames[current];
+    const zoomable = zoom !== "none" && currentFrame !== undefined && (0, mediaGalleryModel_1.frameKind)(currentFrame) === "image";
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(GallerySkeleton, { arrangement: arrangement, aspectRatio: ratio, rounded: !squared, label: labels.loading });
+    const thumbRing = { gap: colors.background[50], ink: colors.header[900] };
+    const thumbs = (width, height) => frames.map((frame, position) => ((0, jsx_runtime_1.jsx)(MediaThumb_1.default, { media: frame, label: labels.frame(position + 1, count, frame.alt), selected: position === current, onSelect: () => commit(position), width: width, height: height, ring: thumbRing }, frame.id)));
+    const glassDots = (0, glass_1.glassStyles)(colors);
+    const focusInset = { outline: "2px solid transparent", boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors) };
+    const well = ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", flex: 1, minW: 0, overflow: "hidden", isolation: "isolate", borderRadius: radius, bg: colors.background[100], sx: { aspectRatio: ratio }, "data-testid": "media-gallery-well", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, position: "absolute", inset: 0, tabIndex: 0, role: "group", "aria-label": labels.region, overflowX: "auto", overflowY: "hidden", animation: fadeKey > 0 ? (0, motion_3.fadeIn)(motion_3.CROSSFADE_MS) : undefined, onScroll: onScroll, onPointerDown: () => {
+                    settling.current = null;
+                }, outline: "none", _focusVisible: focusInset, sx: {
+                    scrollSnapType: "x mandatory",
+                    overscrollBehaviorX: "contain",
+                    ...HIDDEN_SCROLLBAR,
+                    ...(0, motion_2.reducedMotionSx)(),
+                }, "data-testid": "media-gallery-track", children: [frames.map((frame, position) => {
+                        var _a;
+                        const isCurrent = position === current;
+                        const kind = (0, mediaGalleryModel_1.frameKind)(frame);
+                        const alt = (_a = frame.alt) !== null && _a !== void 0 ? _a : labels.image(position + 1, count);
+                        const view = ((0, jsx_runtime_1.jsx)(MediaFrame_1.default, { media: frame, alt: alt, active: isCurrent, eager: Math.abs(position - current) <= 1, zoom: zoom === "inner" && isCurrent && inner.on ? { scale: INNER_ZOOM, x: inner.x, y: inner.y } : undefined, playLabel: labels.playVideo, unavailableLabel: labels.imageUnavailable }));
+                        const interactive = zoom !== "none" && kind === "image";
+                        return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", "aria-roledescription": "slide", "aria-label": labels.slide(position + 1, count), "aria-hidden": isCurrent ? undefined : true, flex: "0 0 100%", h: "100%", position: "relative", opacity: reduced && !isCurrent ? 0 : 1, transition: reduced ? (0, motion_1.transitionFor)(["opacity"], "fast") : undefined, sx: { scrollSnapAlign: "start", scrollSnapStop: "always" }, children: interactive ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", w: "100%", h: "100%", p: 0, border: "0", bg: "transparent", display: "block", overflow: "hidden", cursor: "zoom-in", tabIndex: isCurrent ? 0 : -1, "aria-label": zoom === "lightbox" ? labels.openLightbox(position + 1, count) : labels.zoomImage(position + 1, count), "aria-haspopup": zoom === "lightbox" ? "dialog" : undefined, "aria-pressed": zoom === "inner" ? isCurrent && inner.on : undefined, onClick: zoom === "lightbox" ? openLightbox : toggleInner, onPointerMove: zoom === "inner" ? panInner : undefined, outline: "none", _focusVisible: focusInset, sx: { cursor: zoom === "inner" && inner.on ? "zoom-out" : "zoom-in" }, children: view })) : (view) }, frame.id));
+                    }), count === 0 && (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "0 0 100%", bg: colors.background[100] })] }, fadeKey), badges && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 3, left: 3, zIndex: 2, pointerEvents: "none", "data-testid": "media-gallery-badges", children: badges })), actions && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 3, right: 3, zIndex: 3, "data-testid": "media-gallery-actions", children: actions })), showArrows && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(glass_1.GlassIconButton, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: arrowSize / 2, "aria-hidden": true }), onClick: () => commit(current - 1), isDisabled: current === 0, size: arrowSize, left: `${arrowInset}px`, top: `calc(50% - ${arrowSize / 2}px)`, zIndex: 2 }), (0, jsx_runtime_1.jsx)(glass_1.GlassIconButton, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: arrowSize / 2, "aria-hidden": true }), onClick: () => commit(current + 1), isDisabled: current === count - 1, size: arrowSize, right: `${arrowInset}px`, top: `calc(50% - ${arrowSize / 2}px)`, zIndex: 2 })] })), count > 1 && isSwipe && count <= MAX_DOTS && ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "group", "aria-label": labels.dots, position: "absolute", left: "50%", bottom: 4, transform: "translateX(-50%)", zIndex: 2, h: "28px", px: 1.5, align: "center", borderRadius: "full", ...glassDots, "data-testid": "media-gallery-dots", children: frames.map((frame, position) => {
+                    const selected = position === current;
+                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => commit(position), "aria-label": labels.image(position + 1, count), "aria-current": selected ? "true" : undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", h: "28px", w: selected ? "30px" : "20px", p: 0, border: "0", bg: "transparent", cursor: "pointer", transition: (0, motion_1.transitionFor)(["width"]), borderRadius: "full", sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", boxSize: "6px", borderRadius: "full", bg: "currentColor", opacity: selected ? 0.92 : 0.3, transform: selected ? "scaleX(2.4)" : "scaleX(1)", transition: (0, motion_1.transitionFor)(["transform", "opacity"]) }) }, frame.id));
+                }) })), count > 1 && ((0, jsx_runtime_1.jsx)(glass_1.GlassPill, { ...(isSwipe ? { right: 4, bottom: "19px", height: 22 } : { left: 4, bottom: 4, height: 32 }), zIndex: 2, children: (0, jsx_runtime_1.jsx)("span", { "aria-live": "polite", "data-testid": "media-gallery-counter", children: labels.counter(current + 1, count) }) })), !isSwipe && finePointer && zoomable && zoom === "lightbox" && ((0, jsx_runtime_1.jsxs)(glass_1.GlassPill, { right: 4, bottom: 4, height: 32, zIndex: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ZoomIn, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.zoomHint })] }))] }));
+    const rail = showRail &&
+        (arrangement === "thumbs-left" ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", w: "72px", flexShrink: 0, alignSelf: "stretch", "data-testid": "media-gallery-rail", children: (0, jsx_runtime_1.jsx)(react_2.Flex, { ref: railRef, role: "group", "aria-label": labels.thumbnails, position: "absolute", inset: "-4px", p: "4px", direction: "column", gap: 3, overflowY: "auto", overflowX: "hidden", animation: fadeKey > 0 ? (0, motion_3.fadeIn)(motion_3.CROSSFADE_MS) : undefined, sx: { ...(0, scrollbar_1.scrollbarStyles)(colors, "hover"), ...(0, motion_2.reducedMotionSx)() }, children: thumbs(72, 90) }, fadeKey) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { ref: railRef, role: "group", "aria-label": labels.thumbnails, gap: 3, m: "-4px", p: "4px", overflowX: "auto", animation: fadeKey > 0 ? (0, motion_3.fadeIn)(motion_3.CROSSFADE_MS) : undefined, sx: { ...(0, scrollbar_1.scrollbarStyles)(colors, "hover"), ...(0, motion_2.reducedMotionSx)() }, "data-testid": "media-gallery-rail", children: thumbs(64, 80) }, fadeKey)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { ref: rootRef, role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.region, onKeyDown: onKeyDown, w: "100%", position: sticky ? "sticky" : "relative", top: sticky ? `${stickyTop}px` : undefined, alignSelf: sticky ? "flex-start" : undefined, "data-testid": testId, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: arrangement === "thumbs-left" ? "row" : "column", gap: 4, align: arrangement === "thumbs-left" ? "stretch" : undefined, children: [arrangement === "thumbs-left" && rail, well, arrangement === "thumbs-below" && rail] }) }), (0, jsx_runtime_1.jsx)(MediaLightbox_1.default, { isOpen: lightboxOpen, onClose: () => setLightboxOpen(false), items: frames, index: current, onIndexChange: commit, finalFocusRef: lightboxReturn, labels: lightboxLabels })] }));
+};
+exports.default = MediaGallery;

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

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import type { ProductMedia } from "../Commerce/commerceTypes";
+import type { MediaLightboxLabels } from "./MediaLightboxProps";
+/** `auto` picks `thumbs-left` when the gallery is at least 560px wide (viewport 768px until measured) and `swipe` below that. */
+export type MediaGalleryLayout = "auto" | "thumbs-left" | "thumbs-below" | "swipe";
+/** `lightbox` opens the full-screen viewer, `inner` zooms in place, `none` is inert. */
+export type MediaGalleryZoom = "lightbox" | "inner" | "none";
+/** Width / height of the media well; every frame is cropped to it, never stretched. */
+export type MediaAspectRatio = "4/5" | "1/1" | "3/4" | "16/9" | `${number}/${number}`;
+/** Every string the gallery renders or announces, merged over `defaultMediaGalleryLabels`. */
+export interface MediaGalleryLabels {
+    /** Accessible name of the carousel region. */
+    region: string;
+    /** Slide label, "2 of 5". */
+    slide: (position: number, total: number) => string;
+    /** Alt text for a frame that has no `alt` of its own. */
+    image: (position: number, total: number) => string;
+    /** Accessible name of a thumbnail or dot; `alt` is the frame's own description when it has one. */
+    frame: (position: number, total: number, alt?: string) => string;
+    /** Accessible name of the previous-frame arrow. */
+    previous: string;
+    /** Accessible name of the next-frame arrow. */
+    next: string;
+    /** Accessible name of the dots group. */
+    dots: string;
+    /** Accessible name of the thumbnail list. */
+    thumbnails: string;
+    /** Visible and live-announced counter, "1 / 5". */
+    counter: (position: number, total: number) => string;
+    /** Pill shown on desktop while `zoom` is not `none`. */
+    zoomHint: string;
+    /** Name of the button that opens the lightbox on an image. */
+    openLightbox: (position: number, total: number) => string;
+    /** Name of the button that toggles in-place zoom on an image. */
+    zoomImage: (position: number, total: number) => string;
+    /** Accessible name of the play button over a video frame. */
+    playVideo: string;
+    /** Shown in place of an image that fails to load. */
+    imageUnavailable: string;
+    /** Accessible name of the skeleton shown while `isLoading`. */
+    loading: string;
+}
+export declare const defaultMediaGalleryLabels: MediaGalleryLabels;
+/** Product media carousel: thumbnail rail or swipe track, lightbox, colour-linked frames. */
+export interface MediaGalleryProps {
+    /** Every frame the product has; images are cropped to `aspectRatio`, videos play on demand. */
+    media: ProductMedia[];
+    /** Arrangement of well and thumbnails; `auto` shows the thumbnail rail from 560px of the gallery's own width. */
+    layout?: MediaGalleryLayout;
+    /** Shape of the well. */
+    aspectRatio?: MediaAspectRatio;
+    /** What a click on an image does. */
+    zoom?: MediaGalleryZoom;
+    /** Controlled frame position, within the visible frames; pair with `onIndexChange`. */
+    index?: number;
+    /** Starting frame when uncontrolled. */
+    defaultIndex?: number;
+    /** Fires on every navigation (swipe, key, arrow, thumbnail, dot) with the new position. */
+    onIndexChange?: (index: number) => void;
+    /** Restricts and orders the visible frames by media id, e.g. the selected colour's `mediaIds`; position resets to 0. */
+    activeMediaIds?: string[];
+    /** Overlaid top-left on the well, e.g. product badges. */
+    badges?: ReactNode;
+    /** Overlaid top-right on the well, e.g. a wishlist toggle. */
+    actions?: ReactNode;
+    /** Pins the gallery while the rest of the page scrolls past. */
+    sticky?: boolean;
+    /** Offset from the top of the viewport when `sticky`, in px. */
+    stickyTop?: number;
+    /** Square the corners for an edge-to-edge well; defaults to rounded except in the swipe layout. */
+    rounded?: boolean;
+    /** Renders a skeleton of the same shape in place of the frames. */
+    isLoading?: boolean;
+    /** Overrides for any of `defaultMediaGalleryLabels`. */
+    labels?: Partial<MediaGalleryLabels>;
+    /** Overrides for the lightbox copy. */
+    lightboxLabels?: Partial<MediaLightboxLabels>;
+    /** Replaces `labels.region` as the carousel's accessible name, e.g. the product title. */
+    "aria-label"?: string;
+    /** Test id on the gallery's root element. */
+    "data-testid"?: string;
+}

package/dist/Components/MediaGallery/MediaGalleryProps.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMediaGalleryLabels = void 0;
+exports.defaultMediaGalleryLabels = {
+    region: "Product images",
+    slide: (position, total) => `${position} of ${total}`,
+    image: (position, total) => `Image ${position} of ${total}`,
+    frame: (position, total, alt) => `Image ${position} of ${total}${alt ? `: ${alt}` : ""}`,
+    previous: "Previous image",
+    next: "Next image",
+    dots: "Choose an image",
+    thumbnails: "Image thumbnails",
+    counter: (position, total) => `${position} / ${total}`,
+    zoomHint: "Click to zoom",
+    openLightbox: (position, total) => `View image ${position} of ${total} full screen`,
+    zoomImage: (position, total) => `Zoom image ${position} of ${total}`,
+    playVideo: "Play video",
+    imageUnavailable: "Image unavailable",
+    loading: "Loading product images",
+};

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

@@ -0,0 +1,4 @@
+import type { MediaLightboxProps } from "./MediaLightboxProps";
+/** Full-screen product media viewer: counter and close on top, arrows, thumbnail row, Esc and arrow keys. */
+declare const MediaLightbox: ({ isOpen, onClose, items, index, defaultIndex, onIndexChange, finalFocusRef, labels: labelOverrides, }: MediaLightboxProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MediaLightbox;