chore(style-context): initial tests

Author: segunadebayo

packages/core/__tests__/static-css.test.ts

@@ -1911,6 +1911,11 @@ describe('static-css', () => {
             background: red.300;
             border-radius: var(--radii-sm);
       }
+
+          .popover__content {
+            background: white;
+            box-shadow: var(--shadows-md);
+      }
       }
 
         .checkbox__control--size_sm {
@@ -1953,6 +1958,24 @@ describe('static-css', () => {
         .badge__title--raised_true {
           box-shadow: var(--shadows-md);
       }
+
+        .popover__content--size_sm {
+          padding: 2px;
+          font-size: var(--font-sizes-sm);
+          max-width: 200px;
+      }
+
+        .popover__content--size_md {
+          padding: 4px;
+          font-size: var(--font-sizes-md);
+          max-width: 300px;
+      }
+
+        .popover__content--size_lg {
+          padding: 6px;
+          font-size: var(--font-sizes-lg);
+          max-width: 400px;
+      }
       }
 
       @layer utilities {
@@ -2046,6 +2069,24 @@ describe('static-css', () => {
                 "raised": "true",
               },
             },
+            {
+              "popover": {},
+            },
+            {
+              "popover": {
+                "size": "sm",
+              },
+            },
+            {
+              "popover": {
+                "size": "md",
+              },
+            },
+            {
+              "popover": {
+                "size": "lg",
+              },
+            },
           ],
         },
       }

packages/core/__tests__/style-encoder.test.ts

@@ -767,6 +767,11 @@ describe('style encoder', () => {
               "size]___[value:md]___[recipe:checkbox",
               "size]___[value:lg]___[recipe:checkbox",
             ],
+            "popover": [
+              "size]___[value:sm]___[recipe:popover",
+              "size]___[value:md]___[recipe:popover",
+              "size]___[value:lg]___[recipe:popover",
+            ],
             "textStyle": [
               "size]___[value:h1]___[recipe:textStyle",
               "size]___[value:h2]___[recipe:textStyle",

packages/core/package.json

@@ -43,7 +43,7 @@
     "@pandacss/shared": "workspace:*",
     "@pandacss/token-dictionary": "workspace:*",
     "@pandacss/types": "workspace:*",
-    "browserslist": "4.23.3",
+    "browserslist": "4.26.0",
     "hookable": "5.5.3",
     "lightningcss": "1.25.1",
     "lodash.merge": "4.6.2",

packages/fixture/src/slot-recipes.ts

@@ -58,4 +58,39 @@ export const slotRecipes: Record<string, SlotRecipeConfig> = {
       },
     ],
   },
+  popover: {
+    className: 'popover',
+    slots: ['root', 'content'],
+    base: {
+      content: {
+        bg: 'white',
+        boxShadow: 'md',
+      },
+    },
+    variants: {
+      size: {
+        sm: {
+          content: {
+            padding: '2',
+            fontSize: 'sm',
+            maxWidth: '200px',
+          },
+        },
+        md: {
+          content: {
+            padding: '4',
+            fontSize: 'md',
+            maxWidth: '300px',
+          },
+        },
+        lg: {
+          content: {
+            padding: '6',
+            fontSize: 'lg',
+            maxWidth: '400px',
+          },
+        },
+      },
+    },
+  },
 }

packages/generator/__tests__/generate-recipe.test.ts

@@ -542,6 +542,84 @@ describe('generate recipes', () => {
       })",
           "name": "badge",
         },
+        {
+          "dts": "import type { ConditionalValue } from '../types/index';
+      import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+      interface PopoverVariant {
+        size: "sm" | "md" | "lg"
+      }
+
+      type PopoverVariantMap = {
+        [key in keyof PopoverVariant]: Array<PopoverVariant[key]>
+      }
+
+      type PopoverSlot = "root" | "content"
+
+      export type PopoverVariantProps = {
+        [key in keyof PopoverVariant]?: ConditionalValue<PopoverVariant[key]> | undefined
+      }
+
+      export interface PopoverRecipe {
+        __slot: PopoverSlot
+        __type: PopoverVariantProps
+        (props?: PopoverVariantProps): Pretty<Record<PopoverSlot, string>>
+        raw: (props?: PopoverVariantProps) => PopoverVariantProps
+        variantMap: PopoverVariantMap
+        variantKeys: Array<keyof PopoverVariant>
+        splitVariantProps<Props extends PopoverVariantProps>(props: Props): [PopoverVariantProps, Pretty<DistributiveOmit<Props, keyof PopoverVariantProps>>]
+        getVariantProps: (props?: PopoverVariantProps) => PopoverVariantProps
+      }
+
+
+      export declare const popover: PopoverRecipe",
+          "js": "import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+      import { createRecipe } from './create-recipe.mjs';
+
+      const popoverDefaultVariants = {}
+      const popoverCompoundVariants = []
+
+      const popoverSlotNames = [
+        [
+          "root",
+          "popover__root"
+        ],
+        [
+          "content",
+          "popover__content"
+        ]
+      ]
+      const popoverSlotFns = /* @__PURE__ */ popoverSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, popoverDefaultVariants, getSlotCompoundVariant(popoverCompoundVariants, slotName))])
+
+      const popoverFn = memo((props = {}) => {
+        return Object.fromEntries(popoverSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+      })
+
+      const popoverVariantKeys = [
+        "size"
+      ]
+      const getVariantProps = (variants) => ({ ...popoverDefaultVariants, ...compact(variants) })
+
+      export const popover = /* @__PURE__ */ Object.assign(popoverFn, {
+        __recipe__: false,
+        __name__: 'popover',
+        raw: (props) => props,
+        classNameMap: {},
+        variantKeys: popoverVariantKeys,
+        variantMap: {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+        splitVariantProps(props) {
+          return splitProps(props, popoverVariantKeys)
+        },
+        getVariantProps
+      })",
+          "name": "popover",
+        },
       ]
     `)
   })

packages/generator/__tests__/setup-artifacts.test.ts

@@ -46,6 +46,8 @@ describe('setup-artifacts', () => {
           "recipes/checkbox.d.ts",
           "recipes/badge.mjs",
           "recipes/badge.d.ts",
+          "recipes/popover.mjs",
+          "recipes/popover.d.ts",
         ],
       ]
     `)
@@ -201,6 +203,8 @@ describe('setup-artifacts', () => {
           "recipes/checkbox.d.ts",
           "recipes/badge.mjs",
           "recipes/badge.d.ts",
+          "recipes/popover.mjs",
+          "recipes/popover.d.ts",
         ],
         [
           "patterns/index.mjs",

packages/node/package.json

@@ -46,7 +46,7 @@
     "@pandacss/shared": "workspace:*",
     "@pandacss/token-dictionary": "workspace:*",
     "@pandacss/types": "workspace:*",
-    "browserslist": "4.23.3",
+    "browserslist": "4.26.0",
     "chokidar": "4.0.3",
     "fast-glob": "3.3.3",
     "fs-extra": "11.2.0",