@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/navigation/Link/Link.mjs

@@ -0,0 +1,83 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import { VisuallyHidden as t } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { ArrowRightIcon as n, ExternalLinkIcon as r } from "../../primitives/Icon/icons.mjs";
+import i from "./Link.module.css.mjs";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/navigation/Link/Link.tsx
+var c = {
+	inline: i.inline,
+	standalone: i.standalone,
+	subtle: i.subtle
+}, l = {
+	primary: i.primary,
+	neutral: i.neutral,
+	accent: i.accent,
+	success: i.success,
+	warning: i.warning,
+	danger: i.danger,
+	info: i.info
+}, u = {
+	inherit: void 0,
+	sm: i.sm,
+	md: i.md,
+	lg: i.lg
+}, d = {
+	always: i.underlineAlways,
+	hover: i.underlineHover,
+	none: i.underlineNone
+}, f = {
+	inline: "always",
+	standalone: "hover",
+	subtle: "hover"
+}, p = (e) => Array.from(/* @__PURE__ */ new Set([
+	...(e ?? "").split(/\s+/).filter(Boolean),
+	"noopener",
+	"noreferrer"
+])).join(" ");
+function m(m) {
+	let { as: h, variant: g = "inline", tone: _ = "primary", size: v = "inherit", underline: y, external: b = !1, externalLabel: x = "(opens in a new tab)", arrow: S = !1, startIcon: C, endIcon: w, disabled: T = !1, visited: E = !1, className: D, children: O, rel: k, target: A, onClick: j, ...M } = m, N = y ?? f[g], P = e(i.root, c[g], l[_], u[v], d[N], T ? i.disabled : i.interactive, E && !T && i.visited, D), F = /* @__PURE__ */ s(a, { children: [
+		C != null && /* @__PURE__ */ o("span", {
+			className: e(i.icon, i.startIcon),
+			children: C
+		}),
+		O != null && O !== !1 && /* @__PURE__ */ o("span", {
+			className: i.label,
+			children: O
+		}),
+		w != null && /* @__PURE__ */ o("span", {
+			className: e(i.icon, i.endIcon),
+			children: w
+		}),
+		S && !b && /* @__PURE__ */ o("span", {
+			className: e(i.icon, i.endIcon, i.arrow),
+			children: /* @__PURE__ */ o(n, {})
+		}),
+		b && !T && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("span", {
+			className: e(i.icon, i.endIcon, i.external),
+			children: /* @__PURE__ */ o(r, {})
+		}), /* @__PURE__ */ s(t, { children: [" ", x] })] })
+	] });
+	if (T) {
+		let { href: e, to: t, download: n, ping: r, hrefLang: i, referrerPolicy: a, tabIndex: s, ...c } = M, l = (e) => {
+			e.preventDefault();
+		};
+		return /* @__PURE__ */ o("a", {
+			...c,
+			role: "link",
+			"aria-disabled": "true",
+			onClick: l,
+			className: P,
+			children: F
+		});
+	}
+	return /* @__PURE__ */ o(h ?? "a", {
+		...M,
+		target: b ? "_blank" : A,
+		rel: b ? p(k) : k,
+		onClick: j,
+		className: P,
+		children: F
+	});
+}
+//#endregion
+export { m as Link };

