@noema/motif/dist/motif.js

A type-safe styling library for React components built on top of [Vanilla Extract](https://vanilla-extract.style/). `@noema/motif` allows you to create styled components with consistent theme-aware props that cleanly separate styling from component logic.

import { jsx as _jsx } from "react/jsx-runtime";
import { assignInlineVars } from '@vanilla-extract/dynamic';
import clsx from 'clsx';
import { useMemo } from 'react';
import { categorizeProps, resolveValue } from './utils.js';
export function motif(element, sprinkles, config) {
    return (props) => {
        const { className, style, inlineVars, ...allProps } = props;
        const Comp = element;
        const processedProps = useMemo(() => {
            const { sprinkled, primitive, shorthands, rest } = categorizeProps(allProps, sprinkles.properties, config);
            const vars = {};
            const styleClassNames = [];
            for (const [key, value] of Object.entries(primitive)) {
                if (value === null) {
                    continue;
                }
                const cssVar = config.refs[key];
                vars[cssVar] = resolveValue(key, value);
                styleClassNames.push(config.classNames[key]);
            }
            for (const [shorthand, value] of Object.entries(shorthands)) {
                if (value === null) {
                    continue;
                }
                const properties = config.shorthands?.[shorthand] || [];
                for (const prop of properties) {
                    if (prop in config.refs) {
                        const cssVar = config.refs[prop];
                        vars[cssVar] = resolveValue(prop, value);
                        styleClassNames.push(config.classNames[prop]);
                    }
                }
            }
            return {
                style: {
                    ...style,
                    ...assignInlineVars(inlineVars ?? {}),
                    ...assignInlineVars(vars),
                },
                className: clsx(config.baseClassName, sprinkles(sprinkled), styleClassNames, className),
                ...rest,
            };
        }, [allProps, className, style, inlineVars]);
        return _jsx(Comp, { ...processedProps });
    };
}