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

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

@@ -1,93 +0,0 @@
-/**
- * Builds a grid of days for a calendar month using native Date and Intl.
- * Each row has 7 cells; leading/trailing cells may be null (padding from adjacent months).
- */
-
-const DAYS_PER_WEEK = 7;
-
-/**
- * Normalize to start of day in local time for comparison.
- */
-const toDateOnly = date => {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-};
-
-/**
- * Get the weekday for a date (0 = Sunday, 6 = Saturday).
- * Optionally use weekStartsOn to compute "offset" for display (e.g. Monday = 0).
- */
-export const getDayOfWeek = (date, weekStartsOn = 0) => {
-  const sundayBased = date.getDay();
-  if (weekStartsOn === 0) return sundayBased;
-  return (sundayBased + 6) % 7; // Monday = 0
-};
-
-/**
- * Returns an array of weeks for the given month. Each week is an array of 7 items:
- * each item is either a Date (that day) or null (padding from previous/next month).
- *
- * @param year - Full year (e.g. 2026)
- * @param month - Month 0-11 (0 = January)
- * @param weekStartsOn - 0 = Sunday, 1 = Monday
- */
-export const getMonthGrid = (year, month, weekStartsOn = 0) => {
-  const first = new Date(year, month, 1);
-  const last = new Date(year, month + 1, 0);
-  const firstDayOfWeek = getDayOfWeek(first, weekStartsOn);
-  const daysInMonth = last.getDate();
-  const weeks = [];
-  let currentWeek = [];
-
-  // Pad start of first week with nulls
-  // eslint-disable-next-line no-plusplus
-  for (let i = 0; i < firstDayOfWeek; i++) {
-    currentWeek.push(null);
-  }
-
-  // fix these
-  // eslint-disable-next-line no-plusplus
-  for (let day = 1; day <= daysInMonth; day++) {
-    currentWeek.push(new Date(year, month, day));
-    if (currentWeek.length === DAYS_PER_WEEK) {
-      weeks.push(currentWeek);
-      currentWeek = [];
-    }
-  }
-
-  // Pad end of last week with nulls
-  if (currentWeek.length > 0) {
-    while (currentWeek.length < DAYS_PER_WEEK) {
-      currentWeek.push(null);
-    }
-    weeks.push(currentWeek);
-  }
-  return weeks;
-};
-
-/**
- * Check if two dates are the same calendar day (ignoring time).
- */
-export const isSameDay = (a, b) => {
-  if (a === null || b === null) return false;
-  return toDateOnly(a).getTime() === toDateOnly(b).getTime();
-};
-
-/**
- * Check if `date` is between `start` and `end` (exclusive), ignoring time.
- */
-export const isDateInRange = (date, start, end) => {
-  if (start === null) return false;
-  const normalizedDateTime = toDateOnly(date).getTime();
-  const normalizedStartDateTime = toDateOnly(start).getTime();
-  const normalizedEndDateTime = end !== null ? toDateOnly(end).getTime() : normalizedStartDateTime;
-  const low = Math.min(normalizedStartDateTime, normalizedEndDateTime);
-  const high = Math.max(normalizedStartDateTime, normalizedEndDateTime);
-  return normalizedDateTime > low && normalizedDateTime < high;
-};
-
-/**
- * Check if `date` is in the `disabledDates` list (by calendar day).
- */
-export const isDateDisabled = (date, disabledDates = []) => {
-  return disabledDates.some(d => isSameDay(date, d));
-};

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

@@ -1,39 +0,0 @@
-/**
- * Date formatting for the calendar using Intl.DateTimeFormat.
- */
-/**
- * Format month and year for the calendar header (e.g. "February 2026").
- */
-export declare const formatMonthYear: (date: Date, locale?: string) => string;
-/**
- * Get short weekday labels for column headers (e.g. ["Su", "Mo", ...]).
- * Order depends on weekStartsOn: 0 = Sunday first, 1 = Monday first.
- */
-export declare const getWeekdayLabels: (locale?: string, weekStartsOn?: 0 | 1) => string[];
-/**
- * Get full weekday names for abbr attributes (e.g. "Sunday", "Monday").
- * Same order as getWeekdayLabels.
- */
-export declare const getWeekdayFullNames: (locale?: string, weekStartsOn?: 0 | 1) => string[];
-/**
- * Format a date for display in the date picker input (e.g. "2/15/2026").
- */
-export declare const formatDateForInput: (date: Date, locale?: string) => 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?: string) => Date | null;
-/**
- * Format a date range for the input (e.g. "2/15/2026 – 2/20/2026").
- */
-export declare const formatDateRangeForInput: (startDate: Date | null, endDate: Date | null, locale?: string) => string;
-/**
- * Parse a range string (e.g. "2/15/2026 – 2/20/2026") into { startDate, endDate }.
- * Returns null if invalid. Single date is allowed and yields startDate = endDate.
- */
-export declare const parseDateRangeFromInput: (value: string, locale?: string) => {
-    startDate: Date;
-    endDate: Date;
-} | null;

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

