@orsetra/shared-ui 1.3.2 → 1.3.3

package/components/ui/detail-page-header.tsx

@@ -3,38 +3,41 @@
 import { ArrowLeft } from "lucide-react"
 import Link from "next/link"
 import type { ReactNode, ElementType } from "react"
-
-const TAB_ACTIVE =
-  "border-b-2 border-ibm-blue-60 text-ibm-blue-60 bg-ibm-blue-10/60"
-const TAB_INACTIVE =
-  "border-b-2 border-transparent text-ibm-gray-60 hover:text-ibm-blue-60 hover:bg-ibm-blue-10/40"
+import { cn } from "../../lib/utils"
 
 export interface DetailPageHeaderTab {
   id: string
   label: string
   icon?: ElementType
-  href: string
+  /** Required when onTabChange is not provided (URL-based navigation) */
+  href?: string
 }
 
 export interface DetailPageHeaderProps {
   /** Back breadcrumb link destination */
-  backHref: string
+  backHref?: string
   /** Back breadcrumb label */
-  backLabel: string
+  backLabel?: string
   /** Optional icon rendered in a blue square container */
   icon?: ReactNode
-  /** Page title – truncated to one line */
+  /** Page title */
   title: string
-  /** Optional subtitle – truncated to one line */
+  /** Optional subtitle */
   description?: string
-  /** Slot for badges, status buttons, action buttons placed to the right */
+  /** Slot for badges or status nodes placed next to the title */
+  statusNode?: ReactNode
+  /** Slot for action buttons placed to the right */
   actions?: ReactNode
-  /** Optional tab navigation rendered at the bottom of the header */
+  /** Optional tab navigation */
   tabBar?: DetailPageHeaderTab[]
   /** Alignment of the tab bar – defaults to "left" */
   tabBarPosition?: "left" | "right"
   /** Currently active tab id */
   activeTab?: string
+  /** State-based tab change handler. When provided, tabs render as buttons instead of Links */
+  onTabChange?: (id: string) => void
+  /** Extra classes on the root element – use to adjust spacing/height */
+  className?: string
 }
 
 export function DetailPageHeader({
@@ -43,79 +46,94 @@ export function DetailPageHeader({
   icon,
   title,
   description,
+  statusNode,
   actions,
   tabBar,
   tabBarPosition = "left",
   activeTab,
+  onTabChange,
+  className,
 }: DetailPageHeaderProps) {
   return (
-    <div className="bg-white border-b border-ibm-gray-20">
-      <div className="px-4 sm:px-6 pt-4 pb-0">
+    <div className={cn("mb-4 sm:mb-6", className)}>
 
-        {/* Breadcrumb */}
+      {/* Back link */}
+      {backHref && backLabel && (
         <Link
           href={backHref}
-          className="inline-flex items-center gap-1.5 text-xs text-ibm-gray-50 hover:text-ibm-blue-60 transition-colors mb-3"
+          className="inline-flex items-center gap-1.5 text-xs text-text-secondary hover:text-ibm-blue-60 transition-colors mb-3"
         >
-          <ArrowLeft className="h-3 w-3" />
+          <ArrowLeft className="h-3.5 w-3.5" />
           {backLabel}
         </Link>
+      )}
 
-        {/* Title row */}
-        <div className="flex items-center justify-between gap-4 pb-4">
-          <div className="flex items-center gap-3 min-w-0">
-            {icon && (
-              <div className="h-9 w-9 rounded bg-ibm-blue-10 flex items-center justify-center flex-shrink-0">
-                {icon}
-              </div>
-            )}
-            <div className="min-w-0">
-              <h1 className="text-lg font-semibold text-ibm-gray-100 leading-tight truncate">
-                {title}
-              </h1>
-              {description && (
-                <p className="text-xs text-ibm-gray-50 mt-0.5 truncate">
-                  {description}
-                </p>
-              )}
-            </div>
-          </div>
-
-          {actions && (
-            <div className="flex items-center gap-2 shrink-0">
-              {actions}
+      {/* Title row */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div className="flex items-center gap-3 min-w-0">
+          {icon && (
+            <div className="h-9 w-9 rounded bg-ibm-blue-10 flex items-center justify-center flex-shrink-0">
+              {icon}
             </div>
           )}
+          <div className="min-w-0">
+            <div className="flex items-center gap-3">
+              <h1 className="text-xl sm:text-2xl font-semibold text-text-primary truncate">{title}</h1>
+              {statusNode && <div className="flex-shrink-0">{statusNode}</div>}
+            </div>
+            {description && (
+              <p className="text-sm text-text-secondary line-clamp-2 mt-0.5">{description}</p>
+            )}
+          </div>
         </div>
 
-        {/* Tab bar */}
-        {tabBar && tabBar.length > 0 && (
-          <nav
-            className={`flex gap-0 overflow-x-auto -mx-4 sm:-mx-6 px-4 sm:px-6 ${
-              tabBarPosition === "right" ? "justify-end" : "justify-start"
-            }`}
-            aria-label="Tabs"
-          >
+        {actions && (
+          <div className="flex items-center gap-2 shrink-0">{actions}</div>
+        )}
+      </div>
+
+      {/* Tab bar */}
+      {tabBar && tabBar.length > 0 && (
+        <div className={cn("mt-4 flex", tabBarPosition === "right" ? "justify-end" : "justify-start")}>
+          <div className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground">
             {tabBar.map((tab) => {
               const Icon = tab.icon
               const isActive = activeTab === tab.id
+              const triggerClass = cn(
+                "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                isActive
+                  ? "bg-white text-ibm-gray-100 shadow-sm"
+                  : "hover:text-ibm-gray-100"
+              )
+
+              if (onTabChange) {
+                return (
+                  <button
+                    key={tab.id}
+                    type="button"
+                    onClick={() => onTabChange(tab.id)}
+                    className={triggerClass}
+                  >
+                    {Icon && <Icon className="h-4 w-4" />}
+                    {tab.label}
+                  </button>
+                )
+              }
+
               return (
                 <Link
                   key={tab.id}
-                  href={tab.href}
-                  className={`inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium transition-colors whitespace-nowrap ${
-                    isActive ? TAB_ACTIVE : TAB_INACTIVE
-                  }`}
+                  href={tab.href ?? "#"}
+                  className={triggerClass}
                 >
                   {Icon && <Icon className="h-4 w-4" />}
                   {tab.label}
                 </Link>
               )
             })}
-          </nav>
-        )}
-
-      </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",