@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/fields/SizeField.js

@@ -0,0 +1,255 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { useCallback, memo } from 'react';
+import { X } from 'lucide-react';
+// =============================================================================
+// Default Values
+// =============================================================================
+const DEFAULT_VALUE = {
+    mode: 'default',
+};
+const CUSTOM_DEFAULTS = {
+    height: 40,
+    paddingX: 16,
+    paddingY: 8,
+    fontSize: 14,
+    unit: 'px',
+};
+// =============================================================================
+// Styles
+// =============================================================================
+const styles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    label: {
+        fontSize: '14px',
+        fontWeight: 500,
+        color: 'var(--theme-elevation-800)',
+    },
+    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',
+    },
+    buttonGroup: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '4px',
+    },
+    button: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '4px 12px',
+        fontSize: '12px',
+        fontWeight: 500,
+        border: '1px solid var(--theme-elevation-150)',
+        borderRadius: '4px',
+        backgroundColor: 'var(--theme-bg)',
+        color: 'var(--theme-elevation-700)',
+        cursor: 'pointer',
+    },
+    buttonActive: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '4px 12px',
+        fontSize: '12px',
+        fontWeight: 500,
+        border: '1px solid var(--theme-elevation-800)',
+        borderRadius: '4px',
+        backgroundColor: 'var(--theme-elevation-800)',
+        color: 'var(--theme-bg)',
+        cursor: 'pointer',
+    },
+    customPanel: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        padding: '12px',
+        backgroundColor: 'var(--theme-elevation-50)',
+        borderRadius: '6px',
+    },
+    unitRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    },
+    unitLabel: {
+        fontSize: '10px',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        color: 'var(--theme-elevation-500)',
+        flexShrink: 0,
+    },
+    unitButtons: {
+        display: 'flex',
+        gap: '4px',
+    },
+    unitButton: {
+        height: '28px',
+        padding: '0 8px',
+        fontSize: '12px',
+        fontFamily: 'monospace',
+        border: '1px solid var(--theme-elevation-150)',
+        borderRadius: '4px',
+        backgroundColor: 'var(--theme-bg)',
+        color: 'var(--theme-elevation-500)',
+        cursor: 'pointer',
+    },
+    unitButtonActive: {
+        height: '28px',
+        padding: '0 8px',
+        fontSize: '12px',
+        fontFamily: 'monospace',
+        border: '1px solid var(--theme-elevation-800)',
+        borderRadius: '4px',
+        backgroundColor: 'var(--theme-elevation-800)',
+        color: 'var(--theme-bg)',
+        cursor: 'pointer',
+    },
+    inputGrid: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '8px',
+    },
+    inputGroup: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+    },
+    inputLabel: {
+        fontSize: '10px',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        color: 'var(--theme-elevation-500)',
+    },
+    input: {
+        height: '32px',
+        padding: '0 8px',
+        fontSize: '14px',
+        fontFamily: 'monospace',
+        border: '1px solid var(--theme-elevation-150)',
+        borderRadius: '4px',
+        backgroundColor: 'var(--theme-input-bg)',
+        color: 'var(--theme-elevation-800)',
+    },
+    summary: {
+        fontSize: '12px',
+        color: 'var(--theme-elevation-500)',
+        fontFamily: 'monospace',
+        paddingTop: '4px',
+        borderTop: '1px solid var(--theme-elevation-100)',
+    },
+};
+// =============================================================================
+// SizeField Component
+// =============================================================================
+function SizeFieldInner({ value, onChange, label = 'Size', readOnly, showHeight = true, showFontSize = true, }) {
+    const currentValue = value || DEFAULT_VALUE;
+    const handleModeChange = useCallback((mode) => {
+        if (mode === 'custom') {
+            onChange({
+                mode,
+                ...CUSTOM_DEFAULTS,
+            });
+        }
+        else {
+            onChange({ mode });
+        }
+    }, [onChange]);
+    const handleValueChange = useCallback((field, val) => {
+        onChange({
+            ...currentValue,
+            [field]: val,
+        });
+    }, [currentValue, onChange]);
+    const handleUnitChange = useCallback((unit) => {
+        onChange({
+            ...currentValue,
+            unit,
+        });
+    }, [currentValue, onChange]);
+    const handleClear = useCallback(() => {
+        onChange(null);
+    }, [onChange]);
+    const presets = [
+        { mode: 'sm', label: 'SM' },
+        { mode: 'default', label: 'Default' },
+        { mode: 'lg', label: 'LG' },
+        { mode: 'custom', label: 'Custom' },
+    ];
+    return (_jsxs("div", { className: "puck-field", style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsx("label", { style: styles.label, children: label }), value && !readOnly && (_jsx("button", { type: "button", onClick: handleClear, style: styles.clearButton, title: "Reset to default", children: _jsx(X, { style: { width: '16px', height: '16px' } }) }))] }), _jsx("div", { style: styles.buttonGroup, children: presets.map(({ mode, label: modeLabel }) => {
+                    const isActive = currentValue.mode === mode;
+                    return (_jsx("button", { type: "button", onClick: () => handleModeChange(mode), disabled: readOnly, style: isActive ? styles.buttonActive : styles.button, children: modeLabel }, mode));
+                }) }), currentValue.mode === 'custom' && (_jsxs("div", { style: styles.customPanel, children: [_jsxs("div", { style: styles.unitRow, children: [_jsx("label", { style: styles.unitLabel, children: "Unit:" }), _jsx("div", { style: styles.unitButtons, children: ['px', 'rem'].map((unit) => {
+                                    const isActive = (currentValue.unit || 'px') === unit;
+                                    return (_jsx("button", { type: "button", onClick: () => handleUnitChange(unit), disabled: readOnly, style: isActive ? styles.unitButtonActive : styles.unitButton, children: unit }, unit));
+                                }) })] }), _jsxs("div", { style: styles.inputGrid, children: [showHeight && (_jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Height" }), _jsx("input", { type: "number", min: 0, value: currentValue.height ?? CUSTOM_DEFAULTS.height, onChange: (e) => handleValueChange('height', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] })), showFontSize && (_jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Font Size" }), _jsx("input", { type: "number", min: 0, value: currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize, onChange: (e) => handleValueChange('fontSize', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] })), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Padding X" }), _jsx("input", { type: "number", min: 0, value: currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX, onChange: (e) => handleValueChange('paddingX', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Padding Y" }), _jsx("input", { type: "number", min: 0, value: currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY, onChange: (e) => handleValueChange('paddingY', parseInt(e.target.value, 10) || 0), disabled: readOnly, style: styles.input })] })] }), _jsxs("div", { style: styles.summary, children: [showHeight && `h: ${currentValue.height ?? CUSTOM_DEFAULTS.height}${currentValue.unit || 'px'}`, showHeight && ' | ', `p: ${currentValue.paddingY ?? CUSTOM_DEFAULTS.paddingY}${currentValue.unit || 'px'} ${currentValue.paddingX ?? CUSTOM_DEFAULTS.paddingX}${currentValue.unit || 'px'}`, showFontSize && ` | font: ${currentValue.fontSize ?? CUSTOM_DEFAULTS.fontSize}${currentValue.unit || 'px'}`] })] }))] }));
+}
+export const SizeField = memo(SizeFieldInner);
+// =============================================================================
+// CSS Helper
+// =============================================================================
+/**
+ * Convert SizeValue to CSS properties object
+ */
+export function sizeValueToCSS(size) {
+    if (!size || size.mode !== 'custom')
+        return undefined;
+    const unit = size.unit || 'px';
+    const style = {};
+    if (size.height != null) {
+        style.height = `${size.height}${unit}`;
+    }
+    if (size.paddingX != null || size.paddingY != null) {
+        const py = size.paddingY ?? 0;
+        const px = size.paddingX ?? 0;
+        style.padding = `${py}${unit} ${px}${unit}`;
+    }
+    if (size.fontSize != null) {
+        style.fontSize = `${size.fontSize}${unit}`;
+    }
+    return Object.keys(style).length > 0 ? style : undefined;
+}
+/**
+ * Get Tailwind classes for preset size modes
+ */
+export function getSizeClasses(size, sizeMap) {
+    if (!size)
+        return sizeMap.default || '';
+    if (size.mode === 'custom')
+        return '';
+    return sizeMap[size.mode] || sizeMap.default || '';
+}
+/**
+ * Creates a Puck field configuration for size control
+ */
+export function createSizeField(config = {}) {
+    return {
+        type: 'custom',
+        label: config.label,
+        render: ({ value, onChange, readOnly }) => (_jsx(SizeField, { value: value, onChange: onChange, label: config.label, readOnly: readOnly, showHeight: config.showHeight, showFontSize: config.showFontSize })),
+    };
+}
+//# sourceMappingURL=SizeField.js.map

