@planetaexo/design-system 0.71.0 → 0.72.0

package/dist/index.cjs

@@ -12702,65 +12702,114 @@ function CarouselGallery({
   onOpen,
   className
 }) {
-  var _a;
   const total = photos.length;
-  const photo = photos[index];
-  const prev = () => onIndexChange((index - 1 + total) % total);
-  const next = () => onIndexChange((index + 1) % total);
-  const touchStart = React20__namespace.useRef(null);
-  const swiped = React20__namespace.useRef(false);
-  const onTouchStart = (e) => {
-    const t = e.touches[0];
-    touchStart.current = { x: t.clientX, y: t.clientY };
-    swiped.current = false;
+  const go = (i) => onIndexChange(Math.max(0, Math.min(total - 1, i)));
+  const prev = () => go(index - 1);
+  const next = () => go(index + 1);
+  const containerRef = React20__namespace.useRef(null);
+  const [drag, setDrag] = React20__namespace.useState(0);
+  const [dragging, setDragging] = React20__namespace.useState(false);
+  const gesture = React20__namespace.useRef(null);
+  const movedRef = React20__namespace.useRef(false);
+  const onPointerDown = (e) => {
+    var _a, _b;
+    if (total <= 1) return;
+    movedRef.current = false;
+    gesture.current = {
+      x: e.clientX,
+      y: e.clientY,
+      w: (_b = (_a = containerRef.current) == null ? void 0 : _a.clientWidth) != null ? _b : 1,
+      axis: null,
+      id: e.pointerId
+    };
   };
-  const onTouchEnd = (e) => {
-    const start = touchStart.current;
-    touchStart.current = null;
-    if (!start || total <= 1) return;
-    const t = e.changedTouches[0];
-    const dx = t.clientX - start.x;
-    const dy = t.clientY - start.y;
-    if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) {
-      swiped.current = true;
-      if (dx < 0) next();
-      else prev();
+  const onPointerMove = (e) => {
+    var _a;
+    const g = gesture.current;
+    if (!g || e.pointerId !== g.id) return;
+    const dx = e.clientX - g.x;
+    const dy = e.clientY - g.y;
+    if (g.axis === null) {
+      if (Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) {
+        g.axis = "x";
+        setDragging(true);
+        (_a = containerRef.current) == null ? void 0 : _a.setPointerCapture(g.id);
+      } else if (Math.abs(dy) > 8) {
+        gesture.current = null;
+        return;
+      } else {
+        return;
+      }
     }
+    if (g.axis !== "x") return;
+    movedRef.current = true;
+    let d = dx;
+    if (index === 0 && d > 0 || index === total - 1 && d < 0) d *= 0.35;
+    setDrag(d);
+  };
+  const endGesture = (e) => {
+    const g = gesture.current;
+    gesture.current = null;
+    setDragging(false);
+    setDrag(0);
+    if (!g || g.axis !== "x") return;
+    const dx = e.clientX - g.x;
+    const threshold = Math.min(110, g.w * 0.18);
+    if (dx <= -threshold) next();
+    else if (dx >= threshold) prev();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      onTouchStart,
-      onTouchEnd,
+      ref: containerRef,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endGesture,
+      onPointerCancel: endGesture,
+      onClick: () => {
+        if (movedRef.current) {
+          movedRef.current = false;
+          return;
+        }
+        onOpen(index);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onOpen(index);
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      "aria-label": `Open photo ${index + 1} fullscreen`,
       className: cn(
-        "relative w-full aspect-[4/3] sm:aspect-[16/10] overflow-hidden bg-muted group/photo touch-pan-y select-none",
+        "relative w-full aspect-[4/3] sm:aspect-[16/10] overflow-hidden bg-muted",
+        "touch-pan-y select-none cursor-zoom-in",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          "div",
           {
-            type: "button",
-            onClick: () => {
-              if (swiped.current) {
-                swiped.current = false;
-                return;
-              }
-              onOpen(index);
+            className: "flex h-full w-full",
+            style: {
+              transform: `translateX(calc(${-index * 100}% + ${drag}px))`,
+              transition: dragging ? "none" : "transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1)"
             },
-            "aria-label": `Open photo ${index + 1} fullscreen`,
-            className: "absolute inset-0 w-full h-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              Picture,
-              {
-                src: photo.src,
-                alt: (_a = photo.alt) != null ? _a : `Photo ${index + 1}`,
-                title: photo.caption,
-                className: "h-full w-full object-cover transition-transform duration-500 group-hover/photo:scale-[1.02]",
-                loading: "lazy"
-              },
-              photo.src
-            )
+            children: photos.map((p, i) => {
+              var _a;
+              return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Picture,
+                {
+                  src: p.src,
+                  alt: (_a = p.alt) != null ? _a : `Photo ${i + 1}`,
+                  title: p.caption,
+                  className: "pointer-events-none h-full w-full object-cover",
+                  rootMargin: "400px"
+                }
+              ) }, i);
+            })
           }
         ),
         total > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -12768,7 +12817,10 @@ function CarouselGallery({
             "button",
             {
               type: "button",
-              onClick: prev,
+              onClick: (e) => {
+                e.stopPropagation();
+                prev();
+              },
               "aria-label": "Previous photo",
               className: cn(
                 "absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 z-10",
@@ -12784,7 +12836,10 @@ function CarouselGallery({
             "button",
             {
               type: "button",
-              onClick: next,
+              onClick: (e) => {
+                e.stopPropagation();
+                next();
+              },
               "aria-label": "Next photo",
               className: cn(
                 "absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 z-10",
@@ -12801,7 +12856,10 @@ function CarouselGallery({
           "button",
           {
             type: "button",
-            onClick: () => onIndexChange(i),
+            onClick: (e) => {
+              e.stopPropagation();
+              onIndexChange(i);
+            },
             "aria-label": `Go to photo ${i + 1}`,
             className: cn(
               "h-1.5 rounded-full transition-all duration-300",