@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/LockedField.d.ts

@@ -1,3 +1,16 @@
+/**
+ * LockedField - Custom Puck field wrapper that prevents accidental edits
+ *
+ * Wraps a field with a lock/unlock toggle. When locked, the field is read-only.
+ * Click the lock icon to toggle editing.
+ *
+ * Exports:
+ * - LockedTextField: A text input with lock/unlock functionality
+ * - LockedRadioField: A radio button group with lock/unlock functionality
+ * - createLockedTextField: Factory for Puck field configuration
+ * - createLockedRadioField: Factory for Puck field configuration
+ */
+import React from 'react';
 import type { CustomField } from '@puckeditor/core';
 interface LockedTextFieldProps {
     value: string;
@@ -16,8 +29,8 @@ interface LockedRadioFieldProps {
     }[];
     warningMessage?: string;
 }
-export declare function LockedTextField({ value, onChange, label, placeholder, warningMessage, }: LockedTextFieldProps): import("react/jsx-runtime").JSX.Element;
-export declare function LockedRadioField({ value, onChange, label, options, warningMessage, }: LockedRadioFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function LockedTextField({ value, onChange, label, placeholder, warningMessage, }: LockedTextFieldProps): React.JSX.Element;
+export declare function LockedRadioField({ value, onChange, label, options, warningMessage, }: LockedRadioFieldProps): React.JSX.Element;
 /**
  * Creates a Puck field configuration for a locked text input
  */
@@ -64,4 +77,3 @@ export declare const lockedSlugField: CustomField<string>;
  */
 export declare const lockedHomepageField: CustomField<boolean>;
 export {};
-//# sourceMappingURL=LockedField.d.ts.map

package/dist/fields/LockedField.js

@@ -11,15 +11,37 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - LockedRadioField: A radio button group with lock/unlock functionality
  * - createLockedTextField: Factory for Puck field configuration
  * - createLockedRadioField: Factory for Puck field configuration
- */
-import { useState } from 'react';
+ */ import React, { useState } from 'react';
 import { Lock, Unlock } from 'lucide-react';
 // =============================================================================
 // LockedTextField Component
 // =============================================================================
-export function LockedTextField({ value, onChange, label, placeholder, warningMessage, }) {
+export function LockedTextField({ value, onChange, label, placeholder, warningMessage }) {
     const [isLocked, setIsLocked] = useState(true);
-    return (_jsxs("div", { className: "puck-field", children: [_jsxs("div", { className: "puck-field-header", style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }, children: [label && (_jsx("label", { style: { fontSize: '14px', fontWeight: 500, color: 'var(--puck-color-grey-04)' }, children: label })), _jsx("button", { type: "button", onClick: () => setIsLocked(!isLocked), style: {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "puck-field-header",
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: '8px'
+                },
+                children: [
+                    label && /*#__PURE__*/ _jsx("label", {
+                        style: {
+                            fontSize: '14px',
+                            fontWeight: 500,
+                            color: 'var(--puck-color-grey-04)'
+                        },
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>setIsLocked(!isLocked),
+                        style: {
                             background: 'none',
                             border: 'none',
                             padding: '4px',
@@ -29,8 +51,29 @@ export function LockedTextField({ value, onChange, label, placeholder, warningMe
                             alignItems: 'center',
                             justifyContent: 'center',
                             borderRadius: '4px',
-                            transition: 'all 0.15s ease',
-                        }, title: isLocked ? 'Click to unlock' : 'Click to lock', children: isLocked ? (_jsx(Lock, { size: 14 })) : (_jsx(Unlock, { size: 14 })) })] }), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("input", { type: "text", value: value || '', onChange: (e) => onChange(e.target.value), disabled: isLocked, placeholder: placeholder, style: {
+                            transition: 'all 0.15s ease'
+                        },
+                        title: isLocked ? 'Click to unlock' : 'Click to lock',
+                        children: isLocked ? /*#__PURE__*/ _jsx(Lock, {
+                            size: 14
+                        }) : /*#__PURE__*/ _jsx(Unlock, {
+                            size: 14
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    position: 'relative'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        type: "text",
+                        value: value || '',
+                        onChange: (e)=>onChange(e.target.value),
+                        disabled: isLocked,
+                        placeholder: placeholder,
+                        style: {
                             width: '100%',
                             padding: '8px 12px',
                             paddingRight: isLocked ? '32px' : '12px',
@@ -41,28 +84,72 @@ export function LockedTextField({ value, onChange, label, placeholder, warningMe
                             color: isLocked ? 'var(--puck-color-grey-05)' : 'var(--puck-color-grey-04)',
                             cursor: isLocked ? 'not-allowed' : 'text',
                             outline: 'none',
-                            transition: 'all 0.15s ease',
-                        } }), isLocked && (_jsx(Lock, { size: 14, style: {
+                            transition: 'all 0.15s ease'
+                        }
+                    }),
+                    isLocked && /*#__PURE__*/ _jsx(Lock, {
+                        size: 14,
+                        style: {
                             position: 'absolute',
                             right: '10px',
                             top: '50%',
                             transform: 'translateY(-50%)',
-                            color: 'var(--puck-color-grey-07)',
-                        } }))] }), !isLocked && warningMessage && (_jsxs("p", { style: {
+                            color: 'var(--puck-color-grey-07)'
+                        }
+                    })
+                ]
+            }),
+            !isLocked && warningMessage && /*#__PURE__*/ _jsxs("p", {
+                style: {
                     marginTop: '6px',
                     fontSize: '12px',
                     color: 'var(--puck-color-grey-05)',
                     display: 'flex',
                     alignItems: 'center',
-                    gap: '4px',
-                }, children: [_jsx("span", { style: { color: 'var(--puck-color-rose-07)' }, children: "\u26A0" }), warningMessage] }))] }));
+                    gap: '4px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            color: 'var(--puck-color-rose-07)'
+                        },
+                        children: "⚠"
+                    }),
+                    warningMessage
+                ]
+            })
+        ]
+    });
 }
 // =============================================================================
 // LockedRadioField Component
 // =============================================================================
