@solostylist/ui-kit 1.0.103 → 1.0.104

package/dist/hooks/use-scroll-animation.d.ts

@@ -0,0 +1,52 @@
+interface UseScrollAnimationOptions {
+    threshold?: number;
+    rootMargin?: string;
+    delay?: number;
+    direction?: 'up' | 'down' | 'left' | 'right';
+    distance?: number;
+}
+/**
+ * A React hook that provides scroll-triggered animation capabilities using Intersection Observer API.
+ *
+ * This hook monitors when an element enters the viewport and provides animation state and positioning
+ * data that can be used with CSS transitions, Framer Motion, or other animation libraries.
+ *
+ * @param options - Configuration options for the scroll animation
+ * @param options.threshold - A number between 0 and 1 indicating the percentage of the target that must be visible within the root element for the callback to be executed. Defaults to 0.1 (10%)
+ * @param options.rootMargin - Margin around the root element (similar to CSS margin). Defaults to '0px'
+ * @param options.delay - Delay in milliseconds before triggering the animation. Defaults to 0
+ * @param options.direction - The direction from which the element should animate in. Defaults to 'up'
+ * @param options.distance - The distance in pixels the element should animate from. Defaults to 50
+ *
+ * @returns An object containing:
+ *   - ref: React ref to attach to the target element
+ *   - isInView: Boolean indicating if the element is currently in view
+ *   - initialPosition: Object with initial x/y coordinates and opacity for animation
+ *   - finalPosition: Object with final x/y coordinates and opacity for animation
+ *   - animate: Boolean indicating if animation should be triggered (same as isInView)
+ *
+ */
+export declare function useScrollAnimation(options?: UseScrollAnimationOptions): {
+    ref: import('react').RefObject<HTMLElement | null>;
+    isInView: boolean;
+    initialPosition: {
+        y: number;
+        opacity: number;
+        x?: undefined;
+    } | {
+        x: number;
+        opacity: number;
+        y?: undefined;
+    };
+    finalPosition: {
+        y: number;
+        opacity: number;
+        x?: undefined;
+    } | {
+        x: number;
+        opacity: number;
+        y?: undefined;
+    };
+    animate: boolean;
+};
+export {};

package/dist/hooks/use-scroll-animation.js

@@ -0,0 +1,57 @@
+import { useState as m, useRef as f, useEffect as w } from "react";
+function I(p = {}) {
+  const { threshold: o = 0.1, rootMargin: s = "0px", delay: i = 0, direction: a = "up", distance: t = 50 } = p, [l, r] = m(!1), c = f(null), e = f(null);
+  w(() => {
+    if (!c.current) return;
+    if (!("IntersectionObserver" in window)) {
+      r(!0);
+      return;
+    }
+    const n = new IntersectionObserver(
+      ([u]) => {
+        u.isIntersecting ? (e.current && (clearTimeout(e.current), e.current = null), i > 0 ? e.current = setTimeout(() => {
+          r(!0), n.unobserve(u.target);
+        }, i) : (r(!0), n.unobserve(u.target))) : (e.current && (clearTimeout(e.current), e.current = null), r(!1));
+      },
+      { threshold: o, rootMargin: s }
+    );
+    return n.observe(c.current), () => {
+      e.current && (clearTimeout(e.current), e.current = null), n.disconnect();
+    };
+  }, [o, s, i]);
+  const y = () => {
+    switch (a) {
+      case "up":
+        return { y: t, opacity: 0 };
+      case "down":
+        return { y: -t, opacity: 0 };
+      case "left":
+        return { x: t, opacity: 0 };
+      case "right":
+        return { x: -t, opacity: 0 };
+      default:
+        return { y: t, opacity: 0 };
+    }
+  }, d = () => {
+    switch (a) {
+      case "up":
+      case "down":
+        return { y: 0, opacity: 1 };
+      case "left":
+      case "right":
+        return { x: 0, opacity: 1 };
+      default:
+        return { y: 0, opacity: 1 };
+    }
+  };
+  return {
+    ref: c,
+    isInView: l,
+    initialPosition: y(),
+    finalPosition: d(),
+    animate: l
+  };
+}
+export {
+  I as useScrollAnimation
+};

