@xola/ui-kit 3.0.8 → 3.4.0

package/build/components/DatePicker/DatePicker.js

@@ -0,0 +1,241 @@
+import { jsx as s, jsxs as X, Fragment as kt } from "react/jsx-runtime";
+import Dt from "clsx";
+import Y from "dayjs";
+import { isArray as h, isFunction as M } from "lodash-es";
+import { useContext as yt, useState as N, useEffect as jt, useCallback as V, useMemo as Rt } from "react";
+import { isBefore as C, startOfDay as b, endOfDay as v, isAfter as tt, isSameDay as Nt } from "date-fns";
+import { Tooltip as Vt } from "../Tooltip.js";
+import { RelativeDateRange as Lt } from "./RelativeDateRange.js";
+import { MonthSelector as Ot } from "./MonthSelector.js";
+import { UpcomingDatePicker as St } from "./UpcomingDatePicker.js";
+import { Context as Et } from "../Provider.js";
+import { now as f, isSame as L, isValidTimeZoneName as Ft, toDate as l } from "../../helpers/date.js";
+import { Day as rt } from "./Day.js";
+import { LocalizedDayPicker as _t } from "./LocalizedDayPicker.js";
+import { MonthYearSelector as Tt } from "./MonthYearSelector.js";
+import { NavbarElement as At } from "./NavbarElement.js";
+import Bt from "./RangeDatePicker.js";
+const P = {
+  single: "single",
+  range: "range"
+}, Ct = ({
+  variant: U = P.single,
+  value: r,
+  selectedDays: c,
+  upcomingDates: W,
+  disabledDays: x = [],
+  loadingDays: k = [],
+  shouldShowYearPicker: O = !1,
+  shouldShowMonthSelector: S = !1,
+  shouldShowRelativeRanges: et = !1,
+  isFutureDatesAllowed: ot = !1,
+  modifiers: E = {},
+  ranges: nt,
+  components: z = {},
+  locale: D,
+  timezoneName: u,
+  getDayContent: F,
+  getTooltip: y,
+  onChange: a,
+  onMonthChange: i,
+  onSubmitDateRange: ft,
+  month: it,
+  // Deprecated v7 props are spread into rest and ignored
+  ...H
+}) => {
+  var K, Q;
+  const { locale: j } = yt(Et), o = u ?? void 0, st = r ? U === P.single ? r : r.from : null, [d, _] = N(it ?? st ?? f(void 0, o).toDate()), [mt, Z] = N(() => !r || typeof r != "object" || !("from" in r) || !r.from ? /* @__PURE__ */ new Date() : r.from), [lt, $] = N(() => !r || typeof r != "object" || !("from" in r) || !("to" in r) || !r.to || !r.from ? f(void 0, o).add(1, "month").toDate() : L(f(r.to, o), f(r.from, o), "month") ? f(r.from, o).add(1, "month").toDate() : r.to), [ct, at] = N(""), p = U === P.range, R = r && typeof r == "object" && "from" in r && "to" in r && r.from && r.to, dt = c && typeof c == "object" && "from" in c && "to" in c && c.from && c.to;
+  jt(() => {
+    u && !Ft(u) && (console.log(`${u} is not a valid timezone. Using default timezone now`), Y.tz.setDefault());
+  }, [u]);
+  const q = (t, e, m) => {
+    if (p)
+      return;
+    const n = u ? l(f(t, u)) : /* @__PURE__ */ new Date();
+    e.disabled || T(n) ? (_(n), i == null || i(n)) : a(n, e, m);
+  }, T = (t) => h(x) ? x.some((e) => {
+    if (e.daysOfWeek)
+      return e.daysOfWeek.includes(t.getDay());
+    if (e.after || e.before) {
+      const m = e.after ? tt(b(t), b(e.after)) : !0, n = e.before ? C(b(t), b(e.before)) : !0;
+      return m && n;
+    }
+    return e instanceof Date ? L(f(e, o), t, "day") : !1;
+  }) : M(x) ? x(t) : !1, bt = (t) => h(k) ? k.some((e) => L(f(e, o), t, "day")) : M(k) ? k(t) : !1, ut = (t, e) => {
+    _(e.from), Z(e.from), $(e.to), a({ ...e, rangeName: t }, E, null);
+  }, g = V(
+    (t) => {
+      _(t), i == null || i(t);
+    },
+    [i]
+  ), G = V(
+    (t) => {
+      Z(t), i == null || i(t);
+    },
+    [i]
+  ), pt = V(
+    (t) => {
+      $(t), i == null || i(t);
+    },
+    [i]
+  ), A = V(
+    (t, e, m) => {
+      if (!(!t || e.disabled))
+        if (r && typeof r == "object" && "from" in r && r.from && L(f(r.from, o), f(t, o), "month") && G(t), at(""), p) {
+          const n = r;
+          if (R)
+            a({ from: l(f(t, o)), to: null }, e, m);
+          else if (n && (n.from || n.to) && (n.from || n.to).getTime() === t.getTime()) {
+            const w = l(f(t, o)), B = l(f(t, o).endOf("day"), !1);
+            a({ from: w, to: B }, e, m);
+          } else if (n.from && C(b(n.from), b(l(f(t, o))))) {
+            const w = n.from, B = v(l(f(t, o), !1));
+            a({ from: w, to: B }, e, m);
+          } else if (n.from && (tt(b(n.from), b(l(f(t, o)))) || Nt(n.from, l(f(t, o)))))
+            a(
+              {
+                from: l(f(t, o)),
+                to: l(f(n.from).endOf("day"), !1)
+              },
+              e,
+              m
+            );
+          else {
+            const w = v(l(f(t, o), !1));
+            a({ from: n.from, to: w }, e, m);
+          }
+        } else
+          a(l(f(t, o)), e, m);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [p, R, a, o, r]
+  ), I = Rt(() => (O || S) && d ? (t) => S ? /* @__PURE__ */ s(
+    Ot,
+    {
+      date: t.date || d,
+      currentMonth: d,
+      locale: D ?? j,
+      onChange: g
+    }
+  ) : /* @__PURE__ */ s(
+    Tt,
+    {
+      date: t.date || d,
+      currentMonth: d,
+      locale: D ?? j,
+      onChange: g
+    }
+  ) : void 0, [O, S, d, g, D, j]), xt = (t) => {
+    const e = y == null ? void 0 : y(t), m = T(t), n = bt(t);
+    return e ? /* @__PURE__ */ s(Vt, { placement: "top", content: e, children: /* @__PURE__ */ s(
+      rt,
+      {
+        disabled: m,
+        isLoading: n,
+        selectedDate: r,
+        date: t,
+        getContent: F,
+        currentMonth: d
+      }
+    ) }) : /* @__PURE__ */ s(
+      rt,
+      {
+        disabled: m,
+        isLoading: n,
+        selectedDate: r,
+        date: t,
+        getContent: F,
+        currentMonth: d
+      }
+    );
+  }, J = p && R ? { start: r.from, end: r.to } : dt ? { start: c.from, end: c.to } : null, gt = p && R && ((K = r.from) == null ? void 0 : K.getTime()) !== ((Q = r.to) == null ? void 0 : Q.getTime()), wt = c ?? (r && (Y.isDayjs(r) || p ? r : f(r, o).toDate()));
+  return /* @__PURE__ */ X(kt, { children: [
+    /* @__PURE__ */ X("div", { className: "flex", children: [
+      W ? /* @__PURE__ */ s(
+        St,
+        {
+          upcomingDates: W,
+          value: r,
+          onChange: A,
+          onMonthChange: g
+        }
+      ) : null,
+      p ? /* @__PURE__ */ s(
+        Bt,
+        {
+          isDateRangeStyle: gt,
+          shouldShowYearPicker: O,
+          startMonth: mt,
+          endMonth: lt,
+          modifiers: { ...E, ...J },
+          getTooltip: y,
+          disabledDays: x,
+          getDayContent: F,
+          value: r,
+          handleDayClick: A,
+          handleStartMonthChange: G,
+          handleEndMonthChange: pt,
+          handleTodayClick: q,
+          selectedDays: wt,
+          locale: D ?? j,
+          timezoneName: o,
+          ...H
+        }
+      ) : /* @__PURE__ */ s(
+        _t,
+        {
+          className: Dt("pt-6 tracking-tightest rounded-lg ring-0 focus:outline-none focus:ring-0"),
+          mode: "single",
+          selected: r,
+          month: d,
+          modifiers: { ...E, ...J },
+          disabled: T,
+          onSelect: A,
+          onMonthChange: g,
+          classNames: {
+            months: "flex flex-col relative",
+            month_caption: "relative flex h-8 mb-4 pl-4",
+            caption_label: "text-lg font-semibold",
+            nav: "h-8 right-4 absolute items-center",
+            weekdays: "flex flex-row",
+            weekday: "w-full m-0 p-0 text-base font-semibold text-black",
+            month: "w-full min-w-[400px]",
+            month_grid: "w-full mt-4",
+            week: "mt-0.5 flex w-full justify-between",
+            day: "w-[calc(100%/7)] mr-0.5 rounded",
+            day_button: "h-12 w-full cursor-pointer rounded bg-transparent hover:border hover:border-blue hover:bg-blue-lighter hover:text-black disabled:cursor-not-allowed disabled:text-gray-light disabled:hover:border-none disabled:hover:bg-transparent",
+            selected: "[&>button]:border [&>button]:border-blue [&>button]:bg-blue [&>button]:text-white [&>button:hover]:border-blue-darker [&>button:hover]:bg-blue-darker",
+            today: "[&>button]:border [&>button]:border-gray-light",
+            outside: "opacity-0",
+            disabled: "text-gray-light cursor-not-allowed [&>button]:cursor-not-allowed",
+            hidden: "invisible"
+          },
+          modifiersClassNames: {
+            waitlist: "[&>button]:relative [&>button]:after:content-[''] [&>button]:after:absolute [&>button]:after:bottom-1 [&>button]:after:left-1/2 [&>button]:after:-translate-x-1/2 [&>button]:after:h-2 [&>button]:after:w-2 [&>button]:after:rounded-full [&>button]:after:bg-yellow"
+          },
+          components: {
+            ...I ? { CaptionLabel: I } : {},
+            DayButton: ({ day: t, ...e }) => /* @__PURE__ */ s("button", { ...e, children: xt(t.date) }),
+            Nav: (t) => /* @__PURE__ */ s(At, { ...t, onTodayClick: (e) => q(/* @__PURE__ */ new Date(), {}, e) })
+          },
+          ...H
+        }
+      )
+    ] }),
+    z.Footer ? /* @__PURE__ */ s(z.Footer, {}) : null,
+    et && /* @__PURE__ */ s("div", { className: "max-w-200 ", children: /* @__PURE__ */ s("div", { className: "ml-auto w-5/12", children: /* @__PURE__ */ s(
+      Lt,
+      {
+        value: ct,
+        ranges: nt,
+        timezoneName: o,
+        isFutureDatesAllowed: ot,
+        onChange: ut,
+        onSubmit: ft
+      }
+    ) }) })
+  ] });
+};
+export {
+  Ct as DatePicker
+};

package/build/components/DatePicker/DatePickerPopover.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { PopoverProps } from '../Popover/Popover';
+type DateValue = Date | {
+    from?: Date;
+    to?: Date;
+};
+type PickerType = "day" | "month";
+type PickerVariant = "single" | "range";
+export interface DatePickerPopoverProps {
+    [key: string]: any;
+    value?: DateValue;
+    variant?: PickerVariant;
+    dateFormat?: string;
+    placeholder?: string;
+    pickerType?: PickerType;
+    classNames?: {
+        popover?: string;
+        input?: string;
+    };
+    components?: {
+        Footer?: React.ComponentType;
+    };
+    popoverProps?: Partial<PopoverProps>;
+    children?: React.ReactElement;
+    getDayContent?: (day: number, date: Date) => React.ReactNode;
+    onChange?: (...arguments_: any[]) => void;
+}
+export declare const DatePickerPopover: ({ value, variant, dateFormat, placeholder, pickerType, classNames, components, popoverProps, children, getDayContent, onChange, ...rest }: DatePickerPopoverProps) => React.JSX.Element;
+export {};

package/build/components/DatePicker/DatePickerPopover.js

@@ -0,0 +1,81 @@
+import { jsxs as D, jsx as e } from "react/jsx-runtime";
+import y from "clsx";
+import { useState as m, useEffect as E, cloneElement as L, forwardRef as A } from "react";
+import { CalendarIcon as M } from "../../icons/build/CalendarIcon.js";
+import { DownArrowIcon as W } from "../../icons/build/DownArrowIcon.js";
+import { formatDate as q } from "../../helpers/date.js";
+import { Input as B } from "../Forms/Input.js";
+import { Popover as x } from "../Popover/Popover.js";
+import { DatePicker as F } from "./DatePicker.js";
+import { MonthPicker as G } from "./MonthPicker.js";
+const $ = ({
+  value: t,
+  variant: r = "single",
+  dateFormat: l = "ddd, LL",
+  placeholder: V = "Select Date",
+  pickerType: N = "day",
+  classNames: o = {},
+  components: P = {},
+  popoverProps: O,
+  children: n,
+  getDayContent: S,
+  onChange: i,
+  ...p
+}) => {
+  const [j] = m(t), [w, f] = m(t), [c, d] = m(!1), s = () => {
+    d(!c);
+  }, a = (b, u, k) => {
+    r === "single" ? (i == null || i(b, u, k), s()) : i == null || i(b, w, u, k);
+  }, R = () => {
+    f(t), i == null || i(t), d(!1);
+  }, z = () => {
+    r === "range" && t && typeof t == "object" && "to" in t && !t.to && (i == null || i(j)), s();
+  };
+  return E(() => {
+    f(t);
+  }, [t]), /* @__PURE__ */ D(
+    x,
+    {
+      visible: c,
+      maxWidth: 900,
+      distance: 18,
+      placement: "bottom",
+      className: y("ui-date-picker-input", o.popover),
+      onClickOutside: z,
+      ...O,
+      children: [
+        n ? L(n, { onClick: s }) : /* @__PURE__ */ e(
+          I,
+          {
+            readOnly: !0,
+            size: "medium",
+            value: t ? q(t, l) : "",
+            placeholder: V,
+            className: o == null ? void 0 : o.input,
+            onClick: s
+          }
+        ),
+        /* @__PURE__ */ e(x.Content, { className: "pr-1", children: c && (N === "month" ? /* @__PURE__ */ e(G, { value: t, onChange: a, ...p }) : /* @__PURE__ */ e(
+          F,
+          {
+            variant: r,
+            getDayContent: S,
+            value: t,
+            components: P,
+            onChange: a,
+            onSubmitDateRange: R,
+            ...p
+          }
+        )) })
+      ]
+    }
+  );
+}, I = A(({ className: t, ...r }, l) => /* @__PURE__ */ D("div", { ref: l, className: "relative flex bg-gray-lighter", children: [
+  /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center pl-3", children: /* @__PURE__ */ e(M, { className: "z-10 inline-block" }) }),
+  /* @__PURE__ */ e(B, { className: y("no-translate cursor-pointer px-8", t), ...r }),
+  /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: /* @__PURE__ */ e(W, { className: "inline-block" }) })
+] }));
+I.displayName = "DefaultInput";
+export {
+  $ as DatePickerPopover
+};

