@delmaredigital/payload-puck 0.6.12 → 0.6.14

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

@@ -1,17 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn, marginValueToCSS, paddingValueToCSS, colorValueToCSS, borderValueToCSS, transformValueToCSS, sizeValueToCSS, getSizeClasses, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { DEFAULT_BUTTON_VARIANTS, DEFAULT_FOCUS_RING } from '../../theme/defaults';
-import { getVariantClasses } from '../../theme/utils';
+/**
+ * Button Component - Server-safe Puck Configuration
+ *
+ * CTA button with customizable styling and link support.
+ * 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 { cn, marginValueToCSS, paddingValueToCSS, colorValueToCSS, borderValueToCSS, transformValueToCSS, sizeValueToCSS, getSizeClasses } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
+import { DEFAULT_BUTTON_VARIANTS, DEFAULT_FOCUS_RING } from '../../theme/defaults.js';
+import { getVariantClasses } from '../../theme/utils.js';
 const sizeStyles = {
     sm: 'h-8 px-3 text-sm',
     default: 'h-10 px-4',
-    lg: 'h-12 px-8 text-lg',
+    lg: 'h-12 px-8 text-lg'
 };
 const alignmentWrapperMap = {
     left: 'text-left',
     center: 'text-center',
-    right: 'text-right',
+    right: 'text-right'
 };
 const defaultProps = {
     text: 'Click Me',
@@ -26,12 +32,12 @@ const defaultProps = {
     alignment: null,
     transform: null,
     animation: null,
-    customPadding: null,
+    customPadding: null
 };
 export const ButtonConfig = {
     label: 'Button',
     defaultProps,
-    render: ({ text, link, variant, size, openInNewTab, alignment, margin, customBackgroundColor, customTextColor, customBorder, transform, animation, customPadding }) => {
+    render: ({ text, link, variant, size, openInNewTab, alignment, margin, customBackgroundColor, customTextColor, customBorder, transform, animation, customPadding })=>{
         // Determine if custom styles should override preset variant/size styles
         const hasCustomBackground = customBackgroundColor?.hex;
         const hasCustomTextColor = customTextColor?.hex;
@@ -42,14 +48,10 @@ export const ButtonConfig = {
         // Get size classes for preset modes, or empty for custom mode
         const sizeClasses = getSizeClasses(size, sizeStyles);
         // Build button classes - exclude variant/size classes if custom styles are set
-        const buttonClasses = cn('inline-flex items-center justify-center font-medium transition-colors', `focus:outline-none focus:ring-2 focus:ring-offset-2 ${DEFAULT_FOCUS_RING}`, 'disabled:opacity-50 disabled:pointer-events-none', 
-        // Only apply variant styles if no custom background/text color
-        !hasCustomBackground && !hasCustomTextColor && variantClasses, 
-        // Only apply background portion of variant if no custom background
-        hasCustomBackground && !hasCustomTextColor && 'hover:opacity-90', 
-        // Only apply size classes if not using custom size or custom padding
-        !hasCustomPadding && !hasCustomSize && sizeClasses, 
-        // Apply rounded-md unless custom border has radius
+        const buttonClasses = cn('inline-flex items-center justify-center font-medium transition-colors', `focus:outline-none focus:ring-2 focus:ring-offset-2 ${DEFAULT_FOCUS_RING}`, 'disabled:opacity-50 disabled:pointer-events-none', // Only apply variant styles if no custom background/text color
+        !hasCustomBackground && !hasCustomTextColor && variantClasses, // Only apply background portion of variant if no custom background
+        hasCustomBackground && !hasCustomTextColor && 'hover:opacity-90', // Only apply size classes if not using custom size or custom padding
+        !hasCustomPadding && !hasCustomSize && sizeClasses, // Apply rounded-md unless custom border has radius
         !customBorder?.radius && 'rounded-md');
         // Build inline styles for the button
         const buttonStyle = {};
@@ -81,7 +83,19 @@ export const ButtonConfig = {
         if (transformStyles) {
             Object.assign(buttonStyle, transformStyles);
         }
-        const buttonElement = link ? (_jsx("a", { href: link, target: openInNewTab === 'yes' ? '_blank' : undefined, rel: openInNewTab === 'yes' ? 'noopener noreferrer' : undefined, className: buttonClasses, style: buttonStyle, children: text })) : (_jsx("button", { type: "button", className: buttonClasses, style: buttonStyle, children: text }));
+        const buttonElement = link ? /*#__PURE__*/ _jsx("a", {
+            href: link,
+            target: openInNewTab === 'yes' ? '_blank' : undefined,
+            rel: openInNewTab === 'yes' ? 'noopener noreferrer' : undefined,
+            className: buttonClasses,
+            style: buttonStyle,
+            children: text
+        }) : /*#__PURE__*/ _jsx("button", {
+            type: "button",
+            className: buttonClasses,
+            style: buttonStyle,
+            children: text
+        });
         const wrapperStyle = {};
         const marginCSS = marginValueToCSS(margin);
         if (marginCSS) {
@@ -89,7 +103,11 @@ export const ButtonConfig = {
         }
         // Get alignment value, defaulting to 'left'
         const alignmentValue = alignment ?? 'left';
-        return (_jsx(AnimatedWrapper, { animation: animation, className: alignmentWrapperMap[alignmentValue] || alignmentWrapperMap.left, style: wrapperStyle, children: buttonElement }));
-    },
+        return /*#__PURE__*/ _jsx(AnimatedWrapper, {
+            animation: animation,
+            className: alignmentWrapperMap[alignmentValue] || alignmentWrapperMap.left,
+            style: wrapperStyle,
+            children: buttonElement
+        });
+    }
 };
