@box-kite/react 2.2.5 → 2.2.6

package/components/dateField.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../identity.cjs"),a=require("../dates.cjs"),o=require("../date-math.cjs"),s=require("../date-input.cjs"),c=require("../date-environment.cjs");let l=require("react"),u=require("react/jsx-runtime");var d=`data-segment`;function f(e,f){let{type:p=`date`,value:ee,defaultValue:m=null,onValueChange:te,zone:h,locale:ne,hourCycle:re,granularity:g=`minute`,min:_,max:v,isDateUnavailable:y,disabled:b=!1,readOnly:x=!1,required:S=!1,invalid:ie,name:C,label:w,labelledBy:ae,describedBy:T,placeholderValue:oe,disambiguation:E,showZone:se,end:ce,autoFocus:le,emptyText:ue=`Empty`,tabIndex:de=0,props:fe,...D}=e,O=c.n({locale:ne,zone:h===`none`?void 0:h}),{locale:k}=O,A=p===`datetime`&&h!==`none`?O.zone:null,j=re??a.b(k),M=(0,l.useMemo)(()=>({type:p,locale:k,hourCycle:j,granularity:g}),[p,k,j,g]),N=(0,l.useMemo)(()=>s.o(M),[M]),P=`${p}|${k}|${j}|${g}|${A}`,[F,pe]=r.i({value:ee,defaultValue:m,onChange:(e,t)=>te?.(e,{...t,...o.x(e,A??O.zone)})}),[I,L]=(0,l.useState)(()=>({draft:s.n(F,M,A),source:F,key:P})),R=I.draft;if(I.source!==F||I.key!==P){let e=s.f(I.draft,N,M,{zone:A,disambiguation:E}),t={draft:I.key===P&&e===F?I.draft:s.n(F,M,A),source:F,key:P};L(t),R=t.draft}let[z,B]=(0,l.useState)(null),V=(0,l.useRef)(null),H=(0,l.useRef)(null),U=i.t(`date-field`),me=w===void 0?void 0:`${U}-label`,W=(0,l.useMemo)(()=>s.n(oe??`${o.N(O.zone)}T00:00:00`,{...M,type:M.type===`date`?`date`:`datetime`},null),[oe,O.zone,M]),G=(e,t,n)=>{let r=s.f(e,N,M,{zone:A,disambiguation:E});L({draft:e,source:r,key:P}),pe(r,{reason:t,event:n})},K=r.o({draft:R,editing:z,commit:G}),q=()=>Array.from(V.current?.querySelectorAll(`[${d}]`)??[]),J=e=>{let t=q();t[Math.max(0,Math.min(e,t.length-1))]?.focus()},Y=e=>q().indexOf(e),X=(e,t,n,r)=>{let{draft:i,editing:a}=K.current,o=a?.type===t?a.buffer:``;if(t===`dayPeriod`){let t=s.d(i,n,k);t&&(K.current.commit(t,`keyboard`,r),J(Y(e)+1));return}if(!/^\d$/.test(n)){/^[^\p{L}\p{N}]$/u.test(n)&&i[t]!==void 0&&J(Y(e)+1);return}let c=s.u(i,t,o,n,M);B({type:t,buffer:c.advance?``:c.buffer}),K.current.commit(c.draft,`keyboard`,r),c.advance&&J(Y(e)+1)},he=r.a(e=>{let n=e.target.closest(`[${d}]`);if(!n||b||e.defaultPrevented)return;let r=n.getAttribute(d),i=Y(n),a=t.d(n),{key:o}=e,c=K.current.draft,l=t=>{e.preventDefault(),!x&&(B({type:r,buffer:``}),G(t,`keyboard`,e))};if(o===`ArrowUp`||o===`ArrowDown`)return l(s.c(c,r,o===`ArrowUp`?1:-1,M,W));if(o===`PageUp`||o===`PageDown`)return l(s.c(c,r,(o===`PageUp`?1:-1)*s.t[r],M,W));if(o===`Home`||o===`End`){let e=s.i(r,c,M);return l({...c,[r]:o===`Home`?e.min:e.max})}if(o===`ArrowLeft`||o===`ArrowRight`){e.preventDefault(),J(i+(o===`ArrowRight`===a?-1:1));return}if(o===`Backspace`||o===`Delete`){if(e.preventDefault(),x)return;let t=K.current.editing?.type===r?K.current.editing.buffer:``;if(t.length>1){let n=t.slice(0,-1);B({type:r,buffer:n}),G({...c,[r]:Number(n)},`keyboard`,e)}else c[r]===void 0?o===`Backspace`&&J(i-1):(B({type:r,buffer:``}),G({...c,[r]:void 0},`keyboard`,e));return}if(o===`Enter`){e.preventDefault(),H.current?.form?.requestSubmit();return}o===`Unidentified`||o===`Process`||e.ctrlKey||e.metaKey||e.altKey||o.length!==1||(e.preventDefault(),x||X(n,r,o,e))});(0,l.useEffect)(()=>{let e=V.current;if(!e)return;let t=e=>{let t=e.target?.closest(`[${d}]`);if(!t||(e.preventDefault(),b||x))return;let n=t.getAttribute(d);if(e.inputType.startsWith(`delete`)){t.dispatchEvent(new KeyboardEvent(`keydown`,{key:`Backspace`,bubbles:!0,cancelable:!0}));return}for(let r of e.data??``)X(t,n,r,e)};return e.addEventListener(`beforeinput`,t),()=>e.removeEventListener(`beforeinput`,t)});let ge=r.a(e=>{if(e.preventDefault(),b||x)return;let t=p===`datetime`?A?`instant`:`datetime`:p,n=s.m(e.clipboardData.getData(`text`),{locale:k,kind:t,zone:A??O.zone});n&&G(s.n(n,M,A),`paste`,e)});(0,l.useEffect)(()=>{let e=H.current?.form;if(!e)return;let t=e=>K.current.commit(s.n(m,M,A),`reset`,e);return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)}),(0,l.useEffect)(()=>{le&&J(0)},[]);let _e=F!==null&&(_!=null&&o.i(F,_)<0||v!=null&&o.i(F,v)>0),Z=F!==null&&p!==`time`&&y?o.O(F,{zone:A??O.zone}):null,Q=ie??(_e||Z!==null&&y(Z)),ve=p===`time`?[]:a.x(k),ye=typeof w==`string`?w:void 0,be=s.r(N)[0],$=p===`datetime`&&A&&(se??A!==O.readerZone)?a.s(A,{locale:k,style:`short`,at:F??void 0}):null;return(0,u.jsxs)(u.Fragment,{children:[w!==void 0&&(0,u.jsx)(n.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:me,props:{onClick:()=>J(0)},children:w}),(0,u.jsxs)(n.default,{ref:e=>{V.current=e,typeof f==`function`?f(e):f&&(f.current=e)},component:`dateField`,display:`inline-flex`,ai:`center`,position:`relative`,cursor:`text`,css:{fontVariantNumeric:`tabular-nums`,unicodeBidi:`isolate`},...D,variant:[D.variant,{disabled:b,invalid:Q}],id:U,props:{role:`group`,"aria-labelledby":[me,ae].filter(Boolean).join(` `)||void 0,"aria-describedby":T,"aria-disabled":b||void 0,"aria-invalid":Q||void 0,...fe,onKeyDown:he,onPaste:ge,onPointerDown:e=>{if(e.target!==e.currentTarget||b)return;e.preventDefault();let t=s.r(N).findIndex(e=>K.current.draft[e]===void 0);J(t===-1?0:t)}},children:[N.map((e,t)=>{if(e.type===`literal`)return(0,u.jsx)(n.default,{component:`dateField.literal`,whiteSpace:`pre`,props:{"aria-hidden":!0},children:e.text},t);let r=e.type,i=s.i(r,R,M),o=R[r],c=o===void 0,l=z?.type===r?z.buffer:``,f=s.a(r,R,l,k),p=c?ue:r===`month`?`${o} – ${ve[o-1]}`:r===`dayPeriod`?f:String(o);return(0,u.jsx)(n.default,{component:`dateField.segment`,display:`inline-block`,px:.5,borderRadius:1,textAlign:`end`,whiteSpace:`nowrap`,variant:{placeholder:c,disabled:b},id:`${U}-${r}`,props:{[d]:r,role:`spinbutton`,tabIndex:b?-1:de,contentEditable:!b&&!x,suppressContentEditableWarning:!0,spellCheck:!1,autoCorrect:`off`,autoCapitalize:`off`,inputMode:r===`dayPeriod`?`text`:`numeric`,enterKeyHint:`next`,"aria-label":ye?`${a.y(r,k)}, ${ye}`:a.y(r,k),"aria-valuemin":i.min,"aria-valuemax":i.max,"aria-valuenow":o??W[r]??i.min,"aria-valuetext":p,"aria-readonly":x||void 0,"aria-disabled":b||void 0,"aria-invalid":Q||void 0,"aria-describedby":r===be?T:void 0,onFocus:()=>B({type:r,buffer:``}),onBlur:()=>B(null)},children:f},t)}),$&&(0,u.jsx)(n.default,{component:`dateField.zone`,ms:2,fontSize:13,whiteSpace:`nowrap`,children:$}),ce,C!==void 0||S?(0,u.jsx)(l.Fragment,{children:S?(0,u.jsx)(n.default,{tag:`input`,ref:H,component:`dateField.validation`,required:!0,disabled:b,props:{type:`text`,name:C,value:F??``,tabIndex:-1,"aria-hidden":!0,onChange:()=>{},onFocus:()=>J(0)}}):(0,u.jsx)(`input`,{ref:H,type:`hidden`,name:C,value:F??``,disabled:b})}):null]})]})}var p=e.f(f,`DateField`);exports.default=p;

