tc-dazzle-ui 1.10.0 → 1.10.1

package/dist/index.esm.js

@@ -575,6 +575,8 @@ const Sidebar = ({ sections, activeItemId, onItemClick, onSettingsClick, onExpan
                 }) }), jsx("div", { className: "tc-sidebar__resize-handle", onMouseDown: handleMouseDown, title: "Drag to resize" })] }));
 };
 
+// Arrow Left Icon
+const ArrowLeftIcon = () => (jsx("svg", { className: "tc-page-header__back-icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" }) }));
 // Edit Icon (square with pen)
 const EditIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M3 17.25V21H6.75L17.81 9.94L14.06 6.19L3 17.25ZM20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C17.98 2.9 17.35 2.9 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04Z", fill: "currentColor" }) }));
 // Copy Icon
@@ -592,7 +594,7 @@ const EyeIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "
 // Bookmark Icon
 const BookmarkIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M17 3H7C5.9 3 5.01 3.9 5.01 5L5 21L12 18L19 21V5C19 3.9 18.1 3 17 3ZM17 18L12 15.82L7 18V5H17V18Z", fill: "currentColor" }) }));
 // Default action icons mapping
-({
+const defaultActionIcons = {
     edit: jsx(EditIcon, {}),
     copy: jsx(CopyIcon, {}),
     delete: jsx(DeleteIcon, {}),
@@ -601,7 +603,13 @@ const BookmarkIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xml
     share: jsx(ShareIcon, {}),
     'printable-view': jsx(EyeIcon, {}),
     bookmark: jsx(BookmarkIcon, {}),
-});
+};
+const PageHeader = ({ title, backLabel = 'Back', onBackClick, badge, actions = [], className = '', }) => {
+    return (jsxs("div", { className: `tc-page-header ${className}`.trim(), children: [onBackClick && (jsx("div", { className: "tc-page-header__back-section", children: jsxs("button", { type: "button", className: "tc-page-header__back-button", onClick: onBackClick, children: [jsx(ArrowLeftIcon, {}), jsx("span", { children: backLabel })] }) })), jsxs("div", { className: "tc-page-header__content", children: [jsx("div", { className: "tc-page-header__title-row", children: jsxs("div", { className: "tc-page-header__title-group", children: [jsx("h1", { className: "tc-page-header__title", children: title }), badge && (jsx("div", { className: "tc-page-header__badge-wrapper", children: jsx("div", { className: "tc-page-header__badge-border", children: jsxs("button", { type: "button", className: "tc-page-header__badge", onClick: badge.onClick, children: [badge.icon && (jsx("span", { className: "tc-page-header__badge-icon", children: badge.icon })), jsx("span", { className: "tc-page-header__badge-label", children: badge.label })] }) }) }))] }) }), actions.length > 0 && (jsx("div", { className: "tc-page-header__actions", children: actions.map((action) => {
+                            const icon = action.icon || defaultActionIcons[action.id];
+                            return (jsx(Button, { label: action.label, variant: action.variant || 'secondary', startIcon: icon, showStartIcon: !!icon, showEndIcon: false, onClick: action.onClick, className: "tc-page-header__action-btn" }, action.id));
+                        }) }))] })] }));
+};
 
 const Layout = ({ header, sidebar, main, footer, actions, rightPanel, showSidebar = true, sidebarPosition = 'left', sidebarWidth = 280, rightPanelWidth = 320, maxContentWidth = '100%', className = '', }) => {
     const headerRef = useRef(null);
@@ -865,5 +873,5 @@ function registerWebComponents() {
 // Auto-register when loaded in browser
 registerWebComponents();
 
-export { Button, ButtonGroup, CaretDownIcon, ChevronDownIcon, ChevronUpIcon, DropdownMenu, FilterDropdown, GlobalHeader, GlobalSearch, HeaderMenu, IconButton, InfoIcon, Input, Layout, Logo, MainHeader, SearchIcon, Sidebar, TCButton, TCButtonGroup, TCInput, Tab, defaultIcons, registerWebComponents };
+export { Button, ButtonGroup, CaretDownIcon, ChevronDownIcon, ChevronUpIcon, DropdownMenu, FilterDropdown, GlobalHeader, GlobalSearch, HeaderMenu, IconButton, InfoIcon, Input, Layout, Logo, MainHeader, PageHeader, SearchIcon, Sidebar, TCButton, TCButtonGroup, TCInput, Tab, defaultIcons, registerWebComponents };
 //# sourceMappingURL=index.esm.js.map