@pandacss/studio 0.0.0-dev-20230928112800 → 0.0.0-dev-20230928164751

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230928112800",
+  "version": "0.0.0-dev-20230928164751",
   "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.0.0-dev-20230928112800",
-    "@pandacss/logger": "0.0.0-dev-20230928112800",
-    "@pandacss/node": "0.0.0-dev-20230928112800",
-    "@pandacss/shared": "0.0.0-dev-20230928112800",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230928112800",
-    "@pandacss/types": "0.0.0-dev-20230928112800"
+    "@pandacss/config": "0.0.0-dev-20230928164751",
+    "@pandacss/logger": "0.0.0-dev-20230928164751",
+    "@pandacss/node": "0.0.0-dev-20230928164751",
+    "@pandacss/shared": "0.0.0-dev-20230928164751",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230928164751",
+    "@pandacss/types": "0.0.0-dev-20230928164751"
   },
   "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.0.0-dev-20230928112800"
+    "@pandacss/dev": "0.0.0-dev-20230928164751"
   },
   "scripts": {
     "codegen": "panda",

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(),
     })
   })

package/styled-system/styles.css

@@ -47,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)
     }

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/src/components/color-item.tsx

@@ -1,37 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import { panda } from '../../styled-system/jsx'
-import type { JsxStyleProps } from '../../styled-system/types'
-import { tokenDictionary } from '../lib/analysis-data'
-import { getReportItemFromTokenName, getUtilityLink } from '../lib/get-report-item'
-import { ColorWrapper } from './color-wrapper'
-
-export const ColorItem = ({
-  tokenName,
-  children,
-  ...props
-}: PropsWithChildren<{ tokenName: string } & JsxStyleProps>) => {
-  const token = tokenDictionary.getByName('colors.' + tokenName)
-  const value = token?.value ?? tokenName
-  const reportItem = getReportItemFromTokenName(tokenName)
-
-  if (!reportItem) return null
-
-  return (
-    <panda.a href={getUtilityLink({ value: reportItem.value })} key={tokenName} {...props}>
-      <ColorWrapper
-        w="auto"
-        minW="80px"
-        h="40px"
-        mb="2"
-        style={{ background: value, border: '1px solid rgba(0,0,0,0.1)' }}
-      />
-      {children}
-
-      {tokenName !== value && (
-        <panda.div opacity={0.7}>
-          <panda.span>{value}</panda.span>
-        </panda.div>
-      )}
-    </panda.a>
-  )
-}

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

@@ -1,21 +0,0 @@
-@layer utilities {
-  .w_auto {
-    width: auto
-    }
-
-  .min-w_80px {
-    min-width: 80px
-    }
-
-  .h_40px {
-    height: 40px
-    }
-
-  .mb_2 {
-    margin-bottom: var(--spacing-2)
-    }
-
-  .opacity_0\.7 {
-    opacity: 0.7
-    }
-}