-export function LockedRadioField({ value, onChange, label, options, warningMessage, }) {
+export function LockedRadioField({ value, onChange, label, options, warningMessage }) {
     const [isLocked, setIsLocked] = useState(true);
-    return (_jsxs("div", { className: "puck-field", children: [_jsxs("div", { className: "puck-field-header", style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }, children: [label && (_jsx("label", { style: { fontSize: '14px', fontWeight: 500, color: 'var(--puck-color-grey-04)' }, children: label })), _jsx("button", { type: "button", onClick: () => setIsLocked(!isLocked), style: {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "puck-field-header",
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: '8px'
+                },
+                children: [
+                    label && /*#__PURE__*/ _jsx("label", {
+                        style: {
+                            fontSize: '14px',
+                            fontWeight: 500,
+                            color: 'var(--puck-color-grey-04)'
+                        },
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>setIsLocked(!isLocked),
+                        style: {
                             background: 'none',
                             border: 'none',
                             padding: '4px',
@@ -72,59 +159,98 @@ export function LockedRadioField({ value, onChange, label, options, warningMessa
                             alignItems: 'center',
                             justifyContent: 'center',
                             borderRadius: '4px',
-                            transition: 'all 0.15s ease',
-                        }, title: isLocked ? 'Click to unlock' : 'Click to lock', children: isLocked ? (_jsx(Lock, { size: 14 })) : (_jsx(Unlock, { size: 14 })) })] }), _jsx("div", { style: {
+                            transition: 'all 0.15s ease'
+                        },
+                        title: isLocked ? 'Click to unlock' : 'Click to lock',
+                        children: isLocked ? /*#__PURE__*/ _jsx(Lock, {
+                            size: 14
+                        }) : /*#__PURE__*/ _jsx(Unlock, {
+                            size: 14
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
                     display: 'flex',
                     border: '1px solid var(--puck-color-grey-09)',
                     borderRadius: '6px',
                     overflow: 'hidden',
                     opacity: isLocked ? 0.6 : 1,
-                    pointerEvents: isLocked ? 'none' : 'auto',
-                }, children: options.map((option, index) => (_jsx("button", { type: "button", onClick: () => onChange(option.value), disabled: isLocked, style: {
-                        flex: 1,
-                        padding: '8px 16px',
-                        fontSize: '14px',
-                        fontWeight: 500,
-                        border: 'none',
-                        borderRight: index < options.length - 1 ? '1px solid var(--puck-color-grey-09)' : 'none',
-                        background: value === option.value
-                            ? 'var(--puck-color-azure-12)'
-                            : 'var(--puck-color-white)',
-                        color: value === option.value
-                            ? 'var(--puck-color-azure-04)'
-                            : 'var(--puck-color-grey-05)',
-                        cursor: isLocked ? 'not-allowed' : 'pointer',
-                        transition: 'all 0.15s ease',
-                    }, children: option.label }, String(option.value)))) }), !isLocked && warningMessage && (_jsxs("p", { style: {
+                    pointerEvents: isLocked ? 'none' : 'auto'
+                },
+                children: options.map((option, index)=>/*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>onChange(option.value),
+                        disabled: isLocked,
+                        style: {
+                            flex: 1,
+                            padding: '8px 16px',
+                            fontSize: '14px',
+                            fontWeight: 500,
+                            border: 'none',
+                            borderRight: index < options.length - 1 ? '1px solid var(--puck-color-grey-09)' : 'none',
+                            background: value === option.value ? 'var(--puck-color-azure-12)' : 'var(--puck-color-white)',
+                            color: value === option.value ? 'var(--puck-color-azure-04)' : 'var(--puck-color-grey-05)',
+                            cursor: isLocked ? 'not-allowed' : 'pointer',
+                            transition: 'all 0.15s ease'
+                        },
+                        children: option.label
+                    }, String(option.value)))
+            }),
+            !isLocked && warningMessage && /*#__PURE__*/ _jsxs("p", {
+                style: {
                     marginTop: '6px',
                     fontSize: '12px',
                     color: 'var(--puck-color-grey-05)',
                     display: 'flex',
                     alignItems: 'center',
-                    gap: '4px',
-                }, children: [_jsx("span", { style: { color: 'var(--puck-color-rose-07)' }, children: "\u26A0" }), warningMessage] }))] }));
+                    gap: '4px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            color: 'var(--puck-color-rose-07)'
+                        },
+                        children: "⚠"
+                    }),
+                    warningMessage
+                ]
+            })
+        ]
+    });
 }
 // =============================================================================
 // Field Configuration Factories
 // =============================================================================
 /**
  * Creates a Puck field configuration for a locked text input
- */
-export function createLockedTextField(config) {
+ */ export function createLockedTextField(config) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange }) => (_jsx(LockedTextField, { value: value, onChange: onChange, label: config.label, placeholder: config.placeholder, warningMessage: config.warningMessage })),
+        render: ({ value, onChange })=>/*#__PURE__*/ _jsx(LockedTextField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                placeholder: config.placeholder,
+                warningMessage: config.warningMessage
+            })
     };
 }
 /**
  * Creates a Puck field configuration for a locked radio button group
- */
-export function createLockedRadioField(config) {
+ */ export function createLockedRadioField(config) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange }) => (_jsx(LockedRadioField, { value: value, onChange: onChange, label: config.label, options: config.options, warningMessage: config.warningMessage })),
+        render: ({ value, onChange })=>/*#__PURE__*/ _jsx(LockedRadioField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                options: config.options,
+                warningMessage: config.warningMessage
+            })
     };
 }
 // =============================================================================
