FilterBar

Barra de filtros segmentada (chips + búsqueda).

Barra de filtros segmentada

Vista previa

import { FilterBar, FilterChip, FilterCheckList, FilterRadioList }
  from "@eidondev/acme-ui/blocks";

<FilterBar>
  <FilterChip icon={<CalendarBlank />} summary="Todo">
    {(close) => <FilterRadioList options={…} value={date} onChange={…} />}
  </FilterChip>
  <FilterChip icon={<Newspaper />} summary="Todas las fuentes" active={…}>
    {() => (
      <FilterCheckList searchable emptyLabel="Todas las fuentes"
        options={[{ value, label, meta }]} selected={…} onToggle={…} onClear={…} />
    )}
  </FilterChip>
  <FilterBar.Search placeholder="Buscar…" value={q} onChange={…} />
</FilterBar>

Comparación de temas

El mismo componente bajo distintos modos y marcas. No cambia el componente — solo los tokens (CSS variables) del contenedor.

Legacy · claro

Editorial · claro

Technical · oscuro

Warm · claro

Playful · claro