@delmaredigital/payload-puck 0.6.10 → 0.6.13

package/dist/components/media/Image.js

@@ -7,20 +7,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Responsive Controls:
  * - visibility: Show/hide at different breakpoints
- */
-import { useId } from 'react';
-import { aspectRatioField, aspectRatioMap, cn, marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, borderValueToCSS, transformValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { createMarginField } from '../../fields/MarginField';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createBorderField } from '../../fields/BorderField';
-import { createMediaField } from '../../fields/MediaField';
-import { createAlignmentField } from '../../fields/AlignmentField';
-import { createAnimationField } from '../../fields/AnimationField';
-import { createTransformField } from '../../fields/TransformField';
-import { createResetField } from '../../fields/ResetField';
-import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+ */ import { useId } from 'react';
+import { aspectRatioField, aspectRatioMap, cn, marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, borderValueToCSS, transformValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
+import { createMarginField } from '../../fields/MarginField.js';
+import { createPaddingField } from '../../fields/PaddingField.js';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createBorderField } from '../../fields/BorderField.js';
+import { createMediaField } from '../../fields/MediaField.js';
+import { createAlignmentField } from '../../fields/AlignmentField.js';
+import { createAnimationField } from '../../fields/AnimationField.js';
+import { createTransformField } from '../../fields/TransformField.js';
+import { createResetField } from '../../fields/ResetField.js';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js';
 // Default padding with standard spacing (replaces hardcoded py-4 px-4)
 const DEFAULT_PADDING = {
     top: 16,
@@ -28,7 +27,7 @@ const DEFAULT_PADDING = {
     bottom: 16,
     left: 16,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 const defaultProps = {
     image: null,
@@ -42,44 +41,71 @@ const defaultProps = {
     alignment: null,
     transform: null,
     animation: null,
-    customPadding: DEFAULT_PADDING, // Default 16px padding, visible in editor
-    visibility: null,
+    customPadding: DEFAULT_PADDING,
+    visibility: null
 };
 export const ImageConfig = {
     label: 'Image',
     fields: {
-        _reset: createResetField({ defaultProps }),
-        image: createMediaField({ label: 'Image' }),
+        _reset: createResetField({
+            defaultProps
+        }),
+        image: createMediaField({
+            label: 'Image'
+        }),
         alt: {
             type: 'text',
-            label: 'Alt Text Override',
+            label: 'Alt Text Override'
         },
         // Responsive visibility control
-        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
         aspectRatio: aspectRatioField,
         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
+                }
+            ]
         },
-        border: createBorderField({ label: 'Border' }),
-        dimensions: createDimensionsField({ label: 'Dimensions' }),
-        alignment: createAlignmentField({ label: 'Alignment', defaultValue: 'center' }),
-        transform: createTransformField({ label: 'Transform' }),
-        animation: createAnimationField({ label: 'Animation' }),
+        border: createBorderField({
+            label: 'Border'
+        }),
+        dimensions: createDimensionsField({
+            label: 'Dimensions'
+        }),
+        alignment: createAlignmentField({
+            label: 'Alignment',
+            defaultValue: 'center'
+        }),
+        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: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility }) => {
+    render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility })=>{
         // Generate unique ID for CSS targeting
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const uniqueId = useId().replace(/:/g, '');
@@ -88,7 +114,7 @@ export const ImageConfig = {
         const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
         const dimensionsStyles = dimensionsValueToCSS(dimensions);
         const style = {
-            ...dimensionsStyles,
+            ...dimensionsStyles
         };
         const marginCSS = marginValueToCSS(margin);
         if (marginCSS) {
@@ -110,14 +136,71 @@ export const ImageConfig = {
         const alignmentClasses = cn('flex', alignmentValue === 'left' && 'justify-start', alignmentValue === 'center' && 'justify-center', alignmentValue === 'right' && 'justify-end');
         // Placeholder if no image
         if (!image?.url) {
-            return (_jsxs(AnimatedWrapper, { animation: animation, children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: alignmentClasses, children: _jsx("div", { className: cn('relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]', aspectRatioMap[aspectRatio] || ''), children: _jsx("span", { className: "text-muted-foreground", children: "No image selected" }) }) }) })] }));
+            return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+                animation: animation,
+                children: [
+                    visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                        children: visibilityCSS
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: wrapperClass,
+                        style: Object.keys(style).length > 0 ? style : undefined,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: alignmentClasses,
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: cn('relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]', aspectRatioMap[aspectRatio] || ''),
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    className: "text-muted-foreground",
+                                    children: "No image selected"
+                                })
+                            })
+                        })
+                    })
+                ]
+            });
         }
         // For auto aspect ratio, use natural image dimensions
         // For fixed aspect ratios, use absolute positioning within aspect-ratio container
         // Note: When using aspect ratios in Flex, set a min-width via Dimensions
