@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/components/Upload/Upload.stories.tsx

@@ -1,22 +1,25 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { Upload } from './Upload';
+import { SIZES } from '../../lib/constants/components';
 
-export default {
+const meta = {
   title: 'Components/Upload',
   component: Upload,
   parameters: {
+    layout: 'centered',
     docs: {
       description: {
         component:
-          'A modern file upload component with drag & drop functionality, progress tracking, and multiple size variants.',
+          'The Upload component provides a modern file upload interface with drag & drop functionality, progress tracking, file preview, and validation. It supports single and multiple file uploads, custom file size limits, and provides visual feedback throughout the upload process. Ideal for forms requiring file attachments or media uploads.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       defaultValue: 'md',
       description: 'Size variant of the upload component',
     },
@@ -56,33 +59,37 @@ export default {
       description: 'Helper text displayed below the button',
     },
   },
-} as Meta<typeof Upload>;
+} satisfies Meta<typeof Upload>;
 
-const Template: StoryFn<typeof Upload> = args => (
-  <div style={{ padding: '30px', maxWidth: '600px' }}>
-    <Upload {...args} />
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 // Default upload component
-export const Default = Template.bind({});
-Default.args = {
-  size: 'md',
-  title: 'Drag and Drop files here',
-  supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
-  buttonText: 'Choose File',
-  helperText: 'Maximum size: 5MB',
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'The default upload component with medium size and standard styling.',
+export const Default: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    title: 'Drag and Drop files here',
+    supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+    buttonText: 'Choose File',
+    helperText: 'Maximum size: 5MB',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The default upload component with medium size and standard styling.',
+      },
     },
   },
 };
 
 // Size Variants
-export const SizeVariants: StoryFn<typeof Upload> = () => (
+export const SizeVariants: Story = {
+  render: () => (
   <div style={{ padding: '30px' }}>
     <div style={{ marginBottom: '40px' }}>
       <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Small Size</h3>
@@ -125,25 +132,36 @@ export const SizeVariants: StoryFn<typeof Upload> = () => (
       </div>
     </div>
   </div>
-);
-SizeVariants.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component in different sizes: small (sm), medium (md), and large (lg).',
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component in different sizes: small (sm), medium (md), and large (lg).',
+      },
     },
   },
 };
 
 // Disabled state
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
-};
-Disabled.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component in disabled state with reduced opacity and no interactions.',
+export const Disabled: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    title: 'Drag and Drop files here',
+    supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+    buttonText: 'Choose File',
+    helperText: 'Maximum size: 5MB',
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component in disabled state with reduced opacity and no interactions.',
+      },
     },
   },
 };
@@ -299,54 +317,71 @@ const WithStateControls: React.FC = () => {
   );
 };
 
-export const WithControls: StoryFn<typeof Upload> = () => <WithStateControls />;
-WithControls.parameters = {
-  docs: {
-    description: {
-      story:
-        'Interactive example showing different upload states: default, uploading with progress, success, and error states.',
+export const WithControls: Story = {
+  render: () => <WithStateControls />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Interactive example showing different upload states: default, uploading with progress, success, and error states.',
+      },
     },
   },
 };
 
 // Custom Icon
-export const CustomIcon = Template.bind({});
-CustomIcon.args = {
-  ...Default.args,
-  icon: <i className="icon-lux-upload-cloud"></i>,
-  title: 'Upload your documents',
-  supportedFilesText: 'Drag files here or click to browse',
-};
-CustomIcon.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component with a custom icon and personalized text content.',
+export const CustomIcon: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    title: 'Upload your documents',
+    supportedFilesText: 'Drag files here or click to browse',
+    buttonText: 'Choose File',
+    helperText: 'Maximum size: 5MB',
+    icon: <i className="icon-lux-upload-cloud"></i>,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component with a custom icon and personalized text content.',
+      },
     },
   },
 };
 
 // Multiple file upload
-export const MultipleFiles = Template.bind({});
-MultipleFiles.args = {
-  ...Default.args,
-  multiple: true,
-  buttonText: 'Choose Files',
-  title: 'Upload multiple files',
-  supportedFilesText: 'Select multiple files at once',
-  helperText: 'Maximum size: 5MB per file',
-};
-MultipleFiles.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component configured to accept multiple files at once.',
+export const MultipleFiles: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    multiple: true,
+    buttonText: 'Choose Files',
+    title: 'Upload multiple files',
+    supportedFilesText: 'Select multiple files at once',
+    helperText: 'Maximum size: 5MB per file',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component configured to accept multiple files at once.',
+      },
     },
   },
 };
 
 // Drag and Drop Demo
