@box-kite/react 0.0.1 → 2.0.0

package/a11y.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./behavior.cjs"),t=require("./identity.cjs");exports.useControllableState=e.i,exports.useDismiss=e.r,exports.useFocusReturn=e.n,exports.useIdentifier=t.t,exports.useRovingFocus=e.t;

package/a11y.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `@box-kite/react/a11y` — the behaviour primitives the accessible components are built from. Every
+ * APG pattern needs the same four mechanics (return focus, move through a list, dismiss, hold a value the
+ * consumer may own), none of them visible in the markup, so they live here once and are published because
+ * this library will never cover every pattern. Client hooks: the entry carries a `'use client'` banner.
+ */
+export { default as useControllableState } from './react/a11y/useControllableState';
+export type { ChangeDetails, ChangeHandler, ControllableStateOptions, SetControllableState } from './react/a11y/useControllableState';
+export { default as useDismiss } from './react/a11y/useDismiss';
+export type { DismissOptions, DismissReason, ElementLike } from './react/a11y/useDismiss';
+export { default as useFocusReturn } from './react/a11y/useFocusReturn';
+export type { FocusReturnOptions } from './react/a11y/useFocusReturn';
+export { default as useIdentifier } from './react/identity/useIdentifier';
+export { default as useRovingFocus } from './react/a11y/useRovingFocus';
+export type { RovingFocus, RovingFocusItemProps, RovingFocusOptions, RovingFocusReason, RovingOrientation, } from './react/a11y/useRovingFocus';

package/a11y.mjs

@@ -0,0 +1,4 @@
+"use client";
+import { i as e, n as t, r as n, t as r } from "./behavior.mjs";
+import { t as i } from "./identity.mjs";
+export { e as useControllableState, n as useDismiss, t as useFocusReturn, i as useIdentifier, r as useRovingFocus };

package/anchor.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./placement.cjs");exports.useAnchorPosition=e.t;

package/anchor.d.ts

@@ -0,0 +1,14 @@
+/**
+ * `@box-kite/react/anchor` — where a floating layer goes. One hook: it hands the trigger a name and the
+ * layer the props that place it against that name, which on a browser with CSS anchor positioning is the
+ * whole of it — no measuring, no scroll listener, no state. Where the browser has none it measures instead,
+ * and the flip and the shift are the same model worked out by hand.
+ *
+ * Its own entry rather than a corner of `/a11y`, because positioning is not an accessibility mechanic: a
+ * consumer wanting `useDismiss` should not carry the placement model, or the other way round. A client
+ * hook, so the entry carries a `'use client'` banner — a layer that needs no JS at all is `positionArea`
+ * and the props beside it, which any Box takes.
+ */
+export { default as useAnchorPosition } from './react/anchor/useAnchorPosition';
+export type { AnchorElementProps, AnchorLayerProps, AnchorPosition, AnchorPositionOptions } from './react/anchor/useAnchorPosition';
+export type { AnchorAlign, AnchorSide } from './utils/anchor/anchorUtils';

package/anchor.mjs

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "./placement.mjs";
+export { e as useAnchorPosition };

package/behavior.cjs

