Auto Height

1"use client";
2import * as React from "react";
3import { motion } from "motion/react";
4 
5import { useAutoHeight } from "@/registry/optics/hooks/use-auto-height";
6import { Slot } from "@/registry/optics/helpers/primitives/animate/slot";
7 
8function AutoHeight({
9	children,
10	deps = [],
11 
12	transition = {
13		type: "spring",
14		stiffness: 300,
15		damping: 30,
16		bounce: 0,
17		restDelta: 0.01,
18	},
19 
20	style,
21	animate,
22	render,
23	...props
24}) {
25	const { ref, height } = useAutoHeight(deps);
26 
27	const motionProps = {
28		style: { overflow: "hidden", ...style },
29		animate: { height, ...animate },
30		transition,
31	};
32 
33	if (render) {
34		return (
35			<Slot {...motionProps} {...props}>
36				{React.cloneElement(render, {
37					children: (
38						<>
39							{render.props.children}
40							<div ref={ref}>{children}</div>
41						</>
42					),
43				})}
44			</Slot>
45		);
46	}
47 
48	return (
49		<motion.div {...motionProps} {...props}>
50			<div ref={ref}>{children}</div>
51		</motion.div>
52	);
53}
54 
55export { AutoHeight };