@solostylist/ui-kit 1.0.103 → 1.0.105

package/dist/s-blur-text/s-blur-text.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { TypographyProps } from '@mui/material';
+export interface SBlurTextProps extends Omit<TypographyProps, 'children'> {
+    /** The text content to animate */
+    text: string;
+    /** Delay between animating each segment in milliseconds */
+    delay?: number;
+    /** Animation granularity - animate by words or individual letters */
+    animateBy?: 'words' | 'letters';
+    /** Direction of the blur animation */
+    direction?: 'top' | 'bottom';
+    /** Intersection observer threshold for triggering animation */
+    threshold?: number;
+    /** Intersection observer root margin */
+    rootMargin?: string;
+    /** Custom starting animation state */
+    animationFrom?: Record<string, string | number>;
+    /** Custom ending animation states (array for multi-step animations) */
+    animationTo?: Array<Record<string, string | number>>;
+    /** Custom easing function for animation timing */
+    easing?: (t: number) => number;
+    /** Callback fired when animation completes */
+    onAnimationComplete?: () => void;
+    /** Duration of each animation step in seconds */
+    stepDuration?: number;
+}
+/**
+ * A Typography component that animates text with a blur effect when it comes into view.
+ * Supports word-by-word or letter-by-letter animation with customizable timing and effects.
+ * Built on MUI Typography with full styling support.
+ *
+ * @example
+ * ```tsx
+ * <SBlurText
+ *   text="Hello world, this text will blur in"
+ *   variant="h1"
+ *   animateBy="words"
+ *   delay={150}
+ * />
+ * ```
+ */
+declare const SBlurText: React.FC<SBlurTextProps>;
+export default SBlurText;

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

@@ -0,0 +1,80 @@
+import { j as y } from "../jsx-runtime-DywqP_6a.js";
+import { useState as R, useRef as V, useEffect as D, useMemo as b } from "react";
+import { Typography as F } from "@mui/material";
+import { motion as M } from "framer-motion";
+const _ = (s, a) => {
+  const i = /* @__PURE__ */ new Set([...Object.keys(s), ...a.flatMap((t) => Object.keys(t))]), o = {};
+  return i.forEach((t) => {
+    o[t] = [s[t], ...a.map((l) => l[t])];
+  }), o;
+}, H = ({
+  text: s,
+  delay: a = 100,
+  animateBy: i = "words",
+  direction: o = "top",
+  threshold: t = 0.1,
+  rootMargin: l = "0px",
+  animationFrom: h,
+  animationTo: d,
+  easing: w = (n) => n,
+  onAnimationComplete: x,
+  stepDuration: j = 0.35,
+  variant: g = "body1",
+  component: v = "p",
+  sx: S,
+  ...T
+}) => {
+  const n = i === "words" ? s.split(" ") : s.split(""), [k, C] = R(!1), c = V(null);
+  D(() => {
+    if (!c.current) return;
+    const r = new IntersectionObserver(
+      ([e]) => {
+        e.isIntersecting && (C(!0), r.unobserve(c.current));
+      },
+      { threshold: t, rootMargin: l }
+    );
+    return r.observe(c.current), () => r.disconnect();
+  }, [t, l]);
+  const E = b(
+    () => o === "top" ? { filter: "blur(10px)", opacity: 0, y: -50 } : { filter: "blur(10px)", opacity: 0, y: 50 },
+    [o]
+  ), I = b(
+    () => [
+      {
+        filter: "blur(5px)",
+        opacity: 0.5,
+        y: o === "top" ? 5 : -5
+      },
+      { filter: "blur(0px)", opacity: 1, y: 0 }
+    ],
+    [o]
+  ), u = h ?? E, f = d ?? I, p = f.length + 1, O = j * (p - 1), A = Array.from({ length: p }, (r, e) => p === 1 ? 0 : e / (p - 1));
+  return /* @__PURE__ */ y.jsx(F, { ref: c, variant: g, component: v, sx: S, ...T, children: n.map((r, e) => {
+    const K = _(u, f), m = {
+      duration: O,
+      times: A,
+      delay: e * a / 1e3
+    };
+    return m.ease = w, /* @__PURE__ */ y.jsxs(
+      M.span,
+      {
+        initial: u,
+        animate: k ? K : u,
+        transition: m,
+        onAnimationComplete: e === n.length - 1 ? x : void 0,
+        style: {
+          display: "inline-block",
+          willChange: "transform, filter, opacity"
+        },
+        children: [
+          r === " " ? " " : r,
+          i === "words" && e < n.length - 1 && " "
+        ]
+      },
+      e
+    );
+  }) });
+};
+export {
+  H as default
+};

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

