@yamada-ui/transitions/dist/chunk-GDH5X5LN.mjs

Yamada UI transitions components

"use client"

// src/rotate.tsx
import {
  omitThemeProps,
  useComponentStyle,
  useCreateVars
} from "@yamada-ui/core";
import { motion, motionForwardRef, useMotionAnimation } from "@yamada-ui/motion";
import { useControllableState } from "@yamada-ui/use-controllable-state";
import { cx, dataAttr } from "@yamada-ui/utils";
import { useCallback } from "react";
import { jsx } from "react/jsx-runtime";
var Rotate = motionForwardRef((props, ref) => {
  const [styles, mergedProps] = 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
  } = omitThemeProps(mergedProps);
  const [vars, { opacity }] = useCreateVars(
    { opacity: 1, ...styles, ...rest },
    ["opacity"],
    { transform: true }
  );
  const animate = useMotionAnimation();
  const [value, setValue] = useControllableState({
    defaultValue,
    value: valueProp,
    onChange: onChangeProp
  });
  const css = {
    vars,
    ...styles
  };
  const onClick = 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__ */ jsx(
    motion.button,
    {
      ref,
      type: "button",
      className: cx("ui-rotate", `ui-rotate--${value}`, className),
      "data-disabled": dataAttr(disabled),
      "data-readonly": 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";

export {
  Rotate
};
//# sourceMappingURL=chunk-GDH5X5LN.mjs.map