GLS Component Registry

Installation

pnpm dlx 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";
import { pudos } from "@/mocks";

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`	`PudoPoint[]`	-
`selectedIds`	`string[]`	`[]`
`onToggle`	`(ids: string[]) => void`	-
`onClear`	`() => void`	-
`className`	`string`	-
`disabled`	`boolean`	`false`

PudoPoint

Prop	Type	Default
`id`	`string`	-
`name`	`string`	-
`lineAddress1`	`string`	-
`postalCode`	`string`	-

Pudo Selector