@expcat/tigercat-react 0.3.69 → 0.3.70

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 };

package/dist/components/CropUpload.d.ts

@@ -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 };

package/dist/components/CropUpload.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var chunkEHYSER2Z_js = require('../chunk-EHYSER2Z.js');
+require('../chunk-3T7L3MHX.js');
+require('../chunk-U3JOBIDU.js');
+require('../chunk-ZYPEO2KY.js');
+require('../chunk-F24IF2QL.js');
+
+
+
+Object.defineProperty(exports, "CropUpload", {
+  enumerable: true,
+  get: function () { return chunkEHYSER2Z_js.CropUpload; }
+});

package/dist/components/CropUpload.mjs

@@ -0,0 +1,5 @@
+export { CropUpload } from '../chunk-QFYS5QIZ.mjs';
+import '../chunk-JNLX47UL.mjs';
+import '../chunk-2EOXY2LP.mjs';
+import '../chunk-WLIFEALE.mjs';
+import '../chunk-ENSLMM3L.mjs';

package/dist/components/Image.d.mts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ImageProps as ImageProps$1 } from '@expcat/tigercat-core';
+
+interface ImageProps extends Omit<ImageProps$1, 'className'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'width' | 'height'> {
+    /**
+     * Custom error placeholder
+     */
+    errorRender?: React.ReactNode;
+    /**
+     * Custom loading placeholder
+     */
+    placeholderRender?: React.ReactNode;
+    /**
+     * Callback when preview visibility changes
+     */
+    onPreviewVisibleChange?: (visible: boolean) => void;
+}
+declare const Image: React.FC<ImageProps>;
+
+export { Image, type ImageProps };

package/dist/components/Image.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ImageProps as ImageProps$1 } from '@expcat/tigercat-core';
+
+interface ImageProps extends Omit<ImageProps$1, 'className'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'width' | 'height'> {
+    /**
+     * Custom error placeholder
+     */
+    errorRender?: React.ReactNode;
+    /**
+     * Custom loading placeholder
+     */
+    placeholderRender?: React.ReactNode;
+    /**
+     * Callback when preview visibility changes
+     */
+    onPreviewVisibleChange?: (visible: boolean) => void;
+}
+declare const Image: React.FC<ImageProps>;
+
+export { Image, type ImageProps };

package/dist/components/Image.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var chunkZ7SXK2KO_js = require('../chunk-Z7SXK2KO.js');
+require('../chunk-NV3JUZ3N.js');
+require('../chunk-GNMOOYHG.js');
+require('../chunk-ZYPEO2KY.js');
+
+
+
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () { return chunkZ7SXK2KO_js.Image; }
+});

package/dist/components/Image.mjs

@@ -0,0 +1,4 @@
+export { Image } from '../chunk-6W6CRBBG.mjs';
+import '../chunk-QIJG42YQ.mjs';
+import '../chunk-5CLXOFRZ.mjs';
+import '../chunk-WLIFEALE.mjs';

package/dist/components/ImageCropper.d.mts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ImageCropperProps as ImageCropperProps$1, CropRect, CropResult } from '@expcat/tigercat-core';
+
+interface ImageCropperProps extends Omit<ImageCropperProps$1, 'className'> {
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * Callback when crop area changes
+     */
+    onCropChange?: (rect: CropRect) => void;
+    /**
+     * Callback when image is loaded and ready
+     */
+    onReady?: () => void;
+}
+interface ImageCropperRef {
+    getCropResult: () => Promise<CropResult>;
+}
+declare const ImageCropper: React.ForwardRefExoticComponent<ImageCropperProps & React.RefAttributes<ImageCropperRef>>;
+
+export { ImageCropper, type ImageCropperProps, type ImageCropperRef };

package/dist/components/ImageCropper.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ImageCropperProps as ImageCropperProps$1, CropRect, CropResult } from '@expcat/tigercat-core';
+
+interface ImageCropperProps extends Omit<ImageCropperProps$1, 'className'> {
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * Callback when crop area changes
+     */
+    onCropChange?: (rect: CropRect) => void;
+    /**
+     * Callback when image is loaded and ready
+     */
+    onReady?: () => void;
+}
+interface ImageCropperRef {
+    getCropResult: () => Promise<CropResult>;
+}
+declare const ImageCropper: React.ForwardRefExoticComponent<ImageCropperProps & React.RefAttributes<ImageCropperRef>>;
+
+export { ImageCropper, type ImageCropperProps, type ImageCropperRef };

