@pandacss/generator 0.13.1 → 0.15.0

package/dist/index.js

@@ -558,7 +558,9 @@ function generateConditions(ctx) {
     ${ctx.file.importType("AnySelector, Selectors", "./selectors")}
 
     export type Conditions = {
-    ${keys.map((key) => `	${JSON.stringify(key)}: string`).join("\n")}
+    ${keys.map(
+      (key) => `	${key === "base" ? `/** The base (=no conditions) styles to apply  */` : ctx.conditions.get(key) ? `/** \`${ctx.conditions.get(key)}\` */` : ""}${JSON.stringify(key)}: string`
+    ).join("\n")}
     }
 
     export type Condition = keyof Conditions
@@ -629,8 +631,8 @@ function generateCssFn(ctx) {
     ${ctx.file.importType("SystemStyleObject", "../types/index")}
 
     interface CssFunction {
-      (...styles: SystemStyleObject[]): string
-      raw: (styles: SystemStyleObject) => SystemStyleObject
+      (...styles: Array<SystemStyleObject | undefined | null | false>): string
+      raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
     }
 
     export declare const css: CssFunction;
@@ -697,7 +699,7 @@ function generateCssFn(ctx) {
 
     const cssFn = createCss(context)
     export const css = (...styles) => cssFn(mergeCss(...styles))
-    css.raw = (styles) => styles
+    css.raw = (...styles) => mergeCss(...styles)
 
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
@@ -815,7 +817,7 @@ function generateCvaFn(ctx) {
     }
 
     export function assertCompoundVariant(name, compoundVariants, variants, prop) {
-      if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
+      if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {
         throw new Error(\`[recipe:\${name}:\${prop}] Conditions are not supported when using compound variants.\`)
       }
     }
@@ -866,7 +868,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 assign = (obj, path, value) => {\n  const last = path.pop();\n  const target = path.reduce((acc, key) => {\n    if (acc[key] == null)\n      acc[key] = {};\n    return acc[key];\n  }, obj);\n  if (last != null)\n    target[last] = value;\n};\nvar getSlotRecipes = (recipe) => {\n  const parts = recipe.slots.map((slot) => [\n    slot,\n    // setup base recipe\n    {\n      // create class-base on BEM\n      className: [recipe.className ?? "", slot].join("__"),\n      base: {},\n      variants: {},\n      defaultVariants: recipe.defaultVariants ?? {},\n      compoundVariants: []\n    }\n  ]).map(([slot, cva]) => {\n    const base = recipe.base[slot];\n    if (base)\n      cva.base = base;\n    walkObject(\n      recipe.variants ?? {},\n      (variant, path) => {\n        if (!variant[slot])\n          return;\n        assign(cva, ["variants", ...path], variant[slot]);\n      },\n      {\n        stop: (_value, path) => path.includes(slot)\n      }\n    );\n    if (recipe.compoundVariants) {\n      cva.compoundVariants = getSlotCompoundVariant(recipe.compoundVariants, slot);\n    }\n    return [slot, cva];\n  });\n  return Object.fromEntries(parts);\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 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'
 };
 
 // src/artifacts/generated/astish.mjs.json
@@ -986,7 +988,7 @@ function generatePattern(ctx) {
 
           interface ${upperName}PatternFn {
             (styles?: ${upperName}Styles): string
-            raw: (styles: ${upperName}Styles) => SystemStyleObject
+            raw: (styles?: ${upperName}Styles) => SystemStyleObject
           }
 
           ${description ? `/** ${description} */` : ""}
@@ -1175,12 +1177,17 @@ function generateSvaFn(ctx) {
 
     export function sva(config) {
       const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
-      
+
       function svaFn(props) {
         const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
         return Object.fromEntries(result)
       }
 
+      function raw(props) {
+        const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)])
+        return Object.fromEntries(result)
+      }
+
       const variants = config.variants ?? {};
       const variantKeys = Object.keys(variants);
 
@@ -1194,6 +1201,7 @@ function generateSvaFn(ctx) {
 
       return Object.assign(svaFn, {
         __cva__: false,
+        raw,
         variantMap,
         variantKeys,
         splitVariantProps,
@@ -2469,158 +2477,40 @@ ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent37.outdent`
-import type { Component, FunctionalComponent } from 'vue'
+import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
 ${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
 
-type IntrinsicElement =
-  | 'a'
-  | 'abbr'
-  | 'address'
-  | 'area'
-  | 'article'
-  | 'aside'
-  | 'audio'
-  | 'b'
-  | 'base'
-  | 'bdi'
-  | 'bdo'
-  | 'blockquote'
-  | 'body'
-  | 'br'
-  | 'button'
-  | 'canvas'
-  | 'caption'
-  | 'cite'
-  | 'code'
-  | 'col'
-  | 'colgroup'
-  | 'data'
-  | 'datalist'
-  | 'dd'
-  | 'del'
-  | 'details'
-  | 'dfn'
-  | 'dialog'
-  | 'div'
-  | 'dl'
-  | 'dt'
-  | 'em'
-  | 'embed'
-  | 'fieldset'
-  | 'figcaption'
-  | 'figure'
-  | 'footer'
-  | 'form'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'head'
-  | 'header'
-  | 'hgroup'
-  | 'hr'
-  | 'html'
-  | 'i'
-  | 'iframe'
-  | 'img'
-  | 'input'
-  | 'ins'
-  | 'kbd'
-  | 'label'
-  | 'legend'
-  | 'li'
-  | 'link'
-  | 'main'
-  | 'map'
-  | 'mark'
-  | 'math'
-  | 'menu'
-  | 'menuitem'
-  | 'meta'
-  | 'meter'
-  | 'nav'
-  | 'noscript'
-  | 'object'
-  | 'ol'
-  | 'optgroup'
-  | 'option'
-  | 'output'
-  | 'p'
-  | 'param'
-  | 'picture'
-  | 'pre'
-  | 'progress'
-  | 'q'
-  | 'rb'
-  | 'rp'
-  | 'rt'
-  | 'rtc'
-  | 'ruby'
-  | 's'
-  | 'samp'
-  | 'script'
-  | 'section'
-  | 'select'
-  | 'slot'
-  | 'small'
-  | 'source'
-  | 'span'
-  | 'strong'
-  | 'style'
-  | 'sub'
-  | 'summary'
-  | 'sup'
-  | 'svg'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'template'
-  | 'textarea'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'time'
-  | 'title'
-  | 'tr'
-  | 'track'
-  | 'u'
-  | 'ul'
-  | 'var'
-  | 'video'
-  | 'wbr'
-
-  type ElementType = IntrinsicElement | Component
-
-  type ComponentProps<T extends ElementType> = T extends keyof JSX.IntrinsicElements
-    ? JSX.IntrinsicElements[T]
-    : T extends Component<infer Props>
-    ? Props
-    : never
-
-  type ${componentName}<T extends ElementType, P extends Dict = {}> = FunctionalComponent<
-  JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
-  >
+type IntrinsicElement = keyof NativeElements
+type ElementType = IntrinsicElement | Component
 
-  type RecipeFn = { __type: any }
+type ComponentProps<T extends ElementType> = T extends IntrinsicElement
+  ? NativeElements[T]
+  : T extends Component<infer Props>
+  ? Props
+  : never
 
-  interface JsxFactory {
-    ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
-    <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
-      T,
-      RecipeSelection<P>
-    >
-    <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
-  }
+type ${componentName}<T extends ElementType, P extends Dict = {}> = FunctionalComponent<
+JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
+>
 
-  type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+type RecipeFn = { __type: any }
 
-  export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+interface JsxFactory {
+  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+    T,
+    RecipeSelection<P>
+  >
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+}
+
+type JsxElements = { [K in IntrinsicElement]: ${componentName}<K, {}> }
 
-  export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
   };
 }
@@ -2636,147 +2526,29 @@ ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent38.outdent`
-import type { Component, FunctionalComponent } from 'vue'
-
-type IntrinsicElement =
-  | 'a'
-  | 'abbr'
-  | 'address'
-  | 'area'
-  | 'article'
-  | 'aside'
-  | 'audio'
-  | 'b'
-  | 'base'
-  | 'bdi'
-  | 'bdo'
-  | 'blockquote'
-  | 'body'
-  | 'br'
-  | 'button'
-  | 'canvas'
-  | 'caption'
-  | 'cite'
-  | 'code'
-  | 'col'
-  | 'colgroup'
-  | 'data'
-  | 'datalist'
-  | 'dd'
-  | 'del'
-  | 'details'
-  | 'dfn'
-  | 'dialog'
-  | 'div'
-  | 'dl'
-  | 'dt'
-  | 'em'
-  | 'embed'
-  | 'fieldset'
-  | 'figcaption'
-  | 'figure'
-  | 'footer'
-  | 'form'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'head'
-  | 'header'
-  | 'hgroup'
-  | 'hr'
-  | 'html'
-  | 'i'
-  | 'iframe'
-  | 'img'
-  | 'input'
-  | 'ins'
-  | 'kbd'
-  | 'label'
-  | 'legend'
-  | 'li'
-  | 'link'
-  | 'main'
-  | 'map'
-  | 'mark'
-  | 'math'
-  | 'menu'
-  | 'menuitem'
-  | 'meta'
-  | 'meter'
-  | 'nav'
-  | 'noscript'
-  | 'object'
-  | 'ol'
-  | 'optgroup'
-  | 'option'
-  | 'output'
-  | 'p'
-  | 'param'
-  | 'picture'
-  | 'pre'
-  | 'progress'
-  | 'q'
-  | 'rb'
-  | 'rp'
-  | 'rt'
-  | 'rtc'
-  | 'ruby'
-  | 's'
-  | 'samp'
-  | 'script'
-  | 'section'
-  | 'select'
-  | 'slot'
-  | 'small'
-  | 'source'
-  | 'span'
-  | 'strong'
-  | 'style'
-  | 'sub'
-  | 'summary'
-  | 'sup'
-  | 'svg'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'template'
-  | 'textarea'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'time'
-  | 'title'
-  | 'tr'
-  | 'track'
-  | 'u'
-  | 'ul'
-  | 'var'
-  | 'video'
-  | 'wbr'
-
-  type ElementType = IntrinsicElement | Component
-
-  type ComponentProps<T extends ElementType> = T extends keyof JSX.IntrinsicElements
-    ? JSX.IntrinsicElements[T]
-    : T extends Component<infer Props>
-    ? Props
-    : never
-
-  type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
-  >
+import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
-  interface JsxFactory {
-    <T extends ElementType>(component: T): ${componentName}<T>
-  }
+type IntrinsicElement = keyof NativeElements
+type ElementType = IntrinsicElement | Component
 
-  type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+type ComponentProps<T extends ElementType> = T extends IntrinsicElement
+  ? NativeElements[T]
+  : T extends Component<infer Props>
+  ? Props
+  : never
+
+type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
+>
 
-  export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+interface JsxFactory {
+  <T extends ElementType>(component: T): ${componentName}<T>
+}
+
+type JsxElements = { [K in IntrinsicElement]: ${componentName}<K> }
+
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
-  export type ${typeName}<T extends ElementType> = ComponentProps<T>
+export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
   };
 }
@@ -2899,7 +2671,7 @@ var composition_d_ts_default = {
 
 // 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  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 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"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -2958,9 +2730,12 @@ var generateTypesEntry = (ctx) => ({
       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")}
 
     `,
@@ -3005,9 +2780,9 @@ function generatePropTypes(ctx) {
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-    ? ConditionalValue<PropertyTypes[T]${strictText} | (string & {})>
+    ? ConditionalValue<PropertyTypes[T]${strictText}${!ctx.config.strictTokens ? " | (string & {})" : ""}>
     : T extends keyof CssProperties
-    ? ConditionalValue<CssProperties[T] | (string & {})>
+    ? ConditionalValue<CssProperties[T]${!ctx.config.strictTokens ? " | (string & {})" : ""}>
     : ConditionalValue<string | number>
   `;
 }
@@ -3242,12 +3017,12 @@ function setupJsx(ctx) {
   `,
     dts: import_outdent43.default`
   ${ctx.file.exportTypeStar("./factory")}
-  
+
   ${isValidProp?.dts ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
-  
+
   ${import_outdent43.default.string(patterns.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))}
-  
-  ${ctx.file.exportType(ctx.jsx.typeName, "../types/jsx")}
+
+  ${ctx.file.exportType([ctx.jsx.typeName, ctx.jsx.componentName].join(", "), "../types/jsx")}
     `
   };
   return {
@@ -3394,7 +3169,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
     });
     result2.jsx.forEach((jsx) => {
       jsx.data.forEach((data) => {
-        sheet.processStyleProps(data);
+        sheet.processStyleProps(filterProps(ctx, data));
       });
     });
     result2.recipe.forEach((recipeSet, recipeName) => {
@@ -3406,7 +3181,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
           (0, import_ts_pattern10.match)(recipe).with({ type: "jsx-recipe" }, () => {
             recipe.data.forEach((data) => {
               const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
-              sheet.processStyleProps(styleProps);
+              sheet.processStyleProps(filterProps(ctx, styleProps));
               sheet.processRecipe(recipeName, recipeConfig, recipeProps);
             });
           }).otherwise(() => {
@@ -3426,7 +3201,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
             pattern.data.forEach((data) => {
               const fnName = patterns.find(jsxName);
               const styleProps = patterns.transform(fnName, data);
-              sheet.processStyleProps(styleProps);
+              sheet.processStyleProps(filterProps(ctx, styleProps));
             });
           }).otherwise(() => {
             pattern.data.forEach((data) => {
@@ -3451,6 +3226,15 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
     }
   )
 );
+var filterProps = (ctx, props) => {
+  const clone = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (ctx.isValidProperty(key)) {
+      clone[key] = value;
+    }
+  }
+  return clone;
+};
 
 // src/engines/base.ts
 var import_core5 = require("@pandacss/core");
@@ -3486,7 +3270,8 @@ var getBaseEngine = (conf) => {
     tokens,
     config: isTemplateLiteralSyntax ? {} : config.utilities,
     separator: config.separator,
-    shorthands: config.shorthands
+    shorthands: config.shorthands,
+    strictTokens: config.strictTokens
   });
   const conditions = new import_core5.Conditions({
     conditions: isTemplateLiteralSyntax ? {} : config.conditions,

package/dist/index.mjs

@@ -527,7 +527,9 @@ function generateConditions(ctx) {
     ${ctx.file.importType("AnySelector, Selectors", "./selectors")}
 
     export type Conditions = {
-    ${keys.map((key) => `	${JSON.stringify(key)}: string`).join("\n")}
+    ${keys.map(
+      (key) => `	${key === "base" ? `/** The base (=no conditions) styles to apply  */` : ctx.conditions.get(key) ? `/** \`${ctx.conditions.get(key)}\` */` : ""}${JSON.stringify(key)}: string`
+    ).join("\n")}
     }
 
     export type Condition = keyof Conditions
@@ -598,8 +600,8 @@ function generateCssFn(ctx) {
     ${ctx.file.importType("SystemStyleObject", "../types/index")}
 
     interface CssFunction {
-      (...styles: SystemStyleObject[]): string
-      raw: (styles: SystemStyleObject) => SystemStyleObject
+      (...styles: Array<SystemStyleObject | undefined | null | false>): string
+      raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
     }
 
     export declare const css: CssFunction;
@@ -666,7 +668,7 @@ function generateCssFn(ctx) {
 
     const cssFn = createCss(context)
     export const css = (...styles) => cssFn(mergeCss(...styles))
-    css.raw = (styles) => styles
+    css.raw = (...styles) => mergeCss(...styles)
 
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
@@ -784,7 +786,7 @@ function generateCvaFn(ctx) {
     }
 
     export function assertCompoundVariant(name, compoundVariants, variants, prop) {
-      if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
+      if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {
         throw new Error(\`[recipe:\${name}:\${prop}] Conditions are not supported when using compound variants.\`)
       }
     }
@@ -835,7 +837,7 @@ import { outdent as outdent8 } from "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 assign = (obj, path, value) => {\n  const last = path.pop();\n  const target = path.reduce((acc, key) => {\n    if (acc[key] == null)\n      acc[key] = {};\n    return acc[key];\n  }, obj);\n  if (last != null)\n    target[last] = value;\n};\nvar getSlotRecipes = (recipe) => {\n  const parts = recipe.slots.map((slot) => [\n    slot,\n    // setup base recipe\n    {\n      // create class-base on BEM\n      className: [recipe.className ?? "", slot].join("__"),\n      base: {},\n      variants: {},\n      defaultVariants: recipe.defaultVariants ?? {},\n      compoundVariants: []\n    }\n  ]).map(([slot, cva]) => {\n    const base = recipe.base[slot];\n    if (base)\n      cva.base = base;\n    walkObject(\n      recipe.variants ?? {},\n      (variant, path) => {\n        if (!variant[slot])\n          return;\n        assign(cva, ["variants", ...path], variant[slot]);\n      },\n      {\n        stop: (_value, path) => path.includes(slot)\n      }\n    );\n    if (recipe.compoundVariants) {\n      cva.compoundVariants = getSlotCompoundVariant(recipe.compoundVariants, slot);\n    }\n    return [slot, cva];\n  });\n  return Object.fromEntries(parts);\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 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'
 };
 
 // src/artifacts/generated/astish.mjs.json
@@ -955,7 +957,7 @@ function generatePattern(ctx) {
 
           interface ${upperName}PatternFn {
             (styles?: ${upperName}Styles): string
-            raw: (styles: ${upperName}Styles) => SystemStyleObject
+            raw: (styles?: ${upperName}Styles) => SystemStyleObject
           }
 
           ${description ? `/** ${description} */` : ""}
@@ -1144,12 +1146,17 @@ function generateSvaFn(ctx) {
 
     export function sva(config) {
       const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
-      
+
       function svaFn(props) {
         const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
         return Object.fromEntries(result)
       }
 
+      function raw(props) {
+        const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)])
+        return Object.fromEntries(result)
+      }
+
       const variants = config.variants ?? {};
       const variantKeys = Object.keys(variants);
 
@@ -1163,6 +1170,7 @@ function generateSvaFn(ctx) {
 
       return Object.assign(svaFn, {
         __cva__: false,
+        raw,
         variantMap,
         variantKeys,
         splitVariantProps,
@@ -2438,158 +2446,40 @@ ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent37`
-import type { Component, FunctionalComponent } from 'vue'
+import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
 ${ctx.file.importType("Assign, JsxStyleProps, JsxHTMLProps", "./system-types")}
 
-type IntrinsicElement =
-  | 'a'
-  | 'abbr'
-  | 'address'
-  | 'area'
-  | 'article'
-  | 'aside'
-  | 'audio'
-  | 'b'
-  | 'base'
-  | 'bdi'
-  | 'bdo'
-  | 'blockquote'
-  | 'body'
-  | 'br'
-  | 'button'
-  | 'canvas'
-  | 'caption'
-  | 'cite'
-  | 'code'
-  | 'col'
-  | 'colgroup'
-  | 'data'
-  | 'datalist'
-  | 'dd'
-  | 'del'
-  | 'details'
-  | 'dfn'
-  | 'dialog'
-  | 'div'
-  | 'dl'
-  | 'dt'
-  | 'em'
-  | 'embed'
-  | 'fieldset'
-  | 'figcaption'
-  | 'figure'
-  | 'footer'
-  | 'form'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'head'
-  | 'header'
-  | 'hgroup'
-  | 'hr'
-  | 'html'
-  | 'i'
-  | 'iframe'
-  | 'img'
-  | 'input'
-  | 'ins'
-  | 'kbd'
-  | 'label'
-  | 'legend'
-  | 'li'
-  | 'link'
-  | 'main'
-  | 'map'
-  | 'mark'
-  | 'math'
-  | 'menu'
-  | 'menuitem'
-  | 'meta'
-  | 'meter'
-  | 'nav'
-  | 'noscript'
-  | 'object'
-  | 'ol'
-  | 'optgroup'
-  | 'option'
-  | 'output'
-  | 'p'
-  | 'param'
-  | 'picture'
-  | 'pre'
-  | 'progress'
-  | 'q'
-  | 'rb'
-  | 'rp'
-  | 'rt'
-  | 'rtc'
-  | 'ruby'
-  | 's'
-  | 'samp'
-  | 'script'
-  | 'section'
-  | 'select'
-  | 'slot'
-  | 'small'
-  | 'source'
-  | 'span'
-  | 'strong'
-  | 'style'
-  | 'sub'
-  | 'summary'
-  | 'sup'
-  | 'svg'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'template'
-  | 'textarea'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'time'
-  | 'title'
-  | 'tr'
-  | 'track'
-  | 'u'
-  | 'ul'
-  | 'var'
-  | 'video'
-  | 'wbr'
-
-  type ElementType = IntrinsicElement | Component
-
-  type ComponentProps<T extends ElementType> = T extends keyof JSX.IntrinsicElements
-    ? JSX.IntrinsicElements[T]
-    : T extends Component<infer Props>
-    ? Props
-    : never
-
-  type ${componentName}<T extends ElementType, P extends Dict = {}> = FunctionalComponent<
-  JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
-  >
+type IntrinsicElement = keyof NativeElements
+type ElementType = IntrinsicElement | Component
 
-  type RecipeFn = { __type: any }
+type ComponentProps<T extends ElementType> = T extends IntrinsicElement
+  ? NativeElements[T]
+  : T extends Component<infer Props>
+  ? Props
+  : never
 
-  interface JsxFactory {
-    ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
-    <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
-      T,
-      RecipeSelection<P>
-    >
-    <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
-  }
+type ${componentName}<T extends ElementType, P extends Dict = {}> = FunctionalComponent<
+JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
+>
 
-  type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
+type RecipeFn = { __type: any }
 
-  export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+interface JsxFactory {
+  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+    T,
+    RecipeSelection<P>
+  >
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+}
+
+type JsxElements = { [K in IntrinsicElement]: ${componentName}<K, {}> }
 
-  export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
   };
 }
@@ -2605,147 +2495,29 @@ ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent38`
-import type { Component, FunctionalComponent } from 'vue'
-
-type IntrinsicElement =
-  | 'a'
-  | 'abbr'
-  | 'address'
-  | 'area'
-  | 'article'
-  | 'aside'
-  | 'audio'
-  | 'b'
-  | 'base'
-  | 'bdi'
-  | 'bdo'
-  | 'blockquote'
-  | 'body'
-  | 'br'
-  | 'button'
-  | 'canvas'
-  | 'caption'
-  | 'cite'
-  | 'code'
-  | 'col'
-  | 'colgroup'
-  | 'data'
-  | 'datalist'
-  | 'dd'
-  | 'del'
-  | 'details'
-  | 'dfn'
-  | 'dialog'
-  | 'div'
-  | 'dl'
-  | 'dt'
-  | 'em'
-  | 'embed'
-  | 'fieldset'
-  | 'figcaption'
-  | 'figure'
-  | 'footer'
-  | 'form'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'head'
-  | 'header'
-  | 'hgroup'
-  | 'hr'
-  | 'html'
-  | 'i'
-  | 'iframe'
-  | 'img'
-  | 'input'
-  | 'ins'
-  | 'kbd'
-  | 'label'
-  | 'legend'
-  | 'li'
-  | 'link'
-  | 'main'
-  | 'map'
-  | 'mark'
-  | 'math'
-  | 'menu'
-  | 'menuitem'
-  | 'meta'
-  | 'meter'
-  | 'nav'
-  | 'noscript'
-  | 'object'
-  | 'ol'
-  | 'optgroup'
-  | 'option'
-  | 'output'
-  | 'p'
-  | 'param'
-  | 'picture'
-  | 'pre'
-  | 'progress'
-  | 'q'
-  | 'rb'
-  | 'rp'
-  | 'rt'
-  | 'rtc'
-  | 'ruby'
-  | 's'
-  | 'samp'
-  | 'script'
-  | 'section'
-  | 'select'
-  | 'slot'
-  | 'small'
-  | 'source'
-  | 'span'
-  | 'strong'
-  | 'style'
-  | 'sub'
-  | 'summary'
-  | 'sup'
-  | 'svg'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'template'
-  | 'textarea'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'time'
-  | 'title'
-  | 'tr'
-  | 'track'
-  | 'u'
-  | 'ul'
-  | 'var'
-  | 'video'
-  | 'wbr'
-
-  type ElementType = IntrinsicElement | Component
-
-  type ComponentProps<T extends ElementType> = T extends keyof JSX.IntrinsicElements
-    ? JSX.IntrinsicElements[T]
-    : T extends Component<infer Props>
-    ? Props
-    : never
-
-  type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
-  >
+import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
-  interface JsxFactory {
-    <T extends ElementType>(component: T): ${componentName}<T>
-  }
+type IntrinsicElement = keyof NativeElements
+type ElementType = IntrinsicElement | Component
 
-  type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
+type ComponentProps<T extends ElementType> = T extends IntrinsicElement
+  ? NativeElements[T]
+  : T extends Component<infer Props>
+  ? Props
+  : never
+
+type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
+>
 
-  export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+interface JsxFactory {
+  <T extends ElementType>(component: T): ${componentName}<T>
+}
+
+type JsxElements = { [K in IntrinsicElement]: ${componentName}<K> }
+
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
-  export type ${typeName}<T extends ElementType> = ComponentProps<T>
+export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
   };
 }
@@ -2868,7 +2640,7 @@ var composition_d_ts_default = {
 
 // 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  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 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"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -2927,9 +2699,12 @@ var generateTypesEntry = (ctx) => ({
       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: outdent39`
     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")}
 
     `,
@@ -2974,9 +2749,9 @@ function generatePropTypes(ctx) {
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-    ? ConditionalValue<PropertyTypes[T]${strictText} | (string & {})>
+    ? ConditionalValue<PropertyTypes[T]${strictText}${!ctx.config.strictTokens ? " | (string & {})" : ""}>
     : T extends keyof CssProperties
-    ? ConditionalValue<CssProperties[T] | (string & {})>
+    ? ConditionalValue<CssProperties[T]${!ctx.config.strictTokens ? " | (string & {})" : ""}>
     : ConditionalValue<string | number>
   `;
 }
@@ -3211,12 +2986,12 @@ function setupJsx(ctx) {
   `,
     dts: outdent43`
   ${ctx.file.exportTypeStar("./factory")}
-  
+
   ${isValidProp?.dts ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
-  
+
   ${outdent43.string(patterns.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))}
-  
-  ${ctx.file.exportType(ctx.jsx.typeName, "../types/jsx")}
+
+  ${ctx.file.exportType([ctx.jsx.typeName, ctx.jsx.componentName].join(", "), "../types/jsx")}
     `
   };
   return {
@@ -3363,7 +3138,7 @@ var generateParserCss = (ctx) => (result) => pipe(
     });
     result2.jsx.forEach((jsx) => {
       jsx.data.forEach((data) => {
-        sheet.processStyleProps(data);
+        sheet.processStyleProps(filterProps(ctx, data));
       });
     });
     result2.recipe.forEach((recipeSet, recipeName) => {
@@ -3375,7 +3150,7 @@ var generateParserCss = (ctx) => (result) => pipe(
           match10(recipe).with({ type: "jsx-recipe" }, () => {
             recipe.data.forEach((data) => {
               const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
-              sheet.processStyleProps(styleProps);
+              sheet.processStyleProps(filterProps(ctx, styleProps));
               sheet.processRecipe(recipeName, recipeConfig, recipeProps);
             });
           }).otherwise(() => {
@@ -3395,7 +3170,7 @@ var generateParserCss = (ctx) => (result) => pipe(
             pattern.data.forEach((data) => {
               const fnName = patterns.find(jsxName);
               const styleProps = patterns.transform(fnName, data);
-              sheet.processStyleProps(styleProps);
+              sheet.processStyleProps(filterProps(ctx, styleProps));
             });
           }).otherwise(() => {
             pattern.data.forEach((data) => {
@@ -3420,6 +3195,15 @@ var generateParserCss = (ctx) => (result) => pipe(
     }
   )
 );
+var filterProps = (ctx, props) => {
+  const clone = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (ctx.isValidProperty(key)) {
+      clone[key] = value;
+    }
+  }
+  return clone;
+};
 
 // src/engines/base.ts
 import {
@@ -3461,7 +3245,8 @@ var getBaseEngine = (conf) => {
     tokens,
     config: isTemplateLiteralSyntax ? {} : config.utilities,
     separator: config.separator,
-    shorthands: config.shorthands
+    shorthands: config.shorthands,
+    strictTokens: config.strictTokens
   });
   const conditions = new Conditions({
     conditions: isTemplateLiteralSyntax ? {} : config.conditions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,17 +20,17 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.27",
     "ts-pattern": "5.0.4",
-    "@pandacss/core": "0.13.1",
-    "@pandacss/is-valid-prop": "0.13.1",
-    "@pandacss/logger": "0.13.1",
-    "@pandacss/shared": "0.13.1",
-    "@pandacss/types": "0.13.1",
-    "@pandacss/token-dictionary": "0.13.1"
+    "@pandacss/core": "0.15.0",
+    "@pandacss/is-valid-prop": "0.15.0",
+    "@pandacss/logger": "0.15.0",
+    "@pandacss/shared": "0.15.0",
+    "@pandacss/token-dictionary": "0.15.0",
+    "@pandacss/types": "0.15.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.30",
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.13.1"
+    "@pandacss/fixture": "0.15.0"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",