impact-nova 1.0.0 → 1.1.0

package/dist/components/ui/date-picker/month-range-picker.js

@@ -1,201 +1,208 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import * as f from "react";
-import { X as _ } from "lucide-react";
-import { CalendarMonth as F, Info as tt } from "../../../icons/index.js";
-import { parse as R, isValid as I } from "date-fns";
-import { cn as u, maskDate as v } from "../../../lib/utils.js";
-import { Popover as et, PopoverTrigger as ot, PopoverContent as nt } from "../popover.js";
-import { Calendar as rt } from "../calendar.js";
-const s = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, at = f.forwardRef(
+import { jsxs as u, jsx as c } from "react/jsx-runtime";
+import * as s from "react";
+import { X as ot } from "lucide-react";
+import { CalendarMonth as nt, Info as rt } from "../../../icons/index.js";
+import { isValid as b, parse as w } from "date-fns";
+import { cn as S, padValidDateString as A, maskDate as j } from "../../../lib/utils.js";
+import { Popover as st, PopoverTrigger as dt, PopoverContent as at } from "../popover.js";
+import { Calendar as it } from "../calendar.js";
+const o = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, ct = s.forwardRef(
   ({
     value: t,
-    onChange: m,
-    placeholder: st = "Select Month Range",
-    minDate: V,
-    maxDate: A,
-    fromYear: E,
-    toYear: j,
-    showFooter: r = !0,
-    disabled: h,
-    className: B,
-    isError: y,
-    size: S,
-    label: N,
-    helperText: C,
-    required: O,
-    prefix: dt,
-    prefixClick: it,
-    ...T
-  }, $) => {
-    const [n, x] = f.useState(!1), [o, c] = f.useState(t), [z, M] = f.useState(t?.from ? s(t.from) : ""), [X, b] = f.useState(t?.to ? s(t.to) : ""), [q, w] = f.useState(() => t?.from ? new Date(t.from.year, t.from.month, 1) : /* @__PURE__ */ new Date());
-    f.useEffect(() => {
-      M(t?.from ? s(t.from) : ""), b(t?.to ? s(t.to) : "");
-    }, [t]), f.useEffect(() => {
-      n && (c(t), w(t?.from ? new Date(t.from.year, t.from.month, 1) : /* @__PURE__ */ new Date()));
-    }, [n]);
-    const G = (e) => {
-      c(e), !r && e?.from && e?.to && (e.from.month !== e.to.month || e.from.year !== e.to.year) && (m?.(e), x(!1));
-    }, H = (e) => {
-      m?.(e !== void 0 ? e : o), x(!1);
-    }, J = () => {
-      c(t), x(!1);
-    }, D = () => {
-      c(void 0), M(""), b(""), m?.(void 0), r || x(!1);
-    }, K = (e) => {
-      const d = v(e.target.value, "MM/yyyy");
-      if (M(d), d === "") {
-        const l = { from: void 0, to: t?.to };
-        c(l), r || m?.(l);
+    onChange: l,
+    placeholder: lt = "Select Month Range",
+    minDate: B,
+    maxDate: O,
+    fromYear: T,
+    toYear: $,
+    showFooter: f = !0,
+    disabled: g,
+    className: z,
+    isError: R,
+    size: C,
+    label: D,
+    helperText: I,
+    required: H,
+    prefix: mt,
+    prefixClick: ft,
+    ...X
+  }, q) => {
+    const Y = s.useRef(null), G = s.useRef(null);
+    s.useRef(null), s.useRef(null), s.useImperativeHandle(q, () => Y.current);
+    const [d, N] = s.useState(!1), [k, a] = s.useState(t), [x, p] = s.useState(t?.from ? o(t.from) : ""), [M, h] = s.useState(t?.to ? o(t.to) : ""), [J, P] = s.useState(() => t?.from ? new Date(t.from.year, t.from.month, 1) : /* @__PURE__ */ new Date());
+    s.useEffect(() => {
+      !d && t && (p(t?.from ? o(t.from) : ""), h(t?.to ? o(t.to) : ""), a(t));
+    }, [d, t]), s.useEffect(() => {
+      d && (a(t), p(t?.from ? o(t.from) : ""), h(t?.to ? o(t.to) : ""), P(t?.from ? new Date(t.from.year, t.from.month, 1) : /* @__PURE__ */ new Date()));
+    }, [d, t]);
+    const K = (e) => {
+      a(e), e?.from && p(o(e.from)), e?.to && h(o(e.to)), !f && e?.from && e?.to && (e.from.month !== e.to.month || e.from.year !== e.to.year) && (l?.(e), N(!1));
+    }, L = (e) => {
+      l?.(e !== void 0 ? e : k), N(!1);
+    }, Q = () => {
+      a(t), p(t?.from ? o(t.from) : ""), h(t?.to ? o(t.to) : ""), N(!1);
+    }, V = () => {
+      a(void 0), p(""), h(""), l?.(void 0), f || N(!1);
+    }, U = (e) => {
+      const m = e.target.value, n = j(m, "MM/yyyy", x);
+      if (p(n), n === "") {
+        const i = { from: void 0, to: t?.to };
+        a(i), f || l?.(i);
         return;
       }
-      const i = R(d, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (I(i)) {
-        const g = { from: { month: i.getMonth(), year: i.getFullYear() }, to: t?.to };
-        c(g), w(i), r || m?.(g);
+      const r = w(n, "MM/yyyy", /* @__PURE__ */ new Date());
+      if (b(r) && n.length === 7) {
+        const y = { from: { month: r.getMonth(), year: r.getFullYear() }, to: t?.to };
+        a(y), P(r), f || l?.(y);
       }
-    }, L = (e) => {
-      const d = v(e.target.value, "MM/yyyy");
-      if (b(d), d === "") {
-        const l = { from: t?.from, to: void 0 };
-        c(l), r || m?.(l);
+    }, W = (e) => {
+      const m = e.target.value, n = j(m, "MM/yyyy", M);
+      if (h(n), n === "") {
+        const i = { from: t?.from, to: void 0 };
+        a(i), f || l?.(i);
         return;
       }
-      const i = R(d, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (I(i)) {
-        const l = { month: i.getMonth(), year: i.getFullYear() }, g = { from: t?.from, to: l };
-        c(g), w(i), r || m?.(g);
+      const r = w(n, "MM/yyyy", /* @__PURE__ */ new Date());
+      if (b(r) && n.length === 7) {
+        const i = { month: r.getMonth(), year: r.getFullYear() }, y = { from: t?.from, to: i };
+        a(y), P(r), f || l?.(y);
       }
-    }, k = () => {
-      n || (M(o?.from ? s(o.from) : ""), b(o?.to ? s(o.to) : ""));
-    }, Q = t?.from ? s(t.from) : "", U = t?.to ? s(t.to) : "", P = r && n ? o?.from ? s(o.from) : "" : z, Y = r && n ? o?.to && (o.to.month !== o.from?.month || o.to.year !== o.from?.year) ? s(o.to) : "" : X, W = r && n && P !== Q, Z = r && n && Y !== U;
-    return /* @__PURE__ */ p("div", { className: "w-full space-y-1.5 min-w-[240px]", "data-component": "month-range-picker", "data-disabled": h || void 0, children: [
-      N && /* @__PURE__ */ p(
+    }, E = () => {
+      if (d) return;
+      const e = A(x, "MM/yyyy"), m = A(M, "MM/yyyy"), n = w(e, "MM/yyyy", /* @__PURE__ */ new Date()), r = w(m, "MM/yyyy", /* @__PURE__ */ new Date()), i = b(n) && e.length === 7, y = b(r) && m.length === 7;
+      !i || !y ? (p(t?.from ? o(t.from) : ""), h(t?.to ? o(t.to) : ""), a(t)) : (p(e), h(m), f || l?.({
+        from: { month: n.getMonth(), year: n.getFullYear() },
+        to: { month: r.getMonth(), year: r.getFullYear() }
+      }));
+    }, Z = t?.from ? o(t.from) : "", F = t?.to ? o(t.to) : "", v = x !== Z, _ = M !== F, tt = x.length === 7 && !b(w(x, "MM/yyyy", /* @__PURE__ */ new Date())), et = M.length === 7 && !b(w(M, "MM/yyyy", /* @__PURE__ */ new Date()));
+    return /* @__PURE__ */ u("div", { className: "w-full space-y-1.5 min-w-[240px]", "data-component": "month-range-picker", "data-disabled": g || void 0, children: [
+      D && /* @__PURE__ */ u(
         "label",
         {
-          className: u(
+          className: S(
             "text-xs font-medium leading-[18px] text-[#60697d]",
-            h && "opacity-70",
-            y && "text-destructive"
+            g && "opacity-70",
+            R && "text-destructive"
           ),
           children: [
-            N,
+            D,
             " ",
-            O && /* @__PURE__ */ a("span", { className: "text-destructive", children: "*" })
+            H && /* @__PURE__ */ c("span", { className: "text-destructive", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ p(et, { open: n, onOpenChange: x, children: [
-        /* @__PURE__ */ a(ot, { asChild: !0, children: /* @__PURE__ */ p(
+      /* @__PURE__ */ u(st, { open: d, onOpenChange: N, children: [
+        /* @__PURE__ */ c(dt, { asChild: !0, children: /* @__PURE__ */ u(
           "div",
           {
-            "data-state": n ? "open" : "closed",
-            className: u(
+            "data-state": d ? "open" : "closed",
+            className: S(
               "flex w-full items-center justify-between gap-2 rounded-md border bg-white px-3 text-sm shadow-sm transition-colors hover:border-primary disabled:cursor-not-allowed disabled:bg-disabled-secondary-bg disabled:text-disabled-text disabled:border-border",
-              y ? "border-destructive hover:border-destructive" : "border-input",
-              S === "sm" ? "h-6" : S === "md" ? "h-[28px]" : "h-8",
-              h && "pointer-events-none opacity-100 bg-disabled-secondary-bg border-border text-disabled-text hover:border-border",
+              R ? "border-destructive hover:border-destructive" : "border-input",
+              C === "sm" ? "h-6" : C === "md" ? "h-[28px]" : "h-8",
+              g && "pointer-events-none opacity-100 bg-disabled-secondary-bg border-border text-disabled-text hover:border-border",
               "cursor-pointer",
-              B
+              z
             ),
             children: [
-              /* @__PURE__ */ p("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
-                /* @__PURE__ */ a(
+              /* @__PURE__ */ u("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
+                /* @__PURE__ */ c(
                   "input",
                   {
-                    ref: $,
+                    ref: Y,
                     type: "text",
-                    value: P,
-                    onChange: K,
-                    onBlur: k,
-                    onClick: (e) => n && e.stopPropagation(),
-                    placeholder: n ? "MM/YYYY" : "Start Month",
-                    disabled: !!h,
+                    value: x,
+                    onChange: U,
+                    onBlur: E,
+                    onClick: (e) => d && e.stopPropagation(),
+                    placeholder: d ? "MM/YYYY" : "Start Month",
+                    disabled: !!g,
                     "data-field": "start",
-                    className: u(
+                    className: S(
                       "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50",
-                      W && "text-muted-foreground"
+                      tt ? "text-destructive" : v ? "text-muted-foreground" : ""
                     ),
-                    ...T
+                    ...X
                   }
                 ),
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ c(
                   "input",
                   {
+                    ref: G,
                     type: "text",
-                    value: Y,
-                    onChange: L,
-                    onBlur: k,
-                    onClick: (e) => n && e.stopPropagation(),
-                    placeholder: n ? "MM/YYYY" : "End Month",
-                    disabled: !!h,
+                    value: M,
+                    onChange: W,
+                    onBlur: E,
+                    onClick: (e) => d && e.stopPropagation(),
+                    placeholder: d ? "MM/YYYY" : "End Month",
+                    disabled: !!g,
                     "data-field": "end",
-                    className: u(
+                    className: S(
                       "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50",
-                      Z && "text-muted-foreground"
+                      et ? "text-destructive" : _ ? "text-muted-foreground" : ""
                     )
                   }
                 )
               ] }),
-              /* @__PURE__ */ p("div", { className: "flex items-center gap-1 shrink-0", children: [
-                t?.from && !h && /* @__PURE__ */ a(
-                  _,
+              /* @__PURE__ */ u("div", { className: "flex items-center gap-1 shrink-0", children: [
+                t?.from && !g && /* @__PURE__ */ c(
+                  ot,
                   {
                     className: "h-4 w-4 cursor-pointer hover:text-foreground text-muted-foreground",
                     onClick: (e) => {
-                      e.stopPropagation(), D();
+                      e.stopPropagation(), V();
                     }
                   }
                 ),
-                /* @__PURE__ */ a(F, { className: "h-4 w-4 text-secondary-foreground" })
+                /* @__PURE__ */ c(nt, { className: "h-4 w-4 text-secondary-foreground" })
               ] })
             ]
           }
         ) }),
-        /* @__PURE__ */ a(
-          nt,
+        /* @__PURE__ */ c(
+          at,
           {
             className: "w-auto p-0",
             align: "start",
             onOpenAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ a(
-              rt,
+            children: /* @__PURE__ */ c(
+              it,
               {
                 pickerType: "month",
                 monthMode: "range",
-                selectedMonths: o,
-                onMonthSelect: G,
-                month: q,
-                onMonthChange: w,
-                fromDate: V,
-                toDate: A,
-                fromYear: E,
-                toYear: j,
-                showFooter: r,
-                onApply: H,
-                onCancel: J,
-                onClear: D
+                selectedMonths: k,
+                onMonthSelect: K,
+                month: J,
+                onMonthChange: P,
+                disabled: { before: B, after: O },
+                fromYear: T,
+                toYear: $,
+                showFooter: f,
+                onApply: L,
+                onCancel: Q,
+                onClear: V
               }
             )
           }
         )
       ] }),
-      C && /* @__PURE__ */ p("div", { className: u("flex items-center gap-1", y && "text-destructive"), children: [
-        !y && /* @__PURE__ */ a(tt, { size: 10, className: "shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ a(
+      I && /* @__PURE__ */ u("div", { className: S("flex items-center gap-1", R && "text-destructive"), children: [
+        !R && /* @__PURE__ */ c(rt, { size: 10, className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ c(
           "p",
           {
-            className: u(
+            className: S(
               "text-[10px] text-[#7a8294]",
-              y && "text-destructive"
+              R && "text-destructive"
             ),
-            children: C
+            children: I
           }
         )
       ] })
     ] });
   }
 );
-at.displayName = "MonthRangePicker";
+ct.displayName = "MonthRangePicker";
 export {
-  at as MonthRangePicker
+  ct as MonthRangePicker
 };

package/dist/components/ui/date-picker/multi-date-picker.js

@@ -1,17 +1,17 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import * as a from "react";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import * as s from "react";
 import { X as O } from "lucide-react";
 import { CalendarMonth as k } from "../../../icons/index.js";
 import { format as w } from "date-fns";
 import { cn as T } from "../../../lib/utils.js";
 import { Input as j } from "../input.js";
-import { Popover as v, PopoverTrigger as R, PopoverContent as E } from "../popover.js";
-import { Calendar as I } from "../calendar.js";
-const L = a.forwardRef(
+import { Popover as v, PopoverTrigger as R, PopoverContent as b } from "../popover.js";
+import { Calendar as E } from "../calendar.js";
+const I = s.forwardRef(
   ({
     value: e,
-    onChange: s,
-    format: f = "MM/dd/yyyy",
+    onChange: a,
+    format: m = "MM/dd/yyyy",
     placeholder: h = "Select Dates",
     minDate: u,
     maxDate: y,
@@ -20,32 +20,32 @@ const L = a.forwardRef(
     showFooter: l = !0,
     disabled: c,
     className: x,
-    ...D
-  }, P) => {
-    const [i, r] = a.useState(!1), [p, n] = a.useState(e);
-    a.useEffect(() => {
+    ...P
+  }, N) => {
+    const [i, r] = s.useState(!1), [p, n] = s.useState(e);
+    s.useEffect(() => {
       i && n(e);
     }, [i]);
-    const N = (t) => {
-      n(t), l || s?.(t);
-    }, A = (t) => {
-      s?.(t !== void 0 ? t : p), r(!1);
+    const A = (t) => {
+      n(t), l || a?.(t);
+    }, D = (t) => {
+      a?.(t !== void 0 ? t : p), r(!1);
     }, M = () => {
       n(e), r(!1);
     }, d = () => {
-      n(void 0), s?.(void 0), l || r(!1);
-    }, S = e && e.length > 0 ? e.length === 1 ? w(e[0], f) : `${e.length} dates selected` : "";
-    return /* @__PURE__ */ m(v, { open: i, onOpenChange: r, children: [
+      n(void 0), a?.(void 0), l || r(!1);
+    }, S = e && e.length > 0 ? e.length === 1 ? w(e[0], m) : `${e.length} dates selected` : "";
+    return /* @__PURE__ */ f(v, { open: i, onOpenChange: r, children: [
       /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
         j,
         {
-          ref: P,
+          ref: N,
           value: S,
           placeholder: h,
           readOnly: !0,
           disabled: c,
           className: T("cursor-pointer", x),
-          suffix: /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: [
+          suffix: /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
             e && e.length > 0 && !c && /* @__PURE__ */ o(
               O,
               {
@@ -57,27 +57,26 @@ const L = a.forwardRef(
             ),
             /* @__PURE__ */ o(k, { className: "h-4 w-4 text-secondary-foreground" })
           ] }),
-          ...D
+          ...P
         }
       ) }) }),
       /* @__PURE__ */ o(
-        E,
+        b,
         {
           className: "w-auto p-0",
           align: "start",
           onOpenAutoFocus: (t) => t.preventDefault(),
           children: /* @__PURE__ */ o(
-            I,
+            E,
             {
               mode: "multiple",
               selected: p,
-              onSelect: N,
-              fromDate: u,
-              toDate: y,
+              onSelect: A,
+              disabled: { before: u, after: y },
               fromYear: g,
               toYear: C,
               showFooter: l,
-              onApply: A,
+              onApply: D,
               onCancel: M,
               onClear: d,
               captionLayout: "dropdown"
@@ -88,7 +87,7 @@ const L = a.forwardRef(
     ] });
   }
 );
-L.displayName = "MultiDatePicker";
+I.displayName = "MultiDatePicker";
 export {
-  L as MultiDatePicker
+  I as MultiDatePicker
 };

package/dist/components/ui/date-picker/multi-month-picker.js

@@ -1,40 +1,40 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import * as s from "react";
 import { X as k } from "lucide-react";
 import { CalendarMonth as O } from "../../../icons/index.js";
 import { cn as T } from "../../../lib/utils.js";
 import { Input as w } from "../input.js";
-import { Popover as D, PopoverTrigger as $, PopoverContent as j } from "../popover.js";
-import { Calendar as R } from "../calendar.js";
+import { Popover as $, PopoverTrigger as j, PopoverContent as R } from "../popover.js";
+import { Calendar as b } from "../calendar.js";
 const v = s.forwardRef(
   ({
     value: e,
-    onChange: c,
+    onChange: i,
     placeholder: f = "Select Months",
     minDate: h,
     maxDate: u,
     fromYear: g,
     toYear: y,
-    showFooter: i = !0,
+    showFooter: l = !0,
     disabled: a,
     className: M,
     ...C
   }, x) => {
-    const [l, n] = s.useState(!1), [p, r] = s.useState(e);
+    const [c, n] = s.useState(!1), [p, r] = s.useState(e);
     s.useEffect(() => {
-      l && r(e);
-    }, [l]);
+      c && r(e);
+    }, [c]);
     const P = (t) => {
-      r(t), i || c?.(t);
+      r(t), l || i?.(t);
     }, N = (t) => {
-      c?.(t !== void 0 ? t : p), n(!1);
+      i?.(t !== void 0 ? t : p), n(!1);
     }, A = () => {
       r(e), n(!1);
-    }, m = () => {
-      r(void 0), c?.(void 0), i || n(!1);
+    }, d = () => {
+      r(void 0), i?.(void 0), l || n(!1);
     }, S = e && e.length > 0 ? e.length === 1 ? `${e[0].month + 1}/${e[0].year}` : `${e.length} months selected` : "";
-    return /* @__PURE__ */ d(D, { open: l, onOpenChange: n, children: [
-      /* @__PURE__ */ o($, { asChild: !0, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ m($, { open: c, onOpenChange: n, children: [
+      /* @__PURE__ */ o(j, { asChild: !0, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
         w,
         {
           ref: x,
@@ -43,13 +43,13 @@ const v = s.forwardRef(
           readOnly: !0,
           disabled: a,
           className: T("cursor-pointer", M),
-          suffix: /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
+          suffix: /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: [
             e && e.length > 0 && !a && /* @__PURE__ */ o(
               k,
               {
                 className: "h-4 w-4 cursor-pointer hover:text-foreground",
                 onClick: (t) => {
-                  t.stopPropagation(), m();
+                  t.stopPropagation(), d();
                 }
               }
             ),
@@ -59,26 +59,25 @@ const v = s.forwardRef(
         }
       ) }) }),
       /* @__PURE__ */ o(
-        j,
+        R,
         {
           className: "w-auto p-0",
           align: "start",
           onOpenAutoFocus: (t) => t.preventDefault(),
           children: /* @__PURE__ */ o(
-            R,
+            b,
             {
               pickerType: "month",
               monthMode: "multiple",
               selectedMonths: p,
               onMonthSelect: P,
-              fromDate: h,
-              toDate: u,
+              disabled: { before: h, after: u },
               fromYear: g,
               toYear: y,
-              showFooter: i,
+              showFooter: l,
               onApply: N,
               onCancel: A,
-              onClear: m,
+              onClear: d,
               captionLayout: "dropdown"
             }
           )