@octanejs/day-picker 0.0.1

package/src/components/custom-components.tsrx

@@ -0,0 +1,237 @@
+// @ts-nocheck -- public props retain React DOM compatibility at the Octane render boundary.
+import { useCallback, useEffect, useRef } from 'octane';
+import type {
+	ButtonHTMLAttributes,
+	CSSProperties,
+	HTMLAttributes,
+	MouseEvent as ReactMouseEvent,
+	MouseEventHandler,
+	OptionHTMLAttributes,
+	Ref,
+	SelectHTMLAttributes,
+	TableHTMLAttributes,
+	ThHTMLAttributes,
+} from 'react';
+import type { CalendarDay, CalendarMonth, CalendarWeek } from '../classes/index.js';
+import type { Modifiers } from '../types/index.js';
+import { UI } from '../UI.js';
+import { useDayPicker } from '../useDayPicker.js';
+
+export function CaptionLabel(props: HTMLAttributes<HTMLSpanElement>) @{
+	<span {...props} />
+}
+export type CaptionLabelProps = Parameters<typeof CaptionLabel>[0];
+
+export function Chevron(props: {
+	className?: string;
+	style?: CSSProperties;
+	size?: number;
+	disabled?: boolean;
+	orientation?: 'up' | 'down' | 'left' | 'right';
+}) @{
+	const { size = 24, orientation = 'left', className, style } = props;
+	<svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24">
+		{orientation === 'up' &&
+			<polygon points="6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" />}
+		{orientation === 'down' &&
+			<polygon points="6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" />}
+		{orientation === 'left' &&
+			<polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20" />}
+		{orientation === 'right' &&
+			<polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20" />}
+	</svg>
+}
+export type ChevronProps = Parameters<typeof Chevron>[0];
+
+export type DayProps = { day: CalendarDay; modifiers: Modifiers } & HTMLAttributes<HTMLDivElement>;
+export function Day(props: DayProps) @{
+	const { day: _day, modifiers: _modifiers, ...cellProps } = props;
+	<td {...cellProps} />
+}
+
+export type DayButtonProps =
+	{ day: CalendarDay; modifiers: Modifiers } & ButtonHTMLAttributes<HTMLButtonElement>;
+export function DayButton(props: DayButtonProps) @{
+	const { day: _day, modifiers, ...buttonProps } = props;
+	const ref = useRef<HTMLButtonElement | null>(null);
+	useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	<button ref={ref} {...buttonProps} />
+}
+
+export type DropdownOption = { value: number; label: string; disabled: boolean };
+export type DropdownProps =
+	{ options?: DropdownOption[] } & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'>;
+export function Dropdown(props: DropdownProps) @{
+	const { options, className, ...selectProps } = props;
+	const { classNames, components, styles } = useDayPicker();
+	const cssClassSelect = [classNames[UI.Dropdown], className].filter(Boolean).join(' ');
+	const selectedOption = options?.find(({ value }) => value === selectProps.value);
+	<span
+		data-disabled={selectProps.disabled}
+		className={classNames[UI.DropdownRoot]}
+		style={styles?.[UI.DropdownRoot]}
+	>
+		<components.Select className={cssClassSelect} {...selectProps}>
+			{options?.map(
+				({ value, label, disabled }) =>
+					<components.Option
+						key={value}
+						value={value}
+						disabled={disabled}
+					>{label}</components.Option>,
+			)}
+		</components.Select>
+		<span className={classNames[UI.CaptionLabel]} style={styles?.[UI.CaptionLabel]} aria-hidden>
+			{selectedOption?.label}
+			<components.Chevron
+				orientation="down"
+				size={18}
+				className={classNames[UI.Chevron]}
+				style={styles?.[UI.Chevron]}
+			/>
+		</span>
+	</span>
+}
+
+export function DropdownNav(props: HTMLAttributes<HTMLDivElement>) @{
+	<div {...props} />
+}
+export type DropdownNavProps = Parameters<typeof DropdownNav>[0];
+export function Footer(props: HTMLAttributes<HTMLDivElement>) @{
+	<div {...props} />
+}
+export type FooterProps = Parameters<typeof Footer>[0];
+
+export type MonthProps =
+	{ calendarMonth: CalendarMonth; displayIndex: number } & HTMLAttributes<HTMLDivElement>;
+export function Month(props: MonthProps) @{
+	const { calendarMonth: _calendarMonth, displayIndex: _displayIndex, ...divProps } = props;
+	<div {...divProps}>{props.children}</div>
+}
+export type MonthCaptionProps = MonthProps;
+export function MonthCaption(props: MonthCaptionProps) @{
+	const { calendarMonth: _calendarMonth, displayIndex: _displayIndex, ...divProps } = props;
+	<div {...divProps} />
+}
+export function MonthGrid(props: TableHTMLAttributes<HTMLTableElement>) @{
+	<table {...props} />
+}
+export type MonthGridProps = Parameters<typeof MonthGrid>[0];
+export function Months(props: HTMLAttributes<HTMLDivElement>) @{
+	<div {...props} />
+}
+export type MonthsProps = Parameters<typeof Months>[0];
+
+export function MonthsDropdown(props: DropdownProps) @{
+	const { components } = useDayPicker();
+	<components.Dropdown {...props} />
+}
+export function YearsDropdown(props: DropdownProps) @{
+	const { components } = useDayPicker();
+	<components.Dropdown {...props} />
+}
+
+export type NavProps =
+	{
+		onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
+		onNextClick?: MouseEventHandler<HTMLButtonElement>;
+		previousMonth?: Date;
+		nextMonth?: Date;
+	} & HTMLAttributes<HTMLElement>;
+export function Nav(props: NavProps) @{
+	const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
+	const { components, classNames, styles, labels: { labelPrevious, labelNext } } = useDayPicker();
+	const handleNextClick = useCallback((event: ReactMouseEvent<HTMLButtonElement>) => {
+		if (nextMonth) onNextClick?.(event);
+	}, [nextMonth, onNextClick]);
+	const handlePreviousClick = useCallback((event: ReactMouseEvent<HTMLButtonElement>) => {
+		if (previousMonth) onPreviousClick?.(event);
+	}, [previousMonth, onPreviousClick]);
+	<nav {...navProps}>
+		<components.PreviousMonthButton
+			type="button"
+			className={classNames[UI.PreviousMonthButton]}
+			style={styles?.[UI.PreviousMonthButton]}
+			tabIndex={previousMonth ? undefined : -1}
+			aria-disabled={previousMonth ? undefined : true}
+			aria-label={labelPrevious(previousMonth)}
+			onClick={handlePreviousClick}
+		>
+			<components.Chevron
+				disabled={previousMonth ? undefined : true}
+				className={classNames[UI.Chevron]}
+				style={styles?.[UI.Chevron]}
+				orientation="left"
+			/>
+		</components.PreviousMonthButton>
+		<components.NextMonthButton
+			type="button"
+			className={classNames[UI.NextMonthButton]}
+			style={styles?.[UI.NextMonthButton]}
+			tabIndex={nextMonth ? undefined : -1}
+			aria-disabled={nextMonth ? undefined : true}
+			aria-label={labelNext(nextMonth)}
+			onClick={handleNextClick}
+		>
+			<components.Chevron
+				disabled={nextMonth ? undefined : true}
+				className={classNames[UI.Chevron]}
+				style={styles?.[UI.Chevron]}
+				orientation="right"
+			/>
+		</components.NextMonthButton>
+	</nav>
+}
+
+export function NextMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>) @{
+	<button {...props} />
+}
+export type NextMonthButtonProps = Parameters<typeof NextMonthButton>[0];
+export function PreviousMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>) @{
+	<button {...props} />
+}
+export type PreviousMonthButtonProps = Parameters<typeof PreviousMonthButton>[0];
+export function Option(props: OptionHTMLAttributes<HTMLOptionElement>) @{
+	<option {...props} />
+}
+export type OptionProps = Parameters<typeof Option>[0];
+export function Select(props: SelectHTMLAttributes<HTMLSelectElement>) @{
+	<select {...props} />
+}
+export type SelectProps = Parameters<typeof Select>[0];
+export type RootProps = { rootRef?: Ref<HTMLDivElement> } & HTMLAttributes<HTMLDivElement>;
+export function Root(props: RootProps) @{
+	const { rootRef, ...rest } = props;
+	<div {...rest} ref={rootRef} />
+}
+
+export type WeekProps = { week: CalendarWeek } & HTMLAttributes<HTMLTableRowElement>;
+export function Week(props: WeekProps) @{
+	const { week: _week, ...rowProps } = props;
+	<tr {...rowProps} />
+}
+export type WeekNumberProps = { week: CalendarWeek } & ThHTMLAttributes<HTMLTableCellElement>;
+export function WeekNumber(props: WeekNumberProps) @{
+	const { week: _week, ...cellProps } = props;
+	<th {...cellProps} />
+}
+export function WeekNumberHeader(props: ThHTMLAttributes<HTMLTableCellElement>) @{
+	<th {...props} />
+}
+export type WeekNumberHeaderProps = Parameters<typeof WeekNumberHeader>[0];
+export function Weekday(props: ThHTMLAttributes<HTMLTableCellElement>) @{
+	<th {...props} />
+}
+export type WeekdayProps = Parameters<typeof Weekday>[0];
+export function Weekdays(props: HTMLAttributes<HTMLTableRowElement>) @{
+	<thead aria-hidden>
+		<tr {...props} />
+	</thead>
+}
+export type WeekdaysProps = Parameters<typeof Weekdays>[0];
+export function Weeks(props: HTMLAttributes<HTMLTableSectionElement>) @{
+	<tbody {...props} />
+}
+export type WeeksProps = Parameters<typeof Weeks>[0];

