lib-pixelbuild 0.2.0 → 0.2.2

package/dist/builders/PageBuilder.js

@@ -2,11 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, memo, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { SectionRenderer } from '../renderers/SectionRenderer.js';
+import { buildResponsiveCssForStyles } from '../utils/responsiveStyles.js';
+import { buildFontFamily } from '../utils/fonts.js';
 function mergeStyles(websiteStyles, pageStyles) {
     const merged = Object.assign({}, websiteStyles);
     for (const key of Object.keys(pageStyles)) {
         const val = pageStyles[key];
         if (val !== '' && val !== null && val !== undefined) {
+            ;
             merged[key] = val;
         }
     }
@@ -31,6 +34,7 @@ const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
         backgroundPosition: toCssValue(mergedStyles.backgroundPosition),
         width: toCssValue(mergedStyles.width),
         height: toCssValue(mergedStyles.height),
+        fontFamily: buildFontFamily(mergedStyles.fontFamily),
         fontSize: toCssValue(mergedStyles.fontSize),
         fontWeight: toCssValue(mergedStyles.fontWeight),
         textAlign: mergedStyles.textAlign,
@@ -41,8 +45,8 @@ const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
         marginTop: toCssValue(mergedStyles.marginTop),
         marginBottom: toCssValue(mergedStyles.marginBottom),
         borderRadius: toCssValue(mergedStyles.borderRadius),
-        minHeight: page.sections.length === 0 ? '200px' : undefined,
-    }), [mergedStyles, page.sections.length]);
-    return (_jsxs(Suspense, { fallback: _jsx("div", { children: website.properties.loadingMessage }), children: [!editionMode && (_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.title }), _jsx("meta", { property: "og:title", content: page.title }), _jsx("meta", { property: "og:description", content: page.title }), _jsx("meta", { property: "og:image", content: page.title })] })), _jsxs("div", { style: pageStyle, children: [_jsx(SectionRenderer, { sections: page.sections, editionMode: editionMode }), page.sections.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "No sections configured. Use the layout editor to add content." }))] })] }));
+        minHeight: '100vh'
+    }), [mergedStyles]);
+    return (_jsxs(Suspense, { fallback: _jsx("div", { children: website.properties.loadingMessage }), children: [!editionMode && (_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.title }), _jsx("meta", { property: "og:title", content: page.title }), _jsx("meta", { property: "og:description", content: page.title }), _jsx("meta", { property: "og:image", content: page.title })] })), _jsxs("div", { style: pageStyle, "data-pb-page": true, children: [_jsx("style", { children: buildResponsiveCssForStyles('[data-pb-page]', page.styles) }), _jsx(SectionRenderer, { sections: page.sections, editionMode: editionMode }), page.sections.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "No sections configured. Use the layout editor to add content." }))] })] }));
 });
 export { PageBuilder };

package/dist/components/ButtonsComponent.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from '../types/ComponentType.js';
+declare const ButtonsComponent: import("react").NamedExoticComponent<{
+    readonly component: ComponentType;
+}>;
+export { ButtonsComponent };

package/dist/components/ButtonsComponent.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { Button, Container } from 'react-bootstrap';
+import { orderBySort } from '../utils/orderBySort.js';
+import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
+const ALIGN_JUSTIFY = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end',
+};
+const ButtonsComponent = memo(function ButtonsComponent({ component }) {
+    var _a, _b;
+    const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
+    const properties = component.properties || {};
+    const isColumn = getString(properties, 'layout', 'row') === 'column';
+    const gap = (_a = getNumber(properties, 'gap', 12)) !== null && _a !== void 0 ? _a : 12;
+    const fullWidth = getBoolean(properties, 'fullWidth', false);
+    const align = (_b = ALIGN_JUSTIFY[getString(properties, 'align', 'left')]) !== null && _b !== void 0 ? _b : 'flex-start';
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: isColumn ? 'column' : 'row',
+        flexWrap: 'wrap',
+        gap: `${gap}px`,
+    };
+    if (isColumn)
+        containerStyle.alignItems = align;
+    else
+        containerStyle.justifyContent = align;
+    return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, 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');
+                const size = getString(props, 'size');
+                const style = Object.assign({}, element.styles);
+                if (fullWidth) {
+                    if (isColumn)
+                        style.width = '100%';
+                    else
+                        style.flex = '1 1 0%';
+                }
+                return (_jsx(Button, { "data-pb-element": element.id, as: href ? 'a' : 'button', variant: getString(props, 'variant', 'primary'), size: size === 'sm' || size === 'lg' ? size : undefined, href: href || undefined, target: href ? getString(props, 'target', '_self') : undefined, rel: href ? 'noopener noreferrer' : undefined, style: style, children: text }, element.id));
+            }) }) }));
+});
+export { ButtonsComponent };

