@ac-design/design-system 1.0.3 → 2.1.0

package/dist/lib/components/AcThemeMode.vue.d.ts

@@ -2,15 +2,15 @@ import type { ColorMode } from "../composables/useColorMode";
 export interface Props {
     /** Used until the viewer picks a mode. */
     defaultMode?: ColorMode;
-    /** `icons` is a compact 3-icon switch; `labels` adds the words, for menus and settings pages. */
-    display?: "icons" | "labels";
+    /** `icons` is a compact 3-icon switch; `labels` adds the words, for menus and settings pages; `toggle` is cloud-ui's sun/moon switch for the navbar (64×32px), light or dark only. */
+    display?: "icons" | "labels" | "toggle";
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "set:theme": (theme: "light" | "dark") => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onSet:theme"?: ((theme: "light" | "dark") => any) | undefined;
 }>, {
-    display: "icons" | "labels";
+    display: "icons" | "labels" | "toggle";
     defaultMode: ColorMode;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,60 +1,92 @@
 import { useColorMode as e } from "../composables/useColorMode.js";
-import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderList as l, resolveDynamicComponent as u, toDisplayString as d, unref as f } from "vue";
-import { Monitor as p, Moon as m, Sun as h } from "@lucide/vue";
+import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, watch as g } from "vue";
+import { Monitor as _, Moon as v, Sun as y } from "@lucide/vue";
 //#region src/lib/components/AcThemeMode.vue?vue&type=script&setup=true&lang.ts
