funuicss 3.7.2 → 3.7.4

package/ui/chart/Line.js

@@ -152,71 +152,17 @@ var CustomTooltip = function (_a) {
             react_1.default.createElement("div", { className: "text-error" }, "Error displaying tooltip")));
     }
 };
-var Lines = function (_a) {
-    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;
-    }
+var Lines = function (localProps) {
+    var _a;
+    // Use component configuration with variant support
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Lines', localProps.variant).mergeWithLocal;
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Debug: Log what props are actually coming through
+    react_1.default.useEffect(function () {
+        console.log('Lines merged props:', mergedProps);
+        console.log('Lines config available:', Object.keys(mergedProps).length > 0);
+    }, [mergedProps]);
     // Parse data and series if they're strings with enhanced validation
     var parsedData = (0, react_1.useMemo)(function () {
         var parsed = parseIfString(mergedProps.data, []);
@@ -230,66 +176,15 @@ var Lines = function (_a) {
     }, [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]);
+    // Use mergedProps directly - no need for complex fallback logic
+    var final = mergedProps;
     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))
+        if (!parsedSeries || !Array.isArray(parsedSeries))
             return [];
-        return final.series.map(function (s, index) {
+        return parsedSeries.map(function (s, index) {
             if (!s || typeof s !== 'object')
                 return null;
             try {
@@ -307,7 +202,7 @@ var Lines = function (_a) {
                 return null;
             }
         }).filter(Boolean);
-    }, [final.series, baseGradientId, final.fromColor, final.toColor]);
+    }, [parsedSeries, 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 }),
@@ -332,17 +227,17 @@ var Lines = function (_a) {
                 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(recharts_1.AreaChart, { data: parsedData, margin: final.margin, syncId: final.syncId },
             react_1.default.createElement("defs", null,
                 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.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: (_a = final.dy) !== null && _a !== void 0 ? _a : 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) {
+            parsedSeries.map(function (s, index) {
                 if (!s || !s.dataKey) {
                     console.warn('Invalid series configuration at index:', index);
                     return null;

package/ui/chart/Pie.js

@@ -158,92 +158,16 @@ var CustomLabel = function (_a) {
     var y = cy + radius * Math.sin(-midAngle * RADIAN);
     return (react_1.default.createElement("text", { x: x, y: y, fill: "white", textAnchor: x > cx ? 'start' : 'end', dominantBaseline: "central", fontSize: "12", fontWeight: "600" }, "".concat((percent * 100).toFixed(0), "%")));
 };
-var ChartPie = function (_a) {
-    var _b;
-    var data = _a.data, id = _a.id, _c = _a.variant, variant = _c === void 0 ? '' : _c, 
-    // Chart Type & Layout
-    _d = _a.donut, 
-    // Chart Type & Layout
-    donut = _d === void 0 ? false : _d, _e = _a.width, width = _e === void 0 ? '100%' : _e, _f = _a.height, height = _f === void 0 ? 300 : _f, _g = _a.outerRadius, outerRadius = _g === void 0 ? 80 : _g, innerRadius = _a.innerRadius, _h = _a.paddingAngle, paddingAngle = _h === void 0 ? 0 : _h, _j = _a.cornerRadius, cornerRadius = _j === void 0 ? 0 : _j, _k = _a.startAngle, startAngle = _k === void 0 ? 0 : _k, _l = _a.endAngle, endAngle = _l === void 0 ? 360 : _l, _m = _a.minAngle, minAngle = _m === void 0 ? 0 : _m, 
-    // Display Controls
-    _o = _a.showLegend, 
-    // Display Controls
-    showLegend = _o === void 0 ? true : _o, _p = _a.showTooltip, showTooltip = _p === void 0 ? true : _p, _q = _a.showLabels, showLabels = _q === void 0 ? false : _q, _r = _a.showLabelLine, showLabelLine = _r === void 0 ? false : _r, _s = _a.labelPosition, labelPosition = _s === void 0 ? 'inside' : _s, _t = _a.legendPosition, legendPosition = _t === void 0 ? 'bottom' : _t, 
-    // Appearance
-    funcss = _a.funcss, legendCss = _a.legendCss, chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _u = _a.shadow, shadow = _u === void 0 ? false : _u, 
-    // Styling
-    _v = _a.strokeWidth, 
-    // Styling
-    strokeWidth = _v === void 0 ? 1 : _v, _w = _a.strokeColor, strokeColor = _w === void 0 ? '#ffffff' : _w, _x = _a.activeShape, activeShape = _x === void 0 ? true : _x, _y = _a.inactiveShape, inactiveShape = _y === void 0 ? true : _y, 
-    // Tooltip / Legend
-    tooltipFormatter = _a.tooltipFormatter, labelFormatter = _a.labelFormatter, _z = _a.legendProps, legendProps = _z === void 0 ? {} : _z, _0 = _a.tooltipProps, tooltipProps = _0 === void 0 ? {} : _0, customTooltip = _a.customTooltip, customLabel = _a.customLabel, 
-    // Animation & Interaction
-    _1 = _a.animation, 
-    // Animation & Interaction
-    animation = _1 === void 0 ? true : _1, _2 = _a.animationDuration, animationDuration = _2 === void 0 ? 500 : _2, _3 = _a.isAnimationActive, isAnimationActive = _3 === void 0 ? true : _3, onPieClick = _a.onPieClick, onPieEnter = _a.onPieEnter, onPieLeave = _a.onPieLeave, 
-    // Responsive
-    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)('PieChart', 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 : '',
-        variant: variant !== null && variant !== void 0 ? variant : '',
-        donut: donut !== null && donut !== void 0 ? donut : false,
-        width: width !== null && width !== void 0 ? width : '100%',
-        height: height !== null && height !== void 0 ? height : 300,
-        outerRadius: outerRadius !== null && outerRadius !== void 0 ? outerRadius : 80,
-        innerRadius: innerRadius !== null && innerRadius !== void 0 ? innerRadius : undefined,
-        paddingAngle: paddingAngle !== null && paddingAngle !== void 0 ? paddingAngle : 0,
-        cornerRadius: cornerRadius !== null && cornerRadius !== void 0 ? cornerRadius : 0,
-        startAngle: startAngle !== null && startAngle !== void 0 ? startAngle : 0,
-        endAngle: endAngle !== null && endAngle !== void 0 ? endAngle : 360,
-        minAngle: minAngle !== null && minAngle !== void 0 ? minAngle : 0,
-        showLegend: showLegend !== null && showLegend !== void 0 ? showLegend : true,
-        showTooltip: showTooltip !== null && showTooltip !== void 0 ? showTooltip : true,
-        showLabels: showLabels !== null && showLabels !== void 0 ? showLabels : false,
-        showLabelLine: showLabelLine !== null && showLabelLine !== void 0 ? showLabelLine : false,
-        labelPosition: labelPosition !== null && labelPosition !== void 0 ? labelPosition : 'inside',
-        legendPosition: legendPosition !== null && legendPosition !== void 0 ? legendPosition : 'bottom',
-        funcss: funcss !== null && funcss !== void 0 ? funcss : '',
-        legendCss: legendCss !== null && legendCss !== void 0 ? legendCss : '',
-        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,
-        strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : 1,
-        strokeColor: strokeColor !== null && strokeColor !== void 0 ? strokeColor : '#ffffff',
-        activeShape: activeShape !== null && activeShape !== void 0 ? activeShape : true,
-        inactiveShape: inactiveShape !== null && inactiveShape !== void 0 ? inactiveShape : true,
-        tooltipFormatter: tooltipFormatter !== null && tooltipFormatter !== void 0 ? tooltipFormatter : undefined,
-        labelFormatter: labelFormatter !== null && labelFormatter !== void 0 ? labelFormatter : undefined,
-        legendProps: legendProps !== null && legendProps !== void 0 ? legendProps : {},
-        tooltipProps: tooltipProps !== null && tooltipProps !== void 0 ? tooltipProps : {},
-        customTooltip: customTooltip !== null && customTooltip !== void 0 ? customTooltip : undefined,
-        customLabel: customLabel !== null && customLabel !== void 0 ? customLabel : 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,
-        onPieClick: onPieClick !== null && onPieClick !== void 0 ? onPieClick : undefined,
-        onPieEnter: onPieEnter !== null && onPieEnter !== void 0 ? onPieEnter : undefined,
-        onPieLeave: onPieLeave !== null && onPieLeave !== void 0 ? onPieLeave : undefined,
-        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
-    var mergedProps;
-    try {
-        var result = mergeWithLocal(localProps);
-        mergedProps = (_b = result === null || result === void 0 ? void 0 : result.props) !== null && _b !== void 0 ? _b : localProps;
-    }
-    catch (error) {
-        console.error('Error merging component configuration:', error);
-        mergedProps = localProps;
-    }
+var ChartPie = function (localProps) {
+    // Use component configuration with variant support
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('ChartPie', localProps.variant).mergeWithLocal;
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Debug: Log what props are actually coming through
+    react_1.default.useEffect(function () {
+        console.log('ChartPie merged props:', mergedProps);
+        console.log('ChartPie config available:', Object.keys(mergedProps).length > 0);
+    }, [mergedProps]);
     // Parse data if it's a string with enhanced validation
     var parsedData = (0, react_1.useMemo)(function () {
         var parsed = parseIfString(mergedProps.data, []);
@@ -254,58 +178,14 @@ var ChartPie = function (_a) {
     }, [mergedProps.data]);
     // Check if we have valid data to display
     var hasValidData = parsedData.length > 0;
-    // Extract final values with fallbacks
-    var final = (0, react_1.useMemo)(function () { return ({
-        data: parsedData,
-        id: mergedProps.id || 'pie-chart',
-        variant: mergedProps.variant,
-        donut: mergedProps.donut,
-        width: mergedProps.width,
-        height: mergedProps.height,
-        outerRadius: mergedProps.outerRadius,
-        innerRadius: mergedProps.donut ? (mergedProps.innerRadius || typeof mergedProps.outerRadius === 'number' ? mergedProps.outerRadius * 0.6 : '60%') : 0,
-        paddingAngle: mergedProps.paddingAngle,
-        cornerRadius: mergedProps.cornerRadius,
-        startAngle: mergedProps.startAngle,
-        endAngle: mergedProps.endAngle,
-        minAngle: mergedProps.minAngle,
-        showLegend: mergedProps.showLegend,
-        showTooltip: mergedProps.showTooltip,
-        showLabels: mergedProps.showLabels,
-        showLabelLine: mergedProps.showLabelLine,
-        labelPosition: mergedProps.labelPosition,
-        legendPosition: mergedProps.legendPosition,
-        funcss: mergedProps.funcss,
-        legendCss: mergedProps.legendCss,
-        chartBackground: mergedProps.chartBackground,
-        borderRadius: mergedProps.borderRadius,
-        padding: mergedProps.padding,
-        shadow: mergedProps.shadow,
-        strokeWidth: mergedProps.strokeWidth,
-        strokeColor: mergedProps.strokeColor,
-        activeShape: mergedProps.activeShape,
-        inactiveShape: mergedProps.inactiveShape,
-        tooltipFormatter: mergedProps.tooltipFormatter,
-        labelFormatter: mergedProps.labelFormatter,
-        legendProps: mergedProps.legendProps,
-        tooltipProps: mergedProps.tooltipProps,
-        customTooltip: mergedProps.customTooltip,
-        customLabel: mergedProps.customLabel,
-        animation: mergedProps.animation,
-        animationDuration: mergedProps.animationDuration,
-        isAnimationActive: mergedProps.isAnimationActive,
-        onPieClick: mergedProps.onPieClick,
-        onPieEnter: mergedProps.onPieEnter,
-        onPieLeave: mergedProps.onPieLeave,
-        aspect: mergedProps.aspect,
-        minHeight: mergedProps.minHeight,
-        maxHeight: mergedProps.maxHeight,
-        minWidth: mergedProps.minWidth,
-        maxWidth: mergedProps.maxWidth
-    }); }, [parsedData, mergedProps, hasValidData]);
-    // Configure legend based on position
+    // Use mergedProps directly - no need for complex fallback logic
+    var final = mergedProps;
+    // Configure legend based on position - WITH SAFE ACCESS
     var legendConfig = (0, react_1.useMemo)(function () {
-        var baseProps = __assign({ align: 'center', layout: final.legendPosition === 'left' || final.legendPosition === 'right' ? 'vertical' : 'horizontal', verticalAlign: final.legendPosition === 'top' ? 'top' : final.legendPosition === 'bottom' ? 'bottom' : 'middle', wrapperStyle: __assign({ paddingTop: final.legendPosition === 'top' ? '0' : '10px' }, final.legendProps.wrapperStyle) }, final.legendProps);
+        // Safely access legendProps with defaults
+        var safeLegendProps = final.legendProps || {};
+        var safeWrapperStyle = safeLegendProps.wrapperStyle || {};
+        var baseProps = __assign({ align: 'center', layout: final.legendPosition === 'left' || final.legendPosition === 'right' ? 'vertical' : 'horizontal', verticalAlign: final.legendPosition === 'top' ? 'top' : final.legendPosition === 'bottom' ? 'bottom' : 'middle', wrapperStyle: __assign({ paddingTop: final.legendPosition === 'top' ? '0' : '10px' }, safeWrapperStyle) }, safeLegendProps);
         return baseProps;
     }, [final.legendPosition, final.legendProps]);
     var TooltipComponent = final.customTooltip || CustomTooltip;
@@ -322,6 +202,13 @@ var ChartPie = function (_a) {
         padding: final.padding,
         boxShadow: final.shadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)' : undefined,
     }); }, [final]);
+    // Calculate inner radius for donut chart
+    var innerRadius = (0, react_1.useMemo)(function () {
+        if (final.donut) {
+            return final.innerRadius || (typeof final.outerRadius === 'number' ? final.outerRadius * 0.6 : '60%');
+        }
+        return 0;
+    }, [final.donut, final.innerRadius, final.outerRadius]);
     // 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 },
@@ -332,7 +219,7 @@ var ChartPie = function (_a) {
     var chartContent = (react_1.default.createElement(recharts_1.PieChart, null,
         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({}, legendConfig, { className: final.legendCss }))),
-        react_1.default.createElement(recharts_1.Pie, { data: final.data, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: final.outerRadius, innerRadius: final.innerRadius, paddingAngle: final.paddingAngle, cornerRadius: final.cornerRadius, startAngle: final.startAngle, endAngle: final.endAngle, minAngle: final.minAngle, label: LabelComponent ? react_1.default.createElement(LabelComponent, null) : final.showLabels, labelLine: final.showLabelLine, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration, onClick: final.onPieClick, onMouseEnter: final.onPieEnter, onMouseLeave: final.onPieLeave, activeShape: final.activeShape, inactiveShape: final.inactiveShape }, final.data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: resolveColor(entry.color) || defaultColors[index % defaultColors.length], stroke: resolveColor(final.strokeColor), strokeWidth: final.strokeWidth })); }))));
+        react_1.default.createElement(recharts_1.Pie, { data: parsedData, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: final.outerRadius, innerRadius: innerRadius, paddingAngle: final.paddingAngle, cornerRadius: final.cornerRadius, startAngle: final.startAngle, endAngle: final.endAngle, minAngle: final.minAngle, label: LabelComponent ? react_1.default.createElement(LabelComponent, null) : final.showLabels, labelLine: final.showLabelLine, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration, onClick: final.onPieClick, onMouseEnter: final.onPieEnter, onMouseLeave: final.onPieLeave, activeShape: final.activeShape, inactiveShape: final.inactiveShape }, parsedData.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: resolveColor(entry.color) || defaultColors[index % defaultColors.length], stroke: resolveColor(final.strokeColor), strokeWidth: final.strokeWidth })); }))));
     // Use ResponsiveContainer for automatic sizing
     return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: final.width, height: final.height, aspect: final.aspect, className: final.funcss, style: containerStyle }, chartContent));
 };

