@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/richtext/controls/FontSizeControl.js

@@ -6,56 +6,139 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * A dropdown with:
  * - 9 preset sizes (XS to 4XL)
  * - Custom size input with px/rem/em unit selection
- */
-import { useState, useCallback } from 'react';
+ */ import React, { useState, useCallback } from 'react';
 import { ALargeSmall, ChevronDown } from 'lucide-react';
-import { FONT_SIZES, FONT_SIZE_UNITS, controlStyles } from './shared';
-import { Dropdown } from './DropdownPortal';
+import { FONT_SIZES, FONT_SIZE_UNITS, controlStyles } from './shared.js';
+import { Dropdown } from './DropdownPortal.js';
 export function FontSizeControl({ editor, currentSize }) {
     const [isOpen, setIsOpen] = useState(false);
     const [customValue, setCustomValue] = useState('');
     const [customUnit, setCustomUnit] = useState('px');
-    const handlePresetClick = useCallback((value) => {
+    const handlePresetClick = useCallback((value)=>{
         if (value) {
             editor.chain().focus().setFontSize(value).run();
-        }
-        else {
+        } else {
             editor.chain().focus().unsetFontSize().run();
         }
         setIsOpen(false);
-    }, [editor]);
-    const handleCustomApply = useCallback(() => {
+    }, [
+        editor
+    ]);
+    const handleCustomApply = useCallback(()=>{
         if (customValue) {
             const size = `${customValue}${customUnit}`;
             editor.chain().focus().setFontSize(size).run();
             setIsOpen(false);
             setCustomValue('');
         }
-    }, [editor, customValue, customUnit]);
-    const handleCustomKeyDown = useCallback((e) => {
+    }, [
+        editor,
+        customValue,
+        customUnit
+    ]);
+    const handleCustomKeyDown = useCallback((e)=>{
         if (e.key === 'Enter') {
             e.preventDefault();
             handleCustomApply();
         }
-    }, [handleCustomApply]);
+    }, [
+        handleCustomApply
+    ]);
     // Find current preset label if any
-    const currentPreset = FONT_SIZES.find((s) => s.value === currentSize);
+    const currentPreset = FONT_SIZES.find((s)=>s.value === currentSize);
     const hasCustomSize = currentSize && !currentPreset;
-    const trigger = (_jsxs("button", { type: "button", title: "Font Size", style: {
+    const trigger = /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        title: "Font Size",
+        style: {
             ...controlStyles.dropdownTrigger,
-            ...(currentSize ? controlStyles.dropdownTriggerActive : {}),
-        }, children: [_jsx(ALargeSmall, { style: controlStyles.icon }), _jsx(ChevronDown, { style: { width: '12px', height: '12px' } })] }));
-    return (_jsx("div", { style: { position: 'relative' }, children: _jsxs(Dropdown, { isOpen: isOpen, onOpenChange: setIsOpen, trigger: trigger, minWidth: 200, children: [_jsx("div", { style: controlStyles.dropdownLabel, children: "Presets" }), _jsx("div", { style: controlStyles.fontSizeGrid, children: FONT_SIZES.map((size) => {
-                        const isActive = size.value === currentSize || (!size.value && !currentSize);
-                        return (_jsx("button", { type: "button", onClick: () => handlePresetClick(size.value), title: size.px, style: {
+            ...currentSize ? controlStyles.dropdownTriggerActive : {}
+        },
+        children: [
+            /*#__PURE__*/ _jsx(ALargeSmall, {
+                style: controlStyles.icon
+            }),
+            /*#__PURE__*/ _jsx(ChevronDown, {
+                style: {
+                    width: '12px',
+                    height: '12px'
+                }
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            position: 'relative'
+        },
+        children: /*#__PURE__*/ _jsxs(Dropdown, {
+            isOpen: isOpen,
+            onOpenChange: setIsOpen,
+            trigger: trigger,
+            minWidth: 200,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    style: controlStyles.dropdownLabel,
+                    children: "Presets"
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: controlStyles.fontSizeGrid,
+                    children: FONT_SIZES.map((size)=>{
+                        const isActive = size.value === currentSize || !size.value && !currentSize;
+                        return /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: ()=>handlePresetClick(size.value),
+                            title: size.px,
+                            style: {
                                 ...controlStyles.fontSizeButton,
-                                ...(isActive ? controlStyles.fontSizeButtonActive : {}),
-                            }, children: size.label }, size.label));
-                    }) }), _jsxs("div", { style: controlStyles.customSizeRow, children: [_jsx("input", { type: "number", placeholder: "16", min: "8", max: "200", value: customValue, onChange: (e) => setCustomValue(e.target.value), onKeyDown: handleCustomKeyDown, style: controlStyles.customSizeInput }), _jsx("select", { value: customUnit, onChange: (e) => setCustomUnit(e.target.value), style: controlStyles.customSizeSelect, children: FONT_SIZE_UNITS.map((unit) => (_jsx("option", { value: unit, children: unit }, unit))) }), _jsx("button", { type: "button", onClick: handleCustomApply, style: controlStyles.customSizeApply, children: "Apply" })] }), hasCustomSize && (_jsxs("div", { style: {
+                                ...isActive ? controlStyles.fontSizeButtonActive : {}
+                            },
+                            children: size.label
+                        }, size.label);
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: controlStyles.customSizeRow,
+                    children: [
+                        /*#__PURE__*/ _jsx("input", {
+                            type: "number",
+                            placeholder: "16",
+                            min: "8",
+                            max: "200",
+                            value: customValue,
+                            onChange: (e)=>setCustomValue(e.target.value),
+                            onKeyDown: handleCustomKeyDown,
+                            style: controlStyles.customSizeInput
+                        }),
+                        /*#__PURE__*/ _jsx("select", {
+                            value: customUnit,
+                            onChange: (e)=>setCustomUnit(e.target.value),
+                            style: controlStyles.customSizeSelect,
+                            children: FONT_SIZE_UNITS.map((unit)=>/*#__PURE__*/ _jsx("option", {
+                                    value: unit,
+                                    children: unit
+                                }, unit))
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: handleCustomApply,
+                            style: controlStyles.customSizeApply,
+                            children: "Apply"
+                        })
+                    ]
+                }),
+                hasCustomSize && /*#__PURE__*/ _jsxs("div", {
+                    style: {
                         padding: '8px 12px',
                         fontSize: '12px',
                         color: 'var(--puck-color-grey-05)',
-                        borderTop: '1px solid var(--puck-color-grey-03)',
-                    }, children: ["Current: ", currentSize] }))] }) }));
+                        borderTop: '1px solid var(--puck-color-grey-03)'
+                    },
+                    children: [
+                        "Current: ",
+                        currentSize
+                    ]
+                })
+            ]
+        })
+    });
 }
