@sesionario/blocks 1.6.0 → 1.7.0

package/dist/index.cjs

@@ -9,6 +9,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var reactSlot = require('@radix-ui/react-slot');
+var reactDom = require('react-dom');
 var nextThemes = require('next-themes');
 var framerMotion = require('framer-motion');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
@@ -455,6 +456,301 @@ function ConfirmDestructiveDialog({
     ] })
   ] }) });
 }
+var MIN_SCALE = 1;
+var MAX_SCALE = 4;
+var DOUBLE_TAP_MS = 300;
+var IDENTITY = { scale: 1, tx: 0, ty: 0 };
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function zoomToward(prev, nextScale, originX, originY) {
+  const scale = clamp(nextScale, MIN_SCALE, MAX_SCALE);
+  if (scale === MIN_SCALE) return IDENTITY;
+  const ratio = scale / prev.scale;
+  return {
+    scale,
+    tx: originX - (originX - prev.tx) * ratio,
+    ty: originY - (originY - prev.ty) * ratio
+  };
+}
+function pointerDistance(a, b) {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+function ImageLightbox({
+  images,
+  index,
+  onIndexChange,
+  onClose,
+  labels
+}) {
+  const ariaLabel = labels?.ariaLabel ?? "Visor de im\xE1genes";
+  const closeLabel = labels?.close ?? "Cerrar";
+  const previousLabel = labels?.previous ?? "Anterior";
+  const nextLabel = labels?.next ?? "Siguiente";
+  const hasMultiple = images.length > 1;
+  const [transform, setTransform] = React6.useState(IDENTITY);
+  const transformRef = React6.useRef(transform);
+  transformRef.current = transform;
+  const stageRef = React6.useRef(null);
+  const pointersRef = React6.useRef(/* @__PURE__ */ new Map());
+  const pinchStartRef = React6.useRef(null);
+  const panRef = React6.useRef(null);
+  const lastTapRef = React6.useRef(
+    null
+  );
+  const resetZoom = React6.useCallback(() => {
+    setTransform(IDENTITY);
+  }, []);
+  React6.useEffect(() => {
+    resetZoom();
+  }, [index, images[index], resetZoom]);
+  function goPrev() {
+    onIndexChange((index - 1 + images.length) % images.length);
+  }
+  function goNext() {
+    onIndexChange((index + 1) % images.length);
+  }
+  React6.useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (!hasMultiple) return;
+      if (e.key === "ArrowLeft") {
+        onIndexChange((index - 1 + images.length) % images.length);
+      } else if (e.key === "ArrowRight") {
+        onIndexChange((index + 1) % images.length);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [index, images.length, hasMultiple, onClose, onIndexChange]);
+  React6.useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, []);
+  const stageOrigin = React6.useCallback((clientX, clientY) => {
+    const stage = stageRef.current;
+    if (!stage) return { x: 0, y: 0 };
+    const rect = stage.getBoundingClientRect();
+    return {
+      x: clientX - rect.left - rect.width / 2,
+      y: clientY - rect.top - rect.height / 2
+    };
+  }, []);
+  React6.useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const prev = transformRef.current;
+      const factor = e.deltaY > 0 ? 0.9 : 1.1;
+      const { x, y } = stageOrigin(e.clientX, e.clientY);
+      setTransform(zoomToward(prev, prev.scale * factor, x, y));
+    };
+    stage.addEventListener("wheel", handleWheel, { passive: false });
+    return () => stage.removeEventListener("wheel", handleWheel);
+  }, [stageOrigin]);
+  function beginPinch() {
+    const pts = [...pointersRef.current.values()];
+    const [a, b] = pts;
+    if (!a || !b) return;
+    const midX = (a.x + b.x) / 2;
+    const midY = (a.y + b.y) / 2;
+    const { x, y } = stageOrigin(midX, midY);
+    pinchStartRef.current = {
+      distance: Math.max(pointerDistance(a, b), 1),
+      originX: x,
+      originY: y,
+      transform: { ...transformRef.current }
+    };
+    panRef.current = null;
+  }
+  function onPointerDown(e) {
+    e.stopPropagation();
+    const stage = stageRef.current;
+    if (!stage) return;
+    stage.setPointerCapture(e.pointerId);
+    pointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointersRef.current.size === 2) {
+      beginPinch();
+      return;
+    }
+    if (transformRef.current.scale > MIN_SCALE) {
+      panRef.current = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        originTx: transformRef.current.tx,
+        originTy: transformRef.current.ty,
+        moved: false
+      };
+    }
+  }
+  function onPointerMove(e) {
+    if (!pointersRef.current.has(e.pointerId)) return;
+    pointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const pinchStart = pinchStartRef.current;
+    if (pointersRef.current.size >= 2 && pinchStart) {
+      const pts = [...pointersRef.current.values()];
+      const [a, b] = pts;
+      if (!a || !b) return;
+      const distance = Math.max(pointerDistance(a, b), 1);
+      const nextScale = pinchStart.transform.scale * (distance / pinchStart.distance);
+      setTransform(
+        zoomToward(
+          pinchStart.transform,
+          nextScale,
+          pinchStart.originX,
+          pinchStart.originY
+        )
+      );
+      return;
+    }
+    const pan = panRef.current;
+    if (pan && pan.pointerId === e.pointerId) {
+      const dx = e.clientX - pan.startX;
+      const dy = e.clientY - pan.startY;
+      if (Math.abs(dx) > 2 || Math.abs(dy) > 2) pan.moved = true;
+      setTransform((prev) => ({
+        ...prev,
+        tx: pan.originTx + dx,
+        ty: pan.originTy + dy
+      }));
+    }
+  }
+  function onPointerUp(e) {
+    const stage = stageRef.current;
+    if (stage?.hasPointerCapture(e.pointerId)) {
+      stage.releasePointerCapture(e.pointerId);
+    }
+    pointersRef.current.delete(e.pointerId);
+    if (pointersRef.current.size < 2) {
+      pinchStartRef.current = null;
+    }
+    if (pointersRef.current.size === 1) {
+      const remaining = [...pointersRef.current.entries()][0];
+      if (remaining && transformRef.current.scale > MIN_SCALE) {
+        const [pointerId, point] = remaining;
+        panRef.current = {
+          pointerId,
+          startX: point.x,
+          startY: point.y,
+          originTx: transformRef.current.tx,
+          originTy: transformRef.current.ty,
+          moved: true
+        };
+      }
+    }
+    const pan = panRef.current;
+    if (pan && pan.pointerId === e.pointerId) {
+      const wasMoved = pan.moved;
+      panRef.current = null;
+      if (wasMoved) return;
+    }
+    if (pointersRef.current.size === 0 && e.button === 0) {
+      const now = Date.now();
+      const last = lastTapRef.current;
+      if (last && now - last.time < DOUBLE_TAP_MS && Math.hypot(e.clientX - last.x, e.clientY - last.y) < 24) {
+        lastTapRef.current = null;
+        resetZoom();
+        return;
+      }
+      lastTapRef.current = { time: now, x: e.clientX, y: e.clientY };
+    }
+  }
+  function stopDialogClose(e) {
+    e.stopPropagation();
+  }
+  const { scale, tx, ty } = transform;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "fixed inset-x-0 top-0 z-50 flex h-dvh items-center justify-center bg-black/90 p-4",
+        onClick: onClose,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": closeLabel,
+              className: "absolute right-4 top-4 z-10 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" })
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                goPrev();
+              },
+              "aria-label": previousLabel,
+              className: "absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: stageRef,
+              className: "relative flex max-h-full max-w-full touch-none items-center justify-center",
+              "data-scale": scale,
+              onClick: stopDialogClose,
+              onPointerDown,
+              onPointerMove,
+              onPointerUp,
+              onPointerCancel: onPointerUp,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: images[index],
+                  alt: "",
+                  draggable: false,
+                  className: "max-h-[calc(100dvh-2rem)] max-w-full select-none rounded-lg object-contain",
+                  style: {
+                    transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
+                    cursor: scale > MIN_SCALE ? "grab" : "default"
+                  }
+                }
+              )
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                goNext();
+              },
+              "aria-label": nextLabel,
+              className: "absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-6 w-6" })
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-4 left-1/2 z-10 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs text-white", children: [
+            index + 1,
+            " / ",
+            images.length
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
 var miniMenuContentClassName = "max-h-none overflow-x-visible overflow-y-visible";
 var miniMenuContentDefaults = {
   sideOffset: 8,
@@ -5733,6 +6029,7 @@ exports.EmptyMedia = EmptyMedia;
 exports.EmptyState = EmptyState;
 exports.EmptyTitle = EmptyTitle;
 exports.ErrorState = ErrorState;
+exports.ImageLightbox = ImageLightbox;
 exports.LanguageContext = LanguageContext;
 exports.LanguageSwitcher = LanguageSwitcher;
 exports.LoadingState = LoadingState;