impact-nova 2.5.6 → 2.5.7

package/dist/components/flows/guidance/renderers/guidance-card-shared.js

@@ -1,213 +1,160 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { jsxs as c, jsx as e, Fragment as N } from "react/jsx-runtime";
 import "react";
-import { Cross as v } from "impact-nova-icons";
-import { Button as x } from "../../../primitives/button/button.js";
+import { Button as m } from "../../../primitives/button/button.js";
+import { Progress as b } from "../../../primitives/progress/progress.js";
 import { cn as h } from "../../../../lib/utils.js";
-const u = 5, f = 2;
-function b(s, e) {
-  if (e <= u)
-    return Array.from({ length: e }, (r, l) => ({
-      kind: "step",
-      stepIndex: l
-    }));
-  const t = Math.max(
-    0,
-    Math.min(
-      s - 2,
-      e - u
-    )
-  ), a = t + u - 1, i = [];
-  if (t > 0)
-    for (let r = 0; r < f; r += 1)
-      i.push({
-        kind: "ellipsis",
-        markerId: `leading-${r}`
-      });
-  for (let r = t; r <= a; r += 1)
-    i.push({ kind: "step", stepIndex: r });
-  if (a < e - 1)
-    for (let r = 0; r < f; r += 1)
-      i.push({
-        kind: "ellipsis",
-        markerId: `trailing-${r}`
-      });
-  return i;
+const v = "End Tour";
+function G({
+  activeStepIndex: t,
+  totalSteps: n,
+  className: a
+}) {
+  if (n <= 1)
+    return null;
+  const r = (t + 1) / n * 100;
+  return /* @__PURE__ */ e(
+    b,
+    {
+      value: r,
+      label: !1,
+      className: h("bg-brand-subtle", a),
+      "aria-label": `Step ${t + 1} of ${n}`
+    }
+  );
 }
-function y({
-  onClose: s,
-  closeAriaLabel: e,
-  className: t
+function $({
+  hint: t
 }) {
-  return /* @__PURE__ */ n(
-    x,
+  return /* @__PURE__ */ e(
+    "div",
     {
-      variant: "ghost",
-      size: "iconSm",
-      className: h(
-        "shrink-0 text-content-tertiary hover:text-content-secondary",
-        t
-      ),
-      "aria-label": e,
-      onClick: s,
-      children: /* @__PURE__ */ n(v, { className: "size-3.5" })
+      "data-component": "guidance-tour-interaction-footer",
+      className: "border-t border-stroke-hairline bg-canvas-subtle px-4 py-2.5 text-center text-sm leading-snug text-content-secondary",
+      children: t
     }
   );
 }
-function I({
-  activeStepIndex: s,
-  totalSteps: e
+function y({
+  activeStepIndex: t,
+  totalSteps: n
 }) {
-  return e <= 1 ? null : /* @__PURE__ */ n(
-    C,
+  return /* @__PURE__ */ c(
+    "span",
     {
-      activeStepIndex: s,
-      totalSteps: e
+      className: "text-sm leading-none",
+      "aria-label": `Step ${t + 1} of ${n}`,
+      children: [
+        /* @__PURE__ */ e("span", { className: "font-bold text-content", children: t + 1 }),
+        /* @__PURE__ */ e("span", { className: "font-normal text-content-tertiary", children: ` / ${n}` })
+      ]
     }
   );
 }
-function C({
-  activeStepIndex: s,
-  totalSteps: e
+function x({
+  activeStepIndex: t,
+  totalSteps: n,
+  skippable: a,
+  primaryActionLabel: r,
+  onSkip: l,
+  onPrimaryAction: i,
+  showPrimaryAction: s = !0
 }) {
-  const t = b(s, e);
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: "flex items-center justify-center gap-1.5",
-      role: "progressbar",
-      "aria-valuemin": 1,
-      "aria-valuenow": s + 1,
-      "aria-valuemax": e,
-      "aria-label": `Step ${s + 1} of ${e}`,
-      children: t.map((a) => {
-        if (a.kind === "ellipsis")
-          return /* @__PURE__ */ n(
-            "span",
-            {
-              className: "size-1 rounded-full bg-stroke",
-              "aria-hidden": "true"
-            },
-            a.markerId
-          );
-        const i = a.stepIndex;
-        return /* @__PURE__ */ n(
-          "span",
+      className: h(
+        "flex items-center justify-between gap-3 px-4",
+        s ? "pb-4 pt-2" : "pb-2 pt-2"
+      ),
+      children: [
+        n > 1 ? /* @__PURE__ */ e(
+          y,
           {
-            className: h(
-              "rounded-full transition-all",
-              i === s ? "size-2.5 bg-[var(--guidance-step-counter-active,var(--color-primary))]" : "size-2 bg-stroke"
-            )
-          },
-          i
-        );
-      })
+            activeStepIndex: t,
+            totalSteps: n
+          }
+        ) : /* @__PURE__ */ e("span", { "aria-hidden": "true" }),
+        /* @__PURE__ */ c("div", { className: "ms-auto flex shrink-0 items-center gap-2", children: [
+          a ? /* @__PURE__ */ e(m, { variant: "secondary", size: "md", onClick: l, children: v }) : null,
+          s ? /* @__PURE__ */ e(m, { size: "md", onClick: i, children: r }) : null
+        ] })
+      ]
     }
   );
 }
-function w({
-  activeStepIndex: s,
-  totalSteps: e,
-  skippable: t,
-  primaryActionLabel: a,
-  onSkip: i,
-  onPrimaryAction: r,
-  showPrimaryAction: l,
-  footerHint: c
-}) {
-  const d = e > 1;
-  return /* @__PURE__ */ o("div", { className: "mt-4 flex flex-col", children: [
-    d ? /* @__PURE__ */ n("div", { className: "flex justify-center", children: /* @__PURE__ */ n(
-      I,
-      {
-        activeStepIndex: s,
-        totalSteps: e
-      }
-    ) }) : null,
-    /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ n("div", { className: "shrink-0", children: t ? /* @__PURE__ */ n(
-        "button",
-        {
-          type: "button",
-          className: "flex h-6 items-center text-sm leading-4 text-content-tertiary transition-colors hover:text-content-secondary",
-          onClick: i,
-          children: "Skip"
-        }
-      ) : null }),
-      /* @__PURE__ */ n("div", { className: "min-w-0 text-right", children: l ? /* @__PURE__ */ n(
-        x,
-        {
-          size: "sm",
-          className: "rounded-full px-4",
-          onClick: r,
-          children: a
-        }
-      ) : c ? /* @__PURE__ */ n("span", { className: "text-xs font-medium leading-snug text-content-tertiary", children: c }) : null })
-    ] })
-  ] });
-}
-function z({
-  title: s,
-  body: e,
-  optionalFooter: t,
-  stepIndex: a,
-  totalSteps: i,
-  skippable: r,
-  primaryActionLabel: l,
-  onSkip: c,
-  onDismiss: d,
-  onPrimaryAction: p,
-  showPrimaryAction: N,
-  footerHint: m,
-  titleId: g,
-  bodyId: k
+function E({
+  title: t,
+  body: n,
+  optionalFooter: a,
+  stepIndex: r,
+  totalSteps: l,
+  skippable: i,
+  primaryActionLabel: s,
+  onSkip: d,
+  onPrimaryAction: u,
+  showPrimaryAction: f,
+  footerHint: o,
+  titleId: p,
+  bodyId: g
 }) {
-  return /* @__PURE__ */ o("div", { className: "p-4", children: [
-    /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ n(
+  return /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ c("div", { className: "px-4 pt-4", children: [
+      /* @__PURE__ */ e(
         "h3",
         {
-          id: g,
-          className: "min-w-0 text-base font-bold leading-5 text-content",
-          children: s
+          id: p,
+          className: "text-base font-bold leading-5 text-content",
+          children: t
         }
       ),
-      /* @__PURE__ */ n(
-        y,
+      n ? /* @__PURE__ */ e(
+        "p",
         {
-          onClose: d,
-          closeAriaLabel: "Close",
-          className: "-me-1 shrink-0"
+          id: g,
+          className: "mt-2 text-sm leading-snug text-content-secondary",
+          children: n
         }
-      )
+      ) : null,
+      a && !o ? /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs text-content-tertiary", children: a }) : null
     ] }),
-    e ? /* @__PURE__ */ n(
-      "p",
+    /* @__PURE__ */ e("div", { className: "px-4 pt-3", children: /* @__PURE__ */ e(
+      G,
       {
-        id: k,
-        className: "mt-2 text-sm leading-relaxed text-content-secondary",
-        children: e
+        activeStepIndex: r,
+        totalSteps: l
       }
-    ) : null,
-    t && !m ? /* @__PURE__ */ n("p", { className: "mt-1.5 text-xs text-content-tertiary", children: t }) : null,
-    /* @__PURE__ */ n(
-      w,
+    ) }),
+    !!o ? /* @__PURE__ */ c(N, { children: [
+      i ? /* @__PURE__ */ e(
+        x,
+        {
+          activeStepIndex: r,
+          totalSteps: l,
+          skippable: i,
+          primaryActionLabel: s,
+          onSkip: d,
+          onPrimaryAction: u,
+          showPrimaryAction: !1
+        }
+      ) : null,
+      /* @__PURE__ */ e($, { hint: o })
+    ] }) : f ? /* @__PURE__ */ e(
+      x,
       {
-        activeStepIndex: a,
-        totalSteps: i,
-        skippable: r,
-        primaryActionLabel: l,
-        onSkip: c,
-        onPrimaryAction: p,
-        showPrimaryAction: N,
-        footerHint: m
+        activeStepIndex: r,
+        totalSteps: l,
+        skippable: i,
+        primaryActionLabel: s,
+        onSkip: d,
+        onPrimaryAction: u
       }
-    )
+    ) : null
   ] });
 }
 export {
-  y as GuidanceCardCloseButton,
-  z as GuidanceStepPanel,
-  I as GuidanceStepProgress,
-  C as GuidanceStepProgressDots,
-  w as GuidanceTourNavFooter
+  y as GuidanceStepCounter,
+  E as GuidanceStepPanel,
+  G as GuidanceStepProgressBar,
+  $ as GuidanceTourInteractionFooter,
+  x as GuidanceTourNavFooter
 };

package/dist/components/flows/guidance/renderers/guidance-renderer-shared.d.ts

@@ -1,6 +1,6 @@
 import { RenderInstruction } from '../../../../lib/guidance';
 import * as React from 'react';
-export declare const GUIDANCE_SPOTLIGHT_PADDING = 8;
+export declare const GUIDANCE_SPOTLIGHT_PADDING = 16;
 export declare const GUIDANCE_POPOVER_GAP = 12;
 export declare const GUIDANCE_VIEWPORT_PADDING = 16;
 export declare const GUIDANCE_TARGET_ANIMATION_POLL_MS = 32;

package/dist/components/flows/guidance/renderers/guidance-renderer-shared.js

@@ -1,17 +1,17 @@
 import * as A from "react";
-const T = 8, S = 12, H = 16, v = 32;
-function R(e) {
+const T = 16, b = 12, S = 16, v = 32;
+function H(e) {
   const t = window.getComputedStyle(e);
   return t.overflow === "hidden" || t.overflow === "auto" || t.overflow === "scroll" || t.overflow === "clip" || t.overflowY === "hidden" || t.overflowY === "auto" || t.overflowY === "scroll" || t.overflowY === "clip" || t.overflowX === "hidden" || t.overflowX === "auto" || t.overflowX === "scroll" || t.overflowX === "clip";
 }
-function C(e) {
+function R(e) {
   const t = [];
   let n = e.parentElement;
   for (; n; )
-    R(n) && t.push(n), n = n.parentElement;
+    H(n) && t.push(n), n = n.parentElement;
   return t;
 }
-function h(e, t) {
+function w(e, t) {
   const n = Math.max(e.x, t.x), o = Math.max(e.y, t.y), i = Math.min(
     e.x + e.width,
     t.x + t.width
@@ -26,7 +26,7 @@ function h(e, t) {
     height: r - o
   };
 }
-function f(e) {
+function m(e) {
   return {
     x: e.left,
     y: e.top,
@@ -35,13 +35,13 @@ function f(e) {
   };
 }
 function M(e) {
-  let t = f(
+  let t = m(
     e.getBoundingClientRect()
   );
-  for (const i of C(e)) {
-    const r = h(
+  for (const i of R(e)) {
+    const r = w(
       t,
-      f(i.getBoundingClientRect())
+      m(i.getBoundingClientRect())
     );
     if (!r)
       break;
@@ -53,28 +53,12 @@ function M(e) {
     width: window.innerWidth,
     height: window.innerHeight
   };
-  return h(
+  return w(
     t,
     n
   ) ?? t;
 }
-function E(e) {
-  let t = {
-    x: 0,
-    y: 0,
-    width: window.innerWidth,
-    height: window.innerHeight
-  };
-  for (const n of C(e)) {
-    const o = h(
-      t,
-      f(n.getBoundingClientRect())
-    );
-    o && (t = o);
-  }
-  return t;
-}
-function x(e) {
+function C(e) {
   const t = [];
   let n = e.parentElement;
   for (; n; ) {
@@ -83,29 +67,29 @@ function x(e) {
   }
   return t;
 }
-function I(e) {
-  return x(e).map((t) => ({
+function E(e) {
+  return C(e).map((t) => ({
     element: t,
     scrollTop: t.scrollTop,
     scrollLeft: t.scrollLeft
   }));
 }
-function L(e) {
+function I(e) {
   for (const t of e)
     t.element.isConnected && (t.element.scrollTop = t.scrollTop, t.element.scrollLeft = t.scrollLeft);
 }
 let s = null;
 function _(e) {
-  s === null && (s = I(e));
+  s === null && (s = E(e));
 }
-function V() {
-  s !== null && (L(s), s = null);
+function k() {
+  s !== null && (I(s), s = null);
 }
-function D(e, t = v) {
+function L(e, t = v) {
   const n = e.getBoundingClientRect(), o = window.innerHeight;
   return n.top < t || n.bottom > o - t;
 }
-function B(e) {
+function D(e) {
   const { targetElement: t, scrollContainer: n, viewportPadding: o } = e, i = n.getBoundingClientRect(), r = t.getBoundingClientRect(), c = n.clientHeight - o * 2;
   if (r.height >= c) {
     const l = r.top - i.top - o;
@@ -118,12 +102,12 @@ function B(e) {
   }
   r.bottom > i.bottom - o && (n.scrollTop += r.bottom - (i.bottom - o));
 }
-function O(e, t = v) {
-  if (!D(e, t))
+function V(e, t = v) {
+  if (!L(e, t))
     return;
-  const o = x(e)[0];
+  const o = C(e)[0];
   if (o) {
-    B({
+    D({
       targetElement: e,
       scrollContainer: o,
       viewportPadding: t
@@ -136,7 +120,7 @@ function O(e, t = v) {
     inline: "nearest"
   });
 }
-function N(e, t) {
+function O(e, t) {
   const n = e.advanceOn === "click-target";
   return A.useEffect(() => {
     if (!n)
@@ -145,8 +129,10 @@ function N(e, t) {
     if (!o)
       return;
     const i = () => {
-      queueMicrotask(() => {
-        t();
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          t();
+        });
       });
     };
     return o.addEventListener("click", i, { once: !0 }), () => {
@@ -160,26 +146,25 @@ function N(e, t) {
   ]), n;
 }
 function G(e, t = T, n) {
-  const o = {
+  return {
     x: e.x - t,
     y: e.y - t,
     width: e.width + t * 2,
     height: e.height + t * 2
   };
-  return n ? h(o, n) ?? o : o;
 }
-function F(e, t = T) {
-  const n = M(e), o = E(e);
-  return G(n, t, o);
+function N(e, t = T) {
+  const n = M(e);
+  return G(n, t);
 }
-function U(e) {
+function F(e) {
   const {
     targetRect: t,
     popoverWidth: n,
     popoverHeight: o,
-    gap: i = S,
-    viewportPadding: r = H
-  } = e, c = t.x + t.width, g = t.y + t.height, l = t.x, y = window.innerWidth - c;
+    gap: i = b,
+    viewportPadding: r = S
+  } = e, c = t.x + t.width, h = t.y + t.height, l = t.x, x = window.innerWidth - c;
   if (t.width <= 280 && t.x >= window.innerWidth * 0.35 && l >= n + i)
     return {
       placement: "left",
@@ -205,50 +190,50 @@ function U(e) {
       )
     };
   if (t.height > t.width * 2.5) {
-    const m = Math.max(
+    const f = Math.max(
       r,
       Math.min(
         t.y,
         window.innerHeight - o - r
       )
     );
-    if (y >= n + i)
+    if (x >= n + i)
       return {
         placement: "right",
         left: c + i,
-        top: m
+        top: f
       };
     if (l >= n + i)
       return {
         placement: "left",
         left: t.x - n - i,
-        top: m
+        top: f
       };
   }
-  const p = window.innerHeight - g, w = t.y, b = t.y + t.height / 2 > window.innerHeight * 0.55;
+  const g = window.innerHeight - h, d = t.y, y = t.y + t.height / 2 > window.innerHeight * 0.55;
   let a;
-  b && w >= o + i && p < o + i * 2 ? a = "top" : a = p >= o + i || p >= w ? "bottom" : "top";
-  let u = a === "bottom" ? g + i : t.y - o - i, d = t.x + t.width / 2 - n / 2;
-  return d = Math.max(
+  y && d >= o + i && g < o + i * 2 ? a = "top" : a = g >= o + i || g >= d ? "bottom" : "top";
+  let p = a === "bottom" ? h + i : t.y - o - i, u = t.x + t.width / 2 - n / 2;
+  return u = Math.max(
     r,
-    Math.min(d, window.innerWidth - n - r)
-  ), u = Math.max(
+    Math.min(u, window.innerWidth - n - r)
+  ), p = Math.max(
     r,
-    Math.min(u, window.innerHeight - o - r)
-  ), { top: u, left: d, placement: a };
+    Math.min(p, window.innerHeight - o - r)
+  ), { top: p, left: u, placement: a };
 }
 export {
-  S as GUIDANCE_POPOVER_GAP,
+  b as GUIDANCE_POPOVER_GAP,
   T as GUIDANCE_SPOTLIGHT_PADDING,
   v as GUIDANCE_TARGET_SCROLL_PADDING,
-  H as GUIDANCE_VIEWPORT_PADDING,
+  S as GUIDANCE_VIEWPORT_PADDING,
   _ as beginTourScrollSnapshot,
   G as buildHighlightRect,
-  F as buildHighlightRectForTarget,
-  U as computePopoverPosition,
-  V as endTourScrollSnapshot,
+  N as buildHighlightRectForTarget,
+  F as computePopoverPosition,
+  k as endTourScrollSnapshot,
   M as getVisibleTargetRect,
-  D as needsGuidanceTargetScroll,
-  O as scrollGuidanceTargetIntoView,
-  N as useAdvanceOnTargetClick
+  L as needsGuidanceTargetScroll,
+  V as scrollGuidanceTargetIntoView,
+  O as useAdvanceOnTargetClick
 };