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

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

@@ -1,11 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 /**
  * Outer wrapper for the calendar (header + body + footer).
  * Used by DatePickerCalendar to group the calendar content.
+ * Renders a CheckerDense pattern shadow at offset left 8, top 8.
  */
-export declare const Calendar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Calendar: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/DatePicker/Calendar/Calendar.js

@@ -1,15 +1,28 @@
-import _styled from "@emotion/styled/base";
-import { css } from '@codecademy/gamut-styles';
+import { CheckerDense } from '@codecademy/gamut-patterns';
+import * as React from 'react';
+import { Box } from '../../Box';
+
 /**
  * Outer wrapper for the calendar (header + body + footer).
  * Used by DatePickerCalendar to group the calendar content.
+ * Renders a CheckerDense pattern shadow at offset left 8, top 8.
  */
-export const Calendar = /*#__PURE__*/_styled("div", {
-  target: "eq0g1i20",
-  label: "Calendar"
-})(css({
-  backgroundColor: 'background',
-  borderRadius: 'lg',
-  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.12)',
-  width: 'max-content'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0NhbGVuZGFyL0NhbGVuZGFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPd0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0RhdGVQaWNrZXIvQ2FsZW5kYXIvQ2FsZW5kYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBPdXRlciB3cmFwcGVyIGZvciB0aGUgY2FsZW5kYXIgKGhlYWRlciArIGJvZHkgKyBmb290ZXIpLlxuICogVXNlZCBieSBEYXRlUGlja2VyQ2FsZW5kYXIgdG8gZ3JvdXAgdGhlIGNhbGVuZGFyIGNvbnRlbnQuXG4gKi9cbmV4cG9ydCBjb25zdCBDYWxlbmRhciA9IHN0eWxlZC5kaXYoXG4gIGNzcyh7XG4gICAgYmFja2dyb3VuZENvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnbGcnLFxuICAgIGJveFNoYWRvdzogJzAgNHB4IDE2cHggcmdiYSgwLCAwLCAwLCAwLjEyKScsXG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gIH0pXG4pO1xuIl19 */");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Calendar = ({
+  children
+}) => /*#__PURE__*/_jsxs(Box, {
+  position: "relative",
+  width: "max-content",
+  children: [/*#__PURE__*/_jsx(CheckerDense, {
+    left: 8,
+    position: "absolute",
+    top: 8
+  }), /*#__PURE__*/_jsx(Box, {
+    bg: "background",
+    border: 1,
+    borderRadius: "sm",
+    position: "relative",
+    zIndex: 1,
+    children: children
+  })]
+});

package/dist/DatePicker/Calendar/CalendarFooter.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { FlexBox } from '../../Box';
 import { TextButton } from '../../Button';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getRelativeTodayLabel } from './utils/format';
+
 // function formatQuickActionLabel(action: QuickAction): string {
 //   const { num, timePeriod } = action;
 //   const period =
