@solostylist/ui-kit 1.0.166 → 1.0.168

package/dist/s-chips/s-chips.d.ts

@@ -12,22 +12,9 @@ export interface SChipsProps {
     /** Text used in overflow chip (default: 'keywords') */
     overflowText?: string;
 }
-/**
- * SChips - A smart chip display component that handles overflow with intelligent truncation.
- *
- * Key features:
- * - Responsive overflow handling that shows '+N more' when chips exceed container width
- * - Dynamic width calculation using DOM measurement
- * - Tooltip display of hidden chips on hover
- * - Click handling for individual chips
- * - Automatic recalculation on window resize
- * - Configurable overflow text for different use cases
- *
- * The component uses real DOM measurement to accurately calculate chip widths
- * and determines how many chips can fit in the available space.
- *
- * @param props - SChipsProps with chips array and configuration options
- * @returns JSX.Element - Responsive chip display with overflow handling
- */
-declare const SChips: ({ chips, overflow, onClick, overflowText }: SChipsProps) => React.JSX.Element;
+/** A smart chip display component that handles overflow with intelligent truncation. */
+export declare const SChips: {
+    ({ chips, overflow, onClick, overflowText, }: SChipsProps): React.JSX.Element;
+    displayName: string;
+};
 export default SChips;

package/dist/s-chips/s-chips.js

