impact-nova 2.0.8 → 2.1.0-alpha.1

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

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

package/dist/components/ui/date-picker/index.d.ts

@@ -1,18 +0,0 @@
-export { DatePicker } from './date-picker';
-export type { DatePickerProps } from '../types/date-picker.types';
-export { MonthPicker } from './month-picker';
-export type { MonthPickerProps } from '../types/date-picker.types';
-export { MonthRangePicker } from './month-range-picker';
-export type { MonthRangePickerProps } from '../types/date-picker.types';
-export { DateRangePicker } from './date-range-picker';
-export type { DateRangePickerProps } from '../types/date-picker.types';
-export { WeekPicker } from './week-picker';
-export type { WeekPickerProps } from '../types/date-picker.types';
-export { WeekRangePicker } from './week-range-picker';
-export type { WeekRangePickerProps } from '../types/date-picker.types';
-export { MultiDatePicker } from './multi-date-picker';
-export type { MultiDatePickerProps } from '../types/date-picker.types';
-export { MultiMonthPicker } from './multi-month-picker';
-export type { MultiMonthPickerProps } from '../types/date-picker.types';
-export { MultiWeekPicker } from './multi-week-picker';
-export type { MultiWeekPickerProps } from '../types/date-picker.types';

package/dist/components/ui/date-picker/month-picker.d.ts

@@ -1,3 +0,0 @@
-import { MonthPickerProps } from '../types/date-picker.types';
-import * as React from "react";
-export declare const MonthPicker: React.ForwardRefExoticComponent<MonthPickerProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,138 +0,0 @@
-import { jsxs as M, jsx as n } from "react/jsx-runtime";
-import * as o from "react";
-import { Cross as L, CalendarMonth as Q } from "impact-nova-icons";
-import { isValid as C, parse as x } from "date-fns";
-import { cn as U, padValidDateString as W, maskDate as X } from "../../../lib/utils.js";
-import { Input as Z } from "../input.js";
-import { Popover as _, PopoverAnchor as F, PopoverContent as v } from "../popover.js";
-import { Calendar as tt } from "../calendar.js";
-import { Tooltip as I, TooltipTrigger as N, TooltipContent as T } from "../tooltip.js";
-import { useImpactNovaI18n as et } from "../../../i18n/ImpactNovaI18nContext.js";
-const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt = o.forwardRef(
-  ({
-    value: t,
-    onChange: s,
-    placeholder: V,
-    minDate: A,
-    maxDate: R,
-    startMonth: b,
-    endMonth: j,
-    showFooter: l = !0,
-    disabled: m,
-    className: O,
-    ...Y
-  }, z) => {
-    const { t: y } = et(), B = V ?? y("datePicker.selectMonth"), P = o.useRef(null);
-    o.useRef(null), o.useImperativeHandle(z, () => P.current);
-    const [r, p] = o.useState(!1), [S, a] = o.useState(t), [d, i] = o.useState(t ? c(t) : ""), [E, 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 $ = (e) => {
-      a(e), e && i(c(e)), l || (s?.(e), p(!1));
-    }, H = (e) => {
-      s?.(e !== void 0 ? e : S), p(!1);
-    }, q = () => {
-      a(t), i(t ? c(t) : ""), p(!1);
-    }, k = () => {
-      a(void 0), i(""), s?.(void 0), l || p(!1);
-    }, G = (e) => {
-      const f = e.target.value, h = X(f, "MM/yyyy", d);
-      if (i(h), h === "") {
-        a(void 0), l || s?.(void 0);
-        return;
-      }
-      const u = x(h, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (C(u) && h.length === 7) {
-        const D = { month: u.getMonth(), year: u.getFullYear() };
-        a(D), g(u), l || s?.(D);
-      }
-    }, J = () => {
-      if (r) return;
-      const e = W(d, "MM/yyyy"), f = x(e, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (!C(f) || e.length !== 7)
-        i(t ? c(t) : ""), a(t);
-      else if (i(e), !l) {
-        const h = { month: f.getMonth(), year: f.getFullYear() };
-        s?.(h);
-      }
-    }, w = (t ? c(t) : "") !== d, K = d.length === 7 && !C(x(d, "MM/yyyy", /* @__PURE__ */ new Date()));
-    return /* @__PURE__ */ M(_, { open: m ? !1 : r, onOpenChange: (e) => {
-      m || p(e);
-    }, children: [
-      /* @__PURE__ */ n(F, { asChild: !0, children: /* @__PURE__ */ n("div", { "data-component": "month-picker", "data-state": r ? "open" : "closed", "data-pending": w || void 0, children: /* @__PURE__ */ n(
-        Z,
-        {
-          ref: P,
-          value: d,
-          onChange: G,
-          onBlur: J,
-          onClick: () => !m && p(!0),
-          placeholder: r ? y("datePicker.monthYearFormat") : B,
-          disabled: m,
-          "data-form-control": "input",
-          className: U(
-            "cursor-pointer",
-            K ? "text-destructive" : w ? "text-content-muted" : "",
-            O
-          ),
-          suffix: /* @__PURE__ */ M("div", { className: "flex items-center gap-1", children: [
-            t && !m && /* @__PURE__ */ M(I, { children: [
-              /* @__PURE__ */ n(N, { asChild: !0, children: /* @__PURE__ */ n(
-                "button",
-                {
-                  type: "button",
-                  tabIndex: 0,
-                  "aria-label": y("calendar.clear"),
-                  onClick: (e) => {
-                    e.stopPropagation(), k();
-                  },
-                  className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                  children: /* @__PURE__ */ n(L, { className: "size-3 hover:text-content" })
-                }
-              ) }),
-              /* @__PURE__ */ n(T, { variant: "tertiary", side: "top", children: y("calendar.clear") })
-            ] }),
-            /* @__PURE__ */ M(I, { children: [
-              /* @__PURE__ */ n(N, { asChild: !0, children: /* @__PURE__ */ n(Q, { className: "h-4 w-4 text-secondary-foreground" }) }),
-              /* @__PURE__ */ n(T, { variant: "tertiary", side: "top", children: y("datePicker.selectMonth") })
-            ] })
-          ] }),
-          ...Y
-        }
-      ) }) }),
-      /* @__PURE__ */ n(
-        v,
-        {
-          className: "w-auto p-0",
-          align: "start",
-          onOpenAutoFocus: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ n(
-            tt,
-            {
-              pickerType: "month",
-              monthMode: "single",
-              selectedMonths: S,
-              onMonthSelect: $,
-              month: E,
-              onMonthChange: g,
-              disabled: { before: A, after: R },
-              startMonth: b,
-              endMonth: j,
-              showFooter: l,
-              onApply: H,
-              onCancel: q,
-              onClear: k
-            }
-          )
-        }
-      )
-    ] });
-  }
-);
-nt.displayName = "MonthPicker";
-export {
-  nt as MonthPicker
-};

package/dist/components/ui/date-picker/month-range-picker.d.ts

@@ -1,3 +0,0 @@
-import { MonthRangePickerProps } from '../types/date-picker.types';
-import * as React from "react";
-export declare const MonthRangePicker: React.ForwardRefExoticComponent<MonthRangePickerProps & React.RefAttributes<HTMLInputElement>>;