impact-nova 2.6.1 → 2.6.3

package/dist/components/flows/guidance/renderers/guidance-tour-overlay.js

@@ -1,33 +1,41 @@
-import { jsxs as g, jsx as o, Fragment as $ } from "react/jsx-runtime";
-import * as h from "react";
-import { createPortal as z } from "react-dom";
+import { jsxs as u, jsx as o, Fragment as z } from "react/jsx-runtime";
+import * as f from "react";
+import { createPortal as $ } from "react-dom";
 import { GuidanceStepPanel as A } from "./guidance-card-shared.js";
-import { useGuidanceOverlayGeometry as G } from "../hooks/useGuidanceOverlayGeometry.js";
-import { useAdvanceOnTargetClick as P, buildHighlightRectForTarget as T, computePopoverPosition as H } from "./guidance-renderer-shared.js";
-const _ = 220, i = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${_}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
+import { useGuidanceOverlayGeometry as T } from "../hooks/useGuidanceOverlayGeometry.js";
+import { useAdvanceOnTargetClick as G, buildHighlightRectForTarget as M, computePopoverPosition as P } from "./guidance-renderer-shared.js";
+const H = 220, g = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${H}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
 function L({
   highlightRect: e,
-  blocksPointerEvents: n = !0
+  blocksPointerEvents: l = !0
 }) {
-  const a = typeof window < "u" ? window.innerWidth : 0, d = typeof window < "u" ? window.innerHeight : 0, l = e.x + e.width, c = e.y + e.height, r = n ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${i}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${i}`;
-  return /* @__PURE__ */ g($, { children: [
+  if (!l)
+    return null;
+  const a = typeof window < "u" ? window.innerWidth : 0, i = typeof window < "u" ? window.innerHeight : 0, d = Math.max(0, e.y), m = Math.max(0, e.x), r = Math.min(
+    a,
+    e.x + e.width
+  ), c = Math.min(
+    i,
+    e.y + e.height
+  ), s = Math.max(0, c - d), n = `pointer-events-auto absolute ${g}`;
+  return /* @__PURE__ */ u(z, { children: [
     /* @__PURE__ */ o(
       "div",
       {
-        className: r,
-        style: { top: 0, left: 0, width: a, height: e.y },
+        className: n,
+        style: { top: 0, left: 0, width: a, height: d },
         "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ o(
       "div",
       {
-        className: r,
+        className: n,
         style: {
           top: c,
           left: 0,
           width: a,
-          height: Math.max(0, d - c)
+          height: Math.max(0, i - c)
         },
         "aria-hidden": "true"
       }
@@ -35,12 +43,12 @@ function L({
     /* @__PURE__ */ o(
       "div",
       {
-        className: r,
+        className: n,
         style: {
-          top: e.y,
+          top: d,
           left: 0,
-          width: e.x,
-          height: e.height
+          width: m,
+          height: s
         },
         "aria-hidden": "true"
       }
@@ -48,31 +56,30 @@ function L({
     /* @__PURE__ */ o(
       "div",
       {
-        className: r,
+        className: n,
         style: {
-          top: e.y,
-          left: l,
-          width: Math.max(0, a - l),
-          height: e.height
+          top: d,
+          left: r,
+          width: Math.max(0, a - r),
+          height: s
         },
         "aria-hidden": "true"
       }
     )
   ] });
 }
-const C = 12, y = 20;
-function M(e) {
-  const n = C / 2, a = e.placement === "left" || e.placement === "right", d = a ? e.highlightRect.y + e.highlightRect.height / 2 : e.highlightRect.x + e.highlightRect.width / 2, l = a ? e.popoverTop : e.popoverLeft, c = a ? e.popoverHeight : e.popoverWidth, r = d - l - n, m = Math.max(
-    y,
-    c - y - C
-  );
-  return Math.min(Math.max(r, y), m);
+const w = 12, R = Math.ceil(
+  16 + w * Math.SQRT2 / 2
+);
+function _(e) {
+  const l = w / 2, a = e.placement === "left" || e.placement === "right", i = a ? e.highlightRect.y + e.highlightRect.height / 2 : e.highlightRect.x + e.highlightRect.width / 2, d = a ? e.popoverTop : e.popoverLeft, m = a ? e.popoverHeight : e.popoverWidth, r = i - d - l, c = R, s = m - R - w;
+  return s < c || r < c || r > s ? null : r;
 }
 function B({
   placement: e,
-  offset: n
+  offset: l
 }) {
-  const a = e === "left" || e === "right" ? { top: n } : { left: n }, d = {
+  const a = e === "left" || e === "right" ? { top: l } : { left: l }, i = {
     bottom: "left-0 top-0 -translate-y-1/2 border-l border-t",
     top: "bottom-0 left-0 translate-y-1/2 border-b border-r",
     right: "left-0 top-0 -translate-x-1/2 border-b border-l",
@@ -82,72 +89,75 @@ function B({
     "span",
     {
       "aria-hidden": "true",
-      className: `pointer-events-none absolute z-0 size-3 rotate-45 border border-[var(--color-border-accent-muted)] bg-[var(--color-border-accent-muted)] ${d}`,
+      className: `pointer-events-none absolute z-0 size-3 rotate-45 border border-[var(--color-border-accent-muted)] bg-[var(--color-border-accent-muted)] ${i}`,
       style: a
     }
   );
 }
 function j({
   instruction: e,
-  overlayComponent: n,
+  overlayComponent: l,
   onNext: a,
-  onSkip: d,
-  onDismiss: l,
-  onBack: c
+  onSkip: i,
+  onDismiss: d,
+  onBack: m
 }) {
-  const r = e.target?.element, m = G(r, e.stepId), N = e.stepIndex + 1 >= e.totalSteps, f = P(e, a), u = f || e.advanceOn === "auto", w = h.useRef(null), k = h.useRef(null), [v, E] = h.useState({ width: 400, height: 240 }), R = h.useCallback(() => {
+  const r = e.target?.element, c = T(r, e.stepId), s = e.stepIndex + 1 >= e.totalSteps, n = G(e, a), y = n || e.advanceOn === "auto", x = f.useRef(null), k = f.useRef(null), [v, E] = f.useState({ width: 400, height: 240 }), S = f.useCallback(() => {
     r?.click();
   }, [r]);
-  if (h.useLayoutEffect(() => {
+  if (f.useLayoutEffect(() => {
     const p = k.current;
     p?.parentElement === document.body && document.body.appendChild(p);
-  }, [e.stepId, u]), h.useLayoutEffect(() => {
-    const p = w.current;
+  }, [e.stepId, y]), f.useLayoutEffect(() => {
+    const p = x.current;
     if (!p)
       return;
-    const I = () => {
+    const C = () => {
       const b = p.getBoundingClientRect();
       b.width > 0 && b.height > 0 && E({
         width: b.width,
         height: b.height
       });
     };
-    I();
-    const O = new ResizeObserver(I);
-    return O.observe(p), () => {
-      O.disconnect();
+    C();
+    const N = new ResizeObserver(C);
+    return N.observe(p), () => {
+      N.disconnect();
     };
-  }, [e.stepId, e.content.title, e.content.body]), !m || !r || typeof document > "u")
+  }, [e.stepId, e.content.title, e.content.body]), !c || !r || typeof document > "u")
     return null;
-  const t = T(r), s = H({
+  const t = M(r);
+  if (!t)
+    return null;
+  const h = P({
     targetRect: t,
     popoverWidth: v.width,
     popoverHeight: v.height,
     preferredPlacement: e.placement
-  }), S = M({
-    placement: s.placement,
-    popoverTop: s.top,
-    popoverLeft: s.left,
+  }), O = _({
+    placement: h.placement,
+    popoverTop: h.top,
+    popoverLeft: h.left,
     highlightRect: t,
     popoverWidth: v.width,
     popoverHeight: v.height
-  }), x = `guidance-mask-${e.stepId}`;
-  return z(
-    /* @__PURE__ */ g(
+  }), I = `guidance-mask-${e.stepId}`;
+  return $(
+    /* @__PURE__ */ u(
       "div",
       {
         ref: k,
-        "data-component": n,
+        "data-component": l,
         className: "fixed inset-0 z-[60] pointer-events-none",
         role: "presentation",
         children: [
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ u(
             "svg",
             {
-              className: `pointer-events-none absolute inset-0 size-full ${i}`,
+              className: `pointer-events-none absolute inset-0 size-full ${g}`,
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ g("mask", { id: x, children: [
+                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ u("mask", { id: I, children: [
                   /* @__PURE__ */ o("rect", { width: "100%", height: "100%", fill: "white" }),
                   /* @__PURE__ */ o(
                     "rect",
@@ -158,7 +168,7 @@ function j({
                       height: t.height,
                       rx: "8",
                       fill: "black",
-                      className: i
+                      className: g
                     }
                   )
                 ] }) }),
@@ -168,8 +178,8 @@ function j({
                     width: "100%",
                     height: "100%",
                     fill: "var(--guidance-backdrop-bg)",
-                    fillOpacity: "var(--guidance-backdrop-opacity, 0.6)",
-                    mask: `url(#${x})`
+                    fillOpacity: "var(--guidance-backdrop-opacity, 0.4)",
+                    mask: `url(#${I})`
                   }
                 )
               ]
