Toast

import { ToastProvider, ToastViewport, useToast } from '@versaui/ui/components/Toast';
import { Button } from '@versaui/ui/components/Button';

// 1. Wrap your app with ToastProvider and place ToastViewport
function App() {
  return (
    <ToastProvider maxToasts={3} position="bottom-right">
      <YourContent />
      <ToastViewport />
    </ToastProvider>
  );
}

// 2. Dispatch toasts with useToast hook
function MyComponent() {
  const { addToast } = useToast();

  return (
    <Button
      onClick={() =>
        addToast({
          state: 'success',
          title: 'Saved successfully',
          description: 'Your changes have been saved to the cloud.',
        })
      }
    >
      Save Changes
    </Button>
  );
}

import { useToastActions } from '@versaui/ui/components/Toast';

function MyComponent() {
  const { toast, success, error, warning, highlight } = useToastActions();

  return (
    <div className="flex gap-2">
      <button onClick={() => toast('General notification')}>Default</button>
      <button onClick={() => success('Profile updated!')}>Success</button>
      <button onClick={() => error('Payment failed.')}>Error</button>
      <button onClick={() => warning('Low disk space.')}>Warning</button>
      <button onClick={() => highlight('New version released!')}>Highlight</button>
    </div>
  );
}

const { addToast } = useToast();

addToast({ state: 'default', title: 'General notification' });
addToast({ state: 'highlight', title: 'New feature available' });
addToast({ state: 'success', title: 'Action successful' });
addToast({ state: 'error', title: 'Something went wrong' });
addToast({ state: 'warning', title: 'Caution required' });

// Simple style (default)
addToast({
  state: 'success',
  style: 'simple',
  title: 'Action completed',
  description: 'Everything is up to date.',
});

// Expressive style
addToast({
  state: 'highlight',
  style: 'expressive',
  title: 'New feature unlocked',
  description: 'Experience enhanced performance and workflow speed.',
});

// Default size
addToast({
  title: 'Standard notification',
  size: 'default',
});

// Small size
addToast({
  title: 'Compact notification',
  size: 'small',
});

addToast({
  title: 'Notification at Top Center',
  position: 'top',
});

addToast({
  title: 'Notification at Bottom Right',
  position: 'bottom-right',
});

import { Toast } from '@versaui/ui/components/Toast';

<Toast
  state="success"
  style="expressive"
  title="Changes saved!"
  description="All settings have been synchronized."
  onButtonClick={() => console.log('Undo clicked')}
  onClose={() => console.log('Dismissed')}
/>

// Auto-dismiss after 3 seconds
addToast({ title: 'Quick message', duration: 3000 });

// Persistent toast (stays until dismissed)
addToast({ title: 'Important alert', duration: 0 });