@octanejs/day-picker 0.0.1

package/src/helpers/getPreviousMonth.ts

@@ -0,0 +1,45 @@
+import type { DateLib } from '../classes/DateLib.js';
+import type { DayPickerProps } from '../types/index.js';
+
+/**
+ * Returns the previous month the user can navigate to, based on the given
+ * options.
+ *
+ * The previous month is not always the previous calendar month:
+ *
+ * - If it is before the `calendarStartMonth`, it returns `undefined`.
+ * - If paged navigation is enabled, it skips back by the number of displayed
+ *   months.
+ *
+ * @param firstDisplayedMonth The first month currently displayed in the
+ *   calendar.
+ * @param calendarStartMonth The earliest month the user can navigate to.
+ * @param options Navigation options, including `numberOfMonths` and
+ *   `pagedNavigation`.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns The previous month, or `undefined` if navigation is not possible.
+ */
+export function getPreviousMonth(
+	firstDisplayedMonth: Date,
+	calendarStartMonth: Date | undefined,
+	options: Pick<DayPickerProps, 'numberOfMonths' | 'pagedNavigation' | 'disableNavigation'>,
+	dateLib: DateLib,
+): Date | undefined {
+	if (options.disableNavigation) {
+		return undefined;
+	}
+	const { pagedNavigation, numberOfMonths } = options;
+	const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
+	const offset = pagedNavigation ? (numberOfMonths ?? 1) : 1;
+	const month = startOfMonth(firstDisplayedMonth);
+	if (!calendarStartMonth) {
+		return addMonths(month, -offset);
+	}
+	const monthsDiff = differenceInCalendarMonths(month, calendarStartMonth);
+
+	if (monthsDiff <= 0) {
+		return undefined;
+	}
+
+	return addMonths(month, -offset);
+}

package/src/helpers/getStyleForModifiers.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from 'react';
+import type { Modifiers, ModifiersStyles, Styles } from '../types/index.js';
+import { UI } from '../UI.js';
+
+/**
+ * Returns the computed style for a day based on its modifiers.
+ *
+ * This function merges the base styles for the day with any styles associated
+ * with active modifiers.
+ *
+ * @param dayModifiers The modifiers applied to the day.
+ * @param styles The base styles for the calendar elements.
+ * @param modifiersStyles The styles associated with specific modifiers.
+ * @returns The computed style for the day.
+ */
+export function getStyleForModifiers(
+	dayModifiers: Modifiers,
+	styles: Partial<Styles> = {},
+	modifiersStyles: Partial<ModifiersStyles> = {},
+): CSSProperties {
+	let style: CSSProperties = { ...styles?.[UI.Day] };
+	Object.entries(dayModifiers)
+		.filter(([, active]) => active === true)
+		.forEach(([modifier]) => {
+			style = {
+				...style,
+				...modifiersStyles?.[modifier],
+			};
+		});
+	return style;
+}

package/src/helpers/getWeekdays.ts

@@ -0,0 +1,33 @@
+import type { DateLib } from '../classes/DateLib.js';
+
+/**
+ * Generates a series of 7 days, starting from the beginning of the week, to use
+ * for formatting weekday names (e.g., Monday, Tuesday, etc.).
+ *
+ * @param dateLib The date library to use for date manipulation.
+ * @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
+ * @param broadcastCalendar Whether to use the broadcast calendar (weeks start
+ *   on Monday, but may include adjustments for broadcast-specific rules).
+ * @returns An array of 7 dates representing the weekdays.
+ */
+export function getWeekdays(
+	dateLib: DateLib,
+	ISOWeek?: boolean | undefined,
+	broadcastCalendar?: boolean | undefined,
+	today?: Date,
+): Date[] {
+	const referenceToday = today ?? dateLib.today();
+
+	const start = broadcastCalendar
+		? dateLib.startOfBroadcastWeek(referenceToday, dateLib)
+		: ISOWeek
+			? dateLib.startOfISOWeek(referenceToday)
+			: dateLib.startOfWeek(referenceToday);
+
+	const days: Date[] = [];
+	for (let i = 0; i < 7; i++) {
+		const day = dateLib.addDays(start, i);
+		days.push(day);
+	}
+	return days;
+}

package/src/helpers/getWeeks.ts

