@nex-ui/styled/dist/cjs/nex.cjs

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

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('@emotion/react');
var utils = require('@nex-ui/utils');
var system = require('@nex-ui/system');
var serialize = require('@emotion/serialize');
var utils$2 = require('@emotion/utils');
var utils$1 = require('./utils.cjs');
var tags = require('./tags.cjs');
var Insertion = require('./Insertion.cjs');

const createNexComponent = (tag)=>{
    if (utils.__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 = react.withEmotionCache(({ sx, ...props }, cache, ref)=>{
        const sys = system.useSystem();
        const FinalTag = props.as || tag;
        const finalShouldForwardProp = utils$1.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__*/ jsxRuntime.jsx(FinalTag, {
                ...newProps
            });
        }
        const cssProp = sys.css(sx);
        let { className = '' } = props;
        const registeredStyles = Array.isArray(cssProp) ? cssProp : [
            cssProp
        ];
        if (typeof props.className === 'string') {
            className = utils$2.getRegisteredStyles(cache.registered, registeredStyles, props.className);
        } else if (props.className != null) {
            /* istanbul ignore next */ className = `${props.className} `;
        }
        const serialized = serialize.serializeStyles(registeredStyles, undefined, {});
        className += `${cache.key}-${serialized.name}`;
        newProps.className = className.trim();
        return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
            children: [
                /*#__PURE__*/ jsxRuntime.jsx(Insertion.Insertion, {
                    cache: cache,
                    serialized: serialized,
                    isStringTag: typeof FinalTag === 'string'
                }),
                /*#__PURE__*/ jsxRuntime.jsx(FinalTag, {
                    ...newProps
                })
            ]
        });
    });
    Styled.displayName = 'NexUIComponent';
    return Styled;
};
const nex = createNexComponent;
tags.tags.forEach((tag)=>{
    nex[tag] = nex(tag);
});

exports.nex = nex;