ropav 0.1.6 → 0.1.8

package/dist/date-picker.js

@@ -0,0 +1,809 @@
+import './date-picker.css';
+import { t as useControllableValue } from "./useControllableValue.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as x_default } from "./x.js";
+import { a as parseDateKey, i as normalizeDate, n as isDateUnavailable, o as toLocalDate, r as isValidDate, t as calendar_default } from "./calendar.js";
+import { i as useFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
+import { t as useControlState } from "./useControlState.js";
+import { i as isNodeWithinElement } from "./events.js";
+import { t as input_default } from "./input.js";
+import { t as popover_default } from "./popover.js";
+import { computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, nextTick, on, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, watch, withModifiers } from "vue";
+//#region src/components/date-picker/datePickerModel.ts
+var defaultDatePickerFormat = {
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit"
+};
+var timeZonePartsFormatters = /* @__PURE__ */ new Map();
+var flexibleLiteralPattern = String.raw`(?:[\p{P}\p{Z}\s]+)`;
+function formatDatePickerValue(value, locale, format = defaultDatePickerFormat) {
+	if (!value || !isValidDate(value)) return "";
+	return formatCivilDate(new Intl.DateTimeFormat(locale, format), value);
+}
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function getDigitMap(locale, numberingSystem) {
+	const formatter = new Intl.NumberFormat(locale, {
+		numberingSystem,
+		useGrouping: false
+	});
+	return new Map(Array.from({ length: 10 }, (_, digit) => [formatter.format(digit).replace(/\p{Cf}/gu, ""), String(digit)]));
+}
+function normalizeLocalizedValue(value, digitMap) {
+	const normalized = value.normalize("NFKC").replace(/\p{Cf}/gu, "");
+	return Array.from(normalized, (character) => digitMap.get(character) ?? character).join("");
+}
+function normalizeLocalizedText(value, digitMap, locale) {
+	return normalizeLocalizedValue(value, digitMap).toLocaleLowerCase(locale);
+}
+function getTimeZonePartsFormatter(timeZone) {
+	const existing = timeZonePartsFormatters.get(timeZone);
+	if (existing) return existing;
+	const formatter = new Intl.DateTimeFormat("en-US-u-ca-gregory-nu-latn", {
+		timeZone,
+		year: "numeric",
+		month: "numeric",
+		day: "numeric",
+		hour: "numeric",
+		minute: "numeric",
+		second: "numeric",
+		hourCycle: "h23"
+	});
+	timeZonePartsFormatters.set(timeZone, formatter);
+	return formatter;
+}
+function getUtcTime(parts) {
+	const date = /* @__PURE__ */ new Date(0);
+	date.setUTCHours(parts.hour, parts.minute, parts.second, 0);
+	date.setUTCFullYear(parts.year, parts.month - 1, parts.day);
+	return date.getTime();
+}
+function readDateTimeParts(formatter, value) {
+	const values = Object.fromEntries(formatter.formatToParts(value).filter((part) => part.type !== "literal").map((part) => [part.type, Number(part.value)]));
+	const parts = {
+		year: values.year,
+		month: values.month,
+		day: values.day,
+		hour: values.hour,
+		minute: values.minute,
+		second: values.second
+	};
+	return Object.values(parts).every(Number.isInteger) ? parts : null;
+}
+function createCivilDateInstant(value, timeZone) {
+	const targetTime = getUtcTime({
+		year: value.getFullYear(),
+		month: value.getMonth() + 1,
+		day: value.getDate(),
+		hour: 12,
+		minute: 0,
+		second: 0
+	});
+	const formatter = getTimeZonePartsFormatter(timeZone);
+	let candidateTime = targetTime;
+	for (let attempt = 0; attempt < 4; attempt += 1) {
+		const candidate = new Date(candidateTime);
+		const parts = readDateTimeParts(formatter, candidate);
+		if (!parts) return null;
+		const difference = getUtcTime(parts) - targetTime;
+		if (difference === 0) return candidate;
+		candidateTime -= difference;
+	}
+	return null;
+}
+function getCivilDateParts(formatter, value) {
+	const instant = createCivilDateInstant(value, formatter.resolvedOptions().timeZone);
+	return instant ? formatter.formatToParts(instant) : null;
+}
+function formatCivilDate(formatter, value) {
+	const instant = createCivilDateInstant(value, formatter.resolvedOptions().timeZone);
+	return instant ? formatter.format(instant) : "";
+}
+function getDatePartStyle(part, partValue, options) {
+	const configuredStyle = options[part];
+	if (part === "month" && configuredStyle && !["numeric", "2-digit"].includes(configuredStyle)) return "named";
+	if (configuredStyle === "2-digit") return "2-digit";
+	if (configuredStyle === "numeric") return "numeric";
+	if (!/^[0-9]+$/.test(partValue)) return part === "month" ? "named" : null;
+	return part === "year" && partValue.length === 2 ? "2-digit" : "numeric";
+}
+function getDatePartPattern(field) {
+	if (field.style === "named") return "(.+?)";
+	if (field.part === "day" || field.part === "month" || field.style === "2-digit") return "([0-9]{1,2})";
+	return "([0-9]+)";
+}
+function getLiteralPattern(value, digitMap, locale) {
+	const normalized = normalizeLocalizedText(value, digitMap, locale);
+	if (!normalized) return "";
+	return /^[\p{P}\p{Z}\s]+$/u.test(normalized) ? flexibleLiteralPattern : escapeRegExp(normalized);
+}
+function createDatePattern(formatter, digitMap) {
+	const fields = [];
+	const resolvedOptions = formatter.resolvedOptions();
+	const parts = getCivilDateParts(formatter, new Date(2001, 10, 22));
+	if (!parts) return null;
+	const patternParts = [];
+	for (const part of parts) {
+		if (part.type === "literal") {
+			patternParts.push(getLiteralPattern(part.value, digitMap, resolvedOptions.locale));
+			continue;
+		}
+		if (part.type === "weekday" || part.type === "era") {
+			patternParts.push("(?:.+?)");
+			continue;
+		}
+		if (part.type !== "day" && part.type !== "month" && part.type !== "year") return null;
+		if (fields.some((field) => field.part === part.type)) return null;
+		const normalizedPart = normalizeLocalizedValue(part.value, digitMap);
+		const style = getDatePartStyle(part.type, normalizedPart, resolvedOptions);
+		if (!style) return null;
+		const field = {
+			part: part.type,
+			style
+		};
+		fields.push(field);
+		patternParts.push(getDatePartPattern(field));
+	}
+	if (!fields.some((field) => field.part === "day") || !fields.some((field) => field.part === "month") || !fields.some((field) => field.part === "year")) return null;
+	return {
+		fields,
+		pattern: new RegExp(`^${patternParts.join("")}$`, "u")
+	};
+}
+function getLocalizedMonthMap(formatter, digitMap) {
+	const months = /* @__PURE__ */ new Map();
+	const locale = formatter.resolvedOptions().locale;
+	for (let month = 0; month < 12; month += 1) {
+		const monthName = getCivilDateParts(formatter, new Date(2e3, month, 15))?.find((part) => part.type === "month")?.value;
+		if (!monthName) continue;
+		const normalized = normalizeLocalizedText(monthName, digitMap, locale);
+		months.set(normalized, months.has(normalized) ? null : month + 1);
+	}
+	return months;
+}
+function getCalendarYearOffset(calendar) {
+	if (calendar === "buddhist") return 543;
+	if (calendar === "gregory" || calendar === "iso8601") return 0;
+	return null;
+}
+function getGregorianYear(displayedYear, yearStyle, calendarYearOffset) {
+	if (yearStyle !== "2-digit") return displayedYear - calendarYearOffset;
+	return 2e3 + (displayedYear - calendarYearOffset % 100 + 100) % 100;
+}
+function getParsedDate(match, fields, formatter, digitMap) {
+	const values = Object.fromEntries(fields.map((field, index) => [field.part, match[index + 1]]));
+	const calendarYearOffset = getCalendarYearOffset(formatter.resolvedOptions().calendar);
+	if (calendarYearOffset === null) return null;
+	const yearField = fields.find((field) => field.part === "year");
+	const monthField = fields.find((field) => field.part === "month");
+	if (!yearField || !monthField) return null;
+	const displayedYear = Number(values.year);
+	const day = Number(values.day);
+	const month = monthField.style === "named" ? getLocalizedMonthMap(formatter, digitMap).get(values.month) ?? null : Number(values.month);
+	if (!Number.isInteger(displayedYear) || !Number.isInteger(day) || month === null || !Number.isInteger(month)) return null;
+	const year = getGregorianYear(displayedYear, yearField.style, calendarYearOffset);
+	const parsed = /* @__PURE__ */ new Date(0);
+	parsed.setHours(0, 0, 0, 0);
+	parsed.setFullYear(year, month - 1, day);
+	if (parsed.getFullYear() !== year || parsed.getMonth() !== month - 1 || parsed.getDate() !== day) return null;
+	return parsed;
+}
+function normalizeComparableValue(value, digitMap, locale) {
+	return normalizeLocalizedText(value, digitMap, locale).replace(/[0-9]+/g, (digits) => String(Number(digits))).replace(/[\p{P}\p{Z}\s]+/gu, " ").trim();
+}
+/**
+* Parses ISO date keys or supported locale values produced by `formatDatePickerValue`.
+*
+* Locale parsing supports Gregorian, ISO 8601, and Buddhist date-only formats.
+* Two-digit years resolve to the corresponding Gregorian year from 2000 through 2099.
+*/
+function parseDatePickerValue(value, locale, format = defaultDatePickerFormat) {
+	const normalized = value.trim();
+	if (!normalized) return null;
+	const isoDate = parseDateKey(normalized);
+	if (isoDate) return isoDate;
+	const formatter = new Intl.DateTimeFormat(locale, format);
+	const resolvedOptions = formatter.resolvedOptions();
+	if (getCalendarYearOffset(resolvedOptions.calendar) === null) return null;
+	const digitMap = getDigitMap(locale, resolvedOptions.numberingSystem);
+	const localizedValue = normalizeLocalizedText(normalized, digitMap, resolvedOptions.locale);
+	const datePattern = createDatePattern(formatter, digitMap);
+	if (!datePattern) return null;
+	const match = datePattern.pattern.exec(localizedValue);
+	if (!match) return null;
+	const parsed = getParsedDate(match, datePattern.fields, formatter, digitMap);
+	if (!parsed) return null;
+	return normalizeComparableValue(formatCivilDate(formatter, parsed), digitMap, resolvedOptions.locale) === normalizeComparableValue(localizedValue, digitMap, resolvedOptions.locale) ? parsed : null;
+}
+function normalizeDatePickerValue(value) {
+	return normalizeDate(value);
+}
+//#endregion
+//#region src/components/date-picker/useDatePickerValueState.ts
+function useDatePickerValueState(options) {
+	const { props } = options;
+	const control = useControlState(props);
+	const initialValue = normalizeDatePickerValue(props.defaultValue);
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => initialValue,
+		onChange(value) {
+			options.onChange(normalizeDate(value));
+		}
+	});
+	const selectedDate = computed(() => normalizeDatePickerValue(controllable.value.value));
+	const inputValue = shallowRef(formatValue(selectedDate.value));
+	const hasInvalidInput = shallowRef(false);
+	const isInputEditable = computed(() => Boolean(props.allowInput) && !control.disabled && !props.readonly);
+	const isInvalid = computed(() => control.invalid || hasInvalidInput.value);
+	const validationMessage = computed(() => {
+		if (props.validationMessage !== void 0) return props.validationMessage;
+		return hasInvalidInput.value ? props.invalidDateMessage : void 0;
+	});
+	const canClear = computed(() => Boolean(props.clearable && selectedDate.value) && !control.disabled && !props.readonly);
+	function formatValue(value) {
+		if (!value) return "";
+		return props.formatDate?.(toLocalDate(value)) ?? formatDatePickerValue(value, props.locale, props.dateFormat ?? defaultDatePickerFormat);
+	}
+	function parseValue(value) {
+		return normalizeDate(props.parseDate ? props.parseDate(value) : parseDatePickerValue(value, props.locale, props.dateFormat ?? defaultDatePickerFormat));
+	}
+	function isUnavailable(date) {
+		return isDateUnavailable(date, {
+			min: props.min,
+			max: props.max,
+			disabledDates: props.disabledDates
+		});
+	}
+	function reconcileControlledInput() {
+		if (!controllable.isControlled.value) return false;
+		nextTick(() => {
+			inputValue.value = formatValue(selectedDate.value);
+		});
+		return true;
+	}
+	function setSelectedDate(value) {
+		const normalized = normalizeDate(value);
+		controllable.setValue(normalized);
+		if (!reconcileControlledInput()) inputValue.value = formatValue(normalized);
+		hasInvalidInput.value = false;
+	}
+	function updateInput(value) {
+		if (!isInputEditable.value) return;
+		inputValue.value = value;
+		if (!value.trim()) {
+			setSelectedDate(null);
+			return;
+		}
+		const parsed = parseValue(value);
+		hasInvalidInput.value = !parsed || isUnavailable(parsed);
+		if (!hasInvalidInput.value && parsed) {
+			controllable.setValue(parsed);
+			reconcileControlledInput();
+		}
+	}
+	function blurInput() {
+		if (!props.allowInput || !inputValue.value.trim()) return;
+		if (inputValue.value === formatValue(selectedDate.value)) {
+			hasInvalidInput.value = false;
+			return;
+		}
+		const parsed = parseValue(inputValue.value);
+		hasInvalidInput.value = !parsed || isUnavailable(parsed);
+		if (!hasInvalidInput.value && parsed) inputValue.value = formatValue(parsed);
+	}
+	function selectDate(value) {
+		if (control.disabled || props.readonly) return false;
+		setSelectedDate(value);
+		return true;
+	}
+	function clear() {
+		if (!canClear.value) return false;
+		setSelectedDate(null);
+		return true;
+	}
+	function resetValue() {
+		controllable.resetValue(initialValue);
+		inputValue.value = formatValue(initialValue);
+		hasInvalidInput.value = false;
+	}
+	watch([
+		() => selectedDate.value?.getTime(),
+		() => props.locale,
+		() => props.dateFormat,
+		() => props.formatDate
+	], () => {
+		inputValue.value = formatValue(selectedDate.value);
+		hasInvalidInput.value = false;
+	}, { flush: "sync" });
+	useFormControl({
+		elements: () => [options.getInput()],
+		isControlled: () => controllable.isControlled.value,
+		initializeDefault(element) {
+			element.defaultValue = formatValue(initialValue);
+		},
+		validationMessage: () => validationMessage.value,
+		readResetValue: resetValue,
+		syncControlledValue([element]) {
+			element.value = inputValue.value;
+		}
+	});
+	return {
+		control,
+		selectedDate,
+		inputValue,
+		isInputEditable,
+		isInvalid,
+		validationMessage,
+		canClear,
+		updateInput,
+		blurInput,
+		selectDate,
+		clear
+	};
+}
+//#endregion
+//#region src/components/date-picker/useDatePicker.ts
+function useDatePicker(props, emit, elements) {
+	const valueState = useDatePickerValueState({
+		props,
+		getInput: elements.getInput,
+		onChange(value) {
+			emit.value(value);
+			emit.change(value);
+		}
+	});
+	const { control, selectedDate, inputValue, isInputEditable, isInvalid, validationMessage: effectiveValidationMessage, canClear, updateInput: onInputUpdate, blurInput: onInputBlur } = valueState;
+	const rootClass = computed(() => bem("rp-date-picker", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		readonly: props.readonly,
+		invalid: isInvalid.value,
+		valid: control.valid && !isInvalid.value
+	}));
+	let openPicker;
+	let closePicker;
+	let suppressFocusOpen = false;
+	let pointerDownStartedFocused;
+	function getInputTriggerAttrs(slotProps) {
+		const popover = slotProps;
+		const trigger = popover.triggerProps;
+		const attrs = props.inputAttrs ?? {};
+		if (!trigger["aria-haspopup"]) return attrs;
+		openPicker = popover.open;
+		closePicker = popover.close;
+		return {
+			...attrs,
+			role: "combobox",
+			"aria-autocomplete": "none",
+			"aria-controls": trigger["aria-controls"],
+			"aria-expanded": trigger["aria-expanded"],
+			"aria-haspopup": trigger["aria-haspopup"],
+			"aria-readonly": isInputEditable.value ? attrs["aria-readonly"] : true,
+			autocomplete: attrs.autocomplete ?? "off",
+			inputmode: isInputEditable.value ? attrs.inputmode : "none",
+			onBeforeinput(event) {
+				if (!isInputEditable.value) event.preventDefault();
+				attrs.onBeforeinput?.(event);
+			},
+			onInput(event) {
+				if (!isInputEditable.value && event.currentTarget instanceof HTMLInputElement) event.currentTarget.value = inputValue.value;
+				attrs.onInput?.(event);
+			},
+			onPointerdown(event) {
+				pointerDownStartedFocused = event.currentTarget instanceof HTMLElement && event.currentTarget.ownerDocument.activeElement === event.currentTarget;
+				attrs.onPointerdown?.(event);
+			},
+			onFocusin(event) {
+				if (!suppressFocusOpen) popover.open();
+				attrs.onFocusin?.(event);
+			},
+			onClick(event) {
+				if (pointerDownStartedFocused !== false) popover.open();
+				pointerDownStartedFocused = void 0;
+				attrs.onClick?.(event);
+			},
+			onBlur(event) {
+				pointerDownStartedFocused = void 0;
+				onInputBlur();
+				attrs.onBlur?.(event);
+			},
+			onKeydown(event) {
+				if (event.key === "ArrowDown") {
+					event.preventDefault();
+					popover.open();
+					nextTick(elements.focusCalendar);
+				} else if (event.key === "Escape") trigger.onKeydown(event);
+				attrs.onKeydown?.(event);
+			}
+		};
+	}
+	function focusInput() {
+		elements.getInput()?.focus({ preventScroll: true });
+	}
+	function focusInputWithoutOpening() {
+		suppressFocusOpen = true;
+		try {
+			focusInput();
+		} finally {
+			suppressFocusOpen = false;
+		}
+	}
+	function onCalendarKeydown(event) {
+		if (event.key !== "Escape") return;
+		event.stopPropagation();
+		focusInputWithoutOpening();
+		closePicker?.();
+	}
+	function onFocusOut(event) {
+		if (isNodeWithinElement(event.relatedTarget, event.currentTarget)) return;
+		closePicker?.();
+	}
+	function selectCalendarDate(value) {
+		if (!valueState.selectDate(value)) return;
+		if (props.closeOnSelect === false) return;
+		focusInputWithoutOpening();
+		closePicker?.();
+	}
+	function clearFromControl(event) {
+		const clearButton = event.currentTarget;
+		const shouldRestoreFocus = clearButton instanceof HTMLElement && clearButton.ownerDocument.activeElement === clearButton;
+		valueState.clear();
+		if (shouldRestoreFocus) focusInputWithoutOpening();
+	}
+	function openDatePicker() {
+		focusInputWithoutOpening();
+		openPicker?.();
+	}
+	function onOpenUpdate(open) {
+		emit.open(open);
+	}
+	return {
+		control,
+		selectedDate,
+		inputValue,
+		isInvalid,
+		effectiveValidationMessage,
+		rootClass,
+		canClear,
+		getInputTriggerAttrs,
+		onInputUpdate,
+		onCalendarKeydown,
+		onFocusOut,
+		clearFromControl,
+		selectCalendarDate,
+		openDatePicker,
+		onOpenUpdate
+	};
+}
+//#endregion
+//#region src/components/date-picker/date-picker.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<button data-v-c39b1387></button>");
+//#endregion
+//#region src/components/date-picker/date-picker.vue
+var date_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpDatePicker",
+	inheritAttrs: false,
+	__name: "date-picker",
+	props: {
+		id: {},
+		name: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: null },
+		defaultMonth: {},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		locale: { default: void 0 },
+		dateFormat: { default: () => ({ ...defaultDatePickerFormat }) },
+		formatDate: {
+			type: Function,
+			default: void 0
+		},
+		parseDate: {
+			type: Function,
+			default: void 0
+		},
+		firstDayOfWeek: { default: 0 },
+		weekdayFormat: { default: "short" },
+		min: {},
+		max: {},
+		disabledDates: {},
+		fixedWeeks: {
+			type: Boolean,
+			default: true
+		},
+		hideOutsideDates: {
+			type: Boolean,
+			default: false
+		},
+		allowInput: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		valid: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {},
+		radius: {},
+		calendarSize: { default: void 0 },
+		calendarRadius: { default: void 0 },
+		placeholder: { default: "Select date" },
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: { default: void 0 },
+		invalidDateMessage: { default: "Enter a valid date." },
+		clearLabel: { default: "Clear date" },
+		toggleLabel: { default: "Open calendar" },
+		calendarAriaLabel: { default: "Choose a date" },
+		previousLabel: { default: "Previous month" },
+		nextLabel: { default: "Next month" },
+		placement: { default: "bottom-start" },
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
+		popoverId: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: [
+		"update:modelValue",
+		"update:open",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
+		const props = __props;
+		const emit = __emit;
+		provideNestedFormControlOwner();
+		const inputComponentRef = ref(null);
+		const calendarComponentRef = ref(null);
+		const { control, selectedDate, inputValue, isInvalid, effectiveValidationMessage, rootClass, canClear, getInputTriggerAttrs, onInputUpdate, onCalendarKeydown, onFocusOut, clearFromControl, selectCalendarDate, openDatePicker, onOpenUpdate } = useDatePicker(props, {
+			value: (value) => emit("update:modelValue", value),
+			change: (value) => emit("change", value),
+			open: (open) => emit("update:open", open)
+		}, {
+			getInput: () => inputComponentRef.value?.nativeElement ?? null,
+			focusCalendar: () => calendarComponentRef.value?.focus()
+		});
+		const popoverDisabled = computed(() => control.disabled || props.readonly);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-readonly": toPresenceAttribute(props.readonly),
+			"data-invalid": toPresenceAttribute(isInvalid.value),
+			onFocusout: onFocusOut
+		}));
+		const popoverClassNames = computed(() => ({
+			root: rootClass.value,
+			content: props.classNames?.content
+		}));
+		const popoverStyles = computed(() => ({ content: props.styles?.content }));
+		const inputClassNames = computed(() => ({
+			root: props.classNames?.control,
+			input: props.classNames?.input
+		}));
+		const inputStyles = computed(() => ({
+			root: props.styles?.control,
+			input: props.styles?.input
+		}));
+		const calendarClassNames = computed(() => ({
+			root: props.classNames?.calendar,
+			header: props.classNames?.calendarHeader,
+			previousControl: props.classNames?.calendarControl,
+			nextControl: props.classNames?.calendarControl,
+			monthLabel: props.classNames?.calendarMonthLabel,
+			weekdays: props.classNames?.calendarWeekdays,
+			weekday: props.classNames?.calendarWeekday,
+			grid: props.classNames?.calendarGrid,
+			week: props.classNames?.calendarWeek,
+			dayCell: props.classNames?.calendarDayCell,
+			day: props.classNames?.calendarDay
+		}));
+		const calendarStyles = computed(() => ({
+			root: props.styles?.calendar,
+			header: props.styles?.calendarHeader,
+			previousControl: props.styles?.calendarControl,
+			nextControl: props.styles?.calendarControl,
+			monthLabel: props.styles?.calendarMonthLabel,
+			weekdays: props.styles?.calendarWeekdays,
+			weekday: props.styles?.calendarWeekday,
+			grid: props.styles?.calendarGrid,
+			week: props.styles?.calendarWeek,
+			dayCell: props.styles?.calendarDayCell,
+			day: props.styles?.calendarDay
+		}));
+		function getIndicatorAttrs(slotProps) {
+			const popover = slotProps;
+			return {
+				...getPartAttrs("indicator", { class: "rp-date-picker__indicator" }),
+				"aria-controls": popover.triggerProps["aria-controls"]
+			};
+		}
+		__expose({
+			nativeElement: computed(() => inputComponentRef.value?.nativeElement ?? null),
+			focus: () => inputComponentRef.value?.focus(),
+			open: openDatePicker
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		return createComponent(popover_default, { $: [() => rootAttrs.value, {
+			id: () => __props.popoverId,
+			"class-names": () => popoverClassNames.value,
+			styles: () => popoverStyles.value,
+			placement: () => __props.placement,
+			open: () => __props.open,
+			"keep-mounted": () => __props.keepMounted,
+			disabled: () => popoverDisabled.value,
+			"aria-label": () => __props.calendarAriaLabel,
+			"content-class": () => `rp-date-picker__popover rp-date-picker__popover--size-${__props.calendarSize ?? __props.size ?? "md"}`,
+			"onUpdate:open": () => unref(onOpenUpdate)
+		}] }, {
+			"default": (slotProps) => {
+				const n11 = createComponent(input_default, {
+					id: () => unref(control).id,
+					name: () => __props.name,
+					form: () => unref(control).form,
+					"model-value": () => unref(inputValue),
+					type: "text",
+					size: () => __props.size,
+					radius: () => __props.radius,
+					placeholder: () => __props.placeholder,
+					disabled: () => unref(control).disabled || void 0,
+					readonly: () => __props.readonly || void 0,
+					required: () => unref(control).required || void 0,
+					invalid: () => unref(isInvalid) || void 0,
+					valid: () => unref(control).valid && !unref(isInvalid) ? true : void 0,
+					"aria-label": () => __props.ariaLabel,
+					describedby: () => __props.describedby,
+					labelledby: () => __props.labelledby,
+					"input-attrs": () => unref(getInputTriggerAttrs)(slotProps),
+					"class-names": () => inputClassNames.value,
+					styles: () => inputStyles.value,
+					"validation-message": () => unref(effectiveValidationMessage),
+					"onUpdate:modelValue": () => unref(onInputUpdate)
+				}, { "right": extend(() => {
+					return [createIf(() => __props.clearable, () => {
+						const n5 = t0();
+						renderEffect(() => {
+							const _canClear = unref(canClear);
+							setDynamicProps(n5, [unref(getPartAttrs)("clear", { class: ["rp-date-picker__clear", { "rp-date-picker__clear--hidden": !_canClear }] }), {
+								type: "button",
+								"aria-label": __props.clearLabel,
+								"aria-hidden": !_canClear ? "true" : void 0,
+								disabled: !_canClear || void 0
+							}]);
+						});
+						setInsertionState(n5, null, 0);
+						createSlot("clear-icon", null, () => {
+							return createComponent(unref(x_default), { "aria-hidden": "true" });
+						}, 1);
+						on(n5, "mousedown", withModifiers(() => {}, ["prevent"]));
+						on(n5, "click", withModifiers((e) => unref(clearFromControl)(e), ["stop"]));
+						return n5;
+					}, null, 129), createIf(() => $slots["calendar-icon"], () => {
+						const n9 = t0();
+						renderEffect(() => {
+							const _slotProps = slotProps;
+							setDynamicProps(n9, [getIndicatorAttrs(_slotProps), {
+								type: "button",
+								disabled: popoverDisabled.value,
+								"aria-label": __props.toggleLabel,
+								"aria-expanded": _slotProps.isOpen,
+								"aria-haspopup": "dialog"
+							}]);
+						});
+						setInsertionState(n9, null, 0);
+						createSlot("calendar-icon", null, null, 1);
+						on(n9, "mousedown", withModifiers(() => {}, ["prevent"]));
+						on(n9, "click", withModifiers((e) => unref(openDatePicker)(e), ["stop"]));
+						return n9;
+					}, null, 129)];
+				}, { _: 8 }) });
+				_setTemplateRef(n11, inputComponentRef, null, "inputComponentRef");
+				return n11;
+			},
+			"content": () => {
+				const n19 = createComponent(calendar_default, {
+					"model-value": () => unref(selectedDate),
+					"default-month": () => __props.defaultMonth,
+					locale: () => __props.locale,
+					"first-day-of-week": () => __props.firstDayOfWeek,
+					"weekday-format": () => __props.weekdayFormat,
+					min: () => __props.min,
+					max: () => __props.max,
+					"disabled-dates": () => __props.disabledDates,
+					"fixed-weeks": () => __props.fixedWeeks,
+					"hide-outside-dates": () => __props.hideOutsideDates,
+					readonly: () => __props.readonly,
+					size: () => __props.calendarSize ?? __props.size,
+					radius: () => __props.calendarRadius ?? __props.radius,
+					"aria-label": () => __props.calendarAriaLabel,
+					"previous-label": () => __props.previousLabel,
+					"next-label": () => __props.nextLabel,
+					"class-names": () => calendarClassNames.value,
+					styles: () => calendarStyles.value,
+					onKeydown: () => unref(onCalendarKeydown),
+					"onUpdate:modelValue": () => unref(selectCalendarDate)
+				}, { $: [
+					() => $slots.day ? {
+						name: "day",
+						fn: (dayProps) => {
+							return createSlot("day", { $: [() => dayProps] }, null, 1);
+						}
+					} : void 0,
+					() => $slots["previous-icon"] ? {
+						name: "previous-icon",
+						fn: () => {
+							return createSlot("previous-icon", null, null, 1);
+						}
+					} : void 0,
+					() => $slots["next-icon"] ? {
+						name: "next-icon",
+						fn: () => {
+							return createSlot("next-icon", null, null, 1);
+						}
+					} : void 0
+				] });
+				_setTemplateRef(n19, calendarComponentRef, null, "calendarComponentRef");
+				return n19;
+			}
+		}, true);
+	}
+}), [["__scopeId", "data-v-c39b1387"]]);
+//#endregion
+//#region src/components/date-picker/types.ts
+var datePickerParts = [
+	"root",
+	"control",
+	"input",
+	"clear",
+	"indicator",
+	"content",
+	"calendar",
+	"calendarHeader",
+	"calendarControl",
+	"calendarMonthLabel",
+	"calendarWeekdays",
+	"calendarWeekday",
+	"calendarGrid",
+	"calendarWeek",
+	"calendarDayCell",
+	"calendarDay"
+];
+//#endregion
+export { normalizeDatePickerValue as a, formatDatePickerValue as i, date_picker_default as n, parseDatePickerValue as o, defaultDatePickerFormat as r, datePickerParts as t };