@alfadocs/ui-kit-debug 0.71.0 → 0.72.0

package/dist/_chunks/phone-input-dtnrvnZf.js

@@ -0,0 +1,580 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { forwardRef as Te, useContext as Ae, useMemo as b, useState as $, useRef as B, useEffect as ue, useCallback as ce } from "react";
+import { u as $e } from "./registry-DvAUVLHh.js";
+import { u as Be } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import * as K from "@radix-ui/react-popover";
+import { R as Ke, _ as N } from "./index-4xgbg-sn.js";
+import { c as ee } from "./index-D2ZczOXr.js";
+import { useTranslation as Le } from "react-i18next";
+import { getCountries as qe, parsePhoneNumberFromString as L, AsYouType as q, getCountryCallingCode as Me } from "libphonenumber-js/min";
+import { u as He, F as _e } from "./form-field-context-B3APVHKx.js";
+import { c as Ge } from "./compose-refs-C0k0tdqF.js";
+import { n as J } from "./normalize-diacritics-BNGbFNlJ.js";
+import { a as Q } from "./flag-DZ6V7-hU.js";
+import { C as Oe } from "./chevron-down-DWE7GSq9.js";
+const Ue = {
+  id: "phone-input",
+  // A phone number is a single form value, not free-form rich text — `set_value`
+  // (not `edit_inline`, which is reserved for in-place rich/cell editing).
+  capabilities: ["set_value"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.phoneInput.state.value",
+      description: "Current E.164 phone number, or empty string when not yet valid.",
+      read: (s) => s.getValue()
+    },
+    isEmpty: {
+      type: "boolean",
+      descriptionKey: "ui.agent.phoneInput.state.isEmpty",
+      description: "Whether the input has no value.",
+      read: (s) => s.getValue() === ""
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          value: {
+            type: "string",
+            description: "Phone number in E.164 or national format; the parser infers the country."
+          }
+        },
+        required: ["value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.phoneInput.actions.setValue",
+      description: "Replace the phone number (E.164 or national format; parser will infer country).",
+      examples: [
+        { args: { value: "+393331234567" }, note: "Set an Italian mobile." }
+      ],
+      invoke: (s, a) => {
+        s.setValue(a.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.phoneInput.actions.clear",
+      description: "Empty the input. Loses any typed value.",
+      invoke: (s) => {
+        s.clear();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.phoneInput.actions.focus",
+      description: "Move keyboard focus to the phone-number input.",
+      invoke: (s) => {
+        s.focus();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "phone-input",
+      description: "Marks the PhoneInput wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, We = ee(
+  [
+    "ds:group ds:relative ds:inline-flex ds:items-stretch ds:w-full",
+    "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-input",
+    "ds:shadow-[var(--shadow-input)]",
+    "ds:text-foreground",
+    "ds:transition-[colors,box-shadow] ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-within:outline-[length:var(--focus-ring-width)] ds:focus-within:outline-solid",
+    "ds:focus-within:outline-ring ds:focus-within:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-within:outline-[CanvasText]",
+    "ds:has-[:disabled]:cursor-not-allowed ds:has-[:disabled]:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:h-8 ds:text-[length:var(--font-size-sm)]",
+        md: "ds:h-[var(--min-target-size)] ds:text-[length:var(--font-size-base)]",
+        lg: "ds:h-12 ds:text-[length:var(--font-size-lg)]"
+      },
+      tone: {
+        default: "",
+        error: "ds:border-destructive ds:focus-within:outline-destructive"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "default"
+    }
+  }
+), pe = ee(
+  [
+    "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+    "ds:bg-transparent ds:text-foreground",
+    "ds:border-0 ds:border-e ds:border-e-border",
+    "ds:rounded-s-[var(--radius-sm)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:hover:bg-muted",
+    "ds:focus:outline-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:disabled:cursor-not-allowed"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:ps-3 ds:pe-2",
+        md: "ds:ps-3 ds:pe-2",
+        lg: "ds:ps-4 ds:pe-3"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Ye = ee(
+  [
+    "ds:flex-1 ds:min-w-0 ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
+    "ds:border-0 ds:outline-none",
+    "ds:disabled:cursor-not-allowed",
+    "ds:read-only:cursor-default"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:ps-2 ds:pe-3 ds:text-[length:var(--font-size-sm)]",
+        md: "ds:ps-2 ds:pe-3 ds:text-[length:var(--font-size-base)]",
+        lg: "ds:ps-3 ds:pe-4 ds:text-[length:var(--font-size-lg)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Ze = [
+  "ds:z-[var(--z-popover)] ds:overflow-hidden ds:w-72",
+  "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background ds:text-foreground",
+  "ds:shadow-[var(--shadow-lg)]",
+  "ds:animate-in ds:fade-in ds:zoom-in-95",
+  "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out",
+  "ds:data-[state=closed]:zoom-out-95",
+  "ds:data-[side=bottom]:slide-in-from-top-2",
+  "ds:data-[side=top]:slide-in-from-bottom-2",
+  "ds:motion-reduce:animate-none"
+].join(" "), Je = [
+  "ds:w-full ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
+  "ds:border-0 ds:border-b ds:border-b-border ds:outline-none",
+  "ds:ps-3 ds:pe-3 ds:py-2 ds:text-[var(--font-size-sm)]",
+  "ds:focus:outline-none"
+].join(" "), Qe = "ds:max-h-72 ds:overflow-y-auto ds:p-[var(--spacing-xs)]", Xe = [
+  "ds:relative ds:flex ds:cursor-pointer ds:items-center ds:gap-[var(--spacing-sm)]",
+  "ds:rounded-[var(--radius-sm)] ds:ps-3 ds:pe-3 ds:py-2 ds:text-[var(--font-size-sm)]",
+  "ds:text-foreground ds:outline-none ds:select-none",
+  "ds:data-[highlighted]:bg-muted ds:data-[highlighted]:text-foreground",
+  "ds:data-[highlighted]:border-s-2 ds:data-[highlighted]:border-s-primary",
+  "ds:aria-selected:bg-muted"
+].join(" "), fe = [
+  "ds:ps-3 ds:pe-3 ds:py-1.5",
+  "type-eyebrow ds:text-muted-foreground"
+].join(" "), et = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", tt = {
+  sm: "ds:size-3.5",
+  md: "ds:size-4",
+  lg: "ds:size-5"
+}, X = {
+  sm: "sm",
+  md: "md",
+  lg: "lg"
+};
+function nt(s, a) {
+  let l = 0;
+  for (let o = 0; o < a && o < s.length; o++)
+    s[o] >= "0" && s[o] <= "9" && l++;
+  return l;
+}
+function st(s, a) {
+  if (a === 0) return 0;
+  let l = 0;
+  for (let o = 0; o < s.length; o++)
+    if (s[o] >= "0" && s[o] <= "9" && (l++, l === a))
+      return o + 1;
+  return s.length;
+}
+function me(s, a, l, o, f) {
+  const i = f && f.length ? new Set(f) : null, d = (v) => a.has(v) && (!i || i.has(v));
+  if (s && d(s)) return s;
+  if (l) {
+    const v = typeof navigator < "u" ? navigator.language : void 0;
+    if (v) {
+      const y = v.match(/-([A-Za-z]{2})/);
+      if (y) {
+        const S = y[1].toUpperCase();
+        if (d(S)) return S;
+      }
+    }
+    try {
+      const y = new Intl.Locale(o).region;
+      if (y && d(y.toUpperCase()))
+        return y.toUpperCase();
+    } catch {
+    }
+  }
+  return i ? f[0] : "IT";
+}
+function ot(s, a) {
+  let l;
+  try {
+    l = new Intl.DisplayNames([s], { type: "region" });
+  } catch {
+    l = new Intl.DisplayNames(["en"], { type: "region" });
+  }
+  const o = a.map((i) => ({
+    code: i,
+    name: l.of(i) ?? i,
+    dialCode: Me(i)
+  })), f = new Intl.Collator(s);
+  return o.sort((i, d) => f.compare(i.name, d.name));
+}
+const rt = Te(
+  function({
+    value: a,
+    defaultValue: l,
+    defaultCountry: o,
+    detectBrowserCountry: f = !1,
+    onChange: i,
+    size: d = "md",
+    tone: v = "default",
+    disabled: y,
+    readOnly: S,
+    placeholder: he,
+    popularCountries: V,
+    allowedCountries: F,
+    className: ge,
+    id: M,
+    name: be,
+    required: ye,
+    "aria-label": ve
+  }, Ce) {
+    const { t: w, i18n: R } = Le(), z = He(), k = Ae(_e) !== null, h = b(
+      () => new Set(qe()),
+      []
+    ), c = b(() => {
+      if (!F || F.length === 0) return null;
+      const e = /* @__PURE__ */ new Set(), t = F.filter((n) => !h.has(n) || e.has(n) ? !1 : (e.add(n), !0));
+      return t.length > 0 ? t : null;
+    }, [F, h]), xe = c !== null && c.length === 1, H = b(() => {
+      const e = me(
+        o,
+        h,
+        f,
+        R.language,
+        c
+      ), t = a ?? l;
+      if (t) {
+        const n = L(t);
+        return n != null && n.country ? !c || c.includes(n.country) ? {
+          country: n.country,
+          display: n.formatNational(),
+          pinned: !0
+        } : {
+          country: e,
+          display: new q(e).input(
+            n.nationalNumber
+          ),
+          pinned: !0
+        } : { country: e, display: t, pinned: !1 };
+      }
+      return { country: e, display: "", pinned: !1 };
+    }, []), [u, E] = $(H.country), [te, g] = $(
+      H.display
+    ), [_, G] = $(!1), [Ne, ne] = $(""), se = a !== void 0, O = B(""), j = B(null), D = B(H.pinned), T = B(null), we = Ge(Ce, T);
+    ue(() => {
+      if (D.current) return;
+      const e = me(
+        o,
+        h,
+        f,
+        R.language,
+        c
+      );
+      E((t) => t === e ? t : e);
+    }, [
+      R.language,
+      o,
+      h,
+      f,
+      c
+    ]), ue(() => {
+      if (!se) return;
+      const e = a ?? "";
+      if (e === O.current) return;
+      if (e === "") {
+        g("");
+        return;
+      }
+      const t = L(e);
+      t != null && t.country && (!c || c.includes(t.country)) ? (D.current = !0, E(t.country), g(t.formatNational())) : g(t ? t.formatNational() : e);
+    }, [a, se, c]), Be(() => {
+      if (j.current == null) return;
+      const e = j.current;
+      j.current = null;
+      const t = T.current;
+      t && document.activeElement === t && t.setSelectionRange(e, e);
+    });
+    const C = ce(
+      (e, t) => {
+        const n = L(e, t), p = (n == null ? void 0 : n.number) ?? "";
+        O.current = p, i == null || i(p, {
+          country: t,
+          isValid: (n == null ? void 0 : n.isValid()) ?? !1,
+          isPossible: (n == null ? void 0 : n.isPossible()) ?? !1,
+          type: n == null ? void 0 : n.getType()
+        });
+      },
+      [i]
+    ), ze = M ?? (k ? z.id : void 0), oe = (k ? z.disabled : !1) || !!y, Ie = (k ? z.required : !1) || !!ye, re = k ? z.invalid : !1, Se = re ? "error" : v, Re = k && z.describedBy ? z.describedBy : void 0, ke = he ?? w("inputs.phone.placeholder", "Phone number"), Pe = (e) => {
+      if (S) return;
+      const t = e.target, n = t.value, p = t.selectionStart ?? n.length, I = nt(n, p), Z = new q(u).input(n);
+      j.current = st(Z, I), g(Z), C(Z, u);
+    }, ae = O, Ve = b(
+      () => ({
+        getValue: () => ae.current,
+        setValue: (e) => {
+          if (e === "") {
+            g(""), C("", u);
+            return;
+          }
+          const t = L(e);
+          if (t != null && t.country)
+            D.current = !0, E(t.country), g(t.formatNational()), C(t.formatNational(), t.country);
+          else {
+            const p = new q(u).input(e);
+            g(p), C(p, u);
+          }
+        },
+        clear: () => {
+          g(""), C("", u);
+        },
+        focus: () => {
+          var e;
+          return (e = T.current) == null ? void 0 : e.focus();
+        }
+      }),
+      [u, C, ae]
+    );
+    $e(Ue, Ve, M);
+    const Fe = (e) => {
+      if (e === u) {
+        G(!1);
+        return;
+      }
+      const t = te.replace(/\D/g, ""), n = new q(e), p = t ? n.input(t) : "";
+      D.current = !0, E(e), g(p), G(!1), ne(""), C(p, e), requestAnimationFrame(() => {
+        var I;
+        (I = T.current) == null || I.focus();
+      });
+    }, x = b(
+      () => ot(
+        R.language,
+        c ?? Array.from(h)
+      ),
+      [R.language, h, c]
+    ), P = b(() => {
+      if (!V || V.length === 0) return [];
+      const e = new Map(x.map((t) => [t.code, t]));
+      return V.filter((t) => h.has(t)).map((t) => e.get(t)).filter((t) => !!t);
+    }, [V, x, h]), U = b(
+      () => new Set(P.map((e) => e.code)),
+      [P]
+    ), Ee = b(
+      () => U.size > 0 ? x.filter((e) => !U.has(e.code)) : x,
+      [x, U]
+    ), A = b(
+      () => x.find((e) => e.code === u),
+      [x, u]
+    ), W = A ? A.dialCode : "", ie = A ? A.name : u, Y = w("inputs.phone.countryPickerLabel", "Country"), je = `${Y}: ${ie}, +${W}`, De = ce(
+      (e, t, n) => {
+        const p = J(e), I = J(t), le = n == null ? void 0 : n.map(J);
+        return Ke(
+          p,
+          I,
+          le
+        );
+      },
+      []
+    ), de = (e) => {
+      const t = `${e.name}, +${e.dialCode}`;
+      return /* @__PURE__ */ m(
+        N.Item,
+        {
+          value: e.code,
+          keywords: [e.name, e.dialCode, `+${e.dialCode}`],
+          onSelect: () => Fe(e.code),
+          className: Xe,
+          "aria-label": t,
+          children: [
+            /* @__PURE__ */ r(Q, { country: e.code, size: X[d] }),
+            /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:truncate", children: e.name }),
+            /* @__PURE__ */ m("bdi", { dir: "ltr", className: "ds:text-muted-foreground ds:tabular-nums", children: [
+              "+",
+              e.dialCode
+            ] })
+          ]
+        },
+        e.code
+      );
+    };
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        "data-component": "phone-input",
+        "data-component-id": M,
+        "data-slot": "phone-input",
+        className: We({
+          size: d,
+          tone: Se,
+          className: ge
+        }),
+        children: [
+          xe ? /* @__PURE__ */ m(
+            "span",
+            {
+              "data-slot": "phone-country-fixed",
+              className: `${pe({ size: d })} ds:cursor-default ds:hover:bg-transparent`,
+              children: [
+                /* @__PURE__ */ r("span", { className: "ds:sr-only", children: `${Y}: ${ie}` }),
+                /* @__PURE__ */ r(Q, { country: u, size: X[d] }),
+                /* @__PURE__ */ m("bdi", { dir: "ltr", className: "ds:tabular-nums", children: [
+                  "+",
+                  W
+                ] })
+              ]
+            }
+          ) : /* @__PURE__ */ m(K.Root, { open: _, onOpenChange: G, children: [
+            /* @__PURE__ */ r(K.Trigger, { asChild: !0, children: /* @__PURE__ */ m(
+              "button",
+              {
+                type: "button",
+                disabled: oe,
+                "aria-haspopup": "listbox",
+                "aria-expanded": _,
+                "aria-label": je,
+                className: pe({ size: d }),
+                children: [
+                  /* @__PURE__ */ r(Q, { country: u, size: X[d] }),
+                  /* @__PURE__ */ m("bdi", { dir: "ltr", className: "ds:tabular-nums", children: [
+                    "+",
+                    W
+                  ] }),
+                  /* @__PURE__ */ r(
+                    Oe,
+                    {
+                      "aria-hidden": "true",
+                      className: [
+                        tt[d],
+                        "ds:shrink-0 ds:text-muted-foreground",
+                        "ds:transition-transform ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+                        _ ? "ds:rotate-180" : ""
+                      ].join(" ")
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ r(K.Portal, { children: /* @__PURE__ */ r(
+              K.Content,
+              {
+                sideOffset: 6,
+                align: "start",
+                className: Ze,
+                children: /* @__PURE__ */ m(
+                  N,
+                  {
+                    filter: De,
+                    shouldFilter: !0,
+                    loop: !0,
+                    label: Y,
+                    children: [
+                      /* @__PURE__ */ r(
+                        N.Input,
+                        {
+                          asChild: !0,
+                          value: Ne,
+                          onValueChange: ne,
+                          children: /* @__PURE__ */ r(
+                            "input",
+                            {
+                              "data-phone-country-search": "true",
+                              type: "text",
+                              autoComplete: "off",
+                              autoCorrect: "off",
+                              spellCheck: !1,
+                              placeholder: w(
+                                "inputs.phone.searchCountry",
+                                "Search countries…"
+                              ),
+                              className: Je
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ m(N.List, { className: Qe, children: [
+                        /* @__PURE__ */ r(N.Empty, { className: et, children: w("inputs.phone.noCountryFound", "No country found") }),
+                        P.length > 0 ? /* @__PURE__ */ r(
+                          N.Group,
+                          {
+                            heading: /* @__PURE__ */ r("span", { className: fe, children: w("inputs.phone.popularCountries", "Popular") }),
+                            children: P.map(de)
+                          }
+                        ) : null,
+                        /* @__PURE__ */ r(
+                          N.Group,
+                          {
+                            heading: P.length > 0 ? /* @__PURE__ */ r("span", { className: fe, children: w("inputs.phone.allCountries", "All countries") }) : void 0,
+                            children: Ee.map(de)
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: we,
+              id: ze,
+              name: be,
+              type: "tel",
+              inputMode: "tel",
+              autoComplete: "tel-national",
+              value: te,
+              placeholder: ke,
+              disabled: oe,
+              readOnly: S,
+              required: Ie,
+              "aria-label": ve,
+              "aria-describedby": Re,
+              "aria-invalid": re || void 0,
+              onChange: Pe,
+              className: Ye({ size: d })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+rt.displayName = "PhoneInput";
+export {
+  rt as P,
+  Ye as a,
+  pe as c,
+  We as p
+};
+//# sourceMappingURL=phone-input-dtnrvnZf.js.map