@vinyasa/layout 1.0.23 → 1.0.25

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

@@ -8,34 +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";
+        };
+        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";
         };
     };
     wrap: {
@@ -47,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,8 +6,8 @@ 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" | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | 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;
 } & SpacingProps & import("react").RefAttributes<HTMLElement>>;

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.23",
+  "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.23"
+    "@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.23"
+    "@vinyasa/tokens": "1.0.25"
   },
   "scripts": {
     "build": "rslib build && node ../../scripts/postbuild-package.mjs",