@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/index.js

@@ -2,65 +2,57 @@
  * Custom Puck fields for the visual editor
  *
  * These fields provide enhanced editing experiences for specific content types.
- */
-// Shared field definitions
-export * from './shared';
+ */ // Shared field definitions
+export * from './shared.js';
 // Custom field components
-export { MediaField, createMediaField } from './MediaField';
-export { ColorPickerField, createColorPickerField, colorToRgba } from './ColorPickerField';
+export { MediaField, createMediaField } from './MediaField.js';
+export { ColorPickerField, createColorPickerField, colorToRgba } from './ColorPickerField.js';
 // =============================================================================
 // RichText Field
 // Uses Puck's native richtext with custom TipTap extensions for colors, sizes, etc.
 // =============================================================================
-export { createRichTextField, fullRichTextField, minimalRichTextField, sidebarRichTextField, 
-// Extensions for advanced customization
-FontSize, 
-// Controls for custom menu building
-ColorPickerControl, ColorPickerPanel, FontSizeControl, HighlightControl, 
-// Utilities
-normalizeHex, hexToRgba, parseColor, FONT_SIZES, FONT_SIZE_UNITS, controlStyles, } from './richtext';
-export { PaddingField, createPaddingField } from './PaddingField';
-export { MarginField, createMarginField } from './MarginField';
-export { BorderField, createBorderField } from './BorderField';
-export { WidthField, createWidthField } from './WidthField';
-export { DimensionsField, createDimensionsField } from './DimensionsField';
-export { dimensionsValueToCSS, getDimensionsSummary, isLegacyWidthValue, migrateWidthValue, } from './shared';
-export { LockedTextField, LockedRadioField, createLockedTextField, createLockedRadioField, lockedSlugField, lockedHomepageField, } from './LockedField';
-export { AlignmentField, createAlignmentField } from './AlignmentField';
-export { JustifyContentField, AlignItemsField, createJustifyContentField, createAlignItemsField, } from './FlexAlignmentField';
-export { VerticalAlignmentField, createVerticalAlignmentField } from './VerticalAlignmentField';
-export { ContentAlignmentField, createContentAlignmentField, alignmentToFlexCSS, alignmentToGridCSS, alignmentToPlaceSelfCSS, alignmentToTailwind, } from './ContentAlignmentField';
-export { SizeField, createSizeField, sizeValueToCSS, getSizeClasses } from './SizeField';
-export { GradientEditor } from './GradientEditor';
-export { BackgroundField, createBackgroundField } from './BackgroundField';
-export { backgroundValueToCSS, gradientValueToCSS, getBackgroundImageOpacity } from './shared';
-export { ResponsiveField, createResponsiveField } from './ResponsiveField';
-export { BREAKPOINTS, isResponsiveValue, responsiveValueToCSS, cssPropertiesToString, visibilityValueToCSS, DEFAULT_VISIBILITY, } from './shared';
-export { ResponsiveVisibilityField, createResponsiveVisibilityField, } from './ResponsiveVisibilityField';
-export { AnimationField, createAnimationField } from './AnimationField';
-export { animationValueToCSS, getEntranceAnimationStyles, getAnimationCSSVariables, getDefaultEasingForAnimation, getRelevantIntensityControls, getStaggerDelay, generateStaggerStyles, EASING_CSS_MAP, ANIMATION_CATEGORIES, DEFAULT_ANIMATION, } from './shared';
-export { TransformField, createTransformField } from './TransformField';
-export { transformValueToCSS, DEFAULT_TRANSFORM } from './shared';
+export { createRichTextField, fullRichTextField, minimalRichTextField, sidebarRichTextField, // Extensions for advanced customization
+FontSize, // Controls for custom menu building
+ColorPickerControl, ColorPickerPanel, FontSizeControl, HighlightControl, // Utilities
+normalizeHex, hexToRgba, parseColor, FONT_SIZES, FONT_SIZE_UNITS, controlStyles } from './richtext/index.js';
+export { PaddingField, createPaddingField } from './PaddingField.js';
+export { MarginField, createMarginField } from './MarginField.js';
+export { BorderField, createBorderField } from './BorderField.js';
+export { WidthField, createWidthField } from './WidthField.js';
+export { DimensionsField, createDimensionsField } from './DimensionsField.js';
+export { dimensionsValueToCSS, getDimensionsSummary, isLegacyWidthValue, migrateWidthValue } from './shared.js';
+export { LockedTextField, LockedRadioField, createLockedTextField, createLockedRadioField, lockedSlugField, lockedHomepageField } from './LockedField.js';
+export { AlignmentField, createAlignmentField } from './AlignmentField.js';
+export { JustifyContentField, AlignItemsField, createJustifyContentField, createAlignItemsField } from './FlexAlignmentField.js';
+export { VerticalAlignmentField, createVerticalAlignmentField } from './VerticalAlignmentField.js';
+export { ContentAlignmentField, createContentAlignmentField, alignmentToFlexCSS, alignmentToGridCSS, alignmentToPlaceSelfCSS, alignmentToTailwind } from './ContentAlignmentField.js';
+export { SizeField, createSizeField, sizeValueToCSS, getSizeClasses } from './SizeField.js';
+export { GradientEditor } from './GradientEditor.js';
+export { BackgroundField, createBackgroundField } from './BackgroundField.js';
+export { backgroundValueToCSS, gradientValueToCSS, getBackgroundImageOpacity } from './shared.js';
+export { ResponsiveField, createResponsiveField } from './ResponsiveField.js';
+export { BREAKPOINTS, isResponsiveValue, responsiveValueToCSS, cssPropertiesToString, visibilityValueToCSS, DEFAULT_VISIBILITY } from './shared.js';
+export { ResponsiveVisibilityField, createResponsiveVisibilityField } from './ResponsiveVisibilityField.js';
+export { AnimationField, createAnimationField } from './AnimationField.js';
+export { animationValueToCSS, getEntranceAnimationStyles, getAnimationCSSVariables, getDefaultEasingForAnimation, getRelevantIntensityControls, getStaggerDelay, generateStaggerStyles, EASING_CSS_MAP, ANIMATION_CATEGORIES, DEFAULT_ANIMATION } from './shared.js';
+export { TransformField, createTransformField } from './TransformField.js';
+export { transformValueToCSS, DEFAULT_TRANSFORM } from './shared.js';
 // =============================================================================
 // Legacy CSS Utilities (Deprecated)
 // =============================================================================
 /**
  * @deprecated No longer needed. RichText component now uses Tailwind Typography's
  * `prose` class for styling. Install @tailwindcss/typography instead.
- */
-export const RICHTEXT_OUTPUT_CSS = '';
+ */ export const RICHTEXT_OUTPUT_CSS = '';
 /**
  * @deprecated No longer needed. RichText component now uses Tailwind Typography's
  * `prose` class for styling. Install @tailwindcss/typography instead.
- */
-export function injectRichtextStyles() {
-    console.warn('injectRichtextStyles() is deprecated. RichText now uses Tailwind Typography. ' +
-        'Install @tailwindcss/typography and use the `prose` class instead.');
+ */ export function injectRichtextStyles() {
+    console.warn('injectRichtextStyles() is deprecated. RichText now uses Tailwind Typography. ' + 'Install @tailwindcss/typography and use the `prose` class instead.');
 }
 // =============================================================================
 // Page-Tree Integration Fields
 // =============================================================================
-export { FolderPickerField, createFolderPickerField } from './FolderPickerField';
-export { PageSegmentField, createPageSegmentField, LockedPageSegmentField, createLockedPageSegmentField, } from './PageSegmentField';
-export { SlugPreviewField, createSlugPreviewField } from './SlugPreviewField';
-//# sourceMappingURL=index.js.map
+export { FolderPickerField, createFolderPickerField } from './FolderPickerField.js';
+export { PageSegmentField, createPageSegmentField, LockedPageSegmentField, createLockedPageSegmentField } from './PageSegmentField.js';
+export { SlugPreviewField, createSlugPreviewField } from './SlugPreviewField.js';

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

@@ -1,9 +1,20 @@
+/**
+ * ColorPickerControl - Text color control for Puck RichText toolbar
+ *
+ * A dropdown color picker with:
+ * - Native color input
+ * - Hex input with validation
+ * - Opacity slider (RGBA support)
+ * - Theme color presets
+ * - "Theme Color (Auto)" option for dark/light mode adaptation
+ */
+import React from 'react';
 import type { Editor } from '@tiptap/react';
 interface ColorPickerControlProps {
     editor: Editor;
     currentColor: string | undefined;
 }
-export declare function ColorPickerControl({ editor, currentColor }: ColorPickerControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorPickerControl({ editor, currentColor }: ColorPickerControlProps): React.JSX.Element;
 interface ColorPickerPanelProps {
     currentColor: string | undefined;
     onColorChange: (color: string | null) => void;
@@ -11,6 +22,5 @@ interface ColorPickerPanelProps {
     mode: 'text' | 'highlight';
     showOpacity?: boolean;
 }
-export declare function ColorPickerPanel({ currentColor, onColorChange, onClose, mode, showOpacity, }: ColorPickerPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorPickerPanel({ currentColor, onColorChange, onClose, mode, showOpacity, }: ColorPickerPanelProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=ColorPickerControl.d.ts.map

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

@@ -9,28 +9,43 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Opacity slider (RGBA support)
  * - Theme color presets
  * - "Theme Color (Auto)" option for dark/light mode adaptation
- */
-import { useState, useCallback } from 'react';
+ */ import React, { useState, useCallback } from 'react';
 import { Palette, ChevronDown } from 'lucide-react';
-import { useTheme } from '../../../theme';
-import { parseColor, normalizeHex, hexToRgba, controlStyles } from './shared';
-import { Dropdown } from './DropdownPortal';
+import { useTheme } from '../../../theme/index.js';
+import { parseColor, normalizeHex, hexToRgba, controlStyles } from './shared.js';
+import { Dropdown } from './DropdownPortal.js';
 export function ColorPickerControl({ editor, currentColor }) {
     const [isOpen, setIsOpen] = useState(false);
-    const handleColorChange = useCallback((color) => {
+    const handleColorChange = useCallback((color)=>{
         if (color) {
             editor.chain().focus().setColor(color).run();
-        }
-        else {
+        } else {
             editor.chain().focus().unsetColor().run();
         }
-    }, [editor]);
-    const close = useCallback(() => setIsOpen(false), []);
+    }, [
+        editor
+    ]);
+    const close = useCallback(()=>setIsOpen(false), []);
     const hasColor = Boolean(currentColor);
-    const trigger = (_jsxs("button", { type: "button", title: "Text Color", style: {
+    const trigger = /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        title: "Text Color",
+        style: {
             ...controlStyles.dropdownTrigger,
-            ...(hasColor ? controlStyles.dropdownTriggerActive : {}),
-        }, children: [_jsx(Palette, { style: controlStyles.icon }), _jsx(ChevronDown, { style: { width: '12px', height: '12px' } }), currentColor && (_jsx("span", { style: {
+            ...hasColor ? controlStyles.dropdownTriggerActive : {}
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Palette, {
+                style: controlStyles.icon
+            }),
+            /*#__PURE__*/ _jsx(ChevronDown, {
+                style: {
+                    width: '12px',
+                    height: '12px'
+                }
+            }),
+            currentColor && /*#__PURE__*/ _jsx("span", {
+                style: {
                     position: 'absolute',
                     bottom: '2px',
                     left: '50%',
@@ -38,11 +53,30 @@ export function ColorPickerControl({ editor, currentColor }) {
                     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: "text" }) }) }));
+                    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: "text"
+            })
+        })
+    });
 }
-export function ColorPickerPanel({ currentColor, onColorChange, onClose, mode, showOpacity = true, }) {
+export function ColorPickerPanel({ currentColor, onColorChange, onClose, mode, showOpacity = true }) {
     const theme = useTheme();
     const presets = theme.colorPresets;
     const parsed = parseColor(currentColor);
@@ -51,21 +85,25 @@ export function ColorPickerPanel({ currentColor, onColorChange, onClose, mode, s
     const [opacity, setOpacity] = useState(parsed.opacity);
     const [hoverTheme, setHoverTheme] = useState(false);
     // Apply color (converts to rgba if opacity < 100)
-    const applyColor = useCallback((h, o) => {
+    const applyColor = useCallback((h, o)=>{
         if (o < 100) {
             onColorChange(hexToRgba(h, o));
-        }
-        else {
+        } else {
             onColorChange(h);
         }
-    }, [onColorChange]);
-    const handleColorInputChange = useCallback((e) => {
+    }, [
+        onColorChange
+    ]);
+    const handleColorInputChange = useCallback((e)=>{
         const newHex = e.target.value;
         setHex(newHex);
         setHexInput(newHex);
         applyColor(newHex, opacity);
-    }, [opacity, applyColor]);
-    const handleHexInputChange = useCallback((e) => {
+    }, [
+        opacity,
+        applyColor
+    ]);
+    const handleHexInputChange = useCallback((e)=>{
         const input = e.target.value;
         setHexInput(input);
         const normalized = normalizeHex(input);
@@ -73,44 +111,169 @@ export function ColorPickerPanel({ currentColor, onColorChange, onClose, mode, s
             setHex(normalized);
             applyColor(normalized, opacity);
         }
-    }, [opacity, applyColor]);
-    const handleHexInputBlur = useCallback(() => {
+    }, [
+        opacity,
+        applyColor
+    ]);
+    const handleHexInputBlur = useCallback(()=>{
         setHexInput(hex);
-    }, [hex]);
-    const handleOpacityChange = useCallback((e) => {
+    }, [
+        hex
+    ]);
+    const handleOpacityChange = useCallback((e)=>{
         const newOpacity = parseInt(e.target.value, 10);
         setOpacity(newOpacity);
         applyColor(hex, newOpacity);
-    }, [hex, applyColor]);
-    const handlePresetClick = useCallback((preset) => {
+    }, [
+        hex,
+        applyColor
+    ]);
+    const handlePresetClick = useCallback((preset)=>{
         setHex(preset.hex);
         setHexInput(preset.hex);
         setOpacity(100);
         applyColor(preset.hex, 100);
         onClose();
-    }, [applyColor, onClose]);
-    const handleClearColor = useCallback(() => {
+    }, [
+        applyColor,
+        onClose
+    ]);
+    const handleClearColor = useCallback(()=>{
         onColorChange(null);
         onClose();
-    }, [onColorChange, onClose]);
+    }, [
+        onColorChange,
+        onClose
+    ]);
     const previewColor = hexToRgba(hex, opacity);
-    return (_jsxs("div", { style: controlStyles.colorPickerContainer, children: [_jsxs("button", { type: "button", onClick: handleClearColor, onMouseEnter: () => setHoverTheme(true), onMouseLeave: () => setHoverTheme(false), style: {
+    return /*#__PURE__*/ _jsxs("div", {
+        style: controlStyles.colorPickerContainer,
+        children: [
+            /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                onClick: handleClearColor,
+                onMouseEnter: ()=>setHoverTheme(true),
+                onMouseLeave: ()=>setHoverTheme(false),
+                style: {
                     ...controlStyles.colorPickerThemeButton,
-                    ...(hoverTheme ? { backgroundColor: 'var(--puck-color-grey-01)' } : {}),
-                }, children: [_jsx("span", { style: controlStyles.colorPickerThemeSwatch }), mode === 'text' ? 'Theme Color (Auto)' : 'Remove Highlight'] }), _jsxs("div", { style: controlStyles.colorPickerRow, children: [_jsx("input", { type: "color", value: hex, onChange: handleColorInputChange, style: controlStyles.colorPickerInput, title: "Pick a color" }), _jsx("input", { type: "text", value: hexInput, onChange: handleHexInputChange, onBlur: handleHexInputBlur, placeholder: "#000000", style: controlStyles.colorPickerHexInput }), _jsxs("div", { style: controlStyles.colorPickerPreview, title: `${hex} at ${opacity}% opacity`, children: [_jsx("div", { style: controlStyles.colorPickerCheckerboard }), _jsx("div", { style: { ...controlStyles.colorPickerOverlay, backgroundColor: previewColor } })] })] }), showOpacity && (_jsxs("div", { style: controlStyles.colorPickerOpacitySection, children: [_jsxs("div", { style: controlStyles.colorPickerOpacityHeader, children: [_jsx("label", { style: controlStyles.colorPickerOpacityLabel, children: "Opacity" }), _jsxs("span", { style: controlStyles.colorPickerOpacityValue, children: [opacity, "%"] })] }), _jsxs("div", { style: controlStyles.colorPickerOpacitySlider, children: [_jsx("div", { style: controlStyles.colorPickerCheckerboard }), _jsx("div", { style: {
+                    ...hoverTheme ? {
+                        backgroundColor: 'var(--puck-color-grey-01)'
+                    } : {}
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: controlStyles.colorPickerThemeSwatch
+                    }),
+                    mode === 'text' ? 'Theme Color (Auto)' : 'Remove Highlight'
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: controlStyles.colorPickerRow,
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        type: "color",
+                        value: hex,
+                        onChange: handleColorInputChange,
+                        style: controlStyles.colorPickerInput,
+                        title: "Pick a color"
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        type: "text",
+                        value: hexInput,
+                        onChange: handleHexInputChange,
+                        onBlur: handleHexInputBlur,
+                        placeholder: "#000000",
+                        style: controlStyles.colorPickerHexInput
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: controlStyles.colorPickerPreview,
+                        title: `${hex} at ${opacity}% opacity`,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: controlStyles.colorPickerCheckerboard
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    ...controlStyles.colorPickerOverlay,
+                                    backgroundColor: previewColor
+                                }
+                            })
+                        ]
+                    })
+                ]
+            }),
+            showOpacity && /*#__PURE__*/ _jsxs("div", {
+                style: controlStyles.colorPickerOpacitySection,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: controlStyles.colorPickerOpacityHeader,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: controlStyles.colorPickerOpacityLabel,
+                                children: "Opacity"
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                style: controlStyles.colorPickerOpacityValue,
+                                children: [
+                                    opacity,
+                                    "%"
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: controlStyles.colorPickerOpacitySlider,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: controlStyles.colorPickerCheckerboard
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
                                     ...controlStyles.colorPickerOverlay,
-                                    background: `linear-gradient(to right, transparent 0%, ${hex} 100%)`,
-                                } }), _jsx("input", { type: "range", min: "0", max: "100", value: opacity, onChange: handleOpacityChange, style: controlStyles.colorPickerOpacityInputRange }), _jsx("div", { style: {
+                                    background: `linear-gradient(to right, transparent 0%, ${hex} 100%)`
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "range",
+                                min: "0",
+                                max: "100",
+                                value: opacity,
+                                onChange: handleOpacityChange,
+                                style: controlStyles.colorPickerOpacityInputRange
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
                                     ...controlStyles.colorPickerOpacityThumb,
-                                    left: `calc(${opacity}% - 2px)`,
-                                } })] })] })), presets.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: controlStyles.colorPickerPresetsLabel, children: "Presets" }), _jsx("div", { style: controlStyles.colorPickerPresetsGrid, children: presets.map((preset) => {
+                                    left: `calc(${opacity}% - 2px)`
+                                }
+                            })
+                        ]
+                    })
+                ]
+            }),
+            presets.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: controlStyles.colorPickerPresetsLabel,
+                        children: "Presets"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: controlStyles.colorPickerPresetsGrid,
+                        children: presets.map((preset)=>{
                             const isSelected = hex.toLowerCase() === preset.hex.toLowerCase();
-                            return (_jsx("button", { type: "button", onClick: () => handlePresetClick(preset), style: {
-                                    ...(isSelected
-                                        ? controlStyles.colorPickerPresetButtonSelected
-                                        : controlStyles.colorPickerPresetButton),
-                                    backgroundColor: preset.hex,
-                                }, title: preset.label }, preset.hex));
-                        }) })] }))] }));
+                            return /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: ()=>handlePresetClick(preset),
+                                style: {
+                                    ...isSelected ? controlStyles.colorPickerPresetButtonSelected : controlStyles.colorPickerPresetButton,
+                                    backgroundColor: preset.hex
+                                },
+                                title: preset.label
+                            }, preset.hex);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
 }
