@octanejs/day-picker 0.0.1

package/src/UI.ts

@@ -0,0 +1,121 @@
+import type { ClassNames, CustomComponents, Styles } from './types/index.js';
+
+/**
+ * Enum representing the UI elements composing DayPicker. These elements are
+ * mapped to {@link CustomComponents}, {@link ClassNames}, and {@link Styles}.
+ *
+ * Some elements are extended by flags and modifiers.
+ */
+export enum UI {
+	/** The root component displaying the months and the navigation bar. */
+	Root = 'root',
+	/** The Chevron SVG element used by navigation buttons and dropdowns. */
+	Chevron = 'chevron',
+	/**
+	 * The grid cell with the day's date. Extended by {@link DayFlag} and
+	 * {@link SelectionState}.
+	 */
+	Day = 'day',
+	/** The button containing the formatted day's date, inside the grid cell. */
+	DayButton = 'day_button',
+	/** The caption label of the month (when not showing the dropdown navigation). */
+	CaptionLabel = 'caption_label',
+	/** The container of the dropdown navigation (when enabled). */
+	Dropdowns = 'dropdowns',
+	/** The dropdown element to select for years and months. */
+	Dropdown = 'dropdown',
+	/** The container element of the dropdown. */
+	DropdownRoot = 'dropdown_root',
+	/** The root element of the footer. */
+	Footer = 'footer',
+	/** The month grid. */
+	MonthGrid = 'month_grid',
+	/** Contains the dropdown navigation or the caption label. */
+	MonthCaption = 'month_caption',
+	/** The dropdown with the months. */
+	MonthsDropdown = 'months_dropdown',
+	/** Wrapper of the month grid. */
+	Month = 'month',
+	/** The container of the displayed months. */
+	Months = 'months',
+	/** The navigation bar with the previous and next buttons. */
+	Nav = 'nav',
+	/**
+	 * The next month button in the navigation. *
+	 *
+	 * @since 9.1.0
+	 */
+	NextMonthButton = 'button_next',
+	/**
+	 * The previous month button in the navigation.
+	 *
+	 * @since 9.1.0
+	 */
+	PreviousMonthButton = 'button_previous',
+	/** The row containing the week. */
+	Week = 'week',
+	/** The group of row weeks in a month (`tbody`). */
+	Weeks = 'weeks',
+	/** The column header with the weekday. */
+	Weekday = 'weekday',
+	/** The row grouping the weekdays in the column headers. */
+	Weekdays = 'weekdays',
+	/** The cell containing the week number. */
+	WeekNumber = 'week_number',
+	/** The cell header of the week numbers column. */
+	WeekNumberHeader = 'week_number_header',
+	/** The dropdown with the years. */
+	YearsDropdown = 'years_dropdown',
+}
+
+/** Enum representing flags for the {@link UI | UI.Day} element. */
+export enum DayFlag {
+	/** The day is disabled. */
+	disabled = 'disabled',
+	/** The day is hidden. */
+	hidden = 'hidden',
+	/** The day is outside the current month. */
+	outside = 'outside',
+	/** The day is focused. */
+	focused = 'focused',
+	/** The day is today. */
+	today = 'today',
+}
+
+/**
+ * Enum representing selection states that can be applied to the
+ * {@link UI | UI.Day} element in selection mode.
+ */
+export enum SelectionState {
+	/** The day is at the end of a selected range. */
+	range_end = 'range_end',
+	/** The day is at the middle of a selected range. */
+	range_middle = 'range_middle',
+	/** The day is at the start of a selected range. */
+	range_start = 'range_start',
+	/** The day is selected. */
+	selected = 'selected',
+}
+
+/**
+ * Enum representing different animation states for transitioning between
+ * months.
+ */
+export enum Animation {
+	/** The entering weeks when they appear before the exiting month. */
+	weeks_before_enter = 'weeks_before_enter',
+	/** The exiting weeks when they disappear before the entering month. */
+	weeks_before_exit = 'weeks_before_exit',
+	/** The entering weeks when they appear after the exiting month. */
+	weeks_after_enter = 'weeks_after_enter',
+	/** The exiting weeks when they disappear after the entering month. */
+	weeks_after_exit = 'weeks_after_exit',
+	/** The entering caption when it appears after the exiting month. */
+	caption_after_enter = 'caption_after_enter',
+	/** The exiting caption when it disappears after the entering month. */
+	caption_after_exit = 'caption_after_exit',
+	/** The entering caption when it appears before the exiting month. */
+	caption_before_enter = 'caption_before_enter',
+	/** The exiting caption when it disappears before the entering month. */
+	caption_before_exit = 'caption_before_exit',
+}

