@solostylist/ui-kit 1.0.174 → 1.0.176

package/dist/s-moving-border/s-moving-border.js

@@ -1,46 +1,39 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as m, useEffect as w } from "react";
-import { Box as a } from "@mui/material";
-import { useMotionValue as _, useAnimationFrame as j, useTransform as g, useMotionTemplate as S, motion as C } from "framer-motion";
-const N = 250, h = (n, o) => ({
+import { j as t } from "../jsx-runtime-tc70JA_2.js";
+import { useRef as u, useEffect as j } from "react";
+import { Box as o } from "@mui/material";
+import { useMotionValue as v, useAnimationFrame as y, useTransform as x, useMotionTemplate as w, motion as E } from "framer-motion";
+const L = 250, d = (e, n) => ({
   position: "absolute",
   left: "50%",
   top: "50%",
-  width: `${n}px`,
-  height: `${n}px`,
+  width: `${e}px`,
+  height: `${e}px`,
   transform: "translate(-50%, -50%)",
   opacity: 0.5,
-  background: `radial-gradient(${o} 40%, transparent 60%)`,
+  background: `radial-gradient(${n} 40%, transparent 60%)`,
   filter: "blur(12px)",
   // Creates the soft glow effect
   pointerEvents: "none"
   // Prevents interference with user interactions
 });
-function y({
-  children: n,
-  duration: o,
-  rx: u,
-  ry: d,
-  phase: c = 0
+function f({
+  children: e,
+  duration: n,
+  rx: h,
+  ry: a,
+  phase: l = 0
 }) {
-  const i = m(null), s = _(0);
-  j((l) => {
-    var r;
-    const t = (r = i.current) == null ? void 0 : r.getTotalLength();
-    if (t) {
-      const b = t / o;
-      s.set((l * b + t * c) % t);
+  const r = u(null), s = v(0);
+  y((i) => {
+    const c = r.current?.getTotalLength();
+    if (c) {
+      const b = c / n;
+      s.set((i * b + c * l) % c);
     }
   });
-  const p = g(s, (l) => {
-    var t, r;
-    return (r = (t = i.current) == null ? void 0 : t.getPointAtLength(l)) == null ? void 0 : r.x;
-  }), x = g(s, (l) => {
-    var t, r;
-    return (r = (t = i.current) == null ? void 0 : t.getPointAtLength(l)) == null ? void 0 : r.y;
-  }), v = S`translateX(${p}px) translateY(${x}px) translateX(-50%) translateY(-50%)`;
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
+  const p = x(s, (i) => r.current?.getPointAtLength(i)?.x), m = x(s, (i) => r.current?.getPointAtLength(i)?.y), g = w`translateX(${p}px) translateY(${m}px) translateX(-50%) translateY(-50%)`;
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -48,38 +41,38 @@ function y({
         width: "100%",
         height: "100%",
         style: { position: "absolute", inset: 0 },
-        children: /* @__PURE__ */ e.jsx("rect", { fill: "none", width: "100%", height: "100%", rx: u, ry: d, ref: i })
+        children: /* @__PURE__ */ t.jsx("rect", { fill: "none", width: "100%", height: "100%", rx: h, ry: a, ref: r })
       }
     ),
-    /* @__PURE__ */ e.jsx(
-      C.div,
+    /* @__PURE__ */ t.jsx(
+      E.div,
       {
         style: {
           position: "absolute",
           top: 0,
           left: 0,
           display: "inline-block",
-          transform: v
+          transform: g
         },
-        children: n
+        children: e
       }
     )
   ] });
 }
-const f = ({
-  className: n,
-  duration: o = 6e3,
-  children: u,
-  glowColor: d = "var(--s-palette-primary-main)",
-  glowSize: c = N,
-  ...i
+const M = ({
+  className: e,
+  duration: n = 6e3,
+  children: h,
+  glowColor: a = "var(--s-palette-primary-main)",
+  glowSize: l = L,
+  ...r
 }) => {
-  const s = m(null), p = m(null);
-  return w(() => () => {
+  const s = u(null), p = u(null);
+  return j(() => () => {
     p.current !== null && window.cancelAnimationFrame(p.current);
   }, []), // Main container with relative positioning for absolute children
-  /* @__PURE__ */ e.jsxs(
-    a,
+  /* @__PURE__ */ t.jsxs(
+    o,
     {
       position: "relative",
       overflow: "hidden",
@@ -89,15 +82,15 @@ const f = ({
       sx: {
         backgroundColor: "transparent"
       },
-      className: n,
-      ...i,
+      className: e,
+      ...r,
       children: [
-        /* @__PURE__ */ e.jsxs(a, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, children: [
-          /* @__PURE__ */ e.jsx(y, { duration: o, rx: "100%", ry: "100%", phase: 0, children: /* @__PURE__ */ e.jsx(a, { sx: h(c, d) }) }),
-          /* @__PURE__ */ e.jsx(y, { duration: o, rx: "100%", ry: "100%", phase: 0.5, children: /* @__PURE__ */ e.jsx(a, { sx: h(c, d) }) })
+        /* @__PURE__ */ t.jsxs(o, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, children: [
+          /* @__PURE__ */ t.jsx(f, { duration: n, rx: "100%", ry: "100%", phase: 0, children: /* @__PURE__ */ t.jsx(o, { sx: d(l, a) }) }),
+          /* @__PURE__ */ t.jsx(f, { duration: n, rx: "100%", ry: "100%", phase: 0.5, children: /* @__PURE__ */ t.jsx(o, { sx: d(l, a) }) })
         ] }),
-        /* @__PURE__ */ e.jsx(
-          a,
+        /* @__PURE__ */ t.jsx(
+          o,
           {
             sx: {
               position: "absolute",
@@ -108,8 +101,8 @@ const f = ({
               height: "100%",
               zIndex: 2
             },
-            children: /* @__PURE__ */ e.jsx(
-              a,
+            children: /* @__PURE__ */ t.jsx(
+              o,
               {
                 ref: s,
                 sx: {
@@ -129,21 +122,13 @@ const f = ({
             )
           }
         ),
-        u
+        h
       ]
     }
   );
 };
-f.displayName = "SMovingBorder";
-try {
-  f.displayName = "SMovingBorder", f.__docgenInfo = { description: "An animated border effect component that creates smooth moving light effects around the element perimeter.", displayName: "SMovingBorder", props: { duration: { defaultValue: { value: "6000" }, description: "Duration of one complete animation cycle in milliseconds (default: 6000)", name: "duration", required: !1, type: { name: "number" } }, className: { defaultValue: null, description: "Additional CSS class name for styling", name: "className", required: !1, type: { name: "string" } }, glowColor: { defaultValue: { value: "var(--s-palette-primary-main)" }, description: "Color of the glow effect (default: 'var(--s-palette-primary-main)')", name: "glowColor", required: !1, type: { name: "string" } }, glowSize: { defaultValue: { value: "250" }, description: "Size of the glow effect in pixels (default: 250)", name: "glowSize", required: !1, type: { name: "number" } }, children: { defaultValue: null, description: "Content to render inside the moving border container", name: "children", required: !0, type: { name: "ReactNode" } } } };
-} catch {
-}
-try {
-  smovingborder.displayName = "smovingborder", smovingborder.__docgenInfo = { description: "An animated border effect component that creates smooth moving light effects around the element perimeter.", displayName: "smovingborder", props: { duration: { defaultValue: { value: "6000" }, description: "Duration of one complete animation cycle in milliseconds (default: 6000)", name: "duration", required: !1, type: { name: "number" } }, className: { defaultValue: null, description: "Additional CSS class name for styling", name: "className", required: !1, type: { name: "string" } }, glowColor: { defaultValue: { value: "var(--s-palette-primary-main)" }, description: "Color of the glow effect (default: 'var(--s-palette-primary-main)')", name: "glowColor", required: !1, type: { name: "string" } }, glowSize: { defaultValue: { value: "250" }, description: "Size of the glow effect in pixels (default: 250)", name: "glowSize", required: !1, type: { name: "number" } }, children: { defaultValue: null, description: "Content to render inside the moving border container", name: "children", required: !0, type: { name: "ReactNode" } } } };
-} catch {
-}
+M.displayName = "SMovingBorder";
 export {
-  f as SMovingBorder,
-  f as default
+  M as SMovingBorder,
+  M as default
 };

package/dist/s-multi-select/s-multi-select.js

@@ -1,41 +1,41 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import * as r from "react";
-import { c as v } from "../createSvgIcon-DxwgGAVe.js";
-import { Stack as x, OutlinedInput as b } from "@mui/material";
-import { usePopover as _ } from "../hooks/use-popover.js";
-import { SChips as S } from "../s-chips/s-chips.js";
-import { M as g } from "../Menu-CWq-a1Wz.js";
-import { M as C } from "../MenuItem-DY_qFSPR.js";
-const V = v(/* @__PURE__ */ t.jsx("path", {
+import { j as t } from "../jsx-runtime-tc70JA_2.js";
+import * as s from "react";
+import { c as x } from "../createSvgIcon-BKymXuBG.js";
+import { Stack as j, OutlinedInput as M } from "@mui/material";
+import { usePopover as S } from "../hooks/use-popover.js";
+import { M as C } from "../Menu-DZYzE2Mg.js";
+import { M as R } from "../MenuItem-BXiIhfBS.js";
+import { SChips as b } from "../s-chips/s-chips.js";
+const v = x(/* @__PURE__ */ t.jsx("path", {
   d: "M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15z"
-}), "UnfoldMore"), u = ({
-  label: o,
+}), "UnfoldMore"), I = ({
+  label: p,
   onChange: a,
-  options: c,
-  value: i = [],
-  chipProps: m
+  options: i,
+  value: r = [],
+  chipProps: d
 }) => {
-  const l = _(), p = r.useRef(null), [d, f] = r.useState();
-  r.useEffect(() => {
-    p.current && f(p.current.offsetWidth);
-  }, [l.open]);
-  const h = r.useCallback(
+  const o = S(), c = s.useRef(null), [u, f] = s.useState();
+  s.useEffect(() => {
+    c.current && f(c.current.offsetWidth);
+  }, [o.open]);
+  const m = s.useCallback(
     (e, n) => {
-      let s = [...i];
-      n ? s.push(e) : s = s.filter((y) => y !== e), a == null || a(s);
+      let l = [...r];
+      n ? l.push(e) : l = l.filter((h) => h !== e), a?.(l);
     },
-    [a, i]
+    [a, r]
   );
-  return /* @__PURE__ */ t.jsxs(x, { direction: "column", gap: 1, children: [
+  return /* @__PURE__ */ t.jsxs(j, { direction: "column", gap: 1, children: [
     /* @__PURE__ */ t.jsx(
-      b,
+      M,
       {
-        endAdornment: /* @__PURE__ */ t.jsx(V, { fontSize: "small", sx: { color: "action.active", position: "absolute", right: "7px" } }),
-        onClick: l.handleOpen,
+        endAdornment: /* @__PURE__ */ t.jsx(v, { fontSize: "small", sx: { color: "action.active", position: "absolute", right: "7px" } }),
+        onClick: o.handleOpen,
         ref: (e) => {
-          l.anchorRef.current = e, p.current = e;
+          o.anchorRef.current = e, c.current = e;
         },
-        value: o,
+        value: p,
         sx: {
           input: {
             color: "text.secondary"
@@ -44,19 +44,19 @@ const V = v(/* @__PURE__ */ t.jsx("path", {
       }
     ),
     /* @__PURE__ */ t.jsx(
-      g,
+      C,
       {
-        anchorEl: l.anchorRef.current,
-        onClose: l.handleClose,
-        open: l.open,
-        slotProps: { paper: { sx: { width: d ? `${d}px` : void 0 } } },
-        children: c.map((e) => {
-          const n = i.includes(e.value);
+        anchorEl: o.anchorRef.current,
+        onClose: o.handleClose,
+        open: o.open,
+        slotProps: { paper: { sx: { width: u ? `${u}px` : void 0 } } },
+        children: i.map((e) => {
+          const n = r.includes(e.value);
           return /* @__PURE__ */ t.jsx(
-            C,
+            R,
             {
               onClick: () => {
-                h(e.value, !n);
+                m(e.value, !n);
               },
               selected: n,
               children: e.label
@@ -67,24 +67,16 @@ const V = v(/* @__PURE__ */ t.jsx("path", {
       }
     ),
     /* @__PURE__ */ t.jsx(
-      S,
+      b,
       {
-        chips: c.filter((e) => i.includes(e.value)).map((e) => e.label),
-        ...m
+        chips: i.filter((e) => r.includes(e.value)).map((e) => e.label),
+        ...d
       }
     )
   ] });
 };
-u.displayName = "SMultiSelect";
-try {
-  u.displayName = "SMultiSelect", u.__docgenInfo = { description: "A multi-selection dropdown component that displays selected items as chips.", displayName: "SMultiSelect", props: { label: { defaultValue: null, description: "Label text displayed in the input field", name: "label", required: !0, type: { name: "string" } }, onChange: { defaultValue: null, description: "Callback fired when the selection changes", name: "onChange", required: !1, type: { name: "((value: T[]) => void)" } }, options: { defaultValue: null, description: "Array of options with label and value pairs", name: "options", required: !0, type: { name: "readonly { label: string; value: T; }[]" } }, value: { defaultValue: { value: "[]" }, description: "Currently selected values", name: "value", required: !1, type: { name: "T[]" } }, chipProps: { defaultValue: null, description: "Additional props to pass to the chips component", name: "chipProps", required: !1, type: { name: 'Omit<SChipsProps, "chips">' } } } };
-} catch {
-}
-try {
-  smultiselect.displayName = "smultiselect", smultiselect.__docgenInfo = { description: "A multi-selection dropdown component that displays selected items as chips.", displayName: "smultiselect", props: { label: { defaultValue: null, description: "Label text displayed in the input field", name: "label", required: !0, type: { name: "string" } }, onChange: { defaultValue: null, description: "Callback fired when the selection changes", name: "onChange", required: !1, type: { name: "((value: T[]) => void)" } }, options: { defaultValue: null, description: "Array of options with label and value pairs", name: "options", required: !0, type: { name: "readonly { label: string; value: T; }[]" } }, value: { defaultValue: { value: "[]" }, description: "Currently selected values", name: "value", required: !1, type: { name: "T[]" } }, chipProps: { defaultValue: null, description: "Additional props to pass to the chips component", name: "chipProps", required: !1, type: { name: 'Omit<SChipsProps, "chips">' } } } };
-} catch {
-}
+I.displayName = "SMultiSelect";
 export {
-  u as SMultiSelect,
-  u as default
+  I as SMultiSelect,
+  I as default
 };

package/dist/s-no-ssr/s-no-ssr.js

@@ -1,24 +1,16 @@
-import { j as d } from "../jsx-runtime-OVHDjVDe.js";
-import * as n from "react";
-import { u as s } from "../useEnhancedEffect-CJGo-L3B.js";
-const t = (r) => {
-  const { children: i, defer: e = !1, fallback: o = null } = r, [l, a] = n.useState(!1);
-  return s(() => {
-    e || a(!0);
-  }, [e]), n.useEffect(() => {
-    e && a(!0);
-  }, [e]), /* @__PURE__ */ d.jsx(n.Fragment, { children: l ? i : o });
+import { j as n } from "../jsx-runtime-tc70JA_2.js";
+import * as t from "react";
+import { u } from "../useEnhancedEffect-CJGo-L3B.js";
+const c = (r) => {
+  const { children: a, defer: e = !1, fallback: o = null } = r, [f, s] = t.useState(!1);
+  return u(() => {
+    e || s(!0);
+  }, [e]), t.useEffect(() => {
+    e && s(!0);
+  }, [e]), /* @__PURE__ */ n.jsx(t.Fragment, { children: f ? a : o });
 };
-t.displayName = "SNoSsr";
-try {
-  t.displayName = "SNoSsr", t.__docgenInfo = { description: "Component that prevents server-side rendering of its children.", displayName: "SNoSsr", props: { children: { defaultValue: null, description: "Content to render only on the client side", name: "children", required: !1, type: { name: "ReactNode" } }, defer: { defaultValue: null, description: "Whether to defer rendering until after initial paint", name: "defer", required: !1, type: { name: "boolean" } }, fallback: { defaultValue: null, description: "Content to show during server-side rendering or while loading", name: "fallback", required: !1, type: { name: "ReactNode" } } } };
-} catch {
-}
-try {
-  snossr.displayName = "snossr", snossr.__docgenInfo = { description: "Component that prevents server-side rendering of its children.", displayName: "snossr", props: { children: { defaultValue: null, description: "Content to render only on the client side", name: "children", required: !1, type: { name: "ReactNode" } }, defer: { defaultValue: null, description: "Whether to defer rendering until after initial paint", name: "defer", required: !1, type: { name: "boolean" } }, fallback: { defaultValue: null, description: "Content to show during server-side rendering or while loading", name: "fallback", required: !1, type: { name: "ReactNode" } } } };
-} catch {
-}
+c.displayName = "SNoSsr";
 export {
-  t as SNoSsr,
-  t as default
+  c as SNoSsr,
+  c as default
 };

package/dist/s-overlay-scrollbar/s-overlay-scrollbar.js

@@ -1,8 +1,8 @@
-import { j as i } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as n } from "react";
+import { j as t } from "../jsx-runtime-tc70JA_2.js";
+import { forwardRef as p } from "react";
 import { styled as d } from "@mui/material";
-import { OverlayScrollbarsComponent as p } from "overlayscrollbars-react";
-import '../assets/s-overlay-scrollbar.css';const c = d(p)(({ theme: a }) => ({
+import { OverlayScrollbarsComponent as i } from "overlayscrollbars-react";
+import '../assets/s-overlay-scrollbar.css';const b = d(i)(({ theme: a }) => ({
   maxHeight: "100%",
   ".os-theme-dark": {
     "--os-size": "10px",
@@ -15,27 +15,23 @@ import '../assets/s-overlay-scrollbar.css';const c = d(p)(({ theme: a }) => ({
       "--os-handle-bg-active": (a.vars || a).palette.whiteAlpha.dark
     })
   }
-})), l = n(
-  ({ sx: a, children: r, className: e, id: o, ...s }, t) => /* @__PURE__ */ i.jsx(
-    c,
+})), v = p(
+  ({ sx: a, children: r, className: l, id: o, ...s }, e) => /* @__PURE__ */ t.jsx(
+    b,
     {
       id: o,
-      ref: t,
+      ref: e,
       defer: !0,
       sx: a,
-      className: e,
+      className: l,
       options: { scrollbars: { autoHide: "leave", autoHideDelay: 100 } },
       ...s,
       children: r
     }
   )
 );
-l.displayName = "SOverlayScrollbar";
-try {
-  l.displayName = "SOverlayScrollbar", l.__docgenInfo = { description: "A custom scrollbar component with overlay styling, auto-hide functionality, and smooth animations.", displayName: "SOverlayScrollbar", props: { id: { defaultValue: null, description: "Optional id for the scrollbar container", name: "id", required: !1, type: { name: "string" } }, className: { defaultValue: null, description: "Additional CSS class name", name: "className", required: !1, type: { name: "string" } }, sx: { defaultValue: null, description: "Material-UI sx prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
-} catch {
-}
+v.displayName = "SOverlayScrollbar";
 export {
-  l as SOverlayScrollbar,
-  l as default
+  v as SOverlayScrollbar,
+  v as default
 };

package/dist/s-pagination/s-pagination.js

@@ -1,20 +1,16 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { useTheme as l, useMediaQuery as d, Box as m, Pagination as p, Stack as u } from "@mui/material";
-import { SSkeleton as t } from "../s-skeleton/s-skeleton.js";
-const c = ({ style: n }) => /* @__PURE__ */ e.jsxs(u, { direction: "row", flexWrap: "wrap", gap: 1, justifyContent: "center", style: n, children: [
-  /* @__PURE__ */ e.jsx(t, { component: "icon-button" }),
-  /* @__PURE__ */ e.jsx(t, { variant: "rounded", width: 120 }),
-  /* @__PURE__ */ e.jsx(t, { component: "icon-button" })
-] }), a = ({ loading: n, count: o = 0, ...i }) => {
-  const r = l(), s = d(r.breakpoints.down("sm"));
-  return o === 0 ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : n ? /* @__PURE__ */ e.jsx(c, { style: i.style }) : /* @__PURE__ */ e.jsx(m, { width: "100%", children: /* @__PURE__ */ e.jsx(p, { size: s ? "small" : "medium", count: o, ...i }) });
+import { j as t } from "../jsx-runtime-tc70JA_2.js";
+import { useTheme as a, useMediaQuery as m, Box as u, Pagination as x, Stack as c } from "@mui/material";
+import { SSkeleton as n } from "../s-skeleton/s-skeleton.js";
+const d = ({ style: e }) => /* @__PURE__ */ t.jsxs(c, { direction: "row", flexWrap: "wrap", gap: 1, justifyContent: "center", style: e, children: [
+  /* @__PURE__ */ t.jsx(n, { component: "icon-button" }),
+  /* @__PURE__ */ t.jsx(n, { variant: "rounded", width: 120 }),
+  /* @__PURE__ */ t.jsx(n, { component: "icon-button" })
+] }), l = ({ loading: e, count: o = 0, ...i }) => {
+  const r = a(), s = m(r.breakpoints.down("sm"));
+  return o === 0 ? /* @__PURE__ */ t.jsx(t.Fragment, {}) : e ? /* @__PURE__ */ t.jsx(d, { style: i.style }) : /* @__PURE__ */ t.jsx(u, { width: "100%", children: /* @__PURE__ */ t.jsx(x, { size: s ? "small" : "medium", count: o, ...i }) });
 };
-a.displayName = "SPagination";
-try {
-  a.displayName = "SPagination", a.__docgenInfo = { description: "Enhanced pagination component with responsive sizing and loading states.", displayName: "SPagination", props: { loading: { defaultValue: null, description: "Whether the pagination is in a loading state - shows skeleton when true", name: "loading", required: !1, type: { name: "boolean" } }, count: { defaultValue: { value: "0" }, description: "Total number of pages - component returns empty fragment when 0", name: "count", required: !1, type: { name: "number" } } } };
-} catch {
-}
+l.displayName = "SPagination";
 export {
-  a as SPagination,
-  a as default
+  l as SPagination,
+  l as default
 };

package/dist/s-pixel-reveal/package.json

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