@vuer-ai/vuer-uikit 0.0.74 → 0.0.76

package/dist/ui/theme/ThemeProvider.cjs

@@ -1,55 +1,67 @@
 'use strict';
 
-var chunkJT64WF26_cjs = require('../../chunk-JT64WF26.cjs');
-require('../../chunk-YIPI6MEU.cjs');
+var chunkJM6NBUDT_cjs = require('../../chunk-JM6NBUDT.cjs');
+require('../../chunk-JD4J3RDN.cjs');
 
 
 
 Object.defineProperty(exports, "MEDIA", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.MEDIA; }
+  get: function () { return chunkJM6NBUDT_cjs.MEDIA; }
 });
 Object.defineProperty(exports, "Theme", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.Theme; }
+  get: function () { return chunkJM6NBUDT_cjs.Theme; }
 });
 Object.defineProperty(exports, "ThemeContext", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.ThemeContext; }
+  get: function () { return chunkJM6NBUDT_cjs.ThemeContext; }
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.ThemeProvider; }
+  get: function () { return chunkJM6NBUDT_cjs.ThemeProvider; }
 });
 Object.defineProperty(exports, "colorSchemes", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.colorSchemes; }
+  get: function () { return chunkJM6NBUDT_cjs.colorSchemes; }
+});
+Object.defineProperty(exports, "computeTheme", {
+  enumerable: true,
+  get: function () { return chunkJM6NBUDT_cjs.computeTheme; }
 });
 Object.defineProperty(exports, "defaultThemes", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.defaultThemes; }
+  get: function () { return chunkJM6NBUDT_cjs.defaultThemes; }
 });
 Object.defineProperty(exports, "disableAnimation", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.disableAnimation; }
+  get: function () { return chunkJM6NBUDT_cjs.disableAnimation; }
+});
+Object.defineProperty(exports, "getFromLS", {
+  enumerable: true,
+  get: function () { return chunkJM6NBUDT_cjs.getFromLS; }
 });
 Object.defineProperty(exports, "getSystemTheme", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.getSystemTheme; }
+  get: function () { return chunkJM6NBUDT_cjs.getSystemTheme; }
 });
 Object.defineProperty(exports, "getTheme", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.getTheme; }
+  get: function () { return chunkJM6NBUDT_cjs.getTheme; }
 });
 Object.defineProperty(exports, "isServer", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.isServer; }
+  get: function () { return chunkJM6NBUDT_cjs.isServer; }
+});
+Object.defineProperty(exports, "parseOldTheme", {
+  enumerable: true,
+  get: function () { return chunkJM6NBUDT_cjs.parseOldTheme; }
 });
 Object.defineProperty(exports, "saveToLS", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.saveToLS; }
+  get: function () { return chunkJM6NBUDT_cjs.saveToLS; }
 });
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.useTheme; }
+  get: function () { return chunkJM6NBUDT_cjs.useTheme; }
 });

package/dist/ui/theme/ThemeProvider.d.cts

@@ -1,13 +1,25 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
-import { UseThemeProps, ThemeProviderProps } from './types.cjs';
+import { UseThemeProps, ThemeProviderProps, BaseTheme, ComputedTheme } from './types.cjs';
 
 declare const colorSchemes: readonly ["light", "dark"];
 declare const MEDIA = "(prefers-color-scheme: dark)";
 declare const isServer: boolean;
 declare const ThemeContext: react.Context<UseThemeProps | undefined>;
-declare const saveToLS: (storageKey: string, value: string) => void;
+declare const saveToLS: (key: string, value: string) => void;
+declare const getFromLS: (key: string, fallback: string) => string;
+/**
+ * Calculate the actual theme name
+ */
+declare const computeTheme: (baseTheme: BaseTheme, isLiquid: boolean, systemIsDark: boolean) => ComputedTheme;
+/**
+ * Parse old theme string to new state structure
+ */
+declare const parseOldTheme: (oldTheme: string) => {
+    baseTheme: BaseTheme;
+    isLiquid: boolean;
+};
 /**
  * Hook to read and update theme state from `ThemeProvider`.
  * Throws if used outside a provider.
@@ -23,9 +35,9 @@ declare const defaultThemes: string[];
  * Internal component implementing theme persistence, system preference,
  * and DOM attribute updates.
  */
-declare const Theme: ({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, storageKey, themes, defaultTheme, attribute, value, children, nonce, scriptProps, }: PropsWithChildren<ThemeProviderProps>) => react_jsx_runtime.JSX.Element;
+declare const Theme: ({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, storageKey, defaultBaseTheme, defaultIsLiquid, attribute, value, children, nonce, scriptProps, }: PropsWithChildren<ThemeProviderProps>) => react_jsx_runtime.JSX.Element;
 declare const getTheme: (key: string, fallback: string) => string;
 declare const disableAnimation: (nonce?: string) => () => void;
 declare const getSystemTheme: (e?: MediaQueryList | MediaQueryListEvent) => "liquid-dark" | "liquid-light";
 
-export { MEDIA, Theme, ThemeContext, ThemeProvider, colorSchemes, defaultThemes, disableAnimation, getSystemTheme, getTheme, isServer, saveToLS, useTheme };
+export { MEDIA, Theme, ThemeContext, ThemeProvider, colorSchemes, computeTheme, defaultThemes, disableAnimation, getFromLS, getSystemTheme, getTheme, isServer, parseOldTheme, saveToLS, useTheme };

package/dist/ui/theme/ThemeProvider.d.ts

@@ -1,13 +1,25 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
-import { UseThemeProps, ThemeProviderProps } from './types.js';
+import { UseThemeProps, ThemeProviderProps, BaseTheme, ComputedTheme } from './types.js';
 
 declare const colorSchemes: readonly ["light", "dark"];
 declare const MEDIA = "(prefers-color-scheme: dark)";
 declare const isServer: boolean;
 declare const ThemeContext: react.Context<UseThemeProps | undefined>;
-declare const saveToLS: (storageKey: string, value: string) => void;
+declare const saveToLS: (key: string, value: string) => void;
+declare const getFromLS: (key: string, fallback: string) => string;
+/**
+ * Calculate the actual theme name
+ */
+declare const computeTheme: (baseTheme: BaseTheme, isLiquid: boolean, systemIsDark: boolean) => ComputedTheme;
+/**
+ * Parse old theme string to new state structure
+ */
+declare const parseOldTheme: (oldTheme: string) => {
+    baseTheme: BaseTheme;
+    isLiquid: boolean;
+};
 /**
  * Hook to read and update theme state from `ThemeProvider`.
  * Throws if used outside a provider.
@@ -23,9 +35,9 @@ declare const defaultThemes: string[];
  * Internal component implementing theme persistence, system preference,
  * and DOM attribute updates.
  */
-declare const Theme: ({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, storageKey, themes, defaultTheme, attribute, value, children, nonce, scriptProps, }: PropsWithChildren<ThemeProviderProps>) => react_jsx_runtime.JSX.Element;
+declare const Theme: ({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, storageKey, defaultBaseTheme, defaultIsLiquid, attribute, value, children, nonce, scriptProps, }: PropsWithChildren<ThemeProviderProps>) => react_jsx_runtime.JSX.Element;
 declare const getTheme: (key: string, fallback: string) => string;
 declare const disableAnimation: (nonce?: string) => () => void;
 declare const getSystemTheme: (e?: MediaQueryList | MediaQueryListEvent) => "liquid-dark" | "liquid-light";
 
-export { MEDIA, Theme, ThemeContext, ThemeProvider, colorSchemes, defaultThemes, disableAnimation, getSystemTheme, getTheme, isServer, saveToLS, useTheme };
+export { MEDIA, Theme, ThemeContext, ThemeProvider, colorSchemes, computeTheme, defaultThemes, disableAnimation, getFromLS, getSystemTheme, getTheme, isServer, parseOldTheme, saveToLS, useTheme };

package/dist/ui/theme/ThemeProvider.mjs

