@humain/ui 2.1.63 → 2.1.65

package/dist/index205.js

@@ -1,286 +1,296 @@
 "use client";
 import { cn } from "./index2.js";
-import { useControllableState } from "./index12.js";
-import { createSafeContext } from "./index21.js";
-import { Check, ChevronRight } from "lucide-react";
+import { Button, ClearButton } from "./index5.js";
+import { Avatar } from "./index70.js";
+import { Kbd } from "./index106.js";
+import { Command as CommandNamespace, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "./index120.js";
+import { ArrowDown, ArrowUp, CornerDownLeft, Search, Settings } from "lucide-react";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Menu as Menu$1 } from "@base-ui/react/menu";
-//#region src/components/organisms/menus/ContextMenu/ContextMenu.tsx
-var [ContextMenuContext, useContextMenuContext] = createSafeContext("ContextMenu");
-function Root({ children, anchorPoint, open: controlledOpen, defaultOpen = false, onOpenChange }) {
-	const [position, setPosition] = React.useState({
-		x: 0,
-		y: 0
-	});
-	const [open, setOpen] = useControllableState({
-		value: controlledOpen,
-		defaultValue: defaultOpen,
-		onChange: onOpenChange
-	});
-	return /* @__PURE__ */ jsx(ContextMenuContext.Provider, {
-		value: {
-			open,
-			setOpen,
-			position: anchorPoint ?? position,
-			setPosition
-		},
-		children: /* @__PURE__ */ jsx(Menu$1.Root, {
-			"data-slot": "context-menu",
-			open,
-			onOpenChange: setOpen,
-			children
-		})
-	});
-}
-Root.displayName = "ContextMenu.Root";
-function Trigger({ children, className, disabled = false, onKeyDown: onKeyDownProp, ...props }) {
-	const { setOpen, setPosition } = useContextMenuContext();
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"data-slot": "context-menu-trigger",
-		onContextMenu: React.useCallback((event) => {
-			if (disabled) return;
-			event.preventDefault();
-			setPosition({
-				x: event.clientX,
-				y: event.clientY
-			});
-			setOpen(true);
-		}, [
-			disabled,
-			setOpen,
-			setPosition
-		]),
-		onKeyDown: React.useCallback((event) => {
-			onKeyDownProp?.(event);
-			if (event.defaultPrevented) return;
-			if (disabled) return;
-			if (event.key === "F10" && event.shiftKey) {
-				event.preventDefault();
-				const rect = event.currentTarget.getBoundingClientRect();
-				setPosition({
-					x: rect.left + rect.width / 2,
-					y: rect.top + rect.height / 2
-				});
-				setOpen(true);
-			}
-		}, [
-			disabled,
-			onKeyDownProp,
-			setOpen,
-			setPosition
-		]),
-		className,
-		disabled,
-		...props,
-		children
-	});
+//#region src/components/organisms/menus/CommandMenu/CommandMenu.tsx
+var DEFAULT_COMMAND_MENU_MAX_HEIGHT = 336;
+var DEFAULT_COMMAND_MENU_PLACEHOLDER = "Type a command or search...";
+var COMMAND_MENU_SHELL_CLASS_NAME = "w-full max-w-[508px] overflow-hidden rounded-xl border border-input bg-background shadow-lg";
+function getCommandMenuMaxHeight(maxHeight) {
+	return Number.isFinite(maxHeight) && maxHeight >= 0 ? maxHeight : DEFAULT_COMMAND_MENU_MAX_HEIGHT;
 }
