@pandacss/generator 0.15.0 → 0.15.2

package/dist/index.js

@@ -228,8 +228,8 @@ function generateResetCss(ctx, scope = "") {
       'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
       'Noto Color Emoji';
     -webkit-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     -moz-tab-size: 4;
     tab-size: 4;
     font-family: var(--global-font-body, var(--font-fallback));
@@ -371,24 +371,39 @@ function generateResetCss(ctx, scope = "") {
     font-family: var(--global-font-mono, var(--font-fallback));
   }
 
-  ${selector}[type='search'] {
+
+  ${selector}input[type="text"],
+  ${selector}input[type="email"],
+  ${selector}input[type="search"],
+  ${selector}input[type="password"] {
+    -webkit-appearance: none;
+    -moz-appearance: none; 
+  }
+
+  ${selector}input[type='search'] {
     -webkit-appearance: textfield;
     outline-offset: -2px;
   }
 
-  ${selector}::-webkit-search-decoration {
+  ${selector}::-webkit-search-decoration,
+  ${selector}::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
 
   ${selector}::-webkit-file-upload-button {
     -webkit-appearance: button;
+    font: inherit;
   }
 
-  ${selector}::-webkit-inner-spin-button,
-  ${selector}::-webkit-outer-spin-button {
+  ${selector}input[type="number"]::-webkit-inner-spin-button,
+  ${selector}input[type="number"]::-webkit-outer-spin-button {
     height: auto;
   }
 
+  ${selector}input[type='number']{
+    -moz-appearance: textfield;
+  }
+
   ${selector}:-moz-ui-invalid {
     box-shadow: none;
   }
@@ -557,9 +572,11 @@ function generateConditions(ctx) {
     dts: import_outdent2.default`
     ${ctx.file.importType("AnySelector, Selectors", "./selectors")}
 
-    export type Conditions = {
+    export interface Conditions {
     ${keys.map(
-      (key) => `	${key === "base" ? `/** The base (=no conditions) styles to apply  */` : ctx.conditions.get(key) ? `/** \`${ctx.conditions.get(key)}\` */` : ""}${JSON.stringify(key)}: string`
+      (key) => `	${key === "base" ? `/** The base (=no conditions) styles to apply  */
+` : ctx.conditions.get(key) ? `/** \`${ctx.conditions.get(key)}\` */
+` : ""}	${JSON.stringify(key)}: string`
     ).join("\n")}
     }
 
@@ -868,7 +885,7 @@ var import_outdent8 = require("outdent");
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const recipeParts = recipe.slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const 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'
 };
 
 // src/artifacts/generated/astish.mjs.json
@@ -964,7 +981,7 @@ function generatePattern(ctx) {
       ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
       ${ctx.file.importType("Tokens", "../tokens/index")}
 
-      export type ${upperName}Properties = {
+      export interface ${upperName}Properties {
          ${Object.keys(properties ?? {}).map((key) => {
         const value = properties[key];
         return (0, import_ts_pattern2.match)(value).with({ type: "property" }, (value2) => {
@@ -984,7 +1001,7 @@ function generatePattern(ctx) {
 
       ${strict ? import_outdent10.outdent`export declare function ${baseName}(styles: ${upperName}Properties): string` : import_outdent10.outdent`
 
-          type ${upperName}Styles = ${upperName}Properties & DistributiveOmit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
+          interface ${upperName}Styles extends ${upperName}Properties, DistributiveOmit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}> {}
 
           interface ${upperName}PatternFn {
             (styles?: ${upperName}Styles): string
@@ -1133,7 +1150,7 @@ function generateRecipes(ctx) {
         ${ctx.file.importType("Pretty", "../types/helpers")}
         ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
 
-        type ${upperName}Variant = {
+        interface ${upperName}Variant {
           ${Object.keys(variantKeyMap).map((key) => {
           const values = variantKeyMap[key];
           if (values.every(isBooleanValue))
@@ -1150,7 +1167,7 @@ function generateRecipes(ctx) {
           [key in keyof ${upperName}Variant]?: ${compoundVariants?.length ? `${upperName}Variant[key]` : `ConditionalValue<${upperName}Variant[key]>`}
         }
 
-        interface ${upperName}Recipe {
+        export interface ${upperName}Recipe {
           __type: ${upperName}VariantProps
           (props?: ${upperName}VariantProps): ${(0, import_core4.isSlotRecipe)(config) ? `Pretty<Record<${(0, import_shared2.unionType)(config.slots)}, string>>` : "string"}
           raw: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
@@ -1300,7 +1317,8 @@ function generatePreactJsxFactory(ctx) {
         })
       })
 
-      ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      ${componentName}.displayName = \`${factoryName}.\${name}\`
       return ${componentName}
     }
 
@@ -1363,7 +1381,7 @@ function generatePreactJsxPattern(ctx) {
       ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
       ${ctx.file.importType(typeName, "../types/jsx")}
 
-      export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+      export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
       ${description ? `/** ${description} */` : ""}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
@@ -1390,12 +1408,12 @@ type ElementType = keyof JSX.IntrinsicElements
 
 type Dict = Record<string, unknown>
 
-export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
+export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T>, P> & JsxStyleProps): JSX.Element
   displayName?: string
 }
 
-type RecipeFn = { __type: any }
+interface RecipeFn = { __type: any }
 
 interface JsxFactory {
   ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
@@ -1439,7 +1457,8 @@ function generatePreactJsxStringLiteralFactory(ctx) {
           })
         })
 
-        ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+        const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+        ${componentName}.displayName = \`${factoryName}.\${name}\`
         return ${componentName}
       }
     }
@@ -1541,7 +1560,8 @@ function generateQwikJsxFactory(ctx) {
         })
       }
 
-      ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      ${componentName}.displayName = \`${factoryName}.\${name}\`
       return ${componentName}
     }
 
@@ -1581,7 +1601,7 @@ function generateQwikJsxPattern(ctx) {
       import { h } from '@builder.io/qwik'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
-  
+
       export const ${jsxName} = function ${jsxName}(props) {
         ${(0, import_ts_pattern5.match)(props.length).with(
         0,
@@ -1604,8 +1624,8 @@ function generateQwikJsxPattern(ctx) {
       ${ctx.file.importType(typeName, "../types/jsx")}
       ${ctx.file.importType("Assign, DistributiveOmit", "../types/system-types")}
 
-      export type ${upperName}Props = Assign<${typeName}<'${jsxElement}'>, DistributiveOmit<${upperName}Properties, ${blocklistType || '""'}>>
-  
+      export interface ${upperName}Props extends Assign<${typeName}<'${jsxElement}'>, DistributiveOmit<${upperName}Properties, ${blocklistType || '""'}>> {}
+
       ${description ? `/** ${description} */` : ""}
       export declare const ${jsxName}: Component<${upperName}Props>
       `
@@ -1629,7 +1649,7 @@ import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './r
 
 type ElementType = keyof QwikIntrinsicElements | Component<any>
 
-type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
+export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
   : T extends Component<infer P>
   ? P
@@ -1637,9 +1657,9 @@ type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElemen
 
 type Dict = Record<string, unknown>
 
-export type ${componentName}<T extends ElementType, P extends Dict = {}> = Component<Assign<ComponentProps<T> & PatchedHTMLProps, Assign<JsxStyleProps, P>>>
+export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T>, PatchedHTMLProps, Assign<JsxStyleProps, P>>> {}
 
-type RecipeFn = { __type: any }
+interface RecipeFn { __type: any }
 
 interface JsxFactory {
   ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
@@ -1681,7 +1701,8 @@ function generateQwikJsxStringLiteralFactory(ctx) {
               })
           }
 
-          ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+          const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+          ${componentName}.displayName = \`${factoryName}.\${name}\`
           return ${componentName}
         }
     }
@@ -1722,7 +1743,7 @@ import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
 
 type ElementType = keyof QwikIntrinsicElements | Component<any>
 
-type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
+export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
   : T extends Component<infer P>
   ? P
@@ -1826,7 +1847,8 @@ function generateReactJsxFactory(ctx) {
         })
       })
 
-      ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+      ${componentName}.displayName = \`${factoryName}.\${name}\`
       return ${componentName}
     }
 
@@ -1889,7 +1911,7 @@ function generateReactJsxPattern(ctx) {
       ${ctx.file.importType(typeName, "../types/jsx")}
       ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
 
-      export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+      export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
       ${description ? `/** ${description} */` : ""}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
@@ -1914,16 +1936,16 @@ ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord",
 
 type Dict = Record<string, unknown>
 
-type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
+export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
-export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
+export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
 }
 
-type RecipeFn = { __type: any }
+interface RecipeFn { __type: any }
 
 interface JsxFactory {
   ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
@@ -1966,7 +1988,8 @@ function generateReactJsxStringLiteralFactory(ctx) {
             })
         })
 
-        ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
+        const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+        ${componentName}.displayName = \`${factoryName}.\${name}\`
         return ${componentName}
       }
     }
@@ -2008,7 +2031,7 @@ ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
 
 type Dict = Record<string, unknown>
 
-type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
+export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
@@ -2149,7 +2172,7 @@ function generateSolidJsxPattern(ctx) {
     ${ctx.file.importType(typeName, "../types/jsx")}
     ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
 
-    export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+    export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
     ${description ? `/** ${description} */` : ""}
     export declare const ${jsxName}: Component<${upperName}Props>
@@ -2176,12 +2199,12 @@ type Dict = Record<string, unknown>
 
 type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
-export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
+export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
 }
 
-type RecipeFn = { __type: any }
+interface RecipeFn { __type: any }
 
 interface JsxFactory {
   ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
@@ -2304,9 +2327,10 @@ function generateVueJsxFactory(ctx) {
 
     function styledFn(Dynamic, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
+      const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
 
       return defineComponent({
-        name: \`${factoryName}.\${Dynamic}\`,
+        name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
         props: { as: { type: [String, Object], default: Dynamic } },
         setup(props, { slots, attrs }) {
@@ -2379,10 +2403,12 @@ function generateVueJsxStringLiteralFactory(ctx) {
     ${ctx.file.import("css, cx", "../css/index")}
 
   function createStyled(Dynamic) {
+    const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+
     function styledFn(template) {
       const baseClassName = css(template)
       return defineComponent({
-        name: \`${factoryName}.\${Dynamic}\`,
+        name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
         props: { as: { type: [String, Object], default: Dynamic } },
         setup(props, { slots, attrs }) {
@@ -2457,7 +2483,7 @@ function generateVueJsxPattern(ctx) {
     ${ctx.file.importType(typeName, "../types/jsx")}
     ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
 
-    export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+    export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
     ${description ? `/** ${description} */` : ""}
     export declare const ${jsxName}: FunctionalComponent<${upperName}Props>
@@ -2485,17 +2511,17 @@ ${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
 type IntrinsicElement = keyof NativeElements
 type ElementType = IntrinsicElement | Component
 
-type ComponentProps<T extends ElementType> = T extends IntrinsicElement
+export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? NativeElements[T]
   : T extends Component<infer Props>
   ? Props
   : never
 
-type ${componentName}<T extends ElementType, P extends Dict = {}> = FunctionalComponent<
+  interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
 JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
->
+> {}
 
-type RecipeFn = { __type: any }
+interface RecipeFn = { __type: any }
 
 interface JsxFactory {
   ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
@@ -2531,7 +2557,7 @@ import type { Component, FunctionalComponent, NativeElements } from 'vue'
 type IntrinsicElement = keyof NativeElements
 type ElementType = IntrinsicElement | Component
 
-type ComponentProps<T extends ElementType> = T extends IntrinsicElement
+export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? NativeElements[T]
   : T extends Component<infer Props>
   ? Props
@@ -2661,27 +2687,27 @@ var csstype_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type 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\ntype 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 type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\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 * -----------------------------------------------------------------------------*/\ntype WithCss = { css?: SystemStyleObject }\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 type PatchedHTMLProps = {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\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"
 };
 
 // src/artifacts/generated/composition.d.ts.json
 var composition_d_ts_default = {
-  content: "import type { CompositionStyleObject } from './system-types'\n\ntype Recursive<T> = {\n  [key: string]: Recursive<T> | T\n}\n\nexport type Token<Value = any> = {\n  value: Value\n  description?: string\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontVariationSettings'\n  | 'fontVariantPosition'\n  | 'fontVariantCaps'\n  | 'fontVariantNumeric'\n  | 'fontVariantAlternates'\n  | 'fontVariantLigatures'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'fontSynthesis'\n  | 'fontStyle'\n  | 'fontVariant'\n  | 'lineHeight'\n  | 'letterSpacing'\n  | 'textDecoration'\n  | 'textTransform'\n  | 'textIndent'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationStyle'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'hyphenateCharacter'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\nexport type CompositionStyles = {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n}\n"
+  content: "import type { CompositionStyleObject } from './system-types'\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\nexport interface Token<Value = any> {\n  value: Value\n  description?: string\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontVariationSettings'\n  | 'fontVariantPosition'\n  | 'fontVariantCaps'\n  | 'fontVariantNumeric'\n  | 'fontVariantAlternates'\n  | 'fontVariantLigatures'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'fontSynthesis'\n  | 'fontStyle'\n  | 'fontVariant'\n  | 'lineHeight'\n  | 'letterSpacing'\n  | 'textDecoration'\n  | 'textTransform'\n  | 'textIndent'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationStyle'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'hyphenateCharacter'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n}\n"
 };
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject, DistributiveOmit } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype RecipeConfigMeta = {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { SystemStyleObject, DistributiveOmit } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
 var pattern_d_ts_default = {
-  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport type PatternHelpers = {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\nexport type PatternProperties = Record<string, PatternProperty>\n\ntype Props<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternConfig<T extends PatternProperties = PatternProperties> = {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsxName?: string\n  /**\n   * The jsx elements to track for this pattern. Can be string or Regexp.\n   *\n   * @default capitalize(pattern.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
+  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport interface PatternHelpers {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\nexport type PatternProperties = Record<string, PatternProperty>\n\ntype Props<T> = Record<LiteralUnion<keyof T>, any>\n\nexport interface PatternConfig<T extends PatternProperties = PatternProperties> {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsxName?: string\n  /**\n   * The jsx elements to track for this pattern. Can be string or Regexp.\n   *\n   * @default capitalize(pattern.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
 };
 
 // src/artifacts/generated/parts.d.ts.json
 var parts_d_ts_default = {
-  content: "export type Part = {\n  selector: string\n}\n\nexport type Parts = Record<string, Part>\n"
+  content: "export interface Part {\n  selector: string\n}\n\nexport type Parts = Record<string, Part>\n"
 };
 
 // src/artifacts/generated/selectors.d.ts.json
@@ -2712,7 +2738,7 @@ var import_outdent39 = require("outdent");
 var generateTypesEntry = (ctx) => ({
   global: import_outdent39.outdent`
     // @ts-nocheck
-    import type { TextStyles, LayerStyles } from '@pandacss/dev'
+    import type * as Panda from '@pandacss/dev'
     ${ctx.file.importType("RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig", "./recipe")}
     ${ctx.file.importType("Parts", "./parts")}
     ${ctx.file.importType("PatternConfig, PatternProperties", "./pattern")}
@@ -2720,23 +2746,25 @@ var generateTypesEntry = (ctx) => ({
     ${ctx.file.importType("CompositionStyles", "./composition")}
 
     declare module '@pandacss/dev' {
-      export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig
-      export function defineSlotRecipe<S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>): SlotRecipeConfig
+      export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): Panda.RecipeConfig
+      export function defineSlotRecipe<S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>): Panda.SlotRecipeConfig
       export function defineStyles(definition: SystemStyleObject): SystemStyleObject
-      export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
-      export function defineTextStyles(definition: CompositionStyles['textStyles']): TextStyles
-      export function defineLayerStyles(definition: CompositionStyles['layerStyles']): LayerStyles
-      export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): PatternConfig
+      export function defineGlobalStyles(definition: GlobalStyleObject): Panda.GlobalStyleObject
+      export function defineTextStyles(definition: CompositionStyles['textStyles']): Panda.TextStyles
+      export function defineLayerStyles(definition: CompositionStyles['layerStyles']): Panda.LayerStyles
+      export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): Panda.PatternConfig
       export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>
     }
     `,
   // We need to export types used in the global.d.ts here to avoid TS errors such as `The inferred type of 'xxx' cannot be named without a reference to 'yyy'`
   index: import_outdent39.outdent`
     import '${ctx.file.extDts("./global")}'
-    ${ctx.file.exportType("ConditionalValue", "./conditions")}
-    ${ctx.file.exportType("PatternConfig, PatternProperties", "./pattern")}
-    ${ctx.file.exportType("RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig", "./recipe")}
-    ${ctx.file.exportType("GlobalStyleObject, JsxStyleProps, SystemStyleObject", "./system-types")}
+    ${ctx.file.exportTypeStar("./conditions")}
+    ${ctx.file.exportTypeStar("./pattern")}
+    ${ctx.file.exportTypeStar("./recipe")}
+    ${ctx.file.exportTypeStar("./system-types")}
+    ${ctx.file.exportTypeStar("./jsx")}
+    ${ctx.file.exportTypeStar("./style-props")}
 
     `,
   helpers: import_outdent39.outdent`
@@ -2758,7 +2786,7 @@ function generatePropTypes(ctx) {
     ${ctx.file.importType("CssProperties", "./system-types")}
     ${ctx.file.importType("Tokens", "../tokens/index")}
 
-    type PropertyValueTypes  = {`
+    interface PropertyValueTypes {`
   ];
   const types = utility.getTypes();
   for (const [prop, values] of types.entries()) {
@@ -2770,7 +2798,7 @@ function generatePropTypes(ctx) {
 
   type Shorthand<T> = T extends keyof PropertyValueTypes ? PropertyValueTypes[T]${strictText} : CssValue<T>
 
-  export type PropertyTypes = PropertyValueTypes & {
+  export interface PropertyTypes extends PropertyValueTypes {
   `);
   utility.shorthands.forEach((value, key) => {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
@@ -2801,7 +2829,7 @@ function generateStyleProps(ctx) {
       [key in \`--\${string}\`]?: ConditionalValue<Token | (string & {}) | (number & {})>
     }
 
-    export type SystemProperties = {
+    export interface SystemProperties {
       ${Array.from(props).map((v) => `	${v}?: PropertyValue<'${v}'>`).join("\n")}
     }
     `;