@viax.io/uxm 4.36.0

package/dist/ui/phone-input/phone-input-preview.cjs

@@ -0,0 +1,108 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var phone_input_preview_exports = {};
+__export(phone_input_preview_exports, {
+  PhoneInputPreview: () => PhoneInputPreview
+});
+module.exports = __toCommonJS(phone_input_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+function buildVars(styles) {
+  return {
+    "--uxm-phone-input-background-color": styles.backgroundColor,
+    "--uxm-phone-input-border-color": styles.borderColor,
+    "--uxm-phone-input-color": styles.color,
+    "--uxm-phone-input-divider-color": styles.dividerColor,
+    "--uxm-phone-input-caret-color": styles.caretColor,
+    "--uxm-phone-input-border-radius": `${styles.borderRadius}px`,
+    "--uxm-phone-input-padding-x": `${styles.paddingX}px`,
+    "--uxm-phone-input-padding-y": `${styles.paddingY}px`,
+    "--uxm-phone-input-font-size": `${styles.fontSize}px`,
+    "--uxm-phone-input-hover-bg": styles.hoverBg,
+    "--uxm-phone-input-hover-border": styles.hoverBorder,
+    "--uxm-phone-input-country-hover-bg": styles.countryHoverBg,
+    "--uxm-phone-input-focus-border": styles.focusBorder,
+    "--uxm-phone-input-focus-ring": styles.focusRing,
+    "--uxm-phone-input-disabled-bg": styles.disabledBg,
+    "--uxm-phone-input-disabled-border": styles.disabledBorder,
+    "--uxm-phone-input-disabled-color": styles.disabledColor,
+    "--uxm-phone-input-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-phone-input-error-bg": styles.errorBg,
+    "--uxm-phone-input-error-border": styles.errorBorder,
+    "--uxm-phone-input-error-color": styles.errorColor
+  };
+}
+function PhoneInputPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const isError = state === "error";
+  const seed = isError ? { country: "US", number: "555" } : { country: "US", number: "" };
+  const cssVars = buildVars(styles);
+  const forcedClass = (0, import_helpers.cn)(
+    state === "hover" && "uxm-phone-input--state-hover",
+    state === "focus" && "uxm-phone-input--state-focus",
+    state === "error" && "uxm-phone-input--error"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { width: 320 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PhoneInputHost,
+      {
+        seed,
+        disabled: state === "disabled",
+        className: forcedClass || void 0,
+        style: cssVars
+      },
+      state
+    ),
+    isError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "p",
+      {
+        className: "uxm-phone-input__error-message",
+        style: {
+          "--uxm-phone-input-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : "12px"
+        },
+        children: "Enter a complete phone number."
+      }
+    )
+  ] });
+}
+function PhoneInputHost({
+  seed,
+  disabled,
+  className,
+  style
+}) {
+  const [value, setValue] = (0, import_react.useState)(seed);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.PhoneInput,
+    {
+      value,
+      onChange: setValue,
+      disabled,
+      className,
+      style
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PhoneInputPreview
+});
+//# sourceMappingURL=phone-input-preview.cjs.map