@@ -0,0 +1 @@
+const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./keyboard.cjs");let r=require("react");function i(e){let n=(0,r.useRef)(e);return t.n(()=>{n.current=e}),n}function a(e){let t=i(e);return(0,r.useCallback)((...e)=>t.current?.(...e),[t])}function o(e){let{value:t,defaultValue:n,onChange:o}=e,s=t!==void 0,[c,l]=(0,r.useState)(n),u=s?t:c,d=i(u),f=a(o);return[u,(0,r.useCallback)((e,t)=>{let n=typeof e==`function`?e(d.current):e;Object.is(n,d.current)||(l(n),f(n,t))},[f,d])]}var s=[];function c(e,t){let n=t.elements();return e.elements().some(e=>n.some(t=>e!==t&&e.contains(t)))}function l(){let e=s.filter(e=>!s.some(t=>t!==e&&c(e,t)));return e[e.length-1]}function u(n){let{enabled:r=!0,onDismiss:o,inside:c,escapeKey:u=!0,outsidePointer:d=!0}=n,f=i(c),p=a(o);t.n(()=>{if(!r)return;let t={elements:()=>(f.current??[]).map(t=>e.s(t)).filter(e=>e!==null)};s.push(t);let n=new AbortController,i=(e,t)=>document.addEventListener(e,t,{signal:n.signal});return u&&i(`keydown`,e=>{e.key!==`Escape`||e.defaultPrevented||l()===t&&p(`escape`,e)}),d&&i(`pointerdown`,t=>{e.l(t,f.current??[])||p(`outside-pointer`,t)}),()=>{n.abort();let e=s.indexOf(t);e!==-1&&s.splice(e,1)}},[r,u,d,p,f])}function d(){let t=e.t()?.activeElement;return t&&t!==document.body?t:null}function f(t={}){let{enabled:n=!0,returnTo:i,preventScroll:o}=t,[s,c]=(0,r.useState)(null),[l,u]=(0,r.useState)(!1);n!==l&&(u(n),n&&c(d()));let f=a(()=>{(e.c(i)??s)?.focus({preventScroll:o})});return(0,r.useEffect)(()=>{if(n)return()=>{let e=document.activeElement;(!e||e===document.body||!document.contains(e))&&f()}},[n,f]),{returnFocus:f}}var p=10;function m(e,t){return t<0?-1:Math.max(0,Math.min(e,t))}function h(e,t,n,r,i){if(n===0)return-1;let a=e;for(let e=0;e<n;e++){if(a+=t,a<0||a>=n){if(!r)return-1;a=(a%n+n)%n}if(!i?.(a))return a}return-1}function g(e,t,n){return h(e===1?-1:t,e,t,!1,n)}function _(t){let{count:a,columns:s,columnIndexOf:c,pageSize:l=p,defaultActiveColumn:u=0,onActiveCellChange:d,orientation:f=`vertical`,loop:_=!0,activeIndex:v,defaultActiveIndex:y=0,onActiveIndexChange:b,isDisabled:x,textOf:S,focusItems:C=!0,onSelect:w}=t,[T,E]=o({value:v,defaultValue:y,onChange:b}),D=Math.min(T,a-1),O=s!==void 0,k=(0,r.useCallback)(e=>typeof s==`function`?s(e):s??0,[s]),A=(0,r.useCallback)((e,t)=>{let n=k(e);if(!c)return m(t,n-1);if(n<=0)return-1;let r=0;for(;r+1<n&&c(e,r+1)<=t;)r++;return r},[c,k]),[j,M]=(0,r.useState)(u),N=O&&D>=0?A(D,j):-1,P=(0,r.useRef)([]),F=(0,r.useRef)(new Map),I=(0,r.useRef)(new Map),L=(0,r.useRef)(new Map),R=(0,r.useRef)({query:``,at:0}),z=(0,r.useCallback)(e=>{P.current[e]?.focus()},[]),B=(0,r.useRef)(!1),V=(0,r.useCallback)((e,t)=>{B.current=!0,I.current.get(`${e}:${t}`)?.focus(),B.current=!1},[]),H=(0,r.useCallback)(()=>O?I.current.get(`${D}:${N}`)??null:P.current[D]??null,[N,D,O]),U=i({row:D,column:N}),W=i(j),G=i(d),K=i(k),q=i(A),J=i(c),Y=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=Math.max(0,t),o=r<0?-1:q.current(r,i),s=U.current;return r===s.row&&o===s.column?s:(E(r,n),M(i),G.current?.({row:r,column:o},n),{row:r,column:o})},[U,q,G,a,E]),X=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=r<0?-1:m(Math.max(0,t),K.current(r)-1);return Y(r,i<0?0:J.current?.(r,i)??i,n)},[J,a,Y,K]),Z=(0,r.useCallback)((e,t)=>{let n=`${e}:${t}`;return L.current.has(n)||L.current.set(n,e=>{e?I.current.set(n,e):(I.current.delete(n),L.current.delete(n))}),{ref:L.current.get(n),tabIndex:e===D&&t===N?0:-1,onFocus:()=>{B.current||X(e,t,{reason:`focus`})}}},[N,D,X]),Q=(0,r.useCallback)(e=>(F.current.has(e)||F.current.set(e,t=>{P.current[e]=t}),{ref:F.current.get(e),tabIndex:C?e===D?0:-1:void 0,onFocus:C?()=>E(e,{reason:`focus`}):void 0}),[D,C,E]),$=(0,r.useCallback)(t=>{let{row:n,column:r}=U.current,i=(e,n)=>{t.preventDefault();let r=X(e,n,{reason:`keyboard`,event:t});C&&V(r.row,r.column)},o=e=>{t.preventDefault();let n=Y(e,W.current,{reason:`keyboard`,event:t});C&&V(n.row,n.column)},s=2**53-1,c=()=>e.u(t.currentTarget)?-1:1;switch(t.key){case`ArrowRight`:return i(n,r+c());case`ArrowLeft`:return i(n,r-c());case`ArrowDown`:return o(n+1);case`ArrowUp`:return o(n-1);case`Home`:return t.ctrlKey||t.metaKey?i(0,0):i(n,0);case`End`:return t.ctrlKey||t.metaKey?i(a-1,s):i(n,s);case`PageDown`:return o(n+l);case`PageUp`:return o(n-l)}},[U,a,W,V,C,l,Y,X]);return{activeIndex:D,activeColumn:N,setActiveIndex:E,setActiveCell:X,onKeyDown:(0,r.useCallback)(t=>{if(t.defaultPrevented)return;if(O){$(t);return}let r=f!==`horizontal`,i=f!==`vertical`,o=R.current,s=n.t.isOpen(o,t.timeStamp),c=(e,n)=>{e!==-1&&e!==D&&(t.preventDefault(),E(e,{reason:n,event:t}),C&&z(e))};if(i&&(t.key===`ArrowRight`||t.key===`ArrowLeft`)){let n=t.key===`ArrowRight`!==e.u(t.currentTarget);c(h(D,n?1:-1,a,_,x),`keyboard`);return}if(t.key===`ArrowDown`&&r){c(h(D,1,a,_,x),`keyboard`);return}if(t.key===`ArrowUp`&&r){c(h(D,-1,a,_,x),`keyboard`);return}if(t.key===`Home`){c(g(1,a,x),`keyboard`);return}if(t.key===`End`){c(g(-1,a,x),`keyboard`);return}if(t.key===`Enter`||t.key===` `&&!(s&&S)){if(!w||D===-1)return;t.preventDefault(),w(D,t);return}if(S&&n.t.isPrintable(t)){let e=n.t.push(o,t.key,t.timeStamp);c(n.t.target(e,D,a,S,x),`typeahead`)}},[D,a,z,C,x,O,_,$,w,f,E,S]),itemProps:Q,cellProps:Z,activeItem:H}}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}});

