@yamada-ui/transitions/dist/index.js

Yamada UI transitions components

"use client"
"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 index_exports = {};
__export(index_exports, {
  Airy: () => Airy,
  Collapse: () => Collapse,
  Fade: () => Fade,
  Flip: () => Flip,
  Rotate: () => Rotate,
  ScaleFade: () => ScaleFade,
  Slide: () => Slide,
  SlideFade: () => SlideFade,
  collapseProps: () => collapseProps,
  fadeProps: () => fadeProps,
  scaleFadeProps: () => scaleFadeProps,
  slideFadeProps: () => slideFadeProps,
  slideProps: () => slideProps
});
module.exports = __toCommonJS(index_exports);

// src/airy.tsx
var import_core = require("@yamada-ui/core");
var import_motion = require("@yamada-ui/motion");
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Airy = (0, import_motion.motionForwardRef)((props, ref) => {
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("Airy", props);
  const {
    className,
    defaultValue = "from",
    delay = 0,
    isDisabled,
    disabled = isDisabled,
    duration = 0.2,
    from,
    isReadOnly,
    readOnly = isReadOnly,
    to,
    value: valueProp,
    onChange: onChangeProp,
    ...rest
  } = (0, import_core.omitThemeProps)(mergedProps);
  const [vars, { opacity }] = (0, import_core.useCreateVars)(
    { opacity: 1, ...styles, ...rest },
    ["opacity"],
    { transform: true }
  );
  const animate = (0, import_motion.useMotionAnimation)();
  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
    defaultValue,
    value: valueProp,
    onChange: onChangeProp
  });
  const css = {
    vars,
    ...styles
  };
  const onClick = (0, import_react.useCallback)(async () => {
    if (readOnly) return;
    await animate.start({ opacity: 0, transition: { delay, duration } });
    setValue((prev) => prev === "from" ? "to" : "from");
    await animate.start({ opacity, transition: { duration } });
  }, [animate, setValue, readOnly, opacity, duration, delay]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_motion.motion.button,
    {
      ref,
      type: "button",
      className: (0, import_utils.cx)("ui-airy", `ui-airy--${value}`, className),
      "data-disabled": (0, import_utils.dataAttr)(disabled),
      "data-readonly": (0, import_utils.dataAttr)(readOnly),
      "data-value": value,
      animate,
      disabled,
      initial: { opacity },
      onClick,
      __css: css,
      ...rest,
      children: value === "from" ? from : to
    }
  );
});
Airy.displayName = "Airy";
Airy.__ui__ = "Airy";

// src/collapse.tsx
var import_core2 = require("@yamada-ui/core");
var import_motion2 = require("@yamada-ui/motion");
var import_utils2 = require("@yamada-ui/utils");
var import_react2 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var isNumeric = (value) => value != null && parseFloat(value.toString()) > 0;
var variants = {
  enter: ({
    animationOpacity,
    delay,
    duration,
    endingHeight: height,
    enter,
    transition,
    transitionEnd
  } = {}) => ({
    ...animationOpacity ? { opacity: 1 } : {},
    height,
    transition: (0, import_motion2.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
    ...enter
  }),
  exit: ({
    animationOpacity,
    delay,
    duration,
    exit,
    startingHeight: height,
    transition,
    transitionEnd
  } = {}) => ({
    ...animationOpacity ? { opacity: isNumeric(height) ? 1 : 0 } : {},
    height,
    transition: (0, import_motion2.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
    ...exit
  })
};
var collapseProps = {
  animate: "enter",
  exit: "exit",
  initial: "exit",
  variants
};
var Collapse = (0, import_motion2.motionForwardRef)((props, ref) => {
  const [style, mergedProps] = (0, import_core2.useComponentStyle)("Collapse", props);
  const {
    className,
    animationOpacity,
    delay,
    duration,
    endingHeight,
    isOpen,
    open = isOpen,
    startingHeight,
    transition: transitionProp,
    transitionEnd,
    unmountOnExit,
    __css,
    ...rest
  } = (0, import_core2.omitThemeProps)(mergedProps);
  const [mounted, setMounted] = (0, import_react2.useState)(false);
  const animate = open || unmountOnExit ? "enter" : "exit";
  const resolvedOpen = unmountOnExit ? open : true;
  const transition = (0, import_react2.useMemo)(() => {
    if (!mounted) {
      return { enter: { duration: 0 } };
    } else if (transitionProp) {
      return transitionProp;
    } else {
      return {
        enter: {
          height: {
            duration: duration != null ? duration : 0.3,
            ease: import_motion2.MOTION_TRANSITION_EASINGS.ease
          },
          opacity: {
            duration: duration != null ? duration : 0.4,
            ease: import_motion2.MOTION_TRANSITION_EASINGS.ease
          }
        },
        exit: {
          height: {
            duration: duration != null ? duration : 0.3,
            ease: import_motion2.MOTION_TRANSITION_EASINGS.ease
          },
          opacity: {
            duration: duration != null ? duration : 0.4,
            ease: import_motion2.MOTION_TRANSITION_EASINGS.ease
          }
        }
      };
    }
  }, [mounted, duration, transitionProp]);
  const custom = {
    animationOpacity,
    delay,
    duration,
    endingHeight,
    startingHeight,
    transition,
    transitionEnd
  };
  const css = {
    ...style,
    ...__css
  };
  (0, import_react2.useEffect)(() => {
    if ((0, import_utils2.createdDom)()) setMounted(true);
  }, []);
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion2.AnimatePresence, { custom, initial: false, children: resolvedOpen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    import_motion2.motion.div,
    {
      ref,
      className: (0, import_utils2.cx)("ui-collapse", className),
      ...rest,
      ...collapseProps,
      style: { overflow: "hidden", ...rest.style },
      animate,
      custom,
      initial: unmountOnExit ? "exit" : false,
      __css: css
    }
  ) : null });
});
Collapse.displayName = "Collapse";
Collapse.__ui__ = "Collapse";

