@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/components/layout/Container.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Container Component - Puck Configuration
+ *
+ * Simple organizational wrapper for grouping content.
+ * Uses Puck's slot system for nesting other components.
+ *
+ * For two-layer layouts (full-bleed background with constrained content),
+ * use the Section component instead.
+ *
+ * Responsive Controls:
+ * - dimensions: Different max-width/min-height at different breakpoints
+ * - padding: Different padding at different breakpoints
+ * - margin: Different margins at different breakpoints
+ * - visibility: Show/hide at different breakpoints
+ */
+import { useId } from 'react';
+import { dimensionsValueToCSS, borderValueToCSS, paddingValueToCSS, marginValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
+import { AnimatedWrapper } from '../AnimatedWrapper';
+import { createPaddingField } from '../../fields/PaddingField';
+import { createBorderField } from '../../fields/BorderField';
+import { createDimensionsField } from '../../fields/DimensionsField';
+import { createMarginField } from '../../fields/MarginField';
+import { createResetField } from '../../fields/ResetField';
+import { createBackgroundField } from '../../fields/BackgroundField';
+import { createAnimationField } from '../../fields/AnimationField';
+import { createResponsiveField } from '../../fields/ResponsiveField';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+// Default padding (none)
+const DEFAULT_PADDING = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    unit: 'px',
+    linked: true,
+};
+// Default dimensions (full width)
+const DEFAULT_DIMENSIONS = {
+    mode: 'full',
+    alignment: 'center',
+    maxWidth: { value: 100, unit: '%', enabled: true },
+};
+const defaultProps = {
+    content: [],
+    visibility: null,
+    dimensions: null,
+    background: null,
+    border: null,
+    padding: null,
+    margin: null,
+    animation: null,
+};
+export const ContainerConfig = {
+    label: 'Container',
+    fields: {
+        _reset: createResetField({ defaultProps }),
+        content: {
+            type: 'slot',
+        },
+        // Visibility first
+        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        // Dimensions
+        dimensions: createResponsiveField({
+            label: 'Dimensions',
+            innerField: (config) => createDimensionsField(config),
+            defaultValue: DEFAULT_DIMENSIONS,
+        }),
+        // Styling
+        background: createBackgroundField({ label: 'Background' }),
+        border: createBorderField({ label: 'Border' }),
+        // Spacing
+        padding: createResponsiveField({
+            label: 'Padding',
+            innerField: (config) => createPaddingField(config),
+            defaultValue: DEFAULT_PADDING,
+        }),
+        margin: createResponsiveField({
+            label: 'Margin',
+            innerField: (config) => createMarginField(config),
+            defaultValue: DEFAULT_PADDING,
+        }),
+        // Animation
+        animation: createAnimationField({ label: 'Animation' }),
+    },
+    defaultProps,
+    render: ({ content: Content, visibility, dimensions, background, border, padding, margin, animation, }) => {
+        // Generate unique ID for CSS targeting
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const uniqueId = useId().replace(/:/g, '');
+        const containerClass = `puck-container-${uniqueId}`;
+        // Collect all media query CSS
+        const mediaQueries = [];
+        // Build container styles
+        const containerStyles = {};
+        // Background
+        const backgroundStyles = backgroundValueToCSS(background);
+        if (backgroundStyles) {
+            Object.assign(containerStyles, backgroundStyles);
+        }
+        // Border
+        const borderStyles = borderValueToCSS(border);
+        if (borderStyles) {
+            Object.assign(containerStyles, borderStyles);
+        }
+        // Dimensions with responsive support
+        const dimensionsResult = responsiveValueToCSS(dimensions, dimensionsValueToCSS, containerClass);
+        Object.assign(containerStyles, dimensionsResult.baseStyles);
+        if (dimensionsResult.mediaQueryCSS) {
+            mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        }
+        // Check if minHeight is set - if so, we need flex layout to make slot expand
+        const hasMinHeight = (() => {
+            if (!dimensions)
+                return false;
+            // Check if it's a responsive value
+            if (typeof dimensions === 'object' && 'xs' in dimensions) {
+                const responsiveDims = dimensions;
+                return Object.values(responsiveDims).some((v) => {
+                    if (!v || typeof v !== 'object')
+                        return false;
+                    const dim = v;
+                    return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+                });
+            }
+            // Non-responsive value
+            const dim = dimensions;
+            return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+        })();
+        // Add flex layout when minHeight is set to make content stretch
+        if (hasMinHeight) {
+            containerStyles.display = 'flex';
+            containerStyles.flexDirection = 'column';
+        }
+        // Padding with responsive support
+        const paddingResult = responsiveValueToCSS(padding, (v) => ({ padding: paddingValueToCSS(v) }), containerClass);
+        Object.assign(containerStyles, paddingResult.baseStyles);
+        if (paddingResult.mediaQueryCSS) {
+            mediaQueries.push(paddingResult.mediaQueryCSS);
+        }
+        // Margin with responsive support
+        const marginResult = responsiveValueToCSS(margin, (v) => ({ margin: marginValueToCSS(v) }), containerClass);
+        Object.assign(containerStyles, marginResult.baseStyles);
+        if (marginResult.mediaQueryCSS) {
+            mediaQueries.push(marginResult.mediaQueryCSS);
+        }
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, containerClass);
+        if (visibilityCSS) {
+            mediaQueries.push(visibilityCSS);
+        }
+        // Combine all media queries
+        const allMediaQueryCSS = mediaQueries.join('\n');
+        // Check if we have any styling
+        const hasStyles = Object.keys(containerStyles).length > 0;
+        // When minHeight is set, wrap Content to ensure slot expands
+        const renderContent = () => {
+            if (hasMinHeight) {
+                return (_jsx("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }, children: _jsx(Content, { style: { flex: 1 } }) }));
+            }
+            return _jsx(Content, {});
+        };
+        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), hasStyles ? (_jsx("div", { className: containerClass, style: containerStyles, children: renderContent() })) : (_jsx(Content, { className: containerClass }))] }));
+    },
+};
+//# sourceMappingURL=Container.js.map