-export const DragDropDemo: StoryFn<typeof Upload> = () => {
-  const [dragState, setDragState] = useState<'idle' | 'dragging'>('idle');
-  const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
+export const DragDropDemo: Story = {
+  render: () => {
+    const [dragState, setDragState] = useState<'idle' | 'dragging'>('idle');
+    const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
 
   const handleFileSelect = (files: File[]) => {
     const fileNames = files.map(file => file.name);
@@ -415,20 +450,22 @@ export const DragDropDemo: StoryFn<typeof Upload> = () => {
         </div>
       )}
     </div>
-  );
-};
-DragDropDemo.parameters = {
-  docs: {
-    description: {
-      story:
-        'Interactive demonstration of drag & drop functionality with visual feedback and file tracking.',
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Interactive demonstration of drag & drop functionality with visual feedback and file tracking.',
+      },
     },
   },
 };
 
 // Different File Types
-export const FileTypeRestrictions: StoryFn<typeof Upload> = () => (
-  <div style={{ padding: '30px' }}>
+export const FileTypeRestrictions: Story = {
+  render: () => (
+    <div style={{ padding: '30px' }}>
     <div style={{ marginBottom: '40px' }}>
       <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Images Only</h3>
       <div style={{ maxWidth: '500px' }}>
@@ -462,11 +499,12 @@ export const FileTypeRestrictions: StoryFn<typeof Upload> = () => (
       </div>
     </div>
   </div>
-);
-FileTypeRestrictions.parameters = {
-  docs: {
-    description: {
-      story: 'Upload components configured for specific file types with appropriate messaging.',
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload components configured for specific file types with appropriate messaging.',
+      },
     },
   },
 };

package/src/components/VideoPlayer/VideoPlayer.stories.tsx

@@ -9,10 +9,10 @@
  * @component VideoPlayer
  */
 
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import React from 'react';
-import { fn } from '@storybook/test';
 import { VideoPlayerProps } from '../../lib/types/components';
 import { VideoPlayer } from './VideoPlayer';
 import type { RefObject } from 'react';
@@ -23,31 +23,15 @@ import type { RefObject } from 'react';
  * This defines the component's metadata, documentation, and controls
  * for the Storybook interface.
  */
-const meta: Meta<typeof VideoPlayer> = {
+const meta = {
   title: 'Components/VideoPlayer',
   component: VideoPlayer,
   parameters: {
     layout: 'centered',
     docs: {
       description: {
-        component: `
-# VideoPlayer Component
-
-An advanced, modern video player with comprehensive features, accessibility support, and optional glass morphism effects. Supports both regular video files and YouTube embeds with seamless integration.
-
-## Key Features
+        component: `The VideoPlayer component provides an advanced, modern video player with comprehensive features including custom controls, YouTube integration, glass morphism effects, and full accessibility support. It supports both regular video files and YouTube embeds with seamless auto-detection and provides a rich, interactive viewing experience.
 
-### 🎥 **Dual Video Support**
-- **Regular Videos**: Native HTML5 video with custom controls
-- **YouTube Integration**: Seamless YouTube embedding with auto-detection
-
-### ✨ **Glass Morphism Effects**
-- **Configurable Glass Overlay**: Optional frosted glass effects with AtomixGlass integration
-- **Custom Content Support**: Interactive overlays and call-to-action elements
-- **Multiple Glass Modes**: Standard, polar, prominent, and shader effects
-
-### 🎛️ **Advanced Controls**
-- **Custom UI**: Modern, responsive control interface
 - **Quality Selection**: Multiple video resolution options
 - **Playback Speed**: Adjustable speed controls (0.25x to 4x)
 - **Subtitle Support**: Multi-language subtitle tracks with WebVTT
@@ -69,8 +53,7 @@ An advanced, modern video player with comprehensive features, accessibility supp
 ### 📱 **Multi-Platform**
 - **Cross-Browser**: Works on all modern browsers
 - **Mobile Optimized**: Touch-friendly controls and responsive layout
-- **Performance**: Optimized for smooth playback and effects
-        `,
+- **Performance**: Optimized for smooth playback and effects`,
       },
     },
   },
@@ -164,10 +147,10 @@ An advanced, modern video player with comprehensive features, accessibility supp
       description: 'Additional CSS class names',
     },
   },
-};
+} satisfies Meta<typeof VideoPlayer>;
 
 export default meta;