-//# sourceMappingURL=Button.server.js.map

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

@@ -4,9 +4,9 @@
  * Content card with image, heading, and text.
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type BackgroundValue, type BorderValue, type DimensionsValue, type AnimationValue, type TransformValue } from '../../fields/shared';
-import { type Alignment } from '../../fields/AlignmentField';
-import type { MediaReference } from '../../fields/MediaField';
+import { type PaddingValue, type BackgroundValue, type BorderValue, type DimensionsValue, type AnimationValue, type TransformValue } from '../../fields/shared.js';
+import { type Alignment } from '../../fields/AlignmentField.js';
+import type { MediaReference } from '../../fields/MediaField.js';
 export interface CardProps {
     image: MediaReference | null;
     heading: string;
@@ -24,4 +24,3 @@ export interface CardProps {
     contentPadding: PaddingValue | null;
 }
 export declare const CardConfig: ComponentConfig;
-//# sourceMappingURL=Card.d.ts.map

package/dist/components/interactive/Card.js

@@ -1,15 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { shadowField, shadowMap, cn, marginValueToCSS, paddingValueToCSS, backgroundValueToCSS, borderValueToCSS, dimensionsValueToCSS, transformValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { createMarginField } from '../../fields/MarginField';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createResetField } from '../../fields/ResetField';
-import { createBackgroundField } from '../../fields/BackgroundField';
-import { createBorderField } from '../../fields/BorderField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createAlignmentField } from '../../fields/AlignmentField';
-import { createAnimationField } from '../../fields/AnimationField';
-import { createTransformField } from '../../fields/TransformField';
+/**
+ * Card Component - Puck Configuration
+ *
+ * Content card with image, heading, and text.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { shadowField, shadowMap, cn, marginValueToCSS, paddingValueToCSS, backgroundValueToCSS, borderValueToCSS, dimensionsValueToCSS, transformValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
+import { createMarginField } from '../../fields/MarginField.js';
+import { createPaddingField } from '../../fields/PaddingField.js';
+import { createResetField } from '../../fields/ResetField.js';
+import { createBackgroundField } from '../../fields/BackgroundField.js';
+import { createBorderField } from '../../fields/BorderField.js';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createAlignmentField } from '../../fields/AlignmentField.js';
+import { createAnimationField } from '../../fields/AnimationField.js';
+import { createTransformField } from '../../fields/TransformField.js';
 // Default content padding for card (replaces hardcoded p-4)
 const DEFAULT_CONTENT_PADDING = {
     top: 16,
@@ -17,7 +21,7 @@ const DEFAULT_CONTENT_PADDING = {
     bottom: 16,
     left: 16,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 const defaultProps = {
     image: null,
@@ -33,54 +37,87 @@ const defaultProps = {
     alignment: null,
     transform: null,
     animation: null,
-    contentPadding: DEFAULT_CONTENT_PADDING, // Default 16px padding, visible in editor
+    contentPadding: DEFAULT_CONTENT_PADDING
 };
 export const CardConfig = {
     label: 'Card',
     fields: {
-        _reset: createResetField({ defaultProps }),
+        _reset: createResetField({
+            defaultProps
+        }),
         image: {
             type: 'object',
             label: 'Image',
             objectFields: {
-                id: { type: 'text', label: 'Media ID' },
-                url: { type: 'text', label: 'URL' },
-                alt: { type: 'text', label: 'Alt Text' },
-            },
+                id: {
+                    type: 'text',
+                    label: 'Media ID'
+                },
+                url: {
+                    type: 'text',
+                    label: 'URL'
+                },
+                alt: {
+                    type: 'text',
+                    label: 'Alt Text'
+                }
+            }
         },
         heading: {
             type: 'text',
-            label: 'Heading',
+            label: 'Heading'
         },
         text: {
             type: 'textarea',
-            label: 'Text',
+            label: 'Text'
         },
         link: {
             type: 'text',
-            label: 'Link URL',
+            label: 'Link URL'
         },
         openInNewTab: {
             type: 'radio',
             label: 'Open in New Tab',
             options: [
-                { label: 'Yes', value: true },
-                { label: 'No', value: false },
-            ],
+                {
+                    label: 'Yes',
+                    value: true
+                },
+                {
+                    label: 'No',
+                    value: false
+                }
+            ]
         },
         shadow: shadowField,
-        background: createBackgroundField({ label: 'Background' }),
-        border: createBorderField({ label: 'Border' }),
-        dimensions: createDimensionsField({ label: 'Dimensions' }),
-        alignment: createAlignmentField({ label: 'Alignment' }),
-        transform: createTransformField({ label: 'Transform' }),
-        animation: createAnimationField({ label: 'Animation' }),
+        background: createBackgroundField({
+            label: 'Background'
+        }),
+        border: createBorderField({
+            label: 'Border'
+        }),
+        dimensions: createDimensionsField({
+            label: 'Dimensions'
+        }),
+        alignment: createAlignmentField({
+            label: 'Alignment'
+        }),
+        transform: createTransformField({
+            label: 'Transform'
+        }),
+        animation: createAnimationField({
+            label: 'Animation'
+        }),
         // Spacing (grouped at bottom)
-        margin: createMarginField({ label: 'Margin' }),
-        contentPadding: createPaddingField({ label: 'Content Padding' }),
+        margin: createMarginField({
+            label: 'Margin'
+        }),
+        contentPadding: createPaddingField({
+            label: 'Content Padding'
+        })
     },
     defaultProps,
-    render: ({ image, heading, text, link, openInNewTab, shadow, background, dimensions, alignment, margin, border, transform, animation, contentPadding }) => {
+    render: ({ image, heading, text, link, openInNewTab, shadow, background, dimensions, alignment, margin, border, transform, animation, contentPadding })=>{
         // Check if border has radius, if so don't apply rounded-lg
         const hasBorderRadius = border?.radius && border.radius > 0;
         const cardClasses = cn('overflow-hidden transition-all bg-card', !hasBorderRadius && 'rounded-lg', shadowMap[shadow] || '', link && 'hover:shadow-lg cursor-pointer');
@@ -104,7 +141,7 @@ export const CardConfig = {
         // Card background styles from BackgroundValue
         const backgroundStyles = backgroundValueToCSS(background);
         const cardStyle = {
-            ...backgroundStyles,
+            ...backgroundStyles
         };
         // Note: bg-card class handles default background (theme-aware)
         // Apply border to card
@@ -118,11 +155,64 @@ export const CardConfig = {
         if (contentPaddingCSS) {
             contentStyle.padding = contentPaddingCSS;
         }
-        const cardContent = (_jsxs("div", { className: cardClasses, style: cardStyle, children: [image?.url ? (_jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: _jsx("img", { src: image.url, alt: image.alt || heading || '', className: "w-full h-full object-cover" }) })) : (_jsx("div", { className: "aspect-video w-full bg-muted flex items-center justify-center", children: _jsx("span", { className: "text-muted-foreground", children: "No image" }) })), _jsxs("div", { style: contentStyle, children: [heading && (_jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: heading })), text && _jsx("p", { className: "text-muted-foreground text-sm", children: text })] })] }));
+        const cardContent = /*#__PURE__*/ _jsxs("div", {
+            className: cardClasses,
+            style: cardStyle,
+            children: [
+                image?.url ? /*#__PURE__*/ _jsx("div", {
+                    className: "relative aspect-video w-full overflow-hidden",
+                    children: /*#__PURE__*/ _jsx("img", {
+                        src: image.url,
+                        alt: image.alt || heading || '',
+                        className: "w-full h-full object-cover"
+                    })
+                }) : /*#__PURE__*/ _jsx("div", {
+                    className: "aspect-video w-full bg-muted flex items-center justify-center",
+                    children: /*#__PURE__*/ _jsx("span", {
+                        className: "text-muted-foreground",
+                        children: "No image"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: contentStyle,
+                    children: [
+                        heading && /*#__PURE__*/ _jsx("h3", {
+                            className: "text-lg font-semibold text-foreground mb-2",
+                            children: heading
+                        }),
+                        text && /*#__PURE__*/ _jsx("p", {
+                            className: "text-muted-foreground text-sm",
+                            children: text
+                        })
+                    ]
+                })
+            ]
+        });
         if (link) {
-            return (_jsx(AnimatedWrapper, { animation: animation, children: _jsx("div", { className: alignmentClasses, children: _jsx("a", { href: link, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, className: "block", style: wrapperStyle, children: cardContent }) }) }));
+            return /*#__PURE__*/ _jsx(AnimatedWrapper, {
+                animation: animation,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: alignmentClasses,
+                    children: /*#__PURE__*/ _jsx("a", {
+                        href: link,
+                        target: openInNewTab ? '_blank' : undefined,
+                        rel: openInNewTab ? 'noopener noreferrer' : undefined,
+                        className: "block",
+                        style: wrapperStyle,
+                        children: cardContent
+                    })
+                })
+            });
         }
-        return (_jsx(AnimatedWrapper, { animation: animation, children: _jsx("div", { className: alignmentClasses, children: _jsx("div", { style: wrapperStyle, children: cardContent }) }) }));
-    },
+        return /*#__PURE__*/ _jsx(AnimatedWrapper, {
+            animation: animation,
+            children: /*#__PURE__*/ _jsx("div", {
+                className: alignmentClasses,
+                children: /*#__PURE__*/ _jsx("div", {
+                    style: wrapperStyle,
+                    children: cardContent
+                })
+            })
+        });
+    }
 };
