@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/Combobox/comboboxUtils.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+/** One choice in a `Combobox`. */
+export interface ComboboxOption {
+    /** Unique value. This is what `value` / `onValueChange` and form submission use. */
+    value: string;
+    /** Visible text. Also the text that filtering matches and that fills the input after selection. */
+    label: string;
+    /** Secondary text under the label. Announced as the option's description. */
+    description?: string;
+    /** Decorative icon before the label. Hidden from assistive technology. */
+    icon?: ReactNode;
+    /** Shows the option but prevents choosing it. Arrow keys skip it. */
+    disabled?: boolean;
+    /**
+     * Group heading. Options with the same `group` are rendered together under
+     * one labeled `role="group"`, in the order each group first appears.
+     * Options without a group come first.
+     */
+    group?: string;
+}
+/**
+ * Decides whether an option matches the current input text. Return `true`
+ * to show the option. `inputValue` is the raw text the user typed.
+ */
+export type ComboboxFilter = (option: ComboboxOption, inputValue: string) => boolean;
+/** Lowercases and strips diacritics, so "Jose" matches "José". */
+export declare function normalizeText(text: string): string;
+/**
+ * The default filter: case- and diacritic-insensitive "contains" match on the
+ * option's label. An empty query matches everything.
+ */
+export declare const defaultComboboxFilter: ComboboxFilter;
+/** A navigable row of the open list: a real option or the "Create" row. */
+export type ComboboxItem = {
+    kind: "option";
+    /** Stable key: the option value. */
+    key: string;
+    option: ComboboxOption;
+    /** DOM id of the option element. */
+    id: string;
+} | {
+    kind: "create";
+    key: typeof CREATE_KEY;
+    /** The trimmed text that would be created. */
+    text: string;
+    id: string;
+};
+/** Key of the "Create" row. Starts with a NUL character, which real option values don't use. */
+export declare const CREATE_KEY: "\0create";
+/** A run of options under one (optional) group heading. */
+export interface ComboboxSection {
+    group: string | undefined;
+    items: ComboboxItem[];
+}
+/**
+ * Groups items by `option.group`, keeping the first-appearance order of
+ * groups and of options within each group. Ungrouped options come first;
+ * the "Create" row always comes last.
+ */
+export declare function groupItems(items: ComboboxItem[]): ComboboxSection[];
+/** The items in the order they are rendered (and navigated). */
+export declare function orderItems(items: ComboboxItem[]): ComboboxItem[];
+/** True when the item can be highlighted and chosen. */
+export declare function isEnabled(item: ComboboxItem | undefined): boolean;
+/**
+ * Index of the next enabled item from `from` in `direction`, or `from` when
+ * none is found. `from = -1` starts before the first item (or after the last
+ * when moving up).
+ */
+export declare function findEnabled(items: ComboboxItem[], from: number, direction: 1 | -1, loop: boolean): number;

package/dist/components/forms/Combobox/comboboxUtils.mjs

@@ -0,0 +1,57 @@
+//#region src/components/forms/Combobox/comboboxUtils.ts
+function e(e) {
+	return e.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+}
+var t = (t, n) => {
+	let r = e(n);
+	return !r || e(t.label).includes(r);
+}, n = "\0create";
+function r(e) {
+	let t = [], n = [], r = /* @__PURE__ */ new Map();
+	for (let i of e) {
+		if (i.kind === "create") {
+			n.push(i);
+			continue;
+		}
+		let e = i.option.group;
+		if (e === void 0 || e === "") t.push(i);
+		else {
+			let t = r.get(e);
+			t ? t.push(i) : r.set(e, [i]);
+		}
+	}
+	let i = [];
+	return t.length && i.push({
+		group: void 0,
+		items: t
+	}), r.forEach((e, t) => i.push({
+		group: t,
+		items: e
+	})), n.length && i.push({
+		group: void 0,
+		items: n
+	}), i;
+}
+function i(e) {
+	return r(e).flatMap((e) => e.items);
+}
+function a(e) {
+	return !!e && (e.kind === "create" || !e.option.disabled);
+}
+function o(e, t, n, r) {
+	let i = e.length;
+	if (i === 0) return -1;
+	let o = t;
+	for (let s = 0; s < i; s += 1) {
+		let c = o + n;
+		if (t === -1 && s === 0 && (c = n === 1 ? 0 : i - 1), c < 0 || c >= i) {
+			if (!r) return t;
+			c = (c + i) % i;
+		}
+		if (a(e[c])) return c;
+		o = c;
+	}
+	return t;
+}
+//#endregion
+export { n as CREATE_KEY, t as defaultComboboxFilter, o as findEnabled, r as groupItems, a as isEnabled, e as normalizeText, i as orderItems };

