@umituz/web-dashboard 4.6.0 → 4.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "description": "Installable app skeleton for the fleet — layouts, auth, onboarding, analytics (dependency-free SVG charts), calendar, i18n injection, permissions/session/module registry; ships its own udb-* stylesheet and --u-* tokens",
   "type": "module",
   "main": "./src/index.ts",

package/src/domains/layouts/components/PageHeader.tsx

@@ -3,15 +3,20 @@ import type { ReactNode } from "react";
 export interface PageHeaderProps {
   title: ReactNode;
   subtitle?: ReactNode;
+  description?: ReactNode;
+  breadcrumbs?: ReactNode;
   actions?: ReactNode;
   className?: string;
 }
 
-export const PageHeader = ({ title, subtitle, actions, className }: PageHeaderProps) => (
+export const PageHeader = ({ title, subtitle, description, breadcrumbs, actions, className }: PageHeaderProps) => (
   <div className={`udb-pageheader${className ? ` ${className}` : ""}`}>
+    {breadcrumbs !== undefined && <div className="udb-pageheader__breadcrumbs">{breadcrumbs}</div>}
     <div className="udb-pageheader__main">
       <h1 className="udb-pageheader__title">{title}</h1>
-      {subtitle !== undefined && <p className="udb-pageheader__subtitle">{subtitle}</p>}
+      {(subtitle ?? description) !== undefined && (
+        <p className="udb-pageheader__subtitle">{subtitle ?? description}</p>
+      )}
     </div>
     {actions !== undefined && <div className="udb-pageheader__actions">{actions}</div>}
   </div>

package/src/styles/dashboard.css

@@ -3154,6 +3154,14 @@
   padding: 0 8px;
 }
 
+.udb-pageheader__breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  color: var(--color-muted-foreground);
+}
+
 .udb-pageheader {
   display: flex;
   flex-wrap: wrap;