@mvn-ui/react 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -5,7 +5,7 @@ import React49__default, { createContext, forwardRef, useRef, useState, useEffec
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import { Loader2Icon, XIcon, EyeOffIcon, EyeIcon, ChevronDownIcon, ChevronUpIcon, CheckIcon, MinusIcon, CircleIcon, X, InboxIcon, ChevronRightIcon, ChevronsUpDownIcon, PanelLeftIcon, CalendarIcon, ArrowLeft, ArrowRight, Calendar as Calendar$1, ChevronLeft, ChevronRight, ChevronDown, Star, RotateCcw, MoreHorizontalIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, GripVerticalIcon, FileDown, SearchIcon, TextAlignJustify, Scaling, Pin, ListFilter, Minus, Plus } from 'lucide-react';
+import { Loader2Icon, XIcon, EyeOffIcon, EyeIcon, ChevronDownIcon, ChevronUpIcon, CheckIcon, MinusIcon, CircleIcon, X, InboxIcon, ChevronRightIcon, ChevronsUpDownIcon, CalendarIcon, ArrowLeft, ArrowRight, Calendar as Calendar$1, ChevronLeft, ChevronRight, ChevronDown, Star, RotateCcw, MoreHorizontalIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, GripVerticalIcon, PanelLeftIcon, FileDown, SearchIcon, TextAlignJustify, Scaling, Pin, ListFilter, Minus, Plus } from 'lucide-react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -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(
@@ -795,7 +795,28 @@ Textarea.displayName = "Textarea";
 
 // src/components/ui/select/index.tsx
 init_utils();
-var Select = SelectPrimitive.Root;
+var Select = React49.forwardRef(
+  ({ children, value, onValueChange, ...props }, _ref) => {
+    const [internalValue, setInternalValue] = React49.useState(value ?? "");
+    React49.useEffect(() => {
+      setInternalValue(value ?? "");
+    }, [value]);
+    const handleValueChange = (newValue) => {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    };
+    return /* @__PURE__ */ jsx(
+      SelectPrimitive.Root,
+      {
+        value: internalValue,
+        onValueChange: handleValueChange,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Select.displayName = "Select";
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
 var triggerVariants = cva(
@@ -1075,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,
     {
@@ -1088,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 })
+          ]
         }
       )
     }
@@ -1157,7 +1182,7 @@ var toggleGroupVariants = cva(
   }
 );
 var toggleGroupItemVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm hover:bg-surface-3 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border-b border-line-strong font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:border-primary data-[state=on]:text-primary hover:bg-surface-3 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       size: {
@@ -1172,15 +1197,7 @@ var toggleGroupItemVariants = cva(
   }
 );
 var ToggleGroup = React49.forwardRef(
-  ({
-    className,
-    size,
-    items,
-    itemClassName,
-    renderItem,
-    children,
-    ...props
-  }, ref) => {
+  ({ className, size, items, itemClassName, renderItem, children, ...props }, ref) => {
     const defaultRenderItem = React49.useCallback(
       (item) => /* @__PURE__ */ jsxs(
         ToggleGroupPrimitive.Item,
@@ -1273,21 +1290,18 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/components/ui/input-group/index.tsx
 init_utils();
-var inputGroupVariants = cva(
-  "flex items-stretch w-full",
-  {
-    variants: {
-      size: {
-        sm: "h-8 text-sm",
-        default: "h-10 text-[0.9375rem]",
-        lg: "h-12 text-base"
-      }
-    },
-    defaultVariants: {
-      size: "default"
+var inputGroupVariants = cva("flex items-stretch w-full", {
+  variants: {
+    size: {
+      sm: "h-8 text-sm",
+      default: "h-10 text-[0.9375rem]",
+      lg: "h-12 text-base"
     }
+  },
+  defaultVariants: {
+    size: "default"
   }
-);
+});
 var InputGroup = React49.forwardRef(
   ({
     className,
@@ -1329,9 +1343,8 @@ var InputGroup = React49.forwardRef(
               return React49.cloneElement(child, {
                 className: cn(
                   child.props.className,
-                  leftAddon && "rounded-l-none border-l-0",
-                  rightAddon && "rounded-r-none border-r-0",
-                  (leftElement || rightElement) && "rounded-none"
+                  (leftAddon || leftElement) && "rounded-l-none border-l-0",
+                  (rightAddon || rightElement) && "rounded-r-none border-r-0"
                 )
               });
             }
@@ -1459,7 +1472,7 @@ function deleteValueByPath(obj, path) {
 
 // src/components/ui/form/form-instance.ts
 var externalMounts = /* @__PURE__ */ new WeakMap();
-function createFormInstance() {
+function createFormInstance(name) {
   const store = {
     values: {},
     errors: {}
@@ -1484,7 +1497,10 @@ function createFormInstance() {
     };
     subscribers.forEach((fn) => fn && fn(snapshot));
     fieldMeta.forEach((meta) => meta.onStoreChange && meta.onStoreChange());
-    if (ext) ext.forEach((handler) => handler.onStoreChange && handler.onStoreChange());
+    if (ext)
+      ext.forEach(
+        (handler) => handler.onStoreChange && handler.onStoreChange()
+      );
   }
   function scheduleNotify() {
     if (pendingNotify) return;
@@ -1515,8 +1531,8 @@ function createFormInstance() {
       if (options && options.clone === false) return store.values;
       return cloneDeep(store.values);
     },
-    getFieldValue(name) {
-      const path = toNamePath(name);
+    getFieldValue(name2) {
+      const path = toNamePath(name2);
       return getValueByPath(store.values, path);
     },
     setFieldsValue(vals, options) {
@@ -1582,24 +1598,27 @@ function createFormInstance() {
         instance.validateFields(names).catch((validationError) => {
           if (validationError && validationError.errorFields) {
             mounts.forEach((handler) => {
-              if (handler.onFieldsChange) handler.onFieldsChange(validationError.errorFields);
+              if (handler.onFieldsChange)
+                handler.onFieldsChange(validationError.errorFields);
             });
             try {
               const ext = externalMounts.get(instance);
               if (ext) {
                 ext.forEach((handler) => {
-                  if (handler.onFieldsChange) handler.onFieldsChange(validationError.errorFields);
+                  if (handler.onFieldsChange)
+                    handler.onFieldsChange(validationError.errorFields);
                 });
               }
             } catch (error) {
             }
-            if (instance.onFieldsChange) instance.onFieldsChange(validationError.errorFields);
+            if (instance.onFieldsChange)
+              instance.onFieldsChange(validationError.errorFields);
           }
         });
       }
     },
-    setFieldValue(name, value) {
-      const path = toNamePath(name);
+    setFieldValue(name2, value) {
+      const path = toNamePath(name2);
       setValueByPath(store.values, path, value);
       const key = namePathToString(path);
       delete store.errors[key];
@@ -1724,16 +1743,21 @@ function createFormInstance() {
         return Promise.resolve({ ...store.values });
       });
     },
-    submit() {
-      instance.validateFields().then(() => {
+    async submit() {
+      try {
+        await instance.validateFields();
         mounts.forEach((handler) => handler.onSubmit && handler.onSubmit());
         try {
           const ext = externalMounts.get(instance);
-          if (ext) ext.forEach((handler) => handler.onSubmit && handler.onSubmit());
+          if (ext)
+            ext.forEach(
+              (external_handler) => external_handler.onSubmit && external_handler.onSubmit()
+            );
         } catch (error) {
         }
-      }).catch(() => {
-      });
+      } catch (validate_error) {
+        return await Promise.reject(validate_error);
+      }
     },
     resetFields(names) {
       let changed = false;
@@ -1747,8 +1771,8 @@ function createFormInstance() {
         scheduleNotify();
         return;
       }
-      names.forEach((name) => {
-        const path = toNamePath(name);
+      names.forEach((name2) => {
+        const path = toNamePath(name2);
         const key = namePathToString(path);
         if (getValueByPath(store.values, path) !== void 0) {
           changed = true;
@@ -1762,8 +1786,8 @@ function createFormInstance() {
       if (changed) version += 1;
       scheduleNotify();
     },
-    getFieldError(name) {
-      const path = toNamePath(name);
+    getFieldError(name2) {
+      const path = toNamePath(name2);
       const key = namePathToString(path);
       return store.errors[key] || [];
     },
@@ -1773,8 +1797,8 @@ function createFormInstance() {
         return { name: meta.namePath, errors: store.errors[key] || [] };
       });
     },
-    registerField(name, meta) {
-      const path = toNamePath(name);
+    registerField(name2, meta) {
+      const path = toNamePath(name2);
       const key = namePathToString(path);
       fieldMeta.set(key, {
         namePath: path,
@@ -1785,8 +1809,8 @@ function createFormInstance() {
         getValueFromEvent: meta.getValueFromEvent
       });
     },
-    unregisterField(name) {
-      const path = toNamePath(name);
+    unregisterField(name2) {
+      const path = toNamePath(name2);
       const key = namePathToString(path);
       fieldMeta.delete(key);
       if (!preserveOnUnmount) {
@@ -1810,15 +1834,15 @@ function createFormInstance() {
       return () => subscribers.delete(fn);
     },
     INTERNAL: {
-      name: void 0,
+      name,
       itemRef: (nameArr) => (node) => {
         const key = namePathToString(nameArr);
         if (node) itemsRef[key] = node;
         else delete itemsRef[key];
       }
     },
-    getFieldInstance(name) {
-      const key = namePathToString(toNamePath(name));
+    getFieldInstance(name2) {
+      const key = namePathToString(toNamePath(name2));
       return itemsRef[key];
     }
   };
@@ -1827,16 +1851,19 @@ function createFormInstance() {
     instance.preserveOnUnmount = preserveOnUnmount;
   };
   instance.preserveOnUnmount = preserveOnUnmount;
+  if (name && instance.INTERNAL) instance.INTERNAL.name = name;
   return instance;
 }
 
 // src/components/ui/form/form-context.tsx
 var FormContext = createContext(null);
-function useForm() {
+function useForm(name) {
   const ref = useRef();
   if (!ref.current) {
-    const instance = createFormInstance();
+    const instance = createFormInstance(name);
     ref.current = instance;
+  } else if (name && ref.current.INTERNAL) {
+    ref.current.INTERNAL.name = name;
   }
   return ref.current;
 }
@@ -1998,7 +2025,7 @@ var Form = forwardRef(function Form2(props, ref) {
     };
     let unregisterMount;
     if (form.registerMount) {
-      const mountId = Math.random().toString(36).slice(2);
+      const mountId = form.INTERNAL?.name ?? Math.random().toString(36).slice(2);
       if (preserve !== void 0) {
         if (form.setPreserve) form.setPreserve(!!preserve);
         else form.preserveOnUnmount = !!preserve;
@@ -2010,7 +2037,7 @@ var Form = forwardRef(function Form2(props, ref) {
         map = /* @__PURE__ */ new Map();
         externalMounts.set(form, map);
       }
-      const mountId = Math.random().toString(36).slice(2);
+      const mountId = form.INTERNAL?.name ?? Math.random().toString(36).slice(2);
       map.set(mountId, mountHandlers);
       if (preserve !== void 0) {
         if (form.setPreserve) form.setPreserve(!!preserve);
@@ -2085,7 +2112,7 @@ var FormItem = (props) => {
   const requiredIndicator = requiredMark === void 0 ? /* @__PURE__ */ jsx("span", { className: "text-destructive mr-1", "aria-hidden": "true", children: "*" }) : /* @__PURE__ */ jsx("span", { className: "mr-1", "aria-hidden": "true", children: requiredMark });
   if (!children || !React49__default.isValidElement(children)) return null;
   const childProps = {};
-  if (fieldValue !== void 0) childProps[valuePropName] = fieldValue;
+  childProps[valuePropName] = fieldValue;
   const childClass = children.props.className;
   if (childClass || props.className) {
     childProps.className = [childClass, props.className].filter(Boolean).join(" ");
@@ -2898,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,
@@ -2926,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
   }
 );
@@ -3289,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
@@ -4291,13 +4335,20 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/ui/tabs/index.tsx
 init_utils();
-var Tabs = TabsPrimitive.Root;
+var TabsContext = React49.createContext({
+  destroyInactiveTabs: true
+});
+var Tabs = React49.forwardRef(({ destroyInactiveTabs = true, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { destroyInactiveTabs }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) }));
+Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "flex items-stretch gap-0 text-muted-foreground",
+      "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
     ),
     ...props
@@ -4309,27 +4360,34 @@ var TabsTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-4 py-2 text-sm font-medium ring-offset-background transition-all",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn(
+      "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",
-      "p-4 rounded-md border bg-card",
+      "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]:border-primary",
+      "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
       className
     ),
     ...props
   }
 ));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React49.forwardRef(({ className, ...props }, ref) => {
+  const { destroyInactiveTabs } = React49.useContext(TabsContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      forceMount: destroyInactiveTabs ? void 0 : true,
+      className: cn(
+        "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=inactive]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+});
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 function SimpleTabs({
   items,
@@ -4340,10 +4398,12 @@ function SimpleTabs({
   tabsListClassName,
   tabsTriggerClassName,
   tabsContentClassName,
-  orientation = "horizontal"
+  orientation = "horizontal",
+  destroyInactiveTabs = true
 }) {
-  const defaultTabsListClassName = orientation === "vertical" ? "flex-col h-auto w-auto p-2 mr-4" : "mb-4";
-  const defaultTabsContentClassName = orientation === "vertical" ? "mt-0 ml-4" : "";
+  const defaultTabsListClassName = orientation === "vertical" ? "bg-background/60 p-2" : "w-full";
+  const defaultTabsContentClassName = orientation === "vertical" ? "ml-0 flex-1 min-w-0" : "w-full";
+  const rootLayoutClassName = orientation === "vertical" ? "flex flex-row w-full max-w-full items-start gap-6" : "flex w-full flex-col gap-6";
   return /* @__PURE__ */ jsxs(
     Tabs,
     {
@@ -4351,20 +4411,15 @@ function SimpleTabs({
       value,
       onValueChange,
       orientation,
-      className: cn(
-        orientation === "vertical" ? "flex flex-row" : "",
-        className
-      ),
+      destroyInactiveTabs,
+      className: cn(rootLayoutClassName, className),
       children: [
         /* @__PURE__ */ jsx(TabsList, { className: cn(defaultTabsListClassName, tabsListClassName), children: items.map((item) => /* @__PURE__ */ jsx(
           TabsTrigger,
           {
             value: item.value,
             disabled: item.disabled,
-            className: cn(
-              orientation === "vertical" && "mb-1 w-full justify-start",
-              tabsTriggerClassName
-            ),
+            className: cn(tabsTriggerClassName),
             children: item.label
           },
           item.value
@@ -4619,6 +4674,7 @@ var ScrollArea = React49.forwardRef(
     orientation = "vertical",
     scrollbarClassName,
     thumbClassName,
+    type = "auto",
     ...props
   }, ref) => {
     const showVertical = orientation === "vertical" || orientation === "both";
@@ -4627,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, {})
         ]
       }
@@ -4656,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
         )
       }
@@ -4667,6 +4749,8 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/ui/sidebar/index.tsx
 init_utils();
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
@@ -4678,395 +4762,601 @@ function useSidebar() {
   }
   return context;
 }
-var SidebarProvider = React49.forwardRef(
-  ({
-    defaultOpen = true,
-    open: openProp,
-    onOpenChange: setOpenProp,
-    className,
-    style,
-    children,
-    ...props
-  }, ref) => {
-    const [openMobile, setOpenMobile] = React49.useState(false);
-    const [_open, _setOpen] = React49.useState(defaultOpen);
-    const open = openProp ?? _open;
-    const setOpen = React49.useCallback(
-      (value) => {
-        const openState = typeof value === "function" ? value(open) : value;
-        if (setOpenProp) {
-          setOpenProp(openState);
-        } else {
-          _setOpen(openState);
-        }
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const [_open, _setOpen] = React49.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React49.useCallback(
+    (value) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = React49.useCallback(() => {
+    return setOpen((open2) => !open2);
+  }, [setOpen]);
+  React49.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React49.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      toggleSidebar
+    }),
+    [state, open, setOpen, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
       },
-      [setOpenProp, open]
-    );
-    const [isMobile, setIsMobile] = React49.useState(false);
-    React49.useEffect(() => {
-      const checkMobile = () => {
-        setIsMobile(window.innerWidth < 768);
-      };
-      checkMobile();
-      window.addEventListener("resize", checkMobile);
-      return () => window.removeEventListener("resize", checkMobile);
-    }, []);
-    const toggleSidebar = React49.useCallback(() => {
-      return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-    }, [isMobile, setOpen, setOpenMobile]);
-    React49.useEffect(() => {
-      const handleKeyDown = (event) => {
-        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-          event.preventDefault();
-          toggleSidebar();
-        }
-      };
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [toggleSidebar]);
-    const state = open ? "expanded" : "collapsed";
-    const contextValue = React49.useMemo(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    );
-    return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      className: cn(
+        "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-full w-full",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}) {
+  const { state } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        style: {
-          "--sidebar-width": SIDEBAR_WIDTH,
-          "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-          ...style
-        },
+        "data-slot": "sidebar",
         className: cn(
-          "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-surface-1",
+          "bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col",
           className
         ),
-        ref,
         ...props,
         children
       }
-    ) });
+    );
   }
-);
-SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React49.forwardRef(
-  ({
-    side = "left",
-    variant = "sidebar",
-    collapsible = "offcanvas",
-    className,
-    children,
-    ...props
-  }, ref) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-    if (collapsible === "none") {
-      return /* @__PURE__ */ jsx(
+  const isCollapsed = state === "collapsed";
+  const isIconMode = collapsible === "icon";
+  const isCollapsedIcon = isCollapsed && isIconMode;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "group peer text-sidebar-foreground hidden md:block relative",
+      "data-state": state,
+      "data-collapsible": isCollapsed ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: /* @__PURE__ */ jsx(
         "div",
         {
+          "data-slot": "sidebar-container",
           className: cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-surface-1 text-foreground border-r border-line-soft",
+            "relative z-10 h-full transition-[width] duration-200 ease-linear flex flex-col",
+            // Width handling
+            isCollapsed && collapsible === "offcanvas" && "w-0 overflow-hidden",
+            isCollapsedIcon && "w-[var(--sidebar-width-icon)]",
+            !isCollapsed && "w-[var(--sidebar-width)]",
+            // Border/padding for variants
+            variant === "floating" || variant === "inset" ? "p-2" : "border-r border-sidebar-border",
             className
           ),
-          ref,
           ...props,
-          children
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-sidebar": "sidebar",
+              "data-slot": "sidebar-inner",
+              "data-collapsible": isCollapsedIcon ? "icon" : void 0,
+              className: cn(
+                "bg-sidebar flex h-full w-full flex-col",
+                variant === "floating" && "rounded-lg border border-sidebar-border shadow-sm",
+                // When in icon mode, center content and add consistent padding
+                isCollapsedIcon && "overflow-hidden items-center py-2"
+              ),
+              children
+            }
+          )
         }
-      );
-    }
-    if (isMobile) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        openMobile && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "fixed inset-0 z-40 bg-overlay-heavy",
-            onClick: () => setOpenMobile(false)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref,
-            className: cn(
-              "fixed inset-y-0 z-50 hidden w-[--sidebar-width] flex-col bg-surface-1 text-foreground border-r border-line-soft transition-transform duration-200",
-              side === "left" ? "left-0" : "right-0",
-              openMobile && "flex translate-x-0",
-              !openMobile && (side === "left" ? "-translate-x-full" : "translate-x-full"),
-              className
-            ),
-            ...props,
-            children
-          }
-        )
-      ] });
+      )
     }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-state": state,
-        "data-collapsible": collapsible,
-        "data-variant": variant,
-        "data-side": side,
-        className: cn(
-          "group/sidebar relative flex h-full w-[--sidebar-width] flex-col bg-surface-1 text-foreground border-r border-line-soft transition-all duration-200",
-          state === "collapsed" && collapsible === "icon" && "w-[--sidebar-width-icon]",
-          variant === "floating" && "m-2 rounded-lg border border-line-soft shadow-md",
-          variant === "inset" && "m-2 mr-0 rounded-l-lg border border-line-soft shadow-sm",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React49.forwardRef(({ className, onClick, ...props }, ref) => {
+  );
+}
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}) {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs(
     Button,
     {
-      ref,
-      variant: "ghost",
-      size: "icon",
-      className: cn("h-9 w-9", className),
-      onClick: (event) => {
-        onClick?.(event);
-        toggleSidebar();
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(PanelLeftIcon, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
-      ]
+      "data-sidebar": "trigger",
+      "data-slot": "sidebar-trigger",
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-7", className),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PanelLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Toggle Sidebar",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle Sidebar",
+      className: cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "sidebar-input",
+      "data-sidebar": "input",
+      className: cn("bg-background h-8 w-full shadow-none", className),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn(
+        "flex flex-col gap-2 p-2",
+        isCollapsed && "items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn(
+        "flex flex-col gap-2 p-2 mt-auto",
+        isCollapsed && "items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator5,
+    {
+      "data-slot": "sidebar-separator",
+      "data-sidebar": "separator",
+      className: cn("bg-sidebar-border mx-2 w-auto", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto",
+        isCollapsed && "items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn(
+        "relative flex w-full min-w-0 flex-col p-2",
+        isCollapsed && "items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        isCollapsed && "h-0 opacity-0 overflow-hidden -mt-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-group-action",
+      "data-sidebar": "group-action",
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
     }
   );
-});
-SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React49.forwardRef(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+}
+function SidebarMenu({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
   return /* @__PURE__ */ jsx(
-    "button",
+    "ul",
     {
-      ref,
-      "aria-label": "Toggle Sidebar",
-      tabIndex: -1,
-      onClick: toggleSidebar,
-      title: "Toggle Sidebar",
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
       className: cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-line-strong group-data-[side=left]:right-0 group-data-[side=right]:left-0 [[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-2 [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 sm:flex",
+        "flex w-full min-w-0 flex-col gap-2 p-2",
+        isCollapsed && "items-center",
         className
       ),
       ...props
     }
   );
-});
-SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "main",
-      {
-        ref,
-        className: cn(
-          "relative flex min-h-svh flex-1 flex-col bg-background peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-r-lg md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-line-soft md:peer-data-[variant=inset]:shadow-sm",
-          className
-        ),
-        ...props
-      }
-    );
-  }
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonStyle = cn(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-all duration-150",
+  "hover:bg-muted focus-visible:ring-2 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]:bg-muted data-[active=true]:text-primary [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"
 );
-SidebarInset.displayName = "SidebarInset";
-var SidebarHeader = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2 p-4 border-b border-line-soft", className),
-        ...props
-      }
-    );
+var sidebarMenuButtonVariants = cva(sidebarMenuButtonStyle, {
+  variants: {
+    variant: {
+      default: "hover:bg-muted hover:text-foreground",
+      outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-muted hover:text-foreground hover:shadow-[0_0_0_1px_hsl(var(--border))]"
+    },
+    size: {
+      default: "h-8 text-sm",
+      sm: "h-7 text-xs",
+      lg: "h-12 text-sm"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
   }
-);
-SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2 p-4 border-t border-line-soft", className),
-        ...props
-      }
-    );
+});
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const button = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(
+        sidebarMenuButtonVariants({ variant, size }),
+        // When collapsed in icon mode, make button square and center icon
+        isCollapsed && "w-8 h-8 p-2 justify-center [&>span]:hidden [&>:not(svg)]:hidden [&>svg:not(:first-child)]:hidden",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+  if (!isCollapsed || !tooltip) {
+    return button;
   }
-);
-SidebarFooter.displayName = "SidebarFooter";
-var SidebarContent = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-1 flex-col gap-4 overflow-auto p-4", className),
-        ...props
-      }
-    );
+  return /* @__PURE__ */ jsx(SimpleTooltip, { content: tooltip, side: "right", delayDuration: 0, children: button });
+}
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
-);
-SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2", className),
-        ...props
-      }
-    );
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-action",
+      "data-sidebar": "menu-action",
+      className: cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuBadge({
+  className,
+  ...props
+}) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
-);
-SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React49.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
       className: cn(
-        "px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
         className
       ),
       ...props
     }
   );
-});
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupContent = React49.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1", className), ...props });
-});
-SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "ul",
-      {
-        ref,
-        className: cn("flex flex-col gap-1", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("li", { ref, className: cn("list-none", className), ...props });
-  }
-);
-SidebarMenuItem.displayName = "SidebarMenuItem";
-var sidebarMenuButtonVariants = cva(
-  "group/menu-button flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-2 active:bg-surface-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "text-foreground hover:text-foreground",
-        outline: "border border-line-soft bg-background shadow-sm hover:bg-surface-2"
-      },
-      size: {
-        default: "h-10",
-        sm: "h-8 text-xs",
-        lg: "h-12"
-      },
-      isActive: {
-        true: "bg-surface-2 text-foreground font-semibold"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+}
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const width = React49.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "size-4 rounded-md",
+            "data-sidebar": "menu-skeleton-icon"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "h-4 max-w-(--skeleton-width) flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": width
+            }
+          }
+        )
+      ]
     }
+  );
+}
+function SidebarMenuSub({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
-);
-var SidebarMenuButton = React49.forwardRef(
-  ({
-    asChild = false,
-    isActive = false,
-    variant,
-    size,
-    className,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? "span" : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        className: cn(sidebarMenuButtonVariants({ variant, size, isActive }), className),
-        ...props
-      }
-    );
-  }
-);
-SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React49.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
-    "button",
+    "ul",
     {
-      ref,
+      "data-slot": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
       className: cn(
-        "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-surface-2 hover:text-foreground",
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-2 border-l p-2",
         className
       ),
       ...props
     }
   );
