@solostylist/ui-kit 1.0.167 → 1.0.168

package/dist/s-category-card/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-category-card.js";
+import { SCategoryCard as e } from "./s-category-card.js";
 export {
-  o as default
+  e as default
 };

package/dist/s-category-card/s-category-card.d.ts

@@ -8,25 +8,52 @@ export declare const CategoryTitle: import('@emotion/styled').StyledComponent<im
     titlePosition?: "bottom" | "top" | "center";
     titleAlignment?: "left" | "center" | "right";
 }, {}, {}>;
+/**
+ * Props interface for SCategoryCard component
+ */
 export interface SCategoryCardProps {
+    /** URL or path to the category image source */
     image: string;
+    /** Display title for the category shown as overlay text */
     title: string;
+    /** Width of the category card */
     width?: number | string;
+    /** Height of the category card */
     height?: number | string;
+    /** Alternative text for the image */
     alt?: string;
+    /** Position of the title overlay on the image */
     titlePosition?: 'bottom' | 'top' | 'center';
+    /** Text alignment of the title */
     titleAlignment?: 'left' | 'center' | 'right';
+    /** Typography variant for the title text */
     titleVariant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
+    /** Color of the title text */
     titleColor?: string;
+    /** Background color of the title overlay */
     titleBackgroundColor?: string;
+    /** Opacity of the title overlay (0-1) */
     titleOpacity?: number;
+    /** Border radius of the card and title overlay */
     borderRadius?: number | string;
+    /** Disable the hover zoom effect on the image */
     disableHoverEffect?: boolean;
+    /** Scale factor for hover zoom effect */
     hoverScale?: number;
+    /** Handler called when the card is clicked */
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** System prop for custom styling of the wrapper */
     sx?: SxProps<Theme>;
+    /** System prop for custom styling of the title overlay */
     titleSx?: SxProps<Theme>;
+    /** System prop for custom styling of the image */
     imageSx?: SxProps<Theme>;
 }