package/src/classes/CalendarDay.ts

@@ -0,0 +1,82 @@
+import { type DateLib, defaultDateLib } from './DateLib.js';
+
+/**
+ * Represents a day displayed in the calendar.
+ *
+ * In DayPicker, a `CalendarDay` is a wrapper around a `Date` object that
+ * provides additional information about the day, such as whether it belongs to
+ * the displayed month.
+ */
+export class CalendarDay {
+	constructor(date: Date, displayMonth: Date, dateLib: DateLib = defaultDateLib) {
+		this.date = date;
+		this.displayMonth = displayMonth;
+		this.outside = Boolean(displayMonth && !dateLib.isSameMonth(date, displayMonth));
+		this.dateLib = dateLib;
+		this.isoDate = dateLib.format(date, 'yyyy-MM-dd');
+		this.displayMonthId = dateLib.format(displayMonth, 'yyyy-MM');
+		this.dateMonthId = dateLib.format(date, 'yyyy-MM');
+	}
+
+	/**
+	 * Utility functions for manipulating dates.
+	 *
+	 * @private
+	 */
+	readonly dateLib: DateLib;
+
+	/**
+	 * Indicates whether the day does not belong to the displayed month.
+	 *
+	 * If `outside` is `true`, use `displayMonth` to determine the month to which
+	 * the day belongs.
+	 */
+	readonly outside: boolean;
+
+	/**
+	 * The month that is currently displayed in the calendar.
+	 *
+	 * This property is useful for determining if the day belongs to the same
+	 * month as the displayed month, especially when `showOutsideDays` is
+	 * enabled.
+	 */
+	readonly displayMonth: Date;
+
+	/** The date represented by this day. */
+	readonly date: Date;
+
+	/**
+	 * Stable `yyyy-MM-dd` representation for reuse in keys/data attrs.
+	 *
+	 * @since V9.11.2
+	 */
+	readonly isoDate: string;
+
+	/**
+	 * Stable `yyyy-MM` representation of the displayed month.
+	 *
+	 * @since V9.11.2
+	 */
+	readonly displayMonthId: string;
+
+	/**
+	 * Stable `yyyy-MM` representation of the date's actual month.
+	 *
+	 * @since V9.11.2
+	 */
+	readonly dateMonthId: string;
+
+	/**
+	 * Checks if this day is equal to another `CalendarDay`, considering both the
+	 * date and the displayed month.
+	 *
+	 * @param day The `CalendarDay` to compare with.
+	 * @returns `true` if the days are equal, otherwise `false`.
+	 */
+	isEqualTo(day: CalendarDay) {
+		return (
+			this.dateLib.isSameDay(day.date, this.date) &&
+			this.dateLib.isSameMonth(day.displayMonth, this.displayMonth)
+		);
+	}
+}

package/src/classes/CalendarMonth.ts

@@ -0,0 +1,20 @@
+import type { CalendarWeek } from './CalendarWeek.js';
+
+/**
+ * Represents a month in a calendar year.
+ *
+ * A `CalendarMonth` contains the weeks within the month and the date of the
+ * month.
+ */
+export class CalendarMonth {
+	constructor(month: Date, weeks: CalendarWeek[]) {
+		this.date = month;
+		this.weeks = weeks;
+	}
+
+	/** The date representing the first day of the month. */
+	date: Date;
+
+	/** The weeks that belong to this month. */
+	weeks: CalendarWeek[];
+}

package/src/classes/CalendarWeek.ts

@@ -0,0 +1,19 @@
+import type { CalendarDay } from './CalendarDay.js';
+
+/**
+ * Represents a week in a calendar month.
+ *
+ * A `CalendarWeek` contains the days within the week and the week number.
+ */
+export class CalendarWeek {
+	constructor(weekNumber: number, days: CalendarDay[]) {
+		this.days = days;
+		this.weekNumber = weekNumber;
+	}
+
+	/** The number of the week within the year. */
+	weekNumber: number;
+
+	/** The days that belong to this week. */
+	days: CalendarDay[];
+}