@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/TimePicker.mjs

@@ -2,282 +2,290 @@
 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, inputAppearanceClasses as ce, inputFocus as le, inputHeightClasses as ue, inputPaddingClasses as de, inputTextClasses as fe } from "../../lib/styles.mjs";
+import { CheckIcon as pe, DismissIcon as me } from "../../lib/icons.mjs";
+import { useInputLook as he } from "./inputLook.mjs";
+import { isInvalidLook as ge } from "./Input.mjs";
+import { useFormReset as _e } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as ve } from "../internal/HiddenInput.mjs";
+import { ListboxContext as ye, useListbox as be, useListboxOption as c } from "../../hooks/useListbox.mjs";
+import { pickerButtonOffset as xe, pickerEndPadding as Se, pickerGlyphSize as Ce, pickerIconButtonClasses as we } from "./pickerStyles.mjs";
+import { PickerExpandButton as Te, showsExpandButton as Ee } from "./Combobox.expand.mjs";
+import { usePopupPosition as De } from "../../hooks/usePopupPosition.mjs";
+import { generateTimeOptions as Oe, minutesToTime as ke, minutesToValue as l, normalizeTimeStep as Ae, timeToMinutes as u } from "./dateUtils.mjs";
+import * as d from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { flushSync as je } 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 m = "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", Me = d.memo(function({ value: t, label: n }) {
+	let { selected: r, optionProps: a } = c({
 		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__ */ p("li", {
+		...a,
+		className: e(i.option, m, r && s.selectedContainer),
+		children: [/* @__PURE__ */ f("span", {
+			className: e(i.checkIcon, "flex h-4 w-4 shrink-0 items-center justify-center"),
+			children: r ? /* @__PURE__ */ f(pe, { size: 12 }) : null
 		}), n]
 	});
 });
-m.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}.`;
+Me.displayName = "TimePickerOption";
+var Ne = (e) => `Enter a time in the format ${e}.`, Pe = (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);
+	let n = u(e);
+	return Number.isNaN(n) ? e : ke(n, t);
 }
-function De(e, t) {
+function Fe(e, t) {
 	return e.label.toLowerCase().includes(t) || e.value.includes(t);
 }
-function Oe(e, t) {
+function Ie(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 g = (s) => {
+	let { value: pe, defaultValue: c, onValueChange: ke, onChange: m, format: g = "12h", step: _ = 30, minTime: v = "00:00", maxTime: y = "23:59", placeholder: Le = "Select a time", disabled: b = !1, size: Re, appearance: ze, readOnly: x, clearable: Be = !1, expandIcon: Ve, open: He, defaultOpen: Ue, onOpenChange: We, onInvalidInput: Ge, labels: S, name: Ke, form: qe, required: Je, autoComplete: Ye = "off", autoCapitalize: Xe, autoCorrect: Ze, maxLength: Qe, enterKeyHint: $e, inputMode: et, spellCheck: tt, autoFocus: nt, tabIndex: rt, id: it, "aria-label": at, "aria-labelledby": ot, "aria-describedby": st, "aria-invalid": ct, "aria-required": lt, "aria-errormessage": ut, "aria-details": dt, onFocus: ft, onBlur: pt, onKeyDown: mt, onKeyUp: ht, controlRef: gt, className: _t, ref: vt, ...yt } = s;
+	m !== void 0 && t("TimePicker", "onChange", "onValueChange");
+	let { size: C, appearance: w } = he(Re, ze), [T, E] = a(pe, c ?? "", (e) => {
+		ke?.(e), m?.(e);
+	}), bt = Ae(_).valid, D = u(v), O = u(y), k = !Number.isNaN(D) && !Number.isNaN(O) && D <= O, A = d.useMemo(() => Oe(_, v, y, g), [
 		_,
 		v,
 		y,
 		g
 	]);
-	u.useEffect(() => {
-		ct || n(`TimePicker:step:${String(_)}`, `TimePicker: \`step\` must be a positive number of minutes (received ${String(_)}); using 30.`);
-	}, [_, ct]), u.useEffect(() => {
+	d.useEffect(() => {
+		bt || n(`TimePicker:step:${String(_)}`, `TimePicker: \`step\` must be a positive number of minutes (received ${String(_)}); using 30.`);
+	}, [_, bt]), d.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.`);
 	}, [
 		v,
 		y,
 		k
 	]);
-	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 j = !b && !x, [M, N, xt] = a(He, (Ue ?? !1) && j, We), St = te(), P = M && j && St;
+	d.useEffect(() => {
+		!j && M && !xt && N(!1);
 	}, [
 		j,
 		M,
-		lt,
+		xt,
 		N
 	]);
-	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 = () => {
+	let [F, I] = d.useState(null), [L, R] = d.useState(null), [Ct, wt] = d.useState(j);
+	Ct !== j && (wt(j), j || (I(null), R(null)));
+	let [Tt, Et] = d.useState(T);
+	Tt !== T && (Et(T), L !== null && (I(null), R(null)));
+	let Dt = F ?? "", Ot = () => {
 		j && !P && N(!0);
-	}, z = () => N(!1), B = u.useMemo(() => {
-		let e = ht.trim().toLowerCase();
+	}, z = () => N(!1), B = d.useMemo(() => {
+		let e = Dt.trim().toLowerCase();
 		if (!e) return;
-		let t = l(e), n = Number.isNaN(t) ? null : c(t);
-		return (t) => t.value === n || De(t, e);
-	}, [ht]), V = (e) => {
+		let t = u(e), n = Number.isNaN(t) ? null : l(t);
+		return (t) => t.value === n || Fe(t, e);
+	}, [Dt]), kt = (e) => {
 		let t = e.trim().toLowerCase();
 		if (!t) return null;
-		let n = l(e);
+		let n = u(e);
 		if (!Number.isNaN(n)) {
-			let e = c(n);
+			let e = l(n);
 			return A.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 = () => {
+		return (A.find((e) => Ie(e, t)) ?? A.find((e) => Fe(e, t)))?.value ?? null;
+	}, At = T !== "" && A.some((e) => e.value === T), jt = d.useMemo(() => T ? [T] : [], [T]), V = (e) => {
+		E(e), I(null), R(null);
+	}, H = (e) => {
+		if (!e.trim()) return V(""), null;
+		let t = u(e);
+		return Number.isNaN(t) ? "unparseable" : !k || t < D || t > O ? "out-of-range" : (V(l(t)), null);
+	}, Mt = (e, t) => {
+		R(t), Ge?.(e, t);
+	}, U = () => {
 		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(),
+	}, W = d.useMemo(() => B ? A.some(B) : A.length > 0, [A, B]), G = P && W, K = be({
+		open: G,
+		onOpenChange: (e) => e ? Ot() : z(),
 		mode: "editable",
-		selectedValues: vt,
-		onSelect: (e) => H(e),
+		selectedValues: jt,
+		onSelect: (e) => V(e),
 		items: A,
 		filter: B,
-		autoHighlight: F === null && _t ? "selected" : !1,
+		autoHighlight: F === null && At ? "selected" : !1,
 		idPrefix: "timepicker-listbox",
 		onClearDraft: F === null ? void 0 : () => {
-			W(), z();
+			U(), z();
 		}
-	}), 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({
+	}), Nt = T ? K.getItem(T)?.label ?? h(T, g) : "", q = Be && !x && T !== "", Pt = P && !W ? A.length === 0 ? S?.noTimes ?? "No times available" : S?.noMatches ?? "No matching times" : "", Ft = d.useRef(null), J = d.useRef(null), It = d.useRef(null), Lt = o(vt, Ft), Rt = o(gt, J), { layerId: zt } = ae({
 		open: P,
 		onDismiss: z,
-		refs: [Ct, St],
-		anchorRef: Y,
+		refs: [It, Ft],
+		anchorRef: J,
 		kind: "listbox",
 		focusOutside: !0
-	}), { setReference: Dt, setFloating: Ot, floatingProps: kt } = be({
+	}), { setReference: Bt, setFloating: Vt, floatingProps: Ht } = De({
 		open: P,
 		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) => {
+	}), Ut = o(It, Vt), Y = re(), Wt = (Je ?? Y?.required ?? !1) && !x, X = ee("timepicker-error"), Z = L !== null && !Y?.hasErrorMessage, Gt = ie({
+		id: it,
+		"aria-label": at,
+		"aria-labelledby": ot,
+		"aria-describedby": ne(st, Z ? X : void 0),
+		"aria-invalid": L !== null || ct,
+		"aria-required": lt ?? Je
+	}), Kt = ge(!1, Gt["aria-invalid"]);
+	_e(J, () => {
+		E(c ?? ""), U(), z();
+	}, qe);
+	let qt = (e) => {
 		if (!j) 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();
+		I(t), R(null), P || N(!0), K.setActiveValue(kt(t));
+	}, Jt = r(mt, (e) => {
+		if (j && (K.onKeyDown(e), !(e.defaultPrevented || e.nativeEvent.isComposing))) {
+			if (e.key === "Escape" && F === "" && Nt !== "") {
+				e.preventDefault(), U(), z();
 				return;
 			}
 			if (e.key === "Enter" && F !== null) {
 				e.preventDefault();
-				let t = U(F);
-				z(), t !== null && yt(F, t);
+				let t = H(F);
+				z(), t !== null && Mt(F, 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 && F !== null && !F.trim() && je(() => H(F)), e.key === "Tab" && P && !G && z();
 		}
-	}), Lt = r(nt, q.onKeyUp), Rt = () => {
-		j && !P && (gt(), F !== null && q.setActiveValue(V(F)));
-	}, zt = r(et, () => {
+	}), Yt = r(ht, K.onKeyUp), Xt = () => {
+		j && !P && (Ot(), F !== null && K.setActiveValue(kt(F)));
+	}, Zt = r(pt, () => {
 		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, {
+		let e = L === null ? H(F) : null;
+		z(), e !== null && Mt(F, e);
+	}), Qt = () => {
+		j && (P ? z() : Xt(), J.current?.focus());
+	}, $t = () => {
+		j && (V(""), J.current?.focus());
+	}, en = ne(ot, Y?.labelId), tn = (t) => /* @__PURE__ */ f("ul", {
+		...K.getListboxProps(),
+		"aria-labelledby": en,
+		"aria-label": en ? void 0 : at ?? S?.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__ */ f(Me, {
 			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 = Ee(Ve), $ = "";
+	Z && L === "unparseable" ? $ = (S?.invalidTime ?? Ne)(g === "24h" ? "HH:mm" : "h:mm AM") : Z && ($ = (S?.outOfRange ?? Pe)(s.minTime === void 0 ? void 0 : h(v, g), s.maxTime === void 0 ? void 0 : h(y, g)));
+	let nn = P ? W : A.length > 0;
+	return /* @__PURE__ */ f(ye.Provider, {
+		value: K.context,
+		children: /* @__PURE__ */ p("div", {
+			"data-size": C,
+			"data-appearance": w,
+			...yt,
+			ref: Lt,
+			className: e(i.root, "relative inline-flex flex-col", _t),
 			children: [
-				/* @__PURE__ */ f("div", {
-					ref: Dt,
+				/* @__PURE__ */ p("div", {
+					ref: Bt,
 					className: "relative flex items-center",
 					children: [
-						/* @__PURE__ */ d("input", {
-							ref: Tt,
+						/* @__PURE__ */ f("input", {
+							ref: Rt,
 							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,
-							placeholder: ke,
+							...K.getComboboxProps(),
+							"aria-controls": nn ? K.listboxId : void 0,
+							...Gt,
+							"aria-errormessage": ut,
+							"aria-details": dt,
+							value: F ?? Nt,
+							onChange: qt,
+							onClick: Xt,
+							onFocus: ft,
+							onBlur: Zt,
+							onKeyDown: Jt,
+							onKeyUp: Yt,
+							placeholder: Le,
 							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)))
+							autoComplete: Ye,
+							autoCapitalize: Xe,
+							autoCorrect: Ze,
+							maxLength: Qe,
+							enterKeyHint: $e,
+							inputMode: et,
+							spellCheck: tt,
+							autoFocus: nt,
+							tabIndex: rt,
+							className: e(i.input, ue[C], "w-full", de[C], fe[C], ce[w], "text-foreground placeholder:text-muted-foreground", le, se, Kt && "border-destructive", Se(Number(q) + Number(Q), C))
 						}),
-						J && /* @__PURE__ */ d("button", {
+						q && /* @__PURE__ */ f("button", {
 							type: "button",
 							"aria-label": S?.clear ?? "Clear time",
 							disabled: b,
 							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: $t,
+							className: e(i.clearButton, we(C, w), xe(C, Q ? 2 : 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__ */ f(me, { size: Ce(C, "icon") })
 						}),
-						Q && /* @__PURE__ */ d(ve, {
+						Q && /* @__PURE__ */ f(Te, {
 							component: "TimePicker",
-							expandIcon: je,
+							expandIcon: Ve,
 							label: S?.expand ?? "Show times",
-							expanded: K,
-							listboxId: q.listboxId,
+							expanded: G,
+							listboxId: K.listboxId,
 							disabled: b || !!x,
-							onToggle: Bt
+							onToggle: Qt,
+							size: C,
+							appearance: w,
+							className: i.expandButton,
+							iconClassName: i.expandIcon
 						})
 					]
 				}),
-				Z && /* @__PURE__ */ d("p", {
-					id: Mt,
+				Z && /* @__PURE__ */ f("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", {
+				!P && A.length > 0 && tn(!0),
+				/* @__PURE__ */ f("span", {
 					role: "status",
 					className: "sr-only",
-					children: xt
+					children: Pt
 				}),
-				/* @__PURE__ */ d(me, {
-					name: Ie,
-					form: C,
+				/* @__PURE__ */ f(ve, {
+					name: Ke,
+					form: qe,
 					disabled: b,
-					value: E,
+					value: T,
 					type: "text",
-					required: jt,
-					onInvalid: () => Y.current?.focus()
+					required: Wt,
+					onInvalid: () => J.current?.focus()
 				}),
-				P && /* @__PURE__ */ d(oe, {
-					layerId: Et,
-					children: /* @__PURE__ */ d("div", {
-						ref: At,
-						...kt,
+				P && /* @__PURE__ */ f(oe, {
+					layerId: zt,
+					children: /* @__PURE__ */ f("div", {
+						ref: Ut,
+						...Ht,
 						"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 ? tn(!1) : /* @__PURE__ */ f("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: Pt
 						})
 					})
 				})