@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/ColorPickerField.js

@@ -9,20 +9,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Opacity slider (0-100%)
  * - Preview swatch
  * - Optional preset color swatches
- */
-import { useState, useCallback, memo } from 'react';
+ */ import React, { useState, useCallback, memo } from 'react';
 import { X } from 'lucide-react';
-import { useTheme } from '../theme';
+import { useTheme } from '../theme/index.js';
 // =============================================================================
 // Utility Functions
 // =============================================================================
 /**
  * Validates and normalizes a hex color string
- */
-function normalizeHex(hex) {
+ */ function normalizeHex(hex) {
     let clean = hex.replace(/^#/, '');
     if (clean.length === 3) {
-        clean = clean.split('').map(c => c + c).join('');
+        clean = clean.split('').map((c)=>c + c).join('');
     }
     if (!/^[0-9A-Fa-f]{6}$/.test(clean)) {
         return '';
@@ -31,8 +29,7 @@ function normalizeHex(hex) {
 }
 /**
  * Converts hex + opacity to rgba CSS string
- */
-export function colorToRgba(hex, opacity) {
+ */ export function colorToRgba(hex, opacity) {
     const clean = hex.replace(/^#/, '');
     const r = parseInt(clean.substring(0, 2), 16);
     const g = parseInt(clean.substring(2, 4), 16);
@@ -46,19 +43,19 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '12px',
+        gap: '12px'
     },
     label: {
         display: 'block',
         fontSize: '14px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     row: {
         display: 'flex',
         alignItems: 'center',
         flexWrap: 'wrap',
-        gap: '8px',
+        gap: '8px'
     },
     colorInput: {
         width: '40px',
@@ -66,7 +63,7 @@ const styles = {
         padding: 0,
         border: '1px solid var(--theme-elevation-150)',
         borderRadius: '6px',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     hexInput: {
         flex: '1 1 80px',
@@ -78,7 +75,7 @@ const styles = {
         border: '1px solid var(--theme-elevation-150)',
         borderRadius: '6px',
         backgroundColor: 'var(--theme-input-bg)',
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     previewSwatch: {
         width: '40px',
@@ -87,7 +84,7 @@ const styles = {
         border: '1px solid var(--theme-elevation-150)',
         flexShrink: 0,
         position: 'relative',
-        overflow: 'hidden',
+        overflow: 'hidden'
     },
     checkerboard: {
         position: 'absolute',
@@ -95,11 +92,11 @@ const styles = {
         backgroundImage: 'linear-gradient(45deg, #d0d0d0 25%, transparent 25%), linear-gradient(-45deg, #d0d0d0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d0d0d0 75%), linear-gradient(-45deg, transparent 75%, #d0d0d0 75%)',
         backgroundSize: '8px 8px',
         backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',
-        backgroundColor: '#f0f0f0',
+        backgroundColor: '#f0f0f0'
     },
     colorOverlay: {
         position: 'absolute',
-        inset: 0,
+        inset: 0
     },
     clearButton: {
         display: 'flex',
@@ -113,33 +110,33 @@ const styles = {
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
         cursor: 'pointer',
-        flexShrink: 0,
+        flexShrink: 0
     },
     opacitySection: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '4px',
+        gap: '4px'
     },
     opacityHeader: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
     },
     opacityLabel: {
         fontSize: '12px',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     opacityValue: {
         fontSize: '12px',
         fontFamily: 'monospace',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     opacitySlider: {
         position: 'relative',
         height: '12px',
         borderRadius: '6px',
         overflow: 'hidden',
-        border: '1px solid var(--theme-elevation-150)',
+        border: '1px solid var(--theme-elevation-150)'
     },
     opacityInput: {
         position: 'absolute',
@@ -148,7 +145,7 @@ const styles = {
         height: '100%',
         opacity: 0,
         cursor: 'pointer',
-        margin: 0,
+        margin: 0
     },
     opacityThumb: {
         position: 'absolute',
@@ -159,21 +156,21 @@ const styles = {
         border: '1px solid var(--theme-elevation-400)',
         borderRadius: '2px',
         boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
-        pointerEvents: 'none',
+        pointerEvents: 'none'
     },
     presetsSection: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
+        gap: '8px'
     },
     presetsLabel: {
         fontSize: '12px',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     presetsGrid: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '6px',
+        gap: '6px'
     },
     presetButton: {
         width: '24px',
@@ -182,7 +179,7 @@ const styles = {
         borderRadius: '4px',
         cursor: 'pointer',
         border: '1px solid var(--theme-elevation-150)',
-        outline: 'none',
+        outline: 'none'
     },
     presetButtonSelected: {
         width: '24px',
@@ -192,96 +189,239 @@ const styles = {
         cursor: 'pointer',
         border: '2px solid var(--theme-elevation-800)',
         outline: '2px solid var(--theme-elevation-300)',
-        outlineOffset: '2px',
-    },
+        outlineOffset: '2px'
+    }
 };
 // =============================================================================
 // ColorPickerField Component
 // =============================================================================
-function ColorPickerFieldInner({ value, onChange, label, readOnly, showOpacity = true, presets, }) {
+function ColorPickerFieldInner({ value, onChange, label, readOnly, showOpacity = true, presets }) {
     // Use theme presets if none provided
     const theme = useTheme();
     const resolvedPresets = presets ?? theme.colorPresets;
     const [hexInput, setHexInput] = useState(value?.hex || '');
-    const handleColorChange = useCallback((e) => {
+    const handleColorChange = useCallback((e)=>{
         const newHex = e.target.value;
         onChange({
             hex: newHex,
-            opacity: value?.opacity ?? 100,
+            opacity: value?.opacity ?? 100
         });
         setHexInput(newHex);
-    }, [onChange, value?.opacity]);
-    const handleHexInputChange = useCallback((e) => {
+    }, [
+        onChange,
+        value?.opacity
+    ]);
+    const handleHexInputChange = useCallback((e)=>{
         const input = e.target.value;
         setHexInput(input);
         const normalized = normalizeHex(input);
         if (normalized) {
             onChange({
                 hex: normalized,
-                opacity: value?.opacity ?? 100,
+                opacity: value?.opacity ?? 100
             });
         }
-    }, [onChange, value?.opacity]);
-    const handleHexInputBlur = useCallback(() => {
+    }, [
+        onChange,
+        value?.opacity
+    ]);
+    const handleHexInputBlur = useCallback(()=>{
         if (value?.hex) {
             setHexInput(value.hex);
         }
-    }, [value?.hex]);
-    const handleOpacityChange = useCallback((e) => {
+    }, [
+        value?.hex
+    ]);
+    const handleOpacityChange = useCallback((e)=>{
         const newOpacity = parseInt(e.target.value, 10);
         if (value?.hex) {
             onChange({
                 hex: value.hex,
-                opacity: newOpacity,
+                opacity: newOpacity
             });
         }
-    }, [onChange, value?.hex]);
-    const handlePresetClick = useCallback((preset) => {
+    }, [
+        onChange,
+        value?.hex
+    ]);
+    const handlePresetClick = useCallback((preset)=>{
         onChange({
             hex: preset.hex,
-            opacity: value?.opacity ?? 100,
+            opacity: value?.opacity ?? 100
         });
         setHexInput(preset.hex);
-    }, [onChange, value?.opacity]);
-    const handleClear = useCallback(() => {
+    }, [
+        onChange,
+        value?.opacity
+    ]);
+    const handleClear = useCallback(()=>{
         onChange(null);
         setHexInput('');
-    }, [onChange]);
-    const previewColor = value?.hex
-        ? colorToRgba(value.hex, value.opacity ?? 100)
-        : 'transparent';
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [label && (_jsx("label", { style: styles.label, children: label })), _jsxs("div", { style: styles.row, children: [_jsx("input", { type: "color", value: value?.hex || '#000000', onChange: handleColorChange, disabled: readOnly, style: {
+    }, [
+        onChange
+    ]);
+    const previewColor = value?.hex ? colorToRgba(value.hex, value.opacity ?? 100) : 'transparent';
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            label && /*#__PURE__*/ _jsx("label", {
+                style: styles.label,
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.row,
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        type: "color",
+                        value: value?.hex || '#000000',
+                        onChange: handleColorChange,
+                        disabled: readOnly,
+                        style: {
                             ...styles.colorInput,
-                            ...(readOnly ? { cursor: 'not-allowed', opacity: 0.5 } : {}),
-                        } }), _jsx("input", { type: "text", value: hexInput, onChange: handleHexInputChange, onBlur: handleHexInputBlur, placeholder: "#000000", disabled: readOnly, style: styles.hexInput }), _jsxs("div", { style: styles.previewSwatch, title: value?.hex ? `${value.hex} at ${value.opacity ?? 100}% opacity` : 'No color selected', children: [_jsx("div", { style: styles.checkerboard }), _jsx("div", { style: { ...styles.colorOverlay, backgroundColor: previewColor } })] }), value && !readOnly && (_jsx("button", { type: "button", onClick: handleClear, title: "Clear color", style: styles.clearButton, children: _jsx(X, { style: { width: '16px', height: '16px' } }) }))] }), showOpacity && value?.hex && (_jsxs("div", { style: styles.opacitySection, children: [_jsxs("div", { style: styles.opacityHeader, children: [_jsx("label", { style: styles.opacityLabel, children: "Opacity" }), _jsxs("span", { style: styles.opacityValue, children: [value.opacity ?? 100, "%"] })] }), _jsxs("div", { style: styles.opacitySlider, children: [_jsx("div", { style: styles.checkerboard }), _jsx("div", { style: {
+                            ...readOnly ? {
+                                cursor: 'not-allowed',
+                                opacity: 0.5
+                            } : {}
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        type: "text",
+                        value: hexInput,
+                        onChange: handleHexInputChange,
+                        onBlur: handleHexInputBlur,
+                        placeholder: "#000000",
+                        disabled: readOnly,
+                        style: styles.hexInput
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.previewSwatch,
+                        title: value?.hex ? `${value.hex} at ${value.opacity ?? 100}% opacity` : 'No color selected',
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: styles.checkerboard
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    ...styles.colorOverlay,
+                                    backgroundColor: previewColor
+                                }
+                            })
+                        ]
+                    }),
+                    value && !readOnly && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleClear,
+                        title: "Clear color",
+                        style: styles.clearButton,
+                        children: /*#__PURE__*/ _jsx(X, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    })
+                ]
+            }),
+            showOpacity && value?.hex && /*#__PURE__*/ _jsxs("div", {
+                style: styles.opacitySection,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.opacityHeader,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.opacityLabel,
+                                children: "Opacity"
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                style: styles.opacityValue,
+                                children: [
+                                    value.opacity ?? 100,
+                                    "%"
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.opacitySlider,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: styles.checkerboard
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
                                     ...styles.colorOverlay,
-                                    background: `linear-gradient(to right, transparent 0%, ${value.hex} 100%)`,
-                                } }), _jsx("input", { type: "range", min: "0", max: "100", value: value.opacity ?? 100, onChange: handleOpacityChange, disabled: readOnly, style: {
+                                    background: `linear-gradient(to right, transparent 0%, ${value.hex} 100%)`
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "range",
+                                min: "0",
+                                max: "100",
+                                value: value.opacity ?? 100,
+                                onChange: handleOpacityChange,
+                                disabled: readOnly,
+                                style: {
                                     ...styles.opacityInput,
-                                    ...(readOnly ? { cursor: 'not-allowed' } : {}),
-                                } }), _jsx("div", { style: {
+                                    ...readOnly ? {
+                                        cursor: 'not-allowed'
+                                    } : {}
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
                                     ...styles.opacityThumb,
-                                    left: `calc(${value.opacity ?? 100}% - 2px)`,
-                                } })] })] })), resolvedPresets.length > 0 && !readOnly && (_jsxs("div", { style: styles.presetsSection, children: [_jsx("label", { style: styles.presetsLabel, children: "Presets" }), _jsx("div", { style: styles.presetsGrid, children: resolvedPresets.map((preset) => {
+                                    left: `calc(${value.opacity ?? 100}% - 2px)`
+                                }
+                            })
+                        ]
+                    })
+                ]
+            }),
+            resolvedPresets.length > 0 && !readOnly && /*#__PURE__*/ _jsxs("div", {
+                style: styles.presetsSection,
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        style: styles.presetsLabel,
+                        children: "Presets"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: styles.presetsGrid,
+                        children: resolvedPresets.map((preset)=>{
                             const isSelected = value?.hex?.toLowerCase() === preset.hex.toLowerCase();
-                            return (_jsx("button", { type: "button", onClick: () => handlePresetClick(preset), style: {
-                                    ...(isSelected ? styles.presetButtonSelected : styles.presetButton),
-                                    backgroundColor: preset.hex,
-                                }, title: preset.label }, preset.hex));
-                        }) })] }))] }));
+                            return /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: ()=>handlePresetClick(preset),
+                                style: {
+                                    ...isSelected ? styles.presetButtonSelected : styles.presetButton,
+                                    backgroundColor: preset.hex
+                                },
+                                title: preset.label
+                            }, preset.hex);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
 }
-export const ColorPickerField = memo(ColorPickerFieldInner);
+export const ColorPickerField = /*#__PURE__*/ memo(ColorPickerFieldInner);
 // =============================================================================
 // Field Configuration Factory
 // =============================================================================
 /**
  * Creates a Puck field configuration for color selection
- */
-export function createColorPickerField(config) {
+ */ export function createColorPickerField(config) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(ColorPickerField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly, showOpacity: config.showOpacity, presets: config.presets })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(ColorPickerField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly,
+                showOpacity: config.showOpacity,
+                presets: config.presets
+            })
     };
 }
-//# sourceMappingURL=ColorPickerField.js.map

package/dist/fields/ContentAlignmentField.d.ts

@@ -25,7 +25,7 @@ interface ContentAlignmentFieldProps {
     /** Default alignment when null */
     defaultValue?: ContentAlignmentValue;
 }
-declare function ContentAlignmentFieldInner({ value, onChange, label, readOnly, defaultValue, }: ContentAlignmentFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function ContentAlignmentFieldInner({ value, onChange, label, readOnly, defaultValue, }: ContentAlignmentFieldProps): React.JSX.Element;
 export declare const ContentAlignmentField: React.MemoExoticComponent<typeof ContentAlignmentFieldInner>;
 /**
  * Convert ContentAlignmentValue to Flexbox CSS properties
@@ -63,4 +63,3 @@ interface CreateContentAlignmentFieldConfig {
  */
 export declare function createContentAlignmentField(config?: CreateContentAlignmentFieldConfig): CustomField<ContentAlignmentValue | null>;
 export {};
-//# sourceMappingURL=ContentAlignmentField.d.ts.map