@delmaredigital/payload-puck 0.6.12 → 0.6.13

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

@@ -1,6 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, justifyContentMap, alignItemsMap, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
+/**
+ * Flex Component - Server-safe Puck Configuration
+ *
+ * Flexbox layout following official Puck demo patterns.
+ * 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 Flex.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, justifyContentMap, alignItemsMap } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Simple ID generator for server-side rendering
 let idCounter = 0;
 function generateUniqueId() {
@@ -11,12 +25,12 @@ const flexDirectionMap = {
     row: 'flex-row',
     column: 'flex-col',
     'row-reverse': 'flex-row-reverse',
-    'column-reverse': 'flex-col-reverse',
+    'column-reverse': 'flex-col-reverse'
 };
 const flexWrapMap = {
     wrap: 'flex-wrap',
     nowrap: 'flex-nowrap',
-    'wrap-reverse': 'flex-wrap-reverse',
+    'wrap-reverse': 'flex-wrap-reverse'
 };
 const defaultProps = {
     content: [],
@@ -32,15 +46,17 @@ const defaultProps = {
     dimensions: null,
     border: null,
     animation: null,
-    visibility: null,
+    visibility: null
 };
 export const FlexConfig = {
     label: 'Flex',
     fields: {
-        content: { type: 'slot' },
+        content: {
+            type: 'slot'
+        }
     },
     defaultProps,
-    render: ({ content: Content, semanticElement = 'div', direction, justifyContent, alignItems, gap, wrap, background, customPadding, margin, dimensions, border, animation, visibility, }) => {
+    render: ({ content: Content, semanticElement = 'div', direction, justifyContent, alignItems, gap, wrap, background, customPadding, margin, dimensions, border, animation, visibility })=>{
         // Dynamic element based on semanticElement prop
         const Wrapper = semanticElement;
         // Generate unique IDs for CSS targeting (server-safe)
@@ -53,10 +69,12 @@ export const FlexConfig = {
         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);
@@ -67,7 +85,9 @@ export const FlexConfig = {
             Object.assign(wrapperStyles, borderStyles);
         }
         // Apply 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);
@@ -85,7 +105,7 @@ export const FlexConfig = {
         // Dynamic styles that need inline (user-controlled values)
         const contentStyles = {
             gap,
-            ...dimensionsResult.baseStyles,
+            ...dimensionsResult.baseStyles
         };
         if (dimensionsResult.mediaQueryCSS) {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
@@ -94,7 +114,23 @@ export const FlexConfig = {
         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 }), _jsx(Wrapper, { className: wrapperClass, style: wrapperStyles, children: _jsx(ContentSlot, { className: contentClasses, style: contentStyles }) })] }));
-    },
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsx(Wrapper, {
+                    className: wrapperClass,
+                    style: wrapperStyles,
+                    children: /*#__PURE__*/ _jsx(ContentSlot, {
+                        className: contentClasses,
+                        style: contentStyles
+                    })
+                })
+            ]
+        });
+    }
 };
+
 //# sourceMappingURL=Flex.server.js.map