package/dist/components/forms/Combobox/index.d.ts

@@ -0,0 +1 @@
+export * from './Combobox';

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

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/refs.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../primitives/Button/Button.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("./dateUtils.cjs.js"),s=require("./Calendar.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u={sm:s.default.sm,md:s.default.md,lg:s.default.lg},d={sm:`sm`,md:`sm`,lg:`md`},f={start:null,end:null};function p(e){return e?.start?e.end?e.start<=e.end?[e.start,e.end]:[e.end,e.start]:[e.start,null]:[null,null]}var m=m=>{let{messages:h,locale:g}=t.useLocale(),{mode:_=`single`,value:ee,defaultValue:te,onValueChange:ne,min:v,max:y,isDateDisabled:b,locale:x=g,weekStartsOn:re,month:ie,defaultMonth:ae,onMonthChange:oe,numberOfMonths:S=1,showOutsideDays:se=S===1,size:C=`md`,today:ce,headingLevel:le=2,previousMonthLabel:ue=h.datePicker.previousMonth,nextMonthLabel:de=h.datePicker.nextMonth,className:fe,ref:w,...pe}=m,T=_===`range`,E=ce??o.todayISO(),me=(0,c.useMemo)(()=>o.getLocaleWeekStart(x),[x]),D=re??me,[O,k]=e.useControllableState({value:ee,defaultValue:te??null,onChange:ne}),A=T?null:O??null,j=T?O??f:f,[M,N]=p(j),[he,P]=e.useControllableState({value:ie,defaultValue:ae??o.toISOMonth(A??M??E),onChange:oe}),F=he.slice(0,7),I=(0,c.useMemo)(()=>Array.from({length:S},(e,t)=>o.addMonthsToMonth(F,t)),[F,S]),L=o.firstOfMonth(I[0]),R=o.lastOfMonth(I[I.length-1]),z=e=>!!e&&e>=L&&e<=R,B=(0,c.useCallback)(e=>v&&e<v||y&&e>y?!0:b?b(e,o.parseISODate(e)):!1,[v,y,b]),[V,H]=(0,c.useState)(null),[U,W]=(0,c.useState)(null),[ge,G]=(0,c.useState)(!1),K=(0,c.useMemo)(()=>{if(z(V))return V;let e=[A,M,N,E].filter(z),t=e.find(e=>!B(e));if(t)return t;if(e[0])return e[0];for(let e=L;e<=R;e=o.addDays(e,1))if(!B(e))return e;return L},[V,A,M,N,E,L,R,B]),q=(0,c.useRef)(null),_e=(0,c.useCallback)(e=>{q.current=e,n.assignRef(w,e)},[w]),J=(0,c.useRef)(!1);(0,c.useEffect)(()=>{if(!J.current)return;let e=q.current?.querySelector(`[data-date="${K}"][data-active]`);e&&(J.current=!1,e.focus({preventScroll:!1}))});let Y=e=>{let t=o.clampDate(e,v,y);H(t),t<L?P(o.toISOMonth(t)):t>R&&P(o.addMonthsToMonth(o.toISOMonth(t),-(S-1))),t!==K&&(J.current=!0)},ve=e=>{if(!B(e)){if(z(e)?H(e):Y(e),!T){k(e);return}!j.start||j.end?k({start:e,end:null}):e<j.start?k({start:e,end:j.start}):k({start:j.start,end:e}),W(null)}},ye=e=>{if(!e.target.dataset.date)return;U!==null&&W(null);let t=q.current?getComputedStyle(q.current).direction===`rtl`:!1,n=K,r=null;switch(e.key){case`ArrowLeft`:r=o.addDays(n,t?1:-1);break;case`ArrowRight`:r=o.addDays(n,t?-1:1);break;case`ArrowUp`:r=o.addDays(n,-7);break;case`ArrowDown`:r=o.addDays(n,7);break;case`Home`:r=o.startOfWeek(n,D);break;case`End`:r=o.endOfWeek(n,D);break;case`PageUp`:r=o.addMonths(n,e.shiftKey?-12:-1);break;case`PageDown`:r=o.addMonths(n,e.shiftKey?12:1);break;case`Enter`:case` `:e.preventDefault(),ve(n);return;default:return}e.preventDefault(),Y(r)},X=T&&j.start&&!j.end?U??(ge?K:null):null,Z=null,Q=null,be=`range`;M&&N&&M!==N?[Z,Q]=[M,N]:M&&X&&X!==M&&([Z,Q]=X<M?[X,M]:[M,X],be=`preview`);let xe=e=>!Z||!Q||e<Z||e>Q?null:{shape:e===Z?`start`:e===Q?`end`:`middle`,kind:be},Se=(0,c.useId)(),Ce=(0,c.useMemo)(()=>{let e=o.getFormatter(x,{weekday:`short`}),t=o.getFormatter(x,{weekday:`long`});return Array.from({length:7},(n,r)=>{let i=(D+r)%7,a=o.makeDate(2023,0,1+i);return{key:i,short:e.format(a),long:t.format(a)}})},[x,D]),we=o.getFormatter(x,{day:`numeric`}),Te=!!v&&o.lastOfMonth(o.addMonthsToMonth(F,-1))<v,Ee=!!y&&o.firstOfMonth(o.addMonthsToMonth(I[I.length-1],1))>y,De=`h${le}`,Oe=d[C],$=e=>(0,l.jsx)(i.IconButton,{variant:`ghost`,tone:`neutral`,size:Oe,"aria-label":e===`previous`?ue:de,disabled:e===`previous`?Te:Ee,className:s.default.navButton,onClick:()=>P(o.addMonthsToMonth(F,e===`previous`?-1:1)),children:e===`previous`?(0,l.jsx)(a.ChevronLeftIcon,{className:s.default.flipInRtl}):(0,l.jsx)(a.ChevronRightIcon,{className:s.default.flipInRtl})});return(0,l.jsx)(`div`,{role:`group`,...pe,ref:_e,className:r.cx(s.default.root,u[C],fe),"data-size":C,"data-mode":_,children:(0,l.jsx)(`div`,{className:s.default.months,children:I.map((e,t)=>{let n=`${Se}-heading-${t}`;return(0,l.jsxs)(`div`,{className:s.default.month,children:[(0,l.jsxs)(`div`,{className:s.default.header,children:[t===0?$(`previous`):(0,l.jsx)(`span`,{className:s.default.navSpacer}),(0,l.jsx)(De,{id:n,className:s.default.heading,"aria-live":`polite`,children:o.formatMonthYear(e,x)}),t===I.length-1?$(`next`):(0,l.jsx)(`span`,{className:s.default.navSpacer})]}),(0,l.jsxs)(`table`,{role:`grid`,"aria-labelledby":n,"aria-multiselectable":T?!0:void 0,className:s.default.grid,onKeyDown:ye,onFocus:()=>G(!0),onBlur:()=>G(!1),onPointerLeave:()=>W(null),children:[(0,l.jsx)(`thead`,{children:(0,l.jsx)(`tr`,{children:Ce.map(e=>(0,l.jsx)(`th`,{scope:`col`,abbr:e.long,className:s.default.weekday,children:e.short},e.key))})}),(0,l.jsx)(`tbody`,{children:o.monthGrid(e,D).map(t=>(0,l.jsx)(`tr`,{children:t.map(t=>{let n=o.toISOMonth(t)!==e;if(n&&!se)return(0,l.jsx)(`td`,{role:`gridcell`,className:s.default.cell},t);let i=B(t),a=!n&&t===K,c=t===E,u=!T&&t===A,d=T&&t===M,f=T&&t===N,p=T&&!!M&&!!N&&t>M&&t<N,m=u||d||f||p,h=n?null:xe(t),g=h?.kind===`preview`&&t===X;return(0,l.jsx)(`td`,{role:`gridcell`,"data-date":t,"data-active":a?``:void 0,"data-outside":n?``:void 0,"data-band":h?.shape,"data-band-kind":h?.kind,tabIndex:a?0:-1,"aria-label":o.formatFullDate(t,x),"aria-selected":n?void 0:m,"aria-current":c?`date`:void 0,"aria-disabled":i?!0:void 0,className:r.cx(s.default.cell,n&&s.default.outside,c&&s.default.today,i&&s.default.unavailable,(u||d||f)&&s.default.selected,p&&s.default.inRange,g&&s.default.previewEnd),onClick:()=>ve(t),onFocus:()=>{n||H(t)},onPointerEnter:()=>W(t),children:(0,l.jsx)(`span`,{className:s.default.day,"aria-hidden":`true`,children:we.format(o.parseISODate(t))})},t)})},t[0]))})]})]},t)})})})};exports.Calendar=m;

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

@@ -0,0 +1,98 @@
+import { ComponentPropsWithRef } from 'react';
+import { Size } from '../../../types/common';
+import { ISODate, ISOMonth } from './dateUtils';
+/** A date range. `end` is null while only the start has been picked. */
+export interface DateRange {
+    /** First day of the range, "YYYY-MM-DD", or null. */
+    start: ISODate | null;
+    /** Last day of the range (inclusive), "YYYY-MM-DD", or null. */
+    end: ISODate | null;
+}
+/** Selection behavior: one date, or a start and end date. */
+export type CalendarMode = "single" | "range";
+/** First day of the week: 0 = Sunday, 1 = Monday, ... 6 = Saturday. */
+export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** Props shared by single and range calendars. */
+export interface CalendarBaseProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children"> {
+    /** Earliest selectable date, "YYYY-MM-DD". Keyboard navigation stops here. */
+    min?: ISODate;
+    /** Latest selectable date, "YYYY-MM-DD". Keyboard navigation stops here. */
+    max?: ISODate;
+    /**
+     * Marks individual dates unavailable (`aria-disabled`, struck through, not
+     * selectable but still focusable so they can be read). Receives the ISO
+     * date and a local `Date` for it.
+     */
+    isDateDisabled?: (date: ISODate, dateObject: Date) => boolean;
+    /** BCP 47 locale for month names, weekday names, and date labels. Defaults to the browser locale. */
+    locale?: string;
+    /**
+     * First day of the week (0 = Sunday ... 6 = Saturday). Defaults to the
+     * locale's first day where the browser exposes it (`Intl.Locale` week
+     * info), otherwise Sunday.
+     */
+    weekStartsOn?: WeekDay;
+    /** Visible month, "YYYY-MM" (controlled). With two months, this is the first one. */
+    month?: ISOMonth;
+    /** Initially visible month, "YYYY-MM". Defaults to the selected date's month, or today's. */
+    defaultMonth?: ISOMonth;
+    /** Called with the new visible month ("YYYY-MM") when the user pages or moves focus to another month. */
+    onMonthChange?: (month: ISOMonth) => void;
+    /** Months shown side by side. @default 1 */
+    numberOfMonths?: 1 | 2;
+    /**
+     * Show the leading and trailing days of neighbouring months (muted). They
+     * can be pressed to select them and jump to that month.
+     * Defaults to `true` with one month and `false` with two.
+     */
+    showOutsideDays?: boolean;
+    /** Day cell and text size. @default "md" */
+    size?: Size;
+    /** Override "today" ("YYYY-MM-DD"), e.g. for tests or a server-provided date. Defaults to the local date. */
+    today?: ISODate;
+    /** Heading level of the month title. Pick it by document outline. @default 2 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Accessible name of the previous-month button. @default "Previous month" */
+    previousMonthLabel?: string;
+    /** Accessible name of the next-month button. @default "Next month" */
+    nextMonthLabel?: string;
+}
+export interface CalendarSingleProps extends CalendarBaseProps {
+    /** Select one date. @default "single" */
+    mode?: "single";
+    /** Selected date, "YYYY-MM-DD", or null for none (controlled). */
+    value?: ISODate | null;
+    /** Initially selected date when uncontrolled. */
+    defaultValue?: ISODate | null;
+    /** Called with the selected ISO date. */
+    onValueChange?: (value: ISODate | null) => void;
+}
+export interface CalendarRangeProps extends CalendarBaseProps {
+    /** Select a start and an end date. */
+    mode: "range";
+    /** Selected range (controlled). */
+    value?: DateRange | null;
+    /** Initially selected range when uncontrolled. */
+    defaultValue?: DateRange | null;
+    /**
+     * Called with the range after each pick: first `{ start, end: null }`,
+     * then the completed `{ start, end }`. A third pick starts a new range.
+     */
+    onValueChange?: (value: DateRange) => void;
+}
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+/**
+ * A month grid for picking a date or a date range, following the WAI-ARIA
+ * date picker grid pattern: arrow keys move by day and week, Home/End to the
+ * week's edges, PageUp/PageDown by month (with Shift, by year), and Enter or
+ * Space selects. One date is in the tab order (roving tabindex).
+ *
+ * Dates are plain ISO strings ("YYYY-MM-DD"), so values never shift with
+ * time zones. Use `parseISODate` / `toISODate` to convert to and from `Date`.
+ *
+ * ```tsx
+ * <Calendar defaultValue="2026-10-04" onValueChange={setDate} />
+ * <Calendar mode="range" numberOfMonths={2} onValueChange={setRange} />
+ * ```
+ */
+export declare const Calendar: (props: CalendarProps) => import("react").JSX.Element;

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

