@box-kite/react 2.2.5 → 2.2.7

package/client.mjs

@@ -1,45 +1,45 @@
 import { l as e, u as t } from "./react-shared.mjs";
-import { n, t as r, u as i } from "./platform.mjs";
-import { n as a, t as o } from "./effects.mjs";
-import s from "./box.mjs";
-import c, { useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { applyThemeToElement as g, clearStoredTheme as _, defaultThemeName as v, documentRoot as y, getDefaultEngine as b, getSystemTheme as x, pauseTransitions as S, prepareReveal as C, readStoredTheme as w, transitionTheme as T, watchSystemTheme as E, writeStoredTheme as D } from "@box-kite/core";
-import { jsx as O, jsxs as k } from "react/jsx-runtime";
-import { flushSync as A } from "react-dom";
+import { t as n, u as r } from "./platform.mjs";
+import { t as i } from "./effects.mjs";
+import a from "./box.mjs";
+import o, { useCallback as s, useContext as c, useEffect as l, useLayoutEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { applyDesignToElement as m, applyThemeToElement as h, clearStoredTheme as g, defaultThemeName as _, documentRoot as v, getDefaultEngine as y, getSystemTheme as b, pauseTransitions as x, prepareReveal as S, readStoredTheme as C, transitionTheme as w, watchSystemTheme as T, writeStoredTheme as E } from "@box-kite/core";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { flushSync as ee } from "react-dom";
 //#region src/react/clientRuntime.ts
-var j = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
-function M(e) {
-	if (typeof e.createContext != "function") throw Error(j);
+var k = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
+function A(e) {
+	if (typeof e.createContext != "function") throw Error(k);
 }
 //#endregion
 //#region src/react/componentsContext.ts
-M(c);
-var N = c.createContext(void 0);
+A(o);
+var j = o.createContext(void 0);
 //#endregion
 //#region src/react/componentsProvider.tsx
-function P({ value: e, children: t }) {
-	return /* @__PURE__ */ O(N.Provider, {
+function M({ value: e, children: t }) {
+	return /* @__PURE__ */ D(j.Provider, {
 		value: e,
 		children: t
 	});
 }
 //#endregion
 //#region src/react/hooks/useVisibility.ts
-function F(e) {
-	let { node: t = null, event: n = "click", hideOnScroll: r = !1, hideOnResize: a = !1, hideOnEscape: o = !0 } = e ?? {}, [s, c] = h(!1), l = m(null);
-	return d(() => {
+function N(e) {
+	let { node: t = null, event: n = "click", hideOnScroll: i = !1, hideOnResize: a = !1, hideOnEscape: o = !0 } = e ?? {}, [s, c] = p(!1), u = f(null);
+	return l(() => {
 		function e(e) {
-			let n = t ?? l.current;
-			n && !i(e, [n]) && c(!1);
+			let n = t ?? u.current;
+			n && !r(e, [n]) && c(!1);
 		}
-		function u() {
+		function l() {
 			c(!1);
 		}
 		function d(e) {
 			e.key === "Escape" && c(!1);
 		}
 		let f = new AbortController();
-		return s && (window.addEventListener(n, e, f), o && window.addEventListener("keydown", d, f), a && window.addEventListener("resize", u, f), r && window.addEventListener("scroll", e, {
+		return s && (window.addEventListener(n, e, f), o && window.addEventListener("keydown", d, f), a && window.addEventListener("resize", l, f), i && window.addEventListener("scroll", e, {
 			signal: f.signal,
 			capture: !0
 		})), () => {
@@ -51,156 +51,175 @@ function F(e) {
 		n,
 		o,
 		a,
-		r
+		i
 	]), [
 		s,
 		c,
-		l
+		u
 	];
 }
 //#endregion
 //#region src/react/useStyles.ts
-var I = o;
-function L(t, n) {
-	let { classNames: r, signature: i, styleElements: a } = e(t, n, u(N));
-	return I(() => {
-		b().flushSync();
+var P = i;
+function F(t, n) {
+	let { classNames: r, signature: i, styleElements: a } = e(t, n, c(j));
+	return P(() => {
+		y().flushSync();
 	}, [i ?? t]), {
 		classNames: r,
 		styleElements: a
 	};
 }
-function R(e, n) {
-	let r = e ? b().addGlobalStyles(e, n) : void 0;
-	return I(() => {
-		b().flushSync();
+function I(e, n) {
+	let r = e ? y().addGlobalStyles(e, n) : void 0;
+	return P(() => {
+		y().flushSync();
 	}, [e, n]), t(r);
 }
-var z;
+var L;
 //#endregion
 //#region src/react/theme/themeContext.ts
 (function(e) {
 	function t() {
-		b().flushSync();
+		y().flushSync();
 	}
 	e.flushSync = t;
 	function n() {
-		b().clear();
+		y().clear();
 	}
 	e.clear = n;
 	function r() {
-		return b().getStyles();
+		return y().getStyles();
 	}
 	e.getStyles = r;
 	function i() {
-		return b().getStyleTag();
+		return y().getStyleTag();
 	}
 	e.getStyleTag = i;
 	function a() {
-		return b().styleElementId;
+		return y().styleElementId;
 	}
 	e.styleElementId = a;
 	function o(e) {
-		b().configure(e);
+		y().configure(e);
 	}
 	e.configure = o;
-})(z ||= {}), M(c);
-var B = c.createContext({
+})(L ||= {}), A(o);
+var R = o.createContext({
 	theme: "",
-	setTheme: () => {}
+	setTheme: () => {},
+	setDesign: () => {}
 });
 //#endregion
 //#region src/react/theme/theme.tsx
-function V(e) {
-	let { theme: t, use: n = "local", storageKey: r, globalStyles: i, viewTransition: a, components: c } = e, u = c ? /* @__PURE__ */ O(P, {
-		value: c,
+function z(e) {
+	let { theme: t, use: n = "local", storageKey: r, globalStyles: o, viewTransition: c, components: y, design: k, designStorageKey: A } = e, j = y ? /* @__PURE__ */ D(M, {
+		value: y,
 		children: e.children
-	}) : e.children, p = R(n === "global" ? i : void 0, "html"), [b, j] = h(t ?? v), [M, N] = h(t !== void 0), F = m(null), I = m(b), L = m(null), z = m(void 0), V = l((e) => {
-		let t = () => {
-			e === null ? (r && _(r), N(!1)) : (r && D(r, e), j(e), N(!0));
-		};
-		if (a) {
-			let e = T(() => A(t), a === "reveal" ? "reveal" : "fade");
-			z.current = e.finished, e.finished.then(() => z.current = void 0, () => z.current = void 0);
-		} else t();
-	}, [r, a]), H = a === "reveal";
-	d(() => H ? C() : void 0, [H]);
-	let [U, W] = h(t);
-	return t !== U && (W(t), t === void 0 ? N(!1) : (j(t), N(!0))), f(() => {
-		if (M) return;
-		let e = r ? w(r) : null, t = e ?? x();
-		if (t !== I.current && (F.current = t), j(t), e) {
-			N(!0);
+	}) : e.children, N = I(n === "global" ? o : void 0, "html"), [P, F] = p(t ?? _), [L, z] = p(t !== void 0), B = f(null), V = f(P), H = f(null), U = f(null), W = f(void 0), G = s((e) => {
+		if (!c) return e();
+		let t = w(() => ee(e), c === "reveal" ? "reveal" : "fade");
+		W.current = t.finished, t.finished.then(() => W.current = void 0, () => W.current = void 0);
+	}, [c]), K = s((e) => G(() => {
+		e === null ? (r && g(r), z(!1)) : (r && E(r, e), F(e), z(!0));
+	}), [r, G]), [q, J] = p(k), [Y, te] = p(k);
+	k !== Y && (te(k), J(k));
+	let X = s((e) => G(() => {
+		U.current ??= x(), A && (e === null ? g : E)(A, e), J(e ?? k);
+	}), [
+		k,
+		A,
+		G
+	]), Z = f(null);
+	u(() => {
+		let e = A ? C(A) : null;
+		e && (Z.current = e, J(e));
+	}, [A]), u(() => {
+		if (Z.current !== null && Z.current !== q) return;
+		Z.current = null;
+		let e = n === "global" && q ? v() : null, t = e ? m(e, q) : void 0;
+		return U.current?.(W.current), U.current = null, t;
+	}, [q, n]);
+	let Q = c === "reveal";
+	l(() => Q ? S() : void 0, [Q]);
+	let [ne, re] = p(t);
+	t !== ne && (re(t), t === void 0 ? z(!1) : (F(t), z(!0))), u(() => {
+		if (L) return;
+		let e = r ? C(r) : null, t = e ?? b();
+		if (t !== V.current && (B.current = t), F(t), e) {
+			z(!0);
 			return;
 		}
-		return E(j);
-	}, [M, r]), o(() => {
-		b !== I.current && (L.current ??= S());
-	}, [b]), f(() => {
-		if (I.current = b, F.current !== null && F.current !== b) return;
-		F.current = null;
-		let e = L.current;
-		L.current = null;
-		let t = n === "global" ? y() : null, r = t ? g(t, b) : void 0;
-		return e?.(z.current), r;
-	}, [b, n]), n === "local" ? /* @__PURE__ */ k(B.Provider, {
-		value: {
-			theme: b,
-			setTheme: V
-		},
-		children: [p, /* @__PURE__ */ O(s, {
-			className: b,
-			props: { "data-theme": b },
-			children: u
+		return T(F);
+	}, [L, r]), i(() => {
+		P !== V.current && (H.current ??= x());
+	}, [P]), u(() => {
+		if (V.current = P, B.current !== null && B.current !== P) return;
+		B.current = null;
+		let e = H.current;
+		H.current = null;
+		let t = n === "global" ? v() : null, r = t ? h(t, P) : void 0;
+		return e?.(W.current), r;
+	}, [P, n]);
+	let $ = d(() => ({
+		theme: P,
+		setTheme: K,
+		design: q,
+		setDesign: X
+	}), [
+		P,
+		K,
+		q,
+		X
+	]);
+	return n === "local" ? /* @__PURE__ */ O(R.Provider, {
+		value: $,
+		children: [N, /* @__PURE__ */ D(a, {
+			className: P,
+			props: {
+				"data-theme": P,
+				"data-design": q
+			},
+			children: j
 		})]
-	}) : /* @__PURE__ */ k(B.Provider, {
-		value: {
-			theme: b,
-			setTheme: V
-		},
-		children: [p, u]
+	}) : /* @__PURE__ */ O(R.Provider, {
+		value: $,
+		children: [N, j]
 	});
 }
 (function(e) {
 	function t() {
-		let { theme: e, setTheme: t } = u(B);
+		let { theme: e, setTheme: t } = c(R);
 		return [e, t];
 	}
 	e.useTheme = t;
-})(V ||= {});
-var H = V, U = /* @__PURE__ */ new WeakMap();
-function W(e) {
-	let t = U.get(e);
-	return t || (t = /* @__PURE__ */ new Map(), U.set(e, t)), t;
+	function n() {
+		let { design: e, setDesign: t } = c(R);
+		return [e, t];
+	}
+	e.useDesign = n;
+})(z ||= {});
+var B = z, V = /* @__PURE__ */ new WeakMap();
+function H(e) {
+	let t = V.get(e);
+	return t || (t = /* @__PURE__ */ new Map(), V.set(e, t)), t;
 }
-function G(e = !0) {
-	let [t] = H.useTheme(), n = p(() => {
+function U(e = !0) {
+	let [t] = B.useTheme(), r = d(() => {
 		if (!e) return null;
-		let t = r();
+		let t = n();
 		if (!t) return null;
-		let n = "box-kite-portal", i = t.getElementById(n);
-		return i || (i = document.createElement("div"), i.id = n, document.body.appendChild(i)), i;
+		let r = "box-kite-portal", i = t.getElementById(r);
+		return i || (i = document.createElement("div"), i.id = r, document.body.appendChild(i)), i;
 	}, [e]);
-	return f(() => {
-		if (!t || !n) return;
-		let e = W(n), r = e.get(t) ?? 0;
-		return e.set(t, r + 1), r === 0 && n.classList.add(t), () => {
-			let r = (e.get(t) ?? 1) - 1;
-			r <= 0 ? (e.delete(t), n.classList.remove(t)) : e.set(t, r);
-		};
-	}, [n, t]), n;
-}
-//#endregion
-//#region src/react/dialog/useScrollLock.ts
-var K = 0;
-function q(e) {
-	let { classNames: t, styleElements: r } = L({ overflow: "hidden" }, !1), i = t.slice(1).join(" ");
-	return a(() => {
-		let t = n();
-		if (!(!e || !t || !i)) return K += 1, t.classList.add(i), () => {
-			--K, K === 0 && t.classList.remove(i);
+	return u(() => {
+		if (!t || !r) return;
+		let e = H(r), n = e.get(t) ?? 0;
+		return e.set(t, n + 1), n === 0 && r.classList.add(t), () => {
+			let n = (e.get(t) ?? 1) - 1;
+			n <= 0 ? (e.delete(t), r.classList.remove(t)) : e.set(t, n);
 		};
-	}, [e, i]), r;
+	}, [r, t]), r;
 }
 //#endregion
-export { L as a, z as i, G as n, F as o, H as r, P as s, q as t };
+export { N as a, F as i, B as n, M as o, L as r, U as t };

package/components/calendar.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../identity.cjs"),i=require("../dates.cjs"),a=require("../date-math.cjs"),o=require("./svg.cjs"),s=require("../date-environment.cjs"),c=require("./visuallyHidden.cjs");let l=require("react"),u=require("react/jsx-runtime");function d(e){let t=i.f(e);return t&&t.kind===`date`?t.fields:null}function f(e){return i.w({...e,...i.V})}function ee(e,t,n){let r={year:e,month:t,day:1},a=i.U(r,-i.Q(i.G(r)-n,7));return Array.from({length:6},(e,r)=>{let o=Array.from({length:7},(e,n)=>{let o=i.U(a,r*7+n);return{date:f(o),day:o.day,outside:o.month!==t}}),s=i.U(a,r*7+i.Q(4-n,7));return{week:i.Z(s).week,days:o}})}function te(e,t,n,r){let a=r.rtl?`ArrowLeft`:`ArrowRight`,o=r.rtl?`ArrowRight`:`ArrowLeft`;switch(t){case a:return i.U(e,1);case o:return i.U(e,-1);case`ArrowDown`:return i.U(e,7);case`ArrowUp`:return i.U(e,-7);case`Home`:return i.U(e,-i.Q(i.G(e)-r.firstDay,7));case`End`:return i.U(e,6-i.Q(i.G(e)-r.firstDay,7));case`PageUp`:return i.W(e,n?-12:-1);case`PageDown`:return i.W(e,n?12:1);default:return null}}function ne(e,t){return t.min!=null&&i.q(e)<i.q(t.min)||t.max!=null&&i.q(e)>i.q(t.max)}function p(e,t){return t.min&&i.q(e)<i.q(t.min)?t.min:t.max&&i.q(e)>i.q(t.max)?t.max:e}function m(e,t){return i.q(e)<=i.q(t)?[e,t]:[t,e]}function re(e,t,n){if(!t||!n)return t&&i.q(e)===i.q(t)?`start`:null;let[r,a]=m(t,n),o=i.q(e);return o===i.q(r)?`start`:o===i.q(a)?`end`:o>i.q(r)&&o<i.q(a)?`middle`:null}function ie(e,t,n){let[r,a]=m(e,t);for(let e=i.q(r);e<=i.q(a);e++)if(n(f(i.U({year:1970,month:1,day:1},e))))return!0;return!1}var ae=`data-date`,h=12;function g(e,t){return e!==null&&t!==null&&i.q(e)===i.q(t)}function _(o){let{mode:_=`single`,value:y,defaultValue:S=null,onValueChange:se,min:ce,max:C,isDateUnavailable:w,locale:le,zone:ue,firstDayOfWeek:de,months:T=1,weekNumbers:E=!1,showOutsideDays:fe=!0,focusedDate:pe,defaultFocusedDate:me,onFocusedDateChange:he,disabled:D=!1,readOnly:ge=!1,autoFocus:_e=!1,label:ve,previousLabel:ye=`Previous`,nextLabel:be=`Next`,props:xe,...Se}=o,O=s.n({locale:le,zone:ue}),{locale:k}=O,A=d(a.N(O.zone)),j=de??i.S(k).firstDay,M=e=>oe(k).format(e),N=_===`range`,P=(0,l.useMemo)(()=>({min:d(ce),max:d(C)}),[ce,C]),[F,Ce]=n.i({value:y,defaultValue:S,onChange:(e,t)=>{se?.(e,N?t:{...t,...a.x(e,O.zone)})}}),I=N?null:d(F),L=N&&F?F:null,[R,z]=(0,l.useState)(null),[we,B]=(0,l.useState)(null),Te=f(p(d(me)??I??d(L?.start)??A,P)),[V,H]=n.i({value:pe,defaultValue:Te,onChange:he}),U=d(V)??A,[W,G]=(0,l.useState)(`day`),[K,q]=(0,l.useState)(()=>v(U)),J=K;(v(U)<K||v(U)>K+T-1)&&(J=v(U)<K?v(U):v(U)-T+1,q(J));let Ee=(0,l.useRef)(null),Y=(0,l.useRef)(_e),De=r.t(`calendar`);(0,l.useEffect)(()=>{Y.current&&(Y.current=!1,Ee.current?.querySelector(`[${ae}="${V}"]`)?.focus())});let Oe=e=>ne(e,P),ke=e=>w?.(f(e))??!1,X=(e,t,n)=>{Y.current=n,H(f(p(e,P)),{reason:t})},Ae=(e,t)=>{if(D||ge||Oe(e)||ke(e))return;if(X(e,`keyboard`,!1),!N){Ce(f(e),{reason:`select`,event:t});return}if(!R){z(e),B(e);return}let[n,r]=m(R,e);z(null),B(null),!(w&&ie(n,r,w))&&Ce({start:f(n),end:f(r)},{reason:`select`,event:t})},je=n.a(t=>{if(D)return;if(t.key===`Enter`||t.key===` `){t.preventDefault(),Ae(U,t);return}if(t.key===`Escape`&&R){t.preventDefault(),t.stopPropagation(),z(null),B(null);return}let n=te(U,t.key,t.shiftKey,{rtl:e.d(t.currentTarget),firstDay:j});n&&(t.preventDefault(),X(n,`keyboard`,!0),R&&B(p(n,P)))}),Me=e=>{W===`day`?(q(J+e*T),X(i.W(U,e*T),`navigate`,!1)):X(i.W(U,e*(W===`month`?12:144)),`navigate`,!1)},Z=Array.from({length:T},(e,t)=>({year:Math.floor((J+t)/12),month:(J+t)%12+1,day:1})),Q=`${De}-title`,Ne=W===`day`&&T>1,Pe=W===`day`?Z.map(e=>i.t(f(e),{locale:k,month:`long`,year:`numeric`})).join(` – `):W===`month`?M(U.year):`${M(b(U.year))} – ${M(b(U.year)+h-1)}`,Fe=i.C(k,`short`),Ie=Fe.some(e=>e.length>4)?i.C(k,`narrow`):Fe,Le=i.C(k,`long`),Re=Array.from({length:7},(e,t)=>(j+t)%7),ze=R?we??R:null,Be=R??d(L?.start),$=R?ze:d(L?.end),Ve=e=>{let n=d(e.date),r=Oe(n),a=ke(n),o=N?re(n,Be,$):null,s=N?o!==null:g(n,I),c=g(n,A),l=g(n,U);return e.outside&&(!fe||T>1)?(0,u.jsx)(t.default,{tag:`td`,component:`calendar.cell`,display:`table-cell`,props:{role:`gridcell`}},e.date):(0,u.jsx)(t.default,{tag:`td`,component:`calendar.cell`,display:`table-cell`,p:0,py:.5,variant:{rangeStart:o===`start`&&$!==null&&!g(Be,$),rangeEnd:o===`end`,rangeMiddle:o===`middle`},props:{role:`gridcell`,"aria-selected":s||void 0,"aria-disabled":r||D||void 0,"aria-current":c?`date`:void 0},children:(0,u.jsx)(t.default,{component:`calendar.day`,display:`flex`,ai:`center`,jc:`center`,width:9,height:9,mx:`auto`,borderRadius:999,fontSize:14,css:{fontVariantNumeric:`tabular-nums`},variant:{today:c,selected:s&&o!==`middle`,outside:e.outside,blocked:r||D,unavailable:a},props:{[ae]:e.date,tabIndex:l&&!r&&!D?0:-1,"aria-label":i.t(e.date,{locale:k,dateStyle:`full`}),onClick:e=>Ae(n,e),onPointerEnter:()=>R&&B(n)},children:M(e.day)})},e.date)},He=(t,n,r,i,a,o)=>{let s=e.d(t.currentTarget),c={ArrowUp:-r,ArrowDown:r,[s?`ArrowRight`:`ArrowLeft`]:-1,[s?`ArrowLeft`:`ArrowRight`]:1};t.key===`Enter`||t.key===` `?(t.preventDefault(),i(o)):t.key in c&&(t.preventDefault(),a(Math.max(0,Math.min(n-1,o+c[t.key])),t.currentTarget.parentElement))},Ue=()=>{let e=i.x(k,`short`),n=b(U.year),r=W===`month`?e.map((e,t)=>({label:e,active:t+1===U.month,current:A.year===U.year&&A.month===t+1})):Array.from({length:h},(e,t)=>({label:M(n+t),active:n+t===U.year,current:A.year===n+t})),a=e=>W===`month`?{...U,month:e+1,day:1}:{...U,year:n+e,day:1},o=e=>{let t=a(e);Y.current=!0,H(f(p({...t,day:Math.min(U.day,28)},P)),{reason:`navigate`}),G(W===`year`?`month`:`day`)},s=(e,t)=>{let n=a(e);H(f({...n,day:Math.min(U.day,28)}),{reason:`keyboard`}),t?.querySelector(`[data-zoom="${e}"]`)?.focus()};return(0,u.jsx)(t.default,{display:`grid`,gridTemplateColumns:3,gap:1,props:{role:`group`,"aria-labelledby":Q},children:r.map((e,n)=>(0,u.jsx)(t.default,{tag:`button`,component:`calendar.zoomItem`,variant:{selected:e.active,today:e.current},py:2,borderRadius:2,disabled:D,props:{type:`button`,"data-zoom":n,tabIndex:e.active?0:-1,"aria-pressed":e.active,onClick:()=>o(n),onKeyDown:e=>He(e,r.length,3,o,s,n)},children:e.label},e.label))})},We=(e,n)=>{let r=ee(e.year,e.month,j),a=i.t(f(e),{locale:k,month:`long`,year:`numeric`});return(0,u.jsxs)(t.default,{tag:`table`,css:{borderCollapse:`collapse`,tableLayout:`fixed`},props:{role:`grid`,"aria-label":T>1?a:void 0,"aria-labelledby":T>1?void 0:Q,"aria-readonly":ge||void 0,onKeyDown:je},children:[(0,u.jsx)(t.default,{tag:`thead`,display:`table-header-group`,children:(0,u.jsxs)(t.default,{tag:`tr`,display:`table-row`,children:[E&&(0,u.jsx)(t.default,{tag:`th`,display:`table-cell`,component:`calendar.weekday`,props:{"aria-hidden":!0}}),Re.map(e=>(0,u.jsx)(t.default,{tag:`th`,display:`table-cell`,component:`calendar.weekday`,pb:1,fontSize:12,props:{scope:`col`,abbr:Le[e]},children:Ie[e]},e))]})}),(0,u.jsx)(t.default,{tag:`tbody`,display:`table-row-group`,children:r.map(e=>(0,u.jsxs)(t.default,{tag:`tr`,display:`table-row`,children:[E&&(0,u.jsx)(t.default,{tag:`td`,display:`table-cell`,component:`calendar.weekNumber`,fontSize:11,textAlign:`center`,props:{role:`rowheader`},children:M(e.week)}),e.days.map(Ve)]},e.days[0].date))})]},n)};return(0,u.jsxs)(t.default,{ref:Ee,component:`calendar`,display:`inline-block`,...Se,variant:[Se.variant,{disabled:D}],props:{role:ve?`group`:void 0,"aria-label":ve,...xe,onPointerLeave:()=>R&&B(R)},children:[(0,u.jsxs)(t.default,{position:`relative`,minHeight:8,mb:2,children:[(0,u.jsx)(t.default,{tag:`button`,component:`calendar.nav`,position:`absolute`,top:0,insetStart:0,display:`inline-flex`,ai:`center`,jc:`center`,width:8,height:8,borderRadius:2,disabled:D,props:{type:`button`,"aria-label":ye,onClick:()=>Me(-1)},children:(0,u.jsx)(x,{direction:-1})}),Ne?(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(t.default,{display:`flex`,gap:4,children:Z.map(e=>(0,u.jsx)(t.default,{flex1:!0,textAlign:`center`,py:1.5,fontSize:14,fontWeight:600,props:{"aria-hidden":!0},children:i.t(f(e),{locale:k,month:`long`,year:`numeric`})},f(e)))}),(0,u.jsx)(c.default,{id:Q,props:{"aria-live":`polite`},children:Pe})]}):(0,u.jsx)(t.default,{display:`flex`,jc:`center`,px:9,children:(0,u.jsx)(t.default,{tag:`button`,component:`calendar.title`,py:1.5,px:3,borderRadius:2,fontSize:14,id:Q,disabled:D||W===`year`,props:{type:`button`,"aria-live":`polite`,onClick:()=>G(W===`day`?`month`:`year`)},children:Pe})}),(0,u.jsx)(t.default,{tag:`button`,component:`calendar.nav`,position:`absolute`,top:0,insetEnd:0,display:`inline-flex`,ai:`center`,jc:`center`,width:8,height:8,borderRadius:2,disabled:D,props:{type:`button`,"aria-label":be,onClick:()=>Me(1)},children:(0,u.jsx)(x,{direction:1})})]}),W===`day`?(0,u.jsx)(t.default,{display:`flex`,gap:4,ai:`start`,children:Z.map(We)}):Ue()]})}function v(e){return e.year*12+e.month-1}var y=new Map;function oe(e){let t=y.get(e);return t||(t=new Intl.NumberFormat(e,{useGrouping:!1}),y.set(e,t)),t}function b(e){return e-(e%h+h)%h}function x({direction:e}){return(0,u.jsx)(o.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,rtl:{flip:`xAxis`},props:{fill:`none`},children:(0,u.jsx)(o.Path,{d:e===1?`M6 3l5 5-5 5`:`M10 3L5 8l5 5`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`})})}var S=_;S.displayName=`Calendar`,exports.default=S;

package/components/calendar.d.ts

@@ -0,0 +1,77 @@
+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 { ZoneInput } from '../utils/date/zones';
+/** A span of days, both ends included, `start` never after `end`. */
+export interface DateRange {
+    start: string;
+    end: string;
+}
+/** Which grid is on show: days, the months of a year, or a run of years. */
+export type CalendarView = 'day' | 'month' | 'year';
+type CalendarBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'onChange' | 'disabled' | 'defaultValue' | 'readOnly'>;
+interface BaseProps<TKey extends keyof ComponentsAndVariants> extends CalendarBoxProps<TKey> {
+    /** The earliest day that can be chosen, `YYYY-MM-DD`. The arrows stop there too. */
+    min?: string | null;
+    /** The latest day that can be chosen. */
+    max?: string | null;
+    /** Days that can be reached but not chosen — a weekend, a holiday. A range is refused across one. */
+    isDateUnavailable?: (date: string) => boolean;
+    /** The language of the month and weekday names, and whose week it is. Default the reader's. */
+    locale?: string;
+    /** Whose "today" is marked. Default the reader's zone. */
+    zone?: ZoneInput;
+    /** The day the week starts on, 0 for Sunday. Default the locale's. */
+    firstDayOfWeek?: number;
+    /** How many months side by side. Default 1. */
+    months?: 1 | 2 | 3;
+    /** A leading column of ISO week numbers. */
+    weekNumbers?: boolean;
+    /** Whether the days that complete the first and last weeks are drawn. Default `true`. */
+    showOutsideDays?: boolean;
+    /** The day the keyboard is on, which decides the month on show. Controlled. */
+    focusedDate?: string;
+    /** Where the keyboard starts when the calendar owns it. Default the value, or today. */
+    defaultFocusedDate?: string;
+    /** Fires when the keyboard or the paging buttons move to another day. */
+    onFocusedDateChange?: ChangeHandler<string, 'keyboard' | 'navigate'>;
+    /** Nothing can be chosen and nothing is focusable. */
+    disabled?: boolean;
+    /** Can be read and navigated, but not chosen in. */
+    readOnly?: boolean;
+    /** Focus the day the keyboard is on, on mount — what a picker's panel wants. */
+    autoFocus?: boolean;
+    /** The calendar's accessible name, which a screen reader hears before the month. */
+    label?: string;
+    /** What the paging buttons are called. Default `'Previous'` and `'Next'`. */
+    /** The previous-page button's name. Default `'Previous'`. */
+    previousLabel?: string;
+    /** The next-page button's name. Default `'Next'`. */
+    nextLabel?: string;
+}
+/** One day at a time, which is the default: the value is a `YYYY-MM-DD` string or `null`. */
+interface SingleProps {
+    /** One day (default), or `'range'` for a start and an end. */
+    mode?: 'single';
+    /** The chosen day, `YYYY-MM-DD`, or `null`. Controlled. */
+    value?: string | null;
+    /** The day it starts with when the calendar owns its value. */
+    defaultValue?: string | null;
+    /** Fires with the day and its readings. */
+    onValueChange?: ChangeHandler<string | null, DateChangeReason, DateChangeDetails>;
+}
+/** A start and an end: the first press anchors the range and the second ends it, whichever way round. */
+interface RangeProps {
+    /** `'range'` is what turns the value into `{ start, end }`. */
+    mode: 'range';
+    /** The chosen span, or `null`. Controlled. */
+    value?: DateRange | null;
+    /** The span it starts with when the calendar owns its value. */
+    defaultValue?: DateRange | null;
+    /** Fires once both ends are chosen, start first whichever was picked first. */
+    onValueChange?: ChangeHandler<DateRange | null, DateChangeReason>;
+}
+export type CalendarProps<TKey extends keyof ComponentsAndVariants = 'calendar'> = BaseProps<TKey> & (SingleProps | RangeProps);
+declare const _default: <TKey extends keyof ComponentsAndVariants = "calendar">(props: CalendarProps<TKey>) => React.ReactNode;
+export default _default;