@undefine-ui/design-system 3.0.3 → 3.2.0

package/README.md

@@ -77,19 +77,20 @@ Storybook (`pnpm dev:storybook`) documents each component and token surface.
 
 ### Icon library
 
-The package includes a comprehensive icon library with 35 SVG icons organized by category.
+The package includes a comprehensive icon library with 45+ SVG icons organized by category.
 
 **Available icons:**
 
 - **Navigation:** NavArrowLeft, NavArrowRight, NavArrowDown, NavArrowDownSolid, LongArrowUpLeftSolid
-- **User:** UserSolid, User, Building, Bank
+- **User:** User, UserSolid, Building, Bank
 - **Form Controls:** CheckboxDefault, CheckboxSelect, CheckboxIndeterminate, RadioDefault, RadioSelect
 - **Actions:** Search, Copy, Trash, XMark, XMarkSolid, CloudUpload, Download, Settings, Plus, PlusSquare, Attachment
-- **Feedback:** InfoCircleSolid, InfoCircle, CheckCircleSolid, HelpCircle, ClipboardCheck, Loader, BellNotification
+- **Feedback:** InfoCircle, InfoCircleSolid, CheckCircleSolid, HelpCircle, ClipboardCheck, Loader, BellNotification, Circle
 - **Visibility:** Eye, EyeClosed
 - **Date & Time:** Calendar, Clock
-- **Data:** SortUp, SortDown
-- **System:** KeyCommand, Circle
+- **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.