@dreamtree-org/twreact-ui 2.0.8 → 2.1.0

package/dist/esm/components/utility/imageGalleryParts.js

@@ -0,0 +1,380 @@
+'use client';
+import { objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { ImageOff, ChevronLeft, ChevronRight, Maximize2 } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET, PRESS_FEEDBACK } from '../../utils/touchTarget.js';
+
+// Internal building blocks of ImageGallery (not exported from the package).
+// Full class literals so Tailwind's JIT sees every one of them.
+var RATIO_CLASSES = {
+  "4:3": "aspect-[4/3]",
+  "1:1": "aspect-square",
+  "3:4": "aspect-[3/4]",
+  "16:9": "aspect-video"
+};
+// Mosaic hero: keeps the ratio on narrow screens (one column of tiles), then
+// stretches to fill its 2x2 grid cell from `sm` up.
+var HERO_RATIO_CLASSES = {
+  "4:3": "aspect-[4/3] sm:aspect-auto",
+  "1:1": "aspect-square sm:aspect-auto",
+  "3:4": "aspect-[3/4] sm:aspect-auto",
+  "16:9": "aspect-video sm:aspect-auto"
+};
+var ratioClass = function ratioClass(ratio) {
+  return RATIO_CLASSES[ratio] || RATIO_CLASSES["4:3"];
+};
+var heroRatioClass = function heroRatioClass(ratio) {
+  return HERO_RATIO_CLASSES[ratio] || HERO_RATIO_CLASSES["4:3"];
+};
+// Horizontal travel (px) a pointer must cover before a drag counts as a swipe.
+var SWIPE_THRESHOLD = 40;
+// Mosaic shows the hero plus up to four tiles; the last tile carries "+N".
+var MOSAIC_MAX_TILES = 5;
+var withAlt = function withAlt(text, alt) {
+  return alt ? "".concat(text, ": ").concat(alt) : text;
+};
+var slideLabel = function slideLabel(images, i) {
+  var _images$i;
+  return withAlt("Image ".concat(i + 1, " of ").concat(images.length), (_images$i = images[i]) === null || _images$i === void 0 ? void 0 : _images$i.alt);
+};
+var thumbLabel = function thumbLabel(images, i) {
+  var _images$i2;
+  return withAlt("Show image ".concat(i + 1, " of ").concat(images.length), (_images$i2 = images[i]) === null || _images$i2 === void 0 ? void 0 : _images$i2.alt);
+};
+var FOCUS_RING = "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+var OVERLAY_CONTROL = "absolute inline-flex items-center justify-center rounded-full border border-line bg-surface/80 p-2 text-foreground shadow-md backdrop-blur-md transition-colors motion-reduce:transition-none hover:bg-surface";
+function PlaceholderBox(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return jsx("div", {
+    className: cn("flex h-full w-full items-center justify-center bg-muted/10 text-muted", className),
+    "data-gallery-placeholder": "",
+    children: children !== null && children !== void 0 ? children : jsx(ImageOff, {
+      className: "h-8 w-8",
+      "aria-hidden": "true"
+    })
+  });
+}
+// <img> that swaps itself for the placeholder when the source fails to load.
+function GalleryImg(_ref2) {
+  var src = _ref2.src,
+    alt = _ref2.alt,
+    placeholder = _ref2.placeholder,
+    className = _ref2.className,
+    style = _ref2.style;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    failed = _React$useState2[0],
+    setFailed = _React$useState2[1];
+  React.useEffect(function () {
+    return setFailed(false);
+  }, [src]);
+  if (!src || failed) return jsx(PlaceholderBox, {
+    children: placeholder
+  });
+  return jsx("img", {
+    src: src,
+    alt: alt,
+    draggable: false,
+    onError: function onError() {
+      return setFailed(true);
+    },
+    className: className,
+    style: style
+  });
+}
+// Pointer-event swipe detection. `consumeSwipe()` reports (once) whether the
+// last gesture was a swipe, so the click that follows it can be ignored.
+function useSwipe(_ref3) {
+  var onPrev = _ref3.onPrev,
+    onNext = _ref3.onNext,
+    disabled = _ref3.disabled;
+  var start = React.useRef(null);
+  var swiped = React.useRef(false);
+  var onPointerDown = function onPointerDown(e) {
+    swiped.current = false;
+    start.current = disabled ? null : {
+      x: e.clientX,
+      y: e.clientY
+    };
+  };
+  var onPointerUp = function onPointerUp(e) {
+    var from = start.current;
+    start.current = null;
+    if (!from) return;
+    var dx = e.clientX - from.x;
+    var dy = e.clientY - from.y;
+    if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) <= Math.abs(dy)) return;
+    swiped.current = true;
+    if (dx < 0) onNext();else onPrev();
+  };
+  var onPointerCancel = function onPointerCancel() {
+    start.current = null;
+  };
+  var consumeSwipe = function consumeSwipe() {
+    var was = swiped.current;
+    swiped.current = false;
+    return was;
+  };
+  return {
+    handlers: {
+      onPointerDown: onPointerDown,
+      onPointerUp: onPointerUp,
+      onPointerCancel: onPointerCancel
+    },
+    consumeSwipe: consumeSwipe
+  };
+}
+// Roving focus across the `[data-gallery-thumb]` buttons of a list.
+var ROVING_KEYS = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1
+};
+function handleRovingKeyDown(e) {
+  var items = Array.from(e.currentTarget.querySelectorAll("[data-gallery-thumb]"));
+  var from = items.indexOf(document.activeElement);
+  if (from < 0) return;
+  var to;
+  if (e.key in ROVING_KEYS) to = (from + ROVING_KEYS[e.key] + items.length) % items.length;else if (e.key === "Home") to = 0;else if (e.key === "End") to = items.length - 1;else return;
+  e.preventDefault();
+  e.stopPropagation();
+  items[to].focus();
+}
+function Thumbnails(_ref4) {
+  var images = _ref4.images,
+    index = _ref4.index,
+    onSelect = _ref4.onSelect,
+    side = _ref4.side,
+    placeholder = _ref4.placeholder;
+  return jsx("div", {
+    role: "group",
+    "aria-label": "Thumbnails",
+    "data-gallery-thumbs": "",
+    onKeyDown: handleRovingKeyDown,
+    className: cn("flex gap-2 overflow-x-auto p-1 [scrollbar-width:thin]", side && "sm:absolute sm:inset-0 sm:flex-col sm:overflow-x-hidden sm:overflow-y-auto"),
+    children: images.map(function (img, i) {
+      var active = i === index;
+      return jsx("button", {
+        type: "button",
+        "data-gallery-thumb": "",
+        tabIndex: active ? 0 : -1,
+        "aria-current": active ? "true" : undefined,
+        "aria-label": thumbLabel(images, i),
+        onClick: function onClick() {
+          return onSelect(i);
+        },
+        className: cn("relative h-16 w-16 shrink-0 overflow-hidden rounded-md border-2 bg-surface", FOCUS_RING, PRESS_FEEDBACK, active ? "border-primary-600" : "border-transparent opacity-70 hover:opacity-100"),
+        children: jsx(GalleryImg, {
+          src: img.src,
+          alt: "",
+          placeholder: placeholder,
+          className: "h-full w-full object-cover"
+        })
+      }, i);
+    })
+  });
+}
+function Mosaic(_ref5) {
+  var images = _ref5.images,
+    index = _ref5.index,
+    onActivate = _ref5.onActivate,
+    ratio = _ref5.ratio,
+    placeholder = _ref5.placeholder;
+  var shown = images.slice(0, MOSAIC_MAX_TILES);
+  var hidden = images.length - shown.length;
+  return jsx("div", {
+    role: "group",
+    "aria-label": "Photos",
+    "data-gallery-mosaic": "",
+    onKeyDown: handleRovingKeyDown,
+    className: "grid grid-cols-2 gap-2 sm:grid-cols-4",
+    children: shown.map(function (img, i) {
+      var hero = i === 0;
+      var more = i === shown.length - 1 && hidden > 0;
+      return jsxs("button", {
+        type: "button",
+        "data-gallery-thumb": "",
+        tabIndex: i === Math.min(index, shown.length - 1) ? 0 : -1,
+        "aria-current": i === index ? "true" : undefined,
+        "aria-label": more ? "".concat(thumbLabel(images, i), " (").concat(hidden, " more)") : thumbLabel(images, i),
+        onClick: function onClick() {
+          return onActivate(i);
+        },
+        className: cn("group relative overflow-hidden rounded-lg border border-line bg-surface", FOCUS_RING, hero ? cn("col-span-2 sm:row-span-2", heroRatioClass(ratio)) : ratioClass(ratio)),
+        children: [jsx(GalleryImg, {
+          src: img.src,
+          alt: "",
+          placeholder: placeholder,
+          className: "h-full w-full object-cover transition-transform duration-base ease-standard group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
+        }), more && jsxs("span", {
+          "aria-hidden": "true",
+          className: "absolute inset-0 flex items-center justify-center bg-black/50 text-lg font-semibold text-white",
+          children: ["+", hidden]
+        })]
+      }, i);
+    })
+  });
+}
+// Click-to-zoom state: a 2x scale whose origin follows the pointer.
+function useZoom(index) {
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    zoomed = _React$useState4[0],
+    setZoomed = _React$useState4[1];
+  var _React$useState5 = React.useState("50% 50%"),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    origin = _React$useState6[0],
+    setOrigin = _React$useState6[1];
+  React.useEffect(function () {
+    return setZoomed(false);
+  }, [index]);
+  var follow = function follow(e) {
+    var rect = e.currentTarget.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    var x = (e.clientX - rect.left) / rect.width * 100;
+    var y = (e.clientY - rect.top) / rect.height * 100;
+    setOrigin("".concat(x, "% ").concat(y, "%"));
+  };
+  return {
+    zoomed: zoomed,
+    setZoomed: setZoomed,
+    origin: origin,
+    follow: follow
+  };
+}
+function Viewer(_ref6) {
+  var images = _ref6.images,
+    index = _ref6.index,
+    onSelect = _ref6.onSelect,
+    ratio = _ref6.ratio,
+    zoom = _ref6.zoom,
+    showCounter = _ref6.showCounter,
+    placeholder = _ref6.placeholder,
+    label = _ref6.label,
+    onExpand = _ref6.onExpand,
+    _ref6$fit = _ref6.fit,
+    fit = _ref6$fit === void 0 ? "cover" : _ref6$fit;
+  var count = images.length;
+  var image = images[index];
+  var step = function step(delta) {
+    return onSelect(index + delta);
+  };
+  var _useZoom = useZoom(index),
+    zoomed = _useZoom.zoomed,
+    setZoomed = _useZoom.setZoomed,
+    origin = _useZoom.origin,
+    follow = _useZoom.follow;
+  var swipe = useSwipe({
+    onPrev: function onPrev() {
+      return step(-1);
+    },
+    onNext: function onNext() {
+      return step(1);
+    },
+    disabled: zoomed || count < 2
+  });
+  var onKeyDown = function onKeyDown(e) {
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      step(e.key === "ArrowLeft" ? -1 : 1);
+    } else if (e.key === "Escape" && zoomed) {
+      e.stopPropagation();
+      setZoomed(false);
+    }
+  };
+  var imgClass = cn("h-full w-full transition-transform duration-base ease-standard motion-reduce:transition-none", fit === "contain" ? "object-contain" : "object-cover", zoomed && "scale-[2]");
+  var img = jsx(GalleryImg, {
+    src: image.src,
+    alt: image.alt || "",
+    placeholder: placeholder,
+    className: imgClass,
+    style: zoom ? {
+      transformOrigin: origin
+    } : undefined
+  }, image.src);
+  return jsxs("div", {
+    role: "region",
+    "aria-roledescription": "carousel",
+    "aria-label": label,
+    tabIndex: 0,
+    onKeyDown: onKeyDown,
+    "data-gallery-viewer": "",
+    className: cn("min-w-0 rounded-xl", FOCUS_RING),
+    children: [jsxs("div", _objectSpread2(_objectSpread2({}, swipe.handlers), {}, {
+      className: cn("relative touch-pan-y select-none overflow-hidden rounded-xl border border-line bg-surface", ratioClass(ratio)),
+      children: [jsx("div", {
+        role: "group",
+        "aria-roledescription": "slide",
+        "aria-label": "".concat(index + 1, " of ").concat(count),
+        className: "h-full w-full motion-safe:animate-fade-in",
+        children: zoom ? jsx("button", {
+          type: "button",
+          "aria-label": zoomed ? "Zoom out" : "Zoom in",
+          "aria-pressed": zoomed,
+          onClick: function onClick() {
+            return !swipe.consumeSwipe() && setZoomed(function (z) {
+              return !z;
+            });
+          },
+          onPointerMove: zoomed ? follow : undefined,
+          className: cn("block h-full w-full overflow-hidden", zoomed ? "cursor-zoom-out" : "cursor-zoom-in", "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500"),
+          children: img
+        }) : img
+      }, index), count > 1 && jsxs(Fragment, {
+        children: [jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return step(-1);
+          },
+          "aria-label": "Previous image",
+          className: cn(OVERLAY_CONTROL, TOUCH_TARGET, FOCUS_RING, "left-3 top-1/2 -translate-y-1/2"),
+          children: jsx(ChevronLeft, {
+            className: "h-5 w-5",
+            "aria-hidden": "true"
+          })
+        }), jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return step(1);
+          },
+          "aria-label": "Next image",
+          className: cn(OVERLAY_CONTROL, TOUCH_TARGET, FOCUS_RING, "right-3 top-1/2 -translate-y-1/2"),
+          children: jsx(ChevronRight, {
+            className: "h-5 w-5",
+            "aria-hidden": "true"
+          })
+        })]
+      }), onExpand && jsx("button", {
+        type: "button",
+        onClick: onExpand,
+        "aria-label": "Open full-screen view",
+        "aria-haspopup": "dialog",
+        className: cn(OVERLAY_CONTROL, TOUCH_TARGET, FOCUS_RING, "right-3 top-3"),
+        children: jsx(Maximize2, {
+          className: "h-4 w-4",
+          "aria-hidden": "true"
+        })
+      }), showCounter && jsxs("span", {
+        "aria-hidden": "true",
+        "data-gallery-counter": "",
+        className: "absolute bottom-3 right-3 rounded-full border border-line bg-surface/80 px-2 py-0.5 text-xs font-medium tabular-nums text-foreground backdrop-blur-md",
+        children: [index + 1, "/", count]
+      })]
+    })), image.caption && jsx("p", {
+      className: "mt-2 text-sm text-muted",
+      children: image.caption
+    }), jsx("div", {
+      className: "sr-only",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "data-gallery-status": "",
+      children: slideLabel(images, index)
+    })]
+  });
+}
+
+export { GalleryImg, MOSAIC_MAX_TILES, Mosaic, PlaceholderBox, SWIPE_THRESHOLD, Thumbnails, Viewer, handleRovingKeyDown, ratioClass, slideLabel, useSwipe };

