@pandacss/node 0.0.0-dev-20230106105402 → 0.0.0-dev-20230106183338

package/dist/index.js

@@ -168,6 +168,7 @@ function generateConditions(ctx) {
     `,
     dts: import_outdent.default`
   export type Condition = ${(0, import_shared.unionType)(keys)}
+
   export type Conditions = Record<Condition, string>
   `
   };
@@ -329,20 +330,21 @@ function generateisValidProp(ctx) {
 }
 
 // src/generators/jsx/preact-jsx.ts
-var import_shared2 = require("@pandacss/shared");
 var import_outdent6 = require("outdent");
 function generatePreactJsxFactory(ctx) {
-  const name = ctx.jsxFactory;
-  const upperName = (0, import_shared2.capitalize)(name);
+  const { name, componentName } = ctx.jsxFactoryDetails;
   return {
     js: import_outdent6.outdent`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
+    import { useMemo } from 'preact/hooks'
     import { isCssProperty } from './is-valid-prop'
-    import { css } from '../css'
-    
-    function cx(...args) {
-      return args.filter(Boolean).join(' ')
+    import { css, cx } from '../css'
+  
+    const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
+
+    function normalizeHtmlProp(key) {
+      return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
     }
     
     function splitProps(props) {
@@ -353,7 +355,7 @@ function generatePreactJsxFactory(ctx) {
         if (isCssProperty(key)) {
           styleProps[key] = value
         } else {
-          elementProps[key] = value
+          elementProps[normalizeHtmlProp(key)] = value
         }
       }
     
@@ -361,12 +363,12 @@ function generatePreactJsxFactory(ctx) {
     }
     
     function styled(Dynamic) {
-      const ${upperName}Component = forwardRef((props, ref) => {
+      const ${componentName} = forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
 
-        const [styleProps, elementProps] = splitProps(restProps)
+        const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
     
-        const classes = () => {
+        function classes(){
           const { css: cssStyles, ...otherStyles } = styleProps
           const atomicClass = css({ ...otherStyles, ...cssStyles })
           return cx(atomicClass, elementProps.className)
@@ -375,14 +377,17 @@ function generatePreactJsxFactory(ctx) {
         return h(Element, { ...elementProps, ref, className: classes() })
       })
       
-      ${upperName}Component.displayName = \`${name}.\${Dynamic}\`
-      return ${upperName}Component
+      ${componentName}.displayName = \`${name}.\${Dynamic}\`
+      return ${componentName}
     }
     
-    function createFactory() {
+    function createJsxFactory() {
       const cache = new Map()
     
       return new Proxy(Object.create(null), {
+        apply(_, __, args) {
+          return styled(...args)
+        },
         get(_, el) {
           if (!cache.has(el)) {
             cache.set(el, styled(el))
@@ -392,7 +397,7 @@ function generatePreactJsxFactory(ctx) {
       })
     }
 
-    export const ${name} = createFactory()
+    export const ${name} = createJsxFactory()
     `
   };
 }
@@ -451,108 +456,112 @@ function generatePreactLayoutGrid() {
 }
 
 // src/generators/jsx/preact-pattern.ts
-var import_shared3 = require("@pandacss/shared");
 var import_outdent8 = require("outdent");
 var import_ts_pattern = require("ts-pattern");
-function generate(name, pattern, jsxFactory) {
-  const upperName = (0, import_shared3.capitalize)(name);
-  const upperFn = `get${upperName}Style`;
-  const jsxName = pattern.jsx ?? upperName;
-  const keys = Object.keys(pattern.properties ?? {});
+function generate(ctx, name, pattern) {
+  const { upperName, styleFn, dashName, jsxName, props } = ctx.getPatternDetails(name, pattern);
+  const { componentName } = ctx.jsxFactoryDetails;
   return {
-    name: (0, import_shared3.dashCase)(name),
+    name: dashName,
     js: import_outdent8.outdent`
     import { forwardRef } from 'preact/compat'
-    import { ${jsxFactory} } from './factory'
-    import { ${upperFn} } from '../patterns/${(0, import_shared3.dashCase)(name)}'
+    import { ${ctx.jsxFactory} } from './factory'
+    import { ${styleFn} } from '../patterns/${dashName}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-      ${(0, import_ts_pattern.match)(keys.length).with(
+      ${(0, import_ts_pattern.match)(props.length).with(
       0,
       () => import_outdent8.outdent`
-          return <${jsxFactory}.div ref={ref} {...props} />
+          return <${ctx.jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
       () => import_outdent8.outdent`
-        const { ${keys.join(", ")}, ...restProps } = props
-        const styleProps = ${upperFn}({${keys.join(", ")}})
-        return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
+        const { ${props.join(", ")}, ...restProps } = props
+        const styleProps = ${styleFn}({${props.join(", ")}})
+        return <${ctx.jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
         `
     )}
     })    
     `,
     dts: import_outdent8.outdent`
-    import { ${upperName}Properties } from '../patterns/${(0, import_shared3.dashCase)(name)}'
-    import { PolymorphicComponent } from '../types/jsx'
+    import { ${upperName}Properties } from '../patterns/${dashName}'
+    import { ${componentName} } from '../types/jsx'
 
     ${pattern.description ? `/** ${pattern.description} */` : ""}
-    export declare const ${jsxName}: PolymorphicComponent<"div", ${upperName}Properties>
+    export declare const ${jsxName}: ${componentName}<"div", ${upperName}Properties>
     `
   };
 }
 function generatePreactJsxPattern(ctx) {
-  return Object.entries(ctx.patterns).map(([name, pattern]) => generate(name, pattern, ctx.jsxFactory));
+  return Object.entries(ctx.patterns).map(([name, pattern]) => generate(ctx, name, pattern));
 }
 
 // src/generators/jsx/preact-types.ts
-var import_shared4 = require("@pandacss/shared");
 var import_outdent9 = require("outdent");
 function generatePreactJsxTypes(ctx) {
-  const name = ctx.jsxFactory;
-  const upperName = (0, import_shared4.capitalize)(name);
+  const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: import_outdent9.outdent`
-import { PolymorphicComponents } from '../types/jsx'
-export declare const ${name}: PolymorphicComponents
+import { ${upperName} } from '../types/jsx'
+export declare const ${name}: ${upperName}
     `,
     jsxType: import_outdent9.outdent`
-import type { JSX, ComponentProps, ElementType } from 'preact'
+import type { JSX, ElementType, ComponentProps } from 'preact'
 import type { JsxStyleProps, Assign } from '.'
 
-type Element = keyof JSX.IntrinsicElements
-type As<P = any> = JSX.ElementType<P>
-type Dict<T = unknown> = Record<string, T>
+type Dict = Record<string, unknown>
+
+type AdditionalHtmlProps = {
+  htmlSize?: string | number
+  htmlWidth?: string | number
+  htmlHeight?: string | number
+  htmlTranslate?: 'yes' | 'no' | undefined
+}
 
-type Clean<T> = Omit<T, 'transition' | 'as' | 'color'>
+type Polyfill<ComponentProps> = Omit<
+  ComponentProps,
+  'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'
+> &
+  AdditionalHtmlProps
 
-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
-  }
+type Props<ComponentProps extends Dict, AdditionalProps extends Dict = {}> = Assign<
+  Polyfill<ComponentProps>,
+  AdditionalProps
+>
 
-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
+export type ${componentName}<ComponentType extends ElementType, AdditionalProps extends Dict = {}> = {
+  (
+    props: Props<ComponentProps<ComponentType>, AdditionalProps> & JsxStyleProps<AdditionalProps>,
+  ): JSX.Element
   displayName?: string
 }
 
-export type PolymorphicComponents = {
-  [K in Element]: PolymorphicComponent<K, {}>
-}
+export type ${upperName} = {
+  <Component extends ElementType, AdditionalProps extends Dict = {}>(component: Component): ${componentName}<
+    Component,
+    AdditionalProps
+  >
+} & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type HTML${upperName}Props<T extends As> = Clean<ComponentProps<T>> & JsxStyleProps
+export type ${typeName}<ComponentType extends ElementType> = Polyfill<ComponentProps<ComponentType>> & 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);
+  const { name, componentName } = ctx.jsxFactoryDetails;
   return {
     js: import_outdent10.outdent`
-    import { forwardRef } from 'react'
+    import { forwardRef, useMemo } from 'react'
     import { isCssProperty } from './is-valid-prop'
-    import { css } from '../css'
-    
-    function cx(...args) {
-      return args.filter(Boolean).join(' ')
+    import { css, cx } from '../css'
+
+    const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
+
+    function normalizeHtmlProp(key) {
+      return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
     }
     
     function splitProps(props) {
@@ -563,7 +572,7 @@ function generateReactJsxFactory(ctx) {
         if (isCssProperty(key)) {
           styleProps[key] = value
         } else {
-          elementProps[key] = value
+          elementProps[normalizeHtmlProp(key)] = value
         }
       }
     
@@ -571,12 +580,12 @@ function generateReactJsxFactory(ctx) {
     }
     
     function styled(Dynamic) {
-      const ${upperName}Component = forwardRef((props, ref) => {
+      const ${componentName} = forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
     
-        const [styleProps, elementProps] = splitProps(restProps)
+        const [styleProps, elementProps] = useMemo(() => splitProps(restProps), [restProps])
     
-        const classes = () => {
+        function classes(){
           const { css: cssStyles, ...otherStyles } = styleProps
           const atomicClass = css({ ...otherStyles, ...cssStyles })
           return cx(atomicClass, elementProps.className)
@@ -585,14 +594,17 @@ function generateReactJsxFactory(ctx) {
         return <Element ref={ref} {...elementProps} className={classes()} />
       })
       
-      ${upperName}Component.displayName = \`${name}.\${Dynamic}\`
-      return ${upperName}Component
+      ${componentName}.displayName = \`${name}.\${Dynamic}\`
+      return ${componentName}
     }
     
-    function createFactory() {
+    function createJsxFactory() {
       const cache = new Map()
     
       return new Proxy(Object.create(null), {
+        apply(_, __, args) {
+          return styled(...args)
+        },
         get(_, el) {
           if (!cache.has(el)) {
             cache.set(el, styled(el))
@@ -602,7 +614,8 @@ function generateReactJsxFactory(ctx) {
       })
     }
 
-    export const ${name} = createFactory();
+    export const ${name} = createJsxFactory()
+
     `
   };
 }
@@ -661,113 +674,132 @@ function generateReactLayoutGrid() {
 }
 
 // src/generators/jsx/react-pattern.ts
-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_shared6.capitalize)(name);
-  const upperFn = `get${upperName}Style`;
-  const jsxName = pattern.jsx ?? upperName;
-  const keys = Object.keys(pattern.properties ?? {});
+function generate2(ctx, name, pattern) {
+  const { upperName, styleFn, dashName, jsxName, props } = ctx.getPatternDetails(name, pattern);
+  const { componentName } = ctx.jsxFactoryDetails;
   return {
-    name: (0, import_shared6.dashCase)(name),
+    name: dashName,
     js: import_outdent12.outdent`
     import { forwardRef } from 'react'
-    import { ${jsxFactory} } from './factory'
-    import { ${upperFn} } from '../patterns/${(0, import_shared6.dashCase)(name)}'
+    import { ${ctx.jsxFactory} } from './factory'
+    import { ${styleFn} } from '../patterns/${dashName}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-      ${(0, import_ts_pattern2.match)(keys.length).with(
+      ${(0, import_ts_pattern2.match)(props.length).with(
       0,
       () => import_outdent12.outdent`
-          return <${jsxFactory}.div ref={ref} {...props} />
+          return <${ctx.jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
       () => import_outdent12.outdent`
-        const { ${keys.join(", ")}, ...restProps } = props
-        const styleProps = ${upperFn}({${keys.join(", ")}})
-        return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
+        const { ${props.join(", ")}, ...restProps } = props
+        const styleProps = ${styleFn}({${props.join(", ")}})
+        return <${ctx.jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
         `
     )}
         
     })    
     `,
     dts: import_outdent12.outdent`
