@aurora-ds/components 0.17.14 → 0.17.16

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

@@ -7,8 +7,6 @@ export type GridProps = {
     columns?: number | string;
     /** Number of rows (number or CSS grid-template-rows value). */
     rows?: number | string;
-    /** Gap between items (theme spacing key) */
-    gap?: keyof Theme['spacing'];
     /** Gap between columns (theme spacing key) */
     columnGap?: keyof Theme['spacing'];
     /** Gap between rows (theme spacing key) */
@@ -45,7 +43,6 @@ export type GridProps = {
 export type GridStyleParams = {
     columns?: number | string;
     rows?: number | string;
-    gap?: keyof Theme['spacing'];
     columnGap?: keyof Theme['spacing'];
     rowGap?: keyof Theme['spacing'];
     width?: CSSProperties['width'];

package/dist/cjs/index.js

@@ -1900,7 +1900,7 @@ Card.displayName = 'Card';
  * - 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') {
         // Responsive grid with max columns limit
@@ -1908,7 +1908,8 @@ const getGridTemplateColumns = (columns, minChildWidth) => {
         // 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) {
@@ -1934,16 +1935,15 @@ const getGridTemplateRows = (rows) => {
  * Grid styles using createStyles from @aurora-ds/theme
  */
 const GRID_STYLES = theme.createStyles((theme) => ({
-    root: ({ columns, rows, gap, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
-        const gapValue = gap ? theme.spacing[gap] : undefined;
-        const columnGapValue = columnGap ? theme.spacing[columnGap] : gapValue;
+    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),
-            gap: gapValue,
-            columnGap: columnGap ? theme.spacing[columnGap] : undefined,
-            rowGap: rowGap ? theme.spacing[rowGap] : undefined,
+            columnGap: columnGapValue,
+            rowGap: rowGapValue,
             width,
             height,
             minHeight,
@@ -1951,8 +1951,7 @@ const GRID_STYLES = theme.createStyles((theme) => ({
             justifyItems,
             alignContent,
             justifyContent,
-            padding: padding ? theme.spacing[padding] : undefined,
-            '--grid-gap': columnGapValue || gapValue || '0px',
+            padding: padding ? theme.spacing[padding] : undefined
         };
     },
 }));
@@ -1968,11 +1967,10 @@ 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, gap = 'sm', columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Grid = ({ children, columns = 1, 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,
-            gap,
             columnGap,
             rowGap,
             width,
@@ -2485,7 +2483,7 @@ const TAB_ITEM_STYLES = theme.createStyles((theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: theme.spacing.md,
+        gap: theme.spacing.sm,
         backgroundColor: isActive ? theme.colors.background : 'transparent',
         color: isActive ? theme.colors.text : theme.colors.textSecondary,
         boxShadow: isActive ? theme.shadows.sm : undefined,