@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/fields/ResponsiveField.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ResponsiveField - Generic wrapper for breakpoint-specific field overrides
+ *
+ * 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 React from 'react';
+import type { CustomField } from '@measured/puck';
+import type { ResponsiveValue } from './shared';
+interface ResponsiveFieldProps<T> {
+    value: ResponsiveValue<T> | null;
+    onChange: (value: ResponsiveValue<T> | null) => void;
+    label?: string;
+    readOnly?: boolean;
+    /** Render function for the inner field */
+    renderInnerField: (props: {
+        value: T | null;
+        onChange: (v: T | null) => void;
+        readOnly?: boolean;
+    }) => React.ReactNode;
+    /** Default value for the xs breakpoint */
+    defaultValue?: T;
+}
+export declare const ResponsiveField: <T>(props: ResponsiveFieldProps<T>) => React.ReactElement;
+interface CreateResponsiveFieldConfig<T> {
+    label?: string;
+    innerField: (config: {
+        label?: string;
+    }) => CustomField<T | null>;
+    defaultValue?: T;
+}
+/**
+ * Creates a responsive wrapper around any Puck custom field.
+ */
+export declare function createResponsiveField<T>(config: CreateResponsiveFieldConfig<T>): CustomField<ResponsiveValue<T> | null>;
+export {};
+//# sourceMappingURL=ResponsiveField.d.ts.map

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

@@ -0,0 +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,gBAAgB,CAAA;AAQjD,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;AAyXD,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

@@ -0,0 +1,275 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ResponsiveField - Generic wrapper for breakpoint-specific field overrides
+ *
+ * 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';
+// =============================================================================
+// Breakpoint Icons
+// =============================================================================
+const BREAKPOINT_ICONS = {
+    xs: Smartphone,
+    sm: Smartphone,
+    md: Tablet,
+    lg: Laptop,
+    xl: Monitor,
+};
+// =============================================================================
+// Styles
+// =============================================================================
+const styles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    labelGroup: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    },
+    label: {
+        fontSize: '14px',
+        fontWeight: 500,
+        color: 'var(--theme-elevation-800)',
+    },
+    overrideBadge: {
+        fontSize: '12px',
+        color: 'var(--theme-elevation-500)',
+        backgroundColor: 'var(--theme-elevation-100)',
+        padding: '2px 6px',
+        borderRadius: '4px',
+    },
+    clearButton: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '24px',
+        height: '24px',
+        padding: 0,
+        border: 'none',
+        borderRadius: '4px',
+        backgroundColor: 'transparent',
+        color: 'var(--theme-elevation-500)',
+        cursor: 'pointer',
+    },
+    tabsContainer: {
+        display: 'flex',
+        gap: '4px',
+        padding: '4px',
+        backgroundColor: 'var(--theme-elevation-50)',
+        borderRadius: '8px',
+    },
+    tab: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '4px',
+        padding: '6px 8px',
+        fontSize: '12px',
+        fontWeight: 500,
+        borderRadius: '6px',
+        border: 'none',
+        cursor: 'pointer',
+        transition: 'all 0.15s',
+        flex: 1,
+        backgroundColor: 'var(--theme-elevation-100)',
+        color: 'var(--theme-elevation-500)',
+    },
+    tabActive: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '4px',
+        padding: '6px 8px',
+        fontSize: '12px',
+        fontWeight: 500,
+        borderRadius: '6px',
+        border: 'none',
+        cursor: 'pointer',
+        transition: 'all 0.15s',
+        flex: 1,
+        backgroundColor: 'var(--theme-elevation-800)',
+        color: 'var(--theme-bg)',
+    },
+    tabDisabled: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+    },
+    overrideIndicator: {
+        position: 'absolute',
+        top: '-2px',
+        right: '-2px',
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: 'var(--theme-elevation-800)',
+    },
+    infoRow: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontSize: '12px',
+        color: 'var(--theme-elevation-500)',
+    },
+    clearOverrideButton: {
+        padding: '2px 8px',
+        fontSize: '12px',
+        border: 'none',
+        borderRadius: '4px',
+        backgroundColor: 'transparent',
+        color: 'var(--theme-elevation-500)',
+        cursor: 'pointer',
+    },
+    innerFieldContainer: {
+        padding: '12px',
+        border: '1px solid var(--theme-elevation-150)',
+        borderRadius: '6px',
+    },
+};
+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 }))] }));
+}
+// =============================================================================
+// ResponsiveField Component
+// =============================================================================
+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;
+        if (activeBreakpoint === 'xs') {
+            return value.xs ?? defaultValue ?? null;
+        }
+        const override = value[activeBreakpoint];
+        if (override !== undefined) {
+            return override;
+        }
+        const breakpointOrder = ['xl', 'lg', 'md', 'sm', 'xs'];
+        const activeIndex = breakpointOrder.indexOf(activeBreakpoint);
+        for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {
+            const bp = breakpointOrder[i];
+            const val = value[bp];
+            if (val !== undefined) {
+                return val;
+            }
+        }
+        return defaultValue ?? null;
+    }, [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'];
+        const activeIndex = breakpointOrder.indexOf(activeBreakpoint);
+        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) => {
+        if (activeBreakpoint === 'xs') {
+            if (newValue === null) {
+                onChange(null);
+            }
+            else {
+                onChange({ ...value, xs: newValue });
+            }
+        }
+        else {
+            if (newValue === null) {
+                if (!value)
+                    return;
+                const newResponsive = { ...value };
+                delete newResponsive[activeBreakpoint];
+                onChange(newResponsive);
+            }
+            else {
+                const xs = value?.xs ?? defaultValue;
+                if (xs === undefined)
+                    return;
+                onChange({
+                    ...value,
+                    xs,
+                    [activeBreakpoint]: newValue,
+                });
+            }
+        }
+    }, [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(() => {
+        onChange(null);
+    }, [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({
+                    value: currentValue,
+                    onChange: handleInnerChange,
+                    readOnly,
+                }) })] }));
+}
+export const ResponsiveField = memo(ResponsiveFieldInner);
+/**
+ * Creates a responsive wrapper around any Puck custom field.
+ */
+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',
+                    });
+                }
+                return null;
+            } })),
+    };
+}
+//# sourceMappingURL=ResponsiveField.js.map

