@vinyasa/layout 1.0.24 → 1.0.25

package/dist/cjs/grid.cjs

@@ -250,21 +250,23 @@ var __webpack_exports__ = {};
                 start: 'w86wcg7',
                 center: 'w86wcg8',
                 end: 'w86wcg9',
-                stretch: 'w86wcga'
+                stretch: 'w86wcga',
+                baseline: 'w86wcgb'
             },
             justify: {
-                start: 'w86wcgb',
-                center: 'w86wcgc',
-                end: 'w86wcgd',
-                between: 'w86wcge',
-                around: 'w86wcgf'
+                start: 'w86wcgc',
+                center: 'w86wcgd',
+                end: 'w86wcge',
+                between: 'w86wcgf',
+                around: 'w86wcgg',
+                evenly: 'w86wcgh'
             },
             flow: {
-                row: 'w86wcgg',
-                column: 'w86wcgh',
-                dense: 'w86wcgi',
-                'row-dense': 'w86wcgj',
-                'column-dense': 'w86wcgk'
+                row: 'w86wcgi',
+                column: 'w86wcgj',
+                dense: 'w86wcgk',
+                'row-dense': 'w86wcgl',
+                'column-dense': 'w86wcgm'
             }
         },
         defaultVariants: {},

package/dist/cjs/grid.css

