@maz-ui/themes 4.0.0 → 4.1.0

package/dist/composables/index.js

@@ -1,10 +1,10 @@
+import { initThemeState as T, useTheme as a } from "./useTheme.js";
 import "vue";
 import "../utils/cookie-storage.js";
 import "../utils/css-generator.js";
 import "../utils/get-color-mode.js";
 import "../utils/get-preset.js";
 import "../utils/preset-merger.js";
-import { initThemeState as T, useTheme as a } from "./useTheme.js";
 export {
   T as initThemeState,
   a as useTheme

package/dist/composables/useTheme.js

@@ -1,20 +1,60 @@
-import { ref as g, computed as a, watchEffect as p, inject as v, getCurrentInstance as c, watch as k } from "vue";
-import { setCookie as y } from "../utils/cookie-storage.js";
-import { generateCriticalCSS as S, generateFullCSS as M, injectCSS as s, CSS_IDS as u } from "../utils/css-generator.js";
-import { getColorMode as P, isSystemPrefersDark as h } from "../utils/get-color-mode.js";
-import { getPreset as C } from "../utils/get-preset.js";
-import { mergePresets as T } from "../utils/preset-merger.js";
-const r = g();
-function d(e) {
+import { ref as d, onMounted as k, computed as s, toValue as P, watch as y, watchEffect as w, inject as T, getCurrentInstance as S } from "vue";
+import { setCookie as C } from "../utils/cookie-storage.js";
+import { generateCriticalCSS as z, generateFullCSS as E, injectCSS as p, CSS_IDS as v } from "../utils/css-generator.js";
+import { getColorMode as L, isSystemPrefersDark as x } from "../utils/get-color-mode.js";
+import { getPreset as D } from "../utils/get-preset.js";
+import { mergePresets as I } from "../utils/preset-merger.js";
+function O() {
+  return typeof document > "u" || typeof globalThis.window > "u";
+}
+function $() {
+  return typeof document < "u";
+}
+function F(e) {
+  return !!e;
+}
+function R(e, o, r = {}) {
+  const {
+    internalWindow: u = $() ? globalThis : void 0,
+    ...l
+  } = r;
+  let n;
+  const c = d(!1);
+  k(() => {
+    c.value = (u && "MutationObserver" in u) ?? !1;
+  });
+  const m = () => {
+    n && (n.disconnect(), n = void 0);
+  }, h = s(() => {
+    const a = P(e);
+    let i;
+    return a && "$el" in a ? i = a.$el : a && (i = a), new Set([i].filter(F));
+  }), b = y(
+    h,
+    (a) => {
+      m(), c.value && a.size && (n = new MutationObserver(o), a.forEach((i) => n.observe(i, l)));
+    },
+    { immediate: !0, flush: "post" }
+  );
+  return {
+    isSupported: c,
+    stop: () => {
+      b(), m();
+    },
+    takeRecords: () => n?.takeRecords()
+  };
+}
+const t = d();
+function M(e) {
   typeof document > "u" || !e || e.darkModeStrategy === "media" || e.mode === "light" || (e.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
 }
-function w() {
-  const e = c()?.appContext.app;
-  e && r.value && (e.config.globalProperties.$mazThemeState = r.value);
+function U() {
+  const e = S()?.appContext.app;
+  e && t.value && (e.config.globalProperties.$mazThemeState = t.value);
 }
-function b(e) {
+function j(e) {
   if (e.currentPreset && e.colorMode !== void 0) {
-    l({
+    g({
       currentPreset: e.currentPreset,
       colorMode: e.colorMode,
       mode: e.mode,
@@ -24,81 +64,98 @@ function b(e) {
     });
     return;
   }
-  const t = P(e.colorMode), o = t === "auto" ? h() : t === "dark";
-  l({
+  const o = L(e.colorMode), r = o === "auto" ? x() : o === "dark";
+  g({
     currentPreset: e.currentPreset,
-    colorMode: t,
+    colorMode: o,
     mode: e.mode,
-    isDark: o,
+    isDark: r,
     strategy: e.strategy,
     darkModeStrategy: e.darkModeStrategy
   });
 }
-function l(e) {
-  if (r.value = e, typeof globalThis.window < "u" && r.value.colorMode === "auto") {
-    const t = globalThis.matchMedia("(prefers-color-scheme: dark)"), o = () => {
-      r.value && r.value.colorMode === "auto" && (r.value.isDark = t.matches);
+function g(e) {
+  if (t.value = e, typeof globalThis.window < "u" && t.value.colorMode === "auto") {
+    const o = globalThis.matchMedia("(prefers-color-scheme: dark)"), r = () => {
+      t.value && t.value.colorMode === "auto" && (t.value.isDark = o.matches);
     };
-    t.addEventListener("change", o), o();
+    o.addEventListener("change", r), r();
   }
-  p(() => {
-    r.value && (d(r.value), w());
+  w(() => {
+    t.value && (M(t.value), U());
   });
 }
-const z = a({
-  get: () => r.value?.colorMode,
-  set: (e) => n(e)
-}), E = a(() => r.value?.isDark ?? !1), L = a(() => r.value?.strategy), x = a(() => r.value?.mode), D = a(() => r.value?.darkModeStrategy), F = a(() => r.value?.currentPreset.name);
-async function I(e) {
-  if (!r.value)
+const N = s({
+  get: () => t.value?.colorMode,
+  set: (e) => f(e)
+}), W = s(() => t.value?.isDark ?? !1), _ = s(() => t.value?.strategy), A = s(() => t.value?.mode), G = s(() => t.value?.darkModeStrategy), Q = s(() => t.value?.currentPreset?.name);
+async function V(e) {
+  if (!t.value)
+    return;
+  const o = typeof e == "string" ? await D(e) : e;
+  if (!o || !t.value.currentPreset) {
+    console.error("[@maz-ui/themes] No preset found - If you are using the buildtime strategy, you must provide a complete preset");
     return;
-  const t = typeof e == "string" ? await C(e) : e, o = "name" in t && t.name !== r.value.currentPreset.name ? t : T(r.value.currentPreset, t);
-  if (r.value.currentPreset = o, r.value.strategy === "runtime" || r.value.strategy === "hybrid") {
-    const i = {
-      mode: r.value.mode,
-      darkSelectorStrategy: r.value.darkModeStrategy,
+  }
+  const r = "name" in o && o.name !== t.value.currentPreset.name ? o : I(t.value.currentPreset, o);
+  if (t.value.currentPreset = r, t.value.strategy === "runtime" || t.value.strategy === "hybrid") {
+    const u = {
+      mode: t.value.mode,
+      darkSelectorStrategy: t.value.darkModeStrategy,
       prefix: "maz"
-    }, f = S(o, i), m = M(o, i);
-    s(u.CRITICAL, f), s(u.FULL, m);
+    }, l = z(r, u), n = E(r, u);
+    p(v.CRITICAL, l), p(v.FULL, n);
   }
 }
-function n(e) {
-  r.value && (r.value.colorMode = e, e === "auto" ? r.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : r.value.isDark = e === "dark", d(r.value), y("maz-color-mode", e));
+function f(e) {
+  t.value && (t.value.colorMode = e, e === "auto" ? t.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : t.value.isDark = e === "dark", M(t.value), C("maz-color-mode", e));
 }
-function U() {
-  r.value && n(r.value.isDark ? "light" : "dark");
+function Y() {
+  t.value && f(t.value.isDark ? "light" : "dark");
 }
-function O() {
-  let e;
+function te() {
+  const e = d();
+  k(() => {
+    e.value = document.documentElement;
+  }), R(
+    e,
+    () => {
+      !t.value || O() || (t.value.isDark = document.documentElement.classList.contains("dark"));
+    },
+    {
+      attributes: !0
+    }
+  );
+  let o;
   try {
-    if (e = v("mazThemeState", void 0), !e)
+    if (o = T("mazThemeState", void 0), !o)
       throw new Error("mazThemeState not found");
   } catch {
-    const t = c();
-    t?.appContext?.app?.config?.globalProperties && (e = t.appContext.app.config.globalProperties.$mazThemeState);
+    const r = S();
+    r?.appContext?.app?.config?.globalProperties && (o = r.appContext.app.config.globalProperties.$mazThemeState);
   }
-  if (e && (r.value ? (typeof document > "u" || typeof globalThis.window > "u") && (r.value = {
-    ...r.value,
-    ...e
-  }) : b(e)), k(() => e?.currentPreset, (t) => {
-    r.value && t && (r.value.currentPreset = t);
+  if (o && (t.value ? (typeof document > "u" || typeof globalThis.window > "u") && (t.value = {
+    ...t.value,
+    ...o
+  }) : j(o)), y(() => o?.currentPreset, (r) => {
+    t.value && r && (t.value.currentPreset = r);
   }, {
     once: !0
-  }), !r.value)
+  }), !t.value)
     throw new Error("[@maz-ui/themes] You must install the MazUi or MazUiTheme plugin before using useTheme composable");
   return {
-    presetName: F,
-    colorMode: z,
-    isDark: E,
-    strategy: L,
-    updateTheme: I,
-    setColorMode: n,
-    toggleDarkMode: U,
-    mode: x,
-    darkModeStrategy: D
+    presetName: Q,
+    colorMode: N,
+    isDark: W,
+    strategy: _,
+    updateTheme: V,
+    setColorMode: f,
+    toggleDarkMode: Y,
+    mode: A,
+    darkModeStrategy: G
   };
 }
 export {
-  l as initThemeState,
-  O as useTheme
+  g as initThemeState,
+  te as useTheme
 };

package/dist/plugin.js

@@ -1,5 +1,5 @@
 import { reactive as n } from "vue";
-import { generateCriticalCSS as l, injectCSS as d, CSS_IDS as i, generateFullCSS as S } from "./utils/css-generator.js";
+import { generateCriticalCSS as l, injectCSS as s, CSS_IDS as c, generateFullCSS as S } from "./utils/css-generator.js";
 import { getColorMode as u, isSystemPrefersDark as f } from "./utils/get-color-mode.js";
 import { getPreset as y } from "./utils/get-preset.js";
 import { mergePresets as C } from "./utils/preset-merger.js";
@@ -15,19 +15,19 @@ function k(r, t) {
   };
   if (t.injectCriticalCSS) {
     const a = l(r, e);
-    d(i.CRITICAL, a);
+    s(c.CRITICAL, a);
   }
   if (!t.injectFullCSS)
     return;
   const o = S(r, e);
-  t.strategy === "runtime" ? d(i.FULL, o) : t.strategy === "hybrid" && requestIdleCallback(() => {
-    d(i.FULL, o);
+  t.strategy === "runtime" ? s(c.FULL, o) : t.strategy === "hybrid" && requestIdleCallback(() => {
+    s(c.FULL, o);
   }, { timeout: 100 });
 }
 function M(r, t) {
   r.provide("mazThemeState", t), r.config.globalProperties.$mazThemeState = t;
 }
-const v = {
+const L = {
   async install(r, t) {
     const e = {
       strategy: "runtime",
@@ -38,20 +38,19 @@ const v = {
       injectFullCSS: !0,
       mode: "both",
       ...t
-    }, o = e.mode !== "both" ? e.mode : u(e.colorMode), a = o === "auto" && e.mode === "both" ? f() : o === "dark" || e.mode === "dark", s = n({
-      // @ts-expect-error - empty currentPreset to avoid error
-      currentPreset: {},
+    }, o = e.mode !== "both" ? e.mode : u(e.colorMode), a = o === "auto" && e.mode === "both" ? f() : o === "dark" || e.mode === "dark", m = n({
+      currentPreset: void 0,
       mode: e.mode,
       colorMode: o,
       isDark: a,
       strategy: e.strategy,
       darkModeStrategy: e.darkModeStrategy
     });
-    g(e.darkModeStrategy, a), M(r, s);
-    const c = await y(e.preset), m = Object.keys(e.overrides).length > 0 ? C(c, e.overrides) : c;
-    s.currentPreset = m, e.strategy !== "buildtime" && k(m, e);
+    g(e.darkModeStrategy, a), M(r, m);
+    const i = e.strategy === "buildtime" ? e.preset : await y(e.preset), d = Object.keys(e.overrides).length > 0 && i ? C(i, e.overrides) : i;
+    d && (m.currentPreset = d), !(e.strategy === "buildtime" || !d) && k(d, e);
   }
 };
 export {
-  v as MazUiTheme
+  L as MazUiTheme
 };

package/dist/presets/mazUi.js

@@ -20,7 +20,7 @@ const r = {
       "success-foreground": "210 8% 14%",
       warning: "40 97% 59%",
       "warning-foreground": "210 8% 14%",
-      destructive: "1 100% 71%",
+      destructive: "356.95 95.91% 57.73%",
       "destructive-foreground": "0 0% 100%",
       info: "188 78% 41%",
       "info-foreground": "0 0% 100%",

package/dist/types/composables/useTheme.d.ts

@@ -4,7 +4,7 @@ declare function updateTheme(preset: ThemePreset | ThemePresetOverrides | ThemeP
 declare function setColorMode(colorMode: ColorMode): void;
 declare function toggleDarkMode(): void;
 export declare function useTheme(): {
-    presetName: import('vue').ComputedRef<string>;
+    presetName: import('vue').ComputedRef<string | undefined>;
     colorMode: import('vue').WritableComputedRef<ColorMode, ColorMode>;
     isDark: import('vue').ComputedRef<boolean>;
     strategy: import('vue').ComputedRef<Strategy>;

package/dist/types/composables/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA2DhJ,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;AAaD,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBAyBtF;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,SAAS,QAgBzC;AAED,iBAAS,cAAc,SAKtB;AAED,wBAAgB,QAAQ;;;;;;;;;;EAoDvB"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA8DhJ,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;AAaD,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBA8BtF;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,SAAS,QAgBzC;AAED,iBAAS,cAAc,SAKtB;AAED,wBAAgB,QAAQ;;;;;;;;;;EAsEvB"}

package/dist/types/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAO,MAAM,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,KAAK,EAAoB,WAAW,EAAe,UAAU,EAAE,MAAM,SAAS,CAAA;AAarF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IACpE;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAiDD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,CAAC,iBAAiB,CAAC,CA+ClD,CAAA;AAED,OAAO,QAAQ,KAAK,CAAC;IACnB,UAAU,yBAAyB;QACjC;;;;;;;;;;;;;;WAcG;QACH,cAAc,EAAE,UAAU,CAAA;KAC3B;CACF"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAO,MAAM,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,KAAK,EAAoB,WAAW,EAAe,UAAU,EAAE,MAAM,SAAS,CAAA;AAarF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IACpE;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAiDD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,CAAC,iBAAiB,CAAC,CAgDlD,CAAA;AAED,OAAO,QAAQ,KAAK,CAAC;IACnB,UAAU,yBAAyB;QACjC;;;;;;;;;;;;;;WAcG;QACH,cAAc,EAAE,UAAU,CAAA;KAC3B;CACF"}

package/dist/types/types/index.d.ts

@@ -75,11 +75,11 @@ export interface ThemeConfig {
      */
     prefix?: string;
     /**
-     * Theme preset to use
+     * Theme preset to use - Optional if you use buildtime strategy
      * @description Can be a predefined preset name or a custom preset object
-     * @default mazUi preset
+     * @default undefined
      */
-    preset: ThemePreset;
+    preset?: ThemePreset;
     /**
      * Custom preset overrides
      * @description Allows customizing specific parts of the preset without redefining it entirely
@@ -136,7 +136,7 @@ export interface ColorScale {
     950: string;
 }
 export interface ThemeState {
-    currentPreset: ThemePreset;
+    currentPreset?: ThemePreset;
     colorMode: ColorMode;
     mode: ThemeMode;
     isDark: boolean;

package/dist/types/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/dist/types/utils/css-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../../src/utils/css-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGtG,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,cAAc,CAAC,EAAE,CAAC,MAAM,WAAW,CAAC,EAAE,CAAA;IACtC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,CAAC,MAAM,eAAe,CAAC,EAAE,CAAA;IAC9C,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,6DAA6D;IAC7D,oBAAoB,EAAE,gBAAgB,CAAA;IACtC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,2DAA2D;IAC3D,eAAe,CAAC,EAAE,CAAC,MAAM,WAAW,GAAG,MAAM,eAAe,CAAC,EAAE,CAAA;IAC/D,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,6DAA6D;IAC7D,oBAAoB,EAAE,gBAAgB,CAAA;IACtC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAmCD,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,kBAGR,GACA,MAAM,CAwCR;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,cAGR,GACA,MAAM,CA4CR;AAoHD,oBAAY,OAAO;IACjB,IAAI,mBAAmB;IACvB,QAAQ,uBAAuB;CAChC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAaxD;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAQ3C"}
+{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../../src/utils/css-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGtG,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,cAAc,CAAC,EAAE,CAAC,MAAM,WAAW,CAAC,EAAE,CAAA;IACtC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,CAAC,MAAM,eAAe,CAAC,EAAE,CAAA;IAC9C,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,6DAA6D;IAC7D,oBAAoB,EAAE,gBAAgB,CAAA;IACtC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,2DAA2D;IAC3D,eAAe,CAAC,EAAE,CAAC,MAAM,WAAW,GAAG,MAAM,eAAe,CAAC,EAAE,CAAA;IAC/D,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,6DAA6D;IAC7D,oBAAoB,EAAE,gBAAgB,CAAA;IACtC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAmCD,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,kBAGR,GACA,MAAM,CAwCR;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,cAGR,GACA,MAAM,CA4CR;AAoHD,oBAAY,OAAO;IACjB,IAAI,mBAAmB;IACvB,QAAQ,uBAAuB;CAChC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CA2BxD;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAS3C"}

package/dist/utils/css-generator.js

@@ -27,164 +27,178 @@ const h = [
   "base-font-size",
   "border-width"
 ], S = ["primary", "secondary", "accent", "destructive", "success", "warning", "info", "contrast", "background", "foreground", "border", "muted", "overlay", "shadow"];
-function j(e, o = {
+function j(r, t = {
   mode: "both",
   darkSelectorStrategy: "class"
 }) {
   const {
-    criticalColors: r = h,
-    criticalFoundation: c = C,
-    mode: t,
-    darkSelectorStrategy: s,
+    criticalColors: e = h,
+    criticalFoundation: o = C,
+    mode: n,
+    darkSelectorStrategy: l,
     prefix: i = "maz"
-  } = o, l = y(e.foundation, c);
-  let n = `@layer maz-ui-theme {
+  } = t, s = y(r.foundation, o);
+  let c = `@layer maz-ui-theme {
 `;
-  if (t === "light" || t === "both") {
-    const a = m(e.colors.light, r);
-    n += f({
+  if (n === "light" || n === "both") {
+    const a = m(r.colors.light, e);
+    c += f({
       selector: ":root",
       colors: a,
-      foundation: l,
+      foundation: s,
       prefix: i
     });
   }
-  if (t === "dark" || t === "both") {
-    const a = m(e.colors.dark, r);
-    n += f({
-      selector: s === "media" ? ":root" : ".dark",
-      mediaQuery: s === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
+  if (n === "dark" || n === "both") {
+    const a = m(r.colors.dark, e);
+    c += f({
+      selector: l === "media" ? ":root" : ".dark",
+      mediaQuery: l === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
       colors: a,
-      foundation: l,
+      foundation: s,
       prefix: i
     });
   }
-  return n += `}
-`, n;
+  return c += `}
+`, c;
 }
-function p(e, o = {
+function p(r, t = {
   mode: "both",
   darkSelectorStrategy: "class"
 }) {
   const {
-    excludeCritical: r = h,
-    mode: c,
-    darkSelectorStrategy: t,
-    prefix: s = "maz",
+    excludeCritical: e = h,
+    mode: o,
+    darkSelectorStrategy: n,
+    prefix: l = "maz",
     includeColorScales: i = !0
-  } = o, l = k(e.foundation, C);
-  let n = `@layer maz-ui-theme {
+  } = t, s = k(r.foundation, C);
+  let c = `@layer maz-ui-theme {
 `;
-  if (c === "light" || c === "both") {
-    const a = g(e.colors.light, r);
-    n += f({
+  if (o === "light" || o === "both") {
+    const a = g(r.colors.light, e);
+    c += f({
       selector: ":root",
       colors: a,
-      foundation: l,
-      prefix: s,
+      foundation: s,
+      prefix: l,
       includeScales: i,
-      preset: e
+      preset: r
     });
   }
-  if (c === "dark" || c === "both") {
-    const a = g(e.colors.dark, r);
-    n += f({
-      selector: t === "media" ? ":root" : ".dark",
-      mediaQuery: t === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
+  if (o === "dark" || o === "both") {
+    const a = g(r.colors.dark, e);
+    c += f({
+      selector: n === "media" ? ":root" : ".dark",
+      mediaQuery: n === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
       colors: a,
-      foundation: c === "dark" ? l : void 0,
+      foundation: o === "dark" ? s : void 0,
       // Appearance only if dark mode only
-      prefix: s,
+      prefix: l,
       includeScales: i,
-      preset: e,
+      preset: r,
       isDark: !0
     });
   }
-  return n += `}
-`, n;
+  return c += `}
+`, c;
 }
-function m(e, o) {
+function m(r, t) {
   return Object.fromEntries(
-    o.filter((r) => e[r]).map((r) => [r, e[r]])
+    t.filter((e) => r[e]).map((e) => [e, r[e]])
   );
 }
-function y(e, o) {
-  return e ? Object.fromEntries(
-    o.filter((r) => e[r]).map((r) => [r, e[r]])
+function y(r, t) {
+  return r ? Object.fromEntries(
+    t.filter((e) => r[e]).map((e) => [e, r[e]])
   ) : {};
 }
-function g(e, o) {
+function g(r, t) {
   return Object.fromEntries(
-    Object.entries(e).filter(([r]) => !o.includes(r))
+    Object.entries(r).filter(([e]) => !t.includes(e))
   );
 }
-function k(e, o) {
-  return e ? Object.fromEntries(
-    Object.entries(e).filter(([r]) => !o.includes(r))
+function k(r, t) {
+  return r ? Object.fromEntries(
+    Object.entries(r).filter(([e]) => !t.includes(e))
   ) : {};
 }
 function f({
-  selector: e,
-  mediaQuery: o,
-  colors: r,
-  foundation: c,
-  prefix: t,
-  includeScales: s = !1,
+  selector: r,
+  mediaQuery: t,
+  colors: e,
+  foundation: o,
+  prefix: n,
+  includeScales: l = !1,
   preset: i,
-  isDark: l = !1
+  isDark: s = !1
 }) {
-  const n = [];
-  if (r && Object.entries(r).forEach(([u, d]) => {
-    d && n.push(`  --${t}-${u}: ${d};`);
-  }), c && Object.entries(c).forEach(([u, d]) => {
-    d && n.push(`  --${t}-${u}: ${d};`);
-  }), s && i) {
-    const u = l ? i.colors.dark : i.colors.light, d = E(u, t);
-    n.push(...d);
+  const c = [];
+  if (e && Object.entries(e).forEach(([u, d]) => {
+    d && c.push(`  --${n}-${u}: ${d};`);
+  }), o && Object.entries(o).forEach(([u, d]) => {
+    d && c.push(`  --${n}-${u}: ${d};`);
+  }), l && i) {
+    const u = s ? i.colors.dark : i.colors.light, d = $(u, n);
+    c.push(...d);
   }
-  const a = n.join(`
+  const a = c.join(`
 `);
-  return o ? `
-  ${o} {
-    ${e} {
+  return t ? `
+  ${t} {
+    ${r} {
 ${a.replace(/^/gm, "  ")}
     }
   }
 ` : `
-  ${e} {
+  ${r} {
 ${a}
   }
 `;
 }
-function E(e, o) {
-  const r = [];
-  return S.forEach((c) => {
-    const t = e[c];
-    if (t) {
-      const s = b(t);
-      Object.entries(s).forEach(([i, l]) => {
-        r.push(`  --${o}-${c}-${i}: ${l};`);
+function $(r, t) {
+  const e = [];
+  return S.forEach((o) => {
+    const n = r[o];
+    if (n) {
+      const l = b(n);
+      Object.entries(l).forEach(([i, s]) => {
+        e.push(`  --${t}-${o}-${i}: ${s};`);
       });
     }
-  }), r;
+  }), e;
 }
-var $ = /* @__PURE__ */ ((e) => (e.FULL = "maz-theme-full", e.CRITICAL = "maz-theme-critical", e))($ || {});
-function v(e, o) {
+var E = /* @__PURE__ */ ((r) => (r.FULL = "maz-theme-full", r.CRITICAL = "maz-theme-critical", r))(E || {});
+function v(r, t) {
   if (typeof document > "u")
     return;
-  let r = document.getElementById(e);
-  r || (r = document.createElement("style"), r.id = e, document.head.appendChild(r)), r.textContent = o;
+  const e = document.querySelectorAll(`#${r}`);
+  if (!e || e.length === 0) {
+    const o = document.createElement("style");
+    o.id = r, document.head.appendChild(o), o.textContent = t;
+    return;
+  }
+  if (e.length === 1) {
+    e[0].textContent = t;
+    return;
+  }
+  if (e.length > 1) {
+    for (let o = 0; o < e.length - 1; o++)
+      e[o].remove();
+    e[e.length - 1].textContent = t;
+  }
 }
-function F(e) {
+function x(r) {
   if (typeof document > "u")
     return;
-  const o = document.getElementById(e);
-  o && o.remove();
+  const t = document.querySelectorAll(`#${r}`);
+  for (const e of t)
+    e && e.remove();
 }
 export {
-  $ as CSS_IDS,
+  E as CSS_IDS,
   j as generateCriticalCSS,
   p as generateFullCSS,
   v as injectCSS,
-  F as removeCSS
+  x as removeCSS
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/themes",
   "type": "module",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Theme system for Maz-UI with TypeScript support and CSS variables",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -102,5 +102,5 @@
   "lint-staged": {
     "*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "b2e03a043ad3334ed5ce456c7f0e67c728c09524"
+  "gitHead": "2f2ef4e0c3db8e64b814aa3c7c5a409e06af48af"
 }