@aurora-ds/components 0.17.15 → 0.17.17

package/dist/cjs/components/layout/grid/Grid.props.d.ts

@@ -3,10 +3,10 @@ import { CSSProperties, ReactNode } from 'react';
 export type GridProps = {
     /** Grid children elements */
     children: ReactNode;
-    /** Number of columns (number or CSS grid-template-columns value). Acts as max columns when minChildWidth is set. */
-    columns?: number | string;
-    /** Number of rows (number or CSS grid-template-rows value). */
-    rows?: number | string;
+    /** Number of columns. Acts as max columns when minChildWidth is set for responsive behavior. */
+    columns?: number;
+    /** Number of rows. */
+    rows?: number;
     /** Gap between columns (theme spacing key) */
     columnGap?: keyof Theme['spacing'];
     /** Gap between rows (theme spacing key) */
@@ -41,8 +41,8 @@ export type GridProps = {
     tabIndex?: number;
 };
 export type GridStyleParams = {
-    columns?: number | string;
-    rows?: number | string;
+    columns?: number;
+    rows?: number;
     columnGap?: keyof Theme['spacing'];
     rowGap?: keyof Theme['spacing'];
     width?: CSSProperties['width'];

package/dist/cjs/index.js

@@ -1893,54 +1893,56 @@ Card.displayName = 'Card';
 /**
  * Generates the grid-template-columns value based on columns and minChildWidth props
  * - If only columns is defined: creates a fixed number of columns
- * - If only minChildWidth is defined: creates responsive auto-fill columns (items stretch)
- * - If both are defined: creates responsive columns with a maximum limit (items don't stretch beyond column width)
+ * - If only minChildWidth is defined: creates responsive auto-fill columns
+ * - If both are defined: creates responsive columns with a maximum limit (columns acts as max)
  *
  * Key difference between auto-fill and auto-fit:
  * - auto-fill: keeps empty column tracks, items don't stretch to fill container
  * - auto-fit: collapses empty tracks, items stretch to fill available space
  */
-const getGridTemplateColumns = (columns, minChildWidth) => {
+const getGridTemplateColumns = (columns, minChildWidth, columnGap) => {
     const minWidthValue = typeof minChildWidth === 'number' ? `${minChildWidth}px` : minChildWidth;
-    if (minChildWidth && typeof columns === 'number') {
+    if (minChildWidth && columns) {
         // Responsive grid with max columns limit
         // Uses auto-fill to preserve empty column tracks (items don't stretch beyond their column)
         // The min value ensures items are at least minChildWidth
         // The max value is 1fr to distribute space evenly within the max columns constraint
-        // The calc ensures we never exceed the specified number of columns
-        const minColumnWidth = `calc((100% - ${columns - 1} * var(--grid-gap, 0px)) / ${columns})`;
+        const gapValue = columnGap || '0px';
+        const minColumnWidth = `calc((100% - (${columns} - 1) * ${gapValue}) / ${columns})`;
         return `repeat(auto-fill, minmax(max(${minWidthValue}, ${minColumnWidth}), 1fr))`;
     }
     if (minChildWidth) {
         // Responsive grid without column limit - items will fill available space
         return `repeat(auto-fill, minmax(${minWidthValue}, 1fr))`;
     }
-    if (typeof columns === 'number') {
+    if (columns) {
         // Fixed number of columns - each column takes equal space
         return `repeat(${columns}, 1fr)`;
     }
-    return columns;
+    return undefined;
 };
 /**
  * Generates the grid-template-rows value based on rows prop
  */
 const getGridTemplateRows = (rows) => {
-    if (typeof rows === 'number') {
-        return `repeat(${rows}, 1fr)`;
+    if (rows) {
+        return `repeat(${rows}, auto)`;
     }
-    return rows;
+    return undefined;
 };
 /**
  * Grid styles using createStyles from @aurora-ds/theme
  */
 const GRID_STYLES = theme.createStyles((theme) => ({
-    root: ({ columns, rows, columnGap = 'md', rowGap = 'md', width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
+    root: ({ columns, rows, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
+        const columnGapValue = columnGap ? theme.spacing[columnGap] : undefined;
+        const rowGapValue = rowGap ? theme.spacing[rowGap] : undefined;
         return {
             display: 'grid',
-            gridTemplateColumns: getGridTemplateColumns(columns, minChildWidth),
+            gridTemplateColumns: getGridTemplateColumns(columns, minChildWidth, columnGapValue),
             gridTemplateRows: getGridTemplateRows(rows),
-            columnGap: theme.spacing[columnGap],
-            rowGap: theme.spacing[rowGap],
+            columnGap: columnGapValue,
+            rowGap: rowGapValue,
             width,
             height,
             minHeight,
@@ -1964,7 +1966,7 @@ const GRID_STYLES = theme.createStyles((theme) => ({
  * - Use `minChildWidth` for responsive auto-fill grids
  * - Combine `columns` + `minChildWidth` for responsive grid with max columns limit
  */
-const Grid = ({ children, columns = 1, rows, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Grid = ({ children, columns = 3, rows, columnGap = 'md', rowGap = 'md', width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsxRuntime.jsx("div", { className: GRID_STYLES.root({
             columns,
             rows,