funuicss 3.6.20 → 3.7.1

package/ui/chart/Line.js

@@ -11,55 +11,353 @@ 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");
-// CSS var resolver
+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("--".concat(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
+// Color resolver with fallbacks
 var resolveStrokeColor = function (color) {
     if (!color)
         return getCssVar('primary') || '#8884d8';
     if (color.startsWith('#'))
         return color;
-    return getCssVar(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'
+    };
+    return colorMap[color] || color || '#8884d8';
 };
-// Tooltip
+// 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, style: { lineHeight: 1 } },
-                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'
+            } },
+            react_1.default.createElement("div", { className: "text-bold mb-1" }, 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 || '#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 } },
+                        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 Lines = function (_a) {
-    var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.horizontalLines, horizontalLines = _c === void 0 ? false : _c, _d = _a.showLegend, showLegend = _d === void 0 ? true : _d, _e = _a.showXAxis, showXAxis = _e === void 0 ? true : _e, _f = _a.showYAxis, showYAxis = _f === void 0 ? false : _f, funcss = _a.funcss, _g = _a.curveType, curveType = _g === void 0 ? 'monotone' : _g, _h = _a.height, height = _h === void 0 ? "100%" : _h, _j = _a.width, width = _j === void 0 ? '100%' : _j, _k = _a.margin, margin = _k === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, tooltipFormatter = _a.tooltipFormatter, _o = _a.legendProps, legendProps = _o === void 0 ? {} : _o, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval;
-    var gradientId = id || 'colorUv';
-    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: width, height: height, className: funcss },
-        react_1.default.createElement(recharts_1.AreaChart, { data: data, margin: margin },
+    var _b, _c;
+    var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _d = _a.showGrid, showGrid = _d === void 0 ? true : _d, _e = _a.horizontalLines, horizontalLines = _e === void 0 ? false : _e, _f = _a.showLegend, showLegend = _f === void 0 ? true : _f, _g = _a.showXAxis, showXAxis = _g === void 0 ? true : _g, _h = _a.showYAxis, showYAxis = _h === void 0 ? false : _h, _j = _a.showTooltip, showTooltip = _j === void 0 ? true : _j, funcss = _a.funcss, _k = _a.curveType, curveType = _k === void 0 ? 'monotone' : _k, _l = _a.height, height = _l === void 0 ? "100%" : _l, _m = _a.width, width = _m === void 0 ? '100%' : _m, _o = _a.margin, margin = _o === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _o, _p = _a.xAxisProps, xAxisProps = _p === void 0 ? {} : _p, _q = _a.yAxisProps, yAxisProps = _q === void 0 ? {} : _q, tooltipFormatter = _a.tooltipFormatter, _r = _a.legendProps, legendProps = _r === void 0 ? {} : _r, _s = _a.tooltipProps, tooltipProps = _s === void 0 ? {} : _s, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval, _t = _a.variant, variant = _t === void 0 ? '' : _t, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _u = _a.tickLine, tickLine = _u === void 0 ? true : _u, _v = _a.axisLine, axisLine = _v === void 0 ? true : _v, gridStroke = _a.gridStroke, _w = _a.gridStrokeDasharray, gridStrokeDasharray = _w === void 0 ? "3 3" : _w, customTooltip = _a.customTooltip, _x = _a.animation, animation = _x === void 0 ? true : _x, _y = _a.animationDuration, animationDuration = _y === void 0 ? 500 : _y, _z = _a.isAnimationActive, isAnimationActive = _z === void 0 ? true : _z, syncId = _a.syncId, chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _0 = _a.shadow, shadow = _0 === void 0 ? false : _0, aspect = _a.aspect, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth;
+    // Use component configuration with variant support and error handling
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('AreaChart', variant).mergeWithLocal;
+    // Create local props object with null checks
+    var localProps = {
+        data: data !== null && data !== void 0 ? data : [],
+        id: id !== null && id !== void 0 ? id : '',
+        series: series !== null && series !== void 0 ? series : [],
+        fromColor: fromColor !== null && fromColor !== void 0 ? fromColor : '',
+        toColor: toColor !== null && toColor !== void 0 ? toColor : '',
+        dy: dy !== null && dy !== void 0 ? dy : 0,
+        showGrid: showGrid !== null && showGrid !== void 0 ? showGrid : true,
+        horizontalLines: horizontalLines !== null && horizontalLines !== void 0 ? horizontalLines : false,
+        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 : '',
+        curveType: curveType !== null && curveType !== void 0 ? curveType : 'monotone',
+        height: height !== null && height !== void 0 ? height : "100%",
+        width: width !== null && width !== void 0 ? width : '100%',
+        margin: margin !== null && margin !== void 0 ? margin : { top: 10, right: 30, left: 0, bottom: 20 },
+        xAxisProps: xAxisProps !== null && xAxisProps !== void 0 ? xAxisProps : {},
+        yAxisProps: yAxisProps !== null && yAxisProps !== void 0 ? yAxisProps : {},
+        tooltipFormatter: tooltipFormatter !== null && tooltipFormatter !== void 0 ? tooltipFormatter : undefined,
+        legendProps: legendProps !== null && legendProps !== void 0 ? legendProps : {},
+        tooltipProps: tooltipProps !== null && tooltipProps !== void 0 ? tooltipProps : {},
+        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,
+        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,
+        gridStroke: gridStroke !== null && gridStroke !== void 0 ? gridStroke : '',
+        gridStrokeDasharray: gridStrokeDasharray !== null && gridStrokeDasharray !== void 0 ? gridStrokeDasharray : "3 3",
+        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 : '',
+        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
+    };
+    // 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;
+    // Extract final values with fallbacks
+    var final = (0, react_1.useMemo)(function () {
+        var _a, _b, _c, _d, _e, _f;
+        return ({
+            data: parsedData,
+            id: mergedProps.id || 'area-chart',
+            series: parsedSeries,
+            fromColor: mergedProps.fromColor || '',
+            toColor: mergedProps.toColor || '',
+            dy: mergedProps.dy || 0,
+            showGrid: (_a = mergedProps.showGrid) !== null && _a !== void 0 ? _a : true,
+            horizontalLines: (_b = mergedProps.horizontalLines) !== null && _b !== void 0 ? _b : false,
+            showLegend: mergedProps.showLegend,
+            showXAxis: mergedProps.showXAxis,
+            showYAxis: mergedProps.showYAxis,
+            showTooltip: mergedProps.showTooltip,
+            funcss: mergedProps.funcss || '',
+            curveType: mergedProps.curveType || 'monotone',
+            height: mergedProps.height || "100%",
+            width: mergedProps.width || '100%',
+            margin: mergedProps.margin || { top: 10, right: 30, left: 0, bottom: 20 },
+            xAxisProps: mergedProps.xAxisProps || {},
+            yAxisProps: mergedProps.yAxisProps || {},
+            tooltipFormatter: mergedProps.tooltipFormatter,
+            legendProps: mergedProps.legendProps || {},
+            tooltipProps: mergedProps.tooltipProps || {},
+            rotateLabel: mergedProps.rotateLabel || 0,
+            xLabelSize: mergedProps.xLabelSize || "0.8rem",
+            yLabelSize: mergedProps.yLabelSize || "0.8rem",
+            xInterval: mergedProps.xInterval,
+            yInterval: mergedProps.yInterval,
+            xAxisLabel: mergedProps.xAxisLabel || '',
+            yAxisLabel: mergedProps.yAxisLabel || '',
+            tickLine: (_c = mergedProps.tickLine) !== null && _c !== void 0 ? _c : true,
+            axisLine: (_d = mergedProps.axisLine) !== null && _d !== void 0 ? _d : true,
+            gridStroke: mergedProps.gridStroke || '',
+            gridStrokeDasharray: mergedProps.gridStrokeDasharray || "3 3",
+            customTooltip: mergedProps.customTooltip,
+            animation: (_e = mergedProps.animation) !== null && _e !== void 0 ? _e : true,
+            animationDuration: mergedProps.animationDuration || 500,
+            isAnimationActive: mergedProps.isAnimationActive,
+            syncId: mergedProps.syncId || '',
+            chartBackground: mergedProps.chartBackground || '',
+            borderRadius: mergedProps.borderRadius || '',
+            padding: mergedProps.padding || '',
+            shadow: (_f = mergedProps.shadow) !== null && _f !== void 0 ? _f : false,
+            aspect: mergedProps.aspect,
+            minHeight: mergedProps.minHeight,
+            maxHeight: mergedProps.maxHeight,
+            minWidth: mergedProps.minWidth,
+            maxWidth: mergedProps.maxWidth
+        });
+    }, [parsedData, parsedSeries, mergedProps, hasValidData]);
+    var baseGradientId = final.id || 'areaChartGradient';
+    var TooltipComponent = final.customTooltip || CustomTooltip;
+    // Generate per-series gradients with error handling
+    var gradients = (0, react_1.useMemo)(function () {
+        if (!final.series || !Array.isArray(final.series))
+            return [];
+        return final.series.map(function (s, index) {
+            if (!s || typeof s !== 'object')
+                return null;
+            try {
+                if (!s.fromColor && !s.toColor)
+                    return null;
+                var gradientId = "".concat(baseGradientId, "-").concat(index);
+                var startColor = resolveStrokeColor(s.fromColor || s.color || final.fromColor);
+                var endColor = resolveStrokeColor(s.toColor || final.toColor);
+                return (react_1.default.createElement("linearGradient", { key: gradientId, id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
+                    react_1.default.createElement("stop", { offset: "5%", stopColor: startColor, stopOpacity: 0.8 }),
+                    react_1.default.createElement("stop", { offset: "95%", stopColor: endColor, stopOpacity: 0 })));
+            }
+            catch (error) {
+                console.error('Error generating gradient for series:', error);
+                return null;
+            }
+        }).filter(Boolean);
+    }, [final.series, baseGradientId, final.fromColor, final.toColor]);
+    // Default gradient for series without custom gradients
+    var defaultGradient = (0, react_1.useMemo)(function () { return (react_1.default.createElement("linearGradient", { id: baseGradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
+        react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(final.fromColor || 'primary') || '#8884d8', stopOpacity: 0.8 }),
+        react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(final.toColor || 'primary200') || '#8884d8', stopOpacity: 0 }))); }, [baseGradientId, final.fromColor, final.toColor]);
+    var containerStyle = (0, react_1.useMemo)(function () { return ({
+        height: final.height,
+        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,
+    }); }, [final]);
+    // 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: final.height, aspect: final.aspect, className: final.funcss, style: containerStyle },
+        react_1.default.createElement(recharts_1.AreaChart, { data: final.data, margin: final.margin, syncId: final.syncId },
             react_1.default.createElement("defs", null,
-                react_1.default.createElement("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
-                    react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(fromColor || 'primary'), stopOpacity: 0.8 }),
-                    react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(toColor || 'primary200'), stopOpacity: 0 }))),
-            showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
-            !showGrid && horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false })),
-            showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: xInterval || 0, padding: { left: 10, right: 10 }, fontSize: xLabelSize || "0.8rem", strokeWidth: horizontalLines ? 0 : 0.2, dataKey: "label", angle: rotateLabel || -35, dy: dy !== null && dy !== void 0 ? dy : 10 }, xAxisProps))),
-            showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: yInterval || 0, strokeWidth: horizontalLines ? 0 : 0.2, fontSize: yLabelSize || "0.8rem" }, yAxisProps))),
-            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, index) { return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey, type: curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: "url(#".concat(gradientId, ")"), fillOpacity: 1, strokeWidth: s.strokeWidth || 2, dot: s.dot !== false ? { r: 4 } : false, activeDot: { r: 8 } })); }))));
+                defaultGradient,
+                gradients),
+            final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
+            !final.showGrid && final.horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, horizontal: true, vertical: false, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
+            final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize || "0.8rem", strokeWidth: final.horizontalLines ? 0 : 0.2, dataKey: "label", angle: final.rotateLabel || -35, dy: (_c = final.dy) !== null && _c !== void 0 ? _c : 10, tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? { value: final.xAxisLabel, position: 'insideBottom', offset: -10 } : undefined }, final.xAxisProps))),
+            final.showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: final.yInterval, strokeWidth: final.horizontalLines ? 0 : 0.2, fontSize: final.yLabelSize || "0.8rem", tickLine: final.tickLine, axisLine: final.axisLine, label: final.yAxisLabel ? { value: final.yAxisLabel, angle: -90, position: '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 {
+                    var hasCustomGradient = s.fromColor || s.toColor;
+                    var gradientId = hasCustomGradient
+                        ? "".concat(baseGradientId, "-").concat(index)
+                        : baseGradientId;
+                    return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey || "series-".concat(index), type: final.curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: hasCustomGradient || final.fromColor ? "url(#".concat(gradientId, ")") : resolveStrokeColor(s.color), fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.6, strokeWidth: s.strokeWidth || 2, strokeDasharray: s.strokeDasharray, dot: s.dot !== false ? { r: 4 } : false, activeDot: s.activeDot !== false ? (typeof s.activeDot === 'object' ? s.activeDot : { r: 6, strokeWidth: 2 }) : false, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration }));
+                }
+                catch (error) {
+                    console.error('Error rendering area series:', error);
+                    return null;
+                }
+            }))));
 };
 exports.default = Lines;