@@ -1,2 +1,2 @@
-export { MEDIA, Theme, ThemeContext, ThemeProvider, colorSchemes, defaultThemes, disableAnimation, getSystemTheme, getTheme, isServer, saveToLS, useTheme } from '../../chunk-CWBLCQD7.mjs';
-import '../../chunk-NSI47INE.mjs';
+export { MEDIA, Theme, ThemeContext, ThemeProvider, colorSchemes, computeTheme, defaultThemes, disableAnimation, getFromLS, getSystemTheme, getTheme, isServer, parseOldTheme, saveToLS, useTheme } from '../../chunk-7LLDKYND.mjs';
+import '../../chunk-PQEAXTVY.mjs';

package/dist/ui/theme/ThemeToggles.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkNH3Y35ET_cjs = require('../../chunk-NH3Y35ET.cjs');
-require('../../chunk-JT64WF26.cjs');
-require('../../chunk-YIPI6MEU.cjs');
-require('../../chunk-MKKH4EGP.cjs');
-require('../../chunk-BHC7GX53.cjs');
+var chunkVJWZW66V_cjs = require('../../chunk-VJWZW66V.cjs');
+require('../../chunk-JM6NBUDT.cjs');
+require('../../chunk-JD4J3RDN.cjs');
+require('../../chunk-LCCNBVKZ.cjs');
+require('../../chunk-NSQOQD43.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');
@@ -14,15 +14,19 @@ require('../../chunk-6BOWMGFG.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-RPTRTGC2.cjs');
 require('../../chunk-LBWMTA5T.cjs');
-require('../../chunk-DWD754BX.cjs');
+require('../../chunk-OHIB3TEN.cjs');
 
 
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunkNH3Y35ET_cjs.LiquidToggle; }
+  get: function () { return chunkVJWZW66V_cjs.LiquidToggle; }
 });
-Object.defineProperty(exports, "ThemeToggle", {
+Object.defineProperty(exports, "ThemeColorToggle", {
   enumerable: true,
-  get: function () { return chunkNH3Y35ET_cjs.ThemeToggle; }
+  get: function () { return chunkVJWZW66V_cjs.ThemeColorToggle; }
+});
+Object.defineProperty(exports, "ThemeToggles", {
+  enumerable: true,
+  get: function () { return chunkVJWZW66V_cjs.ThemeToggles; }
 });

package/dist/ui/theme/ThemeToggles.d.cts

@@ -4,8 +4,14 @@ import 'class-variance-authority/types';
 import 'class-variance-authority';
 
 type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
-type ThemeToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
-declare const LiquidToggle: react__default.ComponentType<LiquidToggleProps>;
-declare const ThemeToggle: react__default.ComponentType<ThemeToggleProps>;
+declare const LiquidToggle: react__default.FC<LiquidToggleProps>;
+type ThemeColorToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
+declare const ThemeColorToggle: react__default.FC<ThemeColorToggleProps>;
+type ThemeTogglesProps = {
+    className?: string;
+    liquidToggleProps?: Omit<LiquidToggleProps, "className">;
+    colorToggleProps?: Omit<ThemeColorToggleProps, "className">;
+};
+declare const ThemeToggles: react__default.FC<ThemeTogglesProps>;
 
-export { LiquidToggle, ThemeToggle };
+export { LiquidToggle, ThemeColorToggle, ThemeToggles };

package/dist/ui/theme/ThemeToggles.d.ts

@@ -4,8 +4,14 @@ import 'class-variance-authority/types';
 import 'class-variance-authority';
 
 type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
-type ThemeToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
-declare const LiquidToggle: react__default.ComponentType<LiquidToggleProps>;
-declare const ThemeToggle: react__default.ComponentType<ThemeToggleProps>;
+declare const LiquidToggle: react__default.FC<LiquidToggleProps>;
+type ThemeColorToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
+declare const ThemeColorToggle: react__default.FC<ThemeColorToggleProps>;
+type ThemeTogglesProps = {
+    className?: string;
+    liquidToggleProps?: Omit<LiquidToggleProps, "className">;
+    colorToggleProps?: Omit<ThemeColorToggleProps, "className">;
+};
+declare const ThemeToggles: react__default.FC<ThemeTogglesProps>;
 
-export { LiquidToggle, ThemeToggle };
+export { LiquidToggle, ThemeColorToggle, ThemeToggles };

package/dist/ui/theme/ThemeToggles.mjs

@@ -1,8 +1,8 @@
-export { LiquidToggle, ThemeToggle } from '../../chunk-UB6LW4IC.mjs';
-import '../../chunk-CWBLCQD7.mjs';
-import '../../chunk-NSI47INE.mjs';
-import '../../chunk-XSJ6XVTR.mjs';
-import '../../chunk-3MSEMXKG.mjs';
+export { LiquidToggle, ThemeColorToggle, ThemeToggles } from '../../chunk-COVQAQYO.mjs';
+import '../../chunk-7LLDKYND.mjs';
+import '../../chunk-PQEAXTVY.mjs';
+import '../../chunk-PCSY5IJ2.mjs';
+import '../../chunk-INHZ5D7P.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';
@@ -12,4 +12,4 @@ import '../../chunk-IZARTVYN.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4F2GSF2T.mjs';
 import '../../chunk-IDUVYPN7.mjs';
-import '../../chunk-KVFUDYD3.mjs';
+import '../../chunk-HMN4IKTG.mjs';

package/dist/ui/theme/index.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
 require('../../chunk-LGOEGWMJ.cjs');
-var chunkNH3Y35ET_cjs = require('../../chunk-NH3Y35ET.cjs');
-var chunkJT64WF26_cjs = require('../../chunk-JT64WF26.cjs');
-var chunkYIPI6MEU_cjs = require('../../chunk-YIPI6MEU.cjs');
-require('../../chunk-MKKH4EGP.cjs');
-require('../../chunk-BHC7GX53.cjs');
+var chunkVJWZW66V_cjs = require('../../chunk-VJWZW66V.cjs');
+var chunkJM6NBUDT_cjs = require('../../chunk-JM6NBUDT.cjs');
+var chunkJD4J3RDN_cjs = require('../../chunk-JD4J3RDN.cjs');
+require('../../chunk-LCCNBVKZ.cjs');
+require('../../chunk-NSQOQD43.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');
@@ -15,27 +15,43 @@ require('../../chunk-6BOWMGFG.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-RPTRTGC2.cjs');
 require('../../chunk-LBWMTA5T.cjs');
-require('../../chunk-DWD754BX.cjs');
+require('../../chunk-OHIB3TEN.cjs');
 
 
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunkNH3Y35ET_cjs.LiquidToggle; }
+  get: function () { return chunkVJWZW66V_cjs.LiquidToggle; }
 });