@@ -4,27 +4,27 @@ import { Box as o, Typography as l, Paper as H, IconButton as D } from "@mui/mat
 import S from "../s-avatar/s-avatar.js";
 import L from "../s-image-modal/s-image-modal.js";
 import O from "../s-lazy-image/s-lazy-image.js";
-import { c as b } from "../createSvgIcon-DCQI9UV5.js";
-const R = b(/* @__PURE__ */ r.jsx("path", {
+import { c as z } from "../createSvgIcon-DCQI9UV5.js";
+const R = z(/* @__PURE__ */ r.jsx("path", {
   d: "M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"
-}), "Download"), U = b(/* @__PURE__ */ r.jsx("path", {
+}), "Download"), U = z(/* @__PURE__ */ r.jsx("path", {
   d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"
-}), "InsertDriveFile"), Q = ({
+}), "InsertDriveFile"), J = ({
   message: m,
-  variant: z = "received",
+  variant: b = "received",
   timestamp: f,
-  avatar: g,
+  avatar: h,
   senderName: t,
-  showAvatar: h = !0,
+  showAvatar: g = !0,
   showTimestamp: I = !1,
   maxWidth: w = "70%",
   attachments: x = [],
   onAttachmentClick: s,
   onDownload: n,
-  sx: M,
-  ...k
+  sx: k,
+  ...M
 }) => {
-  const [a, u] = v(null), [C, j] = v(!1), i = z === "sent", T = (e) => (typeof e == "string" ? new Date(e) : e).toLocaleTimeString("en-US", {
+  const [a, u] = v(null), [C, j] = v(!1), i = b === "sent", T = (e) => (typeof e == "string" ? new Date(e) : e).toLocaleTimeString("en-US", {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !0
@@ -48,11 +48,11 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
       sx: {
         maxWidth: w,
         alignSelf: i ? "flex-end" : "flex-start",
-        ...M
+        ...k
       },
-      ...k,
+      ...M,
       children: [
-        h && !i && /* @__PURE__ */ r.jsx(S, { avatar: g, name: t, size: 36 }),
+        g && !i && /* @__PURE__ */ r.jsx(S, { avatar: h, name: t, size: 36 }),
         /* @__PURE__ */ r.jsxs(
           o,
           {
@@ -148,9 +148,9 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
                           p: 1,
                           mt: c > 0 ? 1 : 0,
                           cursor: "pointer",
-                          backgroundColor: i ? "rgba(0,0,0,0.1)" : "background.paper",
+                          backgroundColor: i ? "blackAlpha.zero" : "background.paper",
                           "&:hover": {
-                            backgroundColor: i ? "rgba(0,0,0,0.2)" : "action.hover"
+                            backgroundColor: i ? "blackAlpha.light" : "action.hover"
                           }
                         },
                         onClick: () => W(e),
@@ -186,7 +186,7 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
                                 variant: "caption",
                                 sx: {
                                   fontSize: "0.75rem",
-                                  color: i ? "rgba(255,255,255,0.7)" : "text.secondary"
+                                  color: i ? "whiteAlpha.dark" : "text.secondary"
                                 },
                                 children: B(e.size)
                               }
@@ -240,7 +240,7 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
             ]
           }
         ),
-        h && i && /* @__PURE__ */ r.jsx(S, { avatar: g, name: t, size: 36 }),
+        g && i && /* @__PURE__ */ r.jsx(S, { avatar: h, name: t, size: 36 }),
         a && /* @__PURE__ */ r.jsx(
           L,
           {
@@ -263,5 +263,5 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
   );
 };
 export {
-  Q as default
+  J as default
 };

package/dist/s-flex-box/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-flex-box';
+export type { SFlexBoxProps } from './s-flex-box';

package/dist/s-flex-box/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-flex-box.js";
+export {
+  o as default
+};

package/dist/s-flex-box/package.json

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

package/dist/s-flex-box/s-flex-box.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '@mui/material/Box';
+export interface SFlexBoxProps extends BoxProps {
+}
+declare const SFlexBox: ({ children, ...props }: SFlexBoxProps) => import("react/jsx-runtime").JSX.Element;
+export default SFlexBox;

package/dist/s-flex-box/s-flex-box.js

@@ -0,0 +1,6 @@
+import { j as s } from "../jsx-runtime-DywqP_6a.js";
+import { B as t } from "../Box-Deehc8LF.js";
+const a = ({ children: o, ...r }) => /* @__PURE__ */ s.jsx(t, { display: "flex", ...r, children: o });
+export {
+  a as default
+};

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

@@ -1,8 +1,8 @@
 import { j as n } from "../jsx-runtime-DywqP_6a.js";
-import { useRef as x, useEffect as y } from "react";
-import { keyframes as h, styled as l, Box as d } from "@mui/material";
+import { useRef as x, useEffect as h } from "react";
+import { keyframes as y, styled as l, Box as d } from "@mui/material";
 import b from "../s-text-shimmer/s-text-shimmer.js";
-const j = h`
+const j = y`
   0% {
     width: 20%;
     height: 20%;
@@ -13,7 +13,7 @@ const j = h`
     height: 100%;
     opacity: 0;
   }
-`, g = l(d)(({ theme: e }) => ({
+`, v = l(d)(({ theme: e }) => ({
   position: "relative",
   display: "flex",
   justifyContent: "center",
@@ -21,7 +21,7 @@ const j = h`
   borderRadius: e.shape.borderRadius,
   border: "1px solid",
   borderColor: e.palette.divider
-})), v = l(d)(() => ({
+})), C = l(d)(() => ({
   position: "absolute",
   pointerEvents: "none"
 })), s = l(d)(({ theme: e }) => ({
@@ -43,14 +43,14 @@ const j = h`
   "@media (prefers-reduced-motion: reduce)": {
     animation: "none !important"
   }
-})), C = () => {
+})), R = () => {
   const e = "s-radial-pulse-particles";
   if (document.getElementById(e)) return;
   const a = document.createElement("style");
   a.id = e, a.textContent = `
     .s-radial-pulse-particle {
       position: absolute;
-      background: rgba(255, 255, 255, 0.8);
+      background: var(--s-palette-whiteAlpha-dark);
       border-radius: 50%;
       animation: s-radial-pulse-float 4s ease-in-out infinite;
     }
@@ -84,8 +84,8 @@ const j = h`
   particleSize: r = { min: 2, max: 6 }
 }) => {
   const o = x(null);
-  return y(() => {
-    C();
+  return h(() => {
+    R();
     const p = () => {
       if (!o.current) return;
       const i = o.current, t = document.createElement("div");
@@ -98,7 +98,7 @@ const j = h`
     for (let i = 0; i < 4; i++) setTimeout(p, i * 100);
     return () => clearInterval(f);
   }, [e, a, r]), /* @__PURE__ */ n.jsxs(
-    g,
+    v,
     {
       ref: o,
       className: c,
@@ -108,7 +108,7 @@ const j = h`
       },
       children: [
         /* @__PURE__ */ n.jsxs(
-          v,
+          C,
           {
             sx: {
               width: Math.min(e, a),

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

@@ -0,0 +1,2 @@
+export type { SScrollRevealProps } from './s-scroll-reveal';
+export { default } from './s-scroll-reveal';

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

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

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

@@ -0,0 +1,6 @@
+{
+  "name": "@solostylist/ui-kit/s-scroll-reveal",
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.ts"
+}

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

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
+import { Easing } from 'framer-motion';
+export interface SScrollRevealProps extends Omit<BoxProps, 'children'> {
+    children: React.ReactNode;
+    duration?: number;
+    ease?: Easing;
+    threshold?: number;
+    rootMargin?: string;
+    delay?: number;
+    direction?: 'up' | 'down' | 'left' | 'right';
+    distance?: number;
+    scale?: boolean;
+    rotate?: boolean;
+    stagger?: boolean;
+    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>
+ * ```
+ */
+export default SScrollReveal;

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

@@ -0,0 +1,63 @@
+import { j as o } from "../jsx-runtime-DywqP_6a.js";
+import B from "react";
+import { Box as e } from "@mui/material";
+import { motion as p } from "framer-motion";
+import { useScrollAnimation as E } from "../hooks/use-scroll-animation.js";
+const F = ({
+  children: a,
+  duration: h = 0.6,
+  ease: v = "easeOut",
+  threshold: u,
+  rootMargin: x,
+  delay: t,
+  direction: j,
+  distance: R,
+  scale: s = !0,
+  rotate: r = !1,
+  stagger: i = !0,
+  staggerDelay: S = 0.1,
+  sx: b,
+  ...y
+}) => {
+  const { ref: C, animate: A, initialPosition: l, finalPosition: c } = E({
+    threshold: u,
+    rootMargin: x,
+    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 = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: i ? S : 0,
+        delayChildren: t ? t / 1e3 : 0
+      }
+    }
+  }, V = {
+    hidden: n,
+    visible: f
+  };
+  return /* @__PURE__ */ o.jsx(e, { sx: { overflow: "hidden", ...b }, ...y, children: /* @__PURE__ */ o.jsx(
+    e,
+    {
+      component: p.div,
+      ref: C,
+      variants: i ? P : void 0,
+      initial: i ? "hidden" : n,
+      animate: A ? i ? "visible" : f : i ? "hidden" : n,
+      transition: {
+        duration: h,
+        ease: v,
+        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
+    }
+  ) });
+};
+export {
+  F as default
+};

package/dist/s-typewriter-text/index.d.ts

@@ -0,0 +1,2 @@
+export type { STypewriterTextProps } from './s-typewriter-text';
+export { default } from './s-typewriter-text';

package/dist/s-typewriter-text/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-typewriter-text.js";
+export {
+  o as default
+};

package/dist/s-typewriter-text/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@solostylist/ui-kit/s-typewriter-text",
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.ts"
+}

package/dist/s-typewriter-text/s-typewriter-text.d.ts

@@ -0,0 +1,12 @@
+import { TypographyProps } from '@mui/material';
+export interface STypewriterTextProps extends Omit<TypographyProps, 'children'> {
+    text: string | string[];
+    speed?: number;
+    cursor?: string;
+    cursorBlinking?: boolean;
+    loop?: boolean;
+    deleteSpeed?: number;
+    delay?: number;
+}
+declare function STypewriterText({ text, speed, cursor, cursorBlinking, loop, deleteSpeed, delay, ...typographyProps }: STypewriterTextProps): import("react/jsx-runtime").JSX.Element;
+export default STypewriterText;

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

@@ -0,0 +1,44 @@
+import { j as y } from "../jsx-runtime-DywqP_6a.js";
+import { useState as n, useEffect as j } from "react";
+import { Typography as k, Box as D } from "@mui/material";
+function B({
+  text: r,
+  speed: c = 100,
+  cursor: T = "|",
+  cursorBlinking: g = !0,
+  loop: l = !1,
+  deleteSpeed: f = 50,
+  delay: u = 1500,
+  ...h
+}) {
+  const [s, x] = n(""), [i, m] = n(0), [o, p] = n(!1), [A, I] = n(0), a = Array.isArray(r) ? r : [r], t = a[A] || "";
+  return j(() => {
+    if (!t) return;
+    const d = setTimeout(
+      () => {
+        o ? s.length > 0 ? x((e) => e.slice(0, -1)) : (p(!1), m(0), I((e) => (e + 1) % a.length)) : i < t.length ? (x((e) => e + t[i]), m((e) => e + 1)) : l && setTimeout(() => p(!0), u);
+      },
+      o ? f : c
+    );
+    return () => clearTimeout(d);
+  }, [i, o, t, l, c, f, u, s, a.length]), /* @__PURE__ */ y.jsxs(k, { component: "span", ...h, children: [
+    s,
+    /* @__PURE__ */ y.jsx(
+      D,
+      {
+        component: "span",
+        sx: {
+          animation: g ? "blink 1s infinite" : "none",
+          "@keyframes blink": {
+            "0%, 50%": { opacity: 1 },
+            "51%, 100%": { opacity: 0 }
+          }
+        },
+        children: T
+      }
+    )
+  ] });
+}
+export {
+  B as default
+};

package/dist/theme/customizations/inputs.js

@@ -118,7 +118,6 @@ const u = l(/* @__PURE__ */ i.jsx("path", {
         fontWeight: 500,
         ...o.applyStyles("dark", {
           color: e[400],
-          boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)",
           [`&.${g.selected}`]: {
             color: r[300]
           }

package/dist/theme/theme-primitives.d.ts

@@ -118,6 +118,32 @@ export declare const purple: {
     800: string;
     900: string;
 };
+export declare const blackAlpha: {
+    0: string;
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const whiteAlpha: {
+    0: string;
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
 export declare const colorSchemes: {
     light: {
         palette: {
@@ -127,6 +153,20 @@ export declare const colorSchemes: {
                 indigo: string;
                 sky: string;
             };
+            blackAlpha: {
+                zero: string;
+                light: string;
+                medium: string;
+                dark: string;
+                full: string;
+            };
+            whiteAlpha: {
+                zero: string;
+                light: string;
+                medium: string;
+                dark: string;
+                full: string;
+            };
             ui: {
                 pulse: {
                     shadowLight: string;
@@ -201,6 +241,20 @@ export declare const colorSchemes: {
                 indigo: string;
                 sky: string;
             };
+            blackAlpha: {
+                zero: string;
+                light: string;
+                medium: string;
+                dark: string;
+                full: string;
+            };
+            whiteAlpha: {
+                zero: string;
+                light: string;
+                medium: string;
+                dark: string;
+                full: string;
+            };
             ui: {
                 pulse: {
                     shadowLight: string;