import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { t as Input_default } from "./input-CwDp-vE8.js";
import { t as FieldFrame_default } from "./field-frame-DhCOWcMP.js";
import { computed, createBlock, createElementVNode, createVNode, defineComponent, mergeModels, openBlock, ref, unref, useModel, watchEffect, withCtx } from "vue";
import { Clock } from "@lucide/vue";
//#region src/components/compositions/elements/picker/TimePicker.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["data-element-name"];
var TimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "TimePicker",
	props: /* @__PURE__ */ mergeModels({
		modelValue: {},
		id: {},
		name: {},
		label: {},
		hideLabel: { type: Boolean },
		required: { type: Boolean },
		readonly: { type: Boolean },
		disabled: { type: Boolean },
		helpText: {},
		errors: { default: () => [] },
		minuteStep: {}
	}, {
		"modelValue": {},
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		/**
		* Props-driven time picker composition. Two numeric inputs (hours /
		* minutes) with a leading clock icon. Round-trips an `HH:mm` string.
		* `minuteStep` is applied to the minute input's `step` attribute.
		*
		*   <TimePicker v-model="opensAt" label="Opens at" />
		*/
		const props = __props;
		const model = useModel(__props, "modelValue");
		const hour = ref("");
		const minute = ref("");
		watchEffect(() => {
			const value = model.value;
			if (!value) {
				hour.value = "";
				minute.value = "";
				return;
			}
			const [hh, mm] = value.split(":");
			hour.value = hh ?? "";
			minute.value = (mm ?? "").slice(0, 2);
		});
		function pad(value) {
			return Math.max(0, parseInt(value, 10) || 0).toString().padStart(2, "0");
		}
		function emitCombined() {
			if (hour.value === "" && minute.value === "") {
				model.value = "";
				return;
			}
			model.value = `${pad(hour.value || "0")}:${pad(minute.value || "0")}`;
		}
		function onHourInput(value) {
			hour.value = Math.min(23, Math.max(0, parseInt(String(value ?? ""), 10) || 0)).toString();
			emitCombined();
		}
		function onMinuteInput(value) {
			minute.value = Math.min(59, Math.max(0, parseInt(String(value ?? ""), 10) || 0)).toString();
			emitCombined();
		}
		const step = computed(() => {
			const raw = props.minuteStep;
			return typeof raw === "number" && raw > 0 ? raw : 1;
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(FieldFrame_default), {
				label: __props.label,
				required: __props.required,
				"hide-label": __props.hideLabel,
				for: __props.id,
				"help-text": __props.helpText,
				errors: __props.errors
			}, {
				default: withCtx(() => [createElementVNode("div", {
					class: "flex items-center gap-2",
					"data-element-name": __props.name ?? void 0
				}, [
					createVNode(unref(Clock), { class: "size-4 text-muted-foreground" }),
					createVNode(unref(Input_default), {
						type: "number",
						min: "0",
						max: "23",
						step: "1",
						"model-value": hour.value,
						class: "w-20",
						disabled: __props.disabled,
						readonly: __props.readonly,
						required: __props.required,
						placeholder: "HH",
						"data-testid": "time-hour",
						"onUpdate:modelValue": onHourInput
					}, null, 8, [
						"model-value",
						"disabled",
						"readonly",
						"required"
					]),
					_cache[0] || (_cache[0] = createElementVNode("span", { class: "text-muted-foreground" }, ":", -1)),
					createVNode(unref(Input_default), {
						type: "number",
						min: "0",
						max: "59",
						step: step.value,
						"model-value": minute.value,
						class: "w-20",
						disabled: __props.disabled,
						readonly: __props.readonly,
						required: __props.required,
						placeholder: "MM",
						"data-testid": "time-minute",
						"onUpdate:modelValue": onMinuteInput
					}, null, 8, [
						"step",
						"model-value",
						"disabled",
						"readonly",
						"required"
					])
				], 8, _hoisted_1)]),
				_: 1
			}, 8, [
				"label",
				"required",
				"hide-label",
				"for",
				"help-text",
				"errors"
			]);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/picker/TimePicker.vue
var TimePicker_exports = /* @__PURE__ */ __exportAll({ default: () => TimePicker_default });
var TimePicker_default = TimePicker_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { TimePicker_exports as n, TimePicker_default as t };

//# sourceMappingURL=TimePicker-CLlTEHaV.js.map