package/dist/components/CardComponent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { Row, Container } from 'react-bootstrap';
 import { ElementFactory } from '../factories/ElementFactory.js';
@@ -24,7 +24,13 @@ function applyCardStyles(element, props) {
         if (props.cardTextSize)
             overrides.fontSize = props.cardTextSize;
     }
-    return Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, element.styles), overrides) });
+    return Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, element.styles), overrides), fullBleed: element.elementType === 'image' ? true : element.fullBleed });
+}
+function stripWidth(element) {
+    return Object.assign(Object.assign({}, element), { width: {} });
+}
+function centerStyles(element) {
+    return Object.assign(Object.assign({}, element), { width: {}, styles: Object.assign(Object.assign({}, element.styles), { textAlign: 'center' }) });
 }
 const CardComponent = memo(function CardComponent({ component }) {
     const { properties } = component;
@@ -38,7 +44,7 @@ const CardComponent = memo(function CardComponent({ component }) {
         cardTitleColor: properties === null || properties === void 0 ? void 0 : properties.cardTitleColor,
         cardTitleSize: properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
         cardTextColor: properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
-        cardTextSize: properties === null || properties === void 0 ? void 0 : properties.cardTextSize,
+        cardTextSize: properties === null || properties === void 0 ? void 0 : properties.cardTextSize
     }), [
         properties === null || properties === void 0 ? void 0 : properties.cardElement1,
         properties === null || properties === void 0 ? void 0 : properties.cardElement2,
@@ -49,14 +55,14 @@ const CardComponent = memo(function CardComponent({ component }) {
         properties === null || properties === void 0 ? void 0 : properties.cardTitleColor,
         properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
         properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
-        properties === null || properties === void 0 ? void 0 : properties.cardTextSize,
+        properties === null || properties === void 0 ? void 0 : properties.cardTextSize
     ]);
     const orderedElements = useMemo(() => {
         const cardOrder = [
             cardProps.cardElement1,
             cardProps.cardElement2,
             cardProps.cardElement3,
-            cardProps.cardElement4,
+            cardProps.cardElement4
         ].filter((v) => typeof v === 'string' && v.length > 0);
         if (cardOrder.length > 0) {
             return cardOrder
@@ -64,8 +70,27 @@ const CardComponent = memo(function CardComponent({ component }) {
                 .filter((el) => el !== undefined);
         }
         return orderBySort(component.elements);
-    }, [cardProps.cardElement1, cardProps.cardElement2, cardProps.cardElement3, cardProps.cardElement4, component.elements]);
+    }, [
+        cardProps.cardElement1,
+        cardProps.cardElement2,
+        cardProps.cardElement3,
+        cardProps.cardElement4,
+        component.elements
+    ]);
     const elements = useMemo(() => orderedElements.map((el) => applyCardStyles(el, cardProps)), [orderedElements, cardProps]);
+    const layout = String((properties === null || properties === void 0 ? void 0 : properties.cardLayout) || 'stacked');
+    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(Container, { "data-pb-component": component.id, style: component.styles, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }, children: [layout === 'icon-left' ? iconBox : contentBox, layout === 'icon-left' ? contentBox : iconBox] }) }));
+    }
+    if (layout === 'icon-top') {
+        const icon = elements.find((element) => element.elementType === 'icon');
+        const others = elements.filter((element) => element !== icon);
+        return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsxs("div", { style: { textAlign: 'center' }, children: [icon && _jsx("div", { style: { display: 'inline-block' }, children: elementFactory.build(centerStyles(icon)) }), _jsx("div", { children: others.map((element) => elementFactory.build(centerStyles(element))) })] }) }));
+    }
     return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { CardComponent };