// src/fade.tsx
var import_core3 = require("@yamada-ui/core");
var import_motion3 = require("@yamada-ui/motion");
var import_utils3 = require("@yamada-ui/utils");
var import_jsx_runtime3 = require("react/jsx-runtime");
var variants2 = {
  enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({
    opacity: 1,
    transition: (0, import_motion3.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
    ...enter
  }),
  exit: ({ delay, duration, exit, transition, transitionEnd } = {}) => ({
    opacity: 0,
    transition: (0, import_motion3.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
    ...exit
  })
};
var fadeProps = {
  animate: "enter",
  exit: "exit",
  initial: "exit",
  variants: variants2
};
var Fade = (0, import_motion3.motionForwardRef)((props, ref) => {
  const [style, mergedProps] = (0, import_core3.useComponentStyle)("Fade", props);
  const {
    className,
    delay,
    duration,
    isOpen,
    open = isOpen,
    transition,
    transitionEnd,
    unmountOnExit,
    ...rest
  } = (0, import_core3.omitThemeProps)(mergedProps);
  const animate = open || unmountOnExit ? "enter" : "exit";
  const custom = { delay, duration, transition, transitionEnd };
  const resolvedOpen = unmountOnExit ? open && unmountOnExit : true;
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_motion3.AnimatePresence, { custom, children: resolvedOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    import_motion3.motion.div,
    {
      ref,
      className: (0, import_utils3.cx)("ui-fade", className),
      custom,
      ...fadeProps,
      animate,
      __css: style,
      ...rest
    }
  ) : null });
});
Fade.displayName = "Fade";
Fade.__ui__ = "Fade";