-//# sourceMappingURL=Card.js.map

package/dist/components/interactive/Card.server.d.ts

@@ -6,9 +6,9 @@
  * Safe for use in server components.
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type BackgroundValue, type BorderValue, type DimensionsValue, type AnimationValue, type TransformValue } from '../../fields/shared';
-import type { MediaReference } from '../../fields/MediaField';
-import type { Alignment } from '../../fields/AlignmentField';
+import { type PaddingValue, type BackgroundValue, type BorderValue, type DimensionsValue, type AnimationValue, type TransformValue } from '../../fields/shared.js';
+import type { MediaReference } from '../../fields/MediaField.js';
+import type { Alignment } from '../../fields/AlignmentField.js';
 export interface CardProps {
     image: MediaReference | null;
     heading: string;
@@ -26,4 +26,3 @@ export interface CardProps {
     contentPadding: PaddingValue | null;
 }
 export declare const CardConfig: ComponentConfig<CardProps>;
-//# sourceMappingURL=Card.server.d.ts.map

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

@@ -1,6 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { shadowMap, cn, marginValueToCSS, paddingValueToCSS, backgroundValueToCSS, borderValueToCSS, dimensionsValueToCSS, transformValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
+/**
+ * Card Component - Server-safe Puck Configuration
+ *
+ * Content card with image, heading, and text.
+ * This version contains only the render function and types - no fields.
+ * Safe for use in server components.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { shadowMap, cn, marginValueToCSS, paddingValueToCSS, backgroundValueToCSS, borderValueToCSS, dimensionsValueToCSS, transformValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Default content padding for card (replaces hardcoded p-4)
 const DEFAULT_CONTENT_PADDING = {
     top: 16,
@@ -8,7 +14,7 @@ const DEFAULT_CONTENT_PADDING = {
     bottom: 16,
     left: 16,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 const defaultProps = {
     image: null,
@@ -24,12 +30,12 @@ const defaultProps = {
     alignment: null,
     transform: null,
     animation: null,
-    contentPadding: DEFAULT_CONTENT_PADDING, // Default 16px padding
+    contentPadding: DEFAULT_CONTENT_PADDING
 };
 export const CardConfig = {
     label: 'Card',
     defaultProps,
-    render: ({ image, heading, text, link, openInNewTab, shadow, background, dimensions, alignment, margin, border, transform, animation, contentPadding }) => {
+    render: ({ image, heading, text, link, openInNewTab, shadow, background, dimensions, alignment, margin, border, transform, animation, contentPadding })=>{
         // Check if border has radius, if so don't apply rounded-lg
         const hasBorderRadius = border?.radius && border.radius > 0;
         const cardClasses = cn('overflow-hidden transition-all bg-card', !hasBorderRadius && 'rounded-lg', shadowMap[shadow] || '', link && 'hover:shadow-lg cursor-pointer');
@@ -53,7 +59,7 @@ export const CardConfig = {
         // Card background styles from BackgroundValue
         const backgroundStyles = backgroundValueToCSS(background);
         const cardStyle = {
-            ...backgroundStyles,
+            ...backgroundStyles
         };
         // Note: bg-card class handles default background (theme-aware)
         // Apply border to card
@@ -67,11 +73,64 @@ export const CardConfig = {
         if (contentPaddingCSS) {
             contentStyle.padding = contentPaddingCSS;
         }
-        const cardContent = (_jsxs("div", { className: cardClasses, style: cardStyle, children: [image?.url ? (_jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: _jsx("img", { src: image.url, alt: image.alt || heading || '', className: "w-full h-full object-cover" }) })) : (_jsx("div", { className: "aspect-video w-full bg-muted flex items-center justify-center", children: _jsx("span", { className: "text-muted-foreground", children: "No image" }) })), _jsxs("div", { style: contentStyle, children: [heading && (_jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: heading })), text && _jsx("p", { className: "text-muted-foreground text-sm", children: text })] })] }));
+        const cardContent = /*#__PURE__*/ _jsxs("div", {
+            className: cardClasses,
+            style: cardStyle,
+            children: [
+                image?.url ? /*#__PURE__*/ _jsx("div", {
+                    className: "relative aspect-video w-full overflow-hidden",
+                    children: /*#__PURE__*/ _jsx("img", {
+                        src: image.url,
+                        alt: image.alt || heading || '',
+                        className: "w-full h-full object-cover"
+                    })
+                }) : /*#__PURE__*/ _jsx("div", {
+                    className: "aspect-video w-full bg-muted flex items-center justify-center",
+                    children: /*#__PURE__*/ _jsx("span", {
+                        className: "text-muted-foreground",
+                        children: "No image"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: contentStyle,
+                    children: [
+                        heading && /*#__PURE__*/ _jsx("h3", {
+                            className: "text-lg font-semibold text-foreground mb-2",
+                            children: heading
+                        }),
+                        text && /*#__PURE__*/ _jsx("p", {
+                            className: "text-muted-foreground text-sm",
+                            children: text
+                        })
+                    ]
+                })
+            ]
+        });
         if (link) {
-            return (_jsx(AnimatedWrapper, { animation: animation, children: _jsx("div", { className: alignmentClasses, children: _jsx("a", { href: link, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, className: "block", style: wrapperStyle, children: cardContent }) }) }));
+            return /*#__PURE__*/ _jsx(AnimatedWrapper, {
+                animation: animation,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: alignmentClasses,
+                    children: /*#__PURE__*/ _jsx("a", {
+                        href: link,
+                        target: openInNewTab ? '_blank' : undefined,
+                        rel: openInNewTab ? 'noopener noreferrer' : undefined,
+                        className: "block",
+                        style: wrapperStyle,
+                        children: cardContent
+                    })
+                })
+            });
         }
-        return (_jsx(AnimatedWrapper, { animation: animation, children: _jsx("div", { className: alignmentClasses, children: _jsx("div", { style: wrapperStyle, children: cardContent }) }) }));
-    },
+        return /*#__PURE__*/ _jsx(AnimatedWrapper, {
+            animation: animation,
+            children: /*#__PURE__*/ _jsx("div", {
+                className: alignmentClasses,
+                children: /*#__PURE__*/ _jsx("div", {
+                    style: wrapperStyle,
+                    children: cardContent
+                })
+            })
+        });
+    }
 };
