@hilum/ui 2.0.4 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +56 -37
- package/dist/index.js +441 -379
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/account-menu.tsx +116 -0
- package/src/index.ts +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import {
|
|
5
|
+
DropdownMenuContent,
|
|
6
|
+
DropdownMenuItem,
|
|
7
|
+
DropdownMenuSeparator,
|
|
8
|
+
} from "./dropdown-menu";
|
|
9
|
+
import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
|
|
10
|
+
import { cn } from "../lib/utils";
|
|
11
|
+
|
|
12
|
+
const AccountMenuContent = React.forwardRef<
|
|
13
|
+
React.ComponentRef<typeof DropdownMenuContent>,
|
|
14
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuContent>
|
|
15
|
+
>(({ className, sideOffset = 8, ...props }, ref) => (
|
|
16
|
+
<DropdownMenuContent
|
|
17
|
+
ref={ref}
|
|
18
|
+
sideOffset={sideOffset}
|
|
19
|
+
className={cn(
|
|
20
|
+
"w-80 overflow-hidden rounded-2xl border border-border bg-card p-0 text-foreground shadow-elevated",
|
|
21
|
+
className,
|
|
22
|
+
)}
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
));
|
|
26
|
+
AccountMenuContent.displayName = "AccountMenuContent";
|
|
27
|
+
|
|
28
|
+
interface AccountMenuHeaderProps extends React.ComponentProps<"div"> {
|
|
29
|
+
name: React.ReactNode;
|
|
30
|
+
email?: React.ReactNode;
|
|
31
|
+
avatarSrc?: string | null;
|
|
32
|
+
avatarAlt?: string;
|
|
33
|
+
fallback?: React.ReactNode;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const AccountMenuHeader = React.forwardRef<HTMLDivElement, AccountMenuHeaderProps>(
|
|
37
|
+
({ name, email, avatarSrc, avatarAlt, fallback, className, ...props }, ref) => (
|
|
38
|
+
<div
|
|
39
|
+
ref={ref}
|
|
40
|
+
className={cn("flex flex-col items-center px-6 py-7 text-center", className)}
|
|
41
|
+
{...props}
|
|
42
|
+
>
|
|
43
|
+
<Avatar size="xl" className="mb-4 size-14">
|
|
44
|
+
{avatarSrc && <AvatarImage src={avatarSrc} alt={avatarAlt ?? ""} />}
|
|
45
|
+
<AvatarFallback className="bg-brand-primary text-xl text-primary-foreground">
|
|
46
|
+
{fallback}
|
|
47
|
+
</AvatarFallback>
|
|
48
|
+
</Avatar>
|
|
49
|
+
<p className="body-lg font-medium leading-tight text-foreground">{name}</p>
|
|
50
|
+
{email && <p className="body text-muted-foreground">{email}</p>}
|
|
51
|
+
</div>
|
|
52
|
+
),
|
|
53
|
+
);
|
|
54
|
+
AccountMenuHeader.displayName = "AccountMenuHeader";
|
|
55
|
+
|
|
56
|
+
const AccountMenuSection = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
|
|
57
|
+
({ className, ...props }, ref) => (
|
|
58
|
+
<div ref={ref} className={cn("p-3", className)} {...props} />
|
|
59
|
+
),
|
|
60
|
+
);
|
|
61
|
+
AccountMenuSection.displayName = "AccountMenuSection";
|
|
62
|
+
|
|
63
|
+
interface AccountMenuItemProps
|
|
64
|
+
extends React.ComponentPropsWithoutRef<typeof DropdownMenuItem> {
|
|
65
|
+
icon?: React.ReactNode;
|
|
66
|
+
trailing?: React.ReactNode;
|
|
67
|
+
description?: React.ReactNode;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
const AccountMenuItem = React.forwardRef<
|
|
71
|
+
React.ComponentRef<typeof DropdownMenuItem>,
|
|
72
|
+
AccountMenuItemProps
|
|
73
|
+
>(({ icon, trailing, description, destructive, children, className, ...props }, ref) => (
|
|
74
|
+
<DropdownMenuItem
|
|
75
|
+
ref={ref}
|
|
76
|
+
className={cn(
|
|
77
|
+
"min-h-11 rounded-lg px-3 py-2.5",
|
|
78
|
+
"group",
|
|
79
|
+
destructive
|
|
80
|
+
? "text-destructive focus:bg-destructive/10 focus:text-destructive"
|
|
81
|
+
: "text-foreground focus:bg-muted focus:text-foreground",
|
|
82
|
+
"data-[disabled]:opacity-40",
|
|
83
|
+
"[&_svg:not([class*='size-'])]:size-5",
|
|
84
|
+
className,
|
|
85
|
+
)}
|
|
86
|
+
{...props}
|
|
87
|
+
>
|
|
88
|
+
{icon && <span className="flex size-6 shrink-0 items-center justify-center">{icon}</span>}
|
|
89
|
+
<span className="flex min-w-0 flex-1 flex-col">
|
|
90
|
+
<span className="body-lg truncate font-medium leading-tight">{children}</span>
|
|
91
|
+
{description && (
|
|
92
|
+
<span className="body truncate font-normal text-muted-foreground group-focus:text-muted-foreground">
|
|
93
|
+
{description}
|
|
94
|
+
</span>
|
|
95
|
+
)}
|
|
96
|
+
</span>
|
|
97
|
+
{trailing && <span className="caption ml-3 shrink-0 text-muted-foreground">{trailing}</span>}
|
|
98
|
+
</DropdownMenuItem>
|
|
99
|
+
));
|
|
100
|
+
AccountMenuItem.displayName = "AccountMenuItem";
|
|
101
|
+
|
|
102
|
+
const AccountMenuSeparator = React.forwardRef<
|
|
103
|
+
React.ComponentRef<typeof DropdownMenuSeparator>,
|
|
104
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuSeparator>
|
|
105
|
+
>(({ className, ...props }, ref) => (
|
|
106
|
+
<DropdownMenuSeparator ref={ref} className={cn("m-0 bg-border", className)} {...props} />
|
|
107
|
+
));
|
|
108
|
+
AccountMenuSeparator.displayName = "AccountMenuSeparator";
|
|
109
|
+
|
|
110
|
+
export {
|
|
111
|
+
AccountMenuContent,
|
|
112
|
+
AccountMenuHeader,
|
|
113
|
+
AccountMenuSection,
|
|
114
|
+
AccountMenuItem,
|
|
115
|
+
AccountMenuSeparator,
|
|
116
|
+
};
|
package/src/index.ts
CHANGED