niuma-ui 2.0.3 → 2.0.4

package/dist/components/time-picker/src/RsTimePicker.impl.js

@@ -1,43 +1,65 @@
 import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
-import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "../../_shared/src/reka.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
-import { isRsFormItemBoundControl, useRsFormItemContext } from "../../form/src/form-utils.js";
+import { buildLocalInputRules, runFormFieldRules } from "../../form/src/form-rules.js";
+import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormItemContext } from "../../form/src/form-utils.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
-import { EMPTY_TIME_RANGE, formatTimeFromParts, formatTimeRangeDisplay, getCurrentTime, isTimeRangeEmpty, isTimeRangeOrderedValues, isTimeWithinBounds, parseTimeValue, pickEarlierTime, pickLaterTime } from "./time-picker-utils.js";
+import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
+import RsButton_default from "../../button/src/RsButton.js";
+import { placeAnchoredPopup } from "../../_shared/src/overlay-utils.js";
+import { EMPTY_TIME_RANGE, containOverlayWheel, formatTimeDisplay, formatTimeFromParts, formatTimeRangeDisplay, getCurrentTime, isTimeColumnScrollTarget, isTimeRangeEmpty, isTimeRangeOrderedValues, isTimeWithinBounds, parseTimeValue, pickEarlierTime, pickLaterTime, resolveTimePickerPortalTarget } from "./time-picker-utils.js";
 import RsTimePickerColumns_default from "./RsTimePickerColumns.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, resolveComponent, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, resolveComponent, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withModifiers } from "vue";
 //#region src/components/time-picker/src/RsTimePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
+var _hoisted_1 = ["for"];
+var _hoisted_2 = {
 	key: 0,
-	class: "rs-field__label"
-};
-var _hoisted_2 = ["for"];
-var _hoisted_3 = {
-	key: 2,
 	class: "rs-field__required",
 	"aria-hidden": "true"
 };
-var _hoisted_4 = { class: "rs-time-picker" };
+var _hoisted_3 = { class: "rs-time-picker" };
+var _hoisted_4 = [
+	"id",
+	"disabled",
+	"aria-invalid",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"aria-readonly"
+];
 var _hoisted_5 = { class: "rs-time-picker__leading" };
 var _hoisted_6 = { class: "rs-time-picker__value" };
-var _hoisted_7 = {
-	key: 0,
-	class: "rs-time-picker__panel"
-};
-var _hoisted_8 = {
+var _hoisted_7 = [
+	"id",
+	"data-placement",
+	"data-rs-theme",
+	"aria-label"
+];
+var _hoisted_8 = { class: "rs-time-picker__panel" };
+var _hoisted_9 = {
 	key: 0,
 	class: "rs-time-picker__range-grid"
 };
-var _hoisted_9 = { class: "rs-time-picker__range-pane" };
-var _hoisted_10 = { class: "rs-time-picker__pane-title" };
-var _hoisted_11 = { class: "rs-time-picker__range-pane" };
-var _hoisted_12 = { class: "rs-time-picker__pane-title" };
-var _hoisted_13 = { class: "rs-time-picker__footer" };
-var _hoisted_14 = { class: "rs-time-picker__actions" };
-var _hoisted_15 = ["disabled"];
+var _hoisted_10 = { class: "rs-time-picker__range-pane" };
+var _hoisted_11 = { class: "rs-time-picker__pane-title" };
+var _hoisted_12 = { class: "rs-time-picker__range-pane" };
+var _hoisted_13 = { class: "rs-time-picker__pane-title" };
+var _hoisted_14 = { class: "rs-time-picker__footer" };
+var _hoisted_15 = { class: "rs-time-picker__footer-start" };
 var _hoisted_16 = {
+	key: 0,
+	class: "rs-time-picker__shortcuts"
+};
+var _hoisted_17 = ["disabled", "onClick"];
+var _hoisted_18 = { class: "rs-time-picker__actions" };
+var _hoisted_19 = ["disabled"];
+var _hoisted_20 = {
 	key: 1,
+	class: "rs-time-picker-field__error",
+	role: "alert"
+};
+var _hoisted_21 = {
+	key: 2,
 	class: "rs-field__hint"
 };
 var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -45,6 +67,7 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	inheritAttrs: false,
 	__name: "RsTimePicker",
 	props: /*@__PURE__*/ mergeModels({
+		name: {},
 		label: {},
 		hint: {},
 		placeholder: {},
@@ -72,8 +95,27 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		},
 		labelPosition: { default: "top" },
 		size: {},
+		radius: {},
 		id: {},
-		invalid: { type: Boolean }
+		invalid: { type: Boolean },
+		showValidateMessage: {
+			type: Boolean,
+			default: true
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		hourCycle: { default: 24 },
+		minuteStep: { default: 1 },
+		disabledTime: {},
+		shortcuts: {},
+		getPopupContainer: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {},
@@ -83,24 +125,52 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		},
 		"openModifiers": {}
 	}),
