@noema/motif/dist/motif.d.ts

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 { CSSProperties } from '@vanilla-extract/css';
import { ComponentPropsWithRef, JSX } from 'react';
import { CSSProps, MotifStyle } from './motif-style.js';
export type Elements = keyof JSX.IntrinsicElements;
export type SprinklesFn<Props = any> = {
    (props: Props): string;
    properties: Set<string>;
};
export type SprinklesProps<S> = S extends SprinklesFn<infer P> ? P : never;
export type CSSPropertiesSubset<P extends CSSProps> = {
    [K in P]?: K extends keyof CSSProperties ? CSSProperties[K] : never;
};
export type Shorthands<SH extends string> = {
    [K in SH]?: string | number | undefined | null;
};
export type MotifProps<E extends Elements, S extends SprinklesFn, P extends CSSProps = never, SH extends string = never> = ComponentPropsWithRef<E> & {
    inlineVars?: Record<string, string | undefined | null>;
} & CSSPropertiesSubset<P> & Shorthands<SH> & SprinklesProps<S>;
export declare function motif<E extends Elements, S extends SprinklesFn, P extends CSSProps, SH extends string = string>(element: E, sprinkles: S, config: MotifStyle<P, SH>): (props: MotifProps<E, S, P, SH>) => import("react/jsx-runtime").JSX.Element;