@@ -43,42 +43,50 @@
 }
 
 .w86wcgb {
-  justify-content: flex-start;
+  align-items: baseline;
 }
 
 .w86wcgc {
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .w86wcgd {
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 .w86wcge {
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 
 .w86wcgf {
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 .w86wcgg {
-  grid-auto-flow: row;
+  justify-content: space-around;
 }
 
 .w86wcgh {
-  grid-auto-flow: column;
+  justify-content: space-evenly;
 }
 
 .w86wcgi {
-  grid-auto-flow: dense;
+  grid-auto-flow: row;
 }
 
 .w86wcgj {
-  grid-auto-flow: row dense;
+  grid-auto-flow: column;
 }
 
 .w86wcgk {
+  grid-auto-flow: dense;
+}
+
+.w86wcgl {
+  grid-auto-flow: row dense;
+}
+
+.w86wcgm {
   grid-auto-flow: column dense;
 }
 

package/dist/cjs/index.cjs

@@ -915,7 +915,7 @@ var __webpack_modules__ = {
             default: __rspack_default_export
         });
     },
-    13 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+    52 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
         __webpack_require__.d(__webpack_exports__, {
             default: ()=>components_grid
         });
@@ -938,21 +938,23 @@ var __webpack_modules__ = {
                     start: 'w86wcg7',
                     center: 'w86wcg8',
                     end: 'w86wcg9',
-                    stretch: 'w86wcga'
+                    stretch: 'w86wcga',
+                    baseline: 'w86wcgb'
                 },
                 justify: {
-                    start: 'w86wcgb',
-                    center: 'w86wcgc',
-                    end: 'w86wcgd',
-                    between: 'w86wcge',
-                    around: 'w86wcgf'
+                    start: 'w86wcgc',
+                    center: 'w86wcgd',
+                    end: 'w86wcge',
+                    between: 'w86wcgf',
+                    around: 'w86wcgg',
+                    evenly: 'w86wcgh'
                 },
                 flow: {
-                    row: 'w86wcgg',
-                    column: 'w86wcgh',
-                    dense: 'w86wcgi',
-                    'row-dense': 'w86wcgj',
-                    'column-dense': 'w86wcgk'
+                    row: 'w86wcgi',
+                    column: 'w86wcgj',
+                    dense: 'w86wcgk',
+                    'row-dense': 'w86wcgl',
+                    'column-dense': 'w86wcgm'
                 }
             },
             defaultVariants: {},
@@ -1766,7 +1768,7 @@ var __webpack_exports__ = {};
     var _components_container__rspack_import_3 = __webpack_require__(445);
     var _components_divider__rspack_import_4 = __webpack_require__(635);
     var _components_flex__rspack_import_5 = __webpack_require__(205);
-    var _components_grid__rspack_import_6 = __webpack_require__(13);
+    var _components_grid__rspack_import_6 = __webpack_require__(52);
     var _components_inline__rspack_import_7 = __webpack_require__(685);
     var _components_portal__rspack_import_8 = __webpack_require__(4);
     var _components_scroll_area__rspack_import_9 = __webpack_require__(778);

package/dist/cjs/index.css

@@ -178,42 +178,50 @@
 }
 
 .w86wcgb {
-  justify-content: flex-start;
+  align-items: baseline;
 }
 
 .w86wcgc {
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .w86wcgd {
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 .w86wcge {
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 
 .w86wcgf {
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 .w86wcgg {
-  grid-auto-flow: row;
+  justify-content: space-around;
 }
 
 .w86wcgh {
-  grid-auto-flow: column;
+  justify-content: space-evenly;
 }
 
 .w86wcgi {
-  grid-auto-flow: dense;
+  grid-auto-flow: row;
 }
 
 .w86wcgj {
-  grid-auto-flow: row dense;
+  grid-auto-flow: column;
 }
 
 .w86wcgk {
+  grid-auto-flow: dense;
+}
+
+.w86wcgl {
+  grid-auto-flow: row dense;
+}
+
+.w86wcgm {
   grid-auto-flow: column dense;
 }
 

package/dist/esm/components/flex/Flex.css.d.ts

@@ -8,40 +8,40 @@ export declare const flex: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
     align: {
-        start: {
-            alignItems: "flex-start";
+        readonly start: {
+            readonly alignItems: "flex-start";
         };
-        center: {
-            alignItems: "center";
+        readonly center: {
+            readonly alignItems: "center";
         };
-        end: {
-            alignItems: "flex-end";
+        readonly end: {
+            readonly alignItems: "flex-end";
         };
-        stretch: {
-            alignItems: "stretch";
+        readonly stretch: {
+            readonly alignItems: "stretch";
         };
-        baseline: {
-            alignItems: "baseline";
+        readonly baseline: {
+            readonly alignItems: "baseline";
         };
     };
     justify: {
-        start: {
-            justifyContent: "flex-start";
+        readonly start: {
+            readonly justifyContent: "flex-start";
         };
-        center: {
-            justifyContent: "center";
+        readonly center: {
+            readonly justifyContent: "center";
         };
-        end: {
-            justifyContent: "flex-end";
+        readonly end: {
+            readonly justifyContent: "flex-end";
         };
-        between: {
-            justifyContent: "space-between";
+        readonly between: {
+            readonly justifyContent: "space-between";
         };
-        around: {
-            justifyContent: "space-around";
+        readonly around: {
+            readonly justifyContent: "space-around";
         };
-        evenly: {
-            justifyContent: "space-evenly";
+        readonly evenly: {
+            readonly justifyContent: "space-evenly";
         };
     };
     wrap: {
@@ -53,23 +53,23 @@ export declare const flex: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
     gap: {
-        1: {
-            gap: `var(--${string})`;
+        readonly 1: {
+            readonly gap: `var(--${string})`;
         };
-        2: {
-            gap: `var(--${string})`;
+        readonly 2: {
+            readonly gap: `var(--${string})`;
         };
-        3: {
-            gap: `var(--${string})`;
+        readonly 3: {
+            readonly gap: `var(--${string})`;
         };
-        4: {
-            gap: `var(--${string})`;
+        readonly 4: {
+            readonly gap: `var(--${string})`;
         };
-        5: {
-            gap: `var(--${string})`;
+        readonly 5: {
+            readonly gap: `var(--${string})`;
         };
-        6: {
-            gap: `var(--${string})`;
+        readonly 6: {
+            readonly gap: `var(--${string})`;
         };
     };
 }>;

package/dist/esm/components/flex/Flex.d.ts

@@ -6,7 +6,7 @@ type FlexVariants = RecipeVariants<typeof flex>;
 export type FlexProps = PolymorphicProps & FlexVariants & SpacingProps;
 declare const Flex: import("react").ForwardRefExoticComponent<PolymorphicProps & {
     direction?: "column" | "row" | undefined;
-    align?: "center" | "stretch" | "end" | "start" | "baseline" | undefined;
+    align?: "center" | "stretch" | "baseline" | "end" | "start" | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | undefined;
     wrap?: "nowrap" | "wrap" | undefined;
     gap?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;

package/dist/esm/components/grid/Grid.css.d.ts

@@ -1,53 +1,59 @@
 export declare const grid: import("@vanilla-extract/recipes").RuntimeFn<{
     gap: {
-        1: {
-            gap: `var(--${string})`;
+        readonly 1: {
+            readonly gap: `var(--${string})`;
         };
-        2: {
-            gap: `var(--${string})`;
+        readonly 2: {
+            readonly gap: `var(--${string})`;
         };
-        3: {
-            gap: `var(--${string})`;
+        readonly 3: {
+            readonly gap: `var(--${string})`;
         };
-        4: {
-            gap: `var(--${string})`;
+        readonly 4: {
+            readonly gap: `var(--${string})`;
         };
-        5: {
-            gap: `var(--${string})`;
+        readonly 5: {
+            readonly gap: `var(--${string})`;
         };
-        6: {
-            gap: `var(--${string})`;
+        readonly 6: {
+            readonly gap: `var(--${string})`;
         };
     };
     align: {
-        start: {
-            alignItems: "flex-start";
+        readonly start: {
+            readonly alignItems: "flex-start";
         };
-        center: {
-            alignItems: "center";
+        readonly center: {
+            readonly alignItems: "center";
         };
-        end: {
-            alignItems: "flex-end";
+        readonly end: {
+            readonly alignItems: "flex-end";
         };
-        stretch: {
-            alignItems: "stretch";
+        readonly stretch: {
+            readonly alignItems: "stretch";
+        };
+        readonly baseline: {
+            readonly alignItems: "baseline";
         };
     };
     justify: {
-        start: {
-            justifyContent: "flex-start";
+        readonly start: {
+            readonly justifyContent: "flex-start";
+        };
+        readonly center: {
+            readonly justifyContent: "center";
         };
-        center: {
-            justifyContent: "center";
+        readonly end: {
+            readonly justifyContent: "flex-end";
         };
-        end: {
-            justifyContent: "flex-end";
+        readonly between: {
+            readonly justifyContent: "space-between";
         };
-        between: {
-            justifyContent: "space-between";
+        readonly around: {
+            readonly justifyContent: "space-around";
         };
-        around: {
-            justifyContent: "space-around";
+        readonly evenly: {
+            readonly justifyContent: "space-evenly";
         };
     };
     flow: {

package/dist/esm/components/grid/Grid.d.ts

@@ -11,8 +11,8 @@ export type GridProps = PolymorphicProps & GridVariants & SpacingProps & {
 };
 declare const Grid: import("react").ForwardRefExoticComponent<PolymorphicProps & {
     gap?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-    align?: "center" | "stretch" | "end" | "start" | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | undefined;
+    align?: "center" | "stretch" | "baseline" | "end" | "start" | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | undefined;
     flow?: "column" | "row" | "dense" | "row-dense" | "column-dense" | undefined;
 } & SpacingProps & {
     /** Number of equal-width columns, or a raw `grid-template-columns` value for advanced layouts. */

package/dist/esm/flexGridVariants.d.ts

@@ -0,0 +1,57 @@
+export declare const gapVariants: {
+    readonly 1: {
+        readonly gap: `var(--${string})`;
+    };
+    readonly 2: {
+        readonly gap: `var(--${string})`;
+    };
+    readonly 3: {
+        readonly gap: `var(--${string})`;
+    };
+    readonly 4: {
+        readonly gap: `var(--${string})`;
+    };
+    readonly 5: {
+        readonly gap: `var(--${string})`;
+    };
+    readonly 6: {
+        readonly gap: `var(--${string})`;
+    };
+};
+export declare const alignItemsVariants: {
+    readonly start: {
+        readonly alignItems: "flex-start";
+    };
+    readonly center: {
+        readonly alignItems: "center";
+    };
+    readonly end: {
+        readonly alignItems: "flex-end";
+    };
+    readonly stretch: {
+        readonly alignItems: "stretch";
+    };
+    readonly baseline: {
+        readonly alignItems: "baseline";
+    };
+};
+export declare const justifyContentVariants: {
+    readonly start: {
+        readonly justifyContent: "flex-start";
+    };
+    readonly center: {
+        readonly justifyContent: "center";
+    };
+    readonly end: {
+        readonly justifyContent: "flex-end";
+    };
+    readonly between: {
+        readonly justifyContent: "space-between";
+    };
+    readonly around: {
+        readonly justifyContent: "space-around";
+    };
+    readonly evenly: {
+        readonly justifyContent: "space-evenly";
+    };
+};

package/dist/esm/grid.css

@@ -43,42 +43,50 @@
 }
 
 .w86wcgb {
-  justify-content: flex-start;
+  align-items: baseline;
 }
 
 .w86wcgc {
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .w86wcgd {
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 .w86wcge {
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 
 .w86wcgf {
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 .w86wcgg {
-  grid-auto-flow: row;
+  justify-content: space-around;
 }
 
 .w86wcgh {
-  grid-auto-flow: column;
+  justify-content: space-evenly;
 }
 
 .w86wcgi {
-  grid-auto-flow: dense;
+  grid-auto-flow: row;
 }
 
 .w86wcgj {
-  grid-auto-flow: row dense;
+  grid-auto-flow: column;
 }
 
 .w86wcgk {
+  grid-auto-flow: dense;
+}
+
+.w86wcgl {
+  grid-auto-flow: row dense;
+}
+
+.w86wcgm {
   grid-auto-flow: column dense;
 }
 

package/dist/esm/grid.js

@@ -18,21 +18,23 @@ var grid = createRuntimeFn({
             start: 'w86wcg7',
             center: 'w86wcg8',
             end: 'w86wcg9',
-            stretch: 'w86wcga'
+            stretch: 'w86wcga',
+            baseline: 'w86wcgb'
         },
         justify: {
-            start: 'w86wcgb',
-            center: 'w86wcgc',
-            end: 'w86wcgd',
-            between: 'w86wcge',
-            around: 'w86wcgf'
+            start: 'w86wcgc',
+            center: 'w86wcgd',
+            end: 'w86wcge',
+            between: 'w86wcgf',
+            around: 'w86wcgg',
+            evenly: 'w86wcgh'
         },
         flow: {
-            row: 'w86wcgg',
-            column: 'w86wcgh',
-            dense: 'w86wcgi',
-            'row-dense': 'w86wcgj',
-            'column-dense': 'w86wcgk'
+            row: 'w86wcgi',
+            column: 'w86wcgj',
+            dense: 'w86wcgk',
+            'row-dense': 'w86wcgl',
+            'column-dense': 'w86wcgm'
         }
     },
     defaultVariants: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinyasa/layout",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -119,7 +119,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@vinyasa/tokens": "^1.0.24"
+    "@vinyasa/tokens": "^1.0.25"
   },
   "dependencies": {
     "@radix-ui/react-scroll-area": "^1.2.18"
@@ -136,7 +136,7 @@
     "@vanilla-extract/vite-plugin": "^5.2.3",
     "@vanilla-extract/webpack-plugin": "^2.3.27",
     "typescript": "^5.7.3",
-    "@vinyasa/tokens": "1.0.24"
+    "@vinyasa/tokens": "1.0.25"
   },
   "scripts": {
     "build": "rslib build && node ../../scripts/postbuild-package.mjs",