lib-pixelbuild 0.3.8 → 0.4.0

package/dist/components/ButtonsComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbButton } from '../ui/PbButton.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
@@ -27,7 +27,7 @@ const ButtonsComponent = memo(function ButtonsComponent({ component }) {
         containerStyle.alignItems = align;
     else
         containerStyle.justifyContent = align;
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx("div", { style: containerStyle, children: elements.map((element) => {
+    return (_jsx(ComponentShell, { component: component, children: _jsx("div", { style: containerStyle, children: elements.map((element) => {
                 const props = element.properties || {};
                 const href = getString(props, 'path') || getString(props, 'href');
                 const text = getString(props, 'text') || getString(props, 'title');

package/dist/components/CardComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -85,18 +85,22 @@ const CardComponent = memo(function CardComponent({ component }) {
     const rawGap = cardProps.cardElementGap;
     const elementGap = rawGap === '' || rawGap == null ? '0' : String(rawGap);
     const rowGapStyle = { gap: elementGap };
+    let content;
     if (layout === 'icon-left' || layout === 'icon-right') {
         const icon = elements.find((element) => element.elementType === 'icon');
         const others = elements.filter((element) => element !== icon);
         const iconBox = icon ? _jsx("div", { style: { flex: '0 0 auto' }, children: elementFactory.build(stripWidth(icon)) }) : null;
         const contentBox = (_jsx("div", { style: { flex: '1 1 220px', minWidth: 0 }, children: others.map((element) => elementFactory.build(stripWidth(element))) }));
-        return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: elementGap, flexWrap: 'wrap' }, children: [layout === 'icon-left' ? iconBox : contentBox, layout === 'icon-left' ? contentBox : iconBox] }) }));
+        content = (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: elementGap, flexWrap: 'wrap' }, children: [layout === 'icon-left' ? iconBox : contentBox, layout === 'icon-left' ? contentBox : iconBox] }));
     }
-    if (layout === 'icon-top') {
+    else if (layout === 'icon-top') {
         const icon = elements.find((element) => element.elementType === 'icon');
         const others = elements.filter((element) => element !== icon);
-        return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsxs("div", { style: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: elementGap }, children: [icon && _jsx("div", { style: { display: 'inline-block' }, children: elementFactory.build(centerStyles(icon)) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: elementGap }, children: others.map((element) => elementFactory.build(centerStyles(element))) })] }) }));
+        content = (_jsxs("div", { style: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: elementGap }, children: [icon && _jsx("div", { style: { display: 'inline-block' }, children: elementFactory.build(centerStyles(icon)) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: elementGap }, children: others.map((element) => elementFactory.build(centerStyles(element))) })] }));
     }
-    return (_jsx(PbContainer, { style: component.styles, children: _jsx(PbRow, { id: "element-row", style: rowGapStyle, children: elements.map((element) => elementFactory.build(element)) }) }));
+    else {
+        content = (_jsx(PbRow, { id: "element-row", style: rowGapStyle, children: elements.map((element) => elementFactory.build(element)) }));
+    }
+    return _jsx(ComponentShell, { component: component, children: content });
 });
 export { CardComponent };

package/dist/components/FormComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
@@ -19,6 +19,6 @@ const FormComponent = memo(function FormComponent({ component }) {
     const handleSubmit = (event) => {
         event.preventDefault();
     };
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx("form", { onSubmit: handleSubmit, noValidate: true, children: _jsx(PbRow, { style: { gap: 0 }, children: elements.map((element) => elementFactory.build(element, component.id)) }) }) }));
+    return (_jsx(ComponentShell, { component: component, children: _jsx("form", { onSubmit: handleSubmit, noValidate: true, children: _jsx(PbRow, { style: { gap: 0 }, children: elements.map((element) => elementFactory.build(element, component.id)) }) }) }));
 });
 export { FormComponent };