package/dist/components/ImageCropper.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var chunkU3JOBIDU_js = require('../chunk-U3JOBIDU.js');
+
+
+
+Object.defineProperty(exports, "ImageCropper", {
+  enumerable: true,
+  get: function () { return chunkU3JOBIDU_js.ImageCropper; }
+});

package/dist/components/ImageCropper.mjs

@@ -0,0 +1 @@
+export { ImageCropper } from '../chunk-2EOXY2LP.mjs';

package/dist/components/ImageGroup.d.mts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface ImageGroupContextValue {
+    register: (src: string) => number;
+    unregister: (src: string) => void;
+    openPreview: (index: number) => void;
+}
+declare const ImageGroupContext: React.Context<ImageGroupContextValue | null>;
+interface ImageGroupProps {
+    /**
+     * Whether to enable preview for all child images
+     * @default true
+     */
+    preview?: boolean;
+    /**
+     * Callback when preview visibility changes
+     */
+    onPreviewVisibleChange?: (visible: boolean) => void;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const ImageGroup: React.FC<ImageGroupProps>;
+
+export { ImageGroup, ImageGroupContext, type ImageGroupContextValue, type ImageGroupProps };

package/dist/components/ImageGroup.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface ImageGroupContextValue {
+    register: (src: string) => number;
+    unregister: (src: string) => void;
+    openPreview: (index: number) => void;
+}
+declare const ImageGroupContext: React.Context<ImageGroupContextValue | null>;
+interface ImageGroupProps {
+    /**
+     * Whether to enable preview for all child images
+     * @default true
+     */
+    preview?: boolean;
+    /**
+     * Callback when preview visibility changes
+     */
+    onPreviewVisibleChange?: (visible: boolean) => void;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const ImageGroup: React.FC<ImageGroupProps>;
+
+export { ImageGroup, ImageGroupContext, type ImageGroupContextValue, type ImageGroupProps };

package/dist/components/ImageGroup.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunkNV3JUZ3N_js = require('../chunk-NV3JUZ3N.js');
+require('../chunk-GNMOOYHG.js');
+require('../chunk-ZYPEO2KY.js');
+
+
+
+Object.defineProperty(exports, "ImageGroup", {
+  enumerable: true,
+  get: function () { return chunkNV3JUZ3N_js.ImageGroup; }
+});
+Object.defineProperty(exports, "ImageGroupContext", {
+  enumerable: true,
+  get: function () { return chunkNV3JUZ3N_js.ImageGroupContext; }
+});

package/dist/components/ImageGroup.mjs

@@ -0,0 +1,3 @@
+export { ImageGroup, ImageGroupContext } from '../chunk-QIJG42YQ.mjs';
+import '../chunk-5CLXOFRZ.mjs';
+import '../chunk-WLIFEALE.mjs';

package/dist/components/ImagePreview.d.mts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ImagePreviewProps as ImagePreviewProps$1 } from '@expcat/tigercat-core';
+
+interface ImagePreviewProps extends ImagePreviewProps$1 {
+    /**
+     * Callback when visibility changes
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Callback when current index changes
+     */
+    onCurrentIndexChange?: (index: number) => void;
+    /**
+     * Callback when scale changes
+     */
+    onScaleChange?: (scale: number) => void;
+}
+declare const ImagePreview: React.FC<ImagePreviewProps>;
+
+export { ImagePreview, type ImagePreviewProps };

package/dist/components/ImagePreview.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ImagePreviewProps as ImagePreviewProps$1 } from '@expcat/tigercat-core';
+
+interface ImagePreviewProps extends ImagePreviewProps$1 {
+    /**
+     * Callback when visibility changes
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Callback when current index changes
+     */
+    onCurrentIndexChange?: (index: number) => void;
+    /**
+     * Callback when scale changes
+     */
+    onScaleChange?: (scale: number) => void;
+}
+declare const ImagePreview: React.FC<ImagePreviewProps>;
+
+export { ImagePreview, type ImagePreviewProps };

