@pandacss/generator 0.16.0 → 0.17.0

package/dist/index.js

@@ -130,7 +130,7 @@ var getMessages = (ctx) => ({
 
 // src/artifacts/index.ts
 var import_shared4 = require("@pandacss/shared");
-var import_outdent43 = __toESM(require("outdent"));
+var import_outdent44 = __toESM(require("outdent"));
 
 // src/artifacts/css/global-css.ts
 var generateGlobalCss = (ctx) => {
@@ -518,12 +518,25 @@ function getDeepestNode(node) {
 function cleanupSelectors(css2, varSelector) {
   const root = import_postcss2.default.parse(css2);
   root.walkRules((rule) => {
+    const selectors = [];
     rule.selectors.forEach((selector) => {
-      const res = selector.split(varSelector).filter(Boolean);
-      if (res.length === 0)
-        return;
-      rule.selector = res.join(varSelector);
+      selectors.push(selector.trim());
     });
+    const ruleSelector = selectors.join(", ");
+    if (ruleSelector === varSelector) {
+      return;
+    }
+    const trimmedSelector = selectors.join(",");
+    if (trimmedSelector === varSelector) {
+      return;
+    }
+    const selectorsWithoutVarRoot = selectors.map((selector) => {
+      const res = selector.split(varSelector).filter(Boolean);
+      return res.join("");
+    }).filter(Boolean);
+    if (selectorsWithoutVarRoot.length === 0)
+      return;
+    rule.selector = selectorsWithoutVarRoot.join(", ");
   });
   return root.toString();
 }
@@ -637,11 +650,7 @@ function generateStringLiteralConditions(ctx) {
 // src/artifacts/js/css-fn.ts
 var import_outdent4 = require("outdent");
 function generateCssFn(ctx) {
-  const {
-    utility,
-    config: { hash, prefix },
-    conditions
-  } = ctx;
+  const { utility, hash, prefix, conditions } = ctx;
   const { separator, getPropShorthands } = utility;
   return {
     dts: import_outdent4.outdent`
@@ -696,14 +705,14 @@ function generateCssFn(ctx) {
     `}
 
     const context = {
-      ${hash ? "hash: true," : ""}
+      ${hash.className ? "hash: true," : ""}
       conditions: {
         shift: sortConditions,
         finalize: finalizeConditions,
         breakpoints: { keys: ${JSON.stringify(conditions.breakpoints.keys)} }
       },
       utility: {
-        ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
+        ${prefix.className ? "prefix: " + JSON.stringify(prefix.className) + "," : ""}
         transform: ${utility.hasShorthand ? `(prop, value) => {
               const key = resolveShorthand(prop)
               const propKey = classNameByProp.get(key) || hypenateProperty(key)
@@ -726,18 +735,15 @@ function generateCssFn(ctx) {
 // src/artifacts/js/css-fn.string-literal.ts
 var import_outdent5 = require("outdent");
 function generateStringLiteralCssFn(ctx) {
-  const {
-    utility,
-    config: { hash, prefix }
-  } = ctx;
+  const { utility, hash, prefix } = ctx;
   const { separator } = utility;
   return {
     dts: import_outdent5.outdent`
     export declare function css(template: { raw: readonly string[] | ArrayLike<string> }): string
     `,
     js: import_outdent5.outdent`
-    ${ctx.file.import("astish, createCss, withoutSpace", "../helpers")}
-    ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
+    ${ctx.file.import("astish, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
+    ${ctx.file.import("finalizeConditions, sortConditions", "./conditions")}
 
     function transform(prop, value) {
       const className = \`$\{prop}${separator}$\{withoutSpace(value)}\`
@@ -745,14 +751,14 @@ function generateStringLiteralCssFn(ctx) {
     }
 
     const context = {
-      hash: ${hash ? "true" : "false"},
+      hash: ${hash.className ? "true" : "false"},
       conditions: {
         shift: sortConditions,
         finalize: finalizeConditions,
         breakpoints: { keys: [] },
       },
       utility: {
-        prefix: ${prefix ? JSON.stringify(prefix) : void 0},
+        prefix: ${prefix.className ? JSON.stringify(prefix.className) : void 0},
         transform,
         hasShorthand: false,
         resolveShorthand(prop) {
@@ -763,9 +769,9 @@ function generateStringLiteralCssFn(ctx) {
 
     const cssFn = createCss(context)
 
-    export const css = (str) => {
-      return cssFn(astish(str[0]))
-    }
+    const fn = (style) => (isObject(style) ? style : astish(style[0]))
+    export const css = (...styles) => cssFn(mergeProps(...styles.filter(Boolean).map(fn)))
+    css.raw = (...styles) => mergeProps(...styles.filter(Boolean).map(fn))
     `
   };
 }
@@ -775,11 +781,19 @@ var import_outdent6 = require("outdent");
 function generateCvaFn(ctx) {
   return {
     js: import_outdent6.outdent`
-    ${ctx.file.import("compact, splitProps", "../helpers")}
+    ${ctx.file.import("compact, mergeProps, splitProps, uniq", "../helpers")}
     ${ctx.file.import("css, mergeCss", "./css")}
 
+    const defaults = (conf) => ({
+      base: {},
+      variants: {},
+      defaultVariants: {},
+      compoundVariants: [],
+      ...conf,
+    })
+
     export function cva(config) {
-      const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
+      const { base, variants, defaultVariants, compoundVariants } = defaults(config)
 
       function resolve(props = {}) {
         const computedVariants = { ...defaultVariants, ...compact(props) }
@@ -793,6 +807,19 @@ function generateCvaFn(ctx) {
         return mergeCss(variantCss, compoundVariantCss)
       }
 
+      function merge(cvaConfig) {
+        const override = defaults(cvaConfig)
+        const variantKeys = uniq(override.variantKeys, Object.keys(variants))
+        return cva({
+          base: mergeCss(base, override.base),
+          variants: Object.fromEntries(
+            variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]),
+          ),
+          defaultVariants: mergeProps(defaultVariants, override.defaultVariants),
+          compoundVariants: [...compoundVariants, ...override.compoundVariants],
+        })
+      }
+
       function cvaFn(props) {
         return css(resolve(props))
       }
@@ -811,6 +838,7 @@ function generateCvaFn(ctx) {
         variantKeys,
         raw: resolve,
         config,
+        merge,
         splitVariantProps,
       })
     }
@@ -885,7 +913,7 @@ var import_outdent8 = require("outdent");
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const __sources = sources.filter(Boolean);\n  const result = {};\n  for (const source of __sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/generated/astish.mjs.json
@@ -953,11 +981,52 @@ function generateIsValidProp(ctx) {
   };
 }
 
+// src/artifacts/js/jsx-helper.ts
+var import_outdent10 = require("outdent");
+var import_ts_pattern2 = require("ts-pattern");
+function generatedJsxHelpers(ctx) {
+  return {
+    js: (0, import_ts_pattern2.match)(ctx.isTemplateLiteralSyntax).with(
+      true,
+      () => import_outdent10.outdent`
+      export const getDisplayName = (Component) => {
+        if (typeof Component === 'string') return Component
+        return Component?.displayName || Component?.name || 'Component'
+      }`
+    ).otherwise(
+      () => import_outdent10.outdent`
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
+
+    export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+
+    export const composeShouldForwardProps = (tag, shouldForwardProp) =>
+      tag.__shouldForwardProps__ && shouldForwardProp
+        ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName)
+        : shouldForwardProp
+
+    export const composeCvaFn = (cvaA, cvaB) => {
+      if (cvaA && !cvaB) return cvaA
+      if (!cvaA && cvaB) return cvaB
+      if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB.config)
+      const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
+      TypeError.captureStackTrace?.(error)
+      throw error
+    }
+
+    export const getDisplayName = (Component) => {
+      if (typeof Component === 'string') return Component
+      return Component?.displayName || Component?.name || 'Component'
+    }
+  `
+    )
+  };
+}
+
 // src/artifacts/js/pattern.ts
 var import_shared = require("@pandacss/shared");
 var import_javascript_stringify = require("javascript-stringify");
-var import_outdent10 = require("outdent");
-var import_ts_pattern2 = require("ts-pattern");
+var import_outdent11 = require("outdent");
+var import_ts_pattern3 = require("ts-pattern");
 function generatePattern(ctx) {
   if (ctx.patterns.isEmpty())
     return;
@@ -974,7 +1043,7 @@ function generatePattern(ctx) {
     }
     return {
       name: dashName,
-      dts: import_outdent10.outdent`
+      dts: import_outdent11.outdent`
       ${ctx.file.importType("SystemStyleObject, ConditionalValue", "../types/index")}
       ${ctx.file.importType("Properties", "../types/csstype")}
       ${ctx.file.importType("PropertyValue", "../types/prop-type")}
@@ -984,7 +1053,7 @@ function generatePattern(ctx) {
       export interface ${upperName}Properties {
          ${Object.keys(properties ?? {}).map((key) => {
         const value = properties[key];
-        return (0, import_ts_pattern2.match)(value).with({ type: "property" }, (value2) => {
+        return (0, import_ts_pattern3.match)(value).with({ type: "property" }, (value2) => {
           return `${key}?: PropertyValue<'${value2.value}'>`;
         }).with({ type: "token" }, (value2) => {
           if (value2.property) {
@@ -999,7 +1068,7 @@ function generatePattern(ctx) {
       }).join("\n	")}
       }
 
-      ${strict ? import_outdent10.outdent`export declare function ${baseName}(styles: ${upperName}Properties): string` : import_outdent10.outdent`
+      ${strict ? import_outdent11.outdent`export declare function ${baseName}(styles: ${upperName}Properties): string` : import_outdent11.outdent`
 
           interface ${upperName}Styles extends ${upperName}Properties, DistributiveOmit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}> {}
 
@@ -1013,7 +1082,7 @@ function generatePattern(ctx) {
           `}
 
      `,
-      js: import_outdent10.outdent`
+      js: import_outdent11.outdent`
     ${ctx.file.import(helperImports.join(", "), "../helpers")}
     ${ctx.file.import("css", "../css/index")}
 
@@ -1032,8 +1101,8 @@ transform`)}
 // src/artifacts/js/recipe.ts
 var import_core4 = require("@pandacss/core");
 var import_shared2 = require("@pandacss/shared");
-var import_outdent11 = require("outdent");
-var import_ts_pattern3 = require("ts-pattern");
+var import_outdent12 = require("outdent");
+var import_ts_pattern4 = require("ts-pattern");
 var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 function generateRecipes(ctx) {
@@ -1047,11 +1116,11 @@ function generateRecipes(ctx) {
   const createRecipeFn = {
     name: "create-recipe",
     dts: "",
-    js: import_outdent11.outdent`
+    js: import_outdent12.outdent`
    ${ctx.file.import("css", "../css/css")}
    ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
-   ${ctx.file.import("compact, createCss, withoutSpace", "../helpers")}
+   ${ctx.file.import("compact, createCss, splitProps, uniq, withoutSpace", "../helpers")}
 
    export const createRecipe = (name, defaultVariants, compoundVariants) => {
     const getRecipeStyles = (variants) => {
@@ -1098,6 +1167,30 @@ function generateRecipes(ctx) {
         },
       })
    }
+
+   export const mergeRecipes = (recipeA, recipeB) => {
+    if (recipeA && !recipeB) return recipeA
+    if (!recipeA && recipeB) return recipeB
+
+    const recipeFn = (...args) => cx(recipeA(...args), recipeB(...args))
+    const variantKeys = uniq(recipeA.variantKeys, recipeB.variantKeys)
+    const variantMap = variantKeys.reduce((acc, key) => {
+      acc[key] = uniq(recipeA.variantMap[key], recipeB.variantMap[key])
+      return acc
+    }, {})
+  
+    return Object.assign(recipeFn, {
+      __recipe__: true,
+      __name__: \`$\{recipeA.__name__} \${recipeB.__name__}\`,
+      raw: (props) => props,
+      variantKeys,
+      variantMap,
+      splitVariantProps(props) {
+        return splitProps(props, variantKeys)
+      },
+    })
+    }
+  }
   `
   };
   return [
@@ -1105,9 +1198,9 @@ function generateRecipes(ctx) {
     ...ctx.recipes.details.map((recipe) => {
       const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
       const { description, defaultVariants, compoundVariants } = config;
-      const jsCode = (0, import_ts_pattern3.match)(config).when(
+      const jsCode = (0, import_ts_pattern4.match)(config).when(
         import_core4.isSlotRecipe,
-        (config2) => import_outdent11.outdent`
+        (config2) => import_outdent12.outdent`
         ${ctx.file.import("splitProps, getSlotCompoundVariant", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
@@ -1135,9 +1228,9 @@ function generateRecipes(ctx) {
         })
         `
       ).otherwise(
-        (config2) => import_outdent11.outdent`
+        (config2) => import_outdent12.outdent`
         ${ctx.file.import("splitProps", "../helpers")}
-        ${ctx.file.import("createRecipe", "./create-recipe")}
+        ${ctx.file.import("createRecipe, mergeRecipes", "./create-recipe")}
 
         const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config2.className}', ${stringify2(
           defaultVariants ?? {}
@@ -1153,6 +1246,9 @@ function generateRecipes(ctx) {
           raw: (props) => props,
           variantKeys: ${baseName}VariantKeys,
           variantMap: ${baseName}VariantMap,
+          merge(recipe) {
+            return mergeRecipes(this, recipe)
+          },
           splitVariantProps(props) {
             return splitProps(props, ${baseName}VariantKeys)
           },
@@ -1162,10 +1258,9 @@ function generateRecipes(ctx) {
       return {
         name: dashName,
         js: jsCode,
-        dts: import_outdent11.outdent`
+        dts: import_outdent12.outdent`
         ${ctx.file.importType("ConditionalValue", "../types/index")}
-        ${ctx.file.importType("Pretty", "../types/helpers")}
-        ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
+        ${ctx.file.importType("DistributiveOmit, Pretty", "../types/system-types")}
 
         interface ${upperName}Variant {
           ${Object.keys(variantKeyMap).map((key) => {
@@ -1202,10 +1297,10 @@ function generateRecipes(ctx) {
 }
 
 // src/artifacts/js/sva.ts
-var import_outdent12 = require("outdent");
+var import_outdent13 = require("outdent");
 function generateSvaFn(ctx) {
   return {
-    js: import_outdent12.outdent`
+    js: import_outdent13.outdent`
     ${ctx.file.import("getSlotRecipes, splitProps", "../helpers")}
     ${ctx.file.import("cva", "./cva")}
 
@@ -1242,7 +1337,7 @@ function generateSvaFn(ctx) {
       })
     }
     `,
-    dts: import_outdent12.outdent`
+    dts: import_outdent13.outdent`
     ${ctx.file.importType("SlotRecipeCreatorFn", "../types/recipe")}
 
     export declare const sva: SlotRecipeCreatorFn
@@ -1251,7 +1346,7 @@ function generateSvaFn(ctx) {
 }
 
 // src/artifacts/js/token.ts
-var import_outdent13 = __toESM(require("outdent"));
+var import_outdent14 = __toESM(require("outdent"));
 function generateTokenJs(ctx) {
   const { tokens } = ctx;
   const map = /* @__PURE__ */ new Map();
@@ -1262,7 +1357,7 @@ function generateTokenJs(ctx) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: import_outdent13.default`
+    js: import_outdent14.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
 
   export function token(path, fallback) {
@@ -1275,7 +1370,7 @@ function generateTokenJs(ctx) {
 
   token.var = tokenVar
   `,
-    dts: import_outdent13.default`
+    dts: import_outdent14.default`
   ${ctx.file.importType("Token", "./tokens")}
 
   export declare const token: {
@@ -1289,19 +1384,21 @@ function generateTokenJs(ctx) {
 }
 
 // src/artifacts/preact-jsx/jsx.ts
-var import_outdent14 = require("outdent");
+var import_outdent15 = require("outdent");
 function generatePreactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent14.outdent`
+    js: import_outdent15.outdent`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
 
     function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
@@ -1315,23 +1412,26 @@ function generatePreactJsxFactory(ctx) {
       )
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic, children, ...restProps } = props
+        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+
+        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
         const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+          return splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
         }, [combinedProps])
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
+          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.raw(variantProps)
+          const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
         }
 
@@ -1347,8 +1447,13 @@ function generatePreactJsxFactory(ctx) {
         })
       })
 
-      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      const name = getDisplayName(Dynamic)
+      
       ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = Dynamic
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
       return ${componentName}
     }
 
@@ -1374,8 +1479,8 @@ function generatePreactJsxFactory(ctx) {
 }
 
 // src/artifacts/preact-jsx/pattern.ts
-var import_outdent15 = require("outdent");
-var import_ts_pattern4 = require("ts-pattern");
+var import_outdent16 = require("outdent");
+var import_ts_pattern5 = require("ts-pattern");
 function generatePreactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1383,21 +1488,21 @@ function generatePreactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent15.outdent`
+      js: import_outdent16.outdent`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern4.match)(props.length).with(
+        ${(0, import_ts_pattern5.match)(props.length).with(
         0,
-        () => import_outdent15.outdent`
+        () => import_outdent16.outdent`
           const styleProps = ${styleFnName}()
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => import_outdent15.outdent`
+        () => import_outdent16.outdent`
           const { ${props.join(", ")}, ...restProps } = props
           const styleProps = ${styleFnName}({${props.join(", ")}})
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1405,7 +1510,7 @@ function generatePreactJsxPattern(ctx) {
       )}
       })
       `,
-      dts: import_outdent15.outdent`
+      dts: import_outdent16.outdent`
       import type { FunctionComponent } from 'preact'
       ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
       ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
@@ -1421,72 +1526,92 @@ function generatePreactJsxPattern(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.ts
-var import_outdent16 = require("outdent");
+var import_outdent17 = require("outdent");
 function generatePreactJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent16.outdent`
+    jsxFactory: import_outdent17.outdent`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent16.outdent`
+    jsxType: import_outdent17.outdent`
 import type { ComponentProps, JSX } from 'preact'
-${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
+      "./system-types"
+    )}
 
-type ElementType = keyof JSX.IntrinsicElements
+export type ElementType = JSX.ElementType
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T>, P> & JsxStyleProps): JSX.Element
   displayName?: string
 }
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: TProps
   shouldForwardProp?(prop: string, variantKeys: string[]): boolean
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>
+
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // src/artifacts/preact-jsx/jsx.string-literal.ts
-var import_outdent17 = require("outdent");
+var import_outdent18 = require("outdent");
 function generatePreactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent17.outdent`
+    js: import_outdent18.outdent`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
+    ${ctx.file.import("getDisplayName", "./factory-helper")}
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
       return function styledFn(template) {
-        const baseClassName = css(template)
+        const styles = css.raw(template)
+
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = Dynamic, ...elementProps } = props
-          const classes = () => cx(baseClassName, elementProps.className)
+          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
+         
+          function classes() {
+            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+          }
 
           return h(Element, {
             ref,
@@ -1495,8 +1620,12 @@ function generatePreactJsxStringLiteralFactory(ctx) {
           })
         })
 
-        const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+        const name = getDisplayName(Dynamic)
+        
         ${componentName}.displayName = \`${factoryName}.\${name}\`
+        ${componentName}.__styles__ = styles
+        ${componentName}.__base__ = Dynamic
+
         return ${componentName}
       }
     }
@@ -1523,31 +1652,35 @@ function generatePreactJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.string-literal.ts
-var import_outdent18 = require("outdent");
+var import_outdent19 = require("outdent");
 function generatePreactJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent18.outdent`
+    jsxFactory: import_outdent19.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent18.outdent`
+    jsxType: import_outdent19.outdent`
 import type { ComponentProps, JSX } from 'preact'
 
-type ElementType = keyof JSX.IntrinsicElements
+export type ElementType = JSX.ElementType
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
   displayName?: string
 }
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -1557,18 +1690,20 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/qwik-jsx/jsx.ts
-var import_outdent19 = require("outdent");
+var import_outdent20 = require("outdent");
 function generateQwikJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent19.outdent`
+    js: import_outdent20.outdent`
     import { h } from '@builder.io/qwik'
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
-          
     function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
@@ -1581,22 +1716,25 @@ function generateQwikJsxFactory(ctx) {
       )
 
       const ${componentName} = function ${componentName}(props) {
-        const { as: Element = Dynamic, children, className, ...restProps } = props
+        const { as: Element = Dynamic.__base__ || Dynamic, children, className, ...restProps } = props
+
+        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
         const combinedProps = Object.assign({}, defaultProps, restProps)
         
         const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] =
-          splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
-
-        const { css: cssStyles, ...propStyles } = styleProps
+          splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
 
         function recipeClass() {
-          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
         }
-
+        
         function cvaClass() {
-          const cvaStyles = cvaFn.raw(variantProps)
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, className)
         }
 
@@ -1611,8 +1749,13 @@ function generateQwikJsxFactory(ctx) {
         })
       }
 
-      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      const name = getDisplayName(Dynamic)
+      
       ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = Dynamic
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
       return ${componentName}
     }
 
@@ -1639,8 +1782,8 @@ function generateQwikJsxFactory(ctx) {
 }
 
 // src/artifacts/qwik-jsx/pattern.ts
-var import_outdent20 = require("outdent");
-var import_ts_pattern5 = require("ts-pattern");
+var import_outdent21 = require("outdent");
+var import_ts_pattern6 = require("ts-pattern");
 function generateQwikJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1648,20 +1791,20 @@ function generateQwikJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent20.outdent`
+      js: import_outdent21.outdent`
       import { h } from '@builder.io/qwik'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
       export const ${jsxName} = function ${jsxName}(props) {
-        ${(0, import_ts_pattern5.match)(props.length).with(
+        ${(0, import_ts_pattern6.match)(props.length).with(
         0,
-        () => import_outdent20.outdent`
+        () => import_outdent21.outdent`
         const styleProps = ${styleFnName}()
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
           `
       ).otherwise(
-        () => import_outdent20.outdent`
+        () => import_outdent21.outdent`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
@@ -1669,7 +1812,7 @@ function generateQwikJsxPattern(ctx) {
       )}
       }
       `,
-      dts: import_outdent20.outdent`
+      dts: import_outdent21.outdent`
       import type { Component } from '@builder.io/qwik'
       ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
       ${ctx.file.importType(typeName, "../types/jsx")}
@@ -1685,20 +1828,23 @@ function generateQwikJsxPattern(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.ts
-var import_outdent21 = require("outdent");
+var import_outdent22 = require("outdent");
 function generateQwikJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent21.outdent`
+    jsxFactory: import_outdent22.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent21.outdent`
+    jsxType: import_outdent22.outdent`
 import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
-import type { Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
-import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
+${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxStyleProps, PatchedHTMLProps, Pretty",
+      "./system-types"
+    )}
 
-type ElementType = keyof QwikIntrinsicElements | Component<any>
+export type ElementType = keyof QwikIntrinsicElements | Component<any>
 
 export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
@@ -1706,13 +1852,17 @@ export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsi
   ? P
   : never
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T>, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: TProps
   shouldForwardProp?(prop: string, variantKeys: string[]): boolean
@@ -1720,48 +1870,65 @@ interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
 
-interface JsxFactory {
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
+
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // src/artifacts/qwik-jsx/jsx.string-literal.ts
-var import_outdent22 = require("outdent");
+var import_outdent23 = require("outdent");
 function generateQwikJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent22.outdent`
+    js: import_outdent23.outdent`
     import { h } from '@builder.io/qwik'
+    ${ctx.file.import("getDisplayName", "./factory-helper")}
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
       return function styledFn(template) {
-          const baseClassName = css(template)
-          const ${componentName} = function ${componentName}(props) {
-              const { as: Element = Dynamic, ...elementProps } = props
-              const classes = () => cx(baseClassName, elementProps.className)
-
-              return h(Element, {
-                  ...elementProps,
-                  className: classes(),
-              })
+          const styles = css.raw(template)
+          
+          const ${componentName} = (props) => {
+            const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
+            
+            function classes() {
+              return cx(css(Dynamic.__styles__, styles), elementProps.className)
+            }
+
+            return h(Element, {
+              ...elementProps,
+              className: classes(),
+            })
           }
 
-          const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+          const name = getDisplayName(Dynamic)
+        
           ${componentName}.displayName = \`${factoryName}.\${name}\`
+          ${componentName}.__styles__ = styles
+          ${componentName}.__base__ = Dynamic
+  
           return ${componentName}
         }
     }
@@ -1789,18 +1956,18 @@ function generateQwikJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.string-literal.ts
-var import_outdent23 = require("outdent");
+var import_outdent24 = require("outdent");
 function generateQwikJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent23.outdent`
+    jsxFactory: import_outdent24.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent23.outdent`
+    jsxType: import_outdent24.outdent`
 import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
 
-type ElementType = keyof QwikIntrinsicElements | Component<any>
+export type ElementType = keyof QwikIntrinsicElements | Component<any>
 
 export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
@@ -1808,17 +1975,21 @@ export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsi
   ? P
   : never
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
 }
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K> }
+export type JsxElements = {
+  [K in keyof QwikIntrinsicElements]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -1828,18 +1999,20 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/react-jsx/jsx.ts
-var import_outdent24 = require("outdent");
+var import_outdent25 = require("outdent");
 function generateReactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent24.outdent`
+    js: import_outdent25.outdent`
     import { createElement, forwardRef, useMemo } from 'react'
     ${ctx.file.import("css, cx, cva", "../css/index")}
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
-    
     function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
@@ -1852,23 +2025,26 @@ function generateReactJsxFactory(ctx) {
       )
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic, children, ...restProps } = props
+        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+        
+        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
         const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+          return splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
         }, [combinedProps])
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
+          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.raw(variantProps)
+          const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
         }
 
@@ -1884,8 +2060,13 @@ function generateReactJsxFactory(ctx) {
         })
       })
 
-      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      const name = getDisplayName(Dynamic)
+      
       ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = Dynamic
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
       return ${componentName}
     }
 
@@ -1912,8 +2093,8 @@ function generateReactJsxFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/pattern.ts
-var import_outdent25 = require("outdent");
-var import_ts_pattern6 = require("ts-pattern");
+var import_outdent26 = require("outdent");
+var import_ts_pattern7 = require("ts-pattern");
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1921,20 +2102,20 @@ function generateReactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent25.outdent`
+      js: import_outdent26.outdent`
       import { createElement, forwardRef } from 'react'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern6.match)(props.length).with(
+        ${(0, import_ts_pattern7.match)(props.length).with(
         0,
-        () => import_outdent25.outdent`
+        () => import_outdent26.outdent`
         const styleProps = ${styleFnName}()
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => import_outdent25.outdent`
+        () => import_outdent26.outdent`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1942,7 +2123,7 @@ function generateReactJsxPattern(ctx) {
       )}
       })
       `,
-      dts: import_outdent25.outdent`
+      dts: import_outdent26.outdent`
       import type { FunctionComponent } from 'react'
       ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
       ${ctx.file.importType(typeName, "../types/jsx")}
@@ -1958,20 +2139,25 @@ function generateReactJsxPattern(ctx) {
 }
 
 // src/artifacts/react-jsx/types.ts
-var import_outdent26 = require("outdent");
+var import_outdent27 = require("outdent");
 function generateReactJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent26.outdent`
+    jsxFactory: import_outdent27.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent26.outdent`
+    jsxType: import_outdent27.outdent`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
-${ctx.file.importType("Assign, DistributiveOmit, JsxHTMLProps, JsxStyleProps", "./system-types")}
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
+      "./system-types"
+    )}
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
@@ -1982,7 +2168,9 @@ export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   displayName?: string
 }
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
 interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
