@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/VerticalAlignmentField.d.ts

@@ -14,7 +14,7 @@ interface VerticalAlignmentFieldProps {
     readOnly?: boolean;
     defaultValue?: VerticalAlignment;
 }
-declare function VerticalAlignmentFieldInner({ value, onChange, label, readOnly, defaultValue, }: VerticalAlignmentFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function VerticalAlignmentFieldInner({ value, onChange, label, readOnly, defaultValue, }: VerticalAlignmentFieldProps): React.JSX.Element;
 export declare const VerticalAlignmentField: React.MemoExoticComponent<typeof VerticalAlignmentFieldInner>;
 interface CreateVerticalAlignmentFieldConfig {
     label?: string;
@@ -32,4 +32,3 @@ interface CreateVerticalAlignmentFieldConfig {
  */
 export declare function createVerticalAlignmentField(config?: CreateVerticalAlignmentFieldConfig): CustomField<VerticalAlignment | null>;
 export {};
-//# sourceMappingURL=VerticalAlignmentField.d.ts.map

package/dist/fields/VerticalAlignmentField.js

@@ -5,9 +5,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Used for grid item self-alignment (e.g., in TextImageSplit)
  * Controls how an item aligns itself within its grid/flex cell.
- */
-import { useCallback, memo } from 'react';
-import { AlignStartVertical, AlignCenterVertical, AlignEndVertical, X, } from 'lucide-react';
+ */ import React, { useCallback, memo } from 'react';
+import { AlignStartVertical, AlignCenterVertical, AlignEndVertical, X } from 'lucide-react';
 // =============================================================================
 // Styles
 // =============================================================================
@@ -15,17 +14,17 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
+        gap: '8px'
     },
     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',
@@ -38,11 +37,11 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonGroup: {
         display: 'flex',
-        gap: '4px',
+        gap: '4px'
     },
     button: {
         display: 'flex',
@@ -55,7 +54,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-bg)',
         color: 'var(--theme-elevation-700)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonActive: {
         display: 'flex',
@@ -68,38 +67,96 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'var(--theme-elevation-800)',
         color: 'var(--theme-bg)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     buttonDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
-    },
+        cursor: 'not-allowed'
+    }
 };
 // =============================================================================
 // VerticalAlignmentField Component
 // =============================================================================
-function VerticalAlignmentFieldInner({ value, onChange, label = 'Vertical Alignment', readOnly, defaultValue = 'center', }) {
+function VerticalAlignmentFieldInner({ value, onChange, label = 'Vertical Alignment', readOnly, defaultValue = 'center' }) {
     const currentValue = value ?? defaultValue;
-    const handleChange = useCallback((alignment) => {
+    const handleChange = useCallback((alignment)=>{
         onChange(alignment);
-    }, [onChange]);
-    const handleClear = useCallback(() => {
+    }, [
+        onChange
+    ]);
+    const handleClear = useCallback(()=>{
         onChange(null);
-    }, [onChange]);
+    }, [
+        onChange
+    ]);
     const options = [
-        { value: 'flex-start', icon: AlignStartVertical, title: 'Top' },
-        { value: 'center', icon: AlignCenterVertical, title: 'Center' },
-        { value: 'flex-end', icon: AlignEndVertical, title: 'Bottom' },
+        {
+            value: 'flex-start',
+            icon: AlignStartVertical,
+            title: 'Top'
+        },
+        {
+            value: 'center',
+            icon: AlignCenterVertical,
+            title: 'Center'
+        },
+        {
+            value: 'flex-end',
+            icon: AlignEndVertical,
+            title: 'Bottom'
+        }
     ];
-    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: options.map(({ value: optionValue, icon: Icon, title }) => {
+    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: options.map(({ value: optionValue, icon: Icon, title })=>{
                     const isActive = currentValue === optionValue;
-                    return (_jsx("button", { type: "button", onClick: () => handleChange(optionValue), disabled: readOnly, style: {
-                            ...(isActive ? styles.buttonActive : styles.button),
-                            ...(readOnly ? styles.buttonDisabled : {}),
-                        }, title: title, children: _jsx(Icon, { style: { width: '16px', height: '16px' } }) }, optionValue));
-                }) })] }));
+                    return /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>handleChange(optionValue),
+                        disabled: readOnly,
+                        style: {
+                            ...isActive ? styles.buttonActive : styles.button,
+                            ...readOnly ? styles.buttonDisabled : {}
+                        },
+                        title: title,
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    }, optionValue);
+                })
+            })
+        ]
+    });
 }
-export const VerticalAlignmentField = memo(VerticalAlignmentFieldInner);
+export const VerticalAlignmentField = /*#__PURE__*/ memo(VerticalAlignmentFieldInner);
 /**
  * Creates a Puck field configuration for vertical/self alignment control
  *
@@ -109,12 +166,16 @@ export const VerticalAlignmentField = memo(VerticalAlignmentFieldInner);
  *   verticalAlignment: createVerticalAlignmentField({ label: 'Vertical Alignment' }),
  * }
  * ```
- */
-export function createVerticalAlignmentField(config = {}) {
+ */ export function createVerticalAlignmentField(config = {}) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(VerticalAlignmentField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly, defaultValue: config.defaultValue })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(VerticalAlignmentField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly,
+                defaultValue: config.defaultValue
+            })
     };
 }
-//# sourceMappingURL=VerticalAlignmentField.js.map

package/dist/fields/WidthField.d.ts

@@ -9,14 +9,14 @@
  */
 import React from 'react';
 import type { CustomField } from '@puckeditor/core';
-import type { WidthValue } from './shared';
+import type { WidthValue } from './shared.js';
 interface WidthFieldProps {
     value: WidthValue | null;
     onChange: (value: WidthValue | null) => void;
     label?: string;
     readOnly?: boolean;
 }
-declare function WidthFieldInner({ value, onChange, label, readOnly, }: WidthFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function WidthFieldInner({ value, onChange, label, readOnly, }: WidthFieldProps): React.JSX.Element;
 export declare const WidthField: React.MemoExoticComponent<typeof WidthFieldInner>;
 /**
  * Creates a Puck field configuration for width control
@@ -25,4 +25,3 @@ export declare function createWidthField(config: {
     label?: string;
 }): CustomField<WidthValue | null>;
 export {};
-//# sourceMappingURL=WidthField.d.ts.map