@pandacss/studio 0.0.0-dev-20230731203720 → 0.0.0-dev-20230801084843

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230731203720",
+  "version": "0.0.0-dev-20230801084843",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -33,19 +33,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.2",
-    "@pandacss/types": "0.0.0-dev-20230731203720",
-    "@pandacss/config": "0.0.0-dev-20230731203720",
-    "@pandacss/shared": "0.0.0-dev-20230731203720",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230731203720",
-    "@pandacss/logger": "0.0.0-dev-20230731203720",
-    "@pandacss/node": "0.0.0-dev-20230731203720"
+    "@pandacss/types": "0.0.0-dev-20230801084843",
+    "@pandacss/config": "0.0.0-dev-20230801084843",
+    "@pandacss/shared": "0.0.0-dev-20230801084843",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230801084843",
+    "@pandacss/logger": "0.0.0-dev-20230801084843",
+    "@pandacss/node": "0.0.0-dev-20230801084843"
   },
   "devDependencies": {
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@vitejs/plugin-react": "4.0.3",
     "execa": "7.1.1",
-    "@pandacss/dev": "0.0.0-dev-20230731203720"
+    "@pandacss/dev": "0.0.0-dev-20230801084843"
   },
   "scripts": {
     "codegen": "panda",

package/styled-system/css/conditions.mjs

@@ -120,7 +120,7 @@ export function isCondition(value) {
 }
 
 const underscoreRegex = /^_/
-const selectorRegex = /&|@/
+const conditionsSelectorRegex = /&|@/
 
 export function finalizeConditions(paths) {
   return paths.map((path) => {
@@ -128,7 +128,7 @@ export function finalizeConditions(paths) {
       return path.replace(underscoreRegex, '')
     }
 
-    if (selectorRegex.test(path)) {
+    if (conditionsSelectorRegex.test(path)) {
       return `[${withoutSpace(path.trim())}]`
     }
 

package/styled-system/css/index.d.ts

@@ -1,4 +1,5 @@
 /* eslint-disable */
 export * from './css'
 export * from './cx'
-export * from './cva'
+export * from './cva'
+export * from './sva'

package/styled-system/css/index.mjs

@@ -1,3 +1,4 @@
 export * from './css.mjs'
 export * from './cx.mjs'
 export * from './cva.mjs'
+export * from './sva.mjs'

package/styled-system/css/sva.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import type { SlotRecipeCreatorFn } from '../types/recipe'
+
+export declare const sva: SlotRecipeCreatorFn

package/styled-system/css/sva.mjs

@@ -0,0 +1,20 @@
+import { getSlotRecipes } from '../helpers.mjs'
+import { cva } from './cva.mjs'
+
+export function sva(config) {
+  const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
+
+  function svaFn(props) {
+    const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
+    return Object.fromEntries(result)
+  }
+
+  const [, firstCva] = slots[0]
+
+  return Object.assign(svaFn, {
+    __cva__: false,
+    variantMap: firstCva.variantMap,
+    variantKeys: firstCva.variantKeys,
+    splitVariantProps: firstCva.splitVariantProps,
+  })
+}

package/styled-system/helpers.mjs

@@ -224,6 +224,54 @@ function normalizeHTMLProps(props) {
 }
 normalizeHTMLProps.keys = htmlProps
 
+// src/slot.ts
+var assign = (obj, path, value) => {
+  const last = path.pop()
+  const target = path.reduce((acc, key) => {
+    if (acc[key] == null) acc[key] = {}
+    return acc[key]
+  }, obj)
+  if (last != null) target[last] = value
+}
+var getSlotRecipes = (recipe) => {
+  const parts = recipe.slots
+    .map((slot) => [
+      slot,
+      // setup base recipe
+      {
+        // create class-base on BEM
+        className: [recipe.className ?? '', slot].join('__'),
+        base: {},
+        variants: {},
+        defaultVariants: recipe.defaultVariants ?? {},
+        compoundVariants: [],
+      },
+    ])
+    .map(([slot, cva]) => {
+      const base = recipe.base[slot]
+      if (base) cva.base = base
+      walkObject(
+        recipe.variants ?? {},
+        (variant, path) => {
+          if (!variant[slot]) return
+          assign(cva, ['variants', ...path], variant[slot])
+        },
+        {
+          stop: (_value, path) => path.includes(slot),
+        },
+      )
+      if (recipe.compoundVariants) {
+        cva.compoundVariants = getSlotCompoundVariant(recipe.compoundVariants, slot)
+      }
+      return [slot, cva]
+    })
+  return Object.fromEntries(parts)
+}
+var getSlotCompoundVariant = (compoundVariants, slotName) =>
+  compoundVariants
+    .filter((compoundVariant) => compoundVariant.css[slotName])
+    .map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }))
+
 // src/split-props.ts
 function splitProps(props, ...keys) {
   const descriptors = Object.getOwnPropertyDescriptors(props)
@@ -248,6 +296,8 @@ export {
   createCss,
   createMergeCss,
   filterBaseConditions,
+  getSlotCompoundVariant,
+  getSlotRecipes,
   hypenateProperty,
   isBaseCondition,
   isObject,

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

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { RecipeVariantRecord, RecipeConfig } from './recipe'
+import type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe'
 import type { Parts } from './parts'
 import type { PatternConfig, PatternProperties } from './pattern'
 import type { GlobalStyleObject, SystemStyleObject } from './system-types'
@@ -7,10 +7,11 @@ import type { CompositionStyles } from './composition'
 
 declare module '@pandacss/dev' {
   export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig
+  export function defineSlotRecipe<S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>): SlotRecipeConfig
   export function defineStyles(definition: SystemStyleObject): SystemStyleObject
   export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
   export function defineTextStyles(definition: CompositionStyles['textStyles']): CompositionStyles['textStyles']
   export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
   export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): PatternConfig
-  export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
+  export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>
 }

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

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject } from './system-types'
 
-type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
+type Pretty<T> = { [K in keyof T]: T[K] } & {}
 
 type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
 
@@ -21,6 +21,10 @@ type RecipeVariantMap<T extends RecipeVariantRecord> = {
   [K in keyof T]: Array<keyof T[K]>
 }
 
+/* -----------------------------------------------------------------------------
+ * Recipe / Standard
+ * -----------------------------------------------------------------------------*/
+
 export type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {
   __type: RecipeSelection<T>
   variantKeys: (keyof T)[]
@@ -59,7 +63,7 @@ export type RecipeDefinition<T extends RecipeVariantRecord> = {
 
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
 
-export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & {
+type RecipeConfigMeta = {
   /**
    * The name of the recipe.
    */
@@ -76,3 +80,59 @@ export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> =
    */
   jsx?: Array<string | RegExp>
 }
+
+export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta
+
+/* -----------------------------------------------------------------------------
+ * Recipe / Slot
+ * -----------------------------------------------------------------------------*/
+
+type SlotRecord<S extends string, T> = Partial<Record<S, T>>
+
+export type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>
+
+export type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (
+  props?: RecipeSelection<T>,
+) => SlotRecord<S, string>
+
+export type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {
+  variantKeys: (keyof T)[]
+  variantMap: RecipeVariantMap<T>
+  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> & {
+  css: SlotRecord<S, SystemStyleObject>
+}
+
+export type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {
+  /**
+   * The parts/slots of the recipe.
+   */
+  slots: S[] | Readonly<S[]>
+  /**
+   * The base styles of the recipe.
+   */
+  base?: SlotRecord<S, SystemStyleObject>
+  /**
+   * The multi-variant styles of the recipe.
+   */
+  variants?: T | SlotRecipeVariantRecord<S>
+  /**
+   * The default variants of the recipe.
+   */
+  defaultVariants?: RecipeSelection<T>
+  /**
+   * The styles to apply when a combination of variants is selected.
+   */
+  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>
+}
+
+export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(
+  config: SlotRecipeDefinition<S, T>,
+) => SlotRecipeRuntimeFn<S, T>
+
+export type SlotRecipeConfig<
+  S extends string = string,
+  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
+> = SlotRecipeDefinition<S, T> & RecipeConfigMeta