-        const imageElement = aspectRatio === 'auto' ? (_jsx("div", { className: "relative overflow-hidden rounded-lg w-full", children: _jsx("img", { src: image.url, alt: alt || image.alt || '', className: "w-full h-auto object-cover" }) })) : (_jsx("div", { className: cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio]), children: _jsx("img", { src: image.url, alt: alt || image.alt || '', className: "absolute inset-0 w-full h-full object-cover" }) }));
-        const content = link ? (_jsx("a", { href: link, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, className: "block transition-opacity hover:opacity-90", children: imageElement })) : (imageElement);
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: alignmentClasses, children: content }) })] }));
-    },
+        const imageElement = aspectRatio === 'auto' ? /*#__PURE__*/ _jsx("div", {
+            className: "relative overflow-hidden rounded-lg w-full",
+            children: /*#__PURE__*/ _jsx("img", {
+                src: image.url,
+                alt: alt || image.alt || '',
+                className: "w-full h-auto object-cover"
+            })
+        }) : /*#__PURE__*/ _jsx("div", {
+            className: cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio]),
+            children: /*#__PURE__*/ _jsx("img", {
+                src: image.url,
+                alt: alt || image.alt || '',
+                className: "absolute inset-0 w-full h-full object-cover"
+            })
+        });
+        const content = link ? /*#__PURE__*/ _jsx("a", {
+            href: link,
+            target: openInNewTab ? '_blank' : undefined,
+            rel: openInNewTab ? 'noopener noreferrer' : undefined,
+            className: "block transition-opacity hover:opacity-90",
+            children: imageElement
+        }) : imageElement;
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                    children: visibilityCSS
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: wrapperClass,
+                    style: Object.keys(style).length > 0 ? style : undefined,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: alignmentClasses,
+                        children: content
+                    })
+                })
+            ]
+        });
+    }
 };
+
 //# sourceMappingURL=Image.js.map

