@pandacss/studio 0.0.0-dev-20231020171339 → 0.0.0-dev-20231020184323

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20231020171339",
+  "version": "0.0.0-dev-20231020184323",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -33,12 +33,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.11",
-    "@pandacss/config": "0.0.0-dev-20231020171339",
-    "@pandacss/logger": "0.0.0-dev-20231020171339",
-    "@pandacss/node": "0.0.0-dev-20231020171339",
-    "@pandacss/shared": "0.0.0-dev-20231020171339",
-    "@pandacss/token-dictionary": "0.0.0-dev-20231020171339",
-    "@pandacss/types": "0.0.0-dev-20231020171339"
+    "@pandacss/config": "0.0.0-dev-20231020184323",
+    "@pandacss/logger": "0.0.0-dev-20231020184323",
+    "@pandacss/node": "0.0.0-dev-20231020184323",
+    "@pandacss/shared": "0.0.0-dev-20231020184323",
+    "@pandacss/token-dictionary": "0.0.0-dev-20231020184323",
+    "@pandacss/types": "0.0.0-dev-20231020184323"
   },
   "devDependencies": {
     "@types/react": "18.2.22",

package/styled-system/css/cva.mjs

@@ -1,8 +1,16 @@
-import { compact, splitProps } from '../helpers.mjs';
+import { compact, mergeProps, splitProps, uniq } from '../helpers.mjs';
 import { css, mergeCss } from './css.mjs';
 
+const defaults = (conf) => ({
+  base: {},
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+  ...conf,
+})
+
 export function cva(config) {
-  const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
+  const { base, variants, defaultVariants, compoundVariants } = defaults(config)
 
   function resolve(props = {}) {
     const computedVariants = { ...defaultVariants, ...compact(props) }
@@ -16,6 +24,19 @@ export function cva(config) {
     return mergeCss(variantCss, compoundVariantCss)
   }
 
+  function merge(cvaConfig) {
+    const override = defaults(cvaConfig)
+    const variantKeys = uniq(override.variantKeys, Object.keys(variants))
+    return cva({
+      base: mergeCss(base, override.base),
+      variants: Object.fromEntries(
+        variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]),
+      ),
+      defaultVariants: mergeProps(defaultVariants, override.defaultVariants),
+      compoundVariants: [...compoundVariants, ...override.compoundVariants],
+    })
+  }
+
   function cvaFn(props) {
     return css(resolve(props))
   }
@@ -34,6 +55,7 @@ export function cva(config) {
     variantKeys,
     raw: resolve,
     config,
+    merge,
     splitVariantProps,
   })
 }

package/styled-system/helpers.mjs

@@ -49,17 +49,19 @@ function toHash(value) {
 
 // src/merge-props.ts
 function mergeProps(...sources) {
-  const result = {};
-  for (const source of sources) {
-    for (const [key, value] of Object.entries(source)) {
-      if (isObject(value)) {
-        result[key] = mergeProps(result[key] || {}, value);
+  const objects = sources.filter(Boolean);
+  return objects.reduce((prev, obj) => {
+    Object.keys(obj).forEach((key) => {
+      const prevValue = prev[key];
+      const value = obj[key];
+      if (isObject(prevValue) && isObject(value)) {
+        prev[key] = mergeProps(prevValue, value);
       } else {
-        result[key] = value;
+        prev[key] = value;
       }
-    }
-  }
-  return result;
+    });
+    return prev;
+  }, {});
 }
 
 // src/walk-object.ts
@@ -250,6 +252,9 @@ function splitProps(props, ...keys) {
   const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
   return keys.map(fn).concat(split(dKeys));
 }
+
+// src/uniq.ts
+var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);
 export {
   compact,
   createCss,
@@ -265,6 +270,7 @@ export {
   mergeProps,
   splitProps,
   toHash,
+  uniq,
   walkObject,
   withoutSpace
 };

package/styled-system/jsx/factory-helper.mjs

@@ -0,0 +1,22 @@
+import { isCssProperty } from './is-valid-prop.mjs';
+
+export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+
+export const composeShouldForwardProps = (tag, shouldForwardProp) =>
+  tag.__shouldForwardProps__ && shouldForwardProp
+    ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName)
+    : shouldForwardProp
+
+export const composeCvaFn = (cvaA, cvaB) => {
+  if (cvaA && !cvaB) return cvaA
+  if (!cvaA && cvaB) return cvaB
+  if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB.config)
+  const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
+  TypeError.captureStackTrace?.(error)
+  throw error
+}
+
+export const getDisplayName = (Component) => {
+  if (typeof Component === 'string') return Component
+  return Component?.displayName || Component?.name || 'Component'
+}

