@pandacss/node 0.0.0-dev-20230119005608 → 0.0.0-dev-20230119080852

package/dist/index.d.ts

@@ -4,7 +4,6 @@ export { discardDuplicate } from '@pandacss/core';
 import * as _pandacss_types_dist_config from '@pandacss/types/dist/config';
 import * as ts_morph from 'ts-morph';
 import * as _pandacss_types_dist_shared from '@pandacss/types/dist/shared';
-import * as _pandacss_types_dist_recipe from '@pandacss/types/dist/recipe';
 import * as _pandacss_types from '@pandacss/types';
 import { Dict, RecipeConfig, PatternConfig, Config } from '@pandacss/types';
 import * as _pandacss_config from '@pandacss/config';
@@ -37,7 +36,7 @@ declare function createContext(conf: LoadConfigResult, io?: IO): {
         semanticTokens?: _pandacss_types.SemanticTokens<string> | undefined;
         textStyles?: _pandacss_types.TextStyles | undefined;
         layerStyles?: _pandacss_types.LayerStyles | undefined;
-        recipes?: Record<string, RecipeConfig<_pandacss_types_dist_recipe.TVariants>> | undefined;
+        recipes?: Record<string, RecipeConfig<_pandacss_types.RecipeVariantRecord>> | undefined;
     };
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config<_pandacss_types.Conditions, Dict<any>, _pandacss_types.Tokens>, "include" | "outdir" | "cwd">>;
     configPath: string;
@@ -97,7 +96,7 @@ declare function createContext(conf: LoadConfigResult, io?: IO): {
         css: string;
         file: string;
     } | undefined;
-    getGlobalCss: () => string | undefined;
+    getGlobalCss: () => string;
     getStaticCss: () => string | undefined;
     patterns: Record<string, PatternConfig>;
     hasPatterns: boolean;
@@ -119,7 +118,7 @@ declare function createContext(conf: LoadConfigResult, io?: IO): {
         jsxName: string;
         blocklistType: string;
     };
