Collapsible
An interactive component which can be expanded or collapsed.
Usage
Content
import { Box } from 'styled-system/jsx'
import { Button, Collapsible } from '~/components/ui'
export const Demo = (props: Collapsible.RootProps) => {
return (
<Collapsible.Root defaultOpen {...props}>
<Collapsible.Trigger asChild>
<Button variant="outline">Toggle</Button>
</Collapsible.Trigger>
<Collapsible.Content>
<Box bg="accent.default" color="accent.fg" p="4" borderRadius="l3" mt="3">
Content
</Box>
</Collapsible.Content>
</Collapsible.Root>
)
}
Installation
npx @park-ui/cli components add collapsible1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/collapsible.tsx
'use client'
import type { Assign } from '@ark-ui/react'
import { Collapsible } from '@ark-ui/react/collapsible'
import { type CollapsibleVariantProps, collapsible } from 'styled-system/recipes'
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'
const { withProvider, withContext } = createStyleContext(collapsible)
export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
HTMLDivElement,
Assign<Assign<HTMLStyledProps<'div'>, Collapsible.RootProviderBaseProps>, CollapsibleVariantProps>
>(Collapsible.RootProvider, 'root')
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
HTMLDivElement,
Assign<Assign<HTMLStyledProps<'div'>, Collapsible.RootBaseProps>, CollapsibleVariantProps>
>(Collapsible.Root, 'root')
export const Content = withContext<
HTMLDivElement,
Assign<HTMLStyledProps<'div'>, Collapsible.ContentBaseProps>
>(Collapsible.Content, 'content')
export const Trigger = withContext<
HTMLButtonElement,
Assign<HTMLStyledProps<'button'>, Collapsible.TriggerBaseProps>
>(Collapsible.Trigger, 'trigger')
export { CollapsibleContext as Context } from '@ark-ui/react/collapsible'
import { type Assign, Collapsible } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { type CollapsibleVariantProps, collapsible } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'
const { withProvider, withContext } = createStyleContext(collapsible)
export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
Assign<Assign<HTMLStyledProps<'div'>, Collapsible.RootProviderBaseProps>, CollapsibleVariantProps>
>(Collapsible.RootProvider, 'root')
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
Assign<Assign<HTMLStyledProps<'div'>, Collapsible.RootBaseProps>, CollapsibleVariantProps>
>(Collapsible.Root, 'root')
export const Content = withContext<Assign<HTMLStyledProps<'div'>, Collapsible.ContentBaseProps>>(
Collapsible.Content,
'content',
)
export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Collapsible.TriggerBaseProps>>(
Collapsible.Trigger,
'trigger',
)
export { CollapsibleContext as Context } from '@ark-ui/solid'
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export * as Collapsible from './collapsible'2
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
import { collapsibleAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'
export const collapsible = defineSlotRecipe({
className: 'collapsible',
slots: collapsibleAnatomy.keys(),
base: {
root: {
alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
width: 'full',
},
content: {
overflow: 'hidden',
width: 'full',
_open: {
animation: 'collapse-in',
},
_closed: {
animation: 'collapse-out',
},
},
},
})