@mortenbrudvik/waveui 0.8.0 → 0.10.0

package/dist/components/input/TimePicker.mjs

@@ -9,278 +9,283 @@ 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 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";
+import { ListboxContext as ae, useListbox as oe, useListboxOption as s } from "../../hooks/useListbox.mjs";
+import { useDismiss as se } from "../../hooks/useDismiss.mjs";
+import { Portal as ce } from "../portal/Portal.mjs";
+import { disabledStyles as le, forcedColors as ue, inputAppearanceClasses as de, inputFocus as fe, inputHeightClasses as pe, inputPaddingClasses as me, inputTextClasses as he } from "../../lib/styles.mjs";
+import { CheckIcon as c, DismissIcon as ge } from "../../lib/icons.mjs";
+import { useInputLook as _e } from "./inputLook.mjs";
+import { isInvalidLook as ve } from "./Input.mjs";
+import { useFormReset as ye } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as be } from "../internal/HiddenInput.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 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({
+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 } = s({
 		value: t,
 		label: n
 	});
-	return /* @__PURE__ */ m("li", {
+	return /* @__PURE__ */ p("li", {
 		...a,
-		className: e(i.option, h, r && s.selectedContainer),
-		children: [/* @__PURE__ */ p("span", {
+		className: e(i.option, m, r && ue.selectedContainer),
+		children: [/* @__PURE__ */ f("span", {
 			className: e(i.checkIcon, "flex h-4 w-4 shrink-0 items-center justify-center"),
-			children: r ? /* @__PURE__ */ p(c, { size: 12 }) : null
+			children: r ? /* @__PURE__ */ f(c, { size: 12 }) : null
 		}), n]
 	});
 });
-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 g(e, t) {
-	let n = d(e);
-	return Number.isNaN(n) ? e : xe(n, t);
+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 = 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 _ = (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, _), [
+var g = (s) => {
+	let { value: ue, 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 } = _e(Re, ze), [T, E] = a(ue, 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,
-		b,
-		_
+		g
 	]);
-	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.`);
+	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,
-		b,
-		O
+		k
 	]);
-	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);
+	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);
 	}, [
-		A,
 		j,
-		dt,
-		M
+		M,
+		xt,
+		N
 	]);
-	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();
+	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 = d.useMemo(() => {
+		let e = Dt.trim().toLowerCase();
 		if (!e) return;
-		let t = d(e), n = Number.isNaN(t) ? null : u(t);
-		return (t) => t.value === n || De(t, e);
-	}, [_t]), B = (e) => {
+		let t = u(e), n = Number.isNaN(t) ? null : l(t);
+		return (t) => t.value === n || Fe(t, e);
+	}, [Dt]), V = (e) => {
 		let t = e.trim().toLowerCase();
 		if (!t) return null;
-		let n = d(e);
+		let n = u(e);
 		if (!Number.isNaN(n)) {
-			let e = u(n);
-			return k.some((t) => t.value === e) ? e : null;
+			let e = l(n);
+			return A.some((t) => t.value === e) ? e : null;
 		}
-		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(),
+		return (A.find((e) => Ie(e, t)) ?? A.find((e) => Fe(e, t)))?.value ?? null;
+	}, kt = T !== "" && A.some((e) => e.value === T), At = d.useMemo(() => T ? [T] : [], [T]), H = (e) => {
+		E(e), I(null), R(null);
+	}, U = (e) => {
+		if (!e.trim()) return H(""), null;
+		let t = u(e);
+		return Number.isNaN(t) ? "unparseable" : !k || t < D || t > O ? "out-of-range" : (H(l(t)), null);
+	}, jt = (e, t) => {
+		R(t), Ge?.(e, t);
+	}, W = () => {
+		I(null), R(null);
+	}, G = d.useMemo(() => B ? A.some(B) : A.length > 0, [A, B]), K = P && G, q = oe({
+		open: K,
+		onOpenChange: (e) => e ? Ot() : z(),
 		mode: "editable",
-		selectedValues: bt,
-		onSelect: (e) => V(e),
-		items: k,
-		filter: z,
-		autoHighlight: P === null && yt ? "selected" : !1,
+		selectedValues: At,
+		onSelect: (e) => H(e),
+		items: A,
+		filter: B,
+		autoHighlight: F === null && kt ? "selected" : !1,
 		idPrefix: "timepicker-listbox",
-		onClearDraft: P === null ? void 0 : () => {
-			U(), R();
+		onClearDraft: F === null ? void 0 : () => {
+			W(), z();
 		}
-	}), 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,
+	}), Mt = T ? q.getItem(T)?.label ?? h(T, g) : "", J = Be && !x && T !== "", Nt = P && !G ? A.length === 0 ? S?.noTimes ?? "No times available" : S?.noMatches ?? "No matching times" : "", Pt = d.useRef(null), Y = d.useRef(null), Ft = d.useRef(null), It = o(vt, Pt), Lt = o(gt, Y), { layerId: Rt } = se({
+		open: P,
+		onDismiss: z,
+		refs: [Ft, Pt],
+		anchorRef: Y,
 		kind: "listbox",
 		focusOutside: !0
-	}), { setReference: kt, setFloating: At, floatingProps: jt } = ye({
-		open: N,
+	}), { setReference: zt, setFloating: Bt, floatingProps: Vt } = De({
+		open: P,
 		side: "bottom",
 		align: "start",
 		matchReferenceWidth: !0,
 		fitViewport: !0
-	}), 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;
+	}), Ht = o(Ft, Bt), X = re(), Ut = (Je ?? X?.required ?? !1) && !x, Wt = ee("timepicker-error"), Z = L !== null && !X?.hasErrorMessage, Gt = ie({
+		id: it,
+		"aria-label": at,
+		"aria-labelledby": ot,
+		"aria-describedby": ne(st, Z ? Wt : void 0),
+		"aria-invalid": L !== null || ct,
+		"aria-required": lt ?? Je
+	}), Kt = ve(!1, Gt["aria-invalid"]);
+	ye(Y, () => {
+		E(c ?? ""), W(), z();
+	}, qe);
+	let qt = (e) => {
+		if (!j) return;
 		let t = e.target.value;
-		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();
+		I(t), R(null), P || N(!0), q.setActiveValue(V(t));
+	}, Jt = r(mt, (e) => {
+		if (j && (q.onKeyDown(e), !(e.defaultPrevented || e.nativeEvent.isComposing))) {
+			if (e.key === "Escape" && F === "" && Mt !== "") {
+				e.preventDefault(), W(), z();
 				return;
 			}
-			if (e.key === "Enter" && P !== null) {
+			if (e.key === "Enter" && F !== null) {
 				e.preventDefault();
-				let t = H(P);
-				R(), t !== null && xt(P, t);
+				let t = U(F);
+				z(), t !== null && jt(F, t);
 			}
-			e.key === "Tab" && !e.shiftKey && q && P !== null && !P.trim() && Ce(() => H(P)), e.key === "Tab" && N && !G && R();
+			e.key === "Tab" && !e.shiftKey && J && F !== null && !F.trim() && je(() => U(F)), e.key === "Tab" && P && !K && z();
 		}
-	}), 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",
+	}), Yt = r(ht, q.onKeyUp), Xt = () => {
+		j && !P && (Ot(), F !== null && q.setActiveValue(V(F)));
+	}, Zt = r(pt, () => {
+		if (!j || F === null) return;
+		let e = L === null ? U(F) : null;
+		z(), e !== null && jt(F, e);
+	}), Qt = () => {
+		j && (P ? z() : Xt(), Y.current?.focus());
+	}, $t = () => {
+		j && (H(""), Y.current?.focus());
+	}, en = ne(ot, X?.labelId), tn = (t) => /* @__PURE__ */ f("ul", {
+		...q.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__ */ p(we, {
+		children: q.items.map((e) => /* @__PURE__ */ f(Me, {
 			value: e.value,
 			label: e.label
 		}, e.value))
-	}), 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),
+	}), 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 ? G : A.length > 0;
+	return /* @__PURE__ */ f(ae.Provider, {
+		value: q.context,
+		children: /* @__PURE__ */ p("div", {
+			"data-size": C,
+			"data-appearance": w,
+			...yt,
+			ref: It,
+			className: e(i.root, "relative inline-flex flex-col", _t),
 			children: [
-				/* @__PURE__ */ m("div", {
-					ref: kt,
+				/* @__PURE__ */ p("div", {
+					ref: zt,
 					className: "relative flex items-center",
 					children: [
-						/* @__PURE__ */ p("input", {
-							ref: Dt,
+						/* @__PURE__ */ f("input", {
+							ref: Lt,
 							type: "text",
-							...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: 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)))
+							...q.getComboboxProps(),
+							"aria-controls": nn ? q.listboxId : void 0,
+							...Gt,
+							"aria-errormessage": ut,
+							"aria-details": dt,
+							value: F ?? Mt,
+							onChange: qt,
+							onClick: Xt,
+							onFocus: ft,
+							onBlur: Zt,
+							onKeyDown: Jt,
+							onKeyUp: Yt,
+							placeholder: Le,
+							disabled: b,
+							readOnly: x,
+							autoComplete: Ye,
+							autoCapitalize: Xe,
+							autoCorrect: Ze,
+							maxLength: Qe,
+							enterKeyHint: $e,
+							inputMode: et,
+							spellCheck: tt,
+							autoFocus: nt,
+							tabIndex: rt,
+							className: e(i.input, pe[C], "w-full", me[C], he[C], de[w], "text-foreground placeholder:text-muted-foreground", fe, le, Kt && "border-destructive", Se(Number(J) + Number(Q), C))
 						}),
-						q && /* @__PURE__ */ p("button", {
+						J && /* @__PURE__ */ f("button", {
 							type: "button",
-							"aria-label": C?.clear ?? "Clear time",
-							disabled: x,
+							"aria-label": S?.clear ?? "Clear time",
+							disabled: b,
 							onMouseDown: (e) => e.preventDefault(),
-							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, {})
+							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(ge, { size: Ce(C, "icon") })
 						}),
-						Q && /* @__PURE__ */ p(_e, {
+						Q && /* @__PURE__ */ f(Te, {
 							component: "TimePicker",
-							expandIcon: je,
-							label: C?.expand ?? "Show times",
-							expanded: G,
-							listboxId: K.listboxId,
-							disabled: x || !!S,
-							onToggle: Vt,
+							expandIcon: Ve,
+							label: S?.expand ?? "Show times",
+							expanded: K,
+							listboxId: q.listboxId,
+							disabled: b || !!x,
+							onToggle: Qt,
+							size: C,
+							appearance: w,
 							className: i.expandButton,
 							iconClassName: i.expandIcon
 						})
 					]
 				}),
-				Z && /* @__PURE__ */ p("p", {
-					id: X,
+				Z && /* @__PURE__ */ f("p", {
+					id: Wt,
 					role: "alert",
 					className: e(i.errorMessage, "mt-1 text-caption-1 text-error"),
 					children: $
 				}),
-				!N && k.length > 0 && Wt(!0),
-				/* @__PURE__ */ p("span", {
+				!P && A.length > 0 && tn(!0),
+				/* @__PURE__ */ f("span", {
 					role: "status",
 					className: "sr-only",
-					children: Ct
+					children: Nt
 				}),
-				/* @__PURE__ */ p(pe, {
-					name: Ie,
-					form: Le,
-					disabled: x,
-					value: w,
+				/* @__PURE__ */ f(be, {
+					name: Ke,
+					form: qe,
+					disabled: b,
+					value: T,
 					type: "text",
-					required: Nt,
-					onInvalid: () => J.current?.focus()
+					required: Ut,
+					onInvalid: () => Y.current?.focus()
 				}),
-				N && /* @__PURE__ */ p(oe, {
-					layerId: Ot,
-					children: /* @__PURE__ */ p("div", {
-						ref: Mt,
-						...jt,
+				P && /* @__PURE__ */ f(ce, {
+					layerId: Rt,
+					children: /* @__PURE__ */ f("div", {
+						ref: Ht,
+						...Vt,
 						"data-state": "open",
 						className: e(i.surface, "flex flex-col overflow-hidden rounded border border-border bg-background shadow-8"),
-						children: W ? Wt(!1) : /* @__PURE__ */ p("div", {
+						children: G ? tn(!1) : /* @__PURE__ */ f("div", {
 							"aria-hidden": "true",
 							className: e(i.emptyMessage, "px-3 py-1.5 text-body-1 text-muted-foreground"),
-							children: Ct
+							children: Nt
 						})
 					})
 				})
@@ -288,8 +293,8 @@ var _ = (s) => {
 		})
 	});
 };
-_.displayName = "TimePicker";
+g.displayName = "TimePicker";
 //#endregion
-export { _ as TimePicker };
+export { g as TimePicker };
 
 //# sourceMappingURL=TimePicker.mjs.map