@mvn-ui/react 0.1.2 → 0.1.3

package/dist/index.mjs

@@ -439,10 +439,10 @@ function ButtonGroup({
       "data-orientation": orientation,
       className: cn(
         "inline-flex",
+        className,
         isVertical ? "flex-col" : "flex-row",
         // Join children and normalize border radius so the group looks contiguous
-        isVertical ? "[&>*]:rounded-none [&>*]:-mt-px [&>:first-child]:mt-0 [&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md" : "[&>*]:rounded-none [&>*]:-ml-px [&>:first-child]:ml-0 [&>:first-child]:rounded-l-md [&>:last-child]:rounded-r-md",
-        className
+        isVertical ? "[&>*]:rounded-none [&>*]:-mt-px [&>:first-child]:mt-0 [&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md" : "[&>*]:rounded-none [&>*]:-ml-px [&>:first-child]:ml-0 [&>:first-child]:rounded-l-md [&>:last-child]:rounded-r-md"
       ),
       ...props
     }
@@ -553,8 +553,8 @@ var Input = React49.forwardRef(
           children: label
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none [&_svg]:size-4", children: leftIcon }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+        leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 text-muted-foreground pointer-events-none flex items-center justify-center [&_svg]:size-4", children: leftIcon }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -579,7 +579,7 @@ var Input = React49.forwardRef(
             ...props
           }
         ),
-        (showClearButton || showPasswordToggle || rightIcon) && /* @__PURE__ */ jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
+        (showClearButton || showPasswordToggle || rightIcon) && /* @__PURE__ */ jsxs("div", { className: "absolute right-3 flex items-center gap-1", children: [
           showClearButton && /* @__PURE__ */ jsx(
             "button",
             {
@@ -600,7 +600,7 @@ var Input = React49.forwardRef(
               children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4" })
             }
           ),
-          rightIcon && !showPasswordToggle && !showClearButton && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground [&_svg]:size-4", children: rightIcon })
+          rightIcon && !showPasswordToggle && !showClearButton && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex items-center justify-center [&_svg]:size-4", children: rightIcon })
         ] })
       ] }),
       error && /* @__PURE__ */ jsx(
@@ -1096,7 +1096,7 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/components/ui/switch/index.tsx
 init_utils();
-var Switch = React49.forwardRef(({ className, ...props }, ref) => {
+var Switch = React49.forwardRef(({ className, offNode, onNode, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     SwitchPrimitives.Root,
     {
@@ -1109,13 +1109,17 @@ var Switch = React49.forwardRef(({ className, ...props }, ref) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         SwitchPrimitives.Thumb,
         {
           className: cn(
-            "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+            "group pointer-events-none relative flex items-center justify-center h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
             "data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-          )
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute opacity-0 group-data-[state=checked]:opacity-100 transition-all duration-200", children: onNode }),
+            /* @__PURE__ */ jsx("span", { className: "absolute opacity-100 group-data-[state=checked]:opacity-0 transition-all duration-200", children: offNode })
+          ]
         }
       )
     }
@@ -2921,27 +2925,45 @@ var DialogOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-mvn-gray-200 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-mvn-gray-100", children: [
-          /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "\uB2EB\uAE30" })
-        ] })
-      ]
-    }
-  )
-] }));
+var DialogContent = React49.forwardRef(
+  ({
+    className,
+    children,
+    showClose = true,
+    closeClassName,
+    customClose,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-mvn-gray-200 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showClose && (customClose ? customClose : /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              className: cn(
+                "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-mvn-gray-100",
+                closeClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ))
+        ]
+      }
+    )
+  ] })
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
@@ -2949,10 +2971,7 @@ var DialogHeader = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn(
-      "flex flex-col space-y-1.5 text-left",
-      className
-    ),
+    className: cn("flex flex-col space-y-1.5 text-left", className),
     ...props
   }
 );
