@box-kite/react 2.0.1 → 2.2.0

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/markdown.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("./semantics.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);function a(e){let t=/(?:^|\s)language-([\w+-]+)/.exec(e??``);return t?t[1]:``}var o=(e,t)=>function({children:n}){return(0,r.jsx)(e,{component:`markdown.heading`,variant:`level${t}`,children:n})};function s({children:e}){return(0,r.jsx)(t.P,{component:`markdown.paragraph`,children:e})}function c({children:e,href:n,title:i}){return(0,r.jsx)(t.Link,{component:`markdown.link`,props:{href:n,title:i,rel:`noreferrer`},children:e})}function l({children:e}){return(0,r.jsx)(t.Ul,{component:`markdown.list`,children:e})}function u({children:e,start:n}){return(0,r.jsx)(t.Ol,{component:`markdown.list`,variant:{ordered:!0},props:{start:n},children:e})}function d({children:e}){return(0,r.jsx)(t.Li,{component:`markdown.item`,children:e})}function f({children:e}){return(0,r.jsx)(i.default,{tag:`blockquote`,component:`markdown.quote`,children:e})}function p({children:e}){return(0,r.jsx)(i.default,{tag:`code`,component:`markdown.code`,children:e})}function m({children:e}){let t=(0,n.isValidElement)(e)?e.props:void 0,o=a(t?.className);return(0,r.jsxs)(i.default,{tag:`pre`,component:`markdown.codeBlock`,children:[o!==``&&(0,r.jsx)(i.default,{tag:`span`,component:`markdown.codeBlock.language`,children:o}),(0,r.jsx)(i.default,{tag:`code`,component:`markdown.codeBlock.code`,children:t?t.children:e})]})}function h(){return(0,r.jsx)(i.default,{tag:`hr`,component:`markdown.rule`})}function g({src:e,alt:n,title:i}){return(0,r.jsx)(t.Img,{component:`markdown.image`,props:{src:e,alt:n,title:i}})}function _({children:e}){return(0,r.jsx)(i.default,{component:`markdown.tableWrap`,children:(0,r.jsx)(i.default,{tag:`table`,component:`markdown.table`,children:e})})}var v=(e,t)=>function({children:n}){return(0,r.jsx)(i.default,{tag:e,display:t,children:n})};function y({children:e}){return(0,r.jsx)(i.default,{tag:`tr`,component:`markdown.row`,children:e})}var b=(e,t)=>function({children:n}){return(0,r.jsx)(i.default,{tag:e,component:`markdown.cell`,variant:{header:t},children:n})},x=e=>function({children:t}){return(0,r.jsx)(i.default,{tag:e,component:`markdown.inline`,variant:e===`del`?{struck:!0}:{strong:e===`strong`},children:t})};function S({checked:e}){return(0,r.jsx)(i.default,{tag:`input`,component:`markdown.checkbox`,disabled:!0,props:{type:`checkbox`,defaultChecked:e===!0}})}var C={h1:o(t.H1,1),h2:o(t.H2,2),h3:o(t.H3,3),h4:o(t.H4,4),h5:o(t.H5,5),h6:o(t.H6,6),p:s,a:c,ul:l,ol:u,li:d,blockquote:f,code:p,pre:m,hr:h,img:g,table:_,thead:v(`thead`,`table-header-group`),tbody:v(`tbody`,`table-row-group`),tr:y,th:b(`th`,!0),td:b(`td`,!1),strong:x(`strong`),em:x(`em`),del:x(`del`),input:S};exports.default=C,exports.markdownComponents=C;

package/components/markdown.d.ts

@@ -0,0 +1,55 @@
+import { ComponentType, ReactNode } from 'react';
+/**
+ * Box Kite's half of a markdown renderer: the `components` map that `react-markdown`, `streamdown` and
+ * every other renderer built on that shape already takes, with the engine's own classes in it.
+ *
+ * The dependency is deliberately **not** taken. Streamdown — the hardened streaming renderer this would
+ * otherwise wrap — asks a project for a Tailwind `@source` line pointing into its `dist/` and for
+ * shadcn's design tokens in a global stylesheet, which is the one thing this library exists not to need;
+ * and a parser is a choice an app has usually already made. So what ships is the half that is ours, and
+ * it works with whichever renderer is already there.
+ */
+/**
+ * What a renderer hands one of these components. A superset of what any single node uses, which is what
+ * makes the map assignable to `react-markdown`'s own `Components` type without importing it.
+ */
+export interface MarkdownNodeProps {
+    children?: ReactNode;
+    /** A fenced block's `language-ts`, and nothing else the map reads. */
+    className?: string;
+    href?: string;
+    src?: string;
+    alt?: string;
+    title?: string;
+    /** A task list's box. `null` is a list item that is not one. */
+    checked?: boolean | null;
+    /** Where an ordered list starts, when the source said. */
+    start?: number;
+}
+export type MarkdownComponents = Record<string, ComponentType<MarkdownNodeProps>>;
+/**
+ * Markdown rendered with Box components — the map a renderer takes, so an agent's prose is themed,
+ * restylable and needs no stylesheet.
+ *
+ * ```tsx
+ * import Markdown from 'react-markdown';
+ * import { markdownComponents } from '@box-kite/react/components/markdown';
+ *
+ * <Box component="markdown">
+ *   <Markdown components={markdownComponents}>{message}</Markdown>
+ * </Box>
+ * ```
+ *
+ * **It is a constant, not a factory, and that matters while streaming.** A map built inside render is a
+ * new set of component *types* every token, and React unmounts and rebuilds the whole tree for each one.
+ * Override a node by spreading — `{ ...markdownComponents, h1: MyHeading }` — at module scope.
+ *
+ * **Whether a URL is safe is the renderer's**, not this map's: by the time a component is called the href
+ * has already been parsed, so `urlTransform` (react-markdown) or `defaultUrlTransform` (Streamdown) is
+ * where a `javascript:` link is refused. What is set here is `rel="noreferrer"`, which costs nothing.
+ *
+ * Wrapping the renderer in `<Box component="markdown">` is what gives the block its size and colour; the
+ * nodes inherit from it, so restyling the prose is one place.
+ */
+export declare const markdownComponents: MarkdownComponents;
+export default markdownComponents;

package/components/markdown.mjs

@@ -0,0 +1,179 @@
+import { H1 as e, H2 as t, H3 as n, H4 as r, H5 as i, H6 as a, Img as o, Li as s, Link as c, Ol as l, P as u, Ul as d } from "./semantics.mjs";
+import { isValidElement as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import h from "@box-kite/react";
+//#region src/components/markdown.tsx
+function g(e) {
+	let t = /(?:^|\s)language-([\w+-]+)/.exec(e ?? "");
+	return t ? t[1] : "";
+}
+var _ = (e, t) => function({ children: n }) {
+	return /* @__PURE__ */ p(e, {
+		component: "markdown.heading",
+		variant: `level${t}`,
+		children: n
+	});
+};
+function v({ children: e }) {
+	return /* @__PURE__ */ p(u, {
+		component: "markdown.paragraph",
+		children: e
+	});
+}
+function y({ children: e, href: t, title: n }) {
+	return /* @__PURE__ */ p(c, {
+		component: "markdown.link",
+		props: {
+			href: t,
+			title: n,
+			rel: "noreferrer"
+		},
+		children: e
+	});
+}
+function b({ children: e }) {
+	return /* @__PURE__ */ p(d, {
+		component: "markdown.list",
+		children: e
+	});
+}
+function x({ children: e, start: t }) {
+	return /* @__PURE__ */ p(l, {
+		component: "markdown.list",
+		variant: { ordered: !0 },
+		props: { start: t },
+		children: e
+	});
+}
+function S({ children: e }) {
+	return /* @__PURE__ */ p(s, {
+		component: "markdown.item",
+		children: e
+	});
+}
+function C({ children: e }) {
+	return /* @__PURE__ */ p(h, {
+		tag: "blockquote",
+		component: "markdown.quote",
+		children: e
+	});
+}
+function w({ children: e }) {
+	return /* @__PURE__ */ p(h, {
+		tag: "code",
+		component: "markdown.code",
+		children: e
+	});
+}
+function T({ children: e }) {
+	let t = f(e) ? e.props : void 0, n = g(t?.className);
+	return /* @__PURE__ */ m(h, {
+		tag: "pre",
+		component: "markdown.codeBlock",
+		children: [n !== "" && /* @__PURE__ */ p(h, {
+			tag: "span",
+			component: "markdown.codeBlock.language",
+			children: n
+		}), /* @__PURE__ */ p(h, {
+			tag: "code",
+			component: "markdown.codeBlock.code",
+			children: t ? t.children : e
+		})]
+	});
+}
+function E() {
+	return /* @__PURE__ */ p(h, {
+		tag: "hr",
+		component: "markdown.rule"
+	});
+}
+function D({ src: e, alt: t, title: n }) {
+	return /* @__PURE__ */ p(o, {
+		component: "markdown.image",
+		props: {
+			src: e,
+			alt: t,
+			title: n
+		}
+	});
+}
+function O({ children: e }) {
+	return /* @__PURE__ */ p(h, {
+		component: "markdown.tableWrap",
+		children: /* @__PURE__ */ p(h, {
+			tag: "table",
+			component: "markdown.table",
+			children: e
+		})
+	});
+}
+var k = (e, t) => function({ children: n }) {
+	return /* @__PURE__ */ p(h, {
+		tag: e,
+		display: t,
+		children: n
+	});
+};
+function A({ children: e }) {
+	return /* @__PURE__ */ p(h, {
+		tag: "tr",
+		component: "markdown.row",
+		children: e
+	});
+}
+var j = (e, t) => function({ children: n }) {
+	return /* @__PURE__ */ p(h, {
+		tag: e,
+		component: "markdown.cell",
+		variant: { header: t },
+		children: n
+	});
+}, M = (e) => function({ children: t }) {
+	return /* @__PURE__ */ p(h, {
+		tag: e,
+		component: "markdown.inline",
+		variant: e === "del" ? { struck: !0 } : { strong: e === "strong" },
+		children: t
+	});
+};
+function N({ checked: e }) {
+	return /* @__PURE__ */ p(h, {
+		tag: "input",
+		component: "markdown.checkbox",
+		disabled: !0,
+		props: {
+			type: "checkbox",
+			defaultChecked: e === !0
+		}
+	});
+}
+var P = {
+	h1: _(e, 1),
+	h2: _(t, 2),
+	h3: _(n, 3),
+	h4: _(r, 4),
+	h5: _(i, 5),
+	h6: _(a, 6),
+	p: v,
+	a: y,
+	ul: b,
+	ol: x,
+	li: S,
+	blockquote: C,
+	code: w,
+	pre: T,
+	hr: E,
+	img: D,
+	table: O,
+	thead: k("thead", "table-header-group"),
+	tbody: k("tbody", "table-row-group"),
+	tr: A,
+	th: j("th", !0),
+	td: j("td", !1),
+	strong: M("strong"),
+	em: M("em"),
+	del: M("del"),
+	input: N
+};
+//#endregion
+export { P as default, P as markdownComponents };

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,