package/ui/input/Input.js

@@ -75,14 +75,16 @@ var statusIcons = {
 };
 // Utility function to generate CSS classes
 var generateInputClasses = function (_a) {
-    var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b;
+    var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b, _c = _a.hasNoPrefix, hasNoPrefix = _c === void 0 ? false : _c, _d = _a.hasNoLabel, hasNoLabel = _d === void 0 ? false : _d;
     var statusClass = status ? "".concat(status, "-input") : '';
     var roundedClass = rounded ? 'rounded' : '';
     var bgClass = bg || '';
     var flatClass = flat ? 'flat' : '';
     var cornerClass = leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '';
     var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : (!bordered && !borderless ? 'borderedInput' : '');
-    return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    input\n  ").trim().replace(/\s+/g, ' ');
+    var noPrefixClass = hasNoPrefix ? 'no_prefix' : '';
+    var noLabelClass = hasNoLabel ? 'no_label' : '';
+    return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    ").concat(noPrefixClass, "\n    ").concat(noLabelClass, "\n    input\n  ").trim().replace(/\s+/g, ' ');
 };
 // Iconic Input Wrapper Component
 var IconicInputWrapper = function (_a) {
@@ -102,8 +104,9 @@ var IconicInputWrapper = function (_a) {
 };
 // Input Container with Floating Label
 var InputContainer = function (_a) {
-    var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, prefix = _a.prefix;
-    var showFloatingLabel = label && (isFocused || hasValue);
+    var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, prefix = _a.prefix, _b = _a.isSelect, isSelect = _b === void 0 ? false : _b;
+    // For select inputs, label is always active
+    var showFloatingLabel = label && (isSelect || isFocused || hasValue);
     return (react_1.default.createElement("div", { className: "input-wrapper ".concat(fullWidth ? 'full-width' : '') },
         react_1.default.createElement("div", { className: "input-container-with-label" },
             label && (react_1.default.createElement("label", { htmlFor: id, className: "floating-label ".concat(startIcon || prefix ? "label-left" : "", "  ").concat(showFloatingLabel ? 'active' : '', " ").concat(status ? "label-".concat(status) : '') }, label)),
@@ -194,6 +197,13 @@ var TextInput = function (_a) {
         }
     }, [final.stringSuffix]);
     var themeVariant = (0, theme_1.useVariant)().variant;
+    // Determine effective icons: stringPrefix/stringSuffix take priority, then local, then config
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Check if there's no start icon or prefix
+    var hasNoPrefix = !effectivePrefix;
+    // Check if there's no label
+    var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
         rounded: final.rounded,
@@ -204,6 +214,8 @@ var TextInput = function (_a) {
         rightRounded: final.rightRounded,
         bordered: final.bordered,
         borderless: final.borderless,
+        hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+        hasNoLabel: hasNoLabel,
     });
     var style = final.fullWidth ? { width: '100%' } : undefined;
     var handleChange = function (e) {
@@ -222,9 +234,6 @@ var TextInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    // Determine effective icons: stringPrefix/stringSuffix take priority, then local, then config
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
     // Show placeholder only when label is active (focused or has value)
     var showPlaceholder = placeholder && label && (isFocused || !!inputValue);
     var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, type: type, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: inputValue }, rest)));