-Trigger.displayName = "ContextMenu.Trigger";
-function Portal({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.Portal, {
-		"data-slot": "context-menu-portal",
-		...props
-	});
-}
-Portal.displayName = "ContextMenu.Portal";
-var popupMotionClassName = "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 motion-reduce:animate-none";
-var popupSurfaceClassName = "border border-border bg-popover text-popover-foreground rounded-lg p-1 shadow-sm duration-100 origin-(--transform-origin) outline-none";
-function isPortalContainerRef(container) {
-	return container !== null && typeof container === "object" && "current" in container;
-}
-function usePortalContainer(container) {
-	return React.useMemo(() => {
-		if (container == null || isPortalContainerRef(container)) return container;
-		return { current: container };
-	}, [container]);
-}
-function resolvePortalContextElement(container) {
-	const resolvedContainer = isPortalContainerRef(container) ? container.current : container;
-	if (!resolvedContainer) return void 0;
-	return "host" in resolvedContainer ? resolvedContainer.host : resolvedContainer;
-}
-function Popup({ alignOffset = 0, container, sideOffset = 0, className, ...props }) {
-	const { position } = useContextMenuContext();
-	const portalContainer = usePortalContainer(container);
-	const portalContextElement = resolvePortalContextElement(container);
-	const virtualAnchor = React.useMemo(() => ({
-		contextElement: portalContextElement,
-		getBoundingClientRect: () => ({
-			x: position.x,
-			y: position.y,
-			width: 0,
-			height: 0,
-			top: position.y,
-			right: position.x,
-			bottom: position.y,
-			left: position.x,
-			toJSON: () => ({})
-		})
-	}), [
-		portalContextElement,
-		position.x,
-		position.y
-	]);
-	return /* @__PURE__ */ jsx(Menu$1.Portal, {
-		container: portalContainer,
-		children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
-			"data-anchor-x": position.x,
-			"data-anchor-y": position.y,
-			"data-slot": "context-menu-positioner",
-			className: "isolate z-50 outline-none",
-			anchor: virtualAnchor,
-			side: "bottom",
-			align: "start",
-			sideOffset,
-			alignOffset,
-			collisionPadding: 8,
-			children: /* @__PURE__ */ jsx(Menu$1.Popup, {
-				"data-slot": "context-menu-popup",
-				className: cn(popupMotionClassName, popupSurfaceClassName, "min-w-32 z-50 max-h-(--available-height) overflow-x-hidden overflow-y-auto data-closed:overflow-hidden", className),
-				...props
-			})
-		})
-	});
+function usePlatformShortcut() {
+	const [shortcut, setShortcut] = React.useState("⌘/");
+	React.useEffect(() => {
+		if (!/Mac|iPhone|iPad/i.test(navigator.userAgent)) setShortcut("Ctrl /");
+	}, []);
+	return shortcut;
 }
-Popup.displayName = "ContextMenu.Popup";
-function Group({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.Group, {
-		"data-slot": "context-menu-group",
-		...props
+function CommandShortcutBadge({ children, className }) {
+	return /* @__PURE__ */ jsx(Kbd, {
+		variant: "solid",
+		size: "sm",
+		className: cn("shadow-xs", className),
+		children
 	});
 }
-Group.displayName = "ContextMenu.Group";
-function Label({ className, inset, ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
-		"data-slot": "context-menu-label",
-		"data-inset": inset,
-		className: cn("text-foreground px-2 py-1.5 text-sm leading-5 font-medium data-[inset]:ps-8", className),
-		...props
+CommandShortcutBadge.displayName = "CommandMenu.ShortcutBadge";
+function FooterNavIcon({ children, className }) {
+	return /* @__PURE__ */ jsx(Kbd, {
+		variant: "footer",
+		size: "sm",
+		className: cn("p-1.5", className),
+		children
 	});
 }
-Label.displayName = "ContextMenu.Label";
-function Item({ className, inset, variant = "default", ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.Item, {
-		"data-slot": "context-menu-item",
-		"data-inset": inset,
-		"data-variant": variant,
-		className: cn("focus:bg-accent focus:text-popover-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-popover-foreground gap-2 rounded-md px-2 py-1.5 text-base leading-6 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-[color,background-color,transform] duration-150 ease-smooth active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100", className),
-		...props
+FooterNavIcon.displayName = "CommandMenu.FooterNavIcon";
+function FooterNavText({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-sm font-semibold text-text-quaternary", className),
+		children
 	});
 }
-Item.displayName = "ContextMenu.Item";
-function Sub({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.SubmenuRoot, {
-		"data-slot": "context-menu-sub",
-		...props
+FooterNavText.displayName = "CommandMenu.FooterNavText";
+var defaultFooterHints = [
+	{
+		keys: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(FooterNavIcon, { children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-2.5 text-text-quaternary" }) }), /* @__PURE__ */ jsx(FooterNavIcon, { children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-2.5 text-text-quaternary" }) })]
+		}),
+		label: "to navigate"
+	},
+	{
+		keys: /* @__PURE__ */ jsx(FooterNavIcon, { children: /* @__PURE__ */ jsx(CornerDownLeft, { className: "size-2.5 text-text-quaternary" }) }),
+		label: "to select"
+	},
+	{
+		keys: /* @__PURE__ */ jsx(FooterNavIcon, {
+			className: "px-1.5 py-1",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "text-xs font-semibold text-text-quaternary",
+				children: "esc"
+			})
+		}),
+		label: "to close"
+	}
+];
+function CommandMenuFooter({ hints = defaultFooterHints, showSettingsButton = false, onSettingsClick, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-menu-footer",
+		className: cn("flex items-center gap-3 border-t border-border bg-card/80 py-2 pe-2 ps-[18px] supports-backdrop-filter:backdrop-blur", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "hidden flex-1 items-start gap-4 [@media(hover:hover)]:flex",
+			children: hints.map((hint) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [hint.keys, /* @__PURE__ */ jsx(FooterNavText, { children: hint.label })]
+			}, hint.label))
+		}), showSettingsButton && /* @__PURE__ */ jsx(Button, {
+			appearance: "ghost",
+			variant: "secondary",
+			size: "icon",
+			className: "group ms-auto rounded-full bg-muted",
+			onClick: onSettingsClick,
+			"aria-label": "Settings",
+			children: /* @__PURE__ */ jsx(Settings, { className: "size-5 text-muted-foreground transition-transform duration-300 ease-out group-hover:rotate-90 motion-reduce:transition-none" })
+		})]
 	});
 }