package/behavior.mjs

@@ -0,0 +1,277 @@
+import { c as e, l as t, s as n, t as r, u as i } from "./platform.mjs";
+import { n as a } from "./effects.mjs";
+import { t as o } from "./keyboard.mjs";
+import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
+//#region src/react/a11y/callbacks.ts
+function d(e) {
+	let t = l(e);
+	return a(() => {
+		t.current = e;
+	}), t;
+}
+function f(e) {
+	let t = d(e);
+	return s((...e) => t.current?.(...e), [t]);
+}
+//#endregion
+//#region src/react/a11y/useControllableState.ts
+function p(e) {
+	let { value: t, defaultValue: n, onChange: r } = e, i = t !== void 0, [a, o] = u(n), c = i ? t : a, l = d(c), p = f(r);
+	return [c, s((e, t) => {
+		let n = typeof e == "function" ? e(l.current) : e;
+		Object.is(n, l.current) || (o(n), p(n, t));
+	}, [p, l])];
+}
+//#endregion
+//#region src/react/a11y/useDismiss.ts
+var m = [];
+function h(e, t) {
+	let n = t.elements();
+	return e.elements().some((e) => n.some((t) => e !== t && e.contains(t)));
+}
+function g() {
+	let e = m.filter((e) => !m.some((t) => t !== e && h(e, t)));
+	return e[e.length - 1];
+}
+function _(e) {
+	let { enabled: r = !0, onDismiss: i, inside: o, escapeKey: s = !0, outsidePointer: c = !0 } = e, l = d(o), u = f(i);
+	a(() => {
+		if (!r) return;
+		let e = { elements: () => (l.current ?? []).map((e) => n(e)).filter((e) => e !== null) };
+		m.push(e);
+		let i = new AbortController(), a = (e, t) => document.addEventListener(e, t, { signal: i.signal });
+		return s && a("keydown", (t) => {
+			t.key !== "Escape" || t.defaultPrevented || g() === e && u("escape", t);
+		}), c && a("pointerdown", (e) => {
+			t(e, l.current ?? []) || u("outside-pointer", e);
+		}), () => {
+			i.abort();
+			let t = m.indexOf(e);
+			t !== -1 && m.splice(t, 1);
+		};
+	}, [
+		r,
+		s,
+		c,
+		u,
+		l
+	]);
+}
+//#endregion
+//#region src/react/a11y/useFocusReturn.ts
+function v() {
+	let e = r()?.activeElement;
+	return e && e !== document.body ? e : null;
+}
+function y(t = {}) {
+	let { enabled: n = !0, returnTo: r, preventScroll: i } = t, [a, o] = u(null), [s, l] = u(!1);
+	n !== s && (l(n), n && o(v()));
+	let d = f(() => {
+		(e(r) ?? a)?.focus({ preventScroll: i });
+	});
+	return c(() => {
+		if (n) return () => {
+			let e = document.activeElement;
+			(!e || e === document.body || !document.contains(e)) && d();
+		};
+	}, [n, d]), { returnFocus: d };
+}
+//#endregion
+//#region src/react/a11y/useRovingFocus.ts
+var b = 10;
+function x(e, t) {
+	return t < 0 ? -1 : Math.max(0, Math.min(e, t));
+}
+function S(e, t, n, r, i) {
+	if (n === 0) return -1;
+	let a = e;
+	for (let e = 0; e < n; e++) {
+		if (a += t, a < 0 || a >= n) {
+			if (!r) return -1;
+			a = (a % n + n) % n;
+		}
+		if (!i?.(a)) return a;
+	}
+	return -1;
+}
+function C(e, t, n) {
+	return S(e === 1 ? -1 : t, e, t, !1, n);
+}
+function w(e) {
+	let { count: t, columns: n, columnIndexOf: r, pageSize: a = b, defaultActiveColumn: c = 0, onActiveCellChange: f, orientation: m = "vertical", loop: h = !0, activeIndex: g, defaultActiveIndex: _ = 0, onActiveIndexChange: v, isDisabled: y, textOf: w, focusItems: T = !0, onSelect: E } = e, [D, O] = p({
+		value: g,
+		defaultValue: _,
+		onChange: v
+	}), k = Math.min(D, t - 1), A = n !== void 0, j = s((e) => typeof n == "function" ? n(e) : n ?? 0, [n]), M = s((e, t) => {
+		let n = j(e);
+		if (!r) return x(t, n - 1);
+		if (n <= 0) return -1;
+		let i = 0;
+		for (; i + 1 < n && r(e, i + 1) <= t;) i++;
+		return i;
+	}, [r, j]), [N, P] = u(c), F = A && k >= 0 ? M(k, N) : -1, I = l([]), L = l(/* @__PURE__ */ new Map()), R = l(/* @__PURE__ */ new Map()), z = l(/* @__PURE__ */ new Map()), B = l({
+		query: "",
+		at: 0
+	}), V = s((e) => {
+		I.current[e]?.focus();
+	}, []), H = l(!1), U = s((e, t) => {
+		H.current = !0, R.current.get(`${e}:${t}`)?.focus(), H.current = !1;
+	}, []), W = s(() => A ? R.current.get(`${k}:${F}`) ?? null : I.current[k] ?? null, [
+		F,
+		k,
+		A
+	]), G = d({
+		row: k,
+		column: F
+	}), K = d(N), q = d(f), J = d(j), Y = d(M), X = d(r), Z = s((e, n, r) => {
+		let i = x(e, t - 1), a = Math.max(0, n), o = i < 0 ? -1 : Y.current(i, a), s = G.current;
+		return i === s.row && o === s.column ? s : (O(i, r), P(a), q.current?.({
+			row: i,
+			column: o
+		}, r), {
+			row: i,
+			column: o
+		});
+	}, [
+		G,
+		Y,
+		q,
+		t,
+		O
+	]), Q = s((e, n, r) => {
+		let i = x(e, t - 1), a = i < 0 ? -1 : x(Math.max(0, n), J.current(i) - 1);
+		return Z(i, a < 0 ? 0 : X.current?.(i, a) ?? a, r);
+	}, [
+		X,
+		t,
+		Z,
+		J
+	]), ee = s((e, t) => {
+		let n = `${e}:${t}`;
+		return z.current.has(n) || z.current.set(n, (e) => {
+			e ? R.current.set(n, e) : (R.current.delete(n), z.current.delete(n));
+		}), {
+			ref: z.current.get(n),
+			tabIndex: e === k && t === F ? 0 : -1,
+			onFocus: () => {
+				H.current || Q(e, t, { reason: "focus" });
+			}
+		};
+	}, [
+		F,
+		k,
+		Q
+	]), te = s((e) => (L.current.has(e) || L.current.set(e, (t) => {
+		I.current[e] = t;
+	}), {
+		ref: L.current.get(e),
+		tabIndex: T ? e === k ? 0 : -1 : void 0,
+		onFocus: T ? () => O(e, { reason: "focus" }) : void 0
+	}), [
+		k,
+		T,
+		O
+	]), $ = s((e) => {
+		let { row: n, column: r } = G.current, o = (t, n) => {
+			e.preventDefault();
+			let r = Q(t, n, {
+				reason: "keyboard",
+				event: e
+			});
+			T && U(r.row, r.column);
+		}, s = (t) => {
+			e.preventDefault();
+			let n = Z(t, K.current, {
+				reason: "keyboard",
+				event: e
+			});
+			T && U(n.row, n.column);
+		}, c = 2 ** 53 - 1, l = () => i(e.currentTarget) ? -1 : 1;
+		switch (e.key) {
+			case "ArrowRight": return o(n, r + l());
+			case "ArrowLeft": return o(n, r - l());
+			case "ArrowDown": return s(n + 1);
+			case "ArrowUp": return s(n - 1);
+			case "Home": return e.ctrlKey || e.metaKey ? o(0, 0) : o(n, 0);
+			case "End": return e.ctrlKey || e.metaKey ? o(t - 1, c) : o(n, c);
+			case "PageDown": return s(n + a);
+			case "PageUp": return s(n - a);
+		}
+	}, [
+		G,
+		t,
+		K,
+		U,
+		T,
+		a,
+		Z,
+		Q
+	]);
+	return {
+		activeIndex: k,
+		activeColumn: F,
+		setActiveIndex: O,
+		setActiveCell: Q,
+		onKeyDown: s((e) => {
+			if (e.defaultPrevented) return;
+			if (A) {
+				$(e);
+				return;
+			}
+			let n = m !== "horizontal", r = m !== "vertical", a = B.current, s = o.isOpen(a, e.timeStamp), c = (t, n) => {
+				t !== -1 && t !== k && (e.preventDefault(), O(t, {
+					reason: n,
+					event: e
+				}), T && V(t));
+			};
+			if (r && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+				let n = e.key === "ArrowRight" !== i(e.currentTarget);
+				c(S(k, n ? 1 : -1, t, h, y), "keyboard");
+				return;
+			}
+			if (e.key === "ArrowDown" && n) {
+				c(S(k, 1, t, h, y), "keyboard");
+				return;
+			}
+			if (e.key === "ArrowUp" && n) {
+				c(S(k, -1, t, h, y), "keyboard");
+				return;
+			}
+			if (e.key === "Home") {
+				c(C(1, t, y), "keyboard");
+				return;
+			}
+			if (e.key === "End") {
+				c(C(-1, t, y), "keyboard");
+				return;
+			}
+			if (e.key === "Enter" || e.key === " " && !(s && w)) {
+				if (!E || k === -1) return;
+				e.preventDefault(), E(k, e);
+				return;
+			}
+			if (w && o.isPrintable(e)) {
+				let n = o.push(a, e.key, e.timeStamp);
+				c(o.target(n, k, t, w, y), "typeahead");
+			}
+		}, [
+			k,
+			t,
+			V,
+			T,
+			y,
+			A,
+			h,
+			$,
+			E,
+			m,
+			O,
+			w
+		]),
+		itemProps: te,
+		cellProps: ee,
+		activeItem: W
+	};
+}
+//#endregion
+export { f as a, p as i, y as n, d as o, _ as r, w as t };

