@quidgest/ui 0.14.10 → 0.14.12

package/esm/composables/theme.d.ts

@@ -1,5 +1,50 @@
-import { ThemeInstance } from '../framework';
-export declare const THEME_SYMBOL = "q-theme";
+import { ComputedRef, DeepReadonly, InjectionKey, Ref } from 'vue';
+import { ColorScheme } from '../utils/color';
+export declare const ThemeSymbol: InjectionKey<ThemeInstance>;
+/**
+ * Represents the two available theme modes for the application: light and dark.
+ */
+export type ThemeMode = 'light' | 'dark';
+/**
+ * Represents the theme configuration for the application, including the default theme
+ * and a list of available themes with customizable color schemes.
+ */
+export type AppThemes = {
+    /** The name of the default theme to be applied initially. */
+    defaultTheme: string;
+    /** An array of theme definitions available for the application. */
+    themes: Array<{
+        /** The name of the theme. */
+        name: string;
+        /** The mode of the theme (e.g., light or dark). */
+        mode: ThemeMode;
+        /** An optional object to customize the color scheme of the theme. */
+        colors?: Partial<ColorScheme>;
+    }>;
+};
+/**
+ * Defines the structure of a theme, including its name, mode, and color scheme.
+ */
+export type ThemeDefinition = {
+    /** The unique name of the theme. */
+    name: string;
+    /** The mode of the theme (e.g., light or dark). */
+    mode: ThemeMode;
+    /** The color scheme associated with the theme. */
+    scheme: ColorScheme;
+};
+/**
+ * Represents an instance of a theme, containing reactive properties for
+ * managing theme state and accessing theme definitions.
+ */
+export type ThemeInstance = {
+    /** The reactive reference to the active theme's name. */
+    readonly name: Ref<string>;
+    /** A computed reference to the current theme definition. */
+    readonly current: DeepReadonly<ComputedRef<ThemeDefinition>>;
+    /** An array of available theme definitions. */
+    readonly themes: DeepReadonly<ThemeDefinition[]>;
+};
 /**
  * Custom hook for accessing the theme configuration in context.
  *
@@ -7,11 +52,14 @@ export declare const THEME_SYMBOL = "q-theme";
  */
 export declare function useTheme(): ThemeInstance;
 /**
- * Provides a theme with the specified name using the current theme configuration.
+ * Provides and manages a theme instance based on the specified theme name.
+ *
+ * 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.
  *
- * @param name - The name of the theme to provide.
+ * @param name - A reactive reference (`Ref<string>`) representing the name of the theme to activate.
  *
- * @returns The active theme.
+ * @returns The newly created and provided `ThemeInstance`.
  */
-export declare function provideTheme(name: string): ThemeInstance;
+export declare function provideTheme(name: Ref<string>): 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,aAAa,EAAE,MAAM,aAAa,CAAA;AAKhD,eAAO,MAAM,YAAY,YAAY,CAAA;AAErC;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,aAAa,CAQxC;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,iBAWxC"}
+{"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,eAAe,CAAA;AAMhD,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;CAChD,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,aAAa,CAQxC;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,aAAa,CAU7D"}

package/esm/composables/theme.js

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

package/esm/framework.d.ts

@@ -1,28 +1,25 @@
 import { Defaults } from './composables/defaults';
-import { Component, Plugin, Ref } from 'vue';
-import { ColorScheme } from './utils/color';
+import { AppThemes } from './composables/theme';
+import { Component, Plugin } from 'vue';
+/**
+ * Configuration options for the Quidgest UI framework plugin.
+ */
 export type FrameworkConfig = {
+    /** An optional record of components to be registered globally in the application. */
     components?: Record<string, Component>;
+    /** An optional configuration for the available themes and the default theme. */
     themes?: AppThemes;
+    /** An optional object containing global default values for the application. */
     defaults?: Defaults;
 };