@@ -141,11 +267,10 @@ export function createLockedRadioField(config) {
  *   }
  * }
  * ```
- */
-export const lockedSlugField = createLockedTextField({
+ */ export const lockedSlugField = createLockedTextField({
     label: 'Slug',
     placeholder: 'page-slug',
-    warningMessage: 'Changing may break existing links',
+    warningMessage: 'Changing may break existing links'
 });
 /**
  * Pre-built locked isHomepage field - prevents accidental homepage changes
@@ -158,13 +283,17 @@ export const lockedSlugField = createLockedTextField({
  *   }
  * }
  * ```
- */
-export const lockedHomepageField = createLockedRadioField({
+ */ export const lockedHomepageField = createLockedRadioField({
     label: 'Homepage',
     options: [
-        { label: 'No', value: false },
-        { label: 'Yes', value: true },
+        {
+            label: 'No',
+            value: false
+        },
+        {
+            label: 'Yes',
+            value: true
+        }
     ],
-    warningMessage: 'Only one page can be the homepage',
+    warningMessage: 'Only one page can be the homepage'
 });
-//# sourceMappingURL=LockedField.js.map

package/dist/fields/MarginField.d.ts

@@ -9,7 +9,7 @@
  */
 import React from 'react';
 import type { CustomField } from '@puckeditor/core';
-import type { PaddingValue } from './shared';
+import type { PaddingValue } from './shared.js';
 export type MarginValue = PaddingValue;
 interface MarginFieldProps {
     value: MarginValue | null;
@@ -18,7 +18,7 @@ interface MarginFieldProps {
     readOnly?: boolean;
     showUnits?: boolean;
 }
-declare function MarginFieldInner({ value, onChange, label, readOnly, showUnits, }: MarginFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function MarginFieldInner({ value, onChange, label, readOnly, showUnits, }: MarginFieldProps): React.JSX.Element;
 export declare const MarginField: React.MemoExoticComponent<typeof MarginFieldInner>;
 /**
  * Creates a Puck field configuration for margin/spacing
@@ -28,4 +28,3 @@ export declare function createMarginField(config: {
     showUnits?: boolean;
 }): CustomField<MarginValue | null>;
 export {};
-//# sourceMappingURL=MarginField.d.ts.map