@brightweblabs/ui 1.5.2 → 1.5.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@brightweblabs/ui",
   "private": false,
-  "version": "1.5.2",
+  "version": "1.5.4",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -30,6 +30,7 @@
     "./card": "./src/components/card.tsx",
     "./chart": "./src/components/chart.tsx",
     "./checkbox": "./src/components/checkbox.tsx",
+    "./cover-header": "./src/components/cover-header.tsx",
     "./dropdown-menu": "./src/components/dropdown-menu.tsx",
     "./email/invitation": "./src/email/invitation.ts",
     "./empty-state": "./src/components/empty-state.tsx",
@@ -79,7 +80,7 @@
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "@brightweblabs/theme": "0.8.2"
+    "@brightweblabs/theme": "0.8.3"
   },
   "peerDependencies": {
     "lucide-react": "^1.8.0",

package/src/components/cover-header.tsx

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "../lib/utils";
+
+export type CoverHeaderProps = HTMLAttributes<HTMLElement> & {
+  children: ReactNode;
+  coverClassName?: string;
+  contentClassName?: string;
+};
+
+export function CoverHeader({
+  children,
+  className,
+  coverClassName,
+  contentClassName,
+  ...props
+}: CoverHeaderProps) {
+  return (
+    <header
+      className={cn(
+        "overflow-hidden rounded-[var(--radius-panel)] border border-border/60 bg-card shadow-[var(--cover-header-shadow)]",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        aria-hidden
+        className={cn("relative h-24 overflow-hidden sm:h-32", coverClassName)}
+        style={{ background: "var(--cover-header-surface)" }}
+      >
+        <span className="absolute -right-16 -top-24 size-72 rounded-full" style={{ background: "var(--cover-header-glow-strong)" }} />
+        <span className="absolute -bottom-24 left-[12%] size-56 rounded-full" style={{ background: "var(--cover-header-glow-soft)" }} />
+      </div>
+      <div className={cn("relative px-5 pb-6 sm:px-8 sm:pb-8", contentClassName)}>
+        {children}
+      </div>
+    </header>
+  );
+}

package/src/components/initials-avatar.tsx

@@ -4,7 +4,7 @@ import { getInitials } from "../lib/patterns";
 import { cn } from "../lib/utils";
 import { Avatar, AvatarFallback } from "./avatar";
 
-export type InitialsAvatarTone = "active" | "subtle";
+export type InitialsAvatarTone = "active" | "subtle" | "client" | "team" | "inverse";
 
 export type InitialsAvatarProps = Omit<ComponentProps<typeof Avatar>, "children"> & {
   label?: string | null;
@@ -15,6 +15,9 @@ export type InitialsAvatarProps = Omit<ComponentProps<typeof Avatar>, "children"
 const toneClasses: Record<InitialsAvatarTone, string> = {
   active: "bg-primary/15 text-primary",
   subtle: "bg-muted text-muted-foreground",
+  client: "bg-[color:var(--surface-account-client)] text-[color:var(--role-client-strong)]",
+  team: "bg-[color:var(--surface-account-team)] text-[color:var(--role-team-strong)]",
+  inverse: "bg-[color:var(--brand-panel-foreground)] text-[color:var(--project-hero-base)] ring-1 ring-[color:var(--brand-panel-border)]",
 };
 
 export function InitialsAvatar({ label, fallback, tone = "active", className, ...props }: InitialsAvatarProps) {

package/src/email/invitation.test.ts

@@ -35,6 +35,25 @@ test("invitation email creates an accessible branded HTML and text pair", () =>
   assert.doesNotMatch(email.html, /Verde & Filhos <Lda>/);
   assert.match(email.text, /Organização: Verde & Filhos <Lda>/);
   assert.match(email.text, /24 de agosto de 2026/);
+  assert.match(email.html, /Este convite foi enviado para ana@example\.com/);
+});
+
+test("transactional email can use non-invitation recipient wording", () => {
+  const email = buildInvitationEmail({
+    brandName: "BeGreen Consulting",
+    preheader: "A sua conta foi atualizada.",
+    eyebrow: "Aviso de segurança",
+    title: "Alteração concluída",
+    introduction: "A operação foi concluída.",
+    details: [{ label: "Estado", value: "Concluído" }],
+    recipientEmail: "ana@example.com",
+    recipientLabel: "Esta mensagem foi enviada para",
+    closingNote: "Se não reconhece esta mensagem, pode ignorá-la em segurança.",
+  });
+
+  assert.match(email.html, /Esta mensagem foi enviada para ana@example\.com/);
+  assert.match(email.text, /Esta mensagem foi enviada para ana@example\.com/);
+  assert.doesNotMatch(email.html, /convite/i);
 });
 
 test("email brand name follows the configured sender display name", () => {

package/src/email/invitation.ts

@@ -90,6 +90,7 @@ export type TransactionalEmailContent = {
   actionUrl?: string;
   expiresLabel?: string | null;
   recipientEmail?: string;
+  recipientLabel?: string;
   closingNote?: string;
   palette?: Partial<TransactionalEmailPalette>;
 };
@@ -131,6 +132,7 @@ export function buildTransactionalEmail(content: TransactionalEmailContent): Tra
   const hasAction = Boolean(actionLabel && actionUrl);
   const expiresLabel = content.expiresLabel ? escapeHtml(content.expiresLabel) : null;
   const recipientEmail = content.recipientEmail ? escapeHtml(content.recipientEmail) : null;
+  const recipientLabel = escapeHtml(content.recipientLabel ?? "Este convite foi enviado para");
   const closingNote = escapeHtml(content.closingNote ?? "Se não reconhece este convite, pode ignorar esta mensagem em segurança.");
   const detailRows = content.details.map((detail, index) => `
                     <tr>
@@ -198,7 +200,7 @@ export function buildTransactionalEmail(content: TransactionalEmailContent): Tra
               </td>
             </tr>
           </table>
-          <p style="margin:18px auto 0;max-width:540px;color:${palette.mutedText};font-size:11px;line-height:1.6;text-align:center;">${closingNote}${recipientEmail ? `<br>Este convite foi enviado para ${recipientEmail}.` : ""}</p>
+          <p style="margin:18px auto 0;max-width:540px;color:${palette.mutedText};font-size:11px;line-height:1.6;text-align:center;">${closingNote}${recipientEmail ? `<br>${recipientLabel} ${recipientEmail}.` : ""}</p>
         </td>
       </tr>
     </table>
@@ -207,7 +209,7 @@ export function buildTransactionalEmail(content: TransactionalEmailContent): Tra
 
   const detailText = content.details.map((detail) => `${detail.label}: ${detail.value}`).join("\n");
   const actionText = hasAction ? `\n\n${content.actionLabel}:\n${content.actionUrl}` : "";
-  const text = `${content.brandName}\n\n${content.title}\n\n${content.introduction}\n\n${detailText}${actionText}${content.expiresLabel ? `\n\nEste convite é válido até ${content.expiresLabel}.` : ""}\n\n${content.closingNote ?? "Se não reconhece este convite, pode ignorar esta mensagem em segurança."}${content.recipientEmail ? `\nEste convite foi enviado para ${content.recipientEmail}.` : ""}`;
+  const text = `${content.brandName}\n\n${content.title}\n\n${content.introduction}\n\n${detailText}${actionText}${content.expiresLabel ? `\n\nEste convite é válido até ${content.expiresLabel}.` : ""}\n\n${content.closingNote ?? "Se não reconhece este convite, pode ignorar esta mensagem em segurança."}${content.recipientEmail ? `\n${content.recipientLabel ?? "Este convite foi enviado para"} ${content.recipientEmail}.` : ""}`;
 
   return { html, text };
 }

package/src/index.ts

@@ -32,6 +32,7 @@ export { TableRowsSkeleton } from "./components/skeleton-table";
 export { Separator } from "./components/separator";
 export * from "./components/alert-dialog";
 export * from "./components/card";
+export * from "./components/cover-header";
 export * from "./components/chart";
 export * from "./components/breadcrumb";
 export * from "./components/calendar";