asterui 0.12.49 → 0.12.50

package/dist/components/Tour.js

@@ -1,13 +1,13 @@
-import { jsx as l, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as St, useState as H, useRef as K, useCallback as y, useImperativeHandle as jt, useEffect as L } from "react";
-import { createPortal as Dt } from "react-dom";
-const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t, c, i, o, k) => {
+import { jsx as s, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as qt, useState as K, useRef as M, useCallback as y, useImperativeHandle as Wt, useEffect as T } from "react";
+import { createPortal as Ft } from "react-dom";
+const D = "btn", O = "btn-ghost", V = "btn-sm", Ht = "btn-primary", Kt = "btn-xs", Mt = "btn-circle", it = (t) => t ? typeof t == "function" ? t() : t.current : null, Ot = (t, c, i, o, k) => {
   if (!t || c === "center")
     return {
       top: window.innerHeight / 2 - i.height / 2,
       left: window.innerWidth / 2 - i.width / 2
     };
-  const a = window.scrollY, d = window.scrollX, D = typeof k == "object" && k.pointAtCenter;
+  const a = window.scrollY, d = window.scrollX, q = typeof k == "object" && k.pointAtCenter;
   return {
     top: {
       top: t.top + a - i.height - o,
@@ -62,7 +62,7 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
       left: window.innerWidth / 2 - i.width / 2
     }
   }[c];
-}, Wt = (t) => ({
+}, Vt = (t) => ({
   top: { position: "bottom-0 left-1/2", transform: "translate(-50%, 50%) rotate(45deg)" },
   topLeft: { position: "bottom-0 left-4", transform: "translate(0, 50%) rotate(45deg)" },
   topRight: { position: "bottom-0 right-4", transform: "translate(0, 50%) rotate(45deg)" },
@@ -76,7 +76,7 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
   rightTop: { position: "left-0 top-4", transform: "translate(-50%, 0) rotate(45deg)" },
   rightBottom: { position: "left-0 bottom-4", transform: "translate(-50%, 0) rotate(45deg)" },
   center: { position: "hidden", transform: "" }
-})[t], Ft = /* @__PURE__ */ l("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ l("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }), Ht = St(
+})[t], Xt = /* @__PURE__ */ s("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ s("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }), Gt = qt(
   ({
     open: t = !1,
     onClose: c,
@@ -85,180 +85,180 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
     current: k,
     onChange: a,
     arrow: d = !0,
-    closeIcon: D,
-    mask: M = !0,
-    disabledInteraction: O = !1,
-    type: nt = "default",
-    gap: V = { offset: 6, radius: 2 },
-    prevButtonText: rt = "Previous",
-    nextButtonText: it = "Next",
-    finishButtonText: lt = "Finish",
-    skipButtonText: st = "Skip",
-    showSkip: at = !0,
-    showIndicators: dt = !0,
-    closeOnMaskClick: I = !0,
-    closeOnEscape: U = !0,
-    scrollIntoViewOptions: ct = !0,
-    zIndex: A = 1001,
-    indicatorsRender: X,
-    actionsRender: Y,
-    getPopupContainer: z,
+    closeIcon: q,
+    mask: X = !0,
+    disabledInteraction: G = !1,
+    type: st = "default",
+    gap: I = { offset: 6, radius: 2 },
+    prevButtonText: lt = "Previous",
+    nextButtonText: at = "Next",
+    finishButtonText: dt = "Finish",
+    skipButtonText: ct = "Skip",
+    showSkip: ft = !0,
+    showIndicators: ht = !0,
+    closeOnMaskClick: U = !0,
+    closeOnEscape: Y = !0,
+    scrollIntoViewOptions: ut = !0,
+    zIndex: L = 1001,
+    indicatorsRender: z,
+    actionsRender: _,
+    getPopupContainer: J,
     classNames: m = {},
     styles: b = {},
-    className: ft,
-    style: ht,
-    "data-testid": ut,
-    ...mt
-  }, bt) => {
-    const [pt, G] = H(0), [u, wt] = H(null), [_, gt] = H({ top: 0, left: 0 }), w = K(null), vt = K(null), $ = K(null), B = ut ?? "tour", f = (n) => `${B}-${n}`, x = k !== void 0, s = x ? k : pt, e = o[s], q = V.offset ?? 6, h = V.radius ?? 2, J = Array.isArray(q) ? q[0] : q, W = e?.arrow ?? d, g = e?.mask ?? M, yt = e?.type ?? nt, E = e?.scrollIntoViewOptions ?? ct, Q = e?.closeIcon ?? D, kt = W !== !1 && e?.placement !== "center", $t = typeof g == "object" && g.color ? g.color : "rgba(0, 0, 0, 0.5)", xt = typeof g == "object" && g.style ? g.style : {}, N = y(() => {
+    className: mt,
+    style: bt,
+    "data-testid": pt,
+    ...wt
+  }, gt) => {
+    const [vt, Q] = K(0), [u, yt] = K(null), [Z, kt] = K({ top: 0, left: 0 }), w = M(null), $t = M(null), $ = M(null), A = pt ?? "tour", f = (n) => `${A}-${n}`, B = k !== void 0, l = B ? k : vt, e = o[l], W = I.offset ?? 6, h = I.radius ?? 2, R = Array.isArray(W) ? W[0] : W, F = e?.arrow ?? d, g = e?.mask ?? X, Bt = e?.type ?? st, S = e?.scrollIntoViewOptions ?? ut, tt = e?.closeIcon ?? q, xt = F !== !1 && e?.placement !== "center", Pt = typeof g == "object" && g.color ? g.color : "rgba(0, 0, 0, 0.5)", Ct = typeof g == "object" && g.style ? g.style : {}, x = y(() => {
       if (!e) return;
-      const r = et(e.target)?.getBoundingClientRect() ?? null;
-      if (wt(r), w.current) {
-        const C = w.current.getBoundingClientRect(), S = e.placement ?? "bottom", j = qt(
+      const r = it(e.target)?.getBoundingClientRect() ?? null;
+      if (yt(r), w.current) {
+        const N = w.current.getBoundingClientRect(), E = e.placement ?? "bottom", j = Ot(
           r,
-          S,
-          C,
-          J + h,
-          W
+          E,
+          N,
+          R + h,
+          F
         );
-        gt(j);
+        kt(j);
       }
-    }, [e, J, h, W]), v = y(
+    }, [e, R, h, F]), v = y(
       (n) => {
-        n < 0 || n >= o.length || (o[s]?.onClose?.(), x || G(n), a?.(n), $.current && ($.current.textContent = `Step ${n + 1} of ${o.length}: ${typeof o[n]?.title == "string" ? o[n]?.title : ""}`));
+        n < 0 || n >= o.length || (o[l]?.onClose?.(), B || Q(n), a?.(n), $.current && ($.current.textContent = `Step ${n + 1} of ${o.length}: ${typeof o[n]?.title == "string" ? o[n]?.title : ""}`));
       },
-      [o, s, x, a]
-    ), F = y(() => {
+      [o, l, B, a]
+    ), H = y(() => {
       c?.();
     }, [c]), P = y(() => {
-      e?.prevButtonProps?.onClick?.(), v(s - 1);
-    }, [s, v, e]), T = y(() => {
-      e?.nextButtonProps?.onClick?.(), s === o.length - 1 ? (i?.(), c?.()) : v(s + 1);
-    }, [s, o.length, v, i, c, e]), Nt = y(() => {
+      e?.prevButtonProps?.onClick?.(), v(l - 1);
+    }, [l, v, e]), C = y(() => {
+      e?.nextButtonProps?.onClick?.(), l === o.length - 1 ? (i?.(), c?.()) : v(l + 1);
+    }, [l, o.length, v, i, c, e]), Nt = y(() => {
       c?.();
-    }, [c]), Pt = y(() => {
-      I && c?.();
-    }, [I, c]);
-    if (jt(
-      bt,
+    }, [c]), Tt = y(() => {
+      U && c?.();
+    }, [U, c]);
+    if (Wt(
+      gt,
       () => ({
         goTo: v,
-        next: T,
+        next: C,
         prev: P,
-        close: F
+        close: H
       }),
-      [v, T, P, F]
-    ), L(() => {
-      t && !x && G(0);
-    }, [t, x]), L(() => {
+      [v, C, P, H]
+    ), T(() => {
+      t && !B && Q(0);
+    }, [t, B]), T(() => {
       if (t) {
-        if (N(), E && e?.target) {
-          const n = et(e.target);
+        if (x(), S && e?.target) {
+          const n = it(e.target);
           if (n) {
-            const r = typeof E == "object" ? E : { behavior: "smooth", block: "center" };
+            const r = typeof S == "object" ? S : { behavior: "smooth", block: "center" };
             n.scrollIntoView(r);
           }
         }
-        s === 0 && $.current && ($.current.textContent = `Tour started. Step 1 of ${o.length}: ${typeof e?.title == "string" ? e?.title : ""}`);
+        l === 0 && $.current && ($.current.textContent = `Tour started. Step 1 of ${o.length}: ${typeof e?.title == "string" ? e?.title : ""}`);
       }
-    }, [t, s, e, E, N, o.length]), L(() => {
+    }, [t, l, e, S, x, o.length]), T(() => {
       if (!t) return;
-      const n = () => N();
-      return window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), requestAnimationFrame(N), () => {
+      const n = () => x();
+      return window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), requestAnimationFrame(x), () => {
         window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
       };
-    }, [t, N]), L(() => {
+    }, [t, x]), T(() => {
       if (!t) return;
       const n = (r) => {
-        if (r.key === "Escape" && U)
+        if (r.key === "Escape" && Y)
           c?.();
         else if (r.key === "ArrowRight" || r.key === "ArrowDown")
-          r.preventDefault(), T();
+          r.preventDefault(), C();
         else if (r.key === "ArrowLeft" || r.key === "ArrowUp")
           r.preventDefault(), P();
         else if (r.key === "Tab" && w.current) {
-          const C = w.current.querySelectorAll(
+          const N = w.current.querySelectorAll(
             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-          ), S = C[0], j = C[C.length - 1];
-          r.shiftKey && document.activeElement === S ? (r.preventDefault(), j?.focus()) : !r.shiftKey && document.activeElement === j && (r.preventDefault(), S?.focus());
+          ), E = N[0], j = N[N.length - 1];
+          r.shiftKey && document.activeElement === E ? (r.preventDefault(), j?.focus()) : !r.shiftKey && document.activeElement === j && (r.preventDefault(), E?.focus());
         }
       };
       return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-    }, [t, U, c, T, P]), L(() => {
+    }, [t, Y, c, C, P]), T(() => {
       t && w.current && requestAnimationFrame(() => {
         w.current?.querySelector("button")?.focus();
       });
-    }, [t, s]), !t || !e) return null;
-    const Tt = s === 0, Z = s === o.length - 1, R = e.placement ?? "bottom", tt = Wt(R), Ct = dt && o.length > 1 ? /* @__PURE__ */ l(
+    }, [t, l]), !t || !e) return null;
+    const Lt = l === 0, ot = l === o.length - 1, et = e.placement ?? "bottom", nt = Vt(et), At = ht && o.length > 1 ? /* @__PURE__ */ s(
       "div",
       {
         className: `flex gap-1 mb-4 ${m.indicator ?? ""}`,
         style: b.indicator,
         "data-testid": f("indicators"),
-        children: o.map((n, r) => /* @__PURE__ */ l(
+        children: o.map((n, r) => /* @__PURE__ */ s(
           "button",
           {
-            className: `w-2 h-2 rounded-full transition-colors ${r === s ? "bg-primary" : "bg-base-300 hover:bg-base-content/30"}`,
+            className: `w-2 h-2 rounded-full transition-colors ${r === l ? "bg-primary" : "bg-base-300 hover:bg-base-content/30"}`,
             onClick: () => v(r),
             "aria-label": `Go to step ${r + 1}`,
-            "aria-current": r === s ? "step" : void 0,
+            "aria-current": r === l ? "step" : void 0,
             "data-testid": f(`indicator-${r}`)
           },
           r
         ))
       }
-    ) : null, Lt = X ? X(s, o.length) : Ct, ot = /* @__PURE__ */ p(
+    ) : null, St = z ? z(l, o.length) : At, rt = /* @__PURE__ */ p(
       "div",
       {
         className: `flex items-center justify-between gap-2 ${m.footer ?? ""}`,
         style: b.footer,
         "data-testid": f("footer"),
         children: [
-          /* @__PURE__ */ l("div", { children: at && !Z && /* @__PURE__ */ l(
+          /* @__PURE__ */ s("div", { children: ft && !ot && /* @__PURE__ */ s(
             "button",
             {
-              className: "btn btn-ghost btn-sm",
+              className: `${D} ${O} ${V}`,
               onClick: Nt,
               "data-testid": f("skip"),
-              children: st
+              children: ct
             }
           ) }),
           /* @__PURE__ */ p("div", { className: "flex gap-2", children: [
-            !Tt && /* @__PURE__ */ l(
+            !Lt && /* @__PURE__ */ s(
               "button",
               {
-                className: "btn btn-ghost btn-sm",
+                className: `${D} ${O} ${V}`,
                 onClick: P,
                 "data-testid": f("prev"),
-                children: e.prevButtonProps?.children ?? rt
+                children: e.prevButtonProps?.children ?? lt
               }
             ),
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ s(
               "button",
               {
-                className: `btn btn-sm ${yt === "primary" ? "btn-primary" : ""}`,
-                onClick: T,
+                className: `${D} ${V} ${Bt === "primary" ? Ht : ""}`,
+                onClick: C,
                 "data-testid": f("next"),
-                children: e.nextButtonProps?.children ?? (Z ? lt : it)
+                children: e.nextButtonProps?.children ?? (ot ? dt : at)
               }
             )
           ] })
         ]
       }
-    ), At = Y ? Y(ot, { current: s, total: o.length }) : ot, Bt = /* @__PURE__ */ p(
+    ), Et = _ ? _(rt, { current: l, total: o.length }) : rt, jt = /* @__PURE__ */ p(
       "div",
       {
-        ref: vt,
-        className: `fixed inset-0 ${m.root ?? ""} ${ft ?? ""}`,
-        style: { zIndex: A, ...b.root, ...ht },
-        "data-testid": B,
+        ref: $t,
+        className: `fixed inset-0 ${m.root ?? ""} ${mt ?? ""}`,
+        style: { zIndex: L, ...b.root, ...bt },
+        "data-testid": A,
         "data-state": t ? "open" : "closed",
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": `Tour step ${s + 1} of ${o.length}`,
-        ...mt,
+        "aria-label": `Tour step ${l + 1} of ${o.length}`,
+        ...wt,
         children: [
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ s(
             "div",
             {
               ref: $,
@@ -272,14 +272,14 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
             "svg",
             {
               className: `absolute inset-0 w-full h-full pointer-events-auto ${m.mask ?? ""}`,
-              style: { zIndex: A, ...xt, ...b.mask },
-              onClick: Pt,
+              style: { zIndex: L, ...Ct, ...b.mask },
+              onClick: Tt,
               "data-testid": f("mask"),
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ p("mask", { id: `tour-mask-${B}`, children: [
-                  /* @__PURE__ */ l("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }),
-                  u && /* @__PURE__ */ l(
+                /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ p("mask", { id: `tour-mask-${A}`, children: [
+                  /* @__PURE__ */ s("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }),
+                  u && /* @__PURE__ */ s(
                     "rect",
                     {
                       x: u.left - h,
@@ -291,21 +291,21 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
                     }
                   )
                 ] }) }),
-                /* @__PURE__ */ l(
+                /* @__PURE__ */ s(
                   "rect",
                   {
                     x: "0",
                     y: "0",
                     width: "100%",
                     height: "100%",
-                    fill: $t,
-                    mask: `url(#tour-mask-${B})`
+                    fill: Pt,
+                    mask: `url(#tour-mask-${A})`
                   }
                 )
               ]
             }
           ),
-          O && u && /* @__PURE__ */ l(
+          G && u && /* @__PURE__ */ s(
             "div",
             {
               className: "absolute pointer-events-auto",
@@ -314,7 +314,7 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
                 top: u.top - h,
                 width: u.width + h * 2,
                 height: u.height + h * 2,
-                zIndex: A + 1
+                zIndex: L + 1
               },
               "data-testid": f("blocker")
             }
@@ -325,22 +325,22 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
               ref: w,
               className: `absolute bg-base-100 rounded-lg shadow-xl border border-base-300 max-w-sm ${m.popover ?? ""} ${e.className ?? ""}`,
               style: {
-                top: _.top,
-                left: _.left,
-                zIndex: A + 2,
+                top: Z.top,
+                left: Z.left,
+                zIndex: L + 2,
                 ...b.popover,
                 ...e.style
               },
               onClick: (n) => n.stopPropagation(),
               "data-testid": f("popover"),
-              "data-placement": R,
+              "data-placement": et,
               children: [
-                kt && /* @__PURE__ */ l(
+                xt && /* @__PURE__ */ s(
                   "div",
                   {
-                    className: `absolute w-3 h-3 bg-base-100 border-base-300 ${tt.position}`,
+                    className: `absolute w-3 h-3 bg-base-100 border-base-300 ${nt.position}`,
                     style: {
-                      transform: tt.transform,
+                      transform: nt.transform,
                       borderWidth: "1px",
                       borderTopColor: "transparent",
                       borderLeftColor: "transparent"
@@ -348,18 +348,18 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
                     "data-testid": f("arrow")
                   }
                 ),
-                Q !== !1 && /* @__PURE__ */ l(
+                tt !== !1 && /* @__PURE__ */ s(
                   "button",
                   {
-                    className: `absolute top-2 right-2 btn btn-ghost btn-xs btn-circle ${m.close ?? ""}`,
+                    className: `absolute top-2 right-2 ${D} ${O} ${Kt} ${Mt} ${m.close ?? ""}`,
                     style: b.close,
-                    onClick: F,
+                    onClick: H,
                     "aria-label": "Close tour",
                     "data-testid": f("close"),
-                    children: Q ?? Ft
+                    children: tt ?? Xt
                   }
                 ),
-                e.cover && /* @__PURE__ */ l("div", { className: "rounded-t-lg overflow-hidden", "data-testid": f("cover"), children: e.cover }),
+                e.cover && /* @__PURE__ */ s("div", { className: "rounded-t-lg overflow-hidden", "data-testid": f("cover"), children: e.cover }),
                 /* @__PURE__ */ p(
                   "div",
                   {
@@ -374,13 +374,13 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
                           style: b.header,
                           "data-testid": f("header"),
                           children: [
-                            /* @__PURE__ */ l("h3", { className: "font-semibold text-lg mb-1 pr-6", children: e.title }),
-                            e.description && /* @__PURE__ */ l("p", { className: "text-base-content/70 text-sm mb-4", children: e.description })
+                            /* @__PURE__ */ s("h3", { className: "font-semibold text-lg mb-1 pr-6", children: e.title }),
+                            e.description && /* @__PURE__ */ s("p", { className: "text-base-content/70 text-sm mb-4", children: e.description })
                           ]
                         }
                       ),
-                      Lt,
-                      At
+                      St,
+                      Et
                     ]
                   }
                 )
@@ -389,12 +389,12 @@ const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t,
           )
         ]
       }
-    ), Et = z ? z(document.body) : document.body;
-    return Dt(Bt, Et);
+    ), Dt = J ? J(document.body) : document.body;
+    return Ft(jt, Dt);
   }
 );
-Ht.displayName = "Tour";
+Gt.displayName = "Tour";
 export {
-  Ht as Tour
+  Gt as Tour
 };
 //# sourceMappingURL=Tour.js.map