@yamada-ui/motion 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,14 @@
1
+ // src/motion.tsx
2
+ import { ui, motionForwardRef } from "@yamada-ui/core";
3
+ import { cx } from "@yamada-ui/utils";
4
+ import { motion } from "framer-motion";
5
+ import { jsx } from "react/jsx-runtime";
6
+ var Motion = motionForwardRef(
7
+ ({ as = "div", className, ...rest }, ref) => {
8
+ return /* @__PURE__ */ jsx(ui.div, { as: motion[as], ref, className: cx("ui-motion", className), ...rest });
9
+ }
10
+ );
11
+
12
+ export {
13
+ Motion
14
+ };
@@ -1,8 +1,5 @@
1
- // src/motion.tsx
2
- import { ui, motionForwardRef } from "@yamada-ui/core";
3
- import { cx, isNumber } from "@yamada-ui/utils";
4
- import { motion } from "framer-motion";
5
- import { jsx } from "react/jsx-runtime";
1
+ // src/utils.ts
2
+ import { isNumber } from "@yamada-ui/utils";
6
3
  var MOTION_TRANSITION_EASINGS = {
7
4
  ease: [0.25, 0.1, 0.25, 1],
8
5
  easeIn: [0.4, 0, 1, 1],
@@ -75,17 +72,11 @@ var transitionExit = (transition) => (delay, duration) => ({
75
72
  ...duration ? { duration: isNumber(duration) ? duration : duration == null ? void 0 : duration.exit } : {},
76
73
  delay: isNumber(delay) ? delay : delay == null ? void 0 : delay.exit
77
74
  });
78
- var Motion = motionForwardRef(
79
- ({ as = "div", className, ...rest }, ref) => {
80
- return /* @__PURE__ */ jsx(ui.div, { as: motion[as], ref, className: cx("ui-motion", className), ...rest });
81
- }
82
- );
83
75
 
84
76
  export {
85
77
  MOTION_TRANSITION_EASINGS,
86
78
  MOTION_TRANSITION_VARIANTS,
87
79
  MOTION_TRANSITION_DEFAULTS,
88
80
  transitionEnter,
89
- transitionExit,
90
- Motion
81
+ transitionExit
91
82
  };
File without changes
package/dist/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
- 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';
2
- export { MOTION_TRANSITION_DEFAULTS, MOTION_TRANSITION_EASINGS, MOTION_TRANSITION_VARIANTS, Motion, MotionDelayProps, MotionDurationProps, MotionProps, MotionTransitionEndProps, MotionTransitionProperties, MotionTransitionProps, MotionTransitionVariants, WithTransitionProps, transitionEnter, transitionExit } from './motion.js';
1
+ 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';
2
+ export { Motion, MotionProps } from './motion.js';
3
+ export { MotionDelayProps, MotionDurationProps, MotionTransitionEndProps, MotionTransitionProperties, MotionTransitionProps, MotionTransitionVariants, WithTransitionProps } from './motion.types.js';
4
+ export { MOTION_TRANSITION_DEFAULTS, MOTION_TRANSITION_EASINGS, MOTION_TRANSITION_VARIANTS, transitionEnter, transitionExit } from './utils.js';
3
5
  import '@yamada-ui/core';
4
6
  import '@yamada-ui/utils';
package/dist/index.js CHANGED
@@ -29,9 +29,11 @@ __export(src_exports, {
29
29
  Motion: () => Motion,
30
30
  MotionConfig: () => import_framer_motion2.MotionConfig,
31
31
  MotionReorder: () => import_framer_motion2.Reorder,
32
+ m: () => import_framer_motion2.m,
32
33
  motion: () => import_framer_motion2.motion,
33
34
  transitionEnter: () => transitionEnter,
34
35
  transitionExit: () => transitionExit,
36
+ useCycle: () => import_framer_motion2.useCycle,
35
37
  useDragControls: () => import_framer_motion2.useDragControls,
36
38
  useInView: () => import_framer_motion2.useInView,
37
39
  useIsPresent: () => import_framer_motion2.useIsPresent,
@@ -56,6 +58,14 @@ var import_core = require("@yamada-ui/core");
56
58
  var import_utils = require("@yamada-ui/utils");
57
59
  var import_framer_motion = require("framer-motion");
58
60
  var import_jsx_runtime = require("react/jsx-runtime");
61
+ var Motion = (0, import_core.motionForwardRef)(
62
+ ({ as = "div", className, ...rest }, ref) => {
63
+ 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 });
64
+ }
65
+ );
66
+
67
+ // src/utils.ts
68
+ var import_utils2 = require("@yamada-ui/utils");
59
69
  var MOTION_TRANSITION_EASINGS = {
60
70
  ease: [0.25, 0.1, 0.25, 1],
61
71
  easeIn: [0.4, 0, 1, 1],
@@ -120,19 +130,14 @@ var MOTION_TRANSITION_DEFAULTS = {
120
130
  };
121
131
  var transitionEnter = (transition) => (delay, duration) => ({
122
132
  ...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.enter,
123
- ...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.enter } : {},
124
- delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.enter
133
+ ...duration ? { duration: (0, import_utils2.isNumber)(duration) ? duration : duration == null ? void 0 : duration.enter } : {},
134
+ delay: (0, import_utils2.isNumber)(delay) ? delay : delay == null ? void 0 : delay.enter
125
135
  });
126
136
  var transitionExit = (transition) => (delay, duration) => ({
127
137
  ...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.exit,
128
- ...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.exit } : {},
129
- delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.exit
138
+ ...duration ? { duration: (0, import_utils2.isNumber)(duration) ? duration : duration == null ? void 0 : duration.exit } : {},
139
+ delay: (0, import_utils2.isNumber)(delay) ? delay : delay == null ? void 0 : delay.exit
130
140
  });
