@box-kite/react 2.2.16 → 2.2.17

package/components/swipeItem.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../behavior.cjs"),a=require("../reporting.cjs"),o=require("../motion.cjs"),s=require("./list.cjs");let c=require("react"),l=require("react/jsx-runtime");var u;(function(e){let t=e.SLOP=8,n=e.FLICK=.4,r=e.FULL_RATIO=.6;function i(e,n){return Math.max(Math.abs(e),Math.abs(n))<t?null:Math.abs(e)>Math.abs(n)?`swipe`:`scroll`}e.intent=i;function a(e,t){return(1-1/(e*.55/t+1))*t}function o(e,t,n,r,i){let o=e+t,s=o<0?-1:1,c=o<0?n.end:n.start,l=Math.abs(o);return c===0?0:l<=c?o:i?s*Math.min(l,r):s*(c+a(l-c,Math.max(r,1)))}e.offsetFor=o;function s(e,n,i,a){if(!a||e===0)return null;let o=e>0?`start`:`end`,s=n[o];return s===0?null:Math.abs(e)>=Math.max(s+t*4,i*r)?o:null}e.armed=s;function c(e,t,r,i,a){let o=s(e,r,i,a);if(o)return{open:null,full:o};if(e===0)return{open:null,full:null};let c=e>0?`start`:`end`,l=r[c];return l===0?{open:null,full:null}:Math.abs(t)>=n?{open:Math.sign(t)===Math.sign(e)?c:null,full:null}:{open:Math.abs(e)>=l/2?c:null,full:null}}e.settle=c;let l=e.VELOCITY_WINDOW=100;function u(e,t){return[...e.filter(e=>t.t-e.t<=l),t]}e.track=u;function d(e){let t=e[0],n=e[e.length-1];return!t||!n||n.t-t.t<16?0:(n.x-t.x)/(n.t-t.t)}e.velocity=d;function f(e,t){return e===`start`?t.start:e===`end`?-t.end:0}e.restOffset=f})(u||={});var d=u,f=(0,c.createContext)(null),p={start:0,end:0};function m(e,u){let{size:m=`md`,wrap:h=!1,selected:g=!1,chevron:_=!1,startActions:v,endActions:y,fullSwipe:b=!1,open:ne,defaultOpen:x=null,onOpenChange:S,variant:C,children:w,props:T,...re}=e,E=(0,c.useRef)(null),D=(0,c.useRef)(null),O=(0,c.useRef)(null),k=(0,c.useRef)(null),A=(0,c.useRef)(!1),[j,M]=a.a({value:ne,defaultValue:x,onChange:S,interaction:{component:`swipeItem`,type:`openChange`}}),[N,P]=(0,c.useState)(null),[F,I]=(0,c.useState)(null),[L,ie]=(0,c.useState)({trays:p,width:0,rtl:!1}),R=i.o(L),z=(0,c.useCallback)(e=>{E.current=e,t.l(u,e)},[u]),B=i.a(()=>{let e=e=>e?.firstElementChild?.offsetWidth??0,n={trays:{start:v?e(D.current):0,end:y?e(O.current):0},width:E.current?.offsetWidth??0,rtl:t.m(E.current)},r=R.current;return(r.trays.start!==n.trays.start||r.trays.end!==n.trays.end||r.width!==n.width||r.rtl!==n.rtl)&&ie(n),n});n.n(()=>{j&&B()},[j,B]);let V=i.a(e=>M(null,e)),H=a.i(`swipeItem`);(0,c.useEffect)(()=>{let e=t.t();if(!j||!e)return;let n=e=>{t.p(e,[E])||V({reason:`outside-pointer`,event:e})};return e.addEventListener(`pointerdown`,n,!0),()=>e.removeEventListener(`pointerdown`,n,!0)},[j,V]),(0,c.useEffect)(()=>{if(!F)return;let e=(F===`start`?D:O).current,t=E.current?.firstElementChild,n=t&&typeof getComputedStyle==`function`?o.n.activeDuration(getComputedStyle(t)):0,r=setTimeout(()=>{I(null),e?.querySelector(`[data-swipe-action]`)?.click()},n+o.n.SETTLE_FRAME);return()=>clearTimeout(r)},[F]);let U=i.a(e=>{if(A.current=!1,e.button!==0||F||!v&&!y)return;let{trays:t}=B();k.current={pointerId:e.pointerId,x:e.clientX,y:e.clientY,rest:d.restOffset(j,t),intent:null,samples:[{t:e.timeStamp,x:e.clientX}]}}),W=i.a(e=>{let n=k.current;if(!n||n.pointerId!==e.pointerId||n.intent===`scroll`)return;let r=e.clientX-n.x;if(!n.intent){if(n.intent=d.intent(r,e.clientY-n.y),n.intent!==`swipe`)return;e.currentTarget.setPointerCapture?.(e.pointerId),t.u(e.currentTarget)}let{trays:i,width:a,rtl:o}=R.current;n.samples=d.track(n.samples,{t:e.timeStamp,x:e.clientX}),P(d.offsetFor(n.rest,o?-r:r,i,a,b))}),G=i.a(e=>{let t=k.current;if(!t||t.pointerId!==e.pointerId||(k.current=null,t.intent!==`swipe`||N===null))return;e.currentTarget.releasePointerCapture?.(e.pointerId),A.current=!0;let{trays:n,width:r,rtl:i}=R.current,a=d.velocity(t.samples)*(i?-1:1),o=e.type===`pointercancel`?{open:j,full:null}:d.settle(N,a,n,r,b);P(null),o.full?(I(o.full),H(`fullSwipe`,o.full,{reason:`swipe`,event:e}),M(null,{reason:`swipe`,event:e})):M(o.open,{reason:`swipe`,event:e})}),K=i.a(e=>{if(A.current){A.current=!1,e.preventDefault(),e.stopPropagation();return}j&&(e.preventDefault(),e.stopPropagation(),V({reason:`outside-pointer`,event:e}))}),q=i.a(e=>{let t=D.current?.contains(e.target)?`start`:O.current?.contains(e.target)?`end`:null;t&&t!==j&&(B(),M(t,{reason:`focus`,event:e}))}),J=i.a(e=>{let t=e.relatedTarget;j&&(!t||!E.current?.contains(t))&&V({reason:`focus`,event:e})}),ae=i.a(e=>{e.key!==`Escape`||!j||e.defaultPrevented||(e.preventDefault(),V({reason:`escape`,event:e}),E.current?.querySelector(`[data-list-action]`)?.focus())}),{trays:Y,width:X,rtl:oe}=L,Z=N??(F?F===`start`?X:-X:d.restOffset(j,Y)),se=N===null?F:d.armed(N,Y,X,b),Q=N!==null,$=(e,t)=>(0,l.jsx)(te,{side:e,trayRef:e===`start`?D:O,width:e===`start`?Math.max(0,Z):Math.max(0,-Z),dragging:Q,children:(0,l.jsx)(f.Provider,{value:{side:e,armed:se===e,close:V},children:t})});return r.useBoxElement({tag:`li`,component:`list.item`,...s.i({...s.t,css:{...s.t.css,overflow:`clip`}},re),variant:[C,{selected:g}],props:{...T,onFocus:q,onBlur:J,onKeyDown:ae},children:(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(ee,{size:m,wrap:h,dragging:Q,translate:Z===0?void 0:`${Math.round(oe?-Z:Z)}px`,handlers:{onPointerDown:U,onPointerMove:W,onPointerUp:G,onPointerCancel:G,onClickCapture:K,onDragStart:e=>e.preventDefault()},children:[w,_&&(0,l.jsx)(s.default.Chevron,{})]}),v?$(`start`,v):null,y?$(`end`,y):null]})},z)}function ee({size:e,wrap:t,dragging:n,translate:i,handlers:a,children:o}){return r.useBoxElement({component:`swipeItem.row`,...s.n,...s.r[e],...t?{flexWrap:`wrap`}:{},position:`relative`,css:{touchAction:`pan-y`},variant:{dragging:n},style:i?{translate:i}:void 0,props:a,children:o})}function te({side:e,trayRef:t,width:n,dragging:i,children:a}){let o=r.useBoxElement({display:`flex`,d:e===`end`?`row-reverse`:`row`,position:`absolute`,top:0,bottom:0,...e===`start`?{insetStart:0}:{insetEnd:0},minWidth:`fit`,css:{width:`max-content`},children:a});return r.useBoxElement({component:`swipeItem.tray`,position:`absolute`,top:0,bottom:0,...e===`start`?{insetStart:0}:{insetEnd:0},overflow:`hidden`,variant:{dragging:i},style:{width:`${Math.round(n)}px`},children:o},t)}function h(e,t){let{icon:n,onClick:i,closeOnSelect:a=!0,variant:o,children:s,props:u,...d}=e,p=(0,c.useContext)(f),m=e=>{i?.(e),a&&!e.defaultPrevented&&p?.close({reason:`action`,event:e})};return r.useBoxElement({tag:`button`,component:`swipeItem.action`,display:`flex`,d:`column`,ai:`center`,jc:`center`,gap:1,px:4,minWidth:18,flexGrow:1,flexShrink:0,fontSize:14,lineHeight:18,fontWeight:500,cursor:`pointer`,...d,variant:[o,{armed:p?.armed??!1}],props:{type:`button`,"data-swipe-action":``,...u,onClick:m},children:n?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(g,{children:n}),s]}):s},t)}function g({children:e}){return r.useBoxElement({tag:`span`,display:`flex`,props:{"aria-hidden":!0},children:e})}var _=e.f(m,`SwipeItem`);_.Action=e.f(h,`SwipeItem.Action`),exports.SwipeUtils=d,exports.default=_;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../behavior.cjs"),a=require("../reporting.cjs"),o=require("../motion.cjs"),s=require("./list.cjs");let c=require("react"),l=require("react/jsx-runtime");var u;(function(e){let t=e.SLOP=8,n=e.FLICK=.4,r=e.FULL_RATIO=.6;function i(e,n){return Math.max(Math.abs(e),Math.abs(n))<t?null:Math.abs(e)>Math.abs(n)?`swipe`:`scroll`}e.intent=i;function a(e,t){return(1-1/(e*.55/t+1))*t}function o(e,t,n,r,i){let o=e+t,s=o<0?-1:1,c=o<0?n.end:n.start,l=Math.abs(o);return c===0?0:l<=c?o:i?s*Math.min(l,r):s*(c+a(l-c,Math.max(r,1)))}e.offsetFor=o;function s(e,n,i,a){if(!a||e===0)return null;let o=e>0?`start`:`end`,s=n[o];return s===0?null:Math.abs(e)>=Math.max(s+t*4,i*r)?o:null}e.armed=s;function c(e,t,r,i,a){let o=s(e,r,i,a);if(o)return{open:null,full:o};if(e===0)return{open:null,full:null};let c=e>0?`start`:`end`,l=r[c];return l===0?{open:null,full:null}:Math.abs(t)>=n?{open:Math.sign(t)===Math.sign(e)?c:null,full:null}:{open:Math.abs(e)>=l/2?c:null,full:null}}e.settle=c;let l=e.VELOCITY_WINDOW=100;function u(e,t){return[...e.filter(e=>t.t-e.t<=l),t]}e.track=u;function d(e){let t=e[0],n=e[e.length-1];return!t||!n||n.t-t.t<16?0:(n.x-t.x)/(n.t-t.t)}e.velocity=d;function f(e,t){return e===`start`?t.start:e===`end`?-t.end:0}e.restOffset=f})(u||={});var d=u,f=(0,c.createContext)(null),p={start:0,end:0};function m(e,u){let{size:m=`md`,wrap:h=!1,selected:g=!1,chevron:_=!1,startActions:v,endActions:y,fullSwipe:b=!1,open:ne,defaultOpen:x=null,onOpenChange:S,variant:C,children:w,props:T,...re}=e,E=(0,c.useRef)(null),D=(0,c.useRef)(null),O=(0,c.useRef)(null),k=(0,c.useRef)(null),A=(0,c.useRef)(!1),[j,M]=a.a({value:ne,defaultValue:x,onChange:S,interaction:{component:`swipeItem`,type:`openChange`}}),[N,P]=(0,c.useState)(null),[F,I]=(0,c.useState)(null),[L,ie]=(0,c.useState)({trays:p,width:0,rtl:!1}),R=i.o(L),z=(0,c.useCallback)(e=>{E.current=e,t.l(u,e)},[u]),B=i.a(()=>{let e=e=>e?.firstElementChild?.offsetWidth??0,n={trays:{start:v?e(D.current):0,end:y?e(O.current):0},width:E.current?.offsetWidth??0,rtl:t.m(E.current)},r=R.current;return(r.trays.start!==n.trays.start||r.trays.end!==n.trays.end||r.width!==n.width||r.rtl!==n.rtl)&&ie(n),n});n.n(()=>{j&&B()},[j,B]);let V=i.a(e=>M(null,e)),H=a.i(`swipeItem`);(0,c.useEffect)(()=>{let e=t.t();if(!j||!e)return;let n=e=>{t.p(e,[E])||V({reason:`outside-pointer`,event:e})};return e.addEventListener(`pointerdown`,n,!0),()=>e.removeEventListener(`pointerdown`,n,!0)},[j,V]),(0,c.useEffect)(()=>{if(!F)return;let e=(F===`start`?D:O).current,t=E.current?.firstElementChild,n=t&&typeof getComputedStyle==`function`?o.i.activeDuration(getComputedStyle(t)):0,r=setTimeout(()=>{I(null),e?.querySelector(`[data-swipe-action]`)?.click()},n+o.i.SETTLE_FRAME);return()=>clearTimeout(r)},[F]);let U=i.a(e=>{if(A.current=!1,e.button!==0||F||!v&&!y)return;let{trays:t}=B();k.current={pointerId:e.pointerId,x:e.clientX,y:e.clientY,rest:d.restOffset(j,t),intent:null,samples:[{t:e.timeStamp,x:e.clientX}]}}),W=i.a(e=>{let n=k.current;if(!n||n.pointerId!==e.pointerId||n.intent===`scroll`)return;let r=e.clientX-n.x;if(!n.intent){if(n.intent=d.intent(r,e.clientY-n.y),n.intent!==`swipe`)return;e.currentTarget.setPointerCapture?.(e.pointerId),t.u(e.currentTarget)}let{trays:i,width:a,rtl:o}=R.current;n.samples=d.track(n.samples,{t:e.timeStamp,x:e.clientX}),P(d.offsetFor(n.rest,o?-r:r,i,a,b))}),G=i.a(e=>{let t=k.current;if(!t||t.pointerId!==e.pointerId||(k.current=null,t.intent!==`swipe`||N===null))return;e.currentTarget.releasePointerCapture?.(e.pointerId),A.current=!0;let{trays:n,width:r,rtl:i}=R.current,a=d.velocity(t.samples)*(i?-1:1),o=e.type===`pointercancel`?{open:j,full:null}:d.settle(N,a,n,r,b);P(null),o.full?(I(o.full),H(`fullSwipe`,o.full,{reason:`swipe`,event:e}),M(null,{reason:`swipe`,event:e})):M(o.open,{reason:`swipe`,event:e})}),K=i.a(e=>{if(A.current){A.current=!1,e.preventDefault(),e.stopPropagation();return}j&&(e.preventDefault(),e.stopPropagation(),V({reason:`outside-pointer`,event:e}))}),q=i.a(e=>{let t=D.current?.contains(e.target)?`start`:O.current?.contains(e.target)?`end`:null;t&&t!==j&&(B(),M(t,{reason:`focus`,event:e}))}),J=i.a(e=>{let t=e.relatedTarget;j&&(!t||!E.current?.contains(t))&&V({reason:`focus`,event:e})}),ae=i.a(e=>{e.key!==`Escape`||!j||e.defaultPrevented||(e.preventDefault(),V({reason:`escape`,event:e}),E.current?.querySelector(`[data-list-action]`)?.focus())}),{trays:Y,width:X,rtl:oe}=L,Z=N??(F?F===`start`?X:-X:d.restOffset(j,Y)),se=N===null?F:d.armed(N,Y,X,b),Q=N!==null,$=(e,t)=>(0,l.jsx)(te,{side:e,trayRef:e===`start`?D:O,width:e===`start`?Math.max(0,Z):Math.max(0,-Z),dragging:Q,children:(0,l.jsx)(f.Provider,{value:{side:e,armed:se===e,close:V},children:t})});return r.useBoxElement({tag:`li`,component:`list.item`,...s.i({...s.t,css:{...s.t.css,overflow:`clip`}},re),variant:[C,{selected:g}],props:{...T,onFocus:q,onBlur:J,onKeyDown:ae},children:(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(ee,{size:m,wrap:h,dragging:Q,translate:Z===0?void 0:`${Math.round(oe?-Z:Z)}px`,handlers:{onPointerDown:U,onPointerMove:W,onPointerUp:G,onPointerCancel:G,onClickCapture:K,onDragStart:e=>e.preventDefault()},children:[w,_&&(0,l.jsx)(s.default.Chevron,{})]}),v?$(`start`,v):null,y?$(`end`,y):null]})},z)}function ee({size:e,wrap:t,dragging:n,translate:i,handlers:a,children:o}){return r.useBoxElement({component:`swipeItem.row`,...s.n,...s.r[e],...t?{flexWrap:`wrap`}:{},position:`relative`,css:{touchAction:`pan-y`},variant:{dragging:n},style:i?{translate:i}:void 0,props:a,children:o})}function te({side:e,trayRef:t,width:n,dragging:i,children:a}){let o=r.useBoxElement({display:`flex`,d:e===`end`?`row-reverse`:`row`,position:`absolute`,top:0,bottom:0,...e===`start`?{insetStart:0}:{insetEnd:0},minWidth:`fit`,css:{width:`max-content`},children:a});return r.useBoxElement({component:`swipeItem.tray`,position:`absolute`,top:0,bottom:0,...e===`start`?{insetStart:0}:{insetEnd:0},overflow:`hidden`,variant:{dragging:i},style:{width:`${Math.round(n)}px`},children:o},t)}function h(e,t){let{icon:n,onClick:i,closeOnSelect:a=!0,variant:o,children:s,props:u,...d}=e,p=(0,c.useContext)(f),m=e=>{i?.(e),a&&!e.defaultPrevented&&p?.close({reason:`action`,event:e})};return r.useBoxElement({tag:`button`,component:`swipeItem.action`,display:`flex`,d:`column`,ai:`center`,jc:`center`,gap:1,px:4,minWidth:18,flexGrow:1,flexShrink:0,fontSize:14,lineHeight:18,fontWeight:500,cursor:`pointer`,...d,variant:[o,{armed:p?.armed??!1}],props:{type:`button`,"data-swipe-action":``,...u,onClick:m},children:n?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(g,{children:n}),s]}):s},t)}function g({children:e}){return r.useBoxElement({tag:`span`,display:`flex`,props:{"aria-hidden":!0},children:e})}var _=e.f(m,`SwipeItem`);_.Action=e.f(h,`SwipeItem.Action`),exports.SwipeUtils=d,exports.default=_;

