@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-S5GHNXGQ.mjs

@@ -0,0 +1,350 @@
+import {
+  ImageGroupContext
+} from "./chunk-4IVRLBKW.mjs";
+import {
+  ImagePreview
+} from "./chunk-SGKPZW57.mjs";
+import {
+  usePopup
+} from "./chunk-S37KEELR.mjs";
+import {
+  renderOverlayPortal
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Image.tsx
+import React, {
+  forwardRef,
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useContext,
+  useCallback,
+  useId
+} from "react";
+import {
+  applyImageLoadError,
+  applyImageLoadSuccess,
+  classNames,
+  createImageLoadState,
+  formatImagePreviewAriaLabel,
+  getImageImgClasses,
+  getImageLabels,
+  imageBaseClasses,
+  imageFrameClasses,
+  imageErrorClasses,
+  imageErrorIconPath,
+  imageLoadingClasses,
+  imageLoadingOverlayClasses,
+  imageLoadingSpinnerClasses,
+  imageLoadingSpinnerPath,
+  imagePreviewCursorClass,
+  imagePreviewHostClasses,
+  isImageHoverPreviewEnabled,
+  resetImageLoadState,
+  resolveImageHoverPlacement,
+  resolveImagePreviewEnabled,
+  resolveImagePreviewSrc,
+  toCSSSize
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SvgIcon = ({ d, className = "w-8 h-8" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    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: "1.5", d })
+  }
+);
+var LoadingSpinner = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: imageLoadingSpinnerClasses,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4",
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: imageLoadingSpinnerPath })
+    ]
+  }
+);
+var Image = forwardRef(function Image2({
+  src,
+  alt = "",
+  width,
+  height,
+  fit = "cover",
+  fallbackSrc,
+  preview = true,
+  previewTrigger = "click",
+  lazy = false,
+  srcSet,
+  sizes,
+  crossOrigin,
+  decoding,
+  referrerPolicy,
+  fetchPriority,
+  className,
+  errorRender,
+  placeholderRender,
+  onPreviewOpenChange,
+  onClick,
+  onKeyDown,
+  onLoad,
+  onError,
+  onFocus,
+  onBlur,
+  style,
+  ...props
+}, forwardedRef) {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getImageLabels(config.locale), [config.locale]);
+  const [loadState, setLoadState] = useState(() => createImageLoadState(src, lazy));
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const containerRef = useRef(null);
+  const inViewRef = useRef(!lazy);
+  const group = useContext(ImageGroupContext);
+  const instanceId = useId();
+  const previewEnabled = resolveImagePreviewEnabled(preview, group?.preview);
+  const hoverPreviewEnabled = isImageHoverPreviewEnabled(
+    previewEnabled,
+    previewTrigger,
+    Boolean(group)
+  );
+  const clickPreviewEnabled = previewEnabled;
+  const hoverPlacement = resolveImageHoverPlacement(config.direction);
+  const {
+    currentVisible: hoverVisible,
+    triggerRef: hoverTriggerRef,
+    floatingRef: hoverFloatingRef,
+    floatingStyles: hoverFloatingStyles,
+    floatingClasses: hoverFloatingClasses,
+    positioned: hoverPositioned,
+    overlayTarget: hoverOverlayTarget,
+    setVisible: setHoverVisible,
+    triggerHandlers: hoverTriggerHandlers
+  } = usePopup({
+    trigger: "hover",
+    placement: hoverPlacement,
+    offset: 12,
+    disabled: !hoverPreviewEnabled
+  });
+  const setRootRef = useCallback(
+    (el) => {
+      containerRef.current = el;
+      hoverTriggerRef.current = el;
+    },
+    [hoverTriggerRef]
+  );
+  useEffect(() => {
+    if (!group) return;
+    if (!src) {
+      group.unregister(instanceId);
+      return;
+    }
+    group.register({ id: instanceId, src, alt });
+    return () => {
+      group.unregister(instanceId);
+    };
+  }, [group, instanceId, src, alt]);
+  useEffect(() => {
+    if (!lazy) {
+      inViewRef.current = true;
+      setLoadState(resetImageLoadState(src, false, true));
+      return;
+    }
+    setLoadState(resetImageLoadState(src, true, inViewRef.current));
+    if (inViewRef.current) return;
+    const root = containerRef.current;
+    if (!root) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0]?.isIntersecting) return;
+        inViewRef.current = true;
+        setLoadState(resetImageLoadState(src, true, true));
+        observer.disconnect();
+      },
+      { threshold: 0.01 }
+    );
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [lazy, src]);
+  const handleLoad = useCallback(
+    (event) => {
+      setLoadState((current) => applyImageLoadSuccess(current));
+      onLoad?.(event);
+    },
+    [onLoad]
+  );
+  const handleError = useCallback(
+    (event) => {
+      setLoadState((current) => applyImageLoadError(current, fallbackSrc));
+      onError?.(event);
+    },
+    [fallbackSrc, onError]
+  );
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented || !clickPreviewEnabled) return;
+      if (group) {
+        group.openPreview(instanceId);
+        return;
+      }
+      setPreviewVisible(true);
+      onPreviewOpenChange?.(true);
+    },
+    [clickPreviewEnabled, group, instanceId, onClick, onPreviewOpenChange]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      onKeyDown?.(event);
+    },
+    [onKeyDown]
+  );
+  const handleFocus = useCallback(
+    (event) => {
+      onFocus?.(event);
+      if (hoverPreviewEnabled) setHoverVisible(true);
+    },
+    [hoverPreviewEnabled, onFocus, setHoverVisible]
+  );
+  const handleBlur = useCallback(
+    (event) => {
+      onBlur?.(event);
+      if (hoverPreviewEnabled) setHoverVisible(false);
+    },
+    [hoverPreviewEnabled, onBlur, setHoverVisible]
+  );
+  const containerClasses = useMemo(
+    () => classNames(
+      previewEnabled ? imagePreviewHostClasses : imageBaseClasses,
+      previewEnabled && imagePreviewCursorClass,
+      className
+    ),
+    [previewEnabled, className]
+  );
+  const imgClasses = useMemo(() => getImageImgClasses(fit), [fit]);
+  const containerStyle = useMemo(() => {
+    const next = { ...style };
+    const w = toCSSSize(width);
+    const h = toCSSSize(height);
+    if (w) next.width = w;
+    if (h) next.height = h;
+    return next;
+  }, [width, height, style]);
+  const previewSrc = resolveImagePreviewSrc(loadState, src);
+  const previewName = formatImagePreviewAriaLabel(
+    labels.previewAriaLabel,
+    alt,
+    labels.previewFallbackAlt
+  );
+  const loadingPlaceholder = placeholderRender ?? /* @__PURE__ */ jsx("div", { className: loadState.actualSrc ? imageLoadingOverlayClasses : imageLoadingClasses, children: /* @__PURE__ */ jsx(LoadingSpinner, {}) });
+  const errorPlaceholder = errorRender ?? /* @__PURE__ */ jsx("div", { className: imageErrorClasses, children: /* @__PURE__ */ jsx(SvgIcon, { d: imageErrorIconPath }) });
+  let content;
+  if (loadState.error) {
+    content = errorPlaceholder;
+  } else if (!loadState.actualSrc) {
+    content = loadingPlaceholder;
+  } else {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          ref: forwardedRef,
+          src: loadState.actualSrc,
+          alt: previewEnabled ? "" : alt,
+          className: imgClasses,
+          srcSet,
+          sizes,
+          crossOrigin,
+          decoding,
+          referrerPolicy,
+          fetchPriority,
+          onLoad: handleLoad,
+          onError: handleError
+        }
+      ),
+      loadState.loading ? loadingPlaceholder : null
+    ] });
+  }
+  const hostTag = previewEnabled ? "button" : "div";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    React.createElement(
+      hostTag,
+      {
+        ...props,
+        ref: setRootRef,
+        className: containerClasses,
+        style: containerStyle,
+        type: previewEnabled ? "button" : void 0,
+        "aria-label": previewEnabled ? previewName : void 0,
+        ...hoverPreviewEnabled ? hoverTriggerHandlers : {},
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur
+      },
+      previewEnabled ? React.createElement("span", { className: imageFrameClasses }, content) : content
+    ),
+    !group && previewVisible && previewSrc && /* @__PURE__ */ jsx(
+      ImagePreview,
+      {
+        open: previewVisible,
+        images: [{ src: previewSrc, alt }],
+        currentIndex: 0,
+        onOpenChange: (val) => {
+          setPreviewVisible(val);
+          onPreviewOpenChange?.(val);
+        }
+      }
+    ),
+    hoverPreviewEnabled && hoverVisible && previewSrc && renderOverlayPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: hoverFloatingRef,
+          style: hoverFloatingStyles,
+          className: classNames(
+            hoverFloatingClasses,
+            "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+          ),
+          "data-positioned": hoverPositioned,
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: previewSrc,
+              alt: "",
+              className: "block max-w-[16rem] max-h-[16rem] object-contain"
+            }
+          )
+        }
+      ),
+      hoverOverlayTarget
+    )
+  ] });
+});
+
+export {
+  Image
+};