// src/flip.tsx
var import_core4 = require("@yamada-ui/core");
var import_motion4 = require("@yamada-ui/motion");
var import_use_controllable_state2 = require("@yamada-ui/use-controllable-state");
var import_utils4 = require("@yamada-ui/utils");
var import_react3 = require("react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var variants3 = {
  enter: ({ ident, orientation, visible }) => ({
    [orientation === "horizontal" ? "rotateY" : "rotateX"]: ident === "from" ? visible ? 180 : 0 : visible ? 0 : 180
  }),
  exit: ({ ident, orientation }) => ({
    [orientation === "horizontal" ? "rotateY" : "rotateX"]: ident === "from" ? 0 : 180
  })
};
var flipProps = {
  animate: "enter",
  initial: "exit",
  variants: variants3
};
var Flip = (0, import_motion4.motionForwardRef)((props, ref) => {
  const [dimensions, setDimensions] = (0, import_react3.useState)({});
  const fromRef = (0, import_react3.useRef)(null);
  const toRef = (0, import_react3.useRef)(null);
  const [styles, mergedProps] = (0, import_core4.useComponentMultiStyle)("Flip", props);
  const {
    className,
    defaultValue = "from",
    delay = 0,
    isDisabled,
    disabled = isDisabled,
    duration = 0.4,
    from,
    isReadOnly,
    orientation = "horizontal",
    readOnly = isReadOnly,
    to,
    transition: transitionProp = {},
    value: valueProp,
    onChange: onChangeProp,
    ...rest
  } = (0, import_core4.omitThemeProps)(mergedProps);
  const [value, setValue] = (0, import_use_controllable_state2.useControllableState)({
    defaultValue,
    value: valueProp,
    onChange: onChangeProp
  });
  const visible = value === "to";
  const css = {
    h: dimensions.height ? `${dimensions.height}px` : "auto",
    w: dimensions.width ? `${dimensions.width}px` : "auto",
    ...styles.container
  };
  const transition = {
    delay,
    duration,
    ...transitionProp
  };
  const onClick = () => {
    if (readOnly) return;
    setValue((prev) => prev === "from" ? "to" : "from");
  };
  (0, import_utils4.useSafeLayoutEffect)(() => {
    const fromElement = fromRef.current;
    const toElement = toRef.current;
    if (!fromElement || !toElement) return;
    const fromWidth = fromElement.offsetWidth;
    const fromHeight = fromElement.offsetHeight;
    const toWidth = toElement.offsetWidth;
    const toHeight = toElement.offsetHeight;
    if (fromWidth !== toWidth || fromHeight !== toHeight) {
      console.warn(
        `Dimensions do not match:
        "from" element (Width: ${fromWidth}px, Height: ${fromHeight}px)
        does not match "to" element (Width: ${toWidth}px, Height: ${toHeight}px).
        Please ensure both elements have the same dimensions.`
      );
    }
    setDimensions({ height: fromHeight, width: fromWidth });
  }, [fromRef, toRef]);
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
    import_motion4.motion.button,
    {
      ref,
      type: "button",
      className: (0, import_utils4.cx)("ui-flip", `ui-flip__${orientation}`, className),
      "data-disabled": (0, import_utils4.dataAttr)(disabled),
      "data-readonly": (0, import_utils4.dataAttr)(readOnly),
      "data-value": value,
      disabled,
      onClick,
      __css: css,
      ...rest,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
          import_motion4.motion.span,
          {
            ref: fromRef,
            className: (0, import_utils4.cx)(
              "ui-flip__from",
              `ui-flip__from--${orientation}`,
              className
            ),
            custom: { ident: "from", orientation, visible },
            ...flipProps,
            transition,
            __css: {
              ...styles.flipIdent,
              ...styles.from
            },
            children: from
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
          import_motion4.motion.span,
          {
            ref: toRef,
            className: (0, import_utils4.cx)("ui-flip__to", `ui-flip__to--${orientation}`, className),
            custom: { ident: "to", orientation, visible },
            ...flipProps,
            transition,
            __css: {
              ...styles.flipIdent,
              ...styles.to
            },
            children: to
          }
        )
      ]
    }
  );
});
Flip.displayName = "Flip";
Flip.__ui__ = "Flip";

