feat: improve ui components

2024-01-04 21:46:10 -06:00
parent 0c74c0a0a9
commit 7d39bb3d89
14 changed files with 245 additions and 37 deletions
@@ -0,0 +1,36 @@
+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