npm - @pandacss/generator - Versions diffs - 0.37.1 → 0.38.0 - Mend

@pandacss/generator 0.37.1 → 0.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -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,11 +722,11 @@ 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`
-        ${ctx.file.import("getSlotCompoundVariant, memo, splitProps", "../helpers")}
+        ${ctx.file.import("compact, getSlotCompoundVariant, memo, splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
         const ${baseName}DefaultVariants = ${stringify2(defaultVariants ?? {})}
@@ -740,6 +740,7 @@ function generateRecipes(ctx, filters) {
         })
         const ${baseName}VariantKeys = ${stringify2(Object.keys(variantKeyMap))}
+        const getVariantProps = (variants) => ({ ...${baseName}DefaultVariants, ...compact(variants) })
         export const ${baseName} = /* @__PURE__ */ Object.assign(${baseName}Fn, {
           __recipe__: false,
@@ -750,6 +751,7 @@ function generateRecipes(ctx, filters) {
           splitVariantProps(props) {
             return splitProps(props, ${baseName}VariantKeys)
           },
+          getVariantProps
         })
         `
     ).otherwise(
@@ -816,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
         `
     };
@@ -828,7 +830,7 @@ var import_outdent12 = require("outdent");
 function generateSvaFn(ctx) {
   return {
     js: import_outdent12.outdent`
-    ${ctx.file.import("getSlotRecipes, memo, splitProps", "../helpers")}
+    ${ctx.file.import("compact, getSlotRecipes, memo, splitProps", "../helpers")}
     ${ctx.file.import("cva", "./cva")}
     ${ctx.file.import("cx", "./cx")}
@@ -836,6 +838,7 @@ function generateSvaFn(ctx) {
     export function sva(config) {
       const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
+      const defaultVariants = config.defaultVariants ?? {}
       function svaFn(props) {
         const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))])
