From 0f56066d391b7146bad87029ae15f204e0fabe82 Mon Sep 17 00:00:00 2001
From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com>
Date: Mon, 15 Sep 2025 19:24:31 +0530
Subject: [PATCH 1/8] add: separator

---
 src/components/ui/ContextMenu/ContextMenu.tsx          |  3 +++
 .../ui/ContextMenu/fragments/ContextMenuSeparator.tsx  | 10 ++++++++++
 .../ui/ContextMenu/stories/ContextMenu.stories.tsx     |  1 +
 src/components/ui/DropdownMenu/DropdownMenu.tsx        |  3 +++
 .../DropdownMenu/fragments/DropdownMenuSeparator.tsx   | 10 ++++++++++
 .../ui/DropdownMenu/stories/DropdownMenu.stories.tsx   |  1 +
 src/components/ui/Menubar/Menubar.tsx                  |  2 ++
 .../ui/Menubar/fragments/MenubarSeparator.tsx          | 10 ++++++++++
 src/components/ui/Menubar/stories/Menubar.stories.tsx  |  1 +
 9 files changed, 41 insertions(+)
 create mode 100644 src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
 create mode 100644 src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
 create mode 100644 src/components/ui/Menubar/fragments/MenubarSeparator.tsx

diff --git a/src/components/ui/ContextMenu/ContextMenu.tsx b/src/components/ui/ContextMenu/ContextMenu.tsx
index fceb934b1..7a1097ba1 100644
--- a/src/components/ui/ContextMenu/ContextMenu.tsx
+++ b/src/components/ui/ContextMenu/ContextMenu.tsx
@@ -6,6 +6,7 @@ import ContextMenuPortal from './fragments/ContextMenuPortal';
 import ContextMenuItem from './fragments/ContextMenuItem';
 import ContextMenuSub from './fragments/ContextMenuSub';
 import ContextMenuSubTrigger from './fragments/ContextMenuSubTrigger';
+import ContextMenuSeparator from './fragments/ContextMenuSeparator';
 
 export type ContextMenuElement = ElementRef<'div'>;
 export type ContextMenuProps = ComponentPropsWithoutRef<'div'>;
@@ -18,6 +19,7 @@ type ContextMenuComponent = React.ForwardRefExoticComponent<ContextMenuProps & R
     Item: typeof ContextMenuItem;
     Sub: typeof ContextMenuSub;
     SubTrigger: typeof ContextMenuSubTrigger;