package/dist/components/media/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/media/Image.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/media/Image.tsx"],"sourcesContent":["/**\n * Image Component - Puck Configuration\n *\n * Standalone image block with optional link wrapper.\n * Server-safe version using standard HTML img element.\n *\n * Responsive Controls:\n * - visibility: Show/hide at different breakpoints\n */\n\nimport { useId } from 'react'\nimport type { ComponentConfig } from '@puckeditor/core'\nimport {\n  aspectRatioField,\n  aspectRatioMap,\n  cn,\n  marginValueToCSS,\n  paddingValueToCSS,\n  dimensionsValueToCSS,\n  borderValueToCSS,\n  transformValueToCSS,\n  visibilityValueToCSS,\n  type PaddingValue,\n  type DimensionsValue,\n  type BorderValue,\n  type AnimationValue,\n  type TransformValue,\n  type VisibilityValue,\n} from '../../fields/shared.js'\nimport { AnimatedWrapper } from '../AnimatedWrapper.js'\nimport { createMarginField } from '../../fields/MarginField.js'\nimport { createPaddingField } from '../../fields/PaddingField.js'\nimport { createDimensionsField } from '../../fields/DimensionsField.js'\nimport { createBorderField } from '../../fields/BorderField.js'\nimport { createMediaField, type MediaReference } from '../../fields/MediaField.js'\nimport { createAlignmentField, type Alignment } from '../../fields/AlignmentField.js'\nimport { createAnimationField } from '../../fields/AnimationField.js'\nimport { createTransformField } from '../../fields/TransformField.js'\nimport { createResetField } from '../../fields/ResetField.js'\nimport { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js'\n\n// Default padding with standard spacing (replaces hardcoded py-4 px-4)\nconst DEFAULT_PADDING: PaddingValue = {\n  top: 16,\n  right: 16,\n  bottom: 16,\n  left: 16,\n  unit: 'px',\n  linked: true,\n}\n\nexport interface ImageProps {\n  image: MediaReference | null\n  alt: string\n  aspectRatio: string\n  link: string\n  openInNewTab: boolean\n  margin: PaddingValue | null\n  border: BorderValue | null\n  dimensions: DimensionsValue | null\n  alignment: Alignment | null\n  transform: TransformValue | null\n  animation: AnimationValue | null\n  customPadding: PaddingValue | null\n  visibility: VisibilityValue | null\n}\n\nconst defaultProps: ImageProps = {\n  image: null,\n  alt: '',\n  aspectRatio: 'auto',\n  link: '',\n  openInNewTab: false,\n  margin: null,\n  border: null,\n  dimensions: null,\n  alignment: null,\n  transform: null,\n  animation: null,\n  customPadding: DEFAULT_PADDING, // Default 16px padding, visible in editor\n  visibility: null,\n}\n\nexport const ImageConfig: ComponentConfig = {\n  label: 'Image',\n  fields: {\n    _reset: createResetField({ defaultProps }),\n    image: createMediaField({ label: 'Image' }),\n    alt: {\n      type: 'text',\n      label: 'Alt Text Override',\n    },\n    // Responsive visibility control\n    visibility: createResponsiveVisibilityField({ label: 'Visibility' }),\n    aspectRatio: aspectRatioField,\n    link: {\n      type: 'text',\n      label: 'Link URL',\n    },\n    openInNewTab: {\n      type: 'radio',\n      label: 'Open in New Tab',\n      options: [\n        { label: 'Yes', value: true },\n        { label: 'No', value: false },\n      ],\n    },\n    border: createBorderField({ label: 'Border' }),\n    dimensions: createDimensionsField({ label: 'Dimensions' }),\n    alignment: createAlignmentField({ label: 'Alignment', defaultValue: 'center' }),\n    transform: createTransformField({ label: 'Transform' }),\n    animation: createAnimationField({ label: 'Animation' }),\n    // Spacing (grouped at bottom)\n    margin: createMarginField({ label: 'Margin' }),\n    customPadding: createPaddingField({ label: 'Padding' }),\n  },\n  defaultProps,\n  render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility }) => {\n    // Generate unique ID for CSS targeting\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const uniqueId = useId().replace(/:/g, '')\n    const wrapperClass = `puck-image-${uniqueId}`\n\n    // Visibility media queries\n    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass)\n    const dimensionsStyles = dimensionsValueToCSS(dimensions)\n\n    const style: React.CSSProperties = {\n      ...dimensionsStyles,\n    }\n    const marginCSS = marginValueToCSS(margin)\n    if (marginCSS) {\n      style.margin = marginCSS\n    }\n    const paddingCSS = paddingValueToCSS(customPadding)\n    if (paddingCSS) {\n      style.padding = paddingCSS\n    }\n    const borderStyles = borderValueToCSS(border)\n    if (borderStyles) {\n      Object.assign(style, borderStyles)\n    }\n    const transformStyles = transformValueToCSS(transform)\n    if (transformStyles) {\n      Object.assign(style, transformStyles)\n    }\n\n    const alignmentValue = alignment ?? 'center'\n    const alignmentClasses = cn(\n      'flex',\n      alignmentValue === 'left' && 'justify-start',\n      alignmentValue === 'center' && 'justify-center',\n      alignmentValue === 'right' && 'justify-end'\n    )\n\n    // Placeholder if no image\n    if (!image?.url) {\n      return (\n        <AnimatedWrapper animation={animation}>\n          {visibilityCSS && <style>{visibilityCSS}</style>}\n          <div className={wrapperClass} style={Object.keys(style).length > 0 ? style : undefined}>\n            <div className={alignmentClasses}>\n              <div\n                className={cn(\n                  'relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]',\n                  aspectRatioMap[aspectRatio] || ''\n                )}\n              >\n                <span className=\"text-muted-foreground\">No image selected</span>\n              </div>\n            </div>\n          </div>\n        </AnimatedWrapper>\n      )\n    }\n\n    // For auto aspect ratio, use natural image dimensions\n    // For fixed aspect ratios, use absolute positioning within aspect-ratio container\n    // Note: When using aspect ratios in Flex, set a min-width via Dimensions\n    const imageElement = aspectRatio === 'auto' ? (\n      <div className=\"relative overflow-hidden rounded-lg w-full\">\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={image.url}\n          alt={alt || image.alt || ''}\n          className=\"w-full h-auto object-cover\"\n        />\n      </div>\n    ) : (\n      <div className={cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio])}>\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={image.url}\n          alt={alt || image.alt || ''}\n          className=\"absolute inset-0 w-full h-full object-cover\"\n        />\n      </div>\n    )\n\n    const content = link ? (\n      <a\n        href={link}\n        target={openInNewTab ? '_blank' : undefined}\n        rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        className=\"block transition-opacity hover:opacity-90\"\n      >\n        {imageElement}\n      </a>\n    ) : (\n      imageElement\n    )\n\n    return (\n      <AnimatedWrapper animation={animation}>\n        {visibilityCSS && <style>{visibilityCSS}</style>}\n        <div className={wrapperClass} style={Object.keys(style).length > 0 ? style : undefined}>\n          <div className={alignmentClasses}>{content}</div>\n        </div>\n      </AnimatedWrapper>\n    )\n  },\n}\n"],"names":["useId","aspectRatioField","aspectRatioMap","cn","marginValueToCSS","paddingValueToCSS","dimensionsValueToCSS","borderValueToCSS","transformValueToCSS","visibilityValueToCSS","AnimatedWrapper","createMarginField","createPaddingField","createDimensionsField","createBorderField","createMediaField","createAlignmentField","createAnimationField","createTransformField","createResetField","createResponsiveVisibilityField","DEFAULT_PADDING","top","right","bottom","left","unit","linked","defaultProps","image","alt","aspectRatio","link","openInNewTab","margin","border","dimensions","alignment","transform","animation","customPadding","visibility","ImageConfig","label","fields","_reset","type","options","value","defaultValue","render","uniqueId","replace","wrapperClass","visibilityCSS","dimensionsStyles","style","marginCSS","paddingCSS","padding","borderStyles","Object","assign","transformStyles","alignmentValue","alignmentClasses","url","div","className","keys","length","undefined","span","imageElement","img","src","content","a","href","target","rel"],"mappings":"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"}

