@box-kite/react 1.0.0 → 2.0.0

package/README.md

@@ -5,7 +5,7 @@
 [![Tests](https://github.com/box-kite/box-kite/actions/workflows/test.yml/badge.svg)](https://github.com/box-kite/box-kite/actions/workflows/test.yml)
 [![license](https://img.shields.io/npm/l/@box-kite/react)](LICENSE)
 
-`Box` is a single React component with 212 typed CSS props. It generates the CSS for the values you
+`Box` is a single React component with 221 typed CSS props. It generates the CSS for the values you
 pass at runtime and caches every rule by its content, so the same value anywhere in the app reuses
 one class — a project styles itself in TypeScript, with no CSS files to write and no class-name
 convention to remember.
@@ -684,7 +684,7 @@ A complete page — props, pseudo-classes, breakpoints, themes, `extend`, `compo
 
 ## Architecture
 
-The styling engine is framework-free. Everything that generates CSS — the 212 prop definitions,
+The styling engine is framework-free. Everything that generates CSS — the 221 prop definitions,
 the value formatters, class-name generation, rule ordering, the style sinks (CSSOM, `textContent`,
 string for SSR, style elements for React 19), the flush scheduler, CSS variables and the theme
 runtime — lives in `src/core/` and imports no React at all. CI fails the build if it ever does
@@ -714,3 +714,37 @@ code.
 
 See [CONTRIBUTING.md](CONTRIBUTING.md#the-core-boundary) for the boundary rules and where new code
 belongs.
+
+## AI editors and agents
+
+The package ships its own instructions, because an agent has priors about a library this new and they
+are wrong. `AGENTS.md` at the package root is the file agents look for — the rules, the dividers, one
+worked example — and `docs/` sits beside it: every prop with the CSS it writes (`docs/props.md`),
+every component with its import and whether it renders on a server (`docs/components.md`), and the
+behaviour hooks (`docs/a11y.md`). All of it is generated during the build from the prop registry, the
+rules file and the built chunks' own exports, so none of it can drift from the library it describes.
+
+```shell
+cp node_modules/@box-kite/react/AGENTS.md ./AGENTS.md
+```
+
+Codex, Cursor, Copilot, VS Code, Windsurf, Cline and Zed read a root `AGENTS.md` natively; Claude
+Code reads `CLAUDE.md`, so a file holding the one line `@AGENTS.md` points it at the same place. The
+long-form [BOX_KITE_AI_CONTEXT.md](src/BOX_KITE_AI_CONTEXT.md) ships in the tarball too.
+
+The same rules are also a skill, which roughly forty-five coding agents install with one command:
+
+```shell
+npx skills add box-kite/box-kite            # Claude Code, Cursor, Codex, Copilot, Gemini CLI, Zed…
+```
+
+In Claude Code this repository is also a plugin marketplace — `/plugin marketplace add box-kite/box-kite`
+then `/plugin install box-kite@box-kite` — and Cursor takes the rules as a rule file of its own:
+
+```shell
+mkdir -p .cursor/rules && cp node_modules/@box-kite/react/.cursor/rules/box-kite.mdc .cursor/rules/
+```
+
+Both are generated from the same rules file as `AGENTS.md`, and both are served by the docs site
+([skill.md](https://www.box-kite.dev/skill.md), [box-kite.mdc](https://www.box-kite.dev/box-kite.mdc))
+for an agent that can fetch a URL but not run a command.

package/a11y.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./behavior.cjs");exports.useControllableState=e.a,exports.useDismiss=e.i,exports.useFocusReturn=e.r,exports.useIdentifier=e.n,exports.useRovingFocus=e.t;
+"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

@@ -10,6 +10,6 @@ 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/a11y/useIdentifier';
+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

@@ -1,3 +1,4 @@
 "use client";
-import { a as e, i as t, n, r, t as i } from "./behavior.mjs";
-export { e as useControllableState, t as useDismiss, r as useFocusReturn, n as useIdentifier, i as useRovingFocus };
+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

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

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

package/box.cjs

@@ -1 +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.c(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.l(n.i(e,r?.svg===!0),e.className)}exports.default=o,exports.useClassNames=s,exports.useVisibility=n.a;
+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.mjs

@@ -1,4 +1,4 @@
-import { c as e, l as t } from "./react-shared.mjs";
+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";

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/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.a(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.o(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.s(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(){let[e]=_.useTheme(),t=(0,a.useMemo)(()=>{let e=n.t();if(!e)return null;let t=`box-kite-portal`,r=e.getElementById(t);return r||(r=document.createElement(`div`),r.id=t,document.body.appendChild(r)),r},[]);return(0,a.useLayoutEffect)(()=>{if(!e||!t)return;let n=y(t),r=n.get(e)??0;return n.set(e,r+1),r===0&&t.classList.add(e),()=>{let r=(n.get(e)??1)-1;r<=0?(n.delete(e),t.classList.remove(e)):n.set(e,r)}},[t,e]),t}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}});
+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

@@ -1,5 +1,5 @@
-import { o as e, s as t } from "./react-shared.mjs";
-import { a as n, t as r } from "./platform.mjs";
+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";
@@ -143,21 +143,22 @@ function L(e) {
 	let t = I.get(e);
 	return t || (t = /* @__PURE__ */ new Map(), I.set(e, t)), t;
 }
-function R() {
-	let [e] = F.useTheme(), t = d(() => {
-		let e = r();
+function R(e = !0) {
+	let [t] = F.useTheme(), n = d(() => {
 		if (!e) return null;
-		let t = "box-kite-portal", n = e.getElementById(t);
-		return n || (n = document.createElement("div"), n.id = t, document.body.appendChild(n)), n;
-	}, []);
+		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 (!e || !t) return;
-		let n = L(t), r = n.get(e) ?? 0;
-		return n.set(e, r + 1), r === 0 && t.classList.add(e), () => {
-			let r = (n.get(e) ?? 1) - 1;
-			r <= 0 ? (n.delete(e), t.classList.remove(e)) : n.set(e, r);
+		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);
 		};
-	}, [t, e]), t;
+	}, [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=_;