@ac-design/design-system 2.2.0 → 2.3.0

package/dist/lib/components/AcTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,15 @@
-import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, nextTick as f, normalizeClass as p, normalizeStyle as ee, onBeforeUnmount as te, onMounted as ne, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useAttrs as re, useId as ie, useModel as y, watch as ae, withCtx as oe } from "vue";
-import { Clock as se, X as ce } from "@lucide/vue";
+import { fixedFrame as e } from "./fixedFrame.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeClass as m, onBeforeUnmount as ee, onMounted as te, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as ne, useId as re, useModel as x, watch as ie, withCtx as ae } from "vue";
+import { Clock as oe, X as se } from "@lucide/vue";
 //#region src/lib/components/AcTimePicker.vue?vue&type=script&setup=true&lang.ts
-var le = ["for"], ue = {
-	key: 0,
+var ce = ["for"], le = { key: 0 }, ue = {
+	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, de = { class: "relative" }, fe = [
+}, de = {
+	key: 2,
+	class: "relative"
+}, fe = [
 	"id",
 	"disabled",
 	"aria-expanded",
@@ -13,27 +17,33 @@ var le = ["for"], ue = {
 	"aria-describedby",
 	"aria-invalid",
 	"aria-required"
-], pe = ["aria-label"], me = ["name", "value"], he = ["aria-label"], ge = { class: "flex h-48 min-h-0 shrink-0 items-stretch justify-center gap-1" }, _e = {
+], pe = ["aria-label"], me = [
+	"role",
+	"aria-modal",
+	"aria-label",
+	"aria-describedby",
+	"inert"
+], he = { class: "flex h-48 min-h-0 shrink-0 items-stretch justify-center gap-1" }, ge = {
 	key: 0,
 	class: "mx-2 mt-6 h-32 w-px shrink-0 self-center bg-border",
 	"aria-hidden": "true"
-}, ve = {
+}, _e = {
 	key: 1,
 	class: "mt-6 self-center font-bold text-heading/50",
 	"aria-hidden": "true"
-}, ye = ["data-col"], be = {
+}, ve = ["data-col"], ye = {
 	class: "mb-2 text-xm font-bold tracking-wider text-heading/50 uppercase",
 	"aria-hidden": "true"
-}, xe = ["aria-label", "onKeydown"], Se = { class: "flex w-full flex-col items-center py-20" }, Ce = [
+}, be = ["aria-label", "onKeydown"], xe = { class: "flex w-full flex-col items-center py-20" }, Se = [
 	"data-value",
 	"tabindex",
 	"aria-selected",
 	"aria-disabled",
 	"onClick"
-], we = { class: "mt-4 flex shrink-0 justify-center gap-2 border-t border-border pt-4" }, Te = ["disabled"], b = 86399, x = /*@__PURE__*/ l({
+], Ce = { class: "mt-4 flex shrink-0 justify-center gap-2 border-t border-border pt-4" }, we = ["disabled"], Te = ["name", "value"], S = 86399, C = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "AcTimePicker",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ d({
 		label: { default: "" },
 		placeholder: { default: "Choose time" },
 		hourCycle: { default: 24 },
@@ -59,7 +69,11 @@ var le = ["for"], ue = {
 		errorMsg: { default: "" },
 		hint: { default: "" },
 		size: { default: "normal" },
-		name: { default: "" }
+		name: { default: "" },
+		inline: {
+			type: Boolean,
+			default: !1
+		}
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {},
@@ -70,19 +84,19 @@ var le = ["for"], ue = {
 		openModifiers: {}
 	}),
 	emits: ["update:modelValue", "update:open"],
-	setup(l, { expose: u }) {
-		let x = l, S = y(l, "modelValue"), C = y(l, "open"), Ee = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/, w = ie(), T = re(), De = r(() => ({
-			class: T.class,
-			style: T.style
-		})), Oe = r(() => {
-			let { class: e, style: t, ...n } = T;
+	setup(u, { expose: d }) {
+		let C = u, w = x(u, "modelValue"), T = x(u, "open"), Ee = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/, E = re(), D = ne(), De = i(() => ({
+			class: D.class,
+			style: D.style
+		})), O = i(() => {
+			let { class: e, style: t, ...n } = D;
 			return n;
-		}), E = `${w}-label`, D = `${w}-value`, O = `${w}-msg`, k = `${w}-hint`, A = h(null), j = h(null), M = h(null), N = h({
+		}), k = `${E}-label`, A = `${E}-value`, j = `${E}-msg`, M = `${E}-hint`, N = g(null), P = g(null), F = g(null), I = g({
 			left: 0,
 			maxHeight: 400,
 			minWidth: 0
-		}), P = h(!1), F = r(() => C.value || P.value), I = r(() => G(S.value)), L = r(() => G(x.min) ?? 0), R = r(() => G(x.max) ?? b), z = r(() => I.value === null ? null : K(I.value)), B = r(() => x.hourCycle === 12), V = r(() => I.value === null ? "" : Ne(I.value)), ke = r(() => [x.hint && k, x.errorMsg && O].filter(Boolean).join(" ") || void 0), Ae = r(() => x.label ? `${x.label}: choose time` : "Choose time"), je = r(() => q(Fe())), H = r(() => {
-			let e = z.value, t = e?.h ?? null, n = e?.m ?? null, r = t === null ? 0 : t >= 12 ? 12 : 0, i = [], a = B.value ? [
+		}), L = g(!1), Oe = i(() => T.value || L.value), R = i(() => U(w.value)), z = i(() => U(C.min) ?? 0), ke = i(() => U(C.max) ?? S), Ae = i(() => R.value === null ? null : W(R.value)), B = i(() => C.hourCycle === 12), je = i(() => R.value === null ? "" : Le(R.value)), Me = i(() => [C.hint && M, C.errorMsg && j].filter(Boolean).join(" ") || void 0), Ne = i(() => C.label ? `${C.label}: choose time` : "Choose time"), Pe = i(() => G(ze())), Fe = i(() => {
+			let e = Ae.value, t = e?.h ?? null, n = e?.m ?? null, r = t === null ? 0 : t >= 12 ? 12 : 0, i = [], a = B.value ? [
 				0,
 				1,
 				2,
@@ -95,7 +109,7 @@ var le = ["for"], ue = {
 				9,
 				10,
 				11
-			].map((e) => e + r) : W(0, 23, 1);
+			].map((e) => e + r) : H(0, 23, 1);
 			i.push({
 				unit: "h",
 				heading: "Hrs",
@@ -103,35 +117,35 @@ var le = ["for"], ue = {
 				selected: t,
 				cells: a.map((e) => ({
 					value: e,
-					text: U(B.value ? e % 12 || 12 : e),
-					disabled: !J(e * 3600, e * 3600 + 3599)
+					text: V(B.value ? e % 12 || 12 : e),
+					disabled: !K(e * 3600, e * 3600 + 3599)
 				}))
 			});
-			let o = t ?? Pe();
+			let o = t ?? Re();
 			if (i.push({
 				unit: "m",
 				heading: "Min",
 				name: "Minutes",
 				selected: n,
-				cells: W(0, 59, Math.max(1, x.minuteStep)).map((e) => {
+				cells: H(0, 59, Math.max(1, C.minuteStep)).map((e) => {
 					let t = o * 3600 + e * 60;
 					return {
 						value: e,
-						text: U(e),
-						disabled: !J(t, x.showSeconds ? t + 59 : t)
+						text: V(e),
+						disabled: !K(t, C.showSeconds ? t + 59 : t)
 					};
 				})
-			}), x.showSeconds) {
+			}), C.showSeconds) {
 				let t = n ?? 0;
 				i.push({
 					unit: "s",
 					heading: "Sec",
 					name: "Seconds",
 					selected: e?.s ?? null,
-					cells: W(0, 59, 1).map((e) => ({
+					cells: H(0, 59, 1).map((e) => ({
 						value: e,
-						text: U(e),
-						disabled: !q(o * 3600 + t * 60 + e)
+						text: V(e),
+						disabled: !G(o * 3600 + t * 60 + e)
 					}))
 				});
 			}
@@ -143,23 +157,23 @@ var le = ["for"], ue = {
 				cells: [{
 					value: 0,
 					text: "AM",
-					disabled: !J(0, 43199)
+					disabled: !K(0, 43199)
 				}, {
 					value: 12,
 					text: "PM",
-					disabled: !J(43200, b)
+					disabled: !K(43200, S)
 				}]
 			}), i;
 		});
-		function U(e) {
+		function V(e) {
 			return String(e).padStart(2, "0");
 		}
-		function W(e, t, n) {
+		function H(e, t, n) {
 			let r = [];
 			for (let i = e; i <= t; i += n) r.push(i);
 			return r;
 		}
-		function G(e) {
+		function U(e) {
 			let t = e ? Ee.exec(e.trim()) : null;
 			if (!t) return null;
 			let [n, r, i] = [
@@ -169,86 +183,87 @@ var le = ["for"], ue = {
 			];
 			return n > 23 || r > 59 || i > 59 ? null : n * 3600 + r * 60 + i;
 		}
-		function K(e) {
+		function W(e) {
 			return {
 				h: Math.floor(e / 3600),
 				m: Math.floor(e % 3600 / 60),
 				s: e % 60
 			};
 		}
-		function Me(e) {
-			let { h: t, m: n, s: r } = K(e);
-			return x.showSeconds ? `${U(t)}:${U(n)}:${U(r)}` : `${U(t)}:${U(n)}`;
+		function Ie(e) {
+			let { h: t, m: n, s: r } = W(e);
+			return C.showSeconds ? `${V(t)}:${V(n)}:${V(r)}` : `${V(t)}:${V(n)}`;
 		}
-		function Ne(e) {
-			let { h: t, m: n, s: r } = K(e), i = x.showSeconds ? `${U(n)}:${U(r)}` : U(n);
-			return B.value ? `${U(t % 12 || 12)}:${i} ${t >= 12 ? "PM" : "AM"}` : `${U(t)}:${i}`;
+		function Le(e) {
+			let { h: t, m: n, s: r } = W(e), i = C.showSeconds ? `${V(n)}:${V(r)}` : V(n);
+			return B.value ? `${V(t % 12 || 12)}:${i} ${t >= 12 ? "PM" : "AM"}` : `${V(t)}:${i}`;
 		}
-		function q(e) {
-			return e >= L.value && e <= R.value;
+		function G(e) {
+			return e >= z.value && e <= ke.value;
 		}
-		function J(e, t) {
-			return t >= L.value && e <= R.value;
+		function K(e, t) {
+			return t >= z.value && e <= ke.value;
 		}
-		function Pe() {
-			return Math.floor(L.value / 3600);
+		function Re() {
+			return Math.floor(z.value / 3600);
 		}
-		function Fe() {
-			let e = /* @__PURE__ */ new Date(), t = Math.max(1, x.minuteStep), n = Math.floor(e.getMinutes() / t) * t;
-			return e.getHours() * 3600 + n * 60 + (x.showSeconds ? e.getSeconds() : 0);
+		function ze() {
+			let e = /* @__PURE__ */ new Date(), t = Math.max(1, C.minuteStep), n = Math.floor(e.getMinutes() / t) * t;
+			return e.getHours() * 3600 + n * 60 + (C.showSeconds ? e.getSeconds() : 0);
 		}
-		function Ie(e) {
-			if (q(e) && Le(e)) return e;
-			let { h: t } = K(e), n = Math.max(1, x.minuteStep) * 60, r = [];
-			for (let e = t * 3600; e < (t + 1) * 3600; e += n) if (x.showSeconds) for (let t = 0; t < 60; t++) r.push(e + t);
+		function Be(e) {
+			if (G(e) && Ve(e)) return e;
+			let { h: t } = W(e), n = Math.max(1, C.minuteStep) * 60, r = [];
+			for (let e = t * 3600; e < (t + 1) * 3600; e += n) if (C.showSeconds) for (let t = 0; t < 60; t++) r.push(e + t);
 			else r.push(e);
-			let i = r.filter(q);
+			let i = r.filter(G);
 			return i.length ? i.reduce((t, n) => Math.abs(n - e) < Math.abs(t - e) ? n : t) : null;
 		}
-		function Le(e) {
-			let { m: t, s: n } = K(e);
-			return t % Math.max(1, x.minuteStep) === 0 && (x.showSeconds || n === 0);
+		function Ve(e) {
+			let { m: t, s: n } = W(e);
+			return t % Math.max(1, C.minuteStep) === 0 && (C.showSeconds || n === 0);
 		}
-		function Re(e, t) {
-			let { h: n, m: r, s: i } = z.value ?? K(Ie(L.value) ?? L.value);
+		function He(e, t) {
+			if (C.disabled) return;
+			let { h: n, m: r, s: i } = Ae.value ?? W(Be(z.value) ?? z.value);
 			e === "h" ? n = t : e === "m" ? r = t : e === "s" ? i = t : n = n % 12 + t;
-			let a = Ie(n * 3600 + r * 60 + (x.showSeconds ? i : 0));
-			a !== null && (S.value = Me(a));
+			let a = Be(n * 3600 + r * 60 + (C.showSeconds ? i : 0));
+			a !== null && (w.value = Ie(a));
 		}
-		function ze() {
-			S.value = Me(Fe()), f(() => Z("smooth"));
-		}
-		function Be() {
-			S.value = null, j.value?.focus();
-		}
-		function Y() {
-			let e = j.value;
-			if (!e) return;
-			let t = e.getBoundingClientRect(), n = M.value?.offsetWidth ?? 240, r = M.value?.offsetHeight ?? 320, i = window.innerHeight - t.bottom - 6 - 8, a = t.top - 6 - 8, o = i < r && a > i, s = Math.max(8, Math.min(t.left, window.innerWidth - n - 8)), c = Math.min(t.width, 448);
-			N.value = o ? {
-				bottom: window.innerHeight - t.top + 6,
-				left: s,
-				maxHeight: Math.max(200, a),
-				minWidth: c
+		function Ue() {
+			C.disabled || (w.value = Ie(ze()), p(() => X("smooth")));
+		}
+		function We() {
+			w.value = null, P.value?.focus();
+		}
+		function q() {
+			let t = P.value;
+			if (!t) return;
+			let n = t.getBoundingClientRect(), r = e(), i = F.value?.offsetWidth ?? 240, a = F.value?.offsetHeight ?? 320, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = Math.max(8, Math.min(n.left - r.left, r.width - i - 8)), u = Math.min(n.width, 448);
+			I.value = c ? {
+				bottom: r.bottom - n.top + 6,
+				left: l,
+				maxHeight: Math.max(200, s),
+				minWidth: u
 			} : {
-				top: t.bottom + 6,
-				left: s,
-				maxHeight: Math.max(200, i),
-				minWidth: c
+				top: n.bottom + 6 - r.top,
+				left: l,
+				maxHeight: Math.max(200, o),
+				minWidth: u
 			};
 		}
-		function Ve() {
-			x.disabled || C.value || (C.value = !0);
+		function Ge() {
+			C.disabled || T.value || (T.value = !0);
 		}
-		function X(e = !0) {
-			C.value && (C.value = !1, e && j.value?.focus());
+		function J(e = !0) {
+			T.value && (T.value = !1, e && P.value?.focus());
 		}
-		async function He() {
-			Y(), Ze(), await f(), Y(), Z("instant"), We(0);
+		async function Y() {
+			q(), $e(), await p(), q(), X("instant"), Z(0);
 		}
-		function Z(e) {
+		function X(e) {
 			let t = e === "smooth" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-			M.value?.querySelectorAll("[role=listbox]").forEach((e) => {
+			F.value?.querySelectorAll("[role=listbox]").forEach((e) => {
 				let n = e.querySelector("[aria-selected=true]") ?? e.querySelector("[aria-disabled=false]");
 				n && e.scrollTo({
 					top: n.offsetTop - (e.clientHeight - n.offsetHeight) / 2,
@@ -256,22 +271,22 @@ var le = ["for"], ue = {
 				});
 			});
 		}
-		function Ue(e) {
-			return [...M.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
+		function Ke(e) {
+			return [...F.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
 		}
-		function We(e) {
-			let t = Ue(e);
+		function Z(e) {
+			let t = Ke(e);
 			(t.find((e) => e.tabIndex === 0) ?? t[0])?.focus({ preventScroll: !0 });
 		}
-		function Ge(e, t) {
+		function qe(e, t) {
 			return (e.cells.find((t) => t.value === e.selected) ?? e.cells.find((e) => !e.disabled)) === t ? 0 : -1;
 		}
-		function Ke(e, t, n) {
-			n.disabled || (Re(t.unit, n.value), f(() => {
-				Z("smooth"), Ue(e).find((e) => e.tabIndex === 0)?.focus({ preventScroll: !0 });
+		function Je(e, t, n) {
+			n.disabled || (He(t.unit, n.value), p(() => {
+				X("smooth"), Ke(e).find((e) => e.tabIndex === 0)?.focus({ preventScroll: !0 });
 			}));
 		}
-		function qe(e, t, n) {
+		function Ye(e, t, n) {
 			let r = n.cells.filter((e) => !e.disabled);
 			if (!r.length) return;
 			let i = r.findIndex((e) => e.value === n.selected), a = {
@@ -285,171 +300,189 @@ var le = ["for"], ue = {
 			if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
 				e.preventDefault();
 				let n = t + (e.key === "ArrowRight" ? 1 : -1);
-				n >= 0 && n < H.value.length && We(n);
+				n >= 0 && n < Fe.value.length && Z(n);
 				return;
 			}
 			if (e.key === "Enter") {
 				e.preventDefault();
 				let t = n.cells.find((t) => String(t.value) === e.target.dataset.value);
-				t && !t.disabled && Re(n.unit, t.value), X();
+				t && !t.disabled && He(n.unit, t.value), J();
 				return;
 			}
 			if (!(e.key in a)) return;
 			e.preventDefault();
 			let o = r[Math.max(0, Math.min(r.length - 1, a[e.key]))];
-			Ke(t, n, o);
+			Je(t, n, o);
 		}
-		function Je(e) {
+		function Xe(e) {
+			if (C.inline) return;
 			if (e.key === "Escape") {
-				e.preventDefault(), e.stopPropagation(), X();
+				e.preventDefault(), e.stopPropagation(), J();
 				return;
 			}
-			if (e.key !== "Tab" || !M.value) return;
-			let t = [...M.value.querySelectorAll("button:not([disabled])")].filter((e) => e.tabIndex >= 0);
+			if (e.key !== "Tab" || !F.value) return;
+			let t = [...F.value.querySelectorAll("button:not([disabled])")].filter((e) => e.tabIndex >= 0);
 			if (!t.length) return;
 			let n = t[0], r = t[t.length - 1];
 			e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
 		}
-		function Ye(e) {
-			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), Ve());
+		function Ze(e) {
+			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), Ge());
 		}
-		function Xe(e) {
+		function Qe(e) {
 			let t = e.target;
-			A.value?.contains(t) || M.value?.contains(t) || X(!1);
+			N.value?.contains(t) || F.value?.contains(t) || J(!1);
 		}
 		function Q(e) {
-			e?.target instanceof Node && M.value?.contains(e.target) || Y();
+			e?.target instanceof Node && F.value?.contains(e.target) || q();
 		}
-		function Ze() {
-			document.addEventListener("pointerdown", Xe, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q);
+		function $e() {
+			document.addEventListener("pointerdown", Qe, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q);
 		}
 		function $() {
-			document.removeEventListener("pointerdown", Xe, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+			document.removeEventListener("pointerdown", Qe, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+		}
+		async function et() {
+			await p(), X("instant");
 		}
-		return ae(C, (e) => e ? He() : $()), ne(() => {
-			C.value && He();
-		}), te($), u({ focus: () => j.value?.focus() }), (r, u) => (m(), o("div", d({
+		return ie(T, (e) => e ? Y() : $()), ie(w, () => C.inline && p(() => X("smooth"))), te(() => {
+			C.inline ? X("instant") : T.value && Y();
+		}), ee($), d({
+			focus: () => C.inline ? Z(0) : P.value?.focus(),
+			scrollToSelected: et
+		}), (e, i) => (h(), s("div", f({
 			ref_key: "root",
-			ref: A
+			ref: N
 		}, De.value, {
-			class: ["w-full", l.disabled && "opacity-50"],
+			class: ["w-full", u.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-time-picker"
 		}), [
-			l.label ? (m(), o("label", {
+			u.label || e.$slots["label-icon"] || e.$slots["label-extra"] ? (h(), s("label", {
 				key: 0,
-				id: E,
-				for: `${v(w)}-trigger`,
+				id: k,
+				for: u.inline ? void 0 : `${b(E)}-trigger`,
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
-			}, [s("span", null, _(l.label), 1), l.required ? (m(), o("span", ue, "*")) : a("", !0)], 8, le)) : a("", !0),
-			l.hint ? (m(), o("p", {
+			}, [
+				v(e.$slots, "label-icon"),
+				u.label ? (h(), s("span", le, y(u.label), 1)) : o("", !0),
+				v(e.$slots, "label-extra"),
+				u.required ? (h(), s("span", ue, "*")) : o("", !0)
+			], 8, ce)) : o("", !0),
+			u.hint ? (h(), s("p", {
 				key: 1,
-				id: k,
+				id: M,
 				class: "mb-2 text-base text-muted"
-			}, _(l.hint), 1)) : a("", !0),
-			s("div", de, [s("button", d({
-				id: `${v(w)}-trigger`,
+			}, y(u.hint), 1)) : o("", !0),
+			u.inline ? o("", !0) : (h(), s("div", de, [c("button", f({
+				id: `${b(E)}-trigger`,
 				ref_key: "trigger",
-				ref: j
-			}, Oe.value, {
+				ref: P
+			}, O.value, {
 				type: "button",
-				disabled: l.disabled,
+				disabled: u.disabled,
 				"aria-haspopup": "dialog",
-				"aria-expanded": C.value,
-				"aria-labelledby": l.label ? `${E} ${D}` : D,
-				"aria-describedby": ke.value,
-				"aria-invalid": !!l.errorMsg || void 0,
-				"aria-required": l.required || void 0,
+				"aria-expanded": T.value,
+				"aria-labelledby": u.label || e.$slots["label-icon"] || e.$slots["label-extra"] ? `${k} ${A}` : A,
+				"aria-describedby": Me.value,
+				"aria-invalid": !!u.errorMsg || void 0,
+				"aria-required": u.required || void 0,
 				class: ["flex w-full items-center rounded-10 border bg-background text-left text-base font-normal text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none disabled:cursor-not-allowed", [
-					l.size === "small" ? "h-9 pl-3" : "h-10.5 pl-4",
-					l.clearable && S.value ? "pr-20" : "pr-10",
-					l.disabled ? "" : "cursor-pointer hover:bg-accent-hover",
-					l.errorMsg ? ["border-danger/60", F.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : F.value ? "focus-ring" : ["border-border", !l.disabled && "hover:border-accent-active"]
+					u.size === "small" ? "h-9 pl-3" : "h-10.5 pl-4",
+					u.clearable && w.value ? "pr-20" : "pr-10",
+					u.disabled ? "" : "cursor-pointer hover:bg-accent-hover",
+					u.errorMsg ? ["border-danger/60", Oe.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : Oe.value ? "focus-ring" : ["border-border", !u.disabled && "hover:border-accent-active"]
 				]],
-				onClick: u[0] ||= (e) => C.value ? X() : Ve(),
-				onKeydown: Ye,
-				onFocus: u[1] ||= (e) => P.value = !0,
-				onBlur: u[2] ||= (e) => P.value = !1
-			}), [s("span", {
-				id: D,
-				class: p(["truncate tabular-nums", !V.value && "text-muted/80"])
-			}, _(V.value || S.value || l.placeholder), 3)], 16, fe), s("span", { class: p(["pointer-events-none absolute inset-y-0 flex items-center gap-4 text-muted", l.size === "small" ? "right-3" : "right-4"]) }, [l.clearable && S.value && !l.disabled ? (m(), o("button", {
+				onClick: i[0] ||= (e) => T.value ? J() : Ge(),
+				onKeydown: Ze,
+				onFocus: i[1] ||= (e) => L.value = !0,
+				onBlur: i[2] ||= (e) => L.value = !1
+			}), [c("span", {
+				id: A,
+				class: m(["truncate tabular-nums", !je.value && "text-muted/80"])
+			}, y(je.value || w.value || u.placeholder), 3)], 16, fe), c("span", { class: m(["pointer-events-none absolute inset-y-0 flex items-center gap-4 text-muted", u.size === "small" ? "right-3" : "right-4"]) }, [u.clearable && w.value && !u.disabled ? (h(), s("button", {
 				key: 0,
 				type: "button",
 				class: "pointer-events-auto inline-flex cursor-pointer items-center justify-center rounded-full p-1 transition-colors duration-200 hover:bg-accent-hover hover:text-primary active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
-				"aria-label": l.label ? `Clear ${l.label}` : "Clear",
-				onClick: Be
-			}, [c(v(ce), {
+				"aria-label": u.label ? `Clear ${u.label}` : "Clear",
+				onClick: We
+			}, [l(b(se), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 8, pe)) : a("", !0), c(v(se), {
-				class: p(["size-4", C.value && "text-heading"]),
+			})], 8, pe)) : o("", !0), l(b(oe), {
+				class: m(["size-4", T.value && "text-heading"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])], 2)]),
-			l.errorMsg ? (m(), o("p", {
-				key: 2,
-				id: O,
-				class: "mt-1 text-base text-danger-strong",
-				role: "alert"
-			}, _(l.errorMsg), 1)) : a("", !0),
-			l.name ? (m(), o("input", {
-				key: 3,
-				type: "hidden",
-				name: l.name,
-				value: S.value ?? ""
-			}, null, 8, me)) : a("", !0),
-			(m(), i(t, { to: "body" }, [c(n, {
+			}, null, 8, ["class"])], 2)])),
+			(h(), a(n, {
+				to: "body",
+				disabled: u.inline
+			}, [l(r, {
 				"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-opacity",
 				"enter-from-class": "opacity-0 scale-95",
 				"leave-active-class": "transition duration-100 ease-in",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: oe(() => [C.value ? (m(), o("div", {
+				default: ae(() => [T.value || u.inline ? (h(), s("div", f({
 					key: 0,
 					ref_key: "panel",
-					ref: M,
-					role: "dialog",
-					"aria-modal": "true",
-					"aria-label": Ae.value,
-					class: "fixed z-[90] flex max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-10 border border-border bg-surface p-3 shadow-sm",
-					style: ee({
-						top: N.value.top === void 0 ? void 0 : `${N.value.top}px`,
-						bottom: N.value.bottom === void 0 ? void 0 : `${N.value.bottom}px`,
-						left: `${N.value.left}px`,
-						maxHeight: `${N.value.maxHeight}px`,
-						minWidth: `${N.value.minWidth}px`
-					}),
+					ref: F,
+					role: u.inline ? "group" : "dialog",
+					"aria-modal": u.inline ? void 0 : "true",
+					"aria-label": Ne.value,
+					"aria-describedby": u.inline ? Me.value : void 0,
+					inert: u.inline && u.disabled
+				}, u.inline ? O.value : void 0, {
+					class: ["flex flex-col overflow-hidden p-3", !u.inline && "fixed z-[90] max-w-[calc(100vw-16px)] rounded-10 border border-border bg-surface shadow-sm"],
+					style: u.inline ? void 0 : {
+						top: I.value.top === void 0 ? void 0 : `${I.value.top}px`,
+						bottom: I.value.bottom === void 0 ? void 0 : `${I.value.bottom}px`,
+						left: `${I.value.left}px`,
+						maxHeight: `${I.value.maxHeight}px`,
+						minWidth: `${I.value.minWidth}px`
+					},
 					"data-ac-ds": "",
 					"data-testid": "ac-time-picker-panel",
-					onKeydown: Je
-				}, [s("div", ge, [(m(!0), o(e, null, g(H.value, (t, n) => (m(), o(e, { key: t.unit }, [t.unit === "p" ? (m(), o("span", _e)) : n > 0 ? (m(), o("span", ve, ":")) : a("", !0), s("div", {
+					onKeydown: Xe
+				}), [c("div", he, [(h(!0), s(t, null, _(Fe.value, (e, n) => (h(), s(t, { key: e.unit }, [e.unit === "p" ? (h(), s("span", ge)) : n > 0 ? (h(), s("span", _e, ":")) : o("", !0), c("div", {
 					class: "flex h-full min-w-14 flex-1 flex-col items-center",
 					"data-col": n
-				}, [s("span", be, _(t.heading), 1), s("div", {
+				}, [c("span", ye, y(e.heading), 1), c("div", {
 					role: "listbox",
-					"aria-label": t.name,
+					"aria-label": e.name,
 					class: "relative min-h-0 w-full flex-1 scroll-smooth overflow-y-auto [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
-					onKeydown: (e) => qe(e, n, t)
-				}, [s("div", Se, [(m(!0), o(e, null, g(t.cells, (e) => (m(), o("button", {
-					key: e.value,
+					onKeydown: (t) => Ye(t, n, e)
+				}, [c("div", xe, [(h(!0), s(t, null, _(e.cells, (t) => (h(), s("button", {
+					key: t.value,
 					type: "button",
-					"data-value": e.value,
+					"data-value": t.value,
 					role: "option",
-					tabindex: Ge(t, e),
-					"aria-selected": e.value === t.selected,
-					"aria-disabled": e.disabled,
-					class: p(["inline-flex h-10 shrink-0 items-center justify-center rounded-8 tabular-nums transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset motion-reduce:transition-none", [t.unit === "p" ? "w-12 text-xs font-bold" : "w-10 text-base", e.disabled ? "cursor-not-allowed text-muted/50 line-through" : e.value === t.selected ? ["cursor-pointer bg-primary text-white", t.unit !== "p" && "scale-110 font-bold"] : "cursor-pointer text-heading hover:bg-accent-hover hover:font-bold active:bg-accent-active"]]),
-					onClick: (r) => Ke(n, t, e)
-				}, _(e.text), 11, Ce))), 128))])], 40, xe)], 8, ye)], 64))), 128))]), s("div", we, [s("button", {
+					tabindex: qe(e, t),
+					"aria-selected": t.value === e.selected,
+					"aria-disabled": t.disabled,
+					class: m(["inline-flex h-10 shrink-0 items-center justify-center rounded-8 tabular-nums transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset motion-reduce:transition-none", [e.unit === "p" ? "w-12 text-xs font-bold" : "w-10 text-base", t.disabled ? "cursor-not-allowed text-muted/50 line-through" : t.value === e.selected ? ["cursor-pointer bg-primary text-white", e.unit !== "p" && "scale-110 font-bold"] : "cursor-pointer text-heading hover:bg-accent-hover hover:font-bold active:bg-accent-active"]]),
+					onClick: (r) => Je(n, e, t)
+				}, y(t.text), 11, Se))), 128))])], 40, be)], 8, ve)], 64))), 128))]), c("div", Ce, [c("button", {
 					type: "button",
 					class: "cursor-pointer rounded-8 bg-accent px-3 py-1.5 text-xs font-medium text-heading transition-colors duration-200 hover:bg-accent-hover active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-					disabled: !je.value,
-					onClick: ze
-				}, " Current time ", 8, Te)])], 44, he)) : a("", !0)]),
+					disabled: !Pe.value,
+					onClick: Ue
+				}, " Current time ", 8, we)])], 16, me)) : o("", !0)]),
 				_: 1
-			})]))
+			})], 8, ["disabled"])),
+			u.errorMsg ? (h(), s("p", {
+				key: 3,
+				id: j,
+				class: "mt-1 text-base text-danger-strong",
+				role: "alert"
+			}, y(u.errorMsg), 1)) : o("", !0),
+			u.name ? (h(), s("input", {
+				key: 4,
+				type: "hidden",
+				name: u.name,
+				value: w.value ?? ""
+			}, null, 8, Te)) : o("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { x as default };
+export { C as default };