// src/rotate.tsx
var import_core5 = require("@yamada-ui/core");
var import_motion5 = require("@yamada-ui/motion");
var import_use_controllable_state3 = require("@yamada-ui/use-controllable-state");
var import_utils5 = require("@yamada-ui/utils");
var import_react4 = require("react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var Rotate = (0, import_motion5.motionForwardRef)((props, ref) => {
  const [styles, mergedProps] = (0, import_core5.useComponentStyle)("Rotate", props);
  const {
    className,
    defaultValue = "from",
    delay = 0,
    isDisabled,
    disabled = isDisabled,
    duration = 0.4,
    from,
    isReadOnly,
    readOnly = isReadOnly,
    rotate = 45,
    to,
    value: valueProp,
    onChange: onChangeProp,
    ...rest
  } = (0, import_core5.omitThemeProps)(mergedProps);
  const [vars, { opacity }] = (0, import_core5.useCreateVars)(
    { opacity: 1, ...styles, ...rest },
    ["opacity"],
    { transform: true }
  );
  const animate = (0, import_motion5.useMotionAnimation)();
  const [value, setValue] = (0, import_use_controllable_state3.useControllableState)({
    defaultValue,
    value: valueProp,
    onChange: onChangeProp
  });
  const css = {
    vars,
    ...styles
  };
  const onClick = (0, import_react4.useCallback)(async () => {
    if (readOnly) return;
    await animate.start({
      opacity: 0,
      rotate: `${rotate}deg`,
      transition: { delay, duration }
    });
    setValue((prev) => prev === "from" ? "to" : "from");
    await animate.start({
      opacity,
      rotate: "0deg",
      transition: { duration }
    });
  }, [readOnly, animate, rotate, duration, delay, setValue, opacity]);
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    import_motion5.motion.button,
    {
      ref,
      type: "button",
      className: (0, import_utils5.cx)("ui-rotate", `ui-rotate--${value}`, className),
      "data-disabled": (0, import_utils5.dataAttr)(disabled),
      "data-readonly": (0, import_utils5.dataAttr)(readOnly),
      "data-value": value,
      animate,
      custom: rotate,
      disabled,
      initial: { opacity, rotate: "0deg" },
      onClick,
      __css: css,
      ...rest,
      children: value === "from" ? from : to
    }
  );
});
Rotate.displayName = "Rotate";
Rotate.__ui__ = "Rotate";

// src/scale-fade.tsx
var import_core6 = require("@yamada-ui/core");
var import_motion6 = require("@yamada-ui/motion");
var import_utils6 = require("@yamada-ui/utils");
var import_jsx_runtime6 = require("react/jsx-runtime");
var variants4 = {
  enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({
    opacity: 1,
    scale: 1,
    transition: (0, import_motion6.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
    ...enter
  }),
  exit: ({
    delay,
    duration,
    exit,
    reverse,
    scale,
    transition,
    transitionEnd
  } = {}) => ({
    opacity: 0,
    transition: (0, import_motion6.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 } },
    ...exit
  })
};
var scaleFadeProps = {
  animate: "enter",
  exit: "exit",
  initial: "exit",
  variants: variants4
};
var ScaleFade = (0, import_motion6.motionForwardRef)(
  (props, ref) => {
    const [style, mergedProps] = (0, import_core6.useComponentStyle)("ScaleFade", props);
    const {
      className,
      delay,
      duration,
      isOpen,
      open = isOpen,
      reverse,
      scale,
      transition,
      transitionEnd,
      unmountOnExit,
      ...rest
    } = (0, import_core6.omitThemeProps)(mergedProps);
    const animate = open || unmountOnExit ? "enter" : "exit";
    const custom = {
      delay,
      duration,
      reverse,
      scale,
      transition,
      transitionEnd
    };
    const resolvedOpen = unmountOnExit ? open && unmountOnExit : true;
    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_motion6.AnimatePresence, { custom, children: resolvedOpen ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      import_motion6.motion.div,
      {
        ref,
        className: (0, import_utils6.cx)("ui-scale-fade", className),
        custom,
        ...scaleFadeProps,
        animate,
        __css: style,
        ...rest
      }
    ) : null });
  }
);
ScaleFade.displayName = "ScaleFade";
ScaleFade.__ui__ = "ScaleFade";

