@vuer-ai/vuer-uikit 0.0.102 → 0.0.103

package/src/ui/layouts/dock-layout/DockLayoutView.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode } from "react";
 
 import {
   DockLayout,
@@ -36,93 +36,17 @@ export const DockLayoutView = ({
   bottomClassName,
   contentClassName,
 }: DockLayoutViewProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const leftRef = useRef<HTMLDivElement>(null);
-  const rightRef = useRef<HTMLDivElement>(null);
-  const bottomRef = useRef<HTMLDivElement>(null);
-  const measureRef = useRef<HTMLDivElement>(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 (
-    <DockLayout ref={containerRef} className={className}>
-      {bottom && (
-        <div
-          ref={measureRef}
-          className="pointer-events-none absolute -top-[9999px] left-0 opacity-0"
-          style={{ width: "max-content" }}
-        >
-          <DockLayoutBottom className={bottomClassName}>{bottom}</DockLayoutBottom>
-        </div>
-      )}
-
+    <DockLayout className={className}>
       {top && <DockLayoutTop className={topClassName}>{top}</DockLayoutTop>}
 
       <div className="flex flex-1 overflow-hidden">
-        {left && (
-          <div ref={leftRef}>
-            <DockLayoutLeft className={leftClassName}>{left}</DockLayoutLeft>
-          </div>
-        )}
-
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
-
-          {bottom && !isBottomFullWidth && (
-            <div className="flex justify-center">
-              <DockLayoutBottom ref={bottomRef} className={bottomClassName}>
-                {bottom}
-              </DockLayoutBottom>
-            </div>
-          )}
-        </div>
-
-        {right && (
-          <div ref={rightRef}>
-            <DockLayoutRight className={rightClassName}>{right}</DockLayoutRight>
-          </div>
-        )}
+        {left && <DockLayoutLeft className={leftClassName}>{left}</DockLayoutLeft>}
+        <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
+        {right && <DockLayoutRight className={rightClassName}>{right}</DockLayoutRight>}
       </div>
 
-      {bottom && isBottomFullWidth && (
-        <DockLayoutBottom ref={bottomRef} className={bottomClassName}>
-          {bottom}
-        </DockLayoutBottom>
-      )}
+      {bottom && <DockLayoutBottom className={bottomClassName}>{bottom}</DockLayoutBottom>}
     </DockLayout>
   );
 };

package/src/ui/modal.tsx

@@ -77,7 +77,8 @@ const modalContentVariants = cva([
   "data-[state=open]:fade-in-0",
   "data-[state=closed]:zoom-out-95",
   "data-[state=open]:zoom-in-95",
-  "liquid:liquid-bg",
+  "liquid-dark:liquid-dark-bg",
+  "liquid-light:liquid-light-bg",
 ]);
 
 interface ModalContentProps extends ComponentProps<typeof DialogPrimitive.Content> {

package/src/ui/panel.tsx

@@ -13,7 +13,8 @@ const panelVariants = cva(
     "rounded-uk-lg",
     "bg-bg-primary",
     "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-    "liquid:liquid-bg",
+    "liquid-dark:liquid-dark-bg",
+    "liquid-light:liquid-light-bg",
   ],
   {
     variants: {

package/src/ui/popover.tsx

@@ -74,7 +74,8 @@ function PopoverContentRoot({
           "origin-(--radix-popover-content-transform-origin)",
           "border-none",
           "outline-hidden",
-          "liquid:liquid-bg",
+          "liquid-dark:liquid-dark-bg",
+          "liquid-light:liquid-light-bg",
           className,
         )}
         {...props}
@@ -95,7 +96,8 @@ function PopoverContentFallback({ className, ...props }: ComponentProps<"div">)
         "z-20",
         "border-none",
         "outline-hidden",
-        "liquid:liquid-bg",
+        "liquid-dark:liquid-dark-bg",
+        "liquid-light:liquid-light-bg",
         className,
       )}
       {...props}

package/src/ui/select.tsx

@@ -175,7 +175,8 @@ export function SelectContent({
             "overflow-y-auto",
             "rounded-uk-md",
             "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-            "liquid:liquid-bg",
+            "liquid-dark:liquid-dark-bg",
+            "liquid-light:liquid-light-bg",
             font === "standard" ? "font-sans" : "font-number-input",
           ],
           {

package/src/ui/sheet.tsx

@@ -111,7 +111,7 @@ function SheetContentRoot({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "liquid:liquid-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)] transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)] transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-[340px]",
           side === "left" &&
@@ -146,7 +146,7 @@ function SheetContentFallback({
     <div
       data-slot="sheet-content"
       className={cn(
-        "liquid:liquid-bg bg-bg-primary p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
         side === "right" && "inset-y-0 right-0 h-full w-[340px]",
         side === "left" && "inset-y-0 left-0 h-full w-[340px]",
         side === "top" && "inset-x-0 top-0 h-auto",

package/src/ui/sidebar.tsx

@@ -222,7 +222,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-bg-primary liquid:liquid-bg group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-uk-lg flex h-full w-full flex-col font-normal group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="bg-bg-primary liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-uk-lg flex h-full w-full flex-col font-normal group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
         >
           {children}
         </div>

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

@@ -30,7 +30,7 @@ export function Toolbar({ className, children, variant = "default", size = "md"
     <div
       className={cn(
         "bg-bg-primary flex items-center gap-2",
-        "liquid:liquid-bg liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        "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",

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-KAA4NEHL.cjs

@@ -1,77 +0,0 @@
-'use strict';
-
-var chunkUULSGVNF_cjs = require('./chunk-UULSGVNF.cjs');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var DockLayoutView = ({
-  left,
-  right,
-  top,
-  bottom,
-  children,
-  className,
-  leftClassName,
-  rightClassName,
-  topClassName,
-  bottomClassName,
-  contentClassName
-}) => {
-  const containerRef = react.useRef(null);
-  const leftRef = react.useRef(null);
-  const rightRef = react.useRef(null);
-  const bottomRef = react.useRef(null);
-  const measureRef = react.useRef(null);
-  const [isBottomFullWidth, setIsBottomFullWidth] = react.useState(false);
-  react.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__ */ jsxRuntime.jsxs(chunkUULSGVNF_cjs.DockLayout, { ref: containerRef, className, children: [
-    bottom && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: measureRef,
-        className: "pointer-events-none absolute -top-[9999px] left-0 opacity-0",
-        style: { width: "max-content" },
-        children: /* @__PURE__ */ jsxRuntime.jsx(chunkUULSGVNF_cjs.DockLayoutBottom, { className: bottomClassName, children: bottom })
-      }
-    ),
-    top && /* @__PURE__ */ jsxRuntime.jsx(chunkUULSGVNF_cjs.DockLayoutTop, { className: topClassName, children: top }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
-      left && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: leftRef, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUULSGVNF_cjs.DockLayoutLeft, { className: leftClassName, children: left }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkUULSGVNF_cjs.DockLayoutContent, { className: contentClassName, children }),
-        bottom && !isBottomFullWidth && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunkUULSGVNF_cjs.DockLayoutBottom, { ref: bottomRef, className: bottomClassName, children: bottom }) })
-      ] }),
-      right && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rightRef, children: /* @__PURE__ */ jsxRuntime.jsx(chunkUULSGVNF_cjs.DockLayoutRight, { className: rightClassName, children: right }) })
-    ] }),
-    bottom && isBottomFullWidth && /* @__PURE__ */ jsxRuntime.jsx(chunkUULSGVNF_cjs.DockLayoutBottom, { ref: bottomRef, className: bottomClassName, children: bottom })
-  ] });
-};
-
-exports.DockLayoutView = DockLayoutView;

package/dist/{chunk-6DYF6WO6.mjs → chunk-FBAOEFDU.mjs}

@@ -1,5 +1,5 @@
-import { signInHandler } from './chunk-7KQXX7QB.mjs';
 import { useVuerAuth } from './chunk-3IVDCAFM.mjs';
+import { signInHandler } from './chunk-7KQXX7QB.mjs';
 import { useCallback, useMemo } from 'react';
 
 var useVuerMethod = () => {

package/dist/{chunk-3PDV3ZKD.cjs → chunk-JLWAIMUZ.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkLSKJOUAE_cjs = require('./chunk-LSKJOUAE.cjs');
 var chunk4B44SRRP_cjs = require('./chunk-4B44SRRP.cjs');
+var chunkLSKJOUAE_cjs = require('./chunk-LSKJOUAE.cjs');
 var react = require('react');
 
 var useVuerMethod = () => {