feat(styles): add support for custom className and style props in DualScrollSyncLabel component

Author: dorixdev

lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.test.tsx

@@ -24,4 +24,30 @@ describe('DualScrollSyncLabel', () => {
 		expect(getByText('Bold Label')).toBeInTheDocument();
 		expect(getByText('Bold Label').tagName).toBe('STRONG');
 	});
+
+	it('should apply custom className and style', () => {
+		const { getByText } = render(
+			<DualScrollSyncLabel className="custom-class" style={{ borderWidth: '1px' }}>
+				Styled Label
+			</DualScrollSyncLabel>
+		);
+
+		const label = getByText('Styled Label');
+
+		expect(label).toHaveClass('custom-class');
+		expect(label).toHaveStyle('border-width: 1px');
+	});
+
+	it('should not apply custom className or style if children is not a string', () => {
+		const { getByText } = render(
+			<DualScrollSyncLabel className="custom-class" style={{ borderWidth: '1px' }}>
+				<span>Styled Child</span>
+			</DualScrollSyncLabel>
+		);
+
+		const label = getByText('Styled Child');
+
+		expect(label).not.toHaveClass('custom-class');
+		expect(label).not.toHaveStyle('border-width: 1px');
+	});
 });

lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.tsx

@@ -1,17 +1,26 @@
+import clsx from 'clsx';
 import type { FC } from 'react';
 
 import { useDualScrollSyncContext } from '@/hooks';
 
 import styles from './DualScrollSyncLabel.module.scss';
 import type { DualScrollSyncLabelProps } from './DualScrollSyncLabel.types';
 
-export const DualScrollSyncLabel: FC<DualScrollSyncLabelProps> = ({ children }) => {
+export const DualScrollSyncLabel: FC<DualScrollSyncLabelProps> = ({
+	children,
+	className,
+	style = {}
+}) => {
 	useDualScrollSyncContext();
 
 	if (typeof children !== 'string') return children;
 
 	return (
-		<span className={styles.scrollSyncContentSectionLabel} title={children}>
+		<span
+			className={clsx(styles.scrollSyncContentSectionLabel, className)}
+			title={children}
+			style={style}
+		>
 			{children}
 		</span>
 	);