@pandacss/generator 0.0.2 → 0.3.1

package/dist/index.mjs

@@ -93,10 +93,56 @@ var getMessages = (ctx) => ({
 });
 
 // src/generator.ts
-import { Obj as Obj4, pipe as pipe5 } from "lil-fp";
+import { Obj as Obj2, pipe as pipe3 } from "lil-fp";
 
 // src/artifacts/index.ts
-import outdent25 from "outdent";
+import { isObject } from "@pandacss/shared";
+import outdent29 from "outdent";
+
+// src/artifacts/css/global-css.ts
+var generateGlobalCss = (ctx) => {
+  const { globalCss = {}, optimize = true } = ctx.config;
+  const sheet = ctx.createSheet();
+  sheet.processGlobalCss({
+    ":root": {
+      "--made-with-panda": `'\u{1F43C}'`
+    },
+    "*, *::before, *::after, ::backdrop": {
+      "--blur": "/*!*/ /*!*/",
+      "--brightness": "/*!*/ /*!*/",
+      "--contrast": "/*!*/ /*!*/",
+      "--grayscale": "/*!*/ /*!*/",
+      "--hue-rotate": "/*!*/ /*!*/",
+      "--invert": "/*!*/ /*!*/",
+      "--saturate": "/*!*/ /*!*/",
+      "--sepia": "/*!*/ /*!*/",
+      "--drop-shadow": "/*!*/ /*!*/",
+      "--backdrop-blur": "/*!*/ /*!*/",
+      "--backdrop-brightness": "/*!*/ /*!*/",
+      "--backdrop-contrast": "/*!*/ /*!*/",
+      "--backdrop-grayscale": "/*!*/ /*!*/",
+      "--backdrop-hue-rotate": "/*!*/ /*!*/",
+      "--backdrop-invert": "/*!*/ /*!*/",
+      "--backdrop-opacity": "/*!*/ /*!*/",
+      "--backdrop-saturate": "/*!*/ /*!*/",
+      "--backdrop-sepia": "/*!*/ /*!*/",
+      "--scroll-snap-strictness": "proximity",
+      "--border-spacing-x": 0,
+      "--border-spacing-y": 0,
+      "--translate-x": 0,
+      "--translate-y": 0,
+      "--rotate": 0,
+      "--skew-x": 0,
+      "--skew-y": 0,
+      "--scale-x": 1,
+      "--scale-y": 1
+    }
+  });
+  sheet.processGlobalCss(globalCss);
+  const output = sheet.toCss({ optimize });
+  ctx.hooks.callHook("generator:css", "global.css", output);
+  return output;
+};
 
 // src/artifacts/css/keyframe-css.ts
 import { toCss } from "@pandacss/core";
@@ -118,114 +164,240 @@ function generateKeyframeCss(ctx) {
     params: "tokens",
     nodes: root.nodes
   });
-  return rule.toString();
+  const output = rule.toString();
+  ctx.hooks.callHook("generator:css", "keyframes.css", output);
+  return output;
 }
 
 // src/artifacts/css/reset-css.ts
 var css = String.raw;
-var reset = css`
-  * {
-    margin: 0;
-  }
+function generateResetCss(ctx, scope = "") {
+  const selector = scope ? `${scope} ` : "";
+  const output = css`
+    @layer reset {
+      ${selector}* {
+        margin: 0;
+        padding: 0;
+        font: inherit;
+      }
 
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-  }
+      ${selector}*,
+      ${selector}*::before,
+      ${selector}*::after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        border-color: var(--global-color-border, currentColor);
+      }
 
-  html,
-  body {
-    height: 100%;
-  }
+      ${scope || "html"} {
+        line-height: 1.5;
+        --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+          'Noto Color Emoji';
+        -webkit-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        -webkit-font-smoothing: antialiased;
+        -moz-tab-size: 4;
+        tab-size: 4;
+        font-family: var(--global-font-body, var(--font-fallback));
+      }
 
-  body {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-  }
+      ${selector}hr {
+        height: 0;
+        color: inherit;
+        border-top-width: 1px;
+      }
 
-  img {
-    border-style: none;
-  }
+      body {
+        height: 100%;
+        line-height: inherit;
+      }
 
-  img,
-  picture,
-  video,
-  canvas,
-  svg {
-    display: block;
-    max-width: 100%;
-  }
+      ${selector}img {
+        border-style: none;
+      }
 
-  input,
-  button,
-  textarea,
-  select {
-    font: inherit;
-  }
+      ${selector}img,
+      ${selector}svg,
+      ${selector}video,
+      ${selector}canvas,
+      ${selector}audio,
+      ${selector}iframe,
+      ${selector}embed,
+      ${selector}object {
+        display: block;
+        vertical-align: middle;
+      }
 
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    overflow-wrap: break-word;
-  }
+      ${selector}img,
+      ${selector}video {
+        max-width: 100%;
+        height: auto;
+      }
 
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-    appearance: none;
-  }
+      ${selector}p,
+      ${selector}h1,
+      ${selector}h2,
+      ${selector}h3,
+      ${selector}h4,
+      ${selector}h5,
+      ${selector}h6 {
+        overflow-wrap: break-word;
+      }
 
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    appearance: none;
-    font: inherit;
-  }
+      ${selector}ol,
+      ${selector}ul {
+        list-style: none;
+      }
 
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
+      ${selector}code,
+      ${selector}kbd,
+      ${selector}pre,
+      ${selector}samp {
+        font-size: 1em;
+      }
 
-  code,
-  kbd,
-  pre,
-  samp {
-    font-size: 1em;
-  }
+      ${selector}button,
+      ${selector}[type='button'],
+      ${selector}[type='reset'],
+      ${selector}[type='submit'] {
+        -webkit-appearance: button;
+        background-color: transparent;
+        background-image: none;
+      }
 
-  table {
-    border-collapse: collapse;
-  }
+      ${selector}button,
+      ${selector}select {
+        text-transform: none;
+      }
 
-  textarea {
-    resize: vertical;
-  }
+      ${selector}table {
+        text-indent: 0;
+        border-color: inherit;
+        border-collapse: collapse;
+      }
 
-  sub {
-    bottom: -0.25em;
-  }
+      ${selector}input::placeholder,
+      ${selector}textarea::placeholder {
+        opacity: 1;
+        color: var(--global-color-placeholder, #9ca3af);
+      }
 
-  sup {
-    top: -0.5em;
-  }
+      ${selector}textarea {
+        resize: vertical;
+      }
 
-  dialog {
-    padding: 0;
-  }
-`;
-function generateResetCss() {
-  return `@layer reset {
-    ${reset}
-  }`;
+      ${selector}summary {
+        display: list-item;
+      }
+
+      ${selector}small {
+        font-size: 80%;
+      }
+
+      ${selector}sub,
+      ${selector}sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+      }
+
+      ${selector}sub {
+        bottom: -0.25em;
+      }
+
+      ${selector}sup {
+        top: -0.5em;
+      }
+
+      ${selector}dialog {
+        padding: 0;
+      }
+
+      ${selector}a {
+        color: inherit;
+        text-decoration: inherit;
+      }
+
+      ${selector}abbr:where([title]) {
+        text-decoration: underline dotted;
+      }
+
+      ${selector}b,
+      ${selector}strong {
+        font-weight: bolder;
+      }
+
+      ${selector}code,
+      ${selector}kbd,
+      ${selector}samp,
+      ${selector}pre {
+        font-size: 1em;
+        --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
+        font-family: var(--global-font-mono, var(--font-fallback));
+      }
+
+      ${selector}[type='search'] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+      }
+
+      ${selector}::-webkit-search-decoration {
+        -webkit-appearance: none;
+      }
+
+      ${selector}::-webkit-file-upload-button {
+        -webkit-appearance: button;
+      }
+
+      ${selector}::-webkit-inner-spin-button,
+      ${selector}::-webkit-outer-spin-button {
+        height: auto;
+      }
+
+      ${selector}:-moz-ui-invalid {
+        box-shadow: none;
+      }
+
+      ${selector}:-moz-focusring {
+        outline: auto;
+      }
+    }
+  `;
+  ctx.hooks.callHook("generator:css", "reset.css", output);
+  return output;
 }
 
+// src/artifacts/css/static-css.ts
+import { getStaticCss } from "@pandacss/core";
+var generateStaticCss = (ctx) => {
+  const { config, createSheet, utility, recipes } = ctx;
+  const { staticCss = {}, theme = {}, optimize = true } = config;
+  const sheet = createSheet();
+  const fn = getStaticCss(staticCss);
+  const results = fn({
+    breakpoints: Object.keys(theme.breakpoints ?? {}),
+    getPropertyKeys: utility.getPropertyKeys,
+    getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
+  });
+  results.css.forEach((css2) => {
+    sheet.processAtomic(css2);
+  });
+  results.recipes.forEach((result) => {
+    Object.entries(result).forEach(([name, value]) => {
+      const recipeConfig = recipes.getConfig(name);
+      if (!recipeConfig)
+        return;
+      sheet.processRecipe(recipeConfig, value);
+    });
+  });
+  const output = sheet.toCss({ optimize });
+  ctx.hooks.callHook("generator:css", "static.css", output);
+  return output;
+};
+
 // src/artifacts/css/token-css.ts
 import { expandNestedCss, extractParentSelectors, prettifyCss, toCss as toCss2 } from "@pandacss/core";
 import postcss2 from "postcss";
@@ -259,10 +431,12 @@ function generateTokenCss(ctx) {
     }
   }
   const css2 = results.join("\n\n");
-  return `@layer tokens {
+  const output = `@layer tokens {
     ${prettifyCss(cleanupSelectors(css2, root))}
   }
   `;
+  ctx.hooks.callHook("generator:css", "tokens.css", output);
+  return output;
 }
 function getDeepestRule(root, selectors) {
   const rule = postcss2.rule({ selector: "" });
@@ -651,6 +825,7 @@ transform`)}
 import { unionType as unionType2 } from "@pandacss/shared";
 import { outdent as outdent8 } from "outdent";
 var stringify3 = (value) => JSON.stringify(value, null, 2);
