---
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.