componente · @solu30/ui-kit/data-display

FilterDropdown

Botón píldora que abre una lista de opciones con tilde y muestra cuántas quedaron elegidas.

Seguir leyendo — 2 párrafos más

Compact multi-select filter dropdown — button trigger + checkbox list.

Renders as a small pill button that shows a count badge when items are selected. Clicking opens a dropdown list with checkboxes and an optional clear button. Click-outside and Escape key close the panel.

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

luigi

El componente, montado

Cargando el espécimen…

export function ColumnFilterPrimitivesMatrix() {
  const [text, setText] = useState('')
  const [select, setSelect] = useState<string[]>([])
  const [numberRange, setNumberRange] = useState<[number | null, number | null]>([null, null])
  const [dateRange, setDateRange] = useState<[string | null, string | null]>([null, null])
  const [dropdown, setDropdown] = useState<string[]>([])

  return (
    <Stage label="Filtros de columna · el vocabulario completo, lado a lado" tall wide>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">TextColumnFilter</span>
          <TextColumnFilter value={text} onChange={setText} onClear={() => setText('')} placeholder="Filtrar salón…" />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">SelectColumnFilter</span>
          <SelectColumnFilter value={select} onChange={setSelect} onClear={() => setSelect([])} options={ESTADO_OPTIONS} />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">NumberRangeColumnFilter</span>
          <NumberRangeColumnFilter
            value={numberRange}
            onChange={setNumberRange}
            onClear={() => setNumberRange([null, null])}
            minLabel="Mín. invitados"
            maxLabel="Máx. invitados"
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">DateRangeColumnFilter</span>
          <DateRangeColumnFilter
            value={dateRange}
            onChange={setDateRange}
            onClear={() => setDateRange([null, null])}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-medium text-content/50">FilterDropdown</span>
          <FilterDropdown
            options={ESTADO_OPTIONS}
            value={dropdown}
            onChange={setDropdown}
            placeholder="Estado"
            labelPlural="estados"
          />
        </div>
      </div>
    </Stage>
  )
}

De specimens/data-display.tsx · ColumnFilterPrimitivesMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { FilterDropdown } from '@solu30/ui-kit/data-display'

Props

8 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
options	sí	`FilterDropdownOption[]`	Available options
value	sí	`string[]`	Selected values
onChange	sí	`(values: string[]) => void`	Callback when selection changes
placeholder	opcional	`string`	Placeholder text when nothing selected
labelPlural	opcional	`string`	Plural label used in count display: "2 {labelPlural}"
clearLabel	opcional	`string`	Clear button label
minWidth	opcional	`string`	Min width for the dropdown panel
className	opcional	`string`	Additional CSS class on the trigger button

Ejemplo del paquete

<FilterDropdown
  options={TYPE_OPTIONS}
  value={typeFilter}
  onChange={setTypeFilter}
  placeholder="Tipo"
  labelPlural="tipos"
/>

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.