@nuvui/date-picker 0.0.0-stage → 0.1.1

package/dist/components/date-picker/date-picker.cjs

@@ -0,0 +1,340 @@
+"use client";
+const require_cx = require("../../utils/cx.cjs");
+const require_calendar = require("../calendar/calendar.cjs");
+const require_dates = require("../../utils/dates.cjs");
+const require_use_controlled = require("../../utils/use-controlled.cjs");
+const require_use_date_text = require("../../utils/use-date-text.cjs");
+const require_use_is_phone = require("../../utils/use-is-phone.cjs");
+const require_popup = require("./popup.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _nuvui_react_input = require("@nuvui/react/input");
+let _nuvui_react_input_group = require("@nuvui/react/input-group");
+let _nuvui_react_popover = require("@nuvui/react/popover");
+//#region src/components/date-picker/date-picker.tsx
+function CalendarIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		"aria-hidden": "true",
+		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)("rect", {
+			x: "2.5",
+			y: "3.5",
+			width: "11",
+			height: "10",
+			rx: "1.5"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.5 6.5h11M5.5 2v3m5-3v3" })]
+	});
+}
+function hint(format, locale) {
+	return (format === "P" ? require_dates.shortPattern(locale) : format).toLowerCase();
+}
+function useFormReset(input, onReset) {
+	const latest = (0, react.useRef)(onReset);
+	latest.current = onReset;
+	(0, react.useEffect)(() => {
+		const form = input.current?.form;
+		if (!form) return;
+		const reset = () => latest.current();
+		form.addEventListener("reset", reset);
+		return () => form.removeEventListener("reset", reset);
+	}, [input]);
+}
+function useMergedRef(outer, inner) {
+	return (0, react.useCallback)((node) => {
+		for (const ref of [outer, inner]) if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [outer, inner]);
+}
+function openWithAltDown(event, open) {
+	if (event.key === "ArrowDown" && event.altKey) {
+		event.preventDefault();
+		open();
+	}
+}
+const DatePicker = (0, react.forwardRef)(function DatePicker({ value: valueProp, defaultValue = null, onValueChange, open: openProp, defaultOpen = false, onOpenChange, min, max, disabledDates, locale, weekStartsOn, timeZone, format = "P", invalidMessage = "Enter a valid date.", calendarLabel = "Choose date", title = "Choose date", closeLabel = "Close", calendar, name, form, container, className, style, disabled, readOnly, placeholder, onBlur, onKeyDown, "aria-invalid": ariaInvalid, ...props }, ref) {
+	const [value, setValue] = require_use_controlled.useControlled(valueProp !== void 0, valueProp ?? null, defaultValue, onValueChange);
+	const [open, setOpen] = require_use_controlled.useControlled(openProp !== void 0, openProp ?? false, defaultOpen, onOpenChange);
+	const phone = require_use_is_phone.useIsPhone();
+	const input = (0, react.useRef)(null);
+	const trigger = (0, react.useRef)(null);
+	const matchers = (0, react.useMemo)(() => require_dates.disabledDays(min, max, disabledDates, timeZone), [
+		min,
+		max,
+		disabledDates,
+		timeZone
+	]);
+	const field = require_use_date_text.useDateText({
+		value,
+		onCommit: setValue,
+		problem: (date) => require_dates.isDisabled(date, matchers) ? invalidMessage : void 0,
+		invalidMessage,
+		pattern: format,
+		locale,
+		timeZone,
+		input
+	});
+	useFormReset(input, () => {
+		field.clearDraft();
+		setValue(defaultValue);
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_nuvui_react_popover.Popover, {
+		open: open && !phone,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_popover.PopoverAnchor, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_nuvui_react_input_group.InputGroup, {
+				className: require_cx.cx("nuv-date-picker", className),
+				style,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_input.Input, {
+						ref: useMergedRef(ref, input),
+						autoComplete: "off",
+						placeholder: placeholder ?? hint(format, locale),
+						disabled,
+						readOnly,
+						"aria-invalid": field.error ? true : ariaInvalid,
+						...props,
+						value: field.text,
+						onChange: field.onChange,
+						onBlur: (event) => {
+							field.onBlur();
+							onBlur?.(event);
+						},
+						onKeyDown: (event) => {
+							onKeyDown?.(event);
+							if (event.defaultPrevented) return;
+							field.onKeyDown(event);
+							if (!disabled && !readOnly) openWithAltDown(event, () => setOpen(true));
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_popover.PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_input_group.InputGroupButton, {
+							ref: trigger,
+							className: "nuv-date-picker__button",
+							"aria-label": value ? `${calendarLabel}, ${require_dates.formatDate(value, "PPPP", locale, timeZone)}` : calendarLabel,
+							disabled: disabled || readOnly,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarIcon, {})
+						})
+					}),
+					name ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "hidden",
+						name,
+						form,
+						value: require_dates.isoDate(value ?? void 0, timeZone),
+						disabled
+					}) : null
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popup.Popup, {
+			open,
+			onOpenChange: setOpen,
+			phone,
+			title,
+			closeLabel,
+			container,
+			trigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar.Calendar, {
+				...calendar,
+				mode: "single",
+				required: true,
+				selected: value ?? void 0,
+				onSelect: (date) => {
+					field.clearDraft();
+					setValue(date);
+					setOpen(false);
+				},
+				defaultMonth: value ?? calendar?.defaultMonth,
+				startMonth: min,
+				endMonth: max,
+				disabled: matchers,
+				locale,
+				weekStartsOn,
+				timeZone
+			})
+		})]
+	});
+});
+function before(a, b, timeZone) {
+	return require_dates.isoDate(a, timeZone) < require_dates.isoDate(b, timeZone);
+}
+const DateRangePicker = (0, react.forwardRef)(function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange, open: openProp, defaultOpen = false, onOpenChange, min, max, disabledDates, locale, weekStartsOn, timeZone, format = "P", invalidMessage = "Enter a valid date.", orderMessage = "The end date is before the start date.", calendarLabel = "Choose dates", title = "Choose dates", closeLabel = "Close", startLabel = "Start date", endLabel = "End date", numberOfMonths = 2, calendar, startName, endName, form, container, className, style, disabled, readOnly, required, placeholder, id, onBlur, onKeyDown, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const [value, setValue] = require_use_controlled.useControlled(valueProp !== void 0, valueProp ?? null, defaultValue, onValueChange);
+	const [open, setOpen] = require_use_controlled.useControlled(openProp !== void 0, openProp ?? false, defaultOpen, onOpenChange);
+	const phone = require_use_is_phone.useIsPhone();
+	const startInput = (0, react.useRef)(null);
+	const endInput = (0, react.useRef)(null);
+	const trigger = (0, react.useRef)(null);
+	const from = value?.from ?? null;
+	const to = value?.to ?? null;
+	const matchers = (0, react.useMemo)(() => require_dates.disabledDays(min, max, disabledDates, timeZone), [
+		min,
+		max,
+		disabledDates,
+		timeZone
+	]);
+	function setRange(nextFrom, nextTo) {
+		setValue(nextFrom || nextTo ? {
+			from: nextFrom ?? void 0,
+			to: nextTo ?? void 0
+		} : null);
+	}
+	const start = require_use_date_text.useDateText({
+		value: from,
+		onCommit: (date) => setRange(date, to),
+		problem: (date) => {
+			if (require_dates.isDisabled(date, matchers)) return invalidMessage;
+			return to && before(to, date, timeZone) ? orderMessage : void 0;
+		},
+		invalidMessage,
+		pattern: format,
+		locale,
+		timeZone,
+		input: startInput
+	});
+	const end = require_use_date_text.useDateText({
+		value: to,
+		onCommit: (date) => setRange(from, date),
+		problem: (date) => {
+			if (require_dates.isDisabled(date, matchers)) return invalidMessage;
+			return from && before(date, from, timeZone) ? orderMessage : void 0;
+		},
+		invalidMessage,
+		pattern: format,
+		locale,
+		timeZone,
+		input: endInput
+	});
+	useFormReset(startInput, () => {
+		start.clearDraft();
+		end.clearDraft();
+		setValue(defaultValue);
+	});
+	const shared = {
+		autoComplete: "off",
+		placeholder: placeholder ?? hint(format, locale),
+		disabled,
+		readOnly,
+		required,
+		"aria-describedby": ariaDescribedBy,
+		...props
+	};
+	function keyDown(event, field) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		field.onKeyDown(event);
+		if (!disabled && !readOnly) openWithAltDown(event, () => setOpen(true));
+	}
+	const picked = [from, to].filter((date) => date !== null).map((date) => require_dates.formatDate(date, "PPPP", locale, timeZone)).join(", ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_nuvui_react_popover.Popover, {
+		open: open && !phone,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_popover.PopoverAnchor, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_nuvui_react_input_group.InputGroup, {
+				role: "group",
+				"aria-labelledby": ariaLabelledBy,
+				"aria-label": ariaLabel,
+				className: require_cx.cx("nuv-date-picker nuv-date-picker--range", className),
+				style,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_input.Input, {
+						ref: useMergedRef(ref, startInput),
+						id,
+						"aria-label": startLabel,
+						"aria-invalid": start.error ? true : ariaInvalid,
+						...shared,
+						value: start.text,
+						onChange: start.onChange,
+						onBlur: (event) => {
+							start.onBlur();
+							onBlur?.(event);
+						},
+						onKeyDown: (event) => keyDown(event, start)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						className: "nuv-date-picker__separator",
+						children: "–"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_input.Input, {
+						ref: endInput,
+						"aria-label": endLabel,
+						"aria-invalid": end.error ? true : ariaInvalid,
+						...shared,
+						value: end.text,
+						onChange: end.onChange,
+						onBlur: (event) => {
+							end.onBlur();
+							onBlur?.(event);
+						},
+						onKeyDown: (event) => keyDown(event, end)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_popover.PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nuvui_react_input_group.InputGroupButton, {
+							ref: trigger,
+							className: "nuv-date-picker__button",
+							"aria-label": picked ? `${calendarLabel}, ${picked}` : calendarLabel,
+							disabled: disabled || readOnly,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarIcon, {})
+						})
+					}),
+					startName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "hidden",
+						name: startName,
+						form,
+						value: require_dates.isoDate(from ?? void 0, timeZone),
+						disabled
+					}) : null,
+					endName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "hidden",
+						name: endName,
+						form,
+						value: require_dates.isoDate(to ?? void 0, timeZone),
+						disabled
+					}) : null
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popup.Popup, {
+			open,
+			onOpenChange: setOpen,
+			phone,
+			title,
+			closeLabel,
+			container,
+			trigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar.Calendar, {
+				numberOfMonths: phone ? 1 : numberOfMonths,
+				...calendar,
+				mode: "range",
+				required: true,
+				resetOnSelect: true,
+				selected: value ?? void 0,
+				onSelect: (range) => {
+					start.clearDraft();
+					end.clearDraft();
+					setValue(range);
+					if (range.from && range.to) setOpen(false);
+				},
+				defaultMonth: from ?? calendar?.defaultMonth,
+				startMonth: min,
+				endMonth: max,
+				disabled: matchers,
+				locale,
+				weekStartsOn,
+				timeZone
+			})
+		})]
+	});
+});
+//#endregion
+exports.DatePicker = DatePicker;
+exports.DateRangePicker = DateRangePicker;

