@solostylist/ui-kit 1.0.101 → 1.0.103

package/dist/main.d.ts

@@ -82,6 +82,8 @@ export { default as SGlowButton } from './s-glow-button/index';
 export type { SGlowButtonProps } from './s-glow-button/index';
 export { default as SMovingBorder } from './s-moving-border/index';
 export type { SMovingBorderProps } from './s-moving-border/index';
+export { default as SSpotlightCursor } from './s-spotlight-cursor/index';
+export type { SSpotlightCursorProps, SpotlightConfig } from './s-spotlight-cursor/index';
 export { default as SCopyableText } from './s-copyable-text/index';
 export type { SCopyableTextProps } from './s-copyable-text/index';
 export { default as SInteractiveGallery, MediaItem } from './s-interactive-gallery/index';

package/dist/main.js

@@ -1,9 +1,9 @@
-import { default as a } from "./s-accordion/s-accordion.js";
+import { default as t } from "./s-accordion/s-accordion.js";
 import { default as f } from "./s-autocomplete/s-autocomplete.js";
-import { default as m } from "./s-avatar/s-avatar.js";
+import { default as s } from "./s-avatar/s-avatar.js";
 import { default as p } from "./s-button/s-button.js";
 import { default as S } from "./s-button-link/s-button-link.js";
-import { default as u } from "./s-carousel/s-carousel.js";
+import { default as x } from "./s-carousel/s-carousel.js";
 import { default as n } from "./s-chat-input/s-chat-input.js";
 import { default as c } from "./s-chat-message/s-chat-message.js";
 import { default as C } from "./s-text-editor/s-text-editor.js";
@@ -11,7 +11,7 @@ import "./s-text-editor/s-text-editor-toolbar.js";
 import { default as v } from "./s-checkbox/s-checkbox.js";
 import { default as b } from "./s-chip/s-chip.js";
 import { default as I } from "./s-chips/s-chips.js";
-import { default as L } from "./s-data-table/s-data-table.js";
+import { default as k } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as y, default as F, useDialogConfirm as B } from "./s-dialog-confirm/s-dialog-confirm.js";
 import { DialogMessageProvider as A, default as E, useDialogMessage as G } from "./s-dialog-message/s-dialog-message.js";
 import { default as w } from "./s-error/s-error.js";
@@ -24,17 +24,17 @@ import { default as X } from "./s-icon-button/s-icon-button.js";
 import { default as Z } from "./s-label/s-label.js";
 import { default as $ } from "./s-multi-select/s-multi-select.js";
 import { default as oe } from "./s-no-ssr/s-no-ssr.js";
-import { default as ae } from "./s-text-field/s-text-field.js";
+import { default as te } from "./s-text-field/s-text-field.js";
 import { default as fe } from "./s-pagination/s-pagination.js";
-import { default as me } from "./s-select/s-select.js";
+import { default as se } from "./s-select/s-select.js";
 import { default as pe } from "./s-skeleton/s-skeleton.js";
 import { default as Se } from "./s-tip/s-tip.js";
-import { default as ue } from "./s-text-truncation/s-text-truncation.js";
+import { default as xe } from "./s-text-truncation/s-text-truncation.js";
 import { default as ne, SnackbarMessageProvider as ge, useSnackbarMessage as ce } from "./s-snackbar-message/s-snackbar-message.js";
 import { default as Ce } from "./s-form/s-form.js";
 import { SSmartTextField as ve } from "./s-smart-text-field/s-smart-text-field.js";
 import { SCopilotKitProvider as be } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as Ie, SStripeExpiry as ke, SStripeNumber as Le, StripeTextField as he } from "./s-stripe/s-stripe.js";
+import { SStripeCVC as Ie, SStripeExpiry as he, SStripeNumber as ke, StripeTextField as Le } from "./s-stripe/s-stripe.js";
 import { default as Fe } from "./s-theme-provider/s-theme-provider.js";
 import { default as ze } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as Ee } from "./s-date-picker/s-date-picker.js";
