A design system in a box.
hip-ui.tngl.io/docs/introduction
window splitter
+411
-1
+1
-1
README.md
+1
-1
README.md
+2
apps/docs/package.json
+2
apps/docs/package.json
···
16
16
"@react-aria/utils": "^3.31.0",
17
17
"@react-stately/utils": "^3.10.8",
18
18
"@react-types/overlays": "^3.9.2",
19
+
"@react-types/shared": "^3.32.1",
19
20
"@shikijs/rehype": "^3.13.0",
20
21
"@stefanprobst/rehype-extract-toc": "^3.0.0",
21
22
"@stylexjs/stylex": "^0.16.2",
···
28
29
"@tanstack/react-start": "^1.133.27",
29
30
"@tanstack/router-plugin": "^1.133.27",
30
31
"@tldraw/editor": "^4.1.2",
32
+
"@window-splitter/react": "^1.1.2",
31
33
"change-case": "catalog:",
32
34
"dedent": "catalog:",
33
35
"glob": "^11.0.3",
+90
apps/docs/src/components/window-splitter/index.tsx
+90
apps/docs/src/components/window-splitter/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import {
5
+
PanelGroup as BasePanelGroup,
6
+
Panel as BasePanel,
7
+
PanelResizer as BasePanelResizer,
8
+
type PanelGroupProps,
9
+
type PanelProps,
10
+
type PanelResizerProps,
11
+
} from "@window-splitter/react";
12
+
13
+
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
14
+
import { spacing } from "../theme/spacing.stylex";
15
+
import { StyleXComponentProps } from "../theme/types";
16
+
17
+
const styles = stylex.create({
18
+
panel: {
19
+
overflow: "auto",
20
+
},
21
+
panelResizer: {
22
+
backgroundColor: {
23
+
default: uiColor.border2,
24
+
":hover:not([data-state='dragging'])": uiColor.border3,
25
+
":is([data-state='dragging'])": primaryColor.border2,
26
+
},
27
+
cursor: {
28
+
default: "col-resize",
29
+
":is([data-panel-group-direction=vertical])": "row-resize",
30
+
},
31
+
position: "relative",
32
+
},
33
+
hitArea: {
34
+
display: {
35
+
default: "none",
36
+
":is([data-splitter-type='handle']:hover > *)": "block",
37
+
},
38
+
position: "absolute",
39
+
40
+
bottom: { ":is([data-handle-orientation='horizontal'] *)": 0 },
41
+
left: { ":is([data-handle-orientation='vertical'] *)": 0 },
42
+
right: { ":is([data-handle-orientation='vertical'] *)": 0 },
43
+
top: { ":is([data-handle-orientation='horizontal'] *)": 0 },
44
+
transform: {
45
+
":is([data-handle-orientation='horizontal'] *)": "translateX(-50%)",
46
+
":is([data-handle-orientation='vertical'] *)": "translateY(-50%)",
47
+
},
48
+
49
+
height: {
50
+
":is([data-handle-orientation='horizontal'] *)": "100%",
51
+
":is([data-handle-orientation='vertical'] *)": spacing["2"],
52
+
},
53
+
width: {
54
+
":is([data-handle-orientation='horizontal'] *)": spacing["2"],
55
+
":is([data-handle-orientation='vertical'] *)": "100%",
56
+
},
57
+
},
58
+
});
59
+
60
+
export interface WindowSplitterPanelGroupProps
61
+
extends StyleXComponentProps<PanelGroupProps> {}
62
+
63
+
export interface WindowSplitterPanelProps
64
+
extends StyleXComponentProps<PanelProps> {}
65
+
66
+
export interface WindowSplitterPanelResizerProps
67
+
extends StyleXComponentProps<PanelResizerProps> {}
68
+
69
+
export function PanelGroup({ style, ...props }: WindowSplitterPanelGroupProps) {
70
+
return <BasePanelGroup {...props} {...stylex.props(style)} />;
71
+
}
72
+
73
+
export function Panel({ style, ...props }: WindowSplitterPanelProps) {
74
+
return <BasePanel {...props} {...stylex.props(styles.panel, style)} />;
75
+
}
76
+
77
+
export function PanelResizer({
78
+
style,
79
+
...props
80
+
}: WindowSplitterPanelResizerProps) {
81
+
return (
82
+
<BasePanelResizer
83
+
{...props}
84
+
{...stylex.props(styles.panelResizer, style)}
85
+
size="1px"
86
+
>
87
+
<div {...stylex.props(styles.hitArea)} />
88
+
</BasePanelResizer>
89
+
);
90
+
}
+47
apps/docs/src/docs/components/window-splitter.mdx
+47
apps/docs/src/docs/components/window-splitter.mdx
···
1
+
---
2
+
title: Window Splitter
3
+
description: A flexible window splitter component for creating resizable panel layouts.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/window-splitter/basic'
9
+
import { Vertical } from '../../examples/window-splitter/vertical'
10
+
import { ThreePanels } from '../../examples/window-splitter/three-panels'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the window-splitter component to your project.
17
+
18
+
```bash
19
+
pnpm hip install window-splitter
20
+
```
21
+
22
+
## Props
23
+
24
+
This component is built using [@window-splitter/react](https://react-window-splitter-six.vercel.app/docs/install), which follows the [WAI-ARIA Window Splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
25
+
26
+
<PropDocs components={["PanelGroup", "Panel", "PanelResizer"]} />
27
+
28
+
## Features
29
+
30
+
### Vertical Layout
31
+
32
+
Panels can be arranged vertically by setting the `direction` prop on `PanelGroup`.
33
+
34
+
<Example src={Vertical} />
35
+
36
+
### Multiple Panels
37
+
38
+
You can create layouts with three or more panels by adding multiple `Panel` and `PanelResizer` components.
39
+
40
+
<Example src={ThreePanels} />
41
+
42
+
## Related Components
43
+
44
+
- [Flex](/docs/components/flex) - For flexible layouts without resizing
45
+
- [Grid](/docs/components/grid) - For two-dimensional layouts
46
+
- [Separator](/docs/components/separator) - For visual separation
47
+
+32
apps/docs/src/examples/window-splitter/basic.tsx
+32
apps/docs/src/examples/window-splitter/basic.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { PanelGroup, Panel, PanelResizer } from "@/components/window-splitter";
4
+
5
+
const styles = stylex.create({
6
+
container: {
7
+
height: "400px",
8
+
width: "100%",
9
+
},
10
+
panelContent: {
11
+
alignItems: "center",
12
+
display: "flex",
13
+
justifyContent: "center",
14
+
padding: "16px",
15
+
},
16
+
});
17
+
18
+
export function Basic() {
19
+
return (
20
+
<div {...stylex.props(styles.container)}>
21
+
<PanelGroup>
22
+
<Panel min="130px" max="80%" style={styles.panelContent}>
23
+
Left Panel
24
+
</Panel>
25
+
<PanelResizer />
26
+
<Panel min="130px" style={styles.panelContent}>
27
+
Right Panel
28
+
</Panel>
29
+
</PanelGroup>
30
+
</div>
31
+
);
32
+
}
+55
apps/docs/src/examples/window-splitter/three-panels.tsx
+55
apps/docs/src/examples/window-splitter/three-panels.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { Card, CardBody, CardHeader, CardTitle } from "@/components/card";
4
+
import { PanelGroup, Panel, PanelResizer } from "@/components/window-splitter";
5
+
6
+
const styles = stylex.create({
7
+
container: {
8
+
height: "400px",
9
+
width: "100%",
10
+
},
11
+
panelContent: {
12
+
padding: "16px",
13
+
},
14
+
});
15
+
16
+
export function ThreePanels() {
17
+
return (
18
+
<div {...stylex.props(styles.container)}>
19
+
<PanelGroup>
20
+
<Panel id="left" min="150px" max="300px">
21
+
<div {...stylex.props(styles.panelContent)}>
22
+
<Card>
23
+
<CardHeader>
24
+
<CardTitle>Left Panel</CardTitle>
25
+
</CardHeader>
26
+
<CardBody>First panel with constraints.</CardBody>
27
+
</Card>
28
+
</div>
29
+
</Panel>
30
+
<PanelResizer id="resizer-1" />
31
+
<Panel id="middle" min="150px">
32
+
<div {...stylex.props(styles.panelContent)}>
33
+
<Card>
34
+
<CardHeader>
35
+
<CardTitle>Middle Panel</CardTitle>
36
+
</CardHeader>
37
+
<CardBody>Second panel that can grow and shrink.</CardBody>
38
+
</Card>
39
+
</div>
40
+
</Panel>
41
+
<PanelResizer id="resizer-2" />
42
+
<Panel id="right" min="150px" max="300px">
43
+
<div {...stylex.props(styles.panelContent)}>
44
+
<Card>
45
+
<CardHeader>
46
+
<CardTitle>Right Panel</CardTitle>
47
+
</CardHeader>
48
+
<CardBody>Third panel with constraints.</CardBody>
49
+
</Card>
50
+
</div>
51
+
</Panel>
52
+
</PanelGroup>
53
+
</div>
54
+
);
55
+
}
+31
apps/docs/src/examples/window-splitter/vertical.tsx
+31
apps/docs/src/examples/window-splitter/vertical.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { PanelGroup, Panel, PanelResizer } from "@/components/window-splitter";
4
+
5
+
const styles = stylex.create({
6
+
container: {
7
+
height: "400px",
8
+
width: "100%",
9
+
},
10
+
panelContent: {
11
+
alignItems: "center",
12
+
display: "flex",
13
+
justifyContent: "center",
14
+
},
15
+
});
16
+
17
+
export function Vertical() {
18
+
return (
19
+
<div {...stylex.props(styles.container)}>
20
+
<PanelGroup orientation="vertical">
21
+
<Panel min="100px" max="300px" style={styles.panelContent}>
22
+
Top Panel
23
+
</Panel>
24
+
<PanelResizer />
25
+
<Panel min="100px" style={styles.panelContent}>
26
+
Bottom Panel
27
+
</Panel>
28
+
</PanelGroup>
29
+
</div>
30
+
);
31
+
}
+1
packages/hip-ui/package.json
+1
packages/hip-ui/package.json
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
76
76
import { tooltipConfig } from "../components/tooltip/tooltip-config.js";
77
77
import { treeConfig } from "../components/tree/tree-config.js";
78
78
import { typographyConfig } from "../components/typography/typography-config.js";
79
+
import { windowSplitterConfig } from "../components/window-splitter/window-splitter-config.js";
79
80
import { ComponentConfig } from "../types.js";
80
81
import { ConfigOptions, getConfig, setConfig } from "./config.js";
81
82
···
150
151
drawerConfig,
151
152
editableTextConfig,
152
153
toastConfig,
154
+
windowSplitterConfig,
153
155
];
154
156
155
157
function StringSetting({
+90
packages/hip-ui/src/components/window-splitter/index.tsx
+90
packages/hip-ui/src/components/window-splitter/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import {
5
+
PanelGroup as BasePanelGroup,
6
+
Panel as BasePanel,
7
+
PanelResizer as BasePanelResizer,
8
+
type PanelGroupProps,
9
+
type PanelProps,
10
+
type PanelResizerProps,
11
+
} from "@window-splitter/react";
12
+
13
+
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
14
+
import { spacing } from "../theme/spacing.stylex";
15
+
import { StyleXComponentProps } from "../theme/types";
16
+
17
+
const styles = stylex.create({
18
+
panel: {
19
+
overflow: "auto",
20
+
},
21
+
panelResizer: {
22
+
backgroundColor: {
23
+
default: uiColor.border2,
24
+
":hover:not([data-state='dragging'])": uiColor.border3,
25
+
":is([data-state='dragging'])": primaryColor.border2,
26
+
},
27
+
cursor: {
28
+
default: "col-resize",
29
+
":is([data-panel-group-direction=vertical])": "row-resize",
30
+
},
31
+
position: "relative",
32
+
},
33
+
hitArea: {
34
+
display: {
35
+
default: "none",
36
+
":is([data-splitter-type='handle']:hover > *)": "block",
37
+
},
38
+
position: "absolute",
39
+
40
+
bottom: { ":is([data-handle-orientation='horizontal'] *)": 0 },
41
+
left: { ":is([data-handle-orientation='vertical'] *)": 0 },
42
+
right: { ":is([data-handle-orientation='vertical'] *)": 0 },
43
+
top: { ":is([data-handle-orientation='horizontal'] *)": 0 },
44
+
transform: {
45
+
":is([data-handle-orientation='horizontal'] *)": "translateX(-50%)",
46
+
":is([data-handle-orientation='vertical'] *)": "translateY(-50%)",
47
+
},
48
+
49
+
height: {
50
+
":is([data-handle-orientation='horizontal'] *)": "100%",
51
+
":is([data-handle-orientation='vertical'] *)": spacing["2"],
52
+
},
53
+
width: {
54
+
":is([data-handle-orientation='horizontal'] *)": spacing["2"],
55
+
":is([data-handle-orientation='vertical'] *)": "100%",
56
+
},
57
+
},
58
+
});
59
+
60
+
export interface WindowSplitterPanelGroupProps
61
+
extends StyleXComponentProps<PanelGroupProps> {}
62
+
63
+
export interface WindowSplitterPanelProps
64
+
extends StyleXComponentProps<PanelProps> {}
65
+
66
+
export interface WindowSplitterPanelResizerProps
67
+
extends StyleXComponentProps<PanelResizerProps> {}
68
+
69
+
export function PanelGroup({ style, ...props }: WindowSplitterPanelGroupProps) {
70
+
return <BasePanelGroup {...props} {...stylex.props(style)} />;
71
+
}
72
+
73
+
export function Panel({ style, ...props }: WindowSplitterPanelProps) {
74
+
return <BasePanel {...props} {...stylex.props(styles.panel, style)} />;
75
+
}
76
+
77
+
export function PanelResizer({
78
+
style,
79
+
...props
80
+
}: WindowSplitterPanelResizerProps) {
81
+
return (
82
+
<BasePanelResizer
83
+
{...props}
84
+
{...stylex.props(styles.panelResizer, style)}
85
+
size="1px"
86
+
>
87
+
<div {...stylex.props(styles.hitArea)} />
88
+
</BasePanelResizer>
89
+
);
90
+
}
+15
packages/hip-ui/src/components/window-splitter/window-splitter-config.ts
+15
packages/hip-ui/src/components/window-splitter/window-splitter-config.ts
···
1
+
import { ComponentConfig } from "../../types";
2
+
3
+
export const windowSplitterConfig: ComponentConfig = {
4
+
name: "window-splitter",
5
+
filepath: "./index.tsx",
6
+
hipDependencies: [
7
+
"../theme/semantic-color.stylex.tsx",
8
+
"../theme/spacing.stylex.tsx",
9
+
"../theme/types.ts",
10
+
],
11
+
dependencies: {
12
+
"@window-splitter/react": "^1.0.0",
13
+
},
14
+
};
15
+
+45
pnpm-lock.yaml
+45
pnpm-lock.yaml
···
95
95
'@react-types/overlays':
96
96
specifier: ^3.9.2
97
97
version: 3.9.2(react@19.2.0)
98
+
'@react-types/shared':
99
+
specifier: ^3.32.1
100
+
version: 3.32.1(react@19.2.0)
98
101
'@shikijs/rehype':
99
102
specifier: ^3.13.0
100
103
version: 3.13.0
···
131
134
'@tldraw/editor':
132
135
specifier: ^4.1.2
133
136
version: 4.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
137
+
'@window-splitter/react':
138
+
specifier: ^1.1.2
139
+
version: 1.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
134
140
change-case:
135
141
specifier: 'catalog:'
136
142
version: 5.4.4
···
395
401
'@stylexjs/stylex':
396
402
specifier: 'catalog:'
397
403
version: 0.16.2
404
+
'@window-splitter/react':
405
+
specifier: ^1.0.0
406
+
version: 1.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
398
407
change-case:
399
408
specifier: 'catalog:'
400
409
version: 5.4.4
···
3741
3750
'@webassemblyjs/wast-printer@1.14.1':
3742
3751
resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
3743
3752
3753
+
'@window-splitter/interface@1.1.2':
3754
+
resolution: {integrity: sha512-WyQITTxVbeWEvmXg4hYAyIOFv+6DYgtEHdmk3UXdE1jfknKKC7FACoXf2ORbe6iurWScofktJLzv7QpIvQyUWg==}
3755
+
engines: {node: '>=18.0.0'}
3756
+
3757
+
'@window-splitter/react@1.1.2':
3758
+
resolution: {integrity: sha512-swD6R2dswg5YFn3wVgGIdXcoycKy2lMTesIaanoz4HquXRUF8AhRnCR902AWS3e+RkiF3TGKr8JT2VGYof3Jeg==}
3759
+
engines: {node: '>=18.0.0'}
3760
+
peerDependencies:
3761
+
react: '>=16'
3762
+
react-dom: '>=16'
3763
+
3764
+
'@window-splitter/state@1.1.2':
3765
+
resolution: {integrity: sha512-R047BIp298PFakzaT2V57PePbGiNkjtJwqbgsRBAhitcS/3hsuYQtYVEvmw9U7gP1l8P3rUCg5l5/ZlAQ9earQ==}
3766
+
engines: {node: '>=18.0.0'}
3767
+
3744
3768
'@xtuc/ieee754@1.2.0':
3745
3769
resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
3746
3770
···
3978
4002
3979
4003
bidi-js@1.0.3:
3980
4004
resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
4005
+
4006
+
big.js@6.2.2:
4007
+
resolution: {integrity: sha512-y/ie+Faknx7sZA5MfGA2xKlu0GDv8RWrXGsmlteyJQ2lvoKv9GBK/fpRMc2qlSoBAgNxrixICFCBefIq8WCQpQ==}
3981
4008
3982
4009
binary-extensions@2.3.0:
3983
4010
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
···
11961
11988
'@webassemblyjs/ast': 1.14.1
11962
11989
'@xtuc/long': 4.2.2
11963
11990
11991
+
'@window-splitter/interface@1.1.2':
11992
+
dependencies:
11993
+
'@window-splitter/state': 1.1.2
11994
+
11995
+
'@window-splitter/react@1.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
11996
+
dependencies:
11997
+
'@react-aria/utils': 3.31.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
11998
+
'@window-splitter/interface': 1.1.2
11999
+
'@window-splitter/state': 1.1.2
12000
+
react: 19.2.0
12001
+
react-dom: 19.2.0(react@19.2.0)
12002
+
12003
+
'@window-splitter/state@1.1.2':
12004
+
dependencies:
12005
+
big.js: 6.2.2
12006
+
11964
12007
'@xtuc/ieee754@1.2.0': {}
11965
12008
11966
12009
'@xtuc/long@4.2.2': {}
···
12197
12240
bidi-js@1.0.3:
12198
12241
dependencies:
12199
12242
require-from-string: 2.0.2
12243
+
12244
+
big.js@6.2.2: {}
12200
12245
12201
12246
binary-extensions@2.3.0: {}
12202
12247