funuicss 3.7.1 → 3.7.3

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.d.ts

@@ -3,19 +3,73 @@ type PieDataItem = {
     label: string;
     value: number;
     color?: string;
+    [key: string]: any;
 };
+interface LegendProps {
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    layout?: 'horizontal' | 'vertical';
+    iconType?: 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye';
+    wrapperStyle?: Record<string, any>;
+    formatter?: (value: any, entry: any, index: number) => React.ReactNode;
+}
+interface TooltipProps {
+    cursor?: boolean | Record<string, any>;
+    separator?: string;
+    offset?: number;
+    allowEscapeViewBox?: {
+        x?: boolean;
+        y?: boolean;
+    };
+    wrapperStyle?: Record<string, any>;
+}
 interface PieChartProps {
-    data: PieDataItem[];
+    data: PieDataItem[] | string;
+    id?: string;
+    variant?: string;
     donut?: boolean;
-    showLegend?: boolean;
-    funcss?: string;
     width?: number | string;
-    legendCss: string;
     height?: number | string;
-    outerRadius?: number;
-    innerRadius?: number;
+    outerRadius?: number | string;
+    innerRadius?: number | string;
+    paddingAngle?: number;
+    cornerRadius?: number;
+    startAngle?: number;
+    endAngle?: number;
+    minAngle?: number;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    showLabels?: boolean;
+    showLabelLine?: boolean;
+    labelPosition?: 'inside' | 'outside' | 'center' | 'radial';
+    legendPosition?: 'top' | 'bottom' | 'left' | 'right';
+    funcss?: string;
+    legendCss?: string;
+    chartBackground?: string;
+    borderRadius?: string;
+    padding?: string;
+    shadow?: boolean;
+    strokeWidth?: number;
+    strokeColor?: string;
+    activeShape?: boolean | Record<string, any>;
+    inactiveShape?: boolean | Record<string, any>;
     tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
-    legendProps?: any;
+    labelFormatter?: (value: any, name: string, props: any) => React.ReactNode;
+    legendProps?: LegendProps;
+    tooltipProps?: TooltipProps;
+    customTooltip?: React.ComponentType<any>;
+    customLabel?: React.ComponentType<any>;
+    animation?: boolean;
+    animationDuration?: number;
+    isAnimationActive?: boolean;
+    onPieClick?: (data: any, index: number, event: React.MouseEvent) => void;
+    onPieEnter?: (data: any, index: number, event: React.MouseEvent) => void;
+    onPieLeave?: (data: any, index: number, event: React.MouseEvent) => void;
+    aspect?: number;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
 }
 declare const ChartPie: React.FC<PieChartProps>;
 export default ChartPie;

package/ui/chart/Pie.js

