hey-pharmacist-ecommerce 1.1.39 → 1.1.40

package/dist/index.mjs

@@ -1,5 +1,5 @@
 "use client";
-import React10, { createContext, forwardRef, useContext, useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import React10, { createContext, forwardRef, useContext, useLayoutEffect, useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import globalAxios21 from 'axios';
 import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion';
@@ -226,29 +226,55 @@ function useTheme() {
   }
   return context;
 }
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function ThemeProvider({ config, children }) {
-  useEffect(() => {
+  const cssVariables = React10.useMemo(() => {
     const primaryShades = generateColorShades(config.colors.primary);
     const secondaryShades = generateColorShades(config.colors.secondary);
     const accentShades = generateColorShades(config.colors.accent);
-    const root = document.documentElement;
+    const vars = [];
+    vars.push(`--color-primary: ${config.colors.primary}`);
+    vars.push(`--color-primary-dark: ${config.colors.primaryDark}`);
+    vars.push(`--color-secondary: ${config.colors.secondary}`);
+    vars.push(`--color-accent: ${config.colors.accent}`);
+    vars.push(`--color-accent-dark: ${config.colors.accentDark}`);
+    vars.push(`--color-text-muted: ${config.colors.textMuted}`);
     Object.entries(primaryShades).forEach(([shade, rgb]) => {
-      root.style.setProperty(`--color-primary-${shade}`, rgb);
+      vars.push(`--color-primary-${shade}: ${rgb}`);
     });
     Object.entries(secondaryShades).forEach(([shade, rgb]) => {
-      root.style.setProperty(`--color-secondary-${shade}`, rgb);
+      vars.push(`--color-secondary-${shade}: ${rgb}`);
     });
     Object.entries(accentShades).forEach(([shade, rgb]) => {
-      root.style.setProperty(`--color-accent-${shade}`, rgb);
+      vars.push(`--color-accent-${shade}: ${rgb}`);
     });
+    return vars.join("; ");
+  }, [config.colors]);
+  useIsomorphicLayoutEffect(() => {
+    const root = document.documentElement;
+    const primaryShades = generateColorShades(config.colors.primary);
+    const secondaryShades = generateColorShades(config.colors.secondary);
+    const accentShades = generateColorShades(config.colors.accent);
     root.style.setProperty("--color-primary", config.colors.primary);
     root.style.setProperty("--color-primary-dark", config.colors.primaryDark);
     root.style.setProperty("--color-secondary", config.colors.secondary);
     root.style.setProperty("--color-accent", config.colors.accent);
     root.style.setProperty("--color-accent-dark", config.colors.accentDark);
     root.style.setProperty("--color-text-muted", config.colors.textMuted);
+    Object.entries(primaryShades).forEach(([shade, rgb]) => {
+      root.style.setProperty(`--color-primary-${shade}`, rgb);
+    });
+    Object.entries(secondaryShades).forEach(([shade, rgb]) => {
+      root.style.setProperty(`--color-secondary-${shade}`, rgb);
+    });
+    Object.entries(accentShades).forEach(([shade, rgb]) => {
+      root.style.setProperty(`--color-accent-${shade}`, rgb);
+    });
   }, [config]);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { config }, children });
+  return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value: { config }, children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `:root { ${cssVariables} }` } }),
+    children
+  ] });
 }
 
 // src/providers/AuthProvider.tsx