-});
-SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuSub = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "ul",
-      {
-        ref,
-        className: cn("ml-3 flex flex-col gap-1 border-l border-line-soft pl-3", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React49.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("li", { ref, className: cn("list-none", className), ...props });
-  }
-);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React49.forwardRef(({ className, isActive, ...props }, ref) => {
+}
+function SidebarMenuSubItem({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "button",
+    "li",
     {
-      ref,
+      "data-slot": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      className: cn("group/menu-sub-item relative", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-sub-button",
+      "data-sidebar": "menu-sub-button",
+      "data-size": size,
+      "data-active": isActive,
       className: cn(
-        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-surface-2 active:bg-surface-3",
-        isActive && "bg-surface-2 font-medium",
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-muted hover:text-foreground active:bg-muted [&>svg]:text-muted-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden ",
+        "transition-all duration-150 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-muted data-[active=true]:text-primary",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
         className
       ),
       ...props
     }
   );
-});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+}
 
 // src/components/ui/table/index.tsx
 init_utils();
@@ -5094,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";
@@ -6166,6 +6450,8 @@ function useTableVirtualization({
     });
     return arr;
   }, [rows, expandable]);
+  const virtualRowPointersRef = useRef(virtualRowPointers);
+  virtualRowPointersRef.current = virtualRowPointers;
   const cacheBackingRef = useRef(
     /* @__PURE__ */ new Map()
   );
