@latte-macchiat-io/latte-vanilla-components 0.0.220 → 0.0.222

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.220",
+  "version": "0.0.222",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Columns/index.tsx

@@ -1,27 +1,17 @@
 import { clsx } from 'clsx';
 
-import { columnItem, columnsRecipe, ColumnsVariants } from './styles.css';
+import { columnsRecipe, ColumnsVariants } from './styles.css';
 
 export type ColumnsProps = React.HTMLAttributes<HTMLDivElement> &
   ColumnsVariants & {
-    columns: number[];
+    columns: number[]; // ex: [50, 50] ou [25, 75]
     children: React.ReactNode;
   };
 
 export const Columns = ({ align, vAlign, columns, children, className }: ColumnsProps) => {
   return (
-    <div className={clsx(columnsRecipe({ align, vAlign }), className)}>
-      {Array.isArray(children) &&
-        children.map((child, index) => (
-          <div
-            key={index}
-            className={columnItem}
-            style={{
-              flex: `0 0 ${columns[index]}%`,
-            }}>
-            {child}
-          </div>
-        ))}
+    <div className={clsx(columnsRecipe({ align, vAlign }), className)} style={{ ['--columns' as never]: columns.map((c) => `${c}%`).join(' ') }}>
+      {children}
     </div>
   );
 };

package/src/components/Columns/styles.css.ts

@@ -1,4 +1,3 @@
-import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme/contract.css';
@@ -7,10 +6,9 @@ import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 export const columnsRecipe = recipe({
   base: [
     {
+      display: 'grid',
       width: '100%',
-      display: 'flex',
-      flexWrap: 'wrap',
-      flexDirection: 'column',
+      gridTemplateColumns: '1fr', // Mobile : une seule colonne
 
       '@media': {
         ...generateResponsiveMedia({
@@ -18,7 +16,8 @@ export const columnsRecipe = recipe({
         }),
 
         [queries.sm]: {
-          flexDirection: 'row',
+          gridAutoFlow: 'row',
+          gridTemplateColumns: 'var(--columns)', // desktop : prend la variable CSS
         },
       },
     },
@@ -26,29 +25,14 @@ export const columnsRecipe = recipe({
 
   variants: {
     align: {
-      left: {
-        textAlign: 'left',
-      },
-      center: {
-        textAlign: 'center',
-      },
-      right: {
-        textAlign: 'right',
-      },
+      left: { textAlign: 'left' },
+      center: { textAlign: 'center' },
+      right: { textAlign: 'right' },
     },
     vAlign: {
-      top: {
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-      },
-      center: {
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-      bottom: {
-        alignItems: 'flex-end',
-        justifyContent: 'flex-end',
-      },
+      top: { alignItems: 'start' },
+      center: { alignItems: 'center' },
+      bottom: { alignItems: 'end' },
     },
   },
 
@@ -57,17 +41,4 @@ export const columnsRecipe = recipe({
   },
 });
 
-export const columnItem = style({
-  minWidth: 0,
-  flex: '0 0 100%',
-  position: 'relative',
-
-  '@media': {
-    [queries.md]: {
-      flex: 'unset',
-      maxWidth: 'unset',
-    },
-  },
-});
-
 export type ColumnsVariants = RecipeVariants<typeof columnsRecipe>;