package/styled-system/jsx/factory.mjs

@@ -1,10 +1,9 @@
 import { createElement, forwardRef, useMemo } from 'react'
 import { css, cx, cva } from '../css/index.mjs';
+import { defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName } from './factory-helper.mjs';
 import { splitProps, normalizeHTMLProps } from '../helpers.mjs';
 import { isCssProperty } from './is-valid-prop.mjs';
 
-const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
-
 function styledFn(Dynamic, configOrCva = {}, options = {}) {
   const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
@@ -17,23 +16,26 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
   )
 
   const PandaComponent = /* @__PURE__ */ forwardRef(function PandaComponent(props, ref) {
-    const { as: Element = Dynamic, children, ...restProps } = props
+    const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+    
+    const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+    const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
     const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
     const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
-      return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+      return splitProps(combinedProps, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty, normalizeHTMLProps.keys)
     }, [combinedProps])
 
     function recipeClass() {
       const { css: cssStyles, ...propStyles } = styleProps
-      const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
-      return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
+      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)
+      const cvaStyles = __cvaFn__.raw(variantProps)
       return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
     }
 
@@ -49,8 +51,13 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
     })
   })
 
-  const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+  const name = getDisplayName(Dynamic)
+  
   PandaComponent.displayName = `panda.${name}`
+  PandaComponent.__cva__ = cvaFn
+  PandaComponent.__base__ = Dynamic
+  PandaComponent.__shouldForwardProps__ = shouldForwardProp
+  
   return PandaComponent
 }
 

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

@@ -1,9 +1,11 @@
 /* eslint-disable */
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
-import type { Assign, DistributiveOmit, JsxHTMLProps, JsxStyleProps } from './system-types';
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe';
+import type { Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty } from './system-types';
 
-type Dict = Record<string, unknown>
+interface Dict {
+  [k: string]: unknown
+}
 
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
@@ -14,7 +16,9 @@ export interface PandaComponent<T extends ElementType, P extends Dict = {}> {
   displayName?: string
 }
 
-interface RecipeFn { __type: any }
+interface RecipeFn {
+  __type: any
+}
 
 interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
@@ -24,16 +28,22 @@ interface JsxFactoryOptions<TProps extends Dict> {
 
 export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
 
-interface JsxFactory {
+export type JsxElement<T extends ElementType, P> = T extends PandaComponent<infer A, infer B>
+  ? PandaComponent<A, Pretty<DistributiveUnion<P, B>>>
+  : PandaComponent<T, P>
+
+export interface JsxFactory {
   <T extends ElementType>(component: T): PandaComponent<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): PandaComponent<
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): PandaComponent<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
 }
 
-type JsxElements = { [K in keyof JSX.IntrinsicElements]: PandaComponent<K, {}> }
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: PandaComponent<K, {}>
+}
 
 export type Panda = JsxFactory & JsxElements
 

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

@@ -6,6 +6,18 @@ import type {  SystemProperties, CssVarProperties  } from './style-props';
 type String = string & {}
 type Number = number & {}
 
+export type Pretty<T> = { [K in keyof T]: T[K] } & {}
+
+export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never
+
+export type DistributiveUnion<T, U> = {
+  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]
+} & DistributiveOmit<U, keyof T>
+
+export type Assign<T, U> = {
+  [K in keyof T]: K extends keyof U ? U[K] : T[K]
+} & U
+
 /* -----------------------------------------------------------------------------
  * Native css properties
  * -----------------------------------------------------------------------------*/
@@ -62,12 +74,6 @@ type StyleProps = SystemProperties & MinimalNested<SystemStyleObject>
 
 export type JsxStyleProps = StyleProps & WithCss
 
-export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never
-
-export type Assign<T, U> = {
-  [K in keyof T]: K extends keyof U ? U[K] : T[K]
-} & U
-
 export interface PatchedHTMLProps {
   htmlWidth?: string | number
   htmlHeight?: string | number