@box-kite/react 2.3.1 → 2.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/rules/box-kite-rules.md +58 -94
- package/.claude/skills/box-kite/SKILL.md +69 -104
- package/.claude/skills/box-kite/references/components.md +8 -1
- package/.claude/skills/box-kite/references/patterns.md +1 -1
- package/.claude/skills/box-kite/references/rules.md +115 -0
- package/.claude/skills/box-kite/references/styling.md +5 -3
- package/.cursor/rules/box-kite.mdc +60 -96
- package/AGENTS.md +61 -97
- package/BOX_AI_CONTEXT.md +111 -40
- package/BOX_KITE_AI_CONTEXT.md +111 -40
- package/README.md +200 -721
- package/box.cjs +1 -1
- package/box.d.ts +5 -0
- package/box.mjs +5 -5
- package/catalog.cjs +1 -1
- package/catalog.mjs +53 -18
- package/client.cjs +1 -1
- package/client.mjs +85 -85
- package/components/accordion.cjs +1 -1
- package/components/accordion.mjs +1 -1
- package/components/button.cjs +1 -1
- package/components/button.mjs +1 -1
- package/components/calendar.cjs +1 -1
- package/components/calendar.mjs +1 -1
- package/components/chart.cjs +1 -1
- package/components/chart.mjs +3 -3
- package/components/checkbox.cjs +1 -1
- package/components/checkbox.mjs +1 -1
- package/components/combobox/comboboxListbox.d.ts +2 -1
- package/components/combobox.cjs +1 -1
- package/components/combobox.d.ts +1 -1
- package/components/combobox.mjs +200 -189
- package/components/dashboard.cjs +1 -1
- package/components/dashboard.mjs +1 -1
- package/components/dataGrid/contracts/dataGridContract.d.ts +2 -1
- package/components/dataGrid/useListLayout.d.ts +1 -1
- package/components/dataGrid.cjs +3 -3
- package/components/dataGrid.mjs +453 -453
- package/components/dateField.cjs +1 -1
- package/components/dateField.mjs +16 -16
- package/components/datePicker.cjs +1 -1
- package/components/datePicker.mjs +1 -1
- package/components/dateTime.cjs +1 -1
- package/components/dateTime.mjs +1 -1
- package/components/dialog.cjs +1 -1
- package/components/dialog.mjs +1 -1
- package/components/flex.cjs +1 -1
- package/components/flex.mjs +1 -1
- package/components/flow.cjs +1 -0
- package/components/flow.d.ts +56 -0
- package/components/flow.mjs +98 -0
- package/components/form.cjs +1 -1
- package/components/form.mjs +1 -1
- package/components/grid.cjs +1 -1
- package/components/grid.mjs +1 -1
- package/components/icon.cjs +1 -1
- package/components/icon.mjs +1 -1
- package/components/list.cjs +1 -1
- package/components/list.mjs +1 -1
- package/components/menu.cjs +1 -1
- package/components/menu.mjs +1 -1
- package/components/popover.cjs +1 -1
- package/components/popover.mjs +1 -1
- package/components/radioButton.cjs +1 -1
- package/components/radioButton.mjs +1 -1
- package/components/radioGroup.cjs +1 -1
- package/components/radioGroup.mjs +2 -1
- package/components/semantics.cjs +1 -1
- package/components/semantics.d.ts +32 -30
- package/components/semantics.mjs +3 -3
- package/components/skeleton.cjs +1 -1
- package/components/skeleton.d.ts +1 -1
- package/components/skeleton.mjs +3 -1
- package/components/slider.cjs +1 -1
- package/components/slider.mjs +1 -1
- package/components/sortableList.cjs +1 -1
- package/components/sortableList.mjs +1 -1
- package/components/svg.cjs +1 -1
- package/components/svg.mjs +14 -14
- package/components/swipeItem.cjs +1 -1
- package/components/swipeItem.mjs +1 -1
- package/components/tabs.cjs +1 -1
- package/components/tabs.mjs +1 -1
- package/components/textarea.cjs +1 -1
- package/components/textarea.d.ts +1 -1
- package/components/textarea.mjs +1 -1
- package/components/textbox.cjs +1 -1
- package/components/textbox.d.ts +1 -1
- package/components/textbox.mjs +1 -1
- package/components/timeZoneSelect.d.ts +1 -1
- package/components/toaster.cjs +1 -1
- package/components/toaster.mjs +14 -15
- package/components/tooltip.cjs +1 -1
- package/components/tooltip.mjs +1 -1
- package/components/virtualList.cjs +1 -1
- package/components/virtualList.mjs +1 -1
- package/components/visuallyHidden.cjs +1 -1
- package/components/visuallyHidden.mjs +1 -1
- package/docs/a11y.md +1 -2
- package/docs/components.md +1 -0
- package/docs/index.md +1 -1
- package/docs/props.md +1 -1
- package/effects.cjs +1 -1
- package/effects.mjs +2 -2
- package/identity.cjs +1 -1
- package/identity.mjs +5 -7
- package/package.json +50 -36
- package/react/boxClassNames.d.ts +2 -2
- package/react/effects.d.ts +5 -6
- package/react/identity/useIdentifier.d.ts +0 -3
- package/react-shared.cjs +1 -1
- package/react-shared.mjs +42 -3
- package/rsc.cjs +1 -1
- package/rsc.d.ts +1 -0
- package/rsc.mjs +2 -2
- package/utils/catalog/catalogContracts.d.ts +0 -10
- package/utils/flow/flowPalette.d.ts +17 -0
- package/utils/flow/flowUtils.d.ts +47 -0
package/components/semantics.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { _ as e, u as t } from "../react-shared.mjs";
|
|
2
2
|
import { useBoxElement as n } from "@box-kite/react";
|
|
3
3
|
//#region src/components/semantics.tsx
|
|
4
4
|
function r(r) {
|
|
5
|
-
return
|
|
5
|
+
return e((e, t) => n({
|
|
6
6
|
tag: r,
|
|
7
7
|
component: r,
|
|
8
8
|
...e
|
|
9
|
-
}, t),
|
|
9
|
+
}, t), t.capitalize(r));
|
|
10
10
|
}
|
|
11
11
|
var i = r("label"), a = r("span"), o = r("article"), s = r("aside"), c = r("details"), l = r("figcaption"), u = r("figure"), d = r("footer"), f = r("header"), p = r("main"), m = r("mark"), h = r("nav"), g = r("menu"), _ = g, v = r("section"), y = r("summary"), b = r("time"), x = r("p"), S = r("ul"), C = r("ol"), w = r("li"), T = r("h1"), E = r("h2"), D = r("h3"), O = r("h4"), k = r("h5"), A = r("h6"), j = r("a"), M = r("img");
|
|
12
12
|
//#endregion
|
package/components/skeleton.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("./visuallyHidden.cjs");let n=require("react/jsx-runtime"),r=require("@box-kite/react");r=e.t(r,1);function i(e){let{lines:i=1,circle:a=!1,label:o,props:s,...c}=e,l=a?1:Math.max(1,Math.trunc(i));return(0,n.jsxs)(r.default,{component:`skeleton`,...c,props:{...o===void 0?{"aria-hidden":!0}:{role:`status`},...s},children:[Array.from({length:l},(e,t)=>(0,n.jsx)(r.default,{component:`skeleton.bar`,variant:{circle:a,short:!a&&l>1&&t===l-1},children:(0,n.jsx)(r.default,{component:`skeleton.gloss`})},t)),o!==void 0&&(0,n.jsx)(t.default,{children:o})]})}exports.default=i;
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("./visuallyHidden.cjs");let n=require("react/jsx-runtime"),r=require("@box-kite/react");r=e.t(r,1);function i(e){let{lines:i=1,circle:a=!1,label:o,props:s,...c}=e,l=a?1:Math.max(1,Math.trunc(i));return(0,n.jsxs)(r.default,{component:`skeleton`,...c,variant:[c.variant,{circle:a}],props:{...o===void 0?{"aria-hidden":!0}:{role:`status`},...s},children:[Array.from({length:l},(e,t)=>(0,n.jsx)(r.default,{component:`skeleton.bar`,variant:{circle:a,short:!a&&l>1&&t===l-1,fill:!a&&l===1},children:(0,n.jsx)(r.default,{component:`skeleton.gloss`})},t)),o!==void 0&&(0,n.jsx)(t.default,{children:o})]})}exports.default=i;
|
package/components/skeleton.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
import { BoxProps } from '../box';
|
|
3
3
|
import { ComponentsAndVariants } from '@box-kite/core/types';
|
|
4
4
|
export interface SkeletonProps<TKey extends keyof ComponentsAndVariants = 'skeleton'> extends BoxProps<'div', TKey> {
|
|
5
|
-
/** How many bars to draw. Default `1
|
|
5
|
+
/** How many bars to draw. Default `1`, which fills the skeleton: `height={40}` is a block. Past that the last bar is short, the way a paragraph's last line is. */
|
|
6
6
|
lines?: number;
|
|
7
7
|
/** A round placeholder — an avatar, a thumbnail. `width` sets its size and the height follows. */
|
|
8
8
|
circle?: boolean;
|
package/components/skeleton.mjs
CHANGED
|
@@ -7,6 +7,7 @@ function i(i) {
|
|
|
7
7
|
return /* @__PURE__ */ n(r, {
|
|
8
8
|
component: "skeleton",
|
|
9
9
|
...l,
|
|
10
|
+
variant: [l.variant, { circle: o }],
|
|
10
11
|
props: {
|
|
11
12
|
...s === void 0 ? { "aria-hidden": !0 } : { role: "status" },
|
|
12
13
|
...c
|
|
@@ -15,7 +16,8 @@ function i(i) {
|
|
|
15
16
|
component: "skeleton.bar",
|
|
16
17
|
variant: {
|
|
17
18
|
circle: o,
|
|
18
|
-
short: !o && u > 1 && n === u - 1
|
|
19
|
+
short: !o && u > 1 && n === u - 1,
|
|
20
|
+
fill: !o && u === 1
|
|
19
21
|
},
|
|
20
22
|
children: /* @__PURE__ */ t(r, { component: "skeleton.gloss" })
|
|
21
23
|
}, n)), s !== void 0 && /* @__PURE__ */ t(e, { children: s })]
|
package/components/slider.cjs
CHANGED
|
@@ -1 +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("../box.cjs"),r=require("../behavior.cjs"),i=require("../reporting.cjs");let a=require("react"),o=require("react/jsx-runtime");var s;(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})(s||={});var c=s,l=`data-index`;function u(e,t,n){return{min:e,max:t,step:n}}function d(e,t){return t?{insetBlockEnd:e}:{insetInlineStart:e}}function f(e,t,n){let r=e.length>1?Math.min(...e):t.min,i=Math.max(...e),a=c.percent(r,t.min,t.max),o=`${Math.round((c.percent(i,t.min,t.max)-a)*100)/100}%`;return n?{insetBlockEnd:`${Math.round(a*100)/100}%`,blockSize:o}:{insetInlineStart:`${Math.round(a*100)/100}%`,inlineSize:o}}function p(e,s){let{value:p,defaultValue:m,onValueChange:h,onValueCommit:g,min:_=0,max:v=100,step:y=1,largeStep:b=y*10,orientation:x=`horizontal`,disabled:S=!1,label:C,labelledBy:w,thumbLabels:T,format:E,name:D,props:O,...k}=e,A=(0,a.useRef)(null),j=(0,a.useCallback)(e=>{A.current=e,t.d(s,e)},[s]),M=(0,a.useRef)(null),N=(0,a.useRef)(null),P=(0,a.useRef)(!1),[F,I]=(0,a.useState)(!1),[L,R]=r.i({value:p,defaultValue:m??_,onChange:h}),z=u(_,v,y),B=x===`vertical`,V=c.thumbs(L),H=r.o(L),U=i.r(g,`slider`,`valueCommit`),W=r.a((e,t)=>{R(t=>c.same(c.thumbs(t),e)?t:c.shaped(t,e),t)}),G=e=>{let n=M.current;if(!n)return;let r=c.valueAt(n.getBoundingClientRect(),e.clientX,e.clientY,x,t._(n));return _+r*(v-_)},K=e=>A.current?.querySelectorAll(`[role="slider"]`)[e],q=r.a(e=>{if(S||e.button!==0||e.defaultPrevented)return;let t=G(e);if(t===void 0)return;let n=c.thumbs(H.current),r=c.nearest(n,t);N.current=r,e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),K(r)?.focus(),W(c.move(n,r,t,z),{reason:`pointer`,event:e})}),J=r.a(e=>{let t=N.current;if(t===null)return;let n=G(e);n!==void 0&&(I(!0),W(c.move(c.thumbs(H.current),t,n,z),{reason:`pointer`,event:e}))}),Y=r.a(e=>{N.current!==null&&(N.current=null,I(!1),e.currentTarget.releasePointerCapture?.(e.pointerId),U(H.current,{reason:`pointer`,event:e}))}),X=r.a(e=>{if(S||e.defaultPrevented)return;let n=e.target?.closest(`[role="slider"]`),r=Number(n?.getAttribute(l)??-1);if(!n||r<0)return;let i=c.moveFor(e.key,t._(n));if(!i)return;e.preventDefault(),P.current=!0,I(!0);let a=c.thumbs(H.current);W(c.move(a,r,c.moved(a[r],i,z,b),z),{reason:`keyboard`,event:e})}),Z=r.a(e=>{P.current&&(P.current=!1,I(!1),U(H.current,{reason:`keyboard`,event:e}))}),Q=V.length>1;return(0,o.jsxs)(n.default,{ref:j,component:`slider`,...k,variant:[k.variant,{vertical:B,disabled:S}],props:{role:Q?`group`:void 0,"aria-label":Q?C:void 0,"aria-labelledby":Q?w:void 0,...O,onPointerDown:q,onPointerMove:J,onPointerUp:Y,onPointerCancel:Y,onKeyDown:X,onKeyUp:Z},children:[(0,o.jsx)(n.default,{ref:M,component:`slider.track`,variant:{vertical:B},children:(0,o.jsx)(n.default,{component:`slider.fill`,variant:{vertical:B,tracking:F},style:f(V,z,B)})}),V.map((e,t)=>(0,o.jsx)(n.default,{component:`slider.thumb`,variant:{vertical:B,disabled:S,tracking:F},style:d(c.percentage(e,_,v),B),props:{role:`slider`,tabIndex:S?-1:0,"aria-valuemin":_,"aria-valuemax":v,"aria-valuenow":e,"aria-valuetext":E?.(e),"aria-orientation":x,"aria-label":T?.[t]??(Q?void 0:C),"aria-labelledby":T?.[t]||Q?void 0:w,"aria-disabled":S||void 0,[l]:t}},t)),D!==void 0&&V.map((e,t)=>(0,o.jsx)(`input`,{type:`hidden`,name:D,value:e,readOnly:!0},t))]})}var m=e.
|
|
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("../box.cjs"),r=require("../behavior.cjs"),i=require("../reporting.cjs");let a=require("react"),o=require("react/jsx-runtime");var s;(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})(s||={});var c=s,l=`data-index`;function u(e,t,n){return{min:e,max:t,step:n}}function d(e,t){return t?{insetBlockEnd:e}:{insetInlineStart:e}}function f(e,t,n){let r=e.length>1?Math.min(...e):t.min,i=Math.max(...e),a=c.percent(r,t.min,t.max),o=`${Math.round((c.percent(i,t.min,t.max)-a)*100)/100}%`;return n?{insetBlockEnd:`${Math.round(a*100)/100}%`,blockSize:o}:{insetInlineStart:`${Math.round(a*100)/100}%`,inlineSize:o}}function p(e,s){let{value:p,defaultValue:m,onValueChange:h,onValueCommit:g,min:_=0,max:v=100,step:y=1,largeStep:b=y*10,orientation:x=`horizontal`,disabled:S=!1,label:C,labelledBy:w,thumbLabels:T,format:E,name:D,props:O,...k}=e,A=(0,a.useRef)(null),j=(0,a.useCallback)(e=>{A.current=e,t.d(s,e)},[s]),M=(0,a.useRef)(null),N=(0,a.useRef)(null),P=(0,a.useRef)(!1),[F,I]=(0,a.useState)(!1),[L,R]=r.i({value:p,defaultValue:m??_,onChange:h}),z=u(_,v,y),B=x===`vertical`,V=c.thumbs(L),H=r.o(L),U=i.r(g,`slider`,`valueCommit`),W=r.a((e,t)=>{R(t=>c.same(c.thumbs(t),e)?t:c.shaped(t,e),t)}),G=e=>{let n=M.current;if(!n)return;let r=c.valueAt(n.getBoundingClientRect(),e.clientX,e.clientY,x,t._(n));return _+r*(v-_)},K=e=>A.current?.querySelectorAll(`[role="slider"]`)[e],q=r.a(e=>{if(S||e.button!==0||e.defaultPrevented)return;let t=G(e);if(t===void 0)return;let n=c.thumbs(H.current),r=c.nearest(n,t);N.current=r,e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),K(r)?.focus(),W(c.move(n,r,t,z),{reason:`pointer`,event:e})}),J=r.a(e=>{let t=N.current;if(t===null)return;let n=G(e);n!==void 0&&(I(!0),W(c.move(c.thumbs(H.current),t,n,z),{reason:`pointer`,event:e}))}),Y=r.a(e=>{N.current!==null&&(N.current=null,I(!1),e.currentTarget.releasePointerCapture?.(e.pointerId),U(H.current,{reason:`pointer`,event:e}))}),X=r.a(e=>{if(S||e.defaultPrevented)return;let n=e.target?.closest(`[role="slider"]`),r=Number(n?.getAttribute(l)??-1);if(!n||r<0)return;let i=c.moveFor(e.key,t._(n));if(!i)return;e.preventDefault(),P.current=!0,I(!0);let a=c.thumbs(H.current);W(c.move(a,r,c.moved(a[r],i,z,b),z),{reason:`keyboard`,event:e})}),Z=r.a(e=>{P.current&&(P.current=!1,I(!1),U(H.current,{reason:`keyboard`,event:e}))}),Q=V.length>1;return(0,o.jsxs)(n.default,{ref:j,component:`slider`,...k,variant:[k.variant,{vertical:B,disabled:S}],props:{role:Q?`group`:void 0,"aria-label":Q?C:void 0,"aria-labelledby":Q?w:void 0,...O,onPointerDown:q,onPointerMove:J,onPointerUp:Y,onPointerCancel:Y,onKeyDown:X,onKeyUp:Z},children:[(0,o.jsx)(n.default,{ref:M,component:`slider.track`,variant:{vertical:B},children:(0,o.jsx)(n.default,{component:`slider.fill`,variant:{vertical:B,tracking:F},style:f(V,z,B)})}),V.map((e,t)=>(0,o.jsx)(n.default,{component:`slider.thumb`,variant:{vertical:B,disabled:S,tracking:F},style:d(c.percentage(e,_,v),B),props:{role:`slider`,tabIndex:S?-1:0,"aria-valuemin":_,"aria-valuemax":v,"aria-valuenow":e,"aria-valuetext":E?.(e),"aria-orientation":x,"aria-label":T?.[t]??(Q?void 0:C),"aria-labelledby":T?.[t]||Q?void 0:w,"aria-disabled":S||void 0,[l]:t}},t)),D!==void 0&&V.map((e,t)=>(0,o.jsx)(`input`,{type:`hidden`,name:D,value:e,readOnly:!0},t))]})}var m=e._(p,`Slider`);exports.default=m;
|
package/components/slider.mjs
CHANGED
|
@@ -1 +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("./svg.cjs"),s=require("./visuallyHidden.cjs"),c=require("../scrolling.cjs"),l=require("./list.cjs");let u=require("react"),d=require("react/jsx-runtime");var f;(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})(f||={});var p=f,m=(0,u.createContext)(null),h=(0,u.createContext)(null),g=48,ee=12,_=`:scope > [data-sortable-value]`;function v(e){return e?Array.from(e.querySelectorAll(_)):[]}function y(e){return v(e).map(e=>e.dataset.sortableValue??``)}function b(e){return new Map(v(e).map(e=>[e.dataset.sortableValue??``,e.getBoundingClientRect().top]))}function te(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}function x(e,r){let{onOrderChange:o,onOrderCommit:f,children:h,variant:_,props:x,...S}=e,C=(0,u.useRef)(null),w=(0,u.useRef)(null),T=(0,u.useRef)(null),[E,D]=(0,u.useState)(null),[O,k]=(0,u.useState)(0),[A,j]=(0,u.useState)(!1),[ne,M]=(0,u.useState)(``),N=`${(0,u.useId)()}-sortable`,P=i.o(E),F=a.r(o,`sortableList`,`orderChange`),I=a.r(f,`sortableList`,`orderCommit`),L=a.i(`sortableList`),R=(0,u.useCallback)(e=>{C.current=e,t.d(r,e)},[r]),z=(e,t)=>`position ${e.indexOf(t)+1} of ${e.length}`,B=(e,t)=>{T.current=b(C.current),F(e,t)};n.n(()=>{let e=T.current;if(e){T.current=null;for(let t of v(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,u.useEffect)(()=>{if(!A)return;let e=requestAnimationFrame(()=>j(!1));return()=>cancelAnimationFrame(e)},[A]),n.n(()=>{if(!E||E.pointer)return;let e=v(C.current).find(e=>e.dataset.sortableValue===E.value)?.querySelector(`[data-sortable-handle]`);e&&e.ownerDocument.activeElement!==e&&e.focus()});let V=i.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=p.targetIndex(n.slots,a,i),k(i)}),H=(e,t)=>{let n=C.current;if(!n)return;let r=n.getBoundingClientRect().top,i=v(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,u.useEffect)(()=>{if(!U)return;let e=c.t(C.current),t=0,n=()=>{let r=P.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+g?-12:t>i-g?ee:0;a&&((e??window).scrollBy(0,a),V(r,t))}t=requestAnimationFrame(n)};return t=requestAnimationFrame(n),()=>cancelAnimationFrame(t)},[U,V,P]);let W=(e,t,n)=>{let r=y(C.current);D({value:e,name:t,origin:r}),L(`grab`,e,{reason:n.type===`keydown`?`keyboard`:`pointer`,event:n,from:r.indexOf(e)}),M(`${t} picked up at ${z(r,e)}. Use the arrow keys to move it, Enter to drop it.`),n.preventDefault()},G=(e,t,n=y(C.current))=>{let r=n.indexOf(e.value);D(null),I(n,{reason:`keyboard`,event:t,value:e.value,from:e.origin.indexOf(e.value),to:r}),M(`${e.name} dropped at ${z(n,e.value)}.`)},K=i.a((e,t)=>{let n=y(C.current);L(`grabCancel`,e.value,{reason:t.type===`keydown`?`escape`:t.type===`blur`?`blur`:`pointercancel`,event:t}),D(null),k(0),te(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)}),M(`${e.name} put back at ${z(e.origin,e.value)}.`)}),q=(e,t,n)=>{let r=y(C.current),i=r.indexOf(e.value);if(i<0||t===i)return r;let a=p.move(r,i,t);return B(a,{reason:`keyboard`,event:n,value:e.value,from:i,to:t}),M(`${e.name}, ${z(a,e.value)}.`),a},J=i.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=i.a(e=>{let t=P.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)<p.SLOP||(w.current=null,H(e,n))}),X=i.a(e=>{let t=w.current;w.current=null;let n=P.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=b(C.current),K(n,e);return}let i=r.order.indexOf(n.value),a=p.move(r.order,i,r.to),o={reason:`pointer`,event:e,value:n.value,from:i,to:r.to};T.current=b(C.current),D(null),k(0),r.to!==i&&F(a,o),I(a,o),M(`${n.name} dropped at ${z(a,n.value)}.`)}),Z=i.a((e,t,n)=>{if(e.defaultPrevented)return;let r=P.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=y(C.current),o=p.keyTarget(e.key,a.indexOf(t),a.length);o!==null&&(e.preventDefault(),q(i,o,e))}),Q=i.a(e=>{setTimeout(()=>{let t=P.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=P.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},re=e=>{$(e)&&e.preventDefault()},ie=e=>{let t=$(e),n=P.current;!t||!n||(e.preventDefault(),e.stopPropagation(),G(n,e,q(n,y(C.current).indexOf(t.dataset.sortableValue??``),e)))},ae=(0,u.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=p.shiftOf(e.slots,t,e.to,e.order.indexOf(n));return r?`0 ${r}px`:void 0},settling:A,instructionsId:N,handleProps:(e,t)=>({type:`button`,"data-sortable-handle":``,"aria-label":`Move ${t}`,"aria-pressed":E?.value===e,"aria-describedby":N,onPointerDown:n=>J(n,e,t),onPointerMove:Y,onPointerUp:X,onPointerCancel:X,onKeyDown:n=>Z(n,e,t),onBlur:()=>Q(e)})}},[E,O,A,N,J,Y,X,Z,Q]);return(0,d.jsxs)(m.Provider,{value:ae,children:[(0,d.jsx)(l.default,{ref:R,...S,variant:_,userSelect:U?`none`:void 0,props:{...x,onMouseDownCapture:re,onClickCapture:ie},children:h}),(0,d.jsx)(s.default,{props:{role:`status`},children:ne}),(0,d.jsx)(s.default,{id:N,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,...s}=e,c=(0,u.useContext)(m),f=c?.heldOf(n),p=c?.translateOf(n),g=(0,u.useMemo)(()=>({value:n,name:r??n,disabled:i}),[n,r,i]);return(0,d.jsx)(h.Provider,{value:g,children:(0,d.jsx)(l.default.Item,{ref:t,...s,variant:[a,{lifted:f===`pointer`,grabbed:f===`keyboard`,settling:c?.settling??!1}],style:p?{translate:p}:void 0,props:{...o,"data-sortable-value":n}})})}function C(){return(0,d.jsx)(o.Svg,{viewBox:`0 0 16 16`,width:`1rem`,fill:`currentColor`,children:[5,11].flatMap(e=>[3,8,13].map(t=>(0,d.jsx)(o.Circle,{cx:e,cy:t,r:1.4},`${e}-${t}`)))})}function w(e,t){let{children:n,variant:i,props:a,...o}=e,s=(0,u.useContext)(m),c=(0,u.useContext)(h),l=c&&s?s.handleProps(c.value,c.name):{};return r.useBoxElement({tag:`button`,component:`sortableList.handle`,display:`flex`,ai:`center`,jc:`center`,flexShrink:0,width:10,height:10,position:`relative`,zIndex:1,touchAction:`none`,...o,variant:[i,{grabbed:c?s?.heldOf(c.value)!==void 0:!1}],props:{...l,...c?.disabled?{disabled:!0}:{},...a},children:n??(0,d.jsx)(C,{})},t)}var T=e.
|
|
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("./svg.cjs"),s=require("./visuallyHidden.cjs"),c=require("../scrolling.cjs"),l=require("./list.cjs");let u=require("react"),d=require("react/jsx-runtime");var f;(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})(f||={});var p=f,m=(0,u.createContext)(null),h=(0,u.createContext)(null),g=48,ee=12,_=`:scope > [data-sortable-value]`;function v(e){return e?Array.from(e.querySelectorAll(_)):[]}function y(e){return v(e).map(e=>e.dataset.sortableValue??``)}function b(e){return new Map(v(e).map(e=>[e.dataset.sortableValue??``,e.getBoundingClientRect().top]))}function te(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}function x(e,r){let{onOrderChange:o,onOrderCommit:f,children:h,variant:_,props:x,...S}=e,C=(0,u.useRef)(null),w=(0,u.useRef)(null),T=(0,u.useRef)(null),[E,D]=(0,u.useState)(null),[O,k]=(0,u.useState)(0),[A,j]=(0,u.useState)(!1),[ne,M]=(0,u.useState)(``),N=`${(0,u.useId)()}-sortable`,P=i.o(E),F=a.r(o,`sortableList`,`orderChange`),I=a.r(f,`sortableList`,`orderCommit`),L=a.i(`sortableList`),R=(0,u.useCallback)(e=>{C.current=e,t.d(r,e)},[r]),z=(e,t)=>`position ${e.indexOf(t)+1} of ${e.length}`,B=(e,t)=>{T.current=b(C.current),F(e,t)};n.n(()=>{let e=T.current;if(e){T.current=null;for(let t of v(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,u.useEffect)(()=>{if(!A)return;let e=requestAnimationFrame(()=>j(!1));return()=>cancelAnimationFrame(e)},[A]),n.n(()=>{if(!E||E.pointer)return;let e=v(C.current).find(e=>e.dataset.sortableValue===E.value)?.querySelector(`[data-sortable-handle]`);e&&e.ownerDocument.activeElement!==e&&e.focus()});let V=i.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=p.targetIndex(n.slots,a,i),k(i)}),H=(e,t)=>{let n=C.current;if(!n)return;let r=n.getBoundingClientRect().top,i=v(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,u.useEffect)(()=>{if(!U)return;let e=c.t(C.current),t=0,n=()=>{let r=P.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+g?-12:t>i-g?ee:0;a&&((e??window).scrollBy(0,a),V(r,t))}t=requestAnimationFrame(n)};return t=requestAnimationFrame(n),()=>cancelAnimationFrame(t)},[U,V,P]);let W=(e,t,n)=>{let r=y(C.current);D({value:e,name:t,origin:r}),L(`grab`,e,{reason:n.type===`keydown`?`keyboard`:`pointer`,event:n,from:r.indexOf(e)}),M(`${t} picked up at ${z(r,e)}. Use the arrow keys to move it, Enter to drop it.`),n.preventDefault()},G=(e,t,n=y(C.current))=>{let r=n.indexOf(e.value);D(null),I(n,{reason:`keyboard`,event:t,value:e.value,from:e.origin.indexOf(e.value),to:r}),M(`${e.name} dropped at ${z(n,e.value)}.`)},K=i.a((e,t)=>{let n=y(C.current);L(`grabCancel`,e.value,{reason:t.type===`keydown`?`escape`:t.type===`blur`?`blur`:`pointercancel`,event:t}),D(null),k(0),te(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)}),M(`${e.name} put back at ${z(e.origin,e.value)}.`)}),q=(e,t,n)=>{let r=y(C.current),i=r.indexOf(e.value);if(i<0||t===i)return r;let a=p.move(r,i,t);return B(a,{reason:`keyboard`,event:n,value:e.value,from:i,to:t}),M(`${e.name}, ${z(a,e.value)}.`),a},J=i.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=i.a(e=>{let t=P.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)<p.SLOP||(w.current=null,H(e,n))}),X=i.a(e=>{let t=w.current;w.current=null;let n=P.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=b(C.current),K(n,e);return}let i=r.order.indexOf(n.value),a=p.move(r.order,i,r.to),o={reason:`pointer`,event:e,value:n.value,from:i,to:r.to};T.current=b(C.current),D(null),k(0),r.to!==i&&F(a,o),I(a,o),M(`${n.name} dropped at ${z(a,n.value)}.`)}),Z=i.a((e,t,n)=>{if(e.defaultPrevented)return;let r=P.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=y(C.current),o=p.keyTarget(e.key,a.indexOf(t),a.length);o!==null&&(e.preventDefault(),q(i,o,e))}),Q=i.a(e=>{setTimeout(()=>{let t=P.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=P.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},re=e=>{$(e)&&e.preventDefault()},ie=e=>{let t=$(e),n=P.current;!t||!n||(e.preventDefault(),e.stopPropagation(),G(n,e,q(n,y(C.current).indexOf(t.dataset.sortableValue??``),e)))},ae=(0,u.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=p.shiftOf(e.slots,t,e.to,e.order.indexOf(n));return r?`0 ${r}px`:void 0},settling:A,instructionsId:N,handleProps:(e,t)=>({type:`button`,"data-sortable-handle":``,"aria-label":`Move ${t}`,"aria-pressed":E?.value===e,"aria-describedby":N,onPointerDown:n=>J(n,e,t),onPointerMove:Y,onPointerUp:X,onPointerCancel:X,onKeyDown:n=>Z(n,e,t),onBlur:()=>Q(e)})}},[E,O,A,N,J,Y,X,Z,Q]);return(0,d.jsxs)(m.Provider,{value:ae,children:[(0,d.jsx)(l.default,{ref:R,...S,variant:_,userSelect:U?`none`:void 0,props:{...x,onMouseDownCapture:re,onClickCapture:ie},children:h}),(0,d.jsx)(s.default,{props:{role:`status`},children:ne}),(0,d.jsx)(s.default,{id:N,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,...s}=e,c=(0,u.useContext)(m),f=c?.heldOf(n),p=c?.translateOf(n),g=(0,u.useMemo)(()=>({value:n,name:r??n,disabled:i}),[n,r,i]);return(0,d.jsx)(h.Provider,{value:g,children:(0,d.jsx)(l.default.Item,{ref:t,...s,variant:[a,{lifted:f===`pointer`,grabbed:f===`keyboard`,settling:c?.settling??!1}],style:p?{translate:p}:void 0,props:{...o,"data-sortable-value":n}})})}function C(){return(0,d.jsx)(o.Svg,{viewBox:`0 0 16 16`,width:`1rem`,fill:`currentColor`,children:[5,11].flatMap(e=>[3,8,13].map(t=>(0,d.jsx)(o.Circle,{cx:e,cy:t,r:1.4},`${e}-${t}`)))})}function w(e,t){let{children:n,variant:i,props:a,...o}=e,s=(0,u.useContext)(m),c=(0,u.useContext)(h),l=c&&s?s.handleProps(c.value,c.name):{};return r.useBoxElement({tag:`button`,component:`sortableList.handle`,display:`flex`,ai:`center`,jc:`center`,flexShrink:0,width:10,height:10,position:`relative`,zIndex:1,touchAction:`none`,...o,variant:[i,{grabbed:c?s?.heldOf(c.value)!==void 0:!1}],props:{...l,...c?.disabled?{disabled:!0}:{},...a},children:n??(0,d.jsx)(C,{})},t)}var T=e._(x,`SortableList`);T.Item=e._(S,`SortableList.Item`),T.Handle=e._(w,`SortableList.Handle`),exports.SortableUtils=p,exports.default=T;
|
package/components/svg.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../react-shared.cjs");let t=require("@box-kite/react");function n(e,t){let{props:n,...r}=e,i=r,a;for(let e of t)e in i&&((a??={})[e]=i[e],delete i[e]);return{styleProps:i,tagProps:a?{...n,...a}:n}}function r(r,i=[],a){let o=i;return e.
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../react-shared.cjs");let t=require("@box-kite/react");function n(e,t){let{props:n,...r}=e,i=r,a;for(let e of t)e in i&&((a??={})[e]=i[e],delete i[e]);return{styleProps:i,tagProps:a?{...n,...a}:n}}function r(r,i=[],a){let o=i;return e.p(e._((e,i)=>{let{styleProps:a,tagProps:s}=n(e,o);return(0,t.useBoxElement)({tag:r,component:r,...a,props:s},i)},a??e.u.capitalize(r)))}var i=`http://www.w3.org/2000/svg`,a=[`viewBox`,`preserveAspectRatio`,`width`,`height`];function o(r,o){let{label:s,...c}=r,{styleProps:l,tagProps:u}=n(c,a);return(0,t.useBoxElement)({tag:`svg`,component:`svg`,...l,props:{xmlns:i,...e.d(s,u),...u}},o)}var s=e.p(e._(o,`Svg`)),c=r(`g`,[`transform`]),l=r(`defs`),u=r(`path`,[`d`,`transform`,`pathLength`]),d=r(`circle`,[`transform`,`pathLength`]),f=r(`ellipse`,[`transform`,`pathLength`]),p=r(`rect`,[`width`,`height`,`transform`,`pathLength`]),m=r(`line`,[`x1`,`y1`,`x2`,`y2`,`transform`,`pathLength`]),h=r(`polyline`,[`points`,`transform`,`pathLength`]),g=r(`polygon`,[`points`,`transform`,`pathLength`]),_=r(`text`,[`x`,`y`,`dx`,`dy`,`textLength`,`lengthAdjust`,`transform`],`SvgText`),v=r(`tspan`,[`x`,`y`,`dx`,`dy`,`textLength`,`lengthAdjust`],`TSpan`),y=r(`linearGradient`,[`x1`,`y1`,`x2`,`y2`,`gradientUnits`,`gradientTransform`,`spreadMethod`]),b=r(`radialGradient`,[`cx`,`cy`,`r`,`fx`,`fy`,`gradientUnits`,`gradientTransform`,`spreadMethod`]),x=r(`stop`,[`offset`,`stopColor`,`stopOpacity`]),S=r(`clipPath`,[`clipPathUnits`,`transform`]),C=r(`mask`,[`maskUnits`,`maskContentUnits`,`x`,`y`,`width`,`height`]),w=r(`use`,[`href`,`width`,`height`,`transform`]),T=r(`symbol`,[`viewBox`,`preserveAspectRatio`,`x`,`y`,`width`,`height`],`SvgSymbol`),E=r(`marker`,[`markerWidth`,`markerHeight`,`refX`,`refY`,`orient`,`markerUnits`,`viewBox`]);exports.Circle=d,exports.ClipPath=S,exports.Defs=l,exports.Ellipse=f,exports.G=c,exports.Line=m,exports.LinearGradient=y,exports.Marker=E,exports.Mask=C,exports.Path=u,exports.Polygon=g,exports.Polyline=h,exports.RadialGradient=b,exports.Rect=p,exports.Stop=x,exports.Svg=s,exports.SvgSymbol=T,exports.SvgText=_,exports.TSpan=v,exports.Use=w;
|
package/components/svg.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { _ as e, d as t, p as n, u as r } from "../react-shared.mjs";
|
|
2
2
|
import { useBoxElement as i } from "@box-kite/react";
|
|
3
3
|
//#region src/components/svg.tsx
|
|
4
4
|
function a(e, t) {
|
|
@@ -12,17 +12,17 @@ function a(e, t) {
|
|
|
12
12
|
} : n
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
|
-
function o(
|
|
15
|
+
function o(t, o = [], s) {
|
|
16
16
|
let c = o;
|
|
17
|
-
return
|
|
18
|
-
let { styleProps:
|
|
17
|
+
return n(e((e, n) => {
|
|
18
|
+
let { styleProps: r, tagProps: o } = a(e, c);
|
|
19
19
|
return i({
|
|
20
|
-
tag:
|
|
21
|
-
component:
|
|
22
|
-
...
|
|
20
|
+
tag: t,
|
|
21
|
+
component: t,
|
|
22
|
+
...r,
|
|
23
23
|
props: o
|
|
24
|
-
},
|
|
25
|
-
}, s ??
|
|
24
|
+
}, n);
|
|
25
|
+
}, s ?? r.capitalize(t)));
|
|
26
26
|
}
|
|
27
27
|
var s = "http://www.w3.org/2000/svg", c = [
|
|
28
28
|
"viewBox",
|
|
@@ -30,20 +30,20 @@ var s = "http://www.w3.org/2000/svg", c = [
|
|
|
30
30
|
"width",
|
|
31
31
|
"height"
|
|
32
32
|
];
|
|
33
|
-
function l(e,
|
|
34
|
-
let { label:
|
|
33
|
+
function l(e, n) {
|
|
34
|
+
let { label: r, ...o } = e, { styleProps: l, tagProps: u } = a(o, c);
|
|
35
35
|
return i({
|
|
36
36
|
tag: "svg",
|
|
37
37
|
component: "svg",
|
|
38
38
|
...l,
|
|
39
39
|
props: {
|
|
40
40
|
xmlns: s,
|
|
41
|
-
...r
|
|
41
|
+
...t(r, u),
|
|
42
42
|
...u
|
|
43
43
|
}
|
|
44
|
-
},
|
|
44
|
+
}, n);
|
|
45
45
|
}
|
|
46
|
-
var u = /* @__PURE__ */
|
|
46
|
+
var u = /* @__PURE__ */ n(e(l, "Svg")), d = /* @__PURE__ */ o("g", ["transform"]), f = /* @__PURE__ */ o("defs"), p = /* @__PURE__ */ o("path", [
|
|
47
47
|
"d",
|
|
48
48
|
"transform",
|
|
49
49
|
"pathLength"
|
package/components/swipeItem.cjs
CHANGED
|
@@ -1 +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.d(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._(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.g(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.f(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`,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.
|
|
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.d(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._(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.g(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.f(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`,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._(m,`SwipeItem`);_.Action=e._(h,`SwipeItem.Action`),exports.SwipeUtils=d,exports.default=_;
|
package/components/swipeItem.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { _ as e } from "../react-shared.mjs";
|
|
3
3
|
import { _ as t, d as n, f as r, g as i, t as a } from "../platform.mjs";
|
|
4
4
|
import { n as o } from "../effects.mjs";
|
|
5
5
|
import { useBoxElement as s } from "../box.mjs";
|
package/components/tabs.cjs
CHANGED
|
@@ -1 +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.d(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._(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.d(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.
|
|
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.d(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._(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.d(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._(h,`Tabs.List`),y.Tab=g,y.Panels=e._(_,`Tabs.Panels`),y.Panel=v,y.displayName=`Tabs`,exports.default=y;
|
package/components/tabs.mjs
CHANGED
package/components/textarea.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../forms.cjs");let n=require("@box-kite/react");var r=[`name`,`onInput`,`onChange`,`value`,`defaultValue`,`rows`,`cols`,`autoFocus`,`maxLength`,`minLength`,`readOnly`];function i(i,a){let{placeholder:o,...s}=i,{text:c,styles:l}=t.t(o),u=e.
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../forms.cjs");let n=require("@box-kite/react");var r=[`name`,`onInput`,`onChange`,`value`,`defaultValue`,`rows`,`cols`,`autoFocus`,`maxLength`,`minLength`,`readOnly`];function i(i,a){let{placeholder:o,...s}=i,{text:c,styles:l}=t.t(o),u=e.l.buildProps(s,r,c===void 0?void 0:{placeholder:c});return(0,n.useBoxElement)({tag:`textarea`,component:`textarea`,...u,placeholder:l},a)}var a=e._(i,`Textarea`);exports.default=a;
|
package/components/textarea.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ type TextareaTagProps = OmitTagProps<BoxTagProps<'textarea'>, TagPropsType | 'ty
|
|
|
10
10
|
interface Props<TKey extends keyof ComponentsAndVariants> extends TextareaProps<TKey> {
|
|
11
11
|
/** What the field submits under, and what a `<label htmlFor>` of your own would point at. */
|
|
12
12
|
name?: string;
|
|
13
|
-
/** Attributes for the `<textarea>` itself — an `
|
|
13
|
+
/** Attributes for the `<textarea>` itself — an `aria-label`, `autoComplete`, `wrap`. Its `id` is the top-level prop. */
|
|
14
14
|
props?: TextareaTagProps;
|
|
15
15
|
/** Fires on every keystroke. `onChange` is React's alias for the same event. */
|
|
16
16
|
onInput?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
package/components/textarea.mjs
CHANGED
package/components/textbox.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../forms.cjs");let n=require("@box-kite/react");var r=[`name`,`onInput`,`onChange`,`type`,`step`,`defaultValue`,`autoFocus`,`readOnly`,`required`,`value`,`pattern`];function i(i,a){let{placeholder:o,...s}=i,{text:c,styles:l}=t.t(o),u=e.
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../forms.cjs");let n=require("@box-kite/react");var r=[`name`,`onInput`,`onChange`,`type`,`step`,`defaultValue`,`autoFocus`,`readOnly`,`required`,`value`,`pattern`];function i(i,a){let{placeholder:o,...s}=i,{text:c,styles:l}=t.t(o),u=e.l.buildProps(s,r,c===void 0?void 0:{placeholder:c});return(0,n.useBoxElement)({tag:`input`,component:`textbox`,...u,placeholder:l},a)}var a=e._(i,`Textbox`);exports.default=a;
|
package/components/textbox.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'n
|
|
|
11
11
|
interface Props<TKey extends keyof ComponentsAndVariants> extends TextareaProps<TKey> {
|
|
12
12
|
/** What the field submits under, and what a `<label htmlFor>` of your own would point at. */
|
|
13
13
|
name?: string;
|
|
14
|
-
/** Attributes for the `<input>` itself — an `
|
|
14
|
+
/** Attributes for the `<input>` itself — an `aria-label`, `inputMode`, `autoComplete`. Its `id` is the top-level prop. */
|
|
15
15
|
props?: TextboxTagProps;
|
|
16
16
|
/** Fires on every keystroke. `onChange` is React's alias for the same event. */
|
|
17
17
|
onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
package/components/textbox.mjs
CHANGED
|
@@ -21,7 +21,7 @@ export interface TimeZoneSelectProps extends TimeZoneSelectBoxProps {
|
|
|
21
21
|
name?: string;
|
|
22
22
|
/** Not editable and not openable, but still read out. */
|
|
23
23
|
disabled?: boolean;
|
|
24
|
-
/** Attributes for the `<input>` itself — an `aria-label`,
|
|
24
|
+
/** Attributes for the `<input>` itself — an `aria-label`, or the `id` a `<label htmlFor>` of your own points at. */
|
|
25
25
|
props?: Record<string, unknown>;
|
|
26
26
|
/** What the list says when nothing matches. Default `'No time zone matches'`. */
|
|
27
27
|
emptyText?: React.ReactNode;
|
package/components/toaster.cjs
CHANGED
|
@@ -1 +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")
|
|
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");var f=[`value`],p={toasts:[],overflow:0},m=0;function h(){return m+=1,`toast-${m}`}function g(e){let t=[],n=p,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=()=>{t=t.filter(e=>e.open||e.visible);let e=t.filter(e=>!e.open).length,i=0;t=t.map(t=>{if(!t.open)return t;let n=e<r;return n?e++:i++,t.visible===n?t:{...t,visible:n}}),n={toasts:t,overflow:i},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),g(n.id,`timeout`)},t.remaining))}for(let t of[...c.keys()])e.has(t)||l(t)}let m=(e,t)=>t??(e===`loading`?1/0:a);function g(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:f})}))}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?m(i):t.duration),open:!0}}),a&&(u(),i.t({component:`toaster`,type:`update`,reason:r?.kind,value:n,details:{id:e},source:`app`,content:f}))}function v(e,n){let r=n?.id??h();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:m(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:f}),r}return{subscribe(e){return s.add(e),()=>s.delete(e)},getSnapshot:()=>n,getServerSnapshot:()=>p,add:v,update:_,dismiss:g,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=p,s.forEach(e=>e())}}}var _=g(),v=e=>(t,n)=>_.add(t,{...n,kind:e}),y=Object.assign((e,t)=>_.add(e,t),{success:v(`success`),error:v(`error`),warning:v(`warning`),info:v(`info`),loading:v(`loading`),update:(e,t,n)=>_.update(e,t,n),dismiss:e=>_.dismiss(e,`imperative`),promise(e,t,n){let r=_.add(t.loading,{...n,id:n?.id,kind:`loading`}),i=(e,t)=>typeof e==`function`?e(t):e;return e.then(e=>_.update(r,i(t.success,e),{kind:`success`}),e=>_.update(r,i(t.error,e),{kind:`error`})),e}}),b={"top-start":`topStart`,"top-center":`topCenter`,"top-end":`topEnd`,"bottom-start":`bottomStart`,"bottom-center":`bottomCenter`,"bottom-end":`bottomEnd`};function x(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 S(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 C(e,i){let{position:o=`bottom-end`,limit:c=3,duration:f=5e3,label:p=`Notifications`,closeLabel:m=`Close`,overflowLabel:h=e=>`+${e} more`,hotkey:g=`F6`,store:v=_,props:y,...C}=e,w=(0,l.useSyncExternalStore)(v.subscribe,v.getSnapshot,v.getServerSnapshot),T=s.n(),E=n.t(!T),D=(0,l.useRef)(null),O=(0,l.useCallback)(e=>{D.current=e,t.d(i,e)},[i]),k=(0,l.useRef)(null),[A,j]=(0,l.useState)(null),M=(0,l.useRef)({hovered:!1,focused:!1,hidden:!1}),N=(0,l.useCallback)(()=>{let{hovered:e,focused:t,hidden:n}=M.current;e||t||n?v.pause():v.resume()},[v]);r.n(()=>v.setLimit(c),[v,c]),r.n(()=>v.setDefaultDuration(f),[v,f]),r.n(()=>{let e=D.current;e&&(M.current.hovered=e.matches(`:hover`),M.current.focused=e.contains(e.ownerDocument.activeElement),N())},[w,A,N]),r.n(()=>{let e=D.current;!T||!t.c()||!e||!e.isConnected||e.matches(`:popover-open`)||e.showPopover()}),r.n(()=>{let e=t.t();if(!e)return;let n=[],r=new AbortController;return e.addEventListener(t.l,e=>{let{dialog:t,open:r}=e.detail,i=n.indexOf(t);i>=0&&n.splice(i,1),r&&n.push(t),j(n[n.length-1]??null)},{signal:r.signal}),()=>r.abort()},[]),r.n(()=>{let e=t.t();if(!e)return;let n=new AbortController;return e.addEventListener(`visibilitychange`,()=>{M.current.hidden=e.hidden,N()},{signal:n.signal}),()=>n.abort()},[N]),r.n(()=>{let e=t.t();if(!g||!e)return;let n=new AbortController;return e.addEventListener(`keydown`,t=>{!x(t,g)||!D.current||(t.preventDefault(),k.current=e.activeElement,D.current.focus())},{signal:n.signal}),()=>n.abort()},[g]);let P=e=>!!e&&!!D.current?.contains(e),F=()=>{M.current.hovered=!0,N()},I=e=>{P(e.relatedTarget)||(M.current.hovered=!1,N())},L=e=>{M.current.focused=!0,N(),P(e.relatedTarget)||(k.current=e.relatedTarget)},R=e=>{P(e.relatedTarget)||(M.current.focused=!1,N())},z=e=>{if(e.key!==`Escape`)return;A&&e.preventDefault();let t=(e.target.closest?.(`[data-toast-id]`))?.getAttribute(`data-toast-id`);t&&v.dismiss(t,`close`),v.getSnapshot().toasts.some(e=>e.open)?D.current?.focus():k.current?.focus()},B=o.startsWith(`top`),V=w.toasts.filter(e=>e.visible),H=B?[...V].reverse():V,U=w.overflow>0&&(0,u.jsx)(a.default,{component:`toaster.overflow`,children:h(w.overflow)}),W=(0,u.jsxs)(a.default,{tag:`section`,ref:O,component:`toaster`,...C,variant:[C.variant,{[b[o]]:!0}],props:{...T?{popover:`manual`}:{},"aria-live":`polite`,"aria-atomic":`false`,"aria-relevant":`additions text`,"aria-label":p,tabIndex:-1,...y,onPointerOver:F,onPointerOut:I,onFocus:L,onBlur:R,onKeyDown:z},children:[!B&&U,H.map(e=>(0,u.jsx)(S,{toast:e,store:v,fromTop:B,closeLabel:m},e.id)),B&&U]});return A?(0,d.createPortal)(W,A):T?W:E?(0,d.createPortal)(W,E):null}var w=e._(C,`Toaster`);exports.createToastStore=g,exports.default=w,exports.defaultToastStore=_,exports.toast=y;
|
package/components/toaster.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { _ as e } from "../react-shared.mjs";
|
|
3
3
|
import { c as t, d as n, l as r, t as i } from "../platform.mjs";
|
|
4
4
|
import { t as a } from "../client.mjs";
|
|
5
5
|
import { n as o } from "../effects.mjs";
|
|
@@ -8,10 +8,9 @@ import c from "../box.mjs";
|
|
|
8
8
|
import { i as l } from "../reporting.mjs";
|
|
9
9
|
import { n as u } from "../layer.mjs";
|
|
10
10
|
import { r as d } from "../motion.mjs";
|
|
11
|
-
import { useCallback as f, useRef as p, useState as m } from "react";
|
|
12
|
-
import { jsx as
|
|
13
|
-
import { createPortal as
|
|
14
|
-
import { useSyncExternalStore as v } from "use-sync-external-store/shim";
|
|
11
|
+
import { useCallback as f, useRef as p, useState as m, useSyncExternalStore as h } from "react";
|
|
12
|
+
import { jsx as g, jsxs as _ } from "react/jsx-runtime";
|
|
13
|
+
import { createPortal as v } from "react-dom";
|
|
15
14
|
//#region src/utils/toast/toastStore.ts
|
|
16
15
|
var y = ["value"], b = {
|
|
17
16
|
toasts: [],
|
|
@@ -212,7 +211,7 @@ function k(e) {
|
|
|
212
211
|
content: ["value"]
|
|
213
212
|
}) : n.dismiss(t.id, "action");
|
|
214
213
|
};
|
|
215
|
-
return /* @__PURE__ */
|
|
214
|
+
return /* @__PURE__ */ _(c, {
|
|
216
215
|
ref: s,
|
|
217
216
|
component: "toaster.toast",
|
|
218
217
|
variant: {
|
|
@@ -225,15 +224,15 @@ function k(e) {
|
|
|
225
224
|
...u
|
|
226
225
|
},
|
|
227
226
|
children: [
|
|
228
|
-
/* @__PURE__ */
|
|
227
|
+
/* @__PURE__ */ g(c, {
|
|
229
228
|
component: "toaster.message",
|
|
230
229
|
children: t.message
|
|
231
230
|
}),
|
|
232
|
-
t.description !== void 0 && /* @__PURE__ */
|
|
231
|
+
t.description !== void 0 && /* @__PURE__ */ g(c, {
|
|
233
232
|
component: "toaster.description",
|
|
234
233
|
children: t.description
|
|
235
234
|
}),
|
|
236
|
-
p && /* @__PURE__ */
|
|
235
|
+
p && /* @__PURE__ */ g(c, {
|
|
237
236
|
tag: "button",
|
|
238
237
|
component: "toaster.action",
|
|
239
238
|
props: {
|
|
@@ -242,7 +241,7 @@ function k(e) {
|
|
|
242
241
|
},
|
|
243
242
|
children: p.label
|
|
244
243
|
}),
|
|
245
|
-
t.dismissible && /* @__PURE__ */
|
|
244
|
+
t.dismissible && /* @__PURE__ */ g(c, {
|
|
246
245
|
tag: "button",
|
|
247
246
|
component: "toaster.close",
|
|
248
247
|
props: {
|
|
@@ -255,7 +254,7 @@ function k(e) {
|
|
|
255
254
|
});
|
|
256
255
|
}
|
|
257
256
|
function A(e, s) {
|
|
258
|
-
let { position: l = "bottom-end", limit: d = 3, duration: y = 5e3, label: b = "Notifications", closeLabel: x = "Close", overflowLabel: S = (e) => `+${e} more`, hotkey: C = "F6", store: T = w, props: E, ...A } = e, j =
|
|
257
|
+
let { position: l = "bottom-end", limit: d = 3, duration: y = 5e3, label: b = "Notifications", closeLabel: x = "Close", overflowLabel: S = (e) => `+${e} more`, hotkey: C = "F6", store: T = w, props: E, ...A } = e, j = h(T.subscribe, T.getSnapshot, T.getServerSnapshot), M = u(), N = a(!M), P = p(null), F = f((e) => {
|
|
259
258
|
P.current = e, n(s, e);
|
|
260
259
|
}, [s]), I = p(null), [L, R] = m(null), z = p({
|
|
261
260
|
hovered: !1,
|
|
@@ -311,10 +310,10 @@ function A(e, s) {
|
|
|
311
310
|
L && e.preventDefault();
|
|
312
311
|
let t = (e.target.closest?.("[data-toast-id]"))?.getAttribute("data-toast-id");
|
|
313
312
|
t && T.dismiss(t, "close"), T.getSnapshot().toasts.some((e) => e.open) ? P.current?.focus() : I.current?.focus();
|
|
314
|
-
}, q = l.startsWith("top"), J = j.toasts.filter((e) => e.visible), Y = q ? [...J].reverse() : J, X = j.overflow > 0 && /* @__PURE__ */
|
|
313
|
+
}, q = l.startsWith("top"), J = j.toasts.filter((e) => e.visible), Y = q ? [...J].reverse() : J, X = j.overflow > 0 && /* @__PURE__ */ g(c, {
|
|
315
314
|
component: "toaster.overflow",
|
|
316
315
|
children: S(j.overflow)
|
|
317
|
-
}), Z = /* @__PURE__ */
|
|
316
|
+
}), Z = /* @__PURE__ */ _(c, {
|
|
318
317
|
tag: "section",
|
|
319
318
|
ref: F,
|
|
320
319
|
component: "toaster",
|
|
@@ -336,7 +335,7 @@ function A(e, s) {
|
|
|
336
335
|
},
|
|
337
336
|
children: [
|
|
338
337
|
!q && X,
|
|
339
|
-
Y.map((e) => /* @__PURE__ */
|
|
338
|
+
Y.map((e) => /* @__PURE__ */ g(k, {
|
|
340
339
|
toast: e,
|
|
341
340
|
store: T,
|
|
342
341
|
fromTop: q,
|
|
@@ -345,7 +344,7 @@ function A(e, s) {
|
|
|
345
344
|
q && X
|
|
346
345
|
]
|
|
347
346
|
});
|
|
348
|
-
return L ?
|
|
347
|
+
return L ? v(Z, L) : M ? Z : N ? v(Z, N) : null;
|
|
349
348
|
}
|
|
350
349
|
var j = e(A, "Toaster");
|
|
351
350
|
//#endregion
|
package/components/tooltip.cjs
CHANGED
|
@@ -1 +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("../behavior.cjs"),r=require("../identity.cjs"),i=require("./overlay.cjs"),a=require("./presence.cjs");let o=require("react"),s=require("react/jsx-runtime");function c(e,c){let{content:l,children:u,open:d,defaultOpen:f=!1,onOpenChange:p,openDelay:m=300,closeDelay:h=150,side:g=`bottom`,align:_=`center`,offset:v=1,flip:y=!0,props:b,...x}=e,S=r.t(`tooltip`),C=x.id??S,[w,T]=n.i({value:d,defaultValue:f,onChange:p}),[E,D]=(0,o.useState)(null),O=(0,o.useRef)(null),k=(0,o.useCallback)(e=>{O.current=e,t.d(c,e)},[c]),A=(0,o.useRef)(void 0),j=(0,o.useRef)(!1),M=(0,o.useRef)(!1),N=(0,o.useRef)(!1),P=(0,o.useRef)(!1),F=(0,o.useCallback)(()=>{clearTimeout(A.current),A.current=void 0},[]),I=(0,o.useCallback)((e,t)=>{if(F(),e<=0){t();return}A.current=setTimeout(()=>{A.current=void 0,t()},e)},[F]),L=(0,o.useCallback)((e,t)=>{I(h,()=>{j.current||M.current||N.current||T(!1,{reason:e,event:t})})},[h,I,T]);n.r({enabled:w,outsidePointer:!1,inside:[O],onDismiss:(e,t)=>{F(),P.current=!0,T(!1,{reason:e,event:t})}}),(0,o.useEffect)(()=>F,[F]);let R=w&&l!=null,z=n.a(e=>{j.current=!0,!P.current&&I(m,()=>T(!0,{reason:`hover`,event:e}))}),B=n.a(e=>{j.current=!1,P.current=!1,L(`pointer-leave`,e)}),V=n.a(e=>{N.current=!0,F(),T(!0,{reason:`focus`,event:e})}),H=n.a(e=>{N.current=!1,P.current=!1,L(`blur`,e)}),U=n.a(()=>{M.current=!0,F()}),W=n.a(e=>{M.current=!1,L(`pointer-leave`,e)}),G=(0,o.useMemo)(()=>({ref:D,props:{"aria-describedby":R?C:void 0,onPointerEnter:z,onPointerLeave:B,onFocus:V,onBlur:H}}),[H,z,V,B,R,C]);return(0,s.jsxs)(s.Fragment,{children:[u(G),(0,s.jsx)(a.default,{present:R,children:e=>(0,s.jsx)(i.default,{ref:k,contentRef:e.ref,anchor:E,side:g,align:_,offset:v,flip:y,matchWidth:!1,component:`tooltip`,...x,variant:[x.variant,{closed:!e.present}],id:C,props:{role:`tooltip`,...e.props,...b,onPointerEnter:U,onPointerLeave:W},children:l})})]})}var l=e.
|
|
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("../behavior.cjs"),r=require("../identity.cjs"),i=require("./overlay.cjs"),a=require("./presence.cjs");let o=require("react"),s=require("react/jsx-runtime");function c(e,c){let{content:l,children:u,open:d,defaultOpen:f=!1,onOpenChange:p,openDelay:m=300,closeDelay:h=150,side:g=`bottom`,align:_=`center`,offset:v=1,flip:y=!0,props:b,...x}=e,S=r.t(`tooltip`),C=x.id??S,[w,T]=n.i({value:d,defaultValue:f,onChange:p}),[E,D]=(0,o.useState)(null),O=(0,o.useRef)(null),k=(0,o.useCallback)(e=>{O.current=e,t.d(c,e)},[c]),A=(0,o.useRef)(void 0),j=(0,o.useRef)(!1),M=(0,o.useRef)(!1),N=(0,o.useRef)(!1),P=(0,o.useRef)(!1),F=(0,o.useCallback)(()=>{clearTimeout(A.current),A.current=void 0},[]),I=(0,o.useCallback)((e,t)=>{if(F(),e<=0){t();return}A.current=setTimeout(()=>{A.current=void 0,t()},e)},[F]),L=(0,o.useCallback)((e,t)=>{I(h,()=>{j.current||M.current||N.current||T(!1,{reason:e,event:t})})},[h,I,T]);n.r({enabled:w,outsidePointer:!1,inside:[O],onDismiss:(e,t)=>{F(),P.current=!0,T(!1,{reason:e,event:t})}}),(0,o.useEffect)(()=>F,[F]);let R=w&&l!=null,z=n.a(e=>{j.current=!0,!P.current&&I(m,()=>T(!0,{reason:`hover`,event:e}))}),B=n.a(e=>{j.current=!1,P.current=!1,L(`pointer-leave`,e)}),V=n.a(e=>{N.current=!0,F(),T(!0,{reason:`focus`,event:e})}),H=n.a(e=>{N.current=!1,P.current=!1,L(`blur`,e)}),U=n.a(()=>{M.current=!0,F()}),W=n.a(e=>{M.current=!1,L(`pointer-leave`,e)}),G=(0,o.useMemo)(()=>({ref:D,props:{"aria-describedby":R?C:void 0,onPointerEnter:z,onPointerLeave:B,onFocus:V,onBlur:H}}),[H,z,V,B,R,C]);return(0,s.jsxs)(s.Fragment,{children:[u(G),(0,s.jsx)(a.default,{present:R,children:e=>(0,s.jsx)(i.default,{ref:k,contentRef:e.ref,anchor:E,side:g,align:_,offset:v,flip:y,matchWidth:!1,component:`tooltip`,...x,variant:[x.variant,{closed:!e.present}],id:C,props:{role:`tooltip`,...e.props,...b,onPointerEnter:U,onPointerLeave:W},children:l})})]})}var l=e._(c,`Tooltip`);exports.default=l;
|
package/components/tooltip.mjs
CHANGED
|
@@ -1 +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("../behavior.cjs"),i=require("../scrolling.cjs"),a=require("./list.cjs");let o=require("react"),s=require("react/jsx-runtime");function c(e,t,n){return Math.min(Math.max(e,t),n)}var l;(function(e){let t=e.DEFAULT_OVERSCAN=4,n=e.PIN_REACH=50;function r(e){let t=Array(e.length+1);t[0]=0;for(let n=0;n<e.length;n++)t[n+1]=t[n]+e[n];return t}e.offsetsOf=r;function a(e,t){let n=0,r=0;for(let t of e)n+=t,r++;return r?n/r:t}e.typicalSize=a;function o(e){let{offsets:r,viewStart:a,viewEnd:o,overscan:s=t,pin:l=-1}=e,u=r.length-1,d=r[u]??0;if(u<=0)return{startIndex:0,endIndex:0,offsetY:0,totalHeight:0};let f=c(i.n(r,a,u)-s,0,u-1),p=c(i.n(r,o-.5,u)+1+s,f+1,u);return l>=0&&l<u&&(l<f&&f-l<=n?f=l:l>=p&&l-p<n&&(p=l+1)),{startIndex:f,endIndex:p,offsetY:r[f],totalHeight:d}}e.measuredWindow=o})(l||={});var u=l;function d(e,t){for(let n of Array.from(e.children)){let e=n.getBoundingClientRect();if(e.bottom>t)return{element:n,top:e.top}}return null}var f=150;function p(e,c){let{items:l,itemKey:p,children:m,estimateSize:h=57,overscan:g=6,initialCount:_=20,onRangeChange:v,scrollerRef:y,vars:b,css:x,props:S,...C}=e,w=(0,o.useRef)(null),[T,E]=(0,o.useState)(()=>new Map),[,D]=(0,o.useState)(0),[O,k]=(0,o.useState)({startIndex:0,endIndex:Math.min(_,l.length)}),[A,j]=(0,o.useState)(-1),M=r.a(v),N=(0,o.useCallback)(e=>{w.current=e,t.d(c,e)},[c]),[P,F]=(0,o.useState)(null),I=(0,o.useMemo)(()=>l.map((e,t)=>p(e,t)),[l,p]),L=(0,o.useMemo)(()=>u.typicalSize(T.values(),h),[T,h]),R=P?.count===l.length?P:null,z=R?R.estimate:L,B=(0,o.useMemo)(()=>u.offsetsOf(I.map(e=>T.get(e)??z)),[I,T,z]),V=B[l.length],H=r.o({offsets:B,pin:A,overscan:g,count:l.length,total:V,estimate:z}),U=(0,o.useRef)(null),W=Math.min(O.startIndex,Math.max(0,l.length-1)),G=Math.min(Math.max(O.endIndex,W),l.length),K=r.a(()=>{let e=w.current,{offsets:t,pin:n,overscan:r,count:a}=H.current;if(!e||a===0)return;let o=y?.current??i.t(e),s=e.ownerDocument.defaultView,c=o?o.getBoundingClientRect().top+o.clientTop:0,l=o?o.clientHeight:s?.innerHeight??0,d=e.getBoundingClientRect().top+e.clientTop,f=u.measuredWindow({offsets:t,viewStart:c-d,viewEnd:c-d+l,overscan:r,pin:n});k(e=>e.startIndex===f.startIndex&&e.endIndex===f.endIndex?e:{startIndex:f.startIndex,endIndex:f.endIndex})});n.n(()=>{let e=w.current;if(!e)return;let t=null,n=0,r=y?.current??i.t(e),a=r?r.getBoundingClientRect().top:0,o=parseFloat(getComputedStyle(e).rowGap)||0,s=U.current;if(U.current=null,s?.element.isConnected&&(n+=s.element.getBoundingClientRect().top-s.top),Array.from(e.children).forEach((e,r)=>{let i=W+r,s=I[i];if(s===void 0)return;e.setAttribute(`aria-setsize`,String(l.length)),e.setAttribute(`aria-posinset`,String(i+1));let c=e.getBoundingClientRect(),u=c.height+o,d=T.get(s)??z;c.height>0&&T.get(s)!==u&&(t??=new Map(T),t.set(s,u),c.bottom<=a&&(n+=u-d))}),n!==0){let t=r??e.ownerDocument.defaultView,i=r?r.scrollTop:t?.scrollY??0;t?.scrollTo({top:i+n,behavior:`instant`})}t?(U.current=d(e,a),E(t)):K()}),(0,o.useEffect)(()=>{let e=w.current;if(!e||typeof ResizeObserver>`u`)return;let t=new ResizeObserver(()=>D(e=>e+1));return Array.from(e.children).forEach(e=>t.observe(e)),()=>t.disconnect()},[O,I]),(0,o.useEffect)(()=>{let e=w.current,t=e?.ownerDocument.defaultView;if(!e||!t)return;let n=y?.current??i.t(e),r=n??t,a=0,o=!1,s=0,c=()=>{a||=requestAnimationFrame(()=>(a=0,K()))},l=()=>{let{count:r,total:i,estimate:a}=H.current;F(e=>e??{count:r,total:i,estimate:a}),clearTimeout(s),s=t.setTimeout(()=>{o||(U.current=d(e,n?n.getBoundingClientRect().top:0),F(null))},f)},u=()=>{l(),c()},p=()=>{o=!0,l()},m=()=>{o&&(o=!1,l())};r.addEventListener(`scroll`,u,{passive:!0}),r.addEventListener(`pointerdown`,p,{capture:!0,passive:!0}),t.addEventListener(`pointerup`,m,!0),t.addEventListener(`pointercancel`,m,!0),t.addEventListener(`resize`,c);let h=typeof ResizeObserver>`u`?null:new ResizeObserver(c);return n&&h?.observe(n),()=>{cancelAnimationFrame(a),clearTimeout(s),r.removeEventListener(`scroll`,u),r.removeEventListener(`pointerdown`,p,!0),t.removeEventListener(`pointerup`,m,!0),t.removeEventListener(`pointercancel`,m,!0),t.removeEventListener(`resize`,c),h?.disconnect()}},[y,K,H]),(0,o.useEffect)(()=>{M({startIndex:O.startIndex,endIndex:O.endIndex})},[O,M]);let q=e=>{let t=w.current,n=Array.from(t?.children??[]).findIndex(t=>t.contains(e.target));n>=0&&j(W+n)},J=e=>{w.current?.contains(e.relatedTarget)||j(-1)},Y=[];for(let e=W;e<G;e++)Y.push((0,s.jsx)(o.Fragment,{children:m(l[e],e)},I[e]));return(0,s.jsx)(a.default,{ref:N,...C,vars:W>0?{...b,"list-first-divider":`block`}:b,css:{...x,overflowAnchor:`none`},transition:`none`,style:{paddingBlockStart:`${B[W]}px`,paddingBlockEnd:`${Math.max(0,(R&&G<l.length?R.total:V)-B[G])}px`},props:{...S,onFocus:q,onBlur:J},children:Y})}var m=e.
|
|
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("../behavior.cjs"),i=require("../scrolling.cjs"),a=require("./list.cjs");let o=require("react"),s=require("react/jsx-runtime");function c(e,t,n){return Math.min(Math.max(e,t),n)}var l;(function(e){let t=e.DEFAULT_OVERSCAN=4,n=e.PIN_REACH=50;function r(e){let t=Array(e.length+1);t[0]=0;for(let n=0;n<e.length;n++)t[n+1]=t[n]+e[n];return t}e.offsetsOf=r;function a(e,t){let n=0,r=0;for(let t of e)n+=t,r++;return r?n/r:t}e.typicalSize=a;function o(e){let{offsets:r,viewStart:a,viewEnd:o,overscan:s=t,pin:l=-1}=e,u=r.length-1,d=r[u]??0;if(u<=0)return{startIndex:0,endIndex:0,offsetY:0,totalHeight:0};let f=c(i.n(r,a,u)-s,0,u-1),p=c(i.n(r,o-.5,u)+1+s,f+1,u);return l>=0&&l<u&&(l<f&&f-l<=n?f=l:l>=p&&l-p<n&&(p=l+1)),{startIndex:f,endIndex:p,offsetY:r[f],totalHeight:d}}e.measuredWindow=o})(l||={});var u=l;function d(e,t){for(let n of Array.from(e.children)){let e=n.getBoundingClientRect();if(e.bottom>t)return{element:n,top:e.top}}return null}var f=150;function p(e,c){let{items:l,itemKey:p,children:m,estimateSize:h=57,overscan:g=6,initialCount:_=20,onRangeChange:v,scrollerRef:y,vars:b,css:x,props:S,...C}=e,w=(0,o.useRef)(null),[T,E]=(0,o.useState)(()=>new Map),[,D]=(0,o.useState)(0),[O,k]=(0,o.useState)({startIndex:0,endIndex:Math.min(_,l.length)}),[A,j]=(0,o.useState)(-1),M=r.a(v),N=(0,o.useCallback)(e=>{w.current=e,t.d(c,e)},[c]),[P,F]=(0,o.useState)(null),I=(0,o.useMemo)(()=>l.map((e,t)=>p(e,t)),[l,p]),L=(0,o.useMemo)(()=>u.typicalSize(T.values(),h),[T,h]),R=P?.count===l.length?P:null,z=R?R.estimate:L,B=(0,o.useMemo)(()=>u.offsetsOf(I.map(e=>T.get(e)??z)),[I,T,z]),V=B[l.length],H=r.o({offsets:B,pin:A,overscan:g,count:l.length,total:V,estimate:z}),U=(0,o.useRef)(null),W=Math.min(O.startIndex,Math.max(0,l.length-1)),G=Math.min(Math.max(O.endIndex,W),l.length),K=r.a(()=>{let e=w.current,{offsets:t,pin:n,overscan:r,count:a}=H.current;if(!e||a===0)return;let o=y?.current??i.t(e),s=e.ownerDocument.defaultView,c=o?o.getBoundingClientRect().top+o.clientTop:0,l=o?o.clientHeight:s?.innerHeight??0,d=e.getBoundingClientRect().top+e.clientTop,f=u.measuredWindow({offsets:t,viewStart:c-d,viewEnd:c-d+l,overscan:r,pin:n});k(e=>e.startIndex===f.startIndex&&e.endIndex===f.endIndex?e:{startIndex:f.startIndex,endIndex:f.endIndex})});n.n(()=>{let e=w.current;if(!e)return;let t=null,n=0,r=y?.current??i.t(e),a=r?r.getBoundingClientRect().top:0,o=parseFloat(getComputedStyle(e).rowGap)||0,s=U.current;if(U.current=null,s?.element.isConnected&&(n+=s.element.getBoundingClientRect().top-s.top),Array.from(e.children).forEach((e,r)=>{let i=W+r,s=I[i];if(s===void 0)return;e.setAttribute(`aria-setsize`,String(l.length)),e.setAttribute(`aria-posinset`,String(i+1));let c=e.getBoundingClientRect(),u=c.height+o,d=T.get(s)??z;c.height>0&&T.get(s)!==u&&(t??=new Map(T),t.set(s,u),c.bottom<=a&&(n+=u-d))}),n!==0){let t=r??e.ownerDocument.defaultView,i=r?r.scrollTop:t?.scrollY??0;t?.scrollTo({top:i+n,behavior:`instant`})}t?(U.current=d(e,a),E(t)):K()}),(0,o.useEffect)(()=>{let e=w.current;if(!e||typeof ResizeObserver>`u`)return;let t=new ResizeObserver(()=>D(e=>e+1));return Array.from(e.children).forEach(e=>t.observe(e)),()=>t.disconnect()},[O,I]),(0,o.useEffect)(()=>{let e=w.current,t=e?.ownerDocument.defaultView;if(!e||!t)return;let n=y?.current??i.t(e),r=n??t,a=0,o=!1,s=0,c=()=>{a||=requestAnimationFrame(()=>(a=0,K()))},l=()=>{let{count:r,total:i,estimate:a}=H.current;F(e=>e??{count:r,total:i,estimate:a}),clearTimeout(s),s=t.setTimeout(()=>{o||(U.current=d(e,n?n.getBoundingClientRect().top:0),F(null))},f)},u=()=>{l(),c()},p=()=>{o=!0,l()},m=()=>{o&&(o=!1,l())};r.addEventListener(`scroll`,u,{passive:!0}),r.addEventListener(`pointerdown`,p,{capture:!0,passive:!0}),t.addEventListener(`pointerup`,m,!0),t.addEventListener(`pointercancel`,m,!0),t.addEventListener(`resize`,c);let h=typeof ResizeObserver>`u`?null:new ResizeObserver(c);return n&&h?.observe(n),()=>{cancelAnimationFrame(a),clearTimeout(s),r.removeEventListener(`scroll`,u),r.removeEventListener(`pointerdown`,p,!0),t.removeEventListener(`pointerup`,m,!0),t.removeEventListener(`pointercancel`,m,!0),t.removeEventListener(`resize`,c),h?.disconnect()}},[y,K,H]),(0,o.useEffect)(()=>{M({startIndex:O.startIndex,endIndex:O.endIndex})},[O,M]);let q=e=>{let t=w.current,n=Array.from(t?.children??[]).findIndex(t=>t.contains(e.target));n>=0&&j(W+n)},J=e=>{w.current?.contains(e.relatedTarget)||j(-1)},Y=[];for(let e=W;e<G;e++)Y.push((0,s.jsx)(o.Fragment,{children:m(l[e],e)},I[e]));return(0,s.jsx)(a.default,{ref:N,...C,vars:W>0?{...b,"list-first-divider":`block`}:b,css:{...x,overflowAnchor:`none`},transition:`none`,style:{paddingBlockStart:`${B[W]}px`,paddingBlockEnd:`${Math.max(0,(R&&G<l.length?R.total:V)-B[G])}px`},props:{...S,onFocus:q,onBlur:J},children:Y})}var m=e._(p,`VirtualList`);exports.default=m;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs");let t=require("@box-kite/react");var n=.25;function r(e,r){return(0,t.useBoxElement)({position:`absolute`,width:n,height:n,p:0,b:0,overflow:`hidden`,whiteSpace:`nowrap`,clipPath:`inset(50%)`,...e},r)}var i=e.
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs");let t=require("@box-kite/react");var n=.25;function r(e,r){return(0,t.useBoxElement)({position:`absolute`,width:n,height:n,p:0,b:0,overflow:`hidden`,whiteSpace:`nowrap`,clipPath:`inset(50%)`,...e},r)}var i=e._(r,`VisuallyHidden`);exports.default=i;
|
package/docs/a11y.md
CHANGED
|
@@ -158,8 +158,7 @@ const id = useIdentifier('select');
|
|
|
158
158
|
|
|
159
159
|
React's `useId` with the punctuation removed: `:r1:` (React 18) and `«r1»` (React 19) are both
|
|
160
160
|
rejected by `querySelector('#…')`, and the part that varies is the word characters. Derive related
|
|
161
|
-
ids from one call rather than calling the hook once per element.
|
|
162
|
-
`useId`, the fallback is a module counter — pass ids in explicitly there if the tree is hydrated.
|
|
161
|
+
ids from one call rather than calling the hook once per element.
|
|
163
162
|
|
|
164
163
|
## `VisuallyHidden`
|
|
165
164
|
|
package/docs/components.md
CHANGED
|
@@ -12,6 +12,7 @@ No hook, no effect, no DOM: a React Server Component can render these directly.
|
|
|
12
12
|
| `@box-kite/react/components/button` | `Button` (default) | |
|
|
13
13
|
| `@box-kite/react/components/chart` | `ChartContainer`, `Gauge`, `MiniDonut`, `ProgressRing`, `Sparkline` | |
|
|
14
14
|
| `@box-kite/react/components/flex` | `Flex` (default) | |
|
|
15
|
+
| `@box-kite/react/components/flow` | `FlowContainer`, `flowColorMode`, `flowEdgeStyles`, `flowNodeSelectedStyles`, `flowNodeStyles` | |
|
|
15
16
|
| `@box-kite/react/components/grid` | `Grid` (default) | |
|
|
16
17
|
| `@box-kite/react/components/icon` | `Icon` (default) | |
|
|
17
18
|
| `@box-kite/react/components/list` | `List` (default), `i`, `n`, `r`, `t` | |
|