@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/MarginField.js

@@ -8,8 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - 4 number inputs for top/right/bottom/left
  * - Link/unlink toggle button (when linked, all values sync)
  * - Unit selector (px, rem)
- */
-import { useCallback, memo } from 'react';
+ */ import React, { useCallback, memo } from 'react';
 import { Link, Unlink } from 'lucide-react';
 // =============================================================================
 // Default Value
@@ -20,7 +19,7 @@ const DEFAULT_VALUE = {
     bottom: 0,
     left: 0,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 // =============================================================================
 // Styles
@@ -29,17 +28,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)'
     },
     linkButton: {
         display: 'flex',
@@ -52,7 +51,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     linkButtonActive: {
         display: 'flex',
@@ -65,7 +64,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     grid: {
         display: 'grid',
@@ -73,12 +72,12 @@ const styles = {
         gap: '8px',
         padding: '8px',
         backgroundColor: 'var(--theme-elevation-50)',
-        borderRadius: '6px',
+        borderRadius: '6px'
     },
     inputRow: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     inputLabel: {
         fontSize: '10px',
@@ -87,7 +86,7 @@ const styles = {
         color: 'var(--theme-elevation-500)',
         width: '24px',
         textAlign: 'right',
-        flexShrink: 0,
+        flexShrink: 0
     },
     input: {
         height: '28px',
@@ -99,27 +98,27 @@ const styles = {
         border: '1px solid var(--theme-elevation-150)',
         borderRadius: '4px',
         backgroundColor: 'var(--theme-input-bg)',
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     footer: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         flexWrap: 'wrap',
-        gap: '8px',
+        gap: '8px'
     },
     unitGroup: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     unitLabel: {
         fontSize: '12px',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     unitButtons: {
         display: 'flex',
-        gap: '4px',
+        gap: '4px'
     },
     unitButton: {
         height: '28px',
@@ -130,7 +129,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     unitButtonActive: {
         height: '28px',
@@ -141,24 +140,24 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     summary: {
         fontSize: '12px',
         fontFamily: 'monospace',
-        color: 'var(--theme-elevation-500)',
-    },
+        color: 'var(--theme-elevation-500)'
+    }
 };
 // =============================================================================
 // MarginField Component
 // =============================================================================
-function MarginFieldInner({ value, onChange, label, readOnly, showUnits = true, }) {
+function MarginFieldInner({ value, onChange, label, readOnly, showUnits = true }) {
     // Use default if no value
     const currentValue = value || DEFAULT_VALUE;
     // Use explicit linked state from value, default to true if not set
     const isLinked = currentValue.linked ?? true;
     // Handle individual side change
-    const handleSideChange = useCallback((side, newValue) => {
+    const handleSideChange = useCallback((side, newValue)=>{
         if (isLinked) {
             // When linked, update all sides
             onChange({
@@ -167,28 +166,30 @@ function MarginFieldInner({ value, onChange, label, readOnly, showUnits = true,
                 right: newValue,
                 bottom: newValue,
                 left: newValue,
-                linked: true,
+                linked: true
             });
-        }
-        else {
+        } else {
             // When unlinked, update only the specific side
             onChange({
                 ...currentValue,
                 [side]: newValue,
-                linked: false,
+                linked: false
             });
         }
-    }, [currentValue, onChange, isLinked]);
+    }, [
+        currentValue,
+        onChange,
+        isLinked
+    ]);
     // Handle link toggle
-    const handleLinkToggle = useCallback(() => {
+    const handleLinkToggle = useCallback(()=>{
         if (isLinked) {
             // Unlinking - keep current values but mark as unlinked
             onChange({
                 ...currentValue,
-                linked: false,
+                linked: false
             });
-        }
-        else {
+        } else {
             // Linking - set all sides to the top value and mark as linked
             onChange({
                 ...currentValue,
@@ -196,38 +197,133 @@ function MarginFieldInner({ value, onChange, label, readOnly, showUnits = true,
                 right: currentValue.top,
                 bottom: currentValue.top,
                 left: currentValue.top,
-                linked: true,
+                linked: true
             });
         }
-    }, [currentValue, onChange, isLinked]);
+    }, [
+        currentValue,
+        onChange,
+        isLinked
+    ]);
     // Handle unit change
-    const handleUnitChange = useCallback((unit) => {
+    const handleUnitChange = useCallback((unit)=>{
         onChange({
             ...currentValue,
-            unit,
+            unit
         });
-    }, [currentValue, onChange]);
+    }, [
+        currentValue,
+        onChange
+    ]);
     // Render a single side input - compact horizontal layout
-    const renderSideInput = (side, sideLabel) => (_jsxs("div", { style: styles.inputRow, children: [_jsx("label", { style: styles.inputLabel, children: sideLabel.charAt(0) }), _jsx("input", { type: "number", min: 0, value: currentValue[side], onChange: (e) => handleSideChange(side, parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] }));
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [label && (_jsx("label", { style: styles.label, children: label })), !readOnly && (_jsx("button", { type: "button", onClick: handleLinkToggle, style: isLinked ? styles.linkButtonActive : styles.linkButton, title: isLinked ? 'Click to unlink (set sides individually)' : 'Click to link (all sides same value)', children: isLinked ? (_jsx(Link, { style: { width: '16px', height: '16px' } })) : (_jsx(Unlink, { style: { width: '16px', height: '16px' } })) }))] }), _jsxs("div", { style: styles.grid, children: [renderSideInput('top', 'Top'), renderSideInput('right', 'Right'), renderSideInput('bottom', 'Bottom'), renderSideInput('left', 'Left')] }), showUnits && !readOnly && (_jsxs("div", { style: styles.footer, children: [_jsxs("div", { style: styles.unitGroup, children: [_jsx("label", { style: styles.unitLabel, children: "Unit:" }), _jsx("div", { style: styles.unitButtons, children: ['px', 'rem'].map((unit) => {
+    const renderSideInput = (side, sideLabel)=>/*#__PURE__*/ _jsxs("div", {
+            style: styles.inputRow,
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    style: styles.inputLabel,
+                    children: sideLabel.charAt(0)
+                }),
+                /*#__PURE__*/ _jsx("input", {
+                    type: "number",
+                    min: 0,
+                    value: currentValue[side],
+                    onChange: (e)=>handleSideChange(side, parseInt(e.target.value, 10) || 0),
+                    disabled: readOnly,
+                    style: styles.input
+                })
+            ]
+        });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.header,
+                children: [
+                    label && /*#__PURE__*/ _jsx("label", {
+                        style: styles.label,
+                        children: label
+                    }),
+                    !readOnly && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleLinkToggle,
+                        style: isLinked ? styles.linkButtonActive : styles.linkButton,
+                        title: isLinked ? 'Click to unlink (set sides individually)' : 'Click to link (all sides same value)',
+                        children: isLinked ? /*#__PURE__*/ _jsx(Link, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        }) : /*#__PURE__*/ _jsx(Unlink, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.grid,
+                children: [
+                    renderSideInput('top', 'Top'),
+                    renderSideInput('right', 'Right'),
+                    renderSideInput('bottom', 'Bottom'),
+                    renderSideInput('left', 'Left')
+                ]
+            }),
+            showUnits && !readOnly && /*#__PURE__*/ _jsxs("div", {
+                style: styles.footer,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.unitGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.unitLabel,
+                                children: "Unit:"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: styles.unitButtons,
+                                children: [
+                                    'px',
+                                    'rem'
+                                ].map((unit)=>{
                                     const isActive = currentValue.unit === unit;
-                                    return (_jsx("button", { type: "button", onClick: () => handleUnitChange(unit), style: isActive ? styles.unitButtonActive : styles.unitButton, children: unit }, unit));
-                                }) })] }), _jsx("span", { style: styles.summary, children: isLinked
-                            ? `${currentValue.top}${currentValue.unit}`
-                            : `${currentValue.top} ${currentValue.right} ${currentValue.bottom} ${currentValue.left}${currentValue.unit}` })] }))] }));
+                                    return /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handleUnitChange(unit),
+                                        style: isActive ? styles.unitButtonActive : styles.unitButton,
+                                        children: unit
+                                    }, unit);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        style: styles.summary,
+                        children: isLinked ? `${currentValue.top}${currentValue.unit}` : `${currentValue.top} ${currentValue.right} ${currentValue.bottom} ${currentValue.left}${currentValue.unit}`
+                    })
+                ]
+            })
+        ]
+    });
 }