package/dist/components/layout/Flex.server.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.server.js","sourceRoot":"","sources":["../../../src/components/layout/Flex.server.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/layout/Flex.server.tsx"],"sourcesContent":["/**\n * Flex Component - Server-safe Puck Configuration\n *\n * Flexbox layout following official Puck demo patterns.\n * Uses Tailwind classes for layout, inline styles for dynamic user values.\n *\n * This is a server-safe version with NO fields property (only slot for content).\n * For the full editor version with fields, use Flex.tsx\n *\n * Responsive Controls:\n * - dimensions: Different dimensions at different breakpoints\n * - customPadding: Different padding at different breakpoints\n * - margin: Different margins at different breakpoints\n * - visibility: Show/hide at different breakpoints\n */\n\nimport type { ComponentConfig } from '@puckeditor/core'\nimport {\n  cn,\n  dimensionsValueToCSS,\n  marginValueToCSS,\n  paddingValueToCSS,\n  borderValueToCSS,\n  backgroundValueToCSS,\n  responsiveValueToCSS,\n  visibilityValueToCSS,\n  justifyContentMap,\n  alignItemsMap,\n  type PaddingValue,\n  type BorderValue,\n  type DimensionsValue,\n  type BackgroundValue,\n  type AnimationValue,\n  type ResponsiveValue,\n  type VisibilityValue,\n} from '../../fields/shared.js'\nimport { AnimatedWrapper } from '../AnimatedWrapper.js'\n\n// Simple ID generator for server-side rendering\nlet idCounter = 0\nfunction generateUniqueId(): string {\n  return `f${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`\n}\n\n// Inline type definitions to avoid importing from client-only FlexAlignmentField\nexport type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'\nexport type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch'\n\n// Tailwind class mappings for flex properties\nconst flexDirectionMap: Record<string, string> = {\n  row: 'flex-row',\n  column: 'flex-col',\n  'row-reverse': 'flex-row-reverse',\n  'column-reverse': 'flex-col-reverse',\n}\n\nconst flexWrapMap: Record<string, string> = {\n  wrap: 'flex-wrap',\n  nowrap: 'flex-nowrap',\n  'wrap-reverse': 'flex-wrap-reverse',\n}\n\nexport type FlexSemanticElement = 'div' | 'nav' | 'ul' | 'ol' | 'aside' | 'section'\n\nexport interface FlexProps {\n  content: unknown\n  semanticElement: FlexSemanticElement\n  direction: 'row' | 'column'\n  justifyContent: JustifyContent | null\n  alignItems: AlignItems | null\n  gap: number\n  wrap: 'wrap' | 'nowrap'\n  // Background\n  background: BackgroundValue | null\n  // Advanced custom options\n  customPadding: ResponsiveValue<PaddingValue> | PaddingValue | null\n  margin: ResponsiveValue<PaddingValue> | PaddingValue | null\n  dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null\n  border: BorderValue | null\n  animation: AnimationValue | null\n  // Responsive visibility\n  visibility: VisibilityValue | null\n}\n\nconst defaultProps: FlexProps = {\n  content: [],\n  semanticElement: 'div',\n  direction: 'row',\n  justifyContent: null,\n  alignItems: null,\n  gap: 24,\n  wrap: 'wrap',\n  background: null,\n  customPadding: null,\n  margin: null,\n  dimensions: null,\n  border: null,\n  animation: null,\n  visibility: null,\n}\n\nexport const FlexConfig: ComponentConfig = {\n  label: 'Flex',\n  fields: {\n    content: { type: 'slot' },\n  },\n  defaultProps,\n  render: ({\n    content: Content,\n    semanticElement = 'div',\n    direction,\n    justifyContent,\n    alignItems,\n    gap,\n    wrap,\n    background,\n    customPadding,\n    margin,\n    dimensions,\n    border,\n    animation,\n    visibility,\n  }) => {\n    // Dynamic element based on semanticElement prop\n    const Wrapper = semanticElement as React.ElementType\n\n    // Generate unique IDs for CSS targeting (server-safe)\n    const uniqueId = generateUniqueId()\n    const wrapperClass = `puck-flex-${uniqueId}`\n    const contentClass = `puck-flex-content-${uniqueId}`\n\n    // Collect all media query CSS\n    const mediaQueries: string[] = []\n\n    // Generate styles from BackgroundValue\n    const backgroundStyles = backgroundValueToCSS(background)\n\n    // Build wrapper styles\n    const wrapperStyles: React.CSSProperties = {\n      ...backgroundStyles,\n    }\n\n    // Add padding with responsive support\n    const paddingResult = responsiveValueToCSS(\n      customPadding,\n      (v) => ({ padding: paddingValueToCSS(v) }),\n      wrapperClass\n    )\n    Object.assign(wrapperStyles, paddingResult.baseStyles)\n    if (paddingResult.mediaQueryCSS) {\n      mediaQueries.push(paddingResult.mediaQueryCSS)\n    }\n\n    // Add border if set\n    const borderStyles = borderValueToCSS(border)\n    if (borderStyles) {\n      Object.assign(wrapperStyles, borderStyles)\n    }\n\n    // Apply margin with responsive support\n    const marginResult = responsiveValueToCSS(\n      margin,\n      (v) => ({ margin: marginValueToCSS(v) }),\n      wrapperClass\n    )\n    Object.assign(wrapperStyles, marginResult.baseStyles)\n    if (marginResult.mediaQueryCSS) {\n      mediaQueries.push(marginResult.mediaQueryCSS)\n    }\n\n    // Use dimensions with responsive support\n    const dimensionsResult = responsiveValueToCSS(\n      dimensions,\n      dimensionsValueToCSS,\n      contentClass\n    )\n\n    // Visibility media queries\n    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass)\n    if (visibilityCSS) {\n      mediaQueries.push(visibilityCSS)\n    }\n\n    // Build Tailwind classes for flex layout\n    // [&>*]:min-w-0 prevents flex children from overflowing (CSS best practice)\n    const contentClasses = cn(\n      'flex w-full min-h-[50px]',\n      flexDirectionMap[direction],\n      justifyContent && justifyContentMap[justifyContent],\n      alignItems && alignItemsMap[alignItems],\n      flexWrapMap[wrap],\n      '[&>*]:min-w-0',\n      contentClass,\n    )\n\n    // Dynamic styles that need inline (user-controlled values)\n    const contentStyles: React.CSSProperties = {\n      gap,\n      ...dimensionsResult.baseStyles,\n    }\n    if (dimensionsResult.mediaQueryCSS) {\n      mediaQueries.push(dimensionsResult.mediaQueryCSS)\n    }\n\n    // Combine all media queries\n    const allMediaQueryCSS = mediaQueries.join('\\n')\n\n    // Type assertion for Puck slot content - cast to any to avoid complex React type issues\n    const ContentSlot = Content as any\n\n    return (\n      <AnimatedWrapper animation={animation}>\n        {allMediaQueryCSS && <style>{allMediaQueryCSS}</style>}\n        <Wrapper className={wrapperClass} style={wrapperStyles}>\n          <ContentSlot className={contentClasses} style={contentStyles} />\n        </Wrapper>\n      </AnimatedWrapper>\n    )\n  },\n}\n"],"names":["cn","dimensionsValueToCSS","marginValueToCSS","paddingValueToCSS","borderValueToCSS","backgroundValueToCSS","responsiveValueToCSS","visibilityValueToCSS","justifyContentMap","alignItemsMap","AnimatedWrapper","idCounter","generateUniqueId","toString","Math","random","slice","flexDirectionMap","row","column","flexWrapMap","wrap","nowrap","defaultProps","content","semanticElement","direction","justifyContent","alignItems","gap","background","customPadding","margin","dimensions","border","animation","visibility","FlexConfig","label","fields","type","render","Content","Wrapper","uniqueId","wrapperClass","contentClass","mediaQueries","backgroundStyles","wrapperStyles","paddingResult","v","padding","Object","assign","baseStyles","mediaQueryCSS","push","borderStyles","marginResult","dimensionsResult","visibilityCSS","contentClasses","contentStyles","allMediaQueryCSS","join","ContentSlot","style","className"],"mappings":"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"}