package/dist/fields/ResponsiveField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveField.js","sourceRoot":"","sources":["../../src/fields/ResponsiveField.tsx"],"names":[],"mappings":"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"}

package/dist/fields/ResponsiveVisibilityField.d.ts

@@ -0,0 +1,34 @@
+/**
+ * ResponsiveVisibilityField - Show/hide elements at different breakpoints
+ *
+ * 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 React from 'react';
+import type { CustomField } from '@measured/puck';
+import type { VisibilityValue } from './shared';
+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;
+export declare const ResponsiveVisibilityField: React.MemoExoticComponent<typeof ResponsiveVisibilityFieldInner>;
+interface CreateResponsiveVisibilityFieldConfig {
+    label?: string;
+}
+/**
+ * Creates a Puck custom field for responsive visibility control.
+ *
+ * @example
+ * ```ts
+ * fields: {
+ *   visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+ * }
+ * ```
+ */
+export declare function createResponsiveVisibilityField(config?: CreateResponsiveVisibilityFieldConfig): CustomField<VisibilityValue | null>;
+export {};
+//# sourceMappingURL=ResponsiveVisibilityField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveVisibilityField.d.ts","sourceRoot":"","sources":["../../src/fields/ResponsiveVisibilityField.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AASjD,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,UAAU,CAAA;AAO3D,UAAU,8BAA8B;IACtC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA6ID,iBAAS,8BAA8B,CAAC,EACtC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,8BAA8B,2CA+DhC;AAED,eAAO,MAAM,yBAAyB,kEAAuC,CAAA;AAM7E,UAAU,qCAAqC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,+BAA+B,CAC7C,MAAM,GAAE,qCAA0C,GACjD,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC,CAarC"}

