@vuer-ai/vuer-uikit 0.0.102 → 0.0.104

package/dist/ui/waterfall/index.cjs

@@ -1,24 +1,24 @@
 'use strict';
 
-var chunkJMFTHHHE_cjs = require('../../chunk-JMFTHHHE.cjs');
+var chunk7RHQ6DVU_cjs = require('../../chunk-7RHQ6DVU.cjs');
 require('../../chunk-WJL5HMO6.cjs');
 require('../../chunk-RJ7I6ZQK.cjs');
+require('../../chunk-YXFHJKNW.cjs');
 require('../../chunk-5MNZYCN2.cjs');
 require('../../chunk-Z6UDRPC2.cjs');
 require('../../chunk-YJ6X6T5K.cjs');
+require('../../chunk-G5NT42YF.cjs');
+require('../../chunk-EEGQLTSQ.cjs');
+require('../../chunk-VOTZLQ6J.cjs');
 require('../../chunk-2J75MYQA.cjs');
-require('../../chunk-LP3AGGRK.cjs');
-require('../../chunk-6TSA7KXX.cjs');
+require('../../chunk-UTS56UA5.cjs');
+require('../../chunk-JWVH6R35.cjs');
 require('../../chunk-MVAFOQ67.cjs');
 require('../../chunk-TUYG6BYZ.cjs');
-require('../../chunk-YXFHJKNW.cjs');
 var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
-require('../../chunk-G5NT42YF.cjs');
-require('../../chunk-VOTZLQ6J.cjs');
-require('../../chunk-XG56MLQH.cjs');
+require('../../chunk-5JPYU5A6.cjs');
 require('../../chunk-HAVTMZR3.cjs');
-require('../../chunk-EEGQLTSQ.cjs');
-require('../../chunk-2CZEFXEW.cjs');
+require('../../chunk-LFSCJLL2.cjs');
 require('../../chunk-LQGXG373.cjs');
 require('../../chunk-JMCH2AFN.cjs');
 require('../../chunk-G5JZGNKY.cjs');
@@ -38,7 +38,7 @@ require('../../chunk-G4FJGNY5.cjs');
 
 Object.defineProperty(exports, "Waterfall", {
   enumerable: true,
-  get: function () { return chunkJMFTHHHE_cjs.Waterfall; }
+  get: function () { return chunk7RHQ6DVU_cjs.Waterfall; }
 });
 Object.defineProperty(exports, "TOTAL_DURATION", {
   enumerable: true,

package/dist/ui/waterfall/index.mjs

@@ -1,22 +1,22 @@
-export { Waterfall } from '../../chunk-7P563TWH.mjs';
+export { Waterfall } from '../../chunk-K2OC2HWQ.mjs';
 import '../../chunk-JWKOW2OV.mjs';
 import '../../chunk-VPQ5SSY3.mjs';
+import '../../chunk-CO6EASQO.mjs';
 import '../../chunk-IR334P7F.mjs';
 import '../../chunk-CIPI2V54.mjs';
 import '../../chunk-WPDU2YYR.mjs';
+import '../../chunk-HVVT3D2T.mjs';
+import '../../chunk-PC5DHSC4.mjs';
+import '../../chunk-HTAFERCZ.mjs';
 import '../../chunk-SA5WKLYB.mjs';
-import '../../chunk-5EXV5EWF.mjs';
-import '../../chunk-K22BEXUA.mjs';
+import '../../chunk-D5H4XX6Q.mjs';
+import '../../chunk-JVV7W3TP.mjs';
 import '../../chunk-OC4HRPZU.mjs';
 import '../../chunk-N6DSPSMM.mjs';
-import '../../chunk-CO6EASQO.mjs';
 export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
-import '../../chunk-HVVT3D2T.mjs';
-import '../../chunk-HTAFERCZ.mjs';
-import '../../chunk-EI5ZOFWX.mjs';
+import '../../chunk-SUEFWFPX.mjs';
 import '../../chunk-VQPJ7TLB.mjs';
-import '../../chunk-PC5DHSC4.mjs';
-import '../../chunk-ZNPI2TYG.mjs';
+import '../../chunk-5MBEK77I.mjs';
 import '../../chunk-LRSDE62T.mjs';
 import '../../chunk-BNDRHLLZ.mjs';
 import '../../chunk-PDOFOJ4P.mjs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuer-ai/vuer-uikit",
   "author": "Ge Yang",
-  "version": "0.0.102",
+  "version": "0.0.104",
   "files": [
     "/dist",
     "/src"

package/src/auth/context/auth-context.ts

@@ -1,13 +1,12 @@
 import { createContext } from "react";
 
-import { BetterAuth, Session } from "../types";
+import { Refetch, UserSession } from "../types";
 
 interface IAuthContext {
   baseURL: string;
-  data: Session | null;
+  data: UserSession | null;
   isPending: boolean;
-  authClient: BetterAuth;
-  refetch: () => void;
+  refetch: Refetch;
 }
 
 const AuthContext = createContext<IAuthContext>(null!);

package/src/auth/handler/get-session.ts

@@ -0,0 +1,17 @@
+import { bearerToken } from "../localstorage-key";
+import { UserSession } from "../types";
+
+const getSession = async (baseURL: string) => {
+  const token = localStorage.getItem(bearerToken) || "";
+  const res = await fetch(`${baseURL}/api/auth/get-session`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    credentials: "include",
+  });
+  const authJWT = res.headers.get("set-auth-jwt");
+  const data = (await res.json()) as UserSession;
+  return { ...data, session: { ...data.session, jwt: authJWT ?? "" } };
+};
+
+export { getSession };

package/src/auth/handler/sign-in-handler.ts

@@ -46,9 +46,8 @@ const sigInWithPopup = async (props: SignInWithPopup, refetch: Refetch): Promise
 
           if (callbackURL) {
             window.location.href = callbackURL;
-          } else {
-            refetch();
           }
+          refetch();
         }
       }
     };

