# Toast

Toast notification utility for displaying temporary messages that automatically dismiss after a specified duration. Can be used programmatically.

## Function

`Toast(message, type = 'alert-info', duration = 3500)`

| Param | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `message` | `string \| VNode` | `-` | Message content to display |
| `type` | `string` | `'alert-info'` | Alert type: `'alert-info'`, `'alert-success'`, `'alert-warning'`, `'alert-error'` |
| `duration` | `number` | `3500` | Auto-dismiss duration in milliseconds |

## Live Examples

### Basic Toast

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
    Button({ 
      class: 'btn btn-info',
      onclick: () => Toast('This is an info message', 'alert-info', 3000)
    }, 'Info Toast'),
    Button({ 
      class: 'btn btn-success',
      onclick: () => Toast('Operation successful!', 'alert-success', 3000)
    }, 'Success Toast'),
    Button({ 
      class: 'btn btn-warning',
      onclick: () => Toast('Please check your input', 'alert-warning', 3000)
    }, 'Warning Toast'),
    Button({ 
      class: 'btn btn-error',
      onclick: () => Toast('An error occurred', 'alert-error', 3000)
    }, 'Error Toast')
  ]);
};
Mount(BasicDemo, '#demo-basic');
```

### Different Durations

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-duration" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
  </div>
</div>

```javascript
const DurationDemo = () => {
  return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
    Button({ 
      class: 'btn btn-sm',
      onclick: () => Toast('Short (1s)', 'alert-info', 1000)
    }, '1 Second'),
    Button({ 
      class: 'btn btn-sm',
      onclick: () => Toast('Normal (3s)', 'alert-success', 3000)
    }, '3 Seconds'),
    Button({ 
      class: 'btn btn-sm',
      onclick: () => Toast('Long (5s)', 'alert-warning', 5000)
    }, '5 Seconds'),
    Button({ 
      class: 'btn btn-sm',
      onclick: () => Toast('Very Long (8s)', 'alert-error', 8000)
    }, '8 Seconds')
  ]);
};
Mount(DurationDemo, '#demo-duration');
```

### Interactive Toast

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const InteractiveDemo = () => {
  const count = $(0);
  
  const showRandomToast = () => {
    const types = ['alert-info', 'alert-success', 'alert-warning', 'alert-error'];
    const messages = [
      'You clicked the button!',
      'Action completed successfully',
      'Processing your request...',
      'Something interesting happened'
    ];
    const randomType = types[Math.floor(Math.random() * types.length)];
    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
    count(count() + 1);
    Toast(`${randomMessage} (${count()})`, randomType, 2000);
  };
  
  return Div({ class: 'flex flex-col gap-4 items-center' }, [
    Button({ 
      class: 'btn btn-primary',
      onclick: showRandomToast
    }, 'Show Random Toast'),
    Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
  ]);
};
Mount(InteractiveDemo, '#demo-interactive');
```

