@ticketmaster/tm-global-address 0.5.0 → 0.7.0

package/dist/components/AddressList/AddressList.d.ts

@@ -3,8 +3,8 @@ import { AddressData } from '../../types/AddressData';
 export interface AddressListProps {
     addresses: AddressData[];
     selectedAddressId?: number;
-    /** Section label above the list */
-    addressLabel: string;
+    /** Section label above the list (overrides i18n when provided) */
+    addressLabel?: string;
     maxAddresses: number;
     /** Called when user selects an address from the list */
     onSelect: (address: AddressData) => void;
@@ -19,6 +19,11 @@ export interface AddressListProps {
     disabled?: boolean;
     /** Per-card error messages, keyed by addressId */
     cardErrors?: Record<number, string>;
+    /**
+     * BCP-47 locale tag. Controls button labels.
+     * Defaults to "en-us".
+     */
+    locale?: string;
 }
 /**
  * AddressList — the LIST (expanded dropdown) state.

package/dist/components/AddressList/AddressList.js

@@ -1,22 +1,23 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import r from "styled-components";
 import { tokens as e } from "../../styles/tokens.js";
-import { AddressCard as b } from "../AddressCard/AddressCard.js";
-const h = r.div`
+import { AddressCard as y } from "../AddressCard/AddressCard.js";
+import { useLabels as v } from "../../i18n/index.js";
+const L = r.div`
   display: flex;
   flex-direction: column;
   gap: ${e.space2};
-`, g = r.div`
+`, k = r.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-block-end: ${e.space2};
-`, y = r.p`
+`, I = r.p`
   margin: 0;
   font-size: ${e.fontSizeLabel};
   font-weight: ${e.fontWeightBold};
   color: ${e.colorTextPrimary};
-`, v = r.button`
+`, S = r.button`
   appearance: none;
   background: none;
   border: none;
@@ -36,16 +37,16 @@ const h = r.div`
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, k = r.ul`
+`, B = r.ul`
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: ${e.space3};
-`, I = r.li``, S = r.div`
+`, z = r.li``, C = r.div`
   margin-block-start: ${e.space3};
-`, B = r.button`
+`, w = r.button`
   appearance: none;
   background: none;
   border: none;
@@ -75,7 +76,7 @@ const h = r.div`
     cursor: not-allowed;
     text-decoration: none;
   }
-`, L = r.div`
+`, P = r.div`
   display: flex;
   align-items: flex-start;
   gap: ${e.space2};
@@ -86,64 +87,67 @@ const h = r.div`
   font-size: ${e.fontSizeBody};
   color: ${e.colorTextSecondary};
   margin-block-start: ${e.space3};
-`, P = ({
+`, M = ({
   addresses: a,
-  selectedAddressId: l,
-  addressLabel: d,
-  maxAddresses: s,
-  onSelect: c,
-  onEdit: p,
-  onDelete: u,
-  onAdd: f,
-  onCollapse: m,
+  selectedAddressId: c,
+  addressLabel: p,
+  maxAddresses: u,
+  onSelect: f,
+  onEdit: m,
+  onDelete: b,
+  onAdd: x,
+  onCollapse: $,
   disabled: i = !1,
-  cardErrors: x = {}
+  cardErrors: g = {},
+  locale: d = "en-us"
 }) => {
-  const $ = a.length >= s;
-  return /* @__PURE__ */ n(h, { children: [
-    /* @__PURE__ */ n(g, { children: [
-      /* @__PURE__ */ o(y, { children: d }),
+  const { form: s } = v(d, ""), l = p ?? s.addressHeading, h = a.length >= u;
+  return /* @__PURE__ */ n(L, { children: [
+    /* @__PURE__ */ n(k, { children: [
+      /* @__PURE__ */ o(I, { children: l }),
       /* @__PURE__ */ o(
-        v,
+        S,
         {
           type: "button",
-          onClick: m,
+          onClick: $,
           disabled: i,
           "aria-label": "Collapse address list",
           children: "▲"
         }
       )
     ] }),
-    /* @__PURE__ */ o(k, { role: "listbox", "aria-label": d, children: a.map((t) => /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(
-      b,
+    /* @__PURE__ */ o(B, { role: "listbox", "aria-label": l, children: a.map((t) => /* @__PURE__ */ o(z, { children: /* @__PURE__ */ o(
+      y,
       {
         address: t,
-        isSelected: t.addressId === l,
-        onSelect: c,
-        onEdit: p,
-        onDelete: u,
+        isSelected: t.addressId === c,
+        onSelect: f,
+        onEdit: m,
+        onDelete: b,
         disabled: i,
-        errorMessage: x[t.addressId]
+        errorMessage: g[t.addressId],
+        locale: d
       }
     ) }, t.addressId)) }),
-    /* @__PURE__ */ o(S, { children: $ ? /* @__PURE__ */ n(L, { role: "status", children: [
+    /* @__PURE__ */ o(C, { children: h ? /* @__PURE__ */ n(P, { role: "status", children: [
       /* @__PURE__ */ o("span", { "aria-hidden": "true", children: "ℹ" }),
       /* @__PURE__ */ o("span", { children: "You've reached the maximum number of addresses. Please edit or remove one to add another." })
     ] }) : /* @__PURE__ */ n(
-      B,
+      w,
       {
         type: "button",
         disabled: i,
-        onClick: f,
+        onClick: x,
         "data-testid": "add-new-address",
         children: [
           /* @__PURE__ */ o("span", { "aria-hidden": "true", children: "+" }),
-          " Add New Address"
+          " ",
+          s.addNewAddress
         ]
       }
     ) })
   ] });
 };
 export {
-  P as AddressList
+  M as AddressList
 };

package/dist/components/PhoneField/PhoneField.d.ts

@@ -0,0 +1,57 @@
+import { default as React } from 'react';
+export interface PhoneFieldProps {
+    /** Current phone number value (local number, without dial code) */
+    value: string;
+    /** Dial code to display as non-editable prefix (e.g. '+1', '+44') */
+    dialCode: string;
+    /** Flag emoji for the selected country (e.g. '🇺🇸') */
+    flagEmoji: string;
+    /** ISO 3166-1 alpha-2 code used for aria-label on the dial code prefix */
+    countryCode: string;
+    /** Called when the input value changes */
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Called when the input loses focus */
+    onBlur: () => void;
+    /** Disable all interaction */
+    disabled?: boolean;
+    /** Whether the field is in an error state (red border) */
+    hasError?: boolean;
+    /** Error message to render below the field */
+    errorMessage?: string;
+    /** Screen reader prefix prepended to error messages (GDS requirement) */
+    screenReaderErrorPrefix?: string;
+    /** id attribute for the underlying <input> — used for label association */
+    id?: string;
+}
+/**
+ * PhoneField — a phone number input with a non-interactive country dial code prefix.
+ *
+ * The dial code is derived from the country selected in the parent `AddressForm` and
+ * is read-only — the fan selects their country in the country dropdown, which updates
+ * the dial code automatically. The fan only types the local number portion here.
+ *
+ * Phone is optional — empty value does not trigger validation. Validation occurs on
+ * blur when the field is non-empty, using `validatePhoneNumber` (libphonenumber-js/max).
+ *
+ * Usage in AddressForm:
+ * ```tsx
+ * <PhoneField
+ *   id="field-phoneNumber"
+ *   value={values.phoneNumber}
+ *   dialCode={countryConfig.dialCode}
+ *   flagEmoji={flag}
+ *   countryCode={values.country}
+ *   onChange={handleChange('phoneNumber')}
+ *   onBlur={handleBlur('phoneNumber')}
+ *   disabled={isDisabled}
+ *   hasError={Boolean(getFieldError('phoneNumber'))}
+ *   errorMessage={getFieldError('phoneNumber')}
+ *   screenReaderErrorPrefix={screenReaderErrorPrefix}
+ * />
+ * ```
+ *
+ * TODO(GDS swap): Replace with GDS PhoneNumber component. The GDS PhoneNumber
+ * component provides built-in dial code selection integrated with the CountryPicker.
+ */
+export declare const PhoneField: React.FC<PhoneFieldProps>;
+export default PhoneField;

package/dist/components/PhoneField/PhoneField.js

@@ -0,0 +1,119 @@
+import { jsxs as r, jsx as c } from "react/jsx-runtime";
+import e from "styled-components";
+import { tokens as o } from "../../styles/tokens.js";
+const f = e.div`
+  display: flex;
+  gap: ${o.space2};
+  align-items: flex-start;
+`, m = e.div`
+  display: flex;
+  align-items: center;
+  gap: ${o.space1};
+  padding: ${o.space2} ${o.space3};
+  background: ${o.colorSurfaceSecondary};
+  border: ${o.borderWidthInput} solid ${o.colorBorderInput};
+  border-radius: ${o.borderRadiusInput};
+  font-size: ${o.fontSizeBody};
+  color: ${o.colorTextPrimary};
+  white-space: nowrap;
+  flex-shrink: 0;
+  /* Align vertically with the input */
+  height: fit-content;
+`, x = e.input`
+  flex: 1;
+  width: 100%;
+  padding: ${o.space2} ${o.space3};
+  font-size: ${o.fontSizeInput};
+  font-family: ${o.fontFamily};
+  color: ${o.colorTextPrimary};
+  background: ${o.colorSurfacePrimary};
+  border: ${o.borderWidthInput} solid
+    ${(t) => t.$hasError ? o.colorBorderInputError : o.colorBorderInput};
+  border-radius: ${o.borderRadiusInput};
+  box-sizing: border-box;
+  transition: border-color ${o.transitionFast};
+
+  &::placeholder {
+    color: ${o.colorTextPlaceholder};
+  }
+
+  &:hover:not(:disabled) {
+    border-color: ${o.colorBorderInputFocus};
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${o.colorBorderInputFocus};
+    box-shadow: 0 0 0 ${o.borderWidthInputFocus} ${o.colorBorderInputFocus};
+  }
+
+  &:disabled {
+    background: ${o.colorSurfaceDisabled};
+    color: ${o.colorTextDisabled};
+    border-color: ${o.colorBorderInputDisabled};
+    cursor: not-allowed;
+  }
+`, g = e.p`
+  margin: ${o.space1} 0 0;
+  font-size: ${o.fontSizeError};
+  color: ${o.colorTextError};
+  display: flex;
+  align-items: center;
+  gap: ${o.space1};
+`, v = ({
+  value: t,
+  dialCode: i,
+  flagEmoji: s,
+  countryCode: p,
+  onChange: u,
+  onBlur: $,
+  disabled: b = !1,
+  hasError: a = !1,
+  errorMessage: d,
+  screenReaderErrorPrefix: h,
+  id: l = "field-phoneNumber"
+}) => {
+  const n = `${l}-error`;
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ r(f, { children: [
+      i && /* @__PURE__ */ r(
+        m,
+        {
+          "aria-label": `Dial code ${i}`,
+          "data-testid": `dial-code-${p}`,
+          children: [
+            s,
+            " ",
+            i
+          ]
+        }
+      ),
+      /* @__PURE__ */ c(
+        x,
+        {
+          id: l,
+          type: "tel",
+          autoComplete: "tel",
+          value: t,
+          onChange: u,
+          onBlur: $,
+          maxLength: 20,
+          disabled: b,
+          $hasError: a,
+          "aria-invalid": a,
+          "aria-describedby": d ? n : void 0,
+          "data-testid": "phone-input"
+        }
+      )
+    ] }),
+    d && /* @__PURE__ */ r(g, { id: n, role: "alert", children: [
+      /* @__PURE__ */ c("span", { "aria-hidden": "true", children: "⚠" }),
+      h,
+      " ",
+      d
+    ] })
+  ] });
+};
+export {
+  v as PhoneField
+};

package/dist/i18n/defaultLabels.d.ts

@@ -0,0 +1,2 @@
+import { LocaleBundle } from './types';
+export declare const DEFAULT_LABELS: LocaleBundle;

package/dist/i18n/defaultLabels.js

@@ -0,0 +1,66 @@
+const e = {
+  form: {
+    // Field labels
+    firstName: "First Name",
+    lastName: "Last Name",
+    address1: "Address Line 1",
+    address2: "Address Line 2 (Optional)",
+    city: "City",
+    postal: "Postal Code",
+    stateCode: "State / Province",
+    country: "Country",
+    phoneNumber: "Phone Number",
+    dialCode: "Dial Code",
+    defaultAddress: "Make this my default address",
+    // Placeholders
+    countryPlaceholder: "Please select",
+    stateCodePlaceholder: "Select state or province",
+    phoneNumberPlaceholder: "Enter your phone number",
+    // UI strings
+    addressHeading: "Address",
+    addNewAddress: "Add New Address",
+    confirm: "Confirm Address",
+    cancel: "Cancel",
+    editButton: "Edit",
+    deleteButton: "Delete",
+    defaultBadge: "Default",
+    makeDefault: "Make this my default address",
+    countrySelectPlaceholder: "Choose country"
+  },
+  validation: {
+    FIELD_REQUIRED: "{{field}} is required",
+    FIELD_TOO_LONG: "{{field}} must not exceed {{maxLength}} characters",
+    FIELD_TOO_SHORT: "{{field}} must be at least {{minLength}} characters",
+    FIELD_INVALID_FORMAT: "Please enter a valid {{field}}",
+    FIELD_INVALID_CHARACTERS: "{{field}} contains invalid characters",
+    POSTAL_CODE_MISMATCH: "Postal code does not match the selected {{stateLabel}}"
+  },
+  country: {
+    US: { stateCode: "State", stateCodePlaceholder: "Select the state" },
+    CA: { stateCode: "Province", stateCodePlaceholder: "Select the province" },
+    AU: { stateCode: "State", stateCodePlaceholder: "Select the state", city: "Suburb" },
+    GB: { postal: "Postcode" },
+    IE: { stateCode: "County", stateCodePlaceholder: "Select the county" },
+    NZ: { stateCode: "Region", stateCodePlaceholder: "Select the region", city: "Town/City" },
+    DE: { stateCode: "State", stateCodePlaceholder: "Select the state" },
+    AT: { stateCode: "State", stateCodePlaceholder: "Select the state" },
+    CH: { stateCode: "Canton", stateCodePlaceholder: "Select the canton" },
+    CZ: { stateCode: "Region", stateCodePlaceholder: "Select the region" },
+    DK: { stateCode: "Region", stateCodePlaceholder: "Select the region" },
+    ES: { stateCode: "State", stateCodePlaceholder: "Select the state" },
+    FI: { stateCode: "Region", stateCodePlaceholder: "Select the region" },
+    MX: { stateCode: "State", stateCodePlaceholder: "Select the state" },
+    NL: { stateCode: "Province", stateCodePlaceholder: "Select the province" },
+    NO: { stateCode: "County", stateCodePlaceholder: "Select the county" },
+    PL: { stateCode: "Region / Province", stateCodePlaceholder: "Select the region / province" },
+    SE: { stateCode: "Region", stateCodePlaceholder: "Select the region" },
+    ZA: { stateCode: "State", stateCodePlaceholder: "Select the state" },
+    // Postal-code overrides
+    IN: { postal: "PIN Code" },
+    JP: { postal: "Postal Code", stateCode: "Prefecture", stateCodePlaceholder: "Select the prefecture" },
+    AE: { stateCode: "Emirate", stateCodePlaceholder: "Select the emirate" }
+  }
+};
+export {
+  e as DEFAULT_LABELS
+};

package/dist/i18n/index.d.ts

@@ -0,0 +1,14 @@
+import { resolveLabels, isRTLLocale, interpolate, loadBundle } from './labelResolver';
+import { ResolvedLabels, LocaleBundle, InterpolationVars } from './types';
+export type { ResolvedLabels, LocaleBundle, InterpolationVars };
+export type { FormLabels, ValidationLabels, CountryOverrides, } from './types';
+export { isRTLLocale, interpolate, loadBundle, resolveLabels };
+/**
+ * React hook that returns resolved labels for the given locale and country.
+ *
+ * Memoised on (locale, countryCode) — re-runs only when either changes.
+ */
+export declare function useLabels(locale: string, countryCode: string): ResolvedLabels;
+/** All supported locale codes */
+export declare const SUPPORTED_LOCALES: readonly ["ar-sa", "ca-es", "cs-cz", "da-dk", "de-at", "de-ch", "de-de", "en-au", "en-ca", "en-gb", "en-nz", "en-us", "es-es", "es-mx", "fi-fi", "fr-be", "fr-ca", "fr-ch", "fr-fr", "it-ch", "ja-jp", "nl-be", "nl-nl", "no-no", "pl-pl", "sv-se"];
+export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];

package/dist/i18n/index.js

@@ -0,0 +1,45 @@
+import { useMemo as r } from "react";
+import { resolveLabels as s } from "./labelResolver.js";
+import { interpolate as i, isRTLLocale as p, loadBundle as d } from "./labelResolver.js";
+function f(e, n) {
+  return r(
+    () => s(e, n),
+    [e, n]
+  );
+}
+const l = [
+  "ar-sa",
+  "ca-es",
+  "cs-cz",
+  "da-dk",
+  "de-at",
+  "de-ch",
+  "de-de",
+  "en-au",
+  "en-ca",
+  "en-gb",
+  "en-nz",
+  "en-us",
+  "es-es",
+  "es-mx",
+  "fi-fi",
+  "fr-be",
+  "fr-ca",
+  "fr-ch",
+  "fr-fr",
+  "it-ch",
+  "ja-jp",
+  "nl-be",
+  "nl-nl",
+  "no-no",
+  "pl-pl",
+  "sv-se"
+];
+export {
+  l as SUPPORTED_LOCALES,
+  i as interpolate,
+  p as isRTLLocale,
+  d as loadBundle,
+  s as resolveLabels,
+  f as useLabels
+};

package/dist/i18n/labelResolver.d.ts

@@ -0,0 +1,24 @@
+import { LocaleBundle, ResolvedLabels, InterpolationVars } from './types';
+export declare function isRTLLocale(locale: string): boolean;
+/**
+ * Replaces `{{key}}` placeholders in a template string with values from vars.
+ *
+ * @example
+ *   interpolate("{{field}} is required", { field: "First Name" })
+ *   // → "First Name is required"
+ */
+export declare function interpolate(template: string, vars: InterpolationVars): string;
+/**
+ * Loads a locale bundle. Falls back to en-us if the requested locale is
+ * not available, then falls back to in-memory DEFAULT_LABELS.
+ */
+export declare function loadBundle(locale: string): LocaleBundle;
+/**
+ * Resolves labels for a given locale and country code.
+ *
+ * Resolution order for country-adaptive fields (stateCode, city, postal):
+ *   1. bundle.country[CC].field  ← country-specific override
+ *   2. bundle.form.field          ← generic form default
+ *   3. DEFAULT_LABELS.form.field  ← English ultimate fallback
+ */
+export declare function resolveLabels(locale: string, countryCode: string): ResolvedLabels;

package/dist/i18n/labelResolver.js

@@ -0,0 +1,98 @@
+import { DEFAULT_LABELS as l } from "./defaultLabels.js";
+import c from "./locales/ar-sa.json.js";
+import d from "./locales/ca-es.json.js";
+import h from "./locales/cs-cz.json.js";
+import C from "./locales/da-dk.json.js";
+import L from "./locales/de-at.json.js";
+import b from "./locales/de-ch.json.js";
+import E from "./locales/de-de.json.js";
+import P from "./locales/en-au.json.js";
+import S from "./locales/en-ca.json.js";
+import g from "./locales/en-gb.json.js";
+import A from "./locales/en-nz.json.js";
+import k from "./locales/en-us.json.js";
+import w from "./locales/es-es.json.js";
+import B from "./locales/es-mx.json.js";
+import j from "./locales/fi-fi.json.js";
+import z from "./locales/fr-be.json.js";
+import D from "./locales/fr-ca.json.js";
+import N from "./locales/fr-ch.json.js";
+import T from "./locales/fr-fr.json.js";
+import U from "./locales/it-ch.json.js";
+import _ from "./locales/ja-jp.json.js";
+import u from "./locales/nl-be.json.js";
+import x from "./locales/nl-nl.json.js";
+import F from "./locales/no-no.json.js";
+import M from "./locales/pl-pl.json.js";
+import R from "./locales/sv-se.json.js";
+const v = /* @__PURE__ */ new Set(["ar-sa", "ar", "he", "fa", "ur"]);
+function G(a) {
+  return v.has(a.toLowerCase());
+}
+function Co(a, s) {
+  return a.replace(/\{\{(\w+)\}\}/g, (m, r) => {
+    const e = s[r];
+    return e !== void 0 ? String(e) : r;
+  });
+}
+const i = {
+  "ar-sa": c,
+  "ca-es": d,
+  "cs-cz": h,
+  "da-dk": C,
+  "de-at": L,
+  "de-ch": b,
+  "de-de": E,
+  "en-au": P,
+  "en-ca": S,
+  "en-gb": g,
+  "en-nz": A,
+  "en-us": k,
+  "es-es": w,
+  "es-mx": B,
+  "fi-fi": j,
+  "fr-be": z,
+  "fr-ca": D,
+  "fr-ch": N,
+  "fr-fr": T,
+  "it-ch": U,
+  "ja-jp": _,
+  "nl-be": u,
+  "nl-nl": x,
+  "no-no": F,
+  "pl-pl": M,
+  "sv-se": R
+}, f = /* @__PURE__ */ new Map();
+function J(a) {
+  const s = a.toLowerCase();
+  if (f.has(s))
+    return f.get(s);
+  if (i[s])
+    return f.set(s, i[s]), i[s];
+  const m = s.split("-")[0], r = Object.keys(i).find((n) => n.startsWith(`${m}-`));
+  if (r)
+    return f.set(s, i[r]), i[r];
+  const e = i["en-us"] ?? l;
+  return f.set(s, e), e;
+}
+function Lo(a, s) {
+  var p;
+  const m = J(a), r = l, e = {
+    ...r.form,
+    ...m.form
+  }, n = s.toUpperCase(), o = (p = m.country) == null ? void 0 : p[n], t = r.country[n];
+  return (o == null ? void 0 : o.stateCode) !== void 0 ? e.stateCode = o.stateCode : (t == null ? void 0 : t.stateCode) !== void 0 && (e.stateCode = t.stateCode), (o == null ? void 0 : o.stateCodePlaceholder) !== void 0 ? e.stateCodePlaceholder = o.stateCodePlaceholder : (t == null ? void 0 : t.stateCodePlaceholder) !== void 0 && (e.stateCodePlaceholder = t.stateCodePlaceholder), (o == null ? void 0 : o.city) !== void 0 ? e.city = o.city : (t == null ? void 0 : t.city) !== void 0 && (e.city = t.city), (o == null ? void 0 : o.postal) !== void 0 ? e.postal = o.postal : (t == null ? void 0 : t.postal) !== void 0 && (e.postal = t.postal), {
+    form: e,
+    validation: {
+      ...r.validation,
+      ...m.validation
+    },
+    isRTL: G(a)
+  };
+}
+export {
+  Co as interpolate,
+  G as isRTLLocale,
+  J as loadBundle,
+  Lo as resolveLabels
+};