@shohojdhara/atomix 0.3.9 → 0.3.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/theme.d.ts CHANGED
@@ -1043,33 +1043,6 @@ declare function removeCSS(id?: string): void;
1043
1043
  */
1044
1044
  declare function isCSSInjected(id?: string): boolean;
1045
1045
 
1046
- /**
1047
- * Theme Configuration Loader
1048
- *
1049
- * Provides functions to load theme configurations from atomix.config.ts
1050
- * Includes both sync and async versions, with automatic fallbacks
1051
- */
1052
-
1053
- /**
1054
- * Load theme from config file (synchronous, Node.js only)
1055
- * @param configPath - Path to config file (default: atomix.config.ts)
1056
- * @returns DesignTokens from theme configuration
1057
- * @throws Error if config loading is not available in browser environment
1058
- */
1059
- declare function loadThemeFromConfigSync(options?: {
1060
- configPath?: string;
1061
- required?: boolean;
1062
- }): DesignTokens;
1063
- /**
1064
- * Load theme from config file (asynchronous)
1065
- * @param configPath - Path to config file (default: atomix.config.ts)
1066
- * @returns Promise resolving to DesignTokens from theme configuration
1067
- */
1068
- declare function loadThemeFromConfig(options?: {
1069
- configPath?: string;
1070
- required?: boolean;
1071
- }): Promise<DesignTokens>;
1072
-
1073
1046
  /**
1074
1047
  * Theme Provider
1075
1048
  *
@@ -1759,10 +1732,6 @@ declare function injectTheme(css: string, id?: string): void;
1759
1732
  * Remove theme from DOM
1760
1733
  */
1761
1734
  declare function removeTheme(id?: string): void;
1762
- /**
1763
- * Save theme to CSS file
1764
- */
1765
- declare function saveTheme(css: string, filePath: string): Promise<void>;
1766
1735
 
1767
- export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, saveTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
1736
+ export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
1768
1737
  export type { A11yIssue, CSSVariableConfig, CSSVariableNamingOptions, ComponentThemeOptions, ComponentThemeOverride, DesignTokens, GenerateCSSVariablesOptions, NamingOptions, RTLConfig, Theme, ThemeChangeEvent, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemePreviewProps, ThemeProviderProps, ThemeValidationResult, UseHistoryOptions, UseHistoryReturn, UseThemeReturn, ValidationResult };
package/dist/theme.js CHANGED
@@ -1,5 +1,3 @@
1
- import { loadAtomixConfig } from "../lib/config/loader";
2
-
3
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
4
2
 
5
3
  import { createContext, useRef, useEffect, useCallback, useMemo, useState, useContext, Component } from "react";
@@ -557,39 +555,13 @@ class ThemeLogger {
557
555
  tokens = input;
558
556
  }
559
557
  // Merge with defaults and generate CSS
560
- else {
561
- // Check if we're in a browser environment
562
- if ("undefined" != typeof window) throw new ThemeError("No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.", ThemeErrorCode.CONFIG_LOAD_FAILED, {
563
- environment: "browser"
564
- });
565
- // Load from config when no input provided
566
- let loadThemeFromConfigSync, loadAtomixConfig;
567
- try {
568
- const configLoaderModule = require("../config/configLoader"), loaderModule = require("../../config/loader");
569
- // Get prefix from config if needed
570
- if (loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync, loadAtomixConfig = loaderModule.loadAtomixConfig,
571
- tokens = loadThemeFromConfigSync(), !options?.prefix) try {
572
- const config = loadAtomixConfig({
573
- configPath: "atomix.config.ts",
574
- required: !1
575
- });
576
- options = {
577
- ...options,
578
- prefix: config?.prefix || "atomix"
579
- };
580
- } catch (error) {
581
- // If config loading fails, use default prefix
582
- options = {
583
- ...options,
584
- prefix: "atomix"
585
- };
586
- }
587
- } catch (error) {
588
- throw new ThemeError("No input provided and config loading is not available in this environment. Please provide tokens explicitly.", ThemeErrorCode.CONFIG_LOAD_FAILED, {
589
- error: error instanceof Error ? error.message : String(error)
590
- });
591
- }
592
- }
558
+ else
559
+ // Auto-loading config from file system is removed for browser compatibility.
560
+ // If no input is provided, we return an empty theme (using defaults only) or user must provide tokens.
561
+ // This allows createTheme to be isomorphic.
562
+ // Warn in development if no input provided
563
+ "production" !== process.env.NODE_ENV && "undefined" != typeof window && console.warn("Atomix: createTheme() called without tokens. Using default tokens only."),
564
+ tokens = {};
593
565
  const allTokens = createTokens(tokens), prefix = options?.prefix ?? "atomix";
