@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/lib/theme/types.ts

@@ -4,7 +4,6 @@
  * TypeScript types and interfaces for the Atomix Design System theme management system.
  */
 
-import type { ThemeManager as ThemeManagerType } from './runtime/ThemeManager';
 import type { PartStyleProps } from '../types/partProps';
 
 /**
@@ -42,39 +41,6 @@ export interface ThemeMetadata {
     dependencies?: string[];
 }
 
-/**
- * Theme manager configuration options
- */
-export interface ThemeManagerConfig {
-    /** Available themes metadata */
-    themes: Record<string, ThemeMetadata>;
-    /** Default theme to use */
-    defaultTheme?: string | Theme;
-    /** Base path for theme CSS files */
-    basePath?: string;
-    /** CDN path for theme CSS files (optional) */
-    cdnPath?: string | null;
-    /** Themes to preload on initialization */
-    preload?: string[];
-    /** Enable lazy loading of themes */
-    lazy?: boolean;
-    /** localStorage key for persistence */
-    storageKey?: string;
-    /** Data attribute name for theme */
-    dataAttribute?: string;
-    /** Enable persistence */
-    enablePersistence?: boolean;
-    /** Custom CSS file extension */
-    cssExtension?: string;
-    /** Use minified CSS files */
-    useMinified?: boolean;
-    /** Callback when theme changes */
-    onThemeChange?: (theme: string | Theme) => void;
-    /** Callback when theme load fails */
-    onError?: (error: Error, themeName: string) => void;
-    /** RTL configuration */
-    rtl?: import('./i18n/rtl').RTLConfig;
-}
 
 /**
  * Theme change event payload
@@ -160,7 +126,7 @@ export interface UseThemeOptions {
     /** Custom storage key */
     storageKey?: string;
     /** Callback when theme changes */
-    onChange?: (theme: string | Theme) => void;
+    onChange?: (theme: string | Theme | import('./tokens').DesignTokens) => void;
 }
 
 /**
@@ -171,8 +137,8 @@ export interface UseThemeReturn {
     theme: string;
     /** Current active theme object (for JS themes) */
     activeTheme: Theme | null;
