impact-nova 0.1.13 → 1.0.0

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

@@ -1,114 +1,111 @@
-import { jsxs as P, jsx as o } from "react/jsx-runtime";
-import * as r from "react";
-import { X as B } from "lucide-react";
-import { CalendarMonth as E } from "../../../icons/index.js";
-import { parse as T, isValid as j } from "date-fns";
-import { cn as R, maskDate as $ } from "../../../lib/utils.js";
-import { Input as X } from "../input.js";
-import { Popover as q, PopoverTrigger as z, PopoverContent as G } from "../popover.js";
-import { Calendar as H } from "../calendar.js";
-const f = (e) => `${(e.month + 1).toString().padStart(2, "0")}/${e.year}`, J = r.forwardRef(
+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(
   ({
-    value: e,
-    onChange: a,
-    placeholder: C = "Select Month",
-    minDate: k,
-    maxDate: S,
-    fromYear: D,
+    value: t,
+    onChange: i,
+    placeholder: D = "Select Month",
+    minDate: P,
+    maxDate: x,
+    fromYear: k,
     toYear: w,
-    showFooter: i = !0,
-    disabled: u,
-    className: x,
-    ...I
-  }, N) => {
-    const [l, p] = r.useState(!1), [c, s] = r.useState(e), [M, h] = r.useState(e ? f(e) : ""), [A, m] = r.useState(() => e ? new Date(e.year, e.month, 1) : /* @__PURE__ */ new Date());
-    r.useEffect(() => {
-      h(e ? f(e) : "");
-    }, [e]), r.useEffect(() => {
-      console.log("[MonthPicker] useEffect - open:", l, "value:", e, "pendingMonth:", c), l && (s(e), m(e ? new Date(e.year, e.month, 1) : /* @__PURE__ */ new Date()));
-    }, [l]);
-    const Y = (n) => {
-      console.log("[MonthPicker] handleSelect called:", n), s(n), i || (console.log("[MonthPicker] No footer - applying immediately"), a?.(n), p(!1));
-    }, O = (n) => {
-      const t = n;
-      h(t ? f(t) : "");
-    }, V = (n) => {
-      const t = n !== void 0 ? n : c;
-      console.log("[MonthPicker] handleApply called, appliedMonth:", n, "pendingMonth:", c, "using:", t), a?.(t), p(!1);
+    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 = () => {
-      console.log("[MonthPicker] handleCancel called"), s(e), p(!1);
-    }, g = () => {
-      console.log("[MonthPicker] handleClear called"), s(void 0), h(""), a?.(void 0), i || p(!1);
-    };
-    return /* @__PURE__ */ P(q, { open: l, onOpenChange: p, children: [
-      /* @__PURE__ */ o(z, { asChild: !0, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-        X,
+      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);
+        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);
+      }
+    }, j = () => {
+      if (!n) {
+        if (h === "") {
+          y();
+          return;
+        }
+        l(o ? d(o) : "");
+      }
+    }, 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,
         {
-          ref: N,
-          value: M,
-          onChange: (n) => {
-            const t = $(n.target.value, "MM/yyyy");
-            if (h(t), t === "") {
-              s(void 0), i || a?.(void 0);
-              return;
-            }
-            const d = T(t, "MM/yyyy", /* @__PURE__ */ new Date());
-            if (j(d)) {
-              const y = { month: d.getMonth(), year: d.getFullYear() };
-              s(y), m(d), i || a?.(y);
-            }
-          },
-          onBlur: () => {
-            if (M === "") {
-              g();
-              return;
-            }
-            h(c ? f(c) : "");
-          },
-          onClick: (n) => l && n.stopPropagation(),
-          placeholder: l ? "MM/YYYY" : C,
-          disabled: u,
-          className: R("cursor-pointer", x),
-          suffix: /* @__PURE__ */ P("div", { className: "flex items-center gap-1", children: [
-            e && !u && /* @__PURE__ */ o(
-              B,
+          ref: V,
+          value: B,
+          onChange: O,
+          onBlur: j,
+          onClick: (e) => n && e.stopPropagation(),
+          placeholder: n ? "MM/YYYY" : D,
+          disabled: M,
+          "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: "h-4 w-4 cursor-pointer hover:text-foreground",
-                onClick: (n) => {
-                  n.stopPropagation(), g();
+                onClick: (e) => {
+                  e.stopPropagation(), y();
                 }
               }
             ),
-            /* @__PURE__ */ o(E, { className: "h-4 w-4 text-secondary-foreground" })
+            /* @__PURE__ */ a(R, { className: "h-4 w-4 text-secondary-foreground" })
           ] }),
-          ...I
+          ...A
         }
       ) }) }),
-      /* @__PURE__ */ o(
-        G,
+      /* @__PURE__ */ a(
+        K,
         {
           className: "w-auto p-0",
           align: "start",
-          onOpenAutoFocus: (n) => n.preventDefault(),
-          onInteractOutside: (n) => n.preventDefault(),
-          children: /* @__PURE__ */ o(
-            H,
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ a(
+            L,
             {
               pickerType: "month",
               monthMode: "single",
-              selectedMonths: c,
-              onMonthSelect: Y,
-              onPendingChange: O,
-              month: A,
-              onMonthChange: m,
-              fromDate: k,
-              toDate: S,
-              fromYear: D,
+              selectedMonths: o,
+              onMonthSelect: I,
+              month: Y,
+              onMonthChange: u,
+              fromDate: P,
+              toDate: x,
+              fromYear: k,
               toYear: w,
-              showFooter: i,
-              onApply: V,
+              showFooter: r,
+              onApply: T,
               onCancel: v,
-              onClear: g
+              onClear: y
             }
           )
         }
@@ -116,7 +113,7 @@ const f = (e) => `${(e.month + 1).toString().padStart(2, "0")}/${e.year}`, J = r
     ] });
   }
 );
-J.displayName = "MonthPicker";
+Q.displayName = "MonthPicker";
 export {
-  J as MonthPicker
+  Q as MonthPicker
 };

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

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