@pandacss/generator 0.7.0 → 0.8.0

package/dist/index.d.mts

@@ -3,18 +3,11 @@ import * as _pandacss_core from '@pandacss/core';
 import * as _pandacss_token_dictionary from '@pandacss/token-dictionary';
 import * as _pandacss_types from '@pandacss/types';
 import { ConfigResultWithHooks, TSConfig } from '@pandacss/types';
-import * as _pandacss_core_src_types from '@pandacss/core/src/types';
 
 declare const getEngine: (conf: ConfigResultWithHooks) => {
     patterns: {
-        transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
-        nodes: {
-            type: "pattern";
-            name: string;
-            props: string[];
-            baseName: string;
-        }[];
         patterns: Record<string, _pandacss_types.PatternConfig>;
+        transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
         getConfig: (name: string) => _pandacss_types.PatternConfig;
         getNames: (name: string) => {
             name: string;
@@ -33,6 +26,12 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
             styleFnName: string;
             jsxName: string;
         }[];
+        nodes: {
+            type: "pattern";
+            name: string;
+            props: string[];
+            baseName: string;
+        }[];
         getFnName: (jsx: string) => string;
         isEmpty: () => boolean;
     };
@@ -41,7 +40,7 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
         upperName: string;
         typeName: string;
         componentName: string;
-        framework: ("solid" | "react" | "preact" | "vue" | "qwik") | undefined;
+        framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
     };
     paths: {
         get: (file?: string | undefined) => string[];
@@ -87,8 +86,9 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
     hooks: _pandacss_types.PandaHookable;
     path: string;
-    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
+    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;
     tsconfig?: TSConfig | undefined;
+    tsOptions?: _pandacss_types.ConfigTsOptions | undefined;
     tsconfigFile?: string | undefined;
     dependencies: string[];
 };
@@ -155,10 +155,10 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
     };
     parserOptions: {
         importMap: {
-            css: string;
-            recipe: string;
-            pattern: string;
-            jsx: string;
+            css: string[];
+            recipe: string[];
+            pattern: string[];
+            jsx: string[];
         };
         jsx: {
             factory: string;
@@ -177,17 +177,24 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
                 match: RegExp;
             })[];
         };
-        getRecipesByJsxName: (jsxName: string) => _pandacss_core_src_types.RecipeNode[];
-    };
-    patterns: {
-        transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
-        nodes: {
-            type: "pattern";
+        getRecipesByJsxName: (jsxName: string) => {
             name: string;
-            props: string[];
-            baseName: string;
+            variantKeys: string[];
+            variantKeyMap: Record<string, string[]>;
+            jsx: (string | RegExp)[];
+            upperName: string;
+            dashName: string;
+            jsxName: string;
+            match: RegExp;
+            config: _pandacss_types.RecipeConfig;
+            splitProps: (props: _pandacss_types.Dict) => [_pandacss_types.Dict, _pandacss_types.Dict];
         }[];
+        compilerOptions: any;
+        tsOptions: _pandacss_types.ConfigTsOptions | undefined;
+    };
+    patterns: {
         patterns: Record<string, _pandacss_types.PatternConfig>;
+        transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
         getConfig: (name: string) => _pandacss_types.PatternConfig;
         getNames: (name: string) => {
             name: string;
@@ -206,6 +213,12 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
             styleFnName: string;
             jsxName: string;
         }[];
+        nodes: {
+            type: "pattern";
+            name: string;
+            props: string[];
+            baseName: string;
+        }[];
         getFnName: (jsx: string) => string;
         isEmpty: () => boolean;
     };
@@ -214,7 +227,7 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
         upperName: string;
         typeName: string;
         componentName: string;
-        framework: ("solid" | "react" | "preact" | "vue" | "qwik") | undefined;
+        framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
     };
     paths: {
         get: (file?: string | undefined) => string[];
@@ -260,8 +273,9 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
     hooks: _pandacss_types.PandaHookable;
     path: string;
-    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
+    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;
     tsconfig?: TSConfig | undefined;
+    tsOptions?: _pandacss_types.ConfigTsOptions | undefined;
     tsconfigFile?: string | undefined;
     dependencies: string[];
 };

package/dist/index.d.ts

@@ -3,18 +3,11 @@ import * as _pandacss_core from '@pandacss/core';
 import * as _pandacss_token_dictionary from '@pandacss/token-dictionary';
 import * as _pandacss_types from '@pandacss/types';
 import { ConfigResultWithHooks, TSConfig } from '@pandacss/types';