-Object.defineProperty(exports, "ThemeToggle", {
+Object.defineProperty(exports, "ThemeColorToggle", {
   enumerable: true,
-  get: function () { return chunkNH3Y35ET_cjs.ThemeToggle; }
+  get: function () { return chunkVJWZW66V_cjs.ThemeColorToggle; }
+});
+Object.defineProperty(exports, "ThemeToggles", {
+  enumerable: true,
+  get: function () { return chunkVJWZW66V_cjs.ThemeToggles; }
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.ThemeProvider; }
+  get: function () { return chunkJM6NBUDT_cjs.ThemeProvider; }
+});
+Object.defineProperty(exports, "computeTheme", {
+  enumerable: true,
+  get: function () { return chunkJM6NBUDT_cjs.computeTheme; }
+});
+Object.defineProperty(exports, "defaultThemes", {
+  enumerable: true,
+  get: function () { return chunkJM6NBUDT_cjs.defaultThemes; }
+});
+Object.defineProperty(exports, "parseOldTheme", {
+  enumerable: true,
+  get: function () { return chunkJM6NBUDT_cjs.parseOldTheme; }
 });
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
-  get: function () { return chunkJT64WF26_cjs.useTheme; }
+  get: function () { return chunkJM6NBUDT_cjs.useTheme; }
 });
 Object.defineProperty(exports, "ThemeScript", {
   enumerable: true,
-  get: function () { return chunkYIPI6MEU_cjs.ThemeScript; }
+  get: function () { return chunkJD4J3RDN_cjs.ThemeScript; }
 });

package/dist/ui/theme/index.d.cts

@@ -1,7 +1,7 @@
-export { ThemeProvider, useTheme } from './ThemeProvider.cjs';
-export { LiquidToggle, ThemeToggle } from './ThemeToggles.cjs';
+export { ThemeProvider, computeTheme, defaultThemes, parseOldTheme, useTheme } from './ThemeProvider.cjs';
+export { LiquidToggle, ThemeColorToggle, ThemeToggles } from './ThemeToggles.cjs';
 export { ThemeScript } from './themeScript.cjs';
