@pandacss/studio 0.34.2 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.34.2",
+  "version": "0.35.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -48,12 +48,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "5.1.3",
-    "@pandacss/config": "0.34.2",
-    "@pandacss/logger": "0.34.2",
-    "@pandacss/shared": "0.34.2",
-    "@pandacss/token-dictionary": "0.34.2",
-    "@pandacss/types": "0.34.2",
-    "@pandacss/astro-plugin-studio": "0.34.2"
+    "@pandacss/config": "0.35.0",
+    "@pandacss/logger": "0.35.0",
+    "@pandacss/shared": "0.35.0",
+    "@pandacss/token-dictionary": "0.35.0",
+    "@pandacss/types": "0.35.0",
+    "@pandacss/astro-plugin-studio": "0.35.0"
   },
   "devDependencies": {
     "@types/react": "18.2.55",

package/styled-system/css/sva.mjs

@@ -1,11 +1,14 @@
 import { getSlotRecipes, memo, splitProps } from '../helpers.mjs';
 import { cva } from './cva.mjs';
+import { cx } from './cx.mjs';
+
+const slotClass = (className, slot) => className + '__' + slot
 
 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)])
+    const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))])
     return Object.fromEntries(result)
   }
 

package/styled-system/jsx/factory.mjs

@@ -17,9 +17,10 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
 
   const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
   const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+  const __base__ = Dynamic.__base__ || Dynamic
 
   const PandaComponent = /* @__PURE__ */ forwardRef(function PandaComponent(props, ref) {
-    const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+    const { as: Element = __base__, children, ...restProps } = props
 
     const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
@@ -50,11 +51,11 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
     }, combinedProps.children ?? children)
   })
 
-  const name = getDisplayName(Dynamic)
+  const name = getDisplayName(__base__)
 
   PandaComponent.displayName = `panda.${name}`
   PandaComponent.__cva__ = __cvaFn__
-  PandaComponent.__base__ = Dynamic
+  PandaComponent.__base__ = __base__
   PandaComponent.__shouldForwardProps__ = shouldForwardProp
 
   return PandaComponent

package/styled-system/types/prop-type.d.ts

@@ -376,7 +376,14 @@ type StrictableProps =
   | 'wordBreak'
   | 'writingMode'
 
-type WithEscapeHatch<T> = T | `[${string}]`
+type WithColorOpacityModifier<T> = T extends string ? `${T}/${string}` : T
+
+type ImportantMark = "!" | "!important"
+type WhitespaceImportant = ` ${ImportantMark}`
+type Important = ImportantMark | WhitespaceImportant
+type WithImportant<T> = T extends string ? `${T}${Important}${string}` : T
+
+type WithEscapeHatch<T> = T | `[${string}]` | (T extends string ? WithColorOpacityModifier<string> | WithImportant<T> : T)
 
 type FilterVagueString<Key, Value> = Value extends boolean
   ? Value

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

@@ -81,7 +81,7 @@ export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefi
 
 interface RecipeConfigMeta {
   /**
-   * The name of the recipe.
+   * The class name of the recipe.
    */
   className: string
   /**
@@ -133,6 +133,10 @@ export interface SlotRecipeDefinition<
   S extends string = string,
   T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
 > {
+  /**
+   * An optional class name that can be used to target slots in the DOM.
+   */
+  className?: string
   /**
    * The parts/slots of the recipe.
    */