@nuvui/date-picker 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nuvraxis
+
+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.

package/README.md

@@ -1,3 +1,37 @@
-# Temporary Holding Version
+# @nuvui/date-picker
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A calendar, a date field and a date range field for [`@nuvui/react`](https://github.com/Nuvraxis/nuvui/tree/main/packages/ui). The calendar is [react-day-picker](https://daypicker.dev) with nuvui's styles, and the fields are built from nuvui's input group, popover and dialog.
+
+This is early, and the package hasn't been released. See the [repository README](https://github.com/Nuvraxis/nuvui#readme) for where things stand.
+
+```sh
+pnpm add @nuvui/date-picker @nuvui/react
+```
+
+```tsx
+import "@nuvui/react/styles.css";
+import "@nuvui/date-picker/styles.css";
+import { DatePicker } from "@nuvui/date-picker";
+
+export default function Page() {
+  return <DatePicker aria-label="Due date" name="due" />;
+}
+```
+
+## What's in it
+
+- `Calendar`: a month of days to pick from. One day, several, or a range.
+- `DatePicker`: a field a date is typed into, with a button that opens a calendar. In a popover on a wide screen, and in a sheet on a phone. With a `name`, it submits the date as `yyyy-MM-dd`.
+- `DateRangePicker`: a field for each end of a range, and one calendar for both.
+- `@nuvui/date-picker/locale`: every locale react-day-picker has.
+- `TZDate`, from `@date-fns/tz`, for days in a time zone other than the browser's.
+
+`@nuvui/react` is a peer dependency. `react-day-picker`, `date-fns` and `@date-fns/tz` are installed with the package.
+
+It's a package of its own so that an app which only wants buttons and dialogs doesn't have to install a date library.
+
+Docs will live at https://nuvui.nuvraxis.com.
+
+## License
+
+MIT

package/dist/components/calendar/calendar.cjs

@@ -0,0 +1,163 @@
+"use client";
+const require_cx = require("../../utils/cx.cjs");
+let _nuvui_react_direction = require("@nuvui/react/direction");
+let _nuvui_react_select = require("@nuvui/react/select");
+let react = require("react");
+let react_day_picker = require("react-day-picker");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/calendar/calendar.tsx
+const classes = {
+	root: "nuv-calendar",
+	months: "nuv-calendar__months",
+	month: "nuv-calendar__month",
+	month_caption: "nuv-calendar__caption",
+	caption_label: "nuv-calendar__caption-label",
+	nav: "nuv-calendar__nav",
+	button_previous: "nuv-calendar__nav-button nuv-calendar__nav-button--previous",
+	button_next: "nuv-calendar__nav-button nuv-calendar__nav-button--next",
+	chevron: "nuv-calendar__chevron",
+	dropdowns: "nuv-calendar__dropdowns",
+	dropdown_root: "",
+	dropdown: "nuv-calendar__select",
+	months_dropdown: "nuv-calendar__select--month",
+	years_dropdown: "nuv-calendar__select--year",
+	month_grid: "nuv-calendar__grid",
+	weekdays: "nuv-calendar__weekdays",
+	weekday: "nuv-calendar__weekday",
+	weeks: "nuv-calendar__weeks",
+	week: "nuv-calendar__week",
+	week_number: "nuv-calendar__week-number",
+	week_number_header: "nuv-calendar__week-number-header",
+	day: "nuv-calendar__day",
+	day_button: "nuv-calendar__day-button",
+	footer: "nuv-calendar__footer",
+	today: "nuv-calendar__day--today",
+	outside: "nuv-calendar__day--outside",
+	disabled: "nuv-calendar__day--disabled",
+	hidden: "nuv-calendar__day--hidden",
+	focused: "nuv-calendar__day--focused",
+	selected: "nuv-calendar__day--selected",
+	range_start: "nuv-calendar__day--range-start",
+	range_middle: "nuv-calendar__day--range-middle",
+	range_end: "nuv-calendar__day--range-end",
+	weeks_before_enter: "",
+	weeks_before_exit: "",
+	weeks_after_enter: "",
+	weeks_after_exit: "",
+	caption_after_enter: "",
+	caption_after_exit: "",
+	caption_before_enter: "",
+	caption_before_exit: ""
+};
+const chevrons = {
+	left: "M10 3.5 5.5 8l4.5 4.5",
+	right: "M6 3.5 10.5 8 6 12.5",
+	up: "M3.5 10 8 5.5l4.5 4.5",
+	down: "M3.5 6 8 10.5 12.5 6"
+};
+function Chevron({ orientation = "left", className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		"aria-hidden": "true",
+		className,
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: chevrons[orientation] })
+	});
+}
+const RootRefContext = (0, react.createContext)(void 0);
+function assign(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+function Root({ rootRef, ...props }) {
+	const forwarded = (0, react.useContext)(RootRefContext);
+	const setRef = (0, react.useCallback)((node) => {
+		assign(rootRef, node);
+		assign(forwarded, node);
+	}, [rootRef, forwarded]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: setRef,
+		...props
+	});
+}
+function Dropdown({ options, value, onChange, disabled, className, style, "aria-label": label }) {
+	const { classNames } = (0, react_day_picker.useDayPicker)();
+	const selected = options?.find((option) => option.value === value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_nuvui_react_select.Select, {
+		value: String(value),
+		disabled,
+		onValueChange: (next) => onChange?.({ target: { value: next } }),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_select.SelectTrigger, {
+			className: require_cx.cx(classNames.dropdown, className),
+			style,
+			"aria-label": label,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_select.SelectValue, { children: selected?.label })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_select.SelectContent, {
+			className: "nuv-calendar__options",
+			children: options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_select.SelectItem, {
+				value: String(option.value),
+				disabled: option.disabled,
+				children: option.label
+			}, option.value))
+		})]
+	});
+}
+const parts = {
+	Chevron,
+	Dropdown,
+	Root
+};
+const never = () => () => {};
+function useHydrated() {
+	return (0, react.useSyncExternalStore)(never, () => true, () => false);
+}
+const noDay = /* @__PURE__ */ new Date(0);
+const anyMonth = new Date(2001, 6);
+const Calendar = (0, react.forwardRef)(function Calendar({ classNames, components, dir, navLayout = "around", ...props }, ref) {
+	const undated = !useHydrated() && props.today === void 0;
+	const unplaced = undated && props.month === void 0 && props.defaultMonth === void 0;
+	const direction = (0, _nuvui_react_direction.useDirection)(dir === "rtl" || dir === "ltr" ? dir : void 0);
+	const merged = (0, react.useMemo)(() => {
+		if (!classNames) return classes;
+		const result = { ...classes };
+		for (const key of Object.keys(classNames)) result[key] = require_cx.cx(classes[key], classNames[key]);
+		return result;
+	}, [classNames]);
+	const allParts = (0, react.useMemo)(() => components ? {
+		...parts,
+		...components
+	} : parts, [components]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootRefContext.Provider, {
+		value: ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.DayPicker, {
+			classNames: merged,
+			components: allParts,
+			dir: direction,
+			navLayout,
+			...unplaced ? {
+				className: props.className,
+				style: props.style,
+				numberOfMonths: props.numberOfMonths,
+				showWeekNumber: props.showWeekNumber,
+				fixedWeeks: props.fixedWeeks,
+				hideNavigation: props.hideNavigation,
+				hideWeekdays: props.hideWeekdays,
+				captionLayout: props.captionLayout,
+				month: anyMonth,
+				today: noDay,
+				"data-pending": ""
+			} : {
+				...props,
+				...undated ? { today: noDay } : null
+			}
+		}, unplaced ? "pending" : "placed")
+	});
+});
+//#endregion
+exports.Calendar = Calendar;

