@dheme/react 2.9.0 → 2.11.0

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +9 -1
  2. package/dist/index.d.ts +9 -1
  3. package/dist/index.js +7 -2
  4. package/dist/index.mjs +7 -2
  5. package/dist/utils.js +1 -1
  6. package/dist/utils.mjs +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -45,6 +45,14 @@ interface DhemeProviderProps {
45
45
  onThemeChange?: (theme: GenerateThemeResponse) => void;
46
46
  onModeChange?: (mode: ThemeMode) => void;
47
47
  onError?: (error: Error) => void;
48
+ /**
49
+ * Rendered instead of children while the initial theme is loading.
50
+ * Use this to prevent layout flash by showing a skeleton or spinner.
51
+ *
52
+ * Note: when using @dheme/next with DhemeScript, the theme is injected
53
+ * server-side — omit this prop in that case to avoid an unnecessary flash.
54
+ */
55
+ fallback?: React.ReactNode;
48
56
  children: React.ReactNode;
49
57
  }
50
58
  interface DhemeScriptProps {
@@ -52,7 +60,7 @@ interface DhemeScriptProps {
52
60
  nonce?: string;
53
61
  }
54
62
 
55
- declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onGenerateTheme: customGenerateTheme, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
63
+ declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onGenerateTheme: customGenerateTheme, onThemeChange, onModeChange, onError, fallback, children, }: DhemeProviderProps): React__default.ReactElement;
56
64
 
57
65
  declare function DhemeScript({ defaultMode, nonce, }: DhemeScriptProps): React__default.ReactElement;
58
66
 
package/dist/index.d.ts CHANGED
@@ -45,6 +45,14 @@ interface DhemeProviderProps {
45
45
  onThemeChange?: (theme: GenerateThemeResponse) => void;
46
46
  onModeChange?: (mode: ThemeMode) => void;
47
47
  onError?: (error: Error) => void;
48
+ /**
49
+ * Rendered instead of children while the initial theme is loading.
50
+ * Use this to prevent layout flash by showing a skeleton or spinner.
51
+ *
52
+ * Note: when using @dheme/next with DhemeScript, the theme is injected
53
+ * server-side — omit this prop in that case to avoid an unnecessary flash.
54
+ */
55
+ fallback?: React.ReactNode;
48
56
  children: React.ReactNode;
49
57
  }
50
58
  interface DhemeScriptProps {
@@ -52,7 +60,7 @@ interface DhemeScriptProps {
52
60
  nonce?: string;
53
61
  }
54
62
 
55
- declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onGenerateTheme: customGenerateTheme, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
63
+ declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onGenerateTheme: customGenerateTheme, onThemeChange, onModeChange, onError, fallback, children, }: DhemeProviderProps): React__default.ReactElement;
56
64
 
57
65
  declare function DhemeScript({ defaultMode, nonce, }: DhemeScriptProps): React__default.ReactElement;
58
66
 
package/dist/index.js CHANGED
@@ -111,7 +111,7 @@ var TOKEN_TO_CSS_VAR = {
111
111
 
112
112
  // src/utils/cssVariables.ts
113
113
  function formatHSL(color) {
114
- return `${color.h} ${color.s}% ${color.l}%`;
114
+ return `hsl(${color.h} ${color.s}% ${color.l}%)`;
115
115
  }
116
116
  function themeToCSS(theme, mode) {
117
117
  const colors = theme.colors[mode];
@@ -263,6 +263,7 @@ function DhemeProvider({
263
263
  onThemeChange,
264
264
  onModeChange,
265
265
  onError,
266
+ fallback,
266
267
  children
267
268
  }) {
268
269
  const client = (0, import_react3.useMemo)(() => new import_sdk.DhemeClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
@@ -403,7 +404,11 @@ function DhemeProvider({
403
404
  return import_react3.default.createElement(
404
405
  ThemeDataContext.Provider,
405
406
  { value: themeDataValue },
406
- import_react3.default.createElement(ThemeActionsContext.Provider, { value: themeActionsValue }, children)
407
+ import_react3.default.createElement(
408
+ ThemeActionsContext.Provider,
409
+ { value: themeActionsValue },
410
+ !isReady && fallback != null ? fallback : children
411
+ )
407
412
  );
408
413
  }
409
414
 
package/dist/index.mjs CHANGED
@@ -61,7 +61,7 @@ var TOKEN_TO_CSS_VAR = {
61
61
 
62
62
  // src/utils/cssVariables.ts
63
63
  function formatHSL(color) {
64
- return `${color.h} ${color.s}% ${color.l}%`;
64
+ return `hsl(${color.h} ${color.s}% ${color.l}%)`;
65
65
  }
66
66
  function themeToCSS(theme, mode) {
67
67
  const colors = theme.colors[mode];
@@ -213,6 +213,7 @@ function DhemeProvider({
213
213
  onThemeChange,
214
214
  onModeChange,
215
215
  onError,
216
+ fallback,
216
217
  children
217
218
  }) {
218
219
  const client = useMemo(() => new DhemeClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
@@ -353,7 +354,11 @@ function DhemeProvider({
353
354
  return React.createElement(
354
355
  ThemeDataContext.Provider,
355
356
  { value: themeDataValue },
356
- React.createElement(ThemeActionsContext.Provider, { value: themeActionsValue }, children)
357
+ React.createElement(
358
+ ThemeActionsContext.Provider,
359
+ { value: themeActionsValue },
360
+ !isReady && fallback != null ? fallback : children
361
+ )
357
362
  );
358
363
  }
359
364
 
package/dist/utils.js CHANGED
@@ -76,7 +76,7 @@ var TOKEN_TO_CSS_VAR = {
76
76
 
77
77
  // src/utils/cssVariables.ts
78
78
  function formatHSL(color) {
79
- return `${color.h} ${color.s}% ${color.l}%`;
79
+ return `hsl(${color.h} ${color.s}% ${color.l}%)`;
80
80
  }
81
81
  function themeToCSS(theme, mode) {
82
82
  const colors = theme.colors[mode];
package/dist/utils.mjs CHANGED
@@ -44,7 +44,7 @@ var TOKEN_TO_CSS_VAR = {
44
44
 
45
45
  // src/utils/cssVariables.ts
46
46
  function formatHSL(color) {
47
- return `${color.h} ${color.s}% ${color.l}%`;
47
+ return `hsl(${color.h} ${color.s}% ${color.l}%)`;
48
48
  }
49
49
  function themeToCSS(theme, mode) {
50
50
  const colors = theme.colors[mode];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dheme/react",
3
- "version": "2.9.0",
3
+ "version": "2.11.0",
4
4
  "description": "React bindings for Dheme SDK with zero-FOUC theme application",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",