@mvn-ui/react 0.1.1 → 0.1.2

package/dist/index.js

@@ -845,7 +845,28 @@ Textarea.displayName = "Textarea";
 
 // src/components/ui/select/index.tsx
 init_utils();
-var Select = SelectPrimitive__namespace.Root;
+var Select = React49__namespace.forwardRef(
+  ({ children, value, onValueChange, ...props }, _ref) => {
+    const [internalValue, setInternalValue] = React49__namespace.useState(value ?? "");
+    React49__namespace.useEffect(() => {
+      setInternalValue(value ?? "");
+    }, [value]);
+    const handleValueChange = (newValue) => {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SelectPrimitive__namespace.Root,
+      {
+        value: internalValue,
+        onValueChange: handleValueChange,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Select.displayName = "Select";
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
 var triggerVariants = classVarianceAuthority.cva(
@@ -1207,7 +1228,7 @@ var toggleGroupVariants = classVarianceAuthority.cva(
   }
 );
 var toggleGroupItemVariants = classVarianceAuthority.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: {
@@ -1222,15 +1243,7 @@ var toggleGroupItemVariants = classVarianceAuthority.cva(
   }
 );
 var ToggleGroup = React49__namespace.forwardRef(
-  ({
-    className,
-    size,
-    items,
-    itemClassName,
-    renderItem,
-    children,
-    ...props
-  }, ref) => {
+  ({ className, size, items, itemClassName, renderItem, children, ...props }, ref) => {
     const defaultRenderItem = React49__namespace.useCallback(
       (item) => /* @__PURE__ */ jsxRuntime.jsxs(
         ToggleGroupPrimitive__namespace.Item,
@@ -1323,21 +1336,18 @@ Slider.displayName = SliderPrimitive__namespace.Root.displayName;
 
 // src/components/ui/input-group/index.tsx
 init_utils();
-var inputGroupVariants = classVarianceAuthority.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 = classVarianceAuthority.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__namespace.forwardRef(
   ({
     className,
@@ -1379,9 +1389,8 @@ var InputGroup = React49__namespace.forwardRef(
               return React49__namespace.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"
                 )
               });
             }
@@ -1509,7 +1518,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: {}
@@ -1534,7 +1543,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;
@@ -1565,8 +1577,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) {
@@ -1632,24 +1644,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];
@@ -1774,16 +1789,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;
@@ -1797,8 +1817,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;
@@ -1812,8 +1832,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] || [];
     },
@@ -1823,8 +1843,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,
@@ -1835,8 +1855,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) {
@@ -1860,15 +1880,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];
     }
   };
@@ -1877,16 +1897,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 = React49.createContext(null);
-function useForm() {
+function useForm(name) {
   const ref = React49.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;
 }
@@ -2048,7 +2071,7 @@ var Form = React49.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;
@@ -2060,7 +2083,7 @@ var Form = React49.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);
@@ -2135,7 +2158,7 @@ var FormItem = (props) => {
   const requiredIndicator = requiredMark === void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive mr-1", "aria-hidden": "true", children: "*" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", "aria-hidden": "true", children: requiredMark });
   if (!children || !React49__namespace.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(" ");
@@ -4341,13 +4364,20 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/ui/tabs/index.tsx
 init_utils();
-var Tabs = TabsPrimitive__namespace.Root;
+var TabsContext = React49__namespace.createContext({
+  destroyInactiveTabs: true
+});
+var Tabs = React49__namespace.forwardRef(({ destroyInactiveTabs = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { destroyInactiveTabs }, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props }) }));
+Tabs.displayName = TabsPrimitive__namespace.Root.displayName;
 var TabsList = React49__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.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=horizontal]:border-b data-[orientation=vertical]:border-border",
