@vuer-ai/vuer-uikit 0.0.24 → 0.0.25

package/dist/chunk-4FOSHIMU.mjs

@@ -0,0 +1 @@
+

package/dist/chunk-CCGCEN7Z.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/theme-context/theme-script.tsx
+var themeScript = (defaultTheme, storageKey, attribute, themes, value, forcedTheme, enableSystem, enableColorScheme) => {
+  const el = document.documentElement;
+  const systemThemes = ["light", "dark"];
+  function updateDOM(theme) {
+    const attributes = Array.isArray(attribute) ? attribute : [attribute];
+    attributes.forEach((attr) => {
+      const isClass = attr === "class";
+      const classes = isClass && value ? themes.map((t) => value[t] || t) : themes;
+      if (isClass) {
+        el.classList.remove(...classes);
+        el.classList.add(value && value[theme] ? value[theme] : theme);
+      } else {
+        el.setAttribute(attr, theme);
+      }
+    });
+    setColorScheme(theme);
+  }
+  function setColorScheme(theme) {
+    if (enableColorScheme && systemThemes.includes(theme)) {
+      el.style.colorScheme = theme;
+    }
+  }
+  function getSystemTheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  if (forcedTheme) {
+    updateDOM(forcedTheme);
+  } else {
+    try {
+      const themeName = localStorage.getItem(storageKey ?? "") || defaultTheme;
+      const isSystem = enableSystem && themeName === "system";
+      const theme = isSystem ? getSystemTheme() : themeName;
+      updateDOM(theme);
+    } catch {
+    }
+  }
+};
+var ThemeScript = react.memo(
+  ({
+    forcedTheme,
+    storageKey,
+    attribute,
+    enableSystem,
+    enableColorScheme,
+    defaultTheme,
+    value,
+    themes,
+    nonce,
+    scriptProps
+  }) => {
+    const scriptArgs = JSON.stringify([
+      defaultTheme,
+      storageKey,
+      attribute,
+      themes,
+      value,
+      forcedTheme,
+      enableSystem,
+      enableColorScheme
+    ]).slice(1, -1);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "script",
+      {
+        ...scriptProps,
+        suppressHydrationWarning: true,
+        nonce: typeof window === "undefined" ? nonce : "",
+        dangerouslySetInnerHTML: { __html: `(${themeScript.toString()})(${scriptArgs})` }
+      }
+    );
+  }
+);
+
+exports.ThemeScript = ThemeScript;

package/dist/{chunk-Q5KEB4UK.mjs → chunk-GXZZGOXX.mjs}

@@ -1,28 +1,8 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 
 // src/utils/use-local-storage.ts
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState(() => {
-    if (typeof window === "undefined") {
-      return initialValue;
-    }
-    try {
-      const item = window.localStorage.getItem(key);
-      if (item === null) return initialValue;
-      if (typeof initialValue === "string") {
-        return item;
-      } else if (typeof initialValue === "number") {
-        return parseFloat(item) || initialValue;
-      } else if (typeof initialValue === "boolean") {
-        return item === "true";
-      } else {
-        return JSON.parse(item);
-      }
-    } catch (error) {
-      console.warn(`Error reading localStorage key "${key}":`, error);
-      return initialValue;
-    }
-  });
+  const [storedValue, setStoredValue] = useState(initialValue);
   const setValue = useCallback(
     (value) => {
       try {
@@ -45,6 +25,23 @@ function useLocalStorage(key, initialValue) {
     },
     [key, storedValue]
   );
+  useEffect(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      if (item === null) return;
+      if (typeof initialValue === "string") {
+        setStoredValue(item);
+      } else if (typeof initialValue === "number") {
+        return setStoredValue(parseFloat(item) || initialValue);
+      } else if (typeof initialValue === "boolean") {
+        return setStoredValue(item === "true");
+      } else {
+        return setStoredValue(JSON.parse(item));
+      }
+    } catch (error) {
+      console.warn(`Error reading localStorage key "${key}":`, error);
+    }
+  }, [initialValue, key]);
   return [storedValue, setValue];
 }
 

package/dist/{chunk-FEYQ2OWB.mjs → chunk-I55IRAYH.mjs}

@@ -1,7 +1,7 @@
 import { Badge } from './chunk-WO3WHXDP.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-var PACKAGE_VERSION = "0.0.24" ;
