@alfadocs/ui-kit 0.1.10 → 0.2.0

package/dist/_chunks/{payment-form-BWaXas8z.js → payment-form-C3vT_npe.js}

@@ -1,20 +1,21 @@
-import { jsx as n, jsxs as l, Fragment as te } from "react/jsx-runtime";
-import { forwardRef as se, useState as C, useEffect as T, useRef as V, useImperativeHandle as ae, useMemo as Z, useId as oe, useCallback as ie } from "react";
-import { c as I } from "./index-D2ZczOXr.js";
-import { useTranslation as $ } from "react-i18next";
-import { S as J } from "./spinner-GCcv67vh.js";
-import { A as W } from "./alert-BlOUMkXj.js";
+import { jsx as t, jsxs as m, Fragment as ne } from "react/jsx-runtime";
+import { forwardRef as se, useState as E, useEffect as R, useRef as V, useMemo as j, useImperativeHandle as ae, useId as oe, useCallback as ie } from "react";
+import { c as z } from "./index-D2ZczOXr.js";
+import { useTranslation as q } from "react-i18next";
+import { S as J } from "./spinner-DLaYfLPl.js";
+import { A as W } from "./alert-B1sj8Ss0.js";
 import { loadStripe as de } from "@stripe/stripe-js";
-import { Elements as ce, useStripe as le, useElements as ue, PaymentElement as me, AddressElement as pe } from "@stripe/react-stripe-js";
+import { Elements as ce, useStripe as le, useElements as me, PaymentElement as ue, AddressElement as pe } from "@stripe/react-stripe-js";
+import { u as fe } from "./registry-C9nwlNyL.js";
 function Y() {
   return typeof document < "u" && typeof window < "u";
 }