-type Story = StoryObj<VideoPlayerProps>;
+type Story = StoryObj<typeof meta>;
 
 /**
  * Background Wrapper Component

package/src/components/index.ts

@@ -9,6 +9,7 @@ export { default as Badge, type BadgeProps } from './Badge/Badge';
 export { default as Block, type BlockProps } from './Block';
 export { default as Breadcrumb, type BreadcrumbProps } from './Breadcrumb/Breadcrumb';
 export { default as Button, type ButtonProps } from './Button/Button';
+export { default as ButtonGroup, type ButtonGroupProps } from './Button/ButtonGroup';
 export { default as Callout, type CalloutProps } from './Callout/Callout';
 export { default as Card, type CardProps } from './Card/Card';
 // Card sub-components

package/src/lib/composables/useAtomixGlass.ts

@@ -309,14 +309,14 @@ export function useAtomixGlass({
           //     timestamp: new Date().toISOString(),
           //   });
           // }
-        } else if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
+        } else if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
           //   console.log(
           //     '[AtomixGlass] No corner radius found, using default:',
           //     CONSTANTS.DEFAULT_CORNER_RADIUS
           //   );
         }
       } catch (error) {
-        if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
+        if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
           console.error('[AtomixGlass] Error extracting corner radius:', error);
         }
       }
@@ -412,7 +412,7 @@ export function useAtomixGlass({
               }
             } catch (styleError) {
               // Silently continue if getting computed style fails for this element
-              if (process.env.NODE_ENV === 'development') {
+              if (typeof process === 'undefined' || process.env?.NODE_ENV === 'development') {
                 console.debug('AtomixGlass: Error getting computed style for element:', styleError);
               }
             }
@@ -484,7 +484,7 @@ export function useAtomixGlass({
           }
         } catch (error) {
           // Enhanced error logging with context
-          if (process.env.NODE_ENV === 'development') {
+          if (typeof process === 'undefined' || process.env?.NODE_ENV === 'development') {
             console.warn('AtomixGlass: Error detecting background brightness:', error);
           }
           const result = false;
@@ -607,7 +607,7 @@ export function useAtomixGlass({
       setInternalMouseOffset(newOffset);
       setInternalGlobalMousePosition(globalPos);
 
-      if (process.env.NODE_ENV !== 'production' && enablePerformanceMonitoring) {
+      if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && enablePerformanceMonitoring) {
         const endTime = performance.now();
         const duration = endTime - startTime;
         // if (duration > 5) {
@@ -964,7 +964,7 @@ export function useAtomixGlass({
       };
 
       // Debug logging
-      if (process.env.NODE_ENV !== 'production' && debugOverLight) {
+      if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugOverLight) {
         console.log('[AtomixGlass] OverLight Config:', {
           isOverLight,
           config: {
@@ -996,7 +996,7 @@ export function useAtomixGlass({
     }
 
     // Debug logging for non-object configs
-    if (process.env.NODE_ENV !== 'production' && debugOverLight) {
+    if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugOverLight) {
       console.log('[AtomixGlass] OverLight Config:', {
         isOverLight,
         configType: typeof overLight === 'boolean' ? (overLight ? 'true' : 'false') : overLight,
@@ -1037,10 +1037,9 @@ export function useAtomixGlass({
     [onClick]
   );
 
-  // No-op handler for backward compatibility (mouse tracking now handled by shared tracker)
+  // Mouse tracking is now handled by shared global tracker
   const handleMouseMove = useCallback((_e: MouseEvent) => {
-    // Mouse tracking is now handled by shared global tracker
-    // This handler is kept for backward compatibility with existing code
+    // Mouse tracking handled by shared global tracker
   }, []);
 
   return {

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/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(
@@ -45,7 +46,7 @@ export function loadAtomixConfig(
     // In browser environments, config loading is not supported
     if (typeof window !== 'undefined') {
         if (required) {
-            throw new Error('Config loading not supported in browser environment');
+            throw new Error('loadAtomixConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.');
         }
         return defaultConfig;
     }
@@ -143,5 +144,4 @@ export function resolveConfigPath(): string | null {
     return null;
 }
 
-export default loadAtomixConfig;
-
+export default loadAtomixConfig;

package/src/lib/constants/components.ts

@@ -32,6 +32,13 @@ export const CLASS_PREFIX = {
 /**
  * Button-specific constants
  */
