asterui 0.12.26 → 0.12.27

package/dist/index39.js

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

package/dist/index39.js.map

@@ -1 +1 @@
-{"version":3,"file":"index39.js","sources":["../src/components/Image.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\n\nexport interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {\n  src: string\n  alt?: string\n  fallback?: string\n  placeholder?: React.ReactNode\n  preview?: boolean\n  width?: string | number\n  height?: string | number\n  className?: string\n  onLoad?: () => void\n  onError?: () => void\n}\n\nexport const Image: React.FC<ImageProps> = ({\n  src,\n  alt = '',\n  fallback,\n  placeholder,\n  preview = true,\n  width,\n  height,\n  className = '',\n  onLoad,\n  onError,\n  ...props\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\n  useEffect(() => {\n    setLoading(true)\n    setError(false)\n    setCurrentSrc(src)\n  }, [src])\n\n  const handleLoad = () => {\n    setLoading(false)\n    setError(false)\n    onLoad?.()\n  }\n\n  const handleError = () => {\n    setLoading(false)\n    setError(true)\n    if (fallback) {\n      setCurrentSrc(fallback)\n    }\n    onError?.()\n  }\n\n  const handleImageClick = () => {\n    if (preview && !error && !loading) {\n      setShowPreview(true)\n    }\n  }\n\n  const handleClosePreview = () => {\n    setShowPreview(false)\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 imageClasses = [\n    className,\n    preview && !error && !loading ? 'cursor-pointer hover:opacity-80 transition-opacity' : '',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <>\n      <div className=\"relative inline-block\" style={getStyle()}>\n        {loading && placeholder && (\n          <div className=\"absolute inset-0 flex items-center justify-center bg-base-200\">\n            {placeholder}\n          </div>\n        )}\n        <img\n          {...props}\n          src={currentSrc}\n          alt={alt}\n          className={imageClasses}\n          style={{ ...getStyle(), display: loading ? 'none' : 'block' }}\n          onLoad={handleLoad}\n          onError={handleError}\n          onClick={handleImageClick}\n        />\n        {error && !fallback && (\n          <div\n            className=\"flex items-center justify-center bg-base-200 text-base-content/50\"\n            style={getStyle()}\n          >\n            <svg\n              className=\"w-12 h-12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\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        >\n          <div className=\"relative max-w-full max-h-full\">\n            <button\n              className=\"absolute top-4 right-4 btn btn-circle btn-sm\"\n              onClick={handleClosePreview}\n            >\n              <svg\n                className=\"w-6 h-6\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\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            />\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n"],"names":["Image","src","alt","fallback","placeholder","preview","width","height","className","onLoad","onError","props","loading","setLoading","useState","error","setError","showPreview","setShowPreview","currentSrc","setCurrentSrc","useEffect","handleLoad","handleError","handleImageClick","handleClosePreview","getStyle","style","imageClasses","jsxs","Fragment","jsx","e"],"mappings":"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"}
+{"version":3,"file":"index39.js","sources":["../src/components/Image.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, useCallback } from 'react'\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\n    useEffect(() => {\n      setLoading(true)\n      setError(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      setLoading(false)\n      setError(true)\n      if (fallback) {\n        setCurrentSrc(fallback)\n      }\n      onError?.()\n    }, [fallback, 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={{ ...getStyle(), display: loading ? 'none' : 'block' }}\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 && !fallback && (\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 btn btn-circle btn-sm\"\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":["Image","forwardRef","src","alt","fallback","placeholder","preview","width","height","className","onLoad","onError","testId","props","ref","loading","setLoading","useState","error","setError","showPreview","setShowPreview","currentSrc","setCurrentSrc","useEffect","handleLoad","useCallback","handleError","handleImageClick","handleClosePreview","handleKeyDown","handlePreviewKeyDown","getStyle","style","isPreviewable","imageClasses","jsxs","Fragment","jsx"],"mappings":"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"}