package/components/dateField.d.ts

@@ -0,0 +1,78 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { DateChangeDetails, DateChangeReason } from '../react/date/dateChange';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { FieldGranularity, FieldType } from '../utils/date/fieldModel';
+import { Disambiguation, ZoneInput } from '../utils/date/zones';
+export type { DateChangeDetails, DateChangeHandler, DateChangeReason } from '../react/date/dateChange';
+export type DateFieldType = FieldType;
+export type DateFieldGranularity = FieldGranularity;
+type DateFieldBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'onChange' | 'disabled' | 'required' | 'invalid' | 'placeholder' | 'defaultValue' | 'readOnly'>;
+export interface DateFieldProps<TKey extends keyof ComponentsAndVariants = 'dateField'> extends DateFieldBoxProps<TKey> {
+    /** What it edits: a day (`'date'`, default), a time of day (`'time'`), or both (`'datetime'`). */
+    type?: DateFieldType;
+    /**
+     * Controlled value, an ISO string of the field's kind: `2026-10-19`, `14:30:00`, or for a date-time an
+     * instant with its offset (`2026-10-19T14:30:00+03:00`), `…Z` in UTC, or a wall clock with `zone="none"`.
+     * `null` is empty. Any spelling `parse` reads is accepted; what comes back is canonical.
+     */
+    value?: string | null;
+    /** The value it starts with when the field owns its state. */
+    defaultValue?: string | null;
+    /**
+     * Fires with the new value — `null` while a segment is empty — and its readings: `utc`, the reader's
+     * `local` wall clock, a `Date`, the epoch, and why it changed.
+     */
+    onValueChange?: ChangeHandler<string | null, DateChangeReason, DateChangeDetails>;
+    /**
+     * Whose wall clock a date-time is typed on. Default `'local'`, the reader's; `'utc'`, any IANA zone or
+     * `+03:00` for another; `'none'` for a wall clock with no zone at all (an alarm, a timetable). A date and a
+     * time have no zone, so this only says what "today" is for them.
+     */
+    zone?: ZoneInput | 'none';
+    /** The language the segments are ordered and named in. Default the reader's. */
+    locale?: string;
+    /** A 12- or 24-hour clock. Default the locale's. */
+    hourCycle?: 12 | 24;
+    /** Whether a time is edited to the minute (default) or the second. */
+    granularity?: DateFieldGranularity;
+    /** The earliest value that is valid. A value before it is kept and marked `aria-invalid`. */
+    min?: string | null;
+    /** The latest value that is valid. */
+    max?: string | null;
+    /** Days nobody can choose — a weekend, a holiday. Handed the `YYYY-MM-DD` day. */
+    isDateUnavailable?: (date: string) => boolean;
+    /** Not editable and not focusable, and read out as such. */
+    disabled?: boolean;
+    /** Focusable and read out, but not editable. */
+    readOnly?: boolean;
+    /** The form is not valid until it is filled in — the browser's own check, announced and translated for free. */
+    required?: boolean;
+    /** Marks the value invalid whatever the bounds say. Default: invalid when out of bounds or unavailable. */
+    invalid?: boolean;
+    /** What the value posts under in a form: the canonical string, or nothing while empty. */
+    name?: string;
+    /** The field's visible name, rendered above it. A group of segments is not named by its contents. */
+    label?: React.ReactNode;
+    /** Names the field after an element already on the page, instead of `label`. */
+    labelledBy?: string;
+    /** An element that describes the field — a hint, an error. */
+    describedBy?: string;
+    /** What an empty segment starts from on an arrow key. Default today, at midnight. */
+    placeholderValue?: string;
+    /** What a wall-clock time a zone skips or repeats means. Default `'compatible'`. */
+    disambiguation?: Disambiguation;
+    /** Whether a date-time names its zone after the time. Default: when the zone is not the reader's own. */
+    showZone?: boolean;
+    /** Something inside the field, after the segments — a picker's button. */
+    end?: React.ReactNode;
+    /** Focus the first segment on mount. */
+    autoFocus?: boolean;
+    /** What an empty segment is read out as. Default `'Empty'`. */
+    emptyText?: string;
+    /** Every segment's tab index. Default `0`; `-1` keeps the field out of the page's tab order, which a grid cell wants. */
+    tabIndex?: number;
+}
+declare const _default: <TKey extends keyof ComponentsAndVariants = "dateField">(props: DateFieldProps<TKey> & RefAttributes<HTMLDivElement>) => React.ReactNode;
+export default _default;

