@umituz/web-design-system 4.3.0 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "private": false,
   "type": "module",
   "description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",

package/src/__tests__/components.smoke.test.tsx

@@ -4,7 +4,7 @@
  * styles contract test).
  */
 
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { Button } from '../presentation/atoms/Button';
 import { Badge } from '../presentation/atoms/Badge';
@@ -104,6 +104,40 @@ describe('organisms', () => {
     expect(screen.getByText('Saved').closest('div')?.parentElement?.className).toContain('border-l-success');
   });
 
+  it('ToastProvider honors maxVisible and duration overrides', () => {
+    vi.useFakeTimers();
+    function Burst() {
+      const { toast } = useToast();
+      return (
+        <button
+          type="button"
+          onClick={() => {
+            toast({ kind: 'info', title: 'One' });
+            toast({ kind: 'info', title: 'Two' });
+            toast({ kind: 'info', title: 'Three' });
+          }}
+        >
+          burst
+        </button>
+      );
+    }
+    render(
+      <ToastProvider maxVisible={2} duration={500}>
+        <Burst />
+      </ToastProvider>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'burst' }));
+    });
+    expect(screen.queryByText('One')).toBeNull();
+    expect(screen.getByText('Two')).toBeTruthy();
+    act(() => {
+      vi.advanceTimersByTime(600);
+    });
+    expect(screen.queryByText('Two')).toBeNull();
+    vi.useRealTimers();
+  });
+
   it('KeyValueList renders label/value pairs in a definition list', () => {
     render(
       <KeyValueList

package/src/presentation/organisms/Toaster.tsx

@@ -43,9 +43,11 @@ const kindMeta: Record<ToastKind, { icon: typeof CheckCircle2; accent: string; i
 
 export interface ToastProviderProps {
   children: ReactNode;
+  maxVisible?: number;
+  duration?: number;
 }
 
-export function ToastProvider({ children }: ToastProviderProps) {
+export function ToastProvider({ children, maxVisible = 4, duration = 4200 }: ToastProviderProps) {
   const [toasts, setToasts] = useState<ToastEntry[]>([]);
   const counter = useRef(0);
 
@@ -56,10 +58,10 @@ export function ToastProvider({ children }: ToastProviderProps) {
   const toast = useCallback(
     (t: ToastOptions) => {
       const id = ++counter.current;
-      setToasts((list) => [...list.slice(-3), { id, ...t }]);
-      setTimeout(() => dismiss(id), 4200);
+      setToasts((list) => [...list.slice(-(maxVisible - 1)), { id, ...t }]);
+      setTimeout(() => dismiss(id), duration);
     },
-    [dismiss],
+    [dismiss, maxVisible, duration],
   );
 
   const value = useMemo(() => ({ toast }), [toast]);
@@ -68,6 +70,7 @@ export function ToastProvider({ children }: ToastProviderProps) {
     <ToastContext.Provider value={value}>
       {children}
       <div
+        role="status"
         aria-live="polite"
         className="pointer-events-none fixed bottom-4 right-4 z-[100] flex w-[340px] max-w-[calc(100vw-2rem)] flex-col gap-2"
       >