package/src/formatters/formatCaption.ts

@@ -0,0 +1,18 @@
+import { DateLib, type DateLibOptions } from '../classes/DateLib.js';
+
+/**
+ * Formats the caption of the month.
+ *
+ * @defaultValue Locale-specific month/year order (e.g., "November 2022").
+ * @param month The date representing the month.
+ * @param options Configuration options for the date library.
+ * @param dateLib The date library to use for formatting. If not provided, a new
+ *   instance is created.
+ * @returns The formatted caption as a string.
+ * @group Formatters
+ * @see https://daypicker.dev/docs/translation#custom-formatters
+ */
+export function formatCaption(month: Date, options?: DateLibOptions, dateLib?: DateLib) {
+	const lib = dateLib ?? new DateLib(options);
+	return lib.formatMonthYear(month);
+}

package/src/formatters/formatDay.ts

@@ -0,0 +1,17 @@
+import { DateLib, type DateLibOptions } from '../classes/DateLib.js';
+
+/**
+ * Formats the day date shown in the day cell.
+ *
+ * @defaultValue `d` (e.g., "1").
+ * @param date The date to format.
+ * @param options Configuration options for the date library.
+ * @param dateLib The date library to use for formatting. If not provided, a new
+ *   instance is created.
+ * @returns The formatted day as a string.
+ * @group Formatters
+ * @see https://daypicker.dev/docs/translation#custom-formatters
+ */
+export function formatDay(date: Date, options?: DateLibOptions, dateLib?: DateLib) {
+	return (dateLib ?? new DateLib(options)).format(date, 'd');
+}

