@yamada-ui/motion 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/motion
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/motion
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/motion
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/motion
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-IENBUDYI.mjs

@@ -0,0 +1,91 @@
+// src/motion.tsx
+import { ui, motionForwardRef } from "@yamada-ui/core";
+import { cx, isNumber } from "@yamada-ui/utils";
+import { motion } from "framer-motion";
+import { jsx } from "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: isNumber(duration) ? duration : duration == null ? void 0 : duration.enter } : {},
+  delay: isNumber(delay) ? delay : delay == null ? void 0 : delay.enter
+});
+var transitionExit = (transition) => (delay, duration) => ({
+  ...transition != null ? transition : MOTION_TRANSITION_DEFAULTS.exit,
+  ...duration ? { duration: isNumber(duration) ? duration : duration == null ? void 0 : duration.exit } : {},
+  delay: isNumber(delay) ? delay : delay == null ? void 0 : delay.exit
+});
+var Motion = motionForwardRef(
+  ({ as = "div", className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(ui.div, { as: motion[as], ref, className: cx("ui-motion", className), ...rest });
+  }
+);
+
+export {
+  MOTION_TRANSITION_EASINGS,
+  MOTION_TRANSITION_VARIANTS,
+  MOTION_TRANSITION_DEFAULTS,
+  transitionEnter,
+  transitionExit,
+  Motion
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { AnimatePresence, DragControls, HTMLMotionProps, LayoutGroup, LazyMotion, AnimatePresenceProps as MotionAnimatePresenceProps, AnimationControls as MotionAnimationControls, AnimationLifecycles as MotionAnimationLifecycles, 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, ValueAnimationOptions as MotionValueAnimationOptions, 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';
+import '@yamada-ui/core';
+import '@yamada-ui/utils';

package/dist/index.js

@@ -0,0 +1,165 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AnimatePresence: () => import_framer_motion2.AnimatePresence,
+  LayoutGroup: () => import_framer_motion2.LayoutGroup,
+  LazyMotion: () => import_framer_motion2.LazyMotion,
+  MOTION_TRANSITION_DEFAULTS: () => MOTION_TRANSITION_DEFAULTS,
+  MOTION_TRANSITION_EASINGS: () => MOTION_TRANSITION_EASINGS,
+  MOTION_TRANSITION_VARIANTS: () => MOTION_TRANSITION_VARIANTS,
+  Motion: () => Motion,
+  MotionConfig: () => import_framer_motion2.MotionConfig,
+  MotionReorder: () => import_framer_motion2.Reorder,
+  motion: () => import_framer_motion2.motion,
+  transitionEnter: () => transitionEnter,
+  transitionExit: () => transitionExit,
+  useDragControls: () => import_framer_motion2.useDragControls,
+  useInView: () => import_framer_motion2.useInView,
+  useIsPresent: () => import_framer_motion2.useIsPresent,
+  useMotionAnimation: () => import_framer_motion2.useAnimation,
+  useMotionAnimationControls: () => import_framer_motion2.useAnimationControls,
+  useMotionAnimationFrame: () => import_framer_motion2.useAnimationFrame,
+  useMotionTemplate: () => import_framer_motion2.useMotionTemplate,
+  useMotionValue: () => import_framer_motion2.useMotionValue,
+  useReducedMotion: () => import_framer_motion2.useReducedMotion,
+  useScroll: () => import_framer_motion2.useScroll,
+  useSpring: () => import_framer_motion2.useSpring,
+  useTime: () => import_framer_motion2.useTime,
+  useTransform: () => import_framer_motion2.useTransform,
+  useVelocity: () => import_framer_motion2.useVelocity,
+  useViewportScroll: () => import_framer_motion2.useViewportScroll
+});
+module.exports = __toCommonJS(src_exports);
+var import_framer_motion2 = require("framer-motion");
+
+// src/motion.tsx
+var import_core = require("@yamada-ui/core");
+var import_utils = require("@yamada-ui/utils");
+var import_framer_motion = require("framer-motion");
+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)(
+  ({ 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:
+0 && (module.exports = {
+  AnimatePresence,
+  LayoutGroup,
+  LazyMotion,
+  MOTION_TRANSITION_DEFAULTS,
+  MOTION_TRANSITION_EASINGS,
+  MOTION_TRANSITION_VARIANTS,
+  Motion,
+  MotionConfig,
+  MotionReorder,
+  motion,
+  transitionEnter,
+  transitionExit,
+  useDragControls,
+  useInView,
+  useIsPresent,
+  useMotionAnimation,
+  useMotionAnimationControls,
+  useMotionAnimationFrame,
+  useMotionTemplate,
+  useMotionValue,
+  useReducedMotion,
+  useScroll,
+  useSpring,
+  useTime,
+  useTransform,
+  useVelocity,
+  useViewportScroll
+});

package/dist/index.mjs

@@ -0,0 +1,62 @@
+import {
+  MOTION_TRANSITION_DEFAULTS,
+  MOTION_TRANSITION_EASINGS,
+  MOTION_TRANSITION_VARIANTS,
+  Motion,
+  transitionEnter,
+  transitionExit
+} from "./chunk-IENBUDYI.mjs";
+
+// src/index.ts
+import {
+  motion,
+  AnimatePresence,
+  LayoutGroup,
+  LazyMotion,
+  MotionConfig,
+  Reorder,
+  useMotionTemplate,
+  useScroll,
+  useSpring,
+  useTime,
+  useTransform,
+  useVelocity,
+  useViewportScroll,
+  useAnimation,
+  useAnimationControls,
+  useAnimationFrame,
+  useDragControls,
+  useInView,
+  useIsPresent,
+  useReducedMotion,
+  useMotionValue
+} from "framer-motion";
+export {
+  AnimatePresence,
+  LayoutGroup,
+  LazyMotion,
+  MOTION_TRANSITION_DEFAULTS,
+  MOTION_TRANSITION_EASINGS,
+  MOTION_TRANSITION_VARIANTS,
+  Motion,
+  MotionConfig,
+  Reorder as MotionReorder,
+  motion,
+  transitionEnter,
+  transitionExit,
+  useDragControls,
+  useInView,
+  useIsPresent,
+  useAnimation as useMotionAnimation,
+  useAnimationControls as useMotionAnimationControls,
+  useAnimationFrame as useMotionAnimationFrame,
+  useMotionTemplate,
+  useMotionValue,
+  useReducedMotion,
+  useScroll,
+  useSpring,
+  useTime,
+  useTransform,
+  useVelocity,
+  useViewportScroll
+};

package/dist/motion.d.ts

@@ -0,0 +1,169 @@
+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';
+
+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 = {
+    transition?: MotionTransitionProps;
+    transitionEnd?: MotionTransitionEndProps;
+    delay?: number | MotionDelayProps;
+    duration?: number | MotionDurationProps;
+    enter?: any;
+    exit?: any;
+    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 & {
+    unmountOnExit?: boolean;
+    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;
+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 };

package/dist/motion.js

@@ -0,0 +1,120 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/motion.tsx
+var motion_exports = {};
+__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
+});
+module.exports = __toCommonJS(motion_exports);
+var import_core = require("@yamada-ui/core");
+var import_utils = require("@yamada-ui/utils");
+var import_framer_motion = require("framer-motion");
+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)(
+  ({ 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:
+0 && (module.exports = {
+  MOTION_TRANSITION_DEFAULTS,
+  MOTION_TRANSITION_EASINGS,
+  MOTION_TRANSITION_VARIANTS,
+  Motion,
+  transitionEnter,
+  transitionExit
+});

package/dist/motion.mjs

@@ -0,0 +1,16 @@
+import {
+  MOTION_TRANSITION_DEFAULTS,
+  MOTION_TRANSITION_EASINGS,
+  MOTION_TRANSITION_VARIANTS,
+  Motion,
+  transitionEnter,
+  transitionExit
+} from "./chunk-IENBUDYI.mjs";
+export {
+  MOTION_TRANSITION_DEFAULTS,
+  MOTION_TRANSITION_EASINGS,
+  MOTION_TRANSITION_VARIANTS,
+  Motion,
+  transitionEnter,
+  transitionExit
+};

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@yamada-ui/motion",
+  "version": "0.1.0",
+  "description": "Yamada UI motion components",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "motion",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/motion"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "framer-motion": "^9.1.7",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/core": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}