package/dist/components/layout/Container.js.map

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

package/dist/components/layout/Container.server.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Container Component - Server-safe Puck Configuration
+ *
+ * Simple organizational wrapper for grouping content.
+ * Uses Puck's slot system for nesting other components.
+ *
+ * This is a server-safe version with minimal fields (only slot for content).
+ * For the full editor version with fields, use Container.tsx
+ *
+ * For two-layer layouts (full-bleed background with constrained content),
+ * use the Section component instead.
+ *
+ * Responsive Controls:
+ * - dimensions: Different max-width/min-height at different breakpoints
+ * - padding: Different padding at different breakpoints
+ * - margin: Different margins at different breakpoints
+ * - visibility: Show/hide at different breakpoints
+ */
+import type { ComponentConfig } from '@measured/puck';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+export interface ContainerProps {
+    content: unknown;
+    visibility: VisibilityValue | null;
+    dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null;
+    background: BackgroundValue | null;
+    border: BorderValue | null;
+    padding: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    margin: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    animation: AnimationValue | null;
+}
+export declare const ContainerConfig: ComponentConfig;
+//# sourceMappingURL=Container.server.d.ts.map

package/dist/components/layout/Container.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.server.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Container.server.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAQL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAS5B,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAClC,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAClC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,OAAO,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC5D,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;CACjC;AAaD,eAAO,MAAM,eAAe,EAAE,eAsI7B,CAAA"}

