@yamada-ui/react/dist/esm/components/airy/airy.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 { airyStyle } from "./airy.style.js";
import { useCallback } from "react";
import { jsx } from "react/jsx-runtime";
import { useAnimation } from "motion/react";

//#region src/components/airy/airy.tsx
const { PropsContext: AiryPropsContext, usePropsContext: useAiryPropsContext, withContext } = createComponent("airy", airyStyle);
/**
* `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
*
* @see https://yamada-ui.com/docs/components/airy
*/
const Airy = withContext(({ defaultValue = "from", delay = 0, disabled, duration = .2, from, readOnly, 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,
			transition: {
				delay,
				duration
			}
		});
		setValue((prev) => prev === "from" ? "to" : "from");
		await animate.start({
			opacity,
			transition: { duration }
		});
	}, [
		animate,
		setValue,
		readOnly,
		opacity,
		duration,
		delay
	]);
	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,
		disabled,
		initial: { opacity },
		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 { Airy, AiryPropsContext, useAiryPropsContext };
//# sourceMappingURL=airy.js.map