package/dist/components/navigation/Link/Link.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1atiq_15`,t=`_interactive_1atiq_71`,n=`_label_1atiq_101`,r=`_underlineAlways_1atiq_133`,i=`_underlineHover_1atiq_179`,a=`_underlineNone_1atiq_189`,o=`_inline_1atiq_217`,s=`_standalone_1atiq_227`,c=`_subtle_1atiq_269`,l=`_primary_1atiq_301`,u=`_neutral_1atiq_315`,d=`_accent_1atiq_333`,f=`_success_1atiq_343`,p=`_warning_1atiq_353`,m=`_danger_1atiq_363`,h=`_info_1atiq_373`,g=`_sm_1atiq_387`,_=`_md_1atiq_395`,v=`_lg_1atiq_403`,y=`_visited_1atiq_415`,b=`_icon_1atiq_429`,x=`_startIcon_1atiq_457`,S=`_endIcon_1atiq_465`,C=`_arrow_1atiq_473`,w=`_external_1atiq_495`,T=`_disabled_1atiq_523`,E={root:e,interactive:t,label:n,underlineAlways:r,underlineHover:i,underlineNone:a,inline:o,standalone:s,subtle:c,primary:l,neutral:u,accent:d,success:f,warning:p,danger:m,info:h,sm:g,md:_,lg:v,visited:y,icon:b,startIcon:x,endIcon:S,arrow:C,external:w,disabled:T};exports.accent=d,exports.arrow=C,exports.danger=m,exports.default=E,exports.disabled=T,exports.endIcon=S,exports.external=w,exports.icon=b,exports.info=h,exports.inline=o,exports.interactive=t,exports.label=n,exports.lg=v,exports.md=_,exports.neutral=u,exports.primary=l,exports.root=e,exports.sm=g,exports.standalone=s,exports.startIcon=x,exports.subtle=c,exports.success=f,exports.underlineAlways=r,exports.underlineHover=i,exports.underlineNone=a,exports.visited=y,exports.warning=p;

package/dist/components/navigation/Link/Link.module.css.mjs

@@ -0,0 +1,31 @@
+//#region src/components/navigation/Link/Link.module.css
+var e = "_root_1atiq_15", t = "_interactive_1atiq_71", n = "_label_1atiq_101", r = "_underlineAlways_1atiq_133", i = "_underlineHover_1atiq_179", a = "_underlineNone_1atiq_189", o = "_inline_1atiq_217", s = "_standalone_1atiq_227", c = "_subtle_1atiq_269", l = "_primary_1atiq_301", u = "_neutral_1atiq_315", d = "_accent_1atiq_333", f = "_success_1atiq_343", p = "_warning_1atiq_353", m = "_danger_1atiq_363", h = "_info_1atiq_373", g = "_sm_1atiq_387", _ = "_md_1atiq_395", v = "_lg_1atiq_403", y = "_visited_1atiq_415", b = "_icon_1atiq_429", x = "_startIcon_1atiq_457", S = "_endIcon_1atiq_465", C = "_arrow_1atiq_473", w = "_external_1atiq_495", T = "_disabled_1atiq_523", E = {
+	root: e,
+	interactive: t,
+	label: n,
+	underlineAlways: r,
+	underlineHover: i,
+	underlineNone: a,
+	inline: o,
+	standalone: s,
+	subtle: c,
+	primary: l,
+	neutral: u,
+	accent: d,
+	success: f,
+	warning: p,
+	danger: m,
+	info: h,
+	sm: g,
+	md: _,
+	lg: v,
+	visited: y,
+	icon: b,
+	startIcon: x,
+	endIcon: S,
+	arrow: C,
+	external: w,
+	disabled: T
+};
+//#endregion
+export { d as accent, C as arrow, m as danger, E as default, T as disabled, S as endIcon, w as external, b as icon, h as info, o as inline, t as interactive, n as label, v as lg, _ as md, u as neutral, l as primary, e as root, g as sm, s as standalone, x as startIcon, c as subtle, f as success, r as underlineAlways, i as underlineHover, a as underlineNone, y as visited, p as warning };

package/dist/components/navigation/Link/index.d.ts

@@ -0,0 +1 @@
+export * from './Link';

package/dist/components/navigation/Menu/Menu.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/refs.cjs.js"),t=require("../../../hooks/useMergedRef.cjs.js"),n=require("../../../utils/slot.cjs.js"),r=require("../../primitives/Button/Button.cjs.js"),i=require("./MenuContext.cjs.js"),a=require("./MenuContent.cjs.js"),o=require("./useMenuRoot.cjs.js"),s=require("./MenuItem.cjs.js"),c=require("./MenuSub.cjs.js");let l=require("react"),u=require("react/jsx-runtime");var d=({children:e,...t})=>{let{level:n,tree:r}=o.useMenuRoot(t);return(0,u.jsx)(i.MenuTreeContext.Provider,{value:r,children:(0,u.jsx)(i.MenuLevelContext.Provider,{value:n,children:e})})};function f(e){let{variant:t,tone:n,size:r,radius:i,startIcon:a,endIcon:o,fullWidth:s,...c}=e;return c}var p=({children:a,asChild:o,onClick:s,onKeyDown:c,onPointerDown:d,id:p,ref:m,...h})=>{let g=i.useMenuLevel(`Menu.Trigger`);i.useMenuTree(`Menu.Trigger`);let _=(o??e.isSingleElement(a))&&e.isSingleElement(a)?a:null,v=_?e.getChildRef(_):void 0,y=t.useMergedRef(g.triggerRef,m,v),b=(0,l.useRef)(!1),x=e=>{c?.(e),!e.defaultPrevented&&(e.key===`ArrowDown`||e.key===`ArrowUp`?(e.preventDefault(),g.setOpen(!0,{focus:e.key===`ArrowDown`?`first`:`last`})):(e.key===`Enter`||e.key===` `)&&(b.current=!0))},S=e=>{d?.(e),b.current=!1},C=e=>{s?.(e);let t=b.current||e.detail===0;b.current=!1,!e.defaultPrevented&&(g.open?g.setOpen(!1,{restore:`force`}):g.setOpen(!0,{focus:t?`first`:`content`}))},w=_?_.props.id:void 0,T={id:p??w??g.triggerId,"aria-haspopup":`menu`,"aria-expanded":g.open,"aria-controls":g.open?g.contentId:void 0,"data-state":g.open?`open`:`closed`,onClick:C,onKeyDown:x,onPointerDown:S};return _?n.cloneSlot(_,{...f(h),...T},y):(0,u.jsx)(r.Button,{...h,...T,ref:y,children:a})},m=Object.assign(d,{Trigger:p,Content:a.MenuContent,Item:s.MenuItem,CheckboxItem:s.MenuCheckboxItem,RadioGroup:s.MenuRadioGroup,RadioItem:s.MenuRadioItem,Group:s.MenuGroup,Label:s.MenuLabel,Separator:s.MenuSeparator,Sub:c.MenuSub,SubTrigger:c.MenuSubTrigger,SubContent:c.MenuSubContent});exports.Menu=m,exports.MenuCheckboxItem=s.MenuCheckboxItem,exports.MenuContent=a.MenuContent,exports.MenuGroup=s.MenuGroup,exports.MenuItem=s.MenuItem,exports.MenuLabel=s.MenuLabel,exports.MenuRadioGroup=s.MenuRadioGroup,exports.MenuRadioItem=s.MenuRadioItem,exports.MenuSeparator=s.MenuSeparator,exports.MenuSub=c.MenuSub,exports.MenuSubContent=c.MenuSubContent,exports.MenuSubTrigger=c.MenuSubTrigger,exports.MenuTrigger=p;

package/dist/components/navigation/Menu/Menu.d.ts

@@ -0,0 +1,61 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Size } from '../../../types/common';
+import { ButtonOwnProps, ButtonStyleProps } from '../../primitives/Button';
+export { MenuContent } from './MenuContent';
+export type { MenuContentProps, MenuSubContentProps } from './MenuContent';
+export { MenuCheckboxItem, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, } from './MenuItem';
+export type { MenuCheckboxItemProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLabelProps, MenuRadioGroupProps, MenuRadioItemProps, MenuSelectEvent, MenuSeparatorProps, MenuShortcut, } from './MenuItem';
+export { MenuSub, MenuSubContent, MenuSubTrigger } from './MenuSub';
+export type { MenuSubProps, MenuSubTriggerProps } from './MenuSub';
+export interface MenuProps {
+    /** `Menu.Trigger` and `Menu.Content`. */
+    children?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state whenever it changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Item height, padding, and type size for the menu and all its submenus. @default "md" */
+    size?: Size;
+    /**
+     * Default for every item's `closeOnSelect`. When unset, plain items
+     * (`Menu.Item`) close the menu on selection, while checkbox and radio
+     * items keep it open so several can be toggled. An item's own
+     * `closeOnSelect` always wins.
+     */
+    closeOnSelect?: boolean;
+}
+export interface MenuTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children">, ButtonStyleProps, Pick<ButtonOwnProps, "startIcon" | "endIcon" | "fullWidth"> {
+    /**
+     * A single element (usually a `Button` or `IconButton`) to turn into the
+     * trigger, or plain content to render inside a library `Button`.
+     */
+    children: ReactNode;
+    /**
+     * Clone the single child instead of wrapping it in a `Button`. Defaults to
+     * `true` when `children` is a single element. The child must be a
+     * focusable button that accepts `ref`, `id`, `onClick`, `onKeyDown`, and `aria-*`.
+     */
+    asChild?: boolean;
+}
+/**
+ * The button that opens the menu. Adds `aria-haspopup="menu"`,
+ * `aria-expanded`, and `aria-controls`. Pass a single `Button`/`IconButton`
+ * to use it as-is, or plain content to get a default `Button`.
+ */
+export declare const MenuTrigger: ({ children, asChild, onClick, onKeyDown, onPointerDown, id, ref, ...rest }: MenuTriggerProps) => import("react").JSX.Element;
+export declare const Menu: (({ children, ...options }: MenuProps) => import("react").JSX.Element) & {
+    Trigger: ({ children, asChild, onClick, onKeyDown, onPointerDown, id, ref, ...rest }: MenuTriggerProps) => import("react").JSX.Element;
+    Content: ({ container, ...props }: import('./MenuContent').MenuContentProps) => import("react").JSX.Element | null;
+    Item: ({ onSelect, closeOnSelect, ...rest }: import('./MenuItem').MenuItemProps) => import("react").JSX.Element;
+    CheckboxItem: ({ checked: checkedProp, defaultChecked, onCheckedChange, onSelect, closeOnSelect, ...rest }: import('./MenuItem').MenuCheckboxItemProps) => import("react").JSX.Element;
+    RadioGroup: ({ value: valueProp, defaultValue, onValueChange, className, children, ...rest }: import('./MenuItem').MenuRadioGroupProps) => import("react").JSX.Element;
+    RadioItem: ({ value, onSelect, closeOnSelect, ...rest }: import('./MenuItem').MenuRadioItemProps) => import("react").JSX.Element;
+    Group: ({ className, children, ...rest }: import('./MenuItem').MenuGroupProps) => import("react").JSX.Element;
+    Label: ({ className, id, ...rest }: import('./MenuItem').MenuLabelProps) => import("react").JSX.Element;
+    Separator: ({ className, ...rest }: import('./MenuItem').MenuSeparatorProps) => import("react").JSX.Element;
+    Sub: ({ children, onOpenChange }: import('./MenuSub').MenuSubProps) => import("react").JSX.Element;
+    SubTrigger: ({ ref, id, className, ...rest }: import('./MenuSub').MenuSubTriggerProps) => import("react").JSX.Element;
+    SubContent: ({ container, ...props }: import('./MenuContent').MenuSubContentProps) => import("react").JSX.Element | null;
+};

package/dist/components/navigation/Menu/Menu.mjs

@@ -0,0 +1,72 @@
+import { getChildRef as e, isSingleElement as t } from "../../../utils/refs.mjs";
+import { useMergedRef as n } from "../../../hooks/useMergedRef.mjs";
+import { cloneSlot as r } from "../../../utils/slot.mjs";
+import { Button as i } from "../../primitives/Button/Button.mjs";
+import { MenuLevelContext as a, MenuTreeContext as o, useMenuLevel as s, useMenuTree as c } from "./MenuContext.mjs";
+import { MenuContent as l } from "./MenuContent.mjs";
+import { useMenuRoot as u } from "./useMenuRoot.mjs";
+import { MenuCheckboxItem as d, MenuGroup as f, MenuItem as p, MenuLabel as m, MenuRadioGroup as h, MenuRadioItem as g, MenuSeparator as _ } from "./MenuItem.mjs";
+import { MenuSub as v, MenuSubContent as y, MenuSubTrigger as b } from "./MenuSub.mjs";
+import { useRef as x } from "react";
+import { jsx as S } from "react/jsx-runtime";
+//#region src/components/navigation/Menu/Menu.tsx
+var C = ({ children: e, ...t }) => {
+	let { level: n, tree: r } = u(t);
+	return /* @__PURE__ */ S(o.Provider, {
+		value: r,
+		children: /* @__PURE__ */ S(a.Provider, {
+			value: n,
+			children: e
+		})
+	});
+};
+function w(e) {
+	let { variant: t, tone: n, size: r, radius: i, startIcon: a, endIcon: o, fullWidth: s, ...c } = e;
+	return c;
+}
+var T = ({ children: a, asChild: o, onClick: l, onKeyDown: u, onPointerDown: d, id: f, ref: p, ...m }) => {
+	let h = s("Menu.Trigger");
+	c("Menu.Trigger");
+	let g = (o ?? t(a)) && t(a) ? a : null, _ = g ? e(g) : void 0, v = n(h.triggerRef, p, _), y = x(!1), b = (e) => {
+		u?.(e), !e.defaultPrevented && (e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), h.setOpen(!0, { focus: e.key === "ArrowDown" ? "first" : "last" })) : (e.key === "Enter" || e.key === " ") && (y.current = !0));
+	}, C = (e) => {
+		d?.(e), y.current = !1;
+	}, T = (e) => {
+		l?.(e);
+		let t = y.current || e.detail === 0;
+		y.current = !1, !e.defaultPrevented && (h.open ? h.setOpen(!1, { restore: "force" }) : h.setOpen(!0, { focus: t ? "first" : "content" }));
+	}, E = g ? g.props.id : void 0, D = {
+		id: f ?? E ?? h.triggerId,
+		"aria-haspopup": "menu",
+		"aria-expanded": h.open,
+		"aria-controls": h.open ? h.contentId : void 0,
+		"data-state": h.open ? "open" : "closed",
+		onClick: T,
+		onKeyDown: b,
+		onPointerDown: C
+	};
+	return g ? r(g, {
+		...w(m),
+		...D
+	}, v) : /* @__PURE__ */ S(i, {
+		...m,
+		...D,
+		ref: v,
+		children: a
+	});
+}, E = Object.assign(C, {
+	Trigger: T,
+	Content: l,
+	Item: p,
+	CheckboxItem: d,
+	RadioGroup: h,
+	RadioItem: g,
+	Group: f,
+	Label: m,
+	Separator: _,
+	Sub: v,
+	SubTrigger: b,
+	SubContent: y
+});
+//#endregion
+export { E as Menu, d as MenuCheckboxItem, l as MenuContent, f as MenuGroup, p as MenuItem, m as MenuLabel, h as MenuRadioGroup, g as MenuRadioItem, _ as MenuSeparator, v as MenuSub, y as MenuSubContent, b as MenuSubTrigger, T as MenuTrigger };

package/dist/components/navigation/Menu/Menu.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_positioner_g4nth_15`,t=`_content_g4nth_27`,n=`_sm_g4nth_113`,r=`_md_g4nth_127`,i=`_lg_g4nth_141`,a=`_item_g4nth_221`,o=`_subTrigger_g4nth_305`,s=`_danger_g4nth_315`,c=`_indicator_g4nth_357`,l=`_icon_g4nth_359`,u=`_chevron_g4nth_361`,d=`_label_g4nth_413`,f=`_shortcut_g4nth_425`,p=`_group_g4nth_481`,m=`_groupLabel_g4nth_493`,h=`_separator_g4nth_521`,g={positioner:e,content:t,"menu-in":`_menu-in_g4nth_1`,sm:n,md:r,lg:i,item:a,subTrigger:o,danger:s,indicator:c,icon:l,chevron:u,label:d,shortcut:f,group:p,groupLabel:m,separator:h};exports.chevron=u,exports.content=t,exports.danger=s,exports.default=g,exports.group=p,exports.groupLabel=m,exports.icon=l,exports.indicator=c,exports.item=a,exports.label=d,exports.lg=i,exports.md=r,exports.positioner=e,exports.separator=h,exports.shortcut=f,exports.sm=n,exports.subTrigger=o;