@@ -853,6 +856,7 @@ function generateSvaFn(ctx) {
       function splitVariantProps(props) {
         return splitProps(props, variantKeys);
       }
+      const getVariantProps = (variants) => ({ ...(defaultVariants || {}), ...compact(variants) })
       const variantMap = Object.fromEntries(
         Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
@@ -864,6 +868,7 @@ function generateSvaFn(ctx) {
         variantMap,
         variantKeys,
         splitVariantProps,
+        getVariantProps,
       })
     }
     `,
@@ -958,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
@@ -1017,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`
@@ -1071,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>
       `
     };
@@ -1286,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
@@ -1345,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`
@@ -1398,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>
       `
     };
@@ -1619,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
@@ -1679,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`
@@ -1732,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>
       `
     };
@@ -1982,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
           )
@@ -1992,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
           )
@@ -2056,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`
@@ -2111,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>
     `
     };
@@ -2336,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
@@ -2511,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`
@@ -2572,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>
     `
     };
@@ -3512,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  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
@@ -3532,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
@@ -3613,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")}
@@ -3632,7 +3637,7 @@ function generatePropTypes(ctx) {
   type ImportantMark = "!" | "!important"
   type WhitespaceImportant = \` \${ImportantMark}\`
   type Important = ImportantMark | WhitespaceImportant
-  type WithImportant<T> = T extends string ? \`\${T}\${Important}\${string}\` : T
+  type WithImportant<T> = T extends string ? \`\${T}\${Important}\` & { __important?: true } : T;
   /**
    * Only relevant when using \`strictTokens\` or \`strictPropertyValues\` in your config.
@@ -3650,7 +3655,7 @@ function generatePropTypes(ctx) {
    * @see https://panda-css.com/docs/concepts/writing-styles#stricttokens
    * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
    */
-  export type WithEscapeHatch<T> = T | \`[\${string}]\` | (T extends string ? WithColorOpacityModifier<string> | WithImportant<T> : T)
+  export type WithEscapeHatch<T> = T | \`[\${string}]\` | WithColorOpacityModifier<T> | WithImportant<T>
   /**
    * Will restrict the value of properties that have predefined values to those values only.
@@ -3714,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");
@@ -4575,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",
@@ -4630,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 CHANGED Viewed

@@ -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,11 +686,11 @@ 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`
-        ${ctx.file.import("getSlotCompoundVariant, memo, splitProps", "../helpers")}
+        ${ctx.file.import("compact, getSlotCompoundVariant, memo, splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
         const ${baseName}DefaultVariants = ${stringify2(defaultVariants ?? {})}
@@ -704,6 +704,7 @@ function generateRecipes(ctx, filters) {
         })
         const ${baseName}VariantKeys = ${stringify2(Object.keys(variantKeyMap))}
+        const getVariantProps = (variants) => ({ ...${baseName}DefaultVariants, ...compact(variants) })
         export const ${baseName} = /* @__PURE__ */ Object.assign(${baseName}Fn, {
           __recipe__: false,
@@ -714,6 +715,7 @@ function generateRecipes(ctx, filters) {
           splitVariantProps(props) {
             return splitProps(props, ${baseName}VariantKeys)
           },
+          getVariantProps
         })
         `
     ).otherwise(
@@ -780,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
         `
     };
@@ -792,7 +794,7 @@ import { outdent as outdent12 } from "outdent";
 function generateSvaFn(ctx) {
   return {
     js: outdent12`
-    ${ctx.file.import("getSlotRecipes, memo, splitProps", "../helpers")}
+    ${ctx.file.import("compact, getSlotRecipes, memo, splitProps", "../helpers")}
     ${ctx.file.import("cva", "./cva")}
     ${ctx.file.import("cx", "./cx")}
@@ -800,6 +802,7 @@ function generateSvaFn(ctx) {
     export function sva(config) {
       const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
+      const defaultVariants = config.defaultVariants ?? {}
       function svaFn(props) {
         const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))])
@@ -817,6 +820,7 @@ function generateSvaFn(ctx) {
       function splitVariantProps(props) {
         return splitProps(props, variantKeys);
       }
+      const getVariantProps = (variants) => ({ ...(defaultVariants || {}), ...compact(variants) })
       const variantMap = Object.fromEntries(
         Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
@@ -828,6 +832,7 @@ function generateSvaFn(ctx) {
         variantMap,
         variantKeys,
         splitVariantProps,
+        getVariantProps,
       })
     }
     `,
@@ -922,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
@@ -981,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`
@@ -1035,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>
       `
     };
@@ -1250,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
@@ -1309,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`
@@ -1362,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>
       `
     };
@@ -1583,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
@@ -1643,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`
@@ -1696,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>
       `
     };
@@ -1946,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
           )
@@ -1956,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
           )
@@ -2020,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`
@@ -2075,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>
     `
     };
@@ -2300,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
@@ -2475,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`
@@ -2536,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>
     `
     };
@@ -3476,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  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
@@ -3496,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
@@ -3577,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")}
@@ -3596,7 +3601,7 @@ function generatePropTypes(ctx) {
   type ImportantMark = "!" | "!important"
   type WhitespaceImportant = \` \${ImportantMark}\`
   type Important = ImportantMark | WhitespaceImportant
-  type WithImportant<T> = T extends string ? \`\${T}\${Important}\${string}\` : T
+  type WithImportant<T> = T extends string ? \`\${T}\${Important}\` & { __important?: true } : T;
   /**
    * Only relevant when using \`strictTokens\` or \`strictPropertyValues\` in your config.
@@ -3614,7 +3619,7 @@ function generatePropTypes(ctx) {
    * @see https://panda-css.com/docs/concepts/writing-styles#stricttokens
    * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
    */
-  export type WithEscapeHatch<T> = T | \`[\${string}]\` | (T extends string ? WithColorOpacityModifier<string> | WithImportant<T> : T)
+  export type WithEscapeHatch<T> = T | \`[\${string}]\` | WithColorOpacityModifier<T> | WithImportant<T>
   /**
    * Will restrict the value of properties that have predefined values to those values only.
@@ -3678,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");
@@ -4539,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",
@@ -4594,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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.37.1",
+  "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.1",
-    "@pandacss/is-valid-prop": "^0.37.1",
-    "@pandacss/logger": "0.37.1",
-    "@pandacss/shared": "0.37.1",
-    "@pandacss/token-dictionary": "0.37.1",
-    "@pandacss/types": "0.37.1"
+    "@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"