@codecademy/gamut 68.1.3-alpha.bcf87d.0 → 68.1.3-alpha.da9068.0

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

@@ -2,66 +2,101 @@
  * Date formatting for the calendar using Intl.DateTimeFormat.
  */
 
+import { isValidDate } from './validation';
+
+/**
+ * Capitalize the first character of a string using the locale; rest unchanged (e.g. "next month" → "Next month").
+ */
+export const capitalizeFirst = (str, locale) => str.length === 0 ? str : str[0].toLocaleUpperCase(locale) + 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 ?? 'en-US', {
+  return new Intl.DateTimeFormat(locale, {
     month: 'long',
     year: 'numeric'
   }).format(date);
 };
 
 /**
- * Get short weekday labels for column headers (e.g. ["Su", "Mo", ...]).
+ * Get weekday names for column headers or abbr attributes.
  * Order depends on weekStartsOn: 0 = Sunday first, 1 = Monday first.
+ * @param format - 'short' for abbreviated (e.g. "Su", "Mo"), 'long' for full (e.g. "Sunday", "Monday")
  */
-export const getWeekdayLabels = (locale, weekStartsOn = 0) => {
-  const formatter = new Intl.DateTimeFormat(locale ?? 'en-US', {
-    weekday: 'short'
+export const getWeekdayNames = (format, locale, weekStartsOn = 0) => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    weekday: format
   });
   // 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({
+  const names = Array.from({
     length: 7
   }, (_, i) => {
-    const d = new Date(sunday);
-    d.setDate(sunday.getDate() + i);
-    return formatter.format(d);
+    const date = new Date(sunday);
+    date.setDate(sunday.getDate() + i);
+    return formatter.format(date);
   });
   if (weekStartsOn === 1) {
-    return [...labels.slice(1), labels[0]];
+    return [...names.slice(1), names[0]];
   }
-  return labels;
+  return names;
 };
 
 /**
- * Get full weekday names for abbr attributes (e.g. "Sunday", "Monday").
- * Same order as getWeekdayLabels.
+ * 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 getWeekdayFullNames = (locale, weekStartsOn = 0) => {
-  const formatter = new Intl.DateTimeFormat(locale ?? 'en-US', {
-    weekday: 'long'
+export const getRelativeMonthLabels = locale => {
+  const rtf = new Intl.RelativeTimeFormat(locale, {
+    numeric: 'auto'
   });
-  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);
+  return {
+    nextMonth: capitalizeFirst(rtf.format(1, 'month'), locale),
+    lastMonth: capitalizeFirst(rtf.format(-1, 'month'), locale)
+  };
+};
+
+/**
+ * Get localized "today" label (e.g. "today").
+ */
+export const getRelativeTodayLabel = locale => {
+  const rtf = new Intl.RelativeTimeFormat(locale, {
+    numeric: 'auto'
   });
-  if (weekStartsOn === 1) {
-    return [...names.slice(1), names[0]];
-  }
-  return names;
+  return capitalizeFirst(rtf.format(0, 'day'), locale);
+};
+
+/**
+ * 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(part => {
+    switch (part.type) {
+      case 'day':
+        return 'DD';
+      case 'month':
+        return 'MM';
+      case 'year':
+        return 'YYYY';
+      default:
+        return part.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 ?? 'en-US', {
+  return new Intl.DateTimeFormat(locale, {
     month: 'numeric',
     day: 'numeric',
     year: 'numeric'
@@ -79,52 +114,10 @@ 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;
+  if (!isValidDate(parsed)) 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/keyHandler.d.ts

@@ -10,4 +10,4 @@ export declare const getDatesWithRow: (weeks: (Date | null)[][]) => {
 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;
+}[], month: number, year: number, disabledDates: Date[], onDateSelect: (date: Date) => void, onEscapeKeyPress?: () => void, onVisibleDateChange?: ((newDate: Date) => void) | undefined, hasAdjacentMonthRight?: boolean, hasAdjacentMonthLeft?: boolean) => void;

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

@@ -21,14 +21,15 @@ export const getDatesWithRow = weeks => {
   });
   return result;
 };
-export const keyHandler = (e, date, onFocusedDateChange, datesWithRow, month, year, disabledDates, onDateSelect, onEscapeKeyPress, onVisibleDateChange) => {
-  const key = date.getTime();
+export const keyHandler = (e, date, onFocusedDateChange, datesWithRow, month, year, disabledDates, onDateSelect, onEscapeKeyPress, onVisibleDateChange, hasAdjacentMonthRight, hasAdjacentMonthLeft) => {
   const idx = datesWithRow.findIndex(({
-    date: d
-  }) => d.getTime() === key);
+    date: dateWithRow
+  }) => dateWithRow.getTime() === date.getTime());
   if (idx < 0) return;
   const currentRow = datesWithRow[idx].rowIndex;
   const day = date.getDate();
+  const hasRight = !!hasAdjacentMonthRight;
+  const hasLeft = !!hasAdjacentMonthLeft;
   let newDate = null;
   let newVisibleDate = null;
   switch (e.key) {
@@ -39,7 +40,9 @@ export const keyHandler = (e, date, onFocusedDateChange, datesWithRow, month, ye
       } else {
         const lastDayPrevMonth = new Date(year, month, 0);
         newDate = lastDayPrevMonth;
-        newVisibleDate = new Date(year, month - 1, 1);
+        if (!hasLeft) {
+          newVisibleDate = new Date(year, month - 1, 1);
+        }
       }
       break;
     case 'ArrowRight':
@@ -48,7 +51,9 @@ export const keyHandler = (e, date, onFocusedDateChange, datesWithRow, month, ye
         newDate = datesWithRow[idx + 1].date;
       } else {
         newDate = new Date(year, month + 1, 1);
-        newVisibleDate = new Date(year, month + 1, 1);
+        if (!hasRight) {
+          newVisibleDate = new Date(year, month + 1, 1);
+        }
       }
       break;
     case 'ArrowUp':
@@ -56,7 +61,9 @@ export const keyHandler = (e, date, onFocusedDateChange, datesWithRow, month, ye
       newDate = new Date(date);
       newDate.setDate(newDate.getDate() - 7);
       if (newDate.getMonth() !== month || newDate.getFullYear() !== year) {
-        newVisibleDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+        if (!hasLeft) {
+          newVisibleDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+        }
       }
       break;
     case 'ArrowDown':
@@ -64,7 +71,9 @@ export const keyHandler = (e, date, onFocusedDateChange, datesWithRow, month, ye
       newDate = new Date(date);
       newDate.setDate(newDate.getDate() + 7);
       if (newDate.getMonth() !== month || newDate.getFullYear() !== year) {
-        newVisibleDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+        if (!hasRight) {
+          newVisibleDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+        }
       }
       break;
     case 'Home':

package/dist/DatePicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { DatePickerProps } from './types';
+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.

package/dist/DatePicker/DatePicker.js

@@ -1,9 +1,11 @@
+import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
 import { useCallback, useId, useMemo, useRef, useState } from 'react';
-import { FlexBox } from '../Box';
+import { Box, 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';
@@ -16,11 +18,12 @@ function isRangeProps(props) {
  */
 export const DatePicker = props => {
   const {
-    locale = 'en-US',
+    locale,
     disabledDates = [],
     placeholder,
     mode,
-    children
+    children,
+    translations: translationsProp
   } = props;
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const [activeRangePart, setActiveRangePart] = useState(null);
@@ -44,6 +47,10 @@ export const DatePicker = props => {
     }
   }, [props]);
   const contextValue = useMemo(() => {
+    const translations = {
+      ...DEFAULT_DATE_PICKER_TRANSLATIONS,
+      ...translationsProp
+    };
     const base = {
       startOrSelectedDate,
       setSelection,
@@ -52,7 +59,8 @@ export const DatePicker = props => {
       closeCalendar,
       locale,
       disabledDates,
-      calendarDialogId
+      calendarDialogId,
+      translations
     };
     return mode === 'range' ? {
       ...base,
@@ -64,26 +72,21 @@ export const DatePicker = props => {
       ...base,
       mode: 'single'
     };
-  }, [mode, startOrSelectedDate, endDate, setSelection, activeRangePart, setActiveRangePart, isCalendarOpen, openCalendar, closeCalendar, locale, disabledDates, calendarDialogId]);
-
-  // what is this doing
-  // useEffect(() => {
-  //   if (!isCalendarOpen) return;
-  //   const id = setTimeout(() => inputRef.current?.focus(), 0);
-  //   return () => clearTimeout(id);
-  // }, [isCalendarOpen]);
-
+  }, [mode, startOrSelectedDate, endDate, setSelection, activeRangePart, setActiveRangePart, isCalendarOpen, openCalendar, closeCalendar, locale, disabledDates, calendarDialogId, translationsProp]);
   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(Box, {
+          alignSelf: "center",
+          mt: 32,
+          children: /*#__PURE__*/_jsx(MiniArrowRightIcon, {})
         }), /*#__PURE__*/_jsx(DatePickerInput, {
           label: props.endLabel,
           placeholder: placeholder,
@@ -97,21 +100,19 @@ export const DatePicker = props => {
       })
     }), /*#__PURE__*/_jsx(PopoverContainer, {
       alignment: "bottom-left",
-      allowPageInteraction: true
-      // look into if we can kill this and mess with where we are focusing instead
-      ,
+      allowPageInteraction: true,
       focusOnProps: {
         autoFocus: false,
         focusLock: false
       },
       invertAxis: "x",
       isOpen: isCalendarOpen,
-      offset: 10,
       targetRef: inputRef,
-      onRequestClose: closeCalendar // without this we cant type in the input but there has to be a better way
-      ,
+      x: -20,
+      y: -16,
+      onRequestClose: closeCalendar,
       children: /*#__PURE__*/_jsx("div", {
-        "aria-label": "Choose date",
+        "aria-label": contextValue.translations.calendarDialogAriaLabel,
         id: calendarDialogId,
         role: "dialog",
         children: /*#__PURE__*/_jsx(DatePickerCalendar, {

package/dist/DatePicker/DatePickerCalendar.js

@@ -1,4 +1,6 @@
+import { breakpoints } from '@codecademy/gamut-styles';
 import { useEffect, useId, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import { Box, FlexBox } from '../Box';
 import { Calendar, CalendarBody, CalendarFooter, CalendarHeader } from './Calendar';
 import { useDatePicker } from './DatePickerContext';
@@ -27,7 +29,8 @@ export const DatePickerCalendar = ({
     disabledDates,
     locale,
     closeCalendar,
-    isCalendarOpen
+    isCalendarOpen,
+    translations
   } = context;
   const isRange = mode === 'range';
   const endDate = isRange ? context.endDate : undefined;
@@ -53,7 +56,7 @@ export const DatePickerCalendar = ({
       handleDateSelectSingle(date, startOrSelectedDate, setSelection);
     } else {
       context.setActiveRangePart(null);
-      handleDateSelectRange(date, context.activeRangePart, startOrSelectedDate, context.endDate, setSelection);
+      handleDateSelectRange(date, context.activeRangePart, startOrSelectedDate, context.endDate, setSelection, disabledDates);
     }
   };
   const handleClearDate = () => {
@@ -69,6 +72,7 @@ export const DatePickerCalendar = ({
   const focusTarget = focusedDate ?? startOrSelectedDate ?? endDate ?? new Date();
   const addMonths = (date, n) => new Date(date.getFullYear(), date.getMonth() + n, 1);
   const secondMonthDate = addMonths(visibleDate, 1);
+  const isTwoMonthsVisible = useMedia(`(min-width: ${breakpoints.xs})`);
   return /*#__PURE__*/_jsxs(Calendar, {
     children: [/*#__PURE__*/_jsxs(Box, {
       p: 24,
@@ -83,6 +87,7 @@ export const DatePickerCalendar = ({
           disabledDates: disabledDates,
           endDate: endDate,
           focusedDate: focusTarget,
+          hasAdjacentMonthRight: isTwoMonthsVisible,
           labelledById: headingId,
           locale: locale,
           selectedDate: startOrSelectedDate,
@@ -105,6 +110,7 @@ export const DatePickerCalendar = ({
             disabledDates: disabledDates,
             endDate: endDate,
             focusedDate: focusTarget,
+            hasAdjacentMonthLeft: isTwoMonthsVisible,
             labelledById: headingId,
             locale: locale,
             selectedDate: startOrSelectedDate,
@@ -118,9 +124,11 @@ export const DatePickerCalendar = ({
         })]
       })]
     }), /*#__PURE__*/_jsx(CalendarFooter, {
+      clearText: translations.clearText,
+      disabled: startOrSelectedDate === null && endDate === null,
+      locale: locale,
+      showClearButton: isRange,
       onClearDate: handleClearDate,
-      onCurrentMonthYearChange: setVisibleDate,
-      onSelectedDateChange: date => date === null ? handleClearDate() : handleTodayClick(),
       onTodayClick: handleTodayClick
     })]
   });

package/dist/DatePicker/DatePickerContext.d.ts

@@ -8,4 +8,4 @@ export declare const DatePickerProvider: import("react").Provider<DatePickerCont
  * Must be used inside a DatePicker. For composed layouts, use this to get
  * openCalendar, closeCalendar, isCalendarOpen, inputRef, calendarDialogId, etc.
  */
-export declare function useDatePicker(): DatePickerContextValueType;
+export declare const useDatePicker: () => DatePickerContextValueType;

package/dist/DatePicker/DatePickerContext.js

@@ -9,10 +9,10 @@ export const DatePickerProvider = DatePickerContext.Provider;
  * Must be used inside a DatePicker. For composed layouts, use this to get
  * openCalendar, closeCalendar, isCalendarOpen, inputRef, calendarDialogId, etc.
  */
-export function useDatePicker() {
+export const useDatePicker = () => {
   const value = useContext(DatePickerContext);
   if (value == null) {
     throw new Error('useDatePickerContext must be used within a DatePicker.');
   }
   return value;
-}
+};

package/dist/DatePicker/DatePickerInput.js

@@ -1,7 +1,8 @@
-import { CalendarIcon } from '@codecademy/gamut-icons';
+import { MiniCalendarIcon } from '@codecademy/gamut-icons';
 import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+import { FormGroup } from '../Form/elements/FormGroup';
 import { Input } from '../Form/inputs/Input';
-import { formatDateForInput, parseDateFromInput } from './Calendar/utils/format';
+import { formatDateForInput, getDateFormatPattern, parseDateFromInput } from './Calendar/utils/format';
 import { useDatePicker } from './DatePickerContext';
 
 /**
@@ -43,7 +44,8 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
     openCalendar,
     locale,
     isCalendarOpen,
-    calendarDialogId
+    calendarDialogId,
+    translations
   } = context;
   const isRange = mode === 'range';
   const inputID = useId();
@@ -97,30 +99,39 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
   const handleOpenCalendar = () => {
     openCalendar();
   };
-  const defaultLabel = isRange && rangePart === 'end' ? 'End date' : isRange ? 'Start date' : 'Date';
-  return /*#__PURE__*/_jsx(Input, {
-    ...rest,
-    "aria-autocomplete": "none",
-    "aria-controls": calendarDialogId,
-    "aria-expanded": isCalendarOpen,
-    "aria-haspopup": "dialog",
-    icon: CalendarIcon // add mini calendar icon and update
+  const defaultLabel = !isRange ? translations.dateLabel : rangePart === 'end' ? translations.endDateLabel : translations.startDateLabel;
+  return /*#__PURE__*/_jsx(FormGroup, {
+    htmlFor: inputId,
+    isSoloField: true // should probaly be based on a prop
     ,
-    id: inputId,
-    label: label ?? defaultLabel // this isnt actually adding a label
-    ,
-    placeholder: placeholder ?? 'MM/DD/YYYY',
-    ref: ref,
-    role: "combobox",
-    type: "text",
-    value: inputValue,
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onClick: handleOpenCalendar,
-    onFocus: () => {
-      isInputFocusedRef.current = true;
-      if (isRange && rangePart) context.setActiveRangePart(rangePart);
-    },
-    onKeyDown: handleKeyDown
+    label: label ?? defaultLabel,
+    mb: 0,
+    pb: 0,
+    spacing: "tight",
+    width: "170px",
+    children: /*#__PURE__*/_jsx(Input, {
+      ...rest,
+      "aria-autocomplete": "none",
+      "aria-controls": calendarDialogId,
+      "aria-expanded": isCalendarOpen,
+      "aria-haspopup": "dialog",
+      icon: () => /*#__PURE__*/_jsx(MiniCalendarIcon, {
+        size: 16
+      }),
+      id: inputId,
+      placeholder: placeholder ?? getDateFormatPattern(locale),
+      ref: ref,
+      role: "combobox",
+      type: "text",
+      value: inputValue,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onClick: handleOpenCalendar,
+      onFocus: () => {
+        isInputFocusedRef.current = true;
+        if (isRange && rangePart) context.setActiveRangePart(rangePart);
+      },
+      onKeyDown: handleKeyDown
+    })
   });
 });

package/dist/DatePicker/translations.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerTranslations } from './types';
+/** Default UI strings; pass translations prop to override. */
+export declare const DEFAULT_DATE_PICKER_TRANSLATIONS: Required<DatePickerTranslations>;

package/dist/DatePicker/translations.js

@@ -0,0 +1,8 @@
+/** Default UI strings; pass translations prop to override. */
+export const DEFAULT_DATE_PICKER_TRANSLATIONS = {
+  clearText: 'Clear',
+  dateLabel: 'Date',
+  startDateLabel: 'Start date',
+  endDateLabel: 'End date',
+  calendarDialogAriaLabel: 'Choose date'
+};

package/dist/DatePicker/types.d.ts

@@ -17,6 +17,8 @@ export interface DatePickerBaseProps {
     children?: React.ReactNode;
     /** Placeholder for the input. */
     placeholder?: string;
+    /** Override UI strings (e.g. clear button). Merged with defaults. */
+    translations?: DatePickerTranslations;
 }
 /** Props for the DatePicker (single-date mode). */
 export interface DatePickerSingleProps extends DatePickerBaseProps {
@@ -48,14 +50,29 @@ export interface DatePickerRangeProps extends DatePickerBaseProps {
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 /** Which range input is active (focused); null = calendar drives both (selection mode). */
 export type ActiveRangePart = 'start' | 'end' | null;
+/** Optional translations for DatePicker UI strings. Pass to override defaults. */
+export interface DatePickerTranslations {
+    /** Label for the clear date button (default: "Clear"). */
+    clearText?: string;
+    /** Default label for the date input in single mode (default: "Date"). */
+    dateLabel?: string;
+    /** Default label for the start date input in range mode (default: "Start date"). */
+    startDateLabel?: string;
+    /** Default label for the end date input in range mode (default: "End date"). */
+    endDateLabel?: string;
+    /** aria-label for the calendar dialog (default: "Choose date"). */
+    calendarDialogAriaLabel?: string;
+}
 /** Shared state provided by DatePicker via context. */
 export interface DatePickerBaseContextValue {
     isCalendarOpen: boolean;
     openCalendar: () => void;
     closeCalendar: () => void;
-    locale: string;
+    locale?: string;
     disabledDates: Date[];
     calendarDialogId: string;
+    /** UI string overrides (e.g. clear button). */
+    translations: Required<DatePickerTranslations>;
     /** Start date (range) or selected date (single). */
     startOrSelectedDate: Date | null;
     /** Set selection. Single: (date). Range: (start, end). */

package/dist/DatePicker/utils.d.ts

@@ -1,3 +1,5 @@
 import { ActiveRangePart } from './types';
+/** True if any disabled date falls within [start, end] (inclusive, by calendar day). */
+export declare const rangeContainsDisabled: (start: Date, end: Date, disabledDates: Date[]) => boolean;
 export declare const handleDateSelectSingle: (date: Date, selectedDate: Date | null, setSelection: (date: Date | null) => void) => void;
-export declare const handleDateSelectRange: (date: Date, activeRangePart: ActiveRangePart, startDate: Date | null, endDate: Date | null, setSelection: (startDate: Date | null, endDate?: Date | null) => void) => void;
+export declare const handleDateSelectRange: (date: Date, activeRangePart: ActiveRangePart, startDate: Date | null, endDate: Date | null, setSelection: (startDate: Date | null, endDate?: Date | null) => void, disabledDates: Date[]) => void;