package/src/auth/handler/sign-out-handler.ts

@@ -0,0 +1,13 @@
+import { bearerToken } from "../localstorage-key";
+
+export const signOutHandler = async (baseURL: string) => {
+  const token = localStorage.getItem(bearerToken) || "";
+  const res = await fetch(`${baseURL}/api/auth/sign-out`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    credentials: "include",
+  });
+  return (await res.json()) as { success: boolean };
+};

package/src/auth/hooks/use-vuer-method.ts

@@ -1,20 +1,22 @@
 import { useCallback, useMemo } from "react";
 
 import { signInHandler } from "../handler/sign-in-handler";
-import { BetterAuth, SignInWithOutBaseURLParams } from "../types";
+import { SignInWithOutBaseURLParams, SignOut } from "../types";
 import { useVuerAuth } from "./use-vuer-auth";
+import { signOutHandler } from "../handler/sign-out-handler";
 
 interface UseVuerAuth {
   signIn: (p?: SignInWithOutBaseURLParams) => Promise<string> | void;
-  signOut: ReturnType<BetterAuth["signOut"]>;
+  signOut: SignOut;
 }
 
 const useVuerMethod = (): UseVuerAuth => {
-  const { refetch, authClient, baseURL } = useVuerAuth();
+  const { refetch, baseURL } = useVuerAuth();
 
-  const signOutHandle = useCallback(() => {
-    return authClient.signOut();
-  }, [authClient]);
+  const signOutHandle = useCallback(async () => {
+    await signOutHandler(baseURL);
+    await refetch();
+  }, [baseURL, refetch]);
 
   const signInHandle = useCallback(
     (props?: SignInWithOutBaseURLParams) => {

package/src/auth/localstorage-key.ts

@@ -1,3 +1 @@
 export const bearerToken = "bearer_token" as const;
-
-export const jwtToken = "auth_jwt" as const;

package/src/auth/types.ts

@@ -1,26 +1,9 @@
-import { betterAuth } from "better-auth";
-import { customSessionClient } from "better-auth/client/plugins";
-import { customSession } from "better-auth/plugins";
-import { createAuthClient } from "better-auth/react";
-
-export const auth = betterAuth({
-  plugins: [
-    customSession(async (session) => {
-      return {
-        ...session,
-        session: { ...session.session, sessionToken: "" },
-      };
-    }),
-  ],
-});
-
-export const options = {
-  plugins: [customSessionClient<typeof auth>()],
-};
-
-type BetterAuth = ReturnType<typeof createAuthClient<typeof options>>;
+import { Session, User } from "better-auth";
 
-type Session = BetterAuth["$Infer"]["Session"];
+interface UserSession {
+  user: User;
+  session: Session & { sessionToken: string; jwt: string };
+}
 
 interface SignInWithPopup {
   baseURL: string;
@@ -34,9 +17,9 @@ interface SignInWithRedirect {
   callbackURL: string;
 }
 
-type Refetch = ReturnType<BetterAuth["useSession"]>["refetch"];
+type Refetch = () => Promise<UserSession | null>;
 
-type SignOut = ReturnType<BetterAuth["signOut"]>;
+type SignOut = () => Promise<void>;
 
 type SignInParams = SignInWithPopup | SignInWithRedirect;
 
@@ -45,10 +28,9 @@ type SignInWithOutBaseURLParams =
   | Omit<SignInWithRedirect, "baseURL">;
 
 export type {
-  SignOut,
   Refetch,
-  Session,
-  BetterAuth,
+  SignOut,
+  UserSession,
   SignInParams,
   SignInWithOutBaseURLParams,
   SignInWithPopup,

package/src/auth/vuer-auth-provider.tsx

@@ -1,33 +1,50 @@
-import { PropsWithChildren, useEffect, useMemo, useRef } from "react";
+import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 
 import { AuthContext } from "./context/auth-context";
-import { createClient } from "./handler/create-client";
+import { getSession } from "./handler/get-session";
 import { bearerToken } from "./localstorage-key";
+import { UserSession } from "./types";
 
 interface Props {
   baseURL: string;
 }
 
 export function VuerAuthProvider({ children, baseURL }: PropsWithChildren<Props>) {
-  const authClient = useRef(createClient(baseURL));
+  const [isPending, setIsPending] = useState<boolean>(true);
+  const [session, setSession] = useState<UserSession | null>(null);
 
-  const { data, isPending, refetch } = authClient.current.useSession();
+  const refetchHandle = useCallback(async () => {
+    setIsPending(true);
+    const data = await getSession(baseURL);
+    setSession(data);
+    setIsPending(false);
+    return data;
+  }, [baseURL]);
 
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
     const session = searchParams.get("token");
     if (session) {
       localStorage.setItem(bearerToken, encodeURIComponent(session));
-      refetch();
+      refetchHandle().then(() => console.log("Sign in session"));
       window.history.replaceState({}, "", window.location.pathname);
     }
-  }, [refetch]);
+  }, [refetchHandle]);
+
+  useEffect(() => {
+    refetchHandle().then(() => console.log("Init session"));
+  }, [refetchHandle]);
 
   return (
     <AuthContext.Provider
       value={useMemo(() => {
-        return { data, isPending, refetch, authClient: authClient.current, baseURL };
-      }, [baseURL, data, isPending, refetch])}
+        return {
+          baseURL,
+          isPending,
+          data: session,
+          refetch: refetchHandle,
+        };
+      }, [baseURL, session, isPending, refetchHandle])}
     >
       {children}
     </AuthContext.Provider>

