@yamada-ui/transitions/dist/rotate.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/rotate.tsx
var rotate_exports = {};
__export(rotate_exports, {
  Rotate: () => Rotate
});
module.exports = __toCommonJS(rotate_exports);
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 Rotate = (0, import_motion.motionForwardRef)((props, ref) => {
  const [styles, mergedProps] = (0, import_core.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_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,
      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_runtime.jsx)(
    import_motion.motion.button,
    {
      ref,
      type: "button",
      className: (0, import_utils.cx)("ui-rotate", `ui-rotate--${value}`, className),
      "data-disabled": (0, import_utils.dataAttr)(disabled),
      "data-readonly": (0, import_utils.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";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Rotate
});
//# sourceMappingURL=rotate.js.map