@adamosuiteservices/ui 2.10.8 → 2.10.9
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/accordion-rounded.cjs +8 -8
- package/dist/accordion-rounded.js +16 -16
- package/dist/alert.cjs +4 -4
- package/dist/alert.js +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.js +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/colors.css +1 -1
- package/dist/dialog.cjs +1 -1
- package/dist/dialog.js +1 -1
- package/dist/field.cjs +1 -1
- package/dist/field.js +1 -1
- package/dist/{label-BPyIEopy.cjs → label-1jx6a0Sm.cjs} +3 -3
- package/dist/{label-CRkCfcdF.js → label-CrsELeIw.js} +11 -11
- package/dist/label.cjs +1 -1
- package/dist/label.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/table.cjs +4 -3
- package/dist/table.js +6 -5
- package/dist/tailwind-colors.css +1 -1
- package/dist/tailwind-theme.css +1 -1
- package/dist/themes.css +1 -1
- package/dist/toaster.cjs +1 -1
- package/dist/toaster.js +13 -13
- package/dist/typography.cjs +1 -1
- package/dist/typography.js +11 -11
- package/docs/components/layout/toaster.md +1 -1
- package/docs/components/ui/accordion-rounded.md +584 -584
- package/docs/components/ui/table.md +183 -183
- package/docs/components/ui/typography.md +8 -8
- package/package.json +1 -2
- package/dist/custom-layered-styles.css +0 -1
|
@@ -1,584 +1,584 @@
|
|
|
1
|
-
# Accordion Rounded Component
|
|
2
|
-
|
|
3
|
-
## Descripción
|
|
4
|
-
|
|
5
|
-
Variante especializada del componente Accordion diseñada para mostrar items con **bordes redondeados**, fondo gris claro, y soporte para **badges** en el trigger. Ideal para formularios de validación, procesos por pasos, y listas con estados visuales.
|
|
6
|
-
|
|
7
|
-
## Características Únicas
|
|
8
|
-
|
|
9
|
-
- ✅ Bordes completamente redondeados (rounded-2xl)
|
|
10
|
-
- ✅ Fondo gris claro en cada item
|
|
11
|
-
- ✅ Soporte nativo para badges en el trigger
|
|
12
|
-
- ✅ Iconos Plus/Minus para indicar estado
|
|
13
|
-
- ✅ Títulos en mayúsculas y estilo compacto
|
|
14
|
-
- ✅ Espaciado automático entre items
|
|
15
|
-
- ✅ Animaciones suaves de apertura/cierre
|
|
16
|
-
|
|
17
|
-
## Importación
|
|
18
|
-
|
|
19
|
-
```typescript
|
|
20
|
-
import {
|
|
21
|
-
Accordion,
|
|
22
|
-
AccordionContent,
|
|
23
|
-
AccordionItem,
|
|
24
|
-
AccordionTrigger,
|
|
25
|
-
} from "@adamosuiteservices/ui/accordion-rounded";
|
|
26
|
-
import { Icon } from "@adamosuiteservices/ui/icon"; // For badges with icons
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
**Nota**: Los nombres de exportación son los mismos que el Accordion regular para facilitar el intercambio entre variantes.
|
|
30
|
-
|
|
31
|
-
## Uso Básico
|
|
32
|
-
|
|
33
|
-
### Accordion Simple
|
|
34
|
-
|
|
35
|
-
```tsx
|
|
36
|
-
<Accordion type="single" collapsible>
|
|
37
|
-
<AccordionItem value="item-1">
|
|
38
|
-
<AccordionTrigger title="Basic Accordion Item" />
|
|
39
|
-
<AccordionContent>
|
|
40
|
-
<div className="p-4">
|
|
41
|
-
<p className="text-sm text-
|
|
42
|
-
This is a simple accordion with just a title and content.
|
|
43
|
-
</p>
|
|
44
|
-
</div>
|
|
45
|
-
</AccordionContent>
|
|
46
|
-
</AccordionItem>
|
|
47
|
-
</Accordion>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Con Badge
|
|
51
|
-
|
|
52
|
-
```tsx
|
|
53
|
-
import { Badge } from "@adamosuiteservices/ui/badge";
|
|
54
|
-
import { Icon } from "@adamosuiteservices/ui/icon";
|
|
55
|
-
|
|
56
|
-
<Accordion type="single" collapsible>
|
|
57
|
-
<AccordionItem value="item-1">
|
|
58
|
-
<AccordionTrigger
|
|
59
|
-
title="Name Matches"
|
|
60
|
-
badge={
|
|
61
|
-
<Badge variant="warning-medium" size="lg">
|
|
62
|
-
<Icon symbol="error" />2 matches found
|
|
63
|
-
</Badge>
|
|
64
|
-
}
|
|
65
|
-
/>
|
|
66
|
-
<AccordionContent>
|
|
67
|
-
<div className="p-4">
|
|
68
|
-
<p className="text-sm text-
|
|
69
|
-
Content with warning badge indicator.
|
|
70
|
-
</p>
|
|
71
|
-
</div>
|
|
72
|
-
</AccordionContent>
|
|
73
|
-
</AccordionItem>
|
|
74
|
-
</Accordion>;
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
## Props
|
|
78
|
-
|
|
79
|
-
### Accordion (Root)
|
|
80
|
-
|
|
81
|
-
Basado en Radix UI Accordion Root.
|
|
82
|
-
|
|
83
|
-
| Prop | Tipo | Default | Descripción |
|
|
84
|
-
| ------------- | ------------------------------------- | ------- | ------------------------------------------------------- |
|
|
85
|
-
| type | `"single" \| "multiple"` | - | **Requerido**. Tipo de accordion |
|
|
86
|
-
| collapsible | `boolean` | `false` | Solo para type="single". Permite cerrar el item abierto |
|
|
87
|
-
| defaultValue | `string \| string[]` | - | Valor(es) abierto(s) por defecto |
|
|
88
|
-
| value | `string \| string[]` | - | Valor(es) controlado(s) |
|
|
89
|
-
| onValueChange | `(value: string \| string[]) => void` | - | Callback al cambiar valores |
|
|
90
|
-
| disabled | `boolean` | `false` | Deshabilita todo el accordion |
|
|
91
|
-
| ...props | `HTMLAttributes<HTMLDivElement>` | - | Props nativas de div |
|
|
92
|
-
|
|
93
|
-
**type="single"**: Solo un item puede estar abierto a la vez.
|
|
94
|
-
**type="multiple"**: Múltiples items pueden estar abiertos simultáneamente.
|
|
95
|
-
|
|
96
|
-
### AccordionItem
|
|
97
|
-
|
|
98
|
-
Contenedor individual de cada item del accordion.
|
|
99
|
-
|
|
100
|
-
| Prop | Tipo | Descripción |
|
|
101
|
-
| --------- | ---------------------------- | ------------------------------------------- |
|
|
102
|
-
| value | `string` | **Requerido**. Identificador único del item |
|
|
103
|
-
| className | `string` | Clases adicionales |
|
|
104
|
-
| disabled | `boolean` | Deshabilita este item específico |
|
|
105
|
-
| ...props | Props de Radix AccordionItem | Props nativas |
|
|
106
|
-
|
|
107
|
-
**Estilos aplicados**:
|
|
108
|
-
|
|
109
|
-
- `rounded-2xl`: Bordes muy redondeados
|
|
110
|
-
- `bg-neutrals-50`: Fondo gris claro
|
|
111
|
-
- `mb-4`: Margen inferior de 1rem
|
|
112
|
-
- `last:mb-0`: Sin margen en el último item
|
|
113
|
-
|
|
114
|
-
### AccordionTrigger
|
|
115
|
-
|
|
116
|
-
Botón que controla la apertura/cierre del item.
|
|
117
|
-
|
|
118
|
-
| Prop | Tipo | Default | Descripción |
|
|
119
|
-
| --------- | ---------------------- | ------- | ------------------------------------------------- |
|
|
120
|
-
| title | `string` | - | Título del accordion (recomendado sobre children) |
|
|
121
|
-
| badge | `ReactNode` | - | Badge o indicador a mostrar (ej: Badge component) |
|
|
122
|
-
| className | `string` | - | Clases adicionales |
|
|
123
|
-
| children | `ReactNode` | - | Contenido alternativo si no usas title |
|
|
124
|
-
| ...props | `ButtonHTMLAttributes` | - | Props nativas de button |
|
|
125
|
-
|
|
126
|
-
**Características**:
|
|
127
|
-
|
|
128
|
-
- Título en mayúsculas automáticamente (uppercase)
|
|
129
|
-
- Icono add cuando está cerrado
|
|
130
|
-
- Icono remove cuando está abierto
|
|
131
|
-
- Transición suave de iconos
|
|
132
|
-
- Altura fija de 3.5rem (h-14)
|
|
133
|
-
- Text clamp para títulos largos
|
|
134
|
-
|
|
135
|
-
### AccordionContent
|
|
136
|
-
|
|
137
|
-
Contenedor del contenido que se expande/colapsa.
|
|
138
|
-
|
|
139
|
-
| Prop | Tipo | Descripción |
|
|
140
|
-
| --------- | ------------------------------- | ------------------------------------------------- |
|
|
141
|
-
| className | `string` | Clases adicionales (aplicadas al padding interno) |
|
|
142
|
-
| children | `ReactNode` | Contenido a mostrar |
|
|
143
|
-
| ...props | Props de Radix AccordionContent | Props nativas |
|
|
144
|
-
|
|
145
|
-
**Animaciones**:
|
|
146
|
-
|
|
147
|
-
- `animate-accordion-down`: Al abrir
|
|
148
|
-
- `animate-accordion-up`: Al cerrar
|
|
149
|
-
- Padding bottom de 1rem (pb-4)
|
|
150
|
-
|
|
151
|
-
## Variantes de Badge
|
|
152
|
-
|
|
153
|
-
### Success Badge
|
|
154
|
-
|
|
155
|
-
Para estados completados o validados.
|
|
156
|
-
|
|
157
|
-
```tsx
|
|
158
|
-
<AccordionTrigger
|
|
159
|
-
title="Verification Completed"
|
|
160
|
-
badge={
|
|
161
|
-
<Badge variant="success-medium" size="lg">
|
|
162
|
-
<Icon symbol="check_circle" />
|
|
163
|
-
All fields validated
|
|
164
|
-
</Badge>
|
|
165
|
-
}
|
|
166
|
-
/>
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
### Warning Badge
|
|
170
|
-
|
|
171
|
-
Para items que requieren atención.
|
|
172
|
-
|
|
173
|
-
```tsx
|
|
174
|
-
<AccordionTrigger
|
|
175
|
-
title="Name Matches"
|
|
176
|
-
badge={
|
|
177
|
-
<Badge variant="warning-medium" size="lg">
|
|
178
|
-
<Icon symbol="error" />2 matches found
|
|
179
|
-
</Badge>
|
|
180
|
-
}
|
|
181
|
-
/>
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
### Error/Destructive Badge
|
|
185
|
-
|
|
186
|
-
Para errores o validaciones fallidas.
|
|
187
|
-
|
|
188
|
-
```tsx
|
|
189
|
-
<AccordionTrigger
|
|
190
|
-
title="Failed Validation"
|
|
191
|
-
badge={
|
|
192
|
-
<Badge variant="destructive-medium" size="lg">
|
|
193
|
-
<Icon symbol="cancel" />3 errors detected
|
|
194
|
-
</Badge>
|
|
195
|
-
}
|
|
196
|
-
/>
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
### Info Badge
|
|
200
|
-
|
|
201
|
-
Para información adicional.
|
|
202
|
-
|
|
203
|
-
```tsx
|
|
204
|
-
<AccordionTrigger
|
|
205
|
-
title="Additional Information"
|
|
206
|
-
badge={
|
|
207
|
-
<Badge variant="default-medium" size="lg">
|
|
208
|
-
<Icon symbol="info" />
|
|
209
|
-
Read more
|
|
210
|
-
</Badge>
|
|
211
|
-
}
|
|
212
|
-
/>
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
### Text Only Badge
|
|
216
|
-
|
|
217
|
-
Sin icono.
|
|
218
|
-
|
|
219
|
-
```tsx
|
|
220
|
-
<AccordionTrigger
|
|
221
|
-
title="Custom Badge"
|
|
222
|
-
badge={
|
|
223
|
-
<Badge variant="muted" size="lg">
|
|
224
|
-
NEW
|
|
225
|
-
</Badge>
|
|
226
|
-
}
|
|
227
|
-
/>
|
|
228
|
-
```
|
|
229
|
-
|
|
230
|
-
## Ejemplos Avanzados
|
|
231
|
-
|
|
232
|
-
### Múltiples Items (Single Type)
|
|
233
|
-
|
|
234
|
-
Solo un item abierto a la vez:
|
|
235
|
-
|
|
236
|
-
```tsx
|
|
237
|
-
<Accordion type="single" collapsible>
|
|
238
|
-
<AccordionItem value="item-1">
|
|
239
|
-
<AccordionTrigger
|
|
240
|
-
title="Personal Information"
|
|
241
|
-
badge={
|
|
242
|
-
<Badge variant="warning-medium" size="lg">
|
|
243
|
-
<Icon symbol="error" />3 required fields
|
|
244
|
-
</Badge>
|
|
245
|
-
}
|
|
246
|
-
/>
|
|
247
|
-
<AccordionContent>
|
|
248
|
-
<div className="p-4 space-y-3">
|
|
249
|
-
<div className="rounded-lg border border-neutrals-200 p-3">
|
|
250
|
-
<h4 className="text-sm font-semibold text-
|
|
251
|
-
<p className="text-sm text-
|
|
252
|
-
</div>
|
|
253
|
-
{/* Más campos... */}
|
|
254
|
-
</div>
|
|
255
|
-
</AccordionContent>
|
|
256
|
-
</AccordionItem>
|
|
257
|
-
|
|
258
|
-
<AccordionItem value="item-2">
|
|
259
|
-
<AccordionTrigger
|
|
260
|
-
title="Address Details"
|
|
261
|
-
badge={
|
|
262
|
-
<Badge variant="success-medium" size="lg">
|
|
263
|
-
<Icon symbol="check_circle" />
|
|
264
|
-
Complete
|
|
265
|
-
</Badge>
|
|
266
|
-
}
|
|
267
|
-
/>
|
|
268
|
-
<AccordionContent>
|
|
269
|
-
<div className="p-4">
|
|
270
|
-
<p className="text-sm text-
|
|
271
|
-
All address information has been verified.
|
|
272
|
-
</p>
|
|
273
|
-
</div>
|
|
274
|
-
</AccordionContent>
|
|
275
|
-
</AccordionItem>
|
|
276
|
-
|
|
277
|
-
<AccordionItem value="item-3">
|
|
278
|
-
<AccordionTrigger title="Additional Notes" />
|
|
279
|
-
<AccordionContent>
|
|
280
|
-
<div className="p-4">
|
|
281
|
-
<p className="text-sm text-
|
|
282
|
-
Optional section without badge.
|
|
283
|
-
</p>
|
|
284
|
-
</div>
|
|
285
|
-
</AccordionContent>
|
|
286
|
-
</AccordionItem>
|
|
287
|
-
</Accordion>
|
|
288
|
-
```
|
|
289
|
-
|
|
290
|
-
### Múltiples Items Abiertos (Multiple Type)
|
|
291
|
-
|
|
292
|
-
Varios items pueden estar abiertos simultáneamente:
|
|
293
|
-
|
|
294
|
-
```tsx
|
|
295
|
-
<Accordion type="multiple">
|
|
296
|
-
<AccordionItem value="item-1">
|
|
297
|
-
<AccordionTrigger
|
|
298
|
-
title="Account Settings"
|
|
299
|
-
badge={
|
|
300
|
-
<Badge variant="default-medium" size="lg">
|
|
301
|
-
<Icon symbol="info" />
|
|
302
|
-
Updated
|
|
303
|
-
</Badge>
|
|
304
|
-
}
|
|
305
|
-
/>
|
|
306
|
-
<AccordionContent>
|
|
307
|
-
<div className="p-4">
|
|
308
|
-
<p className="text-sm text-
|
|
309
|
-
Configure your account preferences. Multiple sections can be open at
|
|
310
|
-
once.
|
|
311
|
-
</p>
|
|
312
|
-
</div>
|
|
313
|
-
</AccordionContent>
|
|
314
|
-
</AccordionItem>
|
|
315
|
-
|
|
316
|
-
<AccordionItem value="item-2">
|
|
317
|
-
<AccordionTrigger
|
|
318
|
-
title="Notification Preferences"
|
|
319
|
-
badge={
|
|
320
|
-
<Badge variant="warning-medium" size="lg">
|
|
321
|
-
<Icon symbol="error" />
|
|
322
|
-
Action required
|
|
323
|
-
</Badge>
|
|
324
|
-
}
|
|
325
|
-
/>
|
|
326
|
-
<AccordionContent>
|
|
327
|
-
<div className="p-4">
|
|
328
|
-
<p className="text-sm text-
|
|
329
|
-
Manage notification settings.
|
|
330
|
-
</p>
|
|
331
|
-
</div>
|
|
332
|
-
</AccordionContent>
|
|
333
|
-
</AccordionItem>
|
|
334
|
-
</Accordion>
|
|
335
|
-
```
|
|
336
|
-
|
|
337
|
-
### Abierto por Defecto
|
|
338
|
-
|
|
339
|
-
```tsx
|
|
340
|
-
<Accordion type="single" collapsible defaultValue="item-1">
|
|
341
|
-
<AccordionItem value="item-1">
|
|
342
|
-
<AccordionTrigger
|
|
343
|
-
title="Important Notice"
|
|
344
|
-
badge={
|
|
345
|
-
<Badge variant="destructive-medium" size="lg">
|
|
346
|
-
<Icon symbol="error" />
|
|
347
|
-
Attention required
|
|
348
|
-
</Badge>
|
|
349
|
-
}
|
|
350
|
-
/>
|
|
351
|
-
<AccordionContent>
|
|
352
|
-
<div className="p-4">
|
|
353
|
-
<p className="text-sm text-
|
|
354
|
-
This accordion is open by default using defaultValue prop.
|
|
355
|
-
</p>
|
|
356
|
-
</div>
|
|
357
|
-
</AccordionContent>
|
|
358
|
-
</AccordionItem>
|
|
359
|
-
</Accordion>
|
|
360
|
-
```
|
|
361
|
-
|
|
362
|
-
### Contenido Rico (Rich Content)
|
|
363
|
-
|
|
364
|
-
```tsx
|
|
365
|
-
<Accordion type="single" collapsible>
|
|
366
|
-
<AccordionItem value="item-1">
|
|
367
|
-
<AccordionTrigger
|
|
368
|
-
title="Payment Methods"
|
|
369
|
-
badge={
|
|
370
|
-
<Badge variant="success-medium" size="lg">
|
|
371
|
-
<Icon symbol="check_circle" />3 active
|
|
372
|
-
</Badge>
|
|
373
|
-
}
|
|
374
|
-
/>
|
|
375
|
-
<AccordionContent>
|
|
376
|
-
<div className="p-4 space-y-4">
|
|
377
|
-
<div className="flex items-center justify-between p-3 bg-neutrals-50 rounded-lg">
|
|
378
|
-
<div>
|
|
379
|
-
<p className="text-sm font-semibold text-
|
|
380
|
-
Credit Card
|
|
381
|
-
</p>
|
|
382
|
-
<p className="text-xs text-
|
|
383
|
-
</div>
|
|
384
|
-
<span className="text-xs text-success-600 font-medium">Active</span>
|
|
385
|
-
</div>
|
|
386
|
-
<div className="flex items-center justify-between p-3 bg-neutrals-50 rounded-lg">
|
|
387
|
-
<div>
|
|
388
|
-
<p className="text-sm font-semibold text-
|
|
389
|
-
<p className="text-xs text-
|
|
390
|
-
</div>
|
|
391
|
-
<span className="text-xs text-success-600 font-medium">Active</span>
|
|
392
|
-
</div>
|
|
393
|
-
</div>
|
|
394
|
-
</AccordionContent>
|
|
395
|
-
</AccordionItem>
|
|
396
|
-
</Accordion>
|
|
397
|
-
```
|
|
398
|
-
|
|
399
|
-
### Estados Mixtos (Wizard/Stepper)
|
|
400
|
-
|
|
401
|
-
```tsx
|
|
402
|
-
<Accordion type="single" collapsible>
|
|
403
|
-
<AccordionItem value="step-1">
|
|
404
|
-
<AccordionTrigger
|
|
405
|
-
title="Step 1: Documentation"
|
|
406
|
-
badge={
|
|
407
|
-
<Badge variant="success-medium" size="lg">
|
|
408
|
-
<Icon symbol="check_circle" />
|
|
409
|
-
Completed
|
|
410
|
-
</Badge>
|
|
411
|
-
}
|
|
412
|
-
/>
|
|
413
|
-
<AccordionContent>
|
|
414
|
-
<div className="p-4">
|
|
415
|
-
<p className="text-sm text-
|
|
416
|
-
All required documents submitted and verified.
|
|
417
|
-
</p>
|
|
418
|
-
</div>
|
|
419
|
-
</AccordionContent>
|
|
420
|
-
</AccordionItem>
|
|
421
|
-
|
|
422
|
-
<AccordionItem value="step-2">
|
|
423
|
-
<AccordionTrigger
|
|
424
|
-
title="Step 2: Review Process"
|
|
425
|
-
badge={
|
|
426
|
-
<Badge variant="warning-medium" size="lg">
|
|
427
|
-
<Icon symbol="error" />
|
|
428
|
-
In progress
|
|
429
|
-
</Badge>
|
|
430
|
-
}
|
|
431
|
-
/>
|
|
432
|
-
<AccordionContent>
|
|
433
|
-
<div className="p-4">
|
|
434
|
-
<p className="text-sm text-
|
|
435
|
-
Application under review. Expected completion in 2-3 business days.
|
|
436
|
-
</p>
|
|
437
|
-
</div>
|
|
438
|
-
</AccordionContent>
|
|
439
|
-
</AccordionItem>
|
|
440
|
-
|
|
441
|
-
<AccordionItem value="step-3">
|
|
442
|
-
<AccordionTrigger
|
|
443
|
-
title="Step 3: Final Approval"
|
|
444
|
-
badge={
|
|
445
|
-
<Badge variant="muted" size="lg">
|
|
446
|
-
Pending
|
|
447
|
-
</Badge>
|
|
448
|
-
}
|
|
449
|
-
/>
|
|
450
|
-
<AccordionContent>
|
|
451
|
-
<div className="p-4">
|
|
452
|
-
<p className="text-sm text-
|
|
453
|
-
Available once review is completed.
|
|
454
|
-
</p>
|
|
455
|
-
</div>
|
|
456
|
-
</AccordionContent>
|
|
457
|
-
</AccordionItem>
|
|
458
|
-
</Accordion>
|
|
459
|
-
```
|
|
460
|
-
|
|
461
|
-
### Versión Compacta (FAQ)
|
|
462
|
-
|
|
463
|
-
Sin badges para diseño minimalista:
|
|
464
|
-
|
|
465
|
-
```tsx
|
|
466
|
-
<Accordion type="single" collapsible>
|
|
467
|
-
<AccordionItem value="faq-1">
|
|
468
|
-
<AccordionTrigger title="FAQ #1" />
|
|
469
|
-
<AccordionContent>
|
|
470
|
-
<div className="px-4 pb-4">
|
|
471
|
-
<p className="text-sm text-
|
|
472
|
-
Simple FAQ layout without badges for cleaner appearance.
|
|
473
|
-
</p>
|
|
474
|
-
</div>
|
|
475
|
-
</AccordionContent>
|
|
476
|
-
</AccordionItem>
|
|
477
|
-
|
|
478
|
-
<AccordionItem value="faq-2">
|
|
479
|
-
<AccordionTrigger title="FAQ #2" />
|
|
480
|
-
<AccordionContent>
|
|
481
|
-
<div className="px-4 pb-4">
|
|
482
|
-
<p className="text-sm text-
|
|
483
|
-
Perfect for documentation or help sections.
|
|
484
|
-
</p>
|
|
485
|
-
</div>
|
|
486
|
-
</AccordionContent>
|
|
487
|
-
</AccordionItem>
|
|
488
|
-
</Accordion>
|
|
489
|
-
```
|
|
490
|
-
|
|
491
|
-
## Casos de Uso Comunes
|
|
492
|
-
|
|
493
|
-
### Formularios con Validación
|
|
494
|
-
|
|
495
|
-
```tsx
|
|
496
|
-
<Accordion type="single" collapsible>
|
|
497
|
-
<AccordionItem value="personal">
|
|
498
|
-
<AccordionTrigger
|
|
499
|
-
title="Personal Information"
|
|
500
|
-
badge={
|
|
501
|
-
<Badge variant="warning-medium" size="lg">
|
|
502
|
-
<Icon symbol="error" />3 required fields
|
|
503
|
-
</Badge>
|
|
504
|
-
}
|
|
505
|
-
/>
|
|
506
|
-
<AccordionContent>{/* Campos del formulario */}</AccordionContent>
|
|
507
|
-
</AccordionItem>
|
|
508
|
-
</Accordion>
|
|
509
|
-
```
|
|
510
|
-
|
|
511
|
-
### Proceso por Pasos (Stepper)
|
|
512
|
-
|
|
513
|
-
```tsx
|
|
514
|
-
<Accordion type="single" collapsible defaultValue="current-step">
|
|
515
|
-
{steps.map((step) => (
|
|
516
|
-
<AccordionItem key={step.id} value={step.id}>
|
|
517
|
-
<AccordionTrigger
|
|
518
|
-
title={step.title}
|
|
519
|
-
badge={<Badge variant={step.status}>{step.label}</Badge>}
|
|
520
|
-
/>
|
|
521
|
-
<AccordionContent>{step.content}</AccordionContent>
|
|
522
|
-
</AccordionItem>
|
|
523
|
-
))}
|
|
524
|
-
</Accordion>
|
|
525
|
-
```
|
|
526
|
-
|
|
527
|
-
### Configuración de Cuenta
|
|
528
|
-
|
|
529
|
-
```tsx
|
|
530
|
-
<Accordion type="multiple">
|
|
531
|
-
<AccordionItem value="profile">
|
|
532
|
-
<AccordionTrigger title="Profile Settings" />
|
|
533
|
-
<AccordionContent>{/* Settings */}</AccordionContent>
|
|
534
|
-
</AccordionItem>
|
|
535
|
-
|
|
536
|
-
<AccordionItem value="security">
|
|
537
|
-
<AccordionTrigger
|
|
538
|
-
title="Security"
|
|
539
|
-
badge={<Badge variant="warning-medium">Update required</Badge>}
|
|
540
|
-
/>
|
|
541
|
-
<AccordionContent>{/* Security settings */}</AccordionContent>
|
|
542
|
-
</AccordionItem>
|
|
543
|
-
</Accordion>
|
|
544
|
-
```
|
|
545
|
-
|
|
546
|
-
## Diferencias con Accordion Regular
|
|
547
|
-
|
|
548
|
-
| Característica | Accordion Regular | Accordion Rounded |
|
|
549
|
-
| ------------------ | ----------------------- | --------------------------------- |
|
|
550
|
-
| Bordes | Esquinas cuadradas | `rounded-2xl` (muy redondeado) |
|
|
551
|
-
| Fondo del Item | Transparente con border | `bg-neutrals-50` (gris claro) |
|
|
552
|
-
| Separación | Border entre items | Margen `mb-4` entre items |
|
|
553
|
-
| Badge Support | No (solo children) | Sí (prop `badge` dedicada) |
|
|
554
|
-
| Estilo del Título | Normal | Mayúsculas, compacto, color gris |
|
|
555
|
-
| Iconos | ChevronDown | add/remove |
|
|
556
|
-
| Altura del Trigger | Variable | Fija `h-14` (3.5rem) |
|
|
557
|
-
| Uso Principal | General, documentación | Formularios, validación, steppers |
|
|
558
|
-
|
|
559
|
-
## Notas de Implementación
|
|
560
|
-
|
|
561
|
-
- Usa Radix UI Accordion como base
|
|
562
|
-
- Iconos de Material Symbols (add, remove)
|
|
563
|
-
- El componente usa internamente clases con prefijo `adm:` para evitar conflictos
|
|
564
|
-
- Los títulos se truncan automáticamente con `line-clamp-1` si son muy largos
|
|
565
|
-
- La prop `title` es preferida sobre `children` para consistencia
|
|
566
|
-
- Badge se renderiza antes del icono add/remove
|
|
567
|
-
- Altura del trigger es fija para mantener alineación visual
|
|
568
|
-
- Animaciones CSS personalizadas (accordion-up, accordion-down)
|
|
569
|
-
|
|
570
|
-
## Accesibilidad
|
|
571
|
-
|
|
572
|
-
- ✅ Usa elementos button nativos para triggers
|
|
573
|
-
- ✅ Estados expanded/collapsed con `data-state`
|
|
574
|
-
- ✅ Navegación por teclado completa (Space, Enter, Arrow keys)
|
|
575
|
-
- ✅ Focus visible en triggers
|
|
576
|
-
- ✅ ARIA attributes automáticos de Radix UI
|
|
577
|
-
- ✅ Disabled state soportado en items individuales
|
|
578
|
-
- ✅ Screen reader friendly
|
|
579
|
-
|
|
580
|
-
## Referencias
|
|
581
|
-
|
|
582
|
-
- Basado en Radix UI Accordion: https://www.radix-ui.com/primitives/docs/components/accordion
|
|
583
|
-
- Patrones de diseño: Material Design Expansion Panels
|
|
584
|
-
- Variante visual personalizada de Adamo Suite
|
|
1
|
+
# Accordion Rounded Component
|
|
2
|
+
|
|
3
|
+
## Descripción
|
|
4
|
+
|
|
5
|
+
Variante especializada del componente Accordion diseñada para mostrar items con **bordes redondeados**, fondo gris claro, y soporte para **badges** en el trigger. Ideal para formularios de validación, procesos por pasos, y listas con estados visuales.
|
|
6
|
+
|
|
7
|
+
## Características Únicas
|
|
8
|
+
|
|
9
|
+
- ✅ Bordes completamente redondeados (rounded-2xl)
|
|
10
|
+
- ✅ Fondo gris claro en cada item
|
|
11
|
+
- ✅ Soporte nativo para badges en el trigger
|
|
12
|
+
- ✅ Iconos Plus/Minus para indicar estado
|
|
13
|
+
- ✅ Títulos en mayúsculas y estilo compacto
|
|
14
|
+
- ✅ Espaciado automático entre items
|
|
15
|
+
- ✅ Animaciones suaves de apertura/cierre
|
|
16
|
+
|
|
17
|
+
## Importación
|
|
18
|
+
|
|
19
|
+
```typescript
|
|
20
|
+
import {
|
|
21
|
+
Accordion,
|
|
22
|
+
AccordionContent,
|
|
23
|
+
AccordionItem,
|
|
24
|
+
AccordionTrigger,
|
|
25
|
+
} from "@adamosuiteservices/ui/accordion-rounded";
|
|
26
|
+
import { Icon } from "@adamosuiteservices/ui/icon"; // For badges with icons
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
**Nota**: Los nombres de exportación son los mismos que el Accordion regular para facilitar el intercambio entre variantes.
|
|
30
|
+
|
|
31
|
+
## Uso Básico
|
|
32
|
+
|
|
33
|
+
### Accordion Simple
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
<Accordion type="single" collapsible>
|
|
37
|
+
<AccordionItem value="item-1">
|
|
38
|
+
<AccordionTrigger title="Basic Accordion Item" />
|
|
39
|
+
<AccordionContent>
|
|
40
|
+
<div className="p-4">
|
|
41
|
+
<p className="text-sm text-foreground">
|
|
42
|
+
This is a simple accordion with just a title and content.
|
|
43
|
+
</p>
|
|
44
|
+
</div>
|
|
45
|
+
</AccordionContent>
|
|
46
|
+
</AccordionItem>
|
|
47
|
+
</Accordion>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Con Badge
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
import { Badge } from "@adamosuiteservices/ui/badge";
|
|
54
|
+
import { Icon } from "@adamosuiteservices/ui/icon";
|
|
55
|
+
|
|
56
|
+
<Accordion type="single" collapsible>
|
|
57
|
+
<AccordionItem value="item-1">
|
|
58
|
+
<AccordionTrigger
|
|
59
|
+
title="Name Matches"
|
|
60
|
+
badge={
|
|
61
|
+
<Badge variant="warning-medium" size="lg">
|
|
62
|
+
<Icon symbol="error" />2 matches found
|
|
63
|
+
</Badge>
|
|
64
|
+
}
|
|
65
|
+
/>
|
|
66
|
+
<AccordionContent>
|
|
67
|
+
<div className="p-4">
|
|
68
|
+
<p className="text-sm text-foreground">
|
|
69
|
+
Content with warning badge indicator.
|
|
70
|
+
</p>
|
|
71
|
+
</div>
|
|
72
|
+
</AccordionContent>
|
|
73
|
+
</AccordionItem>
|
|
74
|
+
</Accordion>;
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Props
|
|
78
|
+
|
|
79
|
+
### Accordion (Root)
|
|
80
|
+
|
|
81
|
+
Basado en Radix UI Accordion Root.
|
|
82
|
+
|
|
83
|
+
| Prop | Tipo | Default | Descripción |
|
|
84
|
+
| ------------- | ------------------------------------- | ------- | ------------------------------------------------------- |
|
|
85
|
+
| type | `"single" \| "multiple"` | - | **Requerido**. Tipo de accordion |
|
|
86
|
+
| collapsible | `boolean` | `false` | Solo para type="single". Permite cerrar el item abierto |
|
|
87
|
+
| defaultValue | `string \| string[]` | - | Valor(es) abierto(s) por defecto |
|
|
88
|
+
| value | `string \| string[]` | - | Valor(es) controlado(s) |
|
|
89
|
+
| onValueChange | `(value: string \| string[]) => void` | - | Callback al cambiar valores |
|
|
90
|
+
| disabled | `boolean` | `false` | Deshabilita todo el accordion |
|
|
91
|
+
| ...props | `HTMLAttributes<HTMLDivElement>` | - | Props nativas de div |
|
|
92
|
+
|
|
93
|
+
**type="single"**: Solo un item puede estar abierto a la vez.
|
|
94
|
+
**type="multiple"**: Múltiples items pueden estar abiertos simultáneamente.
|
|
95
|
+
|
|
96
|
+
### AccordionItem
|
|
97
|
+
|
|
98
|
+
Contenedor individual de cada item del accordion.
|
|
99
|
+
|
|
100
|
+
| Prop | Tipo | Descripción |
|
|
101
|
+
| --------- | ---------------------------- | ------------------------------------------- |
|
|
102
|
+
| value | `string` | **Requerido**. Identificador único del item |
|
|
103
|
+
| className | `string` | Clases adicionales |
|
|
104
|
+
| disabled | `boolean` | Deshabilita este item específico |
|
|
105
|
+
| ...props | Props de Radix AccordionItem | Props nativas |
|
|
106
|
+
|
|
107
|
+
**Estilos aplicados**:
|
|
108
|
+
|
|
109
|
+
- `rounded-2xl`: Bordes muy redondeados
|
|
110
|
+
- `bg-neutrals-50`: Fondo gris claro
|
|
111
|
+
- `mb-4`: Margen inferior de 1rem
|
|
112
|
+
- `last:mb-0`: Sin margen en el último item
|
|
113
|
+
|
|
114
|
+
### AccordionTrigger
|
|
115
|
+
|
|
116
|
+
Botón que controla la apertura/cierre del item.
|
|
117
|
+
|
|
118
|
+
| Prop | Tipo | Default | Descripción |
|
|
119
|
+
| --------- | ---------------------- | ------- | ------------------------------------------------- |
|
|
120
|
+
| title | `string` | - | Título del accordion (recomendado sobre children) |
|
|
121
|
+
| badge | `ReactNode` | - | Badge o indicador a mostrar (ej: Badge component) |
|
|
122
|
+
| className | `string` | - | Clases adicionales |
|
|
123
|
+
| children | `ReactNode` | - | Contenido alternativo si no usas title |
|
|
124
|
+
| ...props | `ButtonHTMLAttributes` | - | Props nativas de button |
|
|
125
|
+
|
|
126
|
+
**Características**:
|
|
127
|
+
|
|
128
|
+
- Título en mayúsculas automáticamente (uppercase)
|
|
129
|
+
- Icono add cuando está cerrado
|
|
130
|
+
- Icono remove cuando está abierto
|
|
131
|
+
- Transición suave de iconos
|
|
132
|
+
- Altura fija de 3.5rem (h-14)
|
|
133
|
+
- Text clamp para títulos largos
|
|
134
|
+
|
|
135
|
+
### AccordionContent
|
|
136
|
+
|
|
137
|
+
Contenedor del contenido que se expande/colapsa.
|
|
138
|
+
|
|
139
|
+
| Prop | Tipo | Descripción |
|
|
140
|
+
| --------- | ------------------------------- | ------------------------------------------------- |
|
|
141
|
+
| className | `string` | Clases adicionales (aplicadas al padding interno) |
|
|
142
|
+
| children | `ReactNode` | Contenido a mostrar |
|
|
143
|
+
| ...props | Props de Radix AccordionContent | Props nativas |
|
|
144
|
+
|
|
145
|
+
**Animaciones**:
|
|
146
|
+
|
|
147
|
+
- `animate-accordion-down`: Al abrir
|
|
148
|
+
- `animate-accordion-up`: Al cerrar
|
|
149
|
+
- Padding bottom de 1rem (pb-4)
|
|
150
|
+
|
|
151
|
+
## Variantes de Badge
|
|
152
|
+
|
|
153
|
+
### Success Badge
|
|
154
|
+
|
|
155
|
+
Para estados completados o validados.
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
<AccordionTrigger
|
|
159
|
+
title="Verification Completed"
|
|
160
|
+
badge={
|
|
161
|
+
<Badge variant="success-medium" size="lg">
|
|
162
|
+
<Icon symbol="check_circle" />
|
|
163
|
+
All fields validated
|
|
164
|
+
</Badge>
|
|
165
|
+
}
|
|
166
|
+
/>
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### Warning Badge
|
|
170
|
+
|
|
171
|
+
Para items que requieren atención.
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
<AccordionTrigger
|
|
175
|
+
title="Name Matches"
|
|
176
|
+
badge={
|
|
177
|
+
<Badge variant="warning-medium" size="lg">
|
|
178
|
+
<Icon symbol="error" />2 matches found
|
|
179
|
+
</Badge>
|
|
180
|
+
}
|
|
181
|
+
/>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### Error/Destructive Badge
|
|
185
|
+
|
|
186
|
+
Para errores o validaciones fallidas.
|
|
187
|
+
|
|
188
|
+
```tsx
|
|
189
|
+
<AccordionTrigger
|
|
190
|
+
title="Failed Validation"
|
|
191
|
+
badge={
|
|
192
|
+
<Badge variant="destructive-medium" size="lg">
|
|
193
|
+
<Icon symbol="cancel" />3 errors detected
|
|
194
|
+
</Badge>
|
|
195
|
+
}
|
|
196
|
+
/>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### Info Badge
|
|
200
|
+
|
|
201
|
+
Para información adicional.
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
<AccordionTrigger
|
|
205
|
+
title="Additional Information"
|
|
206
|
+
badge={
|
|
207
|
+
<Badge variant="default-medium" size="lg">
|
|
208
|
+
<Icon symbol="info" />
|
|
209
|
+
Read more
|
|
210
|
+
</Badge>
|
|
211
|
+
}
|
|
212
|
+
/>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
### Text Only Badge
|
|
216
|
+
|
|
217
|
+
Sin icono.
|
|
218
|
+
|
|
219
|
+
```tsx
|
|
220
|
+
<AccordionTrigger
|
|
221
|
+
title="Custom Badge"
|
|
222
|
+
badge={
|
|
223
|
+
<Badge variant="muted" size="lg">
|
|
224
|
+
NEW
|
|
225
|
+
</Badge>
|
|
226
|
+
}
|
|
227
|
+
/>
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
## Ejemplos Avanzados
|
|
231
|
+
|
|
232
|
+
### Múltiples Items (Single Type)
|
|
233
|
+
|
|
234
|
+
Solo un item abierto a la vez:
|
|
235
|
+
|
|
236
|
+
```tsx
|
|
237
|
+
<Accordion type="single" collapsible>
|
|
238
|
+
<AccordionItem value="item-1">
|
|
239
|
+
<AccordionTrigger
|
|
240
|
+
title="Personal Information"
|
|
241
|
+
badge={
|
|
242
|
+
<Badge variant="warning-medium" size="lg">
|
|
243
|
+
<Icon symbol="error" />3 required fields
|
|
244
|
+
</Badge>
|
|
245
|
+
}
|
|
246
|
+
/>
|
|
247
|
+
<AccordionContent>
|
|
248
|
+
<div className="p-4 space-y-3">
|
|
249
|
+
<div className="rounded-lg border border-neutrals-200 p-3">
|
|
250
|
+
<h4 className="text-sm font-semibold text-foreground">Full Name</h4>
|
|
251
|
+
<p className="text-sm text-foreground mt-1">Required field</p>
|
|
252
|
+
</div>
|
|
253
|
+
{/* Más campos... */}
|
|
254
|
+
</div>
|
|
255
|
+
</AccordionContent>
|
|
256
|
+
</AccordionItem>
|
|
257
|
+
|
|
258
|
+
<AccordionItem value="item-2">
|
|
259
|
+
<AccordionTrigger
|
|
260
|
+
title="Address Details"
|
|
261
|
+
badge={
|
|
262
|
+
<Badge variant="success-medium" size="lg">
|
|
263
|
+
<Icon symbol="check_circle" />
|
|
264
|
+
Complete
|
|
265
|
+
</Badge>
|
|
266
|
+
}
|
|
267
|
+
/>
|
|
268
|
+
<AccordionContent>
|
|
269
|
+
<div className="p-4">
|
|
270
|
+
<p className="text-sm text-foreground">
|
|
271
|
+
All address information has been verified.
|
|
272
|
+
</p>
|
|
273
|
+
</div>
|
|
274
|
+
</AccordionContent>
|
|
275
|
+
</AccordionItem>
|
|
276
|
+
|
|
277
|
+
<AccordionItem value="item-3">
|
|
278
|
+
<AccordionTrigger title="Additional Notes" />
|
|
279
|
+
<AccordionContent>
|
|
280
|
+
<div className="p-4">
|
|
281
|
+
<p className="text-sm text-foreground">
|
|
282
|
+
Optional section without badge.
|
|
283
|
+
</p>
|
|
284
|
+
</div>
|
|
285
|
+
</AccordionContent>
|
|
286
|
+
</AccordionItem>
|
|
287
|
+
</Accordion>
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
### Múltiples Items Abiertos (Multiple Type)
|
|
291
|
+
|
|
292
|
+
Varios items pueden estar abiertos simultáneamente:
|
|
293
|
+
|
|
294
|
+
```tsx
|
|
295
|
+
<Accordion type="multiple">
|
|
296
|
+
<AccordionItem value="item-1">
|
|
297
|
+
<AccordionTrigger
|
|
298
|
+
title="Account Settings"
|
|
299
|
+
badge={
|
|
300
|
+
<Badge variant="default-medium" size="lg">
|
|
301
|
+
<Icon symbol="info" />
|
|
302
|
+
Updated
|
|
303
|
+
</Badge>
|
|
304
|
+
}
|
|
305
|
+
/>
|
|
306
|
+
<AccordionContent>
|
|
307
|
+
<div className="p-4">
|
|
308
|
+
<p className="text-sm text-foreground">
|
|
309
|
+
Configure your account preferences. Multiple sections can be open at
|
|
310
|
+
once.
|
|
311
|
+
</p>
|
|
312
|
+
</div>
|
|
313
|
+
</AccordionContent>
|
|
314
|
+
</AccordionItem>
|
|
315
|
+
|
|
316
|
+
<AccordionItem value="item-2">
|
|
317
|
+
<AccordionTrigger
|
|
318
|
+
title="Notification Preferences"
|
|
319
|
+
badge={
|
|
320
|
+
<Badge variant="warning-medium" size="lg">
|
|
321
|
+
<Icon symbol="error" />
|
|
322
|
+
Action required
|
|
323
|
+
</Badge>
|
|
324
|
+
}
|
|
325
|
+
/>
|
|
326
|
+
<AccordionContent>
|
|
327
|
+
<div className="p-4">
|
|
328
|
+
<p className="text-sm text-foreground">
|
|
329
|
+
Manage notification settings.
|
|
330
|
+
</p>
|
|
331
|
+
</div>
|
|
332
|
+
</AccordionContent>
|
|
333
|
+
</AccordionItem>
|
|
334
|
+
</Accordion>
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
### Abierto por Defecto
|
|
338
|
+
|
|
339
|
+
```tsx
|
|
340
|
+
<Accordion type="single" collapsible defaultValue="item-1">
|
|
341
|
+
<AccordionItem value="item-1">
|
|
342
|
+
<AccordionTrigger
|
|
343
|
+
title="Important Notice"
|
|
344
|
+
badge={
|
|
345
|
+
<Badge variant="destructive-medium" size="lg">
|
|
346
|
+
<Icon symbol="error" />
|
|
347
|
+
Attention required
|
|
348
|
+
</Badge>
|
|
349
|
+
}
|
|
350
|
+
/>
|
|
351
|
+
<AccordionContent>
|
|
352
|
+
<div className="p-4">
|
|
353
|
+
<p className="text-sm text-foreground">
|
|
354
|
+
This accordion is open by default using defaultValue prop.
|
|
355
|
+
</p>
|
|
356
|
+
</div>
|
|
357
|
+
</AccordionContent>
|
|
358
|
+
</AccordionItem>
|
|
359
|
+
</Accordion>
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
### Contenido Rico (Rich Content)
|
|
363
|
+
|
|
364
|
+
```tsx
|
|
365
|
+
<Accordion type="single" collapsible>
|
|
366
|
+
<AccordionItem value="item-1">
|
|
367
|
+
<AccordionTrigger
|
|
368
|
+
title="Payment Methods"
|
|
369
|
+
badge={
|
|
370
|
+
<Badge variant="success-medium" size="lg">
|
|
371
|
+
<Icon symbol="check_circle" />3 active
|
|
372
|
+
</Badge>
|
|
373
|
+
}
|
|
374
|
+
/>
|
|
375
|
+
<AccordionContent>
|
|
376
|
+
<div className="p-4 space-y-4">
|
|
377
|
+
<div className="flex items-center justify-between p-3 bg-neutrals-50 rounded-lg">
|
|
378
|
+
<div>
|
|
379
|
+
<p className="text-sm font-semibold text-foreground">
|
|
380
|
+
Credit Card
|
|
381
|
+
</p>
|
|
382
|
+
<p className="text-xs text-muted-foreground">•••• 4242</p>
|
|
383
|
+
</div>
|
|
384
|
+
<span className="text-xs text-success-600 font-medium">Active</span>
|
|
385
|
+
</div>
|
|
386
|
+
<div className="flex items-center justify-between p-3 bg-neutrals-50 rounded-lg">
|
|
387
|
+
<div>
|
|
388
|
+
<p className="text-sm font-semibold text-foreground">PayPal</p>
|
|
389
|
+
<p className="text-xs text-muted-foreground">user@example.com</p>
|
|
390
|
+
</div>
|
|
391
|
+
<span className="text-xs text-success-600 font-medium">Active</span>
|
|
392
|
+
</div>
|
|
393
|
+
</div>
|
|
394
|
+
</AccordionContent>
|
|
395
|
+
</AccordionItem>
|
|
396
|
+
</Accordion>
|
|
397
|
+
```
|
|
398
|
+
|
|
399
|
+
### Estados Mixtos (Wizard/Stepper)
|
|
400
|
+
|
|
401
|
+
```tsx
|
|
402
|
+
<Accordion type="single" collapsible>
|
|
403
|
+
<AccordionItem value="step-1">
|
|
404
|
+
<AccordionTrigger
|
|
405
|
+
title="Step 1: Documentation"
|
|
406
|
+
badge={
|
|
407
|
+
<Badge variant="success-medium" size="lg">
|
|
408
|
+
<Icon symbol="check_circle" />
|
|
409
|
+
Completed
|
|
410
|
+
</Badge>
|
|
411
|
+
}
|
|
412
|
+
/>
|
|
413
|
+
<AccordionContent>
|
|
414
|
+
<div className="p-4">
|
|
415
|
+
<p className="text-sm text-foreground">
|
|
416
|
+
All required documents submitted and verified.
|
|
417
|
+
</p>
|
|
418
|
+
</div>
|
|
419
|
+
</AccordionContent>
|
|
420
|
+
</AccordionItem>
|
|
421
|
+
|
|
422
|
+
<AccordionItem value="step-2">
|
|
423
|
+
<AccordionTrigger
|
|
424
|
+
title="Step 2: Review Process"
|
|
425
|
+
badge={
|
|
426
|
+
<Badge variant="warning-medium" size="lg">
|
|
427
|
+
<Icon symbol="error" />
|
|
428
|
+
In progress
|
|
429
|
+
</Badge>
|
|
430
|
+
}
|
|
431
|
+
/>
|
|
432
|
+
<AccordionContent>
|
|
433
|
+
<div className="p-4">
|
|
434
|
+
<p className="text-sm text-foreground">
|
|
435
|
+
Application under review. Expected completion in 2-3 business days.
|
|
436
|
+
</p>
|
|
437
|
+
</div>
|
|
438
|
+
</AccordionContent>
|
|
439
|
+
</AccordionItem>
|
|
440
|
+
|
|
441
|
+
<AccordionItem value="step-3">
|
|
442
|
+
<AccordionTrigger
|
|
443
|
+
title="Step 3: Final Approval"
|
|
444
|
+
badge={
|
|
445
|
+
<Badge variant="muted" size="lg">
|
|
446
|
+
Pending
|
|
447
|
+
</Badge>
|
|
448
|
+
}
|
|
449
|
+
/>
|
|
450
|
+
<AccordionContent>
|
|
451
|
+
<div className="p-4">
|
|
452
|
+
<p className="text-sm text-foreground">
|
|
453
|
+
Available once review is completed.
|
|
454
|
+
</p>
|
|
455
|
+
</div>
|
|
456
|
+
</AccordionContent>
|
|
457
|
+
</AccordionItem>
|
|
458
|
+
</Accordion>
|
|
459
|
+
```
|
|
460
|
+
|
|
461
|
+
### Versión Compacta (FAQ)
|
|
462
|
+
|
|
463
|
+
Sin badges para diseño minimalista:
|
|
464
|
+
|
|
465
|
+
```tsx
|
|
466
|
+
<Accordion type="single" collapsible>
|
|
467
|
+
<AccordionItem value="faq-1">
|
|
468
|
+
<AccordionTrigger title="FAQ #1" />
|
|
469
|
+
<AccordionContent>
|
|
470
|
+
<div className="px-4 pb-4">
|
|
471
|
+
<p className="text-sm text-foreground">
|
|
472
|
+
Simple FAQ layout without badges for cleaner appearance.
|
|
473
|
+
</p>
|
|
474
|
+
</div>
|
|
475
|
+
</AccordionContent>
|
|
476
|
+
</AccordionItem>
|
|
477
|
+
|
|
478
|
+
<AccordionItem value="faq-2">
|
|
479
|
+
<AccordionTrigger title="FAQ #2" />
|
|
480
|
+
<AccordionContent>
|
|
481
|
+
<div className="px-4 pb-4">
|
|
482
|
+
<p className="text-sm text-foreground">
|
|
483
|
+
Perfect for documentation or help sections.
|
|
484
|
+
</p>
|
|
485
|
+
</div>
|
|
486
|
+
</AccordionContent>
|
|
487
|
+
</AccordionItem>
|
|
488
|
+
</Accordion>
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
## Casos de Uso Comunes
|
|
492
|
+
|
|
493
|
+
### Formularios con Validación
|
|
494
|
+
|
|
495
|
+
```tsx
|
|
496
|
+
<Accordion type="single" collapsible>
|
|
497
|
+
<AccordionItem value="personal">
|
|
498
|
+
<AccordionTrigger
|
|
499
|
+
title="Personal Information"
|
|
500
|
+
badge={
|
|
501
|
+
<Badge variant="warning-medium" size="lg">
|
|
502
|
+
<Icon symbol="error" />3 required fields
|
|
503
|
+
</Badge>
|
|
504
|
+
}
|
|
505
|
+
/>
|
|
506
|
+
<AccordionContent>{/* Campos del formulario */}</AccordionContent>
|
|
507
|
+
</AccordionItem>
|
|
508
|
+
</Accordion>
|
|
509
|
+
```
|
|
510
|
+
|
|
511
|
+
### Proceso por Pasos (Stepper)
|
|
512
|
+
|
|
513
|
+
```tsx
|
|
514
|
+
<Accordion type="single" collapsible defaultValue="current-step">
|
|
515
|
+
{steps.map((step) => (
|
|
516
|
+
<AccordionItem key={step.id} value={step.id}>
|
|
517
|
+
<AccordionTrigger
|
|
518
|
+
title={step.title}
|
|
519
|
+
badge={<Badge variant={step.status}>{step.label}</Badge>}
|
|
520
|
+
/>
|
|
521
|
+
<AccordionContent>{step.content}</AccordionContent>
|
|
522
|
+
</AccordionItem>
|
|
523
|
+
))}
|
|
524
|
+
</Accordion>
|
|
525
|
+
```
|
|
526
|
+
|
|
527
|
+
### Configuración de Cuenta
|
|
528
|
+
|
|
529
|
+
```tsx
|
|
530
|
+
<Accordion type="multiple">
|
|
531
|
+
<AccordionItem value="profile">
|
|
532
|
+
<AccordionTrigger title="Profile Settings" />
|
|
533
|
+
<AccordionContent>{/* Settings */}</AccordionContent>
|
|
534
|
+
</AccordionItem>
|
|
535
|
+
|
|
536
|
+
<AccordionItem value="security">
|
|
537
|
+
<AccordionTrigger
|
|
538
|
+
title="Security"
|
|
539
|
+
badge={<Badge variant="warning-medium">Update required</Badge>}
|
|
540
|
+
/>
|
|
541
|
+
<AccordionContent>{/* Security settings */}</AccordionContent>
|
|
542
|
+
</AccordionItem>
|
|
543
|
+
</Accordion>
|
|
544
|
+
```
|
|
545
|
+
|
|
546
|
+
## Diferencias con Accordion Regular
|
|
547
|
+
|
|
548
|
+
| Característica | Accordion Regular | Accordion Rounded |
|
|
549
|
+
| ------------------ | ----------------------- | --------------------------------- |
|
|
550
|
+
| Bordes | Esquinas cuadradas | `rounded-2xl` (muy redondeado) |
|
|
551
|
+
| Fondo del Item | Transparente con border | `bg-neutrals-50` (gris claro) |
|
|
552
|
+
| Separación | Border entre items | Margen `mb-4` entre items |
|
|
553
|
+
| Badge Support | No (solo children) | Sí (prop `badge` dedicada) |
|
|
554
|
+
| Estilo del Título | Normal | Mayúsculas, compacto, color gris |
|
|
555
|
+
| Iconos | ChevronDown | add/remove |
|
|
556
|
+
| Altura del Trigger | Variable | Fija `h-14` (3.5rem) |
|
|
557
|
+
| Uso Principal | General, documentación | Formularios, validación, steppers |
|
|
558
|
+
|
|
559
|
+
## Notas de Implementación
|
|
560
|
+
|
|
561
|
+
- Usa Radix UI Accordion como base
|
|
562
|
+
- Iconos de Material Symbols (add, remove)
|
|
563
|
+
- El componente usa internamente clases con prefijo `adm:` para evitar conflictos
|
|
564
|
+
- Los títulos se truncan automáticamente con `line-clamp-1` si son muy largos
|
|
565
|
+
- La prop `title` es preferida sobre `children` para consistencia
|
|
566
|
+
- Badge se renderiza antes del icono add/remove
|
|
567
|
+
- Altura del trigger es fija para mantener alineación visual
|
|
568
|
+
- Animaciones CSS personalizadas (accordion-up, accordion-down)
|
|
569
|
+
|
|
570
|
+
## Accesibilidad
|
|
571
|
+
|
|
572
|
+
- ✅ Usa elementos button nativos para triggers
|
|
573
|
+
- ✅ Estados expanded/collapsed con `data-state`
|
|
574
|
+
- ✅ Navegación por teclado completa (Space, Enter, Arrow keys)
|
|
575
|
+
- ✅ Focus visible en triggers
|
|
576
|
+
- ✅ ARIA attributes automáticos de Radix UI
|
|
577
|
+
- ✅ Disabled state soportado en items individuales
|
|
578
|
+
- ✅ Screen reader friendly
|
|
579
|
+
|
|
580
|
+
## Referencias
|
|
581
|
+
|
|
582
|
+
- Basado en Radix UI Accordion: https://www.radix-ui.com/primitives/docs/components/accordion
|
|
583
|
+
- Patrones de diseño: Material Design Expansion Panels
|
|
584
|
+
- Variante visual personalizada de Adamo Suite
|