@shohojdhara/atomix 0.3.4 → 0.3.6

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/useNavbar.ts

@@ -269,20 +269,10 @@ export function useNavDropdown(initialProps?: Partial<NavDropdownProps>) {
     return isFixedBottom ? 'CaretUp' : 'CaretDown';
   };
 
-  // Keeping this for backward compatibility
-  const getIconClass = (isMegaMenu: boolean = false): string => {
-    console.warn(
-      'getIconClass is deprecated. Please use the Icon component directly with the getIconName function.'
-    );
-    const isFixedBottom = isInFixedBottomNavbar();
-    return `c-nav__icon ${isFixedBottom ? 'icon-lux-caret-up' : 'icon-lux-caret-down'}`;
-  };
-
   return {
     defaultProps,
     generateDropdownMenuClass,
     isInFixedBottomNavbar,
-    getIconClass,
     getIconName,
   };
 }

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

@@ -19,9 +19,10 @@ import type { AtomixConfig } from './index';
  * @example
  * ```typescript
  * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
+ * import { createTheme } from '@shohojdhara/atomix/theme';
  * 
  * const config = loadAtomixConfig();
- * const theme = createThemeFromConfig(config);
+ * const theme = createTheme(config.theme?.tokens || {});
  * ```
  */
 export function loadAtomixConfig(
@@ -76,26 +77,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/constants/components.ts

@@ -48,6 +48,16 @@ export const BUTTON = {
   },
 };
 
+/**
+ * ButtonGroup-specific constants
+ */
+export const BUTTON_GROUP = {
+  BASE_CLASS: 'c-btn-group',
+  CLASSES: {
+    BASE: 'c-btn-group',
+  },
+};
+
 /**
  * Callout-specific constants
  */

package/src/lib/hooks/index.ts

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

package/src/lib/hooks/useComponentCustomization.ts

@@ -9,8 +9,9 @@ import { useMemo } from 'react';
 import { useTheme } from '../theme/runtime/useTheme';
 import type { ComponentPartsMap } from '../types/partProps';
 import type { ComponentCSSVariables } from '../constants/cssVariables';
-import { mergeCSSVars } from '../theme/cssVariableMapper';
+import { mergeCSSVars } from '../theme/adapters/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
  */

package/src/lib/hooks/usePerformanceMonitor.ts

@@ -0,0 +1,149 @@
+/**
+ * Performance Monitoring Hook
+ * 
+ * Tracks component render times and re-render counts
+ * for performance analysis and optimization
+ */
+
+import { useEffect, useRef } from 'react';
+
+export interface PerformanceMetrics {
+  /**
+   * Component name
+   */
+  componentName: string;
+  /**
+   * Number of renders
+   */
+  renderCount: number;
+  /**
+   * Average render time in milliseconds
+   */
+  averageRenderTime: number;
+  /**
+   * Total render time in milliseconds
+   */
+  totalRenderTime: number;
+  /**
+   * Maximum render time in milliseconds
+   */
+  maxRenderTime: number;
+  /**
+   * Minimum render time in milliseconds
+   */
+  minRenderTime: number;
+}
+
+/**
+ * Options for performance monitoring
+ */
+export interface UsePerformanceMonitorOptions {
+  /**
+   * Component name to track
+   */
+  componentName: string;
+  /**
+   * Whether to log metrics to console (development only)
+   */
+  logToConsole?: boolean;
+  /**
+   * Threshold in milliseconds to warn about slow renders
+   */
+  warnThreshold?: number;
+  /**
+   * Callback to report metrics (e.g., to analytics)
+   */
+  onMetrics?: (metrics: PerformanceMetrics) => void;
+}
+
+/**
+ * Hook to monitor component performance
+ * 
+ * @param options - Performance monitoring options
+ * @returns Performance metrics
+ * 
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   usePerformanceMonitor({
+ *     componentName: 'MyComponent',
+ *     warnThreshold: 16, // Warn if render takes > 16ms (1 frame)
+ *   });
+ *   
+ *   return <div>Content</div>;
+ * }
+ * ```
+ */
+export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
+  const {
+    componentName,
+    logToConsole = process.env.NODE_ENV === 'development',
+    warnThreshold = 16,
+    onMetrics,
+  } = options;
+
+  const metricsRef = useRef<PerformanceMetrics>({
+    componentName,
+    renderCount: 0,
+    averageRenderTime: 0,
+    totalRenderTime: 0,
+    maxRenderTime: 0,
+    minRenderTime: Infinity,
+  });
+
+  const renderStartRef = useRef<number>(0);
+
+  useEffect(() => {
+    // Start timing the render
+    renderStartRef.current = performance.now();
+  });
+
+  useEffect(() => {
+    // Calculate render time
+    const renderTime = performance.now() - renderStartRef.current;
+    const metrics = metricsRef.current;
+
+    // Update metrics
+    metrics.renderCount += 1;
+    metrics.totalRenderTime += renderTime;
+    metrics.averageRenderTime = metrics.totalRenderTime / metrics.renderCount;
+    metrics.maxRenderTime = Math.max(metrics.maxRenderTime, renderTime);
+    metrics.minRenderTime = Math.min(metrics.minRenderTime, renderTime);
+
+    // Warn if render is slow
+    if (renderTime > warnThreshold && logToConsole) {
+      console.warn(
+        `[Performance] ${componentName} render took ${renderTime.toFixed(2)}ms ` +
+        `(threshold: ${warnThreshold}ms)`
+      );
+    }
+
+    // Log metrics in development
+    if (logToConsole && metrics.renderCount % 10 === 0) {
+      console.log(`[Performance] ${componentName} metrics:`, {
+        renderCount: metrics.renderCount,
+        averageRenderTime: metrics.averageRenderTime.toFixed(2) + 'ms',
+        maxRenderTime: metrics.maxRenderTime.toFixed(2) + 'ms',
+        minRenderTime: metrics.minRenderTime.toFixed(2) + 'ms',
+      });
+    }
+
+    // Report metrics via callback
+    if (onMetrics) {
+      onMetrics({ ...metrics });
+    }
+  });
+
+  return metricsRef.current;
+}
+
+/**
+ * Get all performance metrics for all monitored components
+ * (useful for debugging and analytics)
+ */
+export function getPerformanceMetrics(): PerformanceMetrics[] {
+  // This would need to be implemented with a global store
+  // For now, this is a placeholder
+  return [];
+}
+

package/src/lib/patterns/index.ts

@@ -11,7 +11,7 @@ export {
   createSlotComponent,
   useSlot,
   createSlotProps,
-} from './slots.tsx';
+} from './slots';
 
 export type {
   SlotProps,
@@ -32,4 +32,4 @@ export type {
   DropdownRootSlotProps,
   DropdownToggleSlotProps,
   DropdownMenuSlotProps,
-} from './slots.tsx';
+} from './slots';

package/src/lib/patterns/slots.tsx

@@ -59,7 +59,7 @@ export function renderSlot<T>(
     // Priority 2: component
     if (slotObj.component) {
       const Component = slotObj.component;
-      return <Component {...props} />;
+      return <Component {...(props as any)} />;
     }
 
     // Priority 3: children
@@ -133,7 +133,7 @@ export function createSlotComponent<T>(
       return <Element {...(props as any)}>{children}</Element>;
     }
 
-    const Component = defaultElement;
+    const Component = defaultElement as React.ComponentType<any>;
     return <Component {...slotProps}>{children}</Component>;
   };
 }

package/src/lib/theme/README.md

@@ -0,0 +1,174 @@
+# Theme System File Organization
+
+## Directory Structure
+
+The theme system is organized following senior developer best practices with clear separation of concerns and logical grouping:
+
+```
+theme/
+├── index.ts                    # Main public API exports
+├── README.md                   # This file
+│
+├── core/                       # Core theme engine
+│   ├── index.ts
+│   ├── createTheme.ts          # Main createTheme function (unified)
+│   ├── createThemeObject.ts    # Theme object creation
+│   ├── composeTheme.ts          # Theme composition and merging
+│   └── ThemeRegistry.ts        # Theme registration and discovery
+│
+├── adapters/                   # Adapters and converters
+│   ├── index.ts
+│   ├── themeAdapter.ts         # Theme ↔ DesignTokens conversion
+│   └── cssVariableMapper.ts    # CSS variable mapping utilities
+│
+├── generators/                 # Code generation
+│   ├── index.ts
+│   ├── generateCSS.ts          # CSS variable generation (simple)
+│   ├── generateCSSVariables.ts # CSS variable generation (advanced)
+│   └── cssFile.ts             # File operations (save CSS to disk)
+│
+├── runtime/                    # React runtime components
+│   ├── index.ts
+│   ├── ThemeProvider.tsx       # Main theme provider component
+│   ├── ThemeApplicator.ts      # Theme application logic
+│   ├── ThemeErrorBoundary.tsx  # Error boundary for themes
+│   ├── ThemeContext.tsx        # React context for theme management
+│   └── useTheme.ts            # React hook for theme access
+│
+├── config/                     # Configuration
+│   ├── index.ts
+│   ├── loader.ts               # Config file loader
+│   ├── configLoader.ts         # Config loading from atomix.config.ts
+│   ├── types.ts                # Config type definitions
+│   └── validator.ts            # Config validation
+│
+├── utils/                      # Utilities
+│   ├── index.ts
+│   ├── themeHelpers.ts         # Type guards and DesignTokens utilities
+│   ├── themeUtils.ts           # Theme value manipulation (colors, spacing)
+│   ├── domUtils.ts             # DOM/browser utilities
+│   └── injectCSS.ts            # CSS injection utilities
+│
+├── tokens/                     # Design tokens
+│   ├── index.ts
+│   └── tokens.ts               # Design tokens definitions
+│
+├── constants/                  # Constants
+│   ├── index.ts
+│   └── constants.ts            # System constants and default values
+│
+├── errors/                     # Error handling
+│   ├── index.ts
+│   └── errors.ts               # Error classes and error handling
+│
+├── devtools/                   # Development tools
+│   ├── index.ts
+│   ├── CLI.ts                  # Command-line interface
+│   ├── Comparator.tsx          # Theme comparison
+│   ├── Inspector.tsx           # Theme inspector
+│   ├── LiveEditor.tsx          # Live theme editor
+│   ├── Preview.tsx             # Theme preview
+│   ├── ThemeValidator.tsx      # Theme validation component
+│   └── README.md               # DevTools documentation
+│
+├── i18n/                       # Internationalization
+│   ├── index.ts
+│   └── rtl.ts                  # Right-to-left language support
+│
+└── types.ts                    # TypeScript type definitions (root level)
+```
+
+## Naming Conventions
+
+### Files and Directories
+
+1. **React Components**: Always use PascalCase (e.g., `ThemeProvider.tsx`)
+2. **Feature Modules**: Use camelCase with descriptive names (e.g., `themeAdapter.ts`)
+3. **Base Utilities**: Use lowercase for foundational utilities (e.g., `domUtils.ts`, `types.ts`)
+4. **Directories**: Use lowercase, plural for collections (e.g., `utils/`, `adapters/`)
+5. **Index Files**: Each subdirectory has an `index.ts` for clean exports
+
+### Import Patterns
+
+```typescript
+// ✅ CORRECT - Import from organized directories
+import { createTheme } from './core';
+import { themeToDesignTokens } from './adapters';
+import { generateCSSVariables } from './generators';
+import { isDesignTokens } from './utils/themeHelpers';
+
+// ❌ INCORRECT - Direct imports from root (old structure)
+import { createTheme } from './core';
+import { themeToDesignTokens } from './themeAdapter';
+```
+
+## File Organization Principles
+
+1. **Separation of Concerns**: Each directory has a single, well-defined responsibility
+2. **Logical Grouping**: Related functionality is grouped together
+3. **Clear Entry Points**: Each directory has an `index.ts` for clean exports
+4. **Consistent Naming**: Follow established naming conventions throughout
+5. **Maintainability**: Structure makes it easy to find and modify code
+
+## Directory Responsibilities
+
+### `/core` - Core Theme Engine
+- Theme creation and composition
+- Theme registry and discovery
+- Core theme logic
+
+### `/adapters` - Adapters and Converters
+- Convert between Theme objects and DesignTokens
+- CSS variable mapping utilities
+- Format transformations
+
+### `/generators` - Code Generation
+- CSS variable generation
+- File operations (save CSS to disk)
+- Code generation utilities
+
+### `/runtime` - React Runtime
+- React components (ThemeProvider, ThemeErrorBoundary)
+- React hooks (useTheme)
+- Theme application logic
+- React context
+
+### `/config` - Configuration
+- Config file loading
+- Config validation
+- Configuration types
+
+### `/utils` - Utilities
+- Theme helpers and type guards
+- Theme value manipulation
+- DOM/browser utilities
+- CSS injection
+
+### `/tokens` - Design Tokens
+- Design token definitions
+- Token creation utilities
+
+### `/constants` - Constants
+- System constants
+- Default values
+
+### `/errors` - Error Handling
+- Error classes
+- Error handling utilities
+
+### `/devtools` - Development Tools
+- Development and debugging tools
+- Theme inspection and validation
+- Live editing capabilities
+
+### `/i18n` - Internationalization
+- RTL (Right-to-Left) support
+- Internationalization utilities
+
+## Best Practices
+
+1. **Always use index files**: Import from directory index files when possible
+2. **Group related functionality**: Keep related code together
+3. **Maintain clear boundaries**: Don't mix concerns between directories
+4. **Follow naming conventions**: Consistency is key
+5. **Document changes**: Update this README when structure changes