package/src/formatters/formatMonthDropdown.ts

@@ -0,0 +1,16 @@
+import { type DateLib, defaultDateLib } from '../classes/DateLib.js';
+
+/**
+ * Formats the month for the dropdown option label.
+ *
+ * @defaultValue The localized full month name.
+ * @param month The date representing the month.
+ * @param dateLib The date library to use for formatting. Defaults to
+ *   `defaultDateLib`.
+ * @returns The formatted month name as a string.
+ * @group Formatters
+ * @see https://daypicker.dev/docs/translation#custom-formatters
+ */
+export function formatMonthDropdown(month: Date, dateLib: DateLib = defaultDateLib): string {
+	return dateLib.format(month, 'LLLL');
+}

package/src/formatters/formatWeekNumber.ts

@@ -0,0 +1,19 @@
+import { defaultDateLib } from '../classes/DateLib.js';
+
+/**
+ * Formats the week number.
+ *
+ * @defaultValue The week number as a string, with a leading zero for single-digit numbers.
+ * @param weekNumber The week number to format.
+ * @param dateLib The date library to use for formatting. Defaults to
+ *   `defaultDateLib`.
+ * @returns The formatted week number as a string.
+ * @group Formatters
+ * @see https://daypicker.dev/docs/translation#custom-formatters
+ */
+export function formatWeekNumber(weekNumber: number, dateLib = defaultDateLib) {
+	if (weekNumber < 10) {
+		return dateLib.formatNumber(`0${weekNumber.toLocaleString()}`);
+	}
+	return dateLib.formatNumber(`${weekNumber.toLocaleString()}`);
+}

package/src/formatters/formatWeekNumberHeader.ts

@@ -0,0 +1,11 @@
+/**
+ * Formats the header for the week number column.
+ *
+ * @defaultValue An empty string `""`.
+ * @returns The formatted week number header as a string.
+ * @group Formatters
+ * @see https://daypicker.dev/docs/translation#custom-formatters
+ */
+export function formatWeekNumberHeader() {
+	return ``;
+}

