@dheme/next 1.8.0 → 1.10.0

package/README.md

@@ -87,6 +87,7 @@ Fetches the theme on the server and renders inline `<style>` + `<script>` tags.
     radius: 0.75,
     saturationAdjust: 10,
     borderIsColored: false,
+    tailwindVersion: 'v4', // 'v3' | 'v4' (default: 'v4')
   }}
   defaultMode="light" // 'light' | 'dark' (default: 'light')
   baseUrl="http://localhost:3005" // Override API URL (optional)
@@ -103,13 +104,15 @@ Fetches the theme on the server and renders inline `<style>` + `<script>` tags.
 | `baseUrl`     | `string`                              | -         | Override API base URL.                |
 | `nonce`       | `string`                              | -         | CSP nonce for style and script tags.  |
 
-**What it renders:**
+> **`themeParams.tailwindVersion`** controls the CSS variable format in the inlined `<style>`. Use `'v3'` for `hsl(var(--token))` (Tailwind v3 / shadcn/ui) or `'v4'` (default) for `var(--token)` (Tailwind v4 / `@theme inline`). Must match the value used in `<DhemeProvider>`.
+
+**What it renders (Tailwind v4 — default):**
 
 ```html
 <!-- CSS for both modes — parsed before paint -->
 <style>
-  :root { --background:0 0% 100%; --primary:221.2 83.2% 53.3%; ... }
-  .dark { --background:222.2 84% 4.9%; --primary:217.2 91.2% 59.8%; ... }
+  :root { --background:hsl(0 0% 100%); --primary:hsl(221.2 83.2% 53.3%); ... }
+  .dark { --background:hsl(222.2 84% 4.9%); --primary:hsl(217.2 91.2% 59.8%); ... }
 </style>
 
 <!-- Mode detection — applies .dark class if needed -->
@@ -428,10 +431,7 @@ import type {
 } from '@dheme/next';
 
 // Server types
-import type {
-  DhemeScriptProps,
-  GenerateThemeStylesOptions,
-} from '@dheme/next/server';
+import type { DhemeScriptProps, GenerateThemeStylesOptions } from '@dheme/next/server';
 ```
 
 ## Related Packages

package/dist/index.d.mts