package/src/dial/DialPanel.tsx

@@ -65,7 +65,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
   const renderSchemaInput = (schema: DialSchema) => {
     const { name, dtype, min, max, step, options, tags } = schema;
     const labelPosition = tags?.labelPosition as LabelPositionT;
-    const label = name.charAt(0).toUpperCase() + name.slice(1);
+    const label = schema.label || (name.charAt(0).toUpperCase() + name.slice(1));
 
     // Choose the right input component based on dtype
     switch (dtype) {

package/src/dial/DialProvider.tsx

@@ -23,6 +23,7 @@ export interface DialSchema {
   steps?: number[];
   helpText?: string;
   icon?: string;
+  label?: string;
   tags?: {
     grouping?: string;
     col?: boolean | number;

package/src/styles/theme.css

@@ -1,60 +1,107 @@
 @import "./variables.css";
 
+@custom-variant liquid-dark (&:is(.liquid-dark *));
+@custom-variant liquid-light (&:is(.liquid-light *));
 @custom-variant liquid (&:is(.liquid-dark *, .liquid-light *));
 
-@utility liquid-bg {
+@utility liquid-dark-bg {
   background: linear-gradient(
     147.1deg,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 105.28%
+    rgba(50, 50, 50, 0.6) 0%,
+    rgba(70, 70, 70, 0.6) 105.28%
   ) !important;
   backdrop-filter: blur(20px) !important;
 }
 
-@utility liquid-bg-tooltip-arrow {
-  background: rgba(74, 74, 74, 0.1) !important;
-  backdrop-filter: blur(2px) !important;
+@utility liquid-light-bg {
+  background: linear-gradient(
+    147.1deg,
+    rgba(236, 236, 236, 0.6) 0%,
+    rgba(202, 202, 202, 0.6) 105.28%
+  ) !important;
+  backdrop-filter: blur(20px) !important;
+}
+
+@utility liquid-dark-bg-tooltip-arrow {
+  background: rgba(70, 70, 70, 0.8) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-light-bg-tooltip-arrow {
+  background: rgba(202, 202, 202, 0.8) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-content {
-  background: rgba(74, 74, 74, 0.1) !important;
-  backdrop-filter: blur(2px) !important;
+@utility liquid-dark-bg-tooltip-top {
+  background: linear-gradient(
+    to bottom,
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-top {
+@utility liquid-light-bg-tooltip-top {
   background: linear-gradient(
     to bottom,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 100%
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-bottom {
+@utility liquid-dark-bg-tooltip-bottom {
   background: linear-gradient(
     to top,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 100%
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-left {
+@utility liquid-light-bg-tooltip-bottom {
+  background: linear-gradient(
+    to top,
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-dark-bg-tooltip-left {
+  background: linear-gradient(
+    to right,
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-light-bg-tooltip-left {
   background: linear-gradient(
     to right,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 100%
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-right {
+@utility liquid-dark-bg-tooltip-right {
   background: linear-gradient(
     to left,
-    rgba(172, 172, 172, 0.1),
-    rgba(74, 74, 74, 0.1)
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-light-bg-tooltip-right {
+  background: linear-gradient(
+    to left,
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
 @utility scrollbar-hide {
@@ -70,7 +117,7 @@
   &::-webkit-scrollbar-track {
     background: transparent;
   }
-  
+
   &::-webkit-scrollbar-thumb {
     background: var(--bg-tertiary);
     border-radius: 4px;
@@ -123,8 +170,8 @@
   --radius-uk-lg: calc(var(--radius) + 10px); /* 12px */
   --radius-uk-xl: calc(var(--radius) + 13px); /* 16px */
   /* spacing */
-  --spacing-xxs: calc(var(--spacing) - 2px); /* 2px */
-  --spacing-xs: var(--spacing); /* 4px */
+  --spacing-xxs: calc(var(--spacing) - 3px); /* 2px */
+  --spacing-xs: calc(var(--spacing) - 1px); /* 4px */
   --spacing-sm: calc(var(--spacing) + 2px); /* 6px */
   --spacing-md: calc(var(--spacing) + 4px); /* 8px */
   --spacing-lg: calc(var(--spacing) + 9px); /* 12px */

package/src/ui/badge.tsx

@@ -13,7 +13,7 @@ const badgeVariants = cva(
     "px-md",
     "py-xxs",
     "align-middle",
-    "text-uk-sm",
+    "text-xs",
     "leading-uk-sm",
     "w-fit",
     "whitespace-nowrap",

package/src/ui/card.tsx

@@ -13,7 +13,8 @@ const cardVariants = cva(
     "rounded-uk-lg",
     "bg-bg-primary",
     "liquid: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/drawer.tsx

@@ -64,7 +64,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content bg-bg-primary liquid:liquid-bg p-xl fixed z-50 flex h-auto flex-col shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+          "group/drawer-content bg-bg-primary liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg p-xl fixed z-50 flex h-auto flex-col shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh]",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:pt-0",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-[340px]",

package/src/ui/dropdown.tsx

@@ -54,7 +54,8 @@ function DropdownMenuContent({
             "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",
           ],
           className,
         )}
@@ -335,7 +336,8 @@ function DropdownMenuSubContent({
         "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",
         className,
       )}
       {...props}

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: {