@@ -0,0 +1,14 @@
+import type { CalendarMonth, CalendarWeek } from '../classes/index.js';
+
+/**
+ * Returns an array of calendar weeks from an array of calendar months.
+ *
+ * @param months The array of calendar months.
+ * @returns An array of calendar weeks.
+ */
+export function getWeeks(months: CalendarMonth[]) {
+	const initialWeeks: CalendarWeek[] = [];
+	return months.reduce((weeks, month) => {
+		return weeks.concat(month.weeks.slice());
+	}, initialWeeks.slice());
+}

package/src/helpers/getYearOptions.ts

@@ -0,0 +1,43 @@
+import type { DateLib } from '../classes/DateLib.js';
+import type { DropdownOption } from '../components/custom-components.tsrx';
+import type { Formatters } from '../types/index.js';
+
+/**
+ * Returns the years to display in the dropdown.
+ *
+ * This function generates a list of years between the navigation start and end
+ * dates, formatted using the provided formatter.
+ *
+ * @param navStart The start date for navigation.
+ * @param navEnd The end date for navigation.
+ * @param formatters The formatters to use for formatting the year labels.
+ * @param dateLib The date library to use for date manipulation.
+ * @param reverse If true, reverses the order of the years (descending).
+ * @returns An array of dropdown options representing the years, or `undefined`
+ *   if `navStart` or `navEnd` is not provided.
+ */
+export function getYearOptions(
+	navStart: Date | undefined,
+	navEnd: Date | undefined,
+	formatters: Pick<Formatters, 'formatYearDropdown'>,
+	dateLib: DateLib,
+	reverse: boolean = false,
+): DropdownOption[] | undefined {
+	if (!navStart) return undefined;
+	if (!navEnd) return undefined;
+	const { startOfYear, endOfYear, eachYearOfInterval, getYear } = dateLib;
+	const firstNavYear = startOfYear(navStart);
+	const lastNavYear = endOfYear(navEnd);
+	const years = eachYearOfInterval({ start: firstNavYear, end: lastNavYear });
+
+	if (reverse) years.reverse();
+
+	return years.map((year) => {
+		const label = formatters.formatYearDropdown(year, dateLib);
+		return {
+			value: getYear(year),
+			label,
+			disabled: false,
+		};
+	});
+}

package/src/helpers/index.ts

@@ -0,0 +1,2 @@
+// Only export helpers that can be useful to other developers.
+export * from './getDefaultClassNames.js';

package/src/helpers/startOfBroadcastWeek.ts

@@ -0,0 +1,26 @@
+import type { DateLib } from '../classes/index.js';
+
+/**
+ * Returns the start date of the week in the broadcast calendar.
+ *
+ * The broadcast week starts on Monday. If the first day of the month is not a
+ * Monday, this function calculates the previous Monday as the start of the
+ * broadcast week.
+ *
+ * @since 9.4.0
+ * @param date The date for which to calculate the start of the broadcast week.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns The start date of the broadcast week.
+ */
+export function startOfBroadcastWeek(date: Date, dateLib: DateLib): Date {
+	const firstOfMonth = dateLib.startOfMonth(date);
+	const dayOfWeek = firstOfMonth.getDay();
+
+	if (dayOfWeek === 1) {
+		return firstOfMonth;
+	} else if (dayOfWeek === 0) {
+		return dateLib.addDays(firstOfMonth, -1 * 6);
+	} else {
+		return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
+	}
+}

package/src/helpers/useControlledValue.ts