-    import { ${upperName}Properties } from '../patterns/${(0, import_shared6.dashCase)(name)}'
-    import { PolymorphicComponent } from '../types/jsx'
+    import { ${upperName}Properties } from '../patterns/${dashName}'
+    import { ${componentName} } from '../types/jsx'
 
     ${pattern.description ? `/** ${pattern.description} */` : ""}
-    export declare const ${jsxName}: PolymorphicComponent<"div", ${upperName}Properties>
+    export declare const ${jsxName}: ${componentName}<'div', ${upperName}Properties>
     `
   };
 }
 function generateReactJsxPattern(ctx) {
-  return Object.entries(ctx.patterns).map(([name, pattern]) => generate2(name, pattern, ctx.jsxFactory));
+  return Object.entries(ctx.patterns).map(([name, pattern]) => generate2(ctx, name, pattern));
 }
 
 // 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_shared7.capitalize)(name);
+  const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: import_outdent13.outdent`
-import { PolymorphicComponents } from '../types/jsx'
-export declare const ${name}: PolymorphicComponents
+import { ${upperName} } from '../types/jsx'
+export declare const ${name}: ${upperName}
     `,
     jsxType: import_outdent13.outdent`
 import type { ElementType, ComponentProps } from 'react'
 import type { JsxStyleProps, Assign } from '.'
 
