@adamosuiteservices/ui 2.13.1 → 2.13.3

package/docs/components/ui/accordion-rounded.md

@@ -1,584 +1,584 @@
-# Accordion Rounded Component
-
-## Descripción
-
-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.
-
-## Características Únicas
-
-- ✅ Bordes completamente redondeados (rounded-2xl)
-- ✅ Fondo gris claro en cada item
-- ✅ Soporte nativo para badges en el trigger
-- ✅ Iconos Plus/Minus para indicar estado
-- ✅ Títulos en mayúsculas y estilo compacto
-- ✅ Espaciado automático entre items
-- ✅ Animaciones suaves de apertura/cierre
-
-## Importación
-
-```typescript
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@adamosuiteservices/ui/accordion-rounded";
-import { Icon } from "@adamosuiteservices/ui/icon"; // For badges with icons
-```
-
-**Nota**: Los nombres de exportación son los mismos que el Accordion regular para facilitar el intercambio entre variantes.
-
-## Uso Básico
-
-### Accordion Simple
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger title="Basic Accordion Item" />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          This is a simple accordion with just a title and content.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Con Badge
-
-```tsx
-import { Badge } from "@adamosuiteservices/ui/badge";
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger
-      title="Name Matches"
-      badge={
-        <Badge variant="warning-medium" size="lg">
-          <Icon symbol="error" />2 matches found
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          Content with warning badge indicator.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>;
-```
-
-## Props
-
-### Accordion (Root)
-
-Basado en Radix UI Accordion Root.
-
-| Prop          | Tipo                                  | Default | Descripción                                             |
-| ------------- | ------------------------------------- | ------- | ------------------------------------------------------- |
-| type          | `"single" \| "multiple"`              | -       | **Requerido**. Tipo de accordion                        |
-| collapsible   | `boolean`                             | `false` | Solo para type="single". Permite cerrar el item abierto |
-| defaultValue  | `string \| string[]`                  | -       | Valor(es) abierto(s) por defecto                        |
-| value         | `string \| string[]`                  | -       | Valor(es) controlado(s)                                 |
-| onValueChange | `(value: string \| string[]) => void` | -       | Callback al cambiar valores                             |
-| disabled      | `boolean`                             | `false` | Deshabilita todo el accordion                           |
-| ...props      | `HTMLAttributes<HTMLDivElement>`      | -       | Props nativas de div                                    |
-
-**type="single"**: Solo un item puede estar abierto a la vez.
-**type="multiple"**: Múltiples items pueden estar abiertos simultáneamente.
-
-### AccordionItem
-
-Contenedor individual de cada item del accordion.
-
-| Prop      | Tipo                         | Descripción                                 |
-| --------- | ---------------------------- | ------------------------------------------- |
-| value     | `string`                     | **Requerido**. Identificador único del item |
-| className | `string`                     | Clases adicionales                          |
-| disabled  | `boolean`                    | Deshabilita este item específico            |
-| ...props  | Props de Radix AccordionItem | Props nativas                               |
-
-**Estilos aplicados**:
-
-- `rounded-2xl`: Bordes muy redondeados
-- `bg-muted`: Fondo gris claro
-- `mb-4`: Margen inferior de 1rem
-- `last:mb-0`: Sin margen en el último item
-
-### AccordionTrigger
-
-Botón que controla la apertura/cierre del item.
-
-| Prop      | Tipo                   | Default | Descripción                                       |
-| --------- | ---------------------- | ------- | ------------------------------------------------- |
-| title     | `string`               | -       | Título del accordion (recomendado sobre children) |
-| badge     | `ReactNode`            | -       | Badge o indicador a mostrar (ej: Badge component) |
-| className | `string`               | -       | Clases adicionales                                |
-| children  | `ReactNode`            | -       | Contenido alternativo si no usas title            |
-| ...props  | `ButtonHTMLAttributes` | -       | Props nativas de button                           |
-
-**Características**:
-
-- Título en mayúsculas automáticamente (uppercase)
-- Icono add cuando está cerrado
-- Icono remove cuando está abierto
-- Transición suave de iconos
-- Altura fija de 3.5rem (h-16)
-- Text clamp para títulos largos
-
-### AccordionContent
-
-Contenedor del contenido que se expande/colapsa.
-
-| Prop      | Tipo                            | Descripción                                       |
-| --------- | ------------------------------- | ------------------------------------------------- |
-| className | `string`                        | Clases adicionales (aplicadas al padding interno) |
-| children  | `ReactNode`                     | Contenido a mostrar                               |
-| ...props  | Props de Radix AccordionContent | Props nativas                                     |
-
-**Animaciones**:
-
-- `animate-accordion-down`: Al abrir
-- `animate-accordion-up`: Al cerrar
-- Padding bottom de 1rem (pb-4)
-
-## Variantes de Badge
-
-### Success Badge
-
-Para estados completados o validados.
-
-```tsx
-<AccordionTrigger
-  title="Verification Completed"
-  badge={
-    <Badge variant="success-medium" size="lg">
-      <Icon symbol="check_circle" />
-      All fields validated
-    </Badge>
-  }
-/>
-```
-
-### Warning Badge
-
-Para items que requieren atención.
-
-```tsx
-<AccordionTrigger
-  title="Name Matches"
-  badge={
-    <Badge variant="warning-medium" size="lg">
-      <Icon symbol="error" />2 matches found
-    </Badge>
-  }
-/>
-```
-
-### Error/Destructive Badge
-
-Para errores o validaciones fallidas.
-
-```tsx
-<AccordionTrigger
-  title="Failed Validation"
-  badge={
-    <Badge variant="destructive-medium" size="lg">
-      <Icon symbol="cancel" />3 errors detected
-    </Badge>
-  }
-/>
-```
-
-### Info Badge
-
-Para información adicional.
-
-```tsx
-<AccordionTrigger
-  title="Additional Information"
-  badge={
-    <Badge variant="default-medium" size="lg">
-      <Icon symbol="info" />
-      Read more
-    </Badge>
-  }
-/>
-```
-
-### Text Only Badge
-
-Sin icono.
-
-```tsx
-<AccordionTrigger
-  title="Custom Badge"
-  badge={
-    <Badge variant="muted" size="lg">
-      NEW
-    </Badge>
-  }
-/>
-```
-
-## Ejemplos Avanzados
-
-### Múltiples Items (Single Type)
-
-Solo un item abierto a la vez:
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger
-      title="Personal Information"
-      badge={
-        <Badge variant="warning-medium" size="lg">
-          <Icon symbol="error" />3 required fields
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4 space-y-3">
-        <div className="rounded-lg border p-3">
-          <h4 className="text-sm font-semibold text-foreground">Full Name</h4>
-          <p className="text-sm text-foreground mt-1">Required field</p>
-        </div>
-        {/* Más campos... */}
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-
-  <AccordionItem value="item-2">
-    <AccordionTrigger
-      title="Address Details"
-      badge={
-        <Badge variant="success-medium" size="lg">
-          <Icon symbol="check_circle" />
-          Complete
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          All address information has been verified.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-
-  <AccordionItem value="item-3">
-    <AccordionTrigger title="Additional Notes" />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          Optional section without badge.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Múltiples Items Abiertos (Multiple Type)
-
-Varios items pueden estar abiertos simultáneamente:
-
-```tsx
-<Accordion type="multiple">
-  <AccordionItem value="item-1">
-    <AccordionTrigger
-      title="Account Settings"
-      badge={
-        <Badge variant="default-medium" size="lg">
-          <Icon symbol="info" />
-          Updated
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          Configure your account preferences. Multiple sections can be open at
-          once.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-
-  <AccordionItem value="item-2">
-    <AccordionTrigger
-      title="Notification Preferences"
-      badge={
-        <Badge variant="warning-medium" size="lg">
-          <Icon symbol="error" />
-          Action required
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          Manage notification settings.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Abierto por Defecto
-
-```tsx
-<Accordion type="single" collapsible defaultValue="item-1">
-  <AccordionItem value="item-1">
-    <AccordionTrigger
-      title="Important Notice"
-      badge={
-        <Badge variant="destructive-medium" size="lg">
-          <Icon symbol="error" />
-          Attention required
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          This accordion is open by default using defaultValue prop.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Contenido Rico (Rich Content)
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger
-      title="Payment Methods"
-      badge={
-        <Badge variant="success-medium" size="lg">
-          <Icon symbol="check_circle" />3 active
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4 space-y-4">
-        <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
-          <div>
-            <p className="text-sm font-semibold text-foreground">
-              Credit Card
-            </p>
-            <p className="text-xs text-muted-foreground">•••• 4242</p>
-          </div>
-          <span className="text-xs text-success font-medium">Active</span>
-        </div>
-        <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
-          <div>
-            <p className="text-sm font-semibold text-foreground">PayPal</p>
-            <p className="text-xs text-muted-foreground">user@example.com</p>
-          </div>
-          <span className="text-xs text-success font-medium">Active</span>
-        </div>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Estados Mixtos (Wizard/Stepper)
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="step-1">
-    <AccordionTrigger
-      title="Step 1: Documentation"
-      badge={
-        <Badge variant="success-medium" size="lg">
-          <Icon symbol="check_circle" />
-          Completed
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          All required documents submitted and verified.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-
-  <AccordionItem value="step-2">
-    <AccordionTrigger
-      title="Step 2: Review Process"
-      badge={
-        <Badge variant="warning-medium" size="lg">
-          <Icon symbol="error" />
-          In progress
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          Application under review. Expected completion in 2-3 business days.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-
-  <AccordionItem value="step-3">
-    <AccordionTrigger
-      title="Step 3: Final Approval"
-      badge={
-        <Badge variant="muted" size="lg">
-          Pending
-        </Badge>
-      }
-    />
-    <AccordionContent>
-      <div className="p-4">
-        <p className="text-sm text-foreground">
-          Available once review is completed.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Versión Compacta (FAQ)
-
-Sin badges para diseño minimalista:
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="faq-1">
-    <AccordionTrigger title="FAQ #1" />
-    <AccordionContent>
-      <div className="px-4 pb-4">
-        <p className="text-sm text-foreground">
-          Simple FAQ layout without badges for cleaner appearance.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-
-  <AccordionItem value="faq-2">
-    <AccordionTrigger title="FAQ #2" />
-    <AccordionContent>
-      <div className="px-4 pb-4">
-        <p className="text-sm text-foreground">
-          Perfect for documentation or help sections.
-        </p>
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-## Casos de Uso Comunes
-
-### Formularios con Validación
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="personal">
-    <AccordionTrigger
-      title="Personal Information"
-      badge={
-        <Badge variant="warning-medium" size="lg">
-          <Icon symbol="error" />3 required fields
-        </Badge>
-      }
-    />
-    <AccordionContent>{/* Campos del formulario */}</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Proceso por Pasos (Stepper)
-
-```tsx
-<Accordion type="single" collapsible defaultValue="current-step">
-  {steps.map((step) => (
-    <AccordionItem key={step.id} value={step.id}>
-      <AccordionTrigger
-        title={step.title}
-        badge={<Badge variant={step.status}>{step.label}</Badge>}
-      />
-      <AccordionContent>{step.content}</AccordionContent>
-    </AccordionItem>
-  ))}
-</Accordion>
-```
-
-### Configuración de Cuenta
-
-```tsx
-<Accordion type="multiple">
-  <AccordionItem value="profile">
-    <AccordionTrigger title="Profile Settings" />
-    <AccordionContent>{/* Settings */}</AccordionContent>
-  </AccordionItem>
-
-  <AccordionItem value="security">
-    <AccordionTrigger
-      title="Security"
-      badge={<Badge variant="warning-medium">Update required</Badge>}
-    />
-    <AccordionContent>{/* Security settings */}</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-## Diferencias con Accordion Regular
-
-| Característica     | Accordion Regular       | Accordion Rounded                 |
-| ------------------ | ----------------------- | --------------------------------- |
-| Bordes             | Esquinas cuadradas      | `rounded-2xl` (muy redondeado)    |
-| Fondo del Item     | Transparente con border | `bg-muted` (gris claro)           |
-| Separación         | Border entre items      | Margen `mb-4` entre items         |
-| Badge Support      | No (solo children)      | Sí (prop `badge` dedicada)        |
-| Estilo del Título  | Normal                  | Mayúsculas, compacto, color gris  |
-| Iconos             | ChevronDown             | add/remove                        |
-| Altura del Trigger | Variable                | Fija `h-16` (3.5rem)              |
-| Uso Principal      | General, documentación  | Formularios, validación, steppers |
-
-## Notas de Implementación
-
-- Usa Radix UI Accordion como base
-- Iconos de Material Symbols (add, remove)
-- El componente usa internamente clases con prefijo `adm:` para evitar conflictos
-- Los títulos se truncan automáticamente con `line-clamp-1` si son muy largos
-- La prop `title` es preferida sobre `children` para consistencia
-- Badge se renderiza antes del icono add/remove
-- Altura del trigger es fija para mantener alineación visual
-- Animaciones CSS personalizadas (accordion-up, accordion-down)
-
-## Accesibilidad
-
-- ✅ Usa elementos button nativos para triggers
-- ✅ Estados expanded/collapsed con `data-state`
-- ✅ Navegación por teclado completa (Space, Enter, Arrow keys)
-- ✅ Focus visible en triggers
-- ✅ ARIA attributes automáticos de Radix UI
-- ✅ Disabled state soportado en items individuales
-- ✅ Screen reader friendly
-
-## Referencias
-
-- Basado en Radix UI Accordion: https://www.radix-ui.com/primitives/docs/components/accordion
-- Patrones de diseño: Material Design Expansion Panels
-- Variante visual personalizada de Adamo Suite
+# Accordion Rounded Component
+
+## Descripción
+
+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.
+
+## Características Únicas
+
+- ✅ Bordes completamente redondeados (rounded-2xl)
+- ✅ Fondo gris claro en cada item
+- ✅ Soporte nativo para badges en el trigger
+- ✅ Iconos Plus/Minus para indicar estado
+- ✅ Títulos en mayúsculas y estilo compacto
+- ✅ Espaciado automático entre items
+- ✅ Animaciones suaves de apertura/cierre
+
+## Importación
+
+```typescript
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@adamosuiteservices/ui/accordion-rounded";
+import { Icon } from "@adamosuiteservices/ui/icon"; // For badges with icons
+```
+
+**Nota**: Los nombres de exportación son los mismos que el Accordion regular para facilitar el intercambio entre variantes.
+
+## Uso Básico
+
+### Accordion Simple
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger title="Basic Accordion Item" />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          This is a simple accordion with just a title and content.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Con Badge
+
+```tsx
+import { Badge } from "@adamosuiteservices/ui/badge";
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger
+      title="Name Matches"
+      badge={
+        <Badge variant="warning-medium" size="lg">
+          <Icon symbol="error" />2 matches found
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          Content with warning badge indicator.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>;
+```
+
+## Props
+
+### Accordion (Root)
+
+Basado en Radix UI Accordion Root.
+
+| Prop          | Tipo                                  | Default | Descripción                                             |
+| ------------- | ------------------------------------- | ------- | ------------------------------------------------------- |
+| type          | `"single" \| "multiple"`              | -       | **Requerido**. Tipo de accordion                        |
+| collapsible   | `boolean`                             | `false` | Solo para type="single". Permite cerrar el item abierto |
+| defaultValue  | `string \| string[]`                  | -       | Valor(es) abierto(s) por defecto                        |
+| value         | `string \| string[]`                  | -       | Valor(es) controlado(s)                                 |
+| onValueChange | `(value: string \| string[]) => void` | -       | Callback al cambiar valores                             |
+| disabled      | `boolean`                             | `false` | Deshabilita todo el accordion                           |
+| ...props      | `HTMLAttributes<HTMLDivElement>`      | -       | Props nativas de div                                    |
+
+**type="single"**: Solo un item puede estar abierto a la vez.
+**type="multiple"**: Múltiples items pueden estar abiertos simultáneamente.
+
+### AccordionItem
+
+Contenedor individual de cada item del accordion.
+
+| Prop      | Tipo                         | Descripción                                 |
+| --------- | ---------------------------- | ------------------------------------------- |
+| value     | `string`                     | **Requerido**. Identificador único del item |
+| className | `string`                     | Clases adicionales                          |
+| disabled  | `boolean`                    | Deshabilita este item específico            |
+| ...props  | Props de Radix AccordionItem | Props nativas                               |
+
+**Estilos aplicados**:
+
+- `rounded-2xl`: Bordes muy redondeados
+- `bg-muted`: Fondo gris claro
+- `mb-4`: Margen inferior de 1rem
+- `last:mb-0`: Sin margen en el último item
+
+### AccordionTrigger
+
+Botón que controla la apertura/cierre del item.
+
+| Prop      | Tipo                   | Default | Descripción                                       |
+| --------- | ---------------------- | ------- | ------------------------------------------------- |
+| title     | `string`               | -       | Título del accordion (recomendado sobre children) |
+| badge     | `ReactNode`            | -       | Badge o indicador a mostrar (ej: Badge component) |
+| className | `string`               | -       | Clases adicionales                                |
+| children  | `ReactNode`            | -       | Contenido alternativo si no usas title            |
+| ...props  | `ButtonHTMLAttributes` | -       | Props nativas de button                           |
+
+**Características**:
+
+- Título en mayúsculas automáticamente (uppercase)
+- Icono add cuando está cerrado
+- Icono remove cuando está abierto
+- Transición suave de iconos
+- Altura fija de 3.5rem (h-16)
+- Text clamp para títulos largos
+
+### AccordionContent
+
+Contenedor del contenido que se expande/colapsa.
+
+| Prop      | Tipo                            | Descripción                                       |
+| --------- | ------------------------------- | ------------------------------------------------- |
+| className | `string`                        | Clases adicionales (aplicadas al padding interno) |
+| children  | `ReactNode`                     | Contenido a mostrar                               |
+| ...props  | Props de Radix AccordionContent | Props nativas                                     |
+
+**Animaciones**:
+
+- `animate-accordion-down`: Al abrir
+- `animate-accordion-up`: Al cerrar
+- Padding bottom de 1rem (pb-4)
+
+## Variantes de Badge
+
+### Success Badge
+
+Para estados completados o validados.
+
+```tsx
+<AccordionTrigger
+  title="Verification Completed"
+  badge={
+    <Badge variant="success-medium" size="lg">
+      <Icon symbol="check_circle" />
+      All fields validated
+    </Badge>
+  }
+/>
+```
+
+### Warning Badge
+
+Para items que requieren atención.
+
+```tsx
+<AccordionTrigger
+  title="Name Matches"
+  badge={
+    <Badge variant="warning-medium" size="lg">
+      <Icon symbol="error" />2 matches found
+    </Badge>
+  }
+/>
+```
+
+### Error/Destructive Badge
+
+Para errores o validaciones fallidas.
+
+```tsx
+<AccordionTrigger
+  title="Failed Validation"
+  badge={
+    <Badge variant="destructive-medium" size="lg">
+      <Icon symbol="cancel" />3 errors detected
+    </Badge>
+  }
+/>
+```
+
+### Info Badge
+
+Para información adicional.
+
+```tsx
+<AccordionTrigger
+  title="Additional Information"
+  badge={
+    <Badge variant="default-medium" size="lg">
+      <Icon symbol="info" />
+      Read more
+    </Badge>
+  }
+/>
+```
+
+### Text Only Badge
+
+Sin icono.
+
+```tsx
+<AccordionTrigger
+  title="Custom Badge"
+  badge={
+    <Badge variant="muted" size="lg">
+      NEW
+    </Badge>
+  }
+/>
+```
+
+## Ejemplos Avanzados
+
+### Múltiples Items (Single Type)
+
+Solo un item abierto a la vez:
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger
+      title="Personal Information"
+      badge={
+        <Badge variant="warning-medium" size="lg">
+          <Icon symbol="error" />3 required fields
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4 space-y-3">
+        <div className="rounded-lg border p-3">
+          <h4 className="text-sm font-semibold text-foreground">Full Name</h4>
+          <p className="text-sm text-foreground mt-1">Required field</p>
+        </div>
+        {/* Más campos... */}
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+
+  <AccordionItem value="item-2">
+    <AccordionTrigger
+      title="Address Details"
+      badge={
+        <Badge variant="success-medium" size="lg">
+          <Icon symbol="check_circle" />
+          Complete
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          All address information has been verified.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+
+  <AccordionItem value="item-3">
+    <AccordionTrigger title="Additional Notes" />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          Optional section without badge.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Múltiples Items Abiertos (Multiple Type)
+
+Varios items pueden estar abiertos simultáneamente:
+
+```tsx
+<Accordion type="multiple">
+  <AccordionItem value="item-1">
+    <AccordionTrigger
+      title="Account Settings"
+      badge={
+        <Badge variant="default-medium" size="lg">
+          <Icon symbol="info" />
+          Updated
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          Configure your account preferences. Multiple sections can be open at
+          once.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+
+  <AccordionItem value="item-2">
+    <AccordionTrigger
+      title="Notification Preferences"
+      badge={
+        <Badge variant="warning-medium" size="lg">
+          <Icon symbol="error" />
+          Action required
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          Manage notification settings.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Abierto por Defecto
+
+```tsx
+<Accordion type="single" collapsible defaultValue="item-1">
+  <AccordionItem value="item-1">
+    <AccordionTrigger
+      title="Important Notice"
+      badge={
+        <Badge variant="destructive-medium" size="lg">
+          <Icon symbol="error" />
+          Attention required
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          This accordion is open by default using defaultValue prop.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Contenido Rico (Rich Content)
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger
+      title="Payment Methods"
+      badge={
+        <Badge variant="success-medium" size="lg">
+          <Icon symbol="check_circle" />3 active
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4 space-y-4">
+        <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
+          <div>
+            <p className="text-sm font-semibold text-foreground">
+              Credit Card
+            </p>
+            <p className="text-xs text-muted-foreground">•••• 4242</p>
+          </div>
+          <span className="text-xs text-success font-medium">Active</span>
+        </div>
+        <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
+          <div>
+            <p className="text-sm font-semibold text-foreground">PayPal</p>
+            <p className="text-xs text-muted-foreground">user@example.com</p>
+          </div>
+          <span className="text-xs text-success font-medium">Active</span>
+        </div>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Estados Mixtos (Wizard/Stepper)
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="step-1">
+    <AccordionTrigger
+      title="Step 1: Documentation"
+      badge={
+        <Badge variant="success-medium" size="lg">
+          <Icon symbol="check_circle" />
+          Completed
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          All required documents submitted and verified.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+
+  <AccordionItem value="step-2">
+    <AccordionTrigger
+      title="Step 2: Review Process"
+      badge={
+        <Badge variant="warning-medium" size="lg">
+          <Icon symbol="error" />
+          In progress
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          Application under review. Expected completion in 2-3 business days.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+
+  <AccordionItem value="step-3">
+    <AccordionTrigger
+      title="Step 3: Final Approval"
+      badge={
+        <Badge variant="muted" size="lg">
+          Pending
+        </Badge>
+      }
+    />
+    <AccordionContent>
+      <div className="p-4">
+        <p className="text-sm text-foreground">
+          Available once review is completed.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Versión Compacta (FAQ)
+
+Sin badges para diseño minimalista:
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="faq-1">
+    <AccordionTrigger title="FAQ #1" />
+    <AccordionContent>
+      <div className="px-4 pb-4">
+        <p className="text-sm text-foreground">
+          Simple FAQ layout without badges for cleaner appearance.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+
+  <AccordionItem value="faq-2">
+    <AccordionTrigger title="FAQ #2" />
+    <AccordionContent>
+      <div className="px-4 pb-4">
+        <p className="text-sm text-foreground">
+          Perfect for documentation or help sections.
+        </p>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+## Casos de Uso Comunes
+
+### Formularios con Validación
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="personal">
+    <AccordionTrigger
+      title="Personal Information"
+      badge={
+        <Badge variant="warning-medium" size="lg">
+          <Icon symbol="error" />3 required fields
+        </Badge>
+      }
+    />
+    <AccordionContent>{/* Campos del formulario */}</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Proceso por Pasos (Stepper)
+
+```tsx
+<Accordion type="single" collapsible defaultValue="current-step">
+  {steps.map((step) => (
+    <AccordionItem key={step.id} value={step.id}>
+      <AccordionTrigger
+        title={step.title}
+        badge={<Badge variant={step.status}>{step.label}</Badge>}
+      />
+      <AccordionContent>{step.content}</AccordionContent>
+    </AccordionItem>
+  ))}
+</Accordion>
+```
+
+### Configuración de Cuenta
+
+```tsx
+<Accordion type="multiple">
+  <AccordionItem value="profile">
+    <AccordionTrigger title="Profile Settings" />
+    <AccordionContent>{/* Settings */}</AccordionContent>
+  </AccordionItem>
+
+  <AccordionItem value="security">
+    <AccordionTrigger
+      title="Security"
+      badge={<Badge variant="warning-medium">Update required</Badge>}
+    />
+    <AccordionContent>{/* Security settings */}</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+## Diferencias con Accordion Regular
+
+| Característica     | Accordion Regular       | Accordion Rounded                 |
+| ------------------ | ----------------------- | --------------------------------- |
+| Bordes             | Esquinas cuadradas      | `rounded-2xl` (muy redondeado)    |
+| Fondo del Item     | Transparente con border | `bg-muted` (gris claro)           |
+| Separación         | Border entre items      | Margen `mb-4` entre items         |
+| Badge Support      | No (solo children)      | Sí (prop `badge` dedicada)        |
+| Estilo del Título  | Normal                  | Mayúsculas, compacto, color gris  |
+| Iconos             | ChevronDown             | add/remove                        |
+| Altura del Trigger | Variable                | Fija `h-16` (3.5rem)              |
+| Uso Principal      | General, documentación  | Formularios, validación, steppers |
+
+## Notas de Implementación
+
+- Usa Radix UI Accordion como base
+- Iconos de Material Symbols (add, remove)
+- El componente usa internamente clases con prefijo `adm:` para evitar conflictos
+- Los títulos se truncan automáticamente con `line-clamp-1` si son muy largos
+- La prop `title` es preferida sobre `children` para consistencia
+- Badge se renderiza antes del icono add/remove
+- Altura del trigger es fija para mantener alineación visual
+- Animaciones CSS personalizadas (accordion-up, accordion-down)
+
+## Accesibilidad
+
+- ✅ Usa elementos button nativos para triggers
+- ✅ Estados expanded/collapsed con `data-state`
+- ✅ Navegación por teclado completa (Space, Enter, Arrow keys)
+- ✅ Focus visible en triggers
+- ✅ ARIA attributes automáticos de Radix UI
+- ✅ Disabled state soportado en items individuales
+- ✅ Screen reader friendly
+
+## Referencias
+
+- Basado en Radix UI Accordion: https://www.radix-ui.com/primitives/docs/components/accordion
+- Patrones de diseño: Material Design Expansion Panels
+- Variante visual personalizada de Adamo Suite