@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/DatePicker.js

@@ -0,0 +1,991 @@
+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, f as HiddenDateInput, n as DateFieldContext, u as DateRangePickerContext } from "./DateField2.js";
+import { Portal, createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
+import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { FocusScope, createDatePicker, createDateRangePicker, createPopover, useUNSAFE_PortalContext } from "@proyecto-viviana/solidaria";
+import { access, createCalendarState, createDateFieldState, createDatePickerState, createRangeCalendarState } from "@proyecto-viviana/solid-stately";
+//#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(`<p>`);
+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
+	});
+	const pickerAria = createDatePicker(() => ({
+		...rest,
+		description: stateProps.description,
+		errorMessage: stateProps.errorMessage
+	}), fieldState, overlayState, calendarState);
+	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, {
+						get value() {
+							return {
+								state: fieldState,
+								aria: {
+									labelProps: pickerAria.labelProps,
+									inputProps: pickerAria.fieldProps,
+									descriptionProps: pickerAria.descriptionProps,
+									errorMessageProps: pickerAria.errorMessageProps
+								}
+							};
+						},
+						get children() {
+							return createComponent(CalendarContext.Provider, {
+								value: calendarState,
+								get children() {
+									return [(() => {
+										var _el$2 = getNextElement(_tmpl$2);
+										use(setFieldRef, _el$2);
+										spread(_el$2, mergeProps(() => pickerAria.groupProps, {
+											get ["class"]() {
+												return renderProps.class();
+											},
+											get style() {
+												return renderProps.style();
+											},
+											get ["data-disabled"]() {
+												return dataAttr(fieldState.isDisabled());
+											},
+											get ["data-readonly"]() {
+												return dataAttr(fieldState.isReadOnly());
+											},
+											get ["data-required"]() {
+												return dataAttr(fieldState.isRequired());
+											},
+											get ["data-invalid"]() {
+												return dataAttr(isInvalid());
+											},
+											get ["data-open"]() {
+												return dataAttr(overlayState.isOpen);
+											}
+										}), false, true);
+										insert(_el$2, createComponent(Provider, {
+											values: [[TextContext, { slots: {
+												get description() {
+													return pickerAria.descriptionProps;
+												},
+												get errorMessage() {
+													return pickerAria.errorMessageProps;
+												}
+											} }]],
+											get children() {
+												return props.children;
+											}
+										}));
+										runHydrationEvents();
+										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 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);
+		}
+	});
+	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);
+	const contextValue = {
+		calendarState,
+		startFieldState,
+		endFieldState,
+		startFieldContext: {
+			state: startFieldState,
+			aria: {
+				labelProps: {},
+				get inputProps() {
+					return pickerAria.startInputProps;
+				},
+				get descriptionProps() {
+					return pickerAria.descriptionProps;
+				},
+				get errorMessageProps() {
+					return pickerAria.errorMessageProps;
+				}
+			}
+		},
+		endFieldContext: {
+			state: endFieldState,
+			aria: {
+				labelProps: {},
+				get inputProps() {
+					return pickerAria.endInputProps;
+				},
+				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);
+									spread(_el$4, mergeProps(() => pickerAria.groupProps, {
+										get ["class"]() {
+											return renderProps.class();
+										},
+										get style() {
+											return renderProps.style();
+										},
+										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);
+										}
+									}), false, true);
+									insert(_el$4, createComponent(Provider, {
+										values: [[TextContext, { slots: {
+											get description() {
+												return pickerAria.descriptionProps;
+											},
+											get errorMessage() {
+												return pickerAria.errorMessageProps;
+											}
+										} }]],
+										get children() {
+											return props.children;
+										}
+									}));
+									runHydrationEvents();
+									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 renderValues = createMemo(() => ({
+		isDisabled: context.fieldState.isDisabled() || (props.isDisabled ?? false),
+		isOpen: context.overlayState.isOpen
+	}));
+	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 ?? "📅";
+	};
+	return (() => {
+		var _el$5 = getNextElement(_tmpl$4);
+		use((el) => {
+			context.setTriggerRef(el);
+		}, _el$5);
+		spread(_el$5, mergeProps(() => context.pickerAria.buttonProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get disabled() {
+				return context.fieldState.isDisabled() || props.isDisabled;
+			},
+			get ["data-disabled"]() {
+				return dataAttr(context.fieldState.isDisabled() || props.isDisabled);
+			},
+			get ["data-open"]() {
+				return dataAttr(context.overlayState.isOpen);
+			}
+		}), false, true);
+		insert(_el$5, getChildren);
+		runHydrationEvents();
+		return _el$5;
+	})();
+}
+function DateRangePickerButton(props) {
+	const context = useDateRangePickerContext();
+	const renderValues = createMemo(() => ({
+		isDisabled: context.calendarState.isDisabled() || (props.isDisabled ?? false),
+		isOpen: context.overlayState.isOpen
+	}));
+	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 ?? "📅";
+	};
+	return (() => {
+		var _el$6 = getNextElement(_tmpl$4);
+		use((el) => context.setTriggerRef(el), _el$6);
+		spread(_el$6, mergeProps(() => context.pickerAria.buttonProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get disabled() {
+				return context.calendarState.isDisabled() || props.isDisabled;
+			},
+			get ["data-disabled"]() {
+				return dataAttr(context.calendarState.isDisabled() || props.isDisabled);
+			},
+			get ["data-open"]() {
+				return dataAttr(context.overlayState.isOpen);
+			}
+		}), false, true);
+		insert(_el$6, getChildren);
+		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$6);
+		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$6);
+		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$6);
+		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$6);
+		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();
+	let contentRef;
+	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 cleanPopoverProps = () => {
+		const { style: _style, ref: _ref, ...rest } = popoverAria.popoverProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		return {
+			...popoverAria.popoverProps.style,
+			...props.style
+		};
+	};
+	createEffect(() => {
+		if (!context.overlayState.isOpen) requestAnimationFrame(() => context.triggerRef()?.focus());
+	});
+	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$2);
+							var _ref$ = contentRef;
+							typeof _ref$ === "function" ? use(_ref$, _el$11) : contentRef = _el$11;
+							spread(_el$11, mergeProps(cleanPopoverProps, () => context.pickerAria.dialogProps, {
+								"tabIndex": -1,
+								get ["class"]() {
+									return props.class ?? "solidaria-DatePickerContent";
+								},
+								get style() {
+									return mergedStyle();
+								},
+								get ["data-placement"]() {
+									return popoverAria.placement() ?? void 0;
+								}
+							}), false, true);
+							insert(_el$11, () => props.children);
+							runHydrationEvents();
+							return _el$11;
+						}
+					});
+				}
+			});
+		}
+	});
+}
+function DateRangePickerContent(props) {
+	const context = useDateRangePickerContext();
+	const portalContext = useUNSAFE_PortalContext();
+	let contentRef;
+	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 cleanPopoverProps = () => {
+		const { style: _style, ref: _ref, ...rest } = popoverAria.popoverProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		return {
+			...popoverAria.popoverProps.style,
+			...props.style
+		};
+	};
+	createEffect(() => {
+		if (!context.overlayState.isOpen) requestAnimationFrame(() => context.triggerRef()?.focus());
+	});
+	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$12 = getNextElement(_tmpl$2);
+							var _ref$2 = contentRef;
+							typeof _ref$2 === "function" ? use(_ref$2, _el$12) : contentRef = _el$12;
+							spread(_el$12, mergeProps(cleanPopoverProps, () => context.pickerAria.dialogProps, {
+								"tabIndex": -1,
+								get ["class"]() {
+									return props.class ?? "solidaria-DateRangePickerContent";
+								},
+								get style() {
+									return mergedStyle();
+								},
+								get ["data-placement"]() {
+									return popoverAria.placement() ?? void 0;
+								}
+							}), false, true);
+							insert(_el$12, () => props.children);
+							runHydrationEvents();
+							return _el$12;
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { DatePicker, DatePickerButton, DatePickerContent, DatePickerContext, DatePickerDescription, DatePickerErrorMessage, DatePickerLabel, DatePickerStateContext, DateRangePicker, DateRangePickerButton, DateRangePickerContent, DateRangePickerContext, DateRangePickerDescription, DateRangePickerErrorMessage, DateRangePickerLabel, DateRangePickerStateContext, HiddenDateInput, useDatePickerContext, useDateRangePickerContext };
+
+//# sourceMappingURL=DatePicker.js.map