@szum-tech/design-system 3.9.0 → 3.10.1

package/dist/components/toaster/index.cjs

@@ -1,40 +1,47 @@
 'use strict';
 
-var chunkXTNS5QH5_cjs = require('../../chunk-XTNS5QH5.cjs');
+var chunkEG374TED_cjs = require('../../chunk-EG374TED.cjs');
+require('../../chunk-D4QID7AI.cjs');
+require('../../chunk-A7SBXO2Y.cjs');
+require('../../chunk-EUH466AL.cjs');
+require('../../chunk-DGWBE2Y3.cjs');
+require('../../chunk-TMXVL5CV.cjs');
+require('../../chunk-XJZOANXX.cjs');
 require('../../chunk-GHV2TURY.cjs');
 require('../../chunk-3WSQRFUY.cjs');
+require('../../chunk-GYXQUTWZ.cjs');
+require('../../chunk-YEFLGE3L.cjs');
 require('../../chunk-NU5UQPBX.cjs');
-require('../../chunk-A7SBXO2Y.cjs');
 require('../../chunk-6X26XC6P.cjs');
 require('../../chunk-5AA4IE2T.cjs');
 require('../../chunk-CFJ44JVK.cjs');
+require('../../chunk-2WQJ36RD.cjs');
 require('../../chunk-TH44JYXB.cjs');
 require('../../chunk-XENOUBSI.cjs');
 require('../../chunk-UJX74PFK.cjs');
-require('../../chunk-XJZOANXX.cjs');
-require('../../chunk-ZVF7J4EI.cjs');
 require('../../chunk-2Y2ZCPNV.cjs');
 require('../../chunk-HCHVDUI6.cjs');
 require('../../chunk-ULEEQ723.cjs');
+require('../../chunk-USIW3VT5.cjs');
 require('../../chunk-VK5EX3OG.cjs');
 require('../../chunk-CXHDWIGF.cjs');
 require('../../chunk-DTYX7CYN.cjs');
 require('../../chunk-UIOBJSKZ.cjs');
 require('../../chunk-S3ANEJJ7.cjs');
-require('../../chunk-EW6TE3N5.cjs');
 require('../../chunk-7EYMOUWG.cjs');
+require('../../chunk-F7N6WQV6.cjs');
 require('../../chunk-3GNVQFCK.cjs');
-require('../../chunk-TMXVL5CV.cjs');
 require('../../chunk-I7AV5IQO.cjs');
+require('../../chunk-ZVF7J4EI.cjs');
 require('../../chunk-H2BWO3SI.cjs');
 
 
 
 Object.defineProperty(exports, "Toaster", {
   enumerable: true,
-  get: function () { return chunkXTNS5QH5_cjs.Toaster; }
+  get: function () { return chunkEG374TED_cjs.Toaster; }
 });
 Object.defineProperty(exports, "toast", {
   enumerable: true,
-  get: function () { return chunkXTNS5QH5_cjs.toast; }
+  get: function () { return chunkEG374TED_cjs.toast; }
 });

package/dist/components/toaster/index.js

@@ -1,27 +1,34 @@
-export { Toaster, toast } from '../../chunk-PHPJ54IC.js';
+export { Toaster, toast } from '../../chunk-JLKQ6WKK.js';
+import '../../chunk-YSYZKK24.js';
+import '../../chunk-U7XZJQ4O.js';
+import '../../chunk-WMGJCB7O.js';
+import '../../chunk-K5AURCK5.js';
+import '../../chunk-5MJPZUTO.js';
+import '../../chunk-E5TYGWGE.js';
 import '../../chunk-DTSFPOLX.js';
 import '../../chunk-P5IUC7HJ.js';
+import '../../chunk-IWF52DDE.js';
+import '../../chunk-OCOCENE6.js';
 import '../../chunk-OQCNPNPS.js';
