Lemma User Menu

1"use client"
2 
3import * as React from "react"
4import { LogOut, User, ChevronDown } from "lucide-react"
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuGroup,
9  DropdownMenuItem,
10  DropdownMenuLabel,
11  DropdownMenuSeparator,
12  DropdownMenuTrigger,
13} from "@/components/lemma/ui/dropdown-menu"
14import { cn } from "@/components/lemma/lib/utils"
15 
16export type LemmaUserMenuAppearance = "default" | "borderless" | "minimal" | "contained"
17export type LemmaUserMenuDensity = "compact" | "comfortable" | "spacious"
18export type LemmaUserMenuRadius = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
19 
20export interface LemmaUserMenuItem {
21  label: string
22  href?: string
23  onClick?: () => void
24  icon?: React.ReactNode
25  variant?: "default" | "destructive"
26}
27 
28export interface LemmaUserMenuProps {
29  userName?: string
30  userEmail?: string
31  userAvatarUrl?: string
32  isOnline?: boolean
33  menuItems?: LemmaUserMenuItem[]
34  onSignOut?: () => void
35  appearance?: LemmaUserMenuAppearance
36  density?: LemmaUserMenuDensity
37  radius?: LemmaUserMenuRadius
38  className?: string
39}
40 
41const RADIUS_MAP: Record<LemmaUserMenuRadius, Record<string, string>> = {
42  none:  { surface: "rounded-none", control: "rounded-none", pill: "rounded-none", overlay: "rounded-none" },
43  sm:    { surface: "rounded-sm", control: "rounded-sm", pill: "rounded-full", overlay: "rounded-sm" },
44  md:    { surface: "rounded-md", control: "rounded-md", pill: "rounded-full", overlay: "rounded-md" },
45  lg:    { surface: "rounded-lg", control: "rounded-md", pill: "rounded-full", overlay: "rounded-lg" },
46  xl:    { surface: "rounded-xl", control: "rounded-lg", pill: "rounded-full", overlay: "rounded-xl" },
47  "2xl": { surface: "rounded-2xl", control: "rounded-xl", pill: "rounded-full", overlay: "rounded-2xl" },
48  "3xl": { surface: "rounded-3xl", control: "rounded-2xl", pill: "rounded-full", overlay: "rounded-3xl" },
49  full:  { surface: "rounded-3xl", control: "rounded-full", pill: "rounded-full", overlay: "rounded-3xl" },
50}
51 
52function userMenuRadiusClassName(
53  radius: LemmaUserMenuRadius,
54  kind: "surface" | "control" | "pill" | "overlay",
55): string {
56  return RADIUS_MAP[radius]?.[kind] ?? RADIUS_MAP.lg[kind]
57}
58 
59function triggerVariant(appearance: LemmaUserMenuAppearance) {
60  return appearance === "minimal" || appearance === "borderless" ? "ghost" : "outline"
61}
62 
63function avatarShellClassName(appearance: LemmaUserMenuAppearance) {
64  return cn(
65// … truncated