@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/dist/chunk-DF7WIFZK.cjs

@@ -0,0 +1,316 @@
+'use strict';
+
+var chunkP6DICGAV_cjs = require('./chunk-P6DICGAV.cjs');
+var chunk6LTCLQH3_cjs = require('./chunk-6LTCLQH3.cjs');
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SPRING_CONFIG = {
+  stiffness: 0.15,
+  // How snappy (higher = faster)
+  damping: 0.75};
+var SQUISH_CONFIG = {
+  maxSquish: 0.15,
+  // Maximum squish amount (0.15 = 15% squish)
+  velocityScale: 8e-3,
+  // How much velocity affects squish
+  recovery: 0.15
+  // How fast squish recovers
+};
+var CursorProvider = ({
+  children,
+  maxOffsetX = 5,
+  maxOffsetY = 20,
+  cursorSize = 20,
+  boundaryThreshold = 4,
+  outerThreshold = 8,
+  cursorClassName,
+  className,
+  as: Component = "div",
+  ...props
+}) => {
+  const [isClient, setIsClient] = react.useState(false);
+  const [isMouseInside, setIsMouseInside] = react.useState(false);
+  const cursorRef = react.useRef(null);
+  const cursorInnerRef = react.useRef(null);
+  const mousePositionRef = react.useRef({ x: 0, y: 0 });
+  const prevMousePositionRef = react.useRef({ x: 0, y: 0 });
+  const hoveredElementIdRef = react.useRef(null);
+  const hoveredElementRef = react.useRef(null);
+  const elementDimensionsRef = react.useRef({ width: 0, height: 0, x: 0, y: 0, right: 0, bottom: 0 });
+  const elementBorderRadiusRef = react.useRef("9999px");
+  const animationFrameRef = react.useRef(null);
+  const springRef = react.useRef({
+    x: 0,
+    y: 0,
+    width: cursorSize,
+    height: cursorSize,
+    velocityX: 0,
+    velocityY: 0,
+    velocityW: 0,
+    velocityH: 0,
+    scaleX: 1,
+    scaleY: 1
+  });
+  const targetRef = react.useRef({
+    x: 0,
+    y: 0,
+    width: cursorSize,
+    height: cursorSize
+  });
+  const [hoveredElementId, setHoveredElementId] = react.useState(null);
+  react.useEffect(() => {
+    setIsClient(true);
+  }, []);
+  const updateTarget = react.useCallback(() => {
+    const mouse = mousePositionRef.current;
+    const dims = elementDimensionsRef.current;
+    const isHovering = hoveredElementIdRef.current !== null;
+    if (isHovering && dims.width > 0) {
+      const distFromLeft = mouse.x - dims.x;
+      const distFromRight = dims.x + dims.width - mouse.x;
+      const distFromTop = mouse.y - dims.y;
+      const distFromBottom = dims.y + dims.height - mouse.y;
+      const totalThreshold = boundaryThreshold + outerThreshold;
+      let offsetX = 0;
+      let offsetY = 0;
+      if (distFromLeft < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromLeft) / totalThreshold);
+        offsetX = -maxOffsetX * progress;
+      } else if (distFromRight < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromRight) / totalThreshold);
+        offsetX = maxOffsetX * progress;
+      }
+      if (distFromTop < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromTop) / totalThreshold);
+        offsetY = -maxOffsetY * progress;
+      } else if (distFromBottom < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromBottom) / totalThreshold);
+        offsetY = maxOffsetY * progress;
+      }
+      targetRef.current = {
+        x: dims.x + offsetX,
+        y: dims.y + offsetY,
+        width: dims.width,
+        height: dims.height
+      };
+    } else {
+      targetRef.current = {
+        x: mouse.x - cursorSize / 2,
+        y: mouse.y - cursorSize / 2,
+        width: cursorSize,
+        height: cursorSize
+      };
+    }
+  }, [cursorSize, maxOffsetX, maxOffsetY, boundaryThreshold, outerThreshold]);
+  const animate = react.useCallback(() => {
+    const cursor = cursorRef.current;
+    const cursorInner = cursorInnerRef.current;
+    if (!cursor || !cursorInner) {
+      animationFrameRef.current = requestAnimationFrame(animate);
+      return;
+    }
+    const spring = springRef.current;
+    const target = targetRef.current;
+    const { stiffness, damping } = SPRING_CONFIG;
+    const mouse = mousePositionRef.current;
+    const prevMouse = prevMousePositionRef.current;
+    const mouseVelocityX = mouse.x - prevMouse.x;
+    const mouseVelocityY = mouse.y - prevMouse.y;
+    prevMousePositionRef.current = { ...mouse };
+    const forceX = (target.x - spring.x) * stiffness;
+    const forceY = (target.y - spring.y) * stiffness;
+    spring.velocityX = (spring.velocityX + forceX) * damping;
+    spring.velocityY = (spring.velocityY + forceY) * damping;
+    spring.x += spring.velocityX;
+    spring.y += spring.velocityY;
+    const forceW = (target.width - spring.width) * stiffness;
+    const forceH = (target.height - spring.height) * stiffness;
+    spring.velocityW = (spring.velocityW + forceW) * damping;
+    spring.velocityH = (spring.velocityH + forceH) * damping;
+    spring.width += spring.velocityW;
+    spring.height += spring.velocityH;
+    const targetScaleX = 1 - Math.abs(mouseVelocityY) * SQUISH_CONFIG.velocityScale;
+    const targetScaleY = 1 - Math.abs(mouseVelocityX) * SQUISH_CONFIG.velocityScale;
+    const clampedTargetScaleX = Math.max(1 - SQUISH_CONFIG.maxSquish, Math.min(1, targetScaleX));
+    const clampedTargetScaleY = Math.max(1 - SQUISH_CONFIG.maxSquish, Math.min(1, targetScaleY));
+    spring.scaleX += (clampedTargetScaleX - spring.scaleX) * SQUISH_CONFIG.recovery;
+    spring.scaleY += (clampedTargetScaleY - spring.scaleY) * SQUISH_CONFIG.recovery;
+    const bounceSquishX = 1 - Math.abs(spring.velocityY) * 0.02;
+    const bounceSquishY = 1 - Math.abs(spring.velocityX) * 0.02;
+    const finalScaleX = Math.max(0.85, spring.scaleX * bounceSquishX);
+    const finalScaleY = Math.max(0.85, spring.scaleY * bounceSquishY);
+    cursor.style.transform = `translate3d(${spring.x}px, ${spring.y}px, 0)`;
+    cursor.style.width = `${spring.width}px`;
+    cursor.style.height = `${spring.height}px`;
+    cursorInner.style.transform = `scale(${finalScaleX}, ${finalScaleY})`;
+    const isHovering = hoveredElementIdRef.current !== null;
+    if (isHovering) {
+      cursorInner.style.borderRadius = elementBorderRadiusRef.current;
+    } else {
+      cursorInner.style.borderRadius = "9999px";
+    }
+    animationFrameRef.current = requestAnimationFrame(animate);
+  }, []);
+  react.useEffect(() => {
+    if (!isClient) return;
+    animationFrameRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [isClient, animate]);
+  react.useEffect(() => {
+    if (!isClient) return;
+    const handleMouseMove = (e) => {
+      mousePositionRef.current = { x: e.clientX, y: e.clientY };
+      updateTarget();
+    };
+    document.addEventListener("mousemove", handleMouseMove, { passive: true });
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [isClient, updateTarget]);
+  const handleMouseEnter = react.useCallback(() => {
+    setIsMouseInside(true);
+    const mouse = mousePositionRef.current;
+    springRef.current.x = mouse.x - cursorSize / 2;
+    springRef.current.y = mouse.y - cursorSize / 2;
+    updateTarget();
+  }, [cursorSize, updateTarget]);
+  const handleMouseLeave = react.useCallback(() => {
+    setIsMouseInside(false);
+    hoveredElementIdRef.current = null;
+    hoveredElementRef.current = null;
+    setHoveredElementId(null);
+    updateTarget();
+  }, [updateTarget]);
+  const checkMouseInElement = react.useCallback(() => {
+    if (!hoveredElementRef.current || !hoveredElementIdRef.current) return;
+    const rect = hoveredElementRef.current.getBoundingClientRect();
+    const mouse = mousePositionRef.current;
+    elementDimensionsRef.current = {
+      width: rect.width,
+      height: rect.height,
+      x: rect.left,
+      y: rect.top,
+      right: rect.right,
+      bottom: rect.bottom
+    };
+    const isInside = mouse.x >= rect.left && mouse.x <= rect.right && mouse.y >= rect.top && mouse.y <= rect.bottom;
+    if (!isInside) {
+      hoveredElementIdRef.current = null;
+      hoveredElementRef.current = null;
+      setHoveredElementId(null);
+    }
+    updateTarget();
+  }, [updateTarget]);
+  react.useEffect(() => {
+    if (!isClient) return;
+    const handleScroll = () => checkMouseInElement();
+    document.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+    return () => document.removeEventListener("scroll", handleScroll, { capture: true });
+  }, [checkMouseInElement, isClient]);
+  const registerHoveredElement = react.useCallback(
+    (id, dimensions, element) => {
+      hoveredElementIdRef.current = id;
+      elementDimensionsRef.current = {
+        width: dimensions.width,
+        height: dimensions.height,
+        x: dimensions.left,
+        y: dimensions.top,
+        right: dimensions.right,
+        bottom: dimensions.bottom
+      };
+      if (element) {
+        hoveredElementRef.current = element;
+        const computedStyle = window.getComputedStyle(element);
+        elementBorderRadiusRef.current = computedStyle.borderRadius || "8px";
+      }
+      setHoveredElementId(id);
+      updateTarget();
+    },
+    [updateTarget]
+  );
+  const unregisterHoveredElement = react.useCallback(() => {
+    hoveredElementIdRef.current = null;
+    hoveredElementRef.current = null;
+    elementBorderRadiusRef.current = "9999px";
+    setHoveredElementId(null);
+    updateTarget();
+  }, [updateTarget]);
+  const updateElementDimensions = react.useCallback(
+    (dimensions) => {
+      if (hoveredElementIdRef.current) {
+        elementDimensionsRef.current = {
+          width: dimensions.width,
+          height: dimensions.height,
+          x: dimensions.left,
+          y: dimensions.top,
+          right: dimensions.right,
+          bottom: dimensions.bottom
+        };
+        updateTarget();
+      }
+    },
+    [updateTarget]
+  );
+  const contextValue = react.useMemo(
+    () => ({
+      mousePosition: mousePositionRef.current,
+      hoveredElementId,
+      elementDimensions: elementDimensionsRef.current,
+      registerHoveredElement,
+      unregisterHoveredElement,
+      updateElementDimensions
+    }),
+    [hoveredElementId, registerHoveredElement, unregisterHoveredElement, updateElementDimensions]
+  );
+  const cursorElement = isClient && /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: cursorRef,
+      className: "pointer-events-none fixed z-50",
+      style: {
+        left: 0,
+        top: 0,
+        width: cursorSize,
+        height: cursorSize,
+        display: isMouseInside ? "block" : "none",
+        willChange: "transform, width, height"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: cursorInnerRef,
+          className: chunk6LTCLQH3_cjs.cn("h-full w-full border border-white/50", cursorClassName),
+          style: {
+            backgroundColor: "rgba(156, 163, 175, 0.2)",
+            boxShadow: "0 0 25px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5)",
+            borderRadius: "9999px",
+            transformOrigin: "center center"
+          }
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isClient && typeof document !== "undefined" && document.body && reactDom.createPortal(cursorElement, document.body),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkP6DICGAV_cjs.CursorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ...props,
+        className: chunk6LTCLQH3_cjs.cn(className),
+        style: {
+          cursor: isMouseInside && !hoveredElementId ? "none" : "auto",
+          ...props.style
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children
+      }
+    ) })
+  ] });
+};
+
+exports.CursorProvider = CursorProvider;