package/box.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./client.cjs");let r=require("react");r=e.t(r,1);let i=require("@box-kite/core");function a(e,i){let{tag:a=`div`,children:o}=e,{classNames:s,styleElements:c}=n.i(e,a===`svg`),l=(0,r.useMemo)(()=>{let n=t.d(e,s);return i&&(n.ref=i),n},[e]),[u,d]=(0,r.useState)(!1),f=typeof o==`function`,p=f?{...l,onMouseEnter:()=>d(!0),onMouseLeave:()=>d(!1)}:l,m=r.default.createElement(a,p,f?o({isHover:u}):o);return c?r.default.createElement(r.default.Fragment,null,c,m):m}var o=(0,r.memo)((0,r.forwardRef)(a));o.displayName=`Box`,o.extend=i.BoxExtends.extend,o.components=i.BoxExtends.components,o.keyframes=i.BoxExtends.keyframes,o.spring=i.Springs.spring,o.Theme=n.n,o.useTheme=n.n.useTheme,o.getVariableValue=e=>(0,i.getDefaultEngine)().getVariableValue(e),o.configure=n.r.configure;function s(e,r){return t.f(n.i(e,r?.svg===!0),e.className)}exports.default=o,exports.useClassNames=s,exports.useVisibility=n.a;

package/box.d.ts

