@fmcoldays/notify

Toasts no bloqueantes, notificaciones de pantalla completa y diálogo de confirmación. Sin dependencias externas — inyecta sus propios estilos, no requiere CSS aparte.

npm install @fmcoldays/notify

Toast

import { toast } from '@fmcoldays/notify'

toast.success('Registro guardado', { description: 'Los cambios se aplicaron.' })
toast.error('No se pudo guardar')
toast.warning('Revisa la información')
toast.info('La descarga ha comenzado')

Los toast no bloquean la interfaz, se apilan, se cierran automáticamente, pausan el tiempo al pasar el mouse y muestran una barra de progreso.

Configuración global

toast.configure({
  position: 'top-right',
  duration: 4000,
  maxVisible: 4,
  pauseOnHover: true,
  dismissible: true,
  showProgress: true,
  preventDuplicates: false,
})

Las posiciones disponibles son top-left, top-center, top-right, bottom-left, bottom-center y bottom-right.

Loading, update y cierre

const id = toast.loading('Guardando...')

toast.update(id, {
  type: 'success',
  title: 'Guardado correctamente',
  description: 'El registro ya está disponible.',
})

toast.dismiss(id)
toast.dismissAll()

Promesas

const result = await toast.promise(saveRecord(), {
  messages: {
    loading: 'Guardando...',
    success: value => `Registro ${value.id} guardado`,
    error: error => `No se pudo guardar: ${String(error)}`,
  },
})

Acción y colores

toast.info('Registro eliminado', {
  description: 'Puedes recuperar el registro durante unos segundos.',
  action: {
    label: 'Deshacer',
    onClick: restoreRecord,
  },
  colors: {
    title: '#7c3aed',
    icon: '#7c3aed',
    iconBackground: '#ede9fe',
    iconBorder: '#c4b5fd',
    background: '#faf5ff',
    description: '#5b21b6',
    progress: '#7c3aed',
    action: '#7c3aed',
  },
})

Opciones por toast: id, description, duration, position, dismissible, pauseOnHover, showProgress, action y colors.

La demo interactiva está en examples/post-action-preview/notify.html y se abre en http://127.0.0.1:5175/notify al ejecutar su servidor local.

Popup (notificación de pantalla completa)

Muestra un modal con backdrop de color. Un solo botón — bloquea hasta que el usuario lo cierra.

import { popup } from '@fmcoldays/notify'

await popup({ type: 'success', title: 'Guardado', message: 'El registro se guardó correctamente.' })
await popup({ type: 'error',   title: 'Error',    message: 'No se pudo completar la operación.' })
await popup({ type: 'warning', title: 'Atención', message: 'Revisa los datos antes de continuar.' })
await popup({ type: 'info',    title: 'Info',     message: 'La sincronización tardará unos minutos.' })

| Opción | Tipo | Default | Descripción | |---|---|---|---| | type | 'success' \| 'error' \| 'warning' \| 'info' | 'success' | Color del backdrop y del badge. | | title | string | 'Éxito' | Título del popup. | | message | string | '' | Mensaje descriptivo. | | confirmText | string | 'Aceptar' | Texto del botón. | | colors | NotifyColors | Paleta del type | Sobrescribe parcialmente los colores del popup. |

Colores personalizados

El diseño, el SVG y las animaciones se mantienen; únicamente se reemplazan los colores proporcionados:

await popup({
  type: 'success',
  title: 'Guardado',
  message: 'El registro se guardó correctamente.',
  colors: {
    icon: '#7c3aed',
    title: '#6d28d9',
    button: '#7c3aed',
    backdrop: 'rgba(124, 58, 237, 0.20)',
    card: '#ffffff',
    message: '#475569',
  },
})

Todas las propiedades de NotifyColors son opcionales: icon, title, button, backdrop, card y message.

Confirmación

import { confirm } from '@fmcoldays/notify'

const ok = await confirm({
  title: '¿Eliminar item?',
  message: 'Esta acción no se puede deshacer.',
  confirmText: 'Sí, eliminar',
  cancelText: 'Cancelar',
  type: 'error',
})
if (ok) { /* ... */ }

Resuelve true si el usuario confirma, false si cancela o cierra con ESC.

| Opción | Tipo | Default | |---|---|---| | title | string | '¿Estás seguro?' | | message | string | 'Esta acción no se puede deshacer.' | | confirmText | string | 'Sí, continuar' | | cancelText | string | 'Cancelar' | | type | 'warning' \| 'error' \| 'info' \| 'success' | 'warning' |

Tema oscuro

toast, popup y confirm respetan [data-theme='dark'] en un ancestro.

Estructura

src/
├── index.ts            # barril (toast, popup, confirm, tipos)
├── toast.ts            # toast no bloqueante y controlable
├── notify.ts           # popup() — notificación de pantalla completa
├── confirm.ts          # diálogo de confirmación con dos botones
├── types/              # ToastType
└── const/              # PALETTE, ICON