@@ -1,72 +1,77 @@
-import { j as s } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as S, useState as m, useEffect as v } from "react";
-import { Box as a, Chip as h, Tooltip as E } from "@mui/material";
-const L = ({ chips: n, overflow: r = !0, onClick: l, overflowText: c = "keywords" }) => {
-  const u = S(null), [w, C] = m([]), [W, j] = m([]), [x, y] = m(0), p = () => {
-    var f;
-    const t = ((f = u.current) == null ? void 0 : f.offsetWidth) || 0;
-    let e = 0, i = 0;
-    for (let o = 0; o < n.length; o++) {
-      const b = d(n[o]);
-      if (e + b <= t)
-        e += b, i++;
+import { j as n } from "../jsx-runtime-OVHDjVDe.js";
+import { useRef as j, useState as c, useEffect as k } from "react";
+import { Box as l, Chip as u, Tooltip as V } from "@mui/material";
+const h = ({
+  chips: e,
+  overflow: s = !0,
+  onClick: a,
+  overflowText: m = "keywords"
+}) => {
+  const f = j(null), [v, g] = c([]), [C, b] = c([]), [w, _] = c(0), p = () => {
+    var y;
+    const i = ((y = f.current) == null ? void 0 : y.offsetWidth) || 0;
+    let t = 0, r = 0;
+    for (let o = 0; o < e.length; o++) {
+      const x = d(e[o]);
+      if (t + x <= i)
+        t += x, r++;
       else
         break;
     }
-    if (i < n.length) {
-      const o = d(`+${n.length - i} ${c}`);
-      for (; e + o > t && i > 0; )
-        i--, e -= d(n[i]);
+    if (r < e.length) {
+      const o = d(`+${e.length - r} ${m}`);
+      for (; t + o > i && r > 0; )
+        r--, t -= d(e[r]);
     }
-    C(n.slice(0, i)), j(n.slice(i)), y(n.length - i);
-  }, d = (t) => {
-    const e = document.createElement("span");
-    e.style.visibility = "hidden", e.style.position = "absolute", e.style.whiteSpace = "nowrap", e.textContent = t.trim(), document.body.appendChild(e);
-    const i = e.offsetWidth;
-    return document.body.removeChild(e), i + 16;
-  }, g = r ? { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" } : {};
-  return v(() => {
-    if (r)
+    g(e.slice(0, r)), b(e.slice(r)), _(e.length - r);
+  }, d = (i) => {
+    const t = document.createElement("span");
+    t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.textContent = i.trim(), document.body.appendChild(t);
+    const r = t.offsetWidth;
+    return document.body.removeChild(t), r + 16;
+  }, W = s ? { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" } : {};
+  return k(() => {
+    if (s)
       return p(), window.addEventListener("resize", p), () => {
         window.removeEventListener("resize", p);
       };
-  }, [n, r]), /* @__PURE__ */ s.jsxs(a, { ref: u, display: "flex", maxWidth: "100%", flexWrap: r ? "nowrap" : "wrap", ...g, children: [
-    (r ? w : n).map((t) => /* @__PURE__ */ s.jsx(
-      a,
+  }, [e, s]), /* @__PURE__ */ n.jsxs(l, { ref: f, display: "flex", maxWidth: "100%", flexWrap: s ? "nowrap" : "wrap", ...W, children: [
+    (s ? v : e).map((i) => /* @__PURE__ */ n.jsx(
+      l,
       {
         component: "span",
         textTransform: "lowercase",
         onClick: () => {
-          l == null || l(t);
+          a == null || a(i);
         },
-        children: /* @__PURE__ */ s.jsx(
-          h,
+        children: /* @__PURE__ */ n.jsx(
+          u,
           {
-            label: t.trim(),
+            label: i.trim(),
             sx: {
               mr: 1,
               mb: 1,
               userSelect: "none",
-              cursor: l ? "pointer" : "default"
+              cursor: a ? "pointer" : "default"
             }
           }
         )
       },
-      t
+      i
     )),
-    r && x > 0 && /* @__PURE__ */ s.jsx(
-      E,
+    s && w > 0 && /* @__PURE__ */ n.jsx(
+      V,
       {
         slotProps: {
           tooltip: { style: { padding: "0.5rem" } }
         },
         arrow: !0,
         placement: "top",
-        title: /* @__PURE__ */ s.jsx(a, { display: "flex", gap: 1, maxWidth: "240px", flexWrap: "wrap", children: W.map((t) => /* @__PURE__ */ s.jsx(h, { label: t.trim() }, t)) }),
-        children: /* @__PURE__ */ s.jsx(a, { component: "span", textTransform: "lowercase", children: /* @__PURE__ */ s.jsx(
-          h,
+        title: /* @__PURE__ */ n.jsx(l, { display: "flex", gap: 1, maxWidth: "240px", flexWrap: "wrap", children: C.map((i) => /* @__PURE__ */ n.jsx(u, { label: i.trim() }, i)) }),
+        children: /* @__PURE__ */ n.jsx(l, { component: "span", textTransform: "lowercase", children: /* @__PURE__ */ n.jsx(
+          u,
           {
-            label: `+${x} ${c}`,
+            label: `+${w} ${m}`,
             variant: "outlined",
             sx: { mr: 1, mb: 1, userSelect: "none", cursor: "pointer" }
           }
@@ -75,6 +80,16 @@ const L = ({ chips: n, overflow: r = !0, onClick: l, overflowText: c = "keywords
     )
   ] });
 };
+h.displayName = "SChips";
+try {
+  h.displayName = "SChips", h.__docgenInfo = { description: "A smart chip display component that handles overflow with intelligent truncation.", displayName: "SChips", props: { chips: { defaultValue: null, description: "Array of strings to display as chips", name: "chips", required: !0, type: { name: "string[]" } }, overflow: { defaultValue: { value: "true" }, description: "Whether to handle overflow with '+N more' chip (default: true)", name: "overflow", required: !1, type: { name: "boolean" } }, onClick: { defaultValue: null, description: "Callback fired when a chip is clicked", name: "onClick", required: !1, type: { name: "((tag: string) => void)" } }, overflowText: { defaultValue: { value: "keywords" }, description: "Text used in overflow chip (default: 'keywords')", name: "overflowText", required: !1, type: { name: "string" } } } };
+} catch {
+}
+try {
+  schips.displayName = "schips", schips.__docgenInfo = { description: "A smart chip display component that handles overflow with intelligent truncation.", displayName: "schips", props: { chips: { defaultValue: null, description: "Array of strings to display as chips", name: "chips", required: !0, type: { name: "string[]" } }, overflow: { defaultValue: { value: "true" }, description: "Whether to handle overflow with '+N more' chip (default: true)", name: "overflow", required: !1, type: { name: "boolean" } }, onClick: { defaultValue: null, description: "Callback fired when a chip is clicked", name: "onClick", required: !1, type: { name: "((tag: string) => void)" } }, overflowText: { defaultValue: { value: "keywords" }, description: "Text used in overflow chip (default: 'keywords')", name: "overflowText", required: !1, type: { name: "string" } } } };
+} catch {
+}
 export {
-  L as default
+  h as SChips,
+  h as default
 };

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

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

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

@@ -1,25 +1,50 @@
 import { default as React } from 'react';
 import { SxProps } from '@mui/material';
+/**
+ * Props interface for SCommentMessage component
+ */
 export interface SCommentMessageProps {
+    /** Unique identifier for the comment */
     id?: string | number;
+    /** Name of the user who posted the comment */
     userName: string;
+    /** URL of the user avatar image */
     userAvatar?: string;
+    /** The text content of the comment */
     commentContent: string;
+    /** Date/time when the comment was posted */
     datetime: Date | string;
+    /** Number of likes the comment has received */
     likes?: number;
+    /** Whether the current user has liked this comment */
     isLiked?: boolean;
+    /** Array of reply comments */
     replies?: SCommentMessageProps[];
+    /** Total count of replies to display */
     totalReplies?: number;
+    /** Callback function triggered when the like button is clicked */
     onLike?: (commentId: string | number) => void;
+    /** Callback function triggered when the reply button is clicked */
     onReply?: (commentId: string | number, parentId?: string | number) => void;
+    /** Callback function triggered when the expand/collapse replies button is clicked */
     onToggleReplies?: (commentId: string | number) => void;
+    /** Whether to show replies and the expand/collapse functionality */
     showReplies?: boolean;
+    /** Size of the avatar in pixels */
     avatarSize?: number;
+    /** Current nesting level of the comment */
     level?: number;
+    /** Maximum nesting level allowed before stopping further indentation */
     maxLevel?: number;
+    /** Whether to show skeleton loading state instead of content */
     loading?: boolean;
+    /** Custom content to display below the comment actions */
     children?: React.ReactNode;
+    /** Material-UI sx prop for custom styling */
     sx?: SxProps;
 }
-declare const SCommentMessage: React.FC<SCommentMessageProps>;
+/**
+ * A comprehensive comment message component with avatar display, user information, relative timestamps, like functionality, and nested reply support.
+ */
+export declare const SCommentMessage: React.FC<SCommentMessageProps>;
 export default SCommentMessage;

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

@@ -1,125 +1,131 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as S, useEffect as R } from "react";
-import { Box as c, Stack as x, Typography as g, IconButton as q, Button as F, Collapse as G } from "@mui/material";
-import J from "../s-avatar/s-avatar.js";
-import e from "../s-skeleton/s-skeleton.js";
-import { F as K } from "../Favorite-DS5Gpq2s.js";
-import { c as L } from "../createSvgIcon-DxwgGAVe.js";
-import { E as O } from "../ExpandMore-DTWX_mHf.js";
-const Q = L(/* @__PURE__ */ t.jsx("path", {
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as M, useEffect as _ } from "react";
+import { Box as d, Stack as m, Typography as h, IconButton as U, Button as N, Collapse as H } from "@mui/material";
+import { SAvatar as Y } from "../s-avatar/s-avatar.js";
+import { SSkeleton as t } from "../s-skeleton/s-skeleton.js";
+import { F as G } from "../Favorite-DS5Gpq2s.js";
+import { c as C } from "../createSvgIcon-DxwgGAVe.js";
+import { E as J } from "../ExpandMore-DTWX_mHf.js";
+const K = C(/* @__PURE__ */ e.jsx("path", {
   d: "m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
-}), "ExpandLess"), U = L(/* @__PURE__ */ t.jsx("path", {
+}), "ExpandLess"), O = C(/* @__PURE__ */ e.jsx("path", {
   d: "M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"
-}), "FavoriteBorder"), X = L(/* @__PURE__ */ t.jsx("path", {
+}), "FavoriteBorder"), Q = C(/* @__PURE__ */ e.jsx("path", {
   d: "M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11"
-}), "Reply"), Z = (i) => {
-  const d = /* @__PURE__ */ new Date(), j = typeof i == "string" ? new Date(i) : i, p = d.getTime() - j.getTime(), f = Math.floor(p / 1e3), n = Math.floor(f / 60), o = Math.floor(n / 60), s = Math.floor(o / 24), h = Math.floor(s / 7), r = Math.floor(s / 30), a = Math.floor(s / 365);
-  return f < 60 ? "just now" : n < 60 ? n === 1 ? "1 minute ago" : `${n} minutes ago` : o < 24 ? o === 1 ? "1 hour ago" : `${o} hours ago` : s < 7 ? s === 1 ? "1 day ago" : `${s} days ago` : h < 4 ? h === 1 ? "1 week ago" : `${h} weeks ago` : r < 12 ? r === 1 ? "1 month ago" : `${r} months ago` : a === 1 ? "1 year ago" : `${a} years ago`;
-}, _ = ({
-  id: i = Date.now(),
-  userName: d,
-  userAvatar: j,
-  commentContent: p,
-  datetime: f,
-  likes: n = 0,
-  isLiked: o = !1,
-  replies: s = [],
-  totalReplies: h,
+}), "Reply"), X = (a) => {
+  const u = /* @__PURE__ */ new Date(), g = typeof a == "string" ? new Date(a) : a, y = u.getTime() - g.getTime(), p = Math.floor(y / 1e3), i = Math.floor(p / 60), s = Math.floor(i / 60), n = Math.floor(s / 24), c = Math.floor(n / 7), r = Math.floor(n / 30), o = Math.floor(n / 365);
+  return p < 60 ? "just now" : i < 60 ? i === 1 ? "1 minute ago" : `${i} minutes ago` : s < 24 ? s === 1 ? "1 hour ago" : `${s} hours ago` : n < 7 ? n === 1 ? "1 day ago" : `${n} days ago` : c < 4 ? c === 1 ? "1 week ago" : `${c} weeks ago` : r < 12 ? r === 1 ? "1 month ago" : `${r} months ago` : o === 1 ? "1 year ago" : `${o} years ago`;
+}, x = ({
+  id: a = Date.now(),
+  userName: u,
+  userAvatar: g,
+  commentContent: y,
+  datetime: p,
+  likes: i = 0,
+  isLiked: s = !1,
+  replies: n = [],
+  totalReplies: c,
   onLike: r,
-  onReply: a,
-  onToggleReplies: C,
-  showReplies: u = !0,
-  avatarSize: m = 48,
-  level: b = 0,
-  maxLevel: z = 3,
-  loading: T = !1,
-  children: k,
-  sx: $ = {}
+  onReply: o,
+  onToggleReplies: q,
+  showReplies: v = !0,
+  avatarSize: f = 48,
+  level: S = 0,
+  maxLevel: V = 3,
+  loading: $ = !1,
+  children: L,
+  sx: R = {}
 }) => {
-  const [E, v] = S(n), [w, I] = S(o), [y, H] = S(!1), W = () => {
-    w ? (v((l) => Math.max(0, l - 1)), I(!1)) : (v((l) => l + 1), I(!0)), r && r(i);
-  }, A = () => {
-    a && a(i);
-  }, P = () => {
-    H(!y), C && C(i);
-  }, V = Z(f), M = h ?? s.length, B = M > 0, D = Math.min(b, z) * 2;
-  return R(() => {
-    v(n);
-  }, [n]), R(() => {
-    I(o);
-  }, [o]), T ? /* @__PURE__ */ t.jsx(c, { sx: { pl: D, py: 1, ...$ }, children: /* @__PURE__ */ t.jsxs(x, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
-    /* @__PURE__ */ t.jsx(e, { component: "rounded-avatar", width: m, height: m }),
-    /* @__PURE__ */ t.jsxs(c, { sx: { flex: 1 }, children: [
-      /* @__PURE__ */ t.jsxs(x, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
-        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 120, height: 20 }),
-        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 80, height: 16 })
+  const [z, j] = M(i), [w, b] = M(s), [I, E] = M(!1), A = () => {
+    w ? (j((l) => Math.max(0, l - 1)), b(!1)) : (j((l) => l + 1), b(!0)), r && r(a);
+  }, B = () => {
+    o && o(a);
+  }, W = () => {
+    E(!I), q && q(a);
+  }, F = X(p), k = c ?? n.length, D = k > 0, T = Math.min(S, V) * 2;
+  return _(() => {
+    j(i);
+  }, [i]), _(() => {
+    b(s);
+  }, [s]), $ ? /* @__PURE__ */ e.jsx(d, { sx: { pl: T, py: 1, ...R }, children: /* @__PURE__ */ e.jsxs(m, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+    /* @__PURE__ */ e.jsx(t, { component: "rounded-avatar", width: f, height: f }),
+    /* @__PURE__ */ e.jsxs(d, { sx: { flex: 1 }, children: [
+      /* @__PURE__ */ e.jsxs(m, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+        /* @__PURE__ */ e.jsx(t, { variant: "text", width: 120, height: 20 }),
+        /* @__PURE__ */ e.jsx(t, { variant: "text", width: 80, height: 16 })
       ] }),
-      /* @__PURE__ */ t.jsx(e, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
-      /* @__PURE__ */ t.jsx(e, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
-      /* @__PURE__ */ t.jsx(e, { variant: "text", width: "70%", height: 16, sx: { mb: 2 } }),
-      /* @__PURE__ */ t.jsxs(x, { direction: "row", spacing: 1, alignItems: "center", children: [
-        /* @__PURE__ */ t.jsx(e, { component: "icon-button" }),
-        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 20, height: 16 }),
-        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 60, height: 32 }),
-        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 80, height: 32 })
+      /* @__PURE__ */ e.jsx(t, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
+      /* @__PURE__ */ e.jsx(t, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
+      /* @__PURE__ */ e.jsx(t, { variant: "text", width: "70%", height: 16, sx: { mb: 2 } }),
+      /* @__PURE__ */ e.jsxs(m, { direction: "row", spacing: 1, alignItems: "center", children: [
+        /* @__PURE__ */ e.jsx(t, { component: "icon-button" }),
+        /* @__PURE__ */ e.jsx(t, { variant: "text", width: 20, height: 16 }),
+        /* @__PURE__ */ e.jsx(t, { variant: "text", width: 60, height: 32 }),
+        /* @__PURE__ */ e.jsx(t, { variant: "text", width: 80, height: 32 })
       ] })
     ] })
-  ] }) }) : /* @__PURE__ */ t.jsxs(c, { sx: { pl: D, py: 1, ...$ }, children: [
-    /* @__PURE__ */ t.jsxs(x, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
-      /* @__PURE__ */ t.jsx(J, { avatar: j, name: d, size: m }),
-      /* @__PURE__ */ t.jsxs(c, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ t.jsxs(x, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
-          /* @__PURE__ */ t.jsx(g, { variant: "subtitle2", fontWeight: "600", children: d }),
-          /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(g, { variant: "caption", color: "text.secondary", children: V }) })
+  ] }) }) : /* @__PURE__ */ e.jsxs(d, { sx: { pl: T, py: 1, ...R }, children: [
+    /* @__PURE__ */ e.jsxs(m, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ e.jsx(Y, { avatar: g, name: u, size: f }),
+      /* @__PURE__ */ e.jsxs(d, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(m, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+          /* @__PURE__ */ e.jsx(h, { variant: "subtitle2", fontWeight: "600", children: u }),
+          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(h, { variant: "caption", color: "text.secondary", children: F }) })
         ] }),
-        /* @__PURE__ */ t.jsx(g, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: p }),
-        /* @__PURE__ */ t.jsxs(x, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ t.jsx(
-            q,
+        /* @__PURE__ */ e.jsx(h, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: y }),
+        /* @__PURE__ */ e.jsxs(m, { direction: "row", spacing: 1, alignItems: "center", children: [
+          /* @__PURE__ */ e.jsx(
+            U,
             {
               size: "small",
-              onClick: W,
+              onClick: A,
               sx: {
                 color: w ? "error.main" : "text.secondary"
               },
-              children: w ? /* @__PURE__ */ t.jsx(K, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(U, { fontSize: "small" })
+              children: w ? /* @__PURE__ */ e.jsx(G, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(O, { fontSize: "small" })
             }
           ),
-          E > 0 && /* @__PURE__ */ t.jsx(g, { variant: "caption", color: "text.secondary", children: E }),
-          /* @__PURE__ */ t.jsx(F, { size: "small", startIcon: /* @__PURE__ */ t.jsx(X, { fontSize: "small" }), onClick: A, variant: "text", children: "Reply" }),
-          B && u && /* @__PURE__ */ t.jsxs(
-            F,
+          z > 0 && /* @__PURE__ */ e.jsx(h, { variant: "caption", color: "text.secondary", children: z }),
+          /* @__PURE__ */ e.jsx(N, { size: "small", startIcon: /* @__PURE__ */ e.jsx(Q, { fontSize: "small" }), onClick: B, variant: "text", children: "Reply" }),
+          D && v && /* @__PURE__ */ e.jsxs(
+            N,
             {
               size: "small",
-              startIcon: y ? /* @__PURE__ */ t.jsx(Q, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(O, { fontSize: "small" }),
-              onClick: P,
+              startIcon: I ? /* @__PURE__ */ e.jsx(K, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(J, { fontSize: "small" }),
+              onClick: W,
               variant: "text",
               children: [
-                M,
+                k,
                 " ",
-                M === 1 ? "reply" : "replies"
+                k === 1 ? "reply" : "replies"
               ]
             }
           )
         ] }),
-        k && /* @__PURE__ */ t.jsx(c, { sx: { mt: 2 }, children: k })
+        L && /* @__PURE__ */ e.jsx(d, { sx: { mt: 2 }, children: L })
       ] })
     ] }),
-    B && u && /* @__PURE__ */ t.jsx(G, { in: y, children: /* @__PURE__ */ t.jsx(c, { sx: { mt: 2 }, children: s.map((l, Y) => /* @__PURE__ */ t.jsx(
-      _,
+    D && v && /* @__PURE__ */ e.jsx(H, { in: I, children: /* @__PURE__ */ e.jsx(d, { sx: { mt: 2 }, children: n.map((l, P) => /* @__PURE__ */ e.jsx(
+      x,
       {
         ...l,
-        level: b + 1,
-        maxLevel: z,
+        level: S + 1,
+        maxLevel: V,
         onLike: r,
-        onReply: a,
-        showReplies: u,
-        avatarSize: Math.max(32, m - 8)
+        onReply: o,
+        showReplies: v,
+        avatarSize: Math.max(32, f - 8)
       },
-      l.id || `reply-${Y}`
+      l.id || `reply-${P}`
     )) }) })
   ] });
 };
+x.displayName = "SCommentMessage";
+try {
+  x.displayName = "SCommentMessage", x.__docgenInfo = { description: "A comprehensive comment message component with avatar display, user information, relative timestamps, like functionality, and nested reply support.", displayName: "SCommentMessage", props: { id: { defaultValue: { value: "Date.now()" }, description: "Unique identifier for the comment", name: "id", required: !1, type: { name: "string | number" } }, userName: { defaultValue: null, description: "Name of the user who posted the comment", name: "userName", required: !0, type: { name: "string" } }, userAvatar: { defaultValue: null, description: "URL of the user avatar image", name: "userAvatar", required: !1, type: { name: "string" } }, commentContent: { defaultValue: null, description: "The text content of the comment", name: "commentContent", required: !0, type: { name: "string" } }, datetime: { defaultValue: null, description: "Date/time when the comment was posted", name: "datetime", required: !0, type: { name: "string | Date" } }, likes: { defaultValue: { value: "0" }, description: "Number of likes the comment has received", name: "likes", required: !1, type: { name: "number" } }, isLiked: { defaultValue: { value: "false" }, description: "Whether the current user has liked this comment", name: "isLiked", required: !1, type: { name: "boolean" } }, replies: { defaultValue: { value: "[]" }, description: "Array of reply comments", name: "replies", required: !1, type: { name: "SCommentMessageProps[]" } }, totalReplies: { defaultValue: null, description: "Total count of replies to display", name: "totalReplies", required: !1, type: { name: "number" } }, onLike: { defaultValue: null, description: "Callback function triggered when the like button is clicked", name: "onLike", required: !1, type: { name: "((commentId: string | number) => void)" } }, onReply: { defaultValue: null, description: "Callback function triggered when the reply button is clicked", name: "onReply", required: !1, type: { name: "((commentId: string | number, parentId?: string | number) => void)" } }, onToggleReplies: { defaultValue: null, description: "Callback function triggered when the expand/collapse replies button is clicked", name: "onToggleReplies", required: !1, type: { name: "((commentId: string | number) => void)" } }, showReplies: { defaultValue: { value: "true" }, description: "Whether to show replies and the expand/collapse functionality", name: "showReplies", required: !1, type: { name: "boolean" } }, avatarSize: { defaultValue: { value: "48" }, description: "Size of the avatar in pixels", name: "avatarSize", required: !1, type: { name: "number" } }, level: { defaultValue: { value: "0" }, description: "Current nesting level of the comment", name: "level", required: !1, type: { name: "number" } }, maxLevel: { defaultValue: { value: "3" }, description: "Maximum nesting level allowed before stopping further indentation", name: "maxLevel", required: !1, type: { name: "number" } }, loading: { defaultValue: { value: "false" }, description: "Whether to show skeleton loading state instead of content", name: "loading", required: !1, type: { name: "boolean" } }, children: { defaultValue: null, description: "Custom content to display below the comment actions", name: "children", required: !1, type: { name: "ReactNode" } }, sx: { defaultValue: { value: "{}" }, description: "Material-UI sx prop for custom styling", name: "sx", required: !1, type: { name: "SxProps" } } } };
+} catch {
+}
 export {
-  _ as default
+  x as SCommentMessage,
+  x as default
 };

package/dist/s-copyable-text/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-copyable-text.js";
+import { SCopyableText as o } from "./s-copyable-text.js";
 export {
   o as default
 };

package/dist/s-copyable-text/s-copyable-text.d.ts

@@ -1,49 +1,22 @@
 import { PaperProps, TypographyProps } from '@mui/material';
 /**
- * Props for the SCopyableText component
+ * Props interface for SCopyableText component
  */
 export interface SCopyableTextProps {
     /** The text content to display and copy */
     text?: string;
-    /** Additional props to pass to the Typography component */
+    /** Props to pass to the Typography component for styling */
     typographyProps?: TypographyProps;
-    /** Callback function called when text is successfully copied */
+    /** Callback function triggered after text is successfully copied */
     onCopied?: () => void;
-    /** Additional props to pass to the Paper component */
+    /** Props to pass to the Paper component container */
     paperProps?: PaperProps;
 }
 /**
- * Text display component with built-in copy-to-clipboard functionality
- *
- * Displays text content in a styled container with a copy button overlay.
- * Features visual feedback when copying is successful and handles copy
- * errors gracefully.
- *
- * Features:
- * - One-click copy to clipboard using modern Clipboard API
- * - Visual feedback with icon change and color indication
- * - Automatic reset of copied state after 2 seconds
- * - Styled text container with border and proper spacing
- * - Word wrapping and break-word handling for long content
- * - Customizable typography through props
- * - Optional callback for copy success events
- *
- * @param text - The text content to display and enable copying for
- * @param typographyProps - Additional Material-UI Typography props for styling
- * @param onCopied - Optional callback function triggered when copy succeeds
- * @returns JSX element containing styled text with copy button, or null if no text
- *
- * @example
- * ```tsx
- * <SCopyableText
- *   text="const apiKey = 'sk-1234567890abcdef';"
- *   onCopied={() => console.log('API key copied!')}
- *   typographyProps={{
- *     variant: 'code',
- *     color: 'primary'
- *   }}
- * />
- * ```
+ * A text display component with built-in copy-to-clipboard functionality and visual feedback.
  */
-declare const SCopyableText: ({ text, typographyProps, onCopied, paperProps }: SCopyableTextProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SCopyableText: {
+    ({ text, typographyProps, onCopied, paperProps }: SCopyableTextProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
 export default SCopyableText;

package/dist/s-copyable-text/s-copyable-text.js

@@ -1,25 +1,25 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as x } from "react";
-import { Paper as d, Box as m, IconButton as h, Typography as u } from "@mui/material";
-import { c as n } from "../createSvgIcon-DxwgGAVe.js";
-const f = n(/* @__PURE__ */ e.jsx("path", {
+import { useState as d } from "react";
+import { Paper as u, Box as y, IconButton as m, Typography as f } from "@mui/material";
+import { c as s } from "../createSvgIcon-DxwgGAVe.js";
+const x = s(/* @__PURE__ */ e.jsx("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check"), j = n(/* @__PURE__ */ e.jsx("path", {
+}), "Check"), h = s(/* @__PURE__ */ e.jsx("path", {
   d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
-}), "ContentCopy"), w = ({ text: r, typographyProps: t, onCopied: o, paperProps: a }) => {
-  const [s, c] = x(!1), i = async () => {
-    if (r)
+}), "ContentCopy"), r = ({ text: t, typographyProps: o, onCopied: a, paperProps: i }) => {
+  const [p, n] = d(!1), l = async () => {
+    if (t)
       try {
-        await navigator.clipboard.writeText(r), c(!0), setTimeout(() => c(!1), 2e3), o == null || o();
-      } catch (l) {
-        console.error("Failed to copy text:", l);
+        await navigator.clipboard.writeText(t), n(!0), setTimeout(() => n(!1), 2e3), a == null || a();
+      } catch (c) {
+        console.error("Failed to copy text:", c);
       }
   };
-  return r ? /* @__PURE__ */ e.jsx(d, { sx: { p: 2, border: "1px dashed", borderColor: "divider" }, ...a, children: /* @__PURE__ */ e.jsxs(m, { sx: { position: "relative" }, children: [
+  return t ? /* @__PURE__ */ e.jsx(u, { sx: { p: 2, border: "1px dashed", borderColor: "divider" }, ...i, children: /* @__PURE__ */ e.jsxs(y, { sx: { position: "relative" }, children: [
     /* @__PURE__ */ e.jsx(
-      h,
+      m,
       {
-        onClick: i,
+        onClick: l,
         size: "small",
         sx: {
           position: "absolute",
@@ -28,14 +28,14 @@ const f = n(/* @__PURE__ */ e.jsx("path", {
           right: 0,
           zIndex: 1,
           // Ensure button appears above text
-          color: s ? "success.main" : "inherit"
+          color: p ? "success.main" : "inherit"
           // Green when copied
         },
-        children: s ? /* @__PURE__ */ e.jsx(f, {}) : /* @__PURE__ */ e.jsx(j, {})
+        children: p ? /* @__PURE__ */ e.jsx(x, {}) : /* @__PURE__ */ e.jsx(h, {})
       }
     ),
     /* @__PURE__ */ e.jsx(
-      u,
+      f,
       {
         variant: "body1",
         sx: {
@@ -43,16 +43,26 @@ const f = n(/* @__PURE__ */ e.jsx("path", {
           // Preserve whitespace and line breaks
           wordBreak: "break-word",
           // Handle long words gracefully
-          ...t == null ? void 0 : t.sx
+          ...o == null ? void 0 : o.sx
           // Allow custom styling override
         },
         color: "text.secondary",
-        ...t,
-        children: r
+        ...o,
+        children: t
       }
     )
   ] }) }) : null;
 };
+r.displayName = "SCopyableText";
+try {
+  r.displayName = "SCopyableText", r.__docgenInfo = { description: "A text display component with built-in copy-to-clipboard functionality and visual feedback.", displayName: "SCopyableText", props: { text: { defaultValue: null, description: "The text content to display and copy", name: "text", required: !1, type: { name: "string" } }, typographyProps: { defaultValue: null, description: "Props to pass to the Typography component for styling", name: "typographyProps", required: !1, type: { name: "TypographyProps" } }, onCopied: { defaultValue: null, description: "Callback function triggered after text is successfully copied", name: "onCopied", required: !1, type: { name: "(() => void)" } }, paperProps: { defaultValue: null, description: "Props to pass to the Paper component container", name: "paperProps", required: !1, type: { name: "PaperProps" } } } };
+} catch {
+}
+try {
+  scopyabletext.displayName = "scopyabletext", scopyabletext.__docgenInfo = { description: "A text display component with built-in copy-to-clipboard functionality and visual feedback.", displayName: "scopyabletext", props: { text: { defaultValue: null, description: "The text content to display and copy", name: "text", required: !1, type: { name: "string" } }, typographyProps: { defaultValue: null, description: "Props to pass to the Typography component for styling", name: "typographyProps", required: !1, type: { name: "TypographyProps" } }, onCopied: { defaultValue: null, description: "Callback function triggered after text is successfully copied", name: "onCopied", required: !1, type: { name: "(() => void)" } }, paperProps: { defaultValue: null, description: "Props to pass to the Paper component container", name: "paperProps", required: !1, type: { name: "PaperProps" } } } };
+} catch {
+}
 export {
-  w as default
+  r as SCopyableText,
+  r as default
 };

package/dist/s-countdown/index.d.ts

@@ -1,3 +1,4 @@
 export { default as SCountdown } from './s-count-down';
-export { SCountBox } from './s-count-down';
-export type { SCountDownProps, SCountBoxProps } from './s-count-down';
+export type { SCountDownProps } from './s-count-down';
+export { SCountBox } from './s-count-box';
+export type { SCountBoxProps } from './s-count-box';