funuicss 3.7.0 → 3.7.2

package/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.View = exports.ScrollInView = exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.SearchableInput = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
-exports.GoogleAnalytics = exports.FunGet = exports.useVariable = exports.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
+exports.GoogleAnalytics = exports.FunGet = exports.useVariables = exports.useAssets = exports.useAssetValue = exports.useAssetType = exports.useAsset = exports.useVariable = exports.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
 var Alert_1 = require("./ui/alert/Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 var theme_1 = require("./ui/theme/theme");
@@ -124,6 +124,11 @@ var Cookie_1 = require("./js/Cookie");
 Object.defineProperty(exports, "Cookie", { enumerable: true, get: function () { return __importDefault(Cookie_1).default; } });
 var theme_2 = require("./ui/theme/theme");
 Object.defineProperty(exports, "useVariable", { enumerable: true, get: function () { return theme_2.useVariable; } });
+Object.defineProperty(exports, "useAsset", { enumerable: true, get: function () { return theme_2.useAsset; } });
+Object.defineProperty(exports, "useAssetType", { enumerable: true, get: function () { return theme_2.useAssetType; } });
+Object.defineProperty(exports, "useAssetValue", { enumerable: true, get: function () { return theme_2.useAssetValue; } });
+Object.defineProperty(exports, "useAssets", { enumerable: true, get: function () { return theme_2.useAssets; } });
+Object.defineProperty(exports, "useVariables", { enumerable: true, get: function () { return theme_2.useVariables; } });
 var Fun_1 = require("./js/Fun");
 Object.defineProperty(exports, "FunGet", { enumerable: true, get: function () { return Fun_1.FunGet; } });
 var analytics_1 = require("./js/google/analytics");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.0",
+  "version": "3.7.2",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/calendar/Calendar.js

@@ -175,7 +175,7 @@ var Calendar = function (_a) {
                             var year = (0, dayjs_1.default)().year() - 10 + i;
                             return { value: year.toString(), text: year.toString() };
                         }), borderless: true, funcss: "round-edge" })),