@@ -6199,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);
@@ -6223,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()) {
@@ -6239,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]);
@@ -6286,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);
@@ -6340,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;
@@ -6360,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);
@@ -6450,7 +6750,8 @@ var computeVirtualizedRows = (config) => {
     cache,
     getItemKey,
     getHorizontalScrollElement,
-    heightCacheByKey
+    heightCacheByKey,
+    prefixSumCache
   } = config;
   if (count <= 0) return EMPTY_WINDOW;
   const scrollElement = getScrollElement() ?? null;
@@ -6464,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;
@@ -6489,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);
@@ -6563,7 +6909,7 @@ function SimpleTable({
   getRowExpandable,
   onExpandedChange,
   onLazyScrollLoad,
-  scrollLoadThreshold = 5,
+  scrollLoadThreshold = 42,
   numberOfPageButtons = 5,
   onClickExport,
   baseRowEstimateSize = 42,
@@ -6577,7 +6923,7 @@ function SimpleTable({
   manualFiltering = false,
   lazyLoadIndicatorType = "overlay",
   maxHeight = 500,
-  maxWidth = 900,
+  maxWidth,
   maxRecords,
   loadingText,
   pagingPosition = "right",
@@ -6648,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]
@@ -6689,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();
         }
       });
     };
@@ -6702,7 +7052,7 @@ function SimpleTable({
         rafRef.current = null;
       }
     };