package/dist/components/layout/Container.server.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dimensionsValueToCSS, borderValueToCSS, paddingValueToCSS, marginValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
+import { AnimatedWrapper } from '../AnimatedWrapper';
+// Simple ID generator for server-side rendering
+let idCounter = 0;
+function generateUniqueId() {
+    return `c${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+const defaultProps = {
+    content: [],
+    visibility: null,
+    dimensions: null,
+    background: null,
+    border: null,
+    padding: null,
+    margin: null,
+    animation: null,
+};
+export const ContainerConfig = {
+    label: 'Container',
+    fields: {
+        content: { type: 'slot' },
+    },
+    defaultProps,
+    render: ({ content: Content, visibility, dimensions, background, border, padding, margin, animation, }) => {
+        // Generate unique ID for CSS targeting (server-safe)
+        const uniqueId = generateUniqueId();
+        const containerClass = `puck-container-${uniqueId}`;
+        // Collect all media query CSS
+        const mediaQueries = [];
+        // Build container styles
+        const containerStyles = {};
+        // Background
+        const backgroundStyles = backgroundValueToCSS(background);
+        if (backgroundStyles) {
+            Object.assign(containerStyles, backgroundStyles);
+        }
+        // Border
+        const borderStyles = borderValueToCSS(border);
+        if (borderStyles) {
+            Object.assign(containerStyles, borderStyles);
+        }
+        // Dimensions with responsive support
+        const dimensionsResult = responsiveValueToCSS(dimensions, dimensionsValueToCSS, containerClass);
+        Object.assign(containerStyles, dimensionsResult.baseStyles);
+        if (dimensionsResult.mediaQueryCSS) {
+            mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        }
+        // Check if minHeight is set - if so, we need flex layout to make slot expand
+        const hasMinHeight = (() => {
+            if (!dimensions)
+                return false;
+            // Check if it's a responsive value
+            if (typeof dimensions === 'object' && 'xs' in dimensions) {
+                const responsiveDims = dimensions;
+                return Object.values(responsiveDims).some((v) => {
+                    if (!v || typeof v !== 'object')
+                        return false;
+                    const dim = v;
+                    return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+                });
+            }
+            // Non-responsive value
+            const dim = dimensions;
+            return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+        })();
+        // Add flex layout when minHeight is set to make content stretch
+        if (hasMinHeight) {
+            containerStyles.display = 'flex';
+            containerStyles.flexDirection = 'column';
+        }
+        // Padding with responsive support
+        const paddingResult = responsiveValueToCSS(padding, (v) => ({ padding: paddingValueToCSS(v) }), containerClass);
+        Object.assign(containerStyles, paddingResult.baseStyles);
+        if (paddingResult.mediaQueryCSS) {
+            mediaQueries.push(paddingResult.mediaQueryCSS);
+        }
+        // Margin with responsive support
+        const marginResult = responsiveValueToCSS(margin, (v) => ({ margin: marginValueToCSS(v) }), containerClass);
+        Object.assign(containerStyles, marginResult.baseStyles);
+        if (marginResult.mediaQueryCSS) {
+            mediaQueries.push(marginResult.mediaQueryCSS);
+        }
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, containerClass);
+        if (visibilityCSS) {
+            mediaQueries.push(visibilityCSS);
+        }
+        // Combine all media queries
+        const allMediaQueryCSS = mediaQueries.join('\n');
+        // Check if we have any styling
+        const hasStyles = Object.keys(containerStyles).length > 0;
+        // Type assertion for Puck slot content
+        const ContentSlot = Content;
+        // When minHeight is set, wrap Content to ensure slot expands
+        const renderContent = () => {
+            if (hasMinHeight) {
+                return (_jsx("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }, children: _jsx(ContentSlot, { style: { flex: 1 } }) }));
+            }
+            return _jsx(ContentSlot, {});
+        };
+        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), hasStyles ? (_jsx("div", { className: containerClass, style: containerStyles, children: renderContent() })) : (_jsx(ContentSlot, { className: containerClass }))] }));
+    },
+};
+//# sourceMappingURL=Container.server.js.map

package/dist/components/layout/Container.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.server.js","sourceRoot":"","sources":["../../../src/components/layout/Container.server.tsx"],"names":[],"mappings":";AAoBA,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,GAQrB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD,gDAAgD;AAChD,IAAI,SAAS,GAAG,CAAC,CAAA;AACjB,SAAS,gBAAgB;IACvB,OAAO,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;AAClF,CAAC;AAaD,MAAM,YAAY,GAAmB;IACnC,OAAO,EAAE,EAAE;IACX,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAoB;IAC9C,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KAC1B;IACD,YAAY;IACZ,MAAM,EAAE,CAAC,EACP,OAAO,EAAE,OAAO,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,GACV,EAAE,EAAE;QACH,qDAAqD;QACrD,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAA;QACnC,MAAM,cAAc,GAAG,kBAAkB,QAAQ,EAAE,CAAA;QAEnD,8BAA8B;QAC9B,MAAM,YAAY,GAAa,EAAE,CAAA;QAEjC,yBAAyB;QACzB,MAAM,eAAe,GAAwB,EAAE,CAAA;QAE/C,aAAa;QACb,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAA;QACzD,IAAI,gBAAgB,EAAE,CAAC;YACrB,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAA;QAClD,CAAC;QAED,SAAS;QACT,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;QAC7C,IAAI,YAAY,EAAE,CAAC;YACjB,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAA;QAC9C,CAAC;QAED,qCAAqC;QACrC,MAAM,gBAAgB,GAAG,oBAAoB,CAC3C,UAAU,EACV,oBAAoB,EACpB,cAAc,CACf,CAAA;QACD,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;QAC3D,IAAI,gBAAgB,CAAC,aAAa,EAAE,CAAC;YACnC,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QACnD,CAAC;QAED,6EAA6E;QAC7E,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,UAAU;gBAAE,OAAO,KAAK,CAAA;YAC7B,mCAAmC;YACnC,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,IAAI,IAAI,UAAU,EAAE,CAAC;gBACzD,MAAM,cAAc,GAAG,UAA8C,CAAA;gBACrE,OAAO,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC9C,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ;wBAAE,OAAO,KAAK,CAAA;oBAC7C,MAAM,GAAG,GAAG,CAAoB,CAAA;oBAChC,OAAO,GAAG,CAAC,SAAS,EAAE,OAAO,IAAI,GAAG,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,CAAA;gBAC3D,CAAC,CAAC,CAAA;YACJ,CAAC;YACD,uBAAuB;YACvB,MAAM,GAAG,GAAG,UAA6B,CAAA;YACzC,OAAO,GAAG,CAAC,SAAS,EAAE,OAAO,IAAI,GAAG,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,CAAA;QAC3D,CAAC,CAAC,EAAE,CAAA;QAEJ,gEAAgE;QAChE,IAAI,YAAY,EAAE,CAAC;YACjB,eAAe,CAAC,OAAO,GAAG,MAAM,CAAA;YAChC,eAAe,CAAC,aAAa,GAAG,QAAQ,CAAA;QAC1C,CAAC;QAED,kCAAkC;QAClC,MAAM,aAAa,GAAG,oBAAoB,CACxC,OAAO,EACP,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1C,cAAc,CACf,CAAA;QACD,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;QACxD,IAAI,aAAa,CAAC,aAAa,EAAE,CAAC;YAChC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;QAChD,CAAC;QAED,iCAAiC;QACjC,MAAM,YAAY,GAAG,oBAAoB,CACvC,MAAM,EACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,EACxC,cAAc,CACf,CAAA;QACD,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,CAAA;QACvD,IAAI,YAAY,CAAC,aAAa,EAAE,CAAC;YAC/B,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAA;QAC/C,CAAC;QAED,2BAA2B;QAC3B,MAAM,aAAa,GAAG,oBAAoB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAA;QACtE,IAAI,aAAa,EAAE,CAAC;YAClB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAClC,CAAC;QAED,4BAA4B;QAC5B,MAAM,gBAAgB,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEhD,+BAA+B;QAC/B,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA;QAEzD,uCAAuC;QACvC,MAAM,WAAW,GAAG,OAAc,CAAA;QAElC,6DAA6D;QAC7D,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,IAAI,YAAY,EAAE,CAAC;gBACjB,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE,YAC7E,KAAC,WAAW,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAI,GAC/B,CACP,CAAA;YACH,CAAC;YACD,OAAO,KAAC,WAAW,KAAG,CAAA;QACxB,CAAC,CAAA;QAED,OAAO,CACL,MAAC,eAAe,IAAC,SAAS,EAAE,SAAS,aAClC,gBAAgB,IAAI,0BAAQ,gBAAgB,GAAS,EACrD,SAAS,CAAC,CAAC,CAAC,CACX,cAAK,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,YACnD,aAAa,EAAE,GACZ,CACP,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,SAAS,EAAE,cAAc,GAAI,CAC3C,IACe,CACnB,CAAA;IACH,CAAC;CACF,CAAA"}

package/dist/components/layout/Flex.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Flex Component - Puck Configuration
+ *
+ * Flexbox layout following official Puck demo patterns.
+ * Uses Tailwind classes for layout, inline styles for dynamic user values.
+ *
+ * Supports both preset options and advanced custom styling:
+ * - Background: unified BackgroundField (solid, gradient, or image)
+ * - Advanced: customPadding, customWidth, border
+ *
+ * Responsive Controls:
+ * - dimensions: Different dimensions at different breakpoints
+ * - customPadding: Different padding at different breakpoints
+ * - margin: Different margins at different breakpoints
+ * - visibility: Show/hide at different breakpoints
+ */
+import type { ComponentConfig } from '@measured/puck';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+import { type JustifyContent, type AlignItems } from '../../fields/FlexAlignmentField';
+export interface FlexProps {
+    content: unknown;
+    direction: 'row' | 'column';
+    justifyContent: JustifyContent | null;
+    alignItems: AlignItems | null;
+    gap: number;
+    wrap: 'wrap' | 'nowrap';
+    background: BackgroundValue | null;
+    customPadding: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    margin: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null;
+    border: BorderValue | null;
+    animation: AnimationValue | null;
+    visibility: VisibilityValue | null;
+}
+export declare const FlexConfig: ComponentConfig;
+//# sourceMappingURL=Flex.d.ts.map

package/dist/components/layout/Flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Flex.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAWL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAW5B,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,iCAAiC,CAAA;AAgCxC,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC3B,cAAc,EAAE,cAAc,GAAG,IAAI,CAAA;IACrC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAA;IAC7B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;IAEvB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAElC,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAEhC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAkBD,eAAO,MAAM,UAAU,EAAE,eAmKxB,CAAA"}

package/dist/components/layout/Flex.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Flex Component - Puck Configuration
+ *
+ * Flexbox layout following official Puck demo patterns.
+ * Uses Tailwind classes for layout, inline styles for dynamic user values.
+ *
+ * Supports both preset options and advanced custom styling:
+ * - Background: unified BackgroundField (solid, gradient, or image)
+ * - Advanced: customPadding, customWidth, border
+ *
+ * Responsive Controls:
+ * - dimensions: Different dimensions at different breakpoints
+ * - customPadding: Different padding at different breakpoints
+ * - margin: Different margins at different breakpoints
+ * - visibility: Show/hide at different breakpoints
+ */
+import { useId } from 'react';
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, justifyContentMap, alignItemsMap, } from '../../fields/shared';
+import { AnimatedWrapper } from '../AnimatedWrapper';
+import { createPaddingField } from '../../fields/PaddingField';
+import { createBorderField } from '../../fields/BorderField';
+import { createDimensionsField } from '../../fields/DimensionsField';
+import { createResetField } from '../../fields/ResetField';
+import { createMarginField } from '../../fields/MarginField';
+import { createBackgroundField } from '../../fields/BackgroundField';
+import { createAnimationField } from '../../fields/AnimationField';
+import { createResponsiveField } from '../../fields/ResponsiveField';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+import { createJustifyContentField, createAlignItemsField, } from '../../fields/FlexAlignmentField';
+// Tailwind class mappings for flex properties
+const flexDirectionMap = {
+    row: 'flex-row',
+    column: 'flex-col',
+    'row-reverse': 'flex-row-reverse',
+    'column-reverse': 'flex-col-reverse',
+};
+const flexWrapMap = {
+    wrap: 'flex-wrap',
+    nowrap: 'flex-nowrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+};
+// Default values for responsive fields
+const DEFAULT_PADDING = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    unit: 'px',
+    linked: true,
+};
+const DEFAULT_DIMENSIONS = {
+    mode: 'full',
+    alignment: 'center',
+    maxWidth: { value: 100, unit: '%', enabled: true },
+};
+const defaultProps = {
+    content: [],
+    direction: 'row',
+    justifyContent: null,
+    alignItems: null,
+    gap: 24,
+    wrap: 'wrap',
+    background: null,
+    customPadding: null,
+    margin: null,
+    dimensions: null,
+    border: null,
+    animation: null,
+    visibility: null,
+};
+export const FlexConfig = {
+    label: 'Flex',
+    fields: {
+        _reset: createResetField({ defaultProps }),
+        content: {
+            type: 'slot',
+            disallow: ['Section'],
+        },
+        // Responsive visibility control
+        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        direction: {
+            type: 'radio',
+            label: 'Direction',
+            options: [
+                { label: 'Row', value: 'row' },
+                { label: 'Column', value: 'column' },
+            ],
+        },
+        justifyContent: createJustifyContentField({ label: 'Justify Content' }),
+        alignItems: createAlignItemsField({ label: 'Align Items' }),
+        gap: {
+            type: 'number',
+            label: 'Gap (px)',
+            min: 0,
+        },
+        wrap: {
+            type: 'radio',
+            label: 'Wrap',
+            options: [
+                { label: 'Yes', value: 'wrap' },
+                { label: 'No', value: 'nowrap' },
+            ],
+        },
+        // Background
+        background: createBackgroundField({ label: 'Background' }),
+        // Advanced custom options
+        border: createBorderField({ label: 'Border' }),
+        // Responsive dimensions
+        dimensions: createResponsiveField({
+            label: 'Dimensions (Responsive)',
+            innerField: (config) => createDimensionsField(config),
+            defaultValue: DEFAULT_DIMENSIONS,
+        }),
+        animation: createAnimationField({ label: 'Animation' }),
+        // Spacing (grouped at bottom) - Responsive
+        margin: createResponsiveField({
+            label: 'Margin (Responsive)',
+            innerField: (config) => createMarginField(config),
+            defaultValue: DEFAULT_PADDING,
+        }),
+        customPadding: createResponsiveField({
+            label: 'Padding (Responsive)',
+            innerField: (config) => createPaddingField(config),
+            defaultValue: DEFAULT_PADDING,
+        }),
+    },
+    defaultProps,
+    render: ({ content: Content, direction, justifyContent, alignItems, gap, wrap, background, customPadding, margin, dimensions, border, animation, visibility, }) => {
+        // Generate unique IDs for CSS targeting
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const uniqueId = useId().replace(/:/g, '');
+        const wrapperClass = `puck-flex-${uniqueId}`;
+        const contentClass = `puck-flex-content-${uniqueId}`;
+        // Collect all media query CSS
+        const mediaQueries = [];
+        // Generate styles from BackgroundValue
+        const backgroundStyles = backgroundValueToCSS(background);
+        // Build wrapper styles
+        const wrapperStyles = {
+            ...backgroundStyles,
+        };
+        // Add padding with responsive support
+        const paddingResult = responsiveValueToCSS(customPadding, (v) => ({ padding: paddingValueToCSS(v) }), wrapperClass);
+        Object.assign(wrapperStyles, paddingResult.baseStyles);
+        if (paddingResult.mediaQueryCSS) {
+            mediaQueries.push(paddingResult.mediaQueryCSS);
+        }
+        // Add border if set
+        const borderStyles = borderValueToCSS(border);
+        if (borderStyles) {
+            Object.assign(wrapperStyles, borderStyles);
+        }
+        // Apply margin with responsive support
+        const marginResult = responsiveValueToCSS(margin, (v) => ({ margin: marginValueToCSS(v) }), wrapperClass);
+        Object.assign(wrapperStyles, marginResult.baseStyles);
+        if (marginResult.mediaQueryCSS) {
+            mediaQueries.push(marginResult.mediaQueryCSS);
+        }
+        // Use dimensions with responsive support
+        const dimensionsResult = responsiveValueToCSS(dimensions, dimensionsValueToCSS, contentClass);
+        // Visibility media queries
+        const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
+        if (visibilityCSS) {
+            mediaQueries.push(visibilityCSS);
+        }
+        // Build Tailwind classes for flex layout
+        // [&>*]:min-w-0 prevents flex children from overflowing (CSS best practice)
+        const contentClasses = cn('flex w-full min-h-[50px]', flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], alignItems && alignItemsMap[alignItems], flexWrapMap[wrap], '[&>*]:min-w-0', contentClass);
+        // Dynamic styles that need inline (user-controlled values)
+        const contentStyles = {
+            gap,
+            ...dimensionsResult.baseStyles,
+        };
+        if (dimensionsResult.mediaQueryCSS) {
+            mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        }
+        // Combine all media queries
+        const allMediaQueryCSS = mediaQueries.join('\n');
+        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx("div", { className: wrapperClass, style: wrapperStyles, children: _jsx(Content, { className: contentClasses, style: contentStyles }) })] }));
+    },
+};
+//# sourceMappingURL=Flex.js.map

package/dist/components/layout/Flex.js.map

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

package/dist/components/layout/Flex.server.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Flex Component - Server-safe Puck Configuration
+ *
+ * Flexbox layout following official Puck demo patterns.
+ * Uses Tailwind classes for layout, inline styles for dynamic user values.
+ *
+ * This is a server-safe version with NO fields property (only slot for content).
+ * For the full editor version with fields, use Flex.tsx
+ *
+ * Responsive Controls:
+ * - dimensions: Different dimensions at different breakpoints
+ * - customPadding: Different padding at different breakpoints
+ * - margin: Different margins at different breakpoints
+ * - visibility: Show/hide at different breakpoints
+ */
+import type { ComponentConfig } from '@measured/puck';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+export type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+export type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch';
+export interface FlexProps {
+    content: unknown;
+    direction: 'row' | 'column';
+    justifyContent: JustifyContent | null;
+    alignItems: AlignItems | null;
+    gap: number;
+    wrap: 'wrap' | 'nowrap';
+    background: BackgroundValue | null;
+    customPadding: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    margin: ResponsiveValue<PaddingValue> | PaddingValue | null;
+    dimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null;
+    border: BorderValue | null;
+    animation: AnimationValue | null;
+    visibility: VisibilityValue | null;
+}
+export declare const FlexConfig: ComponentConfig;
+//# sourceMappingURL=Flex.server.d.ts.map

package/dist/components/layout/Flex.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.server.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Flex.server.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAWL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AAU5B,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,CAAA;AACpG,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;AAgBzE,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC3B,cAAc,EAAE,cAAc,GAAG,IAAI,CAAA;IACrC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAA;IAC7B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;IAEvB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAElC,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;IAC1B,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAEhC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAkBD,eAAO,MAAM,UAAU,EAAE,eAkHxB,CAAA"}