@proyecto-viviana/solidaria-components 0.4.0 → 0.5.0

package/dist/DatePicker2.jsx

@@ -0,0 +1,820 @@
+import { Provider, dataAttr, useIsHydrated, useRenderProps } from "./utils.jsx";
+import { TextContext } from "./Text.jsx";
+import { FormContext } from "./Form.jsx";
+import { CalendarContext } from "./Calendar.jsx";
+import { RangeCalendarContext } from "./RangeCalendar.jsx";
+import { d as useDateRangePickerContext, n as DateFieldContext, u as DateRangePickerContext } from "./DateField2.jsx";
+import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { Portal } from "solid-js/web";
+import { FocusScope, createDateField, createDatePicker, createDateRangePicker, createEnterAnimation, createFocusRing, createFormValidation, createHover, createPopover, mergeProps as mergeProps$1, 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.
+*/
+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 <input ref={(el) => {
+		setInputRef(el);
+	}} type={inputType()} name={props.name} form={props.form} value={formattedValue()} autocomplete={props.autoComplete} disabled={props.isDisabled} required={usesNativeValidation() && props.isRequired ? true : void 0} hidden={usesNativeValidation() || void 0} min={hasValidationBehavior() ? void 0 : formattedMin() || void 0} max={hasValidationBehavior() ? void 0 : formattedMax() || void 0} onChange={usesNativeValidation() ? () => {} : void 0} tabIndex={-1} aria-hidden="true" style={{
+		position: "absolute",
+		width: "1px",
+		height: "1px",
+		padding: "0",
+		margin: "-1px",
+		overflow: "hidden",
+		clip: "rect(0, 0, 0, 0)",
+		"white-space": "nowrap",
+		"border-width": "0"
+	}} />;
+}
+//#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
+*/
+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 <Show when={isHydrated()} fallback={<div class="solidaria-DatePicker solidaria-DatePicker--placeholder" aria-hidden="true" />}>
+      <DatePickerInner {...props} __formContext={formContext} />
+    </Show>;
+}
+/**
+* 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 <DatePickerStateContext.Provider value={fieldState}>
+      <DatePickerContext.Provider value={contextValue}>
+        {}
+        <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;
+			}
+		}
+	}}>
+          <CalendarContext.Provider value={calendarState}>
+            {}
+            <div ref={setFieldRef} class={renderProps.class()} style={renderProps.style()} data-disabled={dataAttr(fieldState.isDisabled())} data-readonly={dataAttr(fieldState.isReadOnly())} data-required={dataAttr(fieldState.isRequired())} data-invalid={dataAttr(isInvalid())} data-open={dataAttr(overlayState.isOpen)}>
+              <Provider values={[[TextContext, { slots: {
+		get description() {
+			return pickerAria.descriptionProps;
+		},
+		get errorMessage() {
+			return pickerAria.errorMessageProps;
+		}
+	} }]]}>
+                {props.children}
+              </Provider>
+            </div>
+            <Show when={rest.name}>
+              <HiddenDateInput name={rest.name} form={rest.form} value={() => datePickerState.value()} autoComplete={rest.autoComplete} isDisabled={fieldState.isDisabled()} isRequired={fieldState.isRequired()} validationBehavior={validationBehavior()} validationState={fieldState} focus={() => {
+		fieldRef()?.querySelector("[role=\"spinbutton\"]")?.focus();
+	}} minValue={() => access(stateProps.minValue)} maxValue={() => access(stateProps.maxValue)} granularity={datePickerState.granularity} />
+            </Show>
+          </CalendarContext.Provider>
+        </DateFieldContext.Provider>
+      </DatePickerContext.Provider>
+    </DatePickerStateContext.Provider>;
+}
+function DateRangePicker(props) {
+	const isHydrated = useIsHydrated();
+	return <Show when={isHydrated()} fallback={<div class="solidaria-DateRangePicker solidaria-DateRangePicker--placeholder" aria-hidden="true" />}>
+      <DateRangePickerInner {...props} />
+    </Show>;
+}
+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 <DateRangePickerStateContext.Provider value={calendarState}>
+      <DateRangePickerContext.Provider value={contextValue}>
+        <RangeCalendarContext.Provider value={calendarState}>
+          {}
+          <div ref={setFieldRef} class={renderProps.class()} style={renderProps.style()} data-disabled={dataAttr(calendarState.isDisabled())} data-readonly={dataAttr(calendarState.isReadOnly())} data-required={dataAttr(isRequired())} data-invalid={dataAttr(isInvalid())} data-open={dataAttr(overlayState.isOpen)}>
+            <Provider values={[[TextContext, { slots: {
+		get description() {
+			return pickerAria.descriptionProps;
+		},
+		get errorMessage() {
+			return pickerAria.errorMessageProps;
+		}
+	} }]]}>
+              {props.children}
+            </Provider>
+          </div>
+          <Show when={rest.startName}>
+            <HiddenDateInput name={rest.startName} form={rest.form} value={() => currentRangeValue()?.start ?? null} isDisabled={access(stateProps.isDisabled) ?? false} minValue={() => access(stateProps.minValue)} maxValue={() => access(stateProps.maxValue)} granularity={rangeGranularity()} />
+          </Show>
+          <Show when={rest.endName}>
+            <HiddenDateInput name={rest.endName} form={rest.form} value={() => currentRangeValue()?.end ?? null} isDisabled={access(stateProps.isDisabled) ?? false} minValue={() => access(stateProps.minValue)} maxValue={() => access(stateProps.maxValue)} granularity={rangeGranularity()} />
+          </Show>
+        </RangeCalendarContext.Provider>
+      </DateRangePickerContext.Provider>
+    </DateRangePickerStateContext.Provider>;
+}
+/**
+* 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$1(context.pickerAria.buttonProps, focusProps, hoverProps));
+	return <button ref={(el) => {
+		context.setTriggerRef(el);
+		props.ref?.(el);
+	}} {...buttonProps()} class={renderProps.class()} style={renderProps.style()} disabled={isDisabled()} data-disabled={dataAttr(isDisabled())} data-open={dataAttr(context.overlayState.isOpen)} attr:data-hovered={isHovered() ? "true" : void 0} attr:data-focused={isFocused() ? "true" : void 0} attr:data-focus-visible={isFocusVisible() ? "true" : void 0} attr:data-pressed={context.pickerAria.isButtonPressed() ? "true" : void 0}>
+      {getChildren()}
+    </button>;
+}
+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$1(context.pickerAria.buttonProps, focusProps, hoverProps));
+	return <button ref={(el) => {
+		context.setTriggerRef(el);
+		props.ref?.(el);
+	}} {...buttonProps()} class={renderProps.class()} style={renderProps.style()} disabled={isDisabled()} data-disabled={dataAttr(isDisabled())} data-open={dataAttr(context.overlayState.isOpen)} attr:data-hovered={isHovered() ? "true" : void 0} attr:data-focused={isFocused() ? "true" : void 0} attr:data-focus-visible={isFocusVisible() ? "true" : void 0} attr:data-pressed={context.pickerAria.isButtonPressed() ? "true" : void 0}>
+      {getChildren()}
+    </button>;
+}
+function DatePickerLabel(props) {
+	const context = useDatePickerContext();
+	return <span {...context.pickerAria.labelProps} class={props.class}>
+      {props.children}
+    </span>;
+}
+function DatePickerDescription(props) {
+	const context = useDatePickerContext();
+	return <span {...context.pickerAria.descriptionProps} class={props.class}>
+      {props.children}
+    </span>;
+}
+function DatePickerErrorMessage(props) {
+	const context = useDatePickerContext();
+	return <span {...context.pickerAria.errorMessageProps} class={props.class}>
+      {props.children}
+    </span>;
+}
+function DateRangePickerLabel(props) {
+	const context = useDateRangePickerContext();
+	return <span {...context.pickerAria.labelProps} class={props.class}>
+      {props.children}
+    </span>;
+}
+function DateRangePickerDescription(props) {
+	const context = useDateRangePickerContext();
+	return <span {...context.pickerAria.descriptionProps} class={props.class}>
+      {props.children}
+    </span>;
+}
+function DateRangePickerErrorMessage(props) {
+	const context = useDateRangePickerContext();
+	return <span {...context.pickerAria.errorMessageProps} class={props.class}>
+      {props.children}
+    </span>;
+}
+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 <Show when={context.overlayState.isOpen}>
+      <Portal mount={portalContainer()}>
+        <FocusScope contain restoreFocus>
+          {}
+          <div ref={setContentRef} {...cleanPopoverProps()} class={resolvedClass()} style={mergedStyle()} data-placement={popoverAria.placement() ?? "bottom"} data-entering={dataAttr(isEntering())}>
+            {}
+            <section {...context.pickerAria.dialogProps} tabIndex={-1}>
+              {props.children}
+            </section>
+          </div>
+        </FocusScope>
+      </Portal>
+    </Show>;
+}
+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 <Show when={context.overlayState.isOpen}>
+      <Portal mount={portalContainer()}>
+        <FocusScope contain restoreFocus>
+          {}
+          <div ref={setContentRef} {...cleanPopoverProps()} class={resolvedClass()} style={mergedStyle()} data-placement={popoverAria.placement() ?? "bottom"} data-entering={dataAttr(isEntering())}>
+            <section {...context.pickerAria.dialogProps} tabIndex={-1}>
+              {props.children}
+            </section>
+          </div>
+        </FocusScope>
+      </Portal>
+    </Show>;
+}
+//#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.jsx.map