package/components/swipeItem.mjs

@@ -5,7 +5,7 @@ import { n as o } from "../effects.mjs";
 import { useBoxElement as s } from "../box.mjs";
 import { a as c, o as l } from "../behavior.mjs";
 import { a as u, i as d } from "../reporting.mjs";
-import { n as f } from "../motion.mjs";
+import { i as f } from "../motion.mjs";
 import ee, { i as p, n as m, r as h, t as g } from "./list.mjs";
 import { createContext as _, useCallback as te, useContext as v, useEffect as y, useRef as b, useState as x } from "react";
 import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";

package/components/tabs.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../behavior.cjs"),a=require("../identity.cjs"),o=require("../reporting.cjs"),s=require("../motion.cjs");let c=require("react"),l=require("react/jsx-runtime");var u;(function(e){let t=e.TAB_SELECTOR=`[role="tab"]`,n=e.LIST_SELECTOR=`[role="tablist"]`,r=e.PANEL_SELECTOR=`[role="tabpanel"]`;function i(e,t){return t instanceof Element&&t.closest(n)===e}e.owns=i;function a(e){return e?[...e.querySelectorAll(t)].filter(t=>i(e,t)):[]}e.tabs=a;function o(e){return e.hasAttribute(`disabled`)||e.getAttribute(`aria-disabled`)===`true`}e.isDisabled=o;function s(e){return e.dataset.value}e.valueOf=s;function c(e){return e.replace(/[^A-Za-z0-9-]/g,e=>`_${e.codePointAt(0).toString(36)}_`)}e.token=c;function l(e,t,n,r){let i=e.length;if(i===0)return;let a=t<0||t>=i?n>0?-1:i:t;for(let t=0;t<i;t++){if(a+=n,a<0||a>=i){if(!r)return;a=(a%i+i)%i}if(!o(e[a]))return e[a]}}e.step=l;function u(e,t){return l(e,t===1?-1:e.length,t,!1)}e.edge=u;function d(e,t){return t instanceof HTMLElement?e.indexOf(t):-1}e.indexOf=d;function f(e,t,n=!1){if(e===`Home`)return{kind:`edge`,delta:1};if(e===`End`)return{kind:`edge`,delta:-1};let r=t===`vertical`,i=r?`ArrowDown`:n?`ArrowLeft`:`ArrowRight`,a=r?`ArrowUp`:n?`ArrowRight`:`ArrowLeft`;if(e===i)return{kind:`step`,delta:1};if(e===a)return{kind:`step`,delta:-1}}e.moveFor=f;function p(e,t,n,r){return n.kind===`edge`?u(e,n.delta):l(e,t,n.delta,r)}e.target=p;function m(e){if(e)return a(e).find(e=>e.getAttribute(`aria-selected`)===`true`)}e.selectedTab=m;function h(e,t,n){let r=e.getBoundingClientRect(),i=t.getBoundingClientRect();return n===`vertical`?{start:i.top-r.top+e.scrollTop,size:i.height}:{start:i.left-r.left+e.scrollLeft,size:i.width}}e.bounds=h;function g(e,t){return!e||!t?e===t:e.start===t.start&&e.size===t.size}e.sameBounds=g;function _(e){if(e)return[...e.querySelectorAll(r)].find(e=>!e.hasAttribute(`hidden`))}e.visiblePanel=_})(u||={});var d=u,f=(0,c.createContext)(null);function p(e){let t=(0,c.useContext)(f);if(!t)throw Error(`<${e}> has to be rendered inside a <Tabs>.`);return t}function m(e){let{children:t,value:i,defaultValue:s,onValueChange:u,orientation:p=`horizontal`,activation:m=`automatic`,loop:h=!0,keepMounted:g=!1,indicator:_=`static`,props:v,...y}=e,b=a.t(`tabs`),[x,S]=o.a({value:i,defaultValue:s,onChange:u,interaction:{component:`tabs`,type:`valueChange`}}),[C,w]=(0,c.useState)(),[T,E]=(0,c.useState)(!1);n.n(()=>{x!==void 0&&w(x)},[x]);let D=(0,c.useMemo)(()=>({identifier:b,value:x,orientation:p,activation:m,loop:h,keepMounted:g,indicator:_,indicatorLive:T,setIndicatorLive:E,tabStop:C??x,setTabStop:w,select:S,tabId:e=>`${b}-tab-${d.token(e)}`,panelId:e=>`${b}-panel-${d.token(e)}`}),[b,x,p,m,h,g,_,T,C,S]);return(0,l.jsx)(f.Provider,{value:D,children:(0,l.jsx)(r.default,{component:`tabs`,...y,variant:[y.variant,{vertical:p===`vertical`}],props:v,children:t})})}function h(e,a){let{children:o,label:s,labelledBy:u,props:f,...m}=e,{value:h,orientation:g,activation:_,loop:v,indicator:y,tabStop:b,setTabStop:x,setIndicatorLive:S,select:C}=p(`Tabs.List`),w=(0,c.useRef)(null),T=(0,c.useCallback)(e=>{w.current=e,t.l(a,e)},[a]),[E,D]=(0,c.useState)(),O=y===`sliding`;n.n(()=>{let e=w.current;if(!O||!e)return;let t=()=>{let t=d.selectedTab(e),n=t&&d.bounds(e,t,g);D(e=>d.sameBounds(e,n)?e:n)};if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);n.observe(e);for(let t of d.tabs(e))n.observe(t);return()=>n.disconnect()},[O,g,h]);let k=O&&E&&E.size>0?E:void 0;n.n(()=>{S(k!==void 0)},[k,S]),n.n(()=>{if(b!==void 0)return;let e=d.edge(d.tabs(w.current),1),t=e&&d.valueOf(e);t!==void 0&&x(t)},[b,x]);let A=i.a(e=>{let n=w.current;if(!n||e.defaultPrevented||!d.owns(n,e.target))return;let r=d.tabs(n),i=d.indexOf(r,e.target);if(i===-1)return;if(_===`manual`&&(e.key===`Enter`||e.key===` `)){let t=d.valueOf(r[i]);if(t===void 0)return;e.preventDefault(),C(t,{reason:`keyboard`,event:e});return}let a=d.moveFor(e.key,g,t.m(n));if(!a)return;let o=d.target(r,i,a,v);if(!o)return;e.preventDefault(),o.focus();let s=d.valueOf(o);_===`automatic`&&s!==void 0&&C(s,{reason:`keyboard`,event:e})});return(0,l.jsxs)(r.default,{ref:T,component:`tabs.list`,...m,variant:[m.variant,{vertical:g===`vertical`,sliding:O}],props:{role:`tablist`,"aria-label":s,"aria-labelledby":u,"aria-orientation":g,...f,onKeyDown:A},children:[o,k&&(0,l.jsx)(r.default,{tag:`span`,component:`tabs.indicator`,variant:{vertical:g===`vertical`},style:g===`vertical`?{top:`${k.start}px`,height:`${k.size}px`}:{left:`${k.start}px`,width:`${k.size}px`},props:{"aria-hidden":!0}})]})}function g(e){let{value:t,children:n,disabled:a,props:o,...s}=e,{value:c,orientation:u,keepMounted:d,indicatorLive:f,tabStop:m,setTabStop:h,select:g,tabId:_,panelId:v}=p(`Tabs.Tab`),y=c===t,b=i.a(e=>g(t,{reason:`click`,event:e})),x=i.a(()=>h(t));return(0,l.jsx)(r.default,{tag:`button`,component:`tabs.tab`,...s,variant:[s.variant,{vertical:u===`vertical`,underline:!f}],disabled:a,id:_(t),props:{type:`button`,role:`tab`,"aria-selected":y,"aria-controls":y||d?v(t):void 0,tabIndex:m===t?0:-1,"data-value":t,...o,onClick:b,onFocus:x},children:n})}g.displayName=`Tabs.Tab`;function _(e,a){let{children:o,props:u,...f}=e,{value:m}=p(`Tabs.Panels`),h=(0,c.useRef)(null),g=(0,c.useCallback)(e=>{h.current=e,t.l(a,e)},[a]),[_,v]=(0,c.useState)(),[y,b]=(0,c.useState)(!1),x=i.a(()=>{let e=h.current;if(!e)return;let t=d.visiblePanel(e)?.offsetHeight;t!==_&&(_!==void 0&&t!==void 0&&b(!0),v(t))});return n.n(()=>{let e=h.current;if(!e||(x(),typeof ResizeObserver>`u`))return;let t=d.visiblePanel(e);if(!t)return;let n=new ResizeObserver(x);return n.observe(t),()=>n.disconnect()},[m,x]),n.n(()=>{let e=h.current;if(!e||!y)return;let t=setTimeout(()=>b(!1),s.n.activeDuration(getComputedStyle(e))+s.n.SETTLE_FRAME);return()=>clearTimeout(t)},[y,_]),(0,l.jsx)(r.default,{ref:g,component:`tabs.panels`,...f,variant:[f.variant,{resizing:y}],style:{height:_===void 0?void 0:`${_}px`,...f.style},props:u,children:o})}function v(e){let{value:t,children:n,props:i,...a}=e,{value:o,keepMounted:s,tabId:c,panelId:u}=p(`Tabs.Panel`),d=o===t;return!d&&!s?null:(0,l.jsx)(r.default,{component:`tabs.panel`,...a,variant:[a.variant,{hidden:!d}],id:u(t),props:{role:`tabpanel`,"aria-labelledby":c(t),hidden:!d||void 0,tabIndex:0,...i},children:n})}v.displayName=`Tabs.Panel`;var y=m;y.List=e.f(h,`Tabs.List`),y.Tab=g,y.Panels=e.f(_,`Tabs.Panels`),y.Panel=v,y.displayName=`Tabs`,exports.default=y;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../behavior.cjs"),a=require("../identity.cjs"),o=require("../reporting.cjs"),s=require("../motion.cjs");let c=require("react"),l=require("react/jsx-runtime");var u;(function(e){let t=e.TAB_SELECTOR=`[role="tab"]`,n=e.LIST_SELECTOR=`[role="tablist"]`,r=e.PANEL_SELECTOR=`[role="tabpanel"]`;function i(e,t){return t instanceof Element&&t.closest(n)===e}e.owns=i;function a(e){return e?[...e.querySelectorAll(t)].filter(t=>i(e,t)):[]}e.tabs=a;function o(e){return e.hasAttribute(`disabled`)||e.getAttribute(`aria-disabled`)===`true`}e.isDisabled=o;function s(e){return e.dataset.value}e.valueOf=s;function c(e){return e.replace(/[^A-Za-z0-9-]/g,e=>`_${e.codePointAt(0).toString(36)}_`)}e.token=c;function l(e,t,n,r){let i=e.length;if(i===0)return;let a=t<0||t>=i?n>0?-1:i:t;for(let t=0;t<i;t++){if(a+=n,a<0||a>=i){if(!r)return;a=(a%i+i)%i}if(!o(e[a]))return e[a]}}e.step=l;function u(e,t){return l(e,t===1?-1:e.length,t,!1)}e.edge=u;function d(e,t){return t instanceof HTMLElement?e.indexOf(t):-1}e.indexOf=d;function f(e,t,n=!1){if(e===`Home`)return{kind:`edge`,delta:1};if(e===`End`)return{kind:`edge`,delta:-1};let r=t===`vertical`,i=r?`ArrowDown`:n?`ArrowLeft`:`ArrowRight`,a=r?`ArrowUp`:n?`ArrowRight`:`ArrowLeft`;if(e===i)return{kind:`step`,delta:1};if(e===a)return{kind:`step`,delta:-1}}e.moveFor=f;function p(e,t,n,r){return n.kind===`edge`?u(e,n.delta):l(e,t,n.delta,r)}e.target=p;function m(e){if(e)return a(e).find(e=>e.getAttribute(`aria-selected`)===`true`)}e.selectedTab=m;function h(e,t,n){let r=e.getBoundingClientRect(),i=t.getBoundingClientRect();return n===`vertical`?{start:i.top-r.top+e.scrollTop,size:i.height}:{start:i.left-r.left+e.scrollLeft,size:i.width}}e.bounds=h;function g(e,t){return!e||!t?e===t:e.start===t.start&&e.size===t.size}e.sameBounds=g;function _(e){if(e)return[...e.querySelectorAll(r)].find(e=>!e.hasAttribute(`hidden`))}e.visiblePanel=_})(u||={});var d=u,f=(0,c.createContext)(null);function p(e){let t=(0,c.useContext)(f);if(!t)throw Error(`<${e}> has to be rendered inside a <Tabs>.`);return t}function m(e){let{children:t,value:i,defaultValue:s,onValueChange:u,orientation:p=`horizontal`,activation:m=`automatic`,loop:h=!0,keepMounted:g=!1,indicator:_=`static`,props:v,...y}=e,b=a.t(`tabs`),[x,S]=o.a({value:i,defaultValue:s,onChange:u,interaction:{component:`tabs`,type:`valueChange`}}),[C,w]=(0,c.useState)(),[T,E]=(0,c.useState)(!1);n.n(()=>{x!==void 0&&w(x)},[x]);let D=(0,c.useMemo)(()=>({identifier:b,value:x,orientation:p,activation:m,loop:h,keepMounted:g,indicator:_,indicatorLive:T,setIndicatorLive:E,tabStop:C??x,setTabStop:w,select:S,tabId:e=>`${b}-tab-${d.token(e)}`,panelId:e=>`${b}-panel-${d.token(e)}`}),[b,x,p,m,h,g,_,T,C,S]);return(0,l.jsx)(f.Provider,{value:D,children:(0,l.jsx)(r.default,{component:`tabs`,...y,variant:[y.variant,{vertical:p===`vertical`}],props:v,children:t})})}function h(e,a){let{children:o,label:s,labelledBy:u,props:f,...m}=e,{value:h,orientation:g,activation:_,loop:v,indicator:y,tabStop:b,setTabStop:x,setIndicatorLive:S,select:C}=p(`Tabs.List`),w=(0,c.useRef)(null),T=(0,c.useCallback)(e=>{w.current=e,t.l(a,e)},[a]),[E,D]=(0,c.useState)(),O=y===`sliding`;n.n(()=>{let e=w.current;if(!O||!e)return;let t=()=>{let t=d.selectedTab(e),n=t&&d.bounds(e,t,g);D(e=>d.sameBounds(e,n)?e:n)};if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);n.observe(e);for(let t of d.tabs(e))n.observe(t);return()=>n.disconnect()},[O,g,h]);let k=O&&E&&E.size>0?E:void 0;n.n(()=>{S(k!==void 0)},[k,S]),n.n(()=>{if(b!==void 0)return;let e=d.edge(d.tabs(w.current),1),t=e&&d.valueOf(e);t!==void 0&&x(t)},[b,x]);let A=i.a(e=>{let n=w.current;if(!n||e.defaultPrevented||!d.owns(n,e.target))return;let r=d.tabs(n),i=d.indexOf(r,e.target);if(i===-1)return;if(_===`manual`&&(e.key===`Enter`||e.key===` `)){let t=d.valueOf(r[i]);if(t===void 0)return;e.preventDefault(),C(t,{reason:`keyboard`,event:e});return}let a=d.moveFor(e.key,g,t.m(n));if(!a)return;let o=d.target(r,i,a,v);if(!o)return;e.preventDefault(),o.focus();let s=d.valueOf(o);_===`automatic`&&s!==void 0&&C(s,{reason:`keyboard`,event:e})});return(0,l.jsxs)(r.default,{ref:T,component:`tabs.list`,...m,variant:[m.variant,{vertical:g===`vertical`,sliding:O}],props:{role:`tablist`,"aria-label":s,"aria-labelledby":u,"aria-orientation":g,...f,onKeyDown:A},children:[o,k&&(0,l.jsx)(r.default,{tag:`span`,component:`tabs.indicator`,variant:{vertical:g===`vertical`},style:g===`vertical`?{top:`${k.start}px`,height:`${k.size}px`}:{left:`${k.start}px`,width:`${k.size}px`},props:{"aria-hidden":!0}})]})}function g(e){let{value:t,children:n,disabled:a,props:o,...s}=e,{value:c,orientation:u,keepMounted:d,indicatorLive:f,tabStop:m,setTabStop:h,select:g,tabId:_,panelId:v}=p(`Tabs.Tab`),y=c===t,b=i.a(e=>g(t,{reason:`click`,event:e})),x=i.a(()=>h(t));return(0,l.jsx)(r.default,{tag:`button`,component:`tabs.tab`,...s,variant:[s.variant,{vertical:u===`vertical`,underline:!f}],disabled:a,id:_(t),props:{type:`button`,role:`tab`,"aria-selected":y,"aria-controls":y||d?v(t):void 0,tabIndex:m===t?0:-1,"data-value":t,...o,onClick:b,onFocus:x},children:n})}g.displayName=`Tabs.Tab`;function _(e,a){let{children:o,props:u,...f}=e,{value:m}=p(`Tabs.Panels`),h=(0,c.useRef)(null),g=(0,c.useCallback)(e=>{h.current=e,t.l(a,e)},[a]),[_,v]=(0,c.useState)(),[y,b]=(0,c.useState)(!1),x=i.a(()=>{let e=h.current;if(!e)return;let t=d.visiblePanel(e)?.offsetHeight;t!==_&&(_!==void 0&&t!==void 0&&b(!0),v(t))});return n.n(()=>{let e=h.current;if(!e||(x(),typeof ResizeObserver>`u`))return;let t=d.visiblePanel(e);if(!t)return;let n=new ResizeObserver(x);return n.observe(t),()=>n.disconnect()},[m,x]),n.n(()=>{let e=h.current;if(!e||!y)return;let t=setTimeout(()=>b(!1),s.i.activeDuration(getComputedStyle(e))+s.i.SETTLE_FRAME);return()=>clearTimeout(t)},[y,_]),(0,l.jsx)(r.default,{ref:g,component:`tabs.panels`,...f,variant:[f.variant,{resizing:y}],style:{height:_===void 0?void 0:`${_}px`,...f.style},props:u,children:o})}function v(e){let{value:t,children:n,props:i,...a}=e,{value:o,keepMounted:s,tabId:c,panelId:u}=p(`Tabs.Panel`),d=o===t;return!d&&!s?null:(0,l.jsx)(r.default,{component:`tabs.panel`,...a,variant:[a.variant,{hidden:!d}],id:u(t),props:{role:`tabpanel`,"aria-labelledby":c(t),hidden:!d||void 0,tabIndex:0,...i},children:n})}v.displayName=`Tabs.Panel`;var y=m;y.List=e.f(h,`Tabs.List`),y.Tab=g,y.Panels=e.f(_,`Tabs.Panels`),y.Panel=v,y.displayName=`Tabs`,exports.default=y;

