@companix/uikit 0.1.31 → 0.1.33

package/dist/ImageBase/index.d.ts

@@ -1,8 +1,9 @@
-export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+export interface ImageBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     src: string;
     previewSrc?: string;
     maskWidth: number;
     maskHeight: number;
     enableAspectRatio?: boolean;
+    imgAttrs?: Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'className'>;
 }
 export declare const ImageBase: (props: ImageBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/bundle.es45.js

@@ -1,28 +1,30 @@
-import { jsxs as $, jsx as l } from "react/jsx-runtime";
-import b from "classnames";
-import { useRef as y, useMemo as F, useState as o } from "react";
-const L = (a) => {
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import y from "classnames";
+import { useRef as F, useMemo as I, useState as o } from "react";
+const C = (a) => {
   const {
     previewSrc: e,
     maskHeight: s,
     maskWidth: t,
-    className: n,
-    src: r,
-    children: m,
-    enableAspectRatio: d,
-    ...g
-  } = a, p = y(null), f = F(() => I(t, s), [t, s]), [i, h] = o(!1), [v, u] = o(!1), [x, c] = o(!1), w = () => {
-    v && (u(!1), c(!1));
+    className: m,
+    src: l,
+    children: d,
+    enableAspectRatio: g,
+    imgAttrs: p,
+    ...f
+  } = a, h = F(null), u = I(() => N(t, s), [t, s]), [r, v] = o(!1), [x, n] = o(!1), [w, c] = o(!1), $ = () => {
+    x && (n(!1), c(!1));
   };
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ b(
     "div",
     {
-      className: b("image-base", { "image-base-loading": !i }, n),
-      style: d ? { aspectRatio: t / s } : {},
-      onClick: w,
+      className: y("image-base", { "image-base-loading": !r }, m),
+      style: g ? { aspectRatio: t / s } : {},
+      onClickCapture: $,
+      ...f,
       children: [
-        !i && /* @__PURE__ */ l("img", { className: "image-base-placeholder", src: f, alt: "" }),
-        e && e !== r && !i && !x && /* @__PURE__ */ l(
+        !r && /* @__PURE__ */ i("img", { className: "image-base-placeholder", src: u, alt: "" }),
+        e && e !== l && !r && !w && /* @__PURE__ */ i(
           "img",
           {
             className: "image-base-preview",
@@ -34,25 +36,26 @@ const L = (a) => {
             alt: ""
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ i(
           "img",
           {
-            ref: p,
+            ref: h,
             className: "image-base-img",
-            src: r,
+            src: l,
             decoding: "async",
-            onLoad: () => h(!0),
-            ...g
+            onLoad: () => v(!0),
+            onError: () => n(!0),
+            ...p
           }
         ),
-        m
+        d
       ]
     }
   );
-}, I = (a, e) => {
+}, N = (a, e) => {
   const s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${a} ${e}" width="${a}" height="${e}" />`;
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(s)}`;
 };
 export {
-  L as ImageBase
+  C as ImageBase
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/uikit",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "main": "./dist/bundle.es.js",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",