@quidgest/ui 0.16.23 → 0.16.25

package/esm/composables/theme.d.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, DeepReadonly, InjectionKey, Ref } from 'vue';
+import { ComputedRef, DeepReadonly, InjectionKey, MaybeRefOrGetter, Ref } from 'vue';
 import { ColorScheme } from '../utils/color';
 export declare const ThemeSymbol: InjectionKey<ThemeInstance>;
 /**
@@ -44,8 +44,10 @@ export type ThemeInstance = {
     readonly current: DeepReadonly<ComputedRef<ThemeDefinition>>;
     /** An array of available theme definitions. */
     readonly themes: DeepReadonly<ThemeDefinition[]>;
-    /** The theme class. */
+    /** The theme class name. */
     readonly class: ComputedRef<string>;
+    /** The theme CSS definition. */
+    readonly css: ComputedRef<string | undefined>;
 };
 /**
  * Custom hook for accessing the theme configuration in context.
@@ -54,14 +56,23 @@ export type ThemeInstance = {
  */
 export declare function useTheme(): ThemeInstance;
 /**
- * Provides and manages a theme instance based on the specified theme name.
+ * Provides and manages a reactive theme instance within the Vue dependency injection system.
  *
- * This function retrieves the available themes from the current theme context,
- * creates a new theme instance, and provides it to the Vue dependency injection system.
+ * This function retrieves the current list of available themes from the theme context,
+ * optionally adds a new `ThemeDefinition`, and creates a reactive theme instance.
+ * The new theme instance is then provided using Vue's `provide`, making it accessible
+ * to all descendant components via `inject`.
  *
- * @param name - A reactive reference (`Ref<string>`) representing the name of the theme to activate.
+ * @param nameOrDef - Either:
+ *   - A string (or `Ref<string>`/getter) specifying the name of the theme to activate.
+ *   - A `ThemeDefinition` (or `Ref<ThemeDefinition>`/getter) to register and activate.
  *
- * @returns The newly created and provided `ThemeInstance`.
+ * @returns The newly created and provided `ThemeInstance`, containing:
+ *   - `name`: reactive theme name (`Ref<string>`),
+ *   - `current`: computed active theme (`Ref<ThemeDefinition>`),
+ *   - `themes`: array of all available themes,
+ *   - `class`: computed CSS class string for the theme,
+ *   - `css`: computed CSS variables string for the theme.
  */
-export declare function provideTheme(name: Ref<string>): ThemeInstance;
+export declare function provideTheme(nameOrDef: MaybeRefOrGetter<string | ThemeDefinition>): ThemeInstance;
 //# sourceMappingURL=theme.d.ts.map

package/esm/composables/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/composables/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AACvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAMjD,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,aAAa,CAAyB,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACvB,6DAA6D;IAC7D,YAAY,EAAE,MAAM,CAAA;IAEpB,mEAAmE;IACnE,MAAM,EAAE,KAAK,CAAC;QACb,6BAA6B;QAC7B,IAAI,EAAE,MAAM,CAAA;QAEZ,mDAAmD;QACnD,IAAI,EAAE,SAAS,CAAA;QAEf,qEAAqE;QACrE,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;KAC7B,CAAC,CAAA;CACF,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAA;IAEZ,mDAAmD;IACnD,IAAI,EAAE,SAAS,CAAA;IAEf,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAE1B,4DAA4D;IAC5D,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAA;IAE5D,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC,eAAe,EAAE,CAAC,CAAA;IAEhD,uBAAuB;IACvB,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CACnC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,aAAa,CAQxC;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,aAAa,CAU7D"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/composables/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAMjD,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,aAAa,CAAyB,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACvB,6DAA6D;IAC7D,YAAY,EAAE,MAAM,CAAA;IAEpB,mEAAmE;IACnE,MAAM,EAAE,KAAK,CAAC;QACb,6BAA6B;QAC7B,IAAI,EAAE,MAAM,CAAA;QAEZ,mDAAmD;QACnD,IAAI,EAAE,SAAS,CAAA;QAEf,qEAAqE;QACrE,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;KAC7B,CAAC,CAAA;CACF,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAA;IAEZ,mDAAmD;IACnD,IAAI,EAAE,SAAS,CAAA;IAEf,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAE1B,4DAA4D;IAC5D,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAA;IAE5D,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC,eAAe,EAAE,CAAC,CAAA;IAEhD,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAEnC,gCAAgC;IAChC,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;CAC7C,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,aAAa,CAQxC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AAEH,wBAAgB,YAAY,CAAC,SAAS,EAAE,gBAAgB,CAAC,MAAM,GAAG,eAAe,CAAC,GAAG,aAAa,CAsBjG"}

