@pandacss/node 0.0.0-dev-20221222102219 → 0.0.0-dev-20221229135204

package/dist/index.mjs

@@ -81,7 +81,7 @@ async function writeFileChunk(ctx, file) {
 
 // src/generators/index.ts
 import { readFileSync as readFileSync3 } from "fs";
-import outdent22 from "outdent";
+import outdent25 from "outdent";
 
 // src/generators/conditions.ts
 import { unionType } from "@pandacss/shared";
@@ -289,21 +289,6 @@ function generatePreactJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = capitalize(name);
   return {
-    dts: outdent6`
-    import type { ComponentProps, JSX } from 'preact'
-    import type { JSXStyleProperties } from '../types'
-    
-    type Element = keyof JSX.IntrinsicElements
-    
-    export type HTML${upperName}Props<T extends Element> = Omit<ComponentProps<T>, 'color'> | JSXStyleProperties
-    
-
-    type JSXFactory = {
-      [K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element
-    }
-
-    export declare const ${name}: JSXFactory
-    `,
     js: outdent6`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
@@ -451,19 +436,11 @@ function generate(name, pattern, jsxFactory) {
     })    
     `,
     dts: outdent8`
-    import { ComponentProps, JSX, ComponentChildren } from 'preact';
     import { ${upperName}Properties } from '../patterns/${dashCase(name)}'
-    import { JSXStyleProperties, Assign } from '../types'
-    
-    type ElementType = keyof JSX.IntrinsicElements
-        
-    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties |
-      Assign<Omit<ComponentProps<C>, 'color'>, P & { as?: C }>
+    import { PolymorphicComponent } from '../types/jsx'
 
-    type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Properties>
-    
     ${pattern.description ? `/** ${pattern.description} */` : ""}
-    export declare function ${jsxName}<V extends ElementType = 'div'>(props: ${jsxName}Props<V>): JSX.Element    
+    export declare const ${jsxName}: PolymorphicComponent<"div", ${upperName}Properties>
     `
   };
 }
@@ -471,28 +448,59 @@ function generatePreactJsxPattern(ctx) {
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate(name, pattern, ctx.jsxFactory));
 }
 
-// src/generators/jsx/react-jsx.ts
+// src/generators/jsx/preact-types.ts
 import { capitalize as capitalize3 } from "@pandacss/shared";
 import { outdent as outdent9 } from "outdent";