+      "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
@@ -4359,27 +4389,34 @@ var TabsTrigger = React49__namespace.forwardRef(({ className, ...props }, ref) =
   {
     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__namespace.Trigger.displayName;
-var TabsContent = React49__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.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]: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=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",
+      "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
       className
     ),
     ...props
   }
 ));
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+var TabsContent = React49__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { destroyInactiveTabs } = React49__namespace.useContext(TabsContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.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__namespace.Content.displayName;
 function SimpleTabs({
   items,
@@ -4390,10 +4427,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__ */ jsxRuntime.jsxs(
     Tabs,
     {
@@ -4401,20 +4440,15 @@ function SimpleTabs({
       value,
       onValueChange,
       orientation,
-      className: cn(
-        orientation === "vertical" ? "flex flex-row" : "",
-        className
-      ),
+      destroyInactiveTabs,
+      className: cn(rootLayoutClassName, className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: cn(defaultTabsListClassName, tabsListClassName), children: items.map((item) => /* @__PURE__ */ jsxRuntime.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
@@ -4717,6 +4751,8 @@ ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displ
 
 // 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";
@@ -4728,395 +4764,601 @@ function useSidebar() {
   }
   return context;
 }
-var SidebarProvider = React49__namespace.forwardRef(
-  ({
-    defaultOpen = true,
-    open: openProp,
-    onOpenChange: setOpenProp,
-    className,
-    style,
-    children,
-    ...props
-  }, ref) => {
-    const [openMobile, setOpenMobile] = React49__namespace.useState(false);
-    const [_open, _setOpen] = React49__namespace.useState(defaultOpen);
-    const open = openProp ?? _open;
-    const setOpen = React49__namespace.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__namespace.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React49__namespace.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__namespace.useCallback(() => {
+    return setOpen((open2) => !open2);
+  }, [setOpen]);
+  React49__namespace.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__namespace.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      toggleSidebar
+    }),
+    [state, open, setOpen, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
       },
-      [setOpenProp, open]
-    );
-    const [isMobile, setIsMobile] = React49__namespace.useState(false);
-    React49__namespace.useEffect(() => {
-      const checkMobile = () => {
-        setIsMobile(window.innerWidth < 768);
-      };
-      checkMobile();
-      window.addEventListener("resize", checkMobile);
-      return () => window.removeEventListener("resize", checkMobile);
-    }, []);
-    const toggleSidebar = React49__namespace.useCallback(() => {
-      return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-    }, [isMobile, setOpen, setOpenMobile]);
-    React49__namespace.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__namespace.useMemo(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.forwardRef(
-  ({
-    side = "left",
-    variant = "sidebar",
-    collapsible = "offcanvas",
-    className,
-    children,
-    ...props
-  }, ref) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-    if (collapsible === "none") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
+  const isCollapsed = state === "collapsed";
+  const isIconMode = collapsible === "icon";
+  const isCollapsedIcon = isCollapsed && isIconMode;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        openMobile && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "fixed inset-0 z-40 bg-overlay-heavy",
-            onClick: () => setOpenMobile(false)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.forwardRef(({ className, onClick, ...props }, ref) => {
+  );
+}
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}) {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Button,
     {
-      ref,
+      "data-sidebar": "trigger",
+      "data-slot": "sidebar-trigger",
       variant: "ghost",
       size: "icon",
-      className: cn("h-9 w-9", className),
+      className: cn("size-7", className),
       onClick: (event) => {
         onClick?.(event);
         toggleSidebar();
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {}),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
-});
-SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React49__namespace.forwardRef(({ className, ...props }, ref) => {
+}
+function SidebarRail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
-      ref,
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
       "aria-label": "Toggle Sidebar",
       tabIndex: -1,
       onClick: toggleSidebar,
       title: "Toggle Sidebar",
       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",
+        "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
     }
   );
-});
-SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.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
-      }
-    );
-  }
-);
-SidebarInset.displayName = "SidebarInset";
-var SidebarHeader = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2 p-4 border-b border-line-soft", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2 p-4 border-t border-line-soft", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarFooter.displayName = "SidebarFooter";
-var SidebarContent = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-1 flex-col gap-4 overflow-auto p-4", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col gap-2", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React49__namespace.forwardRef(({ className, ...props }, ref) => {
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
       className: cn(
-        "px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+        "flex flex-col gap-2 p-2",
+        isCollapsed && "items-center",
         className
       ),
       ...props
     }
   );
