@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/components/layout/Grid.server.d.ts

@@ -15,7 +15,7 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
 export type GridSemanticElement = 'div' | 'ul' | 'ol';
 export interface GridProps {
     content: unknown;
@@ -31,4 +31,3 @@ export interface GridProps {
     visibility: VisibilityValue | null;
 }
 export declare const GridConfig: ComponentConfig;
-//# sourceMappingURL=Grid.server.d.ts.map

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

@@ -1,6 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
+/**
+ * Grid Component - Server-safe Puck Configuration
+ *
+ * CSS Grid layout following official Puck demo patterns.
+ * Responsive: stacks on mobile (flex column), grid on desktop (md+).
+ * Uses Tailwind classes for layout, inline styles for dynamic user values.
+ *
+ * This is a server-safe version with NO fields property (only slot for content).
+ * For the full editor version with fields, use Grid.tsx
+ *
+ * Responsive Controls:
+ * - dimensions: Different dimensions at different breakpoints
+ * - customPadding: Different padding at different breakpoints
+ * - 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 { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Simple ID generator for server-side rendering
 let idCounter = 0;
 function generateUniqueId() {
@@ -17,15 +32,17 @@ const defaultProps = {
     border: null,
     margin: null,
     animation: null,
-    visibility: null,
+    visibility: null
 };
 export const GridConfig = {
     label: 'Grid',
     fields: {
-        content: { type: 'slot' },
+        content: {
+            type: 'slot'
+        }
     },
     defaultProps,
-    render: ({ content: Content, semanticElement = 'div', numColumns, gap, background, customPadding, dimensions, border, margin, animation, visibility, }) => {
+    render: ({ content: Content, semanticElement = 'div', numColumns, gap, background, customPadding, dimensions, border, margin, animation, visibility })=>{
         // Dynamic element based on semanticElement prop
         const Wrapper = semanticElement;
         // Generate unique IDs for CSS targeting (server-safe)
@@ -38,10 +55,12 @@ export const GridConfig = {
         const backgroundStyles = backgroundValueToCSS(background);
         // Build wrapper styles
         const wrapperStyles = {
-            ...backgroundStyles,
+            ...backgroundStyles
         };
         // Add padding with responsive support
-        const paddingResult = responsiveValueToCSS(customPadding, (v) => ({ padding: paddingValueToCSS(v) }), wrapperClass);
+        const paddingResult = responsiveValueToCSS(customPadding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), wrapperClass);
         Object.assign(wrapperStyles, paddingResult.baseStyles);
         if (paddingResult.mediaQueryCSS) {
             mediaQueries.push(paddingResult.mediaQueryCSS);
@@ -52,7 +71,9 @@ export const GridConfig = {
             Object.assign(wrapperStyles, borderStyles);
         }
         // Add margin with responsive support
-        const marginResult = responsiveValueToCSS(margin, (v) => ({ margin: marginValueToCSS(v) }), wrapperClass);
+        const marginResult = responsiveValueToCSS(margin, (v)=>({
+                margin: marginValueToCSS(v)
+            }), wrapperClass);
         Object.assign(wrapperStyles, marginResult.baseStyles);
         if (marginResult.mediaQueryCSS) {
             mediaQueries.push(marginResult.mediaQueryCSS);
@@ -69,7 +90,7 @@ export const GridConfig = {
         // Dynamic styles that need inline (user-controlled values: gap, columns)
         const contentStyles = {
             gap,
-            ...dimensionsResult.baseStyles,
+            ...dimensionsResult.baseStyles
         };
         if (dimensionsResult.mediaQueryCSS) {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
@@ -77,19 +98,38 @@ export const GridConfig = {
         // Grid template columns must be inline since numColumns is dynamic
         const gridStyles = {
             ...contentStyles,
-            '--grid-cols': numColumns,
+            '--grid-cols': numColumns
         };
         // Combine all media queries
         const allMediaQueryCSS = mediaQueries.join('\n');
         // Type assertion for Puck slot content - cast to any to avoid complex React type issues
         const ContentSlot = Content;
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsxs(Wrapper, { className: wrapperClass, style: wrapperStyles, children: [_jsx(ContentSlot, { className: contentClasses, style: gridStyles }), _jsx("style", { children: `
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsxs(Wrapper, {
+                    className: wrapperClass,
+                    style: wrapperStyles,
+                    children: [
+                        /*#__PURE__*/ _jsx(ContentSlot, {
+                            className: contentClasses,
+                            style: gridStyles
+                        }),
+                        /*#__PURE__*/ _jsx("style", {
+                            children: `
             @media (min-width: 768px) {
               .flex.md\\:grid {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);
               }
             }
-          ` })] })] }));
-    },
+          `
+                        })
+                    ]
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Grid.server.js.map

package/dist/components/layout/Section.d.ts

@@ -16,7 +16,7 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
 export type SemanticElement = 'section' | 'article' | 'aside' | 'nav' | 'div' | 'header' | 'footer' | 'main';
 export interface SectionProps {
     id: string;
@@ -34,4 +34,3 @@ export interface SectionProps {
     visibility: VisibilityValue | null;
 }
 export declare const SectionConfig: ComponentConfig;
-//# sourceMappingURL=Section.d.ts.map

package/dist/components/layout/Section.js

@@ -15,19 +15,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - contentPadding: Different content padding at different breakpoints
  * - sectionMargin: Different margins 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';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createBorderField } from '../../fields/BorderField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createMarginField } from '../../fields/MarginField';
-import { createResetField } from '../../fields/ResetField';
-import { createBackgroundField } from '../../fields/BackgroundField';
-import { createAnimationField } from '../../fields/AnimationField';
-import { createResponsiveField } from '../../fields/ResponsiveField';
-import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+ */ import { useId } from 'react';
+import { cn, 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';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createMarginField } from '../../fields/MarginField.js';
+import { createResetField } from '../../fields/ResetField.js';
+import { createBackgroundField } from '../../fields/BackgroundField.js';
+import { createAnimationField } from '../../fields/AnimationField.js';
+import { createResponsiveField } from '../../fields/ResponsiveField.js';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js';
 // Default padding (none) - used for margin fields
 const DEFAULT_PADDING = {
     top: 0,
@@ -35,7 +34,7 @@ const DEFAULT_PADDING = {
     bottom: 0,
     left: 0,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 // Default section padding - standard vertical spacing for sections
 const DEFAULT_SECTION_PADDING = {
@@ -44,13 +43,17 @@ const DEFAULT_SECTION_PADDING = {
     bottom: 48,
     left: 0,
     unit: 'px',
-    linked: false,
+    linked: false
 };
 // Default content dimensions - 1200px max-width centered
 const DEFAULT_CONTENT_DIMENSIONS = {
     mode: 'contained',
     alignment: 'center',
-    maxWidth: { value: 1200, unit: 'px', enabled: true },
+    maxWidth: {
+        value: 1200,
+        unit: 'px',
+        enabled: true
+    }
 };
 // Default content padding with standard horizontal spacing
 const DEFAULT_CONTENT_PADDING = {
@@ -59,7 +62,7 @@ const DEFAULT_CONTENT_PADDING = {
     bottom: 0,
     left: 16,
     unit: 'px',
-    linked: false,
+    linked: false
 };
 const defaultProps = {
     id: '',
@@ -68,77 +71,121 @@ const defaultProps = {
     // Section layer defaults - padding gives sections proper spacing
     sectionBackground: null,
     sectionBorder: null,
-    sectionPadding: { xs: DEFAULT_SECTION_PADDING },
+    sectionPadding: {
+        xs: DEFAULT_SECTION_PADDING
+    },
     sectionMargin: null,
     // Content layer defaults - 1200px max-width so two-layer design is immediately visible
-    contentDimensions: { xs: DEFAULT_CONTENT_DIMENSIONS },
+    contentDimensions: {
+        xs: DEFAULT_CONTENT_DIMENSIONS
+    },
     contentBackground: null,
     contentBorder: null,
-    contentPadding: { xs: DEFAULT_CONTENT_PADDING },
+    contentPadding: {
+        xs: DEFAULT_CONTENT_PADDING
+    },
     // Other
     animation: null,
-    visibility: null,
+    visibility: null
 };
 export const SectionConfig = {
     label: 'Section',
     fields: {
-        _reset: createResetField({ defaultProps }),
+        _reset: createResetField({
+            defaultProps
+        }),
         // Visibility first
-        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
         // Semantic element selection
         semanticElement: {
             type: 'select',
             label: 'HTML Element',
             options: [
-                { label: 'Section', value: 'section' },
-                { label: 'Article', value: 'article' },
-                { label: 'Aside', value: 'aside' },
-                { label: 'Nav', value: 'nav' },
-                { label: 'Header', value: 'header' },
-                { label: 'Footer', value: 'footer' },
-                { label: 'Main', value: 'main' },
-                { label: 'Div', value: 'div' },
-            ],
+                {
+                    label: 'Section',
+                    value: 'section'
+                },
+                {
+                    label: 'Article',
+                    value: 'article'
+                },
+                {
+                    label: 'Aside',
+                    value: 'aside'
+                },
+                {
+                    label: 'Nav',
+                    value: 'nav'
+                },
+                {
+                    label: 'Header',
+                    value: 'header'
+                },
+                {
+                    label: 'Footer',
+                    value: 'footer'
+                },
+                {
+                    label: 'Main',
+                    value: 'main'
+                },
+                {
+                    label: 'Div',
+                    value: 'div'
+                }
+            ]
         },
         // Section ID for anchors
         id: {
             type: 'text',
-            label: 'Section ID',
+            label: 'Section ID'
         },
         content: {
-            type: 'slot',
+            type: 'slot'
         },
         // Section layer (outer)
-        sectionBackground: createBackgroundField({ label: 'Section Background' }),
-        sectionBorder: createBorderField({ label: 'Section Border' }),
+        sectionBackground: createBackgroundField({
+            label: 'Section Background'
+        }),
+        sectionBorder: createBorderField({
+            label: 'Section Border'
+        }),
         sectionPadding: createResponsiveField({
             label: 'Section Padding',
-            innerField: (config) => createPaddingField(config),
-            defaultValue: DEFAULT_PADDING,
+            innerField: (config)=>createPaddingField(config),
+            defaultValue: DEFAULT_PADDING
         }),
         sectionMargin: createResponsiveField({
             label: 'Section Margin',
-            innerField: (config) => createMarginField(config),
-            defaultValue: DEFAULT_PADDING,
+            innerField: (config)=>createMarginField(config),
+            defaultValue: DEFAULT_PADDING
         }),
         // Content layer (inner)
         contentDimensions: createResponsiveField({
             label: 'Content Dimensions',
-            innerField: (config) => createDimensionsField(config),
-            defaultValue: DEFAULT_CONTENT_DIMENSIONS,
+            innerField: (config)=>createDimensionsField(config),
+            defaultValue: DEFAULT_CONTENT_DIMENSIONS
+        }),
+        contentBackground: createBackgroundField({
+            label: 'Content Background'
+        }),
+        contentBorder: createBorderField({
+            label: 'Content Border'
         }),
-        contentBackground: createBackgroundField({ label: 'Content Background' }),
-        contentBorder: createBorderField({ label: 'Content Border' }),
         contentPadding: createResponsiveField({
             label: 'Content Padding',
-            innerField: (config) => createPaddingField(config),
-            defaultValue: DEFAULT_PADDING,
+            innerField: (config)=>createPaddingField(config),
+            defaultValue: DEFAULT_PADDING
         }),
         // Animation
-        animation: createAnimationField({ label: 'Animation' }),
+        animation: createAnimationField({
+            label: 'Animation'
+        })
     },
     defaultProps,
-    render: ({ id, content: Content, semanticElement = 'section', sectionBackground, sectionBorder, sectionPadding, sectionMargin, contentDimensions, contentBackground, contentBorder, contentPadding, animation, visibility, }) => {
+    render: ({ id, content: Content, semanticElement = 'section', sectionBackground, sectionBorder, sectionPadding, sectionMargin, contentDimensions, contentBackground, contentBorder, contentPadding, animation, visibility })=>{
         // Dynamic element based on semanticElement prop
         const Wrapper = semanticElement;
         // Generate unique IDs for CSS targeting
@@ -151,7 +198,7 @@ export const SectionConfig = {
         // === Section layer styles (outer, full-width) ===
         const sectionBackgroundStyles = backgroundValueToCSS(sectionBackground);
         const sectionStyles = {
-            ...sectionBackgroundStyles,
+            ...sectionBackgroundStyles
         };
         // Section border
         const sectionBorderStyles = borderValueToCSS(sectionBorder);
@@ -159,13 +206,17 @@ export const SectionConfig = {
             Object.assign(sectionStyles, sectionBorderStyles);
         }
         // Section padding with responsive support
-        const sectionPaddingResult = responsiveValueToCSS(sectionPadding, (v) => ({ padding: paddingValueToCSS(v) }), sectionClass);
+        const sectionPaddingResult = responsiveValueToCSS(sectionPadding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), sectionClass);
         Object.assign(sectionStyles, sectionPaddingResult.baseStyles);
         if (sectionPaddingResult.mediaQueryCSS) {
             mediaQueries.push(sectionPaddingResult.mediaQueryCSS);
         }
         // Section margin with responsive support
-        const sectionMarginResult = responsiveValueToCSS(sectionMargin, (v) => ({ margin: marginValueToCSS(v) }), sectionClass);
+        const sectionMarginResult = responsiveValueToCSS(sectionMargin, (v)=>({
+                margin: marginValueToCSS(v)
+            }), sectionClass);
         Object.assign(sectionStyles, sectionMarginResult.baseStyles);
         if (sectionMarginResult.mediaQueryCSS) {
             mediaQueries.push(sectionMarginResult.mediaQueryCSS);
@@ -178,7 +229,7 @@ export const SectionConfig = {
         // === Content layer styles (inner, constrained) ===
         const contentBackgroundStyles = backgroundValueToCSS(contentBackground);
         const contentStyles = {
-            ...contentBackgroundStyles,
+            ...contentBackgroundStyles
         };
         // Content dimensions with responsive support
         const contentDimensionsResult = responsiveValueToCSS(contentDimensions, dimensionsValueToCSS, contentClass);
@@ -187,15 +238,13 @@ export const SectionConfig = {
             mediaQueries.push(contentDimensionsResult.mediaQueryCSS);
         }
         // Check if minHeight is set - if so, we need flex layout to make slot expand
-        const hasMinHeight = (() => {
-            if (!contentDimensions)
-                return false;
+        const hasMinHeight = (()=>{
+            if (!contentDimensions) return false;
             // Check if it's a responsive value
             if (typeof contentDimensions === 'object' && 'xs' in contentDimensions) {
                 const responsiveDims = contentDimensions;
-                return Object.values(responsiveDims).some((v) => {
-                    if (!v || typeof v !== 'object')
-                        return false;
+                return Object.values(responsiveDims).some((v)=>{
+                    if (!v || typeof v !== 'object') return false;
                     const dim = v;
                     return dim.minHeight?.enabled && dim.minHeight?.value > 0;
                 });
@@ -215,7 +264,9 @@ export const SectionConfig = {
             Object.assign(contentStyles, contentBorderStyles);
         }
         // Content padding with responsive support
-        const contentPaddingResult = responsiveValueToCSS(contentPadding, (v) => ({ padding: paddingValueToCSS(v) }), contentClass);
+        const contentPaddingResult = responsiveValueToCSS(contentPadding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), contentClass);
         Object.assign(contentStyles, contentPaddingResult.baseStyles);
         if (contentPaddingResult.mediaQueryCSS) {
             mediaQueries.push(contentPaddingResult.mediaQueryCSS);
@@ -227,13 +278,43 @@ export const SectionConfig = {
         // Combine all media queries
         const allMediaQueryCSS = mediaQueries.join('\n');
         // When minHeight is set, wrap Content to ensure slot expands
-        const renderContent = () => {
+        const renderContent = ()=>{
             if (hasMinHeight) {
-                return (_jsx("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }, children: _jsx(Content, { style: { flex: 1 } }) }));
+                return /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        minHeight: 0
+                    },
+                    children: /*#__PURE__*/ _jsx(Content, {
+                        style: {
+                            flex: 1
+                        }
+                    })
+                });
             }
-            return _jsx(Content, {});
+            return /*#__PURE__*/ _jsx(Content, {});
         };
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx(Wrapper, { id: id || undefined, className: sectionClasses, style: sectionStyles, children: hasContentStyles ? (_jsx("div", { className: contentClasses, style: contentStyles, children: renderContent() })) : (_jsx(Content, { className: contentClasses })) })] }));
-    },
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsx(Wrapper, {
+                    id: id || undefined,
+                    className: sectionClasses,
+                    style: sectionStyles,
+                    children: hasContentStyles ? /*#__PURE__*/ _jsx("div", {
+                        className: contentClasses,
+                        style: contentStyles,
+                        children: renderContent()
+                    }) : /*#__PURE__*/ _jsx(Content, {
+                        className: contentClasses
+                    })
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Section.js.map

package/dist/components/layout/Section.server.d.ts

@@ -16,7 +16,7 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
 export type SemanticElement = 'section' | 'article' | 'aside' | 'nav' | 'div' | 'header' | 'footer' | 'main';
 export interface SectionProps {
     id: string;
@@ -34,4 +34,3 @@ export interface SectionProps {
     visibility: VisibilityValue | null;
 }
 export declare const SectionConfig: ComponentConfig;
-//# sourceMappingURL=Section.server.d.ts.map