@deep-foundation/deepcase/imports/component-appearance.js

[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-

import { jsx as _jsx } from "react/jsx-runtime";
import { motion, useAnimation } from 'framer-motion';
import React, { useEffect } from 'react';
const variants = {
    show: {
        display: 'block',
        scaleX: 1,
        scaleY: 1,
        opacity: 1,
        borderRadius: '0%',
        transition: { duration: 0.5 }
    },
    hide: {
        display: 'none',
        scaleX: 0.3,
        scaleY: 0.1,
        opacity: 0,
        borderRadius: '50%',
        transition: {
            duration: 0.8
        }
    },
    initial: {
        display: 'none',
        originX: 0.5,
        originY: 0.5,
    }
};
export const Appearance = React.memo(({ children, toggle, variantsAnimation = variants, styleProps, }) => {
    const control = useAnimation();
    useEffect(() => {
        if (toggle === true) {
            control.start("show");
        }
        else {
            control.start("hide");
        }
    }, [control, toggle]);
    return (_jsx(motion.div, { variants: variantsAnimation, animate: control, style: Object.assign({ overflow: 'hidden', position: 'relative', width: 'max-content', height: '100%' }, styleProps), initial: variantsAnimation.initial, children: children }));
});
//# sourceMappingURL=component-appearance.js.map