@codecademy/gamut 68.1.2 → 68.1.3-alpha.77d8dc.0

package/dist/DatePicker/Calendar/utils/format.js

@@ -0,0 +1,184 @@
+/**
+ * Date formatting for the calendar using Intl.DateTimeFormat.
+ */
+
+/**
+ * Capitalize the first character of a string; rest unchanged (e.g. "next month" → "Next month").
+ */
+export const capitalizeFirst = str => str.length === 0 ? str : str[0].toUpperCase() + str.slice(1);
+
+/**
+ * Format month and year for the calendar header (e.g. "February 2026").
+ */
+export const formatMonthYear = (date, locale) => {
+  return new Intl.DateTimeFormat(locale, {
+    month: 'long',
+    year: 'numeric'
+  }).format(date);
+};
+
+/**
+ * Get short weekday labels for column headers (e.g. ["Su", "Mo", ...]).
+ * Order depends on weekStartsOn: 0 = Sunday first, 1 = Monday first.
+ */
+export const getWeekdayLabels = (locale, weekStartsOn = 0) => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    weekday: 'short'
+  });
+  // Jan 7, 2024 is a Sunday; add 0..6 days to get Sun..Sat
+  const sunday = new Date(2024, 0, 7);
+  const labels = Array.from({
+    length: 7
+  }, (_, i) => {
+    const d = new Date(sunday);
+    d.setDate(sunday.getDate() + i);
+    return formatter.format(d);
+  });
+  if (weekStartsOn === 1) {
+    return [...labels.slice(1), labels[0]];
+  }
+  return labels;
+};
+
+/**
+ * Get full weekday names for abbr attributes (e.g. "Sunday", "Monday").
+ * Same order as getWeekdayLabels.
+ */
+export const getWeekdayFullNames = (locale, weekStartsOn = 0) => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    weekday: 'long'
+  });
+  const sunday = new Date(2024, 0, 7);
+  const names = Array.from({
+    length: 7
+  }, (_, i) => {
+    const d = new Date(sunday);
+    d.setDate(sunday.getDate() + i);
+    return formatter.format(d);
+  });
+  if (weekStartsOn === 1) {
+    return [...names.slice(1), names[0]];
+  }
+  return names;
+};
+
+/**
+ * Get localized "next month" and "previous month" labels for calendar nav.
+ * Uses Intl.RelativeTimeFormat with numeric: "auto" (e.g. "next month", "last month").
+ */
+export const getRelativeMonthLabels = locale => {
+  const rtf = new Intl.RelativeTimeFormat(locale, {
+    numeric: 'auto'
+  });
+  return {
+    nextMonth: capitalizeFirst(rtf.format(1, 'month')),
+    lastMonth: capitalizeFirst(rtf.format(-1, 'month'))
+  };
+};
+
+/**
+ * Get localized "today" label (e.g. "today").
+ */
+export const getRelativeTodayLabel = locale => {
+  const rtf = new Intl.RelativeTimeFormat(locale, {
+    numeric: 'auto'
+  });
+  return capitalizeFirst(rtf.format(0, 'day'));
+};
+
+/**
+ * Get the locale's short date format pattern (e.g. "MM/DD/YYYY" for en-US,
+ * "DD/MM/YYYY" for en-GB). Uses Intl.DateTimeFormat formatToParts to infer
+ * order and separators. Useful for parsing or building locale-aware inputs.
+ */
+export const getDateFormatPattern = locale => {
+  const parts = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }).formatToParts(new Date(2025, 0, 15));
+  return parts.map(p => {
+    switch (p.type) {
+      case 'day':
+        return 'DD';
+      case 'month':
+        return 'MM';
+      case 'year':
+        return 'YYYY';
+      default:
+        return p.value;
+    }
+  }).join('');
+};
+
+/**
+ * Format a date for display in the date picker input (e.g. "2/15/2026").
+ */
+export const formatDateForInput = (date, locale) => {
+  return new Intl.DateTimeFormat(locale, {
+    month: 'numeric',
+    day: 'numeric',
+    year: 'numeric'
+  }).format(date);
+};
+
+/**
+ * Parse a string from the date input into a Date, or null if invalid.
+ * Only returns a date when the input is a complete valid date (e.g. "2/15/2026").
+ * Partial input like "1" or "2/15" returns null even though Date("1") would parse.
+ */
+
+// this logic needs some work
+export const parseDateFromInput = (value, locale) => {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const parsed = new Date(trimmed);
+  if (Number.isNaN(parsed.getTime())) return null;
+  const formatted = formatDateForInput(parsed, locale);
+  if (formatted === trimmed) return parsed;
+  const parts = trimmed.split(/[/-]/);
+  if (parts.length >= 3) return parsed;
+  return null;
+};
+const RANGE_SEPARATOR = ' – ';
+
+/**
+ * Format a date range for the input (e.g. "2/15/2026 – 2/20/2026").
+ */
+export const formatDateRangeForInput = (startDate, endDate, locale) => {
+  if (!startDate && !endDate) return '';
+  if (!startDate) return formatDateForInput(endDate, locale);
+  if (!endDate) return formatDateForInput(startDate, locale);
+  return `${formatDateForInput(startDate, locale)}${RANGE_SEPARATOR}${formatDateForInput(endDate, locale)}`;
+};
+
+/**
+ * Parse a range string (e.g. "2/15/2026 – 2/20/2026") into { startDate, endDate }.
+ * Returns null if invalid. Single date is allowed and yields startDate = endDate.
+ */
+export const parseDateRangeFromInput = (value, locale) => {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const parts = trimmed.split(RANGE_SEPARATOR).map(s => s.trim());
+  if (parts.length === 1) {
+    const d = parseDateFromInput(parts[0], locale);
+    if (!d) return null;
+    return {
+      startDate: d,
+      endDate: new Date(d)
+    };
+  }
+  if (parts.length === 2) {
+    const start = parseDateFromInput(parts[0], locale);
+    const end = parseDateFromInput(parts[1], locale);
+    if (!start || !end) return null;
+    return start.getTime() <= end.getTime() ? {
+      startDate: start,
+      endDate: end
+    } : {
+      startDate: end,
+      endDate: start
+    };
+  }
+  return null;
+};