// src/slide.tsx
var import_core7 = require("@yamada-ui/core");
var import_motion7 = require("@yamada-ui/motion");
var import_use_value = require("@yamada-ui/use-value");
var import_utils7 = require("@yamada-ui/utils");
var import_jsx_runtime7 = require("react/jsx-runtime");
var getSlideProps = (placement = "right") => {
  switch (placement) {
    case "right":
      return import_motion7.MOTION_TRANSITION_VARIANTS.slideRight;
    case "left":
      return import_motion7.MOTION_TRANSITION_VARIANTS.slideLeft;
    case "bottom":
      return import_motion7.MOTION_TRANSITION_VARIANTS.slideDown;
    case "top":
      return import_motion7.MOTION_TRANSITION_VARIANTS.slideUp;
  }
};
var variants5 = {
  enter: ({
    delay,
    duration,
    enter,
    placement,
    transition,
    transitionEnd
  } = {}) => ({
    ...getSlideProps(placement).enter,
    transition: (0, import_motion7.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
    ...enter
  }),
  exit: ({
    delay,
    duration,
    exit,
    placement,
    transition,
    transitionEnd
  } = {}) => ({
    ...getSlideProps(placement).exit,
    transition: (0, import_motion7.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
    ...exit
  })
};
var slideProps = {
  animate: "enter",
  exit: "exit",
  initial: "exit",
  variants: variants5
};
var Slide = (0, import_motion7.motionForwardRef)((props, ref) => {
  const [style, mergedProps] = (0, import_core7.useComponentStyle)("Slide", props);
  const {
    className,
    delay,
    duration = { enter: 0.4, exit: 0.3 },
    isOpen,
    open = isOpen,
    placement: _placement,
    transition,
    transitionEnd,
    unmountOnExit,
    __css,
    ...rest
  } = (0, import_core7.omitThemeProps)(mergedProps);
  const animate = open || unmountOnExit ? "enter" : "exit";
  const placement = (0, import_use_value.useValue)(_placement);
  const custom = { delay, duration, placement, transition, transitionEnd };
  const { position } = getSlideProps(placement);
  const resolvedOpen = unmountOnExit ? open && unmountOnExit : true;
  const css = {
    ...style,
    ...__css,
    ...position
  };
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_motion7.AnimatePresence, { custom, children: resolvedOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
    import_motion7.motion.div,
    {
      ref,
      className: (0, import_utils7.cx)("ui-slide", className),
      custom,
      ...slideProps,
      animate,
      __css: css,
      ...rest
    }
  ) : null });
});
Slide.displayName = "Slide";
Slide.__ui__ = "Slide";

// src/slide-fade.tsx
var import_core8 = require("@yamada-ui/core");
var import_motion8 = require("@yamada-ui/motion");
var import_use_value2 = require("@yamada-ui/use-value");
var import_utils8 = require("@yamada-ui/utils");
var import_jsx_runtime8 = require("react/jsx-runtime");
var variants6 = {
  enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({
    opacity: 1,
    transition: (0, import_motion8.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
    x: 0,
    y: 0,
    ...enter
  }),
  exit: ({
    delay,
    duration,
    exit,
    offsetX,
    offsetY,
    reverse,
    transition,
    transitionEnd
  } = {}) => ({
    opacity: 0,
    transition: (0, import_motion8.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
    ...reverse ? { transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit, x: offsetX, y: offsetY } : { transitionEnd: { x: offsetX, y: offsetY, ...transitionEnd == null ? void 0 : transitionEnd.exit } },
    ...exit
  }),
  initial: ({
    delay,
    duration,
    initial,
    offsetX,
    offsetY,
    transition,
    transitionEnd
  }) => ({
    opacity: 0,
    transition: (0, import_motion8.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
    transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
    x: offsetX,
    y: offsetY,
    ...initial
  })
};
var slideFadeProps = {
  animate: "enter",
  exit: "exit",
  initial: "exit",
  variants: variants6
};
var SlideFade = (0, import_motion8.motionForwardRef)(
  (props, ref) => {
    const [style, mergedProps] = (0, import_core8.useComponentStyle)("SlideFade", props);
    const {
      className,
      delay,
      duration,
      isOpen,
      offsetX: _offsetX,
      offsetY: _offsetY,
      open = isOpen,
      reverse,
      transition,
      transitionEnd,
      unmountOnExit,
      ...rest
    } = (0, import_core8.omitThemeProps)(mergedProps);
    const animate = open || unmountOnExit ? "enter" : "exit";
    const offsetX = (0, import_use_value2.useValue)(_offsetX);
    const offsetY = (0, import_use_value2.useValue)(_offsetY);
    const custom = {
      delay,
      duration,
      offsetX,
      offsetY,
      reverse,
      transition,
      transitionEnd
    };
    const resolvedOpen = unmountOnExit ? open && unmountOnExit : true;
    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_motion8.AnimatePresence, { custom, children: resolvedOpen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
      import_motion8.motion.div,
      {
        ref,
        className: (0, import_utils8.cx)("ui-slide-fade", className),
        custom,
        ...slideFadeProps,
        animate,
        __css: style,
        ...rest
      }
    ) : null });
  }
);
SlideFade.displayName = "SlideFade";
SlideFade.__ui__ = "SlideFade";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Airy,
  Collapse,
  Fade,
  Flip,
  Rotate,
  ScaleFade,
  Slide,
  SlideFade,
  collapseProps,
  fadeProps,
  scaleFadeProps,
  slideFadeProps,
  slideProps
});
//# sourceMappingURL=index.js.map