@solostylist/ui-kit 1.0.167 → 1.0.169

package/dist/s-review/s-review.js

@@ -1,93 +1,94 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as j, useEffect as G } from "react";
-import { Box as h, Stack as a, Divider as D, Typography as x, IconButton as H } from "@mui/material";
-import J from "../s-avatar/s-avatar.js";
-import K from "../s-image-modal/s-image-modal.js";
-import P from "../s-lazy-image/s-lazy-image.js";
-import Q from "../s-rating/s-rating.js";
-import r from "../s-skeleton/s-skeleton.js";
-import { c as L } from "../createSvgIcon-DxwgGAVe.js";
-const X = L(/* @__PURE__ */ e.jsx("path", {
+import { useState as v, useEffect as P } from "react";
+import { Box as d, Stack as s, Divider as T, Typography as c, IconButton as H } from "@mui/material";
+import { SAvatar as G } from "../s-avatar/s-avatar.js";
+import { SImageModal as J } from "../s-image-modal/s-image-modal.js";
+import "../s-lazy-image/index.js";
+import { SRating as K } from "../s-rating/s-rating.js";
+import { SSkeleton as l } from "../s-skeleton/s-skeleton.js";
+import Q from "../s-lazy-image/s-lazy-image.js";
+import { c as N } from "../createSvgIcon-DxwgGAVe.js";
+const X = N(/* @__PURE__ */ e.jsx("path", {
   d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2m4 0v12h4V3z"
-}), "ThumbDown"), Z = L(/* @__PURE__ */ e.jsx("path", {
+}), "ThumbDown"), Z = N(/* @__PURE__ */ e.jsx("path", {
   d: "M1 21h4V9H1zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73z"
-}), "ThumbUp"), _ = (l) => {
-  const m = /* @__PURE__ */ new Date(), v = typeof l == "string" ? new Date(l) : l, y = m.getTime() - v.getTime(), w = Math.floor(y / 1e3), c = Math.floor(w / 60), s = Math.floor(c / 60), i = Math.floor(s / 24), d = Math.floor(i / 7), f = Math.floor(i / 30), g = Math.floor(i / 365);
-  return w < 60 ? "just now" : c < 60 ? c === 1 ? "1 minute ago" : `${c} minutes ago` : s < 24 ? s === 1 ? "1 hour ago" : `${s} hours ago` : i < 7 ? i === 1 ? "1 day ago" : `${i} days ago` : d < 4 ? d === 1 ? "1 week ago" : `${d} weeks ago` : f < 12 ? f === 1 ? "1 month ago" : `${f} months ago` : g === 1 ? "1 year ago" : `${g} years ago`;
-}, ce = ({
-  id: l = Date.now(),
+}), "ThumbUp"), ee = (o) => {
+  const m = /* @__PURE__ */ new Date(), w = typeof o == "string" ? new Date(o) : o, j = m.getTime() - w.getTime(), y = Math.floor(j / 1e3), u = Math.floor(y / 60), r = Math.floor(u / 60), i = Math.floor(r / 24), f = Math.floor(i / 7), h = Math.floor(i / 30), p = Math.floor(i / 365);
+  return y < 60 ? "just now" : u < 60 ? u === 1 ? "1 minute ago" : `${u} minutes ago` : r < 24 ? r === 1 ? "1 hour ago" : `${r} hours ago` : i < 7 ? i === 1 ? "1 day ago" : `${i} days ago` : f < 4 ? f === 1 ? "1 week ago" : `${f} weeks ago` : h < 12 ? h === 1 ? "1 month ago" : `${h} months ago` : p === 1 ? "1 year ago" : `${p} years ago`;
+}, q = ({
+  id: o = Date.now(),
   userName: m,
-  userAvatar: v,
-  rating: y,
-  reviewContent: w,
-  datetime: c,
-  images: s,
+  userAvatar: w,
+  rating: j,
+  reviewContent: y,
+  datetime: u,
+  images: r,
   userHelpfulVote: i = null,
-  helpfulYes: d = 0,
-  helpfulNo: f = 0,
-  onHelpfulVote: g,
-  showHelpfulSection: R = !0,
-  avatarSize: I = 48,
-  maxRating: V = 5,
-  readOnly: W = !0,
-  showDivider: S = !0,
-  loading: E = !1,
-  sx: T = {}
+  helpfulYes: f = 0,
+  helpfulNo: h = 0,
+  onHelpfulVote: p,
+  showHelpfulSection: $ = !0,
+  avatarSize: b = 48,
+  maxRating: z = 5,
+  readOnly: L = !0,
+  showDivider: C = !0,
+  loading: W = !1,
+  sx: k = {}
 }) => {
-  const [O, M] = j(d), [U, b] = j(f), [p, k] = j(i), [Y, $] = j(!1), [B, C] = j(null), z = (n) => {
-    let o = n;
-    p === n ? (n === "yes" ? M((t) => Math.max(0, t - 1)) : b((t) => Math.max(0, t - 1)), k(null), o = null) : (p === "yes" ? M((t) => Math.max(0, t - 1)) : p === "no" && b((t) => Math.max(0, t - 1)), n === "yes" ? M((t) => t + 1) : b((t) => t + 1), k(n), o = n), g && g(l, o);
-  }, u = (s == null ? void 0 : s.map((n, o) => ({
-    id: `review-${l}-image-${o}`,
+  const [_, I] = v(f), [U, V] = v(h), [x, M] = v(i), [Y, D] = v(!1), [A, S] = v(null), R = (a) => {
+    let n = a;
+    x === a ? (a === "yes" ? I((t) => Math.max(0, t - 1)) : V((t) => Math.max(0, t - 1)), M(null), n = null) : (x === "yes" ? I((t) => Math.max(0, t - 1)) : x === "no" && V((t) => Math.max(0, t - 1)), a === "yes" ? I((t) => t + 1) : V((t) => t + 1), M(a), n = a), p && p(o, n);
+  }, g = (r == null ? void 0 : r.map((a, n) => ({
+    id: `review-${o}-image-${n}`,
     type: "image",
-    url: n,
-    title: `Review image ${o + 1}`,
-    desc: `Image ${o + 1} from ${m}'s review`
-  }))) || [], A = (n) => {
-    const o = u[n];
-    o && (C(o), $(!0));
-  }, F = () => {
-    $(!1), C(null);
-  }, N = (n) => {
-    C(n);
-  }, q = _(c);
-  return G(() => {
-    k(i);
-  }, [i]), E ? /* @__PURE__ */ e.jsxs(h, { sx: { py: 2, ...T }, children: [
-    /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
-      /* @__PURE__ */ e.jsx(r, { component: "rounded-avatar", width: I, height: I }),
-      /* @__PURE__ */ e.jsxs(h, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(a, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 120, height: 20 }),
-          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 80, height: 16 })
+    url: a,
+    title: `Review image ${n + 1}`,
+    desc: `Image ${n + 1} from ${m}'s review`
+  }))) || [], O = (a) => {
+    const n = g[a];
+    n && (S(n), D(!0));
+  }, E = () => {
+    D(!1), S(null);
+  }, B = (a) => {
+    S(a);
+  }, F = ee(u);
+  return P(() => {
+    M(i);
+  }, [i]), W ? /* @__PURE__ */ e.jsxs(d, { sx: { py: 2, ...k }, children: [
+    /* @__PURE__ */ e.jsxs(s, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ e.jsx(l, { component: "rounded-avatar", width: b, height: b }),
+      /* @__PURE__ */ e.jsxs(d, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(s, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+          /* @__PURE__ */ e.jsx(l, { variant: "text", width: 120, height: 20 }),
+          /* @__PURE__ */ e.jsx(l, { variant: "text", width: 80, height: 16 })
         ] }),
-        /* @__PURE__ */ e.jsx(h, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(r, { variant: "text", width: 100, height: 20 }) }),
-        /* @__PURE__ */ e.jsx(r, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
-        /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 140, height: 16, sx: { mr: 2 } }),
-          /* @__PURE__ */ e.jsx(r, { component: "icon-button" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 20, height: 16 }),
-          /* @__PURE__ */ e.jsx(r, { component: "icon-button" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 20, height: 16 })
+        /* @__PURE__ */ e.jsx(d, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(l, { variant: "text", width: 100, height: 20 }) }),
+        /* @__PURE__ */ e.jsx(l, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
+        /* @__PURE__ */ e.jsxs(s, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ e.jsx(l, { variant: "text", width: 140, height: 16, sx: { mr: 2 } }),
+          /* @__PURE__ */ e.jsx(l, { component: "icon-button" }),
+          /* @__PURE__ */ e.jsx(l, { variant: "text", width: 20, height: 16 }),
+          /* @__PURE__ */ e.jsx(l, { component: "icon-button" }),
+          /* @__PURE__ */ e.jsx(l, { variant: "text", width: 20, height: 16 })
         ] })
       ] })
     ] }),
