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

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

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

const resolve = (sx, ownerState)=>{
    const css = sx(ownerState);
    return isArray(css) ? css : [
        css
    ];
};
const useSlot = (args)=>{
    const { a11y, style, ownerState, elementType, classNames, externalSlotProps, additionalProps, externalForwardedProps, shouldForwardComponent = true } = args;
    const getProps = ()=>{
        const props = mergeProps(additionalProps, externalForwardedProps, externalSlotProps, a11y);
        const ref = mergeRefs(additionalProps?.ref, externalForwardedProps?.ref, externalSlotProps?.ref);
        const className = clsx(classNames, props?.className);
        let mergedSx = style;
        if (isFunction(props.sx)) {
            mergedSx = [
                style,
                ...resolve(props.sx, ownerState)
            ];
        } else if (isArray(props.sx)) {
            mergedSx = props.sx.reduce((acc, v)=>{
                if (isFunction(v)) {
                    return [
                        ...acc,
                        ...resolve(v, ownerState)
                    ];
                }
                return [
                    ...acc,
                    v
                ];
            }, [
                style
            ]);
        } else if (isPlainObject(props.sx)) {
            mergedSx = [
                style,
                props.sx
            ];
        }
        return {
            ...props,
            ref,
            className,
            sx: mergedSx
        };
    };
    const Component = useMemo(()=>shouldForwardComponent ? nex[elementType] ?? nex(elementType) : elementType, [
        elementType,
        shouldForwardComponent
    ]);
    return [
        Component,
        getProps
    ];
};

export { useSlot };