impact-nova 2.0.8 → 2.1.0-alpha.1

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

@@ -0,0 +1,138 @@
+import { InputProps } from '../input/input.types';
+import { MonthSelection, MonthRange, WeekSelection, WeekRange } from '../../data-display/calendar';
+import { DateRange } from 'react-day-picker';
+export interface DatePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Which day the week starts on. 0 = Sunday, 1 = Monday, etc. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface DateRangePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: DateRange;
+    onChange?: (range: DateRange | undefined) => void;
+    format?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Which day the week starts on. 0 = Sunday, 1 = Monday, etc. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface MonthPickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: MonthSelection;
+    onChange?: (month: MonthSelection | undefined) => void;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+}
+export interface MonthRangePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: MonthRange;
+    onChange?: (range: MonthRange | undefined) => void;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    displayFormat?: "MM/YYYY" | "YYYY/MM";
+}
+export interface WeekPickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: WeekSelection;
+    onChange?: (week: WeekSelection | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Whether to use standard calendar weeks or fiscal weeks. Default: "calendar" */
+    calendarType?: "calendar" | "fiscal";
+    /** Only relevant when calendarType="fiscal". Default: "basic" */
+    fiscalMode?: "basic" | "advanced" | "custom";
+    /** What a click selects. "fiscalMonth" only applies with fiscalMode="advanced"|"custom". Default: "week" */
+    selectionMode?: "week" | "fiscalMonth";
+    /** Array of 12 week-counts per fiscal month, e.g. [4,4,5,4,4,5,4,4,5,4,4,5]. Required for fiscalMode="custom", optional for "advanced" (defaults to 4-4-5). */
+    fiscalMonthPattern?: number[];
+    /** 1-based month where the fiscal year starts. Default: 1 (January) */
+    fiscalYearStartMonth?: number;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface WeekRangePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: WeekRange;
+    onChange?: (range: WeekRange | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Whether to use standard calendar weeks or fiscal weeks. Default: "calendar" */
+    calendarType?: "calendar" | "fiscal";
+    /** Only relevant when calendarType="fiscal". Default: "basic" */
+    fiscalMode?: "basic" | "advanced" | "custom";
+    /** What a click selects. "fiscalMonth" only applies with fiscalMode="advanced"|"custom". Default: "week" */
+    selectionMode?: "week" | "fiscalMonth";
+    /** Array of 12 week-counts per fiscal month, e.g. [4,4,5,4,4,5,4,4,5,4,4,5]. Required for fiscalMode="custom", optional for "advanced" (defaults to 4-4-5). */
+    fiscalMonthPattern?: number[];
+    /** 1-based month where the fiscal year starts. Default: 1 (January) */
+    fiscalYearStartMonth?: number;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface MultiDatePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: Date[];
+    onChange?: (dates: Date[] | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+}
+export interface MultiMonthPickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: MonthSelection[];
+    onChange?: (months: MonthSelection[] | undefined) => void;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+}
+export interface MultiWeekPickerProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'suffix' | 'suffixClick'> {
+    value?: WeekSelection[];
+    onChange?: (weeks: WeekSelection[] | undefined) => void;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    showFooter?: boolean;
+    /** Whether to use standard calendar weeks or fiscal weeks. Default: "calendar" */
+    calendarType?: "calendar" | "fiscal";
+    /** Only relevant when calendarType="fiscal". Default: "basic" */
+    fiscalMode?: "basic" | "advanced" | "custom";
+    /** What a click selects. "fiscalMonth" selects an entire fiscal month block. Default: "week" */
+    selectionMode?: "week" | "fiscalMonth";
+    /** Array of 12 week-counts per fiscal month. Required for fiscalMode="custom", optional for "advanced". */
+    fiscalMonthPattern?: number[];
+    /** 1-based month where the fiscal year starts. Default: 1 (January) */
+    fiscalYearStartMonth?: number;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}

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

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

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

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

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-muted" : "",
+            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>>;