package/dist/main.d.ts

@@ -82,6 +82,8 @@ export { default as SGlowButton } from './s-glow-button/index';
 export type { SGlowButtonProps } from './s-glow-button/index';
 export { default as SMovingBorder } from './s-moving-border/index';
 export type { SMovingBorderProps } from './s-moving-border/index';
+export { default as SScrollReveal } from './s-scroll-reveal/index';
+export type { SScrollRevealProps } from './s-scroll-reveal/index';
 export { default as SSpotlightCursor } from './s-spotlight-cursor/index';
 export type { SSpotlightCursorProps, SpotlightConfig } from './s-spotlight-cursor/index';
 export { default as SCopyableText } from './s-copyable-text/index';
@@ -105,5 +107,7 @@ export { STabs, STab, STabPanel } from './s-tabs/index';
 export type { STabsProps, STabItem, STabProps, STabPanelProps } from './s-tabs/index';
 export { default as STextShimmer } from './s-text-shimmer/index';
 export type { STextShimmerProps } from './s-text-shimmer/index';
+export { default as STypewriterText } from './s-typewriter-text/index';
+export type { STypewriterTextProps } from './s-typewriter-text/index';
 export * from './hooks';
 export * from './utils';

package/dist/main.js

@@ -2,19 +2,19 @@ import { default as t } from "./s-accordion/s-accordion.js";
 import { default as f } from "./s-autocomplete/s-autocomplete.js";
 import { default as s } from "./s-avatar/s-avatar.js";
 import { default as p } from "./s-button/s-button.js";
-import { default as S } from "./s-button-link/s-button-link.js";
-import { default as x } from "./s-carousel/s-carousel.js";
+import { default as d } from "./s-button-link/s-button-link.js";
+import { default as u } from "./s-carousel/s-carousel.js";
 import { default as n } from "./s-chat-input/s-chat-input.js";
 import { default as c } from "./s-chat-message/s-chat-message.js";
 import { default as C } from "./s-text-editor/s-text-editor.js";
 import "./s-text-editor/s-text-editor-toolbar.js";
-import { default as v } from "./s-checkbox/s-checkbox.js";
+import { default as P } from "./s-checkbox/s-checkbox.js";
 import { default as b } from "./s-chip/s-chip.js";
 import { default as I } from "./s-chips/s-chips.js";
 import { default as k } from "./s-data-table/s-data-table.js";
-import { DialogConfirmProvider as y, default as F, useDialogConfirm as B } from "./s-dialog-confirm/s-dialog-confirm.js";
-import { DialogMessageProvider as A, default as E, useDialogMessage as G } from "./s-dialog-message/s-dialog-message.js";
-import { default as w } from "./s-error/s-error.js";
+import { DialogConfirmProvider as L, default as F, useDialogConfirm as B } from "./s-dialog-confirm/s-dialog-confirm.js";
+import { DialogMessageProvider as A, default as E, useDialogMessage as R } from "./s-dialog-message/s-dialog-message.js";
+import { default as G } from "./s-error/s-error.js";
 import { default as j } from "./s-empty/s-empty.js";
 import { default as V } from "./s-dialog/s-dialog.js";
 import { default as H } from "./s-file-dropzone/s-file-dropzone.js";
@@ -28,58 +28,60 @@ import { default as te } from "./s-text-field/s-text-field.js";
 import { default as fe } from "./s-pagination/s-pagination.js";
 import { default as se } from "./s-select/s-select.js";
 import { default as pe } from "./s-skeleton/s-skeleton.js";