package/dist/fields/SizeField.js.map

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

package/dist/fields/SlugPreviewField.d.ts

@@ -0,0 +1,16 @@
+import type { CustomField } from '@measured/puck';
+interface SlugPreviewFieldProps {
+    value: string;
+    label?: string;
+    hint?: string;
+}
+export declare function SlugPreviewField({ value, label, hint, }: SlugPreviewFieldProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Creates a Puck field configuration for slug preview
+ */
+export declare function createSlugPreviewField(config?: {
+    label?: string;
+    hint?: string;
+}): CustomField<string>;
+export {};
+//# sourceMappingURL=SlugPreviewField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlugPreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/SlugPreviewField.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAOjD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAMD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAkB,EAClB,IAAkD,GACnD,EAAE,qBAAqB,2CA8DvB;AAMD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,CAAC,EAAE;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,WAAW,CAAC,MAAM,CAAC,CAYtB"}

package/dist/fields/SlugPreviewField.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, Lock } from 'lucide-react';
+// =============================================================================
+// SlugPreviewField Component
+// =============================================================================
+export function SlugPreviewField({ value, label = 'URL Slug', hint = 'Auto-generated from folder + page segment', }) {
+    const displayValue = value ? (value.startsWith('/') ? value : `/${value}`) : '/';
+    return (_jsxs("div", { className: "puck-field", children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: '8px',
+                }, children: [_jsx("label", { style: {
+                            fontSize: '14px',
+                            fontWeight: 500,
+                            color: 'var(--puck-color-grey-04)',
+                        }, children: label }), _jsx(Lock, { size: 14, style: { color: 'var(--puck-color-grey-06)' } })] }), _jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: '8px 12px',
+                    backgroundColor: 'var(--puck-color-grey-11)',
+                    border: '1px solid var(--puck-color-grey-09)',
+                    borderRadius: '6px',
+                }, children: [_jsx(Link, { size: 14, style: { marginRight: '8px', color: 'var(--puck-color-grey-06)' } }), _jsx("span", { style: {
+                            fontSize: '14px',
+                            color: 'var(--puck-color-grey-05)',
+                            fontFamily: 'var(--font-mono, monospace)',
+                            wordBreak: 'break-all',
+                        }, children: displayValue })] }), _jsx("p", { style: {
+                    marginTop: '6px',
+                    fontSize: '12px',
+                    color: 'var(--puck-color-grey-06)',
+                }, children: hint })] }));
+}
+// =============================================================================
+// Field Configuration Factory
+// =============================================================================
+/**
+ * Creates a Puck field configuration for slug preview
+ */
+export function createSlugPreviewField(config) {
+    return {
+        type: 'custom',
+        label: config?.label ?? 'URL Slug',
+        render: ({ value }) => (_jsx(SlugPreviewField, { value: value || '', label: config?.label, hint: config?.hint })),
+    };
+}
+//# sourceMappingURL=SlugPreviewField.js.map

