@pandacss/generator 0.0.0-dev-20231020171339 → 0.0.0-dev-20231020184323

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +575 -303
  2. package/dist/index.mjs +575 -303
  3. package/package.json +8 -8
package/dist/index.js CHANGED
@@ -130,7 +130,7 @@ var getMessages = (ctx) => ({
130
130
 
131
131
  // src/artifacts/index.ts
132
132
  var import_shared4 = require("@pandacss/shared");
133
- var import_outdent43 = __toESM(require("outdent"));
133
+ var import_outdent44 = __toESM(require("outdent"));
134
134
 
135
135
  // src/artifacts/css/global-css.ts
136
136
  var generateGlobalCss = (ctx) => {
@@ -650,11 +650,7 @@ function generateStringLiteralConditions(ctx) {
650
650
  // src/artifacts/js/css-fn.ts
651
651
  var import_outdent4 = require("outdent");
652
652
  function generateCssFn(ctx) {
653
- const {
654
- utility,
655
- config: { hash, prefix },
656
- conditions
657
- } = ctx;
653
+ const { utility, hash, prefix, conditions } = ctx;
658
654
  const { separator, getPropShorthands } = utility;
659
655
  return {
660
656
  dts: import_outdent4.outdent`
@@ -709,14 +705,14 @@ function generateCssFn(ctx) {
709
705
  `}
710
706
 
711
707
  const context = {
712
- ${hash ? "hash: true," : ""}
708
+ ${hash.className ? "hash: true," : ""}
713
709
  conditions: {
714
710
  shift: sortConditions,
715
711
  finalize: finalizeConditions,
716
712
  breakpoints: { keys: ${JSON.stringify(conditions.breakpoints.keys)} }
717
713
  },
718
714
  utility: {
719
- ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
715
+ ${prefix.className ? "prefix: " + JSON.stringify(prefix.className) + "," : ""}
720
716
  transform: ${utility.hasShorthand ? `(prop, value) => {
721
717
  const key = resolveShorthand(prop)
722
718
  const propKey = classNameByProp.get(key) || hypenateProperty(key)
@@ -739,18 +735,15 @@ function generateCssFn(ctx) {
739
735
  // src/artifacts/js/css-fn.string-literal.ts
740
736
  var import_outdent5 = require("outdent");
741
737
  function generateStringLiteralCssFn(ctx) {
742
- const {
743
- utility,
744
- config: { hash, prefix }
745
- } = ctx;
738
+ const { utility, hash, prefix } = ctx;
746
739
  const { separator } = utility;
747
740
  return {
748
741
  dts: import_outdent5.outdent`
749
742
  export declare function css(template: { raw: readonly string[] | ArrayLike<string> }): string
750
743
  `,
751
744
  js: import_outdent5.outdent`
752
- ${ctx.file.import("astish, createCss, withoutSpace", "../helpers")}
753
- ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
745
+ ${ctx.file.import("astish, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
746
+ ${ctx.file.import("finalizeConditions, sortConditions", "./conditions")}
754
747
 
755
748
  function transform(prop, value) {
756
749
  const className = \`$\{prop}${separator}$\{withoutSpace(value)}\`
@@ -758,14 +751,14 @@ function generateStringLiteralCssFn(ctx) {
758
751
  }
759
752
 
760
753
  const context = {
761
- hash: ${hash ? "true" : "false"},
754
+ hash: ${hash.className ? "true" : "false"},
762
755
  conditions: {
763
756
  shift: sortConditions,
764
757
  finalize: finalizeConditions,
765
758
  breakpoints: { keys: [] },
766
759
  },
767
760
  utility: {
768
- prefix: ${prefix ? JSON.stringify(prefix) : void 0},
761
+ prefix: ${prefix.className ? JSON.stringify(prefix.className) : void 0},
769
762
  transform,
770
763
  hasShorthand: false,
771
764
  resolveShorthand(prop) {
@@ -776,9 +769,9 @@ function generateStringLiteralCssFn(ctx) {
776
769
 
777
770
  const cssFn = createCss(context)
778
771
 
779
- export const css = (str) => {
780
- return cssFn(astish(str[0]))
781
- }
772
+ const fn = (style) => (isObject(style) ? style : astish(style[0]))
773
+ export const css = (...styles) => cssFn(mergeProps(...styles.filter(Boolean).map(fn)))
774
+ css.raw = (...styles) => mergeProps(...styles.filter(Boolean).map(fn))
782
775
  `
783
776
  };
784
777
  }
@@ -788,11 +781,19 @@ var import_outdent6 = require("outdent");
788
781
  function generateCvaFn(ctx) {
789
782
  return {
790
783
  js: import_outdent6.outdent`
791
- ${ctx.file.import("compact, splitProps", "../helpers")}
784
+ ${ctx.file.import("compact, mergeProps, splitProps, uniq", "../helpers")}
792
785
  ${ctx.file.import("css, mergeCss", "./css")}
793
786
 
787
+ const defaults = (conf) => ({
788
+ base: {},
789
+ variants: {},
790
+ defaultVariants: {},
791
+ compoundVariants: [],
792
+ ...conf,
793
+ })
794
+
794
795
  export function cva(config) {
795
- const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
796
+ const { base, variants, defaultVariants, compoundVariants } = defaults(config)
796
797
 
797
798
  function resolve(props = {}) {
798
799
  const computedVariants = { ...defaultVariants, ...compact(props) }
@@ -806,6 +807,19 @@ function generateCvaFn(ctx) {
806
807
  return mergeCss(variantCss, compoundVariantCss)
807
808
  }
808
809
 
810
+ function merge(cvaConfig) {
811
+ const override = defaults(cvaConfig)
812
+ const variantKeys = uniq(override.variantKeys, Object.keys(variants))
813
+ return cva({
814
+ base: mergeCss(base, override.base),
815
+ variants: Object.fromEntries(
816
+ variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]),
817
+ ),
818
+ defaultVariants: mergeProps(defaultVariants, override.defaultVariants),
819
+ compoundVariants: [...compoundVariants, ...override.compoundVariants],
820
+ })
821
+ }
822
+
809
823
  function cvaFn(props) {
810
824
  return css(resolve(props))
811
825
  }
@@ -824,6 +838,7 @@ function generateCvaFn(ctx) {
824
838
  variantKeys,
825
839
  raw: resolve,
826
840
  config,
841
+ merge,
827
842
  splitVariantProps,
828
843
  })
829
844
  }
@@ -898,7 +913,7 @@ var import_outdent8 = require("outdent");
898
913
 
899
914
  // src/artifacts/generated/helpers.mjs.json
900
915
  var helpers_mjs_default = {
901
- 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'
916
+ 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 objects = sources.filter(Boolean);\n return objects.reduce((prev, obj) => {\n Object.keys(obj).forEach((key) => {\n const prevValue = prev[key];\n const value = obj[key];\n if (isObject(prevValue) && isObject(value)) {\n prev[key] = mergeProps(prevValue, value);\n } else {\n prev[key] = value;\n }\n });\n return prev;\n }, {});\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'
902
917
  };
903
918
 
904
919
  // src/artifacts/generated/astish.mjs.json
@@ -966,11 +981,52 @@ function generateIsValidProp(ctx) {
966
981
  };
967
982
  }
968
983
 
984
+ // src/artifacts/js/jsx-helper.ts
985
+ var import_outdent10 = require("outdent");
986
+ var import_ts_pattern2 = require("ts-pattern");
987
+ function generatedJsxHelpers(ctx) {
988
+ return {
989
+ js: (0, import_ts_pattern2.match)(ctx.isTemplateLiteralSyntax).with(
990
+ true,
991
+ () => import_outdent10.outdent`
992
+ export const getDisplayName = (Component) => {
993
+ if (typeof Component === 'string') return Component
994
+ return Component?.displayName || Component?.name || 'Component'
995
+ }`
996
+ ).otherwise(
997
+ () => import_outdent10.outdent`
998
+ ${ctx.file.import("isCssProperty", "./is-valid-prop")}
999
+
1000
+ export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
1001
+
1002
+ export const composeShouldForwardProps = (tag, shouldForwardProp) =>
1003
+ tag.__shouldForwardProps__ && shouldForwardProp
1004
+ ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName)
1005
+ : shouldForwardProp
1006
+
1007
+ export const composeCvaFn = (cvaA, cvaB) => {
1008
+ if (cvaA && !cvaB) return cvaA
1009
+ if (!cvaA && cvaB) return cvaB
1010
+ if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB.config)
1011
+ const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
1012
+ TypeError.captureStackTrace?.(error)
1013
+ throw error
1014
+ }
1015
+
1016
+ export const getDisplayName = (Component) => {
1017
+ if (typeof Component === 'string') return Component
1018
+ return Component?.displayName || Component?.name || 'Component'
1019
+ }
1020
+ `
1021
+ )
1022
+ };
1023
+ }
1024
+
969
1025
  // src/artifacts/js/pattern.ts
970
1026
  var import_shared = require("@pandacss/shared");
971
1027
  var import_javascript_stringify = require("javascript-stringify");
972
- var import_outdent10 = require("outdent");
973
- var import_ts_pattern2 = require("ts-pattern");
1028
+ var import_outdent11 = require("outdent");
1029
+ var import_ts_pattern3 = require("ts-pattern");
974
1030
  function generatePattern(ctx) {
975
1031
  if (ctx.patterns.isEmpty())
976
1032
  return;
@@ -987,7 +1043,7 @@ function generatePattern(ctx) {
987
1043
  }
988
1044
  return {
989
1045
  name: dashName,
990
- dts: import_outdent10.outdent`
1046
+ dts: import_outdent11.outdent`
991
1047
  ${ctx.file.importType("SystemStyleObject, ConditionalValue", "../types/index")}
992
1048
  ${ctx.file.importType("Properties", "../types/csstype")}
993
1049
  ${ctx.file.importType("PropertyValue", "../types/prop-type")}
@@ -997,7 +1053,7 @@ function generatePattern(ctx) {
997
1053
  export interface ${upperName}Properties {
998
1054
  ${Object.keys(properties ?? {}).map((key) => {
999
1055
  const value = properties[key];
1000
- return (0, import_ts_pattern2.match)(value).with({ type: "property" }, (value2) => {
1056
+ return (0, import_ts_pattern3.match)(value).with({ type: "property" }, (value2) => {
1001
1057
  return `${key}?: PropertyValue<'${value2.value}'>`;
1002
1058
  }).with({ type: "token" }, (value2) => {
1003
1059
  if (value2.property) {
@@ -1012,7 +1068,7 @@ function generatePattern(ctx) {
1012
1068
  }).join("\n ")}
1013
1069
  }
1014
1070
 
1015
- ${strict ? import_outdent10.outdent`export declare function ${baseName}(styles: ${upperName}Properties): string` : import_outdent10.outdent`
1071
+ ${strict ? import_outdent11.outdent`export declare function ${baseName}(styles: ${upperName}Properties): string` : import_outdent11.outdent`
1016
1072
 
1017
1073
  interface ${upperName}Styles extends ${upperName}Properties, DistributiveOmit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}> {}
1018
1074
 
@@ -1026,7 +1082,7 @@ function generatePattern(ctx) {
1026
1082
  `}
1027
1083
 
1028
1084
  `,
1029
- js: import_outdent10.outdent`
1085
+ js: import_outdent11.outdent`
1030
1086
  ${ctx.file.import(helperImports.join(", "), "../helpers")}
1031
1087
  ${ctx.file.import("css", "../css/index")}
1032
1088
 
@@ -1045,8 +1101,8 @@ transform`)}
1045
1101
  // src/artifacts/js/recipe.ts
1046
1102
  var import_core4 = require("@pandacss/core");
1047
1103
  var import_shared2 = require("@pandacss/shared");
1048
- var import_outdent11 = require("outdent");
1049
- var import_ts_pattern3 = require("ts-pattern");
1104
+ var import_outdent12 = require("outdent");
1105
+ var import_ts_pattern4 = require("ts-pattern");
1050
1106
  var stringify2 = (value) => JSON.stringify(value, null, 2);
1051
1107
  var isBooleanValue = (value) => value === "true" || value === "false";
1052
1108
  function generateRecipes(ctx) {
@@ -1060,11 +1116,11 @@ function generateRecipes(ctx) {
1060
1116
  const createRecipeFn = {
1061
1117
  name: "create-recipe",
1062
1118
  dts: "",
1063
- js: import_outdent11.outdent`
1119
+ js: import_outdent12.outdent`
1064
1120
  ${ctx.file.import("css", "../css/css")}
1065
1121
  ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
1066
1122
  ${ctx.file.import("cx", "../css/cx")}
1067
- ${ctx.file.import("compact, createCss, withoutSpace", "../helpers")}
1123
+ ${ctx.file.import("compact, createCss, splitProps, uniq, withoutSpace", "../helpers")}
1068
1124
 
1069
1125
  export const createRecipe = (name, defaultVariants, compoundVariants) => {
1070
1126
  const getRecipeStyles = (variants) => {
@@ -1111,6 +1167,30 @@ function generateRecipes(ctx) {
1111
1167
  },
1112
1168
  })
1113
1169
  }
1170
+
1171
+ export const mergeRecipes = (recipeA, recipeB) => {
1172
+ if (recipeA && !recipeB) return recipeA
1173
+ if (!recipeA && recipeB) return recipeB
1174
+
1175
+ const recipeFn = (...args) => cx(recipeA(...args), recipeB(...args))
1176
+ const variantKeys = uniq(recipeA.variantKeys, recipeB.variantKeys)
1177
+ const variantMap = variantKeys.reduce((acc, key) => {
1178
+ acc[key] = uniq(recipeA.variantMap[key], recipeB.variantMap[key])
1179
+ return acc
1180
+ }, {})
1181
+
1182
+ return Object.assign(recipeFn, {
1183
+ __recipe__: true,
1184
+ __name__: \`$\{recipeA.__name__} \${recipeB.__name__}\`,
1185
+ raw: (props) => props,
1186
+ variantKeys,
1187
+ variantMap,
1188
+ splitVariantProps(props) {
1189
+ return splitProps(props, variantKeys)
1190
+ },
1191
+ })
1192
+ }
1193
+ }
1114
1194
  `
1115
1195
  };
1116
1196
  return [
@@ -1118,9 +1198,9 @@ function generateRecipes(ctx) {
1118
1198
  ...ctx.recipes.details.map((recipe) => {
1119
1199
  const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
1120
1200
  const { description, defaultVariants, compoundVariants } = config;
1121
- const jsCode = (0, import_ts_pattern3.match)(config).when(
1201
+ const jsCode = (0, import_ts_pattern4.match)(config).when(
1122
1202
  import_core4.isSlotRecipe,
1123
- (config2) => import_outdent11.outdent`
1203
+ (config2) => import_outdent12.outdent`
1124
1204
  ${ctx.file.import("splitProps, getSlotCompoundVariant", "../helpers")}
1125
1205
  ${ctx.file.import("createRecipe", "./create-recipe")}
1126
1206
 
@@ -1148,9 +1228,9 @@ function generateRecipes(ctx) {
1148
1228
  })
1149
1229
  `
1150
1230
  ).otherwise(
1151
- (config2) => import_outdent11.outdent`
1231
+ (config2) => import_outdent12.outdent`
1152
1232
  ${ctx.file.import("splitProps", "../helpers")}
1153
- ${ctx.file.import("createRecipe", "./create-recipe")}
1233
+ ${ctx.file.import("createRecipe, mergeRecipes", "./create-recipe")}
1154
1234
 
1155
1235
  const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config2.className}', ${stringify2(
1156
1236
  defaultVariants ?? {}
@@ -1166,6 +1246,9 @@ function generateRecipes(ctx) {
1166
1246
  raw: (props) => props,
1167
1247
  variantKeys: ${baseName}VariantKeys,
1168
1248
  variantMap: ${baseName}VariantMap,
1249
+ merge(recipe) {
1250
+ return mergeRecipes(this, recipe)
1251
+ },
1169
1252
  splitVariantProps(props) {
1170
1253
  return splitProps(props, ${baseName}VariantKeys)
1171
1254
  },
@@ -1175,10 +1258,9 @@ function generateRecipes(ctx) {
1175
1258
  return {
1176
1259
  name: dashName,
1177
1260
  js: jsCode,
1178
- dts: import_outdent11.outdent`
1261
+ dts: import_outdent12.outdent`
1179
1262
  ${ctx.file.importType("ConditionalValue", "../types/index")}
1180
- ${ctx.file.importType("Pretty", "../types/helpers")}
1181
- ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
1263
+ ${ctx.file.importType("DistributiveOmit, Pretty", "../types/system-types")}
1182
1264
 
1183
1265
  interface ${upperName}Variant {
1184
1266
  ${Object.keys(variantKeyMap).map((key) => {
@@ -1215,10 +1297,10 @@ function generateRecipes(ctx) {
1215
1297
  }
1216
1298
 
1217
1299
  // src/artifacts/js/sva.ts
1218
- var import_outdent12 = require("outdent");
1300
+ var import_outdent13 = require("outdent");
1219
1301
  function generateSvaFn(ctx) {
1220
1302
  return {
1221
- js: import_outdent12.outdent`
1303
+ js: import_outdent13.outdent`
1222
1304
  ${ctx.file.import("getSlotRecipes, splitProps", "../helpers")}
1223
1305
  ${ctx.file.import("cva", "./cva")}
1224
1306
 
@@ -1255,7 +1337,7 @@ function generateSvaFn(ctx) {
1255
1337
  })
1256
1338
  }
1257
1339
  `,
1258
- dts: import_outdent12.outdent`
1340
+ dts: import_outdent13.outdent`
1259
1341
  ${ctx.file.importType("SlotRecipeCreatorFn", "../types/recipe")}
1260
1342
 
1261
1343
  export declare const sva: SlotRecipeCreatorFn
@@ -1264,7 +1346,7 @@ function generateSvaFn(ctx) {
1264
1346
  }
1265
1347
 
1266
1348
  // src/artifacts/js/token.ts
1267
- var import_outdent13 = __toESM(require("outdent"));
1349
+ var import_outdent14 = __toESM(require("outdent"));
1268
1350
  function generateTokenJs(ctx) {
1269
1351
  const { tokens } = ctx;
1270
1352
  const map = /* @__PURE__ */ new Map();
@@ -1275,7 +1357,7 @@ function generateTokenJs(ctx) {
1275
1357
  });
1276
1358
  const obj = Object.fromEntries(map);
1277
1359
  return {
1278
- js: import_outdent13.default`
1360
+ js: import_outdent14.default`
1279
1361
  const tokens = ${JSON.stringify(obj, null, 2)}
1280
1362
 
1281
1363
  export function token(path, fallback) {
@@ -1288,7 +1370,7 @@ function generateTokenJs(ctx) {
1288
1370
 
1289
1371
  token.var = tokenVar
1290
1372
  `,
1291
- dts: import_outdent13.default`
1373
+ dts: import_outdent14.default`
1292
1374
  ${ctx.file.importType("Token", "./tokens")}
1293
1375
 
1294
1376
  export declare const token: {
@@ -1302,19 +1384,21 @@ function generateTokenJs(ctx) {
1302
1384
  }
1303
1385
 
1304
1386
  // src/artifacts/preact-jsx/jsx.ts
1305
- var import_outdent14 = require("outdent");
1387
+ var import_outdent15 = require("outdent");
1306
1388
  function generatePreactJsxFactory(ctx) {
1307
1389
  const { factoryName, componentName } = ctx.jsx;
1308
1390
  return {
1309
- js: import_outdent14.outdent`
1391
+ js: import_outdent15.outdent`
1310
1392
  import { h } from 'preact'
1311
1393
  import { forwardRef } from 'preact/compat'
1312
1394
  import { useMemo } from 'preact/hooks'
1395
+ ${ctx.file.import(
1396
+ "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
1397
+ "./factory-helper"
1398
+ )}
1399
+ ${ctx.file.import("isCssProperty", "./is-valid-prop")}
1313
1400
  ${ctx.file.import("css, cx, cva", "../css/index")}
1314
1401
  ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
1315
- ${ctx.file.import("isCssProperty", "./is-valid-prop")}
1316
-
1317
- const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
1318
1402
 
1319
1403
  function styledFn(Dynamic, configOrCva = {}, options = {}) {
1320
1404
  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
@@ -1328,23 +1412,26 @@ function generatePreactJsxFactory(ctx) {
1328
1412
  )
1329
1413
 
1330
1414
  const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
1331
- const { as: Element = Dynamic, children, ...restProps } = props
1415
+ const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
1416
+
1417
+ const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
1418
+ const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
1332
1419
 
1333
1420
  const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
1334
1421
 
1335
1422
  const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
1336
- return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
1423
+ return splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
1337
1424
  }, [combinedProps])
1338
1425
 
1339
1426
  function recipeClass() {
1340
1427
  const { css: cssStyles, ...propStyles } = styleProps
1341
- const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
1342
- return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
1428
+ const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
1429
+ return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
1343
1430
  }
1344
1431
 
1345
1432
  function cvaClass() {
1346
1433
  const { css: cssStyles, ...propStyles } = styleProps
1347
- const cvaStyles = cvaFn.raw(variantProps)
1434
+ const cvaStyles = __cvaFn__.raw(variantProps)
1348
1435
  return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
1349
1436
  }
1350
1437
 
@@ -1360,8 +1447,13 @@ function generatePreactJsxFactory(ctx) {
1360
1447
  })
1361
1448
  })
1362
1449
 
1363
- const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
1450
+ const name = getDisplayName(Dynamic)
1451
+
1364
1452
  ${componentName}.displayName = \`${factoryName}.\${name}\`
1453
+ ${componentName}.__cva__ = cvaFn
1454
+ ${componentName}.__base__ = Dynamic
1455
+ ${componentName}.__shouldForwardProps__ = shouldForwardProp
1456
+
1365
1457
  return ${componentName}
1366
1458
  }
1367
1459
 
@@ -1387,8 +1479,8 @@ function generatePreactJsxFactory(ctx) {
1387
1479
  }
1388
1480
 
1389
1481
  // src/artifacts/preact-jsx/pattern.ts
1390
- var import_outdent15 = require("outdent");
1391
- var import_ts_pattern4 = require("ts-pattern");
1482
+ var import_outdent16 = require("outdent");
1483
+ var import_ts_pattern5 = require("ts-pattern");
1392
1484
  function generatePreactJsxPattern(ctx) {
1393
1485
  const { typeName, factoryName } = ctx.jsx;
1394
1486
  return ctx.patterns.details.map((pattern) => {
@@ -1396,21 +1488,21 @@ function generatePreactJsxPattern(ctx) {
1396
1488
  const { description, jsxElement = "div" } = pattern.config;
1397
1489
  return {
1398
1490
  name: dashName,
1399
- js: import_outdent15.outdent`
1491
+ js: import_outdent16.outdent`
1400
1492
  import { h } from 'preact'
1401
1493
  import { forwardRef } from 'preact/compat'
1402
1494
  ${ctx.file.import(factoryName, "./factory")}
1403
1495
  ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
1404
1496
 
1405
1497
  export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
1406
- ${(0, import_ts_pattern4.match)(props.length).with(
1498
+ ${(0, import_ts_pattern5.match)(props.length).with(
1407
1499
  0,
1408
- () => import_outdent15.outdent`
1500
+ () => import_outdent16.outdent`
1409
1501
  const styleProps = ${styleFnName}()
1410
1502
  return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
1411
1503
  `
1412
1504
  ).otherwise(
1413
- () => import_outdent15.outdent`
1505
+ () => import_outdent16.outdent`
1414
1506
  const { ${props.join(", ")}, ...restProps } = props
1415
1507
  const styleProps = ${styleFnName}({${props.join(", ")}})
1416
1508
  return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1418,7 +1510,7 @@ function generatePreactJsxPattern(ctx) {
1418
1510
  )}
1419
1511
  })
1420
1512
  `,
1421
- dts: import_outdent15.outdent`
1513
+ dts: import_outdent16.outdent`
1422
1514
  import type { FunctionComponent } from 'preact'
1423
1515
  ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
1424
1516
  ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
@@ -1434,48 +1526,61 @@ function generatePreactJsxPattern(ctx) {
1434
1526
  }
1435
1527
 
1436
1528
  // src/artifacts/preact-jsx/types.ts
1437
- var import_outdent16 = require("outdent");
1529
+ var import_outdent17 = require("outdent");
1438
1530
  function generatePreactJsxTypes(ctx) {
1439
1531
  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
1440
1532
  return {
1441
- jsxFactory: import_outdent16.outdent`
1533
+ jsxFactory: import_outdent17.outdent`
1442
1534
  import type { ${upperName} } from '../types/jsx'
1443
1535
  export declare const ${factoryName}: ${upperName}
1444
1536
  `,
1445
- jsxType: import_outdent16.outdent`
1537
+ jsxType: import_outdent17.outdent`
1446
1538
  import type { ComponentProps, JSX } from 'preact'
1447
- ${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
1448
1539
  ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
1540
+ ${ctx.file.importType(
1541
+ "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
1542
+ "./system-types"
1543
+ )}
1449
1544
 
1450
- type ElementType = keyof JSX.IntrinsicElements
1545
+ export type ElementType = JSX.ElementType
1451
1546
 
1452
- type Dict = Record<string, unknown>
1547
+ interface Dict {
1548
+ [k: string]: unknown
1549
+ }
1453
1550
 
1454
1551
  export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
1455
1552
  (props: JsxHTMLProps<ComponentProps<T>, P> & JsxStyleProps): JSX.Element
1456
1553
  displayName?: string
1457
1554
  }
1458
1555
 
1459
- interface RecipeFn { __type: any }
1556
+ interface RecipeFn {
1557
+ __type: any
1558
+ }
1460
1559
 
1461
- interface JsxFactoryOptions<TProps extends Dict> {
1560
+ export interface JsxFactoryOptions<TProps extends Dict> {
1462
1561
  dataAttr?: boolean
1463
1562
  defaultProps?: TProps
1464
1563
  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
1465
1564
  }
1466
1565
 
1467
- export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
1566
+ export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>
1567
+
1568
+ export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
1569
+ ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
1570
+ : ${componentName}<T, P>
1468
1571
 
1469
- interface JsxFactory {
1572
+ export interface JsxFactory {
1470
1573
  <T extends ElementType>(component: T): ${componentName}<T, {}>
1471
- <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
1574
+ <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
1472
1575
  T,
1473
1576
  RecipeSelection<P>
1474
1577
  >
1475
- <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
1578
+ <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
1476
1579
  }
1477
1580
 
1478
- type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
1581
+ export type JsxElements = {
1582
+ [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
1583
+ }
1479
1584
 
1480
1585
  export type ${upperName} = JsxFactory & JsxElements
1481
1586
 
@@ -1487,21 +1592,26 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
1487
1592
  }
1488
1593
 
1489
1594
  // src/artifacts/preact-jsx/jsx.string-literal.ts
1490
- var import_outdent17 = require("outdent");
1595
+ var import_outdent18 = require("outdent");
1491
1596
  function generatePreactJsxStringLiteralFactory(ctx) {
1492
1597
  const { factoryName, componentName } = ctx.jsx;
1493
1598
  return {
1494
- js: import_outdent17.outdent`
1599
+ js: import_outdent18.outdent`
1495
1600
  import { h } from 'preact'
1496
1601
  import { forwardRef } from 'preact/compat'
1602
+ ${ctx.file.import("getDisplayName", "./factory-helper")}
1497
1603
  ${ctx.file.import("css, cx", "../css/index")}
1498
1604
 
1499
1605
  function createStyledFn(Dynamic) {
1500
1606
  return function styledFn(template) {
1501
- const baseClassName = css(template)
1607
+ const styles = css.raw(template)
1608
+
1502
1609
  const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
1503
- const { as: Element = Dynamic, ...elementProps } = props
1504
- const classes = () => cx(baseClassName, elementProps.className)
1610
+ const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
1611
+
1612
+ function classes() {
1613
+ return cx(css(Dynamic.__styles__, styles), elementProps.className)
1614
+ }
1505
1615
 
1506
1616
  return h(Element, {
1507
1617
  ref,
@@ -1510,8 +1620,12 @@ function generatePreactJsxStringLiteralFactory(ctx) {
1510
1620
  })
1511
1621
  })
1512
1622
 
1513
- const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
1623
+ const name = getDisplayName(Dynamic)
1624
+
1514
1625
  ${componentName}.displayName = \`${factoryName}.\${name}\`
1626
+ ${componentName}.__styles__ = styles
1627
+ ${componentName}.__base__ = Dynamic
1628
+
1515
1629
  return ${componentName}
1516
1630
  }
1517
1631
  }
@@ -1538,31 +1652,35 @@ function generatePreactJsxStringLiteralFactory(ctx) {
1538
1652
  }
1539
1653
 
1540
1654
  // src/artifacts/preact-jsx/types.string-literal.ts
1541
- var import_outdent18 = require("outdent");
1655
+ var import_outdent19 = require("outdent");
1542
1656
  function generatePreactJsxStringLiteralTypes(ctx) {
1543
1657
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
1544
1658
  return {
1545
- jsxFactory: import_outdent18.outdent`
1659
+ jsxFactory: import_outdent19.outdent`
1546
1660
  ${ctx.file.importType(upperName, "../types/jsx")}
1547
1661
  export declare const ${factoryName}: ${upperName}
1548
1662
  `,
1549
- jsxType: import_outdent18.outdent`
1663
+ jsxType: import_outdent19.outdent`
1550
1664
  import type { ComponentProps, JSX } from 'preact'
1551
1665
 
1552
- type ElementType = keyof JSX.IntrinsicElements
1666
+ export type ElementType = JSX.ElementType
1553
1667
 
1554
- type Dict = Record<string, unknown>
1668
+ interface Dict {
1669
+ [k: string]: unknown
1670
+ }
1555
1671
 
1556
1672
  export type ${componentName}<T extends ElementType> = {
1557
1673
  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
1558
1674
  displayName?: string
1559
1675
  }
1560
1676
 
1561
- interface JsxFactory {
1677
+ export interface JsxFactory {
1562
1678
  <T extends ElementType>(component: T): ${componentName}<T>
1563
1679
  }
1564
1680
 
1565
- type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
1681
+ export type JsxElements = {
1682
+ [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
1683
+ }
1566
1684
 
1567
1685
  export type ${upperName} = JsxFactory & JsxElements
1568
1686
 
@@ -1572,18 +1690,20 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
1572
1690
  }
1573
1691
 
1574
1692
  // src/artifacts/qwik-jsx/jsx.ts
1575
- var import_outdent19 = require("outdent");
1693
+ var import_outdent20 = require("outdent");
1576
1694
  function generateQwikJsxFactory(ctx) {
1577
1695
  const { factoryName, componentName } = ctx.jsx;
1578
1696
  return {
1579
- js: import_outdent19.outdent`
1697
+ js: import_outdent20.outdent`
1580
1698
  import { h } from '@builder.io/qwik'
1699
+ ${ctx.file.import(
1700
+ "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
1701
+ "./factory-helper"
1702
+ )}
1703
+ ${ctx.file.import("isCssProperty", "./is-valid-prop")}
1581
1704
  ${ctx.file.import("css, cx, cva", "../css/index")}
1582
1705
  ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
1583
- ${ctx.file.import("isCssProperty", "./is-valid-prop")}
1584
1706
 
1585
- const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
1586
-
1587
1707
  function styledFn(Dynamic, configOrCva = {}, options = {}) {
1588
1708
  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
1589
1709
 
@@ -1596,22 +1716,25 @@ function generateQwikJsxFactory(ctx) {
1596
1716
  )
1597
1717
 
1598
1718
  const ${componentName} = function ${componentName}(props) {
1599
- const { as: Element = Dynamic, children, className, ...restProps } = props
1719
+ const { as: Element = Dynamic.__base__ || Dynamic, children, className, ...restProps } = props
1720
+
1721
+ const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
1722
+ const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
1600
1723
 
1601
1724
  const combinedProps = Object.assign({}, defaultProps, restProps)
1602
1725
 
1603
1726
  const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] =
1604
- splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
1605
-
1606
- const { css: cssStyles, ...propStyles } = styleProps
1727
+ splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
1607
1728
 
1608
1729
  function recipeClass() {
1609
- const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
1610
- return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
1730
+ const { css: cssStyles, ...propStyles } = styleProps
1731
+ const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
1732
+ return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
1611
1733
  }
1612
-
1734
+
1613
1735
  function cvaClass() {
1614
- const cvaStyles = cvaFn.raw(variantProps)
1736
+ const { css: cssStyles, ...propStyles } = styleProps
1737
+ const cvaStyles = __cvaFn__.raw(variantProps)
1615
1738
  return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, className)
1616
1739
  }
1617
1740
 
@@ -1626,8 +1749,13 @@ function generateQwikJsxFactory(ctx) {
1626
1749
  })
1627
1750
  }
1628
1751
 
1629
- const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
1752
+ const name = getDisplayName(Dynamic)
1753
+
1630
1754
  ${componentName}.displayName = \`${factoryName}.\${name}\`
1755
+ ${componentName}.__cva__ = cvaFn
1756
+ ${componentName}.__base__ = Dynamic
1757
+ ${componentName}.__shouldForwardProps__ = shouldForwardProp
1758
+
1631
1759
  return ${componentName}
1632
1760
  }
1633
1761
 
@@ -1654,8 +1782,8 @@ function generateQwikJsxFactory(ctx) {
1654
1782
  }
1655
1783
 
1656
1784
  // src/artifacts/qwik-jsx/pattern.ts
1657
- var import_outdent20 = require("outdent");
1658
- var import_ts_pattern5 = require("ts-pattern");
1785
+ var import_outdent21 = require("outdent");
1786
+ var import_ts_pattern6 = require("ts-pattern");
1659
1787
  function generateQwikJsxPattern(ctx) {
1660
1788
  const { typeName, factoryName } = ctx.jsx;
1661
1789
  return ctx.patterns.details.map((pattern) => {
@@ -1663,20 +1791,20 @@ function generateQwikJsxPattern(ctx) {
1663
1791
  const { description, jsxElement = "div" } = pattern.config;
1664
1792
  return {
1665
1793
  name: dashName,
1666
- js: import_outdent20.outdent`
1794
+ js: import_outdent21.outdent`
1667
1795
  import { h } from '@builder.io/qwik'
1668
1796
  ${ctx.file.import(factoryName, "./factory")}
1669
1797
  ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
1670
1798
 
1671
1799
  export const ${jsxName} = function ${jsxName}(props) {
1672
- ${(0, import_ts_pattern5.match)(props.length).with(
1800
+ ${(0, import_ts_pattern6.match)(props.length).with(
1673
1801
  0,
1674
- () => import_outdent20.outdent`
1802
+ () => import_outdent21.outdent`
1675
1803
  const styleProps = ${styleFnName}()
1676
1804
  return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
1677
1805
  `
1678
1806
  ).otherwise(
1679
- () => import_outdent20.outdent`
1807
+ () => import_outdent21.outdent`
1680
1808
  const { ${props.join(", ")}, ...restProps } = props
1681
1809
  const styleProps = ${styleFnName}({${props.join(", ")}})
1682
1810
  return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
@@ -1684,7 +1812,7 @@ function generateQwikJsxPattern(ctx) {
1684
1812
  )}
1685
1813
  }
1686
1814
  `,
1687
- dts: import_outdent20.outdent`
1815
+ dts: import_outdent21.outdent`
1688
1816
  import type { Component } from '@builder.io/qwik'
1689
1817
  ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
1690
1818
  ${ctx.file.importType(typeName, "../types/jsx")}
@@ -1700,20 +1828,23 @@ function generateQwikJsxPattern(ctx) {
1700
1828
  }
1701
1829
 
1702
1830
  // src/artifacts/qwik-jsx/types.ts
1703
- var import_outdent21 = require("outdent");
1831
+ var import_outdent22 = require("outdent");
1704
1832
  function generateQwikJsxTypes(ctx) {
1705
1833
  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
1706
1834
  return {
1707
- jsxFactory: import_outdent21.outdent`
1835
+ jsxFactory: import_outdent22.outdent`
1708
1836
  ${ctx.file.importType(upperName, "../types/jsx")}
1709
1837
  export declare const ${factoryName}: ${upperName}
1710
1838
  `,
1711
- jsxType: import_outdent21.outdent`
1839
+ jsxType: import_outdent22.outdent`
1712
1840
  import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
1713
- import type { Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
1714
- import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
1841
+ ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
1842
+ ${ctx.file.importType(
1843
+ "Assign, DistributiveOmit, DistributiveUnion, JsxStyleProps, PatchedHTMLProps, Pretty",
1844
+ "./system-types"
1845
+ )}
1715
1846
 
1716
- type ElementType = keyof QwikIntrinsicElements | Component<any>
1847
+ export type ElementType = keyof QwikIntrinsicElements | Component<any>
1717
1848
 
1718
1849
  export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
1719
1850
  ? QwikIntrinsicElements[T]
@@ -1721,13 +1852,17 @@ export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsi
1721
1852
  ? P
1722
1853
  : never
1723
1854
 
1724
- type Dict = Record<string, unknown>
1855
+ interface Dict {
1856
+ [k: string]: unknown
1857
+ }
1725
1858
 
1726
1859
  export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T>, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
1727
1860
 
1728
- interface RecipeFn { __type: any }
1861
+ interface RecipeFn {
1862
+ __type: any
1863
+ }
1729
1864
 
1730
- interface JsxFactoryOptions<TProps extends Dict> {
1865
+ export interface JsxFactoryOptions<TProps extends Dict> {
1731
1866
  dataAttr?: boolean
1732
1867
  defaultProps?: TProps
1733
1868
  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
@@ -1735,16 +1870,22 @@ interface JsxFactoryOptions<TProps extends Dict> {
1735
1870
 
1736
1871
  export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
1737
1872
 
1738
- interface JsxFactory {
1873
+ export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
1874
+ ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
1875
+ : ${componentName}<T, P>
1876
+
1877
+ export interface JsxFactory {
1739
1878
  <T extends ElementType>(component: T): ${componentName}<T, {}>
1740
- <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
1879
+ <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
1741
1880
  T,
1742
1881
  RecipeSelection<P>
1743
1882
  >
1744
- <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
1883
+ <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
1745
1884
  }
1746
1885
 
1747
- type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}> }
1886
+ export type JsxElements = {
1887
+ [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}>
1888
+ }
1748
1889
 
1749
1890
  export type ${upperName} = JsxFactory & JsxElements
1750
1891
 
@@ -1756,29 +1897,38 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
1756
1897
  }
1757
1898
 
1758
1899
  // src/artifacts/qwik-jsx/jsx.string-literal.ts
1759
- var import_outdent22 = require("outdent");
1900
+ var import_outdent23 = require("outdent");
1760
1901
  function generateQwikJsxStringLiteralFactory(ctx) {
1761
1902
  const { factoryName, componentName } = ctx.jsx;
1762
1903
  return {
1763
- js: import_outdent22.outdent`
1904
+ js: import_outdent23.outdent`
1764
1905
  import { h } from '@builder.io/qwik'
1906
+ ${ctx.file.import("getDisplayName", "./factory-helper")}
1765
1907
  ${ctx.file.import("css, cx", "../css/index")}
1766
1908
 
1767
1909
  function createStyledFn(Dynamic) {
1768
1910
  return function styledFn(template) {
1769
- const baseClassName = css(template)
1770
- const ${componentName} = function ${componentName}(props) {
1771
- const { as: Element = Dynamic, ...elementProps } = props
1772
- const classes = () => cx(baseClassName, elementProps.className)
1773
-
1774
- return h(Element, {
1775
- ...elementProps,
1776
- className: classes(),
1777
- })
1911
+ const styles = css.raw(template)
1912
+
1913
+ const ${componentName} = (props) => {
1914
+ const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
1915
+
1916
+ function classes() {
1917
+ return cx(css(Dynamic.__styles__, styles), elementProps.className)
1918
+ }
1919
+
1920
+ return h(Element, {
1921
+ ...elementProps,
1922
+ className: classes(),
1923
+ })
1778
1924
  }
1779
1925
 
1780
- const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
1926
+ const name = getDisplayName(Dynamic)
1927
+
1781
1928
  ${componentName}.displayName = \`${factoryName}.\${name}\`
1929
+ ${componentName}.__styles__ = styles
1930
+ ${componentName}.__base__ = Dynamic
1931
+
1782
1932
  return ${componentName}
1783
1933
  }
1784
1934
  }
@@ -1806,18 +1956,18 @@ function generateQwikJsxStringLiteralFactory(ctx) {
1806
1956
  }
1807
1957
 
1808
1958
  // src/artifacts/qwik-jsx/types.string-literal.ts
1809
- var import_outdent23 = require("outdent");
1959
+ var import_outdent24 = require("outdent");
1810
1960
  function generateQwikJsxStringLiteralTypes(ctx) {
1811
1961
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
1812
1962
  return {
1813
- jsxFactory: import_outdent23.outdent`
1963
+ jsxFactory: import_outdent24.outdent`
1814
1964
  ${ctx.file.importType(upperName, "../types/jsx")}
1815
1965
  export declare const ${factoryName}: ${upperName}
1816
1966
  `,
1817
- jsxType: import_outdent23.outdent`
1967
+ jsxType: import_outdent24.outdent`
1818
1968
  import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
1819
1969
 
1820
- type ElementType = keyof QwikIntrinsicElements | Component<any>
1970
+ export type ElementType = keyof QwikIntrinsicElements | Component<any>
1821
1971
 
1822
1972
  export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
1823
1973
  ? QwikIntrinsicElements[T]
@@ -1825,17 +1975,21 @@ export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsi
1825
1975
  ? P
1826
1976
  : never
1827
1977
 
1828
- type Dict = Record<string, unknown>
1978
+ interface Dict {
1979
+ [k: string]: unknown
1980
+ }
1829
1981
 
1830
1982
  export type ${componentName}<T extends ElementType> = {
1831
1983
  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
1832
1984
  }
1833
1985
 
1834
- interface JsxFactory {
1986
+ export interface JsxFactory {
1835
1987
  <T extends ElementType>(component: T): ${componentName}<T>
1836
1988
  }
1837
1989
 
1838
- type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K> }
1990
+ export type JsxElements = {
1991
+ [K in keyof QwikIntrinsicElements]: ${componentName}<K>
1992
+ }
1839
1993
 
1840
1994
  export type ${upperName} = JsxFactory & JsxElements
1841
1995
 
@@ -1845,18 +1999,20 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
1845
1999
  }
1846
2000
 
1847
2001
  // src/artifacts/react-jsx/jsx.ts
1848
- var import_outdent24 = require("outdent");
2002
+ var import_outdent25 = require("outdent");
1849
2003
  function generateReactJsxFactory(ctx) {
1850
2004
  const { factoryName, componentName } = ctx.jsx;
1851
2005
  return {
1852
- js: import_outdent24.outdent`
2006
+ js: import_outdent25.outdent`
1853
2007
  import { createElement, forwardRef, useMemo } from 'react'
1854
2008
  ${ctx.file.import("css, cx, cva", "../css/index")}
2009
+ ${ctx.file.import(
2010
+ "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
2011
+ "./factory-helper"
2012
+ )}
1855
2013
  ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
1856
2014
  ${ctx.file.import("isCssProperty", "./is-valid-prop")}
1857
2015
 
1858
- const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
1859
-
1860
2016
  function styledFn(Dynamic, configOrCva = {}, options = {}) {
1861
2017
  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
1862
2018
 
@@ -1869,23 +2025,26 @@ function generateReactJsxFactory(ctx) {
1869
2025
  )
1870
2026
 
1871
2027
  const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
1872
- const { as: Element = Dynamic, children, ...restProps } = props
2028
+ const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
2029
+
2030
+ const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
2031
+ const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
1873
2032
 
1874
2033
  const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
1875
2034
 
1876
2035
  const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
1877
- return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
2036
+ return splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
1878
2037
  }, [combinedProps])
1879
2038
 
1880
2039
  function recipeClass() {
1881
2040
  const { css: cssStyles, ...propStyles } = styleProps
1882
- const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
1883
- return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
2041
+ const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
2042
+ return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
1884
2043
  }
1885
2044
 
1886
2045
  function cvaClass() {
1887
2046
  const { css: cssStyles, ...propStyles } = styleProps
1888
- const cvaStyles = cvaFn.raw(variantProps)
2047
+ const cvaStyles = __cvaFn__.raw(variantProps)
1889
2048
  return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
1890
2049
  }
1891
2050
 
@@ -1901,8 +2060,13 @@ function generateReactJsxFactory(ctx) {
1901
2060
  })
1902
2061
  })
1903
2062
 
1904
- const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
2063
+ const name = getDisplayName(Dynamic)
2064
+
1905
2065
  ${componentName}.displayName = \`${factoryName}.\${name}\`
2066
+ ${componentName}.__cva__ = cvaFn
2067
+ ${componentName}.__base__ = Dynamic
2068
+ ${componentName}.__shouldForwardProps__ = shouldForwardProp
2069
+
1906
2070
  return ${componentName}
1907
2071
  }
1908
2072
 
@@ -1929,8 +2093,8 @@ function generateReactJsxFactory(ctx) {
1929
2093
  }
1930
2094
 
1931
2095
  // src/artifacts/react-jsx/pattern.ts
1932
- var import_outdent25 = require("outdent");
1933
- var import_ts_pattern6 = require("ts-pattern");
2096
+ var import_outdent26 = require("outdent");
2097
+ var import_ts_pattern7 = require("ts-pattern");
1934
2098
  function generateReactJsxPattern(ctx) {
1935
2099
  const { typeName, factoryName } = ctx.jsx;
1936
2100
  return ctx.patterns.details.map((pattern) => {
@@ -1938,20 +2102,20 @@ function generateReactJsxPattern(ctx) {
1938
2102
  const { description, jsxElement = "div" } = pattern.config;
1939
2103
  return {
1940
2104
  name: dashName,
1941
- js: import_outdent25.outdent`
2105
+ js: import_outdent26.outdent`
1942
2106
  import { createElement, forwardRef } from 'react'
1943
2107
  ${ctx.file.import(factoryName, "./factory")}
1944
2108
  ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
1945
2109
 
1946
2110
  export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
1947
- ${(0, import_ts_pattern6.match)(props.length).with(
2111
+ ${(0, import_ts_pattern7.match)(props.length).with(
1948
2112
  0,
1949
- () => import_outdent25.outdent`
2113
+ () => import_outdent26.outdent`
1950
2114
  const styleProps = ${styleFnName}()
1951
2115
  return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
1952
2116
  `
1953
2117
  ).otherwise(
1954
- () => import_outdent25.outdent`
2118
+ () => import_outdent26.outdent`
1955
2119
  const { ${props.join(", ")}, ...restProps } = props
1956
2120
  const styleProps = ${styleFnName}({${props.join(", ")}})
1957
2121
  return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1959,7 +2123,7 @@ function generateReactJsxPattern(ctx) {
1959
2123
  )}
1960
2124
  })
1961
2125
  `,
1962
- dts: import_outdent25.outdent`
2126
+ dts: import_outdent26.outdent`
1963
2127
  import type { FunctionComponent } from 'react'
1964
2128
  ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
1965
2129
  ${ctx.file.importType(typeName, "../types/jsx")}
@@ -1975,20 +2139,25 @@ function generateReactJsxPattern(ctx) {
1975
2139
  }
1976
2140
 
1977
2141
  // src/artifacts/react-jsx/types.ts
1978
- var import_outdent26 = require("outdent");
2142
+ var import_outdent27 = require("outdent");
1979
2143
  function generateReactJsxTypes(ctx) {
1980
2144
  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
1981
2145
  return {
1982
- jsxFactory: import_outdent26.outdent`
2146
+ jsxFactory: import_outdent27.outdent`
1983
2147
  ${ctx.file.importType(upperName, "../types/jsx")}
1984
2148
  export declare const ${factoryName}: ${upperName}
1985
2149
  `,
1986
- jsxType: import_outdent26.outdent`
2150
+ jsxType: import_outdent27.outdent`
1987
2151
  import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
1988
- ${ctx.file.importType("Assign, DistributiveOmit, JsxHTMLProps, JsxStyleProps", "./system-types")}
1989
2152
  ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
2153
+ ${ctx.file.importType(
2154
+ "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
2155
+ "./system-types"
2156
+ )}
1990
2157
 
1991
- type Dict = Record<string, unknown>
2158
+ interface Dict {
2159
+ [k: string]: unknown
2160
+ }
1992
2161
 
1993
2162
  export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
1994
2163
  ref?: Ref<ElementRef<T>>
@@ -1999,7 +2168,9 @@ export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
1999
2168
  displayName?: string
2000
2169
  }
2001
2170
 
2002
- interface RecipeFn { __type: any }
2171
+ interface RecipeFn {
2172
+ __type: any
2173
+ }
2003
2174
 
2004
2175
  interface JsxFactoryOptions<TProps extends Dict> {
2005
2176
  dataAttr?: boolean
@@ -2009,16 +2180,22 @@ interface JsxFactoryOptions<TProps extends Dict> {
2009
2180
 
2010
2181
  export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
2011
2182
 
2012
- interface JsxFactory {
2183
+ export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
2184
+ ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
2185
+ : ${componentName}<T, P>
2186
+
2187
+ export interface JsxFactory {
2013
2188
  <T extends ElementType>(component: T): ${componentName}<T, {}>
2014
- <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
2189
+ <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
2015
2190
  T,
2016
2191
  RecipeSelection<P>
2017
2192
  >
2018
- <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
2193
+ <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
2019
2194
  }
2020
2195
 
2021
- type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
2196
+ export type JsxElements = {
2197
+ [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
2198
+ }
2022
2199
 
2023
2200
  export type ${upperName} = JsxFactory & JsxElements
2024
2201
 
@@ -2030,30 +2207,39 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
2030
2207
  }
2031
2208
 
2032
2209
  // src/artifacts/react-jsx/jsx.string-literal.ts
2033
- var import_outdent27 = require("outdent");
2210
+ var import_outdent28 = require("outdent");
2034
2211
  function generateReactJsxStringLiteralFactory(ctx) {
2035
2212
  const { factoryName, componentName } = ctx.jsx;
2036
2213
  return {
2037
- js: import_outdent27.outdent`
2214
+ js: import_outdent28.outdent`
2038
2215
  import { createElement, forwardRef } from 'react'
2216
+ ${ctx.file.import("getDisplayName", "./factory-helper")}
2039
2217
  ${ctx.file.import("css, cx", "../css/index")}
2040
2218
 
2041
2219
  function createStyledFn(Dynamic) {
2042
2220
  return function styledFn(template) {
2043
- const baseClassName = css(template)
2221
+ const styles = css.raw(template)
2222
+
2044
2223
  const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
2045
- const { as: Element = Dynamic, ...elementProps } = props
2046
- const classes = () => cx(baseClassName, elementProps.className)
2224
+ const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
2225
+
2226
+ function classes() {
2227
+ return cx(css(Dynamic.__styles__, styles), elementProps.className)
2228
+ }
2047
2229
 
2048
- return createElement(Element, {
2049
- ref,
2050
- ...elementProps,
2051
- className: classes(),
2052
- })
2230
+ return createElement(Element, {
2231
+ ref,
2232
+ ...elementProps,
2233
+ className: classes(),
2234
+ })
2053
2235
  })
2054
2236
 
2055
- const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
2237
+ const name = getDisplayName(Dynamic)
2238
+
2056
2239
  ${componentName}.displayName = \`${factoryName}.\${name}\`
2240
+ ${componentName}.__styles__ = styles
2241
+ ${componentName}.__base__ = Dynamic
2242
+
2057
2243
  return ${componentName}
2058
2244
  }
2059
2245
  }
@@ -2081,19 +2267,21 @@ function generateReactJsxStringLiteralFactory(ctx) {
2081
2267
  }
2082
2268
 
2083
2269
  // src/artifacts/react-jsx/types.string-literal.ts
2084
- var import_outdent28 = require("outdent");
2270
+ var import_outdent29 = require("outdent");
2085
2271
  function generateReactJsxStringLiteralTypes(ctx) {
2086
2272
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
2087
2273
  return {
2088
- jsxFactory: import_outdent28.outdent`
2274
+ jsxFactory: import_outdent29.outdent`
2089
2275
  ${ctx.file.importType(upperName, "../types/jsx")}
2090
2276
  export declare const ${factoryName}: ${upperName}
2091
2277
  `,
2092
- jsxType: import_outdent28.outdent`
2278
+ jsxType: import_outdent29.outdent`
2093
2279
  import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
2094
2280
  ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
2095
2281
 
2096
- type Dict = Record<string, unknown>
2282
+ interface Dict {
2283
+ [k: string]: unknown
2284
+ }
2097
2285
 
2098
2286
  export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
2099
2287
  ref?: Ref<ElementRef<T>>
@@ -2104,11 +2292,13 @@ export type ${componentName}<T extends ElementType> = {
2104
2292
  displayName?: string
2105
2293
  }
2106
2294
 
2107
- interface JsxFactory {
2295
+ export interface JsxFactory {
2108
2296
  <T extends ElementType>(component: T): ${componentName}<T>
2109
2297
  }
2110
2298
 
2111
- type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
2299
+ export type JsxElements = {
2300
+ [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
2301
+ }
2112
2302
 
2113
2303
  export type ${upperName} = JsxFactory & JsxElements
2114
2304
 
@@ -2118,19 +2308,21 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
2118
2308
  }
2119
2309
 
2120
2310
  // src/artifacts/solid-jsx/jsx.ts
2121
- var import_outdent29 = require("outdent");
2311
+ var import_outdent30 = require("outdent");
2122
2312
  function generateSolidJsxFactory(ctx) {
2123
2313
  const { componentName, factoryName } = ctx.jsx;
2124
2314
  return {
2125
- js: import_outdent29.outdent`
2315
+ js: import_outdent30.outdent`
2126
2316
  import { Dynamic } from 'solid-js/web'
2127
2317
  import { createMemo, mergeProps, splitProps } from 'solid-js'
2128
2318
  import { createComponent } from 'solid-js/web'
2319
+ ${ctx.file.import(
2320
+ "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
2321
+ "./factory-helper"
2322
+ )}
2323
+ ${ctx.file.import("isCssProperty, allCssProperties", "./is-valid-prop")}
2129
2324
  ${ctx.file.import("css, cx, cva", "../css/index")}
2130
2325
  ${ctx.file.import("normalizeHTMLProps", "../helpers")}
2131
- ${ctx.file.import("isCssProperty, allCssProperties", "./is-valid-prop")}
2132
-
2133
- const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
2134
2326
 
2135
2327
  function styledFn(element, configOrCva = {}, options = {}) {
2136
2328
  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
@@ -2143,28 +2335,32 @@ function generateSolidJsxFactory(ctx) {
2143
2335
  options.defaultProps,
2144
2336
  )
2145
2337
 
2146
- return function ${componentName}(props) {
2147
- const mergedProps = mergeProps({ as: element }, defaultProps, props)
2338
+ const ${componentName} = (props) => {
2339
+ const mergedProps = mergeProps({ as: element.__base__ || element }, defaultProps, props)
2340
+
2341
+ const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
2342
+ const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
2343
+
2148
2344
  const forwardedKeys = createMemo(() => Object.keys(props).filter(shouldForwardProp))
2149
2345
 
2150
2346
  const [localProps, forwardedProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
2151
2347
  mergedProps,
2152
2348
  ['as', 'class', 'className'],
2153
2349
  forwardedKeys(),
2154
- cvaFn.variantKeys,
2350
+ __cvaFn__.variantKeys,
2155
2351
  allCssProperties,
2156
2352
  normalizeHTMLProps.keys
2157
2353
  )
2158
2354
 
2159
2355
  function recipeClass() {
2160
2356
  const { css: cssStyles, ...propStyles } = styleProps
2161
- const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
2162
- return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), localProps.class, localProps.className)
2357
+ const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
2358
+ return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), localProps.class, localProps.className)
2163
2359
  }
2164
2360
 
2165
2361
  function cvaClass() {
2166
2362
  const { css: cssStyles, ...propStyles } = styleProps
2167
- const cvaStyles = cvaFn.raw(variantProps)
2363
+ const cvaStyles = __cvaFn__.raw(variantProps)
2168
2364
  return cx(css(cvaStyles, propStyles, cssStyles), localProps.class, localProps.className)
2169
2365
  }
2170
2366
 
@@ -2191,6 +2387,15 @@ function generateSolidJsxFactory(ctx) {
2191
2387
  )
2192
2388
  )
2193
2389
  }
2390
+
2391
+ const name = getDisplayName(element)
2392
+
2393
+ ${componentName}.displayName = \`${factoryName}.\${name}\`
2394
+ ${componentName}.__cva__ = cvaFn
2395
+ ${componentName}.__base__ = element
2396
+ ${componentName}.__shouldForwardProps__ = shouldForwardProp
2397
+
2398
+ return ${componentName}
2194
2399
  }
2195
2400
 
2196
2401
  function createJsxFactory() {
@@ -2215,8 +2420,8 @@ function generateSolidJsxFactory(ctx) {
2215
2420
  }
2216
2421
 
2217
2422
  // src/artifacts/solid-jsx/pattern.ts
2218
- var import_outdent30 = require("outdent");
2219
- var import_ts_pattern7 = require("ts-pattern");
2423
+ var import_outdent31 = require("outdent");
2424
+ var import_ts_pattern8 = require("ts-pattern");
2220
2425
  function generateSolidJsxPattern(ctx) {
2221
2426
  const { typeName, factoryName } = ctx.jsx;
2222
2427
  return ctx.patterns.details.map((pattern) => {
@@ -2224,21 +2429,21 @@ function generateSolidJsxPattern(ctx) {
2224
2429
  const { description, jsxElement = "div" } = pattern.config;
2225
2430
  return {
2226
2431
  name: dashName,
2227
- js: import_outdent30.outdent`
2432
+ js: import_outdent31.outdent`
2228
2433
  import { splitProps, mergeProps } from 'solid-js'
2229
2434
  import { createComponent } from 'solid-js/web'
2230
2435
  ${ctx.file.import(factoryName, "./factory")}
2231
2436
  ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
2232
2437
 
2233
2438
  export function ${jsxName}(props) {
2234
- ${(0, import_ts_pattern7.match)(props.length).with(
2439
+ ${(0, import_ts_pattern8.match)(props.length).with(
2235
2440
  0,
2236
- () => import_outdent30.outdent`
2441
+ () => import_outdent31.outdent`
2237
2442
  const styleProps = ${styleFnName}()
2238
2443
  return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
2239
2444
  `
2240
2445
  ).otherwise(
2241
- () => import_outdent30.outdent`
2446
+ () => import_outdent31.outdent`
2242
2447
  const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
2243
2448
  const styleProps = ${styleFnName}(patternProps)
2244
2449
  return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -2246,7 +2451,7 @@ function generateSolidJsxPattern(ctx) {
2246
2451
  )}
2247
2452
  }
2248
2453
  `,
2249
- dts: import_outdent30.outdent`
2454
+ dts: import_outdent31.outdent`
2250
2455
  import type { Component } from 'solid-js'
2251
2456
  ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
2252
2457
  ${ctx.file.importType(typeName, "../types/jsx")}
@@ -2262,31 +2467,38 @@ function generateSolidJsxPattern(ctx) {
2262
2467
  }
2263
2468
 
2264
2469
  // src/artifacts/solid-jsx/types.ts
2265
- var import_outdent31 = require("outdent");
2470
+ var import_outdent32 = require("outdent");
2266
2471
  function generateSolidJsxTypes(ctx) {
2267
2472
  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
2268
2473
  return {
2269
- jsxFactory: import_outdent31.outdent`
2474
+ jsxFactory: import_outdent32.outdent`
2270
2475
  ${ctx.file.importType(upperName, "../types/jsx")}
2271
2476
  export declare const ${factoryName}: ${upperName}
2272
2477
  `,
2273
- jsxType: import_outdent31.outdent`
2478
+ jsxType: import_outdent32.outdent`
2274
2479
  import type { ComponentProps, Component, JSX } from 'solid-js'
2275
- ${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
2276
2480
  ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
2481
+ ${ctx.file.importType(
2482
+ "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
2483
+ "./system-types"
2484
+ )}
2277
2485
 
2278
- type Dict = Record<string, unknown>
2486
+ interface Dict {
2487
+ [k: string]: unknown
2488
+ }
2279
2489
 
2280
- type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
2490
+ export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
2281
2491
 
2282
2492
  export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
2283
2493
  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
2284
2494
  displayName?: string
2285
2495
  }
2286
2496
 
2287
- interface RecipeFn { __type: any }
2497
+ interface RecipeFn {
2498
+ __type: any
2499
+ }
2288
2500
 
2289
- interface JsxFactoryOptions<TProps extends Dict> {
2501
+ export interface JsxFactoryOptions<TProps extends Dict> {
2290
2502
  dataAttr?: boolean
2291
2503
  defaultProps?: TProps
2292
2504
  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
@@ -2294,16 +2506,22 @@ interface JsxFactoryOptions<TProps extends Dict> {
2294
2506
 
2295
2507
  export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
2296
2508
 
2297
- interface JsxFactory {
2509
+ export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
2510
+ ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
2511
+ : ${componentName}<T, P>
2512
+
2513
+ export interface JsxFactory {
2298
2514
  <T extends ElementType>(component: T): ${componentName}<T, {}>
2299
- <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
2515
+ <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
2300
2516
  T,
2301
2517
  RecipeSelection<P>
2302
2518
  >
2303
- <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
2519
+ <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
2304
2520
  }
2305
2521
 
2306
- type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
2522
+ export type JsxElements = {
2523
+ [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
2524
+ }
2307
2525
 
2308
2526
  export type ${upperName} = JsxFactory & JsxElements
2309
2527
 
@@ -2315,22 +2533,24 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
2315
2533
  }
2316
2534
 
2317
2535
  // src/artifacts/solid-jsx/jsx.string-literal.ts
2318
- var import_outdent32 = require("outdent");
2536
+ var import_outdent33 = require("outdent");
2319
2537
  function generateSolidJsxStringLiteralFactory(ctx) {
2320
2538
  const { componentName, factoryName } = ctx.jsx;
2321
2539
  return {
2322
- js: import_outdent32.outdent`
2540
+ js: import_outdent33.outdent`
2323
2541
  import { mergeProps, splitProps } from 'solid-js'
2324
2542
  import { Dynamic, createComponent } from 'solid-js/web'
2543
+ ${ctx.file.import("getDisplayName", "./factory-helper")}
2325
2544
  ${ctx.file.import("css, cx", "../css/index")}
2326
2545
 
2327
2546
  function createStyled(element) {
2328
2547
  return function styledFn(template) {
2329
- const baseClassName = css(template)
2330
- return function ${componentName}(props) {
2331
- const mergedProps = mergeProps({ as: element }, props)
2332
- const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
2548
+ const styles = css.raw(template)
2333
2549
 
2550
+ const ${componentName} = (props) => {
2551
+ const mergedProps = mergeProps({ as: element.__base__ || element }, props)
2552
+ const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
2553
+
2334
2554
  return createComponent(
2335
2555
  Dynamic,
2336
2556
  mergeProps(
@@ -2339,13 +2559,21 @@ function createStyled(element) {
2339
2559
  return localProps.as
2340
2560
  },
2341
2561
  get class() {
2342
- return cx(baseClassName, localProps.class)
2562
+ return cx(css(element.__styles__, styles), localProps.class)
2343
2563
  },
2344
2564
  },
2345
2565
  elementProps,
2346
2566
  ),
2347
2567
  )
2348
2568
  }
2569
+
2570
+ const name = getDisplayName(element)
2571
+
2572
+ ${componentName}.displayName = \`${factoryName}.\${name}\`
2573
+ ${componentName}.__styles__ = styles
2574
+ ${componentName}.__base__ = element
2575
+
2576
+ return ${componentName}
2349
2577
  }
2350
2578
  }
2351
2579
 
@@ -2371,31 +2599,35 @@ export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
2371
2599
  }
2372
2600
 
2373
2601
  // src/artifacts/solid-jsx/types.string-literal.ts
2374
- var import_outdent33 = require("outdent");
2602
+ var import_outdent34 = require("outdent");
2375
2603
  function generateSolidJsxStringLiteralTypes(ctx) {
2376
2604
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
2377
2605
  return {
2378
- jsxFactory: import_outdent33.outdent`
2606
+ jsxFactory: import_outdent34.outdent`
2379
2607
  ${ctx.file.importType(upperName, "../types/jsx")}
2380
2608
  export declare const ${factoryName}: ${upperName}
2381
2609
  `,
2382
- jsxType: import_outdent33.outdent`
2610
+ jsxType: import_outdent34.outdent`
2383
2611
  import type { Component, ComponentProps, JSX } from 'solid-js'
2384
2612
 
2385
- type Dict = Record<string, unknown>
2613
+ interface Dict {
2614
+ [k: string]: unknown
2615
+ }
2386
2616
 
2387
- type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
2617
+ export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
2388
2618
 
2389
2619
  export type ${componentName}<T extends ElementType> = {
2390
2620
  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
2391
2621
  displayName?: string
2392
2622
  }
2393
2623
 
2394
- interface JsxFactory {
2624
+ export interface JsxFactory {
2395
2625
  <T extends ElementType>(component: T): ${componentName}<T>
2396
2626
  }
2397
2627
 
2398
- type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
2628
+ export type JsxElements = {
2629
+ [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
2630
+ }
2399
2631
 
2400
2632
  export type ${upperName} = JsxFactory & JsxElements
2401
2633
 
@@ -2405,18 +2637,20 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
2405
2637
  }
2406
2638
 
2407
2639
  // src/artifacts/vue-jsx/jsx.ts
2408
- var import_outdent34 = require("outdent");
2640
+ var import_outdent35 = require("outdent");
2409
2641
  function generateVueJsxFactory(ctx) {
2410
- const { factoryName } = ctx.jsx;
2642
+ const { factoryName, componentName } = ctx.jsx;
2411
2643
  return {
2412
- js: import_outdent34.outdent`
2644
+ js: import_outdent35.outdent`
2413
2645
  import { defineComponent, h, computed } from 'vue'
2646
+ ${ctx.file.import(
2647
+ "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
2648
+ "./factory-helper"
2649
+ )}
2650
+ ${ctx.file.import("isCssProperty", "./is-valid-prop")}
2414
2651
  ${ctx.file.import("css, cx, cva", "../css/index")}
2415
2652
  ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
2416
- ${ctx.file.import("isCssProperty", "./is-valid-prop")}
2417
2653
 
2418
- const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
2419
-
2420
2654
  function styledFn(Dynamic, configOrCva = {}, options = {}) {
2421
2655
  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
2422
2656
 
@@ -2428,30 +2662,33 @@ function generateVueJsxFactory(ctx) {
2428
2662
  options.defaultProps,
2429
2663
  )
2430
2664
 
2431
- const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
2665
+ const name = getDisplayName(Dynamic)
2432
2666
 
2433
- return defineComponent({
2667
+ const ${componentName} = defineComponent({
2434
2668
  name: \`${factoryName}.\${name}\`,
2435
2669
  inheritAttrs: false,
2436
- props: { as: { type: [String, Object], default: Dynamic } },
2670
+ props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
2437
2671
  setup(props, { slots, attrs }) {
2672
+ const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
2673
+ const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
2674
+
2438
2675
  const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
2439
2676
 
2440
2677
  const splittedProps = computed(() => {
2441
- return splitProps(combinedProps.value, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
2678
+ return splitProps(combinedProps.value, shouldForwardProp, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
2442
2679
  })
2443
2680
 
2444
2681
  const recipeClass = computed(() => {
2445
2682
  const [_forwardedProps, variantProps, styleProps, _htmlProps, _elementProps] = splittedProps.value
2446
2683
  const { css: cssStyles, ...propStyles } = styleProps
2447
- const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
2448
- return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className)
2684
+ const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
2685
+ return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className)
2449
2686
  })
2450
2687
 
2451
2688
  const cvaClass = computed(() => {
2452
2689
  const [_forwardedProps, variantProps, styleProps, _htmlProps, _elementProps] = splittedProps.value
2453
2690
  const { css: cssStyles, ...propStyles } = styleProps
2454
- const cvaStyles = cvaFn.raw(variantProps)
2691
+ const cvaStyles = __cvaFn__.raw(variantProps)
2455
2692
  return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className)
2456
2693
  })
2457
2694
 
@@ -2472,6 +2709,13 @@ function generateVueJsxFactory(ctx) {
2472
2709
  }
2473
2710
  },
2474
2711
  })
2712
+
2713
+ ${componentName}.displayName = \`${factoryName}.\${name}\`
2714
+ ${componentName}.__cva__ = cvaFn
2715
+ ${componentName}.__base__ = Dynamic
2716
+ ${componentName}.__shouldForwardProps__ = shouldForwardProp
2717
+
2718
+ return ${componentName}
2475
2719
  }
2476
2720
 
2477
2721
  function createJsxFactory() {
@@ -2492,25 +2736,30 @@ function generateVueJsxFactory(ctx) {
2492
2736
  }
2493
2737
 
2494
2738
  // src/artifacts/vue-jsx/jsx.string-literal.ts
2495
- var import_outdent35 = require("outdent");
2739
+ var import_outdent36 = require("outdent");
2496
2740
  function generateVueJsxStringLiteralFactory(ctx) {
2497
- const { factoryName } = ctx.jsx;
2741
+ const { componentName, factoryName } = ctx.jsx;
2498
2742
  return {
2499
- js: import_outdent35.outdent`
2743
+ js: import_outdent36.outdent`
2500
2744
  import { defineComponent, h, computed } from 'vue'
2745
+ ${ctx.file.import("getDisplayName", "./factory-helper")}
2501
2746
  ${ctx.file.import("css, cx", "../css/index")}
2502
2747
 
2503
2748
  function createStyled(Dynamic) {
2504
- const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
2749
+ const name = getDisplayName(Dynamic)
2505
2750
 
2506
2751
  function styledFn(template) {
2507
- const baseClassName = css(template)
2508
- return defineComponent({
2752
+ const styles = css.raw(template)
2753
+
2754
+ const ${componentName} = defineComponent({
2509
2755
  name: \`${factoryName}.\${name}\`,
2510
2756
  inheritAttrs: false,
2511
2757
  props: { as: { type: [String, Object], default: Dynamic } },
2512
2758
  setup(props, { slots, attrs }) {
2513
- const classes = computed(() => cx(baseClassName, elementProps.className))
2759
+ const classes = computed(() => {
2760
+ return cx(css(Dynamic.__styles__, styles), elementProps.className)
2761
+ })
2762
+
2514
2763
  return () => {
2515
2764
  return h(
2516
2765
  props.as,
@@ -2523,6 +2772,11 @@ function generateVueJsxStringLiteralFactory(ctx) {
2523
2772
  }
2524
2773
  },
2525
2774
  })
2775
+
2776
+ ${componentName}.__styles__ = styles
2777
+ ${componentName}.__base__ = element
2778
+
2779
+ return ${componentName}
2526
2780
  }
2527
2781
  }
2528
2782
 
@@ -2548,7 +2802,7 @@ function generateVueJsxStringLiteralFactory(ctx) {
2548
2802
  }
2549
2803
 
2550
2804
  // src/artifacts/vue-jsx/pattern.ts
2551
- var import_outdent36 = require("outdent");
2805
+ var import_outdent37 = require("outdent");
2552
2806
  function generateVueJsxPattern(ctx) {
2553
2807
  const { typeName, factoryName } = ctx.jsx;
2554
2808
  return ctx.patterns.details.map((pattern) => {
@@ -2557,7 +2811,7 @@ function generateVueJsxPattern(ctx) {
2557
2811
  const propList = props.map((v) => JSON.stringify(v)).join(", ");
2558
2812
  return {
2559
2813
  name: dashName,
2560
- js: import_outdent36.outdent`
2814
+ js: import_outdent37.outdent`
2561
2815
  import { defineComponent, h, computed } from 'vue'
2562
2816
  ${ctx.file.import(factoryName, "./factory")}
2563
2817
  ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -2575,7 +2829,7 @@ function generateVueJsxPattern(ctx) {
2575
2829
  }
2576
2830
  })
2577
2831
  `,
2578
- dts: import_outdent36.outdent`
2832
+ dts: import_outdent37.outdent`
2579
2833
  import type { FunctionalComponent } from 'vue'
2580
2834
  ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
2581
2835
  ${ctx.file.importType(typeName, "../types/jsx")}
@@ -2591,23 +2845,27 @@ function generateVueJsxPattern(ctx) {
2591
2845
  }
2592
2846
 
2593
2847
  // src/artifacts/vue-jsx/types.ts
2594
- var import_outdent37 = require("outdent");
2848
+ var import_outdent38 = require("outdent");
2595
2849
  function generateVueJsxTypes(ctx) {
2596
2850
  const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
2597
2851
  return {
2598
- jsxFactory: import_outdent37.outdent`
2852
+ jsxFactory: import_outdent38.outdent`
2599
2853
  ${ctx.file.importType(upperName, "../types/jsx")}
2600
2854
 
2601
2855
  export declare const ${factoryName}: ${upperName}
2602
2856
  `,
2603
- jsxType: import_outdent37.outdent`
2857
+ jsxType: import_outdent38.outdent`
2604
2858
  import type { Component, FunctionalComponent, NativeElements } from 'vue'
2605
2859
 
2606
2860
  ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
2607
- ${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
2861
+ ${ctx.file.importType(
2862
+ "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
2863
+ "./system-types"
2864
+ )}
2865
+
2866
+ export type IntrinsicElement = keyof NativeElements
2608
2867
 
2609
- type IntrinsicElement = keyof NativeElements
2610
- type ElementType = IntrinsicElement | Component
2868
+ export type ElementType = IntrinsicElement | Component
2611
2869
 
2612
2870
  export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
2613
2871
  ? NativeElements[T]
@@ -2615,13 +2873,15 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
2615
2873
  ? Props
2616
2874
  : never
2617
2875
 
2618
- interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
2619
- JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
2876
+ export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
2877
+ JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
2620
2878
  > {}
2621
2879
 
2622
- interface RecipeFn { __type: any }
2880
+ interface RecipeFn {
2881
+ __type: any
2882
+ }
2623
2883
 
2624
- interface JsxFactoryOptions<TProps extends Dict> {
2884
+ export interface JsxFactoryOptions<TProps extends Dict> {
2625
2885
  dataAttr?: boolean
2626
2886
  defaultProps?: TProps
2627
2887
  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
@@ -2629,16 +2889,22 @@ interface JsxFactoryOptions<TProps extends Dict> {
2629
2889
 
2630
2890
  export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P['__type']>>;
2631
2891
 
2632
- interface JsxFactory {
2892
+ export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
2893
+ ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
2894
+ : ${componentName}<T, P>
2895
+
2896
+ export interface JsxFactory {
2633
2897
  <T extends ElementType>(component: T): ${componentName}<T, {}>
2634
- <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
2898
+ <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
2635
2899
  T,
2636
2900
  RecipeSelection<P>
2637
2901
  >
2638
- <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>> ): ${componentName}<T, P['__type']>
2902
+ <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>> ): JsxElement<T, P['__type']>
2639
2903
  }
2640
2904
 
2641
- type JsxElements = { [K in IntrinsicElement]: ${componentName}<K, {}> }
2905
+ export type JsxElements = {
2906
+ [K in IntrinsicElement]: ${componentName}<K, {}>
2907
+ }
2642
2908
 
2643
2909
  export type ${upperName} = JsxFactory & JsxElements
2644
2910
 
@@ -2650,20 +2916,21 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
2650
2916
  }
2651
2917
 
2652
2918
  // src/artifacts/vue-jsx/types.string-literal.ts
2653
- var import_outdent38 = require("outdent");
2919
+ var import_outdent39 = require("outdent");
2654
2920
  function generateVueJsxStringLiteralTypes(ctx) {
2655
2921
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
2656
2922
  return {
2657
- jsxFactory: import_outdent38.outdent`
2923
+ jsxFactory: import_outdent39.outdent`
2658
2924
  ${ctx.file.importType(upperName, "../types/jsx")}
2659
2925
 
2660
2926
  export declare const ${factoryName}: ${upperName}
2661
2927
  `,
2662
- jsxType: import_outdent38.outdent`
2928
+ jsxType: import_outdent39.outdent`
2663
2929
  import type { Component, FunctionalComponent, NativeElements } from 'vue'
2664
2930
 
2665
- type IntrinsicElement = keyof NativeElements
2666
- type ElementType = IntrinsicElement | Component
2931
+ export type IntrinsicElement = keyof NativeElements
2932
+
2933
+ export type ElementType = IntrinsicElement | Component
2667
2934
 
2668
2935
  export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
2669
2936
  ? NativeElements[T]
@@ -2671,14 +2938,16 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
2671
2938
  ? Props
2672
2939
  : never
2673
2940
 
2674
- type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
2941
+ export type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
2675
2942
  >
2676
2943
 
2677
- interface JsxFactory {
2944
+ export interface JsxFactory {
2678
2945
  <T extends ElementType>(component: T): ${componentName}<T>
2679
2946
  }
2680
2947
 
2681
- type JsxElements = { [K in IntrinsicElement]: ${componentName}<K> }
2948
+ export type JsxElements = {
2949
+ [K in IntrinsicElement]: ${componentName}<K>
2950
+ }
2682
2951
 
2683
2952
  export type ${upperName} = JsxFactory & JsxElements
2684
2953
 
@@ -2795,7 +3064,7 @@ var csstype_d_ts_default = {
2795
3064
 
2796
3065
  // src/artifacts/generated/system-types.d.ts.json
2797
3066
  var system_types_d_ts_default = {
2798
- 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"
3067
+ 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"
2799
3068
  };
2800
3069
 
2801
3070
  // src/artifacts/generated/composition.d.ts.json
@@ -2824,7 +3093,7 @@ var selectors_d_ts_default = {
2824
3093
  };
2825
3094
 
2826
3095
  // src/artifacts/types/generated.ts
2827
- var import_ts_pattern8 = require("ts-pattern");
3096
+ var import_ts_pattern9 = require("ts-pattern");
2828
3097
  var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
2829
3098
  function getGeneratedTypes(ctx) {
2830
3099
  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
@@ -2836,15 +3105,15 @@ function getGeneratedTypes(ctx) {
2836
3105
  composition: rewriteImports(composition_d_ts_default.content),
2837
3106
  selectors: rewriteImports(selectors_d_ts_default.content),
2838
3107
  system: rewriteImports(
2839
- (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()
3108
+ (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()
2840
3109
  )
2841
3110
  };
2842
3111
  }
2843
3112
 
2844
3113
  // src/artifacts/types/main.ts
2845
- var import_outdent39 = require("outdent");
3114
+ var import_outdent40 = require("outdent");
2846
3115
  var generateTypesEntry = (ctx) => ({
2847
- global: import_outdent39.outdent`
3116
+ global: import_outdent40.outdent`
2848
3117
  // @ts-nocheck
2849
3118
  import type * as Panda from '@pandacss/dev'
2850
3119
  ${ctx.file.importType("RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig", "./recipe")}
@@ -2865,7 +3134,7 @@ var generateTypesEntry = (ctx) => ({
2865
3134
  }
2866
3135
  `,
2867
3136
  // 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'`
2868
- index: import_outdent39.outdent`
3137
+ index: import_outdent40.outdent`
2869
3138
  import '${ctx.file.extDts("./global")}'
2870
3139
  ${ctx.file.exportTypeStar("./conditions")}
2871
3140
  ${ctx.file.exportTypeStar("./pattern")}
@@ -2875,13 +3144,13 @@ var generateTypesEntry = (ctx) => ({
2875
3144
  ${ctx.file.exportTypeStar("./style-props")}
2876
3145
 
2877
3146
  `,
2878
- helpers: import_outdent39.outdent`
3147
+ helpers: import_outdent40.outdent`
2879
3148
  export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
2880
3149
  `
2881
3150
  });
2882
3151
 
2883
3152
  // src/artifacts/types/prop-types.ts
2884
- var import_outdent40 = require("outdent");
3153
+ var import_outdent41 = require("outdent");
2885
3154
  function generatePropTypes(ctx) {
2886
3155
  const {
2887
3156
  config: { strictTokens },
@@ -2889,7 +3158,7 @@ function generatePropTypes(ctx) {
2889
3158
  } = ctx;
2890
3159
  const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
2891
3160
  const result = [
2892
- import_outdent40.outdent`
3161
+ import_outdent41.outdent`
2893
3162
  ${ctx.file.importType("ConditionalValue", "./conditions")}
2894
3163
  ${ctx.file.importType("CssProperties", "./system-types")}
2895
3164
  ${ctx.file.importType("Tokens", "../tokens/index")}
@@ -2912,7 +3181,7 @@ function generatePropTypes(ctx) {
2912
3181
  result.push(` ${key}: Shorthand<${JSON.stringify(value)}>;`);
2913
3182
  });
2914
3183
  result.push("}");
2915
- return import_outdent40.outdent`
3184
+ return import_outdent41.outdent`
2916
3185
  ${result.join("\n")}
2917
3186
 
2918
3187
  export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -2925,10 +3194,10 @@ function generatePropTypes(ctx) {
2925
3194
 
2926
3195
  // src/artifacts/types/style-props.ts
2927
3196
  var import_is_valid_prop = require("@pandacss/is-valid-prop");
2928
- var import_outdent41 = __toESM(require("outdent"));
3197
+ var import_outdent42 = __toESM(require("outdent"));
2929
3198
  function generateStyleProps(ctx) {
2930
3199
  const props = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()).filter(Boolean));
2931
- return import_outdent41.default`
3200
+ return import_outdent42.default`
2932
3201
  ${ctx.file.importType("ConditionalValue", "./conditions")}
2933
3202
  ${ctx.file.importType("PropertyValue", "./prop-type")}
2934
3203
  ${ctx.file.importType("Token", "../tokens/index")}
@@ -2945,7 +3214,7 @@ function generateStyleProps(ctx) {
2945
3214
 
2946
3215
  // src/artifacts/types/token-types.ts
2947
3216
  var import_shared3 = require("@pandacss/shared");
2948
- var import_outdent42 = require("outdent");
3217
+ var import_outdent43 = require("outdent");
2949
3218
  var import_pluralize = __toESM(require("pluralize"));
2950
3219
  var categories = [
2951
3220
  "zIndex",
@@ -2996,7 +3265,7 @@ function generateTokenTypes(ctx) {
2996
3265
  result.add("} & { [token: string]: never }");
2997
3266
  set.add(Array.from(result).join("\n"));
2998
3267
  set.add(`export type TokenCategory = ${(0, import_shared3.unionType)(categories)}`);
2999
- return import_outdent42.outdent.string(Array.from(set).join("\n\n"));
3268
+ return import_outdent43.outdent.string(Array.from(set).join("\n\n"));
3000
3269
  }
3001
3270
 
3002
3271
  // src/artifacts/index.ts
@@ -3042,7 +3311,6 @@ function setupTypes(ctx) {
3042
3311
  { file: ctx.file.extDts("selectors"), code: gen.selectors },
3043
3312
  { file: ctx.file.extDts("composition"), code: gen.composition },
3044
3313
  { file: ctx.file.extDts("global"), code: entry.global },
3045
- { file: ctx.file.extDts("helpers"), code: entry.helpers },
3046
3314
  { file: ctx.file.extDts("recipe"), code: gen.recipe },
3047
3315
  { file: ctx.file.extDts("pattern"), code: gen.pattern },
3048
3316
  { file: ctx.file.extDts("parts"), code: gen.parts },
@@ -3105,8 +3373,8 @@ function setupRecipes(ctx) {
3105
3373
  return;
3106
3374
  const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
3107
3375
  const index = {
3108
- js: import_outdent43.default.string(indexFiles.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
3109
- dts: import_outdent43.default.string(indexFiles.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
3376
+ js: import_outdent44.default.string(indexFiles.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
3377
+ dts: import_outdent44.default.string(indexFiles.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
3110
3378
  };
3111
3379
  return {
3112
3380
  dir: ctx.paths.recipe,
@@ -3125,8 +3393,8 @@ function setupPatterns(ctx) {
3125
3393
  if (!files)
3126
3394
  return;
3127
3395
  const index = {
3128
- js: import_outdent43.default.string(files.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
3129
- dts: import_outdent43.default.string(files.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
3396
+ js: import_outdent44.default.string(files.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
3397
+ dts: import_outdent44.default.string(files.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
3130
3398
  };
3131
3399
  return {
3132
3400
  dir: ctx.paths.pattern,
@@ -3145,18 +3413,19 @@ function setupJsx(ctx) {
3145
3413
  const types = generateJsxTypes(ctx);
3146
3414
  const factory = generateJsxFactory(ctx);
3147
3415
  const patterns = generateJsxPatterns(ctx);
3416
+ const helpers3 = generatedJsxHelpers(ctx);
3148
3417
  const index = {
3149
- js: import_outdent43.default`
3418
+ js: import_outdent44.default`
3150
3419
  ${ctx.file.exportStar("./factory")}
3151
3420
  ${isValidProp?.js ? ctx.file.exportStar("./is-valid-prop") : ""}
3152
- ${import_outdent43.default.string(patterns.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n"))}
3421
+ ${import_outdent44.default.string(patterns.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n"))}
3153
3422
  `,
3154
- dts: import_outdent43.default`
3423
+ dts: import_outdent44.default`
3155
3424
  ${ctx.file.exportTypeStar("./factory")}
3156
3425
 
3157
3426
  ${isValidProp?.dts ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
3158
3427
 
3159
- ${import_outdent43.default.string(patterns.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))}
3428
+ ${import_outdent44.default.string(patterns.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))}
3160
3429
 
3161
3430
  ${ctx.file.exportType([ctx.jsx.typeName, ctx.jsx.componentName].join(", "), "../types/jsx")}
3162
3431
  `
@@ -3168,6 +3437,7 @@ function setupJsx(ctx) {
3168
3437
  ...patterns.map((file) => ({ file: ctx.file.extDts(file.name), code: file.dts })),
3169
3438
  { file: ctx.file.ext("is-valid-prop"), code: isValidProp?.js },
3170
3439
  { file: ctx.file.extDts("is-valid-prop"), code: isValidProp?.dts },
3440
+ { file: ctx.file.ext("factory-helper"), code: helpers3.js },
3171
3441
  { file: ctx.file.ext("factory"), code: factory?.js },
3172
3442
  { file: ctx.file.extDts("factory"), code: types.jsxFactory },
3173
3443
  { file: ctx.file.ext("index"), code: index.js },
@@ -3177,13 +3447,13 @@ function setupJsx(ctx) {
3177
3447
  }
3178
3448
  function setupCssIndex(ctx) {
3179
3449
  const index = {
3180
- js: import_outdent43.default`
3450
+ js: import_outdent44.default`
3181
3451
  ${ctx.file.exportStar("./css")}
3182
3452
  ${ctx.file.exportStar("./cx")}
3183
3453
  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./cva")}
3184
3454
  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./sva")}
3185
3455
  `,
3186
- dts: import_outdent43.default`
3456
+ dts: import_outdent44.default`
3187
3457
  ${ctx.file.exportTypeStar("./css")}
3188
3458
  ${ctx.file.exportTypeStar("./cx")}
3189
3459
  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportTypeStar("./cva")}
@@ -3245,6 +3515,8 @@ var generateArtifacts = (ctx) => () => {
3245
3515
  ].filter(Boolean).map((artifact) => {
3246
3516
  const files = artifact?.files ?? [];
3247
3517
  files.forEach((file) => {
3518
+ if (!file)
3519
+ return;
3248
3520
  if (ctx.file.isTypeFile(file.file)) {
3249
3521
  file.code = `/* eslint-disable */
3250
3522
  ${file.code}`;
@@ -3284,7 +3556,7 @@ var generateFlattenedCss = (ctx) => (options) => {
3284
3556
  // src/artifacts/css/parser-css.ts
3285
3557
  var import_logger2 = require("@pandacss/logger");
3286
3558
  var import_func = require("lil-fp/func");
3287
- var import_ts_pattern9 = require("ts-pattern");
3559
+ var import_ts_pattern10 = require("ts-pattern");
3288
3560
  var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
3289
3561
  { ...ctx, sheet: ctx.createSheet(), result },
3290
3562
  (0, import_func.tap)(({ sheet, result: result2, patterns, recipes }) => {
@@ -3314,7 +3586,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
3314
3586
  const recipeConfig = recipes.getConfig(recipeName);
3315
3587
  if (!recipeConfig)
3316
3588
  continue;
3317
- (0, import_ts_pattern9.match)(recipe).with({ type: "jsx-recipe" }, () => {
3589
+ (0, import_ts_pattern10.match)(recipe).with({ type: "jsx-recipe" }, () => {
3318
3590
  recipe.data.forEach((data) => {
3319
3591
  const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
3320
3592
  sheet.processStyleProps(filterProps(ctx, styleProps));
@@ -3333,7 +3605,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
3333
3605
  result2.pattern.forEach((patternSet, name) => {
3334
3606
  try {
3335
3607
  for (const pattern of patternSet) {
3336
- (0, import_ts_pattern9.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern9.P.string }, ({ name: jsxName }) => {
3608
+ (0, import_ts_pattern10.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern10.P.string }, ({ name: jsxName }) => {
3337
3609
  pattern.data.forEach((data) => {
3338
3610
  const fnName = patterns.find(jsxName);
3339
3611
  const styleProps = patterns.transform(fnName, data);