@solostylist/ui-kit 1.0.197 → 1.0.200

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

@@ -1,52 +1,52 @@
 import { j as s } from "../jsx-runtime-tc70JA_2.js";
-import { useRef as S, useState as m, useCallback as C, useEffect as E } from "react";
-import { Box as p, Chip as c, Tooltip as R } from "@mui/material";
+import { useRef as g, useState as m, useCallback as C, useEffect as E } from "react";
+import { Box as a, Chip as c, Tooltip as R } from "@mui/material";
 const v = ({
-  chips: t,
-  overflow: r = !0,
+  chips: n,
+  overflow: o = !0,
   onClick: h,
-  overflowText: d = "keywords"
+  overflowText: p = "keywords"
 }) => {
-  const u = S(null), [b, w] = m([]), [y, W] = m([]), [x, j] = m(0), l = C((i) => {
+  const u = g(null), [b, w] = m([]), [y, W] = m([]), [x, j] = m(0), r = C((t) => {
     const e = document.createElement("span");
-    e.style.visibility = "hidden", e.style.position = "absolute", e.style.whiteSpace = "nowrap", e.textContent = i.trim(), document.body.appendChild(e);
-    const n = e.offsetWidth;
-    return document.body.removeChild(e), n + 16;
-  }, []), a = C(() => {
-    const i = u.current?.offsetWidth || 0;
-    let e = 0, n = 0;
-    for (let o = 0; o < t.length; o++) {
-      const f = l(t[o]);
-      if (e + f <= i)
-        e += f, n++;
+    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;
+  }, []), l = C(() => {
+    const t = u.current?.offsetWidth ?? 0;
+    let e = 0, i = 0;
+    for (const d of n) {
+      const f = r(d);
+      if (e + f <= t)
+        e += f, i++;
       else
         break;
     }
-    if (n < t.length) {
-      const o = l(`+${t.length - n} ${d}`);
-      for (; e + o > i && n > 0; )
-        n--, e -= l(t[n]);
+    if (i < n.length) {
+      const d = r(`+${n.length - i} ${p}`);
+      for (; e + d > t && i > 0; )
+        i--, e -= r(n[i]);
     }
-    w(t.slice(0, n)), W(t.slice(n)), j(t.length - n);
-  }, [t, d, l]), g = r ? { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" } : {};
+    w(n.slice(0, i)), W(n.slice(i)), j(n.length - i);
+  }, [n, p, r]), S = o ? { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" } : {};
   return E(() => {
-    if (r)
-      return a(), window.addEventListener("resize", a), () => {
-        window.removeEventListener("resize", a);
+    if (o)
+      return l(), window.addEventListener("resize", l), () => {
+        window.removeEventListener("resize", l);
       };
-  }, [t, r, a]), /* @__PURE__ */ s.jsxs(p, { ref: u, display: "flex", maxWidth: "100%", flexWrap: r ? "nowrap" : "wrap", ...g, children: [
-    (r ? b : t).map((i) => /* @__PURE__ */ s.jsx(
-      p,
+  }, [n, o, l]), /* @__PURE__ */ s.jsxs(a, { ref: u, display: "flex", maxWidth: "100%", flexWrap: o ? "nowrap" : "wrap", ...S, children: [
+    (o ? b : n).map((t) => /* @__PURE__ */ s.jsx(
+      a,
       {
         component: "span",
         textTransform: "lowercase",
         onClick: () => {
-          h?.(i);
+          h?.(t);
         },
         children: /* @__PURE__ */ s.jsx(
           c,
           {
-            label: i.trim(),
+            label: t.trim(),
             sx: {
               mr: 1,
               mb: 1,
@@ -56,9 +56,9 @@ const v = ({
           }
         )
       },
-      i
+      t
     )),
-    r && x > 0 && /* @__PURE__ */ s.jsx(
+    o && x > 0 && /* @__PURE__ */ s.jsx(
       R,
       {
         slotProps: {
@@ -66,11 +66,11 @@ const v = ({
         },
         arrow: !0,
         placement: "top",
-        title: /* @__PURE__ */ s.jsx(p, { display: "flex", gap: 1, maxWidth: "240px", flexWrap: "wrap", children: y.map((i) => /* @__PURE__ */ s.jsx(c, { label: i.trim() }, i)) }),
-        children: /* @__PURE__ */ s.jsx(p, { component: "span", textTransform: "lowercase", children: /* @__PURE__ */ s.jsx(
+        title: /* @__PURE__ */ s.jsx(a, { display: "flex", gap: 1, maxWidth: "240px", flexWrap: "wrap", children: y.map((t) => /* @__PURE__ */ s.jsx(c, { label: t.trim() }, t)) }),
+        children: /* @__PURE__ */ s.jsx(a, { component: "span", textTransform: "lowercase", children: /* @__PURE__ */ s.jsx(
           c,
           {
-            label: `+${x} ${d}`,
+            label: `+${x} ${p}`,
             variant: "outlined",
             color: "info",
             sx: { mr: 1, mb: 1, userSelect: "none", cursor: "pointer" }

package/dist/s-code-block/s-code-block.js

@@ -2,7 +2,7 @@ import { j as o } from "../jsx-runtime-tc70JA_2.js";
 import { useState as g } from "react";
 import { useColorScheme as p, Box as k, IconButton as u } from "@mui/material";
 import { Prism as b } from "react-syntax-highlighter";
-import { C as m, a as f } from "../ContentCopy-CNxsEhmq.js";
+import { C as m, a as f } from "../ContentCopy-D4SuJd86.js";
 const w = {
   'code[class*="language-"]': {
     background: "hsl(220, 13%, 18%)",

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

@@ -3,10 +3,10 @@ import { useId as N, useState as v, useEffect as R } from "react";
 import { Box as i, Stack as n, Typography as a, IconButton as O, Button as k, Collapse as Q } from "@mui/material";
 import { SAvatar as U } from "../s-avatar/s-avatar.js";
 import { SSkeleton as e } from "../s-skeleton/s-skeleton.js";
-import { g as X } from "../utils-DJIrqgo5.js";
-import { F as Y } from "../Favorite-Cvjg7GqN.js";
-import { c as I } from "../createSvgIcon-DTNHY3_v.js";
-import { E as Z } from "../ExpandMore-CTZrSZlF.js";
+import { g as X } from "../utils-D1UMIV0b.js";
+import { F as Y } from "../Favorite-Bz_HcMgN.js";
+import { c as I } from "../createSvgIcon-BkbeLOhM.js";
+import { E as Z } from "../ExpandMore-C7yRQv1-.js";
 const _ = I(/* @__PURE__ */ t.jsx("path", {
   d: "m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
 }), "ExpandLess"), tt = I(/* @__PURE__ */ t.jsx("path", {
@@ -112,7 +112,7 @@ const _ = I(/* @__PURE__ */ t.jsx("path", {
         showReplies: d,
         avatarSize: Math.max(32, r - 8)
       },
-      s.id || `reply-${K}`
+      s.id ?? `reply-${K}`
     )) }) })
   ] });
 };

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

@@ -1,7 +1,7 @@
 import { j as o } from "../jsx-runtime-tc70JA_2.js";
 import { useState as l } from "react";
 import { Paper as p, Box as d, IconButton as x, Typography as m } from "@mui/material";
-import { C as u, a as h } from "../ContentCopy-CNxsEhmq.js";
+import { C as u, a as h } from "../ContentCopy-D4SuJd86.js";
 const f = ({ text: r, typographyProps: e, onCopied: a, paperProps: i }) => {
   const [t, s] = l(!1), n = async () => {
     if (r)

package/dist/s-countdown/s-count-box.js

@@ -1,23 +1,23 @@
 import { j as t } from "../jsx-runtime-tc70JA_2.js";
-import { Typography as r, Fade as H, Slide as v } from "@mui/material";
-import { SFlexBox as c } from "../s-flex-box/s-flex-box.js";
-const B = ({
-  digit: d = 0,
-  title: m = "",
-  size: x = "medium",
-  color: l = "inherit",
-  animation: o = "none",
+import { Typography as l, Fade as v, Slide as B } from "@mui/material";
+import { SFlexBox as d } from "../s-flex-box/s-flex-box.js";
+const C = ({
+  digit: m = 0,
+  title: x = "",
+  size: f = "medium",
+  color: o = "inherit",
+  animation: s = "none",
   sx: g,
-  digitSx: f,
-  titleSx: p,
-  showSeparator: h = !1,
-  separator: u = ":",
-  digitFormat: S = "default",
-  hidden: j = !1
+  digitSx: p,
+  titleSx: h,
+  showSeparator: u = !1,
+  separator: S = ":",
+  digitFormat: j = "default",
+  hidden: y = !1
 }) => {
-  if (j) return null;
-  const y = (a) => S === "padded" ? a.toString().padStart(2, "0") : a.toString(), e = (() => {
-    switch (x) {
+  if (y) return null;
+  const z = (c) => j === "padded" ? c.toString().padStart(2, "0") : c.toString(), e = (() => {
+    switch (f) {
       case "small":
         return {
           digit: { fontSize: "1.5rem", lineHeight: 1.2 },
@@ -34,22 +34,22 @@ const B = ({
           title: { fontSize: "0.875rem", letterSpacing: "0.08em" }
         };
     }
-  })(), i = y(d), n = /* @__PURE__ */ t.jsx(
-    r,
+  })(), i = z(m), n = /* @__PURE__ */ t.jsx(
+    l,
     {
       variant: "h3",
       component: "span",
       sx: {
         fontWeight: 700,
-        color: l === "inherit" ? "text.primary" : `${l}.main`,
+        color: o === "inherit" ? "text.primary" : `${o}.main`,
         width: "70px",
         ...e.digit,
-        ...f
+        ...p
       },
       children: i
     }
-  ), z = /* @__PURE__ */ t.jsx(
-    r,
+  ), H = /* @__PURE__ */ t.jsx(
+    l,
     {
       component: "span",
       sx: {
@@ -59,12 +59,15 @@ const B = ({
         display: "block",
         mt: 0.5,
         ...e.title,
-        ...p
+        ...h
       },
-      children: m
+      children: x
     }
-  ), s = /* @__PURE__ */ t.jsxs(
-    c,
+  );
+  let r = n;
+  s === "fade" ? r = /* @__PURE__ */ t.jsx(v, { in: !0, timeout: 300, children: /* @__PURE__ */ t.jsx("div", { children: n }) }, i) : s === "slide" && (r = /* @__PURE__ */ t.jsx(B, { in: !0, direction: "up", timeout: 300, children: /* @__PURE__ */ t.jsx("div", { children: n }) }, i));
+  const a = /* @__PURE__ */ t.jsxs(
+    d,
     {
       flexDirection: "column",
       alignItems: "center",
@@ -74,15 +77,15 @@ const B = ({
         ...g
       },
       children: [
-        o === "fade" ? /* @__PURE__ */ t.jsx(H, { in: !0, timeout: 300, children: /* @__PURE__ */ t.jsx("div", { children: n }) }, i) : o === "slide" ? /* @__PURE__ */ t.jsx(v, { in: !0, direction: "up", timeout: 300, children: /* @__PURE__ */ t.jsx("div", { children: n }) }, i) : n,
-        z
+        r,
+        H
       ]
     }
   );
-  return h ? /* @__PURE__ */ t.jsxs(c, { alignItems: "center", children: [
-    s,
+  return u ? /* @__PURE__ */ t.jsxs(d, { alignItems: "center", children: [
+    a,
     /* @__PURE__ */ t.jsx(
-      r,
+      l,
       {
         variant: "h3",
         sx: {
@@ -92,13 +95,13 @@ const B = ({
           alignSelf: "flex-start",
           mt: 0.5
         },
-        children: u
+        children: S
       }
     )
-  ] }) : s;
+  ] }) : a;
 };
-B.displayName = "SCountBox";
+C.displayName = "SCountBox";
 export {
-  B as SCountBox,
-  B as default
+  C as SCountBox,
+  C as default
 };

package/dist/s-countdown/s-count-down.d.ts

@@ -3,17 +3,22 @@ import { SxProps, Theme } from '@mui/material';
 /**
  * Props interface for SCountdown component
  */
+export type SCountDownSize = 'small' | 'medium' | 'large';
+export type SCountDownColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+export type SCountDownLayout = 'horizontal' | 'vertical' | 'grid';
+export type SCountDownAnimation = 'none' | 'fade' | 'slide';
+export type SCountDownDigitFormat = 'default' | 'padded';
 export interface SCountDownProps {
     /** Target date timestamp in milliseconds (from Date.getTime()) */
     expireDate: number;
     /** Size variant for all count boxes */
-    size?: 'small' | 'medium' | 'large';
+    size?: SCountDownSize;
     /** Color theme for the countdown */
-    color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+    color?: SCountDownColor;
     /** Layout orientation */
-    layout?: 'horizontal' | 'vertical' | 'grid';
+    layout?: SCountDownLayout;
     /** Animation type for value changes */
-    animation?: 'none' | 'fade' | 'slide';
+    animation?: SCountDownAnimation;
     /** Whether to show separators between units */
     showSeparators?: boolean;
     /** Custom separator element */
@@ -33,7 +38,7 @@ export interface SCountDownProps {
         seconds?: string;
     };
     /** Format for displaying digits */
-    digitFormat?: 'default' | 'padded';
+    digitFormat?: SCountDownDigitFormat;
     /** Callback fired when countdown reaches zero */
     onComplete?: () => void;
     /** Callback fired on each tick (every second) */
@@ -57,11 +62,11 @@ export interface SCountDownProps {
     paused?: boolean;
     /** Responsive breakpoints for size changes */
     responsive?: {
-        xs?: 'small' | 'medium' | 'large';
-        sm?: 'small' | 'medium' | 'large';
-        md?: 'small' | 'medium' | 'large';
-        lg?: 'small' | 'medium' | 'large';
-        xl?: 'small' | 'medium' | 'large';
+        xs?: SCountDownSize;
+        sm?: SCountDownSize;
+        md?: SCountDownSize;
+        lg?: SCountDownSize;
+        xl?: SCountDownSize;
     };
 }
 /**

package/dist/s-countdown/s-count-down.js

@@ -1,155 +1,110 @@
 import { j as l } from "../jsx-runtime-tc70JA_2.js";
-import { Typography as A } from "@mui/material";
-import L from "../hooks/use-count-down.js";
-import { SFlexBox as x } from "../s-flex-box/s-flex-box.js";
-import { SCountBox as N } from "./s-count-box.js";
-const R = ({
-  expireDate: S,
-  size: e = "medium",
-  color: i = "inherit",
-  layout: w = "horizontal",
-  animation: j = "none",
-  showSeparators: h = !1,
+import { useTheme as N, useMediaQuery as m, Typography as R } from "@mui/material";
+import W from "../hooks/use-count-down.js";
+import { SFlexBox as p } from "../s-flex-box/s-flex-box.js";
+import { SCountBox as F } from "./s-count-box.js";
+const H = ({
+  expireDate: x,
+  size: n = "medium",
+  color: u = "inherit",
+  layout: c = "horizontal",
+  animation: S = "none",
+  showSeparators: y = !1,
   separator: k = ":",
-  units: c = {
+  units: b = {
     days: !0,
     hours: !0,
     minutes: !0,
     seconds: !0
   },
-  labels: a = {
+  labels: r = {
     days: "DAYS",
     hours: "HOURS",
     minutes: "MINS",
     seconds: "SECS"
   },
-  digitFormat: C = "default",
-  onComplete: $,
-  onTick: v,
-  onStart: I,
-  completedText: n = "Time is up!",
-  autoHideZeroUnits: y = !1,
-  sx: f,
-  "aria-label": g = "Countdown timer",
-  paused: b = !1,
-  responsive: r
+  digitFormat: j = "default",
+  onComplete: C,
+  onTick: $,
+  onStart: w,
+  completedText: i = "Time is up!",
+  autoHideZeroUnits: v = !1,
+  sx: o,
+  "aria-label": f = "Countdown timer",
+  paused: I = !1,
+  responsive: s
 }) => {
-  const { timeLeft: t, isExpired: D } = L({
-    expireDate: S,
-    onComplete: $,
-    onTick: v,
-    onStart: I,
-    paused: b
-  });
-  if (D && n)
+  const { timeLeft: e, isExpired: A } = W({
+    expireDate: x,
+    onComplete: C,
+    onTick: $,
+    onStart: w,
+    paused: I
+  }), a = N(), D = m(a.breakpoints.only("xs")), U = m(a.breakpoints.only("sm")), B = m(a.breakpoints.only("md")), E = m(a.breakpoints.only("lg")), d = s ? D ? s.xs ?? n : U ? s.sm ?? n : B ? s.md ?? n : E ? s.lg ?? n : s.xl ?? n : n;
+  if (A && i)
     return /* @__PURE__ */ l.jsx(
-      x,
+      p,
       {
         justifyContent: "center",
         alignItems: "center",
-        sx: { textAlign: "center", ...f },
+        sx: { textAlign: "center", ...o },
         role: "timer",
-        "aria-label": `${g} - completed`,
-        children: typeof n == "string" ? /* @__PURE__ */ l.jsx(
-          A,
+        "aria-label": `${f} - completed`,
+        children: typeof i == "string" ? /* @__PURE__ */ l.jsx(
+          R,
           {
-            variant: e === "large" ? "h4" : e === "small" ? "h6" : "h5",
-            color: i === "inherit" ? "text.primary" : `${i}.main`,
+            variant: d === "large" ? "h4" : d === "small" ? "h6" : "h5",
+            color: u === "inherit" ? "text.primary" : `${u}.main`,
             sx: { fontWeight: 600 },
-            children: n
+            children: i
           }
-        ) : n
+        ) : i
       }
     );
-  const m = [], u = [
-    { key: "days", value: t.days, label: a.days },
-    { key: "hours", value: t.hours, label: a.hours },
-    { key: "minutes", value: t.minutes, label: a.minutes },
-    { key: "seconds", value: t.seconds, label: a.seconds }
-  ];
-  u.forEach((s, p) => {
-    if (c[s.key] && (!y || s.value > 0 || s.key === "seconds")) {
-      const B = p === u.length - 1, M = h && !B && u.slice(p + 1).some(
-        (d) => c[d.key] && (!y || d.value > 0 || d.key === "seconds")
-      );
-      m.push(
-        /* @__PURE__ */ l.jsx(
-          N,
-          {
-            digit: s.value,
-            title: s.label || "",
-            size: e,
-            color: i,
-            animation: j,
-            digitFormat: C,
-            showSeparator: M,
-            separator: k
-          },
-          s.key
-        )
-      );
-    }
-  });
-  const E = () => {
-    switch (w) {
-      case "vertical":
-        return {
-          flexDirection: "column",
-          gap: 2,
-          alignItems: "center"
-        };
-      case "grid":
-        return {
-          display: "grid",
-          gridTemplateColumns: `repeat(${m.length}, 1fr)`,
-          gap: 2,
-          justifyItems: "center"
-        };
-      default:
-        return {
-          flexDirection: "row",
-          gap: h ? 0 : 2,
-          alignItems: "center",
-          justifyContent: "center",
-          flexWrap: "wrap"
-        };
-    }
-  }, o = r ? {
-    xs: r.xs || e,
-    sm: r.sm || e,
-    md: r.md || e,
-    lg: r.lg || e,
-    xl: r.xl || e
-  } : void 0;
+  const h = [
+    { key: "days", value: e.days, label: r.days },
+    { key: "hours", value: e.hours, label: r.hours },
+    { key: "minutes", value: e.minutes, label: r.minutes },
+    { key: "seconds", value: e.seconds, label: r.seconds }
+  ].filter(
+    (t) => b[t.key] && (!v || t.value > 0 || t.key === "seconds")
+  ), g = h.map((t, L) => /* @__PURE__ */ l.jsx(
+    F,
+    {
+      digit: t.value,
+      title: t.label ?? "",
+      size: d,
+      color: u,
+      animation: S,
+      digitFormat: j,
+      showSeparator: y && L < h.length - 1,
+      separator: k
+    },
+    t.key
+  )), M = () => c === "vertical" ? { flexDirection: "column", gap: 2, alignItems: "center" } : c === "grid" ? {
+    display: "grid",
+    gridTemplateColumns: `repeat(${g.length}, 1fr)`,
+    gap: 2,
+    justifyItems: "center"
+  } : {
+    flexDirection: "row",
+    gap: y ? 0 : 2,
+    alignItems: "center",
+    justifyContent: "center",
+    flexWrap: "wrap"
+  };
   return /* @__PURE__ */ l.jsx(
-    x,
+    p,
     {
-      sx: {
-        width: "fit-content",
-        ...E(),
-        ...f,
-        ...o && {
-          // Apply responsive sizing if provided
-          "@media (max-width: 600px)": {
-            "& .MuiTypography-h3": {
-              fontSize: o.xs === "small" ? "1.5rem" : o.xs === "large" ? "3.5rem" : "2.5rem"
-            }
-          },
-          "@media (min-width: 600px) and (max-width: 960px)": {
-            "& .MuiTypography-h3": {
-              fontSize: o.sm === "small" ? "1.5rem" : o.sm === "large" ? "3.5rem" : "2.5rem"
-            }
-          }
-        }
-      },
+      sx: [{ width: "fit-content" }, M() ?? {}, ...Array.isArray(o) ? o : [o]],
       role: "timer",
-      "aria-label": `${g} - ${t.days} days, ${t.hours} hours, ${t.minutes} minutes, ${t.seconds} seconds remaining`,
-      children: m
+      "aria-label": `${f} - ${e.days} days, ${e.hours} hours, ${e.minutes} minutes, ${e.seconds} seconds remaining`,
+      children: g
     }
   );
 };
-R.displayName = "SCountdown";
+H.displayName = "SCountdown";
 export {
-  R as SCountdown,
-  R as default
+  H as SCountdown,
+  H as default
 };