package/dist/fields/SlugPreviewField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlugPreviewField.js","sourceRoot":"","sources":["../../src/fields/SlugPreviewField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAWZ,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAYzC,gFAAgF;AAChF,6BAA6B;AAC7B,gFAAgF;AAEhF,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,2CAA2C,GAC5B;IACtB,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IAEhF,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,aAEzB,eACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,eAAe;oBAC/B,YAAY,EAAE,KAAK;iBACpB,aAED,gBACE,KAAK,EAAE;4BACL,QAAQ,EAAE,MAAM;4BAChB,UAAU,EAAE,GAAG;4BACf,KAAK,EAAE,2BAA2B;yBACnC,YAEA,KAAK,GACA,EACR,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,GAAI,IAC7D,EAGN,eACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,UAAU;oBACnB,eAAe,EAAE,2BAA2B;oBAC5C,MAAM,EAAE,qCAAqC;oBAC7C,YAAY,EAAE,KAAK;iBACpB,aAED,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,2BAA2B,EAAE,GAAI,EACrF,eACE,KAAK,EAAE;4BACL,QAAQ,EAAE,MAAM;4BAChB,KAAK,EAAE,2BAA2B;4BAClC,UAAU,EAAE,6BAA6B;4BACzC,SAAS,EAAE,WAAW;yBACvB,YAEA,YAAY,GACR,IACH,EAGN,YACE,KAAK,EAAE;oBACL,SAAS,EAAE,KAAK;oBAChB,QAAQ,EAAE,MAAM;oBAChB,KAAK,EAAE,2BAA2B;iBACnC,YAEA,IAAI,GACH,IACA,CACP,CAAA;AACH,CAAC;AAED,gFAAgF;AAChF,8BAA8B;AAC9B,gFAAgF;AAEhF;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAC,MAGtC;IACC,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,UAAU;QAClC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACrB,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,KAAK,EAAE,MAAM,EAAE,KAAK,EACpB,IAAI,EAAE,MAAM,EAAE,IAAI,GAClB,CACH;KACF,CAAA;AACH,CAAC"}

