@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

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

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../../utils/flattenChildren.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../../primitives/Button/Button.cjs.js"),o=require("../../primitives/Icon/icons.cjs.js"),s=require("../Link/Link.cjs.js"),c=require("./Breadcrumbs.module.css.cjs.js");let l=require("react"),u=require("react/jsx-runtime");var d=globalThis.process?.env?.NODE_ENV!==`production`,f=(0,l.createContext)(null),p=(0,l.createContext)(null),m={sm:c.default.sm,md:c.default.md,lg:c.default.lg},h={sm:`xs`,md:`sm`,lg:`md`},g=`a[href], button:not([disabled]), [tabindex]:not([tabindex='-1'])`;function _({children:i,"aria-label":s,size:d=`md`,separator:_,linkAs:v,maxItems:y,itemsBeforeCollapse:b=1,itemsAfterCollapse:x=1,expanded:S,defaultExpanded:C=!1,onExpandedChange:w,expandLabel:T,className:E,...D}){let O=t.useMessages(),k=T??O.breadcrumbs.expand,A=s??O.breadcrumbs.nav,[j,M]=e.useControllableState({value:S,defaultValue:C,onChange:w}),N=(0,l.useRef)(null),P=(0,l.useRef)(!1),F=r.flattenChildren(i),I=F.length,L=Math.max(0,Math.floor(b)),R=Math.max(1,Math.floor(x)),z=!j&&y!==void 0&&I>y&&L+R<I,B=z?I-L-R:0,V=(0,l.useMemo)(()=>({size:d,linkAs:v,separator:_??(0,u.jsx)(o.ChevronRightIcon,{size:h[d],className:c.default.chevron})}),[d,v,_]);(0,l.useLayoutEffect)(()=>{if(!j||!P.current)return;P.current=!1;let e=N.current?.children[L];if(!e)return;let t=e.querySelector(g);t?t.focus():(e.tabIndex=-1,e.focus())},[j,L]);let H=(e,t)=>(0,u.jsx)(p.Provider,{value:{isLast:t===I-1},children:e},e.key??t),U=[];return F.forEach((e,t)=>{let n=z&&t>=L&&t<I-R;z&&t===L&&U.push((0,u.jsxs)(`li`,{className:c.default.item,children:[(0,u.jsx)(a.IconButton,{variant:`ghost`,tone:`neutral`,size:`sm`,"aria-label":k(B),className:c.default.expand,onClick:()=>{P.current=!0,M(!0),requestAnimationFrame(()=>{P.current=!1})},children:(0,u.jsx)(o.MoreHorizontalIcon,{})}),(0,u.jsx)(`span`,{className:c.default.separator,"aria-hidden":`true`,children:V.separator})]},`breadcrumbs-expand`)),n||U.push(H(e,t))}),(0,u.jsx)(`nav`,{...D,"aria-label":A,className:n.cx(c.default.root,m[d],E),children:(0,u.jsx)(f.Provider,{value:V,children:(0,u.jsx)(`ol`,{ref:N,className:c.default.list,children:U})})})}var v=e=>{let t=e.currentTarget;t.dataset.title===void 0&&(t.scrollWidth>t.clientWidth?t.title=t.textContent??``:t.removeAttribute(`title`))};function y(e){let{href:t,as:r,linkProps:a,icon:m,current:g,title:_,children:y,className:b,"aria-label":x,...S}=e,C=(0,l.useContext)(f),w=(0,l.useContext)(p)?.isLast??!0,T=g??w,E=C?.size??`md`,D=y==null||y===!1||y===``,O=r??C?.linkAs,k=!T&&(t!==void 0||a!==void 0&&O!==void 0);d&&!T&&t===void 0&&a!==void 0&&O===void 0&&console.warn("[Breadcrumbs.Item] `linkProps` without `href` needs a link component (`as` on the item or `linkAs` on Breadcrumbs); rendering plain text.");let A=!k&&x!==void 0,j=(0,u.jsxs)(`span`,{className:c.default.content,children:[m!=null&&(0,u.jsx)(`span`,{className:c.default.icon,"aria-hidden":`true`,children:m}),!D&&(0,u.jsx)(`span`,{className:c.default.text,title:_,"data-title":_===void 0?void 0:``,"aria-hidden":A?!0:void 0,onPointerEnter:v,children:y}),A&&(0,u.jsx)(i.VisuallyHidden,{children:x})]}),M;if(k){let e={...a,...t===void 0?null:{href:t},as:O,variant:`subtle`,tone:`neutral`,size:E,underline:`none`,"aria-label":x,className:n.cx(c.default.link,D&&c.default.iconOnly),children:j};M=(0,u.jsx)(s.Link,{...e})}else M=(0,u.jsx)(`span`,{className:n.cx(T?c.default.current:c.default.plain,D&&c.default.iconOnly),"aria-current":T?`page`:void 0,children:j});return(0,u.jsxs)(`li`,{...S,className:n.cx(c.default.item,b),children:[M,!w&&(0,u.jsx)(`span`,{className:c.default.separator,"aria-hidden":`true`,children:C?.separator??(0,u.jsx)(o.ChevronRightIcon,{size:h[E],className:c.default.chevron})})]})}var b=Object.assign(_,{Item:y});exports.BreadcrumbItem=y,exports.Breadcrumbs=b;

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

