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

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/dist/DatePicker/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DatePicker';
+export * from './DatePickerContext';
+export * from './DatePickerCalendar';
+export * from './DatePickerInput';
+export type { IsoWeekday } from './utils/locale';

package/dist/DatePicker/index.js

@@ -0,0 +1,5 @@
+export * from './DatePicker';
+export * from './DatePickerContext';
+export * from './DatePickerCalendar';
+export * from './DatePickerInput';
+export {};

package/dist/DatePicker/types.d.ts

@@ -0,0 +1,86 @@
+import { ComponentProps } from 'react';
+import { Input } from '../Form/inputs/Input';
+import { CalendarBaseProps } from './Calendar/types';
+import { DatePickerTranslations } from './utils/translations';
+export interface DatePickerBaseProps extends Pick<CalendarBaseProps, 'locale' | 'disabledDates'> {
+    /** When provided, only the provider is rendered and children compose Input + Calendar. */
+    children?: React.ReactNode;
+    /** Placeholder for the input. */
+    placeholder?: string;
+    /** Override UI strings (e.g. clear button). Merged with defaults. */
+    translations?: DatePickerTranslations;
+    inputSize?: ComponentProps<typeof Input>['size'];
+}
+export interface DatePickerSingleProps extends DatePickerBaseProps {
+    mode?: 'single';
+    /** Controlled selected date. */
+    selectedDate: Date | null;
+    /** Called when the user selects a date. */
+    setSelectedDate: (date: Date | null) => void;
+    /** Label for the input. */
+    label?: string;
+}
+export interface DatePickerRangeProps extends DatePickerBaseProps {
+    mode: 'range';
+    /** Controlled start date. */
+    startDate: Date | null;
+    /** Controlled end date. */
+    endDate: Date | null;
+    /** Called when the user changes the start date. */
+    setStartDate: (date: Date | null) => void;
+    /** Called when the user changes the end date. */
+    setEndDate: (date: Date | null) => void;
+    /** Label for the start date input. */
+    startLabel?: string;
+    /** Label for the end date input. */
+    endLabel?: string;
+}
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+export type OpenCalendarOptions = {
+    /**
+     * When true, move DOM focus into the date grid after open (keyboard / explicit request).
+     * When false (default), keep focus on the input so pointer users can type (WCAG 3.2.1).
+     */
+    moveFocusIntoCalendar?: boolean;
+};
+export interface DatePickerBaseContextValue extends Pick<CalendarBaseProps, 'disabledDates'> {
+    /**
+     * Resolved `Intl.Locale` from the `locale` prop (or runtime default). Same instance passed to
+     * formatters and available for `getWeekInfo()` etc.
+     */
+    locale: Intl.Locale;
+    isCalendarOpen: boolean;
+    openCalendar: (options?: OpenCalendarOptions) => void;
+    /** Move focus from the input into the grid when the calendar is already open (e.g. ArrowDown). */
+    focusCalendarGrid: () => void;
+    /**
+     * Flips on each grid focus request so `CalendarBody` effects re-run when `focusTarget` is unchanged.
+     * Not a semantic true/false — only the change matters; pair with `gridFocusRequested`.
+     */
+    focusGridSignal: boolean;
+    /** When true, `CalendarBody` runs a one-shot move of DOM focus into the grid if it is not already there. */
+    gridFocusRequested: boolean;
+    /** Clears `gridFocusRequested` after focus has moved into the grid (or call when closing). */
+    clearGridFocusRequest: () => void;
+    closeCalendar: () => void;
+    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). */
+    setSelection: (startOrSelectedDate: Date | null, endDate?: Date | null) => void;
+}
+export interface DatePickerSingleContextValue extends DatePickerBaseContextValue {
+    mode: 'single';
+}
+export type ActiveRangePart = 'start' | 'end' | null;
+export interface DatePickerRangeContextValue extends DatePickerBaseContextValue {
+    mode: 'range';
+    endDate: Date | null;
+    /** Which input is active (start/end focused); null = selection mode. */
+    activeRangePart: ActiveRangePart;
+    /** Set which input is active (e.g. when input receives focus). */
+    setActiveRangePart: (part: ActiveRangePart) => void;
+}
+export type DatePickerContextValue = DatePickerSingleContextValue | DatePickerRangeContextValue;