package/dist/components/media/Image.server.d.ts

@@ -6,9 +6,9 @@
  * Safe for use in server components.
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type DimensionsValue, type BorderValue, type AnimationValue, type TransformValue, type VisibilityValue } from '../../fields/shared';
-import type { MediaReference } from '../../fields/MediaField';
-import type { Alignment } from '../../fields/AlignmentField';
+import { type PaddingValue, type DimensionsValue, type BorderValue, type AnimationValue, type TransformValue, type VisibilityValue } from '../../fields/shared.js';
+import type { MediaReference } from '../../fields/MediaField.js';
+import type { Alignment } from '../../fields/AlignmentField.js';
 export interface ImageProps {
     image: MediaReference | null;
     alt: string;

package/dist/components/media/Image.server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.server.d.ts","sourceRoot":"","sources":["../../../src/components/media/Image.server.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EASL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAkB5D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,OAAO,CAAA;IACrB,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAClC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,aAAa,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAkBD,eAAO,MAAM,WAAW,EAAE,eAAe,CAAC,UAAU,CA0GnD,CAAA"}
+{"version":3,"file":"Image.server.d.ts","sourceRoot":"","sources":["../../../src/components/media/Image.server.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EASL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAkB/D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,OAAO,CAAA;IACrB,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAClC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,aAAa,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAkBD,eAAO,MAAM,WAAW,EAAE,eAAe,CAAC,UAAU,CA0GnD,CAAA"}

package/dist/components/media/Image.server.js

@@ -1,6 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { aspectRatioMap, cn, marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, borderValueToCSS, transformValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
+/**
+ * Image Component - Server-safe Puck Configuration
+ *
+ * Standalone image block with optional link wrapper.
+ * 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 { aspectRatioMap, cn, marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, borderValueToCSS, transformValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Default padding with standard spacing (replaces hardcoded py-4 px-4)
 const DEFAULT_PADDING = {
     top: 16,
@@ -8,7 +14,7 @@ const DEFAULT_PADDING = {
     bottom: 16,
     left: 16,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 // Simple ID generator for server-side rendering
 let idCounter = 0;
@@ -27,13 +33,13 @@ const defaultProps = {
     alignment: null,
     transform: null,
     animation: null,
-    customPadding: DEFAULT_PADDING, // Default 16px padding
-    visibility: null,
+    customPadding: DEFAULT_PADDING,
+    visibility: null
 };
 export const ImageConfig = {
     label: 'Image',
     defaultProps,
-    render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility }) => {
+    render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility })=>{
         // Generate unique ID for CSS targeting (server-safe)
         const uniqueId = generateUniqueId();
         const wrapperClass = `puck-image-${uniqueId}`;
@@ -41,7 +47,7 @@ export const ImageConfig = {
         const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
         const dimensionsStyles = dimensionsValueToCSS(dimensions);
         const style = {
-            ...dimensionsStyles,
+            ...dimensionsStyles
         };
         const marginCSS = marginValueToCSS(margin);
         if (marginCSS) {
@@ -63,14 +69,71 @@ export const ImageConfig = {
         const alignmentClasses = cn('flex', alignmentValue === 'left' && 'justify-start', alignmentValue === 'center' && 'justify-center', alignmentValue === 'right' && 'justify-end');
         // Placeholder if no image
         if (!image?.url) {
-            return (_jsxs(AnimatedWrapper, { animation: animation, children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: alignmentClasses, children: _jsx("div", { className: cn('relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]', aspectRatioMap[aspectRatio] || ''), children: _jsx("span", { className: "text-muted-foreground", children: "No image selected" }) }) }) })] }));
+            return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+                animation: animation,
+                children: [
+                    visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                        children: visibilityCSS
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: wrapperClass,
+                        style: Object.keys(style).length > 0 ? style : undefined,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: alignmentClasses,
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: cn('relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]', aspectRatioMap[aspectRatio] || ''),
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    className: "text-muted-foreground",
+                                    children: "No image selected"
+                                })
+                            })
+                        })
+                    })
+                ]
+            });
         }
         // For auto aspect ratio, use natural image dimensions
         // For fixed aspect ratios, use absolute positioning within aspect-ratio container
         // Note: When using aspect ratios in Flex, set a min-width via Dimensions
-        const imageElement = aspectRatio === 'auto' ? (_jsx("div", { className: "relative overflow-hidden rounded-lg w-full", children: _jsx("img", { src: image.url, alt: alt || image.alt || '', className: "w-full h-auto object-cover" }) })) : (_jsx("div", { className: cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio]), children: _jsx("img", { src: image.url, alt: alt || image.alt || '', className: "absolute inset-0 w-full h-full object-cover" }) }));
-        const content = link ? (_jsx("a", { href: link, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, className: "block transition-opacity hover:opacity-90", children: imageElement })) : (imageElement);
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: alignmentClasses, children: content }) })] }));
-    },
+        const imageElement = aspectRatio === 'auto' ? /*#__PURE__*/ _jsx("div", {
+            className: "relative overflow-hidden rounded-lg w-full",
+            children: /*#__PURE__*/ _jsx("img", {
+                src: image.url,
+                alt: alt || image.alt || '',
+                className: "w-full h-auto object-cover"
+            })
+        }) : /*#__PURE__*/ _jsx("div", {
+            className: cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio]),
+            children: /*#__PURE__*/ _jsx("img", {
+                src: image.url,
+                alt: alt || image.alt || '',
+                className: "absolute inset-0 w-full h-full object-cover"
+            })
+        });
+        const content = link ? /*#__PURE__*/ _jsx("a", {
+            href: link,
+            target: openInNewTab ? '_blank' : undefined,
+            rel: openInNewTab ? 'noopener noreferrer' : undefined,
+            className: "block transition-opacity hover:opacity-90",
+            children: imageElement
+        }) : imageElement;
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                    children: visibilityCSS
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: wrapperClass,
+                    style: Object.keys(style).length > 0 ? style : undefined,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: alignmentClasses,
+                        children: content
+                    })
+                })
+            ]
+        });
+    }
 };
