tc-dazzle-ui 1.9.0 → 1.10.0

package/dist/components/Organisms/GlobalHeader/GlobalHeader.d.ts

@@ -10,6 +10,9 @@ export interface GlobalHeaderProps {
     onTabClick?: (tab: GlobalHeaderTab) => void;
     onMenuClick?: () => void;
     showMenuButton?: boolean;
+    showPropertiesButton?: boolean;
+    isPropertiesOpen?: boolean;
+    onPropertiesClick?: () => void;
     className?: string;
 }
 export declare const GlobalHeader: React.FC<GlobalHeaderProps>;

package/dist/components/Organisms/PageHeader/PageHeader.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import './PageHeader.css';
+export interface PageHeaderAction {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'text';
+    onClick?: () => void;
+}
+export interface PageHeaderBadge {
+    label: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+}
+export interface PageHeaderProps {
+    title: string;
+    backLabel?: string;
+    onBackClick?: () => void;
+    badge?: PageHeaderBadge;
+    actions?: PageHeaderAction[];
+    className?: string;
+}
+export declare const PageHeader: React.FC<PageHeaderProps>;
+export default PageHeader;

package/dist/components/Organisms/PageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps, PageHeaderAction, PageHeaderBadge } from './PageHeader';

package/dist/components/Organisms/index.d.ts

@@ -4,3 +4,5 @@ export { GlobalHeader } from './GlobalHeader';
 export type { GlobalHeaderProps, GlobalHeaderTab } from './GlobalHeader';
 export { Sidebar } from './Sidebar';
 export type { SidebarProps, SidebarSection, SidebarItem } from './Sidebar';
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps, PageHeaderAction, PageHeaderBadge } from './PageHeader';

package/dist/components/PropsPanel/PropsPanel.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import './PropsPanel.css';
+export interface PropDefinition {
+    name: string;
+    type: string;
+    default?: string;
+    required?: boolean;
+    description: string;
+}
+export interface VariantDefinition {
+    name: string;
+    value: string;
+    description?: string;
+}
+export interface PropsPanelProps {
+    componentName: string;
+    props: PropDefinition[];
+    variants?: VariantDefinition[];
+    codeExample: string;
+}
+export declare const PropsPanel: React.FC<PropsPanelProps>;
+export default PropsPanel;

package/dist/components/PropsPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { PropsPanel } from './PropsPanel';
+export type { PropsPanelProps, PropDefinition, VariantDefinition } from './PropsPanel';

package/dist/components/Templates/Layout/Layout.d.ts

@@ -6,9 +6,11 @@ export interface LayoutProps {
     main: React.ReactNode;
     footer?: React.ReactNode;
     actions?: React.ReactNode;
+    rightPanel?: React.ReactNode;
     showSidebar?: boolean;
     sidebarPosition?: 'left' | 'right';
     sidebarWidth?: number | string;
+    rightPanelWidth?: number | string;
     maxContentWidth?: number | string;
     className?: string;
 }

package/dist/index.esm.js

