@pandacss/node 0.0.0-dev-20221124074636 → 0.0.0-dev-20221124141119

package/dist/index.js

@@ -115,7 +115,7 @@ async function writeFileChunk(ctx, file) {
 // src/generators/index.ts
 var import_fs2 = require("fs");
 var import_look_it_up = require("look-it-up");
-var import_outdent19 = __toESM(require("outdent"));
+var import_outdent22 = __toESM(require("outdent"));
 var import_path2 = require("path");
 
 // src/generators/conditions.ts
@@ -377,9 +377,62 @@ function generatePreactJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/preact-layout-grid.ts
+var import_outdent7 = require("outdent");
+function generatePreactLayoutGrid() {
+  return {
+    dts: import_outdent7.outdent`
+    import { FunctionComponent } from 'preact'
+
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
+    `,
+    js: import_outdent7.outdent`
+    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>
+        );
+      }
+    `
+  };
+}
+
 // src/generators/jsx/preact-pattern.ts
 var import_shared3 = require("@pandacss/shared");
-var import_outdent7 = require("outdent");
+var import_outdent8 = require("outdent");
 var import_ts_pattern = require("ts-pattern");
 function generate(name, pattern, jsxFactory) {
   const upperName = (0, import_shared3.capitalize)(name);
@@ -387,7 +440,7 @@ function generate(name, pattern, jsxFactory) {
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: (0, import_shared3.dashCase)(name),
-    js: import_outdent7.outdent`
+    js: import_outdent8.outdent`
     import { forwardRef } from 'preact/compat'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${(0, import_shared3.dashCase)(name)}'
@@ -407,7 +460,7 @@ function generate(name, pattern, jsxFactory) {
     )}
     })    
     `,
-    dts: import_outdent7.outdent`
+    dts: import_outdent8.outdent`
     import { ComponentProps, JSX, ComponentChildren } from 'preact';
     import { ${upperName}Options } from '../patterns/${(0, import_shared3.dashCase)(name)}'
     import { JSXStyleProperties, Assign } from '../types'
@@ -434,12 +487,12 @@ function generatePreactJsxPattern(ctx) {
 
 // src/generators/jsx/react-jsx.ts
 var import_shared4 = require("@pandacss/shared");
-var import_outdent8 = require("outdent");
+var import_outdent9 = require("outdent");
 function generateReactJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = (0, import_shared4.capitalize)(name);
   return {
-    dts: import_outdent8.outdent`
+    dts: import_outdent9.outdent`
     import type { ComponentProps } from "react"
     import type { JSXStyleProperties } from "../types"
     
@@ -453,7 +506,7 @@ function generateReactJsxFactory(ctx) {
 
     export declare const ${name}: JSXFactory
     `,
-    js: import_outdent8.outdent`
+    js: import_outdent9.outdent`
     import { forwardRef } from 'react'
     import { isCssProperty } from './is-valid-prop'
     import { css } from '../css'
@@ -514,9 +567,62 @@ function generateReactJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/react-layout-grid.ts
+var import_outdent10 = require("outdent");
+function generateReactLayoutGrid() {
+  return {
+    dts: import_outdent10.outdent`
+    import type { FunctionComponent } from 'react'
+
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
+    `,
+    js: import_outdent10.outdent`
+    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>
+        );
+      }
+    `
+  };
+}
+
 // src/generators/jsx/react-pattern.ts
 var import_shared5 = require("@pandacss/shared");
