@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/WidthField.js

@@ -8,9 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Custom max-width input with unit selector (px, %, rem, vw)
  * - Content alignment (left, center, right)
  * - Preset quick-select buttons for common widths
- */
-import { useCallback, memo } from 'react';
-import { X, AlignLeft, AlignCenter, AlignRight, MoveHorizontal, Container, SlidersHorizontal, } from 'lucide-react';
+ */ import React, { useCallback, memo } from 'react';
+import { X, AlignLeft, AlignCenter, AlignRight, MoveHorizontal, Container, SlidersHorizontal } from 'lucide-react';
 // =============================================================================
 // Default Value
 // =============================================================================
@@ -18,16 +17,28 @@ const DEFAULT_VALUE = {
     mode: 'contained',
     maxWidth: 1200,
     unit: 'px',
-    alignment: 'center',
+    alignment: 'center'
 };
 // =============================================================================
 // Preset Widths
 // =============================================================================
 const WIDTH_PRESETS = [
-    { label: 'Narrow', value: 680 },
-    { label: 'Medium', value: 960 },
-    { label: 'Wide', value: 1200 },
-    { label: 'XL', value: 1440 },
+    {
+        label: 'Narrow',
+        value: 680
+    },
+    {
+        label: 'Medium',
+        value: 960
+    },
+    {
+        label: 'Wide',
+        value: 1200
+    },
+    {
+        label: 'XL',
+        value: 1440
+    }
 ];
 // =============================================================================
 // Styles
