@box-kite/react 2.2.15 → 2.2.17

package/components/dialog.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("../behavior.cjs"),a=require("../identity.cjs"),o=require("../reporting.cjs"),s=require("./semantics.cjs");let c=require("react"),l=require("react/jsx-runtime");var u=0;function d(r){let{classNames:i,styleElements:a}=t.i({overflow:`hidden`},!1),o=i.slice(1).join(` `);return n.n(()=>{let t=e.n();if(!(!r||!t||!o))return u+=1,t.classList.add(o),()=>{--u,u===0&&t.classList.remove(o)}},[r,o]),a}var f=(0,c.createContext)(null);function p(e){let t=(0,c.useContext)(f);if(!t)throw Error(`<${e}> must be rendered inside a <Dialog>.`);return t}function m(e){return(0,l.jsx)(g,{role:`dialog`,...e})}function h(e){return(0,l.jsx)(g,{role:`alertdialog`,...e,modal:!0,dismissible:!1})}function g(t){let{role:s,trigger:u,children:p,open:m,defaultOpen:h=!1,onOpenChange:g,label:v,labelledBy:y,describedBy:b,modal:x=!0,dismissible:S=!0,lockScroll:C=x,initialFocus:w,props:T,...E}=t,D=a.t(`dialog`),O=E.id??D,[k,A]=o.a({value:m,defaultValue:h,onChange:g,interaction:{component:s===`alertdialog`?`alertDialog`:`dialog`,type:`openChange`}}),[j,M]=(0,c.useState)(null),[N,P]=(0,c.useState)(null),[F,I]=(0,c.useState)(!1),[L,R]=(0,c.useState)({title:0,description:0}),z=d(k&&C);i.n({enabled:k,returnTo:N});let B=(0,c.useCallback)(e=>(R(t=>({...t,[e]:t[e]+1})),()=>R(t=>({...t,[e]:t[e]-1}))),[]),V=(0,c.useMemo)(()=>({titleId:`${O}-title`,descriptionId:`${O}-description`,register:B}),[O,B]);_({dialog:j,isOpen:k,domOpen:F,setDomOpen:I,setOpen:A,modal:x,dismissible:S,triggerElement:N}),n.n(()=>{let t=e.d(w);!k||!t||t.focus()},[k,w]);let H=i.a(e=>{A(e=>!e,{reason:`trigger`,event:e})}),U=(0,c.useMemo)(()=>({ref:P,props:{"aria-expanded":k,"aria-haspopup":`dialog`,"aria-controls":k?O:void 0,onClick:H}}),[O,H,k]),W=E;return(0,l.jsxs)(l.Fragment,{children:[z,u?.(U),(0,l.jsx)(f.Provider,{value:V,children:(0,l.jsx)(r.default,{ref:M,tag:`dialog`,component:`dialog`,...W,id:O,props:{role:s,"aria-label":L.title||y?void 0:v,"aria-labelledby":y??(L.title?V.titleId:void 0),"aria-describedby":b??(L.description?V.descriptionId:void 0),...T},children:p})})]})}function _(t){let{dialog:r,isOpen:a,domOpen:o,setDomOpen:s,setOpen:l,modal:u,dismissible:d,triggerElement:f}=t,p=(0,c.useRef)(`imperative`),m=e.s(),h=d?`any`:`closerequest`;n.n(()=>{!r||a===o||(s(a),a?u?r.showModal():r.show():r.close())},[r,a,o,u,s]),n.n(()=>{if(!r)return;let e=new AbortController;return r.addEventListener(`close`,e=>{s(!1),l(!1,{reason:p.current,event:e}),p.current=`imperative`},{signal:e.signal}),()=>e.abort()},[r,s,l]),n.n(()=>{if(!(!r||!m))return r.setAttribute(`closedby`,h),()=>r.removeAttribute(`closedby`)},[r,m,h]),n.n(()=>{if(!a||!r)return;let t=new AbortController,n=(e,n)=>document.addEventListener(e,n,{signal:t.signal,capture:!0});return n(`keydown`,e=>{e.key===`Escape`&&(p.current=`escape`)}),n(`pointerdown`,t=>{e.f(t,[f])?p.current=`trigger`:!e.f(t,[r])||v(r,t)?p.current=`outside-pointer`:p.current=`imperative`}),()=>t.abort()},[a,r,f]),i.r({enabled:a&&!u&&!m,inside:[r],escapeKey:!0,outsidePointer:!1,onDismiss:(e,t)=>l(!1,{reason:`escape`,event:t})}),n.n(()=>{if(!r||!a||!d||m)return;let t=new AbortController;return document.addEventListener(`pointerdown`,t=>{e.f(t,[f])||e.f(t,[r])&&!v(r,t)||l(!1,{reason:`outside-pointer`,event:t})},{signal:t.signal,capture:!0}),()=>t.abort()},[r,a,d,m,f,l])}function v(e,t){let n=e.getBoundingClientRect();return t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom}function y(e){let t=p(`Dialog.Title`);return n.n(()=>t.register(`title`),[t]),(0,l.jsx)(s.H2,{id:t.titleId,component:`dialog.title`,...e})}function b(e){let t=p(`Dialog.Description`);return n.n(()=>t.register(`description`),[t]),(0,l.jsx)(s.P,{id:t.descriptionId,component:`dialog.description`,...e})}y.displayName=`Dialog.Title`,b.displayName=`Dialog.Description`;var x={Title:y,Description:b},S=Object.assign(m,x),C=Object.assign(h,x);m.displayName=`Dialog`,h.displayName=`AlertDialog`,exports.AlertDialog=C,exports.default=S;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../client.cjs"),r=require("../effects.cjs"),i=require("../box.cjs"),a=require("../behavior.cjs"),o=require("../identity.cjs"),s=require("../reporting.cjs"),c=require("../motion.cjs"),l=require("./semantics.cjs");let u=require("react"),d=require("react/jsx-runtime");var f=0;function p(e){let{classNames:i,styleElements:a}=n.i({overflow:`hidden`},!1),o=i.slice(1).join(` `);return r.n(()=>{let n=t.n();if(!(!e||!n||!o))return f+=1,n.classList.add(o),()=>{--f,f===0&&n.classList.remove(o)}},[e,o]),a}var m=(0,u.createContext)(null);function h(e){let t=(0,u.useContext)(m);if(!t)throw Error(`<${e}> must be rendered inside a <Dialog>.`);return t}function g(e,t){return(0,d.jsx)(v,{role:`dialog`,...e,elementRef:t})}function _(e,t){return(0,d.jsx)(v,{role:`alertdialog`,...e,modal:!0,dismissible:!1,elementRef:t})}function v(e){let{role:n,trigger:l,children:f,open:h,defaultOpen:g=!1,onOpenChange:_,label:v,labelledBy:b,describedBy:x,modal:S=!0,dismissible:C=!0,lockScroll:w=S,initialFocus:T,elementRef:E,props:D,...O}=e,k=o.t(`dialog`),A=O.id??k,[j,M]=s.a({value:h,defaultValue:g,onChange:_,interaction:{component:n===`alertdialog`?`alertDialog`:`dialog`,type:`openChange`}}),[N,P]=(0,u.useState)(null),F=(0,u.useCallback)(e=>{P(e),t.l(E,e)},[E]),[I,L]=(0,u.useState)(null),[R,z]=(0,u.useState)(!1),[B,V]=(0,u.useState)({title:0,description:0}),H=p(j&&w);a.n({enabled:j,returnTo:I});let U=c.t(f,j,N),W=(0,u.useCallback)(e=>(V(t=>({...t,[e]:t[e]+1})),()=>V(t=>({...t,[e]:t[e]-1}))),[]),G=(0,u.useMemo)(()=>({titleId:`${A}-title`,descriptionId:`${A}-description`,register:W}),[A,W]);y({dialog:N,isOpen:j,domOpen:R,setDomOpen:z,setOpen:M,modal:S,dismissible:C,triggerElement:I}),r.n(()=>{let e=t.f(T);!j||!e||e.focus()},[j,T]);let K=a.a(e=>{M(e=>!e,{reason:`trigger`,event:e})}),q=(0,u.useMemo)(()=>({ref:L,props:{"aria-expanded":j,"aria-haspopup":`dialog`,"aria-controls":j?A:void 0,onClick:K}}),[A,K,j]),J=O;return(0,d.jsxs)(d.Fragment,{children:[H,l?.(q),(0,d.jsx)(m.Provider,{value:G,children:(0,d.jsx)(i.default,{ref:F,tag:`dialog`,component:`dialog`,...J,id:A,props:{role:n,"aria-label":B.title||b?void 0:v,"aria-labelledby":b??(B.title?G.titleId:void 0),"aria-describedby":x??(B.description?G.descriptionId:void 0),...D},children:U})})]})}function y(e){let{dialog:n,isOpen:i,domOpen:o,setDomOpen:s,setOpen:c,modal:l,dismissible:d,triggerElement:f}=e,p=(0,u.useRef)(`imperative`),m=t.s(),h=d?`any`:`closerequest`;r.n(()=>{!n||i===o||(s(i),i?l?n.showModal():n.show():n.close())},[n,i,o,l,s]),r.n(()=>{if(!n)return;let e=new AbortController;return n.addEventListener(`close`,e=>{s(!1),c(!1,{reason:p.current,event:e}),p.current=`imperative`},{signal:e.signal}),()=>e.abort()},[n,s,c]),r.n(()=>{if(!(!n||!m))return n.setAttribute(`closedby`,h),()=>n.removeAttribute(`closedby`)},[n,m,h]),r.n(()=>{if(!i||!n)return;let e=new AbortController,r=(t,n)=>document.addEventListener(t,n,{signal:e.signal,capture:!0});return r(`keydown`,e=>{e.key===`Escape`&&(p.current=`escape`)}),r(`pointerdown`,e=>{t.p(e,[f])?p.current=`trigger`:!t.p(e,[n])||b(n,e)?p.current=`outside-pointer`:p.current=`imperative`}),()=>e.abort()},[i,n,f]),a.r({enabled:i&&!l&&!m,inside:[n],escapeKey:!0,outsidePointer:!1,onDismiss:(e,t)=>c(!1,{reason:`escape`,event:t})}),r.n(()=>{if(!n||!i||!d||m)return;let e=new AbortController;return document.addEventListener(`pointerdown`,e=>{t.p(e,[f])||t.p(e,[n])&&!b(n,e)||c(!1,{reason:`outside-pointer`,event:e})},{signal:e.signal,capture:!0}),()=>e.abort()},[n,i,d,m,f,c])}function b(e,t){let n=e.getBoundingClientRect();return t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom}function x(e){let t=h(`Dialog.Title`);return r.n(()=>t.register(`title`),[t]),(0,d.jsx)(l.H2,{id:t.titleId,component:`dialog.title`,...e})}function S(e){let t=h(`Dialog.Description`);return r.n(()=>t.register(`description`),[t]),(0,d.jsx)(l.P,{id:t.descriptionId,component:`dialog.description`,...e})}x.displayName=`Dialog.Title`,S.displayName=`Dialog.Description`;var C={Title:x,Description:S},w=Object.assign(e.f(g,`Dialog`),C),T=Object.assign(e.f(_,`AlertDialog`),C);exports.AlertDialog=T,exports.default=w;