-function j(r) {
+function B(r) {
   if (!Y())
     return { theme: "stripe" };
-  const t = r ?? document.documentElement, s = getComputedStyle(t), e = (a) => s.getPropertyValue(a).trim();
+  const n = r ?? document.documentElement, s = getComputedStyle(n), e = (a) => s.getPropertyValue(a).trim();
   return {
-    theme: t.classList.contains("theme-dark") ? "night" : "stripe",
+    theme: n.classList.contains("theme-dark") ? "night" : "stripe",
     variables: {
       colorPrimary: e("--primary"),
       colorBackground: e("--background"),
@@ -68,20 +69,46 @@ function j(r) {
     }
   };
 }
-function fe(r, t) {
+function be(r, n) {
   if (!Y()) return () => {
   };
-  const s = document.documentElement, e = () => r(j(t)), i = new MutationObserver(e);
+  const s = document.documentElement, e = () => r(B(n)), i = new MutationObserver(e);
   i.observe(s, {
     attributes: !0,
     attributeFilter: ["class", "dir", "lang"]
   });
-  const a = window.matchMedia("(prefers-color-scheme: dark)"), p = window.matchMedia("(prefers-reduced-motion: reduce)");
-  return a.addEventListener("change", e), p.addEventListener("change", e), () => {
-    i.disconnect(), a.removeEventListener("change", e), p.removeEventListener("change", e);
+  const a = window.matchMedia("(prefers-color-scheme: dark)"), f = window.matchMedia("(prefers-reduced-motion: reduce)");
+  return a.addEventListener("change", e), f.addEventListener("change", e), () => {
+    i.disconnect(), a.removeEventListener("change", e), f.removeEventListener("change", e);
   };
 }
-const be = /* @__PURE__ */ new Set([
+const ge = {
+  id: "payment-form",
+  capabilities: ["submit"],
+  state: {},
+  actions: {
+    submit: {
+      safety: "destructive",
+      description: "Submit the payment. Charges the configured payment method — irreversible.",
+      invoke: (r) => r.submit()
+    },
+    reset: {
+      safety: "destructive",
+      description: "Reset the form to its initial state. Loses any in-progress input.",
+      invoke: (r) => {
+        r.reset();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "payment-form" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, ye = /* @__PURE__ */ new Set([
   "BIF",
   "CLP",
   "DJF",
@@ -100,8 +127,8 @@ const be = /* @__PURE__ */ new Set([
   "XOF",
   "XPF"
 ]);
-function B(r, t, s) {
-  const e = t.toUpperCase(), i = be.has(e) ? r : r / 100;
+function $(r, n, s) {
+  const e = n.toUpperCase(), i = ye.has(e) ? r : r / 100;
   try {
     return new Intl.NumberFormat(s, {
       style: "currency",
@@ -114,12 +141,12 @@ function B(r, t, s) {
     }).format(i);
   }
 }
-function ge(r) {
+function ve(r) {
   if (r === void 0) return null;
-  const t = r.trim();
-  if (t === "" || typeof window > "u") return null;
+  const n = r.trim();
+  if (n === "" || typeof window > "u") return null;
   try {
-    const s = new URL(t, window.location.href);
+    const s = new URL(n, window.location.href);
     return !(/* @__PURE__ */ new Set(["http:", "https:"])).has(s.protocol) || s.origin !== window.location.origin ? null : s.toString();
   } catch {
     return null;
@@ -128,7 +155,7 @@ function ge(r) {
 function X(r) {
   return r && r.replace(/\d{4,}/g, "****");
 }
-function ve(r) {
+function he(r) {
   switch (r) {
     case "incorrect_number":
     case "invalid_number":
@@ -154,7 +181,7 @@ function ve(r) {
       return "payment.error.generic";
   }
 }
-const ye = I(
+const we = z(
   [
     "ds:payment-form-alfadocs ds:flex ds:flex-col",
     "ds:gap-[var(--spacing-md)]",
@@ -163,14 +190,11 @@ const ye = I(
     "ds:p-[var(--spacing-md)]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), U = I(
+), T = z(
   ["ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"].join(" ")
-), S = I(
-  [
-    "type-label",
-    "ds:text-[var(--foreground)]"
-  ].join(" ")
-), Q = I(
+), _ = z(
+  ["type-label", "ds:text-[var(--foreground)]"].join(" ")
+), Q = z(
   [
     "ds:flex ds:items-baseline ds:justify-between",
     "ds:gap-[var(--spacing-sm)]",
@@ -180,7 +204,7 @@ const ye = I(
     "ds:rounded-[var(--radius-sm)]",
     "ds:text-[var(--foreground)]"
   ].join(" ")
-), ee = I(
+), ee = z(
   [
     "ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
     "ds:min-block-size-[var(--min-target-size)]",
@@ -200,156 +224,143 @@ const ye = I(
     "ds:aria-busy:cursor-wait"
   ].join(" ")
 );
-function he(r) {
+function xe(r) {
   const {
-    amount: t,
+    amount: n,
     currency: s,
     locale: e,
     billingAddress: i,
     returnUrl: a,
-    onSuccess: p,
-    onError: x
-  } = r, { t: o } = $(), N = le(), E = ue(), v = oe(), f = Z(
-    () => `pay-${v.replace(/[^a-zA-Z0-9-_]/g, "")}`,
-    [v]
-  ), F = `${f}-payment`, L = `${f}-address`, y = `${f}-error`, [u, h] = C(!1), [P, A] = C(!1), [_, w] = C(null), [b, d] = C(""), M = V(p), c = V(x);
-  T(() => {
-    M.current = p, c.current = x;
-  }, [p, x]);
+    onSuccess: f,
+    onError: N
+  } = r, { t: o } = q(), k = le(), S = me(), y = oe(), b = j(
+    () => `pay-${y.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+    [y]
+  ), F = `${b}-payment`, L = `${b}-address`, v = `${b}-error`, [u, h] = E(!1), [A, P] = E(!1), [w, x] = E(null), [U, d] = E(""), c = V(f), l = V(N);
+  R(() => {
+    c.current = f, l.current = N;
+  }, [f, N]);
   const D = ie(
-    async (m) => {
-      var q, G, O, K;
-      if (m && m.preventDefault(), !N || !E || u) return;
-      h(!0), w(null), d("");
-      const k = ge(a);
-      if (a !== void 0 && k === null) {
-        w("payment.error.invalidReturnUrl"), d(o("payment.error.invalidReturnUrl")), (q = c.current) == null || q.call(c, {
+    async (p) => {
+      var G, H, O, K;
+      if (p && p.preventDefault(), !k || !S || u) return;
+      h(!0), x(null), d("");
+      const C = ve(a);
+      if (a !== void 0 && C === null) {
+        x("payment.error.invalidReturnUrl"), d(o("payment.error.invalidReturnUrl")), (G = l.current) == null || G.call(l, {
           code: "invalid_return_url",
           translatedMessage: o("payment.error.invalidReturnUrl")
         }), h(!1);
         return;
       }
       try {
-        const g = await N.confirmPayment({
-          elements: E,
-          confirmParams: k ? { return_url: k } : {},
+        const g = await k.confirmPayment({
+          elements: S,
+          confirmParams: C ? { return_url: C } : {},
           redirect: "if_required"
         });
         if (g.error) {
-          const R = g.error.code ?? "generic", z = ve(R), ne = X(g.error.message ?? "");
-          w(z), d(o(z)), (G = c.current) == null || G.call(c, {
-            code: R,
-            translatedMessage: ne || o(z)
+          const M = g.error.code ?? "generic", I = he(M), te = X(g.error.message ?? "");
+          x(I), d(o(I)), (H = l.current) == null || H.call(l, {
+            code: M,
+            translatedMessage: te || o(I)
           });
           return;
         }
-        g.paymentIntent && ((O = M.current) == null || O.call(M, g.paymentIntent.id));
+        g.paymentIntent && ((O = c.current) == null || O.call(c, g.paymentIntent.id));
       } catch (g) {
-        const R = g instanceof Error ? g.message : "", z = X(R);
-        w("payment.error.generic"), d(o("payment.error.generic")), (K = c.current) == null || K.call(c, {
+        const M = g instanceof Error ? g.message : "", I = X(M);
+        x("payment.error.generic"), d(o("payment.error.generic")), (K = l.current) == null || K.call(l, {
           code: "unexpected",
-          translatedMessage: z || o("payment.error.generic")
+          translatedMessage: I || o("payment.error.generic")
         });
       } finally {
         h(!1);
       }
     },
-    [N, E, u, a, o]
+    [k, S, u, a, o]
   );
-  T(() => {
-    const m = document.getElementById(f);
-    if (!m) return;
-    const k = () => {
+  R(() => {
+    const p = document.getElementById(b);
+    if (!p) return;
+    const C = () => {
       D();
     };
-    return m.addEventListener("payment-form:submit", k), () => m.removeEventListener("payment-form:submit", k);
-  }, [f, D]);
-  const re = !N || !E || !P || u;
-  return /* @__PURE__ */ n(
+    return p.addEventListener("payment-form:submit", C), () => p.removeEventListener("payment-form:submit", C);
+  }, [b, D]);
+  const re = !k || !S || !A || u;
+  return /* @__PURE__ */ t(
     "form",
     {
-      id: f,
+      id: b,
       onSubmit: D,
       "aria-label": o("payment.ariaLabel"),
       "aria-busy": u || void 0,
       noValidate: !0,
-      children: /* @__PURE__ */ l("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
-        /* @__PURE__ */ l("div", { className: Q(), children: [
-          /* @__PURE__ */ n("span", { className: S(), children: o("payment.amountLabel") }),
-          /* @__PURE__ */ n(
-            "span",
-            {
-              className: "type-title-card",
-              "data-testid": "payment-amount",
-              children: B(t, s, e)
-            }
-          )
+      children: /* @__PURE__ */ m("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+        /* @__PURE__ */ m("div", { className: Q(), children: [
+          /* @__PURE__ */ t("span", { className: _(), children: o("payment.amountLabel") }),
+          /* @__PURE__ */ t("span", { className: "type-title-card", "data-testid": "payment-amount", children: $(n, s, e) })
         ] }),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ m(
           "label",
           {
             htmlFor: F,
-            className: U(),
+            className: T(),
             "data-testid": "payment-field",
             children: [
-              /* @__PURE__ */ n("span", { className: S(), children: o("payment.fields.card") }),
-              /* @__PURE__ */ n(
-                me,
+              /* @__PURE__ */ t("span", { className: _(), children: o("payment.fields.card") }),
+              /* @__PURE__ */ t(
+                ue,
                 {
                   id: F,
                   options: {
                     layout: { type: "accordion", defaultCollapsed: !1 }
                   },
-                  onChange: (m) => {
-                    A(m.complete === !0), m.complete && (w(null), d(""));
+                  onChange: (p) => {
+                    P(p.complete === !0), p.complete && (x(null), d(""));
                   }
                 }
               )
             ]
           }
         ),
-        i ? /* @__PURE__ */ l(
+        i ? /* @__PURE__ */ m(
           "label",
           {
             htmlFor: L,
-            className: U(),
+            className: T(),
             "data-testid": "payment-address",
             children: [
-              /* @__PURE__ */ n("span", { className: S(), children: o("payment.billingAddress") }),
-              /* @__PURE__ */ n(
-                pe,
-                {
-                  id: L,
-                  options: { mode: "billing" }
-                }
-              )
+              /* @__PURE__ */ t("span", { className: _(), children: o("payment.billingAddress") }),
+              /* @__PURE__ */ t(pe, { id: L, options: { mode: "billing" } })
             ]
           }
         ) : null,
-        _ ? /* @__PURE__ */ n(
+        w ? /* @__PURE__ */ t(
           W,
           {
-            id: y,
+            id: v,
             variant: "error",
             live: "polite",
             "data-testid": "payment-error",
-            children: /* @__PURE__ */ n(W.Description, { children: b })
+            children: /* @__PURE__ */ t(W.Description, { children: U })
           }
         ) : null,
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           "button",
           {
             type: "submit",
             "aria-disabled": re || void 0,
             "aria-busy": u || void 0,
-            "aria-describedby": _ ? y : void 0,
+            "aria-describedby": w ? v : void 0,
             className: ee(),
             "data-testid": "payment-submit",
-            children: u ? /* @__PURE__ */ l(te, { children: [
-              /* @__PURE__ */ n(J, { size: "sm", label: o("payment.processing") }),
-              /* @__PURE__ */ n("span", { children: o("payment.processing") })
-            ] }) : /* @__PURE__ */ n("span", { children: o("payment.submit", {
-              amount: B(t, s, e)
+            children: u ? /* @__PURE__ */ m(ne, { children: [
+              /* @__PURE__ */ t(J, { size: "sm", label: o("payment.processing") }),
+              /* @__PURE__ */ t("span", { children: o("payment.processing") })
+            ] }) : /* @__PURE__ */ t("span", { children: o("payment.submit", {
+              amount: $(n, s, e)
             }) })
           }
         )
@@ -357,7 +368,7 @@ function he(r) {
     }
   );
 }
-const H = /* @__PURE__ */ new Set([
+const Z = /* @__PURE__ */ new Set([
   "auto",
   "ar",
   "bg",
@@ -409,36 +420,34 @@ const H = /* @__PURE__ */ new Set([
   "zh-HK",
   "zh-TW"
 ]);
-function we(r) {
+function Ne(r) {
   if (!r) return "auto";
-  const t = r === "cn" ? "zh" : r;
-  if (H.has(t))
-    return t;
-  const s = t.split("-")[0];
-  return H.has(s) ? s : "auto";
+  const n = r === "cn" ? "zh" : r;
+  if (Z.has(n))
+    return n;
+  const s = n.split("-")[0];
+  return Z.has(s) ? s : "auto";
 }
-const xe = se(
+const ke = se(
   ({
     id: r,
-    clientSecret: t,
+    clientSecret: n,
     publishableKey: s,
     currency: e,
     amount: i,
     onSuccess: a,
-    onError: p,
-    billingAddress: x = !1,
+    onError: f,
+    billingAddress: N = !1,
     locale: o,
-    ariaLabel: N,
-    returnUrl: E,
-    stripePromise: v,
-    className: f
+    ariaLabel: k,
+    returnUrl: S,
+    stripePromise: y,
+    className: b
   }, F) => {
-    const { i18n: L } = $(), y = we(o ?? L.language ?? "en"), [u, h] = C(
-      v ?? null
-    );
-    T(() => {
-      if (v !== void 0) {
-        h(v);
+    const { i18n: L } = q(), v = Ne(o ?? L.language ?? "en"), [u, h] = E(y ?? null);
+    R(() => {
+      if (y !== void 0) {
+        h(y);
         return;
       }
       if (!s) {
@@ -446,96 +455,95 @@ const xe = se(
         return;
       }
       h(de(s));
-    }, [v, s]);
-    const [P, A] = C(
-      () => j()
+    }, [y, s]);
+    const [A, P] = E(
+      () => B()
     );
-    T(() => (A(j()), fe(A)), []);
-    const _ = V(null);
-    ae(
-      F,
+    R(() => (P(B()), be(P)), []);
+    const w = V(null), x = j(
       () => ({
         submit: async () => {
-          var d;
-          const b = (d = _.current) == null ? void 0 : d.querySelector("form");
-          b && b.dispatchEvent(
+          var c;
+          const d = (c = w.current) == null ? void 0 : c.querySelector("form");
+          d && d.dispatchEvent(
             new CustomEvent("payment-form:submit", { bubbles: !0 })
           );
         },
         reset: () => {
-          var d;
-          const b = (d = _.current) == null ? void 0 : d.querySelector("form");
-          b instanceof HTMLFormElement && b.reset();
+          var c;
+          const d = (c = w.current) == null ? void 0 : c.querySelector("form");
+          d instanceof HTMLFormElement && d.reset();
         }
       }),
       []
     );
-    const w = Z(
+    ae(F, () => w.current, []), fe(ge, x, r);
+    const U = j(
       () => ({
-        clientSecret: t,
-        appearance: P,
-        locale: y
+        clientSecret: n,
+        appearance: A,
+        locale: v
       }),
-      [t, P, y]
+      [n, A, v]
     );
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ t(
       "div",
       {
-        ref: _,
-        "aria-label": N,
-        className: [ye(), f].filter(Boolean).join(" "),
+        ref: w,
+        "aria-label": k,
+        className: [we(), b].filter(Boolean).join(" "),
         "data-component": "payment-form",
         "data-component-id": r,
         "data-testid": "payment-form-root",
-        children: u && t ? /* @__PURE__ */ n(
+        children: u && n ? /* @__PURE__ */ t(
           ce,
           {
             stripe: u,
-            options: w,
-            children: /* @__PURE__ */ n(
-              he,
+            options: U,
+            children: /* @__PURE__ */ t(
+              xe,
               {
                 amount: i,
                 currency: e,
-                locale: y,
-                billingAddress: x,
-                returnUrl: E,
+                locale: v,
+                billingAddress: N,
+                returnUrl: S,
                 onSuccess: a,
-                onError: p
+                onError: f
               }
             )
           },
-          t
-        ) : /* @__PURE__ */ n(
-          Ne,
+          n
+        ) : /* @__PURE__ */ t(
+          Se,
           {
             amount: i,
             currency: e,
-            locale: y,
-            billingAddress: x
+            locale: v,
+            billingAddress: N
           }
         )
       }
     );
   }
 );
-xe.displayName = "PaymentForm";
-function Ne(r) {
-  const { amount: t, currency: s, locale: e, billingAddress: i } = r, { t: a } = $();
-  return /* @__PURE__ */ l(
+ke.displayName = "PaymentForm";
+function Se(r) {
+  const { amount: n, currency: s, locale: e, billingAddress: i } = r, { t: a } = q();
+  return /* @__PURE__ */ m(
     "div",
     {
       className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
       "data-testid": "payment-skeleton",
       "aria-busy": "true",
       children: [
-        /* @__PURE__ */ l("div", { className: Q(), children: [
-          /* @__PURE__ */ n("span", { className: S(), children: a("payment.amountLabel") }),
-          /* @__PURE__ */ n("span", { className: "type-title-card", children: B(t, s, e) })
+        /* @__PURE__ */ m("div", { className: Q(), children: [
+          /* @__PURE__ */ t("span", { className: _(), children: a("payment.amountLabel") }),
+          /* @__PURE__ */ t("span", { className: "type-title-card", children: $(n, s, e) })
         ] }),
-        /* @__PURE__ */ l("div", { className: U(), children: [
-          /* @__PURE__ */ n("span", { className: S(), children: a("payment.fields.card") }),
-          /* @__PURE__ */ n(
+        /* @__PURE__ */ m("div", { className: T(), children: [
+          /* @__PURE__ */ t("span", { className: _(), children: a("payment.fields.card") }),
+          /* @__PURE__ */ t(
             "div",
             {
               className: "ds:min-block-size-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--muted)]",
@@ -543,9 +551,9 @@ function Ne(r) {
             }
           )
         ] }),
-        i ? /* @__PURE__ */ l("div", { className: U(), children: [
-          /* @__PURE__ */ n("span", { className: S(), children: a("payment.billingAddress") }),
-          /* @__PURE__ */ n(
+        i ? /* @__PURE__ */ m("div", { className: T(), children: [
+          /* @__PURE__ */ t("span", { className: _(), children: a("payment.billingAddress") }),
+          /* @__PURE__ */ t(
             "div",
             {
               className: "ds:min-block-size-[calc(var(--min-target-size)*2)] ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--muted)]",
@@ -553,7 +561,7 @@ function Ne(r) {
             }
           )
         ] }) : null,
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ m(
           "button",
           {
             type: "button",
@@ -561,8 +569,8 @@ function Ne(r) {
             className: ee(),
             disabled: !0,
             children: [
-              /* @__PURE__ */ n(J, { size: "sm", label: a("payment.processing") }),
-              /* @__PURE__ */ n("span", { children: a("payment.processing") })
+              /* @__PURE__ */ t(J, { size: "sm", label: a("payment.processing") }),
+              /* @__PURE__ */ t("span", { children: a("payment.processing") })
             ]
           }
         )
@@ -571,11 +579,12 @@ function Ne(r) {
   );
 }
 export {
-  xe as P,
-  ye as a,
+  ke as P,
+  we as a,
   X as b,
-  ve as c,
-  B as f,
+  he as c,
+  $ as f,
+  ge as p,
   ee as s
 };
-//# sourceMappingURL=payment-form-BWaXas8z.js.map
+//# sourceMappingURL=payment-form-C3vT_npe.js.map