funuicss 3.7.0 → 3.7.1

package/css/fun.css

@@ -2397,7 +2397,9 @@ border-radius: var(--borderRadius);
   background-color: transparent;
 }
 
-
+.no_label{
+  padding:var(--inputPadding) !important;
+}
 /* Status Input Styles */
 .input.success-input,
 .input.warning-input,
@@ -3719,14 +3721,7 @@ padding-right: 2.5rem;
 
 
 /* tables */
-.table.bordered > tr,
-thead {
-  border-bottom: var(--border);
-}
-.table thead > td,
-th {
-  font-weight: bold;
-}
+
 .table , table {
   width: 100%;
   text-align: left;
@@ -3738,7 +3733,12 @@ th {
   border: var(--border);
 }
 
-.table.stripped tr:nth-child(even) {
+
+th{font-weight: 400 !important; }
+thead{ background-color: var(--lighter); border-radius: var(--radius) !important;}
+
+
+.table.stripped tr:nth-child(odd) {
   background-color: var(--lighter); 
 }
 .table tr,
@@ -9755,3 +9755,4 @@ transform: translateY(-50%);
   -webkit-background-clip: text;
 }
 
+

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.0",
+  "version": "3.7.1",
   "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/chart/Line.js

@@ -48,190 +48,270 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var componentUtils_1 = require("../../utils/componentUtils");
-// Parse string to object utility
+// Parse string to object utility with enhanced error handling
 var parseIfString = function (value, fallback) {
     if (typeof value === 'string') {
         try {
-            return JSON.parse(value);
+            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
+// 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';
 };
-// Default Tooltip
+// Default Tooltip with error handling
 var CustomTooltip = function (_a) {
     var active = _a.active, payload = _a.payload, label = _a.label, formatter = _a.formatter;
-    if (active && payload && payload.length) {
+    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),
-            payload.map(function (entry, index) { 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: entry.color,
-                        borderRadius: '2px'
-                    } }),
-                react_1.default.createElement("span", { style: { fontWeight: 500 } },
-                    entry.name,
-                    ":"),
-                react_1.default.createElement("span", { style: { fontWeight: 600, color: 'var(--text-color, #1a202c)' } }, formatter ? formatter(entry.value, entry.name, entry) : entry.value))); })));
+            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 _b;
-    var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _c = _a.showGrid, showGrid = _c === void 0 ? true : _c, _d = _a.horizontalLines, horizontalLines = _d === void 0 ? false : _d, _e = _a.showLegend, showLegend = _e === void 0 ? true : _e, _f = _a.showXAxis, showXAxis = _f === void 0 ? true : _f, _g = _a.showYAxis, showYAxis = _g === void 0 ? false : _g, _h = _a.showTooltip, showTooltip = _h === void 0 ? true : _h, funcss = _a.funcss, _j = _a.curveType, curveType = _j === void 0 ? 'monotone' : _j, _k = _a.height, height = _k === void 0 ? "100%" : _k, _l = _a.width, width = _l === void 0 ? '100%' : _l, _m = _a.margin, margin = _m === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _m, _o = _a.xAxisProps, xAxisProps = _o === void 0 ? {} : _o, _p = _a.yAxisProps, yAxisProps = _p === void 0 ? {} : _p, tooltipFormatter = _a.tooltipFormatter, _q = _a.legendProps, legendProps = _q === void 0 ? {} : _q, _r = _a.tooltipProps, tooltipProps = _r === void 0 ? {} : _r, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval, _s = _a.variant, variant = _s === void 0 ? '' : _s, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _t = _a.tickLine, tickLine = _t === void 0 ? true : _t, _u = _a.axisLine, axisLine = _u === void 0 ? true : _u, gridStroke = _a.gridStroke, _v = _a.gridStrokeDasharray, gridStrokeDasharray = _v === void 0 ? "3 3" : _v, customTooltip = _a.customTooltip, _w = _a.animation, animation = _w === void 0 ? true : _w, _x = _a.animationDuration, animationDuration = _x === void 0 ? 500 : _x, _y = _a.isAnimationActive, isAnimationActive = _y === void 0 ? true : _y, syncId = _a.syncId, chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _z = _a.shadow, shadow = _z === void 0 ? false : _z, aspect = _a.aspect, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth;
-    // Use component configuration with variant support
+    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
+    // Create local props object with null checks
     var localProps = {
-        data: data,
-        id: id,
-        series: series,
-        fromColor: fromColor,
-        toColor: toColor,
-        dy: dy,
-        showGrid: showGrid,
-        horizontalLines: horizontalLines,
-        showLegend: showLegend,
-        showXAxis: showXAxis,
-        showYAxis: showYAxis,
-        showTooltip: showTooltip,
-        funcss: funcss,
-        curveType: curveType,
-        height: height,
-        width: width,
-        margin: margin,
-        xAxisProps: xAxisProps,
-        yAxisProps: yAxisProps,
-        tooltipFormatter: tooltipFormatter,
-        legendProps: legendProps,
-        tooltipProps: tooltipProps,
-        rotateLabel: rotateLabel,
-        xLabelSize: xLabelSize,
-        yLabelSize: yLabelSize,
-        xInterval: xInterval,
-        yInterval: yInterval,
-        xAxisLabel: xAxisLabel,
-        yAxisLabel: yAxisLabel,
-        tickLine: tickLine,
-        axisLine: axisLine,
-        gridStroke: gridStroke,
-        gridStrokeDasharray: gridStrokeDasharray,
-        customTooltip: customTooltip,
-        animation: animation,
-        animationDuration: animationDuration,
-        isAnimationActive: isAnimationActive,
-        syncId: syncId,
-        chartBackground: chartBackground,
-        borderRadius: borderRadius,
-        padding: padding,
-        shadow: shadow,
-        aspect: aspect,
-        minHeight: minHeight,
-        maxHeight: maxHeight,
-        minWidth: minWidth,
-        maxWidth: maxWidth
+        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
-    var mergedProps = mergeWithLocal(localProps).props;
-    // Parse data and series if they're strings
-    var parsedData = (0, react_1.useMemo)(function () { return parseIfString(mergedProps.data, []); }, [mergedProps.data]);
-    var parsedSeries = (0, react_1.useMemo)(function () { return parseIfString(mergedProps.series, []); }, [mergedProps.series]);
-    // Extract final values
-    var final = (0, react_1.useMemo)(function () { return ({
-        data: parsedData,
-        id: mergedProps.id,
-        series: parsedSeries,
-        fromColor: mergedProps.fromColor,
-        toColor: mergedProps.toColor,
-        dy: mergedProps.dy,
-        showGrid: mergedProps.showGrid,
-        horizontalLines: mergedProps.horizontalLines,
-        showLegend: mergedProps.showLegend,
-        showXAxis: mergedProps.showXAxis,
-        showYAxis: mergedProps.showYAxis,
-        showTooltip: mergedProps.showTooltip,
-        funcss: mergedProps.funcss,
-        curveType: mergedProps.curveType,
-        height: mergedProps.height,
-        width: mergedProps.width,
-        margin: mergedProps.margin,
-        xAxisProps: mergedProps.xAxisProps,
-        yAxisProps: mergedProps.yAxisProps,
-        tooltipFormatter: mergedProps.tooltipFormatter,
-        legendProps: mergedProps.legendProps,
-        tooltipProps: mergedProps.tooltipProps,
-        rotateLabel: mergedProps.rotateLabel,
-        xLabelSize: mergedProps.xLabelSize,
-        yLabelSize: mergedProps.yLabelSize,
-        xInterval: mergedProps.xInterval,
-        yInterval: mergedProps.yInterval,
-        xAxisLabel: mergedProps.xAxisLabel,
-        yAxisLabel: mergedProps.yAxisLabel,
-        tickLine: mergedProps.tickLine,
-        axisLine: mergedProps.axisLine,
-        gridStroke: mergedProps.gridStroke,
-        gridStrokeDasharray: mergedProps.gridStrokeDasharray,
-        customTooltip: mergedProps.customTooltip,
-        animation: mergedProps.animation,
-        animationDuration: mergedProps.animationDuration,
-        isAnimationActive: mergedProps.isAnimationActive,
-        syncId: mergedProps.syncId,
-        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
-    }); }, [parsedData, parsedSeries, mergedProps]);
+    // 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
+    // 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.fromColor && !s.toColor)
+            if (!s || typeof s !== 'object')
                 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 })));