package/dist/fields/ResponsiveVisibilityField.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ResponsiveVisibilityField - Show/hide elements at different breakpoints
+ *
+ * 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';
+// =============================================================================
+// Breakpoint Icons
+// =============================================================================
+const BREAKPOINT_ICONS = {
+    xs: Smartphone,
+    sm: Smartphone,
+    md: Tablet,
+    lg: Laptop,
+    xl: Monitor,
+};
+// =============================================================================
+// Styles
+// =============================================================================
+const styles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    label: {
+        fontSize: '14px',
+        fontWeight: 500,
+        color: 'var(--theme-elevation-800)',
+    },
+    warningBadge: {
+        fontSize: '12px',
+        color: 'var(--theme-warning-500)',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+    },
+    toggleGrid: {
+        display: 'flex',
+        gap: '4px',
+    },
+    toggleButton: {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '2px',
+        padding: '8px',
+        borderRadius: '6px',
+        flex: 1,
+        minWidth: '52px',
+        cursor: 'pointer',
+        transition: 'all 0.15s',
+        border: '1px solid',
+    },
+    toggleVisible: {
+        backgroundColor: 'rgba(16, 185, 129, 0.15)',
+        color: 'rgb(16, 185, 129)',
+        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)',
+    },
+    toggleDisabled: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+    },
+    toggleLabel: {
+        fontSize: '10px',
+        fontWeight: 500,
+    },
+    toggleIcon: {
+        position: 'absolute',
+        top: '4px',
+        right: '4px',
+    },
+    helpText: {
+        fontSize: '12px',
+        color: 'var(--theme-elevation-500)',
+    },
+};
+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: {
+            ...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' } })) })] }));
+}
+// =============================================================================
+// ResponsiveVisibilityField Component
+// =============================================================================
+function ResponsiveVisibilityFieldInner({ value, onChange, label, readOnly, }) {
+    // Get visibility for a breakpoint (simple lookup, no cascade)
+    const getVisibility = useCallback((breakpoint) => {
+        const val = value ?? DEFAULT_VISIBILITY;
+        // All breakpoints have explicit values, default to true if undefined
+        return val[breakpoint] ?? true;
+    }, [value]);
+    // Toggle visibility for a breakpoint (simple toggle, no cascade)
+    const toggleVisibility = useCallback((breakpoint) => {
+        const currentVisible = getVisibility(breakpoint);
+        const newValue = {
+            ...(value ?? DEFAULT_VISIBILITY),
+            [breakpoint]: !currentVisible,
+        };
+        onChange(newValue);
+    }, [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." })] }));
+}
+export const ResponsiveVisibilityField = memo(ResponsiveVisibilityFieldInner);
+/**
+ * Creates a Puck custom field for responsive visibility control.
+ *
+ * @example
+ * ```ts
+ * fields: {
+ *   visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+ * }
+ * ```
+ */
+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 })),
+    };
+}
+//# sourceMappingURL=ResponsiveVisibilityField.js.map

package/dist/fields/ResponsiveVisibilityField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveVisibilityField.js","sourceRoot":"","sources":["../../src/fields/ResponsiveVisibilityField.tsx"],"names":[],"mappings":"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"}

package/dist/fields/SizeField.d.ts

@@ -0,0 +1,54 @@
+/**
+ * SizeField - Custom Puck field for button/element sizing
+ *
+ * Provides preset size options (sm, default, lg) with a "custom" mode
+ * that reveals detailed controls for height, padding, and font size.
+ */
+import React from 'react';
+import type { CustomField } from '@measured/puck';
+export type SizeMode = 'sm' | 'default' | 'lg' | 'custom';
+export type SizeUnit = 'px' | 'rem';
+export interface SizeValue {
+    mode: SizeMode;
+    /** Height in units (only used when mode === 'custom') */
+    height?: number;
+    /** Horizontal padding in units (only used when mode === 'custom') */
+    paddingX?: number;
+    /** Vertical padding in units (only used when mode === 'custom') */
+    paddingY?: number;
+    /** Font size in units (only used when mode === 'custom') */
+    fontSize?: number;
+    /** Unit for all values */
+    unit?: SizeUnit;
+}
+interface SizeFieldProps {
+    value: SizeValue | null;
+    onChange: (value: SizeValue | null) => void;
+    label?: string;
+    readOnly?: boolean;
+    /** Show height input (default: true) */
+    showHeight?: boolean;
+    /** Show font size input (default: true) */
+    showFontSize?: boolean;
+}
+declare function SizeFieldInner({ value, onChange, label, readOnly, showHeight, showFontSize, }: SizeFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const SizeField: React.MemoExoticComponent<typeof SizeFieldInner>;
+/**
+ * Convert SizeValue to CSS properties object
+ */
+export declare function sizeValueToCSS(size: SizeValue | null | undefined): React.CSSProperties | undefined;
+/**
+ * Get Tailwind classes for preset size modes
+ */
+export declare function getSizeClasses(size: SizeValue | null | undefined, sizeMap: Record<string, string>): string;
+interface CreateSizeFieldConfig {
+    label?: string;
+    showHeight?: boolean;
+    showFontSize?: boolean;
+}
+/**
+ * Creates a Puck field configuration for size control
+ */
+export declare function createSizeField(config?: CreateSizeFieldConfig): CustomField<SizeValue | null>;
+export {};
+//# sourceMappingURL=SizeField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SizeField.d.ts","sourceRoot":"","sources":["../../src/fields/SizeField.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAOjD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,QAAQ,CAAA;AACzD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAA;AAEnC,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAqKD,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,KAAc,EACd,QAAQ,EACR,UAAiB,EACjB,YAAmB,GACpB,EAAE,cAAc,2CAuKhB;AAED,eAAO,MAAM,SAAS,kDAAuB,CAAA;AAM7C;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC,aAAa,GAAG,SAAS,CAqBlG;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAI1G;AAMD,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,MAAM,GAAE,qBAA0B,GACjC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,CAe/B"}