@umituz/web-dashboard 4.6.0 → 4.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "4.6.0",
+  "version": "4.6.2",
   "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

@@ -1,18 +1,43 @@
 import type { ReactNode } from "react";
 
+export interface PageHeaderCrumb {
+  label: string;
+  to?: string;
+}
+
 export interface PageHeaderProps {
   title: ReactNode;
   subtitle?: ReactNode;
+  description?: ReactNode;
+  breadcrumbs?: ReactNode | readonly PageHeaderCrumb[];
   actions?: ReactNode;
   className?: string;
 }
 
-export const PageHeader = ({ title, subtitle, actions, className }: PageHeaderProps) => (
-  <div className={`udb-pageheader${className ? ` ${className}` : ""}`}>
-    <div className="udb-pageheader__main">
-      <h1 className="udb-pageheader__title">{title}</h1>
-      {subtitle !== undefined && <p className="udb-pageheader__subtitle">{subtitle}</p>}
+const isCrumbList = (value: ReactNode | readonly PageHeaderCrumb[]): value is readonly PageHeaderCrumb[] =>
+  Array.isArray(value) && value.every((item) => typeof item === "object" && item !== null && "label" in item);
+
+export const PageHeader = ({ title, subtitle, description, breadcrumbs, actions, className }: PageHeaderProps) => {
+  const crumbNode =
+    breadcrumbs === undefined
+      ? undefined
+      : isCrumbList(breadcrumbs)
+        ? breadcrumbs.map((crumb, index) => (
+            <span key={`${crumb.label}-${index}`} className="udb-pageheader__crumb">
+              {crumb.to !== undefined ? <a href={crumb.to}>{crumb.label}</a> : crumb.label}
+            </span>
+          ))
+        : breadcrumbs;
+  return (
+    <div className={`udb-pageheader${className ? ` ${className}` : ""}`}>
+      {crumbNode !== undefined && <div className="udb-pageheader__breadcrumbs">{crumbNode}</div>}
+      <div className="udb-pageheader__main">
+        <h1 className="udb-pageheader__title">{title}</h1>
+        {(subtitle ?? description) !== undefined && (
+          <p className="udb-pageheader__subtitle">{subtitle ?? description}</p>
+        )}
+      </div>
+      {actions !== undefined && <div className="udb-pageheader__actions">{actions}</div>}
     </div>
-    {actions !== undefined && <div className="udb-pageheader__actions">{actions}</div>}
-  </div>
-);
+  );
+};

package/src/domains/layouts/components/index.ts

@@ -7,4 +7,4 @@ export { DashboardHeader } from './DashboardHeader';
 export { DashboardSidebar } from './DashboardSidebar';
 export { BrandLogo } from './BrandLogo';
 export { PageHeader } from './PageHeader';
-export type { PageHeaderProps } from './PageHeader';
+export type { PageHeaderProps, PageHeaderCrumb } from './PageHeader';

package/src/styles/dashboard.css

@@ -3154,6 +3154,30 @@
   padding: 0 8px;
 }
 
+.udb-pageheader__breadcrumbs .udb-pageheader__crumb + .udb-pageheader__crumb::before {
+  content: "/";
+  margin-right: 0.375rem;
+  color: var(--color-muted-foreground);
+  opacity: 0.6;
+}
+
+.udb-pageheader__breadcrumbs a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.udb-pageheader__breadcrumbs a:hover {
+  text-decoration: underline;
+}
+
+.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;