@expcat/tigercat-react 0.3.69 → 0.4.0

package/dist/chunk-QIJG42YQ.mjs

@@ -0,0 +1,54 @@
+import { ImagePreview } from './chunk-5CLXOFRZ.mjs';
+import { createContext, useState, useRef, useCallback, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ImageGroupContext = createContext(null);
+var ImageGroup = ({
+  preview = true,
+  onPreviewVisibleChange,
+  children,
+  className
+}) => {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState(0);
+  const imagesRef = useRef([]);
+  const register = useCallback((src) => {
+    const idx = imagesRef.current.length;
+    imagesRef.current = [...imagesRef.current, src];
+    return idx;
+  }, []);
+  const unregister = useCallback((src) => {
+    imagesRef.current = imagesRef.current.filter((s) => s !== src);
+  }, []);
+  const openPreview = useCallback(
+    (index) => {
+      if (!preview) return;
+      setPreviewIndex(index);
+      setPreviewVisible(true);
+      onPreviewVisibleChange?.(true);
+    },
+    [preview, onPreviewVisibleChange]
+  );
+  const contextValue = useMemo(
+    () => ({ register, unregister, openPreview }),
+    [register, unregister, openPreview]
+  );
+  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: className || "tiger-image-group", role: "group", children: [
+    children,
+    preview && /* @__PURE__ */ jsx(
+      ImagePreview,
+      {
+        visible: previewVisible,
+        images: imagesRef.current,
+        currentIndex: previewIndex,
+        onVisibleChange: (val) => {
+          setPreviewVisible(val);
+          if (!val) onPreviewVisibleChange?.(false);
+        },
+        onCurrentIndexChange: setPreviewIndex
+      }
+    )
+  ] }) });
+};
+
+export { ImageGroup, ImageGroupContext };

package/dist/chunk-U3JOBIDU.js

