@delmaredigital/payload-puck 0.6.12 → 0.6.13

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,241 @@ 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/ColorPickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerField.js","sourceRoot":"","sources":["../../src/fields/ColorPickerField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ColorPickerField.tsx"],"sourcesContent":["'use client'\n\n/**\n * ColorPickerField - Custom Puck field for selecting colors with opacity\n *\n * This component provides a color picker with:\n * - Native color input for visual picking\n * - Hex input for direct entry\n * - Opacity slider (0-100%)\n * - Preview swatch\n * - Optional preset color swatches\n */\n\nimport React, { useState, useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport { X } from 'lucide-react'\nimport type { ColorValue } from './shared.js'\nimport { useTheme } from '../theme/index.js'\n\n// =============================================================================\n// Types\n// =============================================================================\n\ninterface ColorPickerFieldProps {\n  value: ColorValue | null\n  onChange: (value: ColorValue | null) => void\n  label?: string\n  readOnly?: boolean\n  showOpacity?: boolean\n  presets?: Array<{ hex: string; label: string }>\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Validates and normalizes a hex color string\n */\nfunction normalizeHex(hex: string): string {\n  let clean = hex.replace(/^#/, '')\n\n  if (clean.length === 3) {\n    clean = clean.split('').map(c => c + c).join('')\n  }\n\n  if (!/^[0-9A-Fa-f]{6}$/.test(clean)) {\n    return ''\n  }\n\n  return `#${clean.toLowerCase()}`\n}\n\n/**\n * Converts hex + opacity to rgba CSS string\n */\nexport function colorToRgba(hex: string, opacity: number): string {\n  const clean = hex.replace(/^#/, '')\n  const r = parseInt(clean.substring(0, 2), 16)\n  const g = parseInt(clean.substring(2, 4), 16)\n  const b = parseInt(clean.substring(4, 6), 16)\n  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`\n}\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  } as CSSProperties,\n  label: {\n    display: 'block',\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  row: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '8px',\n  } as CSSProperties,\n  colorInput: {\n    width: '40px',\n    height: '40px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '6px',\n    cursor: 'pointer',\n  } as CSSProperties,\n  hexInput: {\n    flex: '1 1 80px',\n    minWidth: 0,\n    height: '40px',\n    padding: '0 12px',\n    fontSize: '14px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '6px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  previewSwatch: {\n    width: '40px',\n    height: '40px',\n    borderRadius: '6px',\n    border: '1px solid var(--theme-elevation-150)',\n    flexShrink: 0,\n    position: 'relative',\n    overflow: 'hidden',\n  } as CSSProperties,\n  checkerboard: {\n    position: 'absolute',\n    inset: 0,\n    backgroundImage:\n      '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%)',\n    backgroundSize: '8px 8px',\n    backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',\n    backgroundColor: '#f0f0f0',\n  } as CSSProperties,\n  colorOverlay: {\n    position: 'absolute',\n    inset: 0,\n  } as CSSProperties,\n  clearButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n    flexShrink: 0,\n  } as CSSProperties,\n  opacitySection: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '4px',\n  } as CSSProperties,\n  opacityHeader: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  opacityLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  opacityValue: {\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  opacitySlider: {\n    position: 'relative',\n    height: '12px',\n    borderRadius: '6px',\n    overflow: 'hidden',\n    border: '1px solid var(--theme-elevation-150)',\n  } as CSSProperties,\n  opacityInput: {\n    position: 'absolute',\n    inset: 0,\n    width: '100%',\n    height: '100%',\n    opacity: 0,\n    cursor: 'pointer',\n    margin: 0,\n  } as CSSProperties,\n  opacityThumb: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    width: '4px',\n    backgroundColor: 'white',\n    border: '1px solid var(--theme-elevation-400)',\n    borderRadius: '2px',\n    boxShadow: '0 1px 2px rgba(0,0,0,0.1)',\n    pointerEvents: 'none',\n  } as CSSProperties,\n  presetsSection: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '8px',\n  } as CSSProperties,\n  presetsLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  presetsGrid: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '6px',\n  } as CSSProperties,\n  presetButton: {\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    borderRadius: '4px',\n    cursor: 'pointer',\n    border: '1px solid var(--theme-elevation-150)',\n    outline: 'none',\n  } as CSSProperties,\n  presetButtonSelected: {\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    borderRadius: '4px',\n    cursor: 'pointer',\n    border: '2px solid var(--theme-elevation-800)',\n    outline: '2px solid var(--theme-elevation-300)',\n    outlineOffset: '2px',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// ColorPickerField Component\n// =============================================================================\n\nfunction ColorPickerFieldInner({\n  value,\n  onChange,\n  label,\n  readOnly,\n  showOpacity = true,\n  presets,\n}: ColorPickerFieldProps) {\n  // Use theme presets if none provided\n  const theme = useTheme()\n  const resolvedPresets = presets ?? theme.colorPresets\n  const [hexInput, setHexInput] = useState(value?.hex || '')\n\n  const handleColorChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const newHex = e.target.value\n    onChange({\n      hex: newHex,\n      opacity: value?.opacity ?? 100,\n    })\n    setHexInput(newHex)\n  }, [onChange, value?.opacity])\n\n  const handleHexInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const input = e.target.value\n    setHexInput(input)\n\n    const normalized = normalizeHex(input)\n    if (normalized) {\n      onChange({\n        hex: normalized,\n        opacity: value?.opacity ?? 100,\n      })\n    }\n  }, [onChange, value?.opacity])\n\n  const handleHexInputBlur = useCallback(() => {\n    if (value?.hex) {\n      setHexInput(value.hex)\n    }\n  }, [value?.hex])\n\n  const handleOpacityChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const newOpacity = parseInt(e.target.value, 10)\n    if (value?.hex) {\n      onChange({\n        hex: value.hex,\n        opacity: newOpacity,\n      })\n    }\n  }, [onChange, value?.hex])\n\n  const handlePresetClick = useCallback((preset: { hex: string; label: string }) => {\n    onChange({\n      hex: preset.hex,\n      opacity: value?.opacity ?? 100,\n    })\n    setHexInput(preset.hex)\n  }, [onChange, value?.opacity])\n\n  const handleClear = useCallback(() => {\n    onChange(null)\n    setHexInput('')\n  }, [onChange])\n\n  const previewColor = value?.hex\n    ? colorToRgba(value.hex, value.opacity ?? 100)\n    : 'transparent'\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {label && (\n        <label style={styles.label}>\n          {label}\n        </label>\n      )}\n\n      {/* Color picker and hex input row */}\n      <div style={styles.row}>\n        {/* Native color picker */}\n        <input\n          type=\"color\"\n          value={value?.hex || '#000000'}\n          onChange={handleColorChange}\n          disabled={readOnly}\n          style={{\n            ...styles.colorInput,\n            ...(readOnly ? { cursor: 'not-allowed', opacity: 0.5 } : {}),\n          }}\n        />\n\n        {/* Hex input */}\n        <input\n          type=\"text\"\n          value={hexInput}\n          onChange={handleHexInputChange}\n          onBlur={handleHexInputBlur}\n          placeholder=\"#000000\"\n          disabled={readOnly}\n          style={styles.hexInput}\n        />\n\n        {/* Preview swatch with checkerboard for transparency */}\n        <div\n          style={styles.previewSwatch as CSSProperties}\n          title={value?.hex ? `${value.hex} at ${value.opacity ?? 100}% opacity` : 'No color selected'}\n        >\n          <div style={styles.checkerboard as CSSProperties} />\n          <div style={{ ...styles.colorOverlay as CSSProperties, backgroundColor: previewColor }} />\n        </div>\n\n        {/* Clear button */}\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            title=\"Clear color\"\n            style={styles.clearButton}\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      {/* Opacity slider */}\n      {showOpacity && value?.hex && (\n        <div style={styles.opacitySection as CSSProperties}>\n          <div style={styles.opacityHeader}>\n            <label style={styles.opacityLabel}>Opacity</label>\n            <span style={styles.opacityValue}>{value.opacity ?? 100}%</span>\n          </div>\n          {/* Custom opacity slider with checkerboard + color gradient */}\n          <div style={styles.opacitySlider as CSSProperties}>\n            {/* Checkerboard background */}\n            <div style={styles.checkerboard as CSSProperties} />\n            {/* Color gradient from transparent to solid */}\n            <div\n              style={{\n                ...styles.colorOverlay as CSSProperties,\n                background: `linear-gradient(to right, transparent 0%, ${value.hex} 100%)`,\n              }}\n            />\n            {/* Range input overlay */}\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              value={value.opacity ?? 100}\n              onChange={handleOpacityChange}\n              disabled={readOnly}\n              style={{\n                ...styles.opacityInput as CSSProperties,\n                ...(readOnly ? { cursor: 'not-allowed' } : {}),\n              }}\n            />\n            {/* Thumb indicator */}\n            <div\n              style={{\n                ...styles.opacityThumb as CSSProperties,\n                left: `calc(${value.opacity ?? 100}% - 2px)`,\n              }}\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Preset swatches */}\n      {resolvedPresets.length > 0 && !readOnly && (\n        <div style={styles.presetsSection as CSSProperties}>\n          <label style={styles.presetsLabel}>Presets</label>\n          <div style={styles.presetsGrid}>\n            {resolvedPresets.map((preset) => {\n              const isSelected = value?.hex?.toLowerCase() === preset.hex.toLowerCase()\n              return (\n                <button\n                  key={preset.hex}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  style={{\n                    ...(isSelected ? styles.presetButtonSelected : styles.presetButton),\n                    backgroundColor: preset.hex,\n                  }}\n                  title={preset.label}\n                />\n              )\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ColorPickerField = memo(ColorPickerFieldInner)\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\n/**\n * Creates a Puck field configuration for color selection\n */\nexport function createColorPickerField(config: {\n  label?: string\n  showOpacity?: boolean\n  presets?: Array<{ hex: string; label: string }>\n}): CustomField<ColorValue | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <ColorPickerField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n        showOpacity={config.showOpacity}\n        presets={config.presets}\n      />\n    ),\n  }\n}\n"],"names":["React","useState","useCallback","memo","X","useTheme","normalizeHex","hex","clean","replace","length","split","map","c","join","test","toLowerCase","colorToRgba","opacity","r","parseInt","substring","g","b","styles","container","display","flexDirection","gap","label","fontSize","fontWeight","color","row","alignItems","flexWrap","colorInput","width","height","padding","border","borderRadius","cursor","hexInput","flex","minWidth","fontFamily","backgroundColor","previewSwatch","flexShrink","position","overflow","checkerboard","inset","backgroundImage","backgroundSize","backgroundPosition","colorOverlay","clearButton","justifyContent","opacitySection","opacityHeader","opacityLabel","opacityValue","opacitySlider","opacityInput","margin","opacityThumb","top","bottom","boxShadow","pointerEvents","presetsSection","presetsLabel","presetsGrid","presetButton","outline","presetButtonSelected","outlineOffset","ColorPickerFieldInner","value","onChange","readOnly","showOpacity","presets","theme","resolvedPresets","colorPresets","setHexInput","handleColorChange","e","newHex","target","handleHexInputChange","input","normalized","handleHexInputBlur","handleOpacityChange","newOpacity","handlePresetClick","preset","handleClear","previewColor","div","className","style","type","disabled","onBlur","placeholder","title","button","onClick","span","background","min","max","left","isSelected","ColorPickerField","createColorPickerField","config","render"],"mappings":"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"}

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

package/dist/fields/ContentAlignmentField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAlignmentField.d.ts","sourceRoot":"","sources":["../../src/fields/ContentAlignmentField.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAOnD,2BAA2B;AAC3B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAExD,yBAAyB;AACzB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEtD,gDAAgD;AAChD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,CAAA;IAC3B,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,wCAAwC;AACxC,MAAM,MAAM,aAAa,GACrB,UAAU,GAAG,YAAY,GAAG,WAAW,GACvC,aAAa,GAAG,QAAQ,GAAG,cAAc,GACzC,aAAa,GAAG,eAAe,GAAG,cAAc,CAAA;AAEpD,UAAU,0BAA0B;IAClC,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAA;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC;AAkID,iBAAS,0BAA0B,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,KAA2B,EAC3B,QAAQ,EACR,YAAgC,GACjC,EAAE,0BAA0B,2CA2E5B;AAED,eAAO,MAAM,qBAAqB,8DAAmC,CAAA;AAMrE;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,KAAK,CAAC,aAAa,CAmBrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,KAAK,CAAC,aAAa,CAarB;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,KAAK,CAAC,aAAa,CAYrB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,MAAM,CAgBR;AAMD,UAAU,iCAAiC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC;AAED;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CACzC,MAAM,GAAE,iCAAsC,GAC7C,WAAW,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAc3C"}
+{"version":3,"file":"ContentAlignmentField.d.ts","sourceRoot":"","sources":["../../src/fields/ContentAlignmentField.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAOnD,2BAA2B;AAC3B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAExD,yBAAyB;AACzB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEtD,gDAAgD;AAChD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,CAAA;IAC3B,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,wCAAwC;AACxC,MAAM,MAAM,aAAa,GACrB,UAAU,GAAG,YAAY,GAAG,WAAW,GACvC,aAAa,GAAG,QAAQ,GAAG,cAAc,GACzC,aAAa,GAAG,eAAe,GAAG,cAAc,CAAA;AAEpD,UAAU,0BAA0B;IAClC,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAA;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC;AAkID,iBAAS,0BAA0B,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,KAA2B,EAC3B,QAAQ,EACR,YAAgC,GACjC,EAAE,0BAA0B,qBA2E5B;AAED,eAAO,MAAM,qBAAqB,8DAAmC,CAAA;AAMrE;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,KAAK,CAAC,aAAa,CAmBrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,KAAK,CAAC,aAAa,CAarB;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,KAAK,CAAC,aAAa,CAYrB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,MAAM,CAgBR;AAMD,UAAU,iCAAiC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC;AAED;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CACzC,MAAM,GAAE,iCAAsC,GAC7C,WAAW,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAc3C"}