-//# sourceMappingURL=ColorPickerControl.js.map

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

@@ -11,7 +11,7 @@
  * causes the editor to blur, clearing currentRichText state and breaking all menu
  * controls (including native Puck ones like HeadingSelect).
  */
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 interface DropdownProps {
     isOpen: boolean;
     onOpenChange: (open: boolean) => void;
@@ -19,6 +19,5 @@ interface DropdownProps {
     children: ReactNode;
     minWidth?: number;
 }
-export declare function Dropdown({ isOpen, onOpenChange, trigger, children, minWidth }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown({ isOpen, onOpenChange, trigger, children, minWidth }: DropdownProps): React.JSX.Element;
 export { Dropdown as DropdownPortal };
-//# sourceMappingURL=DropdownPortal.d.ts.map

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

@@ -1,16 +1,46 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Root as PopoverRoot, Trigger as PopoverTrigger, Portal as PopoverPortal, Content as PopoverContent, } from '@radix-ui/react-popover';
+/**
+ * Dropdown - Renders dropdown content using Radix Popover for proper focus management
+ *
+ * Uses @radix-ui/react-popover which provides:
+ * - Proper focus management that integrates with Puck's dirty state tracking
+ * - Automatic close on escape and click outside
+ * - Focus restoration to trigger element on close
+ *
+ * IMPORTANT: Uses data-puck-rte-menu attribute so Puck's blur handler recognizes
+ * this dropdown as part of the rich text menu. Without this, clicking the dropdown
+ * causes the editor to blur, clearing currentRichText state and breaking all menu
+ * controls (including native Puck ones like HeadingSelect).
+ */ import React from 'react';
+import { Root as PopoverRoot, Trigger as PopoverTrigger, Portal as PopoverPortal, Content as PopoverContent } from '@radix-ui/react-popover';
 export function Dropdown({ isOpen, onOpenChange, trigger, children, minWidth = 160 }) {
-    return (_jsxs(PopoverRoot, { open: isOpen, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverPortal, { children: _jsx(PopoverContent, { align: "start", sideOffset: 4, style: {
+    return /*#__PURE__*/ _jsxs(PopoverRoot, {
+        open: isOpen,
+        onOpenChange: onOpenChange,
+        children: [
+            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                asChild: true,
+                children: trigger
+            }),
+            /*#__PURE__*/ _jsx(PopoverPortal, {
+                children: /*#__PURE__*/ _jsx(PopoverContent, {
+                    align: "start",
+                    sideOffset: 4,
+                    style: {
                         backgroundColor: 'var(--puck-color-white)',
                         border: '1px solid var(--puck-color-grey-09)',
                         borderRadius: '8px',
                         boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                         zIndex: 99999,
-                        minWidth,
-                    }, "data-puck-rte-menu": true, children: children }) })] }));
+                        minWidth
+                    },
+                    "data-puck-rte-menu": true,
+                    children: children
+                })
+            })
+        ]
+    });
 }
 // Keep the old export name for backwards compatibility during migration
 export { Dropdown as DropdownPortal };
-//# sourceMappingURL=DropdownPortal.js.map

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

@@ -1,8 +1,15 @@
+/**
+ * FontSizeControl - Font size control for Puck RichText toolbar
+ *
+ * A dropdown with:
+ * - 9 preset sizes (XS to 4XL)
+ * - Custom size input with px/rem/em unit selection
+ */
+import React from 'react';
 import type { Editor } from '@tiptap/react';
 interface FontSizeControlProps {
     editor: Editor;
     currentSize: string | undefined;
 }
-export declare function FontSizeControl({ editor, currentSize }: FontSizeControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function FontSizeControl({ editor, currentSize }: FontSizeControlProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=FontSizeControl.d.ts.map