+var PACKAGE_VERSION = "0.0.25" ;
 var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
 function VersionBadge({
   className,

package/dist/chunk-LHWH4GP5.mjs

@@ -0,0 +1,77 @@
+import { memo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ui/theme-context/theme-script.tsx
+var themeScript = (defaultTheme, storageKey, attribute, themes, value, forcedTheme, enableSystem, enableColorScheme) => {
+  const el = document.documentElement;
+  const systemThemes = ["light", "dark"];
+  function updateDOM(theme) {
+    const attributes = Array.isArray(attribute) ? attribute : [attribute];
+    attributes.forEach((attr) => {
+      const isClass = attr === "class";
+      const classes = isClass && value ? themes.map((t) => value[t] || t) : themes;
+      if (isClass) {
+        el.classList.remove(...classes);
+        el.classList.add(value && value[theme] ? value[theme] : theme);
+      } else {
+        el.setAttribute(attr, theme);
+      }
+    });
+    setColorScheme(theme);
+  }
+  function setColorScheme(theme) {
+    if (enableColorScheme && systemThemes.includes(theme)) {
+      el.style.colorScheme = theme;
+    }
+  }
+  function getSystemTheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  if (forcedTheme) {
+    updateDOM(forcedTheme);
+  } else {
+    try {
+      const themeName = localStorage.getItem(storageKey ?? "") || defaultTheme;
+      const isSystem = enableSystem && themeName === "system";
+      const theme = isSystem ? getSystemTheme() : themeName;
+      updateDOM(theme);
+    } catch {
+    }
+  }
+};
+var ThemeScript = memo(
+  ({
+    forcedTheme,
+    storageKey,
+    attribute,
+    enableSystem,
+    enableColorScheme,
+    defaultTheme,
+    value,
+    themes,
+    nonce,
+    scriptProps
+  }) => {
+    const scriptArgs = JSON.stringify([
+      defaultTheme,
+      storageKey,
+      attribute,
+      themes,
+      value,
+      forcedTheme,
+      enableSystem,
+      enableColorScheme
+    ]).slice(1, -1);
+    return /* @__PURE__ */ jsx(
+      "script",
+      {
+        ...scriptProps,
+        suppressHydrationWarning: true,
+        nonce: typeof window === "undefined" ? nonce : "",
+        dangerouslySetInnerHTML: { __html: `(${themeScript.toString()})(${scriptArgs})` }
+      }
+    );
+  }
+);
+
+export { ThemeScript };

package/dist/chunk-Q3GXSHJV.mjs

@@ -0,0 +1,214 @@
+import { ThemeScript } from './chunk-LHWH4GP5.mjs';
+import { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var colorSchemes = ["light", "dark"];
+var MEDIA = "(prefers-color-scheme: dark)";
+var isServer = typeof window === "undefined";
+var ThemeContext = createContext(void 0);
+var saveToLS = (storageKey, value) => {
+  try {
+    localStorage.setItem(storageKey, value);
+  } catch {
+  }
+};
+var useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};
+var ThemeProvider = (props) => {
+  const context = useContext(ThemeContext);
+  if (context) return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+  return /* @__PURE__ */ jsx(Theme, { ...props });
+};
+var defaultThemes = ["light", "dark", "liquidlight", "liquiddark"];
+var Theme = ({
+  forcedTheme,
+  disableTransitionOnChange = false,
+  enableSystem = false,
+  enableColorScheme = true,
+  storageKey = "theme",
+  themes = defaultThemes,
+  defaultTheme = enableSystem ? "system" : "light",
+  attribute = "class",
+  value,
+  children,
+  nonce,
+  scriptProps
+}) => {
+  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
+  const [resolvedTheme, setResolvedTheme] = useState(
+    () => theme === "system" ? getSystemTheme() : theme
+  );
+  const attrs = !value ? themes : Object.values(value);
+  const applyTheme = useCallback(
+    (theme2) => {
+      let resolved = theme2;
+      if (!resolved) return;
+      if (theme2 === "system" && enableSystem) {
+        resolved = getSystemTheme();
+      }
+      const name = value ? value[resolved] : resolved;
+      const enable = disableTransitionOnChange ? disableAnimation(nonce) : null;
+      const d = document.documentElement;
+      const handleAttribute = (attr) => {
+        if (attr === "class") {
+          d.classList.remove(...attrs);
+          if (name) d.classList.add(name);
+        } else if (attr.startsWith("data-")) {
+          if (name) {
+            d.setAttribute(attr, name);
+          } else {
+            d.removeAttribute(attr);
+          }
+        }
+      };
+      if (Array.isArray(attribute)) attribute.forEach(handleAttribute);
+      else handleAttribute(attribute);
+      if (enableColorScheme) {
+        let fallback = "light";
+        const c = colorSchemes.reduce(
+          (schema, currentValue) => {
+            if (defaultTheme.includes(currentValue)) {
+              fallback = currentValue;
+            }
+            if (resolved.includes(currentValue)) {
+              return currentValue;
+            }
+            return schema;
+          },
+          void 0
+        );
+        d.style.colorScheme = c ?? fallback;
+      }
+      enable == null ? void 0 : enable();
+    },
+    [
+      attribute,
+      attrs,
+      defaultTheme,
+      disableTransitionOnChange,
+      enableColorScheme,
+      enableSystem,
+      nonce,
+      value
+    ]
+  );
+  const setTheme = useCallback(
+    (value2) => {
+      if (typeof value2 === "function") {
+        setThemeState((prevTheme) => {
+          const newTheme = value2(prevTheme);
+          saveToLS(storageKey, newTheme);
+          return newTheme;
+        });
+      } else {
+        setThemeState(value2);
+        saveToLS(storageKey, value2);
+      }
+    },
+    [storageKey]
+  );
+  const handleMediaQuery = useCallback(
+    (e) => {
+      const resolved = getSystemTheme(e);
+      setResolvedTheme(resolved);
+      if (theme === "system" && enableSystem && !forcedTheme) {
+        applyTheme("system");
+      }
+    },
+    [theme, enableSystem, forcedTheme, applyTheme]
+  );
+  useEffect(() => {
+    const media = window.matchMedia(MEDIA);
+    media.addListener(handleMediaQuery);
+    handleMediaQuery(media);
+    return () => media.removeListener(handleMediaQuery);
+  }, [handleMediaQuery]);
+  useEffect(() => {
+    const handleStorage = (e) => {
+      if (e.key !== storageKey) {
+        return;
+      }
+      if (!e.newValue) {
+        setTheme(defaultTheme);
+      } else {
+        setThemeState(e.newValue);
+      }
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [defaultTheme, setTheme, storageKey]);
+  useEffect(() => {
+    applyTheme(forcedTheme ?? theme);
+  }, [applyTheme, forcedTheme, theme]);
+  return /* @__PURE__ */ jsxs(
+    ThemeContext.Provider,
+    {
+      value: useMemo(
+        () => ({
+          theme,
+          setTheme,
+          forcedTheme,
+          resolvedTheme: theme === "system" ? resolvedTheme : theme,
+          themes: enableSystem ? [...themes, "system"] : themes,
+          systemTheme: enableSystem ? resolvedTheme : void 0
+        }),
+        [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes]
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          ThemeScript,
+          {
+            ...{
+              forcedTheme,
+              storageKey,
+              attribute,
+              enableSystem,
+              enableColorScheme,
+              defaultTheme,
+              value,
+              themes,
+              nonce,
+              scriptProps
+            }
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var getTheme = (key, fallback) => {
+  if (isServer) return fallback;
+  let theme;
+  try {
+    theme = localStorage.getItem(key) || void 0;
+  } catch {
+  }
+  return theme || fallback;
+};
+var disableAnimation = (nonce) => {
+  const css = document.createElement("style");
+  if (nonce) css.setAttribute("nonce", nonce);
+  css.appendChild(
+    document.createTextNode(
+      `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
+    )
+  );
+  document.head.appendChild(css);
+  return () => {
+    (() => window.getComputedStyle(document.body))();
+    setTimeout(() => {
+      document.head.removeChild(css);
+    }, 1);
+  };
+};
+var getSystemTheme = (e) => {
+  if (!e) e = window.matchMedia(MEDIA);
+  const isDark = e.matches;
+  return isDark ? "dark" : "light";
+};
+
+export { ThemeProvider, useTheme };

package/dist/{chunk-OO7LYJQL.js → chunk-QSW45JZH.js}

@@ -3,7 +3,7 @@
 var chunkEFIRD3FN_js = require('./chunk-EFIRD3FN.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var PACKAGE_VERSION = "0.0.24" ;
+var PACKAGE_VERSION = "0.0.25" ;
 var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
 function VersionBadge({
   className,

package/dist/chunk-UOFJLQ72.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/chunk-ZTNXAV64.js

@@ -0,0 +1,217 @@
+'use strict';
+
+var chunkCCGCEN7Z_js = require('./chunk-CCGCEN7Z.js');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var colorSchemes = ["light", "dark"];
+var MEDIA = "(prefers-color-scheme: dark)";
+var isServer = typeof window === "undefined";
+var ThemeContext = react.createContext(void 0);
+var saveToLS = (storageKey, value) => {
+  try {
+    localStorage.setItem(storageKey, value);
+  } catch {
+  }
+};
+var useTheme = () => {
+  const context = react.useContext(ThemeContext);
+  if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};
+var ThemeProvider = (props) => {
+  const context = react.useContext(ThemeContext);
+  if (context) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Theme, { ...props });
+};
+var defaultThemes = ["light", "dark", "liquidlight", "liquiddark"];
+var Theme = ({
+  forcedTheme,
+  disableTransitionOnChange = false,
+  enableSystem = false,
+  enableColorScheme = true,
+  storageKey = "theme",
+  themes = defaultThemes,
+  defaultTheme = enableSystem ? "system" : "light",
+  attribute = "class",
+  value,
+  children,
+  nonce,
+  scriptProps
+}) => {
+  const [theme, setThemeState] = react.useState(() => getTheme(storageKey, defaultTheme));
+  const [resolvedTheme, setResolvedTheme] = react.useState(
+    () => theme === "system" ? getSystemTheme() : theme
+  );
+  const attrs = !value ? themes : Object.values(value);
+  const applyTheme = react.useCallback(
+    (theme2) => {
+      let resolved = theme2;
+      if (!resolved) return;
+      if (theme2 === "system" && enableSystem) {
+        resolved = getSystemTheme();
+      }
+      const name = value ? value[resolved] : resolved;
+      const enable = disableTransitionOnChange ? disableAnimation(nonce) : null;
+      const d = document.documentElement;
+      const handleAttribute = (attr) => {
+        if (attr === "class") {
+          d.classList.remove(...attrs);
+          if (name) d.classList.add(name);
+        } else if (attr.startsWith("data-")) {
+          if (name) {
+            d.setAttribute(attr, name);
+          } else {
+            d.removeAttribute(attr);
+          }
+        }
+      };
+      if (Array.isArray(attribute)) attribute.forEach(handleAttribute);
+      else handleAttribute(attribute);
+      if (enableColorScheme) {
+        let fallback = "light";
+        const c = colorSchemes.reduce(
+          (schema, currentValue) => {
+            if (defaultTheme.includes(currentValue)) {
+              fallback = currentValue;
+            }
+            if (resolved.includes(currentValue)) {
+              return currentValue;
+            }
+            return schema;
+          },
+          void 0
+        );
+        d.style.colorScheme = c ?? fallback;
+      }
+      enable == null ? void 0 : enable();
+    },
+    [
+      attribute,
+      attrs,
+      defaultTheme,
+      disableTransitionOnChange,
+      enableColorScheme,
+      enableSystem,
+      nonce,
+      value
+    ]
+  );
+  const setTheme = react.useCallback(
+    (value2) => {
+      if (typeof value2 === "function") {
+        setThemeState((prevTheme) => {
+          const newTheme = value2(prevTheme);
+          saveToLS(storageKey, newTheme);
+          return newTheme;
+        });
+      } else {
+        setThemeState(value2);
+        saveToLS(storageKey, value2);
+      }
+    },
+    [storageKey]
+  );
+  const handleMediaQuery = react.useCallback(
+    (e) => {
+      const resolved = getSystemTheme(e);
+      setResolvedTheme(resolved);
+      if (theme === "system" && enableSystem && !forcedTheme) {
+        applyTheme("system");
+      }
+    },
+    [theme, enableSystem, forcedTheme, applyTheme]
+  );
+  react.useEffect(() => {
+    const media = window.matchMedia(MEDIA);
+    media.addListener(handleMediaQuery);
+    handleMediaQuery(media);
+    return () => media.removeListener(handleMediaQuery);
+  }, [handleMediaQuery]);
+  react.useEffect(() => {
+    const handleStorage = (e) => {
+      if (e.key !== storageKey) {
+        return;
+      }
+      if (!e.newValue) {
+        setTheme(defaultTheme);
+      } else {
+        setThemeState(e.newValue);
+      }
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [defaultTheme, setTheme, storageKey]);
+  react.useEffect(() => {
+    applyTheme(forcedTheme ?? theme);
+  }, [applyTheme, forcedTheme, theme]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ThemeContext.Provider,
+    {
+      value: react.useMemo(
+        () => ({
+          theme,
+          setTheme,
+          forcedTheme,
+          resolvedTheme: theme === "system" ? resolvedTheme : theme,
+          themes: enableSystem ? [...themes, "system"] : themes,
+          systemTheme: enableSystem ? resolvedTheme : void 0
+        }),
+        [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes]
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkCCGCEN7Z_js.ThemeScript,
+          {
+            ...{
+              forcedTheme,
+              storageKey,
+              attribute,
+              enableSystem,
+              enableColorScheme,
+              defaultTheme,
+              value,
+              themes,
+              nonce,
+              scriptProps
+            }
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var getTheme = (key, fallback) => {
+  if (isServer) return fallback;
+  let theme;
+  try {
+    theme = localStorage.getItem(key) || void 0;
+  } catch {
+  }
+  return theme || fallback;
+};
+var disableAnimation = (nonce) => {
+  const css = document.createElement("style");
+  if (nonce) css.setAttribute("nonce", nonce);
+  css.appendChild(
+    document.createTextNode(
+      `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
+    )
+  );
+  document.head.appendChild(css);
+  return () => {
+    (() => window.getComputedStyle(document.body))();
+    setTimeout(() => {
+      document.head.removeChild(css);
+    }, 1);
+  };
+};
+var getSystemTheme = (e) => {
+  if (!e) e = window.matchMedia(MEDIA);
+  const isDark = e.matches;
+  return isDark ? "dark" : "light";
+};
+
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;