@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/SizeField.js

@@ -5,24 +5,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Provides preset size options (sm, default, lg) with a "custom" mode
  * that reveals detailed controls for height, padding, and font size.
- */
-import { useCallback, memo } from 'react';
+ */ import React, { useCallback, memo } from 'react';
 import { X } from 'lucide-react';
 // Re-export types and utilities from shared.ts for backward compatibility
 // These are defined in shared.ts to be server-safe
-export { sizeValueToCSS, getSizeClasses, } from './shared';
+export { sizeValueToCSS, getSizeClasses } from './shared.js';
 // =============================================================================
 // Default Values
 // =============================================================================
 const DEFAULT_VALUE = {
-    mode: 'default',
+    mode: 'default'
 };
 const CUSTOM_DEFAULTS = {
     height: 40,
     paddingX: 16,
     paddingY: 8,
     fontSize: 14,
-    unit: 'px',
+    unit: 'px'
 };
 // =============================================================================
 // Styles
@@ -31,17 +30,17 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '12px',
+        gap: '12px'
     },
     header: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
     },
     label: {
         fontSize: '14px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     clearButton: {
         display: 'flex',
@@ -54,12 +53,12 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonGroup: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '4px',
+        gap: '4px'
     },
     button: {
         display: 'inline-flex',
@@ -71,7 +70,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonActive: {
         display: 'inline-flex',
@@ -83,7 +82,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     customPanel: {
         display: 'flex',
@@ -92,23 +91,23 @@ const styles = {
         padding: '12px',
         backgroundColor: 'var(--theme-elevation-50)',
         borderRadius: '6px',
-        overflow: 'hidden',
+        overflow: 'hidden'
     },
     unitRow: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     unitLabel: {
         fontSize: '10px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         color: 'var(--theme-elevation-500)',
-        flexShrink: 0,
+        flexShrink: 0
     },
     unitButtons: {
         display: 'flex',
-        gap: '4px',
+        gap: '4px'
     },
     unitButton: {
         height: '28px',
@@ -119,7 +118,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     unitButtonActive: {
         height: '28px',
@@ -130,24 +129,24 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     inputGrid: {
         display: 'grid',
         gridTemplateColumns: '1fr 1fr',
-        gap: '8px',
+        gap: '8px'
     },
     inputGroup: {
         display: 'flex',
         flexDirection: 'column',
         gap: '4px',
-        minWidth: 0,
+        minWidth: 0
     },
     inputLabel: {
         fontSize: '10px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     input: {
         width: '100%',
@@ -160,70 +159,243 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-input-bg)',
         color: 'var(--theme-elevation-800)',
-        boxSizing: 'border-box',
+        boxSizing: 'border-box'
     },
     summary: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
         fontFamily: 'monospace',
         paddingTop: '4px',
-        borderTop: '1px solid var(--theme-elevation-100)',
-    },
+        borderTop: '1px solid var(--theme-elevation-100)'
+    }
 };
 // =============================================================================
 // SizeField Component
 // =============================================================================
-function SizeFieldInner({ value, onChange, label = 'Size', readOnly, showHeight = true, showFontSize = true, }) {
+function SizeFieldInner({ value, onChange, label = 'Size', readOnly, showHeight = true, showFontSize = true }) {
     const currentValue = value || DEFAULT_VALUE;
-    const handleModeChange = useCallback((mode) => {
+    const handleModeChange = useCallback((mode)=>{
         if (mode === 'custom') {
             onChange({
                 mode,
-                ...CUSTOM_DEFAULTS,
+                ...CUSTOM_DEFAULTS
+            });
+        } else {
+            onChange({
+                mode
             });
         }
-        else {
-            onChange({ mode });
-        }
-    }, [onChange]);
-    const handleValueChange = useCallback((field, val) => {
+    }, [
+        onChange
+    ]);
+    const handleValueChange = useCallback((field, val)=>{
         onChange({
             ...currentValue,
-            [field]: val,
+            [field]: val
         });
-    }, [currentValue, onChange]);
-    const handleUnitChange = useCallback((unit) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleUnitChange = useCallback((unit)=>{
         onChange({
             ...currentValue,
-            unit,
+            unit
         });
-    }, [currentValue, onChange]);
-    const handleClear = useCallback(() => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleClear = useCallback(()=>{
         onChange(null);
-    }, [onChange]);
+    }, [
+        onChange
+    ]);
     const presets = [
-        { mode: 'sm', label: 'SM' },
-        { mode: 'default', label: 'Default' },
-        { mode: 'lg', label: 'LG' },
-        { mode: 'custom', label: 'Custom' },
+        {
+            mode: 'sm',
+            label: 'SM'
+        },
+        {
+            mode: 'default',
+            label: 'Default'
+        },
+        {
+            mode: 'lg',
+            label: 'LG'
+        },
+        {
+            mode: 'custom',
+            label: 'Custom'
+        }
     ];
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsx("label", { style: styles.label, children: label }), value && !readOnly && (_jsx("button", { type: "button", onClick: handleClear, style: styles.clearButton, title: "Reset to default", children: _jsx(X, { style: { width: '16px', height: '16px' } }) }))] }), _jsx("div", { style: styles.buttonGroup, children: presets.map(({ mode, label: modeLabel }) => {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.header,
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        style: styles.label,
+                        children: label
+                    }),
+                    value && !readOnly && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleClear,
+                        style: styles.clearButton,
+                        title: "Reset to default",
+                        children: /*#__PURE__*/ _jsx(X, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.buttonGroup,
+                children: presets.map(({ mode, label: modeLabel })=>{
                     const isActive = currentValue.mode === mode;
-                    return (_jsx("button", { type: "button", onClick: () => handleModeChange(mode), disabled: readOnly, style: isActive ? styles.buttonActive : styles.button, children: modeLabel }, mode));
-                }) }), currentValue.mode === 'custom' && (_jsxs("div", { style: styles.customPanel, children: [_jsxs("div", { style: styles.unitRow, children: [_jsx("label", { style: styles.unitLabel, children: "Unit:" }), _jsx("div", { style: styles.unitButtons, children: ['px', 'rem'].map((unit) => {
+                    return /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>handleModeChange(mode),
+                        disabled: readOnly,
+                        style: isActive ? styles.buttonActive : styles.button,
+                        children: modeLabel
+                    }, mode);
+                })
+            }),
+            currentValue.mode === 'custom' && /*#__PURE__*/ _jsxs("div", {
+                style: styles.customPanel,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.unitRow,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.unitLabel,
+                                children: "Unit:"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: styles.unitButtons,
+                                children: [
+                                    'px',
+                                    'rem'
+                                ].map((unit)=>{
                                     const isActive = (currentValue.unit || 'px') === unit;
-                                    return (_jsx("button", { type: "button", onClick: () => handleUnitChange(unit), disabled: readOnly, style: isActive ? styles.unitButtonActive : styles.unitButton, children: unit }, unit));
-                                }) })] }), _jsxs("div", { style: styles.inputGrid, children: [showHeight && (_jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Height" }), _jsx("input", { type: "number", min: 0, value: currentValue.height ?? CUSTOM_DEFAULTS.height, onChange: (e) => handleValueChange('height', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] })), showFontSize && (_jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Font Size" }), _jsx("input", { type: "number", min: 0, value: currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize, onChange: (e) => handleValueChange('fontSize', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] })), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Padding X" }), _jsx("input", { type: "number", min: 0, value: currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX, onChange: (e) => handleValueChange('paddingX', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Padding Y" }), _jsx("input", { type: "number", min: 0, value: currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY, onChange: (e) => handleValueChange('paddingY', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] })] }), _jsxs("div", { style: styles.summary, children: [showHeight && `h: ${currentValue.height ?? CUSTOM_DEFAULTS.height}${currentValue.unit || 'px'}`, showHeight && ' | ', `p: ${currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY}${currentValue.unit || 'px'} ${currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX}${currentValue.unit || 'px'}`, showFontSize && ` | font: ${currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize}${currentValue.unit || 'px'}`] })] }))] }));
+                                    return /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handleUnitChange(unit),
+                                        disabled: readOnly,
+                                        style: isActive ? styles.unitButtonActive : styles.unitButton,
+                                        children: unit
+                                    }, unit);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.inputGrid,
+                        children: [
+                            showHeight && /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "Height"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.height ?? CUSTOM_DEFAULTS.height,
+                                        onChange: (e)=>handleValueChange('height', parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            }),
+                            showFontSize && /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "Font Size"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize,
+                                        onChange: (e)=>handleValueChange('fontSize', parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "Padding X"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX,
+                                        onChange: (e)=>handleValueChange('paddingX', parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "Padding Y"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY,
+                                        onChange: (e)=>handleValueChange('paddingY', parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.summary,
+                        children: [
+                            showHeight && `h: ${currentValue.height ?? CUSTOM_DEFAULTS.height}${currentValue.unit || 'px'}`,
+                            showHeight && ' | ',
+                            `p: ${currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY}${currentValue.unit || 'px'} ${currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX}${currentValue.unit || 'px'}`,
+                            showFontSize && ` | font: ${currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize}${currentValue.unit || 'px'}`
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 }
-export const SizeField = memo(SizeFieldInner);
+export const SizeField = /*#__PURE__*/ memo(SizeFieldInner);
 /**
  * Creates a Puck field configuration for size control
- */
-export function createSizeField(config = {}) {
+ */ export function createSizeField(config = {}) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(SizeField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly, showHeight: config.showHeight, showFontSize: config.showFontSize })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(SizeField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly,
+                showHeight: config.showHeight,
+                showFontSize: config.showFontSize
+            })
     };
 }