package/dist/components/ImagePreview.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunkGNMOOYHG_js = require('../chunk-GNMOOYHG.js');
+require('../chunk-ZYPEO2KY.js');
+
+
+
+Object.defineProperty(exports, "ImagePreview", {
+  enumerable: true,
+  get: function () { return chunkGNMOOYHG_js.ImagePreview; }
+});

package/dist/components/ImagePreview.mjs

@@ -0,0 +1,2 @@
+export { ImagePreview } from '../chunk-5CLXOFRZ.mjs';
+import '../chunk-WLIFEALE.mjs';

package/dist/index.d.mts

@@ -35,6 +35,10 @@ export { Tag, TagProps } from './components/Tag.mjs';
 export { Badge, BadgeProps } from './components/Badge.mjs';
 export { Card, CardProps } from './components/Card.mjs';
 export { Avatar, AvatarProps } from './components/Avatar.mjs';
+export { Image, ImageProps } from './components/Image.mjs';
+export { ImagePreview, ImagePreviewProps } from './components/ImagePreview.mjs';
+export { ImageGroup, ImageGroupContext, ImageGroupContextValue, ImageGroupProps } from './components/ImageGroup.mjs';
+export { ImageCropper, ImageCropperProps, ImageCropperRef } from './components/ImageCropper.mjs';
 export { List, ListProps } from './components/List.mjs';
 export { default as Descriptions, DescriptionsProps } from './components/Descriptions.mjs';
 export { Timeline, TimelineProps } from './components/Timeline.mjs';
@@ -72,6 +76,7 @@ export { default as CommentThread, CommentThreadProps } from './components/Comme
 export { default as NotificationCenter, NotificationCenterProps } from './components/NotificationCenter.mjs';
 export { default as DataTableWithToolbar, DataTableWithToolbarProps } from './components/DataTableWithToolbar.mjs';
 export { default as FormWizard, FormWizardProps } from './components/FormWizard.mjs';
+export { CropUpload, CropUploadProps } from './components/CropUpload.mjs';
 export { default as ChartCanvas, ChartCanvasProps } from './components/ChartCanvas.mjs';
 export { default as ChartAxis, ChartAxisProps } from './components/ChartAxis.mjs';
 export { default as ChartGrid, ChartGridProps } from './components/ChartGrid.mjs';

package/dist/index.d.ts

@@ -35,6 +35,10 @@ export { Tag, TagProps } from './components/Tag.js';
 export { Badge, BadgeProps } from './components/Badge.js';
 export { Card, CardProps } from './components/Card.js';
 export { Avatar, AvatarProps } from './components/Avatar.js';
+export { Image, ImageProps } from './components/Image.js';
+export { ImagePreview, ImagePreviewProps } from './components/ImagePreview.js';
+export { ImageGroup, ImageGroupContext, ImageGroupContextValue, ImageGroupProps } from './components/ImageGroup.js';
+export { ImageCropper, ImageCropperProps, ImageCropperRef } from './components/ImageCropper.js';
 export { List, ListProps } from './components/List.js';
 export { default as Descriptions, DescriptionsProps } from './components/Descriptions.js';
 export { Timeline, TimelineProps } from './components/Timeline.js';
@@ -72,6 +76,7 @@ export { default as CommentThread, CommentThreadProps } from './components/Comme
 export { default as NotificationCenter, NotificationCenterProps } from './components/NotificationCenter.js';
 export { default as DataTableWithToolbar, DataTableWithToolbarProps } from './components/DataTableWithToolbar.js';
 export { default as FormWizard, FormWizardProps } from './components/FormWizard.js';
+export { CropUpload, CropUploadProps } from './components/CropUpload.js';
 export { default as ChartCanvas, ChartCanvasProps } from './components/ChartCanvas.js';
 export { default as ChartAxis, ChartAxisProps } from './components/ChartAxis.js';
 export { default as ChartGrid, ChartGridProps } from './components/ChartGrid.js';