@alfadocs/ui-kit 0.1.8 → 0.1.9

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

@@ -0,0 +1,513 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { forwardRef as Se, useContext as Pe, useMemo as m, useState as P, useRef as $, useEffect as Ve, useLayoutEffect as Fe, useCallback as se } from "react";
+import * as V from "@radix-ui/react-popover";
+import { R as Ee, _ as b } from "./index-4xgbg-sn.js";
+import { c as H } from "./index-D2ZczOXr.js";
+import { useTranslation as je } from "react-i18next";
+import { getCountries as Be, parsePhoneNumberFromString as F, AsYouType as M, getCountryCallingCode as De } from "libphonenumber-js/min";
+import { u as Te, F as Ae } from "./form-field-context-94LwgYTQ.js";
+import { c as Le } from "./compose-refs-C0k0tdqF.js";
+import { n as q } from "./normalize-diacritics-BNGbFNlJ.js";
+import { a as ne } from "./flag-DZ6V7-hU.js";
+import { u as Ke } from "./registry-C9nwlNyL.js";
+import { C as $e } from "./chevron-down-BX_NP2Yh.js";
+const Me = {
+  id: "phone-input",
+  capabilities: ["edit_inline"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.phoneInput.state.value",
+      description: "Current E.164 phone number, or empty string when not yet valid.",
+      read: (n) => n.getValue()
+    },
+    isEmpty: {
+      type: "boolean",
+      descriptionKey: "ui.agent.phoneInput.state.isEmpty",
+      description: "Whether the input has no value.",
+      read: (n) => n.getValue() === ""
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: string }",
+      descriptionKey: "ui.agent.phoneInput.actions.setValue",
+      description: "Replace the phone number (E.164 or national format; parser will infer country).",
+      invoke: (n, r) => {
+        n.setValue(r.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.phoneInput.actions.clear",
+      description: "Empty the input. Loses any typed value.",
+      invoke: (n) => {
+        n.clear();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.phoneInput.actions.focus",
+      description: "Move keyboard focus to the phone-number input.",
+      invoke: (n) => {
+        n.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."
+    }
+  }
+}, qe = H(
+  [
+    "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-background",
+    "ds:text-foreground",
+    "ds:transition-colors 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"
+    }
+  }
+), He = H(
+  [
+    "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" }
+  }
+), _e = H(
+  [
+    "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" }
+  }
+), Ge = [
+  "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(" "), Oe = [
+  "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(" "), Ue = "ds:max-h-72 ds:overflow-y-auto ds:p-[var(--spacing-xs)]", We = [
+  "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(" "), oe = [
+  "ds:ps-3 ds:pe-3 ds:py-1.5",
+  "type-eyebrow ds:text-muted-foreground"
+].join(" "), Ye = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", Ze = {
+  sm: "ds:size-3.5",
+  md: "ds:size-4",
+  lg: "ds:size-5"
+}, re = {
+  sm: "sm",
+  md: "md",
+  lg: "lg"
+};
+function Je(n, r) {
+  let d = 0;
+  for (let a = 0; a < r && a < n.length; a++)
+    n[a] >= "0" && n[a] <= "9" && d++;
+  return d;
+}
+function Qe(n, r) {
+  if (r === 0) return 0;
+  let d = 0;
+  for (let a = 0; a < n.length; a++)
+    if (n[a] >= "0" && n[a] <= "9" && (d++, d === r))
+      return a + 1;
+  return n.length;
+}
+function Xe(n, r, d, a) {
+  if (n && r.has(n)) return n;
+  if (d) {
+    const y = typeof navigator < "u" ? navigator.language : void 0;
+    if (y) {
+      const o = y.match(/-([A-Za-z]{2})/);
+      if (o) {
+        const u = o[1].toUpperCase();
+        if (r.has(u)) return u;
+      }
+    }
+    try {
+      const o = new Intl.Locale(a).region;
+      if (o && r.has(o.toUpperCase()))
+        return o.toUpperCase();
+    } catch {
+    }
+  }
+  return "IT";
+}
+function et(n, r) {
+  let d;
+  try {
+    d = new Intl.DisplayNames([n], { type: "region" });
+  } catch {
+    d = new Intl.DisplayNames(["en"], { type: "region" });
+  }
+  const a = r.map((o) => ({
+    code: o,
+    name: d.of(o) ?? o,
+    dialCode: De(o)
+  })), y = new Intl.Collator(n);
+  return a.sort((o, u) => y.compare(o.name, u.name));
+}
+const tt = Se(
+  function({
+    value: r,
+    defaultValue: d,
+    defaultCountry: a,
+    detectBrowserCountry: y = !1,
+    onChange: o,
+    size: u = "md",
+    tone: ae = "default",
+    disabled: ie,
+    readOnly: _,
+    placeholder: de,
+    popularCountries: I,
+    className: le,
+    id: E,
+    name: ce,
+    required: ue,
+    "aria-label": pe
+  }, fe) {
+    const { t: v, i18n: j } = je(), C = Te(), w = Pe(Ae) !== null, z = m(
+      () => new Set(Be()),
+      []
+    ), G = m(() => {
+      const e = Xe(
+        a,
+        z,
+        y,
+        j.language
+      ), t = r ?? d;
+      if (t) {
+        const s = F(t);
+        return s != null && s.country ? {
+          country: s.country,
+          display: s.formatNational()
+        } : { country: e, display: t };
+      }
+      return { country: e, display: "" };
+    }, []), [l, B] = P(G.country), [O, p] = P(
+      G.display
+    ), [D, T] = P(!1), [me, U] = P(""), W = r !== void 0, A = $(""), R = $(null), k = $(null), he = Le(fe, k);
+    Ve(() => {
+      if (!W) return;
+      const e = r ?? "";
+      if (e === A.current) return;
+      if (e === "") {
+        p("");
+        return;
+      }
+      const t = F(e);
+      t != null && t.country ? (B(t.country), p(t.formatNational())) : p(e);
+    }, [r, W]), Fe(() => {
+      if (R.current == null) return;
+      const e = R.current;
+      R.current = null;
+      const t = k.current;
+      t && document.activeElement === t && t.setSelectionRange(e, e);
+    });
+    const h = se(
+      (e, t) => {
+        const s = F(e, t), c = (s == null ? void 0 : s.number) ?? "";
+        A.current = c, o == null || o(c, {
+          country: t,
+          isValid: (s == null ? void 0 : s.isValid()) ?? !1,
+          isPossible: (s == null ? void 0 : s.isPossible()) ?? !1,
+          type: s == null ? void 0 : s.getType()
+        });
+      },
+      [o]
+    ), ge = E ?? (w ? C.id : void 0), Y = (w ? C.disabled : !1) || !!ie, be = (w ? C.required : !1) || !!ue, Z = w ? C.invalid : !1, ye = Z ? "error" : ae, ve = w && C.describedBy ? C.describedBy : void 0, Ce = de ?? v("ui.inputs.phone.placeholder", "Phone number"), xe = (e) => {
+      if (_) return;
+      const t = e.target, s = t.value, c = t.selectionStart ?? s.length, x = Je(s, c), K = new M(l).input(s);
+      R.current = Qe(K, x), p(K), h(K, l);
+    }, J = A, we = m(
+      () => ({
+        getValue: () => J.current,
+        setValue: (e) => {
+          if (e === "") {
+            p(""), h("", l);
+            return;
+          }
+          const t = F(e);
+          if (t != null && t.country)
+            B(t.country), p(t.formatNational()), h(t.formatNational(), t.country);
+          else {
+            const c = new M(l).input(e);
+            p(c), h(c, l);
+          }
+        },
+        clear: () => {
+          p(""), h("", l);
+        },
+        focus: () => {
+          var e;
+          return (e = k.current) == null ? void 0 : e.focus();
+        }
+      }),
+      [l, h, J]
+    );
+    Ke(Me, we, E);
+    const ze = (e) => {
+      if (e === l) {
+        T(!1);
+        return;
+      }
+      const t = O.replace(/\D/g, ""), s = new M(e), c = t ? s.input(t) : "";
+      B(e), p(c), T(!1), U(""), h(c, e), requestAnimationFrame(() => {
+        var x;
+        (x = k.current) == null || x.focus();
+      });
+    }, g = m(
+      () => et(
+        j.language,
+        Array.from(z)
+      ),
+      [j.language, z]
+    ), N = m(() => {
+      if (!I || I.length === 0) return [];
+      const e = new Map(g.map((t) => [t.code, t]));
+      return I.filter(
+        (t) => z.has(t)
+      ).map((t) => e.get(t)).filter((t) => !!t);
+    }, [I, g, z]), L = m(
+      () => new Set(N.map((e) => e.code)),
+      [N]
+    ), Ne = m(
+      () => L.size > 0 ? g.filter((e) => !L.has(e.code)) : g,
+      [g, L]
+    ), S = m(
+      () => g.find((e) => e.code === l),
+      [g, l]
+    ), Q = S ? S.dialCode : "", Ie = S ? S.name : l, X = v(
+      "ui.inputs.phone.countryPickerLabel",
+      "Country"
+    ), Re = `${X}: ${Ie}, +${Q}`, ke = se(
+      (e, t, s) => {
+        const c = q(e), x = q(t), te = s == null ? void 0 : s.map(q);
+        return Ee(
+          c,
+          x,
+          te
+        );
+      },
+      []
+    ), ee = (e) => {
+      const t = `${e.name}, +${e.dialCode}`;
+      return /* @__PURE__ */ f(
+        b.Item,
+        {
+          value: e.code,
+          keywords: [e.name, e.dialCode, `+${e.dialCode}`],
+          onSelect: () => ze(e.code),
+          className: We,
+          "aria-label": t,
+          children: [
+            /* @__PURE__ */ i(ne, { country: e.code, size: re[u] }),
+            /* @__PURE__ */ i("span", { className: "ds:flex-1 ds:truncate", children: e.name }),
+            /* @__PURE__ */ f("bdi", { dir: "ltr", className: "ds:text-muted-foreground ds:tabular-nums", children: [
+              "+",
+              e.dialCode
+            ] })
+          ]
+        },
+        e.code
+      );
+    };
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        "data-component": "phone-input",
+        "data-component-id": E,
+        "data-slot": "phone-input",
+        className: qe({
+          size: u,
+          tone: ye,
+          className: le
+        }),
+        children: [
+          /* @__PURE__ */ f(V.Root, { open: D, onOpenChange: T, children: [
+            /* @__PURE__ */ i(V.Trigger, { asChild: !0, children: /* @__PURE__ */ f(
+              "button",
+              {
+                type: "button",
+                disabled: Y,
+                "aria-haspopup": "listbox",
+                "aria-expanded": D,
+                "aria-label": Re,
+                className: He({ size: u }),
+                children: [
+                  /* @__PURE__ */ i(ne, { country: l, size: re[u] }),
+                  /* @__PURE__ */ f("bdi", { dir: "ltr", className: "ds:tabular-nums", children: [
+                    "+",
+                    Q
+                  ] }),
+                  /* @__PURE__ */ i(
+                    $e,
+                    {
+                      "aria-hidden": "true",
+                      className: [
+                        Ze[u],
+                        "ds:shrink-0 ds:text-muted-foreground",
+                        "ds:transition-transform ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+                        D ? "ds:rotate-180" : ""
+                      ].join(" ")
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ i(V.Portal, { children: /* @__PURE__ */ i(
+              V.Content,
+              {
+                sideOffset: 6,
+                align: "start",
+                className: Ge,
+                children: /* @__PURE__ */ f(b, { filter: ke, shouldFilter: !0, loop: !0, label: X, children: [
+                  /* @__PURE__ */ i(
+                    b.Input,
+                    {
+                      asChild: !0,
+                      value: me,
+                      onValueChange: U,
+                      children: /* @__PURE__ */ i(
+                        "input",
+                        {
+                          "data-phone-country-search": "true",
+                          type: "text",
+                          autoComplete: "off",
+                          autoCorrect: "off",
+                          spellCheck: !1,
+                          placeholder: v(
+                            "ui.inputs.phone.searchCountry",
+                            "Search countries…"
+                          ),
+                          className: Oe
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ f(b.List, { className: Ue, children: [
+                    /* @__PURE__ */ i(b.Empty, { className: Ye, children: v("ui.inputs.phone.noCountryFound", "No country found") }),
+                    N.length > 0 ? /* @__PURE__ */ i(
+                      b.Group,
+                      {
+                        heading: /* @__PURE__ */ i("span", { className: oe, children: v("ui.inputs.phone.popularCountries", "Popular") }),
+                        children: N.map(ee)
+                      }
+                    ) : null,
+                    /* @__PURE__ */ i(
+                      b.Group,
+                      {
+                        heading: N.length > 0 ? /* @__PURE__ */ i("span", { className: oe, children: v("ui.inputs.phone.allCountries", "All countries") }) : void 0,
+                        children: Ne.map(ee)
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ i(
+            "input",
+            {
+              ref: he,
+              id: ge,
+              name: ce,
+              type: "tel",
+              inputMode: "tel",
+              autoComplete: "tel-national",
+              value: O,
+              placeholder: Ce,
+              disabled: Y,
+              readOnly: _,
+              required: be,
+              "aria-label": pe,
+              "aria-describedby": ve,
+              "aria-invalid": Z || void 0,
+              onChange: xe,
+              className: _e({ size: u })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+tt.displayName = "PhoneInput";
+export {
+  tt as P,
+  _e as a,
+  He as c,
+  qe as p
+};
+//# sourceMappingURL=phone-input-C8Op4sEc.js.map