@pismo/marola 2.0.2 → 2.1.0

package/dist/components/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,45 @@
+import { StoryObj } from '@storybook/react';
+import { default as dayjs } from 'dayjs';
+declare const meta: {
+    title: string;
+    component: import('react').FC<{
+        mode: "range" | "single";
+        viewMode: "month" | "day" | "year";
+        locale?: string | undefined;
+        placeholder?: string | undefined;
+        format?: string | undefined;
+        minDate?: dayjs.Dayjs | undefined;
+        maxDate?: dayjs.Dayjs | undefined;
+        disableDates?: ((date: dayjs.Dayjs) => boolean) | undefined;
+        testid?: string | undefined;
+        onChange: (date: dayjs.Dayjs | [dayjs.Dayjs | null, dayjs.Dayjs | null]) => void;
+        placement?: "bottom" | "top" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
+        navigatorInput?: boolean | undefined;
+    }>;
+    tags: string[];
+    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        mode: "range" | "single";
+        viewMode: "month" | "day" | "year";
+        locale?: string | undefined;
+        placeholder?: string | undefined;
+        format?: string | undefined;
+        minDate?: dayjs.Dayjs | undefined;
+        maxDate?: dayjs.Dayjs | undefined;
+        disableDates?: ((date: dayjs.Dayjs) => boolean) | undefined;
+        testid?: string | undefined;
+        onChange: (date: dayjs.Dayjs | [dayjs.Dayjs | null, dayjs.Dayjs | null]) => void;
+        placement?: "bottom" | "top" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
+        navigatorInput?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const RangePicker: Story;
+export declare const MonthView: Story;
+export declare const YearView: Story;
+export declare const LocalizedPortuguese: Story;
+export declare const MinMaxDate: Story;
+export declare const DisabledDates: Story;
+export declare const CustomDateFormat: Story;
+export declare const NavigatorInput: Story;

package/dist/components/DatePicker/DatePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DatePicker/dateUtils.d.ts

@@ -0,0 +1,96 @@
+import { Dayjs } from 'dayjs';
+/**
+ * Get the first day of the next month.
+ * @param date - The current date as a Dayjs object.
+ * @returns A Dayjs object representing the first day of the next month.
+ */
+export declare const getNextMonth: (date: Dayjs) => Dayjs;
+/**
+ * Get the first day of the previous month.
+ * @param date - The current date as a Dayjs object.
+ * @returns A Dayjs object representing the first day of the previous month.
+ */
+export declare const getPreviousMonth: (date: Dayjs) => Dayjs;
+/**
+ * Format a Dayjs date object for input display.
+ * @param date - The date to format as a Dayjs object.
+ * @param locale - The locale to use for formatting.
+ * @param format - The format to use for formatting (optional).
+ * @returns A formatted date string.
+ */
+export declare const formatDateForInput: (date: Dayjs | null, locale: string, format?: string) => string;
+/**
+ * Check if a given date is the current day.
+ * @param date - The date to check as a Dayjs object.
+ * @returns `true` if the date is the current day, otherwise `false`.
+ */
+export declare const isCurrentDay: (date: Dayjs | null) => boolean;
+/**
+ * Check if a given date is disabled based on provided constraints.
+ * @param date - The date to check as a Dayjs object.
+ * @param minDate - The minimum selectable date (optional).
+ * @param maxDate - The maximum selectable date (optional).
+ * @param disableDates - A function to disable specific dates (optional).
+ * @param mode - The selection mode ('single' or 'range').
+ * @param selectedRange - The currently selected date range (optional).
+ * @returns `true` if the date is disabled, otherwise `false`.
+ */
+export declare const isDisabled: (date: Dayjs | null, minDate?: Dayjs, maxDate?: Dayjs, disableDates?: (date: Dayjs) => boolean, mode?: 'single' | 'range', selectedRange?: [Dayjs | null, Dayjs | null]) => boolean;
+/**
+ * Generate an array of dates representing a month grid.
+ * @param month - The month to display (as a Dayjs object).
+ * @param includeAdjacentMonths - Whether to include days from adjacent months to fill the grid.
+ * @returns Array of Dayjs objects representing all days to display.
+ */
+export declare const getMonthGrid: (month: Dayjs, includeAdjacentMonths?: boolean) => Dayjs[];
+/**
+ * Check if a date is within a selected range.
+ * @param date - The date to check.
+ * @param rangeStart - The start date of the range.
+ * @param rangeEnd - The end date of the range.
+ * @returns `true` if the date is within the range, otherwise `false`.
+ */
+export declare const isDateInRange: (date: Dayjs | null, rangeStart: Dayjs | null, rangeEnd: Dayjs | null) => boolean;
+/**
+ * Check if a date is the start of a selected range.
+ * @param date - The date to check.
+ * @param rangeStart - The start date of the range.
+ * @returns `true` if the date is the start of the range, otherwise `false`.
+ */
+export declare const isRangeStart: (date: Dayjs | null, rangeStart: Dayjs | null) => boolean;
+/**
+ * Check if a date is the end of a selected range.
+ * @param date - The date to check.
+ * @param rangeEnd - The end date of the range.
+ * @returns `true` if the date is the end of the range, otherwise `false`.
+ */
+export declare const isRangeEnd: (date: Dayjs | null, rangeEnd: Dayjs | null) => boolean;
+/**
+ * Get an array of weekday names based on locale.
+ * @param locale - The locale to use for weekday names.
+ * @param format - The format to use ('long', 'short', 'narrow', etc.).
+ * @returns Array of weekday names.
+ */
+export declare const getWeekdayNames: (locale: string, format?: 'long' | 'short' | 'narrow') => string[];
+/**
+ * Parse a date string to a Dayjs object.
+ * @param dateStr - The date string to parse.
+ * @param format - The expected format of the date string.
+ * @returns A Dayjs object or null if the date is invalid.
+ */
+export declare const parseDate: (dateStr: string | null, format?: string) => Dayjs | null;
+/**
+ * Check if two dates fall on the same day.
+ * @param date1 - The first date to compare.
+ * @param date2 - The second date to compare.
+ * @returns `true` if both dates fall on the same day, otherwise `false`.
+ */
+export declare const isSameDay: (date1: Dayjs | null, date2: Dayjs | null) => boolean;
+/**
+ * Parse a formatted input date back to the original Dayjs format.
+ * @param formattedDate - The formatted date string from the input.
+ * @param locale - The locale that was used for formatting.
+ * @param format - Optional specific format to use for parsing.
+ * @returns A Dayjs object representing the parsed date, or null if invalid.
+ */
+export declare const parseFormattedInput: (formattedDate: string | null, locale: string, format?: string) => Dayjs | null;

package/dist/components/DatePicker/dateUtils.js

@@ -0,0 +1,70 @@
+import { d as u } from "../../dayjs.min-ClQKmc--.js";
+const c = (r) => r.add(1, "month").startOf("month"), M = (r) => r.subtract(1, "month").startOf("month"), Y = (r, t, n) => r ? n ? r.locale(t).format(n) : r.locale(t).format("LL") : "", h = (r) => r ? r.isSame(u(), "day") : !1, D = (r, t, n, o, i, s) => {
+  if (!r) return !0;
+  const a = t && r.isBefore(t, "day"), f = n && r.isAfter(n, "day"), l = o && o(r), e = i === "range" && (s == null ? void 0 : s[0]) && !(s != null && s[1]) && r.isBefore(s[0], "day");
+  return !!(a || f || l || e);
+}, m = (r, t = !0) => {
+  const n = r.startOf("month"), o = r.endOf("month");
+  if (!t) {
+    const l = o.date();
+    return Array.from({ length: l }, (e, d) => n.clone().date(d + 1));
+  }
+  const i = n.subtract(n.day(), "day"), s = o.add(6 - o.day(), "day"), a = [];
+  let f = i.clone();
+  for (; !f.isAfter(s, "day"); )
+    a.push(f), f = f.add(1, "day");
+  return a;
+}, p = (r, t, n) => !r || !t || !n ? !1 : r.isBetween(t, n, "day", "[]"), O = (r, t) => r === null || t === null ? !1 : r.isSame(t, "day"), A = (r, t) => r === null || t === null ? !1 : r.isSame(t, "day"), I = (r, t = "short") => {
+  const n = [];
+  let o = u().locale(r).startOf("week");
+  for (let i = 0; i < 7; i++)
+    n.push(o.format(t === "long" ? "dddd" : t === "short" ? "ddd" : "dd")), o = o.add(1, "day");
+  return n;
+}, L = (r, t) => {
+  if (!r) return null;
+  const n = t ? u(r, t) : u(r);
+  return n.isValid() ? n : null;
+}, b = (r, t) => r === null || t === null ? !1 : r.isSame(t, "day"), k = (r, t, n) => {
+  if (!r) return null;
+  if (n) {
+    const s = u(r, n, t);
+    if (s.isValid()) return s;
+  }
+  const o = [
+    "LL",
+    // Default localized format
+    "L",
+    // Short localized format
+    "YYYY-MM-DD",
+    // ISO format
+    "MM/DD/YYYY",
+    // US format
+    "DD/MM/YYYY",
+    // European format
+    "D [de] MMMM [de] YYYY",
+    // Portuguese/Spanish style
+    "MMMM D, YYYY"
+    // English style
+  ];
+  for (const s of o) {
+    const a = u(r, s, t);
+    if (a.isValid()) return a;
+  }
+  const i = u(r);
+  return i.isValid() ? i : null;
+};
+export {
+  Y as formatDateForInput,
+  m as getMonthGrid,
+  c as getNextMonth,
+  M as getPreviousMonth,
+  I as getWeekdayNames,
+  h as isCurrentDay,
+  p as isDateInRange,
+  D as isDisabled,
+  A as isRangeEnd,
+  O as isRangeStart,
+  b as isSameDay,
+  L as parseDate,
+  k as parseFormattedInput
+};

package/dist/components/DatePicker/keyboardNavigation.d.ts

@@ -0,0 +1,14 @@
+import { Dayjs } from 'dayjs';
+type ViewMode = 'day' | 'month' | 'year';
+/**
+ * Handles keyboard navigation for the date picker
+ * @param event Keyboard event
+ * @param isOpen Whether the date picker is open
+ * @param viewMode Current view mode ('day', 'month', or 'year')
+ * @param currentMonth Current month displayed
+ * @param setCurrentMonth Function to update the current month
+ * @param mode DatePicker mode ('single' or 'range')
+ * @param handleSelect Function to select a date
+ */
+export declare const handleDatePickerKeyDown: (event: React.KeyboardEvent, isOpen: boolean, viewMode: ViewMode, currentMonth: Dayjs, setCurrentMonth: (date: Dayjs) => void, mode: 'single' | 'range', handleSelect?: (date: Dayjs) => void, setIsOpen?: (isOpen: boolean) => void) => void;
+export {};

package/dist/components/DatePicker/keyboardNavigation.js

@@ -0,0 +1,26 @@
+const k = (s, l, d, a, y, i, f, b) => {
+  if (l)
+    switch (s.key) {
+      case "ArrowLeft":
+        y(d === "day" ? a.subtract(1, "day") : d === "month" ? a.subtract(1, "month") : a.subtract(1, "year"));
+        break;
+      case "ArrowRight":
+        y(d === "day" ? a.add(1, "day") : d === "month" ? a.add(1, "month") : a.add(1, "year"));
+        break;
+      case "ArrowUp":
+        y(d === "day" ? a.subtract(7, "day") : d === "month" ? a.subtract(3, "month") : a.subtract(4, "year"));
+        break;
+      case "ArrowDown":
+        y(d === "day" ? a.add(7, "day") : d === "month" ? a.add(3, "month") : a.add(4, "year"));
+        break;
+      case "Enter":
+        i === "single" && f && f(a);
+        break;
+      case "Escape":
+        b && b(!1);
+        break;
+    }
+};
+export {
+  k as handleDatePickerKeyDown
+};

package/dist/components/DatePicker/keyboardNavigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DatePicker/renderCalendarDays.d.ts

@@ -0,0 +1,25 @@
+import { Dayjs } from 'dayjs';
+type RenderDaysProps = {
+    currentMonth: Dayjs;
+    monthOffset?: number;
+    mode: 'single' | 'range';
+    locale: string;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+    disableDates?: (date: Dayjs) => boolean;
+    selectedDate: Dayjs | null;
+    selectedRange: [Dayjs | null, Dayjs | null];
+    isSelectingRange: boolean;
+    hoverDate: Dayjs | null;
+    handleSelect: (date: Dayjs) => void;
+    setHoverDate: (date: Dayjs | null) => void;
+};
+/**
+ * Renders weekday names header
+ */
+export declare const renderDayNames: (locale: string) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the days of the calendar
+ */
+export declare const renderCalendarDays: ({ currentMonth, monthOffset, mode, locale, minDate, maxDate, disableDates, selectedDate, selectedRange, isSelectingRange, hoverDate, handleSelect, setHoverDate, }: RenderDaysProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/renderCalendarDays.js

@@ -0,0 +1,85 @@
+import { jsx as d, jsxs as Y } from "react/jsx-runtime";
+import { d as x } from "../../dayjs.min-ClQKmc--.js";
+import { s } from "../../DatePicker.module-CmT9Zbbu.js";
+import { getWeekdayNames as E, getMonthGrid as I, isDateInRange as C, isRangeStart as p, isRangeEnd as c, isDisabled as y, isCurrentDay as W, formatDateForInput as h } from "./dateUtils.js";
+const A = (a, n, i) => {
+  if (!n[0] || !i) return !1;
+  const u = n[0].isBefore(i) ? n[0] : i, m = n[0].isBefore(i) ? i : n[0];
+  return a.isAfter(u, "day") && a.isBefore(m, "day");
+}, S = (a, n) => n !== null && a.isSame(n, "day"), H = (a, n, i) => !n[0] || !i || !a.isSame(i, "day") ? !1 : n[0].isAfter(i), F = (a, n, i) => !n[0] || !i || !a.isSame(i, "day") ? !1 : n[0].isBefore(i), G = (a) => /* @__PURE__ */ d("div", { className: s.weekdayNames, "data-testid": "calendar-weekday-names", children: E(a, "short").map((n) => /* @__PURE__ */ d("div", { className: s.weekdayName, "data-testid": `weekday-name-${n}`, children: n }, n)) }), K = ({
+  currentMonth: a,
+  monthOffset: n = 0,
+  mode: i,
+  locale: u,
+  minDate: m,
+  maxDate: N,
+  disableDates: l,
+  selectedDate: o,
+  selectedRange: t,
+  isSelectingRange: k,
+  hoverDate: f,
+  handleSelect: B,
+  setHoverDate: M
+}) => {
+  const $ = a.add(n, "month"), j = I($, !0);
+  return /* @__PURE__ */ Y("div", { className: s.calendar, "data-testid": `calendar-month-${n}`, children: [
+    G(u),
+    /* @__PURE__ */ d("div", { className: s.days, "data-testid": "calendar-days-grid", children: j.map((r) => {
+      const w = r.month() === $.month(), b = r.format("YYYY-MM-DD"), T = [
+        s.day,
+        !w && s.faded,
+        (o == null ? void 0 : o.isSame(r, "day")) && s.selected,
+        C(r, t[0], t[1]) && s["range-selected"],
+        p(r, t[0]) && s["range-start"],
+        c(r, t[1]) && s["range-end"],
+        y(r, m, N, l, i, t) && s.disabled,
+        W(r) && s["current-day"],
+        // Hover range classes
+        A(r, t, f) && s["hovered-range"],
+        S(r, f) && s["hovered-date"],
+        H(r, t, f) && s["would-be-start-date"],
+        F(r, t, f) && s["would-be-end-date"]
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ d(
+        "button",
+        {
+          className: T,
+          onClick: () => B(r),
+          onMouseEnter: () => {
+            k && !y(r, m, N, l, i, t) && M(r);
+          },
+          onMouseLeave: () => {
+            k && M(null);
+          },
+          disabled: y(r, m, N, l, i, t),
+          "aria-label": `${h(r, u)}${p(r, t[0]) ? ", range start" : c(r, t[1]) ? ", range end" : C(r, t[0], t[1]) ? ", in selected range" : S(r, f) ? ", being hovered" : ""}`,
+          "aria-selected": (o == null ? void 0 : o.isSame(r, "day")) || p(r, t[0]) || c(r, t[1]),
+          "data-testid": `calendar-day-${b}`,
+          "data-date": b,
+          "data-current-month": w ? "true" : "false",
+          children: r.date()
+        },
+        `${n}-${b}`
+      );
+    }) }),
+    i === "single" && n === 0 && /* @__PURE__ */ d("div", { className: s["today-footer"], "data-testid": "today-footer", children: /* @__PURE__ */ d(
+      "button",
+      {
+        className: s["today-button"],
+        onClick: () => {
+          const r = x();
+          B(r);
+        },
+        "data-testid": "today-button",
+        children: {
+          en: "Today",
+          pt: "Hoje"
+        }[u.split("-")[0]] || "Today"
+      }
+    ) })
+  ] });
+};
+export {
+  K as renderCalendarDays,
+  G as renderDayNames
+};

package/dist/components/DatePicker/renderCalendarDays.test.d.ts

@@ -0,0 +1,2 @@
+import { renderCalendarDays, renderDayNames } from './renderCalendarDays';
+export { renderDayNames, renderCalendarDays };

package/dist/components/DatePicker/renderDualCalendarHeader.d.ts

@@ -0,0 +1,8 @@
+import { Dayjs } from 'dayjs';
+interface RenderDualCalendarHeaderProps {
+    currentMonth: Dayjs;
+    locale: string;
+    setCurrentMonth: (month: Dayjs) => void;
+}
+export declare const renderDualCalendarHeader: ({ currentMonth, locale, setCurrentMonth }: RenderDualCalendarHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/renderDualCalendarHeader.js

@@ -0,0 +1,51 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { Icon as o } from "../Icon/Icon.js";
+import { s as t } from "../../DatePicker.module-CmT9Zbbu.js";
+import { getPreviousMonth as d, getNextMonth as n } from "./dateUtils.js";
+const v = ({ currentMonth: e, locale: r, setCurrentMonth: i }) => /* @__PURE__ */ s("div", { className: t["month-header-row"], "data-testid": "dual-calendar-header", children: [
+  /* @__PURE__ */ a(
+    "button",
+    {
+      onClick: () => i(e.subtract(1, "year")),
+      "aria-label": "Previous Year",
+      className: t["nav-button"],
+      "data-testid": "previous-year-button",
+      children: /* @__PURE__ */ a("div", { className: t.rotate, children: /* @__PURE__ */ a(o, { icon: "chevrons-right", size: 24 }) })
+    }
+  ),
+  /* @__PURE__ */ a(
+    "button",
+    {
+      onClick: () => i(d(e)),
+      "aria-label": "Previous Month",
+      className: t["nav-button"],
+      "data-testid": "previous-month-button",
+      children: /* @__PURE__ */ a("div", { className: t.rotate, children: /* @__PURE__ */ a(o, { icon: "chevron-right", size: 24 }) })
+    }
+  ),
+  /* @__PURE__ */ a("div", { className: t["month-header"], "data-testid": "current-month-display", children: e.locale(r).format("MMMM YYYY") }),
+  /* @__PURE__ */ a("div", { className: t["month-header"], "data-testid": "next-month-display", children: e.add(1, "month").locale(r).format("MMMM YYYY") }),
+  /* @__PURE__ */ a(
+    "button",
+    {
+      onClick: () => i(n(e)),
+      "aria-label": "Next Month",
+      className: t["nav-button"],
+      "data-testid": "next-month-button",
+      children: /* @__PURE__ */ a(o, { icon: "chevron-right", size: 24 })
+    }
+  ),
+  /* @__PURE__ */ a(
+    "button",
+    {
+      onClick: () => i(e.add(1, "year")),
+      "aria-label": "Next Year",
+      className: t["nav-button"],
+      "data-testid": "next-year-button",
+      children: /* @__PURE__ */ a(o, { icon: "chevrons-right", size: 24 })
+    }
+  )
+] });
+export {
+  v as renderDualCalendarHeader
+};

package/dist/components/DatePicker/renderHeader.d.ts

@@ -0,0 +1,11 @@
+import { Dayjs } from 'dayjs';
+interface RenderHeaderProps {
+    currentViewMode: 'day' | 'month' | 'year';
+    currentMonth: Dayjs;
+    locale: string;
+    navigateToPrevious: () => void;
+    navigateToNext: () => void;
+    setCurrentViewMode: (viewMode: 'day' | 'month' | 'year') => void;
+}
+export declare const renderHeader: ({ currentViewMode, currentMonth, locale, navigateToPrevious, navigateToNext, setCurrentViewMode, }: RenderHeaderProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/DatePicker/renderHeader.js

@@ -0,0 +1,41 @@
+import { jsxs as i, jsx as e, Fragment as n } from "react/jsx-runtime";
+import { Icon as o } from "../Icon/Icon.js";
+import { s as t } from "../../DatePicker.module-CmT9Zbbu.js";
+const k = ({
+  currentViewMode: r,
+  currentMonth: a,
+  locale: d,
+  navigateToPrevious: s,
+  navigateToNext: c,
+  setCurrentViewMode: l
+}) => r === "month" ? null : /* @__PURE__ */ i("div", { className: t.header, "data-testid": "datepicker-header", children: [
+  /* @__PURE__ */ e("button", { onClick: s, "aria-label": "Previous", "data-testid": "datepicker-previous-button", children: /* @__PURE__ */ e("div", { className: t.rotate, children: /* @__PURE__ */ e(o, { icon: "chevron-right", size: 24 }) }) }),
+  /* @__PURE__ */ i("span", { "data-testid": "datepicker-header-label", children: [
+    r === "day" && /* @__PURE__ */ i(n, { children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: t["month-selector"],
+          onClick: () => l("month"),
+          "data-testid": "datepicker-month-selector",
+          children: a.locale(d).format("MMMM")
+        }
+      ),
+      " ",
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: t["year-selector"],
+          onClick: () => l("year"),
+          "data-testid": "datepicker-year-selector",
+          children: a.locale(d).format("YYYY")
+        }
+      )
+    ] }),
+    r === "year" && `${a.year() - 6} - ${a.year() + 5}`
+  ] }),
+  /* @__PURE__ */ e("button", { onClick: c, "aria-label": "Next", "data-testid": "datepicker-next-button", children: /* @__PURE__ */ e(o, { icon: "chevron-right", size: 24 }) })
+] });
+export {
+  k as renderHeader
+};

