@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/fields/ResponsiveVisibilityField.js

@@ -6,10 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Provides a compact visual interface for toggling element visibility
  * at each breakpoint (xs, sm, md, lg, xl). Simple independent toggles
  * like Elementor/Divi - each breakpoint is just on or off.
- */
-import { useCallback, memo } from 'react';
-import { Smartphone, Tablet, Laptop, Monitor, Eye, EyeOff, } from 'lucide-react';
-import { BREAKPOINTS, DEFAULT_VISIBILITY } from './shared';
+ */ import React, { useCallback, memo } from 'react';
+import { Smartphone, Tablet, Laptop, Monitor, Eye, EyeOff } from 'lucide-react';
+import { BREAKPOINTS, DEFAULT_VISIBILITY } 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: '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)'
     },
     warningBadge: {
         fontSize: '12px',
         color: 'var(--theme-warning-500)',
         display: 'flex',
         alignItems: 'center',
-        gap: '4px',
+        gap: '4px'
     },
     toggleGrid: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '4px',
+        gap: '4px'
     },
     toggleButton: {
         position: 'relative',
@@ -64,68 +63,147 @@ const styles = {
         minWidth: '44px',
         cursor: 'pointer',
         transition: 'all 0.15s',
-        border: '1px solid',
+        border: '1px solid'
     },
     toggleVisible: {
         backgroundColor: 'rgba(16, 185, 129, 0.15)',
         color: 'rgb(16, 185, 129)',
-        borderColor: 'rgba(16, 185, 129, 0.4)',
+        borderColor: 'rgba(16, 185, 129, 0.4)'
     },
     toggleHidden: {
         backgroundColor: 'rgba(239, 68, 68, 0.15)',
         color: 'rgb(239, 68, 68)',
-        borderColor: 'rgba(239, 68, 68, 0.4)',
+        borderColor: 'rgba(239, 68, 68, 0.4)'
     },
     toggleDisabled: {
         opacity: 0.5,
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     },
     toggleLabel: {
         fontSize: '10px',
-        fontWeight: 500,
+        fontWeight: 500
     },
     toggleIcon: {
         position: 'absolute',
         top: '4px',
-        right: '4px',
+        right: '4px'
     },
     helpText: {
         fontSize: '12px',
-        color: 'var(--theme-elevation-500)',
-    },
+        color: 'var(--theme-elevation-500)'
+    }
 };
-function VisibilityToggle({ breakpoint, label, minWidth, isVisible, onClick, disabled, }) {
+function VisibilityToggle({ breakpoint, label, minWidth, isVisible, onClick, disabled }) {
     const DeviceIcon = BREAKPOINT_ICONS[breakpoint];
-    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, title: `${label}${minWidth ? ` (${minWidth}px+)` : ''}: ${isVisible ? 'Visible' : 'Hidden'}`, style: {
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        onClick: onClick,
+        disabled: disabled,
+        title: `${label}${minWidth ? ` (${minWidth}px+)` : ''}: ${isVisible ? 'Visible' : 'Hidden'}`,
+        style: {
             ...styles.toggleButton,
-            ...(isVisible ? styles.toggleVisible : styles.toggleHidden),
-            ...(disabled ? styles.toggleDisabled : {}),
-        }, children: [_jsx(DeviceIcon, { style: { width: '16px', height: '16px' } }), _jsx("span", { style: styles.toggleLabel, children: label }), _jsx("div", { style: styles.toggleIcon, children: isVisible ? (_jsx(Eye, { style: { width: '12px', height: '12px' } })) : (_jsx(EyeOff, { style: { width: '12px', height: '12px' } })) })] }));
+            ...isVisible ? styles.toggleVisible : styles.toggleHidden,
+            ...disabled ? styles.toggleDisabled : {}
+        },
+        children: [
+            /*#__PURE__*/ _jsx(DeviceIcon, {
+                style: {
+                    width: '16px',
+                    height: '16px'
+                }
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                style: styles.toggleLabel,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.toggleIcon,
+                children: isVisible ? /*#__PURE__*/ _jsx(Eye, {
+                    style: {
+                        width: '12px',
+                        height: '12px'
+                    }
+                }) : /*#__PURE__*/ _jsx(EyeOff, {
+                    style: {
+                        width: '12px',
+                        height: '12px'
+                    }
+                })
+            })
+        ]
+    });
 }
 // =============================================================================
 // ResponsiveVisibilityField Component
 // =============================================================================
