@shohojdhara/atomix 0.5.1 → 0.5.4

package/src/lib/composables/useSideMenu.ts

@@ -8,20 +8,18 @@ import { SIDE_MENU } from '../constants/components';
  * @returns SideMenu state and methods
  */
 export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
-  // Default side menu properties
-  const defaultProps: Partial<SideMenuProps> = {
-    collapsible: true,
-    collapsibleDesktop: false,
-    defaultCollapsedDesktop: false,
-    isOpen: false,
-    ...initialProps,
-  };
+  const {
+    collapsible = true,
+    collapsibleDesktop = false,
+    defaultCollapsedDesktop = false,
+    isOpen,
+    onToggle,
+    disabled = false,
+  } = initialProps || {};
 
   // Local open state for when not controlled externally
   const [isOpenState, setIsOpenState] = useState(
-    defaultProps.defaultCollapsedDesktop !== undefined
-      ? !defaultProps.defaultCollapsedDesktop
-      : defaultProps.isOpen || false
+    defaultCollapsedDesktop !== undefined ? !defaultCollapsedDesktop : isOpen || false
   );
 
   // Refs for managing responsive behavior
@@ -31,19 +29,18 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
 
   // Update local state when external state changes
   useEffect(() => {
-    if (typeof defaultProps.isOpen !== 'undefined') {
-      setIsOpenState(defaultProps.isOpen);
-    } else if (defaultProps.defaultCollapsedDesktop !== undefined) {
-      setIsOpenState(!defaultProps.defaultCollapsedDesktop);
+    if (typeof isOpen !== 'undefined') {
+      setIsOpenState(isOpen);
+    } else if (defaultCollapsedDesktop !== undefined) {
+      setIsOpenState(!defaultCollapsedDesktop);
     }
-  }, [defaultProps.isOpen, defaultProps.defaultCollapsedDesktop]);
+  }, [isOpen, 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;
+    const shouldCollapse = isMobile ? collapsible : collapsibleDesktop;
+    const currentOpen = typeof isOpen !== 'undefined' ? isOpen : isOpenState;
 
     if (shouldCollapse && wrapperRef.current && innerRef.current) {
       // Use setTimeout to ensure DOM is fully rendered
@@ -62,13 +59,13 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
       wrapperRef.current.style.height = 'auto';
     }
     return undefined;
-  }, []); // Only run on mount
+  }, [collapsible, collapsibleDesktop, isOpen, isOpenState]);
 
   // Handle responsive behavior - vertical collapse for both mobile and desktop
   useEffect(() => {
     const handleResize = () => {
       const isMobile = window.innerWidth < 768; // MD breakpoint
-      const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
+      const shouldCollapse = isMobile ? collapsible : collapsibleDesktop;
 
       if (!shouldCollapse) {
         // Not collapsible - always show content
@@ -77,8 +74,7 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
         }
       } 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;
+        const currentOpen = typeof isOpen !== 'undefined' ? isOpen : isOpenState;
 
         // Use requestAnimationFrame to ensure DOM is ready
         requestAnimationFrame(() => {
@@ -101,22 +97,15 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
       clearTimeout(timeoutId);
       window.removeEventListener('resize', handleResize);
     };
-  }, [
-    defaultProps.collapsible,
-    defaultProps.collapsibleDesktop,
-    defaultProps.isOpen,
-    defaultProps.onToggle,
-    isOpenState,
-  ]);
+  }, [collapsible, collapsibleDesktop, isOpen, onToggle, isOpenState]);
 
   // Update wrapper height when open state changes (both mobile and desktop)
   useEffect(() => {
     const isMobile = window.innerWidth < 768;
-    const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
+    const shouldCollapse = isMobile ? collapsible : collapsibleDesktop;
 
     if (shouldCollapse && wrapperRef.current && innerRef.current) {
-      const currentOpen =
-        typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+      const currentOpen = typeof isOpen !== 'undefined' ? isOpen : isOpenState;
 
       // Use requestAnimationFrame to ensure DOM is ready
       requestAnimationFrame(() => {
@@ -132,7 +121,7 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
       // Not collapsible - always show content
       wrapperRef.current.style.height = 'auto';
     }
-  }, [defaultProps.isOpen, isOpenState, defaultProps.collapsible, defaultProps.collapsibleDesktop]);
+  }, [isOpen, isOpenState, collapsible, collapsibleDesktop]);
 
   /**
    * Generate side menu class based on properties
@@ -159,14 +148,13 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
    * Handle toggle click (mobile)
    */
   const handleToggle = () => {
-    if (defaultProps.disabled) return;
+    if (disabled) return;
 
-    const newState =
-      typeof defaultProps.isOpen !== 'undefined' ? !defaultProps.isOpen : !isOpenState;
+    const newState = typeof isOpen !== 'undefined' ? !isOpen : !isOpenState;
 
-    if (typeof defaultProps.onToggle === 'function') {
+    if (typeof onToggle === 'function') {
       // Controlled component
-      defaultProps.onToggle(newState);
+      onToggle(newState);
     } else {
       // Uncontrolled component
       setIsOpenState(newState);
@@ -185,11 +173,10 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
    * @returns Current open state
    */
   const getCurrentOpenState = (): boolean => {
-    return typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+    return typeof isOpen !== 'undefined' ? isOpen : isOpenState;
   };
 
   return {
-    defaultProps,
     isOpenState: getCurrentOpenState(),
     wrapperRef,
     innerRef,

package/src/lib/composables/useSlider.ts

@@ -39,7 +39,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
   } = options;
 
-  const slides = Array.isArray(rawSlides) ? rawSlides : [];
+  const slides = useMemo(() => (Array.isArray(rawSlides) ? rawSlides : []), [rawSlides]);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -364,8 +364,6 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     isTransitioning,
     speed,
     onSlideChange,
-    allSlides.length,
-    loopedSlides,
     autoplay,
   ]);
 
@@ -426,8 +424,6 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     isTransitioning,
     speed,
     onSlideChange,
-    allSlides.length,
-    loopedSlides,
     autoplay,
   ]);
 