package/dist/components/DatePicker/renderNavigatorInput.d.ts

@@ -0,0 +1,16 @@
+import { Dayjs } from 'dayjs';
+type RenderNavigatorInputProps = {
+    navigateToPrevious: () => void;
+    navigateToNext: () => void;
+    currentMonth: Dayjs;
+    selectedDate: Dayjs | null;
+    locale: string;
+    currentViewMode: 'day' | 'month' | 'year';
+    mode: 'single' | 'range';
+    setCurrentViewMode: (viewMode: 'day' | 'month' | 'year') => void;
+    setIsOpen: (isOpen: boolean) => void;
+    setSelectedDate: (date: Dayjs) => void;
+    onChange: (date: Dayjs | [Dayjs | null, Dayjs | null]) => void;
+};
+export declare const renderNavigatorInput: ({ navigateToPrevious, navigateToNext, currentMonth, selectedDate, locale, currentViewMode, mode, setCurrentViewMode, setIsOpen, setSelectedDate, onChange, }: RenderNavigatorInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/renderNavigatorInput.js

@@ -0,0 +1,73 @@
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { Icon as s } from "../Icon/Icon.js";
+import { s as i } from "../../DatePicker.module-CmT9Zbbu.js";
+const p = ({
+  navigateToPrevious: b,
+  navigateToNext: u,
+  currentMonth: m,
+  selectedDate: a,
+  locale: o,
+  currentViewMode: r,
+  mode: l,
+  setCurrentViewMode: h,
+  setIsOpen: v,
+  setSelectedDate: c,
+  onChange: d
+}) => /* @__PURE__ */ f("div", { className: `${i["navigator-input"]} ${i["auto-width"]}`, "data-testid": "date-navigator", children: [
+  /* @__PURE__ */ n(
+    "button",
+    {
+      onClick: () => {
+        if (b(), l === "single" && a) {
+          let t;
+          r === "day" ? t = a.subtract(1, "month") : r === "month" ? t = a.subtract(1, "year") : t = a.subtract(12, "year"), c(t), d(t);
+        }
+      },
+      className: i["nav-button"],
+      "aria-label": "Previous month",
+      "data-testid": "nav-previous-button",
+      children: /* @__PURE__ */ n("div", { className: i.rotate, children: /* @__PURE__ */ n(s, { icon: "chevron-right", size: 24 }) })
+    }
+  ),
+  /* @__PURE__ */ n("span", { className: i["nav-calendar-static"], "data-testid": "nav-calendar-icon", children: /* @__PURE__ */ n(s, { icon: "calendar", size: 16 }) }),
+  /* @__PURE__ */ n(
+    "button",
+    {
+      className: i["nav-month-button"],
+      onClick: () => {
+        h("month"), v(!0);
+      },
+      "data-testid": "nav-month-button",
+      children: a ? a.locale(o).format("MMM") : m.locale(o).format("MMM")
+    }
+  ),
+  /* @__PURE__ */ n(
+    "button",
+    {
+      className: i["nav-year-button"],
+      onClick: () => {
+        h("year"), v(!0);
+      },
+      "data-testid": "nav-year-button",
+      children: a ? a.locale(o).format("YYYY") : m.locale(o).format("YYYY")
+    }
+  ),
+  /* @__PURE__ */ n(
+    "button",
+    {
+      onClick: () => {
+        if (u(), l === "single" && a) {
+          let t;
+          r === "day" ? t = a.add(1, "month") : r === "month" ? t = a.add(1, "year") : t = a.add(12, "year"), c(t), d(t);
+        }
+      },
+      className: i["nav-button"],
+      "aria-label": "Next month",
+      "data-testid": "nav-next-button",
+      children: /* @__PURE__ */ n(s, { icon: "chevron-right", size: 24 })
+    }
+  )
+] });
+export {
+  p as renderNavigatorInput
+};

package/dist/components/DatePicker/renderNavigatorInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DatePicker/renderPeriodSelection.d.ts

@@ -0,0 +1,17 @@
+import { Dayjs } from 'dayjs';
+type RenderPeriodSelectionProps = {
+    currentViewMode: 'day' | 'month' | 'year';
+    currentMonth: Dayjs;
+    selectedDate: Dayjs | null;
+    locale: string;
+    mode: 'single' | 'range';
+    initialViewMode: 'day' | 'month' | 'year';
+    navigatorInput: boolean;
+    setCurrentMonth: (month: Dayjs) => void;
+    setSelectedDate: (date: Dayjs | null) => void;
+    onChange: (date: Dayjs | [Dayjs | null, Dayjs | null]) => void;
+    setCurrentViewMode: (viewMode: 'day' | 'month' | 'year') => void;
+    setIsOpen: (isOpen: boolean) => void;
+};
+export declare const renderPeriodSelection: ({ currentViewMode, currentMonth, selectedDate, locale, mode, initialViewMode, navigatorInput, setCurrentMonth, setSelectedDate, onChange, setCurrentViewMode, setIsOpen, }: RenderPeriodSelectionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};