@nex-ui/react/dist/cjs/components/buttonBase/ButtonBase.cjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var hooks = require('@nex-ui/hooks');
var react = require('react');
var utils = require('@nex-ui/utils');
var system = require('@nex-ui/system');
var useSlot = require('../utils/useSlot.cjs');

const useAriaProps = (props)=>{
    const { as, disabled, role, href, type, 'aria-disabled': ariaDisabled, tabIndex } = props;
    return react.useMemo(()=>{
        if (utils.isFunction(as)) {
            return {};
        }
        if (as !== 'button') {
            return {
                role: role ?? (as === 'a' && href ? undefined : 'button'),
                tabIndex: disabled ? -1 : tabIndex,
                'aria-disabled': ariaDisabled ?? (disabled || undefined)
            };
        }
        return {
            type,
            disabled,
            tabIndex: disabled ? -1 : tabIndex
        };
    }, [
        as,
        type,
        disabled,
        tabIndex,
        role,
        href,
        ariaDisabled
    ]);
};
const recipe = system.defineRecipe({
    base: {
        p: 0,
        m: 0,
        outline: 'none',
        background: 'none',
        border: 'none',
        textDecoration: 'none',
        userSelect: 'none',
        cursor: 'pointer',
        boxSizing: 'border-box',
        WebkitTapHighlightColor: 'transparent'
    }
});
const style = recipe();
const ButtonBase = (inProps)=>{
    const props = inProps;
    const { as, children, disabled, type = 'button', tabIndex = 0, onClick, onKeyDown, onKeyUp, ...remainingProps } = props;
    const rootElement = as !== undefined ? as : typeof props.href === 'string' && props.href ? 'a' : 'button';
    const { focusVisible, focusProps } = hooks.useFocusRing();
    const handleKeyDown = hooks.useEvent((event)=>{
        // Limit the repeated triggering of the click event when the Enter key is pressed.
        if (disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        if (focusVisible && event.target === event.currentTarget && (event.key === ' ' || event.key === 'Enter') && (event.currentTarget.tagName === 'BUTTON' || event.currentTarget.tagName === 'A')) {
            event.preventDefault();
        }
        onKeyDown?.(event);
    });
    const handleKeyUp = hooks.useEvent((event)=>{
        if (disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        if (focusVisible && event.target === event.currentTarget && (event.key === ' ' || event.key === 'Enter')) {
            event.currentTarget.click();
        }
        onKeyUp?.(event);
    });
    const handleClick = hooks.useEvent((event)=>{
        if (disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        onClick?.(event);
    });
    const ariaProps = useAriaProps({
        ...props,
        type,
        tabIndex,
        as: rootElement
    });
    const [ButtonRoot, getButtonRootProps] = useSlot.useSlot({
        style,
        elementType: 'button',
        externalForwardedProps: remainingProps,
        additionalProps: {
            as: rootElement,
            ...focusProps
        },
        a11y: {
            ...ariaProps,
            onKeyUp: handleKeyUp,
            onKeyDown: handleKeyDown,
            onClick: handleClick
        },
        dataAttrs: {
            disabled,
            focusVisible: focusVisible || undefined
        }
    });
    return /*#__PURE__*/ jsxRuntime.jsx(ButtonRoot, {
        ...getButtonRootProps(),
        children: children
    });
};
ButtonBase.displayName = 'ButtonBase';

exports.ButtonBase = ButtonBase;