componente · @solu30/ui-kit/input

AccordionList

Lista de secciones plegables controlada desde afuera, con indicador de completitud por ítem.

Seguir leyendo — 2 párrafos más

Controlled accordion list with per-item completion indicators, smooth CSS grid-rows animation, and optional dim-inactive behavior.

Uses CSS variables for theming:

--ui-bg-raised for item background
--ui-border for borders
--ui-content-primary for title text
--ui-content-muted for subtitle/secondary text
--ui-accent for badge
--ui-success for completion dot (complete)
--ui-warning for completion dot (incomplete)

3 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
gestorsalon
luigi

El componente, montado

Cargando el componente del paquete instalado…

Cómo se usa

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

Props

7 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	`{ icon?: React__default.ReactNode; title: string; subtitle?: string; }`	Fallback when items array is empty
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: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.