@delmaredigital/payload-puck 0.6.27 → 0.6.29

package/dist/components/layout/Columns.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Width distribution supports equal columns or fr ratios (e.g. 2:1, 1:2, 1:1:2)
  * for asymmetric layouts.
  */ import { useId } from 'react';
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
 import { AnimatedWrapper } from '../AnimatedWrapper.js';
 import { createPaddingField } from '../../fields/PaddingField.js';
 import { createBorderField } from '../../fields/BorderField.js';
@@ -221,15 +221,19 @@ export const ColumnsConfig = {
         const dimensionsResult = responsiveValueToCSS(dimensions, dimensionsValueToCSS, contentClass);
         const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
         if (visibilityCSS) mediaQueries.push(visibilityCSS);
-        const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
-        const contentStyles = {
-            gap,
-            ...dimensionsResult.baseStyles
-        };
         if (dimensionsResult.mediaQueryCSS) mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        // Self-contained CSS grid — does NOT depend on the consumer's Tailwind
+        // generating utility classes. Single column on mobile (stacked); switches to
+        // the multi-column template at >=768px via the scoped media query below.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
         const gridStyles = {
-            ...contentStyles,
+            display: 'grid',
+            gap,
+            ...dimensionsResult.baseStyles,
             '--cols-template': colsTemplate
         };
         const slots = [
@@ -250,7 +254,7 @@ export const ColumnsConfig = {
                     style: wrapperStyles,
                     children: [
                         /*#__PURE__*/ _jsx("div", {
-                            className: contentClasses,
+                            className: contentClass,
                             style: gridStyles,
                             children: slots.slice(0, safeCount).map((Slot, i)=>{
                                 const ColumnSlot = Slot;
@@ -259,6 +263,7 @@ export const ColumnsConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: var(--cols-template);

package/dist/components/layout/Columns.server.js

@@ -14,7 +14,7 @@
  * This is the server-safe variant (slots only, no editor fields). For the full
  * editor version with fields, use Columns.tsx
  */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
 import { AnimatedWrapper } from '../AnimatedWrapper.js';
 /** Maximum number of column slots the component declares. */ export const MAX_COLUMNS = 4;
 const defaultProps = {
@@ -101,18 +101,20 @@ export const ColumnsConfig = {
         // Visibility media queries
         const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
         if (visibilityCSS) mediaQueries.push(visibilityCSS);
-        // Tailwind: flex column on mobile, grid on md+
-        const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
-        const contentStyles = {
-            gap,
-            ...dimensionsResult.baseStyles
-        };
         if (dimensionsResult.mediaQueryCSS) mediaQueries.push(dimensionsResult.mediaQueryCSS);
-        // grid-template-columns is dynamic, so drive it from a CSS var and scope the
-        // media-query rule to this instance's content class (no cross-instance leak).
+        // Self-contained CSS grid — does NOT depend on the consumer's Tailwind
+        // generating utility classes. Single column on mobile (stacked); switches to
+        // the multi-column template at >=768px via the scoped media query below.
+        // grid-template-columns is dynamic, so drive it from a CSS var.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
         const gridStyles = {
-            ...contentStyles,
+            display: 'grid',
+            gap,
+            ...dimensionsResult.baseStyles,
             '--cols-template': colsTemplate
         };
         const slots = [
@@ -133,7 +135,7 @@ export const ColumnsConfig = {
                     style: wrapperStyles,
                     children: [
                         /*#__PURE__*/ _jsx("div", {
-                            className: contentClasses,
+                            className: contentClass,
                             style: gridStyles,
                             children: slots.slice(0, safeCount).map((Slot, i)=>{
                                 const ColumnSlot = Slot;
@@ -142,6 +144,7 @@ export const ColumnsConfig = {
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
               .${contentClass} {
                 grid-template-columns: var(--cols-template);

package/dist/components/layout/Grid.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - gap: Different gap at different breakpoints
  * - visibility: Show/hide at different breakpoints
  */ import { useId } from 'react';
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
 import { AnimatedWrapper } from '../AnimatedWrapper.js';
 import { createPaddingField } from '../../fields/PaddingField.js';
 import { createBorderField } from '../../fields/BorderField.js';
@@ -176,19 +176,21 @@ export const GridConfig = {
         if (visibilityCSS) {
             mediaQueries.push(visibilityCSS);
         }
-        // Tailwind classes for responsive grid: flex column on mobile, grid on md+
-        const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
-        // Dynamic styles that need inline (user-controlled values: gap, columns)
-        const contentStyles = {
-            gap,
-            ...dimensionsResult.baseStyles
-        };
         if (dimensionsResult.mediaQueryCSS) {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
         }
-        // Grid template columns must be inline since numColumns is dynamic
+        // Self-contained CSS grid — does NOT depend on the consumer's Tailwind
+        // generating utility classes. Single column on mobile (children stacked);
+        // switches to the multi-column track at >=768px via the scoped media query.
+        // grid-template-columns is dynamic, so drive the column count from a CSS var.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const gridStyles = {
-            ...contentStyles,
+            display: 'grid',
+            gap,
+            ...dimensionsResult.baseStyles,
             '--grid-cols': numColumns
         };
         // Combine all media queries
@@ -204,13 +206,14 @@ export const GridConfig = {
                     style: wrapperStyles,
                     children: [
                         /*#__PURE__*/ _jsx(Content, {
-                            className: contentClasses,
+                            className: contentClass,
                             style: gridStyles
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
-              .flex.md\\:grid {
+              .${contentClass} {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);
               }
             }

package/dist/components/layout/Grid.server.js

@@ -14,7 +14,7 @@
  * - margin: Different margins at different breakpoints
  * - visibility: Show/hide at different breakpoints
  */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
 import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Simple ID generator for server-side rendering
 let idCounter = 0;
@@ -85,19 +85,21 @@ export const GridConfig = {
         if (visibilityCSS) {
             mediaQueries.push(visibilityCSS);
         }
-        // Tailwind classes for responsive grid: flex column on mobile, grid on md+
-        const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
-        // Dynamic styles that need inline (user-controlled values: gap, columns)
-        const contentStyles = {
-            gap,
-            ...dimensionsResult.baseStyles
-        };
         if (dimensionsResult.mediaQueryCSS) {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
         }
-        // Grid template columns must be inline since numColumns is dynamic
+        // Self-contained CSS grid — does NOT depend on the consumer's Tailwind
+        // generating utility classes. Single column on mobile (children stacked);
+        // switches to the multi-column track at >=768px via the scoped media query.
+        // grid-template-columns is dynamic, so drive the column count from a CSS var.
+        // NOTE: grid-template-columns must NOT be set inline — an inline style would
+        // outrank the @media rule below (inline beats stylesheet, media queries
+        // included), pinning the layout to one column. Both the mobile base and the
+        // responsive override live in the scoped <style> so the media query can win.
         const gridStyles = {
-            ...contentStyles,
+            display: 'grid',
+            gap,
+            ...dimensionsResult.baseStyles,
             '--grid-cols': numColumns
         };
         // Combine all media queries
@@ -115,13 +117,14 @@ export const GridConfig = {
                     style: wrapperStyles,
                     children: [
                         /*#__PURE__*/ _jsx(ContentSlot, {
-                            className: contentClasses,
+                            className: contentClass,
                             style: gridStyles
                         }),
                         /*#__PURE__*/ _jsx("style", {
                             children: `
+            .${contentClass} { grid-template-columns: 1fr; }
             @media (min-width: 768px) {
-              .flex.md\\:grid {
+              .${contentClass} {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);
               }
             }

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.6.27";
+export declare const VERSION = "0.6.29";

package/dist/version.js

@@ -1,2 +1,2 @@
 // Auto-generated by scripts/generate-version.js - do not edit manually
-export const VERSION = '0.6.27';
+export const VERSION = '0.6.29';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-puck",
-  "version": "0.6.27",
+  "version": "0.6.29",
   "description": "Puck visual page builder plugin for Payload CMS",
   "type": "module",
   "license": "MIT",