@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/components/layout/Section.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Section Component - Puck Configuration
+ *
+ * Full-width section with two-layer architecture:
+ * - Section layer (outer): Full-bleed background, border, padding, margin
+ * - Content layer (inner): Constrained content area with max-width, background, border, padding
+ *
+ * This design enables common patterns like hero sections with full-bleed backgrounds
+ * but centered content.
+ *
+ * Responsive Controls:
+ * - contentDimensions: Different max-width/min-height at different breakpoints
+ * - sectionPadding: Different section padding at different breakpoints
+ * - contentPadding: Different content padding at different breakpoints
+ * - sectionMargin: Different margins at different breakpoints
+ * - visibility: Show/hide at different breakpoints
+ */
+import { useId } from 'react';
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
+import { AnimatedWrapper } from '../AnimatedWrapper';
+import { createPaddingField } from '../../fields/PaddingField';
+import { createBorderField } from '../../fields/BorderField';
+import { createDimensionsField } from '../../fields/DimensionsField';
+import { createMarginField } from '../../fields/MarginField';
+import { createResetField } from '../../fields/ResetField';
+import { createBackgroundField } from '../../fields/BackgroundField';
+import { createAnimationField } from '../../fields/AnimationField';
+import { createResponsiveField } from '../../fields/ResponsiveField';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+// Default padding (none)
+const DEFAULT_PADDING = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    unit: 'px',
+    linked: true,
+};
+// Default content dimensions - 1200px max-width centered
+const DEFAULT_CONTENT_DIMENSIONS = {
+    mode: 'contained',
+    alignment: 'center',
+    maxWidth: { value: 1200, unit: 'px', enabled: true },
+};
+// Default content padding with standard horizontal spacing
+const DEFAULT_CONTENT_PADDING = {
+    top: 0,
+    right: 16,
+    bottom: 0,
+    left: 16,
+    unit: 'px',
+    linked: false,
+};
+const defaultProps = {
+    id: '',
+    content: [],
+    // Section layer defaults
+    sectionBackground: null,
+    sectionBorder: null,
+    sectionPadding: null,
+    sectionMargin: null,
+    // Content layer defaults - 1200px max-width so two-layer design is immediately visible
+    contentDimensions: { xs: DEFAULT_CONTENT_DIMENSIONS },
+    contentBackground: null,
+    contentBorder: null,
+    contentPadding: { xs: DEFAULT_CONTENT_PADDING },
+    // Other
+    animation: null,
+    visibility: null,
+};
+export const SectionConfig = {
+    label: 'Section',
+    fields: {
+        _reset: createResetField({ defaultProps }),
+        // Visibility first
+        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        // Section ID for anchors
+        id: {
+            type: 'text',
+            label: 'Section ID',
+        },
+        content: {
+            type: 'slot',
+        },
+        // Section layer (outer)
+        sectionBackground: createBackgroundField({ label: 'Section Background' }),
+        sectionBorder: createBorderField({ label: 'Section Border' }),
+        sectionPadding: createResponsiveField({
+            label: 'Section Padding',
+            innerField: (config) => createPaddingField(config),
+            defaultValue: DEFAULT_PADDING,
+        }),
+        sectionMargin: createResponsiveField({
+            label: 'Section Margin',
+            innerField: (config) => createMarginField(config),
+            defaultValue: DEFAULT_PADDING,
+        }),
+        // Content layer (inner)
+        contentDimensions: createResponsiveField({
+            label: 'Content Dimensions',
+            innerField: (config) => createDimensionsField(config),
+            defaultValue: DEFAULT_CONTENT_DIMENSIONS,
+        }),
+        contentBackground: createBackgroundField({ label: 'Content Background' }),
+        contentBorder: createBorderField({ label: 'Content Border' }),
+        contentPadding: createResponsiveField({
+            label: 'Content Padding',
+            innerField: (config) => createPaddingField(config),
+            defaultValue: DEFAULT_PADDING,
+        }),
+        // Animation
+        animation: createAnimationField({ label: 'Animation' }),
+    },
+    defaultProps,
+    render: ({ id, content: Content, sectionBackground, sectionBorder, sectionPadding, sectionMargin, contentDimensions, contentBackground, contentBorder, contentPadding, animation, visibility, }) => {
+        // Generate unique IDs for CSS targeting
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const uniqueId = useId().replace(/:/g, '');
+        const sectionClass = `puck-section-${uniqueId}`;
+        const contentClass = `puck-section-content-${uniqueId}`;
+        // Collect all media query CSS
+        const mediaQueries = [];
+        // === Section layer styles (outer, full-width) ===
+        const sectionBackgroundStyles = backgroundValueToCSS(sectionBackground);
+        const sectionStyles = {
+            ...sectionBackgroundStyles,
+        };
+        // Section border
+        const sectionBorderStyles = borderValueToCSS(sectionBorder);
+        if (sectionBorderStyles) {
+            Object.assign(sectionStyles, sectionBorderStyles);
+        }
+        // Section padding with responsive support
+        const sectionPaddingResult = responsiveValueToCSS(sectionPadding, (v) => ({ padding: paddingValueToCSS(v) }), sectionClass);
+        Object.assign(sectionStyles, sectionPaddingResult.baseStyles);
+        if (sectionPaddingResult.mediaQueryCSS) {
+            mediaQueries.push(sectionPaddingResult.mediaQueryCSS);
+        }
+        // Section margin with responsive support
+        const sectionMarginResult = responsiveValueToCSS(sectionMargin, (v) => ({ margin: marginValueToCSS(v) }), sectionClass);
+        Object.assign(sectionStyles, sectionMarginResult.baseStyles);
+        if (sectionMarginResult.mediaQueryCSS) {
+            mediaQueries.push(sectionMarginResult.mediaQueryCSS);
+        }
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, sectionClass);
+        if (visibilityCSS) {
+            mediaQueries.push(visibilityCSS);
+        }
+        // === Content layer styles (inner, constrained) ===
+        const contentBackgroundStyles = backgroundValueToCSS(contentBackground);
+        const contentStyles = {
+            ...contentBackgroundStyles,
+        };
+        // Content dimensions with responsive support
+        const contentDimensionsResult = responsiveValueToCSS(contentDimensions, dimensionsValueToCSS, contentClass);
+        Object.assign(contentStyles, contentDimensionsResult.baseStyles);
+        if (contentDimensionsResult.mediaQueryCSS) {
+            mediaQueries.push(contentDimensionsResult.mediaQueryCSS);
+        }
+        // Check if minHeight is set - if so, we need flex layout to make slot expand
+        const hasMinHeight = (() => {
+            if (!contentDimensions)
+                return false;
+            // Check if it's a responsive value
+            if (typeof contentDimensions === 'object' && 'xs' in contentDimensions) {
+                const responsiveDims = contentDimensions;
+                return Object.values(responsiveDims).some((v) => {
+                    if (!v || typeof v !== 'object')
+                        return false;
+                    const dim = v;
+                    return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+                });
+            }
+            // Non-responsive value
+            const dim = contentDimensions;
+            return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+        })();
+        // Add flex layout when minHeight is set to make content stretch
+        if (hasMinHeight) {
+            contentStyles.display = 'flex';
+            contentStyles.flexDirection = 'column';
+        }
+        // Content border
+        const contentBorderStyles = borderValueToCSS(contentBorder);
+        if (contentBorderStyles) {
+            Object.assign(contentStyles, contentBorderStyles);
+        }
+        // Content padding with responsive support
+        const contentPaddingResult = responsiveValueToCSS(contentPadding, (v) => ({ padding: paddingValueToCSS(v) }), contentClass);
+        Object.assign(contentStyles, contentPaddingResult.baseStyles);
+        if (contentPaddingResult.mediaQueryCSS) {
+            mediaQueries.push(contentPaddingResult.mediaQueryCSS);
+        }
+        const sectionClasses = cn('relative w-full', sectionClass);
+        const contentClasses = cn('relative z-10', contentClass);
+        // Check if we have any content styling
+        const hasContentStyles = Object.keys(contentStyles).length > 0;
+        // Combine all media queries
+        const allMediaQueryCSS = mediaQueries.join('\n');
+        // When minHeight is set, wrap Content to ensure slot expands
+        const renderContent = () => {
+            if (hasMinHeight) {
+                return (_jsx("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }, children: _jsx(Content, { style: { flex: 1 } }) }));
+            }
+            return _jsx(Content, {});
+        };
+        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx("section", { id: id || undefined, className: sectionClasses, style: sectionStyles, children: hasContentStyles ? (_jsx("div", { className: contentClasses, style: contentStyles, children: renderContent() })) : (_jsx(Content, { className: contentClasses })) })] }));
+    },
+};
+//# sourceMappingURL=Section.js.map

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

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

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

