@kubit-ui-web/react-components/dist/cjs/components/button/buttonStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ButtonStandAlone = exports.ButtonStandAloneStructure = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const aria_1 = require("../../utils/aria/aria");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const loader_1 = require("../loader/loader");
const button_styled_1 = require("./button.styled");
const state_1 = require("./types/state");
const ButtonStandAloneStructure = (props) => {
    const getHeightSize = () => props.sizeStyles?.icon?.height ?? props.styles?.[props.state]?.icon?.height;
    const getWidthSize = () => props.sizeStyles?.icon?.width ?? props.styles?.[props.state]?.icon?.width;
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.loader && props.loading && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof props.loader === 'object' && 'variant' in props.loader ? ((0, jsx_runtime_1.jsx)(button_styled_1.ButtonLoaderStyled, { children: (0, jsx_runtime_1.jsx)(loader_1.Loader, { visible: props.loading, width: getWidthSize(), ...props.loader }) })) : ((0, jsx_runtime_1.jsx)(button_styled_1.ButtonLoaderStyled, { children: props.loader })) })), !props.loading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { linearIcon: true, color: props.styles?.[props.state]?.icon?.color, height: getHeightSize(), width: getWidthSize(), ...props.icon }), props.children] }))] }));
};
exports.ButtonStandAloneStructure = ButtonStandAloneStructure;
const ButtonStandAloneComponent = ({ dataTestId = 'button', ...props }, ref) => {
    const ariaProps = (0, aria_1.pickAriaProps)(props);
    const disabled = props.state === state_1.ButtonStateType.DISABLED || props.state === state_1.ButtonStateType.LOADING;
    return ((0, jsx_runtime_1.jsx)(button_styled_1.ButtonStyled, { ...ariaProps, ref: ref, "$fullWidth": props.fullWidth, "$ghostText": react_1.default.Children.toArray(props.children)[0]
            ? react_1.default.Children.toArray(props.children)[0]?.toString()
            : '', "$iconPosition": props.iconPosition, "$loading": props.loading, "$sizeStyles": props.sizeStyles, "$state": props.state, "$styles": props.styles, alignText: props.alignText, "data-testid": dataTestId, disabled: disabled, form: props.form, id: props.id, minWidth: props.minWidth, role: props.role, tabIndex: props.tabIndex, title: props.title, type: props.type, onClick: props.onClick, children: (0, jsx_runtime_1.jsx)(exports.ButtonStandAloneStructure, { icon: props.icon, loader: props.loader, loading: props.loading, sizeStyles: props.sizeStyles, state: props.state, styles: props.styles, children: props.children }) }));
};
/**
 * Represents the standalone button component.
 * @see {@link https://kubit.es/standalone-components/button/button-standalone/}
 *
 * @function ButtonStandAlone
 * @category StandAlone Components
 * @param {React.PropsWithChildren<IButtonStandAlone>} props - The props for the component.
 * @param {React.ForwardedRef<HTMLButtonElement>} ref - The ref for the component.
 * @returns {JSX.Element} - The JSX element representing the button component.
 *
 */
exports.ButtonStandAlone = react_1.default.forwardRef(ButtonStandAloneComponent);
//# sourceMappingURL=buttonStandAlone.js.map