@pandacss/generator 0.0.0-dev-20230421141155 → 0.0.0-dev-20230421145003

package/dist/index.js

@@ -705,6 +705,7 @@ transform`)}
 // src/artifacts/js/recipe.ts
 var import_shared2 = require("@pandacss/shared");
 var import_outdent9 = require("outdent");
+var stringify3 = (value) => JSON.stringify(value, null, 2);
 function generateRecipes(ctx) {
   const {
     recipes,
@@ -764,15 +765,21 @@ function generateRecipes(ctx) {
       return {
         name: dashName,
         js: import_outdent9.outdent`
+        ${ctx.file.import("splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
-        export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})}, ${JSON.stringify(
+        export const ${name} = createRecipe('${name}', ${stringify3(defaultVariants ?? {})}, ${stringify3(
           compoundVariants ?? []
         )})
-        ${name}.variants = ${JSON.stringify(variantKeyMap)}
+
+        ${name}.variants = ${stringify3(variantKeyMap)}
+        
+        const variantKeys = ${stringify3(Object.keys(variantKeyMap))}
+        ${name}.splitVariantProps = (props) => splitProps(props, variantKeys)
         `,
         dts: import_outdent9.outdent`
         import type { ConditionalValue } from '../types'
+        import type { Pretty } from '../types/helpers'
 
         type ${upperName}Variant = {
           ${Object.keys(variantKeyMap).map((key) => `${key}: ${(0, import_shared2.unionType)(variantKeyMap[key])}`).join("\n")}
@@ -782,14 +789,18 @@ function generateRecipes(ctx) {
           [key in keyof ${upperName}Variant]: Array<${upperName}Variant[key]>
         }
 
-        export type ${upperName}Variants = {
+        export type ${upperName}VariantProps = {
           [key in keyof ${upperName}Variant]?: ${compoundVariants?.length ? `${upperName}Variant[key]` : `ConditionalValue<${upperName}Variant[key]>`}
         }
 
-        ${description ? `/** ${description} */` : ""}
-        export declare function ${name}(variants?: ${upperName}Variants): string & {
+        interface ${upperName}Recipe {
+          (variants?: ${upperName}Variants): string
           variants: ${upperName}VariantMap
+          splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<Omit<Props, keyof ${upperName}VariantProps>>]
         }
+
+        ${description ? `/** ${description} */` : ""}
+        export declare const ${name}: ${upperName}Recipe
         `
       };
     })
@@ -1851,7 +1862,10 @@ var generateTypesEntry = () => ({
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
-    `
+    `,
+  helpers: import_outdent26.outdent`
+  export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
+  `
 });
 
 // src/artifacts/types/prop-types.ts
@@ -2052,6 +2066,7 @@ function setupTypes(ctx) {
       { file: "selectors.d.ts", code: gen.selectors },
       { file: "composition.d.ts", code: gen.composition },
       { file: "global.d.ts", code: entry.global },
+      { file: "helpers.d.ts", code: entry.helpers },
       { file: "recipe.d.ts", code: gen.recipe },
       { file: "pattern.d.ts", code: gen.pattern },
       { file: "parts.d.ts", code: gen.parts },

package/dist/index.mjs

@@ -674,6 +674,7 @@ transform`)}
 // src/artifacts/js/recipe.ts
 import { unionType as unionType2 } from "@pandacss/shared";
 import { outdent as outdent9 } from "outdent";
+var stringify3 = (value) => JSON.stringify(value, null, 2);
 function generateRecipes(ctx) {
   const {
     recipes,
@@ -733,15 +734,21 @@ function generateRecipes(ctx) {
       return {
         name: dashName,
         js: outdent9`
+        ${ctx.file.import("splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
-        export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})}, ${JSON.stringify(
+        export const ${name} = createRecipe('${name}', ${stringify3(defaultVariants ?? {})}, ${stringify3(
           compoundVariants ?? []
         )})
-        ${name}.variants = ${JSON.stringify(variantKeyMap)}
+
+        ${name}.variants = ${stringify3(variantKeyMap)}
+        
+        const variantKeys = ${stringify3(Object.keys(variantKeyMap))}
+        ${name}.splitVariantProps = (props) => splitProps(props, variantKeys)
         `,
         dts: outdent9`
         import type { ConditionalValue } from '../types'
+        import type { Pretty } from '../types/helpers'
 
         type ${upperName}Variant = {
           ${Object.keys(variantKeyMap).map((key) => `${key}: ${unionType2(variantKeyMap[key])}`).join("\n")}
@@ -751,14 +758,18 @@ function generateRecipes(ctx) {
           [key in keyof ${upperName}Variant]: Array<${upperName}Variant[key]>
         }
 
-        export type ${upperName}Variants = {
+        export type ${upperName}VariantProps = {
           [key in keyof ${upperName}Variant]?: ${compoundVariants?.length ? `${upperName}Variant[key]` : `ConditionalValue<${upperName}Variant[key]>`}
         }
 
-        ${description ? `/** ${description} */` : ""}
-        export declare function ${name}(variants?: ${upperName}Variants): string & {
+        interface ${upperName}Recipe {
+          (variants?: ${upperName}Variants): string
           variants: ${upperName}VariantMap
+          splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<Omit<Props, keyof ${upperName}VariantProps>>]
         }
+
+        ${description ? `/** ${description} */` : ""}
+        export declare const ${name}: ${upperName}Recipe
         `
       };
     })
@@ -1820,7 +1831,10 @@ var generateTypesEntry = () => ({
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
-    `
+    `,
+  helpers: outdent26`
+  export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
+  `
 });
 
 // src/artifacts/types/prop-types.ts
@@ -2021,6 +2035,7 @@ function setupTypes(ctx) {
       { file: "selectors.d.ts", code: gen.selectors },
       { file: "composition.d.ts", code: gen.composition },
       { file: "global.d.ts", code: entry.global },
+      { file: "helpers.d.ts", code: entry.helpers },
       { file: "recipe.d.ts", code: gen.recipe },
       { file: "pattern.d.ts", code: gen.pattern },
       { file: "parts.d.ts", code: gen.parts },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20230421141155",
+  "version": "0.0.0-dev-20230421145003",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,16 +20,16 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.23",
     "ts-pattern": "4.2.2",
-    "@pandacss/core": "0.0.0-dev-20230421141155",
-    "@pandacss/logger": "0.0.0-dev-20230421141155",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230421141155",
-    "@pandacss/shared": "0.0.0-dev-20230421141155",
-    "@pandacss/types": "0.0.0-dev-20230421141155",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230421141155"
+    "@pandacss/core": "0.0.0-dev-20230421145003",
+    "@pandacss/logger": "0.0.0-dev-20230421145003",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230421145003",
+    "@pandacss/shared": "0.0.0-dev-20230421145003",
+    "@pandacss/types": "0.0.0-dev-20230421145003",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230421145003"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.29",
-    "@pandacss/fixture": "0.0.0-dev-20230421141155"
+    "@pandacss/fixture": "0.0.0-dev-20230421145003"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",