-var g = {
+var b = ["aria-checked", "title"], x = {
+	key: 1,
 	role: "radiogroup",
 	"aria-label": "Theme",
-	class: "inline-flex items-center gap-0.5 rounded-8 border border-border bg-surface-muted p-0.5",
+	class: "inline-flex items-center gap-1 rounded-10 bg-surface-sunken p-1",
 	"data-ac-ds": "",
 	"data-testid": "ac-theme-mode"
-}, _ = [
+}, S = [
 	"aria-checked",
 	"aria-label",
 	"title",
 	"onClick"
-], v = { key: 0 }, y = /*@__PURE__*/ o({
+], C = { key: 0 }, w = /*@__PURE__*/ s({
 	__name: "AcThemeMode",
 	props: {
 		defaultMode: { default: "light" },
 		display: { default: "icons" }
 	},
 	emits: ["set:theme"],
-	setup(o, { emit: y }) {
-		let b = o, x = y, S = [
+	setup(s, { emit: w }) {
+		let T = s, E = w, D = [
 			{
 				value: "light",
 				label: "Light",
-				icon: h
+				icon: y
 			},
 			{
 				value: "dark",
 				label: "Dark",
-				icon: m
+				icon: v
 			},
 			{
 				value: "system",
 				label: "System",
-				icon: p
+				icon: _
 			}
-		], { mode: C, isDark: w, setMode: T } = e({ defaultMode: b.defaultMode });
-		function E(e) {
-			T(e), x("set:theme", w.value ? "dark" : "light");
+		], { mode: O, isDark: k, setMode: A } = e({ defaultMode: T.defaultMode }), j = d(k.value), M;
+		function N(e) {
+			A(e), E("set:theme", k.value ? "dark" : "light");
 		}
-		return (e, p) => (c(), i("div", g, [(c(), i(t, null, l(S, (e) => a("button", {
+		function P() {
+			j.value = !j.value, clearTimeout(M), M = setTimeout(() => {
+				M = void 0, N(j.value ? "dark" : "light");
+			}, 200);
+		}
+		return g(k, (e) => {
+			M === void 0 && (j.value = e);
+		}), l(() => clearTimeout(M)), (e, l) => s.display === "toggle" ? (u(), i("button", {
+			key: 0,
+			type: "button",
+			role: "switch",
+			"aria-checked": j.value,
+			"aria-label": "Dark mode",
+			title: j.value ? "Switch to light mode" : "Switch to dark mode",
+			class: "relative inline-flex h-8 w-16 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none",
+			"data-ac-ds": "",
+			"data-testid": "ac-theme-mode",
+			onClick: P
+		}, [
+			a("span", {
+				class: c(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2,0.46,0.71)] motion-reduce:transition-none", j.value ? "translate-x-[10px] rotate-0 opacity-0" : "translate-x-[3px] rotate-[15deg] opacity-100"]),
+				"aria-hidden": "true"
+			}, [o(h(y), { class: "size-[19px] text-theme-sun" })], 2),
+			a("span", {
+				class: c(["size-[21px] shrink-0 rounded-full inset-ring-2 transition-[translate,background-color] duration-500 ease-[cubic-bezier(0.26,2,0.46,0.71)] motion-reduce:transition-none", j.value ? "-translate-x-[14px] bg-theme-moon inset-ring-white" : "translate-x-4 bg-theme-sun-soft inset-ring-theme-sun"]),
+				"aria-hidden": "true"
+			}, null, 2),
+			a("span", {
+				class: c(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2.5,0.46,0.71)] motion-reduce:transition-none", j.value ? "-translate-x-[3px] -rotate-[15deg] opacity-100" : "-translate-x-2 rotate-0 opacity-0"]),
+				"aria-hidden": "true"
+			}, [o(h(v), { class: "size-[21px] text-heading" })], 2)
+		], 8, b)) : (u(), i("div", x, [(u(), i(t, null, f(D, (e) => a("button", {
 			key: e.value,
 			type: "button",
 			role: "radio",
-			"aria-checked": f(C) === e.value,
-			"aria-label": o.display === "icons" ? `${e.label} theme` : void 0,
-			title: o.display === "icons" ? `${e.label} theme` : void 0,
-			class: s(["inline-flex h-6.5 cursor-pointer items-center justify-center gap-1.5 rounded-6 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [o.display === "icons" ? "w-7" : "px-2.5", f(C) === e.value ? "bg-surface text-heading shadow-sm ring-1 ring-border" : "text-muted hover:text-heading"]]),
-			onClick: (t) => E(e.value)
-		}, [(c(), n(u(e.icon), {
-			class: "size-3.5",
+			"aria-checked": h(O) === e.value,
+			"aria-label": s.display === "icons" ? `${e.label} theme` : void 0,
+			title: s.display === "icons" ? `${e.label} theme` : void 0,
+			class: c(["inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none", [s.display === "icons" ? "w-7" : "px-3", h(O) === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
+			onClick: (t) => N(e.value)
+		}, [(u(), n(p(e.icon), {
+			class: "size-4",
 			"aria-hidden": "true"
-		})), o.display === "labels" ? (c(), i("span", v, d(e.label), 1)) : r("", !0)], 10, _)), 64))]));
+		})), s.display === "labels" ? (u(), i("span", C, m(e.label), 1)) : r("", !0)], 10, S)), 64))]));
 	}
 });
 //#endregion
-export { y as default };
+export { w as default };

package/dist/lib/components/AcTimePicker.js

@@ -0,0 +1,5 @@
+import e from "./AcTimePicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcTimePicker.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/lib/components/AcTimePicker.vue.d.ts

@@ -0,0 +1,65 @@
+export interface Props {
+    /** Label above the field. Doubles as the accessible name of the trigger and the popover. */
+    label?: string;
+    /** Text shown in the field while there's no value. */
+    placeholder?: string;
+    /** `24` shows 00–23; `12` shows 1–12 with an AM/PM column. `v-model` is always 24-hour. Cloud `hour12`. */
+    hourCycle?: 12 | 24;
+    /** Gap between the minutes on offer, e.g. `5` or `15`. */
+    minuteStep?: number;
+    /** Adds a seconds column; `v-model` becomes `HH:mm:ss`. */
+    showSeconds?: boolean;
+    /** Earliest choosable time, `HH:mm` or `HH:mm:ss`. Earlier hours and minutes are greyed out. */
+    min?: string;
+    /** Latest choosable time, `HH:mm` or `HH:mm:ss`. Must be after `min`; windows across midnight aren't supported. */
+    max?: string;
+    /** Shows a clear button when there is a value. */
+    clearable?: boolean;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Help text between the label and the field. */
+    hint?: string;
+    /** `small` 36px or `normal` 42px tall, the same as `AcInput`. */
+    size?: "small" | "normal";
+    /** Adds a hidden input with this name so plain form posts include the value. */
+    name?: string;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** `"14:05"`, or `"14:05:30"` with `show-seconds`, always 24-hour. `null` when empty. */
+    modelValue?: string | null;
+    /** Whether the popover is open. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the field. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    required: boolean;
+    label: string;
+    disabled: boolean;
+    max: string;
+    min: string;
+    name: string;
+    size: "small" | "normal";
+    hint: string;
+    placeholder: string;
+    clearable: boolean;
+    errorMsg: string;
+    showSeconds: boolean;
+    hourCycle: 12 | 24;
+    minuteStep: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,455 @@
+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";
+//#region src/lib/components/AcTimePicker.vue?vue&type=script&setup=true&lang.ts
+var le = ["for"], ue = {
+	key: 0,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, de = { class: "relative" }, fe = [
+	"id",
+	"disabled",
+	"aria-expanded",
+	"aria-labelledby",
+	"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 = {
+	key: 0,
+	class: "mx-2 mt-6 h-32 w-px shrink-0 self-center bg-border",
+	"aria-hidden": "true"
+}, ve = {
+	key: 1,
+	class: "mt-6 self-center font-bold text-heading/50",
+	"aria-hidden": "true"
+}, ye = ["data-col"], be = {
+	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 = [
+	"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({
+	inheritAttrs: !1,
+	__name: "AcTimePicker",
+	props: /*@__PURE__*/ u({
+		label: { default: "" },
+		placeholder: { default: "Choose time" },
+		hourCycle: { default: 24 },
+		minuteStep: { default: 1 },
+		showSeconds: {
+			type: Boolean,
+			default: !1
+		},
+		min: { default: "" },
+		max: { default: "" },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		size: { default: "normal" },
+		name: { default: "" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		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;
+			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({
+			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 ? [
+				0,
+				1,
+				2,
+				3,
+				4,
+				5,
+				6,
+				7,
+				8,
+				9,
+				10,
+				11
+			].map((e) => e + r) : W(0, 23, 1);
+			i.push({
+				unit: "h",
+				heading: "Hrs",
+				name: "Hours",
+				selected: t,
+				cells: a.map((e) => ({
+					value: e,
+					text: U(B.value ? e % 12 || 12 : e),
+					disabled: !J(e * 3600, e * 3600 + 3599)
+				}))
+			});
+			let o = t ?? Pe();
+			if (i.push({
+				unit: "m",
+				heading: "Min",
+				name: "Minutes",
+				selected: n,
+				cells: W(0, 59, Math.max(1, x.minuteStep)).map((e) => {
+					let t = o * 3600 + e * 60;
+					return {
+						value: e,
+						text: U(e),
+						disabled: !J(t, x.showSeconds ? t + 59 : t)
+					};
+				})
+			}), x.showSeconds) {
+				let t = n ?? 0;
+				i.push({
+					unit: "s",
+					heading: "Sec",
+					name: "Seconds",
+					selected: e?.s ?? null,
+					cells: W(0, 59, 1).map((e) => ({
+						value: e,
+						text: U(e),
+						disabled: !q(o * 3600 + t * 60 + e)
+					}))
+				});
+			}
+			return B.value && i.push({
+				unit: "p",
+				heading: "AM/PM",
+				name: "AM or PM",
+				selected: t === null ? null : r,
+				cells: [{
+					value: 0,
+					text: "AM",
+					disabled: !J(0, 43199)
+				}, {
+					value: 12,
+					text: "PM",
+					disabled: !J(43200, b)
+				}]
+			}), i;
+		});
+		function U(e) {
+			return String(e).padStart(2, "0");
+		}
+		function W(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;
+			if (!t) return null;
+			let [n, r, i] = [
+				Number(t[1]),
+				Number(t[2]),
+				Number(t[3] ?? 0)
+			];
+			return n > 23 || r > 59 || i > 59 ? null : n * 3600 + r * 60 + i;
+		}
+		function K(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 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 q(e) {
+			return e >= L.value && e <= R.value;
+		}
+		function J(e, t) {
+			return t >= L.value && e <= R.value;
+		}
+		function Pe() {
+			return Math.floor(L.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 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);
+			else r.push(e);
+			let i = r.filter(q);
+			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 Re(e, t) {
+			let { h: n, m: r, s: i } = z.value ?? K(Ie(L.value) ?? L.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));
+		}
+		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
+			} : {
+				top: t.bottom + 6,
+				left: s,
+				maxHeight: Math.max(200, i),
+				minWidth: c
+			};
+		}
+		function Ve() {
+			x.disabled || C.value || (C.value = !0);
+		}
+		function X(e = !0) {
+			C.value && (C.value = !1, e && j.value?.focus());
+		}
+		async function He() {
+			Y(), Ze(), await f(), Y(), Z("instant"), We(0);
+		}
+		function Z(e) {
+			let t = e === "smooth" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			M.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,
+					behavior: t ? "smooth" : "instant"
+				});
+			});
+		}
+		function Ue(e) {
+			return [...M.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
+		}
+		function We(e) {
+			let t = Ue(e);
+			(t.find((e) => e.tabIndex === 0) ?? t[0])?.focus({ preventScroll: !0 });
+		}
+		function Ge(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 qe(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 = {
+				ArrowDown: i + 1,
+				ArrowUp: i < 0 ? r.length - 1 : i - 1,
+				PageDown: i + 5,
+				PageUp: i < 0 ? 0 : i - 5,
+				Home: 0,
+				End: r.length - 1
+			};
+			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);
+				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();
+				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);
+		}
+		function Je(e) {
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), X();
+				return;
+			}
+			if (e.key !== "Tab" || !M.value) return;
+			let t = [...M.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 Xe(e) {
+			let t = e.target;
+			A.value?.contains(t) || M.value?.contains(t) || X(!1);
+		}
+		function Q(e) {
+			e?.target instanceof Node && M.value?.contains(e.target) || Y();
+		}
+		function Ze() {
+			document.addEventListener("pointerdown", Xe, !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);
+		}
+		return ae(C, (e) => e ? He() : $()), ne(() => {
+			C.value && He();
+		}), te($), u({ focus: () => j.value?.focus() }), (r, u) => (m(), o("div", d({
+			ref_key: "root",
+			ref: A
+		}, De.value, {
+			class: ["w-full", l.disabled && "opacity-50"],
+			"data-ac-ds": "",
+			"data-testid": "ac-time-picker"
+		}), [
+			l.label ? (m(), o("label", {
+				key: 0,
+				id: E,
+				for: `${v(w)}-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", {
+				key: 1,
+				id: k,
+				class: "mb-2 text-base text-muted"
+			}, _(l.hint), 1)) : a("", !0),
+			s("div", de, [s("button", d({
+				id: `${v(w)}-trigger`,
+				ref_key: "trigger",
+				ref: j
+			}, Oe.value, {
+				type: "button",
+				disabled: l.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,
+				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"]
+				]],
+				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", {
+				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), {
+				class: "size-4",
+				"aria-hidden": "true"
+			})], 8, pe)) : a("", !0), c(v(se), {
+				class: p(["size-4", C.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, {
+				"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", {
+					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`
+					}),
+					"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", {
+					class: "flex h-full min-w-14 flex-1 flex-col items-center",
+					"data-col": n
+				}, [s("span", be, _(t.heading), 1), s("div", {
+					role: "listbox",
+					"aria-label": t.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,
+					type: "button",
+					"data-value": e.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", {
+					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)]),
+				_: 1
+			})]))
+		], 16));
+	}
+});
+//#endregion
+export { x as default };