@shohojdhara/atomix 0.2.7 → 0.2.9

package/dist/index.esm.js

@@ -37,7 +37,17 @@ const CLASS_PREFIX = {
 const BUTTON = {
     BASE_CLASS: 'c-btn',
     ICON_CLASS: 'c-btn__icon',
+    LABEL_CLASS: 'c-btn__label',
+    SPINNER_CLASS: 'c-btn__spinner',
     VARIANT_PREFIX: 'c-btn--',
+    CLASSES: {
+        BASE: 'c-btn',
+        LOADING: 'c-btn--loading',
+        FULL_WIDTH: 'c-btn--full-width',
+        BLOCK: 'c-btn--block',
+        ACTIVE: 'c-btn--active',
+        SELECTED: 'c-btn--selected',
+    },
 };
 /**
  * Callout-specific constants
@@ -702,6 +712,22 @@ const INPUT = {
         INVALID: 'is-invalid',
         VALID: 'is-valid',
         DISABLED: 'is-disabled',
+        FULL_WIDTH: 'c-input--full-width',
+        PREFIX_ICON: 'c-input--prefix-icon',
+        SUFFIX_ICON: 'c-input--suffix-icon',
+        CLEARABLE: 'c-input--clearable',
+        WITH_COUNTER: 'c-input--with-counter',
+        PASSWORD_TOGGLE: 'c-input--password-toggle',
+    },
+    ELEMENTS: {
+        WRAPPER: 'c-input-wrapper',
+        PREFIX: 'c-input__prefix',
+        SUFFIX: 'c-input__suffix',
+        CLEAR_BUTTON: 'c-input__clear',
+        PASSWORD_TOGGLE: 'c-input__password-toggle',
+        COUNTER: 'c-input__counter',
+        ERROR_MESSAGE: 'c-input__error',
+        HELPER_TEXT: 'c-input__helper',
     },
 };
 /**
@@ -741,15 +767,42 @@ const CARD = {
     },
     CLASSES: {
         BASE: 'c-card',
+        // Size modifiers
+        SM: 'c-card--sm',
+        MD: 'c-card--md',
+        LG: 'c-card--lg',
+        // Layout modifiers
         ROW: 'c-card--row',
         FLAT: 'c-card--flat',
+        // Appearance modifiers
+        FILLED: 'c-card--filled',
+        OUTLINED: 'c-card--outlined',
+        GHOST: 'c-card--ghost',
+        ELEVATED: 'c-card--elevated',
+        // Elevation modifiers
+        ELEVATION_NONE: 'c-card--elevation-none',
+        ELEVATION_SM: 'c-card--elevation-sm',
+        ELEVATION_MD: 'c-card--elevation-md',
+        ELEVATION_LG: 'c-card--elevation-lg',
+        ELEVATION_XL: 'c-card--elevation-xl',
+        // State modifiers
         ACTIVE: 'is-active',
+        DISABLED: 'c-card--disabled',
+        LOADING: 'c-card--loading',
+        SELECTED: 'c-card--selected',
+        INTERACTIVE: 'c-card--interactive',
+        // Other modifiers
         FLIPPED: 'is-flipped',
         FOCUSED: 'is-focused',
         CLICKABLE: 'is-clickable',
+        GLASS: 'c-card--glass',
     },
     DEFAULTS: {
         HOVER: true,
+        SIZE: 'md',
+        VARIANT: 'primary',
+        APPEARANCE: 'filled',
+        ELEVATION: 'none',
     },
 };
 /**
@@ -4253,6 +4306,11 @@ function useButton(initialProps) {
         size: 'md',
         disabled: false,
         rounded: false,
+        loading: false,
+        fullWidth: false,
+        block: false,
+        active: false,
+        selected: false,
         ...initialProps,
     };
     /**
@@ -4261,13 +4319,34 @@ function useButton(initialProps) {
      * @returns Class string
      */
     const generateButtonClass = (props) => {
-        const { variant = defaultProps.variant, size = defaultProps.size, disabled = defaultProps.disabled, rounded = defaultProps.rounded, iconOnly = false, glass = defaultProps.glass, className = '', } = props;
+        const { variant = defaultProps.variant, size = defaultProps.size, disabled = defaultProps.disabled, rounded = defaultProps.rounded, iconOnly = false, glass = defaultProps.glass, loading = defaultProps.loading, fullWidth = defaultProps.fullWidth, block = defaultProps.block, active = defaultProps.active, selected = defaultProps.selected, className = '', } = props;
         const sizeClass = size === 'md' ? '' : `c-btn--${size}`;
         const iconOnlyClass = iconOnly ? 'c-btn--icon' : '';
         const roundedClass = rounded ? 'c-btn--rounded' : '';
         const disabledClass = disabled ? 'c-btn--disabled' : '';
         const glassClass = glass ? 'c-btn--glass' : '';
-        return `c-btn c-btn--${variant} ${sizeClass} ${iconOnlyClass} ${roundedClass} ${disabledClass} ${glassClass} ${className}`.trim();
+        const loadingClass = loading ? BUTTON.CLASSES.LOADING : '';
+        const fullWidthClass = fullWidth ? BUTTON.CLASSES.FULL_WIDTH : '';
+        const blockClass = block ? BUTTON.CLASSES.BLOCK : '';
+        const activeClass = active ? BUTTON.CLASSES.ACTIVE : '';
+        const selectedClass = selected ? BUTTON.CLASSES.SELECTED : '';
+        return [
+            BUTTON.BASE_CLASS,
+            `c-btn--${variant}`,
+            sizeClass,
+            iconOnlyClass,
+            roundedClass,
+            disabledClass,
+            glassClass,
+            loadingClass,
+            fullWidthClass,
+            blockClass,
+            activeClass,
+            selectedClass,
+            className,
+        ]
+            .filter(Boolean)
+            .join(' ');
     };
     /**
      * Handle button click with disabled check
@@ -4275,9 +4354,9 @@ function useButton(initialProps) {
      * @returns Function that respects disabled state
      */
     const handleClick = (handler) => {
-        return () => {
-            if (!defaultProps.disabled && handler) {
-                handler();
+        return (event) => {
+            if (!defaultProps.disabled && !defaultProps.loading && handler) {
+                handler(event);
             }
         };
     };
@@ -4288,36 +4367,188 @@ function useButton(initialProps) {
     };
 }
 
-const Button = forwardRef(({ label, children, onClick, variant = 'primary', size = 'md', disabled = false, icon, iconOnly = false, rounded = false, className = '', as: Component = 'button', glass, style, ...props }, ref) => {
+/**
+ * Spinner state and functionality
+ * @param initialProps - Initial spinner properties
+ * @returns Spinner state and methods
+ */
+function useSpinner(initialProps) {
+    // Default spinner properties
+    const defaultProps = {
+        variant: 'primary',
+        size: 'md',
+        fullscreen: false,
+        ...initialProps,
+    };
+    /**
+     * Generate spinner class based on properties
+     * @param props - Spinner properties
+     * @returns Class string
+     */
+    const generateSpinnerClass = (props) => {
+        const { variant = defaultProps.variant, size = defaultProps.size, fullscreen = defaultProps.fullscreen, className = '', } = props;
+        const baseClass = 'c-spinner';
+        const variantClass = variant ? `${baseClass}--${variant}` : '';
+        const sizeClass = size !== 'md' ? `${baseClass}--${size}` : '';
+        const fullscreenClass = fullscreen ? `${baseClass}--fullscreen` : '';
+        return `${baseClass} ${variantClass} ${sizeClass} ${fullscreenClass} ${className}`.trim();
+    };
+    return {
+        defaultProps,
+        generateSpinnerClass,
+    };
+}
+
+const Spinner = ({ size = 'md', variant = 'primary', fullscreen = false, className = '', style, glass, }) => {
+    const { generateSpinnerClass } = useSpinner({
+        size,
+        variant,
+        fullscreen,
+    });
+    const spinnerClass = generateSpinnerClass({
+        size,
+        variant,
+        fullscreen,
+        className: `${className} ${glass ? 'c-spinner--glass' : ''}`.trim(),
+    });
+    const spinnerContent = (jsx("div", { className: spinnerClass, style: style, role: "status", children: jsx("span", { className: SPINNER.VISUALLY_HIDDEN, children: "Loading..." }) }));
+    if (glass) {
+        const defaultGlassProps = {
+            displacementScale: 20,
+            blurAmount: 1,
+            cornerRadius: 999,
+            mode: 'shader',
+        };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        return jsx(AtomixGlass, { ...glassProps, children: spinnerContent });
+    }
+    return spinnerContent;
+};
+Spinner.displayName = 'Spinner';
+
+const Button = React.memo(forwardRef(({ label, children, onClick, variant = 'primary', size = 'md', disabled = false, loading = false, loadingText, icon, iconPosition = 'start', iconOnly = false, rounded = false, fullWidth = false, block = false, active = false, selected = false, type = 'button', className = '', as: Component = 'button', glass, onHover, onFocus, onBlur, ariaLabel, ariaDescribedBy, ariaExpanded, ariaControls, tabIndex, style, ...props }, ref) => {
+    const isDisabled = disabled || loading;
     const { generateButtonClass, handleClick } = useButton({
         variant,
         size,
-        disabled,
+        disabled: isDisabled,
         rounded,
         glass,
+        loading,
+        fullWidth,
+        block,
+        active,
+        selected,
     });
-    const buttonClass = generateButtonClass({
+    const buttonClass = useMemo(() => generateButtonClass({
         variant,
         size,
-        disabled,
+        disabled: isDisabled,
         rounded,
         iconOnly,
         glass,
+        loading,
+        fullWidth,
+        block,
+        active,
+        selected,
         className,
-    });
-    // Custom styles for glass effect
-    const glassStyles = glass ? {} : {};
-    // Handle the case when the button is rendered as a link or another component
-    const buttonProps = {
+    }), [variant, size, isDisabled, rounded, iconOnly, glass, loading, fullWidth, block, active, selected, className, generateButtonClass]);
+    // Handle click with loading check
+    const handleClickEvent = useCallback((event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        onClick?.(event);
+    }, [isDisabled, onClick]);
+    // Handle hover
+    const handleMouseEnter = useCallback((event) => {
+        if (!isDisabled) {
+            onHover?.(event);
+        }
+    }, [isDisabled, onHover]);
+    // Handle focus
+    const handleFocusEvent = useCallback((event) => {
+        if (!isDisabled) {
+            onFocus?.(event);
+        }
+    }, [isDisabled, onFocus]);
+    // Handle blur
+    const handleBlurEvent = useCallback((event) => {
+        if (!isDisabled) {
+            onBlur?.(event);
+        }
+    }, [isDisabled, onBlur]);
+    // Determine button text
+    const buttonText = useMemo(() => {
+        if (loading && loadingText)
+            return loadingText;
+        if (loading && !loadingText)
+            return label || children;
+        return label || children;
+    }, [loading, loadingText, label, children]);
+    // Determine spinner size based on button size
+    const spinnerSize = useMemo(() => {
+        if (size === 'sm')
+            return 'sm';
+        if (size === 'lg')
+            return 'md';
+        return 'sm';
+    }, [size]);
+    // Button content with icon positioning
+    const buttonContent = useMemo(() => {
+        const iconElement = icon && !loading && (jsx("span", { className: BUTTON.ICON_CLASS, "aria-hidden": "true", children: icon }));
+        const spinnerElement = loading && (jsx("span", { className: BUTTON.SPINNER_CLASS, "aria-hidden": "true", children: jsx(Spinner, { size: spinnerSize, variant: variant === 'link' || (typeof variant === 'string' && variant.startsWith('outline-'))
+                    ? 'primary'
+                    : (variant === 'danger' ? 'error' : variant) }) }));
+        const labelElement = !iconOnly && buttonText && (jsx("span", { className: BUTTON.LABEL_CLASS, children: buttonText }));
+        if (iconPosition === 'end') {
+            return (jsxs(Fragment, { children: [labelElement, spinnerElement, iconElement] }));
+        }
+        return (jsxs(Fragment, { children: [spinnerElement, iconElement, labelElement] }));
+    }, [icon, iconPosition, iconOnly, buttonText, loading, spinnerSize, variant]);
+    // Button props
+    const buttonProps = useMemo(() => ({
         ref,
         className: buttonClass,
-        onClick: handleClick(onClick),
-        disabled,
-        'aria-disabled': disabled,
-        style: glass ? { ...glassStyles, ...style } : style,
+        type: Component === 'button' ? type : undefined,
+        onClick: handleClickEvent,
+        onMouseEnter: onHover ? handleMouseEnter : undefined,
+        onFocus: onFocus ? handleFocusEvent : undefined,
+        onBlur: onBlur ? handleBlurEvent : undefined,
+        disabled: isDisabled && Component === 'button',
+        'aria-disabled': isDisabled,
+        'aria-busy': loading,
+        'aria-label': ariaLabel || (iconOnly ? label || children : undefined),
+        'aria-describedby': ariaDescribedBy,
+        'aria-expanded': ariaExpanded,
+        'aria-controls': ariaControls,
+        tabIndex: tabIndex !== undefined ? tabIndex : (isDisabled ? -1 : 0),
+        style,
         ...props,
-    };
-    const buttonContent = (jsxs(Fragment, { children: [icon && jsx("span", { className: "c-btn__icon", children: icon }), !iconOnly && jsx("span", { className: "c-btn__label", children: label || children })] }));
+    }), [
+        ref,
+        buttonClass,
+        Component,
+        type,
+        handleClickEvent,
+        handleMouseEnter,
+        handleFocusEvent,
+        handleBlurEvent,
+        isDisabled,
+        loading,
+        ariaLabel,
+        iconOnly,
+        label,
+        children,
+        ariaDescribedBy,
+        ariaExpanded,
+        ariaControls,
+        tabIndex,
+        style,
+        props,
+    ]);
     if (glass) {
         // Default glass settings for buttons
         const defaultGlassProps = {
@@ -4330,7 +4561,7 @@ const Button = forwardRef(({ label, children, onClick, variant = 'primary', size
         return (jsx(AtomixGlass, { ...glassProps, children: jsx(Component, { ...buttonProps, children: buttonContent }) }));
     }
     return jsx(Component, { ...buttonProps, children: buttonContent });
-});
+}));
 Button.displayName = 'Button';
 
 /**
@@ -4426,23 +4657,150 @@ const Callout = ({ title, children, icon, variant = 'primary', onClose, actions,
 };
 Callout.displayName = 'Callout';
 
-const Card = forwardRef(({ header, image, imageAlt = '', title, text, actions, icon, footer, row = false, flat = false, active = false, className = '', children, onClick, style, glass, ...rest }, ref) => {
-    const cardClasses = [
+const Card = React.memo(forwardRef(({ 
+// Variants
+size = 'md', variant = '', appearance = 'filled', elevation = 'none', 
+// Layout
+row = false, flat = false, 
+// States
+active = false, disabled = false, loading = false, selected = false, interactive = false, 
+// Content
+header, image, imageAlt = '', title, text, actions, icon, footer, children, 
+// Interaction
+onClick, onHover, onFocus, href, target, 
+// Glass
+glass, 
+// Accessibility
+role, ariaLabel, ariaDescribedBy, tabIndex, 
+// Styling
+className = '', style, ...rest }, ref) => {
+    // Determine if card is clickable/interactive
+    const isClickable = Boolean(onClick || href || interactive);
+    const isDisabled = disabled || loading;
+    // Build CSS classes using BEM methodology
+    const cardClasses = useMemo(() => [
         CARD.CLASSES.BASE,
+        // Size modifiers
+        size === 'sm' ? CARD.CLASSES.SM : '',
+        size === 'md' ? CARD.CLASSES.MD : '',
+        size === 'lg' ? CARD.CLASSES.LG : '',
+        // Variant modifiers (will be handled in SCSS with @each)
+        variant ? `c-card--${variant}` : '',
+        // Appearance modifiers
+        appearance === 'filled' ? CARD.CLASSES.FILLED : '',
+        appearance === 'outlined' ? CARD.CLASSES.OUTLINED : '',
+        appearance === 'ghost' ? CARD.CLASSES.GHOST : '',
+        appearance === 'elevated' ? CARD.CLASSES.ELEVATED : '',
+        // Elevation modifiers
+        elevation === 'none' ? CARD.CLASSES.ELEVATION_NONE : '',
+        elevation === 'sm' ? CARD.CLASSES.ELEVATION_SM : '',
+        elevation === 'md' ? CARD.CLASSES.ELEVATION_MD : '',
+        elevation === 'lg' ? CARD.CLASSES.ELEVATION_LG : '',
+        elevation === 'xl' ? CARD.CLASSES.ELEVATION_XL : '',
+        // Layout modifiers
         row ? CARD.CLASSES.ROW : '',
         flat ? CARD.CLASSES.FLAT : '',
+        // State modifiers
         active ? CARD.CLASSES.ACTIVE : '',
+        disabled ? CARD.CLASSES.DISABLED : '',
+        loading ? CARD.CLASSES.LOADING : '',
+        selected ? CARD.CLASSES.SELECTED : '',
+        interactive || isClickable ? CARD.CLASSES.INTERACTIVE : '',
+        glass ? CARD.CLASSES.GLASS : '',
         className,
     ]
         .filter(Boolean)
-        .join(' ');
-    const cardContent = (jsxs(Fragment, { children: [(image || icon || header) && (jsxs("div", { className: CARD.SELECTORS.HEADER.substring(1), children: [header, image && (jsx("img", { src: image, alt: imageAlt, className: CARD.SELECTORS.IMAGE.substring(1) })), icon && jsx("div", { className: CARD.SELECTORS.ICON.substring(1), children: icon })] })), jsxs("div", { className: CARD.SELECTORS.BODY.substring(1), children: [title && jsx("h3", { className: CARD.SELECTORS.TITLE.substring(1), children: title }), text && jsx("p", { className: CARD.SELECTORS.TEXT.substring(1), children: text }), children] }), actions && jsx("div", { className: CARD.SELECTORS.ACTIONS.substring(1), children: actions }), footer && jsx("div", { className: CARD.SELECTORS.FOOTER.substring(1), children: footer })] }));
+        .join(' '), [size, variant, appearance, elevation, row, flat, active, disabled, loading, selected, interactive, isClickable, glass, className]);
+    // Determine ARIA role
+    const cardRole = useMemo(() => {
+        if (role)
+            return role;
+        if (href)
+            return 'link';
+        if (isClickable)
+            return 'button';
+        return 'article';
+    }, [role, href, isClickable]);
+    // Handle click events
+    const handleClick = useCallback((event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        onClick?.(event);
+    }, [isDisabled, onClick]);
+    // Handle keyboard events for accessibility
+    const handleKeyDown = useCallback((event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        // Enter or Space activates clickable cards
+        if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            if (onClick) {
+                onClick(event);
+            }
+            // If href is provided, the anchor will handle navigation
+        }
+    }, [isDisabled, isClickable, onClick]);
+    // Handle hover events
+    const handleMouseEnter = useCallback((event) => {
+        if (!isDisabled) {
+            onHover?.(event);
+        }
+    }, [isDisabled, onHover]);
+    // Handle focus events
+    const handleFocusEvent = useCallback((event) => {
+        if (!isDisabled) {
+            onFocus?.(event);
+        }
+    }, [isDisabled, onFocus]);
+    // Determine tab index
+    const effectiveTabIndex = useMemo(() => {
+        if (tabIndex !== undefined)
+            return tabIndex;
+        if (isDisabled)
+            return -1;
+        if (isClickable)
+            return 0;
+        return undefined;
+    }, [tabIndex, isDisabled, isClickable]);
+    // Card content structure
+    const cardContent = useMemo(() => (jsxs(Fragment, { children: [loading && (jsx("div", { className: "c-card__loading", "aria-label": "Loading", children: jsx("div", { className: "c-card__spinner" }) })), (image || icon || header) && (jsxs("div", { className: CARD.SELECTORS.HEADER.substring(1), children: [header, image && (jsx("img", { src: image, alt: imageAlt, className: CARD.SELECTORS.IMAGE.substring(1), loading: "lazy" })), icon && jsx("div", { className: CARD.SELECTORS.ICON.substring(1), children: icon })] })), jsxs("div", { className: CARD.SELECTORS.BODY.substring(1), children: [title && jsx("h3", { className: CARD.SELECTORS.TITLE.substring(1), children: title }), text && jsx("p", { className: CARD.SELECTORS.TEXT.substring(1), children: text }), children] }), actions && jsx("div", { className: CARD.SELECTORS.ACTIONS.substring(1), children: actions }), footer && jsx("div", { className: CARD.SELECTORS.FOOTER.substring(1), children: footer })] })), [loading, image, imageAlt, icon, header, title, text, children, actions, footer]);
+    // Common props for both div and anchor
+    const commonProps = {
+        // ref is applied individually to ensure correct typing for polymorphic behavior
+        className: cardClasses,
+        style,
+        role: cardRole,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        'aria-disabled': isDisabled ? true : undefined,
+        tabIndex: effectiveTabIndex,
+        onClick: isClickable ? handleClick : undefined,
+        onKeyDown: isClickable ? handleKeyDown : undefined,
+        onMouseEnter: onHover ? handleMouseEnter : undefined,
+        onFocus: onFocus ? handleFocusEvent : undefined,
+        ...rest,
+    };
+    // Render as anchor if href is provided
+    if (href && !isDisabled) {
+        const anchorElement = (jsx("a", { ...commonProps, ref: ref, href: href, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, children: cardContent }));
+        if (glass) {
+            const glassProps = glass === true ? {} : glass;
+            return (jsx(AtomixGlass, { ...glassProps, elasticity: 0, children: anchorElement }));
+        }
+        return anchorElement;
+    }
+    // Render as div
+    const divElement = (jsx("div", { ...commonProps, ref: ref, children: cardContent }));
     if (glass) {
         const glassProps = glass === true ? {} : glass;
-        return (jsxs(AtomixGlass, { ...glassProps, elasticity: 0, children: [' ', jsx("div", { ref: ref, className: cardClasses + ' c-card--glass', onClick: onClick, ...rest, style: { ...style }, children: cardContent })] }));
+        return (jsx(AtomixGlass, { ...glassProps, elasticity: 0, children: divElement }));
     }
-    return (jsx("div", { ref: ref, className: cardClasses, onClick: onClick, ...rest, style: { ...style }, children: cardContent }));
-});
+    return divElement;
+}));
 Card.displayName = 'Card';
 
 /**
@@ -9247,65 +9605,6 @@ function useDataTable({ data = [], columns = [], sortable = false, paginated = f
     };
 }
 
-/**
- * Spinner state and functionality
- * @param initialProps - Initial spinner properties
- * @returns Spinner state and methods
- */
-function useSpinner(initialProps) {
-    // Default spinner properties
-    const defaultProps = {
-        variant: 'primary',
-        size: 'md',
-        fullscreen: false,
-        ...initialProps,
-    };
-    /**
-     * Generate spinner class based on properties
-     * @param props - Spinner properties
-     * @returns Class string
-     */
-    const generateSpinnerClass = (props) => {
-        const { variant = defaultProps.variant, size = defaultProps.size, fullscreen = defaultProps.fullscreen, className = '', } = props;
-        const baseClass = 'c-spinner';
-        const variantClass = variant ? `${baseClass}--${variant}` : '';
-        const sizeClass = size !== 'md' ? `${baseClass}--${size}` : '';
-        const fullscreenClass = fullscreen ? `${baseClass}--fullscreen` : '';
-        return `${baseClass} ${variantClass} ${sizeClass} ${fullscreenClass} ${className}`.trim();
-    };
-    return {
-        defaultProps,
-        generateSpinnerClass,
-    };
-}
-
-const Spinner = ({ size = 'md', variant = 'primary', fullscreen = false, className = '', style, glass, }) => {
-    const { generateSpinnerClass } = useSpinner({
-        size,
-        variant,
-        fullscreen,
-    });
-    const spinnerClass = generateSpinnerClass({
-        size,
-        variant,
-        fullscreen,
-        className: `${className} ${glass ? 'c-spinner--glass' : ''}`.trim(),
-    });
-    const spinnerContent = (jsx("div", { className: spinnerClass, style: style, role: "status", children: jsx("span", { className: SPINNER.VISUALLY_HIDDEN, children: "Loading..." }) }));
-    if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 1,
-            cornerRadius: 999,
-            mode: 'shader',
-        };
-        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-        return jsx(AtomixGlass, { ...glassProps, children: spinnerContent });
-    }
-    return spinnerContent;
-};
-Spinner.displayName = 'Spinner';
-
 const DOTS = '...';
 const range = (start, end) => {
     const length = end - start + 1;
@@ -10875,9 +11174,35 @@ function useInput(initialProps) {
         const disabledClass = disabled ? INPUT.CLASSES.DISABLED : '';
         return `${INPUT.CLASSES.BASE} ${sizeClass} ${variantClass} ${textareaClass} ${validationClass} ${disabledClass} ${className}`.trim();
     };
+    /**
+     * Generate wrapper class based on properties
+     * @param props - Wrapper properties
+     * @returns Class string
+     */
+    const generateWrapperClass = (props) => {
+        const { className = '' } = props;
+        const { prefixIcon = false, suffixIcon = false, clearable = false, showCounter = false, showPasswordToggle = false, fullWidth = false, } = initialProps || {};
+        const classes = [INPUT.ELEMENTS.WRAPPER];
+        if (prefixIcon)
+            classes.push(INPUT.CLASSES.PREFIX_ICON);
+        if (suffixIcon || clearable || showPasswordToggle)
+            classes.push(INPUT.CLASSES.SUFFIX_ICON);
+        if (clearable)
+            classes.push(INPUT.CLASSES.CLEARABLE);
+        if (showCounter)
+            classes.push(INPUT.CLASSES.WITH_COUNTER);
+        if (showPasswordToggle)
+            classes.push(INPUT.CLASSES.PASSWORD_TOGGLE);
+        if (fullWidth)
+            classes.push(INPUT.CLASSES.FULL_WIDTH);
+        if (className)
+            classes.push(className);
+        return classes.filter(Boolean).join(' ');
+    };
     return {
         defaultProps,
         generateInputClass,
+        generateWrapperClass,
     };
 }
 
@@ -11555,67 +11880,115 @@ function useSideMenu(initialProps) {
     // Default side menu properties
     const defaultProps = {
         collapsible: true,
+        collapsibleDesktop: false,
+        defaultCollapsedDesktop: false,
         isOpen: false,
         ...initialProps,
     };
     // Local open state for when not controlled externally
-    const [isOpenState, setIsOpenState] = useState(defaultProps.isOpen || false);
+    const [isOpenState, setIsOpenState] = useState(defaultProps.defaultCollapsedDesktop !== undefined
+        ? !defaultProps.defaultCollapsedDesktop
+        : (defaultProps.isOpen || false));
     // Refs for managing responsive behavior
     const wrapperRef = useRef(null);
     const innerRef = useRef(null);
+    const sideMenuRef = useRef(null);
     // Update local state when external state changes
     useEffect(() => {
         if (typeof defaultProps.isOpen !== 'undefined') {
             setIsOpenState(defaultProps.isOpen);
         }
-    }, [defaultProps.isOpen]);
-    // Handle responsive behavior - auto-open on desktop, controlled on mobile
+        else if (defaultProps.defaultCollapsedDesktop !== undefined) {
+            setIsOpenState(!defaultProps.defaultCollapsedDesktop);
+        }
+    }, [defaultProps.isOpen, defaultProps.defaultCollapsedDesktop]);
+    // Set initial height on mount
+    useEffect(() => {
+        const isMobile = window.innerWidth < 768;
+        const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
+        const currentOpen = typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+        if (shouldCollapse && wrapperRef.current && innerRef.current) {
+            // Use setTimeout to ensure DOM is fully rendered
+            const timeoutId = setTimeout(() => {
+                if (wrapperRef.current && innerRef.current) {
+                    if (currentOpen) {
+                        wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+                    }
+                    else {
+                        wrapperRef.current.style.height = '0px';
+                    }
+                }
+            }, 0);
+            return () => clearTimeout(timeoutId);
+        }
+        else if (!shouldCollapse && wrapperRef.current) {
+            wrapperRef.current.style.height = 'auto';
+        }
+    }, []); // Only run on mount
+    // Handle responsive behavior - vertical collapse for both mobile and desktop
     useEffect(() => {
         const handleResize = () => {
             const isMobile = window.innerWidth < 768; // MD breakpoint
-            if (!isMobile && defaultProps.collapsible) {
-                // Auto-open on desktop
-                if (typeof defaultProps.onToggle === 'function') {
-                    defaultProps.onToggle(true);
-                }
-                else {
-                    setIsOpenState(true);
-                }
-                // Reset wrapper height on desktop
+            const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
+            if (!shouldCollapse) {
+                // Not collapsible - always show content
                 if (wrapperRef.current) {
                     wrapperRef.current.style.height = 'auto';
                 }
             }
-            else if (isMobile && wrapperRef.current && innerRef.current) {
-                // Set proper height for mobile animation
+            else if (wrapperRef.current && innerRef.current) {
+                // Set proper height for vertical animation (both mobile and desktop)
                 const currentOpen = typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
-                if (currentOpen) {
-                    wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
-                }
-                else {
-                    wrapperRef.current.style.height = '0px';
-                }
+                // Use requestAnimationFrame to ensure DOM is ready
+                requestAnimationFrame(() => {
+                    if (wrapperRef.current && innerRef.current) {
+                        if (currentOpen) {
+                            wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+                        }
+                        else {
+                            wrapperRef.current.style.height = '0px';
+                        }
+                    }
+                });
             }
         };
-        handleResize(); // Initial call
+        // Initial call with a small delay to ensure DOM is ready
+        const timeoutId = setTimeout(handleResize, 0);
         window.addEventListener('resize', handleResize);
         return () => {
+            clearTimeout(timeoutId);
             window.removeEventListener('resize', handleResize);
         };
-    }, [defaultProps.collapsible, defaultProps.isOpen, defaultProps.onToggle, isOpenState]);
-    // Update wrapper height when open state changes on mobile
+    }, [
+        defaultProps.collapsible,
+        defaultProps.collapsibleDesktop,
+        defaultProps.isOpen,
+        defaultProps.onToggle,
+        isOpenState,
+    ]);
+    // Update wrapper height when open state changes (both mobile and desktop)
     useEffect(() => {
         const isMobile = window.innerWidth < 768;
-        if (isMobile && wrapperRef.current && innerRef.current && defaultProps.collapsible) {
+        const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
+        if (shouldCollapse && wrapperRef.current && innerRef.current) {
             const currentOpen = typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
-            if (currentOpen) {
-                wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
-            }
-            else {
-                wrapperRef.current.style.height = '0px';
-            }
+            // Use requestAnimationFrame to ensure DOM is ready
+            requestAnimationFrame(() => {
+                if (wrapperRef.current && innerRef.current) {
+                    if (currentOpen) {
+                        wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+                    }
+                    else {
+                        wrapperRef.current.style.height = '0px';
+                    }
+                }
+            });
+        }
+        else if (!shouldCollapse && wrapperRef.current) {
+            // Not collapsible - always show content
+            wrapperRef.current.style.height = 'auto';
         }
-    }, [defaultProps.isOpen, isOpenState, defaultProps.collapsible]);
+    }, [defaultProps.isOpen, isOpenState, defaultProps.collapsible, defaultProps.collapsibleDesktop]);
     /**
      * Generate side menu class based on properties
      * @param props - Side menu properties
@@ -11634,7 +12007,7 @@ function useSideMenu(initialProps) {
         return SIDE_MENU.CLASSES.WRAPPER;
     };
     /**
-     * Handle toggle click
+     * Handle toggle click (mobile)
      */
     const handleToggle = () => {
         if (defaultProps.disabled)
@@ -11649,6 +12022,12 @@ function useSideMenu(initialProps) {
             setIsOpenState(newState);
         }
     };
+    /**
+     * Handle desktop collapse toggle (uses same toggle as mobile)
+     */
+    const handleDesktopCollapse = () => {
+        handleToggle();
+    };
     /**
      * Get current open state
      * @returns Current open state
@@ -11661,9 +12040,11 @@ function useSideMenu(initialProps) {
         isOpenState: getCurrentOpenState(),
         wrapperRef,
         innerRef,
+        sideMenuRef,
         generateSideMenuClass,
         generateWrapperClass,
         handleToggle,
+        handleDesktopCollapse,
         getCurrentOpenState,
     };
 }
@@ -14383,50 +14764,27 @@ const Navbar = forwardRef(({ brand, children, variant, position = 'static', cont
 Navbar.displayName = 'Navbar';
 
 /**
- * SideMenu component provides a collapsible navigation menu with title and menu items.
- * Automatically collapses on mobile devices and can be toggled via a header button.
+ * SideMenuList component provides a container for side menu items.
  *
  * @example
  * ```tsx
- * <SideMenu title="Navigation">
- *   <SideMenuList>
- *     <SideMenuItem href="/" active>Home</SideMenuItem>
- *     <SideMenuItem href="/about">About</SideMenuItem>
- *     <SideMenuItem href="/contact">Contact</SideMenuItem>
- *   </SideMenuList>
- * </SideMenu>
+ * <SideMenuList>
+ *   <SideMenuItem href="/" active>Home</SideMenuItem>
+ *   <SideMenuItem href="/about">About</SideMenuItem>
+ *   <SideMenuItem href="/contact">Contact</SideMenuItem>
+ * </SideMenuList>
  * ```
  */
-const SideMenu = forwardRef(({ title, children, isOpen, onToggle, collapsible = true, className = '', style, disabled = false, toggleIcon, id, glass, }, ref) => {
-    const { isOpenState, wrapperRef, innerRef, generateSideMenuClass, generateWrapperClass, handleToggle, } = useSideMenu({
-        isOpen,
-        onToggle,
-        collapsible,
-        disabled,
-    });
-    const sideMenuClass = generateSideMenuClass({ className, isOpen: isOpenState });
-    const wrapperClass = generateWrapperClass();
-    // Default toggle icon using Atomix Icon component
-    const defaultToggleIcon = jsx(Icon, { name: "CaretRight", size: "xs" });
-    const sideMenuContent = (jsxs(Fragment, { children: [title && collapsible && (jsxs("div", { className: "c-side-menu__toggler", onClick: handleToggle, role: "button", tabIndex: disabled ? -1 : 0, "aria-expanded": isOpenState, "aria-controls": id ? `${id}-content` : undefined, "aria-disabled": disabled, onKeyDown: e => {
-                    if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
-                        e.preventDefault();
-                        handleToggle();
-                    }
-                }, children: [jsx("span", { className: "c-side-menu__title", children: title }), jsx("span", { className: "c-side-menu__toggler-icon", children: toggleIcon || defaultToggleIcon })] })), title && !collapsible && jsx("h3", { className: "c-side-menu__title", children: title }), jsx("div", { ref: wrapperRef, className: wrapperClass, id: id ? `${id}-content` : undefined, "aria-hidden": collapsible ? !isOpenState : false, children: jsx("div", { ref: innerRef, className: "c-side-menu__inner", children: children }) })] }));
-    if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 70,
-            blurAmount: 2,
-            cornerRadius: 12,
-            mode: 'shader',
-        };
-        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-        return (jsx(AtomixGlass, { ...glassProps, children: jsx("div", { ref: ref, className: sideMenuClass + ' c-side-menu--glass', id: id, style: style, children: sideMenuContent }) }));
-    }
-    return (jsx("div", { ref: ref, className: sideMenuClass, id: id, style: style, children: sideMenuContent }));
+const SideMenuList = forwardRef(({ children, className = '' }, ref) => {
+    const listClass = `c-side-menu__list ${className}`.trim();
+    return (jsx("ul", { ref: ref, className: listClass, role: "list", children: React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child)) {
+                return (jsx("li", { className: "c-side-menu__item", role: "listitem", children: child }, index));
+            }
+            return child;
+        }) }));
 });