@@ -0,0 +1,35 @@
+/**
+ * Section Component - Server-safe Puck Configuration
+ *
+ * Full-width section with two-layer architecture:
+ * - Section layer (outer): Full-bleed background, border, padding, margin
+ * - Content layer (inner): Constrained content area with max-width, background, border, padding
+ *
+ * This is a server-safe version with minimal fields (only slot for content).
+ * For the full editor version with fields, use Section.tsx
+ *
+ * Responsive Controls:
+ * - contentDimensions: Different max-width/min-height at different breakpoints
+ * - sectionPadding: Different section padding at different breakpoints
+ * - contentPadding: Different content padding at different breakpoints
+ * - sectionMargin: Different margins at different breakpoints
+ * - visibility: Show/hide at different breakpoints
+ */
+import type { ComponentConfig } from '@measured/puck';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+export interface SectionProps {
+    id: string;
+    content: unknown;
+    sectionBackground: BackgroundValue | null;
+    sectionBorder: BorderValue | null;
+    sectionPadding: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    sectionMargin: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    contentDimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null;
+    contentBackground: BackgroundValue | null;
+    contentBorder: BorderValue | null;
+    contentPadding: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    animation: AnimationValue | null;
+    visibility: VisibilityValue | null;
+}
+export declare const SectionConfig: ComponentConfig;
+//# sourceMappingURL=Section.server.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.server.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Section.server.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EASL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AA0B5B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,OAAO,CAAA;IAEhB,iBAAiB,EAAE,eAAe,GAAG,IAAI,CAAA;IACzC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,cAAc,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IACnE,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAElE,iBAAiB,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IAC5E,iBAAiB,EAAE,eAAe,GAAG,IAAI,CAAA;IACzC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,cAAc,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAEnE,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAoBD,eAAO,MAAM,aAAa,EAAE,eAwK3B,CAAA"}

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

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
+import { AnimatedWrapper } from '../AnimatedWrapper';
+// Simple ID generator for server-side rendering
+let idCounter = 0;
+function generateUniqueId() {
+    return `s${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+// Default content dimensions - 1200px max-width centered
+const DEFAULT_CONTENT_DIMENSIONS = {
+    mode: 'contained',
+    alignment: 'center',
+    maxWidth: { value: 1200, unit: 'px', enabled: true },
+};
+// Default content padding with standard horizontal spacing
+const DEFAULT_CONTENT_PADDING = {
+    top: 0,
+    right: 16,
+    bottom: 0,
+    left: 16,
+    unit: 'px',
+    linked: false,
+};
+const defaultProps = {
+    id: '',
+    content: [],
+    // Section layer defaults
+    sectionBackground: null,
+    sectionBorder: null,
+    sectionPadding: null,
+    sectionMargin: null,
+    // Content layer defaults - 1200px max-width so two-layer design is immediately visible
+    contentDimensions: { xs: DEFAULT_CONTENT_DIMENSIONS },
+    contentBackground: null,
+    contentBorder: null,
+    contentPadding: { xs: DEFAULT_CONTENT_PADDING },
+    // Other
+    animation: null,
+    visibility: null,
+};
+export const SectionConfig = {
+    label: 'Section',
+    fields: {
+        content: { type: 'slot' },
+    },
+    defaultProps,
+    render: ({ id, content: Content, sectionBackground, sectionBorder, sectionPadding, sectionMargin, contentDimensions, contentBackground, contentBorder, contentPadding, animation, visibility, }) => {
+        // Generate unique IDs for CSS targeting (server-safe)
+        const uniqueId = generateUniqueId();
+        const sectionClass = `puck-section-${uniqueId}`;
+        const contentClass = `puck-section-content-${uniqueId}`;
+        // Collect all media query CSS
+        const mediaQueries = [];
+        // === Section layer styles (outer, full-width) ===
+        const sectionBackgroundStyles = backgroundValueToCSS(sectionBackground);
+        const sectionStyles = {
+            ...sectionBackgroundStyles,
+        };
+        // Section border
+        const sectionBorderStyles = borderValueToCSS(sectionBorder);
+        if (sectionBorderStyles) {
+            Object.assign(sectionStyles, sectionBorderStyles);
+        }
+        // Section padding with responsive support
+        const sectionPaddingResult = responsiveValueToCSS(sectionPadding, (v) => ({ padding: paddingValueToCSS(v) }), sectionClass);
+        Object.assign(sectionStyles, sectionPaddingResult.baseStyles);
+        if (sectionPaddingResult.mediaQueryCSS) {
+            mediaQueries.push(sectionPaddingResult.mediaQueryCSS);
+        }
+        // Section margin with responsive support
+        const sectionMarginResult = responsiveValueToCSS(sectionMargin, (v) => ({ margin: marginValueToCSS(v) }), sectionClass);
+        Object.assign(sectionStyles, sectionMarginResult.baseStyles);
+        if (sectionMarginResult.mediaQueryCSS) {
+            mediaQueries.push(sectionMarginResult.mediaQueryCSS);
+        }
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, sectionClass);
+        if (visibilityCSS) {
+            mediaQueries.push(visibilityCSS);
+        }
+        // === Content layer styles (inner, constrained) ===
+        const contentBackgroundStyles = backgroundValueToCSS(contentBackground);
+        const contentStyles = {
+            ...contentBackgroundStyles,
+        };
+        // Content dimensions with responsive support
+        const contentDimensionsResult = responsiveValueToCSS(contentDimensions, dimensionsValueToCSS, contentClass);
+        Object.assign(contentStyles, contentDimensionsResult.baseStyles);
+        if (contentDimensionsResult.mediaQueryCSS) {
+            mediaQueries.push(contentDimensionsResult.mediaQueryCSS);
+        }
+        // Check if minHeight is set - if so, we need flex layout to make slot expand
+        const hasMinHeight = (() => {
+            if (!contentDimensions)
+                return false;
+            // Check if it's a responsive value
+            if (typeof contentDimensions === 'object' && 'xs' in contentDimensions) {
+                const responsiveDims = contentDimensions;
+                return Object.values(responsiveDims).some((v) => {
+                    if (!v || typeof v !== 'object')
+                        return false;
+                    const dim = v;
+                    return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+                });
+            }
+            // Non-responsive value
+            const dim = contentDimensions;
+            return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+        })();
+        // Add flex layout when minHeight is set to make content stretch
+        if (hasMinHeight) {
+            contentStyles.display = 'flex';
+            contentStyles.flexDirection = 'column';
+        }
+        // Content border
+        const contentBorderStyles = borderValueToCSS(contentBorder);
+        if (contentBorderStyles) {
+            Object.assign(contentStyles, contentBorderStyles);
+        }
+        // Content padding with responsive support
+        const contentPaddingResult = responsiveValueToCSS(contentPadding, (v) => ({ padding: paddingValueToCSS(v) }), contentClass);
+        Object.assign(contentStyles, contentPaddingResult.baseStyles);
+        if (contentPaddingResult.mediaQueryCSS) {
+            mediaQueries.push(contentPaddingResult.mediaQueryCSS);
+        }
+        const sectionClasses = cn('relative w-full', sectionClass);
+        const contentClasses = cn('relative z-10', contentClass);
+        // Check if we have any content styling
+        const hasContentStyles = Object.keys(contentStyles).length > 0;
+        // Combine all media queries
+        const allMediaQueryCSS = mediaQueries.join('\n');
+        // Type assertion for Puck slot content
+        const ContentSlot = Content;
+        // When minHeight is set, wrap Content to ensure slot expands
+        const renderContent = () => {
+            if (hasMinHeight) {
+                return (_jsx("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }, children: _jsx(ContentSlot, { style: { flex: 1 } }) }));
+            }
+            return _jsx(ContentSlot, {});
+        };
+        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx("section", { id: id || undefined, className: sectionClasses, style: sectionStyles, children: hasContentStyles ? (_jsx("div", { className: contentClasses, style: contentStyles, children: renderContent() })) : (_jsx(ContentSlot, { className: contentClasses })) })] }));
+    },
+};
+//# sourceMappingURL=Section.server.js.map

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

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

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

@@ -0,0 +1,18 @@
+/**
+ * Spacer Component - Puck Configuration
+ *
+ * Simple spacing component for adding vertical or horizontal space.
+ * Uses Tailwind classes for layout and sizing from predefined options.
+ *
+ * Responsive Controls:
+ * - visibility: Show/hide at different breakpoints
+ */
+import type { ComponentConfig } from '@measured/puck';
+import { type VisibilityValue } from '../../fields/shared';
+export interface SpacerProps {
+    size: string;
+    direction: 'vertical' | 'horizontal' | 'both';
+    visibility: VisibilityValue | null;
+}
+export declare const SpacerConfig: ComponentConfig;
+//# sourceMappingURL=Spacer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Spacer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAA4B,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAA;AA0CpF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAC7C,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAQD,eAAO,MAAM,YAAY,EAAE,eAoD1B,CAAA"}

package/dist/components/layout/Spacer.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Spacer Component - Puck Configuration
+ *
+ * Simple spacing component for adding vertical or horizontal space.
+ * Uses Tailwind classes for layout and sizing from predefined options.
+ *
+ * Responsive Controls:
+ * - visibility: Show/hide at different breakpoints
+ */
+import { useId } from 'react';
+import { cn, visibilityValueToCSS } from '../../fields/shared';
+import { createResetField } from '../../fields/ResetField';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+const spacingOptions = [
+    { label: '8px', value: '8px' },
+    { label: '16px', value: '16px' },
+    { label: '24px', value: '24px' },
+    { label: '32px', value: '32px' },
+    { label: '48px', value: '48px' },
+    { label: '64px', value: '64px' },
+    { label: '80px', value: '80px' },
+    { label: '96px', value: '96px' },
+    { label: '128px', value: '128px' },
+];
+// Tailwind height classes for predefined spacing options
+const heightMap = {
+    '8px': 'h-2',
+    '16px': 'h-4',
+    '24px': 'h-6',
+    '32px': 'h-8',
+    '48px': 'h-12',
+    '64px': 'h-16',
+    '80px': 'h-20',
+    '96px': 'h-24',
+    '128px': 'h-32',
+};
+// Tailwind width classes for predefined spacing options
+const widthMap = {
+    '8px': 'w-2',
+    '16px': 'w-4',
+    '24px': 'w-6',
+    '32px': 'w-8',
+    '48px': 'w-12',
+    '64px': 'w-16',
+    '80px': 'w-20',
+    '96px': 'w-24',
+    '128px': 'w-32',
+};
+const defaultProps = {
+    size: '24px',
+    direction: 'vertical',
+    visibility: null,
+};
+export const SpacerConfig = {
+    label: 'Spacer',
+    fields: {
+        _reset: createResetField({ defaultProps }),
+        // Responsive visibility control
+        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        size: {
+            type: 'select',
+            label: 'Size',
+            options: spacingOptions,
+        },
+        direction: {
+            type: 'radio',
+            label: 'Direction',
+            options: [
+                { label: 'Vertical', value: 'vertical' },
+                { label: 'Horizontal', value: 'horizontal' },
+                { label: 'Both', value: 'both' },
+            ],
+        },
+    },
+    defaultProps,
+    render: ({ size, direction, visibility }) => {
+        // Generate unique ID for CSS targeting
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const uniqueId = useId().replace(/:/g, '');
+        const wrapperClass = `puck-spacer-${uniqueId}`;
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
+        const getClasses = () => {
+            const heightClass = heightMap[size] || 'h-6';
+            const widthClass = widthMap[size] || 'w-6';
+            if (direction === 'vertical') {
+                return `block ${heightClass} w-full`;
+            }
+            if (direction === 'horizontal') {
+                return `inline-block ${widthClass} h-full`;
+            }
+            // both
+            return `block ${heightClass} ${widthClass}`;
+        };
+        return (_jsxs(_Fragment, { children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: cn(getClasses(), wrapperClass), "aria-hidden": "true" })] }));
+    },
+};
+//# sourceMappingURL=Spacer.js.map

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

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

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

@@ -0,0 +1,21 @@
+/**
+ * Spacer Component - Server-safe Puck Configuration
+ *
+ * Simple spacing component for adding vertical or horizontal space.
+ * Uses Tailwind classes for layout and sizing from predefined options.
+ *
+ * This is a server-safe version with NO fields property.
+ * For the full editor version with fields, use Spacer.tsx
+ *
+ * Responsive Controls:
+ * - visibility: Show/hide at different breakpoints
+ */
+import type { ComponentConfig } from '@measured/puck';
+import { type VisibilityValue } from '../../fields/shared';
+export interface SpacerProps {
+    size: string;
+    direction: 'vertical' | 'horizontal' | 'both';
+    visibility: VisibilityValue | null;
+}
+export declare const SpacerConfig: ComponentConfig<SpacerProps>;
+//# sourceMappingURL=Spacer.server.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.server.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Spacer.server.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAA4B,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAkCpF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAC7C,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAQD,eAAO,MAAM,YAAY,EAAE,eAAe,CAAC,WAAW,CAgCrD,CAAA"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, visibilityValueToCSS } from '../../fields/shared';
+// Simple ID generator for server-side rendering
+let idCounter = 0;
+function generateUniqueId() {
+    return `sp${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+// Tailwind height classes for predefined spacing options
+const heightMap = {
+    '8px': 'h-2',
+    '16px': 'h-4',
+    '24px': 'h-6',
+    '32px': 'h-8',
+    '48px': 'h-12',
+    '64px': 'h-16',
+    '80px': 'h-20',
+    '96px': 'h-24',
+    '128px': 'h-32',
+};
+// Tailwind width classes for predefined spacing options
+const widthMap = {
+    '8px': 'w-2',
+    '16px': 'w-4',
+    '24px': 'w-6',
+    '32px': 'w-8',
+    '48px': 'w-12',
+    '64px': 'w-16',
+    '80px': 'w-20',
+    '96px': 'w-24',
+    '128px': 'w-32',
+};
+const defaultProps = {
+    size: '24px',
+    direction: 'vertical',
+    visibility: null,
+};
+export const SpacerConfig = {
+    label: 'Spacer',
+    defaultProps,
+    render: ({ size, direction, visibility }) => {
+        // Generate unique ID for CSS targeting (server-safe)
+        const uniqueId = generateUniqueId();
+        const wrapperClass = `puck-spacer-${uniqueId}`;
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
+        const getClasses = () => {
+            const heightClass = heightMap[size] || 'h-6';
+            const widthClass = widthMap[size] || 'w-6';
+            if (direction === 'vertical') {
+                return `block ${heightClass} w-full`;
+            }
+            if (direction === 'horizontal') {
+                return `inline-block ${widthClass} h-full`;
+            }
+            // both
+            return `block ${heightClass} ${widthClass}`;
+        };
+        return (_jsxs(_Fragment, { children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: cn(getClasses(), wrapperClass), "aria-hidden": "true" })] }));
+    },
+};
+//# sourceMappingURL=Spacer.server.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.server.js","sourceRoot":"","sources":["../../../src/components/layout/Spacer.server.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,EAAE,EAAE,oBAAoB,EAAwB,MAAM,qBAAqB,CAAA;AAEpF,gDAAgD;AAChD,IAAI,SAAS,GAAG,CAAC,CAAA;AACjB,SAAS,gBAAgB;IACvB,OAAO,KAAK,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;AACnF,CAAC;AAED,yDAAyD;AACzD,MAAM,SAAS,GAA2B;IACxC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,wDAAwD;AACxD,MAAM,QAAQ,GAA2B;IACvC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;CAChB,CAAA;AAQD,MAAM,YAAY,GAAgB;IAChC,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE,IAAI;CACjB,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAiC;IACxD,KAAK,EAAE,QAAQ;IACf,YAAY;IACZ,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE;QAC1C,qDAAqD;QACrD,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAA;QACnC,MAAM,YAAY,GAAG,eAAe,QAAQ,EAAE,CAAA;QAE9C,2BAA2B;QAC3B,MAAM,aAAa,GAAG,oBAAoB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAA;QAEpE,MAAM,UAAU,GAAG,GAAW,EAAE;YAC9B,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,KAAK,CAAA;YAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,KAAK,CAAA;YAE1C,IAAI,SAAS,KAAK,UAAU,EAAE,CAAC;gBAC7B,OAAO,SAAS,WAAW,SAAS,CAAA;YACtC,CAAC;YACD,IAAI,SAAS,KAAK,YAAY,EAAE,CAAC;gBAC/B,OAAO,gBAAgB,UAAU,SAAS,CAAA;YAC5C,CAAC;YACD,OAAO;YACP,OAAO,SAAS,WAAW,IAAI,UAAU,EAAE,CAAA;QAC7C,CAAC,CAAA;QAED,OAAO,CACL,8BACG,aAAa,IAAI,0BAAQ,aAAa,GAAS,EAChD,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,EAAE,YAAY,CAAC,iBAAc,MAAM,GAAG,IACpE,CACJ,CAAA;IACH,CAAC;CACF,CAAA"}