impact-nova 2.0.8 → 2.1.0-alpha.1

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

@@ -0,0 +1,271 @@
+import { jsx as m, jsxs as P } from "react/jsx-runtime";
+import * as u from "react";
+import { Cross as we, CalendarMonth as Ye } from "impact-nova-icons";
+import { isValid as w, parse as Y } from "date-fns";
+import { cn as v, padValidDateString as R, maskDate as q } from "../../../lib/utils.js";
+import { useFieldChrome as be } from "../../../lib/primitives/use-field-chrome.js";
+import { Popover as xe, PopoverAnchor as ye, PopoverContent as ke } from "../../feedback/popover/popover.js";
+import { Calendar as De } from "../../data-display/calendar/calendar.js";
+import { Tooltip as G, TooltipTrigger as J, TooltipContent as L } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as Se } from "../../../i18n/use-impact-nova-i18n.js";
+import { coerceMonthRangeApply as Ee, isMonthRangeSelection as Pe } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as Re } from "../../../lib/date-bounds-matcher.js";
+const p = (e, i = "MM/YYYY") => {
+  const A = (e.month + 1).toString().padStart(2, "0");
+  return i === "YYYY/MM" ? `${e.year}/${A}` : `${A}/${e.year}`;
+};
+function h(e) {
+  return { month: e.getMonth(), year: e.getFullYear() };
+}
+const Ie = u.forwardRef(
+  ({
+    value: e,
+    onChange: i,
+    placeholder: A,
+    minDate: I,
+    maxDate: Q,
+    startMonth: U,
+    endMonth: W,
+    showFooter: M = !0,
+    disabled: l,
+    className: X,
+    error: Z,
+    isError: _,
+    size: K,
+    label: F,
+    helperText: ee,
+    helperTextPosition: te = "absolute",
+    required: ne,
+    prefix: Ve,
+    prefixClick: Ce,
+    displayFormat: a = "MM/YYYY",
+    ...re
+  }, oe) => {
+    const B = Z ?? _, ae = be({
+      label: F,
+      helperText: ee,
+      helperTextPosition: te,
+      error: B,
+      required: ne,
+      disabled: l ?? void 0,
+      rootClassName: "w-full min-w-[240px]"
+    }), { t: b } = Se(), $ = u.useRef(null), se = u.useRef(null), c = u.useMemo(
+      () => a === "YYYY/MM" ? "yyyy/MM" : "MM/yyyy",
+      [a]
+    );
+    u.useImperativeHandle(oe, () => $.current);
+    const [d, g] = u.useState(!1), V = u.useRef(!1), [E, x] = u.useState(e), [y, D] = u.useState(e?.from ? p(e.from, a) : ""), [k, S] = u.useState(e?.to ? p(e.to, a) : ""), [ie, N] = u.useState(() => e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date());
+    u.useEffect(() => {
+      d || (D(e?.from ? p(e.from, a) : ""), S(e?.to ? p(e.to, a) : ""), x(e));
+    }, [d, e, a]), u.useEffect(() => {
+      d && (x(e), D(e?.from ? p(e.from, a) : ""), S(e?.to ? p(e.to, a) : ""), N(e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date()));
+    }, [d, e, a, I]);
+    const ce = (t) => {
+      const n = Pe(t) ? t : void 0;
+      x(n), n?.from && D(p(n.from, a)), n?.to && S(p(n.to, a)), !M && n?.from && n?.to && (n.from.month !== n.to.month || n.from.year !== n.to.year) && (i?.(n), g(!1));
+    }, de = (t) => {
+      const n = Ee(t, E);
+      i?.(n), g(!1);
+    }, T = () => {
+      x(e), D(e?.from ? p(e.from, a) : ""), S(e?.to ? p(e.to, a) : ""), g(!1);
+    }, j = () => {
+      x(void 0), D(""), S(""), i?.(void 0), M || g(!1);
+    }, fe = (t) => {
+      const n = t.target.value, s = q(n, c, y);
+      if (D(s), s === "") {
+        const o = { from: void 0, to: E?.to };
+        x(o), M || i?.(o);
+        return;
+      }
+      const r = Y(s, c, /* @__PURE__ */ new Date());
+      if (w(r) && s.length === 7) {
+        const f = { from: { month: r.getMonth(), year: r.getFullYear() }, to: E?.to };
+        x(f), N(r), M || i?.(f);
+      }
+    }, le = (t) => {
+      const n = t.target.value, s = q(n, c, k);
+      if (S(s), s === "") {
+        const o = { from: E?.from, to: void 0 };
+        x(o), M || i?.(o);
+        return;
+      }
+      const r = Y(s, c, /* @__PURE__ */ new Date());
+      if (w(r) && s.length === 7) {
+        const o = { month: r.getMonth(), year: r.getFullYear() }, f = { from: E?.from, to: o };
+        x(f), N(r), M || i?.(f);
+      }
+    }, O = () => {
+      if (d) return;
+      const t = R(y, c), n = R(k, c), s = Y(t, c, /* @__PURE__ */ new Date()), r = Y(n, c, /* @__PURE__ */ new Date()), o = w(s) && t.length === 7, f = w(r) && n.length === 7;
+      y && !o ? D(e?.from ? p(e.from, a) : "") : o && D(t), k && !f ? S(e?.to ? p(e.to, a) : "") : f && S(n), o && f && !M ? i?.({
+        from: h(s),
+        to: h(r)
+      }) : o && !M ? i?.({
+        from: h(s),
+        to: e?.to
+      }) : f && !M && i?.({
+        from: e?.from,
+        to: h(r)
+      });
+    }, me = e?.from ? p(e.from, a) : "", pe = e?.to ? p(e.to, a) : "", ue = y !== me, he = k !== pe, ge = y.length === 7 && !w(Y(y, c, /* @__PURE__ */ new Date())), Me = k.length === 7 && !w(Y(k, c, /* @__PURE__ */ new Date())), z = b("datePicker.startMonth"), H = b("datePicker.endMonth");
+    return /* @__PURE__ */ m("div", { "data-component": "month-range-picker", "data-disabled": l || void 0, children: ae.wrapControl(
+      /* @__PURE__ */ P(xe, { open: l ? !1 : d, onOpenChange: (t) => {
+        l || g(t);
+      }, children: [
+        /* @__PURE__ */ m(ye, { asChild: !0, children: /* @__PURE__ */ P(
+          "div",
+          {
+            "data-state": d ? "open" : "closed",
+            className: v(
+              "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",
+              B ? "border-destructive hover:border-destructive" : "border-field",
+              K === "sm" ? "h-6" : K === "md" ? "h-[28px]" : "h-8",
+              l && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+              "cursor-pointer",
+              X
+            ),
+            children: [
+              /* @__PURE__ */ P("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
+                /* @__PURE__ */ m(
+                  "input",
+                  {
+                    ref: $,
+                    type: "text",
+                    value: y,
+                    onChange: fe,
+                    onBlur: O,
+                    onClick: () => !l && g(!0),
+                    onKeyDown: (t) => {
+                      if (t.key === "Enter" && !d) {
+                        t.preventDefault();
+                        const n = R(y, c), s = R(k, c), r = Y(n, c, /* @__PURE__ */ new Date()), o = Y(s, c, /* @__PURE__ */ new Date()), f = w(r) && n.length === 7, C = w(o) && s.length === 7;
+                        f && C ? i?.({
+                          from: h(r),
+                          to: h(o)
+                        }) : f ? i?.({
+                          from: h(r),
+                          to: e?.to
+                        }) : C && i?.({
+                          from: e?.from,
+                          to: h(o)
+                        });
+                      }
+                      t.key === "ArrowDown" && !d && !l && (t.preventDefault(), V.current = !0, g(!0)), t.key === "Escape" && d && (t.preventDefault(), T());
+                    },
+                    placeholder: d ? a === "YYYY/MM" ? "YYYY/MM" : b("datePicker.monthYearFormat") : z,
+                    disabled: !!l,
+                    "aria-label": z,
+                    "data-field": "start",
+                    className: v(
+                      "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" : ue ? "text-content-muted" : ""
+                    ),
+                    ...re
+                  }
+                ),
+                /* @__PURE__ */ m(
+                  "input",
+                  {
+                    ref: se,
+                    type: "text",
+                    value: k,
+                    onChange: le,
+                    onBlur: O,
+                    onClick: () => !l && g(!0),
+                    onKeyDown: (t) => {
+                      if (t.key === "Enter" && !d) {
+                        t.preventDefault();
+                        const n = R(y, c), s = R(k, c), r = Y(n, c, /* @__PURE__ */ new Date()), o = Y(s, c, /* @__PURE__ */ new Date()), f = w(r) && n.length === 7, C = w(o) && s.length === 7;
+                        f && C ? i?.({
+                          from: h(r),
+                          to: h(o)
+                        }) : f ? i?.({
+                          from: h(r),
+                          to: e?.to
+                        }) : C && i?.({
+                          from: e?.from,
+                          to: h(o)
+                        });
+                      }
+                      t.key === "ArrowDown" && !d && !l && (t.preventDefault(), V.current = !0, g(!0)), t.key === "Escape" && d && (t.preventDefault(), T());
+                    },
+                    placeholder: d ? a === "YYYY/MM" ? "YYYY/MM" : b("datePicker.monthYearFormat") : H,
+                    disabled: !!l,
+                    "aria-label": H,
+                    "data-field": "end",
+                    className: v(
+                      "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",
+                      Me ? "text-destructive" : he ? "text-content-muted" : ""
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ P("div", { className: "flex items-center gap-1 shrink-0", children: [
+                e?.from && !l && /* @__PURE__ */ P(G, { children: [
+                  /* @__PURE__ */ m(J, { asChild: !0, children: /* @__PURE__ */ m(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: 0,
+                      "aria-label": b("calendar.clear"),
+                      onClick: (t) => {
+                        t.stopPropagation(), j();
+                      },
+                      onKeyDown: (t) => {
+                        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), j());
+                      },
+                      className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                      children: /* @__PURE__ */ m(we, { className: "size-3 hover:text-content text-content-muted" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ m(L, { variant: "tertiary", side: "top", children: b("calendar.clear") })
+                ] }),
+                /* @__PURE__ */ P(G, { children: [
+                  /* @__PURE__ */ m(J, { asChild: !0, children: /* @__PURE__ */ m("button", { type: "button", tabIndex: 0, "aria-label": b("datePicker.selectMonthRange"), onClick: (t) => {
+                    t.stopPropagation(), l || g(!d);
+                  }, onKeyDown: (t) => {
+                    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), l || (V.current = !0, g(!d)));
+                  }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ m(Ye, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+                  /* @__PURE__ */ m(L, { variant: "tertiary", side: "top", children: b("datePicker.selectMonthRange") })
+                ] })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ m(
+          ke,
+          {
+            className: "w-auto p-0",
+            align: "start",
+            "aria-label": b("datePicker.selectMonthRange"),
+            onOpenAutoFocus: (t) => {
+              V.current || t.preventDefault(), V.current = !1;
+            },
+            children: /* @__PURE__ */ m(
+              De,
+              {
+                pickerType: "month",
+                monthMode: "range",
+                selectedMonths: E,
+                onMonthSelect: ce,
+                month: ie,
+                onMonthChange: N,
+                disabled: Re(I, Q),
+                startMonth: U,
+                endMonth: W,
+                showFooter: M,
+                onApply: de,
+                onCancel: T,
+                onClear: j
+              }
+            )
+          }
+        )
+      ] })
+    ) });
+  }
+);
+Ie.displayName = "MonthRangePicker";
+export {
+  Ie as MonthRangePicker
+};

package/dist/components/forms/date-picker/multi-date-picker.d.ts

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

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

@@ -0,0 +1,115 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import * as l from "react";
+import { Cross as w, CalendarMonth as z } from "impact-nova-icons";
+import { format as R } from "date-fns";
+import { cn as B } from "../../../lib/utils.js";
+import { Input as E } from "../input/input.js";
+import { Popover as F, PopoverAnchor as V, PopoverContent as $ } from "../../feedback/popover/popover.js";
+import { Calendar as q } from "../../data-display/calendar/calendar.js";
+import { Tooltip as y, TooltipTrigger as g, TooltipContent as C } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as G } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as H } from "../../../i18n/getDateFnsLocale.js";
+import { coerceDateArrayApply as J, coerceDateArray as K } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as Q } from "../../../lib/date-bounds-matcher.js";
+const U = l.forwardRef(
+  ({
+    value: t,
+    onChange: p,
+    format: D = "MM/dd/yyyy",
+    placeholder: M,
+    minDate: P,
+    maxDate: x,
+    startMonth: A,
+    endMonth: N,
+    showFooter: d = !0,
+    disabled: o,
+    className: k,
+    ...b
+  }, T) => {
+    const { locale: f, t: n } = G(), I = l.useMemo(() => H(f), [f]), L = M ?? n("datePicker.selectMultipleDates"), [m, a] = l.useState(!1), [h, c] = l.useState(t);
+    l.useEffect(() => {
+      c(t);
+    }, [m, t]);
+    const O = (r) => {
+      const i = K(r);
+      c(i), d || p?.(i);
+    }, S = (r) => {
+      const i = J(r, h);
+      p?.(i), a(!1);
+    }, j = () => {
+      c(t), a(!1);
+    }, u = () => {
+      c(void 0), p?.(void 0), d || a(!1);
+    }, v = t && t.length > 0 ? t.length === 1 ? R(t[0], D, { locale: I }) : `${t.length} dates selected` : "";
+    return /* @__PURE__ */ s(F, { open: o ? !1 : m, onOpenChange: (r) => {
+      o || a(r);
+    }, children: [
+      /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        E,
+        {
+          ref: T,
+          value: v,
+          placeholder: L,
+          readOnly: !0,
+          disabled: o,
+          onClick: () => {
+            !o && !m && a(!0);
+          },
+          className: B("cursor-pointer", k),
+          suffix: /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
+            t && t.length > 0 && !o && /* @__PURE__ */ s(y, { children: [
+              /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: 0,
+                  "aria-label": n("calendar.clear"),
+                  onClick: (r) => {
+                    r.stopPropagation(), u();
+                  },
+                  className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                  children: /* @__PURE__ */ e(w, { className: "size-3 hover:text-content" })
+                }
+              ) }),
+              /* @__PURE__ */ e(C, { variant: "tertiary", side: "top", children: n("calendar.clear") })
+            ] }),
+            /* @__PURE__ */ s(y, { children: [
+              /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(z, { className: "h-4 w-4 text-secondary-foreground" }) }),
+              /* @__PURE__ */ e(C, { variant: "tertiary", side: "top", children: n("datePicker.selectMultipleDates") })
+            ] })
+          ] }),
+          ...b
+        }
+      ) }) }),
+      /* @__PURE__ */ e(
+        $,
+        {
+          className: "w-auto p-0",
+          align: "start",
+          "aria-label": n("datePicker.selectMultipleDates"),
+          onOpenAutoFocus: (r) => r.preventDefault(),
+          children: /* @__PURE__ */ e(
+            q,
+            {
+              mode: "multiple",
+              selected: h,
+              onSelect: O,
+              disabled: Q(P, x),
+              startMonth: A,
+              endMonth: N,
+              showFooter: d,
+              onApply: S,
+              onCancel: j,
+              onClear: u,
+              captionLayout: "dropdown"
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+U.displayName = "MultiDatePicker";
+export {
+  U as MultiDatePicker
+};

package/dist/components/forms/date-picker/multi-month-picker.d.ts

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

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

@@ -0,0 +1,132 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import * as l from "react";
+import { Cross as v, CalendarMonth as w } from "impact-nova-icons";
+import { cn as R } from "../../../lib/utils.js";
+import { Input as z } from "../input/input.js";
+import { Popover as E, PopoverAnchor as K, PopoverContent as V } from "../../feedback/popover/popover.js";
+import { Calendar as $ } from "../../data-display/calendar/calendar.js";
+import { Tooltip as M, TooltipTrigger as g, TooltipContent as C } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as B } from "../../../i18n/use-impact-nova-i18n.js";
+import { coerceMonthArrayApply as L, coerceMonthArray as q } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as G } from "../../../lib/date-bounds-matcher.js";
+const H = l.forwardRef(
+  ({
+    value: n,
+    onChange: d,
+    placeholder: P,
+    minDate: m,
+    maxDate: k,
+    startMonth: x,
+    endMonth: b,
+    showFooter: h = !0,
+    disabled: r,
+    className: N,
+    ...A
+  }, O) => {
+    const { t: o } = B(), T = P ?? o("datePicker.selectMultipleMonths"), [i, a] = l.useState(!1), f = l.useRef(!1), [u, c] = l.useState(n);
+    l.useEffect(() => {
+      c(n);
+    }, [i, n]);
+    const D = (e) => {
+      const s = q(e);
+      c(s), h || d?.(s);
+    }, I = (e) => {
+      const s = L(e, u);
+      d?.(s), a(!1);
+    }, S = () => {
+      c(n), a(!1);
+    }, y = () => {
+      c(void 0), d?.(void 0), h || a(!1);
+    }, j = n && n.length > 0 ? n.length === 1 ? `${n[0].month + 1}/${n[0].year}` : o("datePicker.monthsSelected", { count: n.length }) : "";
+    return /* @__PURE__ */ p(E, { open: r ? !1 : i, onOpenChange: (e) => {
+      r || a(e);
+    }, children: [
+      /* @__PURE__ */ t(K, { asChild: !0, children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+        z,
+        {
+          ref: O,
+          value: j,
+          placeholder: T,
+          readOnly: !0,
+          disabled: r,
+          onClick: () => {
+            !r && !i && a(!0);
+          },
+          className: R("cursor-pointer", N),
+          suffix: /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
+            n && n.length > 0 && !r && /* @__PURE__ */ p(M, { children: [
+              /* @__PURE__ */ t(g, { asChild: !0, children: /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: 0,
+                  "aria-label": o("calendar.clear"),
+                  onClick: (e) => {
+                    e.stopPropagation(), y();
+                  },
+                  className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                  children: /* @__PURE__ */ t(v, { className: "size-3 hover:text-content" })
+                }
+              ) }),
+              /* @__PURE__ */ t(C, { variant: "tertiary", side: "top", children: o("calendar.clear") })
+            ] }),
+            /* @__PURE__ */ p(M, { children: [
+              /* @__PURE__ */ t(g, { asChild: !0, children: /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: 0,
+                  "data-component": "calendar-trigger",
+                  "aria-label": o("datePicker.selectMultipleMonths"),
+                  onPointerDown: (e) => {
+                    e.preventDefault(), e.stopPropagation(), r || a(!i);
+                  },
+                  onKeyDown: (e) => {
+                    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), r || (f.current = !0, a(!i)));
+                  },
+                  className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                  children: /* @__PURE__ */ t(w, { className: "h-4 w-4 text-secondary-foreground" })
+                }
+              ) }),
+              /* @__PURE__ */ t(C, { variant: "tertiary", side: "top", children: o("datePicker.selectMultipleMonths") })
+            ] })
+          ] }),
+          ...A
+        }
+      ) }) }),
+      /* @__PURE__ */ t(
+        V,
+        {
+          className: "w-auto p-0",
+          align: "start",
+          "aria-label": o("datePicker.selectMultipleMonths"),
+          onOpenAutoFocus: (e) => {
+            f.current || e.preventDefault(), f.current = !1;
+          },
+          children: /* @__PURE__ */ t(
+            $,
+            {
+              pickerType: "month",
+              monthMode: "multiple",
+              selectedMonths: u,
+              onMonthSelect: D,
+              disabled: G(m, k),
+              startMonth: x,
+              endMonth: b,
+              defaultMonth: m,
+              showFooter: h,
+              onApply: I,
+              onCancel: S,
+              onClear: y,
+              captionLayout: "dropdown"
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+H.displayName = "MultiMonthPicker";
+export {
+  H as MultiMonthPicker
+};

package/dist/components/forms/date-picker/multi-week-picker.d.ts

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

package/dist/components/forms/date-picker/multi-week-picker.js

@@ -0,0 +1,149 @@
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import * as i from "react";
+import { Cross as B, CalendarMonth as q } from "impact-nova-icons";
+import { format as P } from "date-fns";
+import { cn as F } from "../../../lib/utils.js";
+import { Input as G } from "../input/input.js";
+import { Popover as H, PopoverAnchor as J, PopoverContent as Q } from "../../feedback/popover/popover.js";
+import { Calendar as U } from "../../data-display/calendar/calendar.js";
+import { Tooltip as W, TooltipTrigger as b, TooltipContent as x } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as X } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as Y } from "../../../i18n/getDateFnsLocale.js";
+import { coerceWeekArrayApply as Z, coerceWeekArray as _ } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as ee } from "../../../lib/date-bounds-matcher.js";
+const te = (t, a = "MM/dd/yyyy", c) => {
+  const m = P(t.startDate, a, c ? { locale: c } : {}), u = P(t.endDate, a, c ? { locale: c } : {});
+  return `${m} - ${u}`;
+}, re = i.forwardRef(
+  ({
+    value: t,
+    onChange: a,
+    format: c = "MM/dd/yyyy",
+    placeholder: m,
+    minDate: u,
+    maxDate: M,
+    startMonth: D,
+    endMonth: N,
+    showFooter: h = !0,
+    calendarType: w = "calendar",
+    fiscalMode: A = "basic",
+    selectionMode: O = "week",
+    fiscalMonthPattern: S,
+    fiscalYearStartMonth: T = 1,
+    weekStartsOn: v = 1,
+    disabled: n,
+    className: I,
+    ...j
+  }, L) => {
+    const { locale: k, t: s } = X(), R = i.useMemo(() => Y(k), [k]), $ = m ?? s("datePicker.selectWeeks"), [l, o] = i.useState(!1), y = i.useRef(!1), [g, p] = i.useState(t);
+    i.useEffect(() => {
+      p(t);
+    }, [l, t]);
+    const z = (e) => {
+      const d = _(e);
+      p(d), h || a?.(d);
+    }, E = (e) => {
+      const d = Z(e, g);
+      a?.(d), o(!1);
+    }, K = () => {
+      p(t), o(!1);
+    }, C = () => {
+      p(void 0), a?.(void 0), h || o(!1);
+    }, V = t && t.length > 0 ? t.length === 1 ? te(t[0], c, R) : `${t.length} weeks selected` : "";
+    return /* @__PURE__ */ f(H, { open: n ? !1 : l, onOpenChange: (e) => {
+      n || o(e);
+    }, children: [
+      /* @__PURE__ */ r(J, { asChild: !0, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+        G,
+        {
+          ref: L,
+          value: V,
+          placeholder: $,
+          readOnly: !0,
+          disabled: n,
+          onClick: () => {
+            !n && !l && o(!0);
+          },
+          className: F("cursor-pointer", I),
+          suffix: /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
+            t && t.length > 0 && !n && /* @__PURE__ */ f(W, { children: [
+              /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: 0,
+                  "aria-label": s("calendar.clear"),
+                  onClick: (e) => {
+                    e.stopPropagation(), C();
+                  },
+                  className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                  children: /* @__PURE__ */ r(B, { className: "size-3 hover:text-content" })
+                }
+              ) }),
+              /* @__PURE__ */ r(x, { variant: "tertiary", side: "top", children: s("calendar.clear") })
+            ] }),
+            /* @__PURE__ */ f(W, { children: [
+              /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: 0,
+                  "data-component": "calendar-trigger",
+                  "aria-label": s("datePicker.selectWeeks"),
+                  onPointerDown: (e) => {
+                    e.preventDefault(), e.stopPropagation(), n || o(!l);
+                  },
+                  onKeyDown: (e) => {
+                    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), n || (y.current = !0, o(!l)));
+                  },
+                  className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                  children: /* @__PURE__ */ r(q, { className: "h-4 w-4 text-secondary-foreground" })
+                }
+              ) }),
+              /* @__PURE__ */ r(x, { variant: "tertiary", side: "top", children: s("datePicker.selectWeeks") })
+            ] })
+          ] }),
+          ...j
+        }
+      ) }) }),
+      /* @__PURE__ */ r(
+        Q,
+        {
+          className: "w-auto p-0",
+          align: "start",
+          "aria-label": s("datePicker.selectWeeks"),
+          onOpenAutoFocus: (e) => {
+            y.current || e.preventDefault(), y.current = !1;
+          },
+          children: /* @__PURE__ */ r(
+            U,
+            {
+              pickerType: "week",
+              weekMode: "multiple",
+              selectedWeeks: g,
+              onWeekSelect: z,
+              disabled: ee(u, M),
+              startMonth: D,
+              endMonth: N,
+              showFooter: h,
+              calendarType: w,
+              fiscalMode: A,
+              selectionMode: O,
+              fiscalMonthPattern: S,
+              fiscalYearStartMonth: T,
+              weekStartsOn: v,
+              onApply: E,
+              onCancel: K,
+              onClear: C,
+              captionLayout: "dropdown"
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+re.displayName = "MultiWeekPicker";
+export {
+  re as MultiWeekPicker
+};