@incodetech/web 0.0.0-dev-20260316-0522f9e → 0.0.0-dev-20260317-ce5d28b

package/dist/base.css

@@ -882,13 +882,66 @@
   font-family: inherit;
   display: inline-block;
 }
-.IncodePhoneInputComposed .IncodeDropdownComposedTrigger {
+.IncodePhoneInputComposed {
+  width: 100%;
+  max-width: 420px;
+  position: relative;
+}
+.IncodePhoneInputComposedLabel {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
+  font-family: var(--typography-label-family);
+  font-size: var(--typography-label-m-size);
+  font-weight: var(--typography-label-m-weight);
+  line-height: var(--typography-label-m-line-height);
+  letter-spacing: var(--typography-label-m-letter-spacing);
+  display: inline-block;
+}
+.IncodePhoneInputComposedRequired {
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+}
+.IncodePhoneInputComposedDropdown {
+  max-width: none;
+}
+.IncodePhoneInputComposedDropdown .IncodeDropdownComposedTrigger {
   flex-shrink: 0;
   width: auto;
+  min-width: 120px;
 }
-.IncodePhoneInputComposed .IncodeDropdownComposedSibling .IncodeInputComposed, .IncodePhoneInputComposed .IncodeDropdownComposedSibling .IncodeInput {
+.IncodePhoneInputComposedDropdown .IncodeDropdownComposedSibling .IncodeInputComposed, .IncodePhoneInputComposedDropdown .IncodeDropdownComposedSibling .IncodeInput {
   max-width: none;
 }
+.IncodePhoneInputComposedErrorWrapper, .IncodePhoneInputComposedHelperWrapper {
+  margin-top: var(--spacing-8, var(--spacing-8, 8px));
+  align-items: center;
+  display: flex;
+}
+.IncodePhoneInputComposedIconWrapper {
+  margin-right: var(--spacing-8, var(--spacing-8, 8px));
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.IncodePhoneInputComposedError {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+  display: inline-block;
+}
+.IncodePhoneInputComposedHelper {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-default, var(--input-text-helper-default));
+  display: inline-block;
+}
 .IncodeOtpInput {
   flex-direction: column;
   flex: 1;

package/dist/{ekycModule-CmD1wsRS.js → ekycModule-fxKjsL1i.js}

@@ -9,7 +9,7 @@ import { D as O } from "./dateInputComposed-CvFmQpJ0.js";
 import { D as z } from "./dropdownComposed-DBm7cotT.js";
 import { P as G } from "./page-BVHG3h0V.js";
 import { r as j } from "./incodeModule-aE-LkKwM.js";
-import { P as J } from "./phoneInputComposed-B1gXoSzr.js";
+import { P as J } from "./phoneInputComposed-D0oBe-el.js";
 const Q = ({ config: p, onFinish: s, onError: m }) => {
   const { t: h } = P(), [t, i] = M(() => x({ config: p }));
   E(() => {

package/dist/extensibility.es.js

@@ -12,7 +12,7 @@ import { D as Oe, a as Re, I as We, S as je } from "./dropdownComposed-DBm7cotT.
 import { O as $e } from "./otpInput-cazUY73p.js";
 import { D as E, d as O, A as R, y as W, q as j } from "./vendor-preact-BXf0bkEs.js";
 import { E as U } from "./errorIcon-BL647nVh.js";
-import { P as Ae } from "./phoneInputComposed-B1gXoSzr.js";
+import { P as Ae } from "./phoneInputComposed-D0oBe-el.js";
 import { C as ze, D as Ge } from "./dateInputComposed-CvFmQpJ0.js";
 import { B as Ke, L as Qe, P as Xe } from "./permissions-DwF2Ez1N.js";
 import { C as _e } from "./chevronDown-BUaOuf9J.js";

package/dist/flow/flow.es.js

@@ -2000,7 +2000,7 @@ const Pe = () => import("../id/id.es.js").then((e) => e.Id), ke = {
     (e) => e.GovernmentValidation
   ),
   GEOLOCATION: () => import("../geolocation/geolocation.es.js").then((e) => e.Geolocation),
-  EXTERNAL_VERIFICATION: () => import("../ekycModule-CmD1wsRS.js").then((e) => e.EkycModule),
+  EXTERNAL_VERIFICATION: () => import("../ekycModule-fxKjsL1i.js").then((e) => e.EkycModule),
   EKYB: () => import("../ekybModule-CV7jE8qz.js").then((e) => e.EkybModule),
   DOCUMENT_CAPTURE: () => import("../documentCapture-PdKA2frR.js").then(
     (e) => e.DocumentCapture

package/dist/phoneInputComposed-D0oBe-el.js

@@ -0,0 +1,159 @@
+import { u as n } from "./button-Ca1tRSTI.js";
+import { D as Y, d as S, A as k, T as D, y as q, q as y } from "./vendor-preact-BXf0bkEs.js";
+import { g as u, c as G } from "./countries-C9bhJe4u.js";
+import { D as J, I as K } from "./dropdownComposed-DBm7cotT.js";
+import { E as Q } from "./errorIcon-BL647nVh.js";
+import { S as X } from "./successIcon-BybULRRU.js";
+import { A as E, p as W } from "./AsYouType-CpH-Rmtj.js";
+const Z = Y(
+  ({
+    id: a,
+    label: m,
+    countryCode: A = "US",
+    value: c,
+    placeholder: N = "(123) 123-6789",
+    error: r,
+    helper: h,
+    showErrorIcon: j,
+    showHelperIcon: B,
+    disabled: P = !1,
+    disableCountrySelector: L = !1,
+    required: I,
+    onChange: f,
+    "aria-labelledby": T,
+    "data-testid": x,
+    ...z
+  }, F) => {
+    const [d, b] = S(A), [l, C] = S(""), $ = k(!1), H = D(
+      () => G.map((o) => ({
+        value: o.code,
+        label: `${o.emoji} ${o.callingCode} ${o.name}`
+      })),
+      []
+    ), t = D(
+      () => u(d) ?? u("US"),
+      [d]
+    );
+    q(() => {
+      if ($.current || !c || !t) return;
+      $.current = !0;
+      const o = c.startsWith("+") ? c : `+${c}`, e = W(o);
+      if (e?.isValid() && e.country) {
+        e.country !== d && b(e.country);
+        const s = new E(e.country);
+        C(s.input(e.nationalNumber));
+      }
+    }, [c, t, d]);
+    const p = y(
+      (o, e) => {
+        const s = `${e.callingCode}${o.replace(/\D/g, "")}`;
+        try {
+          const w = W(s, e.code);
+          f?.(s, w?.isValid() ?? !1);
+        } catch {
+          f?.(s, !1);
+        }
+      },
+      [f]
+    ), M = y(
+      (o) => {
+        b(o);
+        const e = u(o);
+        e && l && p(l, e);
+      },
+      [l, p]
+    ), U = y(
+      (o) => {
+        const e = o.target.value;
+        if (!t) {
+          C(e);
+          return;
+        }
+        const s = `${t.callingCode}${e}`, R = new E(t.code).input(s).replace(t.callingCode, "").trimStart();
+        C(R), p(e, t);
+      },
+      [t, p]
+    ), V = `${a}-country`, i = `${a}-phone`, g = `${i}-helper`, v = `${i}-error`, O = [h ? g : null, r ? v : null].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { class: "IncodePhoneInputComposed", children: [
+      m && /* @__PURE__ */ n(
+        "label",
+        {
+          class: "IncodePhoneInputComposedLabel",
+          htmlFor: i,
+          "data-testid": `${a}-label`,
+          children: [
+            m,
+            I && /* @__PURE__ */ n("span", { class: "IncodePhoneInputComposedRequired", children: " *" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ n(
+        J,
+        {
+          id: V,
+          options: H,
+          value: d,
+          onChange: M,
+          disabled: P || L,
+          required: I,
+          searchable: !0,
+          searchPlaceholder: "Search countries...",
+          suppressMessages: !0,
+          "aria-label": "Select country code",
+          renderSelectedLabel: (o) => {
+            const e = u(o.value);
+            return e ? `${e.emoji} ${e.callingCode}` : o.label;
+          },
+          class: "IncodePhoneInputComposedDropdown",
+          siblingElement: /* @__PURE__ */ n(
+            K,
+            {
+              id: i,
+              ref: F,
+              type: "tel",
+              value: l,
+              onInput: U,
+              placeholder: N,
+              error: r,
+              disabled: P,
+              required: I,
+              suppressMessages: !0,
+              "aria-label": m ? void 0 : "Phone number",
+              "aria-labelledby": T,
+              "aria-describedby": O || void 0,
+              "aria-invalid": r ? "true" : void 0,
+              "data-testid": x,
+              ...z
+            }
+          )
+        }
+      ),
+      r && /* @__PURE__ */ n(
+        "div",
+        {
+          class: "IncodePhoneInputComposedErrorWrapper",
+          "data-testid": `${a}-error-wrapper`,
+          children: [
+            j && /* @__PURE__ */ n("div", { class: "IncodePhoneInputComposedIconWrapper", children: /* @__PURE__ */ n(Q, { size: 16 }) }),
+            /* @__PURE__ */ n("p", { id: v, class: "IncodePhoneInputComposedError", children: r })
+          ]
+        }
+      ),
+      h && !r && /* @__PURE__ */ n(
+        "div",
+        {
+          class: "IncodePhoneInputComposedHelperWrapper",
+          "data-testid": `${a}-helper-wrapper`,
+          children: [
+            B && /* @__PURE__ */ n("div", { class: "IncodePhoneInputComposedIconWrapper", children: /* @__PURE__ */ n(X, { size: 16 }) }),
+            /* @__PURE__ */ n("p", { id: g, class: "IncodePhoneInputComposedHelper", children: h })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Z.displayName = "PhoneInputComposed";
+export {
+  Z as P
+};

package/dist/types/extensibility.d.ts

@@ -513,19 +513,27 @@ declare type PermissionsProps = {
     permissionStatus: PermissionStatus_2;
 };
 
-export declare const PhoneInputComposed: FC<PhoneInputComposedProps>;
+export declare const PhoneInputComposed: FunctionalComponent<PropsWithoutRef<PhoneInputComposedProps> & {
+ref?: Ref<HTMLInputElement> | undefined;
+}>;
 
-declare type PhoneInputComposedProps = {
+declare type PhoneInputComposedProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange' | 'class'> & PhoneInputOwnProps;
+
+declare type PhoneInputOwnProps = {
     id: string;
     label?: string;
     countryCode?: string;
     value?: string;
     placeholder?: string;
     error?: string;
+    helper?: string;
+    showErrorIcon?: boolean;
+    showHelperIcon?: boolean;
     disabled?: boolean;
     disableCountrySelector?: boolean;
     required?: boolean;
     onChange?: (fullNumber: string, isValid: boolean) => void;
+    'aria-labelledby'?: string;
     'data-testid'?: string;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260316-0522f9e",
+  "version": "0.0.0-dev-20260317-ce5d28b",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -119,7 +119,7 @@
     "preact-custom-element": "^4.6.0",
     "qrcode": "^1.5.4",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260316-0522f9e"
+    "@incodetech/core": "0.0.0-dev-20260317-ce5d28b"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",

package/dist/phoneInputComposed-B1gXoSzr.js

@@ -1,107 +0,0 @@
-import { u as $ } from "./button-Ca1tRSTI.js";
-import { d as g, A as q, T as I, y as B, q as u } from "./vendor-preact-BXf0bkEs.js";
-import { c as E, g as l } from "./countries-C9bhJe4u.js";
-import { I as F, D as M } from "./dropdownComposed-DBm7cotT.js";
-import { p as P, A as b } from "./AsYouType-CpH-Rmtj.js";
-const H = ({
-  id: p,
-  label: w,
-  countryCode: S = "US",
-  value: r,
-  placeholder: A = "(123) 123-6789",
-  error: m,
-  disabled: f = !1,
-  disableCountrySelector: D = !1,
-  required: N,
-  onChange: d,
-  "data-testid": T
-}) => {
-  const [s, h] = g(S), [a, i] = g(""), y = q(!1), j = I(
-    () => E.map((t) => ({
-      value: t.code,
-      label: `${t.emoji} ${t.callingCode} ${t.name}`
-    })),
-    []
-  ), o = I(
-    () => l(s) ?? l("US"),
-    [s]
-  );
-  B(() => {
-    if (y.current || !r || !o) return;
-    y.current = !0;
-    const t = r.startsWith("+") ? r : `+${r}`, e = P(t);
-    if (e?.isValid() && e.country) {
-      e.country !== s && h(e.country);
-      const n = new b(e.country);
-      i(n.input(e.nationalNumber));
-    }
-  }, [r, o, s]);
-  const c = u(
-    (t, e) => {
-      const n = `${e.callingCode}${t.replace(/\D/g, "")}`;
-      try {
-        const C = P(n, e.code);
-        d?.(n, C?.isValid() ?? !1);
-      } catch {
-        d?.(n, !1);
-      }
-    },
-    [d]
-  ), v = u(
-    (t) => {
-      h(t);
-      const e = l(t);
-      e && a && c(a, e);
-    },
-    [a, c]
-  ), x = u(
-    (t) => {
-      const e = t.target.value;
-      if (!o) {
-        i(e);
-        return;
-      }
-      const n = `${o.callingCode}${e}`, V = new b(o.code).input(n).replace(o.callingCode, "").trimStart();
-      i(V), c(e, o);
-    },
-    [o, c]
-  ), L = `${p}-country`, U = `${p}-phone`;
-  return /* @__PURE__ */ $(
-    M,
-    {
-      id: L,
-      label: w,
-      options: j,
-      value: s,
-      onChange: v,
-      error: m,
-      disabled: f || D,
-      required: N,
-      searchable: !0,
-      searchPlaceholder: "Search countries...",
-      renderSelectedLabel: (t) => {
-        const e = l(t.value);
-        return e ? `${e.emoji} ${e.callingCode}` : t.label;
-      },
-      class: "IncodePhoneInputComposed",
-      siblingElement: /* @__PURE__ */ $(
-        F,
-        {
-          id: U,
-          type: "tel",
-          value: a,
-          onInput: x,
-          placeholder: A,
-          error: m,
-          disabled: f,
-          suppressMessages: !0,
-          "aria-label": "Phone number",
-          "data-testid": T
-        }
-      )
-    }
-  );
-};
-export {
-  H as P
-};