@box-kite/react 2.2.6 → 2.2.8

package/docs/props.md

@@ -13,7 +13,7 @@ A prop that is not here does not exist: reach for `css={{ … }}` for a one-off,
 The accent-color CSS property tints the parts of a native control the page does not draw: a checkbox's tick, a radio's dot, a range track, a progress bar. The one way to brand them without `appearance="none"` and a rebuild, and it inherits — set it once on a form.
 
 - Writes: `accent-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `accentColor="sky-500"` → `accent-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `ai`
@@ -285,15 +285,15 @@ Which box the background is painted inside — and `text`, which clips it to the
 The background-color CSS property sets the background color of an element.
 
 - Writes: `background-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `bgColor="sky-500"` → `background-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `bgGradient`
 
-A gradient written as a value: the key names the kind and carries its geometry (`linear` a direction or an angle, `radial` a shape, `conic` an angle to start from), `colors` are the stops in order — a palette token, one with an opacity modifier, or a `[colour, position]` pair. `interpolate="oklch"` is what keeps a two-stop gradient out of the grey middle sRGB runs it through. Writes `background-image`, so it and `bgImage` are the same property: use one.
+A gradient written as a value: the key names the kind and carries its geometry (`linear` a direction or an angle, `radial` a shape, `conic` an angle to start from), `colors` are the stops in order — a palette token, one with an opacity modifier, or a `[colour, position]` pair. `interpolate="oklch"` is what keeps a two-stop gradient out of the grey middle sRGB runs it through. Writes `background-image`, so it and `bgImage` are the same property: use one. `'none'` clears it — the only way a variant or a design can take a gradient back off, since `bgGradient` is declared after `bgImage` and wins the property.
 
 - Writes: `background-image`
-- Values: whatever the types allow
+- Values: `none`, anything else the types allow
 - Example: `bgGradient={{ linear: 'r', colors: ['blue-500', 'pink-500'] }}` → `background-image: linear-gradient(to right,var(--blue-500,oklch(62.3% .214 259.8)),var(--pink-500,oklch(65.6% .241 354.3)))`
 
 ### `bgImage`
@@ -333,7 +333,7 @@ Whether a table's cell borders are shared or every cell keeps its own. `collapse
 The border-color shorthand CSS property sets the color of an element's border.
 
 - Writes: `border-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `borderColor="sky-500"` → `border-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `borderRadius`
@@ -541,7 +541,7 @@ The border-width shorthand CSS property sets the width of an element's top and b
 The caret-color CSS property sets the colour of the insertion caret in a text field or any editable element.
 
 - Writes: `caret-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `caretColor="sky-500"` → `caret-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `clipPath`
@@ -557,7 +557,7 @@ The clip-path CSS property creates a clipping region that sets what part of an e
 The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.
 
 - Writes: `color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `color="sky-500"` → `color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `colorScheme`
@@ -693,7 +693,7 @@ A shadow cast by the element's *shape* rather than its box — the one that foll
 What colour `dropShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxDropShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `dropShadowColor="sky-500"` → `--boxDropShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `fieldSizing`
@@ -709,7 +709,7 @@ The field-sizing CSS property lets a form control size itself to its content: `f
 The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute. Takes a colour token, a paint server the document defines (`fill="url(#sky)"` — a `<LinearGradient>` or a pattern) or a variable somebody else declared (`fill="var(--chart-1)"`).
 
 - Writes: `fill`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `fill="sky-500"` → `fill: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `fillOpacity`
@@ -925,7 +925,7 @@ The same ring, drawn inside the border box: an inner hairline that needs no seco
 What colour `insetRing` draws in. `currentColor` otherwise.
 
 - Writes: `--boxInsetRingColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `insetRingColor="sky-500"` → `--boxInsetRingColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `insetShadow`
@@ -941,7 +941,7 @@ A shadow drawn inside the border box: `xxs`, `xs` or `sm`. Its own layer, so it
 What colour `insetShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxInsetShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `insetShadowColor="sky-500"` → `--boxInsetShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `insetStart`
@@ -1018,10 +1018,10 @@ The left CSS property participates in specifying the horizontal position of a po
 
 ### `letterSpacing`
 
-The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.
+The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. A number is pixels; Tailwind's tracking names (`tighter` … `widest`) are in `em`, so they scale with the text — what a display heading wants.
 
 - Writes: `letter-spacing`
-- Values: a number
+- Values: `tighter` · `tight` · `normal` · `wide` · `wider` · `widest`, a number
 - Example: `letterSpacing={4}` → `letter-spacing: 4px`
 
 ### `lineHeight`
@@ -1189,7 +1189,7 @@ The CSS outline-width property sets the thickness of an element's outline. An ou
 The outline-color CSS property sets the color of an element's outline.
 
 - Writes: `outline-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `outlineColor="sky-500"` → `outline-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `outlineOffset`
