@delmaredigital/payload-puck 0.1.3 → 0.3.0

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

@@ -0,0 +1,35 @@
+/**
+ * Template Component - Puck Configuration
+ *
+ * A reusable template container that allows saving and loading
+ * pre-configured component arrangements from the Payload CMS.
+ *
+ * Use this component to:
+ * - Create reusable page sections
+ * - Save common component patterns as templates
+ * - Quickly load pre-built layouts
+ *
+ * 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 type { ComponentConfig } from '@measured/puck';
+import { type PaddingValue, type DimensionsValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+export interface TemplateProps {
+    /** Slot for nested components */
+    content: unknown;
+    /** ID of the currently loaded template (or null if none) */
+    templateId: string | null;
+    /** Responsive dimensions */
+    dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null;
+    /** Responsive padding */
+    customPadding: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    /** Responsive margin */
+    margin: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    /** Responsive visibility */
+    visibility: VisibilityValue | null;
+}
+export declare const TemplateConfig: ComponentConfig;
+//# sourceMappingURL=Template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Template.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAOL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AA6B5B,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAA;IAChB,4DAA4D;IAC5D,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,4BAA4B;IAC5B,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,yBAAyB;IACzB,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,wBAAwB;IACxB,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,4BAA4B;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAmBD,eAAO,MAAM,cAAc,EAAE,eAiG5B,CAAA"}