@@ -3312,7 +3331,9 @@ var TooltipContent = React49.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md bg-mvn-gray-900 px-3 py-1.5 text-xs text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md bg-mvn-gray-900 px-3 py-1.5 text-xs text-primary-50 dark:bg-primary-50 dark:text-mvn-gray-900 animate-in fade-in-0 zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -4325,7 +4346,7 @@ var TabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ref,
     className: cn(
       "flex items-stretch gap-0 text-muted-foreground",
-      "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-border",
+      "data-[orientation=horizontal]:w-full",
       "data-[orientation=vertical]:w-56 data-[orientation=vertical]:border-r data-[orientation=vertical]:border-border",
       "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shrink-0",
       className
@@ -4342,9 +4363,9 @@ var TabsTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
       "inline-flex min-w-0 items-center justify-center whitespace-nowrap text-sm font-medium",
       "transition-all duration-150 text-muted-foreground hover:text-primary",
       "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "data-[orientation=horizontal]:flex-1 data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3 data-[orientation=horizontal]:border-b-2 data-[orientation=horizontal]:border-border",
+      "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3 data-[orientation=horizontal]:border-b-2 data-[orientation=horizontal]:border-transparent",
       "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-2 data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-border",
-      "data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:bg-muted/60 data-[state=active]:border-primary",
+      "data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:border-primary",
       "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
       className
     ),
