egutierrez
35bcb63300
Componentes React accesibles basados en Radix UI con soporte de temas via CSS variables. Incluye barrel export en index.ts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
91 lines
2.7 KiB
Markdown
91 lines
2.7 KiB
Markdown
---
|
|
name: toast
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "Toast(props: ToastProps): JSX.Element"
|
|
description: "Notificaciones temporales con variantes semanticas (success, error, warning, info), iconos automaticos, auto-dismiss y provider con hook useToast."
|
|
tags: [toast, notification, alert, component, ui, interactive, cva]
|
|
uses_functions: [cn_ts_core]
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["class-variance-authority", "lucide-react"]
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/toast.tsx"
|
|
props:
|
|
- name: variant
|
|
type: "'default' | 'success' | 'error' | 'warning' | 'info'"
|
|
required: false
|
|
description: "Variante semantica con icono automatico (default: default)"
|
|
- name: title
|
|
type: "string"
|
|
required: false
|
|
description: "Titulo de la notificacion"
|
|
- name: description
|
|
type: "string"
|
|
required: false
|
|
description: "Texto descriptivo secundario"
|
|
- name: action
|
|
type: "React.ReactNode"
|
|
required: false
|
|
description: "Accion opcional (boton, link) debajo del contenido"
|
|
- name: onClose
|
|
type: "() => void"
|
|
required: false
|
|
description: "Callback al cerrar. Muestra el boton X si se provee."
|
|
- name: duration
|
|
type: "number"
|
|
required: false
|
|
description: "Duracion en ms antes del auto-dismiss (default: 5000, 0 = persistente)"
|
|
emits: [onClose]
|
|
has_state: true
|
|
framework: react
|
|
variant: [default, success, error, warning, info]
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
// 1. Envolver la app con el provider
|
|
<ToastProvider position="bottom-right">
|
|
<App />
|
|
</ToastProvider>
|
|
|
|
// 2. Usar el hook en cualquier componente
|
|
function MyComponent() {
|
|
const { toast } = useToast()
|
|
|
|
return (
|
|
<Button onClick={() => toast({
|
|
variant: "success",
|
|
title: "Guardado",
|
|
description: "Los cambios se guardaron correctamente.",
|
|
})}>
|
|
Guardar
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
// Toast con accion
|
|
toast({
|
|
variant: "error",
|
|
title: "Error al guardar",
|
|
description: "Intenta de nuevo.",
|
|
action: <Button size="sm" variant="outline">Reintentar</Button>,
|
|
duration: 0, // persistente hasta cerrar manualmente
|
|
})
|
|
|
|
// Toast individual sin provider
|
|
<Toast variant="info" title="Informacion" description="Texto descriptivo" onClose={() => {}} />
|
|
```
|
|
|
|
## Notas
|
|
|
|
Arquitectura: Toast (componente visual puro), ToastViewport (contenedor posicionado fixed), ToastProvider (context + logica de estado), useToast (hook consumidor). Los iconos son automaticos segun variante: CheckCircle2 (success), AlertCircle (error), AlertTriangle (warning), Info (info). El border-l-4 diferencia visualmente cada variante. ToastProvider acepta position con 6 posiciones predefinidas.
|