@od-oneapp/uni-ui 2026.1.1301

package/dist/date-range-picker-CdemRFs_.mjs

@@ -0,0 +1,676 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { useResponsive } from "./hooks/use-responsive.mjs";
+import { useScrollProgress } from "./hooks/use-scroll-progress.mjs";
+import { a as SPRING_TACTILE } from "./motion-zelaDelJ.mjs";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "./tooltip-B8_zKnHC.mjs";
+import { t as Popover } from "./popover-DmWxl2lW.mjs";
+import { createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useDisclosure, useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { cva } from "class-variance-authority";
+import { Calendar, ChevronDown, ChevronLeft, ChevronRight, Lock } from "lucide-react";
+import { motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command } from "cmdk";
+import { endOfDay, format, isSameDay, startOfDay } from "date-fns";
+import { DayPicker, useNavigation } from "react-day-picker";
+import { enUS } from "date-fns/locale";
+
+//#region src/components/forms/date-picker/calendar/calendar.tsx
+/**
+* @fileoverview Calendar Component - Premium Harmony V2
+*
+* Accessible calendar component built on react-day-picker with comprehensive
+* touch support and Premium Harmony V2 motion standards. Features single and
+* range selection modes, localized calendars, and WCAG-compliant touch targets.
+*
+* Features:
+* - Premium Harmony V2 reduced motion support
+* - Touch detection with automatic sizing for mobile devices
+* - WCAG 2.5.5 compliant 44px minimum touch targets
+* - Semantic color tokens (no hardcoded colors)
+* - Enhanced focus styles with ring indicators
+* - Keyboard navigation (arrow keys, enter, escape)
+* - Screen reader announcements for date changes
+* - Range selection with visual highlighting
+* - Flexible month/year navigation controls
+* - Disabled date support with visual indicators
+* - Locale-aware formatting
+*
+* @module @od-oneapp/uni-ui/components/date-picker/calendar
+*
+* @component Calendar
+*
+* @useCases
+* - Date selection: Single date or date range selection with keyboard navigation
+* - Scheduling interfaces: Appointment booking, event creation, deadline setting
+* - Date filtering: Report date ranges, analytics time periods, data queries
+* - Touch devices: Mobile-optimized with 44px minimum touch targets (WCAG 2.5.5)
+* - Accessible navigation: Keyboard shortcuts, screen reader support, focus management
+* - Localized calendars: Support for multiple locales and calendar systems
+* - Restricted dates: Min/max dates, disabled days, custom validation rules
+* - Year navigation: Quick year jumping for birth dates or historical data
+*
+* @subcomponents NavigationButton, CaptionComponent
+*
+* @example <Calendar mode="single" selected={date} onSelect={setDate} />
+* @example <Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
+* @example <Calendar showYearNavigation fromYear={1900} toYear={2100} />
+* @example <Calendar locale={fr} />
+*/
+const CalendarContext = createContext({ showYearNavigation: false });
+const CALENDAR_NAV_BUTTON_BASE_CLASSNAME = "flex shrink-0 items-center justify-center rounded border p-1 outline-none select-none";
+const CALENDAR_NAV_BUTTON_SIZE_DEFAULT_CLASSNAME = "size-7";
+const CALENDAR_NAV_BUTTON_SIZE_TOUCH_CLASSNAME = "size-11";
+const CALENDAR_NAV_BUTTON_TRANSITION_CLASSNAME = "transition";
+const CALENDAR_NAV_BUTTON_STYLE_CLASSNAME = "border-border text-muted-foreground hover:text-foreground hover:bg-muted active:bg-accent";
+const CALENDAR_NAV_BUTTON_DISABLED_CLASSNAME = "disabled:text-muted-foreground/50 disabled:pointer-events-none";
+const CALENDAR_NAV_BUTTON_FOCUS_CLASSNAME = "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2";
+const CALENDAR_NAV_ICON_CLASSNAME = "size-full shrink-0";
+const NavigationButton = forwardRef(({ onClick, icon: Icon, disabled, ...props }, forwardedRef) => {
+	const reducedMotion = useReducedMotion() ?? false;
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	return /* @__PURE__ */ jsx("button", {
+		ref: forwardedRef,
+		type: "button",
+		disabled,
+		className: useMemo(() => cn(CALENDAR_NAV_BUTTON_BASE_CLASSNAME, isTouchDevice ? CALENDAR_NAV_BUTTON_SIZE_TOUCH_CLASSNAME : CALENDAR_NAV_BUTTON_SIZE_DEFAULT_CLASSNAME, !reducedMotion && CALENDAR_NAV_BUTTON_TRANSITION_CLASSNAME, CALENDAR_NAV_BUTTON_STYLE_CLASSNAME, CALENDAR_NAV_BUTTON_DISABLED_CLASSNAME, CALENDAR_NAV_BUTTON_FOCUS_CLASSNAME), [reducedMotion, isTouchDevice]),
+		onClick,
+		...props,
+		children: /* @__PURE__ */ jsx(Icon, { className: CALENDAR_NAV_ICON_CLASSNAME })
+	});
+});
+NavigationButton.displayName = "NavigationButton";
+function CaptionComponent({ calendarMonth }) {
+	const { locale, disableNavigation } = useContext(CalendarContext);
+	const { goToMonth, nextMonth, previousMonth } = useNavigation();
+	const displayMonth = calendarMonth.date;
+	const formatOptions = locale ? { locale } : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-1",
+				children: /* @__PURE__ */ jsx(NavigationButton, {
+					disabled: disableNavigation === true || previousMonth == null,
+					"aria-label": "Go to previous month",
+					onClick: () => {
+						if (previousMonth != null) goToMonth(previousMonth);
+					},
+					icon: ChevronLeft
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "presentation",
+				"aria-live": "polite",
+				className: "text-foreground text-sm font-medium capitalize tabular-nums",
+				children: format(displayMonth, "LLLL yyy", formatOptions)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-1",
+				children: /* @__PURE__ */ jsx(NavigationButton, {
+					disabled: disableNavigation === true || nextMonth == null,
+					"aria-label": "Go to next month",
+					onClick: () => {
+						if (nextMonth != null) goToMonth(nextMonth);
+					},
+					icon: ChevronRight
+				})
+			})
+		]
+	});
+}
+function Calendar$1({ mode = "single", weekStartsOn = 0, numberOfMonths = 1, showYearNavigation = false, disableNavigation, locale, className, classNames, ...props }) {
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	const contextValue = useMemo(() => ({
+		showYearNavigation,
+		disableNavigation,
+		locale
+	}), [
+		showYearNavigation,
+		disableNavigation,
+		locale
+	]);
+	const dayPickerProps = {
+		mode,
+		weekStartsOn,
+		numberOfMonths,
+		locale,
+		showOutsideDays: numberOfMonths === 1,
+		className,
+		classNames: {
+			months: "flex space-y-0",
+			month: "space-y-4 p-3 w-full",
+			nav: "gap-1 flex items-center rounded-full w-full h-full justify-between p-4",
+			table: "w-full border-separate border-spacing-y-1",
+			head_cell: cn("font-medium text-xs text-center text-muted-foreground pb-2", isTouchDevice ? "w-11" : "w-9"),
+			row: "w-full",
+			cell: "relative p-0 text-center focus-within:relative text-foreground",
+			day: cn("relative rounded-md text-sm text-foreground", isTouchDevice ? "size-11" : "size-10", "hover:bg-muted active:bg-accent outline outline-offset-2 outline-0 focus-visible:outline-2 outline-primary"),
+			day_today: "font-semibold",
+			day_selected: "rounded aria-selected:bg-primary aria-selected:text-primary-foreground",
+			day_disabled: "!text-muted-foreground/50 line-through disabled:hover:bg-transparent",
+			day_outside: "text-muted-foreground",
+			day_range_middle: "!rounded-none aria-selected:!bg-primary/10 aria-selected:!text-foreground",
+			day_range_start: "rounded-r-none !rounded-l",
+			day_range_end: "rounded-l-none !rounded-r",
+			day_hidden: "invisible",
+			...classNames
+		},
+		components: { MonthCaption: CaptionComponent },
+		...props
+	};
+	return /* @__PURE__ */ jsx(CalendarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(DayPicker, { ...dayPickerProps })
+	});
+}
+
+//#endregion
+//#region src/components/forms/date-picker/presets/presets.tsx
+/**
+* @fileoverview Presets Component - Premium Harmony V2
+*
+* Accessible preset selection component for date pickers with keyboard shortcuts,
+* quick selection for common ranges, visual shortcut hints, and premium/locked
+* states with tooltips.
+*
+* Features:
+* - Premium Harmony V2 semantic color tokens
+* - Enhanced focus styles with ring indicators
+* - WCAG 2.5.5 touch-friendly interaction targets
+* - Keyboard navigation via cmdk (Command Menu)
+* - Visual keyboard shortcut display
+* - Active preset highlighting
+* - Disabled/locked preset states
+* - Tooltip integration for upgrade prompts
+* - Responsive layout (horizontal scroll on mobile, vertical on desktop)
+* - Smart current value matching
+* - Data attributes for state management
+* - Semantic HTML with proper ARIA labels
+*
+* @module @od-oneapp/uni-ui/components/date-picker/presets
+* @component Presets
+*
+* @useCases
+* - Quick date selection: Common date ranges like "Today", "Last 7 days", "This month"
+* - Analytics shortcuts: Preset reporting periods for dashboards and metrics
+* - Keyboard navigation: Arrow keys for preset selection, Enter to confirm
+* - Keyboard shortcuts: Custom shortcut keys displayed and functional
+* - Premium features: Locked presets requiring upgrade with tooltip explanations
+* - Touch interfaces: Mobile-optimized with adequate touch targets
+* - Current selection: Visual indication of active preset or matching date range
+* - Accessibility: Screen reader support, keyboard focus management
+*
+* @example <Presets presets={[{ id: 'today', label: 'Today', dateRange: { from: today, to: today } }]} onSelect={handleSelect} />
+* @example <Presets presets={[{ id: 'last7', label: 'Last 7 days', shortcut: 'L', dateRange: range }]} onSelect={handleSelect} />
+* @example <Presets presets={[{ id: 'custom', label: 'Custom', requiresUpgrade: true, tooltipContent: 'Upgrade to Pro' }]} onSelect={handleSelect} />
+* @example <Presets currentPresetId="last7" currentValue={currentRange} presets={presets} onSelect={handleSelect} />
+*/
+function isDateRangePresets(preset) {
+	return typeof preset === "object" && preset !== null && "dateRange" in preset;
+}
+function isDatePresets(preset) {
+	return typeof preset === "object" && preset !== null && "date" in preset;
+}
+function compareDates(date1, date2) {
+	return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+}
+function compareRanges(range1, range2) {
+	const from1 = range1.from;
+	const from2 = range2.from;
+	let equalFrom = false;
+	if (from1 != null && from2 != null) {
+		if (compareDates(from1, from2)) equalFrom = true;
+	}
+	const to1 = range1.to;
+	const to2 = range2.to;
+	let equalTo = false;
+	if (to1 != null && to2 != null) {
+		if (compareDates(to1, to2)) equalTo = true;
+	}
+	return equalFrom && equalTo;
+}
+const Presets = ({ presets, onSelect, currentValue, currentPresetId }) => {
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	const matchesCurrent = (preset) => {
+		if (currentPresetId != null) return currentPresetId === preset.id;
+		if (isDateRangePresets(preset)) {
+			const value = currentValue;
+			return value != null && compareRanges(value, preset.dateRange);
+		} else if (isDatePresets(preset)) {
+			const value = currentValue;
+			return value != null && compareDates(value, preset.date);
+		}
+		return false;
+	};
+	return /* @__PURE__ */ jsx(Command, {
+		className: "ring-border w-full rounded ring-offset-2 focus:outline-none",
+		tabIndex: 0,
+		loop: true,
+		children: /* @__PURE__ */ jsx(Command.List, {
+			className: "[&>*]:flex [&>*]:w-full [&>*]:items-start [&>*]:gap-x-2 [&>*]:gap-y-0.5 [&>*]:sm:flex-col",
+			children: presets.map((preset) => {
+				return /* @__PURE__ */ jsxs(Command.Item, {
+					disabled: preset.requiresUpgrade,
+					onSelect: () => onSelect(preset),
+					title: preset.label,
+					value: preset.id,
+					className: cn("group border-border relative flex cursor-pointer items-center justify-between overflow-hidden rounded border text-ellipsis whitespace-nowrap", "text-foreground px-2.5 text-left text-sm shadow-xs outline-none sm:w-full sm:border-none sm:shadow-none", isTouchDevice ? "min-h-11 py-2.5" : "py-1.5 sm:py-2", "disabled:pointer-events-none disabled:opacity-50", "sm:data-[selected=true]:bg-muted", matchesCurrent(preset) && "font-semibold"),
+					children: [
+						/* @__PURE__ */ jsx("span", { children: preset.label }),
+						(() => {
+							if (preset.requiresUpgrade === true) return /* @__PURE__ */ jsx(Lock, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							});
+							if (preset.shortcut != null) return /* @__PURE__ */ jsx("kbd", {
+								className: "bg-muted text-muted-foreground group-data-[selected=true]:bg-accent hidden rounded px-2 py-0.5 text-xs font-light md:block",
+								children: preset.shortcut.toUpperCase()
+							});
+							return null;
+						})(),
+						preset.requiresUpgrade === true && preset.tooltipContent != null ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 cursor-not-allowed" })
+						}), /* @__PURE__ */ jsx(TooltipContent, {
+							side: "bottom",
+							children: preset.tooltipContent
+						})] }) }) : null
+					]
+				}, preset.id);
+			})
+		})
+	});
+};
+Presets.displayName = "DatePicker.Presets";
+
+//#endregion
+//#region src/components/forms/date-picker/shared.ts
+/**
+* @fileoverview Date Picker shared utilities
+*
+* Shared context and utility functions for date picker components.
+*
+* @module @od-oneapp/uni-ui/components/date-picker/shared
+*/
+const DatePickerContext = createContext({
+	isOpen: false,
+	setIsOpen: () => {}
+});
+const isBrowserLocaleClockType24h = () => {
+	const language = typeof window !== "undefined" ? window.navigator.language : "en-US";
+	const hr = new Intl.DateTimeFormat(language, { hour: "numeric" }).format();
+	return Number.isInteger(Number(hr));
+};
+const formatDate = (date, locale, includeTime = false) => {
+	const usesAmPm = !isBrowserLocaleClockType24h();
+	let dateString;
+	if (includeTime) dateString = usesAmPm ? format(date, `d MMM, yyyy h:mm a`, { locale }) : format(date, `d MMM, yyyy HH:mm`, { locale });
+	else dateString = format(date, `d MMM, yyyy`, { locale });
+	return dateString;
+};
+const validatePresets = (presets, rules) => {
+	const { toYear, fromYear, fromMonth, toMonth, fromDay, toDay } = rules;
+	if (presets.length > 0) presets.forEach((preset) => {
+		if ("date" in preset) {
+			const presetYear = preset.date.getFullYear();
+			if (fromYear && presetYear < fromYear) throw new Error(`Preset ${preset.label} is before fromYear ${fromYear}.`);
+			if (toYear && presetYear > toYear) throw new Error(`Preset ${preset.label} is after toYear ${toYear}.`);
+			if (fromMonth) {
+				if (preset.date.getMonth() < fromMonth.getMonth()) throw new Error(`Preset ${preset.label} is before fromMonth.`);
+			}
+			if (toMonth) {
+				if (preset.date.getMonth() > toMonth.getMonth()) throw new Error(`Preset ${preset.label} is after toMonth.`);
+			}
+			if (fromDay) {
+				if (preset.date.getDate() < fromDay.getDate()) throw new Error(`Preset ${preset.label} is before fromDay.`);
+			}
+			if (toDay) {
+				if (preset.date.getDate() > toDay.getDate()) throw new Error(`Preset ${preset.label} is after toDay.`);
+			}
+		}
+		if ("dateRange" in preset) {
+			const presetFromYear = preset.dateRange.from?.getFullYear();
+			const presetToYear = preset.dateRange.to?.getFullYear();
+			if (presetFromYear && fromYear && presetFromYear < fromYear) throw new Error(`Preset ${preset.label}'s 'from' is before fromYear.`);
+			if (presetToYear && toYear && presetToYear > toYear) throw new Error(`Preset ${preset.label}'s 'to' is after toYear.`);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/forms/date-picker/trigger/trigger.tsx
+/**
+* @fileoverview Date Picker Trigger - Premium Harmony V2
+*
+* Accessible trigger button for date picker popover with comprehensive touch support
+* and Premium Harmony V2 spring physics. Features tactile feedback, automatic touch
+* target sizing, and error state styling.
+*
+* Features:
+* - Premium Harmony V2 spring physics (tactile feedback on tap)
+* - Touch detection with automatic sizing for mobile devices
+* - Reduced motion support for accessibility
+* - WCAG 2.5.5 compliant 44px minimum touch targets on touch devices
+* - Semantic color tokens (no hardcoded colors)
+* - Enhanced focus styles with ring indicators
+* - Data attributes for state management (data-state)
+* - Multiple size variants (sm, default, lg, touch)
+* - Error state styling with visual feedback
+* - Icon + text + chevron layout with proper spacing
+* - Ellipsis overflow handling for long dates
+* - Motion/React spring animations
+*
+* @module @od-oneapp/uni-ui/components/date-picker/trigger
+* @component Trigger
+*
+* @useCases
+* - Date picker activation: Opens calendar popover for date/range selection
+* - Form inputs: Date fields in forms with visual calendar trigger
+* - Filter controls: Date range filters for reports, analytics, data views
+* - Touch interfaces: Mobile-optimized with automatic 44px touch targets (WCAG 2.5.5)
+* - Loading states: Visual feedback during async date validation or data loading
+* - Error states: Visual error indication for invalid date selections
+* - Keyboard navigation: Space/Enter to open, Escape to close with focus management
+* - Screen readers: Proper ARIA labels and state announcements
+*
+* @variants
+* - size: "sm" | "default" | "lg" | "touch" - Controls height and padding
+* - hasError: boolean - Applies destructive ring and border styling
+*
+* @example <Trigger placeholder="Select date" />
+* @example <Trigger>Jan 15, 2024</Trigger>
+* @example <Trigger hasError>Invalid date</Trigger>
+* @example <Trigger size="touch">Select date range</Trigger>
+* @example <Trigger size="sm" placeholder="Pick date" />
+*/
+const TRIGGER_FOCUS_CLASSNAME = "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none";
+const TRIGGER_CALENDAR_ICON_BASE_CLASSNAME = "text-muted-foreground size-4 shrink-0";
+const TRIGGER_CALENDAR_ICON_WITH_CHILDREN_CLASSNAME = "text-foreground";
+const TRIGGER_CONTENT_SPAN_CLASSNAME = "flex-1 overflow-hidden text-left text-ellipsis whitespace-nowrap";
+const TRIGGER_PLACEHOLDER_CLASSNAME = "text-muted-foreground";
+const TRIGGER_CHEVRON_BASE_CLASSNAME = "text-muted-foreground size-4 shrink-0";
+const TRIGGER_CHEVRON_TRANSITION_CLASSNAME = "transition-transform duration-75";
+const TRIGGER_CHEVRON_OPEN_CLASSNAME = "group-data-[state=open]:rotate-180";
+const triggerStyles = cva([
+	"group peer flex cursor-pointer appearance-none items-center gap-x-2 truncate rounded-md border px-3 outline-none text-sm",
+	"transition-all",
+	"bg-background border-input text-foreground placeholder:text-muted-foreground",
+	"disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground",
+	"focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20",
+	"data-[state=open]:border-ring data-[state=open]:ring-2 data-[state=open]:ring-ring/20"
+], {
+	variants: {
+		hasError: { true: "ring-2 ring-destructive/20 border-destructive" },
+		size: {
+			default: "h-10",
+			sm: "h-9 px-2.5 text-xs",
+			lg: "h-11 px-4 text-base",
+			touch: "h-11 px-3 text-base md:text-sm"
+		}
+	},
+	defaultVariants: { size: "default" }
+});
+const Trigger = memo(forwardRef(({ className, children, placeholder, hasError, size, ...props }, forwardedRef) => {
+	const reducedMotion = useReducedMotion() ?? false;
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	const hasChildren = children != null;
+	const effectiveSize = size ?? (isTouchDevice ? "touch" : "default");
+	const buttonClassName = useMemo(() => cn(triggerStyles({
+		hasError,
+		size: effectiveSize
+	}), TRIGGER_FOCUS_CLASSNAME, className), [
+		hasError,
+		effectiveSize,
+		className
+	]);
+	const calendarIconClassName = useMemo(() => cn(TRIGGER_CALENDAR_ICON_BASE_CLASSNAME, hasChildren && TRIGGER_CALENDAR_ICON_WITH_CHILDREN_CLASSNAME), [hasChildren]);
+	const chevronClassName = useMemo(() => cn(TRIGGER_CHEVRON_BASE_CLASSNAME, !reducedMotion && TRIGGER_CHEVRON_TRANSITION_CLASSNAME, TRIGGER_CHEVRON_OPEN_CLASSNAME), [reducedMotion]);
+	const content = useMemo(() => {
+		if (hasChildren) return children;
+		if (placeholder != null) return /* @__PURE__ */ jsx("span", {
+			className: TRIGGER_PLACEHOLDER_CLASSNAME,
+			children: placeholder
+		});
+		return null;
+	}, [
+		hasChildren,
+		children,
+		placeholder
+	]);
+	return /* @__PURE__ */ jsxs(motion.button, {
+		type: "button",
+		ref: forwardedRef,
+		className: buttonClassName,
+		whileTap: reducedMotion ? void 0 : { scale: .98 },
+		transition: SPRING_TACTILE,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Calendar, { className: calendarIconClassName }),
+			/* @__PURE__ */ jsx("span", {
+				className: TRIGGER_CONTENT_SPAN_CLASSNAME,
+				children: content
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: chevronClassName })
+		]
+	});
+}));
+Trigger.displayName = "DatePicker.Trigger";
+
+//#endregion
+//#region src/components/forms/date-picker/date-range-picker/date-range-picker.tsx
+/**
+* @fileoverview DateRangePicker Component - Premium Harmony V2
+*
+* Accessible date range picker with optional presets, keyboard shortcuts,
+* and comprehensive touch support. Features dual-month desktop view,
+* single-month mobile view, and WCAG-compliant touch targets.
+*
+* Features:
+* - Premium Harmony V2 spring physics via Popover component
+* - Touch detection with automatic sizing for mobile devices
+* - Reduced motion support for accessibility (via Popover)
+* - WCAG 2.5.5 compliant 44px minimum touch targets on touch devices
+* - Semantic color tokens (no hardcoded colors)
+* - Enhanced focus styles with ring indicators
+* - Data attributes for state management (data-state)
+* - Responsive: Single month on mobile, dual months on desktop
+* - Preset shortcuts with keyboard support
+* - Smart date handling: Same-day ranges use full day (00:00 - 23:59)
+* - Scroll progress indicators for preset lists
+* - Cancel/reset functionality preserving initial selection
+* - Controlled and uncontrolled modes
+* - Locale-aware date formatting
+* - Validation and constraint support
+*
+* @module @od-oneapp/uni-ui/components/date-picker/date-range-picker
+* @component DateRangePicker
+*
+* @useCases
+* - Analytics dashboards: Date range selection for reports, charts, metrics
+* - Booking systems: Travel dates, hotel reservations, event scheduling
+* - Filtering data: Historical data queries, log analysis, time-based filtering
+* - Appointment scheduling: Multi-day event planning, shift scheduling
+* - Billing periods: Invoice date ranges, subscription periods, payment cycles
+* - Touch interfaces: Mobile-optimized with automatic 44px touch targets (WCAG 2.5.5)
+* - Quick selection: Preset ranges like "Last 7 days", "This month", "Last quarter"
+* - Same-day ranges: Full day selection from midnight to 11:59:59 PM
+*
+* @example
+* // Basic date range picker
+* <DateRangePicker value={range} onChange={setRange} placeholder="Select date range" />
+*
+* @example
+* // With presets
+* <DateRangePicker value={range} onChange={setRange} presets={presetConfig} />
+*
+* @example
+* // With validation constraints
+* <DateRangePicker fromDate={new Date(2020, 0, 1)} toDate={new Date()} hasError={isInvalid} />
+*
+* @example
+* // Localized
+* <DateRangePicker locale={fr} />
+*/
+const DateRangePickerInner = ({ value, defaultValue, presetId, onChange, presets, disabled, disableNavigation, disabledDays, showYearNavigation = false, locale = enUS, placeholder = "Select date range", hasError, align = "center", className, ...props }) => {
+	const { isDesktop } = useResponsive();
+	const [open, { open: openPopover, close: closePopover }] = useDisclosure(false);
+	const setOpen = useCallback((newOpen) => {
+		if (newOpen) openPopover();
+		else closePopover();
+	}, [openPopover, closePopover]);
+	const [preset, setPreset] = useState(presets != null && presetId != null ? presets.find(({ id }) => id === presetId) : void 0);
+	const [range, setRange] = useState(preset?.dateRange ?? value ?? defaultValue);
+	const [month, setMonth] = useState(range?.to);
+	const [initialRange, setInitialRange] = useState(range);
+	useEffect(() => {
+		setRange(value);
+	}, [value]);
+	useEffect(() => {
+		const p = presets?.find(({ id }) => id === presetId);
+		setPreset(p);
+		setRange(p?.dateRange ?? value ?? defaultValue);
+	}, [
+		presets,
+		presetId,
+		value,
+		defaultValue
+	]);
+	useEffect(() => {
+		if (open) {
+			setInitialRange(range);
+			if (range?.to) setMonth(range.to);
+		} else if (range?.to) setMonth(range.to);
+	}, [open, range]);
+	const onCalendarSelect = useCallback((selectedRange, selectedDay) => {
+		const newRange = range?.from != null && range?.to != null ? { from: selectedDay } : selectedRange;
+		if (newRange?.from != null && newRange?.to != null && isSameDay(newRange.from, newRange.to)) {
+			newRange.from = startOfDay(newRange.from);
+			newRange.to = endOfDay(newRange.to);
+		}
+		setRange(newRange);
+		setPreset(void 0);
+		if (newRange?.from != null && newRange?.to != null) {
+			onChange?.(newRange);
+			setOpen(false);
+		}
+	}, [
+		range,
+		onChange,
+		setOpen
+	]);
+	const onPresetSelected = useCallback((selectedPreset) => {
+		let adjustedDateRange = selectedPreset.dateRange;
+		if (adjustedDateRange?.from != null && adjustedDateRange?.to != null && isSameDay(adjustedDateRange.from, adjustedDateRange.to)) adjustedDateRange = {
+			from: startOfDay(adjustedDateRange.from),
+			to: endOfDay(adjustedDateRange.to)
+		};
+		setRange(adjustedDateRange);
+		setPreset(selectedPreset);
+		onChange?.(adjustedDateRange, selectedPreset);
+		setOpen(false);
+	}, [onChange, setOpen]);
+	const onCancel = useCallback(() => {
+		setRange(initialRange);
+		setOpen(false);
+	}, [initialRange, setOpen]);
+	const onOpenChange = useCallback((isOpen) => {
+		if (!isOpen) onCancel();
+		setOpen(isOpen);
+	}, [onCancel, setOpen]);
+	const displayRange = useMemo(() => {
+		if (!range) return null;
+		return `${range.from != null ? formatDate(range.from, locale) : ""} - ${range.to != null ? formatDate(range.to, locale) : ""}`;
+	}, [range, locale]);
+	const setIsOpenDispatch = useCallback((value) => {
+		if (typeof value === "function") setOpen(value(open));
+		else setOpen(value);
+	}, [open, setOpen]);
+	const contextValue = useMemo(() => ({
+		isOpen: open,
+		setIsOpen: setIsOpenDispatch
+	}), [open, setIsOpenDispatch]);
+	return /* @__PURE__ */ jsx(DatePickerContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Popover, {
+			align,
+			openPopover: open,
+			setOpenPopover: onOpenChange,
+			popoverContentClassName: "rounded-xl",
+			content: /* @__PURE__ */ jsx("div", {
+				className: "flex w-full",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "scrollbar-hide relative flex w-full flex-col overflow-x-scroll sm:flex-row-reverse sm:items-start",
+					children: [presets != null && presets.length > 0 ? /* @__PURE__ */ jsx(PresetScrollContainer, { children: /* @__PURE__ */ jsx("div", {
+						className: "absolute px-3 sm:inset-0 sm:left-0",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "sm:py-3",
+							children: /* @__PURE__ */ jsx(Presets, {
+								currentPresetId: presetId,
+								currentValue: range,
+								presets,
+								onSelect: onPresetSelected
+							})
+						})
+					}) }) : null, /* @__PURE__ */ jsx("div", {
+						className: "scrollbar-hide overflow-x-scroll",
+						children: /* @__PURE__ */ jsx(Calendar$1, {
+							mode: "range",
+							selected: range,
+							onSelect: onCalendarSelect,
+							month,
+							onMonthChange: setMonth,
+							numberOfMonths: isDesktop ? 2 : 1,
+							disabled: disabledDays,
+							disableNavigation,
+							showYearNavigation,
+							locale,
+							className: "scrollbar-hide overflow-x-scroll",
+							classNames: { months: "flex flex-row divide-x divide-border overflow-x-scroll scrollbar-hide" },
+							...props
+						})
+					})]
+				})
+			}),
+			children: /* @__PURE__ */ jsx(Trigger, {
+				placeholder,
+				disabled,
+				className,
+				hasError,
+				"aria-required": props.required ?? props["aria-required"],
+				"aria-invalid": props["aria-invalid"],
+				"aria-label": props["aria-label"],
+				"aria-labelledby": props["aria-labelledby"],
+				children: preset?.label ?? displayRange
+			})
+		})
+	});
+};
+function DateRangePicker({ presets, ...props }) {
+	if (presets != null) validatePresets(presets, props);
+	return /* @__PURE__ */ jsx(DateRangePickerInner, {
+		presets,
+		...props
+	});
+}
+function PresetScrollContainer({ children }) {
+	const ref = useRef(null);
+	const { scrollProgress, updateScrollProgress } = useScrollProgress(ref);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative sm:h-full",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref,
+			onScroll: updateScrollProgress,
+			className: cn("relative flex h-16 w-full items-center sm:h-full sm:w-48", "border-border border-b sm:border-b-0 sm:border-l", "scrollbar-hide overflow-auto"),
+			children
+		}), /* @__PURE__ */ jsx("div", {
+			className: "from-background pointer-events-none absolute bottom-0 left-0 hidden h-16 w-full rounded-b-lg bg-gradient-to-t sm:block",
+			style: { opacity: 1 - Math.pow(scrollProgress, 2) }
+		})]
+	});
+}
+
+//#endregion
+export { DatePickerContext as n, Calendar$1 as r, DateRangePicker as t };
+//# sourceMappingURL=date-range-picker-CdemRFs_.mjs.map