package/dist/ui/phone-input/phone-input-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/phone-input/phone-input-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { PhoneInput, type PhoneValue } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every state knob as a `--uxm-phone-input-*` custom prop and hand\n * the bag to `PhoneInput` as its `style`. The wrapper IS the visible surface\n * here (border + bg live on `.uxm-phone-input` itself), unlike\n * date/time/password which put those on the inner input. The country picker\n * is the shared Listbox panel — its chrome is themed via the `listbox`\n * registry entry, not phone-input vars, so there are no popover knobs here.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-phone-input-background-color': styles.backgroundColor as string,\n    '--uxm-phone-input-border-color': styles.borderColor as string,\n    '--uxm-phone-input-color': styles.color as string,\n    '--uxm-phone-input-divider-color': styles.dividerColor as string,\n    '--uxm-phone-input-caret-color': styles.caretColor as string,\n    '--uxm-phone-input-border-radius': `${styles.borderRadius}px`,\n    '--uxm-phone-input-padding-x': `${styles.paddingX}px`,\n    '--uxm-phone-input-padding-y': `${styles.paddingY}px`,\n    '--uxm-phone-input-font-size': `${styles.fontSize}px`,\n    '--uxm-phone-input-hover-bg': styles.hoverBg as string,\n    '--uxm-phone-input-hover-border': styles.hoverBorder as string,\n    '--uxm-phone-input-country-hover-bg': styles.countryHoverBg as string,\n    '--uxm-phone-input-focus-border': styles.focusBorder as string,\n    '--uxm-phone-input-focus-ring': styles.focusRing as string,\n    '--uxm-phone-input-disabled-bg': styles.disabledBg as string,\n    '--uxm-phone-input-disabled-border': styles.disabledBorder as string,\n    '--uxm-phone-input-disabled-color': styles.disabledColor as string,\n    '--uxm-phone-input-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-phone-input-error-bg': styles.errorBg as string,\n    '--uxm-phone-input-error-border': styles.errorBorder as string,\n    '--uxm-phone-input-error-color': styles.errorColor as string,\n  } as CSSProperties;\n}\n\nexport function PhoneInputPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const isError = state === 'error';\n\n  // Default state starts empty so the country-specific placeholder shape\n  // is visible. Error mode pre-fills with too-short digits so the error\n  // UX reads as realistic failure. State variant changes are wired\n  // through a `key` on the inner host below — flipping state remounts\n  // the host, which re-seeds via `useState`. This avoids a\n  // `useEffect(setValue, [state])` reset that, with object-valued state,\n  // races against typing under React 19 + StrictMode (a new object ref\n  // each effect tick can synchronously re-revert the controlled value\n  // mid-keystroke, eating the typed character).\n  const seed: PhoneValue = isError\n    ? { country: 'US', number: '555' }\n    : { country: 'US', number: '' };\n\n  const cssVars = buildVars(styles);\n\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-phone-input--state-hover',\n    state === 'focus' && 'uxm-phone-input--state-focus',\n    state === 'error' && 'uxm-phone-input--error',\n  );\n\n  return (\n    <div style={{ width: 320 }}>\n      <PhoneInputHost\n        key={state}\n        seed={seed}\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        style={cssVars}\n      />\n      {isError && (\n        <p\n          className=\"uxm-phone-input__error-message\"\n          style={{\n            '--uxm-phone-input-error-message-size':\n              styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : '12px',\n          } as CSSProperties}\n        >\n          Enter a complete phone number.\n        </p>\n      )}\n    </div>\n  );\n}\n\n/**\n * Inner host owning the controlled value state. Keyed by the State\n * variant in the parent — flipping State unmounts and remounts this\n * host, which re-seeds `value` via `useState`. Avoids the\n * `useEffect(setValue, [state])` reset that bit phone-input under\n * React 19 + StrictMode: with an object-valued seed, the effect's\n * fresh object reference would race the controlled-input flow and\n * synchronously revert the DOM value mid-keystroke, eating typed\n * characters. Re-mounting on State change keeps the seeding logic\n * but never re-runs during typing.\n */\nfunction PhoneInputHost({\n  seed,\n  disabled,\n  className,\n  style,\n}: {\n  seed: PhoneValue;\n  disabled: boolean;\n  className?: string;\n  style?: CSSProperties;\n}) {\n  const [value, setValue] = useState<PhoneValue>(seed);\n  return (\n    <PhoneInput\n      value={value}\n      onChange={setValue}\n      disabled={disabled}\n      className={className}\n      style={style}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqEI;AArEJ,mBAA6C;AAE7C,qBAAmB;AAEnB,gBAA4C;AAY5C,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,sCAAsC,OAAO;AAAA,IAC7C,kCAAkC,OAAO;AAAA,IACzC,2BAA2B,OAAO;AAAA,IAClC,mCAAmC,OAAO;AAAA,IAC1C,iCAAiC,OAAO;AAAA,IACxC,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,8BAA8B,OAAO;AAAA,IACrC,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,OAAO;AAAA,IAC7C,kCAAkC,OAAO;AAAA,IACzC,gCAAgC,OAAO;AAAA,IACvC,iCAAiC,OAAO;AAAA,IACxC,qCAAqC,OAAO;AAAA,IAC5C,oCAAoC,OAAO;AAAA,IAC3C,sCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,8BAA8B,OAAO;AAAA,IACrC,kCAAkC,OAAO;AAAA,IACzC,iCAAiC,OAAO;AAAA,EAC1C;AACF;AAEO,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,UAAU,UAAU;AAW1B,QAAM,OAAmB,UACrB,EAAE,SAAS,MAAM,QAAQ,MAAM,IAC/B,EAAE,SAAS,MAAM,QAAQ,GAAG;AAEhC,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,kBAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,6CAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB;AAAA;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,UAAU,UAAU;AAAA,QACpB,WAAW,eAAe;AAAA,QAC1B,OAAO;AAAA;AAAA,MAJF;AAAA,IAKP;AAAA,IACC,WACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,wCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,QACvE;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KAEJ;AAEJ;AAaA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAqB,IAAI;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/ui/phone-input/phone-input-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function PhoneInputPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=phone-input-preview.d.ts.map

package/dist/ui/phone-input/phone-input-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/phone-input/phone-input-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAwCrD,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CA+CnE"}

package/dist/ui/phone-input/phone-input-preview.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { PhoneInput } from "../../ui/index.js";
+function buildVars(styles) {
+  return {
+    "--uxm-phone-input-background-color": styles.backgroundColor,
+    "--uxm-phone-input-border-color": styles.borderColor,
+    "--uxm-phone-input-color": styles.color,
+    "--uxm-phone-input-divider-color": styles.dividerColor,
+    "--uxm-phone-input-caret-color": styles.caretColor,
+    "--uxm-phone-input-border-radius": `${styles.borderRadius}px`,
+    "--uxm-phone-input-padding-x": `${styles.paddingX}px`,
+    "--uxm-phone-input-padding-y": `${styles.paddingY}px`,
+    "--uxm-phone-input-font-size": `${styles.fontSize}px`,
+    "--uxm-phone-input-hover-bg": styles.hoverBg,
+    "--uxm-phone-input-hover-border": styles.hoverBorder,
+    "--uxm-phone-input-country-hover-bg": styles.countryHoverBg,
+    "--uxm-phone-input-focus-border": styles.focusBorder,
+    "--uxm-phone-input-focus-ring": styles.focusRing,
+    "--uxm-phone-input-disabled-bg": styles.disabledBg,
+    "--uxm-phone-input-disabled-border": styles.disabledBorder,
+    "--uxm-phone-input-disabled-color": styles.disabledColor,
+    "--uxm-phone-input-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-phone-input-error-bg": styles.errorBg,
+    "--uxm-phone-input-error-border": styles.errorBorder,
+    "--uxm-phone-input-error-color": styles.errorColor
+  };
+}
+function PhoneInputPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const isError = state === "error";
+  const seed = isError ? { country: "US", number: "555" } : { country: "US", number: "" };
+  const cssVars = buildVars(styles);
+  const forcedClass = cn(
+    state === "hover" && "uxm-phone-input--state-hover",
+    state === "focus" && "uxm-phone-input--state-focus",
+    state === "error" && "uxm-phone-input--error"
+  );
+  return /* @__PURE__ */ jsxs("div", { style: { width: 320 }, children: [
+    /* @__PURE__ */ jsx(
+      PhoneInputHost,
+      {
+        seed,
+        disabled: state === "disabled",
+        className: forcedClass || void 0,
+        style: cssVars
+      },
+      state
+    ),
+    isError && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "uxm-phone-input__error-message",
+        style: {
+          "--uxm-phone-input-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : "12px"
+        },
+        children: "Enter a complete phone number."
+      }
+    )
+  ] });
+}
+function PhoneInputHost({
+  seed,
+  disabled,
+  className,
+  style
+}) {
+  const [value, setValue] = useState(seed);
+  return /* @__PURE__ */ jsx(
+    PhoneInput,
+    {
+      value,
+      onChange: setValue,
+      disabled,
+      className,
+      style
+    }
+  );
+}
+export {
+  PhoneInputPreview
+};
+//# sourceMappingURL=phone-input-preview.js.map