-Sub.displayName = "ContextMenu.Sub";
-function SubTrigger({ className, inset, children, ...props }) {
-	return /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
-		"data-slot": "context-menu-sub-trigger",
-		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-popover-foreground data-open:bg-accent data-open:text-popover-foreground not-data-[variant=destructive]:focus:**:text-popover-foreground gap-2 rounded-md px-2 py-1.5 text-base leading-6 [&_svg:not([class*='size-'])]:size-4 group/ctx-sub flex cursor-default items-center outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-[color,background-color,transform] duration-150 ease-smooth active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100", className),
+CommandMenuFooter.displayName = "CommandMenu.Footer";
+function CommandMenuItem({ option, onSelect, className, ...props }) {
+	return /* @__PURE__ */ jsxs(CommandItem, {
+		value: option.id,
+		disabled: option.disabled,
+		showCheckIndicator: false,
+		onSelect: () => onSelect?.(option.id, option),
+		className: cn("flex cursor-pointer items-center gap-2 transition-colors duration-150 motion-reduce:transition-none", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ms-auto rtl:rotate-180 transition-transform duration-150 group-data-open/ctx-sub:translate-x-0.5" })]
-	});
-}
-SubTrigger.displayName = "ContextMenu.SubTrigger";
-function SubPopup({ className, container, ...props }) {
-	const portalContainer = usePortalContainer(container);
-	return /* @__PURE__ */ jsx(Menu$1.Portal, {
-		container: portalContainer,
-		children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
-			className: "isolate z-50 outline-none",
-			side: "right",
-			align: "start",
-			sideOffset: 0,
-			alignOffset: -3,
-			children: /* @__PURE__ */ jsx(Menu$1.Popup, {
-				"data-slot": "context-menu-sub-popup",
-				className: cn(popupMotionClassName, "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", popupSurfaceClassName, "min-w-[96px] w-auto", className),
-				...props
+		children: [
+			option.avatar && /* @__PURE__ */ jsx(Avatar, {
+				src: option.avatar.src,
+				fallback: option.avatar.fallback || option.label.charAt(0),
+				size: "sm",
+				className: "size-6 shrink-0"
+			}),
+			option.icon && !option.avatar && /* @__PURE__ */ jsx("span", {
+				className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4",
+				children: option.icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center gap-2 text-sm leading-5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate font-normal text-foreground",
+					children: option.label
+				}), option.subtitle && /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate font-normal text-muted-foreground",
+					children: option.subtitle
+				})]
+			}),
+			option.shortcut && /* @__PURE__ */ jsx(CommandShortcutBadge, {
+				className: "transition-colors duration-150 group-data-[selected=true]/command-item:bg-primary/10 group-data-[selected=true]/command-item:text-primary",
+				children: option.shortcut
 			})
-		})
+		]
 	});
 }
-SubPopup.displayName = "ContextMenu.SubPopup";
-function CheckboxItem({ className, children, checked, ...props }) {
-	return /* @__PURE__ */ jsxs(Menu$1.CheckboxItem, {
-		"data-slot": "context-menu-checkbox-item",
-		className: cn("focus:bg-accent focus:text-popover-foreground focus:**:text-popover-foreground gap-2 rounded-md py-1.5 pe-2 ps-8 text-base leading-6 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-colors duration-150 ease-smooth motion-reduce:transition-none", className),
-		checked,
+CommandMenuItem.displayName = "CommandMenu.Item";
+function CommandMenuGroupHeader({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		"data-slot": "command-menu-group-header",
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
-			"data-slot": "context-menu-checkbox-item-indicator",
-			children: /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
-				className: "animate-in zoom-in-75 duration-150 motion-reduce:animate-none",
-				children: /* @__PURE__ */ jsx(Check, {})
-			})
-		}), children]
+		children
 	});
 }
