@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/components/interactive/Divider.server.js

@@ -1,6 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { dividerStyleMap, cn, marginValueToCSS, paddingValueToCSS, colorValueToCSS, dimensionsValueToCSS, transformValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
+/**
+ * Divider Component - Server-safe Puck Configuration
+ *
+ * Horizontal line separator with customizable style.
+ * This version contains only the render function and types - no fields.
+ * Safe for use in server components.
+ */ import { jsx as _jsx } from "react/jsx-runtime";
+import { dividerStyleMap, cn, marginValueToCSS, paddingValueToCSS, colorValueToCSS, dimensionsValueToCSS, transformValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Default padding with standard horizontal spacing (replaces hardcoded px-4)
 const DEFAULT_PADDING = {
     top: 0,
@@ -8,7 +14,7 @@ const DEFAULT_PADDING = {
     bottom: 0,
     left: 16,
     unit: 'px',
-    linked: false,
+    linked: false
 };
 const defaultProps = {
     style: 'solid',
@@ -17,15 +23,15 @@ const defaultProps = {
     dimensions: null,
     transform: null,
     animation: null,
-    customPadding: DEFAULT_PADDING, // Default 16px horizontal padding
+    customPadding: DEFAULT_PADDING
 };
 export const DividerConfig = {
     label: 'Divider',
     defaultProps,
-    render: ({ style, color, dimensions, margin, transform, animation, customPadding }) => {
+    render: ({ style, color, dimensions, margin, transform, animation, customPadding })=>{
         const dimensionsStyles = dimensionsValueToCSS(dimensions);
         const wrapperStyle = {
-            ...dimensionsStyles,
+            ...dimensionsStyles
         };
         const marginCSS = marginValueToCSS(margin);
         if (marginCSS) {
@@ -41,10 +47,18 @@ export const DividerConfig = {
         }
         // Only set color if explicitly provided, otherwise use CSS variable
         const customColor = colorValueToCSS(color);
-        const hrStyle = customColor
-            ? { borderColor: customColor }
-            : undefined;
-        return (_jsx(AnimatedWrapper, { animation: animation, children: _jsx("div", { style: Object.keys(wrapperStyle).length > 0 ? wrapperStyle : undefined, children: _jsx("hr", { className: cn('border-t border-border', dividerStyleMap[style] || dividerStyleMap.solid), style: hrStyle }) }) }));
-    },
+        const hrStyle = customColor ? {
+            borderColor: customColor
+        } : undefined;
+        return /*#__PURE__*/ _jsx(AnimatedWrapper, {
+            animation: animation,
+            children: /*#__PURE__*/ _jsx("div", {
+                style: Object.keys(wrapperStyle).length > 0 ? wrapperStyle : undefined,
+                children: /*#__PURE__*/ _jsx("hr", {
+                    className: cn('border-t border-border', dividerStyleMap[style] || dividerStyleMap.solid),
+                    style: hrStyle
+                })
+            })
+        });
+    }
 };
-//# sourceMappingURL=Divider.server.js.map

package/dist/components/interactive/index.d.ts

@@ -3,8 +3,7 @@
  *
  * Buttons, cards, and other interactive elements.
  */
-export { ButtonConfig } from './Button';
-export { CardConfig } from './Card';
-export { DividerConfig } from './Divider';
-export { AccordionConfig } from './Accordion';
-//# sourceMappingURL=index.d.ts.map
+export { ButtonConfig } from './Button.js';
+export { CardConfig } from './Card.js';
+export { DividerConfig } from './Divider.js';
+export { AccordionConfig } from './Accordion.js';

package/dist/components/interactive/index.js

@@ -2,9 +2,7 @@
  * Interactive Components
  *
  * Buttons, cards, and other interactive elements.
- */
-export { ButtonConfig } from './Button';
-export { CardConfig } from './Card';
-export { DividerConfig } from './Divider';
-export { AccordionConfig } from './Accordion';
-//# sourceMappingURL=index.js.map
+ */ export { ButtonConfig } from './Button.js';
+export { CardConfig } from './Card.js';
+export { DividerConfig } from './Divider.js';
+export { AccordionConfig } from './Accordion.js';

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

@@ -14,7 +14,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 ContainerSemanticElement = 'div' | 'article' | 'aside' | 'section';
 export interface ContainerProps {
     content: unknown;
@@ -28,4 +28,3 @@ export interface ContainerProps {
     animation: AnimationValue | null;
 }
 export declare const ContainerConfig: ComponentConfig;
-//# sourceMappingURL=Container.d.ts.map

package/dist/components/layout/Container.js

@@ -13,19 +13,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - padding: Different padding at different breakpoints
  * - margin: Different margins at different breakpoints
  * - visibility: Show/hide at different breakpoints
- */
-import { useId } from 'react';
-import { dimensionsValueToCSS, borderValueToCSS, paddingValueToCSS, marginValueToCSS, 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 { dimensionsValueToCSS, borderValueToCSS, paddingValueToCSS, marginValueToCSS, 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)
 const DEFAULT_PADDING = {
     top: 0,
@@ -33,13 +32,17 @@ const DEFAULT_PADDING = {
     bottom: 0,
     left: 0,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 // Default dimensions (full width)
 const DEFAULT_DIMENSIONS = {
     mode: 'full',
     alignment: 'center',
-    maxWidth: { value: 100, unit: '%', enabled: true },
+    maxWidth: {
+        value: 100,
+        unit: '%',
+        enabled: true
+    }
 };
 const defaultProps = {
     content: [],
@@ -50,53 +53,75 @@ const defaultProps = {
     border: null,
     padding: null,
     margin: null,
-    animation: null,
+    animation: null
 };
 export const ContainerConfig = {
     label: 'Container',
     fields: {
-        _reset: createResetField({ defaultProps }),
+        _reset: createResetField({
+            defaultProps
+        }),
         content: {
-            type: 'slot',
+            type: 'slot'
         },
         // Visibility first
-        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
         // Semantic element selection
         semanticElement: {
             type: 'select',
             label: 'HTML Element',
             options: [
-                { label: 'Div', value: 'div' },
-                { label: 'Article', value: 'article' },
-                { label: 'Aside', value: 'aside' },
-                { label: 'Section', value: 'section' },
-            ],
+                {
+                    label: 'Div',
+                    value: 'div'
+                },
+                {
+                    label: 'Article',
+                    value: 'article'
+                },
+                {
+                    label: 'Aside',
+                    value: 'aside'
+                },
+                {
+                    label: 'Section',
+                    value: 'section'
+                }
+            ]
         },
         // Dimensions
         dimensions: createResponsiveField({
             label: 'Dimensions',
-            innerField: (config) => createDimensionsField(config),
-            defaultValue: DEFAULT_DIMENSIONS,
+            innerField: (config)=>createDimensionsField(config),
+            defaultValue: DEFAULT_DIMENSIONS
         }),
         // Styling
-        background: createBackgroundField({ label: 'Background' }),
-        border: createBorderField({ label: 'Border' }),
+        background: createBackgroundField({
+            label: 'Background'
+        }),
+        border: createBorderField({
+            label: 'Border'
+        }),
         // Spacing
         padding: createResponsiveField({
             label: 'Padding',
-            innerField: (config) => createPaddingField(config),
-            defaultValue: DEFAULT_PADDING,
+            innerField: (config)=>createPaddingField(config),
+            defaultValue: DEFAULT_PADDING
         }),
         margin: createResponsiveField({
             label: 'Margin',
-            innerField: (config) => createMarginField(config),
-            defaultValue: DEFAULT_PADDING,
+            innerField: (config)=>createMarginField(config),
+            defaultValue: DEFAULT_PADDING
         }),
         // Animation
-        animation: createAnimationField({ label: 'Animation' }),
+        animation: createAnimationField({
+            label: 'Animation'
+        })
     },
     defaultProps,
-    render: ({ content: Content, semanticElement = 'div', visibility, dimensions, background, border, padding, margin, animation, }) => {
+    render: ({ content: Content, semanticElement = 'div', visibility, dimensions, background, border, padding, margin, animation })=>{
         // Dynamic element based on semanticElement prop
         const Wrapper = semanticElement;
         // Generate unique ID for CSS targeting
@@ -124,15 +149,13 @@ export const ContainerConfig = {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
         }
         // Check if minHeight is set - if so, we need flex layout to make slot expand
-        const hasMinHeight = (() => {
-            if (!dimensions)
-                return false;
+        const hasMinHeight = (()=>{
+            if (!dimensions) return false;
             // Check if it's a responsive value
             if (typeof dimensions === 'object' && 'xs' in dimensions) {
                 const responsiveDims = dimensions;
-                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;
                 });
@@ -147,13 +170,17 @@ export const ContainerConfig = {
             containerStyles.flexDirection = 'column';
         }
         // Padding with responsive support
-        const paddingResult = responsiveValueToCSS(padding, (v) => ({ padding: paddingValueToCSS(v) }), containerClass);
+        const paddingResult = responsiveValueToCSS(padding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), containerClass);
         Object.assign(containerStyles, paddingResult.baseStyles);
         if (paddingResult.mediaQueryCSS) {
             mediaQueries.push(paddingResult.mediaQueryCSS);
         }
         // Margin with responsive support
-        const marginResult = responsiveValueToCSS(margin, (v) => ({ margin: marginValueToCSS(v) }), containerClass);
+        const marginResult = responsiveValueToCSS(margin, (v)=>({
+                margin: marginValueToCSS(v)
+            }), containerClass);
         Object.assign(containerStyles, marginResult.baseStyles);
         if (marginResult.mediaQueryCSS) {
             mediaQueries.push(marginResult.mediaQueryCSS);
@@ -168,13 +195,38 @@ export const ContainerConfig = {
         // Check if we have any styling
         const hasStyles = Object.keys(containerStyles).length > 0;
         // 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 }), hasStyles ? (_jsx(Wrapper, { className: containerClass, style: containerStyles, children: renderContent() })) : (_jsx(Content, { className: containerClass }))] }));
-    },
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                hasStyles ? /*#__PURE__*/ _jsx(Wrapper, {
+                    className: containerClass,
+                    style: containerStyles,
+                    children: renderContent()
+                }) : /*#__PURE__*/ _jsx(Content, {
+                    className: containerClass
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Container.js.map

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

@@ -17,7 +17,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 ContainerSemanticElement = 'div' | 'article' | 'aside' | 'section';
 export interface ContainerProps {
     content: unknown;
@@ -31,4 +31,3 @@ export interface ContainerProps {
     animation: AnimationValue | null;
 }
 export declare const ContainerConfig: ComponentConfig;
-//# sourceMappingURL=Container.server.d.ts.map

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

@@ -1,6 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { dimensionsValueToCSS, borderValueToCSS, paddingValueToCSS, marginValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
+/**
+ * Container Component - Server-safe Puck Configuration
+ *
+ * Simple organizational wrapper for grouping content.
+ * Uses Puck's slot system for nesting other components.
+ *
+ * This is a server-safe version with minimal fields (only slot for content).
+ * For the full editor version with fields, use Container.tsx
+ *
+ * For two-layer layouts (full-bleed background with constrained content),
+ * use the Section component instead.
+ *
+ * Responsive Controls:
+ * - dimensions: Different max-width/min-height at different breakpoints
+ * - padding: 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 { dimensionsValueToCSS, borderValueToCSS, paddingValueToCSS, marginValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Simple ID generator for server-side rendering
 let idCounter = 0;
 function generateUniqueId() {
@@ -15,15 +32,17 @@ const defaultProps = {
     border: null,
     padding: null,
     margin: null,
-    animation: null,
+    animation: null
 };
 export const ContainerConfig = {
     label: 'Container',
     fields: {
-        content: { type: 'slot' },
+        content: {
+            type: 'slot'
+        }
     },
     defaultProps,
-    render: ({ content: Content, semanticElement = 'div', visibility, dimensions, background, border, padding, margin, animation, }) => {
+    render: ({ content: Content, semanticElement = 'div', visibility, dimensions, background, border, padding, margin, animation })=>{
         // Dynamic element based on semanticElement prop
         const Wrapper = semanticElement;
         // Generate unique ID for CSS targeting (server-safe)
@@ -50,15 +69,13 @@ export const ContainerConfig = {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
         }
         // Check if minHeight is set - if so, we need flex layout to make slot expand
-        const hasMinHeight = (() => {
-            if (!dimensions)
-                return false;
+        const hasMinHeight = (()=>{
+            if (!dimensions) return false;
             // Check if it's a responsive value
             if (typeof dimensions === 'object' && 'xs' in dimensions) {
                 const responsiveDims = dimensions;
-                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;
                 });
@@ -73,13 +90,17 @@ export const ContainerConfig = {
             containerStyles.flexDirection = 'column';
         }
         // Padding with responsive support
-        const paddingResult = responsiveValueToCSS(padding, (v) => ({ padding: paddingValueToCSS(v) }), containerClass);
+        const paddingResult = responsiveValueToCSS(padding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), containerClass);
         Object.assign(containerStyles, paddingResult.baseStyles);
         if (paddingResult.mediaQueryCSS) {
             mediaQueries.push(paddingResult.mediaQueryCSS);
         }
         // Margin with responsive support
-        const marginResult = responsiveValueToCSS(margin, (v) => ({ margin: marginValueToCSS(v) }), containerClass);
+        const marginResult = responsiveValueToCSS(margin, (v)=>({
+                margin: marginValueToCSS(v)
+            }), containerClass);
         Object.assign(containerStyles, marginResult.baseStyles);
         if (marginResult.mediaQueryCSS) {
             mediaQueries.push(marginResult.mediaQueryCSS);
@@ -96,13 +117,38 @@ export const ContainerConfig = {
         // Type assertion for Puck slot content
         const ContentSlot = Content;
         // 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(ContentSlot, { style: { flex: 1 } }) }));
+                return /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        minHeight: 0
+                    },
+                    children: /*#__PURE__*/ _jsx(ContentSlot, {
+                        style: {
+                            flex: 1
+                        }
+                    })
+                });
             }
-            return _jsx(ContentSlot, {});
+            return /*#__PURE__*/ _jsx(ContentSlot, {});
         };
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), hasStyles ? (_jsx(Wrapper, { className: containerClass, style: containerStyles, children: renderContent() })) : (_jsx(ContentSlot, { className: containerClass }))] }));
-    },
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                hasStyles ? /*#__PURE__*/ _jsx(Wrapper, {
+                    className: containerClass,
+                    style: containerStyles,
+                    children: renderContent()
+                }) : /*#__PURE__*/ _jsx(ContentSlot, {
+                    className: containerClass
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Container.server.js.map

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

@@ -15,8 +15,8 @@
  * - 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 JustifyContent, type AlignItems } from '../../fields/FlexAlignmentField';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
+import { type JustifyContent, type AlignItems } from '../../fields/FlexAlignmentField.js';
 export type FlexSemanticElement = 'div' | 'nav' | 'ul' | 'ol' | 'aside' | 'section';
 export interface FlexProps {
     content: unknown;
@@ -35,4 +35,3 @@ export interface FlexProps {
     visibility: VisibilityValue | null;
 }
 export declare const FlexConfig: ComponentConfig;
-//# sourceMappingURL=Flex.d.ts.map