-                react_1.default.createElement(Dropdown_1.default, { direction: "dropdown", position: 'right', openOnHover: false, button: react_1.default.createElement(Avatar_1.default, null,
+                react_1.default.createElement(Dropdown_1.default, { position: "bottom", openOnHover: false, button: react_1.default.createElement(Avatar_1.default, null,
                         react_1.default.createElement(hi_1.HiOutlineDotsVertical, null)), items: [
                         {
                             label: react_1.default.createElement("span", { className: "text-sm" }, "Today"),

package/ui/chart/Bar.d.ts

@@ -7,37 +7,123 @@ type ChartSeries = {
     dataKey: string;
     label?: string;
     color?: string;
+    strokeWidth?: number;
+    stroke?: string;
+    fillOpacity?: number;
+    radius?: number | [number, number, number, number];
+    barSize?: number;
+    activeBar?: boolean | Record<string, any>;
+    stackId?: string;
+    background?: boolean | Record<string, any>;
+    minPointSize?: number;
+    maxBarSize?: number;
 };
+interface XAxisProps {
+    interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
+    tick?: boolean | Record<string, any>;
+    tickFormatter?: (value: any) => string;
+    domain?: [number | string | 'auto' | 'dataMin' | 'dataMax', number | string | 'auto' | 'dataMin' | 'dataMax'];
+    type?: 'number' | 'category';
+    allowDataOverflow?: boolean;
+    scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
+    padding?: {
+        left?: number;
+        right?: number;
+    };
+}
+interface YAxisProps {
+    interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
+    tick?: boolean | Record<string, any>;
+    tickFormatter?: (value: any) => string;
+    domain?: [number | string | 'auto' | 'dataMin' | 'dataMax', number | string | 'auto' | 'dataMin' | 'dataMax'];
+    type?: 'number' | 'category';
+    allowDataOverflow?: boolean;
+    scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
+    padding?: {
+        top?: number;
+        bottom?: number;
+    };
+}
+interface LegendProps {
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    layout?: 'horizontal' | 'vertical';
+    iconType?: 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye';
+    wrapperStyle?: Record<string, any>;
+}
+interface TooltipProps {
+    cursor?: boolean | Record<string, any>;
+    separator?: string;
+    offset?: number;
+    allowEscapeViewBox?: {
+        x?: boolean;
+        y?: boolean;
+    };
+    wrapperStyle?: Record<string, any>;
+}
 interface BarsProps {
-    data: DataItem[];
-    series: ChartSeries[];
+    data: DataItem[] | string;
+    series: ChartSeries[] | string;
+    id?: string;
+    variant?: string;
     width?: number | string;
     height?: number | string;
     layout?: 'horizontal' | 'vertical';
     margin?: {
         top?: number;
         right?: number;
-        bottom?: number;
         left?: number;
+        bottom?: number;
     };
-    barRadius?: number;
+    barRadius?: number | [number, number, number, number];
     barSize?: number;
     barGap?: number | string;
     barCategoryGap?: number | string;
+    maxBarSize?: number;
+    showGrid?: boolean;
+    horizontalLines?: boolean;
+    verticalLines?: boolean;
+    showLegend?: boolean;
     showXAxis?: boolean;
     showYAxis?: boolean;
-    xAxisProps?: any;
-    yAxisProps?: any;
+    showTooltip?: boolean;
+    funcss?: string;
+    rotateLabel?: number;
+    xLabelSize?: string | number;
+    yLabelSize?: string | number;
     xInterval?: number;
     yInterval?: number;
-    showGrid?: boolean;
-    gridProps?: any;
-    showTooltip?: boolean;
+    gridStroke?: string;
+    gridStrokeDasharray?: string;
+    dy?: number;
+    xAxisProps?: XAxisProps;
+    yAxisProps?: YAxisProps;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    tickLine?: boolean;
+    axisLine?: boolean;
     tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
-    showLegend?: boolean;
-    legendProps?: any;
+    legendProps?: LegendProps;
+    tooltipProps?: TooltipProps;
+    customTooltip?: React.ComponentType<any>;
+    animation?: boolean;
+    animationDuration?: number;
     isAnimationActive?: boolean;
-    funcss?: string;
+    syncId?: string;
+    stackOffset?: 'expand' | 'none' | 'wiggle' | 'silhouette' | 'sign';
+    barCategoryGapPercentage?: number;
+    chartBackground?: string;
+    borderRadius?: string;
+    padding?: string;
+    shadow?: boolean;
+    aspect?: number;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    onBarClick?: (data: any, index: number, event: React.MouseEvent) => void;
+    onBarMouseEnter?: (data: any, index: number, event: React.MouseEvent) => void;
+    onBarMouseLeave?: (data: any, index: number, event: React.MouseEvent) => void;
 }
 declare const Bars: React.FC<BarsProps>;
 export default Bars;

package/ui/chart/Bar.js

@@ -11,63 +11,410 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
+var componentUtils_1 = require("../../utils/componentUtils");
+// Parse string to object utility with enhanced error handling
+var parseIfString = function (value, fallback) {
+    if (typeof value === 'string') {
+        try {
+            var parsed = JSON.parse(value);
+            // Additional validation for arrays
+            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;
+        }
+    }
+    // Handle null/undefined values
+    if (value == null) {
+        return fallback;
+    }
+    return value;
+};
+// Safe array access utility
+var getSafeArray = function (value, fallback) {
+    if (fallback === void 0) { fallback = []; }
+    if (!value || !Array.isArray(value))
+        return fallback;
+    return value;
+};
+// CSS var resolver with error handling
 var getCssVar = function (varName) {
     var _a;
     if (typeof window === 'undefined')
         return '';
-    return ((_a = getComputedStyle(document.documentElement).getPropertyValue(varName)) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    try {
+        return ((_a = getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    }
+    catch (error) {
+        console.warn("Failed to get CSS variable --".concat(varName, ":"), error);
+        return '';
+    }
 };
+// Color resolver with fallbacks
 var resolveColor = function (color) {
     if (!color)
-        return getCssVar('--primary') || '#8884d8';
+        return getCssVar('primary') || '#8884d8';
     if (color.startsWith('#'))
         return color;
-    return getCssVar("--".concat(color)) || color;
+    var cssColor = getCssVar(color);
+    if (cssColor)
+        return cssColor;
+    // Fallback to common color names if CSS var not found
+    var colorMap = {
+        primary: '#8884d8',
+        secondary: '#82ca9d',
+        error: '#ff4d4f',
+        warning: '#faad14',
+        success: '#52c41a',
+        info: '#1890ff'
+    };
+    return colorMap[color] || color || '#8884d8';
 };
+// Default Tooltip with error handling
 var CustomTooltip = function (_a) {
-    var active = _a.active, payload = _a.payload, label = _a.label;
-    if (active && payload && payload.length) {
-        return (react_1.default.createElement("div", { className: "dark raised round-edge p-2 text-sm" },
-            react_1.default.createElement("div", { className: "text-bold" }, label),
-            payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index },
-                entry.name,
-                ": ",
-                react_1.default.createElement("span", { className: "font-semibold" }, entry.value))); })));
+    var active = _a.active, payload = _a.payload, label = _a.label, formatter = _a.formatter;
+    if (!active || !payload || !Array.isArray(payload) || payload.length === 0) {
+        return null;
+    }
+    try {
+        return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm", style: {
+                maxWidth: '300px',
+                backgroundColor: 'var(--background, #fff)',
+                border: '1px solid var(--border-color, #e2e8f0)'
+            } },
+            react_1.default.createElement("div", { className: "text-bold mb-1", style: { color: 'var(--text-color, #1a202c)' } }, label || 'N/A'),
+            payload.map(function (entry, index) {
+                if (!entry)
+                    return null;
+                var value = formatter ? formatter(entry.value, entry.name, entry) : entry.value;
+                var displayValue = value != null ? value : 'N/A';
+                var displayName = entry.name || 'Unknown';
+                var displayColor = entry.color || entry.fill || '#8884d8';
+                return (react_1.default.createElement("div", { key: index, style: {
+                        lineHeight: 1.4,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px'
+                    } },
+                    react_1.default.createElement("div", { style: {
+                            width: '12px',
+                            height: '12px',
+                            backgroundColor: displayColor,
+                            borderRadius: '2px'
+                        } }),
+                    react_1.default.createElement("span", { style: { fontWeight: 500, color: 'var(--text-color, #1a202c)' } },
+                        displayName,
+                        ":"),
+                    react_1.default.createElement("span", { style: { fontWeight: 600, color: 'var(--text-color, #1a202c)' } }, displayValue)));
+            })));
+    }
+    catch (error) {
+        console.error('Error rendering tooltip:', error);
+        return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm" },
+            react_1.default.createElement("div", { className: "text-error" }, "Error displaying tooltip")));
     }
-    return null;
 };
 var Bars = function (_a) {
-    var data = _a.data, series = _a.series, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, _c = _a.layout, layout = _c === void 0 ? 'horizontal' : _c, _d = _a.margin, margin = _d === void 0 ? {} : _d, _e = _a.barRadius, barRadius = _e === void 0 ? 6 : _e, _f = _a.barSize, barSize = _f === void 0 ? 30 : _f, _g = _a.barGap, barGap = _g === void 0 ? 4 : _g, _h = _a.barCategoryGap, barCategoryGap = _h === void 0 ? '10%' : _h, _j = _a.showXAxis, showXAxis = _j === void 0 ? true : _j, _k = _a.showYAxis, showYAxis = _k === void 0 ? true : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, _o = _a.xInterval, xInterval = _o === void 0 ? 0 : _o, _p = _a.yInterval, yInterval = _p === void 0 ? 0 : _p, _q = _a.showGrid, showGrid = _q === void 0 ? true : _q, _r = _a.gridProps, gridProps = _r === void 0 ? {} : _r, _s = _a.showTooltip, showTooltip = _s === void 0 ? true : _s, tooltipFormatter = _a.tooltipFormatter, _t = _a.showLegend, showLegend = _t === void 0 ? true : _t, _u = _a.legendProps, legendProps = _u === void 0 ? {} : _u, _v = _a.isAnimationActive, isAnimationActive = _v === void 0 ? true : _v, funcss = _a.funcss;
-    var isVertical = layout === 'vertical';
-    // Smart default margins
-    var defaultMargin = {
-        top: 20,
-        right: 30,
-        bottom: isVertical ? 30 : 50,
-        left: isVertical ? 100 : 40,
+    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
     };
-    var mergedMargin = __assign(__assign({}, defaultMargin), margin);
+    // 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;
+    }
+    // Parse data and series if they're strings with enhanced validation
+    var parsedData = (0, react_1.useMemo)(function () {
+        var parsed = parseIfString(mergedProps.data, []);
+        return getSafeArray(parsed);
+    }, [mergedProps.data]);
+    var parsedSeries = (0, react_1.useMemo)(function () {
+        var parsed = parseIfString(mergedProps.series, []);
+        return getSafeArray(parsed).filter(function (series) {
+            return series && typeof series === 'object' && series.dataKey;
+        });
+    }, [mergedProps.series]);
+    // 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]);
+    // Smart default margins based on layout
+    var smartMargin = (0, react_1.useMemo)(function () {
+        var baseMargin = { top: 10, right: 30, left: 0, bottom: 20 };
+        if (isVertical) {
+            return __assign(__assign(__assign({}, baseMargin), { left: 60, bottom: final.xAxisLabel ? 40 : 20 }), final.margin);
+        }
+        return __assign(__assign(__assign({}, baseMargin), { bottom: final.xAxisLabel ? 50 : 20 }), final.margin);
+    }, [isVertical, final.margin, final.xAxisLabel]);
     // Smart height for vertical layout based on data length