-CheckboxItem.displayName = "ContextMenu.CheckboxItem";
-function RadioGroup({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
-		"data-slot": "context-menu-radio-group",
-		...props
+CommandMenuGroupHeader.displayName = "CommandMenu.GroupHeader";
+function CommandMenuGroupSection({ group, optionRenderer }) {
+	const headingId = React.useId();
+	return /* @__PURE__ */ jsxs(CommandGroup, {
+		"aria-labelledby": headingId,
+		className: "px-2 py-1",
+		children: [/* @__PURE__ */ jsx(CommandMenuGroupHeader, {
+			id: headingId,
+			children: group.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: group.options.map(optionRenderer)
+		})]
 	});
 }
-RadioGroup.displayName = "ContextMenu.RadioGroup";
-function RadioItem({ className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
-		"data-slot": "context-menu-radio-item",
-		className: cn("focus:bg-accent focus:text-popover-foreground focus:**:text-popover-foreground gap-2 rounded-md py-1.5 pe-2 ps-8 text-base leading-6 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-colors duration-150 ease-smooth motion-reduce:transition-none", className),
-		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
-			"data-slot": "context-menu-radio-item-indicator",
-			children: /* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, {
-				className: "animate-in zoom-in-75 duration-150 motion-reduce:animate-none",
-				children: /* @__PURE__ */ jsx(Check, {})
+CommandMenuGroupSection.displayName = "CommandMenu.GroupSection";
+function CommandMenuBodyContent({ children, groups, options, optionRenderer }) {
+	if (children) return children;
+	if (groups.length > 0) return groups.map((group, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(CommandSeparator, { className: "mx-0" }), /* @__PURE__ */ jsx(CommandMenuGroupSection, {
+		group,
+		optionRenderer
+	})] }, group.id));
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col p-2",
+		children: options.map(optionRenderer)
+	});
+}
+function CommandMenuBody({ children, groups, options, onSelect, onClose, placeholder, emptyText, emptyState, showShortcut, shortcutText, showFooter, footerHints, showSettingsButton, onSettingsClick, maxHeight, filter }) {
+	const safeMaxHeight = getCommandMenuMaxHeight(maxHeight);
+	const renderOption = (option) => /* @__PURE__ */ jsx(CommandMenuItem, {
+		option,
+		onSelect
+	}, option.id);
+	return /* @__PURE__ */ jsxs(CommandNamespace, {
+		filter,
+		className: "rounded-none border-0 shadow-none",
+		"data-slot": "command-menu",
+		children: [
+			/* @__PURE__ */ jsx("search", {
+				"aria-label": "Command menu search",
+				className: "block border-b border-input bg-background",
+				children: /* @__PURE__ */ jsx(CommandInput, { render: ({ clearSearch, value, ...inputProps }) => {
+					const canClose = typeof onClose === "function";
+					const clearOrClose = () => {
+						if (value) {
+							clearSearch();
+							return;
+						}
+						onClose?.();
+					};
+					return /* @__PURE__ */ jsxs("div", {
+						"data-slot": "command-menu-input",
+						"cmdk-input-wrapper": "",
+						className: "flex h-11 items-center gap-2 px-3",
+						children: [
+							/* @__PURE__ */ jsx(Search, {
+								className: "size-4 shrink-0 text-muted-foreground opacity-50",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsx("input", {
+								...inputProps,
+								value,
+								placeholder,
+								"aria-label": placeholder,
+								className: "min-w-0 flex-1 bg-transparent text-sm leading-5 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+							}),
+							showShortcut && /* @__PURE__ */ jsx(CommandShortcutBadge, { children: shortcutText }),
+							/* @__PURE__ */ jsx(ClearButton, {
+								size: "icon-xs",
+								className: "-me-1 rounded-sm p-0 opacity-50 hover:opacity-80 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+								disabled: !value && !canClose,
+								"aria-label": value ? "Clear search" : canClose ? "Close command menu" : "Clear search",
+								onClick: clearOrClose
+							})
+						]
+					});
+				} })
+			}),
+			/* @__PURE__ */ jsxs(CommandList, {
+				style: { maxHeight: safeMaxHeight },
+				className: "overflow-y-auto p-0",
+				children: [/* @__PURE__ */ jsx(CommandEmpty, {
+					className: "py-6 text-center text-sm text-muted-foreground animate-in fade-in-0 duration-200 motion-reduce:animate-none",
+					children: emptyState || emptyText
+				}), /* @__PURE__ */ jsx(CommandMenuBodyContent, {
+					groups,
+					options,
+					optionRenderer: renderOption,
+					children
+				})]
+			}),
+			showFooter && /* @__PURE__ */ jsx(CommandMenuFooter, {
+				hints: footerHints,
+				showSettingsButton,
+				onSettingsClick
 			})
-		}), children]
+		]
 	});
 }
-RadioItem.displayName = "ContextMenu.RadioItem";
-function Separator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.Separator, {
-		"data-slot": "context-menu-separator",
-		className: cn("bg-border my-1 h-px", className),
-		...props
+CommandMenuBody.displayName = "CommandMenu.Body";
+function CommandMenu({ open, onOpenChange, placeholder = DEFAULT_COMMAND_MENU_PLACEHOLDER, emptyText = "No results found.", emptyState, options = [], groups = [], onSelect, showShortcut = false, shortcutText, showFooter = false, footerHints, showSettingsButton = false, onSettingsClick, className, maxHeight = DEFAULT_COMMAND_MENU_MAX_HEIGHT, filter, children }) {
+	const platformShortcut = usePlatformShortcut();
+	const resolvedShortcut = shortcutText ?? platformShortcut;
+	return /* @__PURE__ */ jsx(CommandDialog, {
+		open,
+		onOpenChange,
+		className: cn("max-w-[508px] sm:max-w-[508px]", className),
+		children: /* @__PURE__ */ jsx(CommandMenuBody, {
+			placeholder,
+			emptyText,
+			emptyState,
+			options,
+			groups,
+			onSelect,
+			onClose: () => onOpenChange?.(false),
+			showShortcut,
+			shortcutText: resolvedShortcut,
+			showFooter,
+			footerHints,
+			showSettingsButton,
+			onSettingsClick,
+			maxHeight,
+			filter,
+			children
+		})
 	});
 }
-Separator.displayName = "ContextMenu.Separator";
-function Shortcut({ className, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "context-menu-shortcut",
-		className: cn("text-muted-foreground group-focus/context-menu-item:text-popover-foreground ms-auto text-xs tracking-widest transition-colors duration-150 ease-smooth motion-reduce:transition-none", className),
-		...props
+CommandMenu.displayName = "CommandMenu";
+function CommandMenuPanel({ placeholder = DEFAULT_COMMAND_MENU_PLACEHOLDER, emptyText = "No results found.", emptyState, options = [], groups = [], onSelect, showShortcut = false, shortcutText, showFooter = false, footerHints, showSettingsButton = false, onSettingsClick, className, maxHeight = DEFAULT_COMMAND_MENU_MAX_HEIGHT, filter, children }) {
+	const platformShortcut = usePlatformShortcut();
+	const resolvedShortcut = shortcutText ?? platformShortcut;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-menu-panel",
+		className: cn(COMMAND_MENU_SHELL_CLASS_NAME, className),
+		children: /* @__PURE__ */ jsx(CommandMenuBody, {
+			placeholder,
+			emptyText,
+			emptyState,
+			options,
+			groups,
+			onSelect,
+			showShortcut,
+			shortcutText: resolvedShortcut,
+			showFooter,
+			footerHints,
+			showSettingsButton,
+			onSettingsClick,
+			maxHeight,
+			filter,
+			children
+		})
 	});
 }
-Shortcut.displayName = "ContextMenu.Shortcut";
-var ContextMenu = Object.assign(Root, {
-	Root,
-	Trigger,
-	Portal,
-	Popup,
-	Group,
-	Label,
-	Item,
-	Sub,
-	SubTrigger,
-	SubPopup,
-	CheckboxItem,
-	RadioGroup,
-	RadioItem,
-	Separator,
-	Shortcut
-});
+CommandMenuPanel.displayName = "CommandMenu.Panel";
 //#endregion
-export { ContextMenu, CheckboxItem as ContextMenuCheckboxItem, Group as ContextMenuGroup, Item as ContextMenuItem, Label as ContextMenuLabel, Popup as ContextMenuPopup, Portal as ContextMenuPortal, RadioGroup as ContextMenuRadioGroup, RadioItem as ContextMenuRadioItem, Root as ContextMenuRoot, Separator as ContextMenuSeparator, Shortcut as ContextMenuShortcut, Sub as ContextMenuSub, SubPopup as ContextMenuSubPopup, SubTrigger as ContextMenuSubTrigger, Trigger as ContextMenuTrigger };
+export { CommandMenu, CommandMenuFooter, CommandMenuGroupHeader, CommandMenuItem, CommandMenuPanel, CommandShortcutBadge, FooterNavIcon, FooterNavText, defaultFooterHints };
 
 //# sourceMappingURL=index205.js.map