60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T6ffe,"use client" import * as React from "react" import { CircleAlert } from "lucide-react" import { AnimatePresence, MotionConfig, animate, motion, useReducedMotion } from "motion/react" import { Checkbox } from "@/components/ui/checkbox" import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@/components/ui/combobox" import { Field, FieldError, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field" import { Input } from "@/components/ui/input" import { Skeleton } from "@/components/ui/skeleton" import { COUNTRY_CODES, getAddressFormat, type Address, type AddressErrors, type AddressFieldModes, type AddressFieldName, type AddressFormat, type AddressFormatInput, } from "@/lib/address-format" import { cn } from "@/lib/utils" /* * A shipping or billing address whose fields follow the country: a US * address asks for a state and a ZIP code, a UK one for a town and a * postcode, a Japanese one starts with the family name. * * const [address, setAddress] = React.useState(emptyAddress("US")) * * * or composed * * * * * * Country and region are your shadcn Combobox — type "ger" for Germany — * and every field carries its `autocomplete` token, so browser autofill * fills the lot, country and state included. Validation is yours to run: * `validateAddress` from `@/lib/address-format` is a pure function, so the * server checks with the same rules; pass what it returns as `errors`. * Fields that come and go with the country grow and fold to their measured * height, and the lists grow out of their field (Motion; a fade under * reduced motion). */ export type { Address, AddressErrors, AddressFieldModes, AddressFieldName, AddressFormat } from "@/lib/address-format" /** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */ const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const const FADE = { duration: 0.15 } as const const subscribeNothing = () => () => {} /** Your locale, or the visitor's once hydrated — so server and client HTML agree. */ function useFormatLocale(locale?: string) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) return locale ?? (hydrated ? undefined : "en-US") } /** Each field's autofill token, after the section ("shipping" / "billing"). */ const AUTOCOMPLETE: Record = { givenName: "given-name", familyName: "family-name", organization: "organization", line1: "address-line1", line2: "address-line2", city: "address-level2", region: "address-level1", postalCode: "postal-code", phone: "tel", } /** Side by side once the form is wide enough — the form's width, not the screen's. */ const COLUMNS: Record = { 1: "", 2: "@sm/address-form:grid-cols-2", 3: "@sm/address-form:grid-cols-2 @md/address-form:grid-cols-3", } /** Grows to its measured height and folds back; a plain fade under reduced motion. */ function fold(reduce: boolean | null) { return reduce ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: FADE } : { initial: { height: 0, opacity: 0, overflow: "hidden" }, // Visible once open, so focus rings aren't clipped. animate: { height: "auto", opacity: 1, transitionEnd: { overflow: "visible" } }, exit: { height: 0, opacity: 0, overflow: "hidden" }, transition: MORPH, } } /** "State" -> "state", but "ZIP code" keeps its capitals. */ const lower = (label: string) => (/^[A-Z][a-z]/.test(label) ? label[0].toLowerCase() + label.slice(1) : label) type Option = { value: string; label: string } /** Lower case, accents off: "cote" finds "Côte d’Ivoire". */ const plain = (text: string) => text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase() /** * Best match first: the code itself ("de"), then names that start with what * was typed ("ger" -> Germany), then a word inside the name ("kingdom"), * then anywhere — so "ger" doesn't open on Algeria. */ function rank(options: Option[], query: string) { const q = plain(query.trim()) if (!q) return options const scored: { option: Option; score: number; index: number }[] = [] options.forEach((option, index) => { const label = plain(option.label) const at = label.indexOf(q) let score = -1 if (option.value.toLowerCase() === q) score = 0 else if (at === 0) score = 1 else if (at > 0 && /[\s(\-’']/.test(label[at - 1])) score = 2 else if (at > 0) score = 3 if (score !== -1) scored.push({ option, score, index }) }) return scored.sort((a, b) => a.score - b.score || a.index - b.index).map((s) => s.option) } /* ─── context ──────────────────────────────────────────────────────────── */ type Part = AddressFieldName | "country" export interface AddressFormContextValue { value: Address /** The format for the chosen country, with your `formats` and `fields` applied. */ format: AddressFormat /** Sets one field. A new country drops a region it doesn't have. */ setField: (field: Part, next: string) => void /** Sets several fields at once — what an address lookup calls with its result. */ setAddress: (patch: Partial

) => void /** The errors on show: yours, less any field the shopper has edited since. */ errors: AddressErrors section: "shipping" | "billing" /** The id of a field's input, for a label or a link of your own. */ fieldId: (field: Part) => string /** Moves focus to a field and scrolls it into view. */ focusField: (field: Part) => void countries: Option[] name?: string lookup?: React.ReactNode saveAsDefault: boolean /** Undefined when the form was given no `onSaveAsDefaultChange`. */ setSaveAsDefault?: (checked: boolean) => void disabled: boolean loading: boolean } const AddressFormContext = React.createContext(null) export function useAddressForm() { const context = React.useContext(AddressFormContext) if (!context) { throw new Error("useAddressForm must be used within .") } return context } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface AddressFormProps extends Omit, "onChange" | "defaultValue" | "name" | "children"> { value: Address onValueChange: (address: Address) => void /** Prefixes every autocomplete token, so a billing form never autofills as shipping. */ section?: "shipping" | "billing" /** Messages by field — from `validateAddress`, your schema or your server. */ errors?: AddressErrors | null /** ISO codes to offer, in your order. Every country, by name, when left out. */ countries?: string[] /** Your countries, or changes to ours — see `AddressFormatInput`. */ formats?: Record> /** Show, hide or require the company, second line and phone in every country. */ fields?: AddressFieldModes /** For country names. `undefined` follows the visitor's locale, once hydrated. */ locale?: string /** "Shipping address" or "Billing address", by default. */ legend?: React.ReactNode /** Keeps the legend for screen readers when your page already has a heading. */ hideLegend?: boolean /** An address search — Google Places, Loqate, your own — placed above the fields. */ lookup?: React.ReactNode saveAsDefault?: boolean /** Shows "Save as my default address"; leave it out to hide the checkbox. */ onSaveAsDefaultChange?: (checked: boolean) => void /** Names every input `${name}.city` and so on, for a plain form post. */ name?: string loading?: boolean children?: React.ReactNode } export function AddressForm({ value, onValueChange, section = "shipping", errors, countries, formats, fields, locale: localeProp, legend, hideLegend = false, lookup, saveAsDefault = false, onSaveAsDefaultChange, name, loading = false, disabled = false, className, children, ...props }: AddressFormProps) { const locale = useFormatLocale(localeProp) const reduce = useReducedMotion() const uid = React.useId() const formatOptions = React.useMemo(() => ({ formats, fields }), [formats, fields]) const format = React.useMemo(() => getAddressFormat(value.country ?? "", formatOptions), [value.country, formatOptions]) // Autofill fires a change per field in one tick, before React re-renders; // building each from the last one sent keeps all of them. const latest = React.useRef(value) React.useLayoutEffect(() => { latest.current = value }, [value]) const emit = React.useCallback( (next: Address) => { latest.current = next onValueChange(next) }, [onValueChange] ) // A field's error stays until the shopper edits it, or new errors arrive. const errorsKey = JSON.stringify(errors ?? {}) const [edited, setEdited] = React.useState({ errorsKey, fields: new Set() }) if (edited.errorsKey !== errorsKey) setEdited({ errorsKey, fields: new Set() }) const visibleErrors = React.useMemo(() => { const shown: AddressErrors = {} for (const [field, message] of Object.entries(errors ?? {}) as [Part, string | undefined][]) { if (message && !edited.fields.has(field)) shown[field] = message } return shown }, [errors, edited]) const markEdited = React.useCallback( (parts: Part[]) => setEdited((prev) => (parts.every((p) => prev.fields.has(p)) ? prev : { ...prev, fields: new Set([...prev.fields, ...parts]) })), [] ) const setAddress = React.useCallback( (patch: Partial

) => { const current = latest.current const next = { ...current, ...patch } if (patch.country !== undefined && patch.country !== current.country && patch.region === undefined) { // A region only carries over between countries that both type it in. const from = getAddressFormat(current.country ?? "", formatOptions).regions const to = getAddressFormat(patch.country, formatOptions).regions const keeps = to ? to.some((r) => r.code === current.region) : !from if (!keeps) next.region = "" } markEdited(Object.keys(patch) as Part[]) emit(next) }, [emit, formatOptions, markEdited] ) const setField = React.useCallback((field: Part, next: string) => setAddress({ [field]: next }), [setAddress]) const fieldId = React.useCallback((field: Part) => `${uid}-${field}`, [uid]) const focusField = React.useCallback( (field: Part) => { const input = document.getElementById(fieldId(field)) if (!input) return input.focus({ preventScroll: true }) input.scrollIntoView({ block: "center", behavior: reduce ? "auto" : "smooth" }) }, [fieldId, reduce] ) const countryOptions = useCountryOptions(countries, value.country, locale) const context = React.useMemo( () => ({ value, format, setField, setAddress, errors: visibleErrors, section, fieldId, focusField, countries: countryOptions, name, lookup, saveAsDefault, setSaveAsDefault: onSaveAsDefaultChange, disabled, loading, }), [value, format, setField, setAddress, visibleErrors, section, fieldId, focusField, countryOptions, name, lookup, saveAsDefault, onSaveAsDefaultChange, disabled, loading] ) return (

{legend ?? (section === "billing" ? "Billing address" : "Shipping address")} {loading ? ( ) : ( (children ?? ( <> )) )}

) } /** Country names in the visitor's language: every country by name, or yours in your order. */ function useCountryOptions(codes: string[] | undefined, current: string | undefined, locale: string | undefined) { const key = codes?.join(",") return React.useMemo(() => { let names: Intl.DisplayNames | null = null try { names = new Intl.DisplayNames(locale ? [locale] : undefined, { type: "region" }) } catch { // Very old engines: show the codes. } const list = key ? key.split(",") : [...COUNTRY_CODES] if (current && !list.includes(current.toUpperCase())) list.push(current.toUpperCase()) const options = list.map((code) => ({ value: code.toUpperCase(), label: names?.of(code.toUpperCase()) ?? code })) if (!key) options.sort((a, b) => a.label.localeCompare(b.label, locale)) return options }, [key, current, locale]) } /* ─── a combobox that grows out of its field ───────────────────────────── */ const OPEN_CLIP = "inset(-10% -10% -10% -10%)" interface AddressComboboxProps { id: string options: Option[] value: string onValueChange: (value: string) => void autoComplete: string name?: string invalid: boolean describedBy?: string required: boolean disabled: boolean empty: string } /** * Your shadcn Combobox, searchable, with its list growing out of the field * it belongs to and folding back into it. Base UI is told to wait for the * fold before it unmounts the list. */ function AddressCombobox({ id, options, value, onValueChange, autoComplete, name, invalid, describedBy, required, disabled, empty, }: AddressComboboxProps) { const reduce = useReducedMotion() const popupId = React.useId() const actionsRef = React.useRef<{ unmount: () => void; close: () => void } | null>(null) const phase = React.useRef<"closed" | "opening" | "open" | "closing">("closed") const running = React.useRef<{ stop: () => void } | null>(null) const frame = React.useRef(0) const selected = React.useMemo(() => options.find((o) => o.value === value) ?? null, [options, value]) const [query, setQuery] = React.useState("") const filtered = React.useMemo(() => rank(options, query), [options, query]) const findPopup = () => document.querySelector(`[data-address-popup="${popupId}"]`) /** `fromHere` reverses a fold already under way rather than restarting it. */ const play = (popup: HTMLElement, open: boolean, fromHere = false) => { running.current?.stop() if (reduce) { const controls = animate(popup, { opacity: open ? 1 : 0 }, FADE) running.current = controls return controls } // From the field's edge: down from below it, up from above it. const shut = popup.getAttribute("data-side") === "top" ? "inset(100% -10% -10% -10%)" : "inset(-10% -10% 100% -10%)" const controls = animate( popup, { clipPath: open && !fromHere ? [shut, OPEN_CLIP] : open ? OPEN_CLIP : shut }, MORPH ) running.current = controls return controls } // The list mounts a frame or two after the open request, in a portal. const playOpen = (tries = 12) => { cancelAnimationFrame(frame.current) const popup = findPopup() if (!popup) { if (tries > 0) frame.current = requestAnimationFrame(() => playOpen(tries - 1)) return } const reversing = phase.current === "closing" phase.current = "opening" play(popup, true, reversing).then(() => { if (phase.current === "opening") phase.current = "open" }) } React.useEffect(() => () => cancelAnimationFrame(frame.current), []) return ( setQuery(input)} value={selected} onValueChange={(next: Option | null) => onValueChange(next?.value ?? "")} isItemEqualToValue={(a: Option, b: Option) => a.value === b.value} autoHighlight // The browser fills a hidden input with this token; Base UI matches // "US" or "United States" to an option and selects it. autoComplete={autoComplete} name={name} disabled={disabled} actionsRef={actionsRef} onOpenChange={(open, details) => { if (open) { playOpen() return } cancelAnimationFrame(frame.current) const popup = findPopup() if (!popup) return details.preventUnmountOnClose() phase.current = "closing" play(popup, false).then(() => { if (phase.current !== "closing") return phase.current = "closed" actionsRef.current?.unmount() }) }} > {empty} {(option: Option) => ( {option.label} )} ) } /* ─── parts ────────────────────────────────────────────────────────────── */ function FieldLabelText({ label, required }: { label: string; required: boolean }) { return ( <> {label} {!required && (optional)} ) } export interface AddressFormCountryProps extends React.HTMLAttributes { /** "Country / region", by default. */ label?: string } /** The country, first: it decides every field below it. */ export function AddressFormCountry({ label = "Country / region", className, ...props }: AddressFormCountryProps) { const { value, countries, setField, errors, fieldId, section, name, disabled } = useAddressForm() const id = fieldId("country") const error = errors.country return ( {label} setField("country", next)} autoComplete={`${section} country`} name={name ? `${name}.country` : undefined} invalid={!!error} describedBy={error ? `${id}-error` : undefined} required disabled={disabled} empty="No country matches" /> {error} ) } export interface AddressFormFieldProps extends React.HTMLAttributes { field: AddressFieldName } /** One field, labelled and wired: its autofill token, its error, its keyboard. */ export function AddressFormField({ field, className, ...props }: AddressFormFieldProps) { const { value, format, setField, errors, fieldId, section, name, disabled } = useAddressForm() const id = fieldId(field) const error = errors[field] const required = format.required.includes(field) const label = format.labels[field] const describedBy = error ? `${id}-error` : undefined const autoComplete = `${section} ${AUTOCOMPLETE[field]}` const inputName = name ? `${name}.${field}` : undefined const control = field === "region" && format.regions ? ( ({ value: r.code, label: r.name }))} value={value.region ?? ""} onValueChange={(next) => setField("region", next)} autoComplete={autoComplete} name={inputName} invalid={!!error} describedBy={describedBy} required={required} disabled={disabled} empty={`No ${lower(label)} matches`} /> ) : ( setField(field, event.target.value)} autoComplete={autoComplete} aria-invalid={error ? true : undefined} aria-describedby={describedBy} aria-required={required || undefined} disabled={disabled} {...(field === "phone" && { type: "tel", inputMode: "tel" as const })} {...(field === "postalCode" && { inputMode: format.postalCode?.numeric ? ("numeric" as const) : undefined, autoCapitalize: format.postalCode?.numeric ? undefined : "characters", spellCheck: false, })} {...((field === "givenName" || field === "familyName" || field === "city") && { autoCapitalize: "words" })} /> ) return ( {control} {error} ) } /** * The country's fields, row by row. A row the new country doesn't have * folds away where it stood and a new one grows in where it belongs; the * rows that stay move only as far as those heights carry them. No layout * slide on top: two motions on one row is how fields end up overlapping. */ export function AddressFormFields({ className, ...props }: React.HTMLAttributes) { const { format } = useAddressForm() const reduce = useReducedMotion() const motionProps = fold(reduce) return (

{format.rows.map((row) => (

{row.map((field) => ( ))}

))}

) } /** Your address search, above the fields. Calls `useAddressForm().setAddress` with its result. */ export function AddressFormLookup({ children, className, ...props }: React.HTMLAttributes) { const { lookup } = useAddressForm() const content = children ?? lookup if (!content) return null return (

{content}

) } export interface AddressFormSaveDefaultProps extends React.HTMLAttributes { /** "Save as my default shipping address", by default. */ label?: React.ReactNode } /** Shown only when the form was given `onSaveAsDefaultChange`. */ export function AddressFormSaveDefault({ label, className, ...props }: AddressFormSaveDefaultProps) { const { saveAsDefault, setSaveAsDefault, section, disabled } = useAddressForm() if (!setSaveAsDefault) return null return ( setSaveAsDefault(checked === true)} /> {label ?? `Save as my default ${section} address`} ) } /** * Every error at once, at the top, each a link to its field — for the * shopper who pressed continue at the bottom. It takes focus when it * appears, and folds away as the fields are fixed. */ export function AddressFormErrorSummary({ className, ...props }: React.HTMLAttributes) { const { errors, format, focusField, fieldId } = useAddressForm() const reduce = useReducedMotion() const order: Part[] = ["country", ...format.rows.flat()] const entries = order.flatMap((field) => (errors[field] ? [{ field, message: errors[field] as string }] : [])) return ( {entries.length > 0 && ( )} ) } /** Takes its entries as props, so it keeps them while the summary folds away. */ function ErrorSummaryBody({ entries, focusField, fieldId, className, ...props }: React.HTMLAttributes & { entries: { field: Part; message: string }[] focusField: (field: Part) => void fieldId: (field: Part) => string }) { const ref = React.useRef(null) React.useEffect(() => { ref.current?.focus({ preventScroll: true }) ref.current?.scrollIntoView({ block: "nearest" }) }, []) return (

{entries.length === 1 ? "Check this field" : `Check these ${entries.length} fields`}

{ event.preventDefault() focusField(field) }} className="underline underline-offset-4 hover:text-destructive focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none" > {message}

) } /** The form's shape, while you load a saved address. */ function AddressFormSkeleton() { const { format } = useAddressForm() const rows: string[][] = [["country"], ...format.rows] return (

Loading the address form {rows.map((row) => (

{row.map((field) => (

))}

) } 63:T3e9f,/* * What an address looks like in each country, and the rules that check one. * * const format = getAddressFormat("GB") * const errors = validateAddress(address, format) // {} when it's fine * * No "use client" and no React: import it on the server and run the same * checks there that the form runs in the browser. `address-form` draws its * fields from these formats; pass `formats` to either to add a country or * change one. */ export type AddressFieldName = | "givenName" | "familyName" | "organization" | "line1" | "line2" | "city" | "region" | "postalCode" | "phone" export interface Address { /** ISO 3166-1 alpha-2: "US", "IN". */ country: string givenName: string familyName: string organization?: string line1: string line2?: string city: string /** * With a region list, the ISO 3166-2 subdivision code without the country * prefix — "CA" for California, "MH" for Maharashtra, "13" for Tokyo. * Otherwise whatever the shopper typed. */ region?: string postalCode?: string phone?: string } /** An error message for each field that needs fixing; empty when nothing does. */ export type AddressErrors = Partial> export interface AddressRegion { code: string name: string } export interface AddressFormat { /** Top to bottom; fields in a row sit side by side once the form is wide enough. */ rows: AddressFieldName[][] /** Fields the shopper must fill. Every other field in `rows` is optional. */ required: AddressFieldName[] labels: Record /** When set, the region is chosen from this list rather than typed. */ regions?: AddressRegion[] postalCode?: { pattern: RegExp /** Shown in the error: "Enter a valid ZIP code, like 94103". */ example: string /** Digits only, so phones show the number pad. */ numeric?: boolean } } /** A country's format as you write it: labels you leave out keep their defaults. */ export type AddressFormatInput = Omit & { labels?: Partial> } /** Whether a field is shown, and whether it must be filled — over any country's format. */ export type AddressFieldMode = "hidden" | "optional" | "required" export type AddressFieldModes = Partial> export const DEFAULT_ADDRESS_LABELS: Record = { givenName: "First name", familyName: "Last name", organization: "Company", line1: "Address", line2: "Apartment, suite, etc.", city: "City", region: "Region", postalCode: "Postal code", phone: "Phone", } /* ─── regions ──────────────────────────────────────────────────────────── */ const list = (entries: string): AddressRegion[] => entries .trim() .split("\n") .map((line) => { const [code, name] = line.trim().split("|") return { code, name } }) const US_STATES = list(` AL|Alabama AK|Alaska AS|American Samoa AZ|Arizona AR|Arkansas CA|California CO|Colorado CT|Connecticut DE|Delaware DC|District of Columbia FL|Florida GA|Georgia GU|Guam HI|Hawaii ID|Idaho IL|Illinois IN|Indiana IA|Iowa KS|Kansas KY|Kentucky LA|Louisiana ME|Maine MD|Maryland MA|Massachusetts MI|Michigan MN|Minnesota MS|Mississippi MO|Missouri MT|Montana NE|Nebraska NV|Nevada NH|New Hampshire NJ|New Jersey NM|New Mexico NY|New York NC|North Carolina ND|North Dakota MP|Northern Mariana Islands OH|Ohio OK|Oklahoma OR|Oregon PA|Pennsylvania PR|Puerto Rico RI|Rhode Island SC|South Carolina SD|South Dakota TN|Tennessee TX|Texas UT|Utah VT|Vermont VI|U.S. Virgin Islands VA|Virginia WA|Washington WV|West Virginia WI|Wisconsin WY|Wyoming `) const CA_PROVINCES = list(` AB|Alberta BC|British Columbia MB|Manitoba NB|New Brunswick NL|Newfoundland and Labrador NT|Northwest Territories NS|Nova Scotia NU|Nunavut ON|Ontario PE|Prince Edward Island QC|Quebec SK|Saskatchewan YT|Yukon `) const AU_STATES = list(` ACT|Australian Capital Territory NSW|New South Wales NT|Northern Territory QLD|Queensland SA|South Australia TAS|Tasmania VIC|Victoria WA|Western Australia `) const IN_STATES = list(` AN|Andaman and Nicobar Islands AP|Andhra Pradesh AR|Arunachal Pradesh AS|Assam BR|Bihar CH|Chandigarh CG|Chhattisgarh DH|Dadra and Nagar Haveli and Daman and Diu DL|Delhi GA|Goa GJ|Gujarat HR|Haryana HP|Himachal Pradesh JK|Jammu and Kashmir JH|Jharkhand KA|Karnataka KL|Kerala LA|Ladakh LD|Lakshadweep MP|Madhya Pradesh MH|Maharashtra MN|Manipur ML|Meghalaya MZ|Mizoram NL|Nagaland OD|Odisha PY|Puducherry PB|Punjab RJ|Rajasthan SK|Sikkim TN|Tamil Nadu TS|Telangana TR|Tripura UP|Uttar Pradesh UK|Uttarakhand WB|West Bengal `) // North to south, the order Japanese forms list them in. const JP_PREFECTURES = `Hokkaido Aomori Iwate Miyagi Akita Yamagata Fukushima Ibaraki Tochigi Gunma Saitama Chiba Tokyo Kanagawa Niigata Toyama Ishikawa Fukui Yamanashi Nagano Gifu Shizuoka Aichi Mie Shiga Kyoto Osaka Hyogo Nara Wakayama Tottori Shimane Okayama Hiroshima Yamaguchi Tokushima Kagawa Ehime Kochi Fukuoka Saga Nagasaki Kumamoto Oita Miyazaki Kagoshima Okinawa` .split(/\s+/) .map((name, i) => ({ code: String(i + 1).padStart(2, "0"), name })) /* ─── formats ──────────────────────────────────────────────────────────── */ const NAMES: AddressFieldName[] = ["givenName", "familyName"] const STREET: AddressFieldName[][] = [["line1"], ["line2"]] /** Any country without its own entry: every field, nothing assumed. */ export const GENERIC_ADDRESS_FORMAT: AddressFormatInput = { rows: [NAMES, ...STREET, ["city"], ["region", "postalCode"], ["phone"]], required: ["givenName", "familyName", "line1", "city"], labels: { region: "State / province / region" }, } export const ADDRESS_FORMATS: Record = { US: { rows: [NAMES, ...STREET, ["city", "region", "postalCode"], ["phone"]], required: ["givenName", "familyName", "line1", "city", "region", "postalCode"], labels: { region: "State", postalCode: "ZIP code" }, regions: US_STATES, postalCode: { pattern: /^\d{5}(?:[-\s]?\d{4})?$/, example: "94103", numeric: true }, }, CA: { rows: [NAMES, ...STREET, ["city", "region", "postalCode"], ["phone"]], required: ["givenName", "familyName", "line1", "city", "region", "postalCode"], labels: { region: "Province" }, regions: CA_PROVINCES, postalCode: { pattern: /^[ABCEGHJ-NPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][\s-]?\d[ABCEGHJ-NPRSTV-Z]\d$/i, example: "K1A 0B1" }, }, GB: { rows: [NAMES, ...STREET, ["city", "postalCode"], ["phone"]], required: ["givenName", "familyName", "line1", "city", "postalCode"], labels: { city: "Town or city", postalCode: "Postcode" }, postalCode: { pattern: /^(?:GIR\s?0AA|[A-Z]{1,2}\d[A-Z\d]?\s?\d[A-Z]{2})$/i, example: "SW1A 1AA" }, }, AU: { rows: [NAMES, ...STREET, ["city", "region", "postalCode"], ["phone"]], required: ["givenName", "familyName", "line1", "city", "region", "postalCode"], labels: { city: "Suburb", region: "State", postalCode: "Postcode" }, regions: AU_STATES, postalCode: { pattern: /^\d{4}$/, example: "2000", numeric: true }, }, IN: { rows: [NAMES, ...STREET, ["city", "region", "postalCode"], ["phone"]], // Couriers in India call before delivering. required: ["givenName", "familyName", "line1", "city", "region", "postalCode", "phone"], labels: { line2: "Apartment, area, landmark", region: "State", postalCode: "PIN code" }, regions: IN_STATES, postalCode: { pattern: /^[1-9]\d{2}\s?\d{3}$/, example: "110001", numeric: true }, }, DE: { rows: [NAMES, ...STREET, ["postalCode", "city"], ["phone"]], required: ["givenName", "familyName", "line1", "city", "postalCode"], labels: { line1: "Street and house number", postalCode: "Postcode" }, postalCode: { pattern: /^\d{5}$/, example: "10115", numeric: true }, }, FR: { rows: [NAMES, ...STREET, ["postalCode", "city"], ["phone"]], required: ["givenName", "familyName", "line1", "city", "postalCode"], labels: { postalCode: "Postcode" }, postalCode: { pattern: /^\d{2}\s?\d{3}$/, example: "75001", numeric: true }, }, JP: { // Family name first, then the address from the largest unit down. rows: [["familyName", "givenName"], ["postalCode", "region"], ["city"], ...STREET, ["phone"]], required: ["familyName", "givenName", "postalCode", "region", "city", "line1"], labels: { region: "Prefecture", city: "City, ward, town", line1: "Street address", line2: "Building, room" }, regions: JP_PREFECTURES, postalCode: { pattern: /^\d{3}-?\d{4}$/, example: "100-0001", numeric: true }, }, } /** Every ISO 3166-1 alpha-2 code. Pass `countries` to the form to offer only those you ship to. */ export const COUNTRY_CODES: readonly string[] = `AD AE AF AG AI AL AM AO AQ AR AS AT AU AW AX AZ BA BB BD BE BF BG BH BI BJ BL BM BN BO BQ BR BS BT BV BW BY BZ CA CC CD CF CG CH CI CK CL CM CN CO CR CU CV CW CX CY CZ DE DJ DK DM DO DZ EC EE EG EH ER ES ET FI FJ FK FM FO FR GA GB GD GE GF GG GH GI GL GM GN GP GQ GR GS GT GU GW GY HK HM HN HR HT HU ID IE IL IM IN IO IQ IR IS IT JE JM JO JP KE KG KH KI KM KN KP KR KW KY KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MF MG MH MK ML MM MN MO MP MQ MR MS MT MU MV MW MX MY MZ NA NC NE NF NG NI NL NO NP NR NU NZ OM PA PE PF PG PH PK PL PM PN PR PS PT PW PY QA RE RO RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SV SX SY SZ TC TD TF TG TH TJ TK TL TM TN TO TR TT TV TW TZ UA UG UM US UY UZ VA VC VE VG VI VN VU WF WS YE YT ZA ZM ZW`.split(/\s+/) /* ─── resolving a format ───────────────────────────────────────────────── */ export interface AddressFormatOptions { /** Your countries, or changes to ours — merged over the built-in entry. */ formats?: Record> /** Show, hide or require the company, second address line and phone everywhere. */ fields?: AddressFieldModes } /** Where a field goes back in when a mode turns it on. */ function insertRow(rows: AddressFieldName[][], field: AddressFieldName): AddressFieldName[][] { if (field === "phone") return [...rows, ["phone"]] const anchor = field === "line2" ? "line1" : rows[0]?.find((f) => f === "givenName" || f === "familyName") const at = rows.findIndex((row) => anchor !== undefined && row.includes(anchor)) return at === -1 ? [[field], ...rows] : [...rows.slice(0, at + 1), [field], ...rows.slice(at + 1)] } /** The format for a country — built-in, generic, or yours — with field modes applied. */ export function getAddressFormat(country: string, options: AddressFormatOptions = {}): AddressFormat { const code = country.toUpperCase() const base = ADDRESS_FORMATS[code] ?? GENERIC_ADDRESS_FORMAT const own = options.formats?.[code] const input: AddressFormatInput = { ...base, ...own, labels: { ...base.labels, ...own?.labels } } let rows = input.rows.map((row) => [...row]) let required = [...input.required] for (const [field, mode] of Object.entries(options.fields ?? {}) as [AddressFieldName, AddressFieldMode][]) { const shown = rows.some((row) => row.includes(field)) if (mode === "hidden") { rows = rows.map((row) => row.filter((f) => f !== field)).filter((row) => row.length > 0) required = required.filter((f) => f !== field) continue } if (!shown) rows = insertRow(rows, field) required = mode === "required" ? [...new Set([...required, field])] : required.filter((f) => f !== field) } return { rows, required, labels: { ...DEFAULT_ADDRESS_LABELS, ...input.labels }, regions: input.regions, postalCode: input.postalCode, } } /** An empty address in a country. */ export function emptyAddress(country = "US"): Address { return { country, givenName: "", familyName: "", line1: "", city: "" } } /* ─── validation ───────────────────────────────────────────────────────── */ /** "State" -> "state", but "ZIP code" and "PIN code" keep their capitals. */ const lower = (label: string) => (/^[A-Z][a-z]/.test(label) ? label[0].toLowerCase() + label.slice(1) : label) const article = (word: string) => (/^[aeiou]/i.test(word) ? "an" : "a") const named = (label: string) => `${article(lower(label))} ${lower(label)}` function missing(field: AddressFieldName, format: AddressFormat) { const label = format.labels[field] if (field === "givenName" || field === "familyName") return `Enter your ${lower(label)}` if (field === "phone") return "Enter a phone number" if (field === "region" && format.regions) return `Choose ${named(label)}` return `Enter ${named(label)}` } /** * The same rules the form shows, as a pure function: required fields, the * postcode's shape, a region from the list, a plausible phone number. Returns * an error message per field, or `{}` when the address will do. Run it again * on your server — the browser's copy can be skipped. */ export function validateAddress(address: Address, format: AddressFormat = getAddressFormat(address.country)): AddressErrors { const errors: AddressErrors = {} if (!address.country?.trim()) errors.country = "Choose a country" const shown = new Set(format.rows.flat()) for (const field of shown) { const value = (address[field] ?? "").trim() if (!value) { if (format.required.includes(field)) errors[field] = missing(field, format) continue } if (field === "postalCode" && format.postalCode && !format.postalCode.pattern.test(value)) { errors.postalCode = `Enter a valid ${lower(format.labels.postalCode)}, like ${format.postalCode.example}` } if (field === "region" && format.regions && !format.regions.some((r) => r.code === value)) { errors.region = `Choose ${named(format.labels.region)} from the list` } if (field === "phone" && !(/^\+?[\d\s().-]+$/.test(value) && value.replace(/\D/g, "").length >= 6)) { errors.phone = "Enter a valid phone number" } } return errors } /* ─── display ──────────────────────────────────────────────────────────── */ /** * The address as lines for a label or a "Ship to" summary, in the country's * order: "San Francisco, California 94103", "10115 Berlin". Region codes * become names; the country itself is left to you. */ export function formatAddressLines(address: Address, format: AddressFormat = getAddressFormat(address.country)): string[] { const text = (field: AddressFieldName) => { const value = (address[field] ?? "").trim() if (field !== "region" || !format.regions) return value return format.regions.find((r) => r.code === value)?.name ?? value } return format.rows .filter((row) => !row.includes("phone")) .map((row) => { const parts = row.map((field) => ({ field, value: text(field) })).filter((p) => p.value) return parts .map((p, i) => { if (i === 0) return p.value const prev = parts[i - 1] const tight = p.field === "postalCode" || prev.field === "postalCode" || prev.field === "givenName" || prev.field === "familyName" return (tight ? " " : ", ") + p.value }) .join("") }) .filter(Boolean) } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["combobox","field","input","checkbox","skeleton"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"src/registry/ecomcn/address-form/address-form.tsx","content":"$62","type":"registry:component","target":"components/ecomcn/address-form.tsx"},{"path":"src/registry/ecomcn/address-form/address-format.ts","content":"$63","type":"registry:lib","target":"lib/address-format.ts"}],"className":"h-[70svh] min-h-80"}]]}]