@codecademy/gamut 68.2.3-alpha.df0cb3.0 → 68.2.3-alpha.e0ecfc.0

package/dist/DatePicker/Calendar/CalendarBody.js

@@ -104,9 +104,13 @@ export const CalendarBody = ({
       children: weeks.map((week, rowIndex) => /*#__PURE__*/_jsx("tr", {
         children: week.map((date, colIndex) => {
           if (date === null) {
-            return /*#__PURE__*/_jsx("td", {
-              role: "gridcell"
-            }, `empty-${rowIndex}-${colIndex}`);
+            return (
+              /*#__PURE__*/
+              // eslint-disable-next-line jsx-a11y/control-has-associated-label
+              _jsx("td", {
+                role: "gridcell"
+              }, `empty-${rowIndex}-${colIndex}`)
+            );
           }
           const selected = isSameDay(date, selectedDate) || isSameDay(date, endDate);
           const range = !!selectedDate && !!endDate;

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

@@ -25,20 +25,4 @@ export declare const getRelativeMonthLabels: (locale: Intl.Locale) => {
  * Get localized "today" label (e.g. "today").
  */
 export declare const getRelativeTodayLabel: (locale: Intl.Locale) => 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: Intl.Locale) => string;
-/**
- * Format a date for display in the date picker input (e.g. "2/15/2026").
- */
-export declare const formatDateForInput: (date: Date, locale: Intl.Locale) => string;
-/**
- * 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.
- */
-export declare const parseDateFromInput: (value: string, locale: Intl.Locale) => Date | null;
 export declare const formatDateForAriaLabel: (date: Date, locale: Intl.Locale) => string;

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

@@ -1,5 +1,4 @@
 import { stringifyLocale } from '../../utils/locale';
-import { isValidDate } from './validation';
 
 /**
  * Capitalize the first character of a string using the locale; rest unchanged (e.g. "next month" → "Next month").
@@ -64,61 +63,6 @@ export const getRelativeTodayLabel = locale => {
   });
   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(stringifyLocale(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(stringifyLocale(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 (!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;
-};
 export const formatDateForAriaLabel = (date, locale) => {
   return new Intl.DateTimeFormat(stringifyLocale(locale), {
     month: 'long',

package/dist/DatePicker/DatePicker.js

@@ -54,7 +54,9 @@ export const DatePicker = props => {
     setIsCalendarOpen(false);
     setActiveRangePart(null);
     setGridFocusRequested(false);
-    inputRef.current?.focus();
+    const shell = inputRef.current;
+    const toFocus = shell?.querySelector('[role="spinbutton"]') ?? shell;
+    toFocus?.focus();
   }, []);
   const startOrSelectedDate = isRangeProps(props) ? props.startDate : props.selectedDate;
   const endDate = isRangeProps(props) ? props.endDate : null;
@@ -100,13 +102,13 @@ export const DatePicker = props => {
   const content = children !== undefined ? children : /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(FlexBox, {
       gap: inputSize === 'small' ? 4 : 8,
+      ref: inputRef,
       width: "fit-content",
       children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(DatePickerInput, {
           label: props.startLabel,
           placeholder: placeholder,
           rangePart: "start",
-          ref: inputRef,
           size: inputSize
         }), /*#__PURE__*/_jsx(Box, {
           alignSelf: "center",
@@ -117,12 +119,12 @@ export const DatePicker = props => {
           placeholder: placeholder,
           rangePart: "end",
           size: inputSize
-          // does this need a ref?
         })]
       }) : /*#__PURE__*/_jsx(DatePickerInput, {
         label: props.label,
-        placeholder: placeholder,
-        ref: inputRef,
+        placeholder: placeholder
+        // ref={inputRef}
+        ,
         size: inputSize
       })
     }), /*#__PURE__*/_jsx(PopoverContainer, {

package/dist/DatePicker/DatePickerInput/Segment/DatePickerInputSegment.d.ts

@@ -0,0 +1,20 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import type { DatePartKind } from '../utils';
+import { SegmentValues } from './segmentUtils';
+export type DatePickerInputSegmentProps = {
+    field: DatePartKind;
+    segments: SegmentValues;
+    disabled: boolean;
+    error: boolean;
+    handleOnClick: () => void;
+    handleOnFocus: () => void;
+    focusOrOpenCalendarGrid: () => void;
+    setSegments: Dispatch<SetStateAction<SegmentValues>>;
+    prevField: DatePartKind | null;
+    nextField: DatePartKind | null;
+    applySegments: (next: SegmentValues) => void;
+};
+/**
+ * Editable date unit (`role="spinbutton"`). Focus with Tab; type digits or use Arrow up/down.
+ */
+export declare const DatePickerInputSegment: React.FC<DatePickerInputSegmentProps>;

package/dist/DatePicker/DatePickerInput/Segment/DatePickerInputSegment.js

@@ -0,0 +1,138 @@
+import { useCallback, useId, useRef } from 'react';
+import { Segment } from './elements';
+import { appendSegmentDigit, getSegmentSpinBounds, parseSegmentNumericString, segmentMaxLength, segmentPlaceholder, spinSegment } from './segmentUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Editable date unit (`role="spinbutton"`). Focus with Tab; type digits or use Arrow up/down.
+ */
+export const DatePickerInputSegment = ({
+  field,
+  segments,
+  disabled,
+  error,
+  handleOnClick,
+  handleOnFocus,
+  focusOrOpenCalendarGrid,
+  setSegments,
+  prevField,
+  nextField,
+  applySegments
+}) => {
+  const {
+    min,
+    max
+  } = getSegmentSpinBounds(field, segments);
+  const n = parseSegmentNumericString(segments[field]);
+  const ariaValue = segments[field].length > 0 && n != null ? n : undefined;
+  const display = segments[field].length > 0 ? segments[field] : segmentPlaceholder(field);
+  const inputID = useId();
+  const inputId = `datepicker-input-${inputID.replace(/:/g, '')}`;
+  const segmentRefs = useRef({});
+  const focusField = useCallback(field => {
+    segmentRefs.current[field]?.focus();
+  }, []);
+  const handleSegmentKeyDown = useCallback(field => e => {
+    if (disabled) return;
+    if (e.altKey && (e.key === 'ArrowDown' || e.key === 'Down')) {
+      e.preventDefault();
+      focusOrOpenCalendarGrid();
+      return;
+    }
+    if (e.key === 'ArrowLeft') {
+      if (prevField) {
+        e.preventDefault();
+        focusField(prevField);
+      }
+      return;
+    }
+    if (e.key === 'ArrowRight') {
+      if (nextField) {
+        e.preventDefault();
+        focusField(nextField);
+      }
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSegments(prev => {
+        const next = {
+          ...prev,
+          [field]: spinSegment(field, prev, 1)
+        };
+        applySegments(next);
+        return next;
+      });
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSegments(prev => {
+        const next = {
+          ...prev,
+          [field]: spinSegment(field, prev, -1)
+        };
+        applySegments(next);
+        return next;
+      });
+      return;
+    }
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+      e.preventDefault();
+      setSegments(prev => {
+        if (prev[field].length > 0) {
+          const next = {
+            ...prev,
+            [field]: prev[field].slice(0, -1)
+          };
+          applySegments(next);
+          return next;
+        }
+        if (prevField) {
+          queueMicrotask(() => focusField(prevField));
+        }
+        return prev;
+      });
+      return;
+    }
+
+    // if the key is a single digit and is a number, append the digit to the segment
+    if (e.key.length === 1 && /^\d$/.test(e.key)) {
+      e.preventDefault();
+      setSegments(prev => {
+        const next = {
+          ...prev,
+          [field]: appendSegmentDigit(field, prev[field], e.key)
+        };
+        applySegments(next);
+        const maxLen = segmentMaxLength(field);
+        if (next[field].length >= maxLen && nextField) {
+          queueMicrotask(() => focusField(nextField));
+        }
+        return next;
+      });
+    }
+  }, [disabled, focusOrOpenCalendarGrid, prevField, focusField, nextField, setSegments, applySegments]);
+  return /*#__PURE__*/_jsx(Segment, {
+    "aria-disabled": disabled,
+    "aria-invalid": Boolean(error),
+    "aria-label": field,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": ariaValue,
+    "aria-valuetext": display,
+    contentEditable: false,
+    "data-segment": field,
+    default: segments[field].length === 0,
+    field: field,
+    id: `${inputId}-${field}`,
+    ref: el => {
+      segmentRefs.current[field] = el;
+    },
+    role: "spinbutton",
+    tabIndex: disabled ? -1 : 0,
+    onClick: handleOnClick,
+    onFocus: handleOnFocus,
+    onKeyDown: handleSegmentKeyDown(field),
+    children: display
+  });
+};

package/dist/DatePicker/DatePickerInput/Segment/elements.d.ts

@@ -0,0 +1,16 @@
+import { DatePartKind } from '../utils';
+export declare const Segment: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & Partial<Record<"default", boolean>> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    field: DatePartKind;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/** Locale separator (`/`, `.`, etc.) between segments. */
+export declare const SegmentLiteral: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/DatePicker/DatePickerInput/Segment/elements.js

@@ -0,0 +1,34 @@
+import _styled from "@emotion/styled/base";
+import { css, states } from '@codecademy/gamut-styles';
+const segmentStyles = states({
+  default: {
+    color: 'text-secondary'
+  }
+});
+export const Segment = /*#__PURE__*/_styled("span", {
+  target: "e157t5v81",
+  label: "Segment"
+})(({
+  field
+}) => css({
+  display: 'inline-block',
+  textAlign: 'center',
+  minWidth: field === 'year' ? '4ch' : '2ch',
+  padding: 0,
+  margin: 0,
+  color: 'text',
+  cursor: 'text',
+  '&:focus': {
+    outline: '1px solid blue'
+  }
+}), segmentStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJJbnB1dC9TZWdtZW50L2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQnVCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJJbnB1dC9TZWdtZW50L2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgc3RhdGVzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IERhdGVQYXJ0S2luZCB9IGZyb20gJy4uL3V0aWxzJztcblxuY29uc3Qgc2VnbWVudFN0eWxlcyA9IHN0YXRlcyh7XG4gIGRlZmF1bHQ6IHtcbiAgICBjb2xvcjogJ3RleHQtc2Vjb25kYXJ5JyxcbiAgfSxcbn0pO1xuXG50eXBlIFNlZ21lbnRTdHlsZVByb3BzID0gU3R5bGVQcm9wczx0eXBlb2Ygc2VnbWVudFN0eWxlcz4gJiB7XG4gIGZpZWxkOiBEYXRlUGFydEtpbmQ7XG59O1xuXG5leHBvcnQgY29uc3QgU2VnbWVudCA9IHN0eWxlZC5zcGFuPFNlZ21lbnRTdHlsZVByb3BzPihcbiAgKHsgZmllbGQgfSkgPT5cbiAgICBjc3Moe1xuICAgICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICAgICAgbWluV2lkdGg6IGZpZWxkID09PSAneWVhcicgPyAnNGNoJyA6ICcyY2gnLFxuICAgICAgcGFkZGluZzogMCxcbiAgICAgIG1hcmdpbjogMCxcbiAgICAgIGNvbG9yOiAndGV4dCcsXG4gICAgICBjdXJzb3I6ICd0ZXh0JyxcbiAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICBvdXRsaW5lOiAnMXB4IHNvbGlkIGJsdWUnLFxuICAgICAgfSxcbiAgICB9KSxcbiAgc2VnbWVudFN0eWxlc1xuKTtcblxuLyoqIExvY2FsZSBzZXBhcmF0b3IgKGAvYCwgYC5gLCBldGMuKSBiZXR3ZWVuIHNlZ21lbnRzLiAqL1xuZXhwb3J0IGNvbnN0IFNlZ21lbnRMaXRlcmFsID0gc3R5bGVkLnNwYW4oXG4gIGNzcyh7XG4gICAgY29sb3I6ICd0ZXh0LXNlY29uZGFyeScsXG4gICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIHB4OiA0LFxuICB9KVxuKTtcbiJdfQ== */");
+
+/** Locale separator (`/`, `.`, etc.) between segments. */
+export const SegmentLiteral = /*#__PURE__*/_styled("span", {
+  target: "e157t5v80",
+  label: "SegmentLiteral"
+})(css({
+  color: 'text-secondary',
+  userSelect: 'none',
+  px: 4
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJJbnB1dC9TZWdtZW50L2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQzhCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJJbnB1dC9TZWdtZW50L2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgc3RhdGVzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IERhdGVQYXJ0S2luZCB9IGZyb20gJy4uL3V0aWxzJztcblxuY29uc3Qgc2VnbWVudFN0eWxlcyA9IHN0YXRlcyh7XG4gIGRlZmF1bHQ6IHtcbiAgICBjb2xvcjogJ3RleHQtc2Vjb25kYXJ5JyxcbiAgfSxcbn0pO1xuXG50eXBlIFNlZ21lbnRTdHlsZVByb3BzID0gU3R5bGVQcm9wczx0eXBlb2Ygc2VnbWVudFN0eWxlcz4gJiB7XG4gIGZpZWxkOiBEYXRlUGFydEtpbmQ7XG59O1xuXG5leHBvcnQgY29uc3QgU2VnbWVudCA9IHN0eWxlZC5zcGFuPFNlZ21lbnRTdHlsZVByb3BzPihcbiAgKHsgZmllbGQgfSkgPT5cbiAgICBjc3Moe1xuICAgICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICAgICAgbWluV2lkdGg6IGZpZWxkID09PSAneWVhcicgPyAnNGNoJyA6ICcyY2gnLFxuICAgICAgcGFkZGluZzogMCxcbiAgICAgIG1hcmdpbjogMCxcbiAgICAgIGNvbG9yOiAndGV4dCcsXG4gICAgICBjdXJzb3I6ICd0ZXh0JyxcbiAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICBvdXRsaW5lOiAnMXB4IHNvbGlkIGJsdWUnLFxuICAgICAgfSxcbiAgICB9KSxcbiAgc2VnbWVudFN0eWxlc1xuKTtcblxuLyoqIExvY2FsZSBzZXBhcmF0b3IgKGAvYCwgYC5gLCBldGMuKSBiZXR3ZWVuIHNlZ21lbnRzLiAqL1xuZXhwb3J0IGNvbnN0IFNlZ21lbnRMaXRlcmFsID0gc3R5bGVkLnNwYW4oXG4gIGNzcyh7XG4gICAgY29sb3I6ICd0ZXh0LXNlY29uZGFyeScsXG4gICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIHB4OiA0LFxuICB9KVxuKTtcbiJdfQ== */");

package/dist/DatePicker/DatePickerInput/Segment/index.d.ts

@@ -0,0 +1,4 @@
+export { Segment, SegmentLiteral } from './elements';
+export { DatePickerInputSegment } from './DatePickerInputSegment';
+export type { DatePickerInputSegmentProps } from './DatePickerInputSegment';
+export * from './segmentUtils';

package/dist/DatePicker/DatePickerInput/Segment/index.js

@@ -0,0 +1,3 @@
+export { Segment, SegmentLiteral } from './elements';
+export { DatePickerInputSegment } from './DatePickerInputSegment';
+export * from './segmentUtils';

package/dist/DatePicker/DatePickerInput/Segment/segmentUtils.d.ts

@@ -0,0 +1,49 @@
+import type { DateFormatLayoutItem, DatePartKind } from '../utils';
+export type SegmentValues = {
+    month: string;
+    day: string;
+    year: string;
+};
+export declare const getDateSegmentsFromDate: (date: Date | null) => SegmentValues;
+/**
+ * Build a calendar date from segment strings. Requires a 4-digit year and non-empty month/day.
+ */
+export declare const parseSegmentsToDate: (segments: SegmentValues) => Date | null;
+/** Digits-only slices used when checking for a fully typed date (2 / 2 / 4). */
+export declare const getStrictSegmentDigits: (segments: SegmentValues) => {
+    month: string;
+    day: string;
+    year: string;
+};
+/** User finished all three fields (2-digit month, 2-digit day, 4-digit year). */
+export declare const isStrictlyCompleteDateEntry: (strictSegments: SegmentValues) => boolean;
+/**
+ * Normalize segment strings after blur (digits only).
+ * When the user has fully typed 2 / 2 / 4 digits, validates the calendar date without
+ * clamping invalid days/months — if invalid, returns empty segments (caller clears selection).
+ * Otherwise pads/clamps partial input as before.
+ */
+export declare const normalizeSegmentValues: (segments: SegmentValues) => SegmentValues;
+export declare const segmentPlaceholder: (field: DatePartKind) => "YYYY" | "MM" | "DD";
+/** Digit capacity per field (typing / spinbutton editing). */
+export declare const segmentMaxLength: (field: DatePartKind) => number;
+/**
+ * Min/max for spinbutton `aria-*` and ArrowUp/ArrowDown stepping (month/day/year).
+ * Day max uses month/year when available so February etc. behave correctly.
+ */
+export declare const getSegmentSpinBounds: (field: DatePartKind, segments: SegmentValues) => {
+    min: number;
+    max: number;
+};
+/** Numeric value of a segment string (digits only), or null if empty. */
+export declare const parseSegmentNumericString: (str: string) => number | null;
+/** Append one digit to a segment string (max length enforced). */
+export declare const appendSegmentDigit: (field: DatePartKind, prev: string, digit: string) => string;
+/**
+ * Step a segment up/down (ArrowUp / ArrowDown). Empty year steps from the current calendar year.
+ */
+export declare const spinSegment: (field: DatePartKind, segments: SegmentValues, delta: 1 | -1) => string;
+/** Build the visible date string from segment state in locale layout order (includes literal separators). */
+export declare const buildCombinedFromSegments: (segments: SegmentValues, layout: DateFormatLayoutItem[]) => string;
+/** Map a digit-only string into segment fields following locale field order (2 / 2 / 4). */
+export declare const digitsToSegments: (digits: string, fieldOrder: DatePartKind[]) => SegmentValues;

package/dist/DatePicker/DatePickerInput/Segment/segmentUtils.js

@@ -0,0 +1,202 @@
+export const getDateSegmentsFromDate = date => {
+  if (date == null) return {
+    month: '',
+    day: '',
+    year: ''
+  };
+  return {
+    month: String(date.getMonth() + 1).padStart(2, '0'),
+    day: String(date.getDate()).padStart(2, '0'),
+    year: String(date.getFullYear())
+  };
+};
+
+/**
+ * Build a calendar date from segment strings. Requires a 4-digit year and non-empty month/day.
+ */
+export const parseSegmentsToDate = segments => {
+  const {
+    month,
+    day,
+    year
+  } = segments;
+  if (year.length !== 4) return null;
+  if (month.length === 0 || day.length === 0) return null;
+  const m = parseInt(month, 10);
+  const d = parseInt(day, 10);
+  const y = parseInt(year, 10);
+  if (!Number.isFinite(m) || !Number.isFinite(d) || !Number.isFinite(y)) return null;
+  if (m < 1 || m > 12) return null;
+  const parsed = new Date(y, m - 1, d);
+  if (parsed.getFullYear() !== y || parsed.getMonth() !== m - 1 || parsed.getDate() !== d) {
+    return null;
+  }
+  return parsed;
+};
+
+/** Digits-only slices used when checking for a fully typed date (2 / 2 / 4). */
+export const getStrictSegmentDigits = segments => ({
+  month: segments.month.replace(/\D/g, '').slice(0, 2),
+  day: segments.day.replace(/\D/g, '').slice(0, 2),
+  year: segments.year.replace(/\D/g, '').slice(0, 4)
+});
+
+/** User finished all three fields (2-digit month, 2-digit day, 4-digit year). */
+export const isStrictlyCompleteDateEntry = strictSegments => {
+  const {
+    month,
+    day,
+    year
+  } = strictSegments;
+  return year.length === 4 && month.length === 2 && day.length === 2;
+};
+
+/**
+ * Normalize segment strings after blur (digits only).
+ * When the user has fully typed 2 / 2 / 4 digits, validates the calendar date without
+ * clamping invalid days/months — if invalid, returns empty segments (caller clears selection).
+ * Otherwise pads/clamps partial input as before.
+ */
+export const normalizeSegmentValues = segments => {
+  const strictSegments = getStrictSegmentDigits(segments);
+  if (isStrictlyCompleteDateEntry(strictSegments)) {
+    const parsed = parseSegmentsToDate(strictSegments);
+    if (parsed) {
+      return getDateSegmentsFromDate(parsed);
+    }
+    return {
+      month: '',
+      day: '',
+      year: ''
+    };
+  }
+  const year = segments.year.replace(/\D/g, '').slice(0, 4);
+  let month = segments.month.replace(/\D/g, '').slice(0, 2);
+  let day = segments.day.replace(/\D/g, '').slice(0, 2);
+  if (month.length > 0) {
+    const m = Math.min(12, Math.max(1, parseInt(month, 10)));
+    month = Number.isFinite(m) ? String(m).padStart(2, '0') : '';
+  }
+  if (year.length === 4 && month.length === 2 && day.length > 0) {
+    const y = parseInt(year, 10);
+    const m = parseInt(month, 10);
+    const dmax = new Date(y, m, 0).getDate();
+    const d = Math.min(dmax, Math.max(1, parseInt(day, 10)));
+    day = Number.isFinite(d) ? String(d).padStart(2, '0') : '';
+  } else if (day.length > 0) {
+    const d = Math.min(31, Math.max(1, parseInt(day, 10)));
+    day = Number.isFinite(d) ? String(d).padStart(2, '0') : '';
+  }
+  return {
+    month,
+    day,
+    year
+  };
+};
+export const segmentPlaceholder = field => field === 'year' ? 'YYYY' : field === 'month' ? 'MM' : 'DD';
+
+/** Digit capacity per field (typing / spinbutton editing). */
+export const segmentMaxLength = field => field === 'year' ? 4 : 2;
+
+/**
+ * Min/max for spinbutton `aria-*` and ArrowUp/ArrowDown stepping (month/day/year).
+ * Day max uses month/year when available so February etc. behave correctly.
+ */
+export const getSegmentSpinBounds = (field, segments) => {
+  switch (field) {
+    case 'month':
+      return {
+        min: 1,
+        max: 12
+      };
+    case 'day':
+      {
+        const y = segments.year.length === 4 ? parseInt(segments.year, 10) : 2024;
+        const m = segments.month.length >= 1 ? Math.min(12, Math.max(1, parseInt(segments.month, 10) || 1)) : 1;
+        const maxD = new Date(y, m, 0).getDate();
+        return {
+          min: 1,
+          max: Number.isFinite(maxD) ? maxD : 31
+        };
+      }
+    case 'year':
+      return {
+        min: 1,
+        max: 9999
+      };
+    default:
+      return {
+        min: 1,
+        max: 9999
+      };
+  }
+};
+
+/** Numeric value of a segment string (digits only), or null if empty. */
+export const parseSegmentNumericString = str => {
+  const digits = str.replace(/\D/g, '');
+  if (digits.length === 0) return null;
+  const numericValue = parseInt(digits, 10);
+  return Number.isFinite(numericValue) ? numericValue : null;
+};
+const parseSegmentDigits = (_field, str) => parseSegmentNumericString(str);
+const padSegmentNumber = (field, numericValue) => {
+  if (field === 'year') {
+    const clamped = Math.min(9999, Math.max(1, numericValue));
+    return String(clamped).padStart(4, '0');
+  }
+  const clamped = Math.min(99, Math.max(0, numericValue));
+  return String(clamped).padStart(2, '0').slice(-2);
+};
+
+/** Append one digit to a segment string (max length enforced). */
+export const appendSegmentDigit = (field, prev, digit) => {
+  // if the digit is not a single digit, return the previous value
+  if (!/^\d$/.test(digit)) return prev;
+  const maxLen = segmentMaxLength(field);
+  const digitsOnly = prev.replace(/\D/g, '');
+  // When the segment is already full, another digit would only be appended then
+  // truncated back to the same string — so typing could not change the value.
+  // Treat the new digit as the start of a replacement (same as clearing then typing).
+  if (digitsOnly.length >= maxLen) {
+    return digit.slice(0, maxLen);
+  }
+  return (digitsOnly + digit).slice(0, maxLen);
+};
+
+/**
+ * Step a segment up/down (ArrowUp / ArrowDown). Empty year steps from the current calendar year.
+ */
+export const spinSegment = (field, segments, delta) => {
+  const {
+    min,
+    max
+  } = getSegmentSpinBounds(field, segments);
+  let cur = parseSegmentDigits(field, segments[field]);
+  if (cur == null) {
+    cur = field === 'year' ? delta > 0 ? new Date().getFullYear() : max : delta > 0 ? min : max;
+  } else {
+    cur += delta;
+  }
+  cur = Math.min(max, Math.max(min, cur));
+  return padSegmentNumber(field, cur);
+};
+
+/** Build the visible date string from segment state in locale layout order (includes literal separators). */
+export const buildCombinedFromSegments = (segments, layout) => layout.map(item => item.kind === 'literal' ? item.text : segments[item.field]).join('');
+
+/** Map a digit-only string into segment fields following locale field order (2 / 2 / 4). */
+export const digitsToSegments = (digits, fieldOrder) => {
+  let rest = digits;
+  const out = {
+    month: '',
+    day: '',
+    year: ''
+  };
+  for (const field of fieldOrder) {
+    const maxLen = field === 'year' ? 4 : 2;
+    out[field] = rest.slice(0, maxLen);
+    rest = rest.slice(maxLen);
+  }
+  return out;
+};

package/dist/DatePicker/DatePickerInput/elements.d.ts

@@ -0,0 +1,15 @@
+import { StyleProps } from '@codecademy/variance';
+import { conditionalStyles, inputSizeStyles } from '../../Form/styles';
+interface SegmentedShellProps extends StyleProps<typeof conditionalStyles>, StyleProps<typeof inputSizeStyles> {
+}
+/**
+ * Shell uses the same style stack as `Input`. `formFieldStyles` targets `&:focus`, but the host is a
+ * `div` — focus is on inner spinbuttons, so we mirror `Input` focus visuals with `&:focus-within`.
+ */
+export declare const SegmentedShell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("../../Box").FlexBoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | keyof import("react").ClassAttributes<HTMLDivElement> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    theme?: import("@emotion/react").Theme;
+} & SegmentedShellProps, {}, {}>;
+export {};

package/dist/DatePicker/DatePickerInput/elements.js

@@ -0,0 +1,19 @@
+import _styled from "@emotion/styled/base";
+import { css, theme } from '@codecademy/gamut-styles';
+import { FlexBox } from '../../Box';
+import { conditionalStyles, formFieldFocusStyles, formFieldStyles, inputSizeStyles } from '../../Form/styles';
+/**
+ * Shell uses the same style stack as `Input`. `formFieldStyles` targets `&:focus`, but the host is a
+ * `div` — focus is on inner spinbuttons, so we mirror `Input` focus visuals with `&:focus-within`.
+ */
+export const SegmentedShell = /*#__PURE__*/_styled(FlexBox, {
+  target: "ex306dz0",
+  label: "SegmentedShell"
+})(formFieldStyles, conditionalStyles, inputSizeStyles, ({
+  variant
+}) => css({
+  '&:focus-within': variant === 'error' ? {
+    borderColor: 'feedback-error',
+    boxShadow: `inset 0 0 0 1px ${theme.colors['feedback-error']}`
+  } : formFieldFocusStyles
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0RhdGVQaWNrZXJJbnB1dC9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvRGF0ZVBpY2tlci9EYXRlUGlja2VySW5wdXQvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBTdHlsZVByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBGbGV4Qm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7XG4gIGNvbmRpdGlvbmFsU3R5bGVzLFxuICBmb3JtRmllbGRGb2N1c1N0eWxlcyxcbiAgZm9ybUZpZWxkU3R5bGVzLFxuICBpbnB1dFNpemVTdHlsZXMsXG59IGZyb20gJy4uLy4uL0Zvcm0vc3R5bGVzJztcblxuaW50ZXJmYWNlIFNlZ21lbnRlZFNoZWxsUHJvcHNcbiAgZXh0ZW5kcyBTdHlsZVByb3BzPHR5cGVvZiBjb25kaXRpb25hbFN0eWxlcz4sXG4gICAgU3R5bGVQcm9wczx0eXBlb2YgaW5wdXRTaXplU3R5bGVzPiB7fVxuXG4vKipcbiAqIFNoZWxsIHVzZXMgdGhlIHNhbWUgc3R5bGUgc3RhY2sgYXMgYElucHV0YC4gYGZvcm1GaWVsZFN0eWxlc2AgdGFyZ2V0cyBgJjpmb2N1c2AsIGJ1dCB0aGUgaG9zdCBpcyBhXG4gKiBgZGl2YCDigJQgZm9jdXMgaXMgb24gaW5uZXIgc3BpbmJ1dHRvbnMsIHNvIHdlIG1pcnJvciBgSW5wdXRgIGZvY3VzIHZpc3VhbHMgd2l0aCBgJjpmb2N1cy13aXRoaW5gLlxuICovXG5leHBvcnQgY29uc3QgU2VnbWVudGVkU2hlbGwgPSBzdHlsZWQoRmxleEJveCk8U2VnbWVudGVkU2hlbGxQcm9wcz4oXG4gIGZvcm1GaWVsZFN0eWxlcyxcbiAgY29uZGl0aW9uYWxTdHlsZXMsXG4gIGlucHV0U2l6ZVN0eWxlcyxcbiAgKHsgdmFyaWFudCB9KSA9PlxuICAgIGNzcyh7XG4gICAgICAnJjpmb2N1cy13aXRoaW4nOlxuICAgICAgICB2YXJpYW50ID09PSAnZXJyb3InXG4gICAgICAgICAgPyB7XG4gICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnZmVlZGJhY2stZXJyb3InLFxuICAgICAgICAgICAgICBib3hTaGFkb3c6IGBpbnNldCAwIDAgMCAxcHggJHt0aGVtZS5jb2xvcnNbJ2ZlZWRiYWNrLWVycm9yJ119YCxcbiAgICAgICAgICAgIH1cbiAgICAgICAgICA6IGZvcm1GaWVsZEZvY3VzU3R5bGVzLFxuICAgIH0pXG4pO1xuIl19 */");

package/dist/DatePicker/DatePickerInput/index.d.ts

@@ -0,0 +1,13 @@
+import type { InputWrapperProps } from '../../Form/inputs/Input';
+/**
+ * Props for DatePickerInput. When used inside DatePicker, only overrides (e.g. placeholder, label).
+ * In range mode, use rangePart to bind to start or end date. When outside DatePicker, pass value, onChange, etc.
+ */
+export type DatePickerInputProps = Omit<InputWrapperProps, 'className' | 'type' | 'icon' | 'value' | 'onChange' | 'color'> & {
+    /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
+    rangePart?: 'start' | 'end';
+};
+export declare const DatePickerInput: import("react").ForwardRefExoticComponent<Omit<InputWrapperProps, "color" | "className" | "onChange" | "type" | "icon" | "value"> & {
+    /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
+    rangePart?: "start" | "end";
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/DatePicker/DatePickerInput/index.js

@@ -0,0 +1,187 @@
+import { MiniCalendarIcon } from '@codecademy/gamut-icons';
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { FlexBox } from '../../Box';
+import { FormGroup } from '../../Form/elements/FormGroup';
+import { useDatePicker } from '../DatePickerContext';
+import { SegmentedShell } from './elements';
+import { DatePickerInputSegment, getDateSegmentsFromDate, normalizeSegmentValues, parseSegmentsToDate, SegmentLiteral } from './Segment';
+import { formatDateISO8601DateOnly, getDateFieldOrder, getDateFormatLayout } from './utils';
+
+/**
+ * Props for DatePickerInput. When used inside DatePicker, only overrides (e.g. placeholder, label).
+ * In range mode, use rangePart to bind to start or end date. When outside DatePicker, pass value, onChange, etc.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DatePickerInput = /*#__PURE__*/forwardRef(({
+  disabled,
+  error,
+  form,
+  label,
+  name,
+  rangePart,
+  size = 'base',
+  ...rest
+}, ref) => {
+  const context = useDatePicker();
+  if (context == null) {
+    throw new Error('DatePickerInput must be used inside a DatePicker (it reads shared state from context).');
+  }
+  const {
+    mode,
+    startOrSelectedDate,
+    setSelection,
+    openCalendar,
+    focusCalendarGrid,
+    locale,
+    isCalendarOpen,
+    translations
+  } = context;
+  const isRange = mode === 'range';
+  const endDate = isRange ? context.endDate : null;
+  const inputID = useId();
+  const inputId = `datepicker-input-${inputID.replace(/:/g, '')}`;
+  const {
+    layout,
+    fieldOrder
+  } = useMemo(() => {
+    const layout = getDateFormatLayout(locale);
+    return {
+      layout,
+      fieldOrder: getDateFieldOrder(layout)
+    };
+  }, [locale]);
+  const firstField = fieldOrder[0];
+  const firstFieldId = `${inputId}-${firstField}`;
+  const defaultLabel = !isRange ? translations.dateLabel : rangePart === 'end' ? translations.endDateLabel : translations.startDateLabel;
+  const boundDate = isRange && rangePart === 'end' ? endDate : startOrSelectedDate;
+  const segmentsFromBound = useCallback(() => getDateSegmentsFromDate(boundDate), [boundDate]);
+  const [segments, setSegments] = useState(segmentsFromBound);
+  const parsedForHidden = parseSegmentsToDate(segments);
+  const hiddenValue = parsedForHidden ? formatDateISO8601DateOnly(parsedForHidden) : '';
+  const isInputFocusedRef = useRef(false);
+  const containerRef = useRef(null);
+  const setShellRef = useCallback(el => {
+    containerRef.current = el;
+    if (typeof ref === 'function') ref(el);else if (ref != null) ref.current = el;
+  }, [ref]);
+  useEffect(() => {
+    if (!isInputFocusedRef.current) {
+      setSegments(segmentsFromBound());
+    }
+  }, [segmentsFromBound]);
+  const commitParsedDate = useCallback(parsed => {
+    if (isRange && rangePart) {
+      if (rangePart === 'start') setSelection(parsed, endDate);else setSelection(startOrSelectedDate, parsed);
+    } else setSelection(parsed);
+  }, [isRange, rangePart, setSelection, endDate, startOrSelectedDate]);
+  const clearSelection = useCallback(() => {
+    if (isRange && rangePart) {
+      if (rangePart === 'start') setSelection(null, endDate);else setSelection(startOrSelectedDate, null);
+    } else setSelection(null);
+  }, [isRange, rangePart, setSelection, endDate, startOrSelectedDate]);
+  const applySegments = useCallback(next => {
+    const parsed = parseSegmentsToDate(next);
+    if (parsed) commitParsedDate(parsed);else if (!next.month && !next.day && !next.year) clearSelection();
+  }, [clearSelection, commitParsedDate]);
+  const handleContainerBlur = e => {
+    if (containerRef.current?.contains(e.relatedTarget)) return;
+    isInputFocusedRef.current = false;
+    setSegments(prev => {
+      const normalized = normalizeSegmentValues(prev);
+      const parsed = parseSegmentsToDate(normalized);
+      if (parsed) {
+        commitParsedDate(parsed);
+        return normalized;
+      }
+      if (!normalized.month && !normalized.day && !normalized.year) {
+        clearSelection();
+        return getDateSegmentsFromDate(null);
+      }
+      return segmentsFromBound();
+    });
+  };
+  const handleContainerFocus = () => {
+    isInputFocusedRef.current = true;
+  };
+  const handleSegmentFocus = () => {
+    handleContainerFocus();
+    if (isRange && rangePart) context.setActiveRangePart(rangePart);
+  };
+  const handleOpenCalendar = () => {
+    if (!disabled) openCalendar({
+      moveFocusIntoCalendar: false
+    });
+  };
+  const focusOrOpenCalendarGrid = () => {
+    if (isCalendarOpen) focusCalendarGrid();else openCalendar({
+      moveFocusIntoCalendar: true
+    });
+  };
+  return /*#__PURE__*/_jsx(FormGroup, {
+    htmlFor: firstFieldId,
+    isSoloField: true,
+    label: label ?? defaultLabel,
+    mb: 0,
+    pb: 0,
+    spacing: "tight",
+    width: "fit-content",
+    children: /*#__PURE__*/_jsxs(SegmentedShell, {
+      inputSize: size === 'small' ? 'small' : 'base',
+      ref: setShellRef,
+      role: "group",
+      variant: error ? 'error' : undefined,
+      width: "113px",
+      onBlur: handleContainerBlur,
+      onFocus: handleContainerFocus,
+      ...rest,
+      children: [/*#__PURE__*/_jsx(FlexBox, {
+        alignItems: "center",
+        justifyContent: "center",
+        children: layout.map((item, index) => {
+          if (item.kind === 'literal') {
+            return /*#__PURE__*/_jsx(SegmentLiteral, {
+              "aria-hidden": true
+              // eslint-disable-next-line react/no-array-index-key
+              ,
+              children: `${item.text}`
+            }, `literal-${item.text}-${index}`);
+          }
+          const idx = fieldOrder.indexOf(item.field);
+          const prevField = idx > 0 ? fieldOrder[idx - 1] : null;
+          const nextField = idx < fieldOrder.length - 1 ? fieldOrder[idx + 1] : null;
+          return /*#__PURE__*/_jsx(DatePickerInputSegment, {
+            applySegments: applySegments,
+            disabled: Boolean(disabled),
+            error: Boolean(error),
+            field: item.field,
+            focusOrOpenCalendarGrid: focusOrOpenCalendarGrid,
+            handleOnClick: handleOpenCalendar,
+            handleOnFocus: handleSegmentFocus,
+            nextField: nextField,
+            prevField: prevField,
+            segments: segments,
+            setSegments: setSegments
+          }, item.field);
+        })
+      }), /*#__PURE__*/_jsx("input", {
+        "aria-hidden": true,
+        form: form,
+        name: name,
+        tabIndex: -1,
+        type: "hidden",
+        value: hiddenValue
+      }), /*#__PURE__*/_jsx(FlexBox, {
+        alignItems: "center",
+        justifyContent: "center",
+        pl: 16,
+        pr: 8,
+        role: "presentation",
+        onClick: handleOpenCalendar,
+        children: /*#__PURE__*/_jsx(MiniCalendarIcon, {
+          "aria-hidden": true,
+          size: 16
+        })
+      })]
+    })
+  });
+});

package/dist/DatePicker/DatePickerInput/utils.d.ts

@@ -0,0 +1,17 @@
+/** Single date field in locale order (from `Intl.DateTimeFormat#formatToParts`). */
+export type DatePartKind = 'month' | 'day' | 'year';
+export type DateFormatLayoutItem = {
+    kind: 'field';
+    field: DatePartKind;
+} | {
+    kind: 'literal';
+    text: string;
+};
+/**
+ * Month/day/year order and literal separators for the locale (e.g. MM/DD/YYYY vs DD/MM/YYYY).
+ */
+export declare const getDateFormatLayout: (locale: Intl.Locale) => DateFormatLayoutItem[];
+/** Focus / tab order for the three fields (locale order). */
+export declare const getDateFieldOrder: (layout: DateFormatLayoutItem[]) => DatePartKind[];
+/** ISO 8601 date-only string for hidden form fields. */
+export declare const formatDateISO8601DateOnly: (date: Date) => string;

package/dist/DatePicker/DatePickerInput/utils.js

@@ -0,0 +1,50 @@
+import { stringifyLocale } from '../utils/locale';
+
+/** Single date field in locale order (from `Intl.DateTimeFormat#formatToParts`). */
+
+/**
+ * Month/day/year order and literal separators for the locale (e.g. MM/DD/YYYY vs DD/MM/YYYY).
+ */
+export const getDateFormatLayout = locale => {
+  const parts = new Intl.DateTimeFormat(stringifyLocale(locale), {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }).formatToParts(new Date(2025, 10, 15));
+  const items = [];
+  for (const part of parts) {
+    if (part.type === 'month') items.push({
+      kind: 'field',
+      field: 'month'
+    });else if (part.type === 'day') items.push({
+      kind: 'field',
+      field: 'day'
+    });else if (part.type === 'year') items.push({
+      kind: 'field',
+      field: 'year'
+    });else if (part.type === 'literal') items.push({
+      kind: 'literal',
+      text: part.value
+    });
+  }
+  return items;
+};
+
+/** Focus / tab order for the three fields (locale order). */
+export const getDateFieldOrder = layout => {
+  const order = [];
+  for (const item of layout) {
+    if (item.kind === 'field' && !order.includes(item.field)) {
+      order.push(item.field);
+    }
+  }
+  return order.length === 3 ? order : ['month', 'day', 'year'];
+};
+
+/** ISO 8601 date-only string for hidden form fields. */
+export const formatDateISO8601DateOnly = date => {
+  const y = date.getFullYear();
+  const m = date.getMonth() + 1;
+  const d = date.getDate();
+  return `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "68.2.3-alpha.df0cb3.0",
+  "version": "68.2.3-alpha.e0ecfc.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.57.3-alpha.df0cb3.0",
-    "@codecademy/gamut-illustrations": "0.58.10-alpha.df0cb3.0",
-    "@codecademy/gamut-patterns": "0.10.29-alpha.df0cb3.0",
-    "@codecademy/gamut-styles": "17.13.2-alpha.df0cb3.0",
-    "@codecademy/variance": "0.26.2-alpha.df0cb3.0",
+    "@codecademy/gamut-icons": "9.57.3-alpha.e0ecfc.0",
+    "@codecademy/gamut-illustrations": "0.58.10-alpha.e0ecfc.0",
+    "@codecademy/gamut-patterns": "0.10.29-alpha.e0ecfc.0",
+    "@codecademy/gamut-styles": "17.13.2-alpha.e0ecfc.0",
+    "@codecademy/variance": "0.26.2-alpha.e0ecfc.0",
     "@formatjs/intl-locale": "^5.3.1",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",

package/dist/DatePicker/DatePickerInput.d.ts

@@ -1,16 +0,0 @@
-import { ComponentProps } from 'react';
-import { Input } from '../Form/inputs/Input';
-/**
- * Props for DatePickerInput. When used inside DatePicker, only overrides (e.g. placeholder, label).
- * In range mode, use rangePart to bind to start or end date. When outside DatePicker, pass value, onChange, etc.
- */
-export type DatePickerInputProps = Omit<ComponentProps<typeof Input>, 'type' | 'icon'> & {
-    /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
-    rangePart?: 'start' | 'end';
-};
-/**
- * Date input. When inside DatePicker: owns local input value state and syncs to
- * shared selectedDate via context on blur/parse; opens calendar on click/arrow down.
- * When outside DatePicker: fully controlled by props.
- */
-export declare const DatePickerInput: import("react").ForwardRefExoticComponent<Omit<DatePickerInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/DatePicker/DatePickerInput.js

@@ -1,134 +0,0 @@
-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, getDateFormatPattern, parseDateFromInput } from './Calendar/utils/format';
-import { useDatePicker } from './DatePickerContext';
-
-/**
- * Props for DatePickerInput. When used inside DatePicker, only overrides (e.g. placeholder, label).
- * In range mode, use rangePart to bind to start or end date. When outside DatePicker, pass value, onChange, etc.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Date input. When inside DatePicker: owns local input value state and syncs to
- * shared selectedDate via context on blur/parse; opens calendar on click/arrow down.
- * When outside DatePicker: fully controlled by props.
- */
-export const DatePickerInput = /*#__PURE__*/forwardRef(({
-  placeholder,
-  label,
-  rangePart,
-  ...rest
-}, ref) => {
-  const context = useDatePicker();
-  if (context == null) {
-    throw new Error('DatePickerInput must be used inside a DatePicker (it reads shared state from context).');
-  }
-  const {
-    mode,
-    startOrSelectedDate,
-    setSelection,
-    openCalendar,
-    focusCalendarGrid,
-    locale,
-    isCalendarOpen,
-    calendarDialogId,
-    translations
-  } = context;
-  const isRange = mode === 'range';
-  const inputID = useId();
-  const inputId = `datepicker-input-${inputID.replace(/:/g, '')}`;
-
-  // Range with two inputs: each input binds to one part. Single or range combined: one value.
-  const boundDate = isRange && rangePart === 'end' ? context.endDate : startOrSelectedDate;
-  const formattedValue = boundDate != null ? formatDateForInput(boundDate, locale) : '';
-  const [inputValue, setInputValue] = useState(() => formattedValue);
-  const isInputFocusedRef = useRef(false);
-
-  // Sync input from shared state. Skip when focused so we don't overwrite while typing.
-  useEffect(() => {
-    if (!isInputFocusedRef.current) {
-      setInputValue(formattedValue);
-    }
-  }, [formattedValue]);
-
-  /** Apply raw input string to selection state. Returns formatted string if parsed so caller can sync input (e.g. on blur). */
-  const applyValueToSelection = raw => {
-    const trimmed = raw.trim();
-    if (!trimmed) {
-      if (isRange && rangePart) {
-        if (rangePart === 'start') setSelection(null, context.endDate);else setSelection(startOrSelectedDate, null);
-      } else setSelection(null);
-      return undefined;
-    }
-    const parsed = parseDateFromInput(trimmed, locale);
-    if (!parsed) return undefined;
-    if (isRange && rangePart) {
-      if (rangePart === 'start') setSelection(parsed, context.endDate);else setSelection(startOrSelectedDate, parsed);
-    } else setSelection(parsed);
-    return formatDateForInput(parsed, locale);
-  };
-  const handleChange = e => {
-    const raw = e.target.value;
-    setInputValue(raw);
-    applyValueToSelection(raw);
-  };
-  const handleBlur = () => {
-    isInputFocusedRef.current = false;
-    const formatted = applyValueToSelection(inputValue.trim());
-    if (formatted) setInputValue(formatted);else if (inputValue.trim()) setInputValue(formattedValue);
-  };
-  const handleKeyDown = e => {
-    if (e.key === 'ArrowDown' || e.key === 'Down') {
-      e.preventDefault();
-      if (isCalendarOpen) {
-        focusCalendarGrid();
-      } else {
-        openCalendar({
-          moveFocusIntoCalendar: true
-        });
-      }
-    }
-  };
-  const handleOpenCalendar = () => {
-    openCalendar({
-      moveFocusIntoCalendar: false
-    });
-  };
-  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
-    ,
-    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
-    })
-  });
-});