package/dist/chunk-DKLVWYTC.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+var chunkXIDCYS6G_cjs = require('./chunk-XIDCYS6G.cjs');
+var chunkNIACIZWY_cjs = require('./chunk-NIACIZWY.cjs');
+var chunkR22VW3EK_cjs = require('./chunk-R22VW3EK.cjs');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var LiquidToggle = ({ className, ...props }) => {
+  const { isLiquid, toggleLiquid } = chunkXIDCYS6G_cjs.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkNIACIZWY_cjs.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkNIACIZWY_cjs.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      chunkR22VW3EK_cjs.Button,
+      {
+        icon: true,
+        variant: "ghost",
+        "aria-label": `Toggle liquid theme: ${isLiquid ? "on" : "off"}`,
+        ...props,
+        onClick: toggleLiquid,
+        className,
+        children: isLiquid ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelsTopLeft, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { size: 20 })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkNIACIZWY_cjs.TooltipContent, { children: isLiquid ? "Dock Layout" : "Liquid Layout" })
+  ] });
+};
+var QUICK_TOGGLE_TIMEOUT = 1500;
+var ThemeColorToggle = (props) => {
+  const { baseTheme, setBaseTheme, resolvedTheme } = chunkXIDCYS6G_cjs.useTheme();
+  const lastClickRef = react.useRef(0);
+  const isDark = resolvedTheme?.includes("dark");
+  const isSystem = baseTheme === "system";
+  const handleThemeChange = () => {
+    const now = Date.now();
+    const timeSinceLastClick = now - lastClickRef.current;
+    lastClickRef.current = now;
+    const isQuickToggle = timeSinceLastClick < QUICK_TOGGLE_TIMEOUT;
+    if (isQuickToggle) {
+      if (baseTheme === "light") {
+        setBaseTheme("dark");
+      } else if (baseTheme === "dark") {
+        setBaseTheme("system");
+      } else {
+        setBaseTheme("light");
+      }
+    } else {
+      if (baseTheme === "system") {
+        setBaseTheme(isDark ? "light" : "dark");
+      } else if (baseTheme === "light") {
+        setBaseTheme("dark");
+      } else {
+        setBaseTheme("light");
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkR22VW3EK_cjs.Button,
+    {
+      icon: true,
+      variant: "ghost",
+      "aria-label": `Current theme: ${isSystem ? "system" : isDark ? "dark" : "light"}`,
+      ...props,
+      onClick: handleThemeChange,
+      children: isSystem ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SunMoon, { size: 24 }) : isDark ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { size: 24 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { size: 24 })
+    }
+  );
+};
+
+exports.LiquidToggle = LiquidToggle;
+exports.ThemeColorToggle = ThemeColorToggle;

package/dist/chunk-DKWLF3KW.mjs

@@ -0,0 +1,149 @@
+import { useRef, useMemo, useCallback } from 'react';
+
+// src/ui/virtual-list/useVirtualList.ts
+function findStartIndex(measurements, itemCount, scrollTop, itemHeight, estimatedItemHeight) {
+  if (itemCount === 0) return 0;
+  if (typeof itemHeight === "number") {
+    return Math.floor(scrollTop / itemHeight);
+  }
+  let low = 0;
+  let high = itemCount - 1;
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const measurement = measurements.get(mid);
+    const offset = measurement?.offset ?? mid * estimatedItemHeight;
+    if (offset < scrollTop) {
+      low = mid + 1;
+    } else if (offset > scrollTop) {
+      high = mid - 1;
+    } else {
+      return mid;
+    }
+  }
+  return Math.max(0, low - 1);
+}
+function useVirtualList({
+  items,
+  itemHeight,
+  estimatedItemHeight,
+  containerHeight,
+  overscan,
+  scrollTop
+}) {
+  const measurementsRef = useRef(/* @__PURE__ */ new Map());
+  const measurements = measurementsRef.current;
+  const isFixed = typeof itemHeight === "number";
+  const totalHeight = useMemo(() => {
+    if (isFixed) {
+      return items.length * itemHeight;
+    }
+    let height = 0;
+    for (let i = 0; i < items.length; i++) {
+      const measurement = measurements.get(i);
+      height += measurement?.height ?? estimatedItemHeight;
+    }
+    return height;
+  }, [items.length, itemHeight, isFixed, estimatedItemHeight, measurements]);
+  const visibleRange = useMemo(() => {
+    if (items.length === 0) {
+      return { start: 0, end: 0 };
+    }
+    const startIndex = findStartIndex(
+      measurements,
+      items.length,
+      scrollTop,
+      itemHeight,
+      estimatedItemHeight
+    );
+    let endIndex;
+    if (isFixed) {
+      endIndex = Math.min(items.length - 1, Math.ceil((scrollTop + containerHeight) / itemHeight));
+    } else {
+      let accumulatedHeight = 0;
+      endIndex = startIndex;
+      const startMeasurement = measurements.get(startIndex);
+      const startOffset = startMeasurement?.offset ?? startIndex * estimatedItemHeight;
+      accumulatedHeight = startOffset - scrollTop;
+      while (endIndex < items.length - 1 && accumulatedHeight < containerHeight) {
+        const measurement = measurements.get(endIndex);
+        accumulatedHeight += measurement?.height ?? estimatedItemHeight;
+        endIndex++;
+      }
+    }
+    const start = Math.max(0, startIndex - overscan);
+    const end = Math.min(items.length - 1, endIndex + overscan);
+    return { start, end };
+  }, [
+    items.length,
+    scrollTop,
+    containerHeight,
+    overscan,
+    itemHeight,
+    isFixed,
+    estimatedItemHeight,
+    measurements
+  ]);
+  const getItemStyle = useCallback(
+    (index) => {
+      let top;
+      if (isFixed) {
+        top = index * itemHeight;
+      } else {
+        const measurement = measurements.get(index);
+        if (measurement) {
+          top = measurement.offset;
+        } else {
+          let offset = 0;
+          for (let i = 0; i < index; i++) {
+            const m = measurements.get(i);
+            offset += m?.height ?? estimatedItemHeight;
+          }
+          top = offset;
+        }
+      }
+      return {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        transform: `translateY(${top}px)`,
+        ...isFixed && { height: itemHeight }
+      };
+    },
+    [itemHeight, isFixed, estimatedItemHeight, measurements]
+  );
+  const measureItem = useCallback(
+    (index, height) => {
+      const currentMeasurement = measurements.get(index);
+      if (currentMeasurement?.height === height) {
+        return;
+      }
+      let offset = 0;
+      for (let i = 0; i < index; i++) {
+        const m = measurements.get(i);
+        offset += m?.height ?? estimatedItemHeight;
+      }
+      measurements.set(index, { offset, height });
+      let currentOffset = offset + height;
+      for (let i = index + 1; i < items.length; i++) {
+        const m = measurements.get(i);
+        if (m) {
+          measurements.set(i, { ...m, offset: currentOffset });
+          currentOffset += m.height;
+        } else {
+          break;
+        }
+      }
+    },
+    [items.length, estimatedItemHeight, measurements]
+  );
+  return {
+    visibleRange,
+    totalHeight,
+    getItemStyle,
+    measureItem,
+    measurements
+  };
+}
+
+export { useVirtualList };