### Form Validation Toast

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const FormToastDemo = () => {
  const email = $('');
  const password = $('');
  
  const handleSubmit = () => {
    if (!email()) {
      Toast('Please enter your email', 'alert-warning', 3000);
      return;
    }
    if (!email().includes('@')) {
      Toast('Please enter a valid email address', 'alert-error', 3000);
      return;
    }
    if (!password()) {
      Toast('Please enter your password', 'alert-warning', 3000);
      return;
    }
    if (password().length < 6) {
      Toast('Password must be at least 6 characters', 'alert-error', 3000);
      return;
    }
    Toast('Login successful! Redirecting...', 'alert-success', 2000);
  };
  
  return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
    Div({ class: 'text-lg font-bold text-center' }, 'Login Form'),
    Input({
      label: 'Email',
      type: 'email',
      value: email,
      placeholder: 'user@example.com',
      oninput: (e) => email(e.target.value)
    }),
    Input({
      label: 'Password',
      type: 'password',
      value: password,
      placeholder: 'Enter password',
      oninput: (e) => password(e.target.value)
    }),
    Button({ 
      class: 'btn btn-primary',
      onclick: handleSubmit
    }, 'Login')
  ]);
};
Mount(FormToastDemo, '#demo-form');
```

### Success Feedback

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-feedback" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const FeedbackDemo = () => {
  const items = $([
    { id: 1, name: 'Item 1', saved: false },
    { id: 2, name: 'Item 2', saved: false },
    { id: 3, name: 'Item 3', saved: false }
  ]);
  
  const saveItem = (id) => {
    items(items().map(item => 
      item.id === id ? { ...item, saved: true } : item
    ));
    Toast(`Item ${id} saved successfully!`, 'alert-success', 2000);
  };
  
  const saveAll = () => {
    items(items().map(item => ({ ...item, saved: true })));
    Toast('All items saved!', 'alert-success', 2000);
  };
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'flex justify-between items-center' }, [
      Span({ class: 'font-bold' }, 'Items to Save'),
      Button({ 
        class: 'btn btn-sm btn-primary',
        onclick: saveAll
      }, 'Save All')
    ]),
    Div({ class: 'flex flex-col gap-2' }, items().map(item =>
      Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
        Span({}, item.name),
        item.saved 
          ? Span({ class: 'badge badge-success' }, '✓ Saved')
          : Button({ 
              class: 'btn btn-xs btn-primary',
              onclick: () => saveItem(item.id)
            }, 'Save')
      ])
    ))
  ]);
};
Mount(FeedbackDemo, '#demo-feedback');
```

### Error Handling

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const ErrorDemo = () => {
  const simulateApiCall = () => {
    const success = Math.random() > 0.3;
    
    if (success) {
      Toast('Data loaded successfully!', 'alert-success', 2000);
    } else {
      Toast('Failed to load data. Please try again.', 'alert-error', 3000);
    }
  };
  
  const simulateNetworkError = () => {
    Toast('Network error: Unable to connect to server', 'alert-error', 4000);
  };
  
  const simulateTimeout = () => {
    Toast('Request timeout (5s). Please check your connection.', 'alert-warning', 4000);
  };
  
  return Div({ class: 'flex flex-wrap gap-3 justify-center' }, [
    Button({ 
      class: 'btn btn-primary',
      onclick: simulateApiCall
    }, 'Simulate API Call'),
    Button({ 
      class: 'btn btn-error',
      onclick: simulateNetworkError
    }, 'Network Error'),
    Button({ 
      class: 'btn btn-warning',
      onclick: simulateTimeout
    }, 'Timeout')
  ]);
};
Mount(ErrorDemo, '#demo-error');
```

### Custom Messages

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
  </div>
</div>

```javascript
const CustomDemo = () => {
  const showCustomToast = (type, message) => {
    Toast(message, type, 3000);
  };
  
  return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
    Button({ 
      class: 'btn btn-info',
      onclick: () => showCustomToast('alert-info', '📧 New email received from john@example.com')
    }, 'Email'),
    Button({ 
      class: 'btn btn-success',
      onclick: () => showCustomToast('alert-success', '💰 Payment of $49.99 completed')
    }, 'Payment'),
    Button({ 
      class: 'btn btn-warning',
      onclick: () => showCustomToast('alert-warning', '⚠️ Your session will expire in 5 minutes')
    }, 'Session Warning'),
    Button({ 
      class: 'btn btn-error',
      onclick: () => showCustomToast('alert-error', '🔒 Failed login attempt detected')
    }, 'Security Alert')
  ]);
};
Mount(CustomDemo, '#demo-custom');
```

### Multiple Toasts

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const MultipleDemo = () => {
  const showMultipleToasts = () => {
    Toast('First message', 'alert-info', 3000);
    setTimeout(() => Toast('Second message', 'alert-success', 3000), 500);
    setTimeout(() => Toast('Third message', 'alert-warning', 3000), 1000);
    setTimeout(() => Toast('Fourth message', 'alert-error', 3000), 1500);
  };
  
  return Div({ class: 'flex justify-center' }, [
    Button({ 
      class: 'btn btn-primary',
      onclick: showMultipleToasts
    }, 'Show Multiple Toasts')
  ]);
};
Mount(MultipleDemo, '#demo-multiple');
```