@box-kite/react 2.2.17 → 2.3.0

package/BOX_AI_CONTEXT.md

@@ -340,7 +340,7 @@ modifier, it is themed, and two elements asking for the same one share a class.
   `'circle'`/`'ellipse'`/`true`; `conic` takes a start angle or `true`. Exactly one of the three.
 - `at` centres a `radial` or `conic` gradient (not a `linear` one, which runs in a direction).
 - `interpolate`: `'srgb'`, `'hsl'`, `'oklab'`, `'oklch'`, `'hsl-longer'`, `'oklch-longer'`.
-- A stop is any colour value — a token, `blue-500/40`, a system colour, `var(--chart-1)` — or a
+- A stop is any colour value — a token, `blue-500/40`, a system colour, `var(--chart-1)`, a `Box.extend()` colour — or a
   `[colour, position]` pair. **Two stops minimum**, and the record is judged whole: one bad stop, one
   unknown key, two kinds at once, and the whole value emits no rule and no class name.
 - It writes `background-image`, so `bgGradient` and `bgImage` are the same property. `bgGradient` is declared
@@ -1453,6 +1453,42 @@ Full reference: `docs/a11y-primitives.md`.
 
 ---
 
+## Sizes: compact, normal, large
+
+Every built-in component is drawn at one of three sizes, and a size is two CSS variables —
+`--control-height` and `--control-font-size` — so it inherits. Before 2.3.0 each control's height fell out of
+its own padding (a text box 46px, a button 36px, a combobox 34px), and nothing lined up.
+
+| Size    | Variant             | Height | Text | Declared by                                              |
+| ------- | ------------------- | ------ | ---- | -------------------------------------------------------- |
+| Compact | `variant="compact"` | 32px   | 13px | `--control-height-compact`/`--control-font-size-compact` |
+| Normal  | — (the default)     | 40px   | 14px | `--control-height-normal`/`--control-font-size-normal`   |
+| Large   | `variant="large"`   | 48px   | 16px | `--control-height-large`/`--control-font-size-large`     |
+
+- **What follows it.** Fields and buttons (`Button`, `Textbox`, `Dropdown`/`Select`, `Combobox`/`TimeZoneSelect`,
+  `DateField`/`DatePicker`) take the height; items and rows (menu items, dropdown and combobox options, tabs,
+  accordion headers, calendar days, a picker's times and presets) take it as a minimum; `Textarea` takes the text
+  size; `Checkbox`, `RadioButton`, `Switch` and `Slider` scale whole; `Progress` changes its thickness.
+  `Popover`, `Dialog`, `Menu`, `Tabs`, `Accordion`, `Collapsible`, `RadioGroup` and `Calendar` take the variant and
+  pass it to everything inside. A `DataGrid` is drawn compact.
+- **A variant sizes the subtree**: `<Menu variant="compact">` makes every item compact, and `<DatePicker variant="large">`
+  its calendar too (the picker hands its size to the panel, which is a sibling). `variant="normal"` restores the
+  default inside a sized subtree.
+- **The project's scale is declared once**, on the app's root:
+
+  ```tsx
+  <Box vars={Box.sizes({ compact: 8, normal: 9, large: { height: 11, fontSize: 15 } })}>{app}</Box>
+  ```
+
+  A number is the ÷4 scale for a height and ÷16 for a text size; a string is CSS. `Box.sizes({ size: 'compact' })`
+  draws a whole subtree at that size.
+
+- **Never size one control by hand.** `height={9}` on one button wins as any prop does, which is how a row ends up
+  with three heights. Padding no longer sizes a control: `py` changes nothing, `height="auto"` hands it back.
+- **Your own control joins** with `height="control"` (`minHeight` where it wraps) and `fontSize="control"`;
+  `'control-compact'`/`'control-normal'`/`'control-large'` name one size outright.
+- `variant="square"` on a `Button` is an icon button as wide as it is tall, at whichever size.
+
 ## Form controls: Checkbox, Switch, RadioGroup
 
 All three render **real native inputs**, so focus, the checked state, the disabled state and form
@@ -1572,7 +1608,8 @@ positioning only and light-dismisses nothing.
 | `offset`               | `2`                 | The gap, on the ÷4 scale — 8px.                                                     |
 | `flip`                 | `true`              | Whether a side with no room is swapped for its opposite.                            |
 | `matchWidth`           | `false`             | Whether the panel is at least as wide as its trigger.                               |
-| `autoFocus`            | `true`              | Whether opening moves focus into the panel. An `autofocus` inside wins.             |
+| `autoFocus`            | `true`              | Whether opening moves focus onto the panel's first control (the panel if none).     |
+| `initialFocus`         | —                   | A ref to land on instead. React's `autoFocus` writes no attribute, so use this.     |
 
 What the component supplies, because the `popover` attribute supplies none of it: `role="dialog"`, the
 name, and `aria-expanded`/`aria-haspopup="dialog"`/`aria-controls` on the trigger. What the **platform**
@@ -2398,7 +2435,7 @@ that was never on screen.
    declared — it inherits the theme, the custom properties and the direction around it. `manual` rather
    than `auto` because a stack of messages owns no dismissal: a press outside has to reach the page. The
    viewport takes **no pointer events at all** and the toasts take them back, or a corner-sized fixed
-   strip would swallow every press in its gaps.
+   strip would swallow every press in its gaps. **While a modal `Dialog` is open the stack moves inside it**, shown after it — everything outside an open modal is inert, so a toast left on the page would sit under the backdrop, unpressable and silent — and moves back out when the dialog closes; Escape on a toast there dismisses the toast, not the dialog.
 3. **Four things stop the clock**: the pointer over the stack, focus inside it, a background tab, and a
    dismissal. A paused timer resumes where it left off rather than restarting. WCAG 2.2.1, and the only
    reason a toast is allowed to carry a control at all.

package/BOX_KITE_AI_CONTEXT.md

@@ -340,7 +340,7 @@ modifier, it is themed, and two elements asking for the same one share a class.
   `'circle'`/`'ellipse'`/`true`; `conic` takes a start angle or `true`. Exactly one of the three.
 - `at` centres a `radial` or `conic` gradient (not a `linear` one, which runs in a direction).
 - `interpolate`: `'srgb'`, `'hsl'`, `'oklab'`, `'oklch'`, `'hsl-longer'`, `'oklch-longer'`.
-- A stop is any colour value — a token, `blue-500/40`, a system colour, `var(--chart-1)` — or a
+- A stop is any colour value — a token, `blue-500/40`, a system colour, `var(--chart-1)`, a `Box.extend()` colour — or a
   `[colour, position]` pair. **Two stops minimum**, and the record is judged whole: one bad stop, one
   unknown key, two kinds at once, and the whole value emits no rule and no class name.
 - It writes `background-image`, so `bgGradient` and `bgImage` are the same property. `bgGradient` is declared
@@ -1453,6 +1453,42 @@ Full reference: `docs/a11y-primitives.md`.
 
 ---
 
+## Sizes: compact, normal, large
+
+Every built-in component is drawn at one of three sizes, and a size is two CSS variables —
+`--control-height` and `--control-font-size` — so it inherits. Before 2.3.0 each control's height fell out of
+its own padding (a text box 46px, a button 36px, a combobox 34px), and nothing lined up.
+
+| Size    | Variant             | Height | Text | Declared by                                              |
+| ------- | ------------------- | ------ | ---- | -------------------------------------------------------- |
+| Compact | `variant="compact"` | 32px   | 13px | `--control-height-compact`/`--control-font-size-compact` |
+| Normal  | — (the default)     | 40px   | 14px | `--control-height-normal`/`--control-font-size-normal`   |
+| Large   | `variant="large"`   | 48px   | 16px | `--control-height-large`/`--control-font-size-large`     |
+
+- **What follows it.** Fields and buttons (`Button`, `Textbox`, `Dropdown`/`Select`, `Combobox`/`TimeZoneSelect`,
+  `DateField`/`DatePicker`) take the height; items and rows (menu items, dropdown and combobox options, tabs,
+  accordion headers, calendar days, a picker's times and presets) take it as a minimum; `Textarea` takes the text
+  size; `Checkbox`, `RadioButton`, `Switch` and `Slider` scale whole; `Progress` changes its thickness.
+  `Popover`, `Dialog`, `Menu`, `Tabs`, `Accordion`, `Collapsible`, `RadioGroup` and `Calendar` take the variant and
+  pass it to everything inside. A `DataGrid` is drawn compact.
+- **A variant sizes the subtree**: `<Menu variant="compact">` makes every item compact, and `<DatePicker variant="large">`
+  its calendar too (the picker hands its size to the panel, which is a sibling). `variant="normal"` restores the
+  default inside a sized subtree.
+- **The project's scale is declared once**, on the app's root:
+
+  ```tsx
+  <Box vars={Box.sizes({ compact: 8, normal: 9, large: { height: 11, fontSize: 15 } })}>{app}</Box>
+  ```
+
+  A number is the ÷4 scale for a height and ÷16 for a text size; a string is CSS. `Box.sizes({ size: 'compact' })`
+  draws a whole subtree at that size.
+
+- **Never size one control by hand.** `height={9}` on one button wins as any prop does, which is how a row ends up
+  with three heights. Padding no longer sizes a control: `py` changes nothing, `height="auto"` hands it back.
+- **Your own control joins** with `height="control"` (`minHeight` where it wraps) and `fontSize="control"`;
+  `'control-compact'`/`'control-normal'`/`'control-large'` name one size outright.
+- `variant="square"` on a `Button` is an icon button as wide as it is tall, at whichever size.
+
 ## Form controls: Checkbox, Switch, RadioGroup
 
 All three render **real native inputs**, so focus, the checked state, the disabled state and form
@@ -1572,7 +1608,8 @@ positioning only and light-dismisses nothing.
 | `offset`               | `2`                 | The gap, on the ÷4 scale — 8px.                                                     |
 | `flip`                 | `true`              | Whether a side with no room is swapped for its opposite.                            |
 | `matchWidth`           | `false`             | Whether the panel is at least as wide as its trigger.                               |
-| `autoFocus`            | `true`              | Whether opening moves focus into the panel. An `autofocus` inside wins.             |
+| `autoFocus`            | `true`              | Whether opening moves focus onto the panel's first control (the panel if none).     |
+| `initialFocus`         | —                   | A ref to land on instead. React's `autoFocus` writes no attribute, so use this.     |
 
 What the component supplies, because the `popover` attribute supplies none of it: `role="dialog"`, the
 name, and `aria-expanded`/`aria-haspopup="dialog"`/`aria-controls` on the trigger. What the **platform**
@@ -2398,7 +2435,7 @@ that was never on screen.
    declared — it inherits the theme, the custom properties and the direction around it. `manual` rather
    than `auto` because a stack of messages owns no dismissal: a press outside has to reach the page. The
    viewport takes **no pointer events at all** and the toasts take them back, or a corner-sized fixed
-   strip would swallow every press in its gaps.
+   strip would swallow every press in its gaps. **While a modal `Dialog` is open the stack moves inside it**, shown after it — everything outside an open modal is inert, so a toast left on the page would sit under the backdrop, unpressable and silent — and moves back out when the dialog closes; Escape on a toast there dismisses the toast, not the dialog.
 3. **Four things stop the clock**: the pointer over the stack, focus inside it, a background tab, and a
    dismissal. A paused timer resumes where it left off rather than restarting. WCAG 2.2.1, and the only
    reason a toast is allowed to carry a control at all.

package/behavior.cjs

@@ -1 +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)||(s||(d.current=n),l(n),f(n,t))},[f,d,s])]}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.d(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.p(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.f(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.m(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.m(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 _}});
+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)||(s||(d.current=n),l(n),f(n,t))},[f,d,s])]}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.p(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.g(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.h(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._(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._(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,4 +1,4 @@
-import { d as e, f as t, m as n, p as r, t as i } from "./platform.mjs";
+import { _ as e, g as t, h as n, p as r, t 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";
@@ -37,21 +37,21 @@ 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: n = !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((t) => e(t)).filter((e) => e !== null) };
-		m.push(t);
+		let e = { elements: () => (l.current ?? []).map((e) => r(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);
+		return s && a("keydown", (t) => {
+			t.key !== "Escape" || t.defaultPrevented || g() === e && u("escape", t);
 		}), c && a("pointerdown", (e) => {
-			r(e, l.current ?? []) || u("outside-pointer", 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,
@@ -68,17 +68,17 @@ function v() {
 	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);
-	n !== s && (l(n), n && o(v()));
+	let { enabled: t = !0, returnTo: r, preventScroll: i } = e, [a, o] = u(null), [s, l] = u(!1);
+	t !== s && (l(t), t && o(v()));
 	let d = f(() => {
-		(t(r) ?? a)?.focus({ preventScroll: i });
+		(n(r) ?? a)?.focus({ preventScroll: i });
 	});
 	return c(() => {
-		if (n) return () => {
+		if (t) return () => {
 			let e = document.activeElement;
 			(!e || e === document.body || !document.contains(e)) && d();
 		};
-	}, [n, d]), { returnFocus: d };
+	}, [t, d]), { returnFocus: d };
 }
 //#endregion
 //#region src/react/a11y/useRovingFocus.ts
@@ -101,12 +101,12 @@ function S(e, t, n, r, i) {
 function C(e, t, n) {
 	return S(e === 1 ? -1 : t, e, t, !1, n);
 }
-function w(e) {
-	let { count: t, columns: r, columnIndexOf: i, 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({
+function w(t) {
+	let { count: n, columns: r, columnIndexOf: i, 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 } = t, [D, O] = p({
 		value: g,
 		defaultValue: _,
 		onChange: v
-	}), k = Math.min(D, t - 1), A = r !== void 0, j = s((e) => typeof r == "function" ? r(e) : r ?? 0, [r]), M = s((e, t) => {
+	}), k = Math.min(D, n - 1), A = r !== void 0, j = s((e) => typeof r == "function" ? r(e) : r ?? 0, [r]), M = s((e, t) => {
 		let n = j(e);
 		if (!i) return x(t, n - 1);
 		if (n <= 0) return -1;
@@ -127,8 +127,8 @@ function w(e) {
 	]), G = d({
 		row: k,
 		column: F
-	}), K = d(N), q = d(f), J = d(j), Y = d(M), X = d(i), 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;
+	}), K = d(N), q = d(f), J = d(j), Y = d(M), X = d(i), Z = s((e, t, r) => {
+		let i = x(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
@@ -140,14 +140,14 @@ function w(e) {
 		G,
 		Y,
 		q,
-		t,
+		n,
 		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);
+	]), Q = s((e, t, r) => {
+		let i = x(e, n - 1), a = i < 0 ? -1 : x(Math.max(0, t), J.current(i) - 1);
 		return Z(i, a < 0 ? 0 : X.current?.(i, a) ?? a, r);
 	}, [
 		X,
-		t,
+		n,
 		Z,
 		J
 	]), ee = s((e, t) => {
@@ -175,35 +175,35 @@ function w(e) {
 		k,
 		T,
 		O
-	]), $ = s((e) => {
-		let { row: r, column: i } = G.current, o = (t, n) => {
-			e.preventDefault();
-			let r = Q(t, n, {
+	]), $ = s((t) => {
+		let { row: r, column: i } = G.current, o = (e, n) => {
+			t.preventDefault();
+			let r = Q(e, n, {
 				reason: "keyboard",
-				event: e
+				event: t
 			});
 			T && U(r.row, r.column);
-		}, s = (t) => {
-			e.preventDefault();
-			let n = Z(t, K.current, {
+		}, s = (e) => {
+			t.preventDefault();
+			let n = Z(e, K.current, {
 				reason: "keyboard",
-				event: e
+				event: t
 			});
 			T && U(n.row, n.column);
-		}, c = 2 ** 53 - 1, l = () => n(e.currentTarget) ? -1 : 1;
-		switch (e.key) {
+		}, c = 2 ** 53 - 1, l = () => e(t.currentTarget) ? -1 : 1;
+		switch (t.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 "Home": return t.ctrlKey || t.metaKey ? o(0, 0) : o(r, 0);
+			case "End": return t.ctrlKey || t.metaKey ? o(n - 1, c) : o(r, c);
 			case "PageDown": return s(r + a);
 			case "PageUp": return s(r - a);
 		}
 	}, [
 		G,
-		t,
+		n,
 		K,
 		U,
 		T,
@@ -216,51 +216,51 @@ function w(e) {
 		activeColumn: F,
 		setActiveIndex: O,
 		setActiveCell: Q,
-		onKeyDown: s((e) => {
-			if (e.defaultPrevented) return;
+		onKeyDown: s((t) => {
+			if (t.defaultPrevented) return;
 			if (A) {
-				$(e);
+				$(t);
 				return;
 			}
-			let r = m !== "horizontal", i = m !== "vertical", a = B.current, s = o.isOpen(a, e.timeStamp), c = (t, n) => {
-				t !== -1 && t !== k && (e.preventDefault(), O(t, {
+			let r = m !== "horizontal", i = m !== "vertical", a = B.current, s = o.isOpen(a, t.timeStamp), c = (e, n) => {
+				e !== -1 && e !== k && (t.preventDefault(), O(e, {
 					reason: n,
-					event: e
-				}), T && V(t));
+					event: t
+				}), T && V(e));
 			};
-			if (i && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
-				let r = e.key === "ArrowRight" !== n(e.currentTarget);
-				c(S(k, r ? 1 : -1, t, h, y), "keyboard");
+			if (i && (t.key === "ArrowRight" || t.key === "ArrowLeft")) {
+				let r = t.key === "ArrowRight" !== e(t.currentTarget);
+				c(S(k, r ? 1 : -1, n, h, y), "keyboard");
 				return;
 			}
-			if (e.key === "ArrowDown" && r) {
-				c(S(k, 1, t, h, y), "keyboard");
+			if (t.key === "ArrowDown" && r) {
+				c(S(k, 1, n, h, y), "keyboard");
 				return;
 			}
-			if (e.key === "ArrowUp" && r) {
-				c(S(k, -1, t, h, y), "keyboard");
+			if (t.key === "ArrowUp" && r) {
+				c(S(k, -1, n, h, y), "keyboard");
 				return;
 			}
-			if (e.key === "Home") {
-				c(C(1, t, y), "keyboard");
+			if (t.key === "Home") {
+				c(C(1, n, y), "keyboard");
 				return;
 			}
-			if (e.key === "End") {
-				c(C(-1, t, y), "keyboard");
+			if (t.key === "End") {
+				c(C(-1, n, y), "keyboard");
 				return;
 			}
-			if (e.key === "Enter" || e.key === " " && !(s && w)) {
+			if (t.key === "Enter" || t.key === " " && !(s && w)) {
 				if (!E || k === -1) return;
-				e.preventDefault(), E(k, e);
+				t.preventDefault(), E(k, t);
 				return;
 			}
-			if (w && o.isPrintable(e)) {
-				let n = o.push(a, e.key, e.timeStamp);
-				c(o.target(n, k, t, w, y), "typeahead");
+			if (w && o.isPrintable(t)) {
+				let e = o.push(a, t.key, t.timeStamp);
+				c(o.target(e, k, n, w, y), "typeahead");
 			}
 		}, [
 			k,
-			t,
+			n,
 			V,
 			T,
 			y,

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"),r=require("./interactions.cjs");let i=require("react");i=e.t(i,1);let a=require("@box-kite/core");function o({tag:e,tagProps:t,render:n}){let[r,a]=(0,i.useState)(!1);return i.default.createElement(e,{...t,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1)},n({isHover:r}))}function s(e,r){let{tag:a=`div`,children:s}=e,{classNames:c,styleElements:l}=n.i(e,a===`svg`),u=t.d(e,c);r&&(u.ref=r);let d=typeof s==`function`?i.default.createElement(o,{tag:a,tagProps:u,render:s}):i.default.createElement(a,u,s);return l?i.default.createElement(i.default.Fragment,null,l,d):d}var c=t.f(s,`Box`);c.extend=a.BoxExtends.extend,c.components=a.BoxExtends.components,c.palette=a.BoxExtends.palette,c.createComponents=a.BoxExtends.createComponents,c.Components=n.o,c.keyframes=a.BoxExtends.keyframes,c.spring=a.Springs.spring,c.Theme=n.n,c.useTheme=n.n.useTheme,c.useDesign=n.n.useDesign,c.getVariableValue=e=>(0,a.getDefaultEngine)().getVariableValue(e),c.configure=n.r.configure,c.viewTransition=a.startViewTransition,c.onInteraction=r.i,c.reportInteraction=r.r,c.flushInteractions=r.n;function l(e,r){return t.p(n.i(e,r?.svg===!0),e.className)}exports.default=c,exports.useBoxElement=s,exports.useClassNames=l,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"),r=require("./interactions.cjs");let i=require("react");i=e.t(i,1);let a=require("@box-kite/core");function o({tag:e,tagProps:t,render:n}){let[r,a]=(0,i.useState)(!1);return i.default.createElement(e,{...t,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1)},n({isHover:r}))}function s(e,r){let{tag:a=`div`,children:s}=e,{classNames:c,styleElements:l}=n.i(e,a===`svg`),u=t.d(e,c);r&&(u.ref=r);let d=typeof s==`function`?i.default.createElement(o,{tag:a,tagProps:u,render:s}):i.default.createElement(a,u,s);return l?i.default.createElement(i.default.Fragment,null,l,d):d}var c=t.f(s,`Box`);c.extend=a.BoxExtends.extend,c.components=a.BoxExtends.components,c.palette=a.BoxExtends.palette,c.sizes=a.BoxExtends.sizes,c.createComponents=a.BoxExtends.createComponents,c.Components=n.o,c.keyframes=a.BoxExtends.keyframes,c.spring=a.Springs.spring,c.Theme=n.n,c.useTheme=n.n.useTheme,c.useDesign=n.n.useDesign,c.getVariableValue=e=>(0,a.getDefaultEngine)().getVariableValue(e),c.configure=n.r.configure,c.viewTransition=a.startViewTransition,c.onInteraction=r.i,c.reportInteraction=r.r,c.flushInteractions=r.n;function l(e,r){return t.p(n.i(e,r?.svg===!0),e.className)}exports.default=c,exports.useBoxElement=s,exports.useClassNames=l,exports.useVisibility=n.a;

package/box.d.ts

@@ -24,6 +24,7 @@ interface BoxType {
     components: typeof BoxExtends.components;
     /** The `vars` record that points the components' `accent` and `base` families at others, for an element and its subtree. */
     palette: typeof BoxExtends.palette;
+    sizes: typeof BoxExtends.sizes;
     /** A design for one subtree, registered nowhere: hand it to `<Box.Components value>` or `<Box.Theme components>`. */
     createComponents: typeof BoxExtends.createComponents;
     /** Every Box below resolves its `component` against this registry instead of the app's `Box.components()`. */

package/box.mjs

@@ -23,7 +23,7 @@ function v(t, n) {
 	return s ? d.createElement(d.Fragment, null, s, l) : l;
 }
 var y = t(v, "Box");
-y.extend = p.extend, y.components = p.components, y.palette = p.palette, y.createComponents = p.createComponents, y.Components = o, y.keyframes = p.keyframes, y.spring = m.spring, y.Theme = a, y.useTheme = a.useTheme, y.useDesign = a.useDesign, y.getVariableValue = (e) => h().getVariableValue(e), y.configure = s.configure, y.viewTransition = g, y.onInteraction = c, y.reportInteraction = u, y.flushInteractions = l;
+y.extend = p.extend, y.components = p.components, y.palette = p.palette, y.sizes = p.sizes, y.createComponents = p.createComponents, y.Components = o, y.keyframes = p.keyframes, y.spring = m.spring, y.Theme = a, y.useTheme = a.useTheme, y.useDesign = a.useDesign, y.getVariableValue = (e) => h().getVariableValue(e), y.configure = s.configure, y.viewTransition = g, y.onInteraction = c, y.reportInteraction = u, y.flushInteractions = l;
 function b(e, t) {
 	return n(i(e, t?.svg === !0), e.className);
 }