@orsetra/shared-ui 1.3.3 → 1.3.4

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

@@ -4,20 +4,21 @@ 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"
 
 export interface DetailPageHeaderTab {
   id: string
   label: string
   icon?: ElementType
-  /** Required when onTabChange is not provided (URL-based navigation) */
+  /** URL-based navigation */
   href?: string
+  /** State-based or programmatic navigation */
+  action?: () => void
 }
 
 export interface DetailPageHeaderProps {
-  /** Back breadcrumb link destination */
-  backHref?: string
-  /** Back breadcrumb label */
-  backLabel?: string
+  /** If provided, renders a secondary Back button on the right that calls history.back() */
+  backText?: string
   /** Optional icon rendered in a blue square container */
   icon?: ReactNode
   /** Page title */
@@ -26,7 +27,7 @@ export interface DetailPageHeaderProps {
   description?: string
   /** Slot for badges or status nodes placed next to the title */
   statusNode?: ReactNode
-  /** Slot for action buttons placed to the right */
+  /** Slot for action buttons placed to the right, after the back button */
   actions?: ReactNode
   /** Optional tab navigation */
   tabBar?: DetailPageHeaderTab[]
@@ -34,15 +35,12 @@ export interface DetailPageHeaderProps {
   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({
-  backHref,
-  backLabel,
+  backText,
   icon,
   title,
   description,
@@ -51,25 +49,13 @@ export function DetailPageHeader({
   tabBar,
   tabBarPosition = "left",
   activeTab,
-  onTabChange,
   className,
 }: DetailPageHeaderProps) {
   return (
-    <div className={cn("mb-4 sm:mb-6", className)}>
-
-      {/* Back link */}
-      {backHref && backLabel && (
-        <Link
-          href={backHref}
-          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.5 w-3.5" />
-          {backLabel}
-        </Link>
-      )}
+    <div className={cn("mb-3", className)}>
 
       {/* Title row */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+      <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">
@@ -87,14 +73,26 @@ export function DetailPageHeader({
           </div>
         </div>
 
-        {actions && (
-          <div className="flex items-center gap-2 shrink-0">{actions}</div>
+        {(backText || actions) && (
+          <div className="flex items-center gap-2 shrink-0">
+            {backText && (
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => window.history.back()}
+              >
+                <ArrowLeft className="h-4 w-4 mr-1.5" />
+                {backText}
+              </Button>
+            )}
+            {actions}
+          </div>
         )}
       </div>
 
       {/* Tab bar */}
       {tabBar && tabBar.length > 0 && (
-        <div className={cn("mt-4 flex", tabBarPosition === "right" ? "justify-end" : "justify-start")}>
+        <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">
             {tabBar.map((tab) => {
               const Icon = tab.icon
@@ -106,12 +104,12 @@ export function DetailPageHeader({
                   : "hover:text-ibm-gray-100"
               )
 
-              if (onTabChange) {
+              if (tab.action) {
                 return (
                   <button
                     key={tab.id}
                     type="button"
-                    onClick={() => onTabChange(tab.id)}
+                    onClick={tab.action}
                     className={triggerClass}
                   >
                     {Icon && <Icon className="h-4 w-4" />}

package/package.json

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