@box-kite/react 2.2.3 → 2.2.5

package/components/slider.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs");let r=require("react"),i=require("react/jsx-runtime");var a;(function(e){function t(e){let t=String(Math.abs(e));if(t.includes(`e`))return 12;let n=t.indexOf(`.`);return n===-1?0:t.length-n-1}e.decimals=t;function n(e,t){return Number(e.toFixed(Math.min(t,15)))}function r(e,t,n){return Math.min(Math.max(e,t),n)}e.clamp=r;function i(e,i){let{min:a,max:o,step:s}=i,c=r(e,a,o);return s>0?r(n(a+Math.round((c-a)/s)*s,t(s)+t(a)),a,o):c}e.snap=i;function a(e,t,n){return n<=t?0:(r(e,t,n)-t)*(100/(n-t))}e.percent=a;function o(e,t,n){return`${Math.round(a(e,t,n)*100)/100}%`}e.percentage=o;function s(e){return typeof e==`number`?[e]:[...e]}e.thumbs=s;function c(e,t){return typeof e==`number`?t[0]:[...t]}e.shaped=c;function l(e,t,n,a){let o=t>0?e[t-1]:a.min,s=t<e.length-1?e[t+1]:a.max,c=[...e];return c[t]=r(i(n,a),o,s),c}e.move=l;function u(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}e.same=u;function d(e,t){let n=0,r=1/0;return e.forEach((e,i)=>{let a=Math.abs(e-t);a<=r&&(n=i,r=a)}),n}e.nearest=d;function f(e,t,n,r,i){let a=r===`vertical`?e.height===0?0:(e.bottom-n)/e.height:e.width===0?0:i?(e.right-t)/e.width:(t-e.left)/e.width;return Math.min(Math.max(a,0),1)}e.valueAt=f;function p(e,t=!1){if(e===`Home`)return{kind:`edge`,delta:-1};if(e===`End`)return{kind:`edge`,delta:1};if(e===`PageUp`)return{kind:`page`,delta:1};if(e===`PageDown`)return{kind:`page`,delta:-1};if(e===`ArrowUp`)return{kind:`step`,delta:1};if(e===`ArrowDown`)return{kind:`step`,delta:-1};if(e===`ArrowRight`)return{kind:`step`,delta:t?-1:1};if(e===`ArrowLeft`)return{kind:`step`,delta:t?1:-1}}e.moveFor=p;function m(e,t,n,r){if(t.kind===`edge`)return t.delta>0?n.max:n.min;let i=t.kind===`page`?r:n.step;return e+t.delta*i}e.moved=m})(a||={});var o=a,s=`data-index`;function c(e,t,n){return{min:e,max:t,step:n}}function l(e,t){return t?{insetBlockEnd:e}:{insetInlineStart:e}}function u(e,t,n){let r=e.length>1?Math.min(...e):t.min,i=Math.max(...e),a=o.percent(r,t.min,t.max),s=`${Math.round((o.percent(i,t.min,t.max)-a)*100)/100}%`;return n?{insetBlockEnd:`${Math.round(a*100)/100}%`,blockSize:s}:{insetInlineStart:`${Math.round(a*100)/100}%`,inlineSize:s}}function d(a){let{value:d,defaultValue:f,onValueChange:p,onValueCommit:m,min:h=0,max:g=100,step:_=1,largeStep:v=_*10,orientation:y=`horizontal`,disabled:b=!1,label:x,labelledBy:S,thumbLabels:C,format:w,name:T,props:E,...D}=a,O=(0,r.useRef)(null),k=(0,r.useRef)(null),A=(0,r.useRef)(null),j=(0,r.useRef)(!1),[M,N]=(0,r.useState)(!1),[P,F]=n.i({value:d,defaultValue:f??h,onChange:p}),I=c(h,g,_),L=y===`vertical`,R=o.thumbs(P),z=n.o(P),B=n.a(m),V=n.a((e,t)=>{F(t=>o.same(o.thumbs(t),e)?t:o.shaped(t,e),t)}),H=t=>{let n=k.current;if(!n)return;let r=o.valueAt(n.getBoundingClientRect(),t.clientX,t.clientY,y,e.u(n));return h+r*(g-h)},U=e=>O.current?.querySelectorAll(`[role="slider"]`)[e],W=n.a(e=>{if(b||e.button!==0||e.defaultPrevented)return;let t=H(e);if(t===void 0)return;let n=o.thumbs(z.current),r=o.nearest(n,t);A.current=r,e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),U(r)?.focus(),V(o.move(n,r,t,I),{reason:`pointer`,event:e})}),G=n.a(e=>{let t=A.current;if(t===null)return;let n=H(e);n!==void 0&&(N(!0),V(o.move(o.thumbs(z.current),t,n,I),{reason:`pointer`,event:e}))}),K=n.a(e=>{A.current!==null&&(A.current=null,N(!1),e.currentTarget.releasePointerCapture?.(e.pointerId),B(z.current,{reason:`pointer`,event:e}))}),q=n.a(t=>{if(b||t.defaultPrevented)return;let n=t.target?.closest(`[role="slider"]`),r=Number(n?.getAttribute(s)??-1);if(!n||r<0)return;let i=o.moveFor(t.key,e.u(n));if(!i)return;t.preventDefault(),j.current=!0,N(!0);let a=o.thumbs(z.current);V(o.move(a,r,o.moved(a[r],i,I,v),I),{reason:`keyboard`,event:t})}),J=n.a(e=>{j.current&&(j.current=!1,N(!1),B(z.current,{reason:`keyboard`,event:e}))}),Y=R.length>1;return(0,i.jsxs)(t.default,{ref:O,component:`slider`,...D,variant:[D.variant,{vertical:L,disabled:b}],props:{role:Y?`group`:void 0,"aria-label":Y?x:void 0,"aria-labelledby":Y?S:void 0,...E,onPointerDown:W,onPointerMove:G,onPointerUp:K,onPointerCancel:K,onKeyDown:q,onKeyUp:J},children:[(0,i.jsx)(t.default,{ref:k,component:`slider.track`,variant:{vertical:L},children:(0,i.jsx)(t.default,{component:`slider.fill`,variant:{vertical:L,tracking:M},style:u(R,I,L)})}),R.map((e,n)=>(0,i.jsx)(t.default,{component:`slider.thumb`,variant:{vertical:L,disabled:b,tracking:M},style:l(o.percentage(e,h,g),L),props:{role:`slider`,tabIndex:b?-1:0,"aria-valuemin":h,"aria-valuemax":g,"aria-valuenow":e,"aria-valuetext":w?.(e),"aria-orientation":y,"aria-label":C?.[n]??(Y?void 0:x),"aria-labelledby":C?.[n]||Y?void 0:S,"aria-disabled":b||void 0,[s]:n}},n)),T!==void 0&&R.map((e,t)=>(0,i.jsx)(`input`,{type:`hidden`,name:T,value:e,readOnly:!0},t))]})}var f=d;f.displayName=`Slider`,exports.default=f;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs");let r=require("react"),i=require("react/jsx-runtime");var a;(function(e){function t(e){let t=String(Math.abs(e));if(t.includes(`e`))return 12;let n=t.indexOf(`.`);return n===-1?0:t.length-n-1}e.decimals=t;function n(e,t){return Number(e.toFixed(Math.min(t,15)))}function r(e,t,n){return Math.min(Math.max(e,t),n)}e.clamp=r;function i(e,i){let{min:a,max:o,step:s}=i,c=r(e,a,o);return s>0?r(n(a+Math.round((c-a)/s)*s,t(s)+t(a)),a,o):c}e.snap=i;function a(e,t,n){return n<=t?0:(r(e,t,n)-t)*(100/(n-t))}e.percent=a;function o(e,t,n){return`${Math.round(a(e,t,n)*100)/100}%`}e.percentage=o;function s(e){return typeof e==`number`?[e]:[...e]}e.thumbs=s;function c(e,t){return typeof e==`number`?t[0]:[...t]}e.shaped=c;function l(e,t,n,a){let o=t>0?e[t-1]:a.min,s=t<e.length-1?e[t+1]:a.max,c=[...e];return c[t]=r(i(n,a),o,s),c}e.move=l;function u(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}e.same=u;function d(e,t){let n=0,r=1/0;return e.forEach((e,i)=>{let a=Math.abs(e-t);a<=r&&(n=i,r=a)}),n}e.nearest=d;function f(e,t,n,r,i){let a=r===`vertical`?e.height===0?0:(e.bottom-n)/e.height:e.width===0?0:i?(e.right-t)/e.width:(t-e.left)/e.width;return Math.min(Math.max(a,0),1)}e.valueAt=f;function p(e,t=!1){if(e===`Home`)return{kind:`edge`,delta:-1};if(e===`End`)return{kind:`edge`,delta:1};if(e===`PageUp`)return{kind:`page`,delta:1};if(e===`PageDown`)return{kind:`page`,delta:-1};if(e===`ArrowUp`)return{kind:`step`,delta:1};if(e===`ArrowDown`)return{kind:`step`,delta:-1};if(e===`ArrowRight`)return{kind:`step`,delta:t?-1:1};if(e===`ArrowLeft`)return{kind:`step`,delta:t?1:-1}}e.moveFor=p;function m(e,t,n,r){if(t.kind===`edge`)return t.delta>0?n.max:n.min;let i=t.kind===`page`?r:n.step;return e+t.delta*i}e.moved=m})(a||={});var o=a,s=`data-index`;function c(e,t,n){return{min:e,max:t,step:n}}function l(e,t){return t?{insetBlockEnd:e}:{insetInlineStart:e}}function u(e,t,n){let r=e.length>1?Math.min(...e):t.min,i=Math.max(...e),a=o.percent(r,t.min,t.max),s=`${Math.round((o.percent(i,t.min,t.max)-a)*100)/100}%`;return n?{insetBlockEnd:`${Math.round(a*100)/100}%`,blockSize:s}:{insetInlineStart:`${Math.round(a*100)/100}%`,inlineSize:s}}function d(a){let{value:d,defaultValue:f,onValueChange:p,onValueCommit:m,min:h=0,max:g=100,step:_=1,largeStep:v=_*10,orientation:y=`horizontal`,disabled:b=!1,label:x,labelledBy:S,thumbLabels:C,format:w,name:T,props:E,...D}=a,O=(0,r.useRef)(null),k=(0,r.useRef)(null),A=(0,r.useRef)(null),j=(0,r.useRef)(!1),[M,N]=(0,r.useState)(!1),[P,F]=n.i({value:d,defaultValue:f??h,onChange:p}),I=c(h,g,_),L=y===`vertical`,R=o.thumbs(P),z=n.o(P),B=n.a(m),V=n.a((e,t)=>{F(t=>o.same(o.thumbs(t),e)?t:o.shaped(t,e),t)}),H=t=>{let n=k.current;if(!n)return;let r=o.valueAt(n.getBoundingClientRect(),t.clientX,t.clientY,y,e.d(n));return h+r*(g-h)},U=e=>O.current?.querySelectorAll(`[role="slider"]`)[e],W=n.a(e=>{if(b||e.button!==0||e.defaultPrevented)return;let t=H(e);if(t===void 0)return;let n=o.thumbs(z.current),r=o.nearest(n,t);A.current=r,e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),U(r)?.focus(),V(o.move(n,r,t,I),{reason:`pointer`,event:e})}),G=n.a(e=>{let t=A.current;if(t===null)return;let n=H(e);n!==void 0&&(N(!0),V(o.move(o.thumbs(z.current),t,n,I),{reason:`pointer`,event:e}))}),K=n.a(e=>{A.current!==null&&(A.current=null,N(!1),e.currentTarget.releasePointerCapture?.(e.pointerId),B(z.current,{reason:`pointer`,event:e}))}),q=n.a(t=>{if(b||t.defaultPrevented)return;let n=t.target?.closest(`[role="slider"]`),r=Number(n?.getAttribute(s)??-1);if(!n||r<0)return;let i=o.moveFor(t.key,e.d(n));if(!i)return;t.preventDefault(),j.current=!0,N(!0);let a=o.thumbs(z.current);V(o.move(a,r,o.moved(a[r],i,I,v),I),{reason:`keyboard`,event:t})}),J=n.a(e=>{j.current&&(j.current=!1,N(!1),B(z.current,{reason:`keyboard`,event:e}))}),Y=R.length>1;return(0,i.jsxs)(t.default,{ref:O,component:`slider`,...D,variant:[D.variant,{vertical:L,disabled:b}],props:{role:Y?`group`:void 0,"aria-label":Y?x:void 0,"aria-labelledby":Y?S:void 0,...E,onPointerDown:W,onPointerMove:G,onPointerUp:K,onPointerCancel:K,onKeyDown:q,onKeyUp:J},children:[(0,i.jsx)(t.default,{ref:k,component:`slider.track`,variant:{vertical:L},children:(0,i.jsx)(t.default,{component:`slider.fill`,variant:{vertical:L,tracking:M},style:u(R,I,L)})}),R.map((e,n)=>(0,i.jsx)(t.default,{component:`slider.thumb`,variant:{vertical:L,disabled:b,tracking:M},style:l(o.percentage(e,h,g),L),props:{role:`slider`,tabIndex:b?-1:0,"aria-valuemin":h,"aria-valuemax":g,"aria-valuenow":e,"aria-valuetext":w?.(e),"aria-orientation":y,"aria-label":C?.[n]??(Y?void 0:x),"aria-labelledby":C?.[n]||Y?void 0:S,"aria-disabled":b||void 0,[s]:n}},n)),T!==void 0&&R.map((e,t)=>(0,i.jsx)(`input`,{type:`hidden`,name:T,value:e,readOnly:!0},t))]})}var f=d;f.displayName=`Slider`,exports.default=f;

