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

package/dist/index.mjs

@@ -122,6 +122,7 @@ function generateConditions(ctx) {
     `,
     dts: outdent`
   export type Condition = ${unionType(keys)}
+
   export type Conditions = Record<Condition, string>
   `
   };
@@ -283,20 +284,21 @@ function generateisValidProp(ctx) {
 }
 
 // src/generators/jsx/preact-jsx.ts
-import { capitalize } from "@pandacss/shared";
 import { outdent as outdent6 } from "outdent";
 function generatePreactJsxFactory(ctx) {
-  const name = ctx.jsxFactory;
-  const upperName = capitalize(name);
+  const { name, componentName } = ctx.jsxFactoryDetails;
   return {
     js: outdent6`
     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) {
@@ -307,7 +309,7 @@ function generatePreactJsxFactory(ctx) {
         if (isCssProperty(key)) {
           styleProps[key] = value
         } else {
-          elementProps[key] = value
+          elementProps[normalizeHtmlProp(key)] = value
         }
       }
     
@@ -315,12 +317,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)
@@ -329,14 +331,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))
@@ -346,7 +351,7 @@ function generatePreactJsxFactory(ctx) {
       })
     }
 
-    export const ${name} = createFactory()
+    export const ${name} = createJsxFactory()
     `
   };
 }
@@ -405,108 +410,112 @@ function generatePreactLayoutGrid() {
 }
 
 // src/generators/jsx/preact-pattern.ts
-import { capitalize as capitalize2, dashCase } from "@pandacss/shared";
 import { outdent as outdent8 } from "outdent";
 import { match } from "ts-pattern";
-function generate(name, pattern, jsxFactory) {
-  const upperName = capitalize2(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: dashCase(name),
+    name: dashName,
     js: outdent8`
     import { forwardRef } from 'preact/compat'