package/dist/ui/phone-input/phone-input-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/phone-input/phone-input-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { PhoneInput, type PhoneValue } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every state knob as a `--uxm-phone-input-*` custom prop and hand\n * the bag to `PhoneInput` as its `style`. The wrapper IS the visible surface\n * here (border + bg live on `.uxm-phone-input` itself), unlike\n * date/time/password which put those on the inner input. The country picker\n * is the shared Listbox panel — its chrome is themed via the `listbox`\n * registry entry, not phone-input vars, so there are no popover knobs here.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-phone-input-background-color': styles.backgroundColor as string,\n    '--uxm-phone-input-border-color': styles.borderColor as string,\n    '--uxm-phone-input-color': styles.color as string,\n    '--uxm-phone-input-divider-color': styles.dividerColor as string,\n    '--uxm-phone-input-caret-color': styles.caretColor as string,\n    '--uxm-phone-input-border-radius': `${styles.borderRadius}px`,\n    '--uxm-phone-input-padding-x': `${styles.paddingX}px`,\n    '--uxm-phone-input-padding-y': `${styles.paddingY}px`,\n    '--uxm-phone-input-font-size': `${styles.fontSize}px`,\n    '--uxm-phone-input-hover-bg': styles.hoverBg as string,\n    '--uxm-phone-input-hover-border': styles.hoverBorder as string,\n    '--uxm-phone-input-country-hover-bg': styles.countryHoverBg as string,\n    '--uxm-phone-input-focus-border': styles.focusBorder as string,\n    '--uxm-phone-input-focus-ring': styles.focusRing as string,\n    '--uxm-phone-input-disabled-bg': styles.disabledBg as string,\n    '--uxm-phone-input-disabled-border': styles.disabledBorder as string,\n    '--uxm-phone-input-disabled-color': styles.disabledColor as string,\n    '--uxm-phone-input-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-phone-input-error-bg': styles.errorBg as string,\n    '--uxm-phone-input-error-border': styles.errorBorder as string,\n    '--uxm-phone-input-error-color': styles.errorColor as string,\n  } as CSSProperties;\n}\n\nexport function PhoneInputPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const isError = state === 'error';\n\n  // Default state starts empty so the country-specific placeholder shape\n  // is visible. Error mode pre-fills with too-short digits so the error\n  // UX reads as realistic failure. State variant changes are wired\n  // through a `key` on the inner host below — flipping state remounts\n  // the host, which re-seeds via `useState`. This avoids a\n  // `useEffect(setValue, [state])` reset that, with object-valued state,\n  // races against typing under React 19 + StrictMode (a new object ref\n  // each effect tick can synchronously re-revert the controlled value\n  // mid-keystroke, eating the typed character).\n  const seed: PhoneValue = isError\n    ? { country: 'US', number: '555' }\n    : { country: 'US', number: '' };\n\n  const cssVars = buildVars(styles);\n\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-phone-input--state-hover',\n    state === 'focus' && 'uxm-phone-input--state-focus',\n    state === 'error' && 'uxm-phone-input--error',\n  );\n\n  return (\n    <div style={{ width: 320 }}>\n      <PhoneInputHost\n        key={state}\n        seed={seed}\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        style={cssVars}\n      />\n      {isError && (\n        <p\n          className=\"uxm-phone-input__error-message\"\n          style={{\n            '--uxm-phone-input-error-message-size':\n              styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : '12px',\n          } as CSSProperties}\n        >\n          Enter a complete phone number.\n        </p>\n      )}\n    </div>\n  );\n}\n\n/**\n * Inner host owning the controlled value state. Keyed by the State\n * variant in the parent — flipping State unmounts and remounts this\n * host, which re-seeds `value` via `useState`. Avoids the\n * `useEffect(setValue, [state])` reset that bit phone-input under\n * React 19 + StrictMode: with an object-valued seed, the effect's\n * fresh object reference would race the controlled-input flow and\n * synchronously revert the DOM value mid-keystroke, eating typed\n * characters. Re-mounting on State change keeps the seeding logic\n * but never re-runs during typing.\n */\nfunction PhoneInputHost({\n  seed,\n  disabled,\n  className,\n  style,\n}: {\n  seed: PhoneValue;\n  disabled: boolean;\n  className?: string;\n  style?: CSSProperties;\n}) {\n  const [value, setValue] = useState<PhoneValue>(seed);\n  return (\n    <PhoneInput\n      value={value}\n      onChange={setValue}\n      disabled={disabled}\n      className={className}\n      style={style}\n    />\n  );\n}\n"],"mappings":"AAqEI,SACE,KADF;AArEJ,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,kBAAmC;AAY5C,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,sCAAsC,OAAO;AAAA,IAC7C,kCAAkC,OAAO;AAAA,IACzC,2BAA2B,OAAO;AAAA,IAClC,mCAAmC,OAAO;AAAA,IAC1C,iCAAiC,OAAO;AAAA,IACxC,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,8BAA8B,OAAO;AAAA,IACrC,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,OAAO;AAAA,IAC7C,kCAAkC,OAAO;AAAA,IACzC,gCAAgC,OAAO;AAAA,IACvC,iCAAiC,OAAO;AAAA,IACxC,qCAAqC,OAAO;AAAA,IAC5C,oCAAoC,OAAO;AAAA,IAC3C,sCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,8BAA8B,OAAO;AAAA,IACrC,kCAAkC,OAAO;AAAA,IACzC,iCAAiC,OAAO;AAAA,EAC1C;AACF;AAEO,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,UAAU,UAAU;AAW1B,QAAM,OAAmB,UACrB,EAAE,SAAS,MAAM,QAAQ,MAAM,IAC/B,EAAE,SAAS,MAAM,QAAQ,GAAG;AAEhC,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,cAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB;AAAA;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,UAAU,UAAU;AAAA,QACpB,WAAW,eAAe;AAAA,QAC1B,OAAO;AAAA;AAAA,MAJF;AAAA,IAKP;AAAA,IACC,WACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,wCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,QACvE;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KAEJ;AAEJ;AAaA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqB,IAAI;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/ui/phone-input/phone-input.cjs

@@ -0,0 +1,176 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var phone_input_exports = {};
+__export(phone_input_exports, {
+  PhoneInput: () => PhoneInput
+});
+module.exports = __toCommonJS(phone_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_phone_countries = require("../../lib/phone-countries.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_icon_button = require("../icon-button/index.cjs");
+var import_listbox = require("../listbox/index.cjs");
+const EMPTY_VALUE = { country: "US", number: "" };
+function filterCountries(items, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return items;
+  return items.filter(
+    (c) => c.name.toLowerCase().includes(q) || c.dial.includes(q) || c.iso.toLowerCase().includes(q)
+  );
+}
+function PhoneInput({
+  value,
+  defaultValue,
+  onChange,
+  countries = import_phone_countries.CURATED_COUNTRIES,
+  clearable = true,
+  clearLabel = "Clear",
+  chooseCountryLabel = "Choose country",
+  className,
+  placeholder,
+  style,
+  disabled,
+  ...rest
+}) {
+  const [internal, setInternal] = (0, import_react.useState)(() => defaultValue ?? EMPTY_VALUE);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const containerRef = (0, import_react.useRef)(null);
+  const country = (0, import_phone_countries.findCountry)(current.country, countries) ?? countries[0];
+  const commit = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const handleNumberChange = (0, import_react.useCallback)(
+    (e) => {
+      const digits = e.target.value.replace(/\D/g, "").slice(0, (0, import_phone_countries.maxDigitsFor)(country));
+      commit({ country: current.country, number: digits });
+    },
+    [country, current.country, commit]
+  );
+  const handleCountryPick = (0, import_react.useCallback)(
+    (iso) => {
+      const next = (0, import_phone_countries.findCountry)(iso, countries);
+      const cap = (0, import_phone_countries.maxDigitsFor)(next);
+      const trimmed = current.number.length > cap ? current.number.slice(0, cap) : current.number;
+      commit({ country: iso, number: trimmed });
+    },
+    [countries, current.number, commit]
+  );
+  const handleClear = (0, import_react.useCallback)(() => {
+    commit({ country: current.country, number: "" });
+  }, [commit, current.country]);
+  const showClear = clearable && current.number.length > 0 && !disabled;
+  const masked = (0, import_phone_countries.maskNumber)(current.number, country);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_helpers.cn)("uxm-phone-input", disabled && "uxm-phone-input--disabled", className),
+      style,
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_listbox.Listbox,
+          {
+            items: countries,
+            getKey: (c) => c.iso,
+            getLabel: (c) => c.name,
+            filterItems: filterCountries,
+            value: country,
+            onChange: (next) => next && handleCountryPick(next.iso),
+            disabled,
+            anchorRef: containerRef,
+            placement: "bottom-start",
+            searchPlaceholder: "Search countries",
+            searchAriaLabel: "Search countries",
+            showCheckmark: false,
+            panelClassName: "uxm-phone-input__panel",
+            panelStyle: style,
+            className: "uxm-phone-input__picker",
+            "aria-label": chooseCountryLabel,
+            renderTrigger: ({ open, triggerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                ...triggerProps,
+                type: "button",
+                className: "uxm-phone-input__country",
+                "aria-label": `Country: ${country.name}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-phone-input__flag", "aria-hidden": "true", children: country.flag }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-phone-input__dial", children: country.dial }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-phone-input__caret", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_icon.Icon,
+                    {
+                      glyph: "chevron-down",
+                      size: 12,
+                      strokeWidth: 2.2,
+                      style: { transform: open ? "rotate(180deg)" : "none" }
+                    }
+                  ) })
+                ]
+              }
+            ),
+            renderItem: (c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-phone-input__row-flag", "aria-hidden": "true", children: c.flag }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-phone-input__row-name", children: c.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-phone-input__row-dial", children: c.dial })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            autoComplete: "off",
+            className: (0, import_helpers.cn)(
+              "uxm-phone-input__input",
+              clearable && "uxm-phone-input__input--clearable"
+            ),
+            placeholder: placeholder ?? country.format?.replace(/X/g, "0") ?? "Phone number",
+            value: masked,
+            onChange: handleNumberChange,
+            disabled,
+            ...rest
+          }
+        ),
+        showClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icon_button.IconButton,
+          {
+            className: "uxm-field-clear uxm-phone-input__clear",
+            "aria-label": clearLabel,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: handleClear,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close" })
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PhoneInput
+});
+//# sourceMappingURL=phone-input.cjs.map

package/dist/ui/phone-input/phone-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/phone-input/phone-input.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport {\n  CURATED_COUNTRIES,\n  findCountry,\n  maskNumber,\n  maxDigitsFor,\n  type PhoneCountry,\n} from '../../lib/phone-countries';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\nimport { Listbox } from '../listbox';\n\nimport type { ChangeEvent, InputHTMLAttributes } from 'react';\n\n/** PhoneInput value: split into country code (ISO) and the national number. */\nexport interface PhoneValue {\n  /** ISO-3166 alpha-2 country code (e.g. \"US\"). */\n  country: string;\n  /** National number as raw digits, no formatting. */\n  number: string;\n}\n\nexport interface PhoneInputProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'onChange' | 'value' | 'defaultValue' | 'type' | 'style'\n  > {\n  /** Controlled value. Pair with `onChange`. */\n  value?: PhoneValue;\n  /** Initial value for uncontrolled usage. */\n  defaultValue?: PhoneValue;\n  /** Fires with the next value after each keystroke or country pick. */\n  onChange?: (next: PhoneValue) => void;\n  /**\n   * Country list shown in the picker. Defaults to a curated set of ~30\n   * countries covering the regions most B2B apps ship to. Pass a custom\n   * list (e.g. an extended global set or a region-restricted subset) to\n   * override. Each country's `format` field controls the per-country\n   * digit mask.\n   */\n  countries?: PhoneCountry[];\n  /**\n   * Show a clear (✕) button at the trailing edge when the national number\n   * has a value. On by default (opt out with `clearable={false}`). The\n   * component owns the reset — it wipes its own uncontrolled state and fires\n   * `onChange` with an empty number (keeping the selected country), so no\n   * separate `onClear` is needed (mirrors NumberInput / Select).\n   */\n  clearable?: boolean;\n  /** Accessible name for the clear button. Default `\"Clear\"`. */\n  clearLabel?: string;\n  /** Accessible name for the country picker trigger. Default `\"Choose country\"`. */\n  chooseCountryLabel?: string;\n  /**\n   * Inline style applied to the WRAPPER, and forwarded to the country\n   * picker panel via `panelStyle` (the panel portals to document.body, so\n   * it can't inherit the wrapper cascade). CSS custom properties set here\n   * reach both the field and the popover.\n   */\n  style?: React.CSSProperties;\n}\n\n/** Default value for uncontrolled mounts that don't pass `defaultValue`. */\nconst EMPTY_VALUE: PhoneValue = { country: 'US', number: '' };\n\n/** Case-insensitive country filter — matches name, dial code, or ISO. */\nfunction filterCountries(items: PhoneCountry[], query: string): PhoneCountry[] {\n  const q = query.trim().toLowerCase();\n  if (!q) return items;\n  return items.filter(\n    (c) => c.name.toLowerCase().includes(q) || c.dial.includes(q) || c.iso.toLowerCase().includes(q),\n  );\n}\n\nexport function PhoneInput({\n  value,\n  defaultValue,\n  onChange,\n  countries = CURATED_COUNTRIES,\n  clearable = true,\n  clearLabel = 'Clear',\n  chooseCountryLabel = 'Choose country',\n  className,\n  placeholder,\n  style,\n  disabled,\n  ...rest\n}: PhoneInputProps) {\n  const [internal, setInternal] = useState<PhoneValue>(() => defaultValue ?? EMPTY_VALUE);\n  const isControlled = value !== undefined;\n  const current = isControlled ? value : internal;\n  // The field wrapper is the popover anchor: the clickable trigger is the\n  // small country button, but the panel should span the full field width.\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const country = findCountry(current.country, countries) ?? countries[0];\n\n  const commit = useCallback(\n    (next: PhoneValue) => {\n      if (!isControlled) setInternal(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  const handleNumberChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      // Strip non-digits and cap at the country's digit budget so the\n      // stored value is always raw, normalized digits. Re-formatting for\n      // display happens via `maskNumber` below.\n      const digits = e.target.value.replace(/\\D/g, '').slice(0, maxDigitsFor(country));\n      commit({ country: current.country, number: digits });\n    },\n    [country, current.country, commit],\n  );\n\n  const handleCountryPick = useCallback(\n    (iso: string) => {\n      // Switching country may invalidate the current digit count (e.g.\n      // moving from a 10-digit country to a 7-digit one). Truncate to\n      // the new max so the displayed mask doesn't overflow its slots.\n      const next = findCountry(iso, countries);\n      const cap = maxDigitsFor(next);\n      const trimmed = current.number.length > cap ? current.number.slice(0, cap) : current.number;\n      commit({ country: iso, number: trimmed });\n    },\n    [countries, current.number, commit],\n  );\n\n  // Clear owns its own reset: wipe the national number but KEEP the selected\n  // country (the country picker is a separate affordance — clearing the field\n  // shouldn't reset it to a default). Mirrors NumberInput / Select which hold\n  // their own value state, so no `onClear` prop is needed.\n  const handleClear = useCallback(() => {\n    commit({ country: current.country, number: '' });\n  }, [commit, current.country]);\n  const showClear = clearable && current.number.length > 0 && !disabled;\n\n  const masked = maskNumber(current.number, country);\n\n  return (\n    <div\n      className={cn('uxm-phone-input', disabled && 'uxm-phone-input--disabled', className)}\n      style={style}\n      ref={containerRef}\n    >\n      {/* Country picker — the shared Listbox owns the popover (positioning,\n          portal, dismiss, keyboard nav, search, ARIA). `anchorRef` points at\n          the field wrapper so the panel spans the full width; `showCheckmark`\n          is off because each row already carries the dial code on its right\n          edge. */}\n      <Listbox<PhoneCountry>\n        items={countries}\n        getKey={(c) => c.iso}\n        getLabel={(c) => c.name}\n        filterItems={filterCountries}\n        value={country}\n        onChange={(next) => next && handleCountryPick(next.iso)}\n        disabled={disabled}\n        anchorRef={containerRef}\n        placement=\"bottom-start\"\n        searchPlaceholder=\"Search countries\"\n        searchAriaLabel=\"Search countries\"\n        showCheckmark={false}\n        panelClassName=\"uxm-phone-input__panel\"\n        panelStyle={style}\n        className=\"uxm-phone-input__picker\"\n        aria-label={chooseCountryLabel}\n        renderTrigger={({ open, triggerProps }) => (\n          <button\n            {...triggerProps}\n            type=\"button\"\n            className=\"uxm-phone-input__country\"\n            aria-label={`Country: ${country.name}`}\n          >\n            <span className=\"uxm-phone-input__flag\" aria-hidden=\"true\">{country.flag}</span>\n            <span className=\"uxm-phone-input__dial\">{country.dial}</span>\n            <span className=\"uxm-phone-input__caret\" aria-hidden=\"true\">\n              <Icon\n                glyph=\"chevron-down\"\n                size={12}\n                strokeWidth={2.2}\n                style={{ transform: open ? 'rotate(180deg)' : 'none' }}\n              />\n            </span>\n          </button>\n        )}\n        renderItem={(c) => (\n          <>\n            <span className=\"uxm-phone-input__row-flag\" aria-hidden=\"true\">{c.flag}</span>\n            <span className=\"uxm-phone-input__row-name\">{c.name}</span>\n            <span className=\"uxm-phone-input__row-dial\">{c.dial}</span>\n          </>\n        )}\n      />\n      <input\n        // `type=\"text\"` (not `tel`) is deliberate: `type=\"tel\"` triggers\n        // Chrome / Safari phone-autofill heuristics that can intercept\n        // keystrokes, clear the field mid-typing, or render a stacking\n        // autofill chip that fights our masked display. `inputMode=\"numeric\"`\n        // still pulls up the digit-only soft keyboard on mobile, which is\n        // the only thing `type=\"tel\"` was giving us. `autoComplete=\"off\"`\n        // belt-and-braces against browser autofill clobbering the value\n        // (some browsers ignore `autoComplete` on tel-shaped fields, so\n        // skipping the tel hint matters too).\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        className={cn(\n          'uxm-phone-input__input',\n          clearable && 'uxm-phone-input__input--clearable',\n        )}\n        placeholder={placeholder ?? country.format?.replace(/X/g, '0') ?? 'Phone number'}\n        value={masked}\n        onChange={handleNumberChange}\n        disabled={disabled}\n        {...rest}\n      />\n      {showClear && (\n        <IconButton\n          className=\"uxm-field-clear uxm-phone-input__clear\"\n          aria-label={clearLabel}\n          // Prevent the button from stealing focus away from whatever's\n          // currently focused — a blur here would land before the reset does.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={handleClear}\n        >\n          <Icon glyph=\"close\" />\n        </IconButton>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/phone-input/phone-input.css

@@ -0,0 +1,194 @@
+@charset "UTF-8";
+/* Phone Input — leading country picker + national number text input.
+   Layout: flag/dial-code button on the LEFT (the country is read first,
+   left-to-right with the phone number that follows). Popover below opens
+   on country-button click; selecting a country closes it. The root is
+   layout-only (positioning wrapper + flex), all visible styling lives on
+   the inner `__input`, `__country` button, and popover. */
+.uxm-phone-input {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  background-color: var(--uxm-phone-input-background-color, var(--color-card));
+  border: 1px solid var(--uxm-phone-input-border-color, var(--color-border));
+  border-radius: var(--uxm-phone-input-border-radius, 8px);
+  transition: border-color 0.15s, background-color 0.15s;
+  box-sizing: border-box;
+}
+
+/* Hover / focus / disabled / error states apply to the WRAPPER (it's
+   the visible surface here, unlike date/time/password which put the
+   border on the inner input). This is the cleanest fit for a two-input
+   composite — one outline around the whole field, with the inner
+   separator being the divider between country and national number. */
+.uxm-phone-input--state-hover,
+.uxm-phone-input:hover:not(.uxm-phone-input--disabled):not(.uxm-phone-input--error) {
+  background-color: var(--uxm-phone-input-hover-bg, var(--color-card));
+  border-color: var(--uxm-phone-input-hover-border, var(--color-accent));
+}
+
+.uxm-phone-input--state-focus,
+.uxm-phone-input:focus-within {
+  border-color: var(--uxm-phone-input-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-phone-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-phone-input--disabled {
+  background-color: var(--uxm-phone-input-disabled-bg, var(--color-surface-alt));
+  border-color: var(--uxm-phone-input-disabled-border, var(--color-border));
+  opacity: var(--uxm-phone-input-disabled-opacity, 0.6);
+}
+
+.uxm-phone-input--disabled .uxm-phone-input__input,
+.uxm-phone-input--disabled .uxm-phone-input__country {
+  cursor: not-allowed;
+  color: var(--uxm-phone-input-disabled-color, var(--color-text-muted));
+}
+
+.uxm-phone-input--error {
+  background-color: var(--uxm-phone-input-error-bg, var(--color-card));
+  border-color: var(--uxm-phone-input-error-border, var(--color-danger-text));
+}
+
+/* `errorColor` tones the trailing caret in error mode — a subtle
+   indicator paired with the error border. Same pattern as time-input's
+   icon re-tone in error state. (The dial code stays in the normal text
+   color so the country read remains scannable; only the caret recedes
+   into the error palette.) */
+.uxm-phone-input--error .uxm-phone-input__caret {
+  color: var(--uxm-phone-input-error-color, var(--color-danger-text));
+}
+
+/* Error message beneath the field — `errorColor` tones it, `errorMessageSize`
+   sizes it. Same pattern as time/password/date-input's `__error-message`. */
+.uxm-phone-input__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-phone-input-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-phone-input-error-color, var(--color-danger-text));
+}
+
+/* Country picker button — the leading affordance. Compact: flag + dial
+   code + caret. The dividing right border separates it from the national
+   number input, giving the composite a clear "two segments, one field"
+   read. */
+.uxm-phone-input__country {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: var(--uxm-phone-input-padding-y, 10px) var(--uxm-phone-input-padding-x, 12px);
+  background: transparent;
+  border: none;
+  border-right: 1px solid var(--uxm-phone-input-divider-color, var(--color-border));
+  /* Match the wrapper's left corners so the hover background follows the
+     rounded outline instead of painting square against it. `-1px` accounts
+     for the wrapper's 1px border — the inner radius is one pixel tighter.
+     `overflow:hidden` on the wrapper would do this for free but would
+     also clip the popover (positioned below the field), so per-corner
+     radii is the right tool here. */
+  border-top-left-radius: calc(var(--uxm-phone-input-border-radius, 8px) - 1px);
+  border-bottom-left-radius: calc(var(--uxm-phone-input-border-radius, 8px) - 1px);
+  color: var(--uxm-phone-input-color, var(--color-text));
+  font-family: inherit;
+  font-size: calc(var(--uxm-phone-input-font-size, 14px) * var(--type-scale, 1));
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  /* Subtle hover on the country button itself — picker affordance reads
+     as "interactive" without changing the wrapper's border state. */
+  transition: background-color 0.12s;
+}
+
+.uxm-phone-input__country:hover:not(:disabled) {
+  background-color: var(--uxm-phone-input-country-hover-bg, var(--color-surface-alt));
+}
+
+.uxm-phone-input__country:disabled {
+  cursor: not-allowed;
+}
+
+.uxm-phone-input__flag {
+  font-size: 1.1em;
+  line-height: 1;
+}
+
+.uxm-phone-input__dial {
+  font-weight: 500;
+}
+
+.uxm-phone-input__caret {
+  display: inline-flex;
+  color: var(--uxm-phone-input-caret-color, var(--color-text-muted));
+}
+
+/* National number input — fills the remaining width, no border (the
+   wrapper provides it). Display value is the masked string from
+   `maskNumber()`, so what the user sees matches the country's grouping. */
+.uxm-phone-input__input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: var(--uxm-phone-input-padding-y, 10px) var(--uxm-phone-input-padding-x, 12px);
+  color: var(--uxm-phone-input-color, var(--color-text));
+  font-family: inherit;
+  font-size: calc(var(--uxm-phone-input-font-size, 14px) * var(--type-scale, 1));
+}
+
+.uxm-phone-input__input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.uxm-phone-input__input:disabled {
+  cursor: not-allowed;
+}
+
+/* Reserve trailing room so the masked number never slides under the ✕. */
+.uxm-phone-input__input--clearable {
+  padding-right: calc(var(--uxm-phone-input-padding-x, 12px) + var(--uxm-field-clear-size, 22px) + 4px);
+}
+
+/* Clear (✕) — positioning only; chrome comes from the shared `.uxm-field-clear`
+   IconButton (same 22×22 affordance as Text / Number / Input-with-Icon). The
+   wrapper is `position: relative`, so this pins to its trailing edge. */
+.uxm-phone-input__clear {
+  position: absolute;
+  right: var(--uxm-phone-input-padding-x, 12px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* The country picker is a shared <Listbox>, which wraps its trigger in a
+   `.uxm-listbox` element. `display: contents` dissolves that wrapper so the
+   `__country` button stays a direct flex child of the field (keeping the
+   divider + seamless country|number layout). The panel is portaled, so it's
+   unaffected. */
+.uxm-phone-input__picker {
+  display: contents;
+}
+
+/* Country-row parts, rendered inside the shared `.uxm-listbox__option` (which
+   provides the flex row, padding, and hover/selected states). These just size
+   the flag, let the name flex, and push the dial code to the trailing edge. */
+.uxm-phone-input__row-flag {
+  font-size: 1.1em;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.uxm-phone-input__row-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.uxm-phone-input__row-dial {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}