@pandacss/generator 0.0.0-dev-20230212075352 → 0.0.0-dev-20230212115356

package/dist/index.js

@@ -127,7 +127,7 @@ var getMessages = (ctx) => ({
 var import_lil_fp4 = require("lil-fp");
 
 // src/artifacts/index.ts
-var import_outdent28 = __toESM(require("outdent"));
+var import_outdent29 = __toESM(require("outdent"));
 
 // src/artifacts/css/keyframe-css.ts
 var import_core = require("@pandacss/core");
@@ -1426,16 +1426,87 @@ function generateVueJsxFactory(ctx) {
   };
 }
 
-// src/artifacts/vue-jsx/types.ts
+// src/artifacts/vue-jsx/layout-grid.ts
 var import_outdent23 = require("outdent");
+function generateVueLayoutGrid() {
+  return {
+    dts: import_outdent23.outdent`
+    import type { FunctionalComponent } from 'vue'
+    
+    export type LayoutGridProps = {
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
+    }
+
+    export declare const LayoutGrid: FunctionalComponent<LayoutGridProps>
+    `,
+    js: import_outdent23.outdent`
+    import { h, computed } from 'vue'
+
+    export const LayoutGrid = defineComponent({
+        name: 'LayoutGrid',
+        props: {
+            count: {
+            type: Number,
+            default: 12,
+            },
+            margin: String,
+            gutter: {
+            type: String,
+            default: '24px',
+            },
+            maxWidth: String,
+            outline: Boolean,
+        },
+        setup(props) {
+            const hasMaxWidthRef = computed(() => props.maxWidth != null)
+            const variantRef = computed(() => (props.outline ? 'outline' : 'default'))
+            return () => {
+            const { count, margin, gutter, maxWidth } = props
+            const hasMaxWidth = hasMaxWidthRef.value
+            const variant = variantRef.value
+        
+            return h(
+                'div',
+                {
+                class: 'panda-layout-grid',
+                style: {
+                    '--gutter': gutter,
+                    '--count': count,
+                    '--max-width': hasMaxWidth ? maxWidth : 'initial',
+                    '--margin-x': hasMaxWidth ? 'auto' : undefined,
+                    '--padding-x': !hasMaxWidth ? margin : undefined,
+                },
+                },
+                Array.from({ length: count }, (_, i) => {
+                return h('span', {
+                    'data-variant': variant,
+                    key: i,
+                    class: 'panda-layout-grid__item',
+                })
+                }),
+            )
+            }
+        },
+      })      
+    
+    `
+  };
+}
+
+// src/artifacts/vue-jsx/types.ts
+var import_outdent24 = require("outdent");
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: import_outdent23.outdent`
+    jsxFactory: import_outdent24.outdent`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: import_outdent23.outdent`
+    jsxType: import_outdent24.outdent`
 import type { Component, FunctionalComponent } from 'vue'
 import type { JsxStyleProps, Assign } from '.'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1629,7 +1700,7 @@ var layoutGridMap = {
   react: generateReactLayoutGrid,
   preact: generatePreactLayoutGrid,
   solid: generateSolidLayoutGrid,
-  vue: () => ({ js: "", dts: "" })
+  vue: generateVueLayoutGrid
 };
 function generateLayoutGrid(ctx) {
   if (!ctx.jsx.framework)
@@ -1714,9 +1785,9 @@ function getGeneratedTypes() {
 }
 
 // src/artifacts/types/main.ts
-var import_outdent24 = require("outdent");
+var import_outdent25 = require("outdent");
 var generateTypesEntry = () => ({
-  global: import_outdent24.outdent`
+  global: import_outdent25.outdent`
     import { RecipeVariantRecord, RecipeConfig } from './recipe'
     import { GlobalStyleObject } from './system-types'
     import { CompositionStyles } from './composition'
@@ -1728,7 +1799,7 @@ var generateTypesEntry = () => ({
       export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
     }
     `,
-  index: import_outdent24.outdent`
+  index: import_outdent25.outdent`
     import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
@@ -1738,7 +1809,7 @@ var generateTypesEntry = () => ({
 });
 
 // src/artifacts/types/prop-types.ts
-var import_outdent25 = require("outdent");
+var import_outdent26 = require("outdent");
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -1746,7 +1817,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | NativeValue<T>"}`;
   const result = [
-    import_outdent25.outdent`
+    import_outdent26.outdent`
     import type { ConditionalValue } from './conditions';
     import type { Properties as CSSProperties } from './csstype'
     import type { Tokens } from './token'
@@ -1769,7 +1840,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return import_outdent25.outdent`
+  return import_outdent26.outdent`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -1782,10 +1853,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 var import_is_valid_prop = require("@pandacss/is-valid-prop");
-var import_outdent26 = __toESM(require("outdent"));
+var import_outdent27 = __toESM(require("outdent"));
 function generateStyleProps(ctx) {
   const props = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()));
-  return import_outdent26.default`
+  return import_outdent27.default`
     import { PropertyValue } from './prop-type'
     import { Token } from './token'
 
@@ -1801,7 +1872,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 var import_shared3 = require("@pandacss/shared");
-var import_outdent27 = require("outdent");
+var import_outdent28 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 function generateTokenTypes(ctx) {
   const { tokens } = ctx;
@@ -1820,7 +1891,7 @@ function generateTokenTypes(ctx) {
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
-  return import_outdent27.outdent.string(Array.from(set).join("\n\n"));
+  return import_outdent28.outdent.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/css/global-css.ts
@@ -1828,7 +1899,39 @@ var generateGlobalCss = (ctx) => {
   const { globalCss = {} } = ctx.config;
   const sheet = ctx.createSheet();
   sheet.processGlobalCss({
-    ":root": { "--made-with-panda": `'\u{1F43C}'` }
+    ":root": {
+      "--made-with-panda": `'\u{1F43C}'`
+    },
+    "*, *::before, *::after, ::backdrop": {
+      "--blur": "/*!*/ /*!*/",
+      "--brightness": "/*!*/ /*!*/",
+      "--contrast": "/*!*/ /*!*/",
+      "--grayscale": "/*!*/ /*!*/",
+      "--hue-rotate": "/*!*/ /*!*/",
+      "--invert": "/*!*/ /*!*/",
+      "--saturate": "/*!*/ /*!*/",
+      "--sepia": "/*!*/ /*!*/",
+      "--drop-shadow": "/*!*/ /*!*/",
+      "--backdrop-blur": "/*!*/ /*!*/",
+      "--backdrop-brightness": "/*!*/ /*!*/",
+      "--backdrop-contrast": "/*!*/ /*!*/",
+      "--backdrop-grayscale": "/*!*/ /*!*/",
+      "--backdrop-hue-rotate": "/*!*/ /*!*/",
+      "--backdrop-invert": "/*!*/ /*!*/",
+      "--backdrop-opacity": "/*!*/ /*!*/",
+      "--backdrop-saturate": "/*!*/ /*!*/",
+      "--backdrop-sepia": "/*!*/ /*!*/",
+      "--scroll-snap-strictness": "proximity",
+      "--border-spacing-x": 0,
+      "--border-spacing-y": 0,
+      "--translate-x": 0,
+      "--translate-y": 0,
+      "--rotate": 0,
+      "--skew-x": 0,
+      "--skew-y": 0,
+      "--scale-x": 1,
+      "--scale-y": 1
+    }
   });
   sheet.processGlobalCss(globalCss);
   return sheet.toCss();
@@ -1960,8 +2063,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: import_outdent28.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: import_outdent28.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: import_outdent29.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: import_outdent29.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -1982,15 +2085,15 @@ function setupJsx(ctx) {
   const patterns = generateJsxPatterns(ctx);
   const layoutGrid2 = generateLayoutGrid(ctx);
   const index = {
-    js: import_outdent28.default`
+    js: import_outdent29.default`
   ${ctx.file.export("./factory")}
   ${ctx.file.export("./layout-grid")}
-  ${import_outdent28.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${import_outdent29.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: import_outdent28.default`
+    dts: import_outdent29.default`
   export * from './factory'
   export * from './layout-grid'
-  ${import_outdent28.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${import_outdent29.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -2011,12 +2114,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: import_outdent28.default`
+    js: import_outdent29.default`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
   ${ctx.file.export("./cva")}
  `,
-    dts: import_outdent28.default`
+    dts: import_outdent29.default`
   export * from './css'
   export * from './cx'
   export * from './cva'

package/dist/index.mjs

@@ -96,7 +96,7 @@ var getMessages = (ctx) => ({
 import { Obj as Obj4, pipe as pipe5 } from "lil-fp";
 
 // src/artifacts/index.ts
-import outdent28 from "outdent";
+import outdent29 from "outdent";
 
 // src/artifacts/css/keyframe-css.ts
 import { toCss } from "@pandacss/core";
@@ -1395,16 +1395,87 @@ function generateVueJsxFactory(ctx) {
   };
 }
 
-// src/artifacts/vue-jsx/types.ts
+// src/artifacts/vue-jsx/layout-grid.ts
 import { outdent as outdent23 } from "outdent";
+function generateVueLayoutGrid() {
+  return {
+    dts: outdent23`
+    import type { FunctionalComponent } from 'vue'
+    
+    export type LayoutGridProps = {
+      count?: number
+      gutter?: string
+      maxWidth?: string
+      margin?: string
+      outline?: boolean
+    }
+
+    export declare const LayoutGrid: FunctionalComponent<LayoutGridProps>
+    `,
+    js: outdent23`
+    import { h, computed } from 'vue'
+
+    export const LayoutGrid = defineComponent({
+        name: 'LayoutGrid',
+        props: {
+            count: {
+            type: Number,
+            default: 12,
+            },
+            margin: String,
+            gutter: {
+            type: String,
+            default: '24px',
+            },
+            maxWidth: String,
+            outline: Boolean,
+        },
+        setup(props) {
+            const hasMaxWidthRef = computed(() => props.maxWidth != null)
+            const variantRef = computed(() => (props.outline ? 'outline' : 'default'))
+            return () => {
+            const { count, margin, gutter, maxWidth } = props
+            const hasMaxWidth = hasMaxWidthRef.value
+            const variant = variantRef.value
+        
+            return h(
+                'div',
+                {
+                class: 'panda-layout-grid',
+                style: {
+                    '--gutter': gutter,
+                    '--count': count,
+                    '--max-width': hasMaxWidth ? maxWidth : 'initial',
+                    '--margin-x': hasMaxWidth ? 'auto' : undefined,
+                    '--padding-x': !hasMaxWidth ? margin : undefined,
+                },
+                },
+                Array.from({ length: count }, (_, i) => {
+                return h('span', {
+                    'data-variant': variant,
+                    key: i,
+                    class: 'panda-layout-grid__item',
+                })
+                }),
+            )
+            }
+        },
+      })      
+    
+    `
+  };
+}
+
+// src/artifacts/vue-jsx/types.ts
+import { outdent as outdent24 } from "outdent";
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent23`
+    jsxFactory: outdent24`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent23`
+    jsxType: outdent24`
 import type { Component, FunctionalComponent } from 'vue'
 import type { JsxStyleProps, Assign } from '.'
 import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1598,7 +1669,7 @@ var layoutGridMap = {
   react: generateReactLayoutGrid,
   preact: generatePreactLayoutGrid,
   solid: generateSolidLayoutGrid,
-  vue: () => ({ js: "", dts: "" })
+  vue: generateVueLayoutGrid
 };
 function generateLayoutGrid(ctx) {
   if (!ctx.jsx.framework)
@@ -1683,9 +1754,9 @@ function getGeneratedTypes() {
 }
 
 // src/artifacts/types/main.ts
-import { outdent as outdent24 } from "outdent";
+import { outdent as outdent25 } from "outdent";
 var generateTypesEntry = () => ({
-  global: outdent24`
+  global: outdent25`
     import { RecipeVariantRecord, RecipeConfig } from './recipe'
     import { GlobalStyleObject } from './system-types'
     import { CompositionStyles } from './composition'
@@ -1697,7 +1768,7 @@ var generateTypesEntry = () => ({
       export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
     }
     `,
-  index: outdent24`
+  index: outdent25`
     import './global'
     export { ConditionalValue } from './conditions'
     export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
@@ -1707,7 +1778,7 @@ var generateTypesEntry = () => ({
 });
 
 // src/artifacts/types/prop-types.ts
-import { outdent as outdent25 } from "outdent";
+import { outdent as outdent26 } from "outdent";
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -1715,7 +1786,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | NativeValue<T>"}`;
   const result = [
-    outdent25`
+    outdent26`
     import type { ConditionalValue } from './conditions';
     import type { Properties as CSSProperties } from './csstype'
     import type { Tokens } from './token'
@@ -1738,7 +1809,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return outdent25`
+  return outdent26`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -1751,10 +1822,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
-import outdent26 from "outdent";
+import outdent27 from "outdent";
 function generateStyleProps(ctx) {
   const props = new Set(allCssProperties.concat(ctx.utility.keys()));
-  return outdent26`
+  return outdent27`
     import { PropertyValue } from './prop-type'
     import { Token } from './token'
 
@@ -1770,7 +1841,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 import { capitalize as capitalize2, unionType as unionType3 } from "@pandacss/shared";
-import { outdent as outdent27 } from "outdent";
+import { outdent as outdent28 } from "outdent";
 import pluralize from "pluralize";
 function generateTokenTypes(ctx) {
   const { tokens } = ctx;
@@ -1789,7 +1860,7 @@ function generateTokenTypes(ctx) {
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
-  return outdent27.string(Array.from(set).join("\n\n"));
+  return outdent28.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/css/global-css.ts
@@ -1797,7 +1868,39 @@ var generateGlobalCss = (ctx) => {
   const { globalCss = {} } = ctx.config;
   const sheet = ctx.createSheet();
   sheet.processGlobalCss({
-    ":root": { "--made-with-panda": `'\u{1F43C}'` }
+    ":root": {
+      "--made-with-panda": `'\u{1F43C}'`
+    },
+    "*, *::before, *::after, ::backdrop": {
+      "--blur": "/*!*/ /*!*/",
+      "--brightness": "/*!*/ /*!*/",
+      "--contrast": "/*!*/ /*!*/",
+      "--grayscale": "/*!*/ /*!*/",
+      "--hue-rotate": "/*!*/ /*!*/",
+      "--invert": "/*!*/ /*!*/",
+      "--saturate": "/*!*/ /*!*/",
+      "--sepia": "/*!*/ /*!*/",
+      "--drop-shadow": "/*!*/ /*!*/",
+      "--backdrop-blur": "/*!*/ /*!*/",
+      "--backdrop-brightness": "/*!*/ /*!*/",
+      "--backdrop-contrast": "/*!*/ /*!*/",
+      "--backdrop-grayscale": "/*!*/ /*!*/",
+      "--backdrop-hue-rotate": "/*!*/ /*!*/",
+      "--backdrop-invert": "/*!*/ /*!*/",
+      "--backdrop-opacity": "/*!*/ /*!*/",
+      "--backdrop-saturate": "/*!*/ /*!*/",
+      "--backdrop-sepia": "/*!*/ /*!*/",
+      "--scroll-snap-strictness": "proximity",
+      "--border-spacing-x": 0,
+      "--border-spacing-y": 0,
+      "--translate-x": 0,
+      "--translate-y": 0,
+      "--rotate": 0,
+      "--skew-x": 0,
+      "--skew-y": 0,
+      "--scale-x": 1,
+      "--scale-y": 1
+    }
   });
   sheet.processGlobalCss(globalCss);
   return sheet.toCss();
@@ -1929,8 +2032,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: outdent28.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: outdent28.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: outdent29.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: outdent29.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -1951,15 +2054,15 @@ function setupJsx(ctx) {
   const patterns = generateJsxPatterns(ctx);
   const layoutGrid2 = generateLayoutGrid(ctx);
   const index = {
-    js: outdent28`
+    js: outdent29`
   ${ctx.file.export("./factory")}
   ${ctx.file.export("./layout-grid")}
-  ${outdent28.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${outdent29.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: outdent28`
+    dts: outdent29`
   export * from './factory'
   export * from './layout-grid'
-  ${outdent28.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${outdent29.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -1980,12 +2083,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: outdent28`
+    js: outdent29`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
   ${ctx.file.export("./cva")}
  `,
-    dts: outdent28`
+    dts: outdent29`
   export * from './css'
   export * from './cx'
   export * from './cva'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20230212075352",
+  "version": "0.0.0-dev-20230212115356",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,16 +20,16 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.21",
     "ts-pattern": "4.1.4",
-    "@pandacss/core": "0.0.0-dev-20230212075352",
-    "@pandacss/logger": "0.0.0-dev-20230212075352",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230212075352",
-    "@pandacss/shared": "0.0.0-dev-20230212075352",
-    "@pandacss/types": "0.0.0-dev-20230212075352",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230212075352"
+    "@pandacss/core": "0.0.0-dev-20230212115356",
+    "@pandacss/logger": "0.0.0-dev-20230212115356",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230212115356",
+    "@pandacss/shared": "0.0.0-dev-20230212115356",
+    "@pandacss/types": "0.0.0-dev-20230212115356",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230212115356"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.29",
-    "@pandacss/fixture": "0.0.0-dev-20230212075352"
+    "@pandacss/fixture": "0.0.0-dev-20230212115356"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",