@wallarm-org/design-system 0.16.3 → 0.16.4

package/dist/components/Toast/Toast.d.ts

@@ -8,6 +8,7 @@ export interface ToastData {
     icon?: ReactNode;
     variant?: 'extended' | 'simple';
     closable?: boolean;
+    duration?: number;
     [key: string]: unknown;
 }
 export interface ToastProps {

package/dist/components/Toast/Toast.js

@@ -9,8 +9,9 @@ import { Loader } from "../Loader/index.js";
 import { ToastClose } from "./ToastClose.js";
 import { ToastDescription } from "./ToastDescription.js";
 import { ToastIcon } from "./ToastIcon.js";
+import { ToastProgress } from "./ToastProgress.js";
 import { ToastTitle } from "./ToastTitle.js";
-const toastVariants = cva('group relative flex min-w-[256px] max-w-[560px] items-start gap-12 rounded-12 bg-slate-800 p-12 pl-16 shadow-lg transition-all', {
+const toastVariants = cva('group relative flex min-w-[256px] max-w-[560px] items-start gap-12 rounded-16 bg-component-toast-bg p-12 pl-16 shadow-lg transition-all', {
     variants: {
         variant: {
             extended: 'flex-col',
@@ -39,6 +40,8 @@ const toastIconMap = {
         className: 'text-blue-500'
     }
 };
+const SIMPLE_TOAST_DURATION_MS = 5000;
+const EXTENDED_TOAST_DURATION_MS = 10000;
 const Toast_Toast = ({ toast })=>{
     const toastVariant = toast.variant || 'simple';
     const isSimple = 'simple' === toastVariant;
@@ -81,35 +84,40 @@ const Toast_Toast = ({ toast })=>{
         className: cn(toastVariants({
             variant: toastVariant
         })),
-        children: /*#__PURE__*/ jsx(TestIdProvider, {
+        children: /*#__PURE__*/ jsxs(TestIdProvider, {
             value: toast.id,
-            children: /*#__PURE__*/ jsxs("div", {
-                className: cn('flex w-full items-start gap-8 relative z-10'),
-                children: [
-                    toastIcon && /*#__PURE__*/ jsx(ToastIcon, {
-                        children: toastIcon
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: cn('flex-1 flex', isSimple ? 'flex-row gap-16 items-start' : 'flex-col gap-8'),
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "flex-1 py-2",
-                                children: [
-                                    toast.title && /*#__PURE__*/ jsx(ToastTitle, {
-                                        variant: toastVariant,
-                                        children: toast.title
-                                    }),
-                                    !isSimple && toast.description && /*#__PURE__*/ jsx(ToastDescription, {
-                                        children: toast.description
-                                    })
-                                ]
-                            }),
-                            toast.actions && toast.actions
-                        ]
-                    }),
-                    closable && /*#__PURE__*/ jsx(ToastClose, {})
-                ]
-            })
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: cn('flex w-full gap-8 relative z-10', isSimple ? 'items-center' : 'items-start'),
+                    children: [
+                        toastIcon && /*#__PURE__*/ jsx(ToastIcon, {
+                            children: toastIcon
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: cn('flex-1 flex', isSimple ? 'flex-row gap-16 items-center' : 'flex-col gap-8'),
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex-1 py-2",
+                                    children: [
+                                        toast.title && /*#__PURE__*/ jsx(ToastTitle, {
+                                            variant: toastVariant,
+                                            children: toast.title
+                                        }),
+                                        !isSimple && toast.description && /*#__PURE__*/ jsx(ToastDescription, {
+                                            children: toast.description
+                                        })
+                                    ]
+                                }),
+                                toast.actions && toast.actions
+                            ]
+                        }),
+                        closable && /*#__PURE__*/ jsx(ToastClose, {})
+                    ]
+                }),
+                'loading' !== toast.type && /*#__PURE__*/ jsx(ToastProgress, {
+                    duration: toast.duration ?? (isSimple ? SIMPLE_TOAST_DURATION_MS : EXTENDED_TOAST_DURATION_MS)
+                })
+            ]
         })
     }, toast.id);
 };

package/dist/components/Toast/ToastDescription.js

@@ -10,7 +10,7 @@ const ToastDescription = /*#__PURE__*/ forwardRef(({ children }, ref)=>{
             /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
                 children: /*#__PURE__*/ jsx(Text, {
                     ref: ref,
-                    size: "md",
+                    size: "sm",
                     color: "secondary-alt",
                     lineClamp: 4,
                     "data-testid": testId,

package/dist/components/Toast/ToastProgress.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface ToastProgressProps {
+    duration: number;
+}
+export declare const ToastProgress: FC<ToastProgressProps>;
+export {};

package/dist/components/Toast/ToastProgress.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+const ToastProgress = ({ duration })=>{
+    const [progress, setProgress] = useState(0);
+    const elapsedRef = useRef(0);
+    const lastTickRef = useRef(0);
+    const rafRef = useRef(0);
+    const containerRef = useRef(null);
+    const isPaused = useCallback(()=>{
+        const root = containerRef.current?.closest('[data-scope="toast"][data-part="root"]');
+        return root?.hasAttribute('data-paused') ?? false;
+    }, []);
+    useEffect(()=>{
+        lastTickRef.current = performance.now();
+        const tick = (now)=>{
+            if (!isPaused()) elapsedRef.current += now - lastTickRef.current;
+            lastTickRef.current = now;
+            const fraction = Math.min(elapsedRef.current / duration, 1);
+            setProgress(fraction);
+            if (fraction < 1) rafRef.current = requestAnimationFrame(tick);
+        };
+        rafRef.current = requestAnimationFrame(tick);
+        return ()=>cancelAnimationFrame(rafRef.current);
+    }, [
+        duration,
+        isPaused
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        className: cn('absolute inset-0 rounded-16 overflow-hidden pointer-events-none'),
+        children: /*#__PURE__*/ jsx("div", {
+            className: "h-full bg-states-primary-alt-default-alt transition-none",
+            style: {
+                width: `${100 * progress}%`
+            }
+        })
+    });
+};
+ToastProgress.displayName = 'ToastProgress';
+export { ToastProgress };

package/dist/components/Toast/ToastTitle.js

@@ -11,7 +11,7 @@ const ToastTitle = /*#__PURE__*/ forwardRef(({ children, variant = 'extended' },
             /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
                 children: /*#__PURE__*/ jsx(Text, {
                     ref: ref,
-                    size: "md",
+                    size: "sm",
                     weight: "medium",
                     color: "primary-alt",
                     lineClamp: isSimple ? 1 : 2,

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.2",
-  "generatedAt": "2026-03-27T11:04:52.776Z",
+  "version": "0.16.3",
+  "generatedAt": "2026-03-30T15:26:37.885Z",
   "components": [
     {
       "name": "Alert",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",