Splitter
A component that divides your interface into resizable sections
Usage
A
B
import { Splitter } from '~/components/ui'
export const Demo = (props: Splitter.RootProps) => {
return (
<Splitter.Root
size={[
{ id: 'a', size: 50 },
{ id: 'b', size: 50 },
]}
{...props}
>
<Splitter.Panel id="a">A</Splitter.Panel>
<Splitter.ResizeTrigger id="a:b" />
<Splitter.Panel id="b">B</Splitter.Panel>
</Splitter.Root>
)
}
Installation
npx @park-ui/cli components add splitter1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/splitter.tsx
'use client'
import type { Assign } from '@ark-ui/react'
import { Splitter } from '@ark-ui/react/splitter'
import { type SplitterVariantProps, splitter } from 'styled-system/recipes'
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'
const { withProvider, withContext } = createStyleContext(splitter)
export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
HTMLDivElement,
Assign<Assign<HTMLStyledProps<'div'>, Splitter.RootProviderBaseProps>, SplitterVariantProps>
>(Splitter.RootProvider, 'root')
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
HTMLDivElement,
Assign<Assign<HTMLStyledProps<'div'>, Splitter.RootBaseProps>, SplitterVariantProps>
>(Splitter.Root, 'root')
export const Panel = withContext<
HTMLDivElement,
Assign<HTMLStyledProps<'div'>, Splitter.PanelBaseProps>
>(Splitter.Panel, 'panel')
export const ResizeTrigger = withContext<
HTMLButtonElement,
Assign<HTMLStyledProps<'button'>, Splitter.ResizeTriggerBaseProps>
>(Splitter.ResizeTrigger, 'resizeTrigger')
export { SplitterContext as Context } from '@ark-ui/react/splitter'
import { type Assign, Splitter } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { type SplitterVariantProps, splitter } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'
const { withProvider, withContext } = createStyleContext(splitter)
export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
Assign<Assign<HTMLStyledProps<'div'>, Splitter.RootProviderBaseProps>, SplitterVariantProps>
>(Splitter.RootProvider, 'root')
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
Assign<Assign<HTMLStyledProps<'div'>, Splitter.RootBaseProps>, SplitterVariantProps>
>(Splitter.Root, 'root')
export const Panel = withContext<Assign<HTMLStyledProps<'div'>, Splitter.PanelBaseProps>>(
Splitter.Panel,
'panel',
)
export const ResizeTrigger = withContext<
Assign<HTMLStyledProps<'button'>, Splitter.ResizeTriggerBaseProps>
>(Splitter.ResizeTrigger, 'resizeTrigger')
export { SplitterContext as Context } from '@ark-ui/solid'
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export * as Splitter from './splitter'2
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
import { splitterAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'
export const splitter = defineSlotRecipe({
className: 'splitter',
slots: splitterAnatomy.keys(),
base: {
root: {
display: 'flex',
gap: '2',
},
panel: {
borderWidth: '1px',
background: 'bg.default',
borderRadius: 'l2',
color: 'fg.muted',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
resizeTrigger: {
borderRadius: 'full',
transitionDuration: 'normal',
transitionProperty: 'background',
transitionTimingFunction: 'default',
outline: '0',
background: 'gray.7',
_hover: {
background: 'gray.8',
},
_active: {
background: 'gray.8',
},
_horizontal: {
minWidth: '1.5',
margin: 'min(1rem, 20%) 0',
},
_vertical: {
minHeight: '1.5',
margin: '0 min(1rem, 20%)',
},
},
},
})