-SideMenu.displayName = 'SideMenu';
+SideMenuList.displayName = 'SideMenuList';
 
 /**
  * SideMenuItem component represents a single navigation item in a side menu.
@@ -14481,27 +14839,199 @@ const SideMenuItem = forwardRef(({ children, href, onClick, active = false, disa
 SideMenuItem.displayName = 'SideMenuItem';
 
 /**
- * SideMenuList component provides a container for side menu items.
+ * SideMenu component provides a collapsible navigation menu with title and menu items.
+ * Automatically collapses on mobile devices and can be toggled via a header button.
  *
  * @example
  * ```tsx
- * <SideMenuList>
- *   <SideMenuItem href="/" active>Home</SideMenuItem>
- *   <SideMenuItem href="/about">About</SideMenuItem>
- *   <SideMenuItem href="/contact">Contact</SideMenuItem>
- * </SideMenuList>
+ * <SideMenu title="Navigation">
+ *   <SideMenuList>
+ *     <SideMenuItem href="/" active>Home</SideMenuItem>
+ *     <SideMenuItem href="/about">About</SideMenuItem>
+ *     <SideMenuItem href="/contact">Contact</SideMenuItem>
+ *   </SideMenuList>
+ * </SideMenu>
  * ```
  */
-const SideMenuList = forwardRef(({ children, className = '' }, ref) => {
-    const listClass = `c-side-menu__list ${className}`.trim();
-    return (jsx("ul", { ref: ref, className: listClass, role: "list", children: React.Children.map(children, (child, index) => {
-            if (React.isValidElement(child)) {
-                return (jsx("li", { className: "c-side-menu__item", role: "listitem", children: child }, index));
+const SideMenu = forwardRef(({ title, children, menuItems = [], isOpen, onToggle, collapsible = true, collapsibleDesktop = false, defaultCollapsedDesktop = false, className = '', style, disabled = false, toggleIcon, id, glass, }, ref) => {
+    const { isOpenState, wrapperRef, innerRef, sideMenuRef, generateSideMenuClass, generateWrapperClass, handleToggle, handleDesktopCollapse, } = useSideMenu({
+        isOpen,
+        onToggle,
+        collapsible,
+        collapsibleDesktop,
+        defaultCollapsedDesktop,
+        disabled,
+    });
+    const MOBILE_BREAKPOINT = 768;
+    // Track mobile state
+    const [isMobileState, setIsMobileState] = useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.innerWidth < MOBILE_BREAKPOINT;
+    });
+    // Track open state for nested menu items
+    const [nestedItemStates, setNestedItemStates] = useState(() => {
+        const initialState = {};
+        menuItems?.forEach((_, index) => {
+            initialState[index] = true; // Default to open
+        });
+        return initialState;
+    });
+    // Refs for nested menu item wrappers
+    const nestedWrapperRefs = useRef({});
+    const nestedInnerRefs = useRef({});
+    const menuItemsLengthRef = useRef(menuItems?.length ?? 0);
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobileState(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    // Update nested item states when menuItems change
+    useEffect(() => {
+        const currentLength = menuItems?.length ?? 0;
+        // Only update if the length actually changed to prevent infinite loops
+        if (menuItemsLengthRef.current === currentLength)
+            return;
+        menuItemsLengthRef.current = currentLength;
+        setNestedItemStates(prevStates => {
+            const newStates = {};
+            menuItems?.forEach((_, index) => {
+                newStates[index] = prevStates[index] ?? true;
+            });
+            return newStates;
+        });
+        // Clean up refs for removed items
+        Object.keys(nestedWrapperRefs.current).forEach(key => {
+            const index = Number(key);
+            if (index >= currentLength) {
+                delete nestedWrapperRefs.current[index];
+                delete nestedInnerRefs.current[index];
             }
-            return child;
-        }) }));
+        });
+    }, [menuItems?.length]);
+    // Set initial heights for nested wrappers on mount and when menuItems change
+    useEffect(() => {
+        if (!menuItems?.length)
+            return;
+        const timeoutId = setTimeout(() => {
+            menuItems.forEach((_, index) => {
+                const wrapper = nestedWrapperRefs.current[index];
+                const inner = nestedInnerRefs.current[index];
+                const isOpen = nestedItemStates[index] ?? true;
+                if (wrapper && inner) {
+                    if (isOpen) {
+                        wrapper.style.height = `${inner.scrollHeight}px`;
+                    }
+                    else {
+                        wrapper.style.height = '0px';
+                    }
+                }
+            });
+        }, 0);
+        return () => clearTimeout(timeoutId);
+        // Only run when menuItems change, nestedItemStates is read but not in deps to avoid loops
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuItems?.length]);
+    // Update nested wrapper heights when state changes
+    useEffect(() => {
+        if (!menuItems?.length)
+            return;
+        const frameIds = [];
+        Object.keys(nestedItemStates).forEach(key => {
+            const index = Number(key);
+            const wrapper = nestedWrapperRefs.current[index];
+            const inner = nestedInnerRefs.current[index];
+            const isOpen = nestedItemStates[index];
+            if (wrapper && inner) {
+                const frameId = requestAnimationFrame(() => {
+                    if (wrapper && inner) {
+                        if (isOpen) {
+                            wrapper.style.height = `${inner.scrollHeight}px`;
+                        }
+                        else {
+                            wrapper.style.height = '0px';
+                        }
+                    }
+                });
+                frameIds.push(frameId);
+            }
+        });
+        return () => {
+            frameIds.forEach(id => cancelAnimationFrame(id));
+        };
+    }, [nestedItemStates, menuItems?.length]);
+    // Combine refs
+    const combinedRef = (node) => {
+        sideMenuRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    };
+    const sideMenuClass = generateSideMenuClass({
+        className,
+        isOpen: isOpenState,
+    });
+    const wrapperClass = generateWrapperClass();
+    // Default toggle icon using Atomix Icon component
+    const defaultToggleIcon = jsx(Icon, { name: "CaretRight", size: "xs" });
+    // Determine if we should show toggler (mobile or desktop with collapsibleDesktop)
+    const shouldShowToggler = (isMobileState && collapsible) || (!isMobileState && collapsibleDesktop);
+    // Only show separate title if toggler is NOT shown (toggler already contains the title)
+    const shouldShowTitle = title && !shouldShowToggler;
+    const sideMenuContent = (jsxs(Fragment, { children: [title && shouldShowToggler && (jsxs("div", { className: "c-side-menu__toggler", onClick: handleToggle, role: "button", tabIndex: disabled ? -1 : 0, "aria-expanded": isOpenState, "aria-controls": id ? `${id}-content` : undefined, "aria-disabled": disabled, onKeyDown: e => {
+                    if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+                        e.preventDefault();
+                        handleToggle();
+                    }
+                }, children: [jsx("span", { className: "c-side-menu__title", children: title }), jsx("span", { className: "c-side-menu__toggler-icon", children: toggleIcon || defaultToggleIcon })] })), shouldShowTitle && jsx("h3", { className: "c-side-menu__title", children: title }), jsx("div", { ref: wrapperRef, className: wrapperClass, id: id ? `${id}-content` : undefined, "aria-hidden": shouldShowToggler ? !isOpenState : false, children: jsxs("div", { ref: innerRef, className: "c-side-menu__inner", children: [children && children, menuItems?.map((item, index) => {
+                            const isNestedItemOpen = nestedItemStates[index] ?? true;
+                            const hasItems = item.items && item.items.length > 0;
+                            const canToggle = hasItems && !disabled;
+                            const handleNestedToggle = () => {
+                                if (!canToggle)
+                                    return;
+                                setNestedItemStates(prev => ({
+                                    ...prev,
+                                    [index]: !prev[index],
+                                }));
+                            };
+                            return (jsxs("div", { className: "c-side-menu__item", children: [item.title && (jsxs("div", { className: [
+                                            'c-side-menu__toggler',
+                                            canToggle && 'c-side-menu__toggler--nested',
+                                            isNestedItemOpen && 'is-open',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' '), onClick: canToggle ? handleNestedToggle : undefined, role: canToggle ? 'button' : undefined, tabIndex: canToggle && !disabled ? 0 : undefined, "aria-expanded": canToggle ? isNestedItemOpen : undefined, "aria-disabled": disabled, onKeyDown: canToggle
+                                            ? e => {
+                                                if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+                                                    e.preventDefault();
+                                                    handleNestedToggle();
+                                                }
+                                            }
+                                            : undefined, children: [jsx("span", { className: "c-side-menu__title", children: item.title }), canToggle && (jsx("span", { className: "c-side-menu__toggler-icon", children: item.toggleIcon || jsx(Icon, { name: "CaretRight", size: "xs" }) }))] })), hasItems && (jsx("div", { ref: node => {
+                                            nestedWrapperRefs.current[index] = node;
+                                        }, className: "c-side-menu__nested-wrapper", children: jsx("div", { ref: node => {
+                                                nestedInnerRefs.current[index] = node;
+                                            }, className: "c-side-menu__nested-inner", children: jsx(SideMenuList, { children: item.items?.map((subItem, subIndex) => (jsx(SideMenuItem, { href: subItem.href, onClick: subItem.onClick, active: subItem.active, disabled: subItem.disabled, icon: subItem.icon, children: subItem.title }, subIndex))) }) }) }))] }, index));
+                        })] }) })] }));
+    if (glass) {
+        const defaultGlassProps = {
+            displacementScale: 70,
+            blurAmount: 2,
+            cornerRadius: 12,
+            mode: 'shader',
+        };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        return (jsx(AtomixGlass, { ...glassProps, children: jsx("div", { ref: combinedRef, className: sideMenuClass + ' c-side-menu--glass', id: id, style: style, children: sideMenuContent }) }));
+    }
+    return (jsx("div", { ref: combinedRef, className: sideMenuClass, id: id, style: style, children: sideMenuContent }));
 });