-import * as _pandacss_core_src_types from '@pandacss/core/src/types';
 
 declare const getEngine: (conf: ConfigResultWithHooks) => {
     patterns: {
-        transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
-        nodes: {
-            type: "pattern";
-            name: string;
-            props: string[];
-            baseName: string;
-        }[];
         patterns: Record<string, _pandacss_types.PatternConfig>;
+        transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
         getConfig: (name: string) => _pandacss_types.PatternConfig;
         getNames: (name: string) => {
             name: string;
@@ -33,6 +26,12 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
             styleFnName: string;
             jsxName: string;
         }[];
+        nodes: {
+            type: "pattern";
+            name: string;
+            props: string[];
+            baseName: string;
+        }[];
         getFnName: (jsx: string) => string;
         isEmpty: () => boolean;
     };
@@ -41,7 +40,7 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
         upperName: string;
         typeName: string;
         componentName: string;
-        framework: ("solid" | "react" | "preact" | "vue" | "qwik") | undefined;
+        framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
     };
     paths: {
         get: (file?: string | undefined) => string[];
@@ -87,8 +86,9 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
     hooks: _pandacss_types.PandaHookable;
     path: string;
-    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
+    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;
     tsconfig?: TSConfig | undefined;
+    tsOptions?: _pandacss_types.ConfigTsOptions | undefined;
     tsconfigFile?: string | undefined;
     dependencies: string[];
 };
@@ -155,10 +155,10 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
     };
     parserOptions: {
         importMap: {
-            css: string;
-            recipe: string;
-            pattern: string;
-            jsx: string;
+            css: string[];
+            recipe: string[];
+            pattern: string[];
+            jsx: string[];
         };
         jsx: {
             factory: string;
@@ -177,17 +177,24 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
                 match: RegExp;
             })[];
         };
-        getRecipesByJsxName: (jsxName: string) => _pandacss_core_src_types.RecipeNode[];
-    };
-    patterns: {
-        transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
-        nodes: {
-            type: "pattern";
+        getRecipesByJsxName: (jsxName: string) => {
             name: string;
-            props: string[];
-            baseName: string;
+            variantKeys: string[];
+            variantKeyMap: Record<string, string[]>;
+            jsx: (string | RegExp)[];
+            upperName: string;
+            dashName: string;
+            jsxName: string;
+            match: RegExp;
+            config: _pandacss_types.RecipeConfig;
+            splitProps: (props: _pandacss_types.Dict) => [_pandacss_types.Dict, _pandacss_types.Dict];
         }[];
+        compilerOptions: any;
+        tsOptions: _pandacss_types.ConfigTsOptions | undefined;
+    };
+    patterns: {
         patterns: Record<string, _pandacss_types.PatternConfig>;
+        transform: (name: string, data: _pandacss_types.Dict) => _pandacss_types.SystemStyleObject;
         getConfig: (name: string) => _pandacss_types.PatternConfig;
         getNames: (name: string) => {
             name: string;
@@ -206,6 +213,12 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
             styleFnName: string;
             jsxName: string;
         }[];
+        nodes: {
+            type: "pattern";
+            name: string;
+            props: string[];
+            baseName: string;
+        }[];
         getFnName: (jsx: string) => string;
         isEmpty: () => boolean;
     };
@@ -214,7 +227,7 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
         upperName: string;
         typeName: string;
         componentName: string;
-        framework: ("solid" | "react" | "preact" | "vue" | "qwik") | undefined;
+        framework: ("react" | "solid" | "preact" | "vue" | "qwik") | undefined;
     };
     paths: {
         get: (file?: string | undefined) => string[];
@@ -260,8 +273,9 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
     hooks: _pandacss_types.PandaHookable;
     path: string;
-    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "include" | "outdir" | "cwd">>;
+    config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;
     tsconfig?: TSConfig | undefined;
+    tsOptions?: _pandacss_types.ConfigTsOptions | undefined;
     tsconfigFile?: string | undefined;
     dependencies: string[];
 };

package/dist/index.js

@@ -624,16 +624,22 @@ function generateCssFn(ctx) {
   return {
     dts: import_outdent4.outdent`
     import type { SystemStyleObject } from '../types'
-    export declare function css(styles: SystemStyleObject): string
+
+    interface CssFunction {
+      (styles: SystemStyleObject): string
+      raw: (styles: SystemStyleObject) => SystemStyleObject
+    }
+
+    export declare const css: CssFunction;
     `,
     js: import_outdent4.outdent`
     ${ctx.file.import("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
     const classNameMap = ${stringify(utility.entries())}
-    
+
     const shorthands = ${stringify(utility.shorthands)}
-    
+
     const breakpointKeys = ${JSON.stringify(conditions.breakpoints.keys)}
 
     const hasShorthand = ${utility.hasShorthand ? "true" : "false"}
@@ -663,6 +669,7 @@ function generateCssFn(ctx) {
     }
 
     export const css = createCss(context)
+    css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
@@ -926,8 +933,13 @@ function generatePattern(ctx) {
 
           type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
+          interface ${upperName}PatternFn {
+            (options?: ${upperName}Options): string
+            raw: (options: ${upperName}Options) => ${upperName}Options
+          }
+
           ${description ? `/** ${description} */` : ""}
-          export declare function ${name}(options?: ${upperName}Options): string
+          export declare const ${name}: ${upperName}PatternFn;
           `}
 
      `,
@@ -941,6 +953,7 @@ transform`)}
     export const ${styleFnName} = (styles = {}) => ${name}Config.transform(styles, { map: mapObject })
 
     export const ${name} = (styles) => css(${styleFnName}(styles))
+    ${name}.raw = (styles) => styles
     `
     };
   });
@@ -1017,17 +1030,14 @@ function generateRecipes(ctx) {
           compoundVariants ?? []
         )})
 
-        const variantKeys = ${stringify3(Object.keys(variantKeyMap))}
-
-        function splitVariantProps(props) {
-          return splitProps(props, variantKeys)
-        }
-        
         export const ${name} = Object.assign(${name}Fn, {
           __recipe__: true,
-          variantKeys,
+          raw: (props) => props,
+          variantKeys: ${stringify3(Object.keys(variantKeyMap))},
           variantMap: ${stringify3(variantKeyMap)},
-          splitVariantProps,
+          splitVariantProps(props) {
+            return splitProps(props, ${stringify3(Object.keys(variantKeyMap))})
+          },
         })
         `,
         dts: import_outdent11.outdent`
@@ -1054,6 +1064,7 @@ function generateRecipes(ctx) {
         interface ${upperName}Recipe {
           __type: ${upperName}VariantProps
           (props?: ${upperName}VariantProps): string
+          raw: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
           variantMap: ${upperName}VariantMap
           variantKeys: Array<keyof ${upperName}Variant>
           splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<Omit<Props, keyof ${upperName}VariantProps>>]
@@ -1741,12 +1752,16 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent25.outdent`
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
@@ -1832,10 +1847,14 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent27.outdent`
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
   displayName?: string
@@ -2667,38 +2686,38 @@ function generateJsxPatterns(ctx) {
 // src/artifacts/pkg-json.ts
 function generatePackageJson(ctx) {
   const {
-    config: { outdir }
+    config: { outdir, outExtension: ext = "mjs" }
   } = ctx;
   const pkg = {
     name: outdir,
-    description: "This package is auto-generated by CSS Panda",
+    description: "This package is auto-generated by Panda CSS",
     version: `0.0.0-${performance.now()}`,
     type: "module",
     exports: {
       "./css": {
         types: "./css/index.d.ts",
-        require: "./css/index.mjs",
-        import: "./css/index.mjs"
+        require: `./css/index.${ext}`,
+        import: `./css/index.${ext}`
       },
       "./jsx": {
         types: "./jsx/index.d.ts",
-        require: "./jsx/index.mjs",
-        import: "./jsx/index.mjs"
+        require: `./jsx/index.${ext}`,
+        import: `./jsx/index.${ext}`
       },
       "./patterns": {
         types: "./patterns/index.d.ts",
-        require: "./patterns/index.mjs",
-        import: "./patterns/index.mjs"
+        require: `./patterns/index.${ext}`,
+        import: `./patterns/index.${ext}`
       },
       "./recipes": {
         types: "./recipes/index.d.ts",
-        require: "./recipes/index.mjs",
-        import: "./recipes/index.mjs"
+        require: `./recipes/index.${ext}`,
+        import: `./recipes/index.${ext}`
       },
       "./tokens": {
         types: "./tokens/index.d.ts",
-        require: "./tokens/index.mjs",
-        import: "./tokens/index.mjs"
+        require: `./tokens/index.${ext}`,
+        import: `./tokens/index.${ext}`
       },
       "./types": {
         types: "./types/index.d.ts"
@@ -3442,10 +3461,10 @@ var defaults = (conf) => ({
   }
 });
 var getImportMap = (outdir) => ({
-  css: `${outdir}/css`,
-  recipe: `${outdir}/recipes`,
-  pattern: `${outdir}/patterns`,
-  jsx: `${outdir}/jsx`
+  css: [outdir, "css"],
+  recipe: [outdir, "recipes"],
+  pattern: [outdir, "patterns"],
+  jsx: [outdir, "jsx"]
 });
 var createGenerator = (conf) => {
   const ctx = getEngine(defaults(conf));
@@ -3453,7 +3472,7 @@ var createGenerator = (conf) => {
   const compilerOptions = conf.tsconfig?.compilerOptions ?? {};
   const baseUrl = compilerOptions.baseUrl ?? "";
   const cwd = conf.config.cwd;
-  const relativeBaseUrl = baseUrl ? baseUrl.replace(cwd, "").slice(1) + "/" : cwd;
+  const relativeBaseUrl = baseUrl !== cwd ? baseUrl.replace(cwd, "").slice(1) : cwd;
   return {
     ...ctx,
     getArtifacts: generateArtifacts(ctx),
@@ -3467,7 +3486,9 @@ var createGenerator = (conf) => {
         isStyleProp: isValidProperty,
         nodes: [...patterns.nodes, ...recipes.nodes]
       },
-      getRecipesByJsxName: recipes.filter
+      getRecipesByJsxName: recipes.filter,
+      compilerOptions,
+      tsOptions: conf.tsOptions
     }
   };
 };

package/dist/index.mjs

@@ -593,16 +593,22 @@ function generateCssFn(ctx) {
   return {
     dts: outdent4`
     import type { SystemStyleObject } from '../types'
-    export declare function css(styles: SystemStyleObject): string
+
+    interface CssFunction {
+      (styles: SystemStyleObject): string
+      raw: (styles: SystemStyleObject) => SystemStyleObject
+    }
+
+    export declare const css: CssFunction;
     `,
     js: outdent4`
     ${ctx.file.import("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
     const classNameMap = ${stringify(utility.entries())}
-    
+
     const shorthands = ${stringify(utility.shorthands)}
-    
+
     const breakpointKeys = ${JSON.stringify(conditions.breakpoints.keys)}
 
     const hasShorthand = ${utility.hasShorthand ? "true" : "false"}
@@ -632,6 +638,7 @@ function generateCssFn(ctx) {
     }
 
     export const css = createCss(context)
+    css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
@@ -895,8 +902,13 @@ function generatePattern(ctx) {
 
           type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
+          interface ${upperName}PatternFn {
+            (options?: ${upperName}Options): string
+            raw: (options: ${upperName}Options) => ${upperName}Options
+          }
+
           ${description ? `/** ${description} */` : ""}
-          export declare function ${name}(options?: ${upperName}Options): string
+          export declare const ${name}: ${upperName}PatternFn;
           `}
 
      `,
@@ -910,6 +922,7 @@ transform`)}
     export const ${styleFnName} = (styles = {}) => ${name}Config.transform(styles, { map: mapObject })
 
     export const ${name} = (styles) => css(${styleFnName}(styles))
+    ${name}.raw = (styles) => styles
     `
     };
   });
@@ -986,17 +999,14 @@ function generateRecipes(ctx) {
           compoundVariants ?? []
         )})
 
-        const variantKeys = ${stringify3(Object.keys(variantKeyMap))}
-
-        function splitVariantProps(props) {
-          return splitProps(props, variantKeys)
-        }
-        
         export const ${name} = Object.assign(${name}Fn, {
           __recipe__: true,
-          variantKeys,
+          raw: (props) => props,
+          variantKeys: ${stringify3(Object.keys(variantKeyMap))},
           variantMap: ${stringify3(variantKeyMap)},
-          splitVariantProps,
+          splitVariantProps(props) {
+            return splitProps(props, ${stringify3(Object.keys(variantKeyMap))})
+          },
         })
         `,
         dts: outdent11`
