@yamada-ui/motion
Advanced tools
Comparing version 0.2.1 to 0.2.2
@@ -1,4 +0,6 @@ | ||
export { AnimatePresence, DragControls, HTMLMotionProps, LayoutGroup, LazyMotion, AnimatePresenceProps as MotionAnimatePresenceProps, AnimationControls as MotionAnimationControls, AnimationLifecycles as MotionAnimationLifecycles, AnimationOptions as MotionAnimationOptions, AnimationPlaybackControls as MotionAnimationPlaybackControls, AnimationProps as MotionAnimationProps, AnimationType as MotionAnimationType, MotionConfig, MotionConfigProps, LayoutProps as MotionLayoutProps, LazyProps as MotionLazyProps, Reorder as MotionReorder, MotionStyle, Transition as MotionTransition, MotionValue, Variants as MotionVariants, SVGMotionProps, motion, useDragControls, useInView, useIsPresent, useAnimation as useMotionAnimation, useAnimationControls as useMotionAnimationControls, useAnimationFrame as useMotionAnimationFrame, useMotionTemplate, useMotionValue, useReducedMotion, useScroll, useSpring, useTime, useTransform, useVelocity, useViewportScroll } from 'framer-motion'; | ||
export { MOTION_TRANSITION_DEFAULTS, MOTION_TRANSITION_EASINGS, MOTION_TRANSITION_VARIANTS, Motion, MotionDelayProps, MotionDurationProps, MotionProps, MotionTransitionEndProps, MotionTransitionProperties, MotionTransitionProps, MotionTransitionVariants, WithTransitionProps, transitionEnter, transitionExit } from './motion.js'; | ||
export { AnimatePresence, DragControls, HTMLMotionProps, LayoutGroup, LazyMotion, AnimatePresenceProps as MotionAnimatePresenceProps, AnimationControls as MotionAnimationControls, AnimationLifecycles as MotionAnimationLifecycles, AnimationOptions as MotionAnimationOptions, AnimationPlaybackControls as MotionAnimationPlaybackControls, AnimationProps as MotionAnimationProps, AnimationType as MotionAnimationType, MotionConfig, MotionConfigProps, LayoutProps as MotionLayoutProps, LazyProps as MotionLazyProps, Reorder as MotionReorder, MotionStyle, Transition as MotionTransition, MotionValue, Variants as MotionVariants, SVGMotionProps, m, motion, useCycle, useDragControls, useInView, useIsPresent, useAnimation as useMotionAnimation, useAnimationControls as useMotionAnimationControls, useAnimationFrame as useMotionAnimationFrame, useMotionTemplate, useMotionValue, useReducedMotion, useScroll, useSpring, useTime, useTransform, useVelocity, useViewportScroll } from 'framer-motion'; | ||
export { Motion, MotionProps } from './motion.js'; | ||
export { MotionDelayProps, MotionDurationProps, MotionTransitionEndProps, MotionTransitionProperties, MotionTransitionProps, MotionTransitionVariants, WithTransitionProps } from './motion.types.js'; | ||
export { MOTION_TRANSITION_DEFAULTS, MOTION_TRANSITION_EASINGS, MOTION_TRANSITION_VARIANTS, transitionEnter, transitionExit } from './utils.js'; | ||
import '@yamada-ui/core'; | ||
import '@yamada-ui/utils'; |
@@ -32,5 +32,7 @@ "use strict"; | ||
MotionReorder: () => import_framer_motion2.Reorder, | ||
m: () => import_framer_motion2.m, | ||
motion: () => import_framer_motion2.motion, | ||
transitionEnter: () => transitionEnter, | ||
transitionExit: () => transitionExit, | ||
useCycle: () => import_framer_motion2.useCycle, | ||
useDragControls: () => import_framer_motion2.useDragControls, | ||
@@ -60,2 +62,10 @@ useInView: () => import_framer_motion2.useInView, | ||
var import_jsx_runtime = require("react/jsx-runtime"); | ||
var Motion = (0, import_core.motionForwardRef)( | ||
({ as = "div", className, ...rest }, ref) => { | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { as: import_framer_motion.motion[as], ref, className: (0, import_utils.cx)("ui-motion", className), ...rest }); | ||
} | ||
); | ||
// src/utils.ts | ||
var import_utils2 = require("@yamada-ui/utils"); | ||
var MOTION_TRANSITION_EASINGS = { | ||
@@ -125,15 +135,10 @@ ease: [0.25, 0.1, 0.25, 1], | ||
...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.enter, | ||
...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.enter } : {}, | ||
delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.enter | ||
...duration ? { duration: (0, import_utils2.isNumber)(duration) ? duration : duration == null ? void 0 : duration.enter } : {}, | ||
delay: (0, import_utils2.isNumber)(delay) ? delay : delay == null ? void 0 : delay.enter | ||
}); | ||
var transitionExit = (transition) => (delay, duration) => ({ | ||
...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.exit, | ||
...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.exit } : {}, | ||
delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.exit | ||
...duration ? { duration: (0, import_utils2.isNumber)(duration) ? duration : duration == null ? void 0 : duration.exit } : {}, | ||
delay: (0, import_utils2.isNumber)(delay) ? delay : delay == null ? void 0 : delay.exit | ||
}); | ||
var Motion = (0, import_core.motionForwardRef)( | ||
({ as = "div", className, ...rest }, ref) => { | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { as: import_framer_motion.motion[as], ref, className: (0, import_utils.cx)("ui-motion", className), ...rest }); | ||
} | ||
); | ||
// Annotate the CommonJS export names for ESM import in node: | ||
@@ -150,5 +155,7 @@ 0 && (module.exports = { | ||
MotionReorder, | ||
m, | ||
motion, | ||
transitionEnter, | ||
transitionExit, | ||
useCycle, | ||
useDragControls, | ||
@@ -155,0 +162,0 @@ useInView, |
@@ -1,196 +0,11 @@ | ||
import { Transition, Target, HTMLMotionProps, TargetAndTransition, motion } from 'framer-motion'; | ||
import * as _yamada_ui_core from '@yamada-ui/core'; | ||
import { HTMLUIProps } from '@yamada-ui/core'; | ||
import { Dict } from '@yamada-ui/utils'; | ||
import { HTMLMotionProps, motion } from 'framer-motion'; | ||
type TargetResolver<Y = Dict> = (props: Y & MotionTransitionProperties) => TargetAndTransition; | ||
type Variant<Y = Dict> = TargetAndTransition | TargetResolver<Y>; | ||
type MotionTransitionVariants<Y = Dict> = { | ||
enter: Variant<Y>; | ||
exit: Variant<Y>; | ||
initial?: Variant<Y>; | ||
}; | ||
type MotionTransitionProperties = { | ||
/** | ||
* Custom `transition` definition for `enter` and `exit`. | ||
*/ | ||
transition?: MotionTransitionProps; | ||
/** | ||
* Custom `transitionEnd` definition for `enter` and `exit`. | ||
*/ | ||
transitionEnd?: MotionTransitionEndProps; | ||
/** | ||
* Custom `delay` definition for `enter` and `exit`. | ||
*/ | ||
delay?: number | MotionDelayProps; | ||
/** | ||
* Custom `duration` definition for `enter` and `exit`. | ||
*/ | ||
duration?: number | MotionDurationProps; | ||
/** | ||
* Custom `enter`. | ||
*/ | ||
enter?: any; | ||
/** | ||
* Custom `exit`. | ||
*/ | ||
exit?: any; | ||
/** | ||
* Custom `initial`. | ||
*/ | ||
initial?: any; | ||
}; | ||
type WithMotionProps<Y> = Partial<Record<'enter' | 'exit', Y>>; | ||
type MotionTransitionProps = WithMotionProps<Transition>; | ||
type MotionTransitionEndProps = WithMotionProps<Target>; | ||
type MotionDelayProps = WithMotionProps<number>; | ||
type MotionDurationProps = WithMotionProps<number>; | ||
type WithTransitionProps<Y extends object> = Omit<Y, 'transition'> & MotionTransitionProperties & { | ||
/** | ||
* If `true`, the element will unmount when `isOpen={false}` and animation is done. | ||
*/ | ||
unmountOnExit?: boolean; | ||
/** | ||
* Show the component. triggers when enter or exit states. | ||
*/ | ||
isOpen?: boolean; | ||
}; | ||
declare const MOTION_TRANSITION_EASINGS: { | ||
readonly ease: readonly [0.25, 0.1, 0.25, 1]; | ||
readonly easeIn: readonly [0.4, 0, 1, 1]; | ||
readonly easeOut: readonly [0, 0, 0.2, 1]; | ||
readonly easeInOut: readonly [0.4, 0, 0.2, 1]; | ||
}; | ||
declare const MOTION_TRANSITION_VARIANTS: { | ||
readonly scale: { | ||
readonly enter: { | ||
readonly scale: 1; | ||
}; | ||
readonly exit: { | ||
readonly scale: 0.95; | ||
}; | ||
}; | ||
readonly fade: { | ||
readonly enter: { | ||
readonly opacity: 1; | ||
}; | ||
readonly exit: { | ||
readonly opacity: 0; | ||
}; | ||
}; | ||
readonly pushLeft: { | ||
readonly enter: { | ||
readonly x: "100%"; | ||
}; | ||
readonly exit: { | ||
readonly x: "-30%"; | ||
}; | ||
}; | ||
readonly pushRight: { | ||
readonly enter: { | ||
readonly x: "-100%"; | ||
}; | ||
readonly exit: { | ||
readonly x: "30%"; | ||
}; | ||
}; | ||
readonly pushUp: { | ||
readonly enter: { | ||
readonly y: "100%"; | ||
}; | ||
readonly exit: { | ||
readonly y: "-30%"; | ||
}; | ||
}; | ||
readonly pushDown: { | ||
readonly enter: { | ||
readonly y: "-100%"; | ||
}; | ||
readonly exit: { | ||
readonly y: "30%"; | ||
}; | ||
}; | ||
readonly slideLeft: { | ||
readonly position: { | ||
readonly left: 0; | ||
readonly top: 0; | ||
readonly bottom: 0; | ||
readonly width: "100%"; | ||
}; | ||
readonly enter: { | ||
readonly x: 0; | ||
readonly y: 0; | ||
}; | ||
readonly exit: { | ||
readonly x: "-100%"; | ||
readonly y: 0; | ||
}; | ||
}; | ||
readonly slideRight: { | ||
readonly position: { | ||
readonly right: 0; | ||
readonly top: 0; | ||
readonly bottom: 0; | ||
readonly width: "100%"; | ||
}; | ||
readonly enter: { | ||
readonly x: 0; | ||
readonly y: 0; | ||
}; | ||
readonly exit: { | ||
readonly x: "100%"; | ||
readonly y: 0; | ||
}; | ||
}; | ||
readonly slideUp: { | ||
readonly position: { | ||
readonly top: 0; | ||
readonly left: 0; | ||
readonly right: 0; | ||
readonly maxWidth: "100vw"; | ||
}; | ||
readonly enter: { | ||
readonly x: 0; | ||
readonly y: 0; | ||
}; | ||
readonly exit: { | ||
readonly x: 0; | ||
readonly y: "-100%"; | ||
}; | ||
}; | ||
readonly slideDown: { | ||
readonly position: { | ||
readonly bottom: 0; | ||
readonly left: 0; | ||
readonly right: 0; | ||
readonly maxWidth: "100vw"; | ||
}; | ||
readonly enter: { | ||
readonly x: 0; | ||
readonly y: 0; | ||
}; | ||
readonly exit: { | ||
readonly x: 0; | ||
readonly y: "100%"; | ||
}; | ||
}; | ||
}; | ||
declare const MOTION_TRANSITION_DEFAULTS: { | ||
readonly enter: { | ||
readonly duration: 0.25; | ||
readonly ease: readonly [0, 0, 0.2, 1]; | ||
}; | ||
readonly exit: { | ||
readonly duration: 0.2; | ||
readonly ease: readonly [0.4, 0, 1, 1]; | ||
}; | ||
}; | ||
declare const transitionEnter: (transition?: Transition) => (delay?: MotionTransitionProperties['delay'], duration?: MotionTransitionProperties['duration']) => Transition; | ||
declare const transitionExit: (transition?: Transition) => (delay?: MotionTransitionProperties['delay'], duration?: MotionTransitionProperties['duration']) => Transition; | ||
type MotionOptions = { | ||
as?: keyof typeof motion; | ||
}; | ||
type MotionProps = Omit<HTMLUIProps<'div'>, 'as'> & HTMLMotionProps<'div'> & MotionOptions; | ||
type MotionProps = Omit<HTMLUIProps<'div'>, 'as' | 'style' | 'onDrag' | 'onDragStart' | 'onDragEnd'> & HTMLMotionProps<'div'> & MotionOptions; | ||
declare const Motion: _yamada_ui_core.Component<"div", MotionProps>; | ||
export { MOTION_TRANSITION_DEFAULTS, MOTION_TRANSITION_EASINGS, MOTION_TRANSITION_VARIANTS, Motion, MotionDelayProps, MotionDurationProps, MotionProps, MotionTransitionEndProps, MotionTransitionProperties, MotionTransitionProps, MotionTransitionVariants, WithTransitionProps, transitionEnter, transitionExit }; | ||
export { Motion, MotionProps }; |
@@ -23,8 +23,3 @@ "use strict"; | ||
__export(motion_exports, { | ||
MOTION_TRANSITION_DEFAULTS: () => MOTION_TRANSITION_DEFAULTS, | ||
MOTION_TRANSITION_EASINGS: () => MOTION_TRANSITION_EASINGS, | ||
MOTION_TRANSITION_VARIANTS: () => MOTION_TRANSITION_VARIANTS, | ||
Motion: () => Motion, | ||
transitionEnter: () => transitionEnter, | ||
transitionExit: () => transitionExit | ||
Motion: () => Motion | ||
}); | ||
@@ -36,74 +31,2 @@ module.exports = __toCommonJS(motion_exports); | ||
var import_jsx_runtime = require("react/jsx-runtime"); | ||
var MOTION_TRANSITION_EASINGS = { | ||
ease: [0.25, 0.1, 0.25, 1], | ||
easeIn: [0.4, 0, 1, 1], | ||
easeOut: [0, 0, 0.2, 1], | ||
easeInOut: [0.4, 0, 0.2, 1] | ||
}; | ||
var MOTION_TRANSITION_VARIANTS = { | ||
scale: { | ||
enter: { scale: 1 }, | ||
exit: { scale: 0.95 } | ||
}, | ||
fade: { | ||
enter: { opacity: 1 }, | ||
exit: { opacity: 0 } | ||
}, | ||
pushLeft: { | ||
enter: { x: "100%" }, | ||
exit: { x: "-30%" } | ||
}, | ||
pushRight: { | ||
enter: { x: "-100%" }, | ||
exit: { x: "30%" } | ||
}, | ||
pushUp: { | ||
enter: { y: "100%" }, | ||
exit: { y: "-30%" } | ||
}, | ||
pushDown: { | ||
enter: { y: "-100%" }, | ||
exit: { y: "30%" } | ||
}, | ||
slideLeft: { | ||
position: { left: 0, top: 0, bottom: 0, width: "100%" }, | ||
enter: { x: 0, y: 0 }, | ||
exit: { x: "-100%", y: 0 } | ||
}, | ||
slideRight: { | ||
position: { right: 0, top: 0, bottom: 0, width: "100%" }, | ||
enter: { x: 0, y: 0 }, | ||
exit: { x: "100%", y: 0 } | ||
}, | ||
slideUp: { | ||
position: { top: 0, left: 0, right: 0, maxWidth: "100vw" }, | ||
enter: { x: 0, y: 0 }, | ||
exit: { x: 0, y: "-100%" } | ||
}, | ||
slideDown: { | ||
position: { bottom: 0, left: 0, right: 0, maxWidth: "100vw" }, | ||
enter: { x: 0, y: 0 }, | ||
exit: { x: 0, y: "100%" } | ||
} | ||
}; | ||
var MOTION_TRANSITION_DEFAULTS = { | ||
enter: { | ||
duration: 0.25, | ||
ease: MOTION_TRANSITION_EASINGS.easeOut | ||
}, | ||
exit: { | ||
duration: 0.2, | ||
ease: MOTION_TRANSITION_EASINGS.easeIn | ||
} | ||
}; | ||
var transitionEnter = (transition) => (delay, duration) => ({ | ||
...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.enter, | ||
...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.enter } : {}, | ||
delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.enter | ||
}); | ||
var transitionExit = (transition) => (delay, duration) => ({ | ||
...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.exit, | ||
...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.exit } : {}, | ||
delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.exit | ||
}); | ||
var Motion = (0, import_core.motionForwardRef)( | ||
@@ -116,8 +39,3 @@ ({ as = "div", className, ...rest }, ref) => { | ||
0 && (module.exports = { | ||
MOTION_TRANSITION_DEFAULTS, | ||
MOTION_TRANSITION_EASINGS, | ||
MOTION_TRANSITION_VARIANTS, | ||
Motion, | ||
transitionEnter, | ||
transitionExit | ||
Motion | ||
}); |
{ | ||
"name": "@yamada-ui/motion", | ||
"version": "0.2.1", | ||
"version": "0.2.2", | ||
"description": "Yamada UI motion components", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
27250
18
727
1