-import '../../chunk-U7XZJQ4O.js';
 import '../../chunk-VT5GDGZJ.js';
 import '../../chunk-UGSNASZM.js';
 import '../../chunk-KGGCA634.js';
+import '../../chunk-YUMKV5TH.js';
 import '../../chunk-PBEZZMAB.js';
 import '../../chunk-4TRADSTP.js';
 import '../../chunk-M7NIRB3U.js';
-import '../../chunk-E5TYGWGE.js';
-import '../../chunk-U3QKV7I4.js';
 import '../../chunk-6BSR3O2J.js';
 import '../../chunk-5F2Y65JH.js';
 import '../../chunk-3RK5PCIC.js';
+import '../../chunk-P4JIMFSL.js';
 import '../../chunk-BTSHACKG.js';
 import '../../chunk-HNRVLRMN.js';
 import '../../chunk-3MH6P44N.js';
 import '../../chunk-XJIUGEPN.js';
 import '../../chunk-I3RSTJP6.js';
-import '../../chunk-H5O5L6XT.js';
 import '../../chunk-DFD2WUOU.js';
+import '../../chunk-R65CJGEQ.js';
 import '../../chunk-5MV54MWS.js';
-import '../../chunk-5MJPZUTO.js';
 import '../../chunk-NGVFYKAT.js';
+import '../../chunk-U3QKV7I4.js';
 import '../../chunk-ZD2QRAOX.js';

package/dist/components/typing-text/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunkEUH466AL_cjs = require('../../chunk-EUH466AL.cjs');
+require('../../chunk-H2BWO3SI.cjs');
+
+
+
+Object.defineProperty(exports, "TypingText", {
+  enumerable: true,
+  get: function () { return chunkEUH466AL_cjs.TypingText; }
+});

package/dist/components/typing-text/index.d.cts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps, UseInViewOptions } from 'motion/react';
+
+type TypingTextProps = Omit<MotionProps, "children"> & {
+    /** Text to animate */
+    text?: string;
+    /** Array of texts to cycle through */
+    texts?: string[];
+    /** Typing speed in milliseconds */
+    speed?: number;
+    /** Delay before starting animation */
+    delay?: number;
+    /** Whether to show cursor */
+    showCursor?: boolean;
+    /** Cursor character */
+    cursor?: string;
+    /** Cursor className */
+    cursorClassName?: string;
+    /** Whether to loop through texts */
+    loop?: boolean;
+    /** Pause duration between loops */
+    pauseDuration?: number;
+    /** Custom className */
+    className?: string;
+    /** Callback when typing completes */
+    onComplete?: () => void;
+    /** Whether to start animation when component enters viewport */
+    startOnView?: boolean;
+    /** Whether to animate only once */
+    once?: boolean;
+    /** The animation preset to use */
+    animation?: TypingTextAnimationVariant;
+    /** Margin for in-view detection (rootMargin) */
+    inViewMargin?: UseInViewOptions["margin"];
+};
+declare function TypingText({ text, texts, speed, delay, showCursor, cursorClassName, cursor, loop, pauseDuration, className, onComplete, startOnView, once, animation, inViewMargin, ...props }: TypingTextProps): react_jsx_runtime.JSX.Element;
+
+type TypingTextAnimationVariant = "fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown";
+
+export { TypingText, type TypingTextAnimationVariant, type TypingTextProps };

