@brightweblabs/ui 1.5.3 → 1.5.4
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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightweblabs/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.5.
|
|
4
|
+
"version": "1.5.4",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
7
7
|
"files": [
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"./card": "./src/components/card.tsx",
|
|
31
31
|
"./chart": "./src/components/chart.tsx",
|
|
32
32
|
"./checkbox": "./src/components/checkbox.tsx",
|
|
33
|
+
"./cover-header": "./src/components/cover-header.tsx",
|
|
33
34
|
"./dropdown-menu": "./src/components/dropdown-menu.tsx",
|
|
34
35
|
"./email/invitation": "./src/email/invitation.ts",
|
|
35
36
|
"./empty-state": "./src/components/empty-state.tsx",
|
|
@@ -79,7 +80,7 @@
|
|
|
79
80
|
"recharts": "^2.15.4",
|
|
80
81
|
"sonner": "^2.0.7",
|
|
81
82
|
"tailwind-merge": "^3.6.0",
|
|
82
|
-
"@brightweblabs/theme": "0.8.
|
|
83
|
+
"@brightweblabs/theme": "0.8.3"
|
|
83
84
|
},
|
|
84
85
|
"peerDependencies": {
|
|
85
86
|
"lucide-react": "^1.8.0",
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
|
|
5
|
+
export type CoverHeaderProps = HTMLAttributes<HTMLElement> & {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
coverClassName?: string;
|
|
8
|
+
contentClassName?: string;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export function CoverHeader({
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
coverClassName,
|
|
15
|
+
contentClassName,
|
|
16
|
+
...props
|
|
17
|
+
}: CoverHeaderProps) {
|
|
18
|
+
return (
|
|
19
|
+
<header
|
|
20
|
+
className={cn(
|
|
21
|
+
"overflow-hidden rounded-[var(--radius-panel)] border border-border/60 bg-card shadow-[var(--cover-header-shadow)]",
|
|
22
|
+
className,
|
|
23
|
+
)}
|
|
24
|
+
{...props}
|
|
25
|
+
>
|
|
26
|
+
<div
|
|
27
|
+
aria-hidden
|
|
28
|
+
className={cn("relative h-24 overflow-hidden sm:h-32", coverClassName)}
|
|
29
|
+
style={{ background: "var(--cover-header-surface)" }}
|
|
30
|
+
>
|
|
31
|
+
<span className="absolute -right-16 -top-24 size-72 rounded-full" style={{ background: "var(--cover-header-glow-strong)" }} />
|
|
32
|
+
<span className="absolute -bottom-24 left-[12%] size-56 rounded-full" style={{ background: "var(--cover-header-glow-soft)" }} />
|
|
33
|
+
</div>
|
|
34
|
+
<div className={cn("relative px-5 pb-6 sm:px-8 sm:pb-8", contentClassName)}>
|
|
35
|
+
{children}
|
|
36
|
+
</div>
|
|
37
|
+
</header>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
@@ -4,7 +4,7 @@ import { getInitials } from "../lib/patterns";
|
|
|
4
4
|
import { cn } from "../lib/utils";
|
|
5
5
|
import { Avatar, AvatarFallback } from "./avatar";
|
|
6
6
|
|
|
7
|
-
export type InitialsAvatarTone = "active" | "subtle";
|
|
7
|
+
export type InitialsAvatarTone = "active" | "subtle" | "client" | "team" | "inverse";
|
|
8
8
|
|
|
9
9
|
export type InitialsAvatarProps = Omit<ComponentProps<typeof Avatar>, "children"> & {
|
|
10
10
|
label?: string | null;
|
|
@@ -15,6 +15,9 @@ export type InitialsAvatarProps = Omit<ComponentProps<typeof Avatar>, "children"
|
|
|
15
15
|
const toneClasses: Record<InitialsAvatarTone, string> = {
|
|
16
16
|
active: "bg-primary/15 text-primary",
|
|
17
17
|
subtle: "bg-muted text-muted-foreground",
|
|
18
|
+
client: "bg-[color:var(--surface-account-client)] text-[color:var(--role-client-strong)]",
|
|
19
|
+
team: "bg-[color:var(--surface-account-team)] text-[color:var(--role-team-strong)]",
|
|
20
|
+
inverse: "bg-[color:var(--brand-panel-foreground)] text-[color:var(--project-hero-base)] ring-1 ring-[color:var(--brand-panel-border)]",
|
|
18
21
|
};
|
|
19
22
|
|
|
20
23
|
export function InitialsAvatar({ label, fallback, tone = "active", className, ...props }: InitialsAvatarProps) {
|
package/src/index.ts
CHANGED
|
@@ -32,6 +32,7 @@ export { TableRowsSkeleton } from "./components/skeleton-table";
|
|
|
32
32
|
export { Separator } from "./components/separator";
|
|
33
33
|
export * from "./components/alert-dialog";
|
|
34
34
|
export * from "./components/card";
|
|
35
|
+
export * from "./components/cover-header";
|
|
35
36
|
export * from "./components/chart";
|
|
36
37
|
export * from "./components/breadcrumb";
|
|
37
38
|
export * from "./components/calendar";
|