-type Element = keyof JSX.IntrinsicElements
-type Dict<T = unknown> = Record<string, T>
+type Dict = Record<string, unknown>
+
+type AdditionalHtmlProps = {
+  htmlSize?: string | number
+  htmlWidth?: string | number
+  htmlHeight?: string | number
+  htmlTranslate?: 'yes' | 'no' | undefined
+}
 
-type Clean<T> = Omit<T, 'color'>
+type Polyfill<ComponentProps> = Omit<
+  ComponentProps,
+  'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'
+> &
+  AdditionalHtmlProps
 
-type PolymorphicProps<
-  ComponentProps extends Dict,
-  AdditionalProps extends Dict = {},
-> = Assign<Clean<ComponentProps>, AdditionalProps>
+type Props<ComponentProps extends Dict, AdditionalProps extends Dict = {}> = Assign<
+  Polyfill<ComponentProps>,
+  AdditionalProps
+>
 
-export type PolymorphicComponent<C extends ElementType, P extends Dict = {}> = {
-  (props: PolymorphicProps<ComponentProps<C>, P> & JsxStyleProps<P>): JSX.Element
+export type ${componentName}<ComponentType extends ElementType, AdditionalProps extends Dict = {}> = {
+  (
+    props: Props<ComponentProps<ComponentType>, AdditionalProps> & JsxStyleProps<AdditionalProps>,
+  ): JSX.Element
   displayName?: string
 }
 
-export type PolymorphicComponents = {
-  [K in Element]: PolymorphicComponent<K, {}>
-}
+export type ${upperName} = {
+  <Component extends ElementType, AdditionalProps extends Dict = {}>(component: Component): ${componentName}<
+    Component,
+    AdditionalProps
+  >
+} & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type HTML${upperName}Props<T extends ElementType> = Assign<Clean<ComponentProps<T>>, JsxStyleProps>
+export type ${typeName}<ComponentType extends ElementType> = Polyfill<ComponentProps<ComponentType>> & 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);
+  const { componentName, name } = ctx.jsxFactoryDetails;
   return {
     js: import_outdent14.outdent`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { allCssProperties } from './is-valid-prop'
-    import { css } from '../css'
+    import { css, cx } from '../css'
 
-    function cx(...args) {
-      return args.filter(Boolean).join(' ')
+    const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
+
+    function normalizeHtmlProp(key) {
+      return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
+    }
+
+    function normalizeHtmlProps(props) {
+      const result = {}
+      for (const [key, value] of Object.entries(props)) {
+        result[normalizeHtmlProp(key)] = value
+      }
+      return result
     }
     
     function styled(element) {
-      return function ${upperName}Component(props) {
+      return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
     
-        const [localProps, styleProps, elementProps] = splitProps(
+        const [localProps, localHtmlProps, styleProps, elementProps] = splitProps(
           mergedProps,
           ['as', 'class', 'className'],
+          htmlProps,
           allCssProperties
         )
     
@@ -777,14 +809,17 @@ function generateSolidJsxFactory(ctx) {
           return cx(atomicClass, localProps.class, localProps.className)
         }
     
-        return <Dynamic component={localProps.as} {...elementProps} class={classes()} />
+        return <Dynamic component={localProps.as} {...normalizeHtmlProps(localHtmlProps)} {...elementProps} class={classes()} />
       }
     }
     
-    function createFactory() {
+    function createJsxFactory() {
       const cache = new Map()
     
       return new Proxy(Object.create(null), {
+        apply(_, __, args) {
+          return styled(...args)
+        },
         get(_, el) {
           if (!cache.has(el)) {
             cache.set(el, styled(el))
@@ -794,7 +829,7 @@ function generateSolidJsxFactory(ctx) {
       })
     }
       
-    export const ${name} = createFactory()
+    export const ${name} = createJsxFactory()
     `
   };
 }