package/components/slider.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { u as e } from "../platform.mjs";
+import { d as e } from "../platform.mjs";
 import t from "../box.mjs";
 import { a as n, i as r, o as i } from "../behavior.mjs";
 import { useRef as a, useState as o } from "react";

package/components/sortableList.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../effects.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("./svg.cjs"),a=require("./visuallyHidden.cjs"),o=require("../scrolling.cjs"),s=require("./list.cjs");let c=require("react"),l=require("react/jsx-runtime");var u;(function(e){e.SLOP=4;function t(e){return e.top+e.height/2}function n(e,n,r){let i=e[n];if(!i)return n;let a=t(i)+r,o=n;if(r>0)for(let r=n+1;r<e.length&&a>t(e[r]);r++)o=r;else for(let r=n-1;r>=0&&a<t(e[r]);r--)o=r;return o}e.targetIndex=n;function r(e,t){let n=e[t];if(!n)return 0;let r=e.length>1?Math.max(0,e[1].top-e[0].top-e[0].height):0;return n.height+r}e.pitchOf=r;function i(e,t,n,i){return t<n&&i>t&&i<=n?-r(e,t):n<t&&i>=n&&i<t?r(e,t):0}e.shiftOf=i;function a(e,t,n){let r=e.slice();if(t===n||t<0||t>=r.length)return r;let[i]=r.splice(t,1);return r.splice(Math.max(0,Math.min(n,r.length)),0,i),r}e.move=a;function o(e,t,n){switch(e){case`ArrowUp`:return Math.max(0,t-1);case`ArrowDown`:return Math.min(n-1,t+1);case`Home`:return 0;case`End`:return n-1;default:return null}}e.keyTarget=o})(u||={});var d=u,f=(0,c.createContext)(null),p=(0,c.createContext)(null),m=48,h=12,g=`:scope > [data-sortable-value]`;function _(e){return e?Array.from(e.querySelectorAll(g)):[]}function v(e){return _(e).map(e=>e.dataset.sortableValue??``)}function y(e){return new Map(_(e).map(e=>[e.dataset.sortableValue??``,e.getBoundingClientRect().top]))}function b(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}function x(e,n){let{onOrderChange:i,onOrderCommit:u,children:p,variant:g,props:x,...S}=e,C=(0,c.useRef)(null),w=(0,c.useRef)(null),T=(0,c.useRef)(null),[E,D]=(0,c.useState)(null),[O,k]=(0,c.useState)(0),[A,j]=(0,c.useState)(!1),[M,N]=(0,c.useState)(``),P=`${(0,c.useId)()}-sortable`,F=r.o(E),I=r.a(i),L=r.a(u),R=(0,c.useCallback)(e=>{C.current=e,typeof n==`function`?n(e):n&&(n.current=e)},[n]),z=(e,t)=>`position ${e.indexOf(t)+1} of ${e.length}`,B=(e,t)=>{T.current=y(C.current),I(e,t)};t.n(()=>{let e=T.current;if(e){T.current=null;for(let t of _(C.current)){let n=e.get(t.dataset.sortableValue??``),r=n===void 0?0:n-t.getBoundingClientRect().top,i=parseFloat(getComputedStyle(t).transitionDuration)*1e3||0;Math.abs(r)<1||i===0||typeof t.animate!=`function`||t.animate([{translate:`0 ${r}px`},{translate:`0 0`}],{duration:i,easing:`ease-out`})}}}),(0,c.useEffect)(()=>{if(!A)return;let e=requestAnimationFrame(()=>j(!1));return()=>cancelAnimationFrame(e)},[A]),t.n(()=>{if(!E||E.pointer)return;let e=_(C.current).find(e=>e.dataset.sortableValue===E.value)?.querySelector(`[data-sortable-handle]`);e&&e.ownerDocument.activeElement!==e&&e.focus()});let V=r.a((e,t)=>{let n=e.pointer,r=C.current;if(!n||!r)return;n.lastY=t;let i=t-r.getBoundingClientRect().top-(n.startY-n.startTop),a=n.order.indexOf(e.value);n.to=d.targetIndex(n.slots,a,i),k(i)}),H=(e,t)=>{let n=C.current;if(!n)return;let r=n.getBoundingClientRect().top,i=_(n),a=i.map(e=>e.dataset.sortableValue??``),o=i.map(e=>{let t=e.getBoundingClientRect();return{top:t.top-r,height:t.height}}),s={value:t.value,name:t.name,origin:a,pointer:{id:t.id,startY:t.y,startTop:r,lastY:e.clientY,slots:o,order:a,to:a.indexOf(t.value)}};D(s),V(s,e.clientY)},U=E?.pointer!==void 0;(0,c.useEffect)(()=>{if(!U)return;let e=o.t(C.current),t=0,n=()=>{let r=F.current;if(r?.pointer){let t=r.pointer.lastY,n=e?e.getBoundingClientRect().top:0,i=e?e.getBoundingClientRect().bottom:window.innerHeight,a=t<n+m?-12:t>i-m?h:0;a&&((e??window).scrollBy(0,a),V(r,t))}t=requestAnimationFrame(n)};return t=requestAnimationFrame(n),()=>cancelAnimationFrame(t)},[U,V,F]);let W=(e,t,n)=>{let r=v(C.current);D({value:e,name:t,origin:r}),N(`${t} picked up at ${z(r,e)}. Use the arrow keys to move it, Enter to drop it.`),n.preventDefault()},G=(e,t,n=v(C.current))=>{let r=n.indexOf(e.value);D(null),L(n,{reason:`keyboard`,event:t,value:e.value,from:e.origin.indexOf(e.value),to:r}),N(`${e.name} dropped at ${z(n,e.value)}.`)},K=r.a((e,t)=>{let n=v(C.current);D(null),k(0),b(n,e.origin)||B(e.origin,{reason:e.pointer?`pointer`:`keyboard`,event:t,value:e.value,from:n.indexOf(e.value),to:e.origin.indexOf(e.value)}),N(`${e.name} put back at ${z(e.origin,e.value)}.`)}),q=(e,t,n)=>{let r=v(C.current),i=r.indexOf(e.value);if(i<0||t===i)return r;let a=d.move(r,i,t);return B(a,{reason:`keyboard`,event:n,value:e.value,from:i,to:t}),N(`${e.name}, ${z(a,e.value)}.`),a},J=r.a((e,t,n)=>{e.button!==0||e.defaultPrevented||(e.preventDefault(),e.currentTarget.focus(),e.currentTarget.setPointerCapture?.(e.pointerId),w.current={id:e.pointerId,x:e.clientX,y:e.clientY,value:t,name:n})}),Y=r.a(e=>{let t=F.current;if(t?.pointer&&t.pointer.id===e.pointerId){V(t,e.clientY);return}let n=w.current;!n||n.id!==e.pointerId||Math.hypot(e.clientX-n.x,e.clientY-n.y)<d.SLOP||(w.current=null,H(e,n))}),X=r.a(e=>{let t=w.current;w.current=null;let n=F.current;if(t&&t.id===e.pointerId&&e.type===`pointerup`){n&&!n.pointer?n.value===t.value&&G(n,e):W(t.value,t.name,e);return}let r=n?.pointer;if(!n||!r||r.id!==e.pointerId)return;if(e.currentTarget.releasePointerCapture?.(e.pointerId),j(!0),e.type===`pointercancel`){T.current=y(C.current),K(n,e);return}let i=r.order.indexOf(n.value),a=d.move(r.order,i,r.to),o={reason:`pointer`,event:e,value:n.value,from:i,to:r.to};T.current=y(C.current),D(null),k(0),r.to!==i&&I(a,o),L(a,o),N(`${n.name} dropped at ${z(a,n.value)}.`)}),Z=r.a((e,t,n)=>{if(e.defaultPrevented)return;let r=F.current,i=r&&r.value===t&&!r.pointer?r:void 0;if(!i){(e.key===`Enter`||e.key===` `)&&W(t,n,e);return}if(e.key===`Escape`){e.preventDefault(),K(i,e);return}if(e.key===`Enter`||e.key===` `){e.preventDefault(),G(i,e);return}let a=v(C.current),o=d.keyTarget(e.key,a.indexOf(t),a.length);o!==null&&(e.preventDefault(),q(i,o,e))}),Q=r.a(e=>{setTimeout(()=>{let t=F.current,n=C.current;!t||t.pointer||t.value!==e||!n||n.ownerDocument.activeElement?.closest(`[data-sortable-value]`)?.getAttribute(`data-sortable-value`)!==e&&K(t,new Event(`blur`))})}),$=e=>{let t=F.current;if(!t||t.pointer||!(e.target instanceof Element))return null;let n=e.target.closest(`[data-sortable-value]`);return n&&n.parentElement===C.current&&n.dataset.sortableValue!==t.value?n:null},ee=e=>{$(e)&&e.preventDefault()},te=e=>{let t=$(e),n=F.current;!t||!n||(e.preventDefault(),e.stopPropagation(),G(n,e,q(n,v(C.current).indexOf(t.dataset.sortableValue??``),e)))},ne=(0,c.useMemo)(()=>{let e=E?.pointer,t=e?e.order.indexOf(E.value):-1;return{heldOf:e=>E&&E.value===e?E.pointer?`pointer`:`keyboard`:void 0,translateOf:n=>{if(!e)return;if(n===E.value)return`0 ${Math.round(O)}px`;let r=d.shiftOf(e.slots,t,e.to,e.order.indexOf(n));return r?`0 ${r}px`:void 0},settling:A,instructionsId:P,handleProps:(e,t)=>({type:`button`,"data-sortable-handle":``,"aria-label":`Move ${t}`,"aria-pressed":E?.value===e,"aria-describedby":P,onPointerDown:n=>J(n,e,t),onPointerMove:Y,onPointerUp:X,onPointerCancel:X,onKeyDown:n=>Z(n,e,t),onBlur:()=>Q(e)})}},[E,O,A,P,J,Y,X,Z,Q]);return(0,l.jsxs)(f.Provider,{value:ne,children:[(0,l.jsx)(s.default,{ref:R,...S,variant:g,userSelect:U?`none`:void 0,props:{...x,onMouseDownCapture:ee,onClickCapture:te},children:p}),(0,l.jsx)(a.default,{props:{role:`status`},children:M}),(0,l.jsx)(a.default,{id:P,children:`Press Enter or Space to pick the item up, the arrow keys to move it, Enter to drop it and Escape to put it back.`})]})}function S(e,t){let{value:n,label:r,disabled:i=!1,variant:a,props:o,...u}=e,d=(0,c.useContext)(f),m=d?.heldOf(n),h=d?.translateOf(n),g=(0,c.useMemo)(()=>({value:n,name:r??n,disabled:i}),[n,r,i]);return(0,l.jsx)(p.Provider,{value:g,children:(0,l.jsx)(s.default.Item,{ref:t,...u,variant:[a,{lifted:m===`pointer`,grabbed:m===`keyboard`,settling:d?.settling??!1}],style:h?{translate:h}:void 0,props:{...o,"data-sortable-value":n}})})}function C(){return(0,l.jsx)(i.Svg,{viewBox:`0 0 16 16`,width:`1rem`,fill:`currentColor`,children:[5,11].flatMap(e=>[3,8,13].map(t=>(0,l.jsx)(i.Circle,{cx:e,cy:t,r:1.4},`${e}-${t}`)))})}function w(e,t){let{children:r,variant:i,props:a,...o}=e,s=(0,c.useContext)(f),u=(0,c.useContext)(p),d=u&&s?s.handleProps(u.value,u.name):{};return n.useBoxElement({tag:`button`,component:`sortableList.handle`,display:`flex`,ai:`center`,jc:`center`,flexShrink:0,width:10,height:10,position:`relative`,zIndex:1,css:{touchAction:`none`},...o,variant:[i,{grabbed:u?s?.heldOf(u.value)!==void 0:!1}],props:{...d,...u?.disabled?{disabled:!0}:{},...a},children:r??(0,l.jsx)(C,{})},t)}var T=e.f(x,`SortableList`);T.Item=e.f(S,`SortableList.Item`),T.Handle=e.f(w,`SortableList.Handle`),exports.SortableUtils=d,exports.default=T;

