This commit is contained in:
freedakgmail
2025-11-22 19:52:55 +08:00
commit 43c8389705
28950 changed files with 3640981 additions and 0 deletions
@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2014-2025 Giampaolo Bellavite <io@gpbl.dev> and contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@@ -0,0 +1,78 @@
# React DayPicker
DayPicker is a [React](https://react.dev) component for creating date pickers, calendars, and date inputs for web applications.
## Documentation
See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference, or read [the docs in the repository](website/docs/start.mdx).
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./website/static/img/screenshot-dark.png" />
<source media="(prefers-color-scheme: light)" srcset="./website/static/img/screenshot-light.png" />
<img width="460" src="./website/static/img/screenshot.png" alt="Screenshot of DayPicker displaying the September 2025 calendar, with the date range from the 17th to the 20th selected." />
</picture>
## Features
- 🛠 Extensive set of props for [customizing](https://daypicker.dev/docs/customization) the calendar.
- 🎨 Minimal design that can be [easily styled](https://daypicker.dev/docs/styling) with CSS or any CSS framework.
- 📅 Supports [selections](https://daypicker.dev/docs/selection-modes) of single days, multiple days, ranges of days, or [custom selections](https://daypicker.dev/guides/custom-selections).
- 🌍 Can be [localized](https://daypicker.dev/docs/localization) into any language and [time zones](https://daypicker.dev/docs/time-zone).
- 🌐 Support for [ISO 8601](https://daypicker.dev/docs/localization#iso-week-dates), [Persian](https://daypicker.dev/docs/localization#persian-calendar), and [broadcast](https://daypicker.dev/docs/localization#broadcast-calendar) calendar.
- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](https://daypicker.dev/guides/accessibility).
- ⚙️ [Customizable components](https://daypicker.dev/guides/custom-components) to extend the rendered elements.
- 🔤 Easy integration [with input fields](https://daypicker.dev/guides/input-fields).
DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on [date-fns](https://date-fns.org) for date manipulation and formatting.
## Installation
```bash
npm install react-day-picker
```
<a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker" alt="npm version"/></a>
<img src="https://img.shields.io/npm/dm/react-day-picker.svg" alt="npm downloads"/> <img src="https://img.shields.io/bundlephobia/minzip/react-day-picker" alt="Min gzipped size"/>
## Example
```tsx
import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";
function MyDatePicker() {
const [selected, setSelected] = useState<Date>();
return (
<DayPicker
mode="single"
selected={selected}
onSelect={setSelected}
footer={
selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
}
/>
);
}
```
## Compatibility
DayPicker is compatible with React 16.8 and later.
## License
DayPicker is released under the [MIT License](https://daypicker.dev/license).
## Community
Ask for help and share your experience with DayPicker:
- 💬 [Discussion forums](https://github.com/gpbl/react-day-picker/discussions) - Get support and provide feedback.
- 🪳 [Report an issue](https://github.com/gpbl/react-day-picker/issues/new/choose) - Report bugs or request features.
## Funding
Consider supporting DayPicker's maintainer with a donation. Your support helps keep the project alive and up-to-date.
- 🎗️ [Sponsor DayPicker on GitHub](https://github.com/sponsors/gpbl)
@@ -0,0 +1,11 @@
import React from "react";
import type { DayPickerProps } from "./types/index.js";
/**
* Renders the DayPicker calendar component.
*
* @param initialProps - The props for the DayPicker component.
* @returns The rendered DayPicker component.
* @group DayPicker
* @see https://daypicker.dev
*/
export declare function DayPicker(initialProps: DayPickerProps): React.JSX.Element;
@@ -0,0 +1,323 @@
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.DayPicker = DayPicker;
const react_1 = __importStar(require("react"));
const tz_1 = require("@date-fns/tz");
const UI_js_1 = require("./UI.js");
const DateLib_js_1 = require("./classes/DateLib.js");
const createGetModifiers_js_1 = require("./helpers/createGetModifiers.js");
const getClassNamesForModifiers_js_1 = require("./helpers/getClassNamesForModifiers.js");
const getComponents_js_1 = require("./helpers/getComponents.js");
const getDataAttributes_js_1 = require("./helpers/getDataAttributes.js");
const getDefaultClassNames_js_1 = require("./helpers/getDefaultClassNames.js");
const getFormatters_js_1 = require("./helpers/getFormatters.js");
const getMonthOptions_js_1 = require("./helpers/getMonthOptions.js");
const getStyleForModifiers_js_1 = require("./helpers/getStyleForModifiers.js");
const getWeekdays_js_1 = require("./helpers/getWeekdays.js");
const getYearOptions_js_1 = require("./helpers/getYearOptions.js");
const defaultLabels = __importStar(require("./labels/index.js"));
const useAnimation_js_1 = require("./useAnimation.js");
const useCalendar_js_1 = require("./useCalendar.js");
const useDayPicker_js_1 = require("./useDayPicker.js");
const useFocus_js_1 = require("./useFocus.js");
const useSelection_js_1 = require("./useSelection.js");
const rangeIncludesDate_js_1 = require("./utils/rangeIncludesDate.js");
const typeguards_js_1 = require("./utils/typeguards.js");
/**
* Renders the DayPicker calendar component.
*
* @param initialProps - The props for the DayPicker component.
* @returns The rendered DayPicker component.
* @group DayPicker
* @see https://daypicker.dev
*/
function DayPicker(initialProps) {
let props = initialProps;
if (props.timeZone) {
props = {
...initialProps
};
if (props.today) {
props.today = new tz_1.TZDate(props.today, props.timeZone);
}
if (props.month) {
props.month = new tz_1.TZDate(props.month, props.timeZone);
}
if (props.defaultMonth) {
props.defaultMonth = new tz_1.TZDate(props.defaultMonth, props.timeZone);
}
if (props.startMonth) {
props.startMonth = new tz_1.TZDate(props.startMonth, props.timeZone);
}
if (props.endMonth) {
props.endMonth = new tz_1.TZDate(props.endMonth, props.timeZone);
}
if (props.mode === "single" && props.selected) {
props.selected = new tz_1.TZDate(props.selected, props.timeZone);
}
else if (props.mode === "multiple" && props.selected) {
props.selected = props.selected?.map((date) => new tz_1.TZDate(date, props.timeZone));
}
else if (props.mode === "range" && props.selected) {
props.selected = {
from: props.selected.from
? new tz_1.TZDate(props.selected.from, props.timeZone)
: undefined,
to: props.selected.to
? new tz_1.TZDate(props.selected.to, props.timeZone)
: undefined
};
}
}
const { components, formatters, labels, dateLib, locale, classNames } = (0, react_1.useMemo)(() => {
const locale = { ...DateLib_js_1.defaultLocale, ...props.locale };
const dateLib = new DateLib_js_1.DateLib({
locale,
weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
firstWeekContainsDate: props.firstWeekContainsDate,
useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
timeZone: props.timeZone,
numerals: props.numerals
}, props.dateLib);
return {
dateLib,
components: (0, getComponents_js_1.getComponents)(props.components),
formatters: (0, getFormatters_js_1.getFormatters)(props.formatters),
labels: { ...defaultLabels, ...props.labels },
locale,
classNames: { ...(0, getDefaultClassNames_js_1.getDefaultClassNames)(), ...props.classNames }
};
}, [
props.locale,
props.broadcastCalendar,
props.weekStartsOn,
props.firstWeekContainsDate,
props.useAdditionalWeekYearTokens,
props.useAdditionalDayOfYearTokens,
props.timeZone,
props.numerals,
props.dateLib,
props.components,
props.formatters,
props.labels,
props.classNames
]);
const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles } = props;
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown } = formatters;
const calendar = (0, useCalendar_js_1.useCalendar)(props, dateLib);
const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth } = calendar;
const getModifiers = (0, createGetModifiers_js_1.createGetModifiers)(days, props, navStart, navEnd, dateLib);
const { isSelected, select, selected: selectedValue } = (0, useSelection_js_1.useSelection)(props, dateLib) ?? {};
const { blur, focused, isFocusTarget, moveFocus, setFocused } = (0, useFocus_js_1.useFocus)(props, calendar, getModifiers, isSelected ?? (() => false), dateLib);
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelPrevious, labelNext, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels;
const weekdays = (0, react_1.useMemo)(() => (0, getWeekdays_js_1.getWeekdays)(dateLib, props.ISOWeek), [dateLib, props.ISOWeek]);
const isInteractive = mode !== undefined || onDayClick !== undefined;
const handlePreviousClick = (0, react_1.useCallback)(() => {
if (!previousMonth)
return;
goToMonth(previousMonth);
onPrevClick?.(previousMonth);
}, [previousMonth, goToMonth, onPrevClick]);
const handleNextClick = (0, react_1.useCallback)(() => {
if (!nextMonth)
return;
goToMonth(nextMonth);
onNextClick?.(nextMonth);
}, [goToMonth, nextMonth, onNextClick]);
const handleDayClick = (0, react_1.useCallback)((day, m) => (e) => {
e.preventDefault();
e.stopPropagation();
setFocused(day);
select?.(day.date, m, e);
onDayClick?.(day.date, m, e);
}, [select, onDayClick, setFocused]);
const handleDayFocus = (0, react_1.useCallback)((day, m) => (e) => {
setFocused(day);
onDayFocus?.(day.date, m, e);
}, [onDayFocus, setFocused]);
const handleDayBlur = (0, react_1.useCallback)((day, m) => (e) => {
blur();
onDayBlur?.(day.date, m, e);
}, [blur, onDayBlur]);
const handleDayKeyDown = (0, react_1.useCallback)((day, modifiers) => (e) => {
const keyMap = {
ArrowLeft: [
e.shiftKey ? "month" : "day",
props.dir === "rtl" ? "after" : "before"
],
ArrowRight: [
e.shiftKey ? "month" : "day",
props.dir === "rtl" ? "before" : "after"
],
ArrowDown: [e.shiftKey ? "year" : "week", "after"],
ArrowUp: [e.shiftKey ? "year" : "week", "before"],
PageUp: [e.shiftKey ? "year" : "month", "before"],
PageDown: [e.shiftKey ? "year" : "month", "after"],
Home: ["startOfWeek", "before"],
End: ["endOfWeek", "after"]
};
if (keyMap[e.key]) {
e.preventDefault();
e.stopPropagation();
const [moveBy, moveDir] = keyMap[e.key];
moveFocus(moveBy, moveDir);
}
onDayKeyDown?.(day.date, modifiers, e);
}, [moveFocus, onDayKeyDown, props.dir]);
const handleDayMouseEnter = (0, react_1.useCallback)((day, modifiers) => (e) => {
onDayMouseEnter?.(day.date, modifiers, e);
}, [onDayMouseEnter]);
const handleDayMouseLeave = (0, react_1.useCallback)((day, modifiers) => (e) => {
onDayMouseLeave?.(day.date, modifiers, e);
}, [onDayMouseLeave]);
const handleMonthChange = (0, react_1.useCallback)((date) => (e) => {
const selectedMonth = Number(e.target.value);
const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
goToMonth(month);
}, [dateLib, goToMonth]);
const handleYearChange = (0, react_1.useCallback)((date) => (e) => {
const selectedYear = Number(e.target.value);
const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
goToMonth(month);
}, [dateLib, goToMonth]);
const { className, style } = (0, react_1.useMemo)(() => ({
className: [classNames[UI_js_1.UI.Root], props.className]
.filter(Boolean)
.join(" "),
style: { ...styles?.[UI_js_1.UI.Root], ...props.style }
}), [classNames, props.className, props.style, styles]);
const dataAttributes = (0, getDataAttributes_js_1.getDataAttributes)(props);
const rootElRef = (0, react_1.useRef)(null);
(0, useAnimation_js_1.useAnimation)(rootElRef, Boolean(props.animate), {
classNames,
months,
focused,
dateLib
});
const contextValue = {
dayPickerProps: props,
selected: selectedValue,
select: select,
isSelected,
months,
nextMonth,
previousMonth,
goToMonth,
getModifiers,
components,
classNames,
styles,
labels,
formatters
};
return (react_1.default.createElement(useDayPicker_js_1.dayPickerContext.Provider, { value: contextValue },
react_1.default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] },
!props.hideNavigation && !navLayout && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
months.map((calendarMonth, displayIndex) => {
const dropdownMonths = (0, getMonthOptions_js_1.getMonthOptions)(calendarMonth.date, navStart, navEnd, formatters, dateLib);
const dropdownYears = (0, getYearOptions_js_1.getYearOptions)(navStart, navEnd, formatters, dateLib);
return (react_1.default.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
navLayout === "around" &&
!props.hideNavigation &&
displayIndex === 0 && (react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
react_1.default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.Dropdowns], style: styles?.[UI_js_1.UI.Dropdowns] },
captionLayout === "dropdown" ||
captionLayout === "dropdown-months" ? (react_1.default.createElement(components.MonthsDropdown, { className: classNames[UI_js_1.UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: dropdownMonths, style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (react_1.default.createElement("span", null, formatMonthDropdown(calendarMonth.date, dateLib))),
captionLayout === "dropdown" ||
captionLayout === "dropdown-years" ? (react_1.default.createElement(components.YearsDropdown, { className: classNames[UI_js_1.UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: dropdownYears, style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (react_1.default.createElement("span", null, formatYearDropdown(calendarMonth.date, dateLib))),
react_1.default.createElement("span", { role: "status", "aria-live": "polite", style: {
border: 0,
clip: "rect(0 0 0 0)",
height: "1px",
margin: "-1px",
overflow: "hidden",
padding: 0,
position: "absolute",
width: "1px",
whiteSpace: "nowrap",
wordWrap: "normal"
} }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (react_1.default.createElement(components.CaptionLabel, { className: classNames[UI_js_1.UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
navLayout === "around" &&
!props.hideNavigation &&
displayIndex === numberOfMonths - 1 && (react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
displayIndex === numberOfMonths - 1 &&
navLayout === "after" &&
!props.hideNavigation && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
react_1.default.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
undefined, className: classNames[UI_js_1.UI.MonthGrid], style: styles?.[UI_js_1.UI.MonthGrid] },
!props.hideWeekdays && (react_1.default.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weekdays], style: styles?.[UI_js_1.UI.Weekdays] },
showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI_js_1.UI.WeekNumberHeader], style: styles?.[UI_js_1.UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
weekdays.map((weekday, i) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI_js_1.UI.Weekday], key: i, style: styles?.[UI_js_1.UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
react_1.default.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weeks], style: styles?.[UI_js_1.UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
return (react_1.default.createElement(components.Week, { className: classNames[UI_js_1.UI.Week], key: week.weekNumber, style: styles?.[UI_js_1.UI.Week], week: week },
showWeekNumber && (react_1.default.createElement(components.WeekNumber, { week: week, style: styles?.[UI_js_1.UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
locale
}), className: classNames[UI_js_1.UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
week.days.map((day) => {
const { date } = day;
const modifiers = getModifiers(day);
modifiers[UI_js_1.DayFlag.focused] =
!modifiers.hidden &&
Boolean(focused?.isEqualTo(day));
modifiers[UI_js_1.SelectionState.selected] =
isSelected?.(date) || modifiers.selected;
if ((0, typeguards_js_1.isDateRange)(selectedValue)) {
// add range modifiers
const { from, to } = selectedValue;
modifiers[UI_js_1.SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
modifiers[UI_js_1.SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to));
modifiers[UI_js_1.SelectionState.range_middle] =
(0, rangeIncludesDate_js_1.rangeIncludesDate)(selectedValue, date, true, dateLib);
}
const style = (0, getStyleForModifiers_js_1.getStyleForModifiers)(modifiers, styles, props.modifiersStyles);
const className = (0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(modifiers, classNames, props.modifiersClassNames);
const ariaLabel = !isInteractive && !modifiers.hidden
? labelGridcell(date, modifiers, dateLib.options, dateLib)
: undefined;
return (react_1.default.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": dateLib.format(date, "yyyy-MM-dd"), "data-month": day.outside
? dateLib.format(date, "yyyy-MM")
: 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 ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: 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))) : (!modifiers.hidden &&
formatDay(day.date, dateLib.options, dateLib))));
})));
})))));
})),
props.footer && (react_1.default.createElement(components.Footer, { className: classNames[UI_js_1.UI.Footer], style: styles?.[UI_js_1.UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
}
//# sourceMappingURL=DayPicker.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,346 @@
import { CSSProperties } from "react";
/**
* 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 declare 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.Day} element. */
export declare 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.Day}
* element in selection mode.
*/
export declare 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 declare 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"
}
/**
* Deprecated UI elements and flags from previous versions of DayPicker.
*
* These elements are kept for backward compatibility and to assist in
* transitioning to the new {@link UI} elements.
*
* @deprecated
* @since 9.0.1
* @template T - The type of the deprecated UI element (e.g., CSS class or
* style).
* @see https://daypicker.dev/upgrading
* @see https://daypicker.dev/docs/styling
*/
export type DeprecatedUI<T extends CSSProperties | string> = {
/**
* This element was applied to the style of any button in DayPicker and it is
* replaced by {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
*
* @deprecated
*/
button: T;
/**
* This element was resetting the style of any button in DayPicker and it is
* replaced by {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
*
* @deprecated
*/
button_reset: T;
/**
* This element has been renamed to {@link UI.MonthCaption}.
*
* @deprecated
*/
caption: T;
/**
* This element has been removed. Captions are styled via
* {@link UI.MonthCaption}.
*
* @deprecated
*/
caption_between: T;
/**
* This element has been renamed to {@link UI.Dropdowns}.
*
* @deprecated
*/
caption_dropdowns: T;
/**
* This element has been removed. Captions are styled via
* {@link UI.MonthCaption}.
*
* @deprecated
*/
caption_end: T;
/**
* This element has been removed.
*
* @deprecated
*/
caption_start: T;
/**
* This element has been renamed to {@link UI.Day}.
*
* @deprecated
*/
cell: T;
/**
* This element has been renamed to {@link DayFlag.disabled}.
*
* @deprecated
*/
day_disabled: T;
/**
* This element has been renamed to {@link DayFlag.hidden}.
*
* @deprecated
*/
day_hidden: T;
/**
* This element has been renamed to {@link DayFlag.outside}.
*
* @deprecated
*/
day_outside: T;
/**
* This element has been renamed to {@link SelectionState.range_end}.
*
* @deprecated
*/
day_range_end: T;
/**
* This element has been renamed to {@link SelectionState.range_middle}.
*
* @deprecated
*/
day_range_middle: T;
/**
* This element has been renamed to {@link SelectionState.range_start}.
*
* @deprecated
*/
day_range_start: T;
/**
* This element has been renamed to {@link SelectionState.selected}.
*
* @deprecated
*/
day_selected: T;
/**
* This element has been renamed to {@link DayFlag.today}.
*
* @deprecated
*/
day_today: T;
/**
* This element has been removed. The dropdown icon is now {@link UI.Chevron}
* inside a {@link UI.CaptionLabel}.
*
* @deprecated
*/
dropdown_icon: T;
/**
* This element has been renamed to {@link UI.MonthsDropdown}.
*
* @deprecated
*/
dropdown_month: T;
/**
* This element has been renamed to {@link UI.YearsDropdown}.
*
* @deprecated
*/
dropdown_year: T;
/**
* This element has been removed.
*
* @deprecated
*/
head: T;
/**
* This element has been renamed to {@link UI.Weekday}.
*
* @deprecated
*/
head_cell: T;
/**
* This element has been renamed to {@link UI.Weekdays}.
*
* @deprecated
*/
head_row: T;
/**
* This flag has been removed. Use `data-multiple-months` in your CSS
* selectors.
*
* @deprecated
*/
multiple_months: T;
/**
* This element has been removed. To style the navigation buttons, use
* {@link UI.PreviousMonthButton} and {@link UI.NextMonthButton}.
*
* @deprecated
*/
nav_button: T;
/**
* This element has been renamed to {@link UI.NextMonthButton}.
*
* @deprecated
*/
nav_button_next: T;
/**
* This element has been renamed to {@link UI.PreviousMonthButton}.
*
* @deprecated
*/
nav_button_previous: T;
/**
* This element has been removed. The dropdown icon is now {@link UI.Chevron}
* inside a {@link UI.NextMonthButton} or a {@link UI.PreviousMonthButton}.
*
* @deprecated
*/
nav_icon: T;
/**
* This element has been renamed to {@link UI.Week}.
*
* @deprecated
*/
row: T;
/**
* This element has been renamed to {@link UI.MonthGrid}.
*
* @deprecated
*/
table: T;
/**
* This element has been renamed to {@link UI.Weeks}.
*
* @deprecated
*/
tbody: T;
/**
* This element has been removed. The {@link UI.Footer} is now a single element
* below the months.
*
* @deprecated
*/
tfoot: T;
/**
* This flag has been removed. There are no "visually hidden" elements in
* DayPicker 9.
*
* @deprecated
*/
vhidden: T;
/**
* This element has been renamed. Use {@link UI.WeekNumber} instead.
*
* @deprecated
*/
weeknumber: T;
/**
* This flag has been removed. Use `data-week-numbers` in your CSS.
*
* @deprecated
*/
with_weeknumber: T;
};
@@ -0,0 +1,124 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Animation = exports.SelectionState = exports.DayFlag = exports.UI = void 0;
/**
* 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.
*/
var UI;
(function (UI) {
/** The root component displaying the months and the navigation bar. */
UI["Root"] = "root";
/** The Chevron SVG element used by navigation buttons and dropdowns. */
UI["Chevron"] = "chevron";
/**
* The grid cell with the day's date. Extended by {@link DayFlag} and
* {@link SelectionState}.
*/
UI["Day"] = "day";
/** The button containing the formatted day's date, inside the grid cell. */
UI["DayButton"] = "day_button";
/** The caption label of the month (when not showing the dropdown navigation). */
UI["CaptionLabel"] = "caption_label";
/** The container of the dropdown navigation (when enabled). */
UI["Dropdowns"] = "dropdowns";
/** The dropdown element to select for years and months. */
UI["Dropdown"] = "dropdown";
/** The container element of the dropdown. */
UI["DropdownRoot"] = "dropdown_root";
/** The root element of the footer. */
UI["Footer"] = "footer";
/** The month grid. */
UI["MonthGrid"] = "month_grid";
/** Contains the dropdown navigation or the caption label. */
UI["MonthCaption"] = "month_caption";
/** The dropdown with the months. */
UI["MonthsDropdown"] = "months_dropdown";
/** Wrapper of the month grid. */
UI["Month"] = "month";
/** The container of the displayed months. */
UI["Months"] = "months";
/** The navigation bar with the previous and next buttons. */
UI["Nav"] = "nav";
/**
* The next month button in the navigation. *
*
* @since 9.1.0
*/
UI["NextMonthButton"] = "button_next";
/**
* The previous month button in the navigation.
*
* @since 9.1.0
*/
UI["PreviousMonthButton"] = "button_previous";
/** The row containing the week. */
UI["Week"] = "week";
/** The group of row weeks in a month (`tbody`). */
UI["Weeks"] = "weeks";
/** The column header with the weekday. */
UI["Weekday"] = "weekday";
/** The row grouping the weekdays in the column headers. */
UI["Weekdays"] = "weekdays";
/** The cell containing the week number. */
UI["WeekNumber"] = "week_number";
/** The cell header of the week numbers column. */
UI["WeekNumberHeader"] = "week_number_header";
/** The dropdown with the years. */
UI["YearsDropdown"] = "years_dropdown";
})(UI || (exports.UI = UI = {}));
/** Enum representing flags for the {@link UI.Day} element. */
var DayFlag;
(function (DayFlag) {
/** The day is disabled. */
DayFlag["disabled"] = "disabled";
/** The day is hidden. */
DayFlag["hidden"] = "hidden";
/** The day is outside the current month. */
DayFlag["outside"] = "outside";
/** The day is focused. */
DayFlag["focused"] = "focused";
/** The day is today. */
DayFlag["today"] = "today";
})(DayFlag || (exports.DayFlag = DayFlag = {}));
/**
* Enum representing selection states that can be applied to the {@link UI.Day}
* element in selection mode.
*/
var SelectionState;
(function (SelectionState) {
/** The day is at the end of a selected range. */
SelectionState["range_end"] = "range_end";
/** The day is at the middle of a selected range. */
SelectionState["range_middle"] = "range_middle";
/** The day is at the start of a selected range. */
SelectionState["range_start"] = "range_start";
/** The day is selected. */
SelectionState["selected"] = "selected";
})(SelectionState || (exports.SelectionState = SelectionState = {}));
/**
* Enum representing different animation states for transitioning between
* months.
*/
var Animation;
(function (Animation) {
/** The entering weeks when they appear before the exiting month. */
Animation["weeks_before_enter"] = "weeks_before_enter";
/** The exiting weeks when they disappear before the entering month. */
Animation["weeks_before_exit"] = "weeks_before_exit";
/** The entering weeks when they appear after the exiting month. */
Animation["weeks_after_enter"] = "weeks_after_enter";
/** The exiting weeks when they disappear after the entering month. */
Animation["weeks_after_exit"] = "weeks_after_exit";
/** The entering caption when it appears after the exiting month. */
Animation["caption_after_enter"] = "caption_after_enter";
/** The exiting caption when it disappears after the entering month. */
Animation["caption_after_exit"] = "caption_after_exit";
/** The entering caption when it appears before the exiting month. */
Animation["caption_before_enter"] = "caption_before_enter";
/** The exiting caption when it disappears before the entering month. */
Animation["caption_before_exit"] = "caption_before_exit";
})(Animation || (exports.Animation = Animation = {}));
//# sourceMappingURL=UI.js.map
@@ -0,0 +1 @@
{"version":3,"file":"UI.js","sourceRoot":"","sources":["../../src/UI.ts"],"names":[],"mappings":";;;AAIA;;;;;GAKG;AACH,IAAY,EA4DX;AA5DD,WAAY,EAAE;IACZ,uEAAuE;IACvE,mBAAa,CAAA;IACb,wEAAwE;IACxE,yBAAmB,CAAA;IACnB;;;OAGG;IACH,iBAAW,CAAA;IACX,4EAA4E;IAC5E,8BAAwB,CAAA;IACxB,iFAAiF;IACjF,oCAA8B,CAAA;IAC9B,+DAA+D;IAC/D,6BAAuB,CAAA;IACvB,2DAA2D;IAC3D,2BAAqB,CAAA;IACrB,6CAA6C;IAC7C,oCAA8B,CAAA;IAC9B,sCAAsC;IACtC,uBAAiB,CAAA;IACjB,sBAAsB;IACtB,8BAAwB,CAAA;IACxB,6DAA6D;IAC7D,oCAA8B,CAAA;IAC9B,oCAAoC;IACpC,wCAAkC,CAAA;IAClC,iCAAiC;IACjC,qBAAe,CAAA;IACf,6CAA6C;IAC7C,uBAAiB,CAAA;IACjB,6DAA6D;IAC7D,iBAAW,CAAA;IACX;;;;OAIG;IACH,qCAA+B,CAAA;IAC/B;;;;OAIG;IACH,6CAAuC,CAAA;IACvC,mCAAmC;IACnC,mBAAa,CAAA;IACb,mDAAmD;IACnD,qBAAe,CAAA;IACf,0CAA0C;IAC1C,yBAAmB,CAAA;IACnB,2DAA2D;IAC3D,2BAAqB,CAAA;IACrB,2CAA2C;IAC3C,gCAA0B,CAAA;IAC1B,kDAAkD;IAClD,6CAAuC,CAAA;IACvC,mCAAmC;IACnC,sCAAgC,CAAA;AAClC,CAAC,EA5DW,EAAE,kBAAF,EAAE,QA4Db;AAED,8DAA8D;AAC9D,IAAY,OAWX;AAXD,WAAY,OAAO;IACjB,2BAA2B;IAC3B,gCAAqB,CAAA;IACrB,yBAAyB;IACzB,4BAAiB,CAAA;IACjB,4CAA4C;IAC5C,8BAAmB,CAAA;IACnB,0BAA0B;IAC1B,8BAAmB,CAAA;IACnB,wBAAwB;IACxB,0BAAe,CAAA;AACjB,CAAC,EAXW,OAAO,uBAAP,OAAO,QAWlB;AAED;;;GAGG;AACH,IAAY,cASX;AATD,WAAY,cAAc;IACxB,iDAAiD;IACjD,yCAAuB,CAAA;IACvB,oDAAoD;IACpD,+CAA6B,CAAA;IAC7B,mDAAmD;IACnD,6CAA2B,CAAA;IAC3B,2BAA2B;IAC3B,uCAAqB,CAAA;AACvB,CAAC,EATW,cAAc,8BAAd,cAAc,QASzB;AAED;;;GAGG;AACH,IAAY,SAiBX;AAjBD,WAAY,SAAS;IACnB,oEAAoE;IACpE,sDAAyC,CAAA;IACzC,uEAAuE;IACvE,oDAAuC,CAAA;IACvC,mEAAmE;IACnE,oDAAuC,CAAA;IACvC,sEAAsE;IACtE,kDAAqC,CAAA;IACrC,oEAAoE;IACpE,wDAA2C,CAAA;IAC3C,uEAAuE;IACvE,sDAAyC,CAAA;IACzC,qEAAqE;IACrE,0DAA6C,CAAA;IAC7C,wEAAwE;IACxE,wDAA2C,CAAA;AAC7C,CAAC,EAjBW,SAAS,yBAAT,SAAS,QAiBpB"}
@@ -0,0 +1,42 @@
import { type DateLib } 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 declare class CalendarDay {
constructor(date: Date, displayMonth: Date, dateLib?: DateLib);
/**
* 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;
/**
* 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): boolean;
}
@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalendarDay = void 0;
const DateLib_js_1 = require("./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.
*/
class CalendarDay {
constructor(date, displayMonth, dateLib = DateLib_js_1.defaultDateLib) {
this.date = date;
this.displayMonth = displayMonth;
this.outside = Boolean(displayMonth && !dateLib.isSameMonth(date, displayMonth));
this.dateLib = dateLib;
}
/**
* 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) {
return (this.dateLib.isSameDay(day.date, this.date) &&
this.dateLib.isSameMonth(day.displayMonth, this.displayMonth));
}
}
exports.CalendarDay = CalendarDay;
//# sourceMappingURL=CalendarDay.js.map
@@ -0,0 +1 @@
{"version":3,"file":"CalendarDay.js","sourceRoot":"","sources":["../../../src/classes/CalendarDay.ts"],"names":[],"mappings":";;;AAAA,6CAA4D;AAE5D;;;;;;GAMG;AACH,MAAa,WAAW;IACtB,YACE,IAAU,EACV,YAAkB,EAClB,UAAmB,2BAAc;QAEjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,OAAO,GAAG,OAAO,CACpB,YAAY,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,YAAY,CAAC,CACzD,CAAC;QACF,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IA6BD;;;;;;OAMG;IACH,SAAS,CAAC,GAAgB;QACxB,OAAO,CACL,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC;YAC3C,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAC9D,CAAC;IACJ,CAAC;CACF;AAtDD,kCAsDC"}
@@ -0,0 +1,14 @@
import { 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 declare class CalendarMonth {
constructor(month: Date, weeks: CalendarWeek[]);
/** The date representing the first day of the month. */
date: Date;
/** The weeks that belong to this month. */
weeks: CalendarWeek[];
}
@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalendarMonth = void 0;
/**
* Represents a month in a calendar year.
*
* A `CalendarMonth` contains the weeks within the month and the date of the
* month.
*/
class CalendarMonth {
constructor(month, weeks) {
this.date = month;
this.weeks = weeks;
}
}
exports.CalendarMonth = CalendarMonth;
//# sourceMappingURL=CalendarMonth.js.map
@@ -0,0 +1 @@
{"version":3,"file":"CalendarMonth.js","sourceRoot":"","sources":["../../../src/classes/CalendarMonth.ts"],"names":[],"mappings":";;;AAEA;;;;;GAKG;AACH,MAAa,aAAa;IACxB,YAAY,KAAW,EAAE,KAAqB;QAC5C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;CAOF;AAXD,sCAWC"}
@@ -0,0 +1,13 @@
import { CalendarDay } from "./CalendarDay.js";
/**
* Represents a week in a calendar month.
*
* A `CalendarWeek` contains the days within the week and the week number.
*/
export declare class CalendarWeek {
constructor(weekNumber: number, days: CalendarDay[]);
/** The number of the week within the year. */
weekNumber: number;
/** The days that belong to this week. */
days: CalendarDay[];
}
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalendarWeek = void 0;
/**
* Represents a week in a calendar month.
*
* A `CalendarWeek` contains the days within the week and the week number.
*/
class CalendarWeek {
constructor(weekNumber, days) {
this.days = days;
this.weekNumber = weekNumber;
}
}
exports.CalendarWeek = CalendarWeek;
//# sourceMappingURL=CalendarWeek.js.map
@@ -0,0 +1 @@
{"version":3,"file":"CalendarWeek.js","sourceRoot":"","sources":["../../../src/classes/CalendarWeek.ts"],"names":[],"mappings":";;;AAEA;;;;GAIG;AACH,MAAa,YAAY;IACvB,YAAY,UAAkB,EAAE,IAAmB;QACjD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;CAOF;AAXD,oCAWC"}
@@ -0,0 +1,368 @@
import type { EndOfWeekOptions, StartOfWeekOptions, FormatOptions as DateFnsFormatOptions, Interval, GetMonthOptions, GetYearOptions, GetWeekOptions } from "date-fns";
import type { Locale } from "date-fns/locale";
import { Numerals } from "../types/shared.js";
export type { Locale } from "date-fns/locale";
export type { Month as DateFnsMonth } from "date-fns";
/**
* @ignore
* @deprecated Use {@link DateLibOptions} instead.
*/
export type FormatOptions = DateLibOptions;
/**
* @ignore
* @deprecated Use {@link DateLibOptions} instead.
*/
export type LabelOptions = DateLibOptions;
/**
* The options for the `DateLib` class.
*
* Extends `date-fns` [format](https://date-fns.org/docs/format),
* [startOfWeek](https://date-fns.org/docs/startOfWeek) and
* [endOfWeek](https://date-fns.org/docs/endOfWeek) options.
*
* @since 9.2.0
*/
export interface DateLibOptions extends DateFnsFormatOptions, StartOfWeekOptions, EndOfWeekOptions {
/** A constructor for the `Date` object. */
Date?: typeof Date;
/** A locale to use for formatting dates. */
locale?: Locale;
/**
* A time zone to use for dates.
*
* @since 9.5.0
*/
timeZone?: string;
/**
* The numbering system to use for formatting numbers.
*
* @since 9.5.0
*/
numerals?: Numerals;
}
/**
* A wrapper class around [date-fns](http://date-fns.org) that provides utility
* methods for date manipulation and formatting.
*
* @since 9.2.0
* @example
* const dateLib = new DateLib({ locale: es });
* const newDate = dateLib.addDays(new Date(), 5);
*/
export declare class DateLib {
/** The options for configuring the date library. */
readonly options: DateLibOptions;
/** Overrides for the default date library functions. */
readonly overrides?: Partial<typeof DateLib.prototype>;
/**
* Creates an instance of `DateLib`.
*
* @param options Configuration options for the date library.
* @param overrides Custom overrides for the date library functions.
*/
constructor(options?: DateLibOptions, overrides?: Partial<typeof DateLib.prototype>);
/**
* Generates a mapping of Arabic digits (0-9) to the target numbering system
* digits.
*
* @since 9.5.0
* @returns A record mapping Arabic digits to the target numerals.
*/
private getDigitMap;
/**
* Replaces Arabic digits in a string with the target numbering system digits.
*
* @since 9.5.0
* @param input The string containing Arabic digits.
* @returns The string with digits replaced.
*/
private replaceDigits;
/**
* Formats a number using the configured numbering system.
*
* @since 9.5.0
* @param value The number to format.
* @returns The formatted number as a string.
*/
formatNumber(value: number | string): string;
/**
* Reference to the built-in Date constructor.
*
* @deprecated Use `newDate()` or `today()`.
*/
Date: typeof Date;
/**
* Creates a new `Date` object representing today's date.
*
* @since 9.5.0
* @returns A `Date` object for today's date.
*/
today: () => Date;
/**
* Creates a new `Date` object with the specified year, month, and day.
*
* @since 9.5.0
* @param year The year.
* @param monthIndex The month (0-11).
* @param date The day of the month.
* @returns A new `Date` object.
*/
newDate: (year: number, monthIndex: number, date: number) => Date;
/**
* Adds the specified number of days to the given date.
*
* @param date The date to add days to.
* @param amount The number of days to add.
* @returns The new date with the days added.
*/
addDays: (date: Date, amount: number) => Date;
/**
* Adds the specified number of months to the given date.
*
* @param date The date to add months to.
* @param amount The number of months to add.
* @returns The new date with the months added.
*/
addMonths: (date: Date, amount: number) => Date;
/**
* Adds the specified number of weeks to the given date.
*
* @param date The date to add weeks to.
* @param amount The number of weeks to add.
* @returns The new date with the weeks added.
*/
addWeeks: (date: Date, amount: number) => Date;
/**
* Adds the specified number of years to the given date.
*
* @param date The date to add years to.
* @param amount The number of years to add.
* @returns The new date with the years added.
*/
addYears: (date: Date, amount: number) => Date;
/**
* Returns the number of calendar days between the given dates.
*
* @param dateLeft The later date.
* @param dateRight The earlier date.
* @returns The number of calendar days between the dates.
*/
differenceInCalendarDays: (dateLeft: Date, dateRight: Date) => number;
/**
* Returns the number of calendar months between the given dates.
*
* @param dateLeft The later date.
* @param dateRight The earlier date.
* @returns The number of calendar months between the dates.
*/
differenceInCalendarMonths: (dateLeft: Date, dateRight: Date) => number;
/**
* Returns the months between the given dates.
*
* @param interval The interval to get the months for.
*/
eachMonthOfInterval: (interval: Interval) => Date[];
/**
* Returns the end of the broadcast week for the given date.
*
* @param date The original date.
* @returns The end of the broadcast week.
*/
endOfBroadcastWeek: (date: Date) => Date;
/**
* Returns the end of the ISO week for the given date.
*
* @param date The original date.
* @returns The end of the ISO week.
*/
endOfISOWeek: (date: Date) => Date;
/**
* Returns the end of the month for the given date.
*
* @param date The original date.
* @returns The end of the month.
*/
endOfMonth: (date: Date) => Date;
/**
* Returns the end of the week for the given date.
*
* @param date The original date.
* @returns The end of the week.
*/
endOfWeek: (date: Date, options?: EndOfWeekOptions<Date>) => Date;
/**
* Returns the end of the year for the given date.
*
* @param date The original date.
* @returns The end of the year.
*/
endOfYear: (date: Date) => Date;
/**
* Formats the given date using the specified format string.
*
* @param date The date to format.
* @param formatStr The format string.
* @returns The formatted date string.
*/
format: (date: Date, formatStr: string, options?: DateFnsFormatOptions) => string;
/**
* Returns the ISO week number for the given date.
*
* @param date The date to get the ISO week number for.
* @returns The ISO week number.
*/
getISOWeek: (date: Date) => number;
/**
* Returns the month of the given date.
*
* @param date The date to get the month for.
* @returns The month.
*/
getMonth: (date: Date, options?: GetMonthOptions) => number;
/**
* Returns the year of the given date.
*
* @param date The date to get the year for.
* @returns The year.
*/
getYear: (date: Date, options?: GetYearOptions) => number;
/**
* Returns the local week number for the given date.
*
* @param date The date to get the week number for.
* @returns The week number.
*/
getWeek: (date: Date, options?: GetWeekOptions) => number;
/**
* Checks if the first date is after the second date.
*
* @param date The date to compare.
* @param dateToCompare The date to compare with.
* @returns True if the first date is after the second date.
*/
isAfter: (date: Date, dateToCompare: Date) => boolean;
/**
* Checks if the first date is before the second date.
*
* @param date The date to compare.
* @param dateToCompare The date to compare with.
* @returns True if the first date is before the second date.
*/
isBefore: (date: Date, dateToCompare: Date) => boolean;
/**
* Checks if the given value is a Date object.
*
* @param value The value to check.
* @returns True if the value is a Date object.
*/
isDate: (value: unknown) => value is Date;
/**
* Checks if the given dates are on the same day.
*
* @param dateLeft The first date to compare.
* @param dateRight The second date to compare.
* @returns True if the dates are on the same day.
*/
isSameDay: (dateLeft: Date, dateRight: Date) => boolean;
/**
* Checks if the given dates are in the same month.
*
* @param dateLeft The first date to compare.
* @param dateRight The second date to compare.
* @returns True if the dates are in the same month.
*/
isSameMonth: (dateLeft: Date, dateRight: Date) => boolean;
/**
* Checks if the given dates are in the same year.
*
* @param dateLeft The first date to compare.
* @param dateRight The second date to compare.
* @returns True if the dates are in the same year.
*/
isSameYear: (dateLeft: Date, dateRight: Date) => boolean;
/**
* Returns the latest date in the given array of dates.
*
* @param dates The array of dates to compare.
* @returns The latest date.
*/
max: (dates: Date[]) => Date;
/**
* Returns the earliest date in the given array of dates.
*
* @param dates The array of dates to compare.
* @returns The earliest date.
*/
min: (dates: Date[]) => Date;
/**
* Sets the month of the given date.
*
* @param date The date to set the month on.
* @param month The month to set (0-11).
* @returns The new date with the month set.
*/
setMonth: (date: Date, month: number) => Date;
/**
* Sets the year of the given date.
*
* @param date The date to set the year on.
* @param year The year to set.
* @returns The new date with the year set.
*/
setYear: (date: Date, year: number) => Date;
/**
* Returns the start of the broadcast week for the given date.
*
* @param date The original date.
* @returns The start of the broadcast week.
*/
startOfBroadcastWeek: (date: Date, dateLib: DateLib) => Date;
/**
* Returns the start of the day for the given date.
*
* @param date The original date.
* @returns The start of the day.
*/
startOfDay: (date: Date) => Date;
/**
* Returns the start of the ISO week for the given date.
*
* @param date The original date.
* @returns The start of the ISO week.
*/
startOfISOWeek: (date: Date) => Date;
/**
* Returns the start of the month for the given date.
*
* @param date The original date.
* @returns The start of the month.
*/
startOfMonth: (date: Date) => Date;
/**
* Returns the start of the week for the given date.
*
* @param date The original date.
* @returns The start of the week.
*/
startOfWeek: (date: Date, options?: StartOfWeekOptions) => Date;
/**
* Returns the start of the year for the given date.
*
* @param date The original date.
* @returns The start of the year.
*/
startOfYear: (date: Date) => Date;
}
/** The default locale (English). */
export { enUS as defaultLocale } from "date-fns/locale/en-US";
/**
* The default date library with English locale.
*
* @since 9.2.0
*/
export declare const defaultDateLib: DateLib;
/**
* @ignore
* @deprecated Use `defaultDateLib`.
*/
export declare const dateLib: DateLib;
@@ -0,0 +1,501 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.dateLib = exports.defaultDateLib = exports.defaultLocale = exports.DateLib = void 0;
const tz_1 = require("@date-fns/tz");
const date_fns_1 = require("date-fns");
const en_US_1 = require("date-fns/locale/en-US");
const endOfBroadcastWeek_js_1 = require("../helpers/endOfBroadcastWeek.js");
const startOfBroadcastWeek_js_1 = require("../helpers/startOfBroadcastWeek.js");
/**
* A wrapper class around [date-fns](http://date-fns.org) that provides utility
* methods for date manipulation and formatting.
*
* @since 9.2.0
* @example
* const dateLib = new DateLib({ locale: es });
* const newDate = dateLib.addDays(new Date(), 5);
*/
class DateLib {
/**
* Creates an instance of `DateLib`.
*
* @param options Configuration options for the date library.
* @param overrides Custom overrides for the date library functions.
*/
constructor(options, overrides) {
/**
* Reference to the built-in Date constructor.
*
* @deprecated Use `newDate()` or `today()`.
*/
this.Date = Date;
/**
* Creates a new `Date` object representing today's date.
*
* @since 9.5.0
* @returns A `Date` object for today's date.
*/
this.today = () => {
if (this.overrides?.today) {
return this.overrides.today();
}
if (this.options.timeZone) {
return tz_1.TZDate.tz(this.options.timeZone);
}
return new this.Date();
};
/**
* Creates a new `Date` object with the specified year, month, and day.
*
* @since 9.5.0
* @param year The year.
* @param monthIndex The month (0-11).
* @param date The day of the month.
* @returns A new `Date` object.
*/
this.newDate = (year, monthIndex, date) => {
if (this.overrides?.newDate) {
return this.overrides.newDate(year, monthIndex, date);
}
if (this.options.timeZone) {
return new tz_1.TZDate(year, monthIndex, date, this.options.timeZone);
}
return new Date(year, monthIndex, date);
};
/**
* Adds the specified number of days to the given date.
*
* @param date The date to add days to.
* @param amount The number of days to add.
* @returns The new date with the days added.
*/
this.addDays = (date, amount) => {
return this.overrides?.addDays
? this.overrides.addDays(date, amount)
: (0, date_fns_1.addDays)(date, amount);
};
/**
* Adds the specified number of months to the given date.
*
* @param date The date to add months to.
* @param amount The number of months to add.
* @returns The new date with the months added.
*/
this.addMonths = (date, amount) => {
return this.overrides?.addMonths
? this.overrides.addMonths(date, amount)
: (0, date_fns_1.addMonths)(date, amount);
};
/**
* Adds the specified number of weeks to the given date.
*
* @param date The date to add weeks to.
* @param amount The number of weeks to add.
* @returns The new date with the weeks added.
*/
this.addWeeks = (date, amount) => {
return this.overrides?.addWeeks
? this.overrides.addWeeks(date, amount)
: (0, date_fns_1.addWeeks)(date, amount);
};
/**
* Adds the specified number of years to the given date.
*
* @param date The date to add years to.
* @param amount The number of years to add.
* @returns The new date with the years added.
*/
this.addYears = (date, amount) => {
return this.overrides?.addYears
? this.overrides.addYears(date, amount)
: (0, date_fns_1.addYears)(date, amount);
};
/**
* Returns the number of calendar days between the given dates.
*
* @param dateLeft The later date.
* @param dateRight The earlier date.
* @returns The number of calendar days between the dates.
*/
this.differenceInCalendarDays = (dateLeft, dateRight) => {
return this.overrides?.differenceInCalendarDays
? this.overrides.differenceInCalendarDays(dateLeft, dateRight)
: (0, date_fns_1.differenceInCalendarDays)(dateLeft, dateRight);
};
/**
* Returns the number of calendar months between the given dates.
*
* @param dateLeft The later date.
* @param dateRight The earlier date.
* @returns The number of calendar months between the dates.
*/
this.differenceInCalendarMonths = (dateLeft, dateRight) => {
return this.overrides?.differenceInCalendarMonths
? this.overrides.differenceInCalendarMonths(dateLeft, dateRight)
: (0, date_fns_1.differenceInCalendarMonths)(dateLeft, dateRight);
};
/**
* Returns the months between the given dates.
*
* @param interval The interval to get the months for.
*/
this.eachMonthOfInterval = (interval) => {
return this.overrides?.eachMonthOfInterval
? this.overrides.eachMonthOfInterval(interval)
: (0, date_fns_1.eachMonthOfInterval)(interval);
};
/**
* Returns the end of the broadcast week for the given date.
*
* @param date The original date.
* @returns The end of the broadcast week.
*/
this.endOfBroadcastWeek = (date) => {
return this.overrides?.endOfBroadcastWeek
? this.overrides.endOfBroadcastWeek(date)
: (0, endOfBroadcastWeek_js_1.endOfBroadcastWeek)(date, this);
};
/**
* Returns the end of the ISO week for the given date.
*
* @param date The original date.
* @returns The end of the ISO week.
*/
this.endOfISOWeek = (date) => {
return this.overrides?.endOfISOWeek
? this.overrides.endOfISOWeek(date)
: (0, date_fns_1.endOfISOWeek)(date);
};
/**
* Returns the end of the month for the given date.
*
* @param date The original date.
* @returns The end of the month.
*/
this.endOfMonth = (date) => {
return this.overrides?.endOfMonth
? this.overrides.endOfMonth(date)
: (0, date_fns_1.endOfMonth)(date);
};
/**
* Returns the end of the week for the given date.
*
* @param date The original date.
* @returns The end of the week.
*/
this.endOfWeek = (date, options) => {
return this.overrides?.endOfWeek
? this.overrides.endOfWeek(date, options)
: (0, date_fns_1.endOfWeek)(date, this.options);
};
/**
* Returns the end of the year for the given date.
*
* @param date The original date.
* @returns The end of the year.
*/
this.endOfYear = (date) => {
return this.overrides?.endOfYear
? this.overrides.endOfYear(date)
: (0, date_fns_1.endOfYear)(date);
};
/**
* Formats the given date using the specified format string.
*
* @param date The date to format.
* @param formatStr The format string.
* @returns The formatted date string.
*/
this.format = (date, formatStr, options) => {
const formatted = this.overrides?.format
? this.overrides.format(date, formatStr, this.options)
: (0, date_fns_1.format)(date, formatStr, this.options);
if (this.options.numerals && this.options.numerals !== "latn") {
return this.replaceDigits(formatted);
}
return formatted;
};
/**
* Returns the ISO week number for the given date.
*
* @param date The date to get the ISO week number for.
* @returns The ISO week number.
*/
this.getISOWeek = (date) => {
return this.overrides?.getISOWeek
? this.overrides.getISOWeek(date)
: (0, date_fns_1.getISOWeek)(date);
};
/**
* Returns the month of the given date.
*
* @param date The date to get the month for.
* @returns The month.
*/
this.getMonth = (date, options) => {
return this.overrides?.getMonth
? this.overrides.getMonth(date, this.options)
: (0, date_fns_1.getMonth)(date, this.options);
};
/**
* Returns the year of the given date.
*
* @param date The date to get the year for.
* @returns The year.
*/
this.getYear = (date, options) => {
return this.overrides?.getYear
? this.overrides.getYear(date, this.options)
: (0, date_fns_1.getYear)(date, this.options);
};
/**
* Returns the local week number for the given date.
*
* @param date The date to get the week number for.
* @returns The week number.
*/
this.getWeek = (date, options) => {
return this.overrides?.getWeek
? this.overrides.getWeek(date, this.options)
: (0, date_fns_1.getWeek)(date, this.options);
};
/**
* Checks if the first date is after the second date.
*
* @param date The date to compare.
* @param dateToCompare The date to compare with.
* @returns True if the first date is after the second date.
*/
this.isAfter = (date, dateToCompare) => {
return this.overrides?.isAfter
? this.overrides.isAfter(date, dateToCompare)
: (0, date_fns_1.isAfter)(date, dateToCompare);
};
/**
* Checks if the first date is before the second date.
*
* @param date The date to compare.
* @param dateToCompare The date to compare with.
* @returns True if the first date is before the second date.
*/
this.isBefore = (date, dateToCompare) => {
return this.overrides?.isBefore
? this.overrides.isBefore(date, dateToCompare)
: (0, date_fns_1.isBefore)(date, dateToCompare);
};
/**
* Checks if the given value is a Date object.
*
* @param value The value to check.
* @returns True if the value is a Date object.
*/
this.isDate = (value) => {
return this.overrides?.isDate
? this.overrides.isDate(value)
: (0, date_fns_1.isDate)(value);
};
/**
* Checks if the given dates are on the same day.
*
* @param dateLeft The first date to compare.
* @param dateRight The second date to compare.
* @returns True if the dates are on the same day.
*/
this.isSameDay = (dateLeft, dateRight) => {
return this.overrides?.isSameDay
? this.overrides.isSameDay(dateLeft, dateRight)
: (0, date_fns_1.isSameDay)(dateLeft, dateRight);
};
/**
* Checks if the given dates are in the same month.
*
* @param dateLeft The first date to compare.
* @param dateRight The second date to compare.
* @returns True if the dates are in the same month.
*/
this.isSameMonth = (dateLeft, dateRight) => {
return this.overrides?.isSameMonth
? this.overrides.isSameMonth(dateLeft, dateRight)
: (0, date_fns_1.isSameMonth)(dateLeft, dateRight);
};
/**
* Checks if the given dates are in the same year.
*
* @param dateLeft The first date to compare.
* @param dateRight The second date to compare.
* @returns True if the dates are in the same year.
*/
this.isSameYear = (dateLeft, dateRight) => {
return this.overrides?.isSameYear
? this.overrides.isSameYear(dateLeft, dateRight)
: (0, date_fns_1.isSameYear)(dateLeft, dateRight);
};
/**
* Returns the latest date in the given array of dates.
*
* @param dates The array of dates to compare.
* @returns The latest date.
*/
this.max = (dates) => {
return this.overrides?.max ? this.overrides.max(dates) : (0, date_fns_1.max)(dates);
};
/**
* Returns the earliest date in the given array of dates.
*
* @param dates The array of dates to compare.
* @returns The earliest date.
*/
this.min = (dates) => {
return this.overrides?.min ? this.overrides.min(dates) : (0, date_fns_1.min)(dates);
};
/**
* Sets the month of the given date.
*
* @param date The date to set the month on.
* @param month The month to set (0-11).
* @returns The new date with the month set.
*/
this.setMonth = (date, month) => {
return this.overrides?.setMonth
? this.overrides.setMonth(date, month)
: (0, date_fns_1.setMonth)(date, month);
};
/**
* Sets the year of the given date.
*
* @param date The date to set the year on.
* @param year The year to set.
* @returns The new date with the year set.
*/
this.setYear = (date, year) => {
return this.overrides?.setYear
? this.overrides.setYear(date, year)
: (0, date_fns_1.setYear)(date, year);
};
/**
* Returns the start of the broadcast week for the given date.
*
* @param date The original date.
* @returns The start of the broadcast week.
*/
this.startOfBroadcastWeek = (date, dateLib) => {
return this.overrides?.startOfBroadcastWeek
? this.overrides.startOfBroadcastWeek(date, this)
: (0, startOfBroadcastWeek_js_1.startOfBroadcastWeek)(date, this);
};
/**
* Returns the start of the day for the given date.
*
* @param date The original date.
* @returns The start of the day.
*/
this.startOfDay = (date) => {
return this.overrides?.startOfDay
? this.overrides.startOfDay(date)
: (0, date_fns_1.startOfDay)(date);
};
/**
* Returns the start of the ISO week for the given date.
*
* @param date The original date.
* @returns The start of the ISO week.
*/
this.startOfISOWeek = (date) => {
return this.overrides?.startOfISOWeek
? this.overrides.startOfISOWeek(date)
: (0, date_fns_1.startOfISOWeek)(date);
};
/**
* Returns the start of the month for the given date.
*
* @param date The original date.
* @returns The start of the month.
*/
this.startOfMonth = (date) => {
return this.overrides?.startOfMonth
? this.overrides.startOfMonth(date)
: (0, date_fns_1.startOfMonth)(date);
};
/**
* Returns the start of the week for the given date.
*
* @param date The original date.
* @returns The start of the week.
*/
this.startOfWeek = (date, options) => {
return this.overrides?.startOfWeek
? this.overrides.startOfWeek(date, this.options)
: (0, date_fns_1.startOfWeek)(date, this.options);
};
/**
* Returns the start of the year for the given date.
*
* @param date The original date.
* @returns The start of the year.
*/
this.startOfYear = (date) => {
return this.overrides?.startOfYear
? this.overrides.startOfYear(date)
: (0, date_fns_1.startOfYear)(date);
};
this.options = { locale: en_US_1.enUS, ...options };
this.overrides = overrides;
}
/**
* Generates a mapping of Arabic digits (0-9) to the target numbering system
* digits.
*
* @since 9.5.0
* @returns A record mapping Arabic digits to the target numerals.
*/
getDigitMap() {
const { numerals = "latn" } = this.options;
// Use Intl.NumberFormat to create a formatter with the specified numbering system
const formatter = new Intl.NumberFormat("en-US", {
numberingSystem: numerals
});
// Map Arabic digits (0-9) to the target numerals
const digitMap = {};
for (let i = 0; i < 10; i++) {
digitMap[i.toString()] = formatter.format(i);
}
return digitMap;
}
/**
* Replaces Arabic digits in a string with the target numbering system digits.
*
* @since 9.5.0
* @param input The string containing Arabic digits.
* @returns The string with digits replaced.
*/
replaceDigits(input) {
const digitMap = this.getDigitMap();
return input.replace(/\d/g, (digit) => digitMap[digit] || digit);
}
/**
* Formats a number using the configured numbering system.
*
* @since 9.5.0
* @param value The number to format.
* @returns The formatted number as a string.
*/
formatNumber(value) {
return this.replaceDigits(value.toString());
}
}
exports.DateLib = DateLib;
/** The default locale (English). */
var en_US_2 = require("date-fns/locale/en-US");
Object.defineProperty(exports, "defaultLocale", { enumerable: true, get: function () { return en_US_2.enUS; } });
/**
* The default date library with English locale.
*
* @since 9.2.0
*/
exports.defaultDateLib = new DateLib();
/**
* @ignore
* @deprecated Use `defaultDateLib`.
*/
exports.dateLib = exports.defaultDateLib;
//# sourceMappingURL=DateLib.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,4 @@
export * from "./CalendarDay.js";
export * from "./CalendarMonth.js";
export * from "./CalendarWeek.js";
export * from "./DateLib.js";
@@ -0,0 +1,21 @@
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", { value: true });
__exportStar(require("./CalendarDay.js"), exports);
__exportStar(require("./CalendarMonth.js"), exports);
__exportStar(require("./CalendarWeek.js"), exports);
__exportStar(require("./DateLib.js"), exports);
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/classes/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mDAAiC;AACjC,qDAAmC;AACnC,oDAAkC;AAClC,+CAA6B"}
@@ -0,0 +1,9 @@
import React, { type ButtonHTMLAttributes } from "react";
/**
* Render the button elements in the calendar.
*
* @private
* @deprecated Use `PreviousMonthButton` or `@link NextMonthButton` instead.
*/
export declare function Button(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
export type ButtonProps = Parameters<typeof Button>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = Button;
const react_1 = __importDefault(require("react"));
/**
* Render the button elements in the calendar.
*
* @private
* @deprecated Use `PreviousMonthButton` or `@link NextMonthButton` instead.
*/
function Button(props) {
return react_1.default.createElement("button", { ...props });
}
//# sourceMappingURL=Button.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":";;;;;AAQA,wBAEC;AAVD,kDAAyD;AAEzD;;;;;GAKG;AACH,SAAgB,MAAM,CAAC,KAA8C;IACnE,OAAO,6CAAY,KAAK,GAAI,CAAC;AAC/B,CAAC"}
@@ -0,0 +1,9 @@
import React, { type HTMLAttributes } from "react";
/**
* Render the label in the month caption.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function CaptionLabel(props: HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
export type CaptionLabelProps = Parameters<typeof CaptionLabel>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CaptionLabel = CaptionLabel;
const react_1 = __importDefault(require("react"));
/**
* Render the label in the month caption.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function CaptionLabel(props) {
return react_1.default.createElement("span", { ...props });
}
//# sourceMappingURL=CaptionLabel.js.map
@@ -0,0 +1 @@
{"version":3,"file":"CaptionLabel.js","sourceRoot":"","sources":["../../../src/components/CaptionLabel.tsx"],"names":[],"mappings":";;;;;AAQA,oCAEC;AAVD,kDAAmD;AAEnD;;;;;GAKG;AACH,SAAgB,YAAY,CAAC,KAAsC;IACjE,OAAO,2CAAU,KAAK,GAAI,CAAC;AAC7B,CAAC"}
@@ -0,0 +1,21 @@
import React from "react";
/**
* Render the chevron icon used in the navigation buttons and dropdowns.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Chevron(props: {
className?: string;
/**
* The size of the chevron.
*
* @defaultValue 24
*/
size?: number;
/** Set to `true` to disable the chevron. */
disabled?: boolean;
/** The orientation of the chevron. */
orientation?: "up" | "down" | "left" | "right";
}): React.JSX.Element;
export type ChevronProps = Parameters<typeof Chevron>[0];
@@ -0,0 +1,22 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Chevron = Chevron;
const react_1 = __importDefault(require("react"));
/**
* Render the chevron icon used in the navigation buttons and dropdowns.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Chevron(props) {
const { size = 24, orientation = "left", className } = props;
return (react_1.default.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24" },
orientation === "up" && (react_1.default.createElement("polygon", { points: "6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" })),
orientation === "down" && (react_1.default.createElement("polygon", { points: "6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" })),
orientation === "left" && (react_1.default.createElement("polygon", { points: "16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20" })),
orientation === "right" && (react_1.default.createElement("polygon", { points: "8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20" }))));
}
//# sourceMappingURL=Chevron.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Chevron.js","sourceRoot":"","sources":["../../../src/components/Chevron.tsx"],"names":[],"mappings":";;;;;AAQA,0BA+BC;AAvCD,kDAA0B;AAE1B;;;;;GAKG;AACH,SAAgB,OAAO,CAAC,KAYvB;IACC,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE7D,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW;QACtE,WAAW,KAAK,IAAI,IAAI,CACvB,2CAAS,MAAM,EAAC,qDAAqD,GAAG,CACzE;QACA,WAAW,KAAK,MAAM,IAAI,CACzB,2CAAS,MAAM,EAAC,kDAAkD,GAAG,CACtE;QACA,WAAW,KAAK,MAAM,IAAI,CACzB,2CAAS,MAAM,EAAC,uEAAuE,GAAG,CAC3F;QACA,WAAW,KAAK,OAAO,IAAI,CAC1B,2CAAS,MAAM,EAAC,uEAAuE,GAAG,CAC3F,CACG,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,20 @@
import React, { type HTMLAttributes } from "react";
import type { CalendarDay } from "../classes/index.js";
import type { Modifiers } from "../types/index.js";
/**
* Render a grid cell for a specific day in the calendar.
*
* Handles interaction and focus for the day. If you only need to change the
* content of the day cell, consider swapping the `DayButton` component
* instead.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Day(props: {
/** The day to render. */
day: CalendarDay;
/** The modifiers to apply to the day. */
modifiers: Modifiers;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type DayProps = Parameters<typeof Day>[0];
@@ -0,0 +1,22 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Day = Day;
const react_1 = __importDefault(require("react"));
/**
* Render a grid cell for a specific day in the calendar.
*
* Handles interaction and focus for the day. If you only need to change the
* content of the day cell, consider swapping the `DayButton` component
* instead.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Day(props) {
const { day, modifiers, ...tdProps } = props;
return react_1.default.createElement("td", { ...tdProps });
}
//# sourceMappingURL=Day.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Day.js","sourceRoot":"","sources":["../../../src/components/Day.tsx"],"names":[],"mappings":";;;;;AAeA,kBAUC;AAzBD,kDAAmD;AAKnD;;;;;;;;;GASG;AACH,SAAgB,GAAG,CACjB,KAKkC;IAElC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC;IAC7C,OAAO,yCAAQ,OAAO,GAAI,CAAC;AAC7B,CAAC"}
@@ -0,0 +1,16 @@
import React, { type ButtonHTMLAttributes } from "react";
import type { CalendarDay } from "../classes/index.js";
import type { Modifiers } from "../types/index.js";
/**
* Render a button for a specific day in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function DayButton(props: {
/** The day to render. */
day: CalendarDay;
/** The modifiers to apply to the day. */
modifiers: Modifiers;
} & ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
export type DayButtonProps = Parameters<typeof DayButton>[0];
@@ -0,0 +1,23 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DayButton = DayButton;
const react_1 = __importDefault(require("react"));
/**
* Render a button for a specific day in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function DayButton(props) {
const { day, modifiers, ...buttonProps } = props;
const ref = react_1.default.useRef(null);
react_1.default.useEffect(() => {
if (modifiers.focused)
ref.current?.focus();
}, [modifiers.focused]);
return react_1.default.createElement("button", { ref: ref, ...buttonProps });
}
//# sourceMappingURL=DayButton.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DayButton.js","sourceRoot":"","sources":["../../../src/components/DayButton.tsx"],"names":[],"mappings":";;;;;AAWA,8BAeC;AA1BD,kDAAyD;AAKzD;;;;;GAKG;AACH,SAAgB,SAAS,CACvB,KAK2C;IAE3C,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,GAAG,GAAG,eAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,CAAC,OAAO;YAAE,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9C,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACxB,OAAO,0CAAQ,GAAG,EAAE,GAAG,KAAM,WAAW,GAAI,CAAC;AAC/C,CAAC"}
@@ -0,0 +1,32 @@
import React, { type SelectHTMLAttributes } from "react";
import type { ClassNames, CustomComponents } from "../types/index.js";
/** An option to use in the dropdown. Maps to the `<option>` HTML element. */
export type DropdownOption = {
/** The value of the option. */
value: number;
/** The label of the option. */
label: string;
/** Whether the dropdown option is disabled (e.g., out of the calendar range). */
disabled: boolean;
};
/**
* Render a dropdown component for navigation in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Dropdown(props: {
/**
* @deprecated Use {@link useDayPicker} hook to get the list of internal
* components.
*/
components: CustomComponents;
/**
* @deprecated Use {@link useDayPicker} hook to get the list of internal
* class names.
*/
classNames: ClassNames;
/** The options to display in the dropdown. */
options?: DropdownOption[] | undefined;
} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element;
export type DropdownProps = Parameters<typeof Dropdown>[0];
@@ -0,0 +1,25 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dropdown = Dropdown;
const react_1 = __importDefault(require("react"));
const UI_js_1 = require("../UI.js");
/**
* Render a dropdown component for navigation in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Dropdown(props) {
const { options, className, components, classNames, ...selectProps } = props;
const cssClassSelect = [classNames[UI_js_1.UI.Dropdown], className].join(" ");
const selectedOption = options?.find(({ value }) => value === selectProps.value);
return (react_1.default.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI_js_1.UI.DropdownRoot] },
react_1.default.createElement(components.Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (react_1.default.createElement(components.Option, { key: value, value: value, disabled: disabled }, label)))),
react_1.default.createElement("span", { className: classNames[UI_js_1.UI.CaptionLabel], "aria-hidden": true },
selectedOption?.label,
react_1.default.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI_js_1.UI.Chevron] }))));
}
//# sourceMappingURL=Dropdown.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Dropdown.tsx"],"names":[],"mappings":";;;;;AAqBA,4BA6CC;AAlED,kDAAyD;AAEzD,oCAA8B;AAa9B;;;;;GAKG;AACH,SAAgB,QAAQ,CACtB,KAa6D;IAE7D,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAC;IAE7E,MAAM,cAAc,GAAG,CAAC,UAAU,CAAC,UAAE,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtE,MAAM,cAAc,GAAG,OAAO,EAAE,IAAI,CAClC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,CAC3C,CAAC;IACF,OAAO,CACL,yDACiB,WAAW,CAAC,QAAQ,EACnC,SAAS,EAAE,UAAU,CAAC,UAAE,CAAC,YAAY,CAAC;QAEtC,8BAAC,UAAU,CAAC,MAAM,IAAC,SAAS,EAAE,cAAc,KAAM,WAAW,IAC1D,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC5C,8BAAC,UAAU,CAAC,MAAM,IAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAC5D,KAAK,CACY,CACrB,CAAC,CACgB;QACpB,wCAAM,SAAS,EAAE,UAAU,CAAC,UAAE,CAAC,YAAY,CAAC;YACzC,cAAc,EAAE,KAAK;YACtB,8BAAC,UAAU,CAAC,OAAO,IACjB,WAAW,EAAC,MAAM,EAClB,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,UAAU,CAAC,UAAE,CAAC,OAAO,CAAC,GACjC,CACG,CACF,CACR,CAAC;AACJ,CAAC"}
@@ -0,0 +1,9 @@
import React, { type HTMLAttributes } from "react";
/**
* Render the navigation dropdowns for the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function DropdownNav(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type DropdownNavProps = Parameters<typeof DropdownNav>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownNav = DropdownNav;
const react_1 = __importDefault(require("react"));
/**
* Render the navigation dropdowns for the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function DropdownNav(props) {
return react_1.default.createElement("div", { ...props });
}
//# sourceMappingURL=DropdownNav.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DropdownNav.js","sourceRoot":"","sources":["../../../src/components/DropdownNav.tsx"],"names":[],"mappings":";;;;;AAQA,kCAEC;AAVD,kDAAmD;AAEnD;;;;;GAKG;AACH,SAAgB,WAAW,CAAC,KAAqC;IAC/D,OAAO,0CAAS,KAAK,GAAI,CAAC;AAC5B,CAAC"}
@@ -0,0 +1,9 @@
import React, { type HTMLAttributes } from "react";
/**
* Render the footer of the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Footer(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type FooterProps = Parameters<typeof Footer>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Footer = Footer;
const react_1 = __importDefault(require("react"));
/**
* Render the footer of the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Footer(props) {
return react_1.default.createElement("div", { ...props });
}
//# sourceMappingURL=Footer.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/Footer.tsx"],"names":[],"mappings":";;;;;AAQA,wBAEC;AAVD,kDAAmD;AAEnD;;;;;GAKG;AACH,SAAgB,MAAM,CAAC,KAAqC;IAC1D,OAAO,0CAAS,KAAK,GAAI,CAAC;AAC5B,CAAC"}
@@ -0,0 +1,16 @@
import React, { type HTMLAttributes } from "react";
import type { CalendarMonth } from "../classes/CalendarMonth.js";
/**
* Render the grid with the weekday header row and the weeks for a specific
* month.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Month(props: {
/** The month to display in the grid. */
calendarMonth: CalendarMonth;
/** The index of the month being displayed. */
displayIndex: number;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type MonthProps = Parameters<typeof Month>[0];
@@ -0,0 +1,19 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Month = Month;
const react_1 = __importDefault(require("react"));
/**
* Render the grid with the weekday header row and the weeks for a specific
* month.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Month(props) {
const { calendarMonth, displayIndex, ...divProps } = props;
return react_1.default.createElement("div", { ...divProps }, props.children);
}
//# sourceMappingURL=Month.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Month.js","sourceRoot":"","sources":["../../../src/components/Month.tsx"],"names":[],"mappings":";;;;;AAWA,sBAUC;AArBD,kDAAmD;AAInD;;;;;;GAMG;AACH,SAAgB,KAAK,CACnB,KAKkC;IAElC,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3D,OAAO,0CAAS,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACnD,CAAC"}
@@ -0,0 +1,15 @@
import React, { type HTMLAttributes } from "react";
import type { CalendarMonth } from "../classes/index.js";
/**
* Render the caption for a month in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function MonthCaption(props: {
/** The month to display in the caption. */
calendarMonth: CalendarMonth;
/** The index of the month being displayed. */
displayIndex: number;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type MonthCaptionProps = Parameters<typeof MonthCaption>[0];
@@ -0,0 +1,18 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MonthCaption = MonthCaption;
const react_1 = __importDefault(require("react"));
/**
* Render the caption for a month in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function MonthCaption(props) {
const { calendarMonth, displayIndex, ...divProps } = props;
return react_1.default.createElement("div", { ...divProps });
}
//# sourceMappingURL=MonthCaption.js.map
@@ -0,0 +1 @@
{"version":3,"file":"MonthCaption.js","sourceRoot":"","sources":["../../../src/components/MonthCaption.tsx"],"names":[],"mappings":";;;;;AAUA,oCAUC;AApBD,kDAAmD;AAInD;;;;;GAKG;AACH,SAAgB,YAAY,CAC1B,KAKkC;IAElC,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3D,OAAO,0CAAS,QAAQ,GAAI,CAAC;AAC/B,CAAC"}
@@ -0,0 +1,9 @@
import React, { type TableHTMLAttributes } from "react";
/**
* Render the grid of days for a specific month.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function MonthGrid(props: TableHTMLAttributes<HTMLTableElement>): React.JSX.Element;
export type MonthGridProps = Parameters<typeof MonthGrid>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MonthGrid = MonthGrid;
const react_1 = __importDefault(require("react"));
/**
* Render the grid of days for a specific month.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function MonthGrid(props) {
return react_1.default.createElement("table", { ...props });
}
//# sourceMappingURL=MonthGrid.js.map
@@ -0,0 +1 @@
{"version":3,"file":"MonthGrid.js","sourceRoot":"","sources":["../../../src/components/MonthGrid.tsx"],"names":[],"mappings":";;;;;AAQA,8BAEC;AAVD,kDAAwD;AAExD;;;;;GAKG;AACH,SAAgB,SAAS,CAAC,KAA4C;IACpE,OAAO,4CAAW,KAAK,GAAI,CAAC;AAC9B,CAAC"}
@@ -0,0 +1,9 @@
import React, { type HTMLAttributes } from "react";
/**
* Render a container wrapping the month grids.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Months(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type MonthsProps = Parameters<typeof Months>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Months = Months;
const react_1 = __importDefault(require("react"));
/**
* Render a container wrapping the month grids.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Months(props) {
return react_1.default.createElement("div", { ...props });
}
//# sourceMappingURL=Months.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Months.js","sourceRoot":"","sources":["../../../src/components/Months.tsx"],"names":[],"mappings":";;;;;AAQA,wBAEC;AAVD,kDAAmD;AAEnD;;;;;GAKG;AACH,SAAgB,MAAM,CAAC,KAAqC;IAC1D,OAAO,0CAAS,KAAK,GAAI,CAAC;AAC5B,CAAC"}
@@ -0,0 +1,9 @@
import React from "react";
import { DropdownProps } from "./Dropdown.js";
/**
* Render a dropdown to navigate between months in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function MonthsDropdown(props: DropdownProps): React.JSX.Element;
@@ -0,0 +1,19 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MonthsDropdown = MonthsDropdown;
const react_1 = __importDefault(require("react"));
const useDayPicker_js_1 = require("../useDayPicker.js");
/**
* Render a dropdown to navigate between months in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function MonthsDropdown(props) {
const { components } = (0, useDayPicker_js_1.useDayPicker)();
return react_1.default.createElement(components.Dropdown, { ...props });
}
//# sourceMappingURL=MonthsDropdown.js.map
@@ -0,0 +1 @@
{"version":3,"file":"MonthsDropdown.js","sourceRoot":"","sources":["../../../src/components/MonthsDropdown.tsx"],"names":[],"mappings":";;;;;AAYA,wCAGC;AAfD,kDAA0B;AAE1B,wDAAkD;AAIlD;;;;;GAKG;AACH,SAAgB,cAAc,CAAC,KAAoB;IACjD,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,8BAAY,GAAE,CAAC;IACtC,OAAO,8BAAC,UAAU,CAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;AAC5C,CAAC"}
@@ -0,0 +1,18 @@
import React, { type MouseEventHandler, type HTMLAttributes } from "react";
/**
* Render the navigation toolbar with buttons to navigate between months.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Nav(props: {
/** Handler for the previous month button click. */
onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
/** Handler for the next month button click. */
onNextClick?: MouseEventHandler<HTMLButtonElement>;
/** The date of the previous month, if available. */
previousMonth?: Date | undefined;
/** The date of the next month, if available. */
nextMonth?: Date | undefined;
} & HTMLAttributes<HTMLElement>): React.JSX.Element;
export type NavProps = Parameters<typeof Nav>[0];
@@ -0,0 +1,65 @@
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Nav = Nav;
const react_1 = __importStar(require("react"));
const UI_js_1 = require("../UI.js");
const useDayPicker_js_1 = require("../useDayPicker.js");
/**
* Render the navigation toolbar with buttons to navigate between months.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Nav(props) {
const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
const { components, classNames, labels: { labelPrevious, labelNext } } = (0, useDayPicker_js_1.useDayPicker)();
const handleNextClick = (0, react_1.useCallback)((e) => {
if (nextMonth) {
onNextClick?.(e);
}
}, [nextMonth, onNextClick]);
const handlePreviousClick = (0, react_1.useCallback)((e) => {
if (previousMonth) {
onPreviousClick?.(e);
}
}, [previousMonth, onPreviousClick]);
return (react_1.default.createElement("nav", { ...navProps },
react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick },
react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: "left" })),
react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick },
react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, orientation: "right", className: classNames[UI_js_1.UI.Chevron] }))));
}
//# sourceMappingURL=Nav.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Nav.js","sourceRoot":"","sources":["../../../src/components/Nav.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,kBA4EC;AA3FD,+CAIe;AAEf,oCAA8B;AAC9B,wDAAkD;AAElD;;;;;GAKG;AACH,SAAgB,GAAG,CACjB,KAS+B;IAE/B,MAAM,EACJ,eAAe,EACf,WAAW,EACX,aAAa,EACb,SAAS,EACT,GAAG,QAAQ,EACZ,GAAG,KAAK,CAAC;IAEV,MAAM,EACJ,UAAU,EACV,UAAU,EACV,MAAM,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EACrC,GAAG,IAAA,8BAAY,GAAE,CAAC;IAEnB,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CAAC,CAAsC,EAAE,EAAE;QACzC,IAAI,SAAS,EAAE,CAAC;YACd,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EACD,CAAC,SAAS,EAAE,WAAW,CAAC,CACzB,CAAC;IAEF,MAAM,mBAAmB,GAAG,IAAA,mBAAW,EACrC,CAAC,CAAsC,EAAE,EAAE;QACzC,IAAI,aAAa,EAAE,CAAC;YAClB,eAAe,EAAE,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,eAAe,CAAC,CACjC,CAAC;IAEF,OAAO,CACL,0CAAS,QAAQ;QACf,8BAAC,UAAU,CAAC,mBAAmB,IAC7B,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,UAAE,CAAC,mBAAmB,CAAC,EAC7C,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,mBACzB,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,gBACnC,aAAa,CAAC,aAAa,CAAC,EACxC,OAAO,EAAE,mBAAmB;YAE5B,8BAAC,UAAU,CAAC,OAAO,IACjB,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC1C,SAAS,EAAE,UAAU,CAAC,UAAE,CAAC,OAAO,CAAC,EACjC,WAAW,EAAC,MAAM,GAClB,CAC6B;QACjC,8BAAC,UAAU,CAAC,eAAe,IACzB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,UAAE,CAAC,eAAe,CAAC,EACzC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,mBACrB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,gBAC/B,SAAS,CAAC,SAAS,CAAC,EAChC,OAAO,EAAE,eAAe;YAExB,8BAAC,UAAU,CAAC,OAAO,IACjB,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACtC,WAAW,EAAC,OAAO,EACnB,SAAS,EAAE,UAAU,CAAC,UAAE,CAAC,OAAO,CAAC,GACjC,CACyB,CACzB,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,9 @@
import React, { type ButtonHTMLAttributes } from "react";
/**
* Render the button to navigate to the next month in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function NextMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
export type NextMonthButtonProps = Parameters<typeof NextMonthButton>[0];
@@ -0,0 +1,19 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NextMonthButton = NextMonthButton;
const react_1 = __importDefault(require("react"));
const useDayPicker_js_1 = require("../useDayPicker.js");
/**
* Render the button to navigate to the next month in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function NextMonthButton(props) {
const { components } = (0, useDayPicker_js_1.useDayPicker)();
return react_1.default.createElement(components.Button, { ...props });
}
//# sourceMappingURL=NextMonthButton.js.map
@@ -0,0 +1 @@
{"version":3,"file":"NextMonthButton.js","sourceRoot":"","sources":["../../../src/components/NextMonthButton.tsx"],"names":[],"mappings":";;;;;AAUA,0CAKC;AAfD,kDAAyD;AAEzD,wDAAkD;AAElD;;;;;GAKG;AACH,SAAgB,eAAe,CAC7B,KAA8C;IAE9C,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,8BAAY,GAAE,CAAC;IACtC,OAAO,8BAAC,UAAU,CAAC,MAAM,OAAK,KAAK,GAAI,CAAC;AAC1C,CAAC"}
@@ -0,0 +1,9 @@
import React, { type OptionHTMLAttributes } from "react";
/**
* Render an `option` element.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Option(props: OptionHTMLAttributes<HTMLOptionElement>): React.JSX.Element;
export type OptionProps = Parameters<typeof Option>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Option = Option;
const react_1 = __importDefault(require("react"));
/**
* Render an `option` element.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Option(props) {
return react_1.default.createElement("option", { ...props });
}
//# sourceMappingURL=Option.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../src/components/Option.tsx"],"names":[],"mappings":";;;;;AAQA,wBAEC;AAVD,kDAAyD;AAEzD;;;;;GAKG;AACH,SAAgB,MAAM,CAAC,KAA8C;IACnE,OAAO,6CAAY,KAAK,GAAI,CAAC;AAC/B,CAAC"}
@@ -0,0 +1,9 @@
import React, { type ButtonHTMLAttributes } from "react";
/**
* Render the button to navigate to the previous month in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function PreviousMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
export type PreviousMonthButtonProps = Parameters<typeof PreviousMonthButton>[0];
@@ -0,0 +1,19 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PreviousMonthButton = PreviousMonthButton;
const react_1 = __importDefault(require("react"));
const useDayPicker_js_1 = require("../useDayPicker.js");
/**
* Render the button to navigate to the previous month in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function PreviousMonthButton(props) {
const { components } = (0, useDayPicker_js_1.useDayPicker)();
return react_1.default.createElement(components.Button, { ...props });
}
//# sourceMappingURL=PreviousMonthButton.js.map
@@ -0,0 +1 @@
{"version":3,"file":"PreviousMonthButton.js","sourceRoot":"","sources":["../../../src/components/PreviousMonthButton.tsx"],"names":[],"mappings":";;;;;AAUA,kDAKC;AAfD,kDAAyD;AAEzD,wDAAkD;AAElD;;;;;GAKG;AACH,SAAgB,mBAAmB,CACjC,KAA8C;IAE9C,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,8BAAY,GAAE,CAAC;IACtC,OAAO,8BAAC,UAAU,CAAC,MAAM,OAAK,KAAK,GAAI,CAAC;AAC1C,CAAC"}
@@ -0,0 +1,12 @@
import React, { type Ref, type HTMLAttributes } from "react";
/**
* Render the root element of the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Root(props: {
/** Ref for the root element, used when `animate` is `true`. */
rootRef?: Ref<HTMLDivElement>;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type RootProps = Parameters<typeof Root>[0];
@@ -0,0 +1,18 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Root = Root;
const react_1 = __importDefault(require("react"));
/**
* Render the root element of the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Root(props) {
const { rootRef, ...rest } = props;
return react_1.default.createElement("div", { ...rest, ref: rootRef });
}
//# sourceMappingURL=Root.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Root.js","sourceRoot":"","sources":["../../../src/components/Root.tsx"],"names":[],"mappings":";;;;;AAQA,oBAQC;AAhBD,kDAA6D;AAE7D;;;;;GAKG;AACH,SAAgB,IAAI,CAClB,KAGkC;IAElC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,0CAAS,IAAI,EAAE,GAAG,EAAE,OAAO,GAAI,CAAC;AACzC,CAAC"}
@@ -0,0 +1,9 @@
import React, { type SelectHTMLAttributes } from "react";
/**
* Render a `select` element.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Select(props: SelectHTMLAttributes<HTMLSelectElement>): React.JSX.Element;
export type SelectProps = Parameters<typeof Select>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Select = Select;
const react_1 = __importDefault(require("react"));
/**
* Render a `select` element.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Select(props) {
return react_1.default.createElement("select", { ...props });
}
//# sourceMappingURL=Select.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select.tsx"],"names":[],"mappings":";;;;;AAQA,wBAEC;AAVD,kDAAyD;AAEzD;;;;;GAKG;AACH,SAAgB,MAAM,CAAC,KAA8C;IACnE,OAAO,6CAAY,KAAK,GAAI,CAAC;AAC/B,CAAC"}
@@ -0,0 +1,13 @@
import React, { type HTMLAttributes } from "react";
import type { CalendarWeek } from "../classes/index.js";
/**
* Render a table row representing a week in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Week(props: {
/** The week to render. */
week: CalendarWeek;
} & HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
export type WeekProps = Parameters<typeof Week>[0];
@@ -0,0 +1,18 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Week = Week;
const react_1 = __importDefault(require("react"));
/**
* Render a table row representing a week in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Week(props) {
const { week, ...trProps } = props;
return react_1.default.createElement("tr", { ...trProps });
}
//# sourceMappingURL=Week.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Week.js","sourceRoot":"","sources":["../../../src/components/Week.tsx"],"names":[],"mappings":";;;;;AAUA,oBAQC;AAlBD,kDAAmD;AAInD;;;;;GAKG;AACH,SAAgB,IAAI,CAClB,KAGuC;IAEvC,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,yCAAQ,OAAO,GAAI,CAAC;AAC7B,CAAC"}
@@ -0,0 +1,13 @@
import React, { type ThHTMLAttributes } from "react";
import type { CalendarWeek } from "../classes/index.js";
/**
* Render a table cell displaying the number of the week.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function WeekNumber(props: {
/** The week to display. */
week: CalendarWeek;
} & ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
export type WeekNumberProps = Parameters<typeof WeekNumber>[0];
@@ -0,0 +1,18 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WeekNumber = WeekNumber;
const react_1 = __importDefault(require("react"));
/**
* Render a table cell displaying the number of the week.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function WeekNumber(props) {
const { week, ...thProps } = props;
return react_1.default.createElement("th", { ...thProps });
}
//# sourceMappingURL=WeekNumber.js.map
@@ -0,0 +1 @@
{"version":3,"file":"WeekNumber.js","sourceRoot":"","sources":["../../../src/components/WeekNumber.tsx"],"names":[],"mappings":";;;;;AAUA,gCAQC;AAlBD,kDAAqD;AAIrD;;;;;GAKG;AACH,SAAgB,UAAU,CACxB,KAG0C;IAE1C,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,yCAAQ,OAAO,GAAI,CAAC;AAC7B,CAAC"}
@@ -0,0 +1,9 @@
import React, { type ThHTMLAttributes } from "react";
/**
* Render the header cell for the week numbers column.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function WeekNumberHeader(props: ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
export type WeekNumberHeaderProps = Parameters<typeof WeekNumberHeader>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WeekNumberHeader = WeekNumberHeader;
const react_1 = __importDefault(require("react"));
/**
* Render the header cell for the week numbers column.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function WeekNumberHeader(props) {
return react_1.default.createElement("th", { ...props });
}
//# sourceMappingURL=WeekNumberHeader.js.map
@@ -0,0 +1 @@
{"version":3,"file":"WeekNumberHeader.js","sourceRoot":"","sources":["../../../src/components/WeekNumberHeader.tsx"],"names":[],"mappings":";;;;;AAQA,4CAIC;AAZD,kDAAqD;AAErD;;;;;GAKG;AACH,SAAgB,gBAAgB,CAC9B,KAA6C;IAE7C,OAAO,yCAAQ,KAAK,GAAI,CAAC;AAC3B,CAAC"}
@@ -0,0 +1,9 @@
import React, { type ThHTMLAttributes } from "react";
/**
* Render a table header cell with the name of a weekday (e.g., "Mo", "Tu").
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Weekday(props: ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
export type WeekdayProps = Parameters<typeof Weekday>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Weekday = Weekday;
const react_1 = __importDefault(require("react"));
/**
* Render a table header cell with the name of a weekday (e.g., "Mo", "Tu").
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Weekday(props) {
return react_1.default.createElement("th", { ...props });
}
//# sourceMappingURL=Weekday.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Weekday.js","sourceRoot":"","sources":["../../../src/components/Weekday.tsx"],"names":[],"mappings":";;;;;AAQA,0BAEC;AAVD,kDAAqD;AAErD;;;;;GAKG;AACH,SAAgB,OAAO,CAAC,KAA6C;IACnE,OAAO,yCAAQ,KAAK,GAAI,CAAC;AAC3B,CAAC"}
@@ -0,0 +1,9 @@
import React, { type HTMLAttributes } from "react";
/**
* Render the table row containing the weekday names.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Weekdays(props: HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
export type WeekdaysProps = Parameters<typeof Weekdays>[0];
@@ -0,0 +1,18 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Weekdays = Weekdays;
const react_1 = __importDefault(require("react"));
/**
* Render the table row containing the weekday names.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Weekdays(props) {
return (react_1.default.createElement("thead", { "aria-hidden": true },
react_1.default.createElement("tr", { ...props })));
}
//# sourceMappingURL=Weekdays.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Weekdays.js","sourceRoot":"","sources":["../../../src/components/Weekdays.tsx"],"names":[],"mappings":";;;;;AAQA,4BAMC;AAdD,kDAAmD;AAEnD;;;;;GAKG;AACH,SAAgB,QAAQ,CAAC,KAA0C;IACjE,OAAO,CACL;QACE,yCAAQ,KAAK,GAAI,CACX,CACT,CAAC;AACJ,CAAC"}
@@ -0,0 +1,9 @@
import React, { type HTMLAttributes } from "react";
/**
* Render the container for the weeks in the month grid.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function Weeks(props: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
export type WeeksProps = Parameters<typeof Weeks>[0];
@@ -0,0 +1,17 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Weeks = Weeks;
const react_1 = __importDefault(require("react"));
/**
* Render the container for the weeks in the month grid.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Weeks(props) {
return react_1.default.createElement("tbody", { ...props });
}
//# sourceMappingURL=Weeks.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Weeks.js","sourceRoot":"","sources":["../../../src/components/Weeks.tsx"],"names":[],"mappings":";;;;;AAQA,sBAEC;AAVD,kDAAmD;AAEnD;;;;;GAKG;AACH,SAAgB,KAAK,CAAC,KAA8C;IAClE,OAAO,4CAAW,KAAK,GAAI,CAAC;AAC9B,CAAC"}
@@ -0,0 +1,9 @@
import React from "react";
import { DropdownProps } from "./Dropdown.js";
/**
* Render a dropdown to navigate between years in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export declare function YearsDropdown(props: DropdownProps): React.JSX.Element;
@@ -0,0 +1,19 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.YearsDropdown = YearsDropdown;
const react_1 = __importDefault(require("react"));
const useDayPicker_js_1 = require("../useDayPicker.js");
/**
* Render a dropdown to navigate between years in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function YearsDropdown(props) {
const { components } = (0, useDayPicker_js_1.useDayPicker)();
return react_1.default.createElement(components.Dropdown, { ...props });
}
//# sourceMappingURL=YearsDropdown.js.map

Some files were not shown because too many files have changed in this diff Show More