package/dist/esm/index.js

@@ -37,6 +37,8 @@ export { default as Slider } from './components/core/Slider.js';
 export { default as Popover } from './components/core/Popover.js';
 export { default as SegmentedControl } from './components/core/SegmentedControl.js';
 export { default as SearchField } from './components/core/SearchField.js';
+export { default as QuantityStepper } from './components/core/QuantityStepper.js';
+export { default as OptionCard, OptionCardGroup } from './components/core/OptionCard.js';
 export { default as Sidebar } from './components/navigation/Sidebar.js';
 export { Navbar } from './components/navigation/Navbar.js';
 export { default as FootNav } from './components/navigation/FootNav.js';
@@ -59,10 +61,12 @@ export { Carousel } from './components/utility/Carousel.js';
 export { default as Sortable } from './components/utility/Sortable.js';
 export { default as SortableGroup } from './components/utility/SortableGroup.js';
 export { default as PullToRefresh } from './components/utility/PullToRefresh.js';
+export { ImageGallery } from './components/utility/ImageGallery.js';
 export { default as AppShell } from './components/blocks/AppShell.js';
 export { default as PageHeader } from './components/blocks/PageHeader.js';
 export { default as StatCard } from './components/blocks/StatCard.js';
 export { default as StatusPill } from './components/blocks/StatusPill.js';
+export { default as ProductCard } from './components/blocks/ProductCard.js';
 export { default as EmptyState } from './components/blocks/EmptyState.js';
 export { default as ErrorState } from './components/blocks/ErrorState.js';
 export { default as LoadingState } from './components/blocks/LoadingState.js';