@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/ResponsiveField.js

@@ -6,10 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * This component wraps any existing field to provide responsive overrides
  * at different breakpoints (xs, sm, md, lg, xl). It uses sparse storage,
  * only storing values for breakpoints that have explicit overrides.
- */
-import { useState, useCallback, memo } from 'react';
-import { Smartphone, Tablet, Laptop, Monitor, X, } from 'lucide-react';
-import { BREAKPOINTS } from './shared';
+ */ import React, { useState, useCallback, memo } from 'react';
+import { Smartphone, Tablet, Laptop, Monitor, X } from 'lucide-react';
+import { BREAKPOINTS } from './shared.js';
 // =============================================================================
 // Breakpoint Icons
 // =============================================================================
@@ -18,7 +17,7 @@ const BREAKPOINT_ICONS = {
     sm: Smartphone,
     md: Tablet,
     lg: Laptop,
-    xl: Monitor,
+    xl: Monitor
 };
 // =============================================================================
 // Styles
@@ -27,29 +26,29 @@ const styles = {
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: '12px',
+        gap: '12px'
     },
     header: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
     },
     labelGroup: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '8px'
     },
     label: {
         fontSize: '14px',
         fontWeight: 500,
-        color: 'var(--theme-elevation-800)',
+        color: 'var(--theme-elevation-800)'
     },
     overrideBadge: {
         fontSize: '12px',
         color: 'var(--theme-elevation-500)',
         backgroundColor: 'var(--theme-elevation-100)',
         padding: '2px 6px',
-        borderRadius: '4px',
+        borderRadius: '4px'
     },
     clearButton: {
         display: 'flex',
@@ -62,7 +61,7 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     tabsContainer: {
         display: 'flex',
@@ -70,7 +69,7 @@ const styles = {
         gap: '4px',
         padding: '4px',
         backgroundColor: 'var(--theme-elevation-50)',
-        borderRadius: '8px',
+        borderRadius: '8px'
     },
     tab: {
         position: 'relative',
@@ -88,7 +87,7 @@ const styles = {
         flex: '1 1 auto',
         minWidth: '52px',
         backgroundColor: 'var(--theme-elevation-100)',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     tabActive: {
         position: 'relative',
@@ -106,11 +105,11 @@ const styles = {
         flex: '1 1 auto',
         minWidth: '52px',
         backgroundColor: 'var(--theme-elevation-800)',
-        color: 'var(--theme-bg)',
+        color: 'var(--theme-bg)'
     },
     tabDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     },
     overrideIndicator: {
         position: 'absolute',
@@ -119,14 +118,14 @@ const styles = {
         width: '8px',
         height: '8px',
         borderRadius: '50%',
-        backgroundColor: 'var(--theme-elevation-800)',
+        backgroundColor: 'var(--theme-elevation-800)'
     },
     infoRow: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         fontSize: '12px',
-        color: 'var(--theme-elevation-500)',
+        color: 'var(--theme-elevation-500)'
     },
     clearOverrideButton: {
         padding: '2px 8px',
@@ -135,30 +134,49 @@ const styles = {
         borderRadius: '4px',
         backgroundColor: 'transparent',
         color: 'var(--theme-elevation-500)',
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     innerFieldContainer: {
         padding: '12px',
         border: '1px solid var(--theme-elevation-150)',
-        borderRadius: '6px',
-    },
+        borderRadius: '6px'
+    }
 };
-function BreakpointTab({ breakpoint, label, minWidth, isActive, hasOverride, onClick, disabled, }) {
+function BreakpointTab({ breakpoint, label, minWidth, isActive, hasOverride, onClick, disabled }) {
     const Icon = BREAKPOINT_ICONS[breakpoint];
-    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, title: minWidth ? `${label} (${minWidth}px+)` : label, style: {
-            ...(isActive ? styles.tabActive : styles.tab),
-            ...(disabled ? styles.tabDisabled : {}),
-        }, children: [_jsx(Icon, { style: { width: '14px', height: '14px' } }), _jsx("span", { children: label }), hasOverride && !isActive && (_jsx("span", { style: styles.overrideIndicator }))] }));
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        onClick: onClick,
+        disabled: disabled,
+        title: minWidth ? `${label} (${minWidth}px+)` : label,
+        style: {
+            ...isActive ? styles.tabActive : styles.tab,
+            ...disabled ? styles.tabDisabled : {}
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                style: {
+                    width: '14px',
+                    height: '14px'
+                }
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                children: label
+            }),
+            hasOverride && !isActive && /*#__PURE__*/ _jsx("span", {
+                style: styles.overrideIndicator
+            })
+        ]
+    });
 }
 // =============================================================================
 // ResponsiveField Component
 // =============================================================================