@@ -314,6 +323,13 @@ var SelectInput = function (_a) {
     }, [final.stringSuffix]);
     var selectHasValue = !!selectValue;
     var themeVariant = (0, theme_1.useVariant)().variant;
+    // Determine effective icons
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Check if there's no start icon or prefix
+    var hasNoPrefix = !effectivePrefix;
+    // Check if there's no label
+    var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
         rounded: final.rounded,
@@ -324,6 +340,8 @@ var SelectInput = function (_a) {
         rightRounded: final.rightRounded,
         bordered: final.bordered,
         borderless: final.borderless,
+        hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+        hasNoLabel: hasNoLabel,
     });
     var style = final.fullWidth ? { width: '100%' } : undefined;
     var handleChange = function (e) {
@@ -342,11 +360,9 @@ var SelectInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
     var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, value: selectValue, style: style }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
     var wrappedSelect = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, selectElement));
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id }, wrappedSelect));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, isSelect: true }, wrappedSelect));
 };
 exports.SelectInput = SelectInput;
 // Textarea Component
@@ -430,6 +446,13 @@ var TextareaInput = function (_a) {
         }
     }, [final.stringSuffix]);
     var themeVariant = (0, theme_1.useVariant)().variant;
+    // Determine effective icons
+    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
+    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Check if there's no start icon or prefix
+    var hasNoPrefix = !effectivePrefix;
+    // Check if there's no label
+    var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
         rounded: final.rounded,
