@loczer/storefront-sdk 0.195.0 → 0.197.0

package/dist/components/BookingPeriodSelector/components/internal/StorefrontHourPickerField.js

@@ -1,21 +1,20 @@
 import { cn as e } from "../../../../lib/utils.js";
-import { useIsTouchDevice as t } from "./useIsTouchDevice.js";
-import * as n from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Check as o, ChevronDown as s, ChevronUp as c } from "lucide-react";
-import { createPortal as l } from "react-dom";
-import { IMaskInput as u } from "react-imask";
-import d, { InputMask as f } from "imask";
+import * as t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Check as a, ChevronDown as o, ChevronUp as s } from "lucide-react";
+import { createPortal as c } from "react-dom";
+import { IMaskInput as l } from "react-imask";
+import u, { InputMask as d } from "imask";
 //#region src/components/BookingPeriodSelector/components/internal/StorefrontHourPickerField.tsx
-var p = d;
-typeof p.InputMask != "function" && (p.InputMask = f);
-var m = {
+var f = u;
+typeof f.InputMask != "function" && (f.InputMask = d);
+var p = {
 	left: 0,
 	top: 0,
 	width: 0,
 	strategy: "fixed"
 };
-function h(e, t, n) {
+function m(e, t, n) {
 	let r = e.getBoundingClientRect(), i = t.offsetHeight, a = window.innerWidth ?? 0, o = window.innerHeight ?? 0, s = r.width, c = r.left;
 	c + s > a - 8 && (c = Math.max(8, a - s - 8)), c < 8 && (c = 8);
 	let l = r.bottom + 8, u = l + i > o - 8, d = r.top - i - 8;
@@ -33,19 +32,19 @@ function h(e, t, n) {
 		strategy: "absolute"
 	};
 }
-function g(e) {
+function h(e) {
 	return String(e).padStart(2, "0");
 }
-function _(e) {
+function g(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 : `${g(r)}:${g(i)}`;
+	return !Number.isFinite(r) || !Number.isFinite(i) || r < 0 || r > 23 || i < 0 || i > 59 ? null : `${h(r)}:${h(i)}`;
 }
-function v(e) {
-	let t = _(e);
+function _(e) {
+	let t = g(e);
 	if (t) return `parsed:${t}`;
 	let n = e.replace(/\D/g, "");
 	if (!n) return "empty";
@@ -53,9 +52,9 @@ function v(e) {
 	let r = n.slice(-2), i = n.slice(0, -2);
 	return `hour-minute:${Number(i)}:${r}`;
 }
-function y(e, t) {
-	let n = _(e);
-	return n ? x(t.find((e) => e.value === n)) ? {
+function v(e, t) {
+	let n = g(e);
+	return n ? b(t.find((e) => e.value === n)) ? {
 		parsed: n,
 		selectableValue: n
 	} : {
@@ -63,117 +62,117 @@ function y(e, t) {
 		selectableValue: null
 	} : null;
 }
-function b(e) {
+function y(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 x(e) {
+function b(e) {
 	return e ? !e.disabled : !1;
 }
-function S(e, t, n) {
+function x(e, t, n) {
 	let r = e ? n.findIndex((t) => t.value === e) : -1;
 	r === -1 && (r = t === 1 ? -1 : n.length);
 	for (let e = r + t; e >= 0 && e < n.length; e += t) {
 		let t = n[e];
-		if (x(t)) return t.value;
+		if (b(t)) return t.value;
 	}
 	return null;
 }
-function C(e, t, r, i) {
-	n.useEffect(() => {
-		if (!t || !r) return;
-		let n = e.current, a = n?.ownerDocument.defaultView?.IntersectionObserver;
-		if (!n || !a) return;
+function S(e, n, r, i) {
+	t.useEffect(() => {
+		if (!n || !r) return;
+		let t = e.current, a = t?.ownerDocument.defaultView?.IntersectionObserver;
+		if (!t || !a) return;
 		let o = !0, s = new a((e) => {
 			if (!o) return;
 			let t = e[0];
 			t && !t.isIntersecting && i(!1);
 		});
-		return s.observe(n), () => {
+		return s.observe(t), () => {
 			o = !1, s.disconnect();
 		};
 	}, [
 		r,
-		t,
+		n,
 		i,
 		e
 	]);
 }
-function w(e, t) {
+function C(e, t) {
 	let n = null, r = Infinity, i = -Infinity;
 	for (let a of t) {
-		if (!x(a)) continue;
-		let t = b(a.value);
+		if (!b(a)) continue;
+		let t = y(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: t, viewportRef: r, speed: a = 400, className: o }) {
-	let [l, u] = n.useState(!0), d = n.useRef(void 0), f = n.useRef(void 0), p = n.useRef(!1), m = n.useCallback(() => {
-		let e = r.current;
+function w({ direction: n, viewportRef: i, speed: a = 400, className: c }) {
+	let [l, u] = t.useState(!0), d = t.useRef(void 0), f = t.useRef(void 0), p = t.useRef(!1), m = t.useCallback(() => {
+		let e = i.current;
 		if (!e) {
 			u(!0);
 			return;
 		}
-		let { scrollTop: n, scrollHeight: i, clientHeight: a } = e, o = n > 2, s = n < i - a - 2;
-		if (!(i > a + 2)) {
+		let { scrollTop: t, scrollHeight: r, clientHeight: a } = e, o = t > 2, s = t < r - a - 2;
+		if (!(r > a + 2)) {
 			u(!0);
 			return;
 		}
-		u(t === "up" ? !o : !s);
-	}, [t, r]);
-	n.useEffect(() => {
-		let e = r.current;
+		u(n === "up" ? !o : !s);
+	}, [n, i]);
+	t.useEffect(() => {
+		let e = i.current;
 		if (!e) return;
 		m();
 		let t = () => m(), n = () => m();
 		e.addEventListener("scroll", t, { passive: !0 });
-		let i = new ResizeObserver(n);
-		i.observe(e);
+		let r = new ResizeObserver(n);
+		r.observe(e);
 		let a = new MutationObserver(n);
 		return a.observe(e, {
 			childList: !0,
 			subtree: !0
 		}), () => {
-			e.removeEventListener("scroll", t), i.disconnect(), a.disconnect();
+			e.removeEventListener("scroll", t), r.disconnect(), a.disconnect();
 		};
-	}, [r, m]);
-	let h = n.useCallback(() => {
+	}, [i, m]);
+	let h = t.useCallback(() => {
 		d.current &&= (cancelAnimationFrame(d.current), void 0), p.current = !1, f.current = void 0;
-	}, []), g = n.useCallback((e) => {
-		let n = r.current;
-		if (!n || l || !p.current) {
+	}, []), g = t.useCallback((e) => {
+		let t = i.current;
+		if (!t || l || !p.current) {
 			h();
 			return;
 		}
 		f.current ||= e;
-		let i = a * (e - f.current) / 1e3;
-		if (i < .1) {
+		let r = a * (e - f.current) / 1e3;
+		if (r < .1) {
 			d.current = requestAnimationFrame(g);
 			return;
 		}
-		let o = n.scrollTop, s = n.scrollHeight - n.clientHeight, c;
-		c = t === "up" ? Math.max(0, o - i) : Math.min(s, o + i), n.scrollTo({ top: c }), f.current = e, (t === "up" ? c > 1 : c < s - 1) && Math.abs(c - o) > .01 ? d.current = requestAnimationFrame(g) : (h(), setTimeout(m, 16));
+		let o = t.scrollTop, s = t.scrollHeight - t.clientHeight, c;
+		c = n === "up" ? Math.max(0, o - r) : Math.min(s, o + r), t.scrollTo({ top: c }), f.current = e, (n === "up" ? c > 1 : c < s - 1) && Math.abs(c - o) > .01 ? d.current = requestAnimationFrame(g) : (h(), setTimeout(m, 16));
 	}, [
 		m,
-		t,
+		n,
 		l,
 		a,
 		h,
-		r
-	]), _ = n.useCallback(() => {
-		l || !r.current || p.current || (p.current = !0, f.current = void 0, d.current = requestAnimationFrame(g));
+		i
+	]), _ = t.useCallback(() => {
+		l || !i.current || p.current || (p.current = !0, f.current = void 0, d.current = requestAnimationFrame(g));
 	}, [
 		l,
 		g,
-		r
+		i
 	]);
-	return n.useEffect(() => h, [h]), /* @__PURE__ */ i("div", {
-		className: e("flex items-center justify-center py-1 select-none", l ? "cursor-default opacity-40" : "cursor-pointer opacity-100 hover:bg-accent/20", o),
+	return t.useEffect(() => h, [h]), /* @__PURE__ */ r("div", {
+		className: e("flex items-center justify-center py-1 select-none", l ? "cursor-default opacity-40" : "cursor-pointer opacity-100 hover:bg-accent/20", c),
 		onPointerEnter: () => {
 			l || _();
 		},
@@ -183,17 +182,17 @@ function T({ direction: t, viewportRef: r, speed: a = 400, className: o }) {
 		onPointerLeave: () => {
 			h();
 		},
-		children: i(t === "up" ? c : s, {
+		children: r(n === "up" ? s : o, {
 			"aria-hidden": !0,
 			className: "h-4 w-4 opacity-50"
 		})
 	});
 }
-function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeholder: f = "Select time", className: p, inputClassName: g, disabled: _, readOnly: v, open: y, onOpenChange: b, triggerTestId: S, contentTestId: w, isHydrated: E, portalContainer: D }) {
-	let O = n.useId(), A = t ?? `hours-picker-${O}`, j = n.useRef(null), M = n.useRef(null), N = n.useCallback((e) => {
+function T({ id: o, value: s, onChange: l, onValueUpdate: u, options: d, placeholder: f = "Select time", className: h, inputClassName: g, disabled: _, readOnly: v, open: y, onOpenChange: x, triggerTestId: C, contentTestId: T, isHydrated: E, portalContainer: D }) {
+	let k = t.useId(), A = o ?? `hours-picker-${k}`, j = t.useRef(null), M = t.useRef(null), N = t.useCallback((e) => {
 		M.current = e;
-	}, []), P = n.useRef(null), F = n.useRef(!1), [I, L] = n.useState(null), R = n.useRef(null), z = n.useRef(null), B = n.useRef(null), [V, H] = n.useState(m), [U, W] = n.useState(!1), G = y ?? U, K = b ?? W, q = n.useRef(!1);
-	q.current = G, n.useEffect(() => {
+	}, []), P = t.useRef(null), F = t.useRef(!1), [I, L] = t.useState(null), R = t.useRef(null), z = t.useRef(null), B = t.useRef(null), [V, H] = t.useState(p), [U, W] = t.useState(!1), G = y ?? U, K = x ?? W, q = t.useRef(!1);
+	q.current = G, t.useEffect(() => {
 		if (!G || _ || v) return;
 		let e = j.current;
 		e instanceof HTMLInputElement && (typeof document < "u" && document.activeElement === e || e.focus({ preventScroll: !0 }));
@@ -202,19 +201,19 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 		G,
 		v
 	]);
-	let J = n.useCallback((e) => {
+	let J = t.useCallback((e) => {
 		P.current = e, L(e);
-	}, []), Y = n.useCallback(() => {
+	}, []), Y = t.useCallback(() => {
 		F.current = !0;
 	}, []);
-	n.useEffect(() => {
+	t.useEffect(() => {
 		if (!G) return;
 		let e = d.find((e) => e.value === s);
-		if (e && x(e)) {
+		if (e && b(e)) {
 			J(e.value);
 			return;
 		}
-		let t = d.find((e) => x(e));
+		let t = d.find((e) => b(e));
 		J(t?.value ?? null);
 	}, [
 		G,
@@ -222,24 +221,24 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 		J,
 		s
 	]);
-	let X = n.useCallback((e) => {
+	let X = t.useCallback((e) => {
 		if (e === null) {
 			u && u(null);
 			return;
 		}
-		x(d.find((t) => t.value === e)) && u && u(e);
-	}, [u, d]), Z = n.useCallback((e) => {
+		b(d.find((t) => t.value === e)) && u && u(e);
+	}, [u, d]), Z = t.useCallback((e) => {
 		if (e === null) {
-			u && u(null), c(null);
+			u && u(null), l(null);
 			return;
 		}
-		x(d.find((t) => t.value === e)) && (u && u(e), c(e));
+		b(d.find((t) => t.value === e)) && (u && u(e), l(e));
 	}, [
-		c,
+		l,
 		u,
 		d
 	]);
-	n.useEffect(() => {
+	t.useEffect(() => {
 		if (!G) return;
 		let e = R.current?.ownerDocument ?? document, t = e.defaultView ?? window, n = (e) => {
 			let t = e.target;
@@ -256,7 +255,7 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 		return e.addEventListener("pointerdown", n, !0), t.addEventListener("keydown", r, !0), () => {
 			e.removeEventListener("pointerdown", n, !0), t.removeEventListener("keydown", r, !0);
 		};
-	}, [G, K]), n.useEffect(() => {
+	}, [G, K]), t.useEffect(() => {
 		if (!G) return;
 		let e = z.current;
 		if (!e) return;
@@ -275,13 +274,13 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 		return e.addEventListener("wheel", t, { passive: !1 }), () => {
 			e.removeEventListener("wheel", t);
 		};
-	}, [G]), C(j, G, y === void 0 || b !== void 0, K);
-	let Q = n.useCallback(() => {
+	}, [G]), S(j, G, y === void 0 || x !== void 0, K);
+	let Q = t.useCallback(() => {
 		if (typeof window > "u") return;
 		let e = j.current, t = z.current;
-		!(e instanceof HTMLElement) || !t || H(h(e, t, D));
+		!(e instanceof HTMLElement) || !t || H(m(e, t, D));
 	}, [D]);
-	n.useLayoutEffect(() => {
+	return t.useLayoutEffect(() => {
 		if (!G || _ || typeof window > "u") return;
 		Q();
 		let e = window.requestAnimationFrame(Q);
@@ -292,7 +291,7 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 		_,
 		G,
 		Q
-	]), n.useEffect(() => {
+	]), t.useEffect(() => {
 		if (!G) return;
 		let e = B.current;
 		if (!e) return;
@@ -322,7 +321,7 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 			e.scrollTop = a;
 		});
 		return () => cancelAnimationFrame(t);
-	}, [G, d]), n.useEffect(() => {
+	}, [G, d]), t.useEffect(() => {
 		if (!G || !I || !F.current) return;
 		let e = B.current;
 		if (!e) return;
@@ -334,28 +333,25 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 			return;
 		}
 		r > e.scrollTop + e.clientHeight && (e.scrollTop = Math.max(0, r - e.clientHeight));
-	}, [I, G]);
-	let $ = d.find((e) => e.value === s);
-	return /* @__PURE__ */ i("div", {
+	}, [I, G]), /* @__PURE__ */ r("div", {
 		"data-slot": "hours-picker-input",
-		className: e("w-[150px]", p),
+		className: e("w-[150px]", h),
 		ref: R,
-		children: /* @__PURE__ */ a("div", {
+		children: /* @__PURE__ */ i("div", {
 			className: "relative",
-			children: [/* @__PURE__ */ i(k, {
+			children: [/* @__PURE__ */ r(O, {
 				id: A,
 				placeholder: f,
 				value: s,
 				onValueUpdate: X,
 				onCommit: Z,
 				options: d,
-				selectedLabel: $?.selectedLabel,
 				disabled: _,
 				readOnly: v,
 				open: G,
 				setOpen: K,
 				inputClassName: g,
-				triggerTestId: S,
+				triggerTestId: C,
 				isHydrated: E,
 				highlightedValueRef: P,
 				setHighlightedValue: J,
@@ -365,9 +361,9 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 				},
 				onDraftValueHandlerChange: N
 			}), G ? (() => {
-				let t = /* @__PURE__ */ i(r, { children: /* @__PURE__ */ a("div", {
+				let t = /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
 					ref: z,
-					"data-testid": w,
+					"data-testid": T,
 					"data-state": "open",
 					className: e("pointer-events-auto 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: {
@@ -377,23 +373,23 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 						width: V.width
 					},
 					children: [
-						/* @__PURE__ */ i(T, {
+						/* @__PURE__ */ r(w, {
 							direction: "up",
 							viewportRef: B
 						}),
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ r("div", {
 							ref: B,
 							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: d.map((t) => {
 								let n = t.value === s;
-								return /* @__PURE__ */ a("div", {
+								return /* @__PURE__ */ i("div", {
 									role: "option",
 									"aria-selected": n,
 									"data-value": t.value,
 									"data-state": n ? "checked" : "unchecked",
 									"data-disabled": t.disabled ? "" : void 0,
-									className: e("relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none cursor-pointer", t.disabled && "pointer-events-none opacity-50", I === t.value && "bg-accent text-accent-foreground"),
+									className: e("relative flex w-full select-none items-center justify-center rounded-sm px-2 py-1.5 text-center text-sm outline-none cursor-pointer", t.disabled && "pointer-events-none opacity-50", I === t.value && "bg-accent text-accent-foreground"),
 									onMouseDown: (e) => {
 										e.preventDefault();
 									},
@@ -406,15 +402,15 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 									onPointerMove: (e) => {
 										F.current && e.movementX === 0 && e.movementY === 0 || (F.current = !1, J(t.value));
 									},
-									children: [/* @__PURE__ */ i("span", {
+									children: [/* @__PURE__ */ r("span", {
 										className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-										children: n ? /* @__PURE__ */ i(o, {
+										children: n ? /* @__PURE__ */ r(a, {
 											"aria-hidden": !0,
 											className: "h-4 w-4"
 										}) : null
-									}), /* @__PURE__ */ a("div", {
-										className: "flex flex-col",
-										children: [/* @__PURE__ */ i("span", { children: t.label }), t.description == null ? null : /* @__PURE__ */ i("span", {
+									}), /* @__PURE__ */ i("div", {
+										className: "flex w-full min-w-0 flex-col items-center",
+										children: [/* @__PURE__ */ r("span", { children: t.label }), t.description == null ? null : /* @__PURE__ */ r("span", {
 											"data-slot": "description",
 											className: "text-xs text-muted-foreground",
 											children: t.description
@@ -423,42 +419,42 @@ function E({ id: t, value: s, onChange: c, onValueUpdate: u, options: d, placeho
 								}, t.value);
 							})
 						}),
-						/* @__PURE__ */ i(T, {
+						/* @__PURE__ */ r(w, {
 							direction: "down",
 							viewportRef: B
 						})
 					]
 				}) });
-				return typeof document > "u" ? t : l(t, D ?? document.body);
+				return typeof document > "u" ? t : c(t, D ?? document.body);
 			})() : null]
 		})
 	});
 }
-E.displayName = "HourPickerInput";
-function D({ id: t, value: c, onChange: u, onValueUpdate: d, options: f, placeholder: p = "Select time", className: g, inputClassName: _, disabled: v, readOnly: y, open: b, onOpenChange: w, triggerTestId: E, contentTestId: D, isHydrated: O, portalContainer: k }) {
-	let A = n.useId(), j = t ?? `hours-picker-${A}`, M = n.useRef(null), N = n.useRef(null), P = n.useRef(null), F = n.useRef(null), [I, L] = n.useState(m), [R, z] = n.useState(null), [B, V] = n.useState(!1), H = b ?? B, U = w ?? V, W = n.useRef(!1);
+T.displayName = "HourPickerInput";
+function E({ id: s, value: l, onChange: u, onValueUpdate: d, options: f, placeholder: h = "Select time", className: g, inputClassName: _, disabled: v, readOnly: y, open: C, onOpenChange: T, triggerTestId: E, contentTestId: D, isHydrated: O, portalContainer: k }) {
+	let A = t.useId(), j = s ?? `hours-picker-${A}`, M = t.useRef(null), N = t.useRef(null), P = t.useRef(null), F = t.useRef(null), [I, L] = t.useState(p), [R, z] = t.useState(null), [B, V] = t.useState(!1), H = C ?? B, U = T ?? V, W = t.useRef(!1);
 	W.current = H;
-	let G = n.useCallback((e) => {
-		x(f.find((t) => t.value === e)) && (d && d(e), u(e));
+	let G = t.useCallback((e) => {
+		b(f.find((t) => t.value === e)) && (d && d(e), u(e));
 	}, [
 		u,
 		d,
 		f
 	]);
-	n.useEffect(() => {
+	t.useEffect(() => {
 		if (!H) return;
-		let e = f.find((e) => e.value === c);
-		if (x(e)) {
+		let e = f.find((e) => e.value === l);
+		if (b(e)) {
 			z(e.value);
 			return;
 		}
-		let t = f.find((e) => x(e));
+		let t = f.find((e) => b(e));
 		z(t?.value ?? null);
 	}, [
 		f,
 		H,
-		c
-	]), n.useEffect(() => {
+		l
+	]), t.useEffect(() => {
 		if (!H || !R) return;
 		let e = F.current;
 		if (!e) return;
@@ -470,13 +466,13 @@ function D({ id: t, value: c, onChange: u, onValueUpdate: d, options: f, placeho
 			return;
 		}
 		r > e.scrollTop + e.clientHeight && (e.scrollTop = Math.max(0, r - e.clientHeight));
-	}, [R, H]), C(M, H, b === void 0 || w !== void 0, U);
-	let K = n.useCallback(() => {
+	}, [R, H]), S(M, H, C === void 0 || T !== void 0, U);
+	let K = t.useCallback(() => {
 		if (typeof window > "u") return;
 		let e = M.current, t = P.current;
-		!(e instanceof HTMLElement) || !t || L(h(e, t, k));
+		!(e instanceof HTMLElement) || !t || L(m(e, t, k));
 	}, [k]);
-	n.useLayoutEffect(() => {
+	t.useLayoutEffect(() => {
 		if (!H || v || typeof window > "u") return;
 		K();
 		let e = window.requestAnimationFrame(K);
@@ -487,7 +483,7 @@ function D({ id: t, value: c, onChange: u, onValueUpdate: d, options: f, placeho
 		v,
 		H,
 		K
-	]), n.useEffect(() => {
+	]), t.useEffect(() => {
 		if (!H) return;
 		let e = N.current?.ownerDocument ?? document, t = e.defaultView ?? window, n = (e) => {
 			let t = e.target;
@@ -503,12 +499,12 @@ function D({ id: t, value: c, onChange: u, onValueUpdate: d, options: f, placeho
 			e.removeEventListener("pointerdown", n, !0), t.removeEventListener("keydown", r, !0);
 		};
 	}, [H, U]);
-	let q = f.find((e) => e.value === c), J = q?.selectedLabel ?? q?.label ?? c, Y = f.findIndex((e) => e.value === R), X = Y >= 0 ? `${j}-option-${Y}` : void 0;
-	return /* @__PURE__ */ a("div", {
+	let q = f.find((e) => e.value === l)?.label ?? l, J = f.findIndex((e) => e.value === R), Y = J >= 0 ? `${j}-option-${J}` : void 0;
+	return /* @__PURE__ */ i("div", {
 		"data-slot": "hours-picker-field",
 		className: e("w-[150px]", g),
 		ref: N,
-		children: [/* @__PURE__ */ a("button", {
+		children: [/* @__PURE__ */ i("button", {
 			ref: M,
 			id: j,
 			type: "button",
@@ -516,11 +512,11 @@ function D({ id: t, value: c, onChange: u, onValueUpdate: d, options: f, placeho
 			"aria-expanded": H,
 			"aria-controls": `${j}-content`,
 			"aria-haspopup": "listbox",
-			"aria-activedescendant": H ? X : void 0,
+			"aria-activedescendant": H ? Y : void 0,
 			disabled: v,
 			"data-testid": E,
 			"data-hydrated": O ? "true" : void 0,
-			className: 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 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "hover:bg-accent hover:text-accent-foreground", !c && "text-muted-foreground", H && "ring-2 ring-primary ring-offset-2", _),
+			className: 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 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", !l && "text-muted-foreground", H && "ring-2 ring-primary ring-offset-2", _),
 			onClick: () => {
 				v || y || U(!H);
 			},
@@ -535,7 +531,7 @@ function D({ id: t, value: c, onChange: u, onValueUpdate: d, options: f, placeho
 						U(!0);
 						return;
 					}
-					let t = S(R ?? c, e.key === "ArrowDown" ? 1 : -1, f);
+					let t = x(R ?? l, e.key === "ArrowDown" ? 1 : -1, f);
 					if (!t) return;
 					z(t), d?.(t);
 					return;
@@ -545,18 +541,18 @@ function D({ id: t, value: c, onChange: u, onValueUpdate: d, options: f, placeho
 					U(!0);
 					return;
 				}
-				let t = f.find((e) => e.value === R), n = x(t) ? t.value : f.find((e) => x(e))?.value;
+				let t = f.find((e) => e.value === R), n = b(t) ? t.value : f.find((e) => b(e))?.value;
 				n && (G(n), U(!1));
 			},
-			children: [/* @__PURE__ */ i("span", {
+			children: [/* @__PURE__ */ r("span", {
 				className: "line-clamp-1 text-left",
-				children: c ? J : p
-			}), /* @__PURE__ */ i(s, {
+				children: l ? q : h
+			}), /* @__PURE__ */ r(o, {
 				"aria-hidden": !0,
 				className: "h-4 w-4 shrink-0 opacity-50"
 			})]
 		}), H ? (() => {
-			let t = /* @__PURE__ */ i(r, { children: /* @__PURE__ */ a("div", {
+			let t = /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
 				ref: P,
 				id: `${j}-content`,
 				"data-testid": D,
@@ -569,40 +565,40 @@ function D({ id: t, value: c, onChange: u, onValueUpdate: d, options: f, placeho
 					width: I.width
 				},
 				children: [
-					/* @__PURE__ */ i(T, {
+					/* @__PURE__ */ r(w, {
 						direction: "up",
 						viewportRef: F
 					}),
-					/* @__PURE__ */ i("div", {
+					/* @__PURE__ */ r("div", {
 						ref: F,
 						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: f.map((t, n) => {
-							let r = t.value === c, s = t.value === R;
-							return /* @__PURE__ */ a("div", {
+							let o = t.value === l, s = t.value === R;
+							return /* @__PURE__ */ i("div", {
 								id: `${j}-option-${n}`,
 								role: "option",
-								"aria-selected": r,
+								"aria-selected": o,
 								"aria-disabled": t.disabled || void 0,
 								"data-value": t.value,
-								"data-state": r ? "checked" : "unchecked",
+								"data-state": o ? "checked" : "unchecked",
 								"data-disabled": t.disabled ? "" : void 0,
-								className: e("relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none cursor-pointer", t.disabled && "pointer-events-none opacity-50", s && "bg-accent text-accent-foreground"),
+								className: e("relative flex w-full select-none items-center justify-center rounded-sm px-2 py-1.5 text-center text-sm outline-none cursor-pointer", t.disabled && "pointer-events-none opacity-50", s && "bg-accent text-accent-foreground"),
 								onMouseDown: (e) => {
 									e.preventDefault();
 								},
 								onClick: () => {
 									t.disabled || y || (z(t.value), G(t.value), U(!1), M.current?.focus({ preventScroll: !0 }));
 								},
-								children: [/* @__PURE__ */ i("span", {
+								children: [/* @__PURE__ */ r("span", {
 									className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-									children: r ? /* @__PURE__ */ i(o, {
+									children: o ? /* @__PURE__ */ r(a, {
 										"aria-hidden": !0,
 										className: "h-4 w-4"
 									}) : null
-								}), /* @__PURE__ */ a("div", {
-									className: "flex flex-col",
-									children: [/* @__PURE__ */ i("span", { children: t.label }), t.description == null ? null : /* @__PURE__ */ i("span", {
+								}), /* @__PURE__ */ i("div", {
+									className: "flex w-full min-w-0 flex-col items-center",
+									children: [/* @__PURE__ */ r("span", { children: t.label }), t.description == null ? null : /* @__PURE__ */ r("span", {
 										"data-slot": "description",
 										className: "text-xs text-muted-foreground",
 										children: t.description
@@ -611,220 +607,208 @@ function D({ id: t, value: c, onChange: u, onValueUpdate: d, options: f, placeho
 							}, t.value);
 						})
 					}),
-					/* @__PURE__ */ i(T, {
+					/* @__PURE__ */ r(w, {
 						direction: "down",
 						viewportRef: F
 					})
 				]
 			}) });
-			return typeof document > "u" ? t : l(t, k ?? document.body);
+			return typeof document > "u" ? t : c(t, k ?? document.body);
 		})() : null]
 	});
 }
-function O(e) {
-	return t() ? /* @__PURE__ */ i(D, { ...e }) : /* @__PURE__ */ i(E, { ...e });
+function D({ compact: e = !1, ...t }) {
+	return r(e ? E : T, { ...t });
 }
-O.displayName = "HourPickerField";
-function k({ id: t, placeholder: r, value: o, onValueUpdate: c, onCommit: l, options: d, selectedLabel: f, disabled: p, readOnly: m, open: h, setOpen: _, inputClassName: S, triggerTestId: C, isHydrated: T, highlightedValueRef: E, setHighlightedValue: D, markKeyboardNavigation: O, inputRef: k, onDraftValueHandlerChange: A }) {
-	let j = n.useRef(!1), M = n.useRef(!1), N = n.useRef(!1), P = n.useRef(null), F = n.useRef(null), I = n.useRef(!1), [L, R] = n.useState(() => o || "");
-	n.useEffect(() => (A((e) => {
-		R(e);
+D.displayName = "HourPickerField";
+function O({ id: n, placeholder: a, value: s, onValueUpdate: c, onCommit: u, options: d, disabled: f, readOnly: p, open: m, setOpen: g, inputClassName: x, triggerTestId: S, isHydrated: w, highlightedValueRef: T, setHighlightedValue: E, markKeyboardNavigation: D, inputRef: O, onDraftValueHandlerChange: k }) {
+	let A = t.useRef(!1), j = t.useRef(!1), M = t.useRef(!1), N = t.useRef(null), P = t.useRef(null), F = t.useRef(!1), [I, L] = t.useState(() => s || "");
+	t.useEffect(() => (k((e) => {
+		L(e);
 	}), () => {
-		A(null);
-	}), [A]);
-	let z = n.useCallback((e) => {
-		let t = E.current ?? o ?? "", n = d.findIndex((e) => e.value === t);
+		k(null);
+	}), [k]);
+	let R = t.useCallback((e) => {
+		let t = T.current ?? s ?? "", n = d.findIndex((e) => e.value === t);
 		n === -1 && (n = e === 1 ? -1 : d.length);
 		for (let t = n + e; t >= 0 && t < d.length; t += e) {
 			let e = d[t];
-			if (x(e)) {
-				D(e.value), P.current = e.value, R(e.value), c(e.value);
+			if (b(e)) {
+				E(e.value), N.current = e.value, L(e.value), c(e.value);
 				return;
 			}
 		}
 	}, [
-		E,
+		T,
 		c,
 		d,
-		D,
-		o
+		E,
+		s
 	]);
-	n.useEffect(() => {
-		j.current || R(o || "");
-	}, [o]), n.useEffect(() => {
-		F.current = v(L);
-	}, [L]), n.useEffect(() => {
-		o === null && (I.current = !1);
-	}, [o]);
-	let B = o != null && f != null, V = e("peer 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", !B && "group-hover:text-accent-foreground", !L && "text-muted-foreground", h && "ring-2 ring-primary ring-offset-2", "[&_[data-slot='description']]:hidden", S, B && "text-transparent focus:text-foreground");
-	return /* @__PURE__ */ a("div", {
-		className: "relative group",
-		children: [
-			/* @__PURE__ */ i(u, {
-				id: t,
-				"data-testid": C,
-				"data-hydrated": T ? "true" : void 0,
-				type: "text",
-				disabled: p,
-				readOnly: m,
-				inputRef: k,
-				autoComplete: "off",
-				mask: [{
-					mask: "00:00",
-					lazy: !0
-				}, {
-					mask: "0:00",
-					lazy: !0
-				}],
-				dispatch: (e, t) => {
-					let n = (t.value + e).replace(/\D/g, "");
-					if (n.length <= 2 || n.length >= 4) return t.compiledMasks[0];
-					let r = g(Number(n.slice(0, 2)));
-					return d.some((e) => e.value.startsWith(`${r}:`)) ? t.compiledMasks[0] : t.compiledMasks[1];
-				},
-				placeholder: r,
-				value: L,
-				className: V,
-				onAccept: (e, t, n) => {
-					if (!n) return;
-					let r = typeof e == "string" ? e : String(e ?? ""), i = r.replace(/\D/g, ""), a = v(r);
-					if (F.current !== a) {
-						if (F.current = a, R(r), i.length !== 0) {
-							I.current = !1;
-							return;
-						}
-						o && !I.current && (I.current = !0, l(null));
+	t.useEffect(() => {
+		A.current || L(s || "");
+	}, [s]), t.useEffect(() => {
+		P.current = _(I);
+	}, [I]), t.useEffect(() => {
+		s === null && (F.current = !1);
+	}, [s]);
+	let z = e("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-left 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-[border-color,box-shadow]", !I && "text-muted-foreground", m && "ring-2 ring-primary ring-offset-2", "[&_[data-slot='description']]:hidden", x);
+	return /* @__PURE__ */ i("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ r(l, {
+			id: n,
+			"data-testid": S,
+			"data-hydrated": w ? "true" : void 0,
+			type: "text",
+			disabled: f,
+			readOnly: p,
+			inputRef: O,
+			autoComplete: "off",
+			mask: [{
+				mask: "00:00",
+				lazy: !0
+			}, {
+				mask: "0:00",
+				lazy: !0
+			}],
+			dispatch: (e, t) => {
+				let n = (t.value + e).replace(/\D/g, "");
+				if (n.length <= 2 || n.length >= 4) return t.compiledMasks[0];
+				let r = h(Number(n.slice(0, 2)));
+				return d.some((e) => e.value.startsWith(`${r}:`)) ? t.compiledMasks[0] : t.compiledMasks[1];
+			},
+			placeholder: a,
+			value: I,
+			className: z,
+			onAccept: (e, t, n) => {
+				if (!n) return;
+				let r = typeof e == "string" ? e : String(e ?? ""), i = r.replace(/\D/g, ""), a = _(r);
+				if (P.current !== a) {
+					if (P.current = a, L(r), i.length !== 0) {
+						F.current = !1;
+						return;
 					}
-				},
-				onComplete: (e, t, n) => {
-					if (!n) return;
-					let r = typeof e == "string" ? e : String(e ?? "");
-					if (P.current === r) {
-						P.current = null;
+					s && !F.current && (F.current = !0, u(null));
+				}
+			},
+			onComplete: (e, t, n) => {
+				if (!n) return;
+				let r = typeof e == "string" ? e : String(e ?? "");
+				if (N.current === r) {
+					N.current = null;
+					return;
+				}
+				let i = v(r, d);
+				if (!i) return;
+				if (i.selectableValue) {
+					if (E(i.selectableValue), L(i.selectableValue), s === i.selectableValue) return;
+					u(i.selectableValue);
+					return;
+				}
+				let a = y(i.parsed);
+				if (a == null) return;
+				let o = C(a, d);
+				o && E(o.value);
+			},
+			onPointerDown: () => {
+				j.current = !0, !f && (m || g(!0));
+			},
+			onMouseDown: (e) => {
+				j.current = !0, M.current = typeof document < "u" && document.activeElement === e.currentTarget, !f && (m || g(!0));
+			},
+			onClick: () => {
+				f || m || g(!0);
+			},
+			onKeyDown: (e) => {
+				if (!f) {
+					if (e.key === "Tab" && m && !e.defaultPrevented) {
+						g(!1);
 						return;
 					}
-					let i = y(r, d);
-					if (!i) return;
-					if (i.selectableValue) {
-						if (D(i.selectableValue), R(i.selectableValue), o === i.selectableValue) return;
-						l(i.selectableValue);
+					if (e.key === "Escape") {
+						if (!m) return;
+						e.preventDefault(), g(!1);
 						return;
 					}
-					let a = b(i.parsed);
-					if (a == null) return;
-					let s = w(a, d);
-					s && D(s.value);
-				},
-				onPointerDown: () => {
-					M.current = !0, !p && (h || _(!0));
-				},
-				onMouseDown: (e) => {
-					M.current = !0, N.current = typeof document < "u" && document.activeElement === e.currentTarget, !p && (h || _(!0));
-				},
-				onClick: () => {
-					p || h || _(!0);
-				},
-				onKeyDown: (e) => {
-					if (!p) {
-						if (e.key === "Tab" && h && !e.defaultPrevented) {
-							_(!1);
+					if (!m && !e.defaultPrevented && (e.key.length === 1 || e.key === "Backspace" || e.key === "Delete") && !e.ctrlKey && !e.metaKey && !e.altKey && g(!0), e.key === "ArrowDown" || e.key === "ArrowUp") {
+						if (D(), e.preventDefault(), !m) {
+							g(!0);
 							return;
 						}
-						if (e.key === "Escape") {
-							if (!h) return;
-							e.preventDefault(), _(!1);
-							return;
-						}
-						if (!h && !e.defaultPrevented && (e.key.length === 1 || e.key === "Backspace" || e.key === "Delete") && !e.ctrlKey && !e.metaKey && !e.altKey && _(!0), e.key === "ArrowDown" || e.key === "ArrowUp") {
-							if (O(), e.preventDefault(), !h) {
-								_(!0);
-								return;
-							}
-							z(e.key === "ArrowDown" ? 1 : -1);
+						R(e.key === "ArrowDown" ? 1 : -1);
+						return;
+					}
+					if (e.key === "Enter") {
+						D();
+						let t = v(I, d);
+						if (!t) {
+							if (!m || I.trim() !== "") return;
+							let t = d.find((e) => e.value === T.current), n = (b(t) ? t?.value : void 0) ?? d.find((e) => b(e))?.value;
+							if (!n) return;
+							e.preventDefault(), E(n), L(n), u(n), g(!1);
 							return;
 						}
-						if (e.key === "Enter") {
-							O();
-							let t = y(L, d);
-							if (!t) {
-								if (!h || L.trim() !== "") return;
-								let t = d.find((e) => e.value === E.current), n = (x(t) ? t?.value : void 0) ?? d.find((e) => x(e))?.value;
-								if (!n) return;
-								e.preventDefault(), D(n), R(n), l(n), _(!1);
-								return;
-							}
-							if (t.selectableValue) {
-								e.preventDefault(), D(t.selectableValue), R(t.selectableValue), l(t.selectableValue), _(!1);
-								return;
-							}
-							let n = b(t.parsed);
-							if (n == null) return;
-							let r = w(n, d);
-							if (!r) return;
-							e.preventDefault(), D(r.value), R(r.value), l(r.value), _(!1);
+						if (t.selectableValue) {
+							e.preventDefault(), E(t.selectableValue), L(t.selectableValue), u(t.selectableValue), g(!1);
 							return;
 						}
-					}
-				},
-				onFocus: (e) => {
-					let t = !M.current || !N.current;
-					if (M.current = !1, N.current = !1, j.current = !0, t) {
-						let t = e.currentTarget;
-						requestAnimationFrame(() => t.select());
-					}
-					p || h || _(!0);
-				},
-				onBlur: () => {
-					j.current = !1;
-					let e = L.trim();
-					if (!e) {
-						R(o || "");
-						return;
-					}
-					let t = y(e, d);
-					if (!t) {
-						R(o || "");
-						return;
-					}
-					if (!t.selectableValue) {
-						R(o || "");
+						let n = y(t.parsed);
+						if (n == null) return;
+						let r = C(n, d);
+						if (!r) return;
+						e.preventDefault(), E(r.value), L(r.value), u(r.value), g(!1);
 						return;
 					}
-					R(t.selectableValue), o !== t.selectableValue && l(t.selectableValue);
 				}
-			}),
-			o && f != null ? /* @__PURE__ */ i("span", {
-				"aria-hidden": "true",
-				"data-slot": "hours-picker-input-selected-label",
-				className: e("pointer-events-none absolute inset-y-0 left-3 right-10 flex min-w-0 items-center text-base transition-colors group-hover:text-accent-foreground peer-focus:hidden md:text-sm", p && "opacity-50"),
-				children: /* @__PURE__ */ i("span", {
-					className: "min-w-0 truncate",
-					children: f
-				})
-			}) : null,
-			/* @__PURE__ */ i("button", {
-				type: "button",
-				tabIndex: -1,
-				disabled: p,
-				"data-slot": "hours-picker-input-toggle",
-				className: e("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"),
-				"aria-label": h ? "Close time picker" : "Open time picker",
-				onPointerDown: (e) => {
-					e.preventDefault();
-				},
-				onMouseDown: (e) => {
-					e.preventDefault();
-				},
-				onClick: () => {
-					p || _(!h);
-				},
-				children: /* @__PURE__ */ i(s, {
-					"aria-hidden": !0,
-					className: "size-4"
-				})
+			},
+			onFocus: (e) => {
+				let t = !j.current || !M.current;
+				if (j.current = !1, M.current = !1, A.current = !0, t) {
+					let t = e.currentTarget;
+					requestAnimationFrame(() => t.select());
+				}
+				f || m || g(!0);
+			},
+			onBlur: () => {
+				A.current = !1;
+				let e = I.trim();
+				if (!e) {
+					L(s || "");
+					return;
+				}
+				let t = v(e, d);
+				if (!t) {
+					L(s || "");
+					return;
+				}
+				if (!t.selectableValue) {
+					L(s || "");
+					return;
+				}
+				L(t.selectableValue), s !== t.selectableValue && u(t.selectableValue);
+			}
+		}), /* @__PURE__ */ r("button", {
+			type: "button",
+			tabIndex: -1,
+			disabled: f,
+			"data-slot": "hours-picker-input-toggle",
+			className: e("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"),
+			"aria-label": m ? "Close time picker" : "Open time picker",
+			onPointerDown: (e) => {
+				e.preventDefault();
+			},
+			onMouseDown: (e) => {
+				e.preventDefault();
+			},
+			onClick: () => {
+				f || g(!m);
+			},
+			children: /* @__PURE__ */ r(o, {
+				"aria-hidden": !0,
+				className: "size-4"
 			})
-		]
+		})]
 	});
 }
 //#endregion
-export { O as HourPickerField, E as HourPickerInput };
+export { D as HourPickerField, T as HourPickerInput };