SearchInput

export function BuscadoresMatrix() {
  const [search, setSearch] = useState('')
  const [debounced, setDebounced] = useState('')
  const [consultas, setConsultas] = useState(0)

  const locales = RESERVAS_BUSCABLES.filter((r) => r.toLowerCase().includes(search.trim().toLowerCase()))
  const remotas = RESERVAS_BUSCABLES.filter((r) => r.toLowerCase().includes(debounced.trim().toLowerCase()))

  return (
    <Stage label="SearchInput y DebouncedSearchInput · las dos líneas que escribe GestorSalon" tall wide>
      <div className="grid w-full max-w-[620px] grid-cols-1 gap-5 px-1 py-1 sm:grid-cols-2">
        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            SearchInput · filtrado local, `debounce={'{'}0{'}'}` — la barra de la pantalla de servicios
          </span>
          <SearchInput
            value={search}
            onChange={setSearch}
            placeholder="Buscar"
            debounce={0}
            rootClassName="w-full sm:w-60"
          />
          <ul className="flex flex-col gap-1">
            {locales.map((r) => (
              <li key={r} className="rounded-md border border-content/10 bg-container px-2.5 py-1.5 text-[11px] text-content/70">
                {r}
              </li>
            ))}
            {locales.length === 0 && <li className="px-2.5 py-1.5 text-[11px] text-content/60">Sin coincidencias.</li>}
          </ul>
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            DebouncedSearchInput · el buscador de contactos del diálogo de plantillas
          </span>
          <DebouncedSearchInput
            value={debounced}
            onDebouncedChange={(next) => {
              setDebounced(next)
              setConsultas((n) => n + 1)
            }}
            placeholder="Buscar por nombre o teléfono..."
            isGlobalSearchTarget={false}
          />
          <ul className="flex flex-col gap-1">
            {remotas.map((r) => (
              <li key={r} className="rounded-md border border-content/10 bg-container px-2.5 py-1.5 text-[11px] text-content/70">
                {r}
              </li>
            ))}
            {remotas.length === 0 && <li className="px-2.5 py-1.5 text-[11px] text-content/60">Sin coincidencias.</li>}
          </ul>
          <span className="text-[11px] text-content/60">
            Avisó {consultas} {consultas === 1 ? 'vez' : 'veces'} — una por pausa, no una por tecla.
            Eso es lo que se ahorra el backend.
          </span>
        </div>
      </div>
    </Stage>
  )
}

De specimens/data-display.tsx · BuscadoresMatrix: 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.