"use client";
import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { Avatar } from "./index15.js";
import { Kbd } from "./index83.js";
import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandNamespace, CommandSeparator } from "./index389.js";
import { ArrowDown, ArrowUp, CornerDownLeft, Search, Settings } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/menus/CommandMenu/CommandMenu.tsx
function usePlatformShortcut() {
	const [shortcut, setShortcut] = React.useState("⌘/");
	React.useEffect(() => {
		if (!/Mac|iPhone|iPad/i.test(navigator.userAgent)) setShortcut("Ctrl /");
	}, []);
	return shortcut;
}
function CommandShortcutBadge({ children, className }) {
	return /* @__PURE__ */ jsx(Kbd, {
		variant: "solid",
		size: "sm",
		className: cn("shadow-xs", className),
		children
	});
}
CommandShortcutBadge.displayName = "CommandMenu.ShortcutBadge";
function FooterNavIcon({ children, className }) {
	return /* @__PURE__ */ jsx(Kbd, {
		variant: "footer",
		size: "sm",
		className: cn("p-1.5", className),
		children
	});
}
FooterNavIcon.displayName = "CommandMenu.FooterNavIcon";
function FooterNavText({ children, className }) {
	return /* @__PURE__ */ jsx("span", {
		className: cn("text-sm font-semibold text-quaternary-foreground", className),
		children
	});
}
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-quaternary-foreground" }) }), /* @__PURE__ */ jsx(FooterNavIcon, { children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-2.5 text-quaternary-foreground" }) })]
		}),
		label: "to navigate"
	},
	{
		keys: /* @__PURE__ */ jsx(FooterNavIcon, { children: /* @__PURE__ */ jsx(CornerDownLeft, { className: "size-2.5 text-quaternary-foreground" }) }),
		label: "to select"
	},
	{
		keys: /* @__PURE__ */ jsx(FooterNavIcon, {
			className: "px-1.5 py-1",
			children: /* @__PURE__ */ jsx("span", {
				className: "text-xs font-semibold text-quaternary-foreground",
				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" })
		})]
	});
}
CommandMenuFooter.displayName = "CommandMenu.Footer";
function CommandMenuItem({ option, onSelect, className, ...props }) {
	return /* @__PURE__ */ jsxs(CommandItem, {
		value: option.id,
		disabled: option.disabled,
		onSelect: () => onSelect?.(option.id, option),
		className: cn("mx-2 my-0.5 flex cursor-pointer items-center gap-2 rounded-lg py-2.5 pe-2 ps-2.5 transition-[color,background-color,border-color,transform] duration-150 motion-reduce:transition-none active:scale-[0.98]", 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 ring-2 ring-transparent transition-shadow duration-150 group-data-selected/command-item:ring-brand-500/20"
			}),
			option.icon && !option.avatar && /* @__PURE__ */ jsx("span", {
				className: "size-6 shrink-0 text-muted-foreground transition-colors duration-150 group-data-selected/command-item:text-brand-500",
				children: option.icon
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex flex-1 items-baseline gap-2 text-sm",
				children: [/* @__PURE__ */ jsx("span", {
					className: "font-medium text-foreground transition-[font-weight] duration-150 group-data-selected/command-item:font-semibold",
					children: option.label
				}), option.subtitle && /* @__PURE__ */ jsx("span", {
					className: "font-normal text-muted-foreground transition-colors duration-150 group-data-selected/command-item:text-foreground/60",
					children: option.subtitle
				})]
			}),
			option.shortcut && /* @__PURE__ */ jsx(CommandShortcutBadge, {
				className: "transition-colors duration-150 group-data-selected/command-item:bg-brand-500/10 group-data-selected/command-item:text-brand-600",
				children: option.shortcut
			})
		]
	});
}
CommandMenuItem.displayName = "CommandMenu.Item";
function CommandMenuGroupHeader({ children, className, ...props }) {
	return /* @__PURE__ */ jsx("h3", {
		"data-slot": "command-menu-group-header",
		className: cn("px-[18px] pt-3 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", className),
		...props,
		children
	});
}
CommandMenuGroupHeader.displayName = "CommandMenu.GroupHeader";
function CommandMenuBody({ children, groups, options, onSelect, placeholder, emptyText, emptyState, showShortcut, shortcutText, showFooter, footerHints, showSettingsButton, onSettingsClick, maxHeight, filter }) {
	const renderOption = (option) => /* @__PURE__ */ jsx(CommandMenuItem, {
		option,
		onSelect
	}, option.id);
	const renderContent = () => {
		if (children) return children;
		if (groups.length > 0) return groups.map((group, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}), /* @__PURE__ */ jsxs(CommandGroup, {
			"aria-labelledby": `cmd-group-${group.id}`,
			children: [/* @__PURE__ */ jsx(CommandMenuGroupHeader, {
				id: `cmd-group-${group.id}`,
				children: group.label
			}), /* @__PURE__ */ jsx("div", {
				className: "flex flex-col",
				children: group.options.map(renderOption)
			})]
		})] }, group.id));
		return options.map(renderOption);
	};
	return /* @__PURE__ */ jsxs(CommandNamespace, {
		filter,
		className: "rounded-xl",
		"data-slot": "command-menu",
		children: [
			/* @__PURE__ */ jsxs("search", {
				"aria-label": "Command menu search",
				className: "flex items-center gap-2 border-b border-border bg-background p-4",
				children: [
					/* @__PURE__ */ jsx(Search, {
						className: "size-5 shrink-0 text-secondary-foreground animate-in fade-in-0 zoom-in-75 duration-300 motion-reduce:animate-none",
						"aria-hidden": "true"
					}),
					/* @__PURE__ */ jsx(CommandInput, { render: (props) => /* @__PURE__ */ jsx("input", {
						...props,
						placeholder,
						"aria-label": placeholder,
						className: "flex-1 bg-transparent text-base leading-6 text-foreground placeholder:text-muted-foreground outline-none",
						"data-slot": "command-menu-input"
					}) }),
					showShortcut && /* @__PURE__ */ jsx(CommandShortcutBadge, { children: shortcutText })
				]
			}),
			/* @__PURE__ */ jsxs(CommandList, {
				style: { maxHeight },
				className: "overflow-y-auto py-2",
				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
				}), renderContent()]
			}),
			showFooter && /* @__PURE__ */ jsx(CommandMenuFooter, {
				hints: footerHints,
				showSettingsButton,
				onSettingsClick
			})
		]
	});
}
CommandMenuBody.displayName = "CommandMenu.Body";
function CommandMenu({ open, onOpenChange, placeholder = "Search", emptyText = "No results found.", emptyState, options = [], groups = [], onSelect, showShortcut = true, shortcutText, showFooter = true, footerHints, showSettingsButton = false, onSettingsClick, className, maxHeight = 288, filter, children }) {
	const platformShortcut = usePlatformShortcut();
	const resolvedShortcut = shortcutText ?? platformShortcut;
	return /* @__PURE__ */ jsx(CommandDialog, {
		open,
		onOpenChange,
		className: cn("max-w-[640px]", className),
		children: /* @__PURE__ */ jsx(CommandMenuBody, {
			placeholder,
			emptyText,
			emptyState,
			options,
			groups,
			onSelect,
			showShortcut,
			shortcutText: resolvedShortcut,
			showFooter,
			footerHints,
			showSettingsButton,
			onSettingsClick,
			maxHeight,
			filter,
			children
		})
	});
}
CommandMenu.displayName = "CommandMenu";
function CommandMenuPanel({ placeholder = "Search", emptyText = "No results found.", emptyState, options = [], groups = [], onSelect, showShortcut = true, shortcutText, showFooter = true, footerHints, showSettingsButton = false, onSettingsClick, className, maxHeight = 288, filter, children }) {
	const platformShortcut = usePlatformShortcut();
	const resolvedShortcut = shortcutText ?? platformShortcut;
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "command-menu-panel",
		className: cn("w-full max-w-[640px] overflow-hidden rounded-xl bg-background shadow-medium", className),
		children: /* @__PURE__ */ jsx(CommandMenuBody, {
			placeholder,
			emptyText,
			emptyState,
			options,
			groups,
			onSelect,
			showShortcut,
			shortcutText: resolvedShortcut,
			showFooter,
			footerHints,
			showSettingsButton,
			onSettingsClick,
			maxHeight,
			filter,
			children
		})
	});
}
CommandMenuPanel.displayName = "CommandMenu.Panel";
//#endregion
export { CommandMenu, CommandMenuFooter, CommandMenuGroupHeader, CommandMenuItem, CommandMenuPanel, CommandShortcutBadge, FooterNavIcon, FooterNavText, defaultFooterHints };

//# sourceMappingURL=index459.js.map