+    Separator: typeof ContextMenuSeparator;
 };
 
 const ContextMenu = forwardRef<ContextMenuElement, ContextMenuProps>((_props, _ref) => {
@@ -34,5 +36,6 @@ ContextMenu.Portal = ContextMenuPortal;
 ContextMenu.Item = ContextMenuItem;
 ContextMenu.Sub = ContextMenuSub;
 ContextMenu.SubTrigger = ContextMenuSubTrigger;
+ContextMenu.Separator = ContextMenuSeparator;
 
 export default ContextMenu;
diff --git a/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
new file mode 100644
index 000000000..6ebb52e61
--- /dev/null
+++ b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import Separator from '../../Separator/Separator';
+
+function ContextMenuSeparator() {
+    return (
+        <Separator/>
+    );
+}
+
+export default ContextMenuSeparator;
diff --git a/src/components/ui/ContextMenu/stories/ContextMenu.stories.tsx b/src/components/ui/ContextMenu/stories/ContextMenu.stories.tsx
index f18ea29af..a0f76d05b 100644
--- a/src/components/ui/ContextMenu/stories/ContextMenu.stories.tsx
+++ b/src/components/ui/ContextMenu/stories/ContextMenu.stories.tsx
@@ -22,6 +22,7 @@ export const Basic: Story = {
                         <ContextMenu.Item label="Profile">Profile</ContextMenu.Item>
                         <ContextMenu.Item label="Settings">Settings</ContextMenu.Item>
                         <ContextMenu.Item label="Notifications">Notifications</ContextMenu.Item>
+                        <ContextMenu.Separator/>
                         <ContextMenu.Sub >
                             <ContextMenu.SubTrigger >More Options <ChevronRight /></ContextMenu.SubTrigger>
                             <ContextMenu.Content >
diff --git a/src/components/ui/DropdownMenu/DropdownMenu.tsx b/src/components/ui/DropdownMenu/DropdownMenu.tsx
index f384ce7f5..d8ff4cf93 100644
--- a/src/components/ui/DropdownMenu/DropdownMenu.tsx
+++ b/src/components/ui/DropdownMenu/DropdownMenu.tsx
@@ -6,6 +6,7 @@ import DropdownMenuPortal from './fragments/DropdownMenuPortal';
 import DropdownMenuItem from './fragments/DropdownMenuItem';
 import DropdownMenuSub from './fragments/DropdownMenuSub';
 import DropdownMenuSubTrigger from './fragments/DropdownMenuSubTrigger';
+import DropdownMenuSeparator from './fragments/DropdownMenuSeparator';
 
 export type DropdownMenuElement = ElementRef<'div'>;
 export type DropdownMenuProps = ComponentPropsWithoutRef<'div'>;
@@ -18,6 +19,7 @@ type DropdownMenuComponent = React.ForwardRefExoticComponent<DropdownMenuProps &
     Item: typeof DropdownMenuItem;
     Sub: typeof DropdownMenuSub;
     SubTrigger: typeof DropdownMenuSubTrigger;
+    Separator : typeof DropdownMenuSeparator;
 };
 
 const DropdownMenu = forwardRef<DropdownMenuElement, DropdownMenuProps>((_props, _ref) => {
@@ -34,5 +36,6 @@ DropdownMenu.Portal = DropdownMenuPortal;
 DropdownMenu.Item = DropdownMenuItem;
 DropdownMenu.Sub = DropdownMenuSub;
 DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
+DropdownMenu.Separator = DropdownMenuSeparator;
 
 export default DropdownMenu;
diff --git a/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
new file mode 100644
index 000000000..f1672902c
--- /dev/null
+++ b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import Separator from '../../Separator/Separator';
+
+function DropdownMenuSeparator() {
+    return (
+        <Separator/>
+    );
+}
+
+export default DropdownMenuSeparator;
diff --git a/src/components/ui/DropdownMenu/stories/DropdownMenu.stories.tsx b/src/components/ui/DropdownMenu/stories/DropdownMenu.stories.tsx
index 7c422b79d..a2cdf5f97 100644
--- a/src/components/ui/DropdownMenu/stories/DropdownMenu.stories.tsx
+++ b/src/components/ui/DropdownMenu/stories/DropdownMenu.stories.tsx
@@ -23,6 +23,7 @@ export const Basic: Story = {
                         <DropdownMenu.Item label="Profile">Profile</DropdownMenu.Item>
                         <DropdownMenu.Item label="Settings">Settings</DropdownMenu.Item>
                         <DropdownMenu.Item label="Notifications">Notifications</DropdownMenu.Item>
+                        <DropdownMenu.Separator/>
                         <DropdownMenu.Sub >
                             <DropdownMenu.SubTrigger >More Options <ChevronRight /></DropdownMenu.SubTrigger>
                             <DropdownMenu.Content >
diff --git a/src/components/ui/Menubar/Menubar.tsx b/src/components/ui/Menubar/Menubar.tsx
index d0dcc0818..5d6cc07ca 100644
--- a/src/components/ui/Menubar/Menubar.tsx
+++ b/src/components/ui/Menubar/Menubar.tsx
@@ -6,6 +6,7 @@ import MenubarItem from './fragments/MenubarItem';
 import MenubarSub from './fragments/MenubarSub';
 import MenubarSubTrigger from './fragments/MenubarSubTrigger';
 import MenubarMenu from './fragments/MenubarMenu';
+import MenubarSeparator from './fragments/MenubarSeparator';
 
 const Menubar = () => {
     console.warn('Direct usage of Menubar is not supported. Please use Menubar.Root, Menubar.Item instead.');
@@ -20,5 +21,6 @@ Menubar.Portal = MenubarPortal;
 Menubar.Item = MenubarItem;
 Menubar.Sub = MenubarSub;
 Menubar.SubTrigger = MenubarSubTrigger;
+Menubar.Separator = MenubarSeparator;
 
 export default Menubar;
diff --git a/src/components/ui/Menubar/fragments/MenubarSeparator.tsx b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
new file mode 100644
index 000000000..021bf60b1
--- /dev/null
+++ b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import Separator from '../../Separator/Separator';
+
+function MenubarSeparator() {
+    return (
+        <Separator/>
+    );
+}
+
+export default MenubarSeparator;
diff --git a/src/components/ui/Menubar/stories/Menubar.stories.tsx b/src/components/ui/Menubar/stories/Menubar.stories.tsx
index f9269b58e..732755e07 100644
--- a/src/components/ui/Menubar/stories/Menubar.stories.tsx
+++ b/src/components/ui/Menubar/stories/Menubar.stories.tsx
@@ -34,6 +34,7 @@ const SampleMenu = () => (
                 <Menubar.Item label="Profile">Profile</Menubar.Item>
                 <Menubar.Item label="Settings">Settings</Menubar.Item>
                 <Menubar.Item label="Notifications">Notifications</Menubar.Item>
+                <Menubar.Separator/>
                 <Menubar.Sub >
                     <Menubar.SubTrigger >More Options <ChevronRight /></Menubar.SubTrigger>
                     <Menubar.Content >

From 955bc2a1967741dec39d5f6e03e6703e4d5c56a3 Mon Sep 17 00:00:00 2001
From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com>
Date: Tue, 16 Sep 2025 11:38:45 +0530
Subject: [PATCH 2/8] add: forward ref to comps

---
 .../fragments/ContextMenuSeparator.tsx        | 22 ++++++++++++++----
 .../fragments/DropdownMenuSeparator.tsx       | 23 +++++++++++++++----
 .../ui/Menubar/fragments/MenubarSeparator.tsx | 23 +++++++++++++++----
 3 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
index 6ebb52e61..3848dabe6 100644
--- a/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
+++ b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
@@ -1,10 +1,24 @@
-import React from 'react';
+import React, { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
 import Separator from '../../Separator/Separator';
+import ContextMenuContext from '../contexts/ContextMenuContext';
+import clsx from 'clsx';
 
-function ContextMenuSeparator() {
+export type ContextMenuSeparatorElement = ElementRef<typeof Separator>;
+export type ContextMenuSeparatorProps = {
+    className?: string
+}& ComponentPropsWithoutRef<typeof Separator>;
+const ContextMenuSeparator = forwardRef<ContextMenuSeparatorElement, ContextMenuSeparatorProps>(({ className, ...props }: ContextMenuSeparatorProps, ref) => {
+    const context = React.useContext(ContextMenuContext);
+    if (!context) {
+        console.warn('ContextMenuSeparator should be used within ContextMenuRoot');
+        return null;
+    }
+    const { rootClass } = context;
     return (
-        <Separator/>
+        <Separator ref={ref} customRootClass={clsx(`${rootClass}-separator`, className)} {...props}/>
     );
-}
+});
+
+ContextMenuSeparator.displayName = 'ContextMenuSeparator';
 
 export default ContextMenuSeparator;
diff --git a/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
index f1672902c..98bf0d92d 100644
--- a/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
+++ b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
@@ -1,10 +1,25 @@
-import React from 'react';
+import React, { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
 import Separator from '../../Separator/Separator';
+import DropdownMenuContext from '../contexts/DropdownMenuContext';
+import clsx from 'clsx';
 
-function DropdownMenuSeparator() {
+export type DropdownMenuSeparatorElement = ElementRef<typeof Separator>;
+export type DropdownMenuSeparatorProps = {
+    className?: string
+} & ComponentPropsWithoutRef<typeof Separator>;
+
+const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(({ className, ...props }: DropdownMenuSeparatorProps, ref) => {
+    const context = React.useContext(DropdownMenuContext);
+    if (!context) {
+        console.warn('DropdownMenuSeparator should be used within DropdownMenuRoot');
+        return null;
+    }
+    const { rootClass } = context;
     return (
-        <Separator/>
+        <Separator ref={ref} customRootClass={clsx(`${rootClass}-separator`, className)} {...props}/>
     );
-}
+});
+
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
 
 export default DropdownMenuSeparator;
diff --git a/src/components/ui/Menubar/fragments/MenubarSeparator.tsx b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
index 021bf60b1..f42378e9f 100644
--- a/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
+++ b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
@@ -1,10 +1,25 @@
-import React from 'react';
+import React, { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
 import Separator from '../../Separator/Separator';
+import MenubarContext from '../contexts/MenubarContext';
+import clsx from 'clsx';
 
-function MenubarSeparator() {
+export type MenubarSeparatorElement = ElementRef<typeof Separator>;
+export type MenubarSeparatorProps = {
+    className?: string
+} & ComponentPropsWithoutRef<typeof Separator>;
+
+const MenubarSeparator = forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(({ className, ...props }: MenubarSeparatorProps, ref) => {
+    const context = React.useContext(MenubarContext);
+    if (!context) {
+        console.warn('MenubarSeparator should be used within MenubarRoot');
+        return null;
+    }
+    const { rootClass } = context;
     return (
-        <Separator/>
+        <Separator ref={ref} customRootClass={clsx(`${rootClass}-separator`, className)} {...props}/>
     );
-}
+});
+
+MenubarSeparator.displayName = 'MenubarSeparator';
 
 export default MenubarSeparator;

From 74f4538deb8cb0263e6ed7be2dec5c6b49625fe0 Mon Sep 17 00:00:00 2001
From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com>
Date: Tue, 16 Sep 2025 11:45:12 +0530
Subject: [PATCH 3/8] add: styles

---
 .../fragments/ContextMenuSeparator.tsx        |  2 +-
 .../fragments/DropdownMenuSeparator.tsx       |  2 +-
 .../ui/Menubar/fragments/MenubarSeparator.tsx |  2 +-
 styles/themes/components/context-menu.scss    | 17 +++++++++++++++++
 styles/themes/components/dropdown-menu.scss   | 19 +++++++++++++++++++
 styles/themes/components/menubar.scss         | 17 +++++++++++++++++
 6 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
index 3848dabe6..15e2a5f05 100644
--- a/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
+++ b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
@@ -15,7 +15,7 @@ const ContextMenuSeparator = forwardRef<ContextMenuSeparatorElement, ContextMenu
     }
     const { rootClass } = context;
     return (
-        <Separator ref={ref} customRootClass={clsx(`${rootClass}-separator`, className)} {...props}/>
+        <Separator ref={ref} customRootClass={clsx(`${rootClass}`, className)} {...props}/>
     );
 });
 
diff --git a/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
index 98bf0d92d..5549dc593 100644
--- a/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
+++ b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
@@ -16,7 +16,7 @@ const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownM
     }
     const { rootClass } = context;
     return (
-        <Separator ref={ref} customRootClass={clsx(`${rootClass}-separator`, className)} {...props}/>
+        <Separator ref={ref} customRootClass={clsx(`${rootClass}`, className)} {...props}/>
     );
 });
 
diff --git a/src/components/ui/Menubar/fragments/MenubarSeparator.tsx b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
index f42378e9f..7eec79f2c 100644
--- a/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
+++ b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
@@ -16,7 +16,7 @@ const MenubarSeparator = forwardRef<MenubarSeparatorElement, MenubarSeparatorPro
     }
     const { rootClass } = context;
     return (
-        <Separator ref={ref} customRootClass={clsx(`${rootClass}-separator`, className)} {...props}/>
+        <Separator ref={ref} customRootClass={clsx(`${rootClass}`, className)} {...props}/>
     );
 });
 
diff --git a/styles/themes/components/context-menu.scss b/styles/themes/components/context-menu.scss
index 135047b7e..91800aefb 100644
--- a/styles/themes/components/context-menu.scss
+++ b/styles/themes/components/context-menu.scss
@@ -132,5 +132,22 @@ width:max-content;
     }
 }
 
