@shohojdhara/atomix 0.3.4 → 0.3.5

package/src/components/Rating/Rating.tsx

@@ -54,6 +54,9 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
         onChange,
       });
 
+    // Create forked ref - must be called unconditionally
+    const forkedRef = useForkRef(internalRef, ref);
+
     // Handle mouse enter on star with half-star support
     const handleMouseEnter = useCallback(
       (e: React.MouseEvent, starValue: number) => {
@@ -171,7 +174,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     // If using vanilla JS, just render the container
     if (useVanillaJS) {
       return (
-        <div className={ratingClasses} ref={useForkRef(internalRef, ref)} id={id} {...restProps}>
+        <div className={ratingClasses} ref={forkedRef} id={id} {...restProps}>
           {/* Stars will be generated by the vanilla JS implementation */}
         </div>
       );
@@ -268,7 +271,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     const ratingContent = (
       <div
         className={ratingClasses}
-        ref={useForkRef(internalRef, ref)}
+        ref={forkedRef}
         id={id}
         style={style}
         data-readonly={readOnly ? 'true' : 'false'}

package/src/components/Slider/Slider.tsx

@@ -25,16 +25,9 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     ...rest
   } = props;
 
-  if (!slides || slides.length === 0) {
-    return (
-      <div className="c-slider c-slider--empty" style={{ height, width, ...style }}>
-        <div className="c-slider__empty-message">No slides available</div>
-      </div>
-    );
-  }
-
+  // Hooks must be called unconditionally - before early return
   const slider = useSlider({
-    slides,
+    slides: slides || [],
     slidesToShow,
     spaceBetween,
     loop,
@@ -72,6 +65,14 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     return allSlides.length * (slideWidth + spaceBetween) - spaceBetween;
   }, [allSlides.length, slideWidth, spaceBetween]);
 
+  if (!slides || slides.length === 0) {
+    return (
+      <div className="c-slider c-slider--empty" style={{ height, width, ...style }}>
+        <div className="c-slider__empty-message">No slides available</div>
+      </div>
+    );
+  }
+
   const containerClasses = [
     'c-slider',
     direction === 'vertical' && 'c-slider--vertical',

package/src/components/Spinner/Spinner.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
 import { SPINNER } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Spinner: React.FC<SpinnerProps> = ({
+export const Spinner: React.FC<SpinnerProps> = memo(({
   size = 'md',
   variant = 'primary',
   fullscreen = false,
@@ -43,7 +43,7 @@ export const Spinner: React.FC<SpinnerProps> = ({
   }
 
   return spinnerContent;
-};
+});
 
 export type { SpinnerProps };
 

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from 'react';
+import React, { useState, ReactNode, memo } from 'react';
 import { TAB } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
@@ -61,7 +61,7 @@ export interface TabsProps {
 /**
  * Tabs component for switching between different content panels
  */
-export const Tabs: React.FC<TabsProps> = ({
+export const Tabs: React.FC<TabsProps> = memo(({
   items,
   activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
   onTabChange,
@@ -137,7 +137,7 @@ export const Tabs: React.FC<TabsProps> = ({
   }
 
   return tabContent;
-};
+});
 
 Tabs.displayName = 'Tabs';
 

package/src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, memo } from 'react';
 import { TOOLTIP } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
@@ -60,7 +60,7 @@ export interface TooltipProps {
   glass?: AtomixGlassProps | boolean;
 }
 
-export const Tooltip: React.FC<TooltipProps> = ({
+export const Tooltip: React.FC<TooltipProps> = memo(({
   content,
   children,
   position = TOOLTIP.DEFAULTS.POSITION,
@@ -162,7 +162,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       )}
     </div>
   );
-};
+});
 
 Tooltip.displayName = 'Tooltip';
 

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export type { SliderProps, VideoPlayerProps } from '../lib/types/components';
-export { default as Accordion, type AccordionProps } from './Accordion/Accordion';
+export { default as Accordion } from './Accordion/Accordion';
+export type { AccordionProps } from '../lib/types/components';
 export { default as AtomixLogo, type AtomixLogoProps } from './AtomixLogo/AtomixLogo';
 export { default as AtomixGlass, type AtomixGlassProps } from './AtomixGlass';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
@@ -37,7 +38,7 @@ export {
   type BubbleDataPoint,
   type CandlestickChartProps,
   type CandlestickDataPoint,
-  type ChartProps,
+  // ChartProps exported separately from lib/types/components to avoid conflict
   type DonutChartProps,
   type FunnelChartProps,
   type FunnelDataPoint,
@@ -56,6 +57,8 @@ export {
   type WaterfallChartProps,
   type WaterfallDataPoint,
 } from './Chart';
+// Export ChartProps from lib/types/components to avoid duplicate export conflict
+export type { ChartProps } from '../lib/types/components';
 export {
   default as ColorModeToggle,
   type ColorModeToggleProps,

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -374,7 +374,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           const position = positions[index];
           if (!position) {
             return (
-              <div key={item.id} ref={item.ref} style={{ opacity: 0, position: 'absolute' }}>
+              <div key={item.id} ref={item.ref as React.LegacyRef<HTMLDivElement>} style={{ opacity: 0, position: 'absolute' }}>
                 {item.element}
               </div>
             );
@@ -382,7 +382,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           return (
             <div
               key={item.id}
-              ref={item.ref}
+              ref={item.ref as React.LegacyRef<HTMLDivElement>}
               className="o-masonry-grid__item"
               style={{
                 position: 'absolute',

package/src/lib/composables/useChartPerformance.ts

@@ -70,35 +70,33 @@ export function useChartPerformance() {
       height: number,
       padding: { top: number; right: number; bottom: number; left: number }
     ) => {
-      return useMemo(() => {
-        if (!datasets.length) return null;
-
-        const innerWidth = width - padding.left - padding.right;
-        const innerHeight = height - padding.top - padding.bottom;
-
-        // Calculate bounds efficiently
-        const allValues = datasets.flatMap(dataset => dataset.data.map(d => d.value));
-        const minValue = Math.min(...allValues);
-        const maxValue = Math.max(...allValues);
-        const valueRange = maxValue - minValue;
-
-        // Pre-calculate scale functions for better performance
-        const xScale = (i: number, dataLength: number) =>
-          padding.left + (i / (dataLength - 1)) * innerWidth;
-
-        const yScale = (value: number) =>
-          padding.top + innerHeight - ((value - minValue) / valueRange) * innerHeight;
-
-        return {
-          xScale,
-          yScale,
-          minValue,
-          maxValue,
-          valueRange,
-          innerWidth,
-          innerHeight,
-        };
-      }, [datasets, width, height, padding.top, padding.right, padding.bottom, padding.left]);
+      if (!datasets.length) return null;
+
+      const innerWidth = width - padding.left - padding.right;
+      const innerHeight = height - padding.top - padding.bottom;
+
+      // Calculate bounds efficiently
+      const allValues = datasets.flatMap(dataset => dataset.data.map(d => d.value));
+      const minValue = Math.min(...allValues);
+      const maxValue = Math.max(...allValues);
+      const valueRange = maxValue - minValue;
+
+      // Pre-calculate scale functions for better performance
+      const xScale = (i: number, dataLength: number) =>
+        padding.left + (i / (dataLength - 1)) * innerWidth;
+
+      const yScale = (value: number) =>
+        padding.top + innerHeight - ((value - minValue) / valueRange) * innerHeight;
+
+      return {
+        xScale,
+        yScale,
+        minValue,
+        maxValue,
+        valueRange,
+        innerWidth,
+        innerHeight,
+      };
     },
     []
   );
@@ -113,47 +111,65 @@ export function useChartPerformance() {
       viewportEnd: number,
       bufferSize: number = 50
     ) => {
-      return useMemo(() => {
-        if (data.length <= 1000) {
-          // No virtualization needed for small datasets
-          return {
-            visibleData: data,
-            startIndex: 0,
-            endIndex: data.length - 1,
-            isVirtualized: false,
-          };
-        }
-
-        const start = Math.max(0, viewportStart - bufferSize);
-        const end = Math.min(data.length - 1, viewportEnd + bufferSize);
-
+      if (data.length <= 1000) {
+        // No virtualization needed for small datasets
         return {
-          visibleData: data.slice(start, end + 1),
-          startIndex: start,
-          endIndex: end,
-          isVirtualized: true,
-          totalLength: data.length,
+          visibleData: data,
+          startIndex: 0,
+          endIndex: data.length - 1,
+          isVirtualized: false,
         };
-      }, [data, viewportStart, viewportEnd, bufferSize]);
+      }
+
+      const start = Math.max(0, viewportStart - bufferSize);
+      const end = Math.min(data.length - 1, viewportEnd + bufferSize);
+
+      return {
+        visibleData: data.slice(start, end + 1),
+        startIndex: start,
+        endIndex: end,
+        isVirtualized: true,
+        totalLength: data.length,
+      };
     },
     []
   );
 
   /**
    * Debounced data updates for real-time charts
+   * Returns a debounced function that maintains timeout state across calls
+   * Uses a closure to maintain state - each call to useDebouncedUpdates creates
+   * a new debounced function with its own persistent timeout state
    */
   const useDebouncedUpdates = useCallback((updateFunction: () => void, delay: number = 100) => {
-    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-    return useCallback(() => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+    // Use a closure variable to maintain timeout state across multiple calls to the returned function
+    // This variable is created once when useDebouncedUpdates is called and persists
+    // across all invocations of the returned debounced function
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    const debouncedFn: (() => void) & { cancel: () => void } = () => {
+      // Clear any existing timeout before setting a new one
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
       }
 
-      timeoutRef.current = setTimeout(() => {
+      // Set new timeout and store the ID
+      timeoutId = setTimeout(() => {
         updateFunction();
+        timeoutId = null;
       }, delay);
-    }, [updateFunction, delay]);
+    };
+
+    // Add cleanup method to cancel pending debounced calls
+    debouncedFn.cancel = () => {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+    };
+
+    return debouncedFn;
   }, []);
 
   /**
@@ -192,32 +208,40 @@ export function useChartPerformance() {
 
   /**
    * Optimized animation frame handling
+   * Returns animation control functions that maintain state across calls
+   * Uses closures to maintain state - each call to useAnimationFrame creates
+   * a new animation controller with its own persistent state
    */
   const useAnimationFrame = useCallback((callback: () => void) => {
-    const requestRef = useRef<number | null>(null);
-    const previousTimeRef = useRef<number | null>(null);
-
-    const animate = useCallback(
-      (time: number) => {
-        if (previousTimeRef.current !== undefined) {
-          const deltaTime = time - (previousTimeRef.current || 0);
-          callback();
-        }
-        previousTimeRef.current = time;
-        requestRef.current = requestAnimationFrame(animate);
-      },
-      [callback]
-    );
-
-    const startAnimation = useCallback(() => {
-      requestRef.current = requestAnimationFrame(animate);
-    }, [animate]);
+    // Use closure variables to maintain animation state across multiple calls
+    // These variables are created once when useAnimationFrame is called and persist
+    // across all invocations of the returned animation control functions
+    let requestId: number | null = null;
+    let previousTime: number | null = null;
+
+    const animate = (time: number) => {
+      if (previousTime !== null && previousTime !== undefined) {
+        const deltaTime = time - previousTime;
+        callback();
+      }
+      previousTime = time;
+      requestId = requestAnimationFrame(animate);
+    };
+
+    const startAnimation = () => {
+      // Only start if not already running
+      if (requestId === null) {
+        requestId = requestAnimationFrame(animate);
+      }
+    };
 
-    const stopAnimation = useCallback(() => {
-      if (requestRef.current) {
-        cancelAnimationFrame(requestRef.current);
+    const stopAnimation = () => {
+      if (requestId !== null) {
+        cancelAnimationFrame(requestId);
+        requestId = null;
       }
-    }, []);
+      previousTime = null;
+    };
 
     return { startAnimation, stopAnimation };
   }, []);

package/src/lib/composables/useChartScale.ts

@@ -18,6 +18,11 @@ export function useChartScale(
       return {
         xScale: () => padding.left,
         yScale: () => padding.top + innerHeight,
+        minValue: 0,
+        maxValue: 0,
+        valueRange: 0,
+        innerWidth,
+        innerHeight,
         width,
         height,
         padding,
@@ -40,6 +45,11 @@ export function useChartScale(
     return {
       xScale,
       yScale,
+      minValue,
+      maxValue,
+      valueRange,
+      innerWidth,
+      innerHeight,
       width,
       height,
       padding,

package/src/lib/composables/useHero.ts

@@ -97,10 +97,17 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
   const hasBackgroundSlider = !!defaultProps.backgroundSlider;
 
   /**
-   * Initialize background slider hook if enabled
+   * Initialize background slider hook - always call hook, conditionally use result
    */
+  const backgroundSliderResult = useHeroBackgroundSlider(
+    defaultProps.backgroundSlider || { 
+      slides: [], 
+      autoplay: { delay: 5000, pauseOnHover: true } 
+    }
+  );
+  
   const backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider
-    ? useHeroBackgroundSlider(defaultProps.backgroundSlider)
+    ? backgroundSliderResult
     : undefined;
 
   /**

package/src/lib/composables/useHeroBackgroundSlider.ts

@@ -89,8 +89,9 @@ export function useHeroBackgroundSlider(
 
       // Play video if it's a video slide
       const currentVideo = videoRefs[nextIndex]?.current;
-      if (currentVideo && slides[nextIndex].type === 'video') {
-        const videoOptions = slides[nextIndex].videoOptions || {};
+      const nextSlide = slides[nextIndex];
+      if (currentVideo && nextSlide && nextSlide.type === 'video') {
+        const videoOptions = nextSlide.videoOptions || {};
         if (videoOptions.autoplay !== false) {
           currentVideo.play().catch(() => {
             // Ignore autoplay errors
@@ -100,7 +101,8 @@ export function useHeroBackgroundSlider(
 
       // Pause previous video if it exists
       const prevVideo = videoRefs[currentIndex]?.current;
-      if (prevVideo && slides[currentIndex].type === 'video') {
+      const currentSlide = slides[currentIndex];
+      if (prevVideo && currentSlide && currentSlide.type === 'video') {
         prevVideo.pause();
       }
 

package/src/lib/composables/useSideMenu.ts

@@ -60,6 +60,7 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
     } else if (!shouldCollapse && wrapperRef.current) {
       wrapperRef.current.style.height = 'auto';
     }
+    return undefined;
   }, []); // Only run on mount
 
   // Handle responsive behavior - vertical collapse for both mobile and desktop

package/src/lib/composables/useVideoPlayer.ts

@@ -41,18 +41,19 @@ export function useVideoPlayer({
   const [currentQuality, setCurrentQuality] = useState<VideoQuality | null>(quality?.[0] || null);
   const [showControls, setShowControls] = useState(true);
 
-  const controlsTimeoutRef = useRef<NodeJS.Timeout>(null);
+  const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const resetControlsTimeout = useCallback(() => {
     if (controlsTimeoutRef.current) {
       clearTimeout(controlsTimeoutRef.current);
     }
     setShowControls(true);
-    controlsTimeoutRef.current = setTimeout(() => {
+    const timeout = setTimeout(() => {
       if (isPlaying) {
         setShowControls(false);
       }
     }, 3000);
+    controlsTimeoutRef.current = timeout;
   }, [isPlaying]);
 
   const play = useCallback(async () => {

package/src/lib/config/loader.ts

@@ -76,26 +76,68 @@ export function loadAtomixConfig(
  * Resolve config path
  * 
  * Finds atomix.config.ts in the project, checking common locations.
+ * Returns null in browser environments where file system access is not available.
+ * 
+ * This function is designed to work in Node.js environments only.
+ * In browser builds, it will always return null without attempting to access Node.js modules.
+ * 
+ * @internal This function uses Node.js modules and should not be called in browser environments.
  */
 export function resolveConfigPath(): string | null {
-    if (typeof process === 'undefined' || !process.cwd) {
+    // Early return for browser environments - prevents any Node.js module access
+    // This check happens before any require() calls, preventing bundlers from analyzing them
+    if (typeof window !== 'undefined' || typeof process === 'undefined' || !process.cwd) {
         return null;
     }
 
-    const fs = require('fs');
-    const path = require('path');
-    
-    const cwd = process.cwd();
-    const possiblePaths = [
-        path.join(cwd, 'atomix.config.ts'),
-        path.join(cwd, 'atomix.config.js'),
-        path.join(cwd, 'atomix.config.mjs'),
-    ];
+    // Only attempt to load Node.js modules in Node.js runtime
+    // Use a lazy-loading pattern that prevents static analysis by bundlers
+    try {
+        // Create a function that only executes in Node.js runtime
+        // Use string-based module names to prevent static analysis by bundlers
+        const loadNodeModules = () => {
+            // These requires are only executed at runtime in Node.js environments
+            // They are marked as external in Rollup config and should not be bundled
+            // Using string concatenation and computed property access to prevent static analysis
+            if (typeof require === 'undefined') {
+                return null;
+            }
+            
+            // Use a try-catch wrapper to safely access require
+            try {
+                // Build module names dynamically to prevent static analysis
+                const moduleNames: [string, string] = ['f' + 's', 'p' + 'a' + 't' + 'h'];
+                // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+                const fs = require(moduleNames[0]);
+                // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+                const path = require(moduleNames[1]);
+                return { fs, path };
+            } catch {
+                return null;
+            }
+        };
 
-    for (const configPath of possiblePaths) {
-        if (fs.existsSync(configPath)) {
-            return configPath;
+        const modules = loadNodeModules();
+        if (!modules) {
+            return null;
         }
+
+        const { fs, path } = modules;
+        const cwd = process.cwd();
+        const possiblePaths = [
+            path.join(cwd, 'atomix.config.ts'),
+            path.join(cwd, 'atomix.config.js'),
+            path.join(cwd, 'atomix.config.mjs'),
+        ];
+
+        for (const configPath of possiblePaths) {
+            if (fs.existsSync(configPath)) {
+                return configPath;
+            }
+        }
+    } catch (error) {
+        // Silently fail in browser environments or when modules are unavailable
+        return null;
     }
 
     return null;

package/src/lib/hooks/index.ts

@@ -8,7 +8,6 @@ export {
   useComponentCustomization,
   useComponentDefaultProps,
   useMergedProps,
-  mergeClassNames,
   applyCSSVarsToStyle,
 } from './useComponentCustomization';
 

package/src/lib/hooks/useComponentCustomization.ts

@@ -11,6 +11,7 @@ import type { ComponentPartsMap } from '../types/partProps';
 import type { ComponentCSSVariables } from '../constants/cssVariables';
 import { mergeCSSVars } from '../theme/cssVariableMapper';
 import { mergePartStyles } from '../types/partProps';
+import { mergeClassNames } from '../utils/componentUtils';
 
 /**
  * Component names that support customization
@@ -22,7 +23,9 @@ export type ComponentName = keyof ComponentPartsMap;
  */
 export interface CustomizableComponentProps<T extends ComponentName> {
   /** CSS variable overrides */
-  cssVars?: Partial<Record<ComponentCSSVariables[T], string | number>>;
+  cssVars?: T extends keyof ComponentCSSVariables 
+    ? Partial<Record<ComponentCSSVariables[T], string | number>>
+    : Record<string, string | number>;
   /** Part-based styling */
   parts?: ComponentPartsMap[T];
   /** Additional className */
@@ -72,17 +75,17 @@ export function useComponentCustomization<T extends ComponentName>(
 
   // Merge CSS variables
   const cssVars = useMemo(() => {
-    const themeVars = theme?.components?.[component]?.cssVars || {};
+    const themeVars = (theme as any)?.components?.[component]?.cssVars || {};
     const propVars = props.cssVars || {};
     return mergeCSSVars(themeVars, propVars as any);
   }, [theme, component, props.cssVars]);
 
   // Merge parts
   const parts = useMemo(() => {
-    const themeParts = theme?.components?.[component]?.parts || {};
-    const propParts = props.parts || {};
+    const themeParts = (theme as any)?.components?.[component]?.parts || {};
+    const propParts = (props.parts || {}) as Record<string, any>;
     
-    const merged: any = {};
+    const merged: Record<string, any> = {};
     const allPartNames = new Set([
       ...Object.keys(themeParts),
       ...Object.keys(propParts),
@@ -100,7 +103,7 @@ export function useComponentCustomization<T extends ComponentName>(
 
   // Merge className
   const className = useMemo(() => {
-    const themeClassName = theme?.components?.[component]?.className || '';
+    const themeClassName = (theme as any)?.components?.[component]?.className || '';
     const propClassName = props.className || '';
     return [themeClassName, propClassName].filter(Boolean).join(' ');
   }, [theme, component, props.className]);
@@ -136,7 +139,7 @@ export function useComponentDefaultProps<T extends ComponentName>(
   const { theme } = useTheme();
   
   return useMemo(() => {
-    return theme?.components?.[component]?.defaultProps || {};
+    return (theme as any)?.components?.[component]?.defaultProps || {};
   }, [theme, component]);
 }
 
@@ -152,13 +155,6 @@ export function useMergedProps<T extends Record<string, any>>(
   }, [defaultProps, props]);
 }
 
-/**
- * Utility to create className from parts
- */
-export function mergeClassNames(...classNames: Array<string | undefined | null | false>): string {
-  return classNames.filter(Boolean).join(' ');
-}
-
 /**
  * Utility to apply CSS variables to style object
  */