131
- var Motion = (0, import_core.motionForwardRef)(
132
- ({ as = "div", className, ...rest }, ref) => {
133
- 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 });
134
- }
135
- );
136
141
  // Annotate the CommonJS export names for ESM import in node:
137
142
  0 && (module.exports = {
138
143
  AnimatePresence,
@@ -144,9 +149,11 @@ var Motion = (0, import_core.motionForwardRef)(
144
149
  Motion,
145
150
  MotionConfig,
146
151
  MotionReorder,
152
+ m,
147
153
  motion,
148
154
  transitionEnter,
149
155
  transitionExit,
156
+ useCycle,
150
157
  useDragControls,
151
158
  useInView,
152
159
  useIsPresent,
package/dist/index.mjs CHANGED
@@ -1,14 +1,18 @@
1
+ import {
2
+ Motion
3
+ } from "./chunk-4RHIQEKP.mjs";
4
+ import "./chunk-V4KRNLE3.mjs";
1
5
  import {
2
6
  MOTION_TRANSITION_DEFAULTS,
3
7
  MOTION_TRANSITION_EASINGS,
4
8
  MOTION_TRANSITION_VARIANTS,
5
- Motion,
6
9
  transitionEnter,
7
10
  transitionExit
8
- } from "./chunk-IENBUDYI.mjs";
11
+ } from "./chunk-MDY2EAFE.mjs";
9
12
 
10
13
  // src/index.ts
11
14
  import {
15
+ m,
12
16
  motion,
13
17
  AnimatePresence,
14
18
  LayoutGroup,
@@ -29,7 +33,8 @@ import {
29
33
  useInView,
30
34
  useIsPresent,
31
35
  useReducedMotion,
32
- useMotionValue
36
+ useMotionValue,
37
+ useCycle
33
38
  } from "framer-motion";
34
39
  export {
35
40
  AnimatePresence,
@@ -41,9 +46,11 @@ export {
41
46
  Motion,
42
47
  MotionConfig,
43
48
  Reorder as MotionReorder,
49
+ m,
44
50
  motion,
45
51
  transitionEnter,
46
52
  transitionExit,
53
+ useCycle,
47
54
  useDragControls,
48
55
  useInView,
49
56
  useIsPresent,
package/dist/motion.d.ts CHANGED
@@ -1,196 +1,11 @@
1
- import { Transition, Target, HTMLMotionProps, TargetAndTransition, motion } from 'framer-motion';
2
1
  import * as _yamada_ui_core from '@yamada-ui/core';
3
2
  import { HTMLUIProps } from '@yamada-ui/core';
4
- import { Dict } from '@yamada-ui/utils';
3
+ import { HTMLMotionProps, motion } from 'framer-motion';
5
4
 
6
- type TargetResolver<Y = Dict> = (props: Y & MotionTransitionProperties) => TargetAndTransition;
7
- type Variant<Y = Dict> = TargetAndTransition | TargetResolver<Y>;
8
- type MotionTransitionVariants<Y = Dict> = {
9
- enter: Variant<Y>;
10
- exit: Variant<Y>;
11
- initial?: Variant<Y>;
12
- };
13
- type MotionTransitionProperties = {
14
- /**
15
- * Custom `transition` definition for `enter` and `exit`.
16
- */
17
- transition?: MotionTransitionProps;
18
- /**
19
- * Custom `transitionEnd` definition for `enter` and `exit`.
20
- */
21
- transitionEnd?: MotionTransitionEndProps;
22
- /**
23
- * Custom `delay` definition for `enter` and `exit`.
24
- */
25
- delay?: number | MotionDelayProps;
26
- /**
27
- * Custom `duration` definition for `enter` and `exit`.
28
- */
29
- duration?: number | MotionDurationProps;
30
- /**
31
- * Custom `enter`.
32
- */
33
- enter?: any;
34
- /**
35
- * Custom `exit`.
36
- */
37
- exit?: any;
38
- /**
39
- * Custom `initial`.
40
- */
41
- initial?: any;
42
- };
43
- type WithMotionProps<Y> = Partial<Record<'enter' | 'exit', Y>>;
44
- type MotionTransitionProps = WithMotionProps<Transition>;
45
- type MotionTransitionEndProps = WithMotionProps<Target>;
46
- type MotionDelayProps = WithMotionProps<number>;
47
- type MotionDurationProps = WithMotionProps<number>;
48
- type WithTransitionProps<Y extends object> = Omit<Y, 'transition'> & MotionTransitionProperties & {
49
- /**
50
- * If `true`, the element will unmount when `isOpen={false}` and animation is done.
51
- */
52
- unmountOnExit?: boolean;
53
- /**
54
- * Show the component. triggers when enter or exit states.
55
- */
56
- isOpen?: boolean;
57
- };
58
- declare const MOTION_TRANSITION_EASINGS: {
59
- readonly ease: readonly [0.25, 0.1, 0.25, 1];
60
- readonly easeIn: readonly [0.4, 0, 1, 1];
61
- readonly easeOut: readonly [0, 0, 0.2, 1];
62
- readonly easeInOut: readonly [0.4, 0, 0.2, 1];
63
- };
64
- declare const MOTION_TRANSITION_VARIANTS: {
65
- readonly scale: {
66
- readonly enter: {
67
- readonly scale: 1;
68
- };
69
- readonly exit: {
70
- readonly scale: 0.95;
71
- };
72
- };
73
- readonly fade: {
74
- readonly enter: {
75
- readonly opacity: 1;
76
- };
77
- readonly exit: {
78
- readonly opacity: 0;
79
- };
80
- };
81
- readonly pushLeft: {
82
- readonly enter: {
83
- readonly x: "100%";
84
- };
85
- readonly exit: {
86
- readonly x: "-30%";
87
- };
88
- };
89
- readonly pushRight: {
90
- readonly enter: {
91
- readonly x: "-100%";
92
- };
93
- readonly exit: {
94
- readonly x: "30%";
95
- };
96
- };
97
- readonly pushUp: {
98
- readonly enter: {
99
- readonly y: "100%";
100
- };
101
- readonly exit: {
102
- readonly y: "-30%";
103
- };
104
- };
105
- readonly pushDown: {
106
- readonly enter: {
107
- readonly y: "-100%";
108
- };
109
- readonly exit: {
110
- readonly y: "30%";
111
- };
112
- };
113
- readonly slideLeft: {
114
- readonly position: {
115
- readonly left: 0;
116
- readonly top: 0;
117
- readonly bottom: 0;
118
- readonly width: "100%";
119
- };
120
- readonly enter: {
121
- readonly x: 0;
122
- readonly y: 0;
123
- };
124
- readonly exit: {
125
- readonly x: "-100%";
126
- readonly y: 0;
127
- };
128
- };
129
- readonly slideRight: {
130
- readonly position: {
131
- readonly right: 0;
132
- readonly top: 0;
133
- readonly bottom: 0;
134
- readonly width: "100%";
135
- };
136
- readonly enter: {
137
- readonly x: 0;
138
- readonly y: 0;
139
- };
140
- readonly exit: {
141
- readonly x: "100%";
142
- readonly y: 0;
143
- };
144
- };
145
- readonly slideUp: {
146
- readonly position: {
147
- readonly top: 0;
148
- readonly left: 0;
149
- readonly right: 0;
150
- readonly maxWidth: "100vw";
151
- };
152
- readonly enter: {
153
- readonly x: 0;
154
- readonly y: 0;
155
- };
156
- readonly exit: {
157
- readonly x: 0;
158
- readonly y: "-100%";
159
- };
160
- };
161
- readonly slideDown: {
162
- readonly position: {
163
- readonly bottom: 0;
164
- readonly left: 0;
165
- readonly right: 0;
166
- readonly maxWidth: "100vw";
167
- };
168
- readonly enter: {
169
- readonly x: 0;
170
- readonly y: 0;
171
- };
172
- readonly exit: {
173
- readonly x: 0;
174
- readonly y: "100%";
175
- };
176
- };
177
- };
178
- declare const MOTION_TRANSITION_DEFAULTS: {
179
- readonly enter: {
180
- readonly duration: 0.25;
181
- readonly ease: readonly [0, 0, 0.2, 1];
182
- };
183
- readonly exit: {
184
- readonly duration: 0.2;
185
- readonly ease: readonly [0.4, 0, 1, 1];
186
- };
187
- };
188
- declare const transitionEnter: (transition?: Transition) => (delay?: MotionTransitionProperties['delay'], duration?: MotionTransitionProperties['duration']) => Transition;
189
- declare const transitionExit: (transition?: Transition) => (delay?: MotionTransitionProperties['delay'], duration?: MotionTransitionProperties['duration']) => Transition;
190
5
  type MotionOptions = {
191
6
  as?: keyof typeof motion;
192
7
  };
193
- type MotionProps = Omit<HTMLUIProps<'div'>, 'as'> & HTMLMotionProps<'div'> & MotionOptions;
8
+ type MotionProps = Omit<HTMLUIProps<'div'>, 'as' | 'style' | 'onDrag' | 'onDragStart' | 'onDragEnd'> & HTMLMotionProps<'div'> & MotionOptions;
194
9
  declare const Motion: _yamada_ui_core.Component<"div", MotionProps>;
195
10
 
196
- export { MOTION_TRANSITION_DEFAULTS, MOTION_TRANSITION_EASINGS, MOTION_TRANSITION_VARIANTS, Motion, MotionDelayProps, MotionDurationProps, MotionProps, MotionTransitionEndProps, MotionTransitionProperties, MotionTransitionProps, MotionTransitionVariants, WithTransitionProps, transitionEnter, transitionExit };
11
+ export { Motion, MotionProps };
package/dist/motion.js CHANGED
@@ -20,90 +20,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // src/motion.tsx
21
21
  var motion_exports = {};
22
22
  __export(motion_exports, {
23
- MOTION_TRANSITION_DEFAULTS: () => MOTION_TRANSITION_DEFAULTS,
24
- MOTION_TRANSITION_EASINGS: () => MOTION_TRANSITION_EASINGS,
25
- MOTION_TRANSITION_VARIANTS: () => MOTION_TRANSITION_VARIANTS,
26
- Motion: () => Motion,
27
- transitionEnter: () => transitionEnter,
28
- transitionExit: () => transitionExit
23
+ Motion: () => Motion
29
24
  });
30
25
  module.exports = __toCommonJS(motion_exports);
31
26
  var import_core = require("@yamada-ui/core");
32
27
  var import_utils = require("@yamada-ui/utils");
33
28
  var import_framer_motion = require("framer-motion");
34
29
  var import_jsx_runtime = require("react/jsx-runtime");
35
- var MOTION_TRANSITION_EASINGS = {
36
- ease: [0.25, 0.1, 0.25, 1],
37
- easeIn: [0.4, 0, 1, 1],
38
- easeOut: [0, 0, 0.2, 1],
39
- easeInOut: [0.4, 0, 0.2, 1]
40
- };
41
- var MOTION_TRANSITION_VARIANTS = {
42
- scale: {
43
- enter: { scale: 1 },
44
- exit: { scale: 0.95 }
45
- },
46
- fade: {
47
- enter: { opacity: 1 },
48
- exit: { opacity: 0 }
49
- },
50
- pushLeft: {
51
- enter: { x: "100%" },
52
- exit: { x: "-30%" }
53
- },
54
- pushRight: {
55
- enter: { x: "-100%" },
56
- exit: { x: "30%" }
57
- },
58
- pushUp: {
59
- enter: { y: "100%" },
60
- exit: { y: "-30%" }
61
- },
62
- pushDown: {
63
- enter: { y: "-100%" },
64
- exit: { y: "30%" }
65
- },
66
- slideLeft: {
67
- position: { left: 0, top: 0, bottom: 0, width: "100%" },
68
- enter: { x: 0, y: 0 },
69
- exit: { x: "-100%", y: 0 }
70
- },
71
- slideRight: {
72
- position: { right: 0, top: 0, bottom: 0, width: "100%" },
73
- enter: { x: 0, y: 0 },
74
- exit: { x: "100%", y: 0 }
75
- },
76
- slideUp: {
77
- position: { top: 0, left: 0, right: 0, maxWidth: "100vw" },
78
- enter: { x: 0, y: 0 },
79
- exit: { x: 0, y: "-100%" }
80
- },
81
- slideDown: {
82
- position: { bottom: 0, left: 0, right: 0, maxWidth: "100vw" },
83
- enter: { x: 0, y: 0 },
84
- exit: { x: 0, y: "100%" }
85
- }
86
- };
87
- var MOTION_TRANSITION_DEFAULTS = {
88
- enter: {
89
- duration: 0.25,
90
- ease: MOTION_TRANSITION_EASINGS.easeOut
91
- },
92
- exit: {
93
- duration: 0.2,
94
- ease: MOTION_TRANSITION_EASINGS.easeIn
95
- }
96
- };
97
- var transitionEnter = (transition) => (delay, duration) => ({
98
- ...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.enter,
99
- ...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.enter } : {},
100
- delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.enter
101
- });
102
- var transitionExit = (transition) => (delay, duration) => ({
103
- ...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.exit,
104
- ...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.exit } : {},
105
- delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.exit
106
- });
107
30
  var Motion = (0, import_core.motionForwardRef)(
108
31
  ({ as = "div", className, ...rest }, ref) => {
109
32
  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 });
@@ -111,10 +34,5 @@ var Motion = (0, import_core.motionForwardRef)(
111
34
  );
112
35
  // Annotate the CommonJS export names for ESM import in node:
113
36
  0 && (module.exports = {
114
- MOTION_TRANSITION_DEFAULTS,
115
- MOTION_TRANSITION_EASINGS,
116
- MOTION_TRANSITION_VARIANTS,
117
- Motion,
118
- transitionEnter,
119
- transitionExit
37
+ Motion
120
38
  });
package/dist/motion.mjs CHANGED
@@ -1,16 +1,6 @@
1
1
  import {
2
- MOTION_TRANSITION_DEFAULTS,
3
- MOTION_TRANSITION_EASINGS,
4
- MOTION_TRANSITION_VARIANTS,
5
- Motion,
6
- transitionEnter,
7
- transitionExit
8
- } from "./chunk-IENBUDYI.mjs";
2
+ Motion
3
+ } from "./chunk-4RHIQEKP.mjs";
9
4
  export {
10
- MOTION_TRANSITION_DEFAULTS,
11
- MOTION_TRANSITION_EASINGS,
12
- MOTION_TRANSITION_VARIANTS,
13
- Motion,
14
- transitionEnter,
15
- transitionExit
5
+ Motion
16
6
  };
@@ -0,0 +1,58 @@
1
+ import { Dict } from '@yamada-ui/utils';
2
+ import { Transition, Target, TargetAndTransition } from 'framer-motion';
3
+ export { DragControls, HTMLMotionProps, AnimatePresenceProps as MotionAnimatePresenceProps, AnimationControls as MotionAnimationControls, AnimationLifecycles as MotionAnimationLifecycles, AnimationOptions as MotionAnimationOptions, AnimationPlaybackControls as MotionAnimationPlaybackControls, AnimationProps as MotionAnimationProps, AnimationType as MotionAnimationType, MotionConfigProps, LayoutProps as MotionLayoutProps, LazyProps as MotionLazyProps, MotionStyle, Transition as MotionTransition, MotionValue, Variants as MotionVariants, SVGMotionProps } from 'framer-motion';
4
+
5
+ type TargetResolver<Y = Dict> = (props: Y & MotionTransitionProperties) => TargetAndTransition;
6
+ type Variant<Y = Dict> = TargetAndTransition | TargetResolver<Y>;
7
+ type MotionTransitionVariants<Y = Dict> = {
8
+ enter: Variant<Y>;
9
+ exit: Variant<Y>;
10
+ initial?: Variant<Y>;
11
+ };
12
+ type MotionTransitionProperties = {
13
+ /**
14
+ * Custom `transition` definition for `enter` and `exit`.
15
+ */
16
+ transition?: MotionTransitionProps;
17
+ /**
18
+ * Custom `transitionEnd` definition for `enter` and `exit`.
19
+ */
20
+ transitionEnd?: MotionTransitionEndProps;
21
+ /**
22
+ * Custom `delay` definition for `enter` and `exit`.
23
+ */
24
+ delay?: number | MotionDelayProps;
25
+ /**
26
+ * Custom `duration` definition for `enter` and `exit`.
27
+ */
28
+ duration?: number | MotionDurationProps;
29
+ /**
30
+ * Custom `enter`.
31
+ */
32
+ enter?: any;
33
+ /**
34
+ * Custom `exit`.
35
+ */
36
+ exit?: any;
37
+ /**
38
+ * Custom `initial`.
39
+ */
40
+ initial?: any;
41
+ };
42
+ type WithMotionProps<Y> = Partial<Record<'enter' | 'exit', Y>>;
43
+ type MotionTransitionProps = WithMotionProps<Transition>;
44
+ type MotionTransitionEndProps = WithMotionProps<Target>;
45
+ type MotionDelayProps = WithMotionProps<number>;
46
+ type MotionDurationProps = WithMotionProps<number>;
47
+ type WithTransitionProps<Y extends object> = Omit<Y, 'transition'> & MotionTransitionProperties & {
48
+ /**
49
+ * If `true`, the element will unmount when `isOpen={false}` and animation is done.
50
+ */
51
+ unmountOnExit?: boolean;
52
+ /**
53
+ * Show the component. triggers when enter or exit states.
54
+ */
55
+ isOpen?: boolean;
56
+ };
57
+
58
+ export { MotionDelayProps, MotionDurationProps, MotionTransitionEndProps, MotionTransitionProperties, MotionTransitionProps, MotionTransitionVariants, WithTransitionProps };
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __copyProps = (to, from, except, desc) => {
7
+ if (from && typeof from === "object" || typeof from === "function") {
8
+ for (let key of __getOwnPropNames(from))
9
+ if (!__hasOwnProp.call(to, key) && key !== except)
10
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
+ }
12
+ return to;
13
+ };
14
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
+
16
+ // src/motion.types.ts
17
+ var motion_types_exports = {};
18
+ module.exports = __toCommonJS(motion_types_exports);
@@ -0,0 +1 @@
1
+ import "./chunk-V4KRNLE3.mjs";
@@ -0,0 +1,138 @@
1
+ import { Transition } from 'framer-motion';
2
+ import { MotionTransitionProperties } from './motion.types.js';
3
+ import '@yamada-ui/utils';
4
+
5
+ declare const MOTION_TRANSITION_EASINGS: {
6
+ readonly ease: readonly [0.25, 0.1, 0.25, 1];
7
+ readonly easeIn: readonly [0.4, 0, 1, 1];
8
+ readonly easeOut: readonly [0, 0, 0.2, 1];
9
+ readonly easeInOut: readonly [0.4, 0, 0.2, 1];
10
+ };
11
+ declare const MOTION_TRANSITION_VARIANTS: {
12
+ readonly scale: {
13
+ readonly enter: {
14
+ readonly scale: 1;
15
+ };
16
+ readonly exit: {
17
+ readonly scale: 0.95;
18
+ };
19
+ };
20
+ readonly fade: {
21
+ readonly enter: {
22
+ readonly opacity: 1;
23
+ };
24
+ readonly exit: {
25
+ readonly opacity: 0;
26
+ };
27
+ };
28
+ readonly pushLeft: {
29
+ readonly enter: {
30
+ readonly x: "100%";
31
+ };
32
+ readonly exit: {
33
+ readonly x: "-30%";
34
+ };
35
+ };
36
+ readonly pushRight: {
37
+ readonly enter: {
38
+ readonly x: "-100%";
39
+ };
40
+ readonly exit: {
41
+ readonly x: "30%";
42
+ };
43
+ };
44
+ readonly pushUp: {
45
+ readonly enter: {
46
+ readonly y: "100%";
47
+ };
48
+ readonly exit: {
49
+ readonly y: "-30%";
50
+ };
51
+ };
52
+ readonly pushDown: {
53
+ readonly enter: {
54
+ readonly y: "-100%";
55
+ };
56
+ readonly exit: {
57
+ readonly y: "30%";
58
+ };
59
+ };
60
+ readonly slideLeft: {
61
+ readonly position: {
62
+ readonly left: 0;
63
+ readonly top: 0;
64
+ readonly bottom: 0;
65
+ readonly width: "100%";
66
+ };
67
+ readonly enter: {
68
+ readonly x: 0;
69
+ readonly y: 0;
70
+ };
71
+ readonly exit: {
72
+ readonly x: "-100%";
73
+ readonly y: 0;
74
+ };
75
+ };
76
+ readonly slideRight: {
77
+ readonly position: {
78
+ readonly right: 0;
79
+ readonly top: 0;
80
+ readonly bottom: 0;
81
+ readonly width: "100%";
82
+ };
83
+ readonly enter: {
84
+ readonly x: 0;
85
+ readonly y: 0;
86
+ };
87
+ readonly exit: {
88
+ readonly x: "100%";
89
+ readonly y: 0;
90
+ };
91
+ };
92
+ readonly slideUp: {
93
+ readonly position: {
94
+ readonly top: 0;
95
+ readonly left: 0;
96
+ readonly right: 0;
97
+ readonly maxWidth: "100vw";
98
+ };
99
+ readonly enter: {
100
+ readonly x: 0;
101
+ readonly y: 0;
102
+ };
103
+ readonly exit: {
104
+ readonly x: 0;
105
+ readonly y: "-100%";
106
+ };
107
+ };
108
+ readonly slideDown: {
109
+ readonly position: {
110
+ readonly bottom: 0;
111
+ readonly left: 0;
112
+ readonly right: 0;
113
+ readonly maxWidth: "100vw";
114
+ };
115
+ readonly enter: {
116
+ readonly x: 0;
117
+ readonly y: 0;
118
+ };
119
+ readonly exit: {
120
+ readonly x: 0;
121
+ readonly y: "100%";
122
+ };
123
+ };
124
+ };
125
+ declare const MOTION_TRANSITION_DEFAULTS: {
126
+ readonly enter: {
127
+ readonly duration: 0.25;
128
+ readonly ease: readonly [0, 0, 0.2, 1];
129
+ };
130
+ readonly exit: {
131
+ readonly duration: 0.2;
132
+ readonly ease: readonly [0.4, 0, 1, 1];
133
+ };
134
+ };
135
+ declare const transitionEnter: (transition?: Transition) => (delay?: MotionTransitionProperties['delay'], duration?: MotionTransitionProperties['duration']) => Transition;
136
+ declare const transitionExit: (transition?: Transition) => (delay?: MotionTransitionProperties['delay'], duration?: MotionTransitionProperties['duration']) => Transition;
137
+
138
+ export { MOTION_TRANSITION_DEFAULTS, MOTION_TRANSITION_EASINGS, MOTION_TRANSITION_VARIANTS, transitionEnter, transitionExit };
package/dist/utils.js ADDED
@@ -0,0 +1,110 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/utils.ts
21
+ var utils_exports = {};
22
+ __export(utils_exports, {
23
+ MOTION_TRANSITION_DEFAULTS: () => MOTION_TRANSITION_DEFAULTS,
24
+ MOTION_TRANSITION_EASINGS: () => MOTION_TRANSITION_EASINGS,
25
+ MOTION_TRANSITION_VARIANTS: () => MOTION_TRANSITION_VARIANTS,
26
+ transitionEnter: () => transitionEnter,
27
+ transitionExit: () => transitionExit
28
+ });
29
+ module.exports = __toCommonJS(utils_exports);
30
+ var import_utils = require("@yamada-ui/utils");
31
+ var MOTION_TRANSITION_EASINGS = {
32
+ ease: [0.25, 0.1, 0.25, 1],
33
+ easeIn: [0.4, 0, 1, 1],
34
+ easeOut: [0, 0, 0.2, 1],
35
+ easeInOut: [0.4, 0, 0.2, 1]
36
+ };
37
+ var MOTION_TRANSITION_VARIANTS = {
38
+ scale: {
39
+ enter: { scale: 1 },
40
+ exit: { scale: 0.95 }
41
+ },
42
+ fade: {
43
+ enter: { opacity: 1 },
44
+ exit: { opacity: 0 }
45
+ },
46
+ pushLeft: {
47
+ enter: { x: "100%" },
48
+ exit: { x: "-30%" }
49
+ },
50
+ pushRight: {
51
+ enter: { x: "-100%" },
52
+ exit: { x: "30%" }
53
+ },
54
+ pushUp: {
55
+ enter: { y: "100%" },
56
+ exit: { y: "-30%" }
57
+ },
58
+ pushDown: {
59
+ enter: { y: "-100%" },
60
+ exit: { y: "30%" }
61
+ },
62
+ slideLeft: {
63
+ position: { left: 0, top: 0, bottom: 0, width: "100%" },
64
+ enter: { x: 0, y: 0 },
65
+ exit: { x: "-100%", y: 0 }
66
+ },
67
+ slideRight: {
68
+ position: { right: 0, top: 0, bottom: 0, width: "100%" },
69
+ enter: { x: 0, y: 0 },
70
+ exit: { x: "100%", y: 0 }
71
+ },
72
+ slideUp: {
73
+ position: { top: 0, left: 0, right: 0, maxWidth: "100vw" },
74
+ enter: { x: 0, y: 0 },
75
+ exit: { x: 0, y: "-100%" }
76
+ },
77
+ slideDown: {
78
+ position: { bottom: 0, left: 0, right: 0, maxWidth: "100vw" },
79
+ enter: { x: 0, y: 0 },
80
+ exit: { x: 0, y: "100%" }
81
+ }
82
+ };
83
+ var MOTION_TRANSITION_DEFAULTS = {
84
+ enter: {
85
+ duration: 0.25,
86
+ ease: MOTION_TRANSITION_EASINGS.easeOut
87
+ },
88
+ exit: {
89
+ duration: 0.2,
90
+ ease: MOTION_TRANSITION_EASINGS.easeIn
91
+ }
92
+ };
93
+ var transitionEnter = (transition) => (delay, duration) => ({
94
+ ...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.enter,
95
+ ...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.enter } : {},
96
+ delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.enter
97
+ });
98
+ var transitionExit = (transition) => (delay, duration) => ({
99
+ ...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.exit,
100
+ ...duration ? { duration: (0, import_utils.isNumber)(duration) ? duration : duration == null ? void 0 : duration.exit } : {},
101
+ delay: (0, import_utils.isNumber)(delay) ? delay : delay == null ? void 0 : delay.exit
102
+ });
103
+ // Annotate the CommonJS export names for ESM import in node:
104
+ 0 && (module.exports = {
105
+ MOTION_TRANSITION_DEFAULTS,
106
+ MOTION_TRANSITION_EASINGS,
107
+ MOTION_TRANSITION_VARIANTS,
108
+ transitionEnter,
109
+ transitionExit
110
+ });
package/dist/utils.mjs ADDED
@@ -0,0 +1,14 @@
1
+ import {
2
+ MOTION_TRANSITION_DEFAULTS,
3
+ MOTION_TRANSITION_EASINGS,
4
+ MOTION_TRANSITION_VARIANTS,
5
+ transitionEnter,
6
+ transitionExit
7
+ } from "./chunk-MDY2EAFE.mjs";
8
+ export {
9
+ MOTION_TRANSITION_DEFAULTS,
10
+ MOTION_TRANSITION_EASINGS,
11
+ MOTION_TRANSITION_VARIANTS,
12
+ transitionEnter,
13
+ transitionExit
14
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/motion",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "description": "Yamada UI motion components",
5
5
  "keywords": [
6
6
  "yamada",