feat(styles): add custom className and style support in DualScrollSyncNav component

Author: dorixdev

lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.test.tsx

@@ -44,4 +44,17 @@ describe('DualScrollSyncNav', () => {
 		const navElement = getByTestId('test-nav-id');
 		expect(navElement).toHaveStyle({ '--menu-nav-visible-count': '3' });
 	});
+
+	it('should apply custom className and style', () => {
+		const { getByTestId } = render(
+			<DualScrollSyncNav className="custom-class" style={{ borderWidth: '1px' }}>
+				<div>Styled Content</div>
+			</DualScrollSyncNav>
+		);
+
+		const nav = getByTestId('test-nav-id');
+
+		expect(nav).toHaveClass('custom-class');
+		expect(nav).toHaveStyle('border-width: 1px');
+	});
 });

lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.tsx

@@ -10,8 +10,8 @@ import type { DualScrollSyncNavProps } from './DualScrollSyncNav.types';
 export const DualScrollSyncNav: FC<DualScrollSyncNavProps> = ({
 	children,
 	className,
-	style = {},
-	maxVisibleItems = 6
+	maxVisibleItems = 6,
+	style = {}
 }) => {
 	const { navId, navRef } = useDualScrollSyncContext();
 	const navItemCount = Children.count(children);