jaci-ui 0.3.0 → 0.4.0

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

@@ -0,0 +1,589 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_base_ui = require("../base-ui.cjs");
+const require_date_range_picker = require("../../styled-system/recipes/date-range-picker.cjs");
+const require_date_utils = require("../date-picker/date-utils.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_popover = require("@base-ui/react/popover");
+//#region src/components/date-range-picker/date-range-picker.tsx
+const DateRangePickerContext = (0, react.createContext)(null);
+function useDateRangePickerContext() {
+	const context = (0, react.useContext)(DateRangePickerContext);
+	if (!context) throw new Error("DateRangePicker parts must be rendered inside DateRangePicker.Root.");
+	return context;
+}
+function sameMonth(left, right) {
+	return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+}
+function dateInRange(date, range, preview) {
+	const end = range.end ?? preview;
+	return Boolean(range.start && end && !require_date_utils.isBeforeDay(date, range.start) && !require_date_utils.isAfterDay(date, end));
+}
+function DateRangePickerRoot({ children, closeOnSelect = true, defaultValue = {
+	start: null,
+	end: null
+}, disabled = false, isDateDisabled, locale = "pt-BR", maxDate, minDate, name, onValueChange, referenceDate, value: controlledValue, weekStartsOn = 0, yearRange: configuredYearRange, ...popoverProps }) {
+	const [uncontrolledRange, setUncontrolledRange] = (0, react.useState)(defaultValue);
+	const range = controlledValue ?? uncontrolledRange;
+	const initialDate = range.start ?? referenceDate ?? /* @__PURE__ */ new Date();
+	const [month, setMonthState] = (0, react.useState)(() => require_date_utils.startOfMonth(initialDate));
+	const [focusedDate, setFocusedDate] = (0, react.useState)(range.start ?? initialDate);
+	const [hoveredDate, setHoveredDate] = (0, react.useState)(null);
+	const dayRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const actionsRef = (0, react.useRef)(null);
+	const triggerId = (0, react.useId)();
+	const styles = require_date_range_picker.dateRangePicker();
+	const today = (0, react.useMemo)(() => referenceDate ?? /* @__PURE__ */ new Date(), [referenceDate]);
+	const minMonth = minDate ? require_date_utils.startOfMonth(minDate) : void 0;
+	const maxMonth = maxDate ? require_date_utils.startOfMonth(maxDate) : void 0;
+	const yearRange = (0, react.useMemo)(() => {
+		const start = configuredYearRange?.start ?? today.getFullYear() - 100;
+		const end = configuredYearRange?.end ?? today.getFullYear() + 20;
+		const years = [
+			range.start?.getFullYear(),
+			range.end?.getFullYear(),
+			minDate?.getFullYear(),
+			maxDate?.getFullYear()
+		].filter((year) => year !== void 0);
+		return {
+			start: Math.min(start, end, ...years),
+			end: Math.max(start, end, ...years)
+		};
+	}, [
+		configuredYearRange?.end,
+		configuredYearRange?.start,
+		maxDate,
+		minDate,
+		range.end,
+		range.start,
+		today
+	]);
+	const dateDisabled = (0, react.useCallback)((date) => Boolean(minDate && require_date_utils.isBeforeDay(date, minDate) || maxDate && require_date_utils.isAfterDay(date, maxDate) || isDateDisabled?.(date)), [
+		isDateDisabled,
+		maxDate,
+		minDate
+	]);
+	const monthDisabled = (0, react.useCallback)((date) => {
+		const first = require_date_utils.startOfMonth(date);
+		const last = require_date_utils.createCalendarDate(date.getFullYear(), date.getMonth() + 1, 0);
+		return Boolean(minDate && require_date_utils.isBeforeDay(last, minDate) || maxDate && require_date_utils.isAfterDay(first, maxDate));
+	}, [maxDate, minDate]);
+	const clampMonth = (0, react.useCallback)((date) => {
+		const normalized = require_date_utils.startOfMonth(date);
+		if (minMonth && require_date_utils.isBeforeDay(normalized, minMonth)) return minMonth;
+		if (maxMonth && require_date_utils.isAfterDay(normalized, maxMonth)) return maxMonth;
+		return normalized;
+	}, [maxMonth, minMonth]);
+	const setMonth = (0, react.useCallback)((date) => setMonthState(clampMonth(date)), [clampMonth]);
+	const canNavigate = (0, react.useCallback)((amount) => {
+		const next = require_date_utils.addMonths(month, amount);
+		return !(minMonth && require_date_utils.isBeforeDay(next, minMonth)) && !(maxMonth && require_date_utils.isAfterDay(next, maxMonth));
+	}, [
+		maxMonth,
+		minMonth,
+		month
+	]);
+	const setRange = (0, react.useCallback)((nextRange) => {
+		if (controlledValue === void 0) setUncontrolledRange(nextRange);
+		onValueChange?.(nextRange);
+	}, [controlledValue, onValueChange]);
+	const close = (0, react.useCallback)(() => actionsRef.current?.close(), []);
+	const onSelect = (0, react.useCallback)((date) => {
+		if (disabled || dateDisabled(date)) return;
+		const nextDate = require_date_utils.createCalendarDate(date.getFullYear(), date.getMonth(), date.getDate());
+		let nextRange;
+		if (!range.start || range.end) nextRange = {
+			start: nextDate,
+			end: null
+		};
+		else if (require_date_utils.isBeforeDay(nextDate, range.start)) nextRange = {
+			start: nextDate,
+			end: null
+		};
+		else nextRange = {
+			start: range.start,
+			end: nextDate
+		};
+		setRange(nextRange);
+		setFocusedDate(nextDate);
+		setMonth(nextDate);
+		setHoveredDate(null);
+		if (nextRange.start && nextRange.end && closeOnSelect) close();
+	}, [
+		close,
+		closeOnSelect,
+		dateDisabled,
+		disabled,
+		range.end,
+		range.start,
+		setMonth,
+		setRange
+	]);
+	const focusDate = (0, react.useCallback)((date, direction = 1) => {
+		let next = require_date_utils.createCalendarDate(date.getFullYear(), date.getMonth(), date.getDate());
+		const step = direction < 0 ? -1 : 1;
+		let attempts = 0;
+		while (dateDisabled(next) && attempts < 366) {
+			next = require_date_utils.addDays(next, step);
+			attempts += 1;
+		}
+		setFocusedDate(next);
+		setMonth(next);
+		const focusTarget = () => dayRefs.current.get(require_date_utils.dateKey(next))?.focus();
+		focusTarget();
+		queueMicrotask(focusTarget);
+	}, [dateDisabled, setMonth]);
+	const selectMonth = (0, react.useCallback)((monthIndex) => setMonth(require_date_utils.createCalendarDate(month.getFullYear(), monthIndex, 1)), [month, setMonth]);
+	const selectYear = (0, react.useCallback)((year) => setMonth(require_date_utils.createCalendarDate(year, month.getMonth(), 1)), [month, setMonth]);
+	const registerDay = (0, react.useCallback)((key, node) => {
+		if (node) dayRefs.current.set(key, node);
+		else dayRefs.current.delete(key);
+	}, []);
+	(0, react.useEffect)(() => {
+		const selected = range.end ?? range.start;
+		if (!selected) return;
+		setFocusedDate(selected);
+		setMonthState((current) => sameMonth(current, selected) ? current : clampMonth(selected));
+	}, [
+		clampMonth,
+		range.end,
+		range.start
+	]);
+	const context = {
+		canNavigate,
+		close,
+		dateDisabled,
+		disabled,
+		focusDate,
+		focusedDate,
+		hoveredDate,
+		locale,
+		maxDate,
+		minDate,
+		month,
+		monthDisabled,
+		onSelect,
+		range,
+		registerDay,
+		selectMonth,
+		selectYear,
+		setHoveredDate,
+		setMonth,
+		setRange,
+		styles,
+		today,
+		triggerId,
+		weekStartsOn,
+		yearRange
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DateRangePickerContext.Provider, {
+		value: context,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Root, {
+			...popoverProps,
+			actionsRef,
+			children
+		}), name ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			disabled,
+			name: `${name}[start]`,
+			type: "hidden",
+			value: require_date_utils.toInputDate(range.start)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			disabled,
+			name: `${name}[end]`,
+			type: "hidden",
+			value: require_date_utils.toInputDate(range.end)
+		})] }) : null]
+	});
+}
+const DateRangePickerLabel = (0, react.forwardRef)(function DateRangePickerLabel({ className, ...props }, ref) {
+	const { styles, triggerId } = useDateRangePickerContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+		...props,
+		className: require_cx.cx(styles.label, className),
+		"data-slot": "date-range-picker-label",
+		htmlFor: props.htmlFor ?? triggerId,
+		ref
+	});
+});
+const DateRangePickerControl = (0, react.forwardRef)(function DateRangePickerControl({ className, ...props }, ref) {
+	const { styles } = useDateRangePickerContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: require_cx.cx(styles.control, className),
+		"data-slot": "date-range-picker-control",
+		ref
+	});
+});
+const DateRangePickerTrigger = (0, react.forwardRef)(function DateRangePickerTrigger({ children, className, disabled, id, ...props }, ref) {
+	const { disabled: pickerDisabled, styles, triggerId } = useDateRangePickerContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Trigger, {
+		...props,
+		"aria-label": props["aria-label"] ?? "Choose date range",
+		className: require_base_ui.withRecipeClassName(styles.trigger, className),
+		"data-jaci-component": "date-range-picker",
+		"data-slot": "date-range-picker-trigger",
+		disabled: disabled ?? pickerDisabled,
+		id: id ?? triggerId,
+		ref,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateRangePickerValue, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			children: "▾"
+		})] })
+	});
+});
+const DateRangePickerValue = (0, react.forwardRef)(function DateRangePickerValue({ children, className, placeholder, ...props }, ref) {
+	const { locale, range, styles } = useDateRangePickerContext();
+	const value = children ?? (range.start && range.end ? `${require_date_utils.formatDateLabel(range.start, locale, "")} – ${require_date_utils.formatDateLabel(range.end, locale, "")}` : range.start ? `${require_date_utils.formatDateLabel(range.start, locale, "")} – …` : placeholder ?? "Select a date range");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		className: require_cx.cx(styles.value, className),
+		"data-placeholder": range.start ? void 0 : "true",
+		"data-slot": "date-range-picker-value",
+		ref,
+		children: value
+	});
+});
+const DateRangePickerClear = (0, react.forwardRef)(function DateRangePickerClear({ children = "×", className, disabled, onClick, ...props }, ref) {
+	const { disabled: pickerDisabled, range, setRange, styles, close } = useDateRangePickerContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Clear date range",
+		className: require_cx.cx(styles.clear, className),
+		"data-slot": "date-range-picker-clear",
+		disabled: disabled || pickerDisabled || !range.start && !range.end,
+		onClick: (event) => {
+			setRange({
+				start: null,
+				end: null
+			});
+			close();
+			onClick?.(event);
+		},
+		ref,
+		type: "button",
+		children
+	});
+});
+const DateRangePickerPortal = _base_ui_react_popover.Popover.Portal;
+const DateRangePickerPositioner = (0, react.forwardRef)(function DateRangePickerPositioner({ className, ...props }, ref) {
+	const { styles } = useDateRangePickerContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
+		...props,
+		className: require_base_ui.withRecipeClassName(styles.positioner, className),
+		"data-slot": "date-range-picker-positioner",
+		ref
+	});
+});
+const DateRangePickerPopup = (0, react.forwardRef)(function DateRangePickerPopup({ className, ...props }, ref) {
+	const { styles } = useDateRangePickerContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Popup, {
+		...props,
+		"aria-label": props["aria-label"] ?? "Calendar",
+		className: require_base_ui.withRecipeClassName(styles.popup, className),
+		"data-slot": "date-range-picker-popup",
+		ref
+	});
+});
+const DateRangePickerClose = (0, react.forwardRef)(function DateRangePickerClose({ className, ...props }, ref) {
+	const { styles } = useDateRangePickerContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Close, {
+		...props,
+		className: require_base_ui.withRecipeClassName(styles.close, className),
+		"data-slot": "date-range-picker-close",
+		ref
+	});
+});
+const DateRangePickerHeader = (0, react.forwardRef)(function DateRangePickerHeader({ className, ...props }, ref) {
+	const { styles } = useDateRangePickerContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: require_cx.cx(styles.header, className),
+		"data-slot": "date-range-picker-header",
+		ref
+	});
+});
+const DateRangePickerNavigationButton = (0, react.forwardRef)(function DateRangePickerNavigationButton({ amount = 1, children, className, onClick, ...props }, ref) {
+	const { canNavigate, month, setMonth, styles } = useDateRangePickerContext();
+	const isDisabled = props.disabled || !canNavigate(amount);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		"aria-label": props["aria-label"] ?? (amount < 0 ? "Previous month" : "Next month"),
+		className: require_cx.cx(styles.navigation, className),
+		"data-slot": amount < 0 ? "date-range-picker-previous" : "date-range-picker-next",
+		disabled: isDisabled,
+		onClick: (event) => {
+			if (!isDisabled) setMonth(require_date_utils.addMonths(month, amount));
+			onClick?.(event);
+		},
+		ref,
+		type: "button",
+		children: children ?? (amount < 0 ? "‹" : "›")
+	});
+});
+const DateRangePickerPrevious = (0, react.forwardRef)(function DateRangePickerPrevious(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateRangePickerNavigationButton, {
+		...props,
+		amount: -1,
+		ref
+	});
+});
+const DateRangePickerNext = (0, react.forwardRef)(function DateRangePickerNext(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateRangePickerNavigationButton, {
+		...props,
+		amount: 1,
+		ref
+	});
+});
+const DateRangePickerMonthSelect = (0, react.forwardRef)(function DateRangePickerMonthSelect({ className, ...props }, ref) {
+	const { locale, month, monthDisabled, selectMonth, styles } = useDateRangePickerContext();
+	const labels = require_date_utils.getMonthLabels(locale);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Select month",
+		className: require_cx.cx(styles.monthSelect, className),
+		"data-slot": "date-range-picker-month-select",
+		onChange: (event) => selectMonth(Number(event.currentTarget.value)),
+		ref,
+		value: month.getMonth(),
+		children: labels.map((label, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			disabled: monthDisabled(require_date_utils.createCalendarDate(month.getFullYear(), index, 1)),
+			value: index,
+			children: label
+		}, label))
+	});
+});
+const DateRangePickerYearSelect = (0, react.forwardRef)(function DateRangePickerYearSelect({ className, ...props }, ref) {
+	const { month, monthDisabled, selectYear, styles, yearRange } = useDateRangePickerContext();
+	const years = Array.from({ length: yearRange.end - yearRange.start + 1 }, (_, index) => yearRange.start + index);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Select year",
+		className: require_cx.cx(styles.yearSelect, className),
+		"data-slot": "date-range-picker-year-select",
+		onChange: (event) => selectYear(Number(event.currentTarget.value)),
+		ref,
+		value: month.getFullYear(),
+		children: years.map((year) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			disabled: monthDisabled(require_date_utils.createCalendarDate(year, month.getMonth(), 1)),
+			value: year,
+			children: year
+		}, year))
+	});
+});
+const DateRangePickerDay = (0, react.forwardRef)(function DateRangePickerDay({ children, className, date, disabled, onClick, onKeyDown, onMouseEnter, ...props }, ref) {
+	const { dateDisabled, disabled: pickerDisabled, focusDate, focusedDate, hoveredDate, locale, month, range, onSelect, registerDay, setHoveredDate, styles, today, weekStartsOn } = useDateRangePickerContext();
+	const key = require_date_utils.dateKey(date);
+	const isDisabled = Boolean(disabled || pickerDisabled || dateDisabled(date));
+	const isStart = Boolean(range.start && require_date_utils.isSameDay(date, range.start));
+	const isEnd = Boolean(range.end && require_date_utils.isSameDay(date, range.end));
+	const inRange = dateInRange(date, range, hoveredDate);
+	const outsideMonth = !sameMonth(date, month);
+	const isFocused = require_date_utils.isSameDay(date, focusedDate);
+	const isToday = require_date_utils.isSameDay(date, today);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		"aria-label": props["aria-label"] ?? new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(date),
+		"aria-current": isToday ? "date" : void 0,
+		"aria-selected": isStart || isEnd,
+		className: require_cx.cx(styles.day, className),
+		"data-date": key,
+		"data-disabled": isDisabled || void 0,
+		"data-in-range": inRange || void 0,
+		"data-outside-month": outsideMonth || void 0,
+		"data-range-end": isEnd || void 0,
+		"data-range-start": isStart || void 0,
+		"data-slot": "date-range-picker-day",
+		"data-today": isToday || void 0,
+		disabled: isDisabled,
+		onClick: (event) => {
+			onSelect(date);
+			onClick?.(event);
+		},
+		onKeyDown: (event) => {
+			if (!event.defaultPrevented) {
+				let nextDate;
+				switch (event.key) {
+					case "ArrowLeft":
+						nextDate = require_date_utils.addDays(date, -1);
+						break;
+					case "ArrowRight":
+						nextDate = require_date_utils.addDays(date, 1);
+						break;
+					case "ArrowUp":
+						nextDate = require_date_utils.addDays(date, -7);
+						break;
+					case "ArrowDown":
+						nextDate = require_date_utils.addDays(date, 7);
+						break;
+					case "Home":
+						nextDate = require_date_utils.addDays(date, -((date.getDay() - weekStartsOn + 7) % 7));
+						break;
+					case "End":
+						nextDate = require_date_utils.addDays(date, 6 - (date.getDay() - weekStartsOn + 7) % 7);
+						break;
+					case "PageUp":
+						nextDate = require_date_utils.addMonths(date, event.shiftKey ? -12 : -1);
+						break;
+					case "PageDown":
+						nextDate = require_date_utils.addMonths(date, event.shiftKey ? 12 : 1);
+						break;
+					case "Enter":
+					case " ":
+						if (!isDisabled) {
+							event.preventDefault();
+							onSelect(date);
+						}
+						break;
+				}
+				if (nextDate) {
+					event.preventDefault();
+					focusDate(nextDate, nextDate < date ? -1 : 1);
+				}
+			}
+			onKeyDown?.(event);
+		},
+		onMouseEnter: (event) => {
+			if (!isDisabled) setHoveredDate(date);
+			onMouseEnter?.(event);
+		},
+		ref: (node) => {
+			registerDay(key, node);
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		role: "gridcell",
+		tabIndex: isFocused && !isDisabled ? 0 : -1,
+		type: "button",
+		children: children ?? date.getDate()
+	});
+});
+const DateRangePickerCalendar = (0, react.forwardRef)(function DateRangePickerCalendar({ "aria-label": ariaLabel, className, ...props }, ref) {
+	const { locale, month, styles, weekStartsOn } = useDateRangePickerContext();
+	const days = (0, react.useMemo)(() => require_date_utils.getCalendarDays(month, weekStartsOn), [month, weekStartsOn]);
+	const weekdays = (0, react.useMemo)(() => require_date_utils.getWeekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		...props,
+		"aria-label": ariaLabel ?? require_date_utils.formatMonthLabel(month, locale),
+		className: require_cx.cx(styles.calendar, className),
+		"data-slot": "date-range-picker-calendar",
+		ref,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-hidden": "true",
+			className: styles.weekdays,
+			"data-slot": "date-range-picker-weekdays",
+			children: weekdays.map((weekday) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: styles.weekday,
+				"data-slot": "date-range-picker-weekday",
+				children: weekday
+			}, weekday))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-label": require_date_utils.formatMonthLabel(month, locale),
+			className: styles.grid,
+			"data-slot": "date-range-picker-grid",
+			role: "grid",
+			children: days.map((date) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateRangePickerDay, { date }, require_date_utils.dateKey(date)))
+		})]
+	});
+});
+const DateRangePickerPreview = (0, react.forwardRef)(function DateRangePickerPreview({ children, className, ...props }, ref) {
+	const { hoveredDate, locale, range, styles } = useDateRangePickerContext();
+	const content = children ?? (range.start ? `${require_date_utils.formatDateLabel(range.start, locale, "")} – ${range.end ? require_date_utils.formatDateLabel(range.end, locale, "") : hoveredDate ? require_date_utils.formatDateLabel(hoveredDate, locale, "") : "…"}` : "Select a start date");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		"aria-live": "polite",
+		className: require_cx.cx(styles.preview, className),
+		"data-slot": "date-range-picker-preview",
+		ref,
+		children: content
+	});
+});
+const DateRangePickerInput = (0, react.forwardRef)(function DateRangePickerInput({ className, onBlur, onInput, side, ...props }, ref) {
+	const { disabled, range, setRange, styles } = useDateRangePickerContext();
+	const value = require_date_utils.toInputDate(side === "start" ? range.start : range.end);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		"aria-label": props["aria-label"] ?? (side === "start" ? "Start date" : "End date"),
+		className: require_cx.cx(styles.input, className),
+		"data-slot": `date-range-picker-${side}-input`,
+		disabled: disabled || props.disabled,
+		onChange: (event) => {
+			const [year, month, day] = event.currentTarget.value.split("-").map(Number);
+			if (!year || !month || !day) return;
+			const date = require_date_utils.createCalendarDate(year, month - 1, day);
+			setRange(side === "start" ? {
+				start: date,
+				end: range.end
+			} : {
+				start: range.start,
+				end: date
+			});
+		},
+		onBlur,
+		onInput,
+		ref,
+		type: "date",
+		value
+	});
+});
+const DateRangePickerStartInput = (0, react.forwardRef)(function DateRangePickerStartInput(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateRangePickerInput, {
+		...props,
+		ref,
+		side: "start"
+	});
+});
+const DateRangePickerEndInput = (0, react.forwardRef)(function DateRangePickerEndInput(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateRangePickerInput, {
+		...props,
+		ref,
+		side: "end"
+	});
+});
+const DateRangePicker = {
+	Root: DateRangePickerRoot,
+	Label: DateRangePickerLabel,
+	Control: DateRangePickerControl,
+	Trigger: DateRangePickerTrigger,
+	Value: DateRangePickerValue,
+	Clear: DateRangePickerClear,
+	Portal: DateRangePickerPortal,
+	Positioner: DateRangePickerPositioner,
+	Popup: DateRangePickerPopup,
+	Close: DateRangePickerClose,
+	Header: DateRangePickerHeader,
+	Previous: DateRangePickerPrevious,
+	Next: DateRangePickerNext,
+	MonthSelect: DateRangePickerMonthSelect,
+	YearSelect: DateRangePickerYearSelect,
+	Calendar: DateRangePickerCalendar,
+	Day: DateRangePickerDay,
+	Preview: DateRangePickerPreview,
+	StartInput: DateRangePickerStartInput,
+	EndInput: DateRangePickerEndInput
+};
+//#endregion
+exports.DateRangePicker = DateRangePicker;
+exports.DateRangePickerCalendar = DateRangePickerCalendar;
+exports.DateRangePickerClear = DateRangePickerClear;
+exports.DateRangePickerClose = DateRangePickerClose;
+exports.DateRangePickerControl = DateRangePickerControl;
+exports.DateRangePickerDay = DateRangePickerDay;
+exports.DateRangePickerEndInput = DateRangePickerEndInput;
+exports.DateRangePickerHeader = DateRangePickerHeader;
+exports.DateRangePickerInput = DateRangePickerInput;
+exports.DateRangePickerLabel = DateRangePickerLabel;
+exports.DateRangePickerMonthSelect = DateRangePickerMonthSelect;
+exports.DateRangePickerNext = DateRangePickerNext;
+exports.DateRangePickerPopup = DateRangePickerPopup;
+exports.DateRangePickerPortal = DateRangePickerPortal;
+exports.DateRangePickerPositioner = DateRangePickerPositioner;
+exports.DateRangePickerPreview = DateRangePickerPreview;
+exports.DateRangePickerPrevious = DateRangePickerPrevious;
+exports.DateRangePickerRoot = DateRangePickerRoot;
+exports.DateRangePickerStartInput = DateRangePickerStartInput;
+exports.DateRangePickerTrigger = DateRangePickerTrigger;
+exports.DateRangePickerValue = DateRangePickerValue;
+exports.DateRangePickerYearSelect = DateRangePickerYearSelect;
+
+//# sourceMappingURL=date-range-picker.cjs.map