@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
80 lines (76 loc) • 2.9 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_use_inject_vars = require('../../core/css/use-inject-vars.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_airy_style = require('./airy.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);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);
//#region src/components/airy/airy.tsx
const { PropsContext: AiryPropsContext, usePropsContext: useAiryPropsContext, withContext } = require_create_component.createComponent("airy", require_airy_style.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 = (0, motion_react.useAnimation)();
const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
defaultValue,
value: valueProp,
onChange
});
const onClick = (0, react.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__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.button, {
type: "button",
"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
"data-value": value,
animate,
disabled,
initial: { opacity },
onClick: (0, require_utils_index.utils_exports.handlerAll)(onClickProp, onClick),
...rest,
children: value === "from" ? from : to
});
})(void 0, (props) => {
const css = require_use_inject_vars.useInjectVarsIntoCss(props.css, { opacity: "opacity" });
return {
...require_use_inject_vars.useInjectVarsIntoProps(props, { opacity: "opacity" }),
css,
opacity: "{opacity}"
};
});
//#endregion
exports.Airy = Airy;
exports.AiryPropsContext = AiryPropsContext;
exports.useAiryPropsContext = useAiryPropsContext;
//# sourceMappingURL=airy.cjs.map