@undefine-ui/design-system 3.1.0 → 3.3.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.
@@ -473,6 +551,57 @@ The animated logo automatically plays on mount with:
 
 Ideal for splash screens, loading overlays, or brand storytelling moments.
 
+### ApexCharts Styling
+
+The design system provides styling utilities for ApexCharts integration, ensuring charts match the Define theme.
+
+**Installation:**
+
+```bash
+pnpm add apexcharts react-apexcharts
+```
+
+**Usage:**
+
+```tsx
+import ReactApexChart from 'react-apexcharts';
+import { useTheme, styled } from '@mui/material/styles';
+import { apexChartsStyles, getDefaultChartOptions } from '@undefine-ui/design-system';
+
+// Create a styled wrapper
+const ChartWrapper = styled('div')(({ theme }) => ({
+  ...apexChartsStyles(theme)
+}));
+
+function LineChart() {
+  const theme = useTheme();
+
+  const chartOptions = {
+    ...getDefaultChartOptions(theme),
+    xaxis: {
+      ...getDefaultChartOptions(theme).xaxis,
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
+    }
+  };
+
+  const chartSeries = [
+    { name: 'Bookings', data: [10, 41, 35, 51, 49, 62, 69] },
+    { name: 'Revenue', data: [20, 35, 50, 30, 45, 55, 40] }
+  ];
+
+  return (
+    <ChartWrapper>
+      <ReactApexChart type="line" series={chartSeries} options={chartOptions} height={350} />
+    </ChartWrapper>
+  );
+}
+```
+
+**Available exports:**
+
+- `apexChartsStyles(theme)` - CSS styles to apply to a wrapper element (tooltips, legends, labels)
+- `getDefaultChartOptions(theme)` - Default ApexCharts options with theme colors, typography, and grid styling
+
 ## Export surface
 
 Everything is re-exported from `src/index.ts`. Key groups: