Pudo Selector
A multi-select Parcel Shop (punto) picker with client-side search.
Installation
npx shadcn@latest add @ecodeliver/pudo-selectorUsage
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
| Prop | Type | Default |
|---|---|---|
pudos | Pudo[] | - |
selectedIds | string[] | [] |
onToggle | (ids: string[]) => void | - |
onClear | () => void | - |
className | string | - |
disabled | boolean | false |
Pudo
| Prop | Type | Default |
|---|---|---|
id | string | - |
name | string | - |
lineAddress1 | string | - |
postalCode | string | - |