@shohojdhara/atomix 0.3.15 → 0.4.0

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

@@ -29,10 +29,7 @@ const TestComponent = ({ onThemeChange }: { onThemeChange?: (theme: string) => v
       >
         Update Typography
       </button>
-      <button
-        data-testid="reset-theme"
-        onClick={() => setTheme(defaultTheme)}
-      >
+      <button data-testid="reset-theme" onClick={() => setTheme(defaultTheme)}>
         Reset Theme
       </button>
     </div>
@@ -40,14 +37,14 @@ const TestComponent = ({ onThemeChange }: { onThemeChange?: (theme: string) => v
 };
 
 const defaultTheme = {
-  'primary': '#7c3aed',
-  'secondary': '#6b7280',
-  'success': '#22c55e',
-  'error': '#ef4444',
-  'warning': '#eab308',
-  'info': '#3b82f6',
-  'light': '#f9fafb',
-  'dark': '#1f2937',
+  primary: '#7c3aed',
+  secondary: '#6b7280',
+  success: '#22c55e',
+  error: '#ef4444',
+  warning: '#eab308',
+  info: '#3b82f6',
+  light: '#f9fafb',
+  dark: '#1f2937',
   'primary-rgb': '124, 58, 237',
   'secondary-rgb': '107, 114, 128',
   'success-rgb': '34, 197, 94',
@@ -164,9 +161,10 @@ const defaultTheme = {
   'info-gradient': 'linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe)',
   'warning-gradient': 'linear-gradient(135deg, #fefce8, #fef9c3, #fef08a)',
   'error-gradient': 'linear-gradient(135deg, #fef2f2, #fee2e2, #fecaca)',
-  'gradient': 'linear-gradient(135deg, #f9fafb, #f3f4f6, #e5e7eb)',
+  gradient: 'linear-gradient(135deg, #f9fafb, #f3f4f6, #e5e7eb)',
   'font-sans-serif': '"Roboto", sans-serif',
-  'font-monospace': 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  'font-monospace':
+    'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
   'body-font-family': '"Roboto", sans-serif',
   'body-font-size': '1rem',
   'body-font-weight': '400',
@@ -299,7 +297,7 @@ const defaultTheme = {
 
 const customTheme = {
   ...defaultTheme,
-  'primary': '#8b5cf6',
+  primary: '#8b5cf6',
   'error-text-emphasis': '#7f1d1d',
   'success-text-emphasis': '#14532d',
 };
@@ -406,7 +404,7 @@ describe('ThemeProvider', () => {
 
   it('should handle theme change callbacks', () => {
     const onThemeChange = vi.fn();
-    
+
     render(
       <ThemeProvider theme={defaultTheme}>
         <TestComponent onThemeChange={onThemeChange} />
@@ -421,8 +419,8 @@ describe('ThemeProvider', () => {
     expect(onThemeChange).toHaveBeenCalledWith(
       expect.objectContaining({
         colors: expect.objectContaining({
-          primary: '#8b5cf6'
-        })
+          primary: '#8b5cf6',
+        }),
       })
     );
   });
@@ -442,10 +440,7 @@ describe('ThemeProvider', () => {
       fireEvent.click(screen.getByTestId('update-primary'));
     });
 
-    expect(setItemSpy).toHaveBeenCalledWith(
-      'atomix-theme',
-      expect.stringContaining('#8b5cf6')
-    );
+    expect(setItemSpy).toHaveBeenCalledWith('atomix-theme', expect.stringContaining('#8b5cf6'));
 
     setItemSpy.mockRestore();
   });
@@ -514,10 +509,10 @@ describe('ThemeProvider', () => {
     // Update only part of the colors section
     const TestPartialUpdate = () => {
       const { updateTheme } = useTheme();
-      
+
       return (
-        <button 
-          data-testid="partial-update" 
+        <button
+          data-testid="partial-update"
           onClick={() => updateTheme('colors', { secondary: '#ec4899' })}
         >
           Partial Update
@@ -556,10 +551,10 @@ describe('useTheme Hook Error Handling', () => {
   it('should handle invalid theme sections gracefully', () => {
     const TestInvalidUpdate = () => {
       const { updateTheme } = useTheme();
-      
+
       return (
-        <button 
-          data-testid="invalid-update" 
+        <button
+          data-testid="invalid-update"
           onClick={() => updateTheme('invalid-section' as ThemeSection, { test: 'value' })}
         >
           Invalid Update
@@ -585,4 +580,4 @@ describe('useTheme Hook Error Handling', () => {
 
     consoleSpy.mockRestore();
   });
-});
+});

package/src/lib/theme/runtime/index.ts

@@ -1,6 +1,6 @@
 /**
  * Theme Runtime Module
- * 
+ *
  * Runtime components for theme management
  */
 
@@ -11,7 +11,4 @@ export { useThemeTokens } from './useThemeTokens';
 export { ThemeApplicator, getThemeApplicator, applyTheme } from './ThemeApplicator';
 export type { ThemeErrorBoundaryProps } from './ThemeErrorBoundary';
 
-export type {
-  ThemeChangeEvent,
-  ThemeLoadOptions,
-} from '../types';
+export type { ThemeChangeEvent, ThemeLoadOptions } from '../types';

package/src/lib/theme/runtime/useTheme.ts

@@ -1,6 +1,6 @@
 /**
  * useTheme Hook
- * 
+ *
  * React hook for accessing theme context
  */
 
@@ -10,14 +10,14 @@ import type { UseThemeReturn } from '../types';
 
 /**
  * useTheme hook
- * 
+ *
  * Access theme context and theme management functions
- * 
+ *
  * @example
  * ```tsx
  * function MyComponent() {
  *   const { theme, setTheme, availableThemes } = useTheme();
- *   
+ *
  *   return (
  *     <div>
  *       <p>Current theme: {theme}</p>
@@ -30,22 +30,22 @@ import type { UseThemeReturn } from '../types';
  * ```
  */
 export function useTheme(): UseThemeReturn {
-    const context = useContext(ThemeContext);
+  const context = useContext(ThemeContext);
 
-    if (!context) {
-        throw new Error('useTheme must be used within a ThemeProvider');
-    }
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
 
-    return {
-        theme: context.theme,
-        activeTokens: context.activeTokens,
-        setTheme: context.setTheme,
-        availableThemes: context.availableThemes,
-        isLoading: context.isLoading,
-        error: context.error,
-        isThemeLoaded: context.isThemeLoaded,
-        preloadTheme: context.preloadTheme,
-    };
+  return {
+    theme: context.theme,
+    activeTokens: context.activeTokens,
+    setTheme: context.setTheme,
+    availableThemes: context.availableThemes,
+    isLoading: context.isLoading,
+    error: context.error,
+    isThemeLoaded: context.isThemeLoaded,
+    preloadTheme: context.preloadTheme,
+  };
 }
 
 export default useTheme;

package/src/lib/theme/runtime/useThemeTokens.ts

@@ -9,29 +9,29 @@ import type { DesignTokens } from '../tokens/tokens';
  * and DesignTokens.
  */
 type ThemeTokens = {
-    theme: string;
-    activeTokens: DesignTokens | null;
-    getToken: (tokenName: string, fallback?: string) => string;
-    colors: {
-      primary: string;
-      secondary: string;
-      error: string;
-      success: string;
-      warning: string;
-      info: string;
-      light: string;
-      dark: string;
-    };
-    spacing: Record<string, string>;
-    borderRadius: Record<string, string>;
-    typography: {
-      fontFamily: Record<string, string>;
-      fontSize: Record<string, string>;
-      fontWeight: Record<string, string>;
-    };
-    shadows: Record<string, string>;
-    transitions: Record<string, string>;
+  theme: string;
+  activeTokens: DesignTokens | null;
+  getToken: (tokenName: string, fallback?: string) => string;
+  colors: {
+    primary: string;
+    secondary: string;
+    error: string;
+    success: string;
+    warning: string;
+    info: string;
+    light: string;
+    dark: string;
+  };
+  spacing: Record<string, string>;
+  borderRadius: Record<string, string>;
+  typography: {
+    fontFamily: Record<string, string>;
+    fontSize: Record<string, string>;
+    fontWeight: Record<string, string>;
   };
+  shadows: Record<string, string>;
+  transitions: Record<string, string>;
+};
 
 export function useThemeTokens(): ThemeTokens {
   const { theme, activeTokens } = useTheme();

package/src/lib/theme/test/testTheme.ts

@@ -1,6 +1,6 @@
 /**
  * Test Theme
- * 
+ *
  * Comprehensive test theme demonstrating both DesignTokens and Theme object approaches.
  * This file can be used for testing the theme system, adapters, and generators.
  */
@@ -17,30 +17,30 @@ import { themeToDesignTokens, createDesignTokensFromTheme } from '../adapters/th
 
 /**
  * Test theme using DesignTokens (flat structure)
- * 
+ *
  * This is the recommended approach for most use cases.
  * DesignTokens directly map to CSS variables.
  */
 export const testThemeTokens: Partial<DesignTokens> = {
   // Primary colors
-  'primary': '#7AFFD7',
+  primary: '#7AFFD7',
   'primary-3': '#B3FFE9',
   'primary-6': '#7AFFD7',
   'primary-9': '#00E6C3',
   'primary-rgb': '122, 255, 215',
 
   // Secondary colors
-  'secondary': '#FF6B9D',
+  secondary: '#FF6B9D',
   'secondary-rgb': '255, 107, 157',
 
   // Semantic colors
-  'success': '#1AFF85',
+  success: '#1AFF85',
   'success-rgb': '26, 255, 133',
-  'error': '#FF1A1A',
+  error: '#FF1A1A',
   'error-rgb': '255, 26, 26',
-  'warning': '#FFB800',
+  warning: '#FFB800',
   'warning-rgb': '255, 184, 0',
-  'info': '#1A9FFF',
+  info: '#1A9FFF',
   'info-rgb': '26, 159, 255',
 
   // Background colors
@@ -129,7 +129,7 @@ export function generateTestThemeCSS(): string {
 
 /**
  * Test theme using Theme object (nested structure)
- * 
+ *
  * This approach provides more structure and computed values.
  * Useful for advanced use cases that need theme composition.
  */
@@ -282,7 +282,7 @@ export function generateTestThemeCSSFromObject(): string {
  * Minimal test theme for quick testing
  */
 export const minimalTestTheme: Partial<DesignTokens> = {
-  'primary': '#7AFFD7',
+  primary: '#7AFFD7',
   'body-bg': '#000000',
   'body-color': '#FFFFFF',
   'body-font-family': '"Inter", sans-serif',
@@ -301,7 +301,7 @@ export function generateMinimalTestThemeCSS(): string {
 
 /**
  * Test theme adapter conversion
- * 
+ *
  * Converts Theme object to DesignTokens and back to verify adapter works correctly.
  */
 export function testThemeAdapter(): {
@@ -322,7 +322,7 @@ export function testThemeAdapter(): {
 
 /**
  * Compare CSS output from both approaches
- * 
+ *
  * Verifies that DesignTokens and Theme object produce similar CSS output.
  */
 export function compareThemeOutputs(): {
@@ -333,7 +333,7 @@ export function compareThemeOutputs(): {
 } {
   const fromTokens = generateTestThemeCSS();
   const fromTheme = generateTestThemeCSSFromObject();
-  
+
   const theme = createTestThemeObject();
   const themeTokens = themeToDesignTokens(theme);
 
@@ -347,12 +347,12 @@ export function compareThemeOutputs(): {
 
 /**
  * Test theme composition
- * 
+ *
  * Tests extending a base theme with customizations.
  */
 export function testThemeComposition(): Theme {
   const baseTheme = createTestThemeObject();
-  
+
   // Extend with custom options
   const extendedTheme = createThemeObject(
     {
@@ -383,4 +383,3 @@ export const testThemes = {
   compareOutputs: compareThemeOutputs,
   testComposition: testThemeComposition,
 };
-

package/src/lib/theme/tokens/index.ts

@@ -1,12 +1,7 @@
 /**
  * Design Tokens
- * 
+ *
  * Design token definitions and utilities
  */
 
-export {
-  createTokens,
-  defaultTokens,
-  type DesignTokens,
-} from './tokens';
-
+export { createTokens, defaultTokens, type DesignTokens } from './tokens';

package/src/lib/theme/tokens/tokens.ts

@@ -1,6 +1,6 @@
 /**
  * Design Tokens
- * 
+ *
  * Simple flat structure for design tokens.
  * All tokens match the actual CSS variables used in Atomix.
  * Based on docs/tokes-list.md
@@ -8,7 +8,7 @@
 
 /**
  * Design tokens interface
- * 
+ *
  * Flat structure - no nesting complexity.
  * Keys use kebab-case format matching CSS variable names (without --atomix- prefix).
  */
@@ -16,14 +16,14 @@ export interface DesignTokens {
   // ============================================================================
   // Colors - Base
   // ============================================================================
-  'primary': string;
-  'secondary': string;
-  'success': string;
-  'info': string;
-  'warning': string;
-  'error': string;
-  'light': string;
-  'dark': string;
+  primary: string;
+  secondary: string;
+  success: string;
+  info: string;
+  warning: string;
+  error: string;
+  light: string;
+  dark: string;
 
   // RGB versions
   'primary-rgb': string;
@@ -186,7 +186,7 @@ export interface DesignTokens {
   'info-gradient': string;
   'warning-gradient': string;
   'error-gradient': string;
-  'gradient': string;
+  gradient: string;
 
   // ============================================================================
   // Typography - Fonts
@@ -386,19 +386,19 @@ export interface DesignTokens {
 
 /**
  * Default design tokens
- * 
+ *
  * Based on Atomix default theme values from docs/tokes-list.md (light mode)
  */
 export const defaultTokens: DesignTokens = {
   // Colors - Base
-  'primary': '#7c3aed',
-  'secondary': '#f3f4f6',
-  'success': '#22c55e',
-  'info': '#3b82f6',
-  'warning': '#eab308',
-  'error': '#ef4444',
-  'light': '#f9fafb',
-  'dark': '#1f2937',
+  primary: '#7c3aed',
+  secondary: '#f3f4f6',
+  success: '#22c55e',
+  info: '#3b82f6',
+  warning: '#eab308',
+  error: '#ef4444',
+  light: '#f9fafb',
+  dark: '#1f2937',
 
   // RGB versions
   'primary-rgb': '124, 58, 237',
@@ -539,11 +539,12 @@ export const defaultTokens: DesignTokens = {
   'info-gradient': 'linear-gradient(135deg, #dbeafe, #bfdbfe, #60a5fa)',
   'warning-gradient': 'linear-gradient(135deg, #fef9c3, #fef08a, #facc15)',
   'error-gradient': 'linear-gradient(135deg, #fef2f2, #fee2e2, #fecaca)',
-  'gradient': 'linear-gradient(135deg, #f9fafb, #f3f4f6, #e5e7eb)',
+  gradient: 'linear-gradient(135deg, #f9fafb, #f3f4f6, #e5e7eb)',
 
   // Typography - Fonts
   'font-sans-serif': '"Roboto", sans-serif',
-  'font-monospace': 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  'font-monospace':
+    'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
   'body-font-family': '"Roboto", sans-serif',
   'body-font-size': '1rem',
   'body-font-weight': '400',
@@ -704,10 +705,10 @@ export const defaultTokens: DesignTokens = {
 
 /**
  * Create tokens from defaults and overrides
- * 
+ *
  * @param overrides - Partial tokens to override defaults
  * @returns Complete DesignTokens object
- * 
+ *
  * @example
  * ```typescript
  * const tokens = createTokens({