@vjdesigns/vjdesigns-ui 2.4.0 → 2.5.0

package/dist/components/forms/DatePicker/Calendar.mjs

@@ -1,14 +1,15 @@
+"use client";
 import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
-import { useLocale as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
 import { assignRef as n } from "../../../utils/refs.mjs";
-import { cx as r } from "../../../utils/cx.mjs";
-import { IconButton as i } from "../../primitives/Button/Button.mjs";
-import { ChevronLeftIcon as a, ChevronRightIcon as o } from "../../primitives/Icon/icons.mjs";
-import { addDays as s, addMonths as c, addMonthsToMonth as l, clampDate as u, endOfWeek as ee, firstOfMonth as d, formatFullDate as te, formatMonthYear as f, getFormatter as p, getLocaleWeekStart as ne, lastOfMonth as re, makeDate as ie, monthGrid as ae, parseISODate as oe, startOfWeek as se, toISOMonth as m, todayISO as ce } from "./dateUtils.mjs";
+import { IconButton as r } from "../../primitives/Button/Button.mjs";
+import { ChevronLeftIcon as i, ChevronRightIcon as a } from "../../primitives/Icon/icons.mjs";
+import { addDays as o, addMonths as s, addMonthsToMonth as c, clampDate as l, endOfWeek as u, firstOfMonth as d, formatFullDate as ee, formatMonthYear as f, getFormatter as p, getLocaleWeekStart as te, lastOfMonth as ne, makeDate as re, monthGrid as ie, parseISODate as ae, startOfWeek as oe, toISOMonth as m, todayISO as se } from "./dateUtils.mjs";
 import h from "./Calendar.module.css.mjs";
+import { useLocale as ce } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
 import { useCallback as g, useEffect as le, useId as ue, useMemo as _, useRef as de, useState as v } from "react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
-//#region src/components/forms/DatePicker/Calendar.tsx
+// src/components/forms/DatePicker/Calendar.tsx
 var fe = {
 	sm: h.sm,
 	md: h.md,
@@ -25,7 +26,7 @@ function he(e) {
 	return e?.start ? e.end ? e.start <= e.end ? [e.start, e.end] : [e.end, e.start] : [e.start, null] : [null, null];
 }
 var ge = (ge) => {
-	let { messages: _e, locale: ve } = t(), { mode: ye = "single", value: be, defaultValue: xe, onValueChange: Se, min: x, max: S, isDateDisabled: C, locale: w = ve, weekStartsOn: Ce, month: we, defaultMonth: Te, onMonthChange: Ee, numberOfMonths: T = 1, showOutsideDays: De = T === 1, size: E = "md", today: Oe, headingLevel: ke = 2, previousMonthLabel: Ae = _e.datePicker.previousMonth, nextMonthLabel: je = _e.datePicker.nextMonth, className: Me, ref: D, ...Ne } = ge, O = ye === "range", k = Oe ?? ce(), Pe = _(() => ne(w), [w]), A = Ce ?? Pe, [Fe, j] = e({
+	let { messages: _e, locale: ve } = ce(), { mode: ye = "single", value: be, defaultValue: xe, onValueChange: Se, min: x, max: S, isDateDisabled: C, locale: w = ve, weekStartsOn: Ce, month: we, defaultMonth: Te, onMonthChange: Ee, numberOfMonths: T = 1, showOutsideDays: De = T === 1, size: E = "md", today: Oe, headingLevel: ke = 2, previousMonthLabel: Ae = _e.datePicker.previousMonth, nextMonthLabel: je = _e.datePicker.nextMonth, className: Me, ref: D, ...Ne } = ge, O = ye === "range", k = Oe ?? se(), Pe = _(() => te(w), [w]), A = Ce ?? Pe, [Fe, j] = e({
 		value: be,
 		defaultValue: xe ?? null,
 		onChange: Se
@@ -33,7 +34,7 @@ var ge = (ge) => {
 		value: we,
 		defaultValue: Te ?? m(M ?? P ?? k),
 		onChange: Ee
-	}), L = Ie.slice(0, 7), R = _(() => Array.from({ length: T }, (e, t) => l(L, t)), [L, T]), z = d(R[0]), B = re(R[R.length - 1]), V = (e) => !!e && e >= z && e <= B, H = g((e) => x && e < x || S && e > S ? !0 : C ? C(e, oe(e)) : !1, [
+	}), L = Ie.slice(0, 7), R = _(() => Array.from({ length: T }, (e, t) => c(L, t)), [L, T]), z = d(R[0]), B = ne(R[R.length - 1]), V = (e) => !!e && e >= z && e <= B, H = g((e) => x && e < x || S && e > S ? !0 : C ? C(e, ae(e)) : !1, [
 		x,
 		S,
 		C
@@ -47,7 +48,7 @@ var ge = (ge) => {
 		].filter(V), t = e.find((e) => !H(e));
 		if (t) return t;
 		if (e[0]) return e[0];
-		for (let e = z; e <= B; e = s(e, 1)) if (!H(e)) return e;
+		for (let e = z; e <= B; e = o(e, 1)) if (!H(e)) return e;
 		return z;
 	}, [
 		U,
@@ -67,53 +68,47 @@ var ge = (ge) => {
 		e && (J.current = !1, e.focus({ preventScroll: !1 }));
 	});
 	let Ve = (e) => {
-		let t = u(e, x, S);
-		W(t), t < z ? I(m(t)) : t > B && I(l(m(t), -(T - 1))), t !== K && (J.current = !0);
+		let t = l(e, x, S);
+		W(t), t < z ? I(m(t)) : t > B && I(c(m(t), -(T - 1))), t !== K && (J.current = !0);
 	}, Y = (e) => {
-		if (!H(e)) {
-			if (V(e) ? W(e) : Ve(e), !O) {
-				j(e);
-				return;
-			}
-			!N.start || N.end ? j({
-				start: e,
-				end: null
-			}) : e < N.start ? j({
-				start: e,
-				end: N.start
-			}) : j({
-				start: N.start,
-				end: e
-			}), G(null);
-		}
+		H(e) || (V(e) ? W(e) : Ve(e), O ? (!N.start || N.end ? j({
+			start: e,
+			end: null
+		}) : e < N.start ? j({
+			start: e,
+			end: N.start
+		}) : j({
+			start: N.start,
+			end: e
+		}), G(null)) : j(e));
 	}, He = (e) => {
 		if (!e.target.dataset.date) return;
 		Le !== null && G(null);
 		let t = q.current ? getComputedStyle(q.current).direction === "rtl" : !1, n = K, r = null;
 		switch (e.key) {
 			case "ArrowLeft":
-				r = s(n, t ? 1 : -1);
+				r = o(n, t ? 1 : -1);
 				break;
 			case "ArrowRight":
-				r = s(n, t ? -1 : 1);
+				r = o(n, t ? -1 : 1);
 				break;
 			case "ArrowUp":
-				r = s(n, -7);
+				r = o(n, -7);
 				break;
 			case "ArrowDown":
-				r = s(n, 7);
+				r = o(n, 7);
 				break;
 			case "Home":
-				r = se(n, A);
+				r = oe(n, A);
 				break;
 			case "End":
-				r = ee(n, A);
+				r = u(n, A);
 				break;
 			case "PageUp":
-				r = c(n, e.shiftKey ? -12 : -1);
+				r = s(n, e.shiftKey ? -12 : -1);
 				break;
 			case "PageDown":
-				r = c(n, e.shiftKey ? 12 : 1);
+				r = s(n, e.shiftKey ? 12 : 1);
 				break;
 			case "Enter":
 			case " ":
@@ -130,51 +125,51 @@ var ge = (ge) => {
 	}, Ge = ue(), Ke = _(() => {
 		let e = p(w, { weekday: "short" }), t = p(w, { weekday: "long" });
 		return Array.from({ length: 7 }, (n, r) => {
-			let i = (A + r) % 7, a = ie(2023, 0, 1 + i);
+			let i = (A + r) % 7, a = re(2023, 0, 1 + i);
 			return {
 				key: i,
 				short: e.format(a),
 				long: t.format(a)
 			};
 		});
-	}, [w, A]), qe = p(w, { day: "numeric" }), Je = !!x && re(l(L, -1)) < x, Ye = !!S && d(l(R[R.length - 1], 1)) > S, Xe = `h${ke}`, Ze = pe[E], $ = (e) => /* @__PURE__ */ y(i, {
+	}, [w, A]), qe = p(w, { day: "numeric" }), Je = !!x && ne(c(L, -1)) < x, Ye = !!S && d(c(R[R.length - 1], 1)) > S, Xe = `h${ke}`, Ze = pe[E], $ = (e) => /* @__PURE__ */ y(r, {
 		variant: "ghost",
 		tone: "neutral",
 		size: Ze,
 		"aria-label": e === "previous" ? Ae : je,
 		disabled: e === "previous" ? Je : Ye,
 		className: h.navButton,
-		onClick: () => I(l(L, e === "previous" ? -1 : 1)),
-		children: y(e === "previous" ? a : o, { className: h.flipInRtl })
+		onClick: () => I(c(L, e === "previous" ? -1 : 1)),
+		children: y(e === "previous" ? i : a, { className: h.flipInRtl })
 	});
 	return /* @__PURE__ */ y("div", {
 		role: "group",
 		...Ne,
 		ref: Be,
-		className: r(h.root, fe[E], Me),
+		className: t(h.root, fe[E], Me),
 		"data-size": E,
 		"data-mode": ye,
 		children: /* @__PURE__ */ y("div", {
 			className: h.months,
-			children: R.map((e, t) => {
-				let n = `${Ge}-heading-${t}`;
+			children: R.map((e, n) => {
+				let r = `${Ge}-heading-${n}`;
 				return /* @__PURE__ */ b("div", {
 					className: h.month,
 					children: [/* @__PURE__ */ b("div", {
 						className: h.header,
 						children: [
-							t === 0 ? $("previous") : /* @__PURE__ */ y("span", { className: h.navSpacer }),
+							n === 0 ? $("previous") : /* @__PURE__ */ y("span", { className: h.navSpacer }),
 							/* @__PURE__ */ y(Xe, {
-								id: n,
+								id: r,
 								className: h.heading,
 								"aria-live": "polite",
 								children: f(e, w)
 							}),
-							t === R.length - 1 ? $("next") : /* @__PURE__ */ y("span", { className: h.navSpacer })
+							n === R.length - 1 ? $("next") : /* @__PURE__ */ y("span", { className: h.navSpacer })
 						]
 					}), /* @__PURE__ */ b("table", {
 						role: "grid",
-						"aria-labelledby": n,
+						"aria-labelledby": r,
 						"aria-multiselectable": O ? !0 : void 0,
 						className: h.grid,
 						onKeyDown: He,
@@ -186,43 +181,42 @@ var ge = (ge) => {
 							abbr: e.long,
 							className: h.weekday,
 							children: e.short
-						}, e.key)) }) }), /* @__PURE__ */ y("tbody", { children: ae(e, A).map((t) => /* @__PURE__ */ y("tr", { children: t.map((t) => {
-							let n = m(t) !== e;
-							if (n && !De) return /* @__PURE__ */ y("td", {
+						}, e.key)) }) }), /* @__PURE__ */ y("tbody", { children: ie(e, A).map((n) => /* @__PURE__ */ y("tr", { children: n.map((n) => {
+							let r = m(n) !== e;
+							if (r && !De) return /* @__PURE__ */ y("td", {
 								role: "gridcell",
 								className: h.cell
-							}, t);
-							let i = H(t), a = !n && t === K, o = t === k, s = !O && t === M, c = O && t === P, l = O && t === F, u = O && !!P && !!F && t > P && t < F, ee = s || c || l || u, d = n ? null : We(t), f = d?.kind === "preview" && t === X;
+							}, n);
+							let i = H(n), a = !r && n === K, o = n === k, s = !O && n === M, c = O && n === P, l = O && n === F, u = O && !!P && !!F && n > P && n < F, d = s || c || l || u, f = r ? null : We(n), p = f?.kind === "preview" && n === X;
 							return /* @__PURE__ */ y("td", {
 								role: "gridcell",
-								"data-date": t,
+								"data-date": n,
 								"data-active": a ? "" : void 0,
-								"data-outside": n ? "" : void 0,
-								"data-band": d?.shape,
-								"data-band-kind": d?.kind,
+								"data-outside": r ? "" : void 0,
+								"data-band": f?.shape,
+								"data-band-kind": f?.kind,
 								tabIndex: a ? 0 : -1,
-								"aria-label": te(t, w),
-								"aria-selected": n ? void 0 : ee,
+								"aria-label": ee(n, w),
+								"aria-selected": r ? void 0 : d,
 								"aria-current": o ? "date" : void 0,
 								"aria-disabled": i ? !0 : void 0,
-								className: r(h.cell, n && h.outside, o && h.today, i && h.unavailable, (s || c || l) && h.selected, u && h.inRange, f && h.previewEnd),
-								onClick: () => Y(t),
+								className: t(h.cell, r && h.outside, o && h.today, i && h.unavailable, (s || c || l) && h.selected, u && h.inRange, p && h.previewEnd),
+								onClick: () => Y(n),
 								onFocus: () => {
-									n || W(t);
+									r || W(n);
 								},
-								onPointerEnter: () => G(t),
+								onPointerEnter: () => G(n),
 								children: /* @__PURE__ */ y("span", {
 									className: h.day,
 									"aria-hidden": "true",
-									children: qe.format(oe(t))
+									children: qe.format(ae(n))
 								})
-							}, t);
-						}) }, t[0])) })]
+							}, n);
+						}) }, n[0])) })]
 					})]
-				}, t);
+				}, n);
 			})
 		})
 	});
 };