package/components/tabs.mjs

@@ -6,7 +6,7 @@ import i from "../box.mjs";
 import { a } from "../behavior.mjs";
 import { t as o } from "../identity.mjs";
 import { a as s } from "../reporting.mjs";
-import { n as c } from "../motion.mjs";
+import { i as c } from "../motion.mjs";
 import { createContext as l, useCallback as u, useContext as d, useMemo as f, useRef as p, useState as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/utils/tabs/tabsUtils.ts

package/components/toaster.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../client.cjs"),r=require("../effects.cjs"),i=require("../interactions.cjs"),a=require("../box.cjs"),o=require("../reporting.cjs"),s=require("../layer.cjs"),c=require("../motion.cjs");let l=require("react"),u=require("react/jsx-runtime"),d=require("react-dom"),f=require("use-sync-external-store/shim");var p=[`value`],m={toasts:[],overflow:0},h=0;function g(){return h+=1,`toast-${h}`}function _(e){let t=[],n=m,r=e?.limit??3,a=e?.duration??5e3,o=!1,s=new Set,c=new Map,l=e=>{let t=c.get(e);t?.handle&&clearTimeout(t.handle),c.delete(e)},u=()=>{let e=0;t=t.map(t=>{let n=!t.open||e++<r;return t.visible===n?t:{...t,visible:n}}),n={toasts:t,overflow:Math.max(0,e-r)},d(),s.forEach(e=>e())};function d(){let e=new Set;for(let n of t){if(!n.open||!n.visible||!Number.isFinite(n.duration))continue;e.add(n.id);let t=c.get(n.id)??{handle:null,remaining:n.duration,startedAt:0};c.set(n.id,t),!(o||t.handle)&&(t.startedAt=Date.now(),t.handle=setTimeout(()=>{c.delete(n.id),h(n.id,`timeout`)},t.remaining))}for(let t of[...c.keys()])e.has(t)||l(t)}let f=(e,t)=>t??(e===`loading`?1/0:a);function h(e,n=`imperative`){let r=[];t=t.map(t=>!t.open||e!==void 0&&t.id!==e?t:(r.push(t),l(t.id),{...t,open:!1})),r.length&&(u(),r.forEach(e=>{e.onDismiss?.(n),i.t({component:`toaster`,type:`dismiss`,reason:n,value:e.message,details:{id:e.id,kind:e.kind},content:p})}))}function _(e,n,r){let a=!1;t=t.map(t=>{if(t.id!==e)return t;a=!0,l(e);let i=r?.kind??t.kind;return{...t,...r,id:e,message:n,kind:i,duration:r?.duration??(r?.kind?f(i):t.duration),open:!0}}),a&&(u(),i.t({component:`toaster`,type:`update`,reason:r?.kind,value:n,details:{id:e},source:`app`,content:p}))}function v(e,n){let r=n?.id??g();if(n?.id&&t.some(e=>e.id===r))return _(r,e,n),r;let a=n?.kind??`default`;return t=[...t,{id:r,kind:a,message:e,description:n?.description,duration:f(a,n?.duration),action:n?.action,dismissible:n?.dismissible??!0,onDismiss:n?.onDismiss,open:!0,visible:!1}],u(),i.t({component:`toaster`,type:`show`,reason:a,value:e,details:{id:r,kind:a},source:`app`,content:p}),r}return{subscribe(e){return s.add(e),()=>s.delete(e)},getSnapshot:()=>n,getServerSnapshot:()=>m,add:v,update:_,dismiss:h,remove(e){let n=t.filter(t=>t.id!==e);n.length!==t.length&&(l(e),t=n,u())},setLimit(e){e!==r&&(r=e,u())},setDefaultDuration(e){a=e},pause(){if(!o){o=!0;for(let e of c.values())e.handle&&(clearTimeout(e.handle),e.handle=null,e.remaining=Math.max(0,e.remaining-(Date.now()-e.startedAt)))}},resume(){o&&(o=!1,d())},reset(){for(let e of[...c.keys()])l(e);t=[],n=m,s.forEach(e=>e())}}}var v=_(),y=e=>(t,n)=>v.add(t,{...n,kind:e}),b=Object.assign((e,t)=>v.add(e,t),{success:y(`success`),error:y(`error`),warning:y(`warning`),info:y(`info`),loading:y(`loading`),update:(e,t,n)=>v.update(e,t,n),dismiss:e=>v.dismiss(e,`imperative`),promise(e,t,n){let r=v.add(t.loading,{...n,id:n?.id,kind:`loading`}),i=(e,t)=>typeof e==`function`?e(t):e;return e.then(e=>v.update(r,i(t.success,e),{kind:`success`}),e=>v.update(r,i(t.error,e),{kind:`error`})),e}}),x={"top-start":`topStart`,"top-center":`topCenter`,"top-end":`topEnd`,"bottom-start":`bottomStart`,"bottom-center":`bottomCenter`,"bottom-end":`bottomEnd`};function S(e,t){let n=t.toLowerCase().split(`+`),r=n[n.length-1],i=new Set(n.slice(0,-1));return e.key.toLowerCase()===r&&e.altKey===i.has(`alt`)&&e.ctrlKey===i.has(`ctrl`)&&e.shiftKey===i.has(`shift`)&&e.metaKey===i.has(`meta`)}function C(e){let{toast:t,store:n,fromTop:i,closeLabel:s}=e,{mounted:l,ref:d,props:f}=c.t({present:t.open}),p=o.i(`toaster`);if(r.n(()=>{l||n.remove(t.id)},[l,n,t.id]),!l)return null;let m=t.action,h=()=>{m?.onClick(),m?.closeOnClick===!1?p(`action`,t.message,{reason:`action`,id:t.id,kind:t.kind,content:[`value`]}):n.dismiss(t.id,`action`)};return(0,u.jsxs)(a.default,{ref:d,component:`toaster.toast`,variant:{[t.kind]:t.kind!=="default",fromTop:i},props:{...t.kind===`error`?{role:`alert`}:{},"data-toast-id":t.id,...f},children:[(0,u.jsx)(a.default,{component:`toaster.message`,children:t.message}),t.description!==void 0&&(0,u.jsx)(a.default,{component:`toaster.description`,children:t.description}),m&&(0,u.jsx)(a.default,{tag:`button`,component:`toaster.action`,props:{type:`button`,onClick:h},children:m.label}),t.dismissible&&(0,u.jsx)(a.default,{tag:`button`,component:`toaster.close`,props:{type:`button`,"aria-label":s,onClick:()=>n.dismiss(t.id,`close`)}})]})}function w(e,i){let{position:o=`bottom-end`,limit:c=3,duration:p=5e3,label:m=`Notifications`,closeLabel:h=`Close`,overflowLabel:g=e=>`+${e} more`,hotkey:_=`F6`,store:y=v,props:b,...w}=e,T=(0,f.useSyncExternalStore)(y.subscribe,y.getSnapshot,y.getServerSnapshot),E=s.n(),D=n.t(!E),O=(0,l.useRef)(null),k=(0,l.useCallback)(e=>{O.current=e,t.l(i,e)},[i]),A=(0,l.useRef)(null),j=(0,l.useRef)({hovered:!1,focused:!1,hidden:!1}),M=(0,l.useCallback)(()=>{let{hovered:e,focused:t,hidden:n}=j.current;e||t||n?y.pause():y.resume()},[y]);r.n(()=>y.setLimit(c),[y,c]),r.n(()=>y.setDefaultDuration(p),[y,p]),r.n(()=>{let e=O.current;!E||!t.c()||!e||!e.isConnected||e.matches(`:popover-open`)||e.showPopover()}),r.n(()=>{let e=t.t();if(!e)return;let n=new AbortController;return e.addEventListener(`visibilitychange`,()=>{j.current.hidden=e.hidden,M()},{signal:n.signal}),()=>n.abort()},[M]),r.n(()=>{let e=t.t();if(!_||!e)return;let n=new AbortController;return e.addEventListener(`keydown`,t=>{!S(t,_)||!O.current||(t.preventDefault(),A.current=e.activeElement,O.current.focus())},{signal:n.signal}),()=>n.abort()},[_]);let N=e=>!!e&&!!O.current?.contains(e),P=()=>{j.current.hovered=!0,M()},F=e=>{N(e.relatedTarget)||(j.current.hovered=!1,M())},I=e=>{j.current.focused=!0,M(),N(e.relatedTarget)||(A.current=e.relatedTarget)},L=e=>{N(e.relatedTarget)||(j.current.focused=!1,M())},R=e=>{if(e.key!==`Escape`)return;let t=(e.target.closest?.(`[data-toast-id]`))?.getAttribute(`data-toast-id`);t&&y.dismiss(t,`close`),y.getSnapshot().toasts.some(e=>e.open)?O.current?.focus():A.current?.focus()},z=o.startsWith(`top`),B=T.toasts.filter(e=>e.visible),V=z?[...B].reverse():B,H=T.overflow>0&&(0,u.jsx)(a.default,{component:`toaster.overflow`,children:g(T.overflow)}),U=(0,u.jsxs)(a.default,{tag:`section`,ref:k,component:`toaster`,...w,variant:[w.variant,{[x[o]]:!0}],props:{...E?{popover:`manual`}:{},"aria-live":`polite`,"aria-atomic":`false`,"aria-relevant":`additions text`,"aria-label":m,tabIndex:-1,...b,onPointerOver:P,onPointerOut:F,onFocus:I,onBlur:L,onKeyDown:R},children:[!z&&H,V.map(e=>(0,u.jsx)(C,{toast:e,store:y,fromTop:z,closeLabel:h},e.id)),z&&H]});return E?U:D?(0,d.createPortal)(U,D):null}var T=e.f(w,`Toaster`);exports.createToastStore=_,exports.default=T,exports.defaultToastStore=v,exports.toast=b;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../client.cjs"),r=require("../effects.cjs"),i=require("../interactions.cjs"),a=require("../box.cjs"),o=require("../reporting.cjs"),s=require("../layer.cjs"),c=require("../motion.cjs");let l=require("react"),u=require("react/jsx-runtime"),d=require("react-dom"),f=require("use-sync-external-store/shim");var p=[`value`],m={toasts:[],overflow:0},h=0;function g(){return h+=1,`toast-${h}`}function _(e){let t=[],n=m,r=e?.limit??3,a=e?.duration??5e3,o=!1,s=new Set,c=new Map,l=e=>{let t=c.get(e);t?.handle&&clearTimeout(t.handle),c.delete(e)},u=()=>{let e=0;t=t.map(t=>{let n=!t.open||e++<r;return t.visible===n?t:{...t,visible:n}}),n={toasts:t,overflow:Math.max(0,e-r)},d(),s.forEach(e=>e())};function d(){let e=new Set;for(let n of t){if(!n.open||!n.visible||!Number.isFinite(n.duration))continue;e.add(n.id);let t=c.get(n.id)??{handle:null,remaining:n.duration,startedAt:0};c.set(n.id,t),!(o||t.handle)&&(t.startedAt=Date.now(),t.handle=setTimeout(()=>{c.delete(n.id),h(n.id,`timeout`)},t.remaining))}for(let t of[...c.keys()])e.has(t)||l(t)}let f=(e,t)=>t??(e===`loading`?1/0:a);function h(e,n=`imperative`){let r=[];t=t.map(t=>!t.open||e!==void 0&&t.id!==e?t:(r.push(t),l(t.id),{...t,open:!1})),r.length&&(u(),r.forEach(e=>{e.onDismiss?.(n),i.t({component:`toaster`,type:`dismiss`,reason:n,value:e.message,details:{id:e.id,kind:e.kind},content:p})}))}function _(e,n,r){let a=!1;t=t.map(t=>{if(t.id!==e)return t;a=!0,l(e);let i=r?.kind??t.kind;return{...t,...r,id:e,message:n,kind:i,duration:r?.duration??(r?.kind?f(i):t.duration),open:!0}}),a&&(u(),i.t({component:`toaster`,type:`update`,reason:r?.kind,value:n,details:{id:e},source:`app`,content:p}))}function v(e,n){let r=n?.id??g();if(n?.id&&t.some(e=>e.id===r))return _(r,e,n),r;let a=n?.kind??`default`;return t=[...t,{id:r,kind:a,message:e,description:n?.description,duration:f(a,n?.duration),action:n?.action,dismissible:n?.dismissible??!0,onDismiss:n?.onDismiss,open:!0,visible:!1}],u(),i.t({component:`toaster`,type:`show`,reason:a,value:e,details:{id:r,kind:a},source:`app`,content:p}),r}return{subscribe(e){return s.add(e),()=>s.delete(e)},getSnapshot:()=>n,getServerSnapshot:()=>m,add:v,update:_,dismiss:h,remove(e){let n=t.filter(t=>t.id!==e);n.length!==t.length&&(l(e),t=n,u())},setLimit(e){e!==r&&(r=e,u())},setDefaultDuration(e){a=e},pause(){if(!o){o=!0;for(let e of c.values())e.handle&&(clearTimeout(e.handle),e.handle=null,e.remaining=Math.max(0,e.remaining-(Date.now()-e.startedAt)))}},resume(){o&&(o=!1,d())},reset(){for(let e of[...c.keys()])l(e);t=[],n=m,s.forEach(e=>e())}}}var v=_(),y=e=>(t,n)=>v.add(t,{...n,kind:e}),b=Object.assign((e,t)=>v.add(e,t),{success:y(`success`),error:y(`error`),warning:y(`warning`),info:y(`info`),loading:y(`loading`),update:(e,t,n)=>v.update(e,t,n),dismiss:e=>v.dismiss(e,`imperative`),promise(e,t,n){let r=v.add(t.loading,{...n,id:n?.id,kind:`loading`}),i=(e,t)=>typeof e==`function`?e(t):e;return e.then(e=>v.update(r,i(t.success,e),{kind:`success`}),e=>v.update(r,i(t.error,e),{kind:`error`})),e}}),x={"top-start":`topStart`,"top-center":`topCenter`,"top-end":`topEnd`,"bottom-start":`bottomStart`,"bottom-center":`bottomCenter`,"bottom-end":`bottomEnd`};function S(e,t){let n=t.toLowerCase().split(`+`),r=n[n.length-1],i=new Set(n.slice(0,-1));return e.key.toLowerCase()===r&&e.altKey===i.has(`alt`)&&e.ctrlKey===i.has(`ctrl`)&&e.shiftKey===i.has(`shift`)&&e.metaKey===i.has(`meta`)}function C(e){let{toast:t,store:n,fromTop:i,closeLabel:s}=e,{mounted:l,ref:d,props:f}=c.r({present:t.open}),p=o.i(`toaster`);if(r.n(()=>{l||n.remove(t.id)},[l,n,t.id]),!l)return null;let m=t.action,h=()=>{m?.onClick(),m?.closeOnClick===!1?p(`action`,t.message,{reason:`action`,id:t.id,kind:t.kind,content:[`value`]}):n.dismiss(t.id,`action`)};return(0,u.jsxs)(a.default,{ref:d,component:`toaster.toast`,variant:{[t.kind]:t.kind!=="default",fromTop:i},props:{...t.kind===`error`?{role:`alert`}:{},"data-toast-id":t.id,...f},children:[(0,u.jsx)(a.default,{component:`toaster.message`,children:t.message}),t.description!==void 0&&(0,u.jsx)(a.default,{component:`toaster.description`,children:t.description}),m&&(0,u.jsx)(a.default,{tag:`button`,component:`toaster.action`,props:{type:`button`,onClick:h},children:m.label}),t.dismissible&&(0,u.jsx)(a.default,{tag:`button`,component:`toaster.close`,props:{type:`button`,"aria-label":s,onClick:()=>n.dismiss(t.id,`close`)}})]})}function w(e,i){let{position:o=`bottom-end`,limit:c=3,duration:p=5e3,label:m=`Notifications`,closeLabel:h=`Close`,overflowLabel:g=e=>`+${e} more`,hotkey:_=`F6`,store:y=v,props:b,...w}=e,T=(0,f.useSyncExternalStore)(y.subscribe,y.getSnapshot,y.getServerSnapshot),E=s.n(),D=n.t(!E),O=(0,l.useRef)(null),k=(0,l.useCallback)(e=>{O.current=e,t.l(i,e)},[i]),A=(0,l.useRef)(null),j=(0,l.useRef)({hovered:!1,focused:!1,hidden:!1}),M=(0,l.useCallback)(()=>{let{hovered:e,focused:t,hidden:n}=j.current;e||t||n?y.pause():y.resume()},[y]);r.n(()=>y.setLimit(c),[y,c]),r.n(()=>y.setDefaultDuration(p),[y,p]),r.n(()=>{let e=O.current;!E||!t.c()||!e||!e.isConnected||e.matches(`:popover-open`)||e.showPopover()}),r.n(()=>{let e=t.t();if(!e)return;let n=new AbortController;return e.addEventListener(`visibilitychange`,()=>{j.current.hidden=e.hidden,M()},{signal:n.signal}),()=>n.abort()},[M]),r.n(()=>{let e=t.t();if(!_||!e)return;let n=new AbortController;return e.addEventListener(`keydown`,t=>{!S(t,_)||!O.current||(t.preventDefault(),A.current=e.activeElement,O.current.focus())},{signal:n.signal}),()=>n.abort()},[_]);let N=e=>!!e&&!!O.current?.contains(e),P=()=>{j.current.hovered=!0,M()},F=e=>{N(e.relatedTarget)||(j.current.hovered=!1,M())},I=e=>{j.current.focused=!0,M(),N(e.relatedTarget)||(A.current=e.relatedTarget)},L=e=>{N(e.relatedTarget)||(j.current.focused=!1,M())},R=e=>{if(e.key!==`Escape`)return;let t=(e.target.closest?.(`[data-toast-id]`))?.getAttribute(`data-toast-id`);t&&y.dismiss(t,`close`),y.getSnapshot().toasts.some(e=>e.open)?O.current?.focus():A.current?.focus()},z=o.startsWith(`top`),B=T.toasts.filter(e=>e.visible),V=z?[...B].reverse():B,H=T.overflow>0&&(0,u.jsx)(a.default,{component:`toaster.overflow`,children:g(T.overflow)}),U=(0,u.jsxs)(a.default,{tag:`section`,ref:k,component:`toaster`,...w,variant:[w.variant,{[x[o]]:!0}],props:{...E?{popover:`manual`}:{},"aria-live":`polite`,"aria-atomic":`false`,"aria-relevant":`additions text`,"aria-label":m,tabIndex:-1,...b,onPointerOver:P,onPointerOut:F,onFocus:I,onBlur:L,onKeyDown:R},children:[!z&&H,V.map(e=>(0,u.jsx)(C,{toast:e,store:y,fromTop:z,closeLabel:h},e.id)),z&&H]});return E?U:D?(0,d.createPortal)(U,D):null}var T=e.f(w,`Toaster`);exports.createToastStore=_,exports.default=T,exports.defaultToastStore=v,exports.toast=b;

