@solostylist/ui-kit 1.0.166 → 1.0.168

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

@@ -0,0 +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;
+}
+/**
+ * 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;

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

@@ -0,0 +1,156 @@
+var K = Object.defineProperty;
+var Q = (t, i, n) => i in t ? K(t, i, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[i] = n;
+var s = (t, i, n) => Q(t, typeof i != "symbol" ? i + "" : i, n);
+import { j as P } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as Z, useRef as h, useCallback as A, useEffect as ee } from "react";
+import { brand as _ } from "../theme/theme-primitives.js";
+class te {
+  constructor(i, n, l, v, g, b, M) {
+    s(this, "x");
+    s(this, "y");
+    s(this, "color");
+    s(this, "speed");
+    s(this, "size");
+    s(this, "sizeStep");
+    s(this, "minSize");
+    s(this, "maxSize");
+    s(this, "delay");
+    s(this, "counter");
+    s(this, "counterStep");
+    s(this, "isReverse");
+    s(this, "isShimmer");
+    this.x = i, this.y = n, this.color = l, this.speed = (Math.random() * 0.8 + 0.1) * v, this.size = 0, this.sizeStep = Math.random() * 0.4, this.minSize = 0.5, this.maxSize = M, this.delay = g, this.counter = 0, this.counterStep = b, this.isReverse = !1, this.isShimmer = !1;
+  }
+  update(i) {
+    return i ? this.counter < this.delay ? (this.counter += this.counterStep, !0) : (this.isShimmer ? this.isReverse ? (this.size -= this.speed, this.size <= this.minSize && (this.size = this.minSize, this.isReverse = !1)) : (this.size += this.speed, this.size >= this.maxSize && (this.size = this.maxSize, this.isReverse = !0)) : this.size < this.maxSize ? this.size += this.sizeStep : this.isShimmer = !0, !0) : (this.isShimmer = !1, this.counter = 0, this.size > 0 ? (this.size -= 0.1, !0) : !1);
+  }
+  draw(i, n) {
+    const l = (n - this.size) * 0.5;
+    i.fillRect(this.x + l, this.y + l, this.size, this.size);
+  }
+}
+const j = Z(
+  ({
+    gap: t = 5,
+    speed: i = 100,
+    colors: n = [_[400], _[500], _[600]],
+    loading: l = !0,
+    src: v,
+    alt: g = "",
+    style: b,
+    children: M,
+    instant: F = !0,
+    ...$
+  }, z) => {
+    const q = h(null), S = h(null), D = h(null), y = h(/* @__PURE__ */ new Map()), u = h(null), I = h(1e3 / 60), N = h(performance.now()), k = h(
+      typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1
+    ), E = A((e, o, d, c) => {
+      const r = e - d, a = o - c;
+      return r * r + a * a;
+    }, []), O = A(() => {
+      const e = q.current, o = e == null ? void 0 : e.getContext("2d");
+      if (!e || !o) return;
+      y.current = /* @__PURE__ */ new Map();
+      const d = k.current ? 0 : Math.max(0, Math.min(100, i)) * 1e-3, c = window.devicePixelRatio || 1, r = e.width / c, a = e.height / c, x = 2, X = 0.5, H = (r + a) * 0.01, L = r % t / 2, T = a % t / 2;
+      for (let f = L; f < r; f += t)
+        for (let m = T; m < a; m += t) {
+          const p = n[Math.floor(Math.random() * n.length)];
+          let w = 0;
+          if (!F && !k.current) {
+            const U = f + t / 2, W = m + t / 2, G = r / 2, J = a / 2;
+            w = Math.sqrt(E(U, W, G, J));
+          }
+          const C = Math.random() * 4 + H, R = Math.random() * (x - X) + X, B = new te(f, m, p, d, w, C, R);
+          y.current.has(p) || y.current.set(p, []), y.current.get(p).push(B);
+        }
+      u.current && cancelAnimationFrame(u.current);
+      const Y = () => {
+        u.current = requestAnimationFrame(Y);
+        const f = performance.now(), m = f - N.current;
+        if (m < I.current) return;
+        N.current = f - m % I.current, o.clearRect(0, 0, r, a);
+        let p = !1;
+        y.current.forEach((w, C) => {
+          o.fillStyle = C;
+          for (const R of w)
+            R.update(l) && (R.draw(o, t), p = !0);
+        }), !l && !p && u.current && (cancelAnimationFrame(u.current), u.current = null);
+      };
+      Y();
+    }, [t, i, n, F, l, E]), V = A(() => {
+      const e = q.current, o = S.current, d = e == null ? void 0 : e.getContext("2d");
+      if (!e || !o || !d) return;
+      const c = o.getBoundingClientRect();
+      if (c.width === 0 || c.height === 0) return;
+      const r = Math.floor(c.width), a = Math.floor(c.height), x = window.devicePixelRatio || 1;
+      e.width = r * x, e.height = a * x, e.style.width = `${r}px`, e.style.height = `${a}px`, d.setTransform(1, 0, 0, 1, 0, 0), d.scale(x, x), O();
+    }, [O]);
+    return ee(() => {
+      V();
+      const e = new ResizeObserver(() => {
+        requestAnimationFrame(() => V());
+      });
+      return S.current && e.observe(S.current), () => {
+        e.disconnect(), u.current && cancelAnimationFrame(u.current);
+      };
+    }, [V]), /* @__PURE__ */ P.jsxs(
+      "div",
+      {
+        ref: (e) => {
+          S.current = e, typeof z == "function" ? z(e) : z && (z.current = e);
+        },
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          ...b
+        },
+        ...$,
+        children: [
+          v && /* @__PURE__ */ P.jsx(
+            "img",
+            {
+              ref: D,
+              src: v,
+              alt: g,
+              style: {
+                position: "absolute",
+                inset: 0,
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                display: "block"
+              }
+            }
+          ),
+          M,
+          /* @__PURE__ */ P.jsx(
+            "canvas",
+            {
+              ref: q,
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "block",
+                width: "100%",
+                height: "100%",
+                pointerEvents: "none",
+                zIndex: 1
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+j.displayName = "SPixelReveal";
+try {
+  j.displayName = "SPixelReveal", j.__docgenInfo = { description: "An animated pixel effect component that creates a dynamic canvas overlay with customizable pixel animations.", displayName: "SPixelReveal", props: { gap: { defaultValue: { value: "5" }, description: "Spacing between pixels in the grid", name: "gap", required: !1, type: { name: "number" } }, speed: { defaultValue: { value: "100" }, description: "Animation speed multiplier (0-100)", name: "speed", required: !1, type: { name: "number" } }, colors: { defaultValue: { value: "[brand[400], brand[500], brand[600]]" }, description: "Array of color values randomly assigned to pixels", name: "colors", required: !1, type: { name: "string[]" } }, loading: { defaultValue: { value: "true" }, description: "Controls pixel animation state", name: "loading", required: !1, type: { name: "boolean" } }, src: { defaultValue: null, description: "Image source URL to display beneath the pixel effect overlay", name: "src", required: !1, type: { name: "string" } }, alt: { defaultValue: { value: "" }, description: "Alt text for the background image", name: "alt", required: !1, type: { name: "string" } }, children: { defaultValue: null, description: "Content to render as overlay on top of the pixel canvas effect", name: "children", required: !1, type: { name: "ReactNode" } }, instant: { defaultValue: { value: "true" }, description: "If true, all pixels appear immediately without wave/delay effect", name: "instant", required: !1, type: { name: "boolean" } } } };
+} catch {
+}
+export {
+  j as SPixelReveal,
+  j as default
+};

package/dist/s-radial-pulse-animate/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-radial-pulse-animate.js";
+import { SRadialPulseAnimate as l } from "./s-radial-pulse-animate.js";
 export {
-  o as default
+  l as default
 };

package/dist/s-radial-pulse-animate/s-radial-pulse-animate.d.ts

@@ -1,13 +1,24 @@
 import { default as React } from 'react';
+/**
+ * Props interface for SRadialPulseAnimate component
+ */
 export interface SRadialPulseAnimateProps {
+    /** Width of the animation container in pixels */
     width?: number;
+    /** Height of the animation container in pixels */
     height?: number;
+    /** Additional CSS class name for custom styling */
     className?: string;
+    /** Custom text to display in the center of the animation */
     text?: string;
+    /** Size range for floating particles in pixels */
     particleSize?: {
         min: number;
         max: number;
     };
 }
-declare const SRadialPulseAnimate: React.FC<SRadialPulseAnimateProps>;
+/**
+ * A loading animation component that creates a pulsing radial effect with expanding ripples and floating particles.
+ */
+export declare const SRadialPulseAnimate: React.FC<SRadialPulseAnimateProps>;
 export default SRadialPulseAnimate;

package/dist/s-radial-pulse-animate/s-radial-pulse-animate.js

@@ -1,8 +1,8 @@
-import { j as n } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as x, useEffect as y } from "react";
-import { keyframes as h, styled as l, Box as d } from "@mui/material";
-import v from "../s-text-shimmer/s-text-shimmer.js";
-const b = h`
+import { j as i } from "../jsx-runtime-OVHDjVDe.js";
+import { useRef as y, useEffect as x } from "react";
+import { keyframes as g, styled as d, Box as p } from "@mui/material";
+import { STextShimmer as v } from "../s-text-shimmer/s-text-shimmer.js";
+const b = g`
   0% {
     width: 20%;
     height: 20%;
@@ -13,7 +13,7 @@ const b = h`
     height: 100%;
     opacity: 0;
   }
-`, j = l(d)(({ theme: e }) => ({
+`, _ = d(p)(({ theme: e }) => ({
   position: "relative",
   display: "flex",
   justifyContent: "center",
@@ -21,10 +21,10 @@ const b = h`
   borderRadius: e.shape.borderRadius,
   border: "1px solid",
   borderColor: (e.vars || e).palette.divider
-})), C = l(d)(() => ({
+})), S = d(p)(() => ({
   position: "absolute",
   pointerEvents: "none"
-})), s = l(d)(({ theme: e }) => ({
+})), l = d(p)(({ theme: e }) => ({
   position: "absolute",
   top: "50%",
   left: "50%",
@@ -43,11 +43,11 @@ const b = h`
   "@media (prefers-reduced-motion: reduce)": {
     animation: "none !important"
   }
-})), R = () => {
+})), C = () => {
   const e = "s-radial-pulse-particles";
   if (document.getElementById(e)) return;
-  const a = document.createElement("style");
-  a.id = e, a.textContent = `
+  const t = document.createElement("style");
+  t.id = e, t.textContent = `
     .s-radial-pulse-particle {
       position: absolute;
       background: var(--s-palette-text-primary);
@@ -75,57 +75,67 @@ const b = h`
         animation: none !important;
       }
     }
-  `, document.head.appendChild(a);
-}, k = ({
+  `, document.head.appendChild(t);
+}, o = ({
   width: e = 300,
-  height: a = 300,
+  height: t = 300,
   className: c,
-  text: u = "Generating...",
-  particleSize: i = { min: 2, max: 6 }
+  text: f = "Generating...",
+  particleSize: r = { min: 2, max: 6 }
 }) => {
-  const o = x(null);
-  return y(() => {
-    R();
-    const p = () => {
-      if (!o.current) return;
-      const r = o.current, t = document.createElement("div");
-      t.className = "s-radial-pulse-particle";
-      const m = Math.random() * (i.max - i.min) + i.min;
-      t.style.width = `${m}px`, t.style.height = `${m}px`, t.style.left = `${Math.random() * e}px`, t.style.top = `${Math.random() * a}px`, t.style.animationDelay = `${Math.random() * 4}s`, t.style.animationDuration = `${Math.random() * 3 + 2}s`, r.appendChild(t), setTimeout(() => {
-        t.parentNode && t.parentNode.removeChild(t);
+  const s = y(null);
+  return x(() => {
+    C();
+    const m = () => {
+      if (!s.current) return;
+      const n = s.current, a = document.createElement("div");
+      a.className = "s-radial-pulse-particle";
+      const u = Math.random() * (r.max - r.min) + r.min;
+      a.style.width = `${u}px`, a.style.height = `${u}px`, a.style.left = `${Math.random() * e}px`, a.style.top = `${Math.random() * t}px`, a.style.animationDelay = `${Math.random() * 4}s`, a.style.animationDuration = `${Math.random() * 3 + 2}s`, n.appendChild(a), setTimeout(() => {
+        a.parentNode && a.parentNode.removeChild(a);
       }, 6e3);
-    }, f = setInterval(p, 500);
-    for (let r = 0; r < 4; r++) setTimeout(p, r * 100);
-    return () => clearInterval(f);
-  }, [e, a, i]), /* @__PURE__ */ n.jsxs(
-    j,
+    }, h = setInterval(m, 500);
+    for (let n = 0; n < 4; n++) setTimeout(m, n * 100);
+    return () => clearInterval(h);
+  }, [e, t, r]), /* @__PURE__ */ i.jsxs(
+    _,
     {
-      ref: o,
+      ref: s,
       className: c,
       sx: {
         width: e,
-        height: a
+        height: t
       },
       children: [
-        /* @__PURE__ */ n.jsxs(
-          C,
+        /* @__PURE__ */ i.jsxs(
+          S,
           {
             sx: {
-              width: Math.min(e, a),
-              height: Math.min(e, a)
+              width: Math.min(e, t),
+              height: Math.min(e, t)
             },
             children: [
-              /* @__PURE__ */ n.jsx(s, {}),
-              /* @__PURE__ */ n.jsx(s, {}),
-              /* @__PURE__ */ n.jsx(s, {})
+              /* @__PURE__ */ i.jsx(l, {}),
+              /* @__PURE__ */ i.jsx(l, {}),
+              /* @__PURE__ */ i.jsx(l, {})
             ]
           }
         ),
-        /* @__PURE__ */ n.jsx(v, { children: u })
+        /* @__PURE__ */ i.jsx(v, { children: f })
       ]
     }
   );
 };
+o.displayName = "SRadialPulseAnimate";
+try {
+  o.displayName = "SRadialPulseAnimate", o.__docgenInfo = { description: "A loading animation component that creates a pulsing radial effect with expanding ripples and floating particles.", displayName: "SRadialPulseAnimate", props: { width: { defaultValue: { value: "300" }, description: "Width of the animation container in pixels", name: "width", required: !1, type: { name: "number" } }, height: { defaultValue: { value: "300" }, description: "Height of the animation container in pixels", name: "height", required: !1, type: { name: "number" } }, className: { defaultValue: null, description: "Additional CSS class name for custom styling", name: "className", required: !1, type: { name: "string" } }, text: { defaultValue: { value: "Generating..." }, description: "Custom text to display in the center of the animation", name: "text", required: !1, type: { name: "string" } }, particleSize: { defaultValue: { value: "{ min: 2, max: 6 }" }, description: "Size range for floating particles in pixels", name: "particleSize", required: !1, type: { name: "{ min: number; max: number; }" } } } };
+} catch {
+}
+try {
+  sradialpulseanimate.displayName = "sradialpulseanimate", sradialpulseanimate.__docgenInfo = { description: "A loading animation component that creates a pulsing radial effect with expanding ripples and floating particles.", displayName: "sradialpulseanimate", props: { width: { defaultValue: { value: "300" }, description: "Width of the animation container in pixels", name: "width", required: !1, type: { name: "number" } }, height: { defaultValue: { value: "300" }, description: "Height of the animation container in pixels", name: "height", required: !1, type: { name: "number" } }, className: { defaultValue: null, description: "Additional CSS class name for custom styling", name: "className", required: !1, type: { name: "string" } }, text: { defaultValue: { value: "Generating..." }, description: "Custom text to display in the center of the animation", name: "text", required: !1, type: { name: "string" } }, particleSize: { defaultValue: { value: "{ min: 2, max: 6 }" }, description: "Size range for floating particles in pixels", name: "particleSize", required: !1, type: { name: "{ min: number; max: number; }" } } } };
+} catch {
+}
 export {
-  k as default
+  o as SRadialPulseAnimate,
+  o as default
 };

package/dist/s-rating/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-rating.js";
+import { SRating as e } from "./s-rating.js";
 export {
-  o as default
+  e as default
 };

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

@@ -1,6 +1,12 @@
 import { default as React } from 'react';
 import { RatingProps } from '@mui/material';
+/**
+ * Props interface for SRating component
+ */
 export interface SRatingProps extends RatingProps {
 }
-declare const SRating: React.ForwardRefExoticComponent<Omit<SRatingProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A star rating component that allows users to provide feedback and ratings.
+ */
+export declare const SRating: React.ForwardRefExoticComponent<Omit<SRatingProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SRating;

package/dist/s-rating/s-rating.js

@@ -1,7 +1,17 @@
-import { j as o } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as m } from "react";
-import { Rating as a } from "@mui/material";
-const e = m((r, t) => /* @__PURE__ */ o.jsx(a, { ref: t, ...r }));
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as o } from "react";
+import { Rating as s } from "@mui/material";
+const t = o((r, a) => /* @__PURE__ */ e.jsx(s, { ref: a, ...r }));
+t.displayName = "SRating";
+try {
+  t.displayName = "SRating", t.__docgenInfo = { description: "A star rating component that allows users to provide feedback and ratings.", displayName: "SRating", props: {} };
+} catch {
+}
+try {
+  srating.displayName = "srating", srating.__docgenInfo = { description: "A star rating component that allows users to provide feedback and ratings.", displayName: "srating", props: {} };
+} catch {
+}
 export {
-  e as default
+  t as SRating,
+  t as default
 };

package/dist/s-review/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-review.js";
+import { SReview as f } from "./s-review.js";
 export {
-  o as default
+  f as default
 };

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

@@ -1,24 +1,48 @@
 import { default as React } from 'react';
 import { SxProps } from '@mui/material';
+/**
+ * Props interface for SReview component
+ */
 export interface SReviewProps {
+    /** Unique identifier for the review (default: Date.now()) */
     id?: string | number;
+    /** Name of the reviewer */
     userName: string;
+    /** URL for the user avatar image (falls back to initials if not provided) */
     userAvatar?: string;
+    /** Rating value */
     rating: number;
+    /** The review text content */
     reviewContent: string;
+    /** Date and time of the review (automatically converts to relative time) */
     datetime: Date | string;
+    /** Array of image URLs to display with the review */
     images?: string[];
+    /** Current user vote status for this review (default: null) */
     userHelpfulVote?: 'yes' | 'no' | null;
+    /** Number of "Yes" votes for helpfulness (default: 0) */
     helpfulYes?: number;
+    /** Number of "No" votes for helpfulness (default: 0) */
     helpfulNo?: number;
+    /** Callback when user votes on helpfulness (returns null when un-voting) */
     onHelpfulVote?: (reviewId: string | number, vote: 'yes' | 'no' | null) => void;
+    /** Whether to show the helpful voting section (default: true) */
     showHelpfulSection?: boolean;
+    /** Size of the avatar in pixels (default: 48) */
     avatarSize?: number;
+    /** Maximum rating value (default: 5) */
     maxRating?: number;
+    /** Whether the rating is read-only (default: true) */
     readOnly?: boolean;
+    /** Whether to show the divider at the bottom of the review (default: true) */
     showDivider?: boolean;
+    /** Whether to show skeleton loading state instead of content (default: false) */
     loading?: boolean;
+    /** MUI sx prop for custom styling */
     sx?: SxProps;
 }
-declare const SReview: React.FC<SReviewProps>;
+/**
+ * A comprehensive review component that displays user reviews with avatar, name, rating, content, and helpful voting system.
+ */
+export declare const SReview: React.FC<SReviewProps>;
 export default SReview;