-    S && /* @__PURE__ */ e.jsx(D, { sx: { mt: 2 } })
-  ] }) : /* @__PURE__ */ e.jsxs(h, { sx: { py: 2, ...T }, children: [
-    /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
-      /* @__PURE__ */ e.jsx(J, { avatar: v, name: m, size: I }),
-      /* @__PURE__ */ e.jsxs(h, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(a, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
-          /* @__PURE__ */ e.jsx(x, { variant: "subtitle2", fontWeight: "600", children: m }),
-          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: q }) })
+    C && /* @__PURE__ */ e.jsx(T, { sx: { mt: 2 } })
+  ] }) : /* @__PURE__ */ e.jsxs(d, { sx: { py: 2, ...k }, children: [
+    /* @__PURE__ */ e.jsxs(s, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ e.jsx(G, { avatar: w, name: m, size: b }),
+      /* @__PURE__ */ e.jsxs(d, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(s, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+          /* @__PURE__ */ e.jsx(c, { variant: "subtitle2", fontWeight: "600", children: m }),
+          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(c, { variant: "caption", color: "text.secondary", children: F }) })
         ] }),
-        /* @__PURE__ */ e.jsx(h, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(Q, { value: y, max: V, readOnly: W, size: "small" }) }),
-        /* @__PURE__ */ e.jsx(x, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: w }),
-        s && s.length > 0 && /* @__PURE__ */ e.jsx(a, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: s.map((n, o) => /* @__PURE__ */ e.jsx(
-          P,
+        /* @__PURE__ */ e.jsx(d, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(K, { value: j, max: z, readOnly: L, size: "small" }) }),
+        /* @__PURE__ */ e.jsx(c, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: y }),
+        r && r.length > 0 && /* @__PURE__ */ e.jsx(s, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: r.map((a, n) => /* @__PURE__ */ e.jsx(
+          Q,
           {
-            src: n,
-            alt: `Review image ${o + 1}`,
+            src: a,
+            alt: `Review image ${n + 1}`,
             width: 80,
             height: 80,
             variant: "rounded",
@@ -95,7 +96,7 @@ const X = L(/* @__PURE__ */ e.jsx("path", {
               objectFit: "cover",
               cursor: "pointer"
             },
-            onClick: () => A(o),
+            onClick: () => O(n),
             onMouseEnter: (t) => {
               t.currentTarget.style.opacity = "0.8";
             },
@@ -103,17 +104,17 @@ const X = L(/* @__PURE__ */ e.jsx("path", {
               t.currentTarget.style.opacity = "1";
             }
           },
-          o
+          n
         )) }),
-        R && /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", sx: { mr: 2 }, children: "Was this review helpful?" }),
+        $ && /* @__PURE__ */ e.jsxs(s, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ e.jsx(c, { variant: "caption", color: "text.secondary", sx: { mr: 2 }, children: "Was this review helpful?" }),
           /* @__PURE__ */ e.jsx(
             H,
             {
               size: "small",
-              onClick: () => z("yes"),
+              onClick: () => R("yes"),
               sx: {
-                color: p === "yes" ? "primary.main" : "text.secondary",
+                color: x === "yes" ? "primary.main" : "text.secondary",
                 "&:hover": {
                   backgroundColor: "action.hover"
                 }
@@ -121,14 +122,14 @@ const X = L(/* @__PURE__ */ e.jsx("path", {
               children: /* @__PURE__ */ e.jsx(Z, { fontSize: "small" })
             }
           ),
-          /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: O }),
+          /* @__PURE__ */ e.jsx(c, { variant: "caption", color: "text.secondary", children: _ }),
           /* @__PURE__ */ e.jsx(
             H,
             {
               size: "small",
-              onClick: () => z("no"),
+              onClick: () => R("no"),
               sx: {
-                color: p === "no" ? "error.main" : "text.secondary",
+                color: x === "no" ? "error.main" : "text.secondary",
                 ml: 1,
                 "&:hover": {
                   backgroundColor: "action.hover"
@@ -137,26 +138,32 @@ const X = L(/* @__PURE__ */ e.jsx("path", {
               children: /* @__PURE__ */ e.jsx(X, { fontSize: "small" })
             }
           ),
-          /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: U })
+          /* @__PURE__ */ e.jsx(c, { variant: "caption", color: "text.secondary", children: U })
         ] })
       ] })
     ] }),
-    S && /* @__PURE__ */ e.jsx(D, { sx: { mt: 2 } }),
+    C && /* @__PURE__ */ e.jsx(T, { sx: { mt: 2 } }),
     /* @__PURE__ */ e.jsx(
-      K,
+      J,
       {
         isOpen: Y,
-        onClose: F,
-        selectedItem: B,
-        onItemChange: N,
-        mediaItems: u,
-        showNavigation: u.length > 1,
-        showThumbnailDock: u.length > 1,
-        showCounter: u.length > 1
+        onClose: E,
+        selectedItem: A,
+        onItemChange: B,
+        mediaItems: g,
+        showNavigation: g.length > 1,
+        showThumbnailDock: g.length > 1,
+        showCounter: g.length > 1
       }
     )
   ] });
 };
