asterui 0.12.66 → 0.12.67

package/dist/components/Image.js

@@ -1,99 +1,114 @@
-import { jsxs as v, Fragment as H, jsx as a } from "react/jsx-runtime";
-import { forwardRef as T, useState as l, useEffect as W, useCallback as i } from "react";
-const R = "btn", V = "btn-circle", q = "btn-sm", A = T(
+import { jsxs as x, Fragment as H, jsx as t } from "react/jsx-runtime";
+import { forwardRef as T, useState as u, useRef as V, useEffect as B, useCallback as l } from "react";
+const q = "btn", A = "btn-circle", G = "btn-sm", I = T(
   ({
-    src: c,
-    alt: s = "",
-    fallback: g,
-    placeholder: y,
-    preview: n = !0,
-    width: d,
-    height: m,
-    className: j = "",
-    onLoad: k,
-    onError: w,
+    src: m,
+    alt: c = "",
+    fallback: o,
+    placeholder: $,
+    preview: d = !0,
+    width: f,
+    height: h,
+    className: S = "",
+    onLoad: C,
+    onError: N,
     "data-testid": r = "image",
-    ...L
-  }, P) => {
-    const [t, u] = l(!0), [o, f] = l(!1), [B, h] = l(!1), [S, x] = l(c), [$, C] = l(!1);
-    W(() => {
-      u(!0), f(!1), C(!1), x(c);
-    }, [c]);
-    const D = i(() => {
-      u(!1), f(!1), k?.();
-    }, [k]), E = i(() => {
-      if (w?.(), g && !$) {
-        C(!0), x(g), u(!0), f(!1);
+    ...D
+  }, g) => {
+    const [a, i] = u(!0), [s, n] = u(!1), [E, p] = u(!1), [j, b] = u(m), [v, w] = u(!1), L = V(null);
+    B(() => {
+      i(!0), n(!1), w(!1), b(m);
+    }, [m]), B(() => {
+      const e = L.current;
+      if (!(!e || !e.complete)) {
+        if (e.naturalWidth > 0) {
+          i(!1), n(!1);
+          return;
+        }
+        if (o && !v) {
+          w(!0), b(o), i(!0), n(!1);
+          return;
+        }
+        i(!1), n(!0);
+      }
+    }, [j, o, v]);
+    const F = l(() => {
+      i(!1), n(!1), C?.();
+    }, [C]), K = l(() => {
+      if (N?.(), o && !v) {
+        w(!0), b(o), i(!0), n(!1);
         return;
       }
-      u(!1), f(!0);
-    }, [g, $, w]), F = i(() => {
-      n && !o && !t && h(!0);
-    }, [n, o, t]), N = i(() => {
-      h(!1);
-    }, []), K = i(
+      i(!1), n(!0);
+    }, [o, v, N]), M = l(() => {
+      d && !s && !a && p(!0);
+    }, [d, s, a]), P = l(() => {
+      p(!1);
+    }, []), R = l(
       (e) => {
-        n && !o && !t && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), h(!0));
+        d && !s && !a && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), p(!0));
       },
-      [n, o, t]
-    ), M = i((e) => {
-      e.key === "Escape" && h(!1);
-    }, []), p = () => {
+      [d, s, a]
+    ), W = l((e) => {
+      e.key === "Escape" && p(!1);
+    }, []), k = () => {
       const e = {};
-      return d && (e.width = typeof d == "number" ? `${d}px` : d), m && (e.height = typeof m == "number" ? `${m}px` : m), e;
-    }, b = n && !o && !t, z = [
-      j,
-      b ? "cursor-pointer hover:opacity-80 transition-opacity" : ""
+      return f && (e.width = typeof f == "number" ? `${f}px` : f), h && (e.height = typeof h == "number" ? `${h}px` : h), e;
+    }, y = d && !s && !a, z = [
+      S,
+      y ? "cursor-pointer hover:opacity-80 transition-opacity" : ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ v(H, { children: [
-      /* @__PURE__ */ v(
+    return /* @__PURE__ */ x(H, { children: [
+      /* @__PURE__ */ x(
         "div",
         {
           className: "relative inline-block",
-          style: p(),
+          style: k(),
           "data-testid": r,
-          "data-state": t ? "loading" : o ? "error" : "loaded",
+          "data-state": a ? "loading" : s ? "error" : "loaded",
           children: [
-            t && y && /* @__PURE__ */ a(
+            a && $ && /* @__PURE__ */ t(
               "div",
               {
                 className: "absolute inset-0 flex items-center justify-center bg-base-200",
                 "data-testid": `${r}-placeholder`,
-                children: y
+                children: $
               }
             ),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ t(
               "img",
               {
-                ref: P,
-                ...L,
-                src: S,
-                alt: s,
+                ref: (e) => {
+                  L.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+                },
+                ...D,
+                src: j,
+                alt: c,
                 className: z,
                 style: {
-                  ...p(),
-                  opacity: t ? 0 : 1,
+                  ...k(),
+                  opacity: a ? 0 : 1,
                   transition: "opacity 150ms ease"
                 },
-                onLoad: D,
-                onError: E,
-                onClick: F,
-                onKeyDown: K,
-                tabIndex: b ? 0 : void 0,
-                role: b ? "button" : void 0,
-                "aria-label": b ? `${s || "Image"} (click to preview)` : void 0,
+                onLoad: F,
+                onError: K,
+                onClick: M,
+                onKeyDown: R,
+                tabIndex: y ? 0 : void 0,
+                role: y ? "button" : void 0,
+                "aria-label": y ? `${c || "Image"} (click to preview)` : void 0,
                 "data-testid": `${r}-img`
               }
             ),
-            o && /* @__PURE__ */ a(
+            s && /* @__PURE__ */ t(
               "div",
               {
                 className: "flex items-center justify-center bg-base-200 text-base-content/50",
-                style: p(),
+                style: k(),
                 "data-testid": `${r}-error`,
                 role: "img",
-                "aria-label": `Failed to load: ${s || "image"}`,
-                children: /* @__PURE__ */ a(
+                "aria-label": `Failed to load: ${c || "image"}`,
+                children: /* @__PURE__ */ t(
                   "svg",
                   {
                     className: "w-12 h-12",
@@ -101,7 +116,7 @@ const R = "btn", V = "btn-circle", q = "btn-sm", A = T(
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ a(
+                    children: /* @__PURE__ */ t(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -117,26 +132,26 @@ const R = "btn", V = "btn-circle", q = "btn-sm", A = T(
           ]
         }
       ),
-      B && /* @__PURE__ */ a(
+      E && /* @__PURE__ */ t(
         "div",
         {
           className: "fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4",
-          onClick: N,
-          onKeyDown: M,
+          onClick: P,
+          onKeyDown: W,
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": `Preview: ${s || "Image"}`,
+          "aria-label": `Preview: ${c || "Image"}`,
           "data-testid": `${r}-preview`,
-          children: /* @__PURE__ */ v("div", { className: "relative max-w-full max-h-full", children: [
-            /* @__PURE__ */ a(
+          children: /* @__PURE__ */ x("div", { className: "relative max-w-full max-h-full", children: [
+            /* @__PURE__ */ t(
               "button",
               {
-                className: `absolute top-4 right-4 ${R} ${V} ${q}`,
-                onClick: N,
+                className: `absolute top-4 right-4 ${q} ${A} ${G}`,
+                onClick: P,
                 "aria-label": "Close preview",
                 autoFocus: !0,
                 "data-testid": `${r}-preview-close`,
-                children: /* @__PURE__ */ a(
+                children: /* @__PURE__ */ t(
                   "svg",
                   {
                     className: "w-6 h-6",
@@ -144,7 +159,7 @@ const R = "btn", V = "btn-circle", q = "btn-sm", A = T(
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ a(
+                    children: /* @__PURE__ */ t(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -157,11 +172,11 @@ const R = "btn", V = "btn-circle", q = "btn-sm", A = T(
                 )
               }
             ),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ t(
               "img",
               {
-                src: c,
-                alt: s,
+                src: m,
+                alt: c,
                 className: "max-w-full max-h-[90vh] object-contain",
                 onClick: (e) => e.stopPropagation(),
                 "data-testid": `${r}-preview-img`
@@ -173,8 +188,8 @@ const R = "btn", V = "btn-circle", q = "btn-sm", A = T(
     ] });
   }
 );
-A.displayName = "Image";
+I.displayName = "Image";
 export {
-  A as Image
+  I as Image
 };
 //# sourceMappingURL=Image.js.map

package/dist/components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../src/components/Image.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, useCallback } from 'react'\n\n// DaisyUI classes\nconst dBtn = 'btn'\nconst dBtnCircle = 'btn-circle'\nconst dBtnSm = 'btn-sm'\n\nexport interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {\n  /** Image source URL */\n  src: string\n  /** Alternative text for the image */\n  alt?: string\n  /** Fallback image URL when source fails to load */\n  fallback?: string\n  /** Placeholder content shown while loading */\n  placeholder?: React.ReactNode\n  /** Enable click to preview image in lightbox */\n  preview?: boolean\n  /** Image width */\n  width?: string | number\n  /** Image height */\n  height?: string | number\n  /** Additional CSS classes */\n  className?: string\n  /** Callback when image loads successfully */\n  onLoad?: () => void\n  /** Callback when image fails to load */\n  onError?: () => void\n  /** Test ID for the component */\n  'data-testid'?: string\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      src,\n      alt = '',\n      fallback,\n      placeholder,\n      preview = true,\n      width,\n      height,\n      className = '',\n      onLoad,\n      onError,\n      'data-testid': testId = 'image',\n      ...props\n    },\n    ref\n  ) => {\n    const [loading, setLoading] = useState(true)\n    const [error, setError] = useState(false)\n    const [showPreview, setShowPreview] = useState(false)\n    const [currentSrc, setCurrentSrc] = useState(src)\n    const [hasTriedFallback, setHasTriedFallback] = useState(false)\n\n    useEffect(() => {\n      setLoading(true)\n      setError(false)\n      setHasTriedFallback(false)\n      setCurrentSrc(src)\n    }, [src])\n\n    const handleLoad = useCallback(() => {\n      setLoading(false)\n      setError(false)\n      onLoad?.()\n    }, [onLoad])\n\n    const handleError = useCallback(() => {\n      onError?.()\n      if (fallback && !hasTriedFallback) {\n        setHasTriedFallback(true)\n        setCurrentSrc(fallback)\n        setLoading(true)\n        setError(false)\n        return\n      }\n      setLoading(false)\n      setError(true)\n    }, [fallback, hasTriedFallback, onError])\n\n    const handleImageClick = useCallback(() => {\n      if (preview && !error && !loading) {\n        setShowPreview(true)\n      }\n    }, [preview, error, loading])\n\n    const handleClosePreview = useCallback(() => {\n      setShowPreview(false)\n    }, [])\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (preview && !error && !loading && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault()\n          setShowPreview(true)\n        }\n      },\n      [preview, error, loading]\n    )\n\n    const handlePreviewKeyDown = useCallback((e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setShowPreview(false)\n      }\n    }, [])\n\n    const getStyle = (): React.CSSProperties => {\n      const style: React.CSSProperties = {}\n      if (width) {\n        style.width = typeof width === 'number' ? `${width}px` : width\n      }\n      if (height) {\n        style.height = typeof height === 'number' ? `${height}px` : height\n      }\n      return style\n    }\n\n    const isPreviewable = preview && !error && !loading\n    const imageClasses = [\n      className,\n      isPreviewable ? 'cursor-pointer hover:opacity-80 transition-opacity' : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <>\n        <div\n          className=\"relative inline-block\"\n          style={getStyle()}\n          data-testid={testId}\n          data-state={loading ? 'loading' : error ? 'error' : 'loaded'}\n        >\n          {loading && placeholder && (\n            <div\n              className=\"absolute inset-0 flex items-center justify-center bg-base-200\"\n              data-testid={`${testId}-placeholder`}\n            >\n              {placeholder}\n            </div>\n          )}\n          <img\n            ref={ref}\n            {...props}\n            src={currentSrc}\n            alt={alt}\n            className={imageClasses}\n            style={{\n              ...getStyle(),\n              opacity: loading ? 0 : 1,\n              transition: 'opacity 150ms ease',\n            }}\n            onLoad={handleLoad}\n            onError={handleError}\n            onClick={handleImageClick}\n            onKeyDown={handleKeyDown}\n            tabIndex={isPreviewable ? 0 : undefined}\n            role={isPreviewable ? 'button' : undefined}\n            aria-label={isPreviewable ? `${alt || 'Image'} (click to preview)` : undefined}\n            data-testid={`${testId}-img`}\n          />\n          {error && (\n            <div\n              className=\"flex items-center justify-center bg-base-200 text-base-content/50\"\n              style={getStyle()}\n              data-testid={`${testId}-error`}\n              role=\"img\"\n              aria-label={`Failed to load: ${alt || 'image'}`}\n            >\n              <svg\n                className=\"w-12 h-12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n                />\n              </svg>\n            </div>\n          )}\n        </div>\n\n        {showPreview && (\n          <div\n            className=\"fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4\"\n            onClick={handleClosePreview}\n            onKeyDown={handlePreviewKeyDown}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={`Preview: ${alt || 'Image'}`}\n            data-testid={`${testId}-preview`}\n          >\n            <div className=\"relative max-w-full max-h-full\">\n              <button\n                className={`absolute top-4 right-4 ${dBtn} ${dBtnCircle} ${dBtnSm}`}\n                onClick={handleClosePreview}\n                aria-label=\"Close preview\"\n                autoFocus\n                data-testid={`${testId}-preview-close`}\n              >\n                <svg\n                  className=\"w-6 h-6\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M6 18L18 6M6 6l12 12\"\n                  />\n                </svg>\n              </button>\n              <img\n                src={src}\n                alt={alt}\n                className=\"max-w-full max-h-[90vh] object-contain\"\n                onClick={(e) => e.stopPropagation()}\n                data-testid={`${testId}-preview-img`}\n              />\n            </div>\n          </div>\n        )}\n      </>\n    )\n  }\n)\n\nImage.displayName = 'Image'\n"],"names":["dBtn","dBtnCircle","dBtnSm","Image","forwardRef","src","alt","fallback","placeholder","preview","width","height","className","onLoad","onError","testId","props","ref","loading","setLoading","useState","error","setError","showPreview","setShowPreview","currentSrc","setCurrentSrc","hasTriedFallback","setHasTriedFallback","useEffect","handleLoad","useCallback","handleError","handleImageClick","handleClosePreview","handleKeyDown","handlePreviewKeyDown","getStyle","style","isPreviewable","imageClasses","jsxs","Fragment","jsx"],"mappings":"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"}
+{"version":3,"file":"Image.js","sources":["../../src/components/Image.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, useCallback, useRef } from 'react'\n\n// DaisyUI classes\nconst dBtn = 'btn'\nconst dBtnCircle = 'btn-circle'\nconst dBtnSm = 'btn-sm'\n\nexport interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {\n  /** Image source URL */\n  src: string\n  /** Alternative text for the image */\n  alt?: string\n  /** Fallback image URL when source fails to load */\n  fallback?: string\n  /** Placeholder content shown while loading */\n  placeholder?: React.ReactNode\n  /** Enable click to preview image in lightbox */\n  preview?: boolean\n  /** Image width */\n  width?: string | number\n  /** Image height */\n  height?: string | number\n  /** Additional CSS classes */\n  className?: string\n  /** Callback when image loads successfully */\n  onLoad?: () => void\n  /** Callback when image fails to load */\n  onError?: () => void\n  /** Test ID for the component */\n  'data-testid'?: string\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      src,\n      alt = '',\n      fallback,\n      placeholder,\n      preview = true,\n      width,\n      height,\n      className = '',\n      onLoad,\n      onError,\n      'data-testid': testId = 'image',\n      ...props\n    },\n    ref\n  ) => {\n    const [loading, setLoading] = useState(true)\n    const [error, setError] = useState(false)\n    const [showPreview, setShowPreview] = useState(false)\n    const [currentSrc, setCurrentSrc] = useState(src)\n    const [hasTriedFallback, setHasTriedFallback] = useState(false)\n    const imgRef = useRef<HTMLImageElement | null>(null)\n\n    useEffect(() => {\n      setLoading(true)\n      setError(false)\n      setHasTriedFallback(false)\n      setCurrentSrc(src)\n    }, [src])\n\n    useEffect(() => {\n      const img = imgRef.current\n      if (!img || !img.complete) return\n\n      if (img.naturalWidth > 0) {\n        setLoading(false)\n        setError(false)\n        return\n      }\n\n      if (fallback && !hasTriedFallback) {\n        setHasTriedFallback(true)\n        setCurrentSrc(fallback)\n        setLoading(true)\n        setError(false)\n        return\n      }\n\n      setLoading(false)\n      setError(true)\n    }, [currentSrc, fallback, hasTriedFallback])\n\n    const handleLoad = useCallback(() => {\n      setLoading(false)\n      setError(false)\n      onLoad?.()\n    }, [onLoad])\n\n    const handleError = useCallback(() => {\n      onError?.()\n      if (fallback && !hasTriedFallback) {\n        setHasTriedFallback(true)\n        setCurrentSrc(fallback)\n        setLoading(true)\n        setError(false)\n        return\n      }\n      setLoading(false)\n      setError(true)\n    }, [fallback, hasTriedFallback, onError])\n\n    const handleImageClick = useCallback(() => {\n      if (preview && !error && !loading) {\n        setShowPreview(true)\n      }\n    }, [preview, error, loading])\n\n    const handleClosePreview = useCallback(() => {\n      setShowPreview(false)\n    }, [])\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (preview && !error && !loading && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault()\n          setShowPreview(true)\n        }\n      },\n      [preview, error, loading]\n    )\n\n    const handlePreviewKeyDown = useCallback((e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setShowPreview(false)\n      }\n    }, [])\n\n    const getStyle = (): React.CSSProperties => {\n      const style: React.CSSProperties = {}\n      if (width) {\n        style.width = typeof width === 'number' ? `${width}px` : width\n      }\n      if (height) {\n        style.height = typeof height === 'number' ? `${height}px` : height\n      }\n      return style\n    }\n\n    const isPreviewable = preview && !error && !loading\n    const imageClasses = [\n      className,\n      isPreviewable ? 'cursor-pointer hover:opacity-80 transition-opacity' : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <>\n        <div\n          className=\"relative inline-block\"\n          style={getStyle()}\n          data-testid={testId}\n          data-state={loading ? 'loading' : error ? 'error' : 'loaded'}\n        >\n          {loading && placeholder && (\n            <div\n              className=\"absolute inset-0 flex items-center justify-center bg-base-200\"\n              data-testid={`${testId}-placeholder`}\n            >\n              {placeholder}\n            </div>\n          )}\n          <img\n            ref={(node) => {\n              imgRef.current = node\n              if (typeof ref === 'function') {\n                ref(node)\n              } else if (ref) {\n                ref.current = node\n              }\n            }}\n            {...props}\n            src={currentSrc}\n            alt={alt}\n            className={imageClasses}\n            style={{\n              ...getStyle(),\n              opacity: loading ? 0 : 1,\n              transition: 'opacity 150ms ease',\n            }}\n            onLoad={handleLoad}\n            onError={handleError}\n            onClick={handleImageClick}\n            onKeyDown={handleKeyDown}\n            tabIndex={isPreviewable ? 0 : undefined}\n            role={isPreviewable ? 'button' : undefined}\n            aria-label={isPreviewable ? `${alt || 'Image'} (click to preview)` : undefined}\n            data-testid={`${testId}-img`}\n          />\n          {error && (\n            <div\n              className=\"flex items-center justify-center bg-base-200 text-base-content/50\"\n              style={getStyle()}\n              data-testid={`${testId}-error`}\n              role=\"img\"\n              aria-label={`Failed to load: ${alt || 'image'}`}\n            >\n              <svg\n                className=\"w-12 h-12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n                />\n              </svg>\n            </div>\n          )}\n        </div>\n\n        {showPreview && (\n          <div\n            className=\"fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4\"\n            onClick={handleClosePreview}\n            onKeyDown={handlePreviewKeyDown}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={`Preview: ${alt || 'Image'}`}\n            data-testid={`${testId}-preview`}\n          >\n            <div className=\"relative max-w-full max-h-full\">\n              <button\n                className={`absolute top-4 right-4 ${dBtn} ${dBtnCircle} ${dBtnSm}`}\n                onClick={handleClosePreview}\n                aria-label=\"Close preview\"\n                autoFocus\n                data-testid={`${testId}-preview-close`}\n              >\n                <svg\n                  className=\"w-6 h-6\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M6 18L18 6M6 6l12 12\"\n                  />\n                </svg>\n              </button>\n              <img\n                src={src}\n                alt={alt}\n                className=\"max-w-full max-h-[90vh] object-contain\"\n                onClick={(e) => e.stopPropagation()}\n                data-testid={`${testId}-preview-img`}\n              />\n            </div>\n          </div>\n        )}\n      </>\n    )\n  }\n)\n\nImage.displayName = 'Image'\n"],"names":["dBtn","dBtnCircle","dBtnSm","Image","forwardRef","src","alt","fallback","placeholder","preview","width","height","className","onLoad","onError","testId","props","ref","loading","setLoading","useState","error","setError","showPreview","setShowPreview","currentSrc","setCurrentSrc","hasTriedFallback","setHasTriedFallback","imgRef","useRef","useEffect","img","handleLoad","useCallback","handleError","handleImageClick","handleClosePreview","handleKeyDown","handlePreviewKeyDown","getStyle","style","isPreviewable","imageClasses","jsxs","Fragment","jsx","node"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asterui",
-  "version": "0.12.66",
+  "version": "0.12.67",
   "description": "React UI component library with DaisyUI",
   "homepage": "https://asterui.com",
   "repository": {