@nex-ui/react/dist/esm/components/utils/useSlot.mjs

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

import clsx from 'clsx';
import { mergeProps, mergeRefs, kebabCase } from '@nex-ui/utils';
import { useMemo } from 'react';
import { nex } from '@nex-ui/styled';

const useSlot = (args)=>{
    const { a11y, style, elementType, classNames, externalSlotProps, additionalProps, externalForwardedProps, shouldForwardComponent = true, dataAttrs = {} } = args;
    const getProps = ()=>{
        const propsDataAttrs = generateDataAttrs(dataAttrs);
        const props = mergeProps(propsDataAttrs, additionalProps, externalForwardedProps, externalSlotProps, a11y);
        const ref = mergeRefs(additionalProps?.ref, externalForwardedProps?.ref, externalSlotProps?.ref);
        const className = clsx(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 = useMemo(()=>shouldForwardComponent ? nex[elementType] ?? nex(elementType) : elementType, [
        elementType,
        shouldForwardComponent
    ]);
    return [
        Component,
        getProps
    ];
};
function generateDataAttrs(dataAttrs) {
    return Object.entries(dataAttrs).reduce((acc, [key, value])=>{
        if (value !== undefined) {
            acc[`data-${kebabCase(key)}`] = value;
        }
        return acc;
    }, {});
}

export { useSlot };