package/dist/components/FormComponent.js

@@ -1,19 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect, useMemo } from 'react';
-import { Form, Row } from 'react-bootstrap';
+import { Form, Row, Container } from 'react-bootstrap';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
 const FormComponent = memo(function FormComponent({ component }) {
     const registerForm = UseFormStore((state) => state.registerForm);
+    const properties = component.properties;
     useEffect(() => {
-        registerForm(component.id);
-    }, [registerForm, component.id]);
+        registerForm(component.id, {
+            recipient: typeof properties.recipient === 'string' ? properties.recipient : undefined,
+            subject: typeof properties.subject === 'string' ? properties.subject : undefined
+        });
+    }, [registerForm, component.id, properties.recipient, properties.subject]);
     const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
     const handleSubmit = (event) => {
         event.preventDefault();
     };
-    return (_jsx(Form, { onSubmit: handleSubmit, children: _jsx(Row, { children: elements.map((element) => elementFactory.build(element, component.id)) }) }));
+    return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsx(Form, { onSubmit: handleSubmit, children: _jsx(Row, { children: elements.map((element) => elementFactory.build(element, component.id)) }) }) }));
 });
 export { FormComponent };

package/dist/components/{CarouselComponent.d.ts → ImageComponent.d.ts}

@@ -1,4 +1,5 @@
 import type { ComponentType } from '../types/ComponentType.js';
-export declare function CarouselComponent({ component }: {
+declare const ImageComponent: import("react").NamedExoticComponent<{
     readonly component: ComponentType;
-}): import("react").JSX.Element;
+}>;
+export { ImageComponent };

package/dist/components/ImageComponent.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { Row, Container } from 'react-bootstrap';
+import { ElementFactory } from '../factories/ElementFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+import { resolveImageElement } from '../utils/imageCustomization.js';
+import { getBoolean } from '../utils/propertyUtils.js';
+const elementFactory = new ElementFactory();
+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(--bs-gutter-x, 1.5rem))', marginLeft: 'calc(var(--bs-gutter-x, 1.5rem) * -0.5)', marginRight: 'calc(var(--bs-gutter-x, 1.5rem) * -0.5)' }), children: elements.map((element) => elementFactory.build(Object.assign(Object.assign({}, element), { fullBleed: true }))) }));
+    }
+    return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
+});
+export { ImageComponent };

package/dist/components/ListComponent.js