-export { Attribute, ThemeProviderProps, UseThemeProps } from './types.cjs';
+export { Attribute, BaseTheme, ComputedTheme, ThemeProviderProps, UseThemeProps } from './types.cjs';
 import 'react/jsx-runtime';
 import 'react';
 import '../button.cjs';

package/dist/ui/theme/index.d.ts

@@ -1,7 +1,7 @@
-export { ThemeProvider, useTheme } from './ThemeProvider.js';
-export { LiquidToggle, ThemeToggle } from './ThemeToggles.js';
+export { ThemeProvider, computeTheme, defaultThemes, parseOldTheme, useTheme } from './ThemeProvider.js';
+export { LiquidToggle, ThemeColorToggle, ThemeToggles } from './ThemeToggles.js';
 export { ThemeScript } from './themeScript.js';
-export { Attribute, ThemeProviderProps, UseThemeProps } from './types.js';
+export { Attribute, BaseTheme, ComputedTheme, ThemeProviderProps, UseThemeProps } from './types.js';
 import 'react/jsx-runtime';
 import 'react';
 import '../button.js';

package/dist/ui/theme/index.mjs

@@ -1,9 +1,9 @@
 import '../../chunk-6NK7UMFP.mjs';
-export { LiquidToggle, ThemeToggle } from '../../chunk-UB6LW4IC.mjs';
-export { ThemeProvider, useTheme } from '../../chunk-CWBLCQD7.mjs';
-export { ThemeScript } from '../../chunk-NSI47INE.mjs';
-import '../../chunk-XSJ6XVTR.mjs';
-import '../../chunk-3MSEMXKG.mjs';
+export { LiquidToggle, ThemeColorToggle, ThemeToggles } from '../../chunk-COVQAQYO.mjs';
+export { ThemeProvider, computeTheme, defaultThemes, parseOldTheme, useTheme } from '../../chunk-7LLDKYND.mjs';
+export { ThemeScript } from '../../chunk-PQEAXTVY.mjs';
+import '../../chunk-PCSY5IJ2.mjs';
+import '../../chunk-INHZ5D7P.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';
@@ -13,4 +13,4 @@ import '../../chunk-IZARTVYN.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4F2GSF2T.mjs';
 import '../../chunk-IDUVYPN7.mjs';
-import '../../chunk-KVFUDYD3.mjs';
+import '../../chunk-HMN4IKTG.mjs';

package/dist/ui/theme/themeScript.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkYIPI6MEU_cjs = require('../../chunk-YIPI6MEU.cjs');
+var chunkJD4J3RDN_cjs = require('../../chunk-JD4J3RDN.cjs');
 
 
 
 Object.defineProperty(exports, "ThemeScript", {
   enumerable: true,
-  get: function () { return chunkYIPI6MEU_cjs.ThemeScript; }
+  get: function () { return chunkJD4J3RDN_cjs.ThemeScript; }
 });

package/dist/ui/theme/themeScript.mjs

@@ -1 +1 @@
-export { ThemeScript } from '../../chunk-NSI47INE.mjs';
+export { ThemeScript } from '../../chunk-PQEAXTVY.mjs';

package/dist/ui/theme/types.d.cts

@@ -1,49 +1,56 @@
-import { Dispatch, SetStateAction, DetailedHTMLProps, ScriptHTMLAttributes } from 'react';
+import { DetailedHTMLProps, ScriptHTMLAttributes } from 'react';
 
 type DataAttribute = `data-${string}`;
 interface ScriptProps extends DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> {
     [dataAttribute: DataAttribute]: never;
 }
