@orsetra/shared-ui 1.3.7 → 1.3.8

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

@@ -3,150 +3,119 @@
 import { ArrowLeft } from "lucide-react"
 import Link from "next/link"
 import type { ReactNode, ElementType } from "react"
-import { cn } from "../../lib/utils"
-import { Button } from "./button"
+
+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"
 
 export interface DetailPageHeaderTab {
   id: string
   label: string
   icon?: ElementType
-  /** URL-based navigation */
-  href?: string
-  /** State-based or programmatic navigation */
-  action?: () => void
+  href: string
 }
 
 export interface DetailPageHeaderProps {
-  /** If provided, renders a secondary Back button. Clicks navigate to backHref if set, otherwise history.back() */
-  backText?: string
-  /** Optional explicit back destination. If absent, the back button uses history.back() */
-  backHref?: string
+  /** Back breadcrumb link destination */
+  backHref: string
+  /** Back breadcrumb label */
+  backLabel: string
   /** Optional icon rendered in a blue square container */
   icon?: ReactNode
-  /** Page title */
+  /** Page title – truncated to one line */
   title: string
-  /** Optional subtitle */
+  /** Optional subtitle – truncated to one line */
   description?: string
-  /** Slot for badges or status nodes placed next to the title */
-  statusNode?: ReactNode
-  /** Slot for action buttons placed to the right, after the back button */
+  /** Slot for badges, status buttons, action buttons placed to the right */
   actions?: ReactNode
-  /** Optional tab navigation */
+  /** Optional tab navigation rendered at the bottom of the header */
   tabBar?: DetailPageHeaderTab[]
   /** Alignment of the tab bar – defaults to "left" */
   tabBarPosition?: "left" | "right"
   /** Currently active tab id */
   activeTab?: string
-  /** Extra classes on the root element – use to adjust spacing/height */
-  className?: string
 }
 
 export function DetailPageHeader({
-  backText,
   backHref,
+  backLabel,
   icon,
   title,
   description,
-  statusNode,
   actions,
   tabBar,
   tabBarPosition = "left",
   activeTab,
-  className,
 }: DetailPageHeaderProps) {
   return (
-    <div className={cn("mb-3", className)}>
+    <div className="bg-white border-b border-ibm-gray-20">
+      <div className="px-4 sm:px-6 pt-4 pb-0">
 
-      {/* Title row */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-        <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>
+        {/* Breadcrumb */}
+        <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"
+        >
+          <ArrowLeft className="h-3 w-3" />
+          {backLabel}
+        </Link>
 
-        {(backText || actions) && (
-          <div className="flex items-center gap-2 shrink-0">
-            {backText && (
-              backHref ? (
-                <Link href={backHref}>
-                  <Button
-                    variant="secondary"
-                    className="h-9"
-                    leftIcon={<ArrowLeft className="h-4 w-4" />}
-                  >
-                    {backText}
-                  </Button>
-                </Link>
-              ) : (
-                <Button
-                  variant="secondary"
-                  className="h-9"
-                  leftIcon={<ArrowLeft className="h-4 w-4" />}
-                  onClick={() => window.history.back()}
-                >
-                  {backText}
-                </Button>
-              )
+        {/* 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>
             )}
-            {actions}
+            <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>
-        )}
-      </div>
 
-      {/* Tab bar */}
-      {tabBar && tabBar.length > 0 && (
-        <div className={cn("mt-3 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">
+          {actions && (
+            <div className="flex items-center gap-2 shrink-0">
+              {actions}
+            </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"
+          >
             {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 (tab.action) {
-                return (
-                  <button
-                    key={tab.id}
-                    type="button"
-                    onClick={tab.action}
-                    className={triggerClass}
-                  >
-                    {Icon && <Icon className="h-4 w-4" />}
-                    {tab.label}
-                  </button>
-                )
-              }
-
               return (
                 <Link
                   key={tab.id}
-                  href={tab.href ?? "#"}
-                  className={triggerClass}
+                  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
+                  }`}
                 >
                   {Icon && <Icon className="h-4 w-4" />}
                   {tab.label}
                 </Link>
               )
             })}
-          </div>
-        </div>
-      )}
+          </nav>
+        )}
+
+      </div>
     </div>
   )
 }

package/package.json

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