refactor: forward refs in Splitter

src/components/ui/Splitter/Splitter.tsx

@@ -25,16 +25,22 @@ import SplitterHandle from './fragments/SplitterHandle';
  * ```
  */
 
-// Empty props type - only supporting fragment exports
-export type SplitterProps = React.HTMLAttributes<HTMLDivElement> & {
-    children?: React.ReactNode;
+export type SplitterProps = React.ComponentPropsWithoutRef<'div'>;
+
+type SplitterComponent = React.ForwardRefExoticComponent<
+    SplitterProps & React.RefAttributes<HTMLDivElement>
+> & {
+    Root: typeof SplitterRoot;
+    Panel: typeof SplitterPanel;
+    Handle: typeof SplitterHandle;
 };
 
-// Empty implementation - we don't support direct usage
-const Splitter = () => {
+const Splitter = React.forwardRef<React.ElementRef<'div'>, SplitterProps>((props, ref) => {
     console.warn('Direct usage of Splitter is not supported. Please use Splitter.Root, Splitter.Panel, etc. instead.');
-    return null;
-};
+    return <div ref={ref} {...props} />;
+}) as SplitterComponent;
+
+Splitter.displayName = 'Splitter';
 
 Splitter.Root = SplitterRoot;
 Splitter.Panel = SplitterPanel;

src/components/ui/Splitter/fragments/SplitterHandle.tsx

@@ -1,39 +1,37 @@
 'use client';
 import React from 'react';
-import { customClassSwitcher } from '~/core';
 import { clsx } from 'clsx';
 import { useSplitter } from './SplitterRoot';
 
-export interface SplitterHandleProps {
+export interface SplitterHandleProps extends React.ComponentPropsWithoutRef<'div'> {
   index: number;
-  className?: string;
   customRootClass?: string;
-  'aria-label'?: string;
 }
 
-const SplitterHandle: React.FC<SplitterHandleProps> = ({
-    index,
-    className = '',
-    customRootClass = '',
-    'aria-label': ariaLabel
-}) => {
+const SplitterHandle = React.forwardRef<
+    React.ElementRef<'div'>,
+    SplitterHandleProps
+>(({ index, className, 'aria-label': ariaLabel, style, ...props }, forwardedRef) => {
     const { startDrag, orientation, isDragging, activeHandleIndex, handleKeyDown, rootClass } = useSplitter();
-    const isHorizontal = orientation === 'horizontal';
     const isActive = isDragging && activeHandleIndex === index;
 
     return (
         <div
-            className={`${rootClass}-handle`}
+            {...props}
+            ref={forwardedRef}
+            className={clsx(`${rootClass}-handle`, className)}
             role="separator"
             aria-orientation={orientation}
             aria-label={ariaLabel || `${orientation} resize handle`}
             tabIndex={0}
             onMouseDown={(e) => startDrag(index, e)}
             onTouchStart={(e) => startDrag(index, e)}
             onKeyDown={(e) => handleKeyDown(index, e)}
-
+            style={style}
         />
     );
-};
+});
+
+SplitterHandle.displayName = 'SplitterHandle';
 
 export default SplitterHandle;

src/components/ui/Splitter/fragments/SplitterPanel.tsx

@@ -1,40 +1,43 @@
 'use client';
-import React, { ReactNode } from 'react';
-import { customClassSwitcher } from '~/core';
+import React from 'react';
 import { clsx } from 'clsx';
 import { useSplitter } from './SplitterRoot';
 
-export interface SplitterPanelProps {
+export interface SplitterPanelProps extends React.ComponentPropsWithoutRef<'div'> {
   index: number;
-  children: ReactNode;
-  className?: string;
   customRootClass?: string;
   minSize?: number;
   maxSize?: number;
 }
 
-const SplitterPanel: React.FC<SplitterPanelProps> = ({
-    index,
-    children,
-    className = '',
-    customRootClass = ''
-}) => {
+const SplitterPanel = React.forwardRef<
+    React.ElementRef<'div'>,
+    SplitterPanelProps
+>(({ index, children, className, style, ...props }, forwardedRef) => {
     const { sizes, orientation, rootClass } = useSplitter();
 
-    const style = {
+    const panelStyle = {
         flexBasis: `${sizes[index]}%`,
         flexGrow: 0,
         flexShrink: 0,
         overflow: 'auto',
         minWidth: orientation === 'horizontal' ? 0 : undefined,
-        minHeight: orientation === 'vertical' ? 0 : undefined
-    };
+        minHeight: orientation === 'vertical' ? 0 : undefined,
+        ...style
+    } as React.CSSProperties;
 
     return (
-        <div className={`${rootClass}-panel`} style={style}>
+        <div
+            {...props}
+            ref={forwardedRef}
+            className={clsx(`${rootClass}-panel`, className)}
+            style={panelStyle}
+        >
             {children}
         </div>
     );
-};
+});
+
+SplitterPanel.displayName = 'SplitterPanel';
 
 export default SplitterPanel;

src/components/ui/Splitter/fragments/SplitterRoot.tsx

@@ -1,13 +1,11 @@
 'use client';
-import React, { useState, useRef, useCallback, ReactNode, useMemo, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { customClassSwitcher } from '~/core';
 import { clsx } from 'clsx';
 import SplitterContext, { SplitterContextValue, SplitterOrientation } from '../context/SplitterContext';
 
-export interface SplitterRootProps {
+export interface SplitterRootProps extends React.ComponentPropsWithoutRef<'div'> {
   orientation?: SplitterOrientation;
-  children: ReactNode;
-  className?: string;
   customRootClass?: string;
   defaultSizes?: number[];
   minSizes?: number[];
@@ -26,23 +24,37 @@ export const useSplitter = () => {
 
 const COMPONENT_NAME = 'Splitter';
 
-const SplitterRoot: React.FC<SplitterRootProps> = ({
+const SplitterRoot = React.forwardRef<
+    React.ElementRef<'div'>,
+    SplitterRootProps
+>(({
     orientation = 'horizontal',
     children,
-    className = '',
+    className,
     customRootClass = '',
     defaultSizes = [50, 50],
     minSizes = [0, 0],
     maxSizes = [100, 100],
-    onSizesChange
-}) => {
+    onSizesChange,
+    style,
+    ...props
+}, forwardedRef) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    const containerRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement | null>(null);
     const [sizes, setSizes] = useState<number[]>(defaultSizes);
     const [isDragging, setIsDragging] = useState(false);
     const [activeHandleIndex, setActiveHandleIndex] = useState<number | null>(null);
     const [dragStart, setDragStart] = useState<{ position: number; sizes: number[] } | null>(null);
 
+    const mergedRef = useCallback((node: HTMLDivElement | null) => {
+        containerRef.current = node;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+        } else if (forwardedRef) {
+            (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+    }, [forwardedRef]);
+
     // Performance optimization: Memoize constraints to prevent unnecessary recalculations
     const constraints = useMemo(() => ({
         minSizes: minSizes || [],
@@ -293,19 +305,23 @@ const SplitterRoot: React.FC<SplitterRootProps> = ({
     return (
         <SplitterContext.Provider value={contextValue}>
             <div
-                ref={containerRef}
+                {...props}
+                ref={mergedRef}
                 className={clsx(rootClass, className)}
                 style={{
                     display: 'flex',
                     flexDirection: isHorizontal ? 'row' : 'column',
                     width: '100%',
-                    height: '100%'
+                    height: '100%',
+                    ...style
                 }}
             >
                 {children}
             </div>
         </SplitterContext.Provider>
     );
-};
+});
+
+SplitterRoot.displayName = 'SplitterRoot';
 
 export default SplitterRoot;

src/components/ui/Splitter/tests/Splitter.test.tsx

@@ -209,4 +209,28 @@ describe('Splitter Component', () => {
 
         consoleSpy.mockRestore();
     });
+
+    it('forwards refs to DOM elements', () => {
+        const rootRef = React.createRef<HTMLDivElement>();
+        const panelRef = React.createRef<HTMLDivElement>();
+        const handleRef = React.createRef<HTMLDivElement>();
+
+        render(
+            <div style={{ width: '400px', height: '300px' }}>
+                <Splitter.Root ref={rootRef}>
+                    <Splitter.Panel index={0} ref={panelRef}>
+                        <div data-testid="panel-0">Panel 0</div>
+                    </Splitter.Panel>
+                    <Splitter.Handle index={0} ref={handleRef} />
+                    <Splitter.Panel index={1}>
+                        <div data-testid="panel-1">Panel 1</div>
+                    </Splitter.Panel>
+                </Splitter.Root>
+            </div>
+        );
+
+        expect(rootRef.current).toBeInstanceOf(HTMLDivElement);
+        expect(panelRef.current).toBeInstanceOf(HTMLDivElement);
+        expect(handleRef.current).toBeInstanceOf(HTMLDivElement);
+    });
 });