@box-kite/react 2.2.4 → 2.2.6

package/client.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react-dom"),c=require("react/jsx-runtime");function l(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.l(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var u=r.t;function d(e,n){let{classNames:r,signature:i,styleElements:a}=t.l(e,n);return u(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:a}}function f(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return u(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var p;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().getStyleTag()}e.getStyleTag=i;function a(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=a;function s(e){(0,o.getDefaultEngine)().configure(e)}e.configure=s})(p||={});var m=`[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 h(e){if(typeof e.createContext!=`function`)throw Error(m)}h(a.default);var g=a.default.createContext({theme:``,setTheme:()=>{}});function _(e){let{children:t,theme:n,use:l=`local`,storageKey:u,globalStyles:d,viewTransition:p}=e,m=f(l===`global`?d:void 0,`html`),[h,_]=(0,a.useState)(n??o.defaultThemeName),[v,y]=(0,a.useState)(n!==void 0),b=(0,a.useRef)(null),x=(0,a.useRef)(h),S=(0,a.useRef)(null),C=(0,a.useRef)(void 0),w=(0,a.useCallback)(e=>{let t=()=>{e===null?(u&&(0,o.clearStoredTheme)(u),y(!1)):(u&&(0,o.writeStoredTheme)(u,e),_(e),y(!0))};if(p){let e=(0,o.transitionTheme)(()=>(0,s.flushSync)(t),p===`reveal`?`reveal`:`fade`);C.current=e.finished,e.finished.then(()=>C.current=void 0,()=>C.current=void 0)}else t()},[u,p]),T=p===`reveal`;(0,a.useEffect)(()=>T?(0,o.prepareReveal)():void 0,[T]);let[E,D]=(0,a.useState)(n);return n!==E&&(D(n),n===void 0?y(!1):(_(n),y(!0))),(0,a.useLayoutEffect)(()=>{if(v)return;let e=u?(0,o.readStoredTheme)(u):null,t=e??(0,o.getSystemTheme)();if(t!==x.current&&(b.current=t),_(t),e){y(!0);return}return(0,o.watchSystemTheme)(_)},[v,u]),r.t(()=>{h!==x.current&&(S.current??=(0,o.pauseTransitions)())},[h]),(0,a.useLayoutEffect)(()=>{if(x.current=h,b.current!==null&&b.current!==h)return;b.current=null;let e=S.current;S.current=null;let t=l===`global`?(0,o.documentRoot)():null,n=t?(0,o.applyThemeToElement)(t,h):void 0;return e?.(C.current),n},[h,l]),l===`local`?(0,c.jsxs)(g.Provider,{value:{theme:h,setTheme:w},children:[m,(0,c.jsx)(i.default,{className:h,props:{"data-theme":h},children:t})]}):(0,c.jsxs)(g.Provider,{value:{theme:h,setTheme:w},children:[m,t]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(g);return[e,t]}e.useTheme=t})(_||={});var v=_,y=new WeakMap;function b(e){let t=y.get(e);return t||(t=new Map,y.set(e,t)),t}function x(e=!0){let[t]=v.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;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(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=b(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)}},[r,t]),r}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return x}});
+const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react/jsx-runtime"),c=require("react-dom");var l=`[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 u(e){if(typeof e.createContext!=`function`)throw Error(l)}u(a.default);var d=a.default.createContext(void 0);function f({value:e,children:t}){return(0,s.jsx)(d.Provider,{value:e,children:t})}function p(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.u(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var m=r.t;function h(e,n){let{classNames:r,signature:i,styleElements:s}=t.l(e,n,(0,a.useContext)(d));return m(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:s}}function g(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return m(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var _;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().getStyleTag()}e.getStyleTag=i;function a(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=a;function s(e){(0,o.getDefaultEngine)().configure(e)}e.configure=s})(_||={}),u(a.default);var v=a.default.createContext({theme:``,setTheme:()=>{}});function y(e){let{theme:t,use:n=`local`,storageKey:l,globalStyles:u,viewTransition:d,components:p}=e,m=p?(0,s.jsx)(f,{value:p,children:e.children}):e.children,h=g(n===`global`?u:void 0,`html`),[_,y]=(0,a.useState)(t??o.defaultThemeName),[b,x]=(0,a.useState)(t!==void 0),S=(0,a.useRef)(null),C=(0,a.useRef)(_),w=(0,a.useRef)(null),T=(0,a.useRef)(void 0),E=(0,a.useCallback)(e=>{let t=()=>{e===null?(l&&(0,o.clearStoredTheme)(l),x(!1)):(l&&(0,o.writeStoredTheme)(l,e),y(e),x(!0))};if(d){let e=(0,o.transitionTheme)(()=>(0,c.flushSync)(t),d===`reveal`?`reveal`:`fade`);T.current=e.finished,e.finished.then(()=>T.current=void 0,()=>T.current=void 0)}else t()},[l,d]),D=d===`reveal`;(0,a.useEffect)(()=>D?(0,o.prepareReveal)():void 0,[D]);let[O,k]=(0,a.useState)(t);return t!==O&&(k(t),t===void 0?x(!1):(y(t),x(!0))),(0,a.useLayoutEffect)(()=>{if(b)return;let e=l?(0,o.readStoredTheme)(l):null,t=e??(0,o.getSystemTheme)();if(t!==C.current&&(S.current=t),y(t),e){x(!0);return}return(0,o.watchSystemTheme)(y)},[b,l]),r.t(()=>{_!==C.current&&(w.current??=(0,o.pauseTransitions)())},[_]),(0,a.useLayoutEffect)(()=>{if(C.current=_,S.current!==null&&S.current!==_)return;S.current=null;let e=w.current;w.current=null;let t=n===`global`?(0,o.documentRoot)():null,r=t?(0,o.applyThemeToElement)(t,_):void 0;return e?.(T.current),r},[_,n]),n===`local`?(0,s.jsxs)(v.Provider,{value:{theme:_,setTheme:E},children:[h,(0,s.jsx)(i.default,{className:_,props:{"data-theme":_},children:m})]}):(0,s.jsxs)(v.Provider,{value:{theme:_,setTheme:E},children:[h,m]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(v);return[e,t]}e.useTheme=t})(y||={});var b=y,x=new WeakMap;function S(e){let t=x.get(e);return t||(t=new Map,x.set(e,t)),t}function C(e=!0){let[t]=b.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;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(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=S(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)}},[r,t]),r}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return C}});