-var import_outdent9 = require("outdent");
+var import_outdent11 = require("outdent");
 var import_ts_pattern2 = require("ts-pattern");
 function generate2(name, pattern, jsxFactory) {
   const upperName = (0, import_shared5.capitalize)(name);
@@ -524,7 +630,7 @@ function generate2(name, pattern, jsxFactory) {
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: (0, import_shared5.dashCase)(name),
-    js: import_outdent9.outdent`
+    js: import_outdent11.outdent`
     import { forwardRef } from 'react'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${(0, import_shared5.dashCase)(name)}'
@@ -545,7 +651,7 @@ function generate2(name, pattern, jsxFactory) {
         
     })    
     `,
-    dts: import_outdent9.outdent`
+    dts: import_outdent11.outdent`
     import { ComponentProps, ElementType, PropsWithChildren } from 'react'
     import { ${upperName}Options } from '../patterns/${(0, import_shared5.dashCase)(name)}'
     import { JSXStyleProperties, Assign } from '../types'
@@ -569,12 +675,12 @@ function generateReactJsxPattern(ctx) {
 
 // src/generators/jsx/solid-jsx.ts
 var import_shared6 = require("@pandacss/shared");
-var import_outdent10 = require("outdent");
+var import_outdent12 = require("outdent");
 function generateSolidJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = (0, import_shared6.capitalize)(name);
   return {
-    dts: import_outdent10.outdent`
+    dts: import_outdent12.outdent`
     import type { JSX } from 'solid-js'
     import type { JSXStyleProperties, Assign} from '../types'
     
@@ -588,7 +694,7 @@ function generateSolidJsxFactory(ctx) {
 
     export declare const ${name}: JSXFactory
     `,
-    js: import_outdent10.outdent`
+    js: import_outdent12.outdent`
     import { Dynamic } from 'solid-js/web';
     import { mergeProps, splitProps } from 'solid-js';
     import { allCssProperties } from './is-valid-prop'
@@ -636,9 +742,60 @@ function generateSolidJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/solid-layout-grid.ts
+var import_outdent13 = require("outdent");
+function generateSolidLayoutGrid() {
+  return {
+    dts: import_outdent13.outdent`
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: React.FC<LayoutGridProps>
+    `,
+    js: import_outdent13.outdent`
+    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>
+        );
+      }
+    `
+  };
+}
+
 // src/generators/jsx/solid-pattern.ts
 var import_shared7 = require("@pandacss/shared");
-var import_outdent11 = require("outdent");
+var import_outdent14 = require("outdent");
 var import_ts_pattern3 = require("ts-pattern");
 function generate3(name, pattern, jsxFactory) {
   const upperName = (0, import_shared7.capitalize)(name);
@@ -646,7 +803,7 @@ function generate3(name, pattern, jsxFactory) {
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: (0, import_shared7.dashCase)(name),
-    js: import_outdent11.outdent`
+    js: import_outdent14.outdent`
     import { splitProps } from 'solid-js'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${(0, import_shared7.dashCase)(name)}'
@@ -666,7 +823,7 @@ function generate3(name, pattern, jsxFactory) {
     )}
     }
     `,
-    dts: import_outdent11.outdent`
+    dts: import_outdent14.outdent`
     import { ComponentProps, JSX } from 'solid-js'
     import { ${upperName}Options } from '../patterns/${(0, import_shared7.dashCase)(name)}'
     import { Assign, JSXStyleProperties } from '../types'
@@ -706,17 +863,25 @@ var patternMap = {
 function generateJsxPatterns(ctx) {
   return patternMap[ctx.jsxFramework](ctx);
 }
+var layoutGridMap = {
+  react: generateReactLayoutGrid,
+  preact: generatePreactLayoutGrid,
+  solid: generateSolidLayoutGrid
+};
+function generateLayoutGrid(ctx) {
+  return layoutGridMap[ctx.jsxFramework]();
+}
 
 // src/generators/pattern.ts
 var import_shared8 = require("@pandacss/shared");
-var import_outdent12 = require("outdent");
+var import_outdent15 = require("outdent");
 var import_telejson = require("telejson");
 var import_ts_pattern4 = require("ts-pattern");
 function generate4(name, pattern) {
   const { properties, transform, strict } = pattern;
   return {
     name: (0, import_shared8.dashCase)(name),
-    dts: import_outdent12.outdent`
+    dts: import_outdent15.outdent`
     import { SystemStyleObject, ConditionalValue } from "../types"
     import { Properties } from "../types/csstype"
     import { Tokens } from "../types/token"
@@ -739,13 +904,13 @@ function generate4(name, pattern) {
     }).join("\n	")}
     }
 
-    ${strict ? import_outdent12.outdent`export declare function ${name}(options: ${(0, import_shared8.capitalize)(name)}Options): string` : import_outdent12.outdent`
+    ${strict ? import_outdent15.outdent`export declare function ${name}(options: ${(0, import_shared8.capitalize)(name)}Options): string` : import_outdent15.outdent`
         type Merge<T> = Omit<SystemStyleObject, keyof T> & T
         export declare function ${name}(options: Merge<${(0, import_shared8.capitalize)(name)}Options>): string
         `}
 
    `,
-    js: import_outdent12.outdent`
+    js: import_outdent15.outdent`
   import { mapObject } from "../helpers"
   import { css } from "../css"
 
@@ -762,10 +927,10 @@ function generatePattern(ctx) {
 }
 
 // src/generators/prop-types.ts
-var import_outdent13 = require("outdent");
+var import_outdent16 = require("outdent");
 function generatePropTypes(utility) {
   const result = [
-    import_outdent13.outdent`
+    import_outdent16.outdent`
     import { Properties as CSSProperties } from "./csstype"
 
     type BasePropTypes  = {`
@@ -793,14 +958,14 @@ function generatePropTypes(utility) {
 
 // src/generators/recipe.ts
 var import_shared9 = require("@pandacss/shared");
-var import_outdent14 = require("outdent");
+var import_outdent17 = require("outdent");
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
   const { separator } = utility;
   if (!hasRecipes)
     return;
   const js = [
-    import_outdent14.outdent`
+    import_outdent17.outdent`
    import { createCss, withoutSpace } from "../helpers"
 
    const createRecipe = (name) => {
@@ -824,10 +989,10 @@ function generateRecipes(ctx) {
   ];
   const dts = [""];
   Object.values(recipes).forEach((recipe) => {
-    js.push(import_outdent14.outdent`
+    js.push(import_outdent17.outdent`
     export const ${recipe.name} = createRecipe('${recipe.name}')
     `);
-    dts.push(import_outdent14.outdent`
+    dts.push(import_outdent17.outdent`
     import { ConditionalValue } from "../types"
 
     export type ${(0, import_shared9.capitalize)(recipe.name)}Value = {
@@ -842,8 +1007,8 @@ function generateRecipes(ctx) {
     `);
   });
   return {
-    js: import_outdent14.outdent.string(js.join("\n\n")),
-    dts: import_outdent14.outdent.string(dts.join("\n\n"))
+    js: import_outdent17.outdent.string(js.join("\n\n")),
+    dts: import_outdent17.outdent.string(dts.join("\n\n"))
   };
 }
 
@@ -950,14 +1115,14 @@ function generateReset() {
 
 // src/generators/token-css.ts
 var import_core2 = require("@pandacss/core");
-var import_outdent15 = require("outdent");
+var import_outdent18 = require("outdent");
 var import_ts_pattern5 = require("ts-pattern");
 function generateKeyframes(keyframes) {
   if (keyframes) {
     return (0, import_core2.toKeyframeCss)(keyframes);
   }
 }
-var getConditionMessage = (value) => import_outdent15.outdent`
+var getConditionMessage = (value) => import_outdent18.outdent`
 It seems you provided an invalid condition for semantic tokens.
 
 - You provided: \`${value}\`
@@ -1012,7 +1177,7 @@ function generateTokenCss(ctx, varRoot) {
 
 // src/generators/token-dts.ts
 var import_shared10 = require("@pandacss/shared");
-var import_outdent16 = require("outdent");
+var import_outdent19 = require("outdent");
 var import_pluralize = require("pluralize");
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
@@ -1030,11 +1195,11 @@ function generateTokenDts(dict) {
   }
   interfaceSet.add("}");
   set.add(Array.from(interfaceSet).join("\n"));
-  return import_outdent16.outdent.string(Array.from(set).join("\n\n"));
+  return import_outdent19.outdent.string(Array.from(set).join("\n\n"));
 }
 
 // src/generators/token-js.ts
-var import_outdent17 = __toESM(require("outdent"));
+var import_outdent20 = __toESM(require("outdent"));
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -1044,7 +1209,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: import_outdent17.default`
+    js: import_outdent20.default`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   function getToken(path) {
@@ -1057,7 +1222,7 @@ function generateTokenJs(dict) {
     return variable
   }
   `,
-    dts: import_outdent17.default`
+    dts: import_outdent20.default`
   import { Token } from "../types/token"
   export declare function getToken(path: Token): string
   export declare function getTokenVar(path: Token): string
@@ -1067,7 +1232,7 @@ function generateTokenJs(dict) {
 
 // src/generators/types.ts
 var import_fs_extra = require("fs-extra");
-var import_outdent18 = __toESM(require("outdent"));
+var import_outdent21 = __toESM(require("outdent"));
 function getType(file) {
   const filepath = getEntrypoint("@pandacss/types", { dev: file });
   return (0, import_fs_extra.readFileSync)(filepath, "utf8");
@@ -1077,7 +1242,7 @@ function generateCssType(ctx) {
   return {
     cssType: getType("csstype.d.ts"),
     pandaCssType: getType("system-types.d.ts"),
-    publicType: import_outdent18.default`
+    publicType: import_outdent21.default`
     import * as System from './system-types'
     import { PropTypes } from './prop-type'
     import { Conditions } from './conditions'
@@ -1198,7 +1363,7 @@ function setupPatterns(ctx) {
   if (!files) {
     return { files: [] };
   }
-  const indexCode = import_outdent19.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  const indexCode = import_outdent22.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
   return {
     dir: ctx.paths.pattern,
     files: [
@@ -1215,15 +1380,19 @@ function setupJsx(ctx) {
   const isValidProp = generateisValidProp(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
-  const indexCode = import_outdent19.default`
+  const layoutGrid = generateLayoutGrid(ctx);
+  const indexCode = import_outdent22.default`
   export * from './factory'
-  ${import_outdent19.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  export * from './layout-grid'
+  ${import_outdent22.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
 `;
   return {
     dir: ctx.paths.jsx,
     files: [
       ...patterns.map((file) => ({ file: `${file.name}.jsx`, code: file.js })),
       ...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
+      { file: "layout-grid.jsx", code: layoutGrid.js },
+      { file: "layout-grid.d.ts", code: layoutGrid.dts },
       { file: "is-valid-prop.js", code: isValidProp.js },
       { file: "factory.d.ts", code: factory.dts },
       { file: "factory.jsx", code: factory.js },
@@ -1233,7 +1402,7 @@ function setupJsx(ctx) {
   };
 }
 function setupCssIndex(ctx) {
-  const code = import_outdent19.default`
+  const code = import_outdent22.default`
   export * from './css'
   export * from './cx'
   export * from './global-css'
@@ -1254,7 +1423,7 @@ function setupReset(ctx) {
   return { files: [{ file: "reset.css", code }] };
 }
 function setupGitIgnore(ctx) {
-  const txt = import_outdent19.default`## CSS Panda
+  const txt = import_outdent22.default`## CSS Panda
   ${ctx.outdir}
   `;
   const file = (0, import_look_it_up.lookItUpSync)(".gitignore");
@@ -1293,30 +1462,30 @@ function generateSystem(ctx) {
 
 // src/messages.ts
 var import_logger3 = require("@pandacss/logger");
-var import_outdent20 = require("outdent");
+var import_outdent23 = require("outdent");
 var tick = import_logger3.colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    import_outdent20.outdent`
+    import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && import_outdent20.outdent`
+    ctx.hasTokens && import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    ctx.hasPattern && import_outdent20.outdent`
+    ctx.hasPattern && import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && import_outdent20.outdent`
+    ctx.hasRecipes && import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && import_outdent20.outdent`
+    ctx.jsxFramework && import_outdent23.outdent`
       ${tick} ${(0, import_logger3.quote)(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
     `,
     "\n"
   ].filter(Boolean).join("\n");
 }
 function configExistsMessage(cmd) {
-  return import_outdent20.outdent`
+  return import_outdent23.outdent`
       \n
       It looks like you already have panda created\`.
       
@@ -1325,7 +1494,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return import_outdent20.outdent`
+  return import_outdent23.outdent`
 
   🚀 Thanks for choosing ${import_logger3.colors.cyan("Panda")} to write your css.
 
@@ -1337,7 +1506,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 function scaffoldCompleteMessage() {
   return import_logger3.logger.box(
-    import_outdent20.outdent`
+    import_outdent23.outdent`
 
   ${import_logger3.colors.bold().cyan("Next steps:")}
   
@@ -1963,7 +2132,7 @@ async function generate5(config, configPath) {
 var import_logger8 = require("@pandacss/logger");
 var import_fs_extra4 = require("fs-extra");
 var import_look_it_up3 = require("look-it-up");
-var import_outdent21 = require("outdent");
+var import_outdent24 = require("outdent");
 var import_path7 = require("path");
 var import_preferred_pm2 = __toESM(require("preferred-pm"));
 async function setupConfig(cwd, { force }) {
@@ -1977,7 +2146,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     import_logger8.logger.warn("config exists", configExistsMessage(cmd));
   } else {
-    const content = import_outdent21.outdent`
+    const content = import_outdent24.outdent`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -2003,7 +2172,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   import_logger8.logger.info({ type: "init", msg: `creating postcss config file: ${(0, import_logger8.quote)("postcss.config.cjs")}` });
-  const content = import_outdent21.outdent`
+  const content = import_outdent24.outdent`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},

package/dist/index.mjs

@@ -70,7 +70,7 @@ async function writeFileChunk(ctx, file) {
 // src/generators/index.ts
 import { readFileSync as readFileSync3 } from "fs";
 import { lookItUpSync } from "look-it-up";
-import outdent19 from "outdent";
+import outdent22 from "outdent";
 import { dirname as dirname2 } from "path";
 
 // src/generators/conditions.ts
@@ -332,9 +332,62 @@ function generatePreactJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/preact-layout-grid.ts
+import { outdent as outdent7 } from "outdent";
+function generatePreactLayoutGrid() {
+  return {
+    dts: outdent7`
+    import { FunctionComponent } from 'preact'
+
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
+    `,
+    js: outdent7`
+    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>
+        );
+      }
+    `
+  };
+}
+
 // src/generators/jsx/preact-pattern.ts
 import { capitalize as capitalize2, dashCase } from "@pandacss/shared";
-import { outdent as outdent7 } from "outdent";
+import { outdent as outdent8 } from "outdent";
 import { match } from "ts-pattern";
 function generate(name, pattern, jsxFactory) {
   const upperName = capitalize2(name);
@@ -342,7 +395,7 @@ function generate(name, pattern, jsxFactory) {
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: dashCase(name),
-    js: outdent7`
+    js: outdent8`
     import { forwardRef } from 'preact/compat'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${dashCase(name)}'
@@ -362,7 +415,7 @@ function generate(name, pattern, jsxFactory) {
     )}
     })    
     `,
-    dts: outdent7`
+    dts: outdent8`
     import { ComponentProps, JSX, ComponentChildren } from 'preact';
     import { ${upperName}Options } from '../patterns/${dashCase(name)}'
     import { JSXStyleProperties, Assign } from '../types'
@@ -389,12 +442,12 @@ function generatePreactJsxPattern(ctx) {
 
 // src/generators/jsx/react-jsx.ts
 import { capitalize as capitalize3 } from "@pandacss/shared";
-import { outdent as outdent8 } from "outdent";
+import { outdent as outdent9 } from "outdent";
 function generateReactJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = capitalize3(name);
   return {
-    dts: outdent8`
+    dts: outdent9`
     import type { ComponentProps } from "react"
     import type { JSXStyleProperties } from "../types"
     
@@ -408,7 +461,7 @@ function generateReactJsxFactory(ctx) {
 
     export declare const ${name}: JSXFactory
     `,
-    js: outdent8`
+    js: outdent9`
     import { forwardRef } from 'react'
     import { isCssProperty } from './is-valid-prop'
     import { css } from '../css'
@@ -469,9 +522,62 @@ function generateReactJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/react-layout-grid.ts
+import { outdent as outdent10 } from "outdent";
+function generateReactLayoutGrid() {
+  return {
+    dts: outdent10`
+    import type { FunctionComponent } from 'react'
+
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: FunctionComponent<LayoutGridProps>
+    `,
+    js: outdent10`
+    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>
+        );
+      }
+    `
+  };
+}
+
 // src/generators/jsx/react-pattern.ts
 import { capitalize as capitalize4, dashCase as dashCase2 } from "@pandacss/shared";
-import { outdent as outdent9 } from "outdent";
+import { outdent as outdent11 } from "outdent";
 import { match as match2 } from "ts-pattern";
 function generate2(name, pattern, jsxFactory) {
   const upperName = capitalize4(name);
@@ -479,7 +585,7 @@ function generate2(name, pattern, jsxFactory) {
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: dashCase2(name),
-    js: outdent9`
+    js: outdent11`
     import { forwardRef } from 'react'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${dashCase2(name)}'
@@ -500,7 +606,7 @@ function generate2(name, pattern, jsxFactory) {
         
     })    
     `,
-    dts: outdent9`
+    dts: outdent11`
     import { ComponentProps, ElementType, PropsWithChildren } from 'react'
     import { ${upperName}Options } from '../patterns/${dashCase2(name)}'
     import { JSXStyleProperties, Assign } from '../types'
@@ -524,12 +630,12 @@ function generateReactJsxPattern(ctx) {
 
 // src/generators/jsx/solid-jsx.ts
 import { capitalize as capitalize5 } from "@pandacss/shared";
-import { outdent as outdent10 } from "outdent";
+import { outdent as outdent12 } from "outdent";
 function generateSolidJsxFactory(ctx) {
   const name = ctx.jsxFactory;
   const upperName = capitalize5(name);
   return {
-    dts: outdent10`
+    dts: outdent12`
     import type { JSX } from 'solid-js'
     import type { JSXStyleProperties, Assign} from '../types'
     
@@ -543,7 +649,7 @@ function generateSolidJsxFactory(ctx) {
 
     export declare const ${name}: JSXFactory
     `,
-    js: outdent10`
+    js: outdent12`
     import { Dynamic } from 'solid-js/web';
     import { mergeProps, splitProps } from 'solid-js';
     import { allCssProperties } from './is-valid-prop'
@@ -591,9 +697,60 @@ function generateSolidJsxFactory(ctx) {
   };
 }
 
+// src/generators/jsx/solid-layout-grid.ts
+import { outdent as outdent13 } from "outdent";
+function generateSolidLayoutGrid() {
+  return {
+    dts: outdent13`
+    export type LayoutGridProps = {
+        count?: number
+        gutter?: string
+        maxWidth?: string
+        margin?: string
+    }
+
+    export declare const LayoutGrid: React.FC<LayoutGridProps>
+    `,
+    js: outdent13`
+    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>
+        );
+      }
+    `
+  };
+}
+
 // src/generators/jsx/solid-pattern.ts
 import { capitalize as capitalize6, dashCase as dashCase3 } from "@pandacss/shared";
-import { outdent as outdent11 } from "outdent";
+import { outdent as outdent14 } from "outdent";
 import { match as match3 } from "ts-pattern";
 function generate3(name, pattern, jsxFactory) {
   const upperName = capitalize6(name);
@@ -601,7 +758,7 @@ function generate3(name, pattern, jsxFactory) {
   const keys = Object.keys(pattern.properties ?? {});
   return {
     name: dashCase3(name),
-    js: outdent11`
+    js: outdent14`
     import { splitProps } from 'solid-js'
     import { ${jsxFactory} } from './factory'
     import { config } from '../patterns/${dashCase3(name)}'
@@ -621,7 +778,7 @@ function generate3(name, pattern, jsxFactory) {
     )}
     }
     `,
-    dts: outdent11`
+    dts: outdent14`
     import { ComponentProps, JSX } from 'solid-js'
     import { ${upperName}Options } from '../patterns/${dashCase3(name)}'
     import { Assign, JSXStyleProperties } from '../types'
@@ -661,17 +818,25 @@ var patternMap = {
 function generateJsxPatterns(ctx) {
   return patternMap[ctx.jsxFramework](ctx);
 }
+var layoutGridMap = {
+  react: generateReactLayoutGrid,
+  preact: generatePreactLayoutGrid,
+  solid: generateSolidLayoutGrid
+};
+function generateLayoutGrid(ctx) {
+  return layoutGridMap[ctx.jsxFramework]();
+}
 
 // src/generators/pattern.ts
 import { capitalize as capitalize7, dashCase as dashCase4, unionType as unionType2 } from "@pandacss/shared";
-import { outdent as outdent12 } from "outdent";
+import { outdent as outdent15 } from "outdent";
 import { stringify as stringify2 } from "telejson";
 import { match as match4 } from "ts-pattern";
 function generate4(name, pattern) {
   const { properties, transform, strict } = pattern;
   return {
     name: dashCase4(name),
-    dts: outdent12`
+    dts: outdent15`
     import { SystemStyleObject, ConditionalValue } from "../types"
     import { Properties } from "../types/csstype"
     import { Tokens } from "../types/token"
@@ -694,13 +859,13 @@ function generate4(name, pattern) {
     }).join("\n	")}
     }
 
-    ${strict ? outdent12`export declare function ${name}(options: ${capitalize7(name)}Options): string` : outdent12`
+    ${strict ? outdent15`export declare function ${name}(options: ${capitalize7(name)}Options): string` : outdent15`
         type Merge<T> = Omit<SystemStyleObject, keyof T> & T
         export declare function ${name}(options: Merge<${capitalize7(name)}Options>): string
         `}
 
    `,
-    js: outdent12`
+    js: outdent15`
   import { mapObject } from "../helpers"
   import { css } from "../css"
 
@@ -717,10 +882,10 @@ function generatePattern(ctx) {
 }
 
 // src/generators/prop-types.ts
-import { outdent as outdent13 } from "outdent";
+import { outdent as outdent16 } from "outdent";
 function generatePropTypes(utility) {
   const result = [
-    outdent13`
+    outdent16`
     import { Properties as CSSProperties } from "./csstype"
 
     type BasePropTypes  = {`
@@ -748,14 +913,14 @@ function generatePropTypes(utility) {
 
 // src/generators/recipe.ts
 import { capitalize as capitalize8, unionType as unionType3 } from "@pandacss/shared";
-import { outdent as outdent14 } from "outdent";
+import { outdent as outdent17 } from "outdent";
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
   const { separator } = utility;
   if (!hasRecipes)
     return;
   const js = [
-    outdent14`
+    outdent17`
    import { createCss, withoutSpace } from "../helpers"
 
    const createRecipe = (name) => {
@@ -779,10 +944,10 @@ function generateRecipes(ctx) {
   ];
   const dts = [""];
   Object.values(recipes).forEach((recipe) => {
-    js.push(outdent14`
+    js.push(outdent17`
     export const ${recipe.name} = createRecipe('${recipe.name}')
     `);
-    dts.push(outdent14`
+    dts.push(outdent17`
     import { ConditionalValue } from "../types"
 
     export type ${capitalize8(recipe.name)}Value = {
@@ -797,8 +962,8 @@ function generateRecipes(ctx) {
     `);
   });
   return {
-    js: outdent14.string(js.join("\n\n")),
-    dts: outdent14.string(dts.join("\n\n"))
+    js: outdent17.string(js.join("\n\n")),
+    dts: outdent17.string(dts.join("\n\n"))
   };
 }
 
@@ -905,14 +1070,14 @@ function generateReset() {
 
 // src/generators/token-css.ts
 import { toCss, toKeyframeCss } from "@pandacss/core";
-import { outdent as outdent15 } from "outdent";
+import { outdent as outdent18 } from "outdent";
 import { match as match5, P } from "ts-pattern";
 function generateKeyframes(keyframes) {
   if (keyframes) {
     return toKeyframeCss(keyframes);
   }
 }
-var getConditionMessage = (value) => outdent15`
+var getConditionMessage = (value) => outdent18`
 It seems you provided an invalid condition for semantic tokens.
 
 - You provided: \`${value}\`
@@ -967,7 +1132,7 @@ function generateTokenCss(ctx, varRoot) {
 
 // src/generators/token-dts.ts
 import { unionType as unionType4, capitalize as capitalize9 } from "@pandacss/shared";
-import { outdent as outdent16 } from "outdent";
+import { outdent as outdent19 } from "outdent";
 import { singular } from "pluralize";
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
@@ -985,11 +1150,11 @@ function generateTokenDts(dict) {
   }
   interfaceSet.add("}");
   set.add(Array.from(interfaceSet).join("\n"));
-  return outdent16.string(Array.from(set).join("\n\n"));
+  return outdent19.string(Array.from(set).join("\n\n"));
 }
 
 // src/generators/token-js.ts
-import outdent17 from "outdent";
+import outdent20 from "outdent";
 function generateTokenJs(dict) {
   const map = /* @__PURE__ */ new Map();
   dict.allTokens.forEach((token) => {
@@ -999,7 +1164,7 @@ function generateTokenJs(dict) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: outdent17`
+    js: outdent20`
   const tokens = ${JSON.stringify(obj, null, 2)}
   
   function getToken(path) {
@@ -1012,7 +1177,7 @@ function generateTokenJs(dict) {
     return variable
   }
   `,
-    dts: outdent17`
+    dts: outdent20`
   import { Token } from "../types/token"
   export declare function getToken(path: Token): string
   export declare function getTokenVar(path: Token): string
@@ -1022,7 +1187,7 @@ function generateTokenJs(dict) {
 
 // src/generators/types.ts
 import { readFileSync as readFileSync2 } from "fs-extra";
-import outdent18 from "outdent";
+import outdent21 from "outdent";
 function getType(file) {
   const filepath = getEntrypoint("@pandacss/types", { dev: file });
   return readFileSync2(filepath, "utf8");
@@ -1032,7 +1197,7 @@ function generateCssType(ctx) {
   return {
     cssType: getType("csstype.d.ts"),
     pandaCssType: getType("system-types.d.ts"),
-    publicType: outdent18`
+    publicType: outdent21`
     import * as System from './system-types'
     import { PropTypes } from './prop-type'
     import { Conditions } from './conditions'
@@ -1153,7 +1318,7 @@ function setupPatterns(ctx) {
   if (!files) {
     return { files: [] };
   }
-  const indexCode = outdent19.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
+  const indexCode = outdent22.string(files.map((file) => `export * from './${file.name}'`).join("\n"));
   return {
     dir: ctx.paths.pattern,
     files: [
@@ -1170,15 +1335,19 @@ function setupJsx(ctx) {
   const isValidProp = generateisValidProp(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
-  const indexCode = outdent19`
+  const layoutGrid = generateLayoutGrid(ctx);
+  const indexCode = outdent22`
   export * from './factory'
-  ${outdent19.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  export * from './layout-grid'
+  ${outdent22.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
 `;
   return {
     dir: ctx.paths.jsx,
     files: [
       ...patterns.map((file) => ({ file: `${file.name}.jsx`, code: file.js })),
       ...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
+      { file: "layout-grid.jsx", code: layoutGrid.js },
+      { file: "layout-grid.d.ts", code: layoutGrid.dts },
       { file: "is-valid-prop.js", code: isValidProp.js },
       { file: "factory.d.ts", code: factory.dts },
       { file: "factory.jsx", code: factory.js },
@@ -1188,7 +1357,7 @@ function setupJsx(ctx) {
   };
 }
 function setupCssIndex(ctx) {
-  const code = outdent19`
+  const code = outdent22`
   export * from './css'
   export * from './cx'
   export * from './global-css'
@@ -1209,7 +1378,7 @@ function setupReset(ctx) {
   return { files: [{ file: "reset.css", code }] };
 }
 function setupGitIgnore(ctx) {
-  const txt = outdent19`## CSS Panda
+  const txt = outdent22`## CSS Panda
   ${ctx.outdir}
   `;
   const file = lookItUpSync(".gitignore");
@@ -1248,30 +1417,30 @@ function generateSystem(ctx) {
 
 // src/messages.ts
 import { colors, logger as logger3, quote as quote2 } from "@pandacss/logger";
-import { outdent as outdent20 } from "outdent";
+import { outdent as outdent23 } from "outdent";
 var tick = colors.green().bold("\u2714\uFE0F");
 function artifactsGeneratedMessage(ctx) {
   return [
-    outdent20`
+    outdent23`
       ${tick} ${quote2(ctx.outdir, "/css")}: the css function to author styles
     `,
-    ctx.hasTokens && outdent20`
+    ctx.hasTokens && outdent23`
       ${tick} ${quote2(ctx.outdir, "/tokens")}: the css variables and js function to query your tokens
     `,
-    ctx.hasPattern && outdent20`
+    ctx.hasPattern && outdent23`
       ${tick} ${quote2(ctx.outdir, "/patterns")}: functions to implement common css patterns
     `,
-    ctx.hasRecipes && outdent20`
+    ctx.hasRecipes && outdent23`
       ${tick} ${quote2(ctx.outdir, "/recipes")}: functions to create multi-variant styles
     `,
-    ctx.jsxFramework && outdent20`
+    ctx.jsxFramework && outdent23`
       ${tick} ${quote2(ctx.outdir, "/jsx")}: style prop powered elements for ${ctx.jsxFramework}
     `,
     "\n"
   ].filter(Boolean).join("\n");
 }
 function configExistsMessage(cmd) {
-  return outdent20`
+  return outdent23`
       \n
       It looks like you already have panda created\`.
       
@@ -1280,7 +1449,7 @@ function configExistsMessage(cmd) {
       `;
 }
 function thankYouMessage() {
-  return outdent20`
+  return outdent23`
 
   🚀 Thanks for choosing ${colors.cyan("Panda")} to write your css.
 
@@ -1292,7 +1461,7 @@ var randomWords = ["Sweet", "Divine", "Pandalicious", "Super"];
 var pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
 function scaffoldCompleteMessage() {
   return logger3.box(
-    outdent20`
+    outdent23`
 
   ${colors.bold().cyan("Next steps:")}
   
@@ -1924,7 +2093,7 @@ async function generate5(config, configPath) {
 import { logger as logger8, quote as quote3 } from "@pandacss/logger";
 import { writeFile as writeFile2 } from "fs-extra";
 import { lookItUpSync as lookItUpSync3 } from "look-it-up";
-import { outdent as outdent21 } from "outdent";
+import { outdent as outdent24 } from "outdent";
 import { join as join4 } from "path";
 import getPackageManager2 from "preferred-pm";
 async function setupConfig(cwd, { force }) {
@@ -1938,7 +2107,7 @@ async function setupConfig(cwd, { force }) {
   if (!force && configFile) {
     logger8.warn("config exists", configExistsMessage(cmd));
   } else {
-    const content = outdent21`
+    const content = outdent24`
        import { defineConfig } from "css-panda"
 
        export default defineConfig({
@@ -1964,7 +2133,7 @@ async function setupConfig(cwd, { force }) {
 }
 async function setupPostcss(cwd) {
   logger8.info({ type: "init", msg: `creating postcss config file: ${quote3("postcss.config.cjs")}` });
-  const content = outdent21`
+  const content = outdent24`
   module.exports = {
     plugins: {
       'css-panda/postcss': {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20221124074636",
+  "version": "0.0.0-dev-20221124141119",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,15 +30,15 @@
     "telejson": "6.0.8",
     "ts-pattern": "4.0.6",
     "ts-morph": "17.0.1",
-    "@pandacss/types": "0.0.0-dev-20221124074636",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20221124074636",
-    "@pandacss/error": "0.0.0-dev-20221124074636",
-    "@pandacss/parser": "0.0.0-dev-20221124074636",
-    "@pandacss/shared": "0.0.0-dev-20221124074636",
-    "@pandacss/token-dictionary": "0.0.0-dev-20221124074636",
-    "@pandacss/logger": "0.0.0-dev-20221124074636",
-    "@pandacss/core": "0.0.0-dev-20221124074636",
-    "@pandacss/config": "0.0.0-dev-20221124074636"
+    "@pandacss/types": "0.0.0-dev-20221124141119",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20221124141119",
+    "@pandacss/error": "0.0.0-dev-20221124141119",
+    "@pandacss/parser": "0.0.0-dev-20221124141119",
+    "@pandacss/shared": "0.0.0-dev-20221124141119",
+    "@pandacss/token-dictionary": "0.0.0-dev-20221124141119",
+    "@pandacss/logger": "0.0.0-dev-20221124141119",
+    "@pandacss/core": "0.0.0-dev-20221124141119",
+    "@pandacss/config": "0.0.0-dev-20221124141119"
   },
   "devDependencies": {
     "@types/fs-extra": "9.0.13",
@@ -46,7 +46,7 @@
     "@types/glob-parent": "^5.1.1",
     "@types/pluralize": "0.0.29",
     "@types/lodash.merge": "4.6.7",
-    "@pandacss/fixture": "0.0.0-dev-20221124074636"
+    "@pandacss/fixture": "0.0.0-dev-20221124141119"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",