@pandacss/studio 0.15.2 → 0.15.4

package/styled-system/styles.css

@@ -11,131 +11,6 @@
 @import './tokens/keyframes.css';
 
 @layer utilities {
-  .w_26px {
-    width: 26px
-    }
-
-  .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
-    grid-template-columns: repeat(2, minmax(0, 1fr))
-    }
-
-  .col-span_span_2 {
-    grid-column: span 2
-    }
-
-  .m_4 {
-    margin: var(--spacing-4)
-    }
-
-  .max-h_300px {
-    max-height: 300px
-    }
-
-  .word-wrap_break-word {
-    word-wrap: break-word
-    }
-
-  .highlighted\:bg_border[data-highlighted] {
-    background: var(--colors-border)
-        }
-
-  .isolation_isolate {
-    isolation: isolate
-    }
-
-  .border-l_solid_1px {
-    border-left: solid 1px
-    }
-
-  .expanded\:transform_rotate\(180deg\):is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
-    transform: rotate(180deg)
-        }
-
-  .transition_all_\.2s_ease {
-    transition: all .2s ease
-    }
-
-  .top_0px {
-    top: 0px
-    }
-
-  .right_0px {
-    right: 0px
-    }
-
-  .pos_absolute {
-    position: absolute
-    }
-
-  .z_2 {
-    z-index: 2
-    }
-
-  .break_break-word {
-    word-break: break-word
-    }
-
-  .grid-cols_80px_repeat\(auto-fit\,_minmax\(30px\,_1fr\)\) {
-    grid-template-columns: 80px repeat(auto-fit, minmax(30px, 1fr))
-    }
-
-  .max-w_14px {
-    max-width: 14px
-    }
-
-  .shrink_0 {
-    flex-shrink: 0
-    }
-
-  .border_1px_solid_token\(colors\.border\) {
-    border: 1px solid var(--colors-border)
-    }
-
-  .text_red\.400 {
-    color: var(--colors-red-400)
-    }
-
-  .fs_75\% {
-    font-size: 75%
-    }
-
-  .leading_0 {
-    line-height: 0
-    }
-
-  .top_-0\.35em {
-    top: -0.35em
-    }
-
-  .ml_1 {
-    margin-left: var(--spacing-1)
-    }
-
-  .bg_card {
-    background-color: var(--colors-card)
-    }
-
-  .p_16 {
-    padding: var(--spacing-16)
-    }
-
-  .mt_1 {
-    margin-top: var(--spacing-1)
-    }
-
-  .select_none {
-    -webkit-user-select: none;
-    user-select: none
-    }
-
-  .px_3 {
-    padding-inline: var(--spacing-3)
-    }
-
-  .h_16 {
-    height: var(--sizes-16)
-    }
-
   .pt_16 {
     padding-top: var(--spacing-16)
     }
@@ -144,10 +19,18 @@
     margin-top: var(--spacing-10)
     }
 
+  .opacity_0\.5 {
+    opacity: 0.5
+    }
+
   .justify_space-between {
     justify-content: space-between
     }
 
+  .p_2 {
+    padding: var(--spacing-2)
+    }
+
   .ring_none {
     outline: var(--borders-none)
     }
@@ -164,22 +47,6 @@
     flex: 1 1 0%
     }
 
-  .w_auto {
-    width: auto
-    }
-
-  .min-w_80px {
-    min-width: 80px
-    }
-
-  .h_40px {
-    height: 40px
-    }
-
-  .mb_2 {
-    margin-bottom: var(--spacing-2)
-    }
-
   .h_10 {
     height: var(--sizes-10)
     }
@@ -224,6 +91,10 @@
     background-image: var(--assets-check)
         }
 
+  .fs_xl {
+    font-size: var(--font-sizes-xl)
+    }
+
   .gap_0\.5 {
     gap: var(--spacing-0\.5)
     }
@@ -417,6 +288,10 @@
     margin-top: var(--spacing-6)
     }
 
+  .transition_all_0\.2s_ease {
+    transition: all 0.2s ease
+    }
+
   .py_24 {
     padding-block: var(--spacing-24)
     }
@@ -441,6 +316,10 @@
     padding: var(--spacing-8)
     }
 
+  .flex-wrap_wrap {
+    flex-wrap: wrap
+    }
+
   .gap_6 {
     gap: var(--spacing-6)
     }
@@ -489,6 +368,10 @@
     border-color: var(--colors-neutral-700)
     }
 
+  .fs_sm {
+    font-size: var(--font-sizes-sm)
+    }
+
   .text_uppercase {
     text-transform: uppercase
     }
@@ -501,10 +384,18 @@
     padding-block: var(--spacing-1\.5)
     }
 