@@ -42,44 +42,45 @@ import { default as Re } from "./s-localization-provider/s-localization-provider
 import { default as Ne } from "./s-gradient-icon/s-gradient-icon.js";
 import { default as Ke } from "./s-glow-button/s-glow-button.js";
 import { default as qe } from "./s-moving-border/s-moving-border.js";
-import { default as Je } from "./s-copyable-text/s-copyable-text.js";
-import { MediaItem as Qe, default as Ue } from "./s-interactive-gallery/s-interactive-gallery.js";
-import { default as Xe } from "./s-image-modal/s-image-modal.js";
-import { default as Ze } from "./s-lazy-image/s-lazy-image.js";
-import { default as $e } from "./s-image-comparison/s-image-comparison.js";
-import { default as oo } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
-import { default as ao } from "./s-rating/s-rating.js";
-import { default as fo } from "./s-review/s-review.js";
-import { default as mo } from "./s-tabs/s-tabs.js";
-import { default as po } from "./s-tabs/s-tab.js";
-import { default as xo } from "./s-tabs/s-tab-panel.js";
-import { default as io } from "./s-text-shimmer/s-text-shimmer.js";
-import { useDialog as go } from "./hooks/use-dialog.js";
-import { usePopover as To } from "./hooks/use-popover.js";
-import { formatDatePosted as Po } from "./utils/dayjs.js";
-import { bytesToSize as Do } from "./utils/bytes-to-size.js";
-import { LogLevel as Mo, Logger as Io, createLogger as ko, logger as Lo } from "./utils/logger.js";
-import { default as yo } from "dayjs";
+import { default as Je } from "./s-spotlight-cursor/s-spotlight-cursor.js";
+import { default as Qe } from "./s-copyable-text/s-copyable-text.js";
+import { MediaItem as We, default as Xe } from "./s-interactive-gallery/s-interactive-gallery.js";
+import { default as Ze } from "./s-image-modal/s-image-modal.js";
+import { default as $e } from "./s-lazy-image/s-lazy-image.js";
+import { default as oo } from "./s-image-comparison/s-image-comparison.js";
+import { default as to } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
+import { default as fo } from "./s-rating/s-rating.js";
+import { default as so } from "./s-review/s-review.js";
+import { default as po } from "./s-tabs/s-tabs.js";
+import { default as uo } from "./s-tabs/s-tab.js";
+import { default as io } from "./s-tabs/s-tab-panel.js";
+import { default as go } from "./s-text-shimmer/s-text-shimmer.js";
+import { useDialog as To } from "./hooks/use-dialog.js";
+import { usePopover as Po } from "./hooks/use-popover.js";
+import { formatDatePosted as Do } from "./utils/dayjs.js";
+import { bytesToSize as Mo } from "./utils/bytes-to-size.js";
+import { LogLevel as ho, Logger as ko, createLogger as Lo, logger as yo } from "./utils/logger.js";
+import { default as Bo } from "dayjs";
 export {
   y as DialogConfirmProvider,
   A as DialogMessageProvider,
-  Mo as LogLevel,
-  Io as Logger,
-  Qe as MediaItem,
-  a as SAccordion,
+  ho as LogLevel,
+  ko as Logger,
+  We as MediaItem,
+  t as SAccordion,
   f as SAutocomplete,
-  m as SAvatar,
+  s as SAvatar,
   p as SButton,
   S as SButtonLink,
-  u as SCarousel,
+  x as SCarousel,
   n as SChatInput,
   c as SChatMessage,
   v as SCheckbox,
   b as SChip,
   I as SChips,
   be as SCopilotKitProvider,
-  Je as SCopyableText,
-  L as SDataTable,
+  Qe as SCopyableText,
+  k as SDataTable,
   Ee as SDatePicker,
   ze as SDateTimePicker,
   V as SDialog,
@@ -94,45 +95,46 @@ export {
   Ne as SGradientIcon,
   U as SI18nProvider,
   X as SIconButton,
-  $e as SImageComparison,
-  Xe as SImageModal,
-  Ue as SInteractiveGallery,
+  oo as SImageComparison,
+  Ze as SImageModal,
+  Xe as SInteractiveGallery,
   Z as SLabel,
-  Ze as SLazyImage,
+  $e as SLazyImage,
   Re as SLocalizationProvider,
   qe as SMovingBorder,
   $ as SMultiSelect,
   oe as SNoSsr,
   fe as SPagination,
-  oo as SRadialPulseAnimate,
-  ao as SRating,
-  fo as SReview,
-  me as SSelect,
+  to as SRadialPulseAnimate,
+  fo as SRating,
+  so as SReview,
+  se as SSelect,
   pe as SSkeleton,
   ve as SSmartTextField,
   ne as SSnackbarMessage,
+  Je as SSpotlightCursor,
   Ie as SStripeCVC,
-  ke as SStripeExpiry,
-  Le as SStripeNumber,
-  po as STab,
-  xo as STabPanel,
-  mo as STabs,
+  he as SStripeExpiry,
+  ke as SStripeNumber,
+  uo as STab,
+  io as STabPanel,
+  po as STabs,
   C as STextEditor,
-  ae as STextField,
-  io as STextShimmer,
-  ue as STextTruncation,
+  te as STextField,
+  go as STextShimmer,
+  xe as STextTruncation,
   Fe as SThemeProvider,
   Se as STip,
   ge as SnackbarMessageProvider,
-  he as StripeTextField,
-  Do as bytesToSize,
-  ko as createLogger,
-  yo as dayjs,
-  Po as formatDatePosted,
-  Lo as logger,
-  go as useDialog,
+  Le as StripeTextField,
+  Mo as bytesToSize,
+  Lo as createLogger,
+  Bo as dayjs,
+  Do as formatDatePosted,
+  yo as logger,
+  To as useDialog,
   B as useDialogConfirm,
   G as useDialogMessage,
-  To as usePopover,
+  Po as usePopover,
   ce as useSnackbarMessage
 };

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/dist/s-spotlight-cursor/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-spotlight-cursor';
+export type { SSpotlightCursorProps, SpotlightConfig } from './s-spotlight-cursor';

package/dist/s-spotlight-cursor/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-spotlight-cursor.js";
+export {
+  o as default
+};

package/dist/s-spotlight-cursor/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-spotlight-cursor/s-spotlight-cursor.d.ts

@@ -0,0 +1,63 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Configuration interface for spotlight effect appearance and behavior
+ */
+export interface SpotlightConfig {
+    /** Radius of the spotlight effect in pixels (recommended: 50-500) */
+    radius: number;
+    /** Brightness/opacity of the spotlight effect (range: 0-1, where 0 is invisible and 1 is fully opaque) */
+    brightness: number;
+    /** Color of the spotlight effect in hexadecimal format (e.g., '#ff0000', '#00ff00') */
+    color: string;
+    /** Smoothing factor for cursor movement - reserved for future implementation */
+    smoothing: number;
+}
+/**
+ * Props interface for the SSpotlightCursor component
+ */
+export interface SSpotlightCursorProps extends HTMLAttributes<HTMLCanvasElement> {
+    /** Configuration object for spotlight appearance and behavior. If not provided, uses default blue spotlight */
+    config?: SpotlightConfig;
+}
+/**
+ * SSpotlightCursor - Creates an interactive spotlight effect that follows the mouse cursor
+ *
+ * This component renders a full-screen HTML5 canvas with a radial gradient spotlight that
+ * smoothly tracks the user's mouse movement. The spotlight effect is highly customizable
+ * and optimized for performance using requestAnimationFrame.
+ *
+ * Key features:
+ * - Mouse-following spotlight with smooth animation
+ * - Customizable radius, brightness, color, and smoothing
+ * - Performance-optimized with proper cleanup
+ * - Responsive design that adapts to window resizing
+ * - Non-interfering overlay (pointer-events: none)
+ * - Memory-safe event listener management
+ *
+ * Technical implementation:
+ * - Uses HTML5 Canvas with 2D context for rendering
+ * - Implements radial gradient for spotlight effect
+ * - Leverages requestAnimationFrame for 60fps animations
+ * - Automatically handles canvas sizing and viewport changes
+ * - Converts hex colors to RGB for gradient creation
+ *
+ * @param props - SSpotlightCursorProps containing configuration and styling options
+ * @returns JSX.Element - Fixed-positioned canvas element rendering the spotlight effect
+ *
+ * @example
+ * // Basic usage with default blue spotlight
+ * <SSpotlightCursor />
+ *
+ * @example
+ * // Custom orange spotlight with larger radius
+ * <SSpotlightCursor
+ *   config={{
+ *     radius: 300,
+ *     brightness: 0.25,
+ *     color: '#ff6b35',
+ *     smoothing: 0.1
+ *   }}
+ * />
+ */
+declare const SSpotlightCursor: ({ config, className, ...props }: SSpotlightCursorProps) => import("react/jsx-runtime").JSX.Element;
+export default SSpotlightCursor;

package/dist/s-spotlight-cursor/s-spotlight-cursor.js

@@ -0,0 +1,59 @@
+import { j as g } from "../jsx-runtime-DywqP_6a.js";
+import { useRef as p, useEffect as x } from "react";
+import { Box as E } from "@mui/material";
+const b = (t) => {
+  const a = p(null);
+  return x(() => {
+    const e = a.current;
+    if (!e) return;
+    const o = e.getContext("2d");
+    if (!o) return;
+    let d, r = -1e3, s = -1e3;
+    const c = () => {
+      e.width = window.innerWidth, e.height = window.innerHeight;
+    }, l = (n) => {
+      r = n.clientX, s = n.clientY;
+    }, m = () => {
+      r = -1e3, s = -1e3;
+    }, h = (n) => {
+      const i = parseInt(n.slice(1), 16), w = i >> 16 & 255, v = i >> 8 & 255, f = i & 255;
+      return `${w},${v},${f}`;
+    }, u = () => {
+      if (o.clearRect(0, 0, e.width, e.height), r !== -1e3 && s !== -1e3) {
+        const n = o.createRadialGradient(r, s, 0, r, s, t.radius || 200), i = h(t.color);
+        n.addColorStop(0, `rgba(${i}, ${t.brightness})`), n.addColorStop(1, "rgba(0,0,0,0)"), o.fillStyle = n, o.fillRect(0, 0, e.width, e.height);
+      }
+      d = requestAnimationFrame(u);
+    };
+    return c(), window.addEventListener("resize", c), window.addEventListener("mousemove", l), window.addEventListener("mouseleave", m), d = requestAnimationFrame(u), () => {
+      window.removeEventListener("resize", c), window.removeEventListener("mousemove", l), window.removeEventListener("mouseleave", m), cancelAnimationFrame(d);
+    };
+  }, [t.radius, t.brightness, t.color]), a;
+}, S = ({
+  config: t = { radius: 200, brightness: 0.15, color: "#0000ff", smoothing: 0.1 },
+  className: a,
+  ...e
+}) => {
+  const o = b(t);
+  return /* @__PURE__ */ g.jsx(
+    E,
+    {
+      component: "canvas",
+      ref: o,
+      className: a,
+      sx: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        zIndex: 9999,
+        width: "100%",
+        height: "100%"
+      },
+      ...e
+    }
+  );
+};
+export {
+  S as default
+};