@@ -179,10 +189,10 @@ function j({
             L,
             {
               highlightRect: t,
-              blocksPointerEvents: !u
+              blocksPointerEvents: !y
             }
           ),
-          u ? null : /* @__PURE__ */ o(
+          y ? null : /* @__PURE__ */ o(
             "div",
             {
               className: "pointer-events-auto absolute z-10",
@@ -195,11 +205,11 @@ function j({
               "aria-hidden": "true"
             }
           ),
-          f ? /* @__PURE__ */ o(
+          n ? /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${i}`,
+              className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${g}`,
               style: {
                 top: t.y,
                 left: t.x,
@@ -207,13 +217,13 @@ function j({
                 height: t.height
               },
               "aria-label": `Click ${e.content.title}`,
-              onClick: R
+              onClick: S
             }
           ) : null,
           /* @__PURE__ */ o(
             "div",
             {
-              className: `pointer-events-none absolute rounded-lg ring-2 ring-[var(--guidance-highlight-ring,var(--color-primary))] ${i}`,
+              className: `pointer-events-none absolute rounded-lg ring-2 ring-[var(--guidance-highlight-ring,var(--color-primary))] ${g}`,
               style: {
                 top: t.y,
                 left: t.x,
@@ -222,26 +232,26 @@ function j({
               }
             }
           ),
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ u(
             "div",
             {
-              ref: w,
-              className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] ${i}`,
+              ref: x,
+              className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] ${g}`,
               style: {
-                top: s.top,
-                left: s.left
+                top: h.top,
+                left: h.left
               },
               role: "dialog",
               "aria-labelledby": `guidance-tour-title-${e.stepId}`,
               "aria-describedby": `guidance-tour-body-${e.stepId}`,
               children: [
-                /* @__PURE__ */ o(
+                O !== null ? /* @__PURE__ */ o(
                   B,
                   {
-                    placement: s.placement,
-                    offset: S
+                    placement: h.placement,
+                    offset: O
                   }
-                ),
+                ) : null,
                 /* @__PURE__ */ o("div", { className: "relative z-[1] overflow-hidden rounded-2xl border border-stroke bg-canvas shadow-elevation-floating", children: /* @__PURE__ */ o(
                   A,
                   {
@@ -251,15 +261,15 @@ function j({
                     stepIndex: e.stepIndex,
                     totalSteps: e.totalSteps,
                     skippable: e.skippable,
-                    primaryActionLabel: N ? "Done" : "Next",
-                    onSkip: d,
-                    onDismiss: l,
-                    onBack: c,
+                    primaryActionLabel: s ? "Done" : "Next",
+                    onSkip: i,
+                    onDismiss: d,
+                    onBack: m,
                     canGoBack: e.canGoBack,
                     advanceOn: e.advanceOn,
                     onPrimaryAction: a,
-                    showPrimaryAction: !f && e.advanceOn !== "auto",
-                    footerHint: f ? e.content.footer ?? "Click the highlighted button to continue." : e.advanceOn === "auto" ? e.content.footer ?? "Complete the action above to continue." : null,
+                    showPrimaryAction: !n && e.advanceOn !== "auto",
+                    footerHint: n ? e.content.footer ?? "Click the highlighted button to continue." : e.advanceOn === "auto" ? e.content.footer ?? "Complete the action above to continue." : null,
                     footerKeybinding: e.content.keybinding,
                     shortcutReferences: e.content.shortcutReferences,
                     titleId: `guidance-tour-title-${e.stepId}`,

package/dist/form-react/Fields/DateRangeField.js

@@ -1,42 +1,42 @@
 import { jsx as a } from "react/jsx-runtime";
 import "react";
 import { Controller as S } from "react-hook-form";
-import { DateRangePicker as v } from "../../components/forms/date-picker/date-range-picker.js";
-import { toLocalDate as c } from "../utils/calendar-boundary.js";
-import { resolveDateRangeMinMax as P } from "../utils/date.utils.js";
-const Y = ({
+import { DateRangePicker as F } from "../../components/forms/date-picker/date-range-picker.js";
+import { toLocalDate as d } from "../utils/calendar-boundary.js";
+import { resolveDateRangeMinMax as P, handleDateFnsFormat as x } from "../utils/date.utils.js";
+const q = ({
   field: r,
-  validationRules: d,
+  validationRules: c,
   isDisabled: l,
   formHelpers: n
 }) => {
   const t = r.fieldType === "date_range" ? r : null;
   if (!t) return null;
-  const h = n.form.control, { minDate: m, maxDate: u, startMonth: p, endMonth: g } = P(t);
+  const m = n.form.control, { minDate: h, maxDate: u, startMonth: p, endMonth: f } = P(t), g = t.dateFormat ? x(t.dateFormat) : void 0;
   return /* @__PURE__ */ a(
     S,
     {
       name: r.id,
-      control: h,
+      control: m,
       disabled: l,
-      rules: d,
-      render: ({ field: f, fieldState: s }) => {
-        const i = !!s.error, o = f.value;
+      rules: c,
+      render: ({ field: D, fieldState: s }) => {
+        const i = !!s.error, o = D.value;
         return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
-          v,
+          F,
           {
             label: r.label,
-            minDate: m,
+            minDate: h,
             maxDate: u,
             startMonth: p,
-            endMonth: g,
+            endMonth: f,
             value: {
-              from: o?.start ? c(o.start) : void 0,
-              to: o?.end ? c(o.end) : void 0
+              from: o?.start ? d(o.start) : void 0,
+              to: o?.end ? d(o.end) : void 0
             },
             onChange: (e) => {
-              const M = e?.from ? `${e.from.getFullYear()}-${String(e.from.getMonth() + 1).padStart(2, "0")}-${String(e.from.getDate()).padStart(2, "0")}` : null, D = e?.to ? `${e.to.getFullYear()}-${String(e.to.getMonth() + 1).padStart(2, "0")}-${String(e.to.getDate()).padStart(2, "0")}` : null;
-              n.setValue(r.id, { start: M, end: D });
+              const M = e?.from ? `${e.from.getFullYear()}-${String(e.from.getMonth() + 1).padStart(2, "0")}-${String(e.from.getDate()).padStart(2, "0")}` : null, v = e?.to ? `${e.to.getFullYear()}-${String(e.to.getMonth() + 1).padStart(2, "0")}-${String(e.to.getDate()).padStart(2, "0")}` : null;
+              n.setValue(r.id, { start: M, end: v });
             },
             startPlaceholder: t.startPlaceholder || "Start Date",
             endPlaceholder: t.endPlaceholder || "End Date",
@@ -51,7 +51,8 @@ const Y = ({
             fiscalYearStartMonth: t.fiscalYearStartMonth,
             fiscalMonthPattern: t.fiscalMonthPattern,
             showPresets: t.showPresets,
-            autoNavigateToAvailable: t.autoNavigateToAvailable
+            autoNavigateToAvailable: t.autoNavigateToAvailable,
+            format: g
           }
         ) });
       }
@@ -59,5 +60,5 @@ const Y = ({
   );
 };
 export {
-  Y as DateRangeField
+  q as DateRangeField
 };

package/dist/form-react/Fields/WeekRangePicker.js

@@ -1,58 +1,58 @@
 import { jsx as c } from "react/jsx-runtime";
-import { Controller as T } from "react-hook-form";
-import { WeekRangePicker as b } from "../../components/forms/date-picker/week-range-picker.js";
+import { Controller as b } from "react-hook-form";
+import { WeekRangePicker as x } from "../../components/forms/date-picker/week-range-picker.js";
 import { toLocalDate as M } from "../utils/calendar-boundary.js";
-import { resolveWeekSelection as x } from "../../lib/fiscal-calendar/week-selection.js";
-import { resolveWeekRangeMinMax as Y } from "../utils/date.utils.js";
-const S = (e, a) => x(e, {
-  calendarKind: a.calendarKind,
-  fiscalMode: a.fiscalMode ?? "basic",
-  granularity: a.granularity,
-  fiscalMonthPattern: a.fiscalMonthPattern,
-  fiscalYearStartMonth: a.fiscalYearStartMonth ?? 1,
-  weekStartsOn: a.weekStartsOn,
-  fiscalConfig: a.fiscalConfig
-}), B = ({
-  field: e,
-  validationRules: a,
+import { resolveWeekSelection as Y } from "../../lib/fiscal-calendar/week-selection.js";
+import { resolveWeekRangeMinMax as $, handleDateFnsFormat as y } from "../utils/date.utils.js";
+const S = (a, e) => Y(a, {
+  calendarKind: e.calendarKind,
+  fiscalMode: e.fiscalMode ?? "basic",
+  granularity: e.granularity,
+  fiscalMonthPattern: e.fiscalMonthPattern,
+  fiscalYearStartMonth: e.fiscalYearStartMonth ?? 1,
+  weekStartsOn: e.weekStartsOn,
+  fiscalConfig: e.fiscalConfig
+}), A = ({
+  field: a,
+  validationRules: e,
   isDisabled: p,
   formHelpers: d
 }) => {
-  const t = e.fieldType === "week_range" ? e : null;
+  const t = a.fieldType === "week_range" ? a : null;
   if (!t) return null;
-  const { minDate: u, maxDate: m, startMonth: D, endMonth: k } = Y(t), v = d.form.control;
+  const { minDate: m, maxDate: u, startMonth: D, endMonth: k } = $(t), v = t.dateFormat ? y(t.dateFormat) : void 0, w = d.form.control;
   return /* @__PURE__ */ c(
-    T,
+    b,
     {
-      name: e.id,
-      control: v,
-      rules: a,
-      render: ({ field: w, fieldState: h }) => {
-        const g = !!h.error, r = w.value, s = r?.start ? M(r.start) ?? null : null, i = r?.end ? M(r.end) ?? null : null, C = !!(s && i);
+      name: a.id,
+      control: w,
+      rules: e,
+      render: ({ field: F, fieldState: h }) => {
+        const g = !!h.error, o = F.value, s = o?.start ? M(o.start) ?? null : null, i = o?.end ? M(o.end) ?? null : null, C = !!(s && i);
         return /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(
-          b,
+          x,
           {
-            label: e.label,
+            label: a.label,
             value: C && s && i ? {
               from: S(s, t),
               to: S(i, t)
             } : void 0,
-            onChange: (o) => {
-              const f = o?.from ? { from: o.from, to: o.to ?? o.from } : void 0, n = f?.from?.startDate, l = f?.to?.endDate, F = n ? `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, "0")}-${String(n.getDate()).padStart(2, "0")}` : null, P = l ? `${l.getFullYear()}-${String(l.getMonth() + 1).padStart(2, "0")}-${String(l.getDate()).padStart(2, "0")}` : null;
-              d.setValue(e.id, { start: F, end: P });
+            onChange: (r) => {
+              const f = r?.from ? { from: r.from, to: r.to ?? r.from } : void 0, n = f?.from?.startDate, l = f?.to?.endDate, P = n ? `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, "0")}-${String(n.getDate()).padStart(2, "0")}` : null, T = l ? `${l.getFullYear()}-${String(l.getMonth() + 1).padStart(2, "0")}-${String(l.getDate()).padStart(2, "0")}` : null;
+              d.setValue(a.id, { start: P, end: T });
             },
             placeholder: t.placeholder,
-            startMonth: u ?? D,
-            endMonth: m ?? k,
-            required: e.isRequired,
+            startMonth: m ?? D,
+            endMonth: u ?? k,
+            required: a.isRequired,
             disabled: p,
             error: g,
-            helperText: g ? h.error?.message : e.helpText,
+            helperText: g ? h.error?.message : a.helpText,
             calendarKind: t.calendarKind,
             fiscalMode: t.fiscalMode,
             weekStartsOn: t.weekStartsOn,
-            minDate: u,
-            maxDate: m,
+            minDate: m,
+            maxDate: u,
             granularity: t.granularity,
             fiscalMonthPattern: t.fiscalMonthPattern,
             fiscalYearStartMonth: t.fiscalYearStartMonth,
@@ -60,7 +60,7 @@ const S = (e, a) => x(e, {
             showFooter: t.showFooter,
             showPeriodBoundaries: t.showPeriodBoundaries,
             autoNavigateToAvailable: t.autoNavigateToAvailable,
-            format: t.dateFormat
+            format: v
           }
         ) });
       }
@@ -68,5 +68,5 @@ const S = (e, a) => x(e, {
   );
 };
 export {
-  B as WeekRangeField
+  A as WeekRangeField
 };

package/dist/impact-nova-tokens.scss

@@ -176,7 +176,7 @@
     /* —— Guidance (tours, coach marks, announcements) —— */
     --guidance-announcement-hero-bg: #eceefd;
     --guidance-backdrop-bg: #000000;
-    --guidance-backdrop-opacity: 0.6;
+    --guidance-backdrop-opacity: 0.4;
     --guidance-coach-mark-bg: #ffffff;
     --guidance-coach-mark-border: #e8eaed;
     --guidance-highlight-ring: #5267f4;
@@ -412,7 +412,7 @@
     /* —— Guidance (tours, coach marks, announcements) —— */
     --guidance-announcement-hero-bg: #eceefd;
     --guidance-backdrop-bg: #000000;
-    --guidance-backdrop-opacity: 0.6;
+    --guidance-backdrop-opacity: 0.4;
     --guidance-coach-mark-bg: #ffffff;
     --guidance-coach-mark-border: #e8eaed;
     --guidance-highlight-ring: #5267f4;