@box-kite/react 2.1.0 → 2.2.0

package/client.mjs

@@ -3,10 +3,11 @@ import { l as n, t as r } from "./platform.mjs";
 import { t as i } from "./effects.mjs";
 import a from "./box.mjs";
 import o, { useCallback as s, useContext as c, useEffect as l, useLayoutEffect as u, useMemo as d, useRef as f, useState as p } from "react";
-import { applyThemeToElement as m, clearStoredTheme as h, defaultThemeName as g, documentRoot as _, getDefaultEngine as v, getSystemTheme as y, readStoredTheme as b, watchSystemTheme as x, writeStoredTheme as S } from "@box-kite/core";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { applyThemeToElement as m, clearStoredTheme as h, defaultThemeName as g, documentRoot as _, getDefaultEngine as v, getSystemTheme as y, readStoredTheme as b, startViewTransition as x, watchSystemTheme as S, writeStoredTheme as C } from "@box-kite/core";
+import { flushSync as w } from "react-dom";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region src/react/hooks/useVisibility.ts
-function T(e) {
+function D(e) {
 	let { node: t = null, event: r = "click", hideOnScroll: i = !1, hideOnResize: a = !1, hideOnEscape: o = !0 } = e ?? {}, [s, c] = p(!1), u = f(null);
 	return l(() => {
 		function e(e) {
@@ -41,23 +42,23 @@ function T(e) {
 }
 //#endregion
 //#region src/react/useStyles.ts
-var E = i;
-function D(t, n) {
+var O = i;
+function k(t, n) {
 	let { classNames: r, signature: i, styleElements: a } = e(t, n);
-	return E(() => {
+	return O(() => {
 		v().flushSync();
 	}, [i ?? t]), {
 		classNames: r,
 		styleElements: a
 	};
 }
-function O(e, n) {
+function A(e, n) {
 	let r = e ? v().addGlobalStyles(e, n) : void 0;
-	return E(() => {
+	return O(() => {
 		v().flushSync();
 	}, [e, n]), t(r);
 }
-var k;
+var j;
 (function(e) {
 	function t() {
 		v().flushSync();
@@ -72,77 +73,84 @@ var k;
 	}
 	e.getStyles = r;
 	function i() {
+		return v().getStyleTag();
+	}
+	e.getStyleTag = i;
+	function a() {
 		return v().styleElementId;
 	}
-	e.styleElementId = i;
-	function a(e) {
+	e.styleElementId = a;
+	function o(e) {
 		v().configure(e);
 	}
-	e.configure = a;
-})(k ||= {});
+	e.configure = o;
+})(j ||= {});
 //#endregion
 //#region src/react/clientRuntime.ts
-var A = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
-function j(e) {
-	if (typeof e.createContext != "function") throw Error(A);
+var M = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
+function N(e) {
+	if (typeof e.createContext != "function") throw Error(M);
 }
 //#endregion
 //#region src/react/theme/themeContext.ts
-j(o);
-var M = o.createContext({
+N(o);
+var P = o.createContext({
 	theme: "",
 	setTheme: () => {}
 });
 //#endregion
 //#region src/react/theme/theme.tsx
-function N(e) {
-	let { children: t, theme: n, use: r = "local", storageKey: i, globalStyles: o } = e, c = O(r === "global" ? o : void 0, "html"), [l, d] = p(n ?? g), [f, v] = p(n !== void 0), T = s((e) => {
-		e === null ? (i && h(i), v(!1)) : (i && S(i, e), d(e), v(!0));
-	}, [i]), [E, D] = p(n);
-	return n !== E && (D(n), n === void 0 ? v(!1) : (d(n), v(!0))), u(() => {
-		if (f) return;
-		let e = i ? b(i) : null;
-		if (e) {
-			d(e), v(!0);
+function F(e) {
+	let { children: t, theme: n, use: r = "local", storageKey: i, globalStyles: o, viewTransition: c } = e, l = A(r === "global" ? o : void 0, "html"), [d, v] = p(n ?? g), [D, O] = p(n !== void 0), k = f(null), j = f(d), M = s((e) => {
+		let t = () => {
+			e === null ? (i && h(i), O(!1)) : (i && C(i, e), v(e), O(!0));
+		};
+		c ? x(() => w(t)) : t();
+	}, [i, c]), [N, F] = p(n);
+	return n !== N && (F(n), n === void 0 ? O(!1) : (v(n), O(!0))), u(() => {
+		if (D) return;
+		let e = i ? b(i) : null, t = e ?? y();
+		if (t !== j.current && (k.current = t), v(t), e) {
+			O(!0);
 			return;
 		}
-		return d(y()), x(d);
-	}, [f, i]), u(() => {
-		if (r === "local") return;
+		return S(v);
+	}, [D, i]), u(() => {
+		if (j.current = d, k.current !== null && k.current !== d || (k.current = null, r === "local")) return;
 		let e = _();
-		if (e) return m(e, l);
-	}, [l, r]), r === "local" ? /* @__PURE__ */ w(M.Provider, {
+		if (e) return m(e, d);
+	}, [d, r]), r === "local" ? /* @__PURE__ */ E(P.Provider, {
 		value: {
-			theme: l,
-			setTheme: T
+			theme: d,
+			setTheme: M
 		},
-		children: [c, /* @__PURE__ */ C(a, {
-			className: l,
-			props: { "data-theme": l },
+		children: [l, /* @__PURE__ */ T(a, {
+			className: d,
+			props: { "data-theme": d },
 			children: t
 		})]
-	}) : /* @__PURE__ */ w(M.Provider, {
+	}) : /* @__PURE__ */ E(P.Provider, {
 		value: {
-			theme: l,
-			setTheme: T
+			theme: d,
+			setTheme: M
 		},
-		children: [c, t]
+		children: [l, t]
 	});
 }
 (function(e) {
 	function t() {
-		let { theme: e, setTheme: t } = c(M);
+		let { theme: e, setTheme: t } = c(P);
 		return [e, t];
 	}
 	e.useTheme = t;
-})(N ||= {});
-var P = N, F = /* @__PURE__ */ new WeakMap();
-function I(e) {
-	let t = F.get(e);
-	return t || (t = /* @__PURE__ */ new Map(), F.set(e, t)), t;
+})(F ||= {});
+var I = F, L = /* @__PURE__ */ new WeakMap();
+function R(e) {
+	let t = L.get(e);
+	return t || (t = /* @__PURE__ */ new Map(), L.set(e, t)), t;
 }
-function L(e = !0) {
-	let [t] = P.useTheme(), n = d(() => {
+function z(e = !0) {
+	let [t] = I.useTheme(), n = d(() => {
 		if (!e) return null;
 		let t = r();
 		if (!t) return null;
@@ -151,7 +159,7 @@ function L(e = !0) {
 	}, [e]);
 	return u(() => {
 		if (!t || !n) return;
-		let e = I(n), r = e.get(t) ?? 0;
+		let e = R(n), r = e.get(t) ?? 0;
 		return e.set(t, r + 1), r === 0 && n.classList.add(t), () => {
 			let r = (e.get(t) ?? 1) - 1;
 			r <= 0 ? (e.delete(t), n.classList.remove(t)) : e.set(t, r);
@@ -159,4 +167,4 @@ function L(e = !0) {
 	}, [n, t]), n;
 }
 //#endregion
-export { T as a, D as i, P as n, k as r, L as t };
+export { D as a, k as i, I as n, j as r, z as t };

package/components/button.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);var a=[`type`,`onClick`];function o(e,n){let o=t.i.buildProps(e,a);return(0,r.jsx)(i.default,{ref:n,tag:`button`,component:`button`,...o})}var s=(0,n.forwardRef)(o);s.displayName=`Button`,exports.default=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs");let t=require("@box-kite/react");var n=[`type`,`onClick`];function r(r,i){let a=e.i.buildProps(r,n);return(0,t.useBoxElement)({tag:`button`,component:`button`,...a},i)}var i=e.f(r,`Button`);exports.default=i;

package/components/button.mjs

@@ -1,19 +1,15 @@
-import { i as e } from "../react-shared.mjs";
-import { forwardRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import r from "@box-kite/react";
+import { f as e, i as t } from "../react-shared.mjs";
+import { useBoxElement as n } from "@box-kite/react";
 //#region src/components/button.tsx
-var i = ["type", "onClick"];
-function a(t, a) {
-	let o = e.buildProps(t, i);
-	return /* @__PURE__ */ n(r, {
-		ref: a,
+var r = ["type", "onClick"];
+function i(e, i) {
+	let a = t.buildProps(e, r);
+	return n({
 		tag: "button",
 		component: "button",
-		...o
-	});
+		...a
+	}, i);
 }
-var o = t(a);
-o.displayName = "Button";
+var a = e(i, "Button");
 //#endregion
-export { o as default };
+export { a as default };

package/components/flex.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@box-kite/react");r=e.t(r,1);function i(e,t){let{inline:i,...a}=e;return(0,n.jsx)(r.default,{ref:t,display:i?`inline-flex`:`flex`,...a})}var a=(0,t.forwardRef)(i);a.displayName=`Flex`,exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs");let t=require("@box-kite/react");function n(e,n){let{inline:r,...i}=e;return(0,t.useBoxElement)({display:r?`inline-flex`:`flex`,...i},n)}var r=e.f(n,`Flex`);exports.default=r;

package/components/flex.mjs

@@ -1,16 +1,13 @@
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
-import n from "@box-kite/react";
+import { f as e } from "../react-shared.mjs";
+import { useBoxElement as t } from "@box-kite/react";
 //#region src/components/flex.tsx
-function r(e, r) {
-	let { inline: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		ref: r,
-		display: i ? "inline-flex" : "flex",
-		...a
-	});
+function n(e, n) {
+	let { inline: r, ...i } = e;
+	return t({
+		display: r ? "inline-flex" : "flex",
+		...i
+	}, n);
 }
-var i = e(r);
-i.displayName = "Flex";
+var r = e(n, "Flex");
 //#endregion
-export { i as default };
+export { r as default };

package/components/form.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs");let t=require("react"),n=require("react/jsx-runtime");var r;(function(e){function t(e){let t=Array.from(e.elements).reduce((e,t)=>{let n=t.name;return n?(e[n]||(e[n]=[]),e[n].push(t),e):e},{});return Object.entries(t).reduce((e,[t,r])=>{if(r.length===1){let i=r[0];n(e,t,i.type===`checkbox`||i.type===`radio`?i.checked:i.value)}else n(e,t,r.reduce((e,t)=>(t.type===`checkbox`||t.type===`radio`?t.checked&&e.push(t.value):e.push(t.value),e),[]));return e},{})}e.getFormEntries=t;function n(e,t,n){if(t.includes(`.`)){let r=t.split(`.`),i=e;r.forEach((e,t)=>{if(r.length>t+1){let t=e.match(/^(.+)\[(\d)\]$/);if(t){let[,e,n]=t;i[e]=i[e]||[],i[e][n]=i[e][n]||{},i=i[e][n]}else i[e]=i[e]||{},i=i[e]}else i[e]=n})}else e[t]=n}})(r||={});var i=r;function a(r){let{onSubmit:a,props:o}=r,s=(0,t.useRef)(null),c=(0,t.useCallback)(e=>{e.preventDefault();let t=i.getFormEntries(s.current);a(t,e)},[a]),l={...o,onSubmit:c,ref:s};return(0,n.jsx)(e.default,{tag:`form`,...r,props:l})}a.displayName=`Form`,exports.default=a;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs");let t=require("react"),n=require("react/jsx-runtime");var r;(function(e){function t(e){let t=Array.from(e.elements).reduce((e,t)=>{let n=t.name;return n?(e[n]||(e[n]=[]),e[n].push(t),e):e},{});return Object.entries(t).reduce((e,[t,r])=>{if(r.length===1){let i=r[0];n(e,t,i.type===`checkbox`||i.type===`radio`?i.checked:i.value)}else n(e,t,r.reduce((e,t)=>(t.type===`checkbox`||t.type===`radio`?t.checked&&e.push(t.value):e.push(t.value),e),[]));return e},{})}e.getFormEntries=t;function n(e,t,n){if(t.includes(`.`)){let r=t.split(`.`),i=e;r.forEach((e,t)=>{if(r.length>t+1){let t=e.match(/^(.+)\[(\d)\]$/);if(t){let[,e,n]=t;i[e]=i[e]||[],i[e][n]=i[e][n]||{},i=i[e][n]}else i[e]=i[e]||{},i=i[e]}else i[e]=n})}else e[t]=n}})(r||={});var i=r;function a(r){let{onSubmit:a,props:o,...s}=r,c=(0,t.useRef)(null),l=(0,t.useCallback)(e=>{e.preventDefault();let t=i.getFormEntries(c.current);a(t,e)},[a]),u={...o,onSubmit:l,ref:c};return(0,n.jsx)(e.default,{tag:`form`,...s,props:u})}a.displayName=`Form`,exports.default=a;

package/components/form.mjs

@@ -38,19 +38,19 @@ var a = i;
 //#endregion
 //#region src/components/form.tsx
 function o(i) {
-	let { onSubmit: o, props: s } = i, c = n(null), l = t((e) => {
+	let { onSubmit: o, props: s, ...c } = i, l = n(null), u = t((e) => {
 		e.preventDefault();
-		let t = a.getFormEntries(c.current);
+		let t = a.getFormEntries(l.current);
 		o(t, e);
-	}, [o]), u = {
+	}, [o]), d = {
 		...s,
-		onSubmit: l,
-		ref: c
+		onSubmit: u,
+		ref: l
 	};
 	return /* @__PURE__ */ r(e, {
 		tag: "form",
-		...i,
-		props: u
+		...c,
+		props: d
 	});
 }
 o.displayName = "Form";

package/components/grid.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@box-kite/react");r=e.t(r,1);function i(e,t){let{inline:i,...a}=e;return(0,n.jsx)(r.default,{ref:t,display:i?`inline-grid`:`grid`,...a})}var a=(0,t.forwardRef)(i);a.displayName=`Grid`,exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs");let t=require("@box-kite/react");function n(e,n){let{inline:r,...i}=e;return(0,t.useBoxElement)({display:r?`inline-grid`:`grid`,...i},n)}var r=e.f(n,`Grid`);exports.default=r;

package/components/grid.mjs

@@ -1,16 +1,13 @@
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
-import n from "@box-kite/react";
+import { f as e } from "../react-shared.mjs";
+import { useBoxElement as t } from "@box-kite/react";
 //#region src/components/grid.tsx
-function r(e, r) {
-	let { inline: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		ref: r,
-		display: i ? "inline-grid" : "grid",
-		...a
-	});
+function n(e, n) {
+	let { inline: r, ...i } = e;
+	return t({
+		display: r ? "inline-grid" : "grid",
+		...i
+	}, n);
 }
-var i = e(r);
-i.displayName = "Grid";
+var r = e(n, "Grid");
 //#endregion
-export { i as default };
+export { r as default };

package/components/menu.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../effects.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../identity.cjs"),a=require("../keyboard.cjs"),o=require("../placement.cjs"),s=require("./overlay.cjs"),c=require("../layer.cjs");let l=require("react"),u=require("react/jsx-runtime");var d;(function(e){let t=e.ITEM_SELECTOR=`[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]`;function n(e,t){return t instanceof Element&&t.closest(`[role="menu"]`)===e}e.owns=n;function r(e){return[...e.querySelectorAll(t)].filter(t=>n(e,t))}e.items=r;function i(e){return e.getAttribute(`aria-disabled`)===`true`}e.isDisabled=i;function o(e){return e.getAttribute(`aria-haspopup`)===`menu`}e.isSubTrigger=o;function s(e,t,n){if(e.length!==0)return e[t<0?n>0?0:e.length-1:((t+n)%e.length+e.length)%e.length]}e.step=s;function c(e,t,n){let r=a.t.target(t,n,e.length,t=>e[t].textContent??``);return r<0?void 0:e[r]}e.typeaheadTarget=c})(d||={});var f=d,p=(0,l.createContext)(null);function m(e){let t=(0,l.useContext)(p);if(!t)throw Error(`<${e}> must be rendered inside a <Menu>.`);return t}function h(e){let[t,n]=(0,l.useState)([]);return{panels:t,registerLayer:(0,l.useCallback)(t=>{n(e=>[...e,t]);let r=e?.(t);return()=>{n(e=>e.filter(e=>e!==t)),r?.()}},[e])}}var g=(0,l.createContext)(null);function _(e){let{trigger:t,children:n,open:i,defaultOpen:a=!1,onOpenChange:o,label:s,labelledBy:d,side:m=`bottom`,align:g=`start`,offset:_=1,flip:y=!0,matchWidth:b=!1,props:x,...S}=e,C=(0,l.useRef)(`first`),w=r.a(e=>{let t=f.items(e),n=C.current===`last`?t[t.length-1]:t[0];C.current=`first`,(n??e).focus()}),{panels:T,registerLayer:E}=h(),D=c.t({haspopup:`menu`,idPrefix:`menu`,id:S.id,open:i,defaultOpen:a,onOpenChange:o,onOpened:w,inside:T}),O=r.a(e=>{(e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),C.current=e.key===`ArrowUp`?`last`:`first`,D.isOpen&&D.panelElement?w(D.panelElement):D.setOpen(!0,{reason:`trigger`,event:e}))}),k=(0,l.useMemo)(()=>({ref:D.trigger.ref,props:{...D.trigger.props,onKeyDown:O}}),[O,D.trigger]),A=r.a(e=>D.setOpen(!1,e)),j=(0,l.useMemo)(()=>({open:D.isOpen,closeAll:A,registerLayer:E}),[A,D.isOpen,E]);return(0,u.jsxs)(u.Fragment,{children:[t(k),(0,u.jsx)(p.Provider,{value:j,children:(0,u.jsx)(v,{layer:D,side:m,align:g,offset:_,flip:y,matchWidth:b,label:s,labelledBy:d??(s?void 0:D.triggerId),contentProps:x,...S,children:n})})]})}function v(t){let{layer:i,side:c,align:d,offset:p,flip:h,matchWidth:g,label:_,labelledBy:v,contentProps:y,closeSelf:b,children:x,...S}=t,{platform:C,isOpen:w,id:T,triggerElement:E,setPanel:D}=i,O=m(`Menu`),k=(0,l.useRef)({query:``,at:0}),A=o.t({side:c,align:d,offset:p,flip:h,matchWidth:g,anchor:E}),j={role:`menu`,"aria-label":_,"aria-labelledby":v,tabIndex:-1,onKeyDown:r.a(t=>{let n=t.currentTarget;if(!f.owns(n,t.target))return;let r=f.items(n),i=r.indexOf(document.activeElement),o=e=>{e&&(t.preventDefault(),e.focus())},s=e.u(n)?`ArrowRight`:`ArrowLeft`;switch(t.key){case`ArrowDown`:return o(f.step(r,i,1));case`ArrowUp`:return o(f.step(r,i,-1));case`Home`:return o(r[0]);case`End`:return o(r[r.length-1]);case`Tab`:return O.closeAll({reason:`tab`,event:t});case s:return b?(t.preventDefault(),b({reason:`trigger`,event:t})):void 0}if(a.t.isPrintable(t)){let e=a.t.push(k.current,t.key,t.timeStamp);o(f.typeaheadTarget(r,e,i))}}),onPointerOver:r.a(e=>{let t=e.currentTarget,n=e.target?.closest(f.ITEM_SELECTOR);!n||!f.owns(t,n)||n===document.activeElement||n.focus()}),...y};return C?(0,u.jsx)(n.default,{ref:D,component:`menu`,...S,variant:[S.variant,{topLayer:!0}],...A.layerProps,id:T,props:{popover:`auto`,...j},children:x}):w?(0,u.jsx)(s.default,{contentRef:D,anchor:E,side:c,align:d,offset:p,flip:h,matchWidth:g,component:`menu`,...S,id:T,props:j,children:x}):null}function y(a){let{label:o,children:s,disabled:d,side:g=`end`,align:_=`start`,offset:y=0,flip:b=!0,itemProps:x,props:S,...C}=a,w=m(`Menu.Sub`),T=i.t(`menu-sub`),E=r.a(e=>{(f.items(e)[0]??e).focus()}),D=r.a((e,t)=>{e&&t?.focus()}),{panels:O,registerLayer:k}=h(w.registerLayer),A=c.t({haspopup:`menu`,idPrefix:`menu-sub`,id:C.id,onOpened:E,onClosing:D,inside:O});t.n(()=>{if(!(!A.isOpen||!A.panelElement))return w.registerLayer(A.panelElement)},[A.isOpen,A.panelElement,w.registerLayer]),t.n(()=>{w.open||A.setOpen(!1,{reason:`imperative`})},[w.open,A.setOpen]),t.n(()=>{if(!A.isOpen)return;let t=new AbortController;return document.addEventListener(`focusin`,t=>{e.l(t,[A.panelElement,A.triggerElement])||A.setOpen(!1,{reason:`imperative`,event:t})},{signal:t.signal}),()=>t.abort()},[A.isOpen,A.panelElement,A.triggerElement,A.setOpen]);let j=r.a(t=>{let n=e.u(t.currentTarget)?`ArrowLeft`:`ArrowRight`;d||t.key!==n||(t.preventDefault(),A.setOpen(!0,{reason:`trigger`,event:t}))}),M=r.a(e=>{d||A.setOpen(!0,{reason:`trigger`,event:e})}),N=(0,l.useMemo)(()=>({open:A.isOpen,closeAll:w.closeAll,registerLayer:k}),[A.isOpen,w.closeAll,k]);return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(n.default,{tag:`button`,ref:d?void 0:A.trigger.ref,component:`menu.item`,variant:{sub:!0},id:T,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":d||void 0,...A.trigger.props,...x,onKeyDown:j,onPointerEnter:M},children:[o,(0,u.jsx)(n.default,{component:`menu.arrow`})]}),!d&&(0,u.jsx)(p.Provider,{value:N,children:(0,u.jsx)(v,{layer:A,side:g,align:_,offset:y,flip:b,matchWidth:!1,labelledBy:T,contentProps:S,closeSelf:e=>A.setOpen(!1,e),...C,children:s})})]})}function b(e){let{onSelect:t,disabled:i,closeOnSelect:a=!0,props:o,children:s,...c}=e,l=m(`Menu.Item`),d=r.a(e=>{i||(t?.(e),a&&l.closeAll({reason:`select`,event:e}))});return(0,u.jsx)(n.default,{tag:`button`,component:`menu.item`,...c,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":i||void 0,...o,onClick:d},children:s})}function x(e){let{checked:t,defaultChecked:i=!1,onCheckedChange:a,disabled:o,closeOnSelect:s=!1,props:c,children:l,...d}=e,f=m(`Menu.CheckboxItem`),[p,h]=r.i({value:t,defaultValue:i,onChange:a}),g=r.a(e=>{o||(h(!p,{reason:`select`,event:e}),s&&f.closeAll({reason:`select`,event:e}))});return(0,u.jsxs)(n.default,{tag:`button`,component:`menu.item`,...d,props:{type:`button`,role:`menuitemcheckbox`,tabIndex:-1,"aria-checked":p,"aria-disabled":o||void 0,...c,onClick:g},children:[(0,u.jsx)(n.default,{component:`menu.indicator`,children:p&&(0,u.jsx)(n.default,{component:`menu.check`})}),l]})}function S(e){let{label:t,value:n,defaultValue:i=``,onValueChange:a,children:o,...s}=e,[c,d]=r.i({value:n,defaultValue:i,onChange:a}),f=r.a((e,t)=>d(e,{reason:`select`,event:t})),p=(0,l.useMemo)(()=>({value:c,select:f}),[c,f]);return(0,u.jsx)(g.Provider,{value:p,children:(0,u.jsx)(w,{label:t,...s,children:o})})}function C(e){let{value:t,disabled:i,closeOnSelect:a=!1,props:o,children:s,...c}=e,d=m(`Menu.RadioItem`),f=(0,l.useContext)(g);if(!f)throw Error(`<Menu.RadioItem> must be rendered inside a <Menu.RadioGroup>.`);let p=f.value===t,h=r.a(e=>{i||(f.select(t,e),a&&d.closeAll({reason:`select`,event:e}))});return(0,u.jsxs)(n.default,{tag:`button`,component:`menu.item`,...c,props:{type:`button`,role:`menuitemradio`,tabIndex:-1,"aria-checked":p,"aria-disabled":i||void 0,...o,onClick:h},children:[(0,u.jsx)(n.default,{component:`menu.indicator`,children:p&&(0,u.jsx)(n.default,{component:`menu.dot`})}),s]})}function w(e){let{label:t,props:r,children:a,...o}=e,s=i.t(`menu-group`);return(0,u.jsxs)(n.default,{component:`menu.group`,...o,props:{role:`group`,"aria-labelledby":t?s:void 0,...r},children:[t&&(0,u.jsx)(n.default,{component:`menu.label`,id:s,props:{role:`presentation`},children:t}),a]})}function T(e){let{props:t,...r}=e;return(0,u.jsx)(n.default,{component:`menu.separator`,...r,props:{role:`separator`,...t}})}b.displayName=`Menu.Item`,x.displayName=`Menu.CheckboxItem`,S.displayName=`Menu.RadioGroup`,C.displayName=`Menu.RadioItem`,w.displayName=`Menu.Group`,T.displayName=`Menu.Separator`,y.displayName=`Menu.Sub`;var E=Object.assign(_,{Item:b,CheckboxItem:x,RadioGroup:S,RadioItem:C,Group:w,Separator:T,Sub:y});_.displayName=`Menu`,exports.default=E;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../effects.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../identity.cjs"),a=require("../keyboard.cjs"),o=require("../placement.cjs"),s=require("../layer.cjs"),c=require("./overlay.cjs");let l=require("react"),u=require("react/jsx-runtime");var d;(function(e){let t=e.ITEM_SELECTOR=`[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]`;function n(e,t){return t instanceof Element&&t.closest(`[role="menu"]`)===e}e.owns=n;function r(e){return[...e.querySelectorAll(t)].filter(t=>n(e,t))}e.items=r;function i(e){return e.getAttribute(`aria-disabled`)===`true`}e.isDisabled=i;function o(e){return e.getAttribute(`aria-haspopup`)===`menu`}e.isSubTrigger=o;function s(e,t,n){if(e.length!==0)return e[t<0?n>0?0:e.length-1:((t+n)%e.length+e.length)%e.length]}e.step=s;function c(e,t,n){let r=a.t.target(t,n,e.length,t=>e[t].textContent??``);return r<0?void 0:e[r]}e.typeaheadTarget=c})(d||={});var f=d,p=(0,l.createContext)(null);function m(e){let t=(0,l.useContext)(p);if(!t)throw Error(`<${e}> must be rendered inside a <Menu>.`);return t}function h(e){let[t,n]=(0,l.useState)([]);return{panels:t,registerLayer:(0,l.useCallback)(t=>{n(e=>[...e,t]);let r=e?.(t);return()=>{n(e=>e.filter(e=>e!==t)),r?.()}},[e])}}var g=(0,l.createContext)(null);function _(e){let{trigger:t,children:n,open:i,defaultOpen:a=!1,onOpenChange:o,label:c,labelledBy:d,side:m=`bottom`,align:g=`start`,offset:_=1,flip:y=!0,matchWidth:b=!1,props:x,...S}=e,C=(0,l.useRef)(`first`),w=r.a(e=>{let t=f.items(e),n=C.current===`last`?t[t.length-1]:t[0];C.current=`first`,(n??e).focus()}),{panels:T,registerLayer:E}=h(),D=s.t({haspopup:`menu`,idPrefix:`menu`,id:S.id,open:i,defaultOpen:a,onOpenChange:o,onOpened:w,inside:T}),O=r.a(e=>{(e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),C.current=e.key===`ArrowUp`?`last`:`first`,D.isOpen&&D.panelElement?w(D.panelElement):D.setOpen(!0,{reason:`trigger`,event:e}))}),k=(0,l.useMemo)(()=>({ref:D.trigger.ref,props:{...D.trigger.props,onKeyDown:O}}),[O,D.trigger]),A=r.a(e=>D.setOpen(!1,e)),j=(0,l.useMemo)(()=>({open:D.isOpen,closeAll:A,registerLayer:E}),[A,D.isOpen,E]);return(0,u.jsxs)(u.Fragment,{children:[t(k),(0,u.jsx)(p.Provider,{value:j,children:(0,u.jsx)(v,{layer:D,side:m,align:g,offset:_,flip:y,matchWidth:b,label:c,labelledBy:d??(c?void 0:D.triggerId),contentProps:x,...S,children:n})})]})}function v(t){let{layer:i,side:s,align:d,offset:p,flip:h,matchWidth:g,label:_,labelledBy:v,contentProps:y,closeSelf:b,children:x,...S}=t,{platform:C,isOpen:w,id:T,triggerElement:E,setPanel:D}=i,O=m(`Menu`),k=(0,l.useRef)({query:``,at:0}),A=o.t({side:s,align:d,offset:p,flip:h,matchWidth:g,anchor:E}),j={role:`menu`,"aria-label":_,"aria-labelledby":v,tabIndex:-1,onKeyDown:r.a(t=>{let n=t.currentTarget;if(!f.owns(n,t.target))return;let r=f.items(n),i=r.indexOf(document.activeElement),o=e=>{e&&(t.preventDefault(),e.focus())},s=e.u(n)?`ArrowRight`:`ArrowLeft`;switch(t.key){case`ArrowDown`:return o(f.step(r,i,1));case`ArrowUp`:return o(f.step(r,i,-1));case`Home`:return o(r[0]);case`End`:return o(r[r.length-1]);case`Tab`:return O.closeAll({reason:`tab`,event:t});case s:return b?(t.preventDefault(),b({reason:`trigger`,event:t})):void 0}if(a.t.isPrintable(t)){let e=a.t.push(k.current,t.key,t.timeStamp);o(f.typeaheadTarget(r,e,i))}}),onPointerOver:r.a(e=>{let t=e.currentTarget,n=e.target?.closest(f.ITEM_SELECTOR);!n||!f.owns(t,n)||n===document.activeElement||n.focus()}),...y};return C?(0,u.jsx)(n.default,{ref:D,component:`menu`,...S,variant:[S.variant,{topLayer:!0}],...A.layerProps,id:T,props:{popover:`auto`,...j},children:x}):w?(0,u.jsx)(c.default,{contentRef:D,anchor:E,side:s,align:d,offset:p,flip:h,matchWidth:g,component:`menu`,...S,id:T,props:j,children:x}):null}function y(a){let{label:o,children:c,disabled:d,side:g=`end`,align:_=`start`,offset:y=0,flip:b=!0,itemProps:x,props:S,...C}=a,w=m(`Menu.Sub`),T=i.t(`menu-sub`),E=r.a(e=>{(f.items(e)[0]??e).focus()}),D=r.a((e,t)=>{e&&t?.focus()}),{panels:O,registerLayer:k}=h(w.registerLayer),A=s.t({haspopup:`menu`,idPrefix:`menu-sub`,id:C.id,onOpened:E,onClosing:D,inside:O});t.n(()=>{if(!(!A.isOpen||!A.panelElement))return w.registerLayer(A.panelElement)},[A.isOpen,A.panelElement,w.registerLayer]),t.n(()=>{w.open||A.setOpen(!1,{reason:`imperative`})},[w.open,A.setOpen]),t.n(()=>{if(!A.isOpen)return;let t=new AbortController;return document.addEventListener(`focusin`,t=>{e.l(t,[A.panelElement,A.triggerElement])||A.setOpen(!1,{reason:`imperative`,event:t})},{signal:t.signal}),()=>t.abort()},[A.isOpen,A.panelElement,A.triggerElement,A.setOpen]);let j=r.a(t=>{let n=e.u(t.currentTarget)?`ArrowLeft`:`ArrowRight`;d||t.key!==n||(t.preventDefault(),A.setOpen(!0,{reason:`trigger`,event:t}))}),M=r.a(e=>{d||A.setOpen(!0,{reason:`trigger`,event:e})}),N=(0,l.useMemo)(()=>({open:A.isOpen,closeAll:w.closeAll,registerLayer:k}),[A.isOpen,w.closeAll,k]);return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(n.default,{tag:`button`,ref:d?void 0:A.trigger.ref,component:`menu.item`,variant:{sub:!0},id:T,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":d||void 0,...A.trigger.props,...x,onKeyDown:j,onPointerEnter:M},children:[o,(0,u.jsx)(n.default,{component:`menu.arrow`})]}),!d&&(0,u.jsx)(p.Provider,{value:N,children:(0,u.jsx)(v,{layer:A,side:g,align:_,offset:y,flip:b,matchWidth:!1,labelledBy:T,contentProps:S,closeSelf:e=>A.setOpen(!1,e),...C,children:c})})]})}function b(e){let{onSelect:t,disabled:i,closeOnSelect:a=!0,props:o,children:s,...c}=e,l=m(`Menu.Item`),d=r.a(e=>{i||(t?.(e),a&&l.closeAll({reason:`select`,event:e}))});return(0,u.jsx)(n.default,{tag:`button`,component:`menu.item`,...c,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":i||void 0,...o,onClick:d},children:s})}function x(e){let{checked:t,defaultChecked:i=!1,onCheckedChange:a,disabled:o,closeOnSelect:s=!1,props:c,children:l,...d}=e,f=m(`Menu.CheckboxItem`),[p,h]=r.i({value:t,defaultValue:i,onChange:a}),g=r.a(e=>{o||(h(!p,{reason:`select`,event:e}),s&&f.closeAll({reason:`select`,event:e}))});return(0,u.jsxs)(n.default,{tag:`button`,component:`menu.item`,...d,props:{type:`button`,role:`menuitemcheckbox`,tabIndex:-1,"aria-checked":p,"aria-disabled":o||void 0,...c,onClick:g},children:[(0,u.jsx)(n.default,{component:`menu.indicator`,children:p&&(0,u.jsx)(n.default,{component:`menu.check`})}),l]})}function S(e){let{label:t,value:n,defaultValue:i=``,onValueChange:a,children:o,...s}=e,[c,d]=r.i({value:n,defaultValue:i,onChange:a}),f=r.a((e,t)=>d(e,{reason:`select`,event:t})),p=(0,l.useMemo)(()=>({value:c,select:f}),[c,f]);return(0,u.jsx)(g.Provider,{value:p,children:(0,u.jsx)(w,{label:t,...s,children:o})})}function C(e){let{value:t,disabled:i,closeOnSelect:a=!1,props:o,children:s,...c}=e,d=m(`Menu.RadioItem`),f=(0,l.useContext)(g);if(!f)throw Error(`<Menu.RadioItem> must be rendered inside a <Menu.RadioGroup>.`);let p=f.value===t,h=r.a(e=>{i||(f.select(t,e),a&&d.closeAll({reason:`select`,event:e}))});return(0,u.jsxs)(n.default,{tag:`button`,component:`menu.item`,...c,props:{type:`button`,role:`menuitemradio`,tabIndex:-1,"aria-checked":p,"aria-disabled":i||void 0,...o,onClick:h},children:[(0,u.jsx)(n.default,{component:`menu.indicator`,children:p&&(0,u.jsx)(n.default,{component:`menu.dot`})}),s]})}function w(e){let{label:t,props:r,children:a,...o}=e,s=i.t(`menu-group`);return(0,u.jsxs)(n.default,{component:`menu.group`,...o,props:{role:`group`,"aria-labelledby":t?s:void 0,...r},children:[t&&(0,u.jsx)(n.default,{component:`menu.label`,id:s,props:{role:`presentation`},children:t}),a]})}function T(e){let{props:t,...r}=e;return(0,u.jsx)(n.default,{component:`menu.separator`,...r,props:{role:`separator`,...t}})}b.displayName=`Menu.Item`,x.displayName=`Menu.CheckboxItem`,S.displayName=`Menu.RadioGroup`,C.displayName=`Menu.RadioItem`,w.displayName=`Menu.Group`,T.displayName=`Menu.Separator`,y.displayName=`Menu.Sub`;var E=Object.assign(_,{Item:b,CheckboxItem:x,RadioGroup:S,RadioItem:C,Group:w,Separator:T,Sub:y});_.displayName=`Menu`,exports.default=E;

package/components/menu.mjs

@@ -6,8 +6,8 @@ import { a as i, i as a } from "../behavior.mjs";
 import { t as o } from "../identity.mjs";
 import { t as s } from "../keyboard.mjs";
 import { t as c } from "../placement.mjs";
-import l from "./overlay.mjs";
-import { t as u } from "../layer.mjs";
+import { t as l } from "../layer.mjs";
+import u from "./overlay.mjs";
 import { createContext as d, useCallback as f, useContext as p, useMemo as m, useRef as h, useState as g } from "react";
 import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/utils/menu/menuUtils.ts
@@ -61,10 +61,10 @@ function w(e) {
 }
 var T = d(null);
 function E(e) {
-	let { trigger: t, children: n, open: r, defaultOpen: a = !1, onOpenChange: o, label: s, labelledBy: c, side: l = "bottom", align: d = "start", offset: f = 1, flip: p = !0, matchWidth: g = !1, props: b, ...C } = e, T = h("first"), E = i((e) => {
+	let { trigger: t, children: n, open: r, defaultOpen: a = !1, onOpenChange: o, label: s, labelledBy: c, side: u = "bottom", align: d = "start", offset: f = 1, flip: p = !0, matchWidth: g = !1, props: b, ...C } = e, T = h("first"), E = i((e) => {
 		let t = x.items(e), n = T.current === "last" ? t[t.length - 1] : t[0];
 		T.current = "first", (n ?? e).focus();
-	}), { panels: O, registerLayer: k } = w(), A = u({
+	}), { panels: O, registerLayer: k } = w(), A = l({
 		haspopup: "menu",
 		idPrefix: "menu",
 		id: C.id,
@@ -97,7 +97,7 @@ function E(e) {
 		value: P,
 		children: /* @__PURE__ */ v(D, {
 			layer: A,
-			side: l,
+			side: u,
 			align: d,
 			offset: f,
 			flip: p,
@@ -111,13 +111,13 @@ function E(e) {
 	})] });
 }
 function D(e) {
-	let { layer: n, side: a, align: o, offset: u, flip: d, matchWidth: f, label: p, labelledBy: m, contentProps: g, closeSelf: _, children: y, ...b } = e, { platform: S, isOpen: w, id: T, triggerElement: E, setPanel: D } = n, O = C("Menu"), k = h({
+	let { layer: n, side: a, align: o, offset: l, flip: d, matchWidth: f, label: p, labelledBy: m, contentProps: g, closeSelf: _, children: y, ...b } = e, { platform: S, isOpen: w, id: T, triggerElement: E, setPanel: D } = n, O = C("Menu"), k = h({
 		query: "",
 		at: 0
 	}), A = c({
 		side: a,
 		align: o,
-		offset: u,
+		offset: l,
 		flip: d,
 		matchWidth: f,
 		anchor: E
@@ -169,12 +169,12 @@ function D(e) {
 			...j
 		},
 		children: y
-	}) : w ? /* @__PURE__ */ v(l, {
+	}) : w ? /* @__PURE__ */ v(u, {
 		contentRef: D,
 		anchor: E,
 		side: a,
 		align: o,
-		offset: u,
+		offset: l,
 		flip: d,
 		matchWidth: f,
 		component: "menu",
@@ -185,11 +185,11 @@ function D(e) {
 	}) : null;
 }
 function O(a) {
-	let { label: s, children: c, disabled: l, side: d = "end", align: f = "start", offset: p = 0, flip: h = !0, itemProps: g, props: b, ...T } = a, E = C("Menu.Sub"), O = o("menu-sub"), k = i((e) => {
+	let { label: s, children: c, disabled: u, side: d = "end", align: f = "start", offset: p = 0, flip: h = !0, itemProps: g, props: b, ...T } = a, E = C("Menu.Sub"), O = o("menu-sub"), k = i((e) => {
 		(x.items(e)[0] ?? e).focus();
 	}), A = i((e, t) => {
 		e && t?.focus();
-	}), { panels: j, registerLayer: M } = w(E.registerLayer), N = u({
+	}), { panels: j, registerLayer: M } = w(E.registerLayer), N = l({
 		haspopup: "menu",
 		idPrefix: "menu-sub",
 		id: T.id,
@@ -222,12 +222,12 @@ function O(a) {
 	]);
 	let P = i((e) => {
 		let n = t(e.currentTarget) ? "ArrowLeft" : "ArrowRight";
-		l || e.key !== n || (e.preventDefault(), N.setOpen(!0, {
+		u || e.key !== n || (e.preventDefault(), N.setOpen(!0, {
 			reason: "trigger",
 			event: e
 		}));
 	}), F = i((e) => {
-		l || N.setOpen(!0, {
+		u || N.setOpen(!0, {
 			reason: "trigger",
 			event: e
 		});
@@ -242,7 +242,7 @@ function O(a) {
 	]);
 	return /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y(r, {
 		tag: "button",
-		ref: l ? void 0 : N.trigger.ref,
+		ref: u ? void 0 : N.trigger.ref,
 		component: "menu.item",
 		variant: { sub: !0 },
 		id: O,
@@ -250,14 +250,14 @@ function O(a) {
 			type: "button",
 			role: "menuitem",
 			tabIndex: -1,
-			"aria-disabled": l || void 0,
+			"aria-disabled": u || void 0,
 			...N.trigger.props,
 			...g,
 			onKeyDown: P,
 			onPointerEnter: F
 		},
 		children: [s, /* @__PURE__ */ v(r, { component: "menu.arrow" })]
-	}), !l && /* @__PURE__ */ v(S.Provider, {
+	}), !u && /* @__PURE__ */ v(S.Provider, {
 		value: I,
 		children: /* @__PURE__ */ v(D, {
 			layer: N,

package/components/overlay.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../client.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../placement.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("react-dom");function c(c,l){let{side:u=`bottom`,align:d=`center`,offset:f=0,flip:p=!0,onSideChange:m,anchor:h,contentRef:g,matchWidth:_=!0,...v}=c,[y,b]=(0,a.useState)(null),[x,S]=(0,a.useState)(!1),C=(0,a.useRef)(null),[w]=(0,a.useState)(e.a),T=(0,a.useRef)(null),E=t.t(!w),D=i.t({side:u,align:d,offset:f,flip:p,matchWidth:_,anchor:h??y,trackSide:!!m});n.n(()=>{let e=T.current;!w||!e||!e.isConnected||e.matches(`:popover-open`)||e.showPopover()}),n.n(()=>{if(w)return;let t=e.c(h)??y;S(!!t&&e.u(t))},[h,y,w]),n.n(()=>{C.current!==D.side&&(C.current=D.side,m?.(D.side))});let O=D.layerProps.ref,k=(0,a.useCallback)(e=>{O?.(e),T.current=e,typeof l==`function`?l(e):l&&(l.current=e)},[O,l]),A=(0,o.jsx)(r.default,{...D.layerProps,ref:k,transition:`none`,props:w?{popover:`manual`}:{dir:x?`rtl`:`ltr`},children:(0,o.jsx)(r.default,{ref:g,...v})});return(0,o.jsxs)(o.Fragment,{children:[!h&&(0,o.jsx)(r.default,{ref:b}),w?A:E&&(0,s.createPortal)(A,E)]})}var l=(0,a.forwardRef)(c);l.displayName=`Overlay`,exports.default=l;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../client.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../placement.cjs"),a=require("../layer.cjs");let o=require("react"),s=require("react-dom"),c=require("react/jsx-runtime");function l(l,u){let{side:d=`bottom`,align:f=`center`,offset:p=0,flip:m=!0,onSideChange:h,anchor:g,contentRef:_,matchWidth:v=!0,...y}=l,[b,x]=(0,o.useState)(null),[S,C]=(0,o.useState)(!1),w=(0,o.useRef)(null),T=a.n(),E=(0,o.useRef)(null),D=t.t(!T),O=i.t({side:d,align:f,offset:p,flip:m,matchWidth:v,anchor:g??b,trackSide:!!h});n.n(()=>{let t=E.current;!T||!e.a()||!t||!t.isConnected||t.matches(`:popover-open`)||t.showPopover()}),n.n(()=>{if(T)return;let t=e.c(g)??b;C(!!t&&e.u(t))},[g,b,T]),n.n(()=>{w.current!==O.side&&(w.current=O.side,h?.(O.side))});let k=O.layerProps.ref,A=(0,o.useCallback)(e=>{k?.(e),E.current=e,typeof u==`function`?u(e):u&&(u.current=e)},[k,u]),j=(0,c.jsx)(r.default,{...O.layerProps,ref:A,transition:`none`,props:T?{popover:`manual`}:{dir:S?`rtl`:`ltr`},children:(0,c.jsx)(r.default,{ref:_,...y})});return(0,c.jsxs)(c.Fragment,{children:[!g&&(0,c.jsx)(r.default,{ref:x}),T?j:D&&(0,s.createPortal)(j,D)]})}var u=(0,o.forwardRef)(l);u.displayName=`Overlay`,exports.default=u;

package/components/overlay.mjs

@@ -4,49 +4,50 @@ import { t as r } from "../client.mjs";
 import { n as i } from "../effects.mjs";
 import a from "../box.mjs";
 import { t as o } from "../placement.mjs";
-import { forwardRef as s, useCallback as c, useRef as l, useState as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { createPortal as m } from "react-dom";
+import { n as s } from "../layer.mjs";
+import { forwardRef as c, useCallback as l, useRef as u, useState as d } from "react";
+import { createPortal as f } from "react-dom";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/overlay.tsx
-function h(s, h) {
-	let { side: g = "bottom", align: _ = "center", offset: v = 0, flip: y = !0, onSideChange: b, anchor: x, contentRef: S, matchWidth: C = !0, ...w } = s, [T, E] = u(null), [D, O] = u(!1), k = l(null), [A] = u(e), j = l(null), M = r(!A), N = o({
-		side: g,
-		align: _,
-		offset: v,
-		flip: y,
-		matchWidth: C,
-		anchor: x ?? T,
-		trackSide: !!b
+function g(c, g) {
+	let { side: _ = "bottom", align: v = "center", offset: y = 0, flip: b = !0, onSideChange: x, anchor: S, contentRef: C, matchWidth: w = !0, ...T } = c, [E, D] = d(null), [O, k] = d(!1), A = u(null), j = s(), M = u(null), N = r(!j), P = o({
+		side: _,
+		align: v,
+		offset: y,
+		flip: b,
+		matchWidth: w,
+		anchor: S ?? E,
+		trackSide: !!x
 	});
 	i(() => {
-		let e = j.current;
-		!A || !e || !e.isConnected || e.matches(":popover-open") || e.showPopover();
+		let t = M.current;
+		!j || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
 	}), i(() => {
-		if (A) return;
-		let e = t(x) ?? T;
-		O(!!e && n(e));
+		if (j) return;
+		let e = t(S) ?? E;
+		k(!!e && n(e));
 	}, [
-		x,
-		T,
-		A
+		S,
+		E,
+		j
 	]), i(() => {
-		k.current !== N.side && (k.current = N.side, b?.(N.side));
+		A.current !== P.side && (A.current = P.side, x?.(P.side));
 	});
-	let P = N.layerProps.ref, F = c((e) => {
-		P?.(e), j.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
-	}, [P, h]), I = /* @__PURE__ */ f(a, {
-		...N.layerProps,
-		ref: F,
+	let F = P.layerProps.ref, I = l((e) => {
+		F?.(e), M.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+	}, [F, g]), L = /* @__PURE__ */ m(a, {
+		...P.layerProps,
+		ref: I,
 		transition: "none",
-		props: A ? { popover: "manual" } : { dir: D ? "rtl" : "ltr" },
-		children: /* @__PURE__ */ f(a, {
-			ref: S,
-			...w
+		props: j ? { popover: "manual" } : { dir: O ? "rtl" : "ltr" },
+		children: /* @__PURE__ */ m(a, {
+			ref: C,
+			...T
 		})
 	});
-	return /* @__PURE__ */ p(d, { children: [!x && /* @__PURE__ */ f(a, { ref: E }), A ? I : M && m(I, M)] });
+	return /* @__PURE__ */ h(p, { children: [!S && /* @__PURE__ */ m(a, { ref: D }), j ? L : N && f(L, N)] });
 }
-var g = s(h);
-g.displayName = "Overlay";
+var _ = c(g);
+_.displayName = "Overlay";
 //#endregion
-export { g as default };
+export { _ as default };

package/components/popover.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../placement.cjs"),r=require("./overlay.cjs"),i=require("../layer.cjs");let a=require("react/jsx-runtime");function o(o){let{trigger:s,children:c,open:l,defaultOpen:u=!1,onOpenChange:d,label:f,labelledBy:p,side:m=`bottom`,align:h=`center`,offset:g=2,flip:_=!0,matchWidth:v=!1,autoFocus:y=!0,props:b,...x}=o,S=t.a(e=>{!y||e.contains(document.activeElement)||e.focus()}),{platform:C,isOpen:w,id:T,trigger:E,triggerElement:D,setPanel:O}=i.t({haspopup:`dialog`,idPrefix:`popover`,id:x.id,open:l,defaultOpen:u,onOpenChange:d,onOpened:S}),k=n.t({side:m,align:h,offset:g,flip:_,matchWidth:v,anchor:D}),A={"aria-label":f,"aria-labelledby":p},j=x;return C?(0,a.jsxs)(a.Fragment,{children:[s(E),(0,a.jsx)(e.default,{ref:O,component:`popover`,...j,variant:[j.variant,{topLayer:!0}],...k.layerProps,id:T,props:{popover:`auto`,role:`dialog`,...A,tabIndex:-1,...b},children:c})]}):(0,a.jsxs)(a.Fragment,{children:[s(E),w&&(0,a.jsx)(r.default,{contentRef:O,anchor:D,side:m,align:h,offset:g,flip:_,matchWidth:v,component:`popover`,...j,id:T,props:{role:`dialog`,...A,tabIndex:-1,...b},children:c})]})}var s=o;s.displayName=`Popover`,exports.default=s;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../placement.cjs"),r=require("../layer.cjs"),i=require("./overlay.cjs");let a=require("react/jsx-runtime");function o(o){let{trigger:s,children:c,open:l,defaultOpen:u=!1,onOpenChange:d,label:f,labelledBy:p,side:m=`bottom`,align:h=`center`,offset:g=2,flip:_=!0,matchWidth:v=!1,autoFocus:y=!0,props:b,...x}=o,S=t.a(e=>{!y||e.contains(document.activeElement)||e.focus()}),{platform:C,isOpen:w,id:T,trigger:E,triggerElement:D,setPanel:O}=r.t({haspopup:`dialog`,idPrefix:`popover`,id:x.id,open:l,defaultOpen:u,onOpenChange:d,onOpened:S}),k=n.t({side:m,align:h,offset:g,flip:_,matchWidth:v,anchor:D}),A={"aria-label":f,"aria-labelledby":p},j=x;return C?(0,a.jsxs)(a.Fragment,{children:[s(E),(0,a.jsx)(e.default,{ref:O,component:`popover`,...j,variant:[j.variant,{topLayer:!0}],...k.layerProps,id:T,props:{popover:`auto`,role:`dialog`,...A,tabIndex:-1,...b},children:c})]}):(0,a.jsxs)(a.Fragment,{children:[s(E),w&&(0,a.jsx)(i.default,{contentRef:O,anchor:D,side:m,align:h,offset:g,flip:_,matchWidth:v,component:`popover`,...j,id:T,props:{role:`dialog`,...A,tabIndex:-1,...b},children:c})]})}var s=o;s.displayName=`Popover`,exports.default=s;

package/components/popover.mjs

@@ -2,14 +2,14 @@
 import e from "../box.mjs";
 import { a as t } from "../behavior.mjs";
 import { t as n } from "../placement.mjs";
-import r from "./overlay.mjs";
-import { t as i } from "../layer.mjs";
+import { t as r } from "../layer.mjs";
+import i from "./overlay.mjs";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/popover.tsx
 function c(c) {
 	let { trigger: l, children: u, open: d, defaultOpen: f = !1, onOpenChange: p, label: m, labelledBy: h, side: g = "bottom", align: _ = "center", offset: v = 2, flip: y = !0, matchWidth: b = !1, autoFocus: x = !0, props: S, ...C } = c, w = t((e) => {
 		!x || e.contains(document.activeElement) || e.focus();
-	}), { platform: T, isOpen: E, id: D, trigger: O, triggerElement: k, setPanel: A } = i({
+	}), { platform: T, isOpen: E, id: D, trigger: O, triggerElement: k, setPanel: A } = r({
 		haspopup: "dialog",
 		idPrefix: "popover",
 		id: C.id,
@@ -43,7 +43,7 @@ function c(c) {
 			...S
 		},
 		children: u
-	})] }) : /* @__PURE__ */ s(a, { children: [l(O), E && /* @__PURE__ */ o(r, {
+	})] }) : /* @__PURE__ */ s(a, { children: [l(O), E && /* @__PURE__ */ o(i, {
 		contentRef: A,
 		anchor: k,
 		side: g,