@aurora-ds/components 0.17.10 → 0.17.12

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

@@ -9,6 +9,7 @@ import { GridProps } from '@components/layout/grid/Grid.props.ts';
  * - Use `columns` to define the number of columns or a custom grid-template-columns value
  * - Use `rows` to define the number of rows or a custom grid-template-rows value
  * - Use `minChildWidth` for responsive auto-fill grids
+ * - Combine `columns` + `minChildWidth` for responsive grid with max columns limit
  */
 declare const Grid: FC<GridProps>;
 export default Grid;

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

@@ -29,7 +29,7 @@ export type GridProps = {
     justifyContent?: CSSProperties['justifyContent'];
     /** Padding inside the grid */
     padding?: keyof Theme['spacing'];
-    /** Minimum width for auto-fill/auto-fit columns */
+    /** Minimum width for each grid child. Enables responsive auto-fill behavior. */
     minChildWidth?: CSSProperties['width'];
     /** Accessibility label for screen readers */
     ariaLabel?: string;

package/dist/esm/index.js

@@ -1891,22 +1891,30 @@ 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
- * - If both are defined: creates responsive columns with a maximum limit
+ * - 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)
+ *
+ * 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 minWidthValue = typeof minChildWidth === 'number' ? `${minChildWidth}px` : minChildWidth;
     if (minChildWidth && typeof columns === 'number') {
         // Responsive grid with max columns limit
-        // Uses auto-fit with max() to ensure we don't exceed the column limit
-        return `repeat(auto-fit, minmax(max(${minWidthValue}, calc((100% - ${(columns - 1)} * var(--grid-gap, 0px)) / ${columns})), 1fr))`;
+        // 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})`;
+        return `repeat(auto-fill, minmax(max(${minWidthValue}, ${minColumnWidth}), 1fr))`;
     }
     if (minChildWidth) {
-        // Responsive grid without column limit
+        // Responsive grid without column limit - items will fill available space
         return `repeat(auto-fill, minmax(${minWidthValue}, 1fr))`;
     }
     if (typeof columns === 'number') {
-        // Fixed columns
+        // Fixed number of columns - each column takes equal space
         return `repeat(${columns}, 1fr)`;
     }
     return columns;
@@ -1942,7 +1950,6 @@ const GRID_STYLES = createStyles((theme) => ({
             alignContent,
             justifyContent,
             padding: padding ? theme.spacing[padding] : undefined,
-            // CSS variable for gap calculation in grid-template-columns
             '--grid-gap': columnGapValue || gapValue || '0px',
         };
     },
@@ -1957,6 +1964,7 @@ const GRID_STYLES = createStyles((theme) => ({
  * - Use `columns` to define the number of columns or a custom grid-template-columns value
  * - Use `rows` to define the number of rows or a custom grid-template-rows value
  * - Use `minChildWidth` for responsive auto-fill grids
+ * - Combine `columns` + `minChildWidth` for responsive grid with max columns limit
  */
 const Grid = ({ children, columns = 1, rows, gap = 'sm', columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsx("div", { className: GRID_STYLES.root({