@pandacss/studio 0.34.3 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.34.3",
+  "version": "0.36.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.3",
-    "@pandacss/logger": "0.34.3",
-    "@pandacss/shared": "0.34.3",
-    "@pandacss/token-dictionary": "0.34.3",
-    "@pandacss/types": "0.34.3",
-    "@pandacss/astro-plugin-studio": "0.34.3"
+    "@pandacss/config": "0.36.0",
+    "@pandacss/logger": "0.36.0",
+    "@pandacss/shared": "0.36.0",
+    "@pandacss/token-dictionary": "0.36.0",
+    "@pandacss/types": "0.36.0",
+    "@pandacss/astro-plugin-studio": "0.36.0"
   },
   "devDependencies": {
     "@types/react": "18.2.55",

package/src/components/semantic-color.tsx

@@ -4,7 +4,7 @@ import { ColorWrapper } from './color-wrapper'
 import * as context from '../lib/panda-context'
 
 const getSemanticColorValue = (variable: string): string => {
-  const _name = variable.match(/var\(\s*--(.*?)\s*\)/)
+  const _name = variable?.match(/var\(\s*--(.*?)\s*\)/)
   if (!_name) return variable
 
   const name = _name[1].replaceAll('-', '.')

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/patterns/aspect-ratio.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/bleed.d.ts

@@ -1,13 +1,13 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface BleedProperties {
-   inline?: PropertyValue<'marginInline'>
-	block?: PropertyValue<'marginBlock'>
+   inline?: SystemProperties["marginInline"]
+	block?: SystemProperties["marginBlock"]
 }
 
 

package/styled-system/patterns/box.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/center.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/circle.d.ts

@@ -1,12 +1,12 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface CircleProperties {
-   size?: PropertyValue<'width'>
+   size?: SystemProperties["width"]
 }
 
 

package/styled-system/patterns/container.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/cq.d.ts

@@ -1,13 +1,13 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface CqProperties {
    name?: ConditionalValue<Tokens["containerNames"] | Properties["containerName"]>
-	type?: PropertyValue<'containerType'>
+	type?: SystemProperties["containerType"]
 }
 
 

package/styled-system/patterns/divider.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/flex.d.ts

@@ -1,18 +1,18 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface FlexProperties {
-   align?: PropertyValue<'alignItems'>
-	justify?: PropertyValue<'justifyContent'>
-	direction?: PropertyValue<'flexDirection'>
-	wrap?: PropertyValue<'flexWrap'>
-	basis?: PropertyValue<'flexBasis'>
-	grow?: PropertyValue<'flexGrow'>
-	shrink?: PropertyValue<'flexShrink'>
+   align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+	direction?: SystemProperties["flexDirection"]
+	wrap?: SystemProperties["flexWrap"]
+	basis?: SystemProperties["flexBasis"]
+	grow?: SystemProperties["flexGrow"]
+	shrink?: SystemProperties["flexShrink"]
 }
 
 

package/styled-system/patterns/float.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/grid-item.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/grid.d.ts

@@ -1,14 +1,14 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface GridProperties {
-   gap?: PropertyValue<'gap'>
-	columnGap?: PropertyValue<'gap'>
-	rowGap?: PropertyValue<'gap'>
+   gap?: SystemProperties["gap"]
+	columnGap?: SystemProperties["gap"]
+	rowGap?: SystemProperties["gap"]
 	columns?: ConditionalValue<number>
 	minChildWidth?: ConditionalValue<Tokens["sizes"] | Properties["width"]>
 }

package/styled-system/patterns/hstack.d.ts

@@ -1,13 +1,13 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface HstackProperties {
-   justify?: PropertyValue<'justifyContent'>
-	gap?: PropertyValue<'gap'>
+   justify?: SystemProperties["justifyContent"]
+	gap?: SystemProperties["gap"]
 }
 
 

package/styled-system/patterns/link-box.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/link-overlay.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/spacer.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/square.d.ts

@@ -1,12 +1,12 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface SquareProperties {
-   size?: PropertyValue<'width'>
+   size?: SystemProperties["width"]
 }
 
 

package/styled-system/patterns/stack.d.ts

@@ -1,15 +1,15 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface StackProperties {
-   align?: PropertyValue<'alignItems'>
-	justify?: PropertyValue<'justifyContent'>
-	direction?: PropertyValue<'flexDirection'>
-	gap?: PropertyValue<'gap'>
+   align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+	direction?: SystemProperties["flexDirection"]
+	gap?: SystemProperties["gap"]
 }
 
 

package/styled-system/patterns/visually-hidden.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 

package/styled-system/patterns/vstack.d.ts

@@ -1,13 +1,13 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface VstackProperties {
-   justify?: PropertyValue<'justifyContent'>
-	gap?: PropertyValue<'gap'>
+   justify?: SystemProperties["justifyContent"]
+	gap?: SystemProperties["gap"]
 }
 
 

package/styled-system/patterns/wrap.d.ts

@@ -1,16 +1,16 @@
 /* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types/index';
 import type { Properties } from '../types/csstype';
-import type { PropertyValue } from '../types/prop-type';
+import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface WrapProperties {
-   gap?: PropertyValue<'gap'>
-	rowGap?: PropertyValue<'gap'>
-	columnGap?: PropertyValue<'gap'>
-	align?: PropertyValue<'alignItems'>
-	justify?: PropertyValue<'justifyContent'>
+   gap?: SystemProperties["gap"]
+	rowGap?: SystemProperties["gap"]
+	columnGap?: SystemProperties["gap"]
+	align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
 }
 
 

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

@@ -256,17 +256,13 @@ export interface Conditions {
 	"base": string
 }
 
-export type Condition = keyof Conditions
-
-export type Conditional<V> =
+export type ConditionalValue<V> =
   | V
   | Array<V | null>
   | {
-      [K in keyof Conditions]?: Conditional<V>
+      [K in keyof Conditions]?: ConditionalValue<V>
     }
 
-export type ConditionalValue<T> = Conditional<T>
-
 export type Nested<P> = P & {
   [K in Selectors]?: Nested<P>
 } & {