@@ -6,6 +6,20 @@ export { ThemeActionsState, ThemeDataState, ThemeGenerator, ThemeGeneratorProps,
 
 interface DhemeProviderProps extends DhemeProviderProps$1 {
     cookieSync?: boolean;
+    /**
+     * URL of a proxy route that forwards theme requests server-side,
+     * keeping the API key out of the browser entirely.
+     *
+     * Set up the route with `createDhemeHandler` from `@dheme/next/server`:
+     * @example
+     * // app/api/dheme/route.ts
+     * import { createDhemeHandler } from '@dheme/next/server';
+     * export const { POST } = createDhemeHandler({ apiKey: process.env.DHEME_API_KEY! });
+     *
+     * // layout.tsx
+     * <DhemeProvider proxyUrl="/api/dheme" theme="..." />
+     */
+    proxyUrl?: string;
 }
 interface GenerateThemeStylesOptions {
     /** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
@@ -21,6 +35,6 @@ interface GenerateThemeStylesOptions {
     onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
 }
 
-declare function DhemeProvider({ children, cookieSync, onThemeChange, onModeChange, theme: primaryColor, themeParams, ...props }: DhemeProviderProps): React.ReactElement;
+declare function DhemeProvider({ children, cookieSync, proxyUrl, onThemeChange, onModeChange, onGenerateTheme, theme: primaryColor, themeParams, ...props }: DhemeProviderProps): React.ReactElement;
 
 export { DhemeProvider, type DhemeProviderProps, type GenerateThemeStylesOptions };

package/dist/index.d.ts

@@ -6,6 +6,20 @@ export { ThemeActionsState, ThemeDataState, ThemeGenerator, ThemeGeneratorProps,
 
 interface DhemeProviderProps extends DhemeProviderProps$1 {
     cookieSync?: boolean;
+    /**
+     * URL of a proxy route that forwards theme requests server-side,
+     * keeping the API key out of the browser entirely.
+     *
+     * Set up the route with `createDhemeHandler` from `@dheme/next/server`:
+     * @example
+     * // app/api/dheme/route.ts
+     * import { createDhemeHandler } from '@dheme/next/server';
+     * export const { POST } = createDhemeHandler({ apiKey: process.env.DHEME_API_KEY! });
+     *
+     * // layout.tsx
+     * <DhemeProvider proxyUrl="/api/dheme" theme="..." />
+     */
+    proxyUrl?: string;
 }
 interface GenerateThemeStylesOptions {
     /** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
@@ -21,6 +35,6 @@ interface GenerateThemeStylesOptions {
     onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
 }
 
-declare function DhemeProvider({ children, cookieSync, onThemeChange, onModeChange, theme: primaryColor, themeParams, ...props }: DhemeProviderProps): React.ReactElement;
+declare function DhemeProvider({ children, cookieSync, proxyUrl, onThemeChange, onModeChange, onGenerateTheme, theme: primaryColor, themeParams, ...props }: DhemeProviderProps): React.ReactElement;
 
 export { DhemeProvider, type DhemeProviderProps, type GenerateThemeStylesOptions };

package/dist/index.js

@@ -53,8 +53,10 @@ function setCookie(name, value) {
 function DhemeProvider({
   children,
   cookieSync = true,
+  proxyUrl,
   onThemeChange,
   onModeChange,
+  onGenerateTheme,
   theme: primaryColor,
   themeParams,
   ...props
@@ -82,11 +84,28 @@ function DhemeProvider({
     },
     [cookieSync, onModeChange]
   );
+  const proxyGenerateTheme = (0, import_react.useCallback)(
+    async (params) => {
+      const res = await fetch(proxyUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(params)
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error ?? `Proxy request failed: ${res.status}`);
+      }
+      return res.json();
+    },
+    [proxyUrl]
+  );
+  const resolvedGenerateTheme = proxyUrl ? proxyGenerateTheme : onGenerateTheme;
   return import_react.default.createElement(import_react2.DhemeProvider, {
     ...props,
     theme: primaryColor,
     themeParams,
     persist: true,
+    onGenerateTheme: resolvedGenerateTheme,
     onThemeChange: handleThemeChange,
     onModeChange: handleModeChange,
     children

package/dist/index.mjs

@@ -10,8 +10,10 @@ function setCookie(name, value) {
 function DhemeProvider({
   children,
   cookieSync = true,
+  proxyUrl,
   onThemeChange,
   onModeChange,
+  onGenerateTheme,
   theme: primaryColor,
   themeParams,
   ...props
@@ -39,11 +41,28 @@ function DhemeProvider({
     },
     [cookieSync, onModeChange]
   );
+  const proxyGenerateTheme = useCallback(
+    async (params) => {
+      const res = await fetch(proxyUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(params)
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error ?? `Proxy request failed: ${res.status}`);
+      }
+      return res.json();
+    },
+    [proxyUrl]
+  );
+  const resolvedGenerateTheme = proxyUrl ? proxyGenerateTheme : onGenerateTheme;
   return React.createElement(ReactDhemeProvider, {
     ...props,
     theme: primaryColor,
     themeParams,
     persist: true,
+    onGenerateTheme: resolvedGenerateTheme,
     onThemeChange: handleThemeChange,
     onModeChange: handleModeChange,
     children

package/dist/server.d.mts

@@ -59,4 +59,25 @@ declare class ThemeCache {
 }
 declare const themeCache: ThemeCache;
 
-export { DhemeScript, type DhemeScriptProps, type GenerateThemeStylesOptions, generateThemeStyles, getModeFromCookie, getParamsFromCookie, themeCache };
+interface DhemeHandlerConfig {
+    /** API key — keep in an environment variable, never in client code. */
+    apiKey: string;
+    baseUrl?: string;
+}
+/**
+ * Creates a Next.js App Router Route Handler that proxies theme generation
+ * requests server-side, so the API key is never exposed to the browser.
+ *
+ * @example
+ * // app/api/dheme/route.ts
+ * import { createDhemeHandler } from '@dheme/next/server';
+ * export const { POST } = createDhemeHandler({ apiKey: process.env.DHEME_API_KEY! });
+ *
+ * // Then in your layout, use proxyUrl instead of apiKey:
+ * // <DhemeProvider proxyUrl="/api/dheme" theme="..." />
+ */
+declare function createDhemeHandler(config: DhemeHandlerConfig): {
+    POST: (request: Request) => Promise<Response>;
+};
+
+export { type DhemeHandlerConfig, DhemeScript, type DhemeScriptProps, type GenerateThemeStylesOptions, createDhemeHandler, generateThemeStyles, getModeFromCookie, getParamsFromCookie, themeCache };

package/dist/server.d.ts

@@ -59,4 +59,25 @@ declare class ThemeCache {
 }
 declare const themeCache: ThemeCache;
 
-export { DhemeScript, type DhemeScriptProps, type GenerateThemeStylesOptions, generateThemeStyles, getModeFromCookie, getParamsFromCookie, themeCache };
+interface DhemeHandlerConfig {
+    /** API key — keep in an environment variable, never in client code. */
+    apiKey: string;
+    baseUrl?: string;
+}
+/**
+ * Creates a Next.js App Router Route Handler that proxies theme generation
+ * requests server-side, so the API key is never exposed to the browser.
+ *
+ * @example
+ * // app/api/dheme/route.ts
+ * import { createDhemeHandler } from '@dheme/next/server';
+ * export const { POST } = createDhemeHandler({ apiKey: process.env.DHEME_API_KEY! });
+ *
+ * // Then in your layout, use proxyUrl instead of apiKey:
+ * // <DhemeProvider proxyUrl="/api/dheme" theme="..." />
+ */
+declare function createDhemeHandler(config: DhemeHandlerConfig): {
+    POST: (request: Request) => Promise<Response>;
+};
+
+export { type DhemeHandlerConfig, DhemeScript, type DhemeScriptProps, type GenerateThemeStylesOptions, createDhemeHandler, generateThemeStyles, getModeFromCookie, getParamsFromCookie, themeCache };

package/dist/server.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var server_exports = {};
 __export(server_exports, {
   DhemeScript: () => DhemeScript,
+  createDhemeHandler: () => createDhemeHandler,
   generateThemeStyles: () => generateThemeStyles,
   getModeFromCookie: () => getModeFromCookie,
   getParamsFromCookie: () => getParamsFromCookie,
@@ -98,8 +99,9 @@ async function DhemeScript({
     }
     themeCache.set(cacheKey, themeData);
   }
-  const lightCSS = (0, import_utils.themeToCSS)(themeData, "light");
-  const darkCSS = (0, import_utils.themeToCSS)(themeData, "dark");
+  const tailwindVersion = params.tailwindVersion ?? "v4";
+  const lightCSS = (0, import_utils.themeToCSS)(themeData, "light", tailwindVersion);
+  const darkCSS = (0, import_utils.themeToCSS)(themeData, "dark", tailwindVersion);
   const styleContent = `:root{${lightCSS}}.dark{${darkCSS}}`;
   const scriptContent = (0, import_utils.getNextBlockingScriptPayload)(defaultMode);
   const styleProps = {
@@ -170,9 +172,33 @@ async function getParamsFromCookie() {
     return null;
   }
 }
+
+// src/server/handler.ts
+var import_sdk3 = require("@dheme/sdk");
+function createDhemeHandler(config) {
+  const client = new import_sdk3.DhemeClient({ apiKey: config.apiKey, baseUrl: config.baseUrl });
+  async function POST(request) {
+    let body;
+    try {
+      body = await request.json();
+    } catch {
+      return Response.json({ error: "Invalid JSON body" }, { status: 400 });
+    }
+    try {
+      const response = await client.generateTheme(body);
+      return Response.json(response.data);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Internal server error";
+      const status = message.includes("429") || message.toLowerCase().includes("rate limit") ? 429 : 500;
+      return Response.json({ error: message }, { status });
+    }
+  }
+  return { POST };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DhemeScript,
+  createDhemeHandler,
   generateThemeStyles,
   getModeFromCookie,
   getParamsFromCookie,

package/dist/server.mjs

@@ -58,8 +58,9 @@ async function DhemeScript({
     }
     themeCache.set(cacheKey, themeData);
   }
-  const lightCSS = themeToCSS(themeData, "light");
-  const darkCSS = themeToCSS(themeData, "dark");
+  const tailwindVersion = params.tailwindVersion ?? "v4";
+  const lightCSS = themeToCSS(themeData, "light", tailwindVersion);
+  const darkCSS = themeToCSS(themeData, "dark", tailwindVersion);
   const styleContent = `:root{${lightCSS}}.dark{${darkCSS}}`;
   const scriptContent = getNextBlockingScriptPayload(defaultMode);
   const styleProps = {
@@ -130,8 +131,32 @@ async function getParamsFromCookie() {
     return null;
   }
 }
+
+// src/server/handler.ts
+import { DhemeClient as DhemeClient3 } from "@dheme/sdk";
+function createDhemeHandler(config) {
+  const client = new DhemeClient3({ apiKey: config.apiKey, baseUrl: config.baseUrl });
+  async function POST(request) {
+    let body;
+    try {
+      body = await request.json();
+    } catch {
+      return Response.json({ error: "Invalid JSON body" }, { status: 400 });
+    }
+    try {
+      const response = await client.generateTheme(body);
+      return Response.json(response.data);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Internal server error";
+      const status = message.includes("429") || message.toLowerCase().includes("rate limit") ? 429 : 500;
+      return Response.json({ error: message }, { status });
+    }
+  }
+  return { POST };
+}
 export {
   DhemeScript,
+  createDhemeHandler,
   generateThemeStyles,
   getModeFromCookie,
   getParamsFromCookie,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dheme/next",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Next.js App Router bindings for Dheme SDK with server-side theme generation",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@dheme/sdk": "^1.1.0",
-    "@dheme/react": "^2.8.0"
+    "@dheme/react": "^2.12.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",