+
 //# sourceMappingURL=Image.server.js.map

package/dist/components/media/Image.server.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.server.js","sourceRoot":"","sources":["../../../src/components/media/Image.server.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/media/Image.server.tsx"],"sourcesContent":["/**\n * Image Component - Server-safe Puck Configuration\n *\n * Standalone image block with optional link wrapper.\n * This version contains only the render function and types - no fields.\n * Safe for use in server components.\n */\n\nimport type { ComponentConfig } from '@puckeditor/core'\nimport {\n  aspectRatioMap,\n  cn,\n  marginValueToCSS,\n  paddingValueToCSS,\n  dimensionsValueToCSS,\n  borderValueToCSS,\n  transformValueToCSS,\n  visibilityValueToCSS,\n  type PaddingValue,\n  type DimensionsValue,\n  type BorderValue,\n  type AnimationValue,\n  type TransformValue,\n  type VisibilityValue,\n} from '../../fields/shared.js'\nimport { AnimatedWrapper } from '../AnimatedWrapper.js'\nimport type { MediaReference } from '../../fields/MediaField.js'\nimport type { Alignment } from '../../fields/AlignmentField.js'\n\n// Default padding with standard spacing (replaces hardcoded py-4 px-4)\nconst DEFAULT_PADDING: PaddingValue = {\n  top: 16,\n  right: 16,\n  bottom: 16,\n  left: 16,\n  unit: 'px',\n  linked: true,\n}\n\n// Simple ID generator for server-side rendering\nlet idCounter = 0\nfunction generateUniqueId(): string {\n  return `i${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`\n}\n\nexport interface ImageProps {\n  image: MediaReference | null\n  alt: string\n  aspectRatio: string\n  link: string\n  openInNewTab: boolean\n  margin: PaddingValue | null\n  border: BorderValue | null\n  dimensions: DimensionsValue | null\n  alignment: Alignment | null\n  transform: TransformValue | null\n  animation: AnimationValue | null\n  customPadding: PaddingValue | null\n  visibility: VisibilityValue | null\n}\n\nconst defaultProps: ImageProps = {\n  image: null,\n  alt: '',\n  aspectRatio: 'auto',\n  link: '',\n  openInNewTab: false,\n  margin: null,\n  border: null,\n  dimensions: null,\n  alignment: null,\n  transform: null,\n  animation: null,\n  customPadding: DEFAULT_PADDING, // Default 16px padding\n  visibility: null,\n}\n\nexport const ImageConfig: ComponentConfig<ImageProps> = {\n  label: 'Image',\n  defaultProps,\n  render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility }) => {\n    // Generate unique ID for CSS targeting (server-safe)\n    const uniqueId = generateUniqueId()\n    const wrapperClass = `puck-image-${uniqueId}`\n\n    // Visibility media queries\n    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass)\n    const dimensionsStyles = dimensionsValueToCSS(dimensions)\n\n    const style: React.CSSProperties = {\n      ...dimensionsStyles,\n    }\n    const marginCSS = marginValueToCSS(margin)\n    if (marginCSS) {\n      style.margin = marginCSS\n    }\n    const paddingCSS = paddingValueToCSS(customPadding)\n    if (paddingCSS) {\n      style.padding = paddingCSS\n    }\n    const borderStyles = borderValueToCSS(border)\n    if (borderStyles) {\n      Object.assign(style, borderStyles)\n    }\n    const transformStyles = transformValueToCSS(transform)\n    if (transformStyles) {\n      Object.assign(style, transformStyles)\n    }\n\n    const alignmentValue = alignment ?? 'center'\n    const alignmentClasses = cn(\n      'flex',\n      alignmentValue === 'left' && 'justify-start',\n      alignmentValue === 'center' && 'justify-center',\n      alignmentValue === 'right' && 'justify-end'\n    )\n\n    // Placeholder if no image\n    if (!image?.url) {\n      return (\n        <AnimatedWrapper animation={animation}>\n          {visibilityCSS && <style>{visibilityCSS}</style>}\n          <div className={wrapperClass} style={Object.keys(style).length > 0 ? style : undefined}>\n            <div className={alignmentClasses}>\n              <div\n                className={cn(\n                  'relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]',\n                  aspectRatioMap[aspectRatio] || ''\n                )}\n              >\n                <span className=\"text-muted-foreground\">No image selected</span>\n              </div>\n            </div>\n          </div>\n        </AnimatedWrapper>\n      )\n    }\n\n    // For auto aspect ratio, use natural image dimensions\n    // For fixed aspect ratios, use absolute positioning within aspect-ratio container\n    // Note: When using aspect ratios in Flex, set a min-width via Dimensions\n    const imageElement = aspectRatio === 'auto' ? (\n      <div className=\"relative overflow-hidden rounded-lg w-full\">\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={image.url}\n          alt={alt || image.alt || ''}\n          className=\"w-full h-auto object-cover\"\n        />\n      </div>\n    ) : (\n      <div className={cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio])}>\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={image.url}\n          alt={alt || image.alt || ''}\n          className=\"absolute inset-0 w-full h-full object-cover\"\n        />\n      </div>\n    )\n\n    const content = link ? (\n      <a\n        href={link}\n        target={openInNewTab ? '_blank' : undefined}\n        rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        className=\"block transition-opacity hover:opacity-90\"\n      >\n        {imageElement}\n      </a>\n    ) : (\n      imageElement\n    )\n\n    return (\n      <AnimatedWrapper animation={animation}>\n        {visibilityCSS && <style>{visibilityCSS}</style>}\n        <div className={wrapperClass} style={Object.keys(style).length > 0 ? style : undefined}>\n          <div className={alignmentClasses}>{content}</div>\n        </div>\n      </AnimatedWrapper>\n    )\n  },\n}\n"],"names":["aspectRatioMap","cn","marginValueToCSS","paddingValueToCSS","dimensionsValueToCSS","borderValueToCSS","transformValueToCSS","visibilityValueToCSS","AnimatedWrapper","DEFAULT_PADDING","top","right","bottom","left","unit","linked","idCounter","generateUniqueId","toString","Math","random","slice","defaultProps","image","alt","aspectRatio","link","openInNewTab","margin","border","dimensions","alignment","transform","animation","customPadding","visibility","ImageConfig","label","render","uniqueId","wrapperClass","visibilityCSS","dimensionsStyles","style","marginCSS","paddingCSS","padding","borderStyles","Object","assign","transformStyles","alignmentValue","alignmentClasses","url","div","className","keys","length","undefined","span","imageElement","img","src","content","a","href","target","rel"],"mappings":"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"}

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

