lib-pixelbuild 0.2.2 → 0.2.3

package/dist/designSystem/tokens.js

@@ -0,0 +1,144 @@
+/**
+ * Design System tokens.
+ *
+ * Fontes de verdade para cores, tipografia, espaçamento, raio e sombra do site
+ * público. Cada token é exposto como uma variável CSS `--pb-*` e os componentes
+ * do `lib-pixelbuild` consomem via `var(--pb-*, <fallback>)`, de forma que um
+ * site sem design system configurado continua com aparência padrão.
+ */
+/**
+ * Valores padrão. Mantidos neutros e modernos para que um site sem
+ * personalização não tenha cara de "framework genérico".
+ */
+export const defaultTokens = {
+    colors: {
+        primary: '#F58220',
+        secondary: '#64748B',
+        success: '#16A34A',
+        danger: '#DC2626',
+        warning: '#F59E0B',
+        info: '#0EA5E9',
+        light: '#F8FAFC',
+        dark: '#0F172A',
+        background: '#FFFFFF',
+        surface: '#FFFFFF',
+        text: '#1F2937',
+        heading: '#111827',
+        muted: '#6B7280',
+        border: '#E5E7EB'
+    },
+    typography: {
+        fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+        fontSizeBase: '16px',
+        fontWeightNormal: '400',
+        fontWeightBold: '700',
+        lineHeight: '1.6'
+    },
+    spacing: {
+        none: '0',
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+        xxl: '48px'
+    },
+    radius: {
+        none: '0',
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        full: '9999px'
+    },
+    shadow: {
+        none: 'none',
+        sm: '0 1px 2px rgba(0,0,0,0.05)',
+        md: '0 4px 12px rgba(0,0,0,0.08)',
+        lg: '0 8px 24px rgba(0,0,0,0.12)'
+    },
+    gutter: '1.5rem'
+};
+function mergePartial(base, partial) {
+    if (!partial)
+        return base;
+    const result = Object.assign({}, base);
+    for (const key of Object.keys(partial)) {
+        const value = partial[key];
+        if (value === undefined)
+            continue;
+        const baseValue = base[key];
+        if (typeof baseValue === 'object' && baseValue !== null && typeof value === 'object' && value !== null) {
+            ;
+            result[key] = Object.assign(Object.assign({}, baseValue), value);
+        }
+        else {
+            ;
+            result[key] = value;
+        }
+    }
+    return result;
+}
+export function mergeTokens(base, partial) {
+    const merged = mergePartial(base, partial || {});
+    return merged;
+}
+/** Mapeia os tokens para pares `--pb-*` → valor. */
+export function tokenToCssVars(tokens) {
+    const { colors, typography, spacing, radius, shadow } = tokens;
+    return {
+        '--pb-color-primary': colors.primary,
+        '--pb-color-secondary': colors.secondary,
+        '--pb-color-success': colors.success,
+        '--pb-color-danger': colors.danger,
+        '--pb-color-warning': colors.warning,
+        '--pb-color-info': colors.info,
+        '--pb-color-light': colors.light,
+        '--pb-color-dark': colors.dark,
+        '--pb-color-background': colors.background,
+        '--pb-color-surface': colors.surface,
+        '--pb-color-text': colors.text,
+        '--pb-color-heading': colors.heading,
+        '--pb-color-muted': colors.muted,
+        '--pb-color-border': colors.border,
+        '--pb-font-family': typography.fontFamily,
+        '--pb-font-size-base': typography.fontSizeBase,
+        '--pb-font-weight-normal': typography.fontWeightNormal,
+        '--pb-font-weight-bold': typography.fontWeightBold,
+        '--pb-line-height': typography.lineHeight,
+        '--pb-space-none': spacing.none,
+        '--pb-space-xs': spacing.xs,
+        '--pb-space-sm': spacing.sm,
+        '--pb-space-md': spacing.md,
+        '--pb-space-lg': spacing.lg,
+        '--pb-space-xl': spacing.xl,
+        '--pb-space-xxl': spacing.xxl,
+        '--pb-radius-none': radius.none,
+        '--pb-radius-sm': radius.sm,
+        '--pb-radius-md': radius.md,
+        '--pb-radius-lg': radius.lg,
+        '--pb-radius-full': radius.full,
+        '--pb-shadow-none': shadow.none,
+        '--pb-shadow-sm': shadow.sm,
+        '--pb-shadow-md': shadow.md,
+        '--pb-shadow-lg': shadow.lg,
+        '--pb-gutter': tokens.gutter
+    };
+}
+/** Gera o bloco `:root { --pb-*: ... }` a partir dos tokens (com defaults). */
+export function buildTokenCss(tokens) {
+    const merged = mergeTokens(defaultTokens, tokens);
+    const vars = tokenToCssVars(merged);
+    const lines = Object.entries(vars)
+        .map(([key, value]) => `  ${key}: ${value};`)
+        .join('\n');
+    return `:root {\n${lines}\n}`;
+}
+/**
+ * Retorna o mapa de variáveis `--pb-*` (com defaults mesclados) para aplicação
+ * inline em um elemento raiz — permite que a troca de token reflita em tempo
+ * real no preview sem reinjetar o `<head>`.
+ */
+export function buildThemeVars(designSystem) {
+    const merged = mergeTokens(defaultTokens, designSystem);
+    return tokenToCssVars(merged);
+}