-    var autoHeight = isVertical ? Math.max(300, data.length * 45) : 300;
-    var resolvedHeight = height || autoHeight;
-    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { className: funcss || '', width: width, height: resolvedHeight },
-        react_1.default.createElement(recharts_1.BarChart, { data: data, layout: layout, margin: mergedMargin, barGap: barGap, barCategoryGap: barCategoryGap },
-            showGrid && react_1.default.createElement(recharts_1.CartesianGrid, __assign({ strokeDasharray: "3 3" }, gridProps)),
-            isVertical ? (react_1.default.createElement(react_1.default.Fragment, null,
-                showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ type: "category", dataKey: "label", interval: 0, tick: __assign({ angle: 0, fontSize: 12, textAnchor: 'start', dx: -5, dy: 4, fill: '#555' }, (yAxisProps.tick || {})), tickMargin: 10 }, yAxisProps))),
-                showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: "number", interval: xInterval, tick: { fontSize: 12 } }, xAxisProps))))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: "category", dataKey: "label", interval: 0, tick: __assign({ fontSize: 12, angle: 0, fill: '#555' }, xAxisProps.tick), tickMargin: 8 }, xAxisProps))),
-                showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ type: "number", interval: yInterval, tick: { fontSize: 12 } }, yAxisProps))))),
-            showTooltip && (react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter })),
-            showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
-            series.map(function (s) { return (react_1.default.createElement(recharts_1.Bar, { key: s.dataKey, dataKey: s.dataKey, name: s.label || s.dataKey, fill: resolveColor(s.color), radius: layout === 'horizontal'
-                    ? [barRadius, barRadius, 0, 0]
-                    : [0, barRadius, barRadius, 0], barSize: barSize, isAnimationActive: isAnimationActive })); }))));
+    var smartHeight = (0, react_1.useMemo)(function () {
+        if (final.height !== 300)
+            return final.height;
+        if (isVertical) {
+            return Math.max(300, parsedData.length * 45);
+        }
+        return final.height;
+    }, [final.height, isVertical, parsedData.length]);
+    var TooltipComponent = final.customTooltip || CustomTooltip;
+    var containerStyle = (0, react_1.useMemo)(function () { return ({
+        height: smartHeight,
+        width: final.width,
+        minHeight: final.minHeight,
+        maxHeight: final.maxHeight,
+        minWidth: final.minWidth,
+        maxWidth: final.maxWidth,
+        background: final.chartBackground,
+        borderRadius: final.borderRadius,
+        padding: final.padding,
+        boxShadow: final.shadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)' : undefined,
+    }); }, [smartHeight, final]);
+    // Handle bar radius based on layout
+    var getBarRadius = function (seriesRadius) {
+        if (seriesRadius !== undefined) {
+            return Array.isArray(seriesRadius) ? seriesRadius : [seriesRadius, seriesRadius, seriesRadius, seriesRadius];
+        }
+        if (isVertical) {
+            return [0, final.barRadius, final.barRadius, 0];
+        }
+        return [final.barRadius, final.barRadius, 0, 0];
+    };
+    // Show empty state if no data
+    if (!hasValidData) {
+        return (react_1.default.createElement("div", { className: "flex items-center justify-center ".concat(final.funcss), style: containerStyle },
+            react_1.default.createElement("div", { className: "text-center text-muted" },
+                react_1.default.createElement("div", { className: "text-lg mb-2" }, "\uD83D\uDCCA"),
+                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 },
+            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 ? {
+                    value: final.xAxisLabel,
+                    position: isVertical ? 'insideBottom' : 'insideBottom',
+                    offset: isVertical ? -10 : -30
+                } : undefined }, final.xAxisProps))),
+            final.showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ type: isVertical ? 'category' : 'number', dataKey: isVertical ? 'label' : undefined, interval: final.yInterval, strokeWidth: 0.2, fontSize: final.yLabelSize, tickLine: final.tickLine, axisLine: final.axisLine, label: final.yAxisLabel ? {
+                    value: final.yAxisLabel,
+                    angle: isVertical ? 0 : -90,
+                    position: isVertical ? 'insideLeft' : 'insideLeft'
+                } : 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) {
+                if (!s || !s.dataKey) {
+                    console.warn('Invalid series configuration at index:', index);
+                    return null;
+                }
+                try {
+                    return (react_1.default.createElement(recharts_1.Bar, { key: s.dataKey || "series-".concat(index), dataKey: s.dataKey, name: s.label || s.dataKey, fill: resolveColor(s.color), stroke: s.stroke ? resolveColor(s.stroke) : undefined, strokeWidth: s.strokeWidth || 0, fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.8, barSize: s.barSize || final.barSize, maxBarSize: s.maxBarSize || final.maxBarSize, stackId: s.stackId, background: s.background || false, minPointSize: s.minPointSize, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration, onClick: final.onBarClick, onMouseEnter: final.onBarMouseEnter, onMouseLeave: final.onBarMouseLeave, activeBar: s.activeBar !== false ? (typeof s.activeBar === 'object' ? s.activeBar : {
+                            fill: resolveColor(s.color),
+                            stroke: resolveColor(s.stroke),
+                            strokeWidth: 2,
+                            fillOpacity: 1
+                        }) : false }));
+                }
+                catch (error) {
+                    console.error('Error rendering bar series:', error);
+                    return null;
+                }
+            }))));
 };
 exports.default = Bars;