funuicss 3.7.2 → 3.7.4

package/ui/appbar/AppBar.js

@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -40,18 +49,174 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = AppBar;
 var React = __importStar(require("react"));
 var react_1 = require("react");
-var navigation_1 = require("next/navigation"); // <-- Updated import
+var navigation_1 = require("next/navigation");
 var Hamburger_1 = __importDefault(require("./Hamburger"));
-function AppBar(_a) {
-    var fixedTop = _a.fixedTop, funcss = _a.funcss, padding = _a.padding, fixedBottom = _a.fixedBottom, justify = _a.justify, left = _a.left, center = _a.center, right = _a.right, sideBar = _a.sideBar, sidebarTrigger = _a.sidebarTrigger, transparent = _a.transparent, hasSidebar = _a.hasSidebar, openSidebar = _a.openSidebar, _b = _a.sidebarOpen, sidebarOpen = _b === void 0 ? false : _b;
-    var _c = (0, react_1.useState)(false), isMobileMenuOpen = _c[0], setIsMobileMenuOpen = _c[1];
-    var _d = (0, react_1.useState)(false), isMobileScreen = _d[0], setIsMobileScreen = _d[1];
-    var pathname = (0, navigation_1.usePathname)(); // <-- New hook to detect path changes
+var componentUtils_1 = require("../../utils/componentUtils");
+var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
+// Parse string to object utility
+var parseIfString = function (value, fallback) {
+    if (typeof value === 'string') {
+        try {
+            var parsed = JSON.parse(value);
+            if (Array.isArray(fallback) && !Array.isArray(parsed)) {
+                console.warn('Parsed value is not an array, using fallback');
+                return fallback;
+            }
+            return parsed;
+        }
+        catch (error) {
+            console.error('Failed to parse JSON string:', error);
+            return fallback;
+        }
+    }
+    if (value == null) {
+        return fallback;
+    }
+    return value;
+};
+// Dropdown Arrow Icon Component
+var DropdownArrow = function (_a) {
+    var isOpen = _a.isOpen;
+    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", style: {
+            transition: 'transform 0.3s ease',
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
+        } },
+        React.createElement("path", { d: "M4 6 L8 10 L12 6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));
+};
+// Link Item Component with Dropdown Support
+var LinkItem = function (_a) {
+    var link = _a.link, renderLink = _a.renderLink, _b = _a.linkPadding, linkPadding = _b === void 0 ? '0.5rem 1rem' : _b, _c = _a.activeLinkColor, activeLinkColor = _c === void 0 ? 'primary' : _c, _d = _a.dropdownArrow, dropdownArrow = _d === void 0 ? true : _d, _e = _a.isMobile, isMobile = _e === void 0 ? false : _e;
+    var _f = (0, react_1.useState)(false), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = (0, react_1.useState)(null), iconNode = _g[0], setIconNode = _g[1];
+    var timeoutRef = (0, react_1.useRef)();
+    var dropdownRef = (0, react_1.useRef)(null);
+    // Handle dynamic icon loading
+    (0, react_1.useEffect)(function () {
+        if (link.icon) {
+            (0, getDynamicIcon_1.getDynamicIcon)(link.icon).then(setIconNode);
+        }
+        else {
+            setIconNode(null);
+        }
+    }, [link.icon]);
+    // Close dropdown when clicking outside
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    var hasChildren = link.children && link.children.length > 0;
+    var handleMouseEnter = function () {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (!isMobile && hasChildren) {
+            setIsOpen(true);
+        }
+    };
+    var handleMouseLeave = function () {
+        if (!isMobile) {
+            timeoutRef.current = setTimeout(function () { return setIsOpen(false); }, 150);
+        }
+    };
+    var handleClick = function (e) {
+        if (hasChildren && isMobile) {
+            e.preventDefault();
+            setIsOpen(!isOpen);
+        }
+    };
+    var linkContent = (React.createElement("span", { className: "nav_link-content ".concat(link.active ? 'active' : '', " ").concat(link.className || ''), style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            padding: linkPadding,
+            color: 'inherit',
+            textDecoration: 'none'
+        } },
+        iconNode && link.iconPosition !== 'suffix' && (React.createElement("span", { className: "nav_link-icon prefix", style: { display: 'flex', alignItems: 'center' } }, iconNode)),
+        React.createElement("span", { className: "nav_link-text" }, link.label),
+        iconNode && link.iconPosition === 'suffix' && (React.createElement("span", { className: "nav_link-icon suffix", style: { display: 'flex', alignItems: 'center' } }, iconNode)),
+        hasChildren && dropdownArrow && (React.createElement("span", { className: "nav_link-arrow", style: { display: 'flex', alignItems: 'center' } },
+            React.createElement(DropdownArrow, { isOpen: isOpen })))));
+    // If custom renderer is provided, use it
+    if (renderLink) {
+        return renderLink(link, 0);
+    }
+    return (React.createElement("div", { ref: dropdownRef, className: "nav_item ".concat(hasChildren ? 'has-dropdown' : '', " ").concat(isOpen ? 'dropdown-open' : ''), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { position: 'relative' } },
+        React.createElement("a", { href: link.href, className: "nav_link ".concat(link.active ? 'active' : ''), onClick: handleClick, style: {
+                textDecoration: 'none',
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center'
+            } }, linkContent),
+        hasChildren && isOpen && (React.createElement("div", { className: "nav_dropdown-menu ".concat(isMobile ? 'nav_dropdown-mobile' : '') }, link.children.map(function (child, index) { return (React.createElement(LinkItem, { key: index, link: child, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile })); })))));
+};
+// Links component to render navigation links
+var NavLinks = function (_a) {
+    var links = _a.links, renderLink = _a.renderLink, _b = _a.linkGap, linkGap = _b === void 0 ? '1rem' : _b, _c = _a.linkPadding, linkPadding = _c === void 0 ? '0.5rem 1rem' : _c, _d = _a.activeLinkColor, activeLinkColor = _d === void 0 ? 'primary' : _d, _e = _a.dropdownArrow, dropdownArrow = _e === void 0 ? true : _e, _f = _a.isMobile, isMobile = _f === void 0 ? false : _f;
+    if (!links || !Array.isArray(links) || links.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: "nav_links", style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: linkGap,
+            flexDirection: isMobile ? 'column' : 'row'
+        } }, links.map(function (link, index) { return (React.createElement(LinkItem, { key: index, link: link, renderLink: renderLink, linkPadding: linkPadding, activeLinkColor: activeLinkColor, dropdownArrow: dropdownArrow, isMobile: isMobile })); })));
+};
+// Logo component with multiple display options
+var Logo = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.text, text = _c === void 0 ? 'MyApp' : _c, _d = _a.textSize, textSize = _d === void 0 ? 'xl' : _d, _e = _a.textColor, textColor = _e === void 0 ? 'primary' : _e, _f = _a.textWeight, textWeight = _f === void 0 ? 'bold' : _f, _g = _a.url, url = _g === void 0 ? '' : _g, _h = _a.alt, alt = _h === void 0 ? 'Logo' : _h, _j = _a.width, width = _j === void 0 ? '40px' : _j, _k = _a.height, height = _k === void 0 ? 'auto' : _k, _l = _a.href, href = _l === void 0 ? '/' : _l, onClick = _a.onClick;
+    if (type === 'none')
+        return null;
+    var logoContent = (React.createElement("div", { className: "logo-content", style: { display: 'flex', alignItems: 'center', gap: '0.75rem' } },
+        (type === 'image' || type === 'both') && url && (React.createElement("img", { src: url, alt: alt, style: {
+                width: width,
+                height: height,
+                objectFit: 'contain',
+                display: 'block'
+            }, className: "logo-image" })),
+        (type === 'text' || type === 'both') && text && (React.createElement("span", { className: "logo-text text-".concat(textSize, " text-").concat(textColor, " font-").concat(textWeight), style: {
+                lineHeight: 1,
+                whiteSpace: 'nowrap'
+            } }, text))));
+    // Wrap in link if href provided
+    if (href) {
+        return (React.createElement("a", { href: href, onClick: onClick, style: {
+                textDecoration: 'none',
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center'
+            }, className: "logo-link" }, logoContent));
+    }
+    return (React.createElement("div", { onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' }, className: "logo-container" }, logoContent));
+};
+function AppBar(localProps) {
+    // Use component configuration with variant support
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('AppBar', localProps.variant).mergeWithLocal;
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Parse link props if they're strings
+    var parsedLeftLinks = parseIfString(mergedProps.leftLinks, []);
+    var parsedCenterLinks = parseIfString(mergedProps.centerLinks, []);
+    var parsedRightLinks = parseIfString(mergedProps.rightLinks, []);
+    // Use mergedProps directly
+    var final = mergedProps;
+    var _a = (0, react_1.useState)(false), isMobileMenuOpen = _a[0], setIsMobileMenuOpen = _a[1];
+    var _b = (0, react_1.useState)(false), isMobileScreen = _b[0], setIsMobileScreen = _b[1];
+    var pathname = (0, navigation_1.usePathname)();
     var toggleMenu = function () { return setIsMobileMenuOpen(function (prev) { return !prev; }); };
     var closeMenu = function () { return setIsMobileMenuOpen(false); };
     (0, react_1.useEffect)(function () {
         var handleResize = function () {
-            var isMobile = window.innerWidth < 992;
+            var isMobile = window.innerWidth < (final.mobileMenuBreakpoint || 992);
             setIsMobileScreen(isMobile);
             if (!isMobile) {
                 closeMenu(); // close on larger screens
@@ -60,7 +225,7 @@ function AppBar(_a) {
         handleResize(); // initial check
         window.addEventListener('resize', handleResize);
         return function () { return window.removeEventListener('resize', handleResize); };
-    }, []);
+    }, [final.mobileMenuBreakpoint]);
     // Automatically close menu on route (pathname) change
     (0, react_1.useEffect)(function () {
         closeMenu();
@@ -69,19 +234,56 @@ function AppBar(_a) {
         var isOpen = _a.isOpen;
         return React.createElement(Hamburger_1.default, { isOpen: isOpen });
     };
-    return (React.createElement("nav", { 
-        // the id will be used to get the height for the sidebar in the sidebar file
-        id: 'appBar', className: "navigation-bar\n        ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n        ").concat(funcss || '', "\n        ").concat(fixedTop ? 'fixed_top_navbar' : '', "\n        ").concat(sideBar ? 'there_is_sidebar' : '', "\n        ").concat(transparent ? 'transparent' : '', "\n        ").concat(fixedBottom ? 'fixedBottom' : '', "\n      "), style: {
-            padding: "".concat(padding || ''),
-            justifyContent: "".concat(justify || ''),
-        } },
-        React.createElement("div", { className: "logoWrapper" },
-            left,
-            isMobileScreen && isMobileMenuOpen && (React.createElement("div", { className: "hover-text-error pointer _closeNav", onClick: closeMenu },
-                React.createElement(Trigger, { isOpen: isMobileMenuOpen })))),
-        React.createElement("div", { className: "linkWrapper" }, center),
-        React.createElement("div", { className: "linkWrapper" }, right),
-        isMobileScreen && !isMobileMenuOpen && (React.createElement(React.Fragment, null, hasSidebar ?
-            React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: openSidebar }, sidebarTrigger || React.createElement(Trigger, { isOpen: sidebarOpen }))
-            : React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen }))))));
+    // Enhanced left section with logo customization
+    var renderLeftSection = function () {
+        // If custom left content is provided, use it (overrides everything)
+        if (final.left)
+            return final.left;
+        // Render logo based on configuration
+        var shouldRenderLogo = final.logoType && final.logoType !== 'none';
+        var hasLeftLinks = parsedLeftLinks.length > 0;
+        return (React.createElement("div", { className: "left-section", style: { display: 'flex', alignItems: 'center', gap: '2rem' } },
+            shouldRenderLogo && (React.createElement(Logo, { type: final.logoType, text: final.logoText, textSize: final.logoTextSize, textColor: final.logoTextColor, textWeight: final.logoTextWeight, url: final.logoUrl, alt: final.logoAlt, width: final.logoWidth, height: final.logoHeight, href: final.logoHref, onClick: final.onLogoClick })),
+            hasLeftLinks && !isMobileScreen && (React.createElement(NavLinks, { links: parsedLeftLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }))));
+    };
+    var renderCenterSection = function () {
+        if (final.center)
+            return final.center;
+        if (parsedCenterLinks.length > 0 && !isMobileScreen) {
+            return (React.createElement(NavLinks, { links: parsedCenterLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }));
+        }
+        return null;
+    };
+    var renderRightSection = function () {
+        if (final.right)
+            return final.right;
+        if (parsedRightLinks.length > 0 && !isMobileScreen) {
+            return (React.createElement(NavLinks, { links: parsedRightLinks, renderLink: final.renderLink, linkGap: final.linkGap, linkPadding: final.linkPadding, activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow }));
+        }
+        return null;
+    };
+    // Mobile menu content
+    var renderMobileMenu = function () {
+        if (!isMobileScreen || !isMobileMenuOpen)
+            return null;
+        var allLinks = __spreadArray(__spreadArray(__spreadArray([], parsedLeftLinks, true), parsedCenterLinks, true), parsedRightLinks, true);
+        return (React.createElement("div", { className: "nav_mobile-menu" },
+            React.createElement(NavLinks, { links: allLinks, renderLink: final.renderLink, linkGap: "0.5rem", linkPadding: "1rem", activeLinkColor: final.activeLinkColor, dropdownArrow: final.dropdownArrow, isMobile: true })));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("nav", { id: 'appBar', className: "navigation-bar\n          ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n          ").concat(final.funcss || '', "\n          ").concat(final.fixedTop ? 'fixed_top_navbar' : '', "\n          ").concat(final.sideBar ? 'there_is_sidebar' : '', "\n          ").concat(final.transparent ? 'transparent' : '', "\n          ").concat(final.fixedBottom ? 'fixedBottom' : '', "\n        "), style: {
+                padding: "".concat(final.padding || ''),
+                justifyContent: "".concat(final.justify || ''),
+            } },
+            React.createElement("div", { className: "logoWrapper" },
+                renderLeftSection(),
+                isMobileScreen && isMobileMenuOpen && (React.createElement("div", { className: "hover-text-error pointer _closeNav", onClick: closeMenu },
+                    React.createElement(Trigger, { isOpen: isMobileMenuOpen })))),
+            React.createElement("div", { className: "linkWrapper" }, renderCenterSection()),
+            React.createElement("div", { className: "linkWrapper" }, renderRightSection()),
+            isMobileScreen && !isMobileMenuOpen && (React.createElement(React.Fragment, null, final.hasSidebar ?
+                React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: final.openSidebar }, final.sidebarTrigger || React.createElement(Trigger, { isOpen: final.sidebarOpen }))
+                :
+                    React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, final.sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen }))))),
+        renderMobileMenu()));
 }

