## Store Locator (S—202)

A schematic map with numbered pins and a synced list: pick a pin or a row, filter open-now, and see distance and hours.

- URL: https://sundaeui.dev/components/store-locator
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/store-locator.json`
- Tags: locations, retail, list, pins, map, store-locator

The map and list share one selection: hovering a row lifts its pin, choosing a pin scrolls its row into view. The selected store expands with hours and a directions link.
The “Open now” filter hides closed stores from both. The map is a lightweight SVG placeholder you can swap for any map library.

### Usage

```tsx
import { StoreLocator } from '@/components/sundae/store-locator'

<StoreLocator />
```

### Props

- `stores` (`Store[]`, required): Stores with x/y map position, distance and hours.
- `onSelect` (`(id: string) => void`): Called on selection.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Retail, pickup points, clinics, coworking spaces.

### When not to use

- Turn-by-turn navigation: hand off to a maps app.

### Accessibility

- Pins are buttons labelled with the store name and distance.
- The list is a listbox; the open-now filter is a switch.
- Reduced motion removes the movement and keeps every state change.