@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/dist/DatePicker2.js

@@ -0,0 +1,1171 @@
+import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.js";
+import { TextContext } from "./Text.js";
+import { FormContext } from "./Form.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";
+//#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.
+*/
+var _tmpl$$1 = /*#__PURE__*/ template(`<input tabindex=-1 aria-hidden=true>`);
+function accessValue(value) {
+	return typeof value === "function" ? value() : value;
+}
+function formatDateValue(value, granularity) {
+	if (!value) return "";
+	if ("timeZone" in value) return String(value);
+	const dateValue = value;
+	const year = String(dateValue.year).padStart(4, "0");
+	const month = String(dateValue.month).padStart(2, "0");
+	const day = String(dateValue.day).padStart(2, "0");
+	if (granularity === "day") return `${year}-${month}-${day}`;
+	const hasHour = "hour" in dateValue;
+	const hour = hasHour ? String(dateValue.hour).padStart(2, "0") : "00";
+	const hasMinute = hasHour && "minute" in dateValue;
+	const minute = hasMinute ? String(dateValue.minute).padStart(2, "0") : "00";
+	if (granularity === "second" && hasMinute && "second" in dateValue) return `${year}-${month}-${day}T${hour}:${minute}:${String(dateValue.second).padStart(2, "0")}`;
+	return `${year}-${month}-${day}T${hour}:${minute}`;
+}
+function HiddenDateInput(props) {
+	const granularity = () => props.granularity ?? "day";
+	const hasValidationBehavior = () => props.validationBehavior != null;
+	const validationBehavior = () => props.validationBehavior;
+	const usesNativeValidation = () => validationBehavior() === "native";
+	const value = () => accessValue(props.value);
+	const minValue = () => accessValue(props.minValue);
+	const maxValue = () => accessValue(props.maxValue);
+	const hasTimeZoneValue = () => Boolean(value() && "timeZone" in value() || minValue() && "timeZone" in minValue() || maxValue() && "timeZone" in maxValue());
+	const inputType = () => usesNativeValidation() ? "text" : hasValidationBehavior() ? "hidden" : hasTimeZoneValue() ? "hidden" : granularity() === "day" ? "date" : "datetime-local";
+	const formattedValue = () => formatDateValue(value(), granularity());
+	const formattedMin = () => formatDateValue(minValue(), granularity());
+	const formattedMax = () => formatDateValue(maxValue(), granularity());
+	const [inputRef, setInputRef] = createSignal();
+	if (props.validationState) createFormValidation({
+		get validationBehavior() {
+			return validationBehavior();
+		},
+		get focus() {
+			return props.focus;
+		}
+	}, props.validationState, inputRef);
+	createEffect(() => {
+		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) => {
+			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 = {
+				position: "absolute",
+				width: "1px",
+				height: "1px",
+				padding: "0",
+				margin: "-1px",
+				overflow: "hidden",
+				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$;
+	})();
+}
+//#endregion
+//#region src/DatePicker.tsx
+/**
+* DatePicker component for solidaria-components
+*
+* 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>`);
+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");
+	return context;
+}
+/**
+* A date picker combines a DateField and a Calendar popover.
+*
+* @example
+* ```tsx
+* <DatePicker label="Event date">
+*   <Label>Event date</Label>
+*   <Group>
+*     <DateInput>
+*       {(segment) => <DateSegment segment={segment} />}
+*     </DateInput>
+*     <DatePickerButton>📅</DatePickerButton>
+*   </Group>
+*   <Popover>
+*     <Dialog>
+*       <Calendar>
+*         <CalendarGrid>
+*           {(date) => <CalendarCell date={date} />}
+*         </CalendarGrid>
+*       </Calendar>
+*     </Dialog>
+*   </Popover>
+* </DatePicker>
+* ```
+*/
+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 }));
+		}
+	});
+}
+/**
+* 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), [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"shouldCloseOnSelect",
+		"__formContext"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"isOpen",
+		"defaultOpen",
+		"onOpenChange",
+		"minValue",
+		"maxValue",
+		"isInvalid",
+		"isDisabled",
+		"isReadOnly",
+		"isRequired",
+		"locale",
+		"granularity",
+		"hourCycle",
+		"hideTimeZone",
+		"placeholderValue",
+		"shouldForceLeadingZeros",
+		"createCalendar",
+		"validationState",
+		"validationBehavior",
+		"validate",
+		"description",
+		"errorMessage",
+		"isDateUnavailable",
+		"firstDayOfWeek",
+		"visibleMonths",
+		"pageBehavior",
+		"selectionAlignment",
+		"isDateDisabled"
+	]);
+	const [triggerRef, setTriggerRef] = createSignal(null);
+	const [fieldRef, setFieldRef] = createSignal(null);
+	const datePickerState = createDatePickerState({
+		get value() {
+			return stateProps.value;
+		},
+		get defaultValue() {
+			return stateProps.defaultValue;
+		},
+		get onChange() {
+			return stateProps.onChange;
+		},
+		get minValue() {
+			return stateProps.minValue;
+		},
+		get maxValue() {
+			return stateProps.maxValue;
+		},
+		get isDisabled() {
+			return stateProps.isDisabled;
+		},
+		get isReadOnly() {
+			return stateProps.isReadOnly;
+		},
+		get isRequired() {
+			return stateProps.isRequired;
+		},
+		get granularity() {
+			return stateProps.granularity;
+		},
+		get hourCycle() {
+			return stateProps.hourCycle;
+		},
+		get hideTimeZone() {
+			return stateProps.hideTimeZone;
+		},
+		get placeholderValue() {
+			return stateProps.placeholderValue;
+		},
+		get shouldCloseOnSelect() {
+			return local.shouldCloseOnSelect;
+		},
+		get defaultOpen() {
+			return stateProps.defaultOpen;
+		},
+		get isOpen() {
+			return stateProps.isOpen;
+		},
+		get onOpenChange() {
+			return stateProps.onOpenChange;
+		},
+		get isDateUnavailable() {
+			return stateProps.isDateUnavailable;
+		},
+		get validationState() {
+			return stateProps.validationState;
+		}
+	});
+	const overlayState = {
+		get isOpen() {
+			return datePickerState.isOpen();
+		},
+		open: datePickerState.open,
+		close: datePickerState.close,
+		toggle: () => datePickerState.setOpen(!datePickerState.isOpen())
+	};
+	const fieldState = createDateFieldState({
+		...stateProps,
+		value: () => datePickerState.value(),
+		onChange: (value) => {
+			datePickerState.setValue(value);
+		}
+	});
+	const calendarState = createCalendarState({
+		value: () => datePickerState.value(),
+		onChange: (value) => {
+			if (!value) return;
+			datePickerState.setDateValue(value);
+		},
+		minValue: stateProps.minValue,
+		maxValue: stateProps.maxValue,
+		isDisabled: stateProps.isDisabled,
+		isReadOnly: stateProps.isReadOnly,
+		locale: stateProps.locale,
+		createCalendar: stateProps.createCalendar,
+		isDateUnavailable: stateProps.isDateUnavailable,
+		firstDayOfWeek: stateProps.firstDayOfWeek,
+		visibleMonths: stateProps.visibleMonths,
+		pageBehavior: stateProps.pageBehavior,
+		selectionAlignment: stateProps.selectionAlignment,
+		isDateDisabled: stateProps.isDateDisabled
+	});
+	let wasOpen = false;
+	createEffect(() => {
+		const open = datePickerState.isOpen();
+		if (open && !wasOpen) calendarState.setFocused(true);
+		wasOpen = open;
+	});
+	const pickerAria = createDatePicker(() => ({
+		...rest,
+		description: stateProps.description,
+		errorMessage: stateProps.errorMessage
+	}), fieldState, overlayState, calendarState, () => fieldRef());
+	const fieldAria = createDateField(() => pickerAria.fieldProps, fieldState, () => fieldRef());
+	const contextValue = {
+		fieldState,
+		datePickerState,
+		calendarState,
+		overlayState,
+		triggerRef,
+		setTriggerRef: (element) => {
+			if (!element) return;
+			const current = triggerRef();
+			if (!current || !current.isConnected) setTriggerRef(() => element);
+		},
+		pickerAria
+	};
+	const isInvalid = createMemo(() => fieldState.isInvalid() || datePickerState.builtinValidation().isInvalid || Boolean(stateProps.isInvalid));
+	const renderValues = createMemo(() => ({
+		isDisabled: fieldState.isDisabled(),
+		isReadOnly: fieldState.isReadOnly(),
+		isRequired: fieldState.isRequired(),
+		isInvalid: isInvalid(),
+		isOpen: overlayState.isOpen
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-DatePicker"
+	}, renderValues);
+	const validationBehavior = () => stateProps.validationBehavior ?? formContext?.validationBehavior ?? "native";
+	return createComponent(DatePickerStateContext.Provider, {
+		value: fieldState,
+		get children() {
+			return createComponent(DatePickerContext.Provider, {
+				value: contextValue,
+				get children() {
+					return createComponent(DateFieldContext.Provider, {
+						value: {
+							state: fieldState,
+							aria: {
+								get labelProps() {
+									return pickerAria.labelProps;
+								},
+								get inputProps() {
+									return fieldAria.fieldProps;
+								},
+								get descriptionProps() {
+									return pickerAria.descriptionProps;
+								},
+								get errorMessageProps() {
+									return pickerAria.errorMessageProps;
+								}
+							}
+						},
+						get children() {
+							return createComponent(CalendarContext.Provider, {
+								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;
+												},
+												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 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;
+												}
+											});
+										}
+									})];
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+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);
+		}
+	});
+}
+function DateRangePickerInner(props) {
+	const [local, overlayProps, stateProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"shouldCloseOnSelect"
+	], [
+		"defaultOpen",
+		"isOpen",
+		"onOpenChange"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"minValue",
+		"maxValue",
+		"isDisabled",
+		"isReadOnly",
+		"focusedValue",
+		"defaultFocusedValue",
+		"onFocusChange",
+		"locale",
+		"granularity",
+		"hourCycle",
+		"hideTimeZone",
+		"placeholderValue",
+		"createCalendar",
+		"isDateUnavailable",
+		"visibleMonths",
+		"isDateDisabled",
+		"validationState",
+		"allowsNonContiguousRanges",
+		"firstDayOfWeek",
+		"pageBehavior",
+		"selectionAlignment"
+	]);
+	const [internalOpen, setInternalOpen] = createSignal(overlayProps.defaultOpen ?? false);
+	const isOpen = () => access(overlayProps.isOpen) ?? internalOpen();
+	const setOpen = (open) => {
+		if (access(overlayProps.isOpen) === void 0) setInternalOpen(open);
+		overlayProps.onOpenChange?.(open);
+	};
+	let triggerRef = null;
+	const [fieldRef, setFieldRef] = createSignal(null);
+	const overlayState = {
+		get isOpen() {
+			return isOpen();
+		},
+		open: () => setOpen(true),
+		close: () => setOpen(false),
+		toggle: () => setOpen(!isOpen())
+	};
+	const [internalRangeValue, setInternalRangeValue] = createSignal(stateProps.defaultValue ?? null);
+	const currentRangeValue = createMemo(() => {
+		const controlled = access(stateProps.value);
+		return controlled !== void 0 ? controlled : internalRangeValue();
+	});
+	const setCommittedRangeValue = (value) => {
+		if (access(stateProps.value) === void 0) setInternalRangeValue(() => value);
+		stateProps.onChange?.(value);
+	};
+	const calendarState = createRangeCalendarState({
+		...stateProps,
+		value: currentRangeValue,
+		onChange: (value) => {
+			setCommittedRangeValue(value);
+			if (local.shouldCloseOnSelect !== false && value?.start && value?.end) setOpen(false);
+		}
+	});
+	let wasRangeOpen = false;
+	createEffect(() => {
+		const open = overlayState.isOpen;
+		if (open && !wasRangeOpen) calendarState.setFocused(true);
+		wasRangeOpen = open;
+	});
+	const isInvalid = createMemo(() => Boolean(rest.isInvalid) || calendarState.validationState() === "invalid");
+	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(() => {
+		const value = currentRangeValue();
+		setStartFieldValue(() => value?.start ?? null);
+		setEndFieldValue(() => value?.end ?? null);
+	});
+	const setRangeFieldValue = (part, nextValue) => {
+		if (part === "start") setStartFieldValue(() => nextValue);
+		else setEndFieldValue(() => nextValue);
+		const nextStart = part === "start" ? nextValue : startFieldValue();
+		const nextEnd = part === "end" ? nextValue : endFieldValue();
+		setCommittedRangeValue(nextStart && nextEnd ? {
+			start: nextStart,
+			end: nextEnd
+		} : null);
+	};
+	const rangeFieldStateProps = {
+		minValue: stateProps.minValue,
+		maxValue: stateProps.maxValue,
+		isDisabled: stateProps.isDisabled,
+		isReadOnly: stateProps.isReadOnly,
+		isRequired,
+		locale: access(stateProps.locale),
+		granularity: rangeGranularity(),
+		hourCycle: stateProps.hourCycle,
+		hideTimeZone: stateProps.hideTimeZone,
+		placeholderValue: stateProps.placeholderValue,
+		validationState: () => isInvalid() ? "invalid" : access(stateProps.validationState),
+		isDateUnavailable: stateProps.isDateUnavailable ? (date) => stateProps.isDateUnavailable(date, null) : void 0
+	};
+	const startFieldState = createDateFieldState({
+		...rangeFieldStateProps,
+		value: startFieldValue,
+		onChange: (value) => setRangeFieldValue("start", value)
+	});
+	const endFieldState = createDateFieldState({
+		...rangeFieldStateProps,
+		value: endFieldValue,
+		onChange: (value) => setRangeFieldValue("end", value)
+	});
+	const pickerAria = createDateRangePicker(() => ({
+		...rest,
+		description: props.description,
+		errorMessage: props.errorMessage
+	}), calendarState, overlayState, () => fieldRef());
+	const startFieldAria = createDateField(() => pickerAria.startFieldProps, startFieldState, () => fieldRef());
+	const endFieldAria = createDateField(() => pickerAria.endFieldProps, endFieldState, () => fieldRef());
+	const contextValue = {
+		calendarState,
+		startFieldState,
+		endFieldState,
+		startFieldContext: {
+			state: startFieldState,
+			aria: {
+				labelProps: {},
+				get inputProps() {
+					return startFieldAria.fieldProps;
+				},
+				get descriptionProps() {
+					return pickerAria.descriptionProps;
+				},
+				get errorMessageProps() {
+					return pickerAria.errorMessageProps;
+				}
+			}
+		},
+		endFieldContext: {
+			state: endFieldState,
+			aria: {
+				labelProps: {},
+				get inputProps() {
+					return endFieldAria.fieldProps;
+				},
+				get descriptionProps() {
+					return pickerAria.descriptionProps;
+				},
+				get errorMessageProps() {
+					return pickerAria.errorMessageProps;
+				}
+			}
+		},
+		overlayState,
+		triggerRef: () => triggerRef,
+		setTriggerRef: (element) => {
+			if (!element) return;
+			if (!triggerRef || !triggerRef.isConnected) triggerRef = element;
+		},
+		pickerAria
+	};
+	const renderValues = createMemo(() => ({
+		isDisabled: calendarState.isDisabled(),
+		isReadOnly: calendarState.isReadOnly(),
+		isRequired: isRequired(),
+		isInvalid: isInvalid(),
+		isOpen: overlayState.isOpen
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-DateRangePicker"
+	}, renderValues);
+	return createComponent(DateRangePickerStateContext.Provider, {
+		value: calendarState,
+		get children() {
+			return createComponent(DateRangePickerContext.Provider, {
+				value: contextValue,
+				get children() {
+					return createComponent(RangeCalendarContext.Provider, {
+						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;
+											}
+										} }]],
+										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
+									});
+									return _el$4;
+								})(),
+								createComponent(Show, {
+									get when() {
+										return rest.startName;
+									},
+									get children() {
+										return createComponent(HiddenDateInput, {
+											get name() {
+												return rest.startName;
+											},
+											get form() {
+												return rest.form;
+											},
+											value: () => currentRangeValue()?.start ?? null,
+											get isDisabled() {
+												return access(stateProps.isDisabled) ?? false;
+											},
+											minValue: () => access(stateProps.minValue),
+											maxValue: () => access(stateProps.maxValue),
+											get granularity() {
+												return rangeGranularity();
+											}
+										});
+									}
+								}),
+								createComponent(Show, {
+									get when() {
+										return rest.endName;
+									},
+									get children() {
+										return createComponent(HiddenDateInput, {
+											get name() {
+												return rest.endName;
+											},
+											get form() {
+												return rest.form;
+											},
+											value: () => currentRangeValue()?.end ?? null,
+											get isDisabled() {
+												return access(stateProps.isDisabled) ?? false;
+											},
+											minValue: () => access(stateProps.minValue),
+											maxValue: () => access(stateProps.maxValue),
+											get granularity() {
+												return rangeGranularity();
+											}
+										});
+									}
+								})
+							];
+						}
+					});
+				}
+			});
+		}
+	});
+}
+/**
+* A button that opens the date picker calendar.
+*/
+function DatePickerButton(props) {
+	const context = useDatePickerContext();
+	const isDisabled = () => context.pickerAria.isButtonDisabled() || (props.isDisabled ?? false);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return isDisabled();
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: isDisabled(),
+		isOpen: context.overlayState.isOpen,
+		isPressed: context.pickerAria.isButtonPressed(),
+		isHovered: isHovered(),
+		isFocusVisible: isFocusVisible()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: props.class,
+		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) => {
+			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;
+	})();
+}
+function DateRangePickerButton(props) {
+	const context = useDateRangePickerContext();
+	const isDisabled = () => context.pickerAria.isButtonDisabled() || (props.isDisabled ?? false);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return isDisabled();
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: isDisabled(),
+		isOpen: context.overlayState.isOpen,
+		isPressed: context.pickerAria.isButtonPressed(),
+		isHovered: isHovered(),
+		isFocusVisible: isFocusVisible()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: props.class,
+		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) => {
+			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;
+	})();
+}
+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;
+	})();
+}
+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;
+	})();
+}
+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;
+	})();
+}
+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;
+	})();
+}
+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;
+	})();
+}
+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;
+	})();
+}
+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));
+	});
+}
+/**
+* The content area of the date picker (typically contains a Calendar).
+*/
+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,
+		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() {
+			return context.overlayState.isOpen;
+		},
+		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;
+						}
+					});
+				}
+			});
+		}
+	});
+}
+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,
+		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() {
+			return context.overlayState.isOpen;
+		},
+		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;
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { HiddenDateInput as _, DatePickerDescription as a, DatePickerStateContext as c, DateRangePickerContent as d, DateRangePickerDescription as f, useDatePickerContext as g, DateRangePickerStateContext as h, DatePickerContext as i, DateRangePicker as l, DateRangePickerLabel as m, DatePickerButton as n, DatePickerErrorMessage as o, DateRangePickerErrorMessage as p, DatePickerContent as r, DatePickerLabel as s, DatePicker as t, DateRangePickerButton as u };
+
+//# sourceMappingURL=DatePicker2.js.map