-    import { ${jsxFactory} } from './factory'
-    import { ${upperFn} } from '../patterns/${dashCase(name)}'
+    import { ${ctx.jsxFactory} } from './factory'
+    import { ${styleFn} } from '../patterns/${dashName}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-      ${match(keys.length).with(
+      ${match(props.length).with(
       0,
       () => outdent8`
-          return <${jsxFactory}.div ref={ref} {...props} />
+          return <${ctx.jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
       () => outdent8`
-        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: outdent8`
-    import { ${upperName}Properties } from '../patterns/${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
-import { capitalize as capitalize3 } from "@pandacss/shared";
 import { outdent as outdent9 } from "outdent";
 function generatePreactJsxTypes(ctx) {
-  const name = ctx.jsxFactory;
-  const upperName = capitalize3(name);
+  const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: outdent9`
-import { PolymorphicComponents } from '../types/jsx'
-export declare const ${name}: PolymorphicComponents
+import { ${upperName} } from '../types/jsx'
+export declare const ${name}: ${upperName}
     `,
     jsxType: outdent9`
-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 Clean<T> = Omit<T, 'transition' | 'as' | 'color'>
+type AdditionalHtmlProps = {
+  htmlSize?: string | number
+  htmlWidth?: string | number
+  htmlHeight?: string | number
+  htmlTranslate?: 'yes' | 'no' | undefined
+}
 
-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 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 ${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
-import { capitalize as capitalize4 } from "@pandacss/shared";
 import { outdent as outdent10 } from "outdent";
 function generateReactJsxFactory(ctx) {
-  const name = ctx.jsxFactory;
-  const upperName = capitalize4(name);
+  const { name, componentName } = ctx.jsxFactoryDetails;
   return {
     js: outdent10`
-    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) {
@@ -517,7 +526,7 @@ function generateReactJsxFactory(ctx) {
         if (isCssProperty(key)) {
           styleProps[key] = value
         } else {
-          elementProps[key] = value
+          elementProps[normalizeHtmlProp(key)] = value
         }
       }
     
@@ -525,12 +534,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)
@@ -539,14 +548,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))
@@ -556,7 +568,8 @@ function generateReactJsxFactory(ctx) {
       })
     }
 
-    export const ${name} = createFactory();
+    export const ${name} = createJsxFactory()
+
     `
   };
 }
@@ -615,113 +628,132 @@ function generateReactLayoutGrid() {
 }
 
 // src/generators/jsx/react-pattern.ts
-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 = capitalize5(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: dashCase2(name),
+    name: dashName,
     js: outdent12`
     import { forwardRef } from 'react'
-    import { ${jsxFactory} } from './factory'
-    import { ${upperFn} } from '../patterns/${dashCase2(name)}'
+    import { ${ctx.jsxFactory} } from './factory'
+    import { ${styleFn} } from '../patterns/${dashName}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-      ${match2(keys.length).with(
+      ${match2(props.length).with(
       0,
       () => outdent12`
-          return <${jsxFactory}.div ref={ref} {...props} />
+          return <${ctx.jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
       () => outdent12`
-        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: outdent12`
-    import { ${upperName}Properties } from '../patterns/${dashCase2(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
-import { capitalize as capitalize6 } from "@pandacss/shared";
 import { outdent as outdent13 } from "outdent";
 function generateReactJsxTypes(ctx) {
-  const name = ctx.jsxFactory;
-  const upperName = capitalize6(name);
+  const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: outdent13`
-import { PolymorphicComponents } from '../types/jsx'
-export declare const ${name}: PolymorphicComponents
+import { ${upperName} } from '../types/jsx'
+export declare const ${name}: ${upperName}
     `,
     jsxType: outdent13`
 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 Clean<T> = Omit<T, 'color'>
+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
 
-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
-import { capitalize as capitalize7 } from "@pandacss/shared";
 import { outdent as outdent14 } from "outdent";
 function generateSolidJsxFactory(ctx) {
-  const name = ctx.jsxFactory;
-  const upperName = capitalize7(name);
+  const { componentName, name } = ctx.jsxFactoryDetails;
   return {
     js: outdent14`
     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
         )
     
@@ -731,14 +763,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))
@@ -748,7 +783,7 @@ function generateSolidJsxFactory(ctx) {
       })
     }
       
-    export const ${name} = createFactory()
+    export const ${name} = createJsxFactory()
     `
   };
 }
@@ -758,6 +793,8 @@ import { outdent as outdent15 } from "outdent";
 function generateSolidLayoutGrid() {
   return {
     dts: outdent15`
+    import { ParentProps } from 'solid-js'
+    
     export type LayoutGridProps = {
         count?: number
         gutter?: string
@@ -765,7 +802,7 @@ function generateSolidLayoutGrid() {
         margin?: string
     }
 
-    export declare const LayoutGrid: React.FC<LayoutGridProps>
+    export declare const LayoutGrid: ParentProps<LayoutGridProps>
     `,
     js: outdent15`
     export function LayoutGrid(props) {
@@ -805,90 +842,97 @@ function generateSolidLayoutGrid() {
 }
 
 // src/generators/jsx/solid-pattern.ts
-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 = capitalize8(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: dashCase3(name),
+    name: dashName,
     js: outdent16`
     import { splitProps } from 'solid-js'
-    import { ${jsxFactory} } from './factory'
-    import { ${upperFn} } from '../patterns/${dashCase3(name)}'
+    import { ${ctx.jsxFactory} } from './factory'
+    import { ${styleFn} } from '../patterns/${dashName}'
 
     export function ${jsxName}(props) {
-      ${match3(keys.length).with(
+      ${match3(props.length).with(
       0,
       () => outdent16`
-          return <${jsxFactory}.div {...props} />
+          return <${ctx.jsxFactory}.div {...props} />
         `
     ).otherwise(
       () => outdent16`
-          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: outdent16`
-    import { ${upperName}Properties } from '../patterns/${dashCase3(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
-import { capitalize as capitalize9 } from "@pandacss/shared";
 import { outdent as outdent17 } from "outdent";
 function generateSolidJsxTypes(ctx) {
-  const name = ctx.jsxFactory;
-  const upperName = capitalize9(name);
+  const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: outdent17`
-import { PolymorphicComponents } from '../types/jsx'
-export declare const ${name}: PolymorphicComponents
+import { ${upperName} } from '../types/jsx'
+export declare const ${name}: ${upperName}
     `,
     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 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
+}
 
-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 Polyfill<ComponentProps> = Omit<
+  ComponentProps,
+  'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'
+> &
+  AdditionalHtmlProps
+
+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
   `
   };
 }
@@ -932,22 +976,22 @@ function generateLayoutGrid(ctx) {
 }
 
 // src/generators/pattern.ts
-import { capitalize as capitalize10, dashCase as dashCase4, unionType as unionType2 } from "@pandacss/shared";
+import { capitalize, dashCase, 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 = capitalize10(name);
+  const upperName = capitalize(name);
   const upperFn = `get${upperName}Style`;
   return {
-    name: dashCase4(name),
+    name: dashCase(name),
     dts: outdent18`
     import { SystemStyleObject, ConditionalValue } from "../types"
     import { Properties } from "../types/csstype"
     import { Tokens } from "../types/token"
 
-    export type ${capitalize10(name)}Properties = {
+    export type ${capitalize(name)}Properties = {
        ${Object.keys(properties ?? {}).map((key) => {
       const value = properties[key];
       return match4(value).with({ type: "property" }, (value2) => {
@@ -1022,7 +1066,7 @@ function generatePropTypes(utility) {
 }
 
 // src/generators/recipe.ts
-import { capitalize as capitalize11, unionType as unionType3 } from "@pandacss/shared";
+import { capitalize as capitalize2, unionType as unionType3 } from "@pandacss/shared";
 import { outdent as outdent20 } from "outdent";
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
@@ -1071,7 +1115,7 @@ function generateRecipes(ctx) {
     dts.push(outdent20`
     import { ConditionalValue } from "../types"
 
-    export type ${capitalize11(name)}Variants = {
+    export type ${capitalize2(name)}Variants = {
       ${Object.keys(variants ?? {}).map((key) => {
       const value = variants[key];
       const keys = Object.keys(value);
@@ -1080,7 +1124,7 @@ function generateRecipes(ctx) {
     }
 
     ${description ? `/** ${description} */` : ""}
-    export declare function ${name}(value?: ${capitalize11(name)}Variants): string
+    export declare function ${name}(value?: ${capitalize2(name)}Variants): string
     `);
   });
   return {
@@ -1263,7 +1307,7 @@ function cleanupSelectors(css2, varSelector) {
 }
 
 // src/generators/token-dts.ts
-import { unionType as unionType4, capitalize as capitalize12 } from "@pandacss/shared";
+import { unionType as unionType4, capitalize as capitalize3 } from "@pandacss/shared";
 import { outdent as outdent21 } from "outdent";
 import pluralize from "pluralize";
 function generateTokenDts(dict) {
@@ -1274,7 +1318,7 @@ function generateTokenDts(dict) {
     result.add("[token: string]: string");
   } else {
     for (const [key, value] of dict.categoryMap.entries()) {
-      const typeName = capitalize12(pluralize.singular(key));
+      const typeName = capitalize3(pluralize.singular(key));
       set.add(`export type ${typeName} = ${unionType4(value.keys())}`);
       set.add(`export type ColorPalette = ${unionType4(Object.keys(dict.colorPalettes))}`);
       result.add(`		${key}: ${typeName}`);
@@ -1481,7 +1525,6 @@ function setupJsx(ctx) {
   export * from './factory'
   export * from './layout-grid'
   ${outdent24.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
-  export type { HTML${ctx.jsxFactoryName}Props } from '../types/jsx'
 `;
   return {
     dir: ctx.paths.jsx,
@@ -1493,7 +1536,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: outdent24`
+        ${indexCode}
+        export type { ${ctx.jsxFactoryDetails.typeName} } from '../types/jsx'
+      `
+      },
       { file: "index.jsx", code: indexCode }
     ]
   };
@@ -1660,7 +1709,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 capitalize13, compact, mapObject, uncapitalize } from "@pandacss/shared";
+import { capitalize as capitalize4, compact, mapObject, uncapitalize, splitObject, dashCase as dashCase2 } from "@pandacss/shared";
 import { TokenDictionary } from "@pandacss/token-dictionary";
 import glob from "fast-glob";
 import { readdirSync, readFileSync as readFileSync4 } from "fs";
@@ -1684,18 +1733,6 @@ var fileSystem = {
     return 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 {
@@ -1723,7 +1760,13 @@ function createContext(conf, io = fileSystem) {
     textStyles,
     layerStyles
   } = theme;
-  const jsxFactoryName = capitalize13(jsxFactory);
+  const jsxFactoryDetails = {
+    name: jsxFactory,
+    upperName: capitalize4(jsxFactory),
+    typeName: `HTML${capitalize4(jsxFactory)}Props`,
+    componentName: `${capitalize4(jsxFactory)}Component`,
+    framework: jsxFramework
+  };
   const cwd = resolve(cwdProp);
   const exclude = [".git", "node_modules", "test-results"].concat(excludeProp);
   const tokens = new TokenDictionary({
@@ -1764,9 +1807,20 @@ function createContext(conf, io = fileSystem) {
     const pattern = getPattern(name);
     return pattern?.transform?.(data, helpers) ?? {};
   }
+  function getPatternDetails(name, pattern) {
+    const upperName = capitalize4(name);
+    return {
+      name,
+      props: Object.keys(pattern?.properties ?? {}),
+      dashName: dashCase2(name),
+      upperName,
+      styleFn: `get${upperName}Style`,
+      jsxName: pattern?.jsx ?? upperName
+    };
+  }
   const patternNodes = Object.entries(patterns).map(([name, pattern]) => ({
     type: "pattern",
-    name: pattern.jsx ?? capitalize13(name),
+    name: pattern.jsx ?? capitalize4(name),
     props: Object.keys(pattern.properties),
     baseName: name
   }));
@@ -1779,7 +1833,7 @@ function createContext(conf, io = fileSystem) {
   }
   const recipeNodes = Object.entries(recipes).map(([name, recipe]) => ({
     type: "recipe",
-    name: recipe.jsx ?? capitalize13(name),
+    name: recipe.jsx ?? capitalize4(name),
     props: Object.keys(recipe.variants ?? {}),
     baseName: name
   }));
@@ -1790,7 +1844,7 @@ function createContext(conf, io = fileSystem) {
     const recipe = recipeNodes.find((node) => node.name === name);
     if (!recipe)
       return [{}, props];
-    return splitProps(props, recipe.props);
+    return splitObject(props, (key) => recipe.props.includes(key));
   }
   function getRecipeDetails() {
     return Object.entries(recipes).map(([name, recipe]) => ({
@@ -2047,6 +2101,7 @@ function createContext(conf, io = fileSystem) {
     write,
     writeOutput,
     cleanOutdir,
+    cssVarRoot,
     tokens,
     hasTokens,
     utility,
@@ -2059,14 +2114,13 @@ function createContext(conf, io = fileSystem) {
     execPattern,
     patternNodes,
     getPatternFnName,
+    getPatternDetails,
     recipes,
     getRecipe,
     hasRecipes,
     getRecipeDetails,
-    jsxFramework,
-    jsxFactoryName,
     jsxFactory,
-    cssVarRoot,
+    jsxFactoryDetails,
     properties,
     extract
   };