@shohojdhara/atomix 0.3.2 → 0.3.4

package/src/lib/patterns/slots.tsx

@@ -0,0 +1,421 @@
+/**
+ * Slot Pattern System
+ * 
+ * Provides render props and slot-based customization for components.
+ * Allows complete control over component rendering and structure.
+ */
+
+import React from 'react';
+
+/**
+ * Slot configuration with multiple rendering options
+ */
+export interface SlotProps<T = any> {
+  /** Static children to render */
+  children?: React.ReactNode;
+  /** Render function with access to slot props */
+  render?: (props: T) => React.ReactNode;
+  /** Custom component to render */
+  component?: React.ComponentType<T>;
+}
+
+/**
+ * Render a slot with the given props
+ * 
+ * Priority order:
+ * 1. render function
+ * 2. component
+ * 3. children
+ * 4. fallback
+ * 
+ * @example
+ * renderSlot(
+ *   { render: (props) => <CustomButton {...props} /> },
+ *   { onClick: handleClick, children: 'Click me' }
+ * )
+ */
+export function renderSlot<T>(
+  slot: SlotProps<T> | React.ReactNode | undefined,
+  props: T,
+  fallback?: React.ReactNode
+): React.ReactNode {
+  // No slot provided, use fallback
+  if (!slot) return fallback;
+
+  // Slot is a plain React node
+  if (React.isValidElement(slot) || typeof slot === 'string' || typeof slot === 'number') {
+    return slot;
+  }
+
+  // Slot is an object with rendering options
+  if (typeof slot === 'object' && slot !== null) {
+    const slotObj = slot as SlotProps<T>;
+
+    // Priority 1: render function
+    if (slotObj.render && typeof slotObj.render === 'function') {
+      return slotObj.render(props);
+    }
+
+    // Priority 2: component
+    if (slotObj.component) {
+      const Component = slotObj.component;
+      return <Component {...props} />;
+    }
+
+    // Priority 3: children
+    if (slotObj.children !== undefined) {
+      return slotObj.children;
+    }
+  }
+
+  // Fallback
+  return fallback;
+}
+
+/**
+ * Check if a value is a slot configuration
+ */
+export function isSlot<T>(value: any): value is SlotProps<T> {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    ('render' in value || 'component' in value || 'children' in value)
+  );
+}
+
+/**
+ * Merge multiple slot configurations
+ * Later slots override earlier ones
+ */
+export function mergeSlots<T>(
+  ...slots: Array<SlotProps<T> | undefined>
+): SlotProps<T> | undefined {
+  const filtered = slots.filter((s): s is SlotProps<T> => s !== undefined);
+  
+  if (filtered.length === 0) return undefined;
+  if (filtered.length === 1) return filtered[0];
+
+  return filtered.reduce((acc, slot) => ({
+    ...acc,
+    ...slot,
+  }));
+}
+
+/**
+ * Create a slot wrapper component
+ * 
+ * @example
+ * const ButtonSlot = createSlotComponent<ButtonSlotProps>('button')
+ * 
+ * <ButtonSlot slot={customSlot} {...props}>
+ *   Default content
+ * </ButtonSlot>
+ */
+export function createSlotComponent<T>(
+  defaultElement: keyof JSX.IntrinsicElements | React.ComponentType<T> = 'div'
+) {
+  return function SlotComponent({
+    slot,
+    children,
+    ...props
+  }: T & {
+    slot?: SlotProps<T>;
+    children?: React.ReactNode;
+  }) {
+    const slotProps = props as T;
+
+    if (slot) {
+      return <>{renderSlot(slot, slotProps, children)}</>;
+    }
+
+    if (typeof defaultElement === 'string') {
+      const Element = defaultElement;
+      return <Element {...(props as any)}>{children}</Element>;
+    }
+
+    const Component = defaultElement;
+    return <Component {...slotProps}>{children}</Component>;
+  };
+}
+
+/**
+ * Slot props for Button component
+ */
+export interface ButtonRootSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  type?: 'button' | 'submit' | 'reset';
+  'aria-label'?: string;
+  'aria-disabled'?: boolean;
+  'aria-busy'?: boolean;
+}
+
+export interface ButtonIconSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export interface ButtonLabelSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export interface ButtonSpinnerSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: string;
+}
+
+/**
+ * Slot props for Card component
+ */
+export interface CardRootSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  role?: string;
+  'aria-label'?: string;
+}
+
+export interface CardHeaderSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export interface CardBodySlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  scrollable?: boolean;
+  maxHeight?: string | number;
+}
+
+export interface CardFooterSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  align?: 'start' | 'center' | 'end' | 'between';
+}
+
+/**
+ * Slot props for Modal component
+ */
+export interface ModalRootSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  role: string;
+  'aria-modal': boolean;
+  'aria-hidden': boolean;
+}
+
+export interface ModalBackdropSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+
+export interface ModalDialogSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export interface ModalContentSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+/**
+ * Slot props for Input component
+ */
+export interface InputRootSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export interface InputElementSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  type?: string;
+  value?: string | number;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  'aria-label'?: string;
+  'aria-invalid'?: boolean;
+}
+
+/**
+ * Slot props for Dropdown component
+ */
+export interface DropdownRootSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export interface DropdownToggleSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  'aria-haspopup': string;
+  'aria-expanded': boolean;
+  'aria-controls': string;
+  tabIndex: number;
+}
+
+export interface DropdownMenuSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  role: string;
+  'aria-orientation': string;
+  'aria-hidden': boolean;
+}
+
+/**
+ * Slot props for Badge component
+ */
+export interface BadgeRootSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
+  role?: string;
+  'aria-label'?: string;
+}
+
+export interface BadgeIconSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export interface BadgeLabelSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+/**
+ * Slot props for Progress component
+ */
+export interface ProgressRootSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  role: string;
+  'aria-valuenow': number;
+  'aria-valuemin': number;
+  'aria-valuemax': number;
+  'aria-label'?: string;
+}
+
+export interface ProgressBarSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Slot props for Checkbox component
+ */
+export interface CheckboxRootSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export interface CheckboxInputSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  type: 'checkbox';
+  checked?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  disabled?: boolean;
+  required?: boolean;
+  id?: string;
+  name?: string;
+  value?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+}
+
+export interface CheckboxLabelSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  htmlFor?: string;
+}
+
+/**
+ * Slot props for Radio component
+ */
+export interface RadioRootSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export interface RadioInputSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  type: 'radio';
+  checked?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  disabled?: boolean;
+  required?: boolean;
+  id?: string;
+  name?: string;
+  value?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+}
+
+export interface RadioLabelSlotProps {
+  className: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  htmlFor?: string;
+}
+
+/**
+ * Utility to create typed slot props
+ */
+export function createSlotProps<T>(props: T): T {
+  return props;
+}
+
+/**
+ * Hook to manage slot rendering
+ */
+export function useSlot<T>(
+  slot: SlotProps<T> | React.ReactNode | undefined,
+  props: T,
+  fallback?: React.ReactNode
+): React.ReactNode {
+  return React.useMemo(
+    () => renderSlot(slot, props, fallback),
+    [slot, props, fallback]
+  );
+}

