@proyecto-viviana/solidaria-components 0.5.1 → 0.7.0-rc.1

package/dist/DatePicker2.js

@@ -1,21 +1,52 @@
-import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/DatePicker.tsx
+/*
+* Copyright 2025 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/HiddenDateInput.tsx
+import { Provider, dataAttr, useRenderProps, useSlot } from "./utils.js";
+import { n as LabelContext } from "./Label.js";
+import { ButtonContext } from "./Button.js";
 import { TextContext } from "./Text.js";
-import { FormContext } from "./Form.js";
+import { FieldErrorContext } from "./FieldError.js";
+import { FormContext, resolveValidationBehavior } from "./Form.js";
+import { Popover } from "./Popover.js";
+import { Dialog } from "./Dialog.js";
 import { CalendarContext } from "./Calendar.js";
 import { RangeCalendarContext } from "./RangeCalendar.js";
 import { d as useDateRangePickerContext, n as DateFieldContext, u as DateRangePickerContext } from "./DateField2.js";
-import { Portal, addEventListener, className, createComponent, effect, getNextElement, insert, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
-import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { FocusScope, createDateField, createDatePicker, createDateRangePicker, createEnterAnimation, createFocusRing, createFormValidation, createHover, createPopover, mergeProps as mergeProps$2, useUNSAFE_PortalContext } from "@proyecto-viviana/solidaria";
-import { access, createCalendarState, createDateFieldState, createDatePickerState, createRangeCalendarState } from "@proyecto-viviana/solid-stately";
+import { addEvent, createComponent, effect, getNextElement, insert, mergeProps, readShallow, ref, runHydrationEvents, scope, setAttribute, setProperty, spread, style, template } from "@solidjs/web";
+import { Show, createContext, createMemo, createSignal, createTrackedEffect, useContext } from "solid-js";
+import { createDateField, createDatePicker, createDateRangePicker, createFocusRing, createFormReset, createFormValidation, createHover, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { TimeClass, access, createCalendarState, createDateFieldState, createDatePickerState, createRangeCalendarState, toCalendarDateTime, toZoned } from "@proyecto-viviana/solid-stately";
 //#region src/HiddenDateInput.tsx
 /**
 * HiddenDateInput component for solidaria-components
 *
 * A hidden native date/datetime-local input for form submission.
 * Renders server-side with the initial value for SSR safety.
+* Based on packages/react-aria-components/src/HiddenDateInput.tsx.
 */
-var _tmpl$$1 = /*#__PURE__*/ template(`<input tabindex=-1 aria-hidden=true>`);
+var _tmpl$$1 = /* @__PURE__ */ template(`<input tabindex=-1 aria-hidden=true>`);
 function accessValue(value) {
 	return typeof value === "function" ? value() : value;
 }
@@ -56,19 +87,31 @@ function HiddenDateInput(props) {
 			return props.focus;
 		}
 	}, props.validationState, inputRef);
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const val = formattedValue();
 		const input = inputRef();
 		if (input && input.value !== val) input.value = val;
 	});
-	return (() => {
-		var _el$ = getNextElement(_tmpl$$1);
-		addEventListener(_el$, "change", usesNativeValidation() ? () => {} : void 0);
-		use((el) => {
+	var _el$ = getNextElement(_tmpl$$1);
+	addEvent(_el$, "change", usesNativeValidation() ? () => {} : void 0);
+	ref(() => {
+		return (el) => {
 			setInputRef(el);
-		}, _el$);
-		effect((_p$) => {
-			var _v$ = inputType(), _v$2 = props.name, _v$3 = props.form, _v$4 = props.autoComplete, _v$5 = props.isDisabled, _v$6 = usesNativeValidation() && props.isRequired ? true : void 0, _v$7 = usesNativeValidation() || void 0, _v$8 = hasValidationBehavior() ? void 0 : formattedMin() || void 0, _v$9 = hasValidationBehavior() ? void 0 : formattedMax() || void 0, _v$0 = {
+		};
+	}, _el$);
+	effect(() => {
+		return {
+			e: inputType(),
+			t: props.name,
+			a: props.form,
+			o: formattedValue(),
+			i: props.autoComplete,
+			n: props.isDisabled,
+			s: usesNativeValidation() && props.isRequired ? true : void 0,
+			h: usesNativeValidation() || void 0,
+			r: hasValidationBehavior() ? void 0 : formattedMin() || void 0,
+			d: hasValidationBehavior() ? void 0 : formattedMax() || void 0,
+			l: readShallow({
 				position: "absolute",
 				width: "1px",
 				height: "1px",
@@ -78,33 +121,22 @@ function HiddenDateInput(props) {
 				clip: "rect(0, 0, 0, 0)",
 				"white-space": "nowrap",
 				"border-width": "0"
-			};
-			_v$ !== _p$.e && setAttribute(_el$, "type", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$, "name", _p$.t = _v$2);
-			_v$3 !== _p$.a && setAttribute(_el$, "form", _p$.a = _v$3);
-			_v$4 !== _p$.o && setAttribute(_el$, "autocomplete", _p$.o = _v$4);
-			_v$5 !== _p$.i && setProperty(_el$, "disabled", _p$.i = _v$5);
-			_v$6 !== _p$.n && setProperty(_el$, "required", _p$.n = _v$6);
-			_v$7 !== _p$.s && setProperty(_el$, "hidden", _p$.s = _v$7);
-			_v$8 !== _p$.h && setAttribute(_el$, "min", _p$.h = _v$8);
-			_v$9 !== _p$.r && setAttribute(_el$, "max", _p$.r = _v$9);
-			_p$.d = style(_el$, _v$0, _p$.d);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0,
-			n: void 0,
-			s: void 0,
-			h: void 0,
-			r: void 0,
-			d: void 0
-		});
-		effect(() => setProperty(_el$, "value", formattedValue()));
-		return _el$;
-	})();
+			})
+		};
+	}, ({ e, t, a, o, i, n, s, h, r, d, l }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$, "type", e);
+		t !== _p$?.t && setAttribute(_el$, "name", t);
+		a !== _p$?.a && setAttribute(_el$, "form", a);
+		setProperty(_el$, "value", o);
+		i !== _p$?.i && setAttribute(_el$, "autocomplete", i);
+		n !== _p$?.n && setAttribute(_el$, "disabled", n);
+		s !== _p$?.s && setAttribute(_el$, "required", s);
+		h !== _p$?.h && setAttribute(_el$, "hidden", h);
+		r !== _p$?.r && setAttribute(_el$, "min", r);
+		d !== _p$?.d && setAttribute(_el$, "max", d);
+		style(_el$, l, _p$?.l);
+	});
+	return _el$;
 }
 //#endregion
 //#region src/DatePicker.tsx