-});
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupContent = React49__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1", className), ...props });
-});
-SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "ul",
-      {
-        ref,
-        className: cn("flex flex-col gap-1", className),
-        ...props
-      }
-    );
-  }
-);
-SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: cn("list-none", className), ...props });
+}
+function SidebarFooter({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 ? reactSlot.Slot : "div";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsxRuntime.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 ? reactSlot.Slot : "button";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn(
+        "flex w-full min-w-0 flex-col gap-2 p-2",
+        isCollapsed && "items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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"
 );
-SidebarMenuItem.displayName = "SidebarMenuItem";
-var sidebarMenuButtonVariants = classVarianceAuthority.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"
-      }
+var sidebarMenuButtonVariants = classVarianceAuthority.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))]"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+    size: {
+      default: "h-8 text-sm",
+      sm: "h-7 text-xs",
+      lg: "h-12 text-sm"
     }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
   }
-);
-var SidebarMenuButton = React49__namespace.forwardRef(
-  ({
-    asChild = false,
-    isActive = false,
-    variant,
-    size,
-    className,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? "span" : "button";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Comp,
-      {
-        ref,
-        className: cn(sidebarMenuButtonVariants({ variant, size, isActive }), className),
-        ...props
-      }
-    );
+});
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const button = /* @__PURE__ */ jsxRuntime.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;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SimpleTooltip, { content: tooltip, side: "right", delayDuration: 0, children: button });
+}
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
-);
-SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React49__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    Comp,
     {
-      ref,
+      "data-slot": "sidebar-menu-action",
+      "data-sidebar": "menu-action",
       className: cn(
-        "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-surface-2 hover:text-foreground",
+        "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
     }
   );
-});
-SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuSub = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "ul",
-      {
-        ref,
-        className: cn("ml-3 flex flex-col gap-1 border-l border-line-soft pl-3", className),
-        ...props
-      }
-    );
+}
+function SidebarMenuBadge({
+  className,
+  ...props
+}) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  if (isCollapsed) {
+    return null;
   }
-);
-SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React49__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: cn("list-none", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "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
+    }
+  );
+}
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const width = React49__namespace.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          Skeleton,
+          {
+            className: "size-4 rounded-md",
+            "data-sidebar": "menu-skeleton-icon"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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;
   }
-);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React49__namespace.forwardRef(({ className, isActive, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    "ul",
     {
-      ref,
+      "data-slot": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
       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",
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-2 border-l p-2",
         className
       ),
       ...props
     }
   );
-});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+}
+function SidebarMenuSubItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      "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 ? reactSlot.Slot : "a";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-sub-button",
+      "data-sidebar": "menu-sub-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(
+        "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
+    }
+  );
+}
 
 // src/components/ui/table/index.tsx
 init_utils();
@@ -6627,7 +6869,7 @@ function SimpleTable({
   manualFiltering = false,
   lazyLoadIndicatorType = "overlay",
   maxHeight = 500,
-  maxWidth = 900,
+  maxWidth,
   maxRecords,
   loadingText,
   pagingPosition = "right",
@@ -10524,19 +10766,24 @@ exports.Sidebar = Sidebar;
 exports.SidebarContent = SidebarContent;
 exports.SidebarFooter = SidebarFooter;
 exports.SidebarGroup = SidebarGroup;
+exports.SidebarGroupAction = SidebarGroupAction;
 exports.SidebarGroupContent = SidebarGroupContent;
 exports.SidebarGroupLabel = SidebarGroupLabel;
 exports.SidebarHeader = SidebarHeader;
+exports.SidebarInput = SidebarInput;
 exports.SidebarInset = SidebarInset;
 exports.SidebarMenu = SidebarMenu;
 exports.SidebarMenuAction = SidebarMenuAction;
+exports.SidebarMenuBadge = SidebarMenuBadge;
 exports.SidebarMenuButton = SidebarMenuButton;
 exports.SidebarMenuItem = SidebarMenuItem;
+exports.SidebarMenuSkeleton = SidebarMenuSkeleton;
 exports.SidebarMenuSub = SidebarMenuSub;
 exports.SidebarMenuSubButton = SidebarMenuSubButton;
 exports.SidebarMenuSubItem = SidebarMenuSubItem;
 exports.SidebarProvider = SidebarProvider;
 exports.SidebarRail = SidebarRail;
+exports.SidebarSeparator = SidebarSeparator;
 exports.SidebarTrigger = SidebarTrigger;
 exports.SimpleAvatar = SimpleAvatar;
 exports.SimpleCard = SimpleCard;