avix-filter-bar

Barra de filtros configurable para React: búsqueda siempre visible, botón colapsable animado y controles de tipo select, switch y fecha (filtro acumulativo por campo con doble calendario y selección de hora).

Construida sobre Base UI, react-day-picker y clases de utilidad de Tailwind CSS (estilo shadcn/ui).

Instalación

npm install avix-filter-bar

Peer dependencies: react y react-dom (18 o 19).

Requisitos de estilos

El componente usa clases de Tailwind y las variables de tema de shadcn/ui (--background, --foreground, --primary, --border, --input, --accent, --muted, --popover, --ring, etc.). Asegúrate de tener Tailwind configurado con esas variables y de incluir las rutas del paquete en content:

// tailwind.config
content: ["./node_modules/avix-filter-bar/dist/**/*.{js,mjs}"]

Uso

"use client"
import * as React from "react"
import { FilterBar, type FilterControl } from "avix-filter-bar"
import { ListFilterIcon } from "lucide-react"

export function Demo() {
  const [busqueda, setBusqueda] = React.useState("")
  const [estado, setEstado] = React.useState("todos")
  const [soloActivos, setSoloActivos] = React.useState(false)
  const [fechas, setFechas] = React.useState({})

  const controls: FilterControl[] = [
    {
      kind: "select",
      key: "estado",
      label: "Estado",
      icon: ListFilterIcon,
      value: estado,
      onValueChange: setEstado,
      allValue: "todos",
      options: [
        { value: "todos", label: "Todos" },
        { value: "activo", label: "Activo" },
        { value: "inactivo", label: "Inactivo" },
      ],
    },
    {
      kind: "switch",
      key: "activos",
      label: "Solo activos",
      checked: soloActivos,
      onCheckedChange: setSoloActivos,
    },
    {
      kind: "date",
      key: "fechas",
      value: fechas,
      onValueChange: setFechas,
      campos: [
        {
          key: "creado",
          label: "Creado",
          text: "text-sky-600",
          on: "bg-sky-500/15 text-sky-700",
          ring: "ring-sky-500/50",
          cal: {
            selected: "rounded-md bg-sky-600 text-white",
            start: "rounded-l-md! rounded-r-none! bg-sky-600! text-white!",
            end: "rounded-r-md! rounded-l-none! bg-sky-600! text-white!",
            middle: "rounded-none! bg-sky-500/20! text-foreground!",
            hover: "hover:bg-sky-500/15 hover:text-sky-700",
          },
        },
      ],
    },
  ]

  return (
    <FilterBar
      search={{
        value: busqueda,
        onValueChange: setBusqueda,
        placeholder: "Buscar…",
      }}
      controls={controls}
    />
  )
}

Filtrar con el valor de fechas

El estado de fechas (DateFilters) guarda un picker por campo. Usa el helper boundsPicker para obtener los límites { desde, hasta } de cada campo y filtrar tus datos:

import { boundsPicker } from "avix-filter-bar"

const b = boundsPicker(fechas["creado"])
if (b) {
  // item.creado dentro de [b.desde, b.hasta]
}

API

<FilterBar search controls />

• search: { value, onValueChange, placeholder? } — campo de búsqueda siempre visible.
• controls: FilterControl[] — lista de controles configurables.

FilterControl

• { kind: "select", key, label, icon?, value, onValueChange, options, allValue?, excludeFromCount?, width? }
• { kind: "switch", key, label, icon?, checked, onCheckedChange }
• { kind: "date", key, campos, value, onValueChange }

Helpers y tipos exportados

boundsPicker, pickerVacio, FilterControl, CampoFecha, CalColor, DateFilters, PickerFecha.