-//#endregion
 export { ge as Calendar };

package/dist/components/forms/DatePicker/Calendar.module.css.mjs

@@ -1,4 +1,4 @@
-//#region src/components/forms/DatePicker/Calendar.module.css
+// src/components/forms/DatePicker/Calendar.module.css
 var e = "_root_19q09_15", t = "_sm_19q09_41", n = "_md_19q09_59", r = "_lg_19q09_71", i = "_months_19q09_85", a = "_month_19q09_85", o = "_header_19q09_109", s = "_heading_19q09_123", c = "_navSpacer_19q09_153", l = "_flipInRtl_19q09_163", u = "_grid_19q09_173", d = "_weekday_19q09_185", f = "_cell_19q09_209", p = "_day_19q09_237", m = "_unavailable_19q09_285", h = "_selected_19q09_285", g = "_outside_19q09_313", _ = "_today_19q09_325", v = "_inRange_19q09_469", y = "_previewEnd_19q09_497", b = {
 	root: e,
 	sm: t,
@@ -21,5 +21,4 @@ var e = "_root_19q09_15", t = "_sm_19q09_41", n = "_md_19q09_59", r = "_lg_19q09
 	inRange: v,
 	previewEnd: y
 };
-//#endregion
 export { f as cell, p as day, b as default, l as flipInRtl, u as grid, o as header, s as heading, v as inRange, r as lg, n as md, a as month, i as months, c as navSpacer, g as outside, y as previewEnd, e as root, h as selected, t as sm, _ as today, m as unavailable, d as weekday };