-        });
+            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'), stopOpacity: 0.8 }),
-        react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(final.toColor || 'primary200'), stopOpacity: 0 }))); }, [baseGradientId, final.fromColor, final.toColor]);
+        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,
@@ -244,6 +324,13 @@ var Lines = function (_a) {
         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,
@@ -251,16 +338,26 @@ var Lines = function (_a) {
                 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: (_b = final.dy) !== null && _b !== void 0 ? _b : 10, tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? { value: final.xAxisLabel, position: 'insideBottom', offset: -10 } : undefined }, final.xAxisProps))),
+            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) {
-                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 || 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 }));
+                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/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 {};

package/ui/table/Table.js

@@ -95,7 +95,7 @@ function Table(_a) {
     var _b, _c;
     var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, _d = _a.title, title = _d === void 0 ? "" : _d, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, right = _a.right, hideExport = _a.hideExport, height = _a.height, _f = _a.pageSize, pageSize = _f === void 0 ? data ? 10 : 0 : _f, // Default page size,
     customColumns = _a.customColumns, filterableFields = _a.filterableFields, // New prop
-    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, onRowClick = _a.onRowClick, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields", "onRowClick"]);
+    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, onRowClick = _a.onRowClick, trCss = _a.trCss, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields", "onRowClick", "trCss"]);
     // Check if data is null or undefined before accessing its properties
     // Replace this in your component
     var _h = (0, react_1.useState)(''), search = _h[0], setSearch = _h[1];
@@ -188,28 +188,26 @@ function Table(_a) {
     }, [selectedField, selectedValue]);
     return (React.createElement("div", { className: "".concat(funcss ? funcss : '', " roundEdge") },
         data &&
-            React.createElement("div", { className: "padding bb" },
+            React.createElement("div", { className: "pr-4 pl-4 pt-2 pb-2 lighter round-edge mb-2", style: { overflow: "show" } },
                 React.createElement(RowFlex_1.default, { gap: 0.5, justify: 'space-between' },
                     title ?
                         React.createElement("div", null,
                             showTotal && data &&
                                 React.createElement("div", null,
-                                    React.createElement(Text_1.default, { text: 'Records: ', size: 'sm' }),
-                                    React.createElement(Text_1.default, { text: filteredData.length, weight: 600 })),
+                                    React.createElement(Text_1.default, { text: "".concat(filteredData.length, " Records"), size: 'sm', weight: 500 })),
                             title &&
                                 React.createElement("div", null,
-                                    React.createElement(Text_1.default, { text: title || "", size: 'h6' })))
+                                    React.createElement(Text_1.default, { text: title || "", size: 'h6', lineHeight: '0.8' })))
                         :
                             React.createElement(React.Fragment, null, showTotal && data &&
                                 React.createElement("div", null,
-                                    React.createElement(Text_1.default, { text: 'Records: ', size: 'sm' }),
-                                    React.createElement(Text_1.default, { text: filteredData.length, weight: 600, color: 'primary' }))),
+                                    React.createElement(Text_1.default, { text: "".concat(filteredData.length, " Records"), size: 'sm', weight: 500 }))),
                     data ?
                         React.createElement("div", null,
                             React.createElement(Flex_1.default, { width: '100%', wrap: 'nowrap', alignItems: 'center', gap: 0.7 },
                                 !selectedField && !showSearch && filterableFields &&
                                     React.createElement("div", null,
-                                        React.createElement(Select_1.default, { fullWidth: true, searchable: true, funcss: 'min-w-300 w-full', rounded: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
+                                        React.createElement(Select_1.default, { fullWidth: true, searchable: true, funcss: 'min-w-300 w-full bg', rounded: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
                                                 { text: '🔍 Filter', value: '' },
                                                 { text: 'All*', value: '' }
                                             ], (filterableFields || []).map(function (field) { return ({
@@ -217,7 +215,7 @@ function Table(_a) {
                                                 value: field
                                             }); }), true) })),
                                 selectedField && !showSearch && filterableFields && (React.createElement("div", { className: '' },
-                                    React.createElement(Select_1.default, { rounded: true, searchable: true, funcss: 'min-w-300 w-full', fullWidth: true, value: selectedValue || '', onChange: function (e) {
+                                    React.createElement(Select_1.default, { rounded: true, searchable: true, funcss: 'min-w-300 w-full bg', fullWidth: true, value: selectedValue || '', onChange: function (e) {
                                             if (e === 'clear_all') {
                                                 setSelectedField('');
                                             }
@@ -238,21 +236,21 @@ function Table(_a) {
                                 showSearch ?
                                     React.createElement(Flex_1.default, { gap: 0.5, wrap: 'nowrap', alignItems: 'center' },
                                         React.createElement("div", { className: 'animated slide-up' },
-                                            React.createElement(Input_1.default, { borderless: true, funcss: 'min-w-300', fullWidth: true, rounded: true, value: searchQuery, onChange: function (e) { return setsearchQuery(e.target.value); }, label: "Search..." })),
+                                            React.createElement(Input_1.default, { borderless: true, funcss: 'min-w-300 bg', fullWidth: true, rounded: true, value: searchQuery, onChange: function (e) { return setsearchQuery(e.target.value); }, label: "Search..." })),
                                         React.createElement("div", { className: 'animated fade-in' },
                                             React.createElement("div", { onClick: function () { return setshowSearch(false); } },
                                                 React.createElement(ToolTip_1.default, null,
                                                     filterableFields ? React.createElement(io5_1.IoFilterOutline, { className: 'pointer' })
                                                         :
                                                             React.createElement(pi_1.PiXThin, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(false); } }),
-                                                    React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: filterableFields ? "Filter" : "Close Search" })))))
+                                                    React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: filterableFields ? "Filter" : "Close Search" })))))
                                     :
                                         React.createElement("div", { className: 'animated fade-in' },
                                             React.createElement(ToolTip_1.default, null,
                                                 React.createElement(ci_1.CiSearch, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(true); } }),
-                                                React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Search Data" })))))
+                                                React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: "Search Data" })))))
                         : '',