package/src/lib/theme/composeTheme.ts

@@ -185,7 +185,6 @@ export function createThemeVariants(baseTheme: ThemeOptions): {
             ...baseTheme.palette,
             background: {
                 default: '#121212',
-                paper: '#1E1E1E',
                 subtle: '#2A2A2A',
                 ...baseTheme.palette?.background,
             },
@@ -304,7 +303,6 @@ export function createThemePreset(
                 secondary: { main: '#FFFFFF' },
                 background: {
                     default: '#FFFFFF',
-                    paper: '#F5F5F5',
                     subtle: '#FAFAFA',
                 },
             },
@@ -319,7 +317,6 @@ export function createThemePreset(
                 secondary: { main: '#FF5733' },
                 background: {
                     default: '#FAFAFA',
-                    paper: '#FFFFFF',
                     subtle: '#F5F5F5',
                 },
             },
@@ -334,7 +331,6 @@ export function createThemePreset(
                 secondary: { main: '#DC004E' },
                 background: {
                     default: '#FFFFFF',
-                    paper: '#F5F5F5',
                     subtle: '#EEEEEE',
                 },
             },
@@ -349,7 +345,6 @@ export function createThemePreset(
                 secondary: { main: '#4ECDC4' },
                 background: {
                     default: '#FFF8F0',
-                    paper: '#FFFFFF',
                     subtle: '#FFF0E0',
                 },
             },

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

@@ -11,7 +11,7 @@ export type {
   LoadedThemeConfig,
   ConfigValidationResult,
   ThemeMetadata,
-  ThemeConfig,
+  AtomixConfig,
   ThemeDefinition,
   CSSThemeDefinition,
   JSThemeDefinition,

package/src/lib/theme/config/loader.ts

@@ -13,7 +13,9 @@ import { validateConfig } from './validator';
 import { ThemeError, ThemeErrorCode, getLogger } from '../errors';
 import {
   DEFAULT_CONFIG_PATH,
+  DEFAULT_ATOMIX_CONFIG_PATH,
   DEFAULT_CONFIG_RELATIVE_PATH,
+  DEFAULT_LEGACY_CONFIG_RELATIVE_PATH,
   DEFAULT_BASE_PATH,
   DEFAULT_STORAGE_KEY,
   DEFAULT_DATA_ATTRIBUTE,
@@ -50,7 +52,7 @@ export function loadThemeConfig(
   options: ConfigLoaderOptions = {}
 ): LoadedThemeConfig {
   const {
-    configPath = DEFAULT_CONFIG_PATH,
+    configPath = DEFAULT_ATOMIX_CONFIG_PATH,
     validate = true,
     env = typeof process !== 'undefined' && process.env ? (process.env.NODE_ENV === 'production' ? 'production' : 'development') : 'development',
   } = options;
@@ -62,67 +64,99 @@ export function loadThemeConfig(
 
   // Try to load config dynamically
   let config: LoadedThemeConfig;
-  
+
   try {
-    // In browser/Vite environment, we can't load theme.config.ts dynamically
-    // This is expected and we'll use the fallback config
+    // In browser/Vite environment, we can't load config dynamically
     if (typeof window !== 'undefined') {
       throw new Error('Theme config loading not supported in browser environment');
     }
-    
-    // In Node.js/bundler environment, try require (CommonJS) first
-    // Check if we're in a browser environment first
-    if (typeof window !== 'undefined' || typeof require === 'undefined') {
-      throw new Error('Theme config loading not supported in browser environment');
+
+    // In ESM environments, require might be undefined.
+    let nodeRequire: any;
+    try {
+      nodeRequire = require;
+    } catch {
+      // require is not defined
     }
-    
-    // Type for theme config module
-    interface ThemeConfigModule {
-      default?: LoadedThemeConfig;
+
+    if (!nodeRequire) {
+      throw new Error('Theme config loading not supported in this environment (require is undefined)');
+    }
+
+    // Type for config module
+    interface ConfigModule {
+      default?: any;
       [key: string]: unknown;
     }
-    
-    let themeConfigModule: ThemeConfigModule;
-    
-    // Try require (Node.js/CommonJS) - works in Node.js environments
+
+    let configModule: ConfigModule;
+
+    // Try require (Node.js/CommonJS)
     try {
-      // Try relative path first (for build tools)
+      // Try relative path first
       try {
-        themeConfigModule = require(DEFAULT_CONFIG_RELATIVE_PATH) as ThemeConfigModule;
+        configModule = nodeRequire(DEFAULT_CONFIG_RELATIVE_PATH) as ConfigModule;
       } catch {
-        // If relative path fails, try to resolve from process.cwd()
-        const path = require('path') as typeof import('path');
-        const fs = require('fs') as typeof import('fs');
-        const configFilePath = path.resolve(process.cwd(), configPath);
-        
-        // Check if file exists
-        if (fs.existsSync(configFilePath)) {
-          // Delete from cache to force reload
-          const resolvedPath = require.resolve(configFilePath);
-          if (require.cache && require.cache[resolvedPath]) {
-            delete require.cache[resolvedPath];
+        // Try fallback to legacy relative path
+        try {
+          configModule = nodeRequire(DEFAULT_LEGACY_CONFIG_RELATIVE_PATH) as ConfigModule;
+        } catch {
+          // If relative paths fail, try to resolve from process.cwd()
+          const path = nodeRequire('path') as typeof import('path');
+          const fs = nodeRequire('fs') as typeof import('fs');
+
+          let configFilePath = path.resolve(process.cwd(), configPath);
+
+          // Fallback if atomix.config.ts not found
+          if (!fs.existsSync(configFilePath) && configPath === DEFAULT_ATOMIX_CONFIG_PATH) {
+            configFilePath = path.resolve(process.cwd(), DEFAULT_CONFIG_PATH);
+          }
+
+          if (fs.existsSync(configFilePath)) {
+            const resolvedPath = nodeRequire.resolve(configFilePath);
+            if (nodeRequire.cache && nodeRequire.cache[resolvedPath]) {
+              delete nodeRequire.cache[resolvedPath];
+            }
+            configModule = nodeRequire(configFilePath) as ConfigModule;
+          } else {
+            throw new Error(`Config file not found: ${configFilePath}`);
           }
-          themeConfigModule = require(configFilePath) as ThemeConfigModule;
-        } else {
-          throw new Error(`Config file not found: ${configFilePath}`);
         }
       }
     } catch (requireError) {
-      // If require fails, throw to fall through to error handling
-      const errorMessage = requireError instanceof Error 
-        ? requireError.message 
+      const errorMessage = requireError instanceof Error
+        ? requireError.message
         : String(requireError);
       throw new ThemeError(
-        `Cannot load theme config: ${errorMessage}`,
+        `Cannot load config: ${errorMessage}`,
         ThemeErrorCode.CONFIG_LOAD_FAILED,
         { configPath, error: errorMessage }
       );
     }
-    
-    const rawConfig = (themeConfigModule.default || themeConfigModule) as LoadedThemeConfig;
+
+    const rawConfig = configModule.default || configModule;
+
+    // Handle new AtomixConfig structure vs legacy ThemeConfig
+    let processedConfig: any;
+    if (rawConfig.theme && (rawConfig.theme.themes || rawConfig.theme.tokens || rawConfig.theme.extend)) {
+      // New AtomixConfig structure
+      processedConfig = {
+        themes: rawConfig.theme.themes || {},
+        build: rawConfig.build || {},
+        runtime: rawConfig.runtime || {},
+        integration: rawConfig.integration || {},
+        dependencies: rawConfig.dependencies || {},
+        // Store tokens for generator
+        __tokens: rawConfig.theme.tokens,
+        __extend: rawConfig.theme.extend,
+      };
+    } else {
+      // Legacy ThemeConfig structure
+      processedConfig = { ...rawConfig };
+    }
 
     // Apply environment-specific overrides
-    const processedConfig = applyEnvOverrides(rawConfig, env);
+    processedConfig = applyEnvOverrides(processedConfig, env);
 
     // Validate if requested
     let validationResult: ConfigValidationResult | null = null;
@@ -143,7 +177,7 @@ export function loadThemeConfig(
       configPath,
       error: errorMessage,
     });
-    
+
     config = {
       themes: {},
       build: {

package/src/lib/theme/config/types.ts

@@ -5,14 +5,14 @@
  */
 
 import type {
-  ThemeConfig,
-  ThemeDefinition,
-  CSSThemeDefinition,
-  JSThemeDefinition,
+  AtomixConfig,
   BuildConfig,
   RuntimeConfig,
   IntegrationConfig,
-} from '../../../../theme.config';
+  ThemeDefinition,
+  CSSThemeDefinition,
+  JSThemeDefinition,
+} from '../../config';
 
 /**
  * Configuration loader options
@@ -29,13 +29,27 @@ export interface ConfigLoaderOptions {
 /**
  * Loaded and validated theme configuration
  */
-export interface LoadedThemeConfig extends ThemeConfig {
+export interface LoadedThemeConfig {
+  /** Registered themes */
+  themes: Record<string, ThemeDefinition>;
+  /** Build configuration */
+  build: BuildConfig;
+  /** Runtime configuration */
+  runtime: RuntimeConfig;
+  /** Integration settings */
+  integration: IntegrationConfig;
+  /** Theme dependencies mapping */
+  dependencies: Record<string, string[]>;
   /** Whether config was validated */
   validated: boolean;
   /** Validation errors (if any) */
   errors?: string[];
   /** Validation warnings (if any) */
   warnings?: string[];
+  /** Internal tokens (for generator) */
+  __tokens?: any;
+  /** Internal extensions (for generator) */
+  __extend?: any;
 }
 
 /**
@@ -88,7 +102,7 @@ export interface ConfigValidationResult {
 }
 
 export type {
-  ThemeConfig,
+  AtomixConfig,
   ThemeDefinition,
   CSSThemeDefinition,
   JSThemeDefinition,

package/src/lib/theme/config/validator.ts

@@ -5,7 +5,7 @@
  */
 
 import type {
-  ThemeConfig,
+  AtomixConfig,
   ThemeDefinition,
   CSSThemeDefinition,
   JSThemeDefinition,