+type BaseTheme = "dark" | "light" | "system";
+/** Computed actual theme type */
+type ComputedTheme = "light" | "dark" | "liquid-light" | "liquid-dark";
 interface UseThemeProps {
-    /** List of all available theme names */
-    themes: string[];
-    /** Forced theme name for the current page */
-    forcedTheme?: string | undefined;
-    /** Update the theme */
-    setTheme: Dispatch<SetStateAction<string>>;
-    /** Active theme name */
-    theme?: string | undefined;
-    /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
-    resolvedTheme?: string | undefined;
-    /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+    /** Base theme color */
+    baseTheme: BaseTheme;
+    /** Set base theme color */
+    setBaseTheme: (theme: BaseTheme) => void;
+    /** Whether liquid mode is enabled */
+    isLiquid: boolean;
+    /** Toggle liquid mode */
+    toggleLiquid: () => void;
+    /** Computed actual theme name */
+    computedTheme: ComputedTheme;
+    /** Resolved theme (handles system theme) */
+    resolvedTheme: ComputedTheme;
+    /** System theme preference (only valid when baseTheme is system) */
     systemTheme?: "dark" | "light" | undefined;
-    /** Key used to store theme setting in localStorage */
+    /** Forced theme name */
+    forcedTheme?: string | undefined;
+    /** Local storage key */
     storageKey: string;
 }
 type Attribute = DataAttribute | "class";
 interface ThemeProviderProps {
-    /** List of all available theme names */
-    themes?: string[] | undefined;
-    /** Forced theme name for the current page */
+    /** Default base theme */
+    defaultBaseTheme?: BaseTheme | undefined;
+    /** Default liquid mode enabled */
+    defaultIsLiquid?: boolean | undefined;
+    /** Forced theme name */
     forcedTheme?: string | undefined;
-    /** Whether to switch between dark and light themes based on prefers-color-scheme */
+    /** Enable system theme detection */
     enableSystem?: boolean | undefined;
-    /** Disable all CSS transitions when switching themes */
+    /** Disable CSS transitions when switching themes */
     disableTransitionOnChange?: boolean | undefined;
-    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+    /** Enable color scheme indication for built-in UI elements */
     enableColorScheme?: boolean | undefined;
-    /** Key used to store theme setting in localStorage */
+    /** Local storage key prefix */
     storageKey?: string | undefined;
-    /** Default theme name. If `enableSystem` is false, the default theme is light */
-    defaultTheme?: string | undefined;
-    /** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
+    /** HTML attribute name */
     attribute?: Attribute | Attribute[] | undefined;
-    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
+    /** Theme name to attribute value mapping */
     value?: Record<string, string> | undefined;
-    /** Nonce string to pass to the inline script and style elements for CSP headers */
+    /** CSP nonce */
     nonce?: string;
-    /** Props to pass the inline script */
+    /** Script tag properties */
     scriptProps?: ScriptProps;
 }
 
-export type { Attribute, ThemeProviderProps, UseThemeProps };
+export type { Attribute, BaseTheme, ComputedTheme, ThemeProviderProps, UseThemeProps };

package/dist/ui/theme/types.d.ts

@@ -1,49 +1,56 @@
-import { Dispatch, SetStateAction, DetailedHTMLProps, ScriptHTMLAttributes } from 'react';
+import { DetailedHTMLProps, ScriptHTMLAttributes } from 'react';
 
 type DataAttribute = `data-${string}`;
 interface ScriptProps extends DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> {
     [dataAttribute: DataAttribute]: never;
 }
