# FilterBar

> La barra sobre una lista o una tabla: búsqueda, filtros y acciones al final. Una fila si la barra mide 36 rem o más, una columna por debajo (container query).

```tsx
import { FilterBar } from "sebs7n-ui/filter-bar"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Búsqueda, filtros y acciones

Una fila en escritorio, una columna en el teléfono. Los controles son los de siempre: la barra solo los acomoda.

```tsx
import { Button } from "sebs7n-ui/button"
import { DownloadIcon } from "lucide-react"
import { FilterBar } from "sebs7n-ui/filter-bar"
import { SearchField } from "sebs7n-ui/search-field"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "sebs7n-ui/select"
import { ToggleGroup, ToggleGroupItem } from "sebs7n-ui/toggle-group"
import { useState } from "react"

function Basic() {
  const [query, setQuery] = useState("")
  const [status, setStatus] = useState("all")
  const [period, setPeriod] = useState(["month"])
  return (
    <FilterBar
      actions={
        <Button variant="secondary">
          <DownloadIcon />
          Exportar
        </Button>
      }
      className="w-full"
      filters={
        <>
          <Select items={STATUS} onValueChange={(value) => value && setStatus(value as string)} value={status}>
            <SelectTrigger aria-label="Estado" className="w-full sm:w-48">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {Object.entries(STATUS).map(([value, label]) => (
                <SelectItem key={value} value={value}>
                  {label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <ToggleGroup aria-label="Período" onValueChange={(value) => value.length > 0 && setPeriod(value)} required value={period}>
            <ToggleGroupItem value="month">Mes</ToggleGroupItem>
            <ToggleGroupItem value="quarter">Trimestre</ToggleGroupItem>
            <ToggleGroupItem value="year">Año</ToggleGroupItem>
          </ToggleGroup>
        </>
      }
      search={<SearchField aria-label="Buscar facturas" onValueChange={setQuery} placeholder="Buscar facturas" value={query} />}
    />
  )
}
```

### Con selección

Mientras hay facturas elegidas, las acciones masivas ocupan el lugar de las de siempre.

```tsx
import { BulkActionsBar } from "sebs7n-ui/bulk-actions-bar"
import { Button } from "sebs7n-ui/button"
import { FilterBar } from "sebs7n-ui/filter-bar"
import { SearchField } from "sebs7n-ui/search-field"
import { useState } from "react"

function WithSelection() {
  const [selected, setSelected] = useState(2)
  return (
    <FilterBar
      actions={
        selected > 0 ? (
          <BulkActionsBar count={selected} labels={{ selectedOne: "{count} seleccionada", selectedOther: "{count} seleccionadas" }} onClear={() => setSelected(0)}>
            <Button size="sm" variant="secondary">
              Marcar cobradas
            </Button>
          </BulkActionsBar>
        ) : (
          <Button onClick={() => setSelected(2)} variant="secondary">
            Simular selección
          </Button>
        )
      }
      className="w-full"
      search={<SearchField aria-label="Buscar facturas" placeholder="Buscar facturas" />}
    />
  )
}
```

## Props

### FilterBar

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `actions` | `React.ReactNode` | — | Lo que actúa sobre la lista, al final y a la derecha. |
| `filters` | `React.ReactNode` | — | Los filtros: en fila en escritorio y en columna en el teléfono. |
| `search` | `React.ReactNode` | — | El buscador. En escritorio ocupa 18 rem; en el teléfono, todo el ancho. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

## Teclado

| Tecla | Qué hace |
|---|---|
| — | No es interactivo: el teclado es el de los controles que lleva. |

## Accesibilidad

- Es solo disposición: cada control trae su nombre (`aria-label` del `SearchField`, del `Select` y del `ToggleGroup`). Para marcarla como la búsqueda de la página, `role="search"` y `aria-label`.
- Sin estado ni `"use client"`: sirve en un Server Component.

## Reglas de uso

- Tres slots: `search` (un `SearchField`, 18 rem desde 36 rem de ancho de la barra y todo el ancho por debajo), `filters` (`Select`, `ToggleGroup`: pocas opciones, `ToggleGroup`; muchas, `Select`) y `actions` (vista, exportar, `BulkActionsBar`), que queda a la derecha.
- Responde al ancho de **su caja** (`@xl`, 36 rem), no al de la ventana: en un teléfono (390 px) o con un panel lateral abierto es una columna donde cada control ocupa el ancho; las acciones se reparten la última fila, así no hay controles sueltos a medias.
- Todos los controles de la barra del mismo tamaño: `sm` en la barra de una tabla, `md` (el default) sobre una lista suelta.
- Dentro de `DataTable` los filtros van en su slot `filters`; `FilterBar` es para las listas y grillas que no son una tabla.

## Relacionados

[search-field](/docs/components/search-field.md) · [toggle-group](/docs/components/toggle-group.md) · [select](/docs/components/select.md) · [bulk-actions-bar](/docs/components/bulk-actions-bar.md) · [data-table](/docs/components/data-table.md)