-export const MarginField = memo(MarginFieldInner);
+export const MarginField = /*#__PURE__*/ memo(MarginFieldInner);
 // =============================================================================
 // Field Configuration Factory
 // =============================================================================
 /**
  * Creates a Puck field configuration for margin/spacing
- */
-export function createMarginField(config) {
+ */ export function createMarginField(config) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(MarginField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly, showUnits: config.showUnits })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(MarginField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly,
+                showUnits: config.showUnits
+            })
     };
 }
-//# sourceMappingURL=MarginField.js.map

package/dist/fields/MediaField.d.ts

@@ -20,7 +20,7 @@ interface MediaFieldProps {
     readOnly?: boolean;
     apiEndpoint?: string;
 }
-declare function MediaFieldInner({ value, onChange, label, readOnly, apiEndpoint, }: MediaFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function MediaFieldInner({ value, onChange, label, readOnly, apiEndpoint, }: MediaFieldProps): React.JSX.Element;
 export declare const MediaField: React.MemoExoticComponent<typeof MediaFieldInner>;
 /**
  * Creates a Puck field configuration for media selection
@@ -30,4 +30,3 @@ export declare function createMediaField(config: {
     apiEndpoint?: string;
 }): CustomField<MediaReference | null>;
 export {};
-//# sourceMappingURL=MediaField.d.ts.map