package/dist/components/date-picker/date-picker.d.cts

@@ -0,0 +1,169 @@
+import { CalendarLocale } from "../calendar/calendar.cjs";
+import { DateRange, Matcher, PropsBase, PropsRange } from "react-day-picker";
+import { InputHTMLAttributes } from "react";
+//#region src/components/date-picker/date-picker.d.ts
+/**
+ * The calendar's own options, for the ones the picker doesn't set itself:
+ * `captionLayout`, `showWeekNumber`, `labels` and the rest.
+ */
+export type DatePickerCalendarProps = Omit<PropsBase, "mode" | "required" | "disabled" | "locale" | "timeZone" | "weekStartsOn" | "startMonth" | "endMonth" | "animate" | "autoFocus" | "dir">;
+/**
+ * The same for a range, with the three options only a range has: the
+ * fewest and the most days it may span, and whether it may run across a
+ * day that can't be picked.
+ */
+export type DateRangePickerCalendarProps = DatePickerCalendarProps & Pick<PropsRange, "min" | "max" | "excludeDisabled">;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "min" | "max" | "type" | "name" | "form" | "children">;
+interface SharedProps {
+  /**
+   * Whether the calendar is open. Use it with `onOpenChange`.
+   */
+  open?: boolean;
+  /**
+   * Whether the calendar starts out open.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /** Called when the calendar opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** The earliest day that can be picked or typed. */
+  min?: Date;
+  /** The latest day that can be picked or typed. */
+  max?: Date;
+  /**
+   * Days that can't be picked or typed: a date, a list of them, a range,
+   * `{ dayOfWeek: [0, 6] }` for weekends, or a function that's given a date.
+   */
+  disabledDates?: Matcher | Matcher[];
+  /**
+   * The language of the calendar, and the order a typed date is read in.
+   * Take one from `@nuvui/date-picker/locale`.
+   * @default enUS
+   */
+  locale?: CalendarLocale;
+  /**
+   * The day a week starts on, from 0 for Sunday. Left out, it's the
+   * locale's.
+   */
+  weekStartsOn?: PropsBase["weekStartsOn"];
+  /**
+   * The time zone the days are in, as an IANA name such as
+   * `"Asia/Tokyo"`. Left out, it's the browser's. Dates are then handed
+   * back as `TZDate`s.
+   */
+  timeZone?: string;
+  /**
+   * The pattern a typed date is read and written in, in date-fns' tokens.
+   * `"P"` is the locale's own short date, `MM/dd/yyyy` in the United
+   * States.
+   * @default "P"
+   */
+  format?: string;
+  /**
+   * What the browser is told when the text isn't a date, or is one that
+   * can't be picked. It's shown when a form with the field is submitted.
+   * @default "Enter a valid date."
+   */
+  invalidMessage?: string;
+  /**
+   * Accessible name of the button that opens the calendar. The picked date
+   * is read after it.
+   * @default "Choose date"
+   */
+  calendarLabel?: string;
+  /**
+   * Accessible name of the calendar's panel, and the heading of the sheet
+   * it opens in on a phone.
+   * @default "Choose date"
+   */
+  title?: string;
+  /**
+   * Accessible name of the sheet's close button.
+   * @default "Close"
+   */
+  closeLabel?: string;
+  /**
+   * The `id` of the form the value belongs to, when the field is outside
+   * it.
+   */
+  form?: string;
+  /**
+   * The element the calendar is rendered into. Set this when it should pick
+   * up a `data-theme` from a section of the page.
+   * @default document.body
+   */
+  container?: Element | DocumentFragment | null;
+}
+export interface DatePickerOwnProps extends SharedProps {
+  /**
+   * The picked date, or `null` for none. Use it with `onValueChange`.
+   */
+  value?: Date | null;
+  /** The date picked to begin with. */
+  defaultValue?: Date | null;
+  /** Called with the new date when one is picked or typed. */
+  onValueChange?: (date: Date | null) => void;
+  /**
+   * The name the date is submitted under, as `yyyy-MM-dd`. Without one,
+   * nothing is submitted.
+   */
+  name?: string;
+  /**
+   * More of the calendar's own options, such as `captionLayout` and
+   * `showWeekNumber`.
+   */
+  calendar?: DatePickerCalendarProps;
+}
+export interface DatePickerProps extends DatePickerOwnProps, InputProps {}
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface DateRangePickerOwnProps extends SharedProps {
+  /**
+   * The picked range, or `null` for none. Use it with `onValueChange`.
+   */
+  value?: DateRange | null;
+  /** The range picked to begin with. */
+  defaultValue?: DateRange | null;
+  /**
+   * Called with the new range when a day is picked or typed. While only
+   * the first day has been chosen, `to` is `undefined`.
+   */
+  onValueChange?: (range: DateRange | null) => void;
+  /**
+   * The name the first day is submitted under, as `yyyy-MM-dd`.
+   */
+  startName?: string;
+  /** The name the last day is submitted under, as `yyyy-MM-dd`. */
+  endName?: string;
+  /**
+   * Accessible name of the field for the first day.
+   * @default "Start date"
+   */
+  startLabel?: string;
+  /**
+   * Accessible name of the field for the last day.
+   * @default "End date"
+   */
+  endLabel?: string;
+  /**
+   * What the browser is told when the last day comes before the first.
+   * @default "The end date is before the start date."
+   */
+  orderMessage?: string;
+  /**
+   * How many months the calendar shows side by side. On a phone it's
+   * always one.
+   * @default 2
+   */
+  numberOfMonths?: number;
+  /**
+   * More of the calendar's own options. `min` and `max` here are the
+   * fewest and the most days the range may span.
+   */
+  calendar?: DateRangePickerCalendarProps;
+}
+export interface DateRangePickerProps extends DateRangePickerOwnProps, Omit<InputProps, "placeholder"> {
+  /** The hint in both fields. Left out, it's the pattern. */
+  placeholder?: string;
+}
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,169 @@
+import { CalendarLocale } from "../calendar/calendar.js";
+import { InputHTMLAttributes } from "react";
+import { DateRange, Matcher, PropsBase, PropsRange } from "react-day-picker";
+//#region src/components/date-picker/date-picker.d.ts
+/**
+ * The calendar's own options, for the ones the picker doesn't set itself:
+ * `captionLayout`, `showWeekNumber`, `labels` and the rest.
+ */
+export type DatePickerCalendarProps = Omit<PropsBase, "mode" | "required" | "disabled" | "locale" | "timeZone" | "weekStartsOn" | "startMonth" | "endMonth" | "animate" | "autoFocus" | "dir">;
+/**
+ * The same for a range, with the three options only a range has: the
+ * fewest and the most days it may span, and whether it may run across a
+ * day that can't be picked.
+ */
+export type DateRangePickerCalendarProps = DatePickerCalendarProps & Pick<PropsRange, "min" | "max" | "excludeDisabled">;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "min" | "max" | "type" | "name" | "form" | "children">;
+interface SharedProps {
+  /**
+   * Whether the calendar is open. Use it with `onOpenChange`.
+   */
+  open?: boolean;
+  /**
+   * Whether the calendar starts out open.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /** Called when the calendar opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** The earliest day that can be picked or typed. */
+  min?: Date;
+  /** The latest day that can be picked or typed. */
+  max?: Date;
+  /**
+   * Days that can't be picked or typed: a date, a list of them, a range,
+   * `{ dayOfWeek: [0, 6] }` for weekends, or a function that's given a date.
+   */
+  disabledDates?: Matcher | Matcher[];
+  /**
+   * The language of the calendar, and the order a typed date is read in.
+   * Take one from `@nuvui/date-picker/locale`.
+   * @default enUS
+   */
+  locale?: CalendarLocale;
+  /**
+   * The day a week starts on, from 0 for Sunday. Left out, it's the
+   * locale's.
+   */
+  weekStartsOn?: PropsBase["weekStartsOn"];
+  /**
+   * The time zone the days are in, as an IANA name such as
+   * `"Asia/Tokyo"`. Left out, it's the browser's. Dates are then handed
+   * back as `TZDate`s.
+   */
+  timeZone?: string;
+  /**
+   * The pattern a typed date is read and written in, in date-fns' tokens.
+   * `"P"` is the locale's own short date, `MM/dd/yyyy` in the United
+   * States.
+   * @default "P"
+   */
+  format?: string;
+  /**
+   * What the browser is told when the text isn't a date, or is one that
+   * can't be picked. It's shown when a form with the field is submitted.
+   * @default "Enter a valid date."
+   */
+  invalidMessage?: string;
+  /**
+   * Accessible name of the button that opens the calendar. The picked date
+   * is read after it.
+   * @default "Choose date"
+   */
+  calendarLabel?: string;
+  /**
+   * Accessible name of the calendar's panel, and the heading of the sheet
+   * it opens in on a phone.
+   * @default "Choose date"
+   */
+  title?: string;
+  /**
+   * Accessible name of the sheet's close button.
+   * @default "Close"
+   */
+  closeLabel?: string;
+  /**
+   * The `id` of the form the value belongs to, when the field is outside
+   * it.
+   */
+  form?: string;
+  /**
+   * The element the calendar is rendered into. Set this when it should pick
+   * up a `data-theme` from a section of the page.
+   * @default document.body
+   */
+  container?: Element | DocumentFragment | null;
+}
+export interface DatePickerOwnProps extends SharedProps {
+  /**
+   * The picked date, or `null` for none. Use it with `onValueChange`.
+   */
+  value?: Date | null;
+  /** The date picked to begin with. */
+  defaultValue?: Date | null;
+  /** Called with the new date when one is picked or typed. */
+  onValueChange?: (date: Date | null) => void;
+  /**
+   * The name the date is submitted under, as `yyyy-MM-dd`. Without one,
+   * nothing is submitted.
+   */
+  name?: string;
+  /**
+   * More of the calendar's own options, such as `captionLayout` and
+   * `showWeekNumber`.
+   */
+  calendar?: DatePickerCalendarProps;
+}
+export interface DatePickerProps extends DatePickerOwnProps, InputProps {}
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface DateRangePickerOwnProps extends SharedProps {
+  /**
+   * The picked range, or `null` for none. Use it with `onValueChange`.
+   */
+  value?: DateRange | null;
+  /** The range picked to begin with. */
+  defaultValue?: DateRange | null;
+  /**
+   * Called with the new range when a day is picked or typed. While only
+   * the first day has been chosen, `to` is `undefined`.
+   */
+  onValueChange?: (range: DateRange | null) => void;
+  /**
+   * The name the first day is submitted under, as `yyyy-MM-dd`.
+   */
+  startName?: string;
+  /** The name the last day is submitted under, as `yyyy-MM-dd`. */
+  endName?: string;
+  /**
+   * Accessible name of the field for the first day.
+   * @default "Start date"
+   */
+  startLabel?: string;
+  /**
+   * Accessible name of the field for the last day.
+   * @default "End date"
+   */
+  endLabel?: string;
+  /**
+   * What the browser is told when the last day comes before the first.
+   * @default "The end date is before the start date."
+   */
+  orderMessage?: string;
+  /**
+   * How many months the calendar shows side by side. On a phone it's
+   * always one.
+   * @default 2
+   */
+  numberOfMonths?: number;
+  /**
+   * More of the calendar's own options. `min` and `max` here are the
+   * fewest and the most days the range may span.
+   */
+  calendar?: DateRangePickerCalendarProps;
+}
+export interface DateRangePickerProps extends DateRangePickerOwnProps, Omit<InputProps, "placeholder"> {
+  /** The hint in both fields. Left out, it's the pattern. */
+  placeholder?: string;
+}
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion