From 092c36a79995055e3a382bb47d08cccf52e63e8c Mon Sep 17 00:00:00 2001
From: bhscer <129813414+bhscer@users.noreply.github.com>
Date: Thu, 15 Jan 2026 18:04:20 +0800
Subject: [PATCH 1/3] fix: also consider divider size

---
 examples/StyledExample.tsx   | 6 +++++-
 examples/styles.css          | 1 +
 src/components/SplitPane.tsx | 9 ++++++++-
 src/types/index.ts           | 3 +++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/examples/StyledExample.tsx b/examples/StyledExample.tsx
index 4cda958f..fb47cb87 100644
--- a/examples/StyledExample.tsx
+++ b/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>
diff --git a/examples/styles.css b/examples/styles.css
index a5bcce54..a2fa5a3a 100644
--- a/examples/styles.css
+++ b/examples/styles.css
@@ -210,6 +210,7 @@ body {
 /* Styled example */
 .styled-pane {
   color: #fff;
+  border-radius: 40px;
 }
 
 .styled-pane h3 {
diff --git a/src/components/SplitPane.tsx b/src/components/SplitPane.tsx
index 5452e997..933437c8 100644
--- a/src/components/SplitPane.tsx
+++ b/src/components/SplitPane.tsx
@@ -57,6 +57,7 @@ export function SplitPane(props: SplitPaneProps) {
     className,
     style,
     divider: CustomDivider,
+    dividerSize,
     dividerStyle,
     dividerClassName,
     children,
@@ -124,6 +125,12 @@ export function SplitPane(props: SplitPaneProps) {
         return new Array(paneCount).fill(0);
       }
 
+      // Caluclate space for dividers
+      const dividerSpace =
+        (paneConfigs.length - 1) *
+        convertToPixels(dividerSize ?? '1px', containerSz);
+      containerSz -= dividerSpace;
+
       // First pass: calculate sizes for panes with explicit sizes
       const sizes: (number | null)[] = paneConfigs.map((config) => {
         const paneSize = config.size ?? config.defaultSize;
@@ -145,7 +152,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[]>(() =>
diff --git a/src/types/index.ts b/src/types/index.ts
index bfd9f0ca..4219c614 100644
--- a/src/types/index.ts
+++ b/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;
 

From d44fc1bf2d56dedcd53ee1d28ef356de67c6bff7 Mon Sep 17 00:00:00 2001
From: bhscer <129813414+bhscer@users.noreply.github.com>
Date: Thu, 15 Jan 2026 18:17:43 +0800
Subject: [PATCH 2/3] fix: set default dividerSize to 0px to fit the old
 expected sizes

---
 src/components/SplitPane.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SplitPane.tsx b/src/components/SplitPane.tsx
index 933437c8..4338c191 100644
--- a/src/components/SplitPane.tsx
+++ b/src/components/SplitPane.tsx
@@ -128,7 +128,7 @@ export function SplitPane(props: SplitPaneProps) {
       // Caluclate space for dividers
       const dividerSpace =
         (paneConfigs.length - 1) *
-        convertToPixels(dividerSize ?? '1px', containerSz);
+        convertToPixels(dividerSize ?? '0px', containerSz);
       containerSz -= dividerSpace;
 
       // First pass: calculate sizes for panes with explicit sizes

From aa7b1685f6e0ee71b13d8abf058b35dfc6ccf8fa Mon Sep 17 00:00:00 2001
From: bhscer <129813414+bhscer@users.noreply.github.com>
Date: Thu, 15 Jan 2026 21:08:25 +0800
Subject: [PATCH 3/3] fix: 'distributeSizes' also need consider divider size

---
 src/components/SplitPane.tsx | 23 +++++++++++++++++------
 src/utils/calculations.ts    |  6 +++++-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/SplitPane.tsx b/src/components/SplitPane.tsx
index 4338c191..84005726 100644
--- a/src/components/SplitPane.tsx
+++ b/src/components/SplitPane.tsx
@@ -118,6 +118,16 @@ 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[] => {
@@ -125,11 +135,8 @@ export function SplitPane(props: SplitPaneProps) {
         return new Array(paneCount).fill(0);
       }
 
-      // Caluclate space for dividers
-      const dividerSpace =
-        (paneConfigs.length - 1) *
-        convertToPixels(dividerSize ?? '0px', containerSz);
-      containerSz -= dividerSpace;
+      // Subtract space for dividers
+      containerSz -= calculateDividersTotalSize(containerSz);
 
       // First pass: calculate sizes for panes with explicit sizes
       const sizes: (number | null)[] = paneConfigs.map((config) => {
@@ -214,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
diff --git a/src/utils/calculations.ts b/src/utils/calculations.ts
index 7761b77a..2f1e2230 100644
--- a/src/utils/calculations.ts
+++ b/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) {