package/dist/components/navigation/Menu/Menu.module.css.mjs

@@ -0,0 +1,22 @@
+//#region src/components/navigation/Menu/Menu.module.css
+var e = "_positioner_g4nth_15", t = "_content_g4nth_27", n = "_sm_g4nth_113", r = "_md_g4nth_127", i = "_lg_g4nth_141", a = "_item_g4nth_221", o = "_subTrigger_g4nth_305", s = "_danger_g4nth_315", c = "_indicator_g4nth_357", l = "_icon_g4nth_359", u = "_chevron_g4nth_361", d = "_label_g4nth_413", f = "_shortcut_g4nth_425", p = "_group_g4nth_481", m = "_groupLabel_g4nth_493", h = "_separator_g4nth_521", g = {
+	positioner: e,
+	content: t,
+	"menu-in": "_menu-in_g4nth_1",
+	sm: n,
+	md: r,
+	lg: i,
+	item: a,
+	subTrigger: o,
+	danger: s,
+	indicator: c,
+	icon: l,
+	chevron: u,
+	label: d,
+	shortcut: f,
+	group: p,
+	groupLabel: m,
+	separator: h
+};
+//#endregion
+export { u as chevron, t as content, s as danger, g as default, p as group, m as groupLabel, l as icon, c as indicator, a as item, d as label, i as lg, r as md, e as positioner, h as separator, f as shortcut, n as sm, o as subTrigger };

