Alert Component

import {
  alert,
  infoAlert,
  successAlert,
  warningAlert,
  dangerAlert,
  toast,
  toastContainer,
} from '@frontmcp/ui';

const html = alert('This is an informational message.');

import { infoAlert, successAlert, warningAlert, dangerAlert } from '@frontmcp/ui';

infoAlert('Your session will expire in 5 minutes.')
successAlert('Profile updated successfully!')
warningAlert('This action cannot be undone.')
dangerAlert('Failed to save changes.')

const html = alert('Your changes have been saved to the database.', {
  variant: 'success',
  title: 'Success!',
});

// Default icon (based on variant)
alert('Message with icon', { showIcon: true })

// No icon
alert('Message without icon', { showIcon: false })

// Custom icon
alert('Custom icon message', {
  icon: '<svg class="w-5 h-5" ...>...</svg>',
})

// Client-side dismiss (removes from DOM)
const html = alert('Click X to dismiss this alert.', {
  dismissible: true,
});

// HTMX dismiss with server action
const htmxAlert = alert('Notification from server.', {
  dismissible: true,
  onDismiss: {
    delete: '/api/notifications/123',
    target: '#notification-123',
    swap: 'outerHTML',
  },
});

import { alert, button, buttonGroup } from '@frontmcp/ui';

const html = alert('A new version is available.', {
  variant: 'info',
  title: 'Update Available',
  actions: buttonGroup([
    button('Update Now', { size: 'sm' }),
    button('Later', { variant: 'ghost', size: 'sm' }),
  ]),
});

import { toast } from '@frontmcp/ui';

// Basic toast
const html = toast('File uploaded successfully!', {
  variant: 'success',
});

// With title and position
const positioned = toast('Please check your inbox.', {
  variant: 'info',
  title: 'Email Sent',
  position: 'top-right',  // default
  duration: 5000,         // auto-dismiss after 5s
});

import { toastContainer } from '@frontmcp/ui';

// Add to your layout
const container = toastContainer('top-right', 'toast-container');

// Then inject toasts into it

import { alert, button, buttonGroup } from '@frontmcp/ui';

const errorAlert = alert(
  'Unable to connect to the database. Please check your connection settings and try again.',
  {
    variant: 'danger',
    title: 'Connection Failed',
    dismissible: true,
    actions: buttonGroup([
      button('Retry', {
        size: 'sm',
        htmx: {
          post: '/api/retry-connection',
          target: '#connection-status',
        },
      }),
      button('View Logs', {
        variant: 'ghost',
        size: 'sm',
        href: '/admin/logs',
      }),
    ]),
  },
);

import { Tool, ToolContext } from '@frontmcp/sdk';
import { card, alert, successAlert, dangerAlert } from '@frontmcp/ui';

@Tool({
  name: 'process_data',
  ui: {
    template: (ctx) => {
      const { output } = ctx;

      if (output.error) {
        return card(`
          ${dangerAlert(output.error, { title: 'Processing Failed' })}
          <p class="mt-4 text-sm text-gray-500">
            Please try again or contact support.
          </p>
        `);
      }

      return card(`
        ${successAlert(`Processed ${output.count} items successfully.`)}
        <div class="mt-4">
          <p class="text-sm text-gray-600">
            Time taken: ${output.duration}ms
          </p>
        </div>
      `);
    },
  },
})
export class ProcessDataTool extends ToolContext {
  // ...
}