@@ -3,5 +3,5 @@
  *
  * Image and media display components.
  */
-export { ImageConfig } from './Image';
+export { ImageConfig } from './Image.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/media/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/media/index.js

@@ -2,6 +2,6 @@
  * Media Components
  *
  * Image and media display components.
- */
-export { ImageConfig } from './Image';
+ */ export { ImageConfig } from './Image.js';
+
 //# sourceMappingURL=index.js.map

package/dist/components/media/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/media/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"sources":["../../../src/components/media/index.ts"],"sourcesContent":["/**\n * Media Components\n *\n * Image and media display components.\n */\n\nexport { ImageConfig } from './Image.js'\n"],"names":["ImageConfig"],"mappings":"AAAA;;;;CAIC,GAED,SAASA,WAAW,QAAQ,aAAY"}

package/dist/components/typography/Heading.d.ts

@@ -5,8 +5,8 @@
  * Supports custom margin for spacing control.
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type ColorValue, type DimensionsValue, type AnimationValue } from '../../fields/shared';
-import { type Alignment } from '../../fields/AlignmentField';
+import { type PaddingValue, type ColorValue, type DimensionsValue, type AnimationValue } from '../../fields/shared.js';
+import { type Alignment } from '../../fields/AlignmentField.js';
 export interface HeadingProps {
     text: string;
     level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/components/typography/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/typography/Heading.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EASL,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,qBAAqB,CAAA;AAK5B,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAKlF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC9C,SAAS,EAAE,SAAS,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,UAAU,GAAG,IAAI,CAAA;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAClC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,aAAa,EAAE,YAAY,GAAG,IAAI,CAAA;CACnC;AAaD,eAAO,MAAM,aAAa,EAAE,eAqD3B,CAAA"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/typography/Heading.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EASL,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAA;AAK/B,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAKrF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC9C,SAAS,EAAE,SAAS,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,UAAU,GAAG,IAAI,CAAA;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAClC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,aAAa,EAAE,YAAY,GAAG,IAAI,CAAA;CACnC;AAaD,eAAO,MAAM,aAAa,EAAE,eAqD3B,CAAA"}