@@ -1992,49 +2180,66 @@ interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
 
-interface JsxFactory {
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
+
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // src/artifacts/react-jsx/jsx.string-literal.ts
-var import_outdent27 = require("outdent");
+var import_outdent28 = require("outdent");
 function generateReactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent27.outdent`
+    js: import_outdent28.outdent`
     import { createElement, forwardRef } from 'react'
+    ${ctx.file.import("getDisplayName", "./factory-helper")}
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
       return function styledFn(template) {
-        const baseClassName = css(template)
+        const styles = css.raw(template)
+
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-            const { as: Element = Dynamic, ...elementProps } = props
-            const classes = () => cx(baseClassName, elementProps.className)
+          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
+          
+          function classes() {
+            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+          }
 
-            return createElement(Element, {
-                ref,
-                ...elementProps,
-                className: classes(),
-            })
+          return createElement(Element, {
+              ref,
+              ...elementProps,
+              className: classes(),
+          })
         })
 
-        const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+        const name = getDisplayName(Dynamic)
+        
         ${componentName}.displayName = \`${factoryName}.\${name}\`
+        ${componentName}.__styles__ = styles
+        ${componentName}.__base__ = Dynamic
+        
         return ${componentName}
       }
     }
@@ -2062,19 +2267,21 @@ function generateReactJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/types.string-literal.ts
-var import_outdent28 = require("outdent");
+var import_outdent29 = require("outdent");
 function generateReactJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent28.outdent`
