UI Command Menu Item

1"use client";
2 
3import { mixOklch, type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
4 
5export type CommandMenuItemState = "idle" | "hover" | "press" | "selected";
6 
7export interface CommandMenuItemProps {
8  state?: CommandMenuItemState;
9  style?: CommandMenuItemStyle;
10  label?: string;
11  icon?: CommandMenuIcon;
12  shortcut?: string;
13  width?: number;
14  theme?: Partial<RemocnTheme>;
15  className?: string;
16}
17 
18export type CommandMenuIcon = "search" | "settings" | "user" | "file";
19 
20const ROW_WIDTH = 360;
21 
22export interface CommandMenuItemStyle {
23  background: string;
24  labelColor: string;
25  iconColor: string;
26  scale: number;
27}
28 
29export interface CommandMenuItemStyleContext {
30  idleBg: string;
31  hoverBg: string;
32  pressBg: string;
33  selectedBg: string;
34  idleFg: string;
35  selectedFg: string;
36  idleIcon: string;
37  selectedIcon: string;
38  kbdBg: string;
39  kbdFg: string;
40  kbdBorder: string;
41}
42 
43export function commandMenuItemStyleContext(
44  theme: RemocnTheme,
45): CommandMenuItemStyleContext {
46  return {
47    idleBg: theme.popover,
48    hoverBg: theme.accent,
49    pressBg: mixOklch(theme.accent, theme.foreground, 0.08),
50    selectedBg: theme.accent,
51    idleFg: theme.popoverForeground,
52    selectedFg: theme.accentForeground,
53    idleIcon: theme.mutedForeground,
54    selectedIcon: theme.foreground,
55    kbdBg: theme.muted,
56    kbdFg: theme.mutedForeground,
57    kbdBorder: theme.border,
58  };
59}
60 
61export function commandMenuItemStyle(
62  state: CommandMenuItemState,
63  ctx: CommandMenuItemStyleContext,
64): CommandMenuItemStyle {
65  switch (state) {
66    case "hover":
67      return {
68        background: ctx.hoverBg,
69        labelColor: ctx.idleFg,
70        iconColor: ctx.selectedIcon,
71        scale: 1,
72      };
73    case "press":
74      return {
75        background: ctx.pressBg,
76        labelColor: ctx.idleFg,
77        iconColor: ctx.selectedIcon,
78        scale: 0.98,
79      };
80    case "selected":
81      return {
82        background: ctx.selectedBg,
83        labelColor: ctx.selectedFg,
84        iconColor: ctx.selectedIcon,
85        scale: 1,
86      };
87    default:
88      return {
89        background: ctx.idleBg,
90        labelColor: ctx.idleFg,
91        iconColor: ctx.idleIcon,
92        scale: 1,
93      };
94  }
95}
96 
97const ICON_PATHS: Record<CommandMenuIcon, string> = {
98  search: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14ZM20 20l-3.5-3.5",
99  settings:
100    "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM12 2v3 M12 19v3 M4.2 4.2l2.1 2.1 M17.7 17.7l2.1 2.1 M2 12h3 M19 12h3 M4.2 19.8l2.1-2.1 M17.7 6.3l2.1-2.1",
101// … truncated