@yamada-ui/react/dist/cjs/components/flip/flip.cjs

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_effect = require('../../utils/effect.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_factory = require('../motion/factory.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_flip_style = require('./flip.style.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/flip/flip.tsx
const flipVariants = {
	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 })
};
const { PropsContext: FlipPropsContext, usePropsContext: useFlipPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("flip", require_flip_style.flipStyle);
/**
* `Flip` is an animation component that alternates between flipping two elements.
*
* @see https://yamada-ui.com/docs/components/flip
*/
const Flip = withProvider(({ defaultValue = "from", delay = 0, disabled, duration = .4, from, orientation = "horizontal", readOnly, to, transition = {}, value: valueProp, onChange, onClick: onClickProp,...rest }) => {
	const [{ height, width }, setRect] = (0, react.useState)({});
	const fromRef = (0, react.useRef)(null);
	const toRef = (0, react.useRef)(null);
	const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
		defaultValue,
		value: valueProp,
		onChange
	});
	const visible = value === "to";
	const style = (0, react.useMemo)(() => ({
		height: height ? `${height}px` : "auto",
		width: width ? `${width}px` : "auto"
	}), [width, height]);
	const onClick = () => {
		if (readOnly) return;
		setValue((prev) => prev === "from" ? "to" : "from");
	};
	require_effect.useSafeLayoutEffect(() => {
		const from$1 = fromRef.current;
		const to$1 = toRef.current;
		if (!from$1 || !to$1) return;
		if (from$1.offsetWidth !== to$1.offsetWidth || from$1.offsetHeight !== to$1.offsetHeight) console.warn(`Flip: "from" element (width: ${from$1.offsetWidth}px, height: ${from$1.offsetHeight}px) does not match "to" element (width: ${to$1.offsetWidth}px, height: ${to$1.offsetHeight}px). Please ensure both elements have the same dimensions.`);
		setRect({
			height: from$1.offsetHeight,
			width: from$1.offsetWidth
		});
	}, [fromRef, toRef]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.motion.button, {
		type: "button",
		style,
		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
		"data-orientation": orientation,
		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
		"data-value": value,
		disabled,
		onClick: (0, require_utils_index.utils_exports.handlerAll)(onClickProp, onClick),
		...rest,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlipFrom, {
			ref: fromRef,
			custom: {
				orientation,
				visible
			},
			transition: {
				delay,
				duration,
				...transition
			},
			children: from
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlipTo, {
			ref: toRef,
			custom: {
				orientation,
				visible
			},
			transition: {
				delay,
				duration,
				...transition
			},
			children: to
		})]
	});
}, "root")();
const FlipFrom = withContext(({ custom,...rest }) => {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.span, {
		animate: "enter",
		custom: {
			ident: "from",
			...custom
		},
		initial: "exit",
		variants: flipVariants,
		...rest
	});
}, ["item", "from"])();
const FlipTo = withContext(({ custom,...rest }) => {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.span, {
		animate: "enter",
		custom: {
			ident: "to",
			...custom
		},
		initial: "exit",
		variants: flipVariants,
		...rest
	});
}, ["item", "to"])();

//#endregion
exports.Flip = Flip;
exports.FlipPropsContext = FlipPropsContext;
exports.useFlipPropsContext = useFlipPropsContext;
//# sourceMappingURL=flip.cjs.map