package/components/dialog.d.ts

@@ -70,68 +70,6 @@ export type AlertDialogProps<TKey extends keyof ComponentsAndVariants = 'dialog'
 export type DialogTitleProps<TKey extends keyof ComponentsAndVariants = 'dialog.title'> = BoxProps<'h2', TKey>;
 /** Every Box prop, on a `<p>`. */
 export type DialogDescriptionProps<TKey extends keyof ComponentsAndVariants = 'dialog.description'> = BoxProps<'p', TKey>;
-/**
- * A modal dialog on the platform's own `<dialog>`: `showModal()` supplies the top layer, the
- * `::backdrop`, an inert page behind it, Escape, focus containment and focus return — so none of that is
- * written here.
- *
- * ```tsx
- * <Dialog trigger={(t) => <Button {...t}>Rename</Button>}>
- *   <Dialog.Title>Rename this view</Dialog.Title>
- *   <Textbox label="Name" />
- * </Dialog>
- * ```
- *
- * **The dialog is always rendered**, and closed means `display: none` — the same shape as `<Popover>`, and
- * what lets the browser own show and hide. The exit is therefore a plain CSS transition rather than a
- * `<Presence>`, since nothing unmounts; content that is expensive to render should be gated by the
- * consumer with `{open && <Heavy />}`.
- *
- * **A close cannot be refused.** The `cancel` event is cancelable, but by the time `onOpenChange` runs the
- * browser has closed the dialog, so a controlled `<Dialog open>` hears about a dismissal afterwards and
- * keeping `open` true re-shows it. Say `dismissible={false}` to make a decision unavoidable instead, which
- * is what `<AlertDialog>` does.
- *
- * **Nothing is portalled**, so the theme, the custom properties, the text direction and the tab order
- * around the declaration all reach inside — a top-layer element inherits normally (measured in Chrome
- * 152, with a local `Box.Theme` wrapper around the dialog).
- *
- * A non-modal dialog (`modal={false}`) is `show()`: no top layer, no backdrop, nothing inert, and the UA
- * positions it against its containing block rather than the viewport. It is the right shape for a
- * persistent panel; for one anchored to a trigger, reach for `<Popover>`.
- *
- * @a11y `role="dialog"` (`alertdialog` on `<AlertDialog>`), named by a `Dialog.Title`, `label` or
- * `labelledBy`, and described by a `Dialog.Description` or `describedBy`.
- * @a11y The trigger carries `aria-haspopup="dialog"`, `aria-expanded` and `aria-controls`.
- * @a11y Focus is contained while a modal dialog is open and returns to the trigger when it closes, both
- * from the platform. `initialFocus` is what an alert dialog needs to land on its least destructive action.
- * @keyboard Escape — Closes it, from anywhere inside, and returns focus to the trigger.
- * @keyboard Tab — Cycles focus inside a modal dialog and never leaves it; in a non-modal one it moves on.
- * @keyboard Enter, Space — On the trigger, opens the dialog.
- */
-declare function DialogImpl<TKey extends keyof ComponentsAndVariants = 'dialog'>(props: DialogProps<TKey>): import("react").JSX.Element;
-/**
- * A dialog that interrupts to ask something: `role="alertdialog"`, always modal, and **never dismissed by
- * a press outside**, because a decision that can be clicked away is one the user did not make.
- *
- * ```tsx
- * <AlertDialog trigger={(t) => <Button {...t}>Delete</Button>} initialFocus={cancelRef}>
- *   <AlertDialog.Title>Delete this view?</AlertDialog.Title>
- *   <AlertDialog.Description>Nothing here can be undone.</AlertDialog.Description>
- *   <Button ref={cancelRef}>Cancel</Button>
- * </AlertDialog>
- * ```
- *
- * Escape still closes it — a keyboard user must always have a way out (APG), and the platform's own close
- * request is that way. `initialFocus` is what puts focus on the least destructive action.
- *
- * @a11y `role="alertdialog"`, which tells a screen reader the content is an alert rather than a panel, so
- * the name and description are announced together on open.
- * @a11y A press outside is ignored on purpose; Escape is not, so the dialog is never a trap.
- * @keyboard Escape — Closes it and returns focus to the trigger.
- * @keyboard Tab — Cycles focus inside it and never leaves.
- */
-declare function AlertDialogImpl<TKey extends keyof ComponentsAndVariants = 'dialog'>(props: AlertDialogProps<TKey>): import("react").JSX.Element;
 /**
  * The dialog's heading, and what names it: rendering one is what puts `aria-labelledby` on the dialog, so
  * a name and a visible title cannot drift apart. An `<h2>` by default — `tag` takes any of the six.
@@ -139,11 +77,11 @@ declare function AlertDialogImpl<TKey extends keyof ComponentsAndVariants = 'dia
 declare function DialogTitle<TKey extends keyof ComponentsAndVariants = 'dialog.title'>(props: DialogTitleProps<TKey>): import("react").JSX.Element;
 /** The dialog's supporting text, and what describes it: rendering one puts `aria-describedby` on the dialog. */
 declare function DialogDescription<TKey extends keyof ComponentsAndVariants = 'dialog.description'>(props: DialogDescriptionProps<TKey>): import("react").JSX.Element;
