componente · @solu30/ui-kit/input

AccordionList

El componente, montado

Cargando el componente del paquete instalado…

Cargando el chunk del paquete instalado…

De dónde se importa

import { AccordionList } from '@solu30/ui-kit/input'

Props

10 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
items	sí	`AccordionItem[]`	List of accordion item descriptors
openItems	sí	`Array<string \| number>`	Controlled: which items are currently open
onToggle	sí	`(id: string \| number) => void`	Called when a header is toggled
renderContent	sí	`(item: AccordionItem) => React__default.ReactNode`	Render function for each item's expanded content
emptyState	opcional	`{`	Fallback when items array is empty
icon	opcional	`React__default.ReactNode`	—
title	sí	`string`	—
subtitle	opcional	`string`	—
dimInactive	opcional	`boolean`	Dim non-active items when any item is open
className	opcional	`string`	Additional CSS class

Ejemplo del paquete

const [openItems, setOpenItems] = useState<string[]>([])
<AccordionList
items={[
{ id: '1', title: 'Step 1', isComplete: true },
{ id: '2', title: 'Step 2', badge: 'Required' },
]}
openItems={openItems}
onToggle={(id) =>
setOpenItems((prev) =>
prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
)
}
renderContent={(item) => <div>Content for {item.title}</div>}
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.