package/dist/{chunk-F2LEYFWW.cjs → chunk-DPJPOBUT.cjs}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkCRX2ZCM2_cjs = require('./chunk-CRX2ZCM2.cjs');
+var chunk6LTCLQH3_cjs = require('./chunk-6LTCLQH3.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 var DIAL_PACKAGE_NAME = "@vuer-ai/dial-cli" ;
-var DIAL_PACKAGE_VERSION = "0.0.22" ;
-var DIAL_GIT_HASH = "32b0d39" ;
+var DIAL_PACKAGE_VERSION = "0.0.25" ;
+var DIAL_GIT_HASH = "d89e683" ;
 function DialBadge({
   className,
   package: showPackage = true,
@@ -21,7 +21,7 @@ function DialBadge({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         "rounded-uk-xs rounded-r-uk-xs text-uk-sm bg-icon-withbg inline-flex items-center",
         className
       ),
@@ -43,7 +43,7 @@ function DialBadge({
           "a",
           {
             href: linkable ? npmUrl : void 0,
-            className: chunkCRX2ZCM2_cjs.cn(
+            className: chunk6LTCLQH3_cjs.cn(
               "pl-xs pr-sm py-xxxs rounded-r-uk-xs",
               "bg-alt-primary",
               "text-text-secondary",

package/dist/{chunk-SR3M2R3S.mjs → chunk-DSQPFXYL.mjs}

@@ -1,11 +1,11 @@
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-UQQBUPGF.mjs';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './chunk-LAPOK2L4.mjs';
-import { Skeleton } from './chunk-BXZSWY4N.mjs';
-import { Separator } from './chunk-EXY6WRH4.mjs';
-import { InputRoot } from './chunk-SMXN2KOV.mjs';
-import { Button } from './chunk-4ODJAEOM.mjs';
-import { useIsMobile } from './chunk-XHJDRQD7.mjs';
-import { cn } from './chunk-T66ETI7E.mjs';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-IPMWGCAI.mjs';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './chunk-GHQA7PER.mjs';
+import { Skeleton } from './chunk-QYJZ5KA6.mjs';
+import { Separator } from './chunk-N6KP2HIC.mjs';
+import { InputRoot } from './chunk-HGTL7DFT.mjs';
+import { Button } from './chunk-5JYH7TXY.mjs';
+import { useIsMobile } from './chunk-H3JRYX2U.mjs';
+import { cn } from './chunk-HBEU2PU2.mjs';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { PanelLeftIcon } from 'lucide-react';
@@ -106,7 +106,10 @@ function Sidebar({
       "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
       }
@@ -137,7 +140,7 @@ function Sidebar({
   return /* @__PURE__ */ jsxs(
     "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,
@@ -183,7 +186,7 @@ function Sidebar({
   );
 }
 function SidebarTrigger({ className, onClick, ...props }) {
-  const { toggleSidebar, state } = useSidebar();
+  const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -191,12 +194,7 @@ function SidebarTrigger({ className, onClick, ...props }) {
       "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) => {
         onClick?.(event);
         toggleSidebar();
@@ -239,7 +237,7 @@ function SidebarInset({ className, ...props }) {
     {
       "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
       ),
@@ -289,7 +287,7 @@ function SidebarSeparator({ className, ...props }) {
     {
       "data-slot": "sidebar-separator",
       "data-sidebar": "separator",
-      className: cn("bg-line-primary", className),
+      className: cn("bg-line-primary mr-0", className),
       ...props
     }
   );
@@ -301,7 +299,7 @@ function SidebarContent({ className, ...props }) {
       "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
@@ -402,17 +400,17 @@ function SidebarMenuItem({ className, ...props }) {
   );
 }
 var 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: {