@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/input/TimePicker.mjs

@@ -2,47 +2,48 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
 import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
-import { useControllable as i } from "../../hooks/useControllable.mjs";
+import { timePickerClassNames as i } from "../../lib/classNames.mjs";
+import { useControllable as a } from "../../hooks/useControllable.mjs";
 import { useId as ee } from "../../hooks/useId.mjs";
-import { useMergedRefs as a } from "../../hooks/useMergedRefs.mjs";
+import { useMergedRefs as o } from "../../hooks/useMergedRefs.mjs";
 import { useIsClient as te } from "../../hooks/useIsClient.mjs";
 import { joinIds as ne } from "../../lib/aria.mjs";
 import { useFieldContext as re, useFieldControl as ie } from "../../hooks/useFieldControl.mjs";
 import { useDismiss as ae } from "../../hooks/useDismiss.mjs";
 import { Portal as oe } from "../portal/Portal.mjs";
-import { disabledStyles as se, forcedColors as o, inputBase as ce, inputFocus as le } from "../../lib/styles.mjs";
-import { CheckIcon as ue, DismissIcon as de } from "../../lib/icons.mjs";
-import { isInvalidLook as fe } from "./Input.mjs";
-import { useFormReset as pe } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as me } from "../internal/HiddenInput.mjs";
-import { ListboxContext as he, useListbox as ge, useListboxOption as s } from "../../hooks/useListbox.mjs";
-import { pickerEndPadding as _e } from "./pickerStyles.mjs";
-import { PickerExpandButton as ve, showsExpandButton as ye } from "./Combobox.expand.mjs";
-import { usePopupPosition as be } from "../../hooks/usePopupPosition.mjs";
-import { generateTimeOptions as xe, minutesToTime as Se, minutesToValue as c, normalizeTimeStep as Ce, timeToMinutes as l } from "./dateUtils.mjs";
-import * as u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { flushSync as we } from "react-dom";
+import { disabledStyles as se, forcedColors as s, inputBase as ce, inputFocus as le } from "../../lib/styles.mjs";
+import { CheckIcon as c, DismissIcon as ue } from "../../lib/icons.mjs";
+import { isInvalidLook as de } from "./Input.mjs";
+import { useFormReset as fe } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as pe } from "../internal/HiddenInput.mjs";
+import { ListboxContext as me, useListbox as he, useListboxOption as l } from "../../hooks/useListbox.mjs";
+import { pickerEndPadding as ge } from "./pickerStyles.mjs";
+import { PickerExpandButton as _e, showsExpandButton as ve } from "./Combobox.expand.mjs";
+import { usePopupPosition as ye } from "../../hooks/usePopupPosition.mjs";
+import { generateTimeOptions as be, minutesToTime as xe, minutesToValue as u, normalizeTimeStep as Se, timeToMinutes as d } from "./dateUtils.mjs";
+import * as f from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { flushSync as Ce } from "react-dom";
 //#region src/components/input/TimePicker.tsx
-var p = "flex cursor-pointer items-center gap-2 px-3 py-1.5 text-body-1 text-foreground hover:bg-subtle-hover data-[active]:bg-subtle-hover data-[active]:outline-2 data-[active]:outline-ring data-[active]:-outline-offset-2 data-[selected]:bg-subtle-selected data-[selected]:font-semibold", m = u.memo(function({ value: t, label: n }) {
-	let { selected: r, optionProps: i } = s({
+var h = "flex cursor-pointer items-center gap-2 px-3 py-1.5 text-body-1 text-foreground hover:bg-subtle-hover data-[active]:bg-subtle-hover data-[active]:outline-2 data-[active]:outline-ring data-[active]:-outline-offset-2 data-[selected]:bg-subtle-selected data-[selected]:font-semibold", we = f.memo(function({ value: t, label: n }) {
+	let { selected: r, optionProps: a } = l({
 		value: t,
 		label: n
 	});
-	return /* @__PURE__ */ f("li", {
-		...i,
-		className: e(p, r && o.selectedContainer),
-		children: [/* @__PURE__ */ d("span", {
-			className: "flex h-4 w-4 shrink-0 items-center justify-center",
-			children: r ? /* @__PURE__ */ d(ue, { size: 12 }) : null
+	return /* @__PURE__ */ m("li", {
+		...a,
+		className: e(i.option, h, r && s.selectedContainer),
+		children: [/* @__PURE__ */ p("span", {
+			className: e(i.checkIcon, "flex h-4 w-4 shrink-0 items-center justify-center"),
+			children: r ? /* @__PURE__ */ p(c, { size: 12 }) : null
 		}), n]
 	});
 });
-m.displayName = "TimePickerOption";
+we.displayName = "TimePickerOption";
 var Te = (e) => `Enter a time in the format ${e}.`, Ee = (e, t) => e !== void 0 && t !== void 0 ? `Enter a time between ${e} and ${t}.` : e === void 0 ? `Enter a time on or before ${t}.` : `Enter a time on or after ${e}.`;
-function h(e, t) {
-	let n = l(e);
-	return Number.isNaN(n) ? e : Se(n, t);
+function g(e, t) {
+	let n = d(e);
+	return Number.isNaN(n) ? e : xe(n, t);
 }
 function De(e, t) {
 	return e.label.toLowerCase().includes(t) || e.value.includes(t);
@@ -50,234 +51,236 @@ function De(e, t) {
 function Oe(e, t) {
 	return e.label.toLowerCase().startsWith(t) || e.value.startsWith(t);
 }
-var g = (o) => {
-	let { value: ue, defaultValue: s, onValueChange: Se, onChange: p, format: g = "12h", step: _ = 30, minTime: v = "00:00", maxTime: y = "23:59", placeholder: ke = "Select a time", disabled: b = !1, readOnly: x, clearable: Ae = !1, expandIcon: je, open: Me, defaultOpen: Ne, onOpenChange: Pe, onInvalidInput: Fe, labels: S, name: Ie, form: C, required: w, autoComplete: Le = "off", autoCapitalize: Re, autoCorrect: ze, maxLength: Be, enterKeyHint: Ve, inputMode: He, spellCheck: Ue, autoFocus: We, tabIndex: Ge, id: Ke, "aria-label": T, "aria-labelledby": qe, "aria-describedby": Je, "aria-invalid": Ye, "aria-required": Xe, "aria-errormessage": Ze, "aria-details": Qe, onFocus: $e, onBlur: et, onKeyDown: tt, onKeyUp: nt, controlRef: rt, className: it, ref: at, ...ot } = o;
-	p !== void 0 && t("TimePicker", "onChange", "onValueChange");
-	let [E, st] = i(ue, s ?? "", (e) => {
-		Se?.(e), p?.(e);
-	}), ct = Ce(_).valid, D = l(v), O = l(y), k = !Number.isNaN(D) && !Number.isNaN(O) && D <= O, A = u.useMemo(() => xe(_, v, y, g), [
-		_,
+var _ = (s) => {
+	let { value: c, defaultValue: l, onValueChange: xe, onChange: h, format: _ = "12h", step: v = 30, minTime: y = "00:00", maxTime: b = "23:59", placeholder: ke = "Select a time", disabled: x = !1, readOnly: S, clearable: Ae = !1, expandIcon: je, open: Me, defaultOpen: Ne, onOpenChange: Pe, onInvalidInput: Fe, labels: C, name: Ie, form: Le, required: Re, autoComplete: ze = "off", autoCapitalize: Be, autoCorrect: Ve, maxLength: He, enterKeyHint: Ue, inputMode: We, spellCheck: Ge, autoFocus: Ke, tabIndex: qe, id: Je, "aria-label": Ye, "aria-labelledby": Xe, "aria-describedby": Ze, "aria-invalid": Qe, "aria-required": $e, "aria-errormessage": et, "aria-details": tt, onFocus: nt, onBlur: rt, onKeyDown: it, onKeyUp: at, controlRef: ot, className: st, ref: ct, ...lt } = s;
+	h !== void 0 && t("TimePicker", "onChange", "onValueChange");
+	let [w, T] = a(c, l ?? "", (e) => {
+		xe?.(e), h?.(e);
+	}), ut = Se(v).valid, E = d(y), D = d(b), O = !Number.isNaN(E) && !Number.isNaN(D) && E <= D, k = f.useMemo(() => be(v, y, b, _), [
 		v,
 		y,
-		g
+		b,
+		_
 	]);
-	u.useEffect(() => {
-		ct || n(`TimePicker:step:${String(_)}`, `TimePicker: \`step\` must be a positive number of minutes (received ${String(_)}); using 30.`);
-	}, [_, ct]), u.useEffect(() => {
-		k || n(`TimePicker:bounds:${v}|${y}`, `TimePicker: \`minTime\`/\`maxTime\` must be times such as "09:00", "09:00:00" or "9:00 AM" with minTime <= maxTime (received "${v}" / "${y}"); no times are available.`);
+	f.useEffect(() => {
+		ut || n(`TimePicker:step:${String(v)}`, `TimePicker: \`step\` must be a positive number of minutes (received ${String(v)}); using 30.`);
+	}, [v, ut]), f.useEffect(() => {
+		O || n(`TimePicker:bounds:${y}|${b}`, `TimePicker: \`minTime\`/\`maxTime\` must be times such as "09:00", "09:00:00" or "9:00 AM" with minTime <= maxTime (received "${y}" / "${b}"); no times are available.`);
 	}, [
-		v,
 		y,
-		k
+		b,
+		O
 	]);
-	let j = !b && !x, [M, N, lt] = i(Me, (Ne ?? !1) && j, Pe), ut = te(), P = M && j && ut;
-	u.useEffect(() => {
-		!j && M && !lt && N(!1);
+	let A = !x && !S, [j, M, dt] = a(Me, (Ne ?? !1) && A, Pe), ft = te(), N = j && A && ft;
+	f.useEffect(() => {
+		!A && j && !dt && M(!1);
 	}, [
+		A,
 		j,
-		M,
-		lt,
-		N
+		dt,
+		M
 	]);
-	let [F, I] = u.useState(null), [L, R] = u.useState(null), [dt, ft] = u.useState(j);
-	dt !== j && (ft(j), j || (I(null), R(null)));
-	let [pt, mt] = u.useState(E);
-	pt !== E && (mt(E), L !== null && (I(null), R(null)));
-	let ht = F ?? "", gt = () => {
-		j && !P && N(!0);
-	}, z = () => N(!1), B = u.useMemo(() => {
-		let e = ht.trim().toLowerCase();
+	let [P, F] = f.useState(null), [I, L] = f.useState(null), [pt, mt] = f.useState(A);
+	pt !== A && (mt(A), A || (F(null), L(null)));
+	let [ht, gt] = f.useState(w);
+	ht !== w && (gt(w), I !== null && (F(null), L(null)));
+	let _t = P ?? "", vt = () => {
+		A && !N && M(!0);
+	}, R = () => M(!1), z = f.useMemo(() => {
+		let e = _t.trim().toLowerCase();
 		if (!e) return;
-		let t = l(e), n = Number.isNaN(t) ? null : c(t);
+		let t = d(e), n = Number.isNaN(t) ? null : u(t);
 		return (t) => t.value === n || De(t, e);
-	}, [ht]), V = (e) => {
+	}, [_t]), B = (e) => {
 		let t = e.trim().toLowerCase();
 		if (!t) return null;
-		let n = l(e);
+		let n = d(e);
 		if (!Number.isNaN(n)) {
-			let e = c(n);
-			return A.some((t) => t.value === e) ? e : null;
+			let e = u(n);
+			return k.some((t) => t.value === e) ? e : null;
 		}
-		return (A.find((e) => Oe(e, t)) ?? A.find((e) => De(e, t)))?.value ?? null;
-	}, _t = E !== "" && A.some((e) => e.value === E), vt = u.useMemo(() => E ? [E] : [], [E]), H = (e) => {
-		st(e), I(null), R(null);
-	}, U = (e) => {
-		if (!e.trim()) return H(""), null;
-		let t = l(e);
-		return Number.isNaN(t) ? "unparseable" : !k || t < D || t > O ? "out-of-range" : (H(c(t)), null);
-	}, yt = (e, t) => {
-		R(t), Fe?.(e, t);
-	}, W = () => {
-		I(null), R(null);
-	}, G = u.useMemo(() => B ? A.some(B) : A.length > 0, [A, B]), K = P && G, q = ge({
-		open: K,
-		onOpenChange: (e) => e ? gt() : z(),
+		return (k.find((e) => Oe(e, t)) ?? k.find((e) => De(e, t)))?.value ?? null;
+	}, yt = w !== "" && k.some((e) => e.value === w), bt = f.useMemo(() => w ? [w] : [], [w]), V = (e) => {
+		T(e), F(null), L(null);
+	}, H = (e) => {
+		if (!e.trim()) return V(""), null;
+		let t = d(e);
+		return Number.isNaN(t) ? "unparseable" : !O || t < E || t > D ? "out-of-range" : (V(u(t)), null);
+	}, xt = (e, t) => {
+		L(t), Fe?.(e, t);
+	}, U = () => {
+		F(null), L(null);
+	}, W = f.useMemo(() => z ? k.some(z) : k.length > 0, [k, z]), G = N && W, K = he({
+		open: G,
+		onOpenChange: (e) => e ? vt() : R(),
 		mode: "editable",
-		selectedValues: vt,
-		onSelect: (e) => H(e),
-		items: A,
-		filter: B,
-		autoHighlight: F === null && _t ? "selected" : !1,
+		selectedValues: bt,
+		onSelect: (e) => V(e),
+		items: k,
+		filter: z,
+		autoHighlight: P === null && yt ? "selected" : !1,
 		idPrefix: "timepicker-listbox",
-		onClearDraft: F === null ? void 0 : () => {
-			W(), z();
+		onClearDraft: P === null ? void 0 : () => {
+			U(), R();
 		}
-	}), bt = E ? q.getItem(E)?.label ?? h(E, g) : "", J = Ae && !x && E !== "", xt = P && !G ? A.length === 0 ? S?.noTimes ?? "No times available" : S?.noMatches ?? "No matching times" : "", St = u.useRef(null), Y = u.useRef(null), Ct = u.useRef(null), wt = a(at, St), Tt = a(rt, Y), { layerId: Et } = ae({
-		open: P,
-		onDismiss: z,
-		refs: [Ct, St],
-		anchorRef: Y,
+	}), St = w ? K.getItem(w)?.label ?? g(w, _) : "", q = Ae && !S && w !== "", Ct = N && !W ? k.length === 0 ? C?.noTimes ?? "No times available" : C?.noMatches ?? "No matching times" : "", wt = f.useRef(null), J = f.useRef(null), Tt = f.useRef(null), Et = o(ct, wt), Dt = o(ot, J), { layerId: Ot } = ae({
+		open: N,
+		onDismiss: R,
+		refs: [Tt, wt],
+		anchorRef: J,
 		kind: "listbox",
 		focusOutside: !0
-	}), { setReference: Dt, setFloating: Ot, floatingProps: kt } = be({
-		open: P,
+	}), { setReference: kt, setFloating: At, floatingProps: jt } = ye({
+		open: N,
 		side: "bottom",
 		align: "start",
 		matchReferenceWidth: !0,
 		fitViewport: !0
-	}), At = a(Ct, Ot), X = re(), jt = (w ?? X?.required ?? !1) && !x, Mt = ee("timepicker-error"), Z = L !== null && !X?.hasErrorMessage, Nt = ie({
-		id: Ke,
-		"aria-label": T,
-		"aria-labelledby": qe,
-		"aria-describedby": ne(Je, Z ? Mt : void 0),
-		"aria-invalid": L !== null || Ye,
-		"aria-required": Xe ?? w
-	}), Pt = fe(!1, Nt["aria-invalid"]);
-	pe(Y, () => {
-		st(s ?? ""), W(), z();
-	}, C);
-	let Ft = (e) => {
-		if (!j) return;
+	}), Mt = o(Tt, At), Y = re(), Nt = (Re ?? Y?.required ?? !1) && !S, X = ee("timepicker-error"), Z = I !== null && !Y?.hasErrorMessage, Pt = ie({
+		id: Je,
+		"aria-label": Ye,
+		"aria-labelledby": Xe,
+		"aria-describedby": ne(Ze, Z ? X : void 0),
+		"aria-invalid": I !== null || Qe,
+		"aria-required": $e ?? Re
+	}), Ft = de(!1, Pt["aria-invalid"]);
+	fe(J, () => {
+		T(l ?? ""), U(), R();
+	}, Le);
+	let It = (e) => {
+		if (!A) return;
 		let t = e.target.value;
-		I(t), R(null), P || N(!0), q.setActiveValue(V(t));
-	}, It = r(tt, (e) => {
-		if (j && (q.onKeyDown(e), !(e.defaultPrevented || e.nativeEvent.isComposing))) {
-			if (e.key === "Escape" && F === "" && bt !== "") {
-				e.preventDefault(), W(), z();
+		F(t), L(null), N || M(!0), K.setActiveValue(B(t));
+	}, Lt = r(it, (e) => {
+		if (A && (K.onKeyDown(e), !(e.defaultPrevented || e.nativeEvent.isComposing))) {
+			if (e.key === "Escape" && P === "" && St !== "") {
+				e.preventDefault(), U(), R();
 				return;
 			}
-			if (e.key === "Enter" && F !== null) {
+			if (e.key === "Enter" && P !== null) {
 				e.preventDefault();
-				let t = U(F);
-				z(), t !== null && yt(F, t);
+				let t = H(P);
+				R(), t !== null && xt(P, t);
 			}
-			e.key === "Tab" && !e.shiftKey && J && F !== null && !F.trim() && we(() => U(F)), e.key === "Tab" && P && !K && z();
+			e.key === "Tab" && !e.shiftKey && q && P !== null && !P.trim() && Ce(() => H(P)), e.key === "Tab" && N && !G && R();
 		}
-	}), Lt = r(nt, q.onKeyUp), Rt = () => {
-		j && !P && (gt(), F !== null && q.setActiveValue(V(F)));
-	}, zt = r(et, () => {
-		if (!j || F === null) return;
-		let e = L === null ? U(F) : null;
-		z(), e !== null && yt(F, e);
-	}), Bt = () => {
-		j && (P ? z() : Rt(), Y.current?.focus());
-	}, Vt = () => {
-		j && (H(""), Y.current?.focus());
-	}, Ht = ne(qe, X?.labelId), Ut = (e) => /* @__PURE__ */ d("ul", {
-		...q.getListboxProps(),
-		"aria-labelledby": Ht,
-		"aria-label": Ht ? void 0 : T ?? S?.list ?? "Times",
-		hidden: e || void 0,
-		className: "max-h-60 min-h-0 overflow-auto py-1 focus:outline-hidden",
-		children: q.items.map((e) => /* @__PURE__ */ d(m, {
+	}), Rt = r(at, K.onKeyUp), zt = () => {
+		A && !N && (vt(), P !== null && K.setActiveValue(B(P)));
+	}, Bt = r(rt, () => {
+		if (!A || P === null) return;
+		let e = I === null ? H(P) : null;
+		R(), e !== null && xt(P, e);
+	}), Vt = () => {
+		A && (N ? R() : zt(), J.current?.focus());
+	}, Ht = () => {
+		A && (V(""), J.current?.focus());
+	}, Ut = ne(Xe, Y?.labelId), Wt = (t) => /* @__PURE__ */ p("ul", {
+		...K.getListboxProps(),
+		"aria-labelledby": Ut,
+		"aria-label": Ut ? void 0 : Ye ?? C?.list ?? "Times",
+		hidden: t || void 0,
+		className: e(i.listbox, "max-h-60 min-h-0 overflow-auto py-1 focus:outline-hidden"),
+		children: K.items.map((e) => /* @__PURE__ */ p(we, {
 			value: e.value,
 			label: e.label
 		}, e.value))
-	}), Q = ye(je), $ = "";
-	Z && L === "unparseable" ? $ = (S?.invalidTime ?? Te)(g === "24h" ? "HH:mm" : "h:mm AM") : Z && ($ = (S?.outOfRange ?? Ee)(o.minTime === void 0 ? void 0 : h(v, g), o.maxTime === void 0 ? void 0 : h(y, g)));
-	let Wt = P ? G : A.length > 0;
-	return /* @__PURE__ */ d(he.Provider, {
-		value: q.context,
-		children: /* @__PURE__ */ f("div", {
-			...ot,
-			ref: wt,
-			className: e("relative inline-flex flex-col", it),
+	}), Q = ve(je), $ = "";
+	Z && I === "unparseable" ? $ = (C?.invalidTime ?? Te)(_ === "24h" ? "HH:mm" : "h:mm AM") : Z && ($ = (C?.outOfRange ?? Ee)(s.minTime === void 0 ? void 0 : g(y, _), s.maxTime === void 0 ? void 0 : g(b, _)));
+	let Gt = N ? W : k.length > 0;
+	return /* @__PURE__ */ p(me.Provider, {
+		value: K.context,
+		children: /* @__PURE__ */ m("div", {
+			...lt,
+			ref: Et,
+			className: e(i.root, "relative inline-flex flex-col", st),
 			children: [
-				/* @__PURE__ */ f("div", {
-					ref: Dt,
+				/* @__PURE__ */ m("div", {
+					ref: kt,
 					className: "relative flex items-center",
 					children: [
-						/* @__PURE__ */ d("input", {
-							ref: Tt,
+						/* @__PURE__ */ p("input", {
+							ref: Dt,
 							type: "text",
-							...q.getComboboxProps(),
-							"aria-controls": Wt ? q.listboxId : void 0,
-							...Nt,
-							"aria-errormessage": Ze,
-							"aria-details": Qe,
-							value: F ?? bt,
-							onChange: Ft,
-							onClick: Rt,
-							onFocus: $e,
-							onBlur: zt,
-							onKeyDown: It,
-							onKeyUp: Lt,
+							...K.getComboboxProps(),
+							"aria-controls": Gt ? K.listboxId : void 0,
+							...Pt,
+							"aria-errormessage": et,
+							"aria-details": tt,
+							value: P ?? St,
+							onChange: It,
+							onClick: zt,
+							onFocus: nt,
+							onBlur: Bt,
+							onKeyDown: Lt,
+							onKeyUp: Rt,
 							placeholder: ke,
-							disabled: b,
-							readOnly: x,
-							autoComplete: Le,
-							autoCapitalize: Re,
-							autoCorrect: ze,
-							maxLength: Be,
-							enterKeyHint: Ve,
-							inputMode: He,
-							spellCheck: Ue,
-							autoFocus: We,
-							tabIndex: Ge,
-							className: e(ce, "border-b-stroke-accessible", le, se, Pt && "border-destructive focus:border-b-destructive", _e(Number(J) + Number(Q)))
+							disabled: x,
+							readOnly: S,
+							autoComplete: ze,
+							autoCapitalize: Be,
+							autoCorrect: Ve,
+							maxLength: He,
+							enterKeyHint: Ue,
+							inputMode: We,
+							spellCheck: Ge,
+							autoFocus: Ke,
+							tabIndex: qe,
+							className: e(i.input, ce, "border-b-stroke-accessible", le, se, Ft && "border-destructive focus:border-b-destructive", ge(Number(q) + Number(Q)))
 						}),
-						J && /* @__PURE__ */ d("button", {
+						q && /* @__PURE__ */ p("button", {
 							type: "button",
-							"aria-label": S?.clear ?? "Clear time",
-							disabled: b,
+							"aria-label": C?.clear ?? "Clear time",
+							disabled: x,
 							onMouseDown: (e) => e.preventDefault(),
-							onClick: Vt,
-							className: e("absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground", Q ? "end-7" : "end-1", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
-							children: /* @__PURE__ */ d(de, {})
+							onClick: Ht,
+							className: e(i.clearButton, "absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground", Q ? "end-7" : "end-1", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
+							children: /* @__PURE__ */ p(ue, {})
 						}),
-						Q && /* @__PURE__ */ d(ve, {
+						Q && /* @__PURE__ */ p(_e, {
 							component: "TimePicker",
 							expandIcon: je,
-							label: S?.expand ?? "Show times",
-							expanded: K,
-							listboxId: q.listboxId,
-							disabled: b || !!x,
-							onToggle: Bt
+							label: C?.expand ?? "Show times",
+							expanded: G,
+							listboxId: K.listboxId,
+							disabled: x || !!S,
+							onToggle: Vt,
+							className: i.expandButton,
+							iconClassName: i.expandIcon
 						})
 					]
 				}),
-				Z && /* @__PURE__ */ d("p", {
-					id: Mt,
+				Z && /* @__PURE__ */ p("p", {
+					id: X,
 					role: "alert",
-					className: "mt-1 text-caption-1 text-error",
+					className: e(i.errorMessage, "mt-1 text-caption-1 text-error"),
 					children: $
 				}),
-				!P && A.length > 0 && Ut(!0),
-				/* @__PURE__ */ d("span", {
+				!N && k.length > 0 && Wt(!0),
+				/* @__PURE__ */ p("span", {
 					role: "status",
 					className: "sr-only",
-					children: xt
+					children: Ct
 				}),
-				/* @__PURE__ */ d(me, {
+				/* @__PURE__ */ p(pe, {
 					name: Ie,
-					form: C,
-					disabled: b,
-					value: E,
+					form: Le,
+					disabled: x,
+					value: w,
 					type: "text",
-					required: jt,
-					onInvalid: () => Y.current?.focus()
+					required: Nt,
+					onInvalid: () => J.current?.focus()
 				}),
-				P && /* @__PURE__ */ d(oe, {
-					layerId: Et,
-					children: /* @__PURE__ */ d("div", {
-						ref: At,
-						...kt,
+				N && /* @__PURE__ */ p(oe, {
+					layerId: Ot,
+					children: /* @__PURE__ */ p("div", {
+						ref: Mt,
+						...jt,
 						"data-state": "open",
-						className: "flex flex-col overflow-hidden rounded border border-border bg-background shadow-8",
-						children: G ? Ut(!1) : /* @__PURE__ */ d("div", {
+						className: e(i.surface, "flex flex-col overflow-hidden rounded border border-border bg-background shadow-8"),
+						children: W ? Wt(!1) : /* @__PURE__ */ p("div", {
 							"aria-hidden": "true",
-							className: "px-3 py-1.5 text-body-1 text-muted-foreground",
-							children: xt
+							className: e(i.emptyMessage, "px-3 py-1.5 text-body-1 text-muted-foreground"),
+							children: Ct
 						})
 					})
 				})
@@ -285,8 +288,8 @@ var g = (o) => {
 		})
 	});
 };
-g.displayName = "TimePicker";
+_.displayName = "TimePicker";
 //#endregion
-export { g as TimePicker };
+export { _ as TimePicker };
 
 //# sourceMappingURL=TimePicker.mjs.map