-//# sourceMappingURL=SizeField.js.map

package/dist/fields/SlugPreviewField.d.ts

@@ -1,10 +1,17 @@
+/**
+ * SlugPreviewField - Custom Puck field for displaying the computed slug
+ *
+ * Read-only field that shows the auto-generated URL slug.
+ * When page-tree is enabled, slug = folderPath + '/' + pageSegment
+ */
+import React from 'react';
 import type { CustomField } from '@puckeditor/core';
 interface SlugPreviewFieldProps {
     value: string;
     label?: string;
     hint?: string;
 }
-export declare function SlugPreviewField({ value, label, hint, }: SlugPreviewFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function SlugPreviewField({ value, label, hint, }: SlugPreviewFieldProps): React.JSX.Element;
 /**
  * Creates a Puck field configuration for slug preview
  */
@@ -13,4 +20,3 @@ export declare function createSlugPreviewField(config?: {
     hint?: string;
 }): CustomField<string>;
 export {};
-//# sourceMappingURL=SlugPreviewField.d.ts.map

package/dist/fields/SlugPreviewField.js

@@ -1,49 +1,96 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SlugPreviewField - Custom Puck field for displaying the computed slug
+ *
+ * Read-only field that shows the auto-generated URL slug.
+ * When page-tree is enabled, slug = folderPath + '/' + pageSegment
+ */ import React from 'react';
 import { Link, Lock } from 'lucide-react';
 // =============================================================================
 // SlugPreviewField Component
 // =============================================================================
-export function SlugPreviewField({ value, label = 'URL Slug', hint = 'Auto-generated from folder + page segment', }) {
-    const displayValue = value ? (value.startsWith('/') ? value : `/${value}`) : '/';
-    return (_jsxs("div", { className: "puck-field", children: [_jsxs("div", { style: {
+export function SlugPreviewField({ value, label = 'URL Slug', hint = 'Auto-generated from folder + page segment' }) {
+    const displayValue = value ? value.startsWith('/') ? value : `/${value}` : '/';
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                    marginBottom: '8px',
-                }, children: [_jsx("label", { style: {
+                    marginBottom: '8px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        style: {
                             fontSize: '14px',
                             fontWeight: 500,
-                            color: 'var(--puck-color-grey-04)',
-                        }, children: label }), _jsx(Lock, { size: 14, style: { color: 'var(--puck-color-grey-06)' } })] }), _jsxs("div", { style: {
+                            color: 'var(--puck-color-grey-04)'
+                        },
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx(Lock, {
+                        size: 14,
+                        style: {
+                            color: 'var(--puck-color-grey-06)'
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
                     display: 'flex',
                     alignItems: 'center',
                     padding: '8px 12px',
                     backgroundColor: 'var(--puck-color-grey-11)',
                     border: '1px solid var(--puck-color-grey-09)',
-                    borderRadius: '6px',
-                }, children: [_jsx(Link, { size: 14, style: { marginRight: '8px', color: 'var(--puck-color-grey-06)' } }), _jsx("span", { style: {
+                    borderRadius: '6px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Link, {
+                        size: 14,
+                        style: {
+                            marginRight: '8px',
+                            color: 'var(--puck-color-grey-06)'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
                             fontSize: '14px',
                             color: 'var(--puck-color-grey-05)',
                             fontFamily: 'var(--font-mono, monospace)',
-                            wordBreak: 'break-all',
-                        }, children: displayValue })] }), _jsx("p", { style: {
+                            wordBreak: 'break-all'
+                        },
+                        children: displayValue
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
                     marginTop: '6px',
                     fontSize: '12px',
-                    color: 'var(--puck-color-grey-06)',
-                }, children: hint })] }));
+                    color: 'var(--puck-color-grey-06)'
+                },
+                children: hint
+            })
+        ]
+    });
 }
 // =============================================================================
 // Field Configuration Factory
 // =============================================================================
 /**
  * Creates a Puck field configuration for slug preview
- */
-export function createSlugPreviewField(config) {
+ */ export function createSlugPreviewField(config) {
     return {
         type: 'custom',
         label: config?.label ?? 'URL Slug',
-        render: ({ value }) => (_jsx(SlugPreviewField, { value: value || '', label: config?.label, hint: config?.hint })),
+        render: ({ value })=>/*#__PURE__*/ _jsx(SlugPreviewField, {
+                value: value || '',
+                label: config?.label,
+                hint: config?.hint
+            })
     };
 }
-//# sourceMappingURL=SlugPreviewField.js.map

package/dist/fields/TemplateField.d.ts

@@ -18,7 +18,7 @@ interface TemplateFieldProps {
     readOnly?: boolean;
     apiEndpoint?: string;
 }
-declare function TemplateFieldInner({ value, onChange, label, readOnly, apiEndpoint, }: TemplateFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function TemplateFieldInner({ value, onChange, label, readOnly, apiEndpoint, }: TemplateFieldProps): React.JSX.Element;
 export declare const TemplateField: React.MemoExoticComponent<typeof TemplateFieldInner>;
 /**
  * Creates a Puck field configuration for template selection
@@ -28,4 +28,3 @@ export declare function createTemplateField(config: {
     apiEndpoint?: string;
 }): CustomField<string | null>;
 export {};
-//# sourceMappingURL=TemplateField.d.ts.map