package/components/dateField.mjs

@@ -0,0 +1,313 @@
+"use client";
+import { f as e } from "../react-shared.mjs";
+import { d as t } from "../platform.mjs";
+import n from "../box.mjs";
+import { a as r, i, o as a } from "../behavior.mjs";
+import { t as o } from "../identity.mjs";
+import { b as s, s as c, x as ee, y as te } from "../dates.mjs";
+import { N as ne, O as re, i as ie, x as ae } from "../date-math.mjs";
+import { a as oe, c as l, d as se, f as u, i as d, m as ce, n as f, o as le, r as ue, t as de, u as fe } from "../date-input.mjs";
+import { n as pe } from "../date-environment.mjs";
+import { Fragment as me, useEffect as p, useMemo as m, useRef as he, useState as ge } from "react";
+import { Fragment as _e, jsx as h, jsxs as ve } from "react/jsx-runtime";
+//#region src/components/dateField.tsx
+var g = "data-segment";
+function _(e, _) {
+	let { type: v = "date", value: ye, defaultValue: be = null, onValueChange: xe, zone: y, locale: Se, hourCycle: Ce, granularity: b = "minute", min: x, max: S, isDateUnavailable: C, disabled: w = !1, readOnly: T = !1, required: E = !1, invalid: we, name: D, label: O, labelledBy: Te, describedBy: k, placeholderValue: A, disambiguation: j, showZone: Ee, end: De, autoFocus: Oe, emptyText: ke = "Empty", tabIndex: Ae = 0, props: je, ...M } = e, N = pe({
+		locale: Se,
+		zone: y === "none" ? void 0 : y
+	}), { locale: P } = N, F = v === "datetime" && y !== "none" ? N.zone : null, I = Ce ?? s(P), L = m(() => ({
+		type: v,
+		locale: P,
+		hourCycle: I,
+		granularity: b
+	}), [
+		v,
+		P,
+		I,
+		b
+	]), R = m(() => le(L), [L]), z = `${v}|${P}|${I}|${b}|${F}`, [B, Me] = i({
+		value: ye,
+		defaultValue: be,
+		onChange: (e, t) => xe?.(e, {
+			...t,
+			...ae(e, F ?? N.zone)
+		})
+	}), [V, Ne] = ge(() => ({
+		draft: f(B, L, F),
+		source: B,
+		key: z
+	})), H = V.draft;
+	if (V.source !== B || V.key !== z) {
+		let e = u(V.draft, R, L, {
+			zone: F,
+			disambiguation: j
+		}), t = {
+			draft: V.key === z && e === B ? V.draft : f(B, L, F),
+			source: B,
+			key: z
+		};
+		Ne(t), H = t.draft;
+	}
+	let [U, W] = ge(null), G = he(null), K = he(null), q = o("date-field"), Pe = O === void 0 ? void 0 : `${q}-label`, J = m(() => f(A ?? `${ne(N.zone)}T00:00:00`, {
+		...L,
+		type: L.type === "date" ? "date" : "datetime"
+	}, null), [
+		A,
+		N.zone,
+		L
+	]), Y = (e, t, n) => {
+		let r = u(e, R, L, {
+			zone: F,
+			disambiguation: j
+		});
+		Ne({
+			draft: e,
+			source: r,
+			key: z
+		}), Me(r, {
+			reason: t,
+			event: n
+		});
+	}, X = a({
+		draft: H,
+		editing: U,
+		commit: Y
+	}), Fe = () => Array.from(G.current?.querySelectorAll(`[${g}]`) ?? []), Z = (e) => {
+		let t = Fe();
+		t[Math.max(0, Math.min(e, t.length - 1))]?.focus();
+	}, Q = (e) => Fe().indexOf(e), Ie = (e, t, n, r) => {
+		let { draft: i, editing: a } = X.current, o = a?.type === t ? a.buffer : "";
+		if (t === "dayPeriod") {
+			let t = se(i, n, P);
+			t && (X.current.commit(t, "keyboard", r), Z(Q(e) + 1));
+			return;
+		}
+		if (!/^\d$/.test(n)) {
+			/^[^\p{L}\p{N}]$/u.test(n) && i[t] !== void 0 && Z(Q(e) + 1);
+			return;
+		}
+		let s = fe(i, t, o, n, L);
+		W({
+			type: t,
+			buffer: s.advance ? "" : s.buffer
+		}), X.current.commit(s.draft, "keyboard", r), s.advance && Z(Q(e) + 1);
+	}, Le = r((e) => {
+		let n = e.target.closest(`[${g}]`);
+		if (!n || w || e.defaultPrevented) return;
+		let r = n.getAttribute(g), i = Q(n), a = t(n), { key: o } = e, s = X.current.draft, c = (t) => {
+			e.preventDefault(), !T && (W({
+				type: r,
+				buffer: ""
+			}), Y(t, "keyboard", e));
+		};
+		if (o === "ArrowUp" || o === "ArrowDown") return c(l(s, r, o === "ArrowUp" ? 1 : -1, L, J));
+		if (o === "PageUp" || o === "PageDown") return c(l(s, r, (o === "PageUp" ? 1 : -1) * de[r], L, J));
+		if (o === "Home" || o === "End") {
+			let e = d(r, s, L);
+			return c({
+				...s,
+				[r]: o === "Home" ? e.min : e.max
+			});
+		}
+		if (o === "ArrowLeft" || o === "ArrowRight") {
+			e.preventDefault(), Z(i + (o === "ArrowRight" === a ? -1 : 1));
+			return;
+		}
+		if (o === "Backspace" || o === "Delete") {
+			if (e.preventDefault(), T) return;
+			let t = X.current.editing?.type === r ? X.current.editing.buffer : "";
+			if (t.length > 1) {
+				let n = t.slice(0, -1);
+				W({
+					type: r,
+					buffer: n
+				}), Y({
+					...s,
+					[r]: Number(n)
+				}, "keyboard", e);
+			} else s[r] === void 0 ? o === "Backspace" && Z(i - 1) : (W({
+				type: r,
+				buffer: ""
+			}), Y({
+				...s,
+				[r]: void 0
+			}, "keyboard", e));
+			return;
+		}
+		if (o === "Enter") {
+			e.preventDefault(), K.current?.form?.requestSubmit();
+			return;
+		}
+		o === "Unidentified" || o === "Process" || e.ctrlKey || e.metaKey || e.altKey || o.length !== 1 || (e.preventDefault(), T || Ie(n, r, o, e));
+	});
+	p(() => {
+		let e = G.current;
+		if (!e) return;
+		let t = (e) => {
+			let t = e.target?.closest(`[${g}]`);
+			if (!t || (e.preventDefault(), w || T)) return;
+			let n = t.getAttribute(g);
+			if (e.inputType.startsWith("delete")) {
+				t.dispatchEvent(new KeyboardEvent("keydown", {
+					key: "Backspace",
+					bubbles: !0,
+					cancelable: !0
+				}));
+				return;
+			}
+			for (let r of e.data ?? "") Ie(t, n, r, e);
+		};
+		return e.addEventListener("beforeinput", t), () => e.removeEventListener("beforeinput", t);
+	});
+	let Re = r((e) => {
+		if (e.preventDefault(), w || T) return;
+		let t = v === "datetime" ? F ? "instant" : "datetime" : v, n = ce(e.clipboardData.getData("text"), {
+			locale: P,
+			kind: t,
+			zone: F ?? N.zone
+		});
+		n && Y(f(n, L, F), "paste", e);
+	});
+	p(() => {
+		let e = K.current?.form;
+		if (!e) return;
+		let t = (e) => X.current.commit(f(be, L, F), "reset", e);
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}), p(() => {
+		Oe && Z(0);
+	}, []);
+	let ze = B !== null && (x != null && ie(B, x) < 0 || S != null && ie(B, S) > 0), Be = B !== null && v !== "time" && C ? re(B, { zone: F ?? N.zone }) : null, $ = we ?? (ze || Be !== null && C(Be)), Ve = v === "time" ? [] : ee(P), He = typeof O == "string" ? O : void 0, Ue = ue(R)[0], We = v === "datetime" && F && (Ee ?? F !== N.readerZone) ? c(F, {
+		locale: P,
+		style: "short",
+		at: B ?? void 0
+	}) : null;
+	return /* @__PURE__ */ ve(_e, { children: [O !== void 0 && /* @__PURE__ */ h(n, {
+		component: "dateField.label",
+		display: "block",
+		mb: 1.5,
+		fontSize: 14,
+		id: Pe,
+		props: { onClick: () => Z(0) },
+		children: O
+	}), /* @__PURE__ */ ve(n, {
+		ref: (e) => {
+			G.current = e, typeof _ == "function" ? _(e) : _ && (_.current = e);
+		},
+		component: "dateField",
+		display: "inline-flex",
+		ai: "center",
+		position: "relative",
+		cursor: "text",
+		css: {
+			fontVariantNumeric: "tabular-nums",
+			unicodeBidi: "isolate"
+		},
+		...M,
+		variant: [M.variant, {
+			disabled: w,
+			invalid: $
+		}],
+		id: q,
+		props: {
+			role: "group",
+			"aria-labelledby": [Pe, Te].filter(Boolean).join(" ") || void 0,
+			"aria-describedby": k,
+			"aria-disabled": w || void 0,
+			"aria-invalid": $ || void 0,
+			...je,
+			onKeyDown: Le,
+			onPaste: Re,
+			onPointerDown: (e) => {
+				if (e.target !== e.currentTarget || w) return;
+				e.preventDefault();
+				let t = ue(R).findIndex((e) => X.current.draft[e] === void 0);
+				Z(t === -1 ? 0 : t);
+			}
+		},
+		children: [
+			R.map((e, t) => {
+				if (e.type === "literal") return /* @__PURE__ */ h(n, {
+					component: "dateField.literal",
+					whiteSpace: "pre",
+					props: { "aria-hidden": !0 },
+					children: e.text
+				}, t);
+				let r = e.type, i = d(r, H, L), a = H[r], o = a === void 0, s = U?.type === r ? U.buffer : "", c = oe(r, H, s, P), ee = o ? ke : r === "month" ? `${a} – ${Ve[a - 1]}` : r === "dayPeriod" ? c : String(a);
+				return /* @__PURE__ */ h(n, {
+					component: "dateField.segment",
+					display: "inline-block",
+					px: .5,
+					borderRadius: 1,
+					textAlign: "end",
+					whiteSpace: "nowrap",
+					variant: {
+						placeholder: o,
+						disabled: w
+					},
+					id: `${q}-${r}`,
+					props: {
+						[g]: r,
+						role: "spinbutton",
+						tabIndex: w ? -1 : Ae,
+						contentEditable: !w && !T,
+						suppressContentEditableWarning: !0,
+						spellCheck: !1,
+						autoCorrect: "off",
+						autoCapitalize: "off",
+						inputMode: r === "dayPeriod" ? "text" : "numeric",
+						enterKeyHint: "next",
+						"aria-label": He ? `${te(r, P)}, ${He}` : te(r, P),
+						"aria-valuemin": i.min,
+						"aria-valuemax": i.max,
+						"aria-valuenow": a ?? J[r] ?? i.min,
+						"aria-valuetext": ee,
+						"aria-readonly": T || void 0,
+						"aria-disabled": w || void 0,
+						"aria-invalid": $ || void 0,
+						"aria-describedby": r === Ue ? k : void 0,
+						onFocus: () => W({
+							type: r,
+							buffer: ""
+						}),
+						onBlur: () => W(null)
+					},
+					children: c
+				}, t);
+			}),
+			We && /* @__PURE__ */ h(n, {
+				component: "dateField.zone",
+				ms: 2,
+				fontSize: 13,
+				whiteSpace: "nowrap",
+				children: We
+			}),
+			De,
+			D !== void 0 || E ? /* @__PURE__ */ h(me, { children: E ? /* @__PURE__ */ h(n, {
+				tag: "input",
+				ref: K,
+				component: "dateField.validation",
+				required: !0,
+				disabled: w,
+				props: {
+					type: "text",
+					name: D,
+					value: B ?? "",
+					tabIndex: -1,
+					"aria-hidden": !0,
+					onChange: () => {},
+					onFocus: () => Z(0)
+				}
+			}) : /* @__PURE__ */ h("input", {
+				ref: K,
+				type: "hidden",
+				name: D,
+				value: B ?? "",
+				disabled: w
+			}) }) : null
+		]
+	})] });
+}
+var v = e(_, "DateField");
+//#endregion
+export { v as default };