+q.displayName = "SReview";
+try {
+  q.displayName = "SReview", q.__docgenInfo = { description: "A comprehensive review component that displays user reviews with avatar, name, rating, content, and helpful voting system.", displayName: "SReview", props: { id: { defaultValue: { value: "Date.now()" }, description: "Unique identifier for the review (default: Date.now())", name: "id", required: !1, type: { name: "string | number" } }, userName: { defaultValue: null, description: "Name of the reviewer", name: "userName", required: !0, type: { name: "string" } }, userAvatar: { defaultValue: null, description: "URL for the user avatar image (falls back to initials if not provided)", name: "userAvatar", required: !1, type: { name: "string" } }, rating: { defaultValue: null, description: "Rating value", name: "rating", required: !0, type: { name: "number" } }, reviewContent: { defaultValue: null, description: "The review text content", name: "reviewContent", required: !0, type: { name: "string" } }, datetime: { defaultValue: null, description: "Date and time of the review (automatically converts to relative time)", name: "datetime", required: !0, type: { name: "string | Date" } }, images: { defaultValue: null, description: "Array of image URLs to display with the review", name: "images", required: !1, type: { name: "string[]" } }, userHelpfulVote: { defaultValue: { value: "null" }, description: "Current user vote status for this review (default: null)", name: "userHelpfulVote", required: !1, type: { name: '"yes" | "no" | null' } }, helpfulYes: { defaultValue: { value: "0" }, description: 'Number of "Yes" votes for helpfulness (default: 0)', name: "helpfulYes", required: !1, type: { name: "number" } }, helpfulNo: { defaultValue: { value: "0" }, description: 'Number of "No" votes for helpfulness (default: 0)', name: "helpfulNo", required: !1, type: { name: "number" } }, onHelpfulVote: { defaultValue: null, description: "Callback when user votes on helpfulness (returns null when un-voting)", name: "onHelpfulVote", required: !1, type: { name: '((reviewId: string | number, vote: "yes" | "no" | null) => void)' } }, showHelpfulSection: { defaultValue: { value: "true" }, description: "Whether to show the helpful voting section (default: true)", name: "showHelpfulSection", required: !1, type: { name: "boolean" } }, avatarSize: { defaultValue: { value: "48" }, description: "Size of the avatar in pixels (default: 48)", name: "avatarSize", required: !1, type: { name: "number" } }, maxRating: { defaultValue: { value: "5" }, description: "Maximum rating value (default: 5)", name: "maxRating", required: !1, type: { name: "number" } }, readOnly: { defaultValue: { value: "true" }, description: "Whether the rating is read-only (default: true)", name: "readOnly", required: !1, type: { name: "boolean" } }, showDivider: { defaultValue: { value: "true" }, description: "Whether to show the divider at the bottom of the review (default: true)", name: "showDivider", required: !1, type: { name: "boolean" } }, loading: { defaultValue: { value: "false" }, description: "Whether to show skeleton loading state instead of content (default: false)", name: "loading", required: !1, type: { name: "boolean" } }, sx: { defaultValue: { value: "{}" }, description: "MUI sx prop for custom styling", name: "sx", required: !1, type: { name: "SxProps" } } } };
+} catch {
+}
 export {
-  ce as default
+  q as SReview,
+  q as default
 };

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