package/dist/components/calendar/calendar.d.cts

@@ -0,0 +1,17 @@
+import { DateRange as DateRange$1, DayPickerLocale as CalendarLocale, DayPickerProps, Matcher as Matcher$1, PropsBase } from "react-day-picker";
+//#region src/components/calendar/calendar.d.ts
+type OmitFromEach<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/**
+ * The options a calendar has whatever its `mode`. `CalendarProps` is these
+ * with `selected` and `onSelect`, whose types follow the mode.
+ */
+export type CalendarOptions = Omit<PropsBase, "animate">;
+/**
+ * What react-day-picker's `DayPicker` takes, except `animate`. Its slide
+ * between months is drawn by react-day-picker's own stylesheet, which this
+ * package doesn't use.
+ */
+export type CalendarProps = OmitFromEach<DayPickerProps, "animate">;
+export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export type { CalendarLocale, DateRange$1 as DateRange, Matcher$1 as Matcher };

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,17 @@
+import { DateRange as DateRange$1, DayPickerLocale as CalendarLocale, DayPickerProps, Matcher as Matcher$1, PropsBase } from "react-day-picker";
+//#region src/components/calendar/calendar.d.ts
+type OmitFromEach<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/**
+ * The options a calendar has whatever its `mode`. `CalendarProps` is these
+ * with `selected` and `onSelect`, whose types follow the mode.
+ */
+export type CalendarOptions = Omit<PropsBase, "animate">;
+/**
+ * What react-day-picker's `DayPicker` takes, except `animate`. Its slide
+ * between months is drawn by react-day-picker's own stylesheet, which this
+ * package doesn't use.
+ */
+export type CalendarProps = OmitFromEach<DayPickerProps, "animate">;
+export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export type { CalendarLocale, DateRange$1 as DateRange, Matcher$1 as Matcher };

