@kopexa/sight
Version:
Kopexa Sight Design System — React component library for GRC applications
108 lines (105 loc) • 2.03 kB
JavaScript
"use client";
import "../../chunk-C7GZJJIK.mjs";
// ../../utilities/motion-utils/src/transition-utils.ts
var TRANSITION_EASINGS = {
ease: [0.36, 0.66, 0.4, 1],
easeIn: [0.4, 0, 1, 1],
easeOut: [0, 0, 0.2, 1],
easeInOut: [0.4, 0, 0.2, 1],
spring: [0.155, 1.105, 0.295, 1.12],
springOut: [0.57, -0.15, 0.62, 0.07],
softSpring: [0.16, 1.11, 0.3, 1.02]
};
var TRANSITION_DEFAULTS = {
enter: {
duration: 0.2,
ease: TRANSITION_EASINGS.easeOut
},
exit: {
duration: 0.1,
ease: TRANSITION_EASINGS.easeIn
}
};
var TRANSITION_VARIANTS = {
fade: {
enter: {
opacity: 1,
transition: {
duration: 0.4,
ease: TRANSITION_EASINGS.ease
}
},
exit: {
opacity: 0,
transition: {
duration: 0.3,
ease: TRANSITION_EASINGS.ease
}
}
},
scaleSpringOpacity: {
initial: {
opacity: 0,
transform: "scale(0.8)"
},
enter: {
opacity: 1,
transform: "scale(1)",
transition: {
type: "spring",
bounce: 0,
duration: 0.3
}
},
exit: {
opacity: 0,
transform: "scale(0.96)",
transition: {
ease: TRANSITION_EASINGS.easeOut,
bounce: 0,
duration: 0.15
}
}
},
scale: {
enter: { scale: 1 },
exit: { scale: 0.95 }
}
};
// src/components/dialog/transition.ts
var scaleInOut = {
enter: {
scale: "var(--scale-enter)",
y: "var(--slide-enter)",
opacity: 1,
willChange: "auto",
transition: {
scale: {
duration: 0.4,
ease: TRANSITION_EASINGS.ease
},
opacity: {
duration: 0.4,
ease: TRANSITION_EASINGS.ease
},
y: {
type: "spring",
bounce: 0,
duration: 0.6
}
}
},
exit: {
scale: "var(--scale-exit)",
y: "var(--slide-exit)",
opacity: 0,
willChange: "transform",
transition: {
duration: 0.3,
ease: TRANSITION_EASINGS.ease
}
}
};
export {
scaleInOut
};