@@ -1,4 +1,4 @@
-import { default as o } from "./s-scroll-reveal.js";
+import { SScrollReveal as a } from "./s-scroll-reveal.js";
 export {
-  o as default
+  a as default
 };

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

@@ -1,56 +1,37 @@
 import { default as React } from 'react';
 import { BoxProps } from '@mui/material';
 import { Easing } from 'framer-motion';
+/**
+ * Props interface for SScrollReveal component
+ */
 export interface SScrollRevealProps extends Omit<BoxProps, 'children'> {
+    /** The content to be revealed with animation */
     children: React.ReactNode;
+    /** Animation duration in seconds (default: 0.6) */
     duration?: number;
+    /** Framer Motion easing function for the animation (default: 'easeOut') */
     ease?: Easing;
+    /** Intersection Observer threshold (0-1) for triggering animation */
     threshold?: number;
+    /** Intersection Observer root margin (CSS margin syntax) */
     rootMargin?: string;
+    /** Delay before starting animation in milliseconds */
     delay?: number;
+    /** Direction from which elements animate into view */
     direction?: 'up' | 'down' | 'left' | 'right';
+    /** Distance in pixels that elements travel during animation */
     distance?: number;
+    /** Whether to include scaling effect in the animation (default: true) */
     scale?: boolean;
+    /** Whether to include rotation effect in the animation (default: false) */
     rotate?: boolean;
+    /** Whether to stagger animations for multiple children (default: true) */
     stagger?: boolean;
+    /** Delay between staggered child animations in seconds (default: 0.1) */
     staggerDelay?: number;
 }