+var isBooleanValue = (value) => value === "true" || value === "false";
 function generateRecipes(ctx) {
   const {
     recipes,
@@ -713,21 +888,34 @@ function generateRecipes(ctx) {
         ${ctx.file.import("splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
-        export const ${name} = createRecipe('${name}', ${stringify3(defaultVariants ?? {})}, ${stringify3(
+        const ${name}Fn = createRecipe('${name}', ${stringify3(defaultVariants ?? {})}, ${stringify3(
           compoundVariants ?? []
         )})
 
-        ${name}.variants = ${stringify3(variantKeyMap)}
-        
         const variantKeys = ${stringify3(Object.keys(variantKeyMap))}
-        ${name}.splitVariantProps = (props) => splitProps(props, variantKeys)
+
+        function splitVariantProps(props) {
+          return splitProps(props, variantKeys)
+        }
+        
+        export const ${name} = Object.assign(${name}Fn, {
+          __recipe__: true,
+          variantKeys,
+          variantMap: ${stringify3(variantKeyMap)},
+          splitVariantProps,
+        })
         `,
         dts: outdent8`
         import type { ConditionalValue } from '../types'
         import type { Pretty } from '../types/helpers'
 
         type ${upperName}Variant = {
-          ${Object.keys(variantKeyMap).map((key) => `${key}: ${unionType2(variantKeyMap[key])}`).join("\n")}
+          ${Object.keys(variantKeyMap).map((key) => {
+          const values = variantKeyMap[key];
+          if (values.every(isBooleanValue))
+            return `${key}: boolean`;
+          return `${key}: ${unionType2(values)}`;
+        }).join("\n")}
         }
 
         type ${upperName}VariantMap = {
@@ -739,8 +927,10 @@ function generateRecipes(ctx) {
         }
 
         interface ${upperName}Recipe {
-          (variants?: ${upperName}VariantProps): string
-          variants: ${upperName}VariantMap
+          __type: ${upperName}VariantProps
+          (props?: ${upperName}VariantProps): string
+          variantMap: ${upperName}VariantMap
+          variantKeys: Array<keyof ${upperName}Variant>
           splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<Omit<Props, keyof ${upperName}VariantProps>>]
         }
 
@@ -803,23 +993,31 @@ function generatePreactJsxFactory(ctx) {
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     
-    function styled(Dynamic, configOrCva = {}) {
-      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+    function styledFn(Dynamic, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
       
       const ${componentName} = forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
 
-        const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(restProps, isCssProperty, cvaFn.variantKeys, normalizeHTMLProps.keys)
+        const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
+          return splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
         }, [restProps])
     
-        function classes() {
+        function recipeClass() {
+          const { css: cssStyles, ...propStyles } = styleProps
+          const styles = assignCss(propStyles, cssStyles)
+          return cx(cvaFn(variantProps), css(styles), elementProps.className, elementProps.class)
+        }
+        
+        function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = cvaFn.resolve(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
-          return cx(css(styles), elementProps.className)
+          return cx(css(styles), elementProps.className, elementProps.class)
         }
     
+        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        
         return h(Element, {
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
@@ -835,13 +1033,13 @@ function generatePreactJsxFactory(ctx) {
     function createJsxFactory() {
       const cache = new Map()
     
-      return new Proxy(styled, {
+      return new Proxy(styledFn, {
         apply(_, __, args) {
-          return styled(...args)
+          return styledFn(...args)
         },
         get(_, el) {
           if (!cache.has(el)) {
-            cache.set(el, styled(el))
+            cache.set(el, styledFn(el))
           }
           return cache.get(el)
         },
@@ -873,7 +1071,8 @@ function generatePreactJsxPattern(ctx) {
         ${match2(props.length).with(
         0,
         () => outdent11`
-            return h(${factoryName}.${jsxElement}, { ref, ...props })
+          const styleProps = ${styleFnName}()
+          return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
         () => outdent11`
@@ -908,9 +1107,9 @@ import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent12`
-import type { JSX, ComponentProps } from 'preact'
-import type { JsxStyleProps, JsxHTMLProps } from './system-types'
-import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
+import type { ComponentProps, JSX } from 'preact'
+import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
+import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type ElementType = keyof JSX.IntrinsicElements
 
@@ -921,43 +1120,241 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
   displayName?: string
 }
 
-export type ${upperName} = {
-  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
-} & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+type RecipeFn = { __type: any }
+
+interface JsxFactory {
+  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+    T,
+    RecipeSelection<P>
+  >
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+}
+
+type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
   };
 }
 
-// src/artifacts/react-jsx/jsx.ts
+// src/artifacts/qwik-jsx/jsx.ts
 import { outdent as outdent13 } from "outdent";
-function generateReactJsxFactory(ctx) {
+function generateQwikJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
     js: outdent13`
+    import { h } from '@builder.io/qwik'
+    ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
+    ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
+    
+    function styledFn(Dynamic, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
+      
+      const ${componentName} = function ${componentName}(props) {
+        const { as: Element = Dynamic, ...restProps } = props
+    
+        const [variantProps, styleProps, htmlProps, elementProps] = 
+            splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+        
+        const { css: cssStyles, ...propStyles } = styleProps
+    
+        function recipeClass() {
+          const styles = assignCss(propStyles, cssStyles)
+          return cx(cvaFn(variantProps), css(styles), elementProps.class)
+        }
+    
+        function cvaClass() {
+          const cvaStyles = cvaFn.resolve(variantProps)
+          const styles = assignCss(cvaStyles, propStyles, cssStyles)
+          return cx(css(styles), elementProps.class)
+        }
+    
+        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+    
+        return h(Element, {
+          ...elementProps,
+          ...normalizeHTMLProps(htmlProps),
+          class: classes(),
+        })
+      }
+      
+      ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+      return ${componentName}
+    }
+    
+    function createJsxFactory() {
+      const cache = new Map()
+    
+      return new Proxy(styledFn, {
+        apply(_, __, args) {
+          return styledFn(...args)
+        },
+        get(_, el) {
+          if (!cache.has(el)) {
+            cache.set(el, styledFn(el))
+          }
+          return cache.get(el)
+        },
+      })
+    }
+
+    export const ${factoryName} = createJsxFactory()
+
+    `
+  };
+}
+
+// src/artifacts/qwik-jsx/pattern.ts
+import { outdent as outdent14 } from "outdent";
+import { match as match3 } from "ts-pattern";
+function generateQwikJsxPattern(ctx) {
+  const { typeName, factoryName } = ctx.jsx;
+  return ctx.patterns.details.map((pattern) => {
+    const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
+    const { description, jsxElement = "div" } = pattern.config;
+    return {
+      name: dashName,
+      js: outdent14`
+      import { h } from '@builder.io/qwik'
+      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+  
+      export const ${jsxName} = function ${jsxName}(props) {
+        ${match3(props.length).with(
+        0,
+        () => outdent14`
+        const styleProps = ${styleFnName}()
+        return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
+          `
+      ).otherwise(
+        () => outdent14`
+        const { ${props.join(", ")}, ...restProps } = props
+        const styleProps = ${styleFnName}({${props.join(", ")}})
+        return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
+          `
+      )}
+      }
+      `,
+      dts: outdent14`
+      import type { FunctionComponent } from '@builder.io/qwik'
+      import type { ${upperName}Properties } from '../patterns/${dashName}'
+      import type { ${typeName} } from '../types/jsx'
+  
+      type Assign<T, U> = {
+        [K in keyof T]?: K extends keyof T ? (K extends keyof U ? T[K] & U[K] : T[K]) : never
+      } & U
+
+      export type ${upperName}Props = Assign<${typeName}<'${jsxElement}'>, Omit<${upperName}Properties, ${blocklistType || '""'}>>
+  
+      ${description ? `/** ${description} */` : ""}
+      export declare const ${jsxName}: FunctionComponent<${upperName}Props>
+      `
+    };
+  });
+}
+
+// src/artifacts/qwik-jsx/types.ts
+import { outdent as outdent15 } from "outdent";
+function generateQwikJsxTypes(ctx) {
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  return {
+    jsxFactory: outdent15`
+import { ${upperName} } from '../types/jsx'
+export declare const ${factoryName}: ${upperName}
+    `,
+    jsxType: outdent15`
+import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
+import type { Assign as _Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
+import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
+
+type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
+
+type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
+  ? QwikIntrinsicElements[T]
+  : T extends FunctionComponent<infer P>
+  ? P
+  : never
+
+type Dict = Record<string, unknown>
+
+type Omitted = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'
+
+// Patch due to Omit<T, K> not working with Qwik JSX Types
+
+type Assign<T, U> = {
+  [K in keyof T]?: K extends Omitted
+    ? K extends keyof U
+      ? U[K]
+      : never
+    : K extends keyof T
+    ? K extends keyof U
+      ? T[K] & U[K]
+      : T[K]
+    : never
+} & U & PatchedHTMLProps
+
+export type ${componentName}<T extends ElementType, P extends Dict = {}> = FunctionComponent<Assign<ComponentProps<T>, _Assign<JsxStyleProps, P>>>
+
+type RecipeFn = { __type: any }
+
+interface JsxFactory {
+  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+    T,
+    RecipeSelection<P>
+  >
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+}
+
+type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}> }
+
+export type ${upperName} = JsxFactory & JsxElements
+
+export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
+  `
+  };
+}
+
+// src/artifacts/react-jsx/jsx.ts
+import { outdent as outdent16 } from "outdent";
+function generateReactJsxFactory(ctx) {
+  const { factoryName, componentName } = ctx.jsx;
+  return {
+    js: outdent16`
     import { createElement, forwardRef, useMemo } from 'react'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     
-    function styled(Dynamic, configOrCva = {}) {
-      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+    function styledFn(Dynamic, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
       
       const ${componentName} = forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
     
-        const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(restProps, isCssProperty, cvaFn.variantKeys, normalizeHTMLProps.keys)
+        const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
+          return splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
         }, [restProps])
-    
-        function classes() {
+
+        function recipeClass() {
+          const { css: cssStyles, ...propStyles } = styleProps
+          const styles = assignCss(propStyles, cssStyles)
+          return cx(cvaFn(variantProps), css(styles), elementProps.className)
+        }
+        
+        function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = cvaFn.resolve(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), elementProps.className)
         }
     
+        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+    
         return createElement(Element, {
           ref,
           ...elementProps,
@@ -973,13 +1370,13 @@ function generateReactJsxFactory(ctx) {
     function createJsxFactory() {
       const cache = new Map()
     
-      return new Proxy(styled, {
+      return new Proxy(styledFn, {
         apply(_, __, args) {
-          return styled(...args)
+          return styledFn(...args)
         },
         get(_, el) {
           if (!cache.has(el)) {
-            cache.set(el, styled(el))
+            cache.set(el, styledFn(el))
           }
           return cache.get(el)
         },
@@ -993,8 +1390,8 @@ function generateReactJsxFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/pattern.ts
-import { outdent as outdent14 } from "outdent";
-import { match as match3 } from "ts-pattern";
+import { outdent as outdent17 } from "outdent";
+import { match as match4 } from "ts-pattern";
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1002,19 +1399,20 @@ function generateReactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent14`
+      js: outdent17`
       import { createElement, forwardRef } from 'react'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
   
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-        ${match3(props.length).with(
+        ${match4(props.length).with(
         0,
-        () => outdent14`
-        return createElement(${factoryName}.${jsxElement}, { ref, ...props })
+        () => outdent17`
+        const styleProps = ${styleFnName}()
+        return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent14`
+        () => outdent17`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1022,7 +1420,7 @@ function generateReactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: outdent14`
+      dts: outdent17`
       import type { FunctionComponent } from 'react'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1037,18 +1435,18 @@ function generateReactJsxPattern(ctx) {
 }
 
 // src/artifacts/react-jsx/types.ts
-import { outdent as outdent15 } from "outdent";
+import { outdent as outdent18 } from "outdent";
 function generateReactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent15`
+    jsxFactory: outdent18`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent15`
-import type { ElementType, ComponentProps } from 'react'
-import type { JsxStyleProps, JsxHTMLProps, Assign } from './system-types'
-import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
+    jsxType: outdent18`
+import type { ComponentProps, ElementType } from 'react'
+import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
+import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
@@ -1057,9 +1455,20 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
   displayName?: string
 }
 
-export type ${upperName} = {
-  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
-} & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+type RecipeFn = { __type: any }
+
+interface JsxFactory {
+  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+    T,
+    RecipeSelection<P>
+  >
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+}
+
+type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -1067,11 +1476,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/solid-jsx/jsx.ts
-import { outdent as outdent16 } from "outdent";
+import { outdent as outdent19 } from "outdent";
 function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: outdent16`
+    js: outdent19`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
@@ -1079,27 +1488,35 @@ function generateSolidJsxFactory(ctx) {
     ${ctx.file.import("normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("allCssProperties", "./is-valid-prop")}
     
-    function styled(element, configOrCva = {}) {
+    function styledFn(element, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
       
       return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
     
-        const [localProps, styleProps, variantProps, htmlProps, elementProps] = splitProps(
+        const [localProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
           mergedProps,
           ['as', 'class'],
-          allCssProperties,
           cvaFn.variantKeys,
+          allCssProperties,
           normalizeHTMLProps.keys
         )
-    
-        const classes = () => {
+
+        function recipeClass() {
+          const { css: cssStyles, ...propStyles } = styleProps
+          const styles = assignCss(propStyles, cssStyles)
+          return cx(cvaFn(variantProps), css(styles), localProps.class)
+        }
+        
+        function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = cvaFn.resolve(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), localProps.class)
         }
     
+        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        
         return createComponent(
           Dynamic,
           mergeProps(
@@ -1121,13 +1538,13 @@ function generateSolidJsxFactory(ctx) {
     function createJsxFactory() {
       const cache = new Map()
     
-      return new Proxy(styled, {
+      return new Proxy(styledFn, {
         apply(_, __, args) {
-          return styled(...args)
+          return styledFn(...args)
         },
         get(_, el) {
           if (!cache.has(el)) {
-            cache.set(el, styled(el))
+            cache.set(el, styledFn(el))
           }
           return cache.get(el)
         },
@@ -1140,8 +1557,8 @@ function generateSolidJsxFactory(ctx) {
 }
 
 // src/artifacts/solid-jsx/pattern.ts
-import { outdent as outdent17 } from "outdent";
-import { match as match4 } from "ts-pattern";
+import { outdent as outdent20 } from "outdent";
+import { match as match5 } from "ts-pattern";
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1149,20 +1566,21 @@ function generateSolidJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent17`
+      js: outdent20`
     import { splitProps, mergeProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
     export function ${jsxName}(props) {
-      ${match4(props.length).with(
+      ${match5(props.length).with(
         0,
-        () => outdent17`
-          return createComponent(${factoryName}.${jsxElement}, props)
+        () => outdent20`
+          const styleProps = ${styleFnName}()
+          return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
         `
       ).otherwise(
-        () => outdent17`
+        () => outdent20`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFnName}(patternProps)
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -1170,7 +1588,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: outdent17`
+      dts: outdent20`
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -1185,18 +1603,18 @@ function generateSolidJsxPattern(ctx) {
 }
 
 // src/artifacts/solid-jsx/types.ts
-import { outdent as outdent18 } from "outdent";
+import { outdent as outdent21 } from "outdent";
 function generateSolidJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent18`
+    jsxFactory: outdent21`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent18`
-import type { JSX, ComponentProps, Component } from 'solid-js'
-import type { JsxStyleProps, JsxHTMLProps } from './system-types'
-import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
+    jsxType: outdent21`
+import type { ComponentProps, Component, JSX } from 'solid-js'
+import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
+import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
@@ -1207,9 +1625,20 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
   displayName?: string
 }
 
-export type ${upperName} = {
-  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
-} & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+type RecipeFn = { __type: any }
+
+interface JsxFactory {
+  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+    T,
+    RecipeSelection<P>
+  >
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+}
+
+type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -1217,18 +1646,18 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/vue-jsx/jsx.ts
-import { outdent as outdent19 } from "outdent";
+import { outdent as outdent22 } from "outdent";
 function generateVueJsxFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: outdent19`
+    js: outdent22`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     
-    function styled(Dynamic, configOrCva = {}) {
-      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+    function styledFn(Dynamic, configOrCva = {}) {
+      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
       return defineComponent({
         name: \`${factoryName}.\${Dynamic}\`,
@@ -1236,19 +1665,28 @@ function generateVueJsxFactory(ctx) {
         props: { as: { type: [String, Object], default: Dynamic } },
         setup(props, { slots, attrs }) {
           const splittedProps = computed(() => {
-            return splitProps(attrs, isCssProperty, cvaFn.variantKeys, normalizeHTMLProps.keys)
+            return splitProps(attrs, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
           })
-    
-          const classes = computed(() => {
-            const [styleProps, variantProps, _htmlProps, elementProps] = splittedProps.value
+
+          const recipeClass = computed(() => {
+            const [variantProps, styleProps, _htmlProps, elementProps] = splittedProps.value
+            const { css: cssStyles, ...propStyles } = styleProps
+            const styles = assignCss(propStyles, cssStyles)
+            return cx(cvaFn(variantProps), css(styles), elementProps.className)
+          })
+
+          const cvaClass = computed(() => {
+            const [variantProps, styleProps, _htmlProps, elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
-            const cvaStyles = cvaFn.resolve(variantProps)
-            const styles = assignCss(cvaStyles, propStyles, cssStyles)
-            return cx(css(styles), elementProps.className)
+            const styles = assignCss(propStyles, cssStyles)
+            return cx(cvaFn(variantProps), css(styles), elementProps.className)
           })
+
+          const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
     
           return () => {
             const [_styleProps, _variantProps, htmlProps, elementProps] = splittedProps.value
+            
             return h(
               props.as,
               {
@@ -1266,13 +1704,13 @@ function generateVueJsxFactory(ctx) {
     function createJsxFactory() {
       const cache = new Map()
     
-      return new Proxy(styled, {
+      return new Proxy(styledFn, {
         apply(_, __, args) {
-          return styled(...args)
+          return styledFn(...args)
         },
         get(_, el) {
           if (!cache.has(el)) {
-            cache.set(el, styled(el))
+            cache.set(el, styledFn(el))
           }
           return cache.get(el)
         },
@@ -1285,19 +1723,61 @@ function generateVueJsxFactory(ctx) {
   };
 }
 
+// src/artifacts/vue-jsx/pattern.ts
+import { outdent as outdent23 } from "outdent";
+function generateVueJsxPattern(ctx) {
+  const { typeName, factoryName } = ctx.jsx;
+  return ctx.patterns.details.map((pattern) => {
+    const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
+    const { description, jsxElement = "div" } = pattern.config;
+    const propList = props.map((v) => JSON.stringify(v)).join(", ");
+    return {
+      name: dashName,
+      js: outdent23`
+    import { defineComponent, h, computed } from 'vue'
+    ${ctx.file.import(factoryName, "./factory")}
+    ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+
+    export const ${jsxName} = defineComponent({
+        name: '${jsxName}',
+        inheritAttrs: false,
+        props: [${propList}],
+        setup(props, { attrs, slots }) {
+            const styleProps = computed(() => ${styleFnName}(props))
+            return () => {
+                const computedProps = { ...styleProps.value, ...attrs }
+                return h(${factoryName}.${jsxElement}, computedProps, slots)
+            }
+        }
+    })
+    `,
+      dts: outdent23`
+    import { FunctionalComponent } from 'vue'
+    import { ${upperName}Properties } from '../patterns/${dashName}'
+    import { ${typeName} } from '../types/jsx'
+
+    export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+
+    ${description ? `/** ${description} */` : ""}
+    export declare const ${jsxName}: FunctionalComponent<${upperName}Props>
+    `
+    };
+  });
+}
+
 // src/artifacts/vue-jsx/types.ts
-import { outdent as outdent20 } from "outdent";
+import { outdent as outdent24 } from "outdent";
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent20`
+    jsxFactory: outdent24`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent20`
+    jsxType: outdent24`
 import type { Component, FunctionalComponent } from 'vue'
-import type { JsxStyleProps, JsxHTMLProps } from './system-types'
-import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
+import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
+import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type IntrinsicElement =
   | 'a'
@@ -1430,9 +1910,20 @@ type IntrinsicElement =
   JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
   >
 
-  export type ${upperName} = {
-      <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
-    } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+  type RecipeFn = { __type: any }
+
+  interface JsxFactory {
+    <T extends ElementType>(component: T): ${componentName}<T, {}>
+    <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+      T,
+      RecipeSelection<P>
+    >
+    <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+  }
+  
+  type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+  
+  export type ${upperName} = JsxFactory & JsxElements
     
   export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -1444,7 +1935,8 @@ var typesMap = {
   react: generateReactJsxTypes,
   preact: generatePreactJsxTypes,
   solid: generateSolidJsxTypes,
-  vue: generateVueJsxTypes
+  vue: generateVueJsxTypes,
+  qwik: generateQwikJsxTypes
 };
 function generateJsxTypes(ctx) {
   if (!ctx.jsx.framework)
@@ -1455,7 +1947,8 @@ var factoryMap = {
   react: generateReactJsxFactory,
   solid: generateSolidJsxFactory,
   preact: generatePreactJsxFactory,
-  vue: generateVueJsxFactory
+  vue: generateVueJsxFactory,
+  qwik: generateQwikJsxFactory
 };
 function generateJsxFactory(ctx) {
   if (!ctx.jsx.framework)
@@ -1466,7 +1959,8 @@ var patternMap = {
   react: generateReactJsxPattern,
   solid: generateSolidJsxPattern,
   preact: generatePreactJsxPattern,
-  vue: () => []
+  vue: generateVueJsxPattern,
+  qwik: generateQwikJsxPattern
 };
 function generateJsxPatterns(ctx) {
   if (ctx.patterns.isEmpty() && !ctx.jsx.framework)
@@ -1521,22 +2015,22 @@ var csstype_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<(SystemProperties | GenericProperties) & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\n\nexport type JsxStyleProps = SystemProperties &\n  MinimalNested<SystemStyleObject> & {\n    css?: SystemStyleObject\n  }\n\ntype Assign<T, U> = Omit<T, keyof U> & U\n\ntype HTMLProps = {\n  htmlSize?: string | number\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\ntype WithHTMLProps<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'> &\n  HTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\n\nexport type JsxStyleProps = SystemProperties &\n  MinimalNested<SystemStyleObject> & {\n    css?: SystemStyleObject\n  }\n\ntype Assign<T, U> = Omit<T, keyof U> & U\n\nexport type PatchedHTMLProps = {\n  htmlSize?: string | number\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'\n\ntype WithHTMLProps<T> = Omit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/generated/composition.d.ts.json
 var composition_d_ts_default = {
-  content: "import type { CompositionStyleObject } from './system-types'\n\ntype Recursive<T> = {\n  [key: string]: Recursive<T> | T\n}\n\nexport type Token<Value = any> = {\n  value: Value\n  description?: string\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontVariationSettings'\n  | 'fontVariantPosition'\n  | 'fontVariantCaps'\n  | 'fontVariantNumeric'\n  | 'fontVariantAlternates'\n  | 'fontVariantLigatures'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'fontSynthesis'\n  | 'fontStyle'\n  | 'fontVariant'\n  | 'lineHeight'\n  | 'letterSpacing'\n  | 'textDecoration'\n  | 'textTransform'\n  | 'textIndent'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationStyle'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'hyphenateCharacter'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left' | 'Start' | 'End'}`\n  | `Bottom${'Right' | 'Left' | 'Start' | 'End'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\nexport type CompositionStyles = {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n}\n"
+  content: "import type { CompositionStyleObject } from './system-types'\n\ntype Recursive<T> = {\n  [key: string]: Recursive<T> | T\n}\n\nexport type Token<Value = any> = {\n  value: Value\n  description?: string\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontVariationSettings'\n  | 'fontVariantPosition'\n  | 'fontVariantCaps'\n  | 'fontVariantNumeric'\n  | 'fontVariantAlternates'\n  | 'fontVariantLigatures'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'fontSynthesis'\n  | 'fontStyle'\n  | 'fontVariant'\n  | 'lineHeight'\n  | 'letterSpacing'\n  | 'textDecoration'\n  | 'textTransform'\n  | 'textIndent'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationStyle'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'hyphenateCharacter'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\nexport type CompositionStyles = {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n}\n"
 };
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<string, Record<string, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]>\n}\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  variants: (keyof T)[]\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<Omit<Props, keyof RecipeVariantRecord>>]\n}\n\nexport type RecipeCompoundSelection<\n  T extends RecipeVariantRecord,\n  Key extends Exclude<keyof T, 'css'> = Exclude<keyof T, 'css'>,\n> = {\n  [K in Key]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\nexport type RecipeConfig<T> = RecipeDefinition<T extends RecipeVariantRecord ? T : RecipeVariantRecord> & {\n  /**\n   * The name of the recipe.\n   */\n  name: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\nexport type AnyRecipeConfig = RecipeConfig<RecipeVariantRecord>\n"
+  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<Omit<Props, keyof RecipeVariantRecord>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & {\n  /**\n   * The name of the recipe.\n   */\n  name: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
 var pattern_d_ts_default = {
-  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport type PatternHelpers = {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\nexport type PatternConfig<T> = {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties: T extends Record<string, PatternProperty> ? T : Record<string, PatternProperty>\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (\n    props: T extends Record<infer Keys, PatternProperty> ? Record<Keys, any> : Record<string, PatternProperty>,\n    helpers: PatternHelpers,\n  ) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsx?: string\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n\nexport type AnyPatternConfig = PatternConfig<PatternProperty>\n"
+  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport type PatternHelpers = {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\ntype PatternProperties = Record<string, PatternProperty>\n\ntype Props<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternConfig<T extends PatternProperties = PatternProperties> = {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties: T\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsx?: string\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
 };
 
 // src/artifacts/generated/parts.d.ts.json
@@ -1563,38 +2057,38 @@ function getGeneratedTypes() {
 }
 
 // src/artifacts/types/main.ts
-import { outdent as outdent21 } from "outdent";
+import { outdent as outdent25 } from "outdent";
 var generateTypesEntry = () => ({
-  global: outdent21`
-    import { AnyRecipeConfig, RecipeVariantRecord, RecipeConfig } from './recipe'
+  global: outdent25`
+    import { RecipeVariantRecord, RecipeConfig } from './recipe'
     import { Parts } from './parts'
-    import { AnyPatternConfig, PatternConfig } from './pattern'
+    import { PatternConfig } from './pattern'
     import { GlobalStyleObject, SystemStyleObject } from './system-types'
     import { CompositionStyles } from './composition'
 
     declare module '@pandacss/dev' {
-      export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): AnyRecipeConfig
+      export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig
       export function defineStyles(definition: SystemStyleObject): SystemStyleObject
       export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
       export function defineTextStyles(definition: CompositionStyles['textStyles']): CompositionStyles['textStyles']
       export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
-      export function definePattern<Pattern>(config: PatternConfig<Pattern>): AnyPatternConfig
+      export function definePattern<T>(config: PatternConfig<T>): PatternConfig
       export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
     }
     `,
-  index: outdent21`
+  index: outdent25`
     import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
     `,
-  helpers: outdent21`
+  helpers: outdent25`
   export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
   `
 });
 
 // src/artifacts/types/prop-types.ts
-import { outdent as outdent22 } from "outdent";
+import { outdent as outdent26 } from "outdent";
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -1602,7 +2096,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    outdent22`
+    outdent26`
     import type { ConditionalValue } from './conditions';
     import type { CssProperties } from './system-types'
     import type { Tokens } from '../tokens'
@@ -1625,7 +2119,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return outdent22`
+  return outdent26`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -1638,10 +2132,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
-import outdent23 from "outdent";
+import outdent27 from "outdent";
 function generateStyleProps(ctx) {
   const props = new Set(allCssProperties.concat(ctx.utility.keys()));
-  return outdent23`
+  return outdent27`
     import { ConditionalValue } from './conditions'
     import { PropertyValue } from './prop-type'
     import { Token } from '../tokens'
@@ -1658,7 +2152,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 import { capitalize, unionType as unionType3 } from "@pandacss/shared";
-import { outdent as outdent24 } from "outdent";
+import { outdent as outdent28 } from "outdent";
 import pluralize from "pluralize";
 var categories = [
   "zIndex",
@@ -1690,88 +2184,22 @@ function generateTokenTypes(ctx) {
   if (tokens.isEmpty) {
     result.add("[token: string]: string");
   } else {
+    const colorPaletteKeys = Object.keys(tokens.colorPalettes);
+    if (colorPaletteKeys.length) {
+      set.add(`export type ColorPalette = ${unionType3(Object.keys(tokens.colorPalettes))}`);
+    }
     for (const [key, value] of tokens.categoryMap.entries()) {
       const typeName = capitalize(pluralize.singular(key));
       set.add(`export type ${typeName}Token = ${unionType3(value.keys())}`);
-      set.add(`export type ColorPalette = ${unionType3(Object.keys(tokens.colorPalettes))}`);
       result.add(`		${key}: ${typeName}Token`);
     }
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
   set.add(`export type TokenCategory = ${unionType3(categories)}`);
-  return outdent24.string(Array.from(set).join("\n\n"));
+  return outdent28.string(Array.from(set).join("\n\n"));
 }
 
-// src/artifacts/css/global-css.ts
-var generateGlobalCss = (ctx) => {
-  const { globalCss = {}, optimize = true } = ctx.config;
-  const sheet = ctx.createSheet();
-  sheet.processGlobalCss({
-    ":root": {
-      "--made-with-panda": `'\u{1F43C}'`
-    },
-    "*, *::before, *::after, ::backdrop": {
-      "--blur": "/*!*/ /*!*/",
-      "--brightness": "/*!*/ /*!*/",
-      "--contrast": "/*!*/ /*!*/",
-      "--grayscale": "/*!*/ /*!*/",
-      "--hue-rotate": "/*!*/ /*!*/",
-      "--invert": "/*!*/ /*!*/",
-      "--saturate": "/*!*/ /*!*/",
-      "--sepia": "/*!*/ /*!*/",
-      "--drop-shadow": "/*!*/ /*!*/",
-      "--backdrop-blur": "/*!*/ /*!*/",
-      "--backdrop-brightness": "/*!*/ /*!*/",
-      "--backdrop-contrast": "/*!*/ /*!*/",
-      "--backdrop-grayscale": "/*!*/ /*!*/",
-      "--backdrop-hue-rotate": "/*!*/ /*!*/",
-      "--backdrop-invert": "/*!*/ /*!*/",
-      "--backdrop-opacity": "/*!*/ /*!*/",
-      "--backdrop-saturate": "/*!*/ /*!*/",
-      "--backdrop-sepia": "/*!*/ /*!*/",
-      "--scroll-snap-strictness": "proximity",
-      "--border-spacing-x": 0,
-      "--border-spacing-y": 0,
-      "--translate-x": 0,
-      "--translate-y": 0,
-      "--rotate": 0,
-      "--skew-x": 0,
-      "--skew-y": 0,
-      "--scale-x": 1,
-      "--scale-y": 1
-    }
-  });
-  sheet.processGlobalCss(globalCss);
-  return sheet.toCss({ optimize });
-};
-
-// src/artifacts/css/static-css.ts
-import { getStaticCss } from "@pandacss/core";
-var generateStaticCss = (ctx) => {
-  const { config, createSheet, utility, recipes } = ctx;
-  const { staticCss = {}, theme = {}, optimize = true } = config;
-  const sheet = createSheet();
-  const fn = getStaticCss(staticCss);
-  const results = fn({
-    breakpoints: Object.keys(theme.breakpoints ?? {}),
-    getPropertyKeys: utility.getPropertyKeys,
-    getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
-  });
-  results.css.forEach((css2) => {
-    sheet.processAtomic(css2);
-  });
-  results.recipes.forEach((result) => {
-    Object.entries(result).forEach(([name, value]) => {
-      const recipeConfig = recipes.getConfig(name);
-      if (!recipeConfig)
-        return;
-      sheet.processRecipe(recipeConfig, value);
-    });
-  });
-  return sheet.toCss({ optimize });
-};
-
 // src/artifacts/index.ts
 function setupHelpers(ctx) {
   const code = generateHelpers();
@@ -1864,8 +2292,8 @@ function setupRecipes(ctx) {
     return;
   const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
   const index = {
-    js: outdent25.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: outdent25.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: outdent29.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: outdent29.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -1882,8 +2310,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: outdent25.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: outdent25.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: outdent29.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: outdent29.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -1903,13 +2331,13 @@ function setupJsx(ctx) {
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const index = {
-    js: outdent25`
+    js: outdent29`
   ${ctx.file.export("./factory")}
-  ${outdent25.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${outdent29.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: outdent25`
+    dts: outdent29`
   export * from './factory'
-  ${outdent25.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${outdent29.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -1928,12 +2356,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: outdent25`
+    js: outdent29`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
   ${ctx.file.export("./cva")}
  `,
-    dts: outdent25`
+    dts: outdent29`
   export * from './css'
   export * from './cx'
   export * from './cva'
@@ -1948,9 +2376,11 @@ function setupCssIndex(ctx) {
   };
 }
 function setupResetCss(ctx) {
-  if (!ctx.config.preflight)
+  const { preflight } = ctx.config;
+  if (!preflight)
     return;
-  const code = generateResetCss();
+  const scope = isObject(preflight) ? preflight.scope : void 0;
+  const code = generateResetCss(ctx, scope);
   return { files: [{ file: "reset.css", code }] };
 }
 function setupGlobalCss(ctx) {
@@ -2006,10 +2436,10 @@ var generateFlattenedCss = (ctx) => (options) => {
   const sheet = ctx.createSheet({
     content: resolve ? [
       generateGlobalCss(ctx),
-      generateStaticCss(ctx),
-      generateResetCss(),
-      generateTokenCss(ctx),
-      generateKeyframeCss(ctx)
+      staticCss && generateStaticCss(ctx),
+      preflight && generateResetCss(ctx),
+      !ctx.tokens.isEmpty && generateTokenCss(ctx),
+      keyframes && generateKeyframeCss(ctx)
     ].filter(Boolean).join("\n\n") : unresolved
   });
   sheet.append(...files);
@@ -2019,7 +2449,7 @@ var generateFlattenedCss = (ctx) => (options) => {
 // src/artifacts/css/parser-css.ts
 import { logger } from "@pandacss/logger";
 import { pipe, tap, tryCatch } from "lil-fp/func";
-import { match as match5, P } from "ts-pattern";
+import { match as match6, P } from "ts-pattern";
 var flattenStyles = (data) => Object.assign({}, data, { css: void 0 }, data.css ?? {});
 var generateParserCss = (ctx) => (result) => pipe(
   { ...ctx, sheet: ctx.createSheet(), result },
@@ -2045,7 +2475,7 @@ var generateParserCss = (ctx) => (result) => pipe(
           const recipeConfig = recipes.getConfig(name);
           if (!recipeConfig)
             continue;
-          match5(recipe).with({ type: "jsx-recipe", name: P.string }, ({ name: name2 }) => {
+          match6(recipe).with({ type: "jsx-recipe", name: P.string }, ({ name: name2 }) => {
             recipe.data.forEach((data) => {
               const [recipeProps, styleProps] = recipes.splitProps(name2, flattenStyles(data));
               sheet.processAtomic(styleProps);
@@ -2064,7 +2494,7 @@ var generateParserCss = (ctx) => (result) => pipe(
     result2.pattern.forEach((patternSet, name) => {
       try {
         for (const pattern of patternSet) {
-          match5(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: name2 }) => {
+          match6(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: name2 }) => {
             pattern.data.forEach((data) => {
               const fnName = patterns.getFnName(name2);
               const styleProps = patterns.transform(fnName, flattenStyles(data));
@@ -2084,7 +2514,9 @@ var generateParserCss = (ctx) => (result) => pipe(
   }),
   tryCatch(
     ({ sheet, result: result2, config: { minify, optimize } }) => {
-      return !result2.isEmpty() ? sheet.toCss({ minify, optimize }) : void 0;
+      const css2 = !result2.isEmpty() ? sheet.toCss({ minify, optimize }) : void 0;
+      ctx.hooks.callHook("parser:css", result2.filePath ?? "", css2);
+      return css2;
     },
     (err) => {
       logger.error("serializer:css", "Failed to serialize CSS: " + err);
@@ -2093,52 +2525,97 @@ var generateParserCss = (ctx) => (result) => pipe(
 );
 
 // src/engines/base.ts
-import { Conditions, Stylesheet, Utility, assignCompositions } from "@pandacss/core";
+import {
+  Conditions,
+  Recipes,
+  Stylesheet,
+  Utility,
+  assignCompositions
+} from "@pandacss/core";
 import { isCssProperty } from "@pandacss/is-valid-prop";
-import { logger as logger2 } from "@pandacss/logger";
 import { compact, mapObject, memo } from "@pandacss/shared";
 import { TokenDictionary } from "@pandacss/token-dictionary";
-import { Obj, pipe as pipe2, tap as tap2 } from "lil-fp";
+import { isBool, isStr } from "lil-fp";
 import postcss3 from "postcss";
-var helpers = { map: mapObject };
-var getBaseEngine = (conf) => pipe2(
-  conf,
-  Obj.bind("configDependencies", ({ dependencies }) => dependencies ?? []),
-  Obj.bind("tokens", ({ config: { theme = {}, prefix, hash } }) => {
-    const { breakpoints, tokens, semanticTokens } = theme;
-    return new TokenDictionary({ breakpoints, tokens, semanticTokens, prefix, hash });
-  }),
-  tap2(({ tokens }) => {
-    logger2.debug("generator:tokens", tokens.allNames);
-  }),
-  Obj.bind("utility", ({ config: { prefix, utilities, separator }, tokens }) => {
-    return new Utility({ prefix, tokens, config: utilities, separator });
-  }),
-  Obj.bind("conditions", ({ config: { conditions, theme } }) => {
-    const { breakpoints } = theme ?? {};
-    return new Conditions({ conditions, breakpoints });
-  }),
-  tap2(({ conditions, utility, config: { theme } }) => {
-    logger2.debug("generator:conditions", conditions);
-    const { textStyles, layerStyles } = theme ?? {};
-    const compositions = compact({ textStyle: textStyles, layerStyle: layerStyles });
-    assignCompositions({ conditions, utility }, compositions);
-  }),
-  Obj.bind("createSheet", ({ conditions, utility, config: { hash } }) => (options) => {
-    const context = { root: postcss3.root(), conditions, utility, hash, helpers };
-    return new Stylesheet(context, options);
-  }),
-  Obj.bind(
-    "properties",
-    ({ utility, conditions }) => Array.from(/* @__PURE__ */ new Set(["css", ...utility.keys(), ...conditions.keys()]))
-  ),
-  Obj.bind("isValidProperty", ({ properties }) => {
-    const propertyMap = new Map(properties.map((prop) => [prop, true]));
-    return memo((key) => {
-      return propertyMap.has(key) || isCssProperty(key);
+var helpers = {
+  map: mapObject
+};
+var getBaseEngine = (conf) => {
+  const { config } = conf;
+  const theme = config.theme ?? {};
+  const hash = {
+    tokens: isBool(config.hash) ? config.hash : config.hash?.cssVar,
+    className: isBool(config.hash) ? config.hash : config.hash?.className
+  };
+  const prefix = {
+    tokens: isStr(config.prefix) ? config.prefix : config.prefix?.cssVar,
+    className: isStr(config.prefix) ? config.prefix : config.prefix?.className
+  };
+  const tokens = new TokenDictionary({
+    breakpoints: theme.breakpoints,
+    tokens: theme.tokens,
+    semanticTokens: theme.semanticTokens,
+    prefix: prefix.tokens,
+    hash: hash.tokens
+  });
+  const utility = new Utility({
+    prefix: prefix.className,
+    tokens,
+    config: config.utilities,
+    separator: config.separator
+  });
+  const conditions = new Conditions({
+    conditions: config.conditions,
+    breakpoints: config.theme?.breakpoints
+  });
+  const { textStyles, layerStyles } = theme;
+  const compositions = compact({
+    textStyle: textStyles,
+    layerStyle: layerStyles
+  });
+  const compositionContext = { conditions, utility };
+  assignCompositions(compositions, compositionContext);
+  const createSheetContext = () => ({
+    root: postcss3.root(),
+    conditions,
+    utility,
+    hash: hash.className,
+    helpers
+  });
+  const createSheet = (options) => {
+    const sheetContext = createSheetContext();
+    return new Stylesheet(sheetContext, {
+      content: options?.content,
+      recipes: theme?.recipes
     });
-  })
-);
+  };
+  const recipeContext = createSheetContext();
+  const recipes = new Recipes(theme?.recipes ?? {}, recipeContext);
+  recipes.save();
+  const properties = Array.from(/* @__PURE__ */ new Set(["css", ...utility.keys(), ...conditions.keys()]));
+  const propertyMap = new Map(properties.map((prop) => [prop, true]));
+  const isValidProperty = memo((key) => {
+    return propertyMap.has(key) || isCssProperty(key);
+  });
+  const studio = {
+    outdir: `${config.outdir}-studio`,
+    ...conf.config.studio
+  };
+  return {
+    ...conf,
+    studio,
+    hash,
+    prefix,
+    tokens,
+    utility,
+    properties,
+    isValidProperty,
+    recipes,
+    conditions,
+    createSheetContext,
+    createSheet
+  };
+};
 
 // src/engines/jsx.ts
 import { capitalize as capitalize2 } from "@pandacss/shared";
@@ -2172,20 +2649,20 @@ var getPathEngine = ({ cwd, emitPackage, outdir }) => {
 
 // src/engines/pattern.ts
 import { capitalize as capitalize3, dashCase, mapObject as mapObject2, uncapitalize } from "@pandacss/shared";
-import { Obj as Obj2, pipe as pipe3 } from "lil-fp";
+import { Obj, pipe as pipe2 } from "lil-fp";
 var helpers2 = { map: mapObject2 };
 var getPatternEngine = (config) => {
-  return pipe3(
+  return pipe2(
     { patterns: config.patterns ?? {} },
-    Obj2.bind("getConfig", ({ patterns }) => {
+    Obj.bind("getConfig", ({ patterns }) => {
       return (name) => patterns[name];
     }),
-    Obj2.bind("transform", ({ getConfig }) => {
+    Obj.bind("transform", ({ getConfig }) => {
       return (name, data) => {
         return getConfig(name)?.transform?.(data, helpers2) ?? {};
       };
     }),
-    Obj2.bind("getNames", ({ getConfig }) => (name) => {
+    Obj.bind("getNames", ({ getConfig }) => (name) => {
       const upperName = capitalize3(name);
       return {
         name,
@@ -2195,7 +2672,7 @@ var getPatternEngine = (config) => {
         jsxName: getConfig(name)?.jsx ?? upperName
       };
     }),
-    Obj2.bind("details", ({ getNames, patterns }) => {
+    Obj.bind("details", ({ getNames, patterns }) => {
       return Object.entries(patterns).map(([name, pattern]) => ({
         ...getNames(name),
         props: Object.keys(pattern?.properties ?? {}),
@@ -2203,7 +2680,7 @@ var getPatternEngine = (config) => {
         config: pattern
       }));
     }),
-    Obj2.bind("nodes", ({ patterns }) => {
+    Obj.bind("nodes", ({ patterns }) => {
       return Object.entries(patterns).map(([name, pattern]) => ({
         type: "pattern",
         name: pattern.jsx ?? capitalize3(name),
@@ -2211,83 +2688,19 @@ var getPatternEngine = (config) => {
         baseName: name
       }));
     }),
-    Obj2.bind("getFnName", ({ nodes }) => (jsx) => {
+    Obj.bind("getFnName", ({ nodes }) => (jsx) => {
       return nodes.find((node) => node.name === jsx)?.baseName ?? uncapitalize(jsx);
     }),
-    Obj2.bind("isEmpty", ({ patterns }) => {
+    Obj.bind("isEmpty", ({ patterns }) => {
       return () => Object.keys(patterns).length === 0;
     })
   );
 };
 
-// src/engines/recipe.ts
-import { capitalize as capitalize4, dashCase as dashCase2, splitProps, uncapitalize as uncapitalize2 } from "@pandacss/shared";
-import { Obj as Obj3, pipe as pipe4 } from "lil-fp";
-var mergeRegex = (item) => {
-  const regex = item.map((item2) => typeof item2 === "string" ? item2 : item2.source).join("|");
-  return new RegExp(`^${regex}$`);
-};
-var getRecipeEngine = (config) => {
-  return pipe4(
-    { recipes: config.theme?.recipes ?? {} },
-    Obj3.bind("getConfig", ({ recipes }) => {
-      return (name) => recipes[name];
-    }),
-    Obj3.bind("getNames", () => {
-      return (name) => ({
-        upperName: capitalize4(name),
-        dashName: dashCase2(name),
-        jsxName: capitalize4(name)
-      });
-    }),
-    Obj3.bind("nodes", ({ recipes }) => {
-      return Object.entries(recipes).map(([name, recipe]) => {
-        const jsx = recipe.jsx ?? [capitalize4(name)];
-        const match6 = mergeRegex(jsx);
-        return {
-          type: "recipe",
-          name: capitalize4(name),
-          props: Object.keys(recipe.variants ?? {}),
-          baseName: name,
-          jsx,
-          match: match6
-        };
-      });
-    }),
-    Obj3.bind("getFnName", ({ nodes }) => {
-      return (jsx) => {
-        const recipe = nodes.find((node) => node.match.test(jsx));
-        return recipe?.baseName ?? uncapitalize2(jsx);
-      };
-    }),
-    Obj3.bind("splitProps", ({ nodes }) => {
-      return (name, props) => {
-        const recipe = nodes.find((node) => node.match.test(name));
-        if (!recipe)
-          return [{}, props];
-        return splitProps(props, recipe.props);
-      };
-    }),
-    Obj3.bind("details", ({ getNames, recipes }) => {
-      return Object.entries(recipes).map(([name, recipe]) => ({
-        ...getNames(name),
-        config: recipe,
-        variantKeyMap: Object.fromEntries(
-          Object.entries(recipe.variants ?? {}).map(([key, value]) => [key, Object.keys(value)])
-        )
-      }));
-    }),
-    Obj3.bind("isEmpty", ({ recipes }) => {
-      return () => Object.keys(recipes).length === 0;
-    })
-  );
-};
-
 // src/engines/index.ts
 var getEngine = (conf) => ({
   ...getBaseEngine(conf),
   patterns: getPatternEngine(conf.config),
-  recipes: getRecipeEngine(conf.config),
   jsx: getJsxEngine(conf.config),
   paths: getPathEngine(conf.config),
   file: {
@@ -2308,7 +2721,7 @@ var defaults = (conf) => ({
   ...conf,
   config: {
     cssVarRoot: ":where(:root, :host)",
-    jsxFactory: "panda",
+    jsxFactory: "styled",
     outExtension: "mjs",
     ...conf.config
   }
@@ -2319,15 +2732,15 @@ var getImportMap = (outdir) => ({
   pattern: `${outdir}/patterns`,
   jsx: `${outdir}/jsx`
 });
-var createGenerator = (conf) => pipe5(
+var createGenerator = (conf) => pipe3(
   getEngine(defaults(conf)),
-  Obj4.assign((ctx) => ({
+  Obj2.assign((ctx) => ({
     getArtifacts: generateArtifacts(ctx),
     getCss: generateFlattenedCss(ctx),
     getParserCss: generateParserCss(ctx),
     messages: getMessages(ctx)
   })),
-  Obj4.bind("parserOptions", ({ config: { outdir }, jsx, isValidProperty, patterns, recipes }) => ({
+  Obj2.bind("parserOptions", ({ config: { outdir }, jsx, isValidProperty, patterns, recipes }) => ({
     importMap: getImportMap(outdir),
     jsx: {
       factory: jsx.factoryName,