@@ -0,0 +1,355 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ImageCropper.tsx
+var ImageCropper = react.forwardRef(
+  ({
+    src,
+    aspectRatio,
+    minWidth = 20,
+    minHeight = 20,
+    outputType = "image/png",
+    quality = 0.92,
+    guides = true,
+    className,
+    style,
+    onCropChange,
+    onReady
+  }, ref) => {
+    const containerRef = react.useRef(null);
+    const imageRef = react.useRef(null);
+    const [imageLoaded, setImageLoaded] = react.useState(false);
+    const [displayWidth, setDisplayWidth] = react.useState(0);
+    const [displayHeight, setDisplayHeight] = react.useState(0);
+    const [cropRect, setCropRect] = react.useState({ x: 0, y: 0, width: 0, height: 0 });
+    const dragModeRef = react.useRef("none");
+    const activeHandleRef = react.useRef(null);
+    const dragStartPosRef = react.useRef({ x: 0, y: 0 });
+    const dragStartRectRef = react.useRef({ x: 0, y: 0, width: 0, height: 0 });
+    const displayDimsRef = react.useRef({ w: 0, h: 0 });
+    react.useEffect(() => {
+      displayDimsRef.current = { w: displayWidth, h: displayHeight };
+    }, [displayWidth, displayHeight]);
+    react.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 = tigercatCore.getInitialCropRect(dw, dh, aspectRatio);
+        setCropRect(initial);
+        setImageLoaded(true);
+        onReady?.();
+      };
+      img.src = src;
+    }, [src, aspectRatio, onReady]);
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        getCropResult: () => {
+          return new Promise((resolve, reject) => {
+            if (!imageRef.current) {
+              reject(new Error("Image not loaded"));
+              return;
+            }
+            const { canvas, dataUrl } = tigercatCore.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 = react.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 = tigercatCore.moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = tigercatCore.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 = react.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 = tigercatCore.moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = tigercatCore.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 = react.useMemo(
+      () => tigercatCore.classNames(tigercatCore.imageCropperContainerClasses, className),
+      [className]
+    );
+    const cr = cropRect;
+    if (!imageLoaded) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: tigercatCore.classNames(containerClasses, "flex items-center justify-center"),
+          style: { ...style, minHeight: "200px" },
+          role: "img",
+          "aria-label": "Loading image for cropping",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin" })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              className: tigercatCore.imageCropperImgClasses,
+              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
+              draggable: false,
+              alt: "Image to crop"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: tigercatCore.imageCropperMaskClasses,
+              width: displayWidth,
+              height: displayHeight,
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: "crop-mask", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: displayWidth, height: displayHeight, fill: "white" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: cr.x, y: cr.y, width: cr.width, height: cr.height, fill: "black" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    width: displayWidth,
+                    height: displayHeight,
+                    fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
+                    mask: "url(#crop-mask)"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.imageCropperSelectionClasses,
+              style: {
+                left: `${cr.x}px`,
+                top: `${cr.y}px`,
+                width: `${cr.width}px`,
+                height: `${cr.height}px`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x}px`,
+                  top: `${cr.y + cr.height / 3}px`,
+                  width: `${cr.width}px`,
+                  height: 0,
+                  borderTopWidth: "1px",
+                  borderTopStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width * 2 / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            )
+          ] }),
+          tigercatCore.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.getCropperHandleClasses(handle),
+                style: pos,
+                onMouseDown: (e) => handleMouseDown(e, "resize", handle),
+                onTouchStart: (e) => handleTouchStart(e, "resize", handle)
+              },
+              handle
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+ImageCropper.displayName = "ImageCropper";
+
+exports.ImageCropper = ImageCropper;

package/dist/chunk-Z7SXK2KO.js

@@ -0,0 +1,171 @@
+'use strict';
+
+var chunkNV3JUZ3N_js = require('./chunk-NV3JUZ3N.js');
+var chunkGNMOOYHG_js = require('./chunk-GNMOOYHG.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SvgIcon = ({ d, className = "w-8 h-8" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d })
+  }
+);
+var Image = ({
+  src,
+  alt = "",
+  width,
+  height,
+  fit = "cover",
+  fallbackSrc,
+  preview = true,
+  lazy = false,
+  className,
+  errorRender,
+  placeholderRender,
+  onPreviewVisibleChange,
+  onClick,
+  onKeyDown,
+  style,
+  ...props
+}) => {
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(false);
+  const [actualSrc, setActualSrc] = react.useState(lazy ? "" : src);
+  const [previewVisible, setPreviewVisible] = react.useState(false);
+  const containerRef = react.useRef(null);
+  const group = react.useContext(chunkNV3JUZ3N_js.ImageGroupContext);
+  const registeredIndexRef = react.useRef(-1);
+  react.useEffect(() => {
+    if (group && src) {
+      registeredIndexRef.current = group.register(src);
+      return () => {
+        group.unregister(src);
+      };
+    }
+  }, [group, src]);
+  react.useEffect(() => {
+    if (!lazy || !containerRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setActualSrc(src);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.01 }
+    );
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [lazy, src]);
+  react.useEffect(() => {
+    if (!lazy) {
+      setActualSrc(src);
+      setError(false);
+      setLoading(true);
+    }
+  }, [src, lazy]);
+  const handleLoad = react.useCallback(() => {
+    setLoading(false);
+    setError(false);
+  }, []);
+  const handleError = react.useCallback(() => {
+    setLoading(false);
+    setError(true);
+    if (fallbackSrc && actualSrc !== fallbackSrc) {
+      setActualSrc(fallbackSrc);
+      setError(false);
+      setLoading(true);
+    }
+  }, [fallbackSrc, actualSrc]);
+  const handleClick = react.useCallback(
+    (e) => {
+      onClick?.(e);
+      if (!preview) return;
+      if (group) {
+        group.openPreview(registeredIndexRef.current >= 0 ? registeredIndexRef.current : 0);
+      } else {
+        setPreviewVisible(true);
+        onPreviewVisibleChange?.(true);
+      }
+    },
+    [preview, group, onClick, onPreviewVisibleChange]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      onKeyDown?.(e);
+      if (preview && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        handleClick(e);
+      }
+    },
+    [preview, handleClick, onKeyDown]
+  );
+  const containerClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.imageBaseClasses, preview && tigercatCore.imagePreviewCursorClass, className),
+    [preview, className]
+  );
+  const imgClasses = react.useMemo(() => tigercatCore.getImageImgClasses(fit), [fit]);
+  const containerStyle = react.useMemo(() => {
+    const s = { ...style };
+    const w = tigercatCore.toCSSSize(width);
+    const h = tigercatCore.toCSSSize(height);
+    if (w) s.width = w;
+    if (h) s.height = h;
+    return s;
+  }, [width, height, style]);
+  let content;
+  if (error && !fallbackSrc) {
+    content = errorRender || /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.imageErrorClasses, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.imageErrorIconPath }) });
+  } else if (loading && !actualSrc) {
+    content = placeholderRender || /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.imageLoadingClasses, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.imageErrorIconPath }) });
+  } else {
+    content = /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: actualSrc,
+        alt,
+        className: imgClasses,
+        onLoad: handleLoad,
+        onError: handleError
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...props,
+        ref: containerRef,
+        className: containerClasses,
+        style: containerStyle,
+        role: preview ? "button" : void 0,
+        tabIndex: preview ? 0 : void 0,
+        "aria-label": preview ? `Preview ${alt || "image"}` : void 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: content
+      }
+    ),
+    !group && previewVisible && src && /* @__PURE__ */ jsxRuntime.jsx(
+      chunkGNMOOYHG_js.ImagePreview,
+      {
+        visible: previewVisible,
+        images: [src],
+        currentIndex: 0,
+        onVisibleChange: (val) => {
+          setPreviewVisible(val);
+          onPreviewVisibleChange?.(val);
+        }
+      }
+    )
+  ] });
+};
+
+exports.Image = Image;

package/dist/components/ActivityFeed.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkJ3HKED4B_js = require('../chunk-J3HKED4B.js');
+var chunkIOM7DWWQ_js = require('../chunk-IOM7DWWQ.js');
 require('../chunk-PR3PQUKM.js');
-require('../chunk-QYYAXM5F.js');
 require('../chunk-2GKTVAAB.js');
+require('../chunk-QYYAXM5F.js');
 require('../chunk-VCULFIZ5.js');
 require('../chunk-I5TCE5E7.js');
 require('../chunk-SSQOCZ6O.js');
@@ -15,9 +15,9 @@ require('../chunk-CI2WHAT2.js');
 
 Object.defineProperty(exports, "ActivityFeed", {
   enumerable: true,
-  get: function () { return chunkJ3HKED4B_js.ActivityFeed; }
+  get: function () { return chunkIOM7DWWQ_js.ActivityFeed; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunkJ3HKED4B_js.ActivityFeed_default; }
+  get: function () { return chunkIOM7DWWQ_js.ActivityFeed_default; }
 });

package/dist/components/ActivityFeed.mjs

@@ -1,7 +1,7 @@
-export { ActivityFeed, ActivityFeed_default as default } from '../chunk-MTL2QUM3.mjs';
+export { ActivityFeed, ActivityFeed_default as default } from '../chunk-FTY2W4L2.mjs';
 import '../chunk-JVTAKNRO.mjs';
-import '../chunk-XZVQ3PJS.mjs';
 import '../chunk-AVUXDQYO.mjs';
+import '../chunk-XZVQ3PJS.mjs';
 import '../chunk-TGKNEMD4.mjs';
 import '../chunk-LIV33O73.mjs';
 import '../chunk-3M2IG6IN.mjs';

package/dist/components/CropUpload.d.mts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ImageCropperProps, CropResult } from '@expcat/tigercat-core';
+
+interface CropUploadProps {
+    /**
+     * Accepted file types
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * Whether the component is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Maximum file size in bytes
+     */
+    maxSize?: number;
+    /**
+     * Props to pass to the internal ImageCropper
+     */
+    cropperProps?: Partial<Omit<ImageCropperProps, 'src'>>;
+    /**
+     * Title for the crop modal
+     * @default '裁剪图片'
+     */
+    modalTitle?: string;
+    /**
+     * Width of the crop modal
+     * @default 520
+     */
+    modalWidth?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Custom trigger content
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback after cropping completes
+     */
+    onCropComplete?: (result: CropResult) => void;
+    /**
+     * Callback on error
+     */
+    onError?: (error: Error) => void;
+}
+declare const CropUpload: React.FC<CropUploadProps>;
+
+export { CropUpload, type CropUploadProps };