-	emits: ["update:modelValue", "update:open"],
-	setup(__props) {
+	emits: /*@__PURE__*/ mergeModels([
+		"change",
+		"openChange",
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue", "update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		function isTimeRangeModel(value) {
 			return typeof value === "object" && value !== null && ("start" in value || "end" in value);
 		}
 		const model = useModel(__props, "modelValue");
 		const open = useModel(__props, "open");
 		const props = __props;
-		const fieldId = useId();
+		const emit = __emit;
+		const fallbackId = useId();
+		const panelId = useId();
 		const attrs = useAttrs();
-		const { t } = useRsI18n();
+		const { t, locale } = useRsI18n();
+		const formContext = useRsFormContext();
 		const formItem = useRsFormItemContext();
-		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, { id: props.id }));
-		const isInvalid = computed(() => Boolean(props.invalid || boundToItem.value && formItem?.invalid.value));
-		const triggerId = computed(() => props.id || fieldId);
+		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, {
+			id: props.id,
+			name: props.name
+		}));
+		const autoMessage = ref("");
+		const isInvalid = computed(() => Boolean(props.invalid || boundToItem.value && formItem?.invalid.value || !boundToItem.value && autoMessage.value));
+		const triggerId = computed(() => props.id || fallbackId);
+		const visibleMessage = computed(() => props.embedded || boundToItem.value || props.showValidateMessage === false ? "" : autoMessage.value);
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
 		const triggerIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const clearIconSize = computed(() => Math.max(12, triggerIconSize.value - 2));
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const canInteract = computed(() => !resolvedDisabled.value && !props.readonly);
 		const columnsRef = useTemplateRef("columnsRef");
+		const rootRef = useTemplateRef("rootRef");
+		const triggerRef = useTemplateRef("triggerRef");
+		const contentRef = useTemplateRef("contentRef");
+		const panelTheme = ref();
+		const popup = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			placement: "bottom"
+		});
 		const draftHour = ref(0);
 		const draftMinute = ref(0);
 		const draftSecond = ref(0);
@@ -127,14 +197,22 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		const startMaxTime = computed(() => pickEarlierTime(props.maxTime, draftEndTime.value, props.withSeconds));
 		const endMinTime = computed(() => pickLaterTime(props.minTime, draftStartTime.value, props.withSeconds));
 		const isEmpty = computed(() => props.range ? isTimeRangeEmpty(rangeModel.value) : !singleModel.value);