package/components/toaster.mjs

@@ -7,7 +7,7 @@ import { t as o } from "../interactions.mjs";
 import s from "../box.mjs";
 import { i as c } from "../reporting.mjs";
 import { n as l } from "../layer.mjs";
-import { t as u } from "../motion.mjs";
+import { r as u } from "../motion.mjs";
 import { useCallback as d, useRef as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { createPortal as h } from "react-dom";

package/docs/props.md

@@ -1050,10 +1050,10 @@ The margin CSS shorthand property sets the margin area on all four sides of an e
 
 ### `maskImage`
 
-What the element is masked by: the alpha channel of an image decides which of its pixels are painted. Takes the same gradient record `bgGradient` does — so a fade to `transparent` is the whole edge-fade recipe — or a `url(#id)`/`var(--name)` somebody else defined. One mask, not a stack.
+What the element is masked by: the alpha channel of an image decides which of its pixels are painted. Takes the same gradient record `bgGradient` does — so a fade to `transparent` is the whole edge-fade recipe — or a `url(#id)`/`var(--name)` somebody else defined. One mask, not a stack. `check`, `dash` and `dot` are the checkbox and radio marks, so the mark is painted by `bgColor` and follows the theme.
 
 - Writes: `mask-image`
-- Values: `none`, anything else the types allow
+- Values: `none` · `check` · `dash` · `dot`, anything else the types allow
 - Example: `maskImage={{ linear: 'b', colors: ['black', 'transparent'] }}` → `mask-image: linear-gradient(to bottom,var(--black,#000),var(--transparent,transparent))`
 
 ### `maxHeight`

package/motion.cjs

@@ -1 +1 @@
-const e=require("./effects.cjs");let t=require("react");var n;(function(e){e.SETTLE_FRAME=16;function t(e){let t=parseFloat(e);return Number.isNaN(t)?0:e.endsWith(`ms`)?t:t*1e3}function n(e){return e.split(`,`).map(e=>e.trim())}function r(e,t){return e[t%e.length]}function i(e){return e===``?1:parseFloat(e)}function a(e){let i=n(e.transitionDuration),a=n(e.transitionDelay),o=0;for(let e=0;e<Math.max(i.length,a.length);e++)o=Math.max(o,t(r(i,e))+t(r(a,e)));return o}function o(e){let a=n(e.animationDuration),o=n(e.animationDelay),s=n(e.animationIterationCount);return n(e.animationName).reduce((e,n,c)=>{if(n===``||n===`none`)return e;let l=i(r(s,c));return Number.isFinite(l)?Math.max(e,t(r(a,c))*l+t(r(o,c))):e},0)}function s(e){return Math.max(a(e),o(e))}e.activeDuration=s})(n||={});var r=n;function i(n){let{present:i}=n,[a,o]=(0,t.useState)(i?`open`:`closed`),s=(0,t.useRef)(null),c=(0,t.useCallback)(e=>{s.current=e},[]),l=i?`open`:a===`closed`?`closed`:`leaving`;return l!==a&&o(l),e.n(()=>{if(l!==`leaving`)return;let e=s.current,t=e?r.activeDuration(getComputedStyle(e)):0;if(t<=0){o(`closed`);return}let n=setTimeout(()=>o(`closed`),t+r.SETTLE_FRAME);return()=>clearTimeout(n)},[l]),(0,t.useMemo)(()=>{let e=l===`open`?`open`:`closed`;return{mounted:l!==`closed`,present:l===`open`,state:e,ref:c,props:{"data-state":e}}},[l,c])}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});
+const e=require("./effects.cjs");let t=require("react");var n;(function(e){e.SETTLE_FRAME=16;function t(e){let t=parseFloat(e);return Number.isNaN(t)?0:e.endsWith(`ms`)?t:t*1e3}function n(e){return e.split(`,`).map(e=>e.trim())}function r(e,t){return e[t%e.length]}function i(e){return e===``?1:parseFloat(e)}function a(e){let i=n(e.transitionDuration),a=n(e.transitionDelay),o=0;for(let e=0;e<Math.max(i.length,a.length);e++)o=Math.max(o,t(r(i,e))+t(r(a,e)));return o}function o(e){let a=n(e.animationDuration),o=n(e.animationDelay),s=n(e.animationIterationCount);return n(e.animationName).reduce((e,n,c)=>{if(n===``||n===`none`)return e;let l=i(r(s,c));return Number.isFinite(l)?Math.max(e,t(r(a,c))*l+t(r(o,c))):e},0)}function s(e){return Math.max(a(e),o(e))}e.activeDuration=s})(n||={});var r=n;function i(e){let n=(0,t.useRef)(null),r=(0,t.useCallback)(e=>{n.current=e},[]),i=(0,t.useCallback)(()=>n.current,[]),o=a(e.present,i);return(0,t.useMemo)(()=>{let e=o===`open`?`open`:`closed`;return{mounted:o!==`closed`,present:o===`open`,state:e,ref:r,props:{"data-state":e}}},[o,r])}function a(n,i){let[a,o]=(0,t.useState)(n?`open`:`closed`),s=n?`open`:a===`closed`?`closed`:`leaving`;return s!==a&&o(s),e.n(()=>{if(s!==`leaving`)return;let e=i(),t=e?r.activeDuration(getComputedStyle(e)):0;if(t<=0){o(`closed`);return}let n=setTimeout(()=>o(`closed`),t+r.SETTLE_FRAME);return()=>clearTimeout(n)},[s,i]),s}function o(e,n,r){let i=a(n,(0,t.useCallback)(()=>r,[r])),[o,s]=(0,t.useState)(e);return n&&o!==e&&s(e),i===`leaving`?o:e}Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/motion.mjs