@@ -36,17 +47,17 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '12px',
+        gap: '12px'
     },
     header: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
     },
     label: {
         fontSize: '14px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     clearButton: {
         display: 'flex',
@@ -59,12 +70,12 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     modeGroup: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '4px',
+        gap: '4px'
     },
     modeButton: {
         display: 'inline-flex',
@@ -77,7 +88,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     modeButtonActive: {
         display: 'inline-flex',
@@ -90,7 +101,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     controlsPanel: {
         display: 'flex',
@@ -98,23 +109,23 @@ const styles = {
         gap: '12px',
         padding: '12px',
         backgroundColor: 'var(--theme-elevation-50)',
-        borderRadius: '6px',
+        borderRadius: '6px'
     },
     sectionLabel: {
         fontSize: '10px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     presetGroup: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '6px',
+        gap: '6px'
     },
     presetButtons: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '4px',
+        gap: '4px'
     },
     presetButton: {
         height: '28px',
@@ -124,7 +135,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     presetButtonActive: {
         height: '28px',
@@ -134,18 +145,18 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     inputGroup: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '6px',
+        gap: '6px'
     },
     inputRow: {
         display: 'flex',
         alignItems: 'center',
         flexWrap: 'wrap',
-        gap: '8px',
+        gap: '8px'
     },
     input: {
         flex: 1,
@@ -157,12 +168,12 @@ const styles = {
         border: '1px solid var(--theme-elevation-150)',
         borderRadius: '4px',
         backgroundColor: 'var(--theme-input-bg)',
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     unitGroup: {
         display: 'flex',
         flexShrink: 0,
-        gap: '4px',
+        gap: '4px'
     },
     unitButton: {
         height: '32px',
@@ -173,7 +184,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     unitButtonActive: {
         height: '32px',
@@ -184,28 +195,28 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     footer: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         flexWrap: 'wrap',
-        gap: '8px',
+        gap: '8px'
     },
     alignGroup: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     alignLabel: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
-        flexShrink: 0,
+        flexShrink: 0
     },
     alignButtons: {
         display: 'flex',
-        gap: '4px',
+        gap: '4px'
     },
     alignButton: {
         display: 'flex',
@@ -218,7 +229,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     alignButtonActive: {
         display: 'flex',
@@ -231,109 +242,293 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     alignButtonDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     },
     summary: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
-        fontFamily: 'monospace',
-    },
+        fontFamily: 'monospace'
+    }
 };
 // =============================================================================
 // WidthField Component
 // =============================================================================
-function WidthFieldInner({ value, onChange, label, readOnly, }) {
+function WidthFieldInner({ value, onChange, label, readOnly }) {
     const currentValue = value || DEFAULT_VALUE;
-    const handleModeChange = useCallback((mode) => {
+    const handleModeChange = useCallback((mode)=>{
         if (mode === 'full') {
             onChange({
                 ...currentValue,
                 mode,
-                alignment: 'center',
+                alignment: 'center'
             });
-        }
-        else {
+        } else {
             onChange({
                 ...currentValue,
-                mode,
+                mode
             });
         }
-    }, [currentValue, onChange]);
-    const handleMaxWidthChange = useCallback((maxWidth) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleMaxWidthChange = useCallback((maxWidth)=>{
         onChange({
             ...currentValue,
-            maxWidth,
+            maxWidth
         });
-    }, [currentValue, onChange]);
-    const handleUnitChange = useCallback((unit) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleUnitChange = useCallback((unit)=>{
         onChange({
             ...currentValue,
-            unit,
+            unit
         });
-    }, [currentValue, onChange]);
-    const handleAlignmentChange = useCallback((alignment) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleAlignmentChange = useCallback((alignment)=>{
         onChange({
             ...currentValue,
-            alignment,
+            alignment
         });
-    }, [currentValue, onChange]);
-    const handlePresetSelect = useCallback((presetValue) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handlePresetSelect = useCallback((presetValue)=>{
         onChange({
             ...currentValue,
             mode: 'contained',
             maxWidth: presetValue,
-            unit: 'px',
+            unit: 'px'
         });
-    }, [currentValue, onChange]);
-    const handleClear = useCallback(() => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleClear = useCallback(()=>{
         onChange(null);
-    }, [onChange]);
+    }, [
+        onChange
+    ]);
     const modeConfig = [
-        { mode: 'full', icon: MoveHorizontal, label: 'Full', title: 'Full width (100%)' },
-        { mode: 'contained', icon: Container, label: 'Contain', title: 'Contained (centered with max-width)' },
-        { mode: 'custom', icon: SlidersHorizontal, label: 'Custom', title: 'Custom width settings' },
+        {
+            mode: 'full',
+            icon: MoveHorizontal,
+            label: 'Full',
+            title: 'Full width (100%)'
+        },
+        {
+            mode: 'contained',
+            icon: Container,
+            label: 'Contain',
+            title: 'Contained (centered with max-width)'
+        },
+        {
+            mode: 'custom',
+            icon: SlidersHorizontal,
+            label: 'Custom',
+            title: 'Custom width settings'
+        }
     ];
     const alignmentConfig = [
-        { alignment: 'left', icon: AlignLeft, title: 'Align left' },
-        { alignment: 'center', icon: AlignCenter, title: 'Align center' },
-        { alignment: 'right', icon: AlignRight, title: 'Align right' },
+        {
+            alignment: 'left',
+            icon: AlignLeft,
+            title: 'Align left'
+        },
+        {
+            alignment: 'center',
+            icon: AlignCenter,
+            title: 'Align center'
+        },
+        {
+            alignment: 'right',
+            icon: AlignRight,
+            title: 'Align right'
+        }
     ];
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [label && (_jsx("label", { style: styles.label, children: label })), value && !readOnly && (_jsx("button", { type: "button", onClick: handleClear, style: styles.clearButton, title: "Reset to default", children: _jsx(X, { style: { width: '16px', height: '16px' } }) }))] }), _jsx("div", { style: styles.modeGroup, children: modeConfig.map(({ mode, icon: Icon, label: modeLabel, title }) => {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.header,
+                children: [
+                    label && /*#__PURE__*/ _jsx("label", {
+                        style: styles.label,
+                        children: label
+                    }),
+                    value && !readOnly && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleClear,
+                        style: styles.clearButton,
+                        title: "Reset to default",
+                        children: /*#__PURE__*/ _jsx(X, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.modeGroup,
+                children: modeConfig.map(({ mode, icon: Icon, label: modeLabel, title })=>{
                     const isActive = currentValue.mode === mode;
-                    return (_jsxs("button", { type: "button", onClick: () => handleModeChange(mode), disabled: readOnly, style: isActive ? styles.modeButtonActive : styles.modeButton, title: title, children: [_jsx(Icon, { style: { width: '14px', height: '14px' } }), modeLabel] }, mode));
-                }) }), currentValue.mode !== 'full' && (_jsxs("div", { style: styles.controlsPanel, children: [_jsxs("div", { style: styles.presetGroup, children: [_jsx("label", { style: styles.sectionLabel, children: "Presets" }), _jsx("div", { style: styles.presetButtons, children: WIDTH_PRESETS.map((preset) => {
+                    return /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: ()=>handleModeChange(mode),
+                        disabled: readOnly,
+                        style: isActive ? styles.modeButtonActive : styles.modeButton,
+                        title: title,
+                        children: [
+                            /*#__PURE__*/ _jsx(Icon, {
+                                style: {
+                                    width: '14px',
+                                    height: '14px'
+                                }
+                            }),
+                            modeLabel
+                        ]
+                    }, mode);
+                })
+            }),
+            currentValue.mode !== 'full' && /*#__PURE__*/ _jsxs("div", {
+                style: styles.controlsPanel,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.presetGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.sectionLabel,
+                                children: "Presets"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: styles.presetButtons,
+                                children: WIDTH_PRESETS.map((preset)=>{
                                     const isActive = currentValue.maxWidth === preset.value && currentValue.unit === 'px';
-                                    return (_jsx("button", { type: "button", onClick: () => handlePresetSelect(preset.value), disabled: readOnly, style: isActive ? styles.presetButtonActive : styles.presetButton, children: preset.label }, preset.value));
-                                }) })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.sectionLabel, children: "Max Width" }), _jsxs("div", { style: styles.inputRow, children: [_jsx("input", { type: "number", min: 0, value: currentValue.maxWidth, onChange: (e) => handleMaxWidthChange(parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input }), _jsx("div", { style: styles.unitGroup, children: ['px', '%', 'rem', 'vw'].map((unit) => {
+                                    return /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handlePresetSelect(preset.value),
+                                        disabled: readOnly,
+                                        style: isActive ? styles.presetButtonActive : styles.presetButton,
+                                        children: preset.label
+                                    }, preset.value);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.inputGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.sectionLabel,
+                                children: "Max Width"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputRow,
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.maxWidth,
+                                        onChange: (e)=>handleMaxWidthChange(parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        style: styles.unitGroup,
+                                        children: [
+                                            'px',
+                                            '%',
+                                            'rem',
+                                            'vw'
+                                        ].map((unit)=>{
                                             const isActive = currentValue.unit === unit;
-                                            return (_jsx("button", { type: "button", onClick: () => handleUnitChange(unit), disabled: readOnly, style: isActive ? styles.unitButtonActive : styles.unitButton, children: unit }, unit));
-                                        }) })] })] })] })), _jsxs("div", { style: styles.footer, children: [_jsxs("div", { style: styles.alignGroup, children: [_jsx("label", { style: styles.alignLabel, children: "Align:" }), _jsx("div", { style: styles.alignButtons, children: alignmentConfig.map(({ alignment, icon: Icon, title }) => {
+                                            return /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>handleUnitChange(unit),
+                                                disabled: readOnly,
+                                                style: isActive ? styles.unitButtonActive : styles.unitButton,
+                                                children: unit
+                                            }, unit);
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.footer,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.alignGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.alignLabel,
+                                children: "Align:"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: styles.alignButtons,
+                                children: alignmentConfig.map(({ alignment, icon: Icon, title })=>{
                                     const isActive = currentValue.alignment === alignment;
                                     const isDisabled = readOnly || currentValue.mode === 'full';
-                                    return (_jsx("button", { type: "button", onClick: () => handleAlignmentChange(alignment), disabled: isDisabled, style: {
-                                            ...(isActive ? styles.alignButtonActive : styles.alignButton),
-                                            ...(isDisabled ? styles.alignButtonDisabled : {}),
-                                        }, title: title, children: _jsx(Icon, { style: { width: '14px', height: '14px' } }) }, alignment));
-                                }) })] }), _jsx("span", { style: styles.summary, children: currentValue.mode === 'full'
-                            ? '100%'
-                            : `${currentValue.maxWidth}${currentValue.unit}` })] })] }));
+                                    return /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handleAlignmentChange(alignment),
+                                        disabled: isDisabled,
+                                        style: {
+                                            ...isActive ? styles.alignButtonActive : styles.alignButton,
+                                            ...isDisabled ? styles.alignButtonDisabled : {}
+                                        },
+                                        title: title,
+                                        children: /*#__PURE__*/ _jsx(Icon, {
+                                            style: {
+                                                width: '14px',
+                                                height: '14px'
+                                            }
+                                        })
+                                    }, alignment);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        style: styles.summary,
+                        children: currentValue.mode === 'full' ? '100%' : `${currentValue.maxWidth}${currentValue.unit}`
+                    })
+                ]
+            })
+        ]
+    });
 }