-function ResponsiveFieldInner({ value, onChange, label, readOnly, renderInnerField, defaultValue, }) {
+function ResponsiveFieldInner({ value, onChange, label, readOnly, renderInnerField, defaultValue }) {
     const [activeBreakpoint, setActiveBreakpoint] = useState('xs');
     // Get the current value for the active breakpoint
-    const getCurrentValue = useCallback(() => {
-        if (!value)
-            return null;
+    const getCurrentValue = useCallback(()=>{
+        if (!value) return null;
         if (activeBreakpoint === 'xs') {
             return value.xs ?? defaultValue ?? null;
         }
@@ -166,9 +184,15 @@ function ResponsiveFieldInner({ value, onChange, label, readOnly, renderInnerFie
         if (override !== undefined) {
             return override;
         }
-        const breakpointOrder = ['xl', 'lg', 'md', 'sm', 'xs'];
+        const breakpointOrder = [
+            'xl',
+            'lg',
+            'md',
+            'sm',
+            'xs'
+        ];
         const activeIndex = breakpointOrder.indexOf(activeBreakpoint);
-        for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {
+        for(let i = activeIndex + 1; i < breakpointOrder.length; i++){
             const bp = breakpointOrder[i];
             const val = value[bp];
             if (val !== undefined) {
@@ -176,103 +200,220 @@ function ResponsiveFieldInner({ value, onChange, label, readOnly, renderInnerFie
             }
         }
         return defaultValue ?? null;
-    }, [value, activeBreakpoint, defaultValue]);
-    const hasOverride = useCallback((breakpoint) => {
-        if (!value)
-            return false;
-        if (breakpoint === 'xs')
-            return false;
+    }, [
+        value,
+        activeBreakpoint,
+        defaultValue
+    ]);
+    const hasOverride = useCallback((breakpoint)=>{
+        if (!value) return false;
+        if (breakpoint === 'xs') return false;
         return value[breakpoint] !== undefined;
-    }, [value]);
-    const getInheritanceSource = useCallback(() => {
-        if (!value || activeBreakpoint === 'xs')
-            return null;
-        if (value[activeBreakpoint] !== undefined)
-            return null;
-        const breakpointOrder = ['xl', 'lg', 'md', 'sm', 'xs'];
+    }, [
+        value
+    ]);
+    const getInheritanceSource = useCallback(()=>{
+        if (!value || activeBreakpoint === 'xs') return null;
+        if (value[activeBreakpoint] !== undefined) return null;
+        const breakpointOrder = [
+            'xl',
+            'lg',
+            'md',
+            'sm',
+            'xs'
+        ];
         const activeIndex = breakpointOrder.indexOf(activeBreakpoint);
-        for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {
+        for(let i = activeIndex + 1; i < breakpointOrder.length; i++){
             const bp = breakpointOrder[i];
             if (value[bp] !== undefined) {
                 return bp;
             }
         }
         return null;
-    }, [value, activeBreakpoint]);
-    const handleInnerChange = useCallback((newValue) => {
+    }, [
+        value,
+        activeBreakpoint
+    ]);
+    const handleInnerChange = useCallback((newValue)=>{
         if (activeBreakpoint === 'xs') {
             if (newValue === null) {
                 onChange(null);
+            } else {
+                onChange({
+                    ...value,
+                    xs: newValue
+                });
             }
-            else {
-                onChange({ ...value, xs: newValue });
-            }
-        }
-        else {
+        } else {
             if (newValue === null) {
-                if (!value)
-                    return;
-                const newResponsive = { ...value };
+                if (!value) return;
+                const newResponsive = {
+                    ...value
+                };
                 delete newResponsive[activeBreakpoint];
                 onChange(newResponsive);
-            }
-            else {
+            } else {
                 const xs = value?.xs ?? defaultValue;
-                if (xs === undefined)
-                    return;
+                if (xs === undefined) return;
                 onChange({
                     ...value,
                     xs,
-                    [activeBreakpoint]: newValue,
+                    [activeBreakpoint]: newValue
                 });
             }
         }
-    }, [value, onChange, activeBreakpoint, defaultValue]);
-    const handleClearOverride = useCallback(() => {
-        if (activeBreakpoint === 'xs' || !value)
-            return;
-        const newResponsive = { ...value };
+    }, [
+        value,
+        onChange,
+        activeBreakpoint,
+        defaultValue
+    ]);
+    const handleClearOverride = useCallback(()=>{
+        if (activeBreakpoint === 'xs' || !value) return;
+        const newResponsive = {
+            ...value
+        };
         delete newResponsive[activeBreakpoint];
         onChange(newResponsive);
-    }, [value, onChange, activeBreakpoint]);
-    const handleClearAll = useCallback(() => {
+    }, [
+        value,
+        onChange,
+        activeBreakpoint
+    ]);
+    const handleClearAll = useCallback(()=>{
         onChange(null);
-    }, [onChange]);
+    }, [
+        onChange
+    ]);
     const currentValue = getCurrentValue();
     const isOverrideBreakpoint = activeBreakpoint !== 'xs';
     const currentHasOverride = hasOverride(activeBreakpoint);
     const inheritanceSource = getInheritanceSource();
-    const overrideCount = value
-        ? ['sm', 'md', 'lg', 'xl'].filter((bp) => value[bp] !== undefined).length
-        : 0;
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [label && (_jsxs("div", { style: styles.labelGroup, children: [_jsx("label", { style: styles.label, children: label }), overrideCount > 0 && (_jsxs("span", { style: styles.overrideBadge, children: [overrideCount, " override", overrideCount !== 1 ? 's' : ''] }))] })), value && !readOnly && (_jsx("button", { type: "button", onClick: handleClearAll, style: styles.clearButton, title: "Clear all values", children: _jsx(X, { style: { width: '16px', height: '16px' } }) }))] }), _jsx("div", { style: styles.tabsContainer, children: BREAKPOINTS.map((bp) => (_jsx(BreakpointTab, { breakpoint: bp.key, label: bp.label, minWidth: bp.minWidth, isActive: activeBreakpoint === bp.key, hasOverride: hasOverride(bp.key), onClick: () => setActiveBreakpoint(bp.key), disabled: readOnly }, bp.key))) }), _jsxs("div", { style: styles.infoRow, children: [_jsx("span", { children: activeBreakpoint === 'xs' ? ('Extra small screens (0-639px)') : (_jsxs(_Fragment, { children: [BREAKPOINTS.find((bp) => bp.key === activeBreakpoint)?.minWidth, "px and up", !currentHasOverride && inheritanceSource && (_jsxs("span", { style: { color: 'var(--theme-elevation-400)' }, children: [" (inheriting from ", inheritanceSource.toUpperCase(), ")"] }))] })) }), isOverrideBreakpoint && currentHasOverride && !readOnly && (_jsx("button", { type: "button", onClick: handleClearOverride, style: styles.clearOverrideButton, children: "Clear override" }))] }), _jsx("div", { style: styles.innerFieldContainer, children: renderInnerField({
+    const overrideCount = value ? [
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ].filter((bp)=>value[bp] !== undefined).length : 0;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "puck-field",
+        style: styles.container,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.header,
+                children: [
+                    label && /*#__PURE__*/ _jsxs("div", {
+                        style: styles.labelGroup,
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: styles.label,
+                                children: label
+                            }),
+                            overrideCount > 0 && /*#__PURE__*/ _jsxs("span", {
+                                style: styles.overrideBadge,
+                                children: [
+                                    overrideCount,
+                                    " override",
+                                    overrideCount !== 1 ? 's' : ''
+                                ]
+                            })
+                        ]
+                    }),
+                    value && !readOnly && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleClearAll,
+                        style: styles.clearButton,
+                        title: "Clear all values",
+                        children: /*#__PURE__*/ _jsx(X, {
+                            style: {
+                                width: '16px',
+                                height: '16px'
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.tabsContainer,
+                children: BREAKPOINTS.map((bp)=>/*#__PURE__*/ _jsx(BreakpointTab, {
+                        breakpoint: bp.key,
+                        label: bp.label,
+                        minWidth: bp.minWidth,
+                        isActive: activeBreakpoint === bp.key,
+                        hasOverride: hasOverride(bp.key),
+                        onClick: ()=>setActiveBreakpoint(bp.key),
+                        disabled: readOnly
+                    }, bp.key))
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: styles.infoRow,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        children: activeBreakpoint === 'xs' ? 'Extra small screens (0-639px)' : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                BREAKPOINTS.find((bp)=>bp.key === activeBreakpoint)?.minWidth,
+                                "px and up",
+                                !currentHasOverride && inheritanceSource && /*#__PURE__*/ _jsxs("span", {
+                                    style: {
+                                        color: 'var(--theme-elevation-400)'
+                                    },
+                                    children: [
+                                        " (inheriting from ",
+                                        inheritanceSource.toUpperCase(),
+                                        ")"
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    isOverrideBreakpoint && currentHasOverride && !readOnly && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: handleClearOverride,
+                        style: styles.clearOverrideButton,
+                        children: "Clear override"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.innerFieldContainer,
+                children: renderInnerField({
                     value: currentValue,
                     onChange: handleInnerChange,
-                    readOnly,
-                }) })] }));
+                    readOnly
+                })
+            })
+        ]
+    });
 }
