Accordion

<Accordion type="single">
  <AccordionItem>
    <AccordionTrigger>Accordion Item 1</AccordionTrigger>
    <AccordionContent>Accordion Content 1</AccordionContent>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 2</AccordionTrigger>
    <AccordionContent>Accordion Content 2</AccordionContent>
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger>Accordion Item 3</AccordionTrigger>
    <AccordionContent>Accordion Content 3</AccordionContent>
  </AccordionItem>
</Accordion>

function AccordionContent({
  className,
  children,
  transition = { type: 'spring', stiffness: 150, damping: 22 },
  ...props
}: AccordionContentProps) {
  const { isOpen } = useAccordionItem();
 
  return (
    <AccordionPrimitive.Content forceMount {...props}>
      <motion.div
        key="accordion-content"
        initial={{ height: 0, opacity: 0, '--mask-stop': '0%' }}
        animate={
          isOpen
            ? { height: 'auto', opacity: 1, '--mask-stop': '100%' }
            : { height: 0, opacity: 0, '--mask-stop': '0%' }
        }
        transition={transition}
        style={{
          maskImage:
            'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
          WebkitMaskImage:
            'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
        }}
        className="overflow-hidden"
        ref={ref}
      >
        <div className={cn('pb-4 pt-0 text-sm', className)}>{children}</div>
      </motion.div>
    </AccordionPrimitive.Content>
  );
}