-export type ThemeMode = 'light' | 'dark';
-export type AppThemes = {
-    defaultTheme: string;
-    themes: Array<{
-        name: string;
-        mode: ThemeMode;
-        colors?: Partial<ColorScheme>;
-    }>;
-};
-export type ThemeDefinition = {
-    name: string;
-    mode: ThemeMode;
-    scheme: ColorScheme;
-};
-export type ThemeInstance = {
-    activeTheme: Ref<string>;
-    themes: ThemeDefinition[];
-};
+/**
+ * Creates the Quidgest UI framework plugin that installs components, sets up global defaults,
+ * and configures themes based on the provided configuration.
+ *
+ * @param config - The framework configuration, including components, defaults, and themes.
+ *                 Defaults to an empty object if no configuration is provided.
+ *
+ * @returns A Vue plugin (`Plugin`) with an `install` function to set up the framework.
+ */
 export declare function createFramework(config?: FrameworkConfig): Plugin;
 //# sourceMappingURL=framework.d.ts.map

package/esm/framework.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"framework.d.ts","sourceRoot":"","sources":["../src/framework.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,KAAK,EAAO,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAMhD,MAAM,MAAM,eAAe,GAAG;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;IACtC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,MAAM,SAAS,GAAG;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,MAAM,EAAE,KAAK,CAAC;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,EAAE,SAAS,CAAA;QACf,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;KAC7B,CAAC,CAAA;CACF,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC3B,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,MAAM,EAAE,eAAe,EAAE,CAAA;CACzB,CAAA;AAED,wBAAgB,eAAe,CAAC,MAAM,GAAE,eAAoB,GAAG,MAAM,CAiBpE"}
+{"version":3,"file":"framework.d.ts","sourceRoot":"","sources":["../src/framework.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAmB,MAAM,qBAAqB,CAAA;AACrE,OAAO,KAAK,EAAO,SAAS,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAMjD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B,qFAAqF;IACrF,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;IAEtC,gFAAgF;IAChF,MAAM,CAAC,EAAE,SAAS,CAAA;IAElB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACnB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,MAAM,GAAE,eAAoB,GAAG,MAAM,CAiBpE"}

package/esm/framework.js

@@ -1,47 +1,44 @@
 import { DEFAULTS_SYMBOL as c } from "./composables/defaults.js";
-import { THEME_SYMBOL as i } from "./composables/theme.js";
-import { defaultLightColorScheme as a, defaultDarkColorScheme as h } from "./templates/theme.js";
-import { ref as n, watch as f } from "vue";
-import { generateRootStyle as d } from "./utils/theme.js";
-function v(m = {}) {
+import { ThemeSymbol as h } from "./composables/theme.js";
+import { defaultLightColorScheme as l, defaultDarkColorScheme as i } from "./templates/theme.js";
+import { ref as a, watch as f } from "vue";
+import { createThemeInstance as d, generateRootStyle as u } from "./utils/theme.js";
+function D(s = {}) {
   return { install: (o) => {
-    const t = m.components || {};
-    for (const l in t)
-      o.component(l, t[l]);
-    const e = m.defaults || {};
-    o.provide(c, n(e)), u(o, m.themes);
+    const t = s.components || {};
+    for (const n in t)
+      o.component(n, t[n]);
+    const e = s.defaults || {};
+    o.provide(c, a(e)), p(o, s.themes);
   } };
 }
-function u(m, s) {
+function p(s, m) {
   const o = [];
   let t;
-  if (!s)
+  if (!m)
     t = "default", o.push({
       name: t,
       mode: "light",
-      scheme: a
+      scheme: l
     });
   else
-    for (const e of s.themes) {
-      const r = { ...e.mode === "light" ? a : h, ...e.colors };
+    for (const e of m.themes) {
+      const r = { ...e.mode === "light" ? l : i, ...e.colors };
       o.push({
         name: e.name,
         mode: e.mode,
         scheme: r
-      }), e.name === s.defaultTheme && (t = e.name);
+      }), e.name === m.defaultTheme && (t = e.name);
     }
   if (t) {
-    const e = {
-      activeTheme: n(t),
-      themes: o
-    };
-    d(o), f(e.activeTheme, p, { immediate: !0 }), m.provide(i, e);
+    const e = a(t), n = d(e, o);
+    u(o), f(n.name, S, { immediate: !0 }), s.provide(h, n);
   }
 }
-function p(m) {
-  const s = document.documentElement, t = Array.from(s.classList).filter((e) => !e.startsWith("q-theme"));
-  s.className = t.join(" "), s.classList.add(`q-theme--${m}`);
+function S(s) {
+  const m = document.documentElement, t = Array.from(m.classList).filter((e) => !e.startsWith("q-theme"));
+  m.className = t.join(" "), m.classList.add(`q-theme--${s}`);
 }
 export {
-  v as createFramework
+  D as createFramework
 };

package/esm/index.d.ts

@@ -15,8 +15,10 @@ declare module '@vue/runtime-core' {
 		QCard: typeof import('@quidgest/ui/components')['QCard']
 		QCheckbox: typeof import('@quidgest/ui/components')['QCheckbox']
 		QCollapsible: typeof import('@quidgest/ui/components')['QCollapsible']
+		QColorPicker: typeof import('@quidgest/ui/components')['QColorPicker']
 		QCombobox: typeof import('@quidgest/ui/components')['QCombobox']
 		QDialog: typeof import('@quidgest/ui/components')['QDialog']
+		QDropdownMenu: typeof import('@quidgest/ui/components')['QDropdownMenu']
 		QField: typeof import('@quidgest/ui/components')['QField']
 		QIcon: typeof import('@quidgest/ui/components')['QIcon']
 		QIconFont: typeof import('@quidgest/ui/components')['QIconFont']

package/esm/templates/theme.js

@@ -30,28 +30,28 @@ const f = {
   onDanger: "#fff",
   onInfo: "#fff"
 }, a = {
-  primary: "#009ff5",
-  primaryLight: "#ade2ff",
-  primaryDark: "#164965",
+  primary: "#008ad2",
+  primaryLight: "#006398",
+  primaryDark: "#cde5ff",
   secondary: "#003552",
   highlight: "#f65600",
-  info: "#25cbe4",
-  infoLight: "#bceff7",
-  infoDark: "#225964",
-  success: "#3acf5d",
-  successLight: "#c2f0cd",
-  successDark: "#275738",
+  info: "#17a2b8",
+  infoLight: "#11798a",
+  infoDark: "#bceff7",
+  success: "#28a745",
+  successLight: "#1e7d34",
+  successDark: "#c2f0cd",
   warning: "#ffa900",
-  warningLight: "#ffeabf",
-  warningDark: "#5a471e",
-  danger: "#de2b2b",
-  dangerLight: "#f7cccc",
-  dangerDark: "#4d2528",
+  warningLight: "#bf7f00",
+  warningDark: "#ffeabf",
+  danger: "#b71c1c",
+  dangerLight: "#891515",
+  dangerDark: "#f7cccc",
   background: "#202428",
   container: "#202428",
   neutral: "#9299a0",
-  neutralLight: "#dee1e3",
-  neutralDark: "#41464a",
+  neutralLight: "#40474f",
+  neutralDark: "#c4c5ca",
   onBackground: "#fff",
   onPrimary: "#fff",
   onSecondary: "#fff",

package/esm/utils/color.d.ts

@@ -49,9 +49,10 @@ export type HSL = {
 /**
  * Checks if the given string represents a valid hexadecimal color code.
  * @param hexColorCode - The color code to validate.
+ * @param enforceSixChars - Whether to enforce only the 6-character format (default is false).
  * @returns True if the color code is valid, false otherwise.
  */
-export declare function isValidHex(hexColorCode: string): boolean;
+export declare function isValidHex(hexColorCode: string, enforceSixChars?: boolean): boolean;
 /**
  * Tries to parse a string in the format 'rgb(r, g, b)' to an RGB object.
  * @param tr The input string to parse, expected in the format 'rgb(r, g, b)'.

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

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IAEzB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAEnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAGnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IAEd,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAGhB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IAEpB,SAAS,EAAE,MAAM,CAAA;IAGjB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,GAAG,GAAG;IACjB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACT,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,GAAG,GAAG;IACjB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACT,CAAA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAExD;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS,CASxD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAkB7C;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG,CAYrD;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG,CAYpD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAM3C;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAqCtC;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAuBtC;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAOhE;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,mBAIpD;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAU3D"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IAEzB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAEnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IAGnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IAEd,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IAEjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAGhB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IAEpB,SAAS,EAAE,MAAM,CAAA;IAGjB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,GAAG,GAAG;IACjB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACT,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,GAAG,GAAG;IACjB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACT,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,EAAE,eAAe,GAAE,OAAe,GAAG,OAAO,CAQ1F;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS,CASxD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAkB7C;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG,CAYrD;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG,CAYpD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAM3C;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAqCtC;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAuBtC;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAOhE;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,mBAIpD;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAU3D"}

package/esm/utils/color.js

@@ -1,49 +1,49 @@
-function u(t) {
-  return /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/.test(t);
+function h(t, n = !1) {
+  return n ? /^#[a-fA-F0-9]{6}$/.test(t) : /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/.test(t);
 }
-function o(t) {
+function d(t) {
   const n = t.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   if (n) {
     const s = parseInt(n[1], 10), e = parseInt(n[2], 10), r = parseInt(n[3], 10);
     return { r: s, g: e, b: r };
   }
 }
-function d(t) {
-  if (u(t)) {
+function o(t) {
+  if (h(t)) {
     t.length === 4 && (t = "#" + t[1] + t[1] + t[2] + t[2] + t[3] + t[3]);
     const n = parseInt(t.slice(1, 3), 16), s = parseInt(t.slice(3, 5), 16), e = parseInt(t.slice(5, 7), 16);
     return { r: n, g: s, b: e };
   } else {
-    const n = o(t);
+    const n = d(t);
     if (n) return n;
   }
   throw new Error("Invalid color format");
 }
 function b(t) {
   const n = t.r / 255, s = t.g / 255, e = t.b / 255, r = Math.max(n, s, e), i = Math.min(n, s, e);
-  let a = 0, f;
-  const h = (r + i) / 2;
+  let a = 0, c;
+  const u = (r + i) / 2;
   if (r === i)
-    a = f = 0;
+    a = c = 0;
   else {
-    const c = r - i;
-    switch (f = h > 0.5 ? c / (2 - r - i) : c / (r + i), r) {
+    const f = r - i;
+    switch (c = u > 0.5 ? f / (2 - r - i) : f / (r + i), r) {
       case n:
-        a = (s - e) / c + (s < e ? 6 : 0);
+        a = (s - e) / f + (s < e ? 6 : 0);
         break;
       case s:
-        a = (e - n) / c + 2;
+        a = (e - n) / f + 2;
         break;
       case e:
-        a = (n - s) / c + 4;
+        a = (n - s) / f + 4;
         break;
     }
     a /= 6;
   }
   return {
     h: Math.round(a * 360),
-    s: Math.round(f * 100),
-    l: Math.round(h * 100)
+    s: Math.round(c * 100),
+    l: Math.round(u * 100)
   };
 }
 function g(t) {
@@ -51,8 +51,8 @@ function g(t) {
 }
 export {
   g as getContrastingColor,
-  u as isValidHex,
-  d as parseColor,
+  h as isValidHex,
+  o as parseColor,
   b as rgbToHsl,
-  o as tryParseRgb
+  d as tryParseRgb
 };

package/esm/utils/setupPropsProxy.d.ts

@@ -1,11 +1,24 @@
-import { SetupContext, VNode } from 'vue';
-type LooseRequired<T> = {
-    [P in keyof (T & Required<T>)]: T[P];
-};
-type Component<Props> = {
-    setup?: (this: void, props: LooseRequired<Readonly<Props>>, ctx: SetupContext<unknown>) => unknown;
-};
+import { VNode } from 'vue';
+/**
+ * Checks if a given property is defined in the `vnode` props.
+ *
+ * @param vnode The Vue component's VNode instance.
+ * @param prop The property name to check.
+ * @returns `true` if the property exists in the vnode props, `false` otherwise.
+ */
 export declare function propIsDefined(vnode: VNode, prop: string): boolean;
-export declare function setupPropsProxy<Props>(component: Component<Props>): Component<Props>;
-export {};
+/**
+ * Sets up a proxy for a Vue component's props.
+ * This proxy allows for fetching prop defaults from context.
+ *
+ * @template C The type of the component.
+ * @param component The component to wrap with the proxy.
+ * @returns The component with the `setup` function enhanced to use the proxy for props.
+ *
+ * Example usage:
+ * ```ts
+ * const QButton = setupPropsProxy(_QButton);
+ * ```
+ */
+export declare function setupPropsProxy<C>(component: C): C;
 //# sourceMappingURL=setupPropsProxy.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"setupPropsProxy.d.ts","sourceRoot":"","sources":["../../src/utils/setupPropsProxy.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAO9C,KAAK,aAAa,CAAC,CAAC,IAAI;KACtB,CAAC,IAAI,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACpC,CAAA;AAED,KAAK,SAAS,CAAC,KAAK,IAAI;IACvB,KAAK,CAAC,EAAE,CACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EACrC,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,KACtB,OAAO,CAAA;CACZ,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,WAQvD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CA6BpF"}
+{"version":3,"file":"setupPropsProxy.d.ts","sourceRoot":"","sources":["../../src/utils/setupPropsProxy.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAgB,KAAK,EAAE,MAAM,KAAK,CAAA;AAO9C;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,WAQvD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CAkClD"}

package/esm/utils/setupPropsProxy.js

@@ -1,30 +1,30 @@
 import { useDefaults as m } from "../composables/defaults.js";
-import { getCurrentInstance as c } from "vue";
-import { isEmpty as d } from "./isEmpty.js";
-import { toKebabCase as v } from "./string.js";
-function y(e, t) {
-  var n;
-  const r = v(t);
-  return r ? typeof ((n = e.props) == null ? void 0 : n[r]) < "u" : !1;
+import { getCurrentInstance as d } from "vue";
+import { isEmpty as v } from "./isEmpty.js";
+import { toKebabCase as y } from "./string.js";
+function g(r, n) {
+  var t;
+  const e = y(n);
+  return e ? typeof ((t = r.props) == null ? void 0 : t[e]) < "u" : !1;
 }
-function C(e) {
-  const t = e.setup;
-  return t && (e.setup = (r, n) => {
-    const o = m();
-    if (d(o.value)) return t(r, n);
-    const s = c();
-    if (s === null) return t(r, n);
-    const a = new Proxy(r, {
+function I(r) {
+  const n = r, e = n.setup;
+  return e && (n.setup = (t, o) => {
+    const s = m();
+    if (v(s.value)) return e(t, o);
+    const f = d();
+    if (f === null) return e(t, o);
+    const a = new Proxy(t, {
       get(l, u) {
-        var i;
-        const f = Reflect.get(l, u), p = (i = o.value) == null ? void 0 : i[u];
-        return typeof u == "string" && !y(s.vnode, u) ? p ?? f : f;
+        var p;
+        const i = Reflect.get(l, u), c = (p = s.value) == null ? void 0 : p[u];
+        return typeof u == "string" && !g(f.vnode, u) ? c ?? i : i;
       }
     });
-    return t(a, n);
-  }), e;
+    return e(a, o);
+  }), r;
 }
 export {
-  y as propIsDefined,
-  C as setupPropsProxy
+  g as propIsDefined,
+  I as setupPropsProxy
 };

package/esm/utils/theme.d.ts

@@ -1,4 +1,6 @@
-import { ThemeDefinition } from '../framework';
+import { ThemeDefinition, ThemeInstance } from '../composables/theme';
+import { DeepReadonly, Ref } from 'vue';
+export declare const THEME_NODE_ID = "q-theme";
 /**
  * Gets or creates a style node for applying dynamic themes.
  *
@@ -18,4 +20,14 @@ export declare function generateRootStyle(themes: ThemeDefinition[]): void;
  * @returns The corresponding CSS variable name.
  */
 export declare function toProperty(color: string): string;
+/**
+ * Creates a theme instance that allows reactive access to a specific theme.
+ *
+ * @param name - The name of the theme to use.
+ * @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.
+ */
+export declare function createThemeInstance(name: Ref<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":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAOlD;;;;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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAQ5C,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,CAgBf"}

package/esm/utils/theme.js

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