@pandacss/node 0.0.0-dev-20230122145009 → 0.0.0-dev-20230125073613

package/dist/index.js

@@ -32,6 +32,7 @@ __export(src_exports, {
   emitAndExtract: () => emitAndExtract,
   emitArtifacts: () => emitArtifacts,
   execCommand: () => execCommand,
+  extractCss: () => extractCss,
   generate: () => generate5,
   loadConfigAndCreateContext: () => loadConfigAndCreateContext,
   setupConfig: () => setupConfig,
@@ -115,7 +116,7 @@ async function extractChunks(ctx) {
 }
 async function bundleChunks(ctx) {
   const css2 = await extractChunks(ctx);
-  await ctx.write(ctx.outdir, [{ file: "styles.css", code: css2 }]);
+  await ctx.write(ctx.paths.root, [{ file: "styles.css", code: css2 }]);
 }
 async function writeFileChunk(ctx, file) {
   import_logger2.logger.info(`File changed: ${file}`);
@@ -135,7 +136,8 @@ function generateConditions(ctx) {
   const keys = Object.keys(ctx.conditions.values).concat("base");
   return {
     js: import_outdent.default`
-    import { withoutSpace } from '../helpers'
+    ${ctx.getImport("withoutSpace", "../helpers")}
+    
     const conditions = new Set([${keys.map((key) => JSON.stringify(key))}])
     
     export function isCondition(value){
@@ -203,12 +205,12 @@ function generateCssFn(ctx) {
   const { separator } = utility;
   return {
     dts: import_outdent2.outdent`
-    import { SystemStyleObject } from '../types'
+    import type { SystemStyleObject } from '../types'
     export declare function css(styles: SystemStyleObject): string
     `,
     js: import_outdent2.outdent`
-    import { createCss, createMergeCss, withoutSpace } from '../helpers'
-    import { sortConditions, finalizeConditions } from './conditions'
+    ${ctx.getImport("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
+    ${ctx.getImport("sortConditions, finalizeConditions", "./conditions")}
 
     const classNameMap = ${stringify(utility.entries())}
     
@@ -222,7 +224,7 @@ function generateCssFn(ctx) {
 
     function transform(prop, value) {
       const key = resolveShorthand(prop)
-      const propKey = classNameMap[key] || prop
+      const propKey = classNameMap[key] || hypenateProperty(key)
       const className = \`$\{propKey}${separator}$\{withoutSpace(value)}\`
       return { className }
     }
@@ -235,6 +237,7 @@ function generateCssFn(ctx) {
         breakpoints: { keys: breakpointKeys }
       },
       utility: {
+        prefix: ${ctx.prefix ? JSON.stringify(ctx.prefix) : void 0},
         transform,
         hasShorthand,
         resolveShorthand,
@@ -250,11 +253,11 @@ function generateCssFn(ctx) {
 
 // src/generators/cva.ts
 var import_outdent3 = require("outdent");
-function generateCvaFn() {
+function generateCvaFn(ctx) {
   return {
     js: import_outdent3.outdent`
-    import { compact } from '../helpers'
-    import { css, mergeCss } from './css'
+    ${ctx.getImport("compact", "../helpers")}
+    ${ctx.getImport("css, mergeCss", "./css")}
     
     export function cva(config) {
       const { base = {}, variants = {}, defaultVariants = {} } = config
@@ -283,7 +286,7 @@ function generateCvaFn() {
     }
     `,
     dts: import_outdent3.outdent`
-    import { RecipeCreatorFn } from '../types/recipe'
+    import type { RecipeCreatorFn } from '../types/recipe'
 
     export declare const cva: RecipeCreatorFn
 
@@ -362,9 +365,9 @@ function generatePreactJsxFactory(ctx) {
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
-    import { css, cx, assignCss } from '../css'
-    import { splitProps, normalizeHTMLProps } from '../helpers'
-    import { isCssProperty } from './is-valid-prop'
+    ${ctx.getImport("css, cx, assignCss", "../css/index")}
+    ${ctx.getImport("splitProps, normalizeHTMLProps", "../helpers")}
+    ${ctx.getImport("isCssProperty", "./is-valid-prop")}
     
     function styled(Dynamic, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
@@ -376,7 +379,7 @@ function generatePreactJsxFactory(ctx) {
           return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
         }, [restProps])
     
-        function classes(){
+        function classes() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = cvaFn.resolve(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
@@ -424,47 +427,39 @@ function generatePreactLayoutGrid() {
     import { FunctionComponent } from 'preact'
 
     export type LayoutGridProps = {
-        count?: number
-        gutter?: string
-        maxWidth?: string
-        margin?: string
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
     }
 
     export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
     `,
     js: import_outdent6.outdent`
+    import { h } from 'preact'
+
     export function LayoutGrid(props) {
-        const { count = 12, margin, gutter = '24px', maxWidth } = props
-        const hasMaxWidth = maxWidth != null;
-        return (
-          <div
-            style={{
-              display: 'grid',
-              gap: gutter,
-              gridTemplateColumns: \`repeat(\${count}, 1fr)\`,
-              height: '100%',
-              width: '100%',
-              position: 'absolute',
-              inset: '0',
-              pointerEvents: 'none',
-              maxWidth: hasMaxWidth ? maxWidth : 'initial',
-              marginInline: hasMaxWidth ? 'auto' : undefined,
-              paddingInline: !hasMaxWidth ? margin : undefined,
-            }}
-          >
-            {Array.from({ length: count }).map((_, i) => (
-              <span
-                key={i}
-                style={{
-                  display: 'flex',
-                  background: 'rgba(255, 0, 0, 0.1)',
-                  height: '100%',
-                }}
-              />
-            ))}
-          </div>
-        );
-      }
+      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
+      const hasMaxWidth = maxWidth != null
+      return h('div', {
+        className: 'panda-layout-grid',
+        style: {
+          '--gutter': gutter,
+          '--count': count,
+          '--max-width': hasMaxWidth ? maxWidth : 'initial',
+          '--margin-x': hasMaxWidth ? 'auto' : undefined,
+          '--padding-x': !hasMaxWidth ? margin : undefined,
+        },
+        children: Array.from({ length: count }).map((_, i) =>
+        h('span', {
+            'data-variant': outline ? 'outline' : 'bg',
+            key: i,
+            className: 'panda-layout-grid__item',
+          }),
+        ),
+      });
+    }
     `
   };
 }
@@ -478,29 +473,30 @@ function generate(ctx, name, pattern) {
   return {
     name: dashName,
     js: import_outdent7.outdent`
+    import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
-    import { ${ctx.jsxFactory} } from './factory'
-    import { ${styleFn} } from '../patterns/${dashName}'
+    ${ctx.getImport(ctx.jsxFactory, "./factory")}
+    ${ctx.getImport(styleFn, `../patterns/${dashName}`)}
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
       ${(0, import_ts_pattern.match)(props.length).with(
       0,
       () => import_outdent7.outdent`
-          return <${ctx.jsxFactory}.div ref={ref} {...props} />
+          return h(${ctx.jsxFactory}.div, { ref, ...props })
         `
     ).otherwise(
       () => import_outdent7.outdent`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFn}({${props.join(", ")}})
-        return <${ctx.jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
+        return h(${ctx.jsxFactory}.div, { ref, ...styleProps, ...restProps })
         `
     )}
     })    
     `,
     dts: import_outdent7.outdent`
-    import { FunctionComponent } from 'preact'
-    import { ${upperName}Properties } from '../patterns/${dashName}'
-    import { ${typeName} } from '../types/jsx'
+    import type { FunctionComponent } from 'preact'
+    import type { ${upperName}Properties } from '../patterns/${dashName}'
+    import type { ${typeName} } from '../types/jsx'
 
     export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'div'>, keyof ${upperName}Properties ${blocklistType}>
 
@@ -519,25 +515,25 @@ function generatePreactJsxTypes(ctx) {
   const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: import_outdent8.outdent`
-import { ${upperName} } from '../types/jsx'
+import type { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: import_outdent8.outdent`
-import { JSX, ComponentProps } from 'preact'
-import { JsxStyleProps, Assign } from '.'
-import { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
+import type { JSX, ComponentProps } from 'preact'
+import type { JsxStyleProps, Assign } from '.'
+import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 type ElementType = keyof JSX.IntrinsicElements
 
-type AdditionalHtmlProps = {
+type HTMLProps = {
   htmlSize?: string | number
   htmlWidth?: string | number
   htmlHeight?: string | number
   htmlTranslate?: 'yes' | 'no' | undefined
 }
 
-type Polyfill<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'> & AdditionalHtmlProps
+type Polyfill<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'> & HTMLProps
 
 type Props<T extends Dict, P extends Dict = {}> = Assign<Polyfill<T>, P>
 
@@ -561,10 +557,10 @@ function generateReactJsxFactory(ctx) {
   const { name, componentName } = ctx.jsxFactoryDetails;
   return {
     js: import_outdent9.outdent`
-    import { forwardRef, useMemo } from 'react'
-    import { css, cx, cva, assignCss } from '../css'
-    import { splitProps, normalizeHTMLProps } from '../helpers'
-    import { isCssProperty } from './is-valid-prop'
+    import { createElement, forwardRef, useMemo } from 'react'
+    ${ctx.getImport("css, cx, cva, assignCss", "../css/index")}
+    ${ctx.getImport("splitProps, normalizeHTMLProps", "../helpers")}
+    ${ctx.getImport("isCssProperty", "./is-valid-prop")}
     
     function styled(Dynamic, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
@@ -576,21 +572,19 @@ function generateReactJsxFactory(ctx) {
           return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
         }, [restProps])
     
-        function classes(){
+        function classes() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = cvaFn.resolve(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), elementProps.className)
         }
     
-        return(
-            <Element
-              ref={ref}
-              {...elementProps}
-              {...normalizeHTMLProps(htmlProps)}
-              className={classes()}
-            />
-          )
+        return createElement(Element, {
+          ref,
+          ...elementProps,
+          ...normalizeHTMLProps(htmlProps),
+          className: classes(),
+        })
       })
       
       ${componentName}.displayName = \`${name}.\${Dynamic}\`
@@ -627,47 +621,39 @@ function generateReactLayoutGrid() {
     import type { FunctionComponent } from 'react'
 
     export type LayoutGridProps = {
-        count?: number
-        gutter?: string
-        maxWidth?: string
-        margin?: string
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
     }
 
     export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
     `,
     js: import_outdent10.outdent`
+    import { createElement } from 'react'
+
     export function LayoutGrid(props) {
-        const { count = 12, margin, gutter = '24px', maxWidth } = props
-        const hasMaxWidth = maxWidth != null;
-        return (
-          <div
-            style={{
-              display: 'grid',
-              gap: gutter,
-              gridTemplateColumns: \`repeat(\${count}, 1fr)\`,
-              height: '100%',
-              width: '100%',
-              position: 'absolute',
-              inset: '0',
-              pointerEvents: 'none',
-              maxWidth: hasMaxWidth ? maxWidth : 'initial',
-              marginInline: hasMaxWidth ? 'auto' : undefined,
-              paddingInline: !hasMaxWidth ? margin : undefined,
-            }}
-          >
-            {Array.from({ length: count }).map((_, i) => (
-              <span
-                key={i}
-                style={{
-                  display: 'flex',
-                  background: 'rgba(255, 0, 0, 0.1)',
-                  height: '100%',
-                }}
-              />
-            ))}
-          </div>
-        );
-      }
+      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
+      const hasMaxWidth = maxWidth != null
+      return createElement('div', {
+        className: 'panda-layout-grid',
+        style: {
+          '--gutter': gutter,
+          '--count': count,
+          '--max-width': hasMaxWidth ? maxWidth : 'initial',
+          '--margin-x': hasMaxWidth ? 'auto' : undefined,
+          '--padding-x': !hasMaxWidth ? margin : undefined,
+        },
+        children: Array.from({ length: count }).map((_, i) =>
+          createElement('span', {
+            'data-variant': outline ? 'outline' : 'bg',
+            key: i,
+            className: 'panda-layout-grid__item',
+          }),
+        ),
+      })
+    }
     `
   };
 }
@@ -681,30 +667,29 @@ function generate2(ctx, name, pattern) {
   return {
     name: dashName,
     js: import_outdent11.outdent`
-    import { forwardRef } from 'react'
-    import { ${ctx.jsxFactory} } from './factory'
-    import { ${styleFn} } from '../patterns/${dashName}'
+    import { createElement, forwardRef } from 'react'
+    ${ctx.getImport(ctx.jsxFactory, "./factory")}
+    ${ctx.getImport(styleFn, `../patterns/${dashName}`)}
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
       ${(0, import_ts_pattern2.match)(props.length).with(
       0,
       () => import_outdent11.outdent`
-          return <${ctx.jsxFactory}.div ref={ref} {...props} />
+      return createElement(${ctx.jsxFactory}.div, { ref, ...props })
         `
     ).otherwise(
       () => import_outdent11.outdent`
-        const { ${props.join(", ")}, ...restProps } = props
-        const styleProps = ${styleFn}({${props.join(", ")}})
-        return <${ctx.jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
+      const { ${props.join(", ")}, ...restProps } = props
+      const styleProps = ${styleFn}({${props.join(", ")}})
+      return createElement(${ctx.jsxFactory}.div, { ref, ...styleProps, ...restProps })
         `
     )}
-        
     })    
     `,
     dts: import_outdent11.outdent`
-    import { FunctionComponent } from 'react'
-    import { ${upperName}Properties } from '../patterns/${dashName}'
-    import { ${typeName} } from '../types/jsx'
+    import type { FunctionComponent } from 'react'
+    import type { ${upperName}Properties } from '../patterns/${dashName}'
+    import type { ${typeName} } from '../types/jsx'
 
     export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'div'>, keyof ${upperName}Properties ${blocklistType}>
 
@@ -727,20 +712,20 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: import_outdent12.outdent`
-import { ElementType, ComponentProps } from 'react'
-import { JsxStyleProps, Assign } from '.'
-import { RecipeDefinition, RecipeSelection, RecipeVariantRecord, RecipeRuntimeFn } from './recipe'
+import type { ElementType, ComponentProps } from 'react'
+import type { JsxStyleProps, Assign } from '.'
+import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord, RecipeRuntimeFn } from './recipe'
 
 type Dict = Record<string, unknown>
 
-type AdditionalHtmlProps = {
+type HTMLProps = {
   htmlSize?: string | number
   htmlWidth?: string | number
   htmlHeight?: string | number
   htmlTranslate?: 'yes' | 'no' | undefined
 }
 
-type Polyfill<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'> & AdditionalHtmlProps
+type Polyfill<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'> & HTMLProps
 
 type Props<T extends Dict, P extends Dict = {}> = Assign<Polyfill<T>, P>
 
@@ -766,9 +751,10 @@ function generateSolidJsxFactory(ctx) {
     js: import_outdent13.outdent`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
-    import { css, cx, assignCss } from '../css'
-    import { splitProps, normalizeHTMLProps } from '../helpers'
-    import { allCssProperties } from './is-valid-prop'
+    import { createComponent } from 'solid-js/web'
+    ${ctx.getImport("css, cx, cva, assignCss", "../css/index")}
+    ${ctx.getImport("normalizeHTMLProps", "../helpers")}
+    ${ctx.getImport("allCssProperties", "./is-valid-prop")}
     
     function styled(element, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
@@ -776,10 +762,11 @@ function generateSolidJsxFactory(ctx) {
       return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
     
-        const [localProps, styleProps, htmlProps, elementProps] = splitProps(
+        const [localProps, styleProps, variantProps, htmlProps, elementProps] = splitProps(
           mergedProps,
           ['as', 'class'],
           allCssProperties,
+          cvaFn.variants,
           normalizeHTMLProps.keys
         )
     
@@ -790,13 +777,20 @@ function generateSolidJsxFactory(ctx) {
           return cx(css(styles), localProps.class)
         }
     
-        return (
-          <Dynamic
-            component={localProps.as}
-            {...elementProps}
-            {...normalizeHtmlProps(htmlProps)}
-            class={classes()}
-          />
+        return createComponent(
+          Dynamic,
+          mergeProps(
+            {
+              get component() {
+                return localProps.as
+              },
+              get class() {
+                return classes()
+              }
+            },
+            elementProps,
+            normalizeHTMLProps(htmlProps)
+          )
         )
       }
     }
@@ -827,50 +821,48 @@ var import_outdent14 = require("outdent");
 function generateSolidLayoutGrid() {
   return {
     dts: import_outdent14.outdent`
-    import { ParentProps } from 'solid-js'
+    import type { ParentProps } from 'solid-js'
     
     export type LayoutGridProps = {
-        count?: number
-        gutter?: string
-        maxWidth?: string
-        margin?: string
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
     }
 
     export declare const LayoutGrid: ParentProps<LayoutGridProps>
     `,
     js: import_outdent14.outdent`
+    import { createComponent, For } from 'solid-js/web'
+
     export function LayoutGrid(props) {
-        const { count = 12, margin, gutter = '24px', maxWidth } = props
-        const hasMaxWidth = maxWidth != null;
-        return (
-          <div
-            style={{
-              display: 'grid',
-              gap: gutter,
-              'grid-template-columns': \`repeat(\${count}, 1fr)\`,
-              height: '100%',
-              width: '100%',
-              position: 'absolute',
-              inset: '0',
-              'pointer-events': 'none',
-              'max-width': hasMaxWidth ? maxWidth : 'initial',
-              'margin-inline': hasMaxWidth ? 'auto' : undefined,
-              'padding-inline': !hasMaxWidth ? margin : undefined,
-            }}
-          >
-            {Array.from({ length: count }).map((_, i) => (
-              <span
-                key={i}
-                style={{
-                  display: 'flex',
-                  background: 'rgba(255, 0, 0, 0.1)',
-                  height: '100%',
-                }}
-              />
-            ))}
-          </div>
-        );
-      }
+      const { count = 12, margin, gutter = '24px', maxWidth, outline } = props
+      const hasMaxWidth = maxWidth != null
+      return createComponent('div', {
+        className: 'panda-layout-grid',
+        style: {
+          '--gutter': gutter,
+          '--count': count,
+          '--max-width': hasMaxWidth ? maxWidth : 'initial',
+          '--margin-x': hasMaxWidth ? 'auto' : undefined,
+          '--padding-x': !hasMaxWidth ? margin : undefined,
+        },
+        get children() {
+          return createComponent(For, {
+            get each() {
+              return Array.from({ length: count })
+            },
+            children: () =>
+              createComponent('span', {
+                'data-variant': outline ? 'outline' : 'bg',
+                className: 'panda-layout-grid__item',
+              }),
+          })
+        },
+      })
+    }
+    
     `
   };
 }
@@ -884,21 +876,22 @@ function generate3(ctx, name, pattern) {
   return {
     name: dashName,
     js: import_outdent15.outdent`
-    import { splitProps } from 'solid-js'
-    import { ${ctx.jsxFactory} } from './factory'
-    import { ${styleFn} } from '../patterns/${dashName}'
+    import { splitProps, mergeProps } from 'solid-js'
+    import { createComponent } from 'solid-js/web'
+    ${ctx.getImport(ctx.jsxFactory, "./factory")}
+    ${ctx.getImport(styleFn, `../patterns/${dashName}`)}
 
     export function ${jsxName}(props) {
       ${(0, import_ts_pattern3.match)(props.length).with(
       0,
       () => import_outdent15.outdent`
-          return <${ctx.jsxFactory}.div {...props} />
+          return createComponent(${ctx.jsxFactory}.div, props)
         `
     ).otherwise(
       () => import_outdent15.outdent`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFn}(patternProps)
-          return <${ctx.jsxFactory}.div {...styleProps} {...restProps} />
+          return createComponent(${ctx.jsxFactory}.div, mergeProps(styleProps, restProps))
         `
     )}
     }
@@ -925,26 +918,26 @@ function generateSolidJsxTypes(ctx) {
   const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: import_outdent16.outdent`
-import { ${upperName} } from '../types/jsx'
+import type { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: import_outdent16.outdent`
-import { JSX, ComponentProps, Component } from 'solid-js'
-import { JsxStyleProps, Assign } from '.'
-import { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
+import type { JSX, ComponentProps, Component } from 'solid-js'
+import type { JsxStyleProps, Assign } from '.'
+import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
 type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
-type AdditionalHtmlProps = {
+type HTMLProps = {
   htmlSize?: string | number
   htmlWidth?: string | number
   htmlHeight?: string | number
   htmlTranslate?: 'yes' | 'no' | undefined
 }
 
-type Polyfill<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'> & AdditionalHtmlProps
+type Polyfill<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'> & HTMLProps
 
 type Props<T extends Dict, P extends Dict = {}> = Assign<Polyfill<T>, P>
 
@@ -1011,10 +1004,10 @@ function generate4(ctx, name, pattern) {
   return {
     name: (0, import_shared.dashCase)(name),
     dts: import_outdent17.outdent`
-    import { SystemStyleObject, ConditionalValue } from '../types'
-    import { PropertyValue } from '../types/prop-type'
-    import { Properties } from '../types/csstype'
-    import { Tokens } from '../types/token'
+    import type { SystemStyleObject, ConditionalValue } from '../types'
+    import type { PropertyValue } from '../types/prop-type'
+    import type { Properties } from '../types/csstype'
+    import type { Tokens } from '../types/token'
 
     export type ${(0, import_shared.capitalize)(name)}Properties = {
        ${Object.keys(properties ?? {}).map((key) => {
@@ -1044,8 +1037,8 @@ function generate4(ctx, name, pattern) {
 
    `,
     js: import_outdent17.outdent`
-  import { mapObject } from '../helpers'
-  import { css } from '../css'
+  ${ctx.getImport("mapObject", "../helpers")}
+  ${ctx.getImport("css", "../css/index")}
 
   const config = ${(0, import_javascript_stringify.stringify)({ transform })}
 
@@ -1061,15 +1054,35 @@ function generatePattern(ctx) {
   return Object.entries(ctx.patterns).map(([name, pattern]) => generate4(ctx, name, pattern));
 }
 
+// src/generators/pkg-json.ts
+function generatePackageJSON(ctx) {
+  const pkg = {
+    name: ctx.outdir,
+    description: "This package is auto-generated by CSS Panda",
+    version: `0.0.0-${performance.now()}`,
+    type: "module",
+    exports: {
+      "./css": { types: "./css/index.d.ts", import: "./css/index.mjs" },
+      "./jsx": { types: "./jsx/index.d.ts", import: "./jsx/index.mjs" },
+      "./patterns": { types: "./patterns/index.d.ts", import: "./patterns/index.mjs" },
+      "./recipes": { types: "./recipes/index.d.ts", import: "./recipes/index.mjs" },
+      "./tokens": { types: "./tokens/index.d.ts", import: "./tokens/index.mjs" },
+      "./types": { types: "./types/index.d.ts" },
+      "./styles.css": "./styles.css"
+    }
+  };
+  return JSON.stringify(pkg, null, 2);
+}
+
 // src/generators/prop-types.ts
 var import_outdent18 = require("outdent");
 function generatePropTypes(utility, strict) {
   const strictText = `${strict ? "" : " | NativeValue<T>"}`;
   const result = [
     import_outdent18.outdent`
-    import { ConditionalValue } from './conditions';
-    import { Properties as CSSProperties } from './csstype'
-    import { Tokens } from './token'
+    import type { ConditionalValue } from './conditions';
+    import type { Properties as CSSProperties } from './csstype'
+    import type { Tokens } from './token'
 
     type PropertyValueTypes  = {`
   ];
@@ -1110,7 +1123,7 @@ function generateRecipes(ctx) {
     return;
   const js = [
     import_outdent19.outdent`
-   import { createCss, withoutSpace, compact } from '../helpers'
+   ${ctx.getImport("createCss, withoutSpace, compact", "../helpers")}
 
    const createRecipe = (name, defaultVariants) => {
      return (variants) => {
@@ -1126,6 +1139,7 @@ function generateRecipes(ctx) {
       const context = {
         hash: ${hash ? "true" : "false"},
         utility: {
+          prefix: ${ctx.prefix ? JSON.stringify(ctx.prefix) : void 0},
           transform,
         }
       }
@@ -1143,7 +1157,7 @@ function generateRecipes(ctx) {
   ];
   const dts = [
     import_outdent19.outdent`
-  import { ConditionalValue } from '../types'
+  import type { ConditionalValue } from '../types'
   `
   ];
   Object.values(recipes).forEach((recipe) => {
@@ -1381,20 +1395,22 @@ function generateTokenJs(dict) {
     js: import_outdent21.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
-  export function getToken(path) {
-    const { value } = tokens[path] || {}
-    return value
+  export function token(path, fallback) {
+    return tokens[path]?.value || fallback
   }
   
-  export function getTokenVar(path) {
-    const { variable } = tokens[path] || {}
-    return variable
+  function tokenVar(path, fallback) {
+    return tokens[path]?.variable || fallback
   }
+
+  token.var = tokenVar
   `,
     dts: import_outdent21.default`
-  import { Token } from "../types/token"
-  export declare function getToken(path: Token): string
-  export declare function getTokenVar(path: Token): string
+  import type { Token } from '../types/token'
+
+  export declare function token(path: Token, fallback?: string): string & {
+    var: (path: Token, fallback?: string) => string
+  }
   `
   };
 }
@@ -1414,7 +1430,21 @@ function generateCssType(ctx) {
     system: getType("system-types.d.ts"),
     selectors: getType("selectors.d.ts"),
     recipe: getType("recipe.d.ts"),
+    composition: getType("composition.d.ts"),
+    global: import_outdent22.default`
+    import { RecipeVariantRecord, RecipeConfig } from './recipe'
+    import { GlobalStyleObject } from './system-types'
+    import { CompositionStyles } from './composition'
+    
+    declare module 'css-panda' {
+      export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig<V>
+      export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
+      export function defineTextStyles(definition: CompositionStyles['textStyles']): CompositionStyles['textStyles']
+      export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
+    }
+    `,
     exported: import_outdent22.default`
+    import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
     
@@ -1440,8 +1470,7 @@ function setupHelpers(ctx) {
   const sharedMjs = getEntrypoint("@pandacss/shared", { dev: "shared.mjs" });
   const code = (0, import_fs2.readFileSync)(sharedMjs, "utf-8");
   return {
-    dir: ctx.outdir,
-    files: [{ file: ctx.getJsFile("helpers"), code }]
+    files: [{ file: ctx.getExt("helpers"), code }]
   };
 }
 function setupKeyframes(ctx) {
@@ -1452,9 +1481,8 @@ function setupKeyframes(ctx) {
   };
 }
 function setupDesignTokens(ctx) {
-  if (ctx.tokens.isEmpty) {
-    return { files: [] };
-  }
+  if (ctx.tokens.isEmpty)
+    return;
   const code = generateTokenJs(ctx.tokens);
   const css2 = generateTokenCss(ctx);
   return {
@@ -1462,7 +1490,7 @@ function setupDesignTokens(ctx) {
     files: [
       { file: "index.css", code: css2 },
       { file: "index.d.ts", code: code.dts },
-      { file: ctx.getJsFile("index"), code: code.js }
+      { file: ctx.getExt("index"), code: code.js }
     ]
   };
 }
@@ -1477,6 +1505,8 @@ function setupTypes(ctx) {
       { file: "csstype.d.ts", code: types.css },
       { file: "system-types.d.ts", code: types.system },
       { file: "selectors.d.ts", code: types.selectors },
+      { file: "composition.d.ts", code: types.composition },
+      { file: "global.d.ts", code: types.global },
       { file: "recipe.d.ts", code: types.recipe },
       { file: "index.d.ts", code: types.exported },
       { file: "token.d.ts", code: generateTokenDts(ctx.tokens) },
@@ -1492,18 +1522,18 @@ function setupCss(ctx) {
   return {
     dir: ctx.paths.css,
     files: [
-      { file: ctx.getJsFile("conditions"), code: conditions.js },
-      { file: ctx.getJsFile("css"), code: code.js },
+      { file: ctx.getExt("conditions"), code: conditions.js },
+      { file: ctx.getExt("css"), code: code.js },
       { file: "css.d.ts", code: code.dts }
     ]
   };
 }
 function setupCva(ctx) {
-  const code = generateCvaFn();
+  const code = generateCvaFn(ctx);
   return {
     dir: ctx.paths.css,
     files: [
-      { file: ctx.getJsFile("cva"), code: code.js },
+      { file: ctx.getExt("cva"), code: code.js },
       { file: "cva.d.ts", code: code.dts }
     ]
   };
@@ -1513,94 +1543,111 @@ function setupCx(ctx) {
   return {
     dir: ctx.paths.css,
     files: [
-      { file: ctx.getJsFile("cx"), code: code.js },
+      { file: ctx.getExt("cx"), code: code.js },
       { file: "cx.d.ts", code: code.dts }
     ]
   };
 }
 function setupRecipes(ctx) {
   const code = generateRecipes(ctx);
-  if (!code) {
-    return { files: [] };
-  }
+  if (!code)
+    return;
   return {
     dir: ctx.paths.recipe,
     files: [
-      { file: ctx.getJsFile("index"), code: code.js },
+      { file: ctx.getExt("index"), code: code.js },
       { file: "index.d.ts", code: code.dts }
     ]
   };
 }
 function setupPatterns(ctx) {
   const files = generatePattern(ctx);
-  if (!files) {
-    return { files: [] };
-  }
-  const indexCode = import_outdent23.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  if (!files)
+    return;
+  const index = {
+    js: import_outdent23.default.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
+    dts: import_outdent23.default.string(files.map((file) => `export { ${file.name} } from './${file.name}'`).join("\n"))
+  };
   return {
     dir: ctx.paths.pattern,
     files: [
-      ...files.map((file) => ({ file: ctx.getJsFile(file.name), code: file.js })),
+      ...files.map((file) => ({ file: ctx.getExt(file.name), code: file.js })),
       ...files.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
-      { file: ctx.getJsFile("index"), code: indexCode },
-      { file: "index.d.ts", code: indexCode }
+      { file: ctx.getExt("index"), code: index.js },
+      { file: "index.d.ts", code: index.dts }
     ]
   };
 }
 function setupJsx(ctx) {
   if (!ctx.jsxFramework)
-    return { files: [] };
+    return;
   const isValidProp = generateisValidProp(ctx);
   const types = generateJsxTypes(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const layoutGrid = generateLayoutGrid(ctx);
-  const indexCode = import_outdent23.default`
+  const index = {
+    js: import_outdent23.default`
+  ${ctx.getExport("./factory")}
+  ${ctx.getExport("./layout-grid")}
+  ${import_outdent23.default.string(patterns.map((file) => ctx.getExport(`./${file.name}`)).join("\n"))}
+  `,
+    dts: import_outdent23.default`
   export * from './factory'
   export * from './layout-grid'
   ${import_outdent23.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
-`;
+  export type { ${ctx.jsxFactoryDetails.typeName} } from '../types/jsx'
+    `
+  };
   return {
     dir: ctx.paths.jsx,
     files: [
-      ...patterns.map((file) => ({ file: `${file.name}.jsx`, code: file.js })),
+      ...patterns.map((file) => ({ file: `${file.name}.mjs`, code: file.js })),
       ...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
-      { file: "layout-grid.jsx", code: layoutGrid.js },
+      { file: "layout-grid.mjs", code: layoutGrid.js },
       { file: "layout-grid.d.ts", code: layoutGrid.dts },
-      { file: ctx.getJsFile("is-valid-prop"), code: isValidProp.js },
+      { file: ctx.getExt("is-valid-prop"), code: isValidProp.js },
       { file: "factory.d.ts", code: types.jsxFactory },
-      { file: "factory.jsx", code: factory.js },
-      {
-        file: "index.d.ts",
-        code: import_outdent23.default`
-        ${indexCode}
-        export type { ${ctx.jsxFactoryDetails.typeName} } from '../types/jsx'
-      `
-      },
-      { file: "index.jsx", code: indexCode }
+      { file: "factory.mjs", code: factory.js },
+      { file: "index.d.ts", code: index.dts },
+      { file: "index.mjs", code: index.js }
     ]
   };
 }
 function setupCssIndex(ctx) {
-  const code = import_outdent23.default`
+  const index = {
+    js: import_outdent23.default`
+  ${ctx.getExport("./css")}
+  ${ctx.getExport("./cx")}
+  ${ctx.getExport("./cva")}
+ `,
+    dts: import_outdent23.default`
   export * from './css'
   export * from './cx'
   export * from './cva'
- `;
+  `
+  };
   return {
     dir: ctx.paths.css,
     files: [
-      { file: ctx.getJsFile("index"), code },
-      { file: "index.d.ts", code }
+      { file: ctx.getExt("index"), code: index.js },
+      { file: "index.d.ts", code: index.dts }
     ]
   };
 }
 function setupReset(ctx) {
   if (!ctx.preflight)
-    return { files: [] };
+    return;
   const code = generateReset();
   return { files: [{ file: "reset.css", code }] };
 }
+function setupPackageJson(ctx) {
+  if (!ctx.emitPackage)
+    return;
+  return {
+    files: [{ file: "package.json", code: generatePackageJSON(ctx) }]
+  };
+}
 function generateSystem(ctx) {
   return [
     setupHelpers(ctx),
@@ -1614,8 +1661,9 @@ function generateSystem(ctx) {
     setupPatterns(ctx),
     setupCssIndex(ctx),
     setupJsx(ctx),
-    setupReset(ctx)
-  ];
+    setupReset(ctx),
+    setupPackageJson(ctx)
+  ].filter(Boolean);
 }
 
 // src/messages.ts
@@ -1700,10 +1748,14 @@ async function emitArtifacts(ctx) {
 }
 async function emitAndExtract(ctx) {
   await emitArtifacts(ctx);
+  return extractCss(ctx);
+}
+async function extractCss(ctx) {
   await extractGlobalCss(ctx);
   await extractStaticCss(ctx);
   await extractFiles(ctx);
   await bundleChunks(ctx);
+  return buildCompleteMessage(ctx);
 }
 function getBaseCss(ctx) {
   const css2 = [
@@ -1763,7 +1815,7 @@ function createContext(conf, io = fileSystem) {
   const {
     cwd: cwdProp = process.cwd(),
     conditions: conditionsProp = {},
-    cssVarPrefix,
+    prefix,
     cssVarRoot = ":where(:root, :host)",
     outdir,
     exclude: excludeProp = [],
@@ -1776,7 +1828,8 @@ function createContext(conf, io = fileSystem) {
     globalCss,
     separator,
     static: staticCss,
-    outExtension = "mjs"
+    outExtension = "mjs",
+    emitPackage
   } = config;
   const {
     breakpoints = {},
@@ -1794,15 +1847,17 @@ function createContext(conf, io = fileSystem) {
     framework: jsxFramework
   };
   const cwd = (0, import_path2.resolve)(cwdProp);
-  const exclude = [".git", "node_modules", "test-results"].concat(excludeProp);
+  const exclude = [".git", ".yarn", "node_modules", "test-results"].concat(excludeProp);
   const tokens = new import_token_dictionary.TokenDictionary({
     tokens: tokensProp,
+    breakpoints,
     semanticTokens,
-    prefix: cssVarPrefix
+    prefix
   });
   const hasTokens = !tokens.isEmpty;
   import_logger4.logger.debug({ type: "ctx:token", msg: tokens.allNames });
   const utility = new import_core3.Utility({
+    prefix,
     tokens,
     config: utilities,
     separator
@@ -1889,14 +1944,24 @@ function createContext(conf, io = fileSystem) {
   function isStyleProp(prop) {
     return (0, import_is_valid_prop3.isCssProperty)(prop) || isCustomCssProperty(prop);
   }
-  function getPath(...str) {
-    return (0, import_path2.join)(cwd, outdir, ...str);
+  function getPath(pathLike) {
+    const paths2 = [cwd, emitPackage ? "node_modules" : void 0, outdir, pathLike].filter(Boolean);
+    return (0, import_path2.join)(...paths2);
   }
   function absPath(str) {
     return (0, import_path2.isAbsolute)(str) ? str : (0, import_path2.join)(cwd, str);
   }
+  function getExt(file) {
+    return `${file}.${outExtension}`;
+  }
+  function getImport(items, mod) {
+    return `import { ${items} } from '${getExt(mod)}';`;
+  }
+  function getExport(mod) {
+    return `export * from '${getExt(mod)}';`;
+  }
   const paths = {
-    config: getPath("config.js"),
+    root: getPath(),
     css: getPath("css"),
     token: getPath("tokens"),
     types: getPath("types"),
@@ -1918,15 +1983,14 @@ function createContext(conf, io = fileSystem) {
     );
   }
   function cleanOutdir() {
-    return (0, import_fs_extra2.emptyDir)(outdir);
+    return (0, import_fs_extra2.emptyDir)(paths.root);
   }
   function writeOutput(output) {
-    const { dir = outdir, files: files2 } = output;
+    if (!output)
+      return;
+    const { dir = paths.root, files: files2 } = output;
     return write(dir, files2);
   }
-  function getJsFile(file) {
-    return `${file}.${outExtension}`;
-  }
   const chunks = {
     dir: paths.chunk,
     readFile(file) {
@@ -1956,6 +2020,9 @@ function createContext(conf, io = fileSystem) {
       const fileName = chunks.format(file);
       return io.rm((0, import_path2.join)(paths.chunk, fileName));
     },
+    empty() {
+      return (0, import_fs_extra2.emptyDir)(paths.chunk);
+    },
     glob: [`${paths.chunk}/**/*.css`]
   };
   function getFiles() {
@@ -2018,6 +2085,30 @@ function createContext(conf, io = fileSystem) {
     sheet.processGlobalCss({
       ":root": {
         "--made-with-panda": `'\u{1F43C}'`
+      },
+      ".panda-layout-grid": {
+        display: "grid",
+        gap: "var(--gutter)",
+        gridTemplateColumns: "repeat(var(--count), 1fr)",
+        height: "100%",
+        width: "100%",
+        position: "absolute",
+        inset: "0",
+        pointerEvents: "none",
+        maxWidth: "var(--max-width)",
+        marginInline: "var(--margin-x)",
+        paddingInline: "var(--padding-x)"
+      },
+      ".panda-layout-grid__item": {
+        display: "flex",
+        "--color": "rgba(255, 0, 0, 0.1)",
+        height: "100%",
+        "&[data-variant=bg]": {
+          background: "var(--color)"
+        },
+        "&[data-variant=outline]": {
+          borderInline: "1px solid var(--color)"
+        }
       }
     });
     if (globalCss) {
@@ -2131,7 +2222,9 @@ function createContext(conf, io = fileSystem) {
     write,
     writeOutput,
     cleanOutdir,
-    getJsFile,
+    getExt,
+    getImport,
+    getExport,
     cssVarRoot,
     tokens,
     hasTokens,
@@ -2417,8 +2510,8 @@ process.on("uncaughtException", (err) => {
 // src/generate.ts
 async function build(config, configPath) {
   const ctx = await loadConfigAndCreateContext({ config, configPath });
-  await emitAndExtract(ctx);
-  import_logger8.logger.info(buildCompleteMessage(ctx));
+  const msg = await emitAndExtract(ctx);
+  import_logger8.logger.info(msg);
   return ctx;
 }
 async function generate5(config, configPath) {
@@ -2519,6 +2612,7 @@ async function setupPostcss(cwd) {
   emitAndExtract,
   emitArtifacts,
   execCommand,
+  extractCss,
   generate,
   loadConfigAndCreateContext,
   setupConfig,