@@ -804,6 +839,8 @@ var import_outdent15 = require("outdent");
 function generateSolidLayoutGrid() {
   return {
     dts: import_outdent15.outdent`
+    import { ParentProps } from 'solid-js'
+    
     export type LayoutGridProps = {
         count?: number
         gutter?: string
@@ -811,7 +848,7 @@ function generateSolidLayoutGrid() {
         margin?: string
     }
 
-    export declare const LayoutGrid: React.FC<LayoutGridProps>
+    export declare const LayoutGrid: ParentProps<LayoutGridProps>
     `,
     js: import_outdent15.outdent`
     export function LayoutGrid(props) {
@@ -851,90 +888,97 @@ function generateSolidLayoutGrid() {
 }
 
 // src/generators/jsx/solid-pattern.ts
-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_shared9.capitalize)(name);
-  const upperFn = `get${upperName}Style`;
-  const jsxName = pattern.jsx ?? upperName;
-  const keys = Object.keys(pattern.properties ?? {});
+function generate3(ctx, name, pattern) {
+  const { upperName, styleFn, dashName, jsxName, props } = ctx.getPatternDetails(name, pattern);
+  const { componentName } = ctx.jsxFactoryDetails;
   return {
-    name: (0, import_shared9.dashCase)(name),
+    name: dashName,
     js: import_outdent16.outdent`
     import { splitProps } from 'solid-js'
-    import { ${jsxFactory} } from './factory'
-    import { ${upperFn} } from '../patterns/${(0, import_shared9.dashCase)(name)}'
+    import { ${ctx.jsxFactory} } from './factory'
+    import { ${styleFn} } from '../patterns/${dashName}'
 
     export function ${jsxName}(props) {
-      ${(0, import_ts_pattern3.match)(keys.length).with(
+      ${(0, import_ts_pattern3.match)(props.length).with(
       0,
       () => import_outdent16.outdent`
-          return <${jsxFactory}.div {...props} />
+          return <${ctx.jsxFactory}.div {...props} />
         `
     ).otherwise(
       () => import_outdent16.outdent`
-          const [patternProps, restProps] = splitProps(props, [${keys.map((v) => JSON.stringify(v)).join(", ")}]);
-          const styleProps = ${upperFn}(patternProps)
-          return <${jsxFactory}.div {...styleProps} {...restProps} />
+          const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
+          const styleProps = ${styleFn}(patternProps)
+          return <${ctx.jsxFactory}.div {...styleProps} {...restProps} />
         `
     )}
     }
     `,
     dts: import_outdent16.outdent`
-    import { ${upperName}Properties } from '../patterns/${(0, import_shared9.dashCase)(name)}'
-    import { PolymorphicComponent } from '../types/jsx'
+    import { ${upperName}Properties } from '../patterns/${dashName}'
+    import { ${componentName} } from '../types/jsx'
 
     ${pattern.description ? `/** ${pattern.description} */` : ""}
-    export declare const ${jsxName}: PolymorphicComponent<"div", ${upperName}Properties>
+    export declare const ${jsxName}: ${componentName}<"div", ${upperName}Properties>
     `
   };
 }
 function generateSolidJsxPattern(ctx) {
-  return Object.entries(ctx.patterns).map(([name, pattern]) => generate3(name, pattern, ctx.jsxFactory));
+  return Object.entries(ctx.patterns).map(([name, pattern]) => generate3(ctx, name, pattern));
 }
 
 // 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);
+  const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: import_outdent17.outdent`
-import { PolymorphicComponents } from '../types/jsx'
-export declare const ${name}: PolymorphicComponents
+import { ${upperName} } from '../types/jsx'
+export declare const ${name}: ${upperName}
     `,
     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 Dict = Record<string, unknown>
 
-type Clean<T> = Omit<T, 'transition' | 'as' | 'color'>
+type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>;
 
-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
-  }
+type AdditionalHtmlProps = {
+  htmlSize?: string | number
+  htmlWidth?: string | number
+  htmlHeight?: string | number
+  htmlTranslate?: 'yes' | 'no' | undefined
+}
+
+type Polyfill<ComponentProps> = Omit<
+  ComponentProps,
+  'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'
+> &
+  AdditionalHtmlProps
 
-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
+type Props<ComponentProps extends Dict, AdditionalProps extends Dict = {}> = Assign<
+  Polyfill<ComponentProps>,
+  AdditionalProps
+>
+
+export type ${componentName}<ComponentType extends ElementType, AdditionalProps extends Dict = {}> = {
+  (
+    props: Props<ComponentProps<ComponentType>, AdditionalProps> & JsxStyleProps<AdditionalProps>,
+  ): JSX.Element
   displayName?: string
 }
 
-export type PolymorphicComponents = {
-  [K in Element]: PolymorphicComponent<K, {}>
-}
 
-export type HTML${upperName}Props<T extends As> = Clean<ComponentProps<T>> & JsxStyleProps
+export type ${upperName} = {
+  <Component extends ElementType, AdditionalProps extends Dict = {}>(component: Component): ${componentName}<
+    Component,
+    AdditionalProps
+  >
+} & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+
+export type ${typeName}<ComponentType extends ElementType> = Polyfill<ComponentProps<ComponentType>> & JsxStyleProps
   `
   };
 }
@@ -978,22 +1022,22 @@ function generateLayoutGrid(ctx) {
 }
 
 // src/generators/pattern.ts
-var import_shared11 = require("@pandacss/shared");
+var import_shared2 = 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_shared11.capitalize)(name);
+  const upperName = (0, import_shared2.capitalize)(name);
   const upperFn = `get${upperName}Style`;
   return {
-    name: (0, import_shared11.dashCase)(name),
+    name: (0, import_shared2.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_shared11.capitalize)(name)}Properties = {
+    export type ${(0, import_shared2.capitalize)(name)}Properties = {
        ${Object.keys(properties ?? {}).map((key) => {
       const value = properties[key];
       return (0, import_ts_pattern4.match)(value).with({ type: "property" }, (value2) => {
@@ -1004,7 +1048,7 @@ function generate4(name, pattern) {
         }
         return `${key}?: ConditionalValue<Tokens["${value2.value}"]>`;
       }).with({ type: "enum" }, (value2) => {
-        return `${key}?: ConditionalValue<${(0, import_shared11.unionType)(value2.value)}>`;
+        return `${key}?: ConditionalValue<${(0, import_shared2.unionType)(value2.value)}>`;
       }).otherwise(() => {
         return `${key}?: ConditionalValue<${value.type}>`;
       });
@@ -1068,7 +1112,7 @@ function generatePropTypes(utility) {
 }
 
 // src/generators/recipe.ts
-var import_shared12 = require("@pandacss/shared");
+var import_shared3 = require("@pandacss/shared");
 var import_outdent20 = require("outdent");
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
@@ -1117,16 +1161,16 @@ function generateRecipes(ctx) {
     dts.push(import_outdent20.outdent`
     import { ConditionalValue } from "../types"
 
-    export type ${(0, import_shared12.capitalize)(name)}Variants = {
+    export type ${(0, import_shared3.capitalize)(name)}Variants = {
       ${Object.keys(variants ?? {}).map((key) => {
       const value = variants[key];
       const keys = Object.keys(value);
-      return `${key}?: ConditionalValue<${(0, import_shared12.unionType)(keys)}>`;
+      return `${key}?: ConditionalValue<${(0, import_shared3.unionType)(keys)}>`;
     }).join("\n")}
     }
 
     ${description ? `/** ${description} */` : ""}
-    export declare function ${name}(value?: ${(0, import_shared12.capitalize)(name)}Variants): string
+    export declare function ${name}(value?: ${(0, import_shared3.capitalize)(name)}Variants): string
     `);
   });
   return {
@@ -1309,20 +1353,20 @@ function cleanupSelectors(css2, varSelector) {
 }
 
 // src/generators/token-dts.ts
-var import_shared13 = require("@pandacss/shared");
+var import_shared4 = require("@pandacss/shared");
 var import_outdent21 = 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_shared13.unionType)(dict.allNames)}`);
+  set.add(`export type Token = ${dict.isEmpty ? "string" : (0, import_shared4.unionType)(dict.allNames)}`);
   const result = /* @__PURE__ */ new Set(["export type Tokens = {"]);
   if (dict.isEmpty) {
     result.add("[token: string]: string");
   } else {
     for (const [key, value] of dict.categoryMap.entries()) {
-      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))}`);
+      const typeName = (0, import_shared4.capitalize)(import_pluralize.default.singular(key));
+      set.add(`export type ${typeName} = ${(0, import_shared4.unionType)(value.keys())}`);
+      set.add(`export type ColorPalette = ${(0, import_shared4.unionType)(Object.keys(dict.colorPalettes))}`);
       result.add(`		${key}: ${typeName}`);
     }
   }
@@ -1527,7 +1571,6 @@ function setupJsx(ctx) {
   export * from './factory'
   export * from './layout-grid'
   ${import_outdent24.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
-  export type { HTML${ctx.jsxFactoryName}Props } from '../types/jsx'
 `;
   return {
     dir: ctx.paths.jsx,
@@ -1539,7 +1582,13 @@ function setupJsx(ctx) {
       { file: "is-valid-prop.mjs", code: isValidProp.js },
       { file: "factory.d.ts", code: types.jsxFactory },
       { file: "factory.jsx", code: factory.js },
-      { file: "index.d.ts", code: indexCode },
+      {
+        file: "index.d.ts",
+        code: import_outdent24.default`
+        ${indexCode}
+        export type { ${ctx.jsxFactoryDetails.typeName} } from '../types/jsx'
+      `
+      },
       { file: "index.jsx", code: indexCode }
     ]
   };
@@ -1685,7 +1734,7 @@ function getBaseCss(ctx) {
 var import_core4 = require("@pandacss/core");
 var import_error = require("@pandacss/error");
 var import_logger5 = require("@pandacss/logger");
-var import_shared15 = require("@pandacss/shared");
+var import_shared6 = require("@pandacss/shared");
 var import_fs4 = require("fs");
 var import_fs_extra3 = require("fs-extra");
 var import_path4 = require("path");
@@ -1699,7 +1748,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_shared14 = require("@pandacss/shared");
+var import_shared5 = require("@pandacss/shared");
 var import_token_dictionary = require("@pandacss/token-dictionary");
 var import_fast_glob = __toESM(require("fast-glob"));
 var import_fs3 = require("fs");
@@ -1710,7 +1759,7 @@ var import_postcss2 = __toESM(require("postcss"));
 var import_ts_morph = require("ts-morph");
 var import_ts_pattern5 = require("ts-pattern");
 var helpers = {
-  map: import_shared14.mapObject
+  map: import_shared5.mapObject
 };
 var fileSystem = {
   read: (path) => {
@@ -1723,18 +1772,6 @@ var fileSystem = {
     return (0, import_promises.unlink)(path);
   }
 };
-function splitProps(obj, keys) {
-  const omitted = {};
-  const picked = {};
-  for (const [key, value] of Object.entries(obj)) {
-    if (keys.includes(key)) {
-      picked[key] = value;
-    } else {
-      omitted[key] = value;
-    }
-  }
-  return [picked, omitted];
-}
 function createContext(conf, io = fileSystem) {
   const { config } = conf;
   const {
@@ -1762,7 +1799,13 @@ function createContext(conf, io = fileSystem) {
     textStyles,
     layerStyles
   } = theme;
-  const jsxFactoryName = (0, import_shared14.capitalize)(jsxFactory);
+  const jsxFactoryDetails = {
+    name: jsxFactory,
+    upperName: (0, import_shared5.capitalize)(jsxFactory),
+    typeName: `HTML${(0, import_shared5.capitalize)(jsxFactory)}Props`,
+    componentName: `${(0, import_shared5.capitalize)(jsxFactory)}Component`,
+    framework: jsxFramework
+  };
   const cwd = (0, import_path2.resolve)(cwdProp);
   const exclude = [".git", "node_modules", "test-results"].concat(excludeProp);
   const tokens = new import_token_dictionary.TokenDictionary({
@@ -1784,7 +1827,7 @@ function createContext(conf, io = fileSystem) {
   import_logger4.logger.debug({ type: "ctx:conditions", msg: conditions });
   (0, import_core3.assignCompositions)(
     { conditions, utility },
-    (0, import_shared14.compact)({
+    (0, import_shared5.compact)({
       textStyle: textStyles,
       layerStyle: layerStyles
     })
@@ -1803,14 +1846,25 @@ function createContext(conf, io = fileSystem) {
     const pattern = getPattern(name);
     return pattern?.transform?.(data, helpers) ?? {};
   }
+  function getPatternDetails(name, pattern) {
+    const upperName = (0, import_shared5.capitalize)(name);
+    return {
+      name,
+      props: Object.keys(pattern?.properties ?? {}),
+      dashName: (0, import_shared5.dashCase)(name),
+      upperName,
+      styleFn: `get${upperName}Style`,
+      jsxName: pattern?.jsx ?? upperName
+    };
+  }
   const patternNodes = Object.entries(patterns).map(([name, pattern]) => ({
     type: "pattern",
-    name: pattern.jsx ?? (0, import_shared14.capitalize)(name),
+    name: pattern.jsx ?? (0, import_shared5.capitalize)(name),
     props: Object.keys(pattern.properties),
     baseName: name
   }));
   function getPatternFnName(jsx) {
-    return patternNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared14.uncapitalize)(jsx);
+    return patternNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared5.uncapitalize)(jsx);
   }
   const hasPatterns = Object.keys(patterns).length > 0;
   function getRecipe(name) {
@@ -1818,18 +1872,18 @@ function createContext(conf, io = fileSystem) {
   }
   const recipeNodes = Object.entries(recipes).map(([name, recipe]) => ({
     type: "recipe",
-    name: recipe.jsx ?? (0, import_shared14.capitalize)(name),
+    name: recipe.jsx ?? (0, import_shared5.capitalize)(name),
     props: Object.keys(recipe.variants ?? {}),
     baseName: name
   }));
   function getRecipeFnName(jsx) {
-    return recipeNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared14.uncapitalize)(jsx);
+    return recipeNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared5.uncapitalize)(jsx);
   }
   function splitRecipeProps(name, props) {
     const recipe = recipeNodes.find((node) => node.name === name);
     if (!recipe)
       return [{}, props];
-    return splitProps(props, recipe.props);
+    return (0, import_shared5.splitObject)(props, (key) => recipe.props.includes(key));
   }
   function getRecipeDetails() {
     return Object.entries(recipes).map(([name, recipe]) => ({
@@ -2086,6 +2140,7 @@ function createContext(conf, io = fileSystem) {
     write,
     writeOutput,
     cleanOutdir,
+    cssVarRoot,
     tokens,
     hasTokens,
     utility,
@@ -2098,14 +2153,13 @@ function createContext(conf, io = fileSystem) {
     execPattern,
     patternNodes,
     getPatternFnName,
+    getPatternDetails,
     recipes,
     getRecipe,
     hasRecipes,
     getRecipeDetails,
-    jsxFramework,
-    jsxFactoryName,
     jsxFactory,
-    cssVarRoot,
+    jsxFactoryDetails,
     properties,
     extract
   };
@@ -2176,7 +2230,7 @@ function getConfigHash() {
   if (!file) {
     throw new import_error.ConfigNotFoundError();
   }
-  return (0, import_shared15.toHash)((0, import_fs4.readFileSync)(file, "utf-8"));
+  return (0, import_shared6.toHash)((0, import_fs4.readFileSync)(file, "utf-8"));
 }
 var setupCount = 0;
 var Builder = class {