package/dist/DatePicker/types.js

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

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

@@ -0,0 +1,19 @@
+import type { DatePickerBaseContextValue, DatePickerProps, DatePickerRangeContextValue, DatePickerRangeProps } from '../types';
+export declare const isRangeProps: (props: DatePickerProps) => props is DatePickerRangeProps;
+export type RangeContainsDisabledParams = {
+    start: Date;
+    end: Date;
+    disabledDates: Date[];
+};
+/** True if any disabled date falls within [start, end] (inclusive, by calendar day). */
+export declare const rangeContainsDisabled: ({ start, end, disabledDates, }: RangeContainsDisabledParams) => boolean;
+export type HandleDateSelectSingleParams = {
+    date: Date;
+    selectedDate: DatePickerBaseContextValue['startOrSelectedDate'];
+} & Pick<DatePickerBaseContextValue, 'setSelection'>;
+export declare const handleDateSelectSingle: ({ date, selectedDate, setSelection, }: HandleDateSelectSingleParams) => void;
+export type HandleDateSelectRangeParams = {
+    date: Date;
+    startDate: DatePickerRangeContextValue['startOrSelectedDate'];
+} & Pick<DatePickerRangeContextValue, 'activeRangePart' | 'endDate' | 'setSelection' | 'disabledDates'>;
+export declare const handleDateSelectRange: ({ date, activeRangePart, startDate, endDate, setSelection, disabledDates, }: HandleDateSelectRangeParams) => void;

package/dist/DatePicker/utils/dateSelect.js

@@ -0,0 +1,146 @@
+import { isDateInRange, isSameDay } from '../Calendar/utils/dateGrid';
+export const isRangeProps = props => props.mode === 'range';
+/** True if any disabled date falls within [start, end] (inclusive, by calendar day). */
+export const rangeContainsDisabled = ({
+  start,
+  end,
+  disabledDates
+}) => {
+  return disabledDates.some(date => isSameDay(date, start) || isSameDay(date, end) || isDateInRange(date, start, end));
+};
+export const handleDateSelectSingle = ({
+  date,
+  selectedDate,
+  setSelection
+}) => {
+  // If clicked date is the same as Start Date: Clear Start Date
+  if (selectedDate && date.getTime() === selectedDate.getTime()) {
+    setSelection(null);
+    return;
+  }
+  // If clicked date is not the same as Start Date: Set Start Date to clicked date
+  setSelection(date);
+};
+const applyRangeOrNewStart = ({
+  start,
+  end,
+  clickedDate,
+  disabledDates,
+  setSelection
+}) => {
+  // if range contains disabled dates, set start date to clicked date and end date to null
+  if (rangeContainsDisabled({
+    start,
+    end,
+    disabledDates
+  })) {
+    setSelection(clickedDate, null);
+  } else {
+    setSelection(start, end);
+  }
+};
+export const handleDateSelectRange = ({
+  date,
+  activeRangePart,
+  startDate,
+  endDate,
+  setSelection,
+  disabledDates = []
+}) => {
+  // Range mode: field targeting (start or end input was focused)
+  if (activeRangePart === 'start') {
+    if (date.getTime() === startDate?.getTime()) {
+      setSelection(null, endDate);
+      return;
+    }
+    const newEnd = endDate != null && date.getTime() <= endDate.getTime() ? endDate : null;
+    if (newEnd != null) {
+      applyRangeOrNewStart({
+        start: date,
+        end: newEnd,
+        clickedDate: date,
+        disabledDates,
+        setSelection
+      });
+    } else {
+      setSelection(date, newEnd);
+    }
+    return;
+  }
+  if (activeRangePart === 'end') {
+    if (date.getTime() === endDate?.getTime()) {
+      setSelection(startDate, null);
+      return;
+    }
+    const newStart = startDate != null && date.getTime() >= startDate.getTime() ? startDate : null;
+    if (newStart != null) {
+      applyRangeOrNewStart({
+        start: newStart,
+        end: date,
+        clickedDate: date,
+        disabledDates,
+        setSelection
+      });
+    } else {
+      setSelection(newStart, date);
+    }
+    return;
+  }
+
+  // Range selection mode (no field focused: calendar drives both)
+  if (startDate && endDate) {
+    // if start date is end date and is clicked, clears everything
+    if (startDate.getTime() === endDate.getTime() && date.getTime() === startDate.getTime()) {
+      setSelection(null, null);
+      return;
+    }
+    // if clicked on start date, end date becomes start date
+    if (date.getTime() === startDate.getTime()) {
+      setSelection(endDate, null);
+      return;
+    }
+    // if clicked on end date, clears end date and start remains
+    if (date.getTime() === endDate.getTime()) {
+      setSelection(startDate, null);
+      return;
+    }
+    // If clicked date > Start: Updates End Date to new date (Start remains)
+    if (date.getTime() > startDate.getTime()) {
+      applyRangeOrNewStart({
+        start: startDate,
+        end: date,
+        clickedDate: date,
+        disabledDates,
+        setSelection
+      });
+      return;
+    }
+    // If clicked date < Start: Updates Start Date to new date (End remains) - extends range to the left
+    applyRangeOrNewStart({
+      start: date,
+      end: endDate,
+      clickedDate: date,
+      disabledDates,
+      setSelection
+    });
+    return;
+  }
+  // Start is Set, End is Empty
+  if (startDate && !endDate) {
+    // If clicked date < Start: Restarts selection with clicked date as new Start
+    if (date.getTime() < startDate.getTime()) {
+      setSelection(date, null);
+    } else {
+      // If clicked date > Start: Sets it as End Date (if range valid)
+      applyRangeOrNewStart({
+        start: startDate,
+        end: date,
+        clickedDate: date,
+        disabledDates,
+        setSelection
+      });
+    }
+    return;
+  }
+  setSelection(date, null);
+};

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