package/dist/components/IconComponent.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
 const IconComponent = memo(function IconComponent({ component }) {
     const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", style: { justifyContent: 'center', gap: 0 }, children: elements.map((element) => elementFactory.build(element)) }) }));
+    return (_jsx(ComponentShell, { component: component, children: _jsx(PbRow, { id: "element-row", style: { justifyContent: 'center', gap: 0 }, children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { IconComponent };

package/dist/components/ImageComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -11,8 +11,12 @@ const ImageComponent = memo(function ImageComponent({ component }) {
     const fullBleed = getBoolean(component.properties, 'fullBleed', false);
     const elements = useMemo(() => orderBySort(component.elements).map((element) => resolveImageElement(component, element)), [component.elements, component.properties]);
     if (fullBleed) {
-        return (_jsx("div", { "data-pb-component": component.id, style: Object.assign(Object.assign({}, component.styles), { width: 'calc(100% + var(--pb-gutter, 1.5rem))', marginLeft: 'calc(var(--pb-gutter, 1.5rem) * -0.5)', marginRight: 'calc(var(--pb-gutter, 1.5rem) * -0.5)' }), children: elements.map((element) => elementFactory.build(Object.assign(Object.assign({}, element), { fullBleed: true }))) }));
+        return (_jsx(ComponentShell, { component: component, outer: "div", outerStyle: {
+                width: 'calc(100% + var(--pb-gutter, 1.5rem))',
+                marginLeft: 'calc(var(--pb-gutter, 1.5rem) * -0.5)',
+                marginRight: 'calc(var(--pb-gutter, 1.5rem) * -0.5)'
+            }, children: elements.map((element) => elementFactory.build(Object.assign(Object.assign({}, element), { fullBleed: true }))) }));
     }
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", style: { gap: 0 }, children: elements.map((element) => elementFactory.build(element)) }) }));
+    return (_jsx(ComponentShell, { component: component, children: _jsx(PbRow, { id: "element-row", style: { gap: 0 }, children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { ImageComponent };

package/dist/components/ListComponent.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { ElementTypeEnum } from '../constants/ElementEnum.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -27,6 +28,6 @@ const ListComponent = memo(function ListComponent({ component }) {
         }
         return result;
     }, [elements]);
-    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: _jsx("ul", { style: { listStyle: 'none', paddingLeft: 0 }, children: items.map(({ icon, text, id }) => (_jsxs("li", { style: { display: 'flex', alignItems: 'center', justifyContent: itemAlign, marginBottom: itemGap }, children: [_jsx("span", { children: elementFactory.build(icon) }), _jsx("span", { style: { fontSize: itemFontSize }, children: text ? elementFactory.build(text) : null })] }, id))) }) }));
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: _jsx("ul", { style: { listStyle: 'none', paddingLeft: 0 }, children: items.map(({ icon, text, id }) => (_jsxs("li", { style: { display: 'flex', alignItems: 'center', justifyContent: itemAlign, marginBottom: itemGap }, children: [_jsx("span", { children: elementFactory.build(icon) }), _jsx("span", { style: { fontSize: itemFontSize }, children: text ? elementFactory.build(text) : null })] }, id))) }) }));
 });
 export { ListComponent };

package/dist/components/MapComponent.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 const COORDS_PATTERN = /^-?\d+(\.\d+)?$/;
 function isValidCoord(value) {
     if (typeof value !== 'string')
@@ -18,7 +19,7 @@ export function MapComponent({ component }) {
         }
         return `https://maps.google.com/maps?q=${encodeURIComponent(`${latStr},${lngStr}`)}&z=${zoom}&output=embed`;
     }, [lat, lng, zoom]);
-    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: src ? (_jsx("iframe", { title: "Localiza\u00E7\u00E3o", src: src, width: "100%", height: height, style: { border: 0, borderRadius: '4px' }, allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" })) : (_jsx("div", { style: {
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: src ? (_jsx("iframe", { title: "Localiza\u00E7\u00E3o", src: src, width: "100%", height: height, style: { border: 0, borderRadius: '4px' }, allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" })) : (_jsx("div", { style: {
                 width: '100%',
                 height,
                 backgroundColor: placeholderBackgroundColor,

package/dist/components/SliderComponent.js

@@ -3,6 +3,7 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import { resolveResponsiveProperties, breakpointFromWidth } from '../utils/responsiveProperties.js';
+import { getComponentShellStyles } from '../utils/componentShell.js';
 const elementFactory = new ElementFactory();
 function cleanComponentStyles(styles) {
     const exclude = new Set(['minHeight', 'display', 'alignItems', 'justifyContent', 'flexDirection']);
@@ -177,13 +178,14 @@ export function SliderComponent({ component, editionMode = false }) {
     const chrome = resolveChromeColors(resolved);
     const useSharedImages = resolved.imageCustomization !== 'separate';
     const sharedImageStyles = resolved.imageStyles || {};
-    return (_jsxs("div", { ref: containerRef, "data-pb-component": component.id, style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { style: Object.assign({ overflow: 'hidden' }, (fixedHeight ? { height: fixedHeight } : {})), children: _jsx("div", { style: {
-                        display: 'flex',
-                        columnGap: spacing,
-                        transform: `translateX(${translateX}px)`,
-                        transition: animate && !dragging ? 'transform 0.3s ease' : 'none',
-                        cursor: dragging ? 'grabbing' : n > 1 ? 'grab' : 'default',
-                        touchAction: 'pan-y',
-                        userSelect: 'none'
-                    }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onTransitionEnd: handleTransitionEnd, children: trackSlides.map((element, i) => (_jsx("div", { style: { width: slideWidth, flexShrink: 0, overflow: 'hidden' }, children: buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) }, `${element.id}-${i}`))) }) }), showArrows && (_jsxs(_Fragment, { children: [_jsx(ArrowButton, { side: "left", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index - 1) }), _jsx(ArrowButton, { side: "right", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index + 1) })] })), showDots && (_jsx(Dots, { count: n, current: currentIndex, size: chrome.dotSize, activeBackground: chrome.dotActiveBackground, background: chrome.dotBackground, activeColor: chrome.dotActiveColor, color: chrome.dotColor, onGoTo: goToDot }))] }));
+    const { containerStyle, bodyStyle } = useMemo(() => getComponentShellStyles(component), [component]);
+    return (_jsx("div", { ref: containerRef, "data-pb-component": component.id, style: Object.assign({ position: 'relative' }, cleanComponentStyles(containerStyle)), children: _jsxs("div", { style: bodyStyle, children: [_jsx("div", { style: Object.assign({ overflow: 'hidden' }, (fixedHeight ? { height: fixedHeight } : {})), children: _jsx("div", { style: {
+                            display: 'flex',
+                            columnGap: spacing,
+                            transform: `translateX(${translateX}px)`,
+                            transition: animate && !dragging ? 'transform 0.3s ease' : 'none',
+                            cursor: dragging ? 'grabbing' : n > 1 ? 'grab' : 'default',
+                            touchAction: 'pan-y',
+                            userSelect: 'none'
+                        }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onTransitionEnd: handleTransitionEnd, children: trackSlides.map((element, i) => (_jsx("div", { style: { width: slideWidth, flexShrink: 0, overflow: 'hidden' }, children: buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) }, `${element.id}-${i}`))) }) }), showArrows && (_jsxs(_Fragment, { children: [_jsx(ArrowButton, { side: "left", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index - 1) }), _jsx(ArrowButton, { side: "right", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index + 1) })] })), showDots && (_jsx(Dots, { count: n, current: currentIndex, size: chrome.dotSize, activeBackground: chrome.dotActiveBackground, background: chrome.dotBackground, activeColor: chrome.dotActiveColor, color: chrome.dotColor, onGoTo: goToDot }))] }) }));
 }

package/dist/components/TextComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -10,6 +10,6 @@ const elementFactory = new ElementFactory();
 const TextComponent = memo(function TextComponent({ component }) {
     const elements = useMemo(() => orderBySort(component.elements).map((element) => resolveImageElement(component, element)), [component.elements, component.properties]);
     const elementGap = getString(component.properties, 'elementGap', '');
-    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", style: { gap: elementGap }, children: elements.map((element) => elementFactory.build(element)) }) }));
+    return (_jsx(ComponentShell, { component: component, children: _jsx(PbRow, { id: "element-row", style: { gap: elementGap }, children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { TextComponent };

package/dist/components/VideoComponent.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
 import { getBoolean, getString } from '../utils/propertyUtils.js';
 function toEmbed(src) {
     const value = src.trim();
@@ -124,7 +125,11 @@ export function VideoComponent({ component }) {
             color: placeholderTextColor
         }, children: "V\u00EDdeo n\u00E3o configurado" }));
     if (fullBleed) {
-        return (_jsx("div", { "data-pb-component": component.id, style: Object.assign(Object.assign({}, component.styles), { width: 'calc(100% + var(--pb-gutter, 1.5rem))', marginLeft: 'calc(var(--pb-gutter, 1.5rem) * -0.5)', marginRight: 'calc(var(--pb-gutter, 1.5rem) * -0.5)' }), children: content }));
+        return (_jsx(ComponentShell, { component: component, outer: "div", outerStyle: {
+                width: 'calc(100% + var(--pb-gutter, 1.5rem))',
+                marginLeft: 'calc(var(--pb-gutter, 1.5rem) * -0.5)',
+                marginRight: 'calc(var(--pb-gutter, 1.5rem) * -0.5)'
+            }, children: content }));
     }
-    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: content }));
+    return _jsx(ComponentShell, { component: component, outer: "div", children: content });
 }

package/dist/ui/PbComponentShell.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function ComponentShell({ component, outer, outerStyle, children }: {
+    readonly component: ComponentType;
+    readonly outer?: 'container' | 'div';
+    readonly outerStyle?: CSSProperties;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;

package/dist/ui/PbComponentShell.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { PbContainer } from './PbContainer.js';
+import { getComponentShellStyles } from '../utils/componentShell.js';
+export function ComponentShell({ component, outer = 'container', outerStyle, children }) {
+    const { containerStyle, bodyStyle } = useMemo(() => getComponentShellStyles(component), [component]);
+    const content = _jsx("div", { style: bodyStyle, children: children });
+    if (outer === 'div') {
+        return (_jsx("div", { "data-pb-component": component.id, style: Object.assign(Object.assign({}, containerStyle), outerStyle), children: content }));
+    }
+    return (_jsx(PbContainer, { "data-pb-component": component.id, style: Object.assign(Object.assign({}, containerStyle), outerStyle), children: content }));
+}

package/dist/utils/componentShell.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'react';
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function splitComponentStyles(styles: Record<string, unknown> | undefined, inset: boolean): {
+    container: CSSProperties;
+    body: CSSProperties;
+};
+export declare function getComponentShellStyles(component: ComponentType): {
+    containerStyle: CSSProperties;
+    bodyStyle: CSSProperties;
+};

package/dist/utils/componentShell.js

@@ -0,0 +1,41 @@
+import { getString, getBoolean } from './propertyUtils.js';
+const INSET_STYLE_KEYS = new Set([
+    'borderColor',
+    'borderStyle',
+    'borderWidth',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderRadius',
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundSize',
+    'backgroundPosition',
+    'boxShadow'
+]);
+export function splitComponentStyles(styles, inset) {
+    const container = {};
+    const body = {};
+    for (const [key, value] of Object.entries(styles !== null && styles !== void 0 ? styles : {})) {
+        if (inset && INSET_STYLE_KEYS.has(key)) {
+            body[key] = value;
+        }
+        else {
+            container[key] = value;
+        }
+    }
+    return { container: container, body: body };
+}
+export function getComponentShellStyles(component) {
+    const properties = component.properties || {};
+    const inset = getBoolean(properties, 'contentInsetBorder', false);
+    const { container, body } = splitComponentStyles(component.styles, inset);
+    const contentPadding = getString(properties, 'contentPadding', '');
+    const contentAlign = getString(properties, 'contentAlign', '');
+    if (contentPadding)
+        body.padding = contentPadding;
+    if (contentAlign && contentAlign !== 'left')
+        body.textAlign = contentAlign;
+    return { containerStyle: container, bodyStyle: body };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "engines": {
     "node": "^24.0.0",
     "npm": ">=10"