package/components/datePicker.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../placement.cjs"),i=require("../dates.cjs"),a=require("../date-math.cjs"),o=require("../date-input.cjs"),s=require("./svg.cjs"),c=require("../date-environment.cjs"),l=require("./calendar.cjs"),u=require("../layer.cjs"),d=require("./overlay.cjs"),f=require("./dateField.cjs");let p=require("react"),m=require("react/jsx-runtime");function h(){return(0,m.jsx)(s.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,m.jsx)(s.Path,{d:`M3 3.5h10a1 1 0 0 1 1 1V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1ZM2 7h12M5.5 2v3M10.5 2v3`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function g(){return(0,m.jsx)(s.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,m.jsx)(s.Path,{d:`M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM8 5v3l2 1.5`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`,strokeLinejoin:`round`})})}function _(){return(0,m.jsx)(s.Svg,{viewBox:`0 0 16 16`,width:`0.875rem`,height:`0.875rem`,props:{fill:`none`},children:(0,m.jsx)(s.Path,{d:`m4.5 4.5 7 7m0-7-7 7`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function v(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function y(e){let[i,a]=(0,p.useState)(null),o=e.ref,s=(0,p.useCallback)(e=>{a(e),v(o,e)},[o]),c=e=>{if(!e||e.contains(document.activeElement)&&document.activeElement!==e)return;let t=[`[data-date][tabindex="0"]`,`[role="option"][tabindex="0"]`,`button:not([disabled])`].map(t=>e.querySelector(t)).find(Boolean),n=e.querySelector(`[role="listbox"]`),r=n?.querySelector(`[role="option"][tabindex="0"]`);n&&r&&(n.scrollTop=r.offsetTop-n.clientHeight/2+r.offsetHeight/2),(t??e).focus({preventScroll:!0})},l=n.a(e=>c(e)),{platform:f,isOpen:h,id:g,setPanel:_,setOpen:y,trigger:b,triggerElement:x,panelElement:S}=u.t({haspopup:`dialog`,idPrefix:`date-picker`,open:e.open,defaultOpen:e.defaultOpen,onOpenChange:e.onOpenChange,onOpened:l,onClosing:(e,t)=>{e&&t?.focus()}}),C=r.t({side:e.side,align:e.align,offset:1,flip:!0,anchor:i});return(0,p.useEffect)(()=>{h&&c(S)},[h,S]),{attachTrigger:b.ref,triggerAttributes:b.props,closeOnChoice:e=>{x?.focus(),y(!1,{reason:`select`,event:e})},id:g,attachField:s,panel:n=>{let r={role:`dialog`,"aria-label":e.label,tabIndex:-1};return f?(0,m.jsx)(t.default,{ref:_,component:`popover`,variant:{topLayer:!0},p:3,...C.layerProps,id:g,props:{popover:`auto`,...r},children:h?n:null}):h&&(0,m.jsx)(d.default,{contentRef:_,anchor:i,side:e.side,align:e.align,offset:1,component:`popover`,p:3,id:g,props:r,children:n})}}}function b(e){let{value:r,step:a,locale:s,hourCycle:c,onSelect:l,label:u}=e,d=(0,p.useMemo)(()=>o.l(a),[a]),f=o.s(r,a),h=Math.max(0,f?d.indexOf(f):d.indexOf(`09:00:00`)),g=n.t({count:d.length,defaultActiveIndex:h,loop:!1,onSelect:(e,t)=>l(d[e],t)});return(0,m.jsx)(t.default,{component:`datePicker.times`,position:`relative`,display:`flex`,d:`column`,gap:.5,maxHeight:72,overflowY:`auto`,ps:2,bs:1,props:{role:`listbox`,"aria-label":u,onKeyDown:g.onKeyDown},children:d.map((e,n)=>(0,m.jsx)(t.default,{component:`datePicker.time`,variant:{selected:e===f},px:3,py:1.5,borderRadius:2,fontSize:14,textAlign:`start`,whiteSpace:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},props:{role:`option`,"aria-selected":e===f,...g.itemProps(n),onClick:t=>l(e,t)},children:i.t(e,{locale:s,hour:`numeric`,minute:`2-digit`,hourCycle:c===void 0?void 0:c===12?`h12`:`h23`})},e))})}function x(e){return(0,m.jsx)(t.default,{component:`datePicker.presets`,display:`flex`,d:`column`,gap:.5,pe:2,be:1,props:{role:`group`},children:e.presets.map(n=>(0,m.jsx)(t.default,{tag:`button`,component:`datePicker.preset`,variant:{selected:e.isSelected(n.value)},px:3,py:1.5,borderRadius:2,fontSize:14,textAlign:`start`,whiteSpace:`nowrap`,props:{type:`button`,onClick:t=>e.onSelect(n.value,t)},children:n.label},n.label))})}function S(e,r){let{type:o=`date`,value:s,defaultValue:u=null,onValueChange:d,zone:p,locale:v,hourCycle:S,granularity:C,disambiguation:w,min:T,max:E,isDateUnavailable:D,disabled:O=!1,readOnly:k=!1,required:ee,invalid:te,name:ne,label:A,labelledBy:re,describedBy:ie,open:j,defaultOpen:ae,onOpenChange:oe,closeOnSelect:M=!0,firstDayOfWeek:se,weekNumbers:ce,side:le=`bottom`,align:N=`start`,clearable:ue=!1,triggerLabel:P,clearLabel:F=`Clear`,tabIndex:I,step:L=30,defaultTime:de=`00:00`,presets:R,showZone:fe,...z}=e,B=c.n({locale:v,zone:p===`none`?void 0:p}),{locale:V}=B,H=o===`datetime`&&p!==`none`?B.zone:null,U=H??B.zone,[W,G]=n.i({value:s,defaultValue:u,onChange:(e,t)=>d?.(e,{...t,...a.x(e,U)})}),K=P??(o===`time`?`Choose time`:`Choose date`),q=typeof A==`string`?A:K,{attachTrigger:pe,triggerAttributes:J,closeOnChoice:Y,attachField:X,panel:Z}=y({ref:r,open:j,defaultOpen:ae,onOpenChange:oe,side:le,align:N,label:q}),Q=W&&o!==`time`?a.O(W,{zone:U}):null,me=W&&o!==`date`?a.A(W,{zone:U}):null,he=W?i.t(W,{locale:V,zone:U,...o===`date`?{dateStyle:`medium`}:o===`time`?{timeStyle:`short`}:{dateStyle:`medium`,timeStyle:`short`}}):``,$=Y,ge=(e,t)=>a.r(e,t,H?{zone:H,disambiguation:w}:{}),_e=(e,t)=>{e&&(o===`date`?(G(e,{reason:`select`,event:t}),M&&$(t)):G(ge(e,me??de),{reason:`select`,event:t}))},ve=(e,t)=>{G(o===`time`?e:ge(Q??a.N(U),e),{reason:`select`,event:t}),M&&$(t)},ye=(0,m.jsx)(t.default,{tag:`button`,ref:pe,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,ms:2,me:-1.5,borderRadius:1.5,disabled:O||k,props:{type:`button`,"aria-label":he?`${K}, ${he}`:K,tabIndex:I,...J},children:o===`time`?(0,m.jsx)(g,{}):(0,m.jsx)(h,{})}),be=ue&&W&&!O&&!k&&(0,m.jsx)(t.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,ms:1,borderRadius:999,props:{type:`button`,"aria-label":F,tabIndex:I,onClick:e=>G(null,{reason:`clear`,event:e})},children:(0,m.jsx)(_,{})});return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(f.default,{ref:X,...z,type:o,value:W,onValueChange:(e,t)=>G(e,{reason:t.reason,event:t.event}),zone:p,locale:v,hourCycle:S,granularity:C,disambiguation:w,min:T,max:E,isDateUnavailable:D,disabled:O,readOnly:k,required:ee,invalid:te,name:ne,label:A,labelledBy:re,describedBy:ie,showZone:fe,tabIndex:I,end:(0,m.jsxs)(m.Fragment,{children:[be,ye]})}),Z((0,m.jsxs)(t.default,{display:`flex`,gap:3,ai:`stretch`,children:[R&&R.length>0&&(0,m.jsx)(x,{presets:R,isSelected:e=>W!==null&&a.i(e,W,{zone:U})===0,onSelect:(e,t)=>{G(e,{reason:`preset`,event:t}),M&&$(t)}}),o!==`time`&&(0,m.jsx)(l.default,{value:Q,onValueChange:(e,t)=>_e(e,t.event),min:T?a.O(T,{zone:U}):void 0,max:E?a.O(E,{zone:U}):void 0,isDateUnavailable:D,locale:v,zone:p===`none`?void 0:p,firstDayOfWeek:se,weekNumbers:ce}),o!==`date`&&(0,m.jsx)(b,{value:me,step:L,locale:V,hourCycle:S,label:o===`time`?q:`Time`,onSelect:ve})]}))]})}function C(e,r){let{value:o,defaultValue:s=null,onValueChange:u,locale:d,min:g,max:v,isDateUnavailable:b,disabled:S=!1,readOnly:C=!1,required:w,invalid:T,startName:E,endName:D,label:O,labelledBy:k,describedBy:ee,startLabel:te=`Start date`,endLabel:ne=`End date`,open:A,defaultOpen:re,onOpenChange:ie,closeOnSelect:j=!0,firstDayOfWeek:ae,weekNumbers:oe,months:M=2,side:se=`bottom`,align:ce=`start`,clearable:le=!1,triggerLabel:N=`Choose dates`,clearLabel:ue=`Clear`,tabIndex:P,presets:F,props:I,...L}=e,{locale:de}=c.n({locale:d}),[R,fe]=n.i({value:o,defaultValue:s,onChange:u}),[z,B]=(0,p.useState)({start:R?.start??null,end:R?.end??null,source:R}),{start:V,end:H}=z;z.source!==R&&(V=R?.start??null,H=R?.end??null,B({start:V,end:H,source:R}));let{attachTrigger:U,triggerAttributes:W,closeOnChoice:G,id:K,attachField:q,panel:pe}=y({ref:r,open:A,defaultOpen:re,onOpenChange:ie,side:se,align:ce,label:typeof O==`string`?O:N}),J=R?i.n(R.start,R.end,{locale:de}):``,Y=V!==null&&H!==null&&a.i(V,H)>0,X=(e,t,n,r)=>{let i=e&&t&&a.i(e,t)<=0?{start:e,end:t}:null;B({start:e,end:t,source:i}),fe(i,{reason:n,event:r})},Z=G,Q={locale:d,min:g,max:v,isDateUnavailable:b,disabled:S,readOnly:C,required:w,component:`datePicker.part`,px:0,py:0,tabIndex:P};return(0,m.jsxs)(m.Fragment,{children:[O!==void 0&&(0,m.jsx)(t.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:`${K}-label`,children:O}),(0,m.jsxs)(t.default,{ref:q,component:`dateField`,display:`inline-flex`,ai:`center`,gap:2,px:3,py:2,...L,variant:[L.variant,{disabled:S,invalid:T??Y}],props:{role:`group`,"aria-labelledby":[O===void 0?void 0:`${K}-label`,k].filter(Boolean).join(` `)||void 0,"aria-invalid":(T??Y)||void 0,"aria-describedby":ee,...I},children:[(0,m.jsx)(f.default,{...Q,value:V,onValueChange:(e,t)=>X(e,H,t.reason,t.event),name:E,props:{"aria-label":te},invalid:T??Y}),(0,m.jsx)(t.default,{component:`dateField.literal`,props:{"aria-hidden":!0},children:`–`}),(0,m.jsx)(f.default,{...Q,value:H,onValueChange:(e,t)=>X(V,e,t.reason,t.event),name:D,props:{"aria-label":ne},invalid:T??Y}),le&&R&&!S&&!C&&(0,m.jsx)(t.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,borderRadius:999,props:{type:`button`,"aria-label":ue,tabIndex:P,onClick:e=>X(null,null,`clear`,e)},children:(0,m.jsx)(_,{})}),(0,m.jsx)(t.default,{tag:`button`,ref:U,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,me:-1.5,borderRadius:1.5,disabled:S||C,props:{type:`button`,"aria-label":J?`${N}, ${J}`:N,tabIndex:P,...W},children:(0,m.jsx)(h,{})})]}),pe((0,m.jsxs)(t.default,{display:`flex`,gap:3,ai:`stretch`,children:[F&&F.length>0&&(0,m.jsx)(x,{presets:F,isSelected:e=>R!==null&&e.start===R.start&&e.end===R.end,onSelect:(e,t)=>{X(e.start,e.end,`preset`,t),j&&Z(t)}}),(0,m.jsx)(l.default,{mode:`range`,months:M,value:R,defaultFocusedDate:V??void 0,onValueChange:(e,t)=>{X(e?.start??null,e?.end??null,`select`,t.event),j&&e&&t.event&&Z(t.event)},min:g,max:v,isDateUnavailable:b,locale:d,firstDayOfWeek:ae,weekNumbers:oe})]}))]})}var w=e.f(S,`DatePicker`),T=e.f(C,`DateRangePicker`);exports.DateRangePicker=T,exports.default=w;

