tc-dazzle-ui 1.10.13 → 1.11.2

package/README.md

@@ -3,7 +3,7 @@
 React components and Web Components for the TeamConnect Design System.
 
 [![npm version](https://img.shields.io/npm/v/tc-dazzle-ui.svg)](https://www.npmjs.com/package/tc-dazzle-ui)
-[![license](https://img.shields.io/npm/l/tc-dazzle-ui.svg)](https://github.com/your-org/tc-dazzle-ui/blob/main/LICENSE)
+[![license](https://img.shields.io/npm/l/tc-dazzle-ui.svg)](https://github.com/itsfinnynj/tc-dazzle-ui/blob/main/LICENSE)
 
 ## 📦 Installation
 
@@ -16,16 +16,38 @@ npm install tc-dazzle-ui
 ### React Components
 
 ```tsx
-import { Button, Input, ButtonGroup } from 'tc-dazzle-ui';
+import { 
+  Button, 
+  Input, 
+  MainHeader, 
+  GlobalHeader, 
+  Sidebar, 
+  PageHeader,
+  Footer,
+  Layout 
+} from 'tc-dazzle-ui';
 import 'tc-dazzle-ui/dist/styles.css';
 
 function App() {
   return (
-    <div>
-      <Button label="Click Me" variant="primary" onClick={() => console.log('clicked')} />
-      <Input label="Name" placeholder="Enter your name" />
-      <ButtonGroup label="Actions" variant="secondary" />
-    </div>
+    <Layout
+      header={
+        <>
+          <MainHeader onLogoClick={() => {}} />
+          <GlobalHeader tabs={[{ id: 'home', label: 'Home' }]} activeTabId="home" />
+        </>
+      }
+      sidebar={
+        <Sidebar
+          sections={[
+            { id: 'section1', title: 'Section 1', items: [{ id: 'item1', label: 'Item 1' }] }
+          ]}
+          activeItemId="item1"
+          onItemClick={(item) => console.log(item)}
+        />
+      }
+      main={<div>Your content here</div>}
+    />
   );
 }
 ```
@@ -111,17 +133,30 @@ npm test
 
 ```
 src/
-├── components/          # Reusable UI components
-│   ├── Button/         # Button component with variants
-│   ├── Footer/         # Footer component
-│   ├── Header/         # Header with search and navigation
-│   ├── Layout/         # Main layout wrapper
-│   ├── MainContent/    # Page content area
-│   └── Sidebar/        # Navigation sidebar
-├── assets/             # Static assets (images, icons)
-├── styles/             # Global styles and CSS variables
-├── types/              # TypeScript type definitions
-└── hooks/              # Custom React hooks
+├── components/
+│   ├── Atoms/           # Basic UI elements
+│   │   ├── Button/      # Button, ButtonGroup
+│   │   ├── Input/       # Input fields
+│   │   ├── Icons/       # Icon components
+│   │   ├── Logo/        # Logo component
+│   │   ├── IconButton/  # Icon buttons
+│   │   ├── FilterDropdown/
+│   │   ├── GlobalSearch/
+│   │   └── Tab/
+│   ├── Molecules/       # Composite components
+│   │   ├── DropdownMenu/
+│   │   ├── HeaderMenu/
+│   │   └── Search/
+│   ├── Organisms/       # Complex components
+│   │   ├── MainHeader/  # Main application header
+│   │   ├── GlobalHeader/# Secondary header with tabs
+│   │   ├── Sidebar/     # Resizable navigation sidebar
+│   │   ├── PageHeader/  # Page title and actions
+│   │   └── Footer/      # Footer with Mitratech logo
+│   └── Templates/
+│       └── Layout/      # Main layout wrapper
+├── styles/              # Global styles and CSS variables
+└── lib/                 # Library exports
 ```
 
 ## � Web Components
@@ -172,37 +207,66 @@ After building the project, include the bundle in your HTML:
 
 After running `npm start`, visit `/web-components-demo.html` to see the web components in action.
 
-## �🎯 Components
-
-### Header
-- TeamConnect logo
-- Global search functionality
-- Help and settings navigation
-- Dropdown filters
-
-### Sidebar
-- Hierarchical navigation structure
-- Active state indicators
-- Icon support
-- Scrollable content area
-
-### Main Content
-- Page title display
-- Action buttons (Edit Page, Add Content)
-- Flexible content area
-- Responsive layout
-
-### Footer
-- Version information
-- Copyright details
-- Privacy policy link
-- Mitratech branding
-
-### Button
-- Multiple variants: primary, secondary, edit, add
-- Icon support
-- Disabled states
-- Consistent sizing
+## 🎯 Components
+
+### Atoms
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Primary, secondary, text variants with icon support |
+| `ButtonGroup` | Button with dropdown menu |
+| `Input` | Text input with various states |
+| `IconButton` | Icon-only buttons |
+| `FilterDropdown` | Dropdown filter component |
+| `GlobalSearch` | Search with suggestions |
+| `Logo` | TeamConnect logo |
+| `Tab` | Tab navigation item |
+| `Icons` | InfoIcon, SearchIcon, ChevronDownIcon, etc. |
+
+### Molecules
+
+| Component | Description |
+|-----------|-------------|
+| `DropdownMenu` | Dropdown menu with items |
+| `HeaderMenu` | Header navigation menu |
+| `Search` | Search input with filter |
+
+### Organisms
+
+| Component | Description |
+|-----------|-------------|
+| `MainHeader` | Main application header with logo, search, and navigation |
+| `GlobalHeader` | Secondary header with tabs and properties button |
+| `Sidebar` | Resizable navigation sidebar with collapsible sections |
+| `PageHeader` | Page title with breadcrumbs and action buttons |
+| `Footer` | Footer with copyright, links, and Mitratech logo |
+
+### Templates
+
+| Component | Description |
+|-----------|-------------|
+| `Layout` | Main layout wrapper with header, sidebar, content, and optional right panel |
+
+### Footer Component
+
+```tsx
+import { Footer } from 'tc-dazzle-ui';
+
+<Footer
+  copyrightText="Copyright © 2024 Mitratech Holdings, Inc. All Rights Reserved."
+  links={[
+    { id: 'terms', label: 'Terms of Service', href: '/terms' },
+    { id: 'privacy', label: 'Privacy Policy', href: '/privacy', variant: 'underline' },
+  ]}
+  showLogo={true}
+/>
+```
+
+**Footer Props:**
+- `copyrightText` - Copyright text (default: "Copyright © 2024 Mitratech Holdings, Inc. All Rights Reserved.")
+- `links` - Array of FooterLink objects with `id`, `label`, `href`/`onClick`, and `variant` ('default' | 'bordered' | 'underline')
+- `showLogo` - Show Mitratech logo (default: true)
+- `className` - Additional CSS classes
 
 ## 🎨 Design Tokens
 
@@ -211,12 +275,12 @@ The design system uses CSS custom properties for consistent theming:
 ```css
 :root {
   --primary-dark: #001a35;
-  --text-primary: #242a30;
+  --primary-main: #0067d2;
+  --text-primary: #212121;
   --text-secondary: #47535f;
-  --border-primary: #c7d3df;
+  --border-primary: #e2e2e2;
   --background-light: #f9fafc;
-  --font-family: 'Helvetica Neue', sans-serif;
-  /* ... and more */
+  --font-family: 'Poppins', sans-serif;
 }
 ```
 
@@ -260,7 +324,7 @@ The layout is responsive and works across different screen sizes. The sidebar an
 
 ## 📄 License
 
-Copyright 1999-2024 TeamConnect. All Rights Reserved.
+Copyright 1999-2025 Mitratech Holdings, Inc. All Rights Reserved.
 
 ## 🤝 Contributing
 

package/dist/components/Atoms/Button/Button.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import './Button.css';
-export type ButtonVariant = 'primary' | 'secondary' | 'text';
-export type ButtonState = 'active' | 'hover' | 'disabled';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonColor = 'primary' | 'error' | 'warning' | 'info' | 'success' | 'inherit';
 export interface ButtonProps {
     label?: string;
     variant?: ButtonVariant;
+    color?: ButtonColor;
     disabled?: boolean;
     showStartIcon?: boolean;
     showEndIcon?: boolean;
@@ -14,16 +15,5 @@ export interface ButtonProps {
     onClick?: () => void;
     className?: string;
 }
-export interface ButtonGroupProps {
-    label?: string;
-    variant?: ButtonVariant;
-    disabled?: boolean;
-    showStartIcon?: boolean;
-    startIcon?: React.ReactNode;
-    onButtonClick?: () => void;
-    onDropdownClick?: () => void;
-    className?: string;
-}
 export declare const Button: React.FC<ButtonProps>;
-export declare const ButtonGroup: React.FC<ButtonGroupProps>;
 export default Button;

package/dist/components/Atoms/Button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button, ButtonGroup } from './Button';
-export type { ButtonProps, ButtonGroupProps, ButtonVariant, ButtonState } from './Button';
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonColor } from './Button';

package/dist/components/Atoms/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ButtonVariant, ButtonColor } from '../Button';
+import './ButtonGroup.css';
+export type ButtonGroupVariant = ButtonVariant;
+export type ButtonGroupColor = ButtonColor;
+export interface ButtonGroupProps {
+    label?: string;
+    variant?: ButtonGroupVariant;
+    color?: ButtonGroupColor;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    showStartIcon?: boolean;
+    onButtonClick?: () => void;
+    onIconClick?: () => void;
+    iconAriaLabel?: string;
+    className?: string;
+}
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;
+export default ButtonGroup;

package/dist/components/Atoms/ButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupVariant, ButtonGroupColor } from './ButtonGroup';

package/dist/components/Atoms/IconButton/IconButton.d.ts

@@ -1,13 +1,17 @@
 import React from 'react';
 import './IconButton.css';
 export type IconButtonSize = 'small' | 'medium' | 'large';
-export type IconButtonColor = 'default' | 'primary' | 'secondary';
+export type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type IconButtonColor = 'primary' | 'error' | 'warning' | 'info' | 'success' | 'inherit';
 export type IconButtonState = 'enabled' | 'hover' | 'disabled';
 export interface IconButtonProps {
     icon?: React.ReactNode;
     size?: IconButtonSize;
+    variant?: IconButtonVariant;
     color?: IconButtonColor;
     disabled?: boolean;
+    showArrow?: boolean;
+    arrowIcon?: React.ReactNode;
     onClick?: () => void;
     ariaLabel?: string;
     className?: string;

package/dist/components/Atoms/IconButton/index.d.ts

@@ -1,2 +1,2 @@
 export { IconButton } from './IconButton';
-export type { IconButtonProps, IconButtonSize, IconButtonColor, IconButtonState } from './IconButton';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant, IconButtonColor, IconButtonState } from './IconButton';

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

@@ -1,5 +1,7 @@
-export { Button, ButtonGroup } from './Button';
-export type { ButtonProps, ButtonGroupProps, ButtonVariant, ButtonState } from './Button';
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonColor } from './Button';
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupVariant, ButtonGroupColor } from './ButtonGroup';
 export { Input } from './Input';
 export type { InputProps, InputType } from './Input';
 export { FilterDropdown } from './FilterDropdown';
@@ -7,7 +9,7 @@ export type { FilterDropdownProps, FilterDropdownOption, FilterDropdownSize, Fil
 export { GlobalSearch } from './GlobalSearch';
 export type { GlobalSearchProps, GlobalSearchOption } from './GlobalSearch';
 export { IconButton } from './IconButton';
-export type { IconButtonProps, IconButtonSize, IconButtonColor, IconButtonState } from './IconButton';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant, IconButtonColor, IconButtonState } from './IconButton';
 export { InfoIcon, SearchIcon, ChevronDownIcon, ChevronUpIcon, CaretDownIcon, CloseIcon, MenuIcon, CheckIcon, PlusIcon, MinusIcon, EditIcon, DeleteIcon, SettingsIcon, UserIcon, HomeIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowDownIcon, StarIcon, StarOutlineIcon, FilterIcon, SortIcon, RefreshIcon, DownloadIcon, UploadIcon, CopyIcon, CalendarIcon, ClockIcon, EmailIcon, PhoneIcon, LockIcon, UnlockIcon, EyeIcon, EyeOffIcon, NotificationIcon, WarningIcon, ErrorIcon, SuccessIcon, HelpIcon, LinkIcon, AttachmentIcon, FolderIcon, FileIcon, PrintIcon, ShareIcon, MoreVerticalIcon, MoreHorizontalIcon, ExpandIcon, CollapseIcon, FullscreenIcon, FullscreenExitIcon } from './Icons';
 export type { IconProps, IconSize } from './Icons';
 export { Logo } from './Logo';

package/dist/components/Foundation/ColorPalette/ColorPalette.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './ColorPalette.css';
+export interface ColorSwatch {
+    name: string;
+    hex: string;
+}
+export interface ColorSection {
+    title: string;
+    colors: ColorSwatch[];
+}
+export interface ColorPaletteProps {
+    sections: ColorSection[];
+    className?: string;
+}
+export declare const ColorPalette: React.FC<ColorPaletteProps>;
+export default ColorPalette;

package/dist/components/Foundation/ColorPalette/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorPalette } from './ColorPalette';
+export type { ColorPaletteProps, ColorSection, ColorSwatch } from './ColorPalette';

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