@@ -458,7 +454,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
         onSlideChange?.(index);
       }, speed);
     },
-    [realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides, autoplay]
+    [realIndex, isTransitioning, speed, onSlideChange, loop, slides.length, autoplay]
   );
 
   const handleTouchStart = useCallback(

package/src/lib/composables/useTooltip.ts

@@ -28,8 +28,8 @@ interface UseTooltipResult {
   isVisible: boolean;
   isPositioned: boolean;
   tooltipId: string;
-  triggerRef: RefObject<HTMLDivElement>;
-  tooltipRef: RefObject<HTMLDivElement>;
+  triggerRef: RefObject<HTMLDivElement | null>;
+  tooltipRef: RefObject<HTMLDivElement | null>;
   tooltipStyle: React.CSSProperties;
   arrowStyle: React.CSSProperties;
   showTooltip: () => void;

package/src/lib/config/index.ts

@@ -5,328 +5,43 @@
  *
  * External developers can create `atomix.config.ts` in their project root
  * to customize design tokens, similar to Tailwind's tailwind.config.js
- *
- * @example
- * ```typescript
- * // atomix.config.ts (in your project)
- * import { defineConfig } from '@shohojdhara/atomix/config';
- *
- * export default defineConfig({
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { main: '#7AFFD7' },
- *       },
- *     },
- *   },
- * });
- * ```
- */
-
-import type { Theme } from '../theme/types';
-
-/**
- * Color Scale (1-10)
- */
-export interface ColorScale {
-  1?: string;
-  2?: string;
-  3?: string;
-  4?: string;
-  5?: string;
-  6?: string;
-  7?: string;
-  8?: string;
-  9?: string;
-  10?: string;
-  [key: string]: string | undefined;
-}
-
-/**
- * Palette Color Options
- */
-export interface PaletteColorOptions {
-  main: string;
-  light?: string;
-  dark?: string;
-  contrastText?: string;
-}
-
-/**
- * Design Tokens Schema (Tailwind-like)
- */
-export interface ThemeTokens {
-  /** Color palette */
-  colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
-  /** Spacing scale */
-  spacing?: Record<string, string>;
-  /** Border radius scale */
-  borderRadius?: Record<string, string>;
-  /** Typography scale and settings */
-  typography?: {
-    fontFamilies?: Record<string, string>;
-    fontSizes?: Record<string, string>;
-    fontWeights?: Record<string, string | number>;
-    lineHeights?: Record<string, string | number>;
-    letterSpacings?: Record<string, string>;
-  };
-  /** Shadow scale */
-  shadows?: Record<string, string>;
-  /** Z-index scale */
-  zIndex?: Record<string, string | number>;
-  /** Breakpoints scale */
-  breakpoints?: Record<string, string | number>;
-  /** Transitions settings */
-  transitions?: {
-    durations?: Record<string, string>;
-    easings?: Record<string, string>;
-  };
-}
-
-/**
- * CSS Theme Definition
- */
-export interface CSSThemeDefinition {
-  type: 'css';
-  name: string;
-  class?: string;
-  description?: string;
-  author?: string;
-  version?: string;
-  tags?: string[];
-  supportsDarkMode?: boolean;
-  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-  a11y?: {
-    contrastTarget?: number;
-    modes?: string[];
-  };
-  color?: string;
-  features?: string[];
-  dependencies?: string[];
-  cssPath?: string;
-}
-
-/**
- * JavaScript Theme Definition
- */
-export interface JSThemeDefinition {
-  type: 'js';
-  name: string;
-  class?: string;
-  description?: string;
-  author?: string;
-  version?: string;
-  tags?: string[];
-  supportsDarkMode?: boolean;
-  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-  a11y?: {
-    contrastTarget?: number;
-    modes?: string[];
-  };
-  color?: string;
-  features?: string[];
-  dependencies?: string[];
-  createTheme: () => Theme;
-}
-
-/**
- * Theme Definition (CSS or JS)
- */
-export type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
-
-/**
- * Build configuration (migrated from theme.config.ts)
- */
-export interface BuildConfig {
-  output?: {
-    directory?: string;
-    formats?: {
-      expanded?: string;
-      compressed?: string;
-    };
-  };
-  sass?: {
-    style?: 'expanded' | 'compressed';
-    sourceMap?: boolean;
-    loadPaths?: string[];
-  };
-}
-
-/**
- * Runtime configuration (migrated from theme.config.ts)
- */
-export interface RuntimeConfig {
-  basePath?: string;
-  cdnPath?: string | null;
-  preload?: string[];
-  lazy?: boolean;
-  defaultTheme?: string;
-  storageKey?: string;
-  dataAttribute?: string;
-  enablePersistence?: boolean;
-  useMinified?: boolean;
-}
-
-/**
- * Integration settings (migrated from theme.config.ts)
  */
-export interface IntegrationConfig {
-  cssVariables?: Record<string, string>;
-  classNames?: {
-    theme?: string;
-    colorMode?: string;
-  };
-}
 
-/**
- * Plugin Configuration
- */
-export interface PluginConfig {
-  name: string;
-  options?: Record<string, any>;
-}
-
-/**
- * Token Provider Configuration
- */
-export interface TokenProviderConfig {
-  type: 'figma' | 'style-dictionary' | 'w3c' | string;
-  options?: Record<string, any>;
-}
-
-/**
- * Token Engine Configuration
- */
-export interface TokenEngineConfig {
-  providers?: Record<string, TokenProviderConfig>;
-  sync?: {
-    pull?: boolean;
-    push?: boolean;
-    onBuild?: boolean;
-  };
-}
-
-/**
- * Atomix Configuration Interface
- *
- * Tailwind-like configuration for external developers.
- * Focus on theme customization - build/runtime configs are internal only.
- */
-export interface AtomixConfig {
-  /**
-   * CSS variable prefix (default: 'atomix')
-   *
-   * Change this to customize all CSS variable names.
-   * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
-   */
-  prefix?: string;
-
-  /**
-   * Plugins to extend CLI functionality
-   */
-  plugins?: (string | PluginConfig)[];
-
-  /**
-   * Universal Token Engine configuration
-   */
-  tokenEngine?: TokenEngineConfig;
-
-  /**
-   * AI-Assisted Scaffolding configuration
-   */
-  ai?: {
-    /** AI provider (default: 'openai') */
-    provider?: 'openai' | 'anthropic';
-    /** LLM model to use */
-    model?: string;
-    /** API key for the provider */
-    apiKey?: string;
-  };
-
-  /**
-   * Performance & Telemetry (Phase 4)
-   */
-  telemetry?: {
-    /** Enable local telemetry logging (default: false) */
-    enabled?: boolean;
-    /** Output path for telemetry logs (default: '.atomix/telemetry.json') */
-    path?: string;
-    /** Anonymize telemetry data (default: true) */
-    anonymize?: boolean;
-  };
-
-  /**
-   * Theme customization (Tailwind-like)
-   *
-   * Use `extend` to add or override design tokens.
-   * Use `tokens` to completely replace the default token system (advanced).
-   */
-  theme?: {
-    /**
-     * Extend the default design tokens
-     *
-     * This is the recommended way to customize Atomix.
-     * Your values will override or extend the base tokens.
-     */
-    extend?: ThemeTokens;
-
-    /**
-     * Override the default tokens entirely (advanced)
-     *
-     * Use with caution - this replaces the entire token system.
-     * Most users should use `extend` instead.
-     */
-    tokens?: ThemeTokens;
-
-    /**
-     * Register custom themes (optional)
-     *
-     * Define CSS or JavaScript themes that can be loaded dynamically.
-     */
-    themes?: Record<string, ThemeDefinition>;
-  };
-
-  // Internal configurations (for library development only)
-  // These are not needed for external developers
-  /** @internal Build configuration (internal use only) */
-  build?: BuildConfig;
-  /** @internal Runtime configuration (internal use only) */
-  runtime?: RuntimeConfig;
-  /** @internal Integration settings (internal use only) */
-  integration?: IntegrationConfig;
-  /** @internal Theme dependencies mapping (internal use only) */
-  dependencies?: Record<string, string[]>;
-}
-
-/**
- * Helper function to define Atomix configuration with type safety
- *
- * @param config - Atomix configuration object
- * @returns The configuration object
- */
-/**
- * Helper function to define Atomix configuration with type safety
- *
- * Similar to Tailwind's defineConfig, provides autocomplete and type checking.
- *
- * @param config - Atomix configuration object
- * @returns The configuration object
- *
- * @example
- * ```typescript
- * import { defineConfig } from '@shohojdhara/atomix/config';
- *
- * export default defineConfig({
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { main: '#7AFFD7' },
- *       },
- *     },
- *   },
- * });
- * ```
- */
-export function defineConfig(config: AtomixConfig): AtomixConfig {
-  return config;
-}
+export { 
+  defineConfig,
+  type AtomixConfig,
+  type ThemeTokens,
+  type ThemeDefinition,
+  type CSSThemeDefinition,
+  type JSThemeDefinition,
+  type ColorScale,
+  type PaletteColorOptions,
+  type InteractiveEffectsConfig,
+  type OptimizationConfig,
+  type VisualPolishConfig,
+  type BuildConfig,
+  type RuntimeConfig,
+  type IntegrationConfig,
+  type PluginConfig,
+  type TokenProviderConfig,
+  type TokenEngineConfig,
+  type GeneratorConfig,
+  type DesignTokenCategory,
+  type DesignTokenValue
+} from './types';
+
+// Export the config loader functions
+export { 
+  loadAtomixConfig, 
+  resolveConfigPath 
+} from './loader';
+
+// Export the validator
+export { 
+  validateConfiguration, 
+  printConfigReport,
+  type ValidationResult 
+} from './validator';
+
+// Export convenience functions from the public API
+export { loadConfig, validateConfig } from './public-api';