package/build/components/DatePicker/Day.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface DayProps {
+    selectedDate?: Date | {
+        from?: Date;
+        to?: Date;
+    } | null;
+    date: Date;
+    currentMonth: Date;
+    isLoading?: boolean;
+    disabled?: boolean;
+    getContent?: (day: number, date: Date) => React.ReactNode;
+}
+export declare const Day: ({ selectedDate, date, currentMonth, isLoading, disabled, getContent, }: DayProps) => React.JSX.Element;

package/build/components/DatePicker/Day.js

@@ -0,0 +1,40 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import m from "clsx";
+import o from "dayjs";
+import { Dot as l } from "../Dot/Dot.js";
+const v = ({
+  selectedDate: e,
+  date: n,
+  currentMonth: r,
+  isLoading: s = !1,
+  disabled: a = !1,
+  getContent: i
+}) => {
+  const c = o(r).isSame(n, "month");
+  if (i && c)
+    return s ? /* @__PURE__ */ t("div", { className: "flex animate-pulse items-center justify-center", children: /* @__PURE__ */ t(l, { className: "ui-day-content pointer-events-none !cursor-not-allowed", color: "secondary" }) }) : /* @__PURE__ */ t(y, { selectedDate: e, date: n, getContent: i });
+  if (s)
+    return /* @__PURE__ */ t("div", { className: "flex animate-pulse items-center justify-center", children: /* @__PURE__ */ t(l, { className: "pointer-events-none !cursor-not-allowed", color: "secondary", size: "xlarge" }) });
+  const u = e && e instanceof Date && o(e).isSame(n, "day");
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: m(
+        "ui-date-picker-day",
+        "flex items-center justify-center",
+        u && c && !a ? "selected text-white" : null,
+        c ? "date" : null
+      ),
+      children: n.getDate()
+    }
+  );
+}, y = ({ selectedDate: e, date: n, getContent: r }) => {
+  const s = n.getDate(), a = r(s, n), i = e && e instanceof Date && o(e).isSame(n, "day");
+  return /* @__PURE__ */ f("div", { className: "ui-day-content align-center flex flex-col justify-center", children: [
+    /* @__PURE__ */ t("div", { className: m("ui-day-content-value", { "selected text-white": i }), children: s }),
+    a ? /* @__PURE__ */ t("div", { className: "ui-day-content-custom mt-1", children: a }) : null
+  ] });
+};
+export {
+  v as Day
+};