package/dist/components/layout/Template.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Template Component - Puck Configuration
+ *
+ * A reusable template container that allows saving and loading
+ * pre-configured component arrangements from the Payload CMS.
+ *
+ * Use this component to:
+ * - Create reusable page sections
+ * - Save common component patterns as templates
+ * - Quickly load pre-built layouts
+ *
+ * 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 { useId } from 'react';
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
+import { createResetField } from '../../fields/ResetField';
+import { createTemplateField } from '../../fields/TemplateField';
+import { createPaddingField } from '../../fields/PaddingField';
+import { createMarginField } from '../../fields/MarginField';
+import { createDimensionsField } from '../../fields/DimensionsField';
+import { createResponsiveField } from '../../fields/ResponsiveField';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+// Default values for responsive fields
+const DEFAULT_PADDING = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    unit: 'px',
+    linked: true,
+};
+const DEFAULT_DIMENSIONS = {
+    mode: 'full',
+    alignment: 'center',
+    maxWidth: { value: 100, unit: '%', enabled: true },
+};
+// =============================================================================
+// Default Props
+// =============================================================================
+const defaultProps = {
+    content: [],
+    templateId: null,
+    dimensions: null,
+    customPadding: null,
+    margin: null,
+    visibility: null,
+};
+// =============================================================================
+// Component Configuration
+// =============================================================================
+export const TemplateConfig = {
+    label: 'Template',
+    fields: {
+        _reset: createResetField({ defaultProps }),
+        templateId: createTemplateField({ label: 'Template' }),
+        content: {
+            type: 'slot',
+        },
+        // Responsive visibility control
+        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        // Responsive dimensions
+        dimensions: createResponsiveField({
+            label: 'Dimensions (Responsive)',
+            innerField: (config) => createDimensionsField(config),
+            defaultValue: DEFAULT_DIMENSIONS,
+        }),
+        // Spacing (grouped at bottom) - Responsive
+        margin: createResponsiveField({
+            label: 'Margin (Responsive)',
+            innerField: (config) => createMarginField(config),
+            defaultValue: DEFAULT_PADDING,
+        }),
+        customPadding: createResponsiveField({
+            label: 'Padding (Responsive)',
+            innerField: (config) => createPaddingField(config),
+            defaultValue: DEFAULT_PADDING,
+        }),
+    },
+    defaultProps,
+    render: ({ content: Content, dimensions, customPadding, margin, visibility }) => {
+        // Generate unique IDs for CSS targeting
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const uniqueId = useId().replace(/:/g, '');
+        const wrapperClass = `puck-template-${uniqueId}`;
+        const contentClass = `puck-template-content-${uniqueId}`;
+        // Collect all media query CSS
+        const mediaQueries = [];
+        // Build wrapper styles
+        const wrapperStyles = {};
+        // Add padding with responsive support
+        const paddingResult = responsiveValueToCSS(customPadding, (v) => ({ padding: paddingValueToCSS(v) }), wrapperClass);
+        Object.assign(wrapperStyles, paddingResult.baseStyles);
+        if (paddingResult.mediaQueryCSS) {
+            mediaQueries.push(paddingResult.mediaQueryCSS);
+        }
+        // Add margin with responsive support
+        const marginResult = responsiveValueToCSS(margin, (v) => ({ margin: marginValueToCSS(v) }), wrapperClass);
+        Object.assign(wrapperStyles, marginResult.baseStyles);
+        if (marginResult.mediaQueryCSS) {
+            mediaQueries.push(marginResult.mediaQueryCSS);
+        }
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
+        if (visibilityCSS) {
+            mediaQueries.push(visibilityCSS);
+        }
+        // Use dimensions with responsive support
+        const dimensionsResult = responsiveValueToCSS(dimensions, dimensionsValueToCSS, contentClass);
+        if (dimensionsResult.mediaQueryCSS) {
+            mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        }
+        // Combine all media queries
+        const allMediaQueryCSS = mediaQueries.join('\n');
+        // Content is a slot component that Puck provides
+        // It renders all the nested components within this template
+        return (_jsxs(_Fragment, { children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx("div", { className: cn('template-wrapper', wrapperClass), style: Object.keys(wrapperStyles).length > 0 ? wrapperStyles : undefined, children: _jsx(Content, { className: contentClass, style: dimensionsResult.baseStyles }) })] }));
+    },
+};
+//# sourceMappingURL=Template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Template.js","sourceRoot":"","sources":["../../../src/components/layout/Template.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+/**
+ * Template Component - Server-safe Configuration
+ *
+ * A reusable template container for rendering nested components.
+ * This server-safe version excludes the TemplateField (which requires client-side APIs).
+ *
+ * For the full editor experience with template loading, use Template.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 type { ComponentConfig } from '@measured/puck';
+import { type PaddingValue, type DimensionsValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+export interface TemplateProps {
+    /** Slot for nested components */
+    content: unknown;
+    /** ID of the currently loaded template (for tracking only) */
+    templateId: string | null;
+    /** Responsive dimensions */
+    dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null;
+    /** Responsive padding */
+    customPadding: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    /** Responsive margin */
+    margin: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    /** Responsive visibility */
+    visibility: VisibilityValue | null;
+}
+export declare const TemplateServerConfig: ComponentConfig;
+//# sourceMappingURL=Template.server.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Template.server.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Template.server.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAOL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAY5B,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAA;IAChB,8DAA8D;IAC9D,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,4BAA4B;IAC5B,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,yBAAyB;IACzB,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,wBAAwB;IACxB,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,4BAA4B;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAmBD,eAAO,MAAM,oBAAoB,EAAE,eAmFlC,CAAA"}

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
+// Simple ID generator for server-side rendering
+let idCounter = 0;
+function generateUniqueId() {
+    return `t${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+// =============================================================================
+// Default Props
+// =============================================================================
+const defaultProps = {
+    content: [],
+    templateId: null,
+    dimensions: null,
+    customPadding: null,
+    margin: null,
+    visibility: null,
+};
+// =============================================================================
+// Component Configuration (Server-safe)
+// =============================================================================
+export const TemplateServerConfig = {
+    label: 'Template',
+    fields: {
+        // In server config, templateId is just for reference (no loading UI)
+        templateId: {
+            type: 'text',
+            label: 'Template ID',
+        },
+        content: {
+            type: 'slot',
+        },
+    },
+    defaultProps,
+    render: ({ content: Content, dimensions, customPadding, margin, visibility }) => {
+        // Generate unique IDs for CSS targeting (server-safe)
+        const uniqueId = generateUniqueId();
+        const wrapperClass = `puck-template-${uniqueId}`;
+        const contentClass = `puck-template-content-${uniqueId}`;
+        // Collect all media query CSS
+        const mediaQueries = [];
+        // Build wrapper styles
+        const wrapperStyles = {};
+        // Add padding with responsive support
+        const paddingResult = responsiveValueToCSS(customPadding, (v) => ({ padding: paddingValueToCSS(v) }), wrapperClass);
+        Object.assign(wrapperStyles, paddingResult.baseStyles);
+        if (paddingResult.mediaQueryCSS) {
+            mediaQueries.push(paddingResult.mediaQueryCSS);
+        }
+        // Add margin with responsive support
+        const marginResult = responsiveValueToCSS(margin, (v) => ({ margin: marginValueToCSS(v) }), wrapperClass);
+        Object.assign(wrapperStyles, marginResult.baseStyles);
+        if (marginResult.mediaQueryCSS) {
+            mediaQueries.push(marginResult.mediaQueryCSS);
+        }
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
+        if (visibilityCSS) {
+            mediaQueries.push(visibilityCSS);
+        }
+        // Use dimensions with responsive support
+        const dimensionsResult = responsiveValueToCSS(dimensions, dimensionsValueToCSS, contentClass);
+        if (dimensionsResult.mediaQueryCSS) {
+            mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        }
+        // Combine all media queries
+        const allMediaQueryCSS = mediaQueries.join('\n');
+        // Type assertion for Puck slot content
+        const ContentSlot = Content;
+        // Content is a slot component that Puck provides
+        // It renders all the nested components within this template
+        return (_jsxs(_Fragment, { children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx("div", { className: cn('template-wrapper', wrapperClass), style: Object.keys(wrapperStyles).length > 0 ? wrapperStyles : undefined, children: _jsx(ContentSlot, { className: contentClass, style: dimensionsResult.baseStyles }) })] }));
+    },
+};
+//# sourceMappingURL=Template.server.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Template.server.js","sourceRoot":"","sources":["../../../src/components/layout/Template.server.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+/**
+ * Layout Components
+ *
+ * Structural components for page layout and content organization.
+ */
+export { ContainerConfig } from './Container';
+export { FlexConfig } from './Flex';
+export { GridConfig } from './Grid';
+export { SectionConfig } from './Section';
+export { SpacerConfig } from './Spacer';
+export { TemplateConfig } from './Template';
+export { TemplateServerConfig } from './Template.server';
+export type { TemplateProps } from './Template';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/layout/index.js

@@ -0,0 +1,13 @@
+/**
+ * Layout Components
+ *
+ * Structural components for page layout and content organization.
+ */
+export { ContainerConfig } from './Container';
+export { FlexConfig } from './Flex';
+export { GridConfig } from './Grid';
+export { SectionConfig } from './Section';
+export { SpacerConfig } from './Spacer';
+export { TemplateConfig } from './Template';
+export { TemplateServerConfig } from './Template.server';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA"}

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

@@ -0,0 +1,30 @@
+/**
+ * Image Component - Puck Configuration
+ *
+ * Standalone image block with optional link wrapper.
+ * Server-safe version using standard HTML img element.
+ *
+ * Responsive Controls:
+ * - visibility: Show/hide at different breakpoints
+ */
+import type { ComponentConfig } from '@measured/puck';
+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';
+export interface ImageProps {
+    image: MediaReference | null;
+    alt: string;
+    aspectRatio: string;
+    link: string;
+    openInNewTab: boolean;
+    margin: PaddingValue | null;
+    border: BorderValue | null;
+    dimensions: DimensionsValue | null;
+    alignment: Alignment | null;
+    transform: TransformValue | null;
+    animation: AnimationValue | null;
+    customPadding: PaddingValue | null;
+    visibility: VisibilityValue | null;
+}
+export declare const ImageConfig: ComponentConfig;
+//# sourceMappingURL=Image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/media/Image.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAUL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAM5B,OAAO,EAAoB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAC/E,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAgBlF,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,eA0IzB,CAAA"}

package/dist/components/media/Image.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Image Component - Puck Configuration
+ *
+ * Standalone image block with optional link wrapper.
+ * Server-safe version using standard HTML img element.
+ *
+ * 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';
+// Default padding with standard spacing (replaces hardcoded py-4 px-4)
+const DEFAULT_PADDING = {
+    top: 16,
+    right: 16,
+    bottom: 16,
+    left: 16,
+    unit: 'px',
+    linked: true,
+};
+const defaultProps = {
+    image: null,
+    alt: '',
+    aspectRatio: 'auto',
+    link: '',
+    openInNewTab: false,
+    margin: null,
+    border: null,
+    dimensions: null,
+    alignment: null,
+    transform: null,
+    animation: null,
+    customPadding: DEFAULT_PADDING, // Default 16px padding, visible in editor
+    visibility: null,
+};
+export const ImageConfig = {
+    label: 'Image',
+    fields: {
+        _reset: createResetField({ defaultProps }),
+        image: createMediaField({ label: 'Image' }),
+        alt: {
+            type: 'text',
+            label: 'Alt Text Override',
+        },
+        // Responsive visibility control
+        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        aspectRatio: aspectRatioField,
+        link: {
+            type: 'text',
+            label: 'Link URL',
+        },
+        openInNewTab: {
+            type: 'radio',
+            label: 'Open in New Tab',
+            options: [
+                { 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' }),
+        // Spacing (grouped at bottom)
+        margin: createMarginField({ label: 'Margin' }),
+        customPadding: createPaddingField({ label: 'Padding' }),
+    },
+    defaultProps,
+    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, '');
+        const wrapperClass = `puck-image-${uniqueId}`;
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
+        const dimensionsStyles = dimensionsValueToCSS(dimensions);
+        const style = {
+            ...dimensionsStyles,
+        };
+        const marginCSS = marginValueToCSS(margin);
+        if (marginCSS) {
+            style.margin = marginCSS;
+        }
+        const paddingCSS = paddingValueToCSS(customPadding);
+        if (paddingCSS) {
+            style.padding = paddingCSS;
+        }
+        const borderStyles = borderValueToCSS(border);
+        if (borderStyles) {
+            Object.assign(style, borderStyles);
+        }
+        const transformStyles = transformValueToCSS(transform);
+        if (transformStyles) {
+            Object.assign(style, transformStyles);
+        }
+        const alignmentValue = alignment ?? 'center';
+        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" }) }) }) })] }));
+        }
+        // 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 }) })] }));
+    },
+};
+//# sourceMappingURL=Image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/media/Image.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+/**
+ * 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 type { ComponentConfig } from '@measured/puck';
+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';
+export interface ImageProps {
+    image: MediaReference | null;
+    alt: string;
+    aspectRatio: string;
+    link: string;
+    openInNewTab: boolean;
+    margin: PaddingValue | null;
+    border: BorderValue | null;
+    dimensions: DimensionsValue | null;
+    alignment: Alignment | null;
+    transform: TransformValue | null;
+    animation: AnimationValue | null;
+    customPadding: PaddingValue | null;
+    visibility: VisibilityValue | null;
+}
+export declare const ImageConfig: ComponentConfig<ImageProps>;
+//# sourceMappingURL=Image.server.d.ts.map

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

@@ -0,0 +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,gBAAgB,CAAA;AACrD,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"}

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

@@ -0,0 +1,76 @@
+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';
+// Default padding with standard spacing (replaces hardcoded py-4 px-4)
+const DEFAULT_PADDING = {
+    top: 16,
+    right: 16,
+    bottom: 16,
+    left: 16,
+    unit: 'px',
+    linked: true,
+};
+// Simple ID generator for server-side rendering
+let idCounter = 0;
+function generateUniqueId() {
+    return `i${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+const defaultProps = {
+    image: null,
+    alt: '',
+    aspectRatio: 'auto',
+    link: '',
+    openInNewTab: false,
+    margin: null,
+    border: null,
+    dimensions: null,
+    alignment: null,
+    transform: null,
+    animation: null,
+    customPadding: DEFAULT_PADDING, // Default 16px padding
+    visibility: null,
+};
+export const ImageConfig = {
+    label: 'Image',
+    defaultProps,
+    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}`;
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
+        const dimensionsStyles = dimensionsValueToCSS(dimensions);
+        const style = {
+            ...dimensionsStyles,
+        };
+        const marginCSS = marginValueToCSS(margin);
+        if (marginCSS) {
+            style.margin = marginCSS;
+        }
+        const paddingCSS = paddingValueToCSS(customPadding);
+        if (paddingCSS) {
+            style.padding = paddingCSS;
+        }
+        const borderStyles = borderValueToCSS(border);
+        if (borderStyles) {
+            Object.assign(style, borderStyles);
+        }
+        const transformStyles = transformValueToCSS(transform);
+        if (transformStyles) {
+            Object.assign(style, transformStyles);
+        }
+        const alignmentValue = alignment ?? 'center';
+        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" }) }) }) })] }));
+        }
+        // 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 }) })] }));
+    },
+};
+//# sourceMappingURL=Image.server.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.server.js","sourceRoot":"","sources":["../../../src/components/media/Image.server.tsx"],"names":[],"mappings":";AASA,OAAO,EACL,cAAc,EACd,EAAE,EACF,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,GAOrB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAIpD,uEAAuE;AACvE,MAAM,eAAe,GAAiB;IACpC,GAAG,EAAE,EAAE;IACP,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,IAAI;CACb,CAAA;AAED,gDAAgD;AAChD,IAAI,SAAS,GAAG,CAAC,CAAA;AACjB,SAAS,gBAAgB;IACvB,OAAO,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;AAClF,CAAC;AAkBD,MAAM,YAAY,GAAe;IAC/B,KAAK,EAAE,IAAI;IACX,GAAG,EAAE,EAAE;IACP,WAAW,EAAE,MAAM;IACnB,IAAI,EAAE,EAAE;IACR,YAAY,EAAE,KAAK;IACnB,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,aAAa,EAAE,eAAe,EAAE,uBAAuB;IACvD,UAAU,EAAE,IAAI;CACjB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAgC;IACtD,KAAK,EAAE,OAAO;IACd,YAAY;IACZ,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,EAAE;QAClJ,qDAAqD;QACrD,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAA;QACnC,MAAM,YAAY,GAAG,cAAc,QAAQ,EAAE,CAAA;QAE7C,2BAA2B;QAC3B,MAAM,aAAa,GAAG,oBAAoB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAA;QACpE,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAA;QAEzD,MAAM,KAAK,GAAwB;YACjC,GAAG,gBAAgB;SACpB,CAAA;QACD,MAAM,SAAS,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;QAC1C,IAAI,SAAS,EAAE,CAAC;YACd,KAAK,CAAC,MAAM,GAAG,SAAS,CAAA;QAC1B,CAAC;QACD,MAAM,UAAU,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAA;QACnD,IAAI,UAAU,EAAE,CAAC;YACf,KAAK,CAAC,OAAO,GAAG,UAAU,CAAA;QAC5B,CAAC;QACD,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;QAC7C,IAAI,YAAY,EAAE,CAAC;YACjB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;QACpC,CAAC;QACD,MAAM,eAAe,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAA;QACtD,IAAI,eAAe,EAAE,CAAC;YACpB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;QACvC,CAAC;QAED,MAAM,cAAc,GAAG,SAAS,IAAI,QAAQ,CAAA;QAC5C,MAAM,gBAAgB,GAAG,EAAE,CACzB,MAAM,EACN,cAAc,KAAK,MAAM,IAAI,eAAe,EAC5C,cAAc,KAAK,QAAQ,IAAI,gBAAgB,EAC/C,cAAc,KAAK,OAAO,IAAI,aAAa,CAC5C,CAAA;QAED,0BAA0B;QAC1B,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;YAChB,OAAO,CACL,MAAC,eAAe,IAAC,SAAS,EAAE,SAAS,aAClC,aAAa,IAAI,0BAAQ,aAAa,GAAS,EAChD,cAAK,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,YACpF,cAAK,SAAS,EAAE,gBAAgB,YAC9B,cACE,SAAS,EAAE,EAAE,CACX,6GAA6G,EAC7G,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,CAClC,YAED,eAAM,SAAS,EAAC,uBAAuB,kCAAyB,GAC5D,GACF,GACF,IACU,CACnB,CAAA;QACH,CAAC;QAED,sDAAsD;QACtD,kFAAkF;QAClF,yEAAyE;QACzE,MAAM,YAAY,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAC5C,cAAK,SAAS,EAAC,4CAA4C,YAEzD,cACE,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,GAAG,IAAI,KAAK,CAAC,GAAG,IAAI,EAAE,EAC3B,SAAS,EAAC,4BAA4B,GACtC,GACE,CACP,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAE,EAAE,CAAC,4CAA4C,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,YAE3F,cACE,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,GAAG,IAAI,KAAK,CAAC,GAAG,IAAI,EAAE,EAC3B,SAAS,EAAC,6CAA6C,GACvD,GACE,CACP,CAAA;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CACrB,YACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC3C,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EACrD,SAAS,EAAC,2CAA2C,YAEpD,YAAY,GACX,CACL,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CAAA;QAED,OAAO,CACL,MAAC,eAAe,IAAC,SAAS,EAAE,SAAS,aAClC,aAAa,IAAI,0BAAQ,aAAa,GAAS,EAChD,cAAK,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,YACpF,cAAK,SAAS,EAAE,gBAAgB,YAAG,OAAO,GAAO,GAC7C,IACU,CACnB,CAAA;IACH,CAAC;CACF,CAAA"}

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

@@ -0,0 +1,7 @@
+/**
+ * Media Components
+ *
+ * Image and media display components.
+ */
+export { ImageConfig } from './Image';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}