@pandacss/studio 0.16.0 → 0.17.1

package/dist/studio.d.mts

@@ -1,9 +1,11 @@
-type BuildOpts = {
+interface BuildOpts {
     outDir: string;
     configPath: string;
-};
+    port?: string;
+    host?: boolean;
+}
 declare function buildStudio({ outDir, configPath }: BuildOpts): Promise<void>;
-declare function serveStudio({ configPath }: BuildOpts): Promise<void>;
+declare function serveStudio({ configPath, port, host }: BuildOpts): Promise<void>;
 declare function previewStudio({ outDir }: BuildOpts): Promise<void>;
 declare function printUrls(options: {
     host: string;

package/dist/studio.d.ts

@@ -1,9 +1,11 @@
-type BuildOpts = {
+interface BuildOpts {
     outDir: string;
     configPath: string;
-};
+    port?: string;
+    host?: boolean;
+}
 declare function buildStudio({ outDir, configPath }: BuildOpts): Promise<void>;
-declare function serveStudio({ configPath }: BuildOpts): Promise<void>;
+declare function serveStudio({ configPath, port, host }: BuildOpts): Promise<void>;
 declare function previewStudio({ outDir }: BuildOpts): Promise<void>;
 declare function printUrls(options: {
     host: string;

package/dist/studio.js

@@ -33,10 +33,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.31_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl, importMetaUrl;
 var init_cjs_shims = __esm({
-  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.31_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
     getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
     importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
@@ -2079,8 +2079,8 @@ async function buildStudio({ outDir, configPath }) {
   });
   import_logger.logger.log(stdout);
 }
-async function serveStudio({ configPath }) {
-  const result = execa(astroBin, ["dev", "--root", appPath], {
+async function serveStudio({ configPath, port, host }) {
+  const result = execa(astroBin, ["dev", "--root", appPath, "--port", port ?? "", host ? "--host" : ""], {
     stdio: "inherit",
     cwd: appPath,
     env: {

package/dist/studio.mjs

@@ -34,12 +34,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.31_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js
 import { fileURLToPath } from "url";
 import path from "path";
 var getFilename, getDirname, __dirname;
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.31_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
     getFilename = () => fileURLToPath(import.meta.url);
     getDirname = () => path.dirname(getFilename());
@@ -2075,8 +2075,8 @@ async function buildStudio({ outDir, configPath }) {
   });
   logger.log(stdout);
 }
-async function serveStudio({ configPath }) {
-  const result = execa(astroBin, ["dev", "--root", appPath], {
+async function serveStudio({ configPath, port, host }) {
+  const result = execa(astroBin, ["dev", "--root", appPath, "--port", port ?? "", host ? "--host" : ""], {
     stdio: "inherit",
     cwd: appPath,
     env: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -33,27 +33,27 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.11",
-    "@pandacss/config": "0.16.0",
-    "@pandacss/logger": "0.16.0",
-    "@pandacss/node": "0.16.0",
-    "@pandacss/shared": "0.16.0",
-    "@pandacss/token-dictionary": "0.16.0",
-    "@pandacss/types": "0.16.0"
+    "@pandacss/config": "0.17.1",
+    "@pandacss/node": "0.17.1",
+    "@pandacss/types": "0.17.1",
+    "@pandacss/token-dictionary": "0.17.1",
+    "@pandacss/logger": "0.17.1",
+    "@pandacss/shared": "0.17.1"
   },
   "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.16.0"
+    "execa": "7.2.0"
   },
   "scripts": {
-    "codegen": "panda",
+    "panda": "node ../cli/bin.js",
+    "codegen": "node ../cli/bin.js codegen",
     "build": "tsup scripts --format=esm,cjs --dts --no-splitting --shims",
-    "postbuild": "panda",
+    "postbuild": "pnpm panda",
     "build-fast": "tsup scripts --format=esm,cjs --no-dts --no-splitting --shims",
     "dev": "pnpm build-fast --watch scripts",
-    "dev:panda": "panda --clean --watch",
+    "dev:panda": "node ../cli/bin.js --clean --watch",
     "dev:astro": "astro dev",
     "start": "concurrently \"pnpm dev:panda\" \"pnpm dev:astro\""
   }

package/panda.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from '@pandacss/dev'
+import type { Config } from '@pandacss/types'
 
-export default defineConfig({
+export default {
   gitignore: false,
   preflight: true,
   include: ['./src/**/*.{tsx,jsx,astro}'],
@@ -107,4 +107,4 @@ export default defineConfig({
       minHeight: '100vh',
     },
   },
-})
+} satisfies Config

package/src/components/empty-state.tsx

@@ -1,6 +1,6 @@
 import { panda, Stack } from '../../styled-system/jsx'
 
-type EmptyStateProps = {
+interface EmptyStateProps {
   title: string
   children: React.ReactNode
   icon: React.ReactElement

package/src/components/font-tokens.tsx

@@ -4,7 +4,7 @@ import { TokenContent } from '../components/token-content'
 import { TokenGroup } from '../components/token-group'
 import { Input, Textarea } from './input'
 
-type FontTokensProps = {
+interface FontTokensProps {
   text?: string
   largeText?: boolean
   token: string

package/src/components/sizes.tsx

@@ -3,7 +3,9 @@ import { Grid, panda } from '../../styled-system/jsx'
 import { getSortedSizes } from '../lib/sizes-sort'
 import { TokenGroup } from './token-group'
 
-export type SizesProps = { sizes: Map<string, any> }
+export interface SizesProps {
+  sizes: Map<string, any>
+}
 
 const contentRegex = /^(min|max|fit)-content$/
 const unitRegex = /(ch|%)$/

package/src/lib/color-contrast-checker.ts

@@ -1,7 +1,15 @@
 // Credits: https://github.com/bbc/color-contrast-checker
 
-type Pair = { colorA: string; colorB: string; fontSize: number }
-type Rgb = { r: number; g: number; b: number }
+interface Pair {
+  colorA: string
+  colorB: string
+  fontSize: number
+}
+interface Rgb {
+  r: number
+  g: number
+  b: number
+}
 
 class RgbClass {
   r = 0

package/src/lib/constants.ts

@@ -30,7 +30,7 @@ export enum NavKeys {
   CONTRAST_CHECKER = 'playground/contrast-checker',
 }
 
-export type NavItemData = {
+export interface NavItemData {
   label: string
   id: NavKeys
   description: string

package/src/lib/use-color-docs.ts

@@ -2,7 +2,7 @@ import type { Token } from '@pandacss/types'
 import { useState } from 'react'
 import context from './panda.context'
 
-type Color = {
+interface Color {
   isConditional?: boolean
   isReference?: boolean
   name: string

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,39 +1,41 @@
 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)
 
   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, 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)
+    const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
+      return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
     }, [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/reset.css

@@ -90,6 +90,14 @@
     background-color: transparent;
     background-image: none;
   }
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    color: inherit;
+  }
 
   button,
   select {

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

@@ -1,15 +1,11 @@
 /* eslint-disable */
 import type {  CompositionStyleObject  } from './system-types';
+import type {  Token  } from '../tokens';
 
 interface Recursive<T> {
   [key: string]: Recursive<T> | T
 }
 
-export interface Token<Value = any> {
-  value: Value
-  description?: string
-}
-
 /* -----------------------------------------------------------------------------
  * Text styles
  * -----------------------------------------------------------------------------*/

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

@@ -5,4 +5,4 @@ export * from './pattern';
 export * from './recipe';
 export * from './system-types';
 export * from './jsx';
-export * from './style-props';
+export * from './style-props';

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,17 +28,25 @@ 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
 
-export type HTMLPandaProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type HTMLPandaProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+
+export type PandaVariantProps<T extends PandaComponent<any, any>> = T extends PandaComponent<any, infer Props> ? Props : never

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

@@ -3,4 +3,6 @@ export interface Part {
   selector: string
 }
 
-export type Parts = Record<string, Part>
+export interface Parts {
+  [key: string]: Part
+}

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

@@ -15,7 +15,9 @@ export interface PatternHelpers {
   map: (value: any, fn: (value: string) => string | undefined) => any
 }
 
-export type PatternProperties = Record<string, PatternProperty>
+export interface PatternProperties {
+  [key: string]: PatternProperty
+}
 
 type Props<T> = Record<LiteralUnion<keyof T>, any>
 

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