package/dist/elements/AlertElement.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { Alert } from 'react-bootstrap';
+import { PbAlert } from '../ui/PbAlert.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementColWrapper } from './ElementColWrapper.js';
 import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
@@ -16,8 +16,8 @@ export function AlertElement({ element, formId }) {
             hidden: getBoolean(properties, 'startHidden')
         });
         return () => unregisterElement(element.id);
-    }, [element.id, properties.startHidden, registerElement, resolvedFormId, unregisterElement]);
+    }, [element.id, properties.startHidden, registerElement, unregisterElement, resolvedFormId]);
     if (hidden)
         return null;
-    return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Alert, { variant: getString(properties, 'type', 'info'), style: element.styles, children: [_jsx(Alert.Heading, { children: getString(properties, 'title') }), _jsx("p", { className: "mb-0", children: getString(properties, 'message') })] }) }));
+    return (_jsx(ElementColWrapper, { element: element, children: _jsx(PbAlert, { variant: getString(properties, 'type', 'info'), style: element.styles, title: getString(properties, 'title'), children: _jsx("p", { className: "pb-mb-0", children: getString(properties, 'message') }) }) }));
 }

package/dist/elements/ButtonElement.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { Button, Spinner } from 'react-bootstrap';
 import { ElementColWrapper } from './ElementColWrapper.js';
+import { PbButton } from '../ui/PbButton.js';
+import { PbSpinner } from '../ui/PbSpinner.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { buttonActionFactory } from '../factories/ButtonActionFactory.js';
 import { ButtonActionEnum } from '../constants/ButtonActionEnum.js';
@@ -21,7 +22,7 @@ export function ButtonElement({ element, formId }) {
             hidden: getBoolean(properties, 'startHidden')
         });
         return () => unregisterElement(element.id);
-    }, [element.id, properties.startHidden, registerElement, resolvedFormId, unregisterElement]);
+    }, [element.id, properties.startHidden, registerElement, unregisterElement, resolvedFormId]);
     async function handleClick(event) {
         var _a, _b, _c;
         if (!properties.path) {
@@ -70,5 +71,6 @@ export function ButtonElement({ element, formId }) {
         ? properties.type
         : undefined;
     const size = getString(properties, 'size');
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx(Button, { as: properties.path ? 'a' : 'button', type: buttonType, variant: getString(properties, 'variant', buttonType ? 'primary' : getString(properties, 'type', 'primary')), size: size === 'sm' || size === 'lg' ? size : undefined, href: getString(properties, 'path'), target: properties.path ? getString(properties, 'target', '_self') : undefined, rel: properties.path ? 'noopener noreferrer' : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { as: "span", animation: "border", size: "sm", "aria-hidden": "true" }) }), ' ' + getString(properties, 'message')] })) : (getString(properties, 'text') || getString(properties, 'title')) }) }));
+    const variant = getString(properties, 'variant', buttonType ? 'primary' : getString(properties, 'type', 'primary'));
+    return (_jsx(ElementColWrapper, { element: element, children: _jsx(PbButton, { href: getString(properties, 'path') || undefined, target: properties.path ? getString(properties, 'target', '_self') : undefined, type: buttonType, variant: variant, size: size === 'sm' || size === 'lg' ? size : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(PbSpinner, { size: "sm" }) }), ' ' + getString(properties, 'message')] })) : (getString(properties, 'text') || getString(properties, 'title')) }) }));
 }