package/components/datePicker.d.ts

@@ -0,0 +1,120 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { DateChangeDetails, DateChangeReason } from '../react/date/dateChange';
+import { PopoverReason } from '../react/popover/usePopoverLayer';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { AnchorAlign, AnchorSide } from '../utils/anchor/anchorUtils';
+import { FieldGranularity } from '../utils/date/fieldModel';
+import { Disambiguation, ZoneInput } from '../utils/date/zones';
+import { DateRange } from './calendar';
+export type { DateRange } from './calendar';
+export type { DateChangeDetails, DateChangeHandler, DateChangeReason } from '../react/date/dateChange';
+/** Why the panel opened or closed: the layer's four, and `select` — a value was chosen and closed it. */
+export type DatePickerOpenReason = PopoverReason | 'select';
+/** A shortcut beside the calendar: a label and the value it sets. */
+export interface DatePreset<TValue = string> {
+    label: string;
+    value: TValue;
+}
+type PickerBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'onChange' | 'disabled' | 'required' | 'invalid' | 'placeholder' | 'defaultValue' | 'readOnly' | 'open' | 'flip'>;
+interface SharedProps<TKey extends keyof ComponentsAndVariants> extends PickerBoxProps<TKey> {
+    /** The language of the field, the calendar and the times. Default the reader's. */
+    locale?: string;
+    /** The earliest value that is valid, and the first day the calendar offers. */
+    min?: string | null;
+    /** The latest. */
+    max?: string | null;
+    /** Days nobody can choose. */
+    isDateUnavailable?: (date: string) => boolean;
+    /** Not editable, not focusable and not openable. */
+    disabled?: boolean;
+    /** Focusable and read out, but not editable, and the button does not open. */
+    readOnly?: boolean;
+    /** The form is not valid until it is filled in — the browser's own check. */
+    required?: boolean;
+    /** Marks the value invalid whatever the bounds say. Default: invalid when out of bounds or unavailable. */
+    invalid?: boolean;
+    /** The picker's visible name, above the field. */
+    label?: React.ReactNode;
+    /** Names the field after an element already on the page, instead of `label`. */
+    labelledBy?: string;
+    /** An element that describes the field — a hint, an error. */
+    describedBy?: string;
+    /** Whether the panel is open. Controlled. */
+    open?: boolean;
+    /** Whether it starts open, when the picker owns that itself. */
+    defaultOpen?: boolean;
+    /** Fires with the new state and why — the layer's four reasons, and `'select'` when choosing closed it. */
+    onOpenChange?: ChangeHandler<boolean, DatePickerOpenReason>;
+    /** Whether choosing closes the panel. Default `true`; a date-time closes once its time is chosen. */
+    closeOnSelect?: boolean;
+    /** The day the week starts on, 0 for Sunday. Default the locale's. */
+    firstDayOfWeek?: number;
+    /** ISO week numbers down the calendar's side. */
+    weekNumbers?: boolean;
+    /** Which side of the field the panel opens on. Default `'bottom'`. */
+    side?: AnchorSide;
+    /** Which of the field's edges it lines up with. Default `'start'`. */
+    align?: AnchorAlign;
+    /** A button inside the field that empties it. */
+    clearable?: boolean;
+    /** The calendar button's name. Default `'Choose date'`, or `'Choose time'`. */
+    triggerLabel?: string;
+    /** The clear button's name. Default `'Clear'`. */
+    clearLabel?: string;
+    /** Every segment's and button's tab index. Default `0`; `-1` keeps the picker out of the page's tab order, which a grid cell wants. */
+    tabIndex?: number;
+}
+export interface DatePickerProps<TKey extends keyof ComponentsAndVariants = 'dateField'> extends SharedProps<TKey> {
+    /** A day (`'date'`, default), a time of day (`'time'`), or both (`'datetime'`). */
+    type?: 'date' | 'time' | 'datetime';
+    /** Controlled value, an ISO string of the picker's kind — see `DateField`. */
+    value?: string | null;
+    /** The value it starts with when the picker owns its state. */
+    defaultValue?: string | null;
+    /** Fires with the value and its readings — `utc`, the reader's `local` wall clock, a `Date`. */
+    onValueChange?: ChangeHandler<string | null, DateChangeReason, DateChangeDetails>;
+    /** Whose wall clock a date-time is on. Default `'local'`; `'none'` for no zone at all. */
+    zone?: ZoneInput | 'none';
+    /** A 12- or 24-hour clock, in the field and the list of times. Default the locale's. */
+    hourCycle?: 12 | 24;
+    /** Whether a time is edited to the minute (default) or the second. */
+    granularity?: FieldGranularity;
+    /** What a wall-clock time a zone skips or repeats means. Default `'compatible'`. */
+    disambiguation?: Disambiguation;
+    /** What the value posts under in a form. */
+    name?: string;
+    /** Minutes between the times the list offers. Default 30. */
+    step?: number;
+    /** The time a day picked before any time takes. Default `'00:00'`. */
+    defaultTime?: string;
+    /** Shortcuts beside the calendar — `{ label: 'Today', value: today() }`. */
+    presets?: readonly DatePreset[];
+    /** Whether a date-time names its zone after the time. Default: when the zone is not the reader's own. */
+    showZone?: boolean;
+}
+export interface DateRangePickerProps<TKey extends keyof ComponentsAndVariants = 'dateField'> extends SharedProps<TKey> {
+    /** Controlled value: both ends, `YYYY-MM-DD`, or `null`. */
+    value?: DateRange | null;
+    /** The span it starts with when the picker owns its value. */
+    defaultValue?: DateRange | null;
+    /** Fires once both ends are filled in and in order, and with `null` when either is emptied. */
+    onValueChange?: ChangeHandler<DateRange | null, DateChangeReason>;
+    /** What the start posts under in a form. */
+    startName?: string;
+    /** What the end posts under. */
+    endName?: string;
+    /** The names a screen reader gives the two fields. Default `'Start date'` and `'End date'`. */
+    startLabel?: string;
+    /** The end field's name. Default `'End date'`. */
+    endLabel?: string;
+    /** Months side by side in the panel. Default 2. */
+    months?: 1 | 2 | 3;
+    /** Shortcuts beside the calendar — `{ label: 'This week', value: { start, end } }`. */
+    presets?: readonly DatePreset<DateRange>[];
+}
+declare const DateRangePicker: <TKey extends keyof ComponentsAndVariants = "dateField">(props: DateRangePickerProps<TKey> & RefAttributes<HTMLDivElement>) => React.ReactNode;
+export { DateRangePicker };
+declare const _default: <TKey extends keyof ComponentsAndVariants = "dateField">(props: DatePickerProps<TKey> & RefAttributes<HTMLDivElement>) => React.ReactNode;
+export default _default;