@nex-ui/styled/dist/esm/nex.mjs

Styled API for creating atomic, theme-aware component styling.

"use client";
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { withEmotionCache } from '@emotion/react';
import { __DEV__ } from '@nex-ui/utils';
import { useSystem } from '@nex-ui/system';
import { serializeStyles } from '@emotion/serialize';
import { getRegisteredStyles } from '@emotion/utils';
import { getDefaultShouldForwardProp } from './utils.mjs';
import { tags } from './tags.mjs';
import { Insertion } from './Insertion.mjs';

const createNexComponent = (tag)=>{
    if (__DEV__ && tag === undefined) {
        throw new Error('[Nex UI] nex: You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
    }
    const Styled = withEmotionCache(({ sx, ...props }, cache, ref)=>{
        const sys = useSystem();
        const FinalTag = props.as || tag;
        const finalShouldForwardProp = getDefaultShouldForwardProp(FinalTag);
        const newProps = ref ? {
            ref
        } : {};
        for(const key in props){
            if (!Object.hasOwn(props, key)) continue;
            const prop = props[key];
            if (!(key === 'as') && finalShouldForwardProp(key)) {
                newProps[key] = prop;
            }
        }
        if (sx == null) {
            return /*#__PURE__*/ jsx(FinalTag, {
                ...newProps
            });
        }
        const cssProp = sys.css(sx);
        let { className = '' } = props;
        const registeredStyles = Array.isArray(cssProp) ? cssProp : [
            cssProp
        ];
        if (typeof props.className === 'string') {
            className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
        } else if (props.className != null) {
            /* istanbul ignore next */ className = `${props.className} `;
        }
        const serialized = serializeStyles(registeredStyles, undefined, {});
        className += `${cache.key}-${serialized.name}`;
        newProps.className = className.trim();
        return /*#__PURE__*/ jsxs(Fragment, {
            children: [
                /*#__PURE__*/ jsx(Insertion, {
                    cache: cache,
                    serialized: serialized,
                    isStringTag: typeof FinalTag === 'string'
                }),
                /*#__PURE__*/ jsx(FinalTag, {
                    ...newProps
                })
            ]
        });
    });
    Styled.displayName = 'NexUIComponent';
    return Styled;
};
const nex = createNexComponent;
tags.forEach((tag)=>{
    nex[tag] = nex(tag);
});

export { nex };