hey-pharmacist-ecommerce 1.1.39 → 1.1.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +37 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +38 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/providers/ThemeProvider.tsx +48 -20
- package/src/styles/globals.css +43 -44
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React10, { createContext, forwardRef, useContext, useEffect, useState, useCallback, useRef, useMemo } from 'react';
|
|
2
|
+
import React10, { createContext, forwardRef, useContext, useLayoutEffect, useEffect, useState, useCallback, useRef, useMemo } from 'react';
|
|
3
3
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import globalAxios21 from 'axios';
|
|
5
5
|
import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion';
|
|
@@ -226,29 +226,55 @@ function useTheme() {
|
|
|
226
226
|
}
|
|
227
227
|
return context;
|
|
228
228
|
}
|
|
229
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
229
230
|
function ThemeProvider({ config, children }) {
|
|
230
|
-
|
|
231
|
+
const cssVariables = React10.useMemo(() => {
|
|
231
232
|
const primaryShades = generateColorShades(config.colors.primary);
|
|
232
233
|
const secondaryShades = generateColorShades(config.colors.secondary);
|
|
233
234
|
const accentShades = generateColorShades(config.colors.accent);
|
|
235
|
+
const vars = [];
|
|
236
|
+
vars.push(`--hp-primary: ${config.colors.primary}`);
|
|
237
|
+
vars.push(`--hp-primary-dark: ${config.colors.primaryDark}`);
|
|
238
|
+
vars.push(`--hp-secondary: ${config.colors.secondary}`);
|
|
239
|
+
vars.push(`--hp-accent: ${config.colors.accent}`);
|
|
240
|
+
vars.push(`--hp-accent-dark: ${config.colors.accentDark}`);
|
|
241
|
+
vars.push(`--hp-text-muted: ${config.colors.textMuted}`);
|
|
242
|
+
Object.entries(primaryShades).forEach(([shade, rgb]) => {
|
|
243
|
+
vars.push(`--hp-primary-${shade}: ${rgb}`);
|
|
244
|
+
});
|
|
245
|
+
Object.entries(secondaryShades).forEach(([shade, rgb]) => {
|
|
246
|
+
vars.push(`--hp-secondary-${shade}: ${rgb}`);
|
|
247
|
+
});
|
|
248
|
+
Object.entries(accentShades).forEach(([shade, rgb]) => {
|
|
249
|
+
vars.push(`--hp-accent-${shade}: ${rgb}`);
|
|
250
|
+
});
|
|
251
|
+
return vars.join("; ");
|
|
252
|
+
}, [config.colors]);
|
|
253
|
+
useIsomorphicLayoutEffect(() => {
|
|
234
254
|
const root = document.documentElement;
|
|
255
|
+
const primaryShades = generateColorShades(config.colors.primary);
|
|
256
|
+
const secondaryShades = generateColorShades(config.colors.secondary);
|
|
257
|
+
const accentShades = generateColorShades(config.colors.accent);
|
|
258
|
+
root.style.setProperty("--hp-primary", config.colors.primary);
|
|
259
|
+
root.style.setProperty("--hp-primary-dark", config.colors.primaryDark);
|
|
260
|
+
root.style.setProperty("--hp-secondary", config.colors.secondary);
|
|
261
|
+
root.style.setProperty("--hp-accent", config.colors.accent);
|
|
262
|
+
root.style.setProperty("--hp-accent-dark", config.colors.accentDark);
|
|
263
|
+
root.style.setProperty("--hp-text-muted", config.colors.textMuted);
|
|
235
264
|
Object.entries(primaryShades).forEach(([shade, rgb]) => {
|
|
236
|
-
root.style.setProperty(`--
|
|
265
|
+
root.style.setProperty(`--hp-primary-${shade}`, rgb);
|
|
237
266
|
});
|
|
238
267
|
Object.entries(secondaryShades).forEach(([shade, rgb]) => {
|
|
239
|
-
root.style.setProperty(`--
|
|
268
|
+
root.style.setProperty(`--hp-secondary-${shade}`, rgb);
|
|
240
269
|
});
|
|
241
270
|
Object.entries(accentShades).forEach(([shade, rgb]) => {
|
|
242
|
-
root.style.setProperty(`--
|
|
271
|
+
root.style.setProperty(`--hp-accent-${shade}`, rgb);
|
|
243
272
|
});
|
|
244
|
-
root.style.setProperty("--color-primary", config.colors.primary);
|
|
245
|
-
root.style.setProperty("--color-primary-dark", config.colors.primaryDark);
|
|
246
|
-
root.style.setProperty("--color-secondary", config.colors.secondary);
|
|
247
|
-
root.style.setProperty("--color-accent", config.colors.accent);
|
|
248
|
-
root.style.setProperty("--color-accent-dark", config.colors.accentDark);
|
|
249
|
-
root.style.setProperty("--color-text-muted", config.colors.textMuted);
|
|
250
273
|
}, [config]);
|
|
251
|
-
return /* @__PURE__ */
|
|
274
|
+
return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value: { config }, children: [
|
|
275
|
+
/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `:root { ${cssVariables} }` } }),
|
|
276
|
+
children
|
|
277
|
+
] });
|
|
252
278
|
}
|
|
253
279
|
|
|
254
280
|
// src/providers/AuthProvider.tsx
|