@solostylist/ui-kit 1.0.101 → 1.0.102

package/dist/s-chat-input/s-chat-input.js

@@ -1,71 +1,71 @@
 import { j as r } from "../jsx-runtime-DywqP_6a.js";
-import { forwardRef as F, useState as c, useRef as K, useId as O, useEffect as B } from "react";
-import { Box as t, outlinedInputClasses as T, Popper as W, ClickAwayListener as D } from "@mui/material";
-import H from "emoji-picker-react";
-import _ from "../s-file-icon/s-file-icon.js";
+import { forwardRef as S, useState as c, useRef as K, useId as T, useEffect as B } from "react";
+import { Box as s, outlinedInputClasses as D, Typography as E, Popper as W, ClickAwayListener as H } from "@mui/material";
+import _ from "emoji-picker-react";
+import q from "../s-file-icon/s-file-icon.js";
 import d from "../s-icon-button/s-icon-button.js";
-import q from "../s-text-field/s-text-field.js";
-import { C as G } from "../Close-DqRHeMAW.js";
-import { c as k } from "../createSvgIcon-DCQI9UV5.js";
-const J = k(/* @__PURE__ */ r.jsx("path", {
+import G from "../s-text-field/s-text-field.js";
+import { C as J } from "../Close-DqRHeMAW.js";
+import { c as v } from "../createSvgIcon-DCQI9UV5.js";
+const N = v(/* @__PURE__ */ r.jsx("path", {
   d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z"
-}), "ArrowUpward"), N = k(/* @__PURE__ */ r.jsx("path", {
+}), "ArrowUpward"), Q = v(/* @__PURE__ */ r.jsx("path", {
   d: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6z"
-}), "AttachFile"), Q = k(/* @__PURE__ */ r.jsx("path", {
+}), "AttachFile"), X = v(/* @__PURE__ */ r.jsx("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8M12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4m3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5"
-}), "EmojiEmotions"), ae = F(
-  ({ onSubmit: p, onFileSelect: m, disabled: a, acceptedFileTypes: E, maxFileSize: C, ...z }, M) => {
-    const [u, h] = c(""), [l, x] = c([]), [i, f] = c(/* @__PURE__ */ new Map()), [v, g] = c(!1), y = K(null), w = O(), b = (e) => e.type.startsWith("image/"), U = (e) => {
+}), "EmojiEmotions"), ie = S(
+  ({ onSubmit: p, onFileSelect: m, disabled: a, acceptedFileTypes: M, maxFileSize: k, ...z }, U) => {
+    const [u, h] = c(""), [l, x] = c([]), [i, f] = c(/* @__PURE__ */ new Map()), [C, g] = c(!1), y = K(null), w = T(), b = (e) => e.type.startsWith("image/"), L = (e) => {
       const o = `${e.name}-${e.size}-${e.lastModified}`;
       if (i.has(o))
         return i.get(o);
       if (b(e)) {
         const n = URL.createObjectURL(e);
-        return f((s) => new Map(s).set(o, n)), n;
+        return f((t) => new Map(t).set(o, n)), n;
       }
       return "";
-    }, L = (e) => {
-      h(e.target.value);
     }, $ = (e) => {
+      h(e.target.value);
+    }, P = (e) => {
       h((o) => o + e.emoji), g(!1);
-    }, P = () => {
-      g(!v);
+    }, V = () => {
+      g(!C);
     }, R = () => {
       a || u.trim().length === 0 && l.length === 0 || (p == null || p(u, l), h(""), i.forEach((e) => URL.revokeObjectURL(e)), f(/* @__PURE__ */ new Map()), x([]));
-    }, S = (e) => {
-      const n = Array.from(e.target.files || []).filter((s) => !(C && s.size > C));
-      x((s) => [...s, ...n]), m == null || m(n), e.target.value = "";
-    }, V = (e) => {
+    }, A = (e) => {
+      const n = Array.from(e.target.files || []).filter((t) => !(k && t.size > k));
+      x((t) => [...t, ...n]), m == null || m(n), e.target.value = "";
+    }, F = (e) => {
       const o = l[e];
       if (o && b(o)) {
-        const n = `${o.name}-${o.size}-${o.lastModified}`, s = i.get(n);
-        s && (URL.revokeObjectURL(s), f((j) => {
+        const n = `${o.name}-${o.size}-${o.lastModified}`, t = i.get(n);
+        t && (URL.revokeObjectURL(t), f((j) => {
           const I = new Map(j);
           return I.delete(n), I;
         }));
       }
-      x((n) => n.filter((s, j) => j !== e));
-    }, A = (e) => {
+      x((n) => n.filter((t, j) => j !== e));
+    }, O = (e) => {
       e.key === "Enter" && !e.shiftKey && (e.preventDefault(), R());
     };
     return B(() => () => {
       i.forEach((e) => URL.revokeObjectURL(e));
-    }, [i]), /* @__PURE__ */ r.jsxs(t, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
+    }, [i]), /* @__PURE__ */ r.jsxs(s, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
       /* @__PURE__ */ r.jsx(
-        q,
+        G,
         {
           placeholder: "Enter your message here...",
           disabled: a,
           value: u,
-          onChange: L,
-          onKeyDown: A,
+          onChange: $,
+          onKeyDown: O,
           multiline: !0,
           minRows: 1,
           maxRows: 10,
           size: "small",
           variant: "outlined",
           fullWidth: !0,
-          inputRef: M,
+          inputRef: U,
           slotProps: {
             input: {
               sx: {
@@ -73,7 +73,7 @@ const J = k(/* @__PURE__ */ r.jsx("path", {
                 backgroundColor: "transparent",
                 border: "none",
                 padding: 0,
-                [`&.${T.focused}`]: {
+                [`&.${D.focused}`]: {
                   outline: "none"
                 },
                 "& fieldset": {
@@ -91,10 +91,10 @@ const J = k(/* @__PURE__ */ r.jsx("path", {
           ...z
         }
       ),
-      l.length > 0 && /* @__PURE__ */ r.jsx(t, { mt: 1, children: l.map((e, o) => {
-        const n = b(e), s = e.name.split(".").pop();
+      l.length > 0 && /* @__PURE__ */ r.jsx(s, { mt: 1, children: l.map((e, o) => {
+        const n = b(e), t = e.name.split(".").pop();
         return /* @__PURE__ */ r.jsxs(
-          t,
+          s,
           {
             display: "flex",
             alignItems: "center",
@@ -108,12 +108,12 @@ const J = k(/* @__PURE__ */ r.jsx("path", {
               mb: 0.5
             },
             children: [
-              /* @__PURE__ */ r.jsxs(t, { display: "flex", alignItems: "center", gap: 1, children: [
+              /* @__PURE__ */ r.jsxs(s, { display: "flex", alignItems: "center", gap: 1, children: [
                 n ? /* @__PURE__ */ r.jsx(
-                  t,
+                  s,
                   {
                     component: "img",
-                    src: U(e),
+                    src: L(e),
                     alt: e.name,
                     sx: {
                       width: 40,
@@ -124,31 +124,31 @@ const J = k(/* @__PURE__ */ r.jsx("path", {
                       borderColor: "divider"
                     }
                   }
-                ) : /* @__PURE__ */ r.jsx(_, { extension: s }),
-                /* @__PURE__ */ r.jsxs(t, { children: [
-                  /* @__PURE__ */ r.jsx(t, { component: "span", sx: { fontSize: "0.875rem", fontWeight: 500 }, children: e.name }),
-                  /* @__PURE__ */ r.jsxs(t, { component: "span", sx: { fontSize: "0.75rem", color: "text.secondary", ml: 1 }, children: [
+                ) : /* @__PURE__ */ r.jsx(q, { extension: t }),
+                /* @__PURE__ */ r.jsxs(s, { display: "flex", flexDirection: "row", alignItems: "center", gap: 1, children: [
+                  /* @__PURE__ */ r.jsx(E, { variant: "subtitle2", textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", children: e.name }),
+                  /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsxs(E, { variant: "caption", color: "text.secondary", children: [
                     "(",
                     Math.round(e.size / 1024),
                     " KB)"
-                  ] })
+                  ] }) })
                 ] })
               ] }),
-              /* @__PURE__ */ r.jsx(d, { size: "small", onClick: () => V(o), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ r.jsx(G, {}) })
+              /* @__PURE__ */ r.jsx(d, { size: "small", onClick: () => F(o), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ r.jsx(J, {}) })
             ]
           },
           `${e.name}-${o}`
         );
       }) }),
-      /* @__PURE__ */ r.jsxs(t, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
-        /* @__PURE__ */ r.jsxs(t, { display: "flex", gap: 1, children: [
+      /* @__PURE__ */ r.jsxs(s, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
+        /* @__PURE__ */ r.jsxs(s, { display: "flex", gap: 1, children: [
           /* @__PURE__ */ r.jsx(
             "input",
             {
               type: "file",
               multiple: !0,
-              accept: E,
-              onChange: S,
+              accept: M,
+              onChange: A,
               style: { display: "none" },
               id: `file-attachment-input-${w}`,
               disabled: a
@@ -166,14 +166,14 @@ const J = k(/* @__PURE__ */ r.jsx("path", {
                   transform: "scale(1.1)"
                 }
               },
-              children: /* @__PURE__ */ r.jsx(N, {})
+              children: /* @__PURE__ */ r.jsx(Q, {})
             }
           ) }),
           /* @__PURE__ */ r.jsx(
             d,
             {
               ref: y,
-              onClick: P,
+              onClick: V,
               disabled: a,
               size: "small",
               sx: {
@@ -182,7 +182,7 @@ const J = k(/* @__PURE__ */ r.jsx("path", {
                   transform: "scale(1.1)"
                 }
               },
-              children: /* @__PURE__ */ r.jsx(Q, {})
+              children: /* @__PURE__ */ r.jsx(X, {})
             }
           )
         ] }),
@@ -198,12 +198,12 @@ const J = k(/* @__PURE__ */ r.jsx("path", {
                 transform: "scale(1.2)"
               }
             },
-            children: /* @__PURE__ */ r.jsx(J, {})
+            children: /* @__PURE__ */ r.jsx(N, {})
           }
         )
       ] }),
-      /* @__PURE__ */ r.jsx(W, { open: v, anchorEl: y.current, placement: "top-start", sx: { zIndex: 1300 }, children: /* @__PURE__ */ r.jsx(D, { onClickAway: () => g(!1), children: /* @__PURE__ */ r.jsx(
-        t,
+      /* @__PURE__ */ r.jsx(W, { open: C, anchorEl: y.current, placement: "top-start", sx: { zIndex: 1300 }, children: /* @__PURE__ */ r.jsx(H, { onClickAway: () => g(!1), children: /* @__PURE__ */ r.jsx(
+        s,
         {
           sx: {
             border: "1px solid",
@@ -293,9 +293,9 @@ const J = k(/* @__PURE__ */ r.jsx("path", {
             }
           },
           children: /* @__PURE__ */ r.jsx(
-            H,
+            _,
             {
-              onEmojiClick: $,
+              onEmojiClick: P,
               width: 300,
               height: 400,
               searchDisabled: !1,
@@ -309,5 +309,5 @@ const J = k(/* @__PURE__ */ r.jsx("path", {
   }
 );
 export {
-  ae as default
+  ie as default
 };

package/dist/s-chat-message/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './s-chat-message';
-export type { SChatMessageProps } from './s-chat-message';
+export type { SChatMessageProps, ChatAttachment } from './s-chat-message';

package/dist/s-chat-message/s-chat-message.d.ts

@@ -1,7 +1,16 @@
 import { default as React } from 'react';
 import { BoxProps } from '@mui/material';
+export interface ChatAttachment {
+    id: string;
+    type: 'image' | 'file';
+    url: string;
+    name?: string;
+    size?: number;
+    mimeType?: string;
+    thumbnailUrl?: string;
+}
 export interface SChatMessageProps extends Omit<BoxProps, 'children'> {
-    message: string;
+    message?: string;
     variant?: 'sent' | 'received';
     timestamp?: string | Date;
     avatar?: string;
@@ -9,6 +18,9 @@ export interface SChatMessageProps extends Omit<BoxProps, 'children'> {
     showAvatar?: boolean;
     showTimestamp?: boolean;
     maxWidth?: string | number;
+    attachments?: ChatAttachment[];
+    onAttachmentClick?: (attachment: ChatAttachment) => void;
+    onDownload?: (attachment: ChatAttachment) => void;
 }
 declare const SChatMessage: React.FC<SChatMessageProps>;
 export default SChatMessage;

package/dist/s-chat-message/s-chat-message.js

@@ -1,50 +1,69 @@
-import { j as e } from "../jsx-runtime-DywqP_6a.js";
-import { Box as o, Typography as n } from "@mui/material";
-import x from "../s-avatar/s-avatar.js";
-const b = ({
-  message: d,
-  variant: c = "received",
-  timestamp: a,
-  avatar: s,
-  senderName: i,
-  showAvatar: l = !0,
-  showTimestamp: m = !1,
-  maxWidth: p = "70%",
-  sx: f,
-  ...g
+import { j as r } from "../jsx-runtime-DywqP_6a.js";
+import { useState as v } from "react";
+import { Box as o, Typography as l, Paper as H, IconButton as D } from "@mui/material";
+import S from "../s-avatar/s-avatar.js";
+import L from "../s-image-modal/s-image-modal.js";
+import O from "../s-lazy-image/s-lazy-image.js";
+import { c as b } from "../createSvgIcon-DCQI9UV5.js";
+const R = b(/* @__PURE__ */ r.jsx("path", {
+  d: "M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"
+}), "Download"), U = b(/* @__PURE__ */ r.jsx("path", {
+  d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"
+}), "InsertDriveFile"), Q = ({
+  message: m,
+  variant: z = "received",
+  timestamp: f,
+  avatar: g,
+  senderName: t,
+  showAvatar: h = !0,
+  showTimestamp: I = !1,
+  maxWidth: w = "70%",
+  attachments: x = [],
+  onAttachmentClick: s,
+  onDownload: n,
+  sx: M,
+  ...k
 }) => {
-  const r = c === "sent", h = (t) => (typeof t == "string" ? new Date(t) : t).toLocaleTimeString("en-US", {
+  const [a, u] = v(null), [C, j] = v(!1), i = z === "sent", T = (e) => (typeof e == "string" ? new Date(e) : e).toLocaleTimeString("en-US", {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !0
-  });
-  return /* @__PURE__ */ e.jsxs(
+  }), B = (e) => {
+    if (!e) return "";
+    const c = ["Bytes", "KB", "MB", "GB"], p = Math.floor(Math.log(e) / Math.log(1024));
+    return Math.round(e / Math.pow(1024, p) * 100) / 100 + " " + c[p];
+  }, F = (e) => {
+    s ? s(e) : (u(e), j(!0));
+  }, W = (e) => {
+    s ? s(e) : n && n(e);
+  }, d = x.filter((e) => e.type === "image"), y = x.filter((e) => e.type === "file");
+  return /* @__PURE__ */ r.jsxs(
     o,
     {
       display: "flex",
-      flexDirection: r ? "row-reverse" : "row",
+      flexDirection: i ? "row-reverse" : "row",
       alignItems: "flex-start",
       gap: 1,
       mb: 1,
       sx: {
-        maxWidth: p,
-        alignSelf: r ? "flex-end" : "flex-start",
-        ...f
+        maxWidth: w,
+        alignSelf: i ? "flex-end" : "flex-start",
+        ...M
       },
-      ...g,
+      ...k,
       children: [
-        l && !r && /* @__PURE__ */ e.jsx(x, { avatar: s, name: i, size: 36 }),
-        /* @__PURE__ */ e.jsxs(
+        h && !i && /* @__PURE__ */ r.jsx(S, { avatar: g, name: t, size: 36 }),
+        /* @__PURE__ */ r.jsxs(
           o,
           {
             display: "flex",
             flexDirection: "column",
-            alignItems: r ? "flex-end" : "flex-start",
+            alignItems: i ? "flex-end" : "flex-start",
             gap: 0.5,
             sx: { minWidth: 0 },
             children: [
-              i && !r && /* @__PURE__ */ e.jsx(
-                n,
+              t && !i && /* @__PURE__ */ r.jsx(
+                l,
                 {
                   variant: "caption",
                   sx: {
@@ -53,62 +72,196 @@ const b = ({
                     fontWeight: 500,
                     ml: 0.5
                   },
-                  children: i
+                  children: t
                 }
               ),
-              /* @__PURE__ */ e.jsx(
+              /* @__PURE__ */ r.jsxs(
                 o,
                 {
                   sx: {
                     display: "inline-block",
-                    px: 2,
-                    py: 1.5,
                     borderRadius: 2,
                     wordBreak: "break-word",
                     maxWidth: "100%",
-                    backgroundColor: r ? "primary.main" : "",
-                    color: r ? "primary.contrastText" : "text.primary",
-                    border: r ? "none" : "1px solid",
+                    backgroundColor: i ? "primary.main" : "",
+                    color: i ? "primary.contrastText" : "text.primary",
+                    border: i ? "none" : "1px solid",
                     borderColor: "divider",
-                    ...r && {
+                    ...i && {
                       backgroundColor: "primary.dark"
-                    }
+                    },
+                    overflow: "hidden"
                   },
-                  children: /* @__PURE__ */ e.jsx(
-                    n,
-                    {
-                      variant: "body2",
-                      sx: {
-                        fontSize: "0.875rem",
-                        lineHeight: 1.4,
-                        whiteSpace: "pre-wrap"
+                  children: [
+                    d.length > 0 && /* @__PURE__ */ r.jsx(
+                      o,
+                      {
+                        sx: {
+                          display: "grid",
+                          gridTemplateColumns: d.length === 1 ? "1fr" : "repeat(2, 1fr)",
+                          gap: 0.5,
+                          p: 0.5
+                        },
+                        minWidth: 200,
+                        children: d.map((e) => /* @__PURE__ */ r.jsx(
+                          o,
+                          {
+                            sx: {
+                              position: "relative",
+                              paddingTop: d.length === 1 ? "66.67%" : "100%",
+                              cursor: "pointer",
+                              borderRadius: 1.5,
+                              overflow: "hidden",
+                              "&:hover": {
+                                opacity: 0.9
+                              }
+                            },
+                            onClick: () => F(e),
+                            children: /* @__PURE__ */ r.jsx(
+                              O,
+                              {
+                                src: e.thumbnailUrl || e.url,
+                                alt: e.name || "Image",
+                                width: "100%",
+                                height: "100%",
+                                style: {
+                                  position: "absolute",
+                                  top: 0,
+                                  left: 0,
+                                  objectFit: "cover"
+                                }
+                              }
+                            )
+                          },
+                          e.id
+                        ))
+                      }
+                    ),
+                    y.length > 0 && /* @__PURE__ */ r.jsx(o, { sx: { p: 1.5 }, children: y.map((e, c) => /* @__PURE__ */ r.jsxs(
+                      H,
+                      {
+                        variant: "outlined",
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 1.5,
+                          p: 1,
+                          mt: c > 0 ? 1 : 0,
+                          cursor: "pointer",
+                          backgroundColor: i ? "rgba(0,0,0,0.1)" : "background.paper",
+                          "&:hover": {
+                            backgroundColor: i ? "rgba(0,0,0,0.2)" : "action.hover"
+                          }
+                        },
+                        onClick: () => W(e),
+                        children: [
+                          /* @__PURE__ */ r.jsx(
+                            U,
+                            {
+                              sx: {
+                                fontSize: 32,
+                                color: i ? "primary.contrastText" : "action.active"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ r.jsxs(o, { sx: { flex: 1, minWidth: 0 }, children: [
+                            /* @__PURE__ */ r.jsx(
+                              l,
+                              {
+                                variant: "body2",
+                                sx: {
+                                  fontSize: "0.875rem",
+                                  fontWeight: 500,
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  whiteSpace: "nowrap",
+                                  color: i ? "inherit" : "text.primary"
+                                },
+                                children: e.name || "Unnamed File"
+                              }
+                            ),
+                            e.size && /* @__PURE__ */ r.jsx(
+                              l,
+                              {
+                                variant: "caption",
+                                sx: {
+                                  fontSize: "0.75rem",
+                                  color: i ? "rgba(255,255,255,0.7)" : "text.secondary"
+                                },
+                                children: B(e.size)
+                              }
+                            )
+                          ] }),
+                          n && /* @__PURE__ */ r.jsx(
+                            D,
+                            {
+                              size: "small",
+                              onClick: (p) => {
+                                p.stopPropagation(), n(e);
+                              },
+                              sx: {
+                                color: i ? "primary.contrastText" : "action.active"
+                              },
+                              children: /* @__PURE__ */ r.jsx(R, { fontSize: "small" })
+                            }
+                          )
+                        ]
                       },
-                      children: d
-                    }
-                  )
+                      e.id
+                    )) }),
+                    m && /* @__PURE__ */ r.jsx(o, { sx: { px: 2, py: 1.5, pt: x.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ r.jsx(
+                      l,
+                      {
+                        variant: "body2",
+                        sx: {
+                          fontSize: "0.875rem",
+                          lineHeight: 1.4,
+                          whiteSpace: "pre-wrap"
+                        },
+                        children: m
+                      }
+                    ) })
+                  ]
                 }
               ),
-              m && a && /* @__PURE__ */ e.jsx(
-                n,
+              I && f && /* @__PURE__ */ r.jsx(
+                l,
                 {
                   variant: "caption",
                   sx: {
                     color: "text.secondary",
                     fontSize: "0.7rem",
-                    ml: r ? 0 : 0.5,
-                    mr: r ? 0.5 : 0
+                    ml: i ? 0 : 0.5,
+                    mr: i ? 0.5 : 0
                   },
-                  children: h(a)
+                  children: T(f)
                 }
               )
             ]
           }
         ),
-        l && r && /* @__PURE__ */ e.jsx(x, { avatar: s, name: i, size: 36 })
+        h && i && /* @__PURE__ */ r.jsx(S, { avatar: g, name: t, size: 36 }),
+        a && /* @__PURE__ */ r.jsx(
+          L,
+          {
+            isOpen: C,
+            onClose: () => {
+              j(!1), u(null);
+            },
+            selectedItem: {
+              id: a.id,
+              type: "image",
+              url: a.url,
+              title: a.name
+            },
+            showNavigation: !1,
+            showThumbnailDock: !1
+          }
+        )
       ]
     }
   );
 };
 export {
-  b as default
+  Q as default
 };

package/dist/s-lazy-image/s-lazy-image.js

@@ -1,63 +1,65 @@
 import { j as a } from "../jsx-runtime-DywqP_6a.js";
-import { useId as x, useState as f } from "react";
-import { useTheme as j, Box as d, Skeleton as L } from "@mui/material";
-const y = ({
-  src: u,
+import { useId as i, useState as f } from "react";
+import { useTheme as j, Box as m, Skeleton as L } from "@mui/material";
+const I = ({
+  src: n,
   variant: e = "rounded",
   height: o = "auto",
   width: s = "100%",
-  style: t,
-  minWidth: m = "auto",
-  minHeight: n = "auto",
-  ...i
+  style: r,
+  minWidth: t = "auto",
+  minHeight: u = "auto",
+  ...c
 }) => {
-  const c = x(), l = j(), [r, p] = f(!1);
+  const l = i(), p = j(), [d, x] = f(!1);
   return (
     // Container box maintains consistent dimensions throughout the loading process
     // This prevents layout shifts and provides stable positioning for both skeleton and image
-    /* @__PURE__ */ a.jsxs(d, { height: o, width: s, children: [
-      !r && /* @__PURE__ */ a.jsx(
+    /* @__PURE__ */ a.jsxs(m, { height: o, width: s, children: [
+      !d && /* @__PURE__ */ a.jsx(
         L,
         {
           variant: e,
-          id: `image-skeleton-${c}`,
+          id: `image-skeleton-${l}`,
           animation: "wave",
           style: {
             height: o,
             width: s,
-            minWidth: m,
-            minHeight: n,
-            ...t
+            minWidth: t,
+            minHeight: u,
+            ...r
             // User styles applied to skeleton for consistency
           }
         }
       ),
       /* @__PURE__ */ a.jsx(
-        d,
+        m,
         {
           component: "img",
-          src: u,
+          src: n,
           style: {
             height: o,
             width: s,
+            minWidth: t,
+            minHeight: u,
             // Performance optimization: display toggling instead of opacity transitions
             // This approach reduces GPU usage and improves rendering performance
-            display: r ? "block" : "none",
+            display: d ? "block" : "none",
             // Theme-aware border radius calculation for consistent styling
             // Matches Material-UI skeleton variants with proper theme integration
-            borderRadius: e === "circular" ? "50%" : e === "rounded" ? l.shape.borderRadius : "0px",
-            ...t
+            borderRadius: e === "circular" ? "50%" : e === "rounded" ? p.shape.borderRadius : "0px",
+            ...r
             // User-provided styles override defaults
           },
           onLoad: () => {
-            p(!0);
+            x(!0);
           },
-          ...i
+          ...c
         }
       )
     ] })
   );
 };
 export {
-  y as default
+  I as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.101",
+  "version": "1.0.102",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",