"use client";
import * as React from "react";
import * as C from "@radix-ui/react-collapsible";
import { AnimatePresence, motion } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const Ctx = React.createContext(false);

/** Same API as Radix Collapsible. Tracks open state so content can animate its height. */
export function Collapsible({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps<typeof C.Root>) {
  const [inner, setInner] = React.useState(defaultOpen ?? false);
  const current = open ?? inner;
  return (
    <Ctx.Provider value={current}>
      <C.Root
        open={current}
        onOpenChange={(v) => {
          setInner(v);
          onOpenChange?.(v);
        }}
        {...p}
      />
    </Ctx.Provider>
  );
}
export const CollapsibleTrigger = C.Trigger;

export function CollapsibleContent({ className, children, ...p }: React.ComponentProps<typeof C.Content>) {
  const open = React.useContext(Ctx);
  return (
    <AnimatePresence initial={false}>
      {open && (
        <C.Content asChild forceMount {...p}>
          <motion.div
            className="overflow-hidden"
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={springs.gentle}
          >
            <div className={cn(className)}>{children}</div>
          </motion.div>
        </C.Content>
      )}
    </AnimatePresence>
  );
}
3 bills you follow

Installation

3 bills you follow