+.rad-ui-context-menu-separator {
+    background-color: var(--rad-ui-color-gray-600);
+    align-self: stretch;
+}
+
+.rad-ui-context-menu-separator[data-rad-ui-accent-color] {
+    background-color: var(--rad-ui-color-accent-900);
+}
 
+.rad-ui-context-menu-separator-vertical{
+    margin: 0 8px;
+    width: 1px;
+}
+
+.rad-ui-context-menu-separator-horizontal{
+    margin: 8px 0;
+    height: 1px;
+}
 
diff --git a/styles/themes/components/dropdown-menu.scss b/styles/themes/components/dropdown-menu.scss
index 216c1d7ed..2226f4167 100644
--- a/styles/themes/components/dropdown-menu.scss
+++ b/styles/themes/components/dropdown-menu.scss
@@ -156,5 +156,24 @@ width:max-content;
     }
 }
 
+.rad-ui-dropdown-menu-separator {
+    background-color: var(--rad-ui-color-gray-600);
+    align-self: stretch;
+}
+
+.rad-ui-dropdown-menu-separator[data-rad-ui-accent-color] {
+    background-color: var(--rad-ui-color-accent-900);
+}
+
+.rad-ui-dropdown-menu-separator-vertical{
+    margin: 0 8px;
+    width: 1px;
+}
+
+.rad-ui-dropdown-menu-separator-horizontal{
+    margin: 8px 0;
+    height: 1px;
+}
+
 
 
diff --git a/styles/themes/components/menubar.scss b/styles/themes/components/menubar.scss
index b8bf522c0..504e38d4e 100644
--- a/styles/themes/components/menubar.scss
+++ b/styles/themes/components/menubar.scss
@@ -170,5 +170,22 @@ width:max-content;
     }
 }
 