package/build/components/DatePicker/LocalizedDayPicker.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { DayPickerProps } from 'react-day-picker';
+export declare const LocalizedDayPicker: {
+    ({ className, ...rest }: DayPickerProps): React.JSX.Element;
+    displayName: string;
+};

package/build/components/DatePicker/LocalizedDayPicker.js

@@ -0,0 +1,20 @@
+import { jsx as s } from "react/jsx-runtime";
+import m from "clsx";
+import { useContext as l, useState as n, useEffect as p } from "react";
+import { DayPicker as f } from "react-day-picker";
+import { kebabCase as u } from "lodash-es";
+import { enUS as r } from "date-fns/locale";
+import { Context as P } from "../Provider.js";
+import { getLocalizationProps as x } from "./DatePicker.helpers.js";
+const z = ({ className: a, ...i }) => {
+  const { locale: o } = l(P), [c, t] = n({ locale: r });
+  return p(() => {
+    t({ locale: r });
+    const e = u(o).toLowerCase();
+    !e || e === "en" || e === "en-us" || x(o).then(t);
+  }, [o]), /* @__PURE__ */ s(f, { className: m(a), ...c, ...i });
+};
+z.displayName = "LocalizedDayPicker";
+export {
+  z as LocalizedDayPicker
+};

package/build/components/DatePicker/MonthGrid.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface MonthGridProps {
+    year: number;
+    value?: Date;
+    locale?: string;
+    onChange: (newDate: Date) => void;
+    handleYearChange: (offset: number) => void;
+    handleClear: () => void;
+    handleToday: () => void;
+}
+export declare const MonthGrid: ({ year, value, locale, onChange, handleYearChange, handleClear, handleToday, }: MonthGridProps) => React.JSX.Element;