package/dist/DatePicker/Calendar/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dateGrid';
+export * from './format';
+export * from './validation';

package/dist/DatePicker/Calendar/utils/index.js

@@ -0,0 +1,3 @@
+export * from './dateGrid';
+export * from './format';
+export * from './validation';

package/dist/DatePicker/Calendar/utils/keyHandler.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Clamp a day to the last day of the given month (e.g. Jan 31 -> Feb 28).
+ */
+export declare const clampToMonth: (year: number, month: number, day: number) => Date;
+/** Flat list of dates in grid order (row-major, non-null only) with row index for Home/End */
+export declare const getDatesWithRow: (weeks: (Date | null)[][]) => {
+    date: Date;
+    rowIndex: number;
+}[];
+export declare const keyHandler: (e: React.KeyboardEvent, date: Date, onFocusedDateChange: (date: Date | null) => void, datesWithRow: {
+    date: Date;
+    rowIndex: number;
+}[], month: number, year: number, disabledDates: Date[], onDateSelect: (date: Date) => void, onEscapeKeyPress?: () => void, onVisibleDateChange?: ((newDate: Date) => void) | undefined) => void;

package/dist/DatePicker/Calendar/utils/keyHandler.js

@@ -0,0 +1,116 @@
+import { isDateDisabled } from './dateGrid';
+
+/**
+ * Clamp a day to the last day of the given month (e.g. Jan 31 -> Feb 28).
+ */
+export const clampToMonth = (year, month, day) => {
+  const last = new Date(year, month + 1, 0).getDate();
+  return new Date(year, month, Math.min(day, last));
+};
+
+/** Flat list of dates in grid order (row-major, non-null only) with row index for Home/End */
+export const getDatesWithRow = weeks => {
+  const result = [];
+  weeks.forEach((week, rowIndex) => {
+    week.forEach(date => {
+      if (date !== null) result.push({
+        date,
+        rowIndex
+      });
+    });
+  });
+  return result;
+};
+export const keyHandler = (e, date, onFocusedDateChange, datesWithRow, month, year, disabledDates, onDateSelect, onEscapeKeyPress, onVisibleDateChange) => {
+  const key = date.getTime();
+  const idx = datesWithRow.findIndex(({
+    date: d
+  }) => d.getTime() === key);
+  if (idx < 0) return;
+  const currentRow = datesWithRow[idx].rowIndex;
+  const day = date.getDate();
+  let newDate = null;
+  let newVisibleDate = null;
+  switch (e.key) {
+    case 'ArrowLeft':
+      e.preventDefault();
+      if (idx > 0) {
+        newDate = datesWithRow[idx - 1].date;
+      } else {
+        const lastDayPrevMonth = new Date(year, month, 0);
+        newDate = lastDayPrevMonth;
+        newVisibleDate = new Date(year, month - 1, 1);
+      }
+      break;
+    case 'ArrowRight':
+      e.preventDefault();
+      if (idx < datesWithRow.length - 1) {
+        newDate = datesWithRow[idx + 1].date;
+      } else {
+        newDate = new Date(year, month + 1, 1);
+        newVisibleDate = new Date(year, month + 1, 1);
+      }
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      newDate = new Date(date);
+      newDate.setDate(newDate.getDate() - 7);
+      if (newDate.getMonth() !== month || newDate.getFullYear() !== year) {
+        newVisibleDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+      }
+      break;
+    case 'ArrowDown':
+      e.preventDefault();
+      newDate = new Date(date);
+      newDate.setDate(newDate.getDate() + 7);
+      if (newDate.getMonth() !== month || newDate.getFullYear() !== year) {
+        newVisibleDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+      }
+      break;
+    case 'Home':
+      e.preventDefault();
+      newDate = datesWithRow.find(({
+        rowIndex
+      }) => rowIndex === currentRow)?.date ?? date;
+      break;
+    case 'End':
+      e.preventDefault();
+      newDate = [...datesWithRow].reverse().find(({
+        rowIndex
+      }) => rowIndex === currentRow)?.date ?? date;
+      break;
+    case 'PageDown':
+      e.preventDefault();
+      if (e.shiftKey) {
+        newDate = clampToMonth(year + 1, month, day);
+      } else {
+        newDate = clampToMonth(year, month + 1, day);
+      }
+      newVisibleDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+      break;
+    case 'PageUp':
+      e.preventDefault();
+      if (e.shiftKey) {
+        newDate = clampToMonth(year - 1, month, day);
+      } else {
+        newDate = clampToMonth(year, month - 1, day);
+      }
+      newVisibleDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+      break;
+    case 'Enter':
+    case ' ':
+      e.preventDefault();
+      if (!isDateDisabled(date, disabledDates)) onDateSelect(date);
+      return;
+    case 'Escape':
+      e.preventDefault();
+      onEscapeKeyPress?.();
+      return;
+    default:
+      return;
+  }
+  if (newDate !== null) {
+    onFocusedDateChange(newDate);
+    if (newVisibleDate !== null) onVisibleDateChange?.(newVisibleDate);
+  }
+};