@@ -0,0 +1,228 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useLocale as t } from "../../utilities/LocaleProvider/LocaleProvider.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 h from "./Calendar.module.css.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
+var fe = {
+	sm: h.sm,
+	md: h.md,
+	lg: h.lg
+}, pe = {
+	sm: "sm",
+	md: "sm",
+	lg: "md"
+}, me = {
+	start: null,
+	end: null
+};
+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({
+		value: be,
+		defaultValue: xe ?? null,
+		onChange: Se
+	}), M = O ? null : Fe ?? null, N = O ? Fe ?? me : me, [P, F] = he(N), [Ie, I] = e({
+		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, [
+		x,
+		S,
+		C
+	]), [U, W] = v(null), [Le, G] = v(null), [Re, ze] = v(!1), K = _(() => {
+		if (V(U)) return U;
+		let e = [
+			M,
+			P,
+			F,
+			k
+		].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;
+		return z;
+	}, [
+		U,
+		M,
+		P,
+		F,
+		k,
+		z,
+		B,
+		H
+	]), q = de(null), Be = g((e) => {
+		q.current = e, n(D, e);
+	}, [D]), J = de(!1);
+	le(() => {
+		if (!J.current) return;
+		let e = q.current?.querySelector(`[data-date="${K}"][data-active]`);
+		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);
+	}, 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);
+		}
+	}, 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);
+				break;
+			case "ArrowRight":
+				r = s(n, t ? -1 : 1);
+				break;
+			case "ArrowUp":
+				r = s(n, -7);
+				break;
+			case "ArrowDown":
+				r = s(n, 7);
+				break;
+			case "Home":
+				r = se(n, A);
+				break;
+			case "End":
+				r = ee(n, A);
+				break;
+			case "PageUp":
+				r = c(n, e.shiftKey ? -12 : -1);
+				break;
+			case "PageDown":
+				r = c(n, e.shiftKey ? 12 : 1);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), Y(n);
+				return;
+			default: return;
+		}
+		e.preventDefault(), Ve(r);
+	}, X = O && N.start && !N.end ? Le ?? (Re ? K : null) : null, Z = null, Q = null, Ue = "range";
+	P && F && P !== F ? [Z, Q] = [P, F] : P && X && X !== P && ([Z, Q] = X < P ? [X, P] : [P, X], Ue = "preview");
+	let We = (e) => !Z || !Q || e < Z || e > Q ? null : {
+		shape: e === Z ? "start" : e === Q ? "end" : "middle",
+		kind: Ue
+	}, 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);
+			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, {
+		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 })
+	});
+	return /* @__PURE__ */ y("div", {
+		role: "group",
+		...Ne,
+		ref: Be,
+		className: r(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}`;
+				return /* @__PURE__ */ b("div", {
+					className: h.month,
+					children: [/* @__PURE__ */ b("div", {
+						className: h.header,
+						children: [
+							t === 0 ? $("previous") : /* @__PURE__ */ y("span", { className: h.navSpacer }),
+							/* @__PURE__ */ y(Xe, {
+								id: n,
+								className: h.heading,
+								"aria-live": "polite",
+								children: f(e, w)
+							}),
+							t === R.length - 1 ? $("next") : /* @__PURE__ */ y("span", { className: h.navSpacer })
+						]
+					}), /* @__PURE__ */ b("table", {
+						role: "grid",
+						"aria-labelledby": n,
+						"aria-multiselectable": O ? !0 : void 0,
+						className: h.grid,
+						onKeyDown: He,
+						onFocus: () => ze(!0),
+						onBlur: () => ze(!1),
+						onPointerLeave: () => G(null),
+						children: [/* @__PURE__ */ y("thead", { children: /* @__PURE__ */ y("tr", { children: Ke.map((e) => /* @__PURE__ */ y("th", {
+							scope: "col",
+							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", {
+								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;
+							return /* @__PURE__ */ y("td", {
+								role: "gridcell",
+								"data-date": t,
+								"data-active": a ? "" : void 0,
+								"data-outside": n ? "" : void 0,
+								"data-band": d?.shape,
+								"data-band-kind": d?.kind,
+								tabIndex: a ? 0 : -1,
+								"aria-label": te(t, w),
+								"aria-selected": n ? void 0 : ee,
+								"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),
+								onFocus: () => {
+									n || W(t);
+								},
+								onPointerEnter: () => G(t),
+								children: /* @__PURE__ */ y("span", {
+									className: h.day,
+									"aria-hidden": "true",
+									children: qe.format(oe(t))
+								})
+							}, t);
+						}) }, t[0])) })]
+					})]
+				}, t);
+			})
+		})
+	});
+};
+//#endregion
+export { ge as Calendar };

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

@@ -0,0 +1 @@
+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,md:n,lg:r,months:i,month:a,header:o,heading:s,navSpacer:c,flipInRtl:l,grid:u,weekday:d,cell:f,day:p,unavailable:m,selected:h,outside:g,today:_,inRange:v,previewEnd:y};exports.cell=f,exports.day=p,exports.default=b,exports.flipInRtl=l,exports.grid=u,exports.header=o,exports.heading=s,exports.inRange=v,exports.lg=r,exports.md=n,exports.month=a,exports.months=i,exports.navSpacer=c,exports.outside=g,exports.previewEnd=y,exports.root=e,exports.selected=h,exports.sm=t,exports.today=_,exports.unavailable=m,exports.weekday=d;

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

@@ -0,0 +1,25 @@
+//#region 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,
+	md: n,
+	lg: r,
+	months: i,
+	month: a,
+	header: o,
+	heading: s,
+	navSpacer: c,
+	flipInRtl: l,
+	grid: u,
+	weekday: d,
+	cell: f,
+	day: p,
+	unavailable: m,
+	selected: h,
+	outside: g,
+	today: _,
+	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

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

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

@@ -0,0 +1,100 @@
+import { ReactNode } from 'react';
+import { Placement, Size } from '../../../types/common';
+import { InputProps } from '../Input';
+import { WeekDay } from './Calendar';
+import { ISODate } from './dateUtils';
+/** Why typed text was rejected. */
+export type DateInputErrorReason = "unparseable" | "out-of-range" | "unavailable";
+/** Details passed to `onInvalidInput` and a function `invalidMessage`. */
+export interface DateInputError {
+    /** The text the user typed. */
+    text: string;
+    /** Why it was rejected. */
+    reason: DateInputErrorReason;
+    /** 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 DatePickerProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "onValueChange" | "min" | "max" | "size" | "name" | "clearable" | "onClear"> {
+    /** Selected date, "YYYY-MM-DD", or null for none (controlled). */
+    value?: ISODate | null;
+    /** Initially selected date when uncontrolled. */
+    defaultValue?: ISODate | null;
+    /**
+     * Called with the new ISO date (or null) when the user picks a date, types
+     * one and leaves the field, or clears it. Typed text that isn't a valid,
+     * allowed date sets the value to null.
+     */
+    onValueChange?: (value: ISODate | null) => 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 relative to the field. 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 ISO value ("YYYY-MM-DD") with a form. */
+    name?: string;
+    /** Shows a clear button while there is text. @default false */
+    clearable?: boolean;
+    /** 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 the field with text that isn't a valid,
+     * allowed date. Use it to set your own `Field` error.
+     */
+    onInvalidInput?: (error: DateInputError) => void;
+    /**
+     * Message shown under the field when typed text is rejected. Pass a
+     * function to word it per reason, or `null` to show none (for example
+     * when you show a `Field` error from `onInvalidInput` instead).
+     * Defaults to "Enter a date as MM/DD/YYYY." and range/availability messages.
+     */
+    invalidMessage?: ReactNode | ((error: DateInputError) => ReactNode);
+    /** Accessible name of the calendar button while no date is set. @default "Choose date" */
+    chooseDateLabel?: string;
+    /** Accessible name of the calendar button while a date is set. @default (date) => `Change date, ${date}` */
+    changeDateLabel?: (formattedDate: string) => string;
+    /** Accessible name of the calendar popup dialog. @default "Choose date" */
+    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 1 */
+    numberOfMonths?: 1 | 2;
+    /** Class name for the Input's field wrapper. `className` goes to the outer root. */
+    fieldClassName?: string;
+}
+/**
+ * A date field: type a date in the locale's short format (or ISO), or press
+ * the calendar button to pick one from a `Calendar` in a popup dialog.
+ *
+ * The value is an ISO date string ("YYYY-MM-DD"), so it never shifts with
+ * time zones. The text field shows it in the locale's numeric format; on
+ * blur (or Enter), typed text is parsed and normalized, or rejected with an
+ * inline error. Inside a `Field`, label, hint, error, required, disabled,
+ * and invalid state are wired to the text input.
+ *
+ * The popup is a modal `Popover` on the shared overlay layer stack, so
+ * Escape closes only the calendar, also inside a `Modal` or `Drawer`.
+ *
+ * ```tsx
+ * <Field label="Game day">
+ *   <DatePicker name="gameDay" min="2026-10-01" onValueChange={setDay} />
+ * </Field>
+ * ```
+ */
+export declare const DatePicker: ({ value: valueProp, defaultValue, onValueChange, min, max, isDateDisabled, locale: localeProp, weekStartsOn, placement, size, name, clearable, open: openProp, defaultOpen, onOpenChange, onInvalidInput, invalidMessage, chooseDateLabel: chooseDateLabelProp, changeDateLabel: changeDateLabelProp, dialogLabel: dialogLabelProp, formatDescription: formatDescriptionProp, today, numberOfMonths, fieldClassName, className, style, invalid, required, disabled, readOnly, placeholder, fullWidth, endElement, onChange, onBlur, onFocus, onKeyDown, "aria-describedby": ariaDescribedBy, ...rest }: DatePickerProps) => import("react").JSX.Element;