react-tenant-theme 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ThemeTokens = Record<string, string | number>;
+type ThemeDefinition = {
+    id: string;
+    name: string;
+    tokens: ThemeTokens;
+};
+type TenantDefinition = {
+    id: string;
+    name: string;
+    themes: ThemeDefinition[];
+    defaultThemeId: string;
+};
+type ThemeEngineConfig = {
+    scope?: string;
+    prefix?: string;
+};
+
+declare const applyThemeTokens: (theme: ThemeDefinition, config?: ThemeEngineConfig) => void;
+
+type ThemeContextValue = {
+    tenant: TenantDefinition;
+    theme: ThemeDefinition;
+    setTheme: (themeId: string) => void;
+    setTenant: (tenantId: string) => void;
+    tenants: TenantDefinition[];
+};
+type ThemeProviderProps = {
+    tenants: TenantDefinition[];
+    initialTenantId: string;
+    config?: ThemeEngineConfig;
+    children: React.ReactNode;
+};
+declare function ThemeProvider({ tenants, initialTenantId, config, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useThemeEngine(): ThemeContextValue;
+
+export { type TenantDefinition, type ThemeDefinition, type ThemeEngineConfig, ThemeProvider, type ThemeProviderProps, type ThemeTokens, applyThemeTokens, useThemeEngine };

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ThemeTokens = Record<string, string | number>;
+type ThemeDefinition = {
+    id: string;
+    name: string;
+    tokens: ThemeTokens;
+};
+type TenantDefinition = {
+    id: string;
+    name: string;
+    themes: ThemeDefinition[];
+    defaultThemeId: string;
+};
+type ThemeEngineConfig = {
+    scope?: string;
+    prefix?: string;
+};
+
+declare const applyThemeTokens: (theme: ThemeDefinition, config?: ThemeEngineConfig) => void;
+
+type ThemeContextValue = {
+    tenant: TenantDefinition;
+    theme: ThemeDefinition;
+    setTheme: (themeId: string) => void;
+    setTenant: (tenantId: string) => void;
+    tenants: TenantDefinition[];
+};
+type ThemeProviderProps = {
+    tenants: TenantDefinition[];
+    initialTenantId: string;
+    config?: ThemeEngineConfig;
+    children: React.ReactNode;
+};
+declare function ThemeProvider({ tenants, initialTenantId, config, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useThemeEngine(): ThemeContextValue;
+
+export { type TenantDefinition, type ThemeDefinition, type ThemeEngineConfig, ThemeProvider, type ThemeProviderProps, type ThemeTokens, applyThemeTokens, useThemeEngine };

package/dist/index.js

@@ -0,0 +1,145 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ThemeProvider: () => ThemeProvider,
+  applyThemeTokens: () => applyThemeTokens,
+  useThemeEngine: () => useThemeEngine
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/engine.ts
+var normalizeVar = (key, prefix) => {
+  const raw = key.startsWith("--") ? key.slice(2) : key;
+  const withPrefix = prefix ? `${prefix}-${raw}` : raw;
+  return `--${withPrefix}`;
+};
+var applyThemeTokens = (theme, config = {}) => {
+  const scope = config.scope ?? ":root";
+  const el = document.querySelector(scope);
+  if (!el) return;
+  const { prefix } = config;
+  Object.entries(theme.tokens).forEach(([k, v]) => {
+    el.style.setProperty(normalizeVar(k, prefix), String(v));
+  });
+  el.setAttribute("data-theme", theme.id);
+};
+
+// src/react.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var STORAGE_KEY = "react-tenant-theme";
+function loadState() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed?.tenantId !== "string" || typeof parsed?.themeId !== "string") {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function saveState(state) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+  }
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
+var ThemeContext = (0, import_react.createContext)(null);
+function ThemeProvider({
+  tenants,
+  initialTenantId,
+  config,
+  children
+}) {
+  const initialTenant = tenants.find((t) => t.id === initialTenantId) ?? tenants[0];
+  if (!initialTenant) {
+    throw new Error("ThemeProvider requires at least one tenant");
+  }
+  const [tenantId, setTenantId] = (0, import_react.useState)(initialTenant.id);
+  const tenant = tenants.find((t) => t.id === tenantId) ?? initialTenant;
+  const [themeId, setThemeId] = (0, import_react.useState)(tenant.defaultThemeId);
+  const [hydrated, setHydrated] = (0, import_react.useState)(false);
+  useIsomorphicLayoutEffect(() => {
+    const persisted = loadState();
+    if (!persisted) {
+      setHydrated(true);
+      return;
+    }
+    const nextTenant = tenants.find((t) => t.id === persisted.tenantId) ?? initialTenant;
+    const nextThemeId = nextTenant.themes.some(
+      (th) => th.id === persisted.themeId
+    ) ? persisted.themeId : nextTenant.defaultThemeId;
+    setTenantId(nextTenant.id);
+    setThemeId(nextThemeId);
+    setHydrated(true);
+  }, []);
+  const effectiveThemeId = tenant.themes.some(
+    (th) => th.id === themeId
+  ) ? themeId : tenant.defaultThemeId;
+  const theme = tenant.themes.find((th) => th.id === effectiveThemeId) ?? tenant.themes[0];
+  useIsomorphicLayoutEffect(() => {
+    if (!theme) return;
+    applyThemeTokens(theme, config);
+    if (hydrated) {
+      saveState({ tenantId, themeId: effectiveThemeId });
+    }
+  }, [tenantId, effectiveThemeId, theme, config, hydrated]);
+  const value = (0, import_react.useMemo)(() => {
+    return {
+      tenant,
+      theme,
+      tenants,
+      setTenant: (nextTenantId) => {
+        const nextTenant = tenants.find(
+          (t) => t.id === nextTenantId
+        );
+        if (!nextTenant) return;
+        setTenantId(nextTenantId);
+        setThemeId(nextTenant.defaultThemeId);
+      },
+      setTheme: (nextThemeId) => setThemeId(nextThemeId)
+    };
+  }, [tenant, theme, tenants]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+}
+function useThemeEngine() {
+  const ctx = (0, import_react.useContext)(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      "useThemeEngine must be used within ThemeProvider"
+    );
+  }
+  return ctx;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeProvider,
+  applyThemeTokens,
+  useThemeEngine
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/engine.ts","../src/react.tsx"],"sourcesContent":["export * from \"./types\";\nexport * from \"./engine\";\nexport * from \"./react\";","import type { ThemeDefinition, ThemeEngineConfig } from \"./types\";\n\nconst normalizeVar = (key: string, prefix?: string) => {\n  const raw = key.startsWith(\"--\") ? key.slice(2) : key;\n  const withPrefix = prefix ? `${prefix}-${raw}` : raw;\n  return `--${withPrefix}`;\n};\n\nexport const applyThemeTokens = (\n  theme: ThemeDefinition,\n  config: ThemeEngineConfig = {}\n) => {\n  const scope = config.scope ?? \":root\";\n  const el = document.querySelector(scope) as HTMLElement | null;\n  if (!el) return;\n\n  const { prefix } = config;\n\n  Object.entries(theme.tokens).forEach(([k, v]) => {\n    el.style.setProperty(normalizeVar(k, prefix), String(v));\n  });\n\n  el.setAttribute(\"data-theme\", theme.id);\n};","import React, {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  useEffect,\n  useLayoutEffect,\n} from \"react\";\nimport type {\n  TenantDefinition,\n  ThemeDefinition,\n  ThemeEngineConfig,\n} from \"./types\";\nimport { applyThemeTokens } from \"./engine\";\n\nconst STORAGE_KEY = \"react-tenant-theme\";\n\ntype PersistedState = {\n  tenantId: string;\n  themeId: string;\n};\n\nfunction loadState(): PersistedState | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n    if (!raw) return null;\n    const parsed = JSON.parse(raw) as PersistedState;\n    if (\n      typeof parsed?.tenantId !== \"string\" ||\n      typeof parsed?.themeId !== \"string\"\n    ) {\n      return null;\n    }\n    return parsed;\n  } catch {\n    return null;\n  }\n}\n\nfunction saveState(state: PersistedState) {\n  if (typeof window === \"undefined\") return;\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));\n  } catch {\n    // ignore storage errors\n  }\n}\n\n// Prevent SSR warnings\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\ntype ThemeContextValue = {\n  tenant: TenantDefinition;\n  theme: ThemeDefinition;\n  setTheme: (themeId: string) => void;\n  setTenant: (tenantId: string) => void;\n  tenants: TenantDefinition[];\n};\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  tenants: TenantDefinition[];\n  initialTenantId: string;\n  config?: ThemeEngineConfig;\n  children: React.ReactNode;\n};\n\nexport function ThemeProvider({\n  tenants,\n  initialTenantId,\n  config,\n  children,\n}: ThemeProviderProps) {\n  const initialTenant =\n    tenants.find((t) => t.id === initialTenantId) ?? tenants[0];\n\n  if (!initialTenant) {\n    throw new Error(\"ThemeProvider requires at least one tenant\");\n  }\n\n  // Default state\n  const [tenantId, setTenantId] = useState(initialTenant.id);\n  const tenant =\n    tenants.find((t) => t.id === tenantId) ?? initialTenant;\n\n  const [themeId, setThemeId] = useState(tenant.defaultThemeId);\n  const [hydrated, setHydrated] = useState(false);\n\n  // Hydrate BEFORE first paint (no flash)\n  useIsomorphicLayoutEffect(() => {\n    const persisted = loadState();\n    if (!persisted) {\n      setHydrated(true);\n      return;\n    }\n\n    const nextTenant =\n      tenants.find((t) => t.id === persisted.tenantId) ?? initialTenant;\n\n    const nextThemeId = nextTenant.themes.some(\n      (th) => th.id === persisted.themeId\n    )\n      ? persisted.themeId\n      : nextTenant.defaultThemeId;\n\n    setTenantId(nextTenant.id);\n    setThemeId(nextThemeId);\n    setHydrated(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Ensure valid theme for selected tenant\n  const effectiveThemeId = tenant.themes.some(\n    (th) => th.id === themeId\n  )\n    ? themeId\n    : tenant.defaultThemeId;\n\n  const theme =\n    tenant.themes.find((th) => th.id === effectiveThemeId) ??\n    tenant.themes[0];\n\n  // Apply tokens before paint (no flicker)\n  useIsomorphicLayoutEffect(() => {\n    if (!theme) return;\n\n    applyThemeTokens(theme, config);\n\n    if (hydrated) {\n      saveState({ tenantId, themeId: effectiveThemeId });\n    }\n  }, [tenantId, effectiveThemeId, theme, config, hydrated]);\n\n  const value = useMemo<ThemeContextValue>(() => {\n    return {\n      tenant,\n      theme: theme!,\n      tenants,\n      setTenant: (nextTenantId: string) => {\n        const nextTenant = tenants.find(\n          (t) => t.id === nextTenantId\n        );\n        if (!nextTenant) return;\n        setTenantId(nextTenantId);\n        setThemeId(nextTenant.defaultThemeId);\n      },\n      setTheme: (nextThemeId: string) =>\n        setThemeId(nextThemeId),\n    };\n  }, [tenant, theme, tenants]);\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useThemeEngine() {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error(\n      \"useThemeEngine must be used within ThemeProvider\"\n    );\n  }\n  return ctx;\n}"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,123 @@
+// src/engine.ts
+var normalizeVar = (key, prefix) => {
+  const raw = key.startsWith("--") ? key.slice(2) : key;
+  const withPrefix = prefix ? `${prefix}-${raw}` : raw;
+  return `--${withPrefix}`;
+};
+var applyThemeTokens = (theme, config = {}) => {
+  const scope = config.scope ?? ":root";
+  const el = document.querySelector(scope);
+  if (!el) return;
+  const { prefix } = config;
+  Object.entries(theme.tokens).forEach(([k, v]) => {
+    el.style.setProperty(normalizeVar(k, prefix), String(v));
+  });
+  el.setAttribute("data-theme", theme.id);
+};
+
+// src/react.tsx
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  useEffect,
+  useLayoutEffect
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var STORAGE_KEY = "react-tenant-theme";
+function loadState() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed?.tenantId !== "string" || typeof parsed?.themeId !== "string") {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function saveState(state) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+  }
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var ThemeContext = createContext(null);
+function ThemeProvider({
+  tenants,
+  initialTenantId,
+  config,
+  children
+}) {
+  const initialTenant = tenants.find((t) => t.id === initialTenantId) ?? tenants[0];
+  if (!initialTenant) {
+    throw new Error("ThemeProvider requires at least one tenant");
+  }
+  const [tenantId, setTenantId] = useState(initialTenant.id);
+  const tenant = tenants.find((t) => t.id === tenantId) ?? initialTenant;
+  const [themeId, setThemeId] = useState(tenant.defaultThemeId);
+  const [hydrated, setHydrated] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    const persisted = loadState();
+    if (!persisted) {
+      setHydrated(true);
+      return;
+    }
+    const nextTenant = tenants.find((t) => t.id === persisted.tenantId) ?? initialTenant;
+    const nextThemeId = nextTenant.themes.some(
+      (th) => th.id === persisted.themeId
+    ) ? persisted.themeId : nextTenant.defaultThemeId;
+    setTenantId(nextTenant.id);
+    setThemeId(nextThemeId);
+    setHydrated(true);
+  }, []);
+  const effectiveThemeId = tenant.themes.some(
+    (th) => th.id === themeId
+  ) ? themeId : tenant.defaultThemeId;
+  const theme = tenant.themes.find((th) => th.id === effectiveThemeId) ?? tenant.themes[0];
+  useIsomorphicLayoutEffect(() => {
+    if (!theme) return;
+    applyThemeTokens(theme, config);
+    if (hydrated) {
+      saveState({ tenantId, themeId: effectiveThemeId });
+    }
+  }, [tenantId, effectiveThemeId, theme, config, hydrated]);
+  const value = useMemo(() => {
+    return {
+      tenant,
+      theme,
+      tenants,
+      setTenant: (nextTenantId) => {
+        const nextTenant = tenants.find(
+          (t) => t.id === nextTenantId
+        );
+        if (!nextTenant) return;
+        setTenantId(nextTenantId);
+        setThemeId(nextTenant.defaultThemeId);
+      },
+      setTheme: (nextThemeId) => setThemeId(nextThemeId)
+    };
+  }, [tenant, theme, tenants]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useThemeEngine() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      "useThemeEngine must be used within ThemeProvider"
+    );
+  }
+  return ctx;
+}
+export {
+  ThemeProvider,
+  applyThemeTokens,
+  useThemeEngine
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/engine.ts","../src/react.tsx"],"sourcesContent":["import type { ThemeDefinition, ThemeEngineConfig } from \"./types\";\n\nconst normalizeVar = (key: string, prefix?: string) => {\n  const raw = key.startsWith(\"--\") ? key.slice(2) : key;\n  const withPrefix = prefix ? `${prefix}-${raw}` : raw;\n  return `--${withPrefix}`;\n};\n\nexport const applyThemeTokens = (\n  theme: ThemeDefinition,\n  config: ThemeEngineConfig = {}\n) => {\n  const scope = config.scope ?? \":root\";\n  const el = document.querySelector(scope) as HTMLElement | null;\n  if (!el) return;\n\n  const { prefix } = config;\n\n  Object.entries(theme.tokens).forEach(([k, v]) => {\n    el.style.setProperty(normalizeVar(k, prefix), String(v));\n  });\n\n  el.setAttribute(\"data-theme\", theme.id);\n};","import React, {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  useEffect,\n  useLayoutEffect,\n} from \"react\";\nimport type {\n  TenantDefinition,\n  ThemeDefinition,\n  ThemeEngineConfig,\n} from \"./types\";\nimport { applyThemeTokens } from \"./engine\";\n\nconst STORAGE_KEY = \"react-tenant-theme\";\n\ntype PersistedState = {\n  tenantId: string;\n  themeId: string;\n};\n\nfunction loadState(): PersistedState | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n    if (!raw) return null;\n    const parsed = JSON.parse(raw) as PersistedState;\n    if (\n      typeof parsed?.tenantId !== \"string\" ||\n      typeof parsed?.themeId !== \"string\"\n    ) {\n      return null;\n    }\n    return parsed;\n  } catch {\n    return null;\n  }\n}\n\nfunction saveState(state: PersistedState) {\n  if (typeof window === \"undefined\") return;\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));\n  } catch {\n    // ignore storage errors\n  }\n}\n\n// Prevent SSR warnings\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\ntype ThemeContextValue = {\n  tenant: TenantDefinition;\n  theme: ThemeDefinition;\n  setTheme: (themeId: string) => void;\n  setTenant: (tenantId: string) => void;\n  tenants: TenantDefinition[];\n};\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n  tenants: TenantDefinition[];\n  initialTenantId: string;\n  config?: ThemeEngineConfig;\n  children: React.ReactNode;\n};\n\nexport function ThemeProvider({\n  tenants,\n  initialTenantId,\n  config,\n  children,\n}: ThemeProviderProps) {\n  const initialTenant =\n    tenants.find((t) => t.id === initialTenantId) ?? tenants[0];\n\n  if (!initialTenant) {\n    throw new Error(\"ThemeProvider requires at least one tenant\");\n  }\n\n  // Default state\n  const [tenantId, setTenantId] = useState(initialTenant.id);\n  const tenant =\n    tenants.find((t) => t.id === tenantId) ?? initialTenant;\n\n  const [themeId, setThemeId] = useState(tenant.defaultThemeId);\n  const [hydrated, setHydrated] = useState(false);\n\n  // Hydrate BEFORE first paint (no flash)\n  useIsomorphicLayoutEffect(() => {\n    const persisted = loadState();\n    if (!persisted) {\n      setHydrated(true);\n      return;\n    }\n\n    const nextTenant =\n      tenants.find((t) => t.id === persisted.tenantId) ?? initialTenant;\n\n    const nextThemeId = nextTenant.themes.some(\n      (th) => th.id === persisted.themeId\n    )\n      ? persisted.themeId\n      : nextTenant.defaultThemeId;\n\n    setTenantId(nextTenant.id);\n    setThemeId(nextThemeId);\n    setHydrated(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Ensure valid theme for selected tenant\n  const effectiveThemeId = tenant.themes.some(\n    (th) => th.id === themeId\n  )\n    ? themeId\n    : tenant.defaultThemeId;\n\n  const theme =\n    tenant.themes.find((th) => th.id === effectiveThemeId) ??\n    tenant.themes[0];\n\n  // Apply tokens before paint (no flicker)\n  useIsomorphicLayoutEffect(() => {\n    if (!theme) return;\n\n    applyThemeTokens(theme, config);\n\n    if (hydrated) {\n      saveState({ tenantId, themeId: effectiveThemeId });\n    }\n  }, [tenantId, effectiveThemeId, theme, config, hydrated]);\n\n  const value = useMemo<ThemeContextValue>(() => {\n    return {\n      tenant,\n      theme: theme!,\n      tenants,\n      setTenant: (nextTenantId: string) => {\n        const nextTenant = tenants.find(\n          (t) => t.id === nextTenantId\n        );\n        if (!nextTenant) return;\n        setTenantId(nextTenantId);\n        setThemeId(nextTenant.defaultThemeId);\n      },\n      setTheme: (nextThemeId: string) =>\n        setThemeId(nextThemeId),\n    };\n  }, [tenant, theme, tenants]);\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useThemeEngine() {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error(\n      \"useThemeEngine must be used within ThemeProvider\"\n    );\n  }\n  return ctx;\n}"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-tenant-theme",
+  "version": "0.1.0",
+  "private": false,
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT"
+}