@@ -1,130 +0,0 @@
-/**
- * Date formatting for the calendar using Intl.DateTimeFormat.
- */
-
-/**
- * Format month and year for the calendar header (e.g. "February 2026").
- */
-export const formatMonthYear = (date, locale) => {
-  return new Intl.DateTimeFormat(locale ?? 'en-US', {
-    month: 'long',
-    year: 'numeric'
-  }).format(date);
-};
-
-/**
- * Get short weekday labels for column headers (e.g. ["Su", "Mo", ...]).
- * Order depends on weekStartsOn: 0 = Sunday first, 1 = Monday first.
- */
-export const getWeekdayLabels = (locale, weekStartsOn = 0) => {
-  const formatter = new Intl.DateTimeFormat(locale ?? 'en-US', {
-    weekday: 'short'
-  });
-  // Jan 7, 2024 is a Sunday; add 0..6 days to get Sun..Sat
-  const sunday = new Date(2024, 0, 7);
-  const labels = Array.from({
-    length: 7
-  }, (_, i) => {
-    const d = new Date(sunday);
-    d.setDate(sunday.getDate() + i);
-    return formatter.format(d);
-  });
-  if (weekStartsOn === 1) {
-    return [...labels.slice(1), labels[0]];
-  }
-  return labels;
-};
-
-/**
- * Get full weekday names for abbr attributes (e.g. "Sunday", "Monday").
- * Same order as getWeekdayLabels.
- */
-export const getWeekdayFullNames = (locale, weekStartsOn = 0) => {
-  const formatter = new Intl.DateTimeFormat(locale ?? 'en-US', {
-    weekday: 'long'
-  });
-  const sunday = new Date(2024, 0, 7);
-  const names = Array.from({
-    length: 7
-  }, (_, i) => {
-    const d = new Date(sunday);
-    d.setDate(sunday.getDate() + i);
-    return formatter.format(d);
-  });
-  if (weekStartsOn === 1) {
-    return [...names.slice(1), names[0]];
-  }
-  return names;
-};
-
-/**
- * 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', {
-    month: 'numeric',
-    day: 'numeric',
-    year: 'numeric'
-  }).format(date);
-};
-
-/**
- * Parse a string from the date input into a Date, or null if invalid.
- * Only returns a date when the input is a complete valid date (e.g. "2/15/2026").
- * Partial input like "1" or "2/15" returns null even though Date("1") would parse.
- */
-
-// this logic needs some work
-export const parseDateFromInput = (value, locale) => {
-  const trimmed = value.trim();
-  if (!trimmed) return null;
-  const parsed = new Date(trimmed);
-  if (Number.isNaN(parsed.getTime())) return null;
-  const formatted = formatDateForInput(parsed, locale);
-  if (formatted === trimmed) return parsed;
-  const parts = trimmed.split(/[/-]/);
-  if (parts.length >= 3) return parsed;
-  return null;
-};
-const RANGE_SEPARATOR = ' – ';
-
-/**
- * Format a date range for the input (e.g. "2/15/2026 – 2/20/2026").
- */
-export const formatDateRangeForInput = (startDate, endDate, locale) => {
-  if (!startDate && !endDate) return '';
-  if (!startDate) return formatDateForInput(endDate, locale);
-  if (!endDate) return formatDateForInput(startDate, locale);
-  return `${formatDateForInput(startDate, locale)}${RANGE_SEPARATOR}${formatDateForInput(endDate, locale)}`;
-};
-
-/**
- * Parse a range string (e.g. "2/15/2026 – 2/20/2026") into { startDate, endDate }.
- * Returns null if invalid. Single date is allowed and yields startDate = endDate.
- */
-export const parseDateRangeFromInput = (value, locale) => {
-  const trimmed = value.trim();
-  if (!trimmed) return null;
-  const parts = trimmed.split(RANGE_SEPARATOR).map(s => s.trim());
-  if (parts.length === 1) {
-    const d = parseDateFromInput(parts[0], locale);
-    if (!d) return null;
-    return {
-      startDate: d,
-      endDate: new Date(d)
-    };
-  }
-  if (parts.length === 2) {
-    const start = parseDateFromInput(parts[0], locale);
-    const end = parseDateFromInput(parts[1], locale);
-    if (!start || !end) return null;
-    return start.getTime() <= end.getTime() ? {
-      startDate: start,
-      endDate: end
-    } : {
-      startDate: end,
-      endDate: start
-    };
-  }
-  return null;
-};

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/DatePicker/DatePicker.d.ts

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

