tc-dazzle-ui 1.8.0 → 1.9.0

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

@@ -17,6 +17,13 @@ export interface SidebarProps {
     onSettingsClick?: () => void;
     onExpandAllClick?: () => void;
     onCollapseAllClick?: () => void;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    onWidthChange?: (width: number) => void;
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    collapsible?: boolean;
     className?: string;
 }
 export declare const Sidebar: React.FC<SidebarProps>;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import './Layout.css';
+export interface LayoutProps {
+    header?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    main: React.ReactNode;
+    footer?: React.ReactNode;
+    actions?: React.ReactNode;
+    showSidebar?: boolean;
+    sidebarPosition?: 'left' | 'right';
+    sidebarWidth?: number | string;
+    maxContentWidth?: number | string;
+    className?: string;
+}
+export declare const Layout: React.FC<LayoutProps>;
+export default Layout;

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

@@ -0,0 +1,2 @@
+export { Layout } from './Layout';
+export type { LayoutProps } from './Layout';

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

@@ -0,0 +1,2 @@
+export { Layout } from './Layout';
+export type { LayoutProps } from './Layout';

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import o, { forwardRef, useState, useRef, useEffect } from 'react';
+import o, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
 
 // Caret Down Icon SVG
@@ -452,7 +452,10 @@ const GlobalHeader = ({ tabs, activeTabId, onTabClick, onMenuClick, showMenuButt
     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))) })] }));
 };
 
