@pandacss/generator 0.0.0-dev-20230530140607 → 0.0.0-dev-20230530153916

package/dist/index.d.ts

@@ -40,7 +40,7 @@ declare const getEngine: (conf: LoadConfigResult) => {
         upperName: string;
         typeName: string;
         componentName: string;
-        framework: "solid" | "react" | "preact" | "vue" | undefined;
+        framework: "solid" | "react" | "preact" | "vue" | "qwik" | undefined;
     };
     paths: {
         get: (file?: string | undefined) => string[];
@@ -122,7 +122,7 @@ declare const createGenerator: (conf: LoadConfigResult) => {
         upperName: string;
         typeName: string;
         componentName: string;
-        framework: "solid" | "react" | "preact" | "vue" | undefined;
+        framework: "solid" | "react" | "preact" | "vue" | "qwik" | undefined;
     };
     recipes: _pandacss_core.Recipes;
     configDependencies: string[];

package/dist/index.js

@@ -128,7 +128,7 @@ var import_lil_fp3 = require("lil-fp");
 
 // src/artifacts/index.ts
 var import_shared4 = require("@pandacss/shared");
-var import_outdent25 = __toESM(require("outdent"));
+var import_outdent28 = __toESM(require("outdent"));
 
 // src/artifacts/css/global-css.ts
 var generateGlobalCss = (ctx) => {
@@ -1126,12 +1126,173 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
   };
 }
 
-// src/artifacts/react-jsx/jsx.ts
+// src/artifacts/qwik-jsx/jsx.ts
 var import_outdent13 = require("outdent");
-function generateReactJsxFactory(ctx) {
+function generateQwikJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
     js: import_outdent13.outdent`
+    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 : 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)
+        
+    
+        function classes() {
+          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,
+          ...normalizeHTMLProps(htmlProps),
+          className: 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
+var import_outdent14 = require("outdent");
+var import_ts_pattern3 = require("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: import_outdent14.outdent`
+      import { h } from '@builder.io/qwik'
+      ${ctx.file.import(factoryName, "./factory")}
+      ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
+  
+      export const ${jsxName} = function ${jsxName}(props) {
+        ${(0, import_ts_pattern3.match)(props.length).with(
+        0,
+        () => import_outdent14.outdent`
+        const styleProps = ${styleFnName}()
+        return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
+          `
+      ).otherwise(
+        () => import_outdent14.outdent`
+        const { ${props.join(", ")}, ...restProps } = props
+        const styleProps = ${styleFnName}({${props.join(", ")}})
+        return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
+          `
+      )}
+      }
+      `,
+      dts: import_outdent14.outdent`
+      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
+var import_outdent15 = require("outdent");
+function generateQwikJsxTypes(ctx) {
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  return {
+    jsxFactory: import_outdent15.outdent`
+import { ${upperName} } from '../types/jsx'
+export declare const ${factoryName}: ${upperName}
+    `,
+    jsxType: import_outdent15.outdent`
+import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
+import type { JsxStyleProps, Assign as _Assign, PatchedHTMLProps } from './system-types'
+import type { RecipeDefinition, RecipeRuntimeFn, 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>>>
+
+export type ${upperName} = {
+  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
+} & { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}> }
+
+export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
+  `
+  };
+}
+
+// src/artifacts/react-jsx/jsx.ts
+var import_outdent16 = require("outdent");
+function generateReactJsxFactory(ctx) {
+  const { factoryName, componentName } = ctx.jsx;
+  return {
+    js: import_outdent16.outdent`
     import { createElement, forwardRef, useMemo } from 'react'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1189,8 +1350,8 @@ function generateReactJsxFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/pattern.ts
-var import_outdent14 = require("outdent");
-var import_ts_pattern3 = require("ts-pattern");
+var import_outdent17 = require("outdent");
+var import_ts_pattern4 = require("ts-pattern");
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1198,20 +1359,20 @@ function generateReactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent14.outdent`
+      js: import_outdent17.outdent`
       import { createElement, forwardRef } from 'react'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
   
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern3.match)(props.length).with(
+        ${(0, import_ts_pattern4.match)(props.length).with(
         0,
-        () => import_outdent14.outdent`
+        () => import_outdent17.outdent`
         const styleProps = ${styleFnName}()
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => import_outdent14.outdent`
+        () => import_outdent17.outdent`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1219,7 +1380,7 @@ function generateReactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: import_outdent14.outdent`
+      dts: import_outdent17.outdent`
       import type { FunctionComponent } from 'react'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1234,15 +1395,15 @@ function generateReactJsxPattern(ctx) {
 }
 
 // src/artifacts/react-jsx/types.ts
-var import_outdent15 = require("outdent");
+var import_outdent18 = require("outdent");
 function generateReactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent15.outdent`
+    jsxFactory: import_outdent18.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent15.outdent`
+    jsxType: import_outdent18.outdent`
 import type { ElementType, ComponentProps } from 'react'
 import type { JsxStyleProps, JsxHTMLProps, Assign } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1264,11 +1425,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/solid-jsx/jsx.ts
-var import_outdent16 = require("outdent");
+var import_outdent19 = require("outdent");
 function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: import_outdent16.outdent`
+    js: import_outdent19.outdent`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
@@ -1337,8 +1498,8 @@ function generateSolidJsxFactory(ctx) {
 }
 
 // src/artifacts/solid-jsx/pattern.ts
-var import_outdent17 = require("outdent");
-var import_ts_pattern4 = require("ts-pattern");
+var import_outdent20 = require("outdent");
+var import_ts_pattern5 = require("ts-pattern");
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1346,21 +1507,21 @@ function generateSolidJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent17.outdent`
+      js: import_outdent20.outdent`
     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) {
-      ${(0, import_ts_pattern4.match)(props.length).with(
+      ${(0, import_ts_pattern5.match)(props.length).with(
         0,
-        () => import_outdent17.outdent`
+        () => import_outdent20.outdent`
           const styleProps = ${styleFnName}()
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
         `
       ).otherwise(
-        () => import_outdent17.outdent`
+        () => import_outdent20.outdent`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFnName}(patternProps)
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -1368,7 +1529,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: import_outdent17.outdent`
+      dts: import_outdent20.outdent`
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -1383,15 +1544,15 @@ function generateSolidJsxPattern(ctx) {
 }
 
 // src/artifacts/solid-jsx/types.ts
-var import_outdent18 = require("outdent");
+var import_outdent21 = require("outdent");
 function generateSolidJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent18.outdent`
+    jsxFactory: import_outdent21.outdent`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent18.outdent`
+    jsxType: import_outdent21.outdent`
 import type { JSX, ComponentProps, Component } from 'solid-js'
 import type { JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1415,11 +1576,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/vue-jsx/jsx.ts
-var import_outdent19 = require("outdent");
+var import_outdent22 = require("outdent");
 function generateVueJsxFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: import_outdent19.outdent`
+    js: import_outdent22.outdent`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1484,15 +1645,15 @@ function generateVueJsxFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/types.ts
-var import_outdent20 = require("outdent");
+var import_outdent23 = require("outdent");
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent20.outdent`
+    jsxFactory: import_outdent23.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent20.outdent`
+    jsxType: import_outdent23.outdent`
 import type { Component, FunctionalComponent } from 'vue'
 import type { JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1642,7 +1803,8 @@ var typesMap = {
   react: generateReactJsxTypes,
   preact: generatePreactJsxTypes,
   solid: generateSolidJsxTypes,
-  vue: generateVueJsxTypes
+  vue: generateVueJsxTypes,
+  qwik: generateQwikJsxTypes
 };
 function generateJsxTypes(ctx) {
   if (!ctx.jsx.framework)
@@ -1653,7 +1815,8 @@ var factoryMap = {
   react: generateReactJsxFactory,
   solid: generateSolidJsxFactory,
   preact: generatePreactJsxFactory,
-  vue: generateVueJsxFactory
+  vue: generateVueJsxFactory,
+  qwik: generateQwikJsxFactory
 };
 function generateJsxFactory(ctx) {
   if (!ctx.jsx.framework)
@@ -1664,7 +1827,8 @@ var patternMap = {
   react: generateReactJsxPattern,
   solid: generateSolidJsxPattern,
   preact: generatePreactJsxPattern,
-  vue: () => []
+  vue: () => [],
+  qwik: generateQwikJsxPattern
 };
 function generateJsxPatterns(ctx) {
   if (ctx.patterns.isEmpty() && !ctx.jsx.framework)
@@ -1719,7 +1883,7 @@ 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 & 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
@@ -1761,9 +1925,9 @@ function getGeneratedTypes() {
 }
 
 // src/artifacts/types/main.ts
-var import_outdent21 = require("outdent");
+var import_outdent24 = require("outdent");
 var generateTypesEntry = () => ({
-  global: import_outdent21.outdent`
+  global: import_outdent24.outdent`
     import { AnyRecipeConfig, RecipeVariantRecord, RecipeConfig } from './recipe'
     import { Parts } from './parts'
     import { AnyPatternConfig, PatternConfig } from './pattern'
@@ -1780,19 +1944,19 @@ var generateTypesEntry = () => ({
       export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
     }
     `,
-  index: import_outdent21.outdent`
+  index: import_outdent24.outdent`
     import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
     `,
-  helpers: import_outdent21.outdent`
+  helpers: import_outdent24.outdent`
   export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
   `
 });
 
 // src/artifacts/types/prop-types.ts
-var import_outdent22 = require("outdent");
+var import_outdent25 = require("outdent");
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -1800,7 +1964,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    import_outdent22.outdent`
+    import_outdent25.outdent`
     import type { ConditionalValue } from './conditions';
     import type { CssProperties } from './system-types'
     import type { Tokens } from '../tokens'
@@ -1823,7 +1987,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return import_outdent22.outdent`
+  return import_outdent25.outdent`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -1836,10 +2000,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 var import_is_valid_prop = require("@pandacss/is-valid-prop");
-var import_outdent23 = __toESM(require("outdent"));
+var import_outdent26 = __toESM(require("outdent"));
 function generateStyleProps(ctx) {
   const props = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()));
-  return import_outdent23.default`
+  return import_outdent26.default`
     import { ConditionalValue } from './conditions'
     import { PropertyValue } from './prop-type'
     import { Token } from '../tokens'
@@ -1856,7 +2020,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 var import_shared3 = require("@pandacss/shared");
-var import_outdent24 = require("outdent");
+var import_outdent27 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 var categories = [
   "zIndex",
@@ -1898,7 +2062,7 @@ function generateTokenTypes(ctx) {
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
   set.add(`export type TokenCategory = ${(0, import_shared3.unionType)(categories)}`);
-  return import_outdent24.outdent.string(Array.from(set).join("\n\n"));
+  return import_outdent27.outdent.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/index.ts
@@ -1993,8 +2157,8 @@ function setupRecipes(ctx) {
     return;
   const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
   const index = {
-    js: import_outdent25.default.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: import_outdent25.default.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: import_outdent28.default.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: import_outdent28.default.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -2011,8 +2175,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: import_outdent25.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: import_outdent25.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: import_outdent28.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: import_outdent28.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -2032,13 +2196,13 @@ function setupJsx(ctx) {
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const index = {
-    js: import_outdent25.default`
+    js: import_outdent28.default`
   ${ctx.file.export("./factory")}
-  ${import_outdent25.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${import_outdent28.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: import_outdent25.default`
+    dts: import_outdent28.default`
   export * from './factory'
-  ${import_outdent25.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${import_outdent28.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -2057,12 +2221,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: import_outdent25.default`
+    js: import_outdent28.default`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
   ${ctx.file.export("./cva")}
  `,
-    dts: import_outdent25.default`
+    dts: import_outdent28.default`
   export * from './css'
   export * from './cx'
   export * from './cva'
@@ -2150,7 +2314,7 @@ var generateFlattenedCss = (ctx) => (options) => {
 // src/artifacts/css/parser-css.ts
 var import_logger2 = require("@pandacss/logger");
 var import_func = require("lil-fp/func");
-var import_ts_pattern5 = require("ts-pattern");
+var import_ts_pattern6 = require("ts-pattern");
 var flattenStyles = (data) => Object.assign({}, data, { css: void 0 }, data.css ?? {});
 var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
   { ...ctx, sheet: ctx.createSheet(), result },
@@ -2176,7 +2340,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
           const recipeConfig = recipes.getConfig(name);
           if (!recipeConfig)
             continue;
-          (0, import_ts_pattern5.match)(recipe).with({ type: "jsx-recipe", name: import_ts_pattern5.P.string }, ({ name: name2 }) => {
+          (0, import_ts_pattern6.match)(recipe).with({ type: "jsx-recipe", name: import_ts_pattern6.P.string }, ({ name: name2 }) => {
             recipe.data.forEach((data) => {
               const [recipeProps, styleProps] = recipes.splitProps(name2, flattenStyles(data));
               sheet.processAtomic(styleProps);
@@ -2195,7 +2359,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
     result2.pattern.forEach((patternSet, name) => {
       try {
         for (const pattern of patternSet) {
-          (0, import_ts_pattern5.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern5.P.string }, ({ name: name2 }) => {
+          (0, import_ts_pattern6.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern6.P.string }, ({ name: name2 }) => {
             pattern.data.forEach((data) => {
               const fnName = patterns.getFnName(name2);
               const styleProps = patterns.transform(fnName, flattenStyles(data));

package/dist/index.mjs

@@ -97,7 +97,7 @@ import { Obj as Obj3, pipe as pipe4 } from "lil-fp";
 
 // src/artifacts/index.ts
 import { isObject } from "@pandacss/shared";
-import outdent25 from "outdent";
+import outdent28 from "outdent";
 
 // src/artifacts/css/global-css.ts
 var generateGlobalCss = (ctx) => {
@@ -1095,12 +1095,173 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
   };
 }
 
-// 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 : 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)
+        
+    
+        function classes() {
+          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,
+          ...normalizeHTMLProps(htmlProps),
+          className: 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 { JsxStyleProps, Assign as _Assign, PatchedHTMLProps } from './system-types'
+import type { RecipeDefinition, RecipeRuntimeFn, 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>>>
+
+export type ${upperName} = {
+  <T extends ElementType, P extends RecipeVariantRecord = {}>(component: T, recipe?: RecipeDefinition<P> | RecipeRuntimeFn<P>): ${componentName}<T, RecipeSelection<P>>
+} & { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}> }
+
+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")}
@@ -1158,8 +1319,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) => {
@@ -1167,20 +1328,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`
+        () => 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 })
@@ -1188,7 +1349,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'
@@ -1203,15 +1364,15 @@ 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`
+    jsxType: outdent18`
 import type { ElementType, ComponentProps } from 'react'
 import type { JsxStyleProps, JsxHTMLProps, Assign } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1233,11 +1394,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'
@@ -1306,8 +1467,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) => {
@@ -1315,21 +1476,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`
+        () => 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))
@@ -1337,7 +1498,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: outdent17`
+      dts: outdent20`
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -1352,15 +1513,15 @@ 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`
+    jsxType: outdent21`
 import type { JSX, ComponentProps, Component } from 'solid-js'
 import type { JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1384,11 +1545,11 @@ 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")}
@@ -1453,15 +1614,15 @@ function generateVueJsxFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/types.ts
-import { outdent as outdent20 } from "outdent";
+import { outdent as outdent23 } from "outdent";
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent20`
+    jsxFactory: outdent23`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent20`
+    jsxType: outdent23`
 import type { Component, FunctionalComponent } from 'vue'
 import type { JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1611,7 +1772,8 @@ var typesMap = {
   react: generateReactJsxTypes,
   preact: generatePreactJsxTypes,
   solid: generateSolidJsxTypes,
-  vue: generateVueJsxTypes
+  vue: generateVueJsxTypes,
+  qwik: generateQwikJsxTypes
 };
 function generateJsxTypes(ctx) {
   if (!ctx.jsx.framework)
@@ -1622,7 +1784,8 @@ var factoryMap = {
   react: generateReactJsxFactory,
   solid: generateSolidJsxFactory,
   preact: generatePreactJsxFactory,
-  vue: generateVueJsxFactory
+  vue: generateVueJsxFactory,
+  qwik: generateQwikJsxFactory
 };
 function generateJsxFactory(ctx) {
   if (!ctx.jsx.framework)
@@ -1633,7 +1796,8 @@ var patternMap = {
   react: generateReactJsxPattern,
   solid: generateSolidJsxPattern,
   preact: generatePreactJsxPattern,
-  vue: () => []
+  vue: () => [],
+  qwik: generateQwikJsxPattern
 };
 function generateJsxPatterns(ctx) {
   if (ctx.patterns.isEmpty() && !ctx.jsx.framework)
@@ -1688,7 +1852,7 @@ 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 & 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
@@ -1730,9 +1894,9 @@ function getGeneratedTypes() {
 }
 
 // src/artifacts/types/main.ts
-import { outdent as outdent21 } from "outdent";
+import { outdent as outdent24 } from "outdent";
 var generateTypesEntry = () => ({
-  global: outdent21`
+  global: outdent24`
     import { AnyRecipeConfig, RecipeVariantRecord, RecipeConfig } from './recipe'
     import { Parts } from './parts'
     import { AnyPatternConfig, PatternConfig } from './pattern'
@@ -1749,19 +1913,19 @@ var generateTypesEntry = () => ({
       export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
     }
     `,
-  index: outdent21`
+  index: outdent24`
     import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
     `,
-  helpers: outdent21`
+  helpers: outdent24`
   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 outdent25 } from "outdent";
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -1769,7 +1933,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    outdent22`
+    outdent25`
     import type { ConditionalValue } from './conditions';
     import type { CssProperties } from './system-types'
     import type { Tokens } from '../tokens'
@@ -1792,7 +1956,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return outdent22`
+  return outdent25`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -1805,10 +1969,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
-import outdent23 from "outdent";
+import outdent26 from "outdent";
 function generateStyleProps(ctx) {
   const props = new Set(allCssProperties.concat(ctx.utility.keys()));
-  return outdent23`
+  return outdent26`
     import { ConditionalValue } from './conditions'
     import { PropertyValue } from './prop-type'
     import { Token } from '../tokens'
@@ -1825,7 +1989,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 outdent27 } from "outdent";
 import pluralize from "pluralize";
 var categories = [
   "zIndex",
@@ -1867,7 +2031,7 @@ function generateTokenTypes(ctx) {
   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 outdent27.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/index.ts
@@ -1962,8 +2126,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: outdent28.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: outdent28.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -1980,8 +2144,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: outdent28.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: outdent28.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -2001,13 +2165,13 @@ function setupJsx(ctx) {
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const index = {
-    js: outdent25`
+    js: outdent28`
   ${ctx.file.export("./factory")}
-  ${outdent25.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${outdent28.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: outdent25`
+    dts: outdent28`
   export * from './factory'
-  ${outdent25.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${outdent28.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -2026,12 +2190,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: outdent25`
+    js: outdent28`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
   ${ctx.file.export("./cva")}
  `,
-    dts: outdent25`
+    dts: outdent28`
   export * from './css'
   export * from './cx'
   export * from './cva'
@@ -2119,7 +2283,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 },
@@ -2145,7 +2309,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);
@@ -2164,7 +2328,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));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20230530140607",
+  "version": "0.0.0-dev-20230530153916",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,16 +20,16 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.24",
     "ts-pattern": "4.3.0",
-    "@pandacss/core": "0.0.0-dev-20230530140607",
-    "@pandacss/logger": "0.0.0-dev-20230530140607",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230530140607",
-    "@pandacss/shared": "0.0.0-dev-20230530140607",
-    "@pandacss/types": "0.0.0-dev-20230530140607",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230530140607"
+    "@pandacss/core": "0.0.0-dev-20230530153916",
+    "@pandacss/logger": "0.0.0-dev-20230530153916",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230530153916",
+    "@pandacss/shared": "0.0.0-dev-20230530153916",
+    "@pandacss/types": "0.0.0-dev-20230530153916",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230530153916"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.29",
-    "@pandacss/fixture": "0.0.0-dev-20230530140607"
+    "@pandacss/fixture": "0.0.0-dev-20230530153916"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",