package/components/sortableList.d.ts

@@ -0,0 +1,49 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ChangeDetails, ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { default as SortableUtils } from '../utils/sortable/sortableUtils';
+import { ListItemProps, ListProps } from './list';
+export { SortableUtils };
+/** What moved an item. The device is the reason here, since a drag and the keyboard are told apart by what they announce. */
+export type SortableReason = 'pointer' | 'keyboard';
+export interface SortableChangeDetails extends ChangeDetails<SortableReason> {
+    /** The item that moved. */
+    value: string;
+    /** Where it was, and where it is now, as indices into the order. */
+    from: number;
+    to: number;
+}
+export interface SortableListProps<TKey extends keyof ComponentsAndVariants = 'list'> extends ListProps<TKey> {
+    /** The items: `SortableList.Item`s, each with a `value`, rendered in the order the app holds. */
+    children?: React.ReactNode;
+    /**
+     * The new order, as the items' `value`s. Fires once for a drop and on every step the keyboard takes, so the
+     * list moves as the arrows do. The app owns the order: render the items in it and the list follows.
+     */
+    onOrderChange?: ChangeHandler<string[], SortableReason, SortableChangeDetails>;
+    /** The order once it has settled — a drop, or Enter after the arrows. The one to save. */
+    onOrderCommit?: ChangeHandler<string[], SortableReason, SortableChangeDetails>;
+}
+export interface SortableItemProps<TKey extends keyof ComponentsAndVariants = 'list.item'> extends ListItemProps<TKey> {
+    /** Who the item is in the order `onOrderChange` reports. Unique within the list. */
+    value: string;
+    /** What the handle and the announcements call the item: "Move Ada Lovelace". Defaults to `value`. */
+    label?: string;
+    /** Leaves the item where it is: its handle is disabled. Others may still move past it. */
+    disabled?: boolean;
+}
+export interface SortableHandleProps<TKey extends keyof ComponentsAndVariants = 'sortableList.handle'> extends Omit<BoxProps<'button', TKey>, 'tag'> {
+    /** What the handle shows. Six dots unless given something else; its name is "Move" and the item's `label` either way. */
+    children?: React.ReactNode;
+}
+interface SortableListType {
+    <TKey extends keyof ComponentsAndVariants = 'list'>(props: SortableListProps<TKey> & RefAttributes<HTMLUListElement>): React.ReactNode;
+    /** One item in the order. Takes everything `List.Item` does, plus its `value`. */
+    Item: <TKey extends keyof ComponentsAndVariants = 'list.item'>(props: SortableItemProps<TKey> & RefAttributes<HTMLLIElement>) => React.ReactNode;
+    /** The button a drag starts from, and the one the keyboard picks the item up with. Six dots unless given children. */
+    Handle: <TKey extends keyof ComponentsAndVariants = 'sortableList.handle'>(props: SortableHandleProps<TKey> & RefAttributes<HTMLButtonElement>) => React.ReactNode;
+    displayName?: string;
+}
+declare const SortableList: SortableListType;
+export default SortableList;