@@ -0,0 +1,38 @@
+import { useState } from 'octane';
+import type React from 'react';
+
+export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
+
+/**
+ * A custom hook for managing both controlled and uncontrolled component states.
+ *
+ * This hook allows a component to support both controlled and uncontrolled
+ * states by determining whether the `controlledValue` is provided. If it is
+ * undefined, the hook falls back to using the internal state.
+ *
+ * @example
+ *   // Uncontrolled usage
+ *   const [value, setValue] = useControlledValue(0, undefined);
+ *
+ *   // Controlled usage
+ *   const [value, setValue] = useControlledValue(0, props.value);
+ *
+ * @template T - The type of the value.
+ * @param defaultValue The initial value for the uncontrolled state.
+ * @param controlledValue The value for the controlled state. If undefined, the
+ *   component will use the uncontrolled state.
+ * @returns A tuple where the first element is the current value (either
+ *   controlled or uncontrolled) and the second element is a setter function to
+ *   update the value.
+ */
+export function useControlledValue<T>(
+	defaultValue: T,
+	controlledValue: T | undefined,
+	slot?: symbol,
+): [T, DispatchStateAction<T>] {
+	const [uncontrolledValue, setValue] = useState(defaultValue, slot);
+
+	const value = controlledValue === undefined ? uncontrolledValue : controlledValue;
+
+	return [value, setValue] as [T, DispatchStateAction<T>];
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+export { TZDate } from '@date-fns/tz';
+export * from './classes/index.js';
+export * from './components/custom-components.tsrx';
+export * from './DayPicker.tsrx';
+
+export * from './formatters/index.js';
+export * from './helpers/index.js';
+export * from './labels/index.js';
+export * from './types/index.js';
+export * from './UI.js';
+
+export * from './useDayPicker.js';
+export * from './utils/index.js';

package/src/labels/index.ts

@@ -0,0 +1,12 @@
+export * from './labelDayButton.js';
+export * from './labelGrid.js';
+export * from './labelGrid.js';
+export * from './labelGridcell.js';
+export * from './labelMonthDropdown.js';
+export * from './labelNav.js';
+export * from './labelNext.js';
+export * from './labelPrevious.js';
+export * from './labelWeekday.js';
+export * from './labelWeekNumber.js';
+export * from './labelWeekNumberHeader.js';
+export * from './labelYearDropdown.js';

package/src/labels/labelDayButton.ts

@@ -0,0 +1,29 @@
+import { DateLib, type DateLibOptions } from '../classes/DateLib.js';
+import type { Modifiers } from '../types/index.js';
+
+/**
+ * Generates the ARIA label for a day button.
+ *
+ * Use the `modifiers` argument to provide additional context for the label,
+ * such as indicating if the day is "today" or "selected."
+ *
+ * @defaultValue The formatted date.
+ * @param date - The date to format.
+ * @param modifiers - The modifiers providing context for the day.
+ * @param options - Optional configuration for the date formatting library.
+ * @param dateLib - An optional instance of the date formatting library.
+ * @returns The ARIA label for the day button.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelDayButton(
+	date: Date,
+	modifiers: Modifiers,
+	options?: DateLibOptions,
+	dateLib?: DateLib,
+) {
+	let label = (dateLib ?? new DateLib(options)).format(date, 'PPPP');
+	if (modifiers.today) label = `Today, ${label}`;
+	if (modifiers.selected) label = `${label}, selected`;
+	return label;
+}

package/src/labels/labelGrid.ts

@@ -0,0 +1,18 @@
+import { DateLib, type DateLibOptions } from '../classes/DateLib.js';
+
+/**
+ * Generates the ARIA label for the month grid, which is announced when entering
+ * the grid.
+ *
+ * @defaultValue Locale-specific month/year order (e.g., "November 2022").
+ * @param date - The date representing the month.
+ * @param options - Optional configuration for the date formatting library.
+ * @param dateLib - An optional instance of the date formatting library.
+ * @returns The ARIA label for the month grid.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelGrid(date: Date, options?: DateLibOptions, dateLib?: DateLib) {
+	const lib = dateLib ?? new DateLib(options);
+	return lib.formatMonthYear(date);
+}

package/src/labels/labelGridcell.ts

@@ -0,0 +1,26 @@
+import { DateLib, type DateLibOptions } from '../classes/DateLib.js';
+import type { Modifiers } from '../types/index.js';
+
+/**
+ * Generates the label for a day grid cell when the calendar is not interactive.
+ *
+ * @param date - The date to format.
+ * @param modifiers - Optional modifiers providing context for the day.
+ * @param options - Optional configuration for the date formatting library.
+ * @param dateLib - An optional instance of the date formatting library.
+ * @returns The label for the day grid cell.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelGridcell(
+	date: Date,
+	modifiers?: Modifiers,
+	options?: DateLibOptions,
+	dateLib?: DateLib,
+) {
+	let label = (dateLib ?? new DateLib(options)).format(date, 'PPPP');
+	if (modifiers?.today) {
+		label = `Today, ${label}`;
+	}
+	return label;
+}

package/src/labels/labelMonthDropdown.ts

@@ -0,0 +1,14 @@
+import type { DateLibOptions } from '../classes/DateLib.js';
+
+/**
+ * Generates the ARIA label for the months dropdown.
+ *
+ * @defaultValue `"Choose the Month"`
+ * @param options - Optional configuration for the date formatting library.
+ * @returns The ARIA label for the months dropdown.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelMonthDropdown(_options?: DateLibOptions) {
+	return 'Choose the Month';
+}

package/src/labels/labelNav.ts

@@ -0,0 +1,11 @@
+/**
+ * Generates the ARIA label for the navigation toolbar.
+ *
+ * @defaultValue `""`
+ * @returns The ARIA label for the navigation toolbar.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelNav(): string {
+	return '';
+}

package/src/labels/labelNext.ts

@@ -0,0 +1,17 @@
+import type { DateLibOptions } from '../classes/DateLib.js';
+
+const defaultLabel = 'Go to the Next Month';
+
+/**
+ * Generates the ARIA label for the "next month" button.
+ *
+ * @defaultValue `"Go to the Next Month"`
+ * @param month - The date representing the next month, or `undefined` if there
+ *   is no next month.
+ * @returns The ARIA label for the "next month" button.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelNext(_month: Date | undefined, _options?: DateLibOptions) {
+	return defaultLabel;
+}

package/src/labels/labelPrevious.ts

@@ -0,0 +1,13 @@
+/**
+ * Generates the ARIA label for the "previous month" button.
+ *
+ * @defaultValue `"Go to the Previous Month"`
+ * @param month - The date representing the previous month, or `undefined` if
+ *   there is no previous month.
+ * @returns The ARIA label for the "previous month" button.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelPrevious(_month: Date | undefined) {
+	return 'Go to the Previous Month';
+}

package/src/labels/labelWeekNumber.ts

@@ -0,0 +1,15 @@
+import type { DateLibOptions } from '../classes/DateLib.js';
+
+/**
+ * Generates the ARIA label for the week number cell (the first cell in a row).
+ *
+ * @defaultValue `Week ${weekNumber}`
+ * @param weekNumber - The number of the week.
+ * @param options - Optional configuration for the date formatting library.
+ * @returns The ARIA label for the week number cell.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelWeekNumber(weekNumber: number, _options?: DateLibOptions): string {
+	return `Week ${weekNumber}`;
+}

package/src/labels/labelWeekNumberHeader.ts

@@ -0,0 +1,14 @@
+import type { DateLibOptions } from '../classes/DateLib.js';
+
+/**
+ * Generates the ARIA label for the week number header element.
+ *
+ * @defaultValue `"Week Number"`
+ * @param options - Optional configuration for the date formatting library.
+ * @returns The ARIA label for the week number header.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelWeekNumberHeader(_options?: DateLibOptions): string {
+	return 'Week Number';
+}

package/src/labels/labelWeekday.ts

@@ -0,0 +1,16 @@
+import { DateLib, type DateLibOptions } from '../classes/DateLib.js';
+
+/**
+ * Generates the ARIA label for a weekday column header.
+ *
+ * @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
+ * @param date - The date representing the weekday.
+ * @param options - Optional configuration for the date formatting library.
+ * @param dateLib - An optional instance of the date formatting library.
+ * @returns The ARIA label for the weekday column header.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelWeekday(date: Date, options?: DateLibOptions, dateLib?: DateLib): string {
+	return (dateLib ?? new DateLib(options)).format(date, 'cccc');
+}

package/src/labels/labelYearDropdown.ts

@@ -0,0 +1,14 @@
+import type { DateLibOptions } from '../classes/DateLib.js';
+
+/**
+ * Generates the ARIA label for the years dropdown.
+ *
+ * @defaultValue `"Choose the Year"`
+ * @param options - Optional configuration for the date formatting library.
+ * @returns The ARIA label for the years dropdown.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelYearDropdown(_options?: DateLibOptions) {
+	return 'Choose the Year';
+}

package/src/locale/af.ts

@@ -0,0 +1,48 @@
+import { af as dateFnsAf } from 'date-fns/locale';
+
+import type { DateLibOptions, DayPickerLocale } from '../classes/DateLib.js';
+import { DateLib } from '../classes/DateLib.js';
+import type { Modifiers } from '../types/index.js';
+
+/** Afrikaans locale extended with DayPicker-specific translations. */
+export const af: DayPickerLocale = {
+	...dateFnsAf,
+	labels: {
+		labelDayButton: (
+			date: Date,
+			modifiers: Modifiers,
+			options?: DateLibOptions,
+			dateLib?: DateLib,
+		) => {
+			const lib = dateLib ?? new DateLib(options);
+			let label = lib.format(date, 'PPPP');
+			if (modifiers.today) label = `Vandag, ${label}`;
+			if (modifiers.selected) label = `${label}, gekies`;
+			return label;
+		},
+		labelMonthDropdown: 'Kies die maand',
+		labelNext: 'Gaan na volgende maand',
+		labelPrevious: 'Gaan na vorige maand',
+		labelWeekNumber: (weekNumber: number) => `Week ${weekNumber}`,
+		labelYearDropdown: 'Kies die jaar',
+		labelGrid: (date: Date, options?: DateLibOptions, dateLib?: DateLib) =>
+			(dateLib ?? new DateLib(options)).formatMonthYear(date),
+		labelGridcell: (
+			date: Date,
+			modifiers?: Modifiers,
+			options?: DateLibOptions,
+			dateLib?: DateLib,
+		) => {
+			const lib = dateLib ?? new DateLib(options);
+			let label = lib.format(date, 'PPPP');
+			if (modifiers?.today) {
+				label = `Vandag, ${label}`;
+			}
+			return label;
+		},
+		labelNav: 'Navigasiebalk',
+		labelWeekNumberHeader: 'Weeknommer',
+		labelWeekday: (date: Date, options?: DateLibOptions, dateLib?: DateLib) =>
+			(dateLib ?? new DateLib(options)).format(date, 'cccc'),
+	},
+};

package/src/locale/ar-DZ.ts

@@ -0,0 +1,48 @@
+import { arDZ as dateFnsArDZ } from 'date-fns/locale';
+
+import type { DateLibOptions, DayPickerLocale } from '../classes/DateLib.js';
+import { DateLib } from '../classes/DateLib.js';
+import type { Modifiers } from '../types/index.js';
+
+/** Arabic (Algeria) locale extended with DayPicker-specific translations. */
+export const arDZ: DayPickerLocale = {
+	...dateFnsArDZ,
+	labels: {
+		labelDayButton: (
+			date: Date,
+			modifiers: Modifiers,
+			options?: DateLibOptions,
+			dateLib?: DateLib,
+		) => {
+			const lib = dateLib ?? new DateLib(options);
+			let label = lib.format(date, 'PPPP');
+			if (modifiers.today) label = `اليوم، ${label}`;
+			if (modifiers.selected) label = `${label}، محدد`;
+			return label;
+		},
+		labelMonthDropdown: 'اختر الشهر',
+		labelNext: 'اذهب إلى الشهر التالي',
+		labelPrevious: 'اذهب إلى الشهر السابق',
+		labelWeekNumber: (weekNumber: number) => `الأسبوع ${weekNumber}`,
+		labelYearDropdown: 'اختر السنة',
+		labelGrid: (date: Date, options?: DateLibOptions, dateLib?: DateLib) =>
+			(dateLib ?? new DateLib(options)).formatMonthYear(date),
+		labelGridcell: (
+			date: Date,
+			modifiers?: Modifiers,
+			options?: DateLibOptions,
+			dateLib?: DateLib,
+		) => {
+			const lib = dateLib ?? new DateLib(options);
+			let label = lib.format(date, 'PPPP');
+			if (modifiers?.today) {
+				label = `اليوم، ${label}`;
+			}
+			return label;
+		},
+		labelNav: 'شريط التنقل',
+		labelWeekNumberHeader: 'رقم الأسبوع',
+		labelWeekday: (date: Date, options?: DateLibOptions, dateLib?: DateLib) =>
+			(dateLib ?? new DateLib(options)).format(date, 'cccc'),
+	},
+};

package/src/locale/ar-EG.ts

@@ -0,0 +1,48 @@
+import { arEG as dateFnsArEG } from 'date-fns/locale';
+
+import type { DateLibOptions, DayPickerLocale } from '../classes/DateLib.js';
+import { DateLib } from '../classes/DateLib.js';
+import type { Modifiers } from '../types/index.js';
+
+/** Arabic (Egypt) locale extended with DayPicker-specific translations. */
+export const arEG: DayPickerLocale = {
+	...dateFnsArEG,
+	labels: {
+		labelDayButton: (
+			date: Date,
+			modifiers: Modifiers,
+			options?: DateLibOptions,
+			dateLib?: DateLib,
+		) => {
+			const lib = dateLib ?? new DateLib(options);
+			let label = lib.format(date, 'PPPP');
+			if (modifiers.today) label = `اليوم، ${label}`;
+			if (modifiers.selected) label = `${label}، محدد`;
+			return label;
+		},
+		labelMonthDropdown: 'اختر الشهر',
+		labelNext: 'اذهب إلى الشهر التالي',
+		labelPrevious: 'اذهب إلى الشهر السابق',
+		labelWeekNumber: (weekNumber: number) => `الأسبوع ${weekNumber}`,
+		labelYearDropdown: 'اختر السنة',
+		labelGrid: (date: Date, options?: DateLibOptions, dateLib?: DateLib) =>
+			(dateLib ?? new DateLib(options)).formatMonthYear(date),
+		labelGridcell: (
+			date: Date,
+			modifiers?: Modifiers,
+			options?: DateLibOptions,
+			dateLib?: DateLib,
+		) => {
+			const lib = dateLib ?? new DateLib(options);
+			let label = lib.format(date, 'PPPP');
+			if (modifiers?.today) {
+				label = `اليوم، ${label}`;
+			}
+			return label;
+		},
+		labelNav: 'شريط التنقل',
+		labelWeekNumberHeader: 'رقم الأسبوع',
+		labelWeekday: (date: Date, options?: DateLibOptions, dateLib?: DateLib) =>
+			(dateLib ?? new DateLib(options)).format(date, 'cccc'),
+	},
+};

package/src/locale/ar-MA.ts

@@ -0,0 +1,48 @@
+import { arMA as dateFnsArMA } from 'date-fns/locale';
+
+import type { DateLibOptions, DayPickerLocale } from '../classes/DateLib.js';
+import { DateLib } from '../classes/DateLib.js';
+import type { Modifiers } from '../types/index.js';
+
+/** Arabic (Morocco) locale extended with DayPicker-specific translations. */
+export const arMA: DayPickerLocale = {
+	...dateFnsArMA,
+	labels: {
+		labelDayButton: (
+			date: Date,
+			modifiers: Modifiers,
+			options?: DateLibOptions,
+			dateLib?: DateLib,
+		) => {
+			const lib = dateLib ?? new DateLib(options);
+			let label = lib.format(date, 'PPPP');
+			if (modifiers.today) label = `اليوم، ${label}`;
+			if (modifiers.selected) label = `${label}، محدد`;
+			return label;
+		},
+		labelMonthDropdown: 'اختر الشهر',
+		labelNext: 'اذهب إلى الشهر التالي',
+		labelPrevious: 'اذهب إلى الشهر السابق',
+		labelWeekNumber: (weekNumber: number) => `الأسبوع ${weekNumber}`,
+		labelYearDropdown: 'اختر السنة',
+		labelGrid: (date: Date, options?: DateLibOptions, dateLib?: DateLib) =>
+			(dateLib ?? new DateLib(options)).formatMonthYear(date),
+		labelGridcell: (
+			date: Date,
+			modifiers?: Modifiers,
+			options?: DateLibOptions,
+			dateLib?: DateLib,
+		) => {
+			const lib = dateLib ?? new DateLib(options);
+			let label = lib.format(date, 'PPPP');
+			if (modifiers?.today) {
+				label = `اليوم، ${label}`;
+			}
+			return label;
+		},
+		labelNav: 'شريط التنقل',
+		labelWeekNumberHeader: 'رقم الأسبوع',
+		labelWeekday: (date: Date, options?: DateLibOptions, dateLib?: DateLib) =>
+			(dateLib ?? new DateLib(options)).format(date, 'cccc'),
+	},
+};