-function generateReactJsxFactory(ctx) {
+function generatePreactJsxTypes(ctx) {
   const name = ctx.jsxFactory;
   const upperName = capitalize3(name);
   return {
-    dts: outdent9`
-    import type { ComponentProps } from "react"
-    import type { JSXStyleProperties } from "../types"
-    
-    type Element = keyof JSX.IntrinsicElements
+    jsxFactory: outdent9`
+import { PolymorphicComponents } from '../types/jsx'
+export declare const ${name}: PolymorphicComponents
+    `,
+    jsxType: outdent9`
+import type { JSX, ComponentProps, ElementType } from 'preact'
+import type { JsxStyleProps, Assign } from '.'
 
-    export type HTML${upperName}Props<T extends Element> = Omit<ComponentProps<T>, 'color'> | JSXStyleProperties;
+type Element = keyof JSX.IntrinsicElements
+type As<P = any> = JSX.ElementType<P>
+type Dict<T = unknown> = Record<string, T>
 
-    type JSXFactory = {
-      [K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element
-    }
+type Clean<T> = Omit<T, 'transition' | 'as' | 'color'>
 
-    export declare const ${name}: JSXFactory
-    `,
-    js: outdent9`
+type PolymorphicProps<
+  ComponentProps extends Dict,
+  AsProps extends Dict,
+  AdditionalProps extends Dict = {},
+  AsComponent extends As = As,
+> = Assign<Clean<ComponentProps>, AdditionalProps> &
+  Assign<Clean<AsProps>, AdditionalProps> & {
+    as?: AsComponent
+  }
+
+export type PolymorphicComponent<C extends As, P extends Dict = {}> = {
+  <E extends As = C>(props: PolymorphicProps<ComponentProps<C>, ComponentProps<E>, P, E> & JsxStyleProps<P>): JSX.Element
+  displayName?: string
+}
+
+export type PolymorphicComponents = {
+  [K in Element]: PolymorphicComponent<K, {}>
+}
+
+export type HTML${upperName}Props<T extends As> = Clean<ComponentProps<T>> & JsxStyleProps
+  `
+  };
+}
+
+// src/generators/jsx/react-jsx.ts
+import { capitalize as capitalize4 } from "@pandacss/shared";
+import { outdent as outdent10 } from "outdent";
+function generateReactJsxFactory(ctx) {
+  const name = ctx.jsxFactory;
+  const upperName = capitalize4(name);
+  return {
+    js: outdent10`
     import { forwardRef } from 'react'
     import { isCssProperty } from './is-valid-prop'
     import { css } from '../css'
@@ -554,10 +562,10 @@ function generateReactJsxFactory(ctx) {
 }
 
 // src/generators/jsx/react-layout-grid.ts
-import { outdent as outdent10 } from "outdent";
+import { outdent as outdent11 } from "outdent";
 function generateReactLayoutGrid() {
   return {
-    dts: outdent10`
+    dts: outdent11`
     import type { FunctionComponent } from 'react'
 
     export type LayoutGridProps = {
@@ -569,7 +577,7 @@ function generateReactLayoutGrid() {
 
     export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
     `,
-    js: outdent10`
+    js: outdent11`
     export function LayoutGrid(props) {
         const { count = 12, margin, gutter = '24px', maxWidth } = props
         const hasMaxWidth = maxWidth != null;
@@ -607,17 +615,17 @@ function generateReactLayoutGrid() {
 }
 
 // src/generators/jsx/react-pattern.ts
-import { capitalize as capitalize4, dashCase as dashCase2 } from "@pandacss/shared";
-import { outdent as outdent11 } from "outdent";
+import { capitalize as capitalize5, dashCase as dashCase2 } from "@pandacss/shared";
+import { outdent as outdent12 } from "outdent";
 import { match as match2 } from "ts-pattern";
 function generate2(name, pattern, jsxFactory) {
-  const upperName = capitalize4(name);
+  const upperName = capitalize5(name);
   const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: dashCase2(name),
-    js: outdent11`
+    js: outdent12`
     import { forwardRef } from 'react'
     import { ${jsxFactory} } from './factory'
     import { ${upperFn} } from '../patterns/${dashCase2(name)}'
@@ -625,11 +633,11 @@ function generate2(name, pattern, jsxFactory) {
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
       ${match2(keys.length).with(
       0,
-      () => outdent11`
+      () => outdent12`
           return <${jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
-      () => outdent11`
+      () => outdent12`
         const { ${keys.join(", ")}, ...restProps } = props
         const styleProps = ${upperFn}({${keys.join(", ")}})
         return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
@@ -638,19 +646,12 @@ function generate2(name, pattern, jsxFactory) {
         
     })    
     `,
-    dts: outdent11`
-    import { ComponentProps, ElementType } from 'react'
+    dts: outdent12`
     import { ${upperName}Properties } from '../patterns/${dashCase2(name)}'
-    import { JSXStyleProperties, Assign } from '../types'
-    
-    type Polymorphic<C extends ElementType = "div", P = {}> =
-      | JSXStyleProperties
-      | Assign<Omit<ComponentProps<C>, "color">, P & { as?: C }>
+    import { PolymorphicComponent } from '../types/jsx'
 
-    export type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Properties>
-    
     ${pattern.description ? `/** ${pattern.description} */` : ""}
-    export declare function ${jsxName}<V extends ElementType = 'div'>(props: ${jsxName}Props<V>): JSX.Element    
+    export declare const ${jsxName}: PolymorphicComponent<"div", ${upperName}Properties>
     `
   };
 }
@@ -658,28 +659,59 @@ function generateReactJsxPattern(ctx) {
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate2(name, pattern, ctx.jsxFactory));
 }
 
-// src/generators/jsx/solid-jsx.ts
-import { capitalize as capitalize5 } from "@pandacss/shared";
-import { outdent as outdent12 } from "outdent";
-function generateSolidJsxFactory(ctx) {
+// src/generators/jsx/react-types.ts
+import { capitalize as capitalize6 } from "@pandacss/shared";
+import { outdent as outdent13 } from "outdent";
+function generateReactJsxTypes(ctx) {
   const name = ctx.jsxFactory;
-  const upperName = capitalize5(name);
+  const upperName = capitalize6(name);
   return {
-    dts: outdent12`
-    import type { JSX } from 'solid-js'
-    import type { JSXStyleProperties, Assign} from '../types'
-    
-    type Element = keyof JSX.IntrinsicElements
-    
-    export type HTML${upperName}Props<T extends Element> = Omit<JSX.IntrinsicElements[T], 'color'> | JSXStyleProperties
+    jsxFactory: outdent13`
+import { PolymorphicComponents } from '../types/jsx'
+export declare const ${name}: PolymorphicComponents
+    `,
+    jsxType: outdent13`
+import type { ElementType, ComponentProps } from 'react'
+import type { JsxStyleProps, Assign } from '.'
 
-    type JSXFactory = {
-      [K in Element]: (props: HTML${upperName}Props<K>) => JSX.Element
-    }
+type Element = keyof JSX.IntrinsicElements
+type As<P = any> = ElementType<P>
+type Dict<T = unknown> = Record<string, T>
 
-    export declare const ${name}: JSXFactory
-    `,
-    js: outdent12`
+type Clean<T> = Omit<T, 'transition' | 'as' | 'color'>
+
+type PolymorphicProps<
+  ComponentProps extends Dict,
+  AsProps extends Dict,
+  AdditionalProps extends Dict = {},
+  AsComponent extends As = As,
+> = Assign<Clean<ComponentProps>, AdditionalProps> &
+  Assign<Clean<AsProps>, AdditionalProps> & {
+    as?: AsComponent
+  }
+
+export type PolymorphicComponent<C extends As, P extends Dict = {}> = {
+  <E extends As = C>(props: PolymorphicProps<ComponentProps<C>, ComponentProps<E>, P, E> & JsxStyleProps<P>): JSX.Element
+  displayName?: string
+}
+
+export type PolymorphicComponents = {
+  [K in Element]: PolymorphicComponent<K, {}>
+}
+
+export type HTML${upperName}Props<T extends As> = Clean<ComponentProps<T>> & JsxStyleProps
+  `
+  };
+}
+
+// src/generators/jsx/solid-jsx.ts
+import { capitalize as capitalize7 } from "@pandacss/shared";
+import { outdent as outdent14 } from "outdent";
+function generateSolidJsxFactory(ctx) {
+  const name = ctx.jsxFactory;
+  const upperName = capitalize7(name);
+  return {
+    js: outdent14`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { allCssProperties } from './is-valid-prop'
@@ -728,10 +760,10 @@ function generateSolidJsxFactory(ctx) {
 }
 
 // src/generators/jsx/solid-layout-grid.ts
-import { outdent as outdent13 } from "outdent";
+import { outdent as outdent15 } from "outdent";
 function generateSolidLayoutGrid() {
   return {
-    dts: outdent13`
+    dts: outdent15`
     export type LayoutGridProps = {
         count?: number
         gutter?: string
@@ -741,7 +773,7 @@ function generateSolidLayoutGrid() {
 
     export declare const LayoutGrid: React.FC<LayoutGridProps>
     `,
-    js: outdent13`
+    js: outdent15`
     export function LayoutGrid(props) {
         const { count = 12, margin, gutter = '24px', maxWidth } = props
         const hasMaxWidth = maxWidth != null;
@@ -779,17 +811,17 @@ function generateSolidLayoutGrid() {
 }
 
 // src/generators/jsx/solid-pattern.ts
-import { capitalize as capitalize6, dashCase as dashCase3 } from "@pandacss/shared";
-import { outdent as outdent14 } from "outdent";
+import { capitalize as capitalize8, dashCase as dashCase3 } from "@pandacss/shared";
+import { outdent as outdent16 } from "outdent";
 import { match as match3 } from "ts-pattern";
 function generate3(name, pattern, jsxFactory) {
-  const upperName = capitalize6(name);
+  const upperName = capitalize8(name);
   const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: dashCase3(name),
-    js: outdent14`
+    js: outdent16`
     import { splitProps } from 'solid-js'
     import { ${jsxFactory} } from './factory'
     import { ${upperFn} } from '../patterns/${dashCase3(name)}'
@@ -797,11 +829,11 @@ function generate3(name, pattern, jsxFactory) {
     export function ${jsxName}(props) {
       ${match3(keys.length).with(
       0,
-      () => outdent14`
+      () => outdent16`
           return <${jsxFactory}.div {...props} />
         `
     ).otherwise(
-      () => outdent14`
+      () => outdent16`
           const [patternProps, restProps] = splitProps(props, [${keys.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${upperFn}(patternProps)
           return <${jsxFactory}.div {...styleProps} {...restProps} />
@@ -809,20 +841,12 @@ function generate3(name, pattern, jsxFactory) {
     )}
     }
     `,
-    dts: outdent14`
-    import { ComponentProps, JSX } from 'solid-js'
+    dts: outdent16`
     import { ${upperName}Properties } from '../patterns/${dashCase3(name)}'
-    import { Assign, JSXStyleProperties } from '../types'
-    
-    type ElementType = keyof JSX.IntrinsicElements
-    
-    type Polymorphic<C extends ElementType = 'div', P = {}> = JSXStyleProperties |
-      Assign<Omit<ComponentProps<C>, 'color'>, P & { as?: C }>
+    import { PolymorphicComponent } from '../types/jsx'
 
-    export type ${jsxName}Props<C extends ElementType = 'div'> = Polymorphic<C, ${upperName}Properties>
-    
     ${pattern.description ? `/** ${pattern.description} */` : ""}
-    export declare function ${jsxName}<V extends ElementType = 'div'>(props: ${jsxName}Props<V>): JSX.Element    
+    export declare const ${jsxName}: PolymorphicComponent<"div", ${upperName}Properties>
     `
   };
 }
@@ -830,7 +854,62 @@ function generateSolidJsxPattern(ctx) {
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate3(name, pattern, ctx.jsxFactory));
 }
 
+// src/generators/jsx/solid-types.ts
+import { capitalize as capitalize9 } from "@pandacss/shared";
+import { outdent as outdent17 } from "outdent";
+function generateSolidJsxTypes(ctx) {
+  const name = ctx.jsxFactory;
+  const upperName = capitalize9(name);
+  return {
+    jsxFactory: outdent17`
+import { PolymorphicComponents } from '../types/jsx'
+export declare const ${name}: PolymorphicComponents
+    `,
+    jsxType: outdent17`
+import type { JSX, ComponentProps, Component } from 'solid-js'
+import type { JsxStyleProps, Assign } from '.'
+
+type Element = keyof JSX.IntrinsicElements
+type As<P = any> = Element | Component<P>;
+type Dict<T = unknown> = Record<string, T>
+
+type Clean<T> = Omit<T, 'transition' | 'as' | 'color'>
+
+type PolymorphicProps<
+  ComponentProps extends Dict,
+  AsProps extends Dict,
+  AdditionalProps extends Dict = {},
+  AsComponent extends As = As,
+> = Assign<Clean<ComponentProps>, AdditionalProps> &
+  Assign<Clean<AsProps>, AdditionalProps> & {
+    as?: AsComponent
+  }
+
+export type PolymorphicComponent<C extends As, P extends Dict = {}> = {
+  <E extends As = C>(props: PolymorphicProps<ComponentProps<C>, ComponentProps<E>, P, E> & JsxStyleProps<P>): JSX.Element
+  displayName?: string
+}
+
+export type PolymorphicComponents = {
+  [K in Element]: PolymorphicComponent<K, {}>
+}
+
+export type HTML${upperName}Props<T extends As> = Clean<ComponentProps<T>> & JsxStyleProps
+  `
+  };
+}
+
 // src/generators/jsx/index.ts
+var typesMap = {
+  react: generateReactJsxTypes,
+  preact: generatePreactJsxTypes,
+  solid: generateSolidJsxTypes
+};
+function generateJsxTypes(ctx) {
+  if (!ctx.jsxFramework)
+    return;
+  return typesMap[ctx.jsxFramework](ctx);
+}
 var factoryMap = {
   react: generateReactJsxFactory,
   solid: generateSolidJsxFactory,
@@ -859,22 +938,22 @@ function generateLayoutGrid(ctx) {
 }
 
 // src/generators/pattern.ts
-import { capitalize as capitalize7, dashCase as dashCase4, unionType as unionType2 } from "@pandacss/shared";
-import { outdent as outdent15 } from "outdent";
+import { capitalize as capitalize10, dashCase as dashCase4, unionType as unionType2 } from "@pandacss/shared";
+import { outdent as outdent18 } from "outdent";
 import { stringify as stringify2 } from "telejson";
 import { match as match4 } from "ts-pattern";
 function generate4(name, pattern) {
   const { properties, transform, strict, description } = pattern;
-  const upperName = capitalize7(name);
+  const upperName = capitalize10(name);
   const upperFn = `get${upperName}Style`;
   return {
     name: dashCase4(name),
-    dts: outdent15`
+    dts: outdent18`
     import { SystemStyleObject, ConditionalValue } from "../types"
     import { Properties } from "../types/csstype"
     import { Tokens } from "../types/token"
 
-    export type ${capitalize7(name)}Properties = {
+    export type ${capitalize10(name)}Properties = {
        ${Object.keys(properties ?? {}).map((key) => {
       const value = properties[key];
       return match4(value).with({ type: "property" }, (value2) => {
@@ -892,15 +971,14 @@ function generate4(name, pattern) {
     }).join("\n	")}
     }
 
-    ${strict ? outdent15`export declare function ${name}(options: ${upperName}Properties): string` : outdent15`
-        type Merge<T extends Record<string, any>> = SystemStyleObject | T
-
+    ${strict ? outdent18`export declare function ${name}(options: ${upperName}Properties): string` : outdent18`
+        
         ${description ? `/** ${description} */` : ""}
-        export declare function ${name}(options: Merge<${upperName}Properties>): string
+        export declare function ${name}(options: SystemStyleObject<${upperName}Properties>): string
         `}
 
    `,
-    js: outdent15`
+    js: outdent18`
   import { mapObject } from "../helpers"
   import { css } from "../css"
 
@@ -919,10 +997,10 @@ function generatePattern(ctx) {
 }
 
 // src/generators/prop-types.ts
-import { outdent as outdent16 } from "outdent";
+import { outdent as outdent19 } from "outdent";
 function generatePropTypes(utility) {
   const result = [
-    outdent16`
+    outdent19`
     import { Properties as CSSProperties } from "./csstype"
 
     type BasePropTypes  = {`
@@ -949,15 +1027,15 @@ function generatePropTypes(utility) {
 }
 
 // src/generators/recipe.ts
-import { capitalize as capitalize8, unionType as unionType3 } from "@pandacss/shared";
-import { outdent as outdent17 } from "outdent";
+import { capitalize as capitalize11, unionType as unionType3 } from "@pandacss/shared";
+import { outdent as outdent20 } from "outdent";
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
   const { separator } = utility;
   if (!hasRecipes)
     return;
   const js = [
-    outdent17`
+    outdent20`
    import { createCss, withoutSpace } from "../helpers"
 
    const createRecipe = (name, defaultVariants) => {
@@ -992,13 +1070,13 @@ function generateRecipes(ctx) {
   const dts = [""];
   Object.values(recipes).forEach((recipe) => {
     const { name, description, defaultVariants, variants } = recipe;
-    js.push(outdent17`
+    js.push(outdent20`
     export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
     `);
-    dts.push(outdent17`
+    dts.push(outdent20`
     import { ConditionalValue } from "../types"
 
-    export type ${capitalize8(name)}Variants = {
+    export type ${capitalize11(name)}Variants = {
       ${Object.keys(variants ?? {}).map((key) => {
       const value = variants[key];
       const keys = Object.keys(value);
@@ -1007,12 +1085,12 @@ function generateRecipes(ctx) {
     }
 
     ${description ? `/** ${description} */` : ""}
-    export declare function ${name}(value?: ${capitalize8(name)}Variants): string
+    export declare function ${name}(value?: ${capitalize11(name)}Variants): string
     `);
   });
   return {
-    js: outdent17.string(js.join("\n\n")),
-    dts: outdent17.string(dts.join("\n\n"))
+    js: outdent20.string(js.join("\n\n")),
+    dts: outdent20.string(dts.join("\n\n"))
   };
 }
 
@@ -1119,14 +1197,14 @@ function generateReset() {
 
 // src/generators/token-css.ts
 import { prettifyCss, toCss, toKeyframeCss } from "@pandacss/core";
-import { outdent as outdent18 } from "outdent";
+import { outdent as outdent21 } from "outdent";
 import { match as match5 } from "ts-pattern";
 function generateKeyframes(keyframes) {
   if (!keyframes)
     return;
   return toKeyframeCss(keyframes);
 }
-var getConditionMessage = (value) => outdent18`
+var getConditionMessage = (value) => outdent21`
 It seems you provided an invalid condition for semantic tokens.
 
 - You provided: \`${value}\`
@@ -1187,8 +1265,8 @@ function generateTokenCss(ctx, varRoot) {
 }
 
 // src/generators/token-dts.ts
-import { unionType as unionType4, capitalize as capitalize9 } from "@pandacss/shared";
-import { outdent as outdent19 } from "outdent";
+import { unionType as unionType4, capitalize as capitalize12 } from "@pandacss/shared";
+import { outdent as outdent22 } from "outdent";
 import pluralize from "pluralize";
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
@@ -1198,7 +1276,7 @@ function generateTokenDts(dict) {
     interfaceSet.add("[token: string]: string");
   } else {
     for (const [key, value] of dict.categoryMap.entries()) {
-      const typeName = capitalize9(pluralize.singular(key));
+      const typeName = capitalize12(pluralize.singular(key));
       set.add(`export type ${typeName} = ${unionType4(value.keys())}`);
       set.add(`export type ColorPalette = ${unionType4(Object.keys(dict.colorPalettes))}`);
       interfaceSet.add(`		${key}: ${typeName}`);
@@ -1206,11 +1284,11 @@ function generateTokenDts(dict) {
   }
   interfaceSet.add("}");
   set.add(Array.from(interfaceSet).join("\n"));
-  return outdent19.string(Array.from(set).join("\n\n"));
+  return outdent22.string(Array.from(set).join("\n\n"));
 }
 
 // src/generators/token-js.ts
-import outdent20 from "outdent";
+import outdent23 from "outdent";
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -1220,7 +1298,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: outdent20`
+    js: outdent23`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   function getToken(path) {
@@ -1233,7 +1311,7 @@ function generateTokenJs(dict) {
     return variable
   }
   `,
-    dts: outdent20`
+    dts: outdent23`
   import { Token } from "../types/token"
   export declare function getToken(path: Token): string
   export declare function getTokenVar(path: Token): string
@@ -1243,27 +1321,29 @@ function generateTokenJs(dict) {
 
 // src/generators/types.ts
 import { readFileSync as readFileSync2 } from "fs-extra";
-import outdent21 from "outdent";
+import outdent24 from "outdent";
 function getType(file) {
   const filepath = getEntrypoint("@pandacss/types", { dev: file });
   return readFileSync2(filepath, "utf8");
 }
 function generateCssType(ctx) {
   const strict = ctx.strictTokens;
+  const strictArg = strict ? "true" : "false";
   return {
     cssType: getType("csstype.d.ts"),
     pandaCssType: getType("system-types.d.ts"),
-    publicType: outdent21`
+    publicType: outdent24`
     import * as System from './system-types'
     import { PropTypes } from './prop-type'
     import { Conditions } from './conditions'
     
-    export type SystemStyleObject = System.StyleObject<Conditions, PropTypes${strict ? ", true" : ""}>
-    export type GlobalStyleObject = System.GlobalStyleObject<Conditions, PropTypes${strict ? ", true" : ""}>
-    export type JSXStyleProperties = System.JSXStyleProperties<Conditions, PropTypes${strict ? ", true" : ""}>
+    export type SystemStyleObject<Overrides = {}> = System.StyleObject<Conditions, PropTypes, ${strictArg}, Overrides>
+    export type GlobalStyleObject<Overrides = {}> = System.GlobalStyleObject<Conditions, PropTypes, ${strictArg}, Overrides>
+    export type JsxStyleProps<Overrides = {}> = System.JsxStyleProps<Conditions, PropTypes, ${strictArg}, Overrides>
+    export type ConditionalValue<Value> = System.Conditional<Conditions, Value>
 
-    export type ConditionalValue<T> = System.Conditional<Conditions, T>
-    export type Assign<T, U> = Omit<T, keyof U> & U
+    type DistributiveOmit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never
+    export type Assign<Target, Override> = DistributiveOmit<Target, keyof Override> & Override
     `
   };
 }
@@ -1312,16 +1392,18 @@ function setupGlobalCss(ctx) {
 function setupTypes(ctx) {
   const code = generateCssType(ctx);
   const conditions = generateConditions(ctx);
+  const jsx = generateJsxTypes(ctx);
   return {
     dir: ctx.paths.types,
     files: [
+      jsx ? { file: "jsx.d.ts", code: jsx.jsxType } : null,
       { file: "csstype.d.ts", code: code.cssType },
       { file: "system-types.d.ts", code: code.pandaCssType },
       { file: "index.d.ts", code: code.publicType },
       { file: "token.d.ts", code: generateTokenDts(ctx.tokens) },
       { file: "prop-type.d.ts", code: generatePropTypes(ctx.utility) },
       { file: "conditions.d.ts", code: conditions.dts }
-    ]
+    ].filter(Boolean)
   };
 }
 function setupCss(ctx) {
@@ -1374,11 +1456,11 @@ function setupPatterns(ctx) {
   if (!files) {
     return { files: [] };
   }
-  const indexCode = outdent22.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  const indexCode = outdent25.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
   return {
     dir: ctx.paths.pattern,
     files: [
-      ...files.map((file) => ({ file: `${file.name}.js`, code: file.js })),
+      ...files.map((file) => ({ file: `${file.name}.mjs`, code: file.js })),
       ...files.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
       { file: "index.mjs", code: indexCode },
       { file: "index.d.ts", code: indexCode }
@@ -1389,13 +1471,14 @@ function setupJsx(ctx) {
   if (!ctx.jsxFramework)
     return { files: [] };
   const isValidProp = generateisValidProp(ctx);
+  const types = generateJsxTypes(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const layoutGrid = generateLayoutGrid(ctx);
-  const indexCode = outdent22`
+  const indexCode = outdent25`
   export * from './factory'
   export * from './layout-grid'
-  ${outdent22.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${outdent25.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
 `;
   return {
     dir: ctx.paths.jsx,
@@ -1405,7 +1488,7 @@ function setupJsx(ctx) {
       { file: "layout-grid.jsx", code: layoutGrid.js },
       { file: "layout-grid.d.ts", code: layoutGrid.dts },
       { file: "is-valid-prop.mjs", code: isValidProp.js },
-      { file: "factory.d.ts", code: factory.dts },
+      { file: "factory.d.ts", code: types.jsxFactory },
       { file: "factory.jsx", code: factory.js },
       { file: "index.d.ts", code: indexCode },
       { file: "index.jsx", code: indexCode }
@@ -1413,7 +1496,7 @@ function setupJsx(ctx) {
   };
 }
 function setupCssIndex(ctx) {
-  const code = outdent22`
+  const code = outdent25`
   export * from './css'
   export * from './cx'
   export * from './global-css'
@@ -1453,30 +1536,30 @@ function generateSystem(ctx) {
 
 // src/messages.ts
 import { colors, logger as logger3, quote as quote2 } from "@pandacss/logger";
-import { outdent as outdent23 } from "outdent";
+import { outdent as outdent26 } from "outdent";
 var tick = colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    outdent23`
+    outdent26`
       ${tick} ${quote2(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && outdent23`
+    ctx.hasTokens && outdent26`
       ${tick} ${quote2(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    ctx.hasPatterns && outdent23`
+    ctx.hasPatterns && outdent26`
       ${tick} ${quote2(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && outdent23`
+    ctx.hasRecipes && outdent26`
       ${tick} ${quote2(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && outdent23`
+    ctx.jsxFramework && outdent26`
       ${tick} ${quote2(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
     `,
     "\n"
   ].filter(Boolean).join("\n");
 }
 function configExistsMessage(cmd) {
-  return outdent23`
+  return outdent26`
       \n
       It looks like you already have panda created\`.
       
@@ -1485,7 +1568,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return outdent23`
+  return outdent26`
 
   🚀 Thanks for choosing ${colors.cyan("Panda")} to write your css.
 
@@ -1497,7 +1580,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 function scaffoldCompleteMessage() {
   return logger3.box(
-    outdent23`
+    outdent26`
 
   ${colors.bold().cyan("Next steps:")}
   
@@ -1513,12 +1596,12 @@ function scaffoldCompleteMessage() {
   );
 }
 function watchMessage() {
-  return outdent23`
+  return outdent26`
   Watching for file changes...
   `;
 }
 function buildCompleteMessage(ctx) {
-  return outdent23`
+  return outdent26`
   Successfully extracted css from ${ctx.files.length} file(s) ✨
   `;
 }
@@ -1574,7 +1657,7 @@ import {
 import { isCssProperty } from "@pandacss/is-valid-prop";
 import { logger as logger4 } from "@pandacss/logger";
 import { createParser, createProject } from "@pandacss/parser";
-import { capitalize as capitalize10, compact, mapObject, uncapitalize } from "@pandacss/shared";
+import { capitalize as capitalize13, compact, mapObject, uncapitalize } from "@pandacss/shared";
 import { TokenDictionary } from "@pandacss/token-dictionary";
 import glob from "fast-glob";
 import { readdirSync, readFileSync as readFileSync4 } from "fs";
@@ -1679,7 +1762,7 @@ function createContext(conf, io = fileSystem) {
   }
   const patternNodes = Object.entries(patterns).map(([name, pattern]) => ({
     type: "pattern",
-    name: pattern.jsx ?? capitalize10(name),
+    name: pattern.jsx ?? capitalize13(name),
     props: Object.keys(pattern.properties),
     baseName: name
   }));
@@ -1692,7 +1775,7 @@ function createContext(conf, io = fileSystem) {
   }
   const recipeNodes = Object.entries(recipes).map(([name, recipe]) => ({
     type: "recipe",
-    name: recipe.jsx ?? capitalize10(name),
+    name: recipe.jsx ?? capitalize13(name),
     props: Object.keys(recipe.variants ?? {}),
     baseName: name
   }));
@@ -1713,7 +1796,7 @@ function createContext(conf, io = fileSystem) {
     }));
   }
   const hasRecipes = Object.keys(recipes).length > 0;
-  const properties = Array.from(/* @__PURE__ */ new Set(["css", ...utility.keys(), ...conditions.keys()]));
+  const properties = Array.from(/* @__PURE__ */ new Set(["css", "sx", ...utility.keys(), ...conditions.keys()]));
   function isCustomCssProperty(prop) {
     const regex = new RegExp("^(?:" + properties.join("|") + ")$");
     return regex.test(prop);
@@ -2259,9 +2342,9 @@ async function generate5(config, configPath) {
 // src/git-ignore.ts
 import { appendFileSync, readFileSync as readFileSync6, writeFileSync } from "fs";
 import { lookItUpSync as lookItUpSync2 } from "look-it-up";
-import outdent24 from "outdent";
+import outdent27 from "outdent";
 function setupGitIgnore(ctx) {
-  const txt = outdent24`## CSS Panda
+  const txt = outdent27`## CSS Panda
   ${ctx.outdir}
   ${ctx.outdir}-static
   `;
@@ -2279,7 +2362,7 @@ function setupGitIgnore(ctx) {
 import { logger as logger9, quote as quote3 } from "@pandacss/logger";
 import { writeFile as writeFile2 } from "fs-extra";
 import { lookItUpSync as lookItUpSync3 } from "look-it-up";
-import { outdent as outdent25 } from "outdent";
+import { outdent as outdent28 } from "outdent";
 import { join as join4 } from "path";
 import getPackageManager2 from "preferred-pm";
 async function setupConfig(cwd, { force }) {
@@ -2293,7 +2376,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     logger9.warn("config exists", configExistsMessage(cmd));
   } else {
-    const content = outdent25`
+    const content = outdent28`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -2319,7 +2402,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   logger9.info({ type: "init", msg: `creating postcss config file: ${quote3("postcss.config.cjs")}` });
-  const content = outdent25`
+  const content = outdent28`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},