impact-nova 2.2.8 → 2.2.9

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

@@ -0,0 +1,213 @@
+import { jsxs as o, jsx 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 { 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;
+}
+function y({
+  onClose: s,
+  closeAriaLabel: e,
+  className: t
+}) {
+  return /* @__PURE__ */ n(
+    x,
+    {
+      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" })
+    }
+  );
+}
+function I({
+  activeStepIndex: s,
+  totalSteps: e
+}) {
+  return e <= 1 ? null : /* @__PURE__ */ n(
+    C,
+    {
+      activeStepIndex: s,
+      totalSteps: e
+    }
+  );
+}
+function C({
+  activeStepIndex: s,
+  totalSteps: e
+}) {
+  const t = b(s, e);
+  return /* @__PURE__ */ n(
+    "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(
+              "rounded-full transition-all",
+              i === s ? "size-2.5 bg-[var(--guidance-step-counter-active,var(--color-primary))]" : "size-2 bg-stroke"
+            )
+          },
+          i
+        );
+      })
+    }
+  );
+}
+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
+}) {
+  return /* @__PURE__ */ o("div", { className: "p-4", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ n(
+        "h3",
+        {
+          id: g,
+          className: "min-w-0 text-base font-bold leading-5 text-content",
+          children: s
+        }
+      ),
+      /* @__PURE__ */ n(
+        y,
+        {
+          onClose: d,
+          closeAriaLabel: "Close",
+          className: "-me-1 shrink-0"
+        }
+      )
+    ] }),
+    e ? /* @__PURE__ */ n(
+      "p",
+      {
+        id: k,
+        className: "mt-2 text-sm leading-relaxed text-content-secondary",
+        children: e
+      }
+    ) : null,
+    t && !m ? /* @__PURE__ */ n("p", { className: "mt-1.5 text-xs text-content-tertiary", children: t }) : null,
+    /* @__PURE__ */ n(
+      w,
+      {
+        activeStepIndex: a,
+        totalSteps: i,
+        skippable: r,
+        primaryActionLabel: l,
+        onSkip: c,
+        onPrimaryAction: p,
+        showPrimaryAction: N,
+        footerHint: m
+      }
+    )
+  ] });
+}
+export {
+  y as GuidanceCardCloseButton,
+  z as GuidanceStepPanel,
+  I as GuidanceStepProgress,
+  C as GuidanceStepProgressDots,
+  w as GuidanceTourNavFooter
+};

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

@@ -0,0 +1,48 @@
+import { RenderInstruction } from '../../../../lib/guidance';
+import * as React from 'react';
+export declare const GUIDANCE_SPOTLIGHT_PADDING = 8;
+export declare const GUIDANCE_POPOVER_GAP = 12;
+export declare const GUIDANCE_VIEWPORT_PADDING = 16;
+export declare const GUIDANCE_TARGET_ANIMATION_POLL_MS = 32;
+export declare const GUIDANCE_TARGET_ANIMATION_POLL_DURATION_MS = 320;
+export declare const GUIDANCE_TARGET_STABLE_FRAME_COUNT = 2;
+export declare const GUIDANCE_TARGET_SCROLL_SETTLE_MS = 400;
+export declare const GUIDANCE_TARGET_SCROLL_PADDING = 32;
+export declare const GUIDANCE_OVERLAY_TRANSITION_MS = 120;
+export declare const GUIDANCE_CLICK_TARGET_ADVANCE_MS = 150;
+export interface HighlightRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface PopoverPosition {
+    top: number;
+    left: number;
+    placement: 'top' | 'bottom' | 'left' | 'right';
+}
+export declare function getVisibleTargetRect(targetElement: HTMLElement): HighlightRect;
+export interface ScrollContainerSnapshot {
+    element: HTMLElement;
+    scrollTop: number;
+    scrollLeft: number;
+}
+export declare function beginTourScrollSnapshot(targetElement: HTMLElement): void;
+export declare function endTourScrollSnapshot(): void;
+export declare function needsGuidanceTargetScroll(targetElement: HTMLElement, viewportPadding?: number): boolean;
+export declare function scrollGuidanceTargetIntoView(targetElement: HTMLElement, viewportPadding?: number): void;
+export declare function useScrollGuidanceTargetIntoView(targetElement: HTMLElement | null | undefined, stepId: string): boolean;
+export declare function useTargetRect(targetElement: HTMLElement | null | undefined): HighlightRect | null;
+export declare function useStableTargetRect(targetElement: HTMLElement | null | undefined, stepId?: string): HighlightRect | null;
+export declare function useAdvanceOnTargetClick(instruction: RenderInstruction, onNext: () => void): boolean;
+export declare function useElevateGuidanceTarget(targetElement: HTMLElement | null | undefined, shouldElevate?: boolean): void;
+export declare function buildHighlightRect(targetRect: HighlightRect, padding?: number, clipBounds?: HighlightRect): HighlightRect;
+export declare function buildHighlightRectForTarget(targetElement: HTMLElement, padding?: number): HighlightRect;
+export declare function buildHighlightStyle(targetRect: HighlightRect, padding?: number): React.CSSProperties;
+export declare function computePopoverPosition(options: {
+    targetRect: HighlightRect;
+    popoverWidth: number;
+    popoverHeight: number;
+    gap?: number;
+    viewportPadding?: number;
+}): PopoverPosition;

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

