@yamada-ui/transitions - npm Package Compare versions

Comparing version 0.0.0-dev-20230625235915 to 0.0.0-dev-20230701130255

dist/collapse.d.ts

@@ -6,4 +6,19 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 type CollapseOptions = {
+    /**
+     * If `true`, the opacity of the content will be animated.
+     *
+     * @default true
+     */
     animationOpacity?: boolean;
+    /**
+     * The height you want the content in its collapsed state.
+     *
+     * @default 0
+     */
     startingHeight?: number | string;
+    /**
+     * The height you want the content in its expanded state.
+     *
+     * @default "auto"
+     */
     endingHeight?: number | string;
@@ -10,0 +25,0 @@ };

dist/index.d.ts

@@ -0,7 +1,7 @@
+export { Collapse, CollapseProps, collapseProps } from './collapse.js';
 export { Fade, FadeProps, fadeProps } from './fade.js';
 export { ScaleFade, ScaleFadeProps, scaleFadeProps } from './scale-fade.js';
+export { Slide, SlideProps, slideProps } from './slide.js';
 export { SlideFade, SlideFadeProps, slideFadeProps } from './slide-fade.js';
-export { Slide, SlideProps, getSlideProps, slideProps } from './slide.js';
-export { Collapse, CollapseProps, collapseProps } from './collapse.js';
 import '@yamada-ui/core';
 import '@yamada-ui/motion';

dist/index.js

@@ -30,3 +30,2 @@ "use strict";
   fadeProps: () => fadeProps,
-  getSlideProps: () => getSlideProps,
   scaleFadeProps: () => scaleFadeProps,
@@ -38,10 +37,21 @@ slideFadeProps: () => slideFadeProps,
 