package/dist/components/typing-text/index.d.ts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps, UseInViewOptions } from 'motion/react';
+
+type TypingTextProps = Omit<MotionProps, "children"> & {
+    /** Text to animate */
+    text?: string;
+    /** Array of texts to cycle through */
+    texts?: string[];
+    /** Typing speed in milliseconds */
+    speed?: number;
+    /** Delay before starting animation */
+    delay?: number;
+    /** Whether to show cursor */
+    showCursor?: boolean;
+    /** Cursor character */
+    cursor?: string;
+    /** Cursor className */
+    cursorClassName?: string;
+    /** Whether to loop through texts */
+    loop?: boolean;
+    /** Pause duration between loops */
+    pauseDuration?: number;
+    /** Custom className */
+    className?: string;
+    /** Callback when typing completes */
+    onComplete?: () => void;
+    /** Whether to start animation when component enters viewport */
+    startOnView?: boolean;
+    /** Whether to animate only once */
+    once?: boolean;
+    /** The animation preset to use */
+    animation?: TypingTextAnimationVariant;
+    /** Margin for in-view detection (rootMargin) */
+    inViewMargin?: UseInViewOptions["margin"];
+};
+declare function TypingText({ text, texts, speed, delay, showCursor, cursorClassName, cursor, loop, pauseDuration, className, onComplete, startOnView, once, animation, inViewMargin, ...props }: TypingTextProps): react_jsx_runtime.JSX.Element;
+
+type TypingTextAnimationVariant = "fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown";
+
+export { TypingText, type TypingTextAnimationVariant, type TypingTextProps };

package/dist/components/typing-text/index.js

@@ -0,0 +1,2 @@
+export { TypingText } from '../../chunk-WMGJCB7O.js';
+import '../../chunk-ZD2QRAOX.js';

package/dist/components/word-rotate/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunkDGWBE2Y3_cjs = require('../../chunk-DGWBE2Y3.cjs');
+require('../../chunk-H2BWO3SI.cjs');
+
+
+
+Object.defineProperty(exports, "WordRotate", {
+  enumerable: true,
+  get: function () { return chunkDGWBE2Y3_cjs.WordRotate; }
+});

package/dist/components/word-rotate/index.d.cts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps, UseInViewOptions } from 'motion/react';
+
+type WordRotateProps = Omit<MotionProps, "children"> & {
+    words: string[];
+    /** Duration in ms each word is visible */
+    duration?: number;
+    /** Animation style for word transitions */
+    animationStyle?: WordRotateAnimationStyle;
+    /** Whether to loop through words */
+    loop?: boolean;
+    /** Duration in ms between word transitions */
+    pauseDuration?: number;
+    /** Custom className for the word */
+    className?: string;
+    /** Custom className for the container */
+    containerClassName?: string;
+    /** Whether to start animation when component enters viewport */
+    startOnView?: boolean;
+    /** Whether to animate only once */
+    once?: boolean;
+    /** Margin for in-view detection (rootMargin) */
+    inViewMargin?: UseInViewOptions["margin"];
+};
+declare function WordRotate({ words, duration, animationStyle, loop, className, containerClassName, pauseDuration, startOnView, once, inViewMargin, ...props }: WordRotateProps): react_jsx_runtime.JSX.Element;
+
+type WordRotateAnimationStyle = "fade" | "slide-up" | "slide-down" | "scale" | "flip";
+
+export { WordRotate, type WordRotateAnimationStyle, type WordRotateProps };

package/dist/components/word-rotate/index.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MotionProps, UseInViewOptions } from 'motion/react';
+
+type WordRotateProps = Omit<MotionProps, "children"> & {
+    words: string[];
+    /** Duration in ms each word is visible */
+    duration?: number;
+    /** Animation style for word transitions */
+    animationStyle?: WordRotateAnimationStyle;
+    /** Whether to loop through words */
+    loop?: boolean;
+    /** Duration in ms between word transitions */
+    pauseDuration?: number;
+    /** Custom className for the word */
+    className?: string;
+    /** Custom className for the container */
+    containerClassName?: string;
+    /** Whether to start animation when component enters viewport */
+    startOnView?: boolean;
+    /** Whether to animate only once */
+    once?: boolean;
+    /** Margin for in-view detection (rootMargin) */
+    inViewMargin?: UseInViewOptions["margin"];
+};
+declare function WordRotate({ words, duration, animationStyle, loop, className, containerClassName, pauseDuration, startOnView, once, inViewMargin, ...props }: WordRotateProps): react_jsx_runtime.JSX.Element;
+
+type WordRotateAnimationStyle = "fade" | "slide-up" | "slide-down" | "scale" | "flip";
+
+export { WordRotate, type WordRotateAnimationStyle, type WordRotateProps };

