@vuer-ai/vuer-uikit 0.0.101 → 0.0.103

package/src/ui/theme/themeScript.tsx

@@ -1,9 +1,10 @@
 import { memo } from "react";
 
-import { Attribute, ThemeProviderProps } from "./types";
+import { Attribute, BaseTheme, ThemeProviderProps } from "./types";
 
 const themeScript = (
-  defaultTheme: string,
+  defaultBaseTheme: BaseTheme,
+  defaultIsLiquid: boolean,
   storageKey: string,
   attribute: Attribute | Attribute[],
   themes: string[],
@@ -39,66 +40,37 @@ const themeScript = (
     }
   }
 
-  function getSystemTheme() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? "liquid-dark"
-      : "liquid-light";
-  }
-
-  function parseOldTheme(oldTheme: string): { baseTheme: string; isLiquid: boolean } {
-    if (oldTheme === "system") {
-      return { baseTheme: "system", isLiquid: false };
-    }
-    
-    if (oldTheme.startsWith("liquid-")) {
-      const base = oldTheme.replace("liquid-", "");
-      return { baseTheme: base, isLiquid: true };
-    }
-    
-    return { baseTheme: oldTheme, isLiquid: false };
-  }
-
   function computeTheme(baseTheme: string, isLiquid: boolean, systemIsDark: boolean): string {
     let resolvedBase: string;
-    
+
     if (baseTheme === "system") {
       resolvedBase = systemIsDark ? "dark" : "light";
     } else {
       resolvedBase = baseTheme;
     }
-    
+
     return isLiquid ? `liquid-${resolvedBase}` : resolvedBase;
   }
 
   function getStoredState(): { baseTheme: string; isLiquid: boolean } {
     try {
-      // Try to read from new storage format
-      const baseTheme = localStorage.getItem(`${storageKey}-base`);
-      const isLiquid = localStorage.getItem(`${storageKey}-liquid`);
-      
-      if (baseTheme !== null && isLiquid !== null) {
+      const storedBase = localStorage.getItem(`${storageKey}-base`);
+      const storedLiquid = localStorage.getItem(`${storageKey}-liquid`);
+
+      if (storedBase !== null && storedLiquid !== null) {
         return {
-          baseTheme,
-          isLiquid: isLiquid === "true"
+          baseTheme: storedBase,
+          isLiquid: storedLiquid === "true",
         };
       }
-      
-      const oldTheme = localStorage.getItem(storageKey);
-      if (oldTheme) {
-        return parseOldTheme(oldTheme);
-      }
-      
-      const defaultBaseTheme = enableSystem ? "system" : "light";
       return {
         baseTheme: defaultBaseTheme,
-        isLiquid: true
+        isLiquid: defaultIsLiquid,
       };
     } catch {
-      // Default values on error
-      const defaultBaseTheme = enableSystem ? "system" : "light";
       return {
-        baseTheme: defaultBaseTheme,
-        isLiquid: true
+        baseTheme: "system",
+        isLiquid: true,
       };
     }
   }
@@ -107,10 +79,10 @@ const themeScript = (
     updateDOM(forcedTheme);
   } else {
     const { baseTheme, isLiquid } = getStoredState();
-    
+
     const hasStoredBase = localStorage.getItem(`${storageKey}-base`) !== null;
     const hasStoredLiquid = localStorage.getItem(`${storageKey}-liquid`) !== null;
-    
+
     if (!hasStoredBase || !hasStoredLiquid) {
       try {
         if (!hasStoredBase) {
@@ -119,10 +91,11 @@ const themeScript = (
         if (!hasStoredLiquid) {
           localStorage.setItem(`${storageKey}-liquid`, String(isLiquid));
         }
-              } catch {
-        }
+      } catch {
+        // Ignore storage errors
+      }
     }
-    
+
     const systemIsDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const computedTheme = computeTheme(baseTheme, isLiquid, systemIsDark);
     updateDOM(computedTheme);
@@ -132,7 +105,6 @@ const themeScript = (
 interface ThemeScriptProps extends ThemeProviderProps {
   themes: string[];
   storageKey: string;
-  defaultTheme: string;
   attribute: Attribute | Attribute[];
   forcedTheme?: string;
   enableSystem?: boolean;
@@ -148,14 +120,16 @@ const ThemeScript = memo(
     attribute,
     enableSystem,
     enableColorScheme,
-    defaultTheme,
+    defaultBaseTheme,
+    defaultIsLiquid,
     value,
     themes,
     nonce,
     scriptProps,
   }: ThemeScriptProps) => {
     const scriptArgs = JSON.stringify([
-      defaultTheme,
+      defaultBaseTheme,
+      defaultIsLiquid,
       storageKey,
       attribute,
       themes,

package/src/ui/toast.tsx

@@ -19,7 +19,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
   return (
     <Sonner
       toastOptions={{
-        className: "vk-toast liquid:liquid-bg",
+        className: "vk-toast liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg",
         descriptionClassName: "vk-toast-description",
       }}
       {...props}

package/src/ui/toolbar.tsx

@@ -29,13 +29,13 @@ export function Toolbar({ className, children, variant = "default", size = "md"
   return (
     <div
       className={cn(
-        "bg-bg-primary flex items-center gap-2 shadow-sm",
-        "liquid:liquid-bg",
+        "bg-bg-primary flex items-center gap-2",
+        "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
         size === "sm" && "rounded-uk-md p-1.5",
         size === "md" && "rounded-uk-lg p-1.5",
         size === "lg" && "rounded-uk-xl p-1.5",
         variant === "floating" &&
-          "rounded-[var(--radius-uk-md)] bg-white shadow-lg dark:bg-gray-900" &&
+          "rounded-[var(--radius-uk-md)] bg-white dark:bg-gray-900" &&
           (size === "sm" ? "px-1 py-1" : size === "md" ? "px-2 py-2" : "px-3 py-3"),
         className,
       )}

package/src/ui/tooltip.tsx

@@ -97,18 +97,9 @@ function TooltipContent({
   }
 
   const getLiquidBgClass = (side?: string) => {
-    switch (side) {
-      case "top":
-        return "liquid:liquid-bg-tooltip-top";
-      case "bottom":
-        return "liquid:liquid-bg-tooltip-bottom";
-      case "left":
-        return "liquid:liquid-bg-tooltip-left";
-      case "right":
-        return "liquid:liquid-bg-tooltip-right";
-      default:
-        return "liquid:liquid-bg-tooltip-content";
-    }
+    if (side === "top" || side === "bottom" || side === "left" || side === "right")
+      return `liquid-dark:liquid-dark-bg-tooltip-${side} liquid-light:liquid-light-bg-tooltip-${side}`;
+    return "liquid-dark:liquid-dark-bg-tooltip-arrow liquid-light:liquid-light-bg-tooltip-arrow";
   };
 
   return (
@@ -154,7 +145,8 @@ function TooltipContent({
               "h-[9px] w-[15px]",
               "border-none",
               "bg-bg-primary",
-              "liquid:liquid-bg-tooltip-arrow",
+              "liquid-dark:liquid-dark-bg-tooltip-arrow",
+              "liquid-light:liquid-light-bg-tooltip-arrow",
               "relative",
             )}
             style={{

package/src/ui/waterfall/NavigationControls.tsx

@@ -17,7 +17,7 @@ export function NavigationControls({
 }: NavigationControlsProps) {
   return (
     <div className="sticky left-1/2 z-20 w-max">
-      <div className="bg-bg-primary/75 flex items-center gap-2 rounded-full p-1 text-sm shadow-[0_4px_16px_0_var(--color-shadow-secondary)] backdrop-blur-[2px]">
+      <div className="bg-bg-primary/75 liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg flex items-center gap-2 rounded-full p-1 text-sm shadow-[0_4px_16px_0_var(--color-shadow-secondary)] backdrop-blur-[2px]">
         <button
           onClick={() => handlePan("left")}
           className="hover:bg-bg-secondary rounded-full p-1"

package/src/ui/waterfall/Tick.tsx

@@ -38,7 +38,7 @@ export function Tick({ time, label, timeToPercent, zIndex = 10 }: TimelineTickPr
       />
       {/* Label */}
       <div
-        className="bg-bg-primary text-text-secondary rounded-uk-xs text-uk-sm pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 px-1 backdrop-blur-sm"
+        className="bg-bg-primary liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg text-text-secondary rounded-uk-xs text-uk-sm pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 px-1 backdrop-blur-sm"
         style={{
           left: `${clampedCenterPercent}%`,
           zIndex,

package/src/ui/waterfall/index.tsx

@@ -127,8 +127,9 @@ export function Waterfall({
       <SyncScrollProvider>
         <div
           className={cn(
-            "bg-bg-primary text-text-primary rounded-uk-md border-line-primary/50",
-            "mx-auto flex w-full flex-col overflow-hidden border font-sans",
+            "bg-bg-primary liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg",
+            "text-text-primary rounded-uk-md",
+            "mx-auto flex w-full flex-col overflow-hidden font-sans",
             "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
             className,
           )}
@@ -173,7 +174,7 @@ export function Waterfall({
               className="overflow-y-none scrollbar-hide relative flex h-full w-full flex-auto cursor-crosshair flex-col overflow-x-hidden pl-px active:cursor-grabbing"
             >
               {/* Timeline Ruler */}
-              <div className="bg-bg-primary sticky top-0">
+              <div className="sticky top-0">
                 <div className="border-line-primary/50 relative h-8 border-b">
                   {/* Timeline markers */}
                   {ticks.map((marker, ind) => (

package/dist/chunk-5T7MTIHW.mjs

@@ -1,75 +0,0 @@
-import { DockLayout, DockLayoutBottom, DockLayoutTop, DockLayoutLeft, DockLayoutContent, DockLayoutRight } from './chunk-3LO3AM25.mjs';
-import { useRef, useState, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DockLayoutView = ({
-  left,
-  right,
-  top,
-  bottom,
-  children,
-  className,
-  leftClassName,
-  rightClassName,
-  topClassName,
-  bottomClassName,
-  contentClassName
-}) => {
-  const containerRef = useRef(null);
-  const leftRef = useRef(null);
-  const rightRef = useRef(null);
-  const bottomRef = useRef(null);
-  const measureRef = useRef(null);
-  const [isBottomFullWidth, setIsBottomFullWidth] = useState(false);
-  useEffect(() => {
-    const checkBottomWidth = () => {
-      if (!containerRef.current || !bottom || !measureRef.current) return;
-      const containerWidth = containerRef.current.offsetWidth;
-      const leftWidth = leftRef.current?.offsetWidth || 0;
-      const rightWidth = rightRef.current?.offsetWidth || 0;
-      const availableWidth = containerWidth - leftWidth - rightWidth;
-      const bottomActualWidth = measureRef.current.scrollWidth;
-      setIsBottomFullWidth(bottomActualWidth > 0 && availableWidth < bottomActualWidth);
-    };
-    const resizeObserver = new ResizeObserver(checkBottomWidth);
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    if (leftRef.current) {
-      resizeObserver.observe(leftRef.current);
-    }
-    if (rightRef.current) {
-      resizeObserver.observe(rightRef.current);
-    }
-    if (measureRef.current) {
-      resizeObserver.observe(measureRef.current);
-      checkBottomWidth();
-    }
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [bottom, left, right]);
-  return /* @__PURE__ */ jsxs(DockLayout, { ref: containerRef, className, children: [
-    bottom && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: measureRef,
-        className: "pointer-events-none absolute -top-[9999px] left-0 opacity-0",
-        style: { width: "max-content" },
-        children: /* @__PURE__ */ jsx(DockLayoutBottom, { className: bottomClassName, children: bottom })
-      }
-    ),
-    top && /* @__PURE__ */ jsx(DockLayoutTop, { className: topClassName, children: top }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
-      left && /* @__PURE__ */ jsx("div", { ref: leftRef, children: /* @__PURE__ */ jsx(DockLayoutLeft, { className: leftClassName, children: left }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsx(DockLayoutContent, { className: contentClassName, children }),
-        bottom && !isBottomFullWidth && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(DockLayoutBottom, { ref: bottomRef, className: bottomClassName, children: bottom }) })
-      ] }),
-      right && /* @__PURE__ */ jsx("div", { ref: rightRef, children: /* @__PURE__ */ jsx(DockLayoutRight, { className: rightClassName, children: right }) })
-    ] }),
-    bottom && isBottomFullWidth && /* @__PURE__ */ jsx(DockLayoutBottom, { ref: bottomRef, className: bottomClassName, children: bottom })
-  ] });
-};
-
-export { DockLayoutView };

package/dist/chunk-DVKONMS7.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var chunkDREOOKO2_cjs = require('./chunk-DREOOKO2.cjs');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var RadInput = react.forwardRef(function RadInput2({ value = 0, onChange, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkDREOOKO2_cjs.InputNumbers,
-    {
-      ref,
-      value: [value],
-      onValuesChange: (values) => onChange?.(values[0]),
-      suffix: ["rad"],
-      ...props
-    }
-  );
-});
-
-exports.RadInput = RadInput;

package/dist/chunk-GPV4XELL.mjs

@@ -1,18 +0,0 @@
-import { InputNumbers } from './chunk-C4E2MFZB.mjs';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var RadInput = forwardRef(function RadInput2({ value = 0, onChange, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    InputNumbers,
-    {
-      ref,
-      value: [value],
-      onValuesChange: (values) => onChange?.(values[0]),
-      suffix: ["rad"],
-      ...props
-    }
-  );
-});
-
-export { RadInput };

package/dist/chunk-H2GERFBG.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var chunkBMJX3SEO_cjs = require('./chunk-BMJX3SEO.cjs');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var EulerRadInput = react.forwardRef(
-  function EulerRadInput2(props, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(chunkBMJX3SEO_cjs.EulerInput, { ref, unit: "rad", ...props });
-  }
-);
-
-exports.EulerRadInput = EulerRadInput;