@alfadocs/ui-kit-debug 0.70.0 → 0.72.0

package/dist/_chunks/phone-input-DjU-XmO_.js

@@ -1,580 +0,0 @@
-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-BX_NP2Yh.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-DjU-XmO_.js.map