@undefine-ui/design-system 3.1.0 → 3.2.0

package/README.md

@@ -77,7 +77,7 @@ Storybook (`pnpm dev:storybook`) documents each component and token surface.
 
 ### Icon library
 
-The package includes a comprehensive icon library with 40+ SVG icons organized by category.
+The package includes a comprehensive icon library with 45+ SVG icons organized by category.
 
 **Available icons:**
 
@@ -89,6 +89,7 @@ The package includes a comprehensive icon library with 40+ SVG icons organized b
 - **Visibility:** Eye, EyeClosed
 - **Date & Time:** Calendar, Clock
 - **Data:** SortUp, SortDown, StatUp, StatDown
+- **Toast:** InfoToast, SuccessToast, WarningToast, ErrorToast
 - **System:** KeyCommand
 
 **Usage:**
@@ -232,6 +233,83 @@ import { Image } from '@undefine-ui/design-system';
 - Use `srcSet` with appropriate sizes for optimal image delivery
 - Set `observerMargin="400px"` to preload images slightly before viewport
 
+### Toast Notifications
+
+Toast notifications powered by [Sonner](https://sonner.emilkowal.ski/) with Define styling. Supports success, error, warning, info variants with optional descriptions and action buttons.
+
+**Setup:**
+
+Add the `Toast` component once at the root of your application:
+
+```tsx
+import {
+  SettingsProvider,
+  defaultSettings,
+  ThemeProvider,
+  Toast
+} from '@undefine-ui/design-system';
+
+export function App({ children }: { children: React.ReactNode }) {
+  return (
+    <SettingsProvider settings={defaultSettings}>
+      <ThemeProvider>
+        <Toast />
+        {children}
+      </ThemeProvider>
+    </SettingsProvider>
+  );
+}
+```
+
+**Usage:**
+
+```tsx
+import { toast } from '@undefine-ui/design-system';
+
+// Basic toast
+toast('This is a basic toast');
+
+// Variants
+toast.success('Success Notification');
+toast.error('Error Notification');
+toast.warning('Warning Notification');
+toast.info('Information Notification');
+toast.loading('Loading...');
+
+// With description
+toast.success('Event created', {
+  description: 'Your event has been created successfully'
+});
+
+// With action buttons
+toast('Are you sure?', {
+  description: 'This action cannot be undone',
+  cancel: {
+    label: 'Cancel',
+    onClick: () => console.log('Cancelled')
+  },
+  action: {
+    label: 'Confirm',
+    onClick: () => console.log('Confirmed')
+  }
+});
+
+// Promise-based (auto shows loading → success/error)
+toast.promise(fetchData(), {
+  loading: 'Saving changes...',
+  success: 'Changes saved successfully',
+  error: 'Failed to save changes'
+});
+```
+
+**Features:**
+
+- **Multiple variants:** Success, error, warning, info, loading states
+- **Action buttons:** Cancel and action buttons with callbacks
+- **Promise support:** Auto-transition from loading to success/error
+- **Dark themed:** Consistent dark background with themed icons
+- **Positioned:** Top-right with expandable queue
+
 ### Date Pickers (React Hook Form)
 
 Form-ready date picker components integrated with React Hook Form. Includes `RHFDatePicker`, `RHFTimePicker`, and `RHFDateTimePicker` for seamless form state management.