-                    React.createElement(React.Fragment, null,
+                    React.createElement(React.Fragment, null, (right || !hideExport) &&
                         React.createElement(RowFlex_1.default, { gap: 0.5 },
                             right && right,
                             !hideExport &&
@@ -260,7 +258,7 @@ function Table(_a) {
                                     React.createElement(ToolTip_1.default, null,
                                         React.createElement(Circle_1.default, { bg: 'lighter', bordered: true, onClick: Export },
                                             React.createElement(pi_1.PiExportThin, null)),
-                                        React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Export Data" }))))))),
+                                        React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: "Export Data" }))))))),
         React.createElement("main", { style: { overflow: "auto", width: "100%" } },
             React.createElement("table", __assign({ className: "table  ".concat(bordered ? 'border' : '', " ").concat(noStripped ? '' : 'stripped', " ").concat(hoverable ? 'hoverableTr' : '', " ").concat(light ? 'light' : '', " ").concat(dark ? 'dark' : ''), style: {
                     height: height ? height + "px" : "",
@@ -269,8 +267,7 @@ function Table(_a) {
                 } }, rest),
                 data &&
                     (data === null || data === void 0 ? void 0 : data.titles) &&
-                    React.createElement(Head_1.default, null, data.titles.map(function (mdoc) { return (React.createElement("th", { key: mdoc },
-                        React.createElement(Text_1.default, { text: mdoc, weight: 500, funcss: 'text-secondary' }))); })),
+                    React.createElement(Head_1.default, null, data.titles.map(function (mdoc, index) { return (React.createElement("th", { key: mdoc, className: "text-secondary \n                ".concat(index === 0 ? "first_table_data" : "", " \n                ").concat(index === (data.titles.length - 1) ? "last_table_data" : "", " \n                ") }, mdoc)); })),
                 head && React.createElement(Head_1.default, null, head),
                 body && React.createElement(Body_1.default, null, body),
                 data &&
@@ -278,7 +275,7 @@ function Table(_a) {
                         var results = (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, prioritizeSearchFields);
                         var shouldSlice = !searchQuery || results.length > 10;
                         return (shouldSlice ? results.slice(startIndex, endIndex) : results)
-                            .map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined },
+                            .map(function (mdoc, index) { return (React.createElement("tr", { className: "animated slide-up  ".concat(trCss), key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined },
                             data.fields.map(function (fdoc, findex) {
                                 var _a;
                                 return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));