funuicss 3.7.1 → 3.7.3

package/index.d.ts

@@ -55,7 +55,8 @@ export { default as Slider } from "./ui/slider/Slider";
 export { default as FlexItem } from "./ui/flex/FlexItem";
 export { default as ScrollToTop } from "./ui/scrolltotop/ScrollToTop";
 export { default as Select } from "./ui/select/Select";
+export { default as FileUpload } from "./ui/input/FileUpload";
 export { default as Cookie } from "./js/Cookie";
-export { useVariable } from "./ui/theme/theme";
+export { useVariable, useAsset, useAssetType, useAssetValue, useAssets, useVariables, } from "./ui/theme/theme";
 export { FunGet } from "./js/Fun";
 export { default as GoogleAnalytics } from "./js/google/analytics";

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.FileUpload = 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");
@@ -119,11 +119,18 @@ var ScrollToTop_1 = require("./ui/scrolltotop/ScrollToTop");
 Object.defineProperty(exports, "ScrollToTop", { enumerable: true, get: function () { return __importDefault(ScrollToTop_1).default; } });
 var Select_1 = require("./ui/select/Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });
+var FileUpload_1 = require("./ui/input/FileUpload");
+Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return __importDefault(FileUpload_1).default; } });
 // js 
 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.1",
+  "version": "3.7.3",
   "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,256 @@ 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 mergedMargin = __assign(__assign({}, defaultMargin), margin);
+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, []);
+        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';
+    // 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 };
+        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: 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: (_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
+                } : 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)),
+            parsedSeries.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;