vlite3 1.4.30 → 1.4.32

package/components/Tabes/tabes.utils.js

@@ -0,0 +1,26 @@
+function t(e) {
+  return Array.isArray(e.menu) && e.menu.length > 0;
+}
+function f(e) {
+  return e.value !== void 0 && e.value !== null ? e.value : e.label;
+}
+function u(e, r) {
+  if (!e?.length) return !1;
+  for (const n of e)
+    if (f(n) === r || n.children?.length && u(n.children, r)) return !0;
+  return !1;
+}
+function i(e, r) {
+  return t(e) ? e.value === r || u(e.menu, r) : e.value === r;
+}
+function a(e, r) {
+  for (const n of e)
+    if (i(n, r)) return n.value;
+}
+export {
+  a as getActiveMarkerKey,
+  f as getMenuOptionValue,
+  t as isMenuTab,
+  i as isTabActive,
+  u as menuContainsValue
+};

package/components/Tabes/types.d.ts

@@ -1,3 +1,21 @@
+import { IDropdownOption } from '../../types';
+import { TooltTipPlacement } from 'v-tooltip-lite/types';
+/**
+ * Optional Dropdown configuration for a menu tab.
+ * Forwards a subset of the existing Dropdown API — no duplicated menu logic.
+ */
+export interface TabesDropdownConfig {
+    position?: TooltTipPlacement;
+    offset?: [number, number];
+    direction?: 'ltr' | 'rtl';
+    searchable?: boolean;
+    closeOnSelect?: boolean;
+    maxHeight?: string;
+    minWidth?: string;
+    width?: string;
+    menuId?: string;
+    teleport?: boolean;
+}
 export interface TabesOption {
     label: string;
     labelI18n?: string;
@@ -9,6 +27,20 @@ export interface TabesOption {
         [key: string]: any;
     };
     href?: string;
+    /**
+     * When provided, this tab becomes a dropdown menu trigger.
+     * Opening the menu does not change `v-model`. Selecting a menu item
+     * updates `v-model` to that item's value and emits `change` / `menu-select`.
+     * Reuses the existing `IDropdownOption` contract from Dropdown.
+     */
+    menu?: IDropdownOption[];
+    /** Optional Dropdown configuration for this menu tab */
+    dropdown?: TabesDropdownConfig;
 }
 export type TabesSize = 'sm' | 'md' | 'lg';
 export type TabesVariant = 'surface' | 'primary' | 'secondary' | 'danger' | 'success' | 'outline' | 'line';
+export type TabesMenuSelectPayload = {
+    value: any;
+    option?: IDropdownOption;
+    tab: TabesOption;
+};

package/components/ThemeProvider/ThemeProvider.vue.d.ts

@@ -14,8 +14,10 @@ declare const __VLS_component: import('vue').DefineComponent<ThemeProviderProps,
     borderRadius: number;
     bgColor: string;
     primaryColor: string;
+    surfaceColor: string;
     footerBgColor: string;
     baseFontSize: number;
+    scaleSpacingWithBaseFontSize: boolean;
     headingScale: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/components/ThemeProvider/ThemeProvider.vue.js

