@pandacss/studio 0.15.3 → 0.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.15.3",
+  "version": "0.15.4",
   "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.9",
-    "@pandacss/config": "0.15.3",
-    "@pandacss/logger": "0.15.3",
-    "@pandacss/node": "0.15.3",
-    "@pandacss/shared": "0.15.3",
-    "@pandacss/token-dictionary": "0.15.3",
-    "@pandacss/types": "0.15.3"
+    "@pandacss/config": "0.15.4",
+    "@pandacss/logger": "0.15.4",
+    "@pandacss/node": "0.15.4",
+    "@pandacss/shared": "0.15.4",
+    "@pandacss/token-dictionary": "0.15.4",
+    "@pandacss/types": "0.15.4"
   },
   "devDependencies": {
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react": "4.0.4",
     "execa": "7.2.0",
-    "@pandacss/dev": "0.15.3"
+    "@pandacss/dev": "0.15.4"
   },
   "scripts": {
     "codegen": "panda",

package/src/lib/panda.context.ts

@@ -3,8 +3,6 @@ import { TokenDictionary } from '@pandacss/token-dictionary'
 import type { TokenDataTypes } from '@pandacss/types'
 import { config } from 'virtual:panda'
 
-// console.log('_config', config)
-
 const { theme } = config
 
 const context = {

package/styled-system/chunks/src__components__color-wrapper.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .w_full {
     width: var(--sizes-full)
     }
@@ -23,36 +22,28 @@
   .shadow_inset {
     box-shadow: var(--shadows-inset)
     }
-
-  .before\:content_\'\'::before {
-    content: ''
+    .before\:content_\'\'::before {
+      content: ''
         }
-
-  .before\:pos_absolute::before {
-    position: absolute
+    .before\:pos_absolute::before {
+      position: absolute
         }
-
-  .before\:rounded_sm::before {
-    border-radius: var(--radii-sm)
+    .before\:rounded_sm::before {
+      border-radius: var(--radii-sm)
         }
-
-  .before\:w_100\%::before {
-    width: 100%
+    .before\:w_100\%::before {
+      width: 100%
         }
-
-  .before\:h_100\%::before {
-    height: 100%
+    .before\:h_100\%::before {
+      height: 100%
         }
-
-  .before\:bg_24px::before {
-    background-size: 24px
+    .before\:bg_24px::before {
+      background-size: 24px
         }
-
-  .before\:z_-1::before {
-    z-index: -1
+    .before\:z_-1::before {
+      z-index: -1
         }
-
-  .before\:bg-img_check::before {
-    background-image: var(--assets-check)
+    .before\:bg-img_check::before {
+      background-image: var(--assets-check)
         }
 }

package/styled-system/chunks/src__components__colors.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .font_semibold {
     font-weight: var(--font-weights-semibold)
     }

package/styled-system/chunks/src__components__empty-state.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .fs_5xl {
     font-size: var(--font-sizes-5xl)
     }

package/styled-system/chunks/src__components__font-family.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .fs_100px {
     font-size: 100px
     }

package/styled-system/chunks/src__components__font-tokens.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .mb_3\.5 {
     margin-bottom: var(--spacing-3\.5)
     }

package/styled-system/chunks/src__components__input.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .bg_transparent {
     background: var(--colors-transparent)
     }
@@ -23,9 +22,8 @@
   .text_neutral\.600 {
     color: var(--colors-neutral-600)
     }
-
-  .dark\:text_neutral\.300.dark, .dark .dark\:text_neutral\.300 {
-    color: var(--colors-neutral-300)
+    .dark\:text_neutral\.300.dark, .dark .dark\:text_neutral\.300 {
+      color: var(--colors-neutral-300)
         }
 
   .shadow_sm {
@@ -39,20 +37,16 @@
   .border_border {
     border-color: var(--colors-border)
     }
-
-  .focusWithin\:outline-style_solid:focus-within {
-    outline-style: solid
+    .focusWithin\:outline-style_solid:focus-within {
+      outline-style: solid
         }
-
-  .focusWithin\:ring_2px:focus-within {
-    outline-width: 2px
+    .focusWithin\:ring_2px:focus-within {
+      outline-width: 2px
         }
-
-  .focusWithin\:ring_2px:focus-within {
-    outline-offset: 2px
+    .focusWithin\:ring_2px:focus-within {
+      outline-offset: 2px
         }
-
-  .focusWithin\:ring_neutral\.400:focus-within {
-    outline-color: var(--colors-neutral-400)
+    .focusWithin\:ring_neutral\.400:focus-within {
+      outline-color: var(--colors-neutral-400)
         }
 }

package/styled-system/chunks/src__components__layer-styles.css

@@ -1,12 +1,10 @@
 @layer utilities {
-
-  .divide-y_1px > :not([hidden]) ~ :not([hidden]) {
-    border-top-width: 1px;
-    border-bottom-width: 0px
+    .divide-y_1px > :not([hidden]) ~ :not([hidden]) {
+      border-top-width: 1px;
+      border-bottom-width: 0px
         }
-
-  .divide_card > :not([hidden]) ~ :not([hidden]) {
-    border-color: var(--colors-card)
+    .divide_card > :not([hidden]) ~ :not([hidden]) {
+      border-color: var(--colors-card)
         }
 
   .px_1 {

package/styled-system/chunks/src__components__nav-item.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .w_60 {
     width: var(--sizes-60)
     }
@@ -19,6 +18,9 @@
   .transition_all_0\.2s_ease {
     transition: all 0.2s ease
     }
+    .hover\:shadow_lg:is(:hover, [data-hover]) {
+      box-shadow: var(--shadows-lg)
+        }
     .\[\&_svg\]\:font_normal svg {
       font-weight: var(--font-weights-normal)
         }
@@ -50,8 +52,4 @@
   .mt_3 {
     margin-top: var(--spacing-3)
     }
-
-  .hover\:shadow_lg:is(:hover, [data-hover]) {
-    box-shadow: var(--shadows-lg)
-        }
 }

package/styled-system/chunks/src__components__overview.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .bg_\#646cff {
     background: #646cff
     }
@@ -111,12 +110,10 @@
   .p_0 {
     padding: var(--spacing-0)
     }
-
-  .\[\&\:hover\]\:bg_\#4049f0:hover {
-    background: #4049f0
+    .\[\&\:hover\]\:bg_\#4049f0:hover {
+      background: #4049f0
         }
-
-  .\[\&\:hover\]\:shadow_lg:hover {
-    box-shadow: var(--shadows-lg)
+    .\[\&\:hover\]\:shadow_lg:hover {
+      box-shadow: var(--shadows-lg)
         }
 }

package/styled-system/chunks/src__components__radii.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .w_80px {
     width: 80px
     }

package/styled-system/chunks/src__components__semantic-color.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .h_12 {
     height: var(--sizes-12)
     }

package/styled-system/chunks/src__components__side-nav-item.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .d_block {
     display: block
     }
@@ -19,12 +18,10 @@
   .font_medium {
     font-weight: var(--font-weights-medium)
     }
-
-  .currentPage\:text_yellow\.300[aria-current=page] {
-    color: var(--colors-yellow-300)
+    .hover\:text_yellow\.300:is(:hover, [data-hover]) {
+      color: var(--colors-yellow-300)
         }
-
-  .hover\:text_yellow\.300:is(:hover, [data-hover]) {
-    color: var(--colors-yellow-300)
+    .currentPage\:text_yellow\.300[aria-current=page] {
+      color: var(--colors-yellow-300)
         }
 }

package/styled-system/chunks/src__components__side-nav.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .mt_8 {
     margin-top: var(--spacing-8)
     }

package/styled-system/chunks/src__components__text-styles.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .px_1 {
     padding-inline: var(--spacing-1)
     }

package/styled-system/chunks/src__components__theme-toggle.css

@@ -1,11 +1,9 @@
 @layer utilities {
-
   .cursor_pointer {
     cursor: pointer
     }
-
-  .\[\&\.active\]\:text_yellow\.300.active {
-    color: var(--colors-yellow-300)
+    .\[\&\.active\]\:text_yellow\.300.active {
+      color: var(--colors-yellow-300)
         }
 
   .sr_true {

package/styled-system/chunks/src__components__token-content.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .d_flex {
     display: flex
     }

package/styled-system/chunks/src__components__token-group.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .d_flex {
     display: flex
     }

package/styled-system/chunks/src__components__typography-playground.css

@@ -1,5 +1,4 @@
 @layer utilities {
-
   .bg_card {
     background: var(--colors-card)
     }

package/styled-system/chunks/src__layouts__Sidebar.css

@@ -99,15 +99,15 @@
   .overflow_auto {
     overflow: auto
     }
+    @media screen and (min-width: 48em) {
 
-  @media screen and (min-width: 48em) {
-    .md\:px_6 {
+  .md\:px_6 {
       padding-inline: var(--spacing-6)
     }
         }
+    @media screen and (min-width: 64em) {
 
-  @media screen and (min-width: 64em) {
-    .lg\:px_8 {
+  .lg\:px_8 {
       padding-inline: var(--spacing-8)
     }
         }

package/styled-system/jsx/factory.mjs

@@ -3,35 +3,48 @@ import { css, cx, cva } from '../css/index.mjs';
 import { splitProps, normalizeHTMLProps } from '../helpers.mjs';
 import { isCssProperty } from './is-valid-prop.mjs';
 
-function styledFn(Dynamic, configOrCva = {}) {
+const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+
+function styledFn(Dynamic, configOrCva = {}, options = {}) {
   const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
+  const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
+  const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
+  
+  const defaultProps = Object.assign(
+    options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
+    options.defaultProps,
+  )
+
   const PandaComponent = /* @__PURE__ */ forwardRef(function PandaComponent(props, ref) {
-    const { as: Element = Dynamic, ...restProps } = props
+    const { as: Element = Dynamic, children, ...restProps } = props
 
-    const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
-  return splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
-}, [restProps])
+    const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
-function recipeClass() {
-  const { css: cssStyles, ...propStyles } = styleProps
-  const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-  return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), elementProps.className)
-}
+    const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
+      return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+    }, [combinedProps])
 
-function cvaClass() {
-  const { css: cssStyles, ...propStyles } = styleProps
-  const cvaStyles = cvaFn.raw(variantProps)
-  return cx(css(cvaStyles, propStyles, cssStyles), elementProps.className)
-}
+    function recipeClass() {
+      const { css: cssStyles, ...propStyles } = styleProps
+      const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
+      return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
+    }
 
+    function cvaClass() {
+      const { css: cssStyles, ...propStyles } = styleProps
+      const cvaStyles = cvaFn.raw(variantProps)
+      return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
+    }
 
     const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
     return createElement(Element, {
       ref,
+      ...forwardedProps,
       ...elementProps,
       ...normalizeHTMLProps(htmlProps),
+      children,
       className: classes(),
     })
   })