feat: add collapse background

src/components/ui/button/StyledButton.tsx

@@ -2,6 +2,7 @@
 import clsx from 'clsx'
 import Link from 'next/link'
 import { tv } from 'tailwind-variants'
+import type { FC } from 'react'
 
 import { MotionButtonBase } from './MotionButton'
 
@@ -32,12 +33,13 @@ type SharedProps = {
   className?: string
 }
 type ButtonProps = SharedProps & (NativeButtonProps | NativeLinkProps)
-export function StyledButton({
+
+export const StyledButton: FC<ButtonProps> = ({
   variant = 'primary',
   className,
   href,
   ...props
-}: ButtonProps) {
+}) => {
   return href ? (
     <Link
       href={href}

src/components/ui/collapse/Collapse.tsx

@@ -2,16 +2,44 @@
 
 import * as React from 'react'
 import { AnimatePresence, m } from 'framer-motion'
+import type { Variants } from 'framer-motion'
 
 import { microReboundPreset } from '~/constants/spring'
+import { clsxm } from '~/lib/helper'
 
-export const Collapse = ({
+export const Collapse: Component<{
+  isOpened: boolean
+  withBackground?: boolean
+}> = ({
   isOpened,
   className,
   children,
-}: React.PropsWithChildren<{ isOpened: boolean } & { className?: string }>) => {
-  // By using `AnimatePresence` to mount and unmount the contents, we can animate
-  // them in and out while also only rendering the contents of open accordions
+
+  withBackground = false,
+}) => {
+  const variants = React.useMemo(() => {
+    const v = {
+      open: {
+        opacity: 1,
+        height: 'auto',
+        transition: microReboundPreset,
+      },
+      collapsed: {
+        opacity: 0,
+        height: 0,
+        overflow: 'hidden',
+      },
+    } satisfies Variants
+
+    if (withBackground) {
+      // @ts-expect-error
+      v.open.background = `hsl(var(--a) / 10%)`
+      // @ts-expect-error
+      v.collapsed.background = `hsl(var(--a) / 0%)`
+    }
+
+    return v
+  }, [withBackground])
   return (
     <>
       <AnimatePresence initial={false}>
@@ -21,21 +49,10 @@ export const Collapse = ({
             initial="collapsed"
             animate="open"
             exit="collapsed"
-            variants={{
-              open: {
-                opacity: 1,
-                height: 'auto',
-                transition: microReboundPreset,
-              },
-              collapsed: {
-                opacity: 0,
-                height: 0,
-                overflow: 'hidden',
-              },
-            }}
-            className={className}
+            variants={variants}
+            className={clsxm(withBackground && 'rounded-lg', className)}
           >
-            {children}
+            {withBackground ? <div className="p-4">{children}</div> : children}
           </m.div>
         )}
       </AnimatePresence>

src/components/ui/collapse/index.demo.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { domMax, LazyMotion } from 'framer-motion'
+import type { DocumentComponent } from 'storybook/typings'
+
+import { StyledButton } from '../button'
+import { Collapse } from './Collapse'
+
+export const CollapseDemo1: DocumentComponent = () => {
+  const [opened, setOpened] = React.useState(false)
+  return (
+    <LazyMotion features={domMax}>
+      <StyledButton onClick={() => setOpened((opened) => !opened)}>
+        Toggle Collapse
+      </StyledButton>
+      <Collapse isOpened={opened}>
+        <p>
+          Maiores occaecati quis animi nihil debitis. Iure suscipit animi.
+          Repellat quia quas harum possimus dolorum dolore ullam eius. Tenetur
+          aut saepe illo expedita culpa. Nisi asperiores doloribus facere
+          eveniet ad tempore nemo accusantium in. Possimus eum dolorum a aliquid
+          unde dolore corporis. Voluptatem quibusdam ipsam numquam. Vero aliquid
+          odit reiciendis amet cum sapiente commodi. Natus in ullam dignissimos
+          sed eos accusantium. Quis eligendi aliquid. Cumque possimus sed
+          suscipit vero. Repellendus inventore quo porro necessitatibus totam.
+        </p>
+      </Collapse>
+    </LazyMotion>
+  )
+}
+
+CollapseDemo1.meta = {
+  title: 'Normal Collapse',
+}
+
+export const CollapseDemo2: DocumentComponent = () => {
+  const [opened, setOpened] = React.useState(false)
+  return (
+    <LazyMotion features={domMax}>
+      <StyledButton onClick={() => setOpened((opened) => !opened)}>
+        Toggle Collapse
+      </StyledButton>
+      <Collapse isOpened={opened} withBackground>
+        <p>
+          Maiores occaecati quis animi nihil debitis. Iure suscipit animi.
+          Repellat quia quas harum possimus dolorum dolore ullam eius. Tenetur
+          aut saepe illo expedita culpa. Nisi asperiores doloribus facere
+          eveniet ad tempore nemo accusantium in. Possimus eum dolorum a aliquid
+          unde dolore corporis. Voluptatem quibusdam ipsam numquam. Vero aliquid
+          odit reiciendis amet cum sapiente commodi. Natus in ullam dignissimos
+          sed eos accusantium. Quis eligendi aliquid. Cumque possimus sed
+          suscipit vero. Repellendus inventore quo porro necessitatibus totam.
+        </p>
+      </Collapse>
+    </LazyMotion>
+  )
+}
+
+CollapseDemo2.meta = {
+  title: 'With Background Collapse',
+}

src/components/ui/markdown/renderers/collapse.tsx

@@ -30,7 +30,7 @@ export const MDetails: FC<{ children: ReactNode[] }> = (props) => {
         </i>
         {$head}
       </button>
-      <Collapse isOpened={open} className="my-2">
+      <Collapse withBackground isOpened={open} className="my-2">
         <div
           className={clsx(
             open ? 'opacity-100' : 'opacity-0',