@box-kite/react 2.2.3 → 2.2.5

package/components/list.mjs

@@ -0,0 +1,391 @@
+import { f as e } from "../react-shared.mjs";
+import { Path as t, Svg as n } from "./svg.mjs";
+import { classNames as r, mergeDeep as i } from "@box-kite/core";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useBoxElement as c } from "@box-kite/react";
+//#region src/components/list/listItemParts.ts
+var l = {
+	position: "relative",
+	css: { borderRadius: "var(--list-item-radius, 0)" },
+	before: {
+		position: "absolute",
+		top: 0,
+		insetEnd: 0,
+		css: {
+			insetInlineStart: "var(--list-divider-inset, 0px)",
+			height: "1px"
+		}
+	},
+	after: {
+		position: "absolute",
+		inset: 0,
+		pointerEvents: "none",
+		css: {
+			border: "var(--list-item-frame, none)",
+			borderRadius: "inherit"
+		}
+	},
+	nth: { first: { before: { css: { display: "var(--list-first-divider, none)" } } } }
+}, u = {
+	display: "flex",
+	ai: "center",
+	gap: 3,
+	px: 4,
+	py: 3,
+	minHeight: 14
+}, d = {
+	sm: {
+		gap: 2,
+		py: 2,
+		minHeight: 11
+	},
+	md: {},
+	lg: {
+		gap: 4,
+		py: 4,
+		minHeight: 18
+	}
+}, f = [
+	"css",
+	"before",
+	"after",
+	"nth"
+];
+function p(e, t) {
+	let n = {
+		...e,
+		...t
+	}, r = e;
+	for (let e of f) {
+		let a = t[e];
+		r[e] && a && (n[e] = i(r[e], a));
+	}
+	return n;
+}
+//#endregion
+//#region src/components/list.tsx
+var m = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+], h = { fontVariantNumeric: "tabular-nums" }, g = {
+	display: "flex",
+	ai: "center",
+	jc: "center",
+	flexShrink: 0
+}, _ = {
+	icon: {
+		width: 10,
+		height: 10,
+		borderRadius: 2
+	},
+	avatar: {
+		width: 10,
+		height: 10,
+		borderRadius: 999,
+		overflow: "hidden",
+		fontSize: 14,
+		fontWeight: 600
+	},
+	image: {
+		width: 16,
+		height: 16,
+		borderRadius: 2,
+		overflow: "hidden"
+	}
+}, v = {
+	display: "flex",
+	ai: "baseline",
+	jc: "space-between",
+	gap: 2,
+	minWidth: 0
+}, y = {
+	flexWrap: "wrap",
+	jc: "start",
+	rowGap: 1
+}, b = {
+	fontSize: 14,
+	lineHeight: 20
+}, x = {
+	"list.title": {
+		display: "block",
+		minWidth: 0,
+		fontSize: 16,
+		lineHeight: 22,
+		fontWeight: 500
+	},
+	"list.description": {
+		display: "block",
+		minWidth: 0,
+		fontSize: 14,
+		lineHeight: 20
+	},
+	"list.overline": {
+		display: "block",
+		minWidth: 0,
+		fontSize: 12,
+		lineHeight: 16,
+		fontWeight: 500
+	}
+}, S = {
+	color: "currentColor",
+	textDecoration: "none",
+	cursor: "pointer",
+	css: {
+		display: "inherit",
+		font: "inherit",
+		textAlign: "inherit",
+		overflow: "inherit",
+		textOverflow: "inherit",
+		WebkitLineClamp: "inherit",
+		WebkitBoxOrient: "inherit"
+	},
+	after: {
+		position: "absolute",
+		inset: 0,
+		css: { borderRadius: "var(--list-item-radius, 0)" }
+	}
+}, C = {
+	1: {
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	2: {
+		overflow: "hidden",
+		css: {
+			display: "-webkit-box",
+			WebkitBoxOrient: "vertical",
+			WebkitLineClamp: 2
+		}
+	},
+	3: {
+		overflow: "hidden",
+		css: {
+			display: "-webkit-box",
+			WebkitBoxOrient: "vertical",
+			WebkitLineClamp: 3
+		}
+	}
+}, w = {
+	content: {
+		display: "flex",
+		d: "column",
+		gap: .5,
+		flex1: !0,
+		minWidth: 0
+	},
+	meta: {
+		flexShrink: 0,
+		fontSize: 13,
+		lineHeight: 18,
+		whiteSpace: "nowrap",
+		css: h
+	},
+	end: {
+		display: "flex",
+		d: "column",
+		ai: "end",
+		gap: .5,
+		flexShrink: 0,
+		maxWidth: "1/2",
+		textAlign: "end",
+		css: h
+	},
+	actions: {
+		display: "flex",
+		ai: "center",
+		gap: 1,
+		flexShrink: 0,
+		position: "relative",
+		zIndex: 1
+	},
+	fields: {
+		display: "grid",
+		columnGap: 4,
+		rowGap: 2,
+		mt: 1,
+		css: { gridTemplateColumns: "repeat(auto-fill, minmax(min(8rem, 100%), 1fr))" }
+	}
+};
+function T(e, t) {
+	let { props: n, ...r } = e;
+	return c({
+		tag: "ul",
+		component: "list",
+		...r,
+		props: {
+			role: "list",
+			...n
+		}
+	}, t);
+}
+function E(e, t) {
+	let { size: n = "md", wrap: r = !1, selected: i = !1, chevron: f = !1, variant: m, children: h, ...g } = e;
+	return c({
+		tag: "li",
+		component: "list.item",
+		...p({
+			...l,
+			...u,
+			...d[n],
+			...r ? { flexWrap: "wrap" } : {}
+		}, g),
+		variant: [m, { selected: i }],
+		children: f ? /* @__PURE__ */ s(a, { children: [h, /* @__PURE__ */ o(O, {})] }) : h
+	}, t);
+}
+function D(e, r) {
+	return c({
+		tag: "span",
+		component: "list.muted",
+		display: "flex",
+		flexShrink: 0,
+		alignSelf: "center",
+		rtl: { flip: "xAxis" },
+		...e,
+		props: {
+			"aria-hidden": !0,
+			...e.props
+		},
+		children: /* @__PURE__ */ o(n, {
+			viewBox: "0 0 16 16",
+			width: "1rem",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.75,
+			children: /* @__PURE__ */ o(t, {
+				d: "M6 3.5 10.5 8 6 12.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	}, r);
+}
+var O = e(D, "List.Chevron");
+function k(e, t) {
+	let n = r(e.variant).find((e) => e in _);
+	return c({
+		component: "list.media",
+		...g,
+		...n ? _[n] : {},
+		...e
+	}, t);
+}
+function A(e, t) {
+	let { wrap: n = !1, secondary: r = !1, ...i } = e;
+	return c({
+		...r ? {
+			component: "list.muted",
+			...b
+		} : {},
+		...v,
+		...n ? y : {},
+		...i
+	}, t);
+}
+function j(t, n) {
+	let r = t !== "list.title";
+	return e((e, n) => {
+		let { lines: i, ...a } = e, o = i ? p(x[t], C[i]) : x[t];
+		return c({
+			tag: "span",
+			...r ? { component: "list.muted" } : {},
+			...p(o, a)
+		}, n);
+	}, n);
+}
+function M(e, t) {
+	let { props: n, tag: r, onClick: i, ...a } = e, o = r ?? (n?.href === void 0 ? n?.htmlFor === void 0 ? "button" : "label" : "a");
+	return c({
+		tag: o,
+		component: "list.action",
+		...p(S, a),
+		props: {
+			...o === "button" ? { type: "button" } : {},
+			"data-list-action": "",
+			...n,
+			...i ? { onClick: i } : {}
+		}
+	}, t);
+}
+function N(e, t) {
+	let { label: n, children: r, ...i } = e;
+	return c({
+		minWidth: 0,
+		...i,
+		children: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(P, { children: n }), /* @__PURE__ */ o(F, { children: r })] })
+	}, t);
+}
+function P({ children: e }) {
+	return c({
+		tag: "dt",
+		component: "list.muted",
+		fontSize: 12,
+		lineHeight: 16,
+		children: e
+	});
+}
+function F({ children: e }) {
+	return c({
+		tag: "dd",
+		minWidth: 0,
+		fontSize: 14,
+		lineHeight: 20,
+		css: {
+			overflowWrap: "anywhere",
+			...h
+		},
+		children: e
+	});
+}
+function I(e, t) {
+	let { label: n, level: r, sticky: i = !1, children: l, ...u } = e;
+	return c({
+		tag: "li",
+		...u,
+		children: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(L, {
+			level: r,
+			sticky: i,
+			children: n
+		}), /* @__PURE__ */ o(R, { children: l })] })
+	}, t);
+}
+function L({ level: e, sticky: t, children: n }) {
+	return c({
+		tag: e ? m[e - 1] : "div",
+		component: "list.label",
+		px: 4,
+		py: 1.5,
+		fontSize: 13,
+		lineHeight: 18,
+		fontWeight: 600,
+		...t ? {
+			position: "sticky",
+			zIndex: 2,
+			css: { top: "var(--list-sticky-top, 0)" }
+		} : {},
+		children: n
+	});
+}
+function R({ children: e }) {
+	return c({
+		tag: "ul",
+		props: { role: "list" },
+		children: e
+	});
+}
+function z(t, n, r, i = !1) {
+	return e((e, r) => c({
+		tag: t,
+		...i ? { component: "list.muted" } : {},
+		...p(n, e)
+	}, r), r);
+}
+var B = e(k, "List.Media"), V = z("div", w.content, "List.Content"), H = j("list.overline", "List.Overline"), U = j("list.title", "List.Title"), W = j("list.description", "List.Description"), G = z("span", w.meta, "List.Meta", !0), K = z("div", w.end, "List.End"), q = z("div", w.actions, "List.Actions"), J = z("dl", w.fields, "List.Fields"), Y = e(T, "List");
+Y.Item = e(E, "List.Item"), Y.Media = B, Y.Content = V, Y.Row = e(A, "List.Row"), Y.Overline = H, Y.Title = U, Y.Description = W, Y.Meta = G, Y.End = K, Y.Actions = q, Y.Action = e(M, "List.Action"), Y.Fields = J, Y.Field = e(N, "List.Field"), Y.Group = e(I, "List.Group"), Y.Chevron = O;
+//#endregion
+export { Y as default, p as i, u as n, d as r, l as t };

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("../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;
+"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.d(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.u(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.d(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

@@ -1,5 +1,5 @@
 "use client";
-import { l as e, u as t } from "../platform.mjs";
+import { d as e, u as t } from "../platform.mjs";
 import { n } from "../effects.mjs";
 import r from "../box.mjs";
 import { a as i, i as a } from "../behavior.mjs";
@@ -110,8 +110,8 @@ function E(e) {
 		})
 	})] });
 }
