@vuer-ai/vuer-uikit 0.0.119 → 0.0.121

package/src/ui/progress.tsx

@@ -1,20 +1,13 @@
-import { type ComponentProps } from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type ComponentProps } from "react";
 
-import { cn } from "../hooks"
+import { cn } from "../hooks";
 
-function Progress({
-  className,
-  value,
-  ...props
-}: ComponentProps<typeof ProgressPrimitive.Root>) {
+function Progress({ className, value, ...props }: ComponentProps<typeof ProgressPrimitive.Root>) {
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn(
-        "bg-bg-secondary relative h-2 w-full overflow-hidden rounded-uk-xl",
-        className
-      )}
+      className={cn("bg-bg-secondary rounded-uk-xl relative h-2 w-full overflow-hidden", className)}
       {...props}
     >
       <ProgressPrimitive.Indicator
@@ -23,7 +16,7 @@ function Progress({
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
-  )
+  );
 }
 
-export { Progress }
+export { Progress };

package/src/ui/separator.tsx

@@ -11,7 +11,7 @@ function Separator({
 }: ComponentProps<typeof SeparatorPrimitive.Root>) {
   return (
     <SeparatorPrimitive.Root
-      data-slot="separator-root"
+      data-slot="separator"
       decorative={decorative}
       orientation={orientation}
       className={cn(

package/src/ui/sheet.tsx

@@ -2,75 +2,29 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
 import { ComponentProps } from "react";
 
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 /**
  * Sheet root using dialog primitives.
  */
-function SheetRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {
+function Sheet({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
-function SheetFallback({ ...props }: ComponentProps<"div">) {
-  return <div data-slot="sheet" {...props} />;
-}
-
-const Sheet = createClientOnlyComponent(SheetRoot, SheetFallback);
-
 /**
  * Trigger element that opens the sheet.
  */
-function SheetTriggerRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
+function SheetTrigger({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
-function SheetTriggerFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-  return (
-    <button data-slot="sheet-trigger" {...props}>
-      {children}
-    </button>
-  );
-}
-
-const SheetTrigger = createClientOnlyComponent(SheetTriggerRoot, SheetTriggerFallback);
-
 /**
  * Close control for the sheet.
  */
-function SheetCloseRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {
-  return (
-    <SheetPrimitive.Close
-      data-slot="sheet-close"
-      className={cn("focus:ring-0 focus:outline-none")}
-      {...props}
-    />
-  );
+function SheetClose({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-function SheetCloseFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-  return (
-    <button data-slot="sheet-close" className={cn("focus:ring-0 focus:outline-none")} {...props}>
-      {children}
-    </button>
-  );
-}
-
-const SheetClose = createClientOnlyComponent(SheetCloseRoot, SheetCloseFallback);
-
 /**
  * Portal for sheet overlay and content.
  */
@@ -97,7 +51,7 @@ function SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimit
 /**
  * Sliding panel content for the sheet.
  */
-function SheetContentRoot({
+function SheetContent({
   className,
   children,
   side = "right",
@@ -111,21 +65,21 @@ function SheetContentRoot({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "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",
+          "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg 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]",
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-[340px]",
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto",
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
           className,
         )}
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-bg-primary focus:ring-bg-mask data-[state=open]:bg-bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
@@ -134,38 +88,6 @@ function SheetContentRoot({
   );
 }
 
-function SheetContentFallback({
-  className,
-  children,
-  side = "right",
-  ...props
-}: ComponentProps<"div"> & {
-  side?: "top" | "right" | "bottom" | "left";
-}) {
-  return (
-    <div
-      data-slot="sheet-content"
-      className={cn(
-        "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",
-        side === "bottom" && "inset-x-0 bottom-0 h-auto",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <button className="text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none">
-        <XIcon className="size-4" />
-        <span className="sr-only">Close</span>
-      </button>
-    </div>
-  );
-}
-
-const SheetContent = createClientOnlyComponent(SheetContentRoot, SheetContentFallback);
-
 /**
  * Header section inside the sheet.
  */
@@ -195,7 +117,7 @@ function SheetFooter({ className, ...props }: ComponentProps<"div">) {
 /**
  * Title text for the sheet.
  */
-function SheetTitleRoot({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
+function SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
@@ -205,22 +127,10 @@ function SheetTitleRoot({ className, ...props }: ComponentProps<typeof SheetPrim
   );
 }
 
-function SheetTitleFallback({ className, ...props }: ComponentProps<"h2">) {
-  return (
-    <h2
-      data-slot="sheet-title"
-      className={cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className)}
-      {...props}
-    />
-  );
-}
-
-const SheetTitle = createClientOnlyComponent(SheetTitleRoot, SheetTitleFallback);
-
 /**
  * Secondary description text for the sheet.
  */
-function SheetDescriptionRoot({
+function SheetDescription({
   className,
   ...props
 }: ComponentProps<typeof SheetPrimitive.Description>) {
@@ -233,18 +143,6 @@ function SheetDescriptionRoot({
   );
 }
 
-function SheetDescriptionFallback({ className, ...props }: ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="sheet-description"
-      className={cn("text-text-secondary text-uk-md leading-uk-md", className)}
-      {...props}
-    />
-  );
-}
-
-const SheetDescription = createClientOnlyComponent(SheetDescriptionRoot, SheetDescriptionFallback);
-
 export {
   Sheet,
   SheetTrigger,

package/src/ui/sidebar.tsx

@@ -2,15 +2,15 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, VariantProps } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 import {
+  ComponentProps,
   createContext,
+  CSSProperties,
+  MouseEvent,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
-  CSSProperties,
-  ComponentProps,
-  MouseEvent,
 } from "react";
 
 import { cn } from "../hooks";
@@ -152,7 +152,10 @@ function Sidebar({
     return (
       <div
         data-slot="sidebar"
-        className={cn("flex h-full w-(--sidebar-width) flex-col", className)}
+        className={cn(
+          "bg-bg-primary text-text-primary flex h-full w-(--sidebar-width) flex-col",
+          className,
+        )}
         {...props}
       >
         {children}
@@ -187,7 +190,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer hidden md:block"
+      className="group peer text-text-primary hidden md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -232,7 +235,7 @@ function Sidebar({
 }
 
 function SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof Button>) {
-  const { toggleSidebar, state } = useSidebar();
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -240,12 +243,7 @@ function SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof
       data-slot="sidebar-trigger"
       variant="ghost"
       icon={true}
-      className={cn(
-        "absolute top-[0px] size-7 transition-[left] duration-200 ease-linear",
-        state === "collapsed" && "left-[2px]",
-        state === "expanded" && "left-[var(--sidebar-width)]",
-        className,
-      )}
+      className={cn("size-7 transition-[left] duration-200 ease-linear", className)}
       onClick={(event: MouseEvent<HTMLButtonElement>) => {
         onClick?.(event);
         toggleSidebar();
@@ -288,7 +286,7 @@ function SidebarInset({ className, ...props }: ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex w-full flex-1 flex-col",
+        "bg-bg-primary relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:rounded-uk-xl md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
@@ -338,7 +336,7 @@ function SidebarSeparator({ className, ...props }: ComponentProps<typeof Separat
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-line-primary", className)}
+      className={cn("bg-line-primary mr-0", className)}
       {...props}
     />
   );
@@ -350,7 +348,7 @@ function SidebarContent({ className, ...props }: ComponentProps<"div">) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        "px-md lgflex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        "px-md flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className,
       )}
       {...props}
@@ -454,17 +452,18 @@ function SidebarMenuItem({ className, ...props }: ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-md overflow-hidden rounde-uk-md text-left text-uk-lg leading-uk-lg outline-hidden ring-sidebar-ring transition-[width,height,padding] text-text-primary focus-visible:ring-2 active:text-text-highlight disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 font-medium group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-md overflow-hidden rounded-uk-md p-2 text-left text-uk-lg leading-uk-lg outline-hidden ring-sidebar-ring transition-[width,height,padding] text-text-primary hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-bg-secondary active:text-text-highlight disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium data-[active=true]:bg-bg-secondary data-[active=true]:text-text-highlight group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg:not([class*='size-'])]:shrink-0",
   {
     variants: {
       variant: {
-        default: "",
-        outline: "",
+        default: "hover:bg-bg-secondary hover:text-secondary",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-bg-tertiary hover:text-text-tertiary hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
         default: "h-[36px] text-uk-lg leading-uk-lg",
         sm: "h-[30px] text-uk-sm leading-uk-sm",
-        lg: "h-[32px] text-uk-lg leading-uk-lg group-data-[collapsible=icon]:p-0!",
+        lg: "h-[32px] text-uk-lg leading-uk-lg px-lg py-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {

package/src/ui/tabs.tsx

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { type ComponentProps, createContext, useContext } from "react";
 
 import { TabsCursorProvider, useTabsCursor } from "../highlight-cursor/tabs-cursor-context";
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 interface TabsContextType {
   size?: "sm" | "base" | "lg";
@@ -29,7 +29,7 @@ interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root> {
  * @param props -
  * @param className -
  * @param size - Control size ("sm" | "base" | "lg"), defaults to "base" */
-function TabsRoot({ className, size = "base", ...props }: TabsProps) {
+function Tabs({ className, size = "base", ...props }: TabsProps) {
   return (
     <TabsContext.Provider value={{ size }}>
       <TabsPrimitive.Root
@@ -41,16 +41,6 @@ function TabsRoot({ className, size = "base", ...props }: TabsProps) {
   );
 }
 
-function TabsFallback({ className, size = "base", ...props }: TabsProps & ComponentProps<"div">) {
-  return (
-    <TabsContext.Provider value={{ size }}>
-      <div data-slot="tabs" className={cn("flex w-full flex-col", className)} {...props} />
-    </TabsContext.Provider>
-  );
-}
-
-const Tabs = createClientOnlyComponent(TabsRoot, TabsFallback);
-
 const tabsListVariants = cva(["inline-flex", "items-center", "justify-center"], {
   variants: {
     size: {
@@ -69,36 +59,38 @@ type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
 /**
  * Container for tab triggers. Emits cursor interactions for visual effects.
  */
-function TabsListRoot({ className, ...props }: TabsListProps) {
-  const { setCursorTarget } = useTabsCursor();
+function TabsList({ className, onMouseLeave, ...props }: TabsListProps) {
   const { size } = useTabsContext();
   return (
     <TabsCursorProvider>
-      <TabsPrimitive.List
-        onMouseLeave={() => setCursorTarget(null)}
-        data-slot="tabs-list"
-        className={cn(tabsListVariants({ size }), "justify-start", className)}
-        {...props}
-      />
+      <TabsListInner className={className} size={size} onMouseLeave={onMouseLeave} {...props} />
     </TabsCursorProvider>
   );
 }
 
-function TabsListFallback({ className, ...props }: TabsListProps & ComponentProps<"div">) {
-  const { size } = useTabsContext();
+function TabsListInner({
+  className,
+  size,
+  onMouseLeave,
+  ...props
+}: TabsListProps & { size?: "sm" | "base" | "lg" }) {
+  const { setCursorTarget } = useTabsCursor();
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    setCursorTarget(null);
+    onMouseLeave?.(e);
+  };
+
   return (
-    <TabsCursorProvider>
-      <div
-        data-slot="tabs-list"
-        className={cn(tabsListVariants({ size }), "justify-start", className)}
-        {...props}
-      />
-    </TabsCursorProvider>
+    <TabsPrimitive.List
+      onMouseLeave={handleMouseLeave}
+      data-slot="tabs-list"
+      className={cn(tabsListVariants({ size }), "justify-start", className)}
+      {...props}
+    />
   );
 }
 
-const TabsList = createClientOnlyComponent(TabsListRoot, TabsListFallback);
-
 const tabsTriggerVariants = cva(
   [
     "inline-flex",
@@ -114,8 +106,9 @@ const tabsTriggerVariants = cva(
     "shrink-0",
     "[&_svg]:shrink-0",
     "outline-none",
-    "text-text-primary",
+    "text-text-secondary",
     "data-[state=active]:bg-bg-secondary",
+    "data-[state=active]:text-text-primary",
     "data-[state=active]:font-medium",
   ],
   {
@@ -137,7 +130,7 @@ type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
 /**
  * Single tab trigger button.
  */
-function TabsTriggerRoot({ className, ...props }: TabsTriggerProps) {
+function TabsTrigger({ className, ...props }: TabsTriggerProps) {
   const { setCursorTarget } = useTabsCursor();
   const { size } = useTabsContext();
   return (
@@ -150,27 +143,12 @@ function TabsTriggerRoot({ className, ...props }: TabsTriggerProps) {
   );
 }
 
-function TabsTriggerFallback({ className, ...props }: TabsTriggerProps & ComponentProps<"button">) {
-  const { setCursorTarget } = useTabsCursor();
-  const { size } = useTabsContext();
-  return (
-    <button
-      onMouseEnter={(e) => setCursorTarget(e.currentTarget)}
-      data-slot="tabs-trigger"
-      className={cn(tabsTriggerVariants({ size }), className)}
-      {...props}
-    />
-  );
-}
-
-const TabsTrigger = createClientOnlyComponent(TabsTriggerRoot, TabsTriggerFallback);
-
 type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
 
 /**
  * Content area for a tab panel.
  */
-function TabsContentRoot({ className, ...props }: TabsContentProps) {
+function TabsContent({ className, ...props }: TabsContentProps) {
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
@@ -180,13 +158,5 @@ function TabsContentRoot({ className, ...props }: TabsContentProps) {
   );
 }
 
-function TabsContentFallback({ className, ...props }: TabsContentProps & ComponentProps<"div">) {
-  return (
-    <div data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
-  );
-}
-
-const TabsContent = createClientOnlyComponent(TabsContentRoot, TabsContentFallback);
-
 export { Tabs, TabsList, TabsTrigger, TabsContent };
 export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };

package/src/ui/theme/ThemeToggles.tsx

@@ -5,7 +5,6 @@ import React, { type ComponentProps } from "react";
 import { Button } from "../button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
 import { useTheme } from "./ThemeProvider";
-import { cn } from "../../hooks";
 
 type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
 
@@ -27,7 +26,7 @@ export const LiquidToggle: React.FC<LiquidToggleProps> = ({ className, ...props
           {isLiquid ? <PanelsTopLeft size={20} /> : <LayoutTemplate size={20} />}
         </Button>
       </TooltipTrigger>
-      <TooltipContent>{isLiquid ? "Dock Menu Panels" : "Floating Menu Panels"}</TooltipContent>
+      <TooltipContent>{isLiquid ? "Dock Layout" : "Liquid Layout"}</TooltipContent>
     </Tooltip>
   );
 };
@@ -63,22 +62,3 @@ export const ThemeColorToggle: React.FC<ThemeColorToggleProps> = (props) => {
     </Button>
   );
 };
-
-type ThemeTogglesProps = {
-  className?: string;
-  liquidToggleProps?: Omit<LiquidToggleProps, "className">;
-  colorToggleProps?: Omit<ThemeColorToggleProps, "className">;
-};
-
-export const ThemeToggles: React.FC<ThemeTogglesProps> = ({
-  className,
-  liquidToggleProps = {},
-  colorToggleProps = {},
-}) => {
-  return (
-    <div className={cn("flex", className)}>
-      <LiquidToggle {...liquidToggleProps} />
-      <ThemeColorToggle {...colorToggleProps} />
-    </div>
-  );
-};

package/src/ui/theme/index.ts

@@ -1,5 +1,5 @@
 export { useTheme, ThemeProvider, defaultThemes, computeTheme } from "./ThemeProvider";
-export { LiquidToggle, ThemeColorToggle, ThemeToggles } from "./ThemeToggles";
+export { LiquidToggle, ThemeColorToggle } from "./ThemeToggles";
 export { ThemeScript } from "./themeScript";
 
 export type {

package/src/ui/toast.tsx

@@ -1,27 +1,26 @@
-import { useEffect, useState } from "react";
-import { Toaster as Sonner, ToasterProps, toast } from "sonner";
+import { CSSProperties } from "react";
+import { toast, Toaster as Sonner, type ToasterProps } from "sonner";
+
+import { useTheme } from "./theme";
 
 /**
  * Client-only Toaster wrapper applying default classes.
  */
-const Toaster = ({ ...props }: ToasterProps) => {
-  const [isClient, setIsClient] = useState(false);
 
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  // Don't render anything during SSR
-  if (!isClient) {
-    return null;
-  }
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { baseTheme = "system" } = useTheme();
 
   return (
     <Sonner
-      toastOptions={{
-        className: "vk-toast liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg",
-        descriptionClassName: "vk-toast-description",
-      }}
+      theme={baseTheme}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--bg-primary)",
+          "--normal-text": "var(--text-primary)",
+          "--normal-border": "var(--bg-secondary)",
+        } as CSSProperties
+      }
       {...props}
     />
   );

package/src/ui/tooltip.tsx

@@ -8,7 +8,6 @@ import { cn } from "../hooks";
  */
 function TooltipProvider({
   delayDuration = 0,
-  children,
   ...props
 }: ComponentProps<typeof TooltipPrimitive.Provider>) {
   return (
@@ -16,32 +15,17 @@ function TooltipProvider({
       data-slot="tooltip-provider"
       delayDuration={delayDuration}
       {...props}
-    >
-      {children}
-    </TooltipPrimitive.Provider>
+    />
   );
 }
 
 /**
  * Wrapper root for a tooltip. Skips tooltip logic during SSR.
  */
-function Tooltip({ children, ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  // During SSR, just render children without tooltip functionality
-  if (!isClient) {
-    return <>{children}</>;
-  }
-
+function Tooltip({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props}>
-        {children}
-      </TooltipPrimitive.Root>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
   );
 }
@@ -50,17 +34,6 @@ function Tooltip({ children, ...props }: ComponentProps<typeof TooltipPrimitive.
  * Element that triggers the tooltip.
  */
 function TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  // During SSR, just render children without tooltip functionality
-  if (!isClient) {
-    return <>{props.children}</>;
-  }
-
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }