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

package/dist/index.mjs

@@ -69,7 +69,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) {
   logger2.info(`File changed: ${file}`);
@@ -89,7 +89,8 @@ function generateConditions(ctx) {
   const keys = Object.keys(ctx.conditions.values).concat("base");
   return {
     js: outdent`
-    import { withoutSpace } from '../helpers'
+    ${ctx.getImport("withoutSpace", "../helpers")}
+    
     const conditions = new Set([${keys.map((key) => JSON.stringify(key))}])
     
     export function isCondition(value){
@@ -157,12 +158,12 @@ function generateCssFn(ctx) {
   const { separator } = utility;
   return {
     dts: outdent2`
-    import { SystemStyleObject } from '../types'
+    import type { SystemStyleObject } from '../types'
     export declare function css(styles: SystemStyleObject): string
     `,
     js: outdent2`
-    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())}
     
@@ -176,7 +177,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 }
     }
@@ -189,6 +190,7 @@ function generateCssFn(ctx) {
         breakpoints: { keys: breakpointKeys }
       },
       utility: {
+        prefix: ${ctx.prefix ? JSON.stringify(ctx.prefix) : void 0},
         transform,
         hasShorthand,
         resolveShorthand,
@@ -204,11 +206,11 @@ function generateCssFn(ctx) {
 
 // src/generators/cva.ts
 import { outdent as outdent3 } from "outdent";
-function generateCvaFn() {
+function generateCvaFn(ctx) {
   return {
     js: outdent3`
-    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
@@ -237,7 +239,7 @@ function generateCvaFn() {
     }
     `,
     dts: outdent3`
-    import { RecipeCreatorFn } from '../types/recipe'
+    import type { RecipeCreatorFn } from '../types/recipe'
 
     export declare const cva: RecipeCreatorFn
 
@@ -316,9 +318,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)
@@ -330,7 +332,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)
@@ -378,47 +380,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: outdent6`
+    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',
+          }),
+        ),
+      });
+    }
     `
   };
 }
@@ -432,29 +426,30 @@ function generate(ctx, name, pattern) {
   return {
     name: dashName,
     js: outdent7`
+    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) {
       ${match(props.length).with(
       0,
       () => outdent7`
-          return <${ctx.jsxFactory}.div ref={ref} {...props} />
+          return h(${ctx.jsxFactory}.div, { ref, ...props })
         `
     ).otherwise(
       () => outdent7`
         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: outdent7`
-    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}>
 
@@ -473,25 +468,25 @@ function generatePreactJsxTypes(ctx) {
   const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: outdent8`
-import { ${upperName} } from '../types/jsx'
+import type { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: outdent8`
-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>
 
@@ -515,10 +510,10 @@ function generateReactJsxFactory(ctx) {
   const { name, componentName } = ctx.jsxFactoryDetails;
   return {
     js: outdent9`
-    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)
@@ -530,21 +525,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}\`
@@ -581,47 +574,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: outdent10`
+    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',
+          }),
+        ),
+      })
+    }
     `
   };
 }
@@ -635,30 +620,29 @@ function generate2(ctx, name, pattern) {
   return {
     name: dashName,
     js: outdent11`
-    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) {
       ${match2(props.length).with(
       0,
       () => outdent11`
-          return <${ctx.jsxFactory}.div ref={ref} {...props} />
+      return createElement(${ctx.jsxFactory}.div, { ref, ...props })
         `
     ).otherwise(
       () => outdent11`
-        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: outdent11`
-    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}>
 
@@ -681,20 +665,20 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: outdent12`
-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>
 
@@ -720,9 +704,10 @@ function generateSolidJsxFactory(ctx) {
     js: outdent13`
     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)
@@ -730,10 +715,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
         )
     
@@ -744,13 +730,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)
+          )
         )
       }
     }
@@ -781,50 +774,48 @@ import { outdent as outdent14 } from "outdent";
 function generateSolidLayoutGrid() {
   return {
     dts: outdent14`
-    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: outdent14`
+    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',
+              }),
+          })
+        },
+      })
+    }
+    
     `
   };
 }
@@ -838,21 +829,22 @@ function generate3(ctx, name, pattern) {
   return {
     name: dashName,
     js: outdent15`
-    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) {
       ${match3(props.length).with(
       0,
       () => outdent15`
-          return <${ctx.jsxFactory}.div {...props} />
+          return createComponent(${ctx.jsxFactory}.div, props)
         `
     ).otherwise(
       () => outdent15`
           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))
         `
     )}
     }
@@ -879,26 +871,26 @@ function generateSolidJsxTypes(ctx) {
   const { name, componentName, upperName, typeName } = ctx.jsxFactoryDetails;
   return {
     jsxFactory: outdent16`
-import { ${upperName} } from '../types/jsx'
+import type { ${upperName} } from '../types/jsx'
 export declare const ${name}: ${upperName}
     `,
     jsxType: outdent16`
-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>
 
@@ -965,10 +957,10 @@ function generate4(ctx, name, pattern) {
   return {
     name: dashCase(name),
     dts: outdent17`
-    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 ${capitalize(name)}Properties = {
        ${Object.keys(properties ?? {}).map((key) => {
@@ -998,8 +990,8 @@ function generate4(ctx, name, pattern) {
 
    `,
     js: outdent17`
-  import { mapObject } from '../helpers'
-  import { css } from '../css'
+  ${ctx.getImport("mapObject", "../helpers")}
+  ${ctx.getImport("css", "../css/index")}
 
   const config = ${stringify2({ transform })}
 
@@ -1015,15 +1007,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
 import { outdent as outdent18 } from "outdent";
 function generatePropTypes(utility, strict) {
   const strictText = `${strict ? "" : " | NativeValue<T>"}`;
   const result = [
     outdent18`
-    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  = {`
   ];
@@ -1064,7 +1076,7 @@ function generateRecipes(ctx) {
     return;
   const js = [
     outdent19`
-   import { createCss, withoutSpace, compact } from '../helpers'
+   ${ctx.getImport("createCss, withoutSpace, compact", "../helpers")}
 
    const createRecipe = (name, defaultVariants) => {
      return (variants) => {
@@ -1080,6 +1092,7 @@ function generateRecipes(ctx) {
       const context = {
         hash: ${hash ? "true" : "false"},
         utility: {
+          prefix: ${ctx.prefix ? JSON.stringify(ctx.prefix) : void 0},
           transform,
         }
       }
@@ -1097,7 +1110,7 @@ function generateRecipes(ctx) {
   ];
   const dts = [
     outdent19`
-  import { ConditionalValue } from '../types'
+  import type { ConditionalValue } from '../types'
   `
   ];
   Object.values(recipes).forEach((recipe) => {
@@ -1335,20 +1348,22 @@ function generateTokenJs(dict) {
     js: outdent21`
   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: outdent21`
-  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
+  }
   `
   };
 }
@@ -1368,7 +1383,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: outdent22`
+    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: outdent22`
+    import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
     
@@ -1394,8 +1423,7 @@ function setupHelpers(ctx) {
   const sharedMjs = getEntrypoint("@pandacss/shared", { dev: "shared.mjs" });
   const code = readFileSync3(sharedMjs, "utf-8");
   return {
-    dir: ctx.outdir,
-    files: [{ file: ctx.getJsFile("helpers"), code }]
+    files: [{ file: ctx.getExt("helpers"), code }]
   };
 }
 function setupKeyframes(ctx) {
@@ -1406,9 +1434,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 {
@@ -1416,7 +1443,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 }
     ]
   };
 }
@@ -1431,6 +1458,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) },
@@ -1446,18 +1475,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 }
     ]
   };
@@ -1467,94 +1496,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 = outdent23.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  if (!files)
+    return;
+  const index = {
+    js: outdent23.string(files.map((file) => ctx.getExport(`./${file.name}`)).join("\n")),
+    dts: outdent23.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 = outdent23`
+  const index = {
+    js: outdent23`
+  ${ctx.getExport("./factory")}
+  ${ctx.getExport("./layout-grid")}
+  ${outdent23.string(patterns.map((file) => ctx.getExport(`./${file.name}`)).join("\n"))}
+  `,
+    dts: outdent23`
   export * from './factory'
   export * from './layout-grid'
   ${outdent23.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: outdent23`
-        ${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 = outdent23`
+  const index = {
+    js: outdent23`
+  ${ctx.getExport("./css")}
+  ${ctx.getExport("./cx")}
+  ${ctx.getExport("./cva")}
+ `,
+    dts: outdent23`
   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),
@@ -1568,8 +1614,9 @@ function generateSystem(ctx) {
     setupPatterns(ctx),
     setupCssIndex(ctx),
     setupJsx(ctx),
-    setupReset(ctx)
-  ];
+    setupReset(ctx),
+    setupPackageJson(ctx)
+  ].filter(Boolean);
 }
 
 // src/messages.ts
@@ -1654,10 +1701,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 = [
@@ -1724,7 +1775,7 @@ function createContext(conf, io = fileSystem) {
   const {
     cwd: cwdProp = process.cwd(),
     conditions: conditionsProp = {},
-    cssVarPrefix,
+    prefix,
     cssVarRoot = ":where(:root, :host)",
     outdir,
     exclude: excludeProp = [],
@@ -1737,7 +1788,8 @@ function createContext(conf, io = fileSystem) {
     globalCss,
     separator,
     static: staticCss,
-    outExtension = "mjs"
+    outExtension = "mjs",
+    emitPackage
   } = config;
   const {
     breakpoints = {},
@@ -1755,15 +1807,17 @@ function createContext(conf, io = fileSystem) {
     framework: jsxFramework
   };
   const cwd = resolve(cwdProp);
-  const exclude = [".git", "node_modules", "test-results"].concat(excludeProp);
+  const exclude = [".git", ".yarn", "node_modules", "test-results"].concat(excludeProp);
   const tokens = new TokenDictionary({
     tokens: tokensProp,
+    breakpoints,
     semanticTokens,
-    prefix: cssVarPrefix
+    prefix
   });
   const hasTokens = !tokens.isEmpty;
   logger4.debug({ type: "ctx:token", msg: tokens.allNames });
   const utility = new Utility({
+    prefix,
     tokens,
     config: utilities,
     separator
@@ -1850,14 +1904,24 @@ function createContext(conf, io = fileSystem) {
   function isStyleProp(prop) {
     return isCssProperty(prop) || isCustomCssProperty(prop);
   }
-  function getPath(...str) {
-    return join2(cwd, outdir, ...str);
+  function getPath(pathLike) {
+    const paths2 = [cwd, emitPackage ? "node_modules" : void 0, outdir, pathLike].filter(Boolean);
+    return join2(...paths2);
   }
   function absPath(str) {
     return isAbsolute(str) ? str : join2(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"),
@@ -1879,15 +1943,14 @@ function createContext(conf, io = fileSystem) {
     );
   }
   function cleanOutdir() {
-    return emptyDir(outdir);
+    return 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) {
@@ -1917,6 +1980,9 @@ function createContext(conf, io = fileSystem) {
       const fileName = chunks.format(file);
       return io.rm(join2(paths.chunk, fileName));
     },
+    empty() {
+      return emptyDir(paths.chunk);
+    },
     glob: [`${paths.chunk}/**/*.css`]
   };
   function getFiles() {
@@ -1979,6 +2045,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) {
@@ -2092,7 +2182,9 @@ function createContext(conf, io = fileSystem) {
     write,
     writeOutput,
     cleanOutdir,
-    getJsFile,
+    getExt,
+    getImport,
+    getExport,
     cssVarRoot,
     tokens,
     hasTokens,
@@ -2378,8 +2470,8 @@ process.on("uncaughtException", (err) => {
 // src/generate.ts
 async function build(config, configPath) {
   const ctx = await loadConfigAndCreateContext({ config, configPath });
-  await emitAndExtract(ctx);
-  logger8.info(buildCompleteMessage(ctx));
+  const msg = await emitAndExtract(ctx);
+  logger8.info(msg);
   return ctx;
 }
 async function generate5(config, configPath) {
@@ -2479,6 +2571,7 @@ export {
   emitAndExtract,
   emitArtifacts,
   execCommand,
+  extractCss,
   generate5 as generate,
   loadConfigAndCreateContext,
   setupConfig,