UI Dropdown Menu

1"use client";
2 
3import {
4  type ButtonStyle,
5  type ButtonStyleContext,
6  buttonStyle,
7  buttonStyleContext,
8} from "@/components/remocn/button";
9import {
10  DropdownMenuItemRow,
11  type DropdownMenuItemStyle,
12  type DropdownMenuItemStyleContext,
13  dropdownMenuItemStyle,
14  dropdownMenuItemStyleContext,
15} from "@/components/remocn/dropdown-menu-item";
16import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
17 
18export type DropdownMenuState = "opened" | "closed";
19 
20export interface DropdownMenuStyle {
21  panelOpacity: number;
22  panelScale: number;
23  panelTranslateY: number;
24  chevronRotation: number;
25}
26 
27export interface DropdownMenuStyleContext {
28  triggerCtx: ButtonStyleContext;
29  panelBg: string;
30  panelBorder: string;
31  triggerFg: string;
32  mutedFg: string;
33  radius: number;
34  itemCtx: DropdownMenuItemStyleContext;
35}
36 
37export function dropdownMenuStyleContext(
38  theme: RemocnTheme,
39): DropdownMenuStyleContext {
40  return {
41    triggerCtx: buttonStyleContext("outline", theme),
42    panelBg: theme.popover,
43    panelBorder: theme.border,
44    triggerFg: theme.foreground,
45    mutedFg: theme.mutedForeground,
46    radius: theme.radius,
47    itemCtx: dropdownMenuItemStyleContext(theme),
48  };
49}
50 
51export function dropdownMenuStyle(
52  state: DropdownMenuState,
53  _ctx: DropdownMenuStyleContext,
54): DropdownMenuStyle {
55  switch (state) {
56    case "opened":
57      return {
58        panelOpacity: 1,
59        panelScale: 1,
60        panelTranslateY: 0,
61        chevronRotation: 180,
62      };
63    default:
64      return {
65        panelOpacity: 0,
66        panelScale: 0.96,
67        panelTranslateY: -4,
68        chevronRotation: 0,
69      };
70  }
71}
72 
73const WIDTH = 240;
74 
75export interface DropdownMenuProps {
76  state?: DropdownMenuState;
77  style?: DropdownMenuStyle;
78  label?: string;
79  items?: string[];
80  highlightedIndex?: number;
81  pressedIndex?: number;
82  itemStyles?: (DropdownMenuItemStyle | undefined)[];
83  triggerStyle?: ButtonStyle;
84  theme?: Partial<RemocnTheme>;
85  className?: string;
86}
87 
88export function DropdownMenu({
89  state = "closed",
90  style,
91  label = "Options",
92  items = ["Profile", "Billing", "Settings", "Log out"],
93  highlightedIndex = -1,
94  pressedIndex = -1,
95  itemStyles,
96  triggerStyle,
97  theme: themeOverride,
98  className,
99}: DropdownMenuProps) {
100  const theme = useRemocnTheme(themeOverride, "light");
101 
102  const ctx = dropdownMenuStyleContext(theme);
103  const v = style ?? dropdownMenuStyle(state, ctx);
104 
105  const trigger = triggerStyle ?? buttonStyle("idle", ctx.triggerCtx);
106 
107// … truncated