37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { cx } from '@/styled-system/css'
|
|
import { collapse, type CollapseVariantProps } from '@/styled-system/recipes/collapse'
|
|
import { type MergeOmitting } from '@/types/utilities'
|
|
import { type DetailedHTMLProps, type DetailsHTMLAttributes, type FC, type HTMLAttributes, type ReactNode } from 'react'
|
|
|
|
export type CollapseProps = MergeOmitting<DetailedHTMLProps<DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, CollapseVariantProps> & {
|
|
children?: ReactNode
|
|
contentProps?: HTMLAttributes<HTMLElement>
|
|
summary: ReactNode
|
|
summaryProps?: HTMLAttributes<HTMLElement>
|
|
}
|
|
|
|
const Collapse: FC<CollapseProps> = ({ children, className, summary, summaryProps, contentProps, ...rest }) => {
|
|
const [collapseRecipeArgs, allOtherCollapseProps] = collapse.splitVariantProps(rest)
|
|
return (
|
|
<details
|
|
className={cx(collapse(collapseRecipeArgs).root, className)}
|
|
{...allOtherCollapseProps}
|
|
>
|
|
<summary
|
|
{...summaryProps}
|
|
className={cx(collapse(collapseRecipeArgs).summary, summaryProps?.className)}
|
|
>
|
|
{summary}
|
|
</summary>
|
|
<div
|
|
{...contentProps}
|
|
className={cx(collapse(collapseRecipeArgs).content, contentProps?.className)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</details>
|
|
)
|
|
}
|
|
|
|
export default Collapse
|