impact-nova 1.5.14 → 1.6.0

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

@@ -1,15 +1,15 @@
-import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import * as s from "react";
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import * as r from "react";
 import { X as me } from "lucide-react";
 import { CalendarMonth as he, Info as ue } from "../../../icons/index.js";
-import { format as i, isValid as C, parse as D } from "date-fns";
-import { cn as N, padValidDateString as j, maskDate as B } from "../../../lib/utils.js";
-import { Popover as ge, PopoverTrigger as xe, PopoverContent as be } from "../popover.js";
+import { format as c, isValid as N, parse as k } from "date-fns";
+import { cn as C, padValidDateString as j, maskDate as B } from "../../../lib/utils.js";
+import { Popover as xe, PopoverTrigger as ge, PopoverContent as be } from "../popover.js";
 import { Calendar as we } from "../calendar.js";
 import { Tooltip as O, TooltipTrigger as z, TooltipContent as H } from "../tooltip.js";
 import { getDateFnsLocale as ye } from "../../../i18n/getDateFnsLocale.js";
 import { useImpactNovaI18n as Pe } from "../../../i18n/ImpactNovaI18nContext.js";
-const Ce = s.forwardRef(
+const Ne = r.forwardRef(
   ({
     value: e,
     onChange: h,
@@ -22,196 +22,198 @@ const Ce = s.forwardRef(
     endMonth: Q,
     showFooter: u = !0,
     disabled: b,
-    label: V,
-    helperText: v,
-    prefix: De,
-    prefixClick: Ne,
-    isError: R,
+    label: v,
+    helperText: V,
+    prefix: ke,
+    prefixClick: Ce,
+    isError: D,
     size: M,
     required: U,
     className: W,
     ...Y
   }, Z) => {
-    const { locale: E, t: I } = Pe(), o = s.useMemo(() => ye(E), [E]), $ = X ?? I("datePicker.startDate"), _ = q ?? I("datePicker.endDate"), T = s.useRef(null), F = s.useRef(null);
-    s.useRef(null), s.useRef(null), s.useImperativeHandle(Z, () => T.current);
-    const [a, S] = s.useState(!1), [w, p] = s.useState(e), [y, g] = s.useState(e?.from ? i(e.from, t, { locale: o }) : ""), [P, x] = s.useState(e?.to ? i(e.to, t, { locale: o }) : ""), [ee, k] = s.useState(e?.from || /* @__PURE__ */ new Date());
-    s.useEffect(() => {
-      a || (g(e?.from ? i(e.from, t, { locale: o }) : ""), x(e?.to ? i(e.to, t, { locale: o }) : ""), p(e));
-    }, [e, t, a, o]), s.useEffect(() => {
-      a && (p(e), g(e?.from ? i(e.from, t, { locale: o }) : ""), x(e?.to ? i(e.to, t, { locale: o }) : ""), k(e?.from || /* @__PURE__ */ new Date()));
-    }, [a, e, t, o]);
+    const { locale: E, t: S } = Pe(), o = r.useMemo(() => ye(E), [E]), $ = X ?? S("datePicker.startDate"), _ = q ?? S("datePicker.endDate"), T = r.useRef(null), F = r.useRef(null);
+    r.useRef(null), r.useRef(null), r.useImperativeHandle(Z, () => T.current);
+    const [d, R] = r.useState(!1), [w, p] = r.useState(e), [y, x] = r.useState(e?.from ? c(e.from, t, { locale: o }) : ""), [P, g] = r.useState(e?.to ? c(e.to, t, { locale: o }) : ""), [ee, I] = r.useState(e?.from || /* @__PURE__ */ new Date());
+    r.useEffect(() => {
+      d || (x(e?.from ? c(e.from, t, { locale: o }) : ""), g(e?.to ? c(e.to, t, { locale: o }) : ""), p(e));
+    }, [e, t, d, o]), r.useEffect(() => {
+      d && (p(e), x(e?.from ? c(e.from, t, { locale: o }) : ""), g(e?.to ? c(e.to, t, { locale: o }) : ""), I(e?.from || /* @__PURE__ */ new Date()));
+    }, [d, e, t, o]);
     const te = (n) => {
-      p(n), n?.from && g(i(n.from, t, { locale: o })), n?.to && x(i(n.to, t, { locale: o })), u || n?.from && n?.to && n.from.getTime() !== n.to.getTime() && (h?.(n), S(!1));
+      p(n), n?.from && x(c(n.from, t, { locale: o })), n?.to && g(c(n.to, t, { locale: o })), u || n?.from && n?.to && n.from.getTime() !== n.to.getTime() && (h?.(n), R(!1));
     }, ne = (n) => {
-      let r = n !== void 0 ? n : w;
-      r?.from && !r.to && (r = { from: r.from, to: r.from }), h?.(r), S(!1);
+      let l = n !== void 0 ? n : w;
+      l?.from && !l.to && (l = { from: l.from, to: l.from }), h?.(l), R(!1);
     }, oe = () => {
-      p(e), g(e?.from ? i(e.from, t, { locale: o }) : ""), x(e?.to ? i(e.to, t, { locale: o }) : ""), S(!1);
+      p(e), x(e?.from ? c(e.from, t, { locale: o }) : ""), g(e?.to ? c(e.to, t, { locale: o }) : ""), R(!1);
     }, A = () => {
-      p(void 0), g(""), x(""), h?.(void 0), u || S(!1);
-    }, re = (n) => {
-      const r = n.target.value, d = B(r, t, y);
-      if (g(d), d === "") {
-        const c = { from: void 0, to: w?.to };
-        p(c), u || h?.(c);
+      p(void 0), x(""), g(""), h?.(void 0), u || R(!1);
+    }, le = (n) => {
+      const l = n.target.value, a = B(l, t, y);
+      if (x(a), a === "") {
+        const i = { from: void 0, to: w?.to };
+        p(i), u || h?.(i);
         return;
       }
-      const f = D(d, t, /* @__PURE__ */ new Date(), { locale: o });
-      if (C(f) && d.length === t.length) {
-        const c = { from: f, to: w?.to };
-        p(c), k(f), u || h?.(c);
+      const f = k(a, t, /* @__PURE__ */ new Date(), { locale: o });
+      if (N(f) && a.length === t.length) {
+        const i = { from: f, to: w?.to };
+        p(i), I(f), u || h?.(i);
       }
-    }, le = (n) => {
-      const r = n.target.value, d = B(r, t, P);
-      if (x(d), d === "") {
-        const c = { from: w?.from, to: void 0 };
-        p(c), u || h?.(c);
+    }, se = (n) => {
+      const l = n.target.value, a = B(l, t, P);
+      if (g(a), a === "") {
+        const i = { from: w?.from, to: void 0 };
+        p(i), u || h?.(i);
         return;
       }
-      const f = D(d, t, /* @__PURE__ */ new Date(), { locale: o });
-      if (C(f) && d.length === t.length) {
-        const c = { from: w?.from, to: f };
-        p(c), f && k(f), u || h?.(c);
+      const f = k(a, t, /* @__PURE__ */ new Date(), { locale: o });
+      if (N(f) && a.length === t.length) {
+        const i = { from: w?.from, to: f };
+        p(i), f && I(f), u || h?.(i);
       }
     }, L = () => {
-      if (a) return;
-      const n = j(y, t), r = j(P, t), d = D(n, t, /* @__PURE__ */ new Date(), { locale: o }), f = D(r, t, /* @__PURE__ */ new Date(), { locale: o }), c = C(d) && n.length === t.length, pe = C(f) && r.length === t.length;
-      !c || !pe ? (g(e?.from ? i(e.from, t, { locale: o }) : ""), x(e?.to ? i(e.to, t, { locale: o }) : ""), p(e)) : (g(n), x(r), u || h?.({ from: d, to: f }));
-    }, se = e?.from ? i(e.from, t, { locale: o }) : "", ie = e?.to ? i(e.to, t, { locale: o }) : "", ce = y !== se, de = P !== ie, ae = y.length === t.length && !C(D(y, t, /* @__PURE__ */ new Date(), { locale: o })), fe = P.length === t.length && !C(D(P, t, /* @__PURE__ */ new Date(), { locale: o }));
-    return /* @__PURE__ */ m("div", { className: "w-full space-y-1.5 min-w-[240px]", "data-component": "date-range-picker", "data-disabled": b || void 0, children: [
-      V && /* @__PURE__ */ m(
-        "label",
-        {
-          className: N(
-            "text-xs font-medium leading-[18px] text-[#60697d]",
-            b && "opacity-70",
-            R && "text-destructive"
-          ),
-          children: [
-            V,
-            " ",
-            U && /* @__PURE__ */ l("span", { className: "text-destructive", children: "*" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ m(ge, { open: a, onOpenChange: S, children: [
-        /* @__PURE__ */ l(xe, { asChild: !0, children: /* @__PURE__ */ m(
-          "div",
+      if (d) return;
+      const n = j(y, t), l = j(P, t), a = k(n, t, /* @__PURE__ */ new Date(), { locale: o }), f = k(l, t, /* @__PURE__ */ new Date(), { locale: o }), i = N(a) && n.length === t.length, pe = N(f) && l.length === t.length;
+      !i || !pe ? (x(e?.from ? c(e.from, t, { locale: o }) : ""), g(e?.to ? c(e.to, t, { locale: o }) : ""), p(e)) : (x(n), g(l), u || h?.({ from: a, to: f }));
+    }, re = e?.from ? c(e.from, t, { locale: o }) : "", ce = e?.to ? c(e.to, t, { locale: o }) : "", ie = y !== re, ae = P !== ce, de = y.length === t.length && !N(k(y, t, /* @__PURE__ */ new Date(), { locale: o })), fe = P.length === t.length && !N(k(P, t, /* @__PURE__ */ new Date(), { locale: o }));
+    return /* @__PURE__ */ m("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "date-range-picker", "data-disabled": b || void 0, children: [
+      /* @__PURE__ */ m("div", { className: "flex flex-col gap-[6px]", children: [
+        v && /* @__PURE__ */ m(
+          "label",
           {
-            "data-state": a ? "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",
-              R ? "border-destructive hover:border-destructive" : "border-input",
-              M === "sm" ? "h-6" : M === "md" ? "h-[28px]" : "h-8",
-              b && "pointer-events-none opacity-100 bg-disabled-secondary-bg border-border text-disabled-text hover:border-border",
-              "cursor-pointer",
-              W
+            className: C(
+              "text-xs font-medium leading-[18px] text-content-tertiary",
+              b && "opacity-70",
+              D && "text-destructive"
             ),
             children: [
-              /* @__PURE__ */ m("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
-                /* @__PURE__ */ l(
-                  "input",
-                  {
-                    ref: T,
-                    type: "text",
-                    value: y,
-                    onChange: re,
-                    onBlur: L,
-                    onClick: (n) => a && n.stopPropagation(),
-                    placeholder: a ? t : $,
-                    disabled: !!b,
-                    "data-field": "start",
-                    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",
-                      ae ? "text-destructive" : ce ? "text-muted-foreground" : ""
-                    ),
-                    ...Y
-                  }
-                ),
-                /* @__PURE__ */ l(
-                  "input",
-                  {
-                    ref: F,
-                    type: "text",
-                    value: P,
-                    onChange: le,
-                    onBlur: L,
-                    onClick: (n) => a && n.stopPropagation(),
-                    placeholder: a ? t : _,
-                    disabled: !!b,
-                    "data-field": "end",
-                    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",
-                      fe ? "text-destructive" : de ? "text-muted-foreground" : ""
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ m("div", { className: "flex items-center gap-1 shrink-0", children: [
-                e?.from && !b && /* @__PURE__ */ m(O, { children: [
-                  /* @__PURE__ */ l(z, { asChild: !0, children: /* @__PURE__ */ l(
-                    me,
+              v,
+              " ",
+              U && /* @__PURE__ */ s("span", { className: "text-destructive", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ m(xe, { open: d, onOpenChange: R, children: [
+          /* @__PURE__ */ s(ge, { asChild: !0, children: /* @__PURE__ */ m(
+            "div",
+            {
+              "data-state": d ? "open" : "closed",
+              className: C(
+                "flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
+                D ? "border-destructive hover:border-destructive" : "border-field",
+                M === "sm" ? "h-6" : M === "md" ? "h-[28px]" : "h-8",
+                b && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+                "cursor-pointer",
+                W
+              ),
+              children: [
+                /* @__PURE__ */ m("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
+                  /* @__PURE__ */ s(
+                    "input",
                     {
-                      className: "h-4 w-4 cursor-pointer hover:text-foreground text-muted-foreground",
-                      onClick: (n) => {
-                        n.stopPropagation(), A();
-                      }
+                      ref: T,
+                      type: "text",
+                      value: y,
+                      onChange: le,
+                      onBlur: L,
+                      onClick: (n) => d && n.stopPropagation(),
+                      placeholder: d ? t : $,
+                      disabled: !!b,
+                      "data-field": "start",
+                      className: C(
+                        "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
+                        de ? "text-destructive" : ie ? "text-content-muted" : ""
+                      ),
+                      ...Y
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    "input",
+                    {
+                      ref: F,
+                      type: "text",
+                      value: P,
+                      onChange: se,
+                      onBlur: L,
+                      onClick: (n) => d && n.stopPropagation(),
+                      placeholder: d ? t : _,
+                      disabled: !!b,
+                      "data-field": "end",
+                      className: C(
+                        "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
+                        fe ? "text-destructive" : ae ? "text-content-muted" : ""
+                      )
                     }
-                  ) }),
-                  /* @__PURE__ */ l(H, { variant: "tertiary", side: "top", children: I("calendar.clear") })
+                  )
                 ] }),
-                /* @__PURE__ */ m(O, { children: [
-                  /* @__PURE__ */ l(z, { asChild: !0, children: /* @__PURE__ */ l(he, { className: "h-4 w-4 text-secondary-foreground" }) }),
-                  /* @__PURE__ */ l(H, { variant: "tertiary", side: "top", children: I("datePicker.selectMonthRange") })
+                /* @__PURE__ */ m("div", { className: "flex items-center gap-1 shrink-0", children: [
+                  e?.from && !b && /* @__PURE__ */ m(O, { children: [
+                    /* @__PURE__ */ s(z, { asChild: !0, children: /* @__PURE__ */ s(
+                      me,
+                      {
+                        className: "h-4 w-4 cursor-pointer hover:text-content text-content-muted",
+                        onClick: (n) => {
+                          n.stopPropagation(), A();
+                        }
+                      }
+                    ) }),
+                    /* @__PURE__ */ s(H, { variant: "tertiary", side: "top", children: S("calendar.clear") })
+                  ] }),
+                  /* @__PURE__ */ m(O, { children: [
+                    /* @__PURE__ */ s(z, { asChild: !0, children: /* @__PURE__ */ s(he, { className: "h-4 w-4 text-secondary-foreground" }) }),
+                    /* @__PURE__ */ s(H, { variant: "tertiary", side: "top", children: S("datePicker.selectMonthRange") })
+                  ] })
                 ] })
-              ] })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ l(
-          be,
-          {
-            className: "w-auto p-0",
-            align: "start",
-            onOpenAutoFocus: (n) => n.preventDefault(),
-            children: /* @__PURE__ */ l(
-              we,
-              {
-                mode: "range",
-                selected: w,
-                onSelect: te,
-                month: ee,
-                onMonthChange: k,
-                disabled: { before: G, after: J },
-                startMonth: K,
-                endMonth: Q,
-                showFooter: u,
-                onApply: ne,
-                onCancel: oe,
-                onClear: A,
-                captionLayout: "dropdown"
-              }
-            )
-          }
-        )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ s(
+            be,
+            {
+              className: "w-auto p-0",
+              align: "start",
+              onOpenAutoFocus: (n) => n.preventDefault(),
+              children: /* @__PURE__ */ s(
+                we,
+                {
+                  mode: "range",
+                  selected: w,
+                  onSelect: te,
+                  month: ee,
+                  onMonthChange: I,
+                  disabled: { before: G, after: J },
+                  startMonth: K,
+                  endMonth: Q,
+                  showFooter: u,
+                  onApply: ne,
+                  onCancel: oe,
+                  onClear: A,
+                  captionLayout: "dropdown"
+                }
+              )
+            }
+          )
+        ] })
       ] }),
-      v && /* @__PURE__ */ m("div", { className: N("flex items-center gap-1", R && "text-destructive"), children: [
-        !R && /* @__PURE__ */ l(ue, { size: 10, className: "shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ l(
+      V && /* @__PURE__ */ m("div", { className: C("flex items-center gap-[6px]", D && "text-destructive"), children: [
+        !D && /* @__PURE__ */ s(ue, { size: 10, className: "shrink-0 text-content-muted" }),
+        /* @__PURE__ */ s(
           "p",
           {
-            className: N(
-              "text-[10px] text-[#7a8294]",
-              R && "text-destructive"
+            className: C(
+              "text-[10px] leading-4 text-navigation-muted",
+              D && "text-destructive"
             ),
-            children: v
+            children: V
           }
         )
       ] })
     ] });
   }
 );
-Ce.displayName = "DateRangePicker";
+Ne.displayName = "DateRangePicker";
 export {
-  Ce as DateRangePicker
+  Ne as DateRangePicker
 };

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

@@ -25,28 +25,28 @@ const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt =
   }, E) => {
     const { t: m } = et(), $ = V ?? m("datePicker.selectMonth"), w = o.useRef(null);
     o.useRef(null), o.useImperativeHandle(E, () => w.current);
-    const [r, h] = o.useState(!1), [S, a] = o.useState(t), [l, i] = o.useState(t ? c(t) : ""), [b, g] = o.useState(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date());
+    const [r, f] = o.useState(!1), [S, a] = o.useState(t), [l, i] = o.useState(t ? c(t) : ""), [b, g] = o.useState(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date());
     o.useEffect(() => {
       r || (i(t ? c(t) : ""), a(t));
     }, [r, t]), o.useEffect(() => {
       r && (a(t), g(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date()), i(t ? c(t) : ""));
     }, [r, t]);
     const H = (e) => {
-      a(e), e && i(c(e)), d || (s?.(e), h(!1));
+      a(e), e && i(c(e)), d || (s?.(e), f(!1));
     }, X = (e) => {
-      s?.(e !== void 0 ? e : S), h(!1);
+      s?.(e !== void 0 ? e : S), f(!1);
     }, q = () => {
-      a(t), i(t ? c(t) : ""), h(!1);
+      a(t), i(t ? c(t) : ""), f(!1);
     }, k = () => {
-      a(void 0), i(""), s?.(void 0), d || h(!1);
+      a(void 0), i(""), s?.(void 0), d || f(!1);
     }, z = (e) => {
-      const p = e.target.value, f = W(p, "MM/yyyy", l);
-      if (i(f), f === "") {
+      const p = e.target.value, h = W(p, "MM/yyyy", l);
+      if (i(h), h === "") {
         a(void 0), d || s?.(void 0);
         return;
       }
-      const y = C(f, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (u(y) && f.length === 7) {
+      const y = C(h, "MM/yyyy", /* @__PURE__ */ new Date());
+      if (u(y) && h.length === 7) {
         const x = { month: y.getMonth(), year: y.getFullYear() };
         a(x), g(y), d || s?.(x);
       }
@@ -56,11 +56,11 @@ const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt =
       if (!u(p) || e.length !== 7)
         i(t ? c(t) : ""), a(t);
       else if (i(e), !d) {
-        const f = { month: p.getMonth(), year: p.getFullYear() };
-        s?.(f);
+        const h = { month: p.getMonth(), year: p.getFullYear() };
+        s?.(h);
       }
     }, D = (t ? c(t) : "") !== l, J = l.length === 7 && !u(C(l, "MM/yyyy", /* @__PURE__ */ new Date()));
-    return /* @__PURE__ */ M(_, { open: r, onOpenChange: h, children: [
+    return /* @__PURE__ */ M(_, { open: r, onOpenChange: f, children: [
       /* @__PURE__ */ n(F, { asChild: !0, children: /* @__PURE__ */ n("div", { "data-component": "month-picker", "data-state": r ? "open" : "closed", "data-pending": D || void 0, children: /* @__PURE__ */ n(
         Z,
         {
@@ -74,7 +74,7 @@ const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt =
           "data-form-control": "input",
           className: Q(
             "cursor-pointer",
-            J ? "text-destructive" : D ? "text-muted-foreground" : "",
+            J ? "text-destructive" : D ? "text-content-muted" : "",
             j
           ),
           suffix: /* @__PURE__ */ M("div", { className: "flex items-center gap-1", children: [
@@ -82,7 +82,7 @@ const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt =
               /* @__PURE__ */ n(T, { asChild: !0, children: /* @__PURE__ */ n(
                 K,
                 {
-                  className: "h-4 w-4 cursor-pointer hover:text-foreground",
+                  className: "h-4 w-4 cursor-pointer hover:text-content",
                   onClick: (e) => {
                     e.stopPropagation(), k();
                   }