package/dist/theme/components/alert.d.ts

@@ -10,6 +10,10 @@ export declare const MuiAlert: {
                     color: string;
                     '& .MuiAlert-icon': {
                         color: string;
+                        alignSelf: string;
+                    };
+                    '& .MuiAlert-message': {
+                        alignSelf: string;
                     };
                     backgroundColor: string;
                     border: string;
@@ -22,6 +26,10 @@ export declare const MuiAlert: {
                     color: string;
                     '& .MuiAlert-icon': {
                         color: string;
+                        alignSelf: string;
+                    };
+                    '& .MuiAlert-message': {
+                        alignSelf: string;
                     };
                     backgroundColor: string;
                     border: string;
@@ -34,6 +42,10 @@ export declare const MuiAlert: {
                     color: string;
                     '& .MuiAlert-icon': {
                         color: string;
+                        alignSelf: string;
+                    };
+                    '& .MuiAlert-message': {
+                        alignSelf: string;
                     };
                     backgroundColor: string;
                     border: string;
@@ -46,6 +58,10 @@ export declare const MuiAlert: {
                     color: string;
                     '& .MuiAlert-icon': {
                         color: string;
+                        alignSelf: string;
+                    };
+                    '& .MuiAlert-message': {
+                        alignSelf: string;
                     };
                     backgroundColor: string;
                     border: string;

package/dist/theme/components/alert.js

@@ -1,13 +1,17 @@
 import { alpha as s } from "@mui/material";
-import { green as o, red as i, orange as t, blue as p } from "../theme-primitives.js";
+import { green as o, red as i, orange as t, blue as n } from "../theme-primitives.js";
 const e = (r) => ({
   color: r[50],
   "& .MuiAlert-icon": {
-    color: r[500]
+    color: r[500],
+    alignSelf: "center"
   },
-  backgroundColor: `${s(r[900], 0.5)}`,
-  border: `1px solid ${s(r[800], 0.5)}`
-}), l = {
+  "& .MuiAlert-message": {
+    alignSelf: "center"
+  },
+  backgroundColor: `${s(r[900], 0.9)}`,
+  border: `1px solid ${s(r[800], 0.8)}`
+}), y = {
   styleOverrides: {
     root: () => ({
       borderRadius: 10,
@@ -41,7 +45,7 @@ const e = (r) => ({
             severity: "info"
           },
           style: {
-            ...e(p)
+            ...e(n)
           }
         }
       ]
@@ -49,5 +53,5 @@ const e = (r) => ({
   }
 };
 export {
-  l as MuiAlert
+  y as MuiAlert
 };

package/dist/theme/components/components.d.ts

@@ -6049,6 +6049,10 @@ export declare const components: {
                         color: string;
                         '& .MuiAlert-icon': {
                             color: string;
+                            alignSelf: string;
+                        };
+                        '& .MuiAlert-message': {
+                            alignSelf: string;
                         };
                         backgroundColor: string;
                         border: string;
@@ -6061,6 +6065,10 @@ export declare const components: {
                         color: string;
                         '& .MuiAlert-icon': {
                             color: string;
+                            alignSelf: string;
+                        };
+                        '& .MuiAlert-message': {
+                            alignSelf: string;
                         };
                         backgroundColor: string;
                         border: string;
@@ -6073,6 +6081,10 @@ export declare const components: {
                         color: string;
                         '& .MuiAlert-icon': {
                             color: string;
+                            alignSelf: string;
+                        };
+                        '& .MuiAlert-message': {
+                            alignSelf: string;
                         };
                         backgroundColor: string;
                         border: string;
@@ -6085,6 +6097,10 @@ export declare const components: {
                         color: string;
                         '& .MuiAlert-icon': {
                             color: string;
+                            alignSelf: string;
+                        };
+                        '& .MuiAlert-message': {
+                            alignSelf: string;
                         };
                         backgroundColor: string;
                         border: string;

package/package.json

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