-// src/fade.tsx
+// src/collapse.tsx
 var import_core = require("@yamada-ui/core");
 var import_motion = require("@yamada-ui/motion");
 var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var isNumeric = (value) => value != null && parseFloat(value.toString()) > 0;
 var variants = {
-  enter: ({ transition, transitionEnd, delay, duration, enter } = {}) => ({
-    opacity: 1,
+  enter: ({
+    animationOpacity,
+    endingHeight: height,
+    transition,
+    transitionEnd,
+    delay,
+    duration,
+    enter
+  } = {}) => ({
+    ...animationOpacity ? { opacity: 1 } : {},
+    height,
     transition: (0, import_motion.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
@@ -51,4 +61,13 @@ transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
   }),
-  exit: ({ transition, transitionEnd, delay, duration, exit } = {}) => ({
-    opacity: 0,
+  exit: ({
+    animationOpacity,
+    startingHeight: height,
+    transition,
+    transitionEnd,
+    delay,
+    duration,
+    exit
+  } = {}) => ({
+    ...animationOpacity ? { opacity: isNumeric(height) ? 1 : 0 } : {},
+    height,
     transition: (0, import_motion.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
@@ -59,3 +78,3 @@ transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
 };
-var fadeProps = {
+var collapseProps = {
   initial: "exit",
@@ -66,11 +85,58 @@ animate: "enter",
 };
-var Fade = (0, import_core.forwardRef)(
-  ({ unmountOnExit, isOpen, transition, transitionEnd, delay, duration, className, ...rest }, ref) => {
+var Collapse = (0, import_core.forwardRef)(
+  ({
+    unmountOnExit,
+    isOpen,
+    animationOpacity = true,
+    startingHeight = 0,
+    endingHeight = "auto",
+    transition,
+    transitionEnd,
+    delay,
+    duration,
+    className,
+    style,
+    __css,
+    ...rest
+  }, ref) => {
+    const [mounted, setMounted] = (0, import_react.useState)(false);
+    (0, import_react.useEffect)(() => {
+      const isBrowser = (0, import_utils.createdDom)();
+      if (isBrowser)
+        setMounted(true);
+    }, []);
+    const hasStartingHeight = parseFloat(startingHeight.toString()) > 0;
     const animate = isOpen || unmountOnExit ? "enter" : "exit";
-    const custom = { transition, transitionEnd, delay, duration };
-    isOpen = unmountOnExit ? isOpen && unmountOnExit : true;
+    isOpen = unmountOnExit ? isOpen : true;
+    transition = !mounted ? { enter: { duration: 0 } } : transition != null ? transition : {
+      enter: {
+        height: { duration: duration != null ? duration : 0.3, ease: import_motion.MOTION_TRANSITION_EASINGS.ease },
+        opacity: { duration: duration != null ? duration : 0.4, ease: import_motion.MOTION_TRANSITION_EASINGS.ease }
+      },
+      exit: {
+        height: { duration: duration != null ? duration : 0.2, ease: import_motion.MOTION_TRANSITION_EASINGS.ease },
+        opacity: { duration: duration != null ? duration : 0.3, ease: import_motion.MOTION_TRANSITION_EASINGS.ease }
+      }
+    };
+    transitionEnd = unmountOnExit ? transitionEnd : {
+      ...transitionEnd,
+      exit: {
+        ...transitionEnd == null ? void 0 : transitionEnd.exit,
+        display: hasStartingHeight ? "block" : "none"
+      }
+    };
+    const custom = {
+      animationOpacity,
+      startingHeight,
+      endingHeight,
+      transition,
+      transitionEnd,
+      delay,
+      duration
+    };
     const css = {
-      w: "100%"
+      w: "100%",
+      ...__css
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { custom, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { initial: false, custom, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_core.ui.div,
@@ -80,8 +146,14 @@ {
         ref,
-        className: (0, import_utils.cx)("ui-fade", className),
+        className: (0, import_utils.cx)("ui-collapse", className),
+        ...rest,
+        ...collapseProps,
         custom,
-        ...fadeProps,
         animate,
+        initial: unmountOnExit ? "exit" : false,
         __css: css,
-        ...rest
+        style: {
+          overflow: "hidden",
+          display: "block",
+          ...style
+        }
       }
@@ -92,3 +164,3 @@ ) : null });
 
-// src/scale-fade.tsx
+// src/fade.tsx
 var import_core2 = require("@yamada-ui/core");
@@ -101,3 +173,2 @@ var import_motion2 = require("@yamada-ui/motion");
     opacity: 1,
-    scale: 1,
     transition: (0, import_motion2.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
@@ -107,10 +178,10 @@ transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
   }),
-  exit: ({ scale, reverse, transition, transitionEnd, delay, duration, exit } = {}) => ({
+  exit: ({ transition, transitionEnd, delay, duration, exit } = {}) => ({
     opacity: 0,
     transition: (0, import_motion2.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
-    ...reverse ? { scale, transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit } : { transitionEnd: { scale, ...transitionEnd == null ? void 0 : transitionEnd.exit } },
+    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
     ...exit
   })
 };
-var scaleFadeProps = {
+var fadeProps = {
   initial: "exit",
@@ -121,17 +192,6 @@ animate: "enter",
 };
-var ScaleFade = (0, import_core2.forwardRef)(
-  ({
-    unmountOnExit,
-    isOpen,
-    scale = 0.95,
-    reverse = true,
-    transition,
-    transitionEnd,
-    delay,
-    duration,
-    className,
-    ...rest
-  }, ref) => {
+var Fade = (0, import_core2.forwardRef)(
+  ({ unmountOnExit, isOpen, transition, transitionEnd, delay, duration, className, ...rest }, ref) => {
     const animate = isOpen || unmountOnExit ? "enter" : "exit";
-    const custom = { scale, reverse, transition, transitionEnd, delay, duration };
+    const custom = { transition, transitionEnd, delay, duration };
     isOpen = unmountOnExit ? isOpen && unmountOnExit : true;
@@ -146,5 +206,5 @@ const css = {
         ref,
-        className: (0, import_utils2.cx)("ui-scale-fade", className),
+        className: (0, import_utils2.cx)("ui-fade", className),
         custom,
-        ...scaleFadeProps,
+        ...fadeProps,
         animate,
@@ -158,21 +218,11 @@ __css: css,
 
-// src/slide-fade.tsx
+// src/scale-fade.tsx
 var import_core3 = require("@yamada-ui/core");
 var import_motion3 = require("@yamada-ui/motion");
-var import_use_value = require("@yamada-ui/use-value");
 var import_utils3 = require("@yamada-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var variants3 = {
-  initial: ({ offsetX, offsetY, transition, transitionEnd, delay, duration, initial }) => ({
-    opacity: 0,
-    x: offsetX,
-    y: offsetY,
-    transition: (0, import_motion3.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
-    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
-    ...initial
-  }),
   enter: ({ transition, transitionEnd, delay, duration, enter } = {}) => ({
     opacity: 1,
-    x: 0,
-    y: 0,
+    scale: 1,
     transition: (0, import_motion3.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
@@ -182,10 +232,10 @@ transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
   }),
-  exit: ({ offsetX, offsetY, reverse, transition, transitionEnd, delay, duration, exit } = {}) => ({
+  exit: ({ scale, reverse, transition, transitionEnd, delay, duration, exit } = {}) => ({
     opacity: 0,
     transition: (0, import_motion3.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
-    ...reverse ? { x: offsetX, y: offsetY, transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit } : { transitionEnd: { x: offsetX, y: offsetY, ...transitionEnd == null ? void 0 : transitionEnd.exit } },
+    ...reverse ? { scale, transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit } : { transitionEnd: { scale, ...transitionEnd == null ? void 0 : transitionEnd.exit } },
     ...exit
   })
 };
-var slideFadeProps = {
+var scaleFadeProps = {
   initial: "exit",
@@ -196,8 +246,7 @@ animate: "enter",
 };
-var SlideFade = (0, import_core3.forwardRef)(
+var ScaleFade = (0, import_core3.forwardRef)(
   ({
     unmountOnExit,
     isOpen,
-    offsetX: _offsetX = 0,
-    offsetY: _offsetY = 8,
+    scale = 0.95,
     reverse = true,
@@ -212,5 +261,3 @@ transition,
     const animate = isOpen || unmountOnExit ? "enter" : "exit";
-    const offsetX = (0, import_use_value.useValue)(_offsetX);
-    const offsetY = (0, import_use_value.useValue)(_offsetY);
-    const custom = { offsetX, offsetY, reverse, transition, transitionEnd, delay, duration };
+    const custom = { scale, reverse, transition, transitionEnd, delay, duration };
     isOpen = unmountOnExit ? isOpen && unmountOnExit : true;
@@ -225,5 +272,5 @@ const css = {
         ref,
-        className: (0, import_utils3.cx)("ui-slide-fade", className),
+        className: (0, import_utils3.cx)("ui-scale-fade", className),
         custom,
-        ...slideFadeProps,
+        ...scaleFadeProps,
         animate,
@@ -240,3 +287,3 @@ __css: css,
 var import_motion4 = require("@yamada-ui/motion");
-var import_use_value2 = require("@yamada-ui/use-value");
+var import_use_value = require("@yamada-ui/use-value");
 var import_utils4 = require("@yamada-ui/utils");
@@ -290,3 +337,3 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
     const animate = isOpen || unmountOnExit ? "enter" : "exit";
-    const placement = (0, import_use_value2.useValue)(_placement);
+    const placement = (0, import_use_value.useValue)(_placement);
     const custom = { placement, transition, transitionEnd, delay, duration };
@@ -316,21 +363,21 @@ isOpen = unmountOnExit ? isOpen && unmountOnExit : true;
 
-// src/collapse.tsx
+// src/slide-fade.tsx
 var import_core5 = require("@yamada-ui/core");
 var import_motion5 = require("@yamada-ui/motion");
+var import_use_value2 = require("@yamada-ui/use-value");
 var import_utils5 = require("@yamada-ui/utils");
-var import_react = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var isNumeric = (value) => value != null && parseFloat(value.toString()) > 0;
 var variants5 = {
-  enter: ({
-    animationOpacity,
-    endingHeight: height,
-    transition,
-    transitionEnd,
-    delay,
-    duration,
-    enter
-  } = {}) => ({
-    ...animationOpacity ? { opacity: 1 } : {},
-    height,
+  initial: ({ offsetX, offsetY, transition, transitionEnd, delay, duration, initial }) => ({
+    opacity: 0,
+    x: offsetX,
+    y: offsetY,
+    transition: (0, import_motion5.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
+    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
+    ...initial
+  }),
+  enter: ({ transition, transitionEnd, delay, duration, enter } = {}) => ({
+    opacity: 1,
+    x: 0,
+    y: 0,
     transition: (0, import_motion5.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
@@ -340,19 +387,10 @@ transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
   }),
-  exit: ({
-    animationOpacity,
-    startingHeight: height,
-    transition,
-    transitionEnd,
-    delay,
-    duration,
-    exit
-  } = {}) => ({
-    ...animationOpacity ? { opacity: isNumeric(height) ? 1 : 0 } : {},
-    height,
+  exit: ({ offsetX, offsetY, reverse, transition, transitionEnd, delay, duration, exit } = {}) => ({
+    opacity: 0,
     transition: (0, import_motion5.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
-    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
+    ...reverse ? { x: offsetX, y: offsetY, transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit } : { transitionEnd: { x: offsetX, y: offsetY, ...transitionEnd == null ? void 0 : transitionEnd.exit } },
     ...exit
   })
 };
-var collapseProps = {
+var slideFadeProps = {
   initial: "exit",
@@ -363,9 +401,9 @@ animate: "enter",
 };
-var Collapse = (0, import_core5.forwardRef)(
+var SlideFade = (0, import_core5.forwardRef)(
   ({
     unmountOnExit,
     isOpen,
-    animationOpacity = true,
-    startingHeight = 0,
-    endingHeight = "auto",
+    offsetX: _offsetX = 0,
+    offsetY: _offsetY = 8,
+    reverse = true,
     transition,
@@ -376,46 +414,13 @@ transitionEnd,
     className,
-    style,
-    __css,
     ...rest
   }, ref) => {
-    const [mounted, setMounted] = (0, import_react.useState)(false);
-    (0, import_react.useEffect)(() => {
-      const isBrowser = (0, import_utils5.createdDom)();
-      if (isBrowser)
-        setMounted(true);
-    }, []);
-    const hasStartingHeight = parseFloat(startingHeight.toString()) > 0;
     const animate = isOpen || unmountOnExit ? "enter" : "exit";
-    isOpen = unmountOnExit ? isOpen : true;
-    transition = !mounted ? { enter: { duration: 0 } } : transition != null ? transition : {
-      enter: {
-        height: { duration: duration != null ? duration : 0.3, ease: import_motion5.MOTION_TRANSITION_EASINGS.ease },
-        opacity: { duration: duration != null ? duration : 0.4, ease: import_motion5.MOTION_TRANSITION_EASINGS.ease }
-      },
-      exit: {
-        height: { duration: duration != null ? duration : 0.2, ease: import_motion5.MOTION_TRANSITION_EASINGS.ease },
-        opacity: { duration: duration != null ? duration : 0.3, ease: import_motion5.MOTION_TRANSITION_EASINGS.ease }
-      }
-    };
-    transitionEnd = unmountOnExit ? transitionEnd : {
-      ...transitionEnd,
-      exit: {
-        ...transitionEnd == null ? void 0 : transitionEnd.exit,
-        display: hasStartingHeight ? "block" : "none"
-      }
-    };
-    const custom = {
-      animationOpacity,
-      startingHeight,
-      endingHeight,
-      transition,
-      transitionEnd,
-      delay,
-      duration
-    };
+    const offsetX = (0, import_use_value2.useValue)(_offsetX);
+    const offsetY = (0, import_use_value2.useValue)(_offsetY);
+    const custom = { offsetX, offsetY, reverse, transition, transitionEnd, delay, duration };
+    isOpen = unmountOnExit ? isOpen && unmountOnExit : true;
     const css = {
-      w: "100%",
-      ...__css
+      w: "100%"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_motion5.AnimatePresence, { initial: false, custom, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_motion5.AnimatePresence, { custom, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_core5.ui.div,
@@ -425,14 +430,8 @@ {
         ref,
-        className: (0, import_utils5.cx)("ui-collapse", className),
-        ...rest,
-        ...collapseProps,
+        className: (0, import_utils5.cx)("ui-slide-fade", className),
         custom,
+        ...slideFadeProps,
         animate,
-        initial: unmountOnExit ? "exit" : false,
         __css: css,
-        style: {
-          overflow: "hidden",
-          display: "block",
-          ...style
-        }
+        ...rest
       }
@@ -451,3 +450,2 @@ ) : null });
   fadeProps,
-  getSlideProps,
   scaleFadeProps,
@@ -454,0 +452,0 @@ slideFadeProps,

dist/scale-fade.d.ts

@@ -6,3 +6,13 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 type ScaleFadeOptions = {
+    /**
+     * The initial scale of the element.
+     *
+     * @default 0.95
+     */
     scale?: number;
+    /**
+     * If `true`, the element will transition back to exit state.
+     *
+     * @default true
+     */
     reverse?: boolean;
@@ -9,0 +19,0 @@ };

dist/slide-fade.d.ts

@@ -6,4 +6,19 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 type SlideFadeOptions = {
+    /**
+     * The offset on the horizontal or `x` axis.
+     *
+     * @default 0
+     */
     offsetX?: Token<string | number>;
+    /**
+     * The offset on the vertical or `y` axis.
+     *
+     * @default 8
+     */
     offsetY?: Token<string | number>;
+    /**
+     * If `true`, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out.
+     *
+     * @default true
+     */
     reverse?: boolean;
@@ -10,0 +25,0 @@ };

dist/slide.d.ts

@@ -5,4 +5,3 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 
-type Placement = 'top' | 'left' | 'bottom' | 'right';
-declare const getSlideProps: (placement?: Placement) => {
+declare const getSlideProps: (placement?: 'top' | 'left' | 'bottom' | 'right') => {
     readonly position: {
@@ -69,3 +68,8 @@ readonly left: 0;
 type SlideOptions = {
-    placement?: Token<Placement>;
+    /**
+     * The placement of the slide.
+     *
+     * @default 'right'
+     */
+    placement?: Token<'top' | 'left' | 'bottom' | 'right'>;
 };
@@ -72,0 +76,0 @@ type SlideProps = WithTransitionProps<HTMLUIProps<'div'> & HTMLMotionProps<'div'>> & SlideOptions;

package.json

 {
   "name": "@yamada-ui/transitions",
-  "version": "0.0.0-dev-20230625235915",
+  "version": "0.0.0-dev-20230701130255",
   "description": "Yamada UI transitions components",
@@ -43,6 +43,6 @@ "keywords": [
   "dependencies": {
-    "@yamada-ui/core": "0.0.0-dev-20230625235915",
+    "@yamada-ui/core": "0.0.0-dev-20230701130255",
     "@yamada-ui/utils": "0.1.1",
-    "@yamada-ui/motion": "0.0.0-dev-20230625235915",
-    "@yamada-ui/use-value": "0.0.0-dev-20230625235915"
+    "@yamada-ui/motion": "0.0.0-dev-20230701130255",
+    "@yamada-ui/use-value": "0.0.0-dev-20230701130255"
   },
@@ -81,4 +81,4 @@ "devDependencies": {
     "typecheck": "tsc --noEmit",
-    "gen:types": "tsx ../../../scripts/generate-types"
+    "gen:docs": "tsx ../../../scripts/generate-docs"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

54264

increased by1.54%

Lines of code

1639

increased by2.5%

Dependency changes

• + Added@yamada-ui/core@0.0.0-dev-20230701130255(transitive)

• + Added@yamada-ui/motion@0.0.0-dev-20230701130255(transitive)

• + Added@yamada-ui/portal@0.0.0-dev-20230701130255(transitive)

• + Added@yamada-ui/use-breakpoint@0.0.0-dev-20230701130255(transitive)

• + Added@yamada-ui/use-value@0.0.0-dev-20230701130255(transitive)

• - Removed@yamada-ui/core@0.0.0-dev-20230625235915(transitive)

• - Removed@yamada-ui/motion@0.0.0-dev-20230625235915(transitive)

• - Removed@yamada-ui/portal@0.1.2(transitive)

• - Removed@yamada-ui/use-breakpoint@0.0.0-dev-20230625235915(transitive)

• - Removed@yamada-ui/use-value@0.0.0-dev-20230625235915(transitive)

• Updated@yamada-ui/core@0.0.0-dev-20230701130255

• Updated@yamada-ui/motion@0.0.0-dev-20230701130255

• Updated@yamada-ui/use-value@0.0.0-dev-20230701130255