-SideMenuList.displayName = 'SideMenuList';
+SideMenu.displayName = 'SideMenu';
 
 const Menu = forwardRef(({ children, className = '', style, disabled = false }, ref) => {
     return (jsx("div", { ref: ref, className: `c-menu ${className}`, style: style, children: jsx("ul", { className: "c-menu__list", role: "menu", children: React.Children.map(children, child => {
@@ -16786,6 +17316,7 @@ Toggle.displayName = 'Toggle';
 const Tooltip = ({ content, children, position = TOOLTIP.DEFAULTS.POSITION, trigger = TOOLTIP.DEFAULTS.TRIGGER, className = '', style, delay = TOOLTIP.DEFAULTS.DELAY, offset = TOOLTIP.DEFAULTS.OFFSET, glass, }) => {
     const [isVisible, setIsVisible] = useState(false);
     const timeoutRef = useRef(null);
+    const tooltipId = React.useId();
     const showTooltip = () => {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
@@ -16814,49 +17345,50 @@ const Tooltip = ({ content, children, position = TOOLTIP.DEFAULTS.POSITION, trig
         }
     };
     const getTooltipPositionClasses = () => {
-        switch (position) {
-            case 'top':
-                return 'c-tooltip--top';
-            case 'bottom':
-                return 'c-tooltip--bottom';
-            case 'left':
-                return 'c-tooltip--left';
-            case 'right':
-                return 'c-tooltip--right';
-            case 'top-left':
-                return 'c-tooltip--top-left';
-            case 'top-right':
-                return 'c-tooltip--top-right';
-            case 'bottom-left':
-                return 'c-tooltip--bottom-left';
-            case 'bottom-right':
-                return 'c-tooltip--bottom-right';
-            default:
-                return 'c-tooltip--top';
-        }
+        const positionMap = {
+            top: 'c-tooltip--top',
+            bottom: 'c-tooltip--bottom',
+            left: 'c-tooltip--left',
+            right: 'c-tooltip--right',
+            'top-left': 'c-tooltip--top-left',
+            'top-right': 'c-tooltip--top-right',
+            'bottom-left': 'c-tooltip--bottom-left',
+            'bottom-right': 'c-tooltip--bottom-right',
+        };
+        return positionMap[position] || 'c-tooltip--top';
+    };
+    const wrapperProps = {};
+    const triggerProps = {
+        'aria-describedby': isVisible ? tooltipId : undefined,
     };
-    const triggerProps = {};
     if (trigger === 'hover') {
-        triggerProps.onMouseEnter = showTooltip;
-        triggerProps.onMouseLeave = hideTooltip;
+        wrapperProps.onMouseEnter = showTooltip;
+        wrapperProps.onMouseLeave = hideTooltip;
+        triggerProps.onFocus = showTooltip;
+        triggerProps.onBlur = hideTooltip;
     }
     else if (trigger === 'click') {
         triggerProps.onClick = toggleTooltip;
+        // For click trigger, we might want to handle keyboard activation too, but div isn't focusable by default.
+        // Ideally the child should be a button.
     }
-    return (jsxs("div", { className: "u-position-relative u-d-inline-block", style: style, children: [jsx("div", { className: `${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`, ...triggerProps, children: children }), isVisible && (jsx("div", { className: `c-tooltip ${TOOLTIP.SELECTORS.TOOLTIP.substring(1)} ${getTooltipPositionClasses()} ${glass ? 'c-tooltip--glass' : ''}`, "data-tooltip-position": position, "data-tooltip-trigger": trigger, children: glass ? (
-                // Default glass settings for tooltips
-                (() => {
-                    const defaultGlassProps = {
-                        displacementScale: 40,
-                        blurAmount: 1,
-                        saturation: 160,
-                        aberrationIntensity: 0.3,
-                        cornerRadius: 6,
-                        mode: 'shader',
-                    };
-                    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-                    return (jsx(AtomixGlass, { ...glassProps, children: jsxs("div", { className: `c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)} ${isVisible && 'is-active'}`, children: [jsx("span", { className: TOOLTIP.SELECTORS.ARROW.substring(1) }), content] }) }));
-                })()) : (jsxs("div", { className: `c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)} ${isVisible && 'is-active'}`, children: [jsx("span", { className: TOOLTIP.SELECTORS.ARROW.substring(1) }), content] })) }))] }));
+    const renderContent = () => {
+        const contentElement = (jsxs("div", { className: `c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)} ${isVisible && 'is-active'}`, children: [jsx("span", { className: TOOLTIP.SELECTORS.ARROW.substring(1) }), content] }));
+        if (glass) {
+            const defaultGlassProps = {
+                displacementScale: 40,
+                blurAmount: 1,
+                saturation: 160,
+                aberrationIntensity: 0.3,
+                cornerRadius: 6,
+                mode: 'shader',
+            };
+            const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+            return jsx(AtomixGlass, { ...glassProps, children: contentElement });
+        }
+        return contentElement;
+    };
+    return (jsxs("div", { className: "u-position-relative u-d-inline-block", style: style, ...wrapperProps, children: [jsx("div", { className: `${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`, ...triggerProps, children: children }), isVisible && (jsx("div", { id: tooltipId, role: "tooltip", className: `c-tooltip ${TOOLTIP.SELECTORS.TOOLTIP.substring(1)} ${getTooltipPositionClasses()} ${glass ? 'c-tooltip--glass' : ''}`, "data-tooltip-position": position, "data-tooltip-trigger": trigger, style: { '--atomix-tooltip-offset': `${offset}px` }, children: renderContent() }))] }));
 };
 Tooltip.displayName = 'Tooltip';
 
@@ -17866,12 +18398,1010 @@ const constantsImport = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.definePro
     sliderConstants
 }, Symbol.toStringTag, { value: 'Module' }));
 
+/**
+ * Theme Manager Utility Functions
+ *
+ * Helper functions for theme operations including CSS loading, DOM manipulation,
+ * and theme validation.
+ */
+/**
+ * Check if code is running in a browser environment
+ */
+const isBrowser = () => {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+};
+/**
+ * Check if code is running on the server (SSR)
+ */
+const isServer = () => {
+    return !isBrowser();
+};
+/**
+ * Generate a unique ID for theme link elements
+ */
+const getThemeLinkId = (themeName) => {
+    return `atomix-theme-${themeName}`;
+};
+/**
+ * Build the CSS file path for a theme
+ *
+ * @param themeName - Name of the theme
+ * @param basePath - Base path for theme files
+ * @param useMinified - Whether to use minified CSS
+ * @param cdnPath - Optional CDN path
+ * @returns Full path to the theme CSS file
+ */
+const buildThemePath = (themeName, basePath = '/themes', useMinified = false, cdnPath = null) => {
+    // Validate theme name to prevent path injection
+    if (!isValidThemeName(themeName)) {
+        throw new Error(`Invalid theme name: "${themeName}". Theme names must be lowercase alphanumeric with hyphens.`);
+    }
+    const extension = useMinified ? '.min.css' : '.css';
+    const fileName = `${themeName}${extension}`;
+    if (cdnPath) {
+        // Validate CDN path doesn't contain dangerous characters
+        const cleanCdnPath = cdnPath.replace(/[<>"']/g, '');
+        return `${cleanCdnPath}/${fileName}`;
+    }
+    // Ensure basePath doesn't end with slash and fileName doesn't start with slash
+    // Also sanitize basePath to prevent path injection
+    const cleanBasePath = basePath.replace(/\/$/, '').replace(/[<>"']/g, '');
+    const cleanFileName = fileName.replace(/^\//, '');
+    return `${cleanBasePath}/${cleanFileName}`;
+};
+/**
+ * Load theme CSS file dynamically
+ *
+ * @param themeName - Name of the theme to load
+ * @param basePath - Base path for theme files
+ * @param useMinified - Whether to use minified CSS
+ * @param cdnPath - Optional CDN path
+ * @returns Promise that resolves when CSS is loaded
+ */
+const loadThemeCSS = (themeName, basePath = '/themes', useMinified = false, cdnPath = null) => {
+    if (isServer()) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve, reject) => {
+        const linkId = getThemeLinkId(themeName);
+        // Check if theme is already loaded
+        const existingLink = document.getElementById(linkId);
+        if (existingLink) {
+            resolve();
+            return;
+        }
+        // Create link element
+        const link = document.createElement('link');
+        link.id = linkId;
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href = buildThemePath(themeName, basePath, useMinified, cdnPath);
+        // Add data attribute for tracking
+        link.setAttribute('data-atomix-theme', themeName);
+        // Handle load success
+        link.onload = () => {
+            resolve();
+        };
+        // Handle load error
+        link.onerror = () => {
+            // Remove failed link element
+            link.remove();
+            reject(new Error(`Failed to load theme: ${themeName}`));
+        };
+        // Append to head
+        document.head.appendChild(link);
+    });
+};
+/**
+ * Remove theme CSS from the DOM
+ *
+ * @param themeName - Name of the theme to remove
+ */
+const removeThemeCSS = (themeName) => {
+    if (isServer()) {
+        return;
+    }
+    const linkId = getThemeLinkId(themeName);
+    const link = document.getElementById(linkId);
+    if (link) {
+        link.remove();
+    }
+};
+/**
+ * Remove all theme CSS files from the DOM
+ */
+const removeAllThemeCSS = () => {
+    if (isServer()) {
+        return;
+    }
+    const themeLinks = document.querySelectorAll('link[data-atomix-theme]');
+    themeLinks.forEach(link => link.remove());
+};
+/**
+ * Apply theme data attributes to the document
+ *
+ * @param themeName - Name of the theme
+ * @param dataAttribute - Data attribute name (default: 'data-theme')
+ */
+const applyThemeAttributes = (themeName, dataAttribute = 'data-theme') => {
+    if (isServer()) {
+        return;
+    }
+    // Set data attribute on body
+    document.body.setAttribute(dataAttribute, themeName);
+    // Also set on documentElement for broader compatibility
+    document.documentElement.setAttribute(dataAttribute, themeName);
+};
+/**
+ * Remove theme data attributes from the document
+ *
+ * @param dataAttribute - Data attribute name (default: 'data-theme')
+ */
+const removeThemeAttributes = (dataAttribute = 'data-theme') => {
+    if (isServer()) {
+        return;
+    }
+    document.body.removeAttribute(dataAttribute);
+    document.documentElement.removeAttribute(dataAttribute);
+};
+/**
+ * Get the current theme from data attributes
+ *
+ * @param dataAttribute - Data attribute name (default: 'data-theme')
+ * @returns Current theme name or null
+ */
+const getCurrentThemeFromDOM = (dataAttribute = 'data-theme') => {
+    if (isServer()) {
+        return null;
+    }
+    return document.body.getAttribute(dataAttribute) ||
+        document.documentElement.getAttribute(dataAttribute);
+};
+/**
+ * Detect system theme preference
+ *
+ * @returns 'dark' if system prefers dark mode, 'light' otherwise
+ */
+const getSystemTheme = () => {
+    if (isServer()) {
+        return 'light';
+    }
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+    }
+    return 'light';
+};
+/**
+ * Check if a theme is currently loaded in the DOM
+ *
+ * @param themeName - Name of the theme to check
+ * @returns True if theme CSS is loaded
+ */
+const isThemeLoaded = (themeName) => {
+    if (isServer()) {
+        return false;
+    }
+    const linkId = getThemeLinkId(themeName);
+    return document.getElementById(linkId) !== null;
+};
+/**
+ * Validate theme metadata
+ *
+ * @param metadata - Theme metadata to validate
+ * @returns Validation result with errors and warnings
+ */
+const validateThemeMetadata = (metadata) => {
+    const errors = [];
+    const warnings = [];
+    if (!metadata || typeof metadata !== 'object') {
+        errors.push('Theme metadata must be an object');
+        return { valid: false, errors, warnings };
+    }
+    const theme = metadata;
+    // Required fields
+    if (!theme.name || typeof theme.name !== 'string') {
+        errors.push('Theme must have a valid name');
+    }
+    // Optional but recommended fields
+    if (!theme.description) {
+        warnings.push('Theme should have a description');
+    }
+    if (!theme.version) {
+        warnings.push('Theme should have a version');
+    }
+    if (!theme.author) {
+        warnings.push('Theme should have an author');
+    }
+    // Validate status if provided
+    if (theme.status) {
+        const validStatuses = ['stable', 'beta', 'experimental', 'deprecated'];
+        if (!validStatuses.includes(theme.status)) {
+            errors.push(`Invalid status: ${theme.status}. Must be one of: ${validStatuses.join(', ')}`);
+        }
+    }
+    // Validate color if provided
+    if (theme.color && typeof theme.color !== 'string') {
+        errors.push('Theme color must be a string');
+    }
+    // Validate a11y if provided
+    if (theme.a11y) {
+        if (typeof theme.a11y !== 'object') {
+            errors.push('Theme a11y must be an object');
+        }
+        else {
+            if (theme.a11y.contrastTarget !== undefined) {
+                if (typeof theme.a11y.contrastTarget !== 'number' || theme.a11y.contrastTarget < 0) {
+                    errors.push('Theme a11y.contrastTarget must be a positive number');
+                }
+            }
+            if (theme.a11y.modes !== undefined) {
+                if (!Array.isArray(theme.a11y.modes)) {
+                    errors.push('Theme a11y.modes must be an array');
+                }
+            }
+        }
+    }
+    return {
+        valid: errors.length === 0,
+        errors,
+        warnings,
+    };
+};
+/**
+ * Validate theme name format
+ *
+ * @param themeName - Theme name to validate
+ * @returns True if valid
+ */
+const isValidThemeName = (themeName) => {
+    if (!themeName || typeof themeName !== 'string') {
+        return false;
+    }
+    // Theme names should be lowercase alphanumeric with hyphens
+    const validPattern = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+    return validPattern.test(themeName);
+};
+/**
+ * Create a storage adapter for localStorage
+ */
+const createLocalStorageAdapter = () => {
+    return {
+        getItem: (key) => {
+            if (isServer())
+                return null;
+            try {
+                return localStorage.getItem(key);
+            }
+            catch {
+                return null;
+            }
+        },
+        setItem: (key, value) => {
+            if (isServer())
+                return;
+            try {
+                localStorage.setItem(key, value);
+            }
+            catch {
+                // Silently fail if localStorage is not available
+            }
+        },
+        removeItem: (key) => {
+            if (isServer())
+                return;
+            try {
+                localStorage.removeItem(key);
+            }
+            catch {
+                // Silently fail
+            }
+        },
+        isAvailable: () => {
+            if (isServer())
+                return false;
+            try {
+                const test = '__atomix_storage_test__';
+                localStorage.setItem(test, test);
+                localStorage.removeItem(test);
+                return true;
+            }
+            catch {
+                return false;
+            }
+        },
+    };
+};
+/**
+ * Debounce function for performance optimization
+ *
+ * @param func - Function to debounce
+ * @param wait - Wait time in milliseconds
+ * @returns Debounced function
+ */
+const debounce = (func, wait) => {
+    let timeout = null;
+    return function executedFunction(...args) {
+        const later = () => {
+            timeout = null;
+            func(...args);
+        };
+        if (timeout !== null) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(later, wait);
+    };
+};
+
+/**
+ * Theme Manager
+ *
+ * Core theme management class for the Atomix Design System.
+ * Handles theme loading, switching, persistence, and events.
+ */
+/**
+ * Default configuration values
+ */
+const DEFAULT_CONFIG = {
+    basePath: '/themes',
+    cdnPath: null,
+    lazy: true,
+    storageKey: 'atomix-theme',
+    dataAttribute: 'data-theme',
+    enablePersistence: true,
+    useMinified: false,
+    preload: [],
+};
+/**
+ * ThemeManager class
+ *
+ * Manages theme loading, switching, and persistence for Atomix Design System.
+ *
+ * @example
+ * ```typescript
+ * const themeManager = new ThemeManager({
+ *   themes: themesConfig.metadata,
+ *   defaultTheme: 'shaj-default',
+ * });
+ *
+ * await themeManager.setTheme('flashtrade');
+ * ```
+ */
+class ThemeManager {
+    /**
+     * Create a new ThemeManager instance
+     *
+     * @param config - Theme manager configuration
+     */
+    constructor(config) {
+        this.currentTheme = null;
+        this.loadedThemes = new Set();
+        this.loadingThemes = new Map();
+        this.eventListeners = {
+            themeChange: [],
+            themeLoad: [],
+            themeError: [],
+        };
+        this.initialized = false;
+        // Validate required config
+        if (!config.themes || Object.keys(config.themes).length === 0) {
+            throw new Error('ThemeManager: themes configuration is required');
+        }
+        // Merge with defaults
+        this.config = {
+            ...DEFAULT_CONFIG,
+            ...config,
+            themes: config.themes,
+            defaultTheme: config.defaultTheme || Object.keys(config.themes)[0],
+        };
+        // Validate default theme exists
+        if (!this.config.themes[this.config.defaultTheme]) {
+            throw new Error(`ThemeManager: default theme "${this.config.defaultTheme}" not found in themes configuration`);
+        }
+        // Initialize storage adapter
+        this.storageAdapter = createLocalStorageAdapter();
+        // Initialize theme manager
+        this.initialize();
+    }
+    /**
+     * Initialize the theme manager
+     */
+    initialize() {
+        if (this.initialized || isServer()) {
+            return;
+        }
+        // Try to load theme from storage
+        let initialTheme = this.config.defaultTheme;
+        if (this.config.enablePersistence && this.storageAdapter.isAvailable()) {
+            const storedTheme = this.storageAdapter.getItem(this.config.storageKey);
+            if (storedTheme && this.config.themes[storedTheme]) {
+                initialTheme = storedTheme;
+            }
+        }
+        // Check if theme is already set in DOM
+        const domTheme = getCurrentThemeFromDOM(this.config.dataAttribute);
+        if (domTheme && this.config.themes[domTheme]) {
+            initialTheme = domTheme;
+        }
+        // Set initial theme
+        this.currentTheme = initialTheme;
+        // Preload themes if configured
+        if (this.config.preload && this.config.preload.length > 0) {
+            this.config.preload.forEach(themeName => {
+                if (this.config.themes[themeName]) {
+                    this.preloadTheme(themeName).catch(error => {
+                        console.warn(`Failed to preload theme "${themeName}":`, error);
+                    });
+                }
+            });
+        }
+        this.initialized = true;
+    }
+    /**
+     * Get the current theme name
+     *
+     * @returns Current theme name
+     */
+    getTheme() {
+        return this.currentTheme || this.config.defaultTheme;
+    }
+    /**
+     * Get all available themes
+     *
+     * @returns Array of theme metadata
+     */
+    getAvailableThemes() {
+        return Object.entries(this.config.themes).map(([key, metadata]) => ({
+            ...metadata,
+            class: key,
+        }));
+    }
+    /**
+     * Get metadata for a specific theme
+     *
+     * @param themeName - Name of the theme
+     * @returns Theme metadata or null if not found
+     */
+    getThemeMetadata(themeName) {
+        const metadata = this.config.themes[themeName];
+        return metadata ? { ...metadata, class: themeName } : null;
+    }
+    /**
+     * Check if a theme is currently loaded
+     *
+     * @param themeName - Name of the theme to check
+     * @returns True if theme is loaded
+     */
+    isThemeLoaded(themeName) {
+        if (isServer()) {
+            return false;
+        }
+        return this.loadedThemes.has(themeName) || isThemeLoaded(themeName);
+    }
+    /**
+     * Validate a theme name
+     *
+     * @param themeName - Theme name to validate
+     * @returns True if theme exists and is valid
+     */
+    validateTheme(themeName) {
+        if (!isValidThemeName(themeName)) {
+            return false;
+        }
+        const metadata = this.config.themes[themeName];
+        if (!metadata) {
+            return false;
+        }
+        const validation = validateThemeMetadata(metadata);
+        return validation.valid;
+    }
+    /**
+     * Preload a theme without applying it
+     *
+     * @param themeName - Name of the theme to preload
+     * @returns Promise that resolves when theme is loaded
+     */
+    async preloadTheme(themeName) {
+        if (isServer()) {
+            return Promise.resolve();
+        }
+        // Validate theme name format to prevent path injection
+        if (!isValidThemeName(themeName)) {
+            const error = new Error(`Invalid theme name: "${themeName}". Theme names must be lowercase alphanumeric with hyphens.`);
+            this.emitError(error, themeName);
+            throw error;
+        }
+        // Check if theme exists
+        if (!this.config.themes[themeName]) {
+            const error = new Error(`Theme "${themeName}" not found`);
+            this.emitError(error, themeName);
+            throw error;
+        }
+        // Check if already loaded
+        if (this.isThemeLoaded(themeName)) {
+            return Promise.resolve();
+        }
+        // Check if already loading
+        if (this.loadingThemes.has(themeName)) {
+            return this.loadingThemes.get(themeName);
+        }
+        // Load theme CSS
+        const loadPromise = loadThemeCSS(themeName, this.config.basePath, this.config.useMinified, this.config.cdnPath)
+            .then(() => {
+            this.loadedThemes.add(themeName);
+            this.loadingThemes.delete(themeName);
+            this.emitLoad(themeName);
+        })
+            .catch(error => {
+            this.loadingThemes.delete(themeName);
+            this.emitError(error, themeName);
+            throw error;
+        });
+        this.loadingThemes.set(themeName, loadPromise);
+        return loadPromise;
+    }
+    /**
+     * Set the current theme
+     *
+     * @param themeName - Name of the theme to set
+     * @param options - Load options
+     * @returns Promise that resolves when theme is applied
+     */
+    async setTheme(themeName, options = {}) {
+        if (isServer()) {
+            return Promise.resolve();
+        }
+        // Validate theme name format to prevent path injection
+        if (!isValidThemeName(themeName)) {
+            const error = new Error(`Invalid theme name: "${themeName}". Theme names must be lowercase alphanumeric with hyphens.`);
+            this.emitError(error, themeName);
+            throw error;
+        }
+        // Validate theme exists
+        if (!this.config.themes[themeName]) {
+            const error = new Error(`Theme "${themeName}" not found`);
+            this.emitError(error, themeName);
+            throw error;
+        }
+        // Check if already current theme
+        if (themeName === this.currentTheme && !options.force) {
+            return Promise.resolve();
+        }
+        const previousTheme = this.currentTheme;
+        try {
+            // Load theme CSS if not already loaded
+            if (!this.isThemeLoaded(themeName) || options.force) {
+                await this.preloadTheme(themeName);
+            }
+            // Remove previous theme CSS if requested
+            if (options.removePrevious && previousTheme && previousTheme !== themeName) {
+                removeThemeCSS(previousTheme);
+                this.loadedThemes.delete(previousTheme);
+            }
+            // Apply theme attributes
+            applyThemeAttributes(themeName, this.config.dataAttribute);
+            // Update current theme
+            this.currentTheme = themeName;
+            // Persist to storage
+            if (this.config.enablePersistence && this.storageAdapter.isAvailable()) {
+                this.storageAdapter.setItem(this.config.storageKey, themeName);
+            }
+            // Emit theme change event
+            this.emitThemeChange(previousTheme, themeName);
+            // Call config callback
+            if (this.config.onThemeChange) {
+                this.config.onThemeChange(themeName);
+            }
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            this.emitError(err, themeName);
+            if (this.config.onError) {
+                this.config.onError(err, themeName);
+            }
+            // Fallback to default theme if requested
+            if (options.fallbackOnError && themeName !== this.config.defaultTheme) {
+                console.warn(`Failed to load theme "${themeName}", falling back to default theme "${this.config.defaultTheme}"`);
+                return this.setTheme(this.config.defaultTheme, { ...options, fallbackOnError: false });
+            }
+            throw err;
+        }
+    }
+    /**
+     * Enable theme persistence
+     *
+     * @param storageKey - Optional custom storage key
+     */
+    enablePersistence(storageKey) {
+        this.config.enablePersistence = true;
+        if (storageKey) {
+            this.config.storageKey = storageKey;
+        }
+        // Save current theme
+        if (this.currentTheme && this.storageAdapter.isAvailable()) {
+            this.storageAdapter.setItem(this.config.storageKey, this.currentTheme);
+        }
+    }
+    /**
+     * Disable theme persistence
+     */
+    disablePersistence() {
+        this.config.enablePersistence = false;
+        // Clear stored theme
+        if (this.storageAdapter.isAvailable()) {
+            this.storageAdapter.removeItem(this.config.storageKey);
+        }
+    }
+    /**
+     * Clear all loaded themes
+     */
+    clearThemes() {
+        if (isServer()) {
+            return;
+        }
+        removeAllThemeCSS();
+        this.loadedThemes.clear();
+        this.loadingThemes.clear();
+    }
+    on(event, callback) {
+        if (event === 'themeChange') {
+            this.eventListeners.themeChange.push(callback);
+        }
+        else if (event === 'themeLoad') {
+            this.eventListeners.themeLoad.push(callback);
+        }
+        else if (event === 'themeError') {
+            this.eventListeners.themeError.push(callback);
+        }
+    }
+    off(event, callback) {
+        if (event === 'themeChange') {
+            this.eventListeners.themeChange = this.eventListeners.themeChange.filter(cb => cb !== callback);
+        }
+        else if (event === 'themeLoad') {
+            this.eventListeners.themeLoad = this.eventListeners.themeLoad.filter(cb => cb !== callback);
+        }
+        else if (event === 'themeError') {
+            this.eventListeners.themeError = this.eventListeners.themeError.filter(cb => cb !== callback);
+        }
+    }
+    /**
+     * Emit theme change event
+     */
+    emitThemeChange(previousTheme, currentTheme) {
+        const event = {
+            previousTheme,
+            currentTheme,
+            timestamp: Date.now(),
+            source: 'user',
+        };
+        this.eventListeners.themeChange.forEach(callback => {
+            try {
+                callback(event);
+            }
+            catch (error) {
+                console.error('Error in themeChange listener:', error);
+            }
+        });
+    }
+    /**
+     * Emit theme load event
+     */
+    emitLoad(themeName) {
+        this.eventListeners.themeLoad.forEach(callback => {
+            try {
+                callback(themeName);
+            }
+            catch (error) {
+                console.error('Error in themeLoad listener:', error);
+            }
+        });
+    }
+    /**
+     * Emit theme error event
+     */
+    emitError(error, themeName) {
+        this.eventListeners.themeError.forEach(callback => {
+            try {
+                callback(error, themeName);
+            }
+            catch (err) {
+                console.error('Error in themeError listener:', err);
+            }
+        });
+    }
+    /**
+     * Destroy the theme manager and clean up
+     */
+    destroy() {
+        this.clearThemes();
+        this.eventListeners.themeChange = [];
+        this.eventListeners.themeLoad = [];
+        this.eventListeners.themeError = [];
+        this.initialized = false;
+    }
+}
+
+/**
+ * Theme Context
+ *
+ * React context for theme management
+ */
+/**
+ * Theme context with default values
+ */
+const ThemeContext = createContext(null);
+ThemeContext.displayName = 'ThemeContext';
+
+/**
+ * ThemeProvider component
+ *
+ * Provides theme context to child components and manages theme state.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ * import { themesConfig } from '@shohojdhara/atomix/themes/themes.config';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider
+ *       themes={themesConfig.metadata}
+ *       defaultTheme="shaj-default"
+ *     >
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+const ThemeProvider = ({ children, defaultTheme = 'shaj-default', themes = {}, basePath = '/themes', cdnPath = null, preload = [], lazy = true, storageKey = 'atomix-theme', dataAttribute = 'data-theme', enablePersistence = true, useMinified = false, onThemeChange, onError, }) => {
+    // Initialize theme manager
+    const themeManager = useMemo(() => {
+        try {
+            return new ThemeManager({
+                themes,
+                defaultTheme,
+                basePath,
+                cdnPath,
+                preload,
+                lazy,
+                storageKey,
+                dataAttribute,
+                enablePersistence,
+                useMinified,
+                onThemeChange,
+                onError,
+            });
+        }
+        catch (error) {
+            console.error('Failed to initialize ThemeManager:', error);
+            // Return a minimal fallback manager
+            return new ThemeManager({
+                themes: { [defaultTheme]: { name: defaultTheme } },
+                defaultTheme,
+            });
+        }
+    }, [
+        themes,
+        defaultTheme,
+        basePath,
+        cdnPath,
+        preload,
+        lazy,
+        storageKey,
+        dataAttribute,
+        enablePersistence,
+        useMinified,
+        onThemeChange,
+        onError,
+    ]);
+    // State
+    const [currentTheme, setCurrentTheme] = useState(themeManager.getTheme());
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // Get available themes
+    const availableThemes = useMemo(() => themeManager.getAvailableThemes(), [themeManager]);
+    // Set theme function
+    const setTheme = useCallback(async (themeName, options) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            await themeManager.setTheme(themeName, options);
+            setCurrentTheme(themeName);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            // If fallback is enabled and theme is not default, try to fallback
+            if (options?.fallbackOnError && themeName !== defaultTheme) {
+                try {
+                    await themeManager.setTheme(defaultTheme, { fallbackOnError: false });
+                    setCurrentTheme(defaultTheme);
+                    setError(null);
+                    return;
+                }
+                catch (fallbackErr) {
+                    // If fallback also fails, throw original error
+                    throw error;
+                }
+            }
+            throw error;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [themeManager, defaultTheme]);
+    // Check if theme is loaded
+    const isThemeLoaded = useCallback((themeName) => {
+        return themeManager.isThemeLoaded(themeName);
+    }, [themeManager]);
+    // Preload theme
+    const preloadTheme = useCallback(async (themeName) => {
+        try {
+            await themeManager.preloadTheme(themeName);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [themeManager]);
+    // Listen for theme changes
+    useEffect(() => {
+        const handleThemeChange = () => {
+            setCurrentTheme(themeManager.getTheme());
+        };
+        themeManager.on('themeChange', handleThemeChange);
+        return () => {
+            themeManager.off('themeChange', handleThemeChange);
+        };
+    }, [themeManager]);
+    // Load initial theme
+    useEffect(() => {
+        const loadInitialTheme = async () => {
+            setIsLoading(true);
+            try {
+                await themeManager.setTheme(themeManager.getTheme());
+            }
+            catch (err) {
+                const error = err instanceof Error ? err : new Error(String(err));
+                setError(error);
+                console.error('Failed to load initial theme:', error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        loadInitialTheme();
+    }, [themeManager]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            themeManager.destroy();
+        };
+    }, [themeManager]);
+    // Context value
+    const contextValue = useMemo(() => ({
+        theme: currentTheme,
+        setTheme,
+        availableThemes,
+        isLoading,
+        error,
+        isThemeLoaded,
+        preloadTheme,
+        themeManager,
+    }), [
+        currentTheme,
+        setTheme,
+        availableThemes,
+        isLoading,
+        error,
+        isThemeLoaded,
+        preloadTheme,
+        themeManager,
+    ]);
+    return (jsx(ThemeContext.Provider, { value: contextValue, children: children }));
+};
+ThemeProvider.displayName = 'ThemeProvider';
+
+/**
+ * useTheme Hook
+ *
+ * React hook for accessing and managing theme state
+ */
+/**
+ * useTheme hook
+ *
+ * Access theme context and manage theme state in React components.
+ * Must be used within a ThemeProvider.
+ *
+ * @param options - Hook options
+ * @returns Theme state and methods
+ *
+ * @example
+ * ```tsx
+ * function ThemeSwitcher() {
+ *   const { theme, setTheme, availableThemes, isLoading } = useTheme();
+ *
+ *   return (
+ *     <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+ *       {availableThemes.map(t => (
+ *         <option key={t.class} value={t.class}>{t.name}</option>
+ *       ))}
+ *     </select>
+ *   );
+ * }
+ * ```
+ */
+const useTheme = (options = {}) => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider. ' +
+            'Wrap your component tree with <ThemeProvider> to use this hook.');
+    }
+    const { theme, setTheme: contextSetTheme, availableThemes, isLoading, error, isThemeLoaded, preloadTheme, } = context;
+    // Extract onChange callback to avoid dependency on entire options object
+    const onChange = options?.onChange;
+    // Wrap setTheme to call onChange callback if provided
+    const setTheme = useCallback(async (themeName, themeOptions) => {
+        await contextSetTheme(themeName, themeOptions);
+        if (onChange) {
+            onChange(themeName);
+        }
+    }, [contextSetTheme, onChange]);
+    return {
+        theme,
+        setTheme,
+        availableThemes,
+        isLoading,
+        error,
+        isThemeLoaded,
+        preloadTheme,
+    };
+};
+
+/**
+ * Theme Module Entry Point
+ *
+ * Exports all theme management utilities for the Atomix Design System
+ */
+// Core theme manager
+
+const themeImport = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+    __proto__: null,
+    ThemeContext,
+    ThemeContextDefault: ThemeContext,
+    ThemeManager,
+    ThemeManagerDefault: ThemeManager,
+    ThemeProvider,
+    ThemeProviderDefault: ThemeProvider,
+    applyThemeAttributes,
+    buildThemePath,
+    createLocalStorageAdapter,
+    debounce,
+    getCurrentThemeFromDOM,
+    getSystemTheme,
+    getThemeLinkId,
+    isBrowser,
+    isServer,
+    isThemeLoaded,
+    isValidThemeName,
+    loadThemeCSS,
+    removeAllThemeCSS,
+    removeThemeAttributes,
+    removeThemeCSS,
+    useTheme,
+    useThemeDefault: useTheme,
+    validateThemeMetadata
+}, Symbol.toStringTag, { value: 'Module' }));
+
 // Import and re-export as namespaces with proper typing
 // Export as namespaces with explicit typing
 const composables = composablesImport;
 const utils = utilsImport;
 const types = typesImport;
 const constants = constantsImport;
+const theme = themeImport;
 
 // Export all components individually for better tree-shaking
 const atomix = {
@@ -17884,5 +19414,5 @@ const atomix = {
     types,
 };
 
-export { Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DataTable, DatePicker, DonutChart, Dropdown, EdgePanel, ElevationCard, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HeatmapChart, Hero, Icon, Input, LineChart, List, ListGroup, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, Nav, NavDropdown, NavItem, Navbar, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RadarChart, Radio, Rating, River, Row, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, Tabs, Testimonial, Textarea, Todo, Toggle, Tooltip, TreemapChart, Upload, VideoPlayer, WaterfallChart, composables, constants, atomix as default, types, utils };
+export { Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DataTable, DatePicker, DonutChart, Dropdown, EdgePanel, ElevationCard, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HeatmapChart, Hero, Icon, Input, LineChart, List, ListGroup, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, Nav, NavDropdown, NavItem, Navbar, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RadarChart, Radio, Rating, River, Row, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, Tabs, Testimonial, Textarea, ThemeContext, ThemeContext as ThemeContextDefault, ThemeManager, ThemeManager as ThemeManagerDefault, ThemeProvider, ThemeProvider as ThemeProviderDefault, Todo, Toggle, Tooltip, TreemapChart, Upload, VideoPlayer, WaterfallChart, applyThemeAttributes, buildThemePath, composables, constants, createLocalStorageAdapter, debounce, atomix as default, getCurrentThemeFromDOM, getSystemTheme, getThemeLinkId, isBrowser, isServer, isThemeLoaded, isValidThemeName, loadThemeCSS, removeAllThemeCSS, removeThemeAttributes, removeThemeCSS, theme, types, useTheme, useTheme as useThemeDefault, utils, validateThemeMetadata };
 //# sourceMappingURL=index.esm.js.map