@@ -0,0 +1,254 @@
+import * as A from "react";
+const T = 8, S = 12, H = 16, v = 32;
+function R(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) {
+  const t = [];
+  let n = e.parentElement;
+  for (; n; )
+    R(n) && t.push(n), n = n.parentElement;
+  return t;
+}
+function h(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
+  ), r = Math.min(
+    e.y + e.height,
+    t.y + t.height
+  );
+  return i <= n || r <= o ? null : {
+    x: n,
+    y: o,
+    width: i - n,
+    height: r - o
+  };
+}
+function f(e) {
+  return {
+    x: e.left,
+    y: e.top,
+    width: e.width,
+    height: e.height
+  };
+}
+function M(e) {
+  let t = f(
+    e.getBoundingClientRect()
+  );
+  for (const i of C(e)) {
+    const r = h(
+      t,
+      f(i.getBoundingClientRect())
+    );
+    if (!r)
+      break;
+    t = r;
+  }
+  const n = {
+    x: 0,
+    y: 0,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  return h(
+    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) {
+  const t = [];
+  let n = e.parentElement;
+  for (; n; ) {
+    const o = window.getComputedStyle(n);
+    (o.overflowY === "auto" || o.overflowY === "scroll" || o.overflowY === "overlay") && n.scrollHeight > n.clientHeight && t.push(n), n = n.parentElement;
+  }
+  return t;
+}
+function I(e) {
+  return x(e).map((t) => ({
+    element: t,
+    scrollTop: t.scrollTop,
+    scrollLeft: t.scrollLeft
+  }));
+}
+function L(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));
+}
+function V() {
+  s !== null && (L(s), s = null);
+}
+function D(e, t = v) {
+  const n = e.getBoundingClientRect(), o = window.innerHeight;
+  return n.top < t || n.bottom > o - t;
+}
+function B(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;
+    Math.abs(l) > 1 && (n.scrollTop += l);
+    return;
+  }
+  if (r.top < i.top + o) {
+    n.scrollTop -= i.top + o - r.top;
+    return;
+  }
+  r.bottom > i.bottom - o && (n.scrollTop += r.bottom - (i.bottom - o));
+}
+function O(e, t = v) {
+  if (!D(e, t))
+    return;
+  const o = x(e)[0];
+  if (o) {
+    B({
+      targetElement: e,
+      scrollContainer: o,
+      viewportPadding: t
+    });
+    return;
+  }
+  e.scrollIntoView({
+    behavior: "auto",
+    block: "center",
+    inline: "nearest"
+  });
+}
+function N(e, t) {
+  const n = e.advanceOn === "click-target";
+  return A.useEffect(() => {
+    if (!n)
+      return;
+    const o = e.target?.element;
+    if (!o)
+      return;
+    const i = () => {
+      queueMicrotask(() => {
+        t();
+      });
+    };
+    return o.addEventListener("click", i, { once: !0 }), () => {
+      o.removeEventListener("click", i);
+    };
+  }, [
+    n,
+    e.stepId,
+    e.target?.element,
+    t
+  ]), n;
+}
+function G(e, t = T, n) {
+  const o = {
+    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 U(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;
+  if (t.width <= 280 && t.x >= window.innerWidth * 0.35 && l >= n + i)
+    return {
+      placement: "left",
+      left: Math.max(r, t.x - n - i),
+      top: Math.max(
+        r,
+        Math.min(
+          t.y,
+          window.innerHeight - o - r
+        )
+      )
+    };
+  if (t.width >= 480 && c >= window.innerWidth - r - 80 && l >= n + i)
+    return {
+      placement: "left",
+      left: Math.max(r, t.x - n - i),
+      top: Math.max(
+        r,
+        Math.min(
+          t.y + 16,
+          window.innerHeight - o - r
+        )
+      )
+    };
+  if (t.height > t.width * 2.5) {
+    const m = Math.max(
+      r,
+      Math.min(
+        t.y,
+        window.innerHeight - o - r
+      )
+    );
+    if (y >= n + i)
+      return {
+        placement: "right",
+        left: c + i,
+        top: m
+      };
+    if (l >= n + i)
+      return {
+        placement: "left",
+        left: t.x - n - i,
+        top: m
+      };
+  }
+  const p = window.innerHeight - g, w = t.y, b = 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(
+    r,
+    Math.min(d, window.innerWidth - n - r)
+  ), u = Math.max(
+    r,
+    Math.min(u, window.innerHeight - o - r)
+  ), { top: u, left: d, placement: a };
+}
+export {
+  S as GUIDANCE_POPOVER_GAP,
+  T as GUIDANCE_SPOTLIGHT_PADDING,
+  v as GUIDANCE_TARGET_SCROLL_PADDING,
+  H as GUIDANCE_VIEWPORT_PADDING,
+  _ as beginTourScrollSnapshot,
+  G as buildHighlightRect,
+  F as buildHighlightRectForTarget,
+  U as computePopoverPosition,
+  V as endTourScrollSnapshot,
+  M as getVisibleTargetRect,
+  D as needsGuidanceTargetScroll,
+  O as scrollGuidanceTargetIntoView,
+  N as useAdvanceOnTargetClick
+};

package/dist/components/flows/guidance/renderers/guidance-tour-overlay.d.ts

@@ -0,0 +1,11 @@
+import { RenderInstruction } from '../../../../lib/guidance';
+import * as React from 'react';
+interface GuidanceTourOverlayProps {
+    instruction: RenderInstruction;
+    overlayComponent: 'guidance-spotlight' | 'guidance-coach-mark';
+    onNext: () => void;
+    onSkip: () => void;
+    onDismiss: () => void;
+}
+export declare function GuidanceTourOverlay({ instruction, overlayComponent, onNext, onSkip, onDismiss, }: GuidanceTourOverlayProps): React.ReactElement | null;
+export {};