@@ -0,0 +1,111 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { Size } from '../../../types/common';
+export interface BreadcrumbsProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
+    /** `Breadcrumbs.Item` elements, from the top of the hierarchy to the current page. */
+    children?: ReactNode;
+    /** Accessible name of the `<nav>` landmark. Localize it here. @default "Breadcrumb" */
+    "aria-label"?: string;
+    /** Type size, spacing, and separator size. @default "md" */
+    size?: Size;
+    /**
+     * Decorative separator shown between items (e.g. `"/"` or an icon). It is
+     * hidden from assistive technology. Defaults to a chevron that flips in RTL.
+     */
+    separator?: ReactNode;
+    /**
+     * Component used for every item's link, such as a React Router or Next.js
+     * `Link`. Items can override it with their own `as`. Pass router-only
+     * props (like `to`) through each item's `linkProps`. The component must
+     * forward `className`, `ref`, and ARIA props to its `<a>`.
+     */
+    linkAs?: ElementType;
+    /**
+     * When there are more items than this, the middle ones collapse into a
+     * "show more" button. Leave unset to never collapse.
+     */
+    maxItems?: number;
+    /** Items kept visible before the collapsed group. @default 1 */
+    itemsBeforeCollapse?: number;
+    /** Items kept visible after the collapsed group. Values below 1 are treated as 1, so the current page stays visible. @default 1 */
+    itemsAfterCollapse?: number;
+    /** Controlled expanded state of a collapsed trail. */
+    expanded?: boolean;
+    /** Initial expanded state when uncontrolled. @default false */
+    defaultExpanded?: boolean;
+    /** Called with the new expanded state when the collapsed items are revealed. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Accessible name of the expand button, given the number of hidden items.
+     * Localize it here. @default (n) => `Show ${n} more breadcrumbs`
+     */
+    expandLabel?: (hiddenCount: number) => string;
+}
+/**
+ * A trail of links showing where the current page sits in the site
+ * hierarchy. Renders a `<nav>` landmark containing an ordered list; the last
+ * item is the current page (`aria-current="page"`) and is not a link.
+ * Long trails can collapse their middle items behind a "show more" button
+ * that expands them in place.
+ */
+declare function BreadcrumbsRoot({ children, "aria-label": ariaLabelProp, size, separator, linkAs, maxItems, itemsBeforeCollapse, itemsAfterCollapse, expanded: expandedProp, defaultExpanded, onExpandedChange, expandLabel: expandLabelProp, className, ...rest }: BreadcrumbsProps): import("react").JSX.Element;
+interface BreadcrumbItemBaseProps<C extends ElementType> {
+    /** Destination URL. Omit it (and `linkProps`) for a crumb that isn't a page. */
+    href?: string;
+    /**
+     * Component used for this item's link, such as a router `Link`. Overrides
+     * the `linkAs` set on `Breadcrumbs`. Pass its own props (e.g. `to`) through
+     * `linkProps`.
+     */
+    as?: C;
+    /**
+     * Extra props for the link element, typed for `as` (e.g. `{ to: "/teams" }`
+     * for React Router). Setting it makes a non-current item a link even
+     * without `href`. With `linkAs` set once on `Breadcrumbs`, give the item
+     * the component as a type argument so these props are typed for it too:
+     * `<Breadcrumbs.Item<typeof RouterLink> linkProps={{ to: "/teams" }}>`.
+     */
+    linkProps?: Partial<Omit<ComponentPropsWithRef<C>, "children" | "className">>;
+    /** Icon before the label (e.g. `<HomeIcon />`). Decorative; it scales with the text. */
+    icon?: ReactNode;
+    /**
+     * Marks this item as the current page: it renders as text with
+     * `aria-current="page"` instead of a link. Defaults to `true` for the last
+     * item only.
+     */
+    current?: boolean;
+    /** Tooltip text. When a label truncates, its full text is shown as a tooltip automatically. */
+    title?: string;
+}
+interface BreadcrumbItemWithLabel<C extends ElementType> extends BreadcrumbItemBaseProps<C> {
+    /** The visible label. */
+    children: ReactNode;
+    /** Overrides the accessible name. Usually unnecessary when there is a visible label. */
+    "aria-label"?: string;
+}
+interface BreadcrumbItemIconOnly<C extends ElementType> extends BreadcrumbItemBaseProps<C> {
+    /** No visible label: the item shows only its `icon`. */
+    children?: undefined;
+    /** Icon to show. Required for an icon-only item. */
+    icon: ReactNode;
+    /** Accessible name. Required for an icon-only item (e.g. "Home"). */
+    "aria-label": string;
+}
+type BreadcrumbItemOwnProps<C extends ElementType> = BreadcrumbItemWithLabel<C> | BreadcrumbItemIconOnly<C>;
+/** Props for `Breadcrumbs.Item`. Remaining props go to the `<li>`. */
+export type BreadcrumbItemProps<C extends ElementType = "a"> = BreadcrumbItemOwnProps<C> & Omit<ComponentPropsWithRef<"li">, keyof BreadcrumbItemBaseProps<C> | "children" | "aria-label">;
+/**
+ * One step in a `Breadcrumbs` trail. Renders an `<li>` with a link (via the
+ * library `Link`), or plain text with `aria-current="page"` for the current
+ * page. Also exported as `BreadcrumbItem`.
+ */
+export declare function BreadcrumbItem<C extends ElementType = "a">(props: BreadcrumbItemProps<C>): import("react").JSX.Element;
+type BreadcrumbsComponent = typeof BreadcrumbsRoot & {
+    /** One step in the trail. See `BreadcrumbItem`. */
+    Item: typeof BreadcrumbItem;
+};
+/**
+ * A trail of links showing where the current page sits in the site
+ * hierarchy. Compose with `Breadcrumbs.Item`.
+ */
+export declare const Breadcrumbs: BreadcrumbsComponent;
+export {};