@@ -0,0 +1,2 @@
+export { ColorPalette } from './ColorPalette';
+export type { ColorPaletteProps, ColorSection, ColorSwatch } from './ColorPalette';

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

@@ -4,7 +4,7 @@ export interface PageHeaderAction {
     id: string;
     label: string;
     icon?: React.ReactNode;
-    variant?: 'primary' | 'secondary' | 'text';
+    variant?: 'primary' | 'secondary' | 'tertiary';
     onClick?: () => void;
 }
 export interface PageHeaderBadge {

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './RightPanel.css';
+export interface RightPanelProps {
+    onWidthChange?: (width: number) => void;
+    onToggle?: (isOpen: boolean) => void;
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultOpen?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const RightPanel: React.FC<RightPanelProps>;
+export default RightPanel;

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

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

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

@@ -8,3 +8,5 @@ export { PageHeader } from './PageHeader';
 export type { PageHeaderProps, PageHeaderAction, PageHeaderBadge } from './PageHeader';
 export { Footer } from './Footer';
 export type { FooterProps, FooterLink } from './Footer';
+export { RightPanel } from './RightPanel';
+export type { RightPanelProps } from './RightPanel';

package/dist/index.esm.js

@@ -2,17 +2,26 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import o, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// Caret Down Icon SVG
-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$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$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, {}) }) })] }));
+const Button = ({ label = 'Button', variant = 'primary', color = 'primary', disabled = false, showStartIcon = false, showEndIcon = false, showLabel = true, startIcon, endIcon, onClick, className = '', }) => {
+    const buttonClass = [
+        'tc-button',
+        `tc-button--${variant}`,
+        `tc-button--color-${color}`,
+        className,
+    ].filter(Boolean).join(' ').trim();
+    return (jsxs("button", { className: buttonClass, disabled: disabled, onClick: onClick, type: "button", children: [showStartIcon && startIcon && (jsx("span", { className: "tc-button__icon", children: startIcon })), showLabel && (jsx("span", { className: "tc-button__label", children: label })), showEndIcon && endIcon && (jsx("span", { className: "tc-button__icon", children: endIcon }))] }));
+};
+
+const IconButton = ({ icon, size = 'medium', variant = 'tertiary', color = 'primary', disabled = false, showArrow = false, arrowIcon, onClick, ariaLabel = 'Icon button', className = '', }) => {
+    const buttonClass = [
+        'tc-icon-button',
+        `tc-icon-button--${size}`,
+        `tc-icon-button--${variant}`,
+        `tc-icon-button--color-${color}`,
+        showArrow ? 'tc-icon-button--with-arrow' : '',
+        className,
+    ].filter(Boolean).join(' ').trim();
+    return (jsxs("button", { type: "button", className: buttonClass, onClick: onClick, disabled: disabled, "aria-label": ariaLabel, children: [jsx("span", { className: "tc-icon-button__icon", children: icon }), showArrow && (jsx("span", { className: "tc-icon-button__arrow", children: arrowIcon || (jsx("svg", { viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1 1L5 5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }))] }));
 };
 
 // Arrow Icon for Prefix/Suffix
@@ -135,7 +144,7 @@ const FilterDropdown = ({ value, defaultValue, options = [], placeholder = 'All'
 };
 
 // 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" }) }));
+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" }) }));
 // 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 = '', }) => {
@@ -206,23 +215,7 @@ const GlobalSearch = ({ placeholder = 'Search', filterPlaceholder = 'All', filte
             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, {}) }) }));
