@yamada-ui/react/dist/cjs/components/button/button.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_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_merge_css = require('../../core/css/merge-css.cjs');
const require_utils = require('../../core/components/utils.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_use_loading_component = require('../loading/use-loading-component.cjs');
const require_button_style = require('./button.style.cjs');
const require_ripple = require('../ripple/ripple.cjs');
const require_use_ripple = require('../ripple/use-ripple.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/button/button.tsx
const useButtonType = (value) => {
	const buttonRef = (0, react.useRef)(!value);
	return {
		ref: (0, react.useCallback)((node) => {
			if (node) buttonRef.current = node.tagName === "BUTTON";
		}, []),
		type: buttonRef.current ? "button" : void 0
	};
};
const { component, ComponentContext, PropsContext: ButtonPropsContext, useComponentContext, usePropsContext: useButtonPropsContext, withContext } = require_create_component.createComponent("button", require_button_style.buttonStyle);
/**
* `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
*
* @see https://yamada-ui.com/docs/components/button
*/
const Button = withContext(({ ref, as, active, children, disabled, disableRipple, endIcon = null, loading, loadingIcon = "oval", loadingMessage, loadingPlacement = "start", startIcon = null, iconProps, loadingProps,...rest }) => {
	const trulyDisabled = disabled || loading;
	const { ref: buttonRef, type } = useButtonType(as);
	const { onClick,...rippleProps } = require_use_ripple.useRipple({
		...rest,
		disabled: disableRipple || trulyDisabled
	});
	const startLoading = loading && loadingPlacement === "start";
	const endLoading = loading && loadingPlacement === "end";
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
		value: (0, react.useMemo)(() => ({
			endIcon,
			loadingIcon,
			loadingMessage,
			startIcon,
			iconProps
		}), [
			loadingIcon,
			loadingMessage,
			startIcon,
			endIcon,
			iconProps
		]),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.button, {
			ref: require_ref.mergeRefs(ref, buttonRef),
			as,
			type,
			"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
			"data-loading": (0, require_utils_index.utils_exports.dataAttr)(loading),
			disabled: trulyDisabled,
			...rest,
			onClick,
			children: [
				startLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonStartLoading, { ...loadingProps }) : null,
				loading ? loadingMessage || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.span, {
					opacity: 0,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonContent, { children })
				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonContent, { children }),
				endLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonEndLoading, { ...loadingProps }) : null,
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ripple.Ripple, { ...rippleProps })
			]
		})
	});
})();
const ButtonContent = component(({ children }) => {
	const { endIcon, startIcon, iconProps } = useComponentContext();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
		startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonStartIcon, {
			...iconProps,
			children: startIcon
		}) : null,
		children,
		endIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonEndIcon, {
			...iconProps,
			children: endIcon
		}) : null
	] });
}, {
	name: "ButtonContent",
	className: require_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "content"))
})();
const ButtonLoading = component((props) => {
	const { loadingIcon, loadingMessage } = useComponentContext();
	const css = (0, react.useMemo)(() => ({ position: loadingMessage ? "relative" : "absolute" }), [loadingMessage]);
	if (require_use_loading_component.isLoadingScheme(loadingIcon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_loading_component.getLoadingComponent(loadingIcon), {
		color: "currentColor",
		...props,
		css: require_merge_css.mergeCSS(css, props.css)
	});
	if ((0, react.isValidElement)(loadingIcon)) return (0, react.cloneElement)(loadingIcon, {
		...props,
		...loadingIcon.props,
		css: require_merge_css.mergeCSS(css, props.css, loadingIcon.props.css)
	});
	return null;
}, {
	name: "ButtonLoading",
	className: require_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "loading"))
})();
const ButtonStartLoading = component(ButtonLoading, {
	name: "ButtonStartLoading",
	className: require_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "loading", "start"))
})();
const ButtonEndLoading = component(ButtonLoading, {
	name: "ButtonEndLoading",
	className: require_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "loading", "end"))
})();
const ButtonIcon = component(({ children,...rest }) => {
	if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, {
		"aria-hidden": true,
		role: "img",
		...rest,
		...children.props
	});
	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
}, {
	name: "ButtonIcon",
	className: require_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "icon"))
})();
const ButtonStartIcon = component(ButtonIcon, {
	name: "ButtonStartIcon",
	className: require_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "icon", "start"))
})();
const ButtonEndIcon = component(ButtonIcon, {
	name: "ButtonEndIcon",
	className: require_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "icon", "end"))
})();

//#endregion
exports.Button = Button;
exports.ButtonPropsContext = ButtonPropsContext;
exports.useButtonPropsContext = useButtonPropsContext;
//# sourceMappingURL=button.cjs.map