impact-nova 2.0.9 → 2.1.0-alpha.10

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,271 @@
+import { jsx as p, jsxs as P } from "react/jsx-runtime";
+import * as h 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 m = (e, i = "MM/YYYY") => {
+  const A = (e.month + 1).toString().padStart(2, "0");
+  return i === "YYYY/MM" ? `${e.year}/${A}` : `${A}/${e.year}`;
+};
+function u(e) {
+  return { month: e.getMonth(), year: e.getFullYear() };
+}
+const Ie = h.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(), $ = h.useRef(null), se = h.useRef(null), c = h.useMemo(
+      () => a === "YYYY/MM" ? "yyyy/MM" : "MM/yyyy",
+      [a]
+    );
+    h.useImperativeHandle(oe, () => $.current);
+    const [d, g] = h.useState(!1), V = h.useRef(!1), [E, x] = h.useState(e), [y, D] = h.useState(e?.from ? m(e.from, a) : ""), [k, S] = h.useState(e?.to ? m(e.to, a) : ""), [ie, N] = h.useState(() => e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date());
+    h.useEffect(() => {
+      d || (D(e?.from ? m(e.from, a) : ""), S(e?.to ? m(e.to, a) : ""), x(e));
+    }, [d, e, a]), h.useEffect(() => {
+      d && (x(e), D(e?.from ? m(e.from, a) : ""), S(e?.to ? m(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(m(n.from, a)), n?.to && S(m(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 ? m(e.from, a) : ""), S(e?.to ? m(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 ? m(e.from, a) : "") : o && D(t), k && !f ? S(e?.to ? m(e.to, a) : "") : f && S(n), o && f && !M ? i?.({
+        from: u(s),
+        to: u(r)
+      }) : o && !M ? i?.({
+        from: u(s),
+        to: e?.to
+      }) : f && !M && i?.({
+        from: e?.from,
+        to: u(r)
+      });
+    }, pe = e?.from ? m(e.from, a) : "", me = e?.to ? m(e.to, a) : "", he = y !== pe, ue = k !== me, 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__ */ p("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__ */ p(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__ */ p(
+                  "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: u(r),
+                          to: u(o)
+                        }) : f ? i?.({
+                          from: u(r),
+                          to: e?.to
+                        }) : C && i?.({
+                          from: e?.from,
+                          to: u(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" : he ? "text-content-placeholder" : ""
+                    ),
+                    ...re
+                  }
+                ),
+                /* @__PURE__ */ p(
+                  "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: u(r),
+                          to: u(o)
+                        }) : f ? i?.({
+                          from: u(r),
+                          to: e?.to
+                        }) : C && i?.({
+                          from: e?.from,
+                          to: u(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" : ue ? "text-content-placeholder" : ""
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ P("div", { className: "flex items-center gap-1 shrink-0", children: [
+                e?.from && !l && /* @__PURE__ */ P(G, { children: [
+                  /* @__PURE__ */ p(J, { asChild: !0, children: /* @__PURE__ */ p(
+                    "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__ */ p(we, { className: "size-3 hover:text-content text-content-icon" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ p(L, { variant: "tertiary", side: "top", children: b("calendar.clear") })
+                ] }),
+                /* @__PURE__ */ P(G, { children: [
+                  /* @__PURE__ */ p(J, { asChild: !0, children: /* @__PURE__ */ p("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__ */ p(Ye, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+                  /* @__PURE__ */ p(L, { variant: "tertiary", side: "top", children: b("datePicker.selectMonthRange") })
+                ] })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ p(
+          ke,
+          {
+            className: "w-auto p-0",
+            align: "start",
+            "aria-label": b("datePicker.selectMonthRange"),
+            onOpenAutoFocus: (t) => {
+              V.current || t.preventDefault(), V.current = !1;
+            },
+            children: /* @__PURE__ */ p(
+              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>>;