@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -1,12 +1,12 @@
 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, normalizeStyle as ee, onBeforeUnmount as te, onMounted as ne, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, useAttrs as re, useId as ie, useModel as b, watch as ae, withCtx as oe } from "vue";
+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 ie, watch as ae, withCtx as oe } from "vue";
 import { Clock as se, X as ce } from "@lucide/vue";
 //#region src/lib/components/AcTimePicker.vue?vue&type=script&setup=true&lang.ts
-var le = ["for"], ue = {
-	key: 0,
+var le = ["for"], ue = { key: 0 }, de = {
+	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, de = { class: "relative" }, fe = [
+}, fe = [
 	"id",
 	"disabled",
 	"aria-expanded",
@@ -14,24 +14,30 @@ 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"], x = 86399, S = /*@__PURE__*/ u({
+], Ce = { class: "mt-4 flex shrink-0 justify-center gap-2 border-t border-border pt-4" }, we = ["disabled"], Te = ["name", "value"], x = 86399, S = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "AcTimePicker",
 	props: /*@__PURE__*/ d({
@@ -60,7 +66,22 @@ var le = ["for"], ue = {
 		errorMsg: { default: "" },
 		hint: { default: "" },
 		size: { default: "normal" },
-		name: { default: "" }
+		name: { default: "" },
+		inline: {
+			type: Boolean,
+			default: !1
+		},
+		valueType: { default: "string" },
+		fieldClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {},
@@ -72,18 +93,39 @@ var le = ["for"], ue = {
 	}),
 	emits: ["update:modelValue", "update:open"],
 	setup(u, { expose: d }) {
-		let S = u, C = b(u, "modelValue"), w = b(u, "open"), Ee = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/, T = ie(), E = re(), De = i(() => ({
-			class: E.class,
-			style: E.style
-		})), Oe = i(() => {
-			let { class: e, style: t, ...n } = E;
+		let S = u, C = ie(u, "modelValue"), w = ie(u, "open"), T = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/, E = re(), D = ne(), Ee = i(() => ({
+			class: D.class,
+			style: D.style
+		})), O = i(() => {
+			let { class: e, style: t, ...n } = D;
 			return n;
-		}), D = `${T}-label`, O = `${T}-value`, k = `${T}-msg`, A = `${T}-hint`, j = g(null), M = g(null), N = g(null), P = g({
+		}), k = `${E}-label`, A = `${E}-value`, j = `${E}-msg`, M = `${E}-hint`, De = g(null), N = g(null), P = g(null), F = g({
 			left: 0,
 			maxHeight: 400,
 			minWidth: 0
-		}), F = g(!1), I = i(() => w.value || F.value), L = i(() => G(C.value)), R = i(() => G(S.min) ?? 0), z = i(() => G(S.max) ?? x), B = i(() => L.value === null ? null : K(L.value)), V = i(() => S.hourCycle === 12), H = i(() => L.value === null ? "" : Pe(L.value)), ke = i(() => [S.hint && A, S.errorMsg && k].filter(Boolean).join(" ") || void 0), Ae = i(() => S.label ? `${S.label}: choose time` : "Choose time"), je = i(() => q(Ie())), Me = i(() => {
-			let e = B.value, t = e?.h ?? null, n = e?.m ?? null, r = t === null ? 0 : t >= 12 ? 12 : 0, i = [], a = V.value ? [
+		}), I = g(!1), L = i({
+			get() {
+				let e = C.value;
+				if (!(e instanceof Date)) return e ?? null;
+				if (Number.isNaN(e.getTime())) return null;
+				let t = `${V(e.getHours())}:${V(e.getMinutes())}`;
+				return S.showSeconds ? `${t}:${V(e.getSeconds())}` : t;
+			},
+			set(e) {
+				if (S.valueType !== "date" && !(C.value instanceof Date)) {
+					C.value = e;
+					return;
+				}
+				let t = e ? T.exec(e) : null;
+				if (!t) {
+					C.value = null;
+					return;
+				}
+				let n = C.value instanceof Date && !Number.isNaN(C.value.getTime()) ? new Date(C.value) : /* @__PURE__ */ new Date();
+				t[3] === void 0 ? n.setHours(Number(t[1]), Number(t[2])) : n.setHours(Number(t[1]), Number(t[2]), Number(t[3])), C.value = n;
+			}
+		}), Oe = i(() => w.value || I.value), R = i(() => U(L.value)), z = i(() => U(S.min) ?? 0), ke = i(() => U(S.max) ?? x), Ae = i(() => R.value === null ? null : W(R.value)), B = i(() => S.hourCycle === 12), je = i(() => R.value === null ? "" : Le(R.value)), Me = i(() => [S.hint && M, S.errorMsg && j].filter(Boolean).join(" ") || void 0), Ne = i(() => S.label ? `${S.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,
@@ -96,7 +138,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",
@@ -104,22 +146,22 @@ var le = ["for"], ue = {
 				selected: t,
 				cells: a.map((e) => ({
 					value: e,
-					text: U(V.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 ?? Fe();
+			let o = t ?? Re();
 			if (i.push({
 				unit: "m",
 				heading: "Min",
 				name: "Minutes",
 				selected: n,
-				cells: W(0, 59, Math.max(1, S.minuteStep)).map((e) => {
+				cells: H(0, 59, Math.max(1, S.minuteStep)).map((e) => {
 					let t = o * 3600 + e * 60;
 					return {
 						value: e,
-						text: U(e),
-						disabled: !J(t, S.showSeconds ? t + 59 : t)
+						text: V(e),
+						disabled: !K(t, S.showSeconds ? t + 59 : t)
 					};
 				})
 			}), S.showSeconds) {
@@ -129,14 +171,14 @@ var le = ["for"], ue = {
 					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)
 					}))
 				});
 			}
-			return V.value && i.push({
+			return B.value && i.push({
 				unit: "p",
 				heading: "AM/PM",
 				name: "AM or PM",
@@ -144,24 +186,24 @@ var le = ["for"], ue = {
 				cells: [{
 					value: 0,
 					text: "AM",
-					disabled: !J(0, 43199)
+					disabled: !K(0, 43199)
 				}, {
 					value: 12,
 					text: "PM",
-					disabled: !J(43200, x)
+					disabled: !K(43200, x)
 				}]
 			}), 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) {
-			let t = e ? Ee.exec(e.trim()) : null;
+		function U(e) {
+			let t = e ? T.exec(e.trim()) : null;
 			if (!t) return null;
 			let [n, r, i] = [
 				Number(t[1]),
@@ -170,63 +212,64 @@ 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 Ne(e) {
-			let { h: t, m: n, s: r } = K(e);
-			return S.showSeconds ? `${U(t)}:${U(n)}:${U(r)}` : `${U(t)}:${U(n)}`;
+		function Ie(e) {
+			let { h: t, m: n, s: r } = W(e);
+			return S.showSeconds ? `${V(t)}:${V(n)}:${V(r)}` : `${V(t)}:${V(n)}`;
 		}
-		function Pe(e) {
-			let { h: t, m: n, s: r } = K(e), i = S.showSeconds ? `${U(n)}:${U(r)}` : U(n);
-			return V.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 = S.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 >= R.value && e <= z.value;
+		function G(e) {
+			return e >= z.value && e <= ke.value;
 		}
-		function J(e, t) {
-			return t >= R.value && e <= z.value;
+		function K(e, t) {
+			return t >= z.value && e <= ke.value;
 		}
-		function Fe() {
-			return Math.floor(R.value / 3600);
+		function Re() {
+			return Math.floor(z.value / 3600);
 		}
-		function Ie() {
+		function ze() {
 			let e = /* @__PURE__ */ new Date(), t = Math.max(1, S.minuteStep), n = Math.floor(e.getMinutes() / t) * t;
 			return e.getHours() * 3600 + n * 60 + (S.showSeconds ? e.getSeconds() : 0);
 		}
-		function Le(e) {
-			if (q(e) && Re(e)) return e;
-			let { h: t } = K(e), n = Math.max(1, S.minuteStep) * 60, r = [];
+		function Be(e) {
+			if (G(e) && Ve(e)) return e;
+			let { h: t } = W(e), n = Math.max(1, S.minuteStep) * 60, r = [];
 			for (let e = t * 3600; e < (t + 1) * 3600; e += n) if (S.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 Re(e) {
-			let { m: t, s: n } = K(e);
+		function Ve(e) {
+			let { m: t, s: n } = W(e);
 			return t % Math.max(1, S.minuteStep) === 0 && (S.showSeconds || n === 0);
 		}
-		function ze(e, t) {
-			let { h: n, m: r, s: i } = B.value ?? K(Le(R.value) ?? R.value);
+		function He(e, t) {
+			if (S.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 = Le(n * 3600 + r * 60 + (S.showSeconds ? i : 0));
-			a !== null && (C.value = Ne(a));
+			let a = Be(n * 3600 + r * 60 + (S.showSeconds ? i : 0));
+			a !== null && (L.value = Ie(a));
 		}
-		function Be() {
-			C.value = Ne(Ie()), p(() => Z("smooth"));
+		function Ue() {
+			S.disabled || (L.value = Ie(ze()), p(() => X("smooth")));
 		}
-		function Ve() {
-			C.value = null, M.value?.focus();
+		function We() {
+			L.value = null, N.value?.focus();
 		}
-		function Y() {
-			let t = M.value;
+		function q() {
+			let t = N.value;
 			if (!t) return;
-			let n = t.getBoundingClientRect(), r = e(), i = N.value?.offsetWidth ?? 240, a = N.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);
-			P.value = c ? {
+			let n = t.getBoundingClientRect(), r = e(), i = P.value?.offsetWidth ?? 240, a = P.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);
+			F.value = c ? {
 				bottom: r.bottom - n.top + 6,
 				left: l,
 				maxHeight: Math.max(200, s),
@@ -238,18 +281,18 @@ var le = ["for"], ue = {
 				minWidth: u
 			};
 		}
-		function He() {
+		function Ge() {
 			S.disabled || w.value || (w.value = !0);
 		}
-		function X(e = !0) {
-			w.value && (w.value = !1, e && M.value?.focus());
+		function J(e = !0) {
+			w.value && (w.value = !1, e && N.value?.focus());
 		}
-		async function Ue() {
-			Y(), Qe(), await p(), Y(), Z("instant"), Ge(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;
-			N.value?.querySelectorAll("[role=listbox]").forEach((e) => {
+			P.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,
@@ -257,22 +300,22 @@ var le = ["for"], ue = {
 				});
 			});
 		}
-		function We(e) {
-			return [...N.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
+		function Ke(e) {
+			return [...P.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
 		}
-		function Ge(e) {
-			let t = We(e);
+		function Z(e) {
+			let t = Ke(e);
 			(t.find((e) => e.tabIndex === 0) ?? t[0])?.focus({ preventScroll: !0 });
 		}
-		function Ke(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 qe(e, t, n) {
-			n.disabled || (ze(t.unit, n.value), p(() => {
-				Z("smooth"), We(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 Je(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 = {
@@ -286,169 +329,190 @@ var le = ["for"], ue = {
 			if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
 				e.preventDefault();
 				let n = t + (e.key === "ArrowRight" ? 1 : -1);
-				n >= 0 && n < Me.value.length && Ge(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 && ze(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]))];
-			qe(t, n, o);
+			Je(t, n, o);
 		}
-		function Ye(e) {
+		function Xe(e) {
+			if (S.inline) return;
 			if (e.key === "Escape") {
-				e.preventDefault(), e.stopPropagation(), X();
+				e.preventDefault(), e.stopPropagation(), J();
 				return;
 			}
-			if (e.key !== "Tab" || !N.value) return;
-			let t = [...N.value.querySelectorAll("button:not([disabled])")].filter((e) => e.tabIndex >= 0);
+			if (e.key !== "Tab" || !P.value) return;
+			let t = [...P.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 Xe(e) {
-			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), He());
-		}
 		function Ze(e) {
+			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), Ge());
+		}
+		function Qe(e) {
 			let t = e.target;
-			j.value?.contains(t) || N.value?.contains(t) || X(!1);
+			De.value?.contains(t) || P.value?.contains(t) || J(!1);
 		}
 		function Q(e) {
-			e?.target instanceof Node && N.value?.contains(e.target) || Y();
+			e?.target instanceof Node && P.value?.contains(e.target) || q();
 		}
-		function Qe() {
-			document.addEventListener("pointerdown", Ze, !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", Ze, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+			document.removeEventListener("pointerdown", Qe, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
 		}
-		return ae(w, (e) => e ? Ue() : $()), ne(() => {
-			w.value && Ue();
-		}), te($), d({ focus: () => M.value?.focus() }), (e, i) => (h(), s("div", f({
+		async function et() {
+			await p(), X("instant");
+		}
+		return ae(w, (e) => e ? Y() : $()), ae(L, () => S.inline && p(() => X("smooth"))), te(() => {
+			S.inline ? X("instant") : w.value && Y();
+		}), ee($), d({
+			focus: () => S.inline ? Z(0) : N.value?.focus(),
+			scrollToSelected: et
+		}), (e, i) => (h(), s("div", f({
 			ref_key: "root",
-			ref: j
-		}, De.value, {
+			ref: De
+		}, Ee.value, {
 			class: ["w-full", u.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-time-picker"
 		}), [
-			u.label ? (h(), s("label", {
+			u.label || e.$slots["label-icon"] || e.$slots["label-extra"] ? (h(), s("label", {
 				key: 0,
-				id: D,
-				for: `${y(T)}-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"
-			}, [c("span", null, v(u.label), 1), u.required ? (h(), s("span", ue, "*")) : o("", !0)], 8, le)) : o("", !0),
+			}, [
+				v(e.$slots, "label-icon"),
+				u.label ? (h(), s("span", ue, y(u.label), 1)) : o("", !0),
+				v(e.$slots, "label-extra"),
+				u.required ? (h(), s("span", de, "*")) : o("", !0)
+			], 8, le)) : o("", !0),
 			u.hint ? (h(), s("p", {
 				key: 1,
-				id: A,
+				id: M,
 				class: "mb-2 text-base text-muted"
-			}, v(u.hint), 1)) : o("", !0),
-			c("div", de, [c("button", f({
-				id: `${y(T)}-trigger`,
+			}, y(u.hint), 1)) : o("", !0),
+			u.inline ? o("", !0) : (h(), s("div", {
+				key: 2,
+				class: m(["relative", u.fieldClass])
+			}, [c("button", f({
+				id: `${b(E)}-trigger`,
 				ref_key: "trigger",
-				ref: M
-			}, Oe.value, {
+				ref: N
+			}, O.value, {
 				type: "button",
 				disabled: u.disabled,
 				"aria-haspopup": "dialog",
 				"aria-expanded": w.value,
-				"aria-labelledby": u.label ? `${D} ${O}` : O,
-				"aria-describedby": ke.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", [
-					u.size === "small" ? "h-9 pl-3" : "h-10.5 pl-4",
-					u.clearable && C.value ? "pr-20" : "pr-10",
+				class: ["flex w-full items-center rounded-10 border bg-background text-left text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none disabled:cursor-not-allowed", [
+					u.size === "small" ? "h-9 pl-3 text-base font-normal" : u.size === "large" ? "h-[50px] pl-4 text-lg font-medium" : "h-10.5 pl-4 text-base font-normal",
+					u.clearable && L.value ? "pr-20" : "pr-10",
 					u.disabled ? "" : "cursor-pointer hover:bg-accent-hover",
-					u.errorMsg ? ["border-danger/60", I.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : I.value ? "focus-ring" : ["border-border", !u.disabled && "hover:border-accent-active"]
+					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: i[0] ||= (e) => w.value ? X() : He(),
-				onKeydown: Xe,
-				onFocus: i[1] ||= (e) => F.value = !0,
-				onBlur: i[2] ||= (e) => F.value = !1
+				onClick: i[0] ||= (e) => w.value ? J() : Ge(),
+				onKeydown: Ze,
+				onFocus: i[1] ||= (e) => I.value = !0,
+				onBlur: i[2] ||= (e) => I.value = !1
 			}), [c("span", {
-				id: O,
-				class: m(["truncate tabular-nums", !H.value && "text-muted/80"])
-			}, v(H.value || C.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 && C.value && !u.disabled ? (h(), s("button", {
+				id: A,
+				class: m(["truncate tabular-nums", !je.value && "text-muted/80"])
+			}, y(je.value || L.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 && L.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": u.label ? `Clear ${u.label}` : "Clear",
-				onClick: Ve
-			}, [l(y(ce), {
+				onClick: We
+			}, [l(b(ce), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 8, pe)) : o("", !0), l(y(se), {
+			})], 8, pe)) : o("", !0), l(b(se), {
 				class: m(["size-4", w.value && "text-heading"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])], 2)]),
-			u.errorMsg ? (h(), s("p", {
-				key: 2,
-				id: k,
-				class: "mt-1 text-base text-danger-strong",
-				role: "alert"
-			}, v(u.errorMsg), 1)) : o("", !0),
-			u.name ? (h(), s("input", {
-				key: 3,
-				type: "hidden",
-				name: u.name,
-				value: C.value ?? ""
-			}, null, 8, me)) : o("", !0),
-			(h(), a(n, { to: "body" }, [l(r, {
+			}, null, 8, ["class"])], 2)], 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(() => [w.value ? (h(), s("div", {
+				default: oe(() => [w.value || u.inline ? (h(), s("div", f({
 					key: 0,
 					ref_key: "panel",
-					ref: N,
-					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: P.value.top === void 0 ? void 0 : `${P.value.top}px`,
-						bottom: P.value.bottom === void 0 ? void 0 : `${P.value.bottom}px`,
-						left: `${P.value.left}px`,
-						maxHeight: `${P.value.maxHeight}px`,
-						minWidth: `${P.value.minWidth}px`
-					}),
+					ref: P,
+					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: F.value.top === void 0 ? void 0 : `${F.value.top}px`,
+						bottom: F.value.bottom === void 0 ? void 0 : `${F.value.bottom}px`,
+						left: `${F.value.left}px`,
+						maxHeight: `${F.value.maxHeight}px`,
+						minWidth: `${F.value.minWidth}px`
+					},
 					"data-ac-ds": "",
 					"data-testid": "ac-time-picker-panel",
-					onKeydown: Ye
-				}, [c("div", ge, [(h(!0), s(t, null, _(Me.value, (e, n) => (h(), s(t, { key: e.unit }, [e.unit === "p" ? (h(), s("span", _e)) : n > 0 ? (h(), s("span", ve, ":")) : o("", !0), c("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
-				}, [c("span", be, v(e.heading), 1), c("div", {
+				}, [c("span", ye, y(e.heading), 1), c("div", {
 					role: "listbox",
 					"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: (t) => Je(t, n, e)
-				}, [c("div", Se, [(h(!0), s(t, null, _(e.cells, (t) => (h(), s("button", {
+					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": t.value,
 					role: "option",
-					tabindex: Ke(e, t),
+					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) => qe(n, e, t)
-				}, v(t.text), 11, Ce))), 128))])], 40, xe)], 8, ye)], 64))), 128))]), c("div", we, [c("button", {
+					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: Be
-				}, " Current time ", 8, Te)])], 44, he)) : o("", !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: L.value ?? ""
+			}, null, 8, Te)) : o("", !0)
 		], 16));
 	}
 });