@dheme/react 2.3.0 → 2.5.0

package/dist/index.d.mts

@@ -26,6 +26,22 @@ interface DhemeProviderProps {
     baseUrl?: string;
     persist?: boolean;
     autoApply?: boolean;
+    /**
+     * Custom theme generation function. When provided, replaces the SDK client's
+     * generateTheme call entirely. Useful for internal use cases with custom endpoints.
+     *
+     * @example
+     * // Call an internal proxy route without API key:
+     * onGenerateTheme={async (params) => {
+     *   const res = await fetch('/api/generate-theme/proxy', {
+     *     method: 'POST',
+     *     headers: { 'Content-Type': 'application/json' },
+     *     body: JSON.stringify(params),
+     *   });
+     *   return res.json();
+     * }}
+     */
+    onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
     onThemeChange?: (theme: GenerateThemeResponse) => void;
     onModeChange?: (mode: ThemeMode) => void;
     onError?: (error: Error) => void;
@@ -36,7 +52,7 @@ interface DhemeScriptProps {
     nonce?: string;
 }
 
-declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
+declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onGenerateTheme: customGenerateTheme, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
 
 declare function DhemeScript({ defaultMode, nonce, }: DhemeScriptProps): React__default.ReactElement;
 

package/dist/index.d.ts

@@ -26,6 +26,22 @@ interface DhemeProviderProps {
     baseUrl?: string;
     persist?: boolean;
     autoApply?: boolean;
+    /**
+     * Custom theme generation function. When provided, replaces the SDK client's
+     * generateTheme call entirely. Useful for internal use cases with custom endpoints.
+     *
+     * @example
+     * // Call an internal proxy route without API key:
+     * onGenerateTheme={async (params) => {
+     *   const res = await fetch('/api/generate-theme/proxy', {
+     *     method: 'POST',
+     *     headers: { 'Content-Type': 'application/json' },
+     *     body: JSON.stringify(params),
+     *   });
+     *   return res.json();
+     * }}
+     */
+    onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
     onThemeChange?: (theme: GenerateThemeResponse) => void;
     onModeChange?: (mode: ThemeMode) => void;
     onError?: (error: Error) => void;
@@ -36,7 +52,7 @@ interface DhemeScriptProps {
     nonce?: string;
 }
 
-declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
+declare function DhemeProvider({ apiKey, theme: primaryColor, themeParams, defaultMode, baseUrl, persist, autoApply, onGenerateTheme: customGenerateTheme, onThemeChange, onModeChange, onError, children, }: DhemeProviderProps): React__default.ReactElement;
 
 declare function DhemeScript({ defaultMode, nonce, }: DhemeScriptProps): React__default.ReactElement;
 

package/dist/index.js

@@ -29,8 +29,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   DhemeProvider: () => DhemeProvider,
   DhemeScript: () => DhemeScript,
   ThemeActionsContext: () => ThemeActionsContext,
@@ -48,7 +48,7 @@ __export(index_exports, {
   useTheme: () => useTheme,
   useThemeActions: () => useThemeActions
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/components/DhemeProvider.tsx
 var import_react3 = __toESM(require("react"));
@@ -259,12 +259,15 @@ function DhemeProvider({
   baseUrl,
   persist = true,
   autoApply = true,
+  onGenerateTheme: customGenerateTheme,
   onThemeChange,
   onModeChange,
   onError,
   children
 }) {
   const client = (0, import_react3.useMemo)(() => new import_sdk.DhemeClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+  const customGenerateThemeRef = (0, import_react3.useRef)(customGenerateTheme);
+  customGenerateThemeRef.current = customGenerateTheme;
   const [theme, setTheme] = (0, import_react3.useState)(null);
   const [mode, setModeState] = (0, import_react3.useState)(() => {
     if (typeof window === "undefined") return defaultMode;
@@ -303,14 +306,23 @@ function DhemeProvider({
       }
     }
   }, [theme, mode, autoApply]);
+  const fetchTheme = (0, import_react3.useCallback)(
+    async (params) => {
+      if (customGenerateThemeRef.current) {
+        return customGenerateThemeRef.current(params);
+      }
+      const response = await client.generateTheme(params);
+      return response.data;
+    },
+    [client]
+  );
   const generateTheme = (0, import_react3.useCallback)(
     async (params) => {
       abortRef.current?.abort();
       setIsLoading(true);
       setError(null);
       try {
-        const response = await client.generateTheme(params);
-        const data = response.data;
+        const data = await fetchTheme(params);
         setTheme(data);
         setIsReady(true);
         if (autoApplyRef.current) {
@@ -330,7 +342,7 @@ function DhemeProvider({
         setIsLoading(false);
       }
     },
-    [client]
+    [fetchTheme]
   );
   const clearTheme = (0, import_react3.useCallback)(() => {
     setTheme(null);
@@ -353,9 +365,8 @@ function DhemeProvider({
       if (autoApply) applyThemeCSSVariables(cached, mode);
       const controller = new AbortController();
       abortRef.current = controller;
-      client.generateTheme(params).then((response) => {
+      fetchTheme(params).then((data) => {
         if (controller.signal.aborted) return;
-        const data = response.data;
         const cachedLight = JSON.stringify(cached.colors.light);
         const freshLight = JSON.stringify(data.colors.light);
         if (cachedLight !== freshLight) {

package/dist/index.mjs

@@ -209,12 +209,15 @@ function DhemeProvider({
   baseUrl,
   persist = true,
   autoApply = true,
+  onGenerateTheme: customGenerateTheme,
   onThemeChange,
   onModeChange,
   onError,
   children
 }) {
   const client = useMemo(() => new DhemeClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+  const customGenerateThemeRef = useRef(customGenerateTheme);
+  customGenerateThemeRef.current = customGenerateTheme;
   const [theme, setTheme] = useState(null);
   const [mode, setModeState] = useState(() => {
     if (typeof window === "undefined") return defaultMode;
@@ -253,14 +256,23 @@ function DhemeProvider({
       }
     }
   }, [theme, mode, autoApply]);
+  const fetchTheme = useCallback(
+    async (params) => {
+      if (customGenerateThemeRef.current) {
+        return customGenerateThemeRef.current(params);
+      }
+      const response = await client.generateTheme(params);
+      return response.data;
+    },
+    [client]
+  );
   const generateTheme = useCallback(
     async (params) => {
       abortRef.current?.abort();
       setIsLoading(true);
       setError(null);
       try {
-        const response = await client.generateTheme(params);
-        const data = response.data;
+        const data = await fetchTheme(params);
         setTheme(data);
         setIsReady(true);
         if (autoApplyRef.current) {
@@ -280,7 +292,7 @@ function DhemeProvider({
         setIsLoading(false);
       }
     },
-    [client]
+    [fetchTheme]
   );
   const clearTheme = useCallback(() => {
     setTheme(null);
@@ -303,9 +315,8 @@ function DhemeProvider({
       if (autoApply) applyThemeCSSVariables(cached, mode);
       const controller = new AbortController();
       abortRef.current = controller;
-      client.generateTheme(params).then((response) => {
+      fetchTheme(params).then((data) => {
         if (controller.signal.aborted) return;
-        const data = response.data;
         const cachedLight = JSON.stringify(cached.colors.light);
         const freshLight = JSON.stringify(data.colors.light);
         if (cachedLight !== freshLight) {

package/dist/utils.d.mts

@@ -0,0 +1,15 @@
+import { GenerateThemeResponse, GenerateThemeRequest } from '@dheme/sdk';
+
+type ThemeMode = 'light' | 'dark';
+
+declare function themeToCSS(theme: GenerateThemeResponse, mode: ThemeMode): string;
+declare function themeToCSSBothModes(theme: GenerateThemeResponse): string;
+declare function applyThemeCSSVariables(theme: GenerateThemeResponse, mode: ThemeMode): void;
+declare function removeThemeCSSVariables(): void;
+
+declare function buildCacheKey(params: GenerateThemeRequest): string;
+
+declare function getBlockingScriptPayload(defaultMode: ThemeMode): string;
+declare function getNextBlockingScriptPayload(defaultMode: ThemeMode): string;
+
+export { applyThemeCSSVariables, buildCacheKey, getBlockingScriptPayload, getNextBlockingScriptPayload, removeThemeCSSVariables, themeToCSS, themeToCSSBothModes };

package/dist/utils.d.ts

@@ -0,0 +1,15 @@
+import { GenerateThemeResponse, GenerateThemeRequest } from '@dheme/sdk';
+
+type ThemeMode = 'light' | 'dark';
+
+declare function themeToCSS(theme: GenerateThemeResponse, mode: ThemeMode): string;
+declare function themeToCSSBothModes(theme: GenerateThemeResponse): string;
+declare function applyThemeCSSVariables(theme: GenerateThemeResponse, mode: ThemeMode): void;
+declare function removeThemeCSSVariables(): void;
+
+declare function buildCacheKey(params: GenerateThemeRequest): string;
+
+declare function getBlockingScriptPayload(defaultMode: ThemeMode): string;
+declare function getNextBlockingScriptPayload(defaultMode: ThemeMode): string;
+
+export { applyThemeCSSVariables, buildCacheKey, getBlockingScriptPayload, getNextBlockingScriptPayload, removeThemeCSSVariables, themeToCSS, themeToCSSBothModes };

package/dist/utils.js

@@ -0,0 +1,156 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  applyThemeCSSVariables: () => applyThemeCSSVariables,
+  buildCacheKey: () => buildCacheKey,
+  getBlockingScriptPayload: () => getBlockingScriptPayload,
+  getNextBlockingScriptPayload: () => getNextBlockingScriptPayload,
+  removeThemeCSSVariables: () => removeThemeCSSVariables,
+  themeToCSS: () => themeToCSS,
+  themeToCSSBothModes: () => themeToCSSBothModes
+});
+module.exports = __toCommonJS(utils_exports);
+
+// src/constants.ts
+var CSS_TOKEN_KEYS = [
+  "background",
+  "foreground",
+  "card",
+  "cardForeground",
+  "popover",
+  "popoverForeground",
+  "primary",
+  "primaryForeground",
+  "secondary",
+  "secondaryForeground",
+  "muted",
+  "mutedForeground",
+  "accent",
+  "accentForeground",
+  "destructive",
+  "destructiveForeground",
+  "border",
+  "input",
+  "ring"
+];
+var TOKEN_TO_CSS_VAR = {
+  background: "--background",
+  foreground: "--foreground",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  popover: "--popover",
+  popoverForeground: "--popover-foreground",
+  primary: "--primary",
+  primaryForeground: "--primary-foreground",
+  secondary: "--secondary",
+  secondaryForeground: "--secondary-foreground",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  accent: "--accent",
+  accentForeground: "--accent-foreground",
+  destructive: "--destructive",
+  destructiveForeground: "--destructive-foreground",
+  border: "--border",
+  input: "--input",
+  ring: "--ring"
+};
+
+// src/utils/cssVariables.ts
+function formatHSL(color) {
+  return `${color.h} ${color.s}% ${color.l}%`;
+}
+function themeToCSS(theme, mode) {
+  const colors = theme.colors[mode];
+  if (!colors) return "";
+  const parts = [];
+  for (const key of CSS_TOKEN_KEYS) {
+    const color = colors[key];
+    if (color) {
+      parts.push(`${TOKEN_TO_CSS_VAR[key]}:${formatHSL(color)}`);
+    }
+  }
+  if (theme.radius != null) {
+    parts.push(`--radius:${theme.radius}rem`);
+  }
+  return parts.join(";");
+}
+function themeToCSSBothModes(theme) {
+  const lightCSS = themeToCSS(theme, "light");
+  const darkCSS = themeToCSS(theme, "dark");
+  return `:root{${lightCSS}}.dark{${darkCSS}}`;
+}
+function applyThemeCSSVariables(theme, mode) {
+  if (typeof document === "undefined") return;
+  const colors = theme.colors[mode];
+  if (!colors) return;
+  const style = document.documentElement.style;
+  for (const key of CSS_TOKEN_KEYS) {
+    const color = colors[key];
+    if (color) {
+      style.setProperty(TOKEN_TO_CSS_VAR[key], formatHSL(color));
+    }
+  }
+  if (theme.radius != null) {
+    style.setProperty("--radius", `${theme.radius}rem`);
+  }
+}
+function removeThemeCSSVariables() {
+  if (typeof document === "undefined") return;
+  const style = document.documentElement.style;
+  for (const key of CSS_TOKEN_KEYS) {
+    style.removeProperty(TOKEN_TO_CSS_VAR[key]);
+  }
+  style.removeProperty("--radius");
+}
+
+// src/utils/cacheKey.ts
+function buildCacheKey(params) {
+  const normalized = {
+    t: params.theme.toLowerCase().replace("#", ""),
+    s: (params.secondaryColor || "").toLowerCase().replace("#", ""),
+    r: params.radius ?? 0.5,
+    sa: params.saturationAdjust ?? 0,
+    la: params.lightnessAdjust ?? 0,
+    ca: params.contrastAdjust ?? 0,
+    ci: params.cardIsColored ?? false,
+    bi: params.backgroundIsColored ?? true
+  };
+  return JSON.stringify(normalized);
+}
+
+// src/utils/scriptPayload.ts
+function getBlockingScriptPayload(defaultMode) {
+  return `(function(){try{var p=localStorage.getItem('dheme-params');if(!p)return;var params=JSON.parse(p);var n={t:(params.theme||'').toLowerCase().replace('#',''),s:(params.secondaryColor||'').toLowerCase().replace('#',''),r:params.radius!=null?params.radius:0.5,sa:params.saturationAdjust||0,la:params.lightnessAdjust||0,ca:params.contrastAdjust||0,ci:!!params.cardIsColored,bi:params.backgroundIsColored!=null?params.backgroundIsColored:true};var key='dheme-cache:'+JSON.stringify(n);var c=localStorage.getItem(key);if(!c)return;var theme=JSON.parse(c);var mode=localStorage.getItem('dheme-mode')||'${defaultMode}';var colors=theme.colors[mode];if(!colors)return;var d=document.documentElement.style;var m={background:'--background',foreground:'--foreground',card:'--card',cardForeground:'--card-foreground',popover:'--popover',popoverForeground:'--popover-foreground',primary:'--primary',primaryForeground:'--primary-foreground',secondary:'--secondary',secondaryForeground:'--secondary-foreground',muted:'--muted',mutedForeground:'--muted-foreground',accent:'--accent',accentForeground:'--accent-foreground',destructive:'--destructive',destructiveForeground:'--destructive-foreground',border:'--border',input:'--input',ring:'--ring'};for(var k in m){if(colors[k]){var v=colors[k];d.setProperty(m[k],v.h+' '+v.s+'% '+v.l+'%')}}if(theme.radius!=null)d.setProperty('--radius',theme.radius+'rem');if(mode==='dark')document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark')}catch(e){}})()`;
+}
+function getNextBlockingScriptPayload(defaultMode) {
+  return `(function(){try{var m=document.cookie.match(/dheme-mode=(\\w+)/);var mode=m?m[1]:null;if(!mode){mode=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'${defaultMode}'}if(mode==='dark'){document.documentElement.classList.add('dark')}else{document.documentElement.classList.remove('dark')}}catch(e){}})()`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  applyThemeCSSVariables,
+  buildCacheKey,
+  getBlockingScriptPayload,
+  getNextBlockingScriptPayload,
+  removeThemeCSSVariables,
+  themeToCSS,
+  themeToCSSBothModes
+});

package/dist/utils.mjs

@@ -0,0 +1,123 @@
+// src/constants.ts
+var CSS_TOKEN_KEYS = [
+  "background",
+  "foreground",
+  "card",
+  "cardForeground",
+  "popover",
+  "popoverForeground",
+  "primary",
+  "primaryForeground",
+  "secondary",
+  "secondaryForeground",
+  "muted",
+  "mutedForeground",
+  "accent",
+  "accentForeground",
+  "destructive",
+  "destructiveForeground",
+  "border",
+  "input",
+  "ring"
+];
+var TOKEN_TO_CSS_VAR = {
+  background: "--background",
+  foreground: "--foreground",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  popover: "--popover",
+  popoverForeground: "--popover-foreground",
+  primary: "--primary",
+  primaryForeground: "--primary-foreground",
+  secondary: "--secondary",
+  secondaryForeground: "--secondary-foreground",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  accent: "--accent",
+  accentForeground: "--accent-foreground",
+  destructive: "--destructive",
+  destructiveForeground: "--destructive-foreground",
+  border: "--border",
+  input: "--input",
+  ring: "--ring"
+};
+
+// src/utils/cssVariables.ts
+function formatHSL(color) {
+  return `${color.h} ${color.s}% ${color.l}%`;
+}
+function themeToCSS(theme, mode) {
+  const colors = theme.colors[mode];
+  if (!colors) return "";
+  const parts = [];
+  for (const key of CSS_TOKEN_KEYS) {
+    const color = colors[key];
+    if (color) {
+      parts.push(`${TOKEN_TO_CSS_VAR[key]}:${formatHSL(color)}`);
+    }
+  }
+  if (theme.radius != null) {
+    parts.push(`--radius:${theme.radius}rem`);
+  }
+  return parts.join(";");
+}
+function themeToCSSBothModes(theme) {
+  const lightCSS = themeToCSS(theme, "light");
+  const darkCSS = themeToCSS(theme, "dark");
+  return `:root{${lightCSS}}.dark{${darkCSS}}`;
+}
+function applyThemeCSSVariables(theme, mode) {
+  if (typeof document === "undefined") return;
+  const colors = theme.colors[mode];
+  if (!colors) return;
+  const style = document.documentElement.style;
+  for (const key of CSS_TOKEN_KEYS) {
+    const color = colors[key];
+    if (color) {
+      style.setProperty(TOKEN_TO_CSS_VAR[key], formatHSL(color));
+    }
+  }
+  if (theme.radius != null) {
+    style.setProperty("--radius", `${theme.radius}rem`);
+  }
+}
+function removeThemeCSSVariables() {
+  if (typeof document === "undefined") return;
+  const style = document.documentElement.style;
+  for (const key of CSS_TOKEN_KEYS) {
+    style.removeProperty(TOKEN_TO_CSS_VAR[key]);
+  }
+  style.removeProperty("--radius");
+}
+
+// src/utils/cacheKey.ts
+function buildCacheKey(params) {
+  const normalized = {
+    t: params.theme.toLowerCase().replace("#", ""),
+    s: (params.secondaryColor || "").toLowerCase().replace("#", ""),
+    r: params.radius ?? 0.5,
+    sa: params.saturationAdjust ?? 0,
+    la: params.lightnessAdjust ?? 0,
+    ca: params.contrastAdjust ?? 0,
+    ci: params.cardIsColored ?? false,
+    bi: params.backgroundIsColored ?? true
+  };
+  return JSON.stringify(normalized);
+}
+
+// src/utils/scriptPayload.ts
+function getBlockingScriptPayload(defaultMode) {
+  return `(function(){try{var p=localStorage.getItem('dheme-params');if(!p)return;var params=JSON.parse(p);var n={t:(params.theme||'').toLowerCase().replace('#',''),s:(params.secondaryColor||'').toLowerCase().replace('#',''),r:params.radius!=null?params.radius:0.5,sa:params.saturationAdjust||0,la:params.lightnessAdjust||0,ca:params.contrastAdjust||0,ci:!!params.cardIsColored,bi:params.backgroundIsColored!=null?params.backgroundIsColored:true};var key='dheme-cache:'+JSON.stringify(n);var c=localStorage.getItem(key);if(!c)return;var theme=JSON.parse(c);var mode=localStorage.getItem('dheme-mode')||'${defaultMode}';var colors=theme.colors[mode];if(!colors)return;var d=document.documentElement.style;var m={background:'--background',foreground:'--foreground',card:'--card',cardForeground:'--card-foreground',popover:'--popover',popoverForeground:'--popover-foreground',primary:'--primary',primaryForeground:'--primary-foreground',secondary:'--secondary',secondaryForeground:'--secondary-foreground',muted:'--muted',mutedForeground:'--muted-foreground',accent:'--accent',accentForeground:'--accent-foreground',destructive:'--destructive',destructiveForeground:'--destructive-foreground',border:'--border',input:'--input',ring:'--ring'};for(var k in m){if(colors[k]){var v=colors[k];d.setProperty(m[k],v.h+' '+v.s+'% '+v.l+'%')}}if(theme.radius!=null)d.setProperty('--radius',theme.radius+'rem');if(mode==='dark')document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark')}catch(e){}})()`;
+}
+function getNextBlockingScriptPayload(defaultMode) {
+  return `(function(){try{var m=document.cookie.match(/dheme-mode=(\\w+)/);var mode=m?m[1]:null;if(!mode){mode=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'${defaultMode}'}if(mode==='dark'){document.documentElement.classList.add('dark')}else{document.documentElement.classList.remove('dark')}}catch(e){}})()`;
+}
+export {
+  applyThemeCSSVariables,
+  buildCacheKey,
+  getBlockingScriptPayload,
+  getNextBlockingScriptPayload,
+  removeThemeCSSVariables,
+  themeToCSS,
+  themeToCSSBothModes
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dheme/react",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "React bindings for Dheme SDK with zero-FOUC theme application",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -10,6 +10,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.js"
     }
   },
   "files": [