-function ResponsiveVisibilityFieldInner({ value, onChange, label, readOnly, }) {
+function ResponsiveVisibilityFieldInner({ value, onChange, label, readOnly }) {
     // Get visibility for a breakpoint (simple lookup, no cascade)
-    const getVisibility = useCallback((breakpoint) => {
+    const getVisibility = useCallback((breakpoint)=>{
         const val = value ?? DEFAULT_VISIBILITY;
         // All breakpoints have explicit values, default to true if undefined
         return val[breakpoint] ?? true;
-    }, [value]);
+    }, [
+        value
+    ]);
     // Toggle visibility for a breakpoint (simple toggle, no cascade)
-    const toggleVisibility = useCallback((breakpoint) => {
+    const toggleVisibility = useCallback((breakpoint)=>{
         const currentVisible = getVisibility(breakpoint);
         const newValue = {
-            ...(value ?? DEFAULT_VISIBILITY),
-            [breakpoint]: !currentVisible,
+            ...value ?? DEFAULT_VISIBILITY,
+            [breakpoint]: !currentVisible
         };
         onChange(newValue);
-    }, [value, onChange, getVisibility]);
+    }, [
+        value,
+        onChange,
+        getVisibility
+    ]);
     // Check if any breakpoint is hidden
-    const hasHiddenBreakpoints = BREAKPOINTS.some((bp) => !getVisibility(bp.key));
-    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [label && (_jsx("label", { style: styles.label, children: label })), hasHiddenBreakpoints && (_jsxs("span", { style: styles.warningBadge, children: [_jsx(EyeOff, { style: { width: '12px', height: '12px' } }), "Partially hidden"] }))] }), _jsx("div", { style: styles.toggleGrid, children: BREAKPOINTS.map((bp) => (_jsx(VisibilityToggle, { breakpoint: bp.key, label: bp.label, minWidth: bp.minWidth, isVisible: getVisibility(bp.key), onClick: () => toggleVisibility(bp.key), disabled: readOnly }, bp.key))) }), _jsx("p", { style: styles.helpText, children: "Toggle visibility per screen size. Each breakpoint is independent." })] }));
+    const hasHiddenBreakpoints = BREAKPOINTS.some((bp)=>!getVisibility(bp.key));
+    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
+                    }),
+                    hasHiddenBreakpoints && /*#__PURE__*/ _jsxs("span", {
+                        style: styles.warningBadge,
+                        children: [
+                            /*#__PURE__*/ _jsx(EyeOff, {
+                                style: {
+                                    width: '12px',
+                                    height: '12px'
+                                }
+                            }),
+                            "Partially hidden"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: styles.toggleGrid,
+                children: BREAKPOINTS.map((bp)=>/*#__PURE__*/ _jsx(VisibilityToggle, {
+                        breakpoint: bp.key,
+                        label: bp.label,
+                        minWidth: bp.minWidth,
+                        isVisible: getVisibility(bp.key),
+                        onClick: ()=>toggleVisibility(bp.key),
+                        disabled: readOnly
+                    }, bp.key))
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: styles.helpText,
+                children: "Toggle visibility per screen size. Each breakpoint is independent."
+            })
+        ]
+    });
 }
-export const ResponsiveVisibilityField = memo(ResponsiveVisibilityFieldInner);
+export const ResponsiveVisibilityField = /*#__PURE__*/ memo(ResponsiveVisibilityFieldInner);
 /**
  * Creates a Puck custom field for responsive visibility control.
  *
@@ -135,12 +213,15 @@ export const ResponsiveVisibilityField = memo(ResponsiveVisibilityFieldInner);
  *   visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
  * }
  * ```
- */
-export function createResponsiveVisibilityField(config = {}) {
+ */ export function createResponsiveVisibilityField(config = {}) {
     return {
         type: 'custom',
         label: config.label,
-        render: ({ value, onChange, readOnly }) => (_jsx(ResponsiveVisibilityField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly })),
+        render: ({ value, onChange, readOnly })=>/*#__PURE__*/ _jsx(ResponsiveVisibilityField, {
+                value: value,
+                onChange: onChange,
+                label: config.label,
+                readOnly: readOnly
+            })
     };
 }
-//# sourceMappingURL=ResponsiveVisibilityField.js.map

package/dist/fields/SizeField.d.ts

@@ -6,8 +6,8 @@
  */
 import React from 'react';
 import type { CustomField } from '@puckeditor/core';
-export { type SizeMode, type SizeUnit, type SizeValue, sizeValueToCSS, getSizeClasses, } from './shared';
-import type { SizeValue } from './shared';
+export { type SizeMode, type SizeUnit, type SizeValue, sizeValueToCSS, getSizeClasses, } from './shared.js';
+import type { SizeValue } from './shared.js';
 interface SizeFieldProps {
     value: SizeValue | null;
     onChange: (value: SizeValue | null) => void;
@@ -18,7 +18,7 @@ interface SizeFieldProps {
     /** Show font size input (default: true) */
     showFontSize?: boolean;
 }
-declare function SizeFieldInner({ value, onChange, label, readOnly, showHeight, showFontSize, }: SizeFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function SizeFieldInner({ value, onChange, label, readOnly, showHeight, showFontSize, }: SizeFieldProps): React.JSX.Element;
 export declare const SizeField: React.MemoExoticComponent<typeof SizeFieldInner>;
 interface CreateSizeFieldConfig {
     label?: string;
@@ -29,4 +29,3 @@ interface CreateSizeFieldConfig {
  * Creates a Puck field configuration for size control
  */
 export declare function createSizeField(config?: CreateSizeFieldConfig): CustomField<SizeValue | null>;
-//# sourceMappingURL=SizeField.d.ts.map