-import { default as Se } from "./s-tip/s-tip.js";
-import { default as xe } from "./s-text-truncation/s-text-truncation.js";
+import { default as de } from "./s-tip/s-tip.js";
+import { default as ue } from "./s-text-truncation/s-text-truncation.js";
 import { default as ne, SnackbarMessageProvider as ge, useSnackbarMessage as ce } from "./s-snackbar-message/s-snackbar-message.js";
 import { default as Ce } from "./s-form/s-form.js";
-import { SSmartTextField as ve } from "./s-smart-text-field/s-smart-text-field.js";
+import { SSmartTextField as Pe } from "./s-smart-text-field/s-smart-text-field.js";
 import { SCopilotKitProvider as be } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as Ie, SStripeExpiry as he, SStripeNumber as ke, StripeTextField as Le } from "./s-stripe/s-stripe.js";
+import { SStripeCVC as Ie, SStripeExpiry as he, SStripeNumber as ke, StripeTextField as ye } from "./s-stripe/s-stripe.js";
 import { default as Fe } from "./s-theme-provider/s-theme-provider.js";
 import { default as ze } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as Ee } from "./s-date-picker/s-date-picker.js";
-import { default as Re } from "./s-localization-provider/s-localization-provider.js";
+import { default as we } from "./s-localization-provider/s-localization-provider.js";
 import { default as Ne } from "./s-gradient-icon/s-gradient-icon.js";
 import { default as Ke } from "./s-glow-button/s-glow-button.js";
 import { default as qe } from "./s-moving-border/s-moving-border.js";
