@alfadocs/ui-kit 1.0.0 → 1.2.0

package/dist/_chunks/payment-automation-upsell-C4LIw1iQ.js

@@ -0,0 +1,305 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { forwardRef as D, useId as r } from "react";
+import { A as p } from "./alert-DS22ha1n.js";
+import { B as P } from "./badge-DCOqV9mI.js";
+import { B as y } from "./benefit-card-DB1Kdrmc.js";
+import { B as C } from "./button-CPGiR_bH.js";
+import { C as d } from "./card-DPmk26CL.js";
+import { L as n } from "./list-DgE1xWBM.js";
+import { S as U } from "./stat-Bs80Z6Yv.js";
+import { C as f, R as q } from "./receipt-euro-C6k4Gzhr.js";
+import { C as b } from "./circle-check-BN6rz4NV.js";
+import { L as F } from "./lock-ClAFG1gy.js";
+import { S as $ } from "./send-C5kDJ-Mz.js";
+import { c as I } from "./createLucideIcon-DhHxpK9K.js";
+import { C as O } from "./calendar-clock-hbObjfGY.js";
+import { R as W } from "./refresh-cw-DnI0cLFC.js";
+import { T as G } from "./triangle-alert-CBnO6nq_.js";
+import { C as J } from "./clock-Drd4Wtis.js";
+import { S as K } from "./shield-check-DCJALLVh.js";
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Q = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
+], V = I("arrow-right", Q);
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const X = [
+  ["path", { d: "m17 2 4 4-4 4", key: "nntrym" }],
+  ["path", { d: "M3 11v-1a4 4 0 0 1 4-4h14", key: "84bu3i" }],
+  ["path", { d: "m7 22-4-4 4-4", key: "1wqhfi" }],
+  ["path", { d: "M21 13v1a4 4 0 0 1-4 4H3", key: "1rx37r" }]
+], Y = I("repeat", X), Z = [
+  // eslint-disable-next-line no-restricted-syntax -- sanctioned PAU marketing serif display heading (constraint 10)
+  "ds:[font-family:var(--font-serif)] ds:italic ds:font-semibold ds:leading-tight",
+  "ds:text-[color:var(--primary)]"
+].join(" "), w = [
+  /* @__PURE__ */ e(O, { "aria-hidden": "true", className: "ds:size-5" }, "0"),
+  /* @__PURE__ */ e(f, { "aria-hidden": "true", className: "ds:size-5" }, "1"),
+  /* @__PURE__ */ e(W, { "aria-hidden": "true", className: "ds:size-5" }, "2"),
+  /* @__PURE__ */ e(Y, { "aria-hidden": "true", className: "ds:size-5" }, "3")
+], z = ["violet", "purple", "magenta"], ee = {
+  paid: {
+    variant: "success",
+    icon: /* @__PURE__ */ e(b, { "aria-hidden": "true", className: "ds:size-3.5" })
+  },
+  authorized: {
+    variant: "info",
+    icon: /* @__PURE__ */ e(K, { "aria-hidden": "true", className: "ds:size-3.5" })
+  },
+  pending: {
+    variant: "warning",
+    icon: /* @__PURE__ */ e(J, { "aria-hidden": "true", className: "ds:size-3.5" })
+  },
+  overdue: {
+    variant: "error",
+    icon: /* @__PURE__ */ e(G, { "aria-hidden": "true", className: "ds:size-3.5" })
+  }
+}, ae = D(
+  ({
+    role: k = "owner",
+    labels: a,
+    steps: h,
+    features: l,
+    metrics: c,
+    previewRows: S,
+    locale: T = "it-IT",
+    currency: A = "EUR",
+    onActivate: L,
+    onNotifyAdmin: R,
+    className: B,
+    ...H
+  }, E) => {
+    const g = r(), u = r(), o = r(), m = r(), v = r(), _ = new Intl.NumberFormat(T, {
+      style: "currency",
+      currency: A
+    }), M = Math.min(Math.max(h.length, 1), 4), x = Math.ceil(l.length / 2), j = [
+      l.slice(0, x),
+      l.slice(x)
+    ].filter((s) => s.length > 0);
+    return /* @__PURE__ */ i(
+      "section",
+      {
+        ref: E,
+        "data-component": "payment-automation-upsell",
+        "aria-labelledby": g,
+        className: [
+          "ds:mx-auto ds:flex ds:w-full ds:max-w-[80rem] ds:flex-col ds:gap-[var(--spacing-lg)]",
+          "ds:text-[color:var(--foreground)]",
+          B ?? ""
+        ].filter(Boolean).join(" "),
+        ...H,
+        children: [
+          /* @__PURE__ */ e(d, { variant: "elevated", children: /* @__PURE__ */ i(d.Body, { className: "ds:relative ds:flex ds:flex-col ds:gap-[var(--spacing-sm)] ds:overflow-hidden ds:sm:flex-row ds:sm:items-center ds:sm:justify-between ds:sm:gap-[var(--spacing-lg)]", children: [
+            /* @__PURE__ */ i("div", { className: "ds:flex ds:max-w-prose ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+              a.eyebrow ? /* @__PURE__ */ i("span", { className: "type-eyebrow ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)] ds:text-[color:var(--accent)]", children: [
+                /* @__PURE__ */ e(f, { "aria-hidden": "true", className: "ds:size-4" }),
+                a.eyebrow
+              ] }) : null,
+              /* @__PURE__ */ e(
+                "h1",
+                {
+                  id: g,
+                  className: `${Z} ds:text-[length:var(--font-size-4xl)]`,
+                  children: a.title
+                }
+              ),
+              /* @__PURE__ */ e("p", { className: "type-body ds:text-[color:var(--muted-foreground)]", children: a.subtitle })
+            ] }),
+            /* @__PURE__ */ e(
+              f,
+              {
+                "aria-hidden": "true",
+                className: "ds:pointer-events-none ds:hidden ds:size-28 ds:shrink-0 ds:text-[color:var(--accent)] ds:opacity-15 ds:lg:block"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ i(
+            "section",
+            {
+              "aria-labelledby": u,
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+              children: [
+                /* @__PURE__ */ e("h2", { id: u, className: "type-title-section", children: a.howItWorksHeading }),
+                /* @__PURE__ */ e(y.Row, { columns: M, children: h.map((s, t) => /* @__PURE__ */ e(
+                  y,
+                  {
+                    step: t + 1,
+                    accent: z[t % z.length],
+                    icon: s.icon ?? w[t % w.length],
+                    title: s.title,
+                    children: s.description
+                  },
+                  s.id
+                )) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(
+            "section",
+            {
+              "aria-labelledby": o,
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+              children: [
+                /* @__PURE__ */ i("div", { className: "ds:flex ds:items-baseline ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+                  /* @__PURE__ */ e("h2", { id: o, className: "type-title-section", children: a.previewHeading }),
+                  a.previewCaption ? /* @__PURE__ */ e("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)]", children: a.previewCaption }) : null
+                ] }),
+                /* @__PURE__ */ e(d, { variant: "elevated", children: /* @__PURE__ */ e(d.Body, { className: "ds:p-[var(--spacing-lg)]", children: /* @__PURE__ */ e(
+                  n,
+                  {
+                    divider: "spaced",
+                    density: "relaxed",
+                    "aria-labelledby": o,
+                    children: S.map((s) => {
+                      const t = ee[s.status];
+                      return /* @__PURE__ */ e(
+                        n.Item,
+                        {
+                          title: s.title,
+                          description: s.meta,
+                          leading: /* @__PURE__ */ e("span", { className: "ds:flex ds:size-10 ds:items-center ds:justify-center ds:rounded-full ds:bg-[color:var(--muted)] ds:text-[color:var(--accent)]", children: /* @__PURE__ */ e(
+                            q,
+                            {
+                              "aria-hidden": "true",
+                              className: "ds:size-5"
+                            }
+                          ) }),
+                          trailing: /* @__PURE__ */ i("span", { className: "ds:flex ds:flex-col ds:items-end ds:gap-[var(--spacing-2xs)]", children: [
+                            /* @__PURE__ */ e("span", { className: "type-metric ds:text-[color:var(--foreground)] ds:[--type-metric-size:var(--font-size-xl)]", children: _.format(s.amountCents / 100) }),
+                            /* @__PURE__ */ e(
+                              P,
+                              {
+                                variant: t.variant,
+                                size: "sm",
+                                leading: t.icon,
+                                children: s.statusLabel
+                              }
+                            )
+                          ] })
+                        },
+                        s.id
+                      );
+                    })
+                  }
+                ) }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(
+            "section",
+            {
+              "aria-labelledby": m,
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]",
+              children: [
+                /* @__PURE__ */ i("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
+                  /* @__PURE__ */ e("h2", { id: m, className: "type-title-section", children: a.ctaCardTitle }),
+                  a.ctaCardSubtitle ? /* @__PURE__ */ e("p", { className: "type-body ds:text-[color:var(--muted-foreground)]", children: a.ctaCardSubtitle }) : null
+                ] }),
+                c && c.length > 0 ? /* @__PURE__ */ e("div", { className: "ds:grid ds:gap-[var(--spacing-md)] ds:[grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))]", children: c.map((s) => /* @__PURE__ */ e(
+                  U,
+                  {
+                    label: s.label,
+                    value: s.value,
+                    variant: "elevated",
+                    size: "lg",
+                    intent: "primary",
+                    className: "ds:[--type-metric-family:var(--font-serif)]"
+                  },
+                  s.id
+                )) }) : null,
+                /* @__PURE__ */ e(d, { variant: "elevated", children: /* @__PURE__ */ i(d.Body, { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-lg)]", children: [
+                  a.featuresHeading ? /* @__PURE__ */ e(
+                    "span",
+                    {
+                      id: v,
+                      className: "type-eyebrow ds:text-[color:var(--muted-foreground)]",
+                      children: a.featuresHeading
+                    }
+                  ) : null,
+                  /* @__PURE__ */ e("div", { className: "ds:grid ds:gap-x-[var(--spacing-2xl)] ds:gap-y-[var(--spacing-sm)] ds:sm:grid-cols-2", children: j.map((s, t) => /* @__PURE__ */ e(
+                    n,
+                    {
+                      divider: "spaced",
+                      density: "default",
+                      "aria-labelledby": a.featuresHeading ? v : m,
+                      children: s.map((N) => /* @__PURE__ */ e(
+                        n.Item,
+                        {
+                          title: N.label,
+                          leading: /* @__PURE__ */ e(
+                            b,
+                            {
+                              "aria-hidden": "true",
+                              className: "ds:size-5 ds:text-[color:var(--success)]"
+                            }
+                          )
+                        },
+                        N.id
+                      ))
+                    },
+                    t
+                  )) })
+                ] }) }),
+                /* @__PURE__ */ i("div", { className: "ds:mx-auto ds:flex ds:w-full ds:max-w-[28rem] ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+                  k === "member" ? /* @__PURE__ */ i("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+                    a.memberNoticeTitle || a.memberNoticeDescription ? /* @__PURE__ */ i(
+                      p,
+                      {
+                        variant: "info",
+                        live: "off",
+                        icon: /* @__PURE__ */ e(F, { "aria-hidden": "true", className: "ds:size-4" }),
+                        children: [
+                          a.memberNoticeTitle ? /* @__PURE__ */ e(p.Title, { as: "p", children: a.memberNoticeTitle }) : null,
+                          a.memberNoticeDescription ? /* @__PURE__ */ e(p.Description, { children: a.memberNoticeDescription }) : null
+                        ]
+                      }
+                    ) : null,
+                    /* @__PURE__ */ e(
+                      C,
+                      {
+                        intent: "secondary",
+                        size: "lg",
+                        startIcon: /* @__PURE__ */ e($, {}),
+                        flipIconInRtl: !0,
+                        onClick: R,
+                        className: "ds:w-full",
+                        children: a.notifyAdminLabel ?? a.activateLabel
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ e(
+                    C,
+                    {
+                      intent: "primary",
+                      size: "lg",
+                      endIcon: /* @__PURE__ */ e(V, {}),
+                      flipIconInRtl: !0,
+                      onClick: L,
+                      className: "ds:w-full",
+                      children: a.activateLabel
+                    }
+                  ),
+                  a.priceNote ? /* @__PURE__ */ e("p", { className: "type-meta ds:text-center ds:text-[color:var(--muted-foreground)]", children: a.priceNote }) : null
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ae.displayName = "PaymentAutomationUpsell";
+export {
+  ae as P
+};
+//# sourceMappingURL=payment-automation-upsell-C4LIw1iQ.js.map

package/dist/_chunks/{payment-form-BoGxEmGn.js → payment-form-CyKT20xZ.js}

@@ -3,7 +3,7 @@ import { forwardRef as de, useState as _, useEffect as D, useRef as K, useMemo a
 import { c as A } from "./index-D2ZczOXr.js";
 import { useTranslation as W } from "react-i18next";
 import { S as te } from "./spinner-hbwuKwMf.js";
-import { A as ee } from "./alert-Cxaqd-QO.js";
+import { A as ee } from "./alert-DS22ha1n.js";
 import { loadStripe as ue } from "@stripe/stripe-js";
 import { Elements as pe, useStripe as fe, useElements as be, PaymentElement as ye, AddressElement as ge } from "@stripe/react-stripe-js";
 import { u as ve } from "./registry-DvAUVLHh.js";
@@ -687,4 +687,4 @@ export {
   we as p,
   se as s
 };
-//# sourceMappingURL=payment-form-BoGxEmGn.js.map
+//# sourceMappingURL=payment-form-CyKT20xZ.js.map