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

package/dist/index.js

@@ -127,7 +127,7 @@ async function writeFileChunk(ctx, file) {
 
 // src/generators/index.ts
 var import_fs2 = require("fs");
-var import_outdent22 = __toESM(require("outdent"));
+var import_outdent25 = __toESM(require("outdent"));
 
 // src/generators/conditions.ts
 var import_shared = require("@pandacss/shared");
@@ -335,21 +335,6 @@ function generatePreactJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = (0, import_shared2.capitalize)(name);
   return {
-    dts: import_outdent6.outdent`
-    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: import_outdent6.outdent`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
@@ -497,19 +482,11 @@ function generate(name, pattern, jsxFactory) {
     })    
     `,
     dts: import_outdent8.outdent`
-    import { ComponentProps, JSX, ComponentChildren } from 'preact';
     import { ${upperName}Properties } from '../patterns/${(0, import_shared3.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>
     `
   };
 }
@@ -517,28 +494,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
 var import_shared4 = require("@pandacss/shared");
 var import_outdent9 = require("outdent");
-function generateReactJsxFactory(ctx) {
+function generatePreactJsxTypes(ctx) {
   const name = ctx.jsxFactory;
   const upperName = (0, import_shared4.capitalize)(name);
   return {
-    dts: import_outdent9.outdent`
-    import type { ComponentProps } from "react"
-    import type { JSXStyleProperties } from "../types"
-    
-    type Element = keyof JSX.IntrinsicElements
+    jsxFactory: import_outdent9.outdent`
+import { PolymorphicComponents } from '../types/jsx'
+export declare const ${name}: PolymorphicComponents
+    `,
+    jsxType: import_outdent9.outdent`
+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: import_outdent9.outdent`
+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
+var import_shared5 = require("@pandacss/shared");
+var import_outdent10 = require("outdent");
+function generateReactJsxFactory(ctx) {
+  const name = ctx.jsxFactory;
+  const upperName = (0, import_shared5.capitalize)(name);
+  return {
+    js: import_outdent10.outdent`
     import { forwardRef } from 'react'
     import { isCssProperty } from './is-valid-prop'
     import { css } from '../css'
@@ -600,10 +608,10 @@ function generateReactJsxFactory(ctx) {
 }
 
 // src/generators/jsx/react-layout-grid.ts
-var import_outdent10 = require("outdent");
+var import_outdent11 = require("outdent");
 function generateReactLayoutGrid() {
   return {
-    dts: import_outdent10.outdent`
+    dts: import_outdent11.outdent`
     import type { FunctionComponent } from 'react'
 
     export type LayoutGridProps = {
@@ -615,7 +623,7 @@ function generateReactLayoutGrid() {
 
     export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
     `,
-    js: import_outdent10.outdent`
+    js: import_outdent11.outdent`
     export function LayoutGrid(props) {
         const { count = 12, margin, gutter = '24px', maxWidth } = props
         const hasMaxWidth = maxWidth != null;
@@ -653,29 +661,29 @@ function generateReactLayoutGrid() {
 }
 
 // src/generators/jsx/react-pattern.ts
-var import_shared5 = require("@pandacss/shared");
-var import_outdent11 = require("outdent");
+var import_shared6 = require("@pandacss/shared");
+var import_outdent12 = require("outdent");
 var import_ts_pattern2 = require("ts-pattern");
 function generate2(name, pattern, jsxFactory) {
-  const upperName = (0, import_shared5.capitalize)(name);
+  const upperName = (0, import_shared6.capitalize)(name);
   const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
-    name: (0, import_shared5.dashCase)(name),
-    js: import_outdent11.outdent`
+    name: (0, import_shared6.dashCase)(name),
+    js: import_outdent12.outdent`
     import { forwardRef } from 'react'
     import { ${jsxFactory} } from './factory'
-    import { ${upperFn} } from '../patterns/${(0, import_shared5.dashCase)(name)}'
+    import { ${upperFn} } from '../patterns/${(0, import_shared6.dashCase)(name)}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
       ${(0, import_ts_pattern2.match)(keys.length).with(
       0,
-      () => import_outdent11.outdent`
+      () => import_outdent12.outdent`
           return <${jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
-      () => import_outdent11.outdent`
+      () => import_outdent12.outdent`
         const { ${keys.join(", ")}, ...restProps } = props
         const styleProps = ${upperFn}({${keys.join(", ")}})
         return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
@@ -684,19 +692,12 @@ function generate2(name, pattern, jsxFactory) {
         
     })    
     `,
-    dts: import_outdent11.outdent`
-    import { ComponentProps, ElementType } from 'react'
-    import { ${upperName}Properties } from '../patterns/${(0, import_shared5.dashCase)(name)}'
-    import { JSXStyleProperties, Assign } from '../types'
-    
-    type Polymorphic<C extends ElementType = "div", P = {}> =
-      | JSXStyleProperties
-      | Assign<Omit<ComponentProps<C>, "color">, P & { as?: C }>
+    dts: import_outdent12.outdent`
+    import { ${upperName}Properties } from '../patterns/${(0, import_shared6.dashCase)(name)}'
+    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>
     `
   };
 }
@@ -704,28 +705,59 @@ function generateReactJsxPattern(ctx) {
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate2(name, pattern, ctx.jsxFactory));
 }
 
-// src/generators/jsx/solid-jsx.ts
-var import_shared6 = require("@pandacss/shared");
-var import_outdent12 = require("outdent");
-function generateSolidJsxFactory(ctx) {
+// src/generators/jsx/react-types.ts
+var import_shared7 = require("@pandacss/shared");
+var import_outdent13 = require("outdent");
+function generateReactJsxTypes(ctx) {
   const name = ctx.jsxFactory;
-  const upperName = (0, import_shared6.capitalize)(name);
+  const upperName = (0, import_shared7.capitalize)(name);
   return {
-    dts: import_outdent12.outdent`
-    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: import_outdent13.outdent`
+import { PolymorphicComponents } from '../types/jsx'
+export declare const ${name}: PolymorphicComponents
+    `,
+    jsxType: import_outdent13.outdent`
+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: import_outdent12.outdent`
+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
+var import_shared8 = require("@pandacss/shared");
+var import_outdent14 = require("outdent");
+function generateSolidJsxFactory(ctx) {
+  const name = ctx.jsxFactory;
+  const upperName = (0, import_shared8.capitalize)(name);
+  return {
+    js: import_outdent14.outdent`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { allCssProperties } from './is-valid-prop'
@@ -774,10 +806,10 @@ function generateSolidJsxFactory(ctx) {
 }
 
 // src/generators/jsx/solid-layout-grid.ts
-var import_outdent13 = require("outdent");
+var import_outdent15 = require("outdent");
 function generateSolidLayoutGrid() {
   return {
-    dts: import_outdent13.outdent`
+    dts: import_outdent15.outdent`
     export type LayoutGridProps = {
         count?: number
         gutter?: string
@@ -787,7 +819,7 @@ function generateSolidLayoutGrid() {
 
     export declare const LayoutGrid: React.FC<LayoutGridProps>
     `,
-    js: import_outdent13.outdent`
+    js: import_outdent15.outdent`
     export function LayoutGrid(props) {
         const { count = 12, margin, gutter = '24px', maxWidth } = props
         const hasMaxWidth = maxWidth != null;
@@ -825,29 +857,29 @@ function generateSolidLayoutGrid() {
 }
 
 // src/generators/jsx/solid-pattern.ts
-var import_shared7 = require("@pandacss/shared");
-var import_outdent14 = require("outdent");
+var import_shared9 = require("@pandacss/shared");
+var import_outdent16 = require("outdent");
 var import_ts_pattern3 = require("ts-pattern");
 function generate3(name, pattern, jsxFactory) {
-  const upperName = (0, import_shared7.capitalize)(name);
+  const upperName = (0, import_shared9.capitalize)(name);
   const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
-    name: (0, import_shared7.dashCase)(name),
-    js: import_outdent14.outdent`
+    name: (0, import_shared9.dashCase)(name),
+    js: import_outdent16.outdent`
     import { splitProps } from 'solid-js'
     import { ${jsxFactory} } from './factory'
-    import { ${upperFn} } from '../patterns/${(0, import_shared7.dashCase)(name)}'
+    import { ${upperFn} } from '../patterns/${(0, import_shared9.dashCase)(name)}'
 
     export function ${jsxName}(props) {
       ${(0, import_ts_pattern3.match)(keys.length).with(
       0,
-      () => import_outdent14.outdent`
+      () => import_outdent16.outdent`
           return <${jsxFactory}.div {...props} />
         `
     ).otherwise(
-      () => import_outdent14.outdent`
+      () => import_outdent16.outdent`
           const [patternProps, restProps] = splitProps(props, [${keys.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${upperFn}(patternProps)
           return <${jsxFactory}.div {...styleProps} {...restProps} />
@@ -855,20 +887,12 @@ function generate3(name, pattern, jsxFactory) {
     )}
     }
     `,
-    dts: import_outdent14.outdent`
-    import { ComponentProps, JSX } from 'solid-js'
-    import { ${upperName}Properties } from '../patterns/${(0, import_shared7.dashCase)(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 }>
+    dts: import_outdent16.outdent`
+    import { ${upperName}Properties } from '../patterns/${(0, import_shared9.dashCase)(name)}'
+    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>
     `
   };
 }
@@ -876,7 +900,62 @@ function generateSolidJsxPattern(ctx) {
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate3(name, pattern, ctx.jsxFactory));
 }
 
+// src/generators/jsx/solid-types.ts
+var import_shared10 = require("@pandacss/shared");
+var import_outdent17 = require("outdent");
+function generateSolidJsxTypes(ctx) {
+  const name = ctx.jsxFactory;
+  const upperName = (0, import_shared10.capitalize)(name);
+  return {
+    jsxFactory: import_outdent17.outdent`
+import { PolymorphicComponents } from '../types/jsx'
+export declare const ${name}: PolymorphicComponents
+    `,
+    jsxType: import_outdent17.outdent`
+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,
@@ -905,22 +984,22 @@ function generateLayoutGrid(ctx) {
 }
 
 // src/generators/pattern.ts
-var import_shared8 = require("@pandacss/shared");
-var import_outdent15 = require("outdent");
+var import_shared11 = require("@pandacss/shared");
+var import_outdent18 = require("outdent");
 var import_telejson = require("telejson");
 var import_ts_pattern4 = require("ts-pattern");
 function generate4(name, pattern) {
   const { properties, transform, strict, description } = pattern;
-  const upperName = (0, import_shared8.capitalize)(name);
+  const upperName = (0, import_shared11.capitalize)(name);
   const upperFn = `get${upperName}Style`;
   return {
-    name: (0, import_shared8.dashCase)(name),
-    dts: import_outdent15.outdent`
+    name: (0, import_shared11.dashCase)(name),
+    dts: import_outdent18.outdent`
     import { SystemStyleObject, ConditionalValue } from "../types"
     import { Properties } from "../types/csstype"
     import { Tokens } from "../types/token"
 
-    export type ${(0, import_shared8.capitalize)(name)}Properties = {
+    export type ${(0, import_shared11.capitalize)(name)}Properties = {
        ${Object.keys(properties ?? {}).map((key) => {
       const value = properties[key];
       return (0, import_ts_pattern4.match)(value).with({ type: "property" }, (value2) => {
@@ -931,22 +1010,21 @@ function generate4(name, pattern) {
         }
         return `${key}?: ConditionalValue<Tokens["${value2.value}"]>`;
       }).with({ type: "enum" }, (value2) => {
-        return `${key}?: ConditionalValue<${(0, import_shared8.unionType)(value2.value)}>`;
+        return `${key}?: ConditionalValue<${(0, import_shared11.unionType)(value2.value)}>`;
       }).otherwise(() => {
         return `${key}?: ConditionalValue<${value.type}>`;
       });
     }).join("\n	")}
     }
 
-    ${strict ? import_outdent15.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent15.outdent`
-        type Merge<T extends Record<string, any>> = SystemStyleObject | T
-
+    ${strict ? import_outdent18.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent18.outdent`
+        
         ${description ? `/** ${description} */` : ""}
-        export declare function ${name}(options: Merge<${upperName}Properties>): string
+        export declare function ${name}(options: SystemStyleObject<${upperName}Properties>): string
         `}
 
    `,
-    js: import_outdent15.outdent`
+    js: import_outdent18.outdent`
   import { mapObject } from "../helpers"
   import { css } from "../css"
 
@@ -965,10 +1043,10 @@ function generatePattern(ctx) {
 }
 
 // src/generators/prop-types.ts
-var import_outdent16 = require("outdent");
+var import_outdent19 = require("outdent");
 function generatePropTypes(utility) {
   const result = [
-    import_outdent16.outdent`
+    import_outdent19.outdent`
     import { Properties as CSSProperties } from "./csstype"
 
     type BasePropTypes  = {`
@@ -995,15 +1073,15 @@ function generatePropTypes(utility) {
 }
 
 // src/generators/recipe.ts
-var import_shared9 = require("@pandacss/shared");
-var import_outdent17 = require("outdent");
+var import_shared12 = require("@pandacss/shared");
+var import_outdent20 = require("outdent");
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
   const { separator } = utility;
   if (!hasRecipes)
     return;
   const js = [
-    import_outdent17.outdent`
+    import_outdent20.outdent`
    import { createCss, withoutSpace } from "../helpers"
 
    const createRecipe = (name, defaultVariants) => {
@@ -1038,27 +1116,27 @@ function generateRecipes(ctx) {
   const dts = [""];
   Object.values(recipes).forEach((recipe) => {
     const { name, description, defaultVariants, variants } = recipe;
-    js.push(import_outdent17.outdent`
+    js.push(import_outdent20.outdent`
     export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
     `);
-    dts.push(import_outdent17.outdent`
+    dts.push(import_outdent20.outdent`
     import { ConditionalValue } from "../types"
 
-    export type ${(0, import_shared9.capitalize)(name)}Variants = {
+    export type ${(0, import_shared12.capitalize)(name)}Variants = {
       ${Object.keys(variants ?? {}).map((key) => {
       const value = variants[key];
       const keys = Object.keys(value);
-      return `${key}?: ConditionalValue<${(0, import_shared9.unionType)(keys)}>`;
+      return `${key}?: ConditionalValue<${(0, import_shared12.unionType)(keys)}>`;
     }).join("\n")}
     }
 
     ${description ? `/** ${description} */` : ""}
-    export declare function ${name}(value?: ${(0, import_shared9.capitalize)(name)}Variants): string
+    export declare function ${name}(value?: ${(0, import_shared12.capitalize)(name)}Variants): string
     `);
   });
   return {
-    js: import_outdent17.outdent.string(js.join("\n\n")),
-    dts: import_outdent17.outdent.string(dts.join("\n\n"))
+    js: import_outdent20.outdent.string(js.join("\n\n")),
+    dts: import_outdent20.outdent.string(dts.join("\n\n"))
   };
 }
 
@@ -1165,14 +1243,14 @@ function generateReset() {
 
 // src/generators/token-css.ts
 var import_core2 = require("@pandacss/core");
-var import_outdent18 = require("outdent");
+var import_outdent21 = require("outdent");
 var import_ts_pattern5 = require("ts-pattern");
 function generateKeyframes(keyframes) {
   if (!keyframes)
     return;
   return (0, import_core2.toKeyframeCss)(keyframes);
 }
-var getConditionMessage = (value) => import_outdent18.outdent`
+var getConditionMessage = (value) => import_outdent21.outdent`
 It seems you provided an invalid condition for semantic tokens.
 
 - You provided: \`${value}\`
@@ -1233,30 +1311,30 @@ function generateTokenCss(ctx, varRoot) {
 }
 
 // src/generators/token-dts.ts
-var import_shared10 = require("@pandacss/shared");
-var import_outdent19 = require("outdent");
+var import_shared13 = require("@pandacss/shared");
+var import_outdent22 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
-  set.add(`export type Token = ${dict.isEmpty ? "string" : (0, import_shared10.unionType)(dict.allNames)}`);
+  set.add(`export type Token = ${dict.isEmpty ? "string" : (0, import_shared13.unionType)(dict.allNames)}`);
   const interfaceSet = /* @__PURE__ */ new Set(["export interface Tokens {"]);
   if (dict.isEmpty) {
     interfaceSet.add("[token: string]: string");
   } else {
     for (const [key, value] of dict.categoryMap.entries()) {
-      const typeName = (0, import_shared10.capitalize)(import_pluralize.default.singular(key));
-      set.add(`export type ${typeName} = ${(0, import_shared10.unionType)(value.keys())}`);
-      set.add(`export type ColorPalette = ${(0, import_shared10.unionType)(Object.keys(dict.colorPalettes))}`);
+      const typeName = (0, import_shared13.capitalize)(import_pluralize.default.singular(key));
+      set.add(`export type ${typeName} = ${(0, import_shared13.unionType)(value.keys())}`);
+      set.add(`export type ColorPalette = ${(0, import_shared13.unionType)(Object.keys(dict.colorPalettes))}`);
       interfaceSet.add(`		${key}: ${typeName}`);
     }
   }
   interfaceSet.add("}");
   set.add(Array.from(interfaceSet).join("\n"));
-  return import_outdent19.outdent.string(Array.from(set).join("\n\n"));
+  return import_outdent22.outdent.string(Array.from(set).join("\n\n"));
 }
 
 // src/generators/token-js.ts
-var import_outdent20 = __toESM(require("outdent"));
+var import_outdent23 = __toESM(require("outdent"));
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -1266,7 +1344,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: import_outdent20.default`
+    js: import_outdent23.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   function getToken(path) {
@@ -1279,7 +1357,7 @@ function generateTokenJs(dict) {
     return variable
   }
   `,
-    dts: import_outdent20.default`
+    dts: import_outdent23.default`
   import { Token } from "../types/token"
   export declare function getToken(path: Token): string
   export declare function getTokenVar(path: Token): string
@@ -1289,27 +1367,29 @@ function generateTokenJs(dict) {
 
 // src/generators/types.ts
 var import_fs_extra = require("fs-extra");
-var import_outdent21 = __toESM(require("outdent"));
+var import_outdent24 = __toESM(require("outdent"));
 function getType(file) {
   const filepath = getEntrypoint("@pandacss/types", { dev: file });
   return (0, import_fs_extra.readFileSync)(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: import_outdent21.default`
+    publicType: import_outdent24.default`
     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
     `
   };
 }
@@ -1358,16 +1438,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) {
@@ -1420,11 +1502,11 @@ function setupPatterns(ctx) {
   if (!files) {
     return { files: [] };
   }
-  const indexCode = import_outdent22.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  const indexCode = import_outdent25.default.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 }
@@ -1435,13 +1517,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 = import_outdent22.default`
+  const indexCode = import_outdent25.default`
   export * from './factory'
   export * from './layout-grid'
-  ${import_outdent22.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${import_outdent25.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
 `;
   return {
     dir: ctx.paths.jsx,
@@ -1451,7 +1534,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 }
@@ -1459,7 +1542,7 @@ function setupJsx(ctx) {
   };
 }
 function setupCssIndex(ctx) {
-  const code = import_outdent22.default`
+  const code = import_outdent25.default`
   export * from './css'
   export * from './cx'
   export * from './global-css'
@@ -1499,30 +1582,30 @@ function generateSystem(ctx) {
 
 // src/messages.ts
 var import_logger3 = require("@pandacss/logger");
-var import_outdent23 = require("outdent");
+var import_outdent26 = require("outdent");
 var tick = import_logger3.colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    import_outdent23.outdent`
+    import_outdent26.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && import_outdent23.outdent`
+    ctx.hasTokens && import_outdent26.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    ctx.hasPatterns && import_outdent23.outdent`
+    ctx.hasPatterns && import_outdent26.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && import_outdent23.outdent`
+    ctx.hasRecipes && import_outdent26.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && import_outdent23.outdent`
+    ctx.jsxFramework && import_outdent26.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
     `,
     "\n"
   ].filter(Boolean).join("\n");
 }
 function configExistsMessage(cmd) {
-  return import_outdent23.outdent`
+  return import_outdent26.outdent`
       \n
       It looks like you already have panda created\`.
       
@@ -1531,7 +1614,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return import_outdent23.outdent`
+  return import_outdent26.outdent`
 
   🚀 Thanks for choosing ${import_logger3.colors.cyan("Panda")} to write your css.
 
@@ -1543,7 +1626,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 function scaffoldCompleteMessage() {
   return import_logger3.logger.box(
-    import_outdent23.outdent`
+    import_outdent26.outdent`
 
   ${import_logger3.colors.bold().cyan("Next steps:")}
   
@@ -1559,12 +1642,12 @@ function scaffoldCompleteMessage() {
   );
 }
 function watchMessage() {
-  return import_outdent23.outdent`
+  return import_outdent26.outdent`
   Watching for file changes...
   `;
 }
 function buildCompleteMessage(ctx) {
-  return import_outdent23.outdent`
+  return import_outdent26.outdent`
   Successfully extracted css from ${ctx.files.length} file(s) ✨
   `;
 }
@@ -1599,7 +1682,7 @@ function getBaseCss(ctx) {
 var import_core4 = require("@pandacss/core");
 var import_error = require("@pandacss/error");
 var import_logger5 = require("@pandacss/logger");
-var import_shared12 = require("@pandacss/shared");
+var import_shared15 = require("@pandacss/shared");
 var import_fs4 = require("fs");
 var import_fs_extra3 = require("fs-extra");
 var import_path4 = require("path");
@@ -1613,7 +1696,7 @@ var import_core3 = require("@pandacss/core");
 var import_is_valid_prop2 = require("@pandacss/is-valid-prop");
 var import_logger4 = require("@pandacss/logger");
 var import_parser = require("@pandacss/parser");
-var import_shared11 = require("@pandacss/shared");
+var import_shared14 = require("@pandacss/shared");
 var import_token_dictionary = require("@pandacss/token-dictionary");
 var import_fast_glob = __toESM(require("fast-glob"));
 var import_fs3 = require("fs");
@@ -1624,7 +1707,7 @@ var import_postcss = __toESM(require("postcss"));
 var import_ts_morph = require("ts-morph");
 var import_ts_pattern6 = require("ts-pattern");
 var helpers = {
-  map: import_shared11.mapObject
+  map: import_shared14.mapObject
 };
 var fileSystem = {
   read: (path) => {
@@ -1697,7 +1780,7 @@ function createContext(conf, io = fileSystem) {
   import_logger4.logger.debug({ type: "ctx:conditions", msg: conditions });
   (0, import_core3.assignCompositions)(
     { conditions, utility },
-    (0, import_shared11.compact)({
+    (0, import_shared14.compact)({
       textStyle: textStyles,
       layerStyle: layerStyles
     })
@@ -1718,12 +1801,12 @@ function createContext(conf, io = fileSystem) {
   }
   const patternNodes = Object.entries(patterns).map(([name, pattern]) => ({
     type: "pattern",
-    name: pattern.jsx ?? (0, import_shared11.capitalize)(name),
+    name: pattern.jsx ?? (0, import_shared14.capitalize)(name),
     props: Object.keys(pattern.properties),
     baseName: name
   }));
   function getPatternFnName(jsx) {
-    return patternNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared11.uncapitalize)(jsx);
+    return patternNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared14.uncapitalize)(jsx);
   }
   const hasPatterns = Object.keys(patterns).length > 0;
   function getRecipe(name) {
@@ -1731,12 +1814,12 @@ function createContext(conf, io = fileSystem) {
   }
   const recipeNodes = Object.entries(recipes).map(([name, recipe]) => ({
     type: "recipe",
-    name: recipe.jsx ?? (0, import_shared11.capitalize)(name),
+    name: recipe.jsx ?? (0, import_shared14.capitalize)(name),
     props: Object.keys(recipe.variants ?? {}),
     baseName: name
   }));
   function getRecipeFnName(jsx) {
-    return recipeNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared11.uncapitalize)(jsx);
+    return recipeNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared14.uncapitalize)(jsx);
   }
   function splitRecipeProps(name, props) {
     const recipe = recipeNodes.find((node) => node.name === name);
@@ -1752,7 +1835,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);
@@ -2088,7 +2171,7 @@ function getConfigHash() {
   if (!file) {
     throw new import_error.ConfigNotFoundError();
   }
-  return (0, import_shared12.toHash)((0, import_fs4.readFileSync)(file, "utf-8"));
+  return (0, import_shared15.toHash)((0, import_fs4.readFileSync)(file, "utf-8"));
 }
 var setupCount = 0;
 var Builder = class {
@@ -2298,9 +2381,9 @@ async function generate5(config, configPath) {
 // src/git-ignore.ts
 var import_fs5 = require("fs");
 var import_look_it_up2 = require("look-it-up");
-var import_outdent24 = __toESM(require("outdent"));
+var import_outdent27 = __toESM(require("outdent"));
 function setupGitIgnore(ctx) {
-  const txt = import_outdent24.default`## CSS Panda
+  const txt = import_outdent27.default`## CSS Panda
   ${ctx.outdir}
   ${ctx.outdir}-static
   `;
@@ -2318,7 +2401,7 @@ function setupGitIgnore(ctx) {
 var import_logger9 = require("@pandacss/logger");
 var import_fs_extra4 = require("fs-extra");
 var import_look_it_up3 = require("look-it-up");
-var import_outdent25 = require("outdent");
+var import_outdent28 = require("outdent");
 var import_path6 = require("path");
 var import_preferred_pm2 = __toESM(require("preferred-pm"));
 async function setupConfig(cwd, { force }) {
@@ -2332,7 +2415,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     import_logger9.logger.warn("config exists", configExistsMessage(cmd));
   } else {
-    const content = import_outdent25.outdent`
+    const content = import_outdent28.outdent`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -2358,7 +2441,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   import_logger9.logger.info({ type: "init", msg: `creating postcss config file: ${(0, import_logger9.quote)("postcss.config.cjs")}` });
-  const content = import_outdent25.outdent`
+  const content = import_outdent28.outdent`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},