package/components/sortableList.mjs

@@ -0,0 +1,384 @@
+"use client";
+import { f as e } from "../react-shared.mjs";
+import { n as t } from "../effects.mjs";
+import { useBoxElement as n } from "../box.mjs";
+import { a as r, o as i } from "../behavior.mjs";
+import { Circle as a, Svg as o } from "./svg.mjs";
+import s from "./visuallyHidden.mjs";
+import { t as c } from "../scrolling.mjs";
+import l from "./list.mjs";
+import { createContext as u, useCallback as d, useContext as f, useEffect as p, useId as ee, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as te } from "react/jsx-runtime";
+//#region src/utils/sortable/sortableUtils.ts
+var v;
+(function(e) {
+	e.SLOP = 4;
+	function t(e) {
+		return e.top + e.height / 2;
+	}
+	function n(e, n, r) {
+		let i = e[n];
+		if (!i) return n;
+		let a = t(i) + r, o = n;
+		if (r > 0) for (let r = n + 1; r < e.length && a > t(e[r]); r++) o = r;
+		else for (let r = n - 1; r >= 0 && a < t(e[r]); r--) o = r;
+		return o;
+	}
+	e.targetIndex = n;
+	function r(e, t) {
+		let n = e[t];
+		if (!n) return 0;
+		let r = e.length > 1 ? Math.max(0, e[1].top - e[0].top - e[0].height) : 0;
+		return n.height + r;
+	}
+	e.pitchOf = r;
+	function i(e, t, n, i) {
+		return t < n && i > t && i <= n ? -r(e, t) : n < t && i >= n && i < t ? r(e, t) : 0;
+	}
+	e.shiftOf = i;
+	function a(e, t, n) {
+		let r = e.slice();
+		if (t === n || t < 0 || t >= r.length) return r;
+		let [i] = r.splice(t, 1);
+		return r.splice(Math.max(0, Math.min(n, r.length)), 0, i), r;
+	}
+	e.move = a;
+	function o(e, t, n) {
+		switch (e) {
+			case "ArrowUp": return Math.max(0, t - 1);
+			case "ArrowDown": return Math.min(n - 1, t + 1);
+			case "Home": return 0;
+			case "End": return n - 1;
+			default: return null;
+		}
+	}
+	e.keyTarget = o;
+})(v ||= {});
+var y = v, b = u(null), x = u(null), S = 48, ne = 12, C = ":scope > [data-sortable-value]";
+function w(e) {
+	return e ? Array.from(e.querySelectorAll(C)) : [];
+}
+function T(e) {
+	return w(e).map((e) => e.dataset.sortableValue ?? "");
+}
+function E(e) {
+	return new Map(w(e).map((e) => [e.dataset.sortableValue ?? "", e.getBoundingClientRect().top]));
+}
+function re(e, t) {
+	return e.length === t.length && e.every((e, n) => e === t[n]);
+}
+function D(e, n) {
+	let { onOrderChange: a, onOrderCommit: o, children: u, variant: f, props: v, ...x } = e, C = h(null), D = h(null), O = h(null), [k, A] = g(null), [j, M] = g(0), [N, P] = g(!1), [ie, F] = g(""), I = `${ee()}-sortable`, L = i(k), R = r(a), z = r(o), ae = d((e) => {
+		C.current = e, typeof n == "function" ? n(e) : n && (n.current = e);
+	}, [n]), B = (e, t) => `position ${e.indexOf(t) + 1} of ${e.length}`, V = (e, t) => {
+		O.current = E(C.current), R(e, t);
+	};
+	t(() => {
+		let e = O.current;
+		if (e) {
+			O.current = null;
+			for (let t of w(C.current)) {
+				let n = e.get(t.dataset.sortableValue ?? ""), r = n === void 0 ? 0 : n - t.getBoundingClientRect().top, i = parseFloat(getComputedStyle(t).transitionDuration) * 1e3 || 0;
+				Math.abs(r) < 1 || i === 0 || typeof t.animate != "function" || t.animate([{ translate: `0 ${r}px` }, { translate: "0 0" }], {
+					duration: i,
+					easing: "ease-out"
+				});
+			}
+		}
+	}), p(() => {
+		if (!N) return;
+		let e = requestAnimationFrame(() => P(!1));
+		return () => cancelAnimationFrame(e);
+	}, [N]), t(() => {
+		if (!k || k.pointer) return;
+		let e = w(C.current).find((e) => e.dataset.sortableValue === k.value)?.querySelector("[data-sortable-handle]");
+		e && e.ownerDocument.activeElement !== e && e.focus();
+	});
+	let H = r((e, t) => {
+		let n = e.pointer, r = C.current;
+		if (!n || !r) return;
+		n.lastY = t;
+		let i = t - r.getBoundingClientRect().top - (n.startY - n.startTop), a = n.order.indexOf(e.value);
+		n.to = y.targetIndex(n.slots, a, i), M(i);
+	}), oe = (e, t) => {
+		let n = C.current;
+		if (!n) return;
+		let r = n.getBoundingClientRect().top, i = w(n), a = i.map((e) => e.dataset.sortableValue ?? ""), o = i.map((e) => {
+			let t = e.getBoundingClientRect();
+			return {
+				top: t.top - r,
+				height: t.height
+			};
+		}), s = {
+			value: t.value,
+			name: t.name,
+			origin: a,
+			pointer: {
+				id: t.id,
+				startY: t.y,
+				startTop: r,
+				lastY: e.clientY,
+				slots: o,
+				order: a,
+				to: a.indexOf(t.value)
+			}
+		};
+		A(s), H(s, e.clientY);
+	}, U = k?.pointer !== void 0;
+	p(() => {
+		if (!U) return;
+		let e = c(C.current), t = 0, n = () => {
+			let r = L.current;
+			if (r?.pointer) {
+				let t = r.pointer.lastY, n = e ? e.getBoundingClientRect().top : 0, i = e ? e.getBoundingClientRect().bottom : window.innerHeight, a = t < n + S ? -12 : t > i - S ? ne : 0;
+				a && ((e ?? window).scrollBy(0, a), H(r, t));
+			}
+			t = requestAnimationFrame(n);
+		};
+		return t = requestAnimationFrame(n), () => cancelAnimationFrame(t);
+	}, [
+		U,
+		H,
+		L
+	]);
+	let W = (e, t, n) => {
+		let r = T(C.current);
+		A({
+			value: e,
+			name: t,
+			origin: r
+		}), F(`${t} picked up at ${B(r, e)}. Use the arrow keys to move it, Enter to drop it.`), n.preventDefault();
+	}, G = (e, t, n = T(C.current)) => {
+		let r = n.indexOf(e.value);
+		A(null), z(n, {
+			reason: "keyboard",
+			event: t,
+			value: e.value,
+			from: e.origin.indexOf(e.value),
+			to: r
+		}), F(`${e.name} dropped at ${B(n, e.value)}.`);
+	}, K = r((e, t) => {
+		let n = T(C.current);
+		A(null), M(0), re(n, e.origin) || V(e.origin, {
+			reason: e.pointer ? "pointer" : "keyboard",
+			event: t,
+			value: e.value,
+			from: n.indexOf(e.value),
+			to: e.origin.indexOf(e.value)
+		}), F(`${e.name} put back at ${B(e.origin, e.value)}.`);
+	}), q = (e, t, n) => {
+		let r = T(C.current), i = r.indexOf(e.value);
+		if (i < 0 || t === i) return r;
+		let a = y.move(r, i, t);
+		return V(a, {
+			reason: "keyboard",
+			event: n,
+			value: e.value,
+			from: i,
+			to: t
+		}), F(`${e.name}, ${B(a, e.value)}.`), a;
+	}, J = r((e, t, n) => {
+		e.button !== 0 || e.defaultPrevented || (e.preventDefault(), e.currentTarget.focus(), e.currentTarget.setPointerCapture?.(e.pointerId), D.current = {
+			id: e.pointerId,
+			x: e.clientX,
+			y: e.clientY,
+			value: t,
+			name: n
+		});
+	}), Y = r((e) => {
+		let t = L.current;
+		if (t?.pointer && t.pointer.id === e.pointerId) {
+			H(t, e.clientY);
+			return;
+		}
+		let n = D.current;
+		!n || n.id !== e.pointerId || Math.hypot(e.clientX - n.x, e.clientY - n.y) < y.SLOP || (D.current = null, oe(e, n));
+	}), X = r((e) => {
+		let t = D.current;
+		D.current = null;
+		let n = L.current;
+		if (t && t.id === e.pointerId && e.type === "pointerup") {
+			n && !n.pointer ? n.value === t.value && G(n, e) : W(t.value, t.name, e);
+			return;
+		}
+		let r = n?.pointer;
+		if (!n || !r || r.id !== e.pointerId) return;
+		if (e.currentTarget.releasePointerCapture?.(e.pointerId), P(!0), e.type === "pointercancel") {
+			O.current = E(C.current), K(n, e);
+			return;
+		}
+		let i = r.order.indexOf(n.value), a = y.move(r.order, i, r.to), o = {
+			reason: "pointer",
+			event: e,
+			value: n.value,
+			from: i,
+			to: r.to
+		};
+		O.current = E(C.current), A(null), M(0), r.to !== i && R(a, o), z(a, o), F(`${n.name} dropped at ${B(a, n.value)}.`);
+	}), Z = r((e, t, n) => {
+		if (e.defaultPrevented) return;
+		let r = L.current, i = r && r.value === t && !r.pointer ? r : void 0;
+		if (!i) {
+			(e.key === "Enter" || e.key === " ") && W(t, n, e);
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault(), K(i, e);
+			return;
+		}
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault(), G(i, e);
+			return;
+		}
+		let a = T(C.current), o = y.keyTarget(e.key, a.indexOf(t), a.length);
+		o !== null && (e.preventDefault(), q(i, o, e));
+	}), Q = r((e) => {
+		setTimeout(() => {
+			let t = L.current, n = C.current;
+			!t || t.pointer || t.value !== e || !n || n.ownerDocument.activeElement?.closest("[data-sortable-value]")?.getAttribute("data-sortable-value") !== e && K(t, new Event("blur"));
+		});
+	}), $ = (e) => {
+		let t = L.current;
+		if (!t || t.pointer || !(e.target instanceof Element)) return null;
+		let n = e.target.closest("[data-sortable-value]");
+		return n && n.parentElement === C.current && n.dataset.sortableValue !== t.value ? n : null;
+	}, se = (e) => {
+		$(e) && e.preventDefault();
+	}, ce = (e) => {
+		let t = $(e), n = L.current;
+		!t || !n || (e.preventDefault(), e.stopPropagation(), G(n, e, q(n, T(C.current).indexOf(t.dataset.sortableValue ?? ""), e)));
+	}, le = m(() => {
+		let e = k?.pointer, t = e ? e.order.indexOf(k.value) : -1;
+		return {
+			heldOf: (e) => k && k.value === e ? k.pointer ? "pointer" : "keyboard" : void 0,
+			translateOf: (n) => {
+				if (!e) return;
+				if (n === k.value) return `0 ${Math.round(j)}px`;
+				let r = y.shiftOf(e.slots, t, e.to, e.order.indexOf(n));
+				return r ? `0 ${r}px` : void 0;
+			},
+			settling: N,
+			instructionsId: I,
+			handleProps: (e, t) => ({
+				type: "button",
+				"data-sortable-handle": "",
+				"aria-label": `Move ${t}`,
+				"aria-pressed": k?.value === e,
+				"aria-describedby": I,
+				onPointerDown: (n) => J(n, e, t),
+				onPointerMove: Y,
+				onPointerUp: X,
+				onPointerCancel: X,
+				onKeyDown: (n) => Z(n, e, t),
+				onBlur: () => Q(e)
+			})
+		};
+	}, [
+		k,
+		j,
+		N,
+		I,
+		J,
+		Y,
+		X,
+		Z,
+		Q
+	]);
+	return /* @__PURE__ */ te(b.Provider, {
+		value: le,
+		children: [
+			/* @__PURE__ */ _(l, {
+				ref: ae,
+				...x,
+				variant: f,
+				userSelect: U ? "none" : void 0,
+				props: {
+					...v,
+					onMouseDownCapture: se,
+					onClickCapture: ce
+				},
+				children: u
+			}),
+			/* @__PURE__ */ _(s, {
+				props: { role: "status" },
+				children: ie
+			}),
+			/* @__PURE__ */ _(s, {
+				id: I,
+				children: "Press Enter or Space to pick the item up, the arrow keys to move it, Enter to drop it and Escape to put it back."
+			})
+		]
+	});
+}
+function O(e, t) {
+	let { value: n, label: r, disabled: i = !1, variant: a, props: o, ...s } = e, c = f(b), u = c?.heldOf(n), d = c?.translateOf(n), p = m(() => ({
+		value: n,
+		name: r ?? n,
+		disabled: i
+	}), [
+		n,
+		r,
+		i
+	]);
+	return /* @__PURE__ */ _(x.Provider, {
+		value: p,
+		children: /* @__PURE__ */ _(l.Item, {
+			ref: t,
+			...s,
+			variant: [a, {
+				lifted: u === "pointer",
+				grabbed: u === "keyboard",
+				settling: c?.settling ?? !1
+			}],
+			style: d ? { translate: d } : void 0,
+			props: {
+				...o,
+				"data-sortable-value": n
+			}
+		})
+	});
+}
+function k() {
+	return /* @__PURE__ */ _(o, {
+		viewBox: "0 0 16 16",
+		width: "1rem",
+		fill: "currentColor",
+		children: [5, 11].flatMap((e) => [
+			3,
+			8,
+			13
+		].map((t) => /* @__PURE__ */ _(a, {
+			cx: e,
+			cy: t,
+			r: 1.4
+		}, `${e}-${t}`)))
+	});
+}
+function A(e, t) {
+	let { children: r, variant: i, props: a, ...o } = e, s = f(b), c = f(x), l = c && s ? s.handleProps(c.value, c.name) : {};
+	return n({
+		tag: "button",
+		component: "sortableList.handle",
+		display: "flex",
+		ai: "center",
+		jc: "center",
+		flexShrink: 0,
+		width: 10,
+		height: 10,
+		position: "relative",
+		zIndex: 1,
+		css: { touchAction: "none" },
+		...o,
+		variant: [i, { grabbed: c ? s?.heldOf(c.value) !== void 0 : !1 }],
+		props: {
+			...l,
+			...c?.disabled ? { disabled: !0 } : {},
+			...a
+		},
+		children: r ?? /* @__PURE__ */ _(k, {})
+	}, t);
+}
+var j = e(D, "SortableList");
+j.Item = e(O, "SortableList.Item"), j.Handle = e(A, "SortableList.Handle");
+//#endregion
+export { y as SortableUtils, j as default };

