@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,186 @@
+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) {
+	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({
+		disabled: T,
+		readOnly: E,
+		size: y,
+		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(() => {
+		V.current !== I && (V.current = I, R(I ? P(I) : ""), B(null));
+	}, [I, P]);
+	let H = d(P);
+	l(() => {
+		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 = () => {
+		let e = L.trim();
+		if (!e) {
+			B(null), U(null, "");
+			return;
+		}
+		let t = ae(e, k), n = t ? Ue(t) : "unparseable";
+		if (n) {
+			let r = {
+				text: e,
+				reason: n,
+				date: t ?? void 0,
+				pattern: F
+			};
+			B(r), U(null, L), be?.(r);
+			return;
+		}
+		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(() => {
+		if (K || !J.current) return;
+		let e = J.current;
+		J.current = null;
+		let t = document.activeElement, n = e.closest(`.${c.anchor}`);
+		e.isConnected && (!t || t === document.body || n?.contains(t)) && e.focus();
+	}, [K]);
+	let Ke = (e) => {
+		e && (B(null), U(e, P(e)), G(!1));
+	}, qe = (e) => {
+		R(e.target.value), je?.(e);
+	}, Je = (e) => {
+		Me?.(e), !A.readOnly && !A.disabled && W();
+	}, Y = (e) => {
+		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 = [
+		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),
+		style: S,
+		"data-size": j,
+		children: [
+			/* @__PURE__ */ m(o, {
+				open: K,
+				onOpenChange: G,
+				placement: he,
+				modal: !0,
+				closeOnAnchorFocus: !0,
+				children: [/* @__PURE__ */ p(o.Anchor, {
+					asChild: !1,
+					className: c.anchor,
+					children: /* @__PURE__ */ p(s, {
+						...Ie,
+						type: "text",
+						autoComplete: "off",
+						size: y,
+						invalid: C ?? (z ? !0 : void 0),
+						required: w,
+						disabled: T,
+						readOnly: E,
+						fullWidth: D,
+						placeholder: ke ?? F,
+						className: De,
+						"aria-describedby": Xe,
+						value: L,
+						onChange: qe,
+						onBlur: Je,
+						onFocus: Y,
+						onKeyDown: Ye,
+						clearable: ge,
+						onClear: () => {
+							B(null), U(null, "");
+						},
+						endElement: /* @__PURE__ */ m(le, { children: [Ae, !A.readOnly && /* @__PURE__ */ p(o.Trigger, {
+							asChild: !0,
+							children: /* @__PURE__ */ p(i, {
+								size: j === "sm" ? "xs" : "sm",
+								variant: "ghost",
+								tone: "neutral",
+								"aria-label": Ze,
+								disabled: A.disabled,
+								children: /* @__PURE__ */ p(a, {})
+							})
+						})] })
+					})
+				}), /* @__PURE__ */ p(o.Content, {
+					"aria-label": Be,
+					size: "sm",
+					maxWidth: "none",
+					initialFocus: Ge,
+					className: c.popup,
+					children: /* @__PURE__ */ p(se, {
+						ref: q,
+						value: I,
+						onValueChange: Ke,
+						min: g,
+						max: _,
+						isDateDisabled: v,
+						locale: k,
+						weekStartsOn: me,
+						size: j,
+						today: Te,
+						numberOfMonths: Ee
+					})
+				})]
+			}),
+			/* @__PURE__ */ p(r, {
+				id: Z,
+				children: Ve(F)
+			}),
+			b !== void 0 && /* @__PURE__ */ p("input", {
+				type: "hidden",
+				name: b,
+				value: I ?? "",
+				disabled: A.disabled
+			}),
+			/* @__PURE__ */ p("div", {
+				"aria-live": "polite",
+				className: c.errorRegion,
+				children: $ != null && /* @__PURE__ */ m("p", {
+					id: Q,
+					className: c.error,
+					children: [/* @__PURE__ */ p(ee, {
+						size: "sm",
+						className: c.errorIcon
+					}), /* @__PURE__ */ p("span", { children: $ })]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { h as DatePicker };

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

@@ -0,0 +1 @@
+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,anchor:n,popup:r,error:i,errorIcon:a};exports.anchor=n,exports.default=o,exports.error=i,exports.errorIcon=a,exports.fullWidth=t,exports.popup=r,exports.root=e;

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

@@ -0,0 +1,11 @@
+//#region 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,
+	anchor: n,
+	popup: 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

@@ -0,0 +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;

package/dist/components/forms/DatePicker/DateRangePicker.d.ts

@@ -0,0 +1,124 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Placement, Size } from '../../../types/common';
+import { DateRange, WeekDay } from './Calendar';
+import { DateInputErrorReason } from './DatePicker';
+import { ISODate } from './dateUtils';
+/** Which of the two fields. */
+export type DateRangePart = "start" | "end";
+/** Why typed text was rejected: DatePicker's reasons, plus an end before the start. */
+export type DateRangeInputErrorReason = DateInputErrorReason | "order";
+/** Details passed to `onInvalidInput` and a function `invalidMessage`. */
+export interface DateRangeInputError {
+    /** The field the text was typed in. */
+    part: DateRangePart;
+    /** The text the user typed. */
+    text: string;
+    /** Why it was rejected. */
+    reason: DateRangeInputErrorReason;
+    /** The parsed date, when the text was a real date that isn't allowed. */
+    date?: ISODate;
+    /** The expected format, e.g. "MM/DD/YYYY". */
+    pattern: string;
+}
+export interface DateRangePickerProps {
+    /** Selected range (controlled). `null` (or empty ends) for none. */
+    value?: DateRange | null;
+    /** Initially selected range when uncontrolled. */
+    defaultValue?: DateRange | null;
+    /**
+     * Called with the new range when the user completes a pick in the
+     * calendar, or types a date in either field and leaves it. Typed text that
+     * isn't a valid, allowed date clears that end.
+     */
+    onValueChange?: (value: DateRange) => void;
+    /** Earliest allowed date, "YYYY-MM-DD". */
+    min?: ISODate;
+    /** Latest allowed date, "YYYY-MM-DD". */
+    max?: ISODate;
+    /** Marks individual dates unavailable. Receives the ISO date and a local `Date`. */
+    isDateDisabled?: (date: ISODate, dateObject: Date) => boolean;
+    /** BCP 47 locale for the typed format, the calendar, and labels. Defaults to the browser locale. */
+    locale?: string;
+    /** First day of the week in the calendar. Defaults to the locale's. */
+    weekStartsOn?: WeekDay;
+    /** Where the calendar popup opens. Flips when there isn't room. @default "bottom-start" */
+    placement?: Placement;
+    /** Field and calendar size. Inherits from a surrounding `Field`. @default "md" */
+    size?: Size;
+    /** Name of a hidden input that submits the start date ("YYYY-MM-DD") with a form. */
+    startName?: string;
+    /** Name of a hidden input that submits the end date ("YYYY-MM-DD") with a form. */
+    endName?: string;
+    /** Controlled open state of the calendar popup. */
+    open?: boolean;
+    /** Initial open state of the calendar popup when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called when the calendar popup opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Called when the user leaves a field with text that isn't a valid, allowed date. */
+    onInvalidInput?: (error: DateRangeInputError) => void;
+    /**
+     * Message shown under the fields when typed text is rejected. Pass a
+     * function to word it per reason, or `null` to show none.
+     */
+    invalidMessage?: ReactNode | ((error: DateRangeInputError) => ReactNode);
+    /** Visible label of the start field (read after the Field label). @default "Start date" */
+    startLabel?: string;
+    /** Visible label of the end field (read after the Field label). @default "End date" */
+    endLabel?: string;
+    /** Accessible name of the calendar button while no range is set. @default "Choose dates" */
+    chooseRangeLabel?: string;
+    /** Accessible name of the calendar button while a range is set. @default (range) => `Change dates, ${range}` */
+    changeRangeLabel?: (formattedRange: string) => string;
+    /** Accessible name of the calendar popup dialog. @default "Choose dates" */
+    dialogLabel?: string;
+    /** Screen-reader description of the expected format. @default (pattern) => `Format: ${pattern}` */
+    formatDescription?: (pattern: string) => string;
+    /** Override "today" ("YYYY-MM-DD") in the calendar, e.g. for tests. */
+    today?: ISODate;
+    /** Months shown in the popup. @default 2 */
+    numberOfMonths?: 1 | 2;
+    /** Marks the fields invalid. Inherits from a surrounding `Field`. */
+    invalid?: boolean;
+    /** Both dates are required. Inherits from a surrounding `Field`. */
+    required?: boolean;
+    /** Disables both fields and the calendar button. Inherits from a surrounding `Field`. */
+    disabled?: boolean;
+    /** Read-only fields, no calendar button. Inherits from a surrounding `Field`. */
+    readOnly?: boolean;
+    /** Stretch to the container's width. @default true */
+    fullWidth?: boolean;
+    /** Accessible name of the pair when there is no surrounding `Field` label. */
+    "aria-label"?: string;
+    /** Extra description ids for both fields. */
+    "aria-describedby"?: string;
+    /** Class name for the outer root. */
+    className?: string;
+    /** Style for the outer root. */
+    style?: CSSProperties;
+    /** id of the start field (the Field label points here). */
+    id?: string;
+}
+/**
+ * A date range field: two text fields (start and end) typed in the locale's
+ * short format, plus a calendar button that opens a range `Calendar` (two
+ * months by default) in a modal popup.
+ *
+ * The value is `{ start, end }` with ISO dates ("YYYY-MM-DD"). In the
+ * calendar, the first pick sets the start and the second the end; the range
+ * is committed (and the popup closes) only when both are picked, so Escape
+ * after one pick changes nothing. Typed dates are validated like
+ * `DatePicker`'s, plus an end before the start is rejected.
+ *
+ * Accessibility: the pair is a `role="group"` named by the `Field` label
+ * (or `aria-label`); each field is named by that label plus its own
+ * visible label ("Season dates, Start date"). Field hint, error, required, disabled, and
+ * invalid state reach both fields. Errors are announced politely.
+ *
+ * ```tsx
+ * <Field label="Season dates">
+ *   <DateRangePicker startName="from" endName="to" onValueChange={setRange} />
+ * </Field>
+ * ```
+ */
+export declare const DateRangePicker: ({ value: valueProp, defaultValue, onValueChange, min, max, isDateDisabled, locale: localeProp, weekStartsOn, placement, size, startName, endName, open: openProp, defaultOpen, onOpenChange, onInvalidInput, invalidMessage, startLabel: startLabelProp, endLabel: endLabelProp, chooseRangeLabel: chooseRangeLabelProp, changeRangeLabel: changeRangeLabelProp, dialogLabel: dialogLabelProp, formatDescription: formatDescriptionProp, today, numberOfMonths, invalid, required, disabled, readOnly, fullWidth, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className, style, id, }: DateRangePickerProps) => import("react").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+var e=`_root_pyvlh_13`,t=`_fullWidth_pyvlh_25`,n=`_anchor_pyvlh_35`,r=`_fields_pyvlh_49`,i=`_part_pyvlh_63`,a=`_partLabel_pyvlh_81`,o=`_separator_pyvlh_97`,s=`_popup_pyvlh_115`,c=`_error_pyvlh_123`,l=`_errorIcon_pyvlh_147`,u={root:e,fullWidth:t,anchor:n,fields:r,part:i,partLabel:a,separator:o,popup:s,error:c,errorIcon:l};exports.anchor=n,exports.default=u,exports.error=c,exports.errorIcon=l,exports.fields=r,exports.fullWidth=t,exports.part=i,exports.partLabel=a,exports.popup=s,exports.root=e,exports.separator=o;

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

@@ -0,0 +1,15 @@
+//#region src/components/forms/DatePicker/DateRangePicker.module.css
+var e = "_root_pyvlh_13", t = "_fullWidth_pyvlh_25", n = "_anchor_pyvlh_35", r = "_fields_pyvlh_49", i = "_part_pyvlh_63", a = "_partLabel_pyvlh_81", o = "_separator_pyvlh_97", s = "_popup_pyvlh_115", c = "_error_pyvlh_123", l = "_errorIcon_pyvlh_147", u = {
+	root: e,
+	fullWidth: t,
+	anchor: n,
+	fields: r,
+	part: i,
+	partLabel: a,
+	separator: o,
+	popup: s,
+	error: c,
+	errorIcon: l
+};
+//#endregion
+export { n as anchor, u as default, c as error, l as errorIcon, r as fields, t as fullWidth, i as part, a as partLabel, s as popup, e as root, o as separator };

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

@@ -0,0 +1 @@
+var e=(e,t=2)=>String(e).padStart(t,`0`);function t(e,t,n){let r=new Date(2e3,0,1);return r.setFullYear(e,t,n),r.setHours(0,0,0,0),r}function n(t){return`${e(t.getFullYear(),4)}-${e(t.getMonth()+1)}-${e(t.getDate())}`}function r(e,n){return t(e,n+1,0).getDate()}function i(e){if(!e)return null;let n=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e.trim());if(!n)return null;let i=Number(n[1]),a=Number(n[2]),o=Number(n[3]);return a<1||a>12||o<1||o>r(i,a-1)?null:t(i,a-1,o)}function a(e){return i(e)!==null}function o(e){return(typeof e==`string`?e:n(e)).slice(0,7)}function s(e){if(!e)return null;let t=/^(\d{4})-(\d{1,2})/.exec(e.trim());if(!t)return null;let n=Number(t[2]);return n<1||n>12?null:[Number(t[1]),n-1]}function c(e,r){let a=i(e);return n(t(a.getFullYear(),a.getMonth(),a.getDate()+r))}function l(e,a){let o=i(e),s=t(o.getFullYear(),o.getMonth()+a,1),c=Math.min(o.getDate(),r(s.getFullYear(),s.getMonth()));return n(t(s.getFullYear(),s.getMonth(),c))}function u(e,n){let[r,i]=s(e);return o(t(r,i+n,1))}function d(e){return i(e).getDay()}function f(e,t){return c(e,-((d(e)-t+7)%7))}function p(e,t){return c(f(e,t),6)}function m(e){return`${e}-01`}function h(e){let[i,a]=s(e);return n(t(i,a,r(i,a)))}function g(e,t){let n=f(m(e),t),r=[];for(let e=0;e<6;e+=1){let e=[];for(let t=0;t<7;t+=1)e.push(n),n=c(n,1);r.push(e)}return r}function _(e,t,n){return t&&e<t?t:n&&e>n?n:e}function v(){return n(new Date)}function y(e){try{let t=e??new Intl.DateTimeFormat().resolvedOptions().locale,n=new Intl.Locale(t),r=n.getWeekInfo?.()??n.weekInfo;if(r?.firstDay)return r.firstDay%7}catch{}return 0}var b=t(2026,10,23);function x(e,t){return e.replace(/YYYY|MM|DD/g,e=>e===`YYYY`?t.year:e===`MM`?t.month:t.day)}var S=new Map,C=/[‎‏؜]/g,w={year:`numeric`,month:`2-digit`,day:`2-digit`,calendar:`gregory`,numberingSystem:`latn`};function T(e){let t=e??``,n=S.get(t);if(n)return n;let r;try{r=new Intl.DateTimeFormat(e,w)}catch{r=new Intl.DateTimeFormat(void 0,w)}let a=(e,t)=>{let n=e.findIndex(e=>e.type===`day`||e.type===`month`||e.type===`year`),r=-1;e.forEach((e,t)=>{(e.type===`day`||e.type===`month`||e.type===`year`)&&(r=t)});let i=``;return e.forEach((e,a)=>{e.type===`day`||e.type===`month`||e.type===`year`?i+=t(e):e.type===`literal`&&a>n&&a<r&&(i+=e.value.replace(C,``))}),i},o=r.formatToParts(b),s=[],c=[],l=!1;o.forEach((e,t)=>{if(e.type===`day`||e.type===`month`||e.type===`year`)s.push(e.type),l=!0;else if(e.type===`literal`){let n=!l||!o.slice(t+1).some(e=>e.type===`day`||e.type===`month`||e.type===`year`),r=e.value.replace(C,``).trim();n&&r&&c.push(r)}});let u=a(o,e=>e.type===`day`?`DD`:e.type===`month`?`MM`:`YYYY`);s.length!==3&&(s.splice(0,s.length,`year`,`month`,`day`),u=`YYYY-MM-DD`);let d={order:s,pattern:u.trim(),affixes:c,format:e=>{let t=i(e);return t?s.length===3&&u!==`YYYY-MM-DD`?a(r.formatToParts(t),e=>e.value):e:``}};return S.set(t,d),d}var E=[1632,1776,2406,2534,3664,4160,65296];function D(e){return e.replace(/\p{Nd}/gu,e=>{let t=e.codePointAt(0);if(t>=48&&t<=57)return e;let n=E.find(e=>t>=e&&t<=e+9);return n===void 0?e:String(t-n)})}function O(e,a){let{order:o,affixes:s}=T(a),c=D(e).replace(C,``).trim();for(let e of s)c=c.split(e).join(` `);if(c=c.trim(),!c)return null;if(/^\d{4}-\d{1,2}-\d{1,2}$/.test(c)){let[e,t,r]=c.split(`-`),a=i(`${e}-${t.padStart(2,`0`)}-${r.padStart(2,`0`)}`);return a?n(a):null}if(/^\d{6}$|^\d{8}$/.test(c)){let e=c.length===8?4:2,t=0;return O(o.map(n=>{let r=n===`year`?e:2,i=c.slice(t,t+r);return t+=r,i}).join(`/`),a)}let l=c.match(/\d+/g);if(!l||l.length!==3||/\p{L}/u.test(c))return null;let u={};if(o.forEach((e,t)=>{u[e]=l[t]}),u.year.length!==4&&u.year.length!==2)return null;let d=u.year.length===2?2e3+Number(u.year):Number(u.year),f=Number(u.month),p=Number(u.day);return f<1||f>12||p<1||p>r(d,f-1)?null:n(t(d,f-1,p))}var k=new Map;function A(e,t){let n=`${e??``}|${JSON.stringify(t)}`,r=k.get(n);if(!r){try{r=new Intl.DateTimeFormat(e,t)}catch{r=new Intl.DateTimeFormat(void 0,t)}k.set(n,r)}return r}function j(e,t){let n=i(e);return n?A(t,{weekday:`long`,year:`numeric`,month:`long`,day:`numeric`}).format(n):``}function M(e,n){let r=s(e);return r?A(n,{year:`numeric`,month:`long`}).format(t(r[0],r[1],1)):``}exports.addDays=c,exports.addMonths=l,exports.addMonthsToMonth=u,exports.clampDate=_,exports.dayOfWeek=d,exports.daysInMonth=r,exports.endOfWeek=p,exports.firstOfMonth=m,exports.formatFullDate=j,exports.formatMonthYear=M,exports.getDateFormatInfo=T,exports.getFormatter=A,exports.getLocaleWeekStart=y,exports.isISODate=a,exports.lastOfMonth=h,exports.localizeDatePattern=x,exports.makeDate=t,exports.monthGrid=g,exports.parseDateText=O,exports.parseISODate=i,exports.parseISOMonth=s,exports.startOfWeek=f,exports.toISODate=n,exports.toISOMonth=o,exports.todayISO=v;