@@ -22,23 +23,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //       : 'years';
 //   return `${num} ${period}`;
 // }
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CalendarFooter = ({
   onClearDate,
   onTodayClick,
-  onSelectedDateChange,
-  onCurrentMonthYearChange
+  locale,
+  clearText,
+  disabled,
+  showClearButton
 }) => {
-  const handleClearDate = () => {
-    onSelectedDateChange(null);
-    onClearDate?.();
-  };
-  const handleTodayClick = () => {
-    const today = new Date();
-    onSelectedDateChange(today);
-    onCurrentMonthYearChange(new Date(today.getFullYear(), today.getMonth(), 1));
-    onTodayClick?.();
-  };
   // const actions = quickActions.slice(0, 3);
 
   return /*#__PURE__*/_jsxs(FlexBox, {
@@ -46,14 +39,15 @@ export const CalendarFooter = ({
     borderTop: 1,
     justifyContent: "space-between",
     p: 12,
-    children: [/*#__PURE__*/_jsx(TextButton, {
-      onClick: handleClearDate,
-      children: "Clear"
+    children: [showClearButton && /*#__PURE__*/_jsx(TextButton, {
+      disabled: disabled,
+      onClick: () => onClearDate?.(),
+      children: clearText
     }), /*#__PURE__*/_jsx(FlexBox, {
       gap: 32,
       children: /*#__PURE__*/_jsx(TextButton, {
-        onClick: handleTodayClick,
-        children: "Today"
+        onClick: () => onTodayClick?.(),
+        children: getRelativeTodayLabel(locale)
       })
     })]
   });

package/dist/DatePicker/Calendar/CalendarHeader.js

@@ -3,21 +3,25 @@ import * as React from 'react';
 import { FlexBox } from '../../Box';
 import { IconButton } from '../../Button';
 import { Text } from '../../Typography';
-import { formatMonthYear } from './utils/format';
+import { formatMonthYear, getRelativeMonthLabels } from './utils/format';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CalendarHeader = ({
   currentMonthYear,
   onCurrentMonthYearChange,
   secondMonthYear,
-  onPreviousMonthClick,
+  onLastMonthClick,
   onNextMonthClick,
   locale,
   headingId
 }) => {
-  const handlePreviousMonth = () => {
-    const previousMonth = new Date(currentMonthYear.getFullYear(), currentMonthYear.getMonth() - 1, 1);
-    onCurrentMonthYearChange?.(previousMonth);
-    onPreviousMonthClick?.();
+  const {
+    nextMonth,
+    lastMonth
+  } = getRelativeMonthLabels(locale);
+  const handleLastMonth = () => {
+    const lastMonth = new Date(currentMonthYear.getFullYear(), currentMonthYear.getMonth() - 1, 1);
+    onCurrentMonthYearChange?.(lastMonth);
+    onLastMonthClick?.();
   };
   const handleNextMonth = () => {
     const nextMonth = new Date(currentMonthYear.getFullYear(), currentMonthYear.getMonth() + 1, 1);
@@ -29,11 +33,11 @@ export const CalendarHeader = ({
     justifyContent: "space-between",
     pb: 16,
     children: [/*#__PURE__*/_jsx(IconButton, {
-      "aria-label": "Previous month",
+      "aria-label": lastMonth,
       icon: MiniChevronLeftIcon,
       size: "small",
-      tip: "Previous month",
-      onClick: handlePreviousMonth
+      tip: lastMonth,
+      onClick: handleLastMonth
     }), /*#__PURE__*/_jsx(Text, {
       "aria-live": "polite",
       as: "h2",
@@ -53,10 +57,10 @@ export const CalendarHeader = ({
       id: headingId,
       children: formatMonthYear(secondMonthYear, locale)
     }), /*#__PURE__*/_jsx(IconButton, {
-      "aria-label": "Next month",
+      "aria-label": nextMonth,
       icon: MiniChevronRightIcon,
       size: "small",
-      tip: "Next month",
+      tip: nextMonth,
       onClick: handleNextMonth
     })]
   });

package/dist/DatePicker/Calendar/types.d.ts

@@ -9,7 +9,7 @@ export interface CalendarHeaderProps {
     /** Currently displayed second month and year (used for heading and prev/next range) */
     secondMonthYear?: Date;
     /** Called after navigating to previous month; use for click tracking. */
-    onPreviousMonthClick?: () => void;
+    onLastMonthClick?: () => void;
     /** Called after navigating to next month; use for click tracking. */
     onNextMonthClick?: () => void;
     /** Locale for month/year formatting (e.g. 'en-US') */
@@ -49,11 +49,12 @@ export interface QuickAction {
     onClick: () => void;
 }
 export interface CalendarFooterProps {
+    disabled?: boolean;
+    showClearButton?: boolean;
+    locale?: string;
+    clearText: string;
     onClearDate?: () => void;
     onTodayClick?: () => void;
-    /** Called when the user navigates to a different month. Pass the new date (e.g. setVisibleDate) so the calendar updates. */
-    onSelectedDateChange: (newDate: Date | null) => void;
-    onCurrentMonthYearChange: (newDate: Date) => void;
     /** Max 3 quick actions (e.g. "7 days", "1 month") */
     quickActions?: QuickAction[];
 }

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

@@ -1,6 +1,10 @@
 /**
  * Date formatting for the calendar using Intl.DateTimeFormat.
  */
+/**
+ * Capitalize the first character of a string; rest unchanged (e.g. "next month" → "Next month").
+ */
+export declare const capitalizeFirst: (str: string) => string;
 /**
  * Format month and year for the calendar header (e.g. "February 2026").
  */
@@ -15,6 +19,24 @@ export declare const getWeekdayLabels: (locale?: string, weekStartsOn?: 0 | 1) =
  * Same order as getWeekdayLabels.
  */
 export declare const getWeekdayFullNames: (locale?: string, weekStartsOn?: 0 | 1) => string[];
+/**
+ * Get localized "next month" and "previous month" labels for calendar nav.
+ * Uses Intl.RelativeTimeFormat with numeric: "auto" (e.g. "next month", "last month").
+ */
+export declare const getRelativeMonthLabels: (locale?: string) => {
+    nextMonth: string;
+    lastMonth: string;
+};
+/**
+ * Get localized "today" label (e.g. "today").
+ */
+export declare const getRelativeTodayLabel: (locale?: string) => string;
+/**
+ * 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 declare const getDateFormatPattern: (locale?: string) => string;
 /**
  * Format a date for display in the date picker input (e.g. "2/15/2026").
  */

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

@@ -2,11 +2,16 @@
  * 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 ?? 'en-US', {
+  return new Intl.DateTimeFormat(locale, {
     month: 'long',
     year: 'numeric'
   }).format(date);
@@ -17,7 +22,7 @@ export const formatMonthYear = (date, locale) => {
  * Order depends on weekStartsOn: 0 = Sunday first, 1 = Monday first.
  */
 export const getWeekdayLabels = (locale, weekStartsOn = 0) => {
-  const formatter = new Intl.DateTimeFormat(locale ?? 'en-US', {
+  const formatter = new Intl.DateTimeFormat(locale, {
     weekday: 'short'
   });
   // Jan 7, 2024 is a Sunday; add 0..6 days to get Sun..Sat
@@ -40,7 +45,7 @@ export const getWeekdayLabels = (locale, weekStartsOn = 0) => {
  * Same order as getWeekdayLabels.
  */
 export const getWeekdayFullNames = (locale, weekStartsOn = 0) => {
-  const formatter = new Intl.DateTimeFormat(locale ?? 'en-US', {
+  const formatter = new Intl.DateTimeFormat(locale, {
     weekday: 'long'
   });
   const sunday = new Date(2024, 0, 7);
@@ -57,11 +62,60 @@ export const getWeekdayFullNames = (locale, weekStartsOn = 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 ?? 'en-US', {
+  return new Intl.DateTimeFormat(locale, {
     month: 'numeric',
     day: 'numeric',
     year: 'numeric'

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 { useCallback, useId, useMemo, useRef, useState } from 'react';
+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';
@@ -16,17 +18,30 @@ 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);
   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);
@@ -44,6 +59,10 @@ export const DatePicker = props => {
     }
   }, [props]);
   const contextValue = useMemo(() => {
+    const translations = {
+      ...DEFAULT_DATE_PICKER_TRANSLATIONS,
+      ...translationsProp
+    };
     const base = {
       startOrSelectedDate,
       setSelection,
@@ -52,7 +71,8 @@ export const DatePicker = props => {
       closeCalendar,
       locale,
       disabledDates,
-      calendarDialogId
+      calendarDialogId,
+      translations
     };
     return mode === 'range' ? {
       ...base,
@@ -64,7 +84,7 @@ export const DatePicker = props => {
       ...base,
       mode: 'single'
     };
-  }, [mode, startOrSelectedDate, endDate, setSelection, activeRangePart, setActiveRangePart, isCalendarOpen, openCalendar, closeCalendar, locale, disabledDates, calendarDialogId]);
+  }, [mode, startOrSelectedDate, endDate, setSelection, activeRangePart, setActiveRangePart, isCalendarOpen, openCalendar, closeCalendar, locale, disabledDates, calendarDialogId, translationsProp]);
 
   // what is this doing
   // useEffect(() => {
@@ -84,7 +104,9 @@ export const DatePicker = props => {
           placeholder: placeholder,
           rangePart: "start",
           ref: inputRef
-        }), /*#__PURE__*/_jsx(DatePickerInput, {
+        }), /*#__PURE__*/_jsx(MiniArrowRightIcon, {
+          alignSelf: "center"
+        }), ' ', /*#__PURE__*/_jsx(DatePickerInput, {
           label: props.endLabel,
           placeholder: placeholder,
           rangePart: "end"
@@ -96,22 +118,20 @@ export const DatePicker = props => {
         ref: inputRef
       })
     }), /*#__PURE__*/_jsx(PopoverContainer, {
-      alignment: "bottom-left",
-      allowPageInteraction: true
-      // look into if we can kill this and mess with where we are focusing instead
-      ,
+      alignment: "bottom-right",
+      allowPageInteraction: true,
       focusOnProps: {
         autoFocus: false,
         focusLock: false
       },
-      invertAxis: "x",
       isOpen: isCalendarOpen,
-      offset: 10,
+      offset: popoverOffset,
       targetRef: inputRef,
-      onRequestClose: closeCalendar // without this we cant type in the input but there has to be a better way
-      ,
+      x: popoverX,
+      y: 0,
+      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

@@ -27,7 +27,8 @@ export const DatePickerCalendar = ({
     disabledDates,
     locale,
     closeCalendar,
-    isCalendarOpen
+    isCalendarOpen,
+    translations
   } = context;
   const isRange = mode === 'range';
   const endDate = isRange ? context.endDate : undefined;
@@ -118,9 +119,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/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,38 @@ 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,
+    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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "68.1.3-alpha.bcf87d.0",
+  "version": "68.1.3-alpha.e93e89.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.57.0",
@@ -59,5 +59,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "8ba3e2e2d76f322da2031e91d94fe9989651db9d"
+  "gitHead": "597c47b90e8bb7ebae7c00c214c0ef0887bcb8a5"
 }