-declare const SCategoryCard: ({ image, title, width, height, alt, titlePosition, titleAlignment, titleVariant, titleColor, titleBackgroundColor, titleOpacity, borderRadius, disableHoverEffect, hoverScale, onClick, sx, titleSx, imageSx, }: SCategoryCardProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A stylish category card component that displays an image with an overlaid title.
+ */
+export declare const SCategoryCard: {
+    ({ image, title, width, height, alt, titlePosition, titleAlignment, titleVariant, titleColor, titleBackgroundColor, titleOpacity, borderRadius, disableHoverEffect, hoverScale, onClick, sx, titleSx, imageSx, }: SCategoryCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SCategoryCard;

package/dist/s-category-card/s-category-card.js

@@ -1,8 +1,9 @@
-import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { styled as c, Box as i, Typography as v } from "@mui/material";
+import { j as a } from "../jsx-runtime-OVHDjVDe.js";
+import { styled as d, Box as c, Typography as S } from "@mui/material";
+import "../s-lazy-image/index.js";
 import C from "../s-lazy-image/s-lazy-image.js";
-const F = c(i)(
-  ({ disableHoverEffect: t = !1, hoverScale: o = 1.1 }) => ({
+const r = d(c)(
+  ({ disableHoverEffect: e = !1, hoverScale: t = 1.1 }) => ({
     height: "100%",
     cursor: "pointer",
     overflow: "hidden",
@@ -14,90 +15,108 @@ const F = c(i)(
       transition: "all 0.3s",
       objectPosition: "center center"
     },
-    ...!t && {
+    ...!e && {
       ":hover": {
-        img: { transform: `scale(${o})` }
+        img: { transform: `scale(${t})` }
       }
     }
   })
-), S = c(i)(({ titlePosition: t = "bottom", titleAlignment: o = "center" }) => ({
+), l = d(c)(({ titlePosition: e = "bottom", titleAlignment: t = "center" }) => ({
   left: 10,
   right: 10,
   padding: 8,
-  textAlign: o,
+  textAlign: t,
   position: "absolute",
   transition: "all 0.3s",
-  ...t === "bottom" && { bottom: 10 },
-  ...t === "top" && { top: 10 },
-  ...t === "center" && {
+  ...e === "bottom" && { bottom: 10 },
+  ...e === "top" && { top: 10 },
+  ...e === "center" && {
     top: "50%",
     transform: "translateY(-50%)"
   }
-})), B = ({
-  image: t,
-  title: o,
-  width: e = 250,
-  height: a = 250,
-  alt: l = "category",
-  titlePosition: p = "bottom",
-  titleAlignment: m = "center",
-  titleVariant: g = "body1",
-  titleColor: d,
-  titleBackgroundColor: b = "background.paper",
-  titleOpacity: f = 1,
-  borderRadius: s = 2,
-  disableHoverEffect: x = !1,
-  hoverScale: y = 1.1,
-  onClick: n,
-  sx: j,
-  titleSx: h,
-  imageSx: u
-}) => /* @__PURE__ */ r.jsxs(
-  F,
+})), i = ({
+  image: e,
+  title: t,
+  width: o = 250,
+  height: n = 250,
+  alt: p = "category",
+  titlePosition: m = "bottom",
+  titleAlignment: f = "center",
+  titleVariant: y = "body1",
+  titleColor: v,
+  titleBackgroundColor: g = "background.paper",
+  titleOpacity: h = 1,
+  borderRadius: u = 2,
+  disableHoverEffect: b = !1,
+  hoverScale: V = 1.1,
+  onClick: s,
+  sx: x,
+  titleSx: q,
+  imageSx: _
+}) => /* @__PURE__ */ a.jsxs(
+  r,
   {
-    disableHoverEffect: x,
-    hoverScale: y,
-    onClick: n,
+    disableHoverEffect: b,
+    hoverScale: V,
+    onClick: s,
     sx: {
-      borderRadius: s,
-      cursor: n ? "pointer" : "default",
-      width: e,
-      height: a,
-      ...j
+      borderRadius: u,
+      cursor: s ? "pointer" : "default",
+      width: o,
+      height: n,
+      ...x
     },
     children: [
-      /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ a.jsx(
         C,
         {
-          src: t,
-          width: e,
-          height: a,
-          alt: l,
+          src: e,
+          width: o,
+          height: n,
+          alt: p,
           style: {
             objectFit: "cover",
-            ...u
+            ..._
           }
         }
       ),
-      /* @__PURE__ */ r.jsx(
-        S,
+      /* @__PURE__ */ a.jsx(
+        l,
         {
-          titlePosition: p,
-          titleAlignment: m,
+          titlePosition: m,
+          titleAlignment: f,
           sx: {
-            borderRadius: s,
-            bgcolor: b,
-            opacity: f,
-            ...h
+            borderRadius: u,
+            bgcolor: g,
+            opacity: h,
+            ...q
           },
-          children: /* @__PURE__ */ r.jsx(v, { variant: g, color: d, children: o })
+          children: /* @__PURE__ */ a.jsx(S, { variant: y, color: v, children: t })
         }
       )
     ]
   }
 );
+i.displayName = "SCategoryCard";
+try {
+  r.displayName = "Wrapper", r.__docgenInfo = { description: "", displayName: "Wrapper", props: {} };
+} catch {
+}
+try {
+  l.displayName = "CategoryTitle", l.__docgenInfo = { description: "", displayName: "CategoryTitle", props: {} };
+} catch {
+}
+try {
+  i.displayName = "SCategoryCard", i.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "SCategoryCard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
+} catch {
+}
+try {
+  scategorycard.displayName = "scategorycard", scategorycard.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "scategorycard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
+} catch {
+}
 export {
-  S as CategoryTitle,
-  F as Wrapper,
-  B as default
+  l as CategoryTitle,
+  i as SCategoryCard,
+  r as Wrapper,
+  i as default
 };

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

@@ -1,4 +1,4 @@
-import { default as o } from "./s-chat-input.js";
+import { SChatInput as e } from "./s-chat-input.js";
 export {
-  o as default
+  e as default
 };

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

@@ -1,11 +1,22 @@
 import { default as React } from 'react';
 import { STextFieldProps } from '../s-text-field';
+/**
+ * Props interface for SChatInput component
+ */
 export interface SChatInputProps extends Omit<STextFieldProps, 'onSubmit'> {
+    /** Callback function called when message is submitted with Enter key or submit button */
     onSubmit?: (value: string, files?: File[]) => void;
+    /** Optional callback function called when files are selected */
     onFileSelect?: (files: File[]) => void;
+    /** Disable the input and submission */
     disabled?: boolean;
+    /** File types accepted for upload (e.g., "image/*,.pdf,.doc") */
     acceptedFileTypes?: string;
+    /** Maximum file size in bytes for uploaded files */
     maxFileSize?: number;
 }
-declare const SChatInput: React.ForwardRefExoticComponent<Omit<SChatInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A chat input component with file attachment support, emoji picker, and multiline text input.
+ */
+export declare const SChatInput: React.ForwardRefExoticComponent<Omit<SChatInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SChatInput;

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

@@ -1,70 +1,70 @@
 import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as K, useState as c, useRef as T, useId as V, useEffect as B } from "react";
-import { Box as s, outlinedInputClasses as D, Typography as I, 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 G from "../s-text-field/s-text-field.js";
+import { forwardRef as A, useState as c, useRef as L, useId as O, useEffect as D } from "react";
+import { Box as a, outlinedInputClasses as K, Typography as I, Popper as B, ClickAwayListener as N } from "@mui/material";
+import W from "emoji-picker-react";
+import { SFileIcon as H } from "../s-file-icon/s-file-icon.js";
+import { SIconButton as p } from "../s-icon-button/s-icon-button.js";
+import { STextField as G } from "../s-text-field/s-text-field.js";
 import { C as J } from "../Close-BRlEKA2Q.js";
-import { c as E } from "../createSvgIcon-DxwgGAVe.js";
-import { A as N } from "../ArrowUpward-DhTFpzoh.js";
-const Q = E(/* @__PURE__ */ r.jsx("path", {
+import { c as S } from "../createSvgIcon-DxwgGAVe.js";
+import { A as Q } from "../ArrowUpward-DhTFpzoh.js";
+const X = S(/* @__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"), X = E(/* @__PURE__ */ r.jsx("path", {
+}), "AttachFile"), Y = S(/* @__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"), le = K(
-  ({ onSubmit: p, onFileSelect: m, disabled: a, acceptedFileTypes: M, maxFileSize: v, ...z }, U) => {
-    const [u, h] = c(""), [l, x] = c([]), [i, f] = c(/* @__PURE__ */ new Map()), [k, g] = c(!1), C = T(null), y = V(), b = (e) => e.type.startsWith("image/"), $ = (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((t) => new Map(t).set(o, n)), n;
+}), "EmojiEmotions"), j = A(
+  ({ onSubmit: l, onFileSelect: u, disabled: i, acceptedFileTypes: E, maxFileSize: v, ...z }, _) => {
+    const [m, f] = c(""), [d, h] = c([]), [s, b] = c(/* @__PURE__ */ new Map()), [k, x] = c(!1), C = L(null), w = O(), g = (e) => e.type.startsWith("image/"), V = (e) => {
+      const t = `${e.name}-${e.size}-${e.lastModified}`;
+      if (s.has(t))
+        return s.get(t);
+      if (g(e)) {
+        const o = URL.createObjectURL(e);
+        return b((n) => new Map(n).set(t, o)), o;
       }
       return "";
+    }, M = (e) => {
+      f(e.target.value);
+    }, U = (e) => {
+      f((t) => t + e.emoji), x(!1);
+    }, $ = () => {
+      x(!k);
+    }, F = () => {
+      i || m.trim().length === 0 && d.length === 0 || (l == null || l(m, d), f(""), s.forEach((e) => URL.revokeObjectURL(e)), b(/* @__PURE__ */ new Map()), h([]));
+    }, q = (e) => {
+      const o = Array.from(e.target.files || []).filter((n) => !(v && n.size > v));
+      h((n) => [...n, ...o]), u == null || u(o), e.target.value = "";
     }, P = (e) => {
-      h(e.target.value);
-    }, L = (e) => {
-      h((o) => o + e.emoji), g(!1);
-    }, A = () => {
-      g(!k);
-    }, w = () => {
-      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([]));
-    }, F = (e) => {
-      const n = Array.from(e.target.files || []).filter((t) => !(v && t.size > v));
-      x((t) => [...t, ...n]), m == null || m(n), e.target.value = "";
-    }, O = (e) => {
-      const o = l[e];
-      if (o && b(o)) {
-        const n = `${o.name}-${o.size}-${o.lastModified}`, t = i.get(n);
-        t && (URL.revokeObjectURL(t), f((j) => {
-          const R = new Map(j);
-          return R.delete(n), R;
+      const t = d[e];
+      if (t && g(t)) {
+        const o = `${t.name}-${t.size}-${t.lastModified}`, n = s.get(o);
+        n && (URL.revokeObjectURL(n), b((y) => {
+          const R = new Map(y);
+          return R.delete(o), R;
         }));
       }
-      x((n) => n.filter((t, j) => j !== e));
-    }, S = (e) => {
-      e.key === "Enter" && !e.shiftKey && (e.preventDefault(), w());
+      h((o) => o.filter((n, y) => y !== e));
+    }, T = (e) => {
+      e.key === "Enter" && !e.shiftKey && (e.preventDefault(), F());
     };
-    return B(() => () => {
-      i.forEach((e) => URL.revokeObjectURL(e));
-    }, [i]), /* @__PURE__ */ r.jsxs(s, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
+    return D(() => () => {
+      s.forEach((e) => URL.revokeObjectURL(e));
+    }, [s]), /* @__PURE__ */ r.jsxs(a, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
       /* @__PURE__ */ r.jsx(
         G,
         {
           placeholder: "Enter your message here...",
-          disabled: a,
-          value: u,
-          onChange: P,
-          onKeyDown: S,
+          disabled: i,
+          value: m,
+          onChange: M,
+          onKeyDown: T,
           multiline: !0,
           minRows: 1,
           maxRows: 10,
           size: "small",
           variant: "outlined",
           fullWidth: !0,
-          inputRef: U,
+          inputRef: _,
           slotProps: {
             input: {
               sx: {
@@ -72,7 +72,7 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
                 backgroundColor: "transparent",
                 border: "none",
                 padding: 0,
-                [`&.${D.focused}`]: {
+                [`&.${K.focused}`]: {
                   outline: "none"
                 },
                 "& fieldset": {
@@ -90,10 +90,10 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
           ...z
         }
       ),
-      l.length > 0 && /* @__PURE__ */ r.jsx(s, { mt: 1, children: l.map((e, o) => {
-        const n = b(e), t = e.name.split(".").pop();
+      d.length > 0 && /* @__PURE__ */ r.jsx(a, { mt: 1, children: d.map((e, t) => {
+        const o = g(e), n = e.name.split(".").pop();
         return /* @__PURE__ */ r.jsxs(
-          s,
+          a,
           {
             display: "flex",
             alignItems: "center",
@@ -107,12 +107,12 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
               mb: 0.5
             },
             children: [
-              /* @__PURE__ */ r.jsxs(s, { display: "flex", alignItems: "center", gap: 1, children: [
-                n ? /* @__PURE__ */ r.jsx(
-                  s,
+              /* @__PURE__ */ r.jsxs(a, { display: "flex", alignItems: "center", gap: 1, children: [
+                o ? /* @__PURE__ */ r.jsx(
+                  a,
                   {
                     component: "img",
-                    src: $(e),
+                    src: V(e),
                     alt: e.name,
                     sx: {
                       width: 40,
@@ -123,8 +123,8 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
                       borderColor: "divider"
                     }
                   }
-                ) : /* @__PURE__ */ r.jsx(q, { extension: t }),
-                /* @__PURE__ */ r.jsxs(s, { display: "flex", flexDirection: "row", alignItems: "center", gap: 1, children: [
+                ) : /* @__PURE__ */ r.jsx(H, { extension: n }),
+                /* @__PURE__ */ r.jsxs(a, { display: "flex", flexDirection: "row", alignItems: "center", gap: 1, children: [
                   /* @__PURE__ */ r.jsx(I, { variant: "subtitle2", textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", children: e.name }),
                   /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsxs(I, { variant: "caption", color: "text.secondary", children: [
                     "(",
@@ -133,31 +133,31 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
                   ] }) })
                 ] })
               ] }),
-              /* @__PURE__ */ r.jsx(d, { size: "small", onClick: () => O(o), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ r.jsx(J, {}) })
+              /* @__PURE__ */ r.jsx(p, { size: "small", onClick: () => P(t), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ r.jsx(J, {}) })
             ]
           },
-          `${e.name}-${o}`
+          `${e.name}-${t}`
         );
       }) }),
-      /* @__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.jsxs(a, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
+        /* @__PURE__ */ r.jsxs(a, { display: "flex", gap: 1, children: [
           /* @__PURE__ */ r.jsx(
             "input",
             {
               type: "file",
               multiple: !0,
-              accept: M,
-              onChange: F,
+              accept: E,
+              onChange: q,
               style: { display: "none" },
-              id: `file-attachment-input-${y}`,
-              disabled: a
+              id: `file-attachment-input-${w}`,
+              disabled: i
             }
           ),
-          /* @__PURE__ */ r.jsx("label", { htmlFor: `file-attachment-input-${y}`, children: /* @__PURE__ */ r.jsx(
-            d,
+          /* @__PURE__ */ r.jsx("label", { htmlFor: `file-attachment-input-${w}`, children: /* @__PURE__ */ r.jsx(
+            p,
             {
               component: "span",
-              disabled: a,
+              disabled: i,
               size: "small",
               sx: {
                 transition: "transform 0.3s ease",
@@ -165,15 +165,15 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
                   transform: "scale(1.1)"
                 }
               },
-              children: /* @__PURE__ */ r.jsx(Q, {})
+              children: /* @__PURE__ */ r.jsx(X, {})
             }
           ) }),
           /* @__PURE__ */ r.jsx(
-            d,
+            p,
             {
               ref: C,
-              onClick: A,
-              disabled: a,
+              onClick: $,
+              disabled: i,
               size: "small",
               sx: {
                 transition: "transform 0.3s ease",
@@ -181,15 +181,15 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
                   transform: "scale(1.1)"
                 }
               },
-              children: /* @__PURE__ */ r.jsx(X, {})
+              children: /* @__PURE__ */ r.jsx(Y, {})
             }
           )
         ] }),
         /* @__PURE__ */ r.jsx(
-          d,
+          p,
           {
-            onClick: w,
-            disabled: a,
+            onClick: F,
+            disabled: i,
             size: "small",
             sx: {
               transition: "transform 0.3s ease",
@@ -197,12 +197,12 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
                 transform: "scale(1.2)"
               }
             },
-            children: /* @__PURE__ */ r.jsx(N, {})
+            children: /* @__PURE__ */ r.jsx(Q, {})
           }
         )
       ] }),
-      /* @__PURE__ */ r.jsx(W, { open: k, anchorEl: C.current, placement: "top-start", sx: { zIndex: 1300 }, children: /* @__PURE__ */ r.jsx(H, { onClickAway: () => g(!1), children: /* @__PURE__ */ r.jsx(
-        s,
+      /* @__PURE__ */ r.jsx(B, { open: k, anchorEl: C.current, placement: "top-start", sx: { zIndex: 1300 }, children: /* @__PURE__ */ r.jsx(N, { onClickAway: () => x(!1), children: /* @__PURE__ */ r.jsx(
+        a,
         {
           sx: {
             border: "1px solid",
@@ -292,9 +292,9 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
             }
           },
           children: /* @__PURE__ */ r.jsx(
-            _,
+            W,
             {
-              onEmojiClick: L,
+              onEmojiClick: U,
               width: 300,
               height: 400,
               searchDisabled: !1,
@@ -307,6 +307,16 @@ const Q = E(/* @__PURE__ */ r.jsx("path", {
     ] });
   }
 );
+j.displayName = "SChatInput";
+try {
+  j.displayName = "SChatInput", j.__docgenInfo = { description: "A chat input component with file attachment support, emoji picker, and multiline text input.", displayName: "SChatInput", props: { onSubmit: { defaultValue: null, description: "Callback function called when message is submitted with Enter key or submit button", name: "onSubmit", required: !1, type: { name: "((value: string, files?: File[]) => void)" } }, disabled: { defaultValue: null, description: "Disable the input and submission", name: "disabled", required: !1, type: { name: "boolean" } }, onFileSelect: { defaultValue: null, description: "Optional callback function called when files are selected", name: "onFileSelect", required: !1, type: { name: "((files: File[]) => void)" } }, acceptedFileTypes: { defaultValue: null, description: 'File types accepted for upload (e.g., "image/*,.pdf,.doc")', name: "acceptedFileTypes", required: !1, type: { name: "string" } }, maxFileSize: { defaultValue: null, description: "Maximum file size in bytes for uploaded files", name: "maxFileSize", required: !1, type: { name: "number" } } } };
+} catch {
+}
+try {
+  schatinput.displayName = "schatinput", schatinput.__docgenInfo = { description: "A chat input component with file attachment support, emoji picker, and multiline text input.", displayName: "schatinput", props: { onSubmit: { defaultValue: null, description: "Callback function called when message is submitted with Enter key or submit button", name: "onSubmit", required: !1, type: { name: "((value: string, files?: File[]) => void)" } }, disabled: { defaultValue: null, description: "Disable the input and submission", name: "disabled", required: !1, type: { name: "boolean" } }, onFileSelect: { defaultValue: null, description: "Optional callback function called when files are selected", name: "onFileSelect", required: !1, type: { name: "((files: File[]) => void)" } }, acceptedFileTypes: { defaultValue: null, description: 'File types accepted for upload (e.g., "image/*,.pdf,.doc")', name: "acceptedFileTypes", required: !1, type: { name: "string" } }, maxFileSize: { defaultValue: null, description: "Maximum file size in bytes for uploaded files", name: "maxFileSize", required: !1, type: { name: "number" } } } };
+} catch {
+}
 export {
-  le as default
+  j as SChatInput,
+  j as default
 };

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

@@ -1,4 +1,4 @@
-import { default as o } from "./s-chat-message.js";
+import { SChatMessage as s } from "./s-chat-message.js";
 export {
-  o as default
+  s as default
 };

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

@@ -9,22 +9,43 @@ export interface ChatAttachment {
     mimeType?: string;
     thumbnailUrl?: string;
 }
+/**
+ * Props interface for SChatMessage component
+ */
 export interface SChatMessageProps extends Omit<BoxProps, 'children'> {
+    /** The message content to display in the chat bubble */
     message?: string;
+    /** The message variant controlling alignment and styling */
     variant?: 'sent' | 'received';
+    /** The timestamp for the message, displayed when showTimestamp is true */
     timestamp?: string | Date;
+    /** Avatar image URL or base64 string to display next to the message */
     avatar?: string;
+    /** Name of the message sender, displayed above received messages when provided */
     senderName?: string;
+    /** Whether to display the avatar next to the message */
     showAvatar?: boolean;
+    /** Whether to display the formatted timestamp below the message */
     showTimestamp?: boolean;
+    /** Maximum width of the message bubble container */
     maxWidth?: string | number;
+    /** Array of file/image attachments to display with the message */
     attachments?: ChatAttachment[];
+    /** Callback fired when an attachment is clicked */
     onAttachmentClick?: (attachment: ChatAttachment) => void;
+    /** Callback fired when file download button is clicked */
     onDownload?: (attachment: ChatAttachment) => void;
+    /** Whether the message failed to send */
     hasError?: boolean;
+    /** Custom error message to display when hasError is true */
     errorMessage?: string;
+    /** Callback fired when retry button is clicked */
     onRetry?: () => void;
+    /** Whether to show skeleton loading state instead of content */
     loading?: boolean;
 }
-declare const SChatMessage: React.FC<SChatMessageProps>;
+/**
+ * A comprehensive chat message component for conversation interfaces with support for text, images, and file attachments.
+ */
+export declare const SChatMessage: React.FC<SChatMessageProps>;
 export default SChatMessage;