UI Dropdown Menu Item

1"use client";
2 
3import { mixOklch, type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
4 
5export type DropdownMenuItemState = "idle" | "hover" | "press";
6 
7export interface DropdownMenuItemStyle {
8  background: string;
9  labelColor: string;
10  scale: number;
11}
12 
13export interface DropdownMenuItemStyleContext {
14  idleBg: string;
15  hoverBg: string;
16  pressBg: string;
17  idleFg: string;
18}
19 
20export function dropdownMenuItemStyleContext(
21  theme: RemocnTheme,
22): DropdownMenuItemStyleContext {
23  return {
24    idleBg: theme.popover,
25    hoverBg: theme.accent,
26    pressBg: mixOklch(theme.accent, theme.foreground, 0.08),
27    idleFg: theme.popoverForeground,
28  };
29}
30 
31export function dropdownMenuItemStyle(
32  state: DropdownMenuItemState,
33  ctx: DropdownMenuItemStyleContext,
34): DropdownMenuItemStyle {
35  switch (state) {
36    case "hover":
37      return { background: ctx.hoverBg, labelColor: ctx.idleFg, scale: 1 };
38    case "press":
39      return { background: ctx.pressBg, labelColor: ctx.idleFg, scale: 0.98 };
40    default:
41      return { background: ctx.idleBg, labelColor: ctx.idleFg, scale: 1 };
42  }
43}
44 
45const ROW_WIDTH = 240;
46 
47export interface DropdownMenuItemRowProps {
48  style?: DropdownMenuItemStyle;
49  state?: DropdownMenuItemState;
50  label?: string;
51  width?: number;
52  theme?: Partial<RemocnTheme>;
53}
54 
55export function DropdownMenuItemRow({
56  style,
57  state = "idle",
58  label = "Profile",
59  width = ROW_WIDTH,
60  theme: themeOverride,
61}: DropdownMenuItemRowProps) {
62  const theme = useRemocnTheme(themeOverride, "light");
63  const ctx = dropdownMenuItemStyleContext(theme);
64  const v = style ?? dropdownMenuItemStyle(state, ctx);
65 
66  return (
67    <div
68      style={{
69        display: "flex",
70        alignItems: "center",
71        width,
72        padding: "8px 12px",
73        borderRadius: theme.radius,
74        background: v.background,
75        color: v.labelColor,
76        transform: `scale(${v.scale})`,
77        fontSize: 14,
78        letterSpacing: "-0.01em",
79        boxSizing: "border-box",
80      }}
81    >
82      <span>{label}</span>
83    </div>
84  );
85}
86 
87export interface DropdownMenuItemProps extends DropdownMenuItemRowProps {
88  className?: string;
89}
90 
91export function DropdownMenuItem({
92  style,
93  state = "idle",
94  label = "Profile",
95  width = ROW_WIDTH,
96  theme: themeOverride,
97  className,
98}: DropdownMenuItemProps) {
99  return (
100    <div
101      className={className}
102      style={{
103        position: "absolute",
104        inset: 0,
105        display: "flex",
106        alignItems: "center",
107// … truncated