package/dist/elements/ElementColWrapper.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Col } from 'react-bootstrap';
+import { PbCol } from '../ui/PbCol.js';
 export function ElementColWrapper({ element, children }) {
     var _a;
     const style = {};
@@ -10,5 +10,5 @@ export function ElementColWrapper({ element, children }) {
     if ((_a = element.styles) === null || _a === void 0 ? void 0 : _a.textAlign) {
         style.textAlign = element.styles.textAlign;
     }
-    return (_jsx(Col, { "data-pb-element": element.id, xs: element.width.xs, sm: element.width.sm, md: element.width.md, lg: element.width.lg, xl: element.width.xl, style: style, children: children }, element.id));
+    return (_jsx(PbCol, { colId: element.id, width: element.width, offset: element.offset, style: style, "data-pb-element": element.id, children: children }));
 }

package/dist/elements/IconMap.js

@@ -1,4 +1,4 @@
-import { FaArrowRight, FaArrowLeft, FaArrowUp, FaArrowDown, FaChevronRight, FaChevronLeft, FaChevronUp, FaChevronDown, FaLongArrowAltRight, FaLongArrowAltLeft, FaBars, FaTimes, FaCheck, FaPlus, FaMinus, FaSearch, FaHome, FaUser, FaUsers, FaCog, FaInfoCircle, FaQuestionCircle, FaExclamationTriangle, FaCheckCircle, FaTimesCircle, FaExternalLinkAlt, FaDownload, FaUpload, FaSync, FaLock, FaUnlock, FaEye, FaEyeSlash, FaBell, FaStar, FaHeart, FaList, FaTh, FaThLarge, FaFilter, FaPhone, FaEnvelope, FaEnvelopeOpen, FaComment, FaComments, FaQuoteLeft, FaQuoteRight, FaPaperPlane, FaFacebookF, FaInstagram, FaWhatsapp, FaYoutube, FaTwitter, FaLinkedinIn, FaPinterestP, FaShoppingCart, FaShoppingBag, FaCreditCard, FaMoneyBillWave, FaTag, FaTags, FaGift, FaTruck, FaMapMarkerAlt, FaMap, FaMapPin, FaGlobe, FaCompass, FaLocationArrow, FaClock, FaCalendar, FaCalendarAlt, FaHourglassHalf, FaImage, FaImages, FaCamera, FaVideo, FaFilm, FaMusic, FaHeadphones, FaPlay, FaBriefcase, FaBuilding, FaChartBar, FaChartLine, FaChartPie, FaRocket, FaLightbulb, FaTrophy, FaMedal, FaFlag, FaFile, FaFolder, FaLink, FaPencilAlt, FaTrashAlt, FaCopy, FaCloud, FaWifi, FaMobileAlt, } from 'react-icons/fa';
+import { FaArrowRight, FaArrowLeft, FaArrowUp, FaArrowDown, FaChevronRight, FaChevronLeft, FaChevronUp, FaChevronDown, FaLongArrowAltRight, FaLongArrowAltLeft, FaBars, FaTimes, FaCheck, FaPlus, FaMinus, FaSearch, FaHome, FaUser, FaUsers, FaCog, FaInfoCircle, FaQuestionCircle, FaExclamationTriangle, FaCheckCircle, FaTimesCircle, FaExternalLinkAlt, FaDownload, FaUpload, FaSync, FaLock, FaUnlock, FaEye, FaEyeSlash, FaBell, FaStar, FaHeart, FaList, FaTh, FaThLarge, FaFilter, FaPhone, FaEnvelope, FaEnvelopeOpen, FaComment, FaComments, FaQuoteLeft, FaQuoteRight, FaPaperPlane, FaFacebookF, FaInstagram, FaWhatsapp, FaYoutube, FaTwitter, FaLinkedinIn, FaPinterestP, FaShoppingCart, FaShoppingBag, FaCreditCard, FaMoneyBillWave, FaTag, FaTags, FaGift, FaTruck, FaMapMarkerAlt, FaMap, FaMapPin, FaGlobe, FaCompass, FaLocationArrow, FaClock, FaCalendar, FaCalendarAlt, FaHourglassHalf, FaImage, FaImages, FaCamera, FaVideo, FaFilm, FaMusic, FaHeadphones, FaPlay, FaBriefcase, FaBuilding, FaChartBar, FaChartLine, FaChartPie, FaRocket, FaLightbulb, FaTrophy, FaMedal, FaFlag, FaFile, FaFolder, FaLink, FaPencilAlt, FaTrashAlt, FaCopy, FaCloud, FaWifi, FaMobileAlt } from 'react-icons/fa';
 export const iconMap = {
     'arrow-right': FaArrowRight,
     'arrow-left': FaArrowLeft,
@@ -99,5 +99,5 @@ export const iconMap = {
     copy: FaCopy,
     cloud: FaCloud,
     wifi: FaWifi,
-    mobile: FaMobileAlt,
+    mobile: FaMobileAlt
 };

package/dist/elements/InputElement.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { Form } from 'react-bootstrap';
 import { IMaskInput } from 'react-imask';
 import { ElementColWrapper } from './ElementColWrapper.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
@@ -66,12 +65,14 @@ export function InputElement({ element, formId }) {
         }
         store.setElementState(element.id, { value: checked ? value : '' });
     };
+    const isCheck = element.elementType === ElementTypeEnum.Checkbox || element.elementType === ElementTypeEnum.Radio;
     const renderControl = () => {
+        const baseClass = error ? 'pb-form-control-invalid' : '';
         if (element.elementType === ElementTypeEnum.Textarea) {
-            return (_jsx("textarea", { defaultValue: getString(properties, 'value'), rows: getNumber(properties, 'rows') || 4, onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+            return (_jsx("textarea", { defaultValue: getString(properties, 'value'), rows: getNumber(properties, 'rows') || 4, onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `pb-form-textarea ${baseClass}`.trim(), style: element.styles }));
         }
         if (element.elementType === ElementTypeEnum.Select) {
-            return (_jsx("select", { defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `form-select${error ? ' is-invalid' : ''}`, style: element.styles, children: options.map((option, index) => {
+            return (_jsx("select", { defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `pb-form-select ${baseClass}`.trim(), style: element.styles, children: options.map((option, index) => {
                     var _a, _b, _c, _d;
                     const data = typeof option === 'object' && option !== null ? option : null;
                     const value = String((_a = data === null || data === void 0 ? void 0 : data.value) !== null && _a !== void 0 ? _a : option);
@@ -79,17 +80,17 @@ export function InputElement({ element, formId }) {
                     return (_jsx("option", { value: value, children: text }, `${value}-${index}`));
                 }) }));
         }
-        if (element.elementType === ElementTypeEnum.Checkbox || element.elementType === ElementTypeEnum.Radio) {
+        if (isCheck) {
             const value = getString(properties, 'value', 'on');
-            return (_jsxs("div", { className: "form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: getBoolean(properties, 'checked'), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `form-check-input${error ? ' is-invalid' : ''}`, style: element.styles }), label && (_jsx("label", { className: "form-check-label", htmlFor: controlId, children: label }))] }));
+            return (_jsxs("div", { className: "pb-form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: getBoolean(properties, 'checked'), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `pb-form-check-input${error ? ' pb-form-check-invalid' : ''}`, style: element.styles }), label && (_jsx("label", { className: "pb-form-check-label", htmlFor: controlId, children: label }))] }));
         }
         if (element.elementType === ElementTypeEnum.File) {
-            return (_jsx("div", { className: "alert alert-secondary", role: "status", style: element.styles, children: "File upload not available in this form." }));
+            return (_jsx("div", { className: "pb-alert pb-alert-secondary", role: "status", style: element.styles, children: "File upload not available in this form." }));
         }
         if (hasMask) {
-            return (_jsx(IMaskInput, { mask: getString(properties, 'mask'), defaultValue: getString(properties, 'value'), onAccept: handleAccept, onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+            return (_jsx(IMaskInput, { mask: getString(properties, 'mask'), defaultValue: getString(properties, 'value'), onAccept: handleAccept, onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `pb-form-control ${baseClass}`.trim(), style: element.styles }));
         }
-        return (_jsx("input", { type: getString(properties, 'type', 'text'), defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+        return (_jsx("input", { type: getString(properties, 'type', 'text'), defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `pb-form-control ${baseClass}`.trim(), style: element.styles }));
     };
-    return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Form.Group, { className: "mb-3", controlId: controlId, children: [label && element.elementType !== ElementTypeEnum.Checkbox && element.elementType !== ElementTypeEnum.Radio && (_jsx(Form.Label, { children: label })), renderControl(), error && (_jsx("div", { className: "invalid-feedback", style: { display: 'block' }, children: errorMessage }))] }) }));
+    return (_jsx(ElementColWrapper, { element: element, children: _jsxs("div", { className: "pb-form-group", id: controlId, children: [label && !isCheck && (_jsx("label", { className: "pb-form-label", htmlFor: controlId, children: label })), renderControl(), error && (_jsx("div", { className: "pb-invalid-feedback", role: "alert", children: errorMessage }))] }) }));
 }

package/dist/elements/TextElement.js

@@ -4,10 +4,14 @@ import { ElementColWrapper } from './ElementColWrapper.js';
 export function TextElement({ element }) {
     const properties = element.properties;
     const text = String(properties.text || properties.title || properties.message || '');
+    const isSimple = properties.editorType === 'simple';
     if (element.elementType === 'title') {
         const tag = String(properties.tag || 'h2');
         const TitleTag = tag;
         return (_jsx(ElementColWrapper, { element: element, children: _jsx(TitleTag, { style: Object.assign({ margin: 0 }, element.styles), children: text }) }));
     }
+    if (isSimple) {
+        return (_jsx(ElementColWrapper, { element: element, children: _jsx("div", { style: Object.assign({ whiteSpace: 'pre-wrap' }, element.styles), children: text }) }));
+    }
     return (_jsx(ElementColWrapper, { element: element, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(text) }, style: element.styles }) }));
 }

package/dist/factories/ComponentFactory.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ComponentType } from '../types/ComponentType.js';
+import type { ComponentDefaults } from '../types/WebsiteType.js';
 export declare class ComponentFactory {
-    build(component: ComponentType, editionMode?: boolean): React.ReactElement | null;
+    build(component: ComponentType, editionMode?: boolean, defaults?: ComponentDefaults): React.ReactElement | null;
 }

package/dist/factories/ComponentFactory.js

@@ -8,32 +8,46 @@ import { SliderComponent } from '../components/SliderComponent.js';
 import { CardComponent } from '../components/CardComponent.js';
 import { MapComponent } from '../components/MapComponent.js';
 import { ButtonsComponent } from '../components/ButtonsComponent.js';
+import { IconComponent } from '../components/IconComponent.js';
+/**
+ * Aplica os estilos padrão do design system (`componentDefaults`) antes dos
+ * estilos da instância — o override da instância prevalece.
+ */
+function applyDefaults(component, defaults) {
+    const typeDefaults = defaults === null || defaults === void 0 ? void 0 : defaults[component.componentType];
+    if (!typeDefaults || Object.keys(typeDefaults).length === 0)
+        return component;
+    return Object.assign(Object.assign({}, component), { styles: Object.assign(Object.assign({}, typeDefaults), component.styles) });
+}
 export class ComponentFactory {
-    build(component, editionMode = false) {
-        switch (component.componentType) {
+    build(component, editionMode = false, defaults) {
+        const resolved = applyDefaults(component, defaults);
+        switch (resolved.componentType) {
             case ComponentTypeEnum.Text:
             case ComponentTypeEnum.TextWithImage:
             case ComponentTypeEnum.HeroBanner:
-                return _jsx(TextComponent, { component: component }, component.id);
+                return _jsx(TextComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Image:
-                return _jsx(ImageComponent, { component: component }, component.id);
+                return _jsx(ImageComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.List:
-                return _jsx(ListComponent, { component: component }, component.id);
+                return _jsx(ListComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Slider:
             case ComponentTypeEnum.Gallery:
             case ComponentTypeEnum.Testimonials:
-                return _jsx(SliderComponent, { component: component, editionMode: editionMode }, component.id);
+                return _jsx(SliderComponent, { component: resolved, editionMode: editionMode }, resolved.id);
             case ComponentTypeEnum.Form:
-                return _jsx(FormComponent, { component: component }, component.id);
+                return _jsx(FormComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Card:
             case ComponentTypeEnum.Faq:
-                return _jsx(CardComponent, { component: component }, component.id);
+                return _jsx(CardComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Map:
-                return _jsx(MapComponent, { component: component }, component.id);
+                return _jsx(MapComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Buttons:
-                return _jsx(ButtonsComponent, { component: component }, component.id);
+                return _jsx(ButtonsComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.Icon:
+                return _jsx(IconComponent, { component: resolved }, resolved.id);
             default:
-                throw new Error('Invalid component type: ' + component.componentType);
+                throw new Error('Invalid component type: ' + resolved.componentType);
         }
     }
 }

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 export type { RawWebsiteType } from './types/RawWebsiteType.js';
 export type { WebsiteType } from './types/WebsiteType.js';
 export type { PageType } from './types/PageType.js';
-export type { SectionType } from './types/SectionType.js';
-export type { SectionColumnType } from './types/SectionColumnType.js';
+export type { BlockType } from './types/BlockType.js';
 export type { ColumnWidthType } from './types/ColumnWidthType.js';
 export type { ComponentType } from './types/ComponentType.js';
 export type { ElementType } from './types/ElementType.js';
@@ -12,7 +11,8 @@ export { Header } from './layouts/Header.js';
 export { Footer } from './layouts/Footer.js';
 export { SiteLayout, type EmailApiConfig } from './layouts/SiteLayout.js';
 export { PageBuilder } from './builders/PageBuilder.js';
-export { SectionRenderer } from './renderers/SectionRenderer.js';
+export { BlockRenderer } from './renderers/BlockRenderer.js';
+export { IconComponent } from './components/IconComponent.js';
 export { LoadingComponent } from './components/LoadingComponent.js';
 export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';
@@ -24,3 +24,15 @@ export { analyticsService } from './services/AnalyticsService.js';
 export { buttonActionFactory } from './factories/ButtonActionFactory.js';
 export type { EmailServiceConfig, EmailSendOptions } from './services/EmailService.js';
 export type { EmailSettingsType } from './types/EmailSettingsType.js';
+export type { DesignTokens, DesignColors, DesignTypography, DesignSpacing, DesignRadius, DesignShadow, PartialDesignTokens, DeepPartial } from './designSystem/tokens.js';
+export { defaultTokens, mergeTokens, tokenToCssVars, buildTokenCss, buildThemeVars } from './designSystem/tokens.js';
+export { baseCss } from './designSystem/baseCss.js';
+export { buildSiteCss } from './designSystem/buildSiteCss.js';
+export { themeVarsStyle } from './designSystem/themeVars.js';
+export { ThemeStyle } from './designSystem/theme.js';
+export { PbContainer } from './ui/PbContainer.js';
+export { PbRow } from './ui/PbRow.js';
+export { PbCol } from './ui/PbCol.js';
+export { PbButton } from './ui/PbButton.js';
+export { PbSpinner } from './ui/PbSpinner.js';
+export { PbAlert } from './ui/PbAlert.js';

package/dist/index.js

@@ -2,7 +2,8 @@ export { Header } from './layouts/Header.js';
 export { Footer } from './layouts/Footer.js';
 export { SiteLayout } from './layouts/SiteLayout.js';
 export { PageBuilder } from './builders/PageBuilder.js';
-export { SectionRenderer } from './renderers/SectionRenderer.js';
+export { BlockRenderer } from './renderers/BlockRenderer.js';
+export { IconComponent } from './components/IconComponent.js';
 export { LoadingComponent } from './components/LoadingComponent.js';
 export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';
@@ -12,3 +13,14 @@ export { ElementTypeEnum } from './constants/ElementEnum.js';
 export { ButtonActionEnum } from './constants/ButtonActionEnum.js';
 export { analyticsService } from './services/AnalyticsService.js';
 export { buttonActionFactory } from './factories/ButtonActionFactory.js';
+export { defaultTokens, mergeTokens, tokenToCssVars, buildTokenCss, buildThemeVars } from './designSystem/tokens.js';
+export { baseCss } from './designSystem/baseCss.js';
+export { buildSiteCss } from './designSystem/buildSiteCss.js';
+export { themeVarsStyle } from './designSystem/themeVars.js';
+export { ThemeStyle } from './designSystem/theme.js';
+export { PbContainer } from './ui/PbContainer.js';
+export { PbRow } from './ui/PbRow.js';
+export { PbCol } from './ui/PbCol.js';
+export { PbButton } from './ui/PbButton.js';
+export { PbSpinner } from './ui/PbSpinner.js';
+export { PbAlert } from './ui/PbAlert.js';

package/dist/layouts/Footer.js

@@ -1,11 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DOMPurify from 'dompurify';
-import { Container, Row, Col } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
+import { PbRow } from '../ui/PbRow.js';
+import { PbCol } from '../ui/PbCol.js';
 import { SocialIconsComponent } from '../components/SocialIconsComponent.js';
 export function Footer({ website }) {
     var _a;
     const social = (_a = website.properties) === null || _a === void 0 ? void 0 : _a.social;
     const footer = website.footer.properties;
     const styles = website.footer.styles;
-    return (_jsx(Container, { fluid: styles.fluid || undefined, style: { backgroundColor: styles.backgroundColor }, children: _jsxs(Row, { id: 'footer', style: styles, children: [_jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", style: { marginBottom: '30px' }, children: social && (_jsx(SocialIconsComponent, { social: social, color: styles.socialIconColor || styles.color })) }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }), _jsxs(Col, { xs: 12, sm: 12, md: 12, lg: 12, children: [_jsx("hr", { className: "footer-divider" }), _jsxs("p", { className: "text-center mb-0", children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }));
+    const fluid = styles.fluid || undefined;
+    const baseStyle = Object.assign({}, styles);
+    delete baseStyle.fluid;
+    delete baseStyle.responsive;
+    const textStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    };
+    return (_jsx(PbContainer, { fluid: fluid || undefined, children: _jsx("footer", { id: "footer", className: "pb-footer", style: { backgroundColor: styles.backgroundColor }, children: _jsxs(PbRow, { children: [_jsx(PbCol, { width: { xs: 12 }, style: { marginBottom: '30px' }, children: social && _jsx(SocialIconsComponent, { social: social, color: styles.socialIconColor || styles.color }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }) }), _jsx(PbCol, { width: { xs: 12 }, style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }) }), _jsxs(PbCol, { width: { xs: 12 }, children: [_jsx("hr", { className: "pb-footer-divider" }), _jsxs("p", { className: "pb-text-center pb-mb-0", style: baseStyle, children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }) }));
 }

package/dist/layouts/Header.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Container, Navbar, Nav } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
 export function Header({ website, imageBaseUrl }) {
     const headerProperties = website.header.properties;
     const headerStyles = website.header.styles;
     const location = useLocation();
+    const [menuOpen, setMenuOpen] = useState(false);
     const menuPages = useMemo(() => (website.pages || []).filter((p) => p.menu === true).sort((a, b) => (a.menuOrder || 0) - (b.menuOrder || 0)), [website.pages]);
     const isActive = useCallback((path) => {
         const currentPath = location.pathname;
@@ -18,6 +19,7 @@ export function Header({ website, imageBaseUrl }) {
     const logoAlign = headerProperties.logoAlign || 'center';
     const menuLinkColor = headerStyles.menuLinkColor || headerStyles.color || undefined;
     const menuActiveLinkColor = headerStyles.menuActiveLinkColor || headerStyles.menuLinkColor || headerStyles.color || undefined;
+    const textAlign = headerStyles.textAlign || 'left';
     const brandStyle = { padding: 0 };
     if (showMenu) {
         if (logoAlign === 'right')
@@ -36,17 +38,24 @@ export function Header({ website, imageBaseUrl }) {
     else if (logoAlign === 'right') {
         brandStyle.marginLeft = 'auto';
     }
-    return (_jsx(Navbar, { expand: "lg", collapseOnSelect: true, className: "py-3", style: { backgroundColor: headerStyles.backgroundColor || undefined, color: headerStyles.color || undefined, width: '100%' }, children: _jsxs(Container, { fluid: headerStyles.fluid || undefined, style: { textAlign: headerStyles.textAlign || undefined }, children: [headerProperties.showLogo && logoUrl && (_jsx(Navbar.Brand, { style: brandStyle, children: _jsx("img", { src: logoUrl, width: headerProperties.logoWidth || 200, className: "d-inline-block align-top", alt: "Logo" }) })), showMenu && (_jsxs(_Fragment, { children: [_jsx(Navbar.Toggle, { "aria-controls": "header-navbar-nav" }), _jsx(Navbar.Collapse, { id: "header-navbar-nav", children: _jsx(Nav, { className: `mx-auto ${headerProperties.showLogo ? '' : 'w-100 justify-content-center'}`, children: menuPages.map((p) => {
+    const innerStyle = { textAlign };
+    if (textAlign === 'center')
+        innerStyle.justifyContent = 'center';
+    else if (textAlign === 'right')
+        innerStyle.justifyContent = 'flex-end';
+    const closeMenu = useCallback(() => setMenuOpen(false), []);
+    return (_jsx("header", { className: "pb-header", style: {
+            backgroundColor: headerStyles.backgroundColor || undefined,
+            color: headerStyles.color || undefined
+        }, children: _jsx(PbContainer, { fluid: headerStyles.fluid || undefined, children: _jsxs("div", { className: "pb-header-inner", style: innerStyle, children: [headerProperties.showLogo && logoUrl && (_jsx("a", { className: "pb-brand", href: "/", style: brandStyle, "aria-label": "P\u00E1gina inicial", children: _jsx("img", { src: logoUrl, width: Number(headerProperties.logoWidth) || 200, alt: "Logo" }) })), showMenu && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "pb-nav-toggle", "aria-label": menuOpen ? 'Fechar menu' : 'Abrir menu', "aria-expanded": menuOpen, onClick: () => setMenuOpen((open) => !open), children: "\u2630" }), _jsx("nav", { className: `pb-nav${menuOpen ? ' pb-nav-open' : ''}`, "aria-label": "Menu principal", children: menuPages.map((p) => {
                                     const active = isActive(p.path);
-                                    return (_jsx(Nav.Link, { href: p.path, style: {
+                                    return (_jsx("a", { href: p.path, onClick: closeMenu, className: `pb-nav-link${active ? ' pb-nav-link-active' : ''}`, style: {
                                             color: active ? menuActiveLinkColor : menuLinkColor,
                                             fontSize: headerStyles.menuFontSize || undefined,
                                             letterSpacing: headerStyles.menuLetterSpacing || undefined,
                                             textTransform: headerStyles.menuTextTransform || undefined,
                                             margin: '0 12px',
-                                            paddingBottom: '4px',
-                                            borderBottom: active && menuActiveLinkColor ? `2px solid ${menuActiveLinkColor}` : '2px solid transparent',
-                                            transition: 'color 0.3s, border-color 0.3s',
+                                            paddingBottom: '4px'
                                         }, children: p.title }, p.id));
-                                }) }) })] }))] }) }));
+                                }) })] }))] }) }) }));
 }

package/dist/layouts/SiteLayout.js

@@ -4,6 +4,7 @@ import { Outlet } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { Header } from './Header.js';
 import { Footer } from './Footer.js';
+import { ThemeStyle } from '../designSystem/theme.js';
 import { buildFontFamily, buildGoogleFontsHref } from '../utils/fonts.js';
 import { buttonActionFactory } from '../factories/ButtonActionFactory.js';
 export function SiteLayout({ website, imageBaseUrl, emailApi }) {
@@ -35,5 +36,5 @@ export function SiteLayout({ website, imageBaseUrl, emailApi }) {
         (_f = (_e = website.properties) === null || _e === void 0 ? void 0 : _e.email) === null || _f === void 0 ? void 0 : _f.recipientName,
         (_h = (_g = website.properties) === null || _g === void 0 ? void 0 : _g.email) === null || _h === void 0 ? void 0 : _h.subject
     ]);
-    return (_jsxs(_Fragment, { children: [fontHref && (_jsxs(Helmet, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: fontHref, rel: "stylesheet" })] })), _jsxs("div", { id: "site-layout", style: { backgroundColor: website.styles.backgroundColor, color: website.styles.color, fontFamily }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ThemeStyle, { designSystem: website.designSystem }), fontHref && (_jsxs(Helmet, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: fontHref, rel: "stylesheet" })] })), _jsxs("div", { id: "site-layout", className: "pb-root", style: { backgroundColor: website.styles.backgroundColor, color: website.styles.color, fontFamily }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] })] }));
 }

package/dist/renderers/BlockRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { BlockType } from '../types/BlockType.js';
+import type { ComponentDefaults } from '../types/WebsiteType.js';
+declare const BlockRenderer: import("react").NamedExoticComponent<{
+    readonly blocks: BlockType[];
+    readonly editionMode?: boolean;
+    readonly componentDefaults?: ComponentDefaults;
+}>;
+export { BlockRenderer };

package/dist/renderers/BlockRenderer.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentFactory } from '../factories/ComponentFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+import { buildResponsiveCss } from '../utils/responsiveStyles.js';
+const componentFactory = new ComponentFactory();
+function gridClass(id) {
+    return `pixelbuild-grid-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+}
+const BlockGrid = memo(function BlockGrid({ block, editionMode, componentDefaults }) {
+    const grid = gridClass(block.id);
+    const components = orderBySort(block.components);
+    const css = useMemo(() => {
+        const rules = components
+            .map((component) => {
+            var _a, _b, _c;
+            const properties = component.properties || {};
+            const row = Math.max(0, Number(properties.row) || 0);
+            const rowSpan = Math.max(1, Number(properties.rowSpan) || 1);
+            const xs = ((_a = component.width) === null || _a === void 0 ? void 0 : _a.xs) || 12;
+            const sm = ((_b = component.width) === null || _b === void 0 ? void 0 : _b.sm) || xs;
+            const md = ((_c = component.width) === null || _c === void 0 ? void 0 : _c.md) || sm;
+            const cls = gridClass(component.id);
+            return [
+                `.${grid} .${cls}{grid-column:span ${xs};grid-row:auto;min-width:0}`,
+                `@media (min-width:576px){.${grid} .${cls}{grid-column:span ${sm}}}`,
+                `@media (min-width:768px){.${grid} .${cls}{grid-column:span ${md};grid-row:${row + 1}/span ${rowSpan}}}`
+            ].join('');
+        })
+            .join('');
+        return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pb-gutter,1rem)}${rules}`;
+    }, [grid, components]);
+    if (editionMode && components.length === 0) {
+        return (_jsxs("div", { "data-pixelbuild-empty-block": block.id, style: {
+                minHeight: 80,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 6,
+                border: '1.5px dashed #c4d0dc',
+                color: '#94a3b8',
+                fontSize: 13,
+                cursor: 'pointer',
+                textAlign: 'center',
+                borderRadius: 8
+            }, children: [_jsx("span", { style: { fontSize: 18, lineHeight: 1 }, children: "+" }), "Adicionar componente"] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: css }), _jsx("div", { className: grid, children: components.map((component) => (_jsx("div", { className: gridClass(component.id), children: componentFactory.build(component, editionMode, componentDefaults) }, component.id))) })] }));
+});
+const BlockContent = memo(function BlockContent({ block, editionMode, componentDefaults }) {
+    const content = useMemo(() => _jsx(BlockGrid, { block: block, editionMode: editionMode, componentDefaults: componentDefaults }), [block, editionMode, componentDefaults]);
+    if (block.sectionType === 'container-fluid') {
+        return (_jsx(PbContainer, { fluid: true, "data-pb-block": block.id, style: block.styles, children: content }));
+    }
+    if (block.sectionType === 'container') {
+        return (_jsx(PbContainer, { "data-pb-block": block.id, style: block.styles, children: content }));
+    }
+    return _jsx(PbContainer, { fluid: true, children: content });
+});
+const BlockRenderer = memo(function BlockRenderer({ blocks, editionMode = false, componentDefaults }) {
+    const sorted = useMemo(() => orderBySort(blocks || []), [blocks]);
+    if (sorted.length === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: buildResponsiveCss(sorted) }), sorted.map((block) => (_jsx(BlockContent, { block: block, editionMode: editionMode, componentDefaults: componentDefaults }, block.id)))] }));
+});
+export { BlockRenderer };

package/dist/types/{SectionColumnType.d.ts → BlockType.d.ts}

@@ -1,14 +1,10 @@
 import type { StylesType } from './StylesType.js';
-import type { ColumnWidthType } from './ColumnWidthType.js';
 import type { ComponentType } from './ComponentType.js';
-import type { SectionType } from './SectionType.js';
-export interface SectionColumnType {
+export interface BlockType {
     id: number;
-    width: ColumnWidthType;
-    offset: ColumnWidthType;
+    sectionType: 'container' | 'container-fluid';
     sort: number;
     properties: Record<string, unknown>;
     styles: StylesType;
     components: ComponentType[];
-    childSections: SectionType[];
 }