-export const ResponsiveField = memo(ResponsiveFieldInner);
+export const ResponsiveField = /*#__PURE__*/ memo(ResponsiveFieldInner);
 /**
  * Creates a responsive wrapper around any Puck custom field.
- */
-export function createResponsiveField(config) {
-    const innerFieldConfig = config.innerField({ label: undefined });
+ */ export function createResponsiveField(config) {
+    const innerFieldConfig = config.innerField({
+        label: undefined
+    });
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(ResponsiveField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly, defaultValue: config.defaultValue, renderInnerField: (props) => {
-                if (innerFieldConfig.type === 'custom' && innerFieldConfig.render) {
-                    return innerFieldConfig.render({
-                        field: innerFieldConfig,
-                        value: props.value,
-                        onChange: props.onChange,
-                        readOnly: props.readOnly,
-                        name: 'responsive-inner',
-                        id: 'responsive-inner',
-                    });
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(ResponsiveField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly,
+                defaultValue: config.defaultValue,
+                renderInnerField: (props)=>{
+                    if (innerFieldConfig.type === 'custom' && innerFieldConfig.render) {
+                        return innerFieldConfig.render({
+                            field: innerFieldConfig,
+                            value: props.value,
+                            onChange: props.onChange,
+                            readOnly: props.readOnly,
+                            name: 'responsive-inner',
+                            id: 'responsive-inner'
+                        });
+                    }
+                    return null;
                 }
-                return null;
-            } })),
+            })
     };
 }