-//# sourceMappingURL=Card.server.js.map

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

@@ -4,7 +4,7 @@
  * Horizontal line separator with customizable style.
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type ColorValue, type DimensionsValue, type AnimationValue, type TransformValue } from '../../fields/shared';
+import { type PaddingValue, type ColorValue, type DimensionsValue, type AnimationValue, type TransformValue } from '../../fields/shared.js';
 export interface DividerProps {
     style: string;
     color: ColorValue | null;
@@ -15,4 +15,3 @@ export interface DividerProps {
     customPadding: PaddingValue | null;
 }
 export declare const DividerConfig: ComponentConfig;
-//# sourceMappingURL=Divider.d.ts.map

package/dist/components/interactive/Divider.js

@@ -1,13 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { dividerStyleField, dividerStyleMap, cn, marginValueToCSS, paddingValueToCSS, colorValueToCSS, dimensionsValueToCSS, transformValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { createMarginField } from '../../fields/MarginField';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createColorPickerField } from '../../fields/ColorPickerField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createAnimationField } from '../../fields/AnimationField';
-import { createTransformField } from '../../fields/TransformField';
-import { createResetField } from '../../fields/ResetField';
+/**
+ * Divider Component - Puck Configuration
+ *
+ * Horizontal line separator with customizable style.
+ */ import { jsx as _jsx } from "react/jsx-runtime";
+import { dividerStyleField, dividerStyleMap, cn, marginValueToCSS, paddingValueToCSS, colorValueToCSS, dimensionsValueToCSS, transformValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
+import { createMarginField } from '../../fields/MarginField.js';
+import { createPaddingField } from '../../fields/PaddingField.js';
+import { createColorPickerField } from '../../fields/ColorPickerField.js';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createAnimationField } from '../../fields/AnimationField.js';
+import { createTransformField } from '../../fields/TransformField.js';
+import { createResetField } from '../../fields/ResetField.js';
 // Default padding with standard horizontal spacing (replaces hardcoded px-4)
 const DEFAULT_PADDING = {
     top: 0,
@@ -15,7 +19,7 @@ const DEFAULT_PADDING = {
     bottom: 0,
     left: 16,
     unit: 'px',
-    linked: false,
+    linked: false
 };
 const defaultProps = {
     style: 'solid',
@@ -24,26 +28,40 @@ const defaultProps = {
     dimensions: null,
     transform: null,
     animation: null,
-    customPadding: DEFAULT_PADDING, // Default 16px horizontal padding, visible in editor
+    customPadding: DEFAULT_PADDING
 };
 export const DividerConfig = {
     label: 'Divider',
     fields: {
-        _reset: createResetField({ defaultProps }),
+        _reset: createResetField({
+            defaultProps
+        }),
         style: dividerStyleField,
-        color: createColorPickerField({ label: 'Color' }),
-        dimensions: createDimensionsField({ label: 'Dimensions' }),
-        transform: createTransformField({ label: 'Transform' }),
-        animation: createAnimationField({ label: 'Animation' }),
+        color: createColorPickerField({
+            label: 'Color'
+        }),
+        dimensions: createDimensionsField({
+            label: 'Dimensions'
+        }),
+        transform: createTransformField({
+            label: 'Transform'
+        }),
+        animation: createAnimationField({
+            label: 'Animation'
+        }),
         // Spacing (grouped at bottom)
-        margin: createMarginField({ label: 'Margin' }),
-        customPadding: createPaddingField({ label: 'Padding' }),
+        margin: createMarginField({
+            label: 'Margin'
+        }),
+        customPadding: createPaddingField({
+            label: 'Padding'
+        })
     },
     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) {
@@ -59,10 +77,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.js.map

package/dist/components/interactive/Divider.server.d.ts

@@ -6,7 +6,7 @@
  * Safe for use in server components.
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type ColorValue, type DimensionsValue, type AnimationValue, type TransformValue } from '../../fields/shared';
+import { type PaddingValue, type ColorValue, type DimensionsValue, type AnimationValue, type TransformValue } from '../../fields/shared.js';
 export interface DividerProps {
     style: string;
     color: ColorValue | null;
@@ -17,4 +17,3 @@ export interface DividerProps {
     customPadding: PaddingValue | null;
 }
 export declare const DividerConfig: ComponentConfig<DividerProps>;
-//# sourceMappingURL=Divider.server.d.ts.map