@shohojdhara/atomix 0.5.1 → 0.5.2

package/dist/config.d.ts

@@ -0,0 +1,624 @@
+/**
+ * Theme Manager Type Definitions
+ *
+ * TypeScript types and interfaces for the Atomix Design System theme management system.
+ */
+/**
+ * Theme metadata interface matching themes.config.js structure
+ */
+interface ThemeMetadata {
+    /** Display name of the theme */
+    name: string;
+    /** Unique identifier/class name for the theme */
+    class?: string;
+    /** Theme description */
+    description?: string;
+    /** Theme author */
+    author?: string;
+    /** Theme version (semver) */
+    version?: string;
+    /** Theme tags for categorization */
+    tags?: string[];
+    /** Whether the theme supports dark mode */
+    supportsDarkMode?: boolean;
+    /** Theme status: stable, beta, experimental, deprecated */
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    /** Accessibility information */
+    a11y?: {
+        /** Target contrast ratio */
+        contrastTarget?: number;
+        /** Supported color modes */
+        modes?: string[];
+    };
+    /** Primary theme color (for UI display) */
+    color?: string;
+    /** Theme features list */
+    features?: string[];
+    /** Theme dependencies (other themes required) */
+    dependencies?: string[];
+}
+/**
+ * Color palette configuration for a single color
+ */
+interface PaletteColor {
+    /** Main color value */
+    main: string;
+    /** Light variant (auto-generated if not provided) */
+    light?: string;
+    /** Dark variant (auto-generated if not provided) */
+    dark?: string;
+    /** Contrast text color (auto-generated if not provided) */
+    contrastText?: string;
+}
+/**
+ * Typography configuration options for createTheme
+ */
+interface TypographyOptions {
+    /** Font family */
+    fontFamily?: string;
+    /** Base font size in pixels */
+    fontSize?: number;
+    /** Font weight scale */
+    fontWeightLight?: number;
+    fontWeightRegular?: number;
+    fontWeightMedium?: number;
+    fontWeightSemiBold?: number;
+    fontWeightBold?: number;
+    /** Heading configurations */
+    h1?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h2?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h3?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h4?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h5?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h6?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    /** Body text configurations */
+    body1?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+    };
+    body2?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+    };
+    /** Additional custom typography */
+    [key: string]: any;
+}
+/**
+ * Spacing function type
+ */
+type SpacingFunction = (...values: number[]) => string;
+/**
+ * Breakpoint values configuration
+ */
+interface BreakpointValues {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    [key: string]: number | undefined;
+}
+/**
+ * Shadow configuration
+ */
+interface ShadowOptions {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    [key: string]: string | undefined;
+}
+/**
+ * Transition configuration
+ */
+interface TransitionOptions {
+    /** Transition duration values */
+    duration?: {
+        shortest?: number;
+        shorter?: number;
+        short?: number;
+        standard?: number;
+        complex?: number;
+        enteringScreen?: number;
+        leavingScreen?: number;
+    };
+    /** Easing functions */
+    easing?: {
+        easeInOut?: string;
+        easeOut?: string;
+        easeIn?: string;
+        sharp?: string;
+    };
+}
+/**
+ * Z-index configuration
+ */
+interface ZIndexOptions {
+    mobileStepper?: number;
+    speedDial?: number;
+    appBar?: number;
+    drawer?: number;
+    modal?: number;
+    snackbar?: number;
+    tooltip?: number;
+    [key: string]: number | undefined;
+}
+/**
+ * Border radius configuration
+ */
+interface BorderRadiusOptions {
+    /** Base border radius */
+    base?: string | number;
+    /** Small border radius */
+    sm?: string | number;
+    /** Medium border radius */
+    md?: string | number;
+    /** Large border radius */
+    lg?: string | number;
+    /** Extra large border radius */
+    xl?: string | number;
+    /** 2X large border radius */
+    xxl?: string | number;
+    /** 3X large border radius */
+    '3xl'?: string | number;
+    /** 4X large border radius */
+    '4xl'?: string | number;
+    /** Pill shape (fully rounded) */
+    pill?: string | number;
+    [key: string]: string | number | undefined;
+}
+/**
+ * Custom theme properties for extension
+ * Users can augment this interface via module augmentation
+ */
+interface ThemeCustomProperties {
+    [key: string]: any;
+}
+/**
+ * Complete theme object with computed values
+ * Generated by createTheme function
+ */
+interface Theme extends ThemeMetadata {
+    /** Color palette with computed values */
+    palette: {
+        primary: PaletteColor;
+        secondary: PaletteColor;
+        error: PaletteColor;
+        warning: PaletteColor;
+        info: PaletteColor;
+        success: PaletteColor;
+        background: {
+            default: string;
+            paper: string;
+            subtle: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        [key: string]: any;
+    };
+    /** Typography with computed values */
+    typography: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeightLight: number;
+        fontWeightRegular: number;
+        fontWeightMedium: number;
+        fontWeightSemiBold: number;
+        fontWeightBold: number;
+        h1: Required<NonNullable<TypographyOptions['h1']>>;
+        h2: Required<NonNullable<TypographyOptions['h2']>>;
+        h3: Required<NonNullable<TypographyOptions['h3']>>;
+        h4: Required<NonNullable<TypographyOptions['h4']>>;
+        h5: Required<NonNullable<TypographyOptions['h5']>>;
+        h6: Required<NonNullable<TypographyOptions['h6']>>;
+        body1: Required<NonNullable<TypographyOptions['body1']>>;
+        body2: Required<NonNullable<TypographyOptions['body2']>>;
+        [key: string]: any;
+    };
+    /** Spacing function */
+    spacing: SpacingFunction;
+    /** Breakpoints with computed values */
+    breakpoints: {
+        values: Required<BreakpointValues>;
+        unit: string;
+        up: (key: keyof BreakpointValues | number) => string;
+        down: (key: keyof BreakpointValues | number) => string;
+        between: (start: keyof BreakpointValues | number, end: keyof BreakpointValues | number) => string;
+    };
+    /** Shadows */
+    shadows: Required<ShadowOptions>;
+    /** Transitions */
+    transitions: Required<TransitionOptions>;
+    /** Z-index values */
+    zIndex: Required<ZIndexOptions>;
+    /** Border radius values */
+    borderRadius: Required<BorderRadiusOptions>;
+    /** Custom properties */
+    custom: ThemeCustomProperties;
+    /** Global CSS variables to apply */
+    cssVars?: Record<string, string | number>;
+    /** Indicates this is a JS theme (not CSS-only) */
+    __isJSTheme: true;
+}
+
+/**
+ * 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: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * Color Scale (1-10)
+ */
+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;
+}
+/**
+ * Palette Color Options
+ */
+interface PaletteColorOptions {
+    main: string;
+    light?: string;
+    dark?: string;
+    contrastText?: string;
+}
+/**
+ * Design Tokens Schema (Tailwind-like)
+ */
+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>;
+    };
+}
+/**
+ * CSS Theme Definition
+ */
+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;
+}
+/**
+ * JavaScript Theme Definition
+ */
+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;
+}
+/**
+ * Theme Definition (CSS or JS)
+ */
+type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
+/**
+ * Build configuration (migrated from theme.config.ts)
+ */
+interface BuildConfig {
+    output?: {
+        directory?: string;
+        formats?: {
+            expanded?: string;
+            compressed?: string;
+        };
+    };
+    sass?: {
+        style?: 'expanded' | 'compressed';
+        sourceMap?: boolean;
+        loadPaths?: string[];
+    };
+}
+/**
+ * Runtime configuration (migrated from theme.config.ts)
+ */
+interface RuntimeConfig {
+    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)
+ */
+interface IntegrationConfig {
+    cssVariables?: Record<string, string>;
+    classNames?: {
+        theme?: string;
+        colorMode?: string;
+    };
+}
+/**
+ * Plugin Configuration
+ */
+interface PluginConfig {
+    name: string;
+    options?: Record<string, any>;
+}
+/**
+ * Token Provider Configuration
+ */
+interface TokenProviderConfig {
+    type: 'figma' | 'style-dictionary' | 'w3c' | string;
+    options?: Record<string, any>;
+}
+/**
+ * Token Engine Configuration
+ */
+interface TokenEngineConfig {
+    providers?: Record<string, TokenProviderConfig>;
+    sync?: {
+        pull?: boolean;
+        push?: boolean;
+        onBuild?: boolean;
+    };
+}
+/**
+ * CLI component generator defaults (merged before CLI flags; flags win).
+ */
+interface GeneratorConfig {
+    /** Default output directory for generated components */
+    outputPath?: string;
+    /** Override detected framework */
+    framework?: 'react' | 'next' | 'vanilla';
+    /** Per-feature defaults (CLI --no-* flags override) */
+    features?: {
+        storybook?: boolean;
+        hook?: boolean;
+        styles?: boolean;
+        tests?: boolean;
+    };
+    /** Composable hooks directory relative to project root */
+    hookOutputDir?: string;
+    /** Story file: side-effect import for global Atomix styles */
+    storybookCssImport?: string;
+    /** Barrel file strategy for new components */
+    barrel?: 'index' | 'none';
+}
+/**
+ * Atomix Configuration Interface
+ *
+ * Tailwind-like configuration for external developers.
+ * Focus on theme customization - build/runtime configs are internal only.
+ */
+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;
+    /**
+     * Plugins to extend CLI functionality
+     */
+    plugins?: (string | PluginConfig)[];
+    /**
+     * Universal Token Engine configuration
+     */
+    tokenEngine?: TokenEngineConfig;
+    /**
+     * AI-Assisted Scaffolding configuration
+     */
+    ai?: {
+        /** AI provider (default: 'openai') */
+        provider?: 'openai' | 'anthropic';
+        /** LLM model to use */
+        model?: string;
+        /** API key for the provider */
+        apiKey?: string;
+        /** Temperature for AI creativity (0.0-1.0, default: 0.7) */
+        temperature?: number;
+        /** Maximum tokens per AI response (default: 4000) */
+        maxTokens?: number;
+        /** Rate limiting configuration */
+        rateLimit?: {
+            /** Maximum requests allowed */
+            requests: number;
+            /** Time window in milliseconds */
+            windowMs: number;
+        };
+    };
+    /**
+     * Performance & Telemetry (Phase 4)
+     */
+    telemetry?: {
+        /** Enable local telemetry logging (default: false) */
+        enabled?: boolean;
+        /** Output path for telemetry logs (default: '.atomix/telemetry.json') */
+        path?: string;
+        /** Anonymize telemetry data (default: true) */
+        anonymize?: boolean;
+    };
+    /**
+     * `atomix generate` defaults (CLI overrides these)
+     */
+    generator?: GeneratorConfig;
+    /**
+     * 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.
+         */
+        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;
+        /**
+         * Register custom themes (optional)
+         *
+         * Define CSS or JavaScript themes that can be loaded dynamically.
+         */
+        themes?: Record<string, ThemeDefinition>;
+    };
+    /** @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: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+declare function defineConfig(config: AtomixConfig): AtomixConfig;
+
+export { defineConfig };
+export type { AtomixConfig, BuildConfig, CSSThemeDefinition, ColorScale, GeneratorConfig, IntegrationConfig, JSThemeDefinition, PaletteColorOptions, PluginConfig, RuntimeConfig, ThemeDefinition, ThemeTokens, TokenEngineConfig, TokenProviderConfig };

package/dist/config.js

@@ -0,0 +1,59 @@
+/**
+ * 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: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+/**
+ * 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: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+function defineConfig(config) {
+    return config;
+}
+
+export { defineConfig };
+//# sourceMappingURL=config.js.map

package/dist/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../src/lib/config/index.ts"],"sourcesContent":[null],"names":["defineConfig","config"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgXM,SAAUA,aAAaC;IAC3B,OAAOA;AACT;;"}

package/dist/core.d.ts

@@ -1331,9 +1331,9 @@ type ButtonAsProp = {
     linkComponent?: React$1.ElementType;
     [key: string]: any;
 };
-declare const Button: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & React$1.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>>;
+declare const Button: React$1.NamedExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & React$1.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
-declare const Card: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement | HTMLAnchorElement>>>;
+declare const Card: React$1.NamedExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
 
 declare const ElevationCard: React$1.FC<ElevationCardProps>;