# Address Card

Saved address card with a Home or Work label, default badge, contact details and an optional street-map tile. Picking one highlights the card and drops its pin on the map. Includes an add-new tile.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/address-card
```

## Import

```tsx
import { AddressMap, AddressCard } from "@/components/ui/address-card/address-card";
```

## Variants

- `add-new` — Add new: `npx @lumioui/cli add pro/address-card-add-new`
- `checkout-summary` — Checkout summary: `npx @lumioui/cli add pro/address-card-checkout-summary`
- `pickup-point` — Pickup point: `npx @lumioui/cli add pro/address-card-pickup-point`
- `select-list` — Delivery address picker: `npx @lumioui/cli add pro/address-card-select-list`

## Props

### AddressMap

| Prop | Type | Notes |
| --- | --- | --- |
| `seed?` | `number` | Varies the street layout — give each address its own. Default 1. |
| `active?` | `boolean` | Pops the pin when it flips to true (selection). |
| `showPin?` | `boolean` | Hide the pin (a neutral backdrop). Default true. |
| `className?` | `string` | — |

### AddressCard

| Prop | Type | Notes |
| --- | --- | --- |
| `label` | `string` | "Home", "Work", "Mum's", "Parcel locker 14". |
| `icon?` | `IconName` | Glyph beside the label. Defaults by label (home → home, work → briefcase, else map-pin). |
| `name?` | `string` | Recipient. |
| `lines` | `readonly string[]` | Street lines, one per row. |
| `contact?` | `string` | Phone or email. |
| `isDefault?` | `boolean` | — |
| `defaultLabel?` | `string` | Badge copy. Default "Default". |
| `note?` | `string` | Extra line — "Open until 9 pm", "Leave with the concierge". |
| `noteTone?` | `"default" | "success" | "warning"` | Note colour: success for open now, warning for closing soon. Default "default". |
| `distance?` | `string` | Trailing meta beside the label — "0.4 mi". |
| `map?` | `"none" | "side" | "top"` | Drawn map tile: beside the text, across the top, or none. Default "none". |
| `mapSeed?` | `number` | Street layout seed for the map tile. |
| `selected?` | `boolean` | Radio mode: selected state (controlled). |
| `onSelect?` | `() => void` | Radio mode: makes the whole card a radio. |
| `onEdit?` | `() => void` | Adds an Edit affordance. |
| `editLabel?` | `string` | Edit affordance copy. Default "Edit". |
| `disabled?` | `boolean` | Dims the card and blocks selection — out of delivery range. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### AddressCardAdd

| Prop | Type | Notes |
| --- | --- | --- |
| `onPress?` | `() => void` | — |
| `label?` | `string` | Default "Add new address". |
| `hint?` | `string` | Second line — "Home, work or a pickup point". |
| `className?` | `string` | — |

## Icons rendered

- `plus` — /icons.html?i=plus
- `chevron-right` — /icons.html?i=chevron-right

Source: https://lumioui.com/components/address-card