From fc9daa80a3729d83bb645e217db50e164322762e Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Sat, 18 Apr 2026 20:49:50 +1000
Subject: [PATCH 1/3] feat(react): redesign split component

---
 .changeset/major-split-product-upgrade.md     |   6 +
 .../__snapshots__/split.test.tsx.snap         |  31 -
 .../react/src/split/__tests__/split.test.tsx  | 280 ++++++-
 packages/react/src/split/demo/Collapse.tsx    |  20 +
 .../react/src/split/demo/CustomHandle.tsx     |  78 ++
 packages/react/src/split/demo/HitAreaSize.tsx |  44 ++
 packages/react/src/split/demo/Horizontal.tsx  |  21 +-
 packages/react/src/split/demo/Multiple.tsx    |  21 +-
 packages/react/src/split/demo/Nest.tsx        |  28 +-
 packages/react/src/split/demo/Step.tsx        |  16 +-
 packages/react/src/split/demo/Vertical.tsx    |  16 +-
 packages/react/src/split/index.md             | 129 +++-
 packages/react/src/split/index.tsx            |  11 +-
 packages/react/src/split/index.zh_CN.md       | 133 +++-
 packages/react/src/split/resizer.tsx          | 152 ++--
 packages/react/src/split/split-context.ts     |   6 +-
 packages/react/src/split/split-pane.tsx       |  45 +-
 packages/react/src/split/split.tsx            | 686 ++++++++++++++----
 packages/react/src/split/style/index.scss     | 191 +++--
 packages/react/src/split/types.ts             |  98 ++-
 packages/tokens/source/components/split.json  |  71 +-
 packages/tokens/source/themes/dark.json       |   9 +-
 22 files changed, 1632 insertions(+), 460 deletions(-)
 create mode 100644 .changeset/major-split-product-upgrade.md
 delete mode 100644 packages/react/src/split/__tests__/__snapshots__/split.test.tsx.snap
 create mode 100644 packages/react/src/split/demo/Collapse.tsx
 create mode 100644 packages/react/src/split/demo/CustomHandle.tsx
 create mode 100644 packages/react/src/split/demo/HitAreaSize.tsx
 mode change 100755 => 100644 packages/react/src/split/index.tsx
 mode change 100755 => 100644 packages/react/src/split/resizer.tsx
 mode change 100755 => 100644 packages/react/src/split/split-pane.tsx
 mode change 100755 => 100644 packages/react/src/split/style/index.scss