@@ -38,29 +38,39 @@ var a;
 var o = a;
 //#endregion
 //#region src/react/animation/usePresence.ts
-function s(a) {
-	let { present: s } = a, [c, l] = i(s ? "open" : "closed"), u = r(null), d = t((e) => {
-		u.current = e;
-	}, []), f = s ? "open" : c === "closed" ? "closed" : "leaving";
-	return f !== c && l(f), e(() => {
-		if (f !== "leaving") return;
-		let e = u.current, t = e ? o.activeDuration(getComputedStyle(e)) : 0;
-		if (t <= 0) {
-			l("closed");
-			return;
-		}
-		let n = setTimeout(() => l("closed"), t + o.SETTLE_FRAME);
-		return () => clearTimeout(n);
-	}, [f]), n(() => {
-		let e = f === "open" ? "open" : "closed";
+function s(e) {
+	let i = r(null), a = t((e) => {
+		i.current = e;
+	}, []), o = t(() => i.current, []), s = c(e.present, o);
+	return n(() => {
+		let e = s === "open" ? "open" : "closed";
 		return {
-			mounted: f !== "closed",
-			present: f === "open",
+			mounted: s !== "closed",
+			present: s === "open",
 			state: e,
-			ref: d,
+			ref: a,
 			props: { "data-state": e }
 		};
-	}, [f, d]);
+	}, [s, a]);
+}
+function c(t, n) {
+	let [r, a] = i(t ? "open" : "closed"), s = t ? "open" : r === "closed" ? "closed" : "leaving";
+	return s !== r && a(s), e(() => {
+		if (s !== "leaving") return;
+		let e = n(), t = e ? o.activeDuration(getComputedStyle(e)) : 0;
+		if (t <= 0) {
+			a("closed");
+			return;
+		}
+		let r = setTimeout(() => a("closed"), t + o.SETTLE_FRAME);
+		return () => clearTimeout(r);
+	}, [s, n]), s;
+}
+//#endregion
+//#region src/react/animation/useHeldContent.ts
+function l(e, n, r) {
+	let a = c(n, t(() => r, [r])), [o, s] = i(e);
+	return n && o !== e && s(e), a === "leaving" ? o : e;
 }
 //#endregion
-export { o as n, s as t };
+export { o as i, c as n, s as r, l as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.2.16",
+  "version": "2.2.17",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -132,7 +132,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "41.15 kB"
+      "limit": "43.33 kB"
     },
     {
       "name": "Box in a Server Component (react-server entry)",
@@ -145,7 +145,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "38.55 kB"
+      "limit": "40.72 kB"
     },
     {
       "name": "Behavior primitives (a11y entry)",
@@ -158,7 +158,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "3.26 kB"
+      "limit": "5.26 kB"
     },
     {
       "name": "Anchor positioning (anchor entry)",
@@ -171,7 +171,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "2.27 kB"
+      "limit": "4.27 kB"
     },
     {
       "name": "Component catalog (catalog entry)",
@@ -184,7 +184,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "62.32 kB"
+      "limit": "64.50 kB"
     },
     {
       "name": "Spec renderer (spec entry)",
@@ -197,7 +197,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "4.75 kB"
+      "limit": "6.75 kB"
     },
     {
       "name": "Ecosystem interop (interop entry)",
@@ -210,7 +210,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "4 KB"
+      "limit": "6.00 kB"
     },
     {
       "name": "Analytics (analytics entry, no React)",
@@ -223,7 +223,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "1.94 kB"
+      "limit": "3.94 kB"
     },
     {
       "name": "Dates, times and zones (date entry, no React)",
@@ -236,13 +236,13 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "7.59 KB"
+      "limit": "9.59 kB"
     },
     {
       "name": "Core engine (@box-kite/core, no React)",
       "path": "dist-core/core.mjs",
       "gzip": true,
-      "limit": "39.77 kB",
+      "limit": "41.95 kB",
       "ignore": [
         "./diagnostics-*",
         "./themeReveal-*",
@@ -260,7 +260,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "43.47 kB"
+      "limit": "46.14 kB"
     },
     {
       "name": "Popover",
@@ -273,7 +273,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "45.00 kB"
+      "limit": "47.67 kB"
     },
     {
       "name": "Menu",
@@ -286,7 +286,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "47.35 kB"
+      "limit": "49.98 kB"
     },
     {
       "name": "Accordion",
@@ -299,7 +299,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "42.75 kB"
+      "limit": "44.92 kB"
     },
     {
       "name": "Agent",
@@ -312,7 +312,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "43.45 kB"
+      "limit": "45.62 kB"
     },
     {
       "name": "Markdown",
@@ -325,7 +325,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "41.75 kB"
+      "limit": "43.93 kB"
     },
     {
       "name": "List",
@@ -338,7 +338,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "43.09 kB"
+      "limit": "45.25 kB"
     },
     {
       "name": "SwipeItem",
@@ -351,7 +351,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "46.38 kB"
+      "limit": "48.54 kB"
     },
     {
       "name": "SortableList",
@@ -364,7 +364,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "46.72 kB"
+      "limit": "48.86 kB"
     },
     {
       "name": "VirtualList",
@@ -377,7 +377,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "45.28 kB"
+      "limit": "47.49 kB"
     },
     {
       "name": "Skeleton",
@@ -390,7 +390,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "41.07 kB"
+      "limit": "43.24 kB"
     },
     {
       "name": "Tabs",
@@ -403,7 +403,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "43.95 kB"
+      "limit": "46.11 kB"
     },
     {
       "name": "Slider",
@@ -416,7 +416,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "43.09 kB"
+      "limit": "45.24 kB"
     },
     {
       "name": "Progress",
@@ -429,7 +429,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "41.03 kB"
+      "limit": "43.20 kB"
     },
     {
       "name": "Toaster",
@@ -442,7 +442,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "44.72 kB"
+      "limit": "46.91 kB"
     },
     {
       "name": "DateField",
@@ -455,7 +455,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "49.93 kB"
+      "limit": "52.11 kB"
     },
     {
       "name": "Calendar",
@@ -468,7 +468,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "49.39 kB"
+      "limit": "51.53 kB"
     },
     {
       "name": "DatePicker",
@@ -481,7 +481,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "63.06 kB"
+      "limit": "65.70 kB"
     },
     {
       "name": "DateTime",
@@ -494,7 +494,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "44.61 kB"
+      "limit": "46.78 kB"
     },
     {
       "name": "TimeZoneSelect",
@@ -507,7 +507,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "52.48 kB"
+      "limit": "54.68 kB"
     },
     {
       "name": "Combobox",
@@ -520,7 +520,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "50.46 kB"
+      "limit": "52.66 kB"
     },
     {
       "name": "Dashboard",
@@ -533,7 +533,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "47.03 kB"
+      "limit": "49.20 kB"
     },
     {
       "name": "DataGrid",
@@ -548,7 +548,7 @@
         "../dataGridDateParts.mjs"
       ],
       "gzip": true,
-      "limit": "97.66 kB"
+      "limit": "99.89 kB"
     },
     {
       "name": "Interaction delivery, the chunk the first Box.onInteraction fetches",
@@ -558,7 +558,7 @@
         "react-dom"
       ],
       "gzip": true,
-      "limit": "1.44 kB"
+      "limit": "3.44 kB"
     },
     {
       "name": "DataGrid export, the chunk fetched on the first press",
@@ -571,7 +571,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "3.86 kB"
+      "limit": "5.86 kB"
     },
     {
       "name": "DataGrid list layout, the chunk a narrow grid fetches on top of the grid",
@@ -586,7 +586,7 @@
         "./components/*"
       ],
       "gzip": true,