+  .fs_md {
+    font-size: var(--font-sizes-md)
+    }
+
   .currentPage\:text_yellow\.300[aria-current=page] {
     color: var(--colors-yellow-300)
         }
 
+  .mt_8 {
+    margin-top: var(--spacing-8)
+    }
+
   .fs_small {
     font-size: small
     }
@@ -517,6 +408,10 @@
     list-style-type: none
     }
 
+  .p_0 {
+    padding: var(--spacing-0)
+    }
+
   .my_2 {
     margin-block: var(--spacing-2)
     }
@@ -595,6 +490,10 @@
     font-weight: var(--font-weights-medium)
     }
 
+  .cursor_pointer {
+    cursor: pointer
+    }
+
   .\[\&\.active\]\:text_yellow\.300.active {
     color: var(--colors-yellow-300)
         }
@@ -615,164 +514,28 @@
     flex-direction: row
     }
 
-  .border-width_1px {
-    border-width: 1px
-    }
-
-  .self_flex-start {
-    align-self: flex-start
-    }
-
-  .text_inherit {
-    color: inherit
-    }
-
-  .py_20px {
-    padding-block: 20px
-    }
-
-  .p_4px_8px {
-    padding: 4px 8px
-    }
-
-  .\[\&_li\]\:cursor_pointer li {
-    cursor: pointer
-        }
-
-  .list-style_none {
-    list-style: none
-    }
-
-  .p_6 {
-    padding: var(--spacing-6)
-    }
-
-  .cursor_default {
-    cursor: default
-    }
-
-  .px_24 {
-    padding-inline: var(--spacing-24)
-    }
-
-  .w_100\% {
-    width: 100%
-    }
-
-  .w_5 {
-    width: var(--sizes-5)
-    }
-
-  .ml_auto {
-    margin-left: auto
-    }
-
-  .mt_8 {
-    margin-top: var(--spacing-8)
-    }
-
-  .fs_xl {
-    font-size: var(--font-sizes-xl)
-    }
-
-  .p_2 {
-    padding: var(--spacing-2)
-    }
-
-  .bg_gray\.100 {
-    background: var(--colors-gray-100)
-    }
-
-  .border_1px_solid_rgba\(0\,_0\,_0\,_0\.1\) {
-    border: 1px solid rgba(0, 0, 0, 0.1)
-    }
-
-  .fs_md {
-    font-size: var(--font-sizes-md)
-    }
-
-  .ml_2 {
-    margin-left: var(--spacing-2)
-    }
-
-  .d_inline-block {
-    display: inline-block
-    }
-
-  .p_0 {
-    padding: var(--spacing-0)
-    }
-
-  .py_2 {
-    padding-block: var(--spacing-2)
-    }
-
-  .transition_all_0\.2s_ease {
-    transition: all 0.2s ease
-    }
-
   .rounded_md {
     border-radius: var(--radii-md)
     }
 
