@k8ordo/ui 2.0.0 → 2.2.0

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 @@
+export { CommandPalette } from "./command-palette.mjs";

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 };

package/dist/components/overlays/dialog/dialog.css

@@ -0,0 +1,31 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._03QP4a_root {
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-raised);
+    width: 100%;
+    box-shadow: var(--shadow-md);
+    position: relative;
+  }
+
+  ._03QP4a_header {
+    padding: calc(var(--spacing) * 4);
+    padding-bottom: calc(var(--spacing) * 2);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  ._03QP4a_close {
+    top: calc(var(--spacing) * 2);
+    right: calc(var(--spacing) * 2);
+    position: absolute;
+  }
+
+  ._03QP4a_content {
+    padding: calc(var(--spacing) * 4);
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/dialog/dialog.d.mts

@@ -1,15 +1,14 @@
 import { FC, PropsWithChildren, ReactNode, Ref } from "react";
 //#region src/components/overlays/dialog/dialog.d.ts
-declare const Root: FC<PropsWithChildren<{
+export declare const Root: FC<PropsWithChildren<{
   ref?: Ref<HTMLElement> | undefined;
   id?: string | undefined;
   tabIndex?: number | undefined;
   role?: 'dialog' | 'alertdialog' | undefined;
 }>>;
-declare const Header: FC<{
+export declare const Header: FC<{
   title: ReactNode;
   onClose: () => void;
 }>;
-declare const Content: FC<PropsWithChildren>;
-//#endregion
-export { Content, Header, Root };
+export declare const Content: FC<PropsWithChildren>;
+//#endregion

package/dist/components/overlays/dialog/dialog.mjs

@@ -1,10 +1,13 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { CloseIcon } from "../../icons/lucide.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
 import { Heading } from "../../data-display/heading/heading.mjs";
 import { useModalDialogContext } from "../_internal/modal-dialog-context.mjs";
+import dialog_module_default from "./dialog.module.mjs";
+import { clsx } from "clsx";
 import { useEffect, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/dialog/dialog.tsx
@@ -33,7 +36,7 @@ const Root = ({ ref, id, children, tabIndex, role }) => {
 	return /* @__PURE__ */ jsx("section", {
 		"aria-describedby": describedBy,
 		"aria-labelledby": labelledBy,
-		className: "bg-bg-raised relative w-full rounded-lg shadow-md",
+		className: clsx(dialog_module_default.root, high_contrast_module_default.edge),
 		id,
 		ref,
 		role: resolvedRole,
@@ -45,16 +48,16 @@ const Root = ({ ref, id, children, tabIndex, role }) => {
 	});
 };
 const Header = ({ title, onClose }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const { rootId } = useDialogContext();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-center p-4 pb-2",
+		className: dialog_module_default.header,
 		children: [/* @__PURE__ */ jsx(Heading, {
 			id: `${rootId}-title`,
 			level: "h3",
 			children: title
 		}), /* @__PURE__ */ jsx("div", {
-			className: "absolute top-2 right-2",
+			className: dialog_module_default.close,
 			children: /* @__PURE__ */ jsx(IconButton, {
 				label: messages.close,
 				onClick: (e) => {
@@ -70,7 +73,7 @@ const Header = ({ title, onClose }) => {
 const Content = ({ children }) => {
 	const { rootId } = useDialogContext();
 	return /* @__PURE__ */ jsx("div", {
-		className: "p-4",
+		className: dialog_module_default.content,
 		id: `${rootId}-content`,
 		onClick: (e) => {
 			e.stopPropagation();

package/dist/components/overlays/dialog/dialog.module.mjs

@@ -0,0 +1,10 @@
+import './dialog.css';
+//#region src/components/overlays/dialog/dialog.module.css
+var dialog_module_default = {
+	"close": "_03QP4a_close",
+	"content": "_03QP4a_content",
+	"header": "_03QP4a_header",
+	"root": "_03QP4a_root"
+};
+//#endregion
+export { dialog_module_default as default };

package/dist/components/overlays/dialog/index.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/overlays/dialog/index.d.ts
-declare const Dialog: {
+export declare const Dialog: {
   readonly Root: import("react").FC<import("react").PropsWithChildren<{
     ref?: import("react").Ref<HTMLElement> | undefined;
     id?: string | undefined;
@@ -14,5 +14,4 @@ declare const Dialog: {
     children?: import("react").ReactNode | undefined;
   }>;
 };
-//#endregion
-export { Dialog };
+//#endregion

package/dist/components/overlays/drawer/drawer.css

@@ -0,0 +1,48 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._5lYcFq_root {
+    flex-direction: column;
+    height: 100%;
+    display: flex;
+
+    @container style(--writing: vertical) {
+      flex-direction: row;
+    }
+  }
+
+  ._5lYcFq_header {
+    padding: calc(var(--spacing) * 4);
+    padding-bottom: calc(var(--spacing) * 2);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  ._5lYcFq_title {
+    display: contents;
+  }
+
+  ._5lYcFq_close {
+    top: calc(var(--spacing) * 2);
+    position: absolute;
+  }
+
+  ._5lYcFq_closeLeft {
+    left: calc(var(--spacing) * 2);
+  }
+
+  ._5lYcFq_closeRight {
+    right: calc(var(--spacing) * 2);
+  }
+
+  ._5lYcFq_content {
+    overscroll-behavior: contain;
+    padding: calc(var(--spacing) * 4);
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/drawer/drawer.d.mts

@@ -1,12 +1,11 @@
 import { DrawerSide } from "../../../types/variables.mjs";
 import { FC, PropsWithChildren, ReactNode } from "react";
 //#region src/components/overlays/drawer/drawer.d.ts
-declare const Drawer: FC<PropsWithChildren<{
+export declare const Drawer: FC<PropsWithChildren<{
   title: ReactNode;
   isOpen?: boolean;
   defaultOpen?: boolean;
   onClose?: () => void;
   side?: DrawerSide;
 }>>;
-//#endregion
-export { Drawer };
+//#endregion

package/dist/components/overlays/drawer/drawer.mjs

@@ -1,15 +1,16 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
-import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
 import { Heading } from "../../data-display/heading/heading.mjs";
 import { Modal } from "../modal/modal.mjs";
+import drawer_module_default from "./drawer.module.mjs";
+import { clsx } from "clsx";
 import { useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/drawer/drawer.tsx
 const Drawer = ({ title, isOpen, defaultOpen, onClose, side = "right", children }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const rootId = useId();
 	const dialogRef = useRef(null);
 	return /* @__PURE__ */ jsx(Modal, {
@@ -21,32 +22,32 @@ const Drawer = ({ title, isOpen, defaultOpen, onClose, side = "right", children
 		ref: dialogRef,
 		side,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "vertical:flex-row flex h-full flex-col",
+			className: drawer_module_default.root,
 			id: rootId,
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center justify-center p-4 pb-2",
+				className: drawer_module_default.header,
 				children: [typeof title === "string" ? /* @__PURE__ */ jsx(Heading, {
 					id: `${rootId}-title`,
 					level: "h3",
 					children: title
 				}) : /* @__PURE__ */ jsx("div", {
-					className: "contents",
+					className: drawer_module_default.title,
 					id: `${rootId}-title`,
 					children: title
 				}), /* @__PURE__ */ jsx("div", {
-					className: cn("absolute top-2", side === "left" ? "left-2" : "right-2"),
+					className: clsx(drawer_module_default.close, side === "left" ? drawer_module_default.closeLeft : drawer_module_default.closeRight),
 					children: /* @__PURE__ */ jsx(IconButton, {
 						label: messages.close,
 						onClick: (e) => {
 							e.stopPropagation();
-							dialogRef.current?.close();
+							if (dialogRef.current) dialogRef.current.close();
 						},
 						tooltipDisabled: true,
 						children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
 					})
 				})]
 			}), /* @__PURE__ */ jsx("div", {
-				className: "flex-1 overflow-y-auto overscroll-contain p-4",
+				className: drawer_module_default.content,
 				id: `${rootId}-content`,
 				onClick: (e) => {
 					e.stopPropagation();

package/dist/components/overlays/drawer/drawer.module.mjs

@@ -0,0 +1,13 @@
+import './drawer.css';
+//#region src/components/overlays/drawer/drawer.module.css
+var drawer_module_default = {
+	"close": "_5lYcFq_close",
+	"closeLeft": "_5lYcFq_closeLeft",
+	"closeRight": "_5lYcFq_closeRight",
+	"content": "_5lYcFq_content",
+	"header": "_5lYcFq_header",
+	"root": "_5lYcFq_root",
+	"title": "_5lYcFq_title"
+};
+//#endregion
+export { drawer_module_default as default };

package/dist/components/overlays/drawer/index.mjs

@@ -1,2 +1 @@
-import { Drawer } from "./drawer.mjs";
-export { Drawer };
+export { Drawer } from "./drawer.mjs";

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

@@ -3,28 +3,25 @@ import "../../buttons/button/index.mjs";
 import { Placement } from "../../../types/variables.mjs";
 import { ComponentProps, FC, PropsWithChildren, ReactNode } from "react";
 //#region src/components/overlays/dropdown-menu/dropdown-menu.d.ts
-declare const Root: FC<PropsWithChildren<{
+export declare const Root: FC<PropsWithChildren<{
   placement?: Placement;
   isOpen?: boolean;
   defaultOpen?: boolean;
   onChange?: (isOpen: boolean) => void;
 }>>;
-declare const Content: FC<PropsWithChildren>;
-type ItemProps = {
+export declare const Content: FC<PropsWithChildren>;
+export type ItemProps = {
   onAction: () => void;
   label: string;
 };
-declare const Item: FC<ItemProps & {
-  index?: number;
-}>;
-declare const Trigger: FC<{
+export declare const Item: FC<ItemProps>;
+export declare const Trigger: FC<{
   label: string;
   size?: ComponentProps<typeof Button>['size'];
   variant?: ComponentProps<typeof Button>['variant'];
 }>;
-declare const IconTrigger: FC<{
+export declare const IconTrigger: FC<{
   icon: ReactNode;
   label: string;
 }>;
-//#endregion
-export { Content, IconTrigger, Item, ItemProps, Root, Trigger };
+//#endregion

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

@@ -1,13 +1,13 @@
 "use client";
 import { Button } from "../../buttons/button/button.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
 import { useListNavigation } from "../_internal/use-list-navigation.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
 import { Popover } from "../popover/index.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { ChevronIcon } from "../../icons/lucide.mjs";
 import { MenuContextProvider, useMenuContent, useMenuItem } from "./hooks.mjs";
-import { cloneWithIndex, itemClass, panelClass } from "./shared.mjs";
-import { useState } from "react";
+import { itemClass, panelClass } from "./shared.mjs";
+import { useId, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/dropdown-menu/dropdown-menu.tsx
 const Root = ({ children, placement = "bottom-start", isOpen, defaultOpen, onChange }) => /* @__PURE__ */ jsx(Popover.Root, {
@@ -20,11 +20,11 @@ const Root = ({ children, placement = "bottom-start", isOpen, defaultOpen, onCha
 });
 const MenuProvider = ({ children }) => {
 	const { isOpen, onClose } = useOpenContext();
-	const [activeIndex, setActiveIndex] = useState(null);
+	const [activeId, setActiveId] = useState(null);
 	const nav = useListNavigation({
 		open: isOpen,
-		activeIndex,
-		setActiveIndex,
+		activeId,
+		setActiveId,
 		loop: true
 	});
 	return /* @__PURE__ */ jsx(MenuContextProvider, {
@@ -41,13 +41,14 @@ const Content = ({ children }) => {
 		...props,
 		...contentProps,
 		className: panelClass,
-		children: cloneWithIndex(children)
+		children
 	}) });
 };
-const Item = ({ label, onAction, index = 0 }) => {
+const Item = ({ label, onAction }) => {
+	const id = useId();
 	const props = useMenuItem({
 		onAction,
-		index
+		id
 	});
 	return /* @__PURE__ */ jsx("button", {
 		className: itemClass,