package/dist/DatePicker/DatePicker.js

@@ -1,127 +0,0 @@
-import { useCallback, useId, 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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-function isRangeProps(props) {
-  return props.mode === 'range';
-}
-
-/**
- * DatePicker: single-date or range. Holds shared state and provides it via context.
- * Single: selectedDate, setSelectedDate. Range: startDate, endDate, setStartDate, setEndDate.
- * With no children, renders default layout (input + calendar popover).
- */
-export const DatePicker = props => {
-  const {
-    locale = 'en-US',
-    disabledDates = [],
-    placeholder,
-    mode,
-    children
-  } = 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 openCalendar = useCallback(() => setIsCalendarOpen(true), []);
-  const closeCalendar = useCallback(() => {
-    setIsCalendarOpen(false);
-    setActiveRangePart(null);
-    inputRef.current?.focus();
-  }, []);
-  const startOrSelectedDate = isRangeProps(props) ? props.startDate : props.selectedDate;
-  const endDate = isRangeProps(props) ? props.endDate : null;
-  const setSelection = useCallback((start, end) => {
-    if (isRangeProps(props)) {
-      props.setStartDate(start);
-      props.setEndDate(end ?? null);
-    } else {
-      props.setSelectedDate(start);
-    }
-  }, [props]);
-  const contextValue = useMemo(() => {
-    const base = {
-      startOrSelectedDate,
-      setSelection,
-      isCalendarOpen,
-      openCalendar,
-      closeCalendar,
-      locale,
-      disabledDates,
-      calendarDialogId
-    };
-    return mode === 'range' ? {
-      ...base,
-      mode: 'range',
-      endDate,
-      activeRangePart,
-      setActiveRangePart
-    } : {
-      ...base,
-      mode: 'single'
-    };
-  }, [mode, startOrSelectedDate, endDate, setSelection, activeRangePart, setActiveRangePart, isCalendarOpen, openCalendar, closeCalendar, locale, disabledDates, calendarDialogId]);
-
-  // what is this doing
-  // useEffect(() => {
-  //   if (!isCalendarOpen) return;
-  //   const id = setTimeout(() => inputRef.current?.focus(), 0);
-  //   return () => clearTimeout(id);
-  // }, [isCalendarOpen]);
-
-  const content = children !== undefined ? children : /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(FlexBox, {
-      gap: 8,
-      width: "fit-content",
-      wrap: true,
-      children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(DatePickerInput, {
-          label: props.startLabel,
-          placeholder: placeholder,
-          rangePart: "start",
-          ref: inputRef
-        }), /*#__PURE__*/_jsx(DatePickerInput, {
-          label: props.endLabel,
-          placeholder: placeholder,
-          rangePart: "end"
-          // does this need a ref?
-        })]
-      }) : /*#__PURE__*/_jsx(DatePickerInput, {
-        label: props.label,
-        placeholder: placeholder,
-        ref: inputRef
-      })
-    }), /*#__PURE__*/_jsx(PopoverContainer, {
-      alignment: "bottom-left",
-      allowPageInteraction: true
-      // look into if we can kill this and mess with where we are focusing instead
-      ,
-      focusOnProps: {
-        autoFocus: false,
-        focusLock: false
-      },
-      invertAxis: "x",
-      isOpen: isCalendarOpen,
-      offset: 10,
-      targetRef: inputRef,
-      onRequestClose: closeCalendar // without this we cant type in the input but there has to be a better way
-      ,
-      children: /*#__PURE__*/_jsx("div", {
-        "aria-label": "Choose date",
-        id: calendarDialogId,
-        role: "dialog",
-        children: /*#__PURE__*/_jsx(DatePickerCalendar, {
-          dialogId: calendarDialogId
-        })
-      })
-    })]
-  });
-  return /*#__PURE__*/_jsx(DatePickerProvider, {
-    value: contextValue,
-    children: content
-  });
-};

package/dist/DatePicker/DatePickerCalendar.d.ts

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