@shohojdhara/atomix 0.5.5 → 0.5.6

package/src/components/Tabs/Tabs.tsx

@@ -1,8 +1,26 @@
-import React, { useState, ReactNode, memo, createContext, useContext, forwardRef } from 'react';
+import React, {
+  useState,
+  ReactNode,
+  memo,
+  createContext,
+  useContext,
+  forwardRef,
+  ComponentType,
+} from 'react';
 import { TAB } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 
+// Type aliases for compound component detection
+type ExtendedComponentType<P = {}> = ComponentType<P> & {
+  displayName?: string;
+};
+
+// Props interfaces for type-safe component props access
+interface ExtendedReactElementProps {
+  children?: ReactNode;
+}
+
 export interface TabsItemProps {
   /**
    * Label for the tab
@@ -87,7 +105,7 @@ export const TabsList = forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUL
         ref={ref}
         className={`c-tabs__nav ${className}`.trim()}
         role="tablist"
-        onKeyDown={(e) => {
+        onKeyDown={e => {
           contextHandleKeyDown(e, totalTabs);
           onKeyDown?.(e);
         }}
@@ -95,8 +113,7 @@ export const TabsList = forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUL
       >
         {React.Children.map(children, (child, index) => {
           if (React.isValidElement(child)) {
-            // Inject index into TabsTrigger
-            return React.cloneElement(child, { index } as any);
+            return React.cloneElement(child as React.ReactElement<any>, { index });
           }
           return child;
         })}
@@ -127,7 +144,7 @@ export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
           ref={ref}
           id={`tab-nav-${index}`}
           className={`c-tabs__nav-btn ${isActive ? TAB.CLASSES.ACTIVE : ''} ${className}`.trim()}
-          onClick={(e) => {
+          onClick={e => {
             if (index !== undefined) handleTabClick(index);
             onClick?.(e);
           }}
@@ -152,10 +169,10 @@ export const TabsPanels = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     return (
       <div ref={ref} className={`c-tabs__panels ${className}`.trim()} {...props}>
         {React.Children.map(children, (child, index) => {
-           if (React.isValidElement(child)) {
-             return React.cloneElement(child, { index } as any);
-           }
-           return child;
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child as React.ReactElement<any>, { index });
+          }
+          return child;
         })}
       </div>
     );
@@ -196,7 +213,6 @@ export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
 );
 TabsPanel.displayName = 'TabsPanel';
 
-
 /**
  * Tabs component for switching between different content panels
  */
@@ -208,153 +224,151 @@ type TabsComponent = React.FC<TabsProps> & {
 };
 
 const TabsComponentBase = ({
-    items,
-    activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
-    onTabChange,
-    className = '',
-    style,
-    glass,
-    children,
-  }: TabsProps) => {
-    const [currentTab, setCurrentTab] = useState(activeIndex);
-
-    // Handle tab change
-    const handleTabClick = (index: number) => {
-      setCurrentTab(index);
-      if (onTabChange) {
-        onTabChange(index);
-      }
-    };
-
-    // Keyboard navigation
-    const handleKeyDown = (event: React.KeyboardEvent, totalTabs: number) => {
-      let newIndex = currentTab;
-      switch (event.key) {
-        case 'ArrowRight':
-          newIndex = (currentTab + 1) % totalTabs;
-          break;
-        case 'ArrowLeft':
-          newIndex = (currentTab - 1 + totalTabs) % totalTabs;
-          break;
-        case 'Home':
-          newIndex = 0;
-          break;
-        case 'End':
-          newIndex = totalTabs - 1;
-          break;
-        default:
-          return;
+  items,
+  activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
+  onTabChange,
+  className = '',
+  style,
+  glass,
+  children,
+}: TabsProps) => {
+  const [currentTab, setCurrentTab] = useState(activeIndex);
+
+  // Handle tab change
+  const handleTabClick = (index: number) => {
+    setCurrentTab(index);
+    if (onTabChange) {
+      onTabChange(index);
+    }
+  };
+
+  // Keyboard navigation
+  const handleKeyDown = (event: React.KeyboardEvent, totalTabs: number) => {
+    let newIndex = currentTab;
+    switch (event.key) {
+      case 'ArrowRight':
+        newIndex = (currentTab + 1) % totalTabs;
+        break;
+      case 'ArrowLeft':
+        newIndex = (currentTab - 1 + totalTabs) % totalTabs;
+        break;
+      case 'Home':
+        newIndex = 0;
+        break;
+      case 'End':
+        newIndex = totalTabs - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    handleTabClick(newIndex);
+
+    // Focus the newly active tab after it renders
+    setTimeout(() => {
+      const tabElement = document.getElementById(`tab-nav-${newIndex}`);
+      if (tabElement) {
+        tabElement.focus();
       }
-      event.preventDefault();
-      handleTabClick(newIndex);
-
-      // Focus the newly active tab after it renders
-      setTimeout(() => {
-        const tabElement = document.getElementById(`tab-nav-${newIndex}`);
-        if (tabElement) {
-          tabElement.focus();
-        }
-      }, 0);
-    };
-
-    // Determine content based on mode (legacy items vs compound children)
-    let content: ReactNode;
-
-    // Use items prop if provided
-    if (items && items.length > 0) {
-      // Legacy mode
-      content = (
-        <>
-          <ul
-            className="c-tabs__nav"
-            role="tablist"
-            onKeyDown={(e) => handleKeyDown(e, items.length)}
-          >
-            {items.map((item, index) => (
-              <li className="c-tabs__nav-item" key={`tab-nav-${index}`} role="presentation">
-                <button
-                  id={`tab-nav-${index}`}
-                  className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-                  onClick={() => handleTabClick(index)}
-                  data-tabindex={index}
-                  role="tab"
-                  aria-selected={index === currentTab}
-                  aria-controls={`tab-panel-${index}`}
-                  tabIndex={index === currentTab ? 0 : -1}
-                  type="button"
-                >
-                  {item.label}
-                </button>
-              </li>
-            ))}
-          </ul>
-          <div className="c-tabs__panels">
-            {items.map((item, index) => (
-              <div
-                className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-                key={`tab-panel-${index}`}
+    }, 0);
+  };
+
+  // Determine content based on mode (legacy items vs compound children)
+  let content: ReactNode;
+
+  // Use items prop if provided
+  if (items && items.length > 0) {
+    // Legacy mode
+    content = (
+      <>
+        <ul className="c-tabs__nav" role="tablist" onKeyDown={e => handleKeyDown(e, items.length)}>
+          {items.map((item, index) => (
+            <li className="c-tabs__nav-item" key={`tab-nav-${index}`} role="presentation">
+              <button
+                id={`tab-nav-${index}`}
+                className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
+                onClick={() => handleTabClick(index)}
                 data-tabindex={index}
-                id={`tab-panel-${index}`}
-                role="tabpanel"
-                aria-labelledby={`tab-nav-${index}`}
-                style={{
-                  height: index === currentTab ? 'auto' : '0px',
-                  opacity: index === currentTab ? 1 : 0,
-                  overflow: 'hidden',
-                  transition: 'height 0.3s ease, opacity 0.3s ease',
-                }}
+                role="tab"
+                aria-selected={index === currentTab}
+                aria-controls={`tab-panel-${index}`}
+                tabIndex={index === currentTab ? 0 : -1}
+                type="button"
               >
-                <div className="c-tabs__panel-body">{item.content}</div>
-              </div>
-            ))}
-          </div>
-        </>
-      );
-    } else {
-      // Compound mode
-      const tabsList = React.Children.toArray(children).find(
-        (child): child is React.ReactElement =>
-          React.isValidElement(child) && (child.type as any).displayName === 'TabsList'
-      );
-      const totalTabsCount = tabsList ? React.Children.count((tabsList.props as any).children) : 0;
-
-      content = (
-        <TabsContext.Provider
-          value={{
-            currentTab,
-            handleTabClick,
-            handleKeyDown,
-            totalTabs: totalTabsCount,
-          }}
-        >
-          {children}
-        </TabsContext.Provider>
-      );
-    }
-
-    const wrapper = (
-      <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
-        {content}
-      </div>
+                {item.label}
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className="c-tabs__panels">
+          {items.map((item, index) => (
+            <div
+              className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
+              key={`tab-panel-${index}`}
+              data-tabindex={index}
+              id={`tab-panel-${index}`}
+              role="tabpanel"
+              aria-labelledby={`tab-nav-${index}`}
+              style={{
+                height: index === currentTab ? 'auto' : '0px',
+                opacity: index === currentTab ? 1 : 0,
+                overflow: 'hidden',
+                transition: 'height 0.3s ease, opacity 0.3s ease',
+              }}
+            >
+              <div className="c-tabs__panel-body">{item.content}</div>
+            </div>
+          ))}
+        </div>
+      </>
     );
+  } else {
+    // Compound mode
+    const tabsList = React.Children.toArray(children).find(
+      (child): child is React.ReactElement =>
+        React.isValidElement(child) &&
+        (child.type as ExtendedComponentType).displayName === 'TabsList'
+    ) as React.ReactElement | undefined;
+    
+    const totalTabsCount = tabsList ? React.Children.count((tabsList as React.ReactElement<{ children: any }>).props.children) : 0;
+
+    content = (
+      <TabsContext.Provider
+        value={{
+          currentTab,
+          handleTabClick,
+          handleKeyDown,
+          totalTabs: totalTabsCount,
+        }}
+      >
+        {children}
+      </TabsContext.Provider>
+    );
+  }
 
-    if (glass) {
-      // Default glass settings for tabs
-      const defaultGlassProps = {
-        displacementScale: 60,
-        blurAmount: 1,
-        saturation: 160,
-        aberrationIntensity: 0.5,
-        borderRadius: 8,
-        mode: 'shader' as const,
-      };
+  const wrapper = (
+    <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
+      {content}
+    </div>
+  );
+
+  if (glass) {
+    // Default glass settings for tabs
+    const defaultGlassProps = {
+      displacementScale: 60,
+      blurAmount: 1,
+      saturation: 160,
+      aberrationIntensity: 0.5,
+      borderRadius: 8,
+      mode: 'shader' as const,
+    };
 
-      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-      return <AtomixGlass {...glassProps}>{wrapper}</AtomixGlass>;
-    }
+    return <AtomixGlass {...glassProps}>{wrapper}</AtomixGlass>;
+  }
 
-    return wrapper;
+  return wrapper;
 };
 
 export const Tabs = memo(TabsComponentBase) as unknown as TabsComponent;

package/src/lib/composables/useInput.ts

@@ -6,15 +6,17 @@ import { INPUT } from '../constants/components';
  * @param initialProps - Initial input properties
  * @returns Input state and methods
  */
+interface UseInputOptions {
+  prefixIcon?: boolean;
+  suffixIcon?: boolean;
+  clearable?: boolean;
+  showCounter?: boolean;
+  showPasswordToggle?: boolean;
+  fullWidth?: boolean;
+}
+
 export function useInput(
-  initialProps?: Partial<InputProps> & {
-    prefixIcon?: boolean;
-    suffixIcon?: boolean;
-    clearable?: boolean;
-    showCounter?: boolean;
-    showPasswordToggle?: boolean;
-    fullWidth?: boolean;
-  }
+  initialProps?: Partial<InputProps> & UseInputOptions
 ) {
   // Default input properties
   const defaultProps: Partial<InputProps> = {
@@ -74,7 +76,7 @@ export function useInput(
       showCounter = false,
       showPasswordToggle = false,
       fullWidth = false,
-    } = initialProps || {};
+    } = (initialProps as UseInputOptions) || {};
 
     const classes = [INPUT.ELEMENTS.WRAPPER];
 

package/src/lib/types/components.ts

@@ -2183,6 +2183,90 @@ export interface TodoProps extends BaseComponentProps {
   glass?: AtomixGlassProps | boolean;
 }
 
+/**
+ * Spinner component properties
+ */
+export interface SpinnerProps extends BaseComponentProps {
+  /**
+   * Spinner color variant
+   * @default 'primary'
+   */
+  variant?: ThemeColor;
+
+  /**
+   * Spinner size
+   * @default 'md'
+   */
+  size?: Size;
+
+  /**
+   * Whether the spinner should be displayed fullscreen
+   */
+  fullscreen?: boolean;
+
+  /**
+   * Accessible label for screen readers
+   * @default 'Loading'
+   */
+  'aria-label'?: string;
+
+  /**
+   * ARIA live property to control how updates are announced
+   * @default 'polite'
+   */
+  'aria-live'?: 'off' | 'polite' | 'assertive';
+
+  /**
+   * ARIA descriptor property for additional description
+   */
+  'aria-describe'?: string;
+
+  /**
+   * ARIA role for the spinner
+   * @default 'status'
+   */
+  role?: 'status' | 'alert';
+
+  /**
+   * Glass morphism effect for the spinner
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
+}
+
+/**
+ * Icon size options
+ */
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Icon component properties
+ */
+export interface IconProps extends BaseComponentProps {
+  /**
+   * Icon name
+   */
+  name: string;
+
+  /**
+   * Icon size
+   * @default 'md'
+   */
+  size?: IconSize;
+
+  /**
+   * Icon color variant
+   * @default 'inherit'
+   */
+  variant?: ThemeColor;
+
+  /**
+   * Glass morphism effect for the icon
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
+}
+
 /**
  * Form component properties
  */

package/src/styles/01-settings/_settings.background.scss

@@ -5,6 +5,7 @@ $background-enable-with-shadow: true !default;
 $background-enable-mesh-gradient: false !default;
 $background-enable-noise-texture: false !default;
 $background-enable-shimmer: false !default;
+$background-enable-hover-effects: true !default; // Variable to control hover effects
 
 // Core transparency levels
 $background-transparency: 0.65 !default;
@@ -33,4 +34,4 @@ $background-noise-scale: 200 !default;
 
 // Shimmer effect
 $background-shimmer-duration: 3s !default;
-$background-shimmer-intensity: 0.15 !default;
+$background-shimmer-intensity: 0.15 !default;