-    recipes: Record<string, RecipeConfig<_pandacss_types_dist_recipe.TVariants>>;
+    recipes: Record<string, RecipeConfig<_pandacss_types.RecipeVariantRecord>>;
     getRecipe: (name: string) => RecipeConfig | undefined;
     hasRecipes: boolean;
     getRecipeDetails: () => {
@@ -189,7 +188,7 @@ declare class Builder {
             semanticTokens?: _pandacss_types.SemanticTokens<string> | undefined;
             textStyles?: _pandacss_types.TextStyles | undefined;
             layerStyles?: _pandacss_types.LayerStyles | undefined;
-            recipes?: Record<string, _pandacss_types.RecipeConfig<_pandacss_types_dist_recipe.TVariants>> | undefined;
+            recipes?: Record<string, _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>> | undefined;
         };
         config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config<_pandacss_types.Conditions, _pandacss_types.Dict<any>, _pandacss_types.Tokens>, "include" | "outdir" | "cwd">>;
         configPath: string;
@@ -249,7 +248,7 @@ declare class Builder {
             css: string;
             file: string;
         } | undefined;
-        getGlobalCss: () => string | undefined;
+        getGlobalCss: () => string;
         getStaticCss: () => string | undefined;
         patterns: Record<string, _pandacss_types.PatternConfig>;
         hasPatterns: boolean;
@@ -271,8 +270,8 @@ declare class Builder {
             jsxName: string;
             blocklistType: string;
         };
-        recipes: Record<string, _pandacss_types.RecipeConfig<_pandacss_types_dist_recipe.TVariants>>;
-        getRecipe: (name: string) => _pandacss_types.RecipeConfig<_pandacss_types_dist_recipe.TVariants> | undefined;
+        recipes: Record<string, _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>>;
+        getRecipe: (name: string) => _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord> | undefined;
         hasRecipes: boolean;
         getRecipeDetails: () => {
             [x: string]: {
@@ -333,7 +332,7 @@ declare function loadConfigAndCreateContext(options?: {
         semanticTokens?: _pandacss_types.SemanticTokens<string> | undefined;
         textStyles?: _pandacss_types.TextStyles | undefined;
         layerStyles?: _pandacss_types.LayerStyles | undefined;
-        recipes?: Record<string, _pandacss_types.RecipeConfig<_pandacss_types_dist_recipe.TVariants>> | undefined;
+        recipes?: Record<string, _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>> | undefined;
     };
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<Config<_pandacss_types.Conditions, _pandacss_types.Dict<any>, _pandacss_types.Tokens>, "include" | "outdir" | "cwd">>;
     configPath: string;
@@ -393,7 +392,7 @@ declare function loadConfigAndCreateContext(options?: {
         css: string;
         file: string;
     } | undefined;
-    getGlobalCss: () => string | undefined;
+    getGlobalCss: () => string;
     getStaticCss: () => string | undefined;
     patterns: Record<string, _pandacss_types.PatternConfig>;
     hasPatterns: boolean;
@@ -415,8 +414,8 @@ declare function loadConfigAndCreateContext(options?: {
         jsxName: string;
         blocklistType: string;
     };
-    recipes: Record<string, _pandacss_types.RecipeConfig<_pandacss_types_dist_recipe.TVariants>>;
-    getRecipe: (name: string) => _pandacss_types.RecipeConfig<_pandacss_types_dist_recipe.TVariants> | undefined;
+    recipes: Record<string, _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>>;
+    getRecipe: (name: string) => _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord> | undefined;
     hasRecipes: boolean;
     getRecipeDetails: () => {
         [x: string]: {

package/dist/index.js

@@ -207,7 +207,7 @@ function generateCssFn(ctx) {
     export declare function css(styles: SystemStyleObject): string
     `,
     js: import_outdent2.outdent`
-    import { createCss, withoutSpace } from '../helpers'
+    import { createCss, createMergeCss, withoutSpace } from '../helpers'
     import { sortConditions, finalizeConditions } from './conditions'
 
     const classNameMap = ${stringify(utility.entries())}
@@ -242,6 +242,8 @@ function generateCssFn(ctx) {
     }
 
     export const css = createCss(context)
+
+    export const { mergeCss, assignCss } = createMergeCss(context)
     `
   };
 }
@@ -251,45 +253,39 @@ var import_outdent3 = require("outdent");
 function generateCvaFn() {
   return {
     js: import_outdent3.outdent`
-    import { compact, deepMerge } from '../helpers'
-    import { css } from './css'
+    import { compact } from '../helpers'
+    import { css, mergeCss } from './css'
     
     export function cva(config) {
       const { base = {}, variants = {}, defaultVariants = {} } = config
-      return (props) => {
+      
+      function resolve(props) {
         const computedVariants = { ...defaultVariants, ...compact(props) }
         let result = { ...base }
         for (const [key, value] of Object.entries(computedVariants)) {
           if (variants[key]?.[value]) {
-            result = deepMerge(result, variants[key][value])
+            result = mergeCss(result, variants[key][value])
           }
         }
-        return css(result)
+        return result
       }
-    }
-    `,
-    dts: import_outdent3.outdent`
-    import { SystemStyleObject } from '../types'
-
-    type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
 
-    type Variants = Record<string, Record<string, SystemStyleObject>>
-
-    type VariantSelection<T extends Variants> = {
-      [Variant in keyof T]?: StringToBoolean<keyof T[Variant]>
-    }
+      function cvaFn(props) {
+        return css(resolve(props))
+      }
 
-    type AtomicRecipe<T extends Variants> = {
-      base?: SystemStyleObject
-      variants?: T | Variants
-      defaultVariants?: VariantSelection<T>
+      return Object.assign(cvaFn, {
+        __cva__: true,
+        variants: Object.keys(variants),
+        resolve,
+        config,
+      })
     }
+    `,
+    dts: import_outdent3.outdent`
+    import { RecipeCreatorFn } from '../types/recipe'
 
-    type VariantFn<T extends Variants> = (props: VariantSelection<T>) => string
-
-    export type VariantProps<T extends VariantFn<Variants>> = Parameters<T>[0]
-
-    export declare function cva<T extends Variants>(recipe?: AtomicRecipe<T>): VariantFn<T>
+    export declare const cva: RecipeCreatorFn
 
     `
   };
@@ -366,44 +362,33 @@ function generatePreactJsxFactory(ctx) {
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
-    import { css, cx } from '../css'
-    import { deepMerge } from '../helpers'
+    import { css, cx, assignCss } from '../css'
+    import { splitProps, normalizeHTMLProps } from '../helpers'
     import { isCssProperty } from './is-valid-prop'
-  
-    const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
-
-    function normalizeHtmlProp(key) {
-      return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
-    }
-    
-    function splitProps(props) {
-      const styleProps = {}
-      const elementProps = {}
     
-      for (const [key, value] of Object.entries(props)) {
-        if (isCssProperty(key)) {
-          styleProps[key] = value
-        } else {
-          elementProps[normalizeHtmlProp(key)] = value
-        }
-      }
-    
-      return [styleProps, elementProps]
-    }
-    
-    function styled(Dynamic) {
+    function styled(Dynamic, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      
       const ${componentName} = forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
 
-        const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
+        const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
+          return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+        }, [restProps])
     
         function classes(){
-          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
-          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
-          return cx(atomicClass, elementProps.className)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = cvaFn.resolve(variantProps)
+          const styles = assignCss(cvaStyles, propStyles, cssStyles)
+          return cx(css(styles), elementProps.className)
         }
     
-        return h(Element, { ...elementProps, ref, className: classes() })
+        return h(Element, {
+          ...elementProps,
+          ...normalizeHTMLProps(htmlProps),
+          ref,
+          className: classes()
+        })
       })
       
       ${componentName}.displayName = \`${name}.\${Dynamic}\`
@@ -538,8 +523,9 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: import_outdent8.outdent`
-import type { JSX, ComponentProps } from 'preact'
-import type { JsxStyleProps, Assign } from '.'
+import { JSX, ComponentProps } from 'preact'
+import { JsxStyleProps, Assign } from '.'
+import { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 type ElementType = keyof JSX.IntrinsicElements
@@ -561,7 +547,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
 }
 
 export type ${upperName} = {
-  <T extends ElementType, P extends Dict = {}>(component: T): ${componentName}<T, P>
+  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
 } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
 export type ${typeName}<T extends ElementType> = Polyfill<ComponentProps<T>> & JsxStyleProps
@@ -576,44 +562,35 @@ function generateReactJsxFactory(ctx) {
   return {
     js: import_outdent9.outdent`
     import { forwardRef, useMemo } from 'react'
-    import { css, cx } from '../css'
-    import { deepMerge } from '../helpers'
+    import { css, cx, cva, assignCss } from '../css'
+    import { splitProps, normalizeHTMLProps } from '../helpers'
     import { isCssProperty } from './is-valid-prop'
-
-    const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
-
-    function normalizeHtmlProp(key) {
-      return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
-    }
-    
-    function splitProps(props) {
-      const styleProps = {}
-      const elementProps = {}
-    
-      for (const [key, value] of Object.entries(props)) {
-        if (isCssProperty(key)) {
-          styleProps[key] = value
-        } else {
-          elementProps[normalizeHtmlProp(key)] = value
-        }
-      }
-    
-      return [styleProps, elementProps]
-    }
     
-    function styled(Dynamic) {
+    function styled(Dynamic, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      
       const ${componentName} = forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
     
-        const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
+        const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
+          return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+        }, [restProps])
     
         function classes(){
-          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
-          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
-          return cx(atomicClass, elementProps.className)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = cvaFn.resolve(variantProps)
+          const styles = assignCss(cvaStyles, propStyles, cssStyles)
+          return cx(css(styles), elementProps.className)
         }
     
-        return <Element ref={ref} {...elementProps} className={classes()} />
+        return(
+            <Element
+              ref={ref}
+              {...elementProps}
+              {...normalizeHTMLProps(htmlProps)}
+              className={classes()}
+            />
+          )
       })
       
       ${componentName}.displayName = \`${name}.\${Dynamic}\`
@@ -750,8 +727,9 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: import_outdent12.outdent`
-import type { ElementType, ComponentProps } from 'react'
-import type { JsxStyleProps, Assign } from '.'
+import { ElementType, ComponentProps } from 'react'
+import { JsxStyleProps, Assign } from '.'
+import { RecipeDefinition, RecipeSelection, RecipeVariantRecord, RecipeRuntimeFn } from './recipe'
 
 type Dict = Record<string, unknown>
 
@@ -772,7 +750,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
 }
 
 export type ${upperName} = {
-  <T extends ElementType, P extends Dict = {}>(component: T): ${componentName}<T, P>
+  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
 } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
 export type ${typeName}<T extends ElementType> = Polyfill<ComponentProps<T>> & JsxStyleProps
@@ -788,42 +766,38 @@ function generateSolidJsxFactory(ctx) {
     js: import_outdent13.outdent`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
-    import { css, cx } from '../css'
-    import { deepMerge } from '../helpers'
+    import { css, cx, assignCss } from '../css'
+    import { splitProps, normalizeHTMLProps } from '../helpers'
     import { allCssProperties } from './is-valid-prop'
-
-    const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
-
-    function normalizeHtmlProp(key) {
-      return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
-    }
-
-    function normalizeHtmlProps(props) {
-      const result = {}
-      for (const [key, value] of Object.entries(props)) {
-        result[normalizeHtmlProp(key)] = value
-      }
-      return result
-    }
     
-    function styled(element) {
+    function styled(element, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      
       return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
     
-        const [localProps, localHtmlProps, styleProps, elementProps] = splitProps(
+        const [localProps, styleProps, htmlProps, elementProps] = splitProps(
           mergedProps,
-          ['as', 'class', 'className'],
-          htmlProps,
-          allCssProperties
+          ['as', 'class'],
+          allCssProperties,
+          normalizeHTMLProps.keys
         )
     
         const classes = () => {
-          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
-          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
-          return cx(atomicClass, localProps.class, localProps.className)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = cvaFn.resolve(variantProps)
+          const styles = assignCss(cvaStyles, propStyles, cssStyles)
+          return cx(css(styles), localProps.class)
         }
     
-        return <Dynamic component={localProps.as} {...normalizeHtmlProps(localHtmlProps)} {...elementProps} class={classes()} />
+        return (
+          <Dynamic
+            component={localProps.as}
+            {...elementProps}
+            {...normalizeHtmlProps(htmlProps)}
+            class={classes()}
+          />
+        )
       }
     }
     
@@ -955,8 +929,9 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: import_outdent16.outdent`
-import type { JSX, ComponentProps, Component } from 'solid-js'
-import type { JsxStyleProps, Assign } from '.'
+import { JSX, ComponentProps, Component } from 'solid-js'
+import { JsxStyleProps, Assign } from '.'
+import { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
@@ -979,7 +954,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
 }
 
 export type ${upperName} = {
-  <T extends ElementType, P extends Dict = {}>(component: T): ${componentName}<T, P>
+  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
 } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
 export type ${typeName}<T extends ElementType> = Polyfill<ComponentProps<T>> & JsxStyleProps
@@ -1175,6 +1150,7 @@ function generateRecipes(ctx) {
     const { name, description, defaultVariants, variants } = recipe;
     js.push(import_outdent19.outdent`
     export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
+    ${name}.variants = ${JSON.stringify(Object.keys(variants ?? {}))}
     `);
     dts.push(import_outdent19.outdent`
     export type ${(0, import_shared2.capitalize)(name)}Variants = {
@@ -1186,7 +1162,7 @@ function generateRecipes(ctx) {
     }
 
     ${description ? `/** ${description} */` : ""}
-    export declare function ${name}(variants?: ${(0, import_shared2.capitalize)(name)}Variants): string
+    export declare function ${name}(variants?: ${(0, import_shared2.capitalize)(name)}Variants): string & { variants: string[] }
     `);
   });
   return {
@@ -1434,10 +1410,11 @@ function getType(file) {
 function generateCssType(ctx) {
   const propList = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()));
   return {
-    cssType: getType("csstype.d.ts"),
-    pandaCssType: getType("system-types.d.ts"),
-    selectorType: getType("selectors.d.ts"),
-    publicType: import_outdent22.default`
+    css: getType("csstype.d.ts"),
+    system: getType("system-types.d.ts"),
+    selectors: getType("selectors.d.ts"),
+    recipe: getType("recipe.d.ts"),
+    exported: import_outdent22.default`
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
     
@@ -1490,20 +1467,21 @@ function setupDesignTokens(ctx) {
   };
 }
 function setupTypes(ctx) {
-  const code = generateCssType(ctx);
+  const types = generateCssType(ctx);
   const conditions = generateConditions(ctx);
   const jsx = generateJsxTypes(ctx);
   return {
     dir: ctx.paths.types,
     files: [
       jsx ? { file: "jsx.d.ts", code: jsx.jsxType } : null,
-      { file: "csstype.d.ts", code: code.cssType },
-      { file: "system-types.d.ts", code: code.pandaCssType },
-      { file: "selectors.d.ts", code: code.selectorType },
-      { file: "index.d.ts", code: code.publicType },
+      { file: "csstype.d.ts", code: types.css },
+      { file: "system-types.d.ts", code: types.system },
+      { file: "selectors.d.ts", code: types.selectors },
+      { file: "recipe.d.ts", code: types.recipe },
+      { file: "index.d.ts", code: types.exported },
       { file: "token.d.ts", code: generateTokenDts(ctx.tokens) },
       { file: "prop-type.d.ts", code: generatePropTypes(ctx.utility) },
-      { file: "style-props.d.ts", code: code.styleProps },
+      { file: "style-props.d.ts", code: types.styleProps },
       { file: "conditions.d.ts", code: conditions.dts }
     ].filter(Boolean)
   };
@@ -1892,7 +1870,7 @@ function createContext(conf, io = fileSystem) {
     const recipe = recipeNodes.find((node) => node.name === name);
     if (!recipe)
       return [{}, props];
-    return (0, import_shared4.splitObject)(props, (key) => recipe.props.includes(key));
+    return (0, import_shared4.splitProps)(props, recipe.props);
   }
   function getRecipeDetails() {
     return Object.entries(recipes).map(([name, recipe]) => ({
@@ -1902,7 +1880,7 @@ function createContext(conf, io = fileSystem) {
     }));
   }
   const hasRecipes = Object.keys(recipes).length > 0;
-  const properties = Array.from(/* @__PURE__ */ new Set(["css", "sx", ...utility.keys(), ...conditions.keys()]));
+  const properties = Array.from(/* @__PURE__ */ new Set(["css", ...utility.keys(), ...conditions.keys()]));
   function isCustomCssProperty(prop) {
     const regex = new RegExp("^(?:" + properties.join("|") + ")$");
     return regex.test(prop);
@@ -2032,10 +2010,15 @@ function createContext(conf, io = fileSystem) {
     }
   });
   function getGlobalCss() {
-    if (!globalCss)
-      return;
     const sheet = new import_core3.Stylesheet(context());
-    sheet.processGlobalCss(globalCss);
+    sheet.processGlobalCss({
+      ":root": {
+        "--made-with-panda": `'\u{1F43C}'`
+      }
+    });
+    if (globalCss) {
+      sheet.processGlobalCss(globalCss);
+    }
     return sheet.toCss();
   }
   function getStaticCss() {

package/dist/index.mjs

@@ -161,7 +161,7 @@ function generateCssFn(ctx) {
     export declare function css(styles: SystemStyleObject): string
     `,
     js: outdent2`
-    import { createCss, withoutSpace } from '../helpers'
+    import { createCss, createMergeCss, withoutSpace } from '../helpers'
     import { sortConditions, finalizeConditions } from './conditions'
 
     const classNameMap = ${stringify(utility.entries())}
@@ -196,6 +196,8 @@ function generateCssFn(ctx) {
     }
 
     export const css = createCss(context)
+
+    export const { mergeCss, assignCss } = createMergeCss(context)
     `
   };
 }
@@ -205,45 +207,39 @@ import { outdent as outdent3 } from "outdent";
 function generateCvaFn() {
   return {
     js: outdent3`
-    import { compact, deepMerge } from '../helpers'
-    import { css } from './css'
+    import { compact } from '../helpers'
+    import { css, mergeCss } from './css'
     
     export function cva(config) {
       const { base = {}, variants = {}, defaultVariants = {} } = config
-      return (props) => {
+      
+      function resolve(props) {
         const computedVariants = { ...defaultVariants, ...compact(props) }
         let result = { ...base }
         for (const [key, value] of Object.entries(computedVariants)) {
           if (variants[key]?.[value]) {
-            result = deepMerge(result, variants[key][value])
+            result = mergeCss(result, variants[key][value])
           }
         }
-        return css(result)
+        return result
       }
-    }
-    `,
-    dts: outdent3`
-    import { SystemStyleObject } from '../types'
-
-    type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
 
-    type Variants = Record<string, Record<string, SystemStyleObject>>
-
-    type VariantSelection<T extends Variants> = {
-      [Variant in keyof T]?: StringToBoolean<keyof T[Variant]>
-    }
+      function cvaFn(props) {
+        return css(resolve(props))
+      }
 
-    type AtomicRecipe<T extends Variants> = {
-      base?: SystemStyleObject
-      variants?: T | Variants
-      defaultVariants?: VariantSelection<T>
+      return Object.assign(cvaFn, {
+        __cva__: true,
+        variants: Object.keys(variants),
+        resolve,
+        config,
+      })
     }
+    `,
+    dts: outdent3`
+    import { RecipeCreatorFn } from '../types/recipe'
 
-    type VariantFn<T extends Variants> = (props: VariantSelection<T>) => string
-
-    export type VariantProps<T extends VariantFn<Variants>> = Parameters<T>[0]
-
-    export declare function cva<T extends Variants>(recipe?: AtomicRecipe<T>): VariantFn<T>
+    export declare const cva: RecipeCreatorFn
 
     `
   };
@@ -320,44 +316,33 @@ function generatePreactJsxFactory(ctx) {
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
-    import { css, cx } from '../css'
-    import { deepMerge } from '../helpers'
+    import { css, cx, assignCss } from '../css'
+    import { splitProps, normalizeHTMLProps } from '../helpers'
     import { isCssProperty } from './is-valid-prop'
-  
-    const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
-
-    function normalizeHtmlProp(key) {
-      return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
-    }
-    
-    function splitProps(props) {
-      const styleProps = {}
-      const elementProps = {}
     
-      for (const [key, value] of Object.entries(props)) {
-        if (isCssProperty(key)) {
-          styleProps[key] = value
-        } else {
-          elementProps[normalizeHtmlProp(key)] = value
-        }
-      }
-    
-      return [styleProps, elementProps]
-    }
-    
-    function styled(Dynamic) {
+    function styled(Dynamic, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      
       const ${componentName} = forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
 
-        const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
+        const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
+          return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+        }, [restProps])
     
         function classes(){
-          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
-          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
-          return cx(atomicClass, elementProps.className)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = cvaFn.resolve(variantProps)
+          const styles = assignCss(cvaStyles, propStyles, cssStyles)
+          return cx(css(styles), elementProps.className)
         }
     
-        return h(Element, { ...elementProps, ref, className: classes() })
+        return h(Element, {
+          ...elementProps,
+          ...normalizeHTMLProps(htmlProps),
+          ref,
+          className: classes()
+        })
       })
       
       ${componentName}.displayName = \`${name}.\${Dynamic}\`
@@ -492,8 +477,9 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: outdent8`
-import type { JSX, ComponentProps } from 'preact'
-import type { JsxStyleProps, Assign } from '.'
+import { JSX, ComponentProps } from 'preact'
+import { JsxStyleProps, Assign } from '.'
+import { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 type ElementType = keyof JSX.IntrinsicElements
@@ -515,7 +501,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
 }
 
 export type ${upperName} = {
-  <T extends ElementType, P extends Dict = {}>(component: T): ${componentName}<T, P>
+  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
 } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
 export type ${typeName}<T extends ElementType> = Polyfill<ComponentProps<T>> & JsxStyleProps
@@ -530,44 +516,35 @@ function generateReactJsxFactory(ctx) {
   return {
     js: outdent9`
     import { forwardRef, useMemo } from 'react'
-    import { css, cx } from '../css'
-    import { deepMerge } from '../helpers'
+    import { css, cx, cva, assignCss } from '../css'
+    import { splitProps, normalizeHTMLProps } from '../helpers'
     import { isCssProperty } from './is-valid-prop'
-
-    const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
-
-    function normalizeHtmlProp(key) {
-      return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
-    }
-    
-    function splitProps(props) {
-      const styleProps = {}
-      const elementProps = {}
-    
-      for (const [key, value] of Object.entries(props)) {
-        if (isCssProperty(key)) {
-          styleProps[key] = value
-        } else {
-          elementProps[normalizeHtmlProp(key)] = value
-        }
-      }
-    
-      return [styleProps, elementProps]
-    }
     
-    function styled(Dynamic) {
+    function styled(Dynamic, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      
       const ${componentName} = forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
     
-        const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
+        const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
+          return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+        }, [restProps])
     
         function classes(){
-          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
-          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
-          return cx(atomicClass, elementProps.className)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = cvaFn.resolve(variantProps)
+          const styles = assignCss(cvaStyles, propStyles, cssStyles)
+          return cx(css(styles), elementProps.className)
         }
     
-        return <Element ref={ref} {...elementProps} className={classes()} />
+        return(
+            <Element
+              ref={ref}
+              {...elementProps}
+              {...normalizeHTMLProps(htmlProps)}
+              className={classes()}
+            />
+          )
       })
       
       ${componentName}.displayName = \`${name}.\${Dynamic}\`
@@ -704,8 +681,9 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: outdent12`
-import type { ElementType, ComponentProps } from 'react'
-import type { JsxStyleProps, Assign } from '.'
+import { ElementType, ComponentProps } from 'react'
+import { JsxStyleProps, Assign } from '.'
+import { RecipeDefinition, RecipeSelection, RecipeVariantRecord, RecipeRuntimeFn } from './recipe'
 
 type Dict = Record<string, unknown>
 
@@ -726,7 +704,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
 }
 
 export type ${upperName} = {
-  <T extends ElementType, P extends Dict = {}>(component: T): ${componentName}<T, P>
+  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
 } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
 export type ${typeName}<T extends ElementType> = Polyfill<ComponentProps<T>> & JsxStyleProps
@@ -742,42 +720,38 @@ function generateSolidJsxFactory(ctx) {
     js: outdent13`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
-    import { css, cx } from '../css'
-    import { deepMerge } from '../helpers'
+    import { css, cx, assignCss } from '../css'
+    import { splitProps, normalizeHTMLProps } from '../helpers'
     import { allCssProperties } from './is-valid-prop'
-
-    const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
-
-    function normalizeHtmlProp(key) {
-      return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
-    }
-
-    function normalizeHtmlProps(props) {
-      const result = {}
-      for (const [key, value] of Object.entries(props)) {
-        result[normalizeHtmlProp(key)] = value
-      }
-      return result
-    }
     
-    function styled(element) {
+    function styled(element, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      
       return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
     
-        const [localProps, localHtmlProps, styleProps, elementProps] = splitProps(
+        const [localProps, styleProps, htmlProps, elementProps] = splitProps(
           mergedProps,
-          ['as', 'class', 'className'],
-          htmlProps,
-          allCssProperties
+          ['as', 'class'],
+          allCssProperties,
+          normalizeHTMLProps.keys
         )
     
         const classes = () => {
-          const { css: cssStyles, sx: sxStyles, ...otherStyles } = styleProps
-          const atomicClass = css(deepMerge(otherStyles, cssStyles, sxStyles))
-          return cx(atomicClass, localProps.class, localProps.className)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = cvaFn.resolve(variantProps)
+          const styles = assignCss(cvaStyles, propStyles, cssStyles)
+          return cx(css(styles), localProps.class)
         }
     
-        return <Dynamic component={localProps.as} {...normalizeHtmlProps(localHtmlProps)} {...elementProps} class={classes()} />
+        return (
+          <Dynamic
+            component={localProps.as}
+            {...elementProps}
+            {...normalizeHtmlProps(htmlProps)}
+            class={classes()}
+          />
+        )
       }
     }
     
@@ -909,8 +883,9 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: outdent16`
-import type { JSX, ComponentProps, Component } from 'solid-js'
-import type { JsxStyleProps, Assign } from '.'
+import { JSX, ComponentProps, Component } from 'solid-js'
+import { JsxStyleProps, Assign } from '.'
+import { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
@@ -933,7 +908,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
 }
 
 export type ${upperName} = {
-  <T extends ElementType, P extends Dict = {}>(component: T): ${componentName}<T, P>
+  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
 } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
 export type ${typeName}<T extends ElementType> = Polyfill<ComponentProps<T>> & JsxStyleProps
@@ -1129,6 +1104,7 @@ function generateRecipes(ctx) {
     const { name, description, defaultVariants, variants } = recipe;
     js.push(outdent19`
     export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
+    ${name}.variants = ${JSON.stringify(Object.keys(variants ?? {}))}
     `);
     dts.push(outdent19`
     export type ${capitalize2(name)}Variants = {
@@ -1140,7 +1116,7 @@ function generateRecipes(ctx) {
     }
 
     ${description ? `/** ${description} */` : ""}
-    export declare function ${name}(variants?: ${capitalize2(name)}Variants): string
+    export declare function ${name}(variants?: ${capitalize2(name)}Variants): string & { variants: string[] }
     `);
   });
   return {
@@ -1388,10 +1364,11 @@ function getType(file) {
 function generateCssType(ctx) {
   const propList = new Set(allCssProperties.concat(ctx.utility.keys()));
   return {
-    cssType: getType("csstype.d.ts"),
-    pandaCssType: getType("system-types.d.ts"),
-    selectorType: getType("selectors.d.ts"),
-    publicType: outdent22`
+    css: getType("csstype.d.ts"),
+    system: getType("system-types.d.ts"),
+    selectors: getType("selectors.d.ts"),
+    recipe: getType("recipe.d.ts"),
+    exported: outdent22`
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
     
@@ -1444,20 +1421,21 @@ function setupDesignTokens(ctx) {
   };
 }
 function setupTypes(ctx) {
-  const code = generateCssType(ctx);
+  const types = generateCssType(ctx);
   const conditions = generateConditions(ctx);
   const jsx = generateJsxTypes(ctx);
   return {
     dir: ctx.paths.types,
     files: [
       jsx ? { file: "jsx.d.ts", code: jsx.jsxType } : null,
-      { file: "csstype.d.ts", code: code.cssType },
-      { file: "system-types.d.ts", code: code.pandaCssType },
-      { file: "selectors.d.ts", code: code.selectorType },
-      { file: "index.d.ts", code: code.publicType },
+      { file: "csstype.d.ts", code: types.css },
+      { file: "system-types.d.ts", code: types.system },
+      { file: "selectors.d.ts", code: types.selectors },
+      { file: "recipe.d.ts", code: types.recipe },
+      { file: "index.d.ts", code: types.exported },
       { file: "token.d.ts", code: generateTokenDts(ctx.tokens) },
       { file: "prop-type.d.ts", code: generatePropTypes(ctx.utility) },
-      { file: "style-props.d.ts", code: code.styleProps },
+      { file: "style-props.d.ts", code: types.styleProps },
       { file: "conditions.d.ts", code: conditions.dts }
     ].filter(Boolean)
   };
@@ -1717,7 +1695,7 @@ import {
 import { isCssProperty } from "@pandacss/is-valid-prop";
 import { logger as logger4 } from "@pandacss/logger";
 import { createParser, createProject } from "@pandacss/parser";
-import { capitalize as capitalize4, compact, mapObject, uncapitalize, splitObject, dashCase as dashCase2 } from "@pandacss/shared";
+import { capitalize as capitalize4, compact, dashCase as dashCase2, mapObject, splitProps, uncapitalize } from "@pandacss/shared";
 import { TokenDictionary } from "@pandacss/token-dictionary";
 import glob from "fast-glob";
 import { readdirSync, readFileSync as readFileSync4 } from "fs";
@@ -1853,7 +1831,7 @@ function createContext(conf, io = fileSystem) {
     const recipe = recipeNodes.find((node) => node.name === name);
     if (!recipe)
       return [{}, props];
-    return splitObject(props, (key) => recipe.props.includes(key));
+    return splitProps(props, recipe.props);
   }
   function getRecipeDetails() {
     return Object.entries(recipes).map(([name, recipe]) => ({
@@ -1863,7 +1841,7 @@ function createContext(conf, io = fileSystem) {
     }));
   }
   const hasRecipes = Object.keys(recipes).length > 0;
-  const properties = Array.from(/* @__PURE__ */ new Set(["css", "sx", ...utility.keys(), ...conditions.keys()]));
+  const properties = Array.from(/* @__PURE__ */ new Set(["css", ...utility.keys(), ...conditions.keys()]));
   function isCustomCssProperty(prop) {
     const regex = new RegExp("^(?:" + properties.join("|") + ")$");
     return regex.test(prop);
@@ -1993,10 +1971,15 @@ function createContext(conf, io = fileSystem) {
     }
   });
   function getGlobalCss() {
-    if (!globalCss)
-      return;
     const sheet = new Stylesheet2(context());
-    sheet.processGlobalCss(globalCss);
+    sheet.processGlobalCss({
+      ":root": {
+        "--made-with-panda": `'\u{1F43C}'`
+      }
+    });
+    if (globalCss) {
+      sheet.processGlobalCss(globalCss);
+    }
     return sheet.toCss();
   }
   function getStaticCss() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20230119005608",
+  "version": "0.0.0-dev-20230119080852",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,15 +30,15 @@
     "javascript-stringify": "2.1.0",
     "ts-pattern": "4.1.3",
     "ts-morph": "17.0.1",
-    "@pandacss/types": "0.0.0-dev-20230119005608",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230119005608",
-    "@pandacss/error": "0.0.0-dev-20230119005608",
-    "@pandacss/parser": "0.0.0-dev-20230119005608",
-    "@pandacss/shared": "0.0.0-dev-20230119005608",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230119005608",
-    "@pandacss/logger": "0.0.0-dev-20230119005608",
-    "@pandacss/core": "0.0.0-dev-20230119005608",
-    "@pandacss/config": "0.0.0-dev-20230119005608"
+    "@pandacss/types": "0.0.0-dev-20230119080852",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230119080852",
+    "@pandacss/error": "0.0.0-dev-20230119080852",
+    "@pandacss/parser": "0.0.0-dev-20230119080852",
+    "@pandacss/shared": "0.0.0-dev-20230119080852",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230119080852",
+    "@pandacss/logger": "0.0.0-dev-20230119080852",
+    "@pandacss/core": "0.0.0-dev-20230119080852",
+    "@pandacss/config": "0.0.0-dev-20230119080852"
   },
   "devDependencies": {
     "@types/fs-extra": "11.0.1",
@@ -46,7 +46,7 @@
     "@types/glob-parent": "^5.1.1",
     "@types/pluralize": "0.0.29",
     "@types/lodash.merge": "4.6.7",
-    "@pandacss/fixture": "0.0.0-dev-20230119005608"
+    "@pandacss/fixture": "0.0.0-dev-20230119080852"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",