@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/lib/config/index.ts

@@ -1,16 +1,16 @@
 /**
  * Atomix Configuration System
- * 
+ *
  * Tailwind-like configuration for customizing the Atomix Design System.
- * 
+ *
  * External developers can create `atomix.config.ts` in their project root
  * to customize design tokens, similar to Tailwind's tailwind.config.js
- * 
+ *
  * @example
  * ```typescript
  * // atomix.config.ts (in your project)
  * import { defineConfig } from '@shohojdhara/atomix/config';
- * 
+ *
  * export default defineConfig({
  *   theme: {
  *     extend: {
@@ -29,104 +29,104 @@ import type { Theme } from '../theme/types';
  * Color Scale (1-10)
  */
 export interface ColorScale {
-    1?: string;
-    2?: string;
-    3?: string;
-    4?: string;
-    5?: string;
-    6?: string;
-    7?: string;
-    8?: string;
-    9?: string;
-    10?: string;
-    [key: string]: string | undefined;
+  1?: string;
+  2?: string;
+  3?: string;
+  4?: string;
+  5?: string;
+  6?: string;
+  7?: string;
+  8?: string;
+  9?: string;
+  10?: string;
+  [key: string]: string | undefined;
 }
 
 /**
  * Palette Color Options
  */
 export interface PaletteColorOptions {
-    main: string;
-    light?: string;
-    dark?: string;
-    contrastText?: string;
+  main: string;
+  light?: string;
+  dark?: string;
+  contrastText?: string;
 }
 
 /**
  * Design Tokens Schema (Tailwind-like)
  */
 export interface ThemeTokens {
-    /** Color palette */
-    colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
-    /** Spacing scale */
-    spacing?: Record<string, string>;
-    /** Border radius scale */
-    borderRadius?: Record<string, string>;
-    /** Typography scale and settings */
-    typography?: {
-        fontFamilies?: Record<string, string>;
-        fontSizes?: Record<string, string>;
-        fontWeights?: Record<string, string | number>;
-        lineHeights?: Record<string, string | number>;
-        letterSpacings?: Record<string, string>;
-    };
-    /** Shadow scale */
-    shadows?: Record<string, string>;
-    /** Z-index scale */
-    zIndex?: Record<string, string | number>;
-    /** Breakpoints scale */
-    breakpoints?: Record<string, string | number>;
-    /** Transitions settings */
-    transitions?: {
-        durations?: Record<string, string>;
-        easings?: Record<string, string>;
-    };
+  /** Color palette */
+  colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
+  /** Spacing scale */
+  spacing?: Record<string, string>;
+  /** Border radius scale */
+  borderRadius?: Record<string, string>;
+  /** Typography scale and settings */
+  typography?: {
+    fontFamilies?: Record<string, string>;
+    fontSizes?: Record<string, string>;
+    fontWeights?: Record<string, string | number>;
+    lineHeights?: Record<string, string | number>;
+    letterSpacings?: Record<string, string>;
+  };
+  /** Shadow scale */
+  shadows?: Record<string, string>;
+  /** Z-index scale */
+  zIndex?: Record<string, string | number>;
+  /** Breakpoints scale */
+  breakpoints?: Record<string, string | number>;
+  /** Transitions settings */
+  transitions?: {
+    durations?: Record<string, string>;
+    easings?: Record<string, string>;
+  };
 }
 
 /**
  * CSS Theme Definition
  */
 export interface CSSThemeDefinition {
-    type: 'css';
-    name: string;
-    class?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    tags?: string[];
-    supportsDarkMode?: boolean;
-    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-    a11y?: {
-        contrastTarget?: number;
-        modes?: string[];
-    };
-    color?: string;
-    features?: string[];
-    dependencies?: string[];
-    cssPath?: string;
+  type: 'css';
+  name: string;
+  class?: string;
+  description?: string;
+  author?: string;
+  version?: string;
+  tags?: string[];
+  supportsDarkMode?: boolean;
+  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+  a11y?: {
+    contrastTarget?: number;
+    modes?: string[];
+  };
+  color?: string;
+  features?: string[];
+  dependencies?: string[];
+  cssPath?: string;
 }
 
 /**
  * JavaScript Theme Definition
  */
 export interface JSThemeDefinition {
-    type: 'js';
-    name: string;
-    class?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    tags?: string[];
-    supportsDarkMode?: boolean;
-    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-    a11y?: {
-        contrastTarget?: number;
-        modes?: string[];
-    };
-    color?: string;
-    features?: string[];
-    dependencies?: string[];
-    createTheme: () => Theme;
+  type: 'js';
+  name: string;
+  class?: string;
+  description?: string;
+  author?: string;
+  version?: string;
+  tags?: string[];
+  supportsDarkMode?: boolean;
+  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+  a11y?: {
+    contrastTarget?: number;
+    modes?: string[];
+  };
+  color?: string;
+  features?: string[];
+  dependencies?: string[];
+  createTheme: () => Theme;
 }
 
 /**
@@ -138,122 +138,122 @@ export type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
  * Build configuration (migrated from theme.config.ts)
  */
 export interface BuildConfig {
-    output?: {
-        directory?: string;
-        formats?: {
-            expanded?: string;
-            compressed?: string;
-        };
-    };
-    sass?: {
-        style?: 'expanded' | 'compressed';
-        sourceMap?: boolean;
-        loadPaths?: string[];
+  output?: {
+    directory?: string;
+    formats?: {
+      expanded?: string;
+      compressed?: string;
     };
+  };
+  sass?: {
+    style?: 'expanded' | 'compressed';
+    sourceMap?: boolean;
+    loadPaths?: string[];
+  };
 }
 
 /**
  * Runtime configuration (migrated from theme.config.ts)
  */
 export interface RuntimeConfig {
-    basePath?: string;
-    cdnPath?: string | null;
-    preload?: string[];
-    lazy?: boolean;
-    defaultTheme?: string;
-    storageKey?: string;
-    dataAttribute?: string;
-    enablePersistence?: boolean;
-    useMinified?: boolean;
+  basePath?: string;
+  cdnPath?: string | null;
+  preload?: string[];
+  lazy?: boolean;
+  defaultTheme?: string;
+  storageKey?: string;
+  dataAttribute?: string;
+  enablePersistence?: boolean;
+  useMinified?: boolean;
 }
 
 /**
  * Integration settings (migrated from theme.config.ts)
  */
 export interface IntegrationConfig {
-    cssVariables?: Record<string, string>;
-    classNames?: {
-        theme?: string;
-        colorMode?: string;
-    };
+  cssVariables?: Record<string, string>;
+  classNames?: {
+    theme?: string;
+    colorMode?: string;
+  };
 }
 
 /**
  * Atomix Configuration Interface
- * 
+ *
  * Tailwind-like configuration for external developers.
  * Focus on theme customization - build/runtime configs are internal only.
  */
 export interface AtomixConfig {
-    /** 
-     * CSS variable prefix (default: 'atomix')
-     * 
-     * Change this to customize all CSS variable names.
-     * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
-     */
-    prefix?: string;
+  /**
+   * CSS variable prefix (default: 'atomix')
+   *
+   * Change this to customize all CSS variable names.
+   * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
+   */
+  prefix?: string;
 
-    /** 
-     * Theme customization (Tailwind-like)
-     * 
-     * Use `extend` to add or override design tokens.
-     * Use `tokens` to completely replace the default token system (advanced).
+  /**
+   * Theme customization (Tailwind-like)
+   *
+   * Use `extend` to add or override design tokens.
+   * Use `tokens` to completely replace the default token system (advanced).
+   */
+  theme?: {
+    /**
+     * Extend the default design tokens
+     *
+     * This is the recommended way to customize Atomix.
+     * Your values will override or extend the base tokens.
      */
-    theme?: {
-        /** 
-         * Extend the default design tokens
-         * 
-         * This is the recommended way to customize Atomix.
-         * Your values will override or extend the base tokens.
-         */
-        extend?: ThemeTokens;
+    extend?: ThemeTokens;
 
-        /** 
-         * Override the default tokens entirely (advanced)
-         * 
-         * Use with caution - this replaces the entire token system.
-         * Most users should use `extend` instead.
-         */
-        tokens?: ThemeTokens;
+    /**
+     * Override the default tokens entirely (advanced)
+     *
+     * Use with caution - this replaces the entire token system.
+     * Most users should use `extend` instead.
+     */
+    tokens?: ThemeTokens;
 
-        /** 
-         * Register custom themes (optional)
-         * 
-         * Define CSS or JavaScript themes that can be loaded dynamically.
-         */
-        themes?: Record<string, ThemeDefinition>;
-    };
+    /**
+     * Register custom themes (optional)
+     *
+     * Define CSS or JavaScript themes that can be loaded dynamically.
+     */
+    themes?: Record<string, ThemeDefinition>;
+  };
 
-    // Internal configurations (for library development only)
-    // These are not needed for external developers
-    /** @internal Build configuration (internal use only) */
-    build?: BuildConfig;
-    /** @internal Runtime configuration (internal use only) */
-    runtime?: RuntimeConfig;
-    /** @internal Integration settings (internal use only) */
-    integration?: IntegrationConfig;
-    /** @internal Theme dependencies mapping (internal use only) */
-    dependencies?: Record<string, string[]>;
+  // Internal configurations (for library development only)
+  // These are not needed for external developers
+  /** @internal Build configuration (internal use only) */
+  build?: BuildConfig;
+  /** @internal Runtime configuration (internal use only) */
+  runtime?: RuntimeConfig;
+  /** @internal Integration settings (internal use only) */
+  integration?: IntegrationConfig;
+  /** @internal Theme dependencies mapping (internal use only) */
+  dependencies?: Record<string, string[]>;
 }
 
 /**
  * Helper function to define Atomix configuration with type safety
- * 
+ *
  * @param config - Atomix configuration object
  * @returns The configuration object
  */
 /**
  * Helper function to define Atomix configuration with type safety
- * 
+ *
  * Similar to Tailwind's defineConfig, provides autocomplete and type checking.
- * 
+ *
  * @param config - Atomix configuration object
  * @returns The configuration object
- * 
+ *
  * @example
  * ```typescript
  * import { defineConfig } from '@shohojdhara/atomix/config';
- * 
+ *
  * export default defineConfig({
  *   theme: {
  *     extend: {
@@ -266,7 +266,7 @@ export interface AtomixConfig {
  * ```
  */
 export function defineConfig(config: AtomixConfig): AtomixConfig {
-    return config;
+  return config;
 }
 
 // Export loader functions

package/src/lib/constants/cssVariables.ts

@@ -1,6 +1,6 @@
 /**
  * CSS Variables Constants
- * 
+ *
  * Comprehensive CSS custom property definitions for all components.
  * These provide type-safe access to component styling variables.
  */
@@ -24,7 +24,7 @@ export const BUTTON_CSS_VARS = {
   '--atomix-button-min-width': 'minimum width',
   '--atomix-button-min-height': 'minimum height',
   '--atomix-button-transition': 'transition',
-  
+
   // State properties
   '--atomix-button-hover-bg': 'hover background',
   '--atomix-button-hover-color': 'hover text color',
@@ -35,7 +35,7 @@ export const BUTTON_CSS_VARS = {
   '--atomix-button-focus-ring-width': 'focus ring width',
   '--atomix-button-disabled-opacity': 'disabled opacity',
   '--atomix-button-disabled-bg': 'disabled background',
-  
+
   // Part properties
   '--atomix-button-icon-size': 'icon size',
   '--atomix-button-icon-gap': 'icon spacing',
@@ -57,32 +57,32 @@ export const CARD_CSS_VARS = {
   '--atomix-card-box-shadow': 'box shadow',
   '--atomix-card-width': 'width',
   '--atomix-card-max-width': 'maximum width',
-  
+
   // State properties
   '--atomix-card-hover-bg': 'hover background',
   '--atomix-card-hover-shadow': 'hover shadow',
   '--atomix-card-hover-transform': 'hover transform',
-  
+
   // Part properties - Header
   '--atomix-card-header-padding': 'header padding',
   '--atomix-card-header-bg': 'header background',
   '--atomix-card-header-border-bottom': 'header border bottom',
-  
+
   // Part properties - Body
   '--atomix-card-body-padding': 'body padding',
   '--atomix-card-body-font-size': 'body font size',
-  
+
   // Part properties - Footer
   '--atomix-card-footer-padding': 'footer padding',
   '--atomix-card-footer-bg': 'footer background',
   '--atomix-card-footer-border-top': 'footer border top',
-  
+
   // Part properties - Title
   '--atomix-card-title-font-size': 'title font size',
   '--atomix-card-title-font-weight': 'title font weight',
   '--atomix-card-title-color': 'title color',
   '--atomix-card-title-margin-bottom': 'title margin bottom',
-  
+
   // Part properties - Image
   '--atomix-card-image-border-radius': 'image border radius',
   '--atomix-card-image-max-height': 'image max height',
@@ -105,7 +105,7 @@ export const INPUT_CSS_VARS = {
   '--atomix-input-line-height': 'line height',
   '--atomix-input-height': 'height',
   '--atomix-input-placeholder-color': 'placeholder color',
-  
+
   // State properties
   '--atomix-input-hover-border-color': 'hover border color',
   '--atomix-input-focus-border-color': 'focus border color',
@@ -130,27 +130,27 @@ export const MODAL_CSS_VARS = {
   '--atomix-modal-width': 'width',
   '--atomix-modal-max-width': 'maximum width',
   '--atomix-modal-max-height': 'maximum height',
-  
+
   // Backdrop properties
   '--atomix-modal-backdrop-bg': 'backdrop background',
   '--atomix-modal-backdrop-opacity': 'backdrop opacity',
   '--atomix-modal-backdrop-blur': 'backdrop blur',
-  
+
   // Part properties - Header
   '--atomix-modal-header-padding': 'header padding',
   '--atomix-modal-header-border-bottom': 'header border bottom',
   '--atomix-modal-title-font-size': 'title font size',
   '--atomix-modal-title-font-weight': 'title font weight',
-  
+
   // Part properties - Body
   '--atomix-modal-body-padding': 'body padding',
   '--atomix-modal-body-font-size': 'body font size',
-  
+
   // Part properties - Footer
   '--atomix-modal-footer-padding': 'footer padding',
   '--atomix-modal-footer-border-top': 'footer border top',
   '--atomix-modal-footer-gap': 'footer button gap',
-  
+
   // Part properties - Close button
   '--atomix-modal-close-size': 'close button size',
   '--atomix-modal-close-color': 'close button color',
@@ -171,7 +171,7 @@ export const DROPDOWN_CSS_VARS = {
   '--atomix-dropdown-min-width': 'minimum width',
   '--atomix-dropdown-max-height': 'maximum height',
   '--atomix-dropdown-padding': 'padding',
-  
+
   // Part properties - Item
   '--atomix-dropdown-item-padding': 'item padding',
   '--atomix-dropdown-item-font-size': 'item font size',
@@ -180,11 +180,11 @@ export const DROPDOWN_CSS_VARS = {
   '--atomix-dropdown-item-active-bg': 'item active background',
   '--atomix-dropdown-item-active-color': 'item active color',
   '--atomix-dropdown-item-disabled-opacity': 'item disabled opacity',
-  
+
   // Part properties - Divider
   '--atomix-dropdown-divider-color': 'divider color',
   '--atomix-dropdown-divider-margin': 'divider margin',
-  
+
   // Part properties - Header
   '--atomix-dropdown-header-padding': 'header padding',
   '--atomix-dropdown-header-font-size': 'header font size',
@@ -205,7 +205,7 @@ export const BADGE_CSS_VARS = {
   '--atomix-badge-font-size': 'font size',
   '--atomix-badge-font-weight': 'font weight',
   '--atomix-badge-line-height': 'line height',
-  
+
   // Part properties
   '--atomix-badge-icon-size': 'icon size',
   '--atomix-badge-icon-gap': 'icon spacing',
@@ -219,11 +219,11 @@ export const TABS_CSS_VARS = {
   '--atomix-tabs-bg': 'background color',
   '--atomix-tabs-border-color': 'border color',
   '--atomix-tabs-border-width': 'border width',
-  
+
   // Part properties - Nav
   '--atomix-tabs-nav-gap': 'nav gap',
   '--atomix-tabs-nav-padding': 'nav padding',
-  
+
   // Part properties - Tab button
   '--atomix-tabs-btn-padding-x': 'button horizontal padding',
   '--atomix-tabs-btn-padding-y': 'button vertical padding',
@@ -234,7 +234,7 @@ export const TABS_CSS_VARS = {
   '--atomix-tabs-btn-active-color': 'button active color',
   '--atomix-tabs-btn-active-border-color': 'button active border color',
   '--atomix-tabs-btn-active-border-width': 'button active border width',
-  
+
   // Part properties - Panel
   '--atomix-tabs-panel-padding': 'panel padding',
   '--atomix-tabs-panel-bg': 'panel background',
@@ -248,7 +248,7 @@ export const PROGRESS_CSS_VARS = {
   '--atomix-progress-bg': 'background color',
   '--atomix-progress-height': 'height',
   '--atomix-progress-border-radius': 'border radius',
-  
+
   // Part properties - Bar
   '--atomix-progress-bar-bg': 'bar background',
   '--atomix-progress-bar-transition': 'bar transition',
@@ -268,7 +268,7 @@ export const TOOLTIP_CSS_VARS = {
   '--atomix-tooltip-max-width': 'maximum width',
   '--atomix-tooltip-box-shadow': 'box shadow',
   '--atomix-tooltip-z-index': 'z-index',
-  
+
   // Arrow properties
   '--atomix-tooltip-arrow-size': 'arrow size',
   '--atomix-tooltip-arrow-color': 'arrow color',
@@ -285,7 +285,7 @@ export const CHECKBOX_CSS_VARS = {
   '--atomix-checkbox-border-width': 'border width',
   '--atomix-checkbox-border-radius': 'border radius',
   '--atomix-checkbox-transition': 'transition',
-  
+
   // State properties
   '--atomix-checkbox-checked-bg': 'checked background',
   '--atomix-checkbox-checked-border-color': 'checked border color',
@@ -294,7 +294,7 @@ export const CHECKBOX_CSS_VARS = {
   '--atomix-checkbox-focus-ring-width': 'focus ring width',
   '--atomix-checkbox-disabled-opacity': 'disabled opacity',
   '--atomix-checkbox-invalid-border-color': 'invalid border color',
-  
+
   // Part properties
   '--atomix-checkbox-icon-size': 'icon size',
   '--atomix-checkbox-icon-color': 'icon color',
@@ -313,7 +313,7 @@ export const RADIO_CSS_VARS = {
   '--atomix-radio-border-color': 'border color',
   '--atomix-radio-border-width': 'border width',
   '--atomix-radio-transition': 'transition',
-  
+
   // State properties
   '--atomix-radio-checked-bg': 'checked background',
   '--atomix-radio-checked-border-color': 'checked border color',
@@ -322,7 +322,7 @@ export const RADIO_CSS_VARS = {
   '--atomix-radio-focus-ring-width': 'focus ring width',
   '--atomix-radio-disabled-opacity': 'disabled opacity',
   '--atomix-radio-invalid-border-color': 'invalid border color',
-  
+
   // Part properties
   '--atomix-radio-dot-size': 'dot size',
   '--atomix-radio-dot-color': 'dot color',
@@ -385,6 +385,6 @@ export type ComponentCSSVariables = {
  */
 export function getComponentCSSVars<T extends keyof typeof COMPONENT_CSS_VARS>(
   component: T
-): typeof COMPONENT_CSS_VARS[T] {
+): (typeof COMPONENT_CSS_VARS)[T] {
   return COMPONENT_CSS_VARS[component];
 }

package/src/lib/hooks/__tests__/useComponentCustomization.test.ts

@@ -25,9 +25,7 @@ describe('useComponentCustomization', () => {
     });
 
     it('should handle empty cssVars', () => {
-      const { result } = renderHook(() =>
-        useComponentCustomization('Button', {})
-      );
+      const { result } = renderHook(() => useComponentCustomization('Button', {}));
 
       expect(result.current.cssVars).toEqual({});
     });
@@ -77,9 +75,7 @@ describe('useComponentCustomization', () => {
     });
 
     it('should handle empty parts', () => {
-      const { result } = renderHook(() =>
-        useComponentCustomization('Button', {})
-      );
+      const { result } = renderHook(() => useComponentCustomization('Button', {}));
 
       expect(result.current.parts).toEqual({});
     });

package/src/lib/hooks/index.ts

@@ -1,6 +1,6 @@
 /**
  * Hooks Exports
- * 
+ *
  * Custom React hooks for component customization
  */