@reusable-ui/button/dist/Button.js

A button component for initiating an action.

// react:
import { 
// react:
default as React, } from 'react';
// cssfn:
import { 
// checks if a certain css feature is supported by the running browser:
supportsHasPseudoClass, } from '@cssfn/core'; // writes css in javascript
import { 
// style sheets:
dynamicStyleSheet, } from '@cssfn/cssfn-react'; // writes css in react hook
// reusable-ui core:
import { 
// react helper hooks:
useMergeClasses, useOrientationable, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { 
// react components:
ActionControl, } from '@reusable-ui/action-control'; // a base component
// internals:
import { 
// defaults:
defaultOrientationableOptions, } from './defaults.js';
import { useSemanticButton, } from './capabilities/SemanticButton.js';
import { useButtonVariant, } from './variants/ButtonVariant.js';
// styles:
export const useButtonStyleSheet = dynamicStyleSheet(() => import(/* webpackPrefetch: true */ './styles/styles.js'), {
    id: '7rehb2h20q',
    lazyCsr: supportsHasPseudoClass(), // dealing with browsers that don't support the :has() selector
});
const Button = (props) => {
    // styles:
    const styleSheet = useButtonStyleSheet();
    // variants:
    const orientationableVariant = useOrientationable(props, defaultOrientationableOptions);
    const buttonVariant = useButtonVariant(props);
    // rest props:
    const { 
    // variants:
    orientation: _orientation, // remove
    buttonStyle: buttonStyle, // use
    // accessibilities:
    label, ...restActionControlProps } = props;
    // fn props:
    const { semanticTag, semanticRole, tag, role, type, } = useSemanticButton(props);
    // classes:
    const variantClasses = useMergeClasses(
    // preserves the original `variantClasses`:
    props.variantClasses, 
    // variants:
    orientationableVariant.class, buttonVariant.class);
    // jsx:
    return (React.createElement(ActionControl, { ...restActionControlProps, 
        // semantics:
        semanticTag: semanticTag, semanticRole: semanticRole, tag: tag, role: role, "aria-orientation": props['aria-orientation'] ?? orientationableVariant['aria-orientation'], "aria-label": props['aria-label'] ?? label, 
        // variants:
        mild: props.mild ?? (((buttonStyle === 'link') || (buttonStyle === 'ghost'))
            ?
                'inherit' // <Parent> dependent of <Link> | <Ghost>
            :
                false // bold <Button>
        ), 
        // classes:
        mainClass: props.mainClass ?? styleSheet.main, variantClasses: variantClasses, ...{
            // actions:
            type,
        } }));
};
export { Button, Button as default, };