@@ -1023,6 +1033,7 @@ function generateRecipes(ctx) {
         interface ${upperName}Recipe {
           __type: ${upperName}VariantProps
           (props?: ${upperName}VariantProps): string
+          raw: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
           variantMap: ${upperName}VariantMap
           variantKeys: Array<keyof ${upperName}Variant>
           splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<Omit<Props, keyof ${upperName}VariantProps>>]
@@ -1710,12 +1721,16 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent25`
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
@@ -1801,10 +1816,14 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent27`
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
   displayName?: string
@@ -2636,38 +2655,38 @@ function generateJsxPatterns(ctx) {
 // src/artifacts/pkg-json.ts
 function generatePackageJson(ctx) {
   const {
-    config: { outdir }
+    config: { outdir, outExtension: ext = "mjs" }
   } = ctx;
   const pkg = {
     name: outdir,
-    description: "This package is auto-generated by CSS Panda",
+    description: "This package is auto-generated by Panda CSS",
     version: `0.0.0-${performance.now()}`,
     type: "module",
     exports: {
       "./css": {
         types: "./css/index.d.ts",
-        require: "./css/index.mjs",
-        import: "./css/index.mjs"
+        require: `./css/index.${ext}`,
+        import: `./css/index.${ext}`
       },
       "./jsx": {
         types: "./jsx/index.d.ts",
-        require: "./jsx/index.mjs",
-        import: "./jsx/index.mjs"
+        require: `./jsx/index.${ext}`,
+        import: `./jsx/index.${ext}`
       },
       "./patterns": {
         types: "./patterns/index.d.ts",
-        require: "./patterns/index.mjs",
-        import: "./patterns/index.mjs"
+        require: `./patterns/index.${ext}`,
+        import: `./patterns/index.${ext}`
       },
       "./recipes": {
         types: "./recipes/index.d.ts",
-        require: "./recipes/index.mjs",
-        import: "./recipes/index.mjs"
+        require: `./recipes/index.${ext}`,
+        import: `./recipes/index.${ext}`
       },
       "./tokens": {
         types: "./tokens/index.d.ts",
-        require: "./tokens/index.mjs",
-        import: "./tokens/index.mjs"
+        require: `./tokens/index.${ext}`,
+        import: `./tokens/index.${ext}`
       },
       "./types": {
         types: "./types/index.d.ts"
@@ -3417,10 +3436,10 @@ var defaults = (conf) => ({
   }
 });
 var getImportMap = (outdir) => ({
-  css: `${outdir}/css`,
-  recipe: `${outdir}/recipes`,
-  pattern: `${outdir}/patterns`,
-  jsx: `${outdir}/jsx`
+  css: [outdir, "css"],
+  recipe: [outdir, "recipes"],
+  pattern: [outdir, "patterns"],
+  jsx: [outdir, "jsx"]
 });
 var createGenerator = (conf) => {
   const ctx = getEngine(defaults(conf));
@@ -3428,7 +3447,7 @@ var createGenerator = (conf) => {
   const compilerOptions = conf.tsconfig?.compilerOptions ?? {};
   const baseUrl = compilerOptions.baseUrl ?? "";
   const cwd = conf.config.cwd;
-  const relativeBaseUrl = baseUrl ? baseUrl.replace(cwd, "").slice(1) + "/" : cwd;
+  const relativeBaseUrl = baseUrl !== cwd ? baseUrl.replace(cwd, "").slice(1) : cwd;
   return {
     ...ctx,
     getArtifacts: generateArtifacts(ctx),
@@ -3442,7 +3461,9 @@ var createGenerator = (conf) => {
         isStyleProp: isValidProperty,
         nodes: [...patterns.nodes, ...recipes.nodes]
       },
-      getRecipesByJsxName: recipes.filter
+      getRecipesByJsxName: recipes.filter,
+      compilerOptions,
+      tsOptions: conf.tsOptions
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -19,18 +19,18 @@
     "outdent": " ^0.8.0",
     "pluralize": "8.0.0",
     "postcss": "8.4.25",
-    "ts-pattern": "5.0.1",
-    "@pandacss/core": "0.7.0",
-    "@pandacss/is-valid-prop": "0.7.0",
-    "@pandacss/logger": "0.7.0",
-    "@pandacss/shared": "0.7.0",
-    "@pandacss/token-dictionary": "0.7.0",
-    "@pandacss/types": "0.7.0"
+    "ts-pattern": "5.0.4",
+    "@pandacss/core": "0.8.0",
+    "@pandacss/is-valid-prop": "0.8.0",
+    "@pandacss/logger": "0.8.0",
+    "@pandacss/shared": "0.8.0",
+    "@pandacss/token-dictionary": "0.8.0",
+    "@pandacss/types": "0.8.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.30",
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.7.0"
+    "@pandacss/fixture": "0.8.0"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",