@solostylist/ui-kit 1.0.167 → 1.0.168

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

@@ -1,13 +1,13 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as x, useEffect as w } from "react";
-import { Box as i } from "@mui/material";
-import { useMotionValue as v, useAnimationFrame as y, useTransform as f, useMotionTemplate as L, motion as R } from "framer-motion";
-const E = 250, A = "#38bdf8", d = (o, r) => ({
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { useRef as f, 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, V = "#38bdf8", h = (n, r) => ({
   position: "absolute",
   left: "50%",
   top: "50%",
-  width: `${o}px`,
-  height: `${o}px`,
+  width: `${n}px`,
+  height: `${n}px`,
   transform: "translate(-50%, -50%)",
   opacity: 0.5,
   background: `radial-gradient(${r} 40%, transparent 60%)`,
@@ -16,31 +16,31 @@ const E = 250, A = "#38bdf8", d = (o, r) => ({
   pointerEvents: "none"
   // Prevents interference with user interactions
 });
-function m({
-  children: o,
+function x({
+  children: n,
   duration: r,
-  rx: u,
-  ry: p,
+  rx: p,
+  ry: d,
   phase: c = 0
 }) {
-  const s = x(null), a = v(0);
-  y((l) => {
-    var n;
-    const e = (n = s.current) == null ? void 0 : n.getTotalLength();
-    if (e) {
-      const j = e / r;
-      a.set((l * j + e * c) % e);
+  const i = f(null), s = _(0);
+  j((l) => {
+    var o;
+    const t = (o = i.current) == null ? void 0 : o.getTotalLength();
+    if (t) {
+      const v = t / r;
+      s.set((l * v + t * c) % t);
     }
   });
-  const h = f(a, (l) => {
-    var e, n;
-    return (n = (e = s.current) == null ? void 0 : e.getPointAtLength(l)) == null ? void 0 : n.x;
-  }), g = f(a, (l) => {
-    var e, n;
-    return (n = (e = s.current) == null ? void 0 : e.getPointAtLength(l)) == null ? void 0 : n.y;
-  }), b = L`translateX(${h}px) translateY(${g}px) translateX(-50%) translateY(-50%)`;
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(
+  const u = g(s, (l) => {
+    var t, o;
+    return (o = (t = i.current) == null ? void 0 : t.getPointAtLength(l)) == null ? void 0 : o.x;
+  }), b = g(s, (l) => {
+    var t, o;
+    return (o = (t = i.current) == null ? void 0 : t.getPointAtLength(l)) == null ? void 0 : o.y;
+  }), y = S`translateX(${u}px) translateY(${b}px) translateX(-50%) translateY(-50%)`;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -48,38 +48,38 @@ function m({
         width: "100%",
         height: "100%",
         style: { position: "absolute", inset: 0 },
-        children: /* @__PURE__ */ t.jsx("rect", { fill: "none", width: "100%", height: "100%", rx: u, ry: p, ref: s })
+        children: /* @__PURE__ */ e.jsx("rect", { fill: "none", width: "100%", height: "100%", rx: p, ry: d, ref: i })
       }
     ),
-    /* @__PURE__ */ t.jsx(
-      R.div,
+    /* @__PURE__ */ e.jsx(
+      C.div,
       {
         style: {
           position: "absolute",
           top: 0,
           left: 0,
           display: "inline-block",
-          transform: b
+          transform: y
         },
-        children: o
+        children: n
       }
     )
   ] });
 }
-function k({
-  className: o,
+const m = ({
+  className: n,
   duration: r = 6e3,
-  children: u,
-  glowColor: p = A,
-  glowSize: c = E,
-  ...s
-}) {
-  const a = x(null), h = x(null);
+  children: p,
+  glowColor: d = V,
+  glowSize: c = N,
+  ...i
+}) => {
+  const s = f(null), u = f(null);
   return w(() => () => {
-    h.current !== null && window.cancelAnimationFrame(h.current);
+    u.current !== null && window.cancelAnimationFrame(u.current);
   }, []), // Main container with relative positioning for absolute children
-  /* @__PURE__ */ t.jsxs(
-    i,
+  /* @__PURE__ */ e.jsxs(
+    a,
     {
       position: "relative",
       overflow: "hidden",
@@ -89,15 +89,15 @@ function k({
       sx: {
         backgroundColor: "transparent"
       },
-      className: o,
-      ...s,
+      className: n,
+      ...i,
       children: [
-        /* @__PURE__ */ t.jsxs(i, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, children: [
-          /* @__PURE__ */ t.jsx(m, { duration: r, rx: "100%", ry: "100%", phase: 0, children: /* @__PURE__ */ t.jsx(i, { sx: d(c, p) }) }),
-          /* @__PURE__ */ t.jsx(m, { duration: r, rx: "100%", ry: "100%", phase: 0.5, children: /* @__PURE__ */ t.jsx(i, { sx: d(c, p) }) })
+        /* @__PURE__ */ e.jsxs(a, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, children: [
+          /* @__PURE__ */ e.jsx(x, { duration: r, rx: "100%", ry: "100%", phase: 0, children: /* @__PURE__ */ e.jsx(a, { sx: h(c, d) }) }),
+          /* @__PURE__ */ e.jsx(x, { duration: r, rx: "100%", ry: "100%", phase: 0.5, children: /* @__PURE__ */ e.jsx(a, { sx: h(c, d) }) })
         ] }),
-        /* @__PURE__ */ t.jsx(
-          i,
+        /* @__PURE__ */ e.jsx(
+          a,
           {
             sx: {
               position: "absolute",
@@ -108,10 +108,10 @@ function k({
               height: "100%",
               zIndex: 2
             },
-            children: /* @__PURE__ */ t.jsx(
-              i,
+            children: /* @__PURE__ */ e.jsx(
+              a,
               {
-                ref: a,
+                ref: s,
                 sx: {
                   position: "absolute",
                   left: "50%",
@@ -129,11 +129,21 @@ function k({
             )
           }
         ),
-        u
+        p
       ]
     }
   );
+};
+m.displayName = "SMovingBorder";
+try {
+  m.displayName = "SMovingBorder", m.__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: "#38bdf8" }, description: "Color of the glow effect (default: '#38bdf8')", 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: "#38bdf8" }, description: "Color of the glow effect (default: '#38bdf8')", 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 {
 }
 export {
-  k as default
+  m as SMovingBorder,
+  m as default
 };

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

@@ -1,4 +1,4 @@
-import { default as o } from "./s-multi-select.js";
+import { SMultiSelect as l } from "./s-multi-select.js";
 export {
-  o as default
+  l as default
 };

package/dist/s-multi-select/s-multi-select.d.ts

@@ -19,19 +19,9 @@ export interface SMultiSelectProps<T = string> {
     /** Additional props to pass to the chips component */
     chipProps?: Omit<SChipsProps, 'chips'>;
 }
-/**
- * SMultiSelect - A multi-selection dropdown component that displays selected items as chips.
- *
- * Key features:
- * - Generic typing for different value types (string, number, boolean)
- * - Popover-based dropdown menu for option selection
- * - Selected values displayed as removable chips below the input
- * - Dynamic menu width matching the input field
- * - Toggle selection behavior (click to select/deselect)
- * - Integration with SChips component for consistent chip styling
- *
- * @param props - SMultiSelectProps with options, values, and configuration
- * @returns JSX.Element - Multi-select input with chip display
- */
-declare function SMultiSelect<T = string>({ label, onChange, options, value, chipProps, }: SMultiSelectProps<T>): React.JSX.Element;
+/** A multi-selection dropdown component that displays selected items as chips. */
+export declare const SMultiSelect: {
+    <T = string>({ label, onChange, options, value, chipProps, }: SMultiSelectProps<T>): React.JSX.Element;
+    displayName: string;
+};
 export default SMultiSelect;

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

@@ -1,42 +1,41 @@
 import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import * as c from "react";
-import { c as h } from "../createSvgIcon-DxwgGAVe.js";
-import { Stack as j, OutlinedInput as M } from "@mui/material";
-import { usePopover as S } from "../hooks/use-popover.js";
-import R from "../s-chips/s-chips.js";
-import { M as b } from "../Menu-CWq-a1Wz.js";
-import { M as v } from "../MenuItem-DY_qFSPR.js";
-const I = h(/* @__PURE__ */ t.jsx("path", {
+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", {
   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");
-function P({
-  label: p,
-  onChange: o,
-  options: u,
-  value: l = [],
-  chipProps: f
-}) {
-  const r = S(), i = c.useRef(null), [a, d] = c.useState();
-  c.useEffect(() => {
-    i.current && d(i.current.offsetWidth);
-  }, [r.open]);
-  const m = c.useCallback(
-    (e, s) => {
-      let n = [...l];
-      s ? n.push(e) : n = n.filter((x) => x !== e), o == null || o(n);
+}), "UnfoldMore"), u = ({
+  label: o,
+  onChange: a,
+  options: c,
+  value: i = [],
+  chipProps: m
+}) => {
+  const l = _(), p = r.useRef(null), [d, f] = r.useState();
+  r.useEffect(() => {
+    p.current && f(p.current.offsetWidth);
+  }, [l.open]);
+  const h = r.useCallback(
+    (e, n) => {
+      let s = [...i];
+      n ? s.push(e) : s = s.filter((y) => y !== e), a == null || a(s);
     },
-    [o, l]
+    [a, i]
   );
-  return /* @__PURE__ */ t.jsxs(j, { direction: "column", gap: 1, children: [
+  return /* @__PURE__ */ t.jsxs(x, { direction: "column", gap: 1, children: [
     /* @__PURE__ */ t.jsx(
-      M,
+      b,
       {
-        endAdornment: /* @__PURE__ */ t.jsx(I, { fontSize: "small", sx: { color: "action.active", position: "absolute", right: "7px" } }),
-        onClick: r.handleOpen,
+        endAdornment: /* @__PURE__ */ t.jsx(V, { fontSize: "small", sx: { color: "action.active", position: "absolute", right: "7px" } }),
+        onClick: l.handleOpen,
         ref: (e) => {
-          r.anchorRef.current = e, i.current = e;
+          l.anchorRef.current = e, p.current = e;
         },
-        value: p,
+        value: o,
         sx: {
           input: {
             color: "text.secondary"
@@ -45,21 +44,21 @@ function P({
       }
     ),
     /* @__PURE__ */ t.jsx(
-      b,
+      g,
       {
-        anchorEl: r.anchorRef.current,
-        onClose: r.handleClose,
-        open: r.open,
-        slotProps: { paper: { sx: { width: a ? `${a}px` : void 0 } } },
-        children: u.map((e) => {
-          const s = l.includes(e.value);
+        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);
           return /* @__PURE__ */ t.jsx(
-            v,
+            C,
             {
               onClick: () => {
-                m(e.value, !s);
+                h(e.value, !n);
               },
-              selected: s,
+              selected: n,
               children: e.label
             },
             e.label
@@ -68,14 +67,24 @@ function P({
       }
     ),
     /* @__PURE__ */ t.jsx(
-      R,
+      S,
       {
-        chips: u.filter((e) => l.includes(e.value)).map((e) => e.label),
-        ...f
+        chips: c.filter((e) => i.includes(e.value)).map((e) => e.label),
+        ...m
       }
     )
   ] });
+};
+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 {
 }
 export {
-  P as default
+  u as SMultiSelect,
+  u as default
 };

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

@@ -1,4 +1,4 @@
-import { default as o } from "./s-no-ssr.js";
+import { SNoSsr as a } from "./s-no-ssr.js";
 export {
-  o as default
+  a as default
 };

package/dist/s-no-ssr/s-no-ssr.d.ts

@@ -10,37 +10,9 @@ export interface SNoSsrProps {
     /** Content to show during server-side rendering or while loading */
     fallback?: React.ReactNode;
 }
-/**
- * Component that prevents server-side rendering of its children
- *
- * Based on Material-UI's NoSSR component but without prop-types dependency.
- * Useful for components that:
- * - Depend on browser-only APIs (localStorage, document, window)
- * - Have different server vs client rendering (e.g., dynamic content)
- * - Need to avoid hydration mismatches
- * - Require client-side only libraries
- *
- * The component uses Material-UI's enhanced effect hook to ensure proper
- * timing with React's concurrent features and server-side rendering.
- *
- * @param children - Content that should only render on client side
- * @param defer - If true, delays rendering until after initial paint (default: false)
- * @param fallback - Content to show during SSR and initial client load (default: null)
- * @returns JSX fragment containing either fallback or children based on mount state
- *
- * @example
- * ```tsx
- * <SNoSSR fallback={<div>Loading...</div>}>
- *   <ComponentThatUsesLocalStorage />
- * </SNoSSR>
- *
- * // With defer for performance
- * <SNoSSR defer fallback={<Skeleton />}>
- *   <ExpensiveClientOnlyComponent />
- * </SNoSSR>
- * ```
- *
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-base/src/NoSsr/NoSsr.tsx
- */
-declare const SNoSsr: (props: SNoSsrProps) => React.JSX.Element;
+/** Component that prevents server-side rendering of its children. */
+export declare const SNoSsr: {
+    (props: SNoSsrProps): React.JSX.Element;
+    displayName: string;
+};
 export default SNoSsr;

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

@@ -1,14 +1,24 @@
-import { j as n } from "../jsx-runtime-OVHDjVDe.js";
-import * as t from "react";
-import { u } from "../useEnhancedEffect-CJGo-L3B.js";
-const m = (s) => {
-  const { children: a, defer: e = !1, fallback: f = null } = s, [o, r] = t.useState(!1);
-  return u(() => {
-    e || r(!0);
-  }, [e]), t.useEffect(() => {
-    e && r(!0);
-  }, [e]), /* @__PURE__ */ n.jsx(t.Fragment, { children: o ? a : f });
+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 });
 };
+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 {
+}
 export {
-  m as default
+  t as SNoSsr,
+  t as default
 };

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

@@ -1,4 +1,4 @@
-import { default as o } from "./s-overlay-scrollbar.js";
+import { SOverlayScrollbar as l } from "./s-overlay-scrollbar.js";
 export {
-  o as default
+  l as default
 };

package/dist/s-overlay-scrollbar/s-overlay-scrollbar.d.ts

@@ -1,9 +1,18 @@
 import { PropsWithChildren } from 'react';
 import { SxProps, Theme } from '@mui/material';
+/**
+ * Props interface for SOverlayScrollbar component
+ */
 export interface SOverlayScrollbarProps extends PropsWithChildren {
+    /** Optional id for the scrollbar container */
     id?: string;
+    /** Additional CSS class name */
     className?: string;
+    /** Material-UI sx prop for custom styling */
     sx?: SxProps<Theme>;
 }
-declare const SOverlayScrollbar: import('react').ForwardRefExoticComponent<SOverlayScrollbarProps & import('react').RefAttributes<import('overlayscrollbars-react').OverlayScrollbarsComponentRef<import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>>>;
+/**
+ * A custom scrollbar component with overlay styling, auto-hide functionality, and smooth animations.
+ */
+export declare const SOverlayScrollbar: import('react').ForwardRefExoticComponent<SOverlayScrollbarProps & import('react').RefAttributes<import('overlayscrollbars-react').OverlayScrollbarsComponentRef<import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>>>>;
 export default SOverlayScrollbar;

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

@@ -1,8 +1,8 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as p } from "react";
+import { j as i } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as n } from "react";
 import { styled as d } from "@mui/material";
-import { OverlayScrollbarsComponent as i } from "overlayscrollbars-react";
-import '../assets/s-overlay-scrollbar.css';const b = d(i)(({ theme: a }) => ({
+import { OverlayScrollbarsComponent as p } from "overlayscrollbars-react";
+import '../assets/s-overlay-scrollbar.css';const c = d(p)(({ theme: a }) => ({
   maxHeight: "100%",
   ".os-theme-dark": {
     "--os-size": "10px",
@@ -15,22 +15,27 @@ import '../assets/s-overlay-scrollbar.css';const b = d(i)(({ theme: a }) => ({
       "--os-handle-bg-active": (a.vars || a).palette.whiteAlpha.dark
     })
   }
-})), v = p(
-  ({ sx: a, children: r, className: l, id: o, ...s }, e) => /* @__PURE__ */ t.jsx(
-    b,
+})), l = n(
+  ({ sx: a, children: r, className: e, id: o, ...s }, t) => /* @__PURE__ */ i.jsx(
+    c,
     {
       id: o,
-      ref: e,
+      ref: t,
       defer: !0,
       sx: a,
-      className: l,
+      className: e,
       options: { scrollbars: { autoHide: "leave", autoHideDelay: 100 } },
       ...s,
       children: r
     }
   )
 );
-v.displayName = "SOverlayScrollbar";
+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 {
+}
 export {
-  v as default
+  l as SOverlayScrollbar,
+  l as default
 };

package/dist/s-pagination/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-pagination.js";
+import { SPagination as t } from "./s-pagination.js";
 export {
-  o as default
+  t as default
 };

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

@@ -10,28 +10,10 @@ export interface SPaginationProps extends PaginationProps {
     count?: number;
 }
 /**
- * Enhanced pagination component with responsive sizing and loading states
- *
- * Features:
- * - Responsive sizing (small on mobile, medium on larger screens)
- * - Loading skeleton state
- * - Conditional rendering (hidden when count is 0)
- * - Full-width container layout
- *
- * @param loading - When true, displays loading skeleton instead of pagination
- * @param count - Total number of pages (defaults to 0, hides component when 0)
- * @param props - All other Material-UI Pagination props
- * @returns JSX element containing responsive pagination or loading skeleton
- *
- * @example
- * ```tsx
- * <SPagination
- *   count={totalPages}
- *   page={currentPage}
- *   onChange={handlePageChange}
- *   loading={isLoading}
- * />
- * ```
+ * Enhanced pagination component with responsive sizing and loading states.
  */
-declare const SPagination: ({ loading, count, ...props }: SPaginationProps) => React.JSX.Element;
+export declare const SPagination: {
+    ({ loading, count, ...props }: SPaginationProps): React.JSX.Element;
+    displayName: string;
+};
 export default SPagination;

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

@@ -1,14 +1,20 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { useTheme as a, useMediaQuery as m, Box as u, Pagination as x, Stack as c } from "@mui/material";
-import 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" })
-] }), f = ({ 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 }) });
+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 }) });
 };
+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 {
+}
 export {
-  f as default
+  a as SPagination,
+  a as default
 };

package/dist/s-pixel-reveal/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-pixel-reveal.js";
+import { SPixelReveal as l } from "./s-pixel-reveal.js";
 export {
-  o as default
+  l as default
 };

package/dist/s-pixel-reveal/s-pixel-reveal.d.ts

@@ -1,13 +1,27 @@
 import { default as React } from 'react';
+/**
+ * Props interface for SPixelReveal component
+ */
 export interface SPixelRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Spacing between pixels in the grid */
     gap?: number;
+    /** Animation speed multiplier (0-100) */
     speed?: number;
+    /** Array of color values randomly assigned to pixels */
     colors?: string[];
+    /** Controls pixel animation state */
     loading?: boolean;
+    /** Image source URL to display beneath the pixel effect overlay */
     src?: string;
+    /** Alt text for the background image */
     alt?: string;
+    /** Content to render as overlay on top of the pixel canvas effect */
     children?: React.ReactNode;
+    /** If true, all pixels appear immediately without wave/delay effect */
     instant?: boolean;
 }
-declare const SPixelReveal: React.ForwardRefExoticComponent<SPixelRevealProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * An animated pixel effect component that creates a dynamic canvas overlay with customizable pixel animations.
+ */
+export declare const SPixelReveal: React.ForwardRefExoticComponent<SPixelRevealProps & React.RefAttributes<HTMLDivElement>>;
 export default SPixelReveal;