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

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

'use strict';

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

const createStyled = (tag)=>{
    if (utils.__DEV__ && tag === undefined) {
        throw new Error('[Nex UI] styled: You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
    }
    const defaultShouldForwardProp = utils$1.getDefaultShouldForwardProp(tag);
    const shouldUseAs = !defaultShouldForwardProp('as');
    return (...args)=>{
        const styles = args.slice();
        const Styled = react.withEmotionCache(({ sx, ...props }, cache, ref)=>{
            const FinalTag = shouldUseAs && props.as || tag;
            const sys = system.useSystem();
            const mergedSx = sx ? [
                ...styles,
                sx
            ] : [
                ...styles
            ];
            const finalShouldForwardProp = shouldUseAs ? utils$1.getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
            const newProps = ref ? {
                ref
            } : {};
            utils.forEach(props, (prop, key)=>{
                if (!(shouldUseAs && key === 'as') && finalShouldForwardProp(key)) {
                    newProps[key] = prop;
                }
            });
            if (mergedSx.length === 0) {
                return /*#__PURE__*/ jsxRuntime.jsx(FinalTag, {
                    ...newProps
                });
            }
            let className = '';
            let registeredStyles = [];
            if (typeof props.className === 'string') {
                className = utils$2.getRegisteredStyles(cache.registered, registeredStyles, props.className);
            } else if (props.className != null) {
                className = `${props.className} `;
            }
            // TODO
            const resolveSx = (arg)=>{
                return utils.map(arg, (v)=>{
                    if (utils.isFunction(v)) {
                        return v(props);
                    }
                    if (utils.isArray(v)) {
                        return resolveSx(v);
                    }
                    return v;
                });
            };
            const cssProp = sys.css(resolveSx(mergedSx));
            registeredStyles = [
                ...registeredStyles,
                cssProp
            ];
            const serialized = serialize.serializeStyles(registeredStyles, cache.registered, props);
            className += `${cache.key}-${serialized.name}`;
            newProps.className = className;
            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 = 'NexUIStyledComponent';
        return Styled;
    };
};
// @ts-ignore
const styled = createStyled.bind();
tags.tags.forEach((tag)=>{
    // @ts-ignore
    styled[tag] = styled(tag);
});

exports.styled = styled;