-const Sidebar = ({ sections, activeItemId, onItemClick, onSettingsClick, onExpandAllClick, onCollapseAllClick, className = '', }) => {
+const MIN_WIDTH = 242;
+const MAX_WIDTH = 1100;
+const DEFAULT_WIDTH = 280;
+const Sidebar = ({ sections, activeItemId, onItemClick, onSettingsClick, onExpandAllClick, onCollapseAllClick, onCollapse, onExpand, onWidthChange, defaultWidth = DEFAULT_WIDTH, minWidth = MIN_WIDTH, maxWidth = MAX_WIDTH, collapsible = true, className = '', }) => {
     const [expandedSections, setExpandedSections] = useState(() => {
         const initialExpanded = new Set();
         sections.forEach((section) => {
@@ -461,6 +464,62 @@ const Sidebar = ({ sections, activeItemId, onItemClick, onSettingsClick, onExpan
         return initialExpanded;
     });
     const [allExpanded, setAllExpanded] = useState(true);
+    const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const [isResizing, setIsResizing] = useState(false);
+    const sidebarRef = useRef(null);
+    const startXRef = useRef(0);
+    const startWidthRef = useRef(0);
+    const handleMouseDown = useCallback((e) => {
+        e.preventDefault();
+        setIsResizing(true);
+        startXRef.current = e.clientX;
+        startWidthRef.current = sidebarWidth;
+    }, [sidebarWidth]);
+    const handleMouseMove = useCallback((e) => {
+        if (!isResizing)
+            return;
+        const delta = e.clientX - startXRef.current;
+        let newWidth = startWidthRef.current + delta;
+        if (collapsible && newWidth < minWidth) {
+            setIsCollapsed(true);
+            setSidebarWidth(0);
+            onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
+            onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(0);
+        }
+        else {
+            if (isCollapsed && newWidth >= minWidth) {
+                setIsCollapsed(false);
+                onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+            }
+            newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
+            setSidebarWidth(newWidth);
+            onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(newWidth);
+        }
+    }, [isResizing, minWidth, maxWidth, collapsible, isCollapsed, onCollapse, onExpand, onWidthChange]);
+    const handleMouseUp = useCallback(() => {
+        setIsResizing(false);
+    }, []);
+    useEffect(() => {
+        if (isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [isResizing, handleMouseMove, handleMouseUp]);
+    const expandSidebar = useCallback(() => {
+        setIsCollapsed(false);
+        setSidebarWidth(defaultWidth);
+        onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+        onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(defaultWidth);
+    }, [defaultWidth, onExpand, onWidthChange]);
     const toggleSection = (sectionId) => {
         setExpandedSections((prev) => {
             const newSet = new Set(prev);
@@ -492,16 +551,49 @@ const Sidebar = ({ sections, activeItemId, onItemClick, onSettingsClick, onExpan
         const classes = ['tc-sidebar'];
         if (className)
             classes.push(className);
+        if (isCollapsed)
+            classes.push('tc-sidebar--collapsed');
+        if (isResizing)
+            classes.push('tc-sidebar--resizing');
         return classes.join(' ');
     };
-    return (jsxs("aside", { className: getSidebarClasses(), children: [jsxs("div", { className: "tc-sidebar__header", children: [jsx(IconButton, { icon: jsx(SettingsIcon, { size: "medium" }), onClick: onSettingsClick, ariaLabel: "Settings", className: "tc-sidebar__settings-button" }), jsx("button", { type: "button", className: "tc-sidebar__toggle-button", onClick: allExpanded ? handleCollapseAll : handleExpandAll, children: allExpanded ? 'Collapse All' : 'Expand All' })] }), jsx("nav", { className: "tc-sidebar__nav", children: sections.map((section) => {
+    const sidebarStyle = {
+        width: isCollapsed ? 0 : sidebarWidth,
+        minWidth: isCollapsed ? 0 : minWidth,
+        maxWidth: maxWidth,
+    };
+    if (isCollapsed) {
+        return (jsx("aside", { ref: sidebarRef, className: getSidebarClasses(), style: { width: 0, minWidth: 0 }, children: jsx("div", { className: "tc-sidebar__resize-handle tc-sidebar__resize-handle--collapsed", onClick: expandSidebar, title: "Expand sidebar", children: jsx(ChevronDownIcon, { size: "small" }) }) }));
+    }
+    return (jsxs("aside", { ref: sidebarRef, className: getSidebarClasses(), style: sidebarStyle, children: [jsxs("div", { className: "tc-sidebar__header", children: [jsx(IconButton, { icon: jsx(SettingsIcon, { size: "medium" }), onClick: onSettingsClick, ariaLabel: "Settings", className: "tc-sidebar__settings-button" }), jsx("button", { type: "button", className: "tc-sidebar__toggle-button", onClick: allExpanded ? handleCollapseAll : handleExpandAll, children: allExpanded ? 'Collapse All' : 'Expand All' })] }), jsx("nav", { className: "tc-sidebar__nav", children: sections.map((section) => {
                     const isExpanded = expandedSections.has(section.id);
                     const sectionActive = isSectionActive(section);
                     return (jsxs("div", { className: "tc-sidebar__section", children: [jsxs("button", { type: "button", className: `tc-sidebar__section-header ${sectionActive ? 'tc-sidebar__section-header--active' : ''}`, onClick: () => toggleSection(section.id), "aria-expanded": isExpanded, children: [jsx("span", { className: "tc-sidebar__section-arrow", children: isExpanded ? (jsx(ChevronDownIcon, { size: "small" })) : (jsx(ChevronUpIcon, { size: "small" })) }), jsx("span", { className: "tc-sidebar__section-title", children: section.title })] }), isExpanded && (jsx("ul", { className: "tc-sidebar__items", children: section.items.map((item) => {
                                     const itemActive = isItemActive(item.id);
                                     return (jsx("li", { children: jsx("button", { type: "button", className: `tc-sidebar__item ${itemActive ? 'tc-sidebar__item--active' : ''}`, onClick: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, section), children: item.label }) }, item.id));
                                 }) }))] }, section.id));
-                }) })] }));
+                }) }), 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 = '', }) => {
+    const getLayoutClasses = () => {
+        const classes = ['tc-layout'];
+        if (className)
+            classes.push(className);
+        if (!showSidebar || !sidebar)
+            classes.push('tc-layout--no-sidebar');
+        if (sidebarPosition === 'right')
+            classes.push('tc-layout--sidebar-right');
+        return classes.join(' ');
+    };
+    const sidebarStyle = {
+        width: typeof sidebarWidth === 'number' ? `${sidebarWidth}px` : sidebarWidth,
+        minWidth: typeof sidebarWidth === 'number' ? `${sidebarWidth}px` : sidebarWidth,
+    };
+    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 }))] }));
 };
 
 var x = Object.defineProperty;
@@ -720,5 +812,5 @@ function registerWebComponents() {
 // Auto-register when loaded in browser
 registerWebComponents();
 
-export { Button, ButtonGroup, CaretDownIcon, ChevronDownIcon, ChevronUpIcon, DropdownMenu, FilterDropdown, GlobalHeader, GlobalSearch, HeaderMenu, IconButton, InfoIcon, Input, 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, SearchIcon, Sidebar, TCButton, TCButtonGroup, TCInput, Tab, defaultIcons, registerWebComponents };
 //# sourceMappingURL=index.esm.js.map