+		const displayOptions = computed(() => ({
+			hourCycle: props.hourCycle,
+			withSeconds: props.withSeconds,
+			locale: locale.value
+		}));
 		const displayValue = computed(() => {
 			if (props.range) {
-				const formatted = formatTimeRangeDisplay(rangeModel.value, { separator: t("timePicker.separator") });
+				const formatted = formatTimeRangeDisplay(rangeModel.value, {
+					separator: t("timePicker.separator"),
+					...displayOptions.value
+				});
 				if (formatted) return formatted;
 				return props.placeholder ?? t("timePicker.rangePlaceholder");
 			}
 			if (!singleModel.value) return props.placeholder ?? (props.embedded ? t("timePicker.embeddedPlaceholder") : t("timePicker.placeholder"));
-			return singleModel.value;
+			return formatTimeDisplay(singleModel.value, displayOptions.value);
 		});
 		const draftTime = computed({
 			get() {
@@ -148,6 +226,14 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				draftSecond.value = parsed.second;
 			}
 		});
+		const showClear = computed(() => props.clearable && !isEmpty.value && canInteract.value && !props.embedded);
+		const portalTarget = computed(() => resolveTimePickerPortalTarget(props.getPopupContainer, triggerRef.value));
+		const panelStyle = computed(() => ({
+			top: `${popup.value.top}px`,
+			left: `${popup.value.left}px`,
+			"--rs-time-picker-radius": rsRadiusCss(resolvedRadius.value)
+		}));
+		const rootStyle = computed(() => ({ "--rs-time-picker-radius": rsRadiusCss(resolvedRadius.value) }));
 		function syncSingleDraft() {
 			const parsed = parseTimeValue(singleModel.value, props.withSeconds);
 			if (parsed) {
@@ -176,12 +262,16 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			syncSingleDraft();
 		}
 		function isUnitDisabled(unit, value) {
+			if (props.disabledTime?.(unit, value)) return true;
 			return !isTimeWithinBounds(unit === "hour" ? value : draftHour.value, unit === "minute" ? value : draftMinute.value, unit === "second" ? value : draftSecond.value, {
 				minTime: props.minTime,
 				maxTime: props.maxTime,
 				withSeconds: props.withSeconds
 			});
 		}
+		function emitChange() {
+			emit("change", model.value);
+		}
 		function confirmSingleSelection() {
 			if (!isTimeWithinBounds(draftHour.value, draftMinute.value, draftSecond.value, {
 				minTime: props.minTime,
@@ -190,6 +280,7 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			})) return;
 			singleModel.value = formatTimeFromParts(draftHour.value, draftMinute.value, draftSecond.value, props.withSeconds);
 			open.value = false;
+			emitChange();
 		}
 		function confirmRangeSelection() {
 			const start = draftStartTime.value;
@@ -212,6 +303,7 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				end
 			};
 			open.value = false;
+			emitChange();
 		}
 		function confirmSelection() {
 			if (props.range) {
@@ -224,6 +316,27 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			if (props.range) rangeModel.value = { ...EMPTY_TIME_RANGE };
 			else singleModel.value = "";
 			open.value = false;
+			emit("clear");
+			emitChange();
+		}
+		function applyShortcut(shortcut) {
+			if (!canInteract.value) return;
+			const next = shortcut.value();
+			if (props.range) {
+				if (typeof next === "string" || !next.start || !next.end) return;
+				if (!isTimeRangeOrderedValues(next.start, next.end, props.withSeconds)) return;
+				rangeModel.value = {
+					start: next.start,
+					end: next.end
+				};
+				open.value = false;
+				emitChange();
+				return;
+			}
+			if (typeof next !== "string" || !parseTimeValue(next, props.withSeconds)) return;
+			singleModel.value = next;
+			open.value = false;
+			emitChange();
 		}
 		function selectPreset() {
 			if (props.range) {
@@ -238,135 +351,386 @@ var RsTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			draftSecond.value = current.second;
 			confirmSingleSelection();
 		}
-		watch(open, async (isOpen) => {
-			if (!isOpen) return;
-			syncDraftFromModel();
-			if (!props.range) {
-				await nextTick();
-				columnsRef.value?.scrollToSelectionAfterPaint();
+		function clearValidation() {
+			autoMessage.value = "";
+		}
+		function setFieldValue(value) {
+			if (props.range) {
+				if (isTimeRangeModel(value)) {
+					model.value = value;
+					return;
+				}
+				if (Array.isArray(value) && value.length >= 2) {
+					model.value = {
+						start: String(value[0] ?? ""),
+						end: String(value[1] ?? "")
+					};
+					return;
+				}
+				model.value = { ...EMPTY_TIME_RANGE };
+				return;
+			}
+			model.value = value == null ? "" : String(value);
+		}
+		function focus() {
+			triggerRef.value?.focus();
+		}
+		function blur() {
+			triggerRef.value?.blur();
+		}
+		function toggleOpen() {
+			if (!canInteract.value) return;
+			open.value = !open.value;
+		}
+		function onTriggerKeydown(event) {
+			if (!canInteract.value || event.isComposing) return;
+			if (event.key === "Escape" && open.value) {
+				event.preventDefault();
+				open.value = false;
+				return;
 			}
+			if (open.value) return;
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				open.value = true;
+			}
+		}
+		function syncPanelTheme() {
+			const el = triggerRef.value ?? rootRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+		}
+		function placePopup() {
+			const trigger = triggerRef.value;
+			const content = contentRef.value;
+			if (!trigger || !open.value || typeof window === "undefined") return;
+			const anchor = trigger.getBoundingClientRect();
+			const measured = content?.getBoundingClientRect();
+			const prefWidth = props.range ? Math.max(anchor.width, measured?.width || Math.min(448, window.innerWidth - 32)) : Math.max(anchor.width, measured?.width || Math.min(288, window.innerWidth - 32));
+			popup.value = placeAnchoredPopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: prefWidth,
+				height: measured?.height || 280
+			}, {
+				width: window.innerWidth,
+				height: window.innerHeight
+			}, 6);
+		}
+		let frame = 0;
+		let overlayBound = false;
+		let openWatchReady = false;
+		let panelResize;
+		function requestPlace() {
+			if (typeof window === "undefined") return;
+			if (frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placePopup();
+			});
+		}
+		function onDocPointerDown(event) {
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			if (rootRef.value?.contains(target)) return;
+			if (contentRef.value?.contains(target)) return;
+			if (target instanceof Element && target.closest(".rs-time-picker__content")) return;
+			open.value = false;
+		}
+		function onWindowChange(event) {
+			if (!open.value) return;
+			if (event?.type === "scroll" && isTimeColumnScrollTarget(event.target)) return;
+			requestPlace();
+		}
+		function attachPanelObserver() {
+			if (typeof ResizeObserver === "undefined") return;
+			panelResize?.disconnect();
+			if (!contentRef.value) return;
+			panelResize = new ResizeObserver(() => requestPlace());
+			panelResize.observe(contentRef.value);
+		}
+		function attachPanelWheel() {
+			contentRef.value?.addEventListener("wheel", containOverlayWheel, { passive: false });
+		}
+		function detachPanelWheel() {
+			contentRef.value?.removeEventListener("wheel", containOverlayWheel);
+		}
+		function attachOverlay() {
+			if (overlayBound || typeof window === "undefined") return;
+			overlayBound = true;
+			if (typeof document !== "undefined") document.addEventListener("pointerdown", onDocPointerDown);
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		}
+		function detachOverlay() {
+			detachPanelWheel();
+			panelResize?.disconnect();
+			panelResize = void 0;
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (!overlayBound) return;
+			overlayBound = false;
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocPointerDown);
+			if (typeof window !== "undefined") {
+				window.removeEventListener("resize", onWindowChange);
+				window.removeEventListener("scroll", onWindowChange, true);
+			}
+		}
+		async function runValidate(trigger = "submit") {
+			const formRules = formContext?.getFieldRules(props.name) ?? [];
+			const localRules = buildLocalInputRules({ required: props.required });
+			const rules = [...formRules, ...localRules];
+			if (!rules.length) {
+				autoMessage.value = "";
+				return {
+					valid: true,
+					name: props.name
+				};
+			}
+			const result = await runFormFieldRules(model.value, rules, { trigger });
+			autoMessage.value = result.message ?? "";
+			return {
+				valid: result.valid,
+				message: result.message,
+				name: props.name
+			};
+		}
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue: setFieldValue,
+			validate: (trigger) => runValidate(trigger ?? "submit"),
+			clearValidation,
+			setError: (message) => {
+				autoMessage.value = message;
+			}
+		}));
+		__expose({
+			setValue: setFieldValue,
+			clearValidation,
+			setError: (message) => {
+				autoMessage.value = message;
+			},
+			validate: runValidate,
+			focus,
+			blur
 		});