package/dist/DatePicker/Calendar/utils/validation.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Validation helpers for DatePicker (single-date).
+ * Used to mark invalid dates as unselectable and for manual entry validation.
+ */
+/**
+ * Check if a date is in the past (before today at start of day).
+ * Useful for disabling past dates in the calendar.
+ */
+export declare const isPastDate: (date: Date) => boolean;
+/**
+ * Check if a date is valid (finite and not NaN).
+ */
+export declare const isValidDate: (date: Date) => boolean;

package/dist/DatePicker/Calendar/utils/validation.js

@@ -0,0 +1,23 @@
+/**
+ * Validation helpers for DatePicker (single-date).
+ * Used to mark invalid dates as unselectable and for manual entry validation.
+ */
+
+/**
+ * Check if a date is in the past (before today at start of day).
+ * Useful for disabling past dates in the calendar.
+ */
+export const isPastDate = date => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const normalizedDate = new Date(date);
+  normalizedDate.setHours(0, 0, 0, 0);
+  return normalizedDate.getTime() < today.getTime();
+};
+
+/**
+ * Check if a date is valid (finite and not NaN).
+ */
+export const isValidDate = date => {
+  return date instanceof Date && !Number.isNaN(date.getTime());
+};

package/dist/DatePicker/DatePicker.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type DatePickerProps } from './types';
+/**
+ * DatePicker: single-date or range. Holds shared state and provides it via context.
+ * Single: selectedDate, setSelectedDate. Range: startDate, endDate, setStartDate, setEndDate.
+ * With no children, renders default layout (input + calendar popover).
+ */
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/DatePicker/DatePicker.js