package/client.mjs

@@ -1,18 +1,36 @@
 import { l as e, u as t } from "./react-shared.mjs";
-import { l as n, t as r } from "./platform.mjs";
+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 { applyThemeToElement as m, clearStoredTheme as h, defaultThemeName as g, documentRoot as _, getDefaultEngine as v, getSystemTheme as y, pauseTransitions as b, prepareReveal as x, readStoredTheme as S, transitionTheme as C, watchSystemTheme as w, writeStoredTheme as T } from "@box-kite/core";
-import { flushSync as E } from "react-dom";
-import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { flushSync as O } from "react-dom";
+//#region src/react/clientRuntime.ts
+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
+A(o);
+var j = o.createContext(void 0);
+//#endregion
+//#region src/react/componentsProvider.tsx
+function M({ value: e, children: t }) {
+	return /* @__PURE__ */ E(j.Provider, {
+		value: e,
+		children: t
+	});
+}
+//#endregion
 //#region src/react/hooks/useVisibility.ts
-function k(e) {
-	let { node: t = null, event: r = "click", hideOnScroll: i = !1, hideOnResize: a = !1, hideOnEscape: o = !0 } = e ?? {}, [s, c] = p(!1), u = f(null);
+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 r = t ?? u.current;
-			r && !n(e, [r]) && c(!1);
+			let n = t ?? u.current;
+			n && !r(e, [n]) && c(!1);
 		}
 		function l() {
 			c(!1);
@@ -21,7 +39,7 @@ function k(e) {
 			e.key === "Escape" && c(!1);
 		}
 		let f = new AbortController();
-		return s && (window.addEventListener(r, e, f), o && window.addEventListener("keydown", d, f), a && window.addEventListener("resize", l, f), i && 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
 		})), () => {
@@ -30,7 +48,7 @@ function k(e) {
 	}, [
 		t,
 		s,
-		r,
+		n,
 		o,
 		a,
 		i
@@ -42,23 +60,25 @@ function k(e) {
 }
 //#endregion
 //#region src/react/useStyles.ts
-var A = i;
-function j(t, n) {
-	let { classNames: r, signature: i, styleElements: a } = e(t, n);
-	return A(() => {
+var P = i;
+function F(t, n) {
+	let { classNames: r, signature: i, styleElements: a } = e(t, n, c(j));
+	return P(() => {
 		v().flushSync();
 	}, [i ?? t]), {
 		classNames: r,
 		styleElements: a
 	};
 }
-function M(e, n) {
+function I(e, n) {
 	let r = e ? v().addGlobalStyles(e, n) : void 0;
-	return A(() => {
+	return P(() => {
 		v().flushSync();
 	}, [e, n]), t(r);
 }
-var N;
+var L;
+//#endregion
+//#region src/react/theme/themeContext.ts
 (function(e) {
 	function t() {
 		v().flushSync();
@@ -84,97 +104,91 @@ var N;
 		v().configure(e);
 	}
 	e.configure = o;
-})(N ||= {});
-//#endregion
-//#region src/react/clientRuntime.ts
-var P = "[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 F(e) {
-	if (typeof e.createContext != "function") throw Error(P);
-}
-//#endregion
-//#region src/react/theme/themeContext.ts
-F(o);
-var I = o.createContext({
+})(L ||= {}), A(o);
+var R = o.createContext({
 	theme: "",
 	setTheme: () => {}
 });
 //#endregion
 //#region src/react/theme/theme.tsx
-function L(e) {
-	let { children: t, theme: n, use: r = "local", storageKey: o, globalStyles: c, viewTransition: d } = e, v = M(r === "global" ? c : void 0, "html"), [k, A] = p(n ?? g), [j, N] = p(n !== void 0), P = f(null), F = f(k), L = f(null), R = f(void 0), z = s((e) => {
+function z(e) {
+	let { theme: t, use: n = "local", storageKey: r, globalStyles: o, viewTransition: c, components: d } = e, v = d ? /* @__PURE__ */ E(M, {
+		value: d,
+		children: e.children
+	}) : e.children, k = I(n === "global" ? o : void 0, "html"), [A, j] = p(t ?? g), [N, P] = p(t !== void 0), F = f(null), L = f(A), z = f(null), B = f(void 0), V = s((e) => {
 		let t = () => {
-			e === null ? (o && h(o), N(!1)) : (o && T(o, e), A(e), N(!0));
+			e === null ? (r && h(r), P(!1)) : (r && T(r, e), j(e), P(!0));
 		};
-		if (d) {
-			let e = C(() => E(t), d === "reveal" ? "reveal" : "fade");
-			R.current = e.finished, e.finished.then(() => R.current = void 0, () => R.current = void 0);
+		if (c) {
+			let e = C(() => O(t), c === "reveal" ? "reveal" : "fade");
+			B.current = e.finished, e.finished.then(() => B.current = void 0, () => B.current = void 0);
 		} else t();
-	}, [o, d]), B = d === "reveal";
-	l(() => B ? x() : void 0, [B]);
-	let [V, H] = p(n);
-	return n !== V && (H(n), n === void 0 ? N(!1) : (A(n), N(!0))), u(() => {
-		if (j) return;
-		let e = o ? S(o) : null, t = e ?? y();
-		if (t !== F.current && (P.current = t), A(t), e) {
-			N(!0);
+	}, [r, c]), H = c === "reveal";
+	l(() => H ? x() : void 0, [H]);
+	let [U, W] = p(t);
+	return t !== U && (W(t), t === void 0 ? P(!1) : (j(t), P(!0))), u(() => {
+		if (N) return;
+		let e = r ? S(r) : null, t = e ?? y();
+		if (t !== L.current && (F.current = t), j(t), e) {
+			P(!0);
 			return;
 		}
-		return w(A);
-	}, [j, o]), i(() => {
-		k !== F.current && (L.current ??= b());
-	}, [k]), u(() => {
-		if (F.current = k, P.current !== null && P.current !== k) return;
-		P.current = null;
-		let e = L.current;
-		L.current = null;
-		let t = r === "global" ? _() : null, n = t ? m(t, k) : void 0;
-		return e?.(R.current), n;
-	}, [k, r]), r === "local" ? /* @__PURE__ */ O(I.Provider, {
+		return w(j);
+	}, [N, r]), i(() => {
+		A !== L.current && (z.current ??= b());
+	}, [A]), u(() => {
+		if (L.current = A, F.current !== null && F.current !== A) return;
+		F.current = null;
+		let e = z.current;
+		z.current = null;
+		let t = n === "global" ? _() : null, r = t ? m(t, A) : void 0;
+		return e?.(B.current), r;
+	}, [A, n]), n === "local" ? /* @__PURE__ */ D(R.Provider, {
 		value: {
-			theme: k,
-			setTheme: z
+			theme: A,
+			setTheme: V
 		},
-		children: [v, /* @__PURE__ */ D(a, {
-			className: k,
-			props: { "data-theme": k },
-			children: t
+		children: [k, /* @__PURE__ */ E(a, {
+			className: A,
+			props: { "data-theme": A },
+			children: v
 		})]
-	}) : /* @__PURE__ */ O(I.Provider, {
+	}) : /* @__PURE__ */ D(R.Provider, {
 		value: {
-			theme: k,
-			setTheme: z
+			theme: A,
+			setTheme: V
 		},
-		children: [v, t]
+		children: [k, v]
 	});
 }
 (function(e) {
 	function t() {
-		let { theme: e, setTheme: t } = c(I);
+		let { theme: e, setTheme: t } = c(R);
 		return [e, t];
 	}
 	e.useTheme = t;
-})(L ||= {});
-var R = L, z = /* @__PURE__ */ new WeakMap();
-function B(e) {
-	let t = z.get(e);
-	return t || (t = /* @__PURE__ */ new Map(), z.set(e, t)), t;
+})(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 V(e = !0) {
-	let [t] = R.useTheme(), n = d(() => {
+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 u(() => {
-		if (!t || !n) return;
-		let e = B(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);
+		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);
 		};
-	}, [n, t]), n;
+	}, [r, t]), r;
 }
 //#endregion
-export { k as a, j as i, R as n, N as r, V 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;