diff --git a/.changeset/major-split-product-upgrade.md b/.changeset/major-split-product-upgrade.md
new file mode 100644
index 000000000..9d2ef29b3
--- /dev/null
+++ b/.changeset/major-split-product-upgrade.md
@@ -0,0 +1,6 @@
+---
+'@tiny-design/react': major
+'@tiny-design/tokens': major
+---
+
+Redesign the Split component with a product-grade pane model, refreshed separator styling, updated tokens, and rewritten docs/demos.
diff --git a/packages/react/src/split/__tests__/__snapshots__/split.test.tsx.snap b/packages/react/src/split/__tests__/__snapshots__/split.test.tsx.snap
deleted file mode 100644
index 155675184..000000000
--- a/packages/react/src/split/__tests__/__snapshots__/split.test.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Split /> should match the snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="ty-split ty-split_vertical"
-  >
-    <div
-      class="ty-split-pane"
-      style="flex: 0 0 auto; width: 50px;"
-    >
-      Content
-    </div>
-    <div
-      aria-orientation="vertical"
-      class="ty-split-bar ty-split-bar_vertical"
-      role="separator"
-      style="width: 6px;"
-      tabindex="0"
-    >
-      <div
-        class="ty-split-bar__icon"
-      />
-    </div>
-    <div
-      class="ty-split-pane"
-      style="flex: 1 1 0%;"
-    />
-  </div>
-</DocumentFragment>
-`;
diff --git a/packages/react/src/split/__tests__/split.test.tsx b/packages/react/src/split/__tests__/split.test.tsx
index 7ac62d980..6afd57fc8 100644
--- a/packages/react/src/split/__tests__/split.test.tsx
+++ b/packages/react/src/split/__tests__/split.test.tsx
@@ -1,15 +1,281 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import Split from '../index';
 
+const rect = ({ width = 400, height = 300 }: { width?: number; height?: number } = {}) => ({
+  width,
+  height,
+  top: 0,
+  left: 0,
+  right: width,
+  bottom: height,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
+});
+
 describe('<Split />', () => {
-  it('should match the snapshot', () => {
-    const { asFragment } = render(<Split>Content</Split>);
-    expect(asFragment()).toMatchSnapshot();
+  let rectSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    rectSpy = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function mockRect() {
+      const element = this as HTMLElement;
+      if (element.className.includes('ty-split')) {
+        return rect();
+      }
+      return rect({ width: 160, height: 120 });
+    });
+  });
+
+  afterEach(() => {
+    rectSpy.mockRestore();
+    jest.restoreAllMocks();
+  });
+
+  it('renders horizontal layout with pane API by default', async () => {
+    const { container, getByRole } = render(
+      <Split defaultSize="32%">
+        <Split.Pane>
+          <div>Left</div>
+        </Split.Pane>
+        <Split.Pane>
+          <div>Right</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    await waitFor(() => expect(getByRole('separator')).toHaveAttribute('aria-valuenow', '128'));
+    expect(container.firstChild).toHaveClass('ty-split', 'ty-split_horizontal');
+    expect(getByRole('separator')).toHaveAttribute('aria-orientation', 'vertical');
   });
 
-  it('should render correctly', () => {
-    const { container } = render(<Split>Content</Split>);
-    expect(container.firstChild).toHaveClass('ty-split');
+  it('supports controlled primary pane size', async () => {
+    const { getByRole, rerender } = render(
+      <Split size="25%">
+        <Split.Pane>
+          <div>Left</div>
+        </Split.Pane>
+        <Split.Pane>
+          <div>Right</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    await waitFor(() => expect(getByRole('separator')).toHaveAttribute('aria-valuenow', '100'));
+
+    rerender(
+      <Split size={180}>
+        <Split.Pane>
+          <div>Left</div>
+        </Split.Pane>
+        <Split.Pane>
+          <div>Right</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    await waitFor(() => expect(getByRole('separator')).toHaveAttribute('aria-valuenow', '180'));
+  });
+
+  it('supports primary second pane sizing and constraints', async () => {
+    const { getByRole } = render(
+      <Split primary="second" defaultSize="25%" min="80px" max="200px">
+        <Split.Pane min="160px">
+          <div>Canvas</div>
+        </Split.Pane>
+        <Split.Pane>
+          <div>Inspector</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    const separator = getByRole('separator');
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '100'));
+
+    fireEvent.keyDown(separator, { key: 'End' });
+
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '200'));
+  });
+
+  it('resizes with pointer dragging and emits lifecycle callbacks', async () => {
+    const onResizeStart = jest.fn();
+    const onResize = jest.fn();
+    const onResizeEnd = jest.fn();
+    const { getByRole } = render(
+      <Split defaultSize={120} onResizeStart={onResizeStart} onResize={onResize} onResizeEnd={onResizeEnd}>
+        <Split.Pane>
+          <div>Left</div>
+        </Split.Pane>
+        <Split.Pane min="120px">
+          <div>Right</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    const separator = getByRole('separator');
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '120'));
+
+    fireEvent.mouseDown(separator, { clientX: 120 });
+    fireEvent.mouseMove(window, { clientX: 220 });
+    fireEvent.mouseUp(window);
+
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '220'));
+    expect(onResizeStart).toHaveBeenCalledWith(120);
+    expect(onResize).toHaveBeenCalledWith(220);
+    expect(onResizeEnd).toHaveBeenCalledWith(220);
+  });
+
+  it('supports vertical keyboard resizing', async () => {
+    const { getByRole } = render(
+      <Split orientation="vertical" defaultSize="40%">
+        <Split.Pane>
+          <div>Top</div>
+        </Split.Pane>
+        <Split.Pane>
+          <div>Bottom</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    const separator = getByRole('separator');
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '120'));
+
+    fireEvent.keyDown(separator, { key: 'ArrowDown' });
+
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '132'));
+    expect(separator).toHaveAttribute('aria-orientation', 'horizontal');
+  });
+
+  it('supports collapsible primary pane from keyboard and double click', async () => {
+    const onCollapseChange = jest.fn();
+    const { getByRole } = render(
+      <Split defaultSize={160} collapsible collapsedSize={64} onCollapseChange={onCollapseChange}>
+        <Split.Pane>
+          <div>Sidebar</div>
+        </Split.Pane>
+        <Split.Pane min="160px">
+          <div>Content</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    const separator = getByRole('separator');
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '160'));
+
+    fireEvent.keyDown(separator, { key: 'Enter' });
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '64'));
+
+    fireEvent.doubleClick(separator);
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '160'));
+
+    expect(onCollapseChange).toHaveBeenNthCalledWith(1, true);
+    expect(onCollapseChange).toHaveBeenNthCalledWith(2, false);
+  });
+
+  it('does not resize when disabled', async () => {
+    const onResize = jest.fn();
+    const { getByRole } = render(
+      <Split disabled defaultSize={140} onResize={onResize}>
+        <Split.Pane>
+          <div>Left</div>
+        </Split.Pane>
+        <Split.Pane>
+          <div>Right</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    const separator = getByRole('separator');
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '140'));
+
+    fireEvent.mouseDown(separator, { clientX: 140 });
+    fireEvent.mouseMove(window, { clientX: 220 });
+    fireEvent.mouseUp(window);
+    fireEvent.keyDown(separator, { key: 'ArrowRight' });
+
+    expect(separator).toHaveAttribute('aria-valuenow', '140');
+    expect(onResize).not.toHaveBeenCalled();
+    expect(separator).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('warns and skips separator when children count is invalid', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const { queryByRole } = render(
+      <Split>{[<Split.Pane key="only">Only</Split.Pane>] as unknown as [React.ReactNode, React.ReactNode]}</Split>
+    );
+
+    expect(warnSpy).toHaveBeenCalledWith('Warning: Split expects exactly two children.');
+    expect(queryByRole('separator')).not.toBeInTheDocument();
+  });
+
+  it('supports custom separator content', async () => {
+    const separatorRender = jest.fn(({ dragging, collapsed }: { dragging: boolean; collapsed: boolean }) => (
+      <span data-testid="custom-separator">
+        {collapsed ? 'collapsed' : dragging ? 'dragging' : 'idle'}
+      </span>
+    ));
+    const { getByRole, getByTestId } = render(
+      <Split defaultSize={120} collapsible collapsedSize={60} separatorRender={separatorRender}>
+        <Split.Pane>
+          <div>Left</div>
+        </Split.Pane>
+        <Split.Pane>
+          <div>Right</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    const separator = getByRole('separator');
+    await waitFor(() => expect(getByTestId('custom-separator')).toHaveTextContent('idle'));
+
+    fireEvent.mouseDown(separator, { clientX: 120 });
+    await waitFor(() => expect(getByTestId('custom-separator')).toHaveTextContent('dragging'));
+    fireEvent.mouseUp(window);
+
+    fireEvent.keyDown(separator, { key: 'Enter' });
+    await waitFor(() => expect(getByTestId('custom-separator')).toHaveTextContent('collapsed'));
+    expect(separatorRender).toHaveBeenCalled();
+  });
+
+  it('keeps separator layout size independent from the hit area size', async () => {
+    const { getByRole } = render(
+      <Split defaultSize={120} separatorSize={2} separatorHitAreaSize={24}>
+        <Split.Pane>
+          <div>Left</div>
+        </Split.Pane>
+        <Split.Pane>
+          <div>Right</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    const separator = getByRole('separator');
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '120'));
+
+    expect(separator.parentElement).toHaveStyle({ width: '2px' });
+    expect(separator).toHaveStyle({ width: '24px' });
+    expect(separator).toHaveStyle('--ty-split-bar-hit-area-size: 24px');
+  });
+
+  it('applies separatorClassName and separatorStyle to the interaction container', async () => {
+    const { getByRole } = render(
+      <Split
+        defaultSize={120}
+        separatorClassName="split-separator-test"
+        separatorStyle={{ background: 'rgba(59, 130, 246, 0.24)' }}>
+        <Split.Pane>
+          <div>Left</div>
+        </Split.Pane>
+        <Split.Pane>
+          <div>Right</div>
+        </Split.Pane>
+      </Split>
+    );
+
+    const separator = getByRole('separator');
+    await waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '120'));
+
+    expect(separator).toHaveClass('split-separator-test');
+    expect(separator).toHaveStyle({ background: 'rgba(59, 130, 246, 0.24)' });
   });
 });
diff --git a/packages/react/src/split/demo/Collapse.tsx b/packages/react/src/split/demo/Collapse.tsx
new file mode 100644
index 000000000..aa24a06e8
--- /dev/null
+++ b/packages/react/src/split/demo/Collapse.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Split } from '@tiny-design/react';
+
+export default function CollapseDemo() {
+  return (
+    <Split
+      defaultSize={240}
+      min="128px"
+      collapsible
+      collapsedSize={72}
+      style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
+      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+        Collapsible sidebar
+      </Split.Pane>
+      <Split.Pane min="160px" style={{ padding: 16 }}>
+        Press Enter on the separator or double-click it to collapse.
+      </Split.Pane>
+    </Split>
+  );
+}
diff --git a/packages/react/src/split/demo/CustomHandle.tsx b/packages/react/src/split/demo/CustomHandle.tsx
new file mode 100644
index 000000000..9bdf6bc23
--- /dev/null
+++ b/packages/react/src/split/demo/CustomHandle.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Split } from '@tiny-design/react';
+
+export default function CustomHandleDemo() {
+  return (
+    <Split
+      defaultSize="36%"
+      min="120px"
+      separatorSize={4}
+      separatorHitAreaSize={24}
+      separatorRender={({ orientation, dragging, collapsed }) => (
+        <div
+          style={{
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+          }}>
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <div
+              style={{
+                width: orientation === 'horizontal' ? 2 : '100%',
+                height: orientation === 'vertical' ? 2 : '100%',
+                background: dragging ? '#94a3b8' : '#cbd5e1',
+              }}
+            />
+          </div>
+          <div
+            style={{
+              position: 'relative',
+              zIndex: 1,
+              minWidth: orientation === 'horizontal' ? 20 : 36,
+              minHeight: orientation === 'vertical' ? 20 : 36,
+              borderRadius: 999,
+              background: collapsed ? '#e2e8f0' : '#ffffff',
+              border: `1px solid ${dragging ? '#94a3b8' : '#cbd5e1'}`,
+              boxShadow: dragging ? '0 0 0 4px rgba(148, 163, 184, 0.12)' : '0 1px 3px rgba(15, 23, 42, 0.12)',
+              display: 'flex',
+              flexDirection: orientation === 'horizontal' ? 'column' : 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 2,
+              padding: 6,
+            }}>
+            {Array.from({ length: 6 }).map((_, index) => (
+              <span
+                key={index}
+                style={{
+                  width: 3,
+                  height: 3,
+                  borderRadius: '50%',
+                  background: collapsed ? '#64748b' : '#94a3b8',
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+      style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
+      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+        Navigation
+      </Split.Pane>
+      <Split.Pane min="160px" style={{ padding: 16 }}>
+        Workspace
+      </Split.Pane>
+    </Split>
+  );
+}
diff --git a/packages/react/src/split/demo/HitAreaSize.tsx b/packages/react/src/split/demo/HitAreaSize.tsx
new file mode 100644
index 000000000..3dce8da2e
--- /dev/null
+++ b/packages/react/src/split/demo/HitAreaSize.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Flex, Slider, Split, Alert } from '@tiny-design/react';
+import type { SliderValue } from '@tiny-design/react';
+
+export default function HitAreaSizeDemo() {
+  const [hitAreaSize, setHitAreaSize] = React.useState(48);
+
+  return (
+    <Flex vertical gap="md">
+      <div style={{ fontSize: 12, color: '#6b7280' }}>Hit area: {hitAreaSize}px</div>
+      <Slider
+        min={16}
+        max={96}
+        step={4}
+        value={hitAreaSize}
+        onChange={(value: SliderValue) => {
+          if (typeof value === 'number') {
+            setHitAreaSize(value);
+          }
+        }}
+      />
+      <Split
+        defaultSize="36%"
+        min="112px"
+        separatorHitAreaSize={hitAreaSize}
+        separatorStyle={{
+          background: 'rgba(59, 130, 246, 0.24)',
+          borderLeft: '2px solid rgba(59, 130, 246, 0.7)',
+          borderRight: '2px solid rgba(59, 130, 246, 0.7)',
+        }}
+        style={{ height: 240, border: '1px solid #dcdee2', background: '#f8fafc' }}>
+        <Split.Pane style={{ padding: 16, background: '#fff' }}>
+          Navigation
+        </Split.Pane>
+        <Split.Pane min="160px" style={{ padding: 16, paddingLeft: 28 }}>
+          Workspace
+        </Split.Pane>
+      </Split>
+      <Alert type="info">
+        Blue band = interaction zone. The visual handle stays slim while the drag target grows.
+      </Alert>
+    </Flex>
+  );
+}
diff --git a/packages/react/src/split/demo/Horizontal.tsx b/packages/react/src/split/demo/Horizontal.tsx
index 741b9623b..c149227e1 100644
--- a/packages/react/src/split/demo/Horizontal.tsx
+++ b/packages/react/src/split/demo/Horizontal.tsx
@@ -1,15 +1,20 @@
 import React from 'react';
 import { Split } from '@tiny-design/react';
 
+const paneStyle: React.CSSProperties = {
+  padding: 16,
+  background: '#ffffff',
+};
+
 export default function HorizontalDemo() {
   return (
-    <Split mode="horizontal" style={{ height: 200, border: '1px solid #dcdee2' }}>
-      <div>
-        Left
-      </div>
-      <div>
-        Right
-      </div>
+    <Split defaultSize="32%" min="120px" style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
+      <Split.Pane style={paneStyle}>
+        Navigation
+      </Split.Pane>
+      <Split.Pane min="160px" style={{ ...paneStyle, background: '#f8fafc' }}>
+        Workspace
+      </Split.Pane>
     </Split>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/split/demo/Multiple.tsx b/packages/react/src/split/demo/Multiple.tsx
index dd7de4750..1a37ae39b 100644
--- a/packages/react/src/split/demo/Multiple.tsx
+++ b/packages/react/src/split/demo/Multiple.tsx
@@ -3,13 +3,18 @@ import { Split } from '@tiny-design/react';
 
 export default function MultipleDemo() {
   return (
-    <Split style={{ height: 200, border: '1px solid #dcdee2' }}>
-      <div>
-        Left
-      </div>
-      <div>
-        Right
-      </div>
+    <Split
+      primary="second"
+      defaultSize="28%"
+      min="160px"
+      max="420px"
+      style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
+      <Split.Pane min="120px" style={{ padding: 16 }}>
+        Canvas
+      </Split.Pane>
+      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+        Secondary panel
+      </Split.Pane>
     </Split>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/split/demo/Nest.tsx b/packages/react/src/split/demo/Nest.tsx
index dda70e9b7..def3998b3 100644
--- a/packages/react/src/split/demo/Nest.tsx
+++ b/packages/react/src/split/demo/Nest.tsx
@@ -3,18 +3,20 @@ import { Split } from '@tiny-design/react';
 
 export default function NestDemo() {
   return (
-    <Split defaultSize={200} style={{ height: 300, border: '1px solid #dcdee2' }}>
-      <div>
-        Left
-      </div>
-      <Split mode="horizontal">
-        <div>
-          Top
-        </div>
-        <div>
-          Bottom
-        </div>
-      </Split>
+    <Split defaultSize={220} min="120px" style={{ height: 320, border: '1px solid #dcdee2', background: '#f8fafc' }}>
+      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+        Sidebar
+      </Split.Pane>
+      <Split.Pane min="180px">
+        <Split orientation="vertical" defaultSize="38%" min="72px" style={{ height: '100%' }}>
+          <Split.Pane style={{ padding: 16, background: '#fff7ed' }}>
+            Summary
+          </Split.Pane>
+          <Split.Pane min="96px" style={{ padding: 16, background: '#ffffff' }}>
+            Detail
+          </Split.Pane>
+        </Split>
+      </Split.Pane>
     </Split>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/split/demo/Step.tsx b/packages/react/src/split/demo/Step.tsx
index 177a17a7b..8b63a13dc 100644
--- a/packages/react/src/split/demo/Step.tsx
+++ b/packages/react/src/split/demo/Step.tsx
@@ -3,13 +3,13 @@ import { Split } from '@tiny-design/react';
 
 export default function StepDemo() {
   return (
-    <Split step={30} style={{ height: 200, border: '1px solid #dcdee2' }}>
-      <div>
-        Left
-      </div>
-      <div>
-        Right
-      </div>
+    <Split dragStep={24} keyboardStep={16} defaultSize={220} min="120px" style={{ height: 220, border: '1px solid #dcdee2' }}>
+      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+        Step-based pane
+      </Split.Pane>
+      <Split.Pane min="160px" style={{ padding: 16, background: '#f8fafc' }}>
+        Content
+      </Split.Pane>
     </Split>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/split/demo/Vertical.tsx b/packages/react/src/split/demo/Vertical.tsx
index 710bf5a7c..511c68e74 100644
--- a/packages/react/src/split/demo/Vertical.tsx
+++ b/packages/react/src/split/demo/Vertical.tsx
@@ -3,13 +3,13 @@ import { Split } from '@tiny-design/react';
 
 export default function VerticalDemo() {
   return (
-    <Split style={{ height: 200, border: '1px solid #dcdee2' }}>
-      <div>
-        Left
-      </div>
-      <div>
-        Right
-      </div>
+    <Split orientation="vertical" defaultSize="42%" min="64px" style={{ height: 220, border: '1px solid #dcdee2' }}>
+      <Split.Pane style={{ padding: 16, background: '#fff7ed' }}>
+        Preview
+      </Split.Pane>
+      <Split.Pane min="72px" style={{ padding: 16, background: '#fff' }}>
+        Inspector
+      </Split.Pane>
     </Split>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/split/index.md b/packages/react/src/split/index.md
index 21385b6d0..541ea576d 100644
--- a/packages/react/src/split/index.md
+++ b/packages/react/src/split/index.md
@@ -8,14 +8,16 @@ import StepDemo from './demo/Step';
 import StepSource from './demo/Step.tsx?raw';
 import MultipleDemo from './demo/Multiple';
 import MultipleSource from './demo/Multiple.tsx?raw';
+import CustomHandleDemo from './demo/CustomHandle';
+import CustomHandleSource from './demo/CustomHandle.tsx?raw';
+import HitAreaSizeDemo from './demo/HitAreaSize';
+import HitAreaSizeSource from './demo/HitAreaSize.tsx?raw';
+import CollapseDemo from './demo/Collapse';
+import CollapseSource from './demo/Collapse.tsx?raw';
 
 # Split
 
-Divide one pane into two parts that can be dragged to adjust width or height.
-
-## Scenario
-
-When there multiple contents that need to display together, but some of them need more space to show.
+Split lays out two panes with a product-ready separator model: top-level sizing for the primary pane, explicit primary pane ownership, custom separator rendering, and collapsible side panels.
 
 ## Usage
 
@@ -23,73 +25,134 @@ When there multiple contents that need to display together, but some of them nee
 import { Split } from 'tiny-design';
 ```
 
+Use `Split` when two panels need to share the same region and users should be able to rebalance space themselves. In most cases:
+
+- Put the resizable size model on `Split` itself with `size`, `defaultSize`, `min`, and `max`.
+- Use `primary="second"` when the trailing pane should own the size model, for example an inspector on the right.
+- Keep the visual separator small, and increase `separatorHitAreaSize` if the drag target needs to be easier to grab.
+
 ## Examples
 
 <Layout>
   <Column>
     <Demo>
 
-### Vertical divider
+### Horizontal Layout
+
+The default left and right layout. This is the most common pattern for navigation and workspace content.
+
+<DemoBlock component={HorizontalDemo} source={HorizontalSource} />
+
+    </Demo>
+    <Demo>
+
+### Vertical Layout
 
-Top & Bottom.
+Use `orientation="vertical"` when content should split top and bottom, such as preview and inspector stacks.
 
 <DemoBlock component={VerticalDemo} source={VerticalSource} />
 
     </Demo>
     <Demo>
 
-### Horizontal divider
+### Collapsible Pane
 
-Left & Right.
+Enable `collapsible` when the primary pane behaves like a sidebar that should temporarily tuck away without leaving the layout.
 
-<DemoBlock component={HorizontalDemo} source={HorizontalSource} />
+<DemoBlock component={CollapseDemo} source={CollapseSource} />
+
+    </Demo>
+    <Demo>
+
+### Custom Separator
+
+`separatorRender` lets you replace the default handle while keeping the same drag, keyboard, and collapse behavior.
+
+<DemoBlock component={CustomHandleDemo} source={CustomHandleSource} />
 
     </Demo>
   </Column>
   <Column>
     <Demo>
 
-### Nest
+### Constraints
 
-Can be used nested.
+Combine `primary`, `min`, `max`, and pane-level constraints when one side should stay within a tighter product layout range.
 
-<DemoBlock component={NestDemo} source={NestSource} />
+<DemoBlock component={MultipleDemo} source={MultipleSource} />
 
     </Demo>
     <Demo>
 
-### Step
+### Hit Area Size
 
-Allow moving by a certain distance.
+Keep the separator visually slim but grow the drag target with `separatorHitAreaSize` when precision dragging feels too hard.
 
-<DemoBlock component={StepDemo} source={StepSource} />
+<DemoBlock component={HitAreaSizeDemo} source={HitAreaSizeSource} />
 
     </Demo>
     <Demo>
 
-### Multiple
+### Nested Layout
 
-Multiple divider.
+`Split` can be nested to build shells such as sidebar plus stacked detail panes. Keep each level responsible for one layout decision.
 
-<DemoBlock component={MultipleDemo} source={MultipleSource} />
+<DemoBlock component={NestDemo} source={NestSource} />
+
+    </Demo>
+    <Demo>
+
+### Step
+
+Use `dragStep` and `keyboardStep` when panel movement should snap to a consistent rhythm instead of moving freely.
+
+<DemoBlock component={StepDemo} source={StepSource} />
 
     </Demo>
   </Column>
 </Layout>
 
-## Props
+## API
 
-| Property          | Description                               | Type                                  | Default       |
+### Split
+
+| Property | Description | Type | Default |
+| ----------------- | ----------------------------------------- | ------------------------------------- | ------------- |
+| orientation | pane arrangement; `horizontal` is left/right, `vertical` is top/bottom | enum: `horizontal` \| `vertical` | `horizontal` |
+| primary | pane that owns the resizable size model | enum: `first` \| `second` | `first` |
+| disabled | disable dragging and keyboard resizing | boolean | false |
+| size | controlled size for the primary pane | number \| `${number}px` \| `${number}%` | - |
+| defaultSize | initial size for the primary pane | number \| `${number}px` \| `${number}%` | - |
+| min | minimum size for the primary pane | number \| `${number}px` \| `${number}%` | 0 |
+| max | maximum size for the primary pane | number \| `${number}px` \| `${number}%` | - |
+| collapsible | allow the primary pane to collapse | boolean | false |
+| collapsed | controlled collapsed state for the primary pane | boolean | - |
+| defaultCollapsed | initial collapsed state for the primary pane | boolean | false |
+| collapsedSize | pane size while collapsed | number \| `${number}px` \| `${number}%` | 0 |
+| onCollapseChange | callback when collapsed state changes | `(collapsed: boolean) => void` | - |
+| dragStep | pointer drag step | number | - |
+| keyboardStep | keyboard resize step | number | 12 |
+| separatorSize | visual separator thickness | number | 2 |
+| separatorHitAreaSize | interactive separator hit area size | number | 16 |
+| separatorClassName | class name applied to the separator interaction container | string | - |
+| separatorStyle | inline style applied to the separator interaction container | CSSProperties | - |
+| separatorRender | custom separator content renderer | `(props: { orientation; disabled; dragging; collapsed; collapsible; size; hitAreaSize; toggleCollapse }) => ReactNode` | - |
+| onResize | callback when the primary pane size changes | `(size: number) => void` | - |
+| onResizeStart | callback when resizing starts | `(size: number) => void` | - |
+| onResizeEnd | callback when resizing ends | `(size: number) => void` | - |
+
+### Split.Pane
+
+| Property | Description | Type | Default |
 | ----------------- | ----------------------------------------- | ------------------------------------- | ------------- |
-| mode              | split mode                                | enum: `horizontal` &#124; `vertical`  | `vertical`    |
-| disabled          | disable flag	                            | boolean                               | false         |
-| min               | minimum width / height of the target pane | number &#124; string                  | 50            |
-| max               | maximum width / height of the target pane | number &#124; string                  | 50            |
-| size              | size of target pane                       | number &#124; string                  | -             |
-| defaultSize       | default size of target pane               | number &#124; string                  | -             |
-| step              | drag step                                 | number                                | -             |
-| resizerProps      | resizer props                             | JSX.IntrinsicElements['div']          | -             |
-| resizerSize       | resizer size                              | number                                | 6             |
-| onChange          | callback when the size changed            | (size: number) => void                | -             |
-| onDragStarted     | callback when the resizer starts dragging | () => void                            | -             |
-| onDragFinished    | callback when the resizer ends dragging   | () => void                            | -             |
\ No newline at end of file
+| min | minimum pane size constraint | number \| `${number}px` \| `${number}%` | 0 |
+| max | maximum pane size constraint | number \| `${number}px` \| `${number}%` | - |
+
+## Notes
+
+- `Split` always renders exactly two panes.
+- Primary pane size and collapse props are configured on `Split`.
+- `Split.Pane` only provides pane content plus per-pane `min` and `max` constraints.
+- Pane-level `min` and `max` are still useful for protecting the non-primary pane from being squeezed too far.
+- `defaultSize` is only used during initialization. After mount, uncontrolled pane size is stored as pixels.
+- When `collapsible` is enabled, press `Enter` or `Space` on the separator to toggle collapse. Double-click also toggles it.
diff --git a/packages/react/src/split/index.tsx b/packages/react/src/split/index.tsx
old mode 100755
new mode 100644
index 7e014d1b5..ad0ed11b5
--- a/packages/react/src/split/index.tsx
+++ b/packages/react/src/split/index.tsx
@@ -1,4 +1,13 @@
 import Split from './split';
+import SplitPane from './split-pane';
 
-export default Split;
 export type * from './types';
+
+type SplitComponent = typeof Split & {
+  Pane: typeof SplitPane;
+};
+
+const DefaultSplit = Split as SplitComponent;
+DefaultSplit.Pane = SplitPane;
+
+export default DefaultSplit;
diff --git a/packages/react/src/split/index.zh_CN.md b/packages/react/src/split/index.zh_CN.md
index 81fdedf4a..52beff88e 100644
--- a/packages/react/src/split/index.zh_CN.md
+++ b/packages/react/src/split/index.zh_CN.md
@@ -8,88 +8,151 @@ import StepDemo from './demo/Step';
 import StepSource from './demo/Step.tsx?raw';
 import MultipleDemo from './demo/Multiple';
 import MultipleSource from './demo/Multiple.tsx?raw';
+import CustomHandleDemo from './demo/CustomHandle';
+import CustomHandleSource from './demo/CustomHandle.tsx?raw';
+import HitAreaSizeDemo from './demo/HitAreaSize';
+import HitAreaSizeSource from './demo/HitAreaSize.tsx?raw';
+import CollapseDemo from './demo/Collapse';
+import CollapseSource from './demo/Collapse.tsx?raw';
 
 # Split
 
-将一个面板分割为两部分，可以通过拖拽调整宽度或高度。
+Split 用于把一个区域拆成两个可调尺寸的 pane，提供顶层主 pane 尺寸配置、主 pane 模型、可折叠侧栏，以及可自定义的 separator。
 
-## 使用场景
-
-当有多个内容需要同时展示，但其中一些需要更多空间来显示时使用。
-
-## 使用方式
+## 用法
 
 ```jsx
 import { Split } from 'tiny-design';
 ```
 
-## 代码示例
+当两个 pane 需要共享同一块区域，并且希望用户自己调整空间分配时，可以使用 `Split`。通常建议：
+
+- 把主 pane 的尺寸模型统一配置在 `Split` 上，例如 `size`、`defaultSize`、`min`、`max`。
+- 当右侧或下侧 pane 才是主要被控制的一侧时，使用 `primary="second"`。
+- separator 视觉上保持细一些，拖拽不够好抓时再通过 `separatorHitAreaSize` 放大热区。
+
+## 示例
 
 <Layout>
   <Column>
     <Demo>
 
-### 垂直分割
+### 水平布局
+
+默认的左右布局，适合导航加工作区这类最常见的双栏场景。
 
-上 & 下。
+<DemoBlock component={HorizontalDemo} source={HorizontalSource} />
+
+    </Demo>
+    <Demo>
+
+### 垂直布局
+
+当内容更适合上下拆分时使用 `orientation="vertical"`，比如预览区和属性区。
 
 <DemoBlock component={VerticalDemo} source={VerticalSource} />
 
     </Demo>
     <Demo>
 
-### 水平分割
+### 可折叠 Pane
 
-左 & 右。
+当主 pane 更像侧栏，需要临时收起但不希望离开当前布局时，可以开启 `collapsible`。
 
-<DemoBlock component={HorizontalDemo} source={HorizontalSource} />
+<DemoBlock component={CollapseDemo} source={CollapseSource} />
+
+    </Demo>
+    <Demo>
+
+### 自定义 Separator
+
+通过 `separatorRender` 可以替换默认 handle，同时保留已有的拖拽、键盘和折叠行为。
+
+<DemoBlock component={CustomHandleDemo} source={CustomHandleSource} />
 
     </Demo>
   </Column>
   <Column>
     <Demo>
 
-### 嵌套
+### 约束
 
-可以嵌套使用。
+配合 `primary`、`min`、`max` 以及 pane 级约束，可以把某一侧限制在更合理的产品布局范围内。
 
-<DemoBlock component={NestDemo} source={NestSource} />
+<DemoBlock component={MultipleDemo} source={MultipleSource} />
 
     </Demo>
     <Demo>
 
-### 步长
+### 热区尺寸
 
-允许按一定距离移动。
+当 separator 视觉上需要保持纤细，但拖拽命中范围要更大时，可以通过 `separatorHitAreaSize` 放大热区。
 
-<DemoBlock component={StepDemo} source={StepSource} />
+<DemoBlock component={HitAreaSizeDemo} source={HitAreaSizeSource} />
 
     </Demo>
     <Demo>
 
-### 多个面板
+### 嵌套布局
 
-多个分割面板。
+`Split` 可以嵌套使用，用来构建“侧栏 + 上下内容区”这类页面骨架。每一层只负责一件布局决策会更清晰。
 
-<DemoBlock component={MultipleDemo} source={MultipleSource} />
+<DemoBlock component={NestDemo} source={NestSource} />
+
+    </Demo>
+    <Demo>
+
+### 步进调整
+
+当面板移动需要按固定节奏吸附，而不是连续自由拖拽时，可以使用 `dragStep` 和 `keyboardStep`。
+
+<DemoBlock component={StepDemo} source={StepSource} />
 
     </Demo>
   </Column>
 </Layout>
 
-## Props
+## API
 
-| 属性          | 说明                               | 类型                                  | 默认值       |
+### Split
+
+| 属性 | 说明 | 类型 | 默认值 |
+| ----------------- | ----------------------------------------- | ------------------------------------- | ------------- |
+| orientation | pane 排列方向；`horizontal` 表示左右，`vertical` 表示上下 | enum: `horizontal` \| `vertical` | `horizontal` |
+| primary | 哪个 pane 持有可调整尺寸模型 | enum: `first` \| `second` | `first` |
+| disabled | 禁用拖拽与键盘调整 | boolean | false |
+| size | 主 pane 的受控尺寸 | number \| `${number}px` \| `${number}%` | - |
+| defaultSize | 主 pane 的初始尺寸 | number \| `${number}px` \| `${number}%` | - |
+| min | 主 pane 的最小尺寸 | number \| `${number}px` \| `${number}%` | 0 |
+| max | 主 pane 的最大尺寸 | number \| `${number}px` \| `${number}%` | - |
+| collapsible | 是否允许主 pane 折叠 | boolean | false |
+| collapsed | 主 pane 的受控折叠状态 | boolean | - |
+| defaultCollapsed | 主 pane 的初始折叠状态 | boolean | false |
+| collapsedSize | 折叠后的 pane 尺寸 | number \| `${number}px` \| `${number}%` | 0 |
+| onCollapseChange | 折叠状态变化时触发 | `(collapsed: boolean) => void` | - |
+| dragStep | 指针拖拽步进 | number | - |
+| keyboardStep | 键盘调整步进 | number | 12 |
+| separatorSize | separator 视觉厚度 | number | 2 |
+| separatorHitAreaSize | separator 交互热区尺寸 | number | 16 |
+| separatorClassName | 应用于 separator 交互容器的类名 | string | - |
+| separatorStyle | 应用于 separator 交互容器的内联样式 | CSSProperties | - |
+| separatorRender | 自定义 separator 内容渲染函数 | `(props: { orientation; disabled; dragging; collapsed; collapsible; size; hitAreaSize; toggleCollapse }) => ReactNode` | - |
+| onResize | 主 pane 尺寸变化时触发 | `(size: number) => void` | - |
+| onResizeStart | 开始调整尺寸时触发 | `(size: number) => void` | - |
+| onResizeEnd | 结束调整尺寸时触发 | `(size: number) => void` | - |
+
+### Split.Pane
+
+| 属性 | 说明 | 类型 | 默认值 |
 | ----------------- | ----------------------------------------- | ------------------------------------- | ------------- |
-| mode              | 分割模式                                | enum: `horizontal` &#124; `vertical`  | `vertical`    |
-| disabled          | 是否禁用	                            | boolean                               | false         |
-| min               | 目标面板的最小宽度/高度 | number &#124; string                  | 50            |
-| max               | 目标面板的最大宽度/高度 | number &#124; string                  | 50            |
-| size              | 目标面板的尺寸                       | number &#124; string                  | -             |
-| defaultSize       | 目标面板的默认尺寸               | number &#124; string                  | -             |
-| step              | 拖拽步长                                 | number                                | -             |
-| resizerProps      | 调整器属性                             | JSX.IntrinsicElements['div']          | -             |
-| resizerSize       | 调整器尺寸                              | number                                | 6             |
-| onChange          | 尺寸变化时的回调            | (size: number) => void                | -             |
-| onDragStarted     | 调整器开始拖拽时的回调 | () => void                            | -             |
-| onDragFinished    | 调整器结束拖拽时的回调   | () => void                            | -             |
\ No newline at end of file
+| min | pane 最小尺寸约束 | number \| `${number}px` \| `${number}%` | 0 |
+| max | pane 最大尺寸约束 | number \| `${number}px` \| `${number}%` | - |
+
+## 说明
+
+- `Split` 固定渲染两个 pane。
+- 主 pane 的尺寸与折叠属性统一配置在 `Split` 上。
+- `Split.Pane` 只负责 pane 内容以及每个 pane 的 `min`、`max` 约束。
+- pane 级 `min`、`max` 依然适合用来保护非主 pane，不让它被压得过小。
+- `defaultSize` 仅在初始化时参与计算；挂载后非受控尺寸会以像素值维护。
+- 开启 `collapsible` 后，可在 separator 上按 `Enter` / `Space`，或双击 separator 进行折叠切换。
diff --git a/packages/react/src/split/resizer.tsx b/packages/react/src/split/resizer.tsx
old mode 100755
new mode 100644
index 9f1b4fd04..48ea1e438
--- a/packages/react/src/split/resizer.tsx
+++ b/packages/react/src/split/resizer.tsx
@@ -1,76 +1,138 @@
-import React, { useContext, MouseEventHandler, TouchEventHandler } from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { BaseProps, DirectionType } from '../_utils/props';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
+import { SplitSeparatorRenderProps } from './types';
 
 export interface ResizerProps
   extends BaseProps,
     React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
-  size: number;
-  mode: DirectionType;
-  onResizerMouseDown: MouseEventHandler<HTMLDivElement>;
-  onResizerTouchStart?: TouchEventHandler<HTMLDivElement>;
+  visualSize?: number;
+  hitAreaSize: number;
+  orientation: DirectionType;
+  disabled?: boolean;
+  dragging?: boolean;
+  collapsed?: boolean;
+  collapsible?: boolean;
+  separatorRender?: (props: SplitSeparatorRenderProps) => React.ReactNode;
+  onDragStart: React.MouseEventHandler<HTMLDivElement>;
+  onTouchDragStart?: React.TouchEventHandler<HTMLDivElement>;
+  onKeyStep?: React.KeyboardEventHandler<HTMLDivElement>;
+  onToggleCollapse?: () => void;
 }
 
 const Resizer = (props: ResizerProps): JSX.Element => {
   const {
-    size,
-    onResizerMouseDown,
-    onResizerTouchStart,
+    visualSize,
+    hitAreaSize,
+    orientation,
+    disabled = false,
+    dragging = false,
+    collapsed = false,
+    collapsible = false,
+    separatorRender,
+    onDragStart,
+    onTouchDragStart,
+    onKeyStep,
+    onToggleCollapse,
     prefixCls: customisedCls,
-    mode,
     className,
+    style,
+    onMouseDown,
+    onTouchStart,
+    onDoubleClick,
     ...otherProps
   } = props;
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('split-bar', configContext.prefixCls, customisedCls);
   const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_${mode}`]: mode,
+    [`${prefixCls}_${orientation}`]: orientation,
+    [`${prefixCls}_disabled`]: disabled,
+    [`${prefixCls}_dragging`]: dragging,
+    [`${prefixCls}_collapsed`]: collapsed,
+    [`${prefixCls}_collapsible`]: collapsible,
   });
+  const slotCls = `${prefixCls}__slot`;
 
-  const style: React.CSSProperties = mode === 'vertical' ? { width: size } : { height: size };
+  const resolvedVisualSize = visualSize ?? 2;
 
-  const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    props.onMouseDown && props.onMouseDown(e);
-    onResizerMouseDown(e);
+  const mergedStyle: React.CSSProperties = {
+    ...style,
+    ...(orientation === 'horizontal' ? { width: hitAreaSize } : { height: hitAreaSize }),
+    ['--ty-split-bar-hit-area-size' as string]: `${hitAreaSize}px`,
   };
+  if (visualSize !== undefined) {
+    (mergedStyle as React.CSSProperties & Record<string, string>)['--ty-split-bar-size'] = `${visualSize}px`;
+  }
 
-  const onTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
-    props.onTouchStart && props.onTouchStart(e);
-    onResizerTouchStart && onResizerTouchStart(e);
+  const renderProps: SplitSeparatorRenderProps = {
+    orientation,
+    disabled,
+    dragging,
+    collapsed,
+    collapsible,
+    size: resolvedVisualSize,
+    hitAreaSize,
+    toggleCollapse: () => {
+      if (!disabled && collapsible) {
+        onToggleCollapse?.();
+      }
+    },
   };
 
+  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    onMouseDown?.(event);
+    if (!event.defaultPrevented) {
+      onDragStart(event);
+    }
+  };
+
+  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
+    onTouchStart?.(event);
+    if (!event.defaultPrevented) {
+      onTouchDragStart?.(event);
+    }
+  };
+
+  const handleDoubleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    onDoubleClick?.(event);
+    if (!event.defaultPrevented && !disabled && collapsible) {
+      onToggleCollapse?.();
+    }
+  };
+
+  const ariaOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
+
   return (
     <div
-      {...otherProps}
-      role="separator"
-      tabIndex={0}
-      aria-orientation={mode === 'vertical' ? 'vertical' : 'horizontal'}
-      className={cls}
-      style={style}
-      onMouseDown={(e): void => onMouseDown(e)}
-      onTouchStart={(e): void => onTouchStart(e)}
-      onKeyDown={(e) => {
-        const step = 10;
-        if (mode === 'vertical' && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
-          e.preventDefault();
-          const delta = e.key === 'ArrowRight' ? step : -step;
-          const synthetic = { clientX: (e.target as HTMLElement).getBoundingClientRect().left + delta, clientY: 0 } as MouseEvent;
-          onResizerMouseDown(e as unknown as React.MouseEvent<HTMLDivElement>);
-          window.dispatchEvent(new MouseEvent('mousemove', { clientX: synthetic.clientX }));
-          window.dispatchEvent(new MouseEvent('mouseup'));
-        }
-        if (mode === 'horizontal' && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
-          e.preventDefault();
-          const delta = e.key === 'ArrowDown' ? step : -step;
-          const synthetic = { clientY: (e.target as HTMLElement).getBoundingClientRect().top + delta, clientX: 0 } as MouseEvent;
-          onResizerMouseDown(e as unknown as React.MouseEvent<HTMLDivElement>);
-          window.dispatchEvent(new MouseEvent('mousemove', { clientY: synthetic.clientY }));
-          window.dispatchEvent(new MouseEvent('mouseup'));
-        }
-      }}>
-      <div className={`${prefixCls}__icon`} />
+      className={classNames(slotCls, `${slotCls}_${orientation}`)}
+      style={orientation === 'horizontal' ? { width: resolvedVisualSize } : { height: resolvedVisualSize }}>
+      <div
+        {...otherProps}
+        role="separator"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
+        aria-orientation={ariaOrientation}
+        className={cls}
+        style={mergedStyle}
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
+        onKeyDown={onKeyStep}
+        onDoubleClick={handleDoubleClick}>
+        {separatorRender ? (
+          separatorRender(renderProps)
+        ) : (
+          <div className={`${prefixCls}__visual`}>
+            <span className={`${prefixCls}__track`} />
+            <span className={`${prefixCls}__handle`}>
+              <span className={`${prefixCls}__grip-dot`} />
+              <span className={`${prefixCls}__grip-dot`} />
+              <span className={`${prefixCls}__grip-dot`} />
+            </span>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/packages/react/src/split/split-context.ts b/packages/react/src/split/split-context.ts
index b0d0efb6e..18ebea38d 100644
--- a/packages/react/src/split/split-context.ts
+++ b/packages/react/src/split/split-context.ts
@@ -1,8 +1,8 @@
 import React from 'react';
-import { DirectionType } from '../_utils/props';
+import { SplitOrientation } from './types';
 
 type Props = {
-  mode: DirectionType;
+  orientation: SplitOrientation;
 };
 
-export const SplitContext = React.createContext<Props>({ mode: 'vertical' });
+export const SplitContext = React.createContext<Props>({ orientation: 'horizontal' });
diff --git a/packages/react/src/split/split-pane.tsx b/packages/react/src/split/split-pane.tsx
old mode 100755
new mode 100644
index a816ea6e0..0ef42939a
--- a/packages/react/src/split/split-pane.tsx
+++ b/packages/react/src/split/split-pane.tsx
@@ -1,40 +1,23 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { BaseProps } from '../_utils/props';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
-import { SplitContext } from './split-context';
+import { SplitPaneProps } from './types';
 
-export interface SplitPaneProps
-  extends BaseProps,
-    React.PropsWithRef<JSX.IntrinsicElements['div']> {
-  size?: number;
-}
+const SplitPane = React.forwardRef<HTMLDivElement, SplitPaneProps>((props, ref): JSX.Element => {
+  const { className, prefixCls: customisedCls, children, ...otherProps } = props;
+  delete (otherProps as Partial<SplitPaneProps>).min;
+  delete (otherProps as Partial<SplitPaneProps>).max;
+  const configContext = useContext(ConfigContext);
+  const prefixCls = getPrefixCls('split-pane', configContext.prefixCls, customisedCls);
+  const cls = classNames(prefixCls, className);
 
-const SplitPane = React.forwardRef<HTMLDivElement, SplitPaneProps>(
-  (props: SplitPaneProps, ref): JSX.Element => {
-    const { size, className, style, children, prefixCls: customisedCls, ...otherProps } = props;
-    const configContext = useContext(ConfigContext);
-    const prefixCls = getPrefixCls('split-pane', configContext.prefixCls, customisedCls);
-    const cls = classNames(prefixCls, className);
-    const { mode } = useContext(SplitContext);
-
-    const paneStyle: React.CSSProperties = {
-      ...style,
-    };
-    if (mode === 'vertical') {
-      paneStyle.width = size;
-    } else {
-      paneStyle.height = size;
-    }
-
-    return (
-      <div ref={ref} {...otherProps} className={cls} style={paneStyle}>
-        {children}
-      </div>
-    );
-  }
-);
+  return (
+    <div ref={ref} {...otherProps} className={cls}>
+      {children}
+    </div>
+  );
+});
 
 SplitPane.displayName = 'SplitPane';
 
diff --git a/packages/react/src/split/split.tsx b/packages/react/src/split/split.tsx
index 21c42e90e..01540cfcb 100644
--- a/packages/react/src/split/split.tsx
+++ b/packages/react/src/split/split.tsx
@@ -1,190 +1,602 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import Resizer from './resizer';
+import Pane from './split-pane';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
-import Pane from './split-pane';
 import warning from '../_utils/warning';
-import { SplitContext } from './split-context';
-import { SplitProps } from './types';
+import { SplitPaneProps, SplitProps, SplitSize } from './types';
+
+type Constraints = {
+  min: number;
+  max: number;
+};
+
+type PaneRuntimeConfig = {
+  props: SplitPaneProps;
+  content: React.ReactNode;
+};
+
+const DEFAULT_SEPARATOR_SIZE = 2;
+const DEFAULT_SEPARATOR_HIT_AREA_SIZE = 16;
+const DEFAULT_KEYBOARD_STEP = 12;
+
+const isSplitPaneElement = (
+  child: React.ReactNode
+): child is React.ReactElement<SplitPaneProps, typeof Pane> =>
+  React.isValidElement(child) && child.type === Pane;
+
+const getPointerPosition = (event: MouseEvent | TouchEvent, orientation: SplitProps['orientation']): number => {
+  const key = orientation === 'horizontal' ? 'clientX' : 'clientY';
+  if ('touches' in event) {
+    const touch = event.touches[0] ?? event.changedTouches[0];
+    return touch?.[key] ?? 0;
+  }
+  return event[key];
+};
+
+const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
+
+const extractPaneConfig = (child: React.ReactNode): PaneRuntimeConfig => {
+  if (isSplitPaneElement(child)) {
+    const { children, ...paneProps } = child.props;
+    return { props: paneProps, content: children };
+  }
+
+  return {
+    props: {},
+    content: child,
+  };
+};
+
+const getRootSize = (element: HTMLElement, orientation: SplitProps['orientation']): number => {
+  const rect = element.getBoundingClientRect();
+  return orientation === 'horizontal' ? rect.width : rect.height;
+};
 
 const Split = (props: SplitProps): JSX.Element => {
   const {
-    mode = 'vertical',
+    orientation = 'horizontal',
+    primary = 'first',
     disabled = false,
-    min = 50,
-    max = 50,
-    resizerSize = 6,
+    size,
     defaultSize,
-    step,
-    onChange,
-    onDragStarted,
-    onDragFinished,
+    min,
+    max,
+    collapsible = false,
+    collapsed: collapsedProp,
+    defaultCollapsed = false,
+    collapsedSize,
+    onCollapseChange,
+    dragStep,
+    keyboardStep = DEFAULT_KEYBOARD_STEP,
+    separatorSize,
+    separatorHitAreaSize = DEFAULT_SEPARATOR_HIT_AREA_SIZE,
+    separatorClassName,
+    separatorStyle,
+    separatorRender,
+    onResize,
+    onResizeStart,
+    onResizeEnd,
     prefixCls: customisedCls,
-    style: defaultStyle,
-    resizerProps,
+    style,
     className,
     children,
     ...otherProps
   } = props;
+  const resolvedSeparatorSize = separatorSize ?? DEFAULT_SEPARATOR_SIZE;
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('split', configContext.prefixCls, customisedCls);
   const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_${mode}`]: mode,
+    [`${prefixCls}_${orientation}`]: orientation,
     [`${prefixCls}_disabled`]: disabled,
   });
-  const [pane1Size, setPane1Size] = useState<number | undefined>(undefined);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const paneRef = useRef<HTMLDivElement | null>(null);
-  const isActiveMove = useRef(false);
-  const lastPosition = useRef(0);
-  const wrapper = wrapperRef.current;
-
-  const getSizeNumber = useCallback(
-    (size: number | string): number => {
-      if (typeof size === 'string') {
-        if (wrapper) {
-          const { width, height } = wrapper.getBoundingClientRect();
-          return ((mode === 'vertical' ? width : height) * parseFloat(size)) / 100;
+  const [containerSize, setContainerSize] = useState(0);
+  const [uncontrolledSize, setUncontrolledSize] = useState<number>();
+  const [dragging, setDragging] = useState(false);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(false);
+  const didInitRef = useRef(false);
+  const isDraggingRef = useRef(false);
+  const startPointerRef = useRef(0);
+  const startSizeRef = useRef(0);
+  const activeSizeRef = useRef<number>();
+  const lastExpandedSizeRef = useRef<number>();
+
+  const parseSize = useCallback(
+    (value: SplitSize | undefined, currentContainerSize: number, name: string): number | undefined => {
+      if (value === undefined) {
+        return undefined;
+      }
+
+      if (typeof value === 'number') {
+        return value;
+      }
+
+      const trimmedValue = value.trim();
+      const pxMatch = trimmedValue.match(/^(-?\d+(?:\.\d+)?)px$/);
+      if (pxMatch) {
+        return Number(pxMatch[1]);
+      }
+
+      const percentMatch = trimmedValue.match(/^(-?\d+(?:\.\d+)?)%$/);
+      if (percentMatch) {
+        if (currentContainerSize <= 0) {
+          return undefined;
         }
-      } else {
-        return size;
+        return (currentContainerSize * Number(percentMatch[1])) / 100;
       }
-      return 0;
+
+      warning(true, `Split \`${name}\` only supports numbers, px strings, or percent strings.`);
+      return undefined;
     },
-    [mode, wrapper]
+    []
   );
-  const minSize = getSizeNumber(min);
-  let maxSize = getSizeNumber(max);
-  if (wrapper) {
-    const { width, height } = wrapper.getBoundingClientRect();
-    maxSize = (mode === 'vertical' ? width : height) - maxSize - resizerSize;
-  }
 
-  const getPointerPos = (e: MouseEvent | TouchEvent): number => {
-    const key = mode === 'vertical' ? 'clientX' : 'clientY';
-    if ('touches' in e) {
-      const touch = e.touches[0] ?? e.changedTouches[0];
-      return touch?.[key] ?? 0;
+  const childList = React.Children.toArray(children).filter((child) => child !== null && child !== undefined);
+  warning(childList.length !== 2, 'Split expects exactly two children.');
+
+  const paneConfigs = [extractPaneConfig(childList[0]), extractPaneConfig(childList[1])];
+  const primaryIndex = primary === 'first' ? 0 : 1;
+  const secondaryIndex = primaryIndex === 0 ? 1 : 0;
+  const secondaryPane = paneConfigs[secondaryIndex];
+  const directionSign = primaryIndex === 0 ? 1 : -1;
+
+  const measureContainer = useCallback(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    setContainerSize(getRootSize(wrapper, orientation));
+  }, [orientation]);
+
+  useEffect(() => {
+    measureContainer();
+  }, [measureContainer]);
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(() => {
+        measureContainer();
+      });
+      observer.observe(wrapper);
+      return () => observer.disconnect();
     }
-    return e[key];
-  };
 
-  const onResizerMouseDown = (e: React.MouseEvent<HTMLElement>): void => {
-    isActiveMove.current = true;
-    lastPosition.current = e[mode === 'vertical' ? 'clientX' : 'clientY'];
-    onDragStarted && onDragStarted();
-  };
+    window.addEventListener('resize', measureContainer);
+    return () => window.removeEventListener('resize', measureContainer);
+  }, [measureContainer]);
 
-  const onResizerTouchStart = (e: React.TouchEvent<HTMLElement>): void => {
-    const touch = e.touches[0];
-    if (!touch) return;
-    isActiveMove.current = true;
-    lastPosition.current = touch[mode === 'vertical' ? 'clientX' : 'clientY'];
-    onDragStarted && onDragStarted();
-  };
+  const getConstraints = useCallback(
+    (currentContainerSize: number): Constraints => {
+      const available = Math.max(0, currentContainerSize - resolvedSeparatorSize);
+      const resolvedPrimaryMin = parseSize(min, currentContainerSize, 'min') ?? 0;
+      const resolvedPrimaryMax = parseSize(max, currentContainerSize, 'max') ?? available;
+      const resolvedSecondaryMin =
+        parseSize(secondaryPane.props.min, currentContainerSize, 'secondaryPane.min') ?? 0;
+      const resolvedSecondaryMax = parseSize(secondaryPane.props.max, currentContainerSize, 'secondaryPane.max');
 
-  const onPointerMove = useCallback(
-    (e: MouseEvent | TouchEvent): void => {
-      if (!disabled && isActiveMove.current) {
-        const pane = paneRef.current;
-        if (pane) {
-          if (pane.getBoundingClientRect) {
-            const width = pane.getBoundingClientRect().width;
-            const height = pane.getBoundingClientRect().height;
-            const current = getPointerPos(e);
-            const size = mode === 'vertical' ? width : height;
-            let offset = lastPosition.current - current;
-            if (step) {
-              if (Math.abs(offset) < step) {
-                return;
-              }
-              offset = Math.round((offset / step) * step);
-            }
-
-            let newSize = size - offset;
-            const newPosition = lastPosition.current - offset;
-
-            if (newSize < minSize) {
-              newSize = minSize;
-            } else if (newSize > maxSize) {
-              newSize = maxSize;
-            } else {
-              lastPosition.current = newPosition;
-            }
-
-            !('size' in props) && setPane1Size(newSize);
-            onChange && onChange(newSize);
-          }
-        }
+      let minConstraint = Math.max(0, resolvedPrimaryMin);
+      let maxConstraint = Math.min(available, Math.max(minConstraint, resolvedPrimaryMax));
+
+      if (resolvedSecondaryMin > 0) {
+        maxConstraint = Math.min(maxConstraint, Math.max(minConstraint, available - resolvedSecondaryMin));
+      }
+
+      if (resolvedSecondaryMax !== undefined) {
+        minConstraint = Math.max(minConstraint, available - resolvedSecondaryMax);
       }
+
+      return {
+        min: Math.max(0, minConstraint),
+        max: Math.max(Math.max(0, minConstraint), maxConstraint),
+      };
     },
-    [props, disabled, maxSize, minSize, mode, onChange, step]
+    [
+      max,
+      min,
+      parseSize,
+      resolvedSeparatorSize,
+      secondaryPane.props.max,
+      secondaryPane.props.min,
+    ]
   );
 
-  const onPointerUp = useCallback((): void => {
-    isActiveMove.current = false;
-    onDragFinished && onDragFinished();
-  }, [onDragFinished]);
+  const expandedConstraints = useMemo(
+    () => getConstraints(containerSize),
+    [containerSize, getConstraints]
+  );
+  const resolvedCollapsedSize = useMemo(
+    () =>
+      clamp(
+        parseSize(collapsedSize, containerSize, 'collapsedSize') ?? 0,
+        0,
+        Math.max(0, containerSize - resolvedSeparatorSize)
+      ),
+    [collapsedSize, containerSize, parseSize, resolvedSeparatorSize]
+  );
 
-  let style: React.CSSProperties;
-  if (mode === 'vertical') {
-    style = {
-      ...defaultStyle,
-    };
-  } else {
-    style = {
-      ...defaultStyle,
-      minHeight: '100%',
-      width: '100%',
-    };
-  }
+  const isControlled = size !== undefined;
+  const isCollapsedControlled = collapsedProp !== undefined;
+
+  useEffect(() => {
+    if (didInitRef.current || containerSize <= 0) {
+      return;
+    }
+
+    const defaultExpandedSize =
+      parseSize(defaultSize, containerSize, 'defaultSize') ?? expandedConstraints.min;
+    const initialExpandedSize = clamp(defaultExpandedSize, expandedConstraints.min, expandedConstraints.max);
+    const initialCollapsed = defaultCollapsed;
+
+    setUncontrolledSize(initialExpandedSize);
+    setUncontrolledCollapsed(initialCollapsed);
+    lastExpandedSizeRef.current = initialExpandedSize;
+    didInitRef.current = true;
+  }, [
+    containerSize,
+    expandedConstraints.max,
+    expandedConstraints.min,
+    defaultCollapsed,
+    defaultSize,
+    parseSize,
+  ]);
+
+  const controlledSize = useMemo(() => {
+    if (!isControlled) {
+      return undefined;
+    }
+    const resolved = parseSize(size, containerSize, 'size');
+    if (resolved === undefined) {
+      return undefined;
+    }
+    return clamp(resolved, expandedConstraints.min, expandedConstraints.max);
+  }, [containerSize, expandedConstraints.max, expandedConstraints.min, isControlled, parseSize, size]);
+
+  const collapsed = isCollapsedControlled ? !!collapsedProp : uncontrolledCollapsed;
+  const expandedSize = isControlled
+    ? controlledSize ?? expandedConstraints.min
+    : uncontrolledSize ?? expandedConstraints.min;
+  const currentSize = collapsed ? resolvedCollapsedSize : expandedSize;
+
+  useEffect(() => {
+    activeSizeRef.current = currentSize;
+  }, [currentSize]);
+
+  useEffect(() => {
+    if (collapsed || isControlled || uncontrolledSize === undefined) {
+      return;
+    }
+
+    const clamped = clamp(uncontrolledSize, expandedConstraints.min, expandedConstraints.max);
+    if (clamped !== uncontrolledSize) {
+      setUncontrolledSize(clamped);
+    }
+  }, [collapsed, expandedConstraints.max, expandedConstraints.min, isControlled, uncontrolledSize]);
+
+  useEffect(() => {
+    if (!collapsed) {
+      lastExpandedSizeRef.current = expandedSize;
+    }
+  }, [collapsed, expandedSize]);
+
+  const emitCollapseChange = useCallback(
+    (next: boolean) => {
+      onCollapseChange?.(next);
+    },
+    [onCollapseChange]
+  );
+
+  const setCollapsedState = useCallback(
+    (next: boolean) => {
+      if (!isCollapsedControlled) {
+        setUncontrolledCollapsed(next);
+      }
+      emitCollapseChange(next);
+    },
+    [emitCollapseChange, isCollapsedControlled]
+  );
+
+  const applyExpandedSize = useCallback(
+    (nextSize: number, options?: { allowExpand?: boolean }) => {
+      const clamped = clamp(nextSize, expandedConstraints.min, expandedConstraints.max);
+
+      if (collapsed && options?.allowExpand && clamped !== resolvedCollapsedSize) {
+        setCollapsedState(false);
+      }
+
+      if (!isControlled) {
+        setUncontrolledSize(clamped);
+      }
+
+      lastExpandedSizeRef.current = clamped;
+      activeSizeRef.current = collapsed && clamped === resolvedCollapsedSize ? resolvedCollapsedSize : clamped;
+      onResize?.(activeSizeRef.current);
+      return clamped;
+    },
+    [
+      collapsed,
+      expandedConstraints.max,
+      expandedConstraints.min,
+      isControlled,
+      onResize,
+      resolvedCollapsedSize,
+      setCollapsedState,
+    ]
+  );
+
+  const collapsePane = useCallback(() => {
+    if (!collapsible || collapsed) {
+      return resolvedCollapsedSize;
+    }
+
+    lastExpandedSizeRef.current = expandedSize;
+    setCollapsedState(true);
+    activeSizeRef.current = resolvedCollapsedSize;
+    onResize?.(resolvedCollapsedSize);
+    return resolvedCollapsedSize;
+  }, [
+    collapsed,
+    expandedSize,
+    onResize,
+    collapsible,
+    resolvedCollapsedSize,
+    setCollapsedState,
+  ]);
+
+  const expandPane = useCallback(() => {
+    if (!collapsed) {
+      return expandedSize;
+    }
+
+    const restoredSize = clamp(
+      lastExpandedSizeRef.current ?? expandedConstraints.min,
+      expandedConstraints.min,
+      expandedConstraints.max
+    );
+    setCollapsedState(false);
+
+    if (!isControlled) {
+      setUncontrolledSize(restoredSize);
+    }
+
+    lastExpandedSizeRef.current = restoredSize;
+    activeSizeRef.current = restoredSize;
+    onResize?.(restoredSize);
+    return restoredSize;
+  }, [
+    collapsed,
+    expandedConstraints.max,
+    expandedConstraints.min,
+    expandedSize,
+    isControlled,
+    onResize,
+    setCollapsedState,
+  ]);
+
+  const endInteraction = useCallback(() => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+
+    isDraggingRef.current = false;
+    setDragging(false);
+    onResizeEnd?.(activeSizeRef.current ?? currentSize);
+  }, [currentSize, onResizeEnd]);
+
+  const startInteraction = useCallback(
+    (pointer: number) => {
+      if (disabled) {
+        return;
+      }
+
+      isDraggingRef.current = true;
+      setDragging(true);
+      startPointerRef.current = pointer;
+      startSizeRef.current = activeSizeRef.current ?? currentSize;
+      onResizeStart?.(currentSize);
+    },
+    [currentSize, disabled, onResizeStart]
+  );
+
+  const applyStep = useCallback(
+    (delta: number, dragStep?: number) => {
+      if (!dragStep || dragStep <= 0) {
+        return delta;
+      }
+
+      if (Math.abs(delta) < dragStep) {
+        return 0;
+      }
+
+      return Math.round(delta / dragStep) * dragStep;
+    },
+    []
+  );
+
+  const onPointerMove = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      if (disabled || !isDraggingRef.current) {
+        return;
+      }
+
+      if ('cancelable' in event && event.cancelable) {
+        event.preventDefault();
+      }
+
+      const pointer = getPointerPosition(event, orientation);
+      const delta = applyStep(pointer - startPointerRef.current, dragStep);
+
+      if (delta === 0) {
+        return;
+      }
+
+      applyExpandedSize(startSizeRef.current + delta * directionSign, { allowExpand: true });
+    },
+    [applyExpandedSize, applyStep, directionSign, disabled, dragStep, orientation]
+  );
 
   useEffect(() => {
     window.addEventListener('mousemove', onPointerMove);
-    window.addEventListener('mouseup', onPointerUp);
-    window.addEventListener('touchmove', onPointerMove);
-    window.addEventListener('touchend', onPointerUp);
+    window.addEventListener('mouseup', endInteraction);
+    window.addEventListener('touchmove', onPointerMove, { passive: false });
+    window.addEventListener('touchend', endInteraction);
 
-    return (): void => {
+    return () => {
       window.removeEventListener('mousemove', onPointerMove);
-      window.removeEventListener('mouseup', onPointerUp);
+      window.removeEventListener('mouseup', endInteraction);
       window.removeEventListener('touchmove', onPointerMove);
-      window.removeEventListener('touchend', onPointerUp);
+      window.removeEventListener('touchend', endInteraction);
     };
-  }, [onPointerMove, onPointerUp]);
+  }, [endInteraction, onPointerMove]);
 
-  useEffect(() => {
-    const initialSize = getSizeNumber(props.size || defaultSize || minSize);
-    setPane1Size(initialSize);
-  }, [getSizeNumber, props.size, defaultSize, minSize]);
+  const onSeparatorMouseDown = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      startInteraction(orientation === 'horizontal' ? event.clientX : event.clientY);
+    },
+    [orientation, startInteraction]
+  );
 
-  useEffect(() => {
-    if ('size' in props) {
-      const size = getSizeNumber(props.size as number | string);
-      setPane1Size(size);
+  const onSeparatorTouchStart = useCallback(
+    (event: React.TouchEvent<HTMLDivElement>) => {
+      const touch = event.touches[0];
+      if (!touch) return;
+      startInteraction(orientation === 'horizontal' ? touch.clientX : touch.clientY);
+    },
+    [orientation, startInteraction]
+  );
+
+  const onSeparatorToggleCollapse = useCallback(() => {
+    if (!collapsible || disabled) {
+      return;
     }
-  }, [props, getSizeNumber]);
 
-  warning(React.Children.count(children) > 2, 'There are more than 2 children inside Split.');
-  const childrenList = React.Children.toArray(children).filter((child) => child);
+    onResizeStart?.(currentSize);
+    const finalSize = collapsed ? expandPane() : collapsePane();
+    onResizeEnd?.(finalSize);
+  }, [collapsePane, collapsed, collapsible, currentSize, disabled, expandPane, onResizeEnd, onResizeStart]);
+
+  const onSeparatorKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) {
+        return;
+      }
+
+      if ((event.key === 'Enter' || event.key === ' ') && collapsible) {
+        event.preventDefault();
+        onSeparatorToggleCollapse();
+        return;
+      }
+
+      const mainStep = event.shiftKey ? keyboardStep * 5 : keyboardStep;
+      let nextSize: number | null = null;
+
+      if (orientation === 'horizontal') {
+        if (event.key === 'ArrowLeft') {
+          nextSize = currentSize - mainStep * directionSign;
+        } else if (event.key === 'ArrowRight') {
+          nextSize = currentSize + mainStep * directionSign;
+        }
+      } else if (event.key === 'ArrowUp') {
+        nextSize = currentSize - mainStep * directionSign;
+      } else if (event.key === 'ArrowDown') {
+        nextSize = currentSize + mainStep * directionSign;
+      }
+
+      if (event.key === 'Home') {
+        nextSize = expandedConstraints.min;
+      }
+
+      if (event.key === 'End') {
+        nextSize = expandedConstraints.max;
+      }
+
+      if (nextSize === null) {
+        return;
+      }
+
+      event.preventDefault();
+      onResizeStart?.(currentSize);
+      const finalSize = applyExpandedSize(nextSize, { allowExpand: true });
+      onResizeEnd?.(finalSize);
+    },
+    [
+      applyExpandedSize,
+      currentSize,
+      directionSign,
+      disabled,
+      expandedConstraints.max,
+      expandedConstraints.min,
+      keyboardStep,
+      onResizeEnd,
+      onResizeStart,
+      onSeparatorToggleCollapse,
+      orientation,
+      collapsible,
+    ]
+  );
+
+  warning(
+    separatorHitAreaSize < resolvedSeparatorSize,
+    'Split `separatorHitAreaSize` should be greater than or equal to `separatorSize`.'
+  );
+
+  const visualPaneSize = currentSize;
+  const paneStyles: [React.CSSProperties, React.CSSProperties] =
+    primaryIndex === 0
+      ? [
+          orientation === 'horizontal'
+            ? { width: visualPaneSize, flex: '0 0 auto' }
+            : { height: visualPaneSize, flex: '0 0 auto' },
+          { flex: '1 1 0%' },
+        ]
+      : [
+          { flex: '1 1 0%' },
+          orientation === 'horizontal'
+            ? { width: visualPaneSize, flex: '0 0 auto' }
+            : { height: visualPaneSize, flex: '0 0 auto' },
+        ];
+
+  const renderPane = (config: PaneRuntimeConfig, paneStyle: React.CSSProperties, isPrimaryPane: boolean) => (
+    <Pane
+      {...config.props}
+      style={{ ...config.props.style, ...paneStyle }}
+      className={classNames(config.props.className, {
+        [`${prefixCls}-pane_primary`]: isPrimaryPane,
+        [`${prefixCls}-pane_secondary`]: !isPrimaryPane,
+      })}>
+      {config.content}
+    </Pane>
+  );
 
   return (
-    <SplitContext.Provider value={{ mode }}>
-      <div ref={wrapperRef} {...otherProps} className={cls} style={style}>
-        <Pane ref={paneRef} size={pane1Size} style={{ flex: '0 0 auto' }}>
-          {childrenList[0]}
-        </Pane>
+    <div ref={wrapperRef} {...otherProps} className={cls} style={style}>
+      {renderPane(paneConfigs[0], paneStyles[0], primaryIndex === 0)}
+      {childList.length === 2 ? (
         <Resizer
-          {...resizerProps}
-          size={resizerSize}
-          mode={mode}
-          onResizerMouseDown={onResizerMouseDown}
-          onResizerTouchStart={onResizerTouchStart}
+          visualSize={separatorSize}
+          hitAreaSize={separatorHitAreaSize}
+          disabled={disabled}
+          dragging={dragging}
+          collapsed={collapsed}
+          collapsible={collapsible}
+          orientation={orientation}
+          separatorRender={separatorRender}
+          className={separatorClassName}
+          style={separatorStyle}
+          aria-valuemin={Math.round(expandedConstraints.min)}
+          aria-valuemax={Math.round(expandedConstraints.max)}
+          aria-valuenow={Math.round(currentSize)}
+          onDragStart={onSeparatorMouseDown}
+          onTouchDragStart={onSeparatorTouchStart}
+          onKeyStep={onSeparatorKeyDown}
+          onToggleCollapse={onSeparatorToggleCollapse}
         />
-        <Pane style={{ flex: '1 1 0%' }}>{childrenList[1]}</Pane>
-      </div>
-    </SplitContext.Provider>
+      ) : null}
+      {renderPane(paneConfigs[1], paneStyles[1], primaryIndex === 1)}
+    </div>
   );
 };
 
diff --git a/packages/react/src/split/style/index.scss b/packages/react/src/split/style/index.scss
old mode 100755
new mode 100644
index 3144595f6..dcabed665
--- a/packages/react/src/split/style/index.scss
+++ b/packages/react/src/split/style/index.scss
@@ -4,95 +4,168 @@
   box-sizing: border-box;
   display: flex;
   flex: 1;
-  height: 100%;
-  outline: none;
+  min-width: 0;
+  min-height: 0;
   overflow: hidden;
   user-select: text;
 
   &_horizontal {
-    flex-direction: column;
+    flex-direction: row;
   }
 
   &_vertical {
-    flex-direction: row;
+    flex-direction: column;
+    width: 100%;
   }
 }
 
 .#{$prefix}-split-pane {
   box-sizing: border-box;
   position: relative;
-  outline: none;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
 }
 
 .#{$prefix}-split-bar {
-  position: relative;
+  position: absolute;
   box-sizing: border-box;
