@nex-ui/react/dist/cjs/components/utils/useSlot.cjs

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

'use strict';

var clsx = require('clsx');
var utils = require('@nex-ui/utils');
var react = require('react');
var styled = require('@nex-ui/styled');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var clsx__default = /*#__PURE__*/_interopDefault(clsx);

const useSlot = (args)=>{
    const { a11y, style, elementType, classNames, externalSlotProps, additionalProps, externalForwardedProps, shouldForwardComponent = true, dataAttrs = {} } = args;
    const getProps = ()=>{
        const propsDataAttrs = generateDataAttrs(dataAttrs);
        const props = utils.mergeProps(propsDataAttrs, additionalProps, externalForwardedProps, externalSlotProps, a11y);
        const ref = utils.mergeRefs(additionalProps?.ref, externalForwardedProps?.ref, externalSlotProps?.ref);
        const className = clsx__default.default(classNames, props?.className);
        let mergedSx = null;
        if (props.sx && style) {
            mergedSx = [
                style,
                props.sx
            ];
        } else if (style) {
            mergedSx = style;
        } else if (props.sx) {
            mergedSx = props.sx;
        }
        return {
            ...props,
            ref,
            className: className === '' ? undefined : className,
            sx: mergedSx
        };
    };
    const Component = react.useMemo(()=>shouldForwardComponent ? styled.nex[elementType] ?? styled.nex(elementType) : elementType, [
        elementType,
        shouldForwardComponent
    ]);
    return [
        Component,
        getProps
    ];
};
function generateDataAttrs(dataAttrs) {
    return Object.entries(dataAttrs).reduce((acc, [key, value])=>{
        if (value !== undefined) {
            acc[`data-${utils.kebabCase(key)}`] = value;
        }
        return acc;
    }, {});
}

exports.useSlot = useSlot;