package/dist/components/typography/Heading.js

@@ -4,17 +4,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * H1-H6 headings with customizable styling.
  * Supports custom margin for spacing control.
- */
-import { createElement } from 'react';
-import { headingLevelField, headingLevelMap, alignmentMap, cn, marginValueToCSS, paddingValueToCSS, colorValueToCSS, dimensionsValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { createMarginField } from '../../fields/MarginField';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createColorPickerField } from '../../fields/ColorPickerField';
-import { createAlignmentField } from '../../fields/AlignmentField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createAnimationField } from '../../fields/AnimationField';
-import { createResetField } from '../../fields/ResetField';
+ */ import React, { createElement } from 'react';
+import { headingLevelField, headingLevelMap, alignmentMap, cn, marginValueToCSS, paddingValueToCSS, colorValueToCSS, dimensionsValueToCSS } 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 { createAlignmentField } from '../../fields/AlignmentField.js';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createAnimationField } from '../../fields/AnimationField.js';
+import { createResetField } from '../../fields/ResetField.js';
 const defaultProps = {
     text: 'Heading Text',
     level: 'h2',
@@ -23,33 +22,47 @@ const defaultProps = {
     dimensions: null,
     animation: null,
     margin: null,
-    customPadding: null,
+    customPadding: null
 };
 export const HeadingConfig = {
     label: 'Heading',
     fields: {
-        _reset: createResetField({ defaultProps }),
+        _reset: createResetField({
+            defaultProps
+        }),
         text: {
             type: 'text',
-            label: 'Text',
+            label: 'Text'
         },
         level: headingLevelField,
-        textColor: createColorPickerField({ label: 'Text Color' }),
-        dimensions: createDimensionsField({ label: 'Dimensions' }),
-        alignment: createAlignmentField({ label: 'Alignment' }),
-        animation: createAnimationField({ label: 'Animation' }),
+        textColor: createColorPickerField({
+            label: 'Text Color'
+        }),
+        dimensions: createDimensionsField({
+            label: 'Dimensions'
+        }),
+        alignment: createAlignmentField({
+            label: 'Alignment'
+        }),
+        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: ({ text, level, alignment, textColor, dimensions, animation, margin, customPadding }) => {
+    render: ({ text, level, alignment, textColor, dimensions, animation, margin, customPadding })=>{
         const tag = level || 'h2';
         const alignmentValue = alignment ?? 'left';
         const classes = cn(headingLevelMap[level] || headingLevelMap.h2, alignmentMap[alignmentValue] || alignmentMap.left);
         const dimensionsStyles = dimensions ? dimensionsValueToCSS(dimensions) : undefined;
         const style = {
-            ...dimensionsStyles,
+            ...dimensionsStyles
         };
         const marginCSS = marginValueToCSS(margin);
         if (marginCSS) {
@@ -64,8 +77,15 @@ export const HeadingConfig = {
         if (colorCSS) {
             style.color = colorCSS;
         }
-        const headingElement = createElement(tag, { className: classes, style: Object.keys(style).length > 0 ? style : undefined }, text);
-        return (_jsx(AnimatedWrapper, { animation: animation, children: headingElement }));
-    },
+        const headingElement = /*#__PURE__*/ createElement(tag, {
+            className: classes,
+            style: Object.keys(style).length > 0 ? style : undefined
+        }, text);
+        return /*#__PURE__*/ _jsx(AnimatedWrapper, {
+            animation: animation,
+            children: headingElement
+        });
+    }
 };
+
 //# sourceMappingURL=Heading.js.map