+export const THEME_NAMING = {
+  BUTTON_PREFIX: 'btn',
+  ICON_ELEMENT: 'icon',
+  LABEL_ELEMENT: 'label',
+  SPINNER_ELEMENT: 'spinner',
+};
+
 export const BUTTON = {
   BASE_CLASS: 'c-btn',
   ICON_CLASS: 'c-btn__icon',
@@ -48,6 +55,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/useComponentCustomization.ts

@@ -9,7 +9,7 @@ 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';
 

package/src/lib/hooks/usePerformanceMonitor.ts

@@ -77,7 +77,7 @@ export interface UsePerformanceMonitorOptions {
 export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
   const {
     componentName,
-    logToConsole = process.env.NODE_ENV === 'development',
+    logToConsole = (typeof process === 'undefined' || process.env?.NODE_ENV === 'development'),
     warnThreshold = 16,
     onMetrics,
   } = options;

package/src/lib/hooks/useThemeTokens.ts

@@ -0,0 +1,105 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../theme/runtime/ThemeContext';
+import { useTheme } from '../theme/runtime/useTheme';
+
+/**
+ * Standardized hook for accessing theme tokens in components
+ * 
+ * Provides consistent access to theme values across all components
+ * using either CSS custom properties or theme object values.
+ */
+export function useThemeTokens() {
+  const { theme, activeTheme } = useTheme();
+
+  // Helper function to get CSS variable value
+  const getToken = useCallback((tokenName: string, fallback?: string) => {
+    if (typeof window === 'undefined') return fallback || '';
+
+    const cssVarName = `--atomix-${tokenName}`;
+    const computedStyle = getComputedStyle(document.documentElement);
+    return computedStyle.getPropertyValue(cssVarName).trim() || fallback || '';
+  }, []);
+
+  // Helper function to get theme object value
+  const getThemeValue = useCallback((path: string, fallback?: any) => {
+    if (!activeTheme) return fallback;
+
+    // Navigate through nested theme object using dot notation
+    return path.split('.').reduce((obj, key) => obj?.[key], activeTheme) || fallback;
+  }, [activeTheme]);
+
+  // Return unified API for accessing theme values
+  return {
+    theme,
+    activeTheme,
+    getToken,
+    getThemeValue,
+    // Commonly used tokens with fallbacks
+    colors: {
+      primary: getToken('primary', '#3b82f6'),
+      secondary: getToken('secondary', '#10b981'),
+      error: getToken('error', '#ef4444'),
+      success: getToken('success', '#22c55e'),
+      warning: getToken('warning', '#eab308'),
+      info: getToken('info', '#3b82f6'),
+      light: getToken('light', '#f9fafb'),
+      dark: getToken('dark', '#111827'),
+    },
+    spacing: {
+      1: getToken('spacing-1', '0.25rem'),
+      2: getToken('spacing-2', '0.5rem'),
+      3: getToken('spacing-3', '0.75rem'),
+      4: getToken('spacing-4', '1rem'),
+      5: getToken('spacing-5', '1.25rem'),
+      6: getToken('spacing-6', '1.5rem'),
+      8: getToken('spacing-8', '2rem'),
+      10: getToken('spacing-10', '2.5rem'),
+      12: getToken('spacing-12', '3rem'),
+      16: getToken('spacing-16', '4rem'),
+      20: getToken('spacing-20', '5rem'),
+    },
+    borderRadius: {
+      sm: getToken('border-radius-sm', '0.25rem'),
+      md: getToken('border-radius-md', '0.5rem'),
+      lg: getToken('border-radius-lg', '0.75rem'),
+      xl: getToken('border-radius-xl', '1rem'),
+      full: getToken('border-radius-full', '9999px'),
+    },
+    typography: {
+      fontFamily: {
+        sans: getToken('font-sans-serif', 'Inter, system-ui, sans-serif'),
+        serif: getToken('font-serif', 'Georgia, serif'),
+        mono: getToken('font-monospace', 'Fira Code, monospace'),
+      },
+      fontSize: {
+        xs: getToken('font-size-xs', '0.75rem'),
+        sm: getToken('font-size-sm', '0.875rem'),
+        md: getToken('font-size-md', '1rem'),
+        lg: getToken('font-size-lg', '1.125rem'),
+        xl: getToken('font-size-xl', '1.25rem'),
+        '2xl': getToken('font-size-2xl', '1.5rem'),
+        '3xl': getToken('font-size-3xl', '1.875rem'),
+        '4xl': getToken('font-size-4xl', '2.25rem'),
+      },
+      fontWeight: {
+        light: getToken('font-weight-light', '300'),
+        normal: getToken('font-weight-normal', '400'),
+        medium: getToken('font-weight-medium', '500'),
+        semibold: getToken('font-weight-semibold', '600'),
+        bold: getToken('font-weight-bold', '700'),
+      },
+    },
+    shadows: {
+      sm: getToken('box-shadow-sm', '0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
+      md: getToken('box-shadow-md', '0 4px 6px -1px rgba(0, 0, 0, 0.1)'),
+      lg: getToken('box-shadow-lg', '0 10px 15px -3px rgba(0, 0, 0, 0.1)'),
+      xl: getToken('box-shadow-xl', '0 20px 25px -5px rgba(0, 0, 0, 0.1)'),
+      inset: getToken('box-shadow-inset', 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)'),
+    },
+    transitions: {
+      fast: getToken('transition-fast', '150ms'),
+      base: getToken('transition-base', '200ms'),
+      slow: getToken('transition-slow', '300ms'),
+    },
+  };
+}