package/dist/components/forms/DatePicker/DatePicker.cjs.js

@@ -1 +1 @@
-const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),i=require("../../primitives/Button/Button.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("../Field/FieldContext.cjs.js"),s=require("../../overlays/Popover/Popover.cjs.js"),ee=require("../Input/Input.cjs.js"),c=require("./dateUtils.cjs.js"),te=require("./Calendar.cjs.js"),l=require("./DatePicker.module.css.cjs.js");let u=require("react"),d=require("react/jsx-runtime");function ne(e,t,n,r,i){switch(t.reason){case`unparseable`:return e.unparseable(t.pattern);case`out-of-range`:return r&&i?e.between(n(r),n(i)):r?e.onOrAfter(n(r)):e.onOrBefore(n(i));case`unavailable`:return e.unavailable(t.date?n(t.date):t.text)}}var f=({value:f,defaultValue:re,onValueChange:ie,min:p,max:m,isDateDisabled:h,locale:ae,weekStartsOn:oe,placement:se=`bottom-start`,size:g,name:_,clearable:ce=!1,open:le,defaultOpen:ue=!1,onOpenChange:de,onInvalidInput:fe,invalidMessage:v,chooseDateLabel:pe,changeDateLabel:me,dialogLabel:he,formatDescription:ge,today:_e,numberOfMonths:ve=1,fieldClassName:ye,className:be,style:xe,invalid:y,required:b,disabled:x,readOnly:S,placeholder:Se,fullWidth:C=!0,endElement:Ce,onChange:we,onBlur:Te,onFocus:w,onKeyDown:T,"aria-describedby":E,...D})=>{let{messages:O,locale:Ee}=t.useLocale(),k=ae??Ee,De=pe??O.datePicker.chooseDate,Oe=me??O.datePicker.changeDate,ke=he??O.datePicker.dialog,Ae=ge??O.datePicker.format,A=o.useFieldControl({disabled:x,readOnly:S,size:g,invalid:y,required:b}),j=A.size??`md`,M=!A.disabled&&!A.readOnly,N=(0,u.useMemo)(()=>c.getDateFormatInfo(k),[k]),{format:P}=N,F=c.localizeDatePattern(N.pattern,O.datePicker.pattern),[I,je]=e.useControllableState({value:f,defaultValue:re??null,onChange:ie}),[L,R]=(0,u.useState)(()=>I?P(I):``),[z,B]=(0,u.useState)(null),V=(0,u.useRef)(I);(0,u.useEffect)(()=>{V.current!==I&&(V.current=I,R(I?P(I):``),B(null))},[I,P]);let H=(0,u.useRef)(P);(0,u.useEffect)(()=>{if(H.current===P)return;let e=H.current;H.current=P,R(t=>I&&t===e(I)?P(I):t)},[P,I]);let U=(e,t)=>{V.current=e,R(t),je(e)},Me=e=>p&&e<p||m&&e>m?`out-of-range`:h?.(e,c.parseISODate(e))?`unavailable`:null,W=()=>{let e=L.trim();if(!e){B(null),U(null,``);return}let t=c.parseDateText(e,k),n=t?Me(t):`unparseable`;if(n){let r={text:e,reason:n,date:t??void 0,pattern:F};B(r),U(null,L),fe?.(r);return}B(null),U(t,P(t))},[Ne,G]=e.useControllableState({value:le,defaultValue:ue,onChange:de}),K=Ne&&M,q=(0,u.useRef)(null),J=()=>q.current?.querySelector(`[data-active]`)??null,Y=(0,u.useRef)(null);(0,u.useEffect)(()=>{if(K||!Y.current)return;let e=Y.current;Y.current=null;let t=document.activeElement,n=e.closest(`.${l.default.anchor}`);e.isConnected&&(!t||t===document.body||n?.contains(t))&&e.focus()},[K]);let Pe=e=>{e&&(B(null),U(e,P(e)),G(!1))},Fe=e=>{R(e.target.value),we?.(e)},Ie=e=>{Te?.(e),!A.readOnly&&!A.disabled&&W()},Le=e=>{w?.(e)},Re=e=>{T?.(e),!e.defaultPrevented&&M&&(e.key===`Enter`?W():e.key===`ArrowDown`&&e.altKey&&(e.preventDefault(),W(),Y.current=e.currentTarget,G(!0)))},X=(0,u.useId)(),Z=`${X}-format`,Q=`${X}-error`,$=z&&v!==null?typeof v==`function`?v(z):v??ne(O.datePicker.invalid,z,P,p,m):null,ze=[E,Z,$==null?void 0:Q].filter(Boolean).join(` `)||void 0,Be=I?Oe(c.formatFullDate(I,k)):De;return(0,d.jsxs)(`div`,{className:n.cx(l.default.root,C&&l.default.fullWidth,be),style:xe,"data-size":j,children:[(0,d.jsxs)(s.Popover,{open:K,onOpenChange:G,placement:se,modal:!0,closeOnAnchorFocus:!0,children:[(0,d.jsx)(s.Popover.Anchor,{asChild:!1,className:l.default.anchor,children:(0,d.jsx)(ee.Input,{...D,type:`text`,autoComplete:`off`,size:g,invalid:y??(z?!0:void 0),required:b,disabled:x,readOnly:S,fullWidth:C,placeholder:Se??F,className:ye,"aria-describedby":ze,value:L,onChange:Fe,onBlur:Ie,onFocus:Le,onKeyDown:Re,clearable:ce,onClear:()=>{B(null),U(null,``)},endElement:(0,d.jsxs)(d.Fragment,{children:[Ce,!A.readOnly&&(0,d.jsx)(s.Popover.Trigger,{asChild:!0,children:(0,d.jsx)(i.IconButton,{size:j===`sm`?`xs`:`sm`,variant:`ghost`,tone:`neutral`,"aria-label":Be,disabled:A.disabled,children:(0,d.jsx)(a.CalendarIcon,{})})})]})})}),(0,d.jsx)(s.Popover.Content,{"aria-label":ke,size:`sm`,maxWidth:`none`,initialFocus:J,className:l.default.popup,children:(0,d.jsx)(te.Calendar,{ref:q,value:I,onValueChange:Pe,min:p,max:m,isDateDisabled:h,locale:k,weekStartsOn:oe,size:j,today:_e,numberOfMonths:ve})})]}),(0,d.jsx)(r.VisuallyHidden,{id:Z,children:Ae(F)}),_!==void 0&&(0,d.jsx)(`input`,{type:`hidden`,name:_,value:I??``,disabled:A.disabled}),(0,d.jsx)(`div`,{"aria-live":`polite`,className:l.default.errorRegion,children:$!=null&&(0,d.jsxs)(`p`,{id:Q,className:l.default.error,children:[(0,d.jsx)(a.ErrorIcon,{size:`sm`,className:l.default.errorIcon}),(0,d.jsx)(`span`,{children:$})]})})]})};exports.DatePicker=f;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../overlays/Popover/Popover.cjs.js"),r=require("../../primitives/Button/Button.cjs.js"),i=require("../../primitives/Icon/icons.cjs.js"),ee=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),te=require("../Field/FieldContext.cjs.js"),a=require("../Input/Input.cjs.js"),ne=require("./Calendar.cjs.js"),o=require("./dateUtils.cjs.js"),s=require("./DatePicker.module.css.cjs.js"),re=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js");let c=require("react"),l=require("react/jsx-runtime");function ie(e,t,n,r,i){switch(t.reason){case`unparseable`:return e.unparseable(t.pattern);case`out-of-range`:return r&&i?e.between(n(r),n(i)):r?e.onOrAfter(n(r)):e.onOrBefore(n(i));case`unavailable`:return e.unavailable(t.date?n(t.date):t.text)}}var u=({value:u,defaultValue:ae,onValueChange:oe,min:d,max:f,isDateDisabled:p,locale:se,weekStartsOn:ce,placement:le=`bottom-start`,size:m,name:h,clearable:ue=!1,open:de,defaultOpen:fe=!1,onOpenChange:pe,onInvalidInput:me,invalidMessage:g,chooseDateLabel:he,changeDateLabel:ge,dialogLabel:_e,formatDescription:ve,today:ye,numberOfMonths:be=1,fieldClassName:xe,className:Se,style:Ce,invalid:_,required:v,disabled:y,readOnly:b,placeholder:we,fullWidth:x=!0,endElement:Te,onChange:S,onBlur:C,onFocus:w,onKeyDown:T,"aria-describedby":E,...D})=>{let{messages:O,locale:Ee}=re.useLocale(),k=se??Ee,De=he??O.datePicker.chooseDate,Oe=ge??O.datePicker.changeDate,ke=_e??O.datePicker.dialog,A=ve??O.datePicker.format,j=te.useFieldControl({disabled:y,readOnly:b,size:m,invalid:_,required:v}),M=j.size??`md`,N=!j.disabled&&!j.readOnly,P=(0,c.useMemo)(()=>o.getDateFormatInfo(k),[k]),{format:F}=P,I=o.localizeDatePattern(P.pattern,O.datePicker.pattern),[L,Ae]=e.useControllableState({value:u,defaultValue:ae??null,onChange:oe}),[R,z]=(0,c.useState)(()=>L?F(L):``),[B,V]=(0,c.useState)(null),H=(0,c.useRef)(L);(0,c.useEffect)(()=>{H.current!==L&&(H.current=L,z(L?F(L):``),V(null))},[L,F]);let U=(0,c.useRef)(F);(0,c.useEffect)(()=>{if(U.current===F)return;let e=U.current;U.current=F,z(t=>L&&t===e(L)?F(L):t)},[F,L]);let W=(e,t)=>{H.current=e,z(t),Ae(e)},je=e=>d&&e<d||f&&e>f?`out-of-range`:p?.(e,o.parseISODate(e))?`unavailable`:null,G=()=>{let e=R.trim();if(!e){V(null),W(null,``);return}let t=o.parseDateText(e,k),n=t?je(t):`unparseable`;if(n){let r={text:e,reason:n,date:t??void 0,pattern:I};V(r),W(null,R),me?.(r)}else V(null),W(t,F(t))},[Me,K]=e.useControllableState({value:de,defaultValue:fe,onChange:pe}),q=Me&&N,J=(0,c.useRef)(null),Ne=()=>J.current?.querySelector(`[data-active]`)??null,Y=(0,c.useRef)(null);(0,c.useEffect)(()=>{if(q||!Y.current)return;let e=Y.current;Y.current=null;let t=document.activeElement,n=e.closest(`.${s.default.anchor}`);e.isConnected&&(!t||t===document.body||n?.contains(t))&&e.focus()},[q]);let Pe=e=>{e&&(V(null),W(e,F(e)),K(!1))},Fe=e=>{z(e.target.value),S?.(e)},Ie=e=>{C?.(e),!j.readOnly&&!j.disabled&&G()},Le=e=>{w?.(e)},Re=e=>{T?.(e),!e.defaultPrevented&&N&&(e.key===`Enter`?G():e.key===`ArrowDown`&&e.altKey&&(e.preventDefault(),G(),Y.current=e.currentTarget,K(!0)))},X=(0,c.useId)(),Z=`${X}-format`,Q=`${X}-error`,$=B&&g!==null?typeof g==`function`?g(B):g??ie(O.datePicker.invalid,B,F,d,f):null,ze=[E,Z,$==null?void 0:Q].filter(Boolean).join(` `)||void 0,Be=L?Oe(o.formatFullDate(L,k)):De;return(0,l.jsxs)(`div`,{className:t.cx(s.default.root,x&&s.default.fullWidth,Se),style:Ce,"data-size":M,children:[(0,l.jsxs)(n.Popover,{open:q,onOpenChange:K,placement:le,modal:!0,closeOnAnchorFocus:!0,children:[(0,l.jsx)(n.Popover.Anchor,{asChild:!1,className:s.default.anchor,children:(0,l.jsx)(a.Input,{...D,type:`text`,autoComplete:`off`,size:m,invalid:_??(B?!0:void 0),required:v,disabled:y,readOnly:b,fullWidth:x,placeholder:we??I,className:xe,"aria-describedby":ze,value:R,onChange:Fe,onBlur:Ie,onFocus:Le,onKeyDown:Re,clearable:ue,onClear:()=>{V(null),W(null,``)},endElement:(0,l.jsxs)(l.Fragment,{children:[Te,!j.readOnly&&(0,l.jsx)(n.Popover.Trigger,{asChild:!0,children:(0,l.jsx)(r.IconButton,{size:M===`sm`?`xs`:`sm`,variant:`ghost`,tone:`neutral`,"aria-label":Be,disabled:j.disabled,children:(0,l.jsx)(i.CalendarIcon,{})})})]})})}),(0,l.jsx)(n.Popover.Content,{"aria-label":ke,size:`sm`,maxWidth:`none`,initialFocus:Ne,className:s.default.popup,children:(0,l.jsx)(ne.Calendar,{ref:J,value:L,onValueChange:Pe,min:d,max:f,isDateDisabled:p,locale:k,weekStartsOn:ce,size:M,today:ye,numberOfMonths:be})})]}),(0,l.jsx)(ee.VisuallyHidden,{id:Z,children:A(I)}),h!==void 0&&(0,l.jsx)(`input`,{type:`hidden`,name:h,value:L??``,disabled:j.disabled}),(0,l.jsx)(`div`,{"aria-live":`polite`,className:s.default.errorRegion,children:$!=null&&(0,l.jsxs)(`p`,{id:Q,className:s.default.error,children:[(0,l.jsx)(i.ErrorIcon,{size:`sm`,className:s.default.errorIcon}),(0,l.jsx)(`span`,{children:$})]})})]})};exports.DatePicker=u;