+.rad-ui-menubar-separator {
+    background-color: var(--rad-ui-color-gray-600);
+    align-self: stretch;
+}
+
+.rad-ui-menubar-separator[data-rad-ui-accent-color] {
+    background-color: var(--rad-ui-color-accent-900);
+}
 
+.rad-ui-menubar-separator-vertical{
+    margin: 0 8px;
+    width: 1px;
+}
+
+.rad-ui-menubar-separator-horizontal{
+    margin: 8px 0;
+    height: 1px;
+}
 

From 9c02fa194669048390dffb86aa46131fe286aab5 Mon Sep 17 00:00:00 2001
From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com>
Date: Tue, 16 Sep 2025 11:54:38 +0530
Subject: [PATCH 4/8] add: changeset

---
 .changeset/calm-times-switch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/calm-times-switch.md

diff --git a/.changeset/calm-times-switch.md b/.changeset/calm-times-switch.md
new file mode 100644
index 000000000..3c917a7ec
--- /dev/null
+++ b/.changeset/calm-times-switch.md
@@ -0,0 +1,5 @@
+---
+"@radui/ui": patch
+---
+
+Added Separator for dropdown , context and menubar menus

From 7a5e9e0f80db3fe0c0a853ae07aad2513a739194 Mon Sep 17 00:00:00 2001
From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com>
Date: Tue, 16 Sep 2025 11:56:34 +0530
Subject: [PATCH 5/8] fix: coverage workflow