@@ -4653,6 +4674,7 @@ var ScrollArea = React49.forwardRef(
     orientation = "vertical",
     scrollbarClassName,
     thumbClassName,
+    type = "auto",
     ...props
   }, ref) => {
     const showVertical = orientation === "vertical" || orientation === "both";
@@ -4661,12 +4683,38 @@ var ScrollArea = React49.forwardRef(
       ScrollAreaPrimitive.Root,
       {
         ref,
+        type,
         className: cn("relative overflow-hidden", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-          showVertical && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical", className: scrollbarClassName, thumbClassName }),
-          showHorizontal && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal", className: scrollbarClassName, thumbClassName }),
+          /* @__PURE__ */ jsx(
+            ScrollAreaPrimitive.Viewport,
+            {
+              className: cn(
+                "h-full w-full rounded-[inherit]",
+                // Fix overflow based on orientation to prevent unwanted scrolling
+                orientation === "vertical" && "!overflow-x-hidden",
+                orientation === "horizontal" && "!overflow-y-hidden"
+              ),
+              children
+            }
+          ),
+          showVertical && /* @__PURE__ */ jsx(
+            ScrollBar,
+            {
+              orientation: "vertical",
+              className: scrollbarClassName,
+              thumbClassName
+            }
+          ),
+          showHorizontal && /* @__PURE__ */ jsx(
+            ScrollBar,
+            {
+              orientation: "horizontal",
+              className: scrollbarClassName,
+              thumbClassName
+            }
+          ),
           /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
         ]
       }
@@ -4690,7 +4738,7 @@ var ScrollBar = React49.forwardRef(({ className, orientation = "vertical", thumb
       ScrollAreaPrimitive.ScrollAreaThumb,
       {
         className: cn(
-          "relative flex-1 rounded-full bg-line-normal hover:bg-line-strong transition-colors",
+          "relative flex-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground transition-colors",
           thumbClassName
         )
       }
@@ -5336,20 +5384,14 @@ var tableVariants = cva("w-full caption-bottom text-sm", {
     size: "default"
   }
 });
-var Table = React49.forwardRef(({ className, variant, size, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
+var Table = React49.forwardRef(({ className, variant, size, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("relative w-full overflow-auto", wrapperClassName), children: /* @__PURE__ */ jsx(
+  "table",
   {
-    className: cn("relative w-full overflow-auto", wrapperClassName),
-    children: /* @__PURE__ */ jsx(
-      "table",
-      {
-        ref,
-        className: cn(tableVariants({ variant, size, className })),
-        ...props
-      }
-    )
+    ref,
+    className: cn(tableVariants({ variant, size, className })),
+    ...props
   }
-));
+) }));
 Table.displayName = "Table";
 var TableHeader = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
@@ -6408,6 +6450,8 @@ function useTableVirtualization({
     });
     return arr;
   }, [rows, expandable]);
+  const virtualRowPointersRef = useRef(virtualRowPointers);
+  virtualRowPointersRef.current = virtualRowPointers;
   const cacheBackingRef = useRef(
     /* @__PURE__ */ new Map()
   );
@@ -6441,6 +6485,12 @@ function useTableVirtualization({
     null
   );
   const measurementIdleRef = useRef(null);
+  const prefixSumCacheRef = useRef({
+    count: 0,
+    itemSizes: [],
+    offsets: [],
+    totalSize: 0
+  });
   const cleanupRaf = useCallback(() => {
     if (debounceTimeoutRef.current != null) {
       clearTimeout(debounceTimeoutRef.current);
@@ -6465,10 +6515,16 @@ function useTableVirtualization({
       measurementIdleRef.current = null;
     }
     measurementQueueRef.current.clear();
+    prefixSumCacheRef.current = {
+      count: 0,
+      itemSizes: [],
+      offsets: [],
+      totalSize: 0
+    };
   }, []);
   const estimateSize = useCallback(
     (index) => {
-      const item = virtualRowPointers[index];
+      const item = virtualRowPointersRef.current[index];
       if (!item) return baseRowEstimateSize;
       const key = item.key;
       if (item.kind === "expanded" && !rows[item.rowIndex]?.getIsExpanded()) {
@@ -6481,21 +6537,23 @@ function useTableVirtualization({
       if (cached != null) return cached;
       return item.kind === "expanded" ? expandContentEstimateSize : baseRowEstimateSize;
     },
-    [virtualRowPointers, baseRowEstimateSize, expandContentEstimateSize]
+    [baseRowEstimateSize, expandContentEstimateSize]
   );
   const recomputeVirtualWindow = useCallback(() => {
     if (!shouldVirtualize) {
       setVirtualWindow(EMPTY_WINDOW);
       return;
     }
+    const pointers = virtualRowPointersRef.current;
     const nextWindow = computeVirtualizedRows({
-      count: virtualRowPointers.length,
+      count: pointers.length,
       getScrollElement: () => tableContainerRef.current,
       estimateSize,
       overScan,
       cache: cacheRef.current,
       heightCacheByKey: heightCacheByKeyRef.current,
-      getItemKey: (index) => virtualRowPointers[index]?.key ?? ""
+      getItemKey: (index) => pointers[index]?.key ?? "",
+      prefixSumCache: prefixSumCacheRef.current
     });
     setVirtualWindow(nextWindow);
   }, [estimateSize, overScan]);
@@ -6528,7 +6586,7 @@ function useTableVirtualization({
         const { startIndex, endIndex } = virtualWindowRef.current;
         if (index < startIndex || index > endIndex) return;
       }
-      const item = virtualRowPointers[index];
+      const item = virtualRowPointersRef.current[index];
       if (!item) return;
       if (!Number.isFinite(height)) return;
       const size = normalizeVirtualSize(height);
@@ -6582,7 +6640,7 @@ function useTableVirtualization({
         const { startIndex, endIndex } = virtualWindowRef.current;
         if (index < startIndex || index > endIndex) return;
       }
-      const item = virtualRowPointers[index];
+      const item = virtualRowPointersRef.current[index];
       const key = item?.key;
       if (key != null && heightCacheByKeyRef.current.has(key) || heightCacheByIndexRef.current.has(index)) {
         return;
@@ -6602,7 +6660,7 @@ function useTableVirtualization({
       return;
     }
     cacheRef.current.forEach((index, _, key) => {
-      if (index >= virtualRowPointers.length) {
+      if (index >= virtualRowPointersRef.current.length) {
         cacheRef.current.remove(index);
         heightCacheByIndexRef.current.delete(index);
         if (key != null) heightCacheByKeyRef.current.delete(key);
@@ -6692,7 +6750,8 @@ var computeVirtualizedRows = (config) => {
     cache,
     getItemKey,
     getHorizontalScrollElement,
-    heightCacheByKey
+    heightCacheByKey,
+    prefixSumCache
   } = config;
   if (count <= 0) return EMPTY_WINDOW;
   const scrollElement = getScrollElement() ?? null;
@@ -6706,24 +6765,60 @@ var computeVirtualizedRows = (config) => {
     Math.max(rawHorizontalScrollOffset, 0),
     horizontalTotalSize - horizontalViewportSize
   ) : Math.max(rawHorizontalScrollOffset, 0);
-  const itemSizes = new Array(count);
-  const offsets = new Array(count);
-  let totalSize = 0;
-  for (let index = 0; index < count; index++) {
-    offsets[index] = totalSize;
-    const key = getItemKey(index);
-    let size = cache.get(index);
-    if (size == null && key != null) {
-      size = heightCacheByKey.get(key);
-    }
-    if (size == null) {
-      const estimate = estimateSize(index);
-      size = normalizeVirtualSize(estimate);
-    } else {
-      size = normalizeVirtualSize(size);
+  let itemSizes;
+  let offsets;
+  let totalSize;
+  const cachedCount = prefixSumCache?.count ?? 0;
+  if (prefixSumCache && cachedCount > 0 && count >= cachedCount) {
+    itemSizes = prefixSumCache.itemSizes.slice(0, cachedCount);
+    offsets = prefixSumCache.offsets.slice(0, cachedCount);
+    totalSize = prefixSumCache.totalSize;
+    if (count > cachedCount) {
+      itemSizes.length = count;
+      offsets.length = count;
+      for (let index = cachedCount; index < count; index++) {
+        offsets[index] = totalSize;
+        const key = getItemKey(index);
+        let size = cache.get(index);
+        if (size == null && key != null) {
+          size = heightCacheByKey.get(key);
+        }
+        if (size == null) {
+          const estimate = estimateSize(index);
+          size = normalizeVirtualSize(estimate);
+        } else {
+          size = normalizeVirtualSize(size);
+        }
+        itemSizes[index] = size;
+        totalSize += size;
+      }
+    }
+  } else {
+    itemSizes = new Array(count);
+    offsets = new Array(count);
+    totalSize = 0;
+    for (let index = 0; index < count; index++) {
+      offsets[index] = totalSize;
+      const key = getItemKey(index);
+      let size = cache.get(index);
+      if (size == null && key != null) {
+        size = heightCacheByKey.get(key);
+      }
+      if (size == null) {
+        const estimate = estimateSize(index);
+        size = normalizeVirtualSize(estimate);
+      } else {
+        size = normalizeVirtualSize(size);
+      }
+      itemSizes[index] = size;
+      totalSize += size;
     }
-    itemSizes[index] = size;
-    totalSize += size;
+  }
+  if (prefixSumCache) {
+    prefixSumCache.count = count;
+    prefixSumCache.itemSizes = itemSizes;
+    prefixSumCache.offsets = offsets;
+    prefixSumCache.totalSize = totalSize;
   }
   const viewportActive = clientHeight > 0;
   const scrollOffset = viewportActive ? Math.min(scrollTop, Math.max(totalSize - clientHeight, 0)) : 0;
@@ -6731,19 +6826,28 @@ var computeVirtualizedRows = (config) => {
   let visibleStartIndex = 0;
   let visibleEndIndex = 0;
   if (viewportActive && totalSize > 0) {
-    for (let index = 0; index < count; index++) {
-      if (offsets[index] + itemSizes[index] > scrollOffset) {
-        visibleStartIndex = index;
-        break;
+    let low = 0;
+    let high = count - 1;
+    while (low < high) {
+      const mid = Math.floor((low + high) / 2);
+      if (offsets[mid] + itemSizes[mid] > scrollOffset) {
+        high = mid;
+      } else {
+        low = mid + 1;
       }
     }
-    for (let index = visibleStartIndex; index < count; index++) {
-      if (offsets[index] >= viewportLimit) {
-        visibleEndIndex = Math.max(visibleStartIndex, index - 1);
-        break;
+    visibleStartIndex = low;
+    low = visibleStartIndex;
+    high = count - 1;
+    while (low < high) {
+      const mid = Math.ceil((low + high) / 2);
+      if (offsets[mid] >= viewportLimit) {
+        high = mid - 1;
+      } else {
+        low = mid;
       }
-      visibleEndIndex = index;
     }
+    visibleEndIndex = Math.max(visibleStartIndex, low);
   }
   const overScanCount = Math.max(0, Math.ceil(overScan));
   const startIndex = Math.max(0, visibleStartIndex - overScanCount);
@@ -6805,7 +6909,7 @@ function SimpleTable({
   getRowExpandable,
   onExpandedChange,
   onLazyScrollLoad,
-  scrollLoadThreshold = 5,
+  scrollLoadThreshold = 42,
   numberOfPageButtons = 5,
   onClickExport,
   baseRowEstimateSize = 42,
@@ -6890,6 +6994,10 @@ function SimpleTable({
     if (typeof maxRecords === "number" && data.length >= maxRecords) return;
     void handleLazyLoad();
   }, [recordPerChunk, data.length, handleLazyLoad, chunkCount, maxRecords]);
+  const onLoadChunkRef = useRef(onLoadChunk);
+  useEffect(() => {
+    onLoadChunkRef.current = onLoadChunk;
+  }, [onLoadChunk]);
   const rows = useMemo(
     () => table.getRowModel().rows,
     [paginationState, sorting, columnFilters]
@@ -6931,7 +7039,7 @@ function SimpleTable({
         rafRef.current = null;
         const { scrollTop, scrollHeight, clientHeight } = container;
         if (scrollHeight - (scrollTop + clientHeight) <= scrollLoadThreshold && scrollTop !== 0 && scrollHeight > clientHeight) {
-          onLoadChunk();
+          onLoadChunkRef.current();
         }
       });
     };
@@ -6944,7 +7052,7 @@ function SimpleTable({
         rafRef.current = null;
       }
     };
-  }, [scrollLoadThreshold, onLoadChunk]);
+  }, [scrollLoadThreshold, virtualizationActive]);
   useEffect(() => {
     if (virtualizationActive) return;
     if (table.getState().pagination.pageIndex === 0) {
@@ -6953,23 +7061,10 @@ function SimpleTable({
   }, [virtualizationActive]);
   useEffect(() => {
     if (!virtualItems.length || !virtualizationActive) return;
-    const scheduleCheck = () => {
-      if (rafRef.current != null) return;
-      rafRef.current = requestAnimationFrame(() => {
-        rafRef.current = null;
-        if (paddingBottom <= scrollLoadThreshold) {
-          onLoadChunk();
-        }
-      });
-    };
-    scheduleCheck();
-    return () => {
-      if (rafRef.current != null) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-    };
-  }, [paddingBottom]);
+    if (paddingBottom <= scrollLoadThreshold) {
+      onLoadChunkRef.current();
+    }
+  }, [paddingBottom, scrollLoadThreshold, virtualizationActive]);
   const columnCount = table.getAllLeafColumns().length;
   useEffect(() => {
     if (!selectable || !onSelectionChange) return;
@@ -10324,8 +10419,9 @@ function SimpleCarousel({
       }
     ),
     showDots && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-2 mt-4", children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        variant: "ghost",
         className: cn(
           "h-2 w-2 rounded-full transition-colors",
           current === index + 1 ? "bg-primary" : "bg-primary/20 hover:bg-primary/40"