package/dist/components/forms/DatePicker/DatePicker.mjs

@@ -1,55 +1,56 @@
+"use client";
 import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
-import { useLocale as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { cx as n } from "../../../utils/cx.mjs";
-import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
-import { IconButton as i } from "../../primitives/Button/Button.mjs";
-import { CalendarIcon as a, ErrorIcon as ee } from "../../primitives/Icon/icons.mjs";
-import { useFieldControl as te } from "../Field/FieldContext.mjs";
-import { Popover as o } from "../../overlays/Popover/Popover.mjs";
-import { Input as s } from "../Input/Input.mjs";
-import { formatFullDate as ne, getDateFormatInfo as re, localizeDatePattern as ie, parseDateText as ae, parseISODate as oe } from "./dateUtils.mjs";
-import { Calendar as se } from "./Calendar.mjs";
-import c from "./DatePicker.module.css.mjs";
-import { useEffect as l, useId as ce, useMemo as u, useRef as d, useState as f } from "react";
-import { Fragment as le, jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/forms/DatePicker/DatePicker.tsx
-function ue(e, t, n, r, i) {
+import { cx as t } from "../../../utils/cx.mjs";
+import { Popover as n } from "../../overlays/Popover/Popover.mjs";
+import { IconButton as r } from "../../primitives/Button/Button.mjs";
+import { CalendarIcon as i, ErrorIcon as ee } from "../../primitives/Icon/icons.mjs";
+import { VisuallyHidden as te } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { useFieldControl as a } from "../Field/FieldContext.mjs";
+import { Input as ne } from "../Input/Input.mjs";
+import { Calendar as re } from "./Calendar.mjs";
+import { formatFullDate as ie, getDateFormatInfo as ae, localizeDatePattern as oe, parseDateText as se, parseISODate as ce } from "./dateUtils.mjs";
+import o from "./DatePicker.module.css.mjs";
+import { useLocale as le } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useEffect as s, useId as c, useMemo as l, useRef as u, useState as d } from "react";
+import { Fragment as ue, jsx as f, jsxs as p } from "react/jsx-runtime";
+// src/components/forms/DatePicker/DatePicker.tsx
+function de(e, t, n, r, i) {
 	switch (t.reason) {
 		case "unparseable": return e.unparseable(t.pattern);
 		case "out-of-range": return r && i ? e.between(n(r), n(i)) : r ? e.onOrAfter(n(r)) : e.onOrBefore(n(i));
 		case "unavailable": return e.unavailable(t.date ? n(t.date) : t.text);
 	}
 }
-var h = ({ value: h, defaultValue: de, onValueChange: fe, min: g, max: _, isDateDisabled: v, locale: pe, weekStartsOn: me, placement: he = "bottom-start", size: y, name: b, clearable: ge = !1, open: _e, defaultOpen: ve = !1, onOpenChange: ye, onInvalidInput: be, invalidMessage: x, chooseDateLabel: xe, changeDateLabel: Se, dialogLabel: Ce, formatDescription: we, today: Te, numberOfMonths: Ee = 1, fieldClassName: De, className: Oe, style: S, invalid: C, required: w, disabled: T, readOnly: E, placeholder: ke, fullWidth: D = !0, endElement: Ae, onChange: je, onBlur: Me, onFocus: Ne, onKeyDown: Pe, "aria-describedby": Fe, ...Ie }) => {
-	let { messages: O, locale: Le } = t(), k = pe ?? Le, Re = xe ?? O.datePicker.chooseDate, ze = Se ?? O.datePicker.changeDate, Be = Ce ?? O.datePicker.dialog, Ve = we ?? O.datePicker.format, A = te({
+var m = ({ value: m, defaultValue: fe, onValueChange: pe, min: h, max: g, isDateDisabled: _, locale: me, weekStartsOn: he, placement: ge = "bottom-start", size: v, name: y, clearable: _e = !1, open: ve, defaultOpen: ye = !1, onOpenChange: be, onInvalidInput: xe, invalidMessage: b, chooseDateLabel: Se, changeDateLabel: Ce, dialogLabel: we, formatDescription: Te, today: Ee, numberOfMonths: De = 1, fieldClassName: Oe, className: x, style: S, invalid: C, required: w, disabled: T, readOnly: E, placeholder: ke, fullWidth: D = !0, endElement: Ae, onChange: je, onBlur: Me, onFocus: Ne, onKeyDown: Pe, "aria-describedby": Fe, ...Ie }) => {
+	let { messages: O, locale: Le } = le(), k = me ?? Le, Re = Se ?? O.datePicker.chooseDate, ze = Ce ?? O.datePicker.changeDate, Be = we ?? O.datePicker.dialog, Ve = Te ?? O.datePicker.format, A = a({
 		disabled: T,
 		readOnly: E,
-		size: y,
+		size: v,
 		invalid: C,
 		required: w
-	}), j = A.size ?? "md", M = !A.disabled && !A.readOnly, N = u(() => re(k), [k]), { format: P } = N, F = ie(N.pattern, O.datePicker.pattern), [I, He] = e({
-		value: h,
-		defaultValue: de ?? null,
-		onChange: fe
-	}), [L, R] = f(() => I ? P(I) : ""), [z, B] = f(null), V = d(I);
-	l(() => {
+	}), j = A.size ?? "md", M = !A.disabled && !A.readOnly, N = l(() => ae(k), [k]), { format: P } = N, F = oe(N.pattern, O.datePicker.pattern), [I, He] = e({
+		value: m,
+		defaultValue: fe ?? null,
+		onChange: pe
+	}), [L, R] = d(() => I ? P(I) : ""), [z, B] = d(null), V = u(I);
+	s(() => {
 		V.current !== I && (V.current = I, R(I ? P(I) : ""), B(null));
 	}, [I, P]);
-	let H = d(P);
-	l(() => {
+	let H = u(P);
+	s(() => {
 		if (H.current === P) return;
 		let e = H.current;
 		H.current = P, R((t) => I && t === e(I) ? P(I) : t);
 	}, [P, I]);
 	let U = (e, t) => {
 		V.current = e, R(t), He(e);
-	}, Ue = (e) => g && e < g || _ && e > _ ? "out-of-range" : v?.(e, oe(e)) ? "unavailable" : null, W = () => {
+	}, Ue = (e) => h && e < h || g && e > g ? "out-of-range" : _?.(e, ce(e)) ? "unavailable" : null, W = () => {
 		let e = L.trim();
 		if (!e) {
 			B(null), U(null, "");
 			return;
 		}
-		let t = ae(e, k), n = t ? Ue(t) : "unparseable";
+		let t = se(e, k), n = t ? Ue(t) : "unparseable";
 		if (n) {
 			let r = {
 				text: e,
@@ -57,20 +58,18 @@ var h = ({ value: h, defaultValue: de, onValueChange: fe, min: g, max: _, isDate
 				date: t ?? void 0,
 				pattern: F
 			};
-			B(r), U(null, L), be?.(r);
-			return;
-		}
-		B(null), U(t, P(t));
+			B(r), U(null, L), xe?.(r);
+		} else B(null), U(t, P(t));
 	}, [We, G] = e({
-		value: _e,
-		defaultValue: ve,
-		onChange: ye
-	}), K = We && M, q = d(null), Ge = () => q.current?.querySelector("[data-active]") ?? null, J = d(null);
-	l(() => {
+		value: ve,
+		defaultValue: ye,
+		onChange: be
+	}), K = We && M, q = u(null), Ge = () => q.current?.querySelector("[data-active]") ?? null, J = u(null);
+	s(() => {
 		if (K || !J.current) return;
 		let e = J.current;
 		J.current = null;
-		let t = document.activeElement, n = e.closest(`.${c.anchor}`);
+		let t = document.activeElement, n = e.closest(`.${o.anchor}`);
 		e.isConnected && (!t || t === document.body || n?.contains(t)) && e.focus();
 	}, [K]);
 	let Ke = (e) => {
@@ -83,104 +82,103 @@ var h = ({ value: h, defaultValue: de, onValueChange: fe, min: g, max: _, isDate
 		Ne?.(e);
 	}, Ye = (e) => {
 		Pe?.(e), !e.defaultPrevented && M && (e.key === "Enter" ? W() : e.key === "ArrowDown" && e.altKey && (e.preventDefault(), W(), J.current = e.currentTarget, G(!0)));
-	}, X = ce(), Z = `${X}-format`, Q = `${X}-error`, $ = z && x !== null ? typeof x == "function" ? x(z) : x ?? ue(O.datePicker.invalid, z, P, g, _) : null, Xe = [
+	}, X = c(), Z = `${X}-format`, Q = `${X}-error`, $ = z && b !== null ? typeof b == "function" ? b(z) : b ?? de(O.datePicker.invalid, z, P, h, g) : null, Xe = [
 		Fe,
 		Z,
 		$ == null ? void 0 : Q
-	].filter(Boolean).join(" ") || void 0, Ze = I ? ze(ne(I, k)) : Re;
-	return /* @__PURE__ */ m("div", {
-		className: n(c.root, D && c.fullWidth, Oe),
+	].filter(Boolean).join(" ") || void 0, Ze = I ? ze(ie(I, k)) : Re;
+	return /* @__PURE__ */ p("div", {
+		className: t(o.root, D && o.fullWidth, x),
 		style: S,
 		"data-size": j,
 		children: [
-			/* @__PURE__ */ m(o, {
+			/* @__PURE__ */ p(n, {
 				open: K,
 				onOpenChange: G,
-				placement: he,
+				placement: ge,
 				modal: !0,
 				closeOnAnchorFocus: !0,
-				children: [/* @__PURE__ */ p(o.Anchor, {
+				children: [/* @__PURE__ */ f(n.Anchor, {
 					asChild: !1,
-					className: c.anchor,
-					children: /* @__PURE__ */ p(s, {
+					className: o.anchor,
+					children: /* @__PURE__ */ f(ne, {
 						...Ie,
 						type: "text",
 						autoComplete: "off",
-						size: y,
+						size: v,
 						invalid: C ?? (z ? !0 : void 0),
 						required: w,
 						disabled: T,
 						readOnly: E,
 						fullWidth: D,
 						placeholder: ke ?? F,
-						className: De,
+						className: Oe,
 						"aria-describedby": Xe,
 						value: L,
 						onChange: qe,
 						onBlur: Je,
 						onFocus: Y,
 						onKeyDown: Ye,
-						clearable: ge,
+						clearable: _e,
 						onClear: () => {
 							B(null), U(null, "");
 						},
-						endElement: /* @__PURE__ */ m(le, { children: [Ae, !A.readOnly && /* @__PURE__ */ p(o.Trigger, {
+						endElement: /* @__PURE__ */ p(ue, { children: [Ae, !A.readOnly && /* @__PURE__ */ f(n.Trigger, {
 							asChild: !0,
-							children: /* @__PURE__ */ p(i, {
+							children: /* @__PURE__ */ f(r, {
 								size: j === "sm" ? "xs" : "sm",
 								variant: "ghost",
 								tone: "neutral",
 								"aria-label": Ze,
 								disabled: A.disabled,
-								children: /* @__PURE__ */ p(a, {})
+								children: /* @__PURE__ */ f(i, {})
 							})
 						})] })
 					})
-				}), /* @__PURE__ */ p(o.Content, {
+				}), /* @__PURE__ */ f(n.Content, {
 					"aria-label": Be,
 					size: "sm",
 					maxWidth: "none",
 					initialFocus: Ge,
-					className: c.popup,
-					children: /* @__PURE__ */ p(se, {
+					className: o.popup,
+					children: /* @__PURE__ */ f(re, {
 						ref: q,
 						value: I,
 						onValueChange: Ke,
-						min: g,
-						max: _,
-						isDateDisabled: v,
+						min: h,
+						max: g,
+						isDateDisabled: _,
 						locale: k,
-						weekStartsOn: me,
+						weekStartsOn: he,
 						size: j,
-						today: Te,
-						numberOfMonths: Ee
+						today: Ee,
+						numberOfMonths: De
 					})
 				})]
 			}),
-			/* @__PURE__ */ p(r, {
+			/* @__PURE__ */ f(te, {
 				id: Z,
 				children: Ve(F)
 			}),
-			b !== void 0 && /* @__PURE__ */ p("input", {
+			y !== void 0 && /* @__PURE__ */ f("input", {
 				type: "hidden",
-				name: b,
+				name: y,
 				value: I ?? "",
 				disabled: A.disabled
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ f("div", {
 				"aria-live": "polite",
-				className: c.errorRegion,
-				children: $ != null && /* @__PURE__ */ m("p", {
+				className: o.errorRegion,
+				children: $ != null && /* @__PURE__ */ p("p", {
 					id: Q,
-					className: c.error,
-					children: [/* @__PURE__ */ p(ee, {
+					className: o.error,
+					children: [/* @__PURE__ */ f(ee, {
 						size: "sm",
-						className: c.errorIcon
-					}), /* @__PURE__ */ p("span", { children: $ })]
+						className: o.errorIcon
+					}), /* @__PURE__ */ f("span", { children: $ })]
 				})
 			})
 		]
 	});
 };
-//#endregion
-export { h as DatePicker };
+export { m as DatePicker };

package/dist/components/forms/DatePicker/DatePicker.module.css.mjs

@@ -1,4 +1,4 @@
-//#region src/components/forms/DatePicker/DatePicker.module.css
+// src/components/forms/DatePicker/DatePicker.module.css
 var e = "_root_krzbu_13", t = "_fullWidth_krzbu_25", n = "_anchor_krzbu_35", r = "_popup_krzbu_47", i = "_error_krzbu_55", a = "_errorIcon_krzbu_81", o = {
 	root: e,
 	fullWidth: t,
@@ -7,5 +7,4 @@ var e = "_root_krzbu_13", t = "_fullWidth_krzbu_25", n = "_anchor_krzbu_35", r =
 	error: i,
 	errorIcon: a
 };
-//#endregion
 export { n as anchor, o as default, i as error, a as errorIcon, t as fullWidth, r as popup, e as root };

package/dist/components/forms/DatePicker/DateRangePicker.cjs.js

@@ -1 +1 @@
-const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../../primitives/Button/Button.cjs.js"),o=require("../../primitives/Icon/icons.cjs.js"),s=require("../Field/FieldContext.cjs.js"),c=require("../../overlays/Popover/Popover.cjs.js"),l=require("../Input/Input.cjs.js"),u=require("./dateUtils.cjs.js"),ee=require("./Calendar.cjs.js"),d=require("./DateRangePicker.module.css.cjs.js");let f=require("react"),p=require("react/jsx-runtime");var m={start:null,end:null};function te(e,t,n,r,i){switch(t.reason){case`unparseable`:return e.unparseable(t.pattern);case`out-of-range`:return r&&i?e.rangeBetween(n(r),n(i)):r?e.rangeOnOrAfter(n(r)):e.rangeOnOrBefore(n(i));case`unavailable`:return e.unavailable(t.date?n(t.date):t.text);case`order`:return t.part===`end`?e.endBeforeStart:e.startAfterEnd}}var h=({value:h,defaultValue:g,onValueChange:ne,min:_,max:v,isDateDisabled:y,locale:re,weekStartsOn:ie,placement:ae=`bottom-start`,size:oe,startName:b,endName:x,open:se,defaultOpen:ce=!1,onOpenChange:le,onInvalidInput:ue,invalidMessage:S,startLabel:de,endLabel:fe,chooseRangeLabel:pe,changeRangeLabel:me,dialogLabel:he,formatDescription:ge,today:_e,numberOfMonths:ve=2,invalid:ye,required:be,disabled:xe,readOnly:Se,fullWidth:Ce=!0,"aria-label":C,"aria-describedby":we,className:Te,style:Ee,id:De})=>{let{messages:w,locale:Oe}=n.useLocale(),T=re??Oe,ke=de??w.datePicker.startDate,Ae=fe??w.datePicker.endDate,je=pe??w.datePicker.chooseDates,Me=me??w.datePicker.changeDates,Ne=he??w.datePicker.datesDialog,Pe=ge??w.datePicker.format,E=s.useFieldContext(),D=s.useFieldControl({id:De,disabled:xe,readOnly:Se,size:oe,invalid:ye,required:be}),O=D.size??`md`,k=!D.disabled&&!D.readOnly,A=(0,f.useMemo)(()=>u.getDateFormatInfo(T),[T]),{format:j}=A,M=u.localizeDatePattern(A.pattern,w.datePicker.pattern),[Fe,N]=e.useControllableState({value:h,defaultValue:g??null,onChange:ne}),P=Fe??m,F=e=>e?j(e):``,[I,L]=(0,f.useState)(()=>F(P.start)),[R,z]=(0,f.useState)(()=>F(P.end)),[B,V]=(0,f.useState)(null),H=(0,f.useRef)(P);(0,f.useEffect)(()=>{let e=H.current;(e.start!==P.start||e.end!==P.end)&&(H.current=P,L(F(P.start)),z(F(P.end)),V(null))},[P.start,P.end,j]);let U=e=>{H.current=e,L(F(e.start)),z(F(e.end)),N(e)},Ie=e=>_&&e<_||v&&e>v?`out-of-range`:y?.(e,u.parseISODate(e))?`unavailable`:null,W=e=>{let t=H.current,n=(e===`start`?I:R).trim();if(!n){V(t=>t?.part===e?null:t),t[e]!==null&&U({...t,[e]:null});return}let r=u.parseDateText(n,T),i=r?Ie(r):`unparseable`;if(!i&&r){let n=e===`start`?t.end:t.start;n&&(e===`start`?r>n:r<n)&&(i=`order`)}if(i){let a={part:e,text:n,reason:i,date:r??void 0,pattern:M};V(a);let o={...t,[e]:null};H.current=o,N(o),ue?.(a);return}V(null);let a={...t,[e]:r};H.current=a,e===`start`?L(j(r)):z(j(r)),t[e]!==r&&N(a)},G=(0,f.useRef)(null);t.useFormReset(()=>G.current,()=>{let e=g??m;H.current=e,L(F(e.start)),z(F(e.end)),V(null),N(g??null)},h===void 0);let[Le,K]=e.useControllableState({value:se,defaultValue:ce,onChange:le}),q=Le&&k,[Re,J]=(0,f.useState)(P);(0,f.useEffect)(()=>{q&&J(H.current)},[q]);let Y=(0,f.useRef)(null),ze=()=>Y.current?.querySelector(`[data-active]`)??null,Be=e=>{J(e),e.start&&e.end&&(V(null),U(e),K(!1))},Ve=e=>t=>{k&&(t.key===`Enter`?W(e):t.key===`ArrowDown`&&t.altKey&&(t.preventDefault(),W(e),K(!0)))},X=(0,f.useId)(),He=`${X}-name`,Ue=`${X}-start`,Z=`${X}-end`,We=`${X}-format`,Ge=`${X}-error`,Ke=E?.labelId??(C?He:void 0),qe=e=>[Ke,e].filter(Boolean).join(` `),Q=B&&S!==null?typeof S==`function`?S(B):S??te(w.datePicker.invalid,B,j,_,v):null,Je=[we,We,Q==null?void 0:Ge].filter(Boolean).join(` `)||void 0,Ye=P.start&&P.end?`${u.formatFullDate(P.start,T)} to ${u.formatFullDate(P.end,T)}`:null,Xe=Ye?Me(Ye):je,$={type:`text`,autoComplete:`off`,size:O,disabled:D.disabled,readOnly:D.readOnly,required:D.required,fullWidth:!0,placeholder:M,"aria-describedby":Je,invalid:D.invalid||void 0};return(0,p.jsxs)(`div`,{className:r.cx(d.default.root,Ce&&d.default.fullWidth,Te),style:Ee,"data-size":O,children:[(0,p.jsxs)(c.Popover,{open:q,onOpenChange:K,placement:ae,modal:!0,closeOnAnchorFocus:!0,children:[(0,p.jsx)(c.Popover.Anchor,{asChild:!1,className:d.default.anchor,children:(0,p.jsxs)(`div`,{role:`group`,"aria-labelledby":Ke,className:d.default.fields,children:[(0,p.jsxs)(`div`,{className:d.default.part,children:[(0,p.jsx)(`span`,{id:Ue,className:d.default.partLabel,children:ke}),(0,p.jsx)(l.Input,{...$,ref:G,id:D.id,"aria-labelledby":qe(Ue),invalid:D.invalid||B?.part===`start`||void 0,value:I,onChange:e=>L(e.target.value),onBlur:()=>k&&W(`start`),onKeyDown:Ve(`start`)})]}),(0,p.jsx)(`span`,{className:d.default.separator,"aria-hidden":`true`,children:`–`}),(0,p.jsxs)(`div`,{className:d.default.part,children:[(0,p.jsx)(`span`,{id:Z,className:d.default.partLabel,children:Ae}),(0,p.jsx)(l.Input,{...$,id:`${X}-end-input`,"aria-labelledby":qe(Z),invalid:D.invalid||B?.part===`end`||void 0,value:R,onChange:e=>z(e.target.value),onBlur:()=>k&&W(`end`),onKeyDown:Ve(`end`),endElement:!D.readOnly&&(0,p.jsx)(c.Popover.Trigger,{asChild:!0,children:(0,p.jsx)(a.IconButton,{size:O===`sm`?`xs`:`sm`,variant:`ghost`,tone:`neutral`,"aria-label":Xe,disabled:D.disabled,children:(0,p.jsx)(o.CalendarIcon,{})})})})]})]})}),(0,p.jsx)(c.Popover.Content,{"aria-label":Ne,size:`sm`,maxWidth:`none`,initialFocus:ze,className:d.default.popup,children:(0,p.jsx)(ee.Calendar,{ref:Y,mode:`range`,value:Re,onValueChange:Be,min:_,max:v,isDateDisabled:y,locale:T,weekStartsOn:ie,size:O,today:_e,numberOfMonths:ve})})]}),C&&!E?.labelId&&(0,p.jsx)(i.VisuallyHidden,{id:He,children:C}),(0,p.jsx)(i.VisuallyHidden,{id:We,children:Pe(M)}),b!==void 0&&(0,p.jsx)(`input`,{type:`hidden`,name:b,value:P.start??``,disabled:D.disabled}),x!==void 0&&(0,p.jsx)(`input`,{type:`hidden`,name:x,value:P.end??``,disabled:D.disabled}),(0,p.jsx)(`div`,{"aria-live":`polite`,children:Q!=null&&(0,p.jsxs)(`p`,{id:Ge,className:d.default.error,children:[(0,p.jsx)(o.ErrorIcon,{size:`sm`,className:d.default.errorIcon}),(0,p.jsx)(`span`,{children:Q})]})})]})};exports.DateRangePicker=h;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../overlays/Popover/Popover.cjs.js"),i=require("../../primitives/Button/Button.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),s=require("../Field/FieldContext.cjs.js"),c=require("../Input/Input.cjs.js"),ee=require("./Calendar.cjs.js"),l=require("./dateUtils.cjs.js"),u=require("./DateRangePicker.module.css.cjs.js"),te=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var p={start:null,end:null};function ne(e,t,n,r,i){switch(t.reason){case`unparseable`:return e.unparseable(t.pattern);case`out-of-range`:return r&&i?e.rangeBetween(n(r),n(i)):r?e.rangeOnOrAfter(n(r)):e.rangeOnOrBefore(n(i));case`unavailable`:return e.unavailable(t.date?n(t.date):t.text);case`order`:return t.part===`end`?e.endBeforeStart:e.startAfterEnd}}var m=({value:m,defaultValue:h,onValueChange:re,min:g,max:_,isDateDisabled:v,locale:ie,weekStartsOn:ae,placement:oe=`bottom-start`,size:se,startName:y,endName:b,open:ce,defaultOpen:le=!1,onOpenChange:ue,onInvalidInput:de,invalidMessage:x,startLabel:fe,endLabel:pe,chooseRangeLabel:me,changeRangeLabel:he,dialogLabel:ge,formatDescription:_e,today:ve,numberOfMonths:ye=2,invalid:be,required:xe,disabled:Se,readOnly:Ce,fullWidth:we=!0,"aria-label":S,"aria-describedby":Te,className:Ee,style:De,id:Oe})=>{let{messages:C,locale:ke}=te.useLocale(),w=ie??ke,Ae=fe??C.datePicker.startDate,je=pe??C.datePicker.endDate,Me=me??C.datePicker.chooseDates,Ne=he??C.datePicker.changeDates,Pe=ge??C.datePicker.datesDialog,Fe=_e??C.datePicker.format,T=s.useFieldContext(),E=s.useFieldControl({id:Oe,disabled:Se,readOnly:Ce,size:se,invalid:be,required:xe}),D=E.size??`md`,O=!E.disabled&&!E.readOnly,k=(0,d.useMemo)(()=>l.getDateFormatInfo(w),[w]),{format:A}=k,j=l.localizeDatePattern(k.pattern,C.datePicker.pattern),[Ie,M]=e.useControllableState({value:m,defaultValue:h??null,onChange:re}),N=Ie??p,P=e=>e?A(e):``,[F,I]=(0,d.useState)(()=>P(N.start)),[L,R]=(0,d.useState)(()=>P(N.end)),[z,B]=(0,d.useState)(null),V=(0,d.useRef)(N);(0,d.useEffect)(()=>{let e=V.current;(e.start!==N.start||e.end!==N.end)&&(V.current=N,I(P(N.start)),R(P(N.end)),B(null))},[N.start,N.end,A]);let H=e=>{V.current=e,I(P(e.start)),R(P(e.end)),M(e)},Le=e=>g&&e<g||_&&e>_?`out-of-range`:v?.(e,l.parseISODate(e))?`unavailable`:null,U=e=>{let t=V.current,n=(e===`start`?F:L).trim();if(!n){B(t=>t?.part===e?null:t),t[e]!==null&&H({...t,[e]:null});return}let r=l.parseDateText(n,w),i=r?Le(r):`unparseable`;if(!i&&r){let n=e===`start`?t.end:t.start;n&&(e===`start`?r>n:r<n)&&(i=`order`)}if(i){let a={part:e,text:n,reason:i,date:r??void 0,pattern:j};B(a);let o={...t,[e]:null};V.current=o,M(o),de?.(a);return}B(null);let a={...t,[e]:r};V.current=a,e===`start`?I(A(r)):R(A(r)),t[e]!==r&&M(a)},W=(0,d.useRef)(null);t.useFormReset(()=>W.current,()=>{let e=h??p;V.current=e,I(P(e.start)),R(P(e.end)),B(null),M(h??null)},m===void 0);let[Re,G]=e.useControllableState({value:ce,defaultValue:le,onChange:ue}),K=Re&&O,[ze,q]=(0,d.useState)(N);(0,d.useEffect)(()=>{K&&q(V.current)},[K]);let J=(0,d.useRef)(null),Be=()=>J.current?.querySelector(`[data-active]`)??null,Ve=e=>{q(e),e.start&&e.end&&(B(null),H(e),G(!1))},Y=e=>t=>{O&&(t.key===`Enter`?U(e):t.key===`ArrowDown`&&t.altKey&&(t.preventDefault(),U(e),G(!0)))},X=(0,d.useId)(),He=`${X}-name`,Ue=`${X}-start`,Z=`${X}-end`,We=`${X}-format`,Ge=`${X}-error`,Ke=T?.labelId??(S?He:void 0),qe=e=>[Ke,e].filter(Boolean).join(` `),Q=z&&x!==null?typeof x==`function`?x(z):x??ne(C.datePicker.invalid,z,A,g,_):null,Je=[Te,We,Q==null?void 0:Ge].filter(Boolean).join(` `)||void 0,Ye=N.start&&N.end?`${l.formatFullDate(N.start,w)} to ${l.formatFullDate(N.end,w)}`:null,Xe=Ye?Ne(Ye):Me,$={type:`text`,autoComplete:`off`,size:D,disabled:E.disabled,readOnly:E.readOnly,required:E.required,fullWidth:!0,placeholder:j,"aria-describedby":Je,invalid:E.invalid||void 0};return(0,f.jsxs)(`div`,{className:n.cx(u.default.root,we&&u.default.fullWidth,Ee),style:De,"data-size":D,children:[(0,f.jsxs)(r.Popover,{open:K,onOpenChange:G,placement:oe,modal:!0,closeOnAnchorFocus:!0,children:[(0,f.jsx)(r.Popover.Anchor,{asChild:!1,className:u.default.anchor,children:(0,f.jsxs)(`div`,{role:`group`,"aria-labelledby":Ke,className:u.default.fields,children:[(0,f.jsxs)(`div`,{className:u.default.part,children:[(0,f.jsx)(`span`,{id:Ue,className:u.default.partLabel,children:Ae}),(0,f.jsx)(c.Input,{...$,ref:W,id:E.id,"aria-labelledby":qe(Ue),invalid:E.invalid||z?.part===`start`||void 0,value:F,onChange:e=>I(e.target.value),onBlur:()=>O&&U(`start`),onKeyDown:Y(`start`)})]}),(0,f.jsx)(`span`,{className:u.default.separator,"aria-hidden":`true`,children:`–`}),(0,f.jsxs)(`div`,{className:u.default.part,children:[(0,f.jsx)(`span`,{id:Z,className:u.default.partLabel,children:je}),(0,f.jsx)(c.Input,{...$,id:`${X}-end-input`,"aria-labelledby":qe(Z),invalid:E.invalid||z?.part===`end`||void 0,value:L,onChange:e=>R(e.target.value),onBlur:()=>O&&U(`end`),onKeyDown:Y(`end`),endElement:!E.readOnly&&(0,f.jsx)(r.Popover.Trigger,{asChild:!0,children:(0,f.jsx)(i.IconButton,{size:D===`sm`?`xs`:`sm`,variant:`ghost`,tone:`neutral`,"aria-label":Xe,disabled:E.disabled,children:(0,f.jsx)(a.CalendarIcon,{})})})})]})]})}),(0,f.jsx)(r.Popover.Content,{"aria-label":Pe,size:`sm`,maxWidth:`none`,initialFocus:Be,className:u.default.popup,children:(0,f.jsx)(ee.Calendar,{ref:J,mode:`range`,value:ze,onValueChange:Ve,min:g,max:_,isDateDisabled:v,locale:w,weekStartsOn:ae,size:D,today:ve,numberOfMonths:ye})})]}),S&&!T?.labelId&&(0,f.jsx)(o.VisuallyHidden,{id:He,children:S}),(0,f.jsx)(o.VisuallyHidden,{id:We,children:Fe(j)}),y!==void 0&&(0,f.jsx)(`input`,{type:`hidden`,name:y,value:N.start??``,disabled:E.disabled}),b!==void 0&&(0,f.jsx)(`input`,{type:`hidden`,name:b,value:N.end??``,disabled:E.disabled}),(0,f.jsx)(`div`,{"aria-live":`polite`,children:Q!=null&&(0,f.jsxs)(`p`,{id:Ge,className:u.default.error,children:[(0,f.jsx)(a.ErrorIcon,{size:`sm`,className:u.default.errorIcon}),(0,f.jsx)(`span`,{children:Q})]})})]})};exports.DateRangePicker=m;