4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:T21d9,// Address Input from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { CountrySelect, CountrySelectContent, CountrySelectList, CountrySelectSearch, CountrySelectTrigger, } from '@/registry/hirael/bases/radix/components/country-select'; import { Field, FieldLabel } from '@/registry/hirael/bases/radix/ui/field'; import { Input } from '@/registry/hirael/bases/radix/ui/input'; export type AddressField = 'line1' | 'line2' | 'city' | 'region' | 'postalCode'; export interface AddressValue { /** ISO-2 country code, the one field that decides the rest of the layout. */ country: string; line1: string; line2: string; city: string; region: string; postalCode: string; } export interface AddressFormat { /** Fields to render, a row at a time. Fields sharing a row sit side by side. */ rows: AddressField[][]; labels: Record; /** Native `pattern` for the postal field, where the country has a stable one. */ postalPattern?: string; } export const EMPTY_ADDRESS: AddressValue = { country: '', line1: '', line2: '', city: '', region: '', postalCode: '', }; const AUTOCOMPLETE: Record = { line1: 'address-line1', line2: 'address-line2', city: 'address-level2', region: 'address-level1', postalCode: 'postal-code', }; const DEFAULT_FORMAT: AddressFormat = { rows: [['line1'], ['line2'], ['postalCode', 'city'], ['region']], labels: { line1: 'Address', line2: 'Apartment, suite, etc.', city: 'City', region: 'Region', postalCode: 'Postal code', }, }; type AddressFormatPatch = Omit, 'labels'> & { labels?: Partial }; /** Per-country overrides on top of {@link DEFAULT_FORMAT}; unlisted countries use the default. */ export const ADDRESS_FORMATS: Record = { US: { rows: [['line1'], ['line2'], ['city'], ['region', 'postalCode']], labels: { region: 'State', postalCode: 'ZIP code' }, postalPattern: '\\d{5}(-\\d{4})?', }, CA: { rows: [['line1'], ['line2'], ['city'], ['region', 'postalCode']], labels: { region: 'Province' }, }, GB: { rows: [['line1'], ['line2'], ['city'], ['region'], ['postalCode']], labels: { line2: 'Flat, unit, etc.', city: 'Town or city', region: 'County', postalCode: 'Postcode' }, }, AU: { rows: [['line1'], ['line2'], ['city'], ['region', 'postalCode']], labels: { city: 'Suburb', region: 'State', postalCode: 'Postcode' }, postalPattern: '\\d{4}', }, JP: { rows: [['postalCode'], ['region'], ['city'], ['line1'], ['line2']], labels: { region: 'Prefecture', city: 'City or ward' }, postalPattern: '\\d{3}-?\\d{4}', }, DE: { rows: [['line1'], ['line2'], ['postalCode', 'city']], postalPattern: '\\d{5}' }, FR: { rows: [['line1'], ['line2'], ['postalCode', 'city']], postalPattern: '\\d{5}' }, ES: { rows: [['line1'], ['line2'], ['postalCode', 'city']], postalPattern: '\\d{5}' }, IT: { rows: [['line1'], ['line2'], ['postalCode', 'city']], postalPattern: '\\d{5}' }, NL: { rows: [['line1'], ['line2'], ['postalCode', 'city']] }, SE: { rows: [['line1'], ['line2'], ['postalCode', 'city']] }, BR: { rows: [['postalCode'], ['line1'], ['line2'], ['city', 'region']], labels: { region: 'State', postalCode: 'CEP' }, }, }; export const formatForCountry = (country: string): AddressFormat => { const patch = ADDRESS_FORMATS[country.toUpperCase()]; return { rows: patch?.rows ?? DEFAULT_FORMAT.rows, labels: { ...DEFAULT_FORMAT.labels, ...patch?.labels }, postalPattern: patch?.postalPattern, }; }; type AddressLabels = Partial>; interface AddressInputContextValue { id: string; value: AddressValue; setField: (field: AddressField | 'country', next: string) => void; format: AddressFormat; labels?: AddressLabels; disabled?: boolean; readOnly?: boolean; } const AddressInputContext = React.createContext(null); const useAddressInput = () => { const ctx = React.useContext(AddressInputContext); if (!ctx) { throw new Error('AddressInput compound parts must be used inside '); } return ctx; }; export interface AddressInputProps extends Omit, 'defaultValue' | 'onChange'> { value?: AddressValue; defaultValue?: Partial; onValueChange?: (value: AddressValue) => void; /** Overrides the format's labels, one field at a time. */ labels?: AddressLabels; disabled?: boolean; readOnly?: boolean; children?: React.ReactNode; } const AddressInput = ({ value: valueProp, defaultValue, onValueChange, labels, disabled, readOnly, className, children, ...props }: AddressInputProps) => { const [internalValue, setInternalValue] = React.useState({ ...EMPTY_ADDRESS, ...defaultValue }); const value = valueProp ?? internalValue; const id = React.useId(); const setField = React.useCallback( (field: AddressField | 'country', next: string) => { const updated = { ...value, [field]: next }; if (valueProp === undefined) setInternalValue(updated); onValueChange?.(updated); }, [value, valueProp, onValueChange], ); const format = React.useMemo(() => formatForCountry(value.country), [value.country]); const ctx = React.useMemo( () => ({ id, value, setField, format, labels, disabled, readOnly }), [id, value, setField, format, labels, disabled, readOnly], ); return (

{children ?? ( <> )}

); }; export interface AddressInputCountryProps extends React.ComponentProps<'div'> { /** ISO-2 codes pinned to the top of the country list. */ priority?: readonly string[]; } const AddressInputCountry = ({ priority, className, ...props }: AddressInputCountryProps) => { const ctx = useAddressInput(); const id = `${ctx.id}-country`; return ( {ctx.labels?.country ?? 'Country'} ctx.setField('country', country)} disabled={ctx.disabled || ctx.readOnly} priority={priority} > ); }; export interface AddressInputFieldProps extends Omit< React.ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' > { field: AddressField; } const AddressInputField = ({ field, ...props }: AddressInputFieldProps) => { const ctx = useAddressInput(); const id = `${ctx.id}-${field}`; const pattern = field === 'postalCode' ? ctx.format.postalPattern : undefined; return ( {ctx.labels?.[field] ?? ctx.format.labels[field]} ctx.setField(field, e.target.value)} autoComplete={AUTOCOMPLETE[field]} disabled={ctx.disabled} readOnly={ctx.readOnly} pattern={pattern} inputMode={pattern?.startsWith('\\d') ? 'numeric' : undefined} {...props} /> ); }; const AddressInputFields = ({ className, ...props }: React.ComponentProps<'div'>) => { const ctx = useAddressInput(); return (

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

1 && 'sm:grid-cols-2')} > {row.map((field) => ( ))}

))}

); }; export { AddressInput, AddressInputCountry, AddressInputField, AddressInputFields }; 4e:["$","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":[null,["$","$L4f",null,{"namespace":"@hirael","registryDependencies":["https://hirael.com/r/country-select.json","field","input"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/hirael/bases/radix/components/address-input.tsx","content":"$51","type":"registry:component","target":"components/address-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]