package/build/components/DatePicker/MonthGrid.js

@@ -0,0 +1,52 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import x from "clsx";
+import u from "dayjs";
+import { useContext as g } from "react";
+import { ChevronLeftIcon as C } from "../../icons/build/ChevronLeftIcon.js";
+import { ChevronRightIcon as k } from "../../icons/build/ChevronRightIcon.js";
+import { Context as y } from "../Provider.js";
+import { Button as i } from "../Buttons/Button.js";
+import { ChevronButton as s } from "./NavbarElement.js";
+const v = u(), A = ({
+  year: r,
+  value: n,
+  locale: a,
+  onChange: m,
+  handleYearChange: c,
+  handleClear: d,
+  handleToday: h
+}) => {
+  const { locale: p } = g(y), f = [...Array.from({ length: 12 }).keys()].map(
+    (o) => v.locale(a ?? p).month(o).format("MMM")
+  ), b = (o) => {
+    const e = new Date(r, o);
+    m(e);
+  };
+  return /* @__PURE__ */ l("span", { className: "min-w-72", children: [
+    /* @__PURE__ */ l("div", { className: "mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ t(s, { onClick: () => c(-1), children: /* @__PURE__ */ t(C, {}) }),
+      /* @__PURE__ */ t("span", { className: "text-lg font-bold", children: r }),
+      /* @__PURE__ */ t(s, { onClick: () => c(1), children: /* @__PURE__ */ t(k, {}) })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-4 gap-2", children: f.map((o, e) => /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: x(
+          n && n.getMonth() === e && n.getFullYear() === r ? "bg-blue-dark text-white" : "text-black",
+          "rounded-md p-4 text-center hover:bg-blue-dark hover:text-white"
+        ),
+        onClick: () => b(e),
+        children: o
+      },
+      o
+    )) }),
+    /* @__PURE__ */ l("div", { className: "mt-2 flex justify-between border-t border-gray-lighter pt-2", children: [
+      /* @__PURE__ */ t(i, { size: "small", color: "secondary", variant: "outline", onClick: d, children: "Clear" }),
+      /* @__PURE__ */ t(i, { size: "small", color: "secondary", variant: "outline", onClick: h, children: "Today" })
+    ] })
+  ] });
+};
+export {
+  A as MonthGrid
+};

