impact-nova 2.6.2 → 2.6.3

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

@@ -1,22 +1,24 @@
-import { jsxs as m, jsx as o, Fragment as $ } from "react/jsx-runtime";
+import { jsxs as u, jsx as o, Fragment as z } from "react/jsx-runtime";
 import * as f from "react";
-import { createPortal as z } from "react-dom";
+import { createPortal as $ } from "react-dom";
 import { GuidanceStepPanel as A } from "./guidance-card-shared.js";
 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, h = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${H}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
+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: i = !0
+  blocksPointerEvents: l = !0
 }) {
-  const a = typeof window < "u" ? window.innerWidth : 0, l = typeof window < "u" ? window.innerHeight : 0, d = Math.max(0, e.y), u = Math.max(0, e.x), r = Math.min(
+  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(
-    l,
+    i,
     e.y + e.height
-  ), s = Math.max(0, c - d), n = i ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.4)] ${h}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.4)] ${h}`;
-  return /* @__PURE__ */ m($, { children: [
+  ), s = Math.max(0, c - d), n = `pointer-events-auto absolute ${g}`;
+  return /* @__PURE__ */ u(z, { children: [
     /* @__PURE__ */ o(
       "div",
       {
@@ -33,7 +35,7 @@ function L({
           top: c,
           left: 0,
           width: a,
-          height: Math.max(0, l - c)
+          height: Math.max(0, i - c)
         },
         "aria-hidden": "true"
       }
@@ -45,7 +47,7 @@ function L({
         style: {
           top: d,
           left: 0,
-          width: u,
+          width: m,
           height: s
         },
         "aria-hidden": "true"
@@ -70,14 +72,14 @@ const w = 12, R = Math.ceil(
   16 + w * Math.SQRT2 / 2
 );
 function _(e) {
-  const i = w / 2, a = e.placement === "left" || e.placement === "right", l = a ? e.highlightRect.y + e.highlightRect.height / 2 : e.highlightRect.x + e.highlightRect.width / 2, d = a ? e.popoverTop : e.popoverLeft, u = a ? e.popoverHeight : e.popoverWidth, r = l - d - i, c = R, s = u - R - w;
+  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: i
+  offset: l
 }) {
-  const a = e === "left" || e === "right" ? { top: i } : { left: i }, l = {
+  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",
@@ -87,31 +89,31 @@ 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)] ${l}`,
+      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: i,
+  overlayComponent: l,
   onNext: a,
-  onSkip: l,
+  onSkip: i,
   onDismiss: d,
-  onBack: u
+  onBack: m
 }) {
-  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", k = f.useRef(null), x = f.useRef(null), [v, E] = f.useState({ width: 400, height: 240 }), S = f.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 (f.useLayoutEffect(() => {
-    const g = x.current;
-    g?.parentElement === document.body && document.body.appendChild(g);
+    const p = k.current;
+    p?.parentElement === document.body && document.body.appendChild(p);
   }, [e.stepId, y]), f.useLayoutEffect(() => {
-    const g = k.current;
-    if (!g)
+    const p = x.current;
+    if (!p)
       return;
     const C = () => {
-      const b = g.getBoundingClientRect();
+      const b = p.getBoundingClientRect();
       b.width > 0 && b.height > 0 && E({
         width: b.width,
         height: b.height
@@ -119,7 +121,7 @@ function j({
     };
     C();
     const N = new ResizeObserver(C);
-    return N.observe(g), () => {
+    return N.observe(p), () => {
       N.disconnect();
     };
   }, [e.stepId, e.content.title, e.content.body]), !c || !r || typeof document > "u")
@@ -127,35 +129,35 @@ function j({
   const t = M(r);
   if (!t)
     return null;
-  const p = P({
+  const h = P({
     targetRect: t,
     popoverWidth: v.width,
     popoverHeight: v.height,
     preferredPlacement: e.placement
   }), O = _({
-    placement: p.placement,
-    popoverTop: p.top,
-    popoverLeft: p.left,
+    placement: h.placement,
+    popoverTop: h.top,
+    popoverLeft: h.left,
     highlightRect: t,
     popoverWidth: v.width,
     popoverHeight: v.height
   }), I = `guidance-mask-${e.stepId}`;
-  return z(
-    /* @__PURE__ */ m(
+  return $(
+    /* @__PURE__ */ u(
       "div",
       {
-        ref: x,
-        "data-component": i,
+        ref: k,
+        "data-component": l,
         className: "fixed inset-0 z-[60] pointer-events-none",
         role: "presentation",
         children: [
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ u(
             "svg",
             {
-              className: `pointer-events-none absolute inset-0 size-full ${h}`,
+              className: `pointer-events-none absolute inset-0 size-full ${g}`,
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ m("mask", { id: I, children: [
+                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ u("mask", { id: I, children: [
                   /* @__PURE__ */ o("rect", { width: "100%", height: "100%", fill: "white" }),
                   /* @__PURE__ */ o(
                     "rect",
@@ -166,7 +168,7 @@ function j({
                       height: t.height,
                       rx: "8",
                       fill: "black",
-                      className: h
+                      className: g
                     }
                   )
                 ] }) }),
@@ -207,7 +209,7 @@ function j({
             "button",
             {
               type: "button",
-              className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${h}`,
+              className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${g}`,
               style: {
                 top: t.y,
                 left: t.x,
@@ -221,7 +223,7 @@ function j({
           /* @__PURE__ */ o(
             "div",
             {
-              className: `pointer-events-none absolute rounded-lg ring-2 ring-[var(--guidance-highlight-ring,var(--color-primary))] ${h}`,
+              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,
@@ -230,14 +232,14 @@ function j({
               }
             }
           ),
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ u(
             "div",
             {
-              ref: k,
-              className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] ${h}`,
+              ref: x,
+              className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] ${g}`,
               style: {
-                top: p.top,
-                left: p.left
+                top: h.top,
+                left: h.left
               },
               role: "dialog",
               "aria-labelledby": `guidance-tour-title-${e.stepId}`,
@@ -246,7 +248,7 @@ function j({
                 O !== null ? /* @__PURE__ */ o(
                   B,
                   {
-                    placement: p.placement,
+                    placement: h.placement,
                     offset: O
                   }
                 ) : null,
@@ -260,9 +262,9 @@ function j({
                     totalSteps: e.totalSteps,
                     skippable: e.skippable,
                     primaryActionLabel: s ? "Done" : "Next",
-                    onSkip: l,
+                    onSkip: i,
                     onDismiss: d,
-                    onBack: u,
+                    onBack: m,
                     canGoBack: e.canGoBack,
                     advanceOn: e.advanceOn,
                     onPrimaryAction: a,

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
 };