-    /** Function to change theme */
-    setTheme: (theme: string | Theme, options?: ThemeLoadOptions) => Promise<void>;
+    /** Function to change theme (supports string, Theme, or DesignTokens) */
+    setTheme: (theme: string | Theme | import('./tokens').DesignTokens | Partial<import('./tokens').DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
     availableThemes: ThemeMetadata[];
     /** Whether a theme is currently loading */
@@ -268,7 +234,7 @@ export interface ThemeProviderProps {
     /** Use minified CSS */
     useMinified?: boolean;
     /** Callback when theme changes */
-    onThemeChange?: (theme: string | Theme) => void;
+    onThemeChange?: (theme: string | Theme | import('./tokens').DesignTokens) => void;
     /** Callback on error */
     onError?: (error: Error, themeName: string) => void;
 }
@@ -281,8 +247,8 @@ export interface ThemeContextValue {
     theme: string;
     /** Current active theme object (for JS themes) */
     activeTheme: Theme | null;
-    /** Set theme function */
-    setTheme: (theme: string | Theme, options?: ThemeLoadOptions) => Promise<void>;
+    /** Set theme function (supports string, Theme, or DesignTokens) */
+    setTheme: (theme: string | Theme | import('./tokens').DesignTokens | Partial<import('./tokens').DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
     availableThemes: ThemeMetadata[];
     /** Loading state */
@@ -293,8 +259,6 @@ export interface ThemeContextValue {
     isThemeLoaded: (themeName: string) => boolean;
     /** Preload theme */
     preloadTheme: (themeName: string) => Promise<void>;
-    /** Theme manager instance */
-    themeManager: ThemeManagerType;
 }
 
 // ============================================================================

package/src/lib/theme/utils/componentTheming.ts

@@ -0,0 +1,132 @@
+/**
+ * Component Theming Utilities
+ * 
+ * Provides consistent patterns for applying theme values to components
+ */
+
+import type { Theme } from '../types';
+
+export interface ComponentThemeOptions {
+  component: string;
+  variant?: string;
+  size?: string;
+  theme: Theme;
+}
+
+/**
+ * Get a theme value for a specific component using CSS variables
+ * This ensures all components access theme values consistently
+ */
+export function getComponentThemeValue(
+  component: string,
+  property: string,
+  variant?: string,
+  size?: string
+): string {
+  // Build CSS variable name following consistent pattern
+  const parts = ['atomix', component];
+  
+  if (variant) {
+    parts.push(variant);
+  }
+  
+  if (size) {
+    parts.push(size);
+  }
+  
+  parts.push(property);
+  
+  const cssVarName = `--${parts.join('-')}`;
+  const fallbackVarName = `--atomix-${property}`;
+  
+  // Return CSS variable reference with fallback
+  return `var(${cssVarName}, var(${fallbackVarName}, initial))`;
+}
+
+/**
+ * Generate component-specific CSS variables from theme
+ */
+export function generateComponentCSSVars(
+  component: string,
+  theme: Theme,
+  variant?: string,
+  size?: string
+): Record<string, string> {
+  const vars: Record<string, string> = {};
+  
+  // This is a simplified implementation - in a real system you'd have more
+  // sophisticated logic to extract component-specific values from the theme
+  const prefixParts = ['atomix', component];
+  
+  if (variant) {
+    prefixParts.push(variant);
+  }
+  
+  if (size) {
+    prefixParts.push(size);
+  }
+  
+  const prefix = prefixParts.join('-');
+  
+  // Add common component properties
+  if (theme.palette) {
+    vars[`--${prefix}-color`] = theme.palette.primary?.main || '#7c3aed';
+    vars[`--${prefix}-color-hover`] = theme.palette.primary?.dark || '#5b21b6';
+    vars[`--${prefix}-color-active`] = theme.palette.primary?.main || '#7c3aed';
+    vars[`--${prefix}-color-disabled`] = theme.palette.text?.disabled || '#9ca3af';
+  }
+  
+  if (theme.typography) {
+    vars[`--${prefix}-font-family`] = theme.typography.fontFamily || 'Inter, sans-serif';
+    vars[`--${prefix}-font-size`] = theme.typography.fontSize ? `${theme.typography.fontSize}px` : '16px';
+  }
+  
+  if (theme.spacing) {
+    const spacing = typeof theme.spacing === 'function' ? theme.spacing : (val: number) => val * 8;
+    vars[`--${prefix}-spacing-unit`] = `${spacing(1)}px`;
+    vars[`--${prefix}-spacing-sm`] = `${spacing(0.5)}px`;
+    vars[`--${prefix}-spacing-md`] = `${spacing(1)}px`;
+    vars[`--${prefix}-spacing-lg`] = `${spacing(2)}px`;
+  }
+  
+  return vars;
+}
+
+/**
+ * Apply consistent theme to component style object
+ */
+export function applyComponentTheme(
+  component: string,
+  style: React.CSSProperties = {},
+  variant?: string,
+  size?: string,
+  theme?: Theme
+): React.CSSProperties {
+  // If no theme provided, return original style
+  if (!theme) {
+    return style;
+  }
+  
+  // Generate component-specific CSS variables
+  const componentVars = generateComponentCSSVars(component, theme, variant, size);
+  
+  // Merge with existing style
+  return {
+    ...componentVars,
+    ...style,
+  };
+}
+
+/**
+ * Create a hook for consistent component theming
+ */
+export function useComponentTheme(
+  component: string,
+  variant?: string,
+  size?: string,
+  theme?: Theme
+): (property: string) => string {
+  return (property: string) => {
+    return getComponentThemeValue(component, property, variant, size);
+  };
+}

package/src/lib/theme/{utils.ts → utils/domUtils.ts}

@@ -5,8 +5,8 @@
  * and theme validation.
  */
 
-import type { ThemeMetadata, ThemeValidationResult } from './types';
-import { THEME_LINK_ID_PREFIX } from './constants';
+import type { ThemeMetadata, ThemeValidationResult } from '../types';
+import { THEME_LINK_ID_PREFIX } from '../constants/constants';
 
 /**
  * Check if code is running in a browser environment

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

@@ -0,0 +1,11 @@
+/**
+ * Theme Utilities
+ * 
+ * Utility functions for theme operations
+ */
+
+export * from './themeHelpers';
+export * from './themeUtils';
+export * from './domUtils';
+export * from './injectCSS';
+

package/src/lib/theme/utils/injectCSS.ts

@@ -0,0 +1,90 @@
+/**
+ * CSS Injection Utilities
+ * 
+ * Inject CSS into HTML head via <style> element.
+ */
+
+/**
+ * Check if running in browser environment
+ */
+function isBrowser(): boolean {
+  return typeof document !== 'undefined';
+}
+
+/**
+ * Inject CSS into HTML head via <style> element
+ * 
+ * Creates or updates a style element in the document head.
+ * If an element with the same ID exists, it will be updated.
+ * 
+ * @param css - CSS string to inject
+ * @param id - Style element ID (default: 'atomix-theme')
+ * 
+ * @example
+ * ```typescript
+ * const css = ':root { --atomix-color-primary: #7AFFD7; }';
+ * injectCSS(css);
+ * 
+ * // With custom ID
+ * injectCSS(css, 'my-custom-theme');
+ * ```
+ */
+export function injectCSS(
+  css: string,
+  id: string = 'atomix-theme'
+): void {
+  if (!isBrowser()) {
+    console.warn('injectCSS: Not in browser environment, CSS not injected');
+    return;
+  }
+
+  let styleElement = document.getElementById(id) as HTMLStyleElement | null;
+
+  if (!styleElement) {
+    styleElement = document.createElement('style');
+    styleElement.id = id;
+    styleElement.setAttribute('data-atomix-theme', 'true');
+    document.head.appendChild(styleElement);
+  }
+
+  styleElement.textContent = css;
+}
+
+/**
+ * Remove injected CSS from DOM
+ * 
+ * Removes the style element with the given ID from the document head.
+ * 
+ * @param id - Style element ID to remove (default: 'atomix-theme')
+ * 
+ * @example
+ * ```typescript
+ * removeCSS(); // Removes default 'atomix-theme'
+ * removeCSS('my-custom-theme'); // Removes custom ID
+ * ```
+ */
+export function removeCSS(id: string = 'atomix-theme'): void {
+  if (!isBrowser()) {
+    return;
+  }
+
+  const styleElement = document.getElementById(id);
+  if (styleElement) {
+    styleElement.remove();
+  }
+}
+
+/**
+ * Check if CSS is already injected
+ * 
+ * @param id - Style element ID to check (default: 'atomix-theme')
+ * @returns True if style element exists
+ */
+export function isCSSInjected(id: string = 'atomix-theme'): boolean {
+  if (!isBrowser()) {
+    return false;
+  }
+
+  return document.getElementById(id) !== null;
+}
+

package/src/lib/theme/utils/naming.ts

@@ -0,0 +1,100 @@
+/**
+ * Naming Utilities
+ * 
+ * Provides consistent naming conventions across the theme system
+ */
+
+export interface NamingOptions {
+  prefix?: string;
+  component?: string;
+  variant?: string;
+  state?: string;
+}
+
+/**
+ * Generate consistent CSS class names following BEM methodology
+ */
+export function generateClassName(block: string, element?: string, modifiers?: Record<string, boolean | string>): string {
+  let className = block;
+  
+  if (element) {
+    className += `__${element}`;
+  }
+  
+  if (modifiers) {
+    Object.entries(modifiers).forEach(([key, value]) => {
+      if (value) {
+        className += `--${key}`;
+        if (typeof value === 'string' && value !== key) {
+          className += `-${value}`;
+        }
+      }
+    });
+  }
+  
+  return className;
+}
+
+/**
+ * Generate consistent CSS variable names
+ */
+export function generateCSSVariableName(property: string, options: NamingOptions = {}): string {
+  const { prefix = 'atomix', component, variant, state } = options;
+  
+  const parts = [prefix];
+  
+  if (component) {
+    parts.push(component);
+  }
+  
+  if (variant) {
+    parts.push(variant);
+  }
+  
+  if (state) {
+    parts.push(state);
+  }
+  
+  parts.push(property);
+  
+  return `--${parts.join('-')}`;
+}
+
+/**
+ * Normalize theme tokens to consistent naming convention
+ */
+export function normalizeThemeTokens(tokens: Record<string, any>): Record<string, any> {
+  const normalized: Record<string, any> = {};
+  
+  for (const [key, value] of Object.entries(tokens)) {
+    if (typeof value === 'object' && value !== null) {
+      // Recursively normalize nested objects
+      normalized[key] = normalizeThemeTokens(value);
+    } else {
+      // Apply consistent naming transformation
+      normalized[key] = value;
+    }
+  }
+  
+  return normalized;
+}
+
+/**
+ * Convert camelCase to kebab-case for CSS custom properties
+ */
+export function camelToKebab(str: string): string {
+  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+/**
+ * Convert theme property to CSS variable name
+ */
+export function themePropertyToCSSVar(propertyPath: string, prefix: string = 'atomix'): string {
+  // Convert nested property paths to kebab-case
+  const path = propertyPath
+    .split('.')
+    .map(part => camelToKebab(part))
+    .join('-');
+  
+  return `--${prefix}-${path}`;
+}

package/src/lib/theme/utils/themeHelpers.ts

@@ -0,0 +1,78 @@
+/**
+ * Theme Helper Functions
+ * 
+ * Utility functions for working with themes and DesignTokens
+ */
+
+import type { Theme } from '../types';
+import type { DesignTokens } from '../tokens/tokens';
+import { createDesignTokensFromTheme } from '../adapters/themeAdapter';
+
+/**
+ * Get DesignTokens from current theme
+ * 
+ * Converts a Theme object to DesignTokens. Useful when you need to
+ * work with DesignTokens but have a Theme object.
+ * 
+ * @param theme - Theme object to convert
+ * @returns DesignTokens object
+ * 
+ * @example
+ * ```typescript
+ * // If you have a Theme object, convert it to DesignTokens
+ * const tokens = getDesignTokensFromTheme(theme);
+ * // Now you can use tokens with unified theme system
+ * const css = createTheme(tokens);
+ * ```
+ */
+export function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | null {
+  if (!theme) return null;
+  return createDesignTokensFromTheme(theme);
+}
+
+/**
+ * Check if a value is DesignTokens
+ * 
+ * Type guard to check if an object is DesignTokens format.
+ * 
+ * @param value - Value to check
+ * @returns True if value is DesignTokens
+ */
+export function isDesignTokens(value: unknown): value is DesignTokens {
+  if (!value || typeof value !== 'object') return false;
+  
+  // DesignTokens is a flat object with string keys, no nested structures
+  const obj = value as Record<string, unknown>;
+  
+  // Check for absence of Theme-specific properties
+  if ('palette' in obj || 'typography' in obj || '__isJSTheme' in obj) {
+    return false;
+  }
+  
+  // Check if it has DesignTokens-like structure (flat string keys)
+  const keys = Object.keys(obj);
+  if (keys.length === 0) return false;
+  
+  // Check if keys look like DesignTokens (kebab-case, no nesting)
+  const hasDesignTokenKeys = keys.some(key => 
+    /^[a-z]+(-[a-z0-9]+)*$/.test(key) && 
+    typeof obj[key] === 'string'
+  );
+  
+  return hasDesignTokenKeys;
+}
+
+/**
+ * Check if a value is a Theme object
+ * 
+ * Type guard to check if an object is a Theme.
+ * 
+ * @param value - Value to check
+ * @returns True if value is Theme
+ */
+export function isThemeObject(value: unknown): value is Theme {
+  if (!value || typeof value !== 'object') return false;
+  const obj = value as Record<string, unknown>;
+  return '__isJSTheme' in obj || ('palette' in obj && 'typography' in obj);
+}
+

package/src/lib/theme/{themeUtils.ts → utils/themeUtils.ts}

@@ -5,7 +5,7 @@
  * spacing helpers, and theme value accessors.
  */
 
-import type { Theme, SpacingFunction, SpacingOptions } from './types';
+import type { Theme, SpacingFunction, SpacingOptions } from '../types';
 
 // ============================================================================
 // Color Manipulation Utilities
@@ -207,13 +207,13 @@ export function spacing(theme: Theme, ...values: number[]): string {
  * @param fallback - Fallback value if path not found
  * @returns Theme value or fallback
  */
-export function getThemeValue<T = any>(theme: Theme, path: string, fallback?: T): T {
+export function getThemeValue<T = unknown>(theme: Theme, path: string, fallback?: T): T {
     const keys = path.split('.');
-    let value: any = theme;
+    let value: unknown = theme;
 
     for (const key of keys) {
         if (value && typeof value === 'object' && key in value) {
-            value = value[key];
+            value = (value as Record<string, unknown>)[key];
         } else {
             return fallback as T;
         }
@@ -225,8 +225,8 @@ export function getThemeValue<T = any>(theme: Theme, path: string, fallback?: T)
 /**
  * Check if a theme is a JS theme (created with createTheme)
  */
-export function isJSTheme(theme: any): theme is Theme {
-    return theme && typeof theme === 'object' && theme.__isJSTheme === true;
+export function isJSTheme(theme: unknown): theme is Theme {
+    return typeof theme === 'object' && theme !== null && '__isJSTheme' in theme && theme.__isJSTheme === true;
 }
 
 // ============================================================================
@@ -265,7 +265,7 @@ export function breakpointBetween(
 /**
  * Get typography variant styles
  */
-export function getTypography(theme: Theme, variant: keyof Theme['typography']): any {
+export function getTypography(theme: Theme, variant: keyof Theme['typography']): Theme['typography'][keyof Theme['typography']] {
     return theme.typography[variant] ?? {};
 }
 

package/src/lib/theme-tools.ts

@@ -5,15 +5,15 @@
  */
 
 import { Theme, ThemeMetadata } from './theme/types';
-import { createTheme } from './theme/createTheme';
-import { extendTheme, mergeTheme } from './theme/composeTheme';
-import { generateCSSVariables } from './theme/generateCSSVariables';
+import { createThemeObject } from './theme/core/createThemeObject';
+import { extendTheme, mergeTheme } from './theme/core/composeTheme';
+import { generateCSSVariables } from './theme/generators/generateCSSVariables';
 
 /**
  * Quick theme creator with sensible defaults
  */
 export function quickTheme(name: string, primaryColor: string, secondaryColor?: string): Theme {
-  return createTheme({
+  return createThemeObject({
     name,
     palette: {
       primary: { main: primaryColor },
@@ -119,7 +119,6 @@ export function importTheme(json: string): Theme {
   }
 }
 
-// Re-export commonly used functions
-export { createTheme, extendTheme, mergeTheme };
-export { generateCSSVariables };
-export { RTLManager } from './theme/i18n/rtl';
+// Note: createTheme, extendTheme, mergeTheme, and generateCSSVariables
+// are already exported from './theme' module. Import them directly from there.
+// This file only exports theme-tools specific utilities.