-  .bg_none {
-    background: none
-    }
-
-  .pt_6 {
-    padding-top: var(--spacing-6)
-    }
-
-  .pl_6 {
-    padding-left: var(--spacing-6)
-    }
-
-  .pr_4 {
-    padding-right: var(--spacing-4)
-    }
-
-  .text_text {
-    color: var(--colors-text)
-    }
-
-  .mb_4 {
-    margin-bottom: var(--spacing-4)
-    }
-
-  .p_20px {
-    padding: 20px
-    }
-
-  .fs_lg {
-    font-size: var(--font-sizes-lg)
-    }
-
-  .d_inline-flex {
-    display: inline-flex
-    }
-
-  .opacity_0\.5 {
-    opacity: 0.5
-    }
-
-  .border-b_1px_solid_transparent {
-    border-bottom: 1px solid transparent
+  .px_2 {
+    padding-inline: var(--spacing-2)
     }
 
-  .cursor_pointer {
-    cursor: pointer
+  .py_2 {
+    padding-block: var(--spacing-2)
     }
 
-  .flex-wrap_wrap {
-    flex-wrap: wrap
+  .border-width_1px {
+    border-width: 1px
     }
 
-  .px_2 {
-    padding-inline: var(--spacing-2)
+  .self_flex-start {
+    align-self: flex-start
     }
 
-  .fs_sm {
-    font-size: var(--font-sizes-sm)
+  .text_inherit {
+    color: inherit
     }
 
   .gap_12 {
@@ -951,10 +714,6 @@
     outline-color: var(--colors-neutral-400)
         }
 
-  .hover\:bg_gray\.100:is(:hover, [data-hover]) {
-    background-color: var(--colors-gray-100)
-        }
-
   .hover\:shadow_lg:is(:hover, [data-hover]) {
     box-shadow: var(--shadows-lg)
         }
@@ -971,34 +730,6 @@
     color: var(--colors-yellow-300)
         }
 
-  .hover\:opacity_0\.8:is(:hover, [data-hover]) {
-    opacity: 0.8
-        }
-
-  .hover\:bg_border:is(:hover, [data-hover]) {
-    background-color: var(--colors-border)
-        }
-
-  .hover\:bg_border:is(:hover, [data-hover]) {
-    background: var(--colors-border)
-        }
-
-  .hover\:opacity_0\.6:is(:hover, [data-hover]) {
-    opacity: 0.6
-        }
-
-  .hover\:opacity_1:is(:hover, [data-hover]) {
-    opacity: 1
-        }
-
-  .hover\:border-b_black:is(:hover, [data-hover]) {
-    border-bottom-color: var(--colors-black)
-        }
-
-  .\[\&_li\]\:hover\:opacity_0\.8 li:is(:hover, [data-hover]) {
-    opacity: 0.8
-            }
-
   @media screen and (min-width: 48em) {
     .md\:px_6 {
       padding-inline: var(--spacing-6)

package/styled-system/types/jsx.d.ts

@@ -16,13 +16,21 @@ export interface PandaComponent<T extends ElementType, P extends Dict = {}> {
 
 interface RecipeFn { __type: any }
 
+interface JsxFactoryOptions<TProps extends Dict> {
+  dataAttr?: boolean
+  defaultProps?: TProps
+  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+}
+
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+
 interface JsxFactory {
   <T extends ElementType>(component: T): PandaComponent<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): PandaComponent<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): PandaComponent<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): PandaComponent<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): PandaComponent<T, P['__type']>
 }
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: PandaComponent<K, {}> }

package/styled-system/types/recipe.d.ts

@@ -38,11 +38,13 @@ export interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVa
   ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
 }
 
-export type RecipeCompoundSelection<T extends RecipeVariantRecord> = {
-  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>
+type OneOrMore<T> = T | Array<T>
+
+export type RecipeCompoundSelection<T> = {
+  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>>
 }
 
-export type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {
+export type RecipeCompoundVariant<T> = T & {
   css: SystemStyleObject
 }
 
@@ -54,7 +56,7 @@ export interface RecipeDefinition<T extends RecipeVariantRecord> {
   /**
    * The multi-variant styles of the recipe.
    */
-  variants?: T | RecipeVariantRecord
+  variants?: T
   /**
    * The default variants of the recipe.
    */
@@ -62,7 +64,7 @@ export interface RecipeDefinition<T extends RecipeVariantRecord> {
   /**
    * The styles to apply when a combination of variants is selected.
    */
-  compoundVariants?: Array<RecipeCompoundVariant<T>>
+  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]
 }
 
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
@@ -109,7 +111,7 @@ export interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVaria
   splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]
 }
 
-export type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {
+export type SlotRecipeCompoundVariant<S extends string, T> = T & {
   css: SlotRecord<S, SystemStyleObject>
 }
 
@@ -125,7 +127,7 @@ export interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVari
   /**
    * The multi-variant styles of the recipe.
    */
-  variants?: T | SlotRecipeVariantRecord<S>
+  variants?: T
   /**
    * The default variants of the recipe.
    */
@@ -133,7 +135,7 @@ export interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVari
   /**
    * The styles to apply when a combination of variants is selected.
    */
-  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>
+  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]
 }
 
 export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(

package/virtual-panda.ts

@@ -1,27 +1,17 @@
-import { type PandaContext, analyzeTokens, loadConfigAndCreateContext, writeAnalyzeJSON } from '@pandacss/node'
-import { stringify } from 'javascript-stringify'
+import { loadConfigAndCreateContext, type PandaContext } from '@pandacss/node'
 import type { AstroIntegration } from 'astro'
+import { stringify } from 'javascript-stringify'
 import type { PluginOption } from 'vite'
 
-import { dirname, resolve } from 'path'
-import { fileURLToPath } from 'url'
-
 const virtualModuleId = 'virtual:panda'
 const resolvedVirtualModuleId = '\0' + virtualModuleId
 
-const _dirname = dirname(fileURLToPath(import.meta.url))
-const analysisDataFilepath = 'src/lib/analysis.json'
-const jsonPath = resolve(_dirname, analysisDataFilepath)
-
 function vitePlugin(configPath: string): PluginOption {
   let config: PandaContext['config']
 
   async function loadPandaConfig() {
     const ctx = await loadConfigAndCreateContext({ configPath })
     config = ctx.config
-
-    const result = analyzeTokens(ctx)
-    await writeAnalyzeJSON(jsonPath, result, ctx)
   }
 
   return {