package/dist/components/word-rotate/index.js

@@ -0,0 +1,2 @@
+export { WordRotate } from '../../chunk-K5AURCK5.js';
+import '../../chunk-ZD2QRAOX.js';

package/dist/direction-CUOPDLCj.d.cts

@@ -0,0 +1,7 @@
+declare const Direction: {
+    readonly LTR: "ltr";
+    readonly RTL: "rtl";
+};
+type Direction = (typeof Direction)[keyof typeof Direction];
+
+export { Direction as D };

package/dist/direction-CUOPDLCj.d.ts

@@ -0,0 +1,7 @@
+declare const Direction: {
+    readonly LTR: "ltr";
+    readonly RTL: "rtl";
+};
+type Direction = (typeof Direction)[keyof typeof Direction];
+
+export { Direction as D };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@szum-tech/design-system",
-  "version": "3.9.0",
+  "version": "3.10.1",
   "description": "Szum-Tech design system with tailwindcss support",
   "keywords": [
     "szum-tech",
@@ -78,16 +78,6 @@
         "require": "./dist/hooks/index.cjs"
       }
     },
-    "./contexts": {
-      "import": {
-        "types": "./dist/contexts/index.d.ts",
-        "import": "./dist/contexts/index.js"
-      },
-      "require": {
-        "types": "./dist/contexts/index.d.cts",
-        "require": "./dist/contexts/index.cjs"
-      }
-    },
     "./tailwind/*.css": "./tailwind/*.css",
     "./package.json": "./package.json"
   },
@@ -123,53 +113,54 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
+    "motion": "^12.27.1",
     "radix-ui": "^1.4.3",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@storybook-community/storybook-dark-mode": "^7.0.3",
-    "@storybook/addon-a11y": "^10.1.4",
-    "@storybook/addon-docs": "^10.1.4",
-    "@storybook/addon-vitest": "^10.1.4",
-    "@storybook/builder-vite": "^10.1.4",
-    "@storybook/react-vite": "^10.1.4",
+    "@storybook-community/storybook-dark-mode": "^7.1.0",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/builder-vite": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
     "@szum-tech/eslint-config": "^2.1.15",
-    "@szum-tech/prettier-config": "^1.6.2",
-    "@szum-tech/semantic-release-config": "^2.3.1",
-    "@tailwindcss/vite": "^4.1.11",
+    "@szum-tech/prettier-config": "^1.6.5",
+    "@szum-tech/semantic-release-config": "^2.3.7",
+    "@tailwindcss/vite": "^4.1.18",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/browser": "^4.0.13",
-    "@vitest/browser-playwright": "^4.0.15",
-    "@vitest/coverage-v8": "^4.0.15",
-    "@vitest/ui": "^4.0.15",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.17",
+    "@vitest/ui": "^4.0.17",
     "cpy-cli": "^6.0.0",
-    "eslint": "^9.39.1",
-    "happy-dom": "^20.1.0",
-    "playwright": "^1.56.1",
-    "prettier": "^3.7.4",
-    "react": "^19.2.1",
-    "react-docgen": "^8.0.0",
+    "eslint": "^9.39.2",
+    "happy-dom": "^20.3.3",
+    "playwright": "^1.57.0",
+    "prettier": "^3.8.0",
+    "react": "^19.2.3",
+    "react-docgen": "^8.0.2",
     "react-docgen-typescript": "^2.4.0",
-    "react-dom": "^19.2.1",
+    "react-dom": "^19.2.3",
     "semantic-release": "^25.0.2",