@@ -0,0 +1,147 @@
+import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
+import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { FlexBox } from '../Box';
+import { PopoverContainer } from '../PopoverContainer';
+import { DatePickerCalendar } from './DatePickerCalendar';
+import { DatePickerProvider } from './DatePickerContext';
+import { DatePickerInput } from './DatePickerInput';
+import { DEFAULT_DATE_PICKER_TRANSLATIONS } from './translations';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function isRangeProps(props) {
+  return props.mode === 'range';
+}
+
+/**
+ * DatePicker: single-date or range. Holds shared state and provides it via context.
+ * Single: selectedDate, setSelectedDate. Range: startDate, endDate, setStartDate, setEndDate.
+ * With no children, renders default layout (input + calendar popover).
+ */
+export const DatePicker = props => {
+  const {
+    locale,
+    disabledDates = [],
+    placeholder,
+    mode,
+    children,
+    translations: translationsProp
+  } = props;
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [activeRangePart, setActiveRangePart] = useState(null);
+  const inputRef = useRef(null);
+  const dialogId = useId();
+  const calendarDialogId = `datepicker-dialog-${dialogId.replace(/:/g, '')}`;
+  const popoverOffset = 4;
+
+  // Align popover left edge with input left edge. PopoverContainer's "bottom-right"
+  // sets popover left = target left + (target width + offset + x), so we pass
+  // x = -(target width + offset) to get popover left = target left.
+  const [popoverX, setPopoverX] = useState(0);
+  useLayoutEffect(() => {
+    if (isCalendarOpen && inputRef.current) {
+      const width = inputRef.current.offsetWidth;
+      setPopoverX(-(width + popoverOffset));
+    }
+  }, [isCalendarOpen, popoverOffset]);
+  const openCalendar = useCallback(() => setIsCalendarOpen(true), []);
+  const closeCalendar = useCallback(() => {
+    setIsCalendarOpen(false);
+    setActiveRangePart(null);
+    inputRef.current?.focus();
+  }, []);
+  const startOrSelectedDate = isRangeProps(props) ? props.startDate : props.selectedDate;
+  const endDate = isRangeProps(props) ? props.endDate : null;
+  const setSelection = useCallback((start, end) => {
+    if (isRangeProps(props)) {
+      props.setStartDate(start);
+      props.setEndDate(end ?? null);
+    } else {
+      props.setSelectedDate(start);
+    }
+  }, [props]);
+  const contextValue = useMemo(() => {
+    const translations = {
+      ...DEFAULT_DATE_PICKER_TRANSLATIONS,
+      ...translationsProp
+    };
+    const base = {
+      startOrSelectedDate,
+      setSelection,
+      isCalendarOpen,
+      openCalendar,
+      closeCalendar,
+      locale,
+      disabledDates,
+      calendarDialogId,
+      translations
+    };
+    return mode === 'range' ? {
+      ...base,
+      mode: 'range',
+      endDate,
+      activeRangePart,
+      setActiveRangePart
+    } : {
+      ...base,
+      mode: 'single'
+    };
+  }, [mode, startOrSelectedDate, endDate, setSelection, activeRangePart, setActiveRangePart, isCalendarOpen, openCalendar, closeCalendar, locale, disabledDates, calendarDialogId, translationsProp]);
+
+  // what is this doing
+  // useEffect(() => {
+  //   if (!isCalendarOpen) return;
+  //   const id = setTimeout(() => inputRef.current?.focus(), 0);
+  //   return () => clearTimeout(id);
+  // }, [isCalendarOpen]);
+
+  const content = children !== undefined ? children : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(FlexBox, {
+      gap: 8,
+      width: "fit-content",
+      wrap: true,
+      children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(DatePickerInput, {
+          label: props.startLabel,
+          placeholder: placeholder,
+          rangePart: "start",
+          ref: inputRef
+        }), /*#__PURE__*/_jsx(MiniArrowRightIcon, {
+          alignSelf: "center"
+        }), ' ', /*#__PURE__*/_jsx(DatePickerInput, {
+          label: props.endLabel,
+          placeholder: placeholder,
+          rangePart: "end"
+          // does this need a ref?
+        })]
+      }) : /*#__PURE__*/_jsx(DatePickerInput, {
+        label: props.label,
+        placeholder: placeholder,
+        ref: inputRef
+      })
+    }), /*#__PURE__*/_jsx(PopoverContainer, {
+      alignment: "bottom-right",
+      allowPageInteraction: true,
+      focusOnProps: {
+        autoFocus: false,
+        focusLock: false
+      },
+      isOpen: isCalendarOpen,
+      offset: popoverOffset,
+      targetRef: inputRef,
+      x: popoverX,
+      y: 0,
+      onRequestClose: closeCalendar,
+      children: /*#__PURE__*/_jsx("div", {
+        "aria-label": "Choose date",
+        id: calendarDialogId,
+        role: "dialog",
+        children: /*#__PURE__*/_jsx(DatePickerCalendar, {
+          dialogId: calendarDialogId
+        })
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsx(DatePickerProvider, {
+    value: contextValue,
+    children: content
+  });
+};

package/dist/DatePicker/DatePickerCalendar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type DatePickerCalendarProps = {
+    /** id for the dialog (for aria-controls from input). */
+    dialogId: string;
+    /** Whether to start the calendar on Sunday (0) or Monday (1). Default is Sunday. */
+    weekStartsOn?: 0 | 1;
+};
+/**
+ * Calendar that composes Calendar, CalendarHeader, CalendarBody, CalendarFooter.
+ * When inside DatePicker: owns local visibleDate and focusedDate; updates shared
+ * state via context. Supports single-date and range modes.
+ */
+export declare const DatePickerCalendar: React.FC<DatePickerCalendarProps>;

package/dist/DatePicker/DatePickerCalendar.js

@@ -0,0 +1,130 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import { Box, FlexBox } from '../Box';
+import { Calendar, CalendarBody, CalendarFooter, CalendarHeader } from './Calendar';
+import { useDatePicker } from './DatePickerContext';
+import { handleDateSelectRange, handleDateSelectSingle } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Calendar that composes Calendar, CalendarHeader, CalendarBody, CalendarFooter.
+ * When inside DatePicker: owns local visibleDate and focusedDate; updates shared
+ * state via context. Supports single-date and range modes.
+ */
+export const DatePickerCalendar = ({
+  dialogId,
+  weekStartsOn = 0
+}) => {
+  const context = useDatePicker();
+  const generatedId = useId();
+  const fallbackDialogId = `datepicker-calendar-${generatedId.replace(/:/g, '')}`;
+  const headingId = dialogId ?? context?.calendarDialogId ?? fallbackDialogId;
+  if (context == null) {
+    throw new Error('DatePickerCalendar must be used inside a DatePicker (it reads shared state from context).');
+  }
+  const {
+    mode,
+    startOrSelectedDate,
+    setSelection,
+    disabledDates,
+    locale,
+    closeCalendar,
+    isCalendarOpen,
+    translations
+  } = context;
+  const isRange = mode === 'range';
+  const endDate = isRange ? context.endDate : undefined;
+  const firstOfMonth = date => new Date(date.getFullYear(), date.getMonth(), 1);
+  const [visibleDate, setVisibleDate] = useState(() => firstOfMonth(startOrSelectedDate ?? new Date()));
+  const [focusedDate, setFocusedDate] = useState(() => startOrSelectedDate ?? endDate ?? new Date());
+  const wasOpenRef = useRef(false);
+
+  // Sync visible month to selection only when the calendar opens, not on every
+  // date click. Otherwise clicking a date in the second month would jump the view.
+  useEffect(() => {
+    const justOpened = isCalendarOpen && !wasOpenRef.current;
+    wasOpenRef.current = isCalendarOpen;
+    if (!justOpened) return;
+    const anchor = startOrSelectedDate ?? endDate;
+    if (anchor) {
+      setVisibleDate(firstOfMonth(anchor));
+      setFocusedDate(startOrSelectedDate ?? endDate ?? new Date());
+    }
+  }, [isCalendarOpen, startOrSelectedDate, endDate]);
+  const onDateSelect = date => {
+    if (!isRange) {
+      handleDateSelectSingle(date, startOrSelectedDate, setSelection);
+    } else {
+      context.setActiveRangePart(null);
+      handleDateSelectRange(date, context.activeRangePart, startOrSelectedDate, context.endDate, setSelection);
+    }
+  };
+  const handleClearDate = () => {
+    setSelection(null);
+    setFocusedDate(visibleDate);
+  };
+  const handleTodayClick = () => {
+    const today = new Date();
+    setSelection(today);
+    setVisibleDate(firstOfMonth(today));
+    setFocusedDate(today);
+  };
+  const focusTarget = focusedDate ?? startOrSelectedDate ?? endDate ?? new Date();
+  const addMonths = (date, n) => new Date(date.getFullYear(), date.getMonth() + n, 1);
+  const secondMonthDate = addMonths(visibleDate, 1);
+  return /*#__PURE__*/_jsxs(Calendar, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      p: 24,
+      children: [/*#__PURE__*/_jsx(CalendarHeader, {
+        currentMonthYear: visibleDate,
+        headingId: headingId,
+        locale: locale,
+        secondMonthYear: secondMonthDate,
+        onCurrentMonthYearChange: setVisibleDate
+      }), /*#__PURE__*/_jsxs(FlexBox, {
+        children: [/*#__PURE__*/_jsx(CalendarBody, {
+          disabledDates: disabledDates,
+          endDate: endDate,
+          focusedDate: focusTarget,
+          labelledById: headingId,
+          locale: locale,
+          selectedDate: startOrSelectedDate,
+          visibleDate: visibleDate,
+          weekStartsOn: weekStartsOn,
+          onDateSelect: onDateSelect,
+          onEscapeKeyPress: closeCalendar,
+          onFocusedDateChange: setFocusedDate,
+          onVisibleDateChange: setVisibleDate
+        }), /*#__PURE__*/_jsx(Box, {
+          display: {
+            _: 'none',
+            xs: 'initial'
+          },
+          pl: {
+            _: 0,
+            xs: 32
+          },
+          children: /*#__PURE__*/_jsx(CalendarBody, {
+            disabledDates: disabledDates,
+            endDate: endDate,
+            focusedDate: focusTarget,
+            labelledById: headingId,
+            locale: locale,
+            selectedDate: startOrSelectedDate,
+            visibleDate: secondMonthDate,
+            weekStartsOn: weekStartsOn,
+            onDateSelect: onDateSelect,
+            onEscapeKeyPress: closeCalendar,
+            onFocusedDateChange: setFocusedDate,
+            onVisibleDateChange: setVisibleDate
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(CalendarFooter, {
+      clearText: translations.clear,
+      disabled: startOrSelectedDate === null && endDate === null,
+      locale: locale,
+      showClearButton: isRange,
+      onClearDate: handleClearDate,
+      onTodayClick: handleTodayClick
+    })]
+  });
+};

package/dist/DatePicker/DatePickerContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { DatePickerContextValue as DatePickerContextValueType } from './types';
+export declare const DatePickerContext: import("react").Context<DatePickerContextValueType | null>;
+/** Provider component; DatePicker uses this to set the context value. */
+export declare const DatePickerProvider: import("react").Provider<DatePickerContextValueType | null>;
+/**
+ * Returns the DatePicker context value (shared state and callbacks).
+ * Must be used inside a DatePicker. For composed layouts, use this to get
+ * openCalendar, closeCalendar, isCalendarOpen, inputRef, calendarDialogId, etc.
+ */
+export declare function useDatePicker(): DatePickerContextValueType;