-declare const SScrollReveal: React.FC<SScrollRevealProps>;
 /**
- * SScrollReveal - A container component that reveals its children with smooth animations when they enter the viewport
- *
- * This component uses the Intersection Observer API to detect when elements come into view and applies
- * customizable animation effects including directional movement, scaling, rotation, and staggered animations.
- * Built on MUI Box with full styling support and optimized for performance.
- *
- * Key features:
- * - Scroll-triggered animations with customizable timing
- * - Support for multiple animation directions (up, down, left, right)
- * - Optional scaling and rotation effects
- * - Staggered animations for multiple children
- * - Full MUI Box props support for styling
- * - Performance-optimized with Intersection Observer
- * - Responsive and accessible
- *
- * @example
- * ```tsx
- * <SScrollReveal direction="up" duration={0.8} stagger={true}>
- *   <Typography>This text will slide up</Typography>
- *   <Button>This button will follow</Button>
- * </SScrollReveal>
- * ```
- *
- * @example
- * ```tsx
- * <SScrollReveal
- *   direction="left"
- *   distance={100}
- *   scale={false}
- *   delay={200}
- *   sx={{ padding: 2 }}
- * >
- *   <Card>Slides in from the left</Card>
- * </SScrollReveal>
- * ```
+ * A scroll-triggered animation component that reveals content with smooth animations when elements enter the viewport.
  */
+export declare const SScrollReveal: React.FC<SScrollRevealProps>;
 export default SScrollReveal;

package/dist/s-scroll-reveal/s-scroll-reveal.js

@@ -1,63 +1,73 @@
-import { j as o } from "../jsx-runtime-OVHDjVDe.js";
-import B from "react";
-import { Box as e } from "@mui/material";
+import { j as i } from "../jsx-runtime-OVHDjVDe.js";
+import A from "react";
+import { Box as r } from "@mui/material";
 import { motion as p } from "framer-motion";