package/build/components/DatePicker/MonthPicker.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface MonthPickerProps {
+    value: Date;
+    locale?: string;
+    onChange: (date: Date) => void;
+}
+export declare const MonthPicker: ({ value, locale, onChange }: MonthPickerProps) => React.JSX.Element;

package/build/components/DatePicker/MonthPicker.js

@@ -0,0 +1,28 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { MonthGrid as s } from "./MonthGrid.js";
+const Y = ({ value: t, locale: d, onChange: r }) => {
+  const [a, n] = l(new Date(t).getFullYear());
+  return /* @__PURE__ */ o("div", { className: "ui-month-picker min-w-72 max-w-xs rounded-lg bg-white", children: /* @__PURE__ */ o(
+    s,
+    {
+      year: a,
+      value: t,
+      locale: d,
+      handleClear: () => {
+        r(t);
+      },
+      handleToday: () => {
+        const e = /* @__PURE__ */ new Date();
+        n(e.getFullYear()), r(e);
+      },
+      handleYearChange: (e) => {
+        n(a + e);
+      },
+      onChange: r
+    }
+  ) });
+};
+export {
+  Y as MonthPicker
+};

package/build/components/DatePicker/MonthSelector.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface MonthSelectorProps {
+    date: Date;
+    currentMonth: Date;
+    locale?: string;
+    onChange: (newDate: Date) => void;
+}
+export declare const MonthSelector: ({ date, currentMonth, locale, onChange }: MonthSelectorProps) => React.JSX.Element;

