impact-nova 1.0.0 → 1.1.0

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

@@ -1,203 +1,208 @@
-import { jsxs as u, jsx as c } from "react/jsx-runtime";
-import * as m from "react";
-import { X as ee } from "lucide-react";
-import { CalendarMonth as te, Info as ne } from "../../../icons/index.js";
-import { format as a, parse as I, isValid as M } from "date-fns";
-import { cn as g, maskDate as V } from "../../../lib/utils.js";
-import { Popover as oe, PopoverTrigger as re, PopoverContent as se } from "../popover.js";
-import { Calendar as ie } from "../calendar.js";
-const de = m.forwardRef(
+import { jsxs as g, jsx as p } from "react/jsx-runtime";
+import * as i from "react";
+import { X as re } from "lucide-react";
+import { CalendarMonth as ie, Info as de } from "../../../icons/index.js";
+import { format as s, isValid as S, parse as D } from "date-fns";
+import { cn as N, padValidDateString as A, maskDate as j } from "../../../lib/utils.js";
+import { Popover as ce, PopoverTrigger as le, PopoverContent as fe } from "../popover.js";
+import { Calendar as pe } from "../calendar.js";
+const ae = i.forwardRef(
   ({
-    value: t,
-    onChange: p,
-    format: n = "MM/dd/yyyy",
-    startPlaceholder: A = "Start Date",
-    endPlaceholder: E = "End Date",
-    minDate: j,
-    maxDate: B,
-    fromYear: O,
-    toYear: T,
-    showFooter: i = !0,
+    value: e,
+    onChange: a,
+    format: t = "MM/dd/yyyy",
+    startPlaceholder: B = "Start Date",
+    endPlaceholder: O = "End Date",
+    minDate: T,
+    maxDate: z,
+    fromYear: H,
+    toYear: L,
+    showFooter: m = !0,
     disabled: x,
-    label: N,
-    helperText: C,
-    prefix: ae,
-    prefixClick: ce,
-    isError: h,
-    size: D,
-    required: z,
-    className: L,
-    ...X
-  }, q) => {
-    const [s, b] = m.useState(!1), [o, l] = m.useState(t), [G, y] = m.useState(t?.from ? a(t.from, n) : ""), [H, w] = m.useState(t?.to ? a(t.to, n) : ""), [J, v] = m.useState(t?.from || /* @__PURE__ */ new Date());
-    m.useEffect(() => {
-      y(t?.from ? a(t.from, n) : ""), w(t?.to ? a(t.to, n) : "");
-    }, [t, n]), m.useEffect(() => {
-      s && (l(t), v(t?.from || /* @__PURE__ */ new Date()));
-    }, [s]);
-    const K = (e) => {
-      l(e), i || e?.from && e?.to && e.from.getTime() !== e.to.getTime() && (p?.(e), b(!1));
-    }, Q = (e) => {
-      let r = e !== void 0 ? e : o;
-      r?.from && !r.to && (r = { from: r.from, to: r.from }), p?.(r), b(!1);
-    }, U = () => {
-      l(t), b(!1);
-    }, S = () => {
-      l(void 0), y(""), w(""), p?.(void 0), i || b(!1);
-    }, W = (e) => {
-      const r = V(e.target.value, n);
-      if (y(r), r === "") {
-        const d = { from: void 0, to: o?.to };
-        l(d), i || p?.(d);
+    label: P,
+    helperText: V,
+    prefix: me,
+    prefixClick: ue,
+    isError: R,
+    size: k,
+    required: X,
+    className: q,
+    ...G
+  }, J) => {
+    const E = i.useRef(null), K = i.useRef(null);
+    i.useRef(null), i.useRef(null), i.useImperativeHandle(J, () => E.current);
+    const [c, C] = i.useState(!1), [b, f] = i.useState(e), [w, u] = i.useState(e?.from ? s(e.from, t) : ""), [y, h] = i.useState(e?.to ? s(e.to, t) : ""), [Q, I] = i.useState(e?.from || /* @__PURE__ */ new Date());
+    i.useEffect(() => {
+      !c && e && (u(e?.from ? s(e.from, t) : ""), h(e?.to ? s(e.to, t) : ""), f(e));
+    }, [e, t, c]), i.useEffect(() => {
+      c && (f(e), u(e?.from ? s(e.from, t) : ""), h(e?.to ? s(e.to, t) : ""), I(e?.from || /* @__PURE__ */ new Date()));
+    }, [c, e]);
+    const U = (n) => {
+      f(n), n?.from && u(s(n.from, t)), n?.to && h(s(n.to, t)), m || n?.from && n?.to && n.from.getTime() !== n.to.getTime() && (a?.(n), C(!1));
+    }, W = (n) => {
+      let o = n !== void 0 ? n : b;
+      o?.from && !o.to && (o = { from: o.from, to: o.from }), a?.(o), C(!1);
+    }, Y = () => {
+      f(e), u(e?.from ? s(e.from, t) : ""), h(e?.to ? s(e.to, t) : ""), C(!1);
+    }, M = () => {
+      f(void 0), u(""), h(""), a?.(void 0), m || C(!1);
+    }, Z = (n) => {
+      const o = n.target.value, d = j(o, t, w);
+      if (u(d), d === "") {
+        const r = { from: void 0, to: b?.to };
+        f(r), m || a?.(r);
         return;
       }
-      const f = I(r, n, /* @__PURE__ */ new Date());
-      if (M(f)) {
-        const d = { from: f, to: o?.to };
-        l(d), v(f), i || p?.(d);
+      const l = D(d, t, /* @__PURE__ */ new Date());
+      if (S(l) && d.length === t.length) {
+        const r = { from: l, to: b?.to };
+        f(r), I(l), m || a?.(r);
       }
-    }, Y = (e) => {
-      const r = V(e.target.value, n);
-      if (w(r), r === "") {
-        const d = { from: o?.from, to: void 0 };
-        l(d), i || p?.(d);
+    }, $ = (n) => {
+      const o = n.target.value, d = j(o, t, y);
+      if (h(d), d === "") {
+        const r = { from: b?.from, to: void 0 };
+        f(r), m || a?.(r);
         return;
       }
-      const f = I(r, n, /* @__PURE__ */ new Date());
-      if (M(f)) {
-        const d = { from: o?.from, to: f };
-        l(d), f && v(f), i || p?.(d);
+      const l = D(d, t, /* @__PURE__ */ new Date());
+      if (S(l) && d.length === t.length) {
+        const r = { from: b?.from, to: l };
+        f(r), l && I(l), m || a?.(r);
       }
-    }, P = () => {
-      s || (y(o?.from ? a(o.from, n) : ""), w(o?.to ? a(o.to, n) : ""));
-    }, Z = t?.from ? a(t.from, n) : "", $ = t?.to ? a(t.to, n) : "", k = i && s ? o?.from ? a(o.from, n) : "" : G, R = i && s ? o?.to ? a(o.to, n) : o?.from ? a(o.from, n) : "" : H, _ = i && s && k !== Z, F = i && s && R !== $;
-    return /* @__PURE__ */ u("div", { className: "w-full space-y-1.5 min-w-[240px]", "data-component": "date-range-picker", "data-disabled": x || void 0, children: [
-      N && /* @__PURE__ */ u(
+    }, v = () => {
+      if (c) return;
+      const n = A(w, t), o = A(y, t), d = D(n, t, /* @__PURE__ */ new Date()), l = D(o, t, /* @__PURE__ */ new Date()), r = S(d) && n.length === t.length, se = S(l) && o.length === t.length;
+      !r || !se ? (u(e?.from ? s(e.from, t) : ""), h(e?.to ? s(e.to, t) : ""), f(e)) : (u(n), h(o), m || a?.({ from: d, to: l }));
+    }, _ = e?.from ? s(e.from, t) : "", F = e?.to ? s(e.to, t) : "", ee = w !== _, te = y !== F, ne = w.length === t.length && !S(D(w, t, /* @__PURE__ */ new Date())), oe = y.length === t.length && !S(D(y, t, /* @__PURE__ */ new Date()));
+    return /* @__PURE__ */ g("div", { className: "w-full space-y-1.5 min-w-[240px]", "data-component": "date-range-picker", "data-disabled": x || void 0, children: [
+      P && /* @__PURE__ */ g(
         "label",
         {
-          className: g(
+          className: N(
             "text-xs font-medium leading-[18px] text-[#60697d]",
             x && "opacity-70",
-            h && "text-destructive"
+            R && "text-destructive"
           ),
           children: [
-            N,
+            P,
             " ",
-            z && /* @__PURE__ */ c("span", { className: "text-destructive", children: "*" })
+            X && /* @__PURE__ */ p("span", { className: "text-destructive", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ u(oe, { open: s, onOpenChange: b, children: [
-        /* @__PURE__ */ c(re, { asChild: !0, children: /* @__PURE__ */ u(
+      /* @__PURE__ */ g(ce, { open: c, onOpenChange: C, children: [
+        /* @__PURE__ */ p(le, { asChild: !0, children: /* @__PURE__ */ g(
           "div",
           {
-            "data-state": s ? "open" : "closed",
-            className: g(
+            "data-state": c ? "open" : "closed",
+            className: N(
               "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",
-              h ? "border-destructive hover:border-destructive" : "border-input",
-              D === "sm" ? "h-6" : D === "md" ? "h-[28px]" : "h-8",
+              R ? "border-destructive hover:border-destructive" : "border-input",
+              k === "sm" ? "h-6" : k === "md" ? "h-[28px]" : "h-8",
               x && "pointer-events-none opacity-100 bg-disabled-secondary-bg border-border text-disabled-text hover:border-border",
               "cursor-pointer",
-              L
+              q
             ),
             children: [
-              /* @__PURE__ */ u("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
-                /* @__PURE__ */ c(
+              /* @__PURE__ */ g("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
+                /* @__PURE__ */ p(
                   "input",
                   {
-                    ref: q,
+                    ref: E,
                     type: "text",
-                    value: k,
-                    onChange: W,
-                    onBlur: P,
-                    onClick: (e) => s && e.stopPropagation(),
-                    placeholder: s ? n : A,
+                    value: w,
+                    onChange: Z,
+                    onBlur: v,
+                    onClick: (n) => c && n.stopPropagation(),
+                    placeholder: c ? t : B,
                     disabled: !!x,
                     "data-field": "start",
-                    className: g(
+                    className: N(
                       "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",
-                      _ && "text-muted-foreground"
+                      ne ? "text-destructive" : ee ? "text-muted-foreground" : ""
                     ),
-                    ...X
+                    ...G
                   }
                 ),
-                /* @__PURE__ */ c(
+                /* @__PURE__ */ p(
                   "input",
                   {
+                    ref: K,
                     type: "text",
-                    value: R,
-                    onChange: Y,
-                    onBlur: P,
-                    onClick: (e) => s && e.stopPropagation(),
-                    placeholder: s ? n : E,
+                    value: y,
+                    onChange: $,
+                    onBlur: v,
+                    onClick: (n) => c && n.stopPropagation(),
+                    placeholder: c ? t : O,
                     disabled: !!x,
                     "data-field": "end",
-                    className: g(
+                    className: N(
                       "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",
-                      F && "text-muted-foreground"
+                      oe ? "text-destructive" : te ? "text-muted-foreground" : ""
                     )
                   }
                 )
               ] }),
-              /* @__PURE__ */ u("div", { className: "flex items-center gap-1 shrink-0", children: [
-                t?.from && !x && /* @__PURE__ */ c(
-                  ee,
+              /* @__PURE__ */ g("div", { className: "flex items-center gap-1 shrink-0", children: [
+                e?.from && !x && /* @__PURE__ */ p(
+                  re,
                   {
                     className: "h-4 w-4 cursor-pointer hover:text-foreground text-muted-foreground",
-                    onClick: (e) => {
-                      e.stopPropagation(), S();
+                    onClick: (n) => {
+                      n.stopPropagation(), M();
                     }
                   }
                 ),
-                /* @__PURE__ */ c(te, { className: "h-4 w-4 text-secondary-foreground" })
+                /* @__PURE__ */ p(ie, { className: "h-4 w-4 text-secondary-foreground" })
               ] })
             ]
           }
         ) }),
-        /* @__PURE__ */ c(
-          se,
+        /* @__PURE__ */ p(
+          fe,
           {
             className: "w-auto p-0",
             align: "start",
-            onOpenAutoFocus: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ c(
-              ie,
+            onOpenAutoFocus: (n) => n.preventDefault(),
+            children: /* @__PURE__ */ p(
+              pe,
               {
                 mode: "range",
-                selected: o,
-                onSelect: K,
-                month: J,
-                onMonthChange: v,
-                disabled: { before: j, after: B },
-                fromYear: O,
-                toYear: T,
-                showFooter: i,
-                onApply: Q,
-                onCancel: U,
-                onClear: S,
+                selected: b,
+                onSelect: U,
+                month: Q,
+                onMonthChange: I,
+                disabled: { before: T, after: z },
+                fromYear: H,
+                toYear: L,
+                showFooter: m,
+                onApply: W,
+                onCancel: Y,
+                onClear: M,
                 captionLayout: "dropdown"
               }
             )
           }
         )
       ] }),
-      C && /* @__PURE__ */ u("div", { className: g("flex items-center gap-1", h && "text-destructive"), children: [
-        !h && /* @__PURE__ */ c(ne, { size: 10, className: "shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ c(
+      V && /* @__PURE__ */ g("div", { className: N("flex items-center gap-1", R && "text-destructive"), children: [
+        !R && /* @__PURE__ */ p(de, { size: 10, className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ p(
           "p",
           {
-            className: g(
+            className: N(
               "text-[10px] text-[#7a8294]",
-              h && "text-destructive"
+              R && "text-destructive"
             ),
-            children: C
+            children: V
           }
         )
       ] })
     ] });
   }
 );
-de.displayName = "DateRangePicker";
+ae.displayName = "DateRangePicker";
 export {
-  de as DateRangePicker
+  ae as DateRangePicker
 };

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

@@ -1,111 +1,117 @@
-import { jsxs as C, jsx as a } from "react/jsx-runtime";
-import * as s from "react";
-import { X as E } from "lucide-react";
-import { CalendarMonth as R } from "../../../icons/index.js";
-import { parse as $, isValid as X } from "date-fns";
-import { cn as q, maskDate as z } from "../../../lib/utils.js";
-import { Input as G } from "../input.js";
-import { Popover as H, PopoverTrigger as J, PopoverContent as K } from "../popover.js";
-import { Calendar as L } from "../calendar.js";
-const d = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, Q = s.forwardRef(
+import { jsxs as P, jsx as i } from "react/jsx-runtime";
+import * as n from "react";
+import { X } from "lucide-react";
+import { CalendarMonth as q } from "../../../icons/index.js";
+import { isValid as M, parse as g } from "date-fns";
+import { cn as z, padValidDateString as G, maskDate as J } from "../../../lib/utils.js";
+import { Input as K } from "../input.js";
+import { Popover as L, PopoverTrigger as Q, PopoverContent as U } from "../popover.js";
+import { Calendar as W } from "../calendar.js";
+const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, Z = n.forwardRef(
   ({
     value: t,
-    onChange: i,
-    placeholder: D = "Select Month",
-    minDate: P,
-    maxDate: x,
-    fromYear: k,
-    toYear: w,
-    showFooter: r = !0,
-    disabled: M,
-    className: N,
-    ...A
-  }, V) => {
-    const [n, p] = s.useState(!1), [o, c] = s.useState(t), [h, l] = s.useState(t ? d(t) : ""), [Y, u] = s.useState(() => t ? new Date(t.year, t.month, 1) : /* @__PURE__ */ new Date());
-    s.useEffect(() => {
-      l(t ? d(t) : "");
-    }, [t]), s.useEffect(() => {
-      n && (c(t), u(t ? new Date(t.year, t.month, 1) : /* @__PURE__ */ new Date()));
-    }, [n]);
-    const I = (e) => {
-      c(e), r || (i?.(e), p(!1));
-    }, T = (e) => {
-      i?.(e !== void 0 ? e : o), p(!1);
-    }, v = () => {
-      c(t), p(!1);
-    }, y = () => {
-      c(void 0), l(""), i?.(void 0), r || p(!1);
-    }, O = (e) => {
-      const m = z(e.target.value, "MM/yyyy");
-      if (l(m), m === "") {
-        c(void 0), r || i?.(void 0);
+    onChange: a,
+    placeholder: k = "Select Month",
+    minDate: V,
+    maxDate: I,
+    fromYear: N,
+    toYear: Y,
+    showFooter: p = !0,
+    disabled: u,
+    className: A,
+    ...R
+  }, T) => {
+    const S = n.useRef(null);
+    n.useRef(null), n.useImperativeHandle(T, () => S.current);
+    const [o, m] = n.useState(!1), [w, r] = n.useState(t), [d, s] = n.useState(t ? c(t) : ""), [O, y] = n.useState(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date());
+    n.useEffect(() => {
+      !o && t && (s(c(t)), r(t));
+    }, [o, t]), n.useEffect(() => {
+      o && (r(t), y(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date()), s(t ? c(t) : ""));
+    }, [o, t]);
+    const j = (e) => {
+      r(e), e && s(c(e)), p || (a?.(e), m(!1));
+    }, B = (e) => {
+      a?.(e !== void 0 ? e : w), m(!1);
+    }, E = () => {
+      r(t), s(t ? c(t) : ""), m(!1);
+    }, D = () => {
+      r(void 0), s(""), a?.(void 0), p || m(!1);
+    }, $ = (e) => {
+      const f = e.target.value, l = J(f, "MM/yyyy", d);
+      if (s(l), l === "") {
+        r(void 0), p || a?.(void 0);
         return;
       }
-      const f = $(m, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (X(f)) {
-        const S = { month: f.getMonth(), year: f.getFullYear() };
-        c(S), u(f), r || i?.(S);
+      const h = g(l, "MM/yyyy", /* @__PURE__ */ new Date());
+      if (M(h) && l.length === 7) {
+        const C = { month: h.getMonth(), year: h.getFullYear() };
+        r(C), y(h), p || a?.(C);
       }
-    }, j = () => {
-      if (!n) {
-        if (h === "") {
-          y();
-          return;
-        }
-        l(o ? d(o) : "");
+    }, b = () => {
+      if (o) return;
+      const e = G(d, "MM/yyyy"), f = g(e, "MM/yyyy", /* @__PURE__ */ new Date());
+      if (!M(f) || e.length !== 7)
+        s(t ? c(t) : ""), r(t);
+      else if (s(e), !p) {
+        const l = { month: f.getMonth(), year: f.getFullYear() };
+        a?.(l);
       }
-    }, g = r && n && (o ? d(o) : "") !== h, B = r && n ? o ? d(o) : "" : h;
-    return /* @__PURE__ */ C(H, { open: n, onOpenChange: p, children: [
-      /* @__PURE__ */ a(J, { asChild: !0, children: /* @__PURE__ */ a("div", { "data-component": "month-picker", "data-state": n ? "open" : "closed", "data-pending": g || void 0, children: /* @__PURE__ */ a(
-        G,
+    }, x = (t ? c(t) : "") !== d, H = d.length === 7 && !M(g(d, "MM/yyyy", /* @__PURE__ */ new Date()));
+    return /* @__PURE__ */ P(L, { open: o, onOpenChange: m, children: [
+      /* @__PURE__ */ i(Q, { asChild: !0, children: /* @__PURE__ */ i("div", { "data-component": "month-picker", "data-state": o ? "open" : "closed", "data-pending": x || void 0, children: /* @__PURE__ */ i(
+        K,
         {
-          ref: V,
-          value: B,
-          onChange: O,
-          onBlur: j,
-          onClick: (e) => n && e.stopPropagation(),
-          placeholder: n ? "MM/YYYY" : D,
-          disabled: M,
+          ref: S,
+          value: d,
+          onChange: $,
+          onBlur: b,
+          onClick: (e) => o && e.stopPropagation(),
+          placeholder: o ? "MM/YYYY" : k,
+          disabled: u,
           "data-form-control": "input",
-          className: q("cursor-pointer", g && "text-muted-foreground", N),
-          suffix: /* @__PURE__ */ C("div", { className: "flex items-center gap-1", children: [
-            t && !M && /* @__PURE__ */ a(
-              E,
+          className: z(
+            "cursor-pointer",
+            H ? "text-destructive" : x ? "text-muted-foreground" : "",
+            A
+          ),
+          suffix: /* @__PURE__ */ P("div", { className: "flex items-center gap-1", children: [
+            t && !u && /* @__PURE__ */ i(
+              X,
               {
                 className: "h-4 w-4 cursor-pointer hover:text-foreground",
                 onClick: (e) => {
-                  e.stopPropagation(), y();
+                  e.stopPropagation(), D();
                 }
               }
             ),
-            /* @__PURE__ */ a(R, { className: "h-4 w-4 text-secondary-foreground" })
+            /* @__PURE__ */ i(q, { className: "h-4 w-4 text-secondary-foreground" })
           ] }),
-          ...A
+          ...R
         }
       ) }) }),
-      /* @__PURE__ */ a(
-        K,
+      /* @__PURE__ */ i(
+        U,
         {
           className: "w-auto p-0",
           align: "start",
           onOpenAutoFocus: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ a(
-            L,
+          children: /* @__PURE__ */ i(
+            W,
             {
               pickerType: "month",
               monthMode: "single",
-              selectedMonths: o,
-              onMonthSelect: I,
-              month: Y,
-              onMonthChange: u,
-              fromDate: P,
-              toDate: x,
-              fromYear: k,
-              toYear: w,
-              showFooter: r,
-              onApply: T,
-              onCancel: v,
-              onClear: y
+              selectedMonths: w,
+              onMonthSelect: j,
+              month: O,
+              onMonthChange: y,
+              disabled: { before: V, after: I },
+              fromYear: N,
+              toYear: Y,
+              showFooter: p,
+              onApply: B,
+              onCancel: E,
+              onClear: D
             }
           )
         }
@@ -113,7 +119,7 @@ const d = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, Q = s
     ] });
   }
 );
-Q.displayName = "MonthPicker";
+Z.displayName = "MonthPicker";
 export {
-  Q as MonthPicker
+  Z as MonthPicker
 };