+type BaseTheme = "dark" | "light" | "system";
+/** Computed actual theme type */
+type ComputedTheme = "light" | "dark" | "liquid-light" | "liquid-dark";
 interface UseThemeProps {
-    /** List of all available theme names */
-    themes: string[];
-    /** Forced theme name for the current page */
-    forcedTheme?: string | undefined;
-    /** Update the theme */
-    setTheme: Dispatch<SetStateAction<string>>;
-    /** Active theme name */
-    theme?: string | undefined;
-    /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
-    resolvedTheme?: string | undefined;
-    /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+    /** Base theme color */
+    baseTheme: BaseTheme;
+    /** Set base theme color */
+    setBaseTheme: (theme: BaseTheme) => void;
+    /** Whether liquid mode is enabled */
+    isLiquid: boolean;
+    /** Toggle liquid mode */
+    toggleLiquid: () => void;
+    /** Computed actual theme name */
+    computedTheme: ComputedTheme;
+    /** Resolved theme (handles system theme) */
+    resolvedTheme: ComputedTheme;
+    /** System theme preference (only valid when baseTheme is system) */
     systemTheme?: "dark" | "light" | undefined;
-    /** Key used to store theme setting in localStorage */
+    /** Forced theme name */
+    forcedTheme?: string | undefined;
+    /** Local storage key */
     storageKey: string;
 }
 type Attribute = DataAttribute | "class";
 interface ThemeProviderProps {
-    /** List of all available theme names */
-    themes?: string[] | undefined;
-    /** Forced theme name for the current page */
+    /** Default base theme */
+    defaultBaseTheme?: BaseTheme | undefined;
+    /** Default liquid mode enabled */
+    defaultIsLiquid?: boolean | undefined;
+    /** Forced theme name */
     forcedTheme?: string | undefined;
-    /** Whether to switch between dark and light themes based on prefers-color-scheme */
+    /** Enable system theme detection */
     enableSystem?: boolean | undefined;
-    /** Disable all CSS transitions when switching themes */
+    /** Disable CSS transitions when switching themes */
     disableTransitionOnChange?: boolean | undefined;
-    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+    /** Enable color scheme indication for built-in UI elements */
     enableColorScheme?: boolean | undefined;
-    /** Key used to store theme setting in localStorage */
+    /** Local storage key prefix */
     storageKey?: string | undefined;
-    /** Default theme name. If `enableSystem` is false, the default theme is light */
-    defaultTheme?: string | undefined;
-    /** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
+    /** HTML attribute name */
     attribute?: Attribute | Attribute[] | undefined;
-    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
+    /** Theme name to attribute value mapping */
     value?: Record<string, string> | undefined;
-    /** Nonce string to pass to the inline script and style elements for CSP headers */
+    /** CSP nonce */
     nonce?: string;
-    /** Props to pass the inline script */
+    /** Script tag properties */
     scriptProps?: ScriptProps;
 }
 
-export type { Attribute, ThemeProviderProps, UseThemeProps };
+export type { Attribute, BaseTheme, ComputedTheme, ThemeProviderProps, UseThemeProps };

package/dist/ui/timeline.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
-var chunkDLHTCOQO_cjs = require('../chunk-DLHTCOQO.cjs');
-require('../chunk-BMUCXNQH.cjs');
-require('../chunk-MKKH4EGP.cjs');
+var chunkAHNVEAOM_cjs = require('../chunk-AHNVEAOM.cjs');
+require('../chunk-D4W2G6CY.cjs');
+require('../chunk-LCCNBVKZ.cjs');
 require('../chunk-JMCH2AFN.cjs');
-require('../chunk-FABHCVYU.cjs');
+require('../chunk-VBBJSIY7.cjs');
 require('../chunk-G4FJGNY5.cjs');
+require('../chunk-YQCSEMRB.cjs');
 require('../chunk-QN4N4I3Z.cjs');
 require('../chunk-Q7E73DVJ.cjs');
 require('../chunk-JR4TVE43.cjs');
@@ -15,11 +16,11 @@ require('../chunk-6BOWMGFG.cjs');
 require('../chunk-YZIR6LIY.cjs');
 require('../chunk-RPTRTGC2.cjs');
 require('../chunk-LBWMTA5T.cjs');
-require('../chunk-DWD754BX.cjs');
+require('../chunk-OHIB3TEN.cjs');
 
 
 
 Object.defineProperty(exports, "Timeline", {
   enumerable: true,
-  get: function () { return chunkDLHTCOQO_cjs.Timeline; }
+  get: function () { return chunkAHNVEAOM_cjs.Timeline; }
 });

package/dist/ui/timeline.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { TreeDataItemV2 as TreeDataItem } from './tree-view-v2.cjs';
+import { TreeDataItem } from './tree-view-legacy.cjs';
 
 type PointEventType = "SET" | "ADD" | "UPDATE" | "UPSERT" | "REMOVE" | "TIMEOUT";
 type PointEvent = {

package/dist/ui/timeline.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { TreeDataItemV2 as TreeDataItem } from './tree-view-v2.js';
+import { TreeDataItem } from './tree-view-legacy.js';
 
 type PointEventType = "SET" | "ADD" | "UPDATE" | "UPSERT" | "REMOVE" | "TIMEOUT";
 type PointEvent = {