-function D(e) {
-	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({
+function D(t) {
+	let { layer: n, side: a, align: o, offset: l, flip: d, matchWidth: f, label: p, labelledBy: m, contentProps: g, closeSelf: _, children: y, ...b } = t, { platform: S, isOpen: w, id: T, triggerElement: E, setPanel: D } = n, O = C("Menu"), k = h({
 		query: "",
 		at: 0
 	}), A = c({
@@ -126,29 +126,29 @@ function D(e) {
 		"aria-label": p,
 		"aria-labelledby": m,
 		tabIndex: -1,
-		onKeyDown: i((e) => {
-			let n = e.currentTarget;
-			if (!x.owns(n, e.target)) return;
-			let r = x.items(n), i = r.indexOf(document.activeElement), a = (t) => {
-				t && (e.preventDefault(), t.focus());
-			}, o = t(n) ? "ArrowRight" : "ArrowLeft";
-			switch (e.key) {
+		onKeyDown: i((t) => {
+			let n = t.currentTarget;
+			if (!x.owns(n, t.target)) return;
+			let r = x.items(n), i = r.indexOf(document.activeElement), a = (e) => {
+				e && (t.preventDefault(), e.focus());
+			}, o = e(n) ? "ArrowRight" : "ArrowLeft";
+			switch (t.key) {
 				case "ArrowDown": return a(x.step(r, i, 1));
 				case "ArrowUp": return a(x.step(r, i, -1));
 				case "Home": return a(r[0]);
 				case "End": return a(r[r.length - 1]);
 				case "Tab": return O.closeAll({
 					reason: "tab",
-					event: e
+					event: t
 				});
-				case o: return _ ? (e.preventDefault(), _({
+				case o: return _ ? (t.preventDefault(), _({
 					reason: "trigger",
-					event: e
+					event: t
 				})) : void 0;
 			}
-			if (s.isPrintable(e)) {
-				let t = s.push(k.current, e.key, e.timeStamp);
-				a(x.typeaheadTarget(r, t, i));
+			if (s.isPrintable(t)) {
+				let e = s.push(k.current, t.key, t.timeStamp);
+				a(x.typeaheadTarget(r, e, i));
 			}
 		}),
 		onPointerOver: i((e) => {
@@ -207,24 +207,24 @@ function O(a) {
 		E.open || N.setOpen(!1, { reason: "imperative" });
 	}, [E.open, N.setOpen]), n(() => {
 		if (!N.isOpen) return;
-		let t = new AbortController();
-		return document.addEventListener("focusin", (t) => {
-			e(t, [N.panelElement, N.triggerElement]) || N.setOpen(!1, {
+		let e = new AbortController();
+		return document.addEventListener("focusin", (e) => {
+			t(e, [N.panelElement, N.triggerElement]) || N.setOpen(!1, {
 				reason: "imperative",
-				event: t
+				event: e
 			});
-		}, { signal: t.signal }), () => t.abort();
+		}, { signal: e.signal }), () => e.abort();
 	}, [
 		N.isOpen,
 		N.panelElement,
 		N.triggerElement,
 		N.setOpen
 	]);
-	let P = i((e) => {
-		let n = t(e.currentTarget) ? "ArrowLeft" : "ArrowRight";
-		u || e.key !== n || (e.preventDefault(), N.setOpen(!0, {
+	let P = i((t) => {
+		let n = e(t.currentTarget) ? "ArrowLeft" : "ArrowRight";
+		u || t.key !== n || (t.preventDefault(), N.setOpen(!0, {
 			reason: "trigger",
-			event: e
+			event: t
 		}));
 	}), F = i((e) => {
 		u || N.setOpen(!0, {

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

package/components/overlay.mjs

@@ -1,16 +1,16 @@
 "use client";
-import { a as e, c as t, u as n } from "../platform.mjs";
-import { t as r } from "../client.mjs";
+import { n as e } from "../client.mjs";
+import { d as t, l as n, o as r } from "../platform.mjs";
 import { n as i } from "../effects.mjs";
 import a from "../box.mjs";
 import { t as o } from "../placement.mjs";
 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";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPortal as h } from "react-dom";
 //#region src/components/overlay.tsx
 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({
+	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 = e(!j), P = o({
 		side: _,
 		align: v,
 		offset: y,
@@ -20,12 +20,12 @@ function g(c, g) {
 		trackSide: !!x
 	});
 	i(() => {
-		let t = M.current;
-		!j || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
+		let e = M.current;
+		!j || !r() || !e || !e.isConnected || e.matches(":popover-open") || e.showPopover();
 	}), i(() => {
 		if (j) return;
-		let e = t(S) ?? E;
-		k(!!e && n(e));
+		let e = n(S) ?? E;
+		k(!!e && t(e));
 	}, [
 		S,
 		E,
@@ -35,17 +35,17 @@ function g(c, g) {
 	});
 	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, {
+	}, [F, g]), L = /* @__PURE__ */ p(a, {
 		...P.layerProps,
 		ref: I,
 		transition: "none",
 		props: j ? { popover: "manual" } : { dir: O ? "rtl" : "ltr" },
-		children: /* @__PURE__ */ m(a, {
+		children: /* @__PURE__ */ p(a, {
 			ref: C,
 			...T
 		})
 	});
-	return /* @__PURE__ */ h(p, { children: [!S && /* @__PURE__ */ m(a, { ref: D }), j ? L : N && f(L, N)] });
+	return /* @__PURE__ */ m(f, { children: [!S && /* @__PURE__ */ p(a, { ref: D }), j ? L : N && h(L, N)] });
 }
 var _ = c(g);
 _.displayName = "Overlay";