-export const WidthField = memo(WidthFieldInner);
+export const WidthField = /*#__PURE__*/ memo(WidthFieldInner);
 // =============================================================================
 // Field Configuration Factory
 // =============================================================================
 /**
  * Creates a Puck field configuration for width control
- */
-export function createWidthField(config) {
+ */ export function createWidthField(config) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(WidthField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(WidthField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly
+            })
     };
 }
-//# sourceMappingURL=WidthField.js.map

package/dist/fields/index.d.ts

@@ -3,44 +3,44 @@
  *
  * These fields provide enhanced editing experiences for specific content types.
  */
-export * from './shared';
-export { MediaField, createMediaField } from './MediaField';
-export type { MediaReference } from './MediaField';
-export { ColorPickerField, createColorPickerField, colorToRgba } from './ColorPickerField';
-export { createRichTextField, fullRichTextField, minimalRichTextField, sidebarRichTextField, type CreateRichTextFieldOptions, FontSize, ColorPickerControl, ColorPickerPanel, FontSizeControl, HighlightControl, normalizeHex, hexToRgba, parseColor, FONT_SIZES, FONT_SIZE_UNITS, controlStyles, type FontSizeUnit, } from './richtext';
-export { PaddingField, createPaddingField } from './PaddingField';
-export { MarginField, createMarginField } from './MarginField';
-export type { MarginValue } 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 type { DimensionsValue, DimensionConstraint, DimensionsUnit, DimensionsMode, ContentAlignment, } from './shared';
-export { LockedTextField, LockedRadioField, createLockedTextField, createLockedRadioField, lockedSlugField, lockedHomepageField, } from './LockedField';
-export { AlignmentField, createAlignmentField } from './AlignmentField';
-export type { Alignment } from './AlignmentField';
-export { JustifyContentField, AlignItemsField, createJustifyContentField, createAlignItemsField, } from './FlexAlignmentField';
-export type { JustifyContent, AlignItems } from './FlexAlignmentField';
-export { VerticalAlignmentField, createVerticalAlignmentField } from './VerticalAlignmentField';
-export type { VerticalAlignment } from './VerticalAlignmentField';
-export { ContentAlignmentField, createContentAlignmentField, alignmentToFlexCSS, alignmentToGridCSS, alignmentToPlaceSelfCSS, alignmentToTailwind, } from './ContentAlignmentField';
-export type { ContentAlignmentValue, HorizontalAlign, VerticalAlign, PositionLabel, } from './ContentAlignmentField';
-export { SizeField, createSizeField, sizeValueToCSS, getSizeClasses } from './SizeField';
-export type { SizeValue, SizeMode, SizeUnit } from './SizeField';
-export { GradientEditor } from './GradientEditor';
-export { BackgroundField, createBackgroundField } from './BackgroundField';
-export type { BackgroundValue, BackgroundImageValue, BackgroundOverlay, GradientValue, GradientStop, GradientMask, } from './shared';
-export { backgroundValueToCSS, gradientValueToCSS, getBackgroundImageOpacity } from './shared';
-export { ResponsiveField, createResponsiveField } from './ResponsiveField';
-export type { Breakpoint, ResponsiveValue, VisibilityValue, ResponsiveCSSResult } from './shared';
-export { BREAKPOINTS, isResponsiveValue, responsiveValueToCSS, cssPropertiesToString, visibilityValueToCSS, DEFAULT_VISIBILITY, } from './shared';
-export { ResponsiveVisibilityField, createResponsiveVisibilityField, } from './ResponsiveVisibilityField';
-export { AnimationField, createAnimationField } from './AnimationField';
-export type { AnimationValue, EasingFunction, AdvancedEasingFunction, EntranceAnimation, AnimationOrigin, AnimationCategory, StaggerConfig, StaggerDirection, } from './shared';
-export { animationValueToCSS, getEntranceAnimationStyles, getAnimationCSSVariables, getDefaultEasingForAnimation, getRelevantIntensityControls, getStaggerDelay, generateStaggerStyles, EASING_CSS_MAP, ANIMATION_CATEGORIES, DEFAULT_ANIMATION, } from './shared';
-export { TransformField, createTransformField } from './TransformField';
-export type { TransformValue, TransformOrigin } from './shared';
-export { transformValueToCSS, DEFAULT_TRANSFORM } from './shared';
+export * from './shared.js';
+export { MediaField, createMediaField } from './MediaField.js';
+export type { MediaReference } from './MediaField.js';
+export { ColorPickerField, createColorPickerField, colorToRgba } from './ColorPickerField.js';
+export { createRichTextField, fullRichTextField, minimalRichTextField, sidebarRichTextField, type CreateRichTextFieldOptions, FontSize, ColorPickerControl, ColorPickerPanel, FontSizeControl, HighlightControl, normalizeHex, hexToRgba, parseColor, FONT_SIZES, FONT_SIZE_UNITS, controlStyles, type FontSizeUnit, } from './richtext/index.js';
+export { PaddingField, createPaddingField } from './PaddingField.js';
+export { MarginField, createMarginField } from './MarginField.js';
+export type { MarginValue } 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 type { DimensionsValue, DimensionConstraint, DimensionsUnit, DimensionsMode, ContentAlignment, } from './shared.js';
+export { LockedTextField, LockedRadioField, createLockedTextField, createLockedRadioField, lockedSlugField, lockedHomepageField, } from './LockedField.js';
+export { AlignmentField, createAlignmentField } from './AlignmentField.js';
+export type { Alignment } from './AlignmentField.js';
+export { JustifyContentField, AlignItemsField, createJustifyContentField, createAlignItemsField, } from './FlexAlignmentField.js';
+export type { JustifyContent, AlignItems } from './FlexAlignmentField.js';
+export { VerticalAlignmentField, createVerticalAlignmentField } from './VerticalAlignmentField.js';
+export type { VerticalAlignment } from './VerticalAlignmentField.js';
+export { ContentAlignmentField, createContentAlignmentField, alignmentToFlexCSS, alignmentToGridCSS, alignmentToPlaceSelfCSS, alignmentToTailwind, } from './ContentAlignmentField.js';
+export type { ContentAlignmentValue, HorizontalAlign, VerticalAlign, PositionLabel, } from './ContentAlignmentField.js';
+export { SizeField, createSizeField, sizeValueToCSS, getSizeClasses } from './SizeField.js';
+export type { SizeValue, SizeMode, SizeUnit } from './SizeField.js';
+export { GradientEditor } from './GradientEditor.js';
+export { BackgroundField, createBackgroundField } from './BackgroundField.js';
+export type { BackgroundValue, BackgroundImageValue, BackgroundOverlay, GradientValue, GradientStop, GradientMask, } from './shared.js';
+export { backgroundValueToCSS, gradientValueToCSS, getBackgroundImageOpacity } from './shared.js';
+export { ResponsiveField, createResponsiveField } from './ResponsiveField.js';
+export type { Breakpoint, ResponsiveValue, VisibilityValue, ResponsiveCSSResult } from './shared.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 type { AnimationValue, EasingFunction, AdvancedEasingFunction, EntranceAnimation, AnimationOrigin, AnimationCategory, StaggerConfig, StaggerDirection, } from './shared.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 type { TransformValue, TransformOrigin } from './shared.js';
+export { transformValueToCSS, DEFAULT_TRANSFORM } from './shared.js';
 /**
  * @deprecated No longer needed. RichText component now uses Tailwind Typography's
  * `prose` class for styling. Install @tailwindcss/typography instead.
@@ -51,7 +51,6 @@ export declare const RICHTEXT_OUTPUT_CSS = "";
  * `prose` class for styling. Install @tailwindcss/typography instead.
  */
 export declare function injectRichtextStyles(): void;
-export { FolderPickerField, createFolderPickerField } from './FolderPickerField';
-export { PageSegmentField, createPageSegmentField, LockedPageSegmentField, createLockedPageSegmentField, } from './PageSegmentField';
-export { SlugPreviewField, createSlugPreviewField } from './SlugPreviewField';
-//# sourceMappingURL=index.d.ts.map
+export { FolderPickerField, createFolderPickerField } from './FolderPickerField.js';
+export { PageSegmentField, createPageSegmentField, LockedPageSegmentField, createLockedPageSegmentField, } from './PageSegmentField.js';
+export { SlugPreviewField, createSlugPreviewField } from './SlugPreviewField.js';