@@ -11,53 +11,216 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
-// Get CSS variable value from :root
+var componentUtils_1 = require("../../utils/componentUtils");
+// Parse string to object utility with enhanced error handling
+var parseIfString = function (value, fallback) {
+    if (typeof value === 'string') {
+        try {
+            var parsed = JSON.parse(value);
+            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;
+        }
+    }
+    if (value == null) {
+        return fallback;
+    }
+    return value;
+};
+// Safe array access utility
+var getSafeArray = function (value, fallback) {
+    if (fallback === void 0) { fallback = []; }
+    if (!value || !Array.isArray(value))
+        return fallback;
+    return value;
+};
+// CSS var resolver with error handling
 var getCssVar = function (varName) {
     var _a;
     if (typeof window === 'undefined')
         return '';
-    return (((_a = getComputedStyle(document.documentElement)
-        .getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '');
-};
-// Resolve color from CSS var or fallback
-var resolveColor = function (input, fallback) {
-    if (fallback === void 0) { fallback = '#8884d8'; }
-    if (!input)
-        return getCssVar('primary') || fallback;
-    if (input.startsWith('#'))
-        return input;
-    return getCssVar(input) || input;
-};
-// Custom Tooltip
+    try {
+        return ((_a = getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    }
+    catch (error) {
+        console.warn("Failed to get CSS variable --".concat(varName, ":"), error);
+        return '';
+    }
+};
+// Color resolver with fallbacks
+var resolveColor = function (color) {
+    if (!color)
+        return getCssVar('primary') || '#8884d8';
+    if (color.startsWith('#'))
+        return color;
+    var cssColor = getCssVar(color);
+    if (cssColor)
+        return cssColor;
+    var colorMap = {
+        primary: '#8884d8',
+        secondary: '#82ca9d',
+        error: '#ff4d4f',
+        warning: '#faad14',
+        success: '#52c41a',
+        info: '#1890ff'
+    };
+    return colorMap[color] || color || '#8884d8';
+};
+// Default color palette for pie charts
+var defaultColors = [
+    '#8884d8', '#82ca9d', '#ffc658', '#ff7300', '#8dd1e1',
+    '#d084d0', '#ff8042', '#a4de6c', '#d0ed57', '#ffbb28'
+];
+// Default Tooltip with error handling
 var CustomTooltip = function (_a) {
-    var active = _a.active, payload = _a.payload, label = _a.label;
-    if (active && payload && payload.length) {
-        return (react_1.default.createElement("div", { className: "dark raised round-edge p-2 text-sm" },
-            react_1.default.createElement("div", { className: "text-bold" }, payload[0].name),
-            react_1.default.createElement("div", { style: { lineHeight: 1 } },
-                "Count: ",
-                react_1.default.createElement("span", { className: "font-semibold" }, payload[0].value))));
-    }
-    return null;
-};
-var ChartPie = function (_a) {
-    var data = _a.data, _b = _a.donut, donut = _b === void 0 ? false : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, width = _a.width, height = _a.height, _e = _a.outerRadius, outerRadius = _e === void 0 ? 100 : _e, innerRadius = _a.innerRadius, tooltipFormatter = _a.tooltipFormatter, legendCss = _a.legendCss, _f = _a.legendProps, legendProps = _f === void 0 ? {} : _f;
-    var chart = (react_1.default.createElement(recharts_1.PieChart, { width: typeof width === 'number' ? width : undefined, height: typeof height === 'number' ? height : undefined },
-        react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter }),
-        showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps, { className: legendCss || "" })),
-        react_1.default.createElement(recharts_1.Pie, { data: data, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: outerRadius, innerRadius: donut ? innerRadius !== null && innerRadius !== void 0 ? innerRadius : outerRadius * 0.6 : 0, label: false, labelLine: false }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: resolveColor(entry.color), stroke: "#ffffff", strokeWidth: 1 })); }))));
-    if (!width && !height) {
-        return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: 300, className: funcss }, chart));
-    }
-    return (react_1.default.createElement("div", { className: funcss, style: {
-            width: typeof width === 'number' ? "".concat(width, "px") : width || '100%',
-            height: typeof height === 'number' ? "".concat(height, "px") : height || '300px',
-        } }, chart));
+    var _b;
+    var active = _a.active, payload = _a.payload, label = _a.label, formatter = _a.formatter;
+    if (!active || !payload || !Array.isArray(payload) || payload.length === 0) {
+        return null;
+    }
+    try {
+        var data = payload[0];
+        return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm", style: {
+                maxWidth: '300px',
+                backgroundColor: 'var(--background, #fff)',
+                border: '1px solid var(--border-color, #e2e8f0)'
+            } },
+            react_1.default.createElement("div", { className: "text-bold mb-1", style: { color: 'var(--text-color, #1a202c)' } }, data.name || 'N/A'),
+            react_1.default.createElement("div", { style: { lineHeight: 1.4, display: 'flex', alignItems: 'center', gap: '8px' } },
+                react_1.default.createElement("div", { style: {
+                        width: '12px',
+                        height: '12px',
+                        backgroundColor: data.color || ((_b = data.payload) === null || _b === void 0 ? void 0 : _b.fill) || '#8884d8',
+                        borderRadius: '2px'
+                    } }),
+                react_1.default.createElement("span", { style: { fontWeight: 500, color: 'var(--text-color, #1a202c)' } }, "Value:"),
+                react_1.default.createElement("span", { style: { fontWeight: 600, color: 'var(--text-color, #1a202c)' } }, formatter ? formatter(data.value, data.name, data) : data.value)),
+            data.payload && data.payload.percentage && (react_1.default.createElement("div", { style: { marginTop: '4px', fontSize: '0.75rem', color: 'var(--text-muted, #6b7280)' } },
+                data.payload.percentage,
+                "%"))));
+    }
+    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")));
+    }
+};
+// Default Label component
+var CustomLabel = function (_a) {
+    var cx = _a.cx, cy = _a.cy, midAngle = _a.midAngle, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, percent = _a.percent, value = _a.value, name = _a.name;
+    if (!percent || percent < 0.05)
+        return null; // Hide labels for very small slices
+    var RADIAN = Math.PI / 180;
+    var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    var x = cx + radius * Math.cos(-midAngle * RADIAN);
+    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 (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, []);
+        var safeData = getSafeArray(parsed);
+        // Calculate percentages for tooltip
+        var total = safeData.reduce(function (sum, item) { return sum + (item.value || 0); }, 0);
+        return safeData.map(function (item) { return (__assign(__assign({}, item), { percentage: total > 0 ? ((item.value / total) * 100).toFixed(1) : '0' })); });
+    }, [mergedProps.data]);
+    // Check if we have valid data to display
+    var hasValidData = parsedData.length > 0;
+    // 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 () {
+        // 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;
+    var LabelComponent = final.customLabel || (final.showLabels ? CustomLabel : undefined);
+    var containerStyle = (0, react_1.useMemo)(function () { return ({
+        width: final.width,
+        height: final.height,
+        minHeight: final.minHeight,
+        maxHeight: final.maxHeight,
+        minWidth: final.minWidth,
+        maxWidth: final.maxWidth,
+        background: final.chartBackground,
+        borderRadius: final.borderRadius,
+        padding: final.padding,
+        boxShadow: final.shadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)' : undefined,
+    }); }, [final]);
+    // 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 },
+            react_1.default.createElement("div", { className: "text-center text-muted" },
+                react_1.default.createElement("div", { className: "text-lg mb-2" }, "\uD83E\uDD67"),
+                react_1.default.createElement("div", null, "No chart data available"))));
+    }
+    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: 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));
 };
 exports.default = ChartPie;

