impact-nova 2.5.7 → 2.5.9

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

@@ -1,116 +1,121 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
 import * as n from "react";
-import { Cross as Y, CalendarMonth as Z } from "impact-nova-icons";
+import { Cross as te, CalendarMonth as re } from "impact-nova-icons";
 import { format as b } from "date-fns";
-import { cn as _ } from "../../../lib/utils.js";
-import { Input as ee } from "../input/input.js";
-import { Popover as te, PopoverAnchor as re, PopoverContent as ne } from "../../feedback/popover/popover.js";
-import { Calendar as oe } from "../../data-display/calendar/calendar.js";
+import { cn as ne } from "../../../lib/utils.js";
+import { Input as oe } from "../input/input.js";
+import { Popover as se, PopoverAnchor as ae, PopoverContent as ie } from "../../feedback/popover/popover.js";
+import { Calendar as ce } from "../../data-display/calendar/calendar.js";
 import { Tooltip as x, TooltipTrigger as A, TooltipContent as M } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as se } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as ae } from "../../../i18n/getDateFnsLocale.js";
-import { coerceWeekArrayApply as ce, coerceWeekArray as ie } from "./calendar-selection-adapters.js";
-import { usePickerDismissActionsRef as le, usePickerFooterDismissNudge as pe, handlePickerSurfacePointerDown as de } from "./date-input-behavior.js";
-import { buildDateBoundsMatcher as fe } from "../../../lib/date-bounds-matcher.js";
-const ue = (t, a = "MM/dd/yyyy", c) => {
-  const h = b(t.startDate, a, c ? { locale: c } : {}), y = b(t.endDate, a, c ? { locale: c } : {});
+import { useImpactNovaI18n as le } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as pe } from "../../../i18n/getDateFnsLocale.js";
+import { coerceWeekArrayApply as de, coerceWeekArray as fe } from "./calendar-selection-adapters.js";
+import { usePickerDismissActionsRef as me, usePickerFooterDismissNudge as ue, handlePickerSurfacePointerDown as he } from "./date-input-behavior.js";
+import { buildDateBoundsMatcher as ye } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as ke } from "./fiscal-pass-through.js";
+const ge = (t, a = "MM/dd/yyyy", i) => {
+  const h = b(t.startDate, a, i ? { locale: i } : {}), y = b(t.endDate, a, i ? { locale: i } : {});
   return `${h} - ${y}`;
-}, me = n.forwardRef(
+}, Pe = n.forwardRef(
   ({
     value: t,
     onChange: a,
-    format: c = "MM/dd/yyyy",
+    format: i = "MM/dd/yyyy",
     placeholder: h,
     minDate: y,
     maxDate: N,
     startMonth: T,
     endMonth: R,
     showFooter: d = !0,
-    calendarType: S = "calendar",
-    fiscalMode: w = "basic",
-    selectionMode: v = "week",
+    calendarKind: S,
+    fiscalMode: v = "basic",
+    granularity: w,
     fiscalMonthPattern: I,
     fiscalYearStartMonth: L = 1,
-    weekStartsOn: O = 1,
+    fiscalConfig: O,
+    weekStartsOn: j = 1,
+    showPresets: F,
+    comparison: E,
+    onComparisonChange: K,
     disabled: o,
-    className: j,
-    ...F
-  }, E) => {
-    const { locale: P, t: i } = se(), K = n.useMemo(() => ae(P), [P]), $ = h ?? i("datePicker.selectWeeks"), [l, s] = n.useState(!1), k = n.useRef(!1), g = n.useRef(null), C = le(), { footerFlashKey: z, footerFlashTarget: V, popoverHandlers: q } = pe(d, l, C, g), [f, u] = n.useState(t);
+    className: $,
+    ...z
+  }, V) => {
+    const { locale: P, t: c } = le(), q = n.useMemo(() => pe(P), [P]), B = h ?? c("datePicker.selectWeeks"), [l, s] = n.useState(!1), k = n.useRef(!1), g = n.useRef(null), C = me(), { footerFlashKey: H, footerFlashTarget: G, popoverHandlers: J } = ue(d, l, C, g), [f, m] = n.useState(t);
     n.useEffect(() => {
-      u(t);
+      m(t);
     }, [l, t]);
-    const B = (e) => {
-      const p = ie(e);
-      u(p), d || a?.(p);
-    }, H = (e) => {
-      const p = ce(e, f);
+    const Q = (e) => {
+      const p = fe(e);
+      m(p), d || a?.(p);
+    }, U = (e) => {
+      const p = de(e, f);
       a?.(p), s(!1);
     }, D = () => {
-      u(t), s(!1);
+      m(t), s(!1);
     }, W = () => {
-      u(void 0), a?.(void 0), d || s(!1);
-    }, G = t && t.length > 0 ? t.length === 1 ? ue(t[0], c, K) : `${t.length} weeks selected` : "", J = (e) => {
+      m(void 0), a?.(void 0), d || s(!1);
+    }, X = t && t.length > 0 ? t.length === 1 ? ge(t[0], i, q) : `${t.length} weeks selected` : "", Y = (e) => {
       o || !e && d || s(e);
-    }, Q = n.useCallback(() => {
+    }, Z = n.useCallback(() => {
       const e = f?.length ?? 0, p = t?.length ?? 0;
       return e === p && (f ?? []).every(
-        (U, X) => U.startDate.getTime() === t?.[X]?.startDate.getTime()
+        (_, ee) => _.startDate.getTime() === t?.[ee]?.startDate.getTime()
       ) ? "dismiss" : e > 0 ? "apply" : "cancel";
     }, [f, t]);
     return n.useLayoutEffect(() => {
       C.current = {
         onDismiss: D,
-        resolveFlash: Q
+        resolveFlash: Z
       };
-    }), /* @__PURE__ */ m(te, { open: o ? !1 : l, onOpenChange: J, children: [
-      /* @__PURE__ */ r(re, { asChild: !0, children: /* @__PURE__ */ r(
+    }), /* @__PURE__ */ u(se, { open: o ? !1 : l, onOpenChange: Y, children: [
+      /* @__PURE__ */ r(ae, { asChild: !0, children: /* @__PURE__ */ r(
         "div",
         {
           ref: g,
-          onPointerDown: (e) => de({
+          onPointerDown: (e) => he({
             disabled: o,
             event: e,
             onOpen: () => s(!0),
             focusField: () => g.current?.querySelector("input")?.focus()
           }),
           children: /* @__PURE__ */ r(
-            ee,
+            oe,
             {
-              ref: E,
-              value: G,
-              placeholder: $,
+              ref: V,
+              value: X,
+              placeholder: B,
               readOnly: !0,
               disabled: o,
               onClick: () => {
                 !o && !l && s(!0);
               },
-              className: _("cursor-pointer", j),
-              suffix: /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: [
-                t && t.length > 0 && !o && /* @__PURE__ */ m(x, { children: [
+              className: ne("cursor-pointer", $),
+              suffix: /* @__PURE__ */ u("div", { className: "flex items-center gap-1", children: [
+                t && t.length > 0 && !o && /* @__PURE__ */ u(x, { children: [
                   /* @__PURE__ */ r(A, { asChild: !0, children: /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       tabIndex: 0,
-                      "aria-label": i("calendar.clear"),
+                      "aria-label": c("calendar.clear"),
                       onClick: (e) => {
                         e.stopPropagation(), W();
                       },
                       className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                      children: /* @__PURE__ */ r(Y, { className: "size-3 hover:text-content" })
+                      children: /* @__PURE__ */ r(te, { className: "size-3 hover:text-content" })
                     }
                   ) }),
-                  /* @__PURE__ */ r(M, { variant: "tertiary", side: "top", children: i("calendar.clear") })
+                  /* @__PURE__ */ r(M, { variant: "tertiary", side: "top", children: c("calendar.clear") })
                 ] }),
-                /* @__PURE__ */ m(x, { children: [
+                /* @__PURE__ */ u(x, { children: [
                   /* @__PURE__ */ r(A, { asChild: !0, children: /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       tabIndex: 0,
                       "data-component": "calendar-trigger",
-                      "aria-label": i("datePicker.selectWeeks"),
+                      "aria-label": c("datePicker.selectWeeks"),
                       onPointerDown: (e) => {
                         e.preventDefault(), e.stopPropagation(), o || s(!l);
                       },
@@ -118,47 +123,53 @@ const ue = (t, a = "MM/dd/yyyy", c) => {
                         (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), o || (k.current = !0, s(!l)));
                       },
                       className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                      children: /* @__PURE__ */ r(Z, { className: "h-4 w-4 text-secondary-foreground" })
+                      children: /* @__PURE__ */ r(re, { className: "h-4 w-4 text-secondary-foreground" })
                     }
                   ) }),
-                  /* @__PURE__ */ r(M, { variant: "tertiary", side: "top", children: i("datePicker.selectWeeks") })
+                  /* @__PURE__ */ r(M, { variant: "tertiary", side: "top", children: c("datePicker.selectWeeks") })
                 ] })
               ] }),
-              ...F
+              ...z
             }
           )
         }
       ) }),
       /* @__PURE__ */ r(
-        ne,
+        ie,
         {
           className: "w-auto p-0",
           align: "start",
-          "aria-label": i("datePicker.selectWeeks"),
+          "aria-label": c("datePicker.selectWeeks"),
           onOpenAutoFocus: (e) => {
             k.current || e.preventDefault(), k.current = !1;
           },
-          ...q,
+          ...J,
           children: /* @__PURE__ */ r(
-            oe,
+            ce,
             {
               pickerType: "week",
               weekMode: "multiple",
               selectedWeeks: f,
-              footerFlashKey: z,
-              footerFlashTarget: V,
-              onWeekSelect: B,
-              disabled: fe(y, N),
+              footerFlashKey: H,
+              footerFlashTarget: G,
+              onWeekSelect: Q,
+              disabled: ye(y, N),
               startMonth: T,
               endMonth: R,
               showFooter: d,
-              calendarType: S,
-              fiscalMode: w,
-              selectionMode: v,
-              fiscalMonthPattern: I,
-              fiscalYearStartMonth: L,
-              weekStartsOn: O,
-              onApply: H,
+              ...ke({
+                calendarKind: S,
+                fiscalMode: v,
+                granularity: w,
+                fiscalMonthPattern: I,
+                fiscalYearStartMonth: L,
+                fiscalConfig: O,
+                weekStartsOn: j,
+                showPresets: F,
+                comparison: E,
+                onComparisonChange: K
+              }),
+              onApply: U,
               onCancel: D,
               onClear: W,
               captionLayout: "dropdown"
@@ -169,7 +180,7 @@ const ue = (t, a = "MM/dd/yyyy", c) => {
     ] });
   }
 );
-me.displayName = "MultiWeekPicker";
+Pe.displayName = "MultiWeekPicker";
 export {
-  me as MultiWeekPicker
+  Pe as MultiWeekPicker
 };

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

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

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

@@ -0,0 +1,179 @@
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import * as n from "react";
+import { Cross as Z, CalendarMonth as _ } from "impact-nova-icons";
+import { cn as $ } from "../../../lib/utils.js";
+import { Input as ee } from "../input/input.js";
+import { Calendar as te } from "../../data-display/calendar/calendar.js";
+import { Tooltip as M, TooltipTrigger as x, TooltipContent as R } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as re } from "../../../i18n/use-impact-nova-i18n.js";
+import { buildDateBoundsMatcher as ne } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as oe } from "./fiscal-pass-through.js";
+import { DatePickerShell as ae } from "./date-picker-shell.js";
+import { usePickerDismissActionsRef as ie, usePickerFooterDismissNudge as se, handleReadonlyPickerKeyDown as ce, handlePickerSurfacePointerDown as le } from "./date-input-behavior.js";
+import { formatYearInput as pe } from "../../data-display/calendar/calendar-fiscal-labels.js";
+import { viewMonthFromYear as fe } from "../../data-display/calendar/calendar-year-utils.js";
+const de = n.forwardRef(
+  ({
+    value: t,
+    onChange: f,
+    placeholder: D,
+    minDate: Y,
+    maxDate: N,
+    startMonth: S,
+    endMonth: A,
+    showFooter: c = !0,
+    disabled: o,
+    className: I,
+    calendarKind: O,
+    fiscalMode: T,
+    granularity: w,
+    fiscalMonthPattern: v,
+    fiscalYearStartMonth: K,
+    fiscalConfig: g,
+    showPresets: j,
+    showIntervalCaption: F = !1,
+    ...L
+  }, z) => {
+    const { t: a } = re(), E = D ?? a("datePicker.selectMultipleYears"), H = g?.fyLabel ?? "fy-long", d = n.useRef(null), k = n.useRef(null);
+    n.useImperativeHandle(z, () => d.current);
+    const [i, s] = n.useState(!1), u = n.useRef(!1), P = ie(), { footerFlashKey: V, footerFlashTarget: B, popoverHandlers: q } = se(c, i, P, k), [C, l] = n.useState(t), [G, J] = n.useState(fe(t?.[0]));
+    n.useEffect(() => {
+      i || l(t);
+    }, [i, t]);
+    const m = n.useCallback(() => s(!1), []), Q = oe({
+      calendarKind: O,
+      fiscalMode: T,
+      granularity: w,
+      fiscalMonthPattern: v,
+      fiscalYearStartMonth: K,
+      fiscalConfig: g,
+      showPresets: j
+    }), U = (e) => {
+      const p = Array.isArray(e) && e.length > 0 ? e : void 0;
+      l(p), c || f?.(p);
+    }, W = () => {
+      f?.(C), m();
+    }, h = () => {
+      l(t), m();
+    }, b = () => {
+      l(void 0), f?.(void 0), c || m();
+    };
+    n.useLayoutEffect(() => {
+      P.current = { onDismiss: h, resolveFlash: () => "cancel" };
+    });
+    const X = t && t.length > 0 ? t.length === 1 ? pe(t[0], H) : a("datePicker.yearsSelected", { count: t.length }) : "";
+    return /* @__PURE__ */ r(
+      ae,
+      {
+        open: i,
+        disabled: o,
+        ariaLabel: a("datePicker.selectMultipleYears"),
+        onOpenChange: (e) => {
+          o || s(e);
+        },
+        onOpenAutoFocus: (e) => {
+          u.current || e.preventDefault(), u.current = !1;
+        },
+        popoverHandlers: q,
+        trigger: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: k,
+            "data-component": "multi-year-picker",
+            "data-state": i ? "open" : "closed",
+            onPointerDown: (e) => le({
+              disabled: o,
+              event: e,
+              onOpen: () => s(!0),
+              focusField: () => d.current?.focus()
+            }),
+            children: /* @__PURE__ */ r(
+              ee,
+              {
+                ref: d,
+                value: X,
+                readOnly: !0,
+                onKeyDown: (e) => ce(e, {
+                  disabled: o,
+                  open: i,
+                  onOpen: () => s(!0),
+                  onCancel: h,
+                  onKeyboardOpen: () => {
+                    u.current = !0;
+                  }
+                }),
+                onClick: () => !o && s(!0),
+                placeholder: E,
+                disabled: o,
+                "data-form-control": "input",
+                className: $("cursor-pointer", I),
+                suffix: /* @__PURE__ */ y("div", { className: "flex items-center gap-1", children: [
+                  t && t.length > 0 && !o ? /* @__PURE__ */ y(M, { children: [
+                    /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "aria-label": a("calendar.clear"),
+                        onClick: (e) => {
+                          e.stopPropagation(), b();
+                        },
+                        className: "inline-flex size-4 items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(Z, { className: "size-3 hover:text-content" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(R, { variant: "tertiary", side: "top", children: a("calendar.clear") })
+                  ] }) : null,
+                  /* @__PURE__ */ y(M, { children: [
+                    /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "data-component": "calendar-trigger",
+                        "aria-label": a("datePicker.selectMultipleYears"),
+                        onClick: (e) => {
+                          e.stopPropagation(), o || s((p) => !p);
+                        },
+                        className: "inline-flex items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(_, { className: "h-4 w-4 text-secondary-foreground" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(R, { variant: "tertiary", side: "top", children: a("datePicker.selectMultipleYears") })
+                  ] })
+                ] }),
+                ...L
+              }
+            )
+          }
+        ),
+        children: /* @__PURE__ */ r(
+          te,
+          {
+            pickerType: "year",
+            yearMode: "multiple",
+            selectedYear: C,
+            footerFlashKey: V,
+            footerFlashTarget: B,
+            onYearSelect: U,
+            month: G,
+            onMonthChange: J,
+            disabled: ne(Y, N),
+            startMonth: S,
+            endMonth: A,
+            showFooter: c,
+            onApply: W,
+            onCancel: h,
+            onClear: b,
+            showIntervalCaption: F,
+            ...Q
+          }
+        )
+      }
+    );
+  }
+);
+de.displayName = "MultiYearPicker";
+export {
+  de as MultiYearPicker
+};

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

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

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

@@ -0,0 +1,176 @@
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import * as t from "react";
+import { Cross as Y, CalendarMonth as Z } from "impact-nova-icons";
+import { cn as _ } from "../../../lib/utils.js";
+import { Input as $ } from "../input/input.js";
+import { Calendar as q } from "../../data-display/calendar/calendar.js";
+import { Tooltip as x, TooltipTrigger as b, TooltipContent as R } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as ee } from "../../../i18n/use-impact-nova-i18n.js";
+import { buildDateBoundsMatcher as re } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as te } from "./fiscal-pass-through.js";
+import { DatePickerShell as ne } from "./date-picker-shell.js";
+import { usePickerDismissActionsRef as oe, usePickerFooterDismissNudge as ae, handleReadonlyPickerKeyDown as ie, handlePickerSurfacePointerDown as ce } from "./date-input-behavior.js";
+import { formatQuarterInput as se } from "../../data-display/calendar/calendar-fiscal-labels.js";
+import { viewMonthFromQuarter as le } from "../../data-display/calendar/calendar-quarter-utils.js";
+const pe = t.forwardRef(
+  ({
+    value: n,
+    onChange: u,
+    placeholder: D,
+    minDate: Q,
+    maxDate: v,
+    startMonth: N,
+    endMonth: S,
+    showFooter: s = !0,
+    disabled: o,
+    className: A,
+    calendarKind: I,
+    fiscalMode: O,
+    granularity: T,
+    fiscalMonthPattern: w,
+    fiscalYearStartMonth: M,
+    fiscalConfig: K,
+    showPresets: j,
+    ...F
+  }, z) => {
+    const { t: a } = ee(), E = D ?? a("datePicker.selectQuarter"), d = t.useRef(null), k = t.useRef(null);
+    t.useImperativeHandle(z, () => d.current);
+    const [i, c] = t.useState(!1), P = oe(), { footerFlashKey: H, footerFlashTarget: L, popoverHandlers: V } = ae(s, i, P, k), m = t.useRef(!1), [g, l] = t.useState(n), [B, G] = t.useState(le(n));
+    t.useEffect(() => {
+      i || l(n);
+    }, [i, n]);
+    const p = t.useCallback(() => c(!1), []), J = te({
+      calendarKind: I,
+      fiscalMode: O,
+      granularity: T,
+      fiscalMonthPattern: w,
+      fiscalYearStartMonth: M,
+      fiscalConfig: K,
+      showPresets: j
+    }), U = (e) => {
+      const f = e && !Array.isArray(e) && !("from" in e) && !("to" in e) ? e : void 0;
+      l(f), s || (u?.(f), p());
+    }, W = () => {
+      u?.(g), p();
+    }, h = () => {
+      l(n), p();
+    }, C = () => {
+      l(void 0), u?.(void 0), s || p();
+    };
+    t.useLayoutEffect(() => {
+      P.current = { onDismiss: h, resolveFlash: () => "cancel" };
+    });
+    const X = n ? se(n) : "";
+    return /* @__PURE__ */ r(
+      ne,
+      {
+        open: i,
+        disabled: o,
+        ariaLabel: a("datePicker.selectQuarter"),
+        onOpenChange: (e) => {
+          o || c(e);
+        },
+        onOpenAutoFocus: (e) => {
+          m.current || e.preventDefault(), m.current = !1;
+        },
+        popoverHandlers: V,
+        trigger: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: k,
+            "data-component": "quarter-picker",
+            "data-state": i ? "open" : "closed",
+            onPointerDown: (e) => ce({
+              disabled: o,
+              event: e,
+              onOpen: () => c(!0),
+              focusField: () => d.current?.focus()
+            }),
+            children: /* @__PURE__ */ r(
+              $,
+              {
+                ref: d,
+                value: X,
+                readOnly: !0,
+                onKeyDown: (e) => ie(e, {
+                  disabled: o,
+                  open: i,
+                  onOpen: () => c(!0),
+                  onCancel: h,
+                  onKeyboardOpen: () => {
+                    m.current = !0;
+                  }
+                }),
+                onClick: () => !o && c(!0),
+                placeholder: E,
+                disabled: o,
+                "data-form-control": "input",
+                className: _("cursor-pointer", A),
+                suffix: /* @__PURE__ */ y("div", { className: "flex items-center gap-1", children: [
+                  n && !o ? /* @__PURE__ */ y(x, { children: [
+                    /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "aria-label": a("calendar.clear"),
+                        onClick: (e) => {
+                          e.stopPropagation(), C();
+                        },
+                        className: "inline-flex size-4 items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(Y, { className: "size-3 hover:text-content" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(R, { variant: "tertiary", side: "top", children: a("calendar.clear") })
+                  ] }) : null,
+                  /* @__PURE__ */ y(x, { children: [
+                    /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "data-component": "calendar-trigger",
+                        "aria-label": a("datePicker.selectQuarter"),
+                        onClick: (e) => {
+                          e.stopPropagation(), o || c((f) => !f);
+                        },
+                        className: "inline-flex items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(Z, { className: "h-4 w-4 text-secondary-foreground" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(R, { variant: "tertiary", side: "top", children: a("datePicker.selectQuarter") })
+                  ] })
+                ] }),
+                ...F
+              }
+            )
+          }
+        ),
+        children: /* @__PURE__ */ r(
+          q,
+          {
+            pickerType: "quarter",
+            selectedQuarters: g,
+            footerFlashKey: H,
+            footerFlashTarget: L,
+            onQuarterSelect: U,
+            month: B,
+            onMonthChange: G,
+            disabled: re(Q, v),
+            startMonth: N,
+            endMonth: S,
+            showFooter: s,
+            onApply: W,
+            onCancel: h,
+            onClear: C,
+            ...J
+          }
+        )
+      }
+    );
+  }
+);
+pe.displayName = "QuarterPicker";
+export {
+  pe as QuarterPicker
+};

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

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