+    jsxFactory: import_outdent29.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent28.outdent`
+    jsxType: import_outdent29.outdent`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
@@ -2085,11 +2292,13 @@ export type ${componentName}<T extends ElementType> = {
   displayName?: string
 }
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -2099,19 +2308,21 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/solid-jsx/jsx.ts
-var import_outdent29 = require("outdent");
+var import_outdent30 = require("outdent");
 function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: import_outdent29.outdent`
+    js: import_outdent30.outdent`
     import { Dynamic } from 'solid-js/web'
     import { createMemo, mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
+    ${ctx.file.import("isCssProperty, allCssProperties", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty, allCssProperties", "./is-valid-prop")}
-    
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
     
     function styledFn(element, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
@@ -2124,28 +2335,32 @@ function generateSolidJsxFactory(ctx) {
         options.defaultProps,
       )
 
-      return function ${componentName}(props) {
-        const mergedProps = mergeProps({ as: element }, defaultProps, props)
+      const ${componentName} = (props) => {
+        const mergedProps = mergeProps({ as: element.__base__ || element }, defaultProps, props)
+        
+        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+        
         const forwardedKeys = createMemo(() => Object.keys(props).filter(shouldForwardProp))
 
         const [localProps, forwardedProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
           mergedProps,
           ['as', 'class', 'className'],
           forwardedKeys(),
-          cvaFn.variantKeys,
+          __cvaFn__.variantKeys,
           allCssProperties,
           normalizeHTMLProps.keys
         )
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), localProps.class, localProps.className)
+          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), localProps.class, localProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.raw(variantProps)
+          const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(css(cvaStyles, propStyles, cssStyles), localProps.class, localProps.className)
         }
 
@@ -2172,6 +2387,15 @@ function generateSolidJsxFactory(ctx) {
           )
         )
       }