package/esm/composables/theme.js

@@ -1,18 +1,22 @@
-import { provide as r, inject as c } from "vue";
-import { createThemeInstance as h } from "../utils/theme.js";
-const n = Symbol.for("q-theme");
-function s() {
-  const e = c(n);
+import { toValue as c, provide as i, inject as h } from "vue";
+import { createThemeInstance as u } from "../utils/theme.js";
+const m = Symbol.for("q-theme");
+function f() {
+  const e = h(m);
   if (!e)
     throw new Error("[Quidgest UI] Could not find theme instance");
   return e;
 }
-function u(e) {
-  const o = s(), m = o.themes, t = h(e, m);
-  return r(n, t), t;
+function d(e) {
+  const s = f();
+  let n, o = structuredClone(s.themes);
+  const t = c(e);
+  typeof t != "string" ? (o = [...o, t], n = t.name) : n = t;
+  const r = u(n, o);
+  return i(m, r), r;
 }
 export {
-  n as ThemeSymbol,
-  u as provideTheme,
-  s as useTheme
+  m as ThemeSymbol,
+  d as provideTheme,
+  f as useTheme
 };

package/esm/composables/uid.d.ts

@@ -1,9 +1,9 @@
-import { MaybeRef, Ref } from 'vue';
+import { MaybeRefOrGetter, Ref } from 'vue';
 /**
  * Custom hook to generate unique IDs.
  *
  * @param [componentId] - Optional component-specific ID.
  * @returns A unique ID as a string or a ref containing a string
  */
-export declare function useId<T extends MaybeRef<string | undefined>>(componentId?: T): T extends Ref<string | undefined> ? Ref<string> : string;
+export declare function useId(componentId?: MaybeRefOrGetter<string | undefined>): Ref<string>;
 //# sourceMappingURL=uid.d.ts.map

package/esm/composables/uid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uid.d.ts","sourceRoot":"","sources":["../../src/composables/uid.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAQxC;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,EAC3D,WAAW,CAAC,EAAE,CAAC,GACb,CAAC,SAAS,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAK1D"}
+{"version":3,"file":"uid.d.ts","sourceRoot":"","sources":["../../src/composables/uid.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAQhD;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,CAGrF"}

package/esm/composables/uid.js

@@ -1,8 +1,9 @@
-import { unref as r } from "vue";
-let o = 0;
-function n(e) {
-  return r(e) || `uid-${++o}`;
+import { toValue as r, ref as t } from "vue";
+let u = 0;
+function d(e) {
+  const o = r(e);
+  return t(o || `uid-${++u}`);
 }
 export {
-  n as useId
+  d as useId
 };

package/esm/composables/useDialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/useDialog/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AASrF;;;;GAIG;AACH,wBAAgB,SAAS;uBASE,YAAY,OAAO,MAAM,YAAY,cAAc;uBAgBnD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAasC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EADvE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/useDialog/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AASrF;;;;GAIG;AACH,wBAAgB,SAAS;uBASE,YAAY,OAAO,MAAM,YAAY,cAAc;uBAgBnD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAagC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EADjE"}

package/esm/composables/useDialog/index.js

@@ -1,21 +1,21 @@
-import { reactive as a } from "vue";
+import { reactive as s } from "vue";
 import { useId as r } from "../uid.js";
-const o = a({ dialogs: [] });
-function g() {
-  function e(d, i, n) {
-    const t = r(i);
-    return o.dialogs.push({ id: t, props: d, options: n }), t;
+const o = s({ dialogs: [] });
+function c() {
+  function t(d, i, e) {
+    const n = r(i).value;
+    return o.dialogs.push({ id: n, props: d, options: e }), n;
   }
-  function s(d) {
-    const i = o.dialogs.findIndex((n) => n.id === d);
+  function a(d) {
+    const i = o.dialogs.findIndex((e) => e.id === d);
     i !== -1 && o.dialogs.splice(i, 1);
   }
   return {
     ...o,
-    addDialog: e,
-    removeDialog: s
+    addDialog: t,
+    removeDialog: a
   };
 }
 export {
-  g as useDialog
+  c as useDialog
 };

package/esm/composables/useToast/index.js

@@ -1,10 +1,10 @@
 import { ToastSymbol as a } from "./types.js";
-import { inject as i, ref as u } from "vue";
+import { inject as u, ref as i } from "vue";
 import { useId as c } from "../uid.js";
 function p() {
   const { toasts: t } = f();
   function s(n, o) {
-    const e = c(o);
+    const e = c(o).value;
     return t.value.push({ id: e, props: n }), e;
   }
   function r(n) {
@@ -17,19 +17,19 @@ function p() {
     removeToast: r
   };
 }
-function I() {
+function l() {
   return {
-    toasts: u([])
+    toasts: i([])
   };
 }
 function f() {
-  const t = i(a);
+  const t = u(a);
   if (!t)
     throw new Error("useInjectedToast must be used after provideToast");
   return t;
 }
 export {
-  I as createToastInstance,
+  l as createToastInstance,
   f as injectToastInstance,
   p as useToast
 };

package/esm/framework.js

@@ -1,54 +1,63 @@
-import { DEFAULTS_SYMBOL as i } from "./composables/defaults.js";
-import { ThemeSymbol as c } from "./composables/theme.js";
+import { DEFAULTS_SYMBOL as c } from "./composables/defaults.js";
+import { ThemeSymbol as h } from "./composables/theme.js";
 import { DismissibleLayerKey as f } from "./symbols/dismissibleLayer.js";
-import { ToastSymbol as h } from "./composables/useToast/types.js";
-import { useDismissibleLayerStack as d } from "./composables/useDismissibleLayerStack/index.js";
-import { createToastInstance as u } from "./composables/useToast/index.js";
-import { defaultLightColorScheme as r, defaultDarkColorScheme as p } from "./templates/theme.js";
-import { ref as l, watch as S } from "vue";
-import { createThemeInstance as L, generateRootStyle as T } from "./utils/theme.js";
-function N(m = {}) {
+import { ToastSymbol as d } from "./composables/useToast/types.js";
+import { useDismissibleLayerStack as u } from "./composables/useDismissibleLayerStack/index.js";
+import { createToastInstance as p } from "./composables/useToast/index.js";
+import { defaultLightColorScheme as r, defaultDarkColorScheme as l } from "./templates/theme.js";
+import { ref as i, watch as S } from "vue";
+import { createThemeInstance as T, generateRootStyle as L } from "./utils/theme.js";
+function F(s = {}) {
   return { install: (t) => {
-    const s = m.components || {};
-    for (const a in s)
-      t.component(a, s[a]);
-    const e = m.defaults || {};
-    t.provide(i, l(e)), y(t, m.themes);
-    const n = d();
+    const m = s.components || {};
+    for (const a in m)
+      t.component(a, m[a]);
+    const e = s.defaults || {};
+    t.provide(c, i(e)), y(t, s.themes);
+    const n = u();
     t.provide(f, n), b(t);
   } };
 }
-function y(m, o) {
+function y(s, o) {
   const t = [];
-  let s;
-  if (!o)
-    s = "default", t.push({
-      name: s,
-      mode: "light",
-      scheme: r
-    });
-  else
+  let m;
+  if (o)
     for (const e of o.themes) {
-      const a = { ...e.mode === "light" ? r : p, ...e.colors };
+      const a = { ...e.mode === "light" ? r : l, ...e.colors };
       t.push({
         name: e.name,
         mode: e.mode,
         scheme: a
-      }), e.name === o.defaultTheme && (s = e.name);
+      }), e.name === o.defaultTheme && (m = e.name);
     }
-  if (s) {
-    const e = l(s), n = L(e, t);
-    T(t), S(n.name, C, { immediate: !0 }), m.provide(c, n);
+  else {
+    const e = [
+      {
+        name: "light",
+        mode: "light",
+        scheme: r
+      },
+      {
+        name: "dark",
+        mode: "dark",
+        scheme: l
+      }
+    ];
+    t.push(...e), m = "light";
+  }
+  if (m) {
+    const e = i(m), n = T(e, t);
+    L(t), S(n.name, k, { immediate: !0 }), s.provide(h, n);
   }
 }
-function b(m) {
-  const o = u();
-  m.provide(h, o);
+function b(s) {
+  const o = p();
+  s.provide(d, o);
 }
-function C(m) {
-  const o = document.documentElement, s = Array.from(o.classList).filter((e) => !e.startsWith("q-theme"));
-  o.className = s.join(" "), o.classList.add(`q-theme--${m}`);
+function k(s) {
+  const o = document.documentElement, m = Array.from(o.classList).filter((e) => !e.startsWith("q-theme"));
+  o.className = m.join(" "), o.classList.add(`q-theme--${s}`);
 }
 export {
-  N as createFramework
+  F as createFramework
 };

package/esm/index.d.ts

@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
 		QColorPicker: typeof import('@quidgest/ui/components')['QColorPicker']
 		QCombobox: typeof import('@quidgest/ui/components')['QCombobox']
 		QDateTimePicker: typeof import('@quidgest/ui/components')['QDateTimePicker']
+		QDefaultsProvider: typeof import('@quidgest/ui/components')['QDefaultsProvider']
 		QDialog: typeof import('@quidgest/ui/components')['QDialog']
 		QDialogProvider: typeof import('@quidgest/ui/components')['QDialogProvider']
 		QDismissibleLayer: typeof import('@quidgest/ui/components')['QDismissibleLayer']

package/esm/utils/theme.d.ts

@@ -1,4 +1,4 @@
-import { DeepReadonly, Ref } from 'vue';
+import { DeepReadonly, MaybeRefOrGetter } from 'vue';
 import { ThemeDefinition, ThemeInstance } from '../composables/theme';
 export declare const THEME_NODE_ID = "q-theme";
 /**
@@ -7,6 +7,18 @@ export declare const THEME_NODE_ID = "q-theme";
  * @returns The style node used for dynamic themes.
  */
 export declare function getThemeNode(): HTMLStyleElement;
+/**
+ * Generates a CSS class definition for a given theme.
+ *
+ * This function creates a CSS block scoped to the theme’s class
+ * (e.g., `.q-theme--light`), where each color in the theme’s color
+ * scheme is exposed as both a HEX and an RGB CSS custom property.
+ *
+ * @param theme - The `ThemeDefinition` containing the name and color scheme.
+ *
+ * @returns A string of CSS text defining the theme’s variables.
+ */
+export declare function generateThemeCss(theme: ThemeDefinition): string;
 /**
  * Generates and applies dynamic root-level styles based on the provided themes.
  *
@@ -21,13 +33,22 @@ export declare function generateRootStyle(themes: ThemeDefinition[]): void;
  */
 export declare function toProperty(color: string): string;
 /**
- * Creates a theme instance that allows reactive access to a specific theme.
+ * Creates a reactive theme instance for a given theme name.
+ *
+ * This provides reactive access to the currently active theme and
+ * computed properties for applying its CSS class and CSS variables.
  *
- * @param name - The name of the theme to use.
+ * @param name - The name of the theme to activate, or a getter/ref returning a string.
  * @param themes - A readonly array of available theme definitions.
- * @returns A ThemeInstance object containing the current theme and metadata.
  *
- * @throws Will throw an error if the specified theme name is not found.
+ * @returns A `ThemeInstance` object containing:
+ *   - `name`: a reactive `Ref<string>` of the active theme name.
+ *   - `current`: a computed `Ref<ThemeDefinition>` of the active theme.
+ *   - `themes`: the array of all available theme definitions.
+ *   - `class`: a computed CSS class string for the active theme.
+ *   - `css`: a computed string of CSS variables for the active theme.
+ *
+ * @throws Will throw an error if no theme with the specified name exists in `themes`.
  */
-export declare function createThemeInstance(name: Ref<string>, themes: DeepReadonly<ThemeDefinition[]>): ThemeInstance;
+export declare function createThemeInstance(name: MaybeRefOrGetter<string>, themes: DeepReadonly<ThemeDefinition[]>): ThemeInstance;
 //# sourceMappingURL=theme.d.ts.map

package/esm/utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAQ1E,eAAO,MAAM,aAAa,YAAY,CAAA;AAEtC;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,gBAAgB,CAY/C;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe,EAAE,QA2B1D;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAOvC;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAClC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EACjB,MAAM,EAAE,YAAY,CAAC,eAAe,EAAE,CAAC,GACrC,aAAa,CAmBf"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAQ1E,eAAO,MAAM,aAAa,YAAY,CAAA;AAEtC;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,gBAAgB,CAY/C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,UAoBtD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe,EAAE,QAM1D;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAOvC;AAED;;;;;;;;;;;;;;;;;GAiBG;AAEH,wBAAgB,mBAAmB,CAClC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,MAAM,EAAE,YAAY,CAAC,eAAe,EAAE,CAAC,GACrC,aAAa,CAqBf"}

package/esm/utils/theme.js

@@ -1,57 +1,59 @@
-import { computed as u } from "vue";
-import { parseColor as f } from "./color.js";
-import { toKebabCase as i } from "./string.js";
+import { ref as f, toValue as h, computed as c } from "vue";
+import { parseColor as d } from "./color.js";
+import { toKebabCase as p } from "./string.js";
 const a = "q-theme";
-function l() {
+function $() {
   let e = document.getElementById(
     a
   );
   return e || (e = document.createElement("style"), e.id = a, document.head.appendChild(e)), e;
 }
-function g(e) {
-  let t = "";
-  for (const c of e) {
-    t += `.q-theme--${c.name} {
+function l(e) {
+  let t = `.q-theme--${e.name} {
 `;
-    const m = c.scheme;
-    let n;
-    for (n in m) {
-      const o = m[n];
-      if (o) {
-        t += `  ${h(n)}: ${o};
+  const n = e.scheme;
+  let o;
+  for (o in n) {
+    const r = n[o];
+    if (r) {
+      t += `  ${u(o)}: ${r};
 `;
-        const s = f(o);
-        t += `  ${h(n)}-rgb: ${s.r} ${s.g} ${s.b};
+      const m = d(r);
+      t += `  ${u(o)}-rgb: ${m.r} ${m.g} ${m.b};
 `;
-      }
     }
-    t += `}
-`;
   }
-  const r = l();
-  r.textContent = t;
+  return t += `}
+`, t;
+}
+function E(e) {
+  const t = e.map(l).join(`
+`), n = $();
+  n.textContent = t;
 }
-function h(e) {
-  return e ? `--q-theme-${i(e)}` : "";
+function u(e) {
+  return e ? `--q-theme-${p(e)}` : "";
 }
-function E(e, t) {
-  const r = u(() => {
-    const n = t.find((o) => o.name === e.value);
-    if (!n)
-      throw new Error(`Theme "${e}" not found`);
-    return n;
-  }), c = u(() => `q-theme--${r.value.name}`);
+function b(e, t) {
+  const n = f(h(e)), o = c(() => {
+    const s = t.find((i) => i.name === n.value);
+    if (!s)
+      throw new Error(`Theme "${n.value}" not found`);
+    return s;
+  }), r = c(() => `q-theme--${o.value.name}`), m = c(() => l(o.value));
   return {
-    name: e,
-    current: r,
+    name: n,
+    current: o,
     themes: t,
-    class: c
+    class: r,
+    css: m
   };
 }
 export {
   a as THEME_NODE_ID,
-  E as createThemeInstance,
-  g as generateRootStyle,
-  l as getThemeNode,
-  h as toProperty
+  b as createThemeInstance,
+  E as generateRootStyle,
+  l as generateThemeCss,
+  $ as getThemeNode,
+  u as toProperty
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quidgest/ui",
   "description": "Quidgest's UI framework",
-  "version": "0.16.23",
+  "version": "0.16.25",
   "private": false,
   "type": "module",
   "author": "Quidgest",