@@ -440,6 +463,8 @@ var TextareaInput = function (_a) {
         rightRounded: final.rightRounded,
         bordered: final.bordered,
         borderless: final.borderless,
+        hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+        hasNoLabel: hasNoLabel,
     });
     var style = final.fullWidth ? { width: '100%' } : undefined;
     var handleChange = function (e) {
@@ -458,8 +483,6 @@ var TextareaInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
     // Show placeholder only when label is active (focused or has value)
     var showPlaceholder = placeholder && label && (isFocused || !!textValue);
     var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: textValue, rows: rows }, rest)));
@@ -467,7 +490,7 @@ var TextareaInput = function (_a) {
     return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: final.fullWidth, id: id }, wrappedTextarea));
 };
 exports.TextareaInput = TextareaInput;
-// File Input Component (unchanged as it doesn't have the same value issue)
+// File Input Component (updated with no_prefix and no_label logic)
 var FileInput = function (_a) {
     var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, helperText = _a.helperText, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "icon", "extra", "button", "btn", "value", "variant"]);
     var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
@@ -545,6 +568,10 @@ var FileInput = function (_a) {
     };
     var effectivePrefix = prefixNode || final.prefix || final.startIcon;
     var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
+    // Check if there's no start icon or prefix
+    var hasNoPrefix = !effectivePrefix;
+    // Check if there's no label (file inputs typically don't have labels in the same way)
+    var hasNoLabel = true; // File inputs use their own label system
     if (btn) {
         var className = generateInputClasses({
             status: final.status,
@@ -556,7 +583,9 @@ var FileInput = function (_a) {
             rightRounded: final.rightRounded,
             bordered: true,
             borderless: false,
-            additionalClasses: 'filedInput'
+            additionalClasses: 'filedInput',
+            hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+            hasNoLabel: hasNoLabel,
         });
         var style = final.fullWidth ? { width: '100%' } : undefined;
         var fileInputElement = (react_1.default.createElement("div", { className: "fileInput" },

package/ui/sidebar/SideBar.js

@@ -129,7 +129,7 @@ function SideBar(_a) {
                                         window.location.href = link.uri;
                                     }
                                 }, key: link.uri },
-                                react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "p-1 pl-2 pr-2  sidebar-link text-left  ".concat(isActive ? "primary  ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " \n                            ").concat((variant === 'standard' || popIcon) ? "p-1  ".concat(isActive ? "primary" : "lighter border", " central") : (variant === "minimal" && !isActive) ? "p-1 central lighter " : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon) },
+                                react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "p-1 pl-2 pr-2  sidebar-link text-left  ".concat(isActive ? "primary  ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " \n                            ").concat((variant === 'standard' || popIcon) ? "p-1  ".concat(isActive ? "primary" : "lighter text-primary border", " central") : (variant === "minimal" && !isActive) ? "p-1 central lighter text-primary" : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon) },
                                     react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
                         })));
                 }))),

package/ui/table/Table.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 type TableProps = {
     children?: React.ReactNode;
     funcss?: string;
+    trCss?: string;
     title?: string;
     bordered?: boolean;
     noStripped?: boolean;
@@ -40,5 +41,5 @@ type TableProps = {
 };
 export default function Table({ children, funcss, bordered, noStripped, hoverable, title, showTotal, light, dark, head, body, data, isLoading, right, hideExport, height, pageSize, // Default page size,
 customColumns, filterableFields, // New prop
-emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, onRowClick, ...rest }: TableProps): React.JSX.Element;
+emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, onRowClick, trCss, ...rest }: TableProps): React.JSX.Element;
 export {};