+
+      const name = getDisplayName(element)
+
+      ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = element
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
+      return ${componentName}
     }
 
     function createJsxFactory() {
@@ -2196,8 +2420,8 @@ function generateSolidJsxFactory(ctx) {
 }
 
 // src/artifacts/solid-jsx/pattern.ts
-var import_outdent30 = require("outdent");
-var import_ts_pattern7 = require("ts-pattern");
+var import_outdent31 = require("outdent");
+var import_ts_pattern8 = require("ts-pattern");
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -2205,21 +2429,21 @@ function generateSolidJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: import_outdent30.outdent`
+      js: import_outdent31.outdent`
     import { splitProps, mergeProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
     export function ${jsxName}(props) {
-      ${(0, import_ts_pattern7.match)(props.length).with(
+      ${(0, import_ts_pattern8.match)(props.length).with(
         0,
-        () => import_outdent30.outdent`
+        () => import_outdent31.outdent`
           const styleProps = ${styleFnName}()
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
         `
       ).otherwise(
-        () => import_outdent30.outdent`
+        () => import_outdent31.outdent`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFnName}(patternProps)
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -2227,7 +2451,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: import_outdent30.outdent`
+      dts: import_outdent31.outdent`
     import type { Component } from 'solid-js'
     ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
     ${ctx.file.importType(typeName, "../types/jsx")}
@@ -2243,31 +2467,38 @@ function generateSolidJsxPattern(ctx) {
 }
 
 // src/artifacts/solid-jsx/types.ts
-var import_outdent31 = require("outdent");
+var import_outdent32 = require("outdent");
 function generateSolidJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent31.outdent`
+    jsxFactory: import_outdent32.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent31.outdent`
+    jsxType: import_outdent32.outdent`
 import type { ComponentProps, Component, JSX } from 'solid-js'
-${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
+      "./system-types"
+    )}
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
-type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
+export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
 }
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: TProps
   shouldForwardProp?(prop: string, variantKeys: string[]): boolean
@@ -2275,41 +2506,51 @@ interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
 
-interface JsxFactory {
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
+
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // src/artifacts/solid-jsx/jsx.string-literal.ts
-var import_outdent32 = require("outdent");
+var import_outdent33 = require("outdent");
 function generateSolidJsxStringLiteralFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: import_outdent32.outdent`
+    js: import_outdent33.outdent`
 import { mergeProps, splitProps } from 'solid-js'
 import { Dynamic, createComponent } from 'solid-js/web'
+${ctx.file.import("getDisplayName", "./factory-helper")}
 ${ctx.file.import("css, cx", "../css/index")}
 
 function createStyled(element) {
   return function styledFn(template) {
-    const baseClassName = css(template)
-    return function ${componentName}(props) {
-      const mergedProps = mergeProps({ as: element }, props)
-      const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
+    const styles = css.raw(template)
 
+    const ${componentName} = (props) => {
+      const mergedProps = mergeProps({ as: element.__base__ || element }, props)
+      const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
+      
       return createComponent(
         Dynamic,
         mergeProps(
@@ -2318,13 +2559,21 @@ function createStyled(element) {
               return localProps.as
             },
             get class() {
-              return cx(baseClassName, localProps.class)
+              return cx(css(element.__styles__, styles), localProps.class)
             },
           },
           elementProps,
         ),
       )
     }
+
+    const name = getDisplayName(element)
+
+    ${componentName}.displayName = \`${factoryName}.\${name}\`
+    ${componentName}.__styles__ = styles
+    ${componentName}.__base__ = element
+
+    return ${componentName}
   }
 }
 
@@ -2350,31 +2599,35 @@ export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
 }
 
 // src/artifacts/solid-jsx/types.string-literal.ts
-var import_outdent33 = require("outdent");
+var import_outdent34 = require("outdent");
 function generateSolidJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent33.outdent`
+    jsxFactory: import_outdent34.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent33.outdent`
+    jsxType: import_outdent34.outdent`
 import type { Component, ComponentProps, JSX } from 'solid-js'
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
-type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
+export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export type ${componentName}<T extends ElementType> = {
     (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
     displayName?: string
 }
 
-interface JsxFactory {
+export interface JsxFactory {
     <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -2384,18 +2637,20 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/vue-jsx/jsx.ts
-var import_outdent34 = require("outdent");
+var import_outdent35 = require("outdent");
 function generateVueJsxFactory(ctx) {
-  const { factoryName } = ctx.jsx;
+  const { factoryName, componentName } = ctx.jsx;
   return {
-    js: import_outdent34.outdent`
+    js: import_outdent35.outdent`
     import { defineComponent, h, computed } from 'vue'
+    ${ctx.file.import(
+      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "./factory-helper"
+    )}
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
-          
     function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
       
@@ -2407,30 +2662,33 @@ function generateVueJsxFactory(ctx) {
         options.defaultProps,
       )
         
-      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      const name = getDisplayName(Dynamic)
 
-      return defineComponent({
+      const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic } },
+        props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
         setup(props, { slots, attrs }) {
+          const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+          const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+          
           const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
           
           const splittedProps = computed(() => {
-            return splitProps(combinedProps.value, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+            return splitProps(combinedProps.value, shouldForwardProp, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
           })
 
           const recipeClass = computed(() => {
             const [_forwardedProps, variantProps, styleProps, _htmlProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
-            const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-            return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className)
+            const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
+            return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className)
           })
 
           const cvaClass = computed(() => {
             const [_forwardedProps, variantProps, styleProps, _htmlProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
-            const cvaStyles = cvaFn.raw(variantProps)
+            const cvaStyles = __cvaFn__.raw(variantProps)
             return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className)
           })
 
@@ -2451,6 +2709,13 @@ function generateVueJsxFactory(ctx) {
           }
         },
       })
+
+      ${componentName}.displayName = \`${factoryName}.\${name}\`
+      ${componentName}.__cva__ = cvaFn
+      ${componentName}.__base__ = Dynamic
+      ${componentName}.__shouldForwardProps__ = shouldForwardProp
+      
+      return ${componentName}
     }
 
     function createJsxFactory() {
@@ -2471,25 +2736,30 @@ function generateVueJsxFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/jsx.string-literal.ts
-var import_outdent35 = require("outdent");
+var import_outdent36 = require("outdent");
 function generateVueJsxStringLiteralFactory(ctx) {
-  const { factoryName } = ctx.jsx;
+  const { componentName, factoryName } = ctx.jsx;
   return {
-    js: import_outdent35.outdent`
+    js: import_outdent36.outdent`
     import { defineComponent, h, computed } from 'vue'
+    ${ctx.file.import("getDisplayName", "./factory-helper")}
     ${ctx.file.import("css, cx", "../css/index")}
 
   function createStyled(Dynamic) {
-    const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+    const name = getDisplayName(Dynamic)
 
     function styledFn(template) {
-      const baseClassName = css(template)
-      return defineComponent({
+      const styles = css.raw(template)
+      
+      const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
         props: { as: { type: [String, Object], default: Dynamic } },
         setup(props, { slots, attrs }) {
-          const classes = computed(() => cx(baseClassName, elementProps.className))
+          const classes = computed(() => {
+            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+          })
+          
           return () => {
             return h(
               props.as,
@@ -2502,6 +2772,11 @@ function generateVueJsxStringLiteralFactory(ctx) {
           }
         },
       })
+
+      ${componentName}.__styles__ = styles
+      ${componentName}.__base__ = element
+
+      return ${componentName}
     }
   }
 
@@ -2527,7 +2802,7 @@ function generateVueJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/pattern.ts
-var import_outdent36 = require("outdent");
+var import_outdent37 = require("outdent");
 function generateVueJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -2536,7 +2811,7 @@ function generateVueJsxPattern(ctx) {
     const propList = props.map((v) => JSON.stringify(v)).join(", ");
     return {
       name: dashName,
-      js: import_outdent36.outdent`
+      js: import_outdent37.outdent`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -2554,7 +2829,7 @@ function generateVueJsxPattern(ctx) {
         }
     })
     `,
-      dts: import_outdent36.outdent`
+      dts: import_outdent37.outdent`
     import type { FunctionalComponent } from 'vue'
     ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
     ${ctx.file.importType(typeName, "../types/jsx")}
@@ -2570,23 +2845,27 @@ function generateVueJsxPattern(ctx) {
 }
 
 // src/artifacts/vue-jsx/types.ts
-var import_outdent37 = require("outdent");
+var import_outdent38 = require("outdent");
 function generateVueJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent37.outdent`
+    jsxFactory: import_outdent38.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
 
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent37.outdent`
+    jsxType: import_outdent38.outdent`
 import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
-${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
+${ctx.file.importType(
+      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
+      "./system-types"
+    )}
+
+export type IntrinsicElement = keyof NativeElements
 
-type IntrinsicElement = keyof NativeElements
-type ElementType = IntrinsicElement | Component
+export type ElementType = IntrinsicElement | Component
 
 export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? NativeElements[T]
@@ -2594,13 +2873,15 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
-  interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
-JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
+export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
+  JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
 > {}
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: TProps
   shouldForwardProp?(prop: string, variantKeys: string[]): boolean
@@ -2608,39 +2889,48 @@ interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P['__type']>>;
 
-interface JsxFactory {
+export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
+  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
+  : ${componentName}<T, P>
+
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>> ): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>> ): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in IntrinsicElement]: ${componentName}<K, {}> }
+export type JsxElements = {
+  [K in IntrinsicElement]: ${componentName}<K, {}>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
   };
 }
 
 // src/artifacts/vue-jsx/types.string-literal.ts
-var import_outdent38 = require("outdent");
+var import_outdent39 = require("outdent");
 function generateVueJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent38.outdent`
+    jsxFactory: import_outdent39.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
 
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent38.outdent`
+    jsxType: import_outdent39.outdent`
 import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
-type IntrinsicElement = keyof NativeElements
-type ElementType = IntrinsicElement | Component
+export type IntrinsicElement = keyof NativeElements
+
+export type ElementType = IntrinsicElement | Component
 
 export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? NativeElements[T]
@@ -2648,14 +2938,16 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
-type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
+export type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
 >
 
-interface JsxFactory {
+export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>
 }
 
-type JsxElements = { [K in IntrinsicElement]: ${componentName}<K> }
+export type JsxElements = {
+  [K in IntrinsicElement]: ${componentName}<K>
+}
 
 export type ${upperName} = JsxFactory & JsxElements
 
@@ -2772,12 +3064,12 @@ var csstype_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/generated/composition.d.ts.json
 var composition_d_ts_default = {
-  content: "import type { CompositionStyleObject } from './system-types'\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\nexport interface Token<Value = any> {\n  value: Value\n  description?: string\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontVariationSettings'\n  | 'fontVariantPosition'\n  | 'fontVariantCaps'\n  | 'fontVariantNumeric'\n  | 'fontVariantAlternates'\n  | 'fontVariantLigatures'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'fontSynthesis'\n  | 'fontStyle'\n  | 'fontVariant'\n  | 'lineHeight'\n  | 'letterSpacing'\n  | 'textDecoration'\n  | 'textTransform'\n  | 'textIndent'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationStyle'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'hyphenateCharacter'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n}\n"
+  content: "import type { CompositionStyleObject } from './system-types'\nimport type { Token } from '../tokens'\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontVariationSettings'\n  | 'fontVariantPosition'\n  | 'fontVariantCaps'\n  | 'fontVariantNumeric'\n  | 'fontVariantAlternates'\n  | 'fontVariantLigatures'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'fontSynthesis'\n  | 'fontStyle'\n  | 'fontVariant'\n  | 'lineHeight'\n  | 'letterSpacing'\n  | 'textDecoration'\n  | 'textTransform'\n  | 'textIndent'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationStyle'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'hyphenateCharacter'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n}\n"
 };
 
 // src/artifacts/generated/recipe.d.ts.json
@@ -2801,7 +3093,7 @@ var selectors_d_ts_default = {
 };
 
 // src/artifacts/types/generated.ts
-var import_ts_pattern8 = require("ts-pattern");
+var import_ts_pattern9 = require("ts-pattern");
 var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
 function getGeneratedTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
@@ -2813,15 +3105,15 @@ function getGeneratedTypes(ctx) {
     composition: rewriteImports(composition_d_ts_default.content),
     selectors: rewriteImports(selectors_d_ts_default.content),
     system: rewriteImports(
-      (0, import_ts_pattern8.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with("minimal", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = WithCss")).with("none", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = {}")).exhaustive()
+      (0, import_ts_pattern9.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with("minimal", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = WithCss")).with("none", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = {}")).exhaustive()
     )
   };
 }
 
 // src/artifacts/types/main.ts
-var import_outdent39 = require("outdent");
+var import_outdent40 = require("outdent");
 var generateTypesEntry = (ctx) => ({
-  global: import_outdent39.outdent`
+  global: import_outdent40.outdent`
     // @ts-nocheck
     import type * as Panda from '@pandacss/dev'
     ${ctx.file.importType("RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig", "./recipe")}
@@ -2842,7 +3134,7 @@ var generateTypesEntry = (ctx) => ({
     }
     `,
   // We need to export types used in the global.d.ts here to avoid TS errors such as `The inferred type of 'xxx' cannot be named without a reference to 'yyy'`
-  index: import_outdent39.outdent`
+  index: import_outdent40.outdent`
     import '${ctx.file.extDts("./global")}'
     ${ctx.file.exportTypeStar("./conditions")}
     ${ctx.file.exportTypeStar("./pattern")}
@@ -2852,13 +3144,13 @@ var generateTypesEntry = (ctx) => ({
     ${ctx.file.exportTypeStar("./style-props")}
 
     `,
-  helpers: import_outdent39.outdent`
+  helpers: import_outdent40.outdent`
   export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
   `
 });
 
 // src/artifacts/types/prop-types.ts
-var import_outdent40 = require("outdent");
+var import_outdent41 = require("outdent");
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -2866,7 +3158,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    import_outdent40.outdent`
+    import_outdent41.outdent`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("CssProperties", "./system-types")}
     ${ctx.file.importType("Tokens", "../tokens/index")}
@@ -2889,7 +3181,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return import_outdent40.outdent`
+  return import_outdent41.outdent`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -2902,10 +3194,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 var import_is_valid_prop = require("@pandacss/is-valid-prop");
-var import_outdent41 = __toESM(require("outdent"));
+var import_outdent42 = __toESM(require("outdent"));
 function generateStyleProps(ctx) {
   const props = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()).filter(Boolean));
-  return import_outdent41.default`
+  return import_outdent42.default`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("PropertyValue", "./prop-type")}
     ${ctx.file.importType("Token", "../tokens/index")}
@@ -2922,7 +3214,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 var import_shared3 = require("@pandacss/shared");
-var import_outdent42 = require("outdent");
+var import_outdent43 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 var categories = [
   "zIndex",
@@ -2973,7 +3265,7 @@ function generateTokenTypes(ctx) {
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
   set.add(`export type TokenCategory = ${(0, import_shared3.unionType)(categories)}`);
-  return import_outdent42.outdent.string(Array.from(set).join("\n\n"));
+  return import_outdent43.outdent.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/index.ts
@@ -3019,7 +3311,6 @@ function setupTypes(ctx) {
       { file: ctx.file.extDts("selectors"), code: gen.selectors },
       { file: ctx.file.extDts("composition"), code: gen.composition },
       { file: ctx.file.extDts("global"), code: entry.global },
-      { file: ctx.file.extDts("helpers"), code: entry.helpers },
       { file: ctx.file.extDts("recipe"), code: gen.recipe },
       { file: ctx.file.extDts("pattern"), code: gen.pattern },
       { file: ctx.file.extDts("parts"), code: gen.parts },
@@ -3082,8 +3373,8 @@ function setupRecipes(ctx) {
     return;
   const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
   const index = {
-    js: import_outdent43.default.string(indexFiles.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
-    dts: import_outdent43.default.string(indexFiles.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
+    js: import_outdent44.default.string(indexFiles.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
+    dts: import_outdent44.default.string(indexFiles.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -3102,8 +3393,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: import_outdent43.default.string(files.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
-    dts: import_outdent43.default.string(files.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
+    js: import_outdent44.default.string(files.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
+    dts: import_outdent44.default.string(files.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -3122,18 +3413,19 @@ function setupJsx(ctx) {
   const types = generateJsxTypes(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
+  const helpers3 = generatedJsxHelpers(ctx);
   const index = {
-    js: import_outdent43.default`
+    js: import_outdent44.default`
   ${ctx.file.exportStar("./factory")}
   ${isValidProp?.js ? ctx.file.exportStar("./is-valid-prop") : ""}
-  ${import_outdent43.default.string(patterns.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n"))}
+  ${import_outdent44.default.string(patterns.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n"))}
   `,
-    dts: import_outdent43.default`
+    dts: import_outdent44.default`
   ${ctx.file.exportTypeStar("./factory")}
 
   ${isValidProp?.dts ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
 
-  ${import_outdent43.default.string(patterns.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))}
+  ${import_outdent44.default.string(patterns.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))}
 
   ${ctx.file.exportType([ctx.jsx.typeName, ctx.jsx.componentName].join(", "), "../types/jsx")}
     `
@@ -3145,6 +3437,7 @@ function setupJsx(ctx) {
       ...patterns.map((file) => ({ file: ctx.file.extDts(file.name), code: file.dts })),
       { file: ctx.file.ext("is-valid-prop"), code: isValidProp?.js },
       { file: ctx.file.extDts("is-valid-prop"), code: isValidProp?.dts },
+      { file: ctx.file.ext("factory-helper"), code: helpers3.js },
       { file: ctx.file.ext("factory"), code: factory?.js },
       { file: ctx.file.extDts("factory"), code: types.jsxFactory },
       { file: ctx.file.ext("index"), code: index.js },
@@ -3154,13 +3447,13 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: import_outdent43.default`
+    js: import_outdent44.default`
   ${ctx.file.exportStar("./css")}
   ${ctx.file.exportStar("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./cva")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./sva")}
  `,
-    dts: import_outdent43.default`
+    dts: import_outdent44.default`
   ${ctx.file.exportTypeStar("./css")}
   ${ctx.file.exportTypeStar("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportTypeStar("./cva")}
@@ -3222,6 +3515,8 @@ var generateArtifacts = (ctx) => () => {
   ].filter(Boolean).map((artifact) => {
     const files = artifact?.files ?? [];
     files.forEach((file) => {
+      if (!file)
+        return;
       if (ctx.file.isTypeFile(file.file)) {
         file.code = `/* eslint-disable */
 ${file.code}`;
@@ -3261,7 +3556,7 @@ var generateFlattenedCss = (ctx) => (options) => {
 // src/artifacts/css/parser-css.ts
 var import_logger2 = require("@pandacss/logger");
 var import_func = require("lil-fp/func");
-var import_ts_pattern9 = require("ts-pattern");
+var import_ts_pattern10 = require("ts-pattern");
 var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
   { ...ctx, sheet: ctx.createSheet(), result },
   (0, import_func.tap)(({ sheet, result: result2, patterns, recipes }) => {
@@ -3291,7 +3586,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
           const recipeConfig = recipes.getConfig(recipeName);
           if (!recipeConfig)
             continue;
-          (0, import_ts_pattern9.match)(recipe).with({ type: "jsx-recipe" }, () => {
+          (0, import_ts_pattern10.match)(recipe).with({ type: "jsx-recipe" }, () => {
             recipe.data.forEach((data) => {
               const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
               sheet.processStyleProps(filterProps(ctx, styleProps));
@@ -3310,7 +3605,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
     result2.pattern.forEach((patternSet, name) => {
       try {
         for (const pattern of patternSet) {
-          (0, import_ts_pattern9.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern9.P.string }, ({ name: jsxName }) => {
+          (0, import_ts_pattern10.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern10.P.string }, ({ name: jsxName }) => {
             pattern.data.forEach((data) => {
               const fnName = patterns.find(jsxName);
               const styleProps = patterns.transform(fnName, data);
@@ -3463,6 +3758,7 @@ var getJsxEngine = (config) => {
     factoryName: jsxFactory,
     upperName: (0, import_shared6.capitalize)(jsxFactory),
     typeName: `HTML${(0, import_shared6.capitalize)(jsxFactory)}Props`,
+    variantName: `${(0, import_shared6.capitalize)(jsxFactory)}VariantProps`,
     componentName: `${(0, import_shared6.capitalize)(jsxFactory)}Component`,
     framework: jsxFramework,
     styleProps: jsxStyleProps2 ?? "all"