594
566
  // Get prefix from options or use default
595
567
  return generateCSSVariables$1(allTokens, {
@@ -821,26 +793,7 @@ class ThemeLogger {
821
793
  return !!isBrowser$1() && null !== document.getElementById(id);
822
794
  }
823
795
 
824
- /**
825
- * CSS File Utilities
826
- *
827
- * Save CSS to file system (Node.js only).
828
- */
829
- /**
830
- * Save CSS to file
831
- *
832
- * Writes CSS string to a file. Only works in Node.js environment.
833
- *
834
- * @param css - CSS string to save
835
- * @param filePath - Output file path
836
- * @throws Error if called in browser environment
837
- *
838
- * @example
839
- * ```typescript
840
- * const css = ':root { --atomix-color-primary: #7AFFD7; }';
841
- * await saveCSSFile(css, './themes/custom.css');
842
- * ```
843
- */ var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
796
+ var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
844
797
 
845
798
  function getDefaultExportFromCjs(x) {
846
799
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
@@ -1997,79 +1950,6 @@ function generateClassName(block, element, modifiers) {
1997
1950
  return property => getComponentThemeValue(component, property, variant, size);
1998
1951
  }
1999
1952
 
2000
- /**
2001
- * Theme Configuration Loader
2002
- *
2003
- * Provides functions to load theme configurations from atomix.config.ts
2004
- * Includes both sync and async versions, with automatic fallbacks
2005
- */
2006
- /**
2007
- * Load theme from config file (synchronous, Node.js only)
2008
- * @param configPath - Path to config file (default: atomix.config.ts)
2009
- * @returns DesignTokens from theme configuration
2010
- * @throws Error if config loading is not available in browser environment
2011
- */ function loadThemeFromConfigSync(options) {
2012
- // Check if we're in a browser environment
2013
- if ("undefined" != typeof window) throw new Error("loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.");
2014
- // Use static import - the function handles browser environment checks internally
2015
- let config;
2016
- try {
2017
- config = loadAtomixConfig({
2018
- configPath: options?.configPath || "atomix.config.ts",
2019
- required: !1 !== options?.required
2020
- });
2021
- } catch (error) {
2022
- if (!1 !== options?.required) throw new Error("Config loader module not available");
2023
- // Return empty tokens if config is not required
2024
- return createTokens({});
2025
- }
2026
- if (!config?.theme) return createTokens({});
2027
- // Extract tokens from config.theme structure
2028
- // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
2029
- // We need to extract the actual DesignTokens (flat structure)
2030
- const themeConfig = config.theme;
2031
- // Check if theme is directly a flat object (DesignTokens format)
2032
- // This handles the case where config.theme might be passed as DesignTokens directly
2033
- return createTokens(!themeConfig || "object" != typeof themeConfig || "extend" in themeConfig || "tokens" in themeConfig || "themes" in themeConfig ? {} : themeConfig);
2034
- // If theme has nested structure (extend/tokens/themes), we can't directly use it
2035
- // Return empty tokens - the theme system will use defaults
2036
- // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
2037
- }
2038
-
2039
- /**
2040
- * Load theme from config file (asynchronous)
2041
- * @param configPath - Path to config file (default: atomix.config.ts)
2042
- * @returns Promise resolving to DesignTokens from theme configuration
2043
- */ async function loadThemeFromConfig(options) {
2044
- // Check if we're in a browser environment
2045
- if ("undefined" != typeof window) throw new Error("loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
2046
- // Use static import with runtime check
2047
- // The function will handle browser environment checks internally
2048
- let config;
2049
- try {
2050
- // loadAtomixConfig is synchronous, not async
2051
- config = loadAtomixConfig({
2052
- configPath: options?.configPath || "atomix.config.ts",
2053
- required: !1 !== options?.required
2054
- });
2055
- } catch (error) {
2056
- if (!1 !== options?.required) throw new Error("Config loader module not available");
2057
- // Return empty tokens if config is not required
2058
- return createTokens({});
2059
- }
2060
- if (!config?.theme) return createTokens({});
2061
- // Extract tokens from config.theme structure
2062
- // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
2063
- // We need to extract the actual DesignTokens (flat structure)
2064
- const themeConfig = config.theme;
2065
- // Check if theme is directly a flat object (DesignTokens format)
2066
- // This handles the case where config.theme might be passed as DesignTokens directly
2067
- return createTokens(!themeConfig || "object" != typeof themeConfig || "extend" in themeConfig || "tokens" in themeConfig || "themes" in themeConfig ? {} : themeConfig);
2068
- // If theme has nested structure (extend/tokens/themes), we can't directly use it
2069
- // Return empty tokens - the theme system will use defaults
2070
- // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
2071
- }
2072
-
2073
1953
  /**
2074
1954
  * Theme Context
2075
1955
  *
@@ -2111,21 +1991,9 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
2111
1991
  if (stored) return stored;
2112
1992
  }
2113
1993
  // If defaultTheme is provided, use it
2114
- if (null != defaultTheme) return defaultTheme;
2115
- // Try to load from atomix.config.ts as fallback, but only in Node.js/SSR environments
2116
- if ("undefined" == typeof window) try {
2117
- // Dynamically import the config loader to avoid bundling issues in browser
2118
- // eslint-disable-next-line @typescript-eslint/no-var-requires
2119
- const {loadThemeFromConfigSync: loadThemeFromConfigSync} = require("../config/configLoader"), configTokens = loadThemeFromConfigSync();
2120
- if (configTokens && Object.keys(configTokens).length > 0)
2121
- // For simplicity, we'll treat config tokens as a special theme name
2122
- return "config-theme";
2123
- } catch (error) {
2124
- // Failed to load theme from config, using default
2125
- }
1994
+ return null != defaultTheme ? defaultTheme : "default";
2126
1995
  // Default fallback
2127
- return "default";
2128
- }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = useState((() =>
1996
+ }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = useState((() =>
2129
1997
  // If defaultTheme is DesignTokens, store them
2130
1998
  defaultTheme && "string" != typeof defaultTheme ? createTokens(defaultTheme) : null)), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({}), abortControllerRef = useRef(null);
2131
1999
  // Handle initial DesignTokens defaultTheme
@@ -5268,6 +5136,7 @@ class RTLManager {
5268
5136
  // Core Theme Functions
5269
5137
  // ============================================================================
5270
5138
  // Create theme CSS from DesignTokens
5139
+ // File saving utilities removed to prevent bundling Node.js modules in browser
5271
5140
  /**
5272
5141
  * Inject theme CSS into DOM
5273
5142
  */ function injectTheme(css, id = "atomix-theme") {
@@ -5280,21 +5149,5 @@ class RTLManager {
5280
5149
  removeCSS(id);
5281
5150
  }
5282
5151
 
5283
- /**
5284
- * Save theme to CSS file
5285
- */ async function saveTheme(css, filePath) {
5286
- await async function(css, filePath) {
5287
- // Check if in browser environment
5288
- if ("undefined" != typeof window) throw new Error("saveCSSFile can only be used in Node.js environment. Use injectCSS() for browser environments.");
5289
- // Dynamic import to avoid bundling Node.js modules in browser builds
5290
- const fs = await import("fs/promises"), dir = (await import("path")).dirname(filePath);
5291
- await fs.mkdir(dir, {
5292
- recursive: !0
5293
- }),
5294
- // Write file
5295
- await fs.writeFile(filePath, css, "utf8");
5296
- }(css, filePath);
5297
- }
5298
-
5299
- export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, saveTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
5152
+ export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
5300
5153
  //# sourceMappingURL=theme.js.map