package/ui/chart/Bar.js

@@ -155,113 +155,17 @@ var CustomTooltip = function (_a) {
             react_1.default.createElement("div", { className: "text-error" }, "Error displaying tooltip")));
     }
 };
-var Bars = function (_a) {
-    var _b, _c;
-    var data = _a.data, series = _a.series, id = _a.id, _d = _a.variant, variant = _d === void 0 ? '' : _d, 
-    // Layout & Dimensions
-    _e = _a.width, 
-    // Layout & Dimensions
-    width = _e === void 0 ? '100%' : _e, _f = _a.height, height = _f === void 0 ? 300 : _f, _g = _a.layout, layout = _g === void 0 ? 'horizontal' : _g, _h = _a.margin, margin = _h === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _h, 
-    // Bar styling
-    _j = _a.barRadius, 
-    // Bar styling
-    barRadius = _j === void 0 ? 6 : _j, _k = _a.barSize, barSize = _k === void 0 ? 30 : _k, _l = _a.barGap, barGap = _l === void 0 ? 4 : _l, _m = _a.barCategoryGap, barCategoryGap = _m === void 0 ? '10%' : _m, _o = _a.maxBarSize, maxBarSize = _o === void 0 ? 100 : _o, 
-    // Display controls
-    _p = _a.showGrid, 
-    // Display controls
-    showGrid = _p === void 0 ? true : _p, _q = _a.horizontalLines, horizontalLines = _q === void 0 ? false : _q, _r = _a.verticalLines, verticalLines = _r === void 0 ? true : _r, _s = _a.showLegend, showLegend = _s === void 0 ? true : _s, _t = _a.showXAxis, showXAxis = _t === void 0 ? true : _t, _u = _a.showYAxis, showYAxis = _u === void 0 ? false : _u, _v = _a.showTooltip, showTooltip = _v === void 0 ? true : _v, 
-    // Appearance controls
-    funcss = _a.funcss, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval, gridStroke = _a.gridStroke, _w = _a.gridStrokeDasharray, gridStrokeDasharray = _w === void 0 ? "3 3" : _w, 
-    // Axis controls
-    dy = _a.dy, _x = _a.xAxisProps, xAxisProps = _x === void 0 ? {} : _x, _y = _a.yAxisProps, yAxisProps = _y === void 0 ? {} : _y, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _z = _a.tickLine, tickLine = _z === void 0 ? true : _z, _0 = _a.axisLine, axisLine = _0 === void 0 ? true : _0, 
-    // Tooltip / Legend
-    tooltipFormatter = _a.tooltipFormatter, _1 = _a.legendProps, legendProps = _1 === void 0 ? {} : _1, _2 = _a.tooltipProps, tooltipProps = _2 === void 0 ? {} : _2, customTooltip = _a.customTooltip, 
-    // Animation & Interaction
-    _3 = _a.animation, 
-    // Animation & Interaction
-    animation = _3 === void 0 ? true : _3, _4 = _a.animationDuration, animationDuration = _4 === void 0 ? 500 : _4, _5 = _a.isAnimationActive, isAnimationActive = _5 === void 0 ? true : _5, syncId = _a.syncId, 
-    // Stacking & Grouping
-    _6 = _a.stackOffset, 
-    // Stacking & Grouping
-    stackOffset = _6 === void 0 ? 'none' : _6, barCategoryGapPercentage = _a.barCategoryGapPercentage, 
-    // Styling
-    chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _7 = _a.shadow, shadow = _7 === void 0 ? false : _7, 
-    // Responsive
-    aspect = _a.aspect, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth, 
-    // Advanced
-    onBarClick = _a.onBarClick, onBarMouseEnter = _a.onBarMouseEnter, onBarMouseLeave = _a.onBarMouseLeave;
-    // Use component configuration with variant support and error handling
-    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('BarChart', variant).mergeWithLocal;
-    // Create local props object with null checks
-    var localProps = {
-        data: data !== null && data !== void 0 ? data : [],
-        series: series !== null && series !== void 0 ? series : [],
-        id: id !== null && id !== void 0 ? id : '',
-        variant: variant !== null && variant !== void 0 ? variant : '',
-        width: width !== null && width !== void 0 ? width : '100%',
-        height: height !== null && height !== void 0 ? height : 300,
-        layout: layout !== null && layout !== void 0 ? layout : 'horizontal',
-        margin: margin !== null && margin !== void 0 ? margin : { top: 10, right: 30, left: 0, bottom: 20 },
-        barRadius: barRadius !== null && barRadius !== void 0 ? barRadius : 6,
-        barSize: barSize !== null && barSize !== void 0 ? barSize : 30,
-        barGap: barGap !== null && barGap !== void 0 ? barGap : 4,
-        barCategoryGap: barCategoryGap !== null && barCategoryGap !== void 0 ? barCategoryGap : '10%',
-        maxBarSize: maxBarSize !== null && maxBarSize !== void 0 ? maxBarSize : 100,
-        showGrid: showGrid !== null && showGrid !== void 0 ? showGrid : true,
-        horizontalLines: horizontalLines !== null && horizontalLines !== void 0 ? horizontalLines : false,
-        verticalLines: verticalLines !== null && verticalLines !== void 0 ? verticalLines : true,
-        showLegend: showLegend !== null && showLegend !== void 0 ? showLegend : true,
-        showXAxis: showXAxis !== null && showXAxis !== void 0 ? showXAxis : true,
-        showYAxis: showYAxis !== null && showYAxis !== void 0 ? showYAxis : false,
-        showTooltip: showTooltip !== null && showTooltip !== void 0 ? showTooltip : true,
-        funcss: funcss !== null && funcss !== void 0 ? funcss : '',
-        rotateLabel: rotateLabel !== null && rotateLabel !== void 0 ? rotateLabel : 0,
-        xLabelSize: xLabelSize !== null && xLabelSize !== void 0 ? xLabelSize : "0.8rem",
-        yLabelSize: yLabelSize !== null && yLabelSize !== void 0 ? yLabelSize : "0.8rem",
-        xInterval: xInterval !== null && xInterval !== void 0 ? xInterval : undefined,
-        yInterval: yInterval !== null && yInterval !== void 0 ? yInterval : undefined,
-        gridStroke: gridStroke !== null && gridStroke !== void 0 ? gridStroke : '',
-        gridStrokeDasharray: gridStrokeDasharray !== null && gridStrokeDasharray !== void 0 ? gridStrokeDasharray : "3 3",
-        dy: dy !== null && dy !== void 0 ? dy : 0,
-        xAxisProps: xAxisProps !== null && xAxisProps !== void 0 ? xAxisProps : {},
-        yAxisProps: yAxisProps !== null && yAxisProps !== void 0 ? yAxisProps : {},
-        xAxisLabel: xAxisLabel !== null && xAxisLabel !== void 0 ? xAxisLabel : '',
-        yAxisLabel: yAxisLabel !== null && yAxisLabel !== void 0 ? yAxisLabel : '',
-        tickLine: tickLine !== null && tickLine !== void 0 ? tickLine : true,
-        axisLine: axisLine !== null && axisLine !== void 0 ? axisLine : true,
-        tooltipFormatter: tooltipFormatter !== null && tooltipFormatter !== void 0 ? tooltipFormatter : undefined,
-        legendProps: legendProps !== null && legendProps !== void 0 ? legendProps : {},
-        tooltipProps: tooltipProps !== null && tooltipProps !== void 0 ? tooltipProps : {},
-        customTooltip: customTooltip !== null && customTooltip !== void 0 ? customTooltip : undefined,
-        animation: animation !== null && animation !== void 0 ? animation : true,
-        animationDuration: animationDuration !== null && animationDuration !== void 0 ? animationDuration : 500,
-        isAnimationActive: isAnimationActive !== null && isAnimationActive !== void 0 ? isAnimationActive : true,
-        syncId: syncId !== null && syncId !== void 0 ? syncId : '',
-        stackOffset: stackOffset !== null && stackOffset !== void 0 ? stackOffset : 'none',
-        barCategoryGapPercentage: barCategoryGapPercentage !== null && barCategoryGapPercentage !== void 0 ? barCategoryGapPercentage : undefined,
-        chartBackground: chartBackground !== null && chartBackground !== void 0 ? chartBackground : '',
-        borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : '',
-        padding: padding !== null && padding !== void 0 ? padding : '',
-        shadow: shadow !== null && shadow !== void 0 ? shadow : false,
-        aspect: aspect !== null && aspect !== void 0 ? aspect : undefined,
-        minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : undefined,
-        maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
-        minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : undefined,
-        maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : undefined,
-        onBarClick: onBarClick !== null && onBarClick !== void 0 ? onBarClick : undefined,
-        onBarMouseEnter: onBarMouseEnter !== null && onBarMouseEnter !== void 0 ? onBarMouseEnter : undefined,
-        onBarMouseLeave: onBarMouseLeave !== null && onBarMouseLeave !== void 0 ? onBarMouseLeave : undefined
-    };
-    // Merge with config - LOCAL PROPS OVERRIDE CONFIG with error handling
-    var mergedProps;
-    try {
-        var result = mergeWithLocal(localProps);
-        mergedProps = (_b = result === null || result === void 0 ? void 0 : result.props) !== null && _b !== void 0 ? _b : localProps;
-    }
-    catch (error) {
-        console.error('Error merging component configuration:', error);
-        mergedProps = localProps;
-    }
+var Bars = function (localProps) {
+    var _a;
+    // Use component configuration with variant support
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Bar', localProps.variant).mergeWithLocal;
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Debug: Log what props are actually coming through
+    react_1.default.useEffect(function () {
+        console.log('Bars merged props:', mergedProps);
+        console.log('Bars config available:', Object.keys(mergedProps).length > 0);
+    }, [mergedProps]);
     // Parse data and series if they're strings with enhanced validation
     var parsedData = (0, react_1.useMemo)(function () {
         var parsed = parseIfString(mergedProps.data, []);
@@ -276,66 +180,8 @@ var Bars = function (_a) {
     // Check if we have valid data to display
     var hasValidData = parsedData.length > 0 && parsedSeries.length > 0;
     var isVertical = mergedProps.layout === 'vertical';
-    // Extract final values with fallbacks
-    var final = (0, react_1.useMemo)(function () { return ({
-        data: parsedData,
-        series: parsedSeries,
-        id: mergedProps.id || 'bar-chart',
-        variant: mergedProps.variant,
-        width: mergedProps.width,
-        height: mergedProps.height,
-        layout: mergedProps.layout,
-        margin: mergedProps.margin,
-        barRadius: mergedProps.barRadius,
-        barSize: mergedProps.barSize,
-        barGap: mergedProps.barGap,
-        barCategoryGap: mergedProps.barCategoryGap,
-        maxBarSize: mergedProps.maxBarSize,
-        showGrid: mergedProps.showGrid,
-        horizontalLines: mergedProps.horizontalLines,
-        verticalLines: mergedProps.verticalLines,
-        showLegend: mergedProps.showLegend,
-        showXAxis: mergedProps.showXAxis,
-        showYAxis: mergedProps.showYAxis,
-        showTooltip: mergedProps.showTooltip,
-        funcss: mergedProps.funcss,
-        rotateLabel: mergedProps.rotateLabel,
-        xLabelSize: mergedProps.xLabelSize,
-        yLabelSize: mergedProps.yLabelSize,
-        xInterval: mergedProps.xInterval,
-        yInterval: mergedProps.yInterval,
-        gridStroke: mergedProps.gridStroke,
-        gridStrokeDasharray: mergedProps.gridStrokeDasharray,
-        dy: mergedProps.dy,
-        xAxisProps: mergedProps.xAxisProps,
-        yAxisProps: mergedProps.yAxisProps,
-        xAxisLabel: mergedProps.xAxisLabel,
-        yAxisLabel: mergedProps.yAxisLabel,
-        tickLine: mergedProps.tickLine,
-        axisLine: mergedProps.axisLine,
-        tooltipFormatter: mergedProps.tooltipFormatter,
-        legendProps: mergedProps.legendProps,
-        tooltipProps: mergedProps.tooltipProps,
-        customTooltip: mergedProps.customTooltip,
-        animation: mergedProps.animation,
-        animationDuration: mergedProps.animationDuration,
-        isAnimationActive: mergedProps.isAnimationActive,
-        syncId: mergedProps.syncId,
-        stackOffset: mergedProps.stackOffset,
-        barCategoryGapPercentage: mergedProps.barCategoryGapPercentage,
-        chartBackground: mergedProps.chartBackground,
-        borderRadius: mergedProps.borderRadius,
-        padding: mergedProps.padding,
-        shadow: mergedProps.shadow,
-        aspect: mergedProps.aspect,
-        minHeight: mergedProps.minHeight,
-        maxHeight: mergedProps.maxHeight,
-        minWidth: mergedProps.minWidth,
-        maxWidth: mergedProps.maxWidth,
-        onBarClick: mergedProps.onBarClick,
-        onBarMouseEnter: mergedProps.onBarMouseEnter,
-        onBarMouseLeave: mergedProps.onBarMouseLeave
-    }); }, [parsedData, parsedSeries, mergedProps, hasValidData]);
+    // Use mergedProps directly - no need for complex fallback logic
+    var final = mergedProps;
     // Smart default margins based on layout
     var smartMargin = (0, react_1.useMemo)(function () {
         var baseMargin = { top: 10, right: 30, left: 0, bottom: 20 };
@@ -384,9 +230,9 @@ var Bars = function (_a) {
                 react_1.default.createElement("div", null, "No chart data available"))));
     }
     return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: final.width, height: smartHeight, aspect: final.aspect, className: final.funcss, style: containerStyle },
-        react_1.default.createElement(recharts_1.BarChart, { data: final.data, layout: final.layout, margin: smartMargin, barGap: final.barGap, barCategoryGap: final.barCategoryGap, stackOffset: final.stackOffset, syncId: final.syncId },
+        react_1.default.createElement(recharts_1.BarChart, { data: parsedData, layout: final.layout, margin: smartMargin, barGap: final.barGap, barCategoryGap: final.barCategoryGap, stackOffset: final.stackOffset, syncId: final.syncId },
             final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0', horizontal: final.horizontalLines !== false, vertical: final.verticalLines !== false })),
-            final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: isVertical ? 'number' : 'category', dataKey: isVertical ? undefined : 'label', interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize, strokeWidth: 0.2, angle: final.rotateLabel || (isVertical ? 0 : -35), dy: (_c = final.dy) !== null && _c !== void 0 ? _c : (isVertical ? 0 : 10), tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? {
+            final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: isVertical ? 'number' : 'category', dataKey: isVertical ? undefined : 'label', interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize, strokeWidth: 0.2, angle: final.rotateLabel || (isVertical ? 0 : -35), dy: (_a = final.dy) !== null && _a !== void 0 ? _a : (isVertical ? 0 : 10), tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? {
                     value: final.xAxisLabel,
                     position: isVertical ? 'insideBottom' : 'insideBottom',
                     offset: isVertical ? -10 : -30
@@ -398,7 +244,7 @@ var Bars = function (_a) {
                 } : undefined }, final.yAxisProps))),
             final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
             final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
-            final.series.map(function (s, index) {
+            parsedSeries.map(function (s, index) {
                 if (!s || !s.dataKey) {
                     console.warn('Invalid series configuration at index:', index);
                     return null;