@rpcbase/ui 0.208.0 → 0.209.0

package/dist/index244.js

@@ -1,256 +1,704 @@
-import { cn as e } from "./index12.js";
-import { Content2 as t, Group as n, Icon as r, Item as i, ItemIndicator as a, ItemText as o, Label as s, Portal as c, Root2 as l, Separator as u, Trigger as d, Value as f, Viewport as p } from "./index243.js";
-import { c as m } from "react/compiler-runtime";
-import * as h from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Check as v, ChevronDown as y, ChevronUp as b } from "lucide-react";
-//#region src/components/Select/index.tsx
-var x = l, S = n, C = f, w = h.forwardRef((t, n) => {
-	let i = m(12), a, o, s;
-	i[0] === t ? (a = i[1], o = i[2], s = i[3]) : ({className: o, children: a, ...s} = t, i[0] = t, i[1] = a, i[2] = o, i[3] = s);
-	let c;
-	i[4] === o ? c = i[5] : (c = e("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", o), i[4] = o, i[5] = c);
-	let l;
-	i[6] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ g(r, {
-		asChild: !0,
-		children: /* @__PURE__ */ g(y, { className: "h-4 w-4 opacity-50" })
-	}), i[6] = l) : l = i[6];
-	let u;
-	return i[7] !== a || i[8] !== s || i[9] !== n || i[10] !== c ? (u = /* @__PURE__ */ _(d, {
-		ref: n,
-		className: c,
-		...s,
-		children: [a, l]
-	}), i[7] = a, i[8] = s, i[9] = n, i[10] = c, i[11] = u) : u = i[11], u;
-});
-w.displayName = d.displayName;
-var T = h.createContext(null), E = h.forwardRef(({ direction: t, speed: n = 400, className: r, children: i, ...a }, o) => {
-	let s = h.useContext(T), [c, l] = h.useState(!0), u = h.useRef(void 0), d = h.useRef(void 0), f = h.useRef(!1), p = s?.viewport, m = h.useCallback(() => {
-		if (!p) {
-			l(!0);
+import { useIsTouchDevice as e } from "./index4.js";
+import { cn as t } from "./index12.js";
+import { DismissableLayerBranch as n } from "./index23.js";
+import { Select as r, SelectContent as i, SelectItem as a, SelectTrigger as o, SelectValue as s } from "./index243.js";
+import { c } from "react/compiler-runtime";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Check as f, ChevronDown as p, ChevronUp as m } from "lucide-react";
+import { createPortal as h } from "react-dom";
+import { IMaskInput as g } from "react-imask";
+import _, { InputMask as v } from "imask";
+//#region src/components/HourPickerField/index.tsx
+var y = _;
+typeof y.InputMask != "function" && (y.InputMask = v);
+function b(e) {
+	return String(e).padStart(2, "0");
+}
+function x(e) {
+	let t = e.trim();
+	if (!t) return null;
+	let n = /^(\d{1,2}):(\d{2})$/.exec(t);
+	if (!n) return null;
+	let r = Number(n[1]), i = Number(n[2]);
+	return !Number.isFinite(r) || !Number.isFinite(i) || r < 0 || r > 23 || i < 0 || i > 59 ? null : `${b(r)}:${b(i)}`;
+}
+function ee(e) {
+	let t = x(e);
+	if (t) return `parsed:${t}`;
+	let n = e.replace(/\D/g, "");
+	if (!n) return "empty";
+	if (n.length <= 2) return `hour:${Number(n)}`;
+	let r = n.slice(-2), i = n.slice(0, -2);
+	return `hour-minute:${Number(i)}:${r}`;
+}
+function te(e, t) {
+	let n = x(e);
+	return n ? C(t.find((e) => e.value === n)) ? {
+		parsed: n,
+		selectableValue: n
+	} : {
+		parsed: n,
+		selectableValue: null
+	} : null;
+}
+function S(e) {
+	let t = /^(\d{2}):(\d{2})$/.exec(e);
+	if (!t) return null;
+	let n = Number(t[1]), r = Number(t[2]);
+	return !Number.isFinite(n) || !Number.isFinite(r) ? null : n * 60 + r;
+}
+function C(e) {
+	return e ? !e.disabled : !1;
+}
+function w(e, t) {
+	let n = null, r = Infinity, i = -Infinity;
+	for (let a of t) {
+		if (!C(a)) continue;
+		let t = S(a.value);
+		if (t == null) continue;
+		let o = Math.abs(t - e);
+		(o < r || o === r && t > i) && (n = a, r = o, i = t);
+	}
+	return n;
+}
+function T({ direction: e, viewportRef: n, speed: r = 400, className: i }) {
+	let [a, o] = l.useState(!0), s = l.useRef(void 0), c = l.useRef(void 0), d = l.useRef(!1), f = l.useCallback(() => {
+		let t = n.current;
+		if (!t) {
+			o(!0);
 			return;
 		}
-		let { scrollTop: e, scrollHeight: n, clientHeight: r } = p, i = e > 2, a = e < n - r - 2;
-		if (!(n > r + 2)) {
-			l(!0);
+		let { scrollTop: r, scrollHeight: i, clientHeight: a } = t, s = r > 2, c = r < i - a - 2;
+		if (!(i > a + 2)) {
+			o(!0);
 			return;
 		}
-		l(t === "up" ? !i : !a);
-	}, [p, t]);
-	h.useEffect(() => {
-		if (!p) return;
-		m();
-		let e = () => m(), t = () => m();
-		p.addEventListener("scroll", e, { passive: !0 });
-		let n = new ResizeObserver(t);
-		n.observe(p);
-		let r = new MutationObserver(t);
-		return r.observe(p, {
+		o(e === "up" ? !s : !c);
+	}, [e, n]);
+	l.useEffect(() => {
+		let e = n.current;
+		if (!e) return;
+		f();
+		let t = () => f(), r = () => f();
+		e.addEventListener("scroll", t, { passive: !0 });
+		let i = new ResizeObserver(r);
+		i.observe(e);
+		let a = new MutationObserver(r);
+		return a.observe(e, {
 			childList: !0,
 			subtree: !0
 		}), () => {
-			p.removeEventListener("scroll", e), n.disconnect(), r.disconnect();
+			e.removeEventListener("scroll", t), i.disconnect(), a.disconnect();
 		};
-	}, [p, m]);
-	let _ = h.useCallback(() => {
-		u.current &&= (cancelAnimationFrame(u.current), void 0), f.current = !1, d.current = void 0;
-	}, []), v = h.useCallback((e) => {
-		if (!p || c || !f.current) {
-			_();
+	}, [n, f]);
+	let h = l.useCallback(() => {
+		s.current &&= (cancelAnimationFrame(s.current), void 0), d.current = !1, c.current = void 0;
+	}, []), g = l.useCallback((t) => {
+		let i = n.current;
+		if (!i || a || !d.current) {
+			h();
 			return;
 		}
-		d.current ||= e;
-		let r = n * (e - d.current) / 1e3;
-		if (r < .1) {
-			u.current = requestAnimationFrame(v);
+		c.current ||= t;
+		let o = r * (t - c.current) / 1e3;
+		if (o < .1) {
+			s.current = requestAnimationFrame(g);
 			return;
 		}
-		let i = p.scrollTop, a = p.scrollHeight - p.clientHeight, o;
-		o = t === "up" ? Math.max(0, i - r) : Math.min(a, i + r), p.scrollTo({ top: o }), d.current = e, (t === "up" ? o > 1 : o < a - 1) && Math.abs(o - i) > .01 ? u.current = requestAnimationFrame(v) : (_(), setTimeout(m, 16));
+		let l = i.scrollTop, u = i.scrollHeight - i.clientHeight, p;
+		p = e === "up" ? Math.max(0, l - o) : Math.min(u, l + o), i.scrollTo({ top: p }), c.current = t, (e === "up" ? p > 1 : p < u - 1) && Math.abs(p - l) > .01 ? s.current = requestAnimationFrame(g) : (h(), setTimeout(f, 16));
 	}, [
-		p,
-		c,
-		t,
-		n,
-		_,
-		m
-	]), y = h.useCallback(() => {
-		c || !p || f.current || (f.current = !0, d.current = void 0, u.current = requestAnimationFrame(v));
+		f,
+		e,
+		a,
+		r,
+		h,
+		n
+	]), _ = l.useCallback(() => {
+		a || !n.current || d.current || (d.current = !0, c.current = void 0, s.current = requestAnimationFrame(g));
 	}, [
-		c,
-		p,
-		v
+		a,
+		g,
+		n
 	]);
-	return h.useEffect(() => () => _(), [_]), /* @__PURE__ */ g("div", {
-		...a,
-		ref: o,
-		className: e("flex items-center justify-center py-1 select-none", c ? "cursor-default opacity-40" : "cursor-pointer opacity-100 hover:bg-accent/20", r),
-		onPointerEnter: (e) => {
-			a.onPointerEnter?.(e), c || y();
+	return l.useEffect(() => h, [h]), /* @__PURE__ */ u("div", {
+		className: t("flex items-center justify-center py-1 select-none", a ? "cursor-default opacity-40" : "cursor-pointer opacity-100 hover:bg-accent/20", i),
+		onPointerEnter: () => {
+			a || _();
 		},
-		onPointerMove: (e) => {
-			a.onPointerMove?.(e), !c && !f.current && y();
+		onPointerMove: () => {
+			!a && !d.current && _();
 		},
-		onPointerLeave: (e) => {
-			a.onPointerLeave?.(e), _();
+		onPointerLeave: () => {
+			h();
 		},
-		children: i
+		children: u(e === "up" ? m : p, {
+			"aria-hidden": !0,
+			className: "h-4 w-4 opacity-50"
+		})
 	});
-});
-E.displayName = "ScrollButtonImpl";
-var D = h.forwardRef((e, t) => {
-	let n = m(8), r, i;
-	n[0] === e ? (r = n[1], i = n[2]) : ({className: r, ...i} = e, n[0] = e, n[1] = r, n[2] = i);
-	let a;
-	n[3] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ g(b, { className: "h-4 w-4" }), n[3] = a) : a = n[3];
-	let o;
-	return n[4] !== r || n[5] !== i || n[6] !== t ? (o = /* @__PURE__ */ g(E, {
-		ref: t,
-		direction: "up",
-		className: r,
-		...i,
-		children: a
-	}), n[4] = r, n[5] = i, n[6] = t, n[7] = o) : o = n[7], o;
-});
-D.displayName = "SelectScrollUpButton";
-var O = h.forwardRef((e, t) => {
-	let n = m(8), r, i;
-	n[0] === e ? (r = n[1], i = n[2]) : ({className: r, ...i} = e, n[0] = e, n[1] = r, n[2] = i);
-	let a;
-	n[3] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ g(y, { className: "h-4 w-4" }), n[3] = a) : a = n[3];
-	let o;
-	return n[4] !== r || n[5] !== i || n[6] !== t ? (o = /* @__PURE__ */ g(E, {
-		ref: t,
-		direction: "down",
-		className: r,
-		...i,
-		children: a
-	}), n[4] = r, n[5] = i, n[6] = t, n[7] = o) : o = n[7], o;
-});
-O.displayName = "SelectScrollDownButton";
-var k = h.forwardRef((n, r) => {
-	let i = m(32), a, o, s, l, u;
-	i[0] === n ? (a = i[1], o = i[2], s = i[3], l = i[4], u = i[5]) : ({className: s, children: o, position: u, autoScroll: a, ...l} = n, i[0] = n, i[1] = a, i[2] = o, i[3] = s, i[4] = l, i[5] = u);
-	let d = u === void 0 ? "popper" : u, [f, v] = h.useState(null), y;
-	i[6] === Symbol.for("react.memo_cache_sentinel") ? (y = (e) => {
-		v(e);
-	}, i[6] = y) : y = i[6];
-	let b = y, x, S;
-	i[7] !== a || i[8] !== f ? (x = () => {
-		if (!f || !a) return;
-		let e = requestAnimationFrame(() => {
-			let e = f.querySelector("[role=\"option\"][data-state=\"checked\"]");
-			if (e instanceof HTMLElement) {
-				let t = e.offsetTop - 8, n = e.offsetTop + e.offsetHeight + 8;
-				if (t < f.scrollTop) {
-					f.scrollTo({ top: Math.max(0, t) });
+}
+function E({ id: e, value: r, onChange: i, onValueUpdate: a, options: o, placeholder: s = "Select time", className: c, inputClassName: p, disabled: m, readOnly: g, open: _, onOpenChange: v, triggerTestId: y, contentTestId: b, isHydrated: x }) {
+	let ee = l.useId(), te = e ?? `hours-picker-${ee}`, S = l.useRef(null), w = l.useRef(null), E = l.useCallback((e) => {
+		w.current = e;
+	}, []), D = l.useRef(null), O = l.useRef(!1), [k, ne] = l.useState(null), j = l.useRef(null), M = l.useRef(null), N = l.useRef(null), [P, F] = l.useState(() => ({
+		left: 0,
+		top: 0,
+		width: 0
+	})), [I, L] = l.useState(!1), R = _ ?? I, z = v ?? L, B = l.useRef(!1);
+	B.current = R, l.useEffect(() => {
+		if (!R || m || g) return;
+		let e = S.current;
+		e instanceof HTMLInputElement && (typeof document < "u" && document.activeElement === e || e.focus({ preventScroll: !0 }));
+	}, [
+		m,
+		R,
+		g
+	]);
+	let V = l.useCallback((e) => {
+		D.current = e, ne(e);
+	}, []), re = l.useCallback(() => {
+		O.current = !0;
+	}, []);
+	l.useEffect(() => {
+		if (!R) return;
+		let e = o.find((e) => e.value === r);
+		if (e && C(e)) {
+			V(e.value);
+			return;
+		}
+		V(o.find((e) => C(e))?.value ?? null);
+	}, [
+		R,
+		o,
+		V,
+		r
+	]);
+	let ie = l.useCallback((e) => {
+		if (e === null) {
+			a && a(null);
+			return;
+		}
+		C(o.find((t) => t.value === e)) && a && a(e);
+	}, [a, o]), H = l.useCallback((e) => {
+		if (e === null) {
+			a && a(null), i(null);
+			return;
+		}
+		C(o.find((t) => t.value === e)) && (a && a(e), i(e));
+	}, [
+		i,
+		a,
+		o
+	]);
+	l.useEffect(() => {
+		if (!R) return;
+		let e = j.current?.ownerDocument ?? document, t = e.defaultView ?? window, n = (e) => {
+			let t = e.target;
+			if (!(t instanceof Node)) return;
+			let n = j.current;
+			n && (n.contains(t) || M.current?.contains(t) || z(!1));
+		}, r = (e) => {
+			if (e.key !== "Escape" || !B.current) return;
+			let t = e.target;
+			if (!(t instanceof Node)) return;
+			let n = j.current, r = M.current;
+			!n?.contains(t) && !r?.contains(t) || (e.preventDefault(), e.stopPropagation(), z(!1));
+		};
+		return e.addEventListener("pointerdown", n, !0), t.addEventListener("keydown", r, !0), () => {
+			e.removeEventListener("pointerdown", n, !0), t.removeEventListener("keydown", r, !0);
+		};
+	}, [R, z]), l.useEffect(() => {
+		if (!R) return;
+		let e = M.current;
+		if (!e) return;
+		let t = (e) => {
+			let t = N.current;
+			if (!t) return;
+			let n = e.deltaY;
+			if (n === 0) return;
+			let r = Math.max(0, t.scrollHeight - t.clientHeight), i = t.scrollTop <= 0, a = t.scrollTop >= r, o = e.target;
+			if (o instanceof Node && t.contains(o)) {
+				(n < 0 && i || n > 0 && a) && e.preventDefault();
+				return;
+			}
+			e.preventDefault(), t.scrollTop = Math.min(r, Math.max(0, t.scrollTop + n));
+		};
+		return e.addEventListener("wheel", t, { passive: !1 }), () => {
+			e.removeEventListener("wheel", t);
+		};
+	}, [R]), l.useEffect(() => {
+		if (!R || _ !== void 0 && !v || typeof window > "u" || !("IntersectionObserver" in window)) return;
+		let e = S.current;
+		if (!(e instanceof HTMLElement)) return;
+		let t = !0, n = new IntersectionObserver((e) => {
+			if (!t) return;
+			let n = e[0];
+			n && !n.isIntersecting && z(!1);
+		});
+		return n.observe(e), () => {
+			t = !1, n.disconnect();
+		};
+	}, [
+		v,
+		R,
+		_,
+		z
+	]);
+	let U = l.useCallback(() => {
+		if (typeof window > "u") return;
+		let e = S.current, t = M.current;
+		if (!(e instanceof HTMLElement) || !t) return;
+		let n = e.getBoundingClientRect(), r = t.offsetHeight, i = window.innerWidth ?? 0, a = window.innerHeight ?? 0, o = n.width, s = n.left;
+		s + o > i - 8 && (s = Math.max(8, i - o - 8)), s < 8 && (s = 8);
+		let c = n.bottom + 8, l = c + r > a - 8, u = n.top - r - 8;
+		l && u >= 8 && (c = u), c < 8 && (c = 8), c + r > a - 8 && (c = Math.max(8, a - r - 8)), F({
+			left: s,
+			top: c,
+			width: o
+		});
+	}, []);
+	return l.useLayoutEffect(() => {
+		if (!R || m || typeof window > "u") return;
+		U();
+		let e = window.requestAnimationFrame(U);
+		return window.addEventListener("scroll", U, !0), window.addEventListener("resize", U), () => {
+			window.cancelAnimationFrame(e), window.removeEventListener("scroll", U, !0), window.removeEventListener("resize", U);
+		};
+	}, [
+		m,
+		R,
+		U
+	]), l.useEffect(() => {
+		if (!R) return;
+		let e = N.current;
+		if (!e) return;
+		let t = requestAnimationFrame(() => {
+			let t = e.querySelector("[role=\"option\"][data-state=\"checked\"]");
+			if (t instanceof HTMLElement) {
+				let n = t.offsetTop - 8, r = t.offsetTop + t.offsetHeight + 8;
+				if (n < e.scrollTop) {
+					e.scrollTop = Math.max(0, n);
 					return;
 				}
-				n > f.scrollTop + f.clientHeight && f.scrollTo({ top: Math.max(0, n - f.clientHeight) });
+				r > e.scrollTop + e.clientHeight && (e.scrollTop = Math.max(0, r - e.clientHeight));
 				return;
 			}
-			let t = Array.from(f.querySelectorAll("[role=\"option\"]"));
-			if (!t.length) return;
-			let n, r;
-			for (let e of t) {
+			let n = Array.from(e.querySelectorAll("[role=\"option\"]"));
+			if (!n.length) return;
+			let r, i;
+			for (let e of n) {
 				if (!e.hasAttribute("data-disabled")) {
-					n = e;
+					r = e;
 					break;
 				}
-				r = e;
+				i = e;
 			}
-			if (!n) return;
-			let i = Math.max(0, (a === "firstEnabledWithContext" && r ? r : n).offsetTop - 8);
-			f.scrollTo({ top: i });
+			r && (e.scrollTop = Math.max(0, (i || r).offsetTop - 8));
 		});
-		return () => cancelAnimationFrame(e);
-	}, S = [f, a], i[7] = a, i[8] = f, i[9] = x, i[10] = S) : (x = i[9], S = i[10]), h.useEffect(x, S);
-	let C = d === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", w;
-	i[11] !== s || i[12] !== C ? (w = e("relative z-[60] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", C, s), i[11] = s, i[12] = C, i[13] = w) : w = i[13];
-	let E;
-	i[14] === f ? E = i[15] : (E = {
-		viewport: f,
-		setViewport: v
-	}, i[14] = f, i[15] = E);
-	let k;
-	i[16] === Symbol.for("react.memo_cache_sentinel") ? (k = /* @__PURE__ */ g(D, {}), i[16] = k) : k = i[16];
-	let A = d === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]", j;
-	i[17] === A ? j = i[18] : (j = e("p-1 overflow-y-auto", A), i[17] = A, i[18] = j);
-	let M;
-	i[19] !== o || i[20] !== j ? (M = /* @__PURE__ */ g(p, {
-		ref: b,
-		className: j,
-		children: o
-	}), i[19] = o, i[20] = j, i[21] = M) : M = i[21];
+		return () => cancelAnimationFrame(t);
+	}, [R, o]), l.useEffect(() => {
+		if (!R || !k || !O.current) return;
+		let e = N.current;
+		if (!e) return;
+		let t = e.querySelector(`[role="option"][data-value="${k}"]`);
+		if (!(t instanceof HTMLElement)) return;
+		let n = t.offsetTop - 8, r = t.offsetTop + t.offsetHeight + 8;
+		if (n < e.scrollTop) {
+			e.scrollTop = Math.max(0, n);
+			return;
+		}
+		r > e.scrollTop + e.clientHeight && (e.scrollTop = Math.max(0, r - e.clientHeight));
+	}, [k, R]), /* @__PURE__ */ u("div", {
+		"data-slot": "hours-picker-input",
+		className: t("w-[150px]", c),
+		ref: j,
+		children: /* @__PURE__ */ d("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ u(A, {
+				id: te,
+				placeholder: s,
+				value: r,
+				onValueUpdate: ie,
+				onCommit: H,
+				options: o,
+				disabled: m,
+				readOnly: g,
+				open: R,
+				setOpen: z,
+				inputClassName: p,
+				triggerTestId: y,
+				isHydrated: x,
+				highlightedValueRef: D,
+				setHighlightedValue: V,
+				markKeyboardNavigation: re,
+				inputRef: (e) => {
+					S.current = e;
+				},
+				onDraftValueHandlerChange: E
+			}), R ? (() => {
+				let e = /* @__PURE__ */ u(n, { children: /* @__PURE__ */ d("div", {
+					ref: M,
+					"data-testid": b,
+					"data-state": "open",
+					className: t("pointer-events-auto fixed z-[60] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"),
+					style: {
+						left: P.left,
+						top: P.top,
+						width: P.width
+					},
+					children: [
+						/* @__PURE__ */ u(T, {
+							direction: "up",
+							viewportRef: N
+						}),
+						/* @__PURE__ */ u("div", {
+							ref: N,
+							role: "listbox",
+							className: "max-h-64 overflow-y-auto p-1 [overscroll-behavior:contain] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+							children: o.map((e) => {
+								let n = e.value === r;
+								return /* @__PURE__ */ d("div", {
+									role: "option",
+									"aria-selected": n,
+									"data-value": e.value,
+									"data-state": n ? "checked" : "unchecked",
+									"data-disabled": e.disabled ? "" : void 0,
+									className: t("relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none cursor-pointer", e.disabled && "pointer-events-none opacity-50", k === e.value && "bg-accent text-accent-foreground"),
+									onMouseDown: (e) => {
+										e.preventDefault();
+									},
+									onClick: () => {
+										e.disabled || (w.current?.(e.value), V(e.value), S.current?.focus({ preventScroll: !0 }), H(e.value), z(!1));
+									},
+									onPointerEnter: () => {
+										O.current || (O.current = !1, V(e.value));
+									},
+									onPointerMove: (t) => {
+										O.current && t.movementX === 0 && t.movementY === 0 || (O.current = !1, V(e.value));
+									},
+									children: [/* @__PURE__ */ u("span", {
+										className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+										children: n ? /* @__PURE__ */ u(f, {
+											"aria-hidden": !0,
+											className: "h-4 w-4"
+										}) : null
+									}), /* @__PURE__ */ d("div", {
+										className: "flex flex-col",
+										children: [/* @__PURE__ */ u("span", { children: e.label }), e.description == null ? null : /* @__PURE__ */ u("span", {
+											"data-slot": "description",
+											className: "text-xs text-muted-foreground",
+											children: e.description
+										})]
+									})]
+								}, e.value);
+							})
+						}),
+						/* @__PURE__ */ u(T, {
+							direction: "down",
+							viewportRef: N
+						})
+					]
+				}) });
+				return typeof document > "u" ? e : h(e, document.body);
+			})() : null]
+		})
+	});
+}
+E.displayName = "HourPickerInput";
+function D(e) {
+	let n = c(36), { id: a, value: l, onChange: f, onValueUpdate: p, options: m, placeholder: h, className: g, inputClassName: _, disabled: v, open: y, onOpenChange: b, triggerTestId: x, contentTestId: ee, isHydrated: te } = e, S = h === void 0 ? "Select time" : h, w;
+	n[0] !== f || n[1] !== p || n[2] !== m ? (w = (e) => {
+		C(m.find((t) => t.value === e)) && (p && p(e), f(e));
+	}, n[0] = f, n[1] = p, n[2] = m, n[3] = w) : w = n[3];
+	let T = w, E;
+	n[4] === g ? E = n[5] : (E = t("w-[150px]", g), n[4] = g, n[5] = E);
+	let D = l ?? "", k;
+	n[6] === T ? k = n[7] : (k = (e) => T(e), n[6] = T, n[7] = k);
+	let A = te ? "true" : void 0, ne = !l && "text-muted-foreground", j = y && "ring-2 ring-primary ring-offset-2", M;
+	n[8] !== _ || n[9] !== ne || n[10] !== j ? (M = t("transition-colors hover:bg-accent hover:text-accent-foreground", ne, j, "[&_[data-slot='description']]:hidden", _), n[8] = _, n[9] = ne, n[10] = j, n[11] = M) : M = n[11];
 	let N;
-	i[22] === Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ g(O, {}), i[22] = N) : N = i[22];
+	n[12] === S ? N = n[13] : (N = /* @__PURE__ */ u(s, { placeholder: S }), n[12] = S, n[13] = N);
 	let P;
-	i[23] !== M || i[24] !== E ? (P = /* @__PURE__ */ _(T.Provider, {
-		value: E,
-		children: [
-			k,
-			M,
-			N
-		]
-	}), i[23] = M, i[24] = E, i[25] = P) : P = i[25];
+	n[14] !== a || n[15] !== N || n[16] !== A || n[17] !== M || n[18] !== x ? (P = /* @__PURE__ */ u(o, {
+		id: a,
+		"data-testid": x,
+		"data-hydrated": A,
+		className: M,
+		children: N
+	}), n[14] = a, n[15] = N, n[16] = A, n[17] = M, n[18] = x, n[19] = P) : P = n[19];
 	let F;
-	return i[26] !== d || i[27] !== l || i[28] !== r || i[29] !== P || i[30] !== w ? (F = /* @__PURE__ */ g(c, { children: /* @__PURE__ */ g(t, {
-		ref: r,
-		className: w,
-		position: d,
-		...l,
-		children: P
-	}) }), i[26] = d, i[27] = l, i[28] = r, i[29] = P, i[30] = w, i[31] = F) : F = i[31], F;
-});
-k.displayName = t.displayName;
-var A = h.forwardRef((t, n) => {
-	let r = m(9), i, a;
-	r[0] === t ? (i = r[1], a = r[2]) : ({className: i, ...a} = t, r[0] = t, r[1] = i, r[2] = a);
-	let o;
-	r[3] === i ? o = r[4] : (o = e("py-1.5 pl-8 pr-2 text-sm font-semibold", i), r[3] = i, r[4] = o);
-	let c;
-	return r[5] !== a || r[6] !== n || r[7] !== o ? (c = /* @__PURE__ */ g(s, {
-		ref: n,
-		className: o,
-		...a
-	}), r[5] = a, r[6] = n, r[7] = o, r[8] = c) : c = r[8], c;
-});
-A.displayName = s.displayName;
-var j = h.forwardRef((t, n) => {
-	let r = m(14), s, c, l;
-	r[0] === t ? (s = r[1], c = r[2], l = r[3]) : ({className: c, children: s, ...l} = t, r[0] = t, r[1] = s, r[2] = c, r[3] = l);
-	let u;
-	r[4] === c ? u = r[5] : (u = e("relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer", c), r[4] = c, r[5] = u);
-	let d;
-	r[6] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ g("span", {
-		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-		children: /* @__PURE__ */ g(a, { children: /* @__PURE__ */ g(v, { className: "h-4 w-4" }) })
-	}), r[6] = d) : d = r[6];
-	let f;
-	r[7] === s ? f = r[8] : (f = /* @__PURE__ */ g(o, { children: s }), r[7] = s, r[8] = f);
-	let p;
-	return r[9] !== l || r[10] !== n || r[11] !== u || r[12] !== f ? (p = /* @__PURE__ */ _(i, {
-		ref: n,
-		className: u,
-		...l,
-		children: [d, f]
-	}), r[9] = l, r[10] = n, r[11] = u, r[12] = f, r[13] = p) : p = r[13], p;
-});
-j.displayName = i.displayName;
-var M = h.forwardRef((t, n) => {
-	let r = m(9), i, a;
-	r[0] === t ? (i = r[1], a = r[2]) : ({className: i, ...a} = t, r[0] = t, r[1] = i, r[2] = a);
-	let o;
-	r[3] === i ? o = r[4] : (o = e("-mx-1 my-1 h-px bg-muted", i), r[3] = i, r[4] = o);
-	let s;
-	return r[5] !== a || r[6] !== n || r[7] !== o ? (s = /* @__PURE__ */ g(u, {
-		ref: n,
-		className: o,
-		...a
-	}), r[5] = a, r[6] = n, r[7] = o, r[8] = s) : s = r[8], s;
-});
-M.displayName = u.displayName;
+	n[20] === m ? F = n[21] : (F = m.map(O), n[20] = m, n[21] = F);
+	let I;
+	n[22] !== ee || n[23] !== F ? (I = /* @__PURE__ */ u(i, {
+		"data-testid": ee,
+		autoScroll: "firstEnabledWithContext",
+		className: "max-h-64 overflow-y-auto",
+		children: F
+	}), n[22] = ee, n[23] = F, n[24] = I) : I = n[24];
+	let L;
+	n[25] !== v || n[26] !== b || n[27] !== y || n[28] !== P || n[29] !== I || n[30] !== D || n[31] !== k ? (L = /* @__PURE__ */ d(r, {
+		disabled: v,
+		open: y,
+		onOpenChange: b,
+		value: D,
+		onValueChange: k,
+		children: [P, I]
+	}), n[25] = v, n[26] = b, n[27] = y, n[28] = P, n[29] = I, n[30] = D, n[31] = k, n[32] = L) : L = n[32];
+	let R;
+	return n[33] !== L || n[34] !== E ? (R = /* @__PURE__ */ u("div", {
+		"data-slot": "hours-picker-field",
+		className: E,
+		children: L
+	}), n[33] = L, n[34] = E, n[35] = R) : R = n[35], R;
+}
+function O(e) {
+	return /* @__PURE__ */ d(a, {
+		value: e.value,
+		disabled: e.disabled,
+		children: [/* @__PURE__ */ u("span", { children: e.label }), e.description == null ? null : /* @__PURE__ */ u("span", {
+			"data-slot": "description",
+			className: "block text-xs text-muted-foreground",
+			children: e.description
+		})]
+	}, e.value);
+}
+function k(t) {
+	let n = c(4);
+	if (e()) {
+		let e;
+		return n[0] === t ? e = n[1] : (e = /* @__PURE__ */ u(D, { ...t }), n[0] = t, n[1] = e), e;
+	}
+	let r;
+	return n[2] === t ? r = n[3] : (r = /* @__PURE__ */ u(E, { ...t }), n[2] = t, n[3] = r), r;
+}
+k.displayName = "HourPickerField";
+function A(e) {
+	let n = c(93), { id: r, placeholder: i, value: a, onValueUpdate: o, onCommit: s, options: f, disabled: m, readOnly: h, open: _, setOpen: v, inputClassName: y, triggerTestId: x, isHydrated: T, highlightedValueRef: E, setHighlightedValue: D, markKeyboardNavigation: O, inputRef: k, onDraftValueHandlerChange: A } = e, N = l.useRef(!1), P = l.useRef(!1), F = l.useRef(!1), I = l.useRef(null), L = l.useRef(null), R = l.useRef(!1), z;
+	n[0] === a ? z = n[1] : (z = () => a || "", n[0] = a, n[1] = z);
+	let [B, V] = l.useState(z), re, ie;
+	n[2] === A ? (re = n[3], ie = n[4]) : (re = () => (A((e) => {
+		V(e);
+	}), () => {
+		A(null);
+	}), ie = [A], n[2] = A, n[3] = re, n[4] = ie), l.useEffect(re, ie);
+	let H;
+	n[5] !== E || n[6] !== o || n[7] !== f || n[8] !== D || n[9] !== a ? (H = (e) => {
+		let t = E.current ?? a ?? "", n = f.findIndex((e) => e.value === t);
+		n === -1 && (n = e === 1 ? -1 : f.length);
+		for (let t = n + e; t >= 0 && t < f.length; t += e) {
+			let e = f[t];
+			if (C(e)) {
+				D(e.value), I.current = e.value, V(e.value), o(e.value);
+				return;
+			}
+		}
+	}, n[5] = E, n[6] = o, n[7] = f, n[8] = D, n[9] = a, n[10] = H) : H = n[10];
+	let U = H, ae, oe;
+	n[11] === a ? (ae = n[12], oe = n[13]) : (ae = () => {
+		N.current || V(a || "");
+	}, oe = [a], n[11] = a, n[12] = ae, n[13] = oe), l.useEffect(ae, oe);
+	let se, ce;
+	n[14] === B ? (se = n[15], ce = n[16]) : (se = () => {
+		L.current = ee(B);
+	}, ce = [B], n[14] = B, n[15] = se, n[16] = ce), l.useEffect(se, ce);
+	let le, ue;
+	n[17] === a ? (le = n[18], ue = n[19]) : (ue = () => {
+		a === null && (R.current = !1);
+	}, le = [a], n[17] = a, n[18] = le, n[19] = ue), l.useEffect(ue, le);
+	let de = !B && "text-muted-foreground", fe = _ && "ring-2 ring-primary ring-offset-2", pe;
+	n[20] !== y || n[21] !== de || n[22] !== fe ? (pe = t("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "transition-colors group-hover:bg-accent group-hover:text-accent-foreground", de, fe, "[&_[data-slot='description']]:hidden", y), n[20] = y, n[21] = de, n[22] = fe, n[23] = pe) : pe = n[23];
+	let me = pe, he = T ? "true" : void 0, ge;
+	n[24] === Symbol.for("react.memo_cache_sentinel") ? (ge = [{
+		mask: "00:00",
+		lazy: !0
+	}, {
+		mask: "0:00",
+		lazy: !0
+	}], n[24] = ge) : ge = n[24];
+	let W;
+	n[25] === f ? W = n[26] : (W = (e, t) => {
+		let n = (t.value + e).replace(/\D/g, "");
+		if (n.length <= 2 || n.length >= 4) return t.compiledMasks[0];
+		let r = b(Number(n.slice(0, 2)));
+		return f.some((e) => e.value.startsWith(`${r}:`)) ? t.compiledMasks[0] : t.compiledMasks[1];
+	}, n[25] = f, n[26] = W);
+	let G;
+	n[27] !== s || n[28] !== a ? (G = (e, t, n) => {
+		if (!n) return;
+		let r = typeof e == "string" ? e : String(e ?? ""), i = r.replace(/\D/g, ""), o = ee(r);
+		if (L.current !== o) {
+			if (L.current = o, V(r), i.length !== 0) {
+				R.current = !1;
+				return;
+			}
+			a && !R.current && (R.current = !0, s(null));
+		}
+	}, n[27] = s, n[28] = a, n[29] = G) : G = n[29];
+	let K;
+	n[30] !== s || n[31] !== f || n[32] !== D || n[33] !== a ? (K = (e, t, n) => {
+		if (!n) return;
+		let r = typeof e == "string" ? e : String(e ?? "");
+		if (I.current === r) {
+			I.current = null;
+			return;
+		}
+		let i = te(r, f);
+		if (!i) return;
+		if (i.selectableValue) {
+			if (D(i.selectableValue), V(i.selectableValue), a === i.selectableValue) return;
+			s(i.selectableValue);
+			return;
+		}
+		let o = S(i.parsed);
+		if (o == null) return;
+		let c = w(o, f);
+		c && D(c.value);
+	}, n[30] = s, n[31] = f, n[32] = D, n[33] = a, n[34] = K) : K = n[34];
+	let q, J, Y;
+	n[35] !== m || n[36] !== _ || n[37] !== v ? (q = () => {
+		P.current = !0, !m && (_ || v(!0));
+	}, J = (e) => {
+		P.current = !0, F.current = typeof document < "u" && document.activeElement === e.currentTarget, !m && (_ || v(!0));
+	}, Y = () => {
+		m || _ || v(!0);
+	}, n[35] = m, n[36] = _, n[37] = v, n[38] = q, n[39] = J, n[40] = Y) : (q = n[38], J = n[39], Y = n[40]);
+	let X;
+	n[41] !== m || n[42] !== B || n[43] !== E || n[44] !== O || n[45] !== U || n[46] !== s || n[47] !== _ || n[48] !== f || n[49] !== D || n[50] !== v ? (X = (e) => {
+		if (!m) {
+			if (e.key === "Tab" && _ && !e.defaultPrevented) {
+				v(!1);
+				return;
+			}
+			if (e.key === "Escape") {
+				if (!_) return;
+				e.preventDefault(), v(!1);
+				return;
+			}
+			if (!_ && !e.defaultPrevented && (e.key.length === 1 || e.key === "Backspace" || e.key === "Delete") && !e.ctrlKey && !e.metaKey && !e.altKey && v(!0), e.key === "ArrowDown" || e.key === "ArrowUp") {
+				if (O(), e.preventDefault(), !_) {
+					v(!0);
+					return;
+				}
+				U(e.key === "ArrowDown" ? 1 : -1);
+				return;
+			}
+			if (e.key === "Enter") {
+				O();
+				let t = te(B, f);
+				if (!t) {
+					if (!_ || B.trim() !== "") return;
+					let t = f.find((e) => e.value === E.current), n = (C(t) ? t?.value : void 0) ?? f.find(M)?.value;
+					if (!n) return;
+					e.preventDefault(), D(n), V(n), s(n), v(!1);
+					return;
+				}
+				if (t.selectableValue) {
+					e.preventDefault(), D(t.selectableValue), V(t.selectableValue), s(t.selectableValue), v(!1);
+					return;
+				}
+				let n = S(t.parsed);
+				if (n == null) return;
+				let r = w(n, f);
+				if (!r) return;
+				e.preventDefault(), D(r.value), V(r.value), s(r.value), v(!1);
+				return;
+			}
+		}
+	}, n[41] = m, n[42] = B, n[43] = E, n[44] = O, n[45] = U, n[46] = s, n[47] = _, n[48] = f, n[49] = D, n[50] = v, n[51] = X) : X = n[51];
+	let Z;
+	n[52] !== m || n[53] !== _ || n[54] !== v ? (Z = (e) => {
+		let t = !P.current || !F.current;
+		if (P.current = !1, F.current = !1, N.current = !0, t) {
+			let t = e.currentTarget;
+			requestAnimationFrame(() => t.select());
+		}
+		m || _ || v(!0);
+	}, n[52] = m, n[53] = _, n[54] = v, n[55] = Z) : Z = n[55];
+	let Q;
+	n[56] !== B || n[57] !== s || n[58] !== f || n[59] !== a ? (Q = () => {
+		N.current = !1;
+		let e = B.trim();
+		if (!e) {
+			V(a || "");
+			return;
+		}
+		let t = te(e, f);
+		if (!t) {
+			V(a || "");
+			return;
+		}
+		if (!t.selectableValue) {
+			V(a || "");
+			return;
+		}
+		V(t.selectableValue), a !== t.selectableValue && s(t.selectableValue);
+	}, n[56] = B, n[57] = s, n[58] = f, n[59] = a, n[60] = Q) : Q = n[60];
+	let $;
+	n[61] !== m || n[62] !== B || n[63] !== r || n[64] !== k || n[65] !== i || n[66] !== h || n[67] !== he || n[68] !== W || n[69] !== G || n[70] !== K || n[71] !== q || n[72] !== J || n[73] !== Y || n[74] !== X || n[75] !== Z || n[76] !== Q || n[77] !== me || n[78] !== x ? ($ = /* @__PURE__ */ u(g, {
+		id: r,
+		"data-testid": x,
+		"data-hydrated": he,
+		type: "text",
+		disabled: m,
+		readOnly: h,
+		inputRef: k,
+		autoComplete: "off",
+		mask: ge,
+		dispatch: W,
+		placeholder: i,
+		value: B,
+		className: me,
+		onAccept: G,
+		onComplete: K,
+		onPointerDown: q,
+		onMouseDown: J,
+		onClick: Y,
+		onKeyDown: X,
+		onFocus: Z,
+		onBlur: Q
+	}), n[61] = m, n[62] = B, n[63] = r, n[64] = k, n[65] = i, n[66] = h, n[67] = he, n[68] = W, n[69] = G, n[70] = K, n[71] = q, n[72] = J, n[73] = Y, n[74] = X, n[75] = Z, n[76] = Q, n[77] = me, n[78] = x, n[79] = $) : $ = n[79];
+	let _e;
+	n[80] === Symbol.for("react.memo_cache_sentinel") ? (_e = t("absolute right-1 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"), n[80] = _e) : _e = n[80];
+	let ve = _ ? "Close time picker" : "Open time picker", ye;
+	n[81] !== m || n[82] !== _ || n[83] !== v ? (ye = () => {
+		m || v(!_);
+	}, n[81] = m, n[82] = _, n[83] = v, n[84] = ye) : ye = n[84];
+	let be;
+	n[85] === Symbol.for("react.memo_cache_sentinel") ? (be = /* @__PURE__ */ u(p, {
+		"aria-hidden": !0,
+		className: "size-4"
+	}), n[85] = be) : be = n[85];
+	let xe;
+	n[86] !== m || n[87] !== ve || n[88] !== ye ? (xe = /* @__PURE__ */ u("button", {
+		type: "button",
+		tabIndex: -1,
+		disabled: m,
+		"data-slot": "hours-picker-input-toggle",
+		className: _e,
+		"aria-label": ve,
+		onPointerDown: j,
+		onMouseDown: ne,
+		onClick: ye,
+		children: be
+	}), n[86] = m, n[87] = ve, n[88] = ye, n[89] = xe) : xe = n[89];
+	let Se;
+	return n[90] !== $ || n[91] !== xe ? (Se = /* @__PURE__ */ d("div", {
+		className: "relative group",
+		children: [$, xe]
+	}), n[90] = $, n[91] = xe, n[92] = Se) : Se = n[92], Se;
+}
+function ne(e) {
+	e.preventDefault();
+}
+function j(e) {
+	e.preventDefault();
+}
+function M(e) {
+	return C(e);
+}
 //#endregion
-export { x as Select, k as SelectContent, S as SelectGroup, j as SelectItem, A as SelectLabel, O as SelectScrollDownButton, D as SelectScrollUpButton, M as SelectSeparator, w as SelectTrigger, C as SelectValue };
+export { k as HourPickerField, E as HourPickerInput };
 
 //# sourceMappingURL=index244.js.map