@pandacss/generator 0.37.2 → 0.38.0

package/dist/index.js

@@ -544,7 +544,7 @@ function generatePattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { baseName, config, dashName, upperName, styleFnName, blocklistType } = pattern;
-    const { properties, transform, strict, description, defaultValues } = config;
+    const { properties, transform, strict, description, defaultValues, deprecated } = config;
     const patternConfigFn = (0, import_javascript_stringify.stringify)((0, import_shared.compact)({ transform, defaultValues })) ?? "";
     const helperImports = ["getPatternStyles, patternFns"];
     if (patternConfigFn.includes("__spreadValues")) {
@@ -589,7 +589,7 @@ function generatePattern(ctx, filters) {
             raw: (styles?: ${upperName}Styles) => SystemStyleObject
           }
 
-          ${description ? `/** ${description} */` : ""}
+          ${ctx.file.jsDocComment(description, { deprecated })}
           export declare const ${baseName}: ${upperName}PatternFn;
           `}
 
@@ -722,7 +722,7 @@ function generateRecipes(ctx, filters) {
   const details = ctx.recipes.filterDetails(filters);
   return details.map((recipe) => {
     const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
-    const { description, defaultVariants, compoundVariants } = config;
+    const { description, defaultVariants, compoundVariants, deprecated } = config;
     const jsCode = (0, import_ts_pattern4.match)(config).when(
       import_core.Recipes.isSlotRecipeConfig,
       (config2) => import_outdent11.outdent`
@@ -818,7 +818,7 @@ function generateRecipes(ctx, filters) {
           getVariantProps: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
         }
 
-        ${description ? `/** ${description} */` : ""}
+        ${ctx.file.jsDocComment(description, { deprecated })}
         export declare const ${baseName}: ${upperName}Recipe
         `
     };
@@ -963,13 +963,13 @@ function generatePreactJsxFactory(ctx) {
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.class, combinedProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
+          return cx(css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.class, combinedProps.className)
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -1022,7 +1022,7 @@ function generatePreactJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: import_outdent15.outdent`
@@ -1076,7 +1076,7 @@ function generatePreactJsxPattern(ctx, filters) {
 
       export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
-      ${description ? `/** ${description} */` : ""}
+      ${ctx.file.jsDocComment(description, { deprecated })}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
       `
     };
@@ -1291,13 +1291,13 @@ function generateQwikJsxFactory(ctx) {
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.class, className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, className)
+          return cx(css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.class, className)
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -1350,7 +1350,7 @@ function generateQwikJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: import_outdent20.outdent`
@@ -1403,7 +1403,7 @@ function generateQwikJsxPattern(ctx, filters) {
 
       export interface ${upperName}Props extends Assign<${typeName}<'${jsxElement}'>, DistributiveOmit<${upperName}Properties, ${blocklistType || '""'}>> {}
 
-      ${description ? `/** ${description} */` : ""}
+      ${ctx.file.jsDocComment(description, { deprecated })}
       export declare const ${jsxName}: Component<${upperName}Props>
       `
     };
@@ -1624,13 +1624,13 @@ function generateReactJsxFactory(ctx) {
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
+          return cx(css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.className)
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -1684,7 +1684,7 @@ function generateReactJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: import_outdent25.outdent`
@@ -1737,7 +1737,7 @@ function generateReactJsxPattern(ctx, filters) {
 
       export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
-      ${description ? `/** ${description} */` : ""}
+      ${ctx.file.jsDocComment(description, { deprecated })}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
       `
     };
@@ -1987,7 +1987,7 @@ function generateSolidJsxFactory(ctx) {
             __cvaFn__.__getCompoundVariantCss__?.(variantProps)
           return cx(
             __cvaFn__(variantProps, false),
-            css(compoundVariantStyles, propStyles, cssStyles),
+            css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])),
             localProps.class,
             localProps.className
           )
@@ -1997,7 +1997,7 @@ function generateSolidJsxFactory(ctx) {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(
-            css(cvaStyles, propStyles, cssStyles),
+            css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])),
             localProps.class,
             localProps.className
           )
@@ -2061,7 +2061,7 @@ function generateSolidJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: import_outdent30.outdent`
@@ -2116,7 +2116,7 @@ function generateSolidJsxPattern(ctx, filters) {
 
     export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
-    ${description ? `/** ${description} */` : ""}
+    ${ctx.file.jsDocComment(description, { deprecated })}
     export declare const ${jsxName}: Component<${upperName}Props>
     `
     };
@@ -2341,14 +2341,14 @@ function generateVueJsxFactory(ctx) {
             const [_htmlProps, _forwardedProps, variantProps, styleProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
             const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
-            return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
+            return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.value.className, combinedProps.value.class)
           })
 
           const cvaClass = computed(() => {
             const [_htmlProps, _forwardedProps, variantProps, styleProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
             const cvaStyles = __cvaFn__.raw(variantProps)
-            return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
+            return cx(css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.value.className, combinedProps.value.class)
           })
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -2516,7 +2516,7 @@ function generateVueJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: import_outdent36.outdent`
@@ -2577,7 +2577,7 @@ function generateVueJsxPattern(ctx, filters) {
 
     export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
-    ${description ? `/** ${description} */` : ""}
+    ${ctx.file.jsDocComment(description, { deprecated })}
     export declare const ${jsxName}: FunctionalComponent<${upperName}Props>
     `
     };
@@ -3517,12 +3517,12 @@ var parts_d_ts_default = {
 
 // 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 interface PatternHelpers {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n  isCssUnit: (value: any) => boolean\n  isCssVar: (value: any) => boolean\n  isCssFunction: (value: any) => boolean\n}\n\nexport interface PatternProperties {\n  [key: string]: PatternProperty\n}\n\ntype InferProps<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternDefaultValue<T> = Partial<InferProps<T>>\n\nexport type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>\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 default values of the pattern.\n   */\n  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: InferProps<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  isCssUnit: (value: any) => boolean\n  isCssVar: (value: any) => boolean\n  isCssFunction: (value: any) => boolean\n}\n\nexport interface PatternProperties {\n  [key: string]: PatternProperty\n}\n\ntype InferProps<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternDefaultValue<T> = Partial<InferProps<T>>\n\nexport type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>\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 default values of the pattern.\n   */\n  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * Whether the pattern is deprecated.\n   */\n  deprecated?: boolean | string\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/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\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]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\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  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = 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\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?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The class 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   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\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>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * An optional class name that can be used to target slots in the DOM.\n   */\n  className?: string\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\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?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<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 { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\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]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\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  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * Whether the recipe is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\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?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The class 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   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\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>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * An optional class name that can be used to target slots in the DOM.\n   */\n  className?: string\n  /**\n   * Whether the recipe is deprecated.\n   */\n  deprecated?: boolean | string\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\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?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<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/selectors.d.ts.json
@@ -3537,7 +3537,7 @@ var static_css_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\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\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemStyleObject & WithCss\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\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\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject | SystemStyleObject[]\n}\ntype StyleProps = SystemStyleObject & WithCss\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/types/generated.ts
@@ -3618,7 +3618,7 @@ function generatePropTypes(ctx) {
   const { utility } = ctx;
   const result = [
     import_outdent40.outdent`
-    ${ctx.file.importType("Conditional", "./conditions")}
+    ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("CssProperties", "./system-types")}
     ${ctx.file.importType("Tokens", "../tokens/index")}
 
@@ -3719,7 +3719,10 @@ function generateStyleProps(ctx) {
     if (!filtered.length) {
       filtered.push("string | number");
     }
-    const comment = csstype_d_ts_default.comments?.[prop] || "";
+    let comment = csstype_d_ts_default.comments?.[prop] || "";
+    if (ctx.utility.isDeprecated(prop)) {
+      comment = comment ? comment.replace("@see", "@deprecated\n@see") : "/** @deprecated */";
+    }
     const value = filtered.filter(Boolean).join(" | ");
     const line = `${key}?: ${restrict(prop, value, ctx.config)}`;
     return " " + [comment, line].filter(Boolean).join("\n");
@@ -4580,7 +4583,7 @@ function generateResetCss(ctx, sheet) {
     selector = `&${scope}`;
   }
   const scoped = {
-    "*, ::before, ::after, ::backdrop, ::first-letter, ::file-selector-button": {
+    "*, ::before, ::after, ::backdrop, ::file-selector-button": {
       margin: "0px",
       padding: "0px",
       boxSizing: "border-box",
@@ -4635,10 +4638,6 @@ function generateResetCss(ctx, sheet) {
       "--placeholder-fallback": "color-mix(in srgb, currentColor 50%, transparent)",
       color: "var(--global-color-placeholder, var(--placeholder-fallback))"
     },
-    "select, textarea, input:where(:not([type='button'], [type='reset'], [type='submit']))": {
-      borderWidth: "1px",
-      borderStyle: "solid"
-    },
     textarea: {
       resize: "vertical"
     },

package/dist/index.mjs

@@ -508,7 +508,7 @@ function generatePattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { baseName, config, dashName, upperName, styleFnName, blocklistType } = pattern;
-    const { properties, transform, strict, description, defaultValues } = config;
+    const { properties, transform, strict, description, defaultValues, deprecated } = config;
     const patternConfigFn = stringify(compact({ transform, defaultValues })) ?? "";
     const helperImports = ["getPatternStyles, patternFns"];
     if (patternConfigFn.includes("__spreadValues")) {
@@ -553,7 +553,7 @@ function generatePattern(ctx, filters) {
             raw: (styles?: ${upperName}Styles) => SystemStyleObject
           }
 
-          ${description ? `/** ${description} */` : ""}
+          ${ctx.file.jsDocComment(description, { deprecated })}
           export declare const ${baseName}: ${upperName}PatternFn;
           `}
 
@@ -686,7 +686,7 @@ function generateRecipes(ctx, filters) {
   const details = ctx.recipes.filterDetails(filters);
   return details.map((recipe) => {
     const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
-    const { description, defaultVariants, compoundVariants } = config;
+    const { description, defaultVariants, compoundVariants, deprecated } = config;
     const jsCode = match4(config).when(
       Recipes.isSlotRecipeConfig,
       (config2) => outdent11`
@@ -782,7 +782,7 @@ function generateRecipes(ctx, filters) {
           getVariantProps: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
         }
 
-        ${description ? `/** ${description} */` : ""}
+        ${ctx.file.jsDocComment(description, { deprecated })}
         export declare const ${baseName}: ${upperName}Recipe
         `
     };
@@ -927,13 +927,13 @@ function generatePreactJsxFactory(ctx) {
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.class, combinedProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
+          return cx(css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.class, combinedProps.className)
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -986,7 +986,7 @@ function generatePreactJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: outdent15`
@@ -1040,7 +1040,7 @@ function generatePreactJsxPattern(ctx, filters) {
 
       export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
-      ${description ? `/** ${description} */` : ""}
+      ${ctx.file.jsDocComment(description, { deprecated })}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
       `
     };
@@ -1255,13 +1255,13 @@ function generateQwikJsxFactory(ctx) {
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.class, className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, className)
+          return cx(css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.class, className)
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -1314,7 +1314,7 @@ function generateQwikJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: outdent20`
@@ -1367,7 +1367,7 @@ function generateQwikJsxPattern(ctx, filters) {
 
       export interface ${upperName}Props extends Assign<${typeName}<'${jsxElement}'>, DistributiveOmit<${upperName}Properties, ${blocklistType || '""'}>> {}
 
-      ${description ? `/** ${description} */` : ""}
+      ${ctx.file.jsDocComment(description, { deprecated })}
       export declare const ${jsxName}: Component<${upperName}Props>
       `
     };
@@ -1588,13 +1588,13 @@ function generateReactJsxFactory(ctx) {
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
+          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
+          return cx(css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.className)
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -1648,7 +1648,7 @@ function generateReactJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: outdent25`
@@ -1701,7 +1701,7 @@ function generateReactJsxPattern(ctx, filters) {
 
       export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
-      ${description ? `/** ${description} */` : ""}
+      ${ctx.file.jsDocComment(description, { deprecated })}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
       `
     };
@@ -1951,7 +1951,7 @@ function generateSolidJsxFactory(ctx) {
             __cvaFn__.__getCompoundVariantCss__?.(variantProps)
           return cx(
             __cvaFn__(variantProps, false),
-            css(compoundVariantStyles, propStyles, cssStyles),
+            css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])),
             localProps.class,
             localProps.className
           )
@@ -1961,7 +1961,7 @@ function generateSolidJsxFactory(ctx) {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = __cvaFn__.raw(variantProps)
           return cx(
-            css(cvaStyles, propStyles, cssStyles),
+            css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])),
             localProps.class,
             localProps.className
           )
@@ -2025,7 +2025,7 @@ function generateSolidJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: outdent30`
@@ -2080,7 +2080,7 @@ function generateSolidJsxPattern(ctx, filters) {
 
     export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
-    ${description ? `/** ${description} */` : ""}
+    ${ctx.file.jsDocComment(description, { deprecated })}
     export declare const ${jsxName}: Component<${upperName}Props>
     `
     };
@@ -2305,14 +2305,14 @@ function generateVueJsxFactory(ctx) {
             const [_htmlProps, _forwardedProps, variantProps, styleProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
             const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
-            return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
+            return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.value.className, combinedProps.value.class)
           })
 
           const cvaClass = computed(() => {
             const [_htmlProps, _forwardedProps, variantProps, styleProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
             const cvaStyles = __cvaFn__.raw(variantProps)
-            return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
+            return cx(css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.value.className, combinedProps.value.class)
           })
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -2480,7 +2480,7 @@ function generateVueJsxPattern(ctx, filters) {
   const details = ctx.patterns.filterDetails(filters);
   return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-    const { description, jsxElement = "div" } = pattern.config;
+    const { description, jsxElement = "div", deprecated } = pattern.config;
     return {
       name: dashName,
       js: outdent36`
@@ -2541,7 +2541,7 @@ function generateVueJsxPattern(ctx, filters) {
 
     export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
 
-    ${description ? `/** ${description} */` : ""}
+    ${ctx.file.jsDocComment(description, { deprecated })}
     export declare const ${jsxName}: FunctionalComponent<${upperName}Props>
     `
     };
@@ -3481,12 +3481,12 @@ var parts_d_ts_default = {
 
 // 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 interface PatternHelpers {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n  isCssUnit: (value: any) => boolean\n  isCssVar: (value: any) => boolean\n  isCssFunction: (value: any) => boolean\n}\n\nexport interface PatternProperties {\n  [key: string]: PatternProperty\n}\n\ntype InferProps<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternDefaultValue<T> = Partial<InferProps<T>>\n\nexport type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>\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 default values of the pattern.\n   */\n  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: InferProps<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  isCssUnit: (value: any) => boolean\n  isCssVar: (value: any) => boolean\n  isCssFunction: (value: any) => boolean\n}\n\nexport interface PatternProperties {\n  [key: string]: PatternProperty\n}\n\ntype InferProps<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternDefaultValue<T> = Partial<InferProps<T>>\n\nexport type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>\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 default values of the pattern.\n   */\n  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * Whether the pattern is deprecated.\n   */\n  deprecated?: boolean | string\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/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\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]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\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  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = 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\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?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The class 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   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\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>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * An optional class name that can be used to target slots in the DOM.\n   */\n  className?: string\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\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?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<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 { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\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]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\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  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * Whether the recipe is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\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?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The class 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   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\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>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * An optional class name that can be used to target slots in the DOM.\n   */\n  className?: string\n  /**\n   * Whether the recipe is deprecated.\n   */\n  deprecated?: boolean | string\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\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?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<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/selectors.d.ts.json
@@ -3501,7 +3501,7 @@ var static_css_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\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\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemStyleObject & WithCss\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\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\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject | SystemStyleObject[]\n}\ntype StyleProps = SystemStyleObject & WithCss\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/types/generated.ts
@@ -3582,7 +3582,7 @@ function generatePropTypes(ctx) {
   const { utility } = ctx;
   const result = [
     outdent40`
-    ${ctx.file.importType("Conditional", "./conditions")}
+    ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("CssProperties", "./system-types")}
     ${ctx.file.importType("Tokens", "../tokens/index")}
 
@@ -3683,7 +3683,10 @@ function generateStyleProps(ctx) {
     if (!filtered.length) {
       filtered.push("string | number");
     }
-    const comment = csstype_d_ts_default.comments?.[prop] || "";
+    let comment = csstype_d_ts_default.comments?.[prop] || "";
+    if (ctx.utility.isDeprecated(prop)) {
+      comment = comment ? comment.replace("@see", "@deprecated\n@see") : "/** @deprecated */";
+    }
     const value = filtered.filter(Boolean).join(" | ");
     const line = `${key}?: ${restrict(prop, value, ctx.config)}`;
     return " " + [comment, line].filter(Boolean).join("\n");
@@ -4544,7 +4547,7 @@ function generateResetCss(ctx, sheet) {
     selector = `&${scope}`;
   }
   const scoped = {
-    "*, ::before, ::after, ::backdrop, ::first-letter, ::file-selector-button": {
+    "*, ::before, ::after, ::backdrop, ::file-selector-button": {
       margin: "0px",
       padding: "0px",
       boxSizing: "border-box",
@@ -4599,10 +4602,6 @@ function generateResetCss(ctx, sheet) {
       "--placeholder-fallback": "color-mix(in srgb, currentColor 50%, transparent)",
       color: "var(--global-color-placeholder, var(--placeholder-fallback))"
     },
-    "select, textarea, input:where(:not([type='button'], [type='reset'], [type='submit']))": {
-      borderWidth: "1px",
-      borderStyle: "solid"
-    },
     textarea: {
       resize: "vertical"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.37.2",
+  "version": "0.38.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.35",
     "ts-pattern": "5.0.8",
-    "@pandacss/core": "0.37.2",
-    "@pandacss/is-valid-prop": "^0.37.2",
-    "@pandacss/logger": "0.37.2",
-    "@pandacss/shared": "0.37.2",
-    "@pandacss/token-dictionary": "0.37.2",
-    "@pandacss/types": "0.37.2"
+    "@pandacss/core": "0.38.0",
+    "@pandacss/is-valid-prop": "^0.38.0",
+    "@pandacss/logger": "0.38.0",
+    "@pandacss/shared": "0.38.0",
+    "@pandacss/token-dictionary": "0.38.0",
+    "@pandacss/types": "0.38.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"