package/dist/components/navigation/Breadcrumbs/Breadcrumbs.mjs

@@ -0,0 +1,147 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { flattenChildren as r } from "../../../utils/flattenChildren.mjs";
+import { VisuallyHidden as i } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { IconButton as a } from "../../primitives/Button/Button.mjs";
+import { ChevronRightIcon as o, MoreHorizontalIcon as s } from "../../primitives/Icon/icons.mjs";
+import { Link as c } from "../Link/Link.mjs";
+import l from "./Breadcrumbs.module.css.mjs";
+import { createContext as u, useContext as d, useLayoutEffect as f, useMemo as p, useRef as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/navigation/Breadcrumbs/Breadcrumbs.tsx
+var _ = globalThis.process?.env?.NODE_ENV !== "production", v = u(null), y = u(null), b = {
+	sm: l.sm,
+	md: l.md,
+	lg: l.lg
+}, x = {
+	sm: "xs",
+	md: "sm",
+	lg: "md"
+}, S = "a[href], button:not([disabled]), [tabindex]:not([tabindex='-1'])";
+function C({ children: i, "aria-label": c, size: u = "md", separator: d, linkAs: _, maxItems: C, itemsBeforeCollapse: w = 1, itemsAfterCollapse: T = 1, expanded: E, defaultExpanded: D = !1, onExpandedChange: O, expandLabel: k, className: A, ...j }) {
+	let M = t(), N = k ?? M.breadcrumbs.expand, P = c ?? M.breadcrumbs.nav, [F, I] = e({
+		value: E,
+		defaultValue: D,
+		onChange: O
+	}), L = m(null), R = m(!1), z = r(i), B = z.length, V = Math.max(0, Math.floor(w)), H = Math.max(1, Math.floor(T)), U = !F && C !== void 0 && B > C && V + H < B, W = U ? B - V - H : 0, G = p(() => ({
+		size: u,
+		linkAs: _,
+		separator: d ?? /* @__PURE__ */ h(o, {
+			size: x[u],
+			className: l.chevron
+		})
+	}), [
+		u,
+		_,
+		d
+	]);
+	f(() => {
+		if (!F || !R.current) return;
+		R.current = !1;
+		let e = L.current?.children[V];
+		if (!e) return;
+		let t = e.querySelector(S);
+		t ? t.focus() : (e.tabIndex = -1, e.focus());
+	}, [F, V]);
+	let K = (e, t) => /* @__PURE__ */ h(y.Provider, {
+		value: { isLast: t === B - 1 },
+		children: e
+	}, e.key ?? t), q = [];
+	return z.forEach((e, t) => {
+		let n = U && t >= V && t < B - H;
+		U && t === V && q.push(/* @__PURE__ */ g("li", {
+			className: l.item,
+			children: [/* @__PURE__ */ h(a, {
+				variant: "ghost",
+				tone: "neutral",
+				size: "sm",
+				"aria-label": N(W),
+				className: l.expand,
+				onClick: () => {
+					R.current = !0, I(!0), requestAnimationFrame(() => {
+						R.current = !1;
+					});
+				},
+				children: /* @__PURE__ */ h(s, {})
+			}), /* @__PURE__ */ h("span", {
+				className: l.separator,
+				"aria-hidden": "true",
+				children: G.separator
+			})]
+		}, "breadcrumbs-expand")), n || q.push(K(e, t));
+	}), /* @__PURE__ */ h("nav", {
+		...j,
+		"aria-label": P,
+		className: n(l.root, b[u], A),
+		children: /* @__PURE__ */ h(v.Provider, {
+			value: G,
+			children: /* @__PURE__ */ h("ol", {
+				ref: L,
+				className: l.list,
+				children: q
+			})
+		})
+	});
+}
+var w = (e) => {
+	let t = e.currentTarget;
+	t.dataset.title === void 0 && (t.scrollWidth > t.clientWidth ? t.title = t.textContent ?? "" : t.removeAttribute("title"));
+};
+function T(e) {
+	let { href: t, as: r, linkProps: a, icon: s, current: u, title: f, children: p, className: m, "aria-label": b, ...S } = e, C = d(v), T = d(y)?.isLast ?? !0, E = u ?? T, D = C?.size ?? "md", O = p == null || p === !1 || p === "", k = r ?? C?.linkAs, A = !E && (t !== void 0 || a !== void 0 && k !== void 0);
+	_ && !E && t === void 0 && a !== void 0 && k === void 0 && console.warn("[Breadcrumbs.Item] `linkProps` without `href` needs a link component (`as` on the item or `linkAs` on Breadcrumbs); rendering plain text.");
+	let j = !A && b !== void 0, M = /* @__PURE__ */ g("span", {
+		className: l.content,
+		children: [
+			s != null && /* @__PURE__ */ h("span", {
+				className: l.icon,
+				"aria-hidden": "true",
+				children: s
+			}),
+			!O && /* @__PURE__ */ h("span", {
+				className: l.text,
+				title: f,
+				"data-title": f === void 0 ? void 0 : "",
+				"aria-hidden": j ? !0 : void 0,
+				onPointerEnter: w,
+				children: p
+			}),
+			j && /* @__PURE__ */ h(i, { children: b })
+		]
+	}), N;
+	if (A) {
+		let e = {
+			...a,
+			...t === void 0 ? null : { href: t },
+			as: k,
+			variant: "subtle",
+			tone: "neutral",
+			size: D,
+			underline: "none",
+			"aria-label": b,
+			className: n(l.link, O && l.iconOnly),
+			children: M
+		};
+		N = /* @__PURE__ */ h(c, { ...e });
+	} else N = /* @__PURE__ */ h("span", {
+		className: n(E ? l.current : l.plain, O && l.iconOnly),
+		"aria-current": E ? "page" : void 0,
+		children: M
+	});
+	return /* @__PURE__ */ g("li", {
+		...S,
+		className: n(l.item, m),
+		children: [N, !T && /* @__PURE__ */ h("span", {
+			className: l.separator,
+			"aria-hidden": "true",
+			children: C?.separator ?? /* @__PURE__ */ h(o, {
+				size: x[D],
+				className: l.chevron
+			})
+		})]
+	});
+}
+var E = Object.assign(C, { Item: T });
+//#endregion
+export { T as BreadcrumbItem, E as Breadcrumbs };

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

@@ -0,0 +1 @@
+var e=`_root_8gmpy_21`,t=`_sm_8gmpy_53`,n=`_md_8gmpy_65`,r=`_lg_8gmpy_73`,i=`_list_8gmpy_89`,a=`_item_8gmpy_109`,o=`_content_8gmpy_141`,s=`_text_8gmpy_155`,c=`_icon_8gmpy_181`,l=`_link_8gmpy_209`,u=`_iconOnly_8gmpy_237`,d=`_current_8gmpy_253`,f=`_plain_8gmpy_255`,p=`_separator_8gmpy_295`,m=`_chevron_8gmpy_313`,h=`_expand_8gmpy_325`,g={root:e,sm:t,md:n,lg:r,list:i,item:a,content:o,text:s,icon:c,link:l,iconOnly:u,current:d,plain:f,separator:p,chevron:m,expand:h};exports.chevron=m,exports.content=o,exports.current=d,exports.default=g,exports.expand=h,exports.icon=c,exports.iconOnly=u,exports.item=a,exports.lg=r,exports.link=l,exports.list=i,exports.md=n,exports.plain=f,exports.root=e,exports.separator=p,exports.sm=t,exports.text=s;

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

@@ -0,0 +1,21 @@
+//#region src/components/navigation/Breadcrumbs/Breadcrumbs.module.css
+var e = "_root_8gmpy_21", t = "_sm_8gmpy_53", n = "_md_8gmpy_65", r = "_lg_8gmpy_73", i = "_list_8gmpy_89", a = "_item_8gmpy_109", o = "_content_8gmpy_141", s = "_text_8gmpy_155", c = "_icon_8gmpy_181", l = "_link_8gmpy_209", u = "_iconOnly_8gmpy_237", d = "_current_8gmpy_253", f = "_plain_8gmpy_255", p = "_separator_8gmpy_295", m = "_chevron_8gmpy_313", h = "_expand_8gmpy_325", g = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	list: i,
+	item: a,
+	content: o,
+	text: s,
+	icon: c,
+	link: l,
+	iconOnly: u,
+	current: d,
+	plain: f,
+	separator: p,
+	chevron: m,
+	expand: h
+};
+//#endregion
+export { m as chevron, o as content, d as current, g as default, h as expand, c as icon, u as iconOnly, a as item, r as lg, l as link, i as list, n as md, f as plain, e as root, p as separator, t as sm, s as text };

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

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

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

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/refs.cjs.js"),n=require("../../../hooks/useMergedRef.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../../utils/slot.cjs.js"),a=require("../../utilities/Portal/Portal.cjs.js"),o=require("../Menu/MenuContext.cjs.js"),s=require("../Menu/MenuContent.cjs.js"),c=require("../Menu/useMenuRoot.cjs.js"),l=require("../Menu/MenuItem.cjs.js"),u=require("../Menu/MenuSub.cjs.js"),d=require("./ContextMenu.module.css.cjs.js");let f=require("react"),p=require("react/jsx-runtime");var m=(0,f.createContext)(null);function h(e){let t=(0,f.useContext)(m);if(!t)throw Error(`${e} must be rendered inside <ContextMenu>.`);return t}var g=({children:e,disabled:t=!1,longPressDelay:n=500,...r})=>{let i=(0,f.useRef)(null),{level:s,tree:l}=c.useMenuRoot({...r,anchorRef:i}),[u,h]=(0,f.useState)(null),[g,_]=(0,f.useState)(`ltr`),v={disabled:t,open:s.open,longPressDelay:n,openAt:(e,{focus:t,from:n,restoreTo:r})=>{s.triggerRef.current=r,_(getComputedStyle(n).direction===`rtl`?`rtl`:`ltr`),h(e),s.setOpen(!0,{focus:t})},close:()=>s.setOpen(!1,{restore:`none`})};return(0,p.jsx)(m.Provider,{value:v,children:(0,p.jsx)(o.MenuTreeContext.Provider,{value:l,children:(0,p.jsxs)(o.MenuLevelContext.Provider,{value:s,children:[u&&(0,p.jsx)(a.Portal,{children:(0,p.jsx)(`span`,{ref:i,className:d.default.anchor,dir:g,"aria-hidden":`true`,style:{left:u.x,top:u.y}},`${u.x},${u.y}`)}),e]})})})};function _(e){return e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey}var v=10,y=({children:e,asChild:a=!1,className:o,onContextMenu:s,onPointerDown:c,onPointerMove:l,onPointerUp:u,onPointerCancel:m,onKeyDown:g,ref:y,...b})=>{let x=h(`ContextMenu.Trigger`),S=a&&t.isSingleElement(e)?e:null,C=n.useMergedRef(y,S?t.getChildRef(S):void 0),w=(0,f.useRef)(0),T=(0,f.useRef)(null),E=()=>{T.current&&window.clearTimeout(T.current.timer),T.current=null};(0,f.useEffect)(()=>E,[]);let D=e=>{let t=document.activeElement;return t instanceof HTMLElement&&t!==document.body?t:e instanceof HTMLElement?e:null},O=e=>{if(s?.(e),x.disabled||e.defaultPrevented||(e.preventDefault(),Date.now()<w.current))return;if(e.clientX===0&&e.clientY===0){k(e.target);return}let t=e.target;x.openAt({x:e.clientX,y:e.clientY},{focus:`content`,from:t,restoreTo:D(null)})},k=e=>{let t=e.getBoundingClientRect(),n=getComputedStyle(e).direction===`rtl`;x.openAt({x:n?t.right:t.left,y:t.bottom},{focus:`first`,from:e,restoreTo:D(e)})},A={className:r.cx(d.default.trigger,o),"data-state":x.open?`open`:`closed`,"data-disabled":x.disabled?``:void 0,onContextMenu:O,onKeyDown:e=>{g?.(e),!(x.disabled||e.defaultPrevented||!_(e))&&(e.preventDefault(),w.current=Date.now()+500,k(e.target))},onPointerDown:e=>{if(c?.(e),x.disabled||e.defaultPrevented)return;if(e.button===2){e.preventDefault();return}if(e.pointerType!==`touch`||e.button!==0)return;E();let{clientX:t,clientY:n}=e,r=e.target;T.current={x:t,y:n,timer:window.setTimeout(()=>{T.current=null,w.current=Date.now()+800,x.openAt({x:t,y:n},{focus:`content`,from:r,restoreTo:D(r)})},x.longPressDelay)}},onPointerMove:e=>{l?.(e);let t=T.current;t&&Math.hypot(e.clientX-t.x,e.clientY-t.y)>v&&E()},onPointerUp:e=>{u?.(e),E()},onPointerCancel:e=>{m?.(e),E()}};return S?i.cloneSlot(S,{...b,...A},C):(0,p.jsx)(`div`,{...b,...A,ref:C,children:e})},b=({placement:t=`bottom-start`,offset:n=2,"aria-label":r,"aria-labelledby":i,...a})=>{let o=e.useMessages().contextMenu;return h(`ContextMenu.Content`),(0,p.jsx)(s.MenuContent,{...a,placement:t,offset:n,"aria-labelledby":i,"aria-label":i?r:r??o.label})},x=Object.assign(g,{Trigger:y,Content:b,Item:l.MenuItem,CheckboxItem:l.MenuCheckboxItem,RadioGroup:l.MenuRadioGroup,RadioItem:l.MenuRadioItem,Group:l.MenuGroup,Label:l.MenuLabel,Separator:l.MenuSeparator,Sub:u.MenuSub,SubTrigger:u.MenuSubTrigger,SubContent:u.MenuSubContent});exports.ContextMenu=x,exports.ContextMenuContent=b,exports.ContextMenuTrigger=y;

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