package/ui/input/FileUpload.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface FileUploadProps {
+    id?: string;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onDrop?: (files: FileList) => void;
+    status?: 'success' | 'warning' | 'danger' | 'info' | '';
+    label?: string;
+    helperText?: string;
+    icon?: React.ReactNode;
+    extra?: React.ReactNode;
+    button?: React.ReactNode;
+    btn?: boolean;
+    value?: any;
+    fullWidth?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    [key: string]: any;
+}
+export declare const FileUpload: React.FC<FileUploadProps & React.InputHTMLAttributes<HTMLInputElement>>;
+export default FileUpload;

package/ui/input/FileUpload.js

@@ -0,0 +1,235 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUpload = void 0;
+var react_1 = __importStar(require("react"));
+var pi_1 = require("react-icons/pi");
+var Button_1 = __importDefault(require("../button/Button"));
+var Text_1 = __importDefault(require("../text/Text"));
+var FileUpload = function (_a) {
+    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, onDrop = _a.onDrop, status = _a.status, _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.fullWidth, fullWidth = _d === void 0 ? true : _d, accept = _a.accept, multiple = _a.multiple, rest = __rest(_a, ["id", "name", "onChange", "onDrop", "status", "label", "helperText", "icon", "extra", "button", "btn", "value", "fullWidth", "accept", "multiple"]);
+    var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
+    var _f = (0, react_1.useState)(false), isDragging = _f[0], setIsDragging = _f[1];
+    var _g = (0, react_1.useState)(false), isDragOver = _g[0], setIsDragOver = _g[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var handleChange = function (e) {
+        var files = e.target.files;
+        if (files && files.length > 0) {
+            var file = files[0];
+            setFileName(file.name);
+        }
+        if (onChange)
+            onChange(e);
+    };
+    var handleDragEnter = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+        setIsDragOver(true);
+    };
+    var handleDragLeave = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        // Only set dragging to false if we're leaving the actual drop zone
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsDragging(false);
+        }
+    };
+    var handleDragOver = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(true);
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        setIsDragOver(false);
+        var files = e.dataTransfer.files;
+        if (files && files.length > 0) {
+            var file = files[0];
+            setFileName(file.name);
+            // Update the input element's files
+            if (inputRef.current) {
+                var dataTransfer = new DataTransfer();
+                for (var i = 0; i < files.length; i++) {
+                    dataTransfer.items.add(files[i]);
+                }
+                inputRef.current.files = dataTransfer.files;
+                // Trigger onChange if provided
+                if (onChange) {
+                    var event_1 = {
+                        target: inputRef.current,
+                        currentTarget: inputRef.current,
+                    };
+                    onChange(event_1);
+                }
+            }
+            // Call onDrop callback if provided
+            if (onDrop) {
+                onDrop(files);
+            }
+        }
+    };
+    var handleClick = function () {
+        if (inputRef.current) {
+            inputRef.current.click();
+        }
+    };
+    // Enhanced drag and drop styles
+    var getContainerStyles = function () {
+        var baseStyles = {
+            border: '0.17rem dashed var(--borderColor)',
+            borderRadius: '16px',
+            padding: 'var(--space-5)',
+            textAlign: 'center',
+            transition: 'all 0.3s ease',
+            cursor: 'pointer',
+            margin: 'auto',
+            color: 'var(--text-color)',
+            position: 'relative',
+        };
+        if (isDragOver) {
+            return __assign(__assign({}, baseStyles), { borderColor: 'var(--primary)', backgroundColor: 'var(--lighter)', transform: 'scale(1.02)', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)' });
+        }
+        if (isDragging) {
+            return __assign(__assign({}, baseStyles), { borderColor: 'var(--primary600)', backgroundColor: 'var(--lighter)' });
+        }
+        return baseStyles;
+    };
+    var getButtonStyles = function () {
+        if (isDragOver) {
+            return {
+                opacity: 0.8,
+                transform: 'scale(1.05)',
+                transition: 'all 0.2s ease',
+                backgroundColor: 'var(--primary600)',
+            };
+        }
+        return {};
+    };
+    // Render file info when file is selected
+    var renderFileInfo = function () {
+        if (!fileName)
+            return null;
+        return (react_1.default.createElement("div", { className: "file-info", style: {
+                marginTop: 'var(--space-3)',
+                padding: 'var(--space-3)',
+                backgroundColor: 'var(--light)',
+                borderRadius: '8px',
+                border: '1px solid var(--borderColor)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--space-3)',
+                justifyContent: 'center'
+            } },
+            react_1.default.createElement(pi_1.PiFile, { style: { color: 'var(--primary)', fontSize: '1.2rem' } }),
+            react_1.default.createElement(Text_1.default, { text: fileName, truncate: 1, block: true, size: 'sm' })));
+    };
+    if (btn) {
+        return (react_1.default.createElement("div", { className: "fileInput", style: { width: fullWidth ? '100%' : 'fit-content' } },
+            button || (react_1.default.createElement("div", { onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, style: { position: 'relative' } },
+                react_1.default.createElement(Button_1.default, { startIcon: icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: isDragOver ? "primary600" : "primary", fullWidth: fullWidth, raised: true, style: getButtonStyles() }, isDragOver ? 'Drop files here' : fileName || label))),
+            react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, onChange: handleChange, type: "file", value: value, accept: accept, multiple: multiple, className: "filedInput" }, rest)),
+            renderFileInfo(),
+            helperText && (react_1.default.createElement("div", { className: "input-helper-text ".concat(status ? "helper-".concat(status) : ''), style: { marginTop: 'var(--space-3)' } },
+                react_1.default.createElement("span", null, helperText)))));
+    }
+    return (react_1.default.createElement("div", { className: "_upload_container", style: getContainerStyles(), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick },
+        react_1.default.createElement("div", { className: "_upload_label" },
+            react_1.default.createElement("div", { className: "_upload_icon", style: {
+                    fontSize: '2.4rem',
+                    color: isDragOver ? 'var(--primary600)' : 'var(--primary)',
+                    marginBottom: '0.5rem',
+                    transition: 'color 0.3s ease',
+                    transform: isDragOver ? 'translateY(-2px)' : 'none'
+                } }, icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null)),
+            react_1.default.createElement("div", { className: "_upload_text fit" },
+                react_1.default.createElement(Text_1.default, { text: isDragOver ? 'Drop files to upload' : fileName || label, truncate: 1, block: true, style: {
+                        color: isDragOver ? 'var(--primary600)' : 'var(--text-color)',
+                        fontWeight: isDragOver ? '600' : '400'
+                    } })),
+            isDragOver && (react_1.default.createElement("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: 'var(--primary)',
+                    opacity: 0.1,
+                    borderRadius: '14px',
+                    pointerEvents: 'none'
+                } })),
+            !fileName && !isDragOver && (react_1.default.createElement("div", { style: {
+                    marginTop: 'var(--space-3)',
+                    fontSize: '0.8rem',
+                    color: 'var(--text-muted)',
+                    opacity: 0.7
+                } }, "Click or drag files to upload")),
+            extra && react_1.default.createElement("div", { className: "text-small opacity-3", style: { marginTop: 'var(--space-2)' } }, extra)),
+        react_1.default.createElement("input", __assign({ ref: inputRef, onChange: handleChange, type: "file", id: id, name: name, className: "_upload_input", value: value, accept: accept, multiple: multiple }, rest)),
+        renderFileInfo(),
+        helperText && (react_1.default.createElement("div", { className: "input-helper-text ".concat(status ? "helper-".concat(status) : ''), style: { marginTop: 'var(--space-3)' } },
+            react_1.default.createElement("span", null, helperText)))));
+};
+exports.FileUpload = FileUpload;
+exports.default = exports.FileUpload;