@razorpay/blade
Version:
The Design System that powers Razorpay
48 lines (45 loc) • 1.67 kB
JavaScript
import 'react';
import '../BaseMotion/index.js';
import { msToSeconds } from '../../utils/msToSeconds.js';
import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
import '../../utils/index.js';
import { jsx } from 'react/jsx-runtime';
import useTheme from '../BladeProvider/useTheme.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import { BaseMotionEnhancerBox } from '../BaseMotion/BaseMotion.js';
var Scale = function Scale(_ref) {
var children = _ref.children,
isHighlighted = _ref.isHighlighted,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'inout' : _ref$type,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'scale-up' : _ref$variant,
motionTriggers = _ref.motionTriggers;
var isControlledHighlighted = typeof isHighlighted === 'boolean';
var defaultMotionTriggers = isControlledHighlighted ? ['mount'] : ['hover'];
var _useTheme = useTheme(),
theme = _useTheme.theme;
var scaleVariants = {
initial: {
scale: 1
},
animate: {
scale: isHighlighted || !isControlledHighlighted ? variant === 'scale-up' ? 1.05 : 0.98 : undefined,
transition: {
duration: msToSeconds(theme.motion.duration.moderate),
ease: cssBezierToArray(castWebType(theme.motion.easing.standard))
}
},
exit: {
scale: 1
}
};
return /*#__PURE__*/jsx(BaseMotionEnhancerBox, {
motionVariants: scaleVariants,
type: type,
children: children,
motionTriggers: motionTriggers !== null && motionTriggers !== void 0 ? motionTriggers : defaultMotionTriggers
});
};
export { Scale };
//# sourceMappingURL=Scale.web.js.map