package/dist/components/navigation/Menu/MenuContent.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useOverlayLayer.cjs.js"),t=require("../../../hooks/useFloatingPosition.cjs.js"),n=require("../../../hooks/useFocusTrap.cjs.js"),r=require("../../../hooks/useMergedRef.cjs.js"),i=require("../../../utils/cx.cjs.js"),a=require("../../utilities/Portal/Portal.cjs.js"),o=require("./MenuContext.cjs.js"),s=require("./Menu.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u={sm:s.default.sm,md:s.default.md,lg:s.default.lg},d=500;function f(e,t){if(!t)return e;let[n,r]=e.split(`-`);return n!==`top`&&n!==`bottom`||!r?e:`${n}-${r===`start`?`end`:`start`}`}var p=({container:e,...t})=>{let n=o.useMenuLevel(`Menu.Content`),r=o.useMenuTree(`Menu.Content`);return n.open?(0,l.jsx)(a.Portal,{container:e,children:(0,l.jsx)(m,{...t,level:n,tree:r})}):null},m=({level:a,tree:p,children:m,placement:h,offset:g,maxHeight:_,className:v,style:y,ref:b,onKeyDown:x,onPointerEnter:S,onFocus:C,"aria-label":w,"aria-labelledby":T,...E})=>{let D=(0,c.useRef)(null),O=r.useMergedRef(a.contentRef,b),[k,A]=(0,c.useState)(`ltr`);(0,c.useLayoutEffect)(()=>{let e=(a.anchorRef??a.triggerRef).current;e&&A(getComputedStyle(e).direction===`rtl`?`rtl`:`ltr`)},[a.anchorRef,a.triggerRef]);let j=f(h??(a.isSub?o.defaultSubPlacement(k===`rtl`):`bottom-start`),k===`rtl`),M=t.useFloatingPosition(a.anchorRef??a.triggerRef,D,{open:!0,placement:j,offset:g??(a.isSub?4:8)}),N=M.isPositioned,P=M.placement.split(`-`)[0],F=e.useOverlayLayer({active:!0,elements:()=>[D,a.anchorRef??a.triggerRef],onEscape:()=>a.setOpen(!1,{restore:`force`}),onOutsidePress:e=>{if(a.isSub){a.setOpen(!1,{restore:`auto`});return}let t=e.target instanceof Element?e.target:null;a.setOpen(!1,{restore:t?.closest(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]`)?`none`:`deferred`})}});(0,c.useEffect)(()=>{if(!N||a.openFocusRef.current===`none`)return;let e=a.contentRef.current;if(e)return n.focusWhenReady(()=>{let t=a.openFocusRef.current;if(t===`none`||!e.isConnected)return null;let n=o.getMenuItems(e),r=(t===`first`?n[0]:t===`last`?n[n.length-1]:null)??e;return o.focusItem(r),document.activeElement===r&&(a.openFocusRef.current=`none`),r})},[N,a.focusNonce,a.openFocusRef,a.contentRef]),(0,c.useLayoutEffect)(()=>{let{contentRef:e,triggerRef:t,restoreModeRef:n,isSub:r}=a,i=e.current,o=`[data-menu-tree="${p.treeId}"]`;return()=>{let e=n.current;if(n.current=`auto`,r&&p.closingAllRef.current)return;let a=document.activeElement,s=!a||a===document.body||(r?!!i?.contains(a):!!a.closest(o)),c=()=>{let e=t.current;e?.isConnected&&e.focus({preventScroll:!0})};e===`force`||e===`auto`&&s?c():e===`deferred`&&window.setTimeout(c,0)}},[]);let I=(0,c.useRef)({buffer:``,timer:0});(0,c.useEffect)(()=>()=>window.clearTimeout(I.current.timer),[]);let L=(e,t,n)=>{let r=I.current;window.clearTimeout(r.timer),r.buffer+=e.toLowerCase(),r.timer=window.setTimeout(()=>{r.buffer=``},d);let i=r.buffer,a=Array.from(i).every(e=>e===i[0]),s=a?i[0]:i,c=a?n+1:Math.max(n,0),l=[...t.slice(c),...t.slice(0,c)].find(e=>o.getItemText(e).toLowerCase().startsWith(s));l&&o.focusItem(l)},R=e=>{if(x?.(e),e.defaultPrevented)return;let t=a.contentRef.current,n=e.target;if(!t||!t.contains(n))return;let r=o.getMenuItems(t),i=n.closest(`[${o.ITEM_ATTR}]`),s=i?r.indexOf(i):-1,c=getComputedStyle(t).direction===`rtl`,l=c?`ArrowLeft`:`ArrowRight`,u=c?`ArrowRight`:`ArrowLeft`,d=r.length-1,f=()=>{a.openSub!==null&&a.setOpenSub(null)};switch(e.key){case`ArrowDown`:e.preventDefault(),f(),r.length&&o.focusItem(r[(s+1)%r.length]);return;case`ArrowUp`:e.preventDefault(),f(),r.length&&o.focusItem(r[s<=0?d:s-1]);return;case`Home`:case`PageUp`:e.preventDefault(),f(),o.focusItem(r[0]);return;case`End`:case`PageDown`:e.preventDefault(),f(),o.focusItem(r[d]);return;case l:i?.getAttribute(`aria-haspopup`)===`menu`&&(e.preventDefault(),i.click());return;case u:a.isSub&&(e.preventDefault(),a.setOpen(!1,{restore:`force`}));return;case`Enter`:case` `:if(e.key===` `&&I.current.buffer){e.preventDefault(),L(` `,r,s);return}if(i){if(e.preventDefault(),e.repeat)return;i.click()}return;case`Tab`:p.focusRootTrigger(),p.closeAll(`none`);return;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),L(e.key,r,s))}},z=e=>{C?.(e);let t=a.contentRef.current,n=e.target;if(t&&n.hasAttribute(`data-menu-item`)&&t.contains(n))for(let e of o.getMenuItems(t))e.tabIndex=e===n?0:-1},B=e=>{S?.(e),a.parent?.cancelSubTimer()},V=T??(w?void 0:a.triggerRef.current?.id||a.triggerId),H=_===void 0?y:{...y,"--_max-h":typeof _==`number`?`${_}px`:_};return(0,l.jsx)(e.OverlayLayerProvider,{layer:F,children:(0,l.jsx)(o.MenuLevelContext.Provider,{value:a,children:(0,l.jsx)(`div`,{ref:D,className:s.default.positioner,style:M.style,dir:k,children:(0,l.jsx)(`div`,{"aria-label":w,"aria-labelledby":V,tabIndex:-1,...E,role:`menu`,"aria-orientation":`vertical`,id:a.contentId,ref:O,className:i.cx(s.default.content,u[p.size],v),style:H,"data-side":P,"data-state":`open`,"data-menu-tree":p.treeId,onKeyDown:R,onPointerEnter:B,onFocus:z,children:m})})})})};exports.MenuContent=p,exports.MenuSurface=m;

package/dist/components/navigation/Menu/MenuContent.d.ts

@@ -0,0 +1,46 @@
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from 'react';
+import { Placement } from '../../../types/common';
+import { MenuLevelContextValue, MenuTreeContextValue } from './MenuContext';
+export interface MenuContentProps extends Omit<ComponentPropsWithRef<"div">, "id" | "role"> {
+    /** Menu items, groups, separators, and submenus. */
+    children?: ReactNode;
+    /**
+     * Preferred side and alignment relative to the trigger. Flips to the other
+     * side when there isn't room. On the top and bottom sides, `start` and
+     * `end` alignment follow the text direction: `bottom-start` lines up with
+     * the trigger's left edge in left-to-right layouts and its right edge in
+     * right-to-left ones. @default "bottom-start"
+     */
+    placement?: Placement;
+    /** Gap between the trigger and the menu, in px. @default 8 */
+    offset?: number;
+    /**
+     * Maximum height (any CSS length, or px as a number). Longer menus scroll
+     * inside. Always capped to the viewport. @default 24rem
+     */
+    maxHeight?: CSSProperties["maxHeight"];
+    /** Element to portal into. @default document.body */
+    container?: HTMLElement | null;
+}
+export interface MenuSubContentProps extends Omit<MenuContentProps, "placement" | "offset"> {
+    /**
+     * Preferred side and alignment relative to the `Menu.SubTrigger`. Flips
+     * when there isn't room. @default "right-start" (or "left-start" in RTL)
+     */
+    placement?: Placement;
+    /** Gap between the sub trigger and the submenu, in px. @default 4 */
+    offset?: number;
+}
+/**
+ * The floating menu (`role="menu"`). Rendered in a portal, positioned
+ * against `Menu.Trigger` with flip and viewport clamping, and mounted only
+ * while open.
+ */
+export declare const MenuContent: ({ container, ...props }: MenuContentProps) => import("react").JSX.Element | null;
+interface MenuSurfaceProps extends MenuContentProps {
+    level: MenuLevelContextValue;
+    tree: MenuTreeContextValue;
+}
+/** @internal The surface shared by `Menu.Content` and `Menu.SubContent`. */
+export declare const MenuSurface: ({ level, tree, children, placement, offset, maxHeight, className, style, ref, onKeyDown, onPointerEnter, onFocus, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: MenuSurfaceProps) => import("react").JSX.Element;
+export {};

package/dist/components/navigation/Menu/MenuContent.mjs

@@ -0,0 +1,180 @@
+import { OverlayLayerProvider as e, useOverlayLayer as t } from "../../../hooks/useOverlayLayer.mjs";
+import { useFloatingPosition as n } from "../../../hooks/useFloatingPosition.mjs";
+import { focusWhenReady as r } from "../../../hooks/useFocusTrap.mjs";
+import { useMergedRef as i } from "../../../hooks/useMergedRef.mjs";
+import { cx as a } from "../../../utils/cx.mjs";
+import { Portal as o } from "../../utilities/Portal/Portal.mjs";
+import { ITEM_ATTR as s, MenuLevelContext as c, defaultSubPlacement as l, focusItem as u, getItemText as d, getMenuItems as f, useMenuLevel as p, useMenuTree as m } from "./MenuContext.mjs";
+import h from "./Menu.module.css.mjs";
+import { useEffect as g, useLayoutEffect as _, useRef as v, useState as y } from "react";
+import { jsx as b } from "react/jsx-runtime";
+//#region src/components/navigation/Menu/MenuContent.tsx
+var x = {
+	sm: h.sm,
+	md: h.md,
+	lg: h.lg
+}, S = 500;
+function C(e, t) {
+	if (!t) return e;
+	let [n, r] = e.split("-");
+	return n !== "top" && n !== "bottom" || !r ? e : `${n}-${r === "start" ? "end" : "start"}`;
+}
+var w = ({ container: e, ...t }) => {
+	let n = p("Menu.Content"), r = m("Menu.Content");
+	return n.open ? /* @__PURE__ */ b(o, {
+		container: e,
+		children: /* @__PURE__ */ b(T, {
+			...t,
+			level: n,
+			tree: r
+		})
+	}) : null;
+}, T = ({ level: o, tree: p, children: m, placement: w, offset: T, maxHeight: E, className: D, style: O, ref: k, onKeyDown: A, onPointerEnter: j, onFocus: M, "aria-label": N, "aria-labelledby": P, ...F }) => {
+	let I = v(null), L = i(o.contentRef, k), [R, z] = y("ltr");
+	_(() => {
+		let e = (o.anchorRef ?? o.triggerRef).current;
+		e && z(getComputedStyle(e).direction === "rtl" ? "rtl" : "ltr");
+	}, [o.anchorRef, o.triggerRef]);
+	let B = C(w ?? (o.isSub ? l(R === "rtl") : "bottom-start"), R === "rtl"), V = n(o.anchorRef ?? o.triggerRef, I, {
+		open: !0,
+		placement: B,
+		offset: T ?? (o.isSub ? 4 : 8)
+	}), H = V.isPositioned, U = V.placement.split("-")[0], W = t({
+		active: !0,
+		elements: () => [I, o.anchorRef ?? o.triggerRef],
+		onEscape: () => o.setOpen(!1, { restore: "force" }),
+		onOutsidePress: (e) => {
+			if (o.isSub) {
+				o.setOpen(!1, { restore: "auto" });
+				return;
+			}
+			let t = e.target instanceof Element ? e.target : null;
+			o.setOpen(!1, { restore: t?.closest("a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]") ? "none" : "deferred" });
+		}
+	});
+	g(() => {
+		if (!H || o.openFocusRef.current === "none") return;
+		let e = o.contentRef.current;
+		if (e) return r(() => {
+			let t = o.openFocusRef.current;
+			if (t === "none" || !e.isConnected) return null;
+			let n = f(e), r = (t === "first" ? n[0] : t === "last" ? n[n.length - 1] : null) ?? e;
+			return u(r), document.activeElement === r && (o.openFocusRef.current = "none"), r;
+		});
+	}, [
+		H,
+		o.focusNonce,
+		o.openFocusRef,
+		o.contentRef
+	]), _(() => {
+		let { contentRef: e, triggerRef: t, restoreModeRef: n, isSub: r } = o, i = e.current, a = `[data-menu-tree="${p.treeId}"]`;
+		return () => {
+			let e = n.current;
+			if (n.current = "auto", r && p.closingAllRef.current) return;
+			let o = document.activeElement, s = !o || o === document.body || (r ? !!i?.contains(o) : !!o.closest(a)), c = () => {
+				let e = t.current;
+				e?.isConnected && e.focus({ preventScroll: !0 });
+			};
+			e === "force" || e === "auto" && s ? c() : e === "deferred" && window.setTimeout(c, 0);
+		};
+	}, []);
+	let G = v({
+		buffer: "",
+		timer: 0
+	});
+	g(() => () => window.clearTimeout(G.current.timer), []);
+	let K = (e, t, n) => {
+		let r = G.current;
+		window.clearTimeout(r.timer), r.buffer += e.toLowerCase(), r.timer = window.setTimeout(() => {
+			r.buffer = "";
+		}, S);
+		let i = r.buffer, a = Array.from(i).every((e) => e === i[0]), o = a ? i[0] : i, s = a ? n + 1 : Math.max(n, 0), c = [...t.slice(s), ...t.slice(0, s)].find((e) => d(e).toLowerCase().startsWith(o));
+		c && u(c);
+	}, q = (e) => {
+		if (A?.(e), e.defaultPrevented) return;
+		let t = o.contentRef.current, n = e.target;
+		if (!t || !t.contains(n)) return;
+		let r = f(t), i = n.closest(`[${s}]`), a = i ? r.indexOf(i) : -1, c = getComputedStyle(t).direction === "rtl", l = c ? "ArrowLeft" : "ArrowRight", d = c ? "ArrowRight" : "ArrowLeft", m = r.length - 1, h = () => {
+			o.openSub !== null && o.setOpenSub(null);
+		};
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), h(), r.length && u(r[(a + 1) % r.length]);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), h(), r.length && u(r[a <= 0 ? m : a - 1]);
+				return;
+			case "Home":
+			case "PageUp":
+				e.preventDefault(), h(), u(r[0]);
+				return;
+			case "End":
+			case "PageDown":
+				e.preventDefault(), h(), u(r[m]);
+				return;
+			case l:
+				i?.getAttribute("aria-haspopup") === "menu" && (e.preventDefault(), i.click());
+				return;
+			case d:
+				o.isSub && (e.preventDefault(), o.setOpen(!1, { restore: "force" }));
+				return;
+			case "Enter":
+			case " ":
+				if (e.key === " " && G.current.buffer) {
+					e.preventDefault(), K(" ", r, a);
+					return;
+				}
+				if (i) {
+					if (e.preventDefault(), e.repeat) return;
+					i.click();
+				}
+				return;
+			case "Tab":
+				p.focusRootTrigger(), p.closeAll("none");
+				return;
+			default: e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), K(e.key, r, a));
+		}
+	}, J = (e) => {
+		M?.(e);
+		let t = o.contentRef.current, n = e.target;
+		if (t && n.hasAttribute("data-menu-item") && t.contains(n)) for (let e of f(t)) e.tabIndex = e === n ? 0 : -1;
+	}, Y = (e) => {
+		j?.(e), o.parent?.cancelSubTimer();
+	}, X = P ?? (N ? void 0 : o.triggerRef.current?.id || o.triggerId), Z = E === void 0 ? O : {
+		...O,
+		"--_max-h": typeof E == "number" ? `${E}px` : E
+	};
+	return /* @__PURE__ */ b(e, {
+		layer: W,
+		children: /* @__PURE__ */ b(c.Provider, {
+			value: o,
+			children: /* @__PURE__ */ b("div", {
+				ref: I,
+				className: h.positioner,
+				style: V.style,
+				dir: R,
+				children: /* @__PURE__ */ b("div", {
+					"aria-label": N,
+					"aria-labelledby": X,
+					tabIndex: -1,
+					...F,
+					role: "menu",
+					"aria-orientation": "vertical",
+					id: o.contentId,
+					ref: L,
+					className: a(h.content, x[p.size], D),
+					style: Z,
+					"data-side": U,
+					"data-state": "open",
+					"data-menu-tree": p.treeId,
+					onKeyDown: q,
+					onPointerEnter: Y,
+					onFocus: J,
+					children: m
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { w as MenuContent, T as MenuSurface };

package/dist/components/navigation/Menu/MenuContext.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t=(0,e.createContext)(null),n=(0,e.createContext)(null),r=(0,e.createContext)(null);function i(n){let r=(0,e.useContext)(t);if(!r)throw Error(`${n} must be rendered inside <Menu>.`);return r}function a(t){let r=(0,e.useContext)(n);if(!r)throw Error(`${t} must be rendered inside <Menu>.`);return r}function o(t){let n=(0,e.useContext)(r);if(!n)throw Error(`${t} must be rendered inside <Menu.Sub>.`);return n}function s(){let[t,n]=(0,e.useState)(null),r=(0,e.useRef)(void 0),i=(0,e.useRef)(void 0),a=(0,e.useCallback)(()=>{r.current!==void 0&&window.clearTimeout(r.current),r.current=void 0,i.current=void 0},[]),o=(0,e.useCallback)(e=>{a(),n(e)},[a]),s=(0,e.useCallback)(e=>{a(),n(t=>t===e?null:t)},[a]),c=(0,e.useCallback)((e,t)=>{(r.current===void 0||i.current!==e)&&(a(),i.current=e,r.current=window.setTimeout(()=>{r.current=void 0,i.current=void 0,n(e)},t))},[a]);return(0,e.useEffect)(()=>a,[a]),(0,e.useMemo)(()=>({openSub:t,setOpenSub:o,closeSub:s,scheduleSub:c,cancelSubTimer:a}),[t,o,s,c,a])}var c=`data-menu-item`;function l(e){return Array.from(e.querySelectorAll(`[${c}]`)).filter(t=>t.closest(`[role="menu"]`)===e)}function u(e){return e.getAttribute(`data-menu-text`)||(e.querySelector(`[data-menu-label]`)?.textContent??e.textContent??``).trim()}function d(e){e&&(e.focus({preventScroll:!0}),e.scrollIntoView?.({block:`nearest`}))}var f=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]`;function p(e){return e?`left-start`:`right-start`}exports.ITEM_ATTR=c,exports.MenuLevelContext=n,exports.MenuSubContext=r,exports.MenuTreeContext=t,exports.PRESS_FOCUSABLE=f,exports.defaultSubPlacement=p,exports.focusItem=d,exports.getItemText=u,exports.getMenuItems=l,exports.useMenuLevel=a,exports.useMenuSub=o,exports.useMenuTree=i,exports.useSubmenuState=s;

package/dist/components/navigation/Menu/MenuContext.d.ts

@@ -0,0 +1,84 @@
+import { RefObject } from 'react';
+import { Placement, Size } from '../../../types/common';
+/** Where focus goes when a menu level opens. */
+export type MenuFocusTarget = "first" | "last" | "content" | "none";
+/**
+ * How focus is handled when a menu level closes.
+ * - `force`: always move focus back to the level's trigger (Escape, selection, ArrowLeft).
+ * - `auto`: only if focus was inside the closing level (or got lost to `<body>`).
+ * - `deferred`: after the current pointer interaction settles (outside press on a non-focusable spot).
+ * - `none`: leave focus alone (Tab, an outside press that lands on something focusable).
+ */
+export type MenuRestoreMode = "force" | "auto" | "deferred" | "none";
+/** Shared by every level of one menu tree (the root menu and its submenus). */
+export interface MenuTreeContextValue {
+    /** Unique id of the tree, written to every menu surface as `data-menu-tree`. */
+    treeId: string;
+    size: Size;
+    /** Root-level default for `closeOnSelect`; undefined means "per item type". */
+    closeOnSelect?: boolean;
+    /** Closes the whole tree. */
+    closeAll: (restore?: MenuRestoreMode) => void;
+    /** Moves focus to the root trigger right now (used by Tab). */
+    focusRootTrigger: () => void;
+    /** True while the whole tree is closing, so submenus skip their own focus restore. */
+    closingAllRef: RefObject<boolean>;
+}
+/** One level of the tree: the root menu or one submenu. */
+export interface MenuLevelContextValue {
+    /** Unique id of this level (a submenu's id is what its parent's `openSub` holds). */
+    id: string;
+    isSub: boolean;
+    open: boolean;
+    setOpen: (open: boolean, options?: {
+        focus?: MenuFocusTarget;
+        restore?: MenuRestoreMode;
+    }) => void;
+    /** Bumped on every open request, so an already-open level can still move focus in. */
+    focusNonce: number;
+    openFocusRef: RefObject<MenuFocusTarget>;
+    restoreModeRef: RefObject<MenuRestoreMode>;
+    triggerRef: RefObject<HTMLElement | null>;
+    /** What the surface is positioned against, when not the trigger (ContextMenu's pointer anchor). */
+    anchorRef?: RefObject<HTMLElement | null>;
+    contentRef: RefObject<HTMLElement | null>;
+    contentId: string;
+    triggerId: string;
+    /** The submenu of this level that is open (only one at a time). */
+    openSub: string | null;
+    setOpenSub: (id: string | null) => void;
+    /** Closes submenu `id` if it is the open one. */
+    closeSub: (id: string) => void;
+    /** Opens (id) or closes (null) a submenu after `delay` ms; repeated calls for the same target are ignored. */
+    scheduleSub: (id: string | null, delay: number) => void;
+    cancelSubTimer: () => void;
+    /** The level this one is nested in (null for the root). */
+    parent: MenuLevelContextValue | null;
+}
+export declare const MenuTreeContext: import('react').Context<MenuTreeContextValue | null>;
+export declare const MenuLevelContext: import('react').Context<MenuLevelContextValue | null>;
+/** Provided by `Menu.Sub` for its `SubTrigger` and `SubContent`. */
+export declare const MenuSubContext: import('react').Context<MenuLevelContextValue | null>;
+export declare function useMenuTree(part: string): MenuTreeContextValue;
+export declare function useMenuLevel(part: string): MenuLevelContextValue;
+export declare function useMenuSub(part: string): MenuLevelContextValue;
+/** Which submenu of a level is open, with delayed open/close for pointer hover. */
+export declare function useSubmenuState(): {
+    openSub: string | null;
+    setOpenSub: (id: string | null) => void;
+    closeSub: (id: string) => void;
+    scheduleSub: (id: string | null, delay: number) => void;
+    cancelSubTimer: () => void;
+};
+/** Attribute on every item element (menuitem, menuitemcheckbox, menuitemradio). */
+export declare const ITEM_ATTR = "data-menu-item";
+/** The items of one menu surface, in DOM order (not those of nested submenus). */
+export declare function getMenuItems(content: HTMLElement): HTMLElement[];
+/** The text used for typeahead: `data-menu-text`, else the label's text. */
+export declare function getItemText(item: HTMLElement): string;
+/** Focuses `el` without scrolling the page, and scrolls it into view inside the menu. */
+export declare function focusItem(el: HTMLElement | null | undefined): void;
+/** Elements that take focus on press, so an outside press on them keeps focus there. */
+export declare const PRESS_FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]";
+/** Placement used by a submenu when none is given. */
+export declare function defaultSubPlacement(rtl: boolean): Placement;