package/dist/fields/TemplateField.d.ts

@@ -0,0 +1,31 @@
+/**
+ * TemplateField - Custom Puck field for saving/loading template content
+ *
+ * This component provides a template picker that:
+ * - Fetches templates from the puck-templates Payload collection
+ * - Shows a dropdown to select a template
+ * - Has a "Save as template" button to save current slot content
+ * - When a template is selected, loads the saved components into the slot
+ *
+ * Uses Puck's usePuck hook to access and modify component slot data.
+ */
+import React from 'react';
+import type { CustomField } from '@measured/puck';
+interface TemplateFieldProps {
+    value: string | null;
+    onChange: (value: string | null) => void;
+    label?: string;
+    readOnly?: boolean;
+    apiEndpoint?: string;
+}
+declare function TemplateFieldInner({ value, onChange, label, readOnly, apiEndpoint, }: TemplateFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const TemplateField: React.MemoExoticComponent<typeof TemplateFieldInner>;
+/**
+ * Creates a Puck field configuration for template selection
+ */
+export declare function createTemplateField(config: {
+    label?: string;
+    apiEndpoint?: string;
+}): CustomField<string | null>;
+export {};
+//# sourceMappingURL=TemplateField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateField.d.ts","sourceRoot":"","sources":["../../src/fields/TemplateField.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAqE,MAAM,OAAO,CAAA;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AA6BjD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAoOD,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,KAAkB,EAClB,QAAQ,EACR,WAAmC,GACpC,EAAE,kBAAkB,2CAyYpB;AAGD,eAAO,MAAM,aAAa,sDAA2B,CAAA;AAMrD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,GAAG,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,CAc7B"}