+    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$1, {}) })] }));
 };
 
 // Base Icon wrapper component
@@ -308,7 +301,7 @@ const Search = ({ placeholder = 'Search', filterPlaceholder = 'All', filterOptio
     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" }))] }));
+    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: "inherit", onClick: handleInfoClick, disabled: disabled, ariaLabel: "More information", className: "tc-search__info-button" }))] }));
 };
 
 // Chevron Right Icon for submenu indicator
@@ -817,6 +810,7 @@ const TCButton = s(Button, {
     props: {
         label: 'string',
         variant: 'string',
+        color: 'string',
         disabled: 'boolean',
         showStartIcon: 'boolean',
         showEndIcon: 'boolean',
@@ -824,16 +818,6 @@ const TCButton = s(Button, {
         className: 'string',
     },
 });
-// Convert ButtonGroup to Web Component
-const TCButtonGroup = s(ButtonGroup, {
-    props: {
-        label: 'string',
-        variant: 'string',
-        disabled: 'boolean',
-        showStartIcon: 'boolean',
-        className: 'string',
-    },
-});
 // Convert Input to Web Component
 const TCInput = s(Input, {
     props: {
@@ -856,9 +840,6 @@ function registerWebComponents() {
         if (!customElements.get('tc-button')) {
             customElements.define('tc-button', TCButton);
         }
-        if (!customElements.get('tc-button-group')) {
-            customElements.define('tc-button-group', TCButtonGroup);
-        }
         if (!customElements.get('tc-input')) {
             customElements.define('tc-input', TCInput);
         }
@@ -867,5 +848,5 @@ function registerWebComponents() {
 // Auto-register when loaded in browser
 registerWebComponents();
 
-export { Button, ButtonGroup, CaretDownIcon, ChevronDownIcon, ChevronUpIcon, DropdownMenu, FilterDropdown, Footer, GlobalHeader, GlobalSearch, HeaderMenu, IconButton, InfoIcon, Input, Layout, Logo, MainHeader, PageHeader, SearchIcon, Sidebar, TCButton, TCButtonGroup, TCInput, Tab, defaultIcons, registerWebComponents };
+export { Button, CaretDownIcon, ChevronDownIcon, ChevronUpIcon, DropdownMenu, FilterDropdown, Footer, GlobalHeader, GlobalSearch, HeaderMenu, IconButton, InfoIcon, Input, Layout, Logo, MainHeader, PageHeader, SearchIcon, Sidebar, TCButton, TCInput, Tab, defaultIcons, registerWebComponents };
 //# sourceMappingURL=index.esm.js.map