tc-dazzle-ui 1.0.0 → 1.2.0

package/dist/index.esm.js

@@ -1,24 +1,24 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import o, { forwardRef, useState } from 'react';
+import o, { forwardRef, useState, useRef, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 
 // Caret Down Icon SVG
-const CaretDownIcon = ({ className }) => (jsx("svg", { className: className, viewBox: "0 0 10 6", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5 6L0 0H10L5 6Z" }) }));
+const CaretDownIcon$1 = ({ className }) => (jsx("svg", { className: className, viewBox: "0 0 10 6", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5 6L0 0H10L5 6Z" }) }));
 // Single Button Component
 const Button = ({ label = 'Button', variant = 'primary', disabled = false, showStartIcon = true, showEndIcon = true, showLabel = true, startIcon, endIcon, onClick, className = '', }) => {
     const buttonClass = `tc-button tc-button--${variant} ${className}`.trim();
-    return (jsxs("button", { className: `${buttonClass} tc-button-main`, disabled: disabled, onClick: onClick, type: "button", children: [showStartIcon && (jsx("span", { className: "tc-button__icon", children: startIcon || jsx(CaretDownIcon, {}) })), showLabel && (jsx("span", { className: "tc-button__label", children: label })), showEndIcon && (jsx("span", { className: "tc-button__caret", children: endIcon || jsx(CaretDownIcon, {}) }))] }));
+    return (jsxs("button", { className: `${buttonClass} tc-button-main`, disabled: disabled, onClick: onClick, type: "button", children: [showStartIcon && (jsx("span", { className: "tc-button__icon", children: startIcon || jsx(CaretDownIcon$1, {}) })), showLabel && (jsx("span", { className: "tc-button__label", children: label })), showEndIcon && (jsx("span", { className: "tc-button__caret", children: endIcon || jsx(CaretDownIcon$1, {}) }))] }));
 };
 // Button Group Component (Button with Dropdown)
 const ButtonGroup = ({ label = 'Button', variant = 'primary', disabled = false, showStartIcon = true, startIcon, onButtonClick, onDropdownClick, className = '', }) => {
     const buttonClass = `tc-button tc-button--${variant}`;
-    return (jsxs("div", { className: `tc-button-group ${className}`.trim(), children: [jsxs("button", { className: `${buttonClass} tc-button-main`, disabled: disabled, onClick: onButtonClick, type: "button", children: [showStartIcon && (jsx("span", { className: "tc-button__icon", children: startIcon || jsx(CaretDownIcon, {}) })), jsx("span", { className: "tc-button__label", children: label })] }), jsx("div", { className: "tc-button-divider" }), jsx("button", { className: `${buttonClass} tc-button-dropdown`, disabled: disabled, onClick: onDropdownClick, type: "button", "aria-label": "Open dropdown menu", children: jsx("span", { className: "tc-button__caret", children: jsx(CaretDownIcon, {}) }) })] }));
+    return (jsxs("div", { className: `tc-button-group ${className}`.trim(), children: [jsxs("button", { className: `${buttonClass} tc-button-main`, disabled: disabled, onClick: onButtonClick, type: "button", children: [showStartIcon && (jsx("span", { className: "tc-button__icon", children: startIcon || jsx(CaretDownIcon$1, {}) })), jsx("span", { className: "tc-button__label", children: label })] }), jsx("div", { className: "tc-button-divider" }), jsx("button", { className: `${buttonClass} tc-button-dropdown`, disabled: disabled, onClick: onDropdownClick, type: "button", "aria-label": "Open dropdown menu", children: jsx("span", { className: "tc-button__caret", children: jsx(CaretDownIcon$1, {}) }) })] }));
 };
 
 // Arrow Icon for Prefix/Suffix
 const ArrowIcon = () => (jsx("svg", { viewBox: "0 0 16 16", fill: "#0067d2", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M8 2L14 8L8 14M14 8H2", stroke: "#0067d2", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }));
 // Chevron Down Icon for Dropdown
-const ChevronDownIcon = () => (jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4 6L8 10L12 6", stroke: "#242a30", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChevronDownIcon$3 = () => (jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4 6L8 10L12 6", stroke: "#242a30", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 const Input = forwardRef(({ label = 'Label', placeholder = '', value, defaultValue, type = 'text', inputType = 'enabled', disabled = false, error = false, helperText, prefixIcon, suffixIcon, dropdownValue = 'Update this...', onChange, onFocus, onBlur, onDropdownClick, className = '', }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const isDisabled = disabled || inputType === 'disabled';
@@ -49,10 +49,334 @@ const Input = forwardRef(({ label = 'Label', placeholder = '', value, defaultVal
             classes.push('tc-input--error');
         return classes.join(' ');
     };
-    return (jsx("div", { className: `tc-input-wrapper ${className}`.trim(), children: jsxs("div", { className: "tc-input-field", children: [jsxs("div", { className: "tc-input-form-field", children: [jsx("div", { className: "tc-input-label-container", children: jsx("label", { className: "tc-input-label", children: label }) }), jsxs("div", { className: "tc-input-container", children: [isPrefixed && (jsx("div", { className: "tc-input-addon tc-input-addon--prefix", children: jsx("div", { className: "tc-input-icon", children: prefixIcon || jsx(ArrowIcon, {}) }) })), jsx("div", { className: getInputClasses(), children: jsx("div", { className: "tc-input-content", children: isDropdown ? (jsxs(Fragment, { children: [jsx("span", { className: "tc-input-placeholder", onClick: onDropdownClick, children: dropdownValue }), jsx("div", { className: "tc-input-dropdown-icon", children: jsx(ChevronDownIcon, {}) })] })) : (jsx("input", { ref: ref, type: type, placeholder: placeholder, value: value, defaultValue: defaultValue, disabled: isDisabled, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur })) }) }), isSuffixed && (jsx("div", { className: "tc-input-addon tc-input-addon--suffix", children: jsx("div", { className: "tc-input-icon", children: suffixIcon || jsx(ArrowIcon, {}) }) }))] })] }), helperText && (jsx("span", { className: `tc-input-helper ${error ? 'tc-input-helper--error' : ''}`, children: helperText }))] }) }));
+    return (jsx("div", { className: `tc-input-wrapper ${className}`.trim(), children: jsxs("div", { className: "tc-input-field", children: [jsxs("div", { className: "tc-input-form-field", children: [jsx("div", { className: "tc-input-label-container", children: jsx("label", { className: "tc-input-label", children: label }) }), jsxs("div", { className: "tc-input-container", children: [isPrefixed && (jsx("div", { className: "tc-input-addon tc-input-addon--prefix", children: jsx("div", { className: "tc-input-icon", children: prefixIcon || jsx(ArrowIcon, {}) }) })), jsx("div", { className: getInputClasses(), children: jsx("div", { className: "tc-input-content", children: isDropdown ? (jsxs(Fragment, { children: [jsx("span", { className: "tc-input-placeholder", onClick: onDropdownClick, children: dropdownValue }), jsx("div", { className: "tc-input-dropdown-icon", children: jsx(ChevronDownIcon$3, {}) })] })) : (jsx("input", { ref: ref, type: type, placeholder: placeholder, value: value, defaultValue: defaultValue, disabled: isDisabled, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur })) }) }), isSuffixed && (jsx("div", { className: "tc-input-addon tc-input-addon--suffix", children: jsx("div", { className: "tc-input-icon", children: suffixIcon || jsx(ArrowIcon, {}) }) }))] })] }), helperText && (jsx("span", { className: `tc-input-helper ${error ? 'tc-input-helper--error' : ''}`, children: helperText }))] }) }));
 });
 Input.displayName = 'Input';
 
+// Chevron Down Icon SVG
+const ChevronDownIcon$2 = ({ className }) => (jsx("svg", { className: className, viewBox: "0 0 10 5", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M0 0L5 5L10 0H0Z" }) }));
+const FilterDropdown = ({ value, defaultValue, options = [], placeholder = 'All', size = 'small', disabled = false, onChange, className = '', }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(value || defaultValue || '');
+    const [isFocused, setIsFocused] = useState(false);
+    const dropdownRef = useRef(null);
+    // Update selected value when controlled value changes
+    useEffect(() => {
+        if (value !== undefined) {
+            setSelectedValue(value);
+        }
+    }, [value]);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setIsFocused(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const handleToggle = () => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+            setIsFocused(true);
+        }
+    };
+    const handleSelect = (optionValue) => {
+        setSelectedValue(optionValue);
+        setIsOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(optionValue);
+    };
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                setIsOpen(!isOpen);
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                break;
+        }
+    };
+    const getDisplayLabel = () => {
+        if (selectedValue) {
+            const selectedOption = options.find(opt => opt.value === selectedValue);
+            return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || selectedValue;
+        }
+        return placeholder;
+    };
+    const getContainerClasses = () => {
+        const classes = ['tc-filter-dropdown'];
+        classes.push(`tc-filter-dropdown--${size}`);
+        if (disabled)
+            classes.push('tc-filter-dropdown--disabled');
+        if (isFocused || isOpen)
+            classes.push('tc-filter-dropdown--focused');
+        if (isOpen)
+            classes.push('tc-filter-dropdown--open');
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    };
+    return (jsxs("div", { ref: dropdownRef, className: getContainerClasses(), tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-disabled": disabled, onClick: handleToggle, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => !isOpen && setIsFocused(false), children: [jsxs("div", { className: "tc-filter-dropdown__trigger", children: [jsx("span", { className: "tc-filter-dropdown__label", children: getDisplayLabel() }), jsx("div", { className: "tc-filter-dropdown__icon", children: jsx(ChevronDownIcon$2, {}) })] }), isOpen && options.length > 0 && (jsx("div", { className: "tc-filter-dropdown__menu", role: "listbox", children: options.map((option) => (jsx("div", { className: `tc-filter-dropdown__option ${selectedValue === option.value ? 'tc-filter-dropdown__option--selected' : ''}`, role: "option", "aria-selected": selectedValue === option.value, onClick: (e) => {
+                        e.stopPropagation();
+                        handleSelect(option.value);
+                    }, children: option.label }, option.value))) }))] }));
+};
+
+// Search Icon SVG
+const SearchIcon$2 = ({ className }) => (jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z", fill: "currentColor" }) }));
+// Chevron Down Icon SVG
+const ChevronDownIcon$1 = ({ className }) => (jsx("svg", { className: className, viewBox: "0 0 10 5", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M0 0L5 5L10 0H0Z" }) }));
+const GlobalSearch = ({ placeholder = 'Search', filterPlaceholder = 'All', filterOptions = [], filterValue: controlledFilterValue, searchValue: controlledSearchValue, disabled = false, onSearch, onFilterChange, onSubmit, className = '', }) => {
+    const [isFilterOpen, setIsFilterOpen] = useState(false);
+    const [filterValue, setFilterValue] = useState(controlledFilterValue || '');
+    const [searchValue, setSearchValue] = useState(controlledSearchValue || '');
+    const [isFocused, setIsFocused] = useState(false);
+    const filterRef = useRef(null);
+    const inputRef = useRef(null);
+    // Update values when controlled props change
+    useEffect(() => {
+        if (controlledFilterValue !== undefined) {
+            setFilterValue(controlledFilterValue);
+        }
+    }, [controlledFilterValue]);
+    useEffect(() => {
+        if (controlledSearchValue !== undefined) {
+            setSearchValue(controlledSearchValue);
+        }
+    }, [controlledSearchValue]);
+    // Close filter dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (filterRef.current && !filterRef.current.contains(event.target)) {
+                setIsFilterOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const handleFilterToggle = () => {
+        if (!disabled) {
+            setIsFilterOpen(!isFilterOpen);
+        }
+    };
+    const handleFilterSelect = (value) => {
+        setFilterValue(value);
+        setIsFilterOpen(false);
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(value);
+    };
+    const handleSearchChange = (e) => {
+        const value = e.target.value;
+        setSearchValue(value);
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+    };
+    const handleSearchSubmit = () => {
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(searchValue, filterValue);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            handleSearchSubmit();
+        }
+    };
+    const getFilterLabel = () => {
+        if (filterValue) {
+            const selectedOption = filterOptions.find(opt => opt.value === filterValue);
+            return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || filterValue;
+        }
+        return filterPlaceholder;
+    };
+    const getContainerClasses = () => {
+        const classes = ['tc-global-search'];
+        if (disabled)
+            classes.push('tc-global-search--disabled');
+        if (isFocused)
+            classes.push('tc-global-search--focused');
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    };
+    return (jsxs("div", { className: getContainerClasses(), children: [jsxs("div", { ref: filterRef, className: `tc-global-search__filter ${isFilterOpen ? 'tc-global-search__filter--open' : ''}`, children: [jsxs("button", { type: "button", className: "tc-global-search__filter-trigger", onClick: handleFilterToggle, disabled: disabled, "aria-expanded": isFilterOpen, "aria-haspopup": "listbox", children: [jsx("span", { className: "tc-global-search__filter-label", children: getFilterLabel() }), jsx("div", { className: "tc-global-search__filter-icon", children: jsx(ChevronDownIcon$1, {}) })] }), isFilterOpen && filterOptions.length > 0 && (jsx("div", { className: "tc-global-search__filter-menu", role: "listbox", children: filterOptions.map((option) => (jsx("div", { className: `tc-global-search__filter-option ${filterValue === option.value ? 'tc-global-search__filter-option--selected' : ''}`, role: "option", "aria-selected": filterValue === option.value, onClick: () => handleFilterSelect(option.value), children: option.label }, option.value))) }))] }), jsx("div", { className: "tc-global-search__input-wrapper", children: jsx("input", { ref: inputRef, type: "text", className: "tc-global-search__input", placeholder: placeholder, value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled }) }), jsx("button", { type: "button", className: "tc-global-search__button", onClick: handleSearchSubmit, disabled: disabled, "aria-label": "Search", children: jsx(SearchIcon$2, {}) })] }));
+};
+
+// Default Search Icon SVG
+const SearchIcon$1 = ({ className }) => (jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z", fill: "currentColor" }) }));
+const IconButton = ({ icon, size = 'medium', color = 'default', disabled = false, onClick, ariaLabel = 'Icon button', className = '', }) => {
+    const getButtonClasses = () => {
+        const classes = ['tc-icon-button'];
+        classes.push(`tc-icon-button--${size}`);
+        classes.push(`tc-icon-button--${color}`);
+        if (disabled)
+            classes.push('tc-icon-button--disabled');
+        if (className)
+            classes.push(className);
+        return classes.join(' ');
+    };
+    return (jsx("button", { type: "button", className: getButtonClasses(), onClick: onClick, disabled: disabled, "aria-label": ariaLabel, children: jsx("span", { className: "tc-icon-button__icon", children: icon || jsx(SearchIcon$1, {}) }) }));
+};
+
+// Base Icon wrapper component
+const IconWrapper = ({ size = 'medium', color, className = '', children, }) => {
+    const getSizeClass = () => {
+        switch (size) {
+            case 'small':
+                return 'tc-icon--small';
+            case 'large':
+                return 'tc-icon--large';
+            default:
+                return 'tc-icon--medium';
+        }
+    };
+    return (jsx("span", { className: `tc-icon ${getSizeClass()} ${className}`.trim(), style: color ? { color } : undefined, children: children }));
+};
+// Info Icon
+const InfoIcon = (props) => (jsx(IconWrapper, { ...props, children: jsx("svg", { viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM9.75 12.75H8.25V8.25H9.75V12.75ZM9.75 6.75H8.25V5.25H9.75V6.75Z", fill: "currentColor" }) }) }));
+// Search Icon
+const SearchIcon = (props) => (jsx(IconWrapper, { ...props, children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z", fill: "currentColor" }) }) }));
+// Chevron Down Icon
+const ChevronDownIcon = (props) => (jsx(IconWrapper, { ...props, children: jsx("svg", { viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M0 0L5 5L10 0H0Z", fill: "currentColor" }) }) }));
+// Chevron Up Icon
+const ChevronUpIcon = (props) => (jsx(IconWrapper, { ...props, children: jsx("svg", { viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M10 6L5 1L0 6H10Z", fill: "currentColor" }) }) }));
+// Caret Down Icon
+const CaretDownIcon = (props) => (jsx(IconWrapper, { ...props, children: jsx("svg", { viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5 6L0 0H10L5 6Z", fill: "currentColor" }) }) }));
+// TeamConnect Logo Icon (honeycomb hexagon pattern)
+const TeamConnectIcon = (props) => (jsx(IconWrapper, { ...props, children: jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M5.5 4L8 2.5L10.5 4V7L8 8.5L5.5 7V4Z", fill: "#E91E63" }), jsx("path", { d: "M10.5 4L13 2.5L15.5 4V7L13 8.5L10.5 7V4Z", fill: "#9C27B0" }), jsx("path", { d: "M3 8.5L5.5 7L8 8.5V11.5L5.5 13L3 11.5V8.5Z", fill: "#7B1FA2" }), jsx("path", { d: "M8 8.5L10.5 7L13 8.5V11.5L10.5 13L8 11.5V8.5Z", fill: "#673AB7" }), jsx("path", { d: "M13 8.5L15.5 7L18 8.5V11.5L15.5 13L13 11.5V8.5Z", fill: "#3F51B5" }), jsx("path", { d: "M5.5 13L8 11.5L10.5 13V16L8 17.5L5.5 16V13Z", fill: "#303F9F" }), jsx("path", { d: "M10.5 13L13 11.5L15.5 13V16L13 17.5L10.5 16V13Z", fill: "#1A237E" })] }) }));
+
+// TeamConnect Logo Icon (honeycomb hexagon pattern)
+const LogoIcon = ({ className }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M5.5 4L8 2.5L10.5 4V7L8 8.5L5.5 7V4Z", fill: "#E91E63" }), jsx("path", { d: "M10.5 4L13 2.5L15.5 4V7L13 8.5L10.5 7V4Z", fill: "#9C27B0" }), jsx("path", { d: "M3 8.5L5.5 7L8 8.5V11.5L5.5 13L3 11.5V8.5Z", fill: "#7B1FA2" }), jsx("path", { d: "M8 8.5L10.5 7L13 8.5V11.5L10.5 13L8 11.5V8.5Z", fill: "#673AB7" }), jsx("path", { d: "M13 8.5L15.5 7L18 8.5V11.5L15.5 13L13 11.5V8.5Z", fill: "#3F51B5" }), jsx("path", { d: "M5.5 13L8 11.5L10.5 13V16L8 17.5L5.5 16V13Z", fill: "#303F9F" }), jsx("path", { d: "M10.5 13L13 11.5L15.5 13V16L13 17.5L10.5 16V13Z", fill: "#1A237E" })] }));
+const Logo = ({ size = 'medium', variant = 'full', showSandbox = false, className = '', onClick, }) => {
+    const getSizeClass = () => {
+        switch (size) {
+            case 'small':
+                return 'tc-logo--small';
+            case 'large':
+                return 'tc-logo--large';
+            default:
+                return 'tc-logo--medium';
+        }
+    };
+    return (jsxs("div", { className: `tc-logo ${getSizeClass()} ${className}`.trim(), onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+            }
+        } : undefined, children: [jsx(LogoIcon, { className: "tc-logo__icon" }), variant === 'full' && (jsxs("span", { className: "tc-logo__text", children: [jsx("span", { className: "tc-logo__text-team", children: "Team" }), jsx("span", { className: "tc-logo__text-connect", children: "Connect" }), showSandbox && (jsx("span", { className: "tc-logo__text-sandbox", children: "SANDBOX" }))] }))] }));
+};
+
+const Search = ({ placeholder = 'Search', filterPlaceholder = 'All', filterOptions = [
+    { value: 'all', label: 'All' },
+], filterValue: controlledFilterValue, searchValue: controlledSearchValue, disabled = false, showInfoIcon = true, onSearch, onFilterChange, onSubmit, onInfoClick, className = '', }) => {
+    const [filterValue, setFilterValue] = useState(controlledFilterValue || '');
+    const [searchValue, setSearchValue] = useState(controlledSearchValue || '');
+    const handleFilterChange = (value) => {
+        setFilterValue(value);
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(value);
+    };
+    const handleSearch = (value) => {
+        setSearchValue(value);
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+    };
+    const handleSubmit = (search, filter) => {
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(search, filter);
+    };
+    const handleInfoClick = () => {
+        onInfoClick === null || onInfoClick === void 0 ? void 0 : onInfoClick();
+    };
+    return (jsxs("div", { className: `tc-search ${className}`.trim(), children: [jsx(GlobalSearch, { placeholder: placeholder, filterPlaceholder: filterPlaceholder, filterOptions: filterOptions, filterValue: controlledFilterValue !== undefined ? controlledFilterValue : filterValue, searchValue: controlledSearchValue !== undefined ? controlledSearchValue : searchValue, disabled: disabled, onSearch: handleSearch, onFilterChange: handleFilterChange, onSubmit: handleSubmit }), showInfoIcon && (jsx(IconButton, { icon: jsx(InfoIcon, { size: "medium" }), size: "medium", color: "default", onClick: handleInfoClick, disabled: disabled, ariaLabel: "More information", className: "tc-search__info-button" }))] }));
+};
+
+// Default Wrench Icon (from Figma design)
+const WrenchIcon = ({ className }) => (jsx("svg", { className: className, viewBox: "0 0 14 14", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M13.6 3.5C13.4 3.3 13.1 3.3 12.9 3.5L10.5 5.9L8.1 3.5L10.5 1.1C10.7 0.9 10.7 0.6 10.5 0.4C9.3 -0.4 7.7 -0.1 6.6 1C5.7 1.9 5.4 3.2 5.8 4.3L0.4 9.7C-0.1 10.2 -0.1 11 0.4 11.5L2.5 13.6C3 14.1 3.8 14.1 4.3 13.6L9.7 8.2C10.8 8.6 12.1 8.3 13 7.4C14.1 6.3 14.4 4.7 13.6 3.5Z" }) }));
+const DropdownMenu = ({ items, selectedId, onItemClick, className = '', }) => {
+    const handleItemClick = (item) => {
+        var _a;
+        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+    };
+    return (jsx("div", { className: `tc-dropdown-menu ${className}`.trim(), children: items.map((item, index) => {
+            const isSelected = item.id === selectedId;
+            const isLast = index === items.length - 1;
+            return (jsx("div", { className: `tc-dropdown-menu__item ${isSelected ? 'tc-dropdown-menu__item--selected' : ''} ${isLast ? 'tc-dropdown-menu__item--last' : ''}`, onClick: () => handleItemClick(item), role: "menuitem", tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handleItemClick(item);
+                    }
+                }, children: jsxs("div", { className: "tc-dropdown-menu__link", children: [jsx("span", { className: "tc-dropdown-menu__icon", children: item.icon || jsx(WrenchIcon, {}) }), jsx("span", { className: "tc-dropdown-menu__label", children: item.label })] }) }, item.id));
+        }) }));
+};
+
+// 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 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, {}),
+    recent: jsx(RecentIcon, {}),
+    all: jsx(AllIcon, {}),
+    tools: jsx(ToolsIcon, {}),
+    help: jsx(HelpIcon, {}),
+    client: jsx(ClientIcon, {}),
+};
+const HeaderMenu = ({ items, onItemClick, onDropdownItemClick, className = '', }) => {
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const menuRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setOpenMenuId(null);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const handleItemClick = (item) => {
+        if (item.dropdownItems && item.dropdownItems.length > 0) {
+            setOpenMenuId(openMenuId === item.id ? null : item.id);
+        }
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+    };
+    const handleDropdownItemClick = (menuItem, dropdownItem) => {
+        setOpenMenuId(null);
+        onDropdownItemClick === null || onDropdownItemClick === void 0 ? void 0 : onDropdownItemClick(menuItem, dropdownItem);
+    };
+    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", "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) }) }))] }, item.id));
+        }) }));
+};
+
+// Default menu items matching the Figma design
+const defaultMenuItems = [
+    { id: 'bookmarks', label: 'Bookmarks', dropdownItems: [] },
+    { id: 'recent', label: 'Recent', dropdownItems: [] },
+    { id: 'all', label: 'All', dropdownItems: [] },
+    { id: 'tools', label: 'Tools', dropdownItems: [] },
+    { id: 'help', label: 'Help', dropdownItems: [] },
+    { id: 'client', label: 'Client', dropdownItems: [] },
+];
+// Default filter options
+const defaultFilterOptions = [
+    { value: 'all', label: 'All' },
+];
+const MainHeader = ({ showSandbox = true, menuItems = defaultMenuItems, searchFilterOptions = defaultFilterOptions, searchPlaceholder = 'Search', searchFilterPlaceholder = 'All', onLogoClick, onSearch, onMenuItemClick, onDropdownItemClick, onInfoClick, className = '', }) => {
+    return (jsxs("header", { className: `tc-main-header ${className}`.trim(), children: [jsx("div", { className: "tc-main-header__logo", children: jsx(Logo, { size: "medium", showSandbox: showSandbox, 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 }) })] }));
+};
+
 var x = Object.defineProperty;
 var T = (t, e, s) => e in t ? x(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
 var d = (t, e, s) => T(t, typeof e != "symbol" ? e + "" : e, s);
@@ -265,7 +589,9 @@ function registerWebComponents() {
             customElements.define('tc-input', TCInput);
         }
     }
-}
+}
+// Auto-register when loaded in browser
+registerWebComponents();
 
-export { Button, ButtonGroup, Input, TCButton, TCButtonGroup, TCInput, registerWebComponents };
+export { Button, ButtonGroup, CaretDownIcon, ChevronDownIcon, ChevronUpIcon, DropdownMenu, FilterDropdown, GlobalSearch, HeaderMenu, IconButton, InfoIcon, Input, Logo, MainHeader, SearchIcon, TCButton, TCButtonGroup, TCInput, TeamConnectIcon, defaultIcons, registerWebComponents };
 //# sourceMappingURL=index.esm.js.map