@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/observers/resize/resize.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { Fragment, useEffect, useEffectEvent, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/observers/resize/resize.tsx
+const Resize = ({ children, onChange }) => {
+	const [instance, setInstance] = useState(null);
+	const handleChange = useEffectEvent(onChange);
+	useEffect(() => {
+		if (!instance) return;
+		const observer = new ResizeObserver(() => {
+			handleChange();
+		});
+		instance.observeUsing(observer);
+		return () => {
+			instance.unobserveUsing(observer);
+			observer.disconnect();
+		};
+	}, [instance]);
+	return /* @__PURE__ */ jsx(Fragment, {
+		ref: setInstance,
+		children
+	});
+};
+//#endregion
+export { Resize };

package/dist/components/overlays/_internal/modal-dialog-context.d.mts

@@ -1,14 +1,13 @@
 //#region src/components/overlays/_internal/modal-dialog-context.d.ts
-type ModalDialogContextValue = {
+export type ModalDialogContextValue = {
   registerLabelledBy: (id: string | undefined) => void;
   registerDescribedBy: (id: string | undefined) => void;
 };
-declare const ModalDialogProvider: import("react").Context<ModalDialogContextValue | null>;
+export declare const ModalDialogProvider: import("react").Context<ModalDialogContextValue | null>;
 /**
  * Modal（ネイティブ `<dialog>`）配下かどうか。配下なら値が返り、単体利用では null。
  * createSafeContext を使わないのは、Popover 内・単体でも動く Dialog.Root から
  * 「Modal 配下ではない」を例外なしで判定するため。
  */
-declare const useModalDialogContext: () => ModalDialogContextValue | null;
-//#endregion
-export { ModalDialogContextValue, ModalDialogProvider, useModalDialogContext };
+export declare const useModalDialogContext: () => ModalDialogContextValue | null;
+//#endregion

package/dist/components/overlays/_internal/use-can-hover.d.mts

@@ -4,6 +4,5 @@
  * SSR ではサーバースナップショットとして true を返し、hover 前提の
  * props を初期レンダーに含めてもハイドレーション差分にならないようにする。
  */
-declare const useCanHover: (query?: string) => boolean;
-//#endregion
-export { useCanHover };
+export declare const useCanHover: (query?: string) => boolean;
+//#endregion

package/dist/components/overlays/_internal/use-hover-intent.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/overlays/_internal/use-hover-intent.d.ts
-type HoverIntent = {
+export type HoverIntent = {
   hoverStart: () => void;
   hoverEnd: () => void;
   cancel: () => void;
@@ -14,12 +14,11 @@ type HoverIntent = {
  * タッチデバイス（hover 不能環境）では enabled=false を渡すとハンドラが
  * 何もしなくなるため、呼び出し側で handler を差し替える必要はない。
  */
-declare const useHoverIntent: ({ onOpen, onClose, openDelay, closeDelay, enabled }: {
+export declare const useHoverIntent: ({ onOpen, onClose, openDelay, closeDelay, enabled }: {
   onOpen: () => void;
   onClose: () => void;
   openDelay?: number;
   closeDelay?: number;
   enabled?: boolean;
 }) => HoverIntent;
-//#endregion
-export { HoverIntent, useHoverIntent };
+//#endregion

package/dist/components/overlays/_internal/use-list-navigation.d.mts

@@ -1,19 +1,22 @@
 import { Dispatch, KeyboardEvent, SetStateAction } from "react";
 //#region src/components/overlays/_internal/use-list-navigation.d.ts
-type ListItemProps = {
-  ref: (node: HTMLElement | null) => void;
+export type ListItemProps = {
+  id: string;
+  ref: (node: HTMLElement | null) => (() => void) | undefined;
   tabIndex: number;
   onFocus: () => void;
 };
-type ListNavigation = {
+export type ListNavigation = {
   getContentProps: () => {
     onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
   };
-  getItemProps: (index: number) => ListItemProps;
+  /** `id` は項目自身の `useId`。項目の順番は DOM の並びで決まる */
+  getItemProps: (id: string) => ListItemProps;
+  /** 先頭の項目をアクティブにする。キーボードで開いたときに呼ぶ */
+  activateFirst: () => void;
 };
 /**
  * 矢印キーによる roving-tabindex のリストナビゲーション。
- * floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
  *
  * コンテンツの書字方向に追従してキーを割り当てる:
  * - 横書き: ↑=前 / ↓=次
@@ -22,15 +25,18 @@ type ListNavigation = {
  * roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
  * その項目へフォーカスを移す。開いたら先頭（選択済みがあればそれ）をアクティブにする。
  * hover で開くサブメニューのようにフォーカスを奪ってはいけない場合は
- * autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が setActiveIndex する。
+ * autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が activateFirst する。
+ *
+ * 項目は index を受け取らない。子を合成するメニューでは、項目が自分の位置を
+ * 知るには親が数えて注入するしかなく、条件付きで出し入れすると数え直しになる。
+ * 登録された要素を DOM の順に並べ直せば、描かれた並びがそのまま順番になる。
  */
-declare const useListNavigation: ({ open, activeIndex, setActiveIndex, selectedIndex, loop, autoActivateOnOpen }: {
+export declare const useListNavigation: ({ open, activeId, setActiveId, selectedIndex, loop, autoActivateOnOpen }: {
   open: boolean;
-  activeIndex: number | null;
-  setActiveIndex: Dispatch<SetStateAction<number | null>>;
+  activeId: string | null;
+  setActiveId: Dispatch<SetStateAction<string | null>>;
   selectedIndex?: number | null;
   loop?: boolean;
   autoActivateOnOpen?: boolean;
 }) => ListNavigation;
-//#endregion
-export { ListItemProps, ListNavigation, useListNavigation };
+//#endregion

package/dist/components/overlays/_internal/use-list-navigation.mjs

@@ -5,9 +5,9 @@ const isVerticalWritingMode = (el) => {
 	const wm = getComputedStyle(el).writingMode;
 	return wm.startsWith("vertical") || wm.startsWith("sideways");
 };
+const inDocumentOrder = (items) => [...items].toSorted((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
 /**
 * 矢印キーによる roving-tabindex のリストナビゲーション。
-* floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
 *
 * コンテンツの書字方向に追従してキーを割り当てる:
 * - 横書き: ↑=前 / ↓=次
@@ -16,34 +16,45 @@ const isVerticalWritingMode = (el) => {
 * roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
 * その項目へフォーカスを移す。開いたら先頭（選択済みがあればそれ）をアクティブにする。
 * hover で開くサブメニューのようにフォーカスを奪ってはいけない場合は
-* autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が setActiveIndex する。
+* autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が activateFirst する。
+*
+* 項目は index を受け取らない。子を合成するメニューでは、項目が自分の位置を
+* 知るには親が数えて注入するしかなく、条件付きで出し入れすると数え直しになる。
+* 登録された要素を DOM の順に並べ直せば、描かれた並びがそのまま順番になる。
 */
-const useListNavigation = ({ open, activeIndex, setActiveIndex, selectedIndex = null, loop = true, autoActivateOnOpen = true }) => {
-	const itemElementsRef = useRef([]);
+const useListNavigation = ({ open, activeId, setActiveId, selectedIndex = null, loop = true, autoActivateOnOpen = true }) => {
+	const itemElementsRef = useRef(/* @__PURE__ */ new Set());
 	useEffect(() => {
 		if (!open) {
-			setActiveIndex(null);
+			setActiveId(null);
 			return;
 		}
 		if (!autoActivateOnOpen) return;
-		setActiveIndex((prev) => prev ?? (selectedIndex !== null && selectedIndex >= 0 ? selectedIndex : 0));
+		const items = inDocumentOrder(itemElementsRef.current);
+		const initial = selectedIndex !== null && selectedIndex >= 0 ? selectedIndex : 0;
+		setActiveId((prev) => prev ?? items[initial]?.id ?? null);
 	}, [
 		open,
 		selectedIndex,
-		setActiveIndex,
+		setActiveId,
 		autoActivateOnOpen
 	]);
 	useEffect(() => {
-		if (open && activeIndex !== null) itemElementsRef.current[activeIndex]?.focus();
-	}, [open, activeIndex]);
-	const count = () => itemElementsRef.current.filter(Boolean).length;
+		if (!open || activeId === null) return;
+		for (const item of itemElementsRef.current) if (item.id === activeId) item.focus();
+	}, [open, activeId]);
+	const activateAt = (pick) => {
+		setActiveId(pick(inDocumentOrder(itemElementsRef.current))?.id ?? null);
+	};
 	const move = (delta) => {
-		const total = count();
+		const items = inDocumentOrder(itemElementsRef.current);
+		const total = items.length;
 		if (total === 0) return;
-		setActiveIndex((prev) => {
-			const next = (prev ?? (delta === 1 ? -1 : total)) + delta;
-			if (loop) return (next + total) % total;
-			return Math.max(0, Math.min(total - 1, next));
+		setActiveId((prev) => {
+			const current = items.findIndex((item) => item.id === prev);
+			const next = (current === -1 ? delta === 1 ? -1 : total : current) + delta;
+			const index = loop ? (next + total) % total : Math.max(0, Math.min(total - 1, next));
+			return items[index]?.id ?? prev;
 		});
 	};
 	const onKeyDown = (event) => {
@@ -71,27 +82,32 @@ const useListNavigation = ({ open, activeIndex, setActiveIndex, selectedIndex =
 				break;
 			case "Home":
 				event.preventDefault();
-				setActiveIndex(count() > 0 ? 0 : null);
+				activateAt((items) => items.at(0));
 				break;
-			case "End": {
-				const total = count();
+			case "End":
 				event.preventDefault();
-				setActiveIndex(total > 0 ? total - 1 : null);
-				break;
-			}
+				activateAt((items) => items.at(-1));
 		}
 	};
 	return {
 		getContentProps: () => ({ onKeyDown }),
-		getItemProps: (index) => ({
+		getItemProps: (id) => ({
+			id,
 			ref: (node) => {
-				itemElementsRef.current[index] = node;
+				if (node === null) return;
+				itemElementsRef.current.add(node);
+				return () => {
+					itemElementsRef.current.delete(node);
+				};
 			},
-			tabIndex: activeIndex === index ? 0 : -1,
+			tabIndex: activeId === id ? 0 : -1,
 			onFocus: () => {
-				setActiveIndex(index);
+				setActiveId(id);
 			}
-		})
+		}),
+		activateFirst: () => {
+			activateAt((items) => items.at(0));
+		}
 	};
 };
 //#endregion

package/dist/components/overlays/command-palette/command-palette.css

@@ -0,0 +1,91 @@
+@layer properties, theme, base;
+
+@layer components {
+  .GBl1yq_root {
+    max-height: inherit;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .GBl1yq_search {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-color: var(--color-border-mute);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    background-color: #0000;
+
+    &::placeholder {
+      color: var(--color-fg-mute);
+    }
+
+    &:focus-visible {
+      outline-style: none;
+
+      @media (forced-colors: active) {
+        outline-offset: 2px;
+        outline: 2px solid #0000;
+      }
+    }
+  }
+
+  .GBl1yq_results {
+    min-height: 0;
+    padding: calc(var(--spacing) * 2);
+    overflow-y: auto;
+  }
+
+  .GBl1yq_empty {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 6);
+    color: var(--color-fg-mute);
+    text-align: center;
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  .GBl1yq_groupLabel {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-top: calc(var(--spacing) * 3);
+    padding-bottom: calc(var(--spacing) * 1);
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .GBl1yq_option {
+    cursor: pointer;
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(var(--spacing) * 4);
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    outline-color: var(--color-border-base);
+    outline-offset: -2px;
+    display: flex;
+  }
+
+  .GBl1yq_active {
+    background-color: var(--color-bg-subtle);
+
+    @media (prefers-contrast: more) {
+      outline-width: 2px;
+      outline-style: solid;
+    }
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+      color: var(--color-system-highlight-text);
+    }
+  }
+
+  .GBl1yq_shortcut {
+    gap: calc(var(--spacing) * 1);
+    flex-shrink: 0;
+    display: flex;
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/command-palette/command-palette.d.mts

@@ -0,0 +1,24 @@
+import { FC, Ref } from "react";
+//#region src/components/overlays/command-palette/command-palette.d.ts
+export type CommandPaletteItem = Readonly<{
+  id: string;
+  label: string;
+  onSelect: () => void;
+  /** 見出しの付いたまとまり。同じ `group` の項目は最初に現れた位置にまとめる */
+  group?: string;
+  /** 表示名のほかに、検索で当てる語 */
+  keywords?: readonly string[];
+  /** 添えて見せるキー。1 つずつ `Kbd` で描く */
+  shortcut?: readonly string[];
+}>;
+type Props = {
+  items: readonly CommandPaletteItem[];
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onClose?: () => void;
+  placeholder?: string;
+  'aria-label'?: string;
+  ref?: Ref<HTMLDialogElement>;
+};
+export declare const CommandPalette: FC<Props>;
+//#endregion

package/dist/components/overlays/command-palette/command-palette.mjs

@@ -0,0 +1,139 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { Kbd } from "../../data-display/kbd/kbd.mjs";
+import { Modal } from "../modal/modal.mjs";
+import command_palette_module_default from "./command-palette.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/overlays/command-palette/command-palette.tsx
+const matches = (item, needle) => [item.label, ...item.keywords ?? []].some((text) => text.toLocaleLowerCase().includes(needle));
+const sectionsOf = (items) => {
+	let offset = 0;
+	return [...Map.groupBy(items, (item) => item.group)].map(([group, members]) => {
+		const start = offset;
+		offset += members.length;
+		return {
+			group,
+			entries: members.map((item, position) => ({
+				item,
+				index: start + position
+			}))
+		};
+	});
+};
+const CommandPalette = ({ items, isOpen, defaultOpen, onClose, placeholder, "aria-label": ariaLabel, ref }) => {
+	const messages = getMessages();
+	const baseId = useId();
+	const listboxId = `${baseId}-listbox`;
+	const dialogRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(dialogRef, ref), [ref]);
+	const [query, setQuery] = useState("");
+	const [activeIndex, setActiveIndex] = useState(0);
+	const needle = query.trim().toLocaleLowerCase();
+	const matched = needle === "" ? items : items.filter((item) => matches(item, needle));
+	const sections = sectionsOf(matched);
+	const ordered = sections.flatMap((section) => section.entries.map(({ item }) => item));
+	const active = ordered.length === 0 ? void 0 : Math.min(activeIndex, ordered.length - 1);
+	const optionId = (index) => `${baseId}-option-${String(index)}`;
+	const scrollIntoView = useCallback((node) => {
+		node?.scrollIntoView({ block: "nearest" });
+	}, []);
+	const run = (item) => {
+		dialogRef.current?.close();
+		item.onSelect();
+	};
+	const handleKeyDown = (event) => {
+		if (event.nativeEvent.isComposing || active === void 0) return;
+		const last = ordered.length - 1;
+		const next = {
+			ArrowDown: active === last ? 0 : active + 1,
+			ArrowUp: active === 0 ? last : active - 1
+		}[event.key];
+		if (next !== void 0) {
+			event.preventDefault();
+			setActiveIndex(next);
+			return;
+		}
+		const item = ordered[active];
+		if (event.key === "Enter" && item !== void 0) {
+			event.preventDefault();
+			run(item);
+		}
+	};
+	const renderOption = ({ item, index }) => /* @__PURE__ */ jsxs("div", {
+		"aria-selected": active === index,
+		className: clsx(command_palette_module_default.option, active === index && command_palette_module_default.active),
+		id: optionId(index),
+		onClick: () => {
+			run(item);
+		},
+		onMouseMove: () => {
+			setActiveIndex(index);
+		},
+		ref: active === index ? scrollIntoView : void 0,
+		role: "option",
+		children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.shortcut === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			className: command_palette_module_default.shortcut,
+			children: item.shortcut.map((key) => /* @__PURE__ */ jsx(Kbd, { children: key }, key))
+		})]
+	}, item.id);
+	return /* @__PURE__ */ jsx(Modal, {
+		"aria-label": ariaLabel ?? messages.commandPalette,
+		defaultOpen,
+		isOpen,
+		onClose: () => {
+			setQuery("");
+			setActiveIndex(0);
+			onClose?.();
+		},
+		ref: mergedRef,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: command_palette_module_default.root,
+			children: [/* @__PURE__ */ jsx("input", {
+				"aria-activedescendant": active === void 0 ? void 0 : optionId(active),
+				"aria-autocomplete": "list",
+				"aria-controls": listboxId,
+				"aria-expanded": true,
+				"aria-label": messages.commandPaletteSearch,
+				autoComplete: "off",
+				className: command_palette_module_default.search,
+				onChange: (event) => {
+					setQuery(event.currentTarget.value);
+					setActiveIndex(0);
+				},
+				onKeyDown: handleKeyDown,
+				placeholder: placeholder ?? messages.commandPaletteSearch,
+				role: "combobox",
+				spellCheck: false,
+				type: "text",
+				value: query
+			}), /* @__PURE__ */ jsxs("div", {
+				className: command_palette_module_default.results,
+				children: [ordered.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: command_palette_module_default.empty,
+					role: "status",
+					children: messages.commandPaletteEmpty
+				}) : null, /* @__PURE__ */ jsx("div", {
+					"aria-label": ariaLabel ?? messages.commandPalette,
+					hidden: ordered.length === 0,
+					id: listboxId,
+					role: "listbox",
+					children: sections.map((section, sectionIndex) => section.group === void 0 ? section.entries.map(renderOption) : /* @__PURE__ */ jsxs("div", {
+						"aria-labelledby": `${baseId}-group-${String(sectionIndex)}`,
+						role: "group",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: command_palette_module_default.groupLabel,
+							id: `${baseId}-group-${String(sectionIndex)}`,
+							role: "presentation",
+							children: section.group
+						}), section.entries.map(renderOption)]
+					}, section.group))
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { CommandPalette };

package/dist/components/overlays/command-palette/command-palette.module.mjs

@@ -0,0 +1,14 @@
+import './command-palette.css';
+//#region src/components/overlays/command-palette/command-palette.module.css
+var command_palette_module_default = {
+	"active": "GBl1yq_active",
+	"empty": "GBl1yq_empty",
+	"groupLabel": "GBl1yq_groupLabel",
+	"option": "GBl1yq_option",
+	"results": "GBl1yq_results",
+	"root": "GBl1yq_root",
+	"search": "GBl1yq_search",
+	"shortcut": "GBl1yq_shortcut"
+};
+//#endregion
+export { command_palette_module_default as default };

package/dist/components/overlays/command-palette/index.d.mts

@@ -0,0 +1,2 @@
+import { CommandPalette, CommandPaletteItem } from "./command-palette.mjs";
+export { CommandPalette, type CommandPaletteItem };

package/dist/components/overlays/command-palette/index.mjs

@@ -0,0 +1,2 @@
+import { CommandPalette } from "./command-palette.mjs";
+export { CommandPalette };

package/dist/components/overlays/context-menu/context-menu.d.mts

@@ -0,0 +1,13 @@
+import { FC, MouseEventHandler, PropsWithChildren, ReactElement } from "react";
+//#region src/components/overlays/context-menu/context-menu.d.ts
+export declare const Root: FC<PropsWithChildren<{
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
+}>>;
+export declare const Trigger: FC<{
+  renderItem: (props: {
+    onContextMenu: MouseEventHandler<HTMLElement>;
+  }) => ReactElement;
+}>;
+//#endregion

package/dist/components/overlays/context-menu/context-menu.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useListNavigation } from "../_internal/use-list-navigation.mjs";
+import { useOpenContext, usePopoverContext } from "../popover/hooks.mjs";
+import { Popover } from "../popover/index.mjs";
+import { MenuContextProvider } from "../dropdown-menu/hooks.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/overlays/context-menu/context-menu.tsx
+const [ContextMenuProvider, useContextMenu] = createSafeContext("useContextMenu must be used within a ContextMenu.Root");
+const Root = ({ children, isOpen, defaultOpen, onChange }) => /* @__PURE__ */ jsx(Popover.Root, {
+	defaultOpen,
+	isOpen,
+	onChange,
+	placement: "bottom-start",
+	role: "menu",
+	children: /* @__PURE__ */ jsx(MenuRoot, { children })
+});
+const MenuRoot = ({ children }) => {
+	const { isOpen, onOpen, onClose } = useOpenContext();
+	const { setTriggerRef } = usePopoverContext();
+	const [point, setPoint] = useState({
+		x: 0,
+		y: 0
+	});
+	const returnFocusRef = useRef(null);
+	const [activeId, setActiveId] = useState(null);
+	const nav = useListNavigation({
+		open: isOpen,
+		activeId,
+		setActiveId,
+		loop: true
+	});
+	const wasOpenRef = useRef(false);
+	useEffect(() => {
+		const wasOpen = wasOpenRef.current;
+		wasOpenRef.current = isOpen;
+		if (!wasOpen || isOpen) return;
+		const active = document.activeElement;
+		if (active === null || active === document.body || active.closest("[role=\"menu\"]") !== null) returnFocusRef.current?.focus();
+	}, [isOpen]);
+	const openAt = useCallback((next, returnFocusTo) => {
+		returnFocusRef.current = returnFocusTo;
+		setPoint(next);
+		onOpen();
+	}, [onOpen]);
+	const contextValue = useMemo(() => ({ openAt }), [openAt]);
+	return /* @__PURE__ */ jsx(ContextMenuProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(MenuContextProvider, {
+			value: {
+				...nav,
+				closeRoot: onClose
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				ref: setTriggerRef,
+				style: {
+					position: "fixed",
+					left: point.x,
+					top: point.y
+				}
+			}), children]
+		})
+	});
+};
+const Trigger = ({ renderItem }) => {
+	const { openAt } = useContextMenu();
+	return renderItem({ onContextMenu: (event) => {
+		event.preventDefault();
+		const active = document.activeElement;
+		openAt({
+			x: event.clientX,
+			y: event.clientY
+		}, active instanceof HTMLElement ? active : null);
+	} });
+};
+//#endregion
+export { Root, Trigger };

package/dist/components/overlays/context-menu/index.d.mts

@@ -0,0 +1,21 @@
+import { ItemProps } from "../dropdown-menu/dropdown-menu.mjs";
+import { SubMenuProps } from "../dropdown-menu/sub-menu.mjs";
+//#region src/components/overlays/context-menu/index.d.ts
+export declare const ContextMenu: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
+  }>>;
+  readonly Trigger: import("react").FC<{
+    renderItem: (props: {
+      onContextMenu: import("react").MouseEventHandler<HTMLElement>;
+    }) => import("react").ReactElement;
+  }>;
+  readonly Content: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
+  }>;
+  readonly Item: import("react").FC<ItemProps>;
+  readonly SubMenu: import("react").FC<SubMenuProps>;
+};
+//#endregion

package/dist/components/overlays/context-menu/index.mjs

@@ -0,0 +1,13 @@
+import { Content, Item } from "../dropdown-menu/dropdown-menu.mjs";
+import { SubMenu } from "../dropdown-menu/sub-menu.mjs";
+import { Root, Trigger } from "./context-menu.mjs";
+//#region src/components/overlays/context-menu/index.ts
+const ContextMenu = {
+	Root,
+	Trigger,
+	Content,
+	Item,
+	SubMenu
+};
+//#endregion
+export { ContextMenu };