---
 .github/workflows/coverage.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
index e4bc0d318..ec57bf87d 100644
--- a/.github/workflows/coverage.yml
+++ b/.github/workflows/coverage.yml
@@ -1,7 +1,7 @@
 name: Coverage
 
 on:
-  pull_request:
+  pull_request_target:
     branches: [ main ]
 
 permissions:

From 768f14ac0ae4ff6030552d03c473c3cff60c7e9b Mon Sep 17 00:00:00 2001
From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com>
Date: Tue, 16 Sep 2025 12:00:02 +0530
Subject: [PATCH 6/8] revert: coverage workflow

---
 .github/workflows/coverage.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
index ec57bf87d..e4bc0d318 100644
--- a/.github/workflows/coverage.yml
+++ b/.github/workflows/coverage.yml
@@ -1,7 +1,7 @@
 name: Coverage
 
 on:
-  pull_request_target:
+  pull_request:
     branches: [ main ]
 
 permissions:

From 109253e9707026e47c2dda9b0891a9b8b705a5bd Mon Sep 17 00:00:00 2001
From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com>
Date: Tue, 16 Sep 2025 19:18:10 +0530
Subject: [PATCH 7/8] fix: props

---
 .../ui/ContextMenu/fragments/ContextMenuSeparator.tsx     | 8 ++++----
 .../ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx   | 8 ++++----
 src/components/ui/Menubar/fragments/MenubarSeparator.tsx  | 8 +++++---
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
index 15e2a5f05..80f86eba5 100644
--- a/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
+++ b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
@@ -1,21 +1,21 @@
 import React, { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
 import Separator from '../../Separator/Separator';
 import ContextMenuContext from '../contexts/ContextMenuContext';
-import clsx from 'clsx';
 
 export type ContextMenuSeparatorElement = ElementRef<typeof Separator>;
 export type ContextMenuSeparatorProps = {
     className?: string
+    customRootClass?: string
 }& ComponentPropsWithoutRef<typeof Separator>;
-const ContextMenuSeparator = forwardRef<ContextMenuSeparatorElement, ContextMenuSeparatorProps>(({ className, ...props }: ContextMenuSeparatorProps, ref) => {
+const ContextMenuSeparator = forwardRef<ContextMenuSeparatorElement, ContextMenuSeparatorProps>(({ className, customRootClass, ...props }: ContextMenuSeparatorProps, ref) => {
     const context = React.useContext(ContextMenuContext);
     if (!context) {
         console.warn('ContextMenuSeparator should be used within ContextMenuRoot');
         return null;
     }
-    const { rootClass } = context;
+    const rootClass = customRootClass || context.rootClass;
     return (
-        <Separator ref={ref} customRootClass={clsx(`${rootClass}`, className)} {...props}/>
+        <Separator ref={ref} customRootClass={rootClass} className={className} {...props}/>
     );
 });
 
diff --git a/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
index 5549dc593..58851d04c 100644
--- a/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
+++ b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
@@ -1,22 +1,22 @@
 import React, { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
 import Separator from '../../Separator/Separator';
 import DropdownMenuContext from '../contexts/DropdownMenuContext';
-import clsx from 'clsx';
 
 export type DropdownMenuSeparatorElement = ElementRef<typeof Separator>;
 export type DropdownMenuSeparatorProps = {
     className?: string
+    customRootClass?: string
 } & ComponentPropsWithoutRef<typeof Separator>;
 
-const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(({ className, ...props }: DropdownMenuSeparatorProps, ref) => {
+const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(({ className, customRootClass, ...props }: DropdownMenuSeparatorProps, ref) => {
     const context = React.useContext(DropdownMenuContext);
     if (!context) {
         console.warn('DropdownMenuSeparator should be used within DropdownMenuRoot');
         return null;
     }
-    const { rootClass } = context;
+    const rootClass = customRootClass || context.rootClass;
     return (
-        <Separator ref={ref} customRootClass={clsx(`${rootClass}`, className)} {...props}/>
+        <Separator ref={ref} customRootClass={rootClass} className={className} {...props}/>
     );
 });
 
diff --git a/src/components/ui/Menubar/fragments/MenubarSeparator.tsx b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
index 7eec79f2c..95f4c02a3 100644
--- a/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
+++ b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
@@ -6,17 +6,19 @@ import clsx from 'clsx';
 export type MenubarSeparatorElement = ElementRef<typeof Separator>;
 export type MenubarSeparatorProps = {
     className?: string
+    customRootClass?: string
 } & ComponentPropsWithoutRef<typeof Separator>;
 
-const MenubarSeparator = forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(({ className, ...props }: MenubarSeparatorProps, ref) => {
+const MenubarSeparator = forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(({ className, customRootClass, ...props }: MenubarSeparatorProps, ref) => {
     const context = React.useContext(MenubarContext);
     if (!context) {
         console.warn('MenubarSeparator should be used within MenubarRoot');
         return null;
     }
-    const { rootClass } = context;
+    const rootClass = customRootClass || context.rootClass;
+
     return (
-        <Separator ref={ref} customRootClass={clsx(`${rootClass}`, className)} {...props}/>
+        <Separator ref={ref} customRootClass={rootClass} className={className} {...props}/>
     );
 });
 

From 1262db561d299805b38d01452556cd4f042908bd Mon Sep 17 00:00:00 2001
From: GoldGroove06 <73437174+GoldGroove06@users.noreply.github.com>
Date: Fri, 19 Sep 2025 22:54:58 +0530
Subject: [PATCH 8/8] fix: customRootClass

---
 .../ui/ContextMenu/fragments/ContextMenuSeparator.tsx        | 5 ++---
 .../ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx      | 5 ++---
 src/components/ui/Menubar/fragments/MenubarSeparator.tsx     | 5 ++---
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
index 80f86eba5..6778ec60c 100644
--- a/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
+++ b/src/components/ui/ContextMenu/fragments/ContextMenuSeparator.tsx
@@ -5,15 +5,14 @@ import ContextMenuContext from '../contexts/ContextMenuContext';
 export type ContextMenuSeparatorElement = ElementRef<typeof Separator>;
 export type ContextMenuSeparatorProps = {
     className?: string
-    customRootClass?: string
 }& ComponentPropsWithoutRef<typeof Separator>;
-const ContextMenuSeparator = forwardRef<ContextMenuSeparatorElement, ContextMenuSeparatorProps>(({ className, customRootClass, ...props }: ContextMenuSeparatorProps, ref) => {
+const ContextMenuSeparator = forwardRef<ContextMenuSeparatorElement, ContextMenuSeparatorProps>(({ className, ...props }: ContextMenuSeparatorProps, ref) => {
     const context = React.useContext(ContextMenuContext);
     if (!context) {
         console.warn('ContextMenuSeparator should be used within ContextMenuRoot');
         return null;
     }
-    const rootClass = customRootClass || context.rootClass;
+    const { rootClass } = context;
     return (
         <Separator ref={ref} customRootClass={rootClass} className={className} {...props}/>
     );
diff --git a/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
index 58851d04c..22b63cca1 100644
--- a/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
+++ b/src/components/ui/DropdownMenu/fragments/DropdownMenuSeparator.tsx
@@ -5,16 +5,15 @@ import DropdownMenuContext from '../contexts/DropdownMenuContext';
 export type DropdownMenuSeparatorElement = ElementRef<typeof Separator>;
 export type DropdownMenuSeparatorProps = {
     className?: string
-    customRootClass?: string
 } & ComponentPropsWithoutRef<typeof Separator>;
 
-const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(({ className, customRootClass, ...props }: DropdownMenuSeparatorProps, ref) => {
+const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(({ className, ...props }: DropdownMenuSeparatorProps, ref) => {
     const context = React.useContext(DropdownMenuContext);
     if (!context) {
         console.warn('DropdownMenuSeparator should be used within DropdownMenuRoot');
         return null;
     }
-    const rootClass = customRootClass || context.rootClass;
+    const { rootClass } = context;
     return (
         <Separator ref={ref} customRootClass={rootClass} className={className} {...props}/>
     );
diff --git a/src/components/ui/Menubar/fragments/MenubarSeparator.tsx b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
index 95f4c02a3..3ec30aa13 100644
--- a/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
+++ b/src/components/ui/Menubar/fragments/MenubarSeparator.tsx
@@ -6,16 +6,15 @@ import clsx from 'clsx';
 export type MenubarSeparatorElement = ElementRef<typeof Separator>;
 export type MenubarSeparatorProps = {
     className?: string
-    customRootClass?: string
 } & ComponentPropsWithoutRef<typeof Separator>;
 
-const MenubarSeparator = forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(({ className, customRootClass, ...props }: MenubarSeparatorProps, ref) => {
+const MenubarSeparator = forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(({ className, ...props }: MenubarSeparatorProps, ref) => {
     const context = React.useContext(MenubarContext);
     if (!context) {
         console.warn('MenubarSeparator should be used within MenubarRoot');
         return null;
     }
-    const rootClass = customRootClass || context.rootClass;
+    const { rootClass } = context;
 
     return (
         <Separator ref={ref} customRootClass={rootClass} className={className} {...props}/>