@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/DatePicker2.js

@@ -1,12 +1,39 @@
-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 } from "./utils.js";
 import { TextContext } from "./Text.js";
-import { FormContext } from "./Form.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 { addEvent, className, 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, createFormValidation, createHover, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { access, createCalendarState, createDateFieldState, createDatePickerState, createRangeCalendarState } from "@proyecto-viviana/solid-stately";
 //#region src/HiddenDateInput.tsx
 /**
@@ -14,8 +41,9 @@ import { access, createCalendarState, createDateFieldState, createDatePickerStat
 *
 * 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 +84,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 +118,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 +143,12 @@ 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(`<button>`);
+var _tmpl$3 = /* @__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");
@@ -176,26 +180,14 @@ function useDatePickerContext() {
 * ```
 */
 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",
@@ -235,6 +227,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,6 +295,9 @@ function DatePickerInner(props) {
 	};
 	const fieldState = createDateFieldState({
 		...stateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: () => datePickerState.value(),
 		onChange: (value) => {
 			datePickerState.setValue(value);
@@ -317,7 +313,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,7 +325,7 @@ function DatePickerInner(props) {
 		isDateDisabled: stateProps.isDateDisabled
 	});
 	let wasOpen = false;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const open = datePickerState.isOpen();
 		if (open && !wasOpen) calendarState.setFocused(true);
 		wasOpen = open;
@@ -349,6 +347,11 @@ 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));
@@ -364,14 +367,14 @@ 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);
+	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,13 +393,15 @@ 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, {
+										var _el$ = getNextElement(_tmpl$);
+										ref(() => {
+											return setFieldRef;
+										}, _el$);
+										insert(_el$, createComponent(Provider, {
 											values: [[TextContext, { slots: {
 												get description() {
 													return pickerAria.descriptionProps;
@@ -409,26 +414,26 @@ function DatePickerInner(props) {
 												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
+										effect(() => {
+											return {
+												e: readShallow(renderProps.class()),
+												t: readShallow(renderProps.style()),
+												a: dataAttr(fieldState.isDisabled()),
+												o: dataAttr(fieldState.isReadOnly()),
+												i: dataAttr(fieldState.isRequired()),
+												n: dataAttr(isInvalid()),
+												s: dataAttr(overlayState.isOpen)
+											};
+										}, ({ e, t, a, o, i, n, s }, _p$) => {
+											className(_el$, e, _p$?.e);
+											style(_el$, t, _p$?.t);
+											a !== _p$?.a && setAttribute(_el$, "data-disabled", a);
+											o !== _p$?.o && setAttribute(_el$, "data-readonly", o);
+											i !== _p$?.i && setAttribute(_el$, "data-required", i);
+											n !== _p$?.n && setAttribute(_el$, "data-invalid", n);
+											s !== _p$?.s && setAttribute(_el$, "data-open", s);
 										});
-										return _el$2;
+										return _el$;
 									})(), createComponent(Show, {
 										get when() {
 											return rest.name;
@@ -476,18 +481,7 @@ function DatePickerInner(props) {
 	});
 }
 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, [
@@ -533,6 +527,7 @@ function DateRangePickerInner(props) {
 		overlayProps.onOpenChange?.(open);
 	};
 	let triggerRef = null;
+	let groupRef = null;
 	const [fieldRef, setFieldRef] = createSignal(null);
 	const overlayState = {
 		get isOpen() {
@@ -553,6 +548,9 @@ function DateRangePickerInner(props) {
 	};
 	const calendarState = createRangeCalendarState({
 		...stateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: currentRangeValue,
 		onChange: (value) => {
 			setCommittedRangeValue(value);
@@ -560,7 +558,7 @@ function DateRangePickerInner(props) {
 		}
 	});
 	let wasRangeOpen = false;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const open = overlayState.isOpen;
 		if (open && !wasRangeOpen) calendarState.setFocused(true);
 		wasRangeOpen = open;
@@ -575,7 +573,7 @@ function DateRangePickerInner(props) {
 		if (value && "hour" in value) return "second" in value ? "second" : "minute";
 		return "day";
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const value = currentRangeValue();
 		setStartFieldValue(() => value?.start ?? null);
 		setEndFieldValue(() => value?.end ?? null);
@@ -596,7 +594,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,11 +606,17 @@ function DateRangePickerInner(props) {
 	};
 	const startFieldState = createDateFieldState({
 		...rangeFieldStateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: startFieldValue,
 		onChange: (value) => setRangeFieldValue("start", value)
 	});
 	const endFieldState = createDateFieldState({
 		...rangeFieldStateProps,
+		get locale() {
+			return access(stateProps.locale);
+		},
 		value: endFieldValue,
 		onChange: (value) => setRangeFieldValue("end", value)
 	});
@@ -661,6 +667,11 @@ function DateRangePickerInner(props) {
 			if (!element) return;
 			if (!triggerRef || !triggerRef.isConnected) triggerRef = element;
 		},
+		groupRef: () => groupRef,
+		setGroupRef: (element) => {
+			if (!element) return;
+			groupRef = element;
+		},
 		pickerAria
 	};
 	const renderValues = createMemo(() => ({
@@ -675,20 +686,22 @@ function DateRangePickerInner(props) {
 		style: local.style,
 		defaultClassName: "solidaria-DateRangePicker"
 	}, renderValues);
-	return createComponent(DateRangePickerStateContext.Provider, {
+	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, {
+									var _el$2 = getNextElement(_tmpl$);
+									ref(() => {
+										return setFieldRef;
+									}, _el$2);
+									insert(_el$2, createComponent(Provider, {
 										values: [[TextContext, { slots: {
 											get description() {
 												return pickerAria.descriptionProps;
@@ -701,26 +714,26 @@ function DateRangePickerInner(props) {
 											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
+									effect(() => {
+										return {
+											e: readShallow(renderProps.class()),
+											t: readShallow(renderProps.style()),
+											a: dataAttr(calendarState.isDisabled()),
+											o: dataAttr(calendarState.isReadOnly()),
+											i: dataAttr(isRequired()),
+											n: dataAttr(isInvalid()),
+											s: dataAttr(overlayState.isOpen)
+										};
+									}, ({ e, t, a, o, i, n, s }, _p$) => {
+										className(_el$2, e, _p$?.e);
+										style(_el$2, t, _p$?.t);
+										a !== _p$?.a && setAttribute(_el$2, "data-disabled", a);
+										o !== _p$?.o && setAttribute(_el$2, "data-readonly", o);
+										i !== _p$?.i && setAttribute(_el$2, "data-required", i);
+										n !== _p$?.n && setAttribute(_el$2, "data-invalid", n);
+										s !== _p$?.s && setAttribute(_el$2, "data-open", s);
 									});
-									return _el$4;
+									return _el$2;
 								})(),
 								createComponent(Show, {
 									get when() {
@@ -807,47 +820,48 @@ function DatePickerButton(props) {
 		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 buttonProps = createMemo(() => mergeProps$1(context.pickerAria.buttonProps, focusProps, hoverProps));
+	var _el$3 = getNextElement(_tmpl$2);
+	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$3);
+	spread(_el$3, [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$3, scope(() => {
+		return getChildren();
+	}));
+	runHydrationEvents();
+	return _el$3;
 }
 function DateRangePickerButton(props) {
 	const context = useDateRangePickerContext();
@@ -875,293 +889,201 @@ function DateRangePickerButton(props) {
 		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 buttonProps = createMemo(() => mergeProps$1(context.pickerAria.buttonProps, focusProps, hoverProps));
+	var _el$4 = getNextElement(_tmpl$2);
+	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$4);
+	spread(_el$4, [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$4, scope(() => {
+		return getChildren();
+	}));
+	runHydrationEvents();
+	return _el$4;
 }
 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$5 = getNextElement(_tmpl$3);
+	spread(_el$5, [() => {
+		return context.pickerAria.labelProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$5, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$5;
 }
 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$6 = getNextElement(_tmpl$3);
+	spread(_el$6, [() => {
+		return context.pickerAria.descriptionProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$6, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$6;
 }
 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$7 = getNextElement(_tmpl$3);
+	spread(_el$7, [() => {
+		return context.pickerAria.errorMessageProps;
+	}, { get "class"() {
+		return props.class;
+	} }], true);
+	insert(_el$7, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$7;
 }
 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$8 = getNextElement(_tmpl$3);
+	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 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$9 = getNextElement(_tmpl$3);
+	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 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$10 = getNextElement(_tmpl$3);
+	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 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;
+			} }));
 		}
 	});
 }