package/src/formatters/formatWeekdayName.ts

@@ -0,0 +1,17 @@
+import { DateLib, type DateLibOptions } from '../classes/DateLib.js';
+
+/**
+ * Formats the name of a weekday to be displayed in the weekdays header.
+ *
+ * @defaultValue `cccccc` (e.g., "Mo" for Monday).
+ * @param weekday The date representing the weekday.
+ * @param options Configuration options for the date library.
+ * @param dateLib The date library to use for formatting. If not provided, a new
+ *   instance is created.
+ * @returns The formatted weekday name as a string.
+ * @group Formatters
+ * @see https://daypicker.dev/docs/translation#custom-formatters
+ */
+export function formatWeekdayName(weekday: Date, options?: DateLibOptions, dateLib?: DateLib) {
+	return (dateLib ?? new DateLib(options)).format(weekday, 'cccccc');
+}

package/src/formatters/formatYearDropdown.ts

@@ -0,0 +1,15 @@
+import { type DateLib, defaultDateLib } from '../classes/DateLib.js';
+
+/**
+ * Formats the year for the dropdown option label.
+ *
+ * @param year The year to format.
+ * @param dateLib The date library to use for formatting. Defaults to
+ *   `defaultDateLib`.
+ * @returns The formatted year as a string.
+ * @group Formatters
+ * @see https://daypicker.dev/docs/translation#custom-formatters
+ */
+export function formatYearDropdown(year: Date, dateLib: DateLib = defaultDateLib): string {
+	return dateLib.format(year, 'yyyy');
+}

package/src/formatters/index.ts

@@ -0,0 +1,7 @@
+export * from './formatCaption.js';
+export * from './formatDay.js';
+export * from './formatMonthDropdown.js';
+export * from './formatWeekdayName.js';
+export * from './formatWeekNumber.js';
+export * from './formatWeekNumberHeader.js';
+export * from './formatYearDropdown.js';

package/src/helpers/calculateFocusTarget.ts

@@ -0,0 +1,79 @@
+import type { CalendarDay } from '../classes/index.js';
+import type { Modifiers } from '../types/index.js';
+import { DayFlag } from '../UI.js';
+
+enum FocusTargetPriority {
+	Today = 0,
+	Selected,
+	LastFocused,
+	FocusedModifier,
+}
+
+/**
+ * Determines if a day is focusable based on its modifiers.
+ *
+ * A day is considered focusable if it is not disabled, hidden, or outside the
+ * displayed month.
+ *
+ * @param modifiers The modifiers applied to the day.
+ * @returns `true` if the day is focusable, otherwise `false`.
+ */
+function isFocusableDay(modifiers: Modifiers) {
+	return !modifiers[DayFlag.disabled] && !modifiers[DayFlag.hidden] && !modifiers[DayFlag.outside];
+}
+
+/**
+ * Calculates the focus target day based on priority.
+ *
+ * This function determines the day that should receive focus in the calendar,
+ * prioritizing days with specific modifiers (e.g., "focused", "today") or
+ * selection states.
+ *
+ * @param days The array of `CalendarDay` objects to evaluate.
+ * @param getModifiers A function to retrieve the modifiers for a given day.
+ * @param isSelected A function to determine if a day is selected.
+ * @param lastFocused The last focused day, if any.
+ * @returns The `CalendarDay` that should receive focus, or `undefined` if no
+ *   focusable day is found.
+ */
+export function calculateFocusTarget(
+	days: CalendarDay[],
+	getModifiers: (day: CalendarDay) => Modifiers,
+	isSelected: (date: Date) => boolean,
+	lastFocused: CalendarDay | undefined,
+): CalendarDay | undefined {
+	let focusTarget: CalendarDay | undefined;
+
+	let foundFocusTargetPriority: FocusTargetPriority | -1 = -1;
+	for (const day of days) {
+		const modifiers = getModifiers(day);
+
+		if (isFocusableDay(modifiers)) {
+			if (
+				modifiers[DayFlag.focused] &&
+				foundFocusTargetPriority < FocusTargetPriority.FocusedModifier
+			) {
+				focusTarget = day;
+				foundFocusTargetPriority = FocusTargetPriority.FocusedModifier;
+			} else if (
+				lastFocused?.isEqualTo(day) &&
+				foundFocusTargetPriority < FocusTargetPriority.LastFocused
+			) {
+				focusTarget = day;
+				foundFocusTargetPriority = FocusTargetPriority.LastFocused;
+			} else if (isSelected(day.date) && foundFocusTargetPriority < FocusTargetPriority.Selected) {
+				focusTarget = day;
+				foundFocusTargetPriority = FocusTargetPriority.Selected;
+			} else if (modifiers[DayFlag.today] && foundFocusTargetPriority < FocusTargetPriority.Today) {
+				focusTarget = day;
+				foundFocusTargetPriority = FocusTargetPriority.Today;
+			}
+		}
+	}
+
+	if (!focusTarget) {
+		// Return the first day that is focusable
+		focusTarget = days.find((day) => isFocusableDay(getModifiers(day)));
+	}
+	return focusTarget;
+}