@@ -114,37 +146,13 @@ function HiddenDateInput(props) {
 * Pre-wired headless date picker component that combines a date field with a calendar popup.
 * Port of react-aria-components/src/DatePicker.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div class="solidaria-DatePicker solidaria-DatePicker--placeholder"aria-hidden=true>`), _tmpl$2 = /*#__PURE__*/ template(`<div>`), _tmpl$3 = /*#__PURE__*/ template(`<div class="solidaria-DateRangePicker solidaria-DateRangePicker--placeholder"aria-hidden=true>`), _tmpl$4 = /*#__PURE__*/ template(`<button>`), _tmpl$5 = /*#__PURE__*/ template(`<span>`), _tmpl$6 = /*#__PURE__*/ template(`<div><section>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<input type=hidden tabindex=-1 aria-hidden=true>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span>`);
 const DatePickerContext = createContext(null);
 const DatePickerStateContext = createContext(null);
 const DateRangePickerStateContext = createContext(null);
-function withFormValidationBehavior(props, formContext) {
-	if (!formContext?.validationBehavior) return props;
-	return new Proxy(props, {
-		get(target, property, receiver) {
-			const localValue = Reflect.get(target, property, receiver);
-			if (property === "validationBehavior" && localValue === void 0) return formContext.validationBehavior;
-			return localValue;
-		},
-		has(target, property) {
-			return Reflect.has(target, property) || property === "validationBehavior" && formContext.validationBehavior !== void 0;
-		},
-		ownKeys(target) {
-			const keys = new Set(Reflect.ownKeys(target));
-			if (formContext.validationBehavior !== void 0) keys.add("validationBehavior");
-			return Array.from(keys);
-		},
-		getOwnPropertyDescriptor(target, property) {
-			const descriptor = Reflect.getOwnPropertyDescriptor(target, property);
-			if (descriptor) return descriptor;
-			if (property === "validationBehavior" && formContext.validationBehavior !== void 0) return {
-				enumerable: true,
-				configurable: true,
-				get: () => formContext.validationBehavior
-			};
-		}
-	});
-}
 function useDatePickerContext() {
 	const context = useContext(DatePickerContext);
 	if (!context) throw new Error("DatePicker components must be used within a DatePicker");
@@ -175,27 +183,23 @@ function useDatePickerContext() {
 * </DatePicker>
 * ```
 */
+function focusWithinDomProps(focusProps) {
+	const { ref: _ref, onFocus, onBlur, ...rest } = focusProps;
+	return {
+		...rest,
+		onFocusIn: onFocus,
+		onFocusOut: onBlur
+	};
+}
 function DatePicker(props) {
-	const isHydrated = useIsHydrated();
-	const formContext = useContext(FormContext);
-	return createComponent(Show, {
-		get when() {
-			return isHydrated();
-		},
-		get fallback() {
-			return getNextElement(_tmpl$);
-		},
-		get children() {
-			return createComponent(DatePickerInner, mergeProps(props, { __formContext: formContext }));
-		}
-	});
+	return createComponent(DatePickerInner, props);
 }
 /**
 * Internal DatePicker component that renders after client mount.
 */
 function DatePickerInner(props) {
 	const formContext = props.__formContext ?? useContext(FormContext);
-	const [local, stateProps, rest] = splitProps(withFormValidationBehavior(props, formContext), [
+	const [local, stateProps, rest] = splitProps(props, [
 		"children",
 		"class",
 		"style",
@@ -225,8 +229,6 @@ function DatePickerInner(props) {
 		"validationState",
 		"validationBehavior",
 		"validate",
-		"description",
-		"errorMessage",
 		"isDateUnavailable",
 		"firstDayOfWeek",
 		"visibleMonths",
@@ -235,6 +237,7 @@ function DatePickerInner(props) {
 		"isDateDisabled"
 	]);
 	const [triggerRef, setTriggerRef] = createSignal(null);
+	const [groupRef, setGroupRefState] = createSignal(null);
 	const [fieldRef, setFieldRef] = createSignal(null);
 	const datePickerState = createDatePickerState({
 		get value() {
@@ -302,13 +305,16 @@ function DatePickerInner(props) {
 	};
 	const fieldState = createDateFieldState({
 		...stateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: () => datePickerState.value(),
 		onChange: (value) => {
 			datePickerState.setValue(value);
 		}
 	});
 	const calendarState = createCalendarState({
-		value: () => datePickerState.value(),
+		value: () => datePickerState.dateValue(),
 		onChange: (value) => {
 			if (!value) return;
 			datePickerState.setDateValue(value);
@@ -317,7 +323,9 @@ function DatePickerInner(props) {
 		maxValue: stateProps.maxValue,
 		isDisabled: stateProps.isDisabled,
 		isReadOnly: stateProps.isReadOnly,
-		locale: stateProps.locale,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		createCalendar: stateProps.createCalendar,
 		isDateUnavailable: stateProps.isDateUnavailable,
 		firstDayOfWeek: stateProps.firstDayOfWeek,
@@ -327,17 +335,26 @@ function DatePickerInner(props) {
 		isDateDisabled: stateProps.isDateDisabled
 	});
 	let wasOpen = false;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const open = datePickerState.isOpen();
 		if (open && !wasOpen) calendarState.setFocused(true);
 		wasOpen = open;
 	});
+	const hasExplicitName = () => Boolean(rest["aria-label"] || rest["aria-labelledby"]);
+	const stringLabel = () => {
+		const label = rest.label;
+		return typeof label === "string" && label !== "" ? label : void 0;
+	};
+	const [labelRef, hasLabel] = useSlot(!hasExplicitName() && stringLabel() === void 0);
 	const pickerAria = createDatePicker(() => ({
 		...rest,
-		description: stateProps.description,
-		errorMessage: stateProps.errorMessage
+		label: stringLabel() ?? (hasExplicitName() ? void 0 : hasLabel())
 	}), fieldState, overlayState, calendarState, () => fieldRef());
 	const fieldAria = createDateField(() => pickerAria.fieldProps, fieldState, () => fieldRef());
+	const [resetInput, setResetInput] = createSignal();
+	createFormReset(resetInput, fieldState.defaultValue, () => {
+		fieldState.setValue(fieldState.defaultValue ?? null);
+	});
 	const contextValue = {
 		fieldState,
 		datePickerState,
@@ -349,10 +366,18 @@ function DatePickerInner(props) {
 			const current = triggerRef();
 			if (!current || !current.isConnected) setTriggerRef(() => element);
 		},
+		groupRef,
+		setGroupRef: (element) => {
+			if (!element) return;
+			setGroupRefState(() => element);
+		},
 		pickerAria
 	};
 	const isInvalid = createMemo(() => fieldState.isInvalid() || datePickerState.builtinValidation().isInvalid || Boolean(stateProps.isInvalid));
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing({ within: true });
 	const renderValues = createMemo(() => ({
+		isFocusWithin: isFocused(),
+		isFocusVisible: isFocusVisible(),
 		isDisabled: fieldState.isDisabled(),
 		isReadOnly: fieldState.isReadOnly(),
 		isRequired: fieldState.isRequired(),
@@ -364,14 +389,62 @@ function DatePickerInner(props) {
 		style: local.style,
 		defaultClassName: "solidaria-DatePicker"
 	}, renderValues);
-	const validationBehavior = () => stateProps.validationBehavior ?? formContext?.validationBehavior ?? "native";
-	return createComponent(DatePickerStateContext.Provider, {
+	const validationBehavior = () => resolveValidationBehavior(stateProps.validationBehavior, formContext);
+	const buttonContextValue = { slots: { default: {
+		get id() {
+			return pickerAria.buttonProps.id;
+		},
+		type: "button",
+		get "aria-label"() {
+			return pickerAria.buttonProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return pickerAria.buttonProps["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return pickerAria.buttonProps["aria-describedby"];
+		},
+		get "aria-haspopup"() {
+			return pickerAria.buttonProps["aria-haspopup"];
+		},
+		get "aria-expanded"() {
+			return pickerAria.buttonProps["aria-expanded"];
+		},
+		get isDisabled() {
+			return pickerAria.isButtonDisabled();
+		},
+		onPress() {
+			overlayState.open();
+		}
+	} } };
+	const labelContextValue = {
+		get id() {
+			if (hasExplicitName() || stringLabel() !== void 0 || !hasLabel()) return;
+			return pickerAria.labelProps.id;
+		},
+		ref: labelRef,
+		elementType: "span"
+	};
+	const fieldValidation = createMemo(() => ({
+		isInvalid: isInvalid(),
+		validationErrors: pickerAria.validationErrors,
+		validationDetails: pickerAria.validationDetails
+	}));
+	const fieldErrorContext = {
+		get validation() {
+			return fieldValidation();
+		},
+		get errorMessageProps() {
+			return pickerAria.errorMessageProps;
+		}
+	};
+	return createComponent(DatePickerStateContext, {
 		value: fieldState,
 		get children() {
-			return createComponent(DatePickerContext.Provider, {
+			return createComponent(DatePickerContext, {
 				value: contextValue,
 				get children() {
-					return createComponent(DateFieldContext.Provider, {
+					return createComponent(DateFieldContext, {
 						value: {
 							state: fieldState,
 							aria: {
@@ -390,82 +463,112 @@ function DatePickerInner(props) {
 							}
 						},
 						get children() {
-							return createComponent(CalendarContext.Provider, {
+							return createComponent(CalendarContext, {
 								value: calendarState,
 								get children() {
-									return [(() => {
-										var _el$2 = getNextElement(_tmpl$2);
-										use(setFieldRef, _el$2);
-										insert(_el$2, createComponent(Provider, {
-											values: [[TextContext, { slots: {
-												get description() {
-													return pickerAria.descriptionProps;
+									return [
+										(() => {
+											var _el$ = getNextElement(_tmpl$);
+											ref(() => {
+												return setFieldRef;
+											}, _el$);
+											spread(_el$, [() => {
+												return focusWithinDomProps(focusProps);
+											}, {
+												get "class"() {
+													return renderProps.class();
 												},
-												get errorMessage() {
-													return pickerAria.errorMessageProps;
-												}
-											} }]],
-											get children() {
-												return props.children;
-											}
-										}));
-										effect((_p$) => {
-											var _v$ = renderProps.class(), _v$2 = renderProps.style(), _v$3 = dataAttr(fieldState.isDisabled()), _v$4 = dataAttr(fieldState.isReadOnly()), _v$5 = dataAttr(fieldState.isRequired()), _v$6 = dataAttr(isInvalid()), _v$7 = dataAttr(overlayState.isOpen);
-											_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-											_p$.t = style(_el$2, _v$2, _p$.t);
-											_v$3 !== _p$.a && setAttribute(_el$2, "data-disabled", _p$.a = _v$3);
-											_v$4 !== _p$.o && setAttribute(_el$2, "data-readonly", _p$.o = _v$4);
-											_v$5 !== _p$.i && setAttribute(_el$2, "data-required", _p$.i = _v$5);
-											_v$6 !== _p$.n && setAttribute(_el$2, "data-invalid", _p$.n = _v$6);
-											_v$7 !== _p$.s && setAttribute(_el$2, "data-open", _p$.s = _v$7);
-											return _p$;
-										}, {
-											e: void 0,
-											t: void 0,
-											a: void 0,
-											o: void 0,
-											i: void 0,
-											n: void 0,
-											s: void 0
-										});
-										return _el$2;
-									})(), createComponent(Show, {
-										get when() {
-											return rest.name;
-										},
-										get children() {
-											return createComponent(HiddenDateInput, {
-												get name() {
-													return rest.name;
+												get style() {
+													return renderProps.style();
 												},
-												get form() {
-													return rest.form;
+												get "data-focus-within"() {
+													return dataAttr(isFocused());
 												},
-												value: () => datePickerState.value(),
-												get autoComplete() {
-													return rest.autoComplete;
+												get "data-focus-visible"() {
+													return dataAttr(isFocusVisible());
 												},
-												get isDisabled() {
-													return fieldState.isDisabled();
+												get "data-disabled"() {
+													return dataAttr(fieldState.isDisabled());
 												},
-												get isRequired() {
-													return fieldState.isRequired();
+												get "data-readonly"() {
+													return dataAttr(fieldState.isReadOnly());
 												},
-												get validationBehavior() {
-													return validationBehavior();
+												get "data-required"() {
+													return dataAttr(fieldState.isRequired());
 												},
-												validationState: fieldState,
-												focus: () => {
-													fieldRef()?.querySelector("[role=\"spinbutton\"]")?.focus();
+												get "data-invalid"() {
+													return dataAttr(isInvalid());
 												},
-												minValue: () => access(stateProps.minValue),
-												maxValue: () => access(stateProps.maxValue),
-												get granularity() {
-													return datePickerState.granularity;
+												get "data-open"() {
+													return dataAttr(overlayState.isOpen);
 												}
-											});
-										}
-									})];
+											}], true);
+											insert(_el$, createComponent(Provider, {
+												values: [
+													[TextContext, { slots: {
+														get description() {
+															return pickerAria.descriptionProps;
+														},
+														get errorMessage() {
+															return pickerAria.errorMessageProps;
+														}
+													} }],
+													[ButtonContext, buttonContextValue],
+													[FieldErrorContext, fieldErrorContext],
+													[LabelContext, labelContextValue]
+												],
+												get children() {
+													return props.children;
+												}
+											}));
+											runHydrationEvents();
+											return _el$;
+										})(),
+										(() => {
+											var _el$2 = getNextElement(_tmpl$2);
+											ref(() => {
+												return setResetInput;
+											}, _el$2);
+											return _el$2;
+										})(),
+										createComponent(Show, {
+											get when() {
+												return rest.name;
+											},
+											get children() {
+												return createComponent(HiddenDateInput, {
+													get name() {
+														return rest.name;
+													},
+													get form() {
+														return rest.form;
+													},
+													value: () => datePickerState.value(),
+													get autoComplete() {
+														return rest.autoComplete;
+													},
+													get isDisabled() {
+														return fieldState.isDisabled();
+													},
+													get isRequired() {
+														return fieldState.isRequired();
+													},
+													get validationBehavior() {
+														return validationBehavior();
+													},
+													validationState: fieldState,
+													focus: () => {
+														fieldRef()?.querySelector("[role=\"spinbutton\"]")?.focus();
+													},
+													minValue: () => access(stateProps.minValue),
+													maxValue: () => access(stateProps.maxValue),
+													get granularity() {
+														return datePickerState.granularity;
+													}
+												});
+											}
+										})
+									];
 								}
 							});
 						}
@@ -475,19 +578,25 @@ function DatePickerInner(props) {
 		}
 	});
 }
+function rangePlaceholderTime(placeholder) {
+	if (placeholder && "hour" in placeholder) return placeholder;
+	return new TimeClass();
+}
+function applyRangeEndpointTime(date, existing, placeholder) {
+	if ("hour" in date) return date;
+	const time = existing && "hour" in existing ? existing : rangePlaceholderTime(placeholder);
+	const combined = toCalendarDateTime(date, time);
+	if ("timeZone" in time) return toZoned(combined, time.timeZone);
+	return combined;
+}
+function applyRangeTime(range, committed, placeholder) {
+	return {
+		start: applyRangeEndpointTime(range.start, committed?.start, placeholder),
+		end: applyRangeEndpointTime(range.end, committed?.end, placeholder)
+	};
+}
 function DateRangePicker(props) {
-	const isHydrated = useIsHydrated();
-	return createComponent(Show, {
-		get when() {
-			return isHydrated();
-		},
-		get fallback() {
-			return getNextElement(_tmpl$3);
-		},
-		get children() {
-			return createComponent(DateRangePickerInner, props);
-		}
-	});
+	return createComponent(DateRangePickerInner, props);
 }
 function DateRangePickerInner(props) {
 	const [local, overlayProps, stateProps, rest] = splitProps(props, [
@@ -510,7 +619,6 @@ function DateRangePickerInner(props) {
 		"isReadOnly",
 		"focusedValue",
 		"defaultFocusedValue",
-		"onFocusChange",
 		"locale",
 		"granularity",
 		"hourCycle",
@@ -528,11 +636,14 @@ function DateRangePickerInner(props) {
 	]);
 	const [internalOpen, setInternalOpen] = createSignal(overlayProps.defaultOpen ?? false);
 	const isOpen = () => access(overlayProps.isOpen) ?? internalOpen();
+	let commitPendingRange = () => {};
 	const setOpen = (open) => {
+		if (!open) commitPendingRange();
 		if (access(overlayProps.isOpen) === void 0) setInternalOpen(open);
 		overlayProps.onOpenChange?.(open);
 	};
 	let triggerRef = null;
+	let groupRef = null;
 	const [fieldRef, setFieldRef] = createSignal(null);
 	const overlayState = {
 		get isOpen() {
@@ -547,20 +658,55 @@ function DateRangePickerInner(props) {
 		const controlled = access(stateProps.value);
 		return controlled !== void 0 ? controlled : internalRangeValue();
 	});
+	const [pendingDateRange, setPendingDateRange] = createSignal(null);
 	const setCommittedRangeValue = (value) => {
+		setPendingDateRange(null);
 		if (access(stateProps.value) === void 0) setInternalRangeValue(() => value);
 		stateProps.onChange?.(value);
 	};
+	const rangeGranularity = createMemo(() => {
+		if (stateProps.granularity) return stateProps.granularity;
+		const value = currentRangeValue()?.start ?? currentRangeValue()?.end;
+		if (value && "hour" in value) return "second" in value ? "second" : "minute";
+		const placeholder = stateProps.placeholderValue;
+		if (!value && placeholder && "minute" in placeholder) return "minute";
+		return "day";
+	});
+	const hasRangeTime = () => {
+		const granularity = rangeGranularity();
+		return granularity === "hour" || granularity === "minute" || granularity === "second";
+	};
+	const committedEndsHaveTime = () => {
+		const committed = currentRangeValue();
+		return Boolean(committed?.start && committed.end && "hour" in committed.start && "hour" in committed.end);
+	};
 	const calendarState = createRangeCalendarState({
 		...stateProps,
-		value: currentRangeValue,
+		get locale() {
+			return access(stateProps.locale);
+		},
+		value: () => {
+			const pending = pendingDateRange();
+			if (pending?.start && pending.end) return pending;
+			return currentRangeValue();
+		},
 		onChange: (value) => {
-			setCommittedRangeValue(value);
-			if (local.shouldCloseOnSelect !== false && value?.start && value?.end) setOpen(false);
+			const shouldClose = local.shouldCloseOnSelect !== false;
+			if (!value?.start || !value.end || !hasRangeTime()) {
+				setCommittedRangeValue(value);
+				if (value?.start && value.end && shouldClose) setOpen(false);
+				return;
+			}
+			if (shouldClose || committedEndsHaveTime()) {
+				setCommittedRangeValue(applyRangeTime(value, currentRangeValue(), stateProps.placeholderValue));
+				if (shouldClose) setOpen(false);
+				return;
+			}
+			setPendingDateRange(value);
 		}
 	});
 	let wasRangeOpen = false;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const open = overlayState.isOpen;
 		if (open && !wasRangeOpen) calendarState.setFocused(true);
 		wasRangeOpen = open;
@@ -569,13 +715,14 @@ function DateRangePickerInner(props) {
 	const isRequired = createMemo(() => Boolean(rest.isRequired));
 	const [startFieldValue, setStartFieldValue] = createSignal(currentRangeValue()?.start ?? null);
 	const [endFieldValue, setEndFieldValue] = createSignal(currentRangeValue()?.end ?? null);
-	const rangeGranularity = createMemo(() => {
-		if (stateProps.granularity) return stateProps.granularity;
-		const value = currentRangeValue()?.start ?? currentRangeValue()?.end;
-		if (value && "hour" in value) return "second" in value ? "second" : "minute";
-		return "day";
-	});
-	createEffect(() => {
+	commitPendingRange = () => {
+		const pending = pendingDateRange();
+		if (!pending?.start || !pending.end || !hasRangeTime()) return;
+		const committed = currentRangeValue();
+		if (committed?.start && committed.end) return;
+		setCommittedRangeValue(applyRangeTime(pending, committed, stateProps.placeholderValue));
+	};
+	createTrackedEffect(() => {
 		const value = currentRangeValue();
 		setStartFieldValue(() => value?.start ?? null);
 		setEndFieldValue(() => value?.end ?? null);
@@ -596,7 +743,9 @@ function DateRangePickerInner(props) {
 		isDisabled: stateProps.isDisabled,
 		isReadOnly: stateProps.isReadOnly,
 		isRequired,
-		locale: access(stateProps.locale),
+		get locale() {
+			return access(stateProps.locale);
+		},
 		granularity: rangeGranularity(),
 		hourCycle: stateProps.hourCycle,
 		hideTimeZone: stateProps.hideTimeZone,
@@ -606,18 +755,49 @@ function DateRangePickerInner(props) {
 	};
 	const startFieldState = createDateFieldState({
 		...rangeFieldStateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: startFieldValue,
-		onChange: (value) => setRangeFieldValue("start", value)
+		onChange: (value) => setRangeFieldValue("start", value),
+		defaultValue: stateProps.defaultValue?.start
 	});
 	const endFieldState = createDateFieldState({
 		...rangeFieldStateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: endFieldValue,
-		onChange: (value) => setRangeFieldValue("end", value)
+		onChange: (value) => setRangeFieldValue("end", value),
+		defaultValue: stateProps.defaultValue?.end
 	});
+	const [startResetInput, setStartResetInput] = createSignal();
+	const [endResetInput, setEndResetInput] = createSignal();
+	const resetRangeToDefault = () => {
+		const start = startFieldState.defaultValue ?? null;
+		const end = endFieldState.defaultValue ?? null;
+		setStartFieldValue(() => start);
+		setEndFieldValue(() => end);
+		startFieldState.setValue(start);
+		endFieldState.setValue(end);
+		setCommittedRangeValue(start && end ? {
+			start,
+			end
+		} : null);
+	};
+	createFormReset(startResetInput, startFieldState.defaultValue, resetRangeToDefault);
+	createFormReset(endResetInput, endFieldState.defaultValue, resetRangeToDefault);
+	const hasExplicitName = () => Boolean(rest["aria-label"] || rest["aria-labelledby"]);
+	const stringLabel = () => {
+		const label = rest.label;
+		return typeof label === "string" && label !== "" ? label : void 0;
+	};
+	const [labelRef, hasLabel] = useSlot(!hasExplicitName() && stringLabel() === void 0);
 	const pickerAria = createDateRangePicker(() => ({
 		...rest,
 		description: props.description,
-		errorMessage: props.errorMessage
+		errorMessage: props.errorMessage,
+		label: stringLabel() ?? (hasExplicitName() ? void 0 : hasLabel())
 	}), calendarState, overlayState, () => fieldRef());
 	const startFieldAria = createDateField(() => pickerAria.startFieldProps, startFieldState, () => fieldRef());
 	const endFieldAria = createDateField(() => pickerAria.endFieldProps, endFieldState, () => fieldRef());
@@ -661,9 +841,17 @@ function DateRangePickerInner(props) {
 			if (!element) return;
 			if (!triggerRef || !triggerRef.isConnected) triggerRef = element;
 		},
+		groupRef: () => groupRef,
+		setGroupRef: (element) => {
+			if (!element) return;
+			groupRef = element;
+		},
 		pickerAria
 	};
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing({ within: true });
 	const renderValues = createMemo(() => ({
+		isFocusWithin: isFocused(),
+		isFocusVisible: isFocusVisible(),
 		isDisabled: calendarState.isDisabled(),
 		isReadOnly: calendarState.isReadOnly(),
 		isRequired: isRequired(),
@@ -675,53 +863,121 @@ function DateRangePickerInner(props) {
 		style: local.style,
 		defaultClassName: "solidaria-DateRangePicker"
 	}, renderValues);
-	return createComponent(DateRangePickerStateContext.Provider, {
+	const buttonContextValue = { slots: { default: {
+		get id() {
+			return pickerAria.buttonProps.id;
+		},
+		type: "button",
+		get "aria-label"() {
+			return pickerAria.buttonProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return pickerAria.buttonProps["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return pickerAria.buttonProps["aria-describedby"];
+		},
+		get "aria-haspopup"() {
+			return pickerAria.buttonProps["aria-haspopup"];
+		},
+		get "aria-expanded"() {
+			return pickerAria.buttonProps["aria-expanded"];
+		},
+		get isDisabled() {
+			return pickerAria.isButtonDisabled();
+		},
+		onPress() {
+			overlayState.open();
+		}
+	} } };
+	const labelContextValue = {
+		get id() {
+			if (hasExplicitName() || stringLabel() !== void 0 || !hasLabel()) return;
+			return pickerAria.labelProps.id;
+		},
+		ref: labelRef,
+		elementType: "span"
+	};
+	return createComponent(DateRangePickerStateContext, {
 		value: calendarState,
 		get children() {
-			return createComponent(DateRangePickerContext.Provider, {
+			return createComponent(DateRangePickerContext, {
 				value: contextValue,
 				get children() {
-					return createComponent(RangeCalendarContext.Provider, {
+					return createComponent(RangeCalendarContext, {
 						value: calendarState,
 						get children() {
 							return [
 								(() => {
-									var _el$4 = getNextElement(_tmpl$2);
-									use(setFieldRef, _el$4);
-									insert(_el$4, createComponent(Provider, {
-										values: [[TextContext, { slots: {
-											get description() {
-												return pickerAria.descriptionProps;
-											},
-											get errorMessage() {
-												return pickerAria.errorMessageProps;
-											}
-										} }]],
+									var _el$3 = getNextElement(_tmpl$);
+									ref(() => {
+										return setFieldRef;
+									}, _el$3);
+									spread(_el$3, [() => {
+										return focusWithinDomProps(focusProps);
+									}, {
+										get "class"() {
+											return renderProps.class();
+										},
+										get style() {
+											return renderProps.style();
+										},
+										get "data-focus-within"() {
+											return dataAttr(isFocused());
+										},
+										get "data-focus-visible"() {
+											return dataAttr(isFocusVisible());
+										},
+										get "data-disabled"() {
+											return dataAttr(calendarState.isDisabled());
+										},
+										get "data-readonly"() {
+											return dataAttr(calendarState.isReadOnly());
+										},
+										get "data-required"() {
+											return dataAttr(isRequired());
+										},
+										get "data-invalid"() {
+											return dataAttr(isInvalid());
+										},
+										get "data-open"() {
+											return dataAttr(overlayState.isOpen);
+										}
+									}], true);
+									insert(_el$3, createComponent(Provider, {
+										values: [
+											[TextContext, { slots: {
+												get description() {
+													return pickerAria.descriptionProps;
+												},
+												get errorMessage() {
+													return pickerAria.errorMessageProps;
+												}
+											} }],
+											[ButtonContext, buttonContextValue],
+											[LabelContext, labelContextValue]
+										],
 										get children() {
 											return props.children;
 										}
 									}));
-									effect((_p$) => {
-										var _v$8 = renderProps.class(), _v$9 = renderProps.style(), _v$0 = dataAttr(calendarState.isDisabled()), _v$1 = dataAttr(calendarState.isReadOnly()), _v$10 = dataAttr(isRequired()), _v$11 = dataAttr(isInvalid()), _v$12 = dataAttr(overlayState.isOpen);
-										_v$8 !== _p$.e && className(_el$4, _p$.e = _v$8);
-										_p$.t = style(_el$4, _v$9, _p$.t);
-										_v$0 !== _p$.a && setAttribute(_el$4, "data-disabled", _p$.a = _v$0);
-										_v$1 !== _p$.o && setAttribute(_el$4, "data-readonly", _p$.o = _v$1);
-										_v$10 !== _p$.i && setAttribute(_el$4, "data-required", _p$.i = _v$10);
-										_v$11 !== _p$.n && setAttribute(_el$4, "data-invalid", _p$.n = _v$11);
-										_v$12 !== _p$.s && setAttribute(_el$4, "data-open", _p$.s = _v$12);
-										return _p$;
-									}, {
-										e: void 0,
-										t: void 0,
-										a: void 0,
-										o: void 0,
-										i: void 0,
-										n: void 0,
-										s: void 0
-									});
+									runHydrationEvents();
+									return _el$3;
+								})(),
+								(() => {
+									var _el$4 = getNextElement(_tmpl$2);
+									ref(() => {
+										return setStartResetInput;
+									}, _el$4);
 									return _el$4;
 								})(),
+								(() => {
+									var _el$5 = getNextElement(_tmpl$2);
+									ref(() => {
+										return setEndResetInput;
+									}, _el$5);
+									return _el$5;
+								})(),
 								createComponent(Show, {
 									get when() {
 										return rest.startName;
@@ -803,51 +1059,49 @@ function DatePickerButton(props) {
 		style: props.style,
 		defaultClassName: "solidaria-DatePickerButton"
 	}, renderValues);
-	const getChildren = () => {
-		if (typeof props.children === "function") return renderProps.renderChildren();
-		return props.children ?? "📅";
-	};
-	const buttonProps = createMemo(() => mergeProps$2(context.pickerAria.buttonProps, focusProps, hoverProps));
-	return (() => {
-		var _el$5 = getNextElement(_tmpl$4);
-		use((el) => {
+	const getChildren = () => renderProps.renderChildren() ?? "📅";
+	const buttonProps = createMemo(() => mergeProps$1(context.pickerAria.buttonProps, focusProps, hoverProps));
+	var _el$6 = getNextElement(_tmpl$3);
+	ref(() => {
+		return (el) => {
 			context.setTriggerRef(el);
 			props.ref?.(el);
-		}, _el$5);
-		spread(_el$5, mergeProps(buttonProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get disabled() {
-				return isDisabled();
-			},
-			get ["data-disabled"]() {
-				return dataAttr(isDisabled());
-			},
-			get ["data-open"]() {
-				return dataAttr(context.overlayState.isOpen);
-			}
-		}), false, true);
-		insert(_el$5, getChildren);
-		effect((_p$) => {
-			var _v$13 = isHovered() ? "true" : void 0, _v$14 = isFocused() ? "true" : void 0, _v$15 = isFocusVisible() ? "true" : void 0, _v$16 = context.pickerAria.isButtonPressed() ? "true" : void 0;
-			_v$13 !== _p$.e && setAttribute(_el$5, "data-hovered", _p$.e = _v$13);
-			_v$14 !== _p$.t && setAttribute(_el$5, "data-focused", _p$.t = _v$14);
-			_v$15 !== _p$.a && setAttribute(_el$5, "data-focus-visible", _p$.a = _v$15);
-			_v$16 !== _p$.o && setAttribute(_el$5, "data-pressed", _p$.o = _v$16);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0
-		});
-		runHydrationEvents();
-		return _el$5;
-	})();
+		};
+	}, _el$6);
+	spread(_el$6, [buttonProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get disabled() {
+			return isDisabled();
+		},
+		get "data-disabled"() {
+			return dataAttr(isDisabled());
+		},
+		get "data-open"() {
+			return dataAttr(context.overlayState.isOpen);
+		},
+		get "data-hovered"() {
+			return dataAttr(isHovered());
+		},
+		get "data-focused"() {
+			return dataAttr(isFocused());
+		},
+		get "data-focus-visible"() {
+			return dataAttr(isFocusVisible());
+		},
+		get "data-pressed"() {
+			return dataAttr(context.pickerAria.isButtonPressed());
+		}
+	}], true);
+	insert(_el$6, scope(() => {
+		return getChildren();
+	}));
+	runHydrationEvents();
+	return _el$6;
 }
 function DateRangePickerButton(props) {
 	const context = useDateRangePickerContext();
@@ -871,297 +1125,202 @@ function DateRangePickerButton(props) {
 		style: props.style,
 		defaultClassName: "solidaria-DateRangePickerButton"
 	}, renderValues);
-	const getChildren = () => {
-		if (typeof props.children === "function") return renderProps.renderChildren();
-		return props.children ?? "📅";
-	};
-	const buttonProps = createMemo(() => mergeProps$2(context.pickerAria.buttonProps, focusProps, hoverProps));
-	return (() => {
-		var _el$6 = getNextElement(_tmpl$4);
-		use((el) => {
+	const getChildren = () => renderProps.renderChildren() ?? "📅";
+	const buttonProps = createMemo(() => mergeProps$1(context.pickerAria.buttonProps, focusProps, hoverProps));
+	var _el$7 = getNextElement(_tmpl$3);
+	ref(() => {
+		return (el) => {
 			context.setTriggerRef(el);
 			props.ref?.(el);
-		}, _el$6);
-		spread(_el$6, mergeProps(buttonProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get disabled() {
-				return isDisabled();
-			},
-			get ["data-disabled"]() {
-				return dataAttr(isDisabled());
-			},
-			get ["data-open"]() {
-				return dataAttr(context.overlayState.isOpen);
-			}
-		}), false, true);
-		insert(_el$6, getChildren);
-		effect((_p$) => {
-			var _v$17 = isHovered() ? "true" : void 0, _v$18 = isFocused() ? "true" : void 0, _v$19 = isFocusVisible() ? "true" : void 0, _v$20 = context.pickerAria.isButtonPressed() ? "true" : void 0;
-			_v$17 !== _p$.e && setAttribute(_el$6, "data-hovered", _p$.e = _v$17);
-			_v$18 !== _p$.t && setAttribute(_el$6, "data-focused", _p$.t = _v$18);
-			_v$19 !== _p$.a && setAttribute(_el$6, "data-focus-visible", _p$.a = _v$19);
-			_v$20 !== _p$.o && setAttribute(_el$6, "data-pressed", _p$.o = _v$20);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0
-		});
-		runHydrationEvents();
-		return _el$6;
-	})();
+		};
+	}, _el$7);
+	spread(_el$7, [buttonProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get disabled() {
+			return isDisabled();
+		},
+		get "data-disabled"() {
+			return dataAttr(isDisabled());
+		},
+		get "data-open"() {
+			return dataAttr(context.overlayState.isOpen);
+		},
+		get "data-hovered"() {
+			return dataAttr(isHovered());
+		},
+		get "data-focused"() {
+			return dataAttr(isFocused());
+		},
+		get "data-focus-visible"() {
+			return dataAttr(isFocusVisible());
+		},
+		get "data-pressed"() {
+			return dataAttr(context.pickerAria.isButtonPressed());
+		}
+	}], true);
+	insert(_el$7, scope(() => {
+		return getChildren();
+	}));
+	runHydrationEvents();
+	return _el$7;
 }
 function DatePickerLabel(props) {
 	const context = useDatePickerContext();
-	return (() => {
-		var _el$7 = getNextElement(_tmpl$5);
-		spread(_el$7, mergeProps(() => context.pickerAria.labelProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$7, () => props.children);
-		runHydrationEvents();
-		return _el$7;
-	})();
+	var _el$8 = getNextElement(_tmpl$4);
+	spread(_el$8, [() => {
+		return context.pickerAria.labelProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$8, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$8;
 }
 function DatePickerDescription(props) {
 	const context = useDatePickerContext();
-	return (() => {
-		var _el$8 = getNextElement(_tmpl$5);
-		spread(_el$8, mergeProps(() => context.pickerAria.descriptionProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$8, () => props.children);
-		runHydrationEvents();
-		return _el$8;
-	})();
+	var _el$9 = getNextElement(_tmpl$4);
+	spread(_el$9, [() => {
+		return context.pickerAria.descriptionProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$9, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$9;
 }
 function DatePickerErrorMessage(props) {
 	const context = useDatePickerContext();
-	return (() => {
-		var _el$9 = getNextElement(_tmpl$5);
-		spread(_el$9, mergeProps(() => context.pickerAria.errorMessageProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$9, () => props.children);
-		runHydrationEvents();
-		return _el$9;
-	})();
+	var _el$10 = getNextElement(_tmpl$4);
+	spread(_el$10, [() => {
+		return context.pickerAria.errorMessageProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$10, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$10;
 }
 function DateRangePickerLabel(props) {
 	const context = useDateRangePickerContext();
-	return (() => {
-		var _el$0 = getNextElement(_tmpl$5);
-		spread(_el$0, mergeProps(() => context.pickerAria.labelProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$0, () => props.children);
-		runHydrationEvents();
-		return _el$0;
-	})();
+	var _el$11 = getNextElement(_tmpl$4);
+	spread(_el$11, [() => {
+		return context.pickerAria.labelProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$11, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$11;
 }
 function DateRangePickerDescription(props) {
 	const context = useDateRangePickerContext();
-	return (() => {
-		var _el$1 = getNextElement(_tmpl$5);
-		spread(_el$1, mergeProps(() => context.pickerAria.descriptionProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$1, () => props.children);
-		runHydrationEvents();
-		return _el$1;
-	})();
+	var _el$12 = getNextElement(_tmpl$4);
+	spread(_el$12, [() => {
+		return context.pickerAria.descriptionProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$12, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$12;
 }
 function DateRangePickerErrorMessage(props) {
 	const context = useDateRangePickerContext();
-	return (() => {
-		var _el$10 = getNextElement(_tmpl$5);
-		spread(_el$10, mergeProps(() => context.pickerAria.errorMessageProps, { get ["class"]() {
-			return props.class;
-		} }), false, true);
-		insert(_el$10, () => props.children);
-		runHydrationEvents();
-		return _el$10;
-	})();
+	var _el$13 = getNextElement(_tmpl$4);
+	spread(_el$13, [() => {
+		return context.pickerAria.errorMessageProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$13, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$13;
 }
-function createEscapeDismissFallback(isOpen, close) {
-	createEffect(() => {
-		if (!isOpen() || typeof document === "undefined") return;
-		const onKeyDown = (event) => {
-			if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
-			close();
-		};
-		document.addEventListener("keydown", onKeyDown);
-		onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+function datePickerContentClass(className, defaultClassName) {
+	if (typeof className === "function") return (renderProps) => className({
+		isEntering: renderProps.isEntering,
+		isExiting: renderProps.isExiting,
+		placement: renderProps.placement
 	});
+	return className ?? defaultClassName;
 }
 /**
 * The content area of the date picker (typically contains a Calendar).
+* Overlay enter/exit is owned by Popover, matching RAC DatePicker which renders
+* a Popover + Dialog and has no private animation machine.
 */
 function DatePickerContent(props) {
 	const context = useDatePickerContext();
-	const portalContext = useUNSAFE_PortalContext();
-	const [contentRef, setContentRef] = createSignal();
-	const portalContainer = () => portalContext.getContainer?.() ?? void 0;
-	const popoverAria = createPopover({
-		triggerRef: () => context.triggerRef()?.parentElement ?? context.triggerRef(),
-		popoverRef: () => contentRef() ?? null,
+	return createComponent(Popover, {
+		trigger: "DatePicker",
+		triggerRef: () => context.groupRef() ?? context.triggerRef(),
 		placement: "bottom start",
 		offset: 8,
-		isNonModal: false,
-		isKeyboardDismissDisabled: false
-	}, {
-		isOpen: () => context.overlayState.isOpen,
-		open: context.overlayState.open,
-		close: context.overlayState.close,
-		toggle: context.overlayState.toggle
-	});
-	createEscapeDismissFallback(() => context.overlayState.isOpen, context.overlayState.close);
-	const isEntering = createEnterAnimation(contentRef, () => context.overlayState.isOpen);
-	const renderProps = () => ({
-		isEntering: isEntering(),
-		isExiting: false,
-		placement: popoverAria.placement() ?? "bottom"
-	});
-	const resolvedClass = () => {
-		const c = props.class;
-		if (typeof c === "function") return c(renderProps());
-		return c ?? "solidaria-DatePickerContent";
-	};
-	const cleanPopoverProps = () => {
-		const { style: _style, ref: _ref, ...rest } = popoverAria.popoverProps;
-		return rest;
-	};
-	const mergedStyle = () => {
-		return {
-			...popoverAria.popoverProps.style,
-			...props.style
-		};
-	};
-	return createComponent(Show, {
-		get when() {
+		get isOpen() {
 			return context.overlayState.isOpen;
 		},
+		onOpenChange: (open) => {
+			if (open) context.overlayState.open();
+			else context.overlayState.close();
+		},
+		get "class"() {
+			return datePickerContentClass(props.class, "solidaria-DatePickerContent");
+		},
+		get style() {
+			return props.style;
+		},
 		get children() {
-			return createComponent(Portal, {
-				get mount() {
-					return portalContainer();
-				},
-				get children() {
-					return createComponent(FocusScope, {
-						contain: true,
-						restoreFocus: true,
-						get children() {
-							var _el$11 = getNextElement(_tmpl$6), _el$12 = _el$11.firstChild;
-							use(setContentRef, _el$11);
-							spread(_el$11, mergeProps(cleanPopoverProps, {
-								get ["class"]() {
-									return resolvedClass();
-								},
-								get style() {
-									return mergedStyle();
-								},
-								get ["data-placement"]() {
-									return popoverAria.placement() ?? "bottom";
-								},
-								get ["data-entering"]() {
-									return dataAttr(isEntering());
-								}
-							}), false, true);
-							spread(_el$12, mergeProps(() => context.pickerAria.dialogProps, { "tabIndex": -1 }), false, true);
-							insert(_el$12, () => props.children);
-							runHydrationEvents();
-							return _el$11;
-						}
-					});
-				}
-			});
+			return createComponent(Dialog, mergeProps(() => {
+				return context.pickerAria.dialogProps;
+			}, { get children() {
+				return props.children;
+			} }));
 		}
 	});
 }
 function DateRangePickerContent(props) {
 	const context = useDateRangePickerContext();
-	const portalContext = useUNSAFE_PortalContext();
-	const [contentRef, setContentRef] = createSignal();
-	const portalContainer = () => portalContext.getContainer?.() ?? void 0;
-	const popoverAria = createPopover({
-		triggerRef: () => context.triggerRef()?.parentElement ?? context.triggerRef(),
-		popoverRef: () => contentRef() ?? null,
+	return createComponent(Popover, {
+		trigger: "DateRangePicker",
+		triggerRef: () => context.groupRef() ?? context.triggerRef(),
 		placement: "bottom start",
 		offset: 8,
-		isNonModal: false,
-		isKeyboardDismissDisabled: false
-	}, {
-		isOpen: () => context.overlayState.isOpen,
-		open: context.overlayState.open,
-		close: context.overlayState.close,
-		toggle: context.overlayState.toggle
-	});
-	createEscapeDismissFallback(() => context.overlayState.isOpen, context.overlayState.close);
-	const isEntering = createEnterAnimation(contentRef, () => context.overlayState.isOpen);
-	const renderProps = () => ({
-		isEntering: isEntering(),
-		isExiting: false,
-		placement: popoverAria.placement() ?? "bottom"
-	});
-	const resolvedClass = () => {
-		const c = props.class;
-		if (typeof c === "function") return c(renderProps());
-		return c ?? "solidaria-DateRangePickerContent";
-	};
-	const cleanPopoverProps = () => {
-		const { style: _style, ref: _ref, ...rest } = popoverAria.popoverProps;
-		return rest;
-	};
-	const mergedStyle = () => {
-		return {
-			...popoverAria.popoverProps.style,
-			...props.style
-		};
-	};
-	return createComponent(Show, {
-		get when() {
+		get isOpen() {
 			return context.overlayState.isOpen;
 		},
+		onOpenChange: (open) => {
+			if (open) context.overlayState.open();
+			else context.overlayState.close();
+		},
+		get "class"() {
+			return datePickerContentClass(props.class, "solidaria-DateRangePickerContent");
+		},
+		get style() {
+			return props.style;
+		},
 		get children() {
-			return createComponent(Portal, {
-				get mount() {
-					return portalContainer();
-				},
-				get children() {
-					return createComponent(FocusScope, {
-						contain: true,
-						restoreFocus: true,
-						get children() {
-							var _el$13 = getNextElement(_tmpl$6), _el$14 = _el$13.firstChild;
-							use(setContentRef, _el$13);
-							spread(_el$13, mergeProps(cleanPopoverProps, {
-								get ["class"]() {
-									return resolvedClass();
-								},
-								get style() {
-									return mergedStyle();
-								},
-								get ["data-placement"]() {
-									return popoverAria.placement() ?? "bottom";
-								},
-								get ["data-entering"]() {
-									return dataAttr(isEntering());
-								}
-							}), false, true);
-							spread(_el$14, mergeProps(() => context.pickerAria.dialogProps, { "tabIndex": -1 }), false, true);
-							insert(_el$14, () => props.children);
-							runHydrationEvents();
-							return _el$13;
-						}
-					});
-				}
-			});
+			return createComponent(Dialog, mergeProps(() => {
+				return context.pickerAria.dialogProps;
+			}, { get children() {
+				return props.children;
+			} }));
 		}
 	});
 }