@@ -1,46 +1,52 @@
-import { defineComponent as m, computed as o, provide as u, openBlock as a, createElementBlock as v, normalizeClass as c, createBlock as f, resolveDynamicComponent as p, withCtx as h, createTextVNode as C, toDisplayString as b, renderSlot as g } from "vue";
-import { buildThemeVariables as S, buildThemeStyleBlock as y, buildCardOverrideStyles as T } from "./themeVars.js";
-import { THEME_STYLES_KEY as k } from "../../composables/useThemeStyles.js";
-import { isDarkColor as B } from "../../utils/colorUtils.js";
-const P = /* @__PURE__ */ m({
+import { defineComponent as m, useId as u, computed as o, provide as v, openBlock as d, createElementBlock as p, normalizeClass as C, unref as h, createBlock as S, resolveDynamicComponent as g, toDisplayString as y, renderSlot as b } from "vue";
+import { getCachedThemeVariables as B, buildThemeStyleBlock as k, buildCardOverrideStyles as T } from "./themeVars.js";
+import { THEME_STYLES_KEY as _ } from "../../composables/useThemeStyles.js";
+import { isDarkColor as E } from "../../utils/colorUtils.js";
+const x = ["data-vlite-theme-provider"], W = /* @__PURE__ */ m({
   __name: "ThemeProvider",
   props: {
     bgColor: { default: void 0 },
+    surfaceColor: { default: void 0 },
     primaryColor: { default: void 0 },
     footerBgColor: { default: void 0 },
     baseFontSize: { default: void 0 },
+    scaleSpacingWithBaseFontSize: { type: Boolean, default: !1 },
     headingScale: { default: void 0 },
     borderRadius: { default: void 0 },
     maxWidth: { default: void 0 },
     rootClass: { default: void 0 }
   },
   setup(t) {
-    const e = t, r = o(() => e.bgColor ? B(e.bgColor) : !1), l = o(() => S(e)), i = o(
-      () => y(l.value, ".vlite-theme-provider")
-    ), d = o(
-      () => e.bgColor ? T(e.bgColor, r.value, ".vlite-theme-provider") : ""
-    ), s = o(
-      () => [i.value, d.value].filter(Boolean).join(`
+    const e = t, r = u(), l = `[data-vlite-theme-provider="${r}"]`, a = o(() => e.bgColor ? E(e.bgColor) : !1), i = o(() => B(e)), s = o(
+      () => k(i.value, l)
+    ), n = o(
+      () => e.bgColor || e.surfaceColor ? T(
+        e.bgColor || "#ffffff",
+        a.value,
+        l,
+        e.surfaceColor,
+        e.primaryColor
+      ) : ""
+    ), c = o(
+      () => [s.value, n.value].filter(Boolean).join(`
 `)
     );
-    return u(k, l), (n, _) => (a(), v("div", {
-      class: c([
+    return v(_, i), (f, D) => (d(), p("div", {
+      "data-vlite-theme-provider": h(r),
+      class: C([
         "vlite-theme-provider",
         t.rootClass,
         "transition-colors duration-300",
-        { dark: r.value }
+        { dark: a.value }
       ])
     }, [
-      (a(), f(p("style"), null, {
-        default: h(() => [
-          C(b(s.value), 1)
-        ]),
-        _: 1
-      })),
-      g(n.$slots, "default")
-    ], 2));
+      (d(), S(g("style"), {
+        textContent: y(c.value)
+      }, null, 8, ["textContent"])),
+      b(f.$slots, "default")
+    ], 10, x));
   }
 });
 export {
-  P as default
+  W as default
 };

package/components/ThemeProvider/index.d.ts

@@ -1,3 +1,3 @@
 export { default as ThemeProvider } from './ThemeProvider.vue';
 export type { ThemeProviderProps, ThemeStyles, ThemeMaxWidth } from './types';
-export { buildThemeVariables, buildCardOverrideStyles, buildThemeStyleBlock, } from './themeVars';
+export { buildThemeVariables, getCachedThemeVariables, buildCardOverrideStyles, buildThemeStyleBlock, } from './themeVars';

package/components/ThemeProvider/themeVars.d.ts

@@ -8,7 +8,7 @@ export declare const DEFAULT_MAX_WIDTH = 1440;
  * has to inject it as a real `<style>` block (it targets descendant
  * `.bg-card .bg-card` selectors which cannot be expressed as inline variables).
  */
-export declare function buildCardOverrideStyles(bg: string, isDark: boolean, scope?: string): string;
+export declare function buildCardOverrideStyles(bg: string, isDark: boolean, scope?: string, surfaceColor?: string, primaryColor?: string): string;
 /**
  * Build a `<style>` text block that re-applies every generated CSS custom
  * property with `!important`, scoped to a provider root selector.
@@ -37,18 +37,6 @@ export declare function buildCardOverrideStyles(bg: string, isDark: boolean, sco
  * as `ShopThemeProvider`.
  */
 export declare function buildThemeStyleBlock(vars: ThemeStyles, selector?: string): string;
-/**
- * Note: We keep `!important` out of the theme variables object itself.
- *
- * However, Vue's DOM patching (`style.setProperty(key, value)`) strictly rejects
- * the `value` argument if it contains `!important`. Thus, any inline style
- * object with `!important` silently fails and drops the styles entirely in SPA
- * environments.
- *
- * Therefore, we provide raw variables (without `!important`) to `useThemeStyles()`
- * consumers, and rely on the `<style>` block generated by `buildThemeStyleBlock`
- * to enforce `!important` overrides across the application.
- */
 /**
  * Compute the full theme-styles record from a {@link ThemeProviderProps}.
  *
@@ -57,3 +45,11 @@ export declare function buildThemeStyleBlock(vars: ThemeStyles, selector?: strin
  * by `buildThemeStyleBlock` when generating the high-priority style block.
  */
 export declare function buildThemeVariables(props: ThemeProviderProps): ThemeStyles;
+/**
+ * Return a shared, immutable theme map for identical token inputs.
+ *
+ * Theme providers are commonly repeated in previews and editor canvases. A
+ * small LRU cache prevents each instance from rebuilding the same 150+ token
+ * record while keeping memory bounded for interactive theme editors.
+ */
+export declare function getCachedThemeVariables(props: ThemeProviderProps): ThemeStyles;

package/components/ThemeProvider/themeVars.js

@@ -1,11 +1,11 @@
-import { hexToHSL as s, mixColorHex as a } from "../../utils/colorUtils.js";
-const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
-  const l = Number(r);
-  return Number.isFinite(l) && l > 0 ? l : o;
-}, w = (r, o) => {
-  const l = Number(r);
-  return Number.isFinite(l) && l >= 0 ? l : o;
-}, i = (r) => Number.parseFloat(r.toFixed(8)).toString(), E = [
+import { mixColorHex as i, hexToHSL as s } from "../../utils/colorUtils.js";
+const g = 16, y = 1.25, C = 8, L = 1440, _ = 64, d = /* @__PURE__ */ new Map(), $ = (o, l) => {
+  const r = Number(o);
+  return Number.isFinite(r) && r > 0 ? r : l;
+}, A = (o, l) => {
+  const r = Number(o);
+  return Number.isFinite(r) && r >= 0 ? r : l;
+}, a = (o) => Number.parseFloat(o.toFixed(8)).toString(), N = [
   "0.5",
   "1",
   "1.5",
@@ -46,7 +46,7 @@ const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
   "19",
   "19.5",
   "20"
-], B = {
+], D = {
   1: 0.95,
   "1.5": 0.91,
   2: 0.85,
@@ -58,7 +58,7 @@ const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
   6: 0.55,
   7: 0.5,
   8: 0.45
-}, T = {
+}, V = {
   "0.5": 1,
   1: 1.03030303,
   "1.5": 1.06060606,
@@ -99,7 +99,7 @@ const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
   19: 2.95,
   "19.5": 3,
   20: 3.05
-}, C = [
+}, I = [
   ["xs", 0.75, 1],
   ["sm", 0.875, 1.25],
   ["base", 1, 1.5],
@@ -110,7 +110,7 @@ const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
   ["4xl", 2.25, 2.5],
   ["5xl", 3, 3],
   ["6xl", 3.75, 3.75]
-], L = {
+], O = {
   "--font-weight-extralight": "200",
   "--font-weight-light": "300",
   "--font-weight-normal": "400",
@@ -119,35 +119,35 @@ const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
   "--font-weight-bold": "700",
   "--font-weight-extrabold": "800",
   "--font-weight-black": "900"
-}, _ = (r, o, l) => {
-  const e = o / x;
-  r["font-size"] = `${o}px`, r["--font-size-base"] = `${o}px`, C.forEach(([c, t, n]) => {
-    const u = t * e;
-    r[`--text-${c}`] = `${i(u)}rem`, r[`--text-${c}--line-height`] = n === t ? "1" : `calc(${i(n * e)} / ${i(u)})`;
-  }), Object.entries(B).forEach(([c, t]) => {
-    r[`--text--fs-${c}`] = `${i(t)}em`;
+}, z = (o, l, r) => {
+  const t = l / g;
+  o["font-size"] = `${l}px`, o["--font-size-base"] = `${l}px`, I.forEach(([c, e, n]) => {
+    const u = e * t;
+    o[`--text-${c}`] = `${a(u)}rem`, o[`--text-${c}--line-height`] = n === e ? "1" : `calc(${a(n * t)} / ${a(u)})`;
+  }), Object.entries(D).forEach(([c, e]) => {
+    o[`--text--fs-${c}`] = `${a(e)}em`;
   });
-  const f = l / k;
-  E.forEach((c) => {
-    const n = 1 + (T[c] - 1) * f;
-    r[`--text-fs-${c}`] = `${i(n)}em`;
+  const f = r / y;
+  N.forEach((c) => {
+    const n = 1 + (V[c] - 1) * f;
+    o[`--text-fs-${c}`] = `${a(n)}em`;
   });
-}, S = (r, o) => {
-  const l = o / x;
-  r["--radius"] = `${i(l)}rem`, r["--radius-sm"] = `${i(l * 0.8)}rem`, r["--radius-md"] = `${i(l)}rem`, r["--radius-lg"] = `${i(l * 1.34)}rem`, r["--radius-xl"] = `${i(l * 1.6)}rem`, r["--radius-2xl"] = `${i(l * 2)}rem`, r["--radius-3xl"] = `${i(l * 3)}rem`;
-}, A = (r, o) => {
-  if (typeof o == "string") {
-    const e = o.trim().toLowerCase();
-    r["--shop-max-width"] = e === "full" || e === "none" ? "none" : o;
+}, R = (o, l) => {
+  const r = l / g;
+  o["--radius"] = `${a(r)}rem`, o["--radius-sm"] = `${a(r * 0.8)}rem`, o["--radius-md"] = `${a(r)}rem`, o["--radius-lg"] = `${a(r * 1.34)}rem`, o["--radius-xl"] = `${a(r * 1.6)}rem`, o["--radius-2xl"] = `${a(r * 2)}rem`, o["--radius-3xl"] = `${a(r * 3)}rem`;
+}, U = (o, l) => {
+  if (typeof l == "string") {
+    const t = l.trim().toLowerCase();
+    o["--shop-max-width"] = t === "full" || t === "none" ? "none" : l;
     return;
   }
-  if (o === 0) {
-    r["--shop-max-width"] = "none";
+  if (l === 0) {
+    o["--shop-max-width"] = "none";
     return;
   }
-  const l = g(o ?? void 0, F);
-  r["--shop-max-width"] = `${l}px`;
-}, N = {
+  const r = $(l ?? void 0, L);
+  o["--shop-max-width"] = `${r}px`;
+}, H = {
   danger: {
     light: "#ffeeee",
     default: "#ff3b30",
@@ -200,7 +200,7 @@ const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
   pink: { subtle: "#fdebf3", subtleFg: "#be185d", subtleBorder: "#f8c6db" },
   cyan: { subtle: "#E1F8F8", subtleFg: "#0e7490", subtleBorder: "#c2ecf5" },
   chart: ["#6366f1", "#22c55e", "#f59e0b", "#ef4444", "#3b82f6", "#ec4899"]
-}, D = {
+}, M = {
   danger: {
     light: "#391413",
     default: "#7F1D1D",
@@ -253,11 +253,11 @@ const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
   pink: { subtle: "#2a0f1c", subtleFg: "#f472b6", subtleBorder: "#9d174d" },
   cyan: { subtle: "#0e242a", subtleFg: "#22d3ee", subtleBorder: "#0e7490" },
   chart: ["#818cf8", "#34d399", "#fbbf24", "#fb7185", "#60a5fa", "#f472b6"]
-}, I = (r, o) => {
-  const l = o ? D : N;
+}, j = (o, l) => {
+  const r = l ? M : H;
   ["danger", "warning", "info", "success"].forEach((c) => {
-    const t = l[c];
-    r[`--color-${c}-light`] = t.light, r[`--color-${c}`] = t.default, r[`--color-${c}-dark`] = t.dark, r[`--color-${c}-fg`] = t.fg, r[`--color-${c}-fg-light`] = t.fgLight, r[`--color-${c}-subtle`] = t.subtle, r[`--color-${c}-subtle-fg`] = t.subtleFg, r[`--color-${c}-subtle-border`] = t.subtleBorder, c === "danger" && (r["--color-destructive"] = t.default, r["--color-destructive-foreground"] = t.fg);
+    const e = r[c];
+    o[`--color-${c}-light`] = e.light, o[`--color-${c}`] = e.default, o[`--color-${c}-dark`] = e.dark, o[`--color-${c}-fg`] = e.fg, o[`--color-${c}-fg-light`] = e.fgLight, o[`--color-${c}-subtle`] = e.subtle, o[`--color-${c}-subtle-fg`] = e.subtleFg, o[`--color-${c}-subtle-border`] = e.subtleBorder, c === "danger" && (o["--color-destructive"] = e.default, o["--color-destructive-foreground"] = e.fg);
   }), [
     "secondary",
     "purple",
@@ -267,124 +267,172 @@ const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
     "pink",
     "cyan"
   ].forEach((c) => {
-    const t = l[c];
-    r[`--color-${c}-subtle`] = t.subtle, r[`--color-${c}-subtle-fg`] = t.subtleFg, r[`--color-${c}-subtle-border`] = t.subtleBorder;
-  }), l.chart.forEach((c, t) => {
-    r[`--color-chart-${t + 1}`] = c;
+    const e = r[c];
+    o[`--color-${c}-subtle`] = e.subtle, o[`--color-${c}-subtle-fg`] = e.subtleFg, o[`--color-${c}-subtle-border`] = e.subtleBorder;
+  }), r.chart.forEach((c, e) => {
+    o[`--color-chart-${e + 1}`] = c;
   });
+}, b = (o, l, r) => {
+  const t = p(l, r), f = F(l);
+  return `${G(t, o)}${o} {
+  background-color: ${f} !important;
+}
+`;
+}, X = (o, l, r) => {
+  const t = s(o).l < 50, f = t ? "#ffffff" : "#000000", c = i(o, f, t ? 0.07 : 0.03), e = i(o, f, t ? 0.1 : 0.055), n = i(o, f, t ? 0.04 : 0.015), u = i(o, f, t ? 0.08 : 0.04);
+  return [
+    b(`${r} .bg-card`, o, l),
+    b(`${r} .bg-card-light`, n, l),
+    b(`${r} .bg-card .bg-card`, c, l),
+    b(`${r} .bg-card .bg-card-light`, u, l),
+    b(`${r} .bg-card .bg-card .bg-card`, e, l)
+  ].join("");
 };
-function R(r, o, l = ".vlite-theme-provider") {
-  if (!r) return "";
-  if (o) {
-    const t = a(r, "#ffffff", 0.07), n = a(r, "#ffffff", 0.12), u = a(r, "#ffffff", 0.1), h = a(r, "#ffffff", 0.14), d = a(r, "#ffffff", 0.13), v = a(r, "#ffffff", 0.16), b = a(r, "#ffffff", 0.07), $ = a(r, "#ffffff", 0.11), m = a(r, "#ffffff", 0.1), y = a(r, "#ffffff", 0.14);
+function Z(o, l, r = ".vlite-theme-provider", t, f) {
+  if (t)
+    return X(t, f, r);
+  if (!o) return "";
+  if (l) {
+    const u = i(o, "#ffffff", 0.07), w = i(o, "#ffffff", 0.12), m = i(o, "#ffffff", 0.1), E = i(o, "#ffffff", 0.14), x = i(o, "#ffffff", 0.13), S = i(o, "#ffffff", 0.16), k = i(o, "#ffffff", 0.07), B = i(o, "#ffffff", 0.11), h = i(o, "#ffffff", 0.1), T = i(o, "#ffffff", 0.14);
     return `
-${l}.dark .bg-card {
-  --color-body: ${t} !important;
-  --color-white: ${t} !important;
-  --color-mixture-1: ${n} !important;
-  --color-mixture-2: #ffffff !important;
-  background-color: ${t} !important;
-}
-${l}.dark .bg-card .bg-card {
+${r}.dark .bg-card {
   --color-body: ${u} !important;
   --color-white: ${u} !important;
-  --color-mixture-1: ${h} !important;
-  --color-mixture-2: #000000;
+  --color-mixture-1: ${w} !important;
+  --color-mixture-2: #ffffff !important;
   background-color: ${u} !important;
 }
-${l}.dark .bg-card .bg-card .bg-card {
-  --color-body: ${d} !important;
-  --color-white: ${d} !important;
-  --color-mixture-1: ${v} !important;
+${r}.dark .bg-card .bg-card {
+  --color-body: ${m} !important;
+  --color-white: ${m} !important;
+  --color-mixture-1: ${E} !important;
+  --color-mixture-2: #000000;
+  background-color: ${m} !important;
+}
+${r}.dark .bg-card .bg-card .bg-card {
+  --color-body: ${x} !important;
+  --color-white: ${x} !important;
+  --color-mixture-1: ${S} !important;
   --color-mixture-2: #000000;
-  background-color: ${d} !important;
+  background-color: ${x} !important;
 }
-${l}.dark .bg-card-light {
-  --color-body: ${b} !important;
-  --color-white: ${b} !important;
-  --color-mixture-1: ${$} !important;
+${r}.dark .bg-card-light {
+  --color-body: ${k} !important;
+  --color-white: ${k} !important;
+  --color-mixture-1: ${B} !important;
   --color-mixture-2: #ffffff !important;
-  background-color: ${b} !important;
+  background-color: ${k} !important;
 }
-${l}.dark .bg-card .bg-card-light {
-  --color-body: ${m} !important;
-  --color-white: ${m} !important;
-  --color-mixture-1: ${y} !important;
+${r}.dark .bg-card .bg-card-light {
+  --color-body: ${h} !important;
+  --color-white: ${h} !important;
+  --color-mixture-1: ${T} !important;
   --color-mixture-2: #000000;
-  background-color: ${m} !important;
+  background-color: ${h} !important;
 }
 `;
   }
-  const e = a(r, "#000000", 0.03), f = a(r, "#000000", 0.055), c = a(r, "#000000", 0.09);
+  const c = i(o, "#000000", 0.03), e = i(o, "#000000", 0.055), n = i(o, "#000000", 0.09);
   return `
-${l} .bg-card,
-${l} .bg-card-light {
-  --color-body: ${e} !important;
-  --color-white: ${e} !important;
-  --color-mixture-1: ${e} !important;
+${r} .bg-card,
+${r} .bg-card-light {
+  --color-body: ${c} !important;
+  --color-white: ${c} !important;
+  --color-mixture-1: ${c} !important;
   --color-mixture-2: #000000 !important;
-  background-color: ${e} !important;
+  background-color: ${c} !important;
   border-color: color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2));
 }
-${l} .bg-card .bg-card,
-${l} .bg-card-light .bg-card-light {
-  --color-body: ${f} !important;
-  --color-white: ${f} !important;
-  --color-mixture-1: ${f};
+${r} .bg-card .bg-card,
+${r} .bg-card-light .bg-card-light {
+  --color-body: ${e} !important;
+  --color-white: ${e} !important;
+  --color-mixture-1: ${e};
   --color-mixture-2: #000000;
-  background-color: ${f} !important;
+  background-color: ${e} !important;
 }
-${l} .bg-card .bg-card .bg-card,
-${l} .bg-card-light .bg-card-light .bg-card-light {
-  --color-body: ${c} !important;
-  --color-white: ${c} !important;
-  --color-mixture-1: ${c};
+${r} .bg-card .bg-card .bg-card,
+${r} .bg-card-light .bg-card-light .bg-card-light {
+  --color-body: ${n} !important;
+  --color-white: ${n} !important;
+  --color-mixture-1: ${n};
   --color-mixture-2: #000000;
-  background-color: ${c} !important;
+  background-color: ${n} !important;
 }
 `;
 }
-const O = (r) => r.replace(/[{};]/g, "");
-function U(r, o = ".vlite-theme-provider") {
-  if (!o) return "";
-  const l = [];
-  for (const [e, f] of Object.entries(r)) {
-    if (!e.startsWith("--") && e !== "font-size") continue;
-    const c = O(f);
-    c && l.push(
-      c.includes("!important") ? `  ${e}: ${c};` : `  ${e}: ${c} !important;`
+const F = (o) => o.replace(/[{};]/g, "");
+function G(o, l = ".vlite-theme-provider") {
+  if (!l) return "";
+  const r = [];
+  for (const [t, f] of Object.entries(o)) {
+    if (!t.startsWith("--") && t !== "font-size") continue;
+    const c = F(f);
+    c && r.push(
+      c.includes("!important") ? `  ${t}: ${c};` : `  ${t}: ${c} !important;`
     );
   }
-  return l.length === 0 ? "" : `${o} {
-${l.join(`
+  return r.length === 0 ? "" : `${l} {
+${r.join(`
 `)}
 }
 `;
 }
-function z(r) {
-  const o = {};
-  if (o["--color-white"] = r.bgColor ?? "#ffffff", o["--color-black"] = "#000000", r.bgColor) {
-    o["--color-background"] = r.bgColor, o["--color-body"] = r.bgColor;
-    const l = s(r.bgColor).l < 50;
-    l ? (o["--color-mixture-1"] = "#0c0c0c", o["--color-mixture-2"] = "#ffffff", o["--color-white"] = r.bgColor, o["--color-black"] = "#ffffff", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 96.5%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 94.5%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 90.5%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 86.5%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 82.5%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 79.5%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 70%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 74%, #ffffff)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 70%, #ffffff)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 94%, #ffffff)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 96%, #ffffff)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 87.5%, #ffffff)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 92.5%, #ffffff)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 95%, #ffffff)", o["--color-muted-foreground"] = "var(--color-gray-600)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 90%, #ffffff)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #ffffff)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #ffffff)", o["--shadow-sm"] = "none", o["--shadow-DEFAULT"] = "none", o["--shadow-md"] = "none", o["--shadow-lg"] = "none", o["--shadow-xl"] = "none") : (o["--color-mixture-1"] = "#ffffff", o["--color-mixture-2"] = "#000000", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 98%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 97%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 96%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 92%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 86%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 80%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 88%, #000000)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 87%, #000000)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 96%, #000000)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 98%, #000000)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 94.8%, #000000)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 94%, #000000)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 97%, #000000)", o["--color-muted-foreground"] = "color-mix(in oklab, var(--color-background) 10%, #000000)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 95%, #000000)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #000000)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #000000)", o["--shadow-sm"] = "rgba(95, 97, 100, 0.07) 0px 15px 90px 0px, rgba(0, 0, 0, 0.02) 0.2px 0.2px 1px 0px", o["--shadow-DEFAULT"] = "rgba(55, 59, 74, 0.074) 0px 10px 55px 3px", o["--shadow-md"] = "var(--shadow-DEFAULT)", o["--shadow-lg"] = "rgba(100, 100, 111, 0.15) 0px 7px 40px -1px", o["--shadow-xl"] = "rgba(0, 0, 0, 0.2) 0px 15px 50px -12px"), I(o, l);
+const K = (o, l) => {
+  if (o["--color-white"] = l.bgColor ?? "#ffffff", o["--color-black"] = "#000000", l.bgColor) {
+    o["--color-background"] = l.bgColor, o["--color-body"] = l.bgColor;
+    const r = s(l.bgColor).l < 50;
+    r ? (o["--color-mixture-1"] = "#0c0c0c", o["--color-mixture-2"] = "#ffffff", o["--color-white"] = l.bgColor, o["--color-black"] = "#ffffff", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 96.5%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 94.5%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 90.5%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 86.5%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 82.5%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 79.5%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 70%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 74%, #ffffff)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 70%, #ffffff)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 94%, #ffffff)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 96%, #ffffff)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 87.5%, #ffffff)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 92.5%, #ffffff)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 95%, #ffffff)", o["--color-muted-foreground"] = "var(--color-gray-600)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 90%, #ffffff)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #ffffff)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #ffffff)", o["--shadow-sm"] = "none", o["--shadow-DEFAULT"] = "none", o["--shadow-md"] = "none", o["--shadow-lg"] = "none", o["--shadow-xl"] = "none") : (o["--color-mixture-1"] = "#ffffff", o["--color-mixture-2"] = "#000000", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 98%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 97%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 96%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 92%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 86%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 80%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 88%, #000000)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 87%, #000000)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 96%, #000000)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 98%, #000000)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 94.8%, #000000)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 94%, #000000)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 97%, #000000)", o["--color-muted-foreground"] = "color-mix(in oklab, var(--color-background) 10%, #000000)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 95%, #000000)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #000000)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #000000)", o["--shadow-sm"] = "rgba(95, 97, 100, 0.07) 0px 15px 90px 0px, rgba(0, 0, 0, 0.02) 0.2px 0.2px 1px 0px", o["--shadow-DEFAULT"] = "rgba(55, 59, 74, 0.074) 0px 10px 55px 3px", o["--shadow-md"] = "var(--shadow-DEFAULT)", o["--shadow-lg"] = "rgba(100, 100, 111, 0.15) 0px 7px 40px -1px", o["--shadow-xl"] = "rgba(0, 0, 0, 0.2) 0px 15px 50px -12px"), j(o, r);
+  }
+  if (l.primaryColor) {
+    o["--color-primary"] = l.primaryColor;
+    const { l: r } = s(l.primaryColor), t = r > 50 ? "#171717" : "#fafafa";
+    o["--color-primary-foreground"] = t, o["--color-primary-fg"] = t, o["--color-primary-dark"] = `color-mix(in oklab, ${l.primaryColor} 80%, #000000)`, o["--color-primary-light"] = `color-mix(in oklab, ${t} 92%, ${l.primaryColor})`, o["--color-primary-fg-light"] = o["--color-primary-dark"];
   }
-  if (r.primaryColor) {
-    o["--color-primary"] = r.primaryColor;
-    const { l } = s(r.primaryColor), e = l > 50 ? "#171717" : "#fafafa";
-    o["--color-primary-foreground"] = e, o["--color-primary-fg"] = e, o["--color-primary-dark"] = `color-mix(in oklab, ${r.primaryColor} 80%, #000000)`, o["--color-primary-light"] = `color-mix(in oklab, ${e} 92%, ${r.primaryColor})`, o["--color-primary-fg-light"] = o["--color-primary-dark"];
+}, P = (o) => {
+  o["--tooltip-bg"] = "var(--color-background)", o["--tooltip-text"] = "var(--color-foreground)", o["--tooltip-border"] = "color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2))", o["--tooltip-shadow"] = "var(--shadow-DEFAULT)", o["--date-picker-border"] = "var(--color-border)", o["--timer-picker-bg"] = "var(--color-background)", o["--iconPicker-border"] = "var(--color-border)";
+}, p = (o, l) => {
+  const r = {};
+  return K(r, { bgColor: o, primaryColor: l }), P(r), r;
+};
+function W(o) {
+  const l = p(o.bgColor, o.primaryColor);
+  o.footerBgColor && (l["--color-footer"] = o.footerBgColor);
+  const r = $(o.baseFontSize, g), t = o.scaleSpacingWithBaseFontSize ? 0.25 * (r / g) : 0.25;
+  return l["--spacing"] = `${a(t)}rem`, Object.assign(l, O), z(
+    l,
+    r,
+    $(o.headingScale, y)
+  ), R(l, A(o.borderRadius, C)), U(l, o.maxWidth), l["--tooltip-radius"] = "var(--radius)", l["--tooltip-arrow-size"] = "0.5em", l["--tooltip-z-index"] = "50", l["--date-picker-radius"] = "var(--radius)", l;
+}
+function q(o) {
+  const l = JSON.stringify([
+    o.bgColor,
+    o.surfaceColor,
+    o.primaryColor,
+    o.footerBgColor,
+    o.baseFontSize,
+    o.scaleSpacingWithBaseFontSize,
+    o.headingScale,
+    o.borderRadius,
+    o.maxWidth
+  ]), r = d.get(l);
+  if (r)
+    return d.delete(l), d.set(l, r), r;
+  const t = Object.freeze(W(o));
+  if (d.set(l, t), d.size > _) {
+    const f = d.keys().next().value;
+    f !== void 0 && d.delete(f);
   }
-  return r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, L), _(
-    o,
-    g(r.baseFontSize, x),
-    g(r.headingScale, k)
-  ), S(o, w(r.borderRadius, p)), A(o, r.maxWidth), o["--tooltip-bg"] = "var(--color-background)", o["--tooltip-text"] = "var(--color-foreground)", o["--tooltip-border"] = "color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2))", o["--tooltip-radius"] = "var(--radius)", o["--tooltip-shadow"] = "var(--shadow-DEFAULT)", o["--tooltip-arrow-size"] = "0.5em", o["--tooltip-z-index"] = "50", o["--date-picker-border"] = "var(--color-border)", o["--date-picker-radius"] = "var(--radius)", o["--timer-picker-bg"] = "var(--color-background)", o["--iconPicker-border"] = "var(--color-border)", o;
+  return t;
 }
 export {
-  x as DEFAULT_BASE_FONT_SIZE,
-  p as DEFAULT_BORDER_RADIUS,
-  k as DEFAULT_HEADING_SCALE,
-  F as DEFAULT_MAX_WIDTH,
-  R as buildCardOverrideStyles,
-  U as buildThemeStyleBlock,
-  z as buildThemeVariables
+  g as DEFAULT_BASE_FONT_SIZE,
+  C as DEFAULT_BORDER_RADIUS,
+  y as DEFAULT_HEADING_SCALE,
+  L as DEFAULT_MAX_WIDTH,
+  Z as buildCardOverrideStyles,
+  G as buildThemeStyleBlock,
+  W as buildThemeVariables,
+  q as getCachedThemeVariables
 };