-  }, [scrollLoadThreshold, onLoadChunk]);
+  }, [scrollLoadThreshold, virtualizationActive]);
   useEffect(() => {
     if (virtualizationActive) return;
     if (table.getState().pagination.pageIndex === 0) {
@@ -6711,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;
@@ -10082,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"
@@ -10261,6 +10599,6 @@ var TypographyGroup = {
 // src/index.ts
 init_utils();
 
-export { Accordion, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Blockquote, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsSpinner, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, Field, Form, FormItem, FormList, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, InlineCode, Input, InputGroup, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item9 as Item, ItemGroup, ItemList, ItemSeparator, Label, Lead, List3 as List, ListItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, P, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCard, ProfileCard, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, SimpleAvatar, SimpleCard, SimpleCarousel, SimpleTable, SimpleTabs, SimpleTooltip, Skeleton, SkeletonCard, Slider, Small, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, TypographyGroup, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, composeRules, emailRule, emptyVariants, fieldVariants, getInitials, inputGroupVariants, inputVariants, itemVariants, labelVariants, maxLengthRule, maxValueRule, minLengthRule, minValueRule, navigationMenuTriggerStyle, numberRule, patternRule, progressVariants, radioGroupVariants, requiredRule, separatorVariants, skeletonVariants, spinnerVariants, tableVariants, textareaVariants, toastVariants, toggleGroupVariants, toggleVariants, urlRule, useCarousel, useForm, useSidebar, useToast, useWatch };
+export { Accordion, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Blockquote, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsSpinner, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, Field, Form, FormItem, FormList, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, InlineCode, Input, InputGroup, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item9 as Item, ItemGroup, ItemList, ItemSeparator, Label, Lead, List3 as List, ListItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, P, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCard, ProfileCard, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SimpleAvatar, SimpleCard, SimpleCarousel, SimpleTable, SimpleTabs, SimpleTooltip, Skeleton, SkeletonCard, Slider, Small, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, TypographyGroup, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, composeRules, emailRule, emptyVariants, fieldVariants, getInitials, inputGroupVariants, inputVariants, itemVariants, labelVariants, maxLengthRule, maxValueRule, minLengthRule, minValueRule, navigationMenuTriggerStyle, numberRule, patternRule, progressVariants, radioGroupVariants, requiredRule, separatorVariants, skeletonVariants, spinnerVariants, tableVariants, textareaVariants, toastVariants, toggleGroupVariants, toggleVariants, urlRule, useCarousel, useForm, useSidebar, useToast, useWatch };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map