package/ui/drop/Dropdown.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-type Position = 'left' | 'right';
-type Direction = 'dropdown' | 'dropup';
+type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 interface DropdownItem {
     label: React.ReactNode;
     onClick?: () => void;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    disabled?: boolean;
+    divider?: boolean;
 }
 interface DropdownProps {
-    direction?: Direction;
     position?: Position;
     button: React.ReactNode;
     items: DropdownItem[];
@@ -16,6 +16,7 @@ interface DropdownProps {
     openOnHover?: boolean;
     closableOnlyOutside?: boolean;
     className?: string;
+    menuClassName?: string;
     width?: string;
     minWidth?: string;
     maxWidth?: string;

package/ui/drop/Dropdown.js

@@ -33,18 +33,12 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var Flex_1 = __importDefault(require("../flex/Flex"));
 var Dropdown = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'dropdown' : _b, _c = _a.position, position = _c === void 0 ? 'left' : _c, button = _a.button, items = _a.items, _d = _a.hoverable, hoverable = _d === void 0 ? true : _d, _e = _a.openOnHover, openOnHover = _e === void 0 ? true : _e, _f = _a.closableOnlyOutside, closableOnlyOutside = _f === void 0 ? false : _f, _g = _a.className, className = _g === void 0 ? '' : _g, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight;
+    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, button = _a.button, items = _a.items, _c = _a.hoverable, hoverable = _c === void 0 ? true : _c, _d = _a.openOnHover, openOnHover = _d === void 0 ? true : _d, _e = _a.closableOnlyOutside, closableOnlyOutside = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.menuClassName, menuClassName = _g === void 0 ? '' : _g, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight;
     var containerRef = (0, react_1.useRef)(null);
     var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
-    var containerClass = "".concat(direction, " ").concat(position, " ").concat(className).trim();
-    var menuClass = "drop-menu ".concat(hoverable ? ' item-hoverable' : '');
     (0, react_1.useEffect)(function () {
         if (openOnHover)
             return;
@@ -57,27 +51,28 @@ var Dropdown = function (_a) {
         return function () { return document.removeEventListener('mousedown', handleClickOutside); };
     }, [openOnHover]);
     var showMenu = openOnHover || open;
-    return (react_1.default.createElement("div", { ref: containerRef, className: containerClass, onMouseEnter: function () { return openOnHover && setOpen(true); }, onMouseLeave: function () { return openOnHover && setOpen(false); } },
-        react_1.default.createElement("div", { className: "drop-button", onClick: function () { return !openOnHover && setOpen(!open); }, style: { cursor: !openOnHover ? 'pointer' : undefined } }, button),
-        showMenu &&
-            react_1.default.createElement("div", { className: menuClass, style: {
-                    width: width,
-                    minWidth: minWidth,
-                    maxWidth: maxWidth,
-                    height: height,
-                    minHeight: minHeight,
-                    maxHeight: maxHeight,
-                } }, items.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "drop-item hoverable", onClick: function () {
-                    var _a;
-                    if (!closableOnlyOutside) {
-                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-                        if (!openOnHover)
-                            setOpen(false);
-                    }
-                } },
-                react_1.default.createElement(Flex_1.default, { wrap: 'nowrap', gap: 0.2, alignItems: 'center', justify: 'flex-start' },
-                    react_1.default.createElement("span", { style: { lineHeight: 0 } }, (item === null || item === void 0 ? void 0 : item.startIcon) || ''),
-                    item.label,
-                    react_1.default.createElement("span", { style: { lineHeight: 0 } }, (item === null || item === void 0 ? void 0 : item.endIcon) || '')))); }))));
+    var menuStyle = {
+        width: width,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        height: height,
+        minHeight: minHeight,
+        maxHeight: maxHeight,
+    };
+    return (react_1.default.createElement("div", { ref: containerRef, className: "dropdown-container ".concat(className), onMouseEnter: function () { return openOnHover && setOpen(true); }, onMouseLeave: function () { return openOnHover && setOpen(false); } },
+        react_1.default.createElement("div", { onClick: function () { return !openOnHover && setOpen(!open); }, style: { cursor: !openOnHover ? 'pointer' : undefined } }, button),
+        showMenu && (react_1.default.createElement("div", { className: "dropdown-menu ".concat(position, " ").concat(menuClassName), style: menuStyle }, items.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index }, item.divider ? (react_1.default.createElement("div", { className: "dropdown-divider" })) : (react_1.default.createElement("div", { className: "dropdown-item ".concat(item.disabled ? 'disabled' : '', " ").concat(!hoverable ? 'no-hover' : ''), onClick: function () {
+                var _a;
+                if (item.disabled)
+                    return;
+                if (!closableOnlyOutside) {
+                    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                    if (!openOnHover)
+                        setOpen(false);
+                }
+            } },
+            item.startIcon && (react_1.default.createElement("span", { className: "dropdown-item-icon" }, item.startIcon)),
+            react_1.default.createElement("span", { className: "dropdown-item-label" }, item.label),
+            item.endIcon && (react_1.default.createElement("span", { className: "dropdown-item-icon" }, item.endIcon)))))); })))));
 };
 exports.default = Dropdown;