@orsetra/shared-ui 1.6.2 → 1.7.1

package/components/layout/page-with-side-panel.tsx

@@ -63,7 +63,7 @@ export function PageWithSidePanel({
   }
 
   return (
-    <div className={cn("flex items-start", className)}>
+    <div className={cn("flex", className)}>
       {/* Main content column — grows to fill space left by the panel */}
       <div className="flex-1 min-w-0 flex flex-col">
 

package/components/ui/button.tsx

@@ -29,7 +29,7 @@ export const variants: Record<ButtonVariant, string> = {
   tertiary:
     'bg-transparent text-ibm-blue-60 hover:bg-ibm-blue-10 active:bg-ibm-blue-20 border border-ibm-blue-20',
   tertiaryDanger:
-    'bg-transparent text-ibm-red-60 hover:bg-ibm-red-10 active:bg-ibm-red-20 border border-ibm-red-20',
+    'bg-transparent text-ibm-red-60 hover:bg-ibm-red-10 active:bg-ibm-red-20 border border-ibm-red-60',
 }
 
 const sizes: Record<ButtonSize, string> = {

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

@@ -1,10 +1,16 @@
 "use client"
 
-import { ArrowLeft } from "lucide-react"
+import { ArrowLeft, ChevronRight } from "lucide-react"
 import Link from "next/link"
 import type { ReactNode, ElementType } from "react"
 import { cn } from "../../lib/utils"
 
+export interface HeaderBreadcrumb {
+  label: string
+  href?: string
+  action?: () => void
+}
+
 const TAB_ACTIVE =
   "border-b-2 border-ibm-blue-60 text-ibm-blue-60 bg-ibm-blue-10/60"
 const TAB_INACTIVE =
@@ -47,6 +53,8 @@ export interface DetailPageHeaderProps {
   className?: string
   /** Whether to show the tab bar */
   enableTabs?: boolean
+  /** Breadcrumb trail — replaces backLabel/backHref/backAction when provided */
+  breadcrumbs?: HeaderBreadcrumb[]
 }
 
 export function DetailPageHeader({
@@ -63,20 +71,48 @@ export function DetailPageHeader({
   activeTab,
   enableTabs = true,
   className,
+  breadcrumbs,
 }: DetailPageHeaderProps) {
   const backCls = "inline-flex items-center gap-1.5 text-xs text-ibm-gray-50 hover:text-ibm-blue-60 transition-colors mb-3"
+  const crumbLinkCls = "hover:text-ibm-blue-60 transition-colors"
   return (
     <div className={cn("border-ibm-gray-20", className)}>
       <div className="px-4 sm:px-2 pt-1 pb-0">
 
-        {/* Breadcrumb */}
-        {backAction && backLabel && (
+        {/* Breadcrumb — array form */}
+        {breadcrumbs && breadcrumbs.length > 0 && (
+          <div className="inline-flex items-center gap-0.5 text-xs text-ibm-gray-50 mb-3 flex-wrap">
+            <ArrowLeft className="h-3 w-3 flex-shrink-0 mr-0.5" />
+            {breadcrumbs.map((item, i) => {
+              const isLast = i === breadcrumbs.length - 1
+              let node: ReactNode
+              if (isLast) {
+                node = <span className="text-ibm-gray-70 font-medium">{item.label}</span>
+              } else if (item.action) {
+                node = <button type="button" onClick={item.action} className={crumbLinkCls}>{item.label}</button>
+              } else if (item.href) {
+                node = <Link href={item.href} className={crumbLinkCls}>{item.label}</Link>
+              } else {
+                node = <span>{item.label}</span>
+              }
+              return (
+                <span key={i} className="inline-flex items-center gap-0.5">
+                  {i > 0 && <ChevronRight className="h-2.5 w-2.5 text-ibm-gray-30 flex-shrink-0" />}
+                  {node}
+                </span>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Breadcrumb — legacy single form */}
+        {!breadcrumbs && backAction && backLabel && (
           <button type="button" onClick={backAction} className={backCls}>
             <ArrowLeft className="h-3 w-3" />
             {backLabel}
           </button>
         )}
-        {!backAction && backHref && backLabel && (
+        {!breadcrumbs && !backAction && backHref && backLabel && (
           <Link href={backHref} className={backCls}>
             <ArrowLeft className="h-3 w-3" />
             {backLabel}

package/components/ui/index.ts

@@ -9,7 +9,7 @@ export { UserMenu, type UserMenuItem, type UserMenuConfig } from './user-menu'
 export { Input } from './input'
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip'
 export { PageHeader } from './page-header'
-export { DetailPageHeader, type DetailPageHeaderProps, type DetailPageHeaderTab } from './detail-page-header'
+export { DetailPageHeader, type DetailPageHeaderProps, type DetailPageHeaderTab, type HeaderBreadcrumb } from './detail-page-header'
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from './chart'
 export { SearchInput } from './search-input'
 export { AssetsHeader } from './assets-header'

package/package.json

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