@delmaredigital/payload-puck 0.6.12 → 0.6.13

package/dist/fields/SizeField.js

@@ -5,24 +5,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Provides preset size options (sm, default, lg) with a "custom" mode
  * that reveals detailed controls for height, padding, and font size.
- */
-import { useCallback, memo } from 'react';
+ */ import React, { useCallback, memo } from 'react';
 import { X } from 'lucide-react';
 // Re-export types and utilities from shared.ts for backward compatibility
 // These are defined in shared.ts to be server-safe
-export { sizeValueToCSS, getSizeClasses, } from './shared';
+export { sizeValueToCSS, getSizeClasses } from './shared.js';
 // =============================================================================
 // Default Values
 // =============================================================================
 const DEFAULT_VALUE = {
-    mode: 'default',
+    mode: 'default'
 };
 const CUSTOM_DEFAULTS = {
     height: 40,
     paddingX: 16,
     paddingY: 8,
     fontSize: 14,
-    unit: 'px',
+    unit: 'px'
 };
 // =============================================================================
 // Styles
@@ -31,17 +30,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',
@@ -54,12 +53,12 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonGroup: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '4px',
+        gap: '4px'
     },
     button: {
         display: 'inline-flex',
@@ -71,7 +70,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonActive: {
         display: 'inline-flex',
@@ -83,7 +82,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     customPanel: {
         display: 'flex',
@@ -92,23 +91,23 @@ const styles = {
         padding: '12px',
         backgroundColor: 'var(--theme-elevation-50)',
         borderRadius: '6px',
-        overflow: 'hidden',
+        overflow: 'hidden'
     },
     unitRow: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     unitLabel: {
         fontSize: '10px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         color: 'var(--theme-elevation-500)',
-        flexShrink: 0,
+        flexShrink: 0
     },
     unitButtons: {
         display: 'flex',
-        gap: '4px',
+        gap: '4px'
     },
     unitButton: {
         height: '28px',
@@ -119,7 +118,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     unitButtonActive: {
         height: '28px',
@@ -130,24 +129,24 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     inputGrid: {
         display: 'grid',
         gridTemplateColumns: '1fr 1fr',
-        gap: '8px',
+        gap: '8px'
     },
     inputGroup: {
         display: 'flex',
         flexDirection: 'column',
         gap: '4px',
-        minWidth: 0,
+        minWidth: 0
     },
     inputLabel: {
         fontSize: '10px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     input: {
         width: '100%',
@@ -160,70 +159,245 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-input-bg)',
         color: 'var(--theme-elevation-800)',
-        boxSizing: 'border-box',
+        boxSizing: 'border-box'
     },
     summary: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
         fontFamily: 'monospace',
         paddingTop: '4px',
-        borderTop: '1px solid var(--theme-elevation-100)',
-    },
+        borderTop: '1px solid var(--theme-elevation-100)'
+    }
 };
 // =============================================================================
 // SizeField Component
 // =============================================================================
-function SizeFieldInner({ value, onChange, label = 'Size', readOnly, showHeight = true, showFontSize = true, }) {
+function SizeFieldInner({ value, onChange, label = 'Size', readOnly, showHeight = true, showFontSize = true }) {
     const currentValue = value || DEFAULT_VALUE;
-    const handleModeChange = useCallback((mode) => {
+    const handleModeChange = useCallback((mode)=>{
         if (mode === 'custom') {
             onChange({
                 mode,
-                ...CUSTOM_DEFAULTS,
+                ...CUSTOM_DEFAULTS
+            });
+        } else {
+            onChange({
+                mode
             });
         }
-        else {
-            onChange({ mode });
-        }
-    }, [onChange]);
-    const handleValueChange = useCallback((field, val) => {
+    }, [
+        onChange
+    ]);
+    const handleValueChange = useCallback((field, val)=>{
         onChange({
             ...currentValue,
-            [field]: val,
+            [field]: val
         });
-    }, [currentValue, onChange]);
-    const handleUnitChange = useCallback((unit) => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleUnitChange = useCallback((unit)=>{
         onChange({
             ...currentValue,
-            unit,
+            unit
         });
-    }, [currentValue, onChange]);
-    const handleClear = useCallback(() => {
+    }, [
+        currentValue,
+        onChange
+    ]);
+    const handleClear = useCallback(()=>{
         onChange(null);
-    }, [onChange]);
+    }, [
+        onChange
+    ]);
     const presets = [
-        { mode: 'sm', label: 'SM' },
-        { mode: 'default', label: 'Default' },
-        { mode: 'lg', label: 'LG' },
-        { mode: 'custom', label: 'Custom' },
+        {
+            mode: 'sm',
+            label: 'SM'
+        },
+        {
+            mode: 'default',
+            label: 'Default'
+        },
+        {
+            mode: 'lg',
+            label: 'LG'
+        },
+        {
+            mode: 'custom',
+            label: 'Custom'
+        }
     ];
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_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.buttonGroup, children: presets.map(({ mode, label: modeLabel }) => {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.header,
+                children: [
+                    /*#__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.buttonGroup,
+                children: presets.map(({ mode, label: modeLabel })=>{
                     const isActive = currentValue.mode === mode;
-                    return (_jsx("button", { type: "button", onClick: () => handleModeChange(mode), disabled: readOnly, style: isActive ? styles.buttonActive : styles.button, children: modeLabel }, mode));
-                }) }), currentValue.mode === 'custom' && (_jsxs("div", { style: styles.customPanel, children: [_jsxs("div", { style: styles.unitRow, children: [_jsx("label", { style: styles.unitLabel, children: "Unit:" }), _jsx("div", { style: styles.unitButtons, children: ['px', 'rem'].map((unit) => {
+                    return /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>handleModeChange(mode),
+                        disabled: readOnly,
+                        style: isActive ? styles.buttonActive : styles.button,
+                        children: modeLabel
+                    }, mode);
+                })
+            }),
+            currentValue.mode === 'custom' && /*#__PURE__*/ _jsxs("div", {
+                style: styles.customPanel,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.unitRow,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.unitLabel,
+                                children: "Unit:"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: styles.unitButtons,
+                                children: [
+                                    'px',
+                                    'rem'
+                                ].map((unit)=>{
                                     const isActive = (currentValue.unit || 'px') === unit;
-                                    return (_jsx("button", { type: "button", onClick: () => handleUnitChange(unit), disabled: readOnly, style: isActive ? styles.unitButtonActive : styles.unitButton, children: unit }, unit));
-                                }) })] }), _jsxs("div", { style: styles.inputGrid, children: [showHeight && (_jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Height" }), _jsx("input", { type: "number", min: 0, value: currentValue.height ?? CUSTOM_DEFAULTS.height, onChange: (e) => handleValueChange('height', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] })), showFontSize && (_jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Font Size" }), _jsx("input", { type: "number", min: 0, value: currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize, onChange: (e) => handleValueChange('fontSize', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] })), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Padding X" }), _jsx("input", { type: "number", min: 0, value: currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX, onChange: (e) => handleValueChange('paddingX', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Padding Y" }), _jsx("input", { type: "number", min: 0, value: currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY, onChange: (e) => handleValueChange('paddingY', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] })] }), _jsxs("div", { style: styles.summary, children: [showHeight && `h: ${currentValue.height ?? CUSTOM_DEFAULTS.height}${currentValue.unit || 'px'}`, showHeight && ' | ', `p: ${currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY}${currentValue.unit || 'px'} ${currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX}${currentValue.unit || 'px'}`, showFontSize && ` | font: ${currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize}${currentValue.unit || 'px'}`] })] }))] }));
+                                    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.inputGrid,
+                        children: [
+                            showHeight && /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "Height"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.height ?? CUSTOM_DEFAULTS.height,
+                                        onChange: (e)=>handleValueChange('height', parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            }),
+                            showFontSize && /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "Font Size"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize,
+                                        onChange: (e)=>handleValueChange('fontSize', parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "Padding X"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX,
+                                        onChange: (e)=>handleValueChange('paddingX', parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: styles.inputGroup,
+                                children: [
+                                    /*#__PURE__*/ _jsx("label", {
+                                        style: styles.inputLabel,
+                                        children: "Padding Y"
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "number",
+                                        min: 0,
+                                        value: currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY,
+                                        onChange: (e)=>handleValueChange('paddingY', parseInt(e.target.value, 10) || 0),
+                                        disabled: readOnly,
+                                        style: styles.input
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: styles.summary,
+                        children: [
+                            showHeight && `h: ${currentValue.height ?? CUSTOM_DEFAULTS.height}${currentValue.unit || 'px'}`,
+                            showHeight && ' | ',
+                            `p: ${currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY}${currentValue.unit || 'px'} ${currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX}${currentValue.unit || 'px'}`,
+                            showFontSize && ` | font: ${currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize}${currentValue.unit || 'px'}`
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 }
-export const SizeField = memo(SizeFieldInner);
+export const SizeField = /*#__PURE__*/ memo(SizeFieldInner);
 /**
  * Creates a Puck field configuration for size control
- */
-export function createSizeField(config = {}) {
+ */ export function createSizeField(config = {}) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(SizeField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly, showHeight: config.showHeight, showFontSize: config.showFontSize })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(SizeField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly,
+                showHeight: config.showHeight,
+                showFontSize: config.showFontSize
+            })
     };
 }
+
 //# sourceMappingURL=SizeField.js.map

package/dist/fields/SizeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SizeField.js","sourceRoot":"","sources":["../../src/fields/SizeField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/SizeField.tsx"],"sourcesContent":["'use client'\n\n/**\n * SizeField - Custom Puck field for button/element sizing\n *\n * Provides preset size options (sm, default, lg) with a \"custom\" mode\n * that reveals detailed controls for height, padding, and font size.\n */\n\nimport React, { useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport { X } from 'lucide-react'\n\n// Re-export types and utilities from shared.ts for backward compatibility\n// These are defined in shared.ts to be server-safe\nexport {\n  type SizeMode,\n  type SizeUnit,\n  type SizeValue,\n  sizeValueToCSS,\n  getSizeClasses,\n} from './shared.js'\n\nimport type { SizeValue, SizeMode, SizeUnit } from './shared.js'\n\ninterface SizeFieldProps {\n  value: SizeValue | null\n  onChange: (value: SizeValue | null) => void\n  label?: string\n  readOnly?: boolean\n  /** Show height input (default: true) */\n  showHeight?: boolean\n  /** Show font size input (default: true) */\n  showFontSize?: boolean\n}\n\n// =============================================================================\n// Default Values\n// =============================================================================\n\nconst DEFAULT_VALUE: SizeValue = {\n  mode: 'default',\n}\n\nconst CUSTOM_DEFAULTS: Required<Omit<SizeValue, 'mode'>> = {\n  height: 40,\n  paddingX: 16,\n  paddingY: 8,\n  fontSize: 14,\n  unit: 'px',\n}\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  } as CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  label: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  clearButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  buttonGroup: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '4px',\n  } as CSSProperties,\n  button: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    padding: '4px 12px',\n    fontSize: '12px',\n    fontWeight: 500,\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-700)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  buttonActive: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    padding: '4px 12px',\n    fontSize: '12px',\n    fontWeight: 500,\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  customPanel: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n    padding: '12px',\n    backgroundColor: 'var(--theme-elevation-50)',\n    borderRadius: '6px',\n    overflow: 'hidden',\n  } as CSSProperties,\n  unitRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as CSSProperties,\n  unitLabel: {\n    fontSize: '10px',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    color: 'var(--theme-elevation-500)',\n    flexShrink: 0,\n  } as CSSProperties,\n  unitButtons: {\n    display: 'flex',\n    gap: '4px',\n  } as CSSProperties,\n  unitButton: {\n    height: '28px',\n    padding: '0 8px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  unitButtonActive: {\n    height: '28px',\n    padding: '0 8px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  inputGrid: {\n    display: 'grid',\n    gridTemplateColumns: '1fr 1fr',\n    gap: '8px',\n  } as CSSProperties,\n  inputGroup: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '4px',\n    minWidth: 0,\n  } as CSSProperties,\n  inputLabel: {\n    fontSize: '10px',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  input: {\n    width: '100%',\n    minWidth: 0,\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '14px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n    boxSizing: 'border-box',\n  } as CSSProperties,\n  summary: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n    fontFamily: 'monospace',\n    paddingTop: '4px',\n    borderTop: '1px solid var(--theme-elevation-100)',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// SizeField Component\n// =============================================================================\n\nfunction SizeFieldInner({\n  value,\n  onChange,\n  label = 'Size',\n  readOnly,\n  showHeight = true,\n  showFontSize = true,\n}: SizeFieldProps) {\n  const currentValue = value || DEFAULT_VALUE\n\n  const handleModeChange = useCallback((mode: SizeMode) => {\n    if (mode === 'custom') {\n      onChange({\n        mode,\n        ...CUSTOM_DEFAULTS,\n      })\n    } else {\n      onChange({ mode })\n    }\n  }, [onChange])\n\n  const handleValueChange = useCallback((\n    field: 'height' | 'paddingX' | 'paddingY' | 'fontSize',\n    val: number\n  ) => {\n    onChange({\n      ...currentValue,\n      [field]: val,\n    })\n  }, [currentValue, onChange])\n\n  const handleUnitChange = useCallback((unit: SizeUnit) => {\n    onChange({\n      ...currentValue,\n      unit,\n    })\n  }, [currentValue, onChange])\n\n  const handleClear = useCallback(() => {\n    onChange(null)\n  }, [onChange])\n\n  const presets = [\n    { mode: 'sm' as SizeMode, label: 'SM' },\n    { mode: 'default' as SizeMode, label: 'Default' },\n    { mode: 'lg' as SizeMode, label: 'LG' },\n    { mode: 'custom' as SizeMode, label: 'Custom' },\n  ]\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {/* Header with label and clear */}\n      <div style={styles.header}>\n        <label style={styles.label}>{label}</label>\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            style={styles.clearButton}\n            title=\"Reset to default\"\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      {/* Size mode selector */}\n      <div style={styles.buttonGroup}>\n        {presets.map(({ mode, label: modeLabel }) => {\n          const isActive = currentValue.mode === mode\n          return (\n            <button\n              key={mode}\n              type=\"button\"\n              onClick={() => handleModeChange(mode)}\n              disabled={readOnly}\n              style={isActive ? styles.buttonActive : styles.button}\n            >\n              {modeLabel}\n            </button>\n          )\n        })}\n      </div>\n\n      {/* Custom size controls */}\n      {currentValue.mode === 'custom' && (\n        <div style={styles.customPanel as CSSProperties}>\n          {/* Unit selector */}\n          <div style={styles.unitRow}>\n            <label style={styles.unitLabel as CSSProperties}>Unit:</label>\n            <div style={styles.unitButtons}>\n              {(['px', 'rem'] as SizeUnit[]).map((unit) => {\n                const isActive = (currentValue.unit || 'px') === unit\n                return (\n                  <button\n                    key={unit}\n                    type=\"button\"\n                    onClick={() => handleUnitChange(unit)}\n                    disabled={readOnly}\n                    style={isActive ? styles.unitButtonActive : styles.unitButton}\n                  >\n                    {unit}\n                  </button>\n                )\n              })}\n            </div>\n          </div>\n\n          {/* Numeric inputs */}\n          <div style={styles.inputGrid}>\n            {showHeight && (\n              <div style={styles.inputGroup as CSSProperties}>\n                <label style={styles.inputLabel as CSSProperties}>Height</label>\n                <input\n                  type=\"number\"\n                  min={0}\n                  value={currentValue.height ?? CUSTOM_DEFAULTS.height}\n                  onChange={(e) => handleValueChange('height', parseInt(e.target.value, 10) || 0)}\n                  disabled={readOnly}\n                  style={styles.input}\n                />\n              </div>\n            )}\n\n            {showFontSize && (\n              <div style={styles.inputGroup as CSSProperties}>\n                <label style={styles.inputLabel as CSSProperties}>Font Size</label>\n                <input\n                  type=\"number\"\n                  min={0}\n                  value={currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize}\n                  onChange={(e) => handleValueChange('fontSize', parseInt(e.target.value, 10) || 0)}\n                  disabled={readOnly}\n                  style={styles.input}\n                />\n              </div>\n            )}\n\n            <div style={styles.inputGroup as CSSProperties}>\n              <label style={styles.inputLabel as CSSProperties}>Padding X</label>\n              <input\n                type=\"number\"\n                min={0}\n                value={currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX}\n                onChange={(e) => handleValueChange('paddingX', parseInt(e.target.value, 10) || 0)}\n                disabled={readOnly}\n                style={styles.input}\n              />\n            </div>\n\n            <div style={styles.inputGroup as CSSProperties}>\n              <label style={styles.inputLabel as CSSProperties}>Padding Y</label>\n              <input\n                type=\"number\"\n                min={0}\n                value={currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY}\n                onChange={(e) => handleValueChange('paddingY', parseInt(e.target.value, 10) || 0)}\n                disabled={readOnly}\n                style={styles.input}\n              />\n            </div>\n          </div>\n\n          {/* Preview summary */}\n          <div style={styles.summary}>\n            {showHeight && `h: ${currentValue.height ?? CUSTOM_DEFAULTS.height}${currentValue.unit || 'px'}`}\n            {showHeight && ' | '}\n            {`p: ${currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY}${currentValue.unit || 'px'} ${currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX}${currentValue.unit || 'px'}`}\n            {showFontSize && ` | font: ${currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize}${currentValue.unit || 'px'}`}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const SizeField = memo(SizeFieldInner)\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\ninterface CreateSizeFieldConfig {\n  label?: string\n  showHeight?: boolean\n  showFontSize?: boolean\n}\n\n/**\n * Creates a Puck field configuration for size control\n */\nexport function createSizeField(\n  config: CreateSizeFieldConfig = {}\n): CustomField<SizeValue | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <SizeField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n        showHeight={config.showHeight}\n        showFontSize={config.showFontSize}\n      />\n    ),\n  }\n}\n"],"names":["React","useCallback","memo","X","sizeValueToCSS","getSizeClasses","DEFAULT_VALUE","mode","CUSTOM_DEFAULTS","height","paddingX","paddingY","fontSize","unit","styles","container","display","flexDirection","gap","header","alignItems","justifyContent","label","fontWeight","color","clearButton","width","padding","border","borderRadius","backgroundColor","cursor","buttonGroup","flexWrap","button","buttonActive","customPanel","overflow","unitRow","unitLabel","textTransform","letterSpacing","flexShrink","unitButtons","unitButton","fontFamily","unitButtonActive","inputGrid","gridTemplateColumns","inputGroup","minWidth","inputLabel","input","boxSizing","summary","paddingTop","borderTop","SizeFieldInner","value","onChange","readOnly","showHeight","showFontSize","currentValue","handleModeChange","handleValueChange","field","val","handleUnitChange","handleClear","presets","div","className","style","type","onClick","title","map","modeLabel","isActive","disabled","min","e","parseInt","target","SizeField","createSizeField","config","render"],"mappings":"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"}

package/dist/fields/SlugPreviewField.d.ts

@@ -1,10 +1,17 @@
+/**
+ * SlugPreviewField - Custom Puck field for displaying the computed slug
+ *
+ * Read-only field that shows the auto-generated URL slug.
+ * When page-tree is enabled, slug = folderPath + '/' + pageSegment
+ */
+import React from 'react';
 import type { CustomField } from '@puckeditor/core';
 interface SlugPreviewFieldProps {
     value: string;
     label?: string;
     hint?: string;
 }
-export declare function SlugPreviewField({ value, label, hint, }: SlugPreviewFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function SlugPreviewField({ value, label, hint, }: SlugPreviewFieldProps): React.JSX.Element;
 /**
  * Creates a Puck field configuration for slug preview
  */

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

@@ -1 +1 @@
-{"version":3,"file":"SlugPreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/SlugPreviewField.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAOnD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAMD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAkB,EAClB,IAAkD,GACnD,EAAE,qBAAqB,2CA8DvB;AAMD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,CAAC,EAAE;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,WAAW,CAAC,MAAM,CAAC,CAYtB"}
+{"version":3,"file":"SlugPreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/SlugPreviewField.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAOnD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAMD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAkB,EAClB,IAAkD,GACnD,EAAE,qBAAqB,qBA8DvB;AAMD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,CAAC,EAAE;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,WAAW,CAAC,MAAM,CAAC,CAYtB"}

package/dist/fields/SlugPreviewField.js

@@ -1,49 +1,98 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SlugPreviewField - Custom Puck field for displaying the computed slug
+ *
+ * Read-only field that shows the auto-generated URL slug.
+ * When page-tree is enabled, slug = folderPath + '/' + pageSegment
+ */ import React from 'react';
 import { Link, Lock } from 'lucide-react';
 // =============================================================================
 // SlugPreviewField Component
 // =============================================================================
-export function SlugPreviewField({ value, label = 'URL Slug', hint = 'Auto-generated from folder + page segment', }) {
-    const displayValue = value ? (value.startsWith('/') ? value : `/${value}`) : '/';
-    return (_jsxs("div", { className: "puck-field", children: [_jsxs("div", { style: {
+export function SlugPreviewField({ value, label = 'URL Slug', hint = 'Auto-generated from folder + page segment' }) {
+    const displayValue = value ? value.startsWith('/') ? value : `/${value}` : '/';
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                    marginBottom: '8px',
-                }, children: [_jsx("label", { style: {
+                    marginBottom: '8px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        style: {
                             fontSize: '14px',
                             fontWeight: 500,
-                            color: 'var(--puck-color-grey-04)',
-                        }, children: label }), _jsx(Lock, { size: 14, style: { color: 'var(--puck-color-grey-06)' } })] }), _jsxs("div", { style: {
+                            color: 'var(--puck-color-grey-04)'
+                        },
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx(Lock, {
+                        size: 14,
+                        style: {
+                            color: 'var(--puck-color-grey-06)'
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
                     display: 'flex',
                     alignItems: 'center',
                     padding: '8px 12px',
                     backgroundColor: 'var(--puck-color-grey-11)',
                     border: '1px solid var(--puck-color-grey-09)',
-                    borderRadius: '6px',
-                }, children: [_jsx(Link, { size: 14, style: { marginRight: '8px', color: 'var(--puck-color-grey-06)' } }), _jsx("span", { style: {
+                    borderRadius: '6px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Link, {
+                        size: 14,
+                        style: {
+                            marginRight: '8px',
+                            color: 'var(--puck-color-grey-06)'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
                             fontSize: '14px',
                             color: 'var(--puck-color-grey-05)',
                             fontFamily: 'var(--font-mono, monospace)',
-                            wordBreak: 'break-all',
-                        }, children: displayValue })] }), _jsx("p", { style: {
+                            wordBreak: 'break-all'
+                        },
+                        children: displayValue
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
                     marginTop: '6px',
                     fontSize: '12px',
-                    color: 'var(--puck-color-grey-06)',
-                }, children: hint })] }));
+                    color: 'var(--puck-color-grey-06)'
+                },
+                children: hint
+            })
+        ]
+    });
 }
 // =============================================================================
 // Field Configuration Factory
 // =============================================================================
 /**
  * Creates a Puck field configuration for slug preview
- */
-export function createSlugPreviewField(config) {
+ */ export function createSlugPreviewField(config) {
     return {
         type: 'custom',
         label: config?.label ?? 'URL Slug',
-        render: ({ value }) => (_jsx(SlugPreviewField, { value: value || '', label: config?.label, hint: config?.hint })),
+        render: ({ value })=>/*#__PURE__*/ _jsx(SlugPreviewField, {
+                value: value || '',
+                label: config?.label,
+                hint: config?.hint
+            })
     };
 }
+
 //# sourceMappingURL=SlugPreviewField.js.map