@fidely-ui/react/dist/components/button/button.js

Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps

'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ark } from '@ark-ui/react/factory';
import { styled } from '@fidely-ui/styled-system/jsx';
import { button } from '@fidely-ui/styled-system/recipes';
import { dataAttr } from '../../utils/attr';
import { Loader } from '../loader';
const StyledButton = styled(ark.button, button);
export const Button = React.forwardRef(function Button(props, ref) {
    const { isLoading, loadingText, spinnerPlacement = 'start', children, asChild, disabled, spinner, ...rest } = props;
    const LoaderComp = () => _jsx(Loader, { spinner: spinner });
    const checkDisabled = isLoading || disabled;
    const buttonContent = (_jsxs(_Fragment, { children: [isLoading && spinnerPlacement === 'start' && !loadingText && (_jsx(LoaderComp, {})), isLoading && loadingText ? loadingText : children, isLoading && spinnerPlacement === 'end' && !loadingText && (_jsx(LoaderComp, {}))] }));
    if (asChild) {
        return (_jsx(StyledButton, { asChild: true, ref: ref, disabled: checkDisabled, "data-disabled": dataAttr(disabled), "data-loading": dataAttr(isLoading), ...rest, children: children }));
    }
    return (_jsx(StyledButton, { ref: ref, disabled: checkDisabled, "data-disabled": dataAttr(disabled), "data-loading": dataAttr(isLoading), ...rest, children: buttonContent }));
});
Button.displayName = 'Button';