package/components/swipeItem.cjs

@@ -0,0 +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("../motion.cjs"),o=require("./list.cjs");let s=require("react"),c=require("react/jsx-runtime");var l;(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})(l||={});var u=l,d=(0,s.createContext)(null),f={start:0,end:0};function p(e,l){let{size:p=`md`,wrap:g=!1,selected:_=!1,chevron:v=!1,startActions:y,endActions:b,fullSwipe:x=!1,open:S,defaultOpen:ee=null,onOpenChange:te,variant:ne,children:C,props:w,...T}=e,E=(0,s.useRef)(null),D=(0,s.useRef)(null),O=(0,s.useRef)(null),k=(0,s.useRef)(null),A=(0,s.useRef)(!1),[j,M]=i.i({value:S,defaultValue:ee,onChange:te}),[N,P]=(0,s.useState)(null),[F,I]=(0,s.useState)(null),[L,re]=(0,s.useState)({trays:f,width:0,rtl:!1}),R=i.o(L),z=(0,s.useCallback)(e=>{E.current=e,typeof l==`function`?l(e):l&&(l.current=e)},[l]),B=i.a(()=>{let e=e=>e?.firstElementChild?.offsetWidth??0,n={trays:{start:y?e(D.current):0,end:b?e(O.current):0},width:E.current?.offsetWidth??0,rtl:t.d(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)&&re(n),n});n.n(()=>{j&&B()},[j,B]);let V=i.a(e=>M(null,e));(0,s.useEffect)(()=>{let e=t.t();if(!j||!e)return;let n=e=>{t.u(e,[E])||V({reason:`outside-pointer`,event:e})};return e.addEventListener(`pointerdown`,n,!0),()=>e.removeEventListener(`pointerdown`,n,!0)},[j,V]),(0,s.useEffect)(()=>{if(!F)return;let e=(F===`start`?D:O).current,t=E.current?.firstElementChild,n=t&&typeof getComputedStyle==`function`?a.n.activeDuration(getComputedStyle(t)):0,r=setTimeout(()=>{I(null),e?.querySelector(`[data-swipe-action]`)?.click()},n+a.n.SETTLE_FRAME);return()=>clearTimeout(r)},[F]);let H=i.a(e=>{if(A.current=!1,e.button!==0||F||!y&&!b)return;let{trays:t}=B();k.current={pointerId:e.pointerId,x:e.clientX,y:e.clientY,rest:u.restOffset(j,t),intent:null,samples:[{t:e.timeStamp,x:e.clientX}]}}),U=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=u.intent(r,e.clientY-n.y),n.intent!==`swipe`)return;e.currentTarget.setPointerCapture?.(e.pointerId),t.s(e.currentTarget)}let{trays:i,width:a,rtl:o}=R.current;n.samples=u.track(n.samples,{t:e.timeStamp,x:e.clientX}),P(u.offsetFor(n.rest,o?-r:r,i,a,x))}),W=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=u.velocity(t.samples)*(i?-1:1),o=e.type===`pointercancel`?{open:j,full:null}:u.settle(N,a,n,r,x);P(null),o.full?(I(o.full),M(null,{reason:`swipe`,event:e})):M(o.open,{reason:`swipe`,event:e})}),G=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}))}),K=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}))}),q=i.a(e=>{let t=e.relatedTarget;j&&(!t||!E.current?.contains(t))&&V({reason:`focus`,event:e})}),J=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:ie}=L,Z=N??(F?F===`start`?X:-X:u.restOffset(j,Y)),ae=N===null?F:u.armed(N,Y,X,x),Q=N!==null,$=(e,t)=>(0,c.jsx)(h,{side:e,trayRef:e===`start`?D:O,width:e===`start`?Math.max(0,Z):Math.max(0,-Z),dragging:Q,children:(0,c.jsx)(d.Provider,{value:{side:e,armed:ae===e,close:V},children:t})});return r.useBoxElement({tag:`li`,component:`list.item`,...o.i({...o.t,css:{...o.t.css,overflow:`clip`}},T),variant:[ne,{selected:_}],props:{...w,onFocus:K,onBlur:q,onKeyDown:J},children:(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(m,{size:p,wrap:g,dragging:Q,translate:Z===0?void 0:`${Math.round(ie?-Z:Z)}px`,handlers:{onPointerDown:H,onPointerMove:U,onPointerUp:W,onPointerCancel:W,onClickCapture:G,onDragStart:e=>e.preventDefault()},children:[C,v&&(0,c.jsx)(o.default.Chevron,{})]}),y?$(`start`,y):null,b?$(`end`,b):null]})},z)}function m({size:e,wrap:t,dragging:n,translate:i,handlers:a,children:s}){return r.useBoxElement({component:`swipeItem.row`,...o.n,...o.r[e],...t?{flexWrap:`wrap`}:{},position:`relative`,css:{touchAction:`pan-y`},variant:{dragging:n},style:i?{translate:i}:void 0,props:a,children:s})}function h({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 g(e,t){let{icon:n,onClick:i,closeOnSelect:a=!0,variant:o,children:l,props:u,...f}=e,p=(0,s.useContext)(d),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`,...f,variant:[o,{armed:p?.armed??!1}],props:{type:`button`,"data-swipe-action":``,...u,onClick:m},children:n?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(_,{children:n}),l]}):l},t)}function _({children:e}){return r.useBoxElement({tag:`span`,display:`flex`,props:{"aria-hidden":!0},children:e})}var v=e.f(p,`SwipeItem`);v.Action=e.f(g,`SwipeItem.Action`),exports.SwipeUtils=u,exports.default=v;

package/components/swipeItem.d.ts

@@ -0,0 +1,52 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { default as SwipeUtils, SwipeSide } from '../utils/swipe/swipeUtils';
+import { ListItemSize } from './list/listItemParts';
+export type { SwipeSide };
+export { SwipeUtils };
+/** Why a tray opened or closed. A swipe, focus reaching a tray's button, a press elsewhere, Escape, an action chosen. */
+export type SwipeReason = 'swipe' | 'focus' | 'outside-pointer' | 'escape' | 'action';
+export interface SwipeItemProps<TKey extends keyof ComponentsAndVariants = 'list.item'> extends Omit<BoxProps<'li', TKey>, 'open'> {
+    /** The item's parts, exactly as in a `List.Item`: `List.Media`, `List.Content`, `List.End`, `List.Actions`. */
+    children?: React.ReactNode;
+    /** `SwipeItem.Action`s under the inline start edge — a swipe towards the end of the line reveals them. The first is outermost. */
+    startActions?: React.ReactNode;
+    /** `SwipeItem.Action`s under the inline end edge — a swipe towards the start reveals them. The first is outermost. */
+    endActions?: React.ReactNode;
+    /** A swipe carried most of the way across performs the outermost action instead of stopping at the tray — iOS's archive. */
+    fullSwipe?: boolean;
+    /** Which tray is open. Controlled; `null` is closed. */
+    open?: SwipeSide | null;
+    /** Which tray is open to begin with. */
+    defaultOpen?: SwipeSide | null;
+    /** Which tray is open now, and why: a `swipe`, `focus`, an `outside-pointer` press, `escape`, or an `action` chosen. */
+    onOpenChange?: ChangeHandler<SwipeSide | null, SwipeReason>;
+    /** The item's spacing, as on `List.Item`. */
+    size?: ListItemSize;
+    /** Lets the item's parts wrap onto a second line, as on `List.Item`. */
+    wrap?: boolean;
+    /** Tints the item as chosen, as on `List.Item`. */
+    selected?: boolean;
+    /** Ends the item with a chevron, as on `List.Item`. */
+    chevron?: boolean;
+}
+export interface SwipeActionProps<TKey extends keyof ComponentsAndVariants = 'swipeItem.action'> extends Omit<BoxProps<'button', TKey>, 'tag'> {
+    /** What it does, in a word: "Archive", "Delete". It is the button's name. */
+    children?: React.ReactNode;
+    /** An icon over the label. Decoration — the label names the button. */
+    icon?: React.ReactNode;
+    /** Runs the command. The tray closes after it unless `closeOnSelect` is `false`. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Whether choosing the action closes the tray. Default `true`. */
+    closeOnSelect?: boolean;
+}
+interface SwipeItemType {
+    <TKey extends keyof ComponentsAndVariants = 'list.item'>(props: SwipeItemProps<TKey> & RefAttributes<HTMLLIElement>): React.ReactNode;
+    /** One command in a tray. `variant` is `accent`, `warning` or `danger`; unset, it is neutral. */
+    Action: <TKey extends keyof ComponentsAndVariants = 'swipeItem.action'>(props: SwipeActionProps<TKey> & RefAttributes<HTMLButtonElement>) => React.ReactNode;
+    displayName?: string;
+}
+declare const SwipeItem: SwipeItemType;
+export default SwipeItem;