package/dist/components/calendar/calendar.js

@@ -0,0 +1,163 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { useDirection } from "@nuvui/react/direction";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@nuvui/react/select";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useSyncExternalStore } from "react";
+import { DayPicker, useDayPicker } from "react-day-picker";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/calendar/calendar.tsx
+const classes = {
+	root: "nuv-calendar",
+	months: "nuv-calendar__months",
+	month: "nuv-calendar__month",
+	month_caption: "nuv-calendar__caption",
+	caption_label: "nuv-calendar__caption-label",
+	nav: "nuv-calendar__nav",
+	button_previous: "nuv-calendar__nav-button nuv-calendar__nav-button--previous",
+	button_next: "nuv-calendar__nav-button nuv-calendar__nav-button--next",
+	chevron: "nuv-calendar__chevron",
+	dropdowns: "nuv-calendar__dropdowns",
+	dropdown_root: "",
+	dropdown: "nuv-calendar__select",
+	months_dropdown: "nuv-calendar__select--month",
+	years_dropdown: "nuv-calendar__select--year",
+	month_grid: "nuv-calendar__grid",
+	weekdays: "nuv-calendar__weekdays",
+	weekday: "nuv-calendar__weekday",
+	weeks: "nuv-calendar__weeks",
+	week: "nuv-calendar__week",
+	week_number: "nuv-calendar__week-number",
+	week_number_header: "nuv-calendar__week-number-header",
+	day: "nuv-calendar__day",
+	day_button: "nuv-calendar__day-button",
+	footer: "nuv-calendar__footer",
+	today: "nuv-calendar__day--today",
+	outside: "nuv-calendar__day--outside",
+	disabled: "nuv-calendar__day--disabled",
+	hidden: "nuv-calendar__day--hidden",
+	focused: "nuv-calendar__day--focused",
+	selected: "nuv-calendar__day--selected",
+	range_start: "nuv-calendar__day--range-start",
+	range_middle: "nuv-calendar__day--range-middle",
+	range_end: "nuv-calendar__day--range-end",
+	weeks_before_enter: "",
+	weeks_before_exit: "",
+	weeks_after_enter: "",
+	weeks_after_exit: "",
+	caption_after_enter: "",
+	caption_after_exit: "",
+	caption_before_enter: "",
+	caption_before_exit: ""
+};
+const chevrons = {
+	left: "M10 3.5 5.5 8l4.5 4.5",
+	right: "M6 3.5 10.5 8 6 12.5",
+	up: "M3.5 10 8 5.5l4.5 4.5",
+	down: "M3.5 6 8 10.5 12.5 6"
+};
+function Chevron({ orientation = "left", className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		className,
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: chevrons[orientation] })
+	});
+}
+const RootRefContext = createContext(void 0);
+function assign(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+function Root({ rootRef, ...props }) {
+	const forwarded = useContext(RootRefContext);
+	const setRef = useCallback((node) => {
+		assign(rootRef, node);
+		assign(forwarded, node);
+	}, [rootRef, forwarded]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRef,
+		...props
+	});
+}
+function Dropdown({ options, value, onChange, disabled, className, style, "aria-label": label }) {
+	const { classNames } = useDayPicker();
+	const selected = options?.find((option) => option.value === value);
+	return /* @__PURE__ */ jsxs(Select, {
+		value: String(value),
+		disabled,
+		onValueChange: (next) => onChange?.({ target: { value: next } }),
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: cx(classNames.dropdown, className),
+			style,
+			"aria-label": label,
+			children: /* @__PURE__ */ jsx(SelectValue, { children: selected?.label })
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			className: "nuv-calendar__options",
+			children: options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: String(option.value),
+				disabled: option.disabled,
+				children: option.label
+			}, option.value))
+		})]
+	});
+}
+const parts = {
+	Chevron,
+	Dropdown,
+	Root
+};
+const never = () => () => {};
+function useHydrated() {
+	return useSyncExternalStore(never, () => true, () => false);
+}
+const noDay = /* @__PURE__ */ new Date(0);
+const anyMonth = new Date(2001, 6);
+const Calendar = forwardRef(function Calendar({ classNames, components, dir, navLayout = "around", ...props }, ref) {
+	const undated = !useHydrated() && props.today === void 0;
+	const unplaced = undated && props.month === void 0 && props.defaultMonth === void 0;
+	const direction = useDirection(dir === "rtl" || dir === "ltr" ? dir : void 0);
+	const merged = useMemo(() => {
+		if (!classNames) return classes;
+		const result = { ...classes };
+		for (const key of Object.keys(classNames)) result[key] = cx(classes[key], classNames[key]);
+		return result;
+	}, [classNames]);
+	const allParts = useMemo(() => components ? {
+		...parts,
+		...components
+	} : parts, [components]);
+	return /* @__PURE__ */ jsx(RootRefContext.Provider, {
+		value: ref,
+		children: /* @__PURE__ */ jsx(DayPicker, {
+			classNames: merged,
+			components: allParts,
+			dir: direction,
+			navLayout,
+			...unplaced ? {
+				className: props.className,
+				style: props.style,
+				numberOfMonths: props.numberOfMonths,
+				showWeekNumber: props.showWeekNumber,
+				fixedWeeks: props.fixedWeeks,
+				hideNavigation: props.hideNavigation,
+				hideWeekdays: props.hideWeekdays,
+				captionLayout: props.captionLayout,
+				month: anyMonth,
+				today: noDay,
+				"data-pending": ""
+			} : {
+				...props,
+				...undated ? { today: noDay } : null
+			}
+		}, unplaced ? "pending" : "placed")
+	});
+});
+//#endregion
+export { Calendar };

package/dist/components/calendar/index.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_calendar = require("./calendar.cjs");
+exports.Calendar = require_calendar.Calendar;

package/dist/components/calendar/index.d.cts

@@ -0,0 +1,2 @@
+import { Calendar, CalendarLocale, CalendarOptions, CalendarProps, DateRange, Matcher } from "./calendar.cjs";
+export { Calendar, type CalendarLocale, type CalendarOptions, type CalendarProps, type DateRange, type Matcher };

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,2 @@
+import { Calendar, CalendarLocale, CalendarOptions, CalendarProps, DateRange, Matcher } from "./calendar.js";
+export { Calendar, type CalendarLocale, type CalendarOptions, type CalendarProps, type DateRange, type Matcher };

package/dist/components/calendar/index.js

@@ -0,0 +1,2 @@
+import { Calendar } from "./calendar.js";
+export { Calendar };