fix: also consider divider size

examples/StyledExample.tsx

@@ -35,7 +35,11 @@ export function StyledExample() {
         <p>Use a custom divider component for different styles.</p>
       </div>
       <div className="example-content">
-        <SplitPane direction="horizontal" divider={CustomDivider}>
+        <SplitPane
+          direction="horizontal"
+          divider={CustomDivider}
+          dividerSize="8px"
+        >
           <Pane defaultSize="33%">
             <div className="pane styled-pane purple">
               <h3>Panel 1</h3>

examples/styles.css

@@ -210,6 +210,7 @@ body {
 /* Styled example */
 .styled-pane {
   color: #fff;
+  border-radius: 40px;
 }
 
 .styled-pane h3 {

src/components/SplitPane.tsx

@@ -57,6 +57,7 @@ export function SplitPane(props: SplitPaneProps) {
     className,
     style,
     divider: CustomDivider,
+    dividerSize,
     dividerStyle,
     dividerClassName,
     children,
@@ -117,13 +118,26 @@ export function SplitPane(props: SplitPaneProps) {
     return { minSizes: mins, maxSizes: maxs };
   }, [containerSize, paneCount, paneConfigs]);
 
+  // Caluclate space for dividers
+  const calculateDividersTotalSize = useCallback(
+    (containerSz: number) => {
+      return (
+        (paneCount - 1) * convertToPixels(dividerSize ?? '0px', containerSz)
+      );
+    },
+    [paneCount, dividerSize]
+  );
+
   // Calculate initial sizes from pane configs
   const calculateInitialSizes = useCallback(
     (containerSz: number): number[] => {
       if (containerSz === 0) {
         return new Array(paneCount).fill(0);
       }
 
+      // Subtract space for dividers
+      containerSz -= calculateDividersTotalSize(containerSz);
+
       // First pass: calculate sizes for panes with explicit sizes
       const sizes: (number | null)[] = paneConfigs.map((config) => {
         const paneSize = config.size ?? config.defaultSize;
@@ -145,7 +159,7 @@ export function SplitPane(props: SplitPaneProps) {
       // Second pass: fill in auto-sized panes
       return sizes.map((size) => (size === null ? autoSize : size));
     },
-    [paneCount, paneConfigs]
+    [paneCount, paneConfigs, dividerSize]
   );
 
   const [paneSizes, setPaneSizes] = useState<number[]>(() =>
@@ -207,7 +221,11 @@ export function SplitPane(props: SplitPaneProps) {
             return calculateInitialSizes(newContainerSize);
           }
           // For uncontrolled panes, distribute proportionally
-          return distributeSizes(currentSizes, newContainerSize);
+          return distributeSizes(
+            currentSizes,
+            newContainerSize,
+            calculateDividersTotalSize(newContainerSize)
+          );
         }
 
         // First measurement - use initial sizes

src/types/index.ts

@@ -44,6 +44,9 @@ export interface SplitPaneProps {
   /** Custom divider component */
   divider?: React.ComponentType<DividerProps>;
 
+  /** Custom divider size */
+  dividerSize?: Size;
+
   /** Custom divider styles */
   dividerStyle?: CSSProperties;
 

src/utils/calculations.ts

@@ -53,8 +53,12 @@ export function snapToPoint(
  */
 export function distributeSizes(
   currentSizes: number[],
-  newContainerSize: number
+  newContainerSize: number,
+  dividersTotalSize: number = 0
 ): number[] {
+  // Subtract space for dividers
+  newContainerSize -= dividersTotalSize;
+
   const totalCurrentSize = currentSizes.reduce((sum, size) => sum + size, 0);
 
   if (totalCurrentSize === 0) {