@@ -1421,7 +1421,7 @@ A hard-edged shadow outside the border box, in px — `ring={2}`. Unlike `outlin
 What colour `ring` draws in. `currentColor` otherwise.
 
 - Writes: `--boxRingColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `ringColor="sky-500"` → `--boxRingColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `rotate`
@@ -1477,7 +1477,7 @@ The scale CSS property lets you specify scale transforms individually and indepe
 The scrollbar-color CSS property sets the color of the scrollbar thumb and track. The value pair is [thumbColor, trackColor].
 
 - Writes: `scrollbar-color`
-- Values: `currentColor,transparent,green,red,blue,gray,black,white,vi,slate-50,slate-100,slate-200,slate-300,slate-400,slate-500,slate-600,slate-700,slate-800,slate-900,slate-950,gray-50,gray-100,gray-200,gray-300,gray-400,gray-500,gray-600,gray-700,gray-800,gray-900,gray-950,zinc-50,zinc-100,zinc-200,zinc-300,zinc-400,zinc-500,zinc-600,zinc-700,zinc-800,zinc-900,zinc-950,neutral-50,neutral-100,neutral-200,neutral-300,neutral-400,neutral-500,neutral-600,neutral-700,neutral-800,neutral-900,neutral-950,stone-50,stone-100,stone-200,stone-300,stone-400,stone-500,stone-600,stone-700,stone-800,stone-900,stone-950,mauve-50,mauve-100,mauve-200,mauve-300,mauve-400,mauve-500,mauve-600,mauve-700,mauve-800,mauve-900,mauve-950,mist-50,mist-100,mist-200,mist-300,mist-400,mist-500,mist-600,mist-700,mist-800,mist-900,mist-950,olive-50,olive-100,olive-200,olive-300,olive-400,olive-500,olive-600,olive-700,olive-800,olive-900,olive-950,taupe-50,taupe-100,taupe-200,taupe-300,taupe-400,taupe-500,taupe-600,taupe-700,taupe-800,taupe-900,taupe-950,red-50,red-100,red-200,red-300,red-400,red-500,red-600,red-700,red-800,red-900,red-950,orange-50,orange-100,orange-200,orange-300,orange-400,orange-500,orange-600,orange-700,orange-800,orange-900,orange-950,amber-50,amber-100,amber-200,amber-300,amber-400,amber-500,amber-600,amber-700,amber-800,amber-900,amber-950,yellow-50,yellow-100,yellow-200,yellow-300,yellow-400,yellow-500,yellow-600,yellow-700,yellow-800,yellow-900,yellow-950,lime-50,lime-100,lime-200,lime-300,lime-400,lime-500,lime-600,lime-700,lime-800,lime-900,lime-950,green-50,green-100,green-200,green-300,green-400,green-500,green-600,green-700,green-800,green-900,green-950,emerald-50,emerald-100,emerald-200,emerald-300,emerald-400,emerald-500,emerald-600,emerald-700,emerald-800,emerald-900,emerald-950,teal-50,teal-100,teal-200,teal-300,teal-400,teal-500,teal-600,teal-700,teal-800,teal-900,teal-950,cyan-50,cyan-100,cyan-200,cyan-300,cyan-400,cyan-500,cyan-600,cyan-700,cyan-800,cyan-900,cyan-950,sky-50,sky-100,sky-200,sky-300,sky-400,sky-500,sky-600,sky-700,sky-800,sky-900,sky-950,blue-50,blue-100,blue-200,blue-300,blue-400,blue-500,blue-600,blue-700,blue-800,blue-900,blue-950,indigo-50,indigo-100,indigo-200,indigo-300,indigo-400,indigo-500,indigo-600,indigo-700,indigo-800,indigo-900,indigo-950,violet-50,violet-100,violet-200,violet-300,violet-400,violet-500,violet-600,violet-700,violet-800,violet-900,violet-950,purple-50,purple-100,purple-200,purple-300,purple-400,purple-500,purple-600,purple-700,purple-800,purple-900,purple-950,fuchsia-50,fuchsia-100,fuchsia-200,fuchsia-300,fuchsia-400,fuchsia-500,fuchsia-600,fuchsia-700,fuchsia-800,fuchsia-900,fuchsia-950,pink-50,pink-100,pink-200,pink-300,pink-400,pink-500,pink-600,pink-700,pink-800,pink-900,pink-950,rose-50,rose-100,rose-200,rose-300,rose-400,rose-500,rose-600,rose-700,rose-800,rose-900,rose-950,none`
+- Values: `currentColor,transparent,green,red,blue,gray,black,white,vi,slate-50,slate-100,slate-200,slate-300,slate-400,slate-500,slate-600,slate-700,slate-800,slate-900,slate-950,gray-50,gray-100,gray-200,gray-300,gray-400,gray-500,gray-600,gray-700,gray-800,gray-900,gray-950,zinc-50,zinc-100,zinc-200,zinc-300,zinc-400,zinc-500,zinc-600,zinc-700,zinc-800,zinc-900,zinc-950,neutral-50,neutral-100,neutral-200,neutral-300,neutral-400,neutral-500,neutral-600,neutral-700,neutral-800,neutral-900,neutral-950,stone-50,stone-100,stone-200,stone-300,stone-400,stone-500,stone-600,stone-700,stone-800,stone-900,stone-950,mauve-50,mauve-100,mauve-200,mauve-300,mauve-400,mauve-500,mauve-600,mauve-700,mauve-800,mauve-900,mauve-950,mist-50,mist-100,mist-200,mist-300,mist-400,mist-500,mist-600,mist-700,mist-800,mist-900,mist-950,olive-50,olive-100,olive-200,olive-300,olive-400,olive-500,olive-600,olive-700,olive-800,olive-900,olive-950,taupe-50,taupe-100,taupe-200,taupe-300,taupe-400,taupe-500,taupe-600,taupe-700,taupe-800,taupe-900,taupe-950,red-50,red-100,red-200,red-300,red-400,red-500,red-600,red-700,red-800,red-900,red-950,orange-50,orange-100,orange-200,orange-300,orange-400,orange-500,orange-600,orange-700,orange-800,orange-900,orange-950,amber-50,amber-100,amber-200,amber-300,amber-400,amber-500,amber-600,amber-700,amber-800,amber-900,amber-950,yellow-50,yellow-100,yellow-200,yellow-300,yellow-400,yellow-500,yellow-600,yellow-700,yellow-800,yellow-900,yellow-950,lime-50,lime-100,lime-200,lime-300,lime-400,lime-500,lime-600,lime-700,lime-800,lime-900,lime-950,green-50,green-100,green-200,green-300,green-400,green-500,green-600,green-700,green-800,green-900,green-950,emerald-50,emerald-100,emerald-200,emerald-300,emerald-400,emerald-500,emerald-600,emerald-700,emerald-800,emerald-900,emerald-950,teal-50,teal-100,teal-200,teal-300,teal-400,teal-500,teal-600,teal-700,teal-800,teal-900,teal-950,cyan-50,cyan-100,cyan-200,cyan-300,cyan-400,cyan-500,cyan-600,cyan-700,cyan-800,cyan-900,cyan-950,sky-50,sky-100,sky-200,sky-300,sky-400,sky-500,sky-600,sky-700,sky-800,sky-900,sky-950,blue-50,blue-100,blue-200,blue-300,blue-400,blue-500,blue-600,blue-700,blue-800,blue-900,blue-950,indigo-50,indigo-100,indigo-200,indigo-300,indigo-400,indigo-500,indigo-600,indigo-700,indigo-800,indigo-900,indigo-950,violet-50,violet-100,violet-200,violet-300,violet-400,violet-500,violet-600,violet-700,violet-800,violet-900,violet-950,purple-50,purple-100,purple-200,purple-300,purple-400,purple-500,purple-600,purple-700,purple-800,purple-900,purple-950,fuchsia-50,fuchsia-100,fuchsia-200,fuchsia-300,fuchsia-400,fuchsia-500,fuchsia-600,fuchsia-700,fuchsia-800,fuchsia-900,fuchsia-950,pink-50,pink-100,pink-200,pink-300,pink-400,pink-500,pink-600,pink-700,pink-800,pink-900,pink-950,rose-50,rose-100,rose-200,rose-300,rose-400,rose-500,rose-600,rose-700,rose-800,rose-900,rose-950,accent-50,accent-100,accent-200,accent-300,accent-400,accent-500,accent-600,accent-700,accent-800,accent-900,accent-950,base-50,base-100,base-200,base-300,base-400,base-500,base-600,base-700,base-800,base-900,base-950,none`
 - Example: `scrollbarColor={['gray-400', 'gray-100']}` → `scrollbar-color: var(--gray-400,oklch(70.7% .022 261.3)) var(--gray-100,oklch(96.7% .003 264.5))`
 
 ### `scrollbarGutter`
@@ -1541,7 +1541,7 @@ The elevation of the box: `xxs` through `xxl` on the elevation scale, or one of
 What colour `shadow` draws in — the scale's own translucent black otherwise. Shows nothing on its own.
 
 - Writes: `--boxShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `shadowColor="sky-500"` → `--boxShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `shapeRendering`
@@ -1557,7 +1557,7 @@ The shape-rendering CSS property tells the renderer what to trade away when draw
 The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. Takes a colour token, `stroke="url(#sky)"` for a paint server the document defines, or `stroke="var(--chart-1)"` for a variable somebody else declared.
 
 - Writes: `stroke`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `stroke="sky-500"` → `stroke: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `strokeDasharray`
