@shohojdhara/atomix 0.5.1 → 0.5.2

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

@@ -206,6 +206,29 @@ export interface TokenEngineConfig {
   };
 }
 
+/**
+ * CLI component generator defaults (merged before CLI flags; flags win).
+ */
+export interface GeneratorConfig {
+  /** Default output directory for generated components */
+  outputPath?: string;
+  /** Override detected framework */
+  framework?: 'react' | 'next' | 'vanilla';
+  /** Per-feature defaults (CLI --no-* flags override) */
+  features?: {
+    storybook?: boolean;
+    hook?: boolean;
+    styles?: boolean;
+    tests?: boolean;
+  };
+  /** Composable hooks directory relative to project root */
+  hookOutputDir?: string;
+  /** Story file: side-effect import for global Atomix styles */
+  storybookCssImport?: string;
+  /** Barrel file strategy for new components */
+  barrel?: 'index' | 'none';
+}
+
 /**
  * Atomix Configuration Interface
  *
@@ -241,6 +264,17 @@ export interface AtomixConfig {
     model?: string;
     /** API key for the provider */
     apiKey?: string;
+    /** Temperature for AI creativity (0.0-1.0, default: 0.7) */
+    temperature?: number;
+    /** Maximum tokens per AI response (default: 4000) */
+    maxTokens?: number;
+    /** Rate limiting configuration */
+    rateLimit?: {
+      /** Maximum requests allowed */
+      requests: number;
+      /** Time window in milliseconds */
+      windowMs: number;
+    };
   };
 
   /**
@@ -255,6 +289,11 @@ export interface AtomixConfig {
     anonymize?: boolean;
   };
 
+  /**
+   * `atomix generate` defaults (CLI overrides these)
+   */
+  generator?: GeneratorConfig;
+
   /**
    * Theme customization (Tailwind-like)
    *

package/src/lib/theme/devtools/Comparator.tsx

@@ -48,7 +48,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>('');
   const [filterType, setFilterType] = useState<'all' | 'added' | 'removed' | 'changed'>('all');
   const [filterCategory, setFilterCategory] = useState<string>('all');
-  const searchTimeoutRef = useRef<NodeJS.Timeout>();
+  const searchTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
   // Debounce search query
   useEffect(() => {

package/src/lib/theme/devtools/Inspector.tsx

@@ -57,7 +57,7 @@ export const ThemeInspector: React.FC<ThemeInspectorProps> = ({
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>('');
   const [copiedPath, setCopiedPath] = useState<string | null>(null);
-  const searchTimeoutRef = useRef<NodeJS.Timeout>();
+  const searchTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
   // Debounce search query
   useEffect(() => {

package/src/lib/theme/devtools/LiveEditor.tsx

@@ -200,7 +200,7 @@ export const ThemeLiveEditor: React.FC<ThemeLiveEditorProps> = ({
   );
 
   // Debounced JSON update to history
-  const jsonUpdateTimeoutRef = useRef<NodeJS.Timeout>();
+  const jsonUpdateTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   useEffect(() => {
     if (error) return;
 

package/src/lib/theme/runtime/ThemeProvider.tsx

@@ -91,7 +91,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
 
     // Default fallback
     return 'default';
-  }, [defaultTheme, enablePersistence, storageKey]);
+  }, [defaultTheme, enablePersistence, storageKey, storageAdapter]);
 
   // Initialize state - handle both string and DesignTokens for defaultTheme
   const [currentTheme, setCurrentTheme] = useState<string>(() => {

package/src/styles/01-settings/_index.scss

@@ -13,6 +13,7 @@
 // Component settings
 @forward './settings.accordion';
 @forward './settings.animations';
+@forward './settings.atomix-glass';
 @forward './settings.avatar-group';
 @forward './settings.avatar';
 @forward './settings.badge';

package/src/styles/01-settings/_settings.atomix-glass.scss

@@ -0,0 +1,174 @@
+// AtomixGlass Settings
+// =============================================================================
+// Default values for glass component styling
+// These can be overridden at any level via CSS custom properties
+
+@use 'sass:map';
+@use 'settings.spacing' as *;
+@use 'settings.config' as config;
+@use 'settings.border-radius' as *;
+
+// ============================================================================
+// Border Radius
+// ============================================================================
+$glass-radius: var(#{config.$prefix}radius-md, 0.75rem) !default;
+
+// ============================================================================
+// Position
+// ============================================================================
+$glass-position: absolute !default;
+
+// ============================================================================
+// Border Width
+// ============================================================================
+$glass-border-width: var(#{config.$prefix}spacing-0-5, 0.125rem) !default;
+
+// ============================================================================
+// Z-Index Layers
+// ============================================================================
+$glass-base-z-index: 0 !default;
+$glass-z-index-background: 0 !default;
+$glass-z-index-overlay: 1 !default;
+$glass-z-index-content: 2 !default;
+
+// ============================================================================
+// Opacity Values
+// ============================================================================
+$glass-hover-1-opacity: 0 !default;
+$glass-hover-2-opacity: 0 !default;
+$glass-hover-3-opacity: 0 !default;
+$glass-base-opacity: 0.6 !default;
+$glass-overlay-opacity: 0.35 !default;
+$glass-overlay-highlight-opacity: 0.25 !default;
+
+// ============================================================================
+// Border Opacity
+// ============================================================================
+$glass-border-1-opacity: 0.18 !default;
+
+// ============================================================================
+// Over-Light Mode Opacity
+// ============================================================================
+$glass-over-light-dark-opacity: 0.5 !default;
+$glass-over-light-black-opacity: 0.25 !default;
+
+// ============================================================================
+// Gradient Colors - Hover 1 (White mode)
+// ============================================================================
+$glass-hover-1-start-color: rgba(255, 255, 255, 0.18) !default;
+$glass-hover-1-end-color: rgba(255, 255, 255, 0) !default;
+
+// ============================================================================
+// Gradient Colors - Hover 1 (Dark/Over-light mode)
+// ============================================================================
+$glass-hover-1-black-start: 0.12 !default;
+$glass-hover-1-black-mid: 0.06 !default;
+$glass-hover-1-black-stop: 60% !default;
+$glass-hover-1-black-end: 100% !default;
+
+// ============================================================================
+// Gradient Colors - Hover 2 (White mode)
+// ============================================================================
+$glass-hover-2-start-color: rgba(0, 0, 0, 0.12) !default;
+$glass-hover-2-end-color: rgba(0, 0, 0, 0) !default;
+
+// ============================================================================
+// Gradient Colors - Hover 2 (Dark/Over-light mode)
+// ============================================================================
+$glass-hover-2-black-start: 0.08 !default;
+$glass-hover-2-black-mid: 0.04 !default;
+$glass-hover-2-black-stop: 60% !default;
+$glass-hover-2-black-end: 100% !default;
+
+// ============================================================================
+// Gradient Colors - Hover 3 (White mode)
+// ============================================================================
+$glass-hover-3-start-color: rgba(255, 255, 255, 0.06) !default;
+$glass-hover-3-end-color: rgba(255, 255, 255, 0) !default;
+
+// ============================================================================
+// Gradient Colors - Hover 3 (Dark/Over-light mode)
+// ============================================================================
+$glass-hover-3-black-start: 0.06 !default;
+$glass-hover-3-black-mid: 0.03 !default;
+$glass-hover-3-black-stop: 60% !default;
+$glass-hover-3-black-end: 100% !default;
+
+// ============================================================================
+// Base Layer (White mode)
+// ============================================================================
+$glass-base-start-color: rgba(255, 255, 255, 0.08) !default;
+$glass-base-end-color: rgba(255, 255, 255, 0.02) !default;
+$glass-base-white-opacity: 0.08 !default;
+
+// ============================================================================
+// Base Layer (Dark/Over-light mode)
+// ============================================================================
+$glass-base-black-start: 0.08 !default;
+$glass-base-black-mid: 0.06 !default;
+$glass-base-black-end: 0.02 !default;
+
+// ============================================================================
+// Overlay Layer (White mode)
+// ============================================================================
+$glass-overlay-start-color: rgba(255, 255, 255, 0.12) !default;
+$glass-overlay-end-color: rgba(255, 255, 255, 0) !default;
+$glass-overlay-white-opacity: 0.12 !default;
+
+// ============================================================================
+// Overlay Layer (Dark/Over-light mode)
+// ============================================================================
+$glass-overlay-black-start: 0.1 !default;
+$glass-overlay-black-mid: 0.05 !default;
+$glass-overlay-black-stop: 40% !default;
+$glass-overlay-black-end: 0 !default;
+
+// ============================================================================
+// Overlay Highlight
+// ============================================================================
+$glass-highlight-start-color: rgba(255, 255, 255, 0.24) !default;
+$glass-highlight-end-color: rgba(255, 255, 255, 0) !default;
+$glass-highlight-opacity-multiplier: 1.1 !default;
+
+// ============================================================================
+// Border Shadow
+// ============================================================================
+$glass-border-color: rgba(255, 255, 255, 0.45) !default;
+$glass-inner-shadow-color: rgba(255, 255, 255, 0.18) !default;
+$glass-outer-shadow-color: rgba(0, 0, 0, 0.28) !default;
+
+// ============================================================================
+// Backdrop Filter
+// ============================================================================
+$glass-backdrop-filter: blur(30px) saturate(140%) brightness(110%) !default;
+
+// ============================================================================
+// Transition
+// ============================================================================
+$glass-transition: var(#{config.$prefix}transition-base) !default;
+$glass-transition-duration: 0.3s !default;
+$glass-easing: cubic-bezier(0.23, 1, 0.32, 1) !default;
+
+// ============================================================================
+// Blend Modes
+// ============================================================================
+$glass-hover-blend-mode: overlay !default;
+$glass-base-blend-mode: soft-light !default;
+$glass-overlay-blend-mode: overlay !default;
+$glass-overlay-highlight-blend-mode: screen !default;
+$glass-border-backdrop-blend-mode: overlay !default;
+$glass-border-1-blend-mode: screen !default;
+$glass-border-2-blend-mode: overlay !default;
+
+// ============================================================================
+// Background Layer Colors
+// ============================================================================
+$glass-background-dark-color: var(#{config.$prefix}gray-9, #1f2937) !default;
+$glass-background-black-color: var(#{config.$prefix}black, #000000) !default;
+
+// ============================================================================
+// Border Backdrop
+// ============================================================================
+$glass-border-backdrop-blur: 30px !default;
+$glass-border-backdrop-saturate: 140% !default;
+$glass-border-backdrop-brightness: 110% !default;

package/src/styles/01-settings/_settings.masonry-grid.scss

@@ -1,17 +1,53 @@
 @use 'settings.config' as config;
 @use 'settings.breakpoints' as breakpoints;
+@use 'settings.design-tokens' as tokens;
+@use 'settings.colors' as colors;
 
-// Define all masonry grid variables with !default flag for overriding
-$masonry-grid-gap: 16px !default;
-$masonry-grid-gap-sm: 8px !default;
-$masonry-grid-gap-lg: 24px !default;
+// === MASONRY GRID DESIGN TOKENS ===
+// Integrated with Atomix design system using CSS custom properties
+
+// Core spacing and layout tokens
+$masonry-grid-gap: var(--#{config.$prefix}spacing-16) !default;
+$masonry-grid-gap-sm: var(--#{config.$prefix}spacing-8) !default;
+$masonry-grid-gap-lg: var(--#{config.$prefix}spacing-24) !default;
+$masonry-grid-gap-xl: var(--#{config.$prefix}spacing-32) !default;
+
+// Responsive column configuration using design system breakpoints
 $masonry-grid-columns-xs: 1 !default;
 $masonry-grid-columns-sm: 2 !default;
 $masonry-grid-columns-md: 3 !default;
 $masonry-grid-columns-lg: 4 !default;
 $masonry-grid-columns-xl: 4 !default;
 $masonry-grid-columns-xxl: 5 !default;
-$masonry-grid-item-transition: all 0.3s ease-in-out !default;
 
-// Define dark mode variables if needed
+// Animation and transition tokens
+$masonry-grid-item-transition: 
+  opacity var(--#{config.$prefix}transition-duration-base) var(--#{config.$prefix}transition-timing-base),
+  top var(--#{config.$prefix}transition-duration-base) var(--#{config.$prefix}transition-timing-base),
+  left var(--#{config.$prefix}transition-duration-base) var(--#{config.$prefix}transition-timing-base) !default;
+
+$masonry-grid-item-animation-duration: var(--#{config.$prefix}transition-duration-base) !default;
+$masonry-grid-item-animation-timing: var(--#{config.$prefix}transition-timing-base) !default;
+
+// Loading state tokens
+$masonry-grid-loading-indicator-size: var(--#{config.$prefix}spacing-24) !default;
+$masonry-grid-loading-indicator-border-width: var(--#{config.$prefix}border-width-2) !default;
+$masonry-grid-loading-indicator-color: var(--#{config.$prefix}brand-border-subtle) !default;
+
+// Dark mode specific tokens (will automatically switch with design system)
 $masonry-grid-item-bg-dark: var(--#{config.$prefix}gray-9) !default;
+$masonry-grid-loading-overlay-dark: var(--#{config.$prefix}gray-20) !default;
+
+// Accessibility and focus management
+$masonry-grid-focus-ring-width: var(--#{config.$prefix}focus-ring-width) !default;
+$masonry-grid-focus-ring-color: var(--#{config.$prefix}focus-ring-color) !default;
+$masonry-grid-focus-ring-offset: var(--#{config.$prefix}focus-ring-offset) !default;
+
+// Mobile-first responsive design tokens
+$masonry-grid-min-height-mobile: var(--#{config.$prefix}spacing-200) !default;
+$masonry-grid-min-height-desktop: var(--#{config.$prefix}spacing-100) !default;
+
+// Z-index layering
+$masonry-grid-z-index-base: var(--#{config.$prefix}z-index-1) !default;
+$masonry-grid-z-index-loading: var(--#{config.$prefix}z-index-10) !default;
+$masonry-grid-z-index-focus: var(--#{config.$prefix}z-index-5) !default;

package/src/styles/02-tools/_tools.glass.scss

@@ -0,0 +1,6 @@
+// AtomixGlass Tools
+// =============================================================================
+// Glass-specific mixins and utilities
+// Note: Focus ring and other general mixins are available in tools.component
+
+@use 'tools.component' as *;