@expcat/tigercat-react 0.3.69 → 0.4.0

package/dist/chunk-2EOXY2LP.mjs

@@ -0,0 +1,353 @@
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo } from 'react';
+import { getInitialCropRect, cropCanvas, classNames, imageCropperContainerClasses, CROP_HANDLES, imageCropperImgClasses, imageCropperMaskClasses, imageCropperSelectionClasses, imageCropperDragAreaClasses, imageCropperGuideClasses, getCropperHandleClasses, moveCropRect, resizeCropRect } from '@expcat/tigercat-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/ImageCropper.tsx
+var ImageCropper = forwardRef(
+  ({
+    src,
+    aspectRatio,
+    minWidth = 20,
+    minHeight = 20,
+    outputType = "image/png",
+    quality = 0.92,
+    guides = true,
+    className,
+    style,
+    onCropChange,
+    onReady
+  }, ref) => {
+    const containerRef = useRef(null);
+    const imageRef = useRef(null);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [displayWidth, setDisplayWidth] = useState(0);
+    const [displayHeight, setDisplayHeight] = useState(0);
+    const [cropRect, setCropRect] = useState({ x: 0, y: 0, width: 0, height: 0 });
+    const dragModeRef = useRef("none");
+    const activeHandleRef = useRef(null);
+    const dragStartPosRef = useRef({ x: 0, y: 0 });
+    const dragStartRectRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
+    const displayDimsRef = useRef({ w: 0, h: 0 });
+    useEffect(() => {
+      displayDimsRef.current = { w: displayWidth, h: displayHeight };
+    }, [displayWidth, displayHeight]);
+    useEffect(() => {
+      setImageLoaded(false);
+      const img = new window.Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        imageRef.current = img;
+        const container = containerRef.current;
+        const containerW = container ? container.clientWidth : img.naturalWidth;
+        const containerH = container ? container.clientHeight || 400 : img.naturalHeight;
+        const ratio = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight, 1);
+        const dw = img.naturalWidth * ratio;
+        const dh = img.naturalHeight * ratio;
+        setDisplayWidth(dw);
+        setDisplayHeight(dh);
+        displayDimsRef.current = { w: dw, h: dh };
+        const initial = getInitialCropRect(dw, dh, aspectRatio);
+        setCropRect(initial);
+        setImageLoaded(true);
+        onReady?.();
+      };
+      img.src = src;
+    }, [src, aspectRatio, onReady]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        getCropResult: () => {
+          return new Promise((resolve, reject) => {
+            if (!imageRef.current) {
+              reject(new Error("Image not loaded"));
+              return;
+            }
+            const { canvas, dataUrl } = cropCanvas(
+              imageRef.current,
+              cropRect,
+              displayWidth,
+              displayHeight,
+              outputType,
+              quality
+            );
+            canvas.toBlob(
+              (blob) => {
+                if (blob) {
+                  resolve({ canvas, blob, dataUrl, cropRect: { ...cropRect } });
+                } else {
+                  reject(new Error("Failed to create blob"));
+                }
+              },
+              outputType,
+              quality
+            );
+          });
+        }
+      }),
+      [cropRect, displayWidth, displayHeight, outputType, quality]
+    );
+    const handleMouseDown = useCallback(
+      (e, mode, handle) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragModeRef.current = mode;
+        activeHandleRef.current = handle || null;
+        dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+        dragStartRectRef.current = { ...cropRect };
+        const onMouseMove = (ev) => {
+          const dx = ev.clientX - dragStartPosRef.current.x;
+          const dy = ev.clientY - dragStartPosRef.current.y;
+          const dims = displayDimsRef.current;
+          let newRect;
+          if (dragModeRef.current === "move") {
+            newRect = moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = resizeCropRect(
+              dragStartRectRef.current,
+              activeHandleRef.current,
+              dx,
+              dy,
+              dims.w,
+              dims.h,
+              aspectRatio,
+              minWidth,
+              minHeight
+            );
+          }
+          setCropRect(newRect);
+          onCropChange?.(newRect);
+        };
+        const onMouseUp = () => {
+          dragModeRef.current = "none";
+          activeHandleRef.current = null;
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
+    );
+    const handleTouchStart = useCallback(
+      (e, mode, handle) => {
+        if (e.touches.length !== 1) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const touch = e.touches[0];
+        dragModeRef.current = mode;
+        activeHandleRef.current = handle || null;
+        dragStartPosRef.current = { x: touch.clientX, y: touch.clientY };
+        dragStartRectRef.current = { ...cropRect };
+        const onTouchMove = (ev) => {
+          if (ev.touches.length !== 1) return;
+          const t = ev.touches[0];
+          const dx = t.clientX - dragStartPosRef.current.x;
+          const dy = t.clientY - dragStartPosRef.current.y;
+          const dims = displayDimsRef.current;
+          let newRect;
+          if (dragModeRef.current === "move") {
+            newRect = moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = resizeCropRect(
+              dragStartRectRef.current,
+              activeHandleRef.current,
+              dx,
+              dy,
+              dims.w,
+              dims.h,
+              aspectRatio,
+              minWidth,
+              minHeight
+            );
+          }
+          setCropRect(newRect);
+          onCropChange?.(newRect);
+        };
+        const onTouchEnd = () => {
+          dragModeRef.current = "none";
+          activeHandleRef.current = null;
+          document.removeEventListener("touchmove", onTouchMove);
+          document.removeEventListener("touchend", onTouchEnd);
+        };
+        document.addEventListener("touchmove", onTouchMove, { passive: false });
+        document.addEventListener("touchend", onTouchEnd);
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
+    );
+    const containerClasses = useMemo(
+      () => classNames(imageCropperContainerClasses, className),
+      [className]
+    );
+    const cr = cropRect;
+    if (!imageLoaded) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: classNames(containerClasses, "flex items-center justify-center"),
+          style: { ...style, minHeight: "200px" },
+          role: "img",
+          "aria-label": "Loading image for cropping",
+          children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin" })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: containerClasses,
+        style: {
+          ...style,
+          width: `${displayWidth}px`,
+          height: `${displayHeight}px`
+        },
+        role: "application",
+        "aria-label": "Image cropper",
+        "aria-roledescription": "image cropper",
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              className: imageCropperImgClasses,
+              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
+              draggable: false,
+              alt: "Image to crop"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: imageCropperMaskClasses,
+              width: displayWidth,
+              height: displayHeight,
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: "crop-mask", children: [
+                  /* @__PURE__ */ jsx("rect", { width: displayWidth, height: displayHeight, fill: "white" }),
+                  /* @__PURE__ */ jsx("rect", { x: cr.x, y: cr.y, width: cr.width, height: cr.height, fill: "black" })
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: displayWidth,
+                    height: displayHeight,
+                    fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
+                    mask: "url(#crop-mask)"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: imageCropperSelectionClasses,
+              style: {
+                left: `${cr.x}px`,
+                top: `${cr.y}px`,
+                width: `${cr.width}px`,
+                height: `${cr.height}px`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: imageCropperDragAreaClasses,
+              style: {
+                left: `${cr.x}px`,
+                top: `${cr.y}px`,
+                width: `${cr.width}px`,
+                height: `${cr.height}px`
+              },
+              onMouseDown: (e) => handleMouseDown(e, "move"),
+              onTouchStart: (e) => handleTouchStart(e, "move")
+            }
+          ),
+          guides && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x}px`,
+                  top: `${cr.y + cr.height / 3}px`,
+                  width: `${cr.width}px`,
+                  height: 0,
+                  borderTopWidth: "1px",
+                  borderTopStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x}px`,
+                  top: `${cr.y + cr.height * 2 / 3}px`,
+                  width: `${cr.width}px`,
+                  height: 0,
+                  borderTopWidth: "1px",
+                  borderTopStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width * 2 / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            )
+          ] }),
+          CROP_HANDLES.map((handle) => {
+            const pos = {};
+            if (handle.includes("n")) pos.top = `${cr.y}px`;
+            if (handle.includes("s")) pos.top = `${cr.y + cr.height}px`;
+            if (handle === "e" || handle === "w") pos.top = `${cr.y + cr.height / 2}px`;
+            if (handle.includes("w")) pos.left = `${cr.x}px`;
+            if (handle.includes("e")) pos.left = `${cr.x + cr.width}px`;
+            if (handle === "n" || handle === "s") pos.left = `${cr.x + cr.width / 2}px`;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: getCropperHandleClasses(handle),
+                style: pos,
+                onMouseDown: (e) => handleMouseDown(e, "resize", handle),
+                onTouchStart: (e) => handleTouchStart(e, "resize", handle)
+              },
+              handle
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+ImageCropper.displayName = "ImageCropper";
+
+export { ImageCropper };

package/dist/chunk-5CLXOFRZ.mjs

@@ -0,0 +1,248 @@
+import { useEscapeKey } from './chunk-WLIFEALE.mjs';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { getPreviewNavState, clampScale, calculateTransform, imagePreviewWrapperClasses, imagePreviewMaskClasses, imagePreviewImgClasses, imagePreviewCloseBtnClasses, previewCloseIconPath, classNames, prevIconPath, imagePreviewNavBtnClasses, nextIconPath, imagePreviewToolbarClasses, imagePreviewToolbarBtnClasses, zoomOutIconPath, resetIconPath, zoomInIconPath, imagePreviewCounterClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: cls,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d })
+  }
+);
+var ImagePreview = ({
+  visible,
+  images,
+  currentIndex = 0,
+  zIndex = 1050,
+  maskClosable = true,
+  scaleStep = 0.5,
+  minScale = 0.25,
+  maxScale = 5,
+  onVisibleChange,
+  onCurrentIndexChange,
+  onScaleChange
+}) => {
+  const [scale, setScale] = useState(1);
+  const [offsetX, setOffsetX] = useState(0);
+  const [offsetY, setOffsetY] = useState(0);
+  const [index, setIndex] = useState(currentIndex);
+  const draggingRef = useRef(false);
+  const dragStartRef = useRef({ x: 0, y: 0, ox: 0, oy: 0 });
+  const resetTransform = useCallback(() => {
+    setScale(1);
+    setOffsetX(0);
+    setOffsetY(0);
+  }, []);
+  useEffect(() => {
+    setIndex(currentIndex);
+    resetTransform();
+  }, [currentIndex, resetTransform]);
+  useEffect(() => {
+    if (visible) {
+      resetTransform();
+      setIndex(currentIndex);
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [visible, currentIndex, resetTransform]);
+  const handleClose = useCallback(() => {
+    onVisibleChange?.(false);
+  }, [onVisibleChange]);
+  useEscapeKey({ enabled: !!visible, onEscape: handleClose });
+  const navState = useMemo(() => getPreviewNavState(index, images.length), [index, images.length]);
+  const handleZoomIn = useCallback(() => {
+    setScale((s) => {
+      const next = clampScale(s + scaleStep, minScale, maxScale);
+      onScaleChange?.(next);
+      return next;
+    });
+  }, [scaleStep, minScale, maxScale, onScaleChange]);
+  const handleZoomOut = useCallback(() => {
+    setScale((s) => {
+      const next = clampScale(s - scaleStep, minScale, maxScale);
+      onScaleChange?.(next);
+      return next;
+    });
+  }, [scaleStep, minScale, maxScale, onScaleChange]);
+  const handleReset = useCallback(() => {
+    resetTransform();
+    onScaleChange?.(1);
+  }, [resetTransform, onScaleChange]);
+  const handlePrev = useCallback(() => {
+    if (index > 0) {
+      const next = index - 1;
+      setIndex(next);
+      resetTransform();
+      onCurrentIndexChange?.(next);
+    }
+  }, [index, resetTransform, onCurrentIndexChange]);
+  const handleNext = useCallback(() => {
+    if (index < images.length - 1) {
+      const next = index + 1;
+      setIndex(next);
+      resetTransform();
+      onCurrentIndexChange?.(next);
+    }
+  }, [index, images.length, resetTransform, onCurrentIndexChange]);
+  useEffect(() => {
+    if (!visible) return;
+    const handler = (e) => {
+      if (e.key === "ArrowLeft") handlePrev();
+      if (e.key === "ArrowRight") handleNext();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [visible, handlePrev, handleNext]);
+  const handleWheel = useCallback(
+    (e) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -scaleStep : scaleStep;
+      setScale((s) => {
+        const next = clampScale(s + delta, minScale, maxScale);
+        onScaleChange?.(next);
+        return next;
+      });
+    },
+    [scaleStep, minScale, maxScale, onScaleChange]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      draggingRef.current = true;
+      dragStartRef.current = { x: e.clientX, y: e.clientY, ox: offsetX, oy: offsetY };
+    },
+    [offsetX, offsetY]
+  );
+  const handleMouseMove = useCallback((e) => {
+    if (!draggingRef.current) return;
+    setOffsetX(dragStartRef.current.ox + (e.clientX - dragStartRef.current.x));
+    setOffsetY(dragStartRef.current.oy + (e.clientY - dragStartRef.current.y));
+  }, []);
+  const handleMouseUp = useCallback(() => {
+    draggingRef.current = false;
+  }, []);
+  const handleMaskClick = useCallback(
+    (e) => {
+      if (maskClosable && e.target === e.currentTarget) {
+        handleClose();
+      }
+    },
+    [maskClosable, handleClose]
+  );
+  const transform = useMemo(
+    () => calculateTransform(scale, offsetX, offsetY),
+    [scale, offsetX, offsetY]
+  );
+  if (!visible || !images.length) return null;
+  const currentSrc = images[index] || images[0];
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: imagePreviewWrapperClasses,
+        style: { zIndex },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Image preview",
+        onClick: handleMaskClick,
+        onWheel: handleWheel,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: imagePreviewMaskClasses, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: currentSrc,
+              className: imagePreviewImgClasses,
+              style: { transform },
+              alt: `Preview image ${index + 1}`,
+              draggable: false,
+              onMouseDown: handleMouseDown,
+              onMouseMove: handleMouseMove,
+              onMouseUp: handleMouseUp,
+              onMouseLeave: handleMouseUp
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: imagePreviewCloseBtnClasses,
+              onClick: handleClose,
+              "aria-label": "Close preview",
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { d: previewCloseIconPath })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: classNames(imagePreviewNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              disabled: !navState.hasPrev,
+              "aria-label": "Previous image",
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { d: prevIconPath })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: classNames(imagePreviewNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              disabled: !navState.hasNext,
+              "aria-label": "Next image",
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { d: nextIconPath })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: imagePreviewToolbarClasses, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleZoomOut,
+                "aria-label": "Zoom out",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomOutIconPath })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleReset,
+                "aria-label": "Reset",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: resetIconPath })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleZoomIn,
+                "aria-label": "Zoom in",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomInIconPath })
+              }
+            ),
+            navState.counter && /* @__PURE__ */ jsx("span", { className: imagePreviewCounterClasses, children: navState.counter })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+};
+
+export { ImagePreview };