@box-kite/react 2.2.9 → 2.2.11

package/components/datePicker.mjs

@@ -3,26 +3,26 @@ import { f as e } from "../react-shared.mjs";
 import t from "../box.mjs";
 import { a as n, t as r } from "../behavior.mjs";
 import { t as i } from "../placement.mjs";
-import { n as a, t as o } from "../dates.mjs";
-import { A as s, N as c, O as l, i as u, r as d, x as f } from "../date-math.mjs";
-import { l as p, s as m } from "../date-input.mjs";
-import { a as h, t as g } from "../reporting.mjs";
-import { Path as _, Svg as v } from "./svg.mjs";
-import { n as ee } from "../date-environment.mjs";
-import te from "./calendar.mjs";
-import { t as y } from "../layer.mjs";
-import b from "./overlay.mjs";
-import x from "./dateField.mjs";
-import { useCallback as S, useEffect as C, useMemo as w, useState as T } from "react";
-import { Fragment as ne, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { n as a, s as o, t as s } from "../dates.mjs";
+import { A as c, N as l, O as u, i as d, r as f, x as p } from "../date-math.mjs";
+import { l as m, s as h } from "../date-input.mjs";
+import { a as g, t as _ } from "../reporting.mjs";
+import { Path as v, Svg as y } from "./svg.mjs";
+import { n as b } from "../date-environment.mjs";
+import ee from "./calendar.mjs";
+import { t as x } from "../layer.mjs";
+import S from "./overlay.mjs";
+import C from "./dateField.mjs";
+import { useCallback as w, useEffect as T, useMemo as E, useRef as D, useState as O } from "react";
+import { Fragment as te, jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region src/components/datePicker.tsx
-function re() {
-	return /* @__PURE__ */ E(v, {
+function ne() {
+	return /* @__PURE__ */ k(y, {
 		viewBox: "0 0 16 16",
 		width: "1rem",
 		height: "1rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ E(_, {
+		children: /* @__PURE__ */ k(v, {
 			d: "M3 3.5h10a1 1 0 0 1 1 1V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1ZM2 7h12M5.5 2v3M10.5 2v3",
 			stroke: "currentColor",
 			strokeWidth: 1.5,
@@ -30,13 +30,13 @@ function re() {
 		})
 	});
 }
-function ie() {
-	return /* @__PURE__ */ E(v, {
+function re() {
+	return /* @__PURE__ */ k(y, {
 		viewBox: "0 0 16 16",
 		width: "1rem",
 		height: "1rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ E(_, {
+		children: /* @__PURE__ */ k(v, {
 			d: "M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM8 5v3l2 1.5",
 			stroke: "currentColor",
 			strokeWidth: 1.5,
@@ -45,13 +45,13 @@ function ie() {
 		})
 	});
 }
-function ae() {
-	return /* @__PURE__ */ E(v, {
+function ie() {
+	return /* @__PURE__ */ k(y, {
 		viewBox: "0 0 16 16",
 		width: "0.875rem",
 		height: "0.875rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ E(_, {
+		children: /* @__PURE__ */ k(v, {
 			d: "m4.5 4.5 7 7m0-7-7 7",
 			stroke: "currentColor",
 			strokeWidth: 1.5,
@@ -59,12 +59,12 @@ function ae() {
 		})
 	});
 }
-function O(e, t) {
+function j(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function oe(e) {
-	let [r, a] = T(null), o = e.ref, s = S((e) => {
-		a(e), O(o, e);
+function ae(e) {
+	let [r, a] = O(null), o = e.ref, s = w((e) => {
+		a(e), j(o, e);
 	}, [o]), c = (e) => {
 		if (!e || e.contains(document.activeElement) && document.activeElement !== e) return;
 		let t = [
@@ -73,7 +73,7 @@ function oe(e) {
 			"button:not([disabled])"
 		].map((t) => e.querySelector(t)).find(Boolean), n = e.querySelector("[role=\"listbox\"]"), r = n?.querySelector("[role=\"option\"][tabindex=\"0\"]");
 		n && r && (n.scrollTop = r.offsetTop - n.clientHeight / 2 + r.offsetHeight / 2), (t ?? e).focus({ preventScroll: !0 });
-	}, l = n((e) => c(e)), { platform: u, isOpen: d, id: f, setPanel: p, setOpen: m, trigger: h, triggerElement: g, panelElement: _ } = y({
+	}, l = n((e) => c(e)), { platform: u, isOpen: d, id: f, setPanel: p, setOpen: m, trigger: h, triggerElement: g, panelElement: _ } = x({
 		haspopup: "dialog",
 		idPrefix: "date-picker",
 		open: e.open,
@@ -92,13 +92,15 @@ function oe(e) {
 		align: e.align,
 		offset: 1,
 		flip: !0,
+		matchWidth: e.matchWidth,
 		anchor: r
 	});
-	return C(() => {
+	return T(() => {
 		d && c(_);
 	}, [d, _]), {
 		attachTrigger: h.ref,
 		triggerAttributes: h.props,
+		triggerElement: g,
 		closeOnChoice: (e) => {
 			g?.focus(), m(!1, {
 				reason: "select",
@@ -113,7 +115,7 @@ function oe(e) {
 				"aria-label": e.label,
 				tabIndex: -1
 			};
-			return u ? /* @__PURE__ */ E(t, {
+			return u ? /* @__PURE__ */ k(t, {
 				ref: p,
 				component: "popover",
 				variant: { topLayer: !0 },
@@ -125,12 +127,13 @@ function oe(e) {
 					...i
 				},
 				children: d ? n : null
-			}) : d && /* @__PURE__ */ E(b, {
+			}) : d && /* @__PURE__ */ k(S, {
 				contentRef: p,
 				anchor: r,
 				side: e.side,
 				align: e.align,
 				offset: 1,
+				matchWidth: e.matchWidth,
 				component: "popover",
 				p: 3,
 				id: f,
@@ -140,31 +143,51 @@ function oe(e) {
 		}
 	};
 }
-function se(e) {
-	let { value: n, step: i, locale: a, hourCycle: s, onSelect: c, label: l } = e, u = w(() => p(i), [i]), d = m(n, i), f = Math.max(0, d ? u.indexOf(d) : u.indexOf("09:00:00")), h = r({
-		count: u.length,
-		defaultActiveIndex: f,
+function oe(e) {
+	let { value: n, step: i, locale: a, hourCycle: o, onSelect: c, label: l, min: u, max: d, emptyLabel: f, separated: p } = e, g = E(() => m(i, {
+		min: u,
+		max: d
+	}), [
+		i,
+		u,
+		d
+	]), _ = h(n, i), v = Math.max(0, _ ? g.indexOf(_) : g.indexOf("09:00:00")), y = r({
+		count: g.length,
+		defaultActiveIndex: v,
 		loop: !1,
-		onSelect: (e, t) => c(u[e], t)
-	});
-	return /* @__PURE__ */ E(t, {
+		onSelect: (e, t) => c(g[e], t)
+	}), b = p ? {
+		ps: 2,
+		bs: 1
+	} : {};
+	return g.length === 0 ? /* @__PURE__ */ k(t, {
+		component: "datePicker.empty",
+		flexGrow: 1,
+		px: 3,
+		py: 1.5,
+		fontSize: 14,
+		...b,
+		props: { role: "status" },
+		children: f
+	}) : /* @__PURE__ */ k(t, {
 		component: "datePicker.times",
 		position: "relative",
 		display: "flex",
 		d: "column",
+		flexGrow: 1,
 		gap: .5,
 		maxHeight: 72,
 		overflowY: "auto",
-		ps: 2,
-		bs: 1,
+		p: 1,
+		...b,
 		props: {
 			role: "listbox",
 			"aria-label": l,
-			onKeyDown: h.onKeyDown
+			onKeyDown: y.onKeyDown
 		},
-		children: u.map((e, n) => /* @__PURE__ */ E(t, {
+		children: g.map((e, n) => /* @__PURE__ */ k(t, {
 			component: "datePicker.time",
-			variant: { selected: e === d },
+			variant: { selected: e === _ },
 			px: 3,
 			py: 1.5,
 			borderRadius: 2,
@@ -174,21 +197,21 @@ function se(e) {
 			css: { fontVariantNumeric: "tabular-nums" },
 			props: {
 				role: "option",
-				"aria-selected": e === d,
-				...h.itemProps(n),
+				"aria-selected": e === _,
+				...y.itemProps(n),
 				onClick: (t) => c(e, t)
 			},
-			children: o(e, {
+			children: s(e, {
 				locale: a,
 				hour: "numeric",
 				minute: "2-digit",
-				hourCycle: s === void 0 ? void 0 : s === 12 ? "h12" : "h23"
+				hourCycle: o === void 0 ? void 0 : o === 12 ? "h12" : "h23"
 			})
 		}, e))
 	});
 }
-function ce(e) {
-	return /* @__PURE__ */ E(t, {
+function se(e) {
+	return /* @__PURE__ */ k(t, {
 		component: "datePicker.presets",
 		display: "flex",
 		d: "column",
@@ -196,7 +219,7 @@ function ce(e) {
 		pe: 2,
 		be: 1,
 		props: { role: "group" },
-		children: e.presets.map((n) => /* @__PURE__ */ E(t, {
+		children: e.presets.map((n) => /* @__PURE__ */ k(t, {
 			tag: "button",
 			component: "datePicker.preset",
 			variant: { selected: e.isSelected(n.value) },
@@ -214,56 +237,162 @@ function ce(e) {
 		}, n.label))
 	});
 }
-function k(e, n) {
-	let { type: r = "date", value: i, defaultValue: a = null, onValueChange: p, zone: m, locale: _, hourCycle: v, granularity: y, disambiguation: b, min: S, max: C, isDateUnavailable: w, disabled: T = !1, readOnly: O = !1, required: k, invalid: A, name: j, label: M, labelledBy: le, describedBy: ue, open: N, defaultOpen: P, onOpenChange: de, closeOnSelect: F = !0, firstDayOfWeek: I, weekNumbers: fe, side: L = "bottom", align: pe = "start", clearable: R = !1, triggerLabel: z, clearLabel: B = "Clear", tabIndex: V, step: H = 30, defaultTime: U = "00:00", presets: W, showZone: me, ...he } = e, G = ee({
-		locale: _,
-		zone: m === "none" ? void 0 : m
-	}), { locale: K } = G, q = r === "datetime" && m !== "none" ? G.zone : null, J = q ?? G.zone, [Y, X] = h({
+function ce(e) {
+	let { frame: r, attachField: i, attachTrigger: a, triggerAttributes: o, triggerElement: s, id: c, label: l, labelledBy: u, describedBy: d } = e, { text: f, placeholder: p, icon: m, clear: h, disabled: g, invalid: _, required: v = !1, tabIndex: y, inputs: b, onReset: ee } = e, x = D(null), S = l === void 0 ? void 0 : `${c}-label`, C = `${c}-value`, w = n(ee);
+	return T(() => {
+		let e = x.current?.form;
+		if (e) return e.addEventListener("reset", w), () => e.removeEventListener("reset", w);
+	}, [w]), /* @__PURE__ */ A(te, { children: [l !== void 0 && /* @__PURE__ */ k(t, {
+		component: "dateField.label",
+		display: "block",
+		mb: 1.5,
+		fontSize: 14,
+		id: S,
+		props: { onClick: () => s?.focus() },
+		children: l
+	}), /* @__PURE__ */ A(t, {
+		ref: i,
+		component: "dateField",
+		display: "inline-flex",
+		ai: "center",
+		position: "relative",
+		cursor: "pointer",
+		css: { fontVariantNumeric: "tabular-nums" },
+		...r,
+		variant: [r.variant, {
+			disabled: g,
+			invalid: _
+		}],
+		children: [
+			/* @__PURE__ */ k(t, {
+				tag: "button",
+				ref: a,
+				component: "datePicker.value",
+				variant: { placeholder: !f },
+				flexGrow: 1,
+				textAlign: "start",
+				whiteSpace: "nowrap",
+				css: { font: "inherit" },
+				after: {
+					position: "absolute",
+					inset: 0
+				},
+				disabled: g,
+				props: {
+					type: "button",
+					tabIndex: y,
+					"aria-labelledby": [
+						S,
+						u,
+						C
+					].filter(Boolean).join(" "),
+					"aria-describedby": d,
+					"aria-invalid": _ || void 0,
+					...o
+				},
+				children: /* @__PURE__ */ k("span", {
+					id: C,
+					children: f || p
+				})
+			}),
+			/* @__PURE__ */ A(t, {
+				display: "inline-flex",
+				ai: "center",
+				gap: 1,
+				ms: 2,
+				children: [h, /* @__PURE__ */ k(t, {
+					component: "datePicker.icon",
+					display: "inline-flex",
+					ai: "center",
+					jc: "center",
+					width: 7,
+					height: 7,
+					me: -1.5,
+					props: { "aria-hidden": !0 },
+					children: m
+				})]
+			}),
+			b.map((e, n) => v ? /* @__PURE__ */ k(t, {
+				tag: "input",
+				ref: n === 0 ? x : void 0,
+				component: "dateField.validation",
+				required: !0,
+				disabled: g,
+				props: {
+					type: "text",
+					name: e.name,
+					value: e.value,
+					tabIndex: -1,
+					"aria-hidden": !0,
+					onChange: () => {},
+					onFocus: () => s?.focus()
+				}
+			}, n) : e.name === void 0 ? null : /* @__PURE__ */ k("input", {
+				ref: n === 0 ? x : void 0,
+				type: "hidden",
+				name: e.name,
+				value: e.value,
+				disabled: g
+			}, n))
+		]
+	})] });
+}
+function M(e, n) {
+	let { type: r = "date", value: i, defaultValue: a = null, onValueChange: m, zone: h, locale: v, hourCycle: y, granularity: x, disambiguation: S, min: w, max: T, isDateUnavailable: E, disabled: D = !1, readOnly: O = !1, required: j, invalid: M, name: N, label: P, labelledBy: le, describedBy: ue, open: de, defaultOpen: fe, onOpenChange: pe, closeOnSelect: F = !0, firstDayOfWeek: I, weekNumbers: me, side: L = "bottom", align: R = "start", matchWidth: he = r === "time", emptyTimesLabel: z = "No times available", clearable: ge = !1, pickOnly: B = !1, triggerLabel: _e, clearLabel: ve = "Clear", tabIndex: V, step: H = 30, defaultTime: U = "00:00", presets: W, showZone: G, ...ye } = e, K = b({
+		locale: v,
+		zone: h === "none" ? void 0 : h
+	}), { locale: q } = K, J = r === "datetime" && h !== "none" ? K.zone : null, Y = J ?? K.zone, [X, Z] = g({
 		value: i,
 		defaultValue: a,
-		onChange: (e, t) => p?.(e, {
+		onChange: (e, t) => m?.(e, {
 			...t,
-			...f(e, J)
+			...p(e, Y)
 		}),
 		interaction: {
 			component: "datePicker",
 			type: "valueChange",
 			content: ["value"]
 		}
-	}), Z = z ?? (r === "time" ? "Choose time" : "Choose date"), Q = typeof M == "string" ? M : Z, { attachTrigger: ge, triggerAttributes: _e, closeOnChoice: ve, attachField: ye, panel: be } = oe({
+	}), Q = _e ?? (r === "time" ? "Choose time" : "Choose date"), be = typeof P == "string" ? P : Q, { attachTrigger: xe, triggerAttributes: Se, triggerElement: Ce, closeOnChoice: we, id: Te, attachField: Ee, panel: De } = ae({
 		ref: n,
-		open: N,
-		defaultOpen: P,
-		onOpenChange: de,
+		open: de,
+		defaultOpen: fe,
+		onOpenChange: pe,
 		side: L,
-		align: pe,
-		label: Q
-	}), xe = Y && r !== "time" ? l(Y, { zone: J }) : null, Se = Y && r !== "date" ? s(Y, { zone: J }) : null, Ce = Y ? o(Y, {
-		locale: K,
-		zone: J,
+		align: R,
+		matchWidth: he,
+		label: be
+	}), $ = X && r !== "time" ? u(X, { zone: Y }) : null, Oe = X && r !== "date" ? c(X, { zone: Y }) : null, ke = r === "datetime" ? $ ?? l(Y) : null, Ae = (e) => e && (ke === null || u(e, { zone: Y }) === ke) ? c(e, { zone: Y }) : null, je = X ? s(X, {
+		locale: q,
+		zone: Y,
+		hourCycle: y === void 0 ? void 0 : y === 12 ? "h12" : "h23",
 		...r === "date" ? { dateStyle: "medium" } : r === "time" ? { timeStyle: "short" } : {
 			dateStyle: "medium",
 			timeStyle: "short"
 		}
-	}) : "", $ = ve, we = (e, t) => d(e, t, q ? {
-		zone: q,
-		disambiguation: b
-	} : {}), Te = (e, t) => {
-		e && (r === "date" ? (X(e, {
+	}) : "", Me = B && X && J && (G ?? J !== K.readerZone) ? o(J, {
+		locale: q,
+		style: "short",
+		at: X
+	}) : null, Ne = we, Pe = (e, t) => f(e, t, J ? {
+		zone: J,
+		disambiguation: S
+	} : {}), Fe = (e, t) => {
+		e && (r === "date" ? (Z(e, {
 			reason: "select",
 			event: t
-		}), F && $(t)) : X(we(e, Se ?? U), {
+		}), F && Ne(t)) : Z(Pe(e, Oe ?? U), {
 			reason: "select",
 			event: t
 		}));
-	}, Ee = (e, t) => {
-		X(r === "time" ? e : we(xe ?? c(J), e), {
+	}, Ie = (e, t) => {
+		Z(r === "time" ? e : Pe($ ?? l(Y), e), {
 			reason: "select",
 			event: t
-		}), F && $(t);
-	}, De = /* @__PURE__ */ E(t, {
+		}), F && Ne(t);
+	}, Le = /* @__PURE__ */ k(t, {
 		tag: "button",
-		ref: ge,
+		ref: xe,
 		component: "datePicker.trigger",
 		display: "inline-flex",
 		ai: "center",
@@ -273,15 +402,15 @@ function k(e, n) {
 		ms: 2,
 		me: -1.5,
 		borderRadius: 1.5,
-		disabled: T || O,
+		disabled: D || O,
 		props: {
 			type: "button",
-			"aria-label": Ce ? `${Z}, ${Ce}` : Z,
+			"aria-label": je ? `${Q}, ${je}` : Q,
 			tabIndex: V,
-			..._e
+			...Se
 		},
-		children: E(r === "time" ? ie : re, {})
-	}), Oe = R && Y && !T && !O && /* @__PURE__ */ E(t, {
+		children: k(r === "time" ? re : ne, {})
+	}), Re = ge && X && !D && !O && /* @__PURE__ */ k(t, {
 		tag: "button",
 		component: "datePicker.clear",
 		display: "inline-flex",
@@ -291,84 +420,116 @@ function k(e, n) {
 		height: 6,
 		ms: 1,
 		borderRadius: 999,
+		position: "relative",
+		zIndex: 1,
 		props: {
 			type: "button",
-			"aria-label": B,
+			"aria-label": ve,
 			tabIndex: V,
-			onClick: (e) => X(null, {
+			onClick: (e) => Z(null, {
 				reason: "clear",
 				event: e
 			})
 		},
-		children: /* @__PURE__ */ E(ae, {})
-	});
-	return /* @__PURE__ */ D(g, { children: [/* @__PURE__ */ E(x, {
-		ref: ye,
-		...he,
+		children: /* @__PURE__ */ k(ie, {})
+	}), ze = X !== null && (w != null && d(X, w) < 0 || T != null && d(X, T) > 0), Be = B ? /* @__PURE__ */ k(ce, {
+		frame: ye,
+		attachField: Ee,
+		attachTrigger: O ? void 0 : xe,
+		triggerAttributes: O ? void 0 : Se,
+		triggerElement: Ce,
+		id: Te,
+		label: P,
+		labelledBy: le,
+		describedBy: ue,
+		text: Me ? `${je} ${Me}` : je,
+		placeholder: Q,
+		icon: k(r === "time" ? re : ne, {}),
+		clear: Re,
+		disabled: D,
+		invalid: M ?? (ze || $ !== null && !!E?.($)),
+		required: j,
+		tabIndex: V,
+		inputs: [{
+			name: N,
+			value: X ?? ""
+		}],
+		onReset: (e) => Z(a, {
+			reason: "reset",
+			event: e
+		})
+	}) : /* @__PURE__ */ k(C, {
+		ref: Ee,
+		...ye,
 		type: r,
-		value: Y,
-		onValueChange: (e, t) => X(e, {
+		value: X,
+		onValueChange: (e, t) => Z(e, {
 			reason: t.reason,
 			event: t.event
 		}),
-		zone: m,
-		locale: _,
-		hourCycle: v,
-		granularity: y,
-		disambiguation: b,
-		min: S,
-		max: C,
-		isDateUnavailable: w,
-		disabled: T,
+		zone: h,
+		locale: v,
+		hourCycle: y,
+		granularity: x,
+		disambiguation: S,
+		min: w,
+		max: T,
+		isDateUnavailable: E,
+		disabled: D,
 		readOnly: O,
-		required: k,
-		invalid: A,
-		name: j,
-		label: M,
+		required: j,
+		invalid: M,
+		name: N,
+		label: P,
 		labelledBy: le,
 		describedBy: ue,
-		showZone: me,
+		showZone: G,
 		tabIndex: V,
-		end: /* @__PURE__ */ D(ne, { children: [Oe, De] })
-	}), be(/* @__PURE__ */ D(t, {
+		end: /* @__PURE__ */ A(te, { children: [Re, Le] })
+	});
+	return /* @__PURE__ */ A(_, { children: [Be, De(/* @__PURE__ */ A(t, {
 		display: "flex",
 		gap: 3,
 		ai: "stretch",
 		children: [
-			W && W.length > 0 && /* @__PURE__ */ E(ce, {
+			W && W.length > 0 && /* @__PURE__ */ k(se, {
 				presets: W,
-				isSelected: (e) => Y !== null && u(e, Y, { zone: J }) === 0,
+				isSelected: (e) => X !== null && d(e, X, { zone: Y }) === 0,
 				onSelect: (e, t) => {
-					X(e, {
+					Z(e, {
 						reason: "preset",
 						event: t
-					}), F && $(t);
+					}), F && Ne(t);
 				}
 			}),
-			r !== "time" && /* @__PURE__ */ E(te, {
-				value: xe,
-				onValueChange: (e, t) => Te(e, t.event),
-				min: S ? l(S, { zone: J }) : void 0,
-				max: C ? l(C, { zone: J }) : void 0,
-				isDateUnavailable: w,
-				locale: _,
-				zone: m === "none" ? void 0 : m,
+			r !== "time" && /* @__PURE__ */ k(ee, {
+				value: $,
+				onValueChange: (e, t) => Fe(e, t.event),
+				min: w ? u(w, { zone: Y }) : void 0,
+				max: T ? u(T, { zone: Y }) : void 0,
+				isDateUnavailable: E,
+				locale: v,
+				zone: h === "none" ? void 0 : h,
 				firstDayOfWeek: I,
-				weekNumbers: fe
+				weekNumbers: me
 			}),
-			r !== "date" && /* @__PURE__ */ E(se, {
-				value: Se,
+			r !== "date" && /* @__PURE__ */ k(oe, {
+				value: Oe,
 				step: H,
-				locale: K,
-				hourCycle: v,
-				label: r === "time" ? Q : "Time",
-				onSelect: Ee
+				locale: q,
+				hourCycle: y,
+				label: r === "time" ? be : "Time",
+				min: Ae(w),
+				max: Ae(T),
+				emptyLabel: z,
+				separated: r === "datetime",
+				onSelect: Ie
 			})
 		]
 	}))] });
 }
-function A(e, n) {
-	let { value: r, defaultValue: i = null, onValueChange: o, locale: s, min: c, max: l, isDateUnavailable: d, disabled: f = !1, readOnly: p = !1, required: m, invalid: _, startName: v, endName: y, label: b, labelledBy: S, describedBy: C, startLabel: w = "Start date", endLabel: ne = "End date", open: ie, defaultOpen: O, onOpenChange: se, closeOnSelect: k = !0, firstDayOfWeek: A, weekNumbers: j, months: M = 2, side: le = "bottom", align: ue = "start", clearable: N = !1, triggerLabel: P = "Choose dates", clearLabel: de = "Clear", tabIndex: F, presets: I, props: fe, ...L } = e, { locale: pe } = ee({ locale: s }), [R, z] = h({
+function N(e, n) {
+	let { value: r, defaultValue: i = null, onValueChange: o, locale: s, min: c, max: l, isDateUnavailable: u, disabled: f = !1, readOnly: p = !1, required: m, invalid: h, startName: v, endName: y, label: x, labelledBy: S, describedBy: w, startLabel: T = "Start date", endLabel: E = "End date", open: D, defaultOpen: re, onOpenChange: j, closeOnSelect: oe = !0, firstDayOfWeek: M, weekNumbers: N, months: P = 2, side: le = "bottom", align: ue = "start", matchWidth: de = !1, emptyTimesLabel: fe, clearable: pe = !1, pickOnly: F = !1, triggerLabel: I = "Choose dates", clearLabel: me = "Clear", tabIndex: L, presets: R, props: he, ...z } = e, { locale: ge } = b({ locale: s }), [B, _e] = g({
 		value: r,
 		defaultValue: i,
 		onChange: o,
@@ -377,26 +538,27 @@ function A(e, n) {
 			type: "valueChange",
 			content: ["value"]
 		}
-	}), [B, V] = T({
-		start: R?.start ?? null,
-		end: R?.end ?? null,
-		source: R
-	}), { start: H, end: U } = B;
-	B.source !== R && (H = R?.start ?? null, U = R?.end ?? null, V({
+	}), [ve, V] = O({
+		start: B?.start ?? null,
+		end: B?.end ?? null,
+		source: B
+	}), { start: H, end: U } = ve;
+	ve.source !== B && (H = B?.start ?? null, U = B?.end ?? null, V({
 		start: H,
 		end: U,
-		source: R
+		source: B
 	}));
-	let { attachTrigger: W, triggerAttributes: me, closeOnChoice: he, id: G, attachField: K, panel: q } = oe({
+	let { attachTrigger: W, triggerAttributes: G, triggerElement: ye, closeOnChoice: K, id: q, attachField: J, panel: Y } = ae({
 		ref: n,
-		open: ie,
-		defaultOpen: O,
-		onOpenChange: se,
+		open: D,
+		defaultOpen: re,
+		onOpenChange: j,
 		side: le,
 		align: ue,
-		label: typeof b == "string" ? b : P
-	}), J = R ? a(R.start, R.end, { locale: pe }) : "", Y = H !== null && U !== null && u(H, U) > 0, X = (e, t, n, r) => {
-		let i = e && t && u(e, t) <= 0 ? {
+		matchWidth: de,
+		label: typeof x == "string" ? x : I
+	}), X = B ? a(B.start, B.end, { locale: ge }) : "", Z = H !== null && U !== null && d(H, U) > 0, Q = (e, t, n, r) => {
+		let i = e && t && d(e, t) <= 0 ? {
 			start: e,
 			end: t
 		} : null;
@@ -404,146 +566,173 @@ function A(e, n) {
 			start: e,
 			end: t,
 			source: i
-		}), z(i, {
+		}), _e(i, {
 			reason: n,
 			event: r
 		});
-	}, Z = he, Q = {
+	}, be = K, xe = {
 		locale: s,
 		min: c,
 		max: l,
-		isDateUnavailable: d,
+		isDateUnavailable: u,
 		disabled: f,
 		readOnly: p,
 		required: m,
 		component: "datePicker.part",
 		px: 0,
 		py: 0,
-		tabIndex: F
-	};
-	return /* @__PURE__ */ D(g, { children: [
-		b !== void 0 && /* @__PURE__ */ E(t, {
-			component: "dateField.label",
-			display: "block",
-			mb: 1.5,
-			fontSize: 14,
-			id: `${G}-label`,
-			children: b
-		}),
-		/* @__PURE__ */ D(t, {
-			ref: K,
-			component: "dateField",
-			display: "inline-flex",
-			ai: "center",
-			gap: 2,
-			px: 3,
-			py: 2,
-			...L,
-			variant: [L.variant, {
-				disabled: f,
-				invalid: _ ?? Y
-			}],
-			props: {
-				role: "group",
-				"aria-labelledby": [b === void 0 ? void 0 : `${G}-label`, S].filter(Boolean).join(" ") || void 0,
-				"aria-invalid": (_ ?? Y) || void 0,
-				"aria-describedby": C,
-				...fe
-			},
-			children: [
-				/* @__PURE__ */ E(x, {
-					...Q,
-					value: H,
-					onValueChange: (e, t) => X(e, U, t.reason, t.event),
-					name: v,
-					props: { "aria-label": w },
-					invalid: _ ?? Y
-				}),
-				/* @__PURE__ */ E(t, {
-					component: "dateField.literal",
-					props: { "aria-hidden": !0 },
-					children: "–"
-				}),
-				/* @__PURE__ */ E(x, {
-					...Q,
-					value: U,
-					onValueChange: (e, t) => X(H, e, t.reason, t.event),
-					name: y,
-					props: { "aria-label": ne },
-					invalid: _ ?? Y
-				}),
-				/* @__PURE__ */ D(t, {
+		tabIndex: L
+	}, Se = pe && B && !f && !p && /* @__PURE__ */ k(t, {
+		tag: "button",
+		component: "datePicker.clear",
+		display: "inline-flex",
+		ai: "center",
+		jc: "center",
+		width: 6,
+		height: 6,
+		borderRadius: 999,
+		position: "relative",
+		zIndex: 1,
+		props: {
+			type: "button",
+			"aria-label": me,
+			tabIndex: L,
+			onClick: (e) => Q(null, null, "clear", e)
+		},
+		children: /* @__PURE__ */ k(ie, {})
+	}), Ce = B !== null && (c != null && d(B.start, c) < 0 || l != null && d(B.end, l) > 0), we = F ? /* @__PURE__ */ k(ce, {
+		frame: {
+			...z,
+			props: he
+		},
+		attachField: J,
+		attachTrigger: p ? void 0 : W,
+		triggerAttributes: p ? void 0 : G,
+		triggerElement: ye,
+		id: q,
+		label: x,
+		labelledBy: S,
+		describedBy: w,
+		text: X,
+		placeholder: I,
+		icon: /* @__PURE__ */ k(ne, {}),
+		clear: Se,
+		disabled: f,
+		invalid: h ?? Ce,
+		required: m,
+		tabIndex: L,
+		inputs: [{
+			name: v,
+			value: B?.start ?? ""
+		}, {
+			name: y,
+			value: B?.end ?? ""
+		}],
+		onReset: (e) => Q(i?.start ?? null, i?.end ?? null, "reset", e)
+	}) : /* @__PURE__ */ A(te, { children: [x !== void 0 && /* @__PURE__ */ k(t, {
+		component: "dateField.label",
+		display: "block",
+		mb: 1.5,
+		fontSize: 14,
+		id: `${q}-label`,
+		children: x
+	}), /* @__PURE__ */ A(t, {
+		ref: J,
+		component: "dateField",
+		display: "inline-flex",
+		ai: "center",
+		gap: 2,
+		px: 3,
+		py: 2,
+		...z,
+		variant: [z.variant, {
+			disabled: f,
+			invalid: h ?? Z
+		}],
+		props: {
+			role: "group",
+			"aria-labelledby": [x === void 0 ? void 0 : `${q}-label`, S].filter(Boolean).join(" ") || void 0,
+			"aria-invalid": (h ?? Z) || void 0,
+			"aria-describedby": w,
+			...he
+		},
+		children: [
+			/* @__PURE__ */ k(C, {
+				...xe,
+				value: H,
+				onValueChange: (e, t) => Q(e, U, t.reason, t.event),
+				name: v,
+				props: { "aria-label": T },
+				invalid: h ?? Z
+			}),
+			/* @__PURE__ */ k(t, {
+				component: "dateField.literal",
+				props: { "aria-hidden": !0 },
+				children: "–"
+			}),
+			/* @__PURE__ */ k(C, {
+				...xe,
+				value: U,
+				onValueChange: (e, t) => Q(H, e, t.reason, t.event),
+				name: y,
+				props: { "aria-label": E },
+				invalid: h ?? Z
+			}),
+			/* @__PURE__ */ A(t, {
+				display: "inline-flex",
+				ai: "center",
+				gap: 2,
+				ms: "auto",
+				children: [Se, /* @__PURE__ */ k(t, {
+					tag: "button",
+					ref: W,
+					component: "datePicker.trigger",
 					display: "inline-flex",
 					ai: "center",
-					gap: 2,
-					ms: "auto",
-					children: [N && R && !f && !p && /* @__PURE__ */ E(t, {
-						tag: "button",
-						component: "datePicker.clear",
-						display: "inline-flex",
-						ai: "center",
-						jc: "center",
-						width: 6,
-						height: 6,
-						borderRadius: 999,
-						props: {
-							type: "button",
-							"aria-label": de,
-							tabIndex: F,
-							onClick: (e) => X(null, null, "clear", e)
-						},
-						children: /* @__PURE__ */ E(ae, {})
-					}), /* @__PURE__ */ E(t, {
-						tag: "button",
-						ref: W,
-						component: "datePicker.trigger",
-						display: "inline-flex",
-						ai: "center",
-						jc: "center",
-						width: 7,
-						height: 7,
-						me: -1.5,
-						borderRadius: 1.5,
-						disabled: f || p,
-						props: {
-							type: "button",
-							"aria-label": J ? `${P}, ${J}` : P,
-							tabIndex: F,
-							...me
-						},
-						children: /* @__PURE__ */ E(re, {})
-					})]
-				})
-			]
-		}),
-		q(/* @__PURE__ */ D(t, {
-			display: "flex",
-			gap: 3,
-			ai: "stretch",
-			children: [I && I.length > 0 && /* @__PURE__ */ E(ce, {
-				presets: I,
-				isSelected: (e) => R !== null && e.start === R.start && e.end === R.end,
-				onSelect: (e, t) => {
-					X(e.start, e.end, "preset", t), k && Z(t);
-				}
-			}), /* @__PURE__ */ E(te, {
-				mode: "range",
-				months: M,
-				value: R,
-				defaultFocusedDate: H ?? void 0,
-				onValueChange: (e, t) => {
-					X(e?.start ?? null, e?.end ?? null, "select", t.event), k && e && t.event && Z(t.event);
-				},
-				min: c,
-				max: l,
-				isDateUnavailable: d,
-				locale: s,
-				firstDayOfWeek: A,
-				weekNumbers: j
-			})]
-		}))
-	] });
+					jc: "center",
+					width: 7,
+					height: 7,
+					me: -1.5,
+					borderRadius: 1.5,
+					disabled: f || p,
+					props: {
+						type: "button",
+						"aria-label": X ? `${I}, ${X}` : I,
+						tabIndex: L,
+						...G
+					},
+					children: /* @__PURE__ */ k(ne, {})
+				})]
+			})
+		]
+	})] });
+	return /* @__PURE__ */ A(_, { children: [we, Y(/* @__PURE__ */ A(t, {
+		display: "flex",
+		gap: 3,
+		ai: "stretch",
+		children: [R && R.length > 0 && /* @__PURE__ */ k(se, {
+			presets: R,
+			isSelected: (e) => B !== null && e.start === B.start && e.end === B.end,
+			onSelect: (e, t) => {
+				Q(e.start, e.end, "preset", t), oe && be(t);
+			}
+		}), /* @__PURE__ */ k(ee, {
+			mode: "range",
+			months: P,
+			value: B,
+			defaultFocusedDate: H ?? void 0,
+			onValueChange: (e, t) => {
+				Q(e?.start ?? null, e?.end ?? null, "select", t.event), oe && e && t.event && be(t.event);
+			},
+			min: c,
+			max: l,
+			isDateUnavailable: u,
+			locale: s,
+			firstDayOfWeek: M,
+			weekNumbers: N
+		})]
+	}))] });
 }
-var j = e(k, "DatePicker"), M = e(A, "DateRangePicker");
+var P = e(M, "DatePicker"), le = e(N, "DateRangePicker");
 //#endregion
-export { M as DateRangePicker, j as default };
+export { le as DateRangePicker, P as default };