Demo trực tiếp

await alert('Đây là một hộp thoại cảnh báo.', { title: 'Lưu ý' });

const ok = await confirm('Bạn có chắc muốn tiếp tục không?', {
  title: 'Xin xác nhận',
});

const name = await prompt('Tên bạn là gì?', {
  title: 'Giới thiệu bản thân',
  defaultValue: 'Ada Lovelace',
});

await prompt('Nhập một số chẵn:', {
  title: 'Nhập liệu có kiểm tra',
  validate: (value) => {
    const n = Number(value);
    if (Number.isNaN(n)) return 'Vui lòng nhập một số';
    if (n % 2 !== 0) return 'Số phải là số chẵn';
    return true;
  },
});

const instance = open({
  title: 'Hộp thoại tự dựng',
  content: (container) => {
    const p = document.createElement('p');
    p.textContent = 'Hộp thoại này được dựng bằng hàm tổng quát open().';
    container.append(p);
  },
  buttons: [
    { text: 'Đóng', role: 'primary', autoFocus: true, onClick: (i) => i.close('done') },
  ],
});
const result = await instance.whenClosed();

const first = confirm('Hộp thoại thứ nhất. Mở thêm một cái đè lên nhé?', { title: 'Hộp thoại 1' });
const second = await confirm('Cái này xếp chồng lên hộp thoại thứ nhất.', { title: 'Hộp thoại 2' });
const firstResult = await first;

await alert('Hộp thoại này mở và đóng tức thì.', { animation: 'none' });

await confirm('Hộp thoại này trượt lên từ phía dưới.', { animation: 'slide' });

drawer({
  title: 'Cài đặt dự án',
  message: 'Drawer bên phải, dùng dialog gốc và an toàn về tiêu điểm.',
  side: 'right',
  buttons: [{ text: 'Xong', role: 'primary', closesDialog: true }],
});

bottomSheet({
  title: 'Thao tác nhanh',
  message: 'Kéo xuống để đóng bottom sheet này.',
  buttons: [{ text: 'Xong', role: 'primary', closesDialog: true }],
});

toast('Đã lưu thay đổi thành công.', { tone: 'success' });

lightbox('/og-image.png', {
  alt: 'Ảnh chia sẻ mạng xã hội của Forge Dialog',
  caption: 'Kết xuất từ site/icon.svg lúc build.',
});

const task = loading('Đang tải lên…');
task.update('Đang xử lý…');
await task.close();

commandPalette([
  { id: 'theme-dark', label: 'Chuyển sang chủ đề tối', keywords: ['appearance'],
    run: () => setTheme('dark') },
  { id: 'theme-light', label: 'Chuyển sang chủ đề sáng', keywords: ['appearance'],
    run: () => setTheme('light') },
]);

notificationCenter();
getNotificationHistory(); // [{ id, message, tone, createdAt }]
clearNotificationHistory();

const values = await form(
  [
    { name: 'email', type: 'email', label: 'Email', required: true },
    { name: 'plan', type: 'select', label: 'Gói', options: [
      { value: 'free', label: 'Miễn phí' },
      { value: 'pro', label: 'Chuyên nghiệp' },
    ] },
    { name: 'notes', type: 'textarea', label: 'Ghi chú', rows: 3 },
  ],
  { title: 'Tạo tài khoản' },
);

const flow = wizard({
  initialData: { name: '' },
  steps: [
    {
      id: 'profile',
      title: 'Hồ sơ của bạn',
      render: (el, ctx) => {
        const input = document.createElement('input');
        input.className = 'fd-input';
        input.placeholder = 'Tên';
        input.addEventListener('input', () => ctx.set({ name: input.value }));
        el.append(input);
      },
      validate: (ctx) => (ctx.data.name ? true : 'Vui lòng nhập tên của bạn.'),
    },
    { id: 'review', title: 'Xem lại',
      render: (el, ctx) => { el.textContent = `Sẵn sàng chào đón ${ctx.data.name}.`; } },
  ],
});
const data = await flow.result;

const values = await formWizard([
  { id: 'account', title: 'Tài khoản', fields: [
    { name: 'email', type: 'email', label: 'Email', required: true },
  ] },
  { id: 'profile', title: 'Hồ sơ', fields: [
    { name: 'name', type: 'text', label: 'Họ và tên', required: true },
  ] },
]);

setTheme('dark'); // 'light' | 'dark' | 'system'

setThemePreset('glass');

open({
  title: 'Hộp thoại đã tạo kiểu',
  appearance: { radius: 20, shadow: { angle: 180, distance: 20, blur: 60 } },
  draggable: { bounds: 'viewport' },
});