@@ -0,0 +1,67 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Size } from '../../../types/common';
+import { MenuContentProps } from '../Menu';
+export interface ContextMenuProps {
+    /** `ContextMenu.Trigger` and `ContextMenu.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 its submenus. @default "md" */
+    size?: Size;
+    /**
+     * Default for every item's `closeOnSelect`. When unset, plain items close
+     * the menu on selection; checkbox and radio items keep it open.
+     */
+    closeOnSelect?: boolean;
+    /** Turns the custom menu off, so the browser's own context menu shows. @default false */
+    disabled?: boolean;
+    /** How long a touch must be held to open the menu, in ms. @default 500 */
+    longPressDelay?: number;
+}
+export interface ContextMenuTriggerProps extends ComponentPropsWithRef<"div"> {
+    /** The area that answers right-clicks: plain content (wrapped in a `div`) or a single element. */
+    children?: ReactNode;
+    /**
+     * Clone the single child instead of wrapping it in a `div`. The child must
+     * accept `ref`, `className`, and the pointer, context menu, and key handlers.
+     * @default false
+     */
+    asChild?: boolean;
+}
+/**
+ * The area that opens the menu: right-click, a touch long press, or
+ * Shift+F10 / the Menu key while focus is inside it. Make the area (or the
+ * items in it) focusable so keyboard users can reach the menu.
+ */
+export declare const ContextMenuTrigger: ({ children, asChild, className, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, ref, ...rest }: ContextMenuTriggerProps) => import("react").JSX.Element;
+export interface ContextMenuContentProps extends MenuContentProps {
+    /**
+     * Accessible name of the menu. Defaults to "Context menu" (translated);
+     * name it after what it acts on when you can ("Game film actions").
+     */
+    "aria-label"?: string;
+}
+/**
+ * The floating menu (`role="menu"`), opened at the pointer. Takes the same
+ * props as `Menu.Content`; `placement` is relative to the pointer, and
+ * flips and clamps to stay on screen. @see MenuContent
+ */
+export declare const ContextMenuContent: ({ placement, offset, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ContextMenuContentProps) => import("react").JSX.Element;
+export declare const ContextMenu: (({ children, disabled, longPressDelay, ...options }: ContextMenuProps) => import("react").JSX.Element) & {
+    Trigger: ({ children, asChild, className, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, ref, ...rest }: ContextMenuTriggerProps) => import("react").JSX.Element;
+    Content: ({ placement, offset, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ContextMenuContentProps) => import("react").JSX.Element;
+    Item: ({ onSelect, closeOnSelect, ...rest }: import('../Menu').MenuItemProps) => import("react").JSX.Element;
+    CheckboxItem: ({ checked: checkedProp, defaultChecked, onCheckedChange, onSelect, closeOnSelect, ...rest }: import('../Menu').MenuCheckboxItemProps) => import("react").JSX.Element;
+    RadioGroup: ({ value: valueProp, defaultValue, onValueChange, className, children, ...rest }: import('../Menu').MenuRadioGroupProps) => import("react").JSX.Element;
+    RadioItem: ({ value, onSelect, closeOnSelect, ...rest }: import('../Menu').MenuRadioItemProps) => import("react").JSX.Element;
+    Group: ({ className, children, ...rest }: import('../Menu').MenuGroupProps) => import("react").JSX.Element;
+    Label: ({ className, id, ...rest }: import('../Menu').MenuLabelProps) => import("react").JSX.Element;
+    Separator: ({ className, ...rest }: import('../Menu').MenuSeparatorProps) => import("react").JSX.Element;
+    Sub: ({ children, onOpenChange }: import('../Menu').MenuSubProps) => import("react").JSX.Element;
+    SubTrigger: ({ ref, id, className, ...rest }: import('../Menu').MenuSubTriggerProps) => import("react").JSX.Element;
+    SubContent: ({ container, ...props }: import('../Menu').MenuSubContentProps) => import("react").JSX.Element | null;
+};

package/dist/components/navigation/ContextMenu/ContextMenu.mjs

@@ -0,0 +1,168 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { getChildRef as t, isSingleElement as n } from "../../../utils/refs.mjs";
+import { useMergedRef as r } from "../../../hooks/useMergedRef.mjs";
+import { cx as i } from "../../../utils/cx.mjs";
+import { cloneSlot as a } from "../../../utils/slot.mjs";
+import { Portal as o } from "../../utilities/Portal/Portal.mjs";
+import { MenuLevelContext as s, MenuTreeContext as c } from "../Menu/MenuContext.mjs";
+import { MenuContent as l } from "../Menu/MenuContent.mjs";
+import { useMenuRoot as u } from "../Menu/useMenuRoot.mjs";
+import { MenuCheckboxItem as d, MenuGroup as f, MenuItem as p, MenuLabel as m, MenuRadioGroup as h, MenuRadioItem as g, MenuSeparator as _ } from "../Menu/MenuItem.mjs";
+import { MenuSub as v, MenuSubContent as y, MenuSubTrigger as b } from "../Menu/MenuSub.mjs";
+import x from "./ContextMenu.module.css.mjs";
+import { createContext as S, useContext as C, useEffect as w, useRef as T, useState as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+//#region src/components/navigation/ContextMenu/ContextMenu.tsx
+var k = S(null);
+function A(e) {
+	let t = C(k);
+	if (!t) throw Error(`${e} must be rendered inside <ContextMenu>.`);
+	return t;
+}
+var j = ({ children: e, disabled: t = !1, longPressDelay: n = 500, ...r }) => {
+	let i = T(null), { level: a, tree: l } = u({
+		...r,
+		anchorRef: i
+	}), [d, f] = E(null), [p, m] = E("ltr"), h = {
+		disabled: t,
+		open: a.open,
+		longPressDelay: n,
+		openAt: (e, { focus: t, from: n, restoreTo: r }) => {
+			a.triggerRef.current = r, m(getComputedStyle(n).direction === "rtl" ? "rtl" : "ltr"), f(e), a.setOpen(!0, { focus: t });
+		},
+		close: () => a.setOpen(!1, { restore: "none" })
+	};
+	return /* @__PURE__ */ D(k.Provider, {
+		value: h,
+		children: /* @__PURE__ */ D(c.Provider, {
+			value: l,
+			children: /* @__PURE__ */ O(s.Provider, {
+				value: a,
+				children: [d && /* @__PURE__ */ D(o, { children: /* @__PURE__ */ D("span", {
+					ref: i,
+					className: x.anchor,
+					dir: p,
+					"aria-hidden": "true",
+					style: {
+						left: d.x,
+						top: d.y
+					}
+				}, `${d.x},${d.y}`) }), e]
+			})
+		})
+	});
+};
+function M(e) {
+	return e.key === "ContextMenu" || e.key === "F10" && e.shiftKey;
+}
+var N = 10, P = ({ children: e, asChild: o = !1, className: s, onContextMenu: c, onPointerDown: l, onPointerMove: u, onPointerUp: d, onPointerCancel: f, onKeyDown: p, ref: m, ...h }) => {
+	let g = A("ContextMenu.Trigger"), _ = o && n(e) ? e : null, v = r(m, _ ? t(_) : void 0), y = T(0), b = T(null), S = () => {
+		b.current && window.clearTimeout(b.current.timer), b.current = null;
+	};
+	w(() => S, []);
+	let C = (e) => {
+		let t = document.activeElement;
+		return t instanceof HTMLElement && t !== document.body ? t : e instanceof HTMLElement ? e : null;
+	}, E = (e) => {
+		if (c?.(e), g.disabled || e.defaultPrevented || (e.preventDefault(), Date.now() < y.current)) return;
+		if (e.clientX === 0 && e.clientY === 0) {
+			O(e.target);
+			return;
+		}
+		let t = e.target;
+		g.openAt({
+			x: e.clientX,
+			y: e.clientY
+		}, {
+			focus: "content",
+			from: t,
+			restoreTo: C(null)
+		});
+	}, O = (e) => {
+		let t = e.getBoundingClientRect(), n = getComputedStyle(e).direction === "rtl";
+		g.openAt({
+			x: n ? t.right : t.left,
+			y: t.bottom
+		}, {
+			focus: "first",
+			from: e,
+			restoreTo: C(e)
+		});
+	}, k = {
+		className: i(x.trigger, s),
+		"data-state": g.open ? "open" : "closed",
+		"data-disabled": g.disabled ? "" : void 0,
+		onContextMenu: E,
+		onKeyDown: (e) => {
+			p?.(e), !(g.disabled || e.defaultPrevented || !M(e)) && (e.preventDefault(), y.current = Date.now() + 500, O(e.target));
+		},
+		onPointerDown: (e) => {
+			if (l?.(e), g.disabled || e.defaultPrevented) return;
+			if (e.button === 2) {
+				e.preventDefault();
+				return;
+			}
+			if (e.pointerType !== "touch" || e.button !== 0) return;
+			S();
+			let { clientX: t, clientY: n } = e, r = e.target;
+			b.current = {
+				x: t,
+				y: n,
+				timer: window.setTimeout(() => {
+					b.current = null, y.current = Date.now() + 800, g.openAt({
+						x: t,
+						y: n
+					}, {
+						focus: "content",
+						from: r,
+						restoreTo: C(r)
+					});
+				}, g.longPressDelay)
+			};
+		},
+		onPointerMove: (e) => {
+			u?.(e);
+			let t = b.current;
+			t && Math.hypot(e.clientX - t.x, e.clientY - t.y) > N && S();
+		},
+		onPointerUp: (e) => {
+			d?.(e), S();
+		},
+		onPointerCancel: (e) => {
+			f?.(e), S();
+		}
+	};
+	return _ ? a(_, {
+		...h,
+		...k
+	}, v) : /* @__PURE__ */ D("div", {
+		...h,
+		...k,
+		ref: v,
+		children: e
+	});
+}, F = ({ placement: t = "bottom-start", offset: n = 2, "aria-label": r, "aria-labelledby": i, ...a }) => {
+	let o = e().contextMenu;
+	return A("ContextMenu.Content"), /* @__PURE__ */ D(l, {
+		...a,
+		placement: t,
+		offset: n,
+		"aria-labelledby": i,
+		"aria-label": i ? r : r ?? o.label
+	});
+}, I = Object.assign(j, {
+	Trigger: P,
+	Content: F,
+	Item: p,
+	CheckboxItem: d,
+	RadioGroup: h,
+	RadioItem: g,
+	Group: f,
+	Label: m,
+	Separator: _,
+	Sub: v,
+	SubTrigger: b,
+	SubContent: y
+});
+//#endregion
+export { I as ContextMenu, F as ContextMenuContent, P as ContextMenuTrigger };

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

@@ -0,0 +1 @@
+var e=`_trigger_u21ym_15`,t=`_anchor_u21ym_25`,n={trigger:e,anchor:t};exports.anchor=t,exports.default=n,exports.trigger=e;

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

@@ -0,0 +1,7 @@
+//#region src/components/navigation/ContextMenu/ContextMenu.module.css
+var e = "_trigger_u21ym_15", t = "_anchor_u21ym_25", n = {
+	trigger: e,
+	anchor: t
+};
+//#endregion
+export { t as anchor, n as default, e as trigger };

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

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

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

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

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

@@ -0,0 +1,93 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { Size, Tone } from '../../../types/common';
+/**
+ * Visual style of a Link.
+ * - `inline`: underlined body-font link for running text. Always underlined by
+ *   default so it is distinguishable from surrounding text by more than color
+ *   (WCAG 1.4.1).
+ * - `standalone`: bold display-font link for navigation and calls to action.
+ *   The underline appears on hover and focus. Meets the 24px target size.
+ * - `subtle`: muted link that takes the tone color and an underline on hover.
+ *   Only use it outside running text (footers, meta rows, breadcrumbs), where
+ *   position and layout already identify it as a link.
+ */
+export type LinkVariant = "inline" | "standalone" | "subtle";
+/** When the underline shows. */
+export type LinkUnderline = "always" | "hover" | "none";
+/** Font size. `inherit` (default) matches the surrounding text. */
+export type LinkSize = Size | "inherit";
+interface LinkOwnProps<C extends ElementType> {
+    /**
+     * Component or element to render. Defaults to `a`. Pass a router link
+     * (e.g. React Router or Next.js `Link`) and its props (such as `to`) are
+     * accepted and typed. The component must forward `className`, `style`,
+     * `ref`, and ARIA props to its underlying `<a>`.
+     */
+    as?: C;
+    /** Visual style. See `LinkVariant`. */
+    variant?: LinkVariant;
+    /**
+     * Semantic color. `primary` (default) uses `--color-primary`; `neutral`
+     * inherits the surrounding text color; the rest use `--color-{tone}-subtle-text`.
+     * With `variant="subtle"`, the tone color applies on hover.
+     */
+    tone?: Tone;
+    /** Font size. `inherit` (default) matches the surrounding text. */
+    size?: LinkSize;
+    /**
+     * Overrides the variant's underline behavior. Defaults: `inline` always,
+     * `standalone` and `subtle` on hover.
+     *
+     * Warning (WCAG 1.4.1 Use of Color): a link inside running text must be
+     * distinguishable by more than color. Don't use `hover` or `none` on links
+     * that sit inside a paragraph; only where layout alone identifies the link.
+     */
+    underline?: LinkUnderline;
+    /**
+     * Opens in a new tab: adds `target="_blank"`, `rel="noopener noreferrer"`
+     * (merged with any `rel` you pass), an external-link icon, and visually
+     * hidden text (`externalLabel`) so screen reader users are warned.
+     */
+    external?: boolean;
+    /** Screen-reader text appended to external links. Localize it here. */
+    externalLabel?: string;
+    /** Show a trailing arrow that nudges forward on hover. Best with `standalone`. Replaced by the external icon when `external` is set. Flips in RTL. */
+    arrow?: boolean;
+    /** Icon before the label. Built-in `Icon`s are decorative by default; it scales with the text. */
+    startIcon?: ReactNode;
+    /** Icon after the label. Built-in `Icon`s are decorative by default; it scales with the text. */
+    endIcon?: ReactNode;
+    /**
+     * Renders a non-navigating placeholder: a plain `<a role="link">` with no
+     * `href`, `aria-disabled="true"`, muted styling, and clicks blocked. It is
+     * out of the tab order. When `as` is a router link, a plain `<a>` is
+     * rendered instead, and `href`, `to`, `target`, and `rel` are dropped.
+     */
+    disabled?: boolean;
+    /** Style `:visited` links in a distinct color. Off by default (it's usually noise in app UI). */
+    visited?: boolean;
+    /** Link content. An icon-only link (no children) requires `aria-label` or `aria-labelledby`. */
+    children?: ReactNode;
+}
+/** An icon-only link has no visible text, so it must be named another way. */
+type LinkName = {
+    children: ReactNode;
+} | {
+    children?: undefined;
+    "aria-label": string;
+} | {
+    children?: undefined;
+    "aria-labelledby": string;
+};
+/** Props for `Link`, typed for the component chosen with `as`. */
+export type LinkProps<C extends ElementType = "a"> = LinkOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof LinkOwnProps<C>> & LinkName;
+/**
+ * Accessible text link. Renders an `<a>` (or a router link via `as`) with
+ * bold, tuned underlines, tones, external-link handling, optional icons, and
+ * a springy arrow for calls to action.
+ *
+ * Target size: `inline` links in running text are exempt from WCAG 2.5.8;
+ * `standalone` and `subtle` links have a 24px minimum height.
+ */
+export declare function Link<C extends ElementType = "a">(props: LinkProps<C>): import("react").JSX.Element;
+export {};