GLS Registry

Pudo Selector

A multi-select Parcel Shop (punto) picker with client-side search.

Installation

npx shadcn@latest add @ecodeliver/pudo-selector

Usage

Pass the full pudos list. The parent owns the selected ids.

import { useState } from "react";
import { PudoSelector } from "@/components/registry/pudo-selector";

const pudos = [
  {
    id: "pudo-sant-marti",
    name: "Copistería Sant Martí",
    lineAddress1: "Carrer de Independència 341",
    postalCode: "08020",
  },
];

export function Example() {
  const [selectedIds, setSelectedIds] = useState([]);

  return (
    <PudoSelector
      pudos={pudos}
      selectedIds={selectedIds}
      onToggle={setSelectedIds}
      onClear={() => setSelectedIds([])}
    />
  );
}

Behaviour

The trigger shows Punto and a count badge when something is selected. The popover searches by name and address (lineAddress1). Restablecer clears the selection.

API Reference

PudoSelector

PropTypeDefault
pudosPudo[]-
selectedIdsstring[][]
onToggle(ids: string[]) => void-
onClear() => void-
classNamestring-
disabledbooleanfalse

Pudo

PropTypeDefault
idstring-
namestring-
lineAddress1string-
postalCodestring-

On this page