@delmaredigital/payload-puck 0.6.12 → 0.6.13

package/dist/fields/ResetField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResetField.js","sourceRoot":"","sources":["../../src/fields/ResetField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ResetField.tsx"],"sourcesContent":["'use client'\n\n/**\n * ResetField - Custom Puck field for resetting component to defaults\n *\n * This field renders a reset button that clears all customizations\n * and restores the component to its default state.\n *\n * Uses Puck's usePuck hook and dispatch to properly update component data.\n */\n\nimport React, { memo, useCallback, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport { createUsePuck } from '@puckeditor/core'\nimport type { Data } from '@puckeditor/core'\nimport { RefreshCw } from 'lucide-react'\n\n// Create usePuck hook for accessing editor state\nconst usePuck = createUsePuck()\n\n// =============================================================================\n// Types\n// =============================================================================\n\ninterface ResetFieldProps {\n  onClick: () => void\n  label?: string\n  disabled?: boolean\n}\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n  } as CSSProperties,\n  button: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '6px',\n    width: '100%',\n    padding: '6px 12px',\n    fontSize: '14px',\n    fontWeight: 500,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n    transition: 'all 0.15s',\n  } as CSSProperties,\n  buttonDisabled: {\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// ResetField Component\n// =============================================================================\n\nfunction ResetFieldInner({\n  onClick,\n  label = 'Reset to defaults',\n  disabled,\n}: ResetFieldProps) {\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      <button\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        style={{\n          ...styles.button,\n          ...(disabled ? styles.buttonDisabled : {}),\n        }}\n        onMouseOver={(e) => {\n          if (!disabled) {\n            e.currentTarget.style.color = 'var(--theme-error-500)'\n            e.currentTarget.style.backgroundColor = 'rgba(239, 68, 68, 0.1)'\n          }\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.color = 'var(--theme-elevation-500)'\n          e.currentTarget.style.backgroundColor = 'transparent'\n        }}\n      >\n        <RefreshCw style={{ width: '14px', height: '14px' }} />\n        {label}\n      </button>\n    </div>\n  )\n}\n\nexport const ResetField = memo(ResetFieldInner)\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Recursively update a component's props in Puck data structure\n */\nfunction updateComponentInData(\n  data: Data,\n  componentId: string,\n  newProps: Record<string, unknown>\n): Data {\n  const updateItem = (item: { type: string; props: Record<string, unknown> }) => {\n    if (item.props?.id === componentId) {\n      return {\n        ...item,\n        props: {\n          ...newProps,\n          id: componentId,\n        },\n      }\n    }\n    return item\n  }\n\n  const updatedContent = data.content.map(updateItem)\n\n  const updatedZones: Record<string, Array<{ type: string; props: Record<string, unknown> }>> = {}\n  if (data.zones) {\n    for (const [zoneName, zoneContent] of Object.entries(data.zones)) {\n      updatedZones[zoneName] = (zoneContent as Array<{ type: string; props: Record<string, unknown> }>).map(updateItem)\n    }\n  }\n\n  return {\n    ...data,\n    content: updatedContent,\n    zones: Object.keys(updatedZones).length > 0 ? updatedZones : data.zones,\n  }\n}\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\ninterface CreateResetFieldConfig<T> {\n  label?: string\n  defaultProps: T\n}\n\n/**\n * Creates a Puck field configuration for a reset button\n */\nexport function createResetField<T extends object>(\n  config: CreateResetFieldConfig<T>\n): CustomField<unknown> {\n  const ResetFieldWrapper = ({ readOnly }: { readOnly?: boolean }) => {\n    const appState = usePuck((s) => s.appState)\n    const dispatch = usePuck((s) => s.dispatch)\n    const selectedItem = usePuck((s) => s.selectedItem)\n\n    const handleReset = useCallback(() => {\n      if (!selectedItem?.props?.id) {\n        console.warn('ResetField: No selected item found')\n        return\n      }\n\n      const componentId = selectedItem.props.id as string\n\n      const updatedData = updateComponentInData(\n        appState.data,\n        componentId,\n        config.defaultProps as unknown as Record<string, unknown>\n      )\n\n      dispatch({\n        type: 'setData',\n        data: updatedData,\n      })\n    }, [appState.data, dispatch, selectedItem])\n\n    return (\n      <ResetField\n        onClick={handleReset}\n        label={config.label}\n        disabled={readOnly}\n      />\n    )\n  }\n\n  return {\n    type: 'custom',\n    render: ({ readOnly }) => <ResetFieldWrapper readOnly={readOnly} />,\n  }\n}\n"],"names":["React","memo","useCallback","createUsePuck","RefreshCw","usePuck","styles","container","display","flexDirection","button","alignItems","justifyContent","gap","width","padding","fontSize","fontWeight","border","borderRadius","backgroundColor","color","cursor","transition","buttonDisabled","opacity","ResetFieldInner","onClick","label","disabled","div","className","style","type","onMouseOver","e","currentTarget","onMouseOut","height","ResetField","updateComponentInData","data","componentId","newProps","updateItem","item","props","id","updatedContent","content","map","updatedZones","zones","zoneName","zoneContent","Object","entries","keys","length","createResetField","config","ResetFieldWrapper","readOnly","appState","s","dispatch","selectedItem","handleReset","console","warn","updatedData","defaultProps","render"],"mappings":"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"}

package/dist/fields/ResponsiveField.d.ts

@@ -7,7 +7,7 @@
  */
 import React from 'react';
 import type { CustomField } from '@puckeditor/core';
-import type { ResponsiveValue } from './shared';
+import type { ResponsiveValue } from './shared.js';
 interface ResponsiveFieldProps<T> {
     value: ResponsiveValue<T> | null;
     onChange: (value: ResponsiveValue<T> | null) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveField.d.ts","sourceRoot":"","sources":["../../src/fields/ResponsiveField.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAQnD,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,UAAU,CAAA;AAO3D,UAAU,oBAAoB,CAAC,CAAC;IAC9B,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,gBAAgB,EAAE,CAAC,KAAK,EAAE;QACxB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;QACf,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;QAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,CAAA;CACjB;AA4XD,eAAO,MAAM,eAAe,EAAiC,CAAC,CAAC,EAC7D,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAC3B,KAAK,CAAC,YAAY,CAAA;AAMvB,UAAU,2BAA2B,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IACjE,YAAY,CAAC,EAAE,CAAC,CAAA;CACjB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EACrC,MAAM,EAAE,2BAA2B,CAAC,CAAC,CAAC,GACrC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CA6BxC"}
+{"version":3,"file":"ResponsiveField.d.ts","sourceRoot":"","sources":["../../src/fields/ResponsiveField.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAQnD,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,aAAa,CAAA;AAO9D,UAAU,oBAAoB,CAAC,CAAC;IAC9B,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,gBAAgB,EAAE,CAAC,KAAK,EAAE;QACxB,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;QACf,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;QAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,CAAA;CACjB;AA4XD,eAAO,MAAM,eAAe,EAAiC,CAAC,CAAC,EAC7D,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAC3B,KAAK,CAAC,YAAY,CAAA;AAMvB,UAAU,2BAA2B,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IACjE,YAAY,CAAC,EAAE,CAAC,CAAA;CACjB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EACrC,MAAM,EAAE,2BAA2B,CAAC,CAAC,CAAC,GACrC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CA6BxC"}

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,222 @@ 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/ResponsiveField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveField.js","sourceRoot":"","sources":["../../src/fields/ResponsiveField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ResponsiveField.tsx"],"sourcesContent":["'use client'\n\n/**\n * ResponsiveField - Generic wrapper for breakpoint-specific field overrides\n *\n * This component wraps any existing field to provide responsive overrides\n * at different breakpoints (xs, sm, md, lg, xl). It uses sparse storage,\n * only storing values for breakpoints that have explicit overrides.\n */\n\nimport React, { useState, useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport {\n  Smartphone,\n  Tablet,\n  Laptop,\n  Monitor,\n  X,\n} from 'lucide-react'\nimport type { Breakpoint, ResponsiveValue } from './shared.js'\nimport { BREAKPOINTS } from './shared.js'\n\n// =============================================================================\n// Types\n// =============================================================================\n\ninterface ResponsiveFieldProps<T> {\n  value: ResponsiveValue<T> | null\n  onChange: (value: ResponsiveValue<T> | null) => void\n  label?: string\n  readOnly?: boolean\n  /** Render function for the inner field */\n  renderInnerField: (props: {\n    value: T | null\n    onChange: (v: T | null) => void\n    readOnly?: boolean\n  }) => React.ReactNode\n  /** Default value for the xs breakpoint */\n  defaultValue?: T\n}\n\n// =============================================================================\n// Breakpoint Icons\n// =============================================================================\n\nconst BREAKPOINT_ICONS: Record<Breakpoint, React.ComponentType<{ style?: CSSProperties }>> = {\n  xs: Smartphone,\n  sm: Smartphone,\n  md: Tablet,\n  lg: Laptop,\n  xl: Monitor,\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  labelGroup: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as CSSProperties,\n  label: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  overrideBadge: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n    backgroundColor: 'var(--theme-elevation-100)',\n    padding: '2px 6px',\n    borderRadius: '4px',\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  tabsContainer: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '4px',\n    padding: '4px',\n    backgroundColor: 'var(--theme-elevation-50)',\n    borderRadius: '8px',\n  } as CSSProperties,\n  tab: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '4px',\n    padding: '6px 8px',\n    fontSize: '12px',\n    fontWeight: 500,\n    borderRadius: '6px',\n    border: 'none',\n    cursor: 'pointer',\n    transition: 'all 0.15s',\n    flex: '1 1 auto',\n    minWidth: '52px',\n    backgroundColor: 'var(--theme-elevation-100)',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  tabActive: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '4px',\n    padding: '6px 8px',\n    fontSize: '12px',\n    fontWeight: 500,\n    borderRadius: '6px',\n    border: 'none',\n    cursor: 'pointer',\n    transition: 'all 0.15s',\n    flex: '1 1 auto',\n    minWidth: '52px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n  } as CSSProperties,\n  tabDisabled: {\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as CSSProperties,\n  overrideIndicator: {\n    position: 'absolute',\n    top: '-2px',\n    right: '-2px',\n    width: '8px',\n    height: '8px',\n    borderRadius: '50%',\n    backgroundColor: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  infoRow: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  clearOverrideButton: {\n    padding: '2px 8px',\n    fontSize: '12px',\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  innerFieldContainer: {\n    padding: '12px',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '6px',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// Breakpoint Tab Button\n// =============================================================================\n\ninterface BreakpointTabProps {\n  breakpoint: Breakpoint\n  label: string\n  minWidth: number | null\n  isActive: boolean\n  hasOverride: boolean\n  onClick: () => void\n  disabled?: boolean\n}\n\nfunction BreakpointTab({\n  breakpoint,\n  label,\n  minWidth,\n  isActive,\n  hasOverride,\n  onClick,\n  disabled,\n}: BreakpointTabProps) {\n  const Icon = BREAKPOINT_ICONS[breakpoint]\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      title={minWidth ? `${label} (${minWidth}px+)` : label}\n      style={{\n        ...(isActive ? styles.tabActive : styles.tab),\n        ...(disabled ? styles.tabDisabled : {}),\n      }}\n    >\n      <Icon style={{ width: '14px', height: '14px' }} />\n      <span>{label}</span>\n      {/* Override indicator dot */}\n      {hasOverride && !isActive && (\n        <span style={styles.overrideIndicator as CSSProperties} />\n      )}\n    </button>\n  )\n}\n\n// =============================================================================\n// ResponsiveField Component\n// =============================================================================\n\nfunction ResponsiveFieldInner<T>({\n  value,\n  onChange,\n  label,\n  readOnly,\n  renderInnerField,\n  defaultValue,\n}: ResponsiveFieldProps<T>) {\n  const [activeBreakpoint, setActiveBreakpoint] = useState<Breakpoint>('xs')\n\n  // Get the current value for the active breakpoint\n  const getCurrentValue = useCallback((): T | null => {\n    if (!value) return null\n\n    if (activeBreakpoint === 'xs') {\n      return value.xs ?? defaultValue ?? null\n    }\n\n    const override = value[activeBreakpoint]\n    if (override !== undefined) {\n      return override\n    }\n\n    const breakpointOrder: Breakpoint[] = ['xl', 'lg', 'md', 'sm', 'xs']\n    const activeIndex = breakpointOrder.indexOf(activeBreakpoint)\n\n    for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {\n      const bp = breakpointOrder[i]\n      const val = value[bp]\n      if (val !== undefined) {\n        return val\n      }\n    }\n\n    return defaultValue ?? null\n  }, [value, activeBreakpoint, defaultValue])\n\n  const hasOverride = useCallback(\n    (breakpoint: Breakpoint): boolean => {\n      if (!value) return false\n      if (breakpoint === 'xs') return false\n      return value[breakpoint] !== undefined\n    },\n    [value]\n  )\n\n  const getInheritanceSource = useCallback((): Breakpoint | null => {\n    if (!value || activeBreakpoint === 'xs') return null\n    if (value[activeBreakpoint] !== undefined) return null\n\n    const breakpointOrder: Breakpoint[] = ['xl', 'lg', 'md', 'sm', 'xs']\n    const activeIndex = breakpointOrder.indexOf(activeBreakpoint)\n\n    for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {\n      const bp = breakpointOrder[i]\n      if (value[bp] !== undefined) {\n        return bp\n      }\n    }\n\n    return null\n  }, [value, activeBreakpoint])\n\n  const handleInnerChange = useCallback(\n    (newValue: T | null) => {\n      if (activeBreakpoint === 'xs') {\n        if (newValue === null) {\n          onChange(null)\n        } else {\n          onChange({ ...value, xs: newValue } as ResponsiveValue<T>)\n        }\n      } else {\n        if (newValue === null) {\n          if (!value) return\n          const newResponsive = { ...value }\n          delete newResponsive[activeBreakpoint]\n          onChange(newResponsive)\n        } else {\n          const xs = value?.xs ?? defaultValue\n          if (xs === undefined) return\n          onChange({\n            ...value,\n            xs,\n            [activeBreakpoint]: newValue,\n          } as ResponsiveValue<T>)\n        }\n      }\n    },\n    [value, onChange, activeBreakpoint, defaultValue]\n  )\n\n  const handleClearOverride = useCallback(() => {\n    if (activeBreakpoint === 'xs' || !value) return\n    const newResponsive = { ...value }\n    delete newResponsive[activeBreakpoint]\n    onChange(newResponsive)\n  }, [value, onChange, activeBreakpoint])\n\n  const handleClearAll = useCallback(() => {\n    onChange(null)\n  }, [onChange])\n\n  const currentValue = getCurrentValue()\n  const isOverrideBreakpoint = activeBreakpoint !== 'xs'\n  const currentHasOverride = hasOverride(activeBreakpoint)\n  const inheritanceSource = getInheritanceSource()\n\n  const overrideCount = value\n    ? (['sm', 'md', 'lg', 'xl'] as Breakpoint[]).filter((bp) => value[bp] !== undefined).length\n    : 0\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {/* Header */}\n      <div style={styles.header}>\n        {label && (\n          <div style={styles.labelGroup}>\n            <label style={styles.label}>{label}</label>\n            {overrideCount > 0 && (\n              <span style={styles.overrideBadge}>\n                {overrideCount} override{overrideCount !== 1 ? 's' : ''}\n              </span>\n            )}\n          </div>\n        )}\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClearAll}\n            style={styles.clearButton}\n            title=\"Clear all values\"\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      {/* Breakpoint Tabs */}\n      <div style={styles.tabsContainer}>\n        {BREAKPOINTS.map((bp) => (\n          <BreakpointTab\n            key={bp.key}\n            breakpoint={bp.key}\n            label={bp.label}\n            minWidth={bp.minWidth}\n            isActive={activeBreakpoint === bp.key}\n            hasOverride={hasOverride(bp.key)}\n            onClick={() => setActiveBreakpoint(bp.key)}\n            disabled={readOnly}\n          />\n        ))}\n      </div>\n\n      {/* Active Breakpoint Info */}\n      <div style={styles.infoRow}>\n        <span>\n          {activeBreakpoint === 'xs' ? (\n            'Extra small screens (0-639px)'\n          ) : (\n            <>\n              {BREAKPOINTS.find((bp) => bp.key === activeBreakpoint)?.minWidth}px and up\n              {!currentHasOverride && inheritanceSource && (\n                <span style={{ color: 'var(--theme-elevation-400)' }}> (inheriting from {inheritanceSource.toUpperCase()})</span>\n              )}\n            </>\n          )}\n        </span>\n\n        {isOverrideBreakpoint && currentHasOverride && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClearOverride}\n            style={styles.clearOverrideButton}\n          >\n            Clear override\n          </button>\n        )}\n      </div>\n\n      {/* Inner Field */}\n      <div style={styles.innerFieldContainer}>\n        {renderInnerField({\n          value: currentValue,\n          onChange: handleInnerChange,\n          readOnly,\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport const ResponsiveField = memo(ResponsiveFieldInner) as <T>(\n  props: ResponsiveFieldProps<T>\n) => React.ReactElement\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\ninterface CreateResponsiveFieldConfig<T> {\n  label?: string\n  innerField: (config: { label?: string }) => CustomField<T | null>\n  defaultValue?: T\n}\n\n/**\n * Creates a responsive wrapper around any Puck custom field.\n */\nexport function createResponsiveField<T>(\n  config: CreateResponsiveFieldConfig<T>\n): CustomField<ResponsiveValue<T> | null> {\n  const innerFieldConfig = config.innerField({ label: undefined })\n\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <ResponsiveField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n        defaultValue={config.defaultValue}\n        renderInnerField={(props) => {\n          if (innerFieldConfig.type === 'custom' && innerFieldConfig.render) {\n            return innerFieldConfig.render({\n              field: innerFieldConfig,\n              value: props.value,\n              onChange: props.onChange,\n              readOnly: props.readOnly,\n              name: 'responsive-inner',\n              id: 'responsive-inner',\n            })\n          }\n          return null\n        }}\n      />\n    ),\n  }\n}\n"],"names":["React","useState","useCallback","memo","Smartphone","Tablet","Laptop","Monitor","X","BREAKPOINTS","BREAKPOINT_ICONS","xs","sm","md","lg","xl","styles","container","display","flexDirection","gap","header","alignItems","justifyContent","labelGroup","label","fontSize","fontWeight","color","overrideBadge","backgroundColor","padding","borderRadius","clearButton","width","height","border","cursor","tabsContainer","flexWrap","tab","position","transition","flex","minWidth","tabActive","tabDisabled","opacity","overrideIndicator","top","right","infoRow","clearOverrideButton","innerFieldContainer","BreakpointTab","breakpoint","isActive","hasOverride","onClick","disabled","Icon","button","type","title","style","span","ResponsiveFieldInner","value","onChange","readOnly","renderInnerField","defaultValue","activeBreakpoint","setActiveBreakpoint","getCurrentValue","override","undefined","breakpointOrder","activeIndex","indexOf","i","length","bp","val","getInheritanceSource","handleInnerChange","newValue","newResponsive","handleClearOverride","handleClearAll","currentValue","isOverrideBreakpoint","currentHasOverride","inheritanceSource","overrideCount","filter","div","className","map","key","find","toUpperCase","ResponsiveField","createResponsiveField","config","innerFieldConfig","innerField","render","props","field","name","id"],"mappings":"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"}

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;