package/build/components/DatePicker/MonthSelector.js

@@ -0,0 +1,47 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import M from "dayjs";
+import { useState as m } from "react";
+import { ChevronDownIcon as Y } from "../../icons/build/ChevronDownIcon.js";
+import { Popover as d } from "../Popover/Popover.js";
+import { MonthGrid as g } from "./MonthGrid.js";
+const j = ({ date: s, currentMonth: p, locale: o, onChange: i }) => {
+  const [a, t] = m(!1), [l, h] = m(new Date(p).getFullYear()), f = () => {
+    t(!a);
+  }, b = (n) => {
+    i(n), t(!1);
+  }, u = (n) => {
+    h(l + n);
+  }, r = () => {
+    t(!1);
+  }, C = () => {
+    i(/* @__PURE__ */ new Date()), t(!1);
+  };
+  return /* @__PURE__ */ e("span", { className: "DayPicker-Caption", children: /* @__PURE__ */ e("span", { className: "inline-block", children: /* @__PURE__ */ c(d, { visible: a, distance: 5, skidding: 60, placement: "bottom", onClickOutside: r, children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: "mt-2 min-w-40 cursor-pointer items-center justify-between text-left font-bold",
+        onClick: f,
+        children: [
+          /* @__PURE__ */ e("span", { className: "pr-1 text-lg", children: M(s).locale(o ?? "en").format("MMMM YYYY") }),
+          /* @__PURE__ */ e(Y, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(d.Content, { className: "p-2", children: /* @__PURE__ */ e(
+      g,
+      {
+        year: l,
+        value: s,
+        locale: o,
+        handleClear: r,
+        handleToday: C,
+        handleYearChange: u,
+        onChange: b
+      }
+    ) })
+  ] }) }) });
+};
+export {
+  j as MonthSelector
+};

package/build/components/DatePicker/MonthYearSelector.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface MonthYearSelectorProps {
+    date: Date;
+    currentMonth: Date;
+    locale?: string;
+    onChange: (newDate: Date) => void;
+}
+export declare const MonthYearSelector: ({ date, currentMonth, locale, onChange }: MonthYearSelectorProps) => React.JSX.Element;

package/build/components/DatePicker/MonthYearSelector.js

@@ -0,0 +1,44 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import M from "dayjs";
+import { useRef as m } from "react";
+import { Select as h } from "../Forms/Select.js";
+const l = M(), N = (n, t) => 12 * (n.getFullYear() - t.getFullYear()) + (n.getMonth() - t.getMonth()), C = ({ date: n, currentMonth: t, locale: s, onChange: c }) => {
+  const u = m(null), o = m(null), i = [...Array.from({ length: 12 }).keys()].map(
+    (e) => l.locale(s ?? "en").month(e).format("MMM")
+  ), g = [...Array.from({ length: l.year() - 2012 + 5 + 1 }).keys()].map(
+    (e) => l.locale(s ?? "en").year(2012 + e).format("YYYY")
+  ), f = N(n, t), p = (e) => {
+    const r = Number(e.target.value), Y = o.current ? Number(o.current.value) : n.getFullYear();
+    c(new Date(Y, r - f));
+  }, y = (e) => {
+    const r = Number(e.target.value);
+    c(new Date(r, t.getMonth()));
+  };
+  return /* @__PURE__ */ d("form", { className: "DayPicker-Caption space-x-2", children: [
+    /* @__PURE__ */ a("span", { className: "inline-block", children: /* @__PURE__ */ a(
+      h,
+      {
+        ref: u,
+        name: "month",
+        value: n.getMonth(),
+        className: "month-selector",
+        onChange: p,
+        children: i.map((e, r) => /* @__PURE__ */ a("option", { value: r, children: e }, e))
+      }
+    ) }),
+    /* @__PURE__ */ a("span", { className: "inline-block", children: /* @__PURE__ */ a(
+      h,
+      {
+        ref: o,
+        name: "year",
+        value: n.getFullYear(),
+        className: "year-selector",
+        onChange: y,
+        children: g.map((e) => /* @__PURE__ */ a("option", { value: e, children: e }, e))
+      }
+    ) })
+  ] });
+};
+export {
+  C as MonthYearSelector
+};

package/build/components/DatePicker/NavbarElement.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { NavProps } from 'react-day-picker';
+export interface NavbarElementProps extends NavProps {
+    onTodayClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Render the custom left & right arrows to change the current month.
+ */
+export declare const NavbarElement: ({ className, onTodayClick }: NavbarElementProps) => React.JSX.Element;
+export interface ChevronButtonProps {
+    isVisible?: boolean;
+    children: React.ReactElement;
+    onClick?: () => void;
+}
+export declare const ChevronButton: ({ isVisible, children, onClick }: ChevronButtonProps) => React.JSX.Element;