-    "serve": "^14.2.4",
-    "storybook": "^10.1.4",
-    "storybook-addon-tag-badges": "^3.0.2",
-    "tailwindcss": "^4.1.11",
+    "serve": "^14.2.5",
+    "storybook": "^10.1.11",
+    "storybook-addon-tag-badges": "^3.0.4",
+    "tailwindcss": "^4.1.18",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "vite": "^7.2.4",
-    "vite-tsconfig-paths": "^6.0.3",
-    "vitest": "^4.0.15"
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.0.4",
+    "vitest": "^4.0.17"
   },
   "peerDependencies": {
     "react": ">=19",

package/tailwind/animation.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@theme {
+@theme inline {
   /* Components */
   /* Tooltip */
   --animate-slideDownAndFade: slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -50,4 +50,26 @@
       transform: translateX(0);
     }
   }
+
+  /* Marquee */
+  --animate-marquee: marquee var(--duration) infinite linear;
+  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+
+  @keyframes marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+  }
+
+  @keyframes marquee-vertical {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
+  }
 }

package/tailwind/palette.css

@@ -6,7 +6,7 @@
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
 
-  --primary: var(--color-blue-700);
+  --primary: var(--color-blue-600);
   --primary-foreground: var(--color-blue-50);
 
   --secondary: oklch(0.97 0 0);
@@ -59,7 +59,7 @@
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
 
-  --primary: var(--color-blue-700);
+  --primary: var(--color-blue-600);
   --primary-foreground: var(--color-blue-50);
 
   --secondary: oklch(0.269 0 0);

package/dist/chunk-EW6TE3N5.cjs

@@ -1,38 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-// src/contexts/directon.tsx
-var Direction = {
-  LTR: "ltr",
-  RTL: "rtl"
-};
-var DirectionContext = React__namespace.createContext(void 0);
-function useDirection(dirProp) {
-  const contextDir = React__namespace.useContext(DirectionContext);
-  return dirProp ?? contextDir ?? Direction.LTR;
-}
-
-exports.Direction = Direction;
-exports.DirectionContext = DirectionContext;
-exports.useDirection = useDirection;

package/dist/chunk-H5O5L6XT.js

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-// src/contexts/directon.tsx
-var Direction = {
-  LTR: "ltr",
-  RTL: "rtl"
-};
-var DirectionContext = React.createContext(void 0);
-function useDirection(dirProp) {
-  const contextDir = React.useContext(DirectionContext);
-  return dirProp ?? contextDir ?? Direction.LTR;
-}
-
-export { Direction, DirectionContext, useDirection };

package/dist/contexts/index.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var chunkEW6TE3N5_cjs = require('../chunk-EW6TE3N5.cjs');
-
-
-
-Object.defineProperty(exports, "Direction", {
-  enumerable: true,
-  get: function () { return chunkEW6TE3N5_cjs.Direction; }
-});
-Object.defineProperty(exports, "DirectionContext", {
-  enumerable: true,
-  get: function () { return chunkEW6TE3N5_cjs.DirectionContext; }
-});
-Object.defineProperty(exports, "useDirection", {
-  enumerable: true,
-  get: function () { return chunkEW6TE3N5_cjs.useDirection; }
-});

package/dist/contexts/index.d.cts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-declare const Direction: {
-    readonly LTR: "ltr";
-    readonly RTL: "rtl";
-};
-type Direction = (typeof Direction)[keyof typeof Direction];
-declare const DirectionContext: React.Context<Direction | undefined>;
-declare function useDirection(dirProp?: Direction): Direction;
-
-export { Direction, DirectionContext, useDirection };

package/dist/contexts/index.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-declare const Direction: {
-    readonly LTR: "ltr";
-    readonly RTL: "rtl";
-};
-type Direction = (typeof Direction)[keyof typeof Direction];
-declare const DirectionContext: React.Context<Direction | undefined>;
-declare function useDirection(dirProp?: Direction): Direction;
-
-export { Direction, DirectionContext, useDirection };

package/dist/contexts/index.js

@@ -1 +0,0 @@
-export { Direction, DirectionContext, useDirection } from '../chunk-H5O5L6XT.js';