@@ -1669,7 +1669,7 @@ A shadow behind the text rather than the box: `xxs` through `lg`, recoloured by
 What colour `textShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxTextShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `textShadowColor="sky-500"` → `--boxTextShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `textTransform`

package/effects.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs"),t=require("./platform.cjs");let n=require("react");n=e.t(n,1);var r=t.r(),i=r?n.useLayoutEffect:n.useEffect,a=r?n.default.useInsertionEffect??n.useLayoutEffect:n.useEffect;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
+const e=require("./rolldown-runtime.cjs"),t=require("./platform.cjs");let n=require("react");n=e.t(n,1);var r=t.i(),i=r?n.useLayoutEffect:n.useEffect,a=r?n.default.useInsertionEffect??n.useLayoutEffect:n.useEffect;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});

package/effects.mjs

@@ -1,4 +1,4 @@
-import { r as e } from "./platform.mjs";
+import { i as e } from "./platform.mjs";
 import t, { useEffect as n, useLayoutEffect as r } from "react";
 //#region src/react/effects.ts
 var i = e(), a = i ? r : n, o = i ? t.useInsertionEffect ?? r : n;

package/interactionListening.cjs

@@ -0,0 +1 @@
+const e=require("./platform.cjs");function t(e){let t=new WeakSet,n=JSON.stringify(e,(e,n)=>{if(typeof n==`bigint`)return n.toString();if(typeof n!=`object`||!n)return n;if(n instanceof Set)return Array.from(n);if(n instanceof Map)return Object.fromEntries(n);if(t.has(n))return;let r=Object.getPrototypeOf(n);if(!(!Array.isArray(n)&&(r!==Object.prototype&&r!==null||`$$typeof`in n)))return t.add(n),n});return n===void 0?void 0:JSON.parse(n)}var n=[`click`,`dblclick`,`keydown`,`pointerdown`,`pointerup`,`change`,`submit`,`copy`,`paste`,`focusout`],r=[`imperative`,`programmatic`,`timeout`],i=`a[href],button,input,select,textarea,summary,label,[tabindex],[role=option],[role=button]`;function a(e){let t=globalThis.scheduler;t?.postTask?t.postTask(e,{priority:`background`}):setTimeout(e,0)}function o(e){typeof reportError==`function`?reportError(e):setTimeout(()=>{throw e})}var s=e=>typeof Element<`u`&&e instanceof Element?e:void 0,c=e=>e?.closest(i)??void 0;function l({kind:e,input:n,event:i,handler:a,timeStamp:o,time:l,url:u},d){let f=d?[]:n.content??[],p=t(n.details&&Object.fromEntries(Object.entries(n.details).filter(([e])=>!f.includes(e)))),m=n.source??(n.reason&&r.includes(n.reason)?`app`:`user`);return{kind:e,component:n.component,type:n.type,reason:n.reason,value:f.includes(`value`)?void 0:t(n.value),details:p&&Object.keys(p).length>0?p:void 0,source:m,event:i,target:s(a)??c(s(i?.target))??n.target??s(i?.target),timeStamp:o,time:l,url:d?u:u.split(/[?#]/)[0]}}function u(t){let r=!1,i=()=>{r=!1;let e=t.queue.splice(0);if(t.listeners.size!==0)for(let n of e){if(n.kind===`dom`&&e.some(e=>e.kind!==`dom`&&e.event===n.event))continue;let r,i;t.listeners.forEach((e,t)=>{let a=e.content?r??=l(n,!0):i??=l(n,!1);try{t(a)}catch(e){o(e)}})}},u=()=>{r||(r=!0,a(i))};if(t.flush=i,t.schedule=u,t.queue.length>0&&u(),typeof addEventListener!=`function`)return;let d=n=>{let r=s(n.target);if(!r||t.listeners.size===0)return;if(!e.m()){e.a()&&e._()&&!t.warned&&(t.warned=!0,console.warn(`[box-kite] Box.onInteraction hears no clicks without data-bk: write Box.configure({ componentAttribute: true }).`));return}let i=c(r),a=(i??r).closest(`[data-bk]`);if(!a)return;let o=r instanceof HTMLInputElement&&(r.type===`checkbox`||r.type===`radio`);t.queue.push({kind:`dom`,input:{component:a.getAttribute(`data-bk`)??``,type:n.type,value:n.type===`change`&&o?r.checked:void 0,details:{interactive:i!==void 0},target:i??a,source:n.isTrusted?`user`:`app`},event:n,timeStamp:performance.now(),time:Date.now(),url:location.href}),u()},f=!1,p=e=>{t.dispatching=e,f||(f=!0,setTimeout(()=>{f=!1,t.dispatching=void 0},0)),(e.type===`click`||e.type===`change`)&&d(e)};n.forEach(e=>{document.addEventListener(e,p,!0),addEventListener(e,e=>{t.dispatching===e&&(t.dispatching=void 0)})}),addEventListener(`pagehide`,i)}exports.default=u;

package/interactionListening.mjs

@@ -0,0 +1,117 @@
+import { _ as e, a as t, m as n } from "./platform.mjs";
+//#region src/utils/interactions/interactionJson.ts
+function r(e) {
+	let t = /* @__PURE__ */ new WeakSet(), n = JSON.stringify(e, (e, n) => {
+		if (typeof n == "bigint") return n.toString();
+		if (typeof n != "object" || !n) return n;
+		if (n instanceof Set) return Array.from(n);
+		if (n instanceof Map) return Object.fromEntries(n);
+		if (t.has(n)) return;
+		let r = Object.getPrototypeOf(n);
+		if (!(!Array.isArray(n) && (r !== Object.prototype && r !== null || "$$typeof" in n))) return t.add(n), n;
+	});
+	return n === void 0 ? void 0 : JSON.parse(n);
+}
+//#endregion
+//#region src/utils/interactions/interactionListening.ts
+var i = [
+	"click",
+	"dblclick",
+	"keydown",
+	"pointerdown",
+	"pointerup",
+	"change",
+	"submit",
+	"copy",
+	"paste",
+	"focusout"
+], a = [
+	"imperative",
+	"programmatic",
+	"timeout"
+], o = "a[href],button,input,select,textarea,summary,label,[tabindex],[role=option],[role=button]";
+function s(e) {
+	let t = globalThis.scheduler;
+	t?.postTask ? t.postTask(e, { priority: "background" }) : setTimeout(e, 0);
+}
+function c(e) {
+	typeof reportError == "function" ? reportError(e) : setTimeout(() => {
+		throw e;
+	});
+}
+var l = (e) => typeof Element < "u" && e instanceof Element ? e : void 0, u = (e) => e?.closest(o) ?? void 0;
+function d({ kind: e, input: t, event: n, handler: i, timeStamp: o, time: s, url: c }, d) {
+	let f = d ? [] : t.content ?? [], p = r(t.details && Object.fromEntries(Object.entries(t.details).filter(([e]) => !f.includes(e)))), m = t.source ?? (t.reason && a.includes(t.reason) ? "app" : "user");
+	return {
+		kind: e,
+		component: t.component,
+		type: t.type,
+		reason: t.reason,
+		value: f.includes("value") ? void 0 : r(t.value),
+		details: p && Object.keys(p).length > 0 ? p : void 0,
+		source: m,
+		event: n,
+		target: l(i) ?? u(l(n?.target)) ?? t.target ?? l(n?.target),
+		timeStamp: o,
+		time: s,
+		url: d ? c : c.split(/[?#]/)[0]
+	};
+}
+function f(r) {
+	let a = !1, o = () => {
+		a = !1;
+		let e = r.queue.splice(0);
+		if (r.listeners.size !== 0) for (let t of e) {
+			if (t.kind === "dom" && e.some((e) => e.kind !== "dom" && e.event === t.event)) continue;
+			let n, i;
+			r.listeners.forEach((e, r) => {
+				let a = e.content ? n ??= d(t, !0) : i ??= d(t, !1);
+				try {
+					r(a);
+				} catch (e) {
+					c(e);
+				}
+			});
+		}
+	}, f = () => {
+		a || (a = !0, s(o));
+	};
+	if (r.flush = o, r.schedule = f, r.queue.length > 0 && f(), typeof addEventListener != "function") return;
+	let p = (i) => {
+		let a = l(i.target);
+		if (!a || r.listeners.size === 0) return;
+		if (!n()) {
+			t() && e() && !r.warned && (r.warned = !0, console.warn("[box-kite] Box.onInteraction hears no clicks without data-bk: write Box.configure({ componentAttribute: true })."));
+			return;
+		}
+		let o = u(a), s = (o ?? a).closest("[data-bk]");
+		if (!s) return;
+		let c = a instanceof HTMLInputElement && (a.type === "checkbox" || a.type === "radio");
+		r.queue.push({
+			kind: "dom",
+			input: {
+				component: s.getAttribute("data-bk") ?? "",
+				type: i.type,
+				value: i.type === "change" && c ? a.checked : void 0,
+				details: { interactive: o !== void 0 },
+				target: o ?? s,
+				source: i.isTrusted ? "user" : "app"
+			},
+			event: i,
+			timeStamp: performance.now(),
+			time: Date.now(),
+			url: location.href
+		}), f();
+	}, m = !1, h = (e) => {
+		r.dispatching = e, m || (m = !0, setTimeout(() => {
+			m = !1, r.dispatching = void 0;
+		}, 0)), (e.type === "click" || e.type === "change") && p(e);
+	};
+	i.forEach((e) => {
+		document.addEventListener(e, h, !0), addEventListener(e, (e) => {
+			r.dispatching === e && (r.dispatching = void 0);
+		});
+	}), addEventListener("pagehide", o);
+}
+//#endregion
+export { f as default };

package/interactions.cjs

@@ -0,0 +1 @@
+const e=require("./platform.cjs");var t=globalThis[Symbol.for(`box-kite.interactions@2`)]??={listeners:new Map,queue:[]};function n(e,n){if(t.listeners.size===0)return;let r=n.event;t.queue.push({kind:e,input:n,event:r?.nativeEvent??r??t.dispatching,handler:r?.nativeEvent&&r.currentTarget,timeStamp:performance.now(),time:Date.now(),url:location.href}),t.schedule?.()}function r(n,r={}){return e.r()?(t.listeners.set(n,r),t.loading||(t.loading=!0,Promise.resolve().then(()=>require("./interactionListening.cjs")).then(({default:e})=>e(t))),()=>void t.listeners.delete(n)):()=>{}}var i=()=>t.flush?.(),a=e=>n(`change`,e),o=e=>n(`custom`,e);Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});

package/interactions.mjs

@@ -0,0 +1,25 @@
+import { r as e } from "./platform.mjs";
+//#region src/utils/interactions/interactionChannel.ts
+var t = globalThis[Symbol.for("box-kite.interactions@2")] ??= {
+	listeners: /* @__PURE__ */ new Map(),
+	queue: []
+};
+function n(e, n) {
+	if (t.listeners.size === 0) return;
+	let r = n.event;
+	t.queue.push({
+		kind: e,
+		input: n,
+		event: r?.nativeEvent ?? r ?? t.dispatching,
+		handler: r?.nativeEvent && r.currentTarget,
+		timeStamp: performance.now(),
+		time: Date.now(),
+		url: location.href
+	}), t.schedule?.();
+}
+function r(n, r = {}) {
+	return e() ? (t.listeners.set(n, r), t.loading || (t.loading = !0, import("./interactionListening.mjs").then(({ default: e }) => e(t))), () => void t.listeners.delete(n)) : () => {};
+}
+var i = () => t.flush?.(), a = (e) => n("change", e), o = (e) => n("custom", e);
+//#endregion
+export { r as i, i as n, o as r, a as t };

package/layer.cjs

@@ -1 +1 @@
-const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./behavior.cjs"),r=require("./identity.cjs");let i=require("react");var a=()=>()=>{},o=()=>!0;function s(){return(0,i.useSyncExternalStore)(a,e.o,o)}function c(a){let{haspopup:o,id:c,idPrefix:l,open:u,defaultOpen:d=!1,onOpenChange:f,onOpened:p,onClosing:m,inside:h}=a,g=r.t(l),_=c??g,[v,y]=n.i({value:u,defaultValue:d,onChange:f}),[b,x]=(0,i.useState)(null),[S,C]=(0,i.useState)(null),w=s(),[T,E]=(0,i.useState)(!1),[D,O]=(0,i.useState)(),k=(0,i.useRef)(`imperative`),A=(0,i.useRef)(!1),j=n.a(p),M=n.a(m),N=n.a(e=>{let t=e.newState===`open`,n=e.currentTarget;if(t&&u===!1){e.preventDefault(),setTimeout(()=>y(!0,{reason:`trigger`,event:e}));return}t||(A.current=n.contains(document.activeElement),M(A.current,b)),E(t);let r=t?`trigger`:k.current;k.current=`imperative`,y(t,{reason:r,event:e})}),P=n.a(e=>{let t=e.currentTarget;e.newState===`open`&&j(t)});t.n(()=>{if(!w||!S)return;let e=new AbortController;return S.addEventListener(`beforetoggle`,N,{signal:e.signal}),S.addEventListener(`toggle`,P,{signal:e.signal}),()=>e.abort()},[w,S,N,P]),t.n(()=>{!w||!e.o()||!S||v===T||(v?S.showPopover():S.hidePopover())},[v,T,S,w]),t.n(()=>{if(!w||!v)return;let t=new AbortController,n=(e,n)=>document.addEventListener(e,n,{signal:t.signal,capture:!0});return n(`keydown`,e=>{e.key===`Escape`&&(k.current=`escape`)}),n(`pointerdown`,t=>{let n=!!b&&e.u(t,[b]);k.current=n?`trigger`:`outside-pointer`}),()=>t.abort()},[w,v,b]),t.n(()=>{b&&(b.id||b.setAttribute(`id`,`${_}-trigger`),O(b.id))},[b,_]),t.n(()=>{if(!(!w||!b))return b.setAttribute(`popovertarget`,_),()=>b.removeAttribute(`popovertarget`)},[w,b,_]),t.n(()=>{w||!v||!S||j(S)},[w,v,S,j]),n.r({enabled:!w&&v,inside:[S,b,...h??[]],onDismiss:(e,t)=>y(!1,{reason:e,event:t})}),n.n({enabled:!w&&v,returnTo:b});let F=n.a(e=>{y(e=>!e,{reason:`trigger`,event:e})});return{platform:w,isOpen:v,setOpen:y,id:_,trigger:(0,i.useMemo)(()=>({ref:x,props:{"aria-expanded":v,"aria-haspopup":o,"aria-controls":v?_:void 0,...w?{}:{onClick:F}}}),[F,o,v,_,w]),triggerElement:b,triggerId:D,setPanel:C,panelElement:S}}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});
+const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./behavior.cjs"),r=require("./identity.cjs"),i=require("./reporting.cjs");let a=require("react");var o=()=>()=>{},s=()=>!0;function c(){return(0,a.useSyncExternalStore)(o,e.c,s)}function l(o){let{haspopup:s,id:l,idPrefix:u,open:d,defaultOpen:f=!1,onOpenChange:p,onOpened:m,onClosing:h,inside:g,interaction:_}=o,v=r.t(u),y=l??v,[b,x]=i.a({value:d,defaultValue:f,onChange:p,interaction:_}),[S,C]=(0,a.useState)(null),[w,T]=(0,a.useState)(null),E=c(),[D,O]=(0,a.useState)(!1),[k,A]=(0,a.useState)(),j=(0,a.useRef)(`imperative`),M=(0,a.useRef)(!1),N=n.a(m),P=n.a(h),F=n.a(e=>{let t=e.newState===`open`,n=e.currentTarget;if(t&&d===!1){e.preventDefault(),setTimeout(()=>x(!0,{reason:`trigger`,event:e}));return}t||(M.current=n.contains(document.activeElement),P(M.current,S)),O(t);let r=t?`trigger`:j.current;j.current=`imperative`,x(t,{reason:r,event:e})}),I=n.a(e=>{let t=e.currentTarget;e.newState===`open`&&N(t)});t.n(()=>{if(!E||!w)return;let e=new AbortController;return w.addEventListener(`beforetoggle`,F,{signal:e.signal}),w.addEventListener(`toggle`,I,{signal:e.signal}),()=>e.abort()},[E,w,F,I]),t.n(()=>{!E||!e.c()||!w||b===D||(b?w.showPopover():w.hidePopover())},[b,D,w,E]),t.n(()=>{if(!E||!b)return;let t=new AbortController,n=(e,n)=>document.addEventListener(e,n,{signal:t.signal,capture:!0});return n(`keydown`,e=>{e.key===`Escape`&&(j.current=`escape`)}),n(`pointerdown`,t=>{let n=!!S&&e.f(t,[S]);j.current=n?`trigger`:`outside-pointer`}),()=>t.abort()},[E,b,S]),t.n(()=>{S&&(S.id||S.setAttribute(`id`,`${y}-trigger`),A(S.id))},[S,y]),t.n(()=>{if(!(!E||!S))return S.setAttribute(`popovertarget`,y),()=>S.removeAttribute(`popovertarget`)},[E,S,y]),t.n(()=>{E||!b||!w||N(w)},[E,b,w,N]),n.r({enabled:!E&&b,inside:[w,S,...g??[]],onDismiss:(e,t)=>x(!1,{reason:e,event:t})}),n.n({enabled:!E&&b,returnTo:S});let L=n.a(e=>{x(e=>!e,{reason:`trigger`,event:e})});return{platform:E,isOpen:b,setOpen:x,id:y,trigger:(0,a.useMemo)(()=>({ref:C,props:{"aria-expanded":b,"aria-haspopup":s,"aria-controls":b?y:void 0,...E?{}:{onClick:L}}}),[L,s,b,y,E]),triggerElement:S,triggerId:k,setPanel:T,panelElement:w}}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});

package/layer.mjs

@@ -1,7 +1,8 @@
-import { o as e, u as t } from "./platform.mjs";
+import { c as e, f as t } from "./platform.mjs";
 import { n } from "./effects.mjs";
-import { a as r, i, n as a, r as o } from "./behavior.mjs";
-import { t as s } from "./identity.mjs";
+import { a as r, n as i, r as a } from "./behavior.mjs";
+import { t as o } from "./identity.mjs";
+import { a as s } from "./reporting.mjs";
 import { useMemo as c, useRef as l, useState as u, useSyncExternalStore as d } from "react";
 //#region src/react/popover/useTopLayer.ts
 var f = () => () => {}, p = () => !0;
@@ -11,121 +12,122 @@ function m() {
 //#endregion
 //#region src/react/popover/usePopoverLayer.ts
 function h(d) {
-	let { haspopup: f, id: p, idPrefix: h, open: g, defaultOpen: _ = !1, onOpenChange: v, onOpened: y, onClosing: b, inside: x } = d, S = s(h), C = p ?? S, [w, T] = i({
+	let { haspopup: f, id: p, idPrefix: h, open: g, defaultOpen: _ = !1, onOpenChange: v, onOpened: y, onClosing: b, inside: x, interaction: S } = d, C = o(h), w = p ?? C, [T, E] = s({
 		value: g,
 		defaultValue: _,
-		onChange: v
-	}), [E, D] = u(null), [O, k] = u(null), A = m(), [j, M] = u(!1), [N, P] = u(), F = l("imperative"), I = l(!1), L = r(y), R = r(b), z = r((e) => {
+		onChange: v,
+		interaction: S
+	}), [D, O] = u(null), [k, A] = u(null), j = m(), [M, N] = u(!1), [P, F] = u(), I = l("imperative"), L = l(!1), R = r(y), z = r(b), B = r((e) => {
 		let t = e.newState === "open", n = e.currentTarget;
 		if (t && g === !1) {
-			e.preventDefault(), setTimeout(() => T(!0, {
+			e.preventDefault(), setTimeout(() => E(!0, {
 				reason: "trigger",
 				event: e
 			}));
 			return;
 		}
-		t || (I.current = n.contains(document.activeElement), R(I.current, E)), M(t);
-		let r = t ? "trigger" : F.current;
-		F.current = "imperative", T(t, {
+		t || (L.current = n.contains(document.activeElement), z(L.current, D)), N(t);
+		let r = t ? "trigger" : I.current;
+		I.current = "imperative", E(t, {
 			reason: r,
 			event: e
 		});
-	}), B = r((e) => {
+	}), V = r((e) => {
 		let t = e.currentTarget;
-		e.newState === "open" && L(t);
+		e.newState === "open" && R(t);
 	});
 	n(() => {
-		if (!A || !O) return;
+		if (!j || !k) return;
 		let e = new AbortController();
-		return O.addEventListener("beforetoggle", z, { signal: e.signal }), O.addEventListener("toggle", B, { signal: e.signal }), () => e.abort();
+		return k.addEventListener("beforetoggle", B, { signal: e.signal }), k.addEventListener("toggle", V, { signal: e.signal }), () => e.abort();
 	}, [
-		A,
-		O,
-		z,
-		B
+		j,
+		k,
+		B,
+		V
 	]), n(() => {
-		!A || !e() || !O || w === j || (w ? O.showPopover() : O.hidePopover());
+		!j || !e() || !k || T === M || (T ? k.showPopover() : k.hidePopover());
 	}, [
-		w,
-		j,
-		O,
-		A
+		T,
+		M,
+		k,
+		j
 	]), n(() => {
-		if (!A || !w) return;
+		if (!j || !T) return;
 		let e = new AbortController(), n = (t, n) => document.addEventListener(t, n, {
 			signal: e.signal,
 			capture: !0
 		});
 		return n("keydown", (e) => {
-			e.key === "Escape" && (F.current = "escape");
+			e.key === "Escape" && (I.current = "escape");
 		}), n("pointerdown", (e) => {
-			let n = !!E && t(e, [E]);
-			F.current = n ? "trigger" : "outside-pointer";
+			let n = !!D && t(e, [D]);
+			I.current = n ? "trigger" : "outside-pointer";
 		}), () => e.abort();
 	}, [
-		A,
-		w,
-		E
+		j,
+		T,
+		D
 	]), n(() => {
-		E && (E.id || E.setAttribute("id", `${C}-trigger`), P(E.id));
-	}, [E, C]), n(() => {
-		if (!(!A || !E)) return E.setAttribute("popovertarget", C), () => E.removeAttribute("popovertarget");
+		D && (D.id || D.setAttribute("id", `${w}-trigger`), F(D.id));
+	}, [D, w]), n(() => {
+		if (!(!j || !D)) return D.setAttribute("popovertarget", w), () => D.removeAttribute("popovertarget");
 	}, [
-		A,
-		E,
-		C
+		j,
+		D,
+		w
 	]), n(() => {
-		A || !w || !O || L(O);
+		j || !T || !k || R(k);
 	}, [
-		A,
-		w,
-		O,
-		L
-	]), o({
-		enabled: !A && w,
+		j,
+		T,
+		k,
+		R
+	]), a({
+		enabled: !j && T,
 		inside: [
-			O,
-			E,
+			k,
+			D,
 			...x ?? []
 		],
-		onDismiss: (e, t) => T(!1, {
+		onDismiss: (e, t) => E(!1, {
 			reason: e,
 			event: t
 		})
-	}), a({
-		enabled: !A && w,
-		returnTo: E
+	}), i({
+		enabled: !j && T,
+		returnTo: D
 	});
-	let V = r((e) => {
-		T((e) => !e, {
+	let H = r((e) => {
+		E((e) => !e, {
 			reason: "trigger",
 			event: e
 		});
 	});
 	return {
-		platform: A,
-		isOpen: w,
-		setOpen: T,
-		id: C,
+		platform: j,
+		isOpen: T,
+		setOpen: E,
+		id: w,
 		trigger: c(() => ({
-			ref: D,
+			ref: O,
 			props: {
-				"aria-expanded": w,
+				"aria-expanded": T,
 				"aria-haspopup": f,
-				"aria-controls": w ? C : void 0,
-				...A ? {} : { onClick: V }
+				"aria-controls": T ? w : void 0,
+				...j ? {} : { onClick: H }
 			}
 		}), [
-			V,
+			H,
 			f,
+			T,
 			w,
-			C,
-			A
+			j
 		]),
-		triggerElement: E,
-		triggerId: N,
-		setPanel: k,
-		panelElement: O
+		triggerElement: D,
+		triggerId: P,
+		setPanel: A,
+		panelElement: k
 	};
 }
 //#endregion