-import { useScrollAnimation as E } from "../hooks/use-scroll-animation.js";
-const F = ({
+import { useScrollAnimation as I } from "../hooks/use-scroll-animation.js";
+const l = ({
   children: a,
   duration: h = 0.6,
-  ease: v = "easeOut",
-  threshold: u,
-  rootMargin: x,
+  ease: g = "easeOut",
+  threshold: v,
+  rootMargin: y,
   delay: t,
-  direction: j,
-  distance: R,
-  scale: s = !0,
-  rotate: r = !1,
-  stagger: i = !0,
-  staggerDelay: S = 0.1,
-  sx: b,
-  ...y
+  direction: b,
+  distance: V,
+  scale: o = !0,
+  rotate: s = !1,
+  stagger: e = !0,
+  staggerDelay: q = 0.1,
+  sx: _,
+  ...w
 }) => {
-  const { ref: C, animate: A, initialPosition: l, finalPosition: c } = E({
-    threshold: u,
-    rootMargin: x,
+  const { ref: S, animate: x, initialPosition: d, finalPosition: u } = I({
+    threshold: v,
+    rootMargin: y,
     delay: t,
-    direction: j,
-    distance: R
-  }), m = s ? { ...l, scale: 0.85 } : l, d = s ? { ...c, scale: 1 } : c, n = r ? { ...m, rotate: -2 } : m, f = r ? { ...d, rotate: 0 } : d, P = {
+    direction: b,
+    distance: V
+  }), m = o ? { ...d, scale: 0.85 } : d, c = o ? { ...u, scale: 1 } : u, n = s ? { ...m, rotate: -2 } : m, f = s ? { ...c, rotate: 0 } : c, D = {
     hidden: { opacity: 0 },
     visible: {
       opacity: 1,
       transition: {
-        staggerChildren: i ? S : 0,
+        staggerChildren: e ? q : 0,
         delayChildren: t ? t / 1e3 : 0
       }
     }
-  }, V = {
+  }, R = {
     hidden: n,
     visible: f
   };
-  return /* @__PURE__ */ o.jsx(e, { sx: { overflow: "hidden", ...b }, ...y, children: /* @__PURE__ */ o.jsx(
-    e,
+  return /* @__PURE__ */ i.jsx(r, { sx: { overflow: "hidden", ..._ }, ...w, children: /* @__PURE__ */ i.jsx(
+    r,
     {
       component: p.div,
-      ref: C,
-      variants: i ? P : void 0,
-      initial: i ? "hidden" : n,
-      animate: A ? i ? "visible" : f : i ? "hidden" : n,
+      ref: S,
+      variants: e ? D : void 0,
+      initial: e ? "hidden" : n,
+      animate: x ? e ? "visible" : f : e ? "hidden" : n,
       transition: {
         duration: h,
-        ease: v,
+        ease: g,
         type: "spring",
         stiffness: 80,
         damping: 20,
         mass: 0.8
       },
-      children: i ? B.Children.toArray(a).map((_, w) => /* @__PURE__ */ o.jsx(e, { component: p.div, variants: V, children: _ }, w)) : a
+      children: e ? A.Children.toArray(a).map((O, N) => /* @__PURE__ */ i.jsx(r, { component: p.div, variants: R, children: O }, N)) : a
     }
   ) });
 };
+l.displayName = "SScrollReveal";
+try {
+  l.displayName = "SScrollReveal", l.__docgenInfo = { description: "A scroll-triggered animation component that reveals content with smooth animations when elements enter the viewport.", displayName: "SScrollReveal", props: { children: { defaultValue: null, description: "The content to be revealed with animation", name: "children", required: !0, type: { name: "ReactNode" } }, duration: { defaultValue: { value: "0.6" }, description: "Animation duration in seconds (default: 0.6)", name: "duration", required: !1, type: { name: "number" } }, ease: { defaultValue: { value: "easeOut" }, description: "Framer Motion easing function for the animation (default: 'easeOut')", name: "ease", required: !1, type: { name: "Easing" } }, threshold: { defaultValue: null, description: "Intersection Observer threshold (0-1) for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: null, description: "Intersection Observer root margin (CSS margin syntax)", name: "rootMargin", required: !1, type: { name: "string" } }, delay: { defaultValue: null, description: "Delay before starting animation in milliseconds", name: "delay", required: !1, type: { name: "number" } }, direction: { defaultValue: null, description: "Direction from which elements animate into view", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }, { value: '"up"' }, { value: '"down"' }] } }, distance: { defaultValue: null, description: "Distance in pixels that elements travel during animation", name: "distance", required: !1, type: { name: "number" } }, scale: { defaultValue: { value: "true" }, description: "Whether to include scaling effect in the animation (default: true)", name: "scale", required: !1, type: { name: "boolean" } }, rotate: { defaultValue: { value: "false" }, description: "Whether to include rotation effect in the animation (default: false)", name: "rotate", required: !1, type: { name: "boolean" } }, stagger: { defaultValue: { value: "true" }, description: "Whether to stagger animations for multiple children (default: true)", name: "stagger", required: !1, type: { name: "boolean" } }, staggerDelay: { defaultValue: { value: "0.1" }, description: "Delay between staggered child animations in seconds (default: 0.1)", name: "staggerDelay", required: !1, type: { name: "number" } } } };
+} catch {
+}
+try {
+  sscrollreveal.displayName = "sscrollreveal", sscrollreveal.__docgenInfo = { description: "A scroll-triggered animation component that reveals content with smooth animations when elements enter the viewport.", displayName: "sscrollreveal", props: { children: { defaultValue: null, description: "The content to be revealed with animation", name: "children", required: !0, type: { name: "ReactNode" } }, duration: { defaultValue: { value: "0.6" }, description: "Animation duration in seconds (default: 0.6)", name: "duration", required: !1, type: { name: "number" } }, ease: { defaultValue: { value: "easeOut" }, description: "Framer Motion easing function for the animation (default: 'easeOut')", name: "ease", required: !1, type: { name: "Easing" } }, threshold: { defaultValue: null, description: "Intersection Observer threshold (0-1) for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: null, description: "Intersection Observer root margin (CSS margin syntax)", name: "rootMargin", required: !1, type: { name: "string" } }, delay: { defaultValue: null, description: "Delay before starting animation in milliseconds", name: "delay", required: !1, type: { name: "number" } }, direction: { defaultValue: null, description: "Direction from which elements animate into view", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }, { value: '"up"' }, { value: '"down"' }] } }, distance: { defaultValue: null, description: "Distance in pixels that elements travel during animation", name: "distance", required: !1, type: { name: "number" } }, scale: { defaultValue: { value: "true" }, description: "Whether to include scaling effect in the animation (default: true)", name: "scale", required: !1, type: { name: "boolean" } }, rotate: { defaultValue: { value: "false" }, description: "Whether to include rotation effect in the animation (default: false)", name: "rotate", required: !1, type: { name: "boolean" } }, stagger: { defaultValue: { value: "true" }, description: "Whether to stagger animations for multiple children (default: true)", name: "stagger", required: !1, type: { name: "boolean" } }, staggerDelay: { defaultValue: { value: "0.1" }, description: "Delay between staggered child animations in seconds (default: 0.1)", name: "staggerDelay", required: !1, type: { name: "number" } } } };
+} catch {
+}
 export {
-  F as default
+  l as SScrollReveal,
+  l as default
 };

package/dist/s-scroll-to-top/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-scroll-to-top.js";
+import { SScrollToTop as r } from "./s-scroll-to-top.js";
 export {
-  o as default
+  r as default
 };

package/dist/s-scroll-to-top/s-scroll-to-top.d.ts

@@ -1,27 +1,22 @@
 import { default as React } from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
+/**
+ * Props interface for SScrollToTop component
+ */
 export interface SScrollToTopProps {
-    /**
-     * Handler called when the scroll-to-top button is clicked
-     */
+    /** Handler called when the scroll-to-top button is clicked */
     onClick?: () => void;
-    /**
-     * ID of the scrollable element to monitor. If not provided, monitors the window scroll
-     */
+    /** ID of the scrollable element to monitor. If not provided, monitors the window scroll */
     scrollElementId?: string;
-    /**
-     * Scroll position (in pixels) after which the button becomes visible
-     * @default 100
-     */
+    /** Scroll position (in pixels) after which the button becomes visible (default: 100) */
     threshold?: number;
-    /**
-     * Custom icon to display instead of the default arrow
-     */
+    /** Custom icon to display instead of the default arrow */
     icon?: React.ReactNode;
-    /**
-     * System prop for custom styling
-     */
+    /** System prop for custom styling */
     sx?: SxProps<Theme>;
 }
-declare const SScrollToTop: React.MemoExoticComponent<({ onClick, scrollElementId, threshold, icon, sx }: SScrollToTopProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * A floating button that appears when the user scrolls down and allows them to quickly return to the top.
+ */
+export declare const SScrollToTop: React.MemoExoticComponent<({ onClick, scrollElementId, threshold, icon, sx }: SScrollToTopProps) => import("react/jsx-runtime").JSX.Element>;
 export default SScrollToTop;

package/dist/s-scroll-to-top/s-scroll-to-top.js

@@ -1,10 +1,10 @@
 import { j as i } from "../jsx-runtime-OVHDjVDe.js";
-import d from "react";
-import { A as c } from "../ArrowUpward-DhTFpzoh.js";
+import c from "react";
+import { A as p } from "../ArrowUpward-DhTFpzoh.js";
 import { useIsPassedPosition as m } from "../hooks/use-is-passed-position.js";
-import { s as p } from "../styled-B0Z4EDy9.js";
+import { s as u } from "../styled-B0Z4EDy9.js";
 import { B as f } from "../Box-Ha0cQ4KO.js";
-const h = p(f)({
+const h = u(f)({
   position: "fixed",
   bottom: 20,
   right: 20,
@@ -21,10 +21,10 @@ const h = p(f)({
   "&:hover": {
     transform: "scale(1.1)"
   }
-}), u = d.memo(({ onClick: r, scrollElementId: o, threshold: e = 100, icon: a, sx: n }) => {
-  const s = m(o || window, e), l = () => {
-    if (r)
-      r();
+}), r = c.memo(({ onClick: e, scrollElementId: o, threshold: s = 100, icon: n, sx: a }) => {
+  const l = m(o || window, s), d = () => {
+    if (e)
+      e();
     else if (o) {
       const t = document.getElementById(o);
       t == null || t.scrollTo({ top: 0, behavior: "smooth" });
@@ -35,16 +35,21 @@ const h = p(f)({
     h,
     {
       sx: {
-        opacity: s ? 1 : 0,
-        visibility: s ? "visible" : "hidden",
-        ...n
+        opacity: l ? 1 : 0,
+        visibility: l ? "visible" : "hidden",
+        ...a
       },
-      onClick: l,
-      children: a || /* @__PURE__ */ i.jsx(c, {})
+      onClick: d,
+      children: n || /* @__PURE__ */ i.jsx(p, {})
     }
   );
 });
-u.displayName = "SScrollToTop";
+r.displayName = "SScrollToTop";
+try {
+  r.displayName = "SScrollToTop", r.__docgenInfo = { description: "A floating button that appears when the user scrolls down and allows them to quickly return to the top.", displayName: "SScrollToTop", props: { onClick: { defaultValue: null, description: "Handler called when the scroll-to-top button is clicked", name: "onClick", required: !1, type: { name: "(() => void)" } }, scrollElementId: { defaultValue: null, description: "ID of the scrollable element to monitor. If not provided, monitors the window scroll", name: "scrollElementId", required: !1, type: { name: "string" } }, threshold: { defaultValue: null, description: "Scroll position (in pixels) after which the button becomes visible (default: 100)", name: "threshold", required: !1, type: { name: "number" } }, icon: { defaultValue: null, description: "Custom icon to display instead of the default arrow", name: "icon", required: !1, type: { name: "ReactNode" } }, sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
+} catch {
+}
 export {
-  u as default
+  r as SScrollToTop,
+  r as default
 };

package/dist/s-scroll-velocity/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './s-scroll-velocity';
+export type { SScrollVelocityProps } from './s-scroll-velocity';
+export { ScrollVelocityContainer } from './scroll-velocity-container';
+export type { ScrollVelocityContainerProps } from './scroll-velocity-container';
+export { ScrollVelocityRow } from './scroll-velocity-row';
+export type { ScrollVelocityRowProps } from './scroll-velocity-row';

package/dist/s-scroll-velocity/index.js

@@ -0,0 +1,8 @@
+import { SScrollVelocity as r } from "./s-scroll-velocity.js";
+import { ScrollVelocityContainer as t } from "./scroll-velocity-container.js";
+import { ScrollVelocityRow as f } from "./scroll-velocity-row.js";
+export {
+  t as ScrollVelocityContainer,
+  f as ScrollVelocityRow,
+  r as default
+};

package/dist/s-scroll-velocity/package.json

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

package/dist/s-scroll-velocity/s-scroll-velocity.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
+/**
+ * Props for the SScrollVelocity component
+ */
+export interface SScrollVelocityProps extends BoxProps {
+    /** Content to display in the scrolling marquee */
+    children: React.ReactNode;
+    /** Base scrolling speed (default: 5) */
+    baseVelocity?: number;
+    /** Scroll direction: 1 for right, -1 for left (default: 1) */
+    direction?: 1 | -1;
+}
+/**
+ * A scroll-velocity based marquee component that automatically scrolls horizontally and responds to page scroll velocity.
+ * Perfect for displaying logos, features, testimonials, or any repeating content in an engaging way.
+ *
+ * The component automatically duplicates content to create a seamless infinite scroll effect and adjusts speed based on page scroll velocity.
+ */
+export declare const SScrollVelocity: {
+    ({ children, baseVelocity, direction, sx, ...props }: SScrollVelocityProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SScrollVelocity;