@timmbr/ui 1.8.0 → 1.10.0

package/dist/components/OptionPicker/OptionPicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionPicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/OptionPicker/OptionPicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IACjC,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B"}

package/dist/components/OptionPicker/index.d.ts

@@ -0,0 +1,4 @@
+export * from './OptionPicker';
+export * from './OptionPicker.types';
+export * from './OptionPicker.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/OptionPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OptionPicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}

package/dist/components/Price/Price.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Price.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Price/Price.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;8EASxB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAS9B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAS/B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAShC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"Price.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Price/Price.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;8EASxB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAS9B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAS/B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/Price/Price.styles.js

@@ -4,7 +4,7 @@ const priceVariants = cva("inline-flex flex-wrap items-baseline font-sans text-f
   variants: {
     size: {
       sm: "gap-x-1.5",
-      md: "gap-x-1",
+      md: "gap-x-1.5",
       lg: "gap-x-2"
     }
   },
@@ -34,7 +34,8 @@ const priceDiscountVariants = cva("font-semibold text-success", {
   variants: {
     size: {
       sm: "text-body-3",
-      md: "ms-1 text-body-2",
+      // No own margin: the row gap spaces it, and it starts flush left when it wraps.
+      md: "text-body-2",
       lg: "text-body-1"
     }
   },

package/dist/components/ProductGallery/ProductGallery.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { ProductGalleryProps } from './ProductGallery.types';
+/**
+ * Product images: a main image you can swipe (scroll-snap) or step with arrows, a thumbnail row
+ * (visible on phones too: easier to aim than dots), and a fullscreen zoomable viewer when the main
+ * image is clicked. The first image is marked high priority (it's usually the page's LCP), the
+ * rest load lazily; the frame keeps its aspect ratio, so nothing shifts while images load.
+ */
+export declare const ProductGallery: React.ForwardRefExoticComponent<ProductGalleryProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProductGallery.d.ts.map

package/dist/components/ProductGallery/ProductGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGallery.d.ts","sourceRoot":"","sources":["../../../src/components/ProductGallery/ProductGallery.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EAAE,mBAAmB,EAAoD,MAAM,wBAAwB,CAAC;AAoBpH;;;;;GAKG;AACH,eAAO,MAAM,cAAc,4FAkS1B,CAAC"}

package/dist/components/ProductGallery/ProductGallery.js

@@ -0,0 +1,306 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from '@timmbr/icons';
+import { useControllableState } from '@timmbr/hooks';
+import { cn } from '@timmbr/utils';
+import { productGalleryFrameVariants, productGallerySlideVariants, productGalleryTrackVariants, productGalleryArrowVariants, productGalleryCounterVariants, productGalleryLensVariants, productGalleryZoomPaneVariants, productGalleryStageVariants, productGalleryThumbVariants, productGalleryThumbListVariants, productGalleryThumbsVariants, productGalleryVariants } from './ProductGallery.styles.js';
+import { ProductGalleryLightbox } from './ProductGalleryLightbox.js';
+
+const SCROLL_SETTLE_MS = 120;
+const defaultRenderImage = (image, { priority, className }) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    src: image.src,
+    alt: image.alt,
+    loading: priority ? "eager" : "lazy",
+    fetchPriority: priority ? "high" : void 0,
+    decoding: "async",
+    draggable: false,
+    className: cn("absolute inset-0 size-full object-cover", className)
+  }
+);
+const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+const ProductGallery = React.forwardRef(
+  ({
+    images,
+    index: indexProp,
+    defaultIndex = 0,
+    onIndexChange,
+    renderImage = defaultRenderImage,
+    aspectRatio = "4 / 3",
+    sizes = "(min-width: 1024px) 50vw, 100vw",
+    thumbnails = "bottom",
+    hoverZoom = true,
+    zoomScale = 2.5,
+    labels: labelsProp,
+    className,
+    ...props
+  }, ref) => {
+    const [zoom, setZoom] = React.useState(null);
+    const canHoverZoom = React.useRef(false);
+    React.useEffect(() => {
+      canHoverZoom.current = !!window.matchMedia?.("(hover: hover) and (pointer: fine) and (min-width: 1024px)").matches;
+    }, []);
+    const total = images.length;
+    const [rawIndex, setIndex] = useControllableState({
+      value: indexProp,
+      defaultValue: defaultIndex,
+      onChange: onIndexChange
+    });
+    const index = Math.min(Math.max(rawIndex, 0), Math.max(total - 1, 0));
+    const [lightboxOpen, setLightboxOpen] = React.useState(false);
+    const trackRef = React.useRef(null);
+    const thumbRefs = React.useRef([]);
+    const slideRefs = React.useRef([]);
+    const settleTimer = React.useRef(void 0);
+    const [settleCount, setSettleCount] = React.useState(0);
+    const labels = {
+      gallery: "Product images",
+      previous: "Previous image",
+      next: "Next image",
+      position: (i, n) => `${i + 1} of ${n}`,
+      openFullscreen: (i, n) => `Open image ${i + 1} of ${n} in full screen`,
+      thumbnail: (i, n) => `Show image ${i + 1} of ${n}`,
+      close: "Close",
+      zoomIn: "Zoom in",
+      zoomOut: "Zoom out",
+      ...labelsProp
+    };
+    React.useEffect(() => {
+      const track = trackRef.current;
+      if (!track || track.clientWidth === 0) return;
+      const target = index * track.clientWidth;
+      if (Math.abs(track.scrollLeft - target) > 2) {
+        track.scrollTo({ left: target, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+      }
+      thumbRefs.current[index]?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }, [index, settleCount]);
+    React.useEffect(() => () => clearTimeout(settleTimer.current), []);
+    const onScroll = () => {
+      clearTimeout(settleTimer.current);
+      settleTimer.current = setTimeout(() => {
+        const track = trackRef.current;
+        if (!track || track.clientWidth === 0) return;
+        const settled = Math.round(track.scrollLeft / track.clientWidth);
+        if (settled !== index && settled >= 0 && settled < total) {
+          setIndex(settled);
+          setSettleCount((count) => count + 1);
+        }
+      }, SCROLL_SETTLE_MS);
+    };
+    const go = (delta) => {
+      const next = index + delta;
+      if (next >= 0 && next < total) setIndex(next);
+    };
+    const onZoomMove = (event) => {
+      if (!hoverZoom || event.pointerType !== "mouse" || !canHoverZoom.current || lightboxOpen) return;
+      const box = event.currentTarget.getBoundingClientRect();
+      const clamp = (n) => Math.min(Math.max(n, 0), 1);
+      setZoom({
+        x: clamp((event.clientX - box.left) / box.width),
+        y: clamp((event.clientY - box.top) / box.height)
+      });
+    };
+    const lens = 100 / zoomScale;
+    const lensLeft = zoom ? Math.min(Math.max(zoom.x * 100 - lens / 2, 0), 100 - lens) : 0;
+    const lensTop = zoom ? Math.min(Math.max(zoom.y * 100 - lens / 2, 0), 100 - lens) : 0;
+    const onKeyDown = (event) => {
+      if (lightboxOpen) return;
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        go(1);
+      } else if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        go(-1);
+      }
+    };
+    if (total === 0) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn(productGalleryFrameVariants(), className),
+          style: { aspectRatio },
+          "data-slot": "product-gallery",
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": labels.gallery,
+        className: cn(productGalleryVariants({ thumbnails }), className),
+        onKeyDown,
+        "data-slot": "product-gallery",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: productGalleryStageVariants(), children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: productGalleryFrameVariants(),
+                style: { aspectRatio },
+                onPointerMove: onZoomMove,
+                onPointerLeave: () => setZoom(null),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: trackRef,
+                      className: productGalleryTrackVariants(),
+                      onScroll,
+                      "data-slot": "product-gallery-track",
+                      children: images.map((image, i) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          role: "group",
+                          "aria-roledescription": "slide",
+                          "aria-label": labels.position(i, total),
+                          "aria-hidden": i === index ? void 0 : true,
+                          className: "relative size-full shrink-0 snap-center snap-always",
+                          "data-slot": "product-gallery-slide",
+                          children: /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              ref: (node) => {
+                                slideRefs.current[i] = node;
+                              },
+                              type: "button",
+                              "aria-label": labels.openFullscreen(i, total),
+                              tabIndex: i === index ? 0 : -1,
+                              className: productGallerySlideVariants(),
+                              onClick: () => {
+                                setIndex(i);
+                                setLightboxOpen(true);
+                              },
+                              children: renderImage(image, { priority: i === 0, sizes, slot: "main", className: "object-cover" })
+                            }
+                          )
+                        },
+                        `${image.src}-${i}`
+                      ))
+                    }
+                  ),
+                  total > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": labels.previous,
+                        className: productGalleryArrowVariants({ side: "left" }),
+                        disabled: index === 0,
+                        onClick: () => go(-1),
+                        children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-5" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": labels.next,
+                        className: productGalleryArrowVariants({ side: "right" }),
+                        disabled: index >= total - 1,
+                        onClick: () => go(1),
+                        children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-5" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: productGalleryCounterVariants(), "aria-hidden": "true", children: [
+                      index + 1,
+                      " / ",
+                      total
+                    ] })
+                  ] }),
+                  zoom && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: productGalleryLensVariants(),
+                      style: { left: `${lensLeft}%`, top: `${lensTop}%`, width: `${lens}%`, height: `${lens}%` },
+                      "data-slot": "product-gallery-lens"
+                    }
+                  )
+                ]
+              }
+            ),
+            zoom && images[index] && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: productGalleryZoomPaneVariants(),
+                style: { aspectRatio },
+                "data-slot": "product-gallery-zoom",
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute left-0 top-0",
+                    style: {
+                      width: `${zoomScale * 100}%`,
+                      height: `${zoomScale * 100}%`,
+                      transform: `translate(${-lensLeft}%, ${-lensTop}%)`
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: images[index].src,
+                        alt: "",
+                        decoding: "async",
+                        draggable: false,
+                        className: "size-full max-w-none object-cover"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          total > 1 && /* @__PURE__ */ jsx("div", { className: productGalleryThumbsVariants({ thumbnails }), "data-slot": "product-gallery-thumbs", children: /* @__PURE__ */ jsx("div", { className: productGalleryThumbListVariants({ thumbnails }), children: images.map((image, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (node) => {
+                thumbRefs.current[i] = node;
+              },
+              type: "button",
+              "aria-label": labels.thumbnail(i, total),
+              "aria-current": i === index ? "true" : void 0,
+              className: productGalleryThumbVariants({ active: i === index, thumbnails }),
+              onClick: () => setIndex(i),
+              children: renderImage(image, {
+                priority: false,
+                sizes: thumbnails === "left" ? "(min-width: 1024px) 72px, 22vw" : "(min-width: 1024px) 12vw, 22vw",
+                slot: "thumbnail",
+                className: "object-cover"
+              })
+            },
+            `${image.src}-${i}`
+          )) }) }),
+          /* @__PURE__ */ jsx(
+            ProductGalleryLightbox,
+            {
+              open: lightboxOpen,
+              onOpenChange: setLightboxOpen,
+              images,
+              index,
+              onIndexChange: setIndex,
+              renderImage,
+              labels,
+              onCloseAutoFocus: (event) => {
+                const slide = slideRefs.current[index];
+                if (!slide) return;
+                event.preventDefault();
+                slide.focus({ preventScroll: true });
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ProductGallery.displayName = "ProductGallery";
+
+export { ProductGallery };

package/dist/components/ProductGallery/ProductGallery.styles.d.ts

@@ -0,0 +1,32 @@
+export declare const productGalleryVariants: (props?: ({
+    thumbnails?: "left" | "bottom" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Holds the frame and, beside it, the hover zoom pane. */
+export declare const productGalleryStageVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Main image frame: a scroll-snap track (swipe on touch, arrows on desktop). */
+export declare const productGalleryFrameVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const productGalleryTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** The button filling a slide (opens the fullscreen viewer). */
+export declare const productGallerySlideVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Figma: 40px translucent circles with a light shadow. */
+export declare const productGalleryArrowVariants: (props?: ({
+    side?: "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const productGalleryCounterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const productGalleryThumbsVariants: (props?: ({
+    thumbnails?: "left" | "bottom" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const productGalleryThumbListVariants: (props?: ({
+    thumbnails?: "left" | "bottom" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const productGalleryThumbVariants: (props?: ({
+    thumbnails?: "left" | "bottom" | null | undefined;
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The square that follows the pointer over the image (what the zoom pane magnifies). */
+export declare const productGalleryLensVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Desktop hover zoom: a pane beside the image, over the content next to it. */
+export declare const productGalleryZoomPaneVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const productGalleryLightboxVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const productGalleryLightboxButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=ProductGallery.styles.d.ts.map

package/dist/components/ProductGallery/ProductGallery.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGallery.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ProductGallery/ProductGallery.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;8EASjC,CAAC;AAEH,2DAA2D;AAC3D,eAAO,MAAM,2BAA2B,oFAA0B,CAAC;AAEnE,iFAAiF;AACjF,eAAO,MAAM,2BAA2B,oFAAyD,CAAC;AAElG,eAAO,MAAM,2BAA2B,oFAEvC,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,2BAA2B,oFAEvC,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,2BAA2B;;8EAUvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,oFAEzC,CAAC;AAEF,eAAO,MAAM,4BAA4B;;8EASvC,CAAC;AAEH,eAAO,MAAM,+BAA+B;;8EAW3C,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;8EAevC,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,0BAA0B,oFAEtC,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,8BAA8B,oFAE1C,CAAC;AAEF,eAAO,MAAM,8BAA8B,oFAE1C,CAAC;AAEF,eAAO,MAAM,oCAAoC,oFAEhD,CAAC"}

package/dist/components/ProductGallery/ProductGallery.styles.js

@@ -0,0 +1,86 @@
+import { cva } from 'class-variance-authority';
+
+const productGalleryVariants = cva("flex min-w-0 flex-col gap-3 font-sans", {
+  variants: {
+    /** `left`: a vertical thumbnail column beside the image from lg up (a row below it on phones). */
+    thumbnails: {
+      bottom: "lg:gap-6",
+      left: "lg:grid lg:grid-cols-[4.5rem_minmax(0,1fr)] lg:gap-4"
+    }
+  },
+  defaultVariants: { thumbnails: "bottom" }
+});
+const productGalleryStageVariants = cva("relative min-w-0");
+const productGalleryFrameVariants = cva("relative overflow-hidden rounded-sm bg-grey-100");
+const productGalleryTrackVariants = cva(
+  "flex size-full snap-x snap-mandatory overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+);
+const productGallerySlideVariants = cva(
+  "relative block size-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+);
+const productGalleryArrowVariants = cva(
+  "absolute top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-grey-50/70 text-grey-950 shadow-sm backdrop-blur-sm transition-colors hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0 md:flex",
+  {
+    variants: {
+      side: {
+        left: "left-3",
+        right: "right-3"
+      }
+    }
+  }
+);
+const productGalleryCounterVariants = cva(
+  "pointer-events-none absolute bottom-3 left-3 rounded-full bg-grey-950/70 px-2.5 py-1 text-caption font-semibold text-grey-50 tabular-nums md:hidden"
+);
+const productGalleryThumbsVariants = cva("relative", {
+  variants: {
+    thumbnails: {
+      bottom: "",
+      // The column takes the frame's height (its row) and scrolls inside it.
+      left: "lg:order-first"
+    }
+  },
+  defaultVariants: { thumbnails: "bottom" }
+});
+const productGalleryThumbListVariants = cva(
+  "flex snap-x gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+  {
+    variants: {
+      thumbnails: {
+        bottom: "lg:gap-3",
+        left: "lg:absolute lg:inset-0 lg:snap-y lg:flex-col lg:gap-3 lg:overflow-y-auto lg:overflow-x-visible lg:p-0.5"
+      }
+    },
+    defaultVariants: { thumbnails: "bottom" }
+  }
+);
+const productGalleryThumbVariants = cva(
+  "relative aspect-square w-[calc((100%-1.5rem)/4.5)] shrink-0 snap-start overflow-hidden rounded-sm bg-grey-100 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  {
+    variants: {
+      thumbnails: {
+        bottom: "lg:w-[calc((100%-2.25rem)/4)]",
+        left: "lg:w-full"
+      },
+      active: {
+        true: "border-2 border-primary",
+        false: "border border-grey-200 opacity-85 hover:border-grey-400 hover:opacity-100"
+      }
+    },
+    defaultVariants: { active: false, thumbnails: "bottom" }
+  }
+);
+const productGalleryLensVariants = cva(
+  "pointer-events-none absolute z-10 border border-grey-50/80 bg-grey-50/25 shadow-sm"
+);
+const productGalleryZoomPaneVariants = cva(
+  "pointer-events-none absolute left-[calc(100%+1.5rem)] top-0 z-30 hidden h-full overflow-hidden rounded-sm border border-grey-200 bg-grey-100 shadow-xl lg:block"
+);
+const productGalleryLightboxVariants = cva(
+  "fixed inset-0 z-[10000] flex flex-col bg-grey-1000/95 text-grey-50 focus:outline-none"
+);
+const productGalleryLightboxButtonVariants = cva(
+  "flex size-11 items-center justify-center rounded-full bg-grey-50/10 text-grey-50 transition-colors hover:bg-grey-50/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-grey-50 disabled:pointer-events-none disabled:opacity-30"
+);
+
+export { productGalleryArrowVariants, productGalleryCounterVariants, productGalleryFrameVariants, productGalleryLensVariants, productGalleryLightboxButtonVariants, productGalleryLightboxVariants, productGallerySlideVariants, productGalleryStageVariants, productGalleryThumbListVariants, productGalleryThumbVariants, productGalleryThumbsVariants, productGalleryTrackVariants, productGalleryVariants, productGalleryZoomPaneVariants };

package/dist/components/ProductGallery/ProductGallery.types.d.ts

@@ -0,0 +1,55 @@
+import type * as React from 'react';
+export interface ProductGalleryImage {
+    src: string;
+    alt: string;
+}
+export interface ProductGalleryRenderOptions {
+    /** True for the first main image: load it eagerly with high priority (it's usually the LCP). */
+    priority: boolean;
+    /** `sizes` for a responsive image. */
+    sizes: string;
+    /** Where the image is drawn; each needs a different `sizes`. */
+    slot: 'main' | 'thumbnail' | 'lightbox';
+    className: string;
+}
+export interface ProductGalleryLabels {
+    /** Accessible name of the gallery. */
+    gallery?: string;
+    previous?: string;
+    next?: string;
+    /** e.g. "2 of 5" (slides and the visible counter). */
+    position?: (index: number, total: number) => string;
+    /** Button name over the main image. */
+    openFullscreen?: (index: number, total: number) => string;
+    thumbnail?: (index: number, total: number) => string;
+    close?: string;
+    zoomIn?: string;
+    zoomOut?: string;
+}
+export interface ProductGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    images: ProductGalleryImage[];
+    /** Controlled index of the shown image. */
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /**
+     * Draws an image filling its box (e.g. Next.js `<Image fill>`). Defaults to a plain <img> with
+     * object-fit cover (contain in the lightbox).
+     */
+    renderImage?: (image: ProductGalleryImage, options: ProductGalleryRenderOptions) => React.ReactNode;
+    /** CSS aspect ratio of the main image. Defaults to "4 / 3". */
+    aspectRatio?: string;
+    /** `sizes` of the main image. Defaults to "(min-width: 1024px) 50vw, 100vw". */
+    sizes?: string;
+    /** Thumbnails below the image, or in a column on its left from lg up. Defaults to "bottom". */
+    thumbnails?: 'bottom' | 'left';
+    /**
+     * Desktop (mouse) hover zoom: a lens over the image and a magnified pane beside it. The pane
+     * draws `src` at full size, so use a high-resolution source. Defaults to true.
+     */
+    hoverZoom?: boolean;
+    /** Magnification of the hover zoom. Defaults to 2.5. */
+    zoomScale?: number;
+    labels?: ProductGalleryLabels;
+}
+//# sourceMappingURL=ProductGallery.types.d.ts.map

package/dist/components/ProductGallery/ProductGallery.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGallery.types.d.ts","sourceRoot":"","sources":["../../../src/components/ProductGallery/ProductGallery.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,2BAA2B;IAC1C,gGAAgG;IAChG,QAAQ,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;IACxC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpD,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACjG,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,2BAA2B,KAAK,KAAK,CAAC,SAAS,CAAC;IACpG,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B"}

package/dist/components/ProductGallery/ProductGalleryLightbox.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { ProductGalleryImage, ProductGalleryLabels, ProductGalleryProps } from './ProductGallery.types';
+export interface ProductGalleryLightboxProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    images: ProductGalleryImage[];
+    index: number;
+    onIndexChange: (index: number) => void;
+    renderImage: NonNullable<ProductGalleryProps['renderImage']>;
+    labels: Required<Pick<ProductGalleryLabels, 'previous' | 'next' | 'position' | 'close' | 'zoomIn' | 'zoomOut'>> & ProductGalleryLabels;
+    /** Where focus goes on close (the dialog has no trigger, so the gallery points it at the current slide). */
+    onCloseAutoFocus?: (event: Event) => void;
+}
+/**
+ * Fullscreen viewer: swipe (touch), arrow keys and the side buttons (tablet and up) move between
+ * images; double-click / double-tap, the wheel and two-finger pinch zoom (up to 3×), and dragging
+ * pans a zoomed image. Pointer events only, no gesture library.
+ */
+export declare function ProductGalleryLightbox({ open, onOpenChange, images, index, onIndexChange, renderImage, labels, onCloseAutoFocus, }: ProductGalleryLightboxProps): React.JSX.Element;
+//# sourceMappingURL=ProductGalleryLightbox.d.ts.map

package/dist/components/ProductGallery/ProductGalleryLightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGalleryLightbox.d.ts","sourceRoot":"","sources":["../../../src/components/ProductGallery/ProductGalleryLightbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAgB7G,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,WAAW,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC;IAC7D,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,GAC7G,oBAAoB,CAAC;IACvB,4GAA4G;IAC5G,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,aAAa,EACb,WAAW,EACX,MAAM,EACN,gBAAgB,GACjB,EAAE,2BAA2B,qBA0M7B"}