@@ -0,0 +1,38 @@
+import '@formatjs/intl-locale/polyfill.js';
+/**
+ * The runtime default locale string (user agent), matching what `Intl` uses when no locale is passed.
+ */
+export declare const getDefaultLocaleTag: () => string;
+/**
+ * Resolves `Intl.LocalesArgument` (or `undefined`) to a stable `Intl.Locale` instance for formatting
+ * and locale metadata (e.g. `getWeekInfo()` in supporting environments).
+ *
+ * - `undefined` → default runtime locale via {@link getDefaultLocaleTag}
+ * - `Intl.Locale` → returned as-is (no duplicate allocation)
+ * - `string` / `readonly string[]` → `new Intl.Locale(...)`
+ */
+export declare const resolveLocale: (locales?: Intl.LocalesArgument) => Intl.Locale;
+/**
+ * Memoized {@link resolveLocale} for calendar subcomponents. Pass the same `locale` prop you accept
+ * from `CalendarBaseProps` (optional `Intl.LocalesArgument`).
+ */
+export declare const useResolvedLocale: (locale?: Intl.LocalesArgument) => Intl.Locale;
+/**
+ * Convert an Intl.Locale to a string. This is necessary the Intl.DateTimeFormat constructor only accepts a string in some versions of TS.
+ * @param locale - The Intl.Locale to convert to a string.
+ * @returns The stringified locale.
+ */
+export declare const stringifyLocale: (locale: Intl.Locale) => string;
+/** ISO weekday: 1 = Monday … 7 = Sunday (matches `Intl.Locale#getWeekInfo().firstDay`). */
+export type IsoWeekday = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+/**
+ * First calendar column weekday from `locale` (via `getWeekInfo()`), or explicit override.
+ * - `weekStartsOnOverride` — ISO weekday **1–7** (Monday … Sunday), same as `getWeekInfo().firstDay`
+ * - omitted → `locale.getWeekInfo().firstDay` when available, else **7** (Sunday)
+ */
+export declare const getIsoFirstDayFromLocale: (locale: Intl.Locale, weekStartsOnOverride?: IsoWeekday) => IsoWeekday;
+/**
+ * Hook: resolved first weekday for the calendar grid. Re-reads after mount so async polyfills
+ * (e.g. Firefox) can install `getWeekInfo` before the first paint in some bundles.
+ */
+export declare const useIsoFirstWeekday: (locale: Intl.Locale, weekStartsOnOverride?: IsoWeekday) => IsoWeekday;