-//# sourceMappingURL=ResponsiveField.js.map

package/dist/fields/ResponsiveVisibilityField.d.ts

@@ -7,14 +7,14 @@
  */
 import React from 'react';
 import type { CustomField } from '@puckeditor/core';
-import type { VisibilityValue } from './shared';
+import type { VisibilityValue } from './shared.js';
 interface ResponsiveVisibilityFieldProps {
     value: VisibilityValue | null;
     onChange: (value: VisibilityValue | null) => void;
     label?: string;
     readOnly?: boolean;
 }
-declare function ResponsiveVisibilityFieldInner({ value, onChange, label, readOnly, }: ResponsiveVisibilityFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function ResponsiveVisibilityFieldInner({ value, onChange, label, readOnly, }: ResponsiveVisibilityFieldProps): React.JSX.Element;
 export declare const ResponsiveVisibilityField: React.MemoExoticComponent<typeof ResponsiveVisibilityFieldInner>;
 interface CreateResponsiveVisibilityFieldConfig {
     label?: string;
@@ -31,4 +31,3 @@ interface CreateResponsiveVisibilityFieldConfig {
  */
 export declare function createResponsiveVisibilityField(config?: CreateResponsiveVisibilityFieldConfig): CustomField<VisibilityValue | null>;
 export {};
-//# sourceMappingURL=ResponsiveVisibilityField.d.ts.map