@@ -0,0 +1,46 @@
+import { default as React, RefAttributes } from 'react';
+import { BoxExtends, Springs } from '@box-kite/core';
+import { BoxClassNames } from './react/boxClassNames';
+import { BoxClassNameProps, BoxCoreProps } from './react/boxProps';
+import { default as useVisibility } from './react/hooks/useVisibility';
+import { ExtractElementFromTag } from './react/reactTypes';
+import { default as Theme } from './react/theme/theme';
+import { StylesContext } from './react/useStyles';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+interface BoxType {
+    <TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never>(props: BoxCoreProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
+    extend: typeof BoxExtends.extend;
+    components: typeof BoxExtends.components;
+    keyframes: typeof BoxExtends.keyframes;
+    /** A spring of your own, sampled into `{ easing, duration }` — the two halves the timing and duration props take. */
+    spring: typeof Springs.spring;
+    Theme: typeof Theme;
+    useTheme: typeof Theme.useTheme;
+    getVariableValue: (name: string) => string;
+    /** Explicit engine configuration (class-name hashing, style sink). Call once, before the first render. */
+    configure: typeof StylesContext.configure;
+}
+declare const Box: BoxType;
+export default Box;
+export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never> = React.ComponentProps<typeof Box<TTag, TKey>>;
+export type BoxTagProps<TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never> = Required<BoxProps<TTag, TKey>>['props'];
+/**
+ * Box props as a class attribute, for an element Box cannot render: an icon from `lucide-react`, a
+ * `motion.div`, a router's `NavLink`. They take a `className` and nothing else, and `style` is what this
+ * library exists not to write.
+ *
+ * ```tsx
+ * const { className, styles } = useClassNames({ color: 'sky-500', hover: { color: 'sky-300' } });
+ *
+ * return <>{styles}<NavLink className={className} to="/" /></>;
+ * ```
+ *
+ * `styles` is defined in element mode only, where the CSS travels as `<style href precedence>` elements;
+ * elsewhere it is undefined and rendering it costs nothing, so that line is what to write either way.
+ * `{ svg: true }` picks the SVG reset — `Icon` is this hook plus that flag.
+ */
+export declare function useClassNames<TKey extends keyof ComponentsAndVariants = never>(props: BoxClassNameProps<TKey>, options?: {
+    svg?: boolean;
+}): BoxClassNames;
+export { useVisibility };
+export type { BoxClassNames, BoxClassNameProps };

package/box.mjs

@@ -0,0 +1,23 @@
+import { d as e, f as t } from "./react-shared.mjs";
+import { a as n, i as r, n as i, r as a } from "./client.mjs";
+import o, { forwardRef as s, memo as c, useMemo as l, useState as u } from "react";
+import { BoxExtends as d, Springs as f, getDefaultEngine as p } from "@box-kite/core";
+//#region src/box.ts
+function m(t, n) {
+	let { tag: i = "div", children: a } = t, { classNames: s, styleElements: c } = r(t, i === "svg"), d = l(() => {
+		let r = e(t, s);
+		return n && (r.ref = n), r;
+	}, [t]), [f, p] = u(!1), m = typeof a == "function", h = m ? {
+		...d,
+		onMouseEnter: () => p(!0),
+		onMouseLeave: () => p(!1)
+	} : d, g = o.createElement(i, h, m ? a({ isHover: f }) : a);
+	return c ? o.createElement(o.Fragment, null, c, g) : g;
+}
+var h = c(s(m));
+h.displayName = "Box", h.extend = d.extend, h.components = d.components, h.keyframes = d.keyframes, h.spring = f.spring, h.Theme = i, h.useTheme = i.useTheme, h.getVariableValue = (e) => p().getVariableValue(e), h.configure = a.configure;
+function g(e, n) {
+	return t(r(e, n?.svg === !0), e.className);
+}
+//#endregion
+export { h as default, g as useClassNames, n as useVisibility };

package/client.cjs

@@ -0,0 +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/jsx-runtime");function c(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 l=r.t;function u(e,n){let{classNames:r,signature:i,styleElements:a}=t.l(e,n);return l(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:a}}function d(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return l(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var f;(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)().styleElementId}e.styleElementId=i;function a(e){(0,o.getDefaultEngine)().configure(e)}e.configure=a})(f||={});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 m(e){if(typeof e.createContext!=`function`)throw Error(p)}m(a.default);var h=a.default.createContext({theme:``,setTheme:()=>{}});function g(e){let{children:t,theme:n,use:r=`local`,storageKey:c,globalStyles:l}=e,u=d(r===`global`?l:void 0,`html`),[f,p]=(0,a.useState)(n??o.defaultThemeName),[m,g]=(0,a.useState)(n!==void 0),_=(0,a.useRef)(null),v=(0,a.useCallback)(e=>{e===null?(c&&(0,o.clearStoredTheme)(c),g(!1)):(c&&(0,o.writeStoredTheme)(c,e),p(e),g(!0))},[c]),[y,b]=(0,a.useState)(n);return n!==y&&(b(n),n===void 0?g(!1):(p(n),g(!0))),(0,a.useLayoutEffect)(()=>{if(m)return;let e=c?(0,o.readStoredTheme)(c):null;if(e){p(e),g(!0);return}return p((0,o.getSystemTheme)()),(0,o.watchSystemTheme)(p)},[m,c]),(0,a.useLayoutEffect)(()=>{if(r===`local`)return;let e=(0,o.documentRoot)();if(e)return(0,o.applyThemeToElement)(e,f)},[f,r]),(0,a.useLayoutEffect)(()=>{r!==`local`||!_.current||(0,o.setThemeAttribute)(_.current,f)},[f,r]),r===`local`?(0,s.jsxs)(h.Provider,{value:{theme:f,setTheme:v},children:[u,(0,s.jsx)(i.default,{ref:_,className:f,children:t})]}):(0,s.jsxs)(h.Provider,{value:{theme:f,setTheme:v},children:[u,t]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(h);return[e,t]}e.useTheme=t})(g||={});var _=g,v=new WeakMap;function y(e){let t=v.get(e);return t||(t=new Map,v.set(e,t)),t}function b(e=!0){let[t]=_.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=y(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 c}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return b}});

package/client.mjs

@@ -0,0 +1,164 @@
+import { l as e, u as t } from "./react-shared.mjs";
+import { l as n, t 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, readStoredTheme as b, setThemeAttribute as x, watchSystemTheme as S, writeStoredTheme as C } from "@box-kite/core";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/react/hooks/useVisibility.ts
+function E(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);
+	return l(() => {
+		function e(e) {
+			let r = t ?? u.current;
+			r && !n(e, [r]) && c(!1);
+		}
+		function l() {
+			c(!1);
+		}
+		function d(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, {
+			signal: f.signal,
+			capture: !0
+		})), () => {
+			f.abort();
+		};
+	}, [
+		t,
+		s,
+		r,
+		o,
+		a,
+		i
+	]), [
+		s,
+		c,
+		u
+	];
+}
+//#endregion
+//#region src/react/useStyles.ts
+var D = i;
+function O(t, n) {
+	let { classNames: r, signature: i, styleElements: a } = e(t, n);
+	return D(() => {
+		v().flushSync();
+	}, [i ?? t]), {
+		classNames: r,
+		styleElements: a
+	};
+}
+function k(e, n) {
+	let r = e ? v().addGlobalStyles(e, n) : void 0;
+	return D(() => {
+		v().flushSync();
+	}, [e, n]), t(r);
+}
+var A;
+(function(e) {
+	function t() {
+		v().flushSync();
+	}
+	e.flushSync = t;
+	function n() {
+		v().clear();
+	}
+	e.clear = n;
+	function r() {
+		return v().getStyles();
+	}
+	e.getStyles = r;
+	function i() {
+		return v().styleElementId;
+	}
+	e.styleElementId = i;
+	function a(e) {
+		v().configure(e);
+	}
+	e.configure = a;
+})(A ||= {});
+//#endregion
+//#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);
+}
+//#endregion
+//#region src/react/theme/themeContext.ts
+M(o);
+var N = o.createContext({
+	theme: "",
+	setTheme: () => {}
+});
+//#endregion
+//#region src/react/theme/theme.tsx
+function P(e) {
+	let { children: t, theme: n, use: r = "local", storageKey: i, globalStyles: o } = e, c = k(r === "global" ? o : void 0, "html"), [l, d] = p(n ?? g), [v, E] = p(n !== void 0), D = f(null), O = s((e) => {
+		e === null ? (i && h(i), E(!1)) : (i && C(i, e), d(e), E(!0));
+	}, [i]), [A, j] = p(n);
+	return n !== A && (j(n), n === void 0 ? E(!1) : (d(n), E(!0))), u(() => {
+		if (v) return;
+		let e = i ? b(i) : null;
+		if (e) {
+			d(e), E(!0);
+			return;
+		}
+		return d(y()), S(d);
+	}, [v, i]), u(() => {
+		if (r === "local") return;
+		let e = _();
+		if (e) return m(e, l);
+	}, [l, r]), u(() => {
+		r !== "local" || !D.current || x(D.current, l);
+	}, [l, r]), r === "local" ? /* @__PURE__ */ T(N.Provider, {
+		value: {
+			theme: l,
+			setTheme: O
+		},
+		children: [c, /* @__PURE__ */ w(a, {
+			ref: D,
+			className: l,
+			children: t
+		})]
+	}) : /* @__PURE__ */ T(N.Provider, {
+		value: {
+			theme: l,
+			setTheme: O
+		},
+		children: [c, t]
+	});
+}
+(function(e) {
+	function t() {
+		let { theme: e, setTheme: t } = c(N);
+		return [e, t];
+	}
+	e.useTheme = t;
+})(P ||= {});
+var F = P, I = /* @__PURE__ */ new WeakMap();
+function L(e) {
+	let t = I.get(e);
+	return t || (t = /* @__PURE__ */ new Map(), I.set(e, t)), t;
+}
+function R(e = !0) {
+	let [t] = F.useTheme(), n = d(() => {
+		if (!e) return null;
+		let t = r();
+		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;
+	}, [e]);
+	return u(() => {
+		if (!t || !n) return;
+		let e = L(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
+export { E as a, O as i, F as n, A as r, R as t };

package/components/accordion.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../identity.cjs");let r=require("react"),i=require("react/jsx-runtime");var a;(function(e){e.ROOT_ATTRIBUTE=`data-accordion`,e.TRIGGER_ATTRIBUTE=`data-accordion-trigger`;let t=e.ROOT_SELECTOR=`[data-accordion]`,n=e.TRIGGER_SELECTOR=`[data-accordion-trigger]`;function r(e,n){return n instanceof Element&&n.closest(t)===e}e.owns=r;function i(e){return e?[...e.querySelectorAll(n)].filter(t=>r(e,t)):[]}e.triggers=i;function a(e){return e.hasAttribute(`disabled`)||e.getAttribute(`aria-disabled`)===`true`}e.isDisabled=a;function o(e,t,n,r){let i=e.length;if(i===0)return;let o=t<0||t>=i?n>0?-1:i:t;for(let t=0;t<i;t++){if(o+=n,o<0||o>=i){if(!r)return;o=(o%i+i)%i}if(!a(e[o]))return e[o]}}e.step=o;function s(e,t){return o(e,t===1?-1:e.length,t,!1)}e.edge=s;function c(e,t){return t instanceof HTMLElement?e.indexOf(t):-1}e.indexOf=c;function l(e){if(e===`ArrowDown`)return{kind:`step`,delta:1};if(e===`ArrowUp`)return{kind:`step`,delta:-1};if(e===`Home`)return{kind:`edge`,delta:1};if(e===`End`)return{kind:`edge`,delta:-1}}e.moveFor=l;function u(e,t,n,r){return n.kind===`edge`?s(e,n.delta):o(e,t,n.delta,r)}e.target=u;function d(e,t,n){return e.includes(t)?e.filter(e=>e!==t):n?[...e,t]:[t]}e.toggle=d})(a||={});var o=a,s=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],c=(0,r.createContext)(null),l=(0,r.createContext)(null);function u(e){let t=(0,r.useContext)(c);if(!t)throw Error(`<${e}> has to be rendered inside an <Accordion>.`);return t}function d(e){let t=(0,r.useContext)(l);if(!t)throw Error(`<${e}> has to be rendered inside an <Accordion.Item>.`);return t}function f(n){let{children:a,value:s,defaultValue:l,onValueChange:u,multiple:d=!1,loop:f=!0,level:p=3,props:m,...h}=n,g=(0,r.useRef)(null),[_,v]=t.i({value:s,defaultValue:l??[],onChange:u}),y=t.a((e,t)=>{v(t=>o.toggle(t,e,d),t)}),b=t.a(e=>{let t=g.current;if(!t||e.defaultPrevented||!o.owns(t,e.target))return;let n=o.triggers(t),r=o.indexOf(n,e.target);if(r===-1)return;let i=o.moveFor(e.key);if(!i)return;let a=o.target(n,r,i,f);a&&(e.preventDefault(),a.focus())}),x=(0,r.useMemo)(()=>({open:_,level:p,toggle:y}),[_,p,y]);return(0,i.jsx)(c.Provider,{value:x,children:(0,i.jsx)(e.default,{ref:g,component:`accordion`,...h,props:{[o.ROOT_ATTRIBUTE]:``,...m,onKeyDown:b},children:a})})}function p(t){let{value:a,children:o,disabled:s=!1,props:c,...d}=t,{open:f}=u(`Accordion.Item`),p=n.t(`accordion`),m=f.includes(a),h=(0,r.useMemo)(()=>({value:a,open:m,disabled:s,triggerId:`${p}-trigger`,panelId:`${p}-panel`}),[a,m,s,p]);return(0,i.jsx)(l.Provider,{value:h,children:(0,i.jsx)(e.default,{component:`accordion.item`,...d,props:c,children:o})})}p.displayName=`Accordion.Item`;function m(n){let{children:r,level:a,arrow:c=!0,props:l,...f}=n,{level:p,toggle:m}=u(`Accordion.Trigger`),{value:h,open:g,disabled:_,triggerId:v,panelId:y}=d(`Accordion.Trigger`),b=t.a(e=>m(h,{reason:`trigger`,event:e}));return(0,i.jsx)(e.default,{tag:s[(a??p)-1],component:`accordion.heading`,children:(0,i.jsxs)(e.default,{tag:`button`,component:`accordion.trigger`,...f,disabled:_,id:v,props:{type:`button`,"aria-expanded":g,"aria-controls":y,[o.TRIGGER_ATTRIBUTE]:``,...l,onClick:b},children:[r,c&&(0,i.jsx)(e.default,{tag:`span`,component:`accordion.arrow`,variant:{open:g},props:{"aria-hidden":!0}})]})})}m.displayName=`Accordion.Trigger`;function h(t){let{children:n,props:r,...a}=t,{open:o,triggerId:s,panelId:c}=d(`Accordion.Panel`);return(0,i.jsx)(e.default,{component:`accordion.track`,variant:{closed:!o},children:(0,i.jsx)(e.default,{component:`accordion.clip`,children:(0,i.jsx)(e.default,{component:`accordion.panel`,...a,id:c,props:{role:`region`,"aria-labelledby":s,...r},children:n})})})}h.displayName=`Accordion.Panel`;function g(a){let{children:o,trigger:s,open:c,defaultOpen:l=!1,onOpenChange:u,props:d,...f}=a,p=n.t(`collapsible`),m=`${p}-trigger`,h=`${p}-panel`,[g,_]=t.i({value:c,defaultValue:l,onChange:u}),v=t.a(e=>_(e=>!e,{reason:`trigger`,event:e})),y=(0,r.useMemo)(()=>({props:{id:m,type:`button`,"aria-expanded":g,"aria-controls":h,onClick:v}}),[m,h,g,v]);return(0,i.jsxs)(e.default,{component:`collapsible`,...f,props:d,children:[s(y),(0,i.jsx)(e.default,{component:`collapsible.track`,variant:{closed:!g},children:(0,i.jsx)(e.default,{component:`collapsible.clip`,children:(0,i.jsx)(e.default,{component:`collapsible.panel`,id:h,children:o})})})]})}g.displayName=`Collapsible`;var _=f;_.Item=p,_.Trigger=m,_.Panel=h,_.displayName=`Accordion`,exports.Collapsible=g,exports.default=_;