@dheme/react 2.0.0

package/dist/index.js

@@ -0,0 +1,476 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DhemeProvider: () => DhemeProvider,
+  DhemeScript: () => DhemeScript,
+  ThemeActionsContext: () => ThemeActionsContext,
+  ThemeDataContext: () => ThemeDataContext,
+  applyThemeCSSVariables: () => applyThemeCSSVariables,
+  buildCacheKey: () => buildCacheKey,
+  getBlockingScriptPayload: () => getBlockingScriptPayload,
+  getNextBlockingScriptPayload: () => getNextBlockingScriptPayload,
+  removeThemeCSSVariables: () => removeThemeCSSVariables,
+  themeToCSS: () => themeToCSS,
+  themeToCSSBothModes: () => themeToCSSBothModes,
+  useDhemeClient: () => useDhemeClient,
+  useGenerateTheme: () => useGenerateTheme,
+  useTheme: () => useTheme,
+  useThemeActions: () => useThemeActions
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/DhemeProvider.tsx
+var import_react3 = __toESM(require("react"));
+var import_sdk = require("@dheme/sdk");
+
+// src/contexts/ThemeDataContext.ts
+var import_react = require("react");
+var ThemeDataContext = (0, import_react.createContext)(null);
+
+// src/contexts/ThemeActionsContext.ts
+var import_react2 = require("react");
+var ThemeActionsContext = (0, import_react2.createContext)(null);
+
+// src/constants.ts
+var STORAGE_KEY_PREFIX = "dheme-cache";
+var STORAGE_PARAMS_KEY = "dheme-params";
+var STORAGE_MODE_KEY = "dheme-mode";
+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/storage.ts
+var memoryCache = /* @__PURE__ */ new Map();
+function getItem(key) {
+  if (memoryCache.has(key)) return memoryCache.get(key);
+  try {
+    if (typeof window === "undefined") return null;
+    const value = localStorage.getItem(key);
+    if (value !== null) memoryCache.set(key, value);
+    return value;
+  } catch {
+    return null;
+  }
+}
+function setItem(key, value) {
+  memoryCache.set(key, value);
+  try {
+    if (typeof window !== "undefined") {
+      localStorage.setItem(key, value);
+    }
+  } catch {
+  }
+}
+function removeItem(key) {
+  memoryCache.delete(key);
+  try {
+    if (typeof window !== "undefined") {
+      localStorage.removeItem(key);
+    }
+  } catch {
+  }
+}
+function saveThemeToCache(cacheKey, theme) {
+  setItem(`${STORAGE_KEY_PREFIX}:${cacheKey}`, JSON.stringify(theme));
+}
+function loadThemeFromCache(cacheKey) {
+  const raw = getItem(`${STORAGE_KEY_PREFIX}:${cacheKey}`);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function saveCurrentParams(params) {
+  setItem(STORAGE_PARAMS_KEY, JSON.stringify(params));
+}
+function saveMode(mode) {
+  setItem(STORAGE_MODE_KEY, mode);
+}
+function loadMode() {
+  const raw = getItem(STORAGE_MODE_KEY);
+  if (raw === "light" || raw === "dark") return raw;
+  return null;
+}
+function clearAll() {
+  removeItem(STORAGE_PARAMS_KEY);
+  removeItem(STORAGE_MODE_KEY);
+  const keysToRemove = [];
+  memoryCache.forEach((_, key) => {
+    if (key.startsWith(STORAGE_KEY_PREFIX + ":")) {
+      keysToRemove.push(key);
+    }
+  });
+  keysToRemove.forEach(removeItem);
+  try {
+    if (typeof window !== "undefined") {
+      const len = localStorage.length;
+      for (let i = len - 1; i >= 0; i--) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(STORAGE_KEY_PREFIX + ":")) {
+          localStorage.removeItem(key);
+        }
+      }
+    }
+  } catch {
+  }
+}
+
+// src/components/DhemeProvider.tsx
+function DhemeProvider({
+  apiKey,
+  theme: primaryColor,
+  themeParams,
+  defaultMode = "light",
+  baseUrl,
+  persist = true,
+  autoApply = true,
+  onThemeChange,
+  onModeChange,
+  onError,
+  children
+}) {
+  const client = (0, import_react3.useMemo)(() => new import_sdk.DhemeClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+  const [theme, setTheme] = (0, import_react3.useState)(null);
+  const [mode, setModeState] = (0, import_react3.useState)(() => {
+    if (typeof window === "undefined") return defaultMode;
+    return loadMode() || defaultMode;
+  });
+  const [isReady, setIsReady] = (0, import_react3.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const modeRef = (0, import_react3.useRef)(mode);
+  modeRef.current = mode;
+  const autoApplyRef = (0, import_react3.useRef)(autoApply);
+  autoApplyRef.current = autoApply;
+  const persistRef = (0, import_react3.useRef)(persist);
+  persistRef.current = persist;
+  const onThemeChangeRef = (0, import_react3.useRef)(onThemeChange);
+  onThemeChangeRef.current = onThemeChange;
+  const onModeChangeRef = (0, import_react3.useRef)(onModeChange);
+  onModeChangeRef.current = onModeChange;
+  const onErrorRef = (0, import_react3.useRef)(onError);
+  onErrorRef.current = onError;
+  const abortRef = (0, import_react3.useRef)(null);
+  const setMode = (0, import_react3.useCallback)((newMode) => {
+    setModeState(newMode);
+    if (persistRef.current) saveMode(newMode);
+    onModeChangeRef.current?.(newMode);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (theme && autoApply) {
+      applyThemeCSSVariables(theme, mode);
+    }
+    if (typeof document !== "undefined") {
+      if (mode === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }
+  }, [theme, mode, autoApply]);
+  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;
+        setTheme(data);
+        setIsReady(true);
+        if (autoApplyRef.current) {
+          applyThemeCSSVariables(data, modeRef.current);
+        }
+        if (persistRef.current) {
+          const key = buildCacheKey(params);
+          saveThemeToCache(key, data);
+          saveCurrentParams(params);
+        }
+        onThemeChangeRef.current?.(data);
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        onErrorRef.current?.(error2);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client]
+  );
+  const clearTheme = (0, import_react3.useCallback)(() => {
+    setTheme(null);
+    setIsReady(false);
+    setError(null);
+    if (autoApplyRef.current) removeThemeCSSVariables();
+    if (persistRef.current) clearAll();
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!primaryColor) return;
+    const params = {
+      theme: primaryColor,
+      ...themeParams
+    };
+    const cacheKey = buildCacheKey(params);
+    const cached = persist ? loadThemeFromCache(cacheKey) : null;
+    if (cached) {
+      setTheme(cached);
+      setIsReady(true);
+      if (autoApply) applyThemeCSSVariables(cached, mode);
+      const controller = new AbortController();
+      abortRef.current = controller;
+      client.generateTheme(params).then((response) => {
+        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) {
+          setTheme(data);
+          if (autoApply) applyThemeCSSVariables(data, modeRef.current);
+          saveThemeToCache(cacheKey, data);
+          onThemeChangeRef.current?.(data);
+        }
+      }).catch(() => {
+      });
+    } else {
+      generateTheme(params);
+    }
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, []);
+  const themeDataValue = (0, import_react3.useMemo)(() => ({ theme, mode, isReady }), [theme, mode, isReady]);
+  const themeActionsValue = (0, import_react3.useMemo)(
+    () => ({ generateTheme, setMode, clearTheme, isLoading, error, client }),
+    [generateTheme, setMode, clearTheme, isLoading, error, client]
+  );
+  return import_react3.default.createElement(
+    ThemeDataContext.Provider,
+    { value: themeDataValue },
+    import_react3.default.createElement(ThemeActionsContext.Provider, { value: themeActionsValue }, children)
+  );
+}
+
+// src/components/DhemeScript.tsx
+var import_react4 = __toESM(require("react"));
+
+// 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){}})()`;
+}
+
+// src/components/DhemeScript.tsx
+function DhemeScript({
+  defaultMode = "light",
+  nonce
+}) {
+  const scriptContent = getBlockingScriptPayload(defaultMode);
+  return import_react4.default.createElement("script", {
+    nonce,
+    dangerouslySetInnerHTML: { __html: scriptContent }
+  });
+}
+
+// src/hooks/useTheme.ts
+var import_react5 = require("react");
+function useTheme() {
+  const context = (0, import_react5.useContext)(ThemeDataContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a <DhemeProvider>");
+  }
+  return context;
+}
+
+// src/hooks/useThemeActions.ts
+var import_react6 = require("react");
+function useThemeActions() {
+  const context = (0, import_react6.useContext)(ThemeActionsContext);
+  if (!context) {
+    throw new Error("useThemeActions must be used within a <DhemeProvider>");
+  }
+  return context;
+}
+
+// src/hooks/useGenerateTheme.ts
+var import_react7 = require("react");
+function useGenerateTheme() {
+  const { generateTheme: generate } = useThemeActions();
+  const [isGenerating, setIsGenerating] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const generateTheme = (0, import_react7.useCallback)(
+    async (params) => {
+      setIsGenerating(true);
+      setError(null);
+      try {
+        await generate(params);
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        throw error2;
+      } finally {
+        setIsGenerating(false);
+      }
+    },
+    [generate]
+  );
+  return { generateTheme, isGenerating, error };
+}
+
+// src/hooks/useDhemeClient.ts
+function useDhemeClient() {
+  const { client } = useThemeActions();
+  return client;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DhemeProvider,
+  DhemeScript,
+  ThemeActionsContext,
+  ThemeDataContext,
+  applyThemeCSSVariables,
+  buildCacheKey,
+  getBlockingScriptPayload,
+  getNextBlockingScriptPayload,
+  removeThemeCSSVariables,
+  themeToCSS,
+  themeToCSSBothModes,
+  useDhemeClient,
+  useGenerateTheme,
+  useTheme,
+  useThemeActions
+});