-//# sourceMappingURL=FontSizeControl.js.map

package/dist/fields/richtext/controls/HighlightControl.d.ts

@@ -1,9 +1,19 @@
+/**
+ * HighlightControl - Text highlight control for Puck RichText toolbar
+ *
+ * A dropdown color picker for text highlighting with:
+ * - Native color input
+ * - Hex input with validation
+ * - Opacity slider (RGBA support)
+ * - Theme color presets
+ * - Remove highlight option
+ */
+import React from 'react';
 import type { Editor } from '@tiptap/react';
 interface HighlightControlProps {
     editor: Editor;
     currentColor: string | undefined;
     isActive: boolean;
 }
-export declare function HighlightControl({ editor, currentColor, isActive }: HighlightControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function HighlightControl({ editor, currentColor, isActive }: HighlightControlProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=HighlightControl.d.ts.map

package/dist/fields/richtext/controls/HighlightControl.js

@@ -9,27 +9,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Opacity slider (RGBA support)
  * - Theme color presets
  * - Remove highlight option
- */
-import { useState, useCallback } from 'react';
+ */ import React, { useState, useCallback } from 'react';
 import { Highlighter, ChevronDown } from 'lucide-react';
-import { controlStyles } from './shared';
-import { ColorPickerPanel } from './ColorPickerControl';
-import { Dropdown } from './DropdownPortal';
+import { controlStyles } from './shared.js';
+import { ColorPickerPanel } from './ColorPickerControl.js';
+import { Dropdown } from './DropdownPortal.js';
 export function HighlightControl({ editor, currentColor, isActive }) {
     const [isOpen, setIsOpen] = useState(false);
-    const handleColorChange = useCallback((color) => {
+    const handleColorChange = useCallback((color)=>{
         if (color) {
-            editor.chain().focus().setHighlight({ color }).run();
-        }
-        else {
+            editor.chain().focus().setHighlight({
+                color
+            }).run();
+        } else {
             editor.chain().focus().unsetHighlight().run();
         }
-    }, [editor]);
-    const close = useCallback(() => setIsOpen(false), []);
-    const trigger = (_jsxs("button", { type: "button", title: "Highlight", style: {
+    }, [
+        editor
+    ]);
+    const close = useCallback(()=>setIsOpen(false), []);
+    const trigger = /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        title: "Highlight",
+        style: {
             ...controlStyles.dropdownTrigger,
-            ...(isActive ? controlStyles.dropdownTriggerActive : {}),
-        }, children: [_jsx(Highlighter, { style: controlStyles.icon }), _jsx(ChevronDown, { style: { width: '12px', height: '12px' } }), currentColor && (_jsx("span", { style: {
+            ...isActive ? controlStyles.dropdownTriggerActive : {}
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Highlighter, {
+                style: controlStyles.icon
+            }),
+            /*#__PURE__*/ _jsx(ChevronDown, {
+                style: {
+                    width: '12px',
+                    height: '12px'
+                }
+            }),
+            currentColor && /*#__PURE__*/ _jsx("span", {
+                style: {
                     position: 'absolute',
                     bottom: '2px',
                     left: '50%',
@@ -37,8 +54,26 @@ export function HighlightControl({ editor, currentColor, isActive }) {
                     width: '12px',
                     height: '3px',
                     borderRadius: '1px',
-                    backgroundColor: currentColor,
-                } }))] }));
-    return (_jsx("div", { style: { position: 'relative' }, children: _jsx(Dropdown, { isOpen: isOpen, onOpenChange: setIsOpen, trigger: trigger, minWidth: 260, children: _jsx(ColorPickerPanel, { currentColor: currentColor, onColorChange: handleColorChange, onClose: close, mode: "highlight" }) }) }));
+                    backgroundColor: currentColor
+                }
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            position: 'relative'
+        },
+        children: /*#__PURE__*/ _jsx(Dropdown, {
+            isOpen: isOpen,
+            onOpenChange: setIsOpen,
+            trigger: trigger,
+            minWidth: 260,
+            children: /*#__PURE__*/ _jsx(ColorPickerPanel, {
+                currentColor: currentColor,
+                onColorChange: handleColorChange,
+                onClose: close,
+                mode: "highlight"
+            })
+        })
+    });
 }
-//# sourceMappingURL=HighlightControl.js.map

package/dist/fields/richtext/controls/index.d.ts

@@ -3,9 +3,8 @@
  *
  * Custom controls for Puck's native richtext field.
  */
-export { ColorPickerControl, ColorPickerPanel } from './ColorPickerControl';
-export { FontSizeControl } from './FontSizeControl';
-export { HighlightControl } from './HighlightControl';
-export { normalizeHex, hexToRgba, parseColor, FONT_SIZES, FONT_SIZE_UNITS, controlStyles, } from './shared';
-export type { FontSizeUnit } from './shared';
-//# sourceMappingURL=index.d.ts.map
+export { ColorPickerControl, ColorPickerPanel } from './ColorPickerControl.js';
+export { FontSizeControl } from './FontSizeControl.js';
+export { HighlightControl } from './HighlightControl.js';
+export { normalizeHex, hexToRgba, parseColor, FONT_SIZES, FONT_SIZE_UNITS, controlStyles, } from './shared.js';
+export type { FontSizeUnit } from './shared.js';

package/dist/fields/richtext/controls/index.js

@@ -2,15 +2,10 @@
  * RichText toolbar controls
  *
  * Custom controls for Puck's native richtext field.
- */
-export { ColorPickerControl, ColorPickerPanel } from './ColorPickerControl';
-export { FontSizeControl } from './FontSizeControl';
-export { HighlightControl } from './HighlightControl';
-export { 
-// Color utilities
-normalizeHex, hexToRgba, parseColor, 
-// Font size presets
-FONT_SIZES, FONT_SIZE_UNITS, 
-// Shared styles
-controlStyles, } from './shared';
-//# sourceMappingURL=index.js.map
+ */ export { ColorPickerControl, ColorPickerPanel } from './ColorPickerControl.js';
+export { FontSizeControl } from './FontSizeControl.js';
+export { HighlightControl } from './HighlightControl.js';
+export { // Color utilities
+normalizeHex, hexToRgba, parseColor, // Font size presets
+FONT_SIZES, FONT_SIZE_UNITS, // Shared styles
+controlStyles } from './shared.js';

package/dist/fields/richtext/controls/shared.d.ts

@@ -94,4 +94,3 @@ export declare const controlStyles: {
     customSizeSelect: CSSProperties;
     customSizeApply: CSSProperties;
 };
-//# sourceMappingURL=shared.d.ts.map