"use client"; import { type CommandMenuIcon, CommandMenuItemRow, type CommandMenuItemState, type CommandMenuItemStyle, type CommandMenuItemStyleContext, commandMenuItemStyle, commandMenuItemStyleContext, } from "@/components/remocn/command-menu-item"; import { type RemocnTheme, revealedText, useRemocnTheme, } from "@/lib/remocn-ui"; export type CommandMenuState = "opened" | "closed"; export interface CommandMenuEntry { icon?: CommandMenuIcon; label: string; shortcut?: string; } export interface CommandMenuProps { state?: CommandMenuState; style?: CommandMenuStyle; query?: string; revealCount?: number; items?: CommandMenuEntry[]; selectedIndex?: number; highlightedIndex?: number; pressedIndex?: number; itemStyles?: (CommandMenuItemStyle | undefined)[]; theme?: Partial; className?: string; } const PANEL_WIDTH = 440; const CONTENT_WIDTH = PANEL_WIDTH - 16; const MAX_OVERLAY_ALPHA = 0.5; export function filterCommandItems( items: CommandMenuEntry[], query: string, revealCount?: number, ): CommandMenuEntry[] { const visible = ( revealCount === undefined ? query : revealedText(query, revealCount) ) .trim() .toLowerCase(); if (visible === "") return items; return items.filter((item) => item.label.toLowerCase().includes(visible)); } export interface CommandMenuStyle { backdropOpacity: number; panelOpacity: number; panelScale: number; panelTranslateY: number; } export interface CommandMenuStyleContext { panelBg: string; panelBorder: string; inputFg: string; placeholderFg: string; mutedFg: string; divider: string; caret: string; radius: number; itemCtx: CommandMenuItemStyleContext; } export function commandMenuStyleContext( theme: RemocnTheme, ): CommandMenuStyleContext { return { panelBg: theme.popover, panelBorder: theme.border, inputFg: theme.popoverForeground, placeholderFg: theme.mutedForeground, mutedFg: theme.mutedForeground, divider: theme.border, caret: theme.foreground, radius: theme.radius, itemCtx: commandMenuItemStyleContext(theme), }; } export function commandMenuStyle( state: CommandMenuState, _ctx: CommandMenuStyleContext, ): CommandMenuStyle { switch (state) { case "opened": return { backdropOpacity: 1, panelOpacity: 1, panelScale: 1, panelTranslateY: 0, }; default: return { backdropOpacity: 0, panelOpacity: 0, panelScale: 0.96, panelTranslateY: 8, }; } } function rowState( i: number, selectedIndex: number, highlightedIndex: number, pressedIndex: number, ): CommandMenuItemState { if (i === pressedIndex) return "press"; if (i === selectedIndex) return "selected"; if (i === highlightedIndex) return "hover"; return "idle"; } export function CommandMenu({ state = "closed", style, query = "", revealCount, items = [ { icon: "user", label: "Profile", shortcut: "⌘ P" }, { icon: "settings", label: "Settings", shortcut: "⌘ S" }, { icon: "file", label: "New File", shortcut: "⌘ N" }, { icon: "search", label: "Search docs" }, ], selectedIndex = -1, highlightedIndex = -1, pressedIndex = -1, itemStyles, theme: themeOverride, className, }: CommandMenuProps) { const theme = useRemocnTheme(themeOverride, "light"); const ctx = commandMenuStyleContext(theme); const v = style ?? commandMenuStyle(state, ctx); const visibleQuery = revealCount === undefined ? query : revealedText(query, revealCount); const filtered = filterCommandItems(items, query, revealCount); return (

{}

{visibleQuery || "Type a command or search…"} {}

{}

{filtered.length === 0 ? (

No results found.

) : ( filtered.map((item, i) => { const override = itemStyles?.[i]; return ( ); }) )}

); }