@@ -348,14 +348,14 @@ const DropdownMenu = ({ items, selectedId, onItemClick, showIcons = true, classN
 };
 
 // Default Icons based on Figma design
-const BookmarkIcon = () => (jsx("svg", { viewBox: "0 0 18 18", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M14 2H4C2.9 2 2 2.9 2 4V16L9 13L16 16V4C16 2.9 15.1 2 14 2Z" }) }));
+const BookmarkIcon$1 = () => (jsx("svg", { viewBox: "0 0 18 18", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M14 2H4C2.9 2 2 2.9 2 4V16L9 13L16 16V4C16 2.9 15.1 2 14 2Z" }) }));
 const RecentIcon = () => (jsx("svg", { viewBox: "0 0 18 18", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M9 1C4.58 1 1 4.58 1 9C1 13.42 4.58 17 9 17C13.42 17 17 13.42 17 9C17 4.58 13.42 1 9 1ZM9 15C5.69 15 3 12.31 3 9C3 5.69 5.69 3 9 3C12.31 3 15 5.69 15 9C15 12.31 12.31 15 9 15ZM9.5 5H8V10L12.25 12.52L13 11.24L9.5 9.15V5Z" }) }));
 const AllIcon = () => (jsx("svg", { viewBox: "0 0 21 18", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M0 10H4V6H0V10ZM0 16H4V12H0V16ZM0 4H4V0H0V4ZM6 10H21V6H6V10ZM6 16H21V12H6V16ZM6 0V4H21V0H6Z" }) }));
 const ToolsIcon = () => (jsx("svg", { viewBox: "0 0 18 18", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M16.89 5.21L14.12 7.98L10.02 3.88L12.79 1.11C11.15 0.37 9.14 0.69 7.79 2.04C6.32 3.51 6.07 5.75 7.04 7.49L1.04 13.49C0.26 14.27 0.26 15.53 1.04 16.31C1.82 17.09 3.08 17.09 3.86 16.31L9.86 10.31C11.6 11.28 13.84 11.03 15.31 9.56C16.66 8.21 16.98 6.2 16.24 4.56L16.89 5.21Z" }) }));
 const HelpIcon = () => (jsx("svg", { viewBox: "0 0 18 18", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M9 1C4.58 1 1 4.58 1 9C1 13.42 4.58 17 9 17C13.42 17 17 13.42 17 9C17 4.58 13.42 1 9 1ZM10 14H8V12H10V14ZM11.07 8.25L10.17 9.17C9.45 9.9 9 10.5 9 12H7V11.5C7 10.4 7.45 9.4 8.17 8.67L9.41 7.41C9.78 7.05 10 6.55 10 6C10 4.9 9.1 4 8 4C6.9 4 6 4.9 6 6H4C4 3.79 5.79 2 8 2C10.21 2 12 3.79 12 6C12 6.88 11.64 7.68 11.07 8.25Z" }) }));
 const ClientIcon = () => (jsx("svg", { viewBox: "0 0 18 18", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M9 9C11.21 9 13 7.21 13 5C13 2.79 11.21 1 9 1C6.79 1 5 2.79 5 5C5 7.21 6.79 9 9 9ZM9 11C6.33 11 1 12.34 1 15V17H17V15C17 12.34 11.67 11 9 11Z" }) }));
 const defaultIcons = {
-    bookmarks: jsx(BookmarkIcon, {}),
+    bookmarks: jsx(BookmarkIcon$1, {}),
     recent: jsx(RecentIcon, {}),
     all: jsx(AllIcon, {}),
     tools: jsx(ToolsIcon, {}),
@@ -388,7 +388,7 @@ const HeaderMenu = ({ items, onItemClick, onDropdownItemClick, className = '', }
     return (jsx("div", { ref: menuRef, className: `tc-header-menu ${className}`.trim(), children: items.map((item) => {
             const isOpen = openMenuId === item.id;
             const hasDropdown = item.dropdownItems && item.dropdownItems.length > 0;
-            return (jsxs("div", { className: "tc-header-menu__item-wrapper", children: [jsxs("button", { className: `tc-header-menu__item ${isOpen ? 'tc-header-menu__item--active' : ''}`, onClick: () => handleItemClick(item), type: "button", title: item.label, "aria-label": item.label, "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? 'menu' : undefined, children: [jsx("span", { className: "tc-header-menu__icon", children: item.icon || defaultIcons[item.id.toLowerCase()] || jsx(BookmarkIcon, {}) }), jsx("span", { className: "tc-header-menu__label", children: item.label })] }), hasDropdown && isOpen && (jsx("div", { className: "tc-header-menu__dropdown", children: jsx(DropdownMenu, { items: item.dropdownItems, onItemClick: (dropdownItem) => handleDropdownItemClick(item, dropdownItem), showIcons: false }) }))] }, item.id));
+            return (jsxs("div", { className: "tc-header-menu__item-wrapper", children: [jsxs("button", { className: `tc-header-menu__item ${isOpen ? 'tc-header-menu__item--active' : ''}`, onClick: () => handleItemClick(item), type: "button", title: item.label, "aria-label": item.label, "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? 'menu' : undefined, children: [jsx("span", { className: "tc-header-menu__icon", children: item.icon || defaultIcons[item.id.toLowerCase()] || jsx(BookmarkIcon$1, {}) }), jsx("span", { className: "tc-header-menu__label", children: item.label })] }), hasDropdown && isOpen && (jsx("div", { className: "tc-header-menu__dropdown", children: jsx(DropdownMenu, { items: item.dropdownItems, onItemClick: (dropdownItem) => handleDropdownItemClick(item, dropdownItem), showIcons: false }) }))] }, item.id));
         }) }));
 };
 
@@ -442,14 +442,14 @@ const MainHeader = ({ searchFilterOptions = defaultFilterOptions, searchPlacehol
     return (jsxs("header", { className: `tc-main-header ${className}`.trim(), children: [jsx("div", { className: "tc-main-header__logo", children: jsx(Logo, { size: "medium", onClick: onLogoClick }) }), jsx("div", { className: "tc-main-header__search", children: jsx(Search, { placeholder: searchPlaceholder, filterPlaceholder: searchFilterPlaceholder, filterOptions: searchFilterOptions, onSubmit: onSearch, onInfoClick: onInfoClick }) }), jsx("div", { className: "tc-main-header__menu", children: jsx(HeaderMenu, { items: menuItems, onItemClick: onMenuItemClick, onDropdownItemClick: onDropdownItemClick }) })] }));
 };
 
-const GlobalHeader = ({ tabs, activeTabId, onTabClick, onMenuClick, showMenuButton = true, className = '', }) => {
+const GlobalHeader = ({ tabs, activeTabId, onTabClick, onMenuClick, showMenuButton = true, showPropertiesButton = true, isPropertiesOpen = false, onPropertiesClick, className = '', }) => {
     const getHeaderClasses = () => {
         const classes = ['tc-global-header'];
         if (className)
             classes.push(className);
         return classes.join(' ');
     };
-    return (jsxs("header", { className: getHeaderClasses(), role: "navigation", children: [showMenuButton && (jsx(IconButton, { icon: jsx(MenuIcon, { size: "medium", color: "#ffffff" }), onClick: onMenuClick, ariaLabel: "Open menu", className: "tc-global-header__menu-button" })), jsx("nav", { className: "tc-global-header__tabs", role: "tablist", children: tabs.map((tab) => (jsx(Tab, { label: tab.label, isActive: activeTabId === tab.id, onClick: () => onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab) }, tab.id))) })] }));
+    return (jsxs("header", { className: getHeaderClasses(), role: "navigation", children: [showMenuButton && (jsx(IconButton, { icon: jsx(MenuIcon, { size: "medium", color: "#ffffff" }), onClick: onMenuClick, ariaLabel: "Open menu", className: "tc-global-header__menu-button" })), jsx("nav", { className: "tc-global-header__tabs", role: "tablist", children: tabs.map((tab) => (jsx(Tab, { label: tab.label, isActive: activeTabId === tab.id, onClick: () => onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab) }, tab.id))) }), showPropertiesButton && (jsx("button", { className: `tc-global-header__properties-btn ${isPropertiesOpen ? 'tc-global-header__properties-btn--active' : ''}`, onClick: onPropertiesClick, "aria-label": "Toggle Properties Panel", children: "Properties" }))] }));
 };
 
 const MIN_WIDTH = 242;
@@ -575,7 +575,47 @@ const Sidebar = ({ sections, activeItemId, onItemClick, onSettingsClick, onExpan
                 }) }), jsx("div", { className: "tc-sidebar__resize-handle", onMouseDown: handleMouseDown, title: "Drag to resize" })] }));
 };
 
-const Layout = ({ header, sidebar, main, footer, actions, showSidebar = true, sidebarPosition = 'left', sidebarWidth = 280, maxContentWidth = '100%', className = '', }) => {
+// 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
+const CopyIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z", fill: "currentColor" }) }));
+// Delete Icon (trash)
+const DeleteIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM8 9H16V19H8V9ZM15.5 4L14.5 3H9.5L8.5 4H5V6H19V4H15.5Z", fill: "currentColor" }) }));
+// Rotate CCW Icon (Change Phase)
+const RotateCcwIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4C7.58 4 4.01 7.58 4.01 12C4.01 16.42 7.58 20 12 20C15.73 20 18.84 17.45 19.73 14H17.65C16.83 16.33 14.61 18 12 18C8.69 18 6 15.31 6 12C6 8.69 8.69 6 12 6C13.66 6 15.14 6.69 16.22 7.78L13 11H20V4L17.65 6.35Z", fill: "currentColor" }) }));
+// More Horizontal Icon (three dots)
+const MoreHorizontalIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z", fill: "currentColor" }) }));
+// Share Icon (upload/share)
+const ShareIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M9 16H15V10H19L12 3L5 10H9V16ZM5 18H19V20H5V18Z", fill: "currentColor" }) }));
+// Eye Icon (Printable View)
+const EyeIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z", fill: "currentColor" }) }));
+// 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
+({
+    edit: jsx(EditIcon, {}),
+    copy: jsx(CopyIcon, {}),
+    delete: jsx(DeleteIcon, {}),
+    'change-phase': jsx(RotateCcwIcon, {}),
+    'more-actions': jsx(MoreHorizontalIcon, {}),
+    share: jsx(ShareIcon, {}),
+    'printable-view': jsx(EyeIcon, {}),
+    bookmark: jsx(BookmarkIcon, {}),
+});
+
+const Layout = ({ header, sidebar, main, footer, actions, rightPanel, showSidebar = true, sidebarPosition = 'left', sidebarWidth = 280, rightPanelWidth = 320, maxContentWidth = '100%', className = '', }) => {
+    const headerRef = useRef(null);
+    const [headerHeight, setHeaderHeight] = useState(0);
+    useEffect(() => {
+        const updateHeaderHeight = () => {
+            if (headerRef.current) {
+                setHeaderHeight(headerRef.current.offsetHeight);
+            }
+        };
+        updateHeaderHeight();
+        window.addEventListener('resize', updateHeaderHeight);
+        return () => window.removeEventListener('resize', updateHeaderHeight);
+    }, [header]);
     const getLayoutClasses = () => {
         const classes = ['tc-layout'];
         if (className)
@@ -590,10 +630,23 @@ const Layout = ({ header, sidebar, main, footer, actions, showSidebar = true, si
         width: typeof sidebarWidth === 'number' ? `${sidebarWidth}px` : sidebarWidth,
         minWidth: typeof sidebarWidth === 'number' ? `${sidebarWidth}px` : sidebarWidth,
     };
+    const rightPanelStyle = {
+        width: typeof rightPanelWidth === 'number' ? `${rightPanelWidth}px` : rightPanelWidth,
+        minWidth: typeof rightPanelWidth === 'number' ? `${rightPanelWidth}px` : rightPanelWidth,
+        height: `calc(100vh - ${headerHeight}px)`,
+        position: 'sticky',
+        top: `${headerHeight}px`,
+        flexShrink: 0,
+        overflowY: 'auto',
+    };
     const mainContentStyle = {
         maxWidth: typeof maxContentWidth === 'number' ? `${maxContentWidth}px` : maxContentWidth,
     };
-    return (jsxs("div", { className: getLayoutClasses(), children: [header && (jsx("header", { className: "tc-layout__header", children: header })), jsxs("div", { className: "tc-layout__body", children: [sidebar && showSidebar && (jsx("aside", { className: "tc-layout__sidebar", style: sidebarStyle, children: jsx("div", { className: "tc-layout__sidebar-content", children: sidebar }) })), jsx("div", { className: "tc-layout__main-wrapper", children: jsxs("main", { className: "tc-layout__main", style: mainContentStyle, children: [actions && (jsx("div", { className: "tc-layout__actions", children: actions })), jsx("div", { className: "tc-layout__content", children: main })] }) })] }), footer && (jsx("footer", { className: "tc-layout__footer", children: footer }))] }));
+    return (jsxs("div", { className: getLayoutClasses(), children: [header && (jsx("header", { ref: headerRef, className: "tc-layout__header", children: header })), jsxs("div", { className: "tc-layout__body", children: [sidebar && showSidebar && (jsx("aside", { className: "tc-layout__sidebar", style: {
+                            ...sidebarStyle,
+                            height: `calc(100vh - ${headerHeight}px)`,
+                            top: `${headerHeight}px`
+                        }, children: jsx("div", { className: "tc-layout__sidebar-content", children: sidebar }) })), jsx("div", { className: "tc-layout__main-wrapper", style: { height: `calc(100vh - ${headerHeight}px)` }, children: jsxs("main", { className: "tc-layout__main", style: mainContentStyle, children: [actions && (jsx("div", { className: "tc-layout__actions", children: actions })), jsx("div", { className: "tc-layout__content", children: main })] }) }), rightPanel && (jsx("aside", { className: "tc-layout__right-panel", style: rightPanelStyle, children: rightPanel }))] }), footer && (jsx("footer", { className: "tc-layout__footer", children: footer }))] }));
 };
 
 var x = Object.defineProperty;