@atmos.build/ui 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -24,6 +24,7 @@ export interface DetailBreadcrumbProps {
|
|
|
24
24
|
}
|
|
25
25
|
export interface DetailTopBarProps {
|
|
26
26
|
title?: ReactNode;
|
|
27
|
+
leading?: ReactNode;
|
|
27
28
|
trail?: ReactNode;
|
|
28
29
|
meta?: ReactNode;
|
|
29
30
|
actions?: ReactNode;
|
|
@@ -41,7 +42,7 @@ export interface DetailTopBarProps {
|
|
|
41
42
|
*/
|
|
42
43
|
fade?: boolean;
|
|
43
44
|
}
|
|
44
|
-
export declare function DetailTopBar({ title, trail, meta, actions, className, contentClassName, leftClassName, actionsClassName, chromeFont, headingFont, dataTestId, fade, }: DetailTopBarProps): import("react").JSX.Element;
|
|
45
|
+
export declare function DetailTopBar({ title, leading, trail, meta, actions, className, contentClassName, leftClassName, actionsClassName, chromeFont, headingFont, dataTestId, fade, }: DetailTopBarProps): import("react").JSX.Element;
|
|
45
46
|
export declare function DetailBreadcrumb({ items, ariaLabel, className, separator, collapseMiddle, tailItems, collapsedAriaLabel, dataTestId, }: DetailBreadcrumbProps): import("react").JSX.Element;
|
|
46
47
|
export declare const COLLAPSED_BREADCRUMB_TEST_ID = "detail-breadcrumb-collapsed";
|
|
47
48
|
export declare function detailTopBarButtonClass(className?: string, opts?: {
|
|
@@ -6,8 +6,8 @@ import { collapseMiddleItems, collapsedMiddleItems } from './detail-breadcrumb-u
|
|
|
6
6
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './dropdown-menu.js';
|
|
7
7
|
import { MiddleTruncate } from './middle-truncate.js';
|
|
8
8
|
import { StickyHeaderFade } from './sticky-header-fade.js';
|
|
9
|
-
export function DetailTopBar({ title, trail, meta, actions, className, contentClassName, leftClassName, actionsClassName, chromeFont, headingFont, dataTestId, fade = true, }) {
|
|
10
|
-
return (_jsxs("div", { className: cn('bg-background/95 sticky top-0 z-50 flex h-10 items-center justify-between gap-3 px-4 backdrop-blur', chromeFont, className), "data-slot": "detail-top-bar", "data-testid": dataTestId, children: [_jsxs("div", { className: cn('flex min-w-0 flex-1 items-center gap-3 overflow-hidden', contentClassName), children: [_jsx("div", { className: cn('flex min-w-0 flex-1 items-center overflow-hidden', leftClassName), children: trail ?? (_jsx("h1", { className: cn('text-foreground min-w-0 truncate text-[13px] leading-5 font-medium', headingFont), children: title })) }), meta ? (_jsx("div", { className: "text-muted-foreground min-w-0 shrink truncate font-mono text-[11.5px]", children: meta })) : null] }), actions ? (_jsx("div", { className: cn('flex shrink-0 items-center gap-1', actionsClassName), children: actions })) : null, fade ? _jsx(StickyHeaderFade, { "data-slot": "detail-top-bar-fade" }) : null] }));
|
|
9
|
+
export function DetailTopBar({ title, leading, trail, meta, actions, className, contentClassName, leftClassName, actionsClassName, chromeFont, headingFont, dataTestId, fade = true, }) {
|
|
10
|
+
return (_jsxs("div", { className: cn('bg-background/95 sticky top-0 z-50 flex h-10 items-center justify-between gap-3 px-4 backdrop-blur', chromeFont, className), "data-slot": "detail-top-bar", "data-testid": dataTestId, children: [leading ? (_jsx("div", { "data-slot": "detail-top-bar-leading", className: "flex shrink-0 items-center gap-1", children: leading })) : null, _jsxs("div", { className: cn('flex min-w-0 flex-1 items-center gap-3 overflow-hidden', contentClassName), children: [_jsx("div", { className: cn('flex min-w-0 flex-1 items-center overflow-hidden', leftClassName), children: trail ?? (_jsx("h1", { className: cn('text-foreground min-w-0 truncate text-[13px] leading-5 font-medium', headingFont), children: title })) }), meta ? (_jsx("div", { className: "text-muted-foreground min-w-0 shrink truncate font-mono text-[11.5px]", children: meta })) : null] }), actions ? (_jsx("div", { className: cn('flex shrink-0 items-center gap-1', actionsClassName), children: actions })) : null, fade ? _jsx(StickyHeaderFade, { "data-slot": "detail-top-bar-fade" }) : null] }));
|
|
11
11
|
}
|
|
12
12
|
export function DetailBreadcrumb({ items, ariaLabel, className, separator = '/', collapseMiddle = false, tailItems = 2, collapsedAriaLabel, dataTestId, }) {
|
|
13
13
|
const collapsedItems = collapseMiddle ? collapsedMiddleItems(items, tailItems) : [];
|