@yamada-ui/react/dist/esm/components/rotate/rotate.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { useInjectVarsIntoCss, useInjectVarsIntoProps } from "../../core/css/use-inject-vars.js";
import { createComponent } from "../../core/components/create-component.js";
import { motion as motion$1 } from "../motion/factory.js";
import { useControllableState } from "../../hooks/use-controllable-state/index.js";
import { rotateStyle } from "./rotate.style.js";
import { useCallback } from "react";
import { jsx } from "react/jsx-runtime";
import { useAnimation } from "motion/react";

//#region src/components/rotate/rotate.tsx
const { PropsContext: RotatePropsContext, usePropsContext: useRotatePropsContext, withContext } = createComponent("rotate", rotateStyle);
/**
* `Rotate` is an animation component that alternately rotates two elements as they switch.
*
* @see https://yamada-ui.com/docs/components/rotate
*/
const Rotate = withContext(({ defaultValue = "from", delay = 0, disabled, duration = .4, from, readOnly, rotate = 45, to, value: valueProp, onChange, onClick: onClickProp,...rest }) => {
	const opacity = "var(--opacity)";
	const animate = useAnimation();
	const [value, setValue] = useControllableState({
		defaultValue,
		value: valueProp,
		onChange
	});
	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: "var(--opacity)",
			rotate: "0deg",
			transition: { duration }
		});
	}, [
		readOnly,
		animate,
		rotate,
		duration,
		delay,
		setValue
	]);
	return /* @__PURE__ */ jsx(motion$1.button, {
		type: "button",
		"data-disabled": (0, utils_exports.dataAttr)(disabled),
		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
		"data-value": value,
		animate,
		custom: { rotate },
		disabled,
		initial: {
			opacity,
			rotate: "0deg"
		},
		onClick: (0, utils_exports.handlerAll)(onClickProp, onClick),
		...rest,
		children: value === "from" ? from : to
	});
})(void 0, (props) => {
	const css = useInjectVarsIntoCss(props.css, { opacity: "opacity" });
	return {
		...useInjectVarsIntoProps(props, { opacity: "opacity" }),
		css,
		opacity: "{opacity}"
	};
});

//#endregion
export { Rotate, RotatePropsContext, useRotatePropsContext };
//# sourceMappingURL=rotate.js.map