@adamosuiteservices/ui 2.9.15 → 2.9.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/components/ui/icon/icon.d.ts +1 -3
- package/dist/components/ui/icon/icon.stories.d.ts +0 -5
- package/dist/custom-layered-styles.css +1 -1
- package/dist/icon-Cj-g35RJ.js +34 -0
- package/dist/icon-Di0rwXMr.cjs +6 -0
- package/dist/icon.cjs +1 -1
- package/dist/icon.js +1 -1
- package/dist/icons.css +1 -1
- package/dist/styles.css +1 -1
- package/docs/components/ui/accordion-rounded.md +583 -583
- package/docs/components/ui/alert.md +671 -671
- package/docs/components/ui/avatar.md +588 -588
- package/docs/components/ui/badge.md +1024 -1024
- package/docs/components/ui/icon.md +103 -75
- package/package.json +1 -1
- package/dist/icon-DTx6Y_mx.cjs +0 -6
- package/dist/icon-DmU_SEHC.js +0 -36
|
@@ -1,671 +1,671 @@
|
|
|
1
|
-
# Alert Component
|
|
2
|
-
|
|
3
|
-
## Descripción
|
|
4
|
-
|
|
5
|
-
Componente versátil para mostrar **mensajes importantes** que requieren la atención del usuario. Usa un sistema de grid inteligente para iconos opcionales, soporta 4 variantes de color, y permite contenido rico con botones, listas, progress bars y más.
|
|
6
|
-
|
|
7
|
-
## Características
|
|
8
|
-
|
|
9
|
-
- ✅ 4 variantes visuales (default, destructive, success, warning)
|
|
10
|
-
- ✅ Grid automático para iconos opcionales
|
|
11
|
-
- ✅ Soporta título solo, descripción solo, o ambos
|
|
12
|
-
- ✅ Contenido rico: botones, progress, checkboxes, badges
|
|
13
|
-
- ✅ Rol ARIA "alert" para accesibilidad
|
|
14
|
-
- ✅ Iconos auto-dimensionados (size-4)
|
|
15
|
-
- ✅ Line clamp en títulos largos
|
|
16
|
-
- ✅ Sistema de slots para composición
|
|
17
|
-
|
|
18
|
-
## Importación
|
|
19
|
-
|
|
20
|
-
```typescript
|
|
21
|
-
import {
|
|
22
|
-
Alert,
|
|
23
|
-
AlertTitle,
|
|
24
|
-
AlertDescription,
|
|
25
|
-
} from "@adamosuiteservices/ui/alert";
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Uso Básico
|
|
29
|
-
|
|
30
|
-
### Alert Completo (Icono + Título + Descripción)
|
|
31
|
-
|
|
32
|
-
```tsx
|
|
33
|
-
import { InfoIcon } from "lucide-react";
|
|
34
|
-
|
|
35
|
-
<Alert>
|
|
36
|
-
<InfoIcon />
|
|
37
|
-
<AlertTitle>Heads up!</AlertTitle>
|
|
38
|
-
<AlertDescription>
|
|
39
|
-
You can add components and dependencies to your app using the cli.
|
|
40
|
-
</AlertDescription>
|
|
41
|
-
</Alert>;
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
### Solo Título con Icono
|
|
45
|
-
|
|
46
|
-
```tsx
|
|
47
|
-
import { CheckCircle2Icon } from "lucide-react";
|
|
48
|
-
|
|
49
|
-
<Alert variant="success">
|
|
50
|
-
<CheckCircle2Icon />
|
|
51
|
-
<AlertTitle>Your order has been processed!</AlertTitle>
|
|
52
|
-
</Alert>;
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### Solo Descripción con Icono
|
|
56
|
-
|
|
57
|
-
```tsx
|
|
58
|
-
import { InfoIcon } from "lucide-react";
|
|
59
|
-
|
|
60
|
-
<Alert>
|
|
61
|
-
<InfoIcon />
|
|
62
|
-
<AlertDescription>
|
|
63
|
-
This is an alert with only a description. Sometimes you don't need a title.
|
|
64
|
-
</AlertDescription>
|
|
65
|
-
</Alert>;
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
### Sin Icono
|
|
69
|
-
|
|
70
|
-
```tsx
|
|
71
|
-
<Alert>
|
|
72
|
-
<AlertTitle>Update available</AlertTitle>
|
|
73
|
-
<AlertDescription>
|
|
74
|
-
A new software update is available. You can now update your app.
|
|
75
|
-
</AlertDescription>
|
|
76
|
-
</Alert>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
## Variantes
|
|
80
|
-
|
|
81
|
-
### Default (Información General)
|
|
82
|
-
|
|
83
|
-
Para mensajes informativos neutrales:
|
|
84
|
-
|
|
85
|
-
```tsx
|
|
86
|
-
import { InfoIcon } from "lucide-react";
|
|
87
|
-
|
|
88
|
-
<Alert variant="default">
|
|
89
|
-
<InfoIcon />
|
|
90
|
-
<AlertTitle>Default variant</AlertTitle>
|
|
91
|
-
<AlertDescription>
|
|
92
|
-
This is the default alert variant for general information.
|
|
93
|
-
</AlertDescription>
|
|
94
|
-
</Alert>;
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
**Estilos aplicados**:
|
|
98
|
-
|
|
99
|
-
- Fondo: `bg-card` (blanco/gris claro según tema)
|
|
100
|
-
- Texto: `text-card-foreground`
|
|
101
|
-
- Uso: Información general, tips, avisos neutrales
|
|
102
|
-
|
|
103
|
-
### Success (Operaciones Exitosas)
|
|
104
|
-
|
|
105
|
-
Para confirmaciones y feedback positivo:
|
|
106
|
-
|
|
107
|
-
```tsx
|
|
108
|
-
import { CheckCircle2Icon } from "lucide-react";
|
|
109
|
-
|
|
110
|
-
<Alert variant="success">
|
|
111
|
-
<CheckCircle2Icon />
|
|
112
|
-
<AlertTitle>Success</AlertTitle>
|
|
113
|
-
<AlertDescription>
|
|
114
|
-
Your changes have been saved successfully.
|
|
115
|
-
</AlertDescription>
|
|
116
|
-
</Alert>;
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
**Estilos aplicados**:
|
|
120
|
-
|
|
121
|
-
- Fondo: `bg-success-50` (verde claro)
|
|
122
|
-
- Texto título/icono: `text-success` (verde)
|
|
123
|
-
- Texto descripción: `text-success/90` (verde 90% opacidad)
|
|
124
|
-
- Uso: Confirmaciones, operaciones completadas, validaciones exitosas
|
|
125
|
-
|
|
126
|
-
### Warning (Advertencias)
|
|
127
|
-
|
|
128
|
-
Para mensajes de precaución que requieren atención:
|
|
129
|
-
|
|
130
|
-
```tsx
|
|
131
|
-
import { AlertTriangleIcon } from "lucide-react";
|
|
132
|
-
|
|
133
|
-
<Alert variant="warning">
|
|
134
|
-
<AlertTriangleIcon />
|
|
135
|
-
<AlertTitle>Warning</AlertTitle>
|
|
136
|
-
<AlertDescription>
|
|
137
|
-
Your storage is running low. Consider upgrading your plan.
|
|
138
|
-
</AlertDescription>
|
|
139
|
-
</Alert>;
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
**Estilos aplicados**:
|
|
143
|
-
|
|
144
|
-
- Fondo: `bg-warning-50` (naranja/amarillo claro)
|
|
145
|
-
- Texto título/icono: `text-warning` (naranja/amarillo)
|
|
146
|
-
- Texto descripción: `text-warning/90`
|
|
147
|
-
- Uso: Advertencias, límites cercanos, acciones recomendadas
|
|
148
|
-
|
|
149
|
-
### Destructive (Errores Críticos)
|
|
150
|
-
|
|
151
|
-
Para errores, fallos y mensajes críticos:
|
|
152
|
-
|
|
153
|
-
```tsx
|
|
154
|
-
import { XCircleIcon } from "lucide-react";
|
|
155
|
-
|
|
156
|
-
<Alert variant="destructive">
|
|
157
|
-
<XCircleIcon />
|
|
158
|
-
<AlertTitle>Error</AlertTitle>
|
|
159
|
-
<AlertDescription>
|
|
160
|
-
Your session has expired. Please log in again.
|
|
161
|
-
</AlertDescription>
|
|
162
|
-
</Alert>;
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
**Estilos aplicados**:
|
|
166
|
-
|
|
167
|
-
- Fondo: `bg-destructive-50` (rojo claro)
|
|
168
|
-
- Texto título/icono: `text-destructive` (rojo)
|
|
169
|
-
- Texto descripción: `text-destructive/90`
|
|
170
|
-
- Uso: Errores, fallos de validación, acciones bloqueadas
|
|
171
|
-
|
|
172
|
-
## Props
|
|
173
|
-
|
|
174
|
-
### Alert (Root)
|
|
175
|
-
|
|
176
|
-
Contenedor principal del alert con rol ARIA.
|
|
177
|
-
|
|
178
|
-
| Prop | Tipo | Default | Descripción |
|
|
179
|
-
| --------- | ------------------------------------------------------ | ----------- | -------------------------------------- |
|
|
180
|
-
| variant | `"default" \| "destructive" \| "success" \| "warning"` | `"default"` | Variante visual del alert |
|
|
181
|
-
| className | `string` | - | Clases CSS adicionales |
|
|
182
|
-
| children | `ReactNode` | - | Contenido (icono, título, descripción) |
|
|
183
|
-
| ...props | `HTMLAttributes<HTMLDivElement>` | - | Props nativas de div |
|
|
184
|
-
|
|
185
|
-
**Atributos aplicados automáticamente**:
|
|
186
|
-
|
|
187
|
-
- `data-slot="alert"`: Para identificación interna
|
|
188
|
-
- `role="alert"`: Accesibilidad ARIA
|
|
189
|
-
|
|
190
|
-
### AlertTitle
|
|
191
|
-
|
|
192
|
-
Título del alert con line clamp automático.
|
|
193
|
-
|
|
194
|
-
| Prop | Tipo | Descripción |
|
|
195
|
-
| --------- | -------------------------------- | ---------------------------- |
|
|
196
|
-
| className | `string` | Clases CSS adicionales |
|
|
197
|
-
| children | `ReactNode` | Texto o contenido del título |
|
|
198
|
-
| ...props | `HTMLAttributes<HTMLDivElement>` | Props nativas de div |
|
|
199
|
-
|
|
200
|
-
**Características**:
|
|
201
|
-
|
|
202
|
-
- `line-clamp-1`: Trunca automáticamente textos largos
|
|
203
|
-
- `font-medium`: Peso de fuente medium
|
|
204
|
-
- `tracking-tight`: Letter spacing ajustado
|
|
205
|
-
- `min-h-4`: Altura mínima de 1rem
|
|
206
|
-
- `col-start-2`: Inicia en segunda columna del grid (después del icono)
|
|
207
|
-
|
|
208
|
-
### AlertDescription
|
|
209
|
-
|
|
210
|
-
Contenedor de la descripción con soporte para contenido rico.
|
|
211
|
-
|
|
212
|
-
| Prop | Tipo | Descripción |
|
|
213
|
-
| --------- | -------------------------------- | ---------------------------------------- |
|
|
214
|
-
| className | `string` | Clases CSS adicionales |
|
|
215
|
-
| children | `ReactNode` | Contenido (texto, listas, botones, etc.) |
|
|
216
|
-
| ...props | `HTMLAttributes<HTMLDivElement>` | Props nativas de div |
|
|
217
|
-
|
|
218
|
-
**Características**:
|
|
219
|
-
|
|
220
|
-
- `text-muted-foreground`: Color de texto secundario (sobrescrito por variantes)
|
|
221
|
-
- `grid`: Contenedor grid interno
|
|
222
|
-
- `justify-items-start`: Alinea items a la izquierda
|
|
223
|
-
- `gap-1`: Espaciado de 0.25rem entre elementos
|
|
224
|
-
- `[&_p]:leading-relaxed`: Line height relajado para párrafos
|
|
225
|
-
- `col-start-2`: Inicia en segunda columna del grid
|
|
226
|
-
|
|
227
|
-
## Sistema de Grid Inteligente
|
|
228
|
-
|
|
229
|
-
El Alert usa CSS Grid con **detección automática de iconos**:
|
|
230
|
-
|
|
231
|
-
### Sin Icono
|
|
232
|
-
|
|
233
|
-
```css
|
|
234
|
-
grid-cols-[0_1fr]
|
|
235
|
-
```
|
|
236
|
-
|
|
237
|
-
- Columna 1: 0px (oculta)
|
|
238
|
-
- Columna 2: Todo el espacio disponible
|
|
239
|
-
|
|
240
|
-
### Con Icono
|
|
241
|
-
|
|
242
|
-
```css
|
|
243
|
-
grid-cols-[calc(var(--adm-spacing)*4)_1fr]
|
|
244
|
-
has-[>svg]:gap-x-3
|
|
245
|
-
```
|
|
246
|
-
|
|
247
|
-
- Columna 1: 1rem (16px) para icono
|
|
248
|
-
- Columna 2: Todo el espacio restante
|
|
249
|
-
- Gap horizontal: 0.75rem (12px)
|
|
250
|
-
|
|
251
|
-
**Selector automático**: `has-[>svg]` detecta si hay un elemento SVG directo
|
|
252
|
-
|
|
253
|
-
### Estilos de Iconos
|
|
254
|
-
|
|
255
|
-
```css
|
|
256
|
-
[&>svg]:size-4 /* 16x16px */
|
|
257
|
-
[&>svg]:translate-y-0.5 /* Alineación vertical */
|
|
258
|
-
[&>svg]:text-current /* Hereda color de la variante */
|
|
259
|
-
```
|
|
260
|
-
|
|
261
|
-
## Ejemplos Avanzados
|
|
262
|
-
|
|
263
|
-
### Alert de Seguridad con Botones
|
|
264
|
-
|
|
265
|
-
```tsx
|
|
266
|
-
import { ShieldCheckIcon } from "lucide-react";
|
|
267
|
-
import { Button } from "@adamosuiteservices/ui/button";
|
|
268
|
-
|
|
269
|
-
<Alert variant="destructive">
|
|
270
|
-
<ShieldCheckIcon />
|
|
271
|
-
<AlertTitle>Security Notice: Suspicious Login Attempt</AlertTitle>
|
|
272
|
-
<AlertDescription>
|
|
273
|
-
<p>We detected a login attempt from an unrecognized device:</p>
|
|
274
|
-
<div className="mt-3 space-y-2 text-sm">
|
|
275
|
-
<div className="grid grid-cols-2 gap-2">
|
|
276
|
-
<span className="font-medium">Location:</span>
|
|
277
|
-
<span>San Francisco, CA</span>
|
|
278
|
-
<span className="font-medium">Device:</span>
|
|
279
|
-
<span>Chrome on Windows</span>
|
|
280
|
-
<span className="font-medium">Time:</span>
|
|
281
|
-
<span>2 minutes ago</span>
|
|
282
|
-
</div>
|
|
283
|
-
</div>
|
|
284
|
-
<div className="mt-4 flex gap-2">
|
|
285
|
-
<Button size="sm" variant="destructive">
|
|
286
|
-
Secure Account
|
|
287
|
-
</Button>
|
|
288
|
-
<Button size="sm" variant="outline">
|
|
289
|
-
This was me
|
|
290
|
-
</Button>
|
|
291
|
-
</div>
|
|
292
|
-
</AlertDescription>
|
|
293
|
-
</Alert>;
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
### Estado del Sistema con Progress
|
|
297
|
-
|
|
298
|
-
```tsx
|
|
299
|
-
import { WifiOffIcon } from "lucide-react";
|
|
300
|
-
import { Progress } from "@adamosuiteservices/ui/progress";
|
|
301
|
-
|
|
302
|
-
<Alert variant="destructive">
|
|
303
|
-
<WifiOffIcon />
|
|
304
|
-
<AlertTitle>Service outage detected</AlertTitle>
|
|
305
|
-
<AlertDescription>
|
|
306
|
-
<p>We're experiencing connectivity issues with our primary data center.</p>
|
|
307
|
-
<div className="mt-3">
|
|
308
|
-
<div className="flex gap-2 items-center justify-between mb-2">
|
|
309
|
-
<span className="text-sm">Recovery Progress</span>
|
|
310
|
-
<span className="text-sm">75%</span>
|
|
311
|
-
</div>
|
|
312
|
-
<Progress value={75} variant="destructive" className="h-2" />
|
|
313
|
-
</div>
|
|
314
|
-
<p className="mt-2 text-sm">Estimated resolution: 15 minutes</p>
|
|
315
|
-
</AlertDescription>
|
|
316
|
-
</Alert>;
|
|
317
|
-
```
|
|
318
|
-
|
|
319
|
-
### Notificación con Iconos Secundarios
|
|
320
|
-
|
|
321
|
-
```tsx
|
|
322
|
-
import { CalendarIcon, ClockIcon, MapPinIcon, UsersIcon } from "lucide-react";
|
|
323
|
-
|
|
324
|
-
<Alert>
|
|
325
|
-
<CalendarIcon />
|
|
326
|
-
<AlertTitle>Meeting reminder</AlertTitle>
|
|
327
|
-
<AlertDescription>
|
|
328
|
-
<p>Your meeting with the design team starts in 15 minutes.</p>
|
|
329
|
-
<div className="mt-3 space-y-1 text-sm">
|
|
330
|
-
<div className="flex items-center gap-2">
|
|
331
|
-
<ClockIcon className="h-3 w-3" />
|
|
332
|
-
<span>3:00 PM - 4:00 PM</span>
|
|
333
|
-
</div>
|
|
334
|
-
<div className="flex items-center gap-2">
|
|
335
|
-
<MapPinIcon className="h-3 w-3" />
|
|
336
|
-
<span>Conference Room B</span>
|
|
337
|
-
</div>
|
|
338
|
-
<div className="flex items-center gap-2">
|
|
339
|
-
<UsersIcon className="h-3 w-3" />
|
|
340
|
-
<span>5 attendees</span>
|
|
341
|
-
</div>
|
|
342
|
-
</div>
|
|
343
|
-
</AlertDescription>
|
|
344
|
-
</Alert>;
|
|
345
|
-
```
|
|
346
|
-
|
|
347
|
-
### Alert de Performance con Métricas
|
|
348
|
-
|
|
349
|
-
```tsx
|
|
350
|
-
import { ZapIcon } from "lucide-react";
|
|
351
|
-
|
|
352
|
-
<Alert variant="success">
|
|
353
|
-
<ZapIcon />
|
|
354
|
-
<AlertTitle>Performance optimized</AlertTitle>
|
|
355
|
-
<AlertDescription>
|
|
356
|
-
<p>Your application performance has been automatically optimized.</p>
|
|
357
|
-
<div className="mt-3 grid grid-cols-2 gap-2 text-sm">
|
|
358
|
-
<div className="flex gap-4 justify-between">
|
|
359
|
-
<span>Load time:</span>
|
|
360
|
-
<span className="text-green-600">-45%</span>
|
|
361
|
-
</div>
|
|
362
|
-
<div className="flex gap-4 justify-between">
|
|
363
|
-
<span>Memory usage:</span>
|
|
364
|
-
<span className="text-green-600">-23%</span>
|
|
365
|
-
</div>
|
|
366
|
-
<div className="flex gap-4 justify-between">
|
|
367
|
-
<span>CPU usage:</span>
|
|
368
|
-
<span className="text-green-600">-31%</span>
|
|
369
|
-
</div>
|
|
370
|
-
<div className="flex gap-4 justify-between">
|
|
371
|
-
<span>Battery life:</span>
|
|
372
|
-
<span className="text-green-600">+18%</span>
|
|
373
|
-
</div>
|
|
374
|
-
</div>
|
|
375
|
-
</AlertDescription>
|
|
376
|
-
</Alert>;
|
|
377
|
-
```
|
|
378
|
-
|
|
379
|
-
### Almacenamiento con Progreso y Acciones
|
|
380
|
-
|
|
381
|
-
```tsx
|
|
382
|
-
import { AlertTriangleIcon } from "lucide-react";
|
|
383
|
-
import { Progress } from "@adamosuiteservices/ui/progress";
|
|
384
|
-
import { Button } from "@adamosuiteservices/ui/button";
|
|
385
|
-
|
|
386
|
-
<Alert variant="warning">
|
|
387
|
-
<AlertTriangleIcon />
|
|
388
|
-
<AlertTitle>Storage almost full</AlertTitle>
|
|
389
|
-
<AlertDescription>
|
|
390
|
-
<p>
|
|
391
|
-
Your storage is 89% full. Consider cleaning up files or upgrading your
|
|
392
|
-
plan.
|
|
393
|
-
</p>
|
|
394
|
-
<div className="mt-3 space-y-2 text-sm">
|
|
395
|
-
<div className="flex justify-between">
|
|
396
|
-
<span>Used space:</span>
|
|
397
|
-
<span>89.2 GB of 100 GB</span>
|
|
398
|
-
</div>
|
|
399
|
-
<Progress value={89} variant="warning" className="h-2" />
|
|
400
|
-
<div className="grid grid-cols-2 gap-4 mt-3">
|
|
401
|
-
<div>
|
|
402
|
-
<p className="font-medium">Largest folders:</p>
|
|
403
|
-
<ul className="mt-1 space-y-1">
|
|
404
|
-
<li>Photos: 45.2 GB</li>
|
|
405
|
-
<li>Videos: 23.8 GB</li>
|
|
406
|
-
<li>Documents: 12.1 GB</li>
|
|
407
|
-
</ul>
|
|
408
|
-
</div>
|
|
409
|
-
<div className="space-y-2">
|
|
410
|
-
<Button size="sm" className="w-full">
|
|
411
|
-
Upgrade Storage
|
|
412
|
-
</Button>
|
|
413
|
-
<Button size="sm" variant="outline" className="w-full">
|
|
414
|
-
Clean Up Files
|
|
415
|
-
</Button>
|
|
416
|
-
</div>
|
|
417
|
-
</div>
|
|
418
|
-
</div>
|
|
419
|
-
</AlertDescription>
|
|
420
|
-
</Alert>;
|
|
421
|
-
```
|
|
422
|
-
|
|
423
|
-
### E-commerce: Orden Enviada
|
|
424
|
-
|
|
425
|
-
```tsx
|
|
426
|
-
import { TruckIcon } from "lucide-react";
|
|
427
|
-
import { Button } from "@adamosuiteservices/ui/button";
|
|
428
|
-
|
|
429
|
-
<Alert variant="success">
|
|
430
|
-
<TruckIcon />
|
|
431
|
-
<AlertTitle>Order shipped!</AlertTitle>
|
|
432
|
-
<AlertDescription>
|
|
433
|
-
<p>Your order #12345 has been shipped and is on its way to you.</p>
|
|
434
|
-
<div className="mt-3 space-y-1 text-sm">
|
|
435
|
-
<div className="flex gap-4 justify-between">
|
|
436
|
-
<span>Tracking number:</span>
|
|
437
|
-
<span className="font-mono">1Z999AA1234567890</span>
|
|
438
|
-
</div>
|
|
439
|
-
<div className="flex gap-4 justify-between">
|
|
440
|
-
<span>Estimated delivery:</span>
|
|
441
|
-
<span>Tomorrow, Oct 26</span>
|
|
442
|
-
</div>
|
|
443
|
-
<div className="flex gap-4 justify-between">
|
|
444
|
-
<span>Carrier:</span>
|
|
445
|
-
<span>UPS</span>
|
|
446
|
-
</div>
|
|
447
|
-
</div>
|
|
448
|
-
<Button size="sm" className="mt-3">
|
|
449
|
-
Track Package
|
|
450
|
-
</Button>
|
|
451
|
-
</AlertDescription>
|
|
452
|
-
</Alert>;
|
|
453
|
-
```
|
|
454
|
-
|
|
455
|
-
### Alert Interactivo con Checkboxes
|
|
456
|
-
|
|
457
|
-
```tsx
|
|
458
|
-
import { ShieldCheckIcon } from "lucide-react";
|
|
459
|
-
import { Badge } from "@adamosuiteservices/ui/badge";
|
|
460
|
-
import { Checkbox } from "@adamosuiteservices/ui/checkbox";
|
|
461
|
-
import { Button } from "@adamosuiteservices/ui/button";
|
|
462
|
-
|
|
463
|
-
<Alert>
|
|
464
|
-
<ShieldCheckIcon />
|
|
465
|
-
<AlertTitle>Cookie preferences</AlertTitle>
|
|
466
|
-
<AlertDescription>
|
|
467
|
-
<p>We use cookies to improve your experience and analyze site usage.</p>
|
|
468
|
-
<div className="mt-3 space-y-3">
|
|
469
|
-
<div className="space-y-2">
|
|
470
|
-
<div className="flex items-center justify-between">
|
|
471
|
-
<span className="text-sm">Essential cookies</span>
|
|
472
|
-
<Badge variant="secondary">Required</Badge>
|
|
473
|
-
</div>
|
|
474
|
-
<div className="flex items-center justify-between">
|
|
475
|
-
<span className="text-sm">Analytics cookies</span>
|
|
476
|
-
<Checkbox defaultChecked className="rounded" />
|
|
477
|
-
</div>
|
|
478
|
-
<div className="flex items-center justify-between">
|
|
479
|
-
<span className="text-sm">Marketing cookies</span>
|
|
480
|
-
<Checkbox className="rounded" />
|
|
481
|
-
</div>
|
|
482
|
-
</div>
|
|
483
|
-
<div className="flex gap-2">
|
|
484
|
-
<Button size="sm">Accept All</Button>
|
|
485
|
-
<Button size="sm" variant="outline">
|
|
486
|
-
Save Preferences
|
|
487
|
-
</Button>
|
|
488
|
-
<Button size="sm" variant="ghost">
|
|
489
|
-
Reject All
|
|
490
|
-
</Button>
|
|
491
|
-
</div>
|
|
492
|
-
</div>
|
|
493
|
-
</AlertDescription>
|
|
494
|
-
</Alert>;
|
|
495
|
-
```
|
|
496
|
-
|
|
497
|
-
### Update con Lista y Botones
|
|
498
|
-
|
|
499
|
-
```tsx
|
|
500
|
-
import { DownloadIcon } from "lucide-react";
|
|
501
|
-
import { Button } from "@adamosuiteservices/ui/button";
|
|
502
|
-
|
|
503
|
-
<Alert>
|
|
504
|
-
<DownloadIcon />
|
|
505
|
-
<AlertTitle>App update available</AlertTitle>
|
|
506
|
-
<AlertDescription>
|
|
507
|
-
<p>
|
|
508
|
-
Version 2.1.0 is now available with bug fixes and performance
|
|
509
|
-
improvements.
|
|
510
|
-
</p>
|
|
511
|
-
<div className="mt-3 space-y-2">
|
|
512
|
-
<div className="text-sm">
|
|
513
|
-
<p className="font-medium">What's new:</p>
|
|
514
|
-
<ul className="list-disc list-inside mt-1 space-y-1">
|
|
515
|
-
<li>Improved loading times</li>
|
|
516
|
-
<li>Fixed dark mode issues</li>
|
|
517
|
-
<li>Enhanced security</li>
|
|
518
|
-
</ul>
|
|
519
|
-
</div>
|
|
520
|
-
<div className="flex gap-2">
|
|
521
|
-
<Button size="sm">Update Now</Button>
|
|
522
|
-
<Button size="sm" variant="outline">
|
|
523
|
-
Remind Me Later
|
|
524
|
-
</Button>
|
|
525
|
-
<Button size="sm" variant="ghost">
|
|
526
|
-
Skip This Version
|
|
527
|
-
</Button>
|
|
528
|
-
</div>
|
|
529
|
-
</div>
|
|
530
|
-
</AlertDescription>
|
|
531
|
-
</Alert>;
|
|
532
|
-
```
|
|
533
|
-
|
|
534
|
-
## Casos de Uso Comunes
|
|
535
|
-
|
|
536
|
-
### Validación de Formularios
|
|
537
|
-
|
|
538
|
-
```tsx
|
|
539
|
-
<Alert variant="destructive">
|
|
540
|
-
<XCircleIcon />
|
|
541
|
-
<AlertTitle>Form validation failed</AlertTitle>
|
|
542
|
-
<AlertDescription>
|
|
543
|
-
Please correct the following errors before submitting.
|
|
544
|
-
</AlertDescription>
|
|
545
|
-
</Alert>
|
|
546
|
-
```
|
|
547
|
-
|
|
548
|
-
### Confirmación de Acción
|
|
549
|
-
|
|
550
|
-
```tsx
|
|
551
|
-
<Alert variant="success">
|
|
552
|
-
<CheckCircle2Icon />
|
|
553
|
-
<AlertTitle>Profile updated</AlertTitle>
|
|
554
|
-
<AlertDescription>
|
|
555
|
-
Your changes have been saved successfully.
|
|
556
|
-
</AlertDescription>
|
|
557
|
-
</Alert>
|
|
558
|
-
```
|
|
559
|
-
|
|
560
|
-
### Mantenimiento Programado
|
|
561
|
-
|
|
562
|
-
```tsx
|
|
563
|
-
<Alert variant="warning">
|
|
564
|
-
<AlertTriangleIcon />
|
|
565
|
-
<AlertTitle>Planned maintenance scheduled</AlertTitle>
|
|
566
|
-
<AlertDescription>
|
|
567
|
-
System maintenance tonight from 2:00 AM to 4:00 AM PST.
|
|
568
|
-
</AlertDescription>
|
|
569
|
-
</Alert>
|
|
570
|
-
```
|
|
571
|
-
|
|
572
|
-
### Sistema Operativo
|
|
573
|
-
|
|
574
|
-
```tsx
|
|
575
|
-
<Alert variant="success">
|
|
576
|
-
<ServerIcon />
|
|
577
|
-
<AlertTitle>All systems operational</AlertTitle>
|
|
578
|
-
<AlertDescription>
|
|
579
|
-
All services running normally. No issues detected.
|
|
580
|
-
</AlertDescription>
|
|
581
|
-
</Alert>
|
|
582
|
-
```
|
|
583
|
-
|
|
584
|
-
### Información de Backup
|
|
585
|
-
|
|
586
|
-
```tsx
|
|
587
|
-
<Alert>
|
|
588
|
-
<ArchiveIcon />
|
|
589
|
-
<AlertTitle>Backup completed</AlertTitle>
|
|
590
|
-
<AlertDescription>
|
|
591
|
-
Daily backup completed. 1,247 files backed up to cloud storage.
|
|
592
|
-
</AlertDescription>
|
|
593
|
-
</Alert>
|
|
594
|
-
```
|
|
595
|
-
|
|
596
|
-
## Mejores Prácticas
|
|
597
|
-
|
|
598
|
-
### Iconos Recomendados (lucide-react)
|
|
599
|
-
|
|
600
|
-
- **Default**: `InfoIcon`, `BellIcon`, `MailIcon`
|
|
601
|
-
- **Success**: `CheckCircle2Icon`, `CheckIcon`, `ShieldCheckIcon`
|
|
602
|
-
- **Warning**: `AlertTriangleIcon`, `AlertCircleIcon`
|
|
603
|
-
- **Destructive**: `XCircleIcon`, `AlertTriangleIcon`, `ShieldAlertIcon`
|
|
604
|
-
|
|
605
|
-
### Estructura de Contenido
|
|
606
|
-
|
|
607
|
-
```tsx
|
|
608
|
-
<Alert variant="...">
|
|
609
|
-
{/* 1. Icono (opcional, directo como hijo) */}
|
|
610
|
-
<IconComponent />
|
|
611
|
-
|
|
612
|
-
{/* 2. Título (opcional, breve y descriptivo) */}
|
|
613
|
-
<AlertTitle>Short descriptive title</AlertTitle>
|
|
614
|
-
|
|
615
|
-
{/* 3. Descripción (puede incluir contenido rico) */}
|
|
616
|
-
<AlertDescription>
|
|
617
|
-
<p>Main message goes here.</p>
|
|
618
|
-
{/* Contenido adicional: listas, botones, progress, etc. */}
|
|
619
|
-
</AlertDescription>
|
|
620
|
-
</Alert>
|
|
621
|
-
```
|
|
622
|
-
|
|
623
|
-
### Cuándo Usar Cada Variante
|
|
624
|
-
|
|
625
|
-
- **default**: Información general, notificaciones neutras
|
|
626
|
-
- **success**: Confirmaciones, operaciones completadas con éxito
|
|
627
|
-
- **warning**: Advertencias, límites próximos, acciones recomendadas
|
|
628
|
-
- **destructive**: Errores críticos, fallos de validación, acciones bloqueadas
|
|
629
|
-
|
|
630
|
-
### Acciones en Alerts
|
|
631
|
-
|
|
632
|
-
Para alerts con botones de acción:
|
|
633
|
-
|
|
634
|
-
```tsx
|
|
635
|
-
<AlertDescription>
|
|
636
|
-
<p>Message text</p>
|
|
637
|
-
<div className="mt-3 flex gap-2">
|
|
638
|
-
<Button size="sm">Primary Action</Button>
|
|
639
|
-
<Button size="sm" variant="outline">
|
|
640
|
-
Secondary
|
|
641
|
-
</Button>
|
|
642
|
-
</div>
|
|
643
|
-
</AlertDescription>
|
|
644
|
-
```
|
|
645
|
-
|
|
646
|
-
## Notas de Implementación
|
|
647
|
-
|
|
648
|
-
- Basado en CVA (class-variance-authority) para variantes
|
|
649
|
-
- Grid con selector CSS `has-[>svg]` para detección automática de iconos
|
|
650
|
-
- Usa sistema de slots con `data-slot` para composición
|
|
651
|
-
- Colores de variantes usan tokens CSS personalizados
|
|
652
|
-
- El icono debe ser hijo directo (no dentro de AlertTitle/AlertDescription)
|
|
653
|
-
- Padding horizontal: 1rem (px-4)
|
|
654
|
-
- Padding vertical: 0.75rem (py-3)
|
|
655
|
-
- Border radius: 0.5rem (rounded-lg)
|
|
656
|
-
|
|
657
|
-
## Accesibilidad
|
|
658
|
-
|
|
659
|
-
- ✅ Rol ARIA `role="alert"` aplicado automáticamente
|
|
660
|
-
- ✅ Screen readers anunciarán el contenido como alerta importante
|
|
661
|
-
- ✅ Contraste de colores cumple WCAG AA en todas las variantes
|
|
662
|
-
- ✅ Texto descriptivo en lugar de solo iconos
|
|
663
|
-
- ✅ Botones dentro de alerts mantienen navegación por teclado
|
|
664
|
-
- ⚠️ Para alerts dinámicos (que aparecen después de carga), considera usar `role="status"` o `aria-live="polite"` si no son urgentes
|
|
665
|
-
|
|
666
|
-
## Referencias
|
|
667
|
-
|
|
668
|
-
- Radix UI primitives: https://www.radix-ui.com/
|
|
669
|
-
- shadcn/ui Alert: https://ui.shadcn.com/docs/components/alert
|
|
670
|
-
- ARIA alert role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
|
|
671
|
-
- Lucide Icons: https://lucide.dev/
|
|
1
|
+
# Alert Component
|
|
2
|
+
|
|
3
|
+
## Descripción
|
|
4
|
+
|
|
5
|
+
Componente versátil para mostrar **mensajes importantes** que requieren la atención del usuario. Usa un sistema de grid inteligente para iconos opcionales, soporta 4 variantes de color, y permite contenido rico con botones, listas, progress bars y más.
|
|
6
|
+
|
|
7
|
+
## Características
|
|
8
|
+
|
|
9
|
+
- ✅ 4 variantes visuales (default, destructive, success, warning)
|
|
10
|
+
- ✅ Grid automático para iconos opcionales
|
|
11
|
+
- ✅ Soporta título solo, descripción solo, o ambos
|
|
12
|
+
- ✅ Contenido rico: botones, progress, checkboxes, badges
|
|
13
|
+
- ✅ Rol ARIA "alert" para accesibilidad
|
|
14
|
+
- ✅ Iconos auto-dimensionados (size-4)
|
|
15
|
+
- ✅ Line clamp en títulos largos
|
|
16
|
+
- ✅ Sistema de slots para composición
|
|
17
|
+
|
|
18
|
+
## Importación
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import {
|
|
22
|
+
Alert,
|
|
23
|
+
AlertTitle,
|
|
24
|
+
AlertDescription,
|
|
25
|
+
} from "@adamosuiteservices/ui/alert";
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Uso Básico
|
|
29
|
+
|
|
30
|
+
### Alert Completo (Icono + Título + Descripción)
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { InfoIcon } from "lucide-react";
|
|
34
|
+
|
|
35
|
+
<Alert>
|
|
36
|
+
<InfoIcon />
|
|
37
|
+
<AlertTitle>Heads up!</AlertTitle>
|
|
38
|
+
<AlertDescription>
|
|
39
|
+
You can add components and dependencies to your app using the cli.
|
|
40
|
+
</AlertDescription>
|
|
41
|
+
</Alert>;
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Solo Título con Icono
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { CheckCircle2Icon } from "lucide-react";
|
|
48
|
+
|
|
49
|
+
<Alert variant="success">
|
|
50
|
+
<CheckCircle2Icon />
|
|
51
|
+
<AlertTitle>Your order has been processed!</AlertTitle>
|
|
52
|
+
</Alert>;
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Solo Descripción con Icono
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { InfoIcon } from "lucide-react";
|
|
59
|
+
|
|
60
|
+
<Alert>
|
|
61
|
+
<InfoIcon />
|
|
62
|
+
<AlertDescription>
|
|
63
|
+
This is an alert with only a description. Sometimes you don't need a title.
|
|
64
|
+
</AlertDescription>
|
|
65
|
+
</Alert>;
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Sin Icono
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
<Alert>
|
|
72
|
+
<AlertTitle>Update available</AlertTitle>
|
|
73
|
+
<AlertDescription>
|
|
74
|
+
A new software update is available. You can now update your app.
|
|
75
|
+
</AlertDescription>
|
|
76
|
+
</Alert>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Variantes
|
|
80
|
+
|
|
81
|
+
### Default (Información General)
|
|
82
|
+
|
|
83
|
+
Para mensajes informativos neutrales:
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import { InfoIcon } from "lucide-react";
|
|
87
|
+
|
|
88
|
+
<Alert variant="default">
|
|
89
|
+
<InfoIcon />
|
|
90
|
+
<AlertTitle>Default variant</AlertTitle>
|
|
91
|
+
<AlertDescription>
|
|
92
|
+
This is the default alert variant for general information.
|
|
93
|
+
</AlertDescription>
|
|
94
|
+
</Alert>;
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
**Estilos aplicados**:
|
|
98
|
+
|
|
99
|
+
- Fondo: `bg-card` (blanco/gris claro según tema)
|
|
100
|
+
- Texto: `text-card-foreground`
|
|
101
|
+
- Uso: Información general, tips, avisos neutrales
|
|
102
|
+
|
|
103
|
+
### Success (Operaciones Exitosas)
|
|
104
|
+
|
|
105
|
+
Para confirmaciones y feedback positivo:
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import { CheckCircle2Icon } from "lucide-react";
|
|
109
|
+
|
|
110
|
+
<Alert variant="success">
|
|
111
|
+
<CheckCircle2Icon />
|
|
112
|
+
<AlertTitle>Success</AlertTitle>
|
|
113
|
+
<AlertDescription>
|
|
114
|
+
Your changes have been saved successfully.
|
|
115
|
+
</AlertDescription>
|
|
116
|
+
</Alert>;
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
**Estilos aplicados**:
|
|
120
|
+
|
|
121
|
+
- Fondo: `bg-success-50` (verde claro)
|
|
122
|
+
- Texto título/icono: `text-success` (verde)
|
|
123
|
+
- Texto descripción: `text-success/90` (verde 90% opacidad)
|
|
124
|
+
- Uso: Confirmaciones, operaciones completadas, validaciones exitosas
|
|
125
|
+
|
|
126
|
+
### Warning (Advertencias)
|
|
127
|
+
|
|
128
|
+
Para mensajes de precaución que requieren atención:
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
import { AlertTriangleIcon } from "lucide-react";
|
|
132
|
+
|
|
133
|
+
<Alert variant="warning">
|
|
134
|
+
<AlertTriangleIcon />
|
|
135
|
+
<AlertTitle>Warning</AlertTitle>
|
|
136
|
+
<AlertDescription>
|
|
137
|
+
Your storage is running low. Consider upgrading your plan.
|
|
138
|
+
</AlertDescription>
|
|
139
|
+
</Alert>;
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
**Estilos aplicados**:
|
|
143
|
+
|
|
144
|
+
- Fondo: `bg-warning-50` (naranja/amarillo claro)
|
|
145
|
+
- Texto título/icono: `text-warning` (naranja/amarillo)
|
|
146
|
+
- Texto descripción: `text-warning/90`
|
|
147
|
+
- Uso: Advertencias, límites cercanos, acciones recomendadas
|
|
148
|
+
|
|
149
|
+
### Destructive (Errores Críticos)
|
|
150
|
+
|
|
151
|
+
Para errores, fallos y mensajes críticos:
|
|
152
|
+
|
|
153
|
+
```tsx
|
|
154
|
+
import { XCircleIcon } from "lucide-react";
|
|
155
|
+
|
|
156
|
+
<Alert variant="destructive">
|
|
157
|
+
<XCircleIcon />
|
|
158
|
+
<AlertTitle>Error</AlertTitle>
|
|
159
|
+
<AlertDescription>
|
|
160
|
+
Your session has expired. Please log in again.
|
|
161
|
+
</AlertDescription>
|
|
162
|
+
</Alert>;
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
**Estilos aplicados**:
|
|
166
|
+
|
|
167
|
+
- Fondo: `bg-destructive-50` (rojo claro)
|
|
168
|
+
- Texto título/icono: `text-destructive` (rojo)
|
|
169
|
+
- Texto descripción: `text-destructive/90`
|
|
170
|
+
- Uso: Errores, fallos de validación, acciones bloqueadas
|
|
171
|
+
|
|
172
|
+
## Props
|
|
173
|
+
|
|
174
|
+
### Alert (Root)
|
|
175
|
+
|
|
176
|
+
Contenedor principal del alert con rol ARIA.
|
|
177
|
+
|
|
178
|
+
| Prop | Tipo | Default | Descripción |
|
|
179
|
+
| --------- | ------------------------------------------------------ | ----------- | -------------------------------------- |
|
|
180
|
+
| variant | `"default" \| "destructive" \| "success" \| "warning"` | `"default"` | Variante visual del alert |
|
|
181
|
+
| className | `string` | - | Clases CSS adicionales |
|
|
182
|
+
| children | `ReactNode` | - | Contenido (icono, título, descripción) |
|
|
183
|
+
| ...props | `HTMLAttributes<HTMLDivElement>` | - | Props nativas de div |
|
|
184
|
+
|
|
185
|
+
**Atributos aplicados automáticamente**:
|
|
186
|
+
|
|
187
|
+
- `data-slot="alert"`: Para identificación interna
|
|
188
|
+
- `role="alert"`: Accesibilidad ARIA
|
|
189
|
+
|
|
190
|
+
### AlertTitle
|
|
191
|
+
|
|
192
|
+
Título del alert con line clamp automático.
|
|
193
|
+
|
|
194
|
+
| Prop | Tipo | Descripción |
|
|
195
|
+
| --------- | -------------------------------- | ---------------------------- |
|
|
196
|
+
| className | `string` | Clases CSS adicionales |
|
|
197
|
+
| children | `ReactNode` | Texto o contenido del título |
|
|
198
|
+
| ...props | `HTMLAttributes<HTMLDivElement>` | Props nativas de div |
|
|
199
|
+
|
|
200
|
+
**Características**:
|
|
201
|
+
|
|
202
|
+
- `line-clamp-1`: Trunca automáticamente textos largos
|
|
203
|
+
- `font-medium`: Peso de fuente medium
|
|
204
|
+
- `tracking-tight`: Letter spacing ajustado
|
|
205
|
+
- `min-h-4`: Altura mínima de 1rem
|
|
206
|
+
- `col-start-2`: Inicia en segunda columna del grid (después del icono)
|
|
207
|
+
|
|
208
|
+
### AlertDescription
|
|
209
|
+
|
|
210
|
+
Contenedor de la descripción con soporte para contenido rico.
|
|
211
|
+
|
|
212
|
+
| Prop | Tipo | Descripción |
|
|
213
|
+
| --------- | -------------------------------- | ---------------------------------------- |
|
|
214
|
+
| className | `string` | Clases CSS adicionales |
|
|
215
|
+
| children | `ReactNode` | Contenido (texto, listas, botones, etc.) |
|
|
216
|
+
| ...props | `HTMLAttributes<HTMLDivElement>` | Props nativas de div |
|
|
217
|
+
|
|
218
|
+
**Características**:
|
|
219
|
+
|
|
220
|
+
- `text-muted-foreground`: Color de texto secundario (sobrescrito por variantes)
|
|
221
|
+
- `grid`: Contenedor grid interno
|
|
222
|
+
- `justify-items-start`: Alinea items a la izquierda
|
|
223
|
+
- `gap-1`: Espaciado de 0.25rem entre elementos
|
|
224
|
+
- `[&_p]:leading-relaxed`: Line height relajado para párrafos
|
|
225
|
+
- `col-start-2`: Inicia en segunda columna del grid
|
|
226
|
+
|
|
227
|
+
## Sistema de Grid Inteligente
|
|
228
|
+
|
|
229
|
+
El Alert usa CSS Grid con **detección automática de iconos**:
|
|
230
|
+
|
|
231
|
+
### Sin Icono
|
|
232
|
+
|
|
233
|
+
```css
|
|
234
|
+
grid-cols-[0_1fr]
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
- Columna 1: 0px (oculta)
|
|
238
|
+
- Columna 2: Todo el espacio disponible
|
|
239
|
+
|
|
240
|
+
### Con Icono
|
|
241
|
+
|
|
242
|
+
```css
|
|
243
|
+
grid-cols-[calc(var(--adm-spacing)*4)_1fr]
|
|
244
|
+
has-[>svg]:gap-x-3
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
- Columna 1: 1rem (16px) para icono
|
|
248
|
+
- Columna 2: Todo el espacio restante
|
|
249
|
+
- Gap horizontal: 0.75rem (12px)
|
|
250
|
+
|
|
251
|
+
**Selector automático**: `has-[>svg]` detecta si hay un elemento SVG directo
|
|
252
|
+
|
|
253
|
+
### Estilos de Iconos
|
|
254
|
+
|
|
255
|
+
```css
|
|
256
|
+
[&>svg]:size-4 /* 16x16px */
|
|
257
|
+
[&>svg]:translate-y-0.5 /* Alineación vertical */
|
|
258
|
+
[&>svg]:text-current /* Hereda color de la variante */
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
## Ejemplos Avanzados
|
|
262
|
+
|
|
263
|
+
### Alert de Seguridad con Botones
|
|
264
|
+
|
|
265
|
+
```tsx
|
|
266
|
+
import { ShieldCheckIcon } from "lucide-react";
|
|
267
|
+
import { Button } from "@adamosuiteservices/ui/button";
|
|
268
|
+
|
|
269
|
+
<Alert variant="destructive">
|
|
270
|
+
<ShieldCheckIcon />
|
|
271
|
+
<AlertTitle>Security Notice: Suspicious Login Attempt</AlertTitle>
|
|
272
|
+
<AlertDescription>
|
|
273
|
+
<p>We detected a login attempt from an unrecognized device:</p>
|
|
274
|
+
<div className="mt-3 space-y-2 text-sm">
|
|
275
|
+
<div className="grid grid-cols-2 gap-2">
|
|
276
|
+
<span className="font-medium">Location:</span>
|
|
277
|
+
<span>San Francisco, CA</span>
|
|
278
|
+
<span className="font-medium">Device:</span>
|
|
279
|
+
<span>Chrome on Windows</span>
|
|
280
|
+
<span className="font-medium">Time:</span>
|
|
281
|
+
<span>2 minutes ago</span>
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
<div className="mt-4 flex gap-2">
|
|
285
|
+
<Button size="sm" variant="destructive">
|
|
286
|
+
Secure Account
|
|
287
|
+
</Button>
|
|
288
|
+
<Button size="sm" variant="outline">
|
|
289
|
+
This was me
|
|
290
|
+
</Button>
|
|
291
|
+
</div>
|
|
292
|
+
</AlertDescription>
|
|
293
|
+
</Alert>;
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
### Estado del Sistema con Progress
|
|
297
|
+
|
|
298
|
+
```tsx
|
|
299
|
+
import { WifiOffIcon } from "lucide-react";
|
|
300
|
+
import { Progress } from "@adamosuiteservices/ui/progress";
|
|
301
|
+
|
|
302
|
+
<Alert variant="destructive">
|
|
303
|
+
<WifiOffIcon />
|
|
304
|
+
<AlertTitle>Service outage detected</AlertTitle>
|
|
305
|
+
<AlertDescription>
|
|
306
|
+
<p>We're experiencing connectivity issues with our primary data center.</p>
|
|
307
|
+
<div className="mt-3">
|
|
308
|
+
<div className="flex gap-2 items-center justify-between mb-2">
|
|
309
|
+
<span className="text-sm">Recovery Progress</span>
|
|
310
|
+
<span className="text-sm">75%</span>
|
|
311
|
+
</div>
|
|
312
|
+
<Progress value={75} variant="destructive" className="h-2" />
|
|
313
|
+
</div>
|
|
314
|
+
<p className="mt-2 text-sm">Estimated resolution: 15 minutes</p>
|
|
315
|
+
</AlertDescription>
|
|
316
|
+
</Alert>;
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
### Notificación con Iconos Secundarios
|
|
320
|
+
|
|
321
|
+
```tsx
|
|
322
|
+
import { CalendarIcon, ClockIcon, MapPinIcon, UsersIcon } from "lucide-react";
|
|
323
|
+
|
|
324
|
+
<Alert>
|
|
325
|
+
<CalendarIcon />
|
|
326
|
+
<AlertTitle>Meeting reminder</AlertTitle>
|
|
327
|
+
<AlertDescription>
|
|
328
|
+
<p>Your meeting with the design team starts in 15 minutes.</p>
|
|
329
|
+
<div className="mt-3 space-y-1 text-sm">
|
|
330
|
+
<div className="flex items-center gap-2">
|
|
331
|
+
<ClockIcon className="h-3 w-3" />
|
|
332
|
+
<span>3:00 PM - 4:00 PM</span>
|
|
333
|
+
</div>
|
|
334
|
+
<div className="flex items-center gap-2">
|
|
335
|
+
<MapPinIcon className="h-3 w-3" />
|
|
336
|
+
<span>Conference Room B</span>
|
|
337
|
+
</div>
|
|
338
|
+
<div className="flex items-center gap-2">
|
|
339
|
+
<UsersIcon className="h-3 w-3" />
|
|
340
|
+
<span>5 attendees</span>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
</AlertDescription>
|
|
344
|
+
</Alert>;
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
### Alert de Performance con Métricas
|
|
348
|
+
|
|
349
|
+
```tsx
|
|
350
|
+
import { ZapIcon } from "lucide-react";
|
|
351
|
+
|
|
352
|
+
<Alert variant="success">
|
|
353
|
+
<ZapIcon />
|
|
354
|
+
<AlertTitle>Performance optimized</AlertTitle>
|
|
355
|
+
<AlertDescription>
|
|
356
|
+
<p>Your application performance has been automatically optimized.</p>
|
|
357
|
+
<div className="mt-3 grid grid-cols-2 gap-2 text-sm">
|
|
358
|
+
<div className="flex gap-4 justify-between">
|
|
359
|
+
<span>Load time:</span>
|
|
360
|
+
<span className="text-green-600">-45%</span>
|
|
361
|
+
</div>
|
|
362
|
+
<div className="flex gap-4 justify-between">
|
|
363
|
+
<span>Memory usage:</span>
|
|
364
|
+
<span className="text-green-600">-23%</span>
|
|
365
|
+
</div>
|
|
366
|
+
<div className="flex gap-4 justify-between">
|
|
367
|
+
<span>CPU usage:</span>
|
|
368
|
+
<span className="text-green-600">-31%</span>
|
|
369
|
+
</div>
|
|
370
|
+
<div className="flex gap-4 justify-between">
|
|
371
|
+
<span>Battery life:</span>
|
|
372
|
+
<span className="text-green-600">+18%</span>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
375
|
+
</AlertDescription>
|
|
376
|
+
</Alert>;
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
### Almacenamiento con Progreso y Acciones
|
|
380
|
+
|
|
381
|
+
```tsx
|
|
382
|
+
import { AlertTriangleIcon } from "lucide-react";
|
|
383
|
+
import { Progress } from "@adamosuiteservices/ui/progress";
|
|
384
|
+
import { Button } from "@adamosuiteservices/ui/button";
|
|
385
|
+
|
|
386
|
+
<Alert variant="warning">
|
|
387
|
+
<AlertTriangleIcon />
|
|
388
|
+
<AlertTitle>Storage almost full</AlertTitle>
|
|
389
|
+
<AlertDescription>
|
|
390
|
+
<p>
|
|
391
|
+
Your storage is 89% full. Consider cleaning up files or upgrading your
|
|
392
|
+
plan.
|
|
393
|
+
</p>
|
|
394
|
+
<div className="mt-3 space-y-2 text-sm">
|
|
395
|
+
<div className="flex justify-between">
|
|
396
|
+
<span>Used space:</span>
|
|
397
|
+
<span>89.2 GB of 100 GB</span>
|
|
398
|
+
</div>
|
|
399
|
+
<Progress value={89} variant="warning" className="h-2" />
|
|
400
|
+
<div className="grid grid-cols-2 gap-4 mt-3">
|
|
401
|
+
<div>
|
|
402
|
+
<p className="font-medium">Largest folders:</p>
|
|
403
|
+
<ul className="mt-1 space-y-1">
|
|
404
|
+
<li>Photos: 45.2 GB</li>
|
|
405
|
+
<li>Videos: 23.8 GB</li>
|
|
406
|
+
<li>Documents: 12.1 GB</li>
|
|
407
|
+
</ul>
|
|
408
|
+
</div>
|
|
409
|
+
<div className="space-y-2">
|
|
410
|
+
<Button size="sm" className="w-full">
|
|
411
|
+
Upgrade Storage
|
|
412
|
+
</Button>
|
|
413
|
+
<Button size="sm" variant="outline" className="w-full">
|
|
414
|
+
Clean Up Files
|
|
415
|
+
</Button>
|
|
416
|
+
</div>
|
|
417
|
+
</div>
|
|
418
|
+
</div>
|
|
419
|
+
</AlertDescription>
|
|
420
|
+
</Alert>;
|
|
421
|
+
```
|
|
422
|
+
|
|
423
|
+
### E-commerce: Orden Enviada
|
|
424
|
+
|
|
425
|
+
```tsx
|
|
426
|
+
import { TruckIcon } from "lucide-react";
|
|
427
|
+
import { Button } from "@adamosuiteservices/ui/button";
|
|
428
|
+
|
|
429
|
+
<Alert variant="success">
|
|
430
|
+
<TruckIcon />
|
|
431
|
+
<AlertTitle>Order shipped!</AlertTitle>
|
|
432
|
+
<AlertDescription>
|
|
433
|
+
<p>Your order #12345 has been shipped and is on its way to you.</p>
|
|
434
|
+
<div className="mt-3 space-y-1 text-sm">
|
|
435
|
+
<div className="flex gap-4 justify-between">
|
|
436
|
+
<span>Tracking number:</span>
|
|
437
|
+
<span className="font-mono">1Z999AA1234567890</span>
|
|
438
|
+
</div>
|
|
439
|
+
<div className="flex gap-4 justify-between">
|
|
440
|
+
<span>Estimated delivery:</span>
|
|
441
|
+
<span>Tomorrow, Oct 26</span>
|
|
442
|
+
</div>
|
|
443
|
+
<div className="flex gap-4 justify-between">
|
|
444
|
+
<span>Carrier:</span>
|
|
445
|
+
<span>UPS</span>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
<Button size="sm" className="mt-3">
|
|
449
|
+
Track Package
|
|
450
|
+
</Button>
|
|
451
|
+
</AlertDescription>
|
|
452
|
+
</Alert>;
|
|
453
|
+
```
|
|
454
|
+
|
|
455
|
+
### Alert Interactivo con Checkboxes
|
|
456
|
+
|
|
457
|
+
```tsx
|
|
458
|
+
import { ShieldCheckIcon } from "lucide-react";
|
|
459
|
+
import { Badge } from "@adamosuiteservices/ui/badge";
|
|
460
|
+
import { Checkbox } from "@adamosuiteservices/ui/checkbox";
|
|
461
|
+
import { Button } from "@adamosuiteservices/ui/button";
|
|
462
|
+
|
|
463
|
+
<Alert>
|
|
464
|
+
<ShieldCheckIcon />
|
|
465
|
+
<AlertTitle>Cookie preferences</AlertTitle>
|
|
466
|
+
<AlertDescription>
|
|
467
|
+
<p>We use cookies to improve your experience and analyze site usage.</p>
|
|
468
|
+
<div className="mt-3 space-y-3">
|
|
469
|
+
<div className="space-y-2">
|
|
470
|
+
<div className="flex items-center justify-between">
|
|
471
|
+
<span className="text-sm">Essential cookies</span>
|
|
472
|
+
<Badge variant="secondary">Required</Badge>
|
|
473
|
+
</div>
|
|
474
|
+
<div className="flex items-center justify-between">
|
|
475
|
+
<span className="text-sm">Analytics cookies</span>
|
|
476
|
+
<Checkbox defaultChecked className="rounded" />
|
|
477
|
+
</div>
|
|
478
|
+
<div className="flex items-center justify-between">
|
|
479
|
+
<span className="text-sm">Marketing cookies</span>
|
|
480
|
+
<Checkbox className="rounded" />
|
|
481
|
+
</div>
|
|
482
|
+
</div>
|
|
483
|
+
<div className="flex gap-2">
|
|
484
|
+
<Button size="sm">Accept All</Button>
|
|
485
|
+
<Button size="sm" variant="outline">
|
|
486
|
+
Save Preferences
|
|
487
|
+
</Button>
|
|
488
|
+
<Button size="sm" variant="ghost">
|
|
489
|
+
Reject All
|
|
490
|
+
</Button>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
</AlertDescription>
|
|
494
|
+
</Alert>;
|
|
495
|
+
```
|
|
496
|
+
|
|
497
|
+
### Update con Lista y Botones
|
|
498
|
+
|
|
499
|
+
```tsx
|
|
500
|
+
import { DownloadIcon } from "lucide-react";
|
|
501
|
+
import { Button } from "@adamosuiteservices/ui/button";
|
|
502
|
+
|
|
503
|
+
<Alert>
|
|
504
|
+
<DownloadIcon />
|
|
505
|
+
<AlertTitle>App update available</AlertTitle>
|
|
506
|
+
<AlertDescription>
|
|
507
|
+
<p>
|
|
508
|
+
Version 2.1.0 is now available with bug fixes and performance
|
|
509
|
+
improvements.
|
|
510
|
+
</p>
|
|
511
|
+
<div className="mt-3 space-y-2">
|
|
512
|
+
<div className="text-sm">
|
|
513
|
+
<p className="font-medium">What's new:</p>
|
|
514
|
+
<ul className="list-disc list-inside mt-1 space-y-1">
|
|
515
|
+
<li>Improved loading times</li>
|
|
516
|
+
<li>Fixed dark mode issues</li>
|
|
517
|
+
<li>Enhanced security</li>
|
|
518
|
+
</ul>
|
|
519
|
+
</div>
|
|
520
|
+
<div className="flex gap-2">
|
|
521
|
+
<Button size="sm">Update Now</Button>
|
|
522
|
+
<Button size="sm" variant="outline">
|
|
523
|
+
Remind Me Later
|
|
524
|
+
</Button>
|
|
525
|
+
<Button size="sm" variant="ghost">
|
|
526
|
+
Skip This Version
|
|
527
|
+
</Button>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
</AlertDescription>
|
|
531
|
+
</Alert>;
|
|
532
|
+
```
|
|
533
|
+
|
|
534
|
+
## Casos de Uso Comunes
|
|
535
|
+
|
|
536
|
+
### Validación de Formularios
|
|
537
|
+
|
|
538
|
+
```tsx
|
|
539
|
+
<Alert variant="destructive">
|
|
540
|
+
<XCircleIcon />
|
|
541
|
+
<AlertTitle>Form validation failed</AlertTitle>
|
|
542
|
+
<AlertDescription>
|
|
543
|
+
Please correct the following errors before submitting.
|
|
544
|
+
</AlertDescription>
|
|
545
|
+
</Alert>
|
|
546
|
+
```
|
|
547
|
+
|
|
548
|
+
### Confirmación de Acción
|
|
549
|
+
|
|
550
|
+
```tsx
|
|
551
|
+
<Alert variant="success">
|
|
552
|
+
<CheckCircle2Icon />
|
|
553
|
+
<AlertTitle>Profile updated</AlertTitle>
|
|
554
|
+
<AlertDescription>
|
|
555
|
+
Your changes have been saved successfully.
|
|
556
|
+
</AlertDescription>
|
|
557
|
+
</Alert>
|
|
558
|
+
```
|
|
559
|
+
|
|
560
|
+
### Mantenimiento Programado
|
|
561
|
+
|
|
562
|
+
```tsx
|
|
563
|
+
<Alert variant="warning">
|
|
564
|
+
<AlertTriangleIcon />
|
|
565
|
+
<AlertTitle>Planned maintenance scheduled</AlertTitle>
|
|
566
|
+
<AlertDescription>
|
|
567
|
+
System maintenance tonight from 2:00 AM to 4:00 AM PST.
|
|
568
|
+
</AlertDescription>
|
|
569
|
+
</Alert>
|
|
570
|
+
```
|
|
571
|
+
|
|
572
|
+
### Sistema Operativo
|
|
573
|
+
|
|
574
|
+
```tsx
|
|
575
|
+
<Alert variant="success">
|
|
576
|
+
<ServerIcon />
|
|
577
|
+
<AlertTitle>All systems operational</AlertTitle>
|
|
578
|
+
<AlertDescription>
|
|
579
|
+
All services running normally. No issues detected.
|
|
580
|
+
</AlertDescription>
|
|
581
|
+
</Alert>
|
|
582
|
+
```
|
|
583
|
+
|
|
584
|
+
### Información de Backup
|
|
585
|
+
|
|
586
|
+
```tsx
|
|
587
|
+
<Alert>
|
|
588
|
+
<ArchiveIcon />
|
|
589
|
+
<AlertTitle>Backup completed</AlertTitle>
|
|
590
|
+
<AlertDescription>
|
|
591
|
+
Daily backup completed. 1,247 files backed up to cloud storage.
|
|
592
|
+
</AlertDescription>
|
|
593
|
+
</Alert>
|
|
594
|
+
```
|
|
595
|
+
|
|
596
|
+
## Mejores Prácticas
|
|
597
|
+
|
|
598
|
+
### Iconos Recomendados (lucide-react)
|
|
599
|
+
|
|
600
|
+
- **Default**: `InfoIcon`, `BellIcon`, `MailIcon`
|
|
601
|
+
- **Success**: `CheckCircle2Icon`, `CheckIcon`, `ShieldCheckIcon`
|
|
602
|
+
- **Warning**: `AlertTriangleIcon`, `AlertCircleIcon`
|
|
603
|
+
- **Destructive**: `XCircleIcon`, `AlertTriangleIcon`, `ShieldAlertIcon`
|
|
604
|
+
|
|
605
|
+
### Estructura de Contenido
|
|
606
|
+
|
|
607
|
+
```tsx
|
|
608
|
+
<Alert variant="...">
|
|
609
|
+
{/* 1. Icono (opcional, directo como hijo) */}
|
|
610
|
+
<IconComponent />
|
|
611
|
+
|
|
612
|
+
{/* 2. Título (opcional, breve y descriptivo) */}
|
|
613
|
+
<AlertTitle>Short descriptive title</AlertTitle>
|
|
614
|
+
|
|
615
|
+
{/* 3. Descripción (puede incluir contenido rico) */}
|
|
616
|
+
<AlertDescription>
|
|
617
|
+
<p>Main message goes here.</p>
|
|
618
|
+
{/* Contenido adicional: listas, botones, progress, etc. */}
|
|
619
|
+
</AlertDescription>
|
|
620
|
+
</Alert>
|
|
621
|
+
```
|
|
622
|
+
|
|
623
|
+
### Cuándo Usar Cada Variante
|
|
624
|
+
|
|
625
|
+
- **default**: Información general, notificaciones neutras
|
|
626
|
+
- **success**: Confirmaciones, operaciones completadas con éxito
|
|
627
|
+
- **warning**: Advertencias, límites próximos, acciones recomendadas
|
|
628
|
+
- **destructive**: Errores críticos, fallos de validación, acciones bloqueadas
|
|
629
|
+
|
|
630
|
+
### Acciones en Alerts
|
|
631
|
+
|
|
632
|
+
Para alerts con botones de acción:
|
|
633
|
+
|
|
634
|
+
```tsx
|
|
635
|
+
<AlertDescription>
|
|
636
|
+
<p>Message text</p>
|
|
637
|
+
<div className="mt-3 flex gap-2">
|
|
638
|
+
<Button size="sm">Primary Action</Button>
|
|
639
|
+
<Button size="sm" variant="outline">
|
|
640
|
+
Secondary
|
|
641
|
+
</Button>
|
|
642
|
+
</div>
|
|
643
|
+
</AlertDescription>
|
|
644
|
+
```
|
|
645
|
+
|
|
646
|
+
## Notas de Implementación
|
|
647
|
+
|
|
648
|
+
- Basado en CVA (class-variance-authority) para variantes
|
|
649
|
+
- Grid con selector CSS `has-[>svg]` para detección automática de iconos
|
|
650
|
+
- Usa sistema de slots con `data-slot` para composición
|
|
651
|
+
- Colores de variantes usan tokens CSS personalizados
|
|
652
|
+
- El icono debe ser hijo directo (no dentro de AlertTitle/AlertDescription)
|
|
653
|
+
- Padding horizontal: 1rem (px-4)
|
|
654
|
+
- Padding vertical: 0.75rem (py-3)
|
|
655
|
+
- Border radius: 0.5rem (rounded-lg)
|
|
656
|
+
|
|
657
|
+
## Accesibilidad
|
|
658
|
+
|
|
659
|
+
- ✅ Rol ARIA `role="alert"` aplicado automáticamente
|
|
660
|
+
- ✅ Screen readers anunciarán el contenido como alerta importante
|
|
661
|
+
- ✅ Contraste de colores cumple WCAG AA en todas las variantes
|
|
662
|
+
- ✅ Texto descriptivo en lugar de solo iconos
|
|
663
|
+
- ✅ Botones dentro de alerts mantienen navegación por teclado
|
|
664
|
+
- ⚠️ Para alerts dinámicos (que aparecen después de carga), considera usar `role="status"` o `aria-live="polite"` si no son urgentes
|
|
665
|
+
|
|
666
|
+
## Referencias
|
|
667
|
+
|
|
668
|
+
- Radix UI primitives: https://www.radix-ui.com/
|
|
669
|
+
- shadcn/ui Alert: https://ui.shadcn.com/docs/components/alert
|
|
670
|
+
- ARIA alert role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
|
|
671
|
+
- Lucide Icons: https://lucide.dev/
|