@kloudlite/design-system/mjs/atoms/animate-hide.js

A design system for building ambitious products.

"use client";

// components/atoms/animate-hide.tsx
import { AnimatePresence, motion } from "framer-motion";

// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
  return classNames(...props);
};

// components/atoms/animate-hide.tsx
import { jsx } from "react/jsx-runtime";
var AnimateHide = ({
  children,
  show,
  initial = false,
  className,
  onClick
}) => {
  return /* @__PURE__ */ jsx(AnimatePresence, { initial, children: show && /* @__PURE__ */ jsx(
    motion.div,
    {
      onClick,
      initial: {
        height: 0,
        opacity: 0,
        y: -5
      },
      animate: {
        height: "auto",
        opacity: 1,
        y: 0
      },
      exit: {
        opacity: 0,
        height: 0,
        y: -5
      },
      className: cn(className, "kl-overflow-hidden"),
      children
    }
  ) });
};
var animate_hide_default = AnimateHide;
export {
  animate_hide_default as default
};