-declare const Dialog: typeof DialogImpl & {
+declare const Dialog: (<TKey extends keyof ComponentsAndVariants = "dialog">(props: DialogProps<TKey>) => React.ReactNode) & {
     Title: typeof DialogTitle;
     Description: typeof DialogDescription;
 };
-declare const AlertDialog: typeof AlertDialogImpl & {
+declare const AlertDialog: (<TKey extends keyof ComponentsAndVariants = "dialog">(props: AlertDialogProps<TKey>) => React.ReactNode) & {
     Title: typeof DialogTitle;
     Description: typeof DialogDescription;
 };

package/components/dialog.mjs

@@ -1,160 +1,166 @@
 "use client";
-import { d as e, f as t, n, s as r } from "../platform.mjs";
-import { i } from "../client.mjs";
-import { n as a } from "../effects.mjs";
-import o from "../box.mjs";
-import { a as s, n as c, r as l } from "../behavior.mjs";
-import { t as u } from "../identity.mjs";
-import { a as d } from "../reporting.mjs";
-import { H2 as f, P as p } from "./semantics.mjs";
-import { createContext as m, useCallback as h, useContext as g, useMemo as _, useRef as v, useState as y } from "react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { f as e } from "../react-shared.mjs";
+import { f as t, l as n, n as r, p as i, s as a } from "../platform.mjs";
+import { i as o } from "../client.mjs";
+import { n as s } from "../effects.mjs";
+import c from "../box.mjs";
+import { a as l, n as u, r as d } from "../behavior.mjs";
+import { t as f } from "../identity.mjs";
+import { a as p } from "../reporting.mjs";
+import { t as m } from "../motion.mjs";
+import { H2 as h, P as g } from "./semantics.mjs";
+import { createContext as _, useCallback as v, useContext as y, useMemo as b, useRef as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/react/dialog/useScrollLock.ts
-var C = 0;
-function w(e) {
-	let { classNames: t, styleElements: r } = i({ overflow: "hidden" }, !1), o = t.slice(1).join(" ");
-	return a(() => {
-		let t = n();
-		if (!(!e || !t || !o)) return C += 1, t.classList.add(o), () => {
-			--C, C === 0 && t.classList.remove(o);
+var E = 0;
+function D(e) {
+	let { classNames: t, styleElements: n } = o({ overflow: "hidden" }, !1), i = t.slice(1).join(" ");
+	return s(() => {
+		let t = r();
+		if (!(!e || !t || !i)) return E += 1, t.classList.add(i), () => {
+			--E, E === 0 && t.classList.remove(i);
 		};
-	}, [e, o]), r;
+	}, [e, i]), n;
 }
 //#endregion
 //#region src/components/dialog.tsx
-var T = m(null);
-function E(e) {
-	let t = g(T);
+var O = _(null);
+function k(e) {
+	let t = y(O);
 	if (!t) throw Error(`<${e}> must be rendered inside a <Dialog>.`);
 	return t;
 }
-function D(e) {
-	return /* @__PURE__ */ x(k, {
+function A(e, t) {
+	return /* @__PURE__ */ w(M, {
 		role: "dialog",
-		...e
+		...e,
+		elementRef: t
 	});
 }
-function O(e) {
-	return /* @__PURE__ */ x(k, {
+function j(e, t) {
+	return /* @__PURE__ */ w(M, {
 		role: "alertdialog",
 		...e,
 		modal: !0,
-		dismissible: !1
+		dismissible: !1,
+		elementRef: t
 	});
 }
-function k(t) {
-	let { role: n, trigger: r, children: i, open: l, defaultOpen: f = !1, onOpenChange: p, label: m, labelledBy: g, describedBy: v, modal: C = !0, dismissible: E = !0, lockScroll: D = C, initialFocus: O, props: k, ...j } = t, M = u("dialog"), N = j.id ?? M, [P, F] = d({
-		value: l,
-		defaultValue: f,
-		onChange: p,
+function M(e) {
+	let { role: r, trigger: i, children: a, open: o, defaultOpen: d = !1, onOpenChange: h, label: g, labelledBy: _, describedBy: y, modal: x = !0, dismissible: E = !0, lockScroll: k = x, initialFocus: A, elementRef: j, props: M, ...P } = e, F = f("dialog"), I = P.id ?? F, [L, R] = p({
+		value: o,
+		defaultValue: d,
+		onChange: h,
 		interaction: {
-			component: n === "alertdialog" ? "alertDialog" : "dialog",
+			component: r === "alertdialog" ? "alertDialog" : "dialog",
 			type: "openChange"
 		}
-	}), [I, L] = y(null), [R, z] = y(null), [B, V] = y(!1), [H, U] = y({
+	}), [z, B] = S(null), V = v((e) => {
+		B(e), n(j, e);
+	}, [j]), [H, U] = S(null), [W, G] = S(!1), [K, q] = S({
 		title: 0,
 		description: 0
-	}), W = w(P && D);
-	c({
-		enabled: P,
-		returnTo: R
+	}), J = D(L && k);
+	u({
+		enabled: L,
+		returnTo: H
 	});
-	let G = h((e) => (U((t) => ({
+	let Y = m(a, L, z), X = v((e) => (q((t) => ({
 		...t,
 		[e]: t[e] + 1
-	})), () => U((t) => ({
+	})), () => q((t) => ({
 		...t,
 		[e]: t[e] - 1
-	}))), []), K = _(() => ({
-		titleId: `${N}-title`,
-		descriptionId: `${N}-description`,
-		register: G
-	}), [N, G]);
-	A({
-		dialog: I,
-		isOpen: P,
-		domOpen: B,
-		setDomOpen: V,
-		setOpen: F,
-		modal: C,
+	}))), []), Z = b(() => ({
+		titleId: `${I}-title`,
+		descriptionId: `${I}-description`,
+		register: X
+	}), [I, X]);
+	N({
+		dialog: z,
+		isOpen: L,
+		domOpen: W,
+		setDomOpen: G,
+		setOpen: R,
+		modal: x,
 		dismissible: E,
-		triggerElement: R
-	}), a(() => {
-		let t = e(O);
-		!P || !t || t.focus();
-	}, [P, O]);
-	let q = s((e) => {
-		F((e) => !e, {
+		triggerElement: H
+	}), s(() => {
+		let e = t(A);
+		!L || !e || e.focus();
+	}, [L, A]);
+	let Q = l((e) => {
+		R((e) => !e, {
 			reason: "trigger",
 			event: e
 		});
-	}), J = _(() => ({
-		ref: z,
+	}), $ = b(() => ({
+		ref: U,
 		props: {
-			"aria-expanded": P,
+			"aria-expanded": L,
 			"aria-haspopup": "dialog",
-			"aria-controls": P ? N : void 0,
-			onClick: q
+			"aria-controls": L ? I : void 0,
+			onClick: Q
 		}
 	}), [
-		N,
-		q,
-		P
-	]), Y = j;
-	return /* @__PURE__ */ S(b, { children: [
-		W,
-		r?.(J),
-		/* @__PURE__ */ x(T.Provider, {
-			value: K,
-			children: /* @__PURE__ */ x(o, {
-				ref: L,
+		I,
+		Q,
+		L
+	]), ee = P;
+	return /* @__PURE__ */ T(C, { children: [
+		J,
+		i?.($),
+		/* @__PURE__ */ w(O.Provider, {
+			value: Z,
+			children: /* @__PURE__ */ w(c, {
+				ref: V,
 				tag: "dialog",
 				component: "dialog",
-				...Y,
-				id: N,
+				...ee,
+				id: I,
 				props: {
-					role: n,
-					"aria-label": H.title || g ? void 0 : m,
-					"aria-labelledby": g ?? (H.title ? K.titleId : void 0),
-					"aria-describedby": v ?? (H.description ? K.descriptionId : void 0),
-					...k
+					role: r,
+					"aria-label": K.title || _ ? void 0 : g,
+					"aria-labelledby": _ ?? (K.title ? Z.titleId : void 0),
+					"aria-describedby": y ?? (K.description ? Z.descriptionId : void 0),
+					...M
 				},
-				children: i
+				children: Y
 			})
 		})
 	] });
 }
-function A(e) {
-	let { dialog: n, isOpen: i, domOpen: o, setDomOpen: s, setOpen: c, modal: u, dismissible: d, triggerElement: f } = e, p = v("imperative"), m = r(), h = d ? "any" : "closerequest";
-	a(() => {
-		!n || i === o || (s(i), i ? u ? n.showModal() : n.show() : n.close());
+function N(e) {
+	let { dialog: t, isOpen: n, domOpen: r, setDomOpen: o, setOpen: c, modal: l, dismissible: u, triggerElement: f } = e, p = x("imperative"), m = a(), h = u ? "any" : "closerequest";
+	s(() => {
+		!t || n === r || (o(n), n ? l ? t.showModal() : t.show() : t.close());
 	}, [
+		t,
 		n,
-		i,
-		o,
-		u,
-		s
-	]), a(() => {
-		if (!n) return;
+		r,
+		l,
+		o
+	]), s(() => {
+		if (!t) return;
 		let e = new AbortController();
-		return n.addEventListener("close", (e) => {
-			s(!1), c(!1, {
+		return t.addEventListener("close", (e) => {
+			o(!1), c(!1, {
 				reason: p.current,
 				event: e
 			}), p.current = "imperative";
 		}, { signal: e.signal }), () => e.abort();
 	}, [
-		n,
-		s,
+		t,
+		o,
 		c
-	]), a(() => {
-		if (!(!n || !m)) return n.setAttribute("closedby", h), () => n.removeAttribute("closedby");
+	]), s(() => {
+		if (!(!t || !m)) return t.setAttribute("closedby", h), () => t.removeAttribute("closedby");
 	}, [
-		n,
+		t,
 		m,
 		h
-	]), a(() => {
-		if (!i || !n) return;
+	]), s(() => {
+		if (!n || !t) return;
 		let e = new AbortController(), r = (t, n) => document.addEventListener(t, n, {
 			signal: e.signal,
 			capture: !0
@@ -162,26 +168,26 @@ function A(e) {
 		return r("keydown", (e) => {
 			e.key === "Escape" && (p.current = "escape");
 		}), r("pointerdown", (e) => {
-			t(e, [f]) ? p.current = "trigger" : !t(e, [n]) || j(n, e) ? p.current = "outside-pointer" : p.current = "imperative";
+			i(e, [f]) ? p.current = "trigger" : !i(e, [t]) || P(t, e) ? p.current = "outside-pointer" : p.current = "imperative";
 		}), () => e.abort();
 	}, [
-		i,
 		n,
+		t,
 		f
-	]), l({
-		enabled: i && !u && !m,
-		inside: [n],
+	]), d({
+		enabled: n && !l && !m,
+		inside: [t],
 		escapeKey: !0,
 		outsidePointer: !1,
 		onDismiss: (e, t) => c(!1, {
 			reason: "escape",
 			event: t
 		})
-	}), a(() => {
-		if (!n || !i || !d || m) return;
+	}), s(() => {
+		if (!t || !n || !u || m) return;
 		let e = new AbortController();
 		return document.addEventListener("pointerdown", (e) => {
-			t(e, [f]) || t(e, [n]) && !j(n, e) || c(!1, {
+			i(e, [f]) || i(e, [t]) && !P(t, e) || c(!1, {
 				reason: "outside-pointer",
 				event: e
 			});
@@ -190,39 +196,38 @@ function A(e) {
 			capture: !0
 		}), () => e.abort();
 	}, [
+		t,
 		n,
-		i,
-		d,
+		u,
 		m,
 		f,
 		c
 	]);
 }
-function j(e, t) {
+function P(e, t) {
 	let n = e.getBoundingClientRect();
 	return t.clientX < n.left || t.clientX > n.right || t.clientY < n.top || t.clientY > n.bottom;
 }
-function M(e) {
-	let t = E("Dialog.Title");
-	return a(() => t.register("title"), [t]), /* @__PURE__ */ x(f, {
+function F(e) {
+	let t = k("Dialog.Title");
+	return s(() => t.register("title"), [t]), /* @__PURE__ */ w(h, {
 		id: t.titleId,
 		component: "dialog.title",
 		...e
 	});
 }
-function N(e) {
-	let t = E("Dialog.Description");
-	return a(() => t.register("description"), [t]), /* @__PURE__ */ x(p, {
+function I(e) {
+	let t = k("Dialog.Description");
+	return s(() => t.register("description"), [t]), /* @__PURE__ */ w(g, {
 		id: t.descriptionId,
 		component: "dialog.description",
 		...e
 	});
 }
-M.displayName = "Dialog.Title", N.displayName = "Dialog.Description";
-var P = {
-	Title: M,
-	Description: N
-}, F = Object.assign(D, P), I = Object.assign(O, P);
-D.displayName = "Dialog", O.displayName = "AlertDialog";
+F.displayName = "Dialog.Title", I.displayName = "Dialog.Description";
+var L = {
+	Title: F,
+	Description: I
+}, R = Object.assign(e(A, "Dialog"), L), z = Object.assign(e(j, "AlertDialog"), L);
 //#endregion
-export { I as AlertDialog, F as default };
+export { z as AlertDialog, 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"),t=require("../reporting.cjs");let n=require("react"),r=require("react/jsx-runtime");var i;(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}})(i||={});var a=i;function o(i){let{onSubmit:o,props:s,...c}=i,l=(0,n.useRef)(null),u=t.i(`form`),d=(0,n.useCallback)(e=>{e.preventDefault();let t=a.getFormEntries(l.current);o(t,e),u(`submit`,Object.keys(t),{reason:`submit`,event:e})},[o,u]),f={...s,onSubmit:d,ref:l};return(0,r.jsx)(e.default,{tag:`form`,...c,props:f})}o.displayName=`Form`,exports.default=o;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../reporting.cjs");let i=require("react");var a;(function(e){function t(e){if(!e)throw Error(`[box-kite] <Form> read its entries with no <form> element: its ref never reached the element.`);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}})(a||={});var o=a;function s(e,a){let{onSubmit:s,props:c,...l}=e,u=(0,i.useRef)(null),d=r.i(`form`),{ref:f,...p}=c??{},m=(0,i.useCallback)(e=>{u.current=e,t.l(a,e),t.l(f,e)},[a,f]),h=(0,i.useCallback)(e=>{e.preventDefault();let t=o.getFormEntries(u.current??e.currentTarget);s(t,e),d(`submit`,Object.keys(t),{reason:`submit`,event:e})},[s,d]);return n.useBoxElement({tag:`form`,...l,props:{...p,onSubmit:h}},m)}var c=e.f(s,`Form`);exports.default=c;

package/components/form.d.ts

@@ -1,10 +1,11 @@
+import { RefAttributes } from 'react';
 import { BoxProps } from '../box';
 import { OmitTagProps } from '../react/boxProps';
 type BoxTagProps = Required<BoxProps<'form'>>['props'];
-type FormTagProps = OmitTagProps<BoxTagProps, 'onSubmit' | 'ref'>;
+type FormTagProps = OmitTagProps<BoxTagProps, 'onSubmit'>;
 interface Props<T> extends Omit<BoxProps<'form'>, 'props' | 'tag'> {
     props?: FormTagProps;
     onSubmit: (obj: T, e: React.ChangeEvent<HTMLFormElement>) => void;
 }
-export default function Form<T>(props: Props<T>): import("react").JSX.Element;
-export {};
+declare const _default: <T>(props: Props<T> & RefAttributes<HTMLFormElement>) => React.ReactNode;
+export default _default;

package/components/form.mjs

@@ -1,12 +1,14 @@
 "use client";
-import e from "../box.mjs";
-import { i as t } from "../reporting.mjs";
-import { useCallback as n, useRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+import { f as e } from "../react-shared.mjs";
+import { l as t } from "../platform.mjs";
+import { useBoxElement as n } from "../box.mjs";
+import { i as r } from "../reporting.mjs";
+import { useCallback as i, useRef as a } from "react";
 //#region src/utils/form/formUtils.ts
-var a;
+var o;
 (function(e) {
 	function t(e) {
+		if (!e) throw Error("[box-kite] <Form> read its entries with no <form> element: its ref never reached the element.");
 		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;
@@ -34,29 +36,30 @@ var a;
 			});
 		} else e[t] = n;
 	}
-})(a ||= {});
-var o = a;
+})(o ||= {});
+var s = o;
 //#endregion
 //#region src/components/form.tsx
-function s(a) {
-	let { onSubmit: s, props: c, ...l } = a, u = r(null), d = t("form"), f = n((e) => {
+function c(e, o) {
+	let { onSubmit: c, props: l, ...u } = e, d = a(null), f = r("form"), { ref: p, ...m } = l ?? {}, h = i((e) => {
+		d.current = e, t(o, e), t(p, e);
+	}, [o, p]), g = i((e) => {
 		e.preventDefault();
-		let t = o.getFormEntries(u.current);
-		s(t, e), d("submit", Object.keys(t), {
+		let t = s.getFormEntries(d.current ?? e.currentTarget);
+		c(t, e), f("submit", Object.keys(t), {
 			reason: "submit",
 			event: e
 		});
-	}, [s, d]), p = {
-		...c,
-		onSubmit: f,
-		ref: u
-	};
-	return /* @__PURE__ */ i(e, {
+	}, [c, f]);
+	return n({
 		tag: "form",
-		...l,
-		props: p
-	});
+		...u,
+		props: {
+			...m,
+			onSubmit: g
+		}
+	}, h);
 }
-s.displayName = "Form";
+var l = e(c, "Form");
 //#endregion
-export { s as default };
+export { l 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("../reporting.cjs"),c=require("../layer.cjs"),l=require("./overlay.cjs");let u=require("react"),d=require("react/jsx-runtime");var f;(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})(f||={});var p=f,m=(0,u.createContext)(null);function h(e){let t=(0,u.useContext)(m);if(!t)throw Error(`<${e}> must be rendered inside a <Menu>.`);return t}function g(e){let[t,n]=(0,u.useState)([]);return{panels:t,registerLayer:(0,u.useCallback)(t=>{n(e=>[...e,t]);let r=e?.(t);return()=>{n(e=>e.filter(e=>e!==t)),r?.()}},[e])}}var _=(0,u.createContext)(null);function v(e){let{trigger:t,children:n,open:i,defaultOpen:a=!1,onOpenChange:o,label:s,labelledBy:l,side:f=`bottom`,align:h=`start`,offset:_=1,flip:v=!0,matchWidth:b=!1,props:x,...S}=e,C=(0,u.useRef)(`first`),w=r.a(e=>{let t=p.items(e),n=C.current===`last`?t[t.length-1]:t[0];C.current=`first`,(n??e).focus()}),{panels:T,registerLayer:E}=g(),D=c.t({haspopup:`menu`,idPrefix:`menu`,id:S.id,open:i,defaultOpen:a,onOpenChange:o,interaction:{component:`menu`,type:`openChange`},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,u.useMemo)(()=>({ref:D.trigger.ref,props:{...D.trigger.props,onKeyDown:O}}),[O,D.trigger]),A=r.a(e=>D.setOpen(!1,e)),j=(0,u.useMemo)(()=>({open:D.isOpen,closeAll:A,registerLayer:E}),[A,D.isOpen,E]);return(0,d.jsxs)(d.Fragment,{children:[t(k),(0,d.jsx)(m.Provider,{value:j,children:(0,d.jsx)(y,{layer:D,side:f,align:h,offset:_,flip:v,matchWidth:b,label:s,labelledBy:l??(s?void 0:D.triggerId),contentProps:x,...S,children:n})})]})}function y(t){let{layer:i,side:s,align:c,offset:f,flip:m,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=h(`Menu`),k=(0,u.useRef)({query:``,at:0}),A=o.t({side:s,align:c,offset:f,flip:m,matchWidth:g,anchor:E}),j={role:`menu`,"aria-label":_,"aria-labelledby":v,tabIndex:-1,onKeyDown:r.a(t=>{let n=t.currentTarget;if(!p.owns(n,t.target))return;let r=p.items(n),i=r.indexOf(document.activeElement),o=e=>{e&&(t.preventDefault(),e.focus())},s=e.p(n)?`ArrowRight`:`ArrowLeft`;switch(t.key){case`ArrowDown`:return o(p.step(r,i,1));case`ArrowUp`:return o(p.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(p.typeaheadTarget(r,e,i))}}),onPointerOver:r.a(e=>{let t=e.currentTarget,n=e.target?.closest(p.ITEM_SELECTOR);!n||!p.owns(t,n)||n===document.activeElement||n.focus()}),...y};return C?(0,d.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,d.jsx)(l.default,{contentRef:D,anchor:E,side:s,align:c,offset:f,flip:m,matchWidth:g,component:`menu`,...S,id:T,props:j,children:x}):null}function b(a){let{label:o,children:l,disabled:f,side:_=`end`,align:v=`start`,offset:b=0,flip:S=!0,itemProps:C,props:w,...T}=a,E=h(`Menu.Sub`),D=i.t(`menu-sub`),O=r.a(e=>{(p.items(e)[0]??e).focus()}),k=r.a((e,t)=>{e&&t?.focus()}),{panels:A,registerLayer:j}=g(E.registerLayer),M=s.i(`menu.sub`),N=c.t({haspopup:`menu`,idPrefix:`menu-sub`,id:T.id,onOpened:O,onClosing:k,inside:A});t.n(()=>{if(!(!N.isOpen||!N.panelElement))return E.registerLayer(N.panelElement)},[N.isOpen,N.panelElement,E.registerLayer]),t.n(()=>{E.open||N.setOpen(!1,{reason:`imperative`})},[E.open,N.setOpen]),t.n(()=>{if(!N.isOpen)return;let t=new AbortController;return document.addEventListener(`focusin`,t=>{e.f(t,[N.panelElement,N.triggerElement])||N.setOpen(!1,{reason:`imperative`,event:t})},{signal:t.signal}),()=>t.abort()},[N.isOpen,N.panelElement,N.triggerElement,N.setOpen]);let P=r.a(t=>{let n=e.p(t.currentTarget)?`ArrowLeft`:`ArrowRight`;f||t.key!==n||(t.preventDefault(),N.setOpen(!0,{reason:`trigger`,event:t}),M(`openChange`,!0,{reason:`keyboard`,event:t,item:x(o)}))}),F=r.a(e=>{f||N.setOpen(!0,{reason:`trigger`,event:e})}),I=(0,u.useMemo)(()=>({open:N.isOpen,closeAll:E.closeAll,registerLayer:j}),[N.isOpen,E.closeAll,j]);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(n.default,{tag:`button`,ref:f?void 0:N.trigger.ref,component:`menu.item`,variant:{sub:!0},id:D,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":f||void 0,...N.trigger.props,...C,onKeyDown:P,onPointerEnter:F},children:[o,(0,d.jsx)(n.default,{component:`menu.arrow`})]}),!f&&(0,d.jsx)(m.Provider,{value:I,children:(0,d.jsx)(y,{layer:N,side:_,align:v,offset:b,flip:S,matchWidth:!1,labelledBy:D,contentProps:w,closeSelf:e=>N.setOpen(!1,e),...T,children:l})})]})}var x=(e,t)=>t??(typeof e==`string`?e:void 0);function S(e){let{onSelect:t,disabled:i,closeOnSelect:a=!0,value:o,props:c,children:l,...u}=e,f=h(`Menu.Item`),p=s.i(`menu.item`),m=r.a(e=>{i||(t?.(e),p(`select`,x(l,o),{reason:`select`,event:e}),a&&f.closeAll({reason:`select`,event:e}))});return(0,d.jsx)(n.default,{tag:`button`,component:`menu.item`,...u,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":i||void 0,...c,onClick:m},children:l})}function C(e){let{checked:t,defaultChecked:i=!1,onCheckedChange:a,disabled:o,closeOnSelect:c=!1,value:l,props:u,children:f,...p}=e,m=h(`Menu.CheckboxItem`),[g,_]=r.i({value:t,defaultValue:i,onChange:a}),v=s.i(`menu.checkboxItem`),y=r.a(e=>{o||(_(!g,{reason:`select`,event:e}),v(`checkedChange`,!g,{reason:`select`,event:e,item:x(f,l)}),c&&m.closeAll({reason:`select`,event:e}))});return(0,d.jsxs)(n.default,{tag:`button`,component:`menu.item`,...p,props:{type:`button`,role:`menuitemcheckbox`,tabIndex:-1,"aria-checked":g,"aria-disabled":o||void 0,...u,onClick:y},children:[(0,d.jsx)(n.default,{component:`menu.indicator`,children:g&&(0,d.jsx)(n.default,{component:`menu.check`})}),f]})}function w(e){let{label:t,value:n,defaultValue:i=``,onValueChange:a,children:o,...c}=e,[l,f]=s.a({value:n,defaultValue:i,onChange:a,interaction:{component:`menu.radioGroup`,type:`valueChange`}}),p=r.a((e,t)=>f(e,{reason:`select`,event:t})),m=(0,u.useMemo)(()=>({value:l,select:p}),[l,p]);return(0,d.jsx)(_.Provider,{value:m,children:(0,d.jsx)(E,{label:t,...c,children:o})})}function T(e){let{value:t,disabled:i,closeOnSelect:a=!1,props:o,children:s,...c}=e,l=h(`Menu.RadioItem`),f=(0,u.useContext)(_);if(!f)throw Error(`<Menu.RadioItem> must be rendered inside a <Menu.RadioGroup>.`);let p=f.value===t,m=r.a(e=>{i||(f.select(t,e),a&&l.closeAll({reason:`select`,event:e}))});return(0,d.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:m},children:[(0,d.jsx)(n.default,{component:`menu.indicator`,children:p&&(0,d.jsx)(n.default,{component:`menu.dot`})}),s]})}function E(e){let{label:t,props:r,children:a,...o}=e,s=i.t(`menu-group`);return(0,d.jsxs)(n.default,{component:`menu.group`,...o,props:{role:`group`,"aria-labelledby":t?s:void 0,...r},children:[t&&(0,d.jsx)(n.default,{component:`menu.label`,id:s,props:{role:`presentation`},children:t}),a]})}function D(e){let{props:t,...r}=e;return(0,d.jsx)(n.default,{component:`menu.separator`,...r,props:{role:`separator`,...t}})}S.displayName=`Menu.Item`,C.displayName=`Menu.CheckboxItem`,w.displayName=`Menu.RadioGroup`,T.displayName=`Menu.RadioItem`,E.displayName=`Menu.Group`,D.displayName=`Menu.Separator`,b.displayName=`Menu.Sub`;var O=Object.assign(v,{Item:S,CheckboxItem:C,RadioGroup:w,RadioItem:T,Group:E,Separator:D,Sub:b});v.displayName=`Menu`,exports.default=O;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../behavior.cjs"),a=require("../identity.cjs"),o=require("../keyboard.cjs"),s=require("../placement.cjs"),c=require("../reporting.cjs"),l=require("../layer.cjs"),u=require("./overlay.cjs"),d=require("../motion.cjs");let f=require("react"),p=require("react/jsx-runtime");var m;(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 a(e){return e.getAttribute(`aria-haspopup`)===`menu`}e.isSubTrigger=a;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=o.t.target(t,n,e.length,t=>e[t].textContent??``);return r<0?void 0:e[r]}e.typeaheadTarget=c})(m||={});var h=m,g=(0,f.createContext)(null);function _(e){let t=(0,f.useContext)(g);if(!t)throw Error(`<${e}> must be rendered inside a <Menu>.`);return t}function v(e){let[t,n]=(0,f.useState)([]);return{panels:t,registerLayer:(0,f.useCallback)(t=>{n(e=>[...e,t]);let r=e?.(t);return()=>{n(e=>e.filter(e=>e!==t)),r?.()}},[e])}}var y=(0,f.createContext)(null);function b(e,t){let{trigger:n,children:r,open:a,defaultOpen:o=!1,onOpenChange:s,label:c,labelledBy:u,side:d=`bottom`,align:m=`start`,offset:_=1,flip:y=!0,matchWidth:b=!1,props:S,...C}=e,w=(0,f.useRef)(`first`),T=i.a(e=>{let t=h.items(e),n=w.current===`last`?t[t.length-1]:t[0];w.current=`first`,(n??e).focus()}),{panels:E,registerLayer:D}=v(),O=l.t({haspopup:`menu`,idPrefix:`menu`,id:C.id,open:a,defaultOpen:o,onOpenChange:s,interaction:{component:`menu`,type:`openChange`},onOpened:T,inside:E}),k=i.a(e=>{(e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),w.current=e.key===`ArrowUp`?`last`:`first`,O.isOpen&&O.panelElement?T(O.panelElement):O.setOpen(!0,{reason:`trigger`,event:e}))}),A=(0,f.useMemo)(()=>({ref:O.trigger.ref,props:{...O.trigger.props,onKeyDown:k}}),[k,O.trigger]),j=i.a(e=>O.setOpen(!1,e)),M=(0,f.useMemo)(()=>({open:O.isOpen,closeAll:j,registerLayer:D}),[j,O.isOpen,D]);return(0,p.jsxs)(p.Fragment,{children:[n(A),(0,p.jsx)(g.Provider,{value:M,children:(0,p.jsx)(x,{layer:O,side:d,align:m,offset:_,flip:y,matchWidth:b,label:c,labelledBy:u??(c?void 0:O.triggerId),contentProps:S,...C,elementRef:t,children:r})})]})}function x(e){let{layer:n,side:a,align:c,offset:l,flip:m,matchWidth:g,label:v,labelledBy:y,contentProps:b,closeSelf:x,elementRef:S,children:C,...w}=e,{platform:T,isOpen:E,id:D,triggerElement:O,setPanel:k}=n,A=(0,f.useCallback)(e=>{k(e),t.l(S,e)},[k,S]),j=_(`Menu`),M=(0,f.useRef)({query:``,at:0}),N=s.t({side:a,align:c,offset:l,flip:m,matchWidth:g,anchor:O}),P=d.t(C,E,n.panelElement),F={role:`menu`,"aria-label":v,"aria-labelledby":y,tabIndex:-1,onKeyDown:i.a(e=>{let n=e.currentTarget;if(!h.owns(n,e.target))return;let r=h.items(n),i=r.indexOf(document.activeElement),a=t=>{t&&(e.preventDefault(),t.focus())},s=t.m(n)?`ArrowRight`:`ArrowLeft`;switch(e.key){case`ArrowDown`:return a(h.step(r,i,1));case`ArrowUp`:return a(h.step(r,i,-1));case`Home`:return a(r[0]);case`End`:return a(r[r.length-1]);case`Tab`:return j.closeAll({reason:`tab`,event:e});case s:return x?(e.preventDefault(),x({reason:`trigger`,event:e})):void 0}if(o.t.isPrintable(e)){let t=o.t.push(M.current,e.key,e.timeStamp);a(h.typeaheadTarget(r,t,i))}}),onPointerOver:i.a(e=>{let t=e.currentTarget,n=e.target?.closest(h.ITEM_SELECTOR);!n||!h.owns(t,n)||n===document.activeElement||n.focus()}),...b};return T?(0,p.jsx)(r.default,{ref:A,component:`menu`,...w,variant:[w.variant,{topLayer:!0}],...N.layerProps,id:D,props:{popover:`auto`,...F},children:P}):E?(0,p.jsx)(u.default,{contentRef:A,anchor:O,side:a,align:c,offset:l,flip:m,matchWidth:g,component:`menu`,...w,id:D,props:F,children:C}):null}function S(e,o){let{label:s,children:u,disabled:d,side:m=`end`,align:y=`start`,offset:b=0,flip:S=!0,itemProps:w,props:T,...E}=e,D=_(`Menu.Sub`),O=a.t(`menu-sub`),k=i.a(e=>{(h.items(e)[0]??e).focus()}),A=i.a((e,t)=>{e&&t?.focus()}),{panels:j,registerLayer:M}=v(D.registerLayer),N=c.i(`menu.sub`),P=l.t({haspopup:`menu`,idPrefix:`menu-sub`,id:E.id,onOpened:k,onClosing:A,inside:j});n.n(()=>{if(!(!P.isOpen||!P.panelElement))return D.registerLayer(P.panelElement)},[P.isOpen,P.panelElement,D.registerLayer]),n.n(()=>{D.open||P.setOpen(!1,{reason:`imperative`})},[D.open,P.setOpen]),n.n(()=>{if(!P.isOpen)return;let e=new AbortController;return document.addEventListener(`focusin`,e=>{t.p(e,[P.panelElement,P.triggerElement])||P.setOpen(!1,{reason:`imperative`,event:e})},{signal:e.signal}),()=>e.abort()},[P.isOpen,P.panelElement,P.triggerElement,P.setOpen]);let F=i.a(e=>{let n=t.m(e.currentTarget)?`ArrowLeft`:`ArrowRight`;d||e.key!==n||(e.preventDefault(),P.setOpen(!0,{reason:`trigger`,event:e}),N(`openChange`,!0,{reason:`keyboard`,event:e,item:C(s)}))}),I=i.a(e=>{d||P.setOpen(!0,{reason:`trigger`,event:e})}),L=(0,f.useMemo)(()=>({open:P.isOpen,closeAll:D.closeAll,registerLayer:M}),[P.isOpen,D.closeAll,M]);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(r.default,{tag:`button`,ref:d?void 0:P.trigger.ref,component:`menu.item`,variant:{sub:!0},id:O,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":d||void 0,...P.trigger.props,...w,onKeyDown:F,onPointerEnter:I},children:[s,(0,p.jsx)(r.default,{component:`menu.arrow`})]}),!d&&(0,p.jsx)(g.Provider,{value:L,children:(0,p.jsx)(x,{layer:P,side:m,align:y,offset:b,flip:S,matchWidth:!1,labelledBy:O,contentProps:T,closeSelf:e=>P.setOpen(!1,e),...E,elementRef:o,children:u})})]})}var C=(e,t)=>t??(typeof e==`string`?e:void 0);function w(e){let{onSelect:t,disabled:n,closeOnSelect:a=!0,value:o,props:s,children:l,...u}=e,d=_(`Menu.Item`),f=c.i(`menu.item`),m=i.a(e=>{n||(t?.(e),f(`select`,C(l,o),{reason:`select`,event:e}),a&&d.closeAll({reason:`select`,event:e}))});return(0,p.jsx)(r.default,{tag:`button`,component:`menu.item`,...u,props:{type:`button`,role:`menuitem`,tabIndex:-1,"aria-disabled":n||void 0,...s,onClick:m},children:l})}function T(e){let{checked:t,defaultChecked:n=!1,onCheckedChange:a,disabled:o,closeOnSelect:s=!1,value:l,props:u,children:d,...f}=e,m=_(`Menu.CheckboxItem`),[h,g]=i.i({value:t,defaultValue:n,onChange:a}),v=c.i(`menu.checkboxItem`),y=i.a(e=>{o||(g(!h,{reason:`select`,event:e}),v(`checkedChange`,!h,{reason:`select`,event:e,item:C(d,l)}),s&&m.closeAll({reason:`select`,event:e}))});return(0,p.jsxs)(r.default,{tag:`button`,component:`menu.item`,...f,props:{type:`button`,role:`menuitemcheckbox`,tabIndex:-1,"aria-checked":h,"aria-disabled":o||void 0,...u,onClick:y},children:[(0,p.jsx)(r.default,{component:`menu.indicator`,children:h&&(0,p.jsx)(r.default,{component:`menu.check`})}),d]})}function E(e){let{label:t,value:n,defaultValue:r=``,onValueChange:a,children:o,...s}=e,[l,u]=c.a({value:n,defaultValue:r,onChange:a,interaction:{component:`menu.radioGroup`,type:`valueChange`}}),d=i.a((e,t)=>u(e,{reason:`select`,event:t})),m=(0,f.useMemo)(()=>({value:l,select:d}),[l,d]);return(0,p.jsx)(y.Provider,{value:m,children:(0,p.jsx)(O,{label:t,...s,children:o})})}function D(e){let{value:t,disabled:n,closeOnSelect:a=!1,props:o,children:s,...c}=e,l=_(`Menu.RadioItem`),u=(0,f.useContext)(y);if(!u)throw Error(`<Menu.RadioItem> must be rendered inside a <Menu.RadioGroup>.`);let d=u.value===t,m=i.a(e=>{n||(u.select(t,e),a&&l.closeAll({reason:`select`,event:e}))});return(0,p.jsxs)(r.default,{tag:`button`,component:`menu.item`,...c,props:{type:`button`,role:`menuitemradio`,tabIndex:-1,"aria-checked":d,"aria-disabled":n||void 0,...o,onClick:m},children:[(0,p.jsx)(r.default,{component:`menu.indicator`,children:d&&(0,p.jsx)(r.default,{component:`menu.dot`})}),s]})}function O(e){let{label:t,props:n,children:i,...o}=e,s=a.t(`menu-group`);return(0,p.jsxs)(r.default,{component:`menu.group`,...o,props:{role:`group`,"aria-labelledby":t?s:void 0,...n},children:[t&&(0,p.jsx)(r.default,{component:`menu.label`,id:s,props:{role:`presentation`},children:t}),i]})}function k(e){let{props:t,...n}=e;return(0,p.jsx)(r.default,{component:`menu.separator`,...n,props:{role:`separator`,...t}})}w.displayName=`Menu.Item`,T.displayName=`Menu.CheckboxItem`,E.displayName=`Menu.RadioGroup`,D.displayName=`Menu.RadioItem`,O.displayName=`Menu.Group`,k.displayName=`Menu.Separator`;var A=Object.assign(e.f(b,`Menu`),{Item:w,CheckboxItem:T,RadioGroup:E,RadioItem:D,Group:O,Separator:k,Sub:e.f(S,`Menu.Sub`)});exports.default=A;