-import { default as Je } from "./s-spotlight-cursor/s-spotlight-cursor.js";
-import { default as Qe } from "./s-copyable-text/s-copyable-text.js";
-import { MediaItem as We, default as Xe } from "./s-interactive-gallery/s-interactive-gallery.js";
-import { default as Ze } from "./s-image-modal/s-image-modal.js";
-import { default as $e } from "./s-lazy-image/s-lazy-image.js";
-import { default as oo } from "./s-image-comparison/s-image-comparison.js";
-import { default as to } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
-import { default as fo } from "./s-rating/s-rating.js";
-import { default as so } from "./s-review/s-review.js";
-import { default as po } from "./s-tabs/s-tabs.js";
-import { default as uo } from "./s-tabs/s-tab.js";
-import { default as io } from "./s-tabs/s-tab-panel.js";
-import { default as go } from "./s-text-shimmer/s-text-shimmer.js";
-import { useDialog as To } from "./hooks/use-dialog.js";
-import { usePopover as Po } from "./hooks/use-popover.js";
-import { formatDatePosted as Do } from "./utils/dayjs.js";
-import { bytesToSize as Mo } from "./utils/bytes-to-size.js";
-import { LogLevel as ho, Logger as ko, createLogger as Lo, logger as yo } from "./utils/logger.js";
-import { default as Bo } from "dayjs";
+import { default as Je } from "./s-scroll-reveal/s-scroll-reveal.js";
+import { default as Qe } from "./s-spotlight-cursor/s-spotlight-cursor.js";
+import { default as We } from "./s-copyable-text/s-copyable-text.js";
+import { MediaItem as Ye, default as Ze } from "./s-interactive-gallery/s-interactive-gallery.js";
+import { default as $e } from "./s-image-modal/s-image-modal.js";
+import { default as oo } from "./s-lazy-image/s-lazy-image.js";
+import { default as to } from "./s-image-comparison/s-image-comparison.js";
+import { default as fo } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
+import { default as so } from "./s-rating/s-rating.js";
+import { default as po } from "./s-review/s-review.js";
+import { default as xo } from "./s-tabs/s-tabs.js";
+import { default as io } from "./s-tabs/s-tab.js";
+import { default as go } from "./s-tabs/s-tab-panel.js";
+import { default as To } from "./s-text-shimmer/s-text-shimmer.js";
+import { default as vo } from "./s-typewriter-text/s-typewriter-text.js";
+import { useDialog as Do } from "./hooks/use-dialog.js";
+import { usePopover as Mo } from "./hooks/use-popover.js";
+import { formatDatePosted as ho } from "./utils/dayjs.js";
+import { bytesToSize as yo } from "./utils/bytes-to-size.js";
+import { LogLevel as Fo, Logger as Bo, createLogger as zo, logger as Ao } from "./utils/logger.js";
+import { default as Ro } from "dayjs";
 export {
-  y as DialogConfirmProvider,
+  L as DialogConfirmProvider,
   A as DialogMessageProvider,
-  ho as LogLevel,
-  ko as Logger,
-  We as MediaItem,
+  Fo as LogLevel,
+  Bo as Logger,
+  Ye as MediaItem,
   t as SAccordion,
   f as SAutocomplete,
   s as SAvatar,
   p as SButton,
-  S as SButtonLink,
-  x as SCarousel,
+  d as SButtonLink,
+  u as SCarousel,
   n as SChatInput,
   c as SChatMessage,
-  v as SCheckbox,
+  P as SCheckbox,
   b as SChip,
   I as SChips,
   be as SCopilotKitProvider,
-  Qe as SCopyableText,
+  We as SCopyableText,
   k as SDataTable,
   Ee as SDatePicker,
   ze as SDateTimePicker,
@@ -87,7 +89,7 @@ export {
   F as SDialogConfirm,
   E as SDialogMessage,
   j as SEmpty,
-  w as SError,
+  G as SError,
   H as SFileDropzone,
   O as SFileIcon,
   Ce as SForm,
@@ -95,46 +97,48 @@ export {
   Ne as SGradientIcon,
   U as SI18nProvider,
   X as SIconButton,
-  oo as SImageComparison,
-  Ze as SImageModal,
-  Xe as SInteractiveGallery,
+  to as SImageComparison,
+  $e as SImageModal,
+  Ze as SInteractiveGallery,
   Z as SLabel,
-  $e as SLazyImage,
-  Re as SLocalizationProvider,
+  oo as SLazyImage,
+  we as SLocalizationProvider,
   qe as SMovingBorder,
   $ as SMultiSelect,
   oe as SNoSsr,
   fe as SPagination,
-  to as SRadialPulseAnimate,
-  fo as SRating,
-  so as SReview,
+  fo as SRadialPulseAnimate,
+  so as SRating,
+  po as SReview,
+  Je as SScrollReveal,
   se as SSelect,
   pe as SSkeleton,
-  ve as SSmartTextField,
+  Pe as SSmartTextField,
   ne as SSnackbarMessage,
-  Je as SSpotlightCursor,
+  Qe as SSpotlightCursor,
   Ie as SStripeCVC,
   he as SStripeExpiry,
   ke as SStripeNumber,
-  uo as STab,
-  io as STabPanel,
-  po as STabs,
+  io as STab,
+  go as STabPanel,
+  xo as STabs,
   C as STextEditor,
   te as STextField,
-  go as STextShimmer,
-  xe as STextTruncation,
+  To as STextShimmer,
+  ue as STextTruncation,
   Fe as SThemeProvider,
-  Se as STip,
+  de as STip,
+  vo as STypewriterText,
   ge as SnackbarMessageProvider,
-  Le as StripeTextField,
-  Mo as bytesToSize,
-  Lo as createLogger,
-  Bo as dayjs,
-  Do as formatDatePosted,
-  yo as logger,
-  To as useDialog,
+  ye as StripeTextField,
+  yo as bytesToSize,
+  zo as createLogger,
+  Ro as dayjs,
+  ho as formatDatePosted,
+  Ao as logger,
+  Do as useDialog,
   B as useDialogConfirm,
-  G as useDialogMessage,
-  Po as usePopover,
+  R as useDialogMessage,
+  Mo as usePopover,
   ce as useSnackbarMessage
 };

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

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

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

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

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

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

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-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/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.103",
+  "version": "1.0.104",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",