-      "limit": "7.89 kB"
+      "limit": "9.89 kB"
     },
     {
       "name": "DataGrid dates, the chunk a grid with a date column fetches on top of the grid",
@@ -601,7 +601,7 @@
         "./components/*"
       ],
       "gzip": true,
-      "limit": "7.56 kB"
+      "limit": "9.56 kB"
     },
     {
       "name": "Full library (Box + ssg + every component)",
@@ -614,7 +614,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "167.55 kB"
+      "limit": "169.84 kB"
     }
   ],
   "repository": {
@@ -654,7 +654,7 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@box-kite/core": "2.2.16",
+    "@box-kite/core": "2.2.17",
     "csstype": "^3.2.3",
     "use-sync-external-store": "^1.6.0"
   },

package/react/animation/useHeldContent.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A layer that is always rendered (a `<dialog>`, a popover) keeps the content it last showed open until its
+ * own exit transition has run. Without it `{open && <Form />}` empties the panel in the closing commit, and
+ * the exit animates a blank box (bug #314).
+ */
+export default function useHeldContent<T>(content: T, open: boolean, element: HTMLElement | null): T;

package/react/animation/usePresence.d.ts

@@ -1,6 +1,8 @@
 import { RefCallback } from 'react';
 /** The Radix / Base UI attribute value, so a `[data-state]` selector written for either works here too. */
 export type PresenceState = 'open' | 'closed';
+/** Where the subtree is in its own lifetime. `leaving` is the whole of the exit; `closed` is gone. */
+export type ExitPhase = 'open' | 'leaving' | 'closed';
 export interface PresenceOptions {
     /** Whether the subtree should be there. The exit starts the moment this goes false. */
     present: boolean;
@@ -30,3 +32,5 @@ export interface Presence {
  * the real CSS: a zero duration (nothing declared, or `prefers-reduced-motion`) unmounts in the same commit.
  */
 export default function usePresence(options: PresenceOptions): Presence;
+/** The phase machine behind `usePresence`, for any element whose exit is its own CSS. `readNode` is called as the exit starts. */
+export declare function useExitPhase(present: boolean, readNode: () => HTMLElement | null): ExitPhase;