Accordion

Secciones plegables para organizar contenido jerárquico.

---

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@imansi/ui';

---

Uso básico

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>¿Qué es Imansi?</AccordionTrigger>
    <AccordionContent>
      Imansi es un ecosistema de infraestructura para developers.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>¿Es gratis?</AccordionTrigger>
    <AccordionContent>
      Todos los paquetes son open source con licencia MIT.
    </AccordionContent>
  </AccordionItem>
</Accordion>

---

Single vs Multiple

Single (uno abierto a la vez):

<Accordion type="single" collapsible>
  {/* items */}
</Accordion>

Multiple (varios abiertos a la vez):

<Accordion type="multiple">
  {/* items */}
</Accordion>

---

Con uno abierto por defecto

<Accordion type="single" defaultValue="item-1" collapsible>
  {/* items */}
</Accordion>

---

Props

Accordion

Prop	Tipo	Default	Descripción
type	'single' | 'multiple'	—	Modo de apertura
defaultValue	string | string[]	—	Item(s) abierto(s) por defecto
value	string | string[]	—	Valor controlado
onValueChange	(value) => void	—	Callback al cambiar
collapsible	boolean	false	Permite cerrar el item abierto (solo type="single")

AccordionItem

Prop	Tipo	Default	Descripción
value	string	—	Identificador del item (obligatorio)
disabled	boolean	false	Deshabilita el item

---

Accesibilidad

• Navegable con Tab y Flechas ↑↓
• Enter / Space abre/cierra
• Home / End van al primer/último item
• role="region" + aria-expanded + aria-controls automáticos