@@ -7,6 +7,10 @@ import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
 const ListComponent = memo(function ListComponent({ component }) {
     const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
+    const properties = component.properties || {};
+    const itemFontSize = String(properties.itemFontSize || '22px');
+    const itemGap = String(properties.itemGap || '8px');
+    const itemAlign = String(properties.itemAlign || 'center');
     const items = useMemo(() => {
         const result = [];
         for (let i = 0; i < elements.length; i++) {
@@ -24,6 +28,6 @@ const ListComponent = memo(function ListComponent({ component }) {
         }
         return result;
     }, [elements]);
-    return (_jsx(Col, { style: component.styles, children: _jsx("ul", { style: { listStyle: 'none' }, children: items.map(({ icon, text, id }) => (_jsxs("li", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '8px' }, children: [_jsx("span", { children: elementFactory.build(icon) }), _jsx("span", { style: { fontSize: '22px' }, children: text ? elementFactory.build(text) : null })] }, id))) }) }));
+    return (_jsx(Col, { "data-pb-component": component.id, style: component.styles, children: _jsx("ul", { style: { listStyle: 'none' }, 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

@@ -8,7 +8,7 @@ function isValidCoord(value) {
     return COORDS_PATTERN.test(value.trim()) && Math.abs(Number(value)) <= 180;
 }
 export function MapComponent({ component }) {
-    const { lat, lng, zoom = 15, height = '400px' } = component.properties;
+    const { lat, lng, zoom = 15, height = '400px', placeholderBackgroundColor = '#e0e0e0', placeholderTextColor = '#666' } = component.properties;
     const src = useMemo(() => {
         if (!lat || !lng)
             return null;
@@ -19,14 +19,14 @@ export function MapComponent({ component }) {
         }
         return `https://maps.google.com/maps?q=${encodeURIComponent(`${latStr},${lngStr}`)}&z=${zoom}&output=embed`;
     }, [lat, lng, zoom]);
-    return (_jsx(Col, { style: component.styles, children: _jsx(Row, { children: _jsx(Col, { 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(Col, { "data-pb-component": component.id, style: component.styles, children: _jsx(Row, { children: _jsx(Col, { 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: '#e0e0e0',
+                        backgroundColor: placeholderBackgroundColor,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
                         borderRadius: '4px',
-                        color: '#666',
+                        color: placeholderTextColor
                     }, children: "Map not configured" })) }) }) }));
 }

package/dist/components/SliderComponent.d.ts

@@ -1,6 +1,5 @@
 import type { ComponentType } from '../types/ComponentType.js';
-import 'keen-slider/keen-slider.min.css';
-export declare function SliderComponent({ component, editionMode }: {
+export declare function SliderComponent({ component, editionMode, }: {
     readonly component: ComponentType;
     readonly editionMode?: boolean;
 }): import("react").JSX.Element;

package/dist/components/SliderComponent.js

@@ -1,109 +1,191 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useKeenSlider } from 'keen-slider/react.js';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
-import 'keen-slider/keen-slider.min.css';
+import { resolveResponsiveProperties, breakpointFromWidth } from '../utils/responsiveProperties.js';
 const elementFactory = new ElementFactory();
 function cleanComponentStyles(styles) {
     const exclude = new Set(['minHeight', 'display', 'alignItems', 'justifyContent', 'flexDirection']);
     return Object.fromEntries(Object.entries(styles).filter(([key]) => !exclude.has(key)));
 }
-function StaticSliderComponent({ component }) {
-    const firstSlide = orderBySort(component.elements)[0];
-    if (!firstSlide)
-        return null;
-    return (_jsx("div", { style: Object.assign({ position: 'relative', overflow: 'hidden' }, cleanComponentStyles(component.styles)), children: elementFactory.build(firstSlide) }));
+function buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) {
+    const isImage = element.elementType === 'image' || element.elementType === 'video';
+    if (isImage) {
+        const base = fixedHeight ? { width: '100%', height: '100%', objectFit: 'cover' } : { width: '100%' };
+        const override = useSharedImages ? sharedImageStyles || {} : element.styles;
+        return elementFactory.build(Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, base), override) }));
+    }
+    return elementFactory.build(Object.assign(Object.assign({}, element), { styles: element.styles }));
 }
-function InteractiveSliderComponent({ component }) {
+function resolveChromeColors(properties) {
+    return {
+        arrowBackground: String(properties.arrowBackground || 'rgba(0,0,0,0.45)'),
+        arrowColor: String(properties.arrowColor || '#fff'),
+        arrowSize: Number(properties.arrowSize) || 40,
+        dotActiveBackground: String(properties.dotActiveBackground || '#333'),
+        dotBackground: String(properties.dotBackground || 'rgba(0,0,0,0.15)'),
+        dotActiveColor: String(properties.dotActiveColor || '#fff'),
+        dotColor: String(properties.dotColor || '#666'),
+        dotSize: Number(properties.dotSize) || 28,
+    };
+}
+const ARROW_BASE_STYLE = {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 10,
+    borderRadius: '50%',
+    border: 'none',
+    fontSize: 18,
+    fontWeight: 700,
+    lineHeight: 1,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'background 0.2s',
+};
+function ArrowButton({ side, size, background, color, onClick, }) {
+    return (_jsx("button", { type: "button", "aria-label": side === 'left' ? 'Slide anterior' : 'Próximo slide', onClick: onClick, style: Object.assign(Object.assign({}, ARROW_BASE_STYLE), { [side]: 8, width: size, height: size, background, color }), children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: side === 'left' ? 'M8.5 1L1.5 8L8.5 15' : 'M1.5 1L8.5 8L1.5 15', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+function Dots({ count, current, size, activeBackground, background, activeColor, color, onGoTo, }) {
+    return (_jsx("div", { "aria-label": "Navega\u00E7\u00E3o do slider", style: { display: 'flex', justifyContent: 'center', gap: 6, marginTop: 12 }, children: Array.from({ length: count }).map((_, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": current === index ? 'true' : undefined, onClick: () => onGoTo(index), style: {
+                width: size,
+                height: size,
+                borderRadius: '50%',
+                border: 'none',
+                background: current === index ? activeBackground : background,
+                color: current === index ? activeColor : color,
+                fontSize: 12,
+                fontWeight: 600,
+                lineHeight: 1,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'all 0.2s',
+            }, children: index + 1 }, index))) }));
+}
+function useSliderWidth(ref) {
+    const [width, setWidth] = useState(0);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const measure = () => setWidth(el.getBoundingClientRect().width);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}
+export function SliderComponent({ component, editionMode = false, }) {
     const properties = component.properties || {};
     const slides = orderBySort(component.elements);
-    const [currentSlide, setCurrentSlide] = useState(0);
-    const [loaded, setLoaded] = useState(false);
-    const [ref, instanceRef] = useKeenSlider({
-        loop: slides.length > 1,
-        mode: 'snap',
-        slides: { perView: Number(properties.perView) || 1, spacing: 10 },
-        created() {
-            setLoaded(true);
-        },
-        slideChanged(slider) {
-            setCurrentSlide(slider.track.details.rel);
-        }
-    });
+    const n = slides.length;
+    const containerRef = useRef(null);
+    const width = useSliderWidth(containerRef);
+    const breakpoint = breakpointFromWidth(width);
+    const resolved = useMemo(() => resolveResponsiveProperties(properties, breakpoint), [properties, breakpoint]);
+    const perView = Math.max(1, Number(resolved.perView) || 1);
+    const spacing = Number(resolved.spacing) > 0 ? Number(resolved.spacing) : 10;
+    const fixedHeight = Number(resolved.height) > 0 ? Number(resolved.height) : 0;
+    const loop = resolved.loop === undefined ? n > 1 : Boolean(resolved.loop);
+    const slideWidth = width > 0 ? (width - spacing * (perView - 1)) / perView : 0;
+    const slideStep = slideWidth + spacing;
+    const maxIndex = Math.max(0, n - perView);
+    const [index, setIndex] = useState(loop ? n : 0);
+    const [animate, setAnimate] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const dragRef = useRef(null);
+    const currentIndex = loop
+        ? ((Math.round(index) % n) + n) % n
+        : Math.min(Math.max(0, Math.round(index)), maxIndex);
     useEffect(() => {
-        if (!properties.autoplay || slides.length < 2)
+        if (editionMode || !resolved.autoplay || n <= 1)
             return;
-        const interval = Number(properties.interval) > 0 ? Number(properties.interval) : 5000;
-        const timer = window.setInterval(() => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel + 1); }, interval);
+        const interval = Number(resolved.interval) > 0 ? Number(resolved.interval) : 5000;
+        const timer = window.setInterval(() => {
+            setAnimate(true);
+            setIndex((prev) => prev + 1);
+        }, interval);
         return () => window.clearInterval(timer);
-    }, [instanceRef, properties.autoplay, properties.interval, slides.length]);
-    const fixedHeight = Number(properties.height) > 0 ? Number(properties.height) : 0;
-    const perView = Number(properties.perView) || 1;
-    const showArrows = Boolean(properties.showArrows) && loaded && slides.length > perView;
-    const showDots = Boolean(properties.showDots) && loaded && slides.length > 1;
-    return (_jsxs("div", { style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { ref: ref, className: "keen-slider", style: fixedHeight ? { height: fixedHeight } : undefined, children: slides.map((element) => (_jsx("div", { className: "keen-slider__slide", style: { overflow: 'hidden' }, children: elementFactory.build(Object.assign(Object.assign({}, element), { styles: element.elementType === 'image' || element.elementType === 'video'
-                            ? fixedHeight
-                                ? Object.assign({ width: '100%', height: '100%', objectFit: 'cover' }, element.styles) : Object.assign({ width: '100%' }, element.styles)
-                            : element.styles })) }, element.id))) }), showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Slide anterior", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel - 1); }, style: {
-                            position: 'absolute',
-                            left: 8,
-                            top: '50%',
-                            transform: 'translateY(-50%)',
-                            zIndex: 10,
-                            width: 40,
-                            height: 40,
-                            borderRadius: '50%',
-                            border: 'none',
-                            background: 'rgba(0,0,0,0.45)',
-                            color: '#fff',
-                            fontSize: 18,
-                            fontWeight: 700,
-                            lineHeight: 1,
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            transition: 'background 0.2s',
-                        }, children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: "M8.5 1L1.5 8L8.5 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { type: "button", "aria-label": "Proximo slide", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel + 1); }, style: {
-                            position: 'absolute',
-                            right: 8,
-                            top: '50%',
-                            transform: 'translateY(-50%)',
-                            zIndex: 10,
-                            width: 40,
-                            height: 40,
-                            borderRadius: '50%',
-                            border: 'none',
-                            background: 'rgba(0,0,0,0.45)',
-                            color: '#fff',
-                            fontSize: 18,
-                            fontWeight: 700,
-                            lineHeight: 1,
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            transition: 'background 0.2s',
-                        }, children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: "M1.5 1L8.5 8L1.5 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })), showDots && (_jsx("div", { "aria-label": "Navegacao do slider", style: { display: 'flex', justifyContent: 'center', gap: 6, marginTop: 12 }, children: slides.map((element, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": currentSlide === index ? 'true' : undefined, onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(index); }, style: {
-                        width: 28,
-                        height: 28,
-                        borderRadius: '50%',
-                        border: 'none',
-                        background: currentSlide === index ? '#333' : 'rgba(0,0,0,0.15)',
-                        color: currentSlide === index ? '#fff' : '#666',
-                        fontSize: 12,
-                        fontWeight: 600,
-                        lineHeight: 1,
-                        cursor: 'pointer',
+    }, [editionMode, resolved.autoplay, resolved.interval, n]);
+    const snapToRange = (value) => {
+        if (!loop)
+            return value;
+        if (value >= 2 * n)
+            return value - n;
+        if (value < n)
+            return value + n;
+        return value;
+    };
+    const handleTransitionEnd = () => {
+        if (!loop || dragging)
+            return;
+        const snapped = snapToRange(index);
+        if (snapped !== index) {
+            setAnimate(false);
+            setIndex(snapped);
+        }
+    };
+    const goTo = (i) => {
+        const target = loop ? i : Math.min(Math.max(0, i), maxIndex);
+        setAnimate(true);
+        setIndex(target);
+    };
+    const goToDot = (i) => {
+        const target = loop ? n + i : Math.min(Math.max(0, i), maxIndex);
+        let delta = target - index;
+        if (loop) {
+            if (delta > n / 2)
+                delta -= n;
+            else if (delta < -n / 2)
+                delta += n;
+        }
+        setAnimate(true);
+        setIndex(index + delta);
+    };
+    const onPointerDown = (e) => {
+        if (n <= 1)
+            return;
+        dragRef.current = { startX: e.clientX, startIndex: index };
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setDragging(true);
+        setAnimate(false);
+    };
+    const onPointerMove = (e) => {
+        const drag = dragRef.current;
+        if (!drag || slideStep <= 0)
+            return;
+        setIndex(drag.startIndex - (e.clientX - drag.startX) / slideStep);
+    };
+    const endDrag = () => {
+        if (!dragRef.current)
+            return;
+        dragRef.current = null;
+        setDragging(false);
+        setIndex((prev) => {
+            const rounded = Math.round(prev);
+            return loop ? snapToRange(rounded) : Math.min(Math.max(0, rounded), maxIndex);
+        });
+        setAnimate(true);
+    };
+    const translateX = -(index * slideStep);
+    const trackSlides = loop ? [...slides, ...slides, ...slides] : slides;
+    const showArrows = Boolean(resolved.showArrows) && n > perView;
+    const showDots = Boolean(resolved.showDots) && n > 1;
+    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',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        transition: 'all 0.2s',
-                    }, children: index + 1 }, element.id))) }))] }));
-}
-export function SliderComponent({ component, editionMode = false }) {
-    if (editionMode)
-        return _jsx(StaticSliderComponent, { component: component });
-    return _jsx(InteractiveSliderComponent, { component: component });
+                        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/SocialIconsComponent.d.ts

@@ -1,4 +1,5 @@
 import type { SocialPropertiesType } from '../types/SocialPropertiesType.js';
-export declare function SocialIconsComponent({ social }: {
-    readonly social: SocialPropertiesType;
+export declare function SocialIconsComponent({ social, color }: {
+    readonly social?: SocialPropertiesType;
+    readonly color?: string;
 }): import("react").JSX.Element;

package/dist/components/SocialIconsComponent.js

@@ -1,19 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Row, Col } from 'react-bootstrap';
-import { FaFacebookF, FaInstagram, FaLink } from 'react-icons/fa';
-export function SocialIconsComponent({ social }) {
-    var _a, _b, _c;
-    const all = [];
-    if ((_a = social.facebook) === null || _a === void 0 ? void 0 : _a.path) {
-        all.push({ id: 'facebook', url: social.facebook.path, icon: FaFacebookF, description: 'Logo do Facebook' });
-    }
-    if ((_b = social.instagram) === null || _b === void 0 ? void 0 : _b.path) {
-        all.push({ id: 'instagram', url: social.instagram.path, icon: FaInstagram, description: 'Logo do Instagram' });
-    }
-    if ((_c = social.linktree) === null || _c === void 0 ? void 0 : _c.path) {
-        all.push({ id: 'linktree', url: social.linktree.path, icon: FaLink, description: 'Logo do Linktree' });
-    }
-    if (all.length === 0)
+import { FaFacebookF, FaInstagram, FaTiktok, FaWhatsapp, FaYoutube, FaXTwitter, FaLinkedin, FaThreads, FaLink, } from 'react-icons/fa6';
+const SOCIAL_ICONS = {
+    facebook: FaFacebookF,
+    instagram: FaInstagram,
+    tiktok: FaTiktok,
+    whatsapp: FaWhatsapp,
+    youtube: FaYoutube,
+    x: FaXTwitter,
+    twitter: FaXTwitter,
+    linkedin: FaLinkedin,
+    threads: FaThreads,
+    linktree: FaLink,
+    kwai: FaLink,
+};
+export function SocialIconsComponent({ social, color }) {
+    const entries = Object.entries(social || {})
+        .filter(([, value]) => Boolean(value === null || value === void 0 ? void 0 : value.path))
+        .map(([id, value]) => ({ id, url: (value === null || value === void 0 ? void 0 : value.path) || '', Icon: SOCIAL_ICONS[id] || FaLink }));
+    if (entries.length === 0)
         return null;
-    return (_jsx(Row, { children: all.map((element) => (_jsx(Col, { className: "text-center social-icons", style: { color: '#FFCC00' }, children: _jsx("a", { href: element.url, target: "_blank", rel: "noopener noreferrer", "aria-label": element.description, children: _jsx(element.icon, {}) }) }, element.id))) }));
+    return (_jsx(Row, { children: entries.map(({ id, url, Icon }) => (_jsx(Col, { className: "text-center social-icons", style: { color }, children: _jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", "aria-label": id, children: _jsx(Icon, {}) }) }, id))) }));
 }