-  background-color: var(--ty-split-bar-bg);
-  border: 1px solid var(--ty-split-bar-border);
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  color: inherit;
+  outline: none;
+  touch-action: none;
+  z-index: 1;
 
-  &::before,
-  &::after {
-    content: '';
-    box-sizing: border-box;
-    display: block;
-    border: 1px solid var(--ty-split-bar-line);
+  &__slot {
+    position: relative;
+    flex: 0 0 auto;
+  }
+
+  &__slot_horizontal {
+    width: var(--ty-split-bar-size, 2px);
+  }
+
+  &__slot_vertical {
+    height: var(--ty-split-bar-size, 2px);
+  }
+
+  &_horizontal {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: var(--ty-split-bar-hit-area-size, 16px);
+    cursor: col-resize;
   }
 
   &_vertical {
+    top: 50%;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+    height: var(--ty-split-bar-hit-area-size, 16px);
+    cursor: row-resize;
+  }
+
+  &_disabled {
+    cursor: default;
+  }
+
+  &__visual {
+    position: relative;
+    width: 100%;
     height: 100%;
-    cursor: col-resize;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  &__track {
+    position: absolute;
+    display: block;
+    background-color: var(--ty-split-bar-line, #c8ced5);
+    transition: background-color 0.2s ease;
+  }
+
+  &__handle {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ty-split-bar-grip-gap, 2px);
+    padding: var(--ty-split-bar-handle-padding, 4px);
+    border: 1px solid var(--ty-split-bar-border, #d7dbe0);
+    border-radius: var(--ty-split-bar-handle-radius, 8px);
+    background-color: var(--ty-split-bar-bg, #fafbfc);
+    box-shadow: var(--ty-split-bar-shadow, 0 1px 2px rgb(15 23 42 / 8%));
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  &__grip-dot {
+    width: var(--ty-split-bar-grip-size, 2px);
+    height: var(--ty-split-bar-grip-size, 2px);
+    border-radius: 50%;
+    background-color: var(--ty-split-bar-line, #c8ced5);
+    transition: background-color 0.2s ease;
+  }
+
+  &_horizontal &__track {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: var(--ty-split-bar-size, 2px);
+    transform: translateX(-50%);
+  }
+
+  &_horizontal &__handle {
     flex-direction: column;
-    border-top: none;
-    border-bottom: none;
+    width: var(--ty-split-bar-handle-thickness, 14px);
+    min-height: var(--ty-split-bar-handle-length, 30px);
+  }
 
-    &:active {
-      cursor: ew-resize;
-    }
+  &_vertical &__track {
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: var(--ty-split-bar-size, 2px);
+    transform: translateY(-50%);
+  }
 
-    &::before,
-    &::after {
-      height: var(--ty-split-bar-handle-size);
-      width: 100%;
-      border-left: 0;
-      border-right: 0;
-    }
+  &_vertical &__handle {
+    flex-direction: row;
+    min-width: var(--ty-split-bar-handle-length, 30px);
+    height: var(--ty-split-bar-handle-thickness, 14px);
+  }
 
-    &::before {
-      margin-bottom: var(--ty-split-bar-handle-gap);
-    }
+  &:hover:not(.#{$prefix}-split-bar_disabled) &__track,
+  &_dragging &__track {
+    background-color: var(--ty-split-bar-line-active, var(--ty-split-bar-line, #aeb6bf));
+  }
 
-    &::after {
-      margin-top: var(--ty-split-bar-handle-gap);
-    }
+  &:hover:not(.#{$prefix}-split-bar_disabled) &__handle,
+  &_dragging &__handle {
+    background-color: var(--ty-split-bar-bg-active, #fff);
+    border-color: var(--ty-split-bar-border-active, #c8cdd3);
   }
 
-  &_horizontal {
-    width: 100%;
-    cursor: row-resize;
-    border-left: none;
-    border-right: none;
-
-    &:active {
-      cursor: ns-resize;
-    }
-
-    &::before,
-    &::after {
-      height: 100%;
-      width: var(--ty-split-bar-handle-size);
-      border-top: 0;
-      border-bottom: 0;
-    }
-
-    &::before {
-      margin-right: var(--ty-split-bar-handle-gap);
-    }
-
-    &::after {
-      margin-left: var(--ty-split-bar-handle-gap);
-    }
+  &_dragging &__handle {
+    transform: scale(1.02);
+  }
+
+  &:focus-visible &__handle {
+    box-shadow: var(--ty-split-bar-focus-ring, 0 0 0 3px rgb(110 65 191 / 20%));
+  }
+
+  &_collapsed &__handle {
+    transform: scale(0.96);
   }
 }
diff --git a/packages/react/src/split/types.ts b/packages/react/src/split/types.ts
index e5484a584..5c09bfb8d 100644
--- a/packages/react/src/split/types.ts
+++ b/packages/react/src/split/types.ts
@@ -1,37 +1,95 @@
 import React from 'react';
 import { BaseProps, DirectionType } from '../_utils/props';
-import { ResizerProps } from './resizer';
+
+export type SplitOrientation = DirectionType;
+export type SplitPrimary = 'first' | 'second';
+export type SplitSize = number | `${number}px` | `${number}%`;
+
+export type SplitSeparatorRenderProps = {
+  orientation: SplitOrientation;
+  disabled: boolean;
+  dragging: boolean;
+  collapsed: boolean;
+  collapsible: boolean;
+  size: number;
+  hitAreaSize: number;
+  toggleCollapse: () => void;
+};
+
+export interface SplitPaneProps
+  extends BaseProps,
+    Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'children'> {
+  /** Minimum pane size */
+  min?: SplitSize;
+
+  /** Maximum pane size */
+  max?: SplitSize;
+
+  children?: React.ReactNode;
+}
 
 export interface SplitProps
   extends BaseProps,
-    Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'onChange'> {
-  /** Split mode */
-  mode?: DirectionType;
+    Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'children'> {
+  /** Pane arrangement: horizontal => left/right, vertical => top/bottom */
+  orientation?: SplitOrientation;
+
+  /** Which pane owns the resizable size model */
+  primary?: SplitPrimary;
 
   /** Disabled flag */
   disabled?: boolean;
 
-  /** Minimum width / height of the target pane */
-  min?: number | string;
+  /** Controlled size for the primary pane */
+  size?: SplitSize;
+
+  /** Initial size for the primary pane */
+  defaultSize?: SplitSize;
+
+  /** Minimum size for the primary pane */
+  min?: SplitSize;
+
+  /** Maximum size for the primary pane */
+  max?: SplitSize;
+
+  /** Allow the primary pane to collapse */
+  collapsible?: boolean;
+
+  /** Controlled collapsed state for the primary pane */
+  collapsed?: boolean;
+
+  /** Initial collapsed state for the primary pane */
+  defaultCollapsed?: boolean;
+
+  /** Size of the primary pane while collapsed */
+  collapsedSize?: SplitSize;
+
+  onCollapseChange?: (collapsed: boolean) => void;
+
+  /** Pointer drag step */
+  dragStep?: number;
+
+  /** Keyboard drag step */
+  keyboardStep?: number;
 
-  /** Maximum width / height of the target pane */
-  max?: number | string;
+  /** Visual separator size */
+  separatorSize?: number;
 
-  /** Control the size of target pane */
-  size?: number | string;
+  /** Interactive separator hit area size */
+  separatorHitAreaSize?: number;
 
-  /** Default size of target pane */
-  defaultSize?: number | string;
+  /** Class name applied to the separator interaction container */
+  separatorClassName?: string;
 
-  /** Resizer's other props */
-  resizerProps?: ResizerProps;
+  /** Inline style applied to the separator interaction container */
+  separatorStyle?: React.CSSProperties;
 
-  /** Drag step */
-  step?: number;
+  /** Custom separator content renderer */
+  separatorRender?: (props: SplitSeparatorRenderProps) => React.ReactNode;
 
-  resizerSize?: number;
+  onResize?: (size: number) => void;
+  onResizeStart?: (size: number) => void;
+  onResizeEnd?: (size: number) => void;
 
-  onChange?: (size: number) => void;
-  onDragStarted?: () => void;
-  onDragFinished?: () => void;
+  children: [React.ReactNode, React.ReactNode];
 }
diff --git a/packages/tokens/source/components/split.json b/packages/tokens/source/components/split.json
index 3183cc22b..a6ca2663c 100644
--- a/packages/tokens/source/components/split.json
+++ b/packages/tokens/source/components/split.json
@@ -1,27 +1,78 @@
 {
   "split.bar-bg": {
-    "$value": "#f8f8f9",
+    "$value": "#fafbfc",
     "$type": "color",
-    "description": "Split bar bg."
+    "description": "Split bar handle background."
+  },
+  "split.bar-bg-active": {
+    "$value": "#ffffff",
+    "$type": "color",
+    "description": "Split bar handle background when active."
   },
   "split.bar-border": {
-    "$value": "#dcdee2",
+    "$value": "#d7dbe0",
     "$type": "color",
-    "description": "Split bar border."
+    "description": "Split bar handle border."
+  },
+  "split.bar-border-active": {
+    "$value": "#c8cdd3",
+    "$type": "color",
+    "description": "Split bar handle border when active."
   },
   "split.bar-line": {
-    "$value": "#d5d5d5",
+    "$value": "#c8ced5",
     "$type": "color",
-    "description": "Split bar line."
+    "description": "Split bar track and grip color."
+  },
+  "split.bar-line-active": {
+    "$value": "#aeb6bf",
+    "$type": "color",
+    "description": "Split bar track and grip color when active."
+  },
+  "split.bar-size": {
+    "$value": "2px",
+    "$type": "dimension",
+    "description": "Split bar visual thickness."
+  },
+  "split.bar-handle-length": {
+    "$value": "30px",
+    "$type": "dimension",
+    "description": "Split bar handle long edge size."
+  },
+  "split.bar-handle-thickness": {
+    "$value": "14px",
+    "$type": "dimension",
+    "description": "Split bar handle short edge size."
   },
-  "split.bar-handle-size": {
+  "split.bar-handle-padding": {
     "$value": "4px",
     "$type": "dimension",
-    "description": "Split bar handle line size."
+    "description": "Split bar handle padding."
+  },
+  "split.bar-handle-radius": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Split bar handle corner radius."
   },
-  "split.bar-handle-gap": {
+  "split.bar-grip-size": {
+    "$value": "2px",
+    "$type": "dimension",
+    "description": "Split bar grip dot size."
+  },
+  "split.bar-grip-gap": {
     "$value": "1px",
     "$type": "dimension",
-    "description": "Split bar handle gap."
+    "description": "Split bar grip gap."
+  },
+  "split.bar-shadow": {
+    "$value": "0 1px 2px rgba(15, 23, 42, 0.08)",
+    "$type": "shadow",
+    "description": "Split bar handle shadow."
+  },
+  "split.bar-focus-ring": {
+    "$value": "{shadow-focus}",
+    "$type": "shadow",
+    "description": "Split bar handle focus ring.",
+    "fallback": "--ty-shadow-focus"
   }
 }
diff --git a/packages/tokens/source/themes/dark.json b/packages/tokens/source/themes/dark.json
index d1bdccc3a..72d28079f 100644
--- a/packages/tokens/source/themes/dark.json
+++ b/packages/tokens/source/themes/dark.json
@@ -202,9 +202,12 @@
       "speed-dial.bg-hover": "#7a50bf",
       "speed-dial.tooltip-bg": "#363636",
       "speed-dial.tooltip-color": "rgba(255, 255, 255, 0.85)",
-      "split.bar-bg": "#262626",
-      "split.bar-border": "#424242",
-      "split.bar-line": "#525252",
+      "split.bar-bg": "#242424",
+      "split.bar-bg-active": "#2a2a2a",
+      "split.bar-border": "#3a3a3a",
+      "split.bar-border-active": "#474747",
+      "split.bar-line": "#484848",
+      "split.bar-line-active": "#666666",
       "steps.icon-bg": "#1f1f1f",
       "steps.tail-color": "#424242",
       "switch.bg": "rgba(255, 255, 255, 0.25)",

From f461eba7caf10c78cb503f916b1d14bfab3e6ae2 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Sat, 18 Apr 2026 20:57:18 +1000
Subject: [PATCH 2/3] docs(react): make split demos theme-aware

---
 packages/react/src/split/demo/Collapse.tsx    |  8 +++--
 .../react/src/split/demo/CustomHandle.tsx     | 30 ++++++++++++++-----
 packages/react/src/split/demo/HitAreaSize.tsx | 16 ++++++----
 packages/react/src/split/demo/Horizontal.tsx  | 13 ++++++--
 packages/react/src/split/demo/Multiple.tsx    |  8 +++--
 packages/react/src/split/demo/Nest.tsx        | 19 +++++++++---
 packages/react/src/split/demo/Step.tsx        | 11 +++++--
 packages/react/src/split/demo/Vertical.tsx    | 14 +++++++--
 8 files changed, 89 insertions(+), 30 deletions(-)

diff --git a/packages/react/src/split/demo/Collapse.tsx b/packages/react/src/split/demo/Collapse.tsx
index aa24a06e8..329b68d1e 100644
--- a/packages/react/src/split/demo/Collapse.tsx
+++ b/packages/react/src/split/demo/Collapse.tsx
@@ -8,8 +8,12 @@ export default function CollapseDemo() {
       min="128px"
       collapsible
       collapsedSize={72}
-      style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
-      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+      style={{
+        height: 220,
+        border: '1px solid var(--ty-color-border-secondary)',
+        background: 'var(--ty-color-fill)',
+      }}>
+      <Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
         Collapsible sidebar
       </Split.Pane>
       <Split.Pane min="160px" style={{ padding: 16 }}>
diff --git a/packages/react/src/split/demo/CustomHandle.tsx b/packages/react/src/split/demo/CustomHandle.tsx
index 9bdf6bc23..69d5ed1c8 100644
--- a/packages/react/src/split/demo/CustomHandle.tsx
+++ b/packages/react/src/split/demo/CustomHandle.tsx
@@ -31,7 +31,9 @@ export default function CustomHandleDemo() {
               style={{
                 width: orientation === 'horizontal' ? 2 : '100%',
                 height: orientation === 'vertical' ? 2 : '100%',
-                background: dragging ? '#94a3b8' : '#cbd5e1',
+                background: dragging
+                  ? 'color-mix(in srgb, var(--ty-color-primary) 52%, var(--ty-color-border))'
+                  : 'var(--ty-color-border)',
               }}
             />
           </div>
@@ -42,9 +44,17 @@ export default function CustomHandleDemo() {
               minWidth: orientation === 'horizontal' ? 20 : 36,
               minHeight: orientation === 'vertical' ? 20 : 36,
               borderRadius: 999,
-              background: collapsed ? '#e2e8f0' : '#ffffff',
-              border: `1px solid ${dragging ? '#94a3b8' : '#cbd5e1'}`,
-              boxShadow: dragging ? '0 0 0 4px rgba(148, 163, 184, 0.12)' : '0 1px 3px rgba(15, 23, 42, 0.12)',
+              background: collapsed
+                ? 'var(--ty-color-fill-secondary)'
+                : 'var(--ty-color-bg-container)',
+              border: `1px solid ${
+                dragging
+                  ? 'color-mix(in srgb, var(--ty-color-primary) 48%, var(--ty-color-border))'
+                  : 'var(--ty-color-border-secondary)'
+              }`,
+              boxShadow: dragging
+                ? '0 0 0 4px color-mix(in srgb, var(--ty-color-primary) 14%, transparent)'
+                : '0 1px 2px rgba(15, 23, 42, 0.12)',
               display: 'flex',
               flexDirection: orientation === 'horizontal' ? 'column' : 'row',
               alignItems: 'center',
@@ -59,15 +69,21 @@ export default function CustomHandleDemo() {
                   width: 3,
                   height: 3,
                   borderRadius: '50%',
-                  background: collapsed ? '#64748b' : '#94a3b8',
+                  background: collapsed
+                    ? 'var(--ty-color-text-tertiary)'
+                    : 'var(--ty-color-text-secondary)',
                 }}
               />
             ))}
           </div>
         </div>
       )}
-      style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
-      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+      style={{
+        height: 220,
+        border: '1px solid var(--ty-color-border-secondary)',
+        background: 'var(--ty-color-fill)',
+      }}>
+      <Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
         Navigation
       </Split.Pane>
       <Split.Pane min="160px" style={{ padding: 16 }}>
diff --git a/packages/react/src/split/demo/HitAreaSize.tsx b/packages/react/src/split/demo/HitAreaSize.tsx
index 3dce8da2e..7c5bc1bfc 100644
--- a/packages/react/src/split/demo/HitAreaSize.tsx
+++ b/packages/react/src/split/demo/HitAreaSize.tsx
@@ -7,7 +7,7 @@ export default function HitAreaSizeDemo() {
 
   return (
     <Flex vertical gap="md">
-      <div style={{ fontSize: 12, color: '#6b7280' }}>Hit area: {hitAreaSize}px</div>
+      <div style={{ fontSize: 12, color: 'var(--ty-color-text-secondary)' }}>Hit area: {hitAreaSize}px</div>
       <Slider
         min={16}
         max={96}
@@ -24,12 +24,16 @@ export default function HitAreaSizeDemo() {
         min="112px"
         separatorHitAreaSize={hitAreaSize}
         separatorStyle={{
-          background: 'rgba(59, 130, 246, 0.24)',
-          borderLeft: '2px solid rgba(59, 130, 246, 0.7)',
-          borderRight: '2px solid rgba(59, 130, 246, 0.7)',
+          background: 'color-mix(in srgb, var(--ty-color-info) 18%, transparent)',
+          borderLeft: '2px solid color-mix(in srgb, var(--ty-color-info) 72%, transparent)',
+          borderRight: '2px solid color-mix(in srgb, var(--ty-color-info) 72%, transparent)',
         }}
-        style={{ height: 240, border: '1px solid #dcdee2', background: '#f8fafc' }}>
-        <Split.Pane style={{ padding: 16, background: '#fff' }}>
+        style={{
+          height: 240,
+          border: '1px solid var(--ty-color-border-secondary)',
+          background: 'var(--ty-color-fill)',
+        }}>
+        <Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
           Navigation
         </Split.Pane>
         <Split.Pane min="160px" style={{ padding: 16, paddingLeft: 28 }}>
diff --git a/packages/react/src/split/demo/Horizontal.tsx b/packages/react/src/split/demo/Horizontal.tsx
index c149227e1..fee4b2098 100644
--- a/packages/react/src/split/demo/Horizontal.tsx
+++ b/packages/react/src/split/demo/Horizontal.tsx
@@ -3,16 +3,23 @@ import { Split } from '@tiny-design/react';
 
 const paneStyle: React.CSSProperties = {
   padding: 16,
-  background: '#ffffff',
+  background: 'var(--ty-color-bg-container)',
 };
 
 export default function HorizontalDemo() {
   return (
-    <Split defaultSize="32%" min="120px" style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
+    <Split
+      defaultSize="32%"
+      min="120px"
+      style={{
+        height: 220,
+        border: '1px solid var(--ty-color-border-secondary)',
+        background: 'var(--ty-color-fill)',
+      }}>
       <Split.Pane style={paneStyle}>
         Navigation
       </Split.Pane>
-      <Split.Pane min="160px" style={{ ...paneStyle, background: '#f8fafc' }}>
+      <Split.Pane min="160px" style={{ ...paneStyle, background: 'var(--ty-color-fill)' }}>
         Workspace
       </Split.Pane>
     </Split>
diff --git a/packages/react/src/split/demo/Multiple.tsx b/packages/react/src/split/demo/Multiple.tsx
index 1a37ae39b..06dab14af 100644
--- a/packages/react/src/split/demo/Multiple.tsx
+++ b/packages/react/src/split/demo/Multiple.tsx
@@ -8,11 +8,15 @@ export default function MultipleDemo() {
       defaultSize="28%"
       min="160px"
       max="420px"
-      style={{ height: 220, border: '1px solid #dcdee2', background: '#f8fafc' }}>
+      style={{
+        height: 220,
+        border: '1px solid var(--ty-color-border-secondary)',
+        background: 'var(--ty-color-fill)',
+      }}>
       <Split.Pane min="120px" style={{ padding: 16 }}>
         Canvas
       </Split.Pane>
-      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+      <Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
         Secondary panel
       </Split.Pane>
     </Split>
diff --git a/packages/react/src/split/demo/Nest.tsx b/packages/react/src/split/demo/Nest.tsx
index def3998b3..e8cd75eaf 100644
--- a/packages/react/src/split/demo/Nest.tsx
+++ b/packages/react/src/split/demo/Nest.tsx
@@ -3,16 +3,27 @@ import { Split } from '@tiny-design/react';
 
 export default function NestDemo() {
   return (
-    <Split defaultSize={220} min="120px" style={{ height: 320, border: '1px solid #dcdee2', background: '#f8fafc' }}>
-      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+    <Split
+      defaultSize={220}
+      min="120px"
+      style={{
+        height: 320,
+        border: '1px solid var(--ty-color-border-secondary)',
+        background: 'var(--ty-color-fill)',
+      }}>
+      <Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
         Sidebar
       </Split.Pane>
       <Split.Pane min="180px">
         <Split orientation="vertical" defaultSize="38%" min="72px" style={{ height: '100%' }}>
-          <Split.Pane style={{ padding: 16, background: '#fff7ed' }}>
+          <Split.Pane
+            style={{
+              padding: 16,
+              background: 'color-mix(in srgb, var(--ty-color-warning) 10%, var(--ty-color-bg-container))',
+            }}>
             Summary
           </Split.Pane>
-          <Split.Pane min="96px" style={{ padding: 16, background: '#ffffff' }}>
+          <Split.Pane min="96px" style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
             Detail
           </Split.Pane>
         </Split>
diff --git a/packages/react/src/split/demo/Step.tsx b/packages/react/src/split/demo/Step.tsx
index 8b63a13dc..264327717 100644
--- a/packages/react/src/split/demo/Step.tsx
+++ b/packages/react/src/split/demo/Step.tsx
@@ -3,11 +3,16 @@ import { Split } from '@tiny-design/react';
 
 export default function StepDemo() {
   return (
-    <Split dragStep={24} keyboardStep={16} defaultSize={220} min="120px" style={{ height: 220, border: '1px solid #dcdee2' }}>
-      <Split.Pane style={{ padding: 16, background: '#fff' }}>
+    <Split
+      dragStep={24}
+      keyboardStep={16}
+      defaultSize={220}
+      min="120px"
+      style={{ height: 220, border: '1px solid var(--ty-color-border-secondary)' }}>
+      <Split.Pane style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
         Step-based pane
       </Split.Pane>
-      <Split.Pane min="160px" style={{ padding: 16, background: '#f8fafc' }}>
+      <Split.Pane min="160px" style={{ padding: 16, background: 'var(--ty-color-fill)' }}>
         Content
       </Split.Pane>
     </Split>
diff --git a/packages/react/src/split/demo/Vertical.tsx b/packages/react/src/split/demo/Vertical.tsx
index 511c68e74..c4836dff1 100644
--- a/packages/react/src/split/demo/Vertical.tsx
+++ b/packages/react/src/split/demo/Vertical.tsx
@@ -3,11 +3,19 @@ import { Split } from '@tiny-design/react';
 
 export default function VerticalDemo() {
   return (
-    <Split orientation="vertical" defaultSize="42%" min="64px" style={{ height: 220, border: '1px solid #dcdee2' }}>
-      <Split.Pane style={{ padding: 16, background: '#fff7ed' }}>
+    <Split
+      orientation="vertical"
+      defaultSize="42%"
+      min="64px"
+      style={{ height: 220, border: '1px solid var(--ty-color-border-secondary)' }}>
+      <Split.Pane
+        style={{
+          padding: 16,
+          background: 'color-mix(in srgb, var(--ty-color-warning) 10%, var(--ty-color-bg-container))',
+        }}>
         Preview
       </Split.Pane>
-      <Split.Pane min="72px" style={{ padding: 16, background: '#fff' }}>
+      <Split.Pane min="72px" style={{ padding: 16, background: 'var(--ty-color-bg-container)' }}>
         Inspector
       </Split.Pane>
     </Split>

From 15640cbc1c4bf1e17bd242bdf57ef4eb5c449367 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Sat, 18 Apr 2026 20:57:40 +1000
Subject: [PATCH 3/3] chore: lint

---
 .changeset/major-split-product-upgrade.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/major-split-product-upgrade.md b/.changeset/major-split-product-upgrade.md
index 9d2ef29b3..1514d3696 100644
--- a/.changeset/major-split-product-upgrade.md
+++ b/.changeset/major-split-product-upgrade.md
@@ -1,6 +1,6 @@
 ---
-'@tiny-design/react': major
-'@tiny-design/tokens': major
+'@tiny-design/react': patch
+'@tiny-design/tokens': patch
 ---
 
 Redesign the Split component with a product-grade pane model, refreshed separator styling, updated tokens, and rewritten docs/demos.