+		watch(open, (isOpen) => {
+			const skipEvent = !openWatchReady;
+			openWatchReady = true;
+			if (typeof document === "undefined" || typeof window === "undefined") return;
+			if (isOpen) {
+				if (!canInteract.value) {
+					open.value = false;
+					return;
+				}
+				syncDraftFromModel();
+				syncPanelTheme();
+				attachOverlay();
+				nextTick(async () => {
+					requestPlace();
+					attachPanelObserver();
+					attachPanelWheel();
+					if (!props.range) {
+						await nextTick();
+						columnsRef.value?.scrollToSelectionAfterPaint();
+					}
+				});
+				if (!skipEvent) emit("openChange", true);
+				return;
+			}
+			detachOverlay();
+			if (!skipEvent) {
+				emit("openChange", false);
+				if (props.name) runValidate("change");
+			}
+		}, { immediate: true });
+		watch(resolvedDisabled, (disabled) => {
+			if (disabled && open.value) open.value = false;
+		});
+		onBeforeUnmount(detachOverlay);
 		return (_ctx, _cache) => {
 			const _component_RsTimePicker = resolveComponent("RsTimePicker", true);
-			return openBlock(), createElementBlock("div", { class: normalizeClass([
-				__props.embedded ? "rs-time-picker-embedded" : "rs-field",
-				`rs-time-picker--${unref(resolvedSize)}`,
-				!__props.embedded && `rs-field--label-${__props.labelPosition}`
-			]) }, [
-				!__props.embedded && __props.label ? (openBlock(), createElementBlock("span", _hoisted_1, [__props.labelPosition === "left" ? (openBlock(), createElementBlock("label", {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass([
+					__props.embedded ? "rs-time-picker-embedded" : "rs-field",
+					`rs-time-picker--${unref(resolvedSize)}`,
+					!__props.embedded && `rs-field--label-${__props.labelPosition}`,
+					{ "rs-time-picker-wrap--clearable": showClear.value }
+				]),
+				style: normalizeStyle(rootStyle.value)
+			}, [
+				!__props.embedded && __props.label ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					class: "rs-field__label",
+					for: triggerId.value
+				}, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", _hoisted_2, "*")) : createCommentVNode("", true)], 8, _hoisted_1)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_3, [createElementVNode("button", mergeProps(__props.embedded ? void 0 : unref(attrs), {
+					id: __props.embedded ? void 0 : triggerId.value,
+					ref_key: "triggerRef",
+					ref: triggerRef,
+					type: "button",
+					class: ["rs-time-picker__trigger", {
+						"rs-time-picker__trigger--placeholder": isEmpty.value,
+						"rs-time-picker__trigger--embedded": __props.embedded,
+						"rs-time-picker__trigger--invalid": !__props.embedded && isInvalid.value
+					}],
+					disabled: resolvedDisabled.value,
+					"aria-invalid": !__props.embedded && isInvalid.value ? true : void 0,
+					"aria-label": __props.ariaLabel,
+					"aria-haspopup": "dialog",
+					"aria-expanded": open.value ? "true" : "false",
+					"aria-controls": open.value ? unref(panelId) : void 0,
+					"aria-readonly": __props.readonly || void 0,
+					onClick: toggleOpen,
+					onKeydown: onTriggerKeydown,
+					onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus")),
+					onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur"))
+				}), [createElementVNode("span", _hoisted_5, [!__props.embedded ? (openBlock(), createBlock(RsIcon_default, {
+					key: 0,
+					name: "clock",
+					size: triggerIconSize.value,
+					class: "rs-time-picker__icon",
+					"aria-hidden": "true"
+				}, null, 8, ["size"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_6, toDisplayString(displayValue.value), 1)]), createVNode(RsIcon_default, {
+					name: "chevron-down",
+					size: triggerIconSize.value,
+					class: "rs-time-picker__chevron",
+					"aria-hidden": "true"
+				}, null, 8, ["size"])], 16, _hoisted_4), showClear.value ? (openBlock(), createBlock(RsButton_default, {
+					key: 0,
+					class: "rs-time-picker__clear",
+					variant: "text",
+					bordered: false,
+					size: "ssm",
+					radius: "full",
+					icon: "x",
+					"icon-size": clearIconSize.value,
+					"icon-only": "",
+					"aria-label": __props.range ? unref(t)("timePicker.rangeClear") : unref(t)("timePicker.clear"),
+					onPointerdown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+					onClick: withModifiers(clearSelection, ["stop"])
+				}, null, 8, ["icon-size", "aria-label"])) : createCommentVNode("", true)]),
+				(openBlock(), createBlock(Teleport, { to: portalTarget.value }, [open.value && canInteract.value ? (openBlock(), createElementBlock("div", {
 					key: 0,
-					for: unref(fieldId)
-				}, toDisplayString(__props.label), 9, _hoisted_2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.label), 1)], 64)), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_4, [createVNode(unref(PopoverRoot), {
-					open: open.value,
-					"onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event),
-					modal: !__props.embedded
-				}, {
-					default: withCtx(() => [createVNode(unref(PopoverTrigger), mergeProps(__props.embedded ? void 0 : unref(attrs), {
-						id: __props.embedded ? void 0 : triggerId.value,
+					id: unref(panelId),
+					ref_key: "contentRef",
+					ref: contentRef,
+					class: normalizeClass(["rs-time-picker__content", {
+						"rs-time-picker__content--range": __props.range && !__props.embedded,
+						"rs-time-picker__content--embedded": __props.embedded
+					}]),
+					"data-placement": popup.value.placement,
+					"data-rs-theme": panelTheme.value,
+					style: normalizeStyle(panelStyle.value),
+					role: "dialog",
+					"aria-label": __props.label || __props.ariaLabel || (__props.range ? unref(t)("timePicker.rangePlaceholder") : unref(t)("timePicker.placeholder"))
+				}, [createElementVNode("div", _hoisted_8, [__props.range ? (openBlock(), createElementBlock("div", _hoisted_9, [createElementVNode("section", _hoisted_10, [createElementVNode("span", _hoisted_11, toDisplayString(unref(t)("timePicker.rangeStart")), 1), createVNode(_component_RsTimePicker, {
+					modelValue: draftStartTime.value,
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => draftStartTime.value = $event),
+					embedded: "",
+					size: unref(resolvedSize),
+					radius: unref(resolvedRadius),
+					"with-seconds": __props.withSeconds,
+					"hour-cycle": __props.hourCycle,
+					"minute-step": __props.minuteStep,
+					"min-time": __props.minTime,
+					"max-time": startMaxTime.value,
+					disabled: resolvedDisabled.value,
+					"disabled-time": __props.disabledTime
+				}, null, 8, [
+					"modelValue",
+					"size",
+					"radius",
+					"with-seconds",
+					"hour-cycle",
+					"minute-step",
+					"min-time",
+					"max-time",
+					"disabled",
+					"disabled-time"
+				])]), createElementVNode("section", _hoisted_12, [createElementVNode("span", _hoisted_13, toDisplayString(unref(t)("timePicker.rangeEnd")), 1), createVNode(_component_RsTimePicker, {
+					modelValue: draftEndTime.value,
+					"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => draftEndTime.value = $event),
+					embedded: "",
+					size: unref(resolvedSize),
+					radius: unref(resolvedRadius),
+					"with-seconds": __props.withSeconds,
+					"hour-cycle": __props.hourCycle,
+					"minute-step": __props.minuteStep,
+					"min-time": endMinTime.value,
+					"max-time": __props.maxTime,
+					disabled: resolvedDisabled.value,
+					"disabled-time": __props.disabledTime
+				}, null, 8, [
+					"modelValue",
+					"size",
+					"radius",
+					"with-seconds",
+					"hour-cycle",
+					"minute-step",
+					"min-time",
+					"max-time",
+					"disabled",
+					"disabled-time"
+				])])])) : (openBlock(), createBlock(RsTimePickerColumns_default, {
+					key: 1,
+					ref_key: "columnsRef",
+					ref: columnsRef,
+					modelValue: draftTime.value,
+					"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => draftTime.value = $event),
+					second: __props.withSeconds,
+					size: unref(resolvedSize),
+					disabled: resolvedDisabled.value,
+					"hour-cycle": __props.hourCycle,
+					"minute-step": __props.minuteStep,
+					"is-unit-disabled": isUnitDisabled
+				}, null, 8, [
+					"modelValue",
+					"second",
+					"size",
+					"disabled",
+					"hour-cycle",
+					"minute-step"
+				])), createElementVNode("footer", _hoisted_14, [createElementVNode("div", _hoisted_15, [__props.shortcuts?.length ? (openBlock(), createElementBlock("div", _hoisted_16, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.shortcuts, (item, index) => {
+					return openBlock(), createElementBlock("button", {
+						key: `${item.label}-${index}`,
 						type: "button",
-						class: ["rs-time-picker__trigger", {
-							"rs-time-picker__trigger--placeholder": isEmpty.value,
-							"rs-time-picker__trigger--embedded": __props.embedded,
-							"rs-time-picker__trigger--invalid": !__props.embedded && isInvalid.value
-						}],
-						disabled: __props.disabled,
-						"aria-invalid": !__props.embedded && isInvalid.value ? true : void 0
-					}), {
-						default: withCtx(() => [createElementVNode("span", _hoisted_5, [!__props.embedded ? (openBlock(), createBlock(RsIcon_default, {
-							key: 0,
-							name: "clock",
-							size: triggerIconSize.value,
-							class: "rs-time-picker__icon"
-						}, null, 8, ["size"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_6, toDisplayString(displayValue.value), 1)]), createVNode(RsIcon_default, {
-							name: "chevron-down",
-							size: triggerIconSize.value,
-							class: "rs-time-picker__chevron"
-						}, null, 8, ["size"])]),
-						_: 1
-					}, 16, [
-						"id",
-						"class",
-						"disabled",
-						"aria-invalid"
-					]), createVNode(unref(PopoverPortal), null, {
-						default: withCtx(() => [createVNode(unref(PopoverContent), {
-							class: normalizeClass(["rs-time-picker__content", {
-								"rs-time-picker__content--range": __props.range && !__props.embedded,
-								"rs-time-picker__content--embedded": __props.embedded
-							}]),
-							"side-offset": 6,
-							align: "start"
-						}, {
-							default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_7, [__props.range ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode("section", _hoisted_9, [createElementVNode("span", _hoisted_10, toDisplayString(unref(t)("timePicker.rangeStart")), 1), createVNode(_component_RsTimePicker, {
-								modelValue: draftStartTime.value,
-								"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => draftStartTime.value = $event),
-								embedded: "",
-								size: unref(resolvedSize),
-								"with-seconds": __props.withSeconds,
-								"min-time": __props.minTime,
-								"max-time": startMaxTime.value,
-								disabled: __props.disabled
-							}, null, 8, [
-								"modelValue",
-								"size",
-								"with-seconds",
-								"min-time",
-								"max-time",
-								"disabled"
-							])]), createElementVNode("section", _hoisted_11, [createElementVNode("span", _hoisted_12, toDisplayString(unref(t)("timePicker.rangeEnd")), 1), createVNode(_component_RsTimePicker, {
-								modelValue: draftEndTime.value,
-								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => draftEndTime.value = $event),
-								embedded: "",
-								size: unref(resolvedSize),
-								"with-seconds": __props.withSeconds,
-								"min-time": endMinTime.value,
-								"max-time": __props.maxTime,
-								disabled: __props.disabled
-							}, null, 8, [
-								"modelValue",
-								"size",
-								"with-seconds",
-								"min-time",
-								"max-time",
-								"disabled"
-							])])])) : (openBlock(), createBlock(RsTimePickerColumns_default, {
-								key: 1,
-								ref_key: "columnsRef",
-								ref: columnsRef,
-								modelValue: draftTime.value,
-								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => draftTime.value = $event),
-								second: __props.withSeconds,
-								size: unref(resolvedSize),
-								disabled: __props.disabled,
-								"is-unit-disabled": isUnitDisabled
-							}, null, 8, [
-								"modelValue",
-								"second",
-								"size",
-								"disabled"
-							])), createElementVNode("footer", _hoisted_13, [createElementVNode("button", {
-								type: "button",
-								class: "rs-time-picker__link",
-								onClick: selectPreset
-							}, toDisplayString(__props.range ? unref(t)("timePicker.rangePreset") : unref(t)("timePicker.now")), 1), createElementVNode("div", _hoisted_14, [createElementVNode("button", {
-								type: "button",
-								class: "rs-time-picker__ghost",
-								onClick: clearSelection
-							}, toDisplayString(__props.range ? unref(t)("timePicker.rangeClear") : unref(t)("timePicker.clear")), 1), createElementVNode("button", {
-								type: "button",
-								class: "rs-time-picker__confirm",
-								disabled: __props.range && (!draftStartTime.value || !draftEndTime.value),
-								onClick: confirmSelection
-							}, toDisplayString(unref(t)("timePicker.confirm")), 9, _hoisted_15)])])])) : createCommentVNode("", true)]),
-							_: 1
-						}, 8, ["class"])]),
-						_: 1
-					})]),
-					_: 1
-				}, 8, ["open", "modal"])]),
-				!__props.embedded && __props.hint ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
-			], 2);
+						class: "rs-time-picker__shortcut",
+						disabled: resolvedDisabled.value,
+						onClick: ($event) => applyShortcut(item)
+					}, toDisplayString(item.label), 9, _hoisted_17);
+				}), 128))])) : (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					class: "rs-time-picker__link",
+					onClick: selectPreset
+				}, toDisplayString(__props.range ? unref(t)("timePicker.rangePreset") : unref(t)("timePicker.now")), 1))]), createElementVNode("div", _hoisted_18, [createElementVNode("button", {
+					type: "button",
+					class: "rs-time-picker__ghost",
+					onClick: clearSelection
+				}, toDisplayString(__props.range ? unref(t)("timePicker.rangeClear") : unref(t)("timePicker.clear")), 1), createElementVNode("button", {
+					type: "button",
+					class: "rs-time-picker__confirm",
+					disabled: __props.range && (!draftStartTime.value || !draftEndTime.value),
+					onClick: confirmSelection
+				}, toDisplayString(unref(t)("timePicker.confirm")), 9, _hoisted_19)])])])], 14, _hoisted_7)) : createCommentVNode("", true)], 8, ["to"])),
+				visibleMessage.value ? (openBlock(), createElementBlock("p", _hoisted_20, toDisplayString(visibleMessage.value), 1)) : createCommentVNode("", true),
+				!__props.embedded && __props.hint ? (openBlock(), createElementBlock("span", _hoisted_21, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+			], 6);
 		};
 	}
 });