@octanejs/day-picker 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/day-picker",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
@@ -53,14 +53,14 @@
     "date-fns": "^4.1.0"
   },
   "peerDependencies": {
-    "octane": "^0.10.0"
+    "octane": "^0.12.0"
   },
   "devDependencies": {
-    "@octanejs/testing-library": "0.1.60",
-    "@tsrx/react": "^0.3.7",
+    "@octanejs/testing-library": "0.1.62",
+    "@tsrx/react": "^0.4.5",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "octane": "0.10.2",
+    "octane": "0.12.0",
     "playwright": "^1.61.1",
     "react": "19.2.7",
     "react-dom": "19.2.7",

package/src/DayPicker.tsrx

@@ -110,17 +110,20 @@ export function DayPicker(initialProps: DayPickerProps) @{
 		const overrides =
 			props.dateLib && noonOverrides
 				? { ...noonOverrides, ...props.dateLib }
-				: props.dateLib ?? noonOverrides;
-
-		const dateLib = new DateLib({
-			locale,
-			weekStartsOn,
-			firstWeekContainsDate: props.firstWeekContainsDate,
-			useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
-			useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
-			timeZone: props.timeZone,
-			numerals: props.numerals,
-		}, overrides);
+				: (props.dateLib ?? noonOverrides);
+
+		const dateLib = new DateLib(
+			{
+				locale,
+				weekStartsOn,
+				firstWeekContainsDate: props.firstWeekContainsDate,
+				useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+				useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
+				timeZone: props.timeZone,
+				numerals: props.numerals,
+			},
+			overrides,
+		);
 
 		return {
 			dateLib,
@@ -198,12 +201,15 @@ export function DayPicker(initialProps: DayPickerProps) @{
 		formatYearDropdown,
 	} = formatters;
 
-	const calendar = useCalendar(props, dateLib, monthIsControlled ? undefined : uncontrolledMonth, (
-		month,
-	) => {
-		setUncontrolledMonth(month);
-		props.onMonthChange?.(month);
-	});
+	const calendar = useCalendar(
+		props,
+		dateLib,
+		monthIsControlled ? undefined : uncontrolledMonth,
+		(month) => {
+			setUncontrolledMonth(month);
+			props.onMonthChange?.(month);
+		},
+	);
 
 	const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth } = calendar;
 
@@ -403,7 +409,7 @@ export function DayPicker(initialProps: DayPickerProps) @{
 			{...dataAttributes}
 		>
 			<components.Months className={classNames[UI.Months]} style={styles?.[UI.Months]}>
-				{!props.hideNavigation && !navLayout &&
+				{!props.hideNavigation && !navLayout && (
 					<components.Nav
 						data-animated-nav={props.animate ? 'true' : undefined}
 						className={classNames[UI.Nav]}
@@ -413,95 +419,98 @@ export function DayPicker(initialProps: DayPickerProps) @{
 						onNextClick={handleNextClick}
 						previousMonth={previousMonth}
 						nextMonth={nextMonth}
-					/>}
+					/>
+				)}
 				{months.map((calendarMonth, displayIndex) => {
 					const monthOffset = props.reverseMonths ? months.length - 1 - displayIndex : displayIndex;
 
-					return <components.Month
-						data-animated-month={props.animate ? 'true' : undefined}
-						className={classNames[UI.Month]}
-						style={styles?.[UI.Month]}
-						// biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
-						key={displayIndex}
-						displayIndex={displayIndex}
-						calendarMonth={calendarMonth}
-					>
-						{navLayout === 'around' && !props.hideNavigation && displayIndex === 0 &&
-							<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}
-								data-animated-button={props.animate ? 'true' : undefined}
-							>
-								<components.Chevron
-									disabled={previousMonth ? undefined : true}
-									className={classNames[UI.Chevron]}
-									style={styles?.[UI.Chevron]}
-									orientation={props.dir === 'rtl' ? 'right' : 'left'}
-								/>
-							</components.PreviousMonthButton>}
-						<components.MonthCaption
-							data-animated-caption={props.animate ? 'true' : undefined}
-							className={classNames[UI.MonthCaption]}
-							style={styles?.[UI.MonthCaption]}
-							calendarMonth={calendarMonth}
+					return (
+						<components.Month
+							data-animated-month={props.animate ? 'true' : undefined}
+							className={classNames[UI.Month]}
+							style={styles?.[UI.Month]}
+							// biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
+							key={displayIndex}
 							displayIndex={displayIndex}
+							calendarMonth={calendarMonth}
 						>
-							{captionLayout?.startsWith('dropdown')
-								? <components.DropdownNav
+							{navLayout === 'around' && !props.hideNavigation && displayIndex === 0 && (
+								<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}
+									data-animated-button={props.animate ? 'true' : undefined}
+								>
+									<components.Chevron
+										disabled={previousMonth ? undefined : true}
+										className={classNames[UI.Chevron]}
+										style={styles?.[UI.Chevron]}
+										orientation={props.dir === 'rtl' ? 'right' : 'left'}
+									/>
+								</components.PreviousMonthButton>
+							)}
+							<components.MonthCaption
+								data-animated-caption={props.animate ? 'true' : undefined}
+								className={classNames[UI.MonthCaption]}
+								style={styles?.[UI.MonthCaption]}
+								calendarMonth={calendarMonth}
+								displayIndex={displayIndex}
+							>
+								{captionLayout?.startsWith('dropdown') ? (
+									<components.DropdownNav
 										className={classNames[UI.Dropdowns]}
 										style={styles?.[UI.Dropdowns]}
 									>
 										{(() => {
 											const monthControl =
-												captionLayout === 'dropdown' || captionLayout === 'dropdown-months'
-													? <components.MonthsDropdown
-															key="month"
-															className={classNames[UI.MonthsDropdown]}
-															aria-label={labelMonthDropdown()}
-															disabled={Boolean(props.disableNavigation)}
-															onChange={handleMonthChange(calendarMonth.date, monthOffset)}
-															options={getMonthOptions(
-																calendarMonth.date,
-																navStart,
-																navEnd,
-																formatters,
-																dateLib,
-															)}
-															style={getDropdownStyle(UI.MonthsDropdown)}
-															value={dateLib.getMonth(calendarMonth.date)}
-														/>
-													: <span key="month">{formatMonthDropdown(
+												captionLayout === 'dropdown' || captionLayout === 'dropdown-months' ? (
+													<components.MonthsDropdown
+														key="month"
+														className={classNames[UI.MonthsDropdown]}
+														aria-label={labelMonthDropdown()}
+														disabled={Boolean(props.disableNavigation)}
+														onChange={handleMonthChange(calendarMonth.date, monthOffset)}
+														options={getMonthOptions(
 															calendarMonth.date,
+															navStart,
+															navEnd,
+															formatters,
 															dateLib,
-														)}</span>;
+														)}
+														style={getDropdownStyle(UI.MonthsDropdown)}
+														value={dateLib.getMonth(calendarMonth.date)}
+													/>
+												) : (
+													<span key="month">
+														{formatMonthDropdown(calendarMonth.date, dateLib)}
+													</span>
+												);
 
 											const yearControl =
-												captionLayout === 'dropdown' || captionLayout === 'dropdown-years'
-													? <components.YearsDropdown
-															key="year"
-															className={classNames[UI.YearsDropdown]}
-															aria-label={labelYearDropdown(dateLib.options)}
-															disabled={Boolean(props.disableNavigation)}
-															onChange={handleYearChange(calendarMonth.date, monthOffset)}
-															options={getYearOptions(
-																navStart,
-																navEnd,
-																formatters,
-																dateLib,
-																Boolean(props.reverseYears),
-															)}
-															style={getDropdownStyle(UI.YearsDropdown)}
-															value={dateLib.getYear(calendarMonth.date)}
-														/>
-													: <span key="year">{formatYearDropdown(
-															calendarMonth.date,
+												captionLayout === 'dropdown' || captionLayout === 'dropdown-years' ? (
+													<components.YearsDropdown
+														key="year"
+														className={classNames[UI.YearsDropdown]}
+														aria-label={labelYearDropdown(dateLib.options)}
+														disabled={Boolean(props.disableNavigation)}
+														onChange={handleYearChange(calendarMonth.date, monthOffset)}
+														options={getYearOptions(
+															navStart,
+															navEnd,
+															formatters,
 															dateLib,
-														)}</span>;
+															Boolean(props.reverseYears),
+														)}
+														style={getDropdownStyle(UI.YearsDropdown)}
+														value={dateLib.getYear(calendarMonth.date)}
+													/>
+												) : (
+													<span key="year">{formatYearDropdown(calendarMonth.date, dateLib)}</span>
+												);
 
 											const controls =
 												dateLib.getMonthYearOrder() === 'year-first'
@@ -525,195 +534,235 @@ export function DayPicker(initialProps: DayPickerProps) @{
 												whiteSpace: 'nowrap',
 												wordWrap: 'normal',
 											}}
-										>{formatCaption(calendarMonth.date, dateLib.options, dateLib)}</span>
+										>
+											{formatCaption(calendarMonth.date, dateLib.options, dateLib)}
+										</span>
 									</components.DropdownNav>
-								: <components.CaptionLabel
+								) : (
+									<components.CaptionLabel
 										className={classNames[UI.CaptionLabel]}
 										style={styles?.[UI.CaptionLabel]}
 										role="status"
 										aria-live="polite"
-									>{formatCaption(
-										calendarMonth.date,
-										dateLib.options,
-										dateLib,
-									)}</components.CaptionLabel>}
-						</components.MonthCaption>
-						{navLayout === 'around' && !props.hideNavigation &&
-							displayIndex === numberOfMonths - 1 &&
-							<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}
-								data-animated-button={props.animate ? 'true' : undefined}
+									>
+										{formatCaption(calendarMonth.date, dateLib.options, dateLib)}
+									</components.CaptionLabel>
+								)}
+							</components.MonthCaption>
+							{navLayout === 'around' &&
+								!props.hideNavigation &&
+								displayIndex === numberOfMonths - 1 && (
+									<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}
+										data-animated-button={props.animate ? 'true' : undefined}
+									>
+										<components.Chevron
+											disabled={nextMonth ? undefined : true}
+											className={classNames[UI.Chevron]}
+											style={styles?.[UI.Chevron]}
+											orientation={props.dir === 'rtl' ? 'left' : 'right'}
+										/>
+									</components.NextMonthButton>
+								)}
+							{displayIndex === numberOfMonths - 1 &&
+								navLayout === 'after' &&
+								!props.hideNavigation && (
+									<components.Nav
+										data-animated-nav={props.animate ? 'true' : undefined}
+										className={classNames[UI.Nav]}
+										style={styles?.[UI.Nav]}
+										aria-label={labelNav()}
+										onPreviousClick={handlePreviousClick}
+										onNextClick={handleNextClick}
+										previousMonth={previousMonth}
+										nextMonth={nextMonth}
+									/>
+								)}
+
+							<components.MonthGrid
+								role="grid"
+								aria-multiselectable={mode === 'multiple' || mode === 'range'}
+								aria-label={labelGrid(calendarMonth.date, dateLib.options, dateLib) || undefined}
+								className={classNames[UI.MonthGrid]}
+								style={styles?.[UI.MonthGrid]}
 							>
-								<components.Chevron
-									disabled={nextMonth ? undefined : true}
-									className={classNames[UI.Chevron]}
-									style={styles?.[UI.Chevron]}
-									orientation={props.dir === 'rtl' ? 'left' : 'right'}
-								/>
-							</components.NextMonthButton>}
-						{displayIndex === numberOfMonths - 1 && navLayout === 'after' &&
-							!props.hideNavigation &&
-							<components.Nav
-								data-animated-nav={props.animate ? 'true' : undefined}
-								className={classNames[UI.Nav]}
-								style={styles?.[UI.Nav]}
-								aria-label={labelNav()}
-								onPreviousClick={handlePreviousClick}
-								onNextClick={handleNextClick}
-								previousMonth={previousMonth}
-								nextMonth={nextMonth}
-							/>}
-
-						<components.MonthGrid
-							role="grid"
-							aria-multiselectable={mode === 'multiple' || mode === 'range'}
-							aria-label={labelGrid(calendarMonth.date, dateLib.options, dateLib) || undefined}
-							className={classNames[UI.MonthGrid]}
-							style={styles?.[UI.MonthGrid]}
-						>
-							{!props.hideWeekdays &&
-								<components.Weekdays
-									data-animated-weekdays={props.animate ? 'true' : undefined}
-									className={classNames[UI.Weekdays]}
-									style={styles?.[UI.Weekdays]}
-								>
-									{showWeekNumber &&
-										<components.WeekNumberHeader
-											aria-label={labelWeekNumberHeader(dateLib.options)}
-											className={classNames[UI.WeekNumberHeader]}
-											style={styles?.[UI.WeekNumberHeader]}
-											scope="col"
-										>{formatWeekNumberHeader()}</components.WeekNumberHeader>}
-									{weekdays.map(
-										(weekday) =>
+								{!props.hideWeekdays && (
+									<components.Weekdays
+										data-animated-weekdays={props.animate ? 'true' : undefined}
+										className={classNames[UI.Weekdays]}
+										style={styles?.[UI.Weekdays]}
+									>
+										{showWeekNumber && (
+											<components.WeekNumberHeader
+												aria-label={labelWeekNumberHeader(dateLib.options)}
+												className={classNames[UI.WeekNumberHeader]}
+												style={styles?.[UI.WeekNumberHeader]}
+												scope="col"
+											>
+												{formatWeekNumberHeader()}
+											</components.WeekNumberHeader>
+										)}
+										{weekdays.map((weekday) => (
 											<components.Weekday
 												aria-label={labelWeekday(weekday, dateLib.options, dateLib)}
 												className={classNames[UI.Weekday]}
 												key={String(weekday)}
 												style={styles?.[UI.Weekday]}
 												scope="col"
-											>{formatWeekdayName(weekday, dateLib.options, dateLib)}</components.Weekday>,
-									)}
-								</components.Weekdays>}
-							<components.Weeks
-								data-animated-weeks={props.animate ? 'true' : undefined}
-								className={classNames[UI.Weeks]}
-								style={styles?.[UI.Weeks]}
-							>{calendarMonth.weeks.map((week) => {
-								return <components.Week
-									className={classNames[UI.Week]}
-									key={week.weekNumber}
-									style={styles?.[UI.Week]}
-									week={week}
+											>
+												{formatWeekdayName(weekday, dateLib.options, dateLib)}
+											</components.Weekday>
+										))}
+									</components.Weekdays>
+								)}
+								<components.Weeks
+									data-animated-weeks={props.animate ? 'true' : undefined}
+									className={classNames[UI.Weeks]}
+									style={styles?.[UI.Weeks]}
 								>
-									{showWeekNumber &&
-										<components.WeekNumber
-											week={week}
-											style={styles?.[UI.WeekNumber]}
-											aria-label={labelWeekNumber(week.weekNumber, {
-												locale,
-											})}
-											className={classNames[UI.WeekNumber]}
-											scope="row"
-											role="rowheader"
-										>{formatWeekNumber(week.weekNumber, dateLib)}</components.WeekNumber>}
-									{week.days.map((day: CalendarDay) => {
-										const { date } = day;
-										const modifiers = getModifiers(day);
-
-										modifiers[DayFlag.focused] = !modifiers.hidden &&
-											Boolean(focused?.isEqualTo(day));
-
-										modifiers[SelectionState.selected] = isSelected?.(date) || modifiers.selected;
-
-										if (isDateRange(selectedValue)) {
-											// add range modifiers
-											const { from, to } = selectedValue;
-											modifiers[SelectionState.range_start] = Boolean(
-												from && to && dateLib.isSameDay(date, from),
-											);
-											modifiers[SelectionState.range_end] = Boolean(
-												from && to && dateLib.isSameDay(date, to),
-											);
-											modifiers[SelectionState.range_middle] = rangeIncludesDate(
-												selectedValue,
-												date,
-												true,
-												dateLib,
-											);
-										}
-
-										const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
-
-										const className = getClassNamesForModifiers(
-											modifiers,
-											classNames,
-											props.modifiersClassNames,
+									{calendarMonth.weeks.map((week) => {
+										return (
+											<components.Week
+												className={classNames[UI.Week]}
+												key={week.weekNumber}
+												style={styles?.[UI.Week]}
+												week={week}
+											>
+												{showWeekNumber && (
+													<components.WeekNumber
+														week={week}
+														style={styles?.[UI.WeekNumber]}
+														aria-label={labelWeekNumber(week.weekNumber, {
+															locale,
+														})}
+														className={classNames[UI.WeekNumber]}
+														scope="row"
+														role="rowheader"
+													>
+														{formatWeekNumber(week.weekNumber, dateLib)}
+													</components.WeekNumber>
+												)}
+												{week.days.map((day: CalendarDay) => {
+													const { date } = day;
+													const modifiers = getModifiers(day);
+
+													modifiers[DayFlag.focused] =
+														!modifiers.hidden && Boolean(focused?.isEqualTo(day));
+
+													modifiers[SelectionState.selected] =
+														isSelected?.(date) || modifiers.selected;
+
+													if (isDateRange(selectedValue)) {
+														// add range modifiers
+														const { from, to } = selectedValue;
+														modifiers[SelectionState.range_start] = Boolean(
+															from && to && dateLib.isSameDay(date, from),
+														);
+														modifiers[SelectionState.range_end] = Boolean(
+															from && to && dateLib.isSameDay(date, to),
+														);
+														modifiers[SelectionState.range_middle] = rangeIncludesDate(
+															selectedValue,
+															date,
+															true,
+															dateLib,
+														);
+													}
+
+													const style = getStyleForModifiers(
+														modifiers,
+														styles,
+														props.modifiersStyles,
+													);
+
+													const className = getClassNamesForModifiers(
+														modifiers,
+														classNames,
+														props.modifiersClassNames,
+													);
+
+													const ariaLabel =
+														!isInteractive && !modifiers.hidden
+															? labelGridcell(date, modifiers, dateLib.options, dateLib)
+															: undefined;
+
+													return (
+														<components.Day
+															key={`${day.isoDate}_${day.displayMonthId}`}
+															day={day}
+															modifiers={modifiers}
+															className={className.join(' ')}
+															style={style}
+															role="gridcell"
+															aria-selected={modifiers.selected || undefined}
+															aria-label={ariaLabel}
+															data-day={day.isoDate}
+															data-month={day.outside ? day.dateMonthId : undefined}
+															data-selected={modifiers.selected || undefined}
+															data-disabled={modifiers.disabled || undefined}
+															data-hidden={modifiers.hidden || undefined}
+															data-outside={day.outside || undefined}
+															data-focused={modifiers.focused || undefined}
+															data-today={modifiers.today || undefined}
+														>
+															{!modifiers.hidden && isInteractive ? (
+																<components.DayButton
+																	className={classNames[UI.DayButton]}
+																	style={styles?.[UI.DayButton]}
+																	type="button"
+																	day={day}
+																	modifiers={modifiers}
+																	disabled={(!modifiers.focused && modifiers.disabled) || undefined}
+																	aria-disabled={
+																		(modifiers.focused && modifiers.disabled) || undefined
+																	}
+																	tabIndex={isFocusTarget(day) ? 0 : -1}
+																	aria-label={labelDayButton(
+																		date,
+																		modifiers,
+																		dateLib.options,
+																		dateLib,
+																	)}
+																	onClick={handleDayClick(day, modifiers)}
+																	onBlur={handleDayBlur(day, modifiers)}
+																	onFocus={handleDayFocus(day, modifiers)}
+																	onKeyDown={handleDayKeyDown(day, modifiers)}
+																	onMouseEnter={handleDayMouseEnter(day, modifiers)}
+																	onMouseLeave={handleDayMouseLeave(day, modifiers)}
+																>
+																	{formatDay(date, dateLib.options, dateLib)}
+																</components.DayButton>
+															) : (
+																!modifiers.hidden && formatDay(day.date, dateLib.options, dateLib)
+															)}
+														</components.Day>
+													);
+												})}
+											</components.Week>
 										);
-
-										const ariaLabel =
-											!isInteractive && !modifiers.hidden
-												? labelGridcell(date, modifiers, dateLib.options, dateLib)
-												: undefined;
-
-										return <components.Day
-											key={`${day.isoDate}_${day.displayMonthId}`}
-											day={day}
-											modifiers={modifiers}
-											className={className.join(' ')}
-											style={style}
-											role="gridcell"
-											aria-selected={modifiers.selected || undefined}
-											aria-label={ariaLabel}
-											data-day={day.isoDate}
-											data-month={day.outside ? day.dateMonthId : undefined}
-											data-selected={modifiers.selected || undefined}
-											data-disabled={modifiers.disabled || undefined}
-											data-hidden={modifiers.hidden || undefined}
-											data-outside={day.outside || undefined}
-											data-focused={modifiers.focused || undefined}
-											data-today={modifiers.today || undefined}
-										>
-											{!modifiers.hidden && isInteractive
-												? <components.DayButton
-														className={classNames[UI.DayButton]}
-														style={styles?.[UI.DayButton]}
-														type="button"
-														day={day}
-														modifiers={modifiers}
-														disabled={!modifiers.focused && modifiers.disabled || undefined}
-														aria-disabled={modifiers.focused && modifiers.disabled || undefined}
-														tabIndex={isFocusTarget(day) ? 0 : -1}
-														aria-label={labelDayButton(date, modifiers, dateLib.options, dateLib)}
-														onClick={handleDayClick(day, modifiers)}
-														onBlur={handleDayBlur(day, modifiers)}
-														onFocus={handleDayFocus(day, modifiers)}
-														onKeyDown={handleDayKeyDown(day, modifiers)}
-														onMouseEnter={handleDayMouseEnter(day, modifiers)}
-														onMouseLeave={handleDayMouseLeave(day, modifiers)}
-													>{formatDay(date, dateLib.options, dateLib)}</components.DayButton>
-												: !modifiers.hidden && formatDay(day.date, dateLib.options, dateLib)}
-										</components.Day>;
 									})}
-								</components.Week>;
-							})}</components.Weeks>
-						</components.MonthGrid>
-					</components.Month>;
+								</components.Weeks>
+							</components.MonthGrid>
+						</components.Month>
+					);
 				})}
 			</components.Months>
-			{props.footer &&
+			{props.footer && (
 				<components.Footer
 					className={classNames[UI.Footer]}
 					style={styles?.[UI.Footer]}
 					role="status"
 					aria-live="polite"
-				>{props.footer}</components.Footer>}
+				>
+					{props.footer}
+				</components.Footer>
+			)}
 		</components.Root>
 	</DayPickerContextProvider>
 }

package/src/components/custom-components.tsrx

@@ -30,14 +30,18 @@ export function Chevron(props: {
 }) @{
 	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" />}
+		{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];
@@ -48,8 +52,10 @@ export function Day(props: DayProps) @{
 	<td {...cellProps} />
 }
 
-export type DayButtonProps =
-	{ day: CalendarDay; modifiers: Modifiers } & ButtonHTMLAttributes<HTMLButtonElement>;
+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);
@@ -60,8 +66,10 @@ export function DayButton(props: DayButtonProps) @{
 }
 
 export type DropdownOption = { value: number; label: string; disabled: boolean };
-export type DropdownProps =
-	{ options?: DropdownOption[] } & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'>;
+export type DropdownProps = { options?: DropdownOption[] } & Omit<
+	SelectHTMLAttributes<HTMLSelectElement>,
+	'children'
+>;
 export function Dropdown(props: DropdownProps) @{
 	const { options, className, ...selectProps } = props;
 	const { classNames, components, styles } = useDayPicker();
@@ -73,14 +81,11 @@ export function Dropdown(props: DropdownProps) @{
 		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>,
-			)}
+			{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}
@@ -103,8 +108,10 @@ export function Footer(props: HTMLAttributes<HTMLDivElement>) @{
 }
 export type FooterProps = Parameters<typeof Footer>[0];
 
-export type MonthProps =
-	{ calendarMonth: CalendarMonth; displayIndex: number } & HTMLAttributes<HTMLDivElement>;
+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>
@@ -132,22 +139,32 @@ export function YearsDropdown(props: DropdownProps) @{
 	<components.Dropdown {...props} />
 }
 
-export type NavProps =
-	{
-		onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
-		onNextClick?: MouseEventHandler<HTMLButtonElement>;
-		previousMonth?: Date;
-		nextMonth?: Date;
-	} & HTMLAttributes<HTMLElement>;
+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: MouseEvent<HTMLButtonElement>) => {
-		if (nextMonth) onNextClick?.(event);
-	}, [nextMonth, onNextClick]);
-	const handlePreviousClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
-		if (previousMonth) onPreviousClick?.(event);
-	}, [previousMonth, onPreviousClick]);
+	const {
+		components,
+		classNames,
+		styles,
+		labels: { labelPrevious, labelNext },
+	} = useDayPicker();
+	const handleNextClick = useCallback(
+		(event: MouseEvent<HTMLButtonElement>) => {
+			if (nextMonth) onNextClick?.(event);
+		},
+		[nextMonth, onNextClick],
+	);
+	const handlePreviousClick = useCallback(
+		(event: MouseEvent<HTMLButtonElement>) => {
+			if (previousMonth) onPreviousClick?.(event);
+		},
+		[previousMonth, onPreviousClick],
+	);
 	<nav {...navProps}>
 		<components.PreviousMonthButton
 			type="button"