package/dist/components/layout/Grid.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 GridSemanticElement = 'div' | 'ul' | 'ol';
 export interface GridProps {
     content: unknown;

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Grid.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAUL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AA4B5B,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAA;AAErD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,mBAAmB,CAAA;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IAEX,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAElC,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAEhC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAgBD,eAAO,MAAM,UAAU,EAAE,eA6KxB,CAAA"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Grid.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAUL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,wBAAwB,CAAA;AA4B/B,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAA;AAErD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,mBAAmB,CAAA;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IAEX,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAElC,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAEhC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAgBD,eAAO,MAAM,UAAU,EAAE,eA6KxB,CAAA"}

package/dist/components/layout/Grid.js

@@ -13,19 +13,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Responsive Controls:
  * - 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';
-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 values for responsive fields
 const DEFAULT_PADDING = {
     top: 0,
@@ -33,12 +32,16 @@ const DEFAULT_PADDING = {
     bottom: 0,
     left: 0,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 const DEFAULT_DIMENSIONS = {
     mode: 'full',
     alignment: 'center',
-    maxWidth: { value: 100, unit: '%', enabled: true },
+    maxWidth: {
+        value: 100,
+        unit: '%',
+        enabled: true
+    }
 };
 const defaultProps = {
     content: [],
@@ -51,64 +54,85 @@ const defaultProps = {
     border: null,
     margin: null,
     animation: null,
-    visibility: null,
+    visibility: null
 };
 export const GridConfig = {
     label: 'Grid',
     fields: {
-        _reset: createResetField({ defaultProps }),
+        _reset: createResetField({
+            defaultProps
+        }),
         content: {
             type: 'slot',
-            disallow: ['Section'],
+            disallow: [
+                'Section'
+            ]
         },
         // Responsive visibility control
-        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
         // Semantic element selection
         semanticElement: {
             type: 'select',
             label: 'HTML Element',
             options: [
-                { label: 'Div', value: 'div' },
-                { label: 'Unordered List', value: 'ul' },
-                { label: 'Ordered List', value: 'ol' },
-            ],
+                {
+                    label: 'Div',
+                    value: 'div'
+                },
+                {
+                    label: 'Unordered List',
+                    value: 'ul'
+                },
+                {
+                    label: 'Ordered List',
+                    value: 'ol'
+                }
+            ]
         },
         numColumns: {
             type: 'number',
             label: 'Number of Columns',
             min: 1,
-            max: 12,
+            max: 12
         },
         gap: {
             type: 'number',
             label: 'Gap (px)',
-            min: 0,
+            min: 0
         },
         // Background
-        background: createBackgroundField({ label: 'Background' }),
+        background: createBackgroundField({
+            label: 'Background'
+        }),
         // Advanced custom options
-        border: createBorderField({ label: 'Border' }),
+        border: createBorderField({
+            label: 'Border'
+        }),
         // Responsive dimensions
         dimensions: createResponsiveField({
             label: 'Dimensions (Responsive)',
-            innerField: (config) => createDimensionsField(config),
-            defaultValue: DEFAULT_DIMENSIONS,
+            innerField: (config)=>createDimensionsField(config),
+            defaultValue: DEFAULT_DIMENSIONS
+        }),
+        animation: createAnimationField({
+            label: 'Animation'
         }),
-        animation: createAnimationField({ label: 'Animation' }),
         // Spacing (grouped at bottom) - Responsive
         margin: createResponsiveField({
             label: 'Margin (Responsive)',
-            innerField: (config) => createMarginField(config),
-            defaultValue: DEFAULT_PADDING,
+            innerField: (config)=>createMarginField(config),
+            defaultValue: DEFAULT_PADDING
         }),
         customPadding: createResponsiveField({
             label: 'Padding (Responsive)',
-            innerField: (config) => createPaddingField(config),
-            defaultValue: DEFAULT_PADDING,
-        }),
+            innerField: (config)=>createPaddingField(config),
+            defaultValue: DEFAULT_PADDING
+        })
     },
     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
@@ -122,10 +146,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);
@@ -136,7 +162,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);
@@ -153,7 +181,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);
@@ -161,17 +189,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');
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsxs(Wrapper, { className: wrapperClass, style: wrapperStyles, children: [_jsx(Content, { 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(Content, {
+                            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.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/layout/Grid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["/**\n * Grid Component - Puck Configuration\n *\n * CSS Grid layout following official Puck demo patterns.\n * Responsive: stacks on mobile (flex column), grid on desktop (md+).\n * Uses Tailwind classes for layout, inline styles for dynamic user values.\n *\n * Supports both preset options and advanced custom styling:\n * - Background: unified BackgroundField (solid, gradient, or image)\n * - Advanced: customPadding, customWidth, border\n *\n * Responsive Controls:\n * - gap: Different gap at different breakpoints\n * - visibility: Show/hide at different breakpoints\n */\n\nimport { useId } from 'react'\nimport type { ComponentConfig } from '@puckeditor/core'\nimport {\n  cn,\n  dimensionsValueToCSS,\n  marginValueToCSS,\n  paddingValueToCSS,\n  borderValueToCSS,\n  backgroundValueToCSS,\n  responsiveValueToCSS,\n  visibilityValueToCSS,\n  isResponsiveValue,\n  type PaddingValue,\n  type BorderValue,\n  type DimensionsValue,\n  type BackgroundValue,\n  type AnimationValue,\n  type ResponsiveValue,\n  type VisibilityValue,\n} from '../../fields/shared.js'\nimport { AnimatedWrapper } from '../AnimatedWrapper.js'\nimport { createPaddingField } from '../../fields/PaddingField.js'\nimport { createBorderField } from '../../fields/BorderField.js'\nimport { createDimensionsField } from '../../fields/DimensionsField.js'\nimport { createMarginField } from '../../fields/MarginField.js'\nimport { createResetField } from '../../fields/ResetField.js'\nimport { createBackgroundField } from '../../fields/BackgroundField.js'\nimport { createAnimationField } from '../../fields/AnimationField.js'\nimport { createResponsiveField } from '../../fields/ResponsiveField.js'\nimport { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js'\n\n// Default values for responsive fields\nconst DEFAULT_PADDING: PaddingValue = {\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  unit: 'px',\n  linked: true,\n}\n\nconst DEFAULT_DIMENSIONS: DimensionsValue = {\n  mode: 'full',\n  alignment: 'center',\n  maxWidth: { value: 100, unit: '%', enabled: true },\n}\n\nexport type GridSemanticElement = 'div' | 'ul' | 'ol'\n\nexport interface GridProps {\n  content: unknown\n  semanticElement: GridSemanticElement\n  numColumns: number\n  gap: number\n  // Background\n  background: BackgroundValue | null\n  // Advanced custom options\n  customPadding: ResponsiveValue<PaddingValue> | PaddingValue | null\n  dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null\n  border: BorderValue | null\n  margin: ResponsiveValue<PaddingValue> | PaddingValue | null\n  animation: AnimationValue | null\n  // Responsive visibility\n  visibility: VisibilityValue | null\n}\n\nconst defaultProps: GridProps = {\n  content: [],\n  semanticElement: 'div',\n  numColumns: 3,\n  gap: 24,\n  background: null,\n  customPadding: null,\n  dimensions: null,\n  border: null,\n  margin: null,\n  animation: null,\n  visibility: null,\n}\n\nexport const GridConfig: ComponentConfig = {\n  label: 'Grid',\n  fields: {\n    _reset: createResetField({ defaultProps }),\n    content: {\n      type: 'slot',\n      disallow: ['Section'],\n    },\n    // Responsive visibility control\n    visibility: createResponsiveVisibilityField({ label: 'Visibility' }),\n    // Semantic element selection\n    semanticElement: {\n      type: 'select',\n      label: 'HTML Element',\n      options: [\n        { label: 'Div', value: 'div' },\n        { label: 'Unordered List', value: 'ul' },\n        { label: 'Ordered List', value: 'ol' },\n      ],\n    },\n    numColumns: {\n      type: 'number',\n      label: 'Number of Columns',\n      min: 1,\n      max: 12,\n    },\n    gap: {\n      type: 'number',\n      label: 'Gap (px)',\n      min: 0,\n    },\n    // Background\n    background: createBackgroundField({ label: 'Background' }),\n    // Advanced custom options\n    border: createBorderField({ label: 'Border' }),\n    // Responsive dimensions\n    dimensions: createResponsiveField({\n      label: 'Dimensions (Responsive)',\n      innerField: (config) => createDimensionsField(config),\n      defaultValue: DEFAULT_DIMENSIONS,\n    }),\n    animation: createAnimationField({ label: 'Animation' }),\n    // Spacing (grouped at bottom) - Responsive\n    margin: createResponsiveField({\n      label: 'Margin (Responsive)',\n      innerField: (config) => createMarginField(config),\n      defaultValue: DEFAULT_PADDING,\n    }),\n    customPadding: createResponsiveField({\n      label: 'Padding (Responsive)',\n      innerField: (config) => createPaddingField(config),\n      defaultValue: DEFAULT_PADDING,\n    }),\n  },\n  defaultProps,\n  render: ({\n    content: Content,\n    semanticElement = 'div',\n    numColumns,\n    gap,\n    background,\n    customPadding,\n    dimensions,\n    border,\n    margin,\n    animation,\n    visibility,\n  }) => {\n    // Dynamic element based on semanticElement prop\n    const Wrapper = semanticElement as React.ElementType\n\n    // Generate unique IDs for CSS targeting\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const uniqueId = useId().replace(/:/g, '')\n    const wrapperClass = `puck-grid-${uniqueId}`\n    const contentClass = `puck-grid-content-${uniqueId}`\n\n    // Collect all media query CSS\n    const mediaQueries: string[] = []\n\n    // Generate styles from BackgroundValue\n    const backgroundStyles = backgroundValueToCSS(background)\n\n    // Build wrapper styles\n    const wrapperStyles: React.CSSProperties = {\n      ...backgroundStyles,\n    }\n\n    // Add padding with responsive support\n    const paddingResult = responsiveValueToCSS(\n      customPadding,\n      (v) => ({ padding: paddingValueToCSS(v) }),\n      wrapperClass\n    )\n    Object.assign(wrapperStyles, paddingResult.baseStyles)\n    if (paddingResult.mediaQueryCSS) {\n      mediaQueries.push(paddingResult.mediaQueryCSS)\n    }\n\n    // Add border if set\n    const borderStyles = borderValueToCSS(border)\n    if (borderStyles) {\n      Object.assign(wrapperStyles, borderStyles)\n    }\n\n    // Add margin with responsive support\n    const marginResult = responsiveValueToCSS(\n      margin,\n      (v) => ({ margin: marginValueToCSS(v) }),\n      wrapperClass\n    )\n    Object.assign(wrapperStyles, marginResult.baseStyles)\n    if (marginResult.mediaQueryCSS) {\n      mediaQueries.push(marginResult.mediaQueryCSS)\n    }\n\n    // Use dimensions with responsive support\n    const dimensionsResult = responsiveValueToCSS(\n      dimensions,\n      dimensionsValueToCSS,\n      contentClass\n    )\n\n    // Visibility media queries\n    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass)\n    if (visibilityCSS) {\n      mediaQueries.push(visibilityCSS)\n    }\n\n    // Tailwind classes for responsive grid: flex column on mobile, grid on md+\n    const contentClasses = cn(\n      'flex flex-col w-full',\n      'md:grid',\n      contentClass,\n    )\n\n    // Dynamic styles that need inline (user-controlled values: gap, columns)\n    const contentStyles: React.CSSProperties = {\n      gap,\n      ...dimensionsResult.baseStyles,\n    }\n    if (dimensionsResult.mediaQueryCSS) {\n      mediaQueries.push(dimensionsResult.mediaQueryCSS)\n    }\n\n    // Grid template columns must be inline since numColumns is dynamic\n    const gridStyles: React.CSSProperties = {\n      ...contentStyles,\n      '--grid-cols': numColumns,\n    } as React.CSSProperties\n\n    // Combine all media queries\n    const allMediaQueryCSS = mediaQueries.join('\\n')\n\n    return (\n      <AnimatedWrapper animation={animation}>\n        {allMediaQueryCSS && <style>{allMediaQueryCSS}</style>}\n        <Wrapper className={wrapperClass} style={wrapperStyles}>\n          <Content\n            className={contentClasses}\n            style={gridStyles}\n          />\n          <style>{`\n            @media (min-width: 768px) {\n              .flex.md\\\\:grid {\n                grid-template-columns: repeat(var(--grid-cols), 1fr);\n              }\n            }\n          `}</style>\n        </Wrapper>\n      </AnimatedWrapper>\n    )\n  },\n}\n"],"names":["useId","cn","dimensionsValueToCSS","marginValueToCSS","paddingValueToCSS","borderValueToCSS","backgroundValueToCSS","responsiveValueToCSS","visibilityValueToCSS","AnimatedWrapper","createPaddingField","createBorderField","createDimensionsField","createMarginField","createResetField","createBackgroundField","createAnimationField","createResponsiveField","createResponsiveVisibilityField","DEFAULT_PADDING","top","right","bottom","left","unit","linked","DEFAULT_DIMENSIONS","mode","alignment","maxWidth","value","enabled","defaultProps","content","semanticElement","numColumns","gap","background","customPadding","dimensions","border","margin","animation","visibility","GridConfig","label","fields","_reset","type","disallow","options","min","max","innerField","config","defaultValue","render","Content","Wrapper","uniqueId","replace","wrapperClass","contentClass","mediaQueries","backgroundStyles","wrapperStyles","paddingResult","v","padding","Object","assign","baseStyles","mediaQueryCSS","push","borderStyles","marginResult","dimensionsResult","visibilityCSS","contentClasses","contentStyles","gridStyles","allMediaQueryCSS","join","style","className"],"mappings":"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"}

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;

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.server.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Grid.server.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EASL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAS5B,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAA;AAErD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,mBAAmB,CAAA;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IAEX,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAElC,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAEhC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAgBD,eAAO,MAAM,UAAU,EAAE,eA2HxB,CAAA"}
+{"version":3,"file":"Grid.server.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Grid.server.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EASL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,wBAAwB,CAAA;AAS/B,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAA;AAErD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,mBAAmB,CAAA;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IAEX,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAElC,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAEhC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAgBD,eAAO,MAAM,UAAU,EAAE,eA2HxB,CAAA"}

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,40 @@ 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