package/src/helpers/createGetModifiers.ts

@@ -0,0 +1,117 @@
+import type { CalendarDay, DateLib } from '../classes/index.js';
+import type { DayPickerProps, Modifiers } from '../types/index.js';
+import { DayFlag } from '../UI.js';
+import { dateMatchModifiers } from '../utils/dateMatchModifiers.js';
+
+/**
+ * Creates a function to retrieve the modifiers for a given day.
+ *
+ * This function calculates both internal and custom modifiers for each day
+ * based on the provided calendar days and DayPicker props.
+ *
+ * @private
+ * @param days The array of `CalendarDay` objects to process.
+ * @param props The DayPicker props, including modifiers and configuration
+ *   options.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns A function that retrieves the modifiers for a given `CalendarDay`.
+ */
+export function createGetModifiers(
+	days: CalendarDay[],
+	props: DayPickerProps,
+	navStart: Date | undefined,
+	navEnd: Date | undefined,
+	dateLib: DateLib,
+) {
+	const {
+		disabled,
+		hidden,
+		modifiers,
+		showOutsideDays,
+		broadcastCalendar,
+		today = dateLib.today(),
+	} = props;
+
+	const { isSameDay, isSameMonth, startOfMonth, isBefore, endOfMonth, isAfter } = dateLib;
+
+	const computedNavStart = navStart && startOfMonth(navStart);
+	const computedNavEnd = navEnd && endOfMonth(navEnd);
+
+	const internalModifiersMap: Record<DayFlag, CalendarDay[]> = {
+		[DayFlag.focused]: [],
+		[DayFlag.outside]: [],
+		[DayFlag.disabled]: [],
+		[DayFlag.hidden]: [],
+		[DayFlag.today]: [],
+	};
+
+	const customModifiersMap: Record<string, CalendarDay[]> = {};
+
+	for (const day of days) {
+		const { date, displayMonth } = day;
+
+		const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
+
+		const isBeforeNavStart = Boolean(computedNavStart && isBefore(date, computedNavStart));
+
+		const isAfterNavEnd = Boolean(computedNavEnd && isAfter(date, computedNavEnd));
+
+		const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
+
+		const isHidden =
+			Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) ||
+			isBeforeNavStart ||
+			isAfterNavEnd ||
+			// Broadcast calendar will show outside days as default
+			(!broadcastCalendar && !showOutsideDays && isOutside) ||
+			(broadcastCalendar && showOutsideDays === false && isOutside);
+
+		const isToday = isSameDay(date, today);
+
+		if (isOutside) internalModifiersMap.outside.push(day);
+		if (isDisabled) internalModifiersMap.disabled.push(day);
+		if (isHidden) internalModifiersMap.hidden.push(day);
+		if (isToday) internalModifiersMap.today.push(day);
+
+		// Add custom modifiers
+		if (modifiers) {
+			Object.keys(modifiers).forEach((name) => {
+				const modifierValue = modifiers?.[name];
+				const isMatch = modifierValue ? dateMatchModifiers(date, modifierValue, dateLib) : false;
+				if (!isMatch) return;
+				if (customModifiersMap[name]) {
+					customModifiersMap[name].push(day);
+				} else {
+					customModifiersMap[name] = [day];
+				}
+			});
+		}
+	}
+
+	return (day: CalendarDay): Modifiers => {
+		// Initialize all the modifiers to false
+		const dayFlags: Record<DayFlag, boolean> = {
+			[DayFlag.focused]: false,
+			[DayFlag.disabled]: false,
+			[DayFlag.hidden]: false,
+			[DayFlag.outside]: false,
+			[DayFlag.today]: false,
+		};
+		const customModifiers: Modifiers = {};
+
+		// Find the modifiers for the given day
+		for (const name in internalModifiersMap) {
+			const days = internalModifiersMap[name as DayFlag];
+			dayFlags[name as DayFlag] = days.some((d) => d === day);
+		}
+		for (const name in customModifiersMap) {
+			customModifiers[name] = customModifiersMap[name].some((d) => d === day);
+		}
+
+		return {
+			...dayFlags,
+			// custom modifiers should override all the previous ones
+			...customModifiers,
+		};
+	};
+}

package/src/helpers/endOfBroadcastWeek.ts

@@ -0,0 +1,22 @@
+import type { DateLib } from '../classes/index.js';
+
+import { getBroadcastWeeksInMonth } from './getBroadcastWeeksInMonth.js';
+import { startOfBroadcastWeek } from './startOfBroadcastWeek.js';
+
+/**
+ * Returns the end date of the week in the broadcast calendar.
+ *
+ * The broadcast week ends on the last day of the last broadcast week for the
+ * given date.
+ *
+ * @since 9.4.0
+ * @param date The date for which to calculate the end of the broadcast week.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns The end date of the broadcast week.
+ */
+export function endOfBroadcastWeek(date: Date, dateLib: DateLib): Date {
+	const startDate = startOfBroadcastWeek(date, dateLib);
+	const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
+	const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
+	return endDate;
+}

package/src/helpers/getBroadcastWeeksInMonth.ts

@@ -0,0 +1,32 @@
+import type { DateLib } from '../classes/index.js';
+
+const FIVE_WEEKS = 5;
+const FOUR_WEEKS = 4;
+
+/**
+ * Returns the number of weeks to display in the broadcast calendar for a given
+ * month.
+ *
+ * The broadcast calendar may have either 4 or 5 weeks in a month, depending on
+ * the start and end dates of the broadcast weeks.
+ *
+ * @since 9.4.0
+ * @param month The month for which to calculate the number of weeks.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns The number of weeks in the broadcast calendar (4 or 5).
+ */
+export function getBroadcastWeeksInMonth(month: Date, dateLib: DateLib): 4 | 5 {
+	// Get the first day of the month
+	const firstDayOfMonth = dateLib.startOfMonth(month);
+
+	// Get the day of the week for the first day of the month (1-7, where 1 is Monday)
+	const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
+
+	const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
+
+	const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
+	const numberOfWeeks =
+		dateLib.getMonth(month) === dateLib.getMonth(lastDateOfLastWeek) ? FIVE_WEEKS : FOUR_WEEKS;
+
+	return numberOfWeeks;
+}

package/src/helpers/getClassNamesForModifiers.ts

@@ -0,0 +1,38 @@
+import type { ClassNames, ModifiersClassNames } from '../types/index.js';
+import { DayFlag, SelectionState, UI } from '../UI.js';
+
+/**
+ * Returns the class names for a day based on its modifiers.
+ *
+ * This function combines the base class name for the day with any class names
+ * associated with active modifiers.
+ *
+ * @param modifiers The modifiers applied to the day.
+ * @param classNames The base class names for the calendar elements.
+ * @param modifiersClassNames The class names associated with specific
+ *   modifiers.
+ * @returns An array of class names for the day.
+ */
+export function getClassNamesForModifiers(
+	modifiers: Record<string, boolean>,
+	classNames: ClassNames,
+	modifiersClassNames: ModifiersClassNames = {},
+): string[] {
+	const modifierClassNames = Object.entries(modifiers)
+		.filter(([, active]) => active === true)
+		.reduce(
+			(previousValue, [key]) => {
+				if (modifiersClassNames[key]) {
+					previousValue.push(modifiersClassNames[key as string]);
+				} else if (classNames[DayFlag[key as DayFlag]]) {
+					previousValue.push(classNames[DayFlag[key as DayFlag]]);
+				} else if (classNames[SelectionState[key as SelectionState]]) {
+					previousValue.push(classNames[SelectionState[key as SelectionState]]);
+				}
+				return previousValue;
+			},
+			[classNames[UI.Day]] as string[],
+		);
+
+	return modifierClassNames;
+}

package/src/helpers/getComponents.ts

@@ -0,0 +1,19 @@
+import * as components from '../components/custom-components.tsrx';
+import type { CustomComponents, DayPickerProps } from '../types/index.js';
+
+/**
+ * Merges custom components from the props with the default components.
+ *
+ * This function ensures that any custom components provided in the props
+ * override the default components.
+ *
+ * @param customComponents The custom components provided in the DayPicker
+ *   props.
+ * @returns An object containing the merged components.
+ */
+export function getComponents(customComponents: DayPickerProps['components']): CustomComponents {
+	return {
+		...components,
+		...customComponents,
+	};
+}