funuicss 3.7.2 → 3.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/css/fun.css +72 -8
  2. package/index.d.ts +1 -0
  3. package/index.js +3 -1
  4. package/package.json +1 -1
  5. package/ui/chart/Bar.js +16 -170
  6. package/ui/chart/Line.js +19 -124
  7. package/ui/chart/Pie.js +25 -138
  8. package/ui/input/FileUpload.d.ts +21 -0
  9. package/ui/input/FileUpload.js +235 -0
  10. package/ui/input/Input.d.ts +0 -7
  11. package/ui/input/Input.js +16 -132
  12. package/ui/text/Text.d.ts +1 -0
  13. package/ui/text/Text.js +2 -2
  14. package/ui/vista/Vista.js +12 -181
package/css/fun.css CHANGED
@@ -2927,14 +2927,14 @@ select.input {
2927
2927
  padding-top: 1.3rem;
2928
2928
  padding-bottom: 0.5rem;
2929
2929
  }
2930
- }
2931
-
2932
- .fileInput{
2930
+ }/* Enhanced File Upload Styles */
2931
+ .fileInput {
2933
2932
  position: relative;
2934
2933
  width: fit-content !important;
2935
2934
  cursor: pointer;
2936
2935
  }
2937
- .filedInput{
2936
+
2937
+ .filedInput {
2938
2938
  position: absolute;
2939
2939
  top: 0;
2940
2940
  left: 0;
@@ -2946,39 +2946,103 @@ select.input {
2946
2946
  z-index: 2;
2947
2947
  }
2948
2948
 
2949
-
2950
2949
  ._upload_container {
2951
- border: 0.17rem dashed var(--borderColor);
2950
+ border: 0.17rem dashed var(--borderColor);
2952
2951
  border-radius: 16px;
2953
2952
  padding: var(--space-5);
2954
2953
  text-align: center;
2955
- transition: border-color 0.3s ease;
2954
+ transition: all 0.3s ease;
2956
2955
  cursor: pointer;
2957
2956
  margin: auto;
2958
2957
  color: var(--text-color);
2958
+ position: relative;
2959
+ overflow: hidden;
2959
2960
  }
2960
2961
 
2961
2962
  ._upload_container:hover {
2962
2963
  border-color: var(--primary);
2963
2964
  background-color: var(--lighter);
2964
- /* color: var(--primary800); */
2965
+ }
2966
+
2967
+ ._upload_container.drag-over {
2968
+ border-color: var(--primary);
2969
+ background-color: var(--lighter);
2970
+ transform: scale(1.02);
2971
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2965
2972
  }
2966
2973
 
2967
2974
  ._upload_label {
2968
2975
  display: block;
2969
2976
  cursor: pointer;
2977
+ position: relative;
2978
+ z-index: 1;
2970
2979
  }
2971
2980
 
2972
2981
  ._upload_icon {
2973
2982
  font-size: 2.4rem;
2974
2983
  color: var(--primary);
2975
2984
  margin-bottom: 0.5rem;
2985
+ transition: all 0.3s ease;
2976
2986
  }
2977
2987
 
2978
2988
  ._upload_input {
2979
2989
  display: none;
2980
2990
  }
2981
2991
 
2992
+ /* Drag and drop overlay */
2993
+ .drag-overlay {
2994
+ position: absolute;
2995
+ top: 0;
2996
+ left: 0;
2997
+ right: 0;
2998
+ bottom: 0;
2999
+ background: var(--primary);
3000
+ opacity: 0.1;
3001
+ border-radius: 14px;
3002
+ pointer-events: none;
3003
+ }
3004
+
3005
+ /* File info display */
3006
+ .file-info {
3007
+ margin-top: var(--space-3);
3008
+ padding: var(--space-3);
3009
+ background-color: var(--light);
3010
+ border-radius: 8px;
3011
+ border: 1px solid var(--borderColor);
3012
+ display: flex;
3013
+ align-items: center;
3014
+ gap: var(--space-3);
3015
+ justify-content: center;
3016
+ animation: fadeIn 0.3s ease;
3017
+ }
3018
+
3019
+ @keyframes fadeIn {
3020
+ from {
3021
+ opacity: 0;
3022
+ transform: translateY(-10px);
3023
+ }
3024
+ to {
3025
+ opacity: 1;
3026
+ transform: translateY(0);
3027
+ }
3028
+ }
3029
+
3030
+ /* Status colors */
3031
+ ._upload_container.success {
3032
+ border-color: var(--success);
3033
+ }
3034
+
3035
+ ._upload_container.warning {
3036
+ border-color: var(--warning);
3037
+ }
3038
+
3039
+ ._upload_container.danger {
3040
+ border-color: var(--danger);
3041
+ }
3042
+
3043
+ ._upload_container.info {
3044
+ border-color: var(--info);
3045
+ }
2982
3046
 
2983
3047
  .custom-select {
2984
3048
  position: relative;
package/index.d.ts CHANGED
@@ -55,6 +55,7 @@ export { default as Slider } from "./ui/slider/Slider";
55
55
  export { default as FlexItem } from "./ui/flex/FlexItem";
56
56
  export { default as ScrollToTop } from "./ui/scrolltotop/ScrollToTop";
57
57
  export { default as Select } from "./ui/select/Select";
58
+ export { default as FileUpload } from "./ui/input/FileUpload";
58
59
  export { default as Cookie } from "./js/Cookie";
59
60
  export { useVariable, useAsset, useAssetType, useAssetValue, useAssets, useVariables, } from "./ui/theme/theme";
60
61
  export { FunGet } from "./js/Fun";
package/index.js CHANGED
@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.View = exports.ScrollInView = exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.SearchableInput = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
7
- exports.GoogleAnalytics = exports.FunGet = exports.useVariables = exports.useAssets = exports.useAssetValue = exports.useAssetType = exports.useAsset = exports.useVariable = exports.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
7
+ exports.GoogleAnalytics = exports.FunGet = exports.useVariables = exports.useAssets = exports.useAssetValue = exports.useAssetType = exports.useAsset = exports.useVariable = exports.Cookie = exports.FileUpload = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
8
8
  var Alert_1 = require("./ui/alert/Alert");
9
9
  Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
10
10
  var theme_1 = require("./ui/theme/theme");
@@ -119,6 +119,8 @@ var ScrollToTop_1 = require("./ui/scrolltotop/ScrollToTop");
119
119
  Object.defineProperty(exports, "ScrollToTop", { enumerable: true, get: function () { return __importDefault(ScrollToTop_1).default; } });
120
120
  var Select_1 = require("./ui/select/Select");
121
121
  Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });
122
+ var FileUpload_1 = require("./ui/input/FileUpload");
123
+ Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return __importDefault(FileUpload_1).default; } });
122
124
  // js
123
125
  var Cookie_1 = require("./js/Cookie");
124
126
  Object.defineProperty(exports, "Cookie", { enumerable: true, get: function () { return __importDefault(Cookie_1).default; } });
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.7.2",
2
+ "version": "3.7.3",
3
3
  "name": "funuicss",
4
4
  "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!",
5
5
  "main": "index.js",
package/ui/chart/Bar.js CHANGED
@@ -155,113 +155,17 @@ var CustomTooltip = function (_a) {
155
155
  react_1.default.createElement("div", { className: "text-error" }, "Error displaying tooltip")));
156
156
  }
157
157
  };
158
- var Bars = function (_a) {
159
- var _b, _c;
160
- var data = _a.data, series = _a.series, id = _a.id, _d = _a.variant, variant = _d === void 0 ? '' : _d,
161
- // Layout & Dimensions
162
- _e = _a.width,
163
- // Layout & Dimensions
164
- width = _e === void 0 ? '100%' : _e, _f = _a.height, height = _f === void 0 ? 300 : _f, _g = _a.layout, layout = _g === void 0 ? 'horizontal' : _g, _h = _a.margin, margin = _h === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _h,
165
- // Bar styling
166
- _j = _a.barRadius,
167
- // Bar styling
168
- barRadius = _j === void 0 ? 6 : _j, _k = _a.barSize, barSize = _k === void 0 ? 30 : _k, _l = _a.barGap, barGap = _l === void 0 ? 4 : _l, _m = _a.barCategoryGap, barCategoryGap = _m === void 0 ? '10%' : _m, _o = _a.maxBarSize, maxBarSize = _o === void 0 ? 100 : _o,
169
- // Display controls
170
- _p = _a.showGrid,
171
- // Display controls
172
- showGrid = _p === void 0 ? true : _p, _q = _a.horizontalLines, horizontalLines = _q === void 0 ? false : _q, _r = _a.verticalLines, verticalLines = _r === void 0 ? true : _r, _s = _a.showLegend, showLegend = _s === void 0 ? true : _s, _t = _a.showXAxis, showXAxis = _t === void 0 ? true : _t, _u = _a.showYAxis, showYAxis = _u === void 0 ? false : _u, _v = _a.showTooltip, showTooltip = _v === void 0 ? true : _v,
173
- // Appearance controls
174
- funcss = _a.funcss, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval, gridStroke = _a.gridStroke, _w = _a.gridStrokeDasharray, gridStrokeDasharray = _w === void 0 ? "3 3" : _w,
175
- // Axis controls
176
- dy = _a.dy, _x = _a.xAxisProps, xAxisProps = _x === void 0 ? {} : _x, _y = _a.yAxisProps, yAxisProps = _y === void 0 ? {} : _y, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _z = _a.tickLine, tickLine = _z === void 0 ? true : _z, _0 = _a.axisLine, axisLine = _0 === void 0 ? true : _0,
177
- // Tooltip / Legend
178
- tooltipFormatter = _a.tooltipFormatter, _1 = _a.legendProps, legendProps = _1 === void 0 ? {} : _1, _2 = _a.tooltipProps, tooltipProps = _2 === void 0 ? {} : _2, customTooltip = _a.customTooltip,
179
- // Animation & Interaction
180
- _3 = _a.animation,
181
- // Animation & Interaction
182
- animation = _3 === void 0 ? true : _3, _4 = _a.animationDuration, animationDuration = _4 === void 0 ? 500 : _4, _5 = _a.isAnimationActive, isAnimationActive = _5 === void 0 ? true : _5, syncId = _a.syncId,
183
- // Stacking & Grouping
184
- _6 = _a.stackOffset,
185
- // Stacking & Grouping
186
- stackOffset = _6 === void 0 ? 'none' : _6, barCategoryGapPercentage = _a.barCategoryGapPercentage,
187
- // Styling
188
- chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _7 = _a.shadow, shadow = _7 === void 0 ? false : _7,
189
- // Responsive
190
- aspect = _a.aspect, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth,
191
- // Advanced
192
- onBarClick = _a.onBarClick, onBarMouseEnter = _a.onBarMouseEnter, onBarMouseLeave = _a.onBarMouseLeave;
193
- // Use component configuration with variant support and error handling
194
- var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('BarChart', variant).mergeWithLocal;
195
- // Create local props object with null checks
196
- var localProps = {
197
- data: data !== null && data !== void 0 ? data : [],
198
- series: series !== null && series !== void 0 ? series : [],
199
- id: id !== null && id !== void 0 ? id : '',
200
- variant: variant !== null && variant !== void 0 ? variant : '',
201
- width: width !== null && width !== void 0 ? width : '100%',
202
- height: height !== null && height !== void 0 ? height : 300,
203
- layout: layout !== null && layout !== void 0 ? layout : 'horizontal',
204
- margin: margin !== null && margin !== void 0 ? margin : { top: 10, right: 30, left: 0, bottom: 20 },
205
- barRadius: barRadius !== null && barRadius !== void 0 ? barRadius : 6,
206
- barSize: barSize !== null && barSize !== void 0 ? barSize : 30,
207
- barGap: barGap !== null && barGap !== void 0 ? barGap : 4,
208
- barCategoryGap: barCategoryGap !== null && barCategoryGap !== void 0 ? barCategoryGap : '10%',
209
- maxBarSize: maxBarSize !== null && maxBarSize !== void 0 ? maxBarSize : 100,
210
- showGrid: showGrid !== null && showGrid !== void 0 ? showGrid : true,
211
- horizontalLines: horizontalLines !== null && horizontalLines !== void 0 ? horizontalLines : false,
212
- verticalLines: verticalLines !== null && verticalLines !== void 0 ? verticalLines : true,
213
- showLegend: showLegend !== null && showLegend !== void 0 ? showLegend : true,
214
- showXAxis: showXAxis !== null && showXAxis !== void 0 ? showXAxis : true,
215
- showYAxis: showYAxis !== null && showYAxis !== void 0 ? showYAxis : false,
216
- showTooltip: showTooltip !== null && showTooltip !== void 0 ? showTooltip : true,
217
- funcss: funcss !== null && funcss !== void 0 ? funcss : '',
218
- rotateLabel: rotateLabel !== null && rotateLabel !== void 0 ? rotateLabel : 0,
219
- xLabelSize: xLabelSize !== null && xLabelSize !== void 0 ? xLabelSize : "0.8rem",
220
- yLabelSize: yLabelSize !== null && yLabelSize !== void 0 ? yLabelSize : "0.8rem",
221
- xInterval: xInterval !== null && xInterval !== void 0 ? xInterval : undefined,
222
- yInterval: yInterval !== null && yInterval !== void 0 ? yInterval : undefined,
223
- gridStroke: gridStroke !== null && gridStroke !== void 0 ? gridStroke : '',
224
- gridStrokeDasharray: gridStrokeDasharray !== null && gridStrokeDasharray !== void 0 ? gridStrokeDasharray : "3 3",
225
- dy: dy !== null && dy !== void 0 ? dy : 0,
226
- xAxisProps: xAxisProps !== null && xAxisProps !== void 0 ? xAxisProps : {},
227
- yAxisProps: yAxisProps !== null && yAxisProps !== void 0 ? yAxisProps : {},
228
- xAxisLabel: xAxisLabel !== null && xAxisLabel !== void 0 ? xAxisLabel : '',
229
- yAxisLabel: yAxisLabel !== null && yAxisLabel !== void 0 ? yAxisLabel : '',
230
- tickLine: tickLine !== null && tickLine !== void 0 ? tickLine : true,
231
- axisLine: axisLine !== null && axisLine !== void 0 ? axisLine : true,
232
- tooltipFormatter: tooltipFormatter !== null && tooltipFormatter !== void 0 ? tooltipFormatter : undefined,
233
- legendProps: legendProps !== null && legendProps !== void 0 ? legendProps : {},
234
- tooltipProps: tooltipProps !== null && tooltipProps !== void 0 ? tooltipProps : {},
235
- customTooltip: customTooltip !== null && customTooltip !== void 0 ? customTooltip : undefined,
236
- animation: animation !== null && animation !== void 0 ? animation : true,
237
- animationDuration: animationDuration !== null && animationDuration !== void 0 ? animationDuration : 500,
238
- isAnimationActive: isAnimationActive !== null && isAnimationActive !== void 0 ? isAnimationActive : true,
239
- syncId: syncId !== null && syncId !== void 0 ? syncId : '',
240
- stackOffset: stackOffset !== null && stackOffset !== void 0 ? stackOffset : 'none',
241
- barCategoryGapPercentage: barCategoryGapPercentage !== null && barCategoryGapPercentage !== void 0 ? barCategoryGapPercentage : undefined,
242
- chartBackground: chartBackground !== null && chartBackground !== void 0 ? chartBackground : '',
243
- borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : '',
244
- padding: padding !== null && padding !== void 0 ? padding : '',
245
- shadow: shadow !== null && shadow !== void 0 ? shadow : false,
246
- aspect: aspect !== null && aspect !== void 0 ? aspect : undefined,
247
- minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : undefined,
248
- maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
249
- minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : undefined,
250
- maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : undefined,
251
- onBarClick: onBarClick !== null && onBarClick !== void 0 ? onBarClick : undefined,
252
- onBarMouseEnter: onBarMouseEnter !== null && onBarMouseEnter !== void 0 ? onBarMouseEnter : undefined,
253
- onBarMouseLeave: onBarMouseLeave !== null && onBarMouseLeave !== void 0 ? onBarMouseLeave : undefined
254
- };
255
- // Merge with config - LOCAL PROPS OVERRIDE CONFIG with error handling
256
- var mergedProps;
257
- try {
258
- var result = mergeWithLocal(localProps);
259
- mergedProps = (_b = result === null || result === void 0 ? void 0 : result.props) !== null && _b !== void 0 ? _b : localProps;
260
- }
261
- catch (error) {
262
- console.error('Error merging component configuration:', error);
263
- mergedProps = localProps;
264
- }
158
+ var Bars = function (localProps) {
159
+ var _a;
160
+ // Use component configuration with variant support
161
+ var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Bar', localProps.variant).mergeWithLocal;
162
+ // Merge with config - LOCAL PROPS OVERRIDE CONFIG
163
+ var mergedProps = mergeWithLocal(localProps).props;
164
+ // Debug: Log what props are actually coming through
165
+ react_1.default.useEffect(function () {
166
+ console.log('Bars merged props:', mergedProps);
167
+ console.log('Bars config available:', Object.keys(mergedProps).length > 0);
168
+ }, [mergedProps]);
265
169
  // Parse data and series if they're strings with enhanced validation
266
170
  var parsedData = (0, react_1.useMemo)(function () {
267
171
  var parsed = parseIfString(mergedProps.data, []);
@@ -276,66 +180,8 @@ var Bars = function (_a) {
276
180
  // Check if we have valid data to display
277
181
  var hasValidData = parsedData.length > 0 && parsedSeries.length > 0;
278
182
  var isVertical = mergedProps.layout === 'vertical';
279
- // Extract final values with fallbacks
280
- var final = (0, react_1.useMemo)(function () { return ({
281
- data: parsedData,
282
- series: parsedSeries,
283
- id: mergedProps.id || 'bar-chart',
284
- variant: mergedProps.variant,
285
- width: mergedProps.width,
286
- height: mergedProps.height,
287
- layout: mergedProps.layout,
288
- margin: mergedProps.margin,
289
- barRadius: mergedProps.barRadius,
290
- barSize: mergedProps.barSize,
291
- barGap: mergedProps.barGap,
292
- barCategoryGap: mergedProps.barCategoryGap,
293
- maxBarSize: mergedProps.maxBarSize,
294
- showGrid: mergedProps.showGrid,
295
- horizontalLines: mergedProps.horizontalLines,
296
- verticalLines: mergedProps.verticalLines,
297
- showLegend: mergedProps.showLegend,
298
- showXAxis: mergedProps.showXAxis,
299
- showYAxis: mergedProps.showYAxis,
300
- showTooltip: mergedProps.showTooltip,
301
- funcss: mergedProps.funcss,
302
- rotateLabel: mergedProps.rotateLabel,
303
- xLabelSize: mergedProps.xLabelSize,
304
- yLabelSize: mergedProps.yLabelSize,
305
- xInterval: mergedProps.xInterval,
306
- yInterval: mergedProps.yInterval,
307
- gridStroke: mergedProps.gridStroke,
308
- gridStrokeDasharray: mergedProps.gridStrokeDasharray,
309
- dy: mergedProps.dy,
310
- xAxisProps: mergedProps.xAxisProps,
311
- yAxisProps: mergedProps.yAxisProps,
312
- xAxisLabel: mergedProps.xAxisLabel,
313
- yAxisLabel: mergedProps.yAxisLabel,
314
- tickLine: mergedProps.tickLine,
315
- axisLine: mergedProps.axisLine,
316
- tooltipFormatter: mergedProps.tooltipFormatter,
317
- legendProps: mergedProps.legendProps,
318
- tooltipProps: mergedProps.tooltipProps,
319
- customTooltip: mergedProps.customTooltip,
320
- animation: mergedProps.animation,
321
- animationDuration: mergedProps.animationDuration,
322
- isAnimationActive: mergedProps.isAnimationActive,
323
- syncId: mergedProps.syncId,
324
- stackOffset: mergedProps.stackOffset,
325
- barCategoryGapPercentage: mergedProps.barCategoryGapPercentage,
326
- chartBackground: mergedProps.chartBackground,
327
- borderRadius: mergedProps.borderRadius,
328
- padding: mergedProps.padding,
329
- shadow: mergedProps.shadow,
330
- aspect: mergedProps.aspect,
331
- minHeight: mergedProps.minHeight,
332
- maxHeight: mergedProps.maxHeight,
333
- minWidth: mergedProps.minWidth,
334
- maxWidth: mergedProps.maxWidth,
335
- onBarClick: mergedProps.onBarClick,
336
- onBarMouseEnter: mergedProps.onBarMouseEnter,
337
- onBarMouseLeave: mergedProps.onBarMouseLeave
338
- }); }, [parsedData, parsedSeries, mergedProps, hasValidData]);
183
+ // Use mergedProps directly - no need for complex fallback logic
184
+ var final = mergedProps;
339
185
  // Smart default margins based on layout
340
186
  var smartMargin = (0, react_1.useMemo)(function () {
341
187
  var baseMargin = { top: 10, right: 30, left: 0, bottom: 20 };
@@ -384,9 +230,9 @@ var Bars = function (_a) {
384
230
  react_1.default.createElement("div", null, "No chart data available"))));
385
231
  }
386
232
  return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: final.width, height: smartHeight, aspect: final.aspect, className: final.funcss, style: containerStyle },
387
- react_1.default.createElement(recharts_1.BarChart, { data: final.data, layout: final.layout, margin: smartMargin, barGap: final.barGap, barCategoryGap: final.barCategoryGap, stackOffset: final.stackOffset, syncId: final.syncId },
233
+ react_1.default.createElement(recharts_1.BarChart, { data: parsedData, layout: final.layout, margin: smartMargin, barGap: final.barGap, barCategoryGap: final.barCategoryGap, stackOffset: final.stackOffset, syncId: final.syncId },
388
234
  final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0', horizontal: final.horizontalLines !== false, vertical: final.verticalLines !== false })),
389
- final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: isVertical ? 'number' : 'category', dataKey: isVertical ? undefined : 'label', interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize, strokeWidth: 0.2, angle: final.rotateLabel || (isVertical ? 0 : -35), dy: (_c = final.dy) !== null && _c !== void 0 ? _c : (isVertical ? 0 : 10), tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? {
235
+ final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: isVertical ? 'number' : 'category', dataKey: isVertical ? undefined : 'label', interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize, strokeWidth: 0.2, angle: final.rotateLabel || (isVertical ? 0 : -35), dy: (_a = final.dy) !== null && _a !== void 0 ? _a : (isVertical ? 0 : 10), tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? {
390
236
  value: final.xAxisLabel,
391
237
  position: isVertical ? 'insideBottom' : 'insideBottom',
392
238
  offset: isVertical ? -10 : -30
@@ -398,7 +244,7 @@ var Bars = function (_a) {
398
244
  } : undefined }, final.yAxisProps))),
399
245
  final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
400
246
  final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
401
- final.series.map(function (s, index) {
247
+ parsedSeries.map(function (s, index) {
402
248
  if (!s || !s.dataKey) {
403
249
  console.warn('Invalid series configuration at index:', index);
404
250
  return null;
package/ui/chart/Line.js CHANGED
@@ -152,71 +152,17 @@ var CustomTooltip = function (_a) {
152
152
  react_1.default.createElement("div", { className: "text-error" }, "Error displaying tooltip")));
153
153
  }
154
154
  };
155
- var Lines = function (_a) {
156
- var _b, _c;
157
- 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;
158
- // Use component configuration with variant support and error handling
159
- var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('AreaChart', variant).mergeWithLocal;
160
- // Create local props object with null checks
161
- var localProps = {
162
- data: data !== null && data !== void 0 ? data : [],
163
- id: id !== null && id !== void 0 ? id : '',
164
- series: series !== null && series !== void 0 ? series : [],
165
- fromColor: fromColor !== null && fromColor !== void 0 ? fromColor : '',
166
- toColor: toColor !== null && toColor !== void 0 ? toColor : '',
167
- dy: dy !== null && dy !== void 0 ? dy : 0,
168
- showGrid: showGrid !== null && showGrid !== void 0 ? showGrid : true,
169
- horizontalLines: horizontalLines !== null && horizontalLines !== void 0 ? horizontalLines : false,
170
- showLegend: showLegend !== null && showLegend !== void 0 ? showLegend : true,
171
- showXAxis: showXAxis !== null && showXAxis !== void 0 ? showXAxis : true,
172
- showYAxis: showYAxis !== null && showYAxis !== void 0 ? showYAxis : false,
173
- showTooltip: showTooltip !== null && showTooltip !== void 0 ? showTooltip : true,
174
- funcss: funcss !== null && funcss !== void 0 ? funcss : '',
175
- curveType: curveType !== null && curveType !== void 0 ? curveType : 'monotone',
176
- height: height !== null && height !== void 0 ? height : "100%",
177
- width: width !== null && width !== void 0 ? width : '100%',
178
- margin: margin !== null && margin !== void 0 ? margin : { top: 10, right: 30, left: 0, bottom: 20 },
179
- xAxisProps: xAxisProps !== null && xAxisProps !== void 0 ? xAxisProps : {},
180
- yAxisProps: yAxisProps !== null && yAxisProps !== void 0 ? yAxisProps : {},
181
- tooltipFormatter: tooltipFormatter !== null && tooltipFormatter !== void 0 ? tooltipFormatter : undefined,
182
- legendProps: legendProps !== null && legendProps !== void 0 ? legendProps : {},
183
- tooltipProps: tooltipProps !== null && tooltipProps !== void 0 ? tooltipProps : {},
184
- rotateLabel: rotateLabel !== null && rotateLabel !== void 0 ? rotateLabel : 0,
185
- xLabelSize: xLabelSize !== null && xLabelSize !== void 0 ? xLabelSize : "0.8rem",
186
- yLabelSize: yLabelSize !== null && yLabelSize !== void 0 ? yLabelSize : "0.8rem",
187
- xInterval: xInterval !== null && xInterval !== void 0 ? xInterval : undefined,
188
- yInterval: yInterval !== null && yInterval !== void 0 ? yInterval : undefined,
189
- xAxisLabel: xAxisLabel !== null && xAxisLabel !== void 0 ? xAxisLabel : '',
190
- yAxisLabel: yAxisLabel !== null && yAxisLabel !== void 0 ? yAxisLabel : '',
191
- tickLine: tickLine !== null && tickLine !== void 0 ? tickLine : true,
192
- axisLine: axisLine !== null && axisLine !== void 0 ? axisLine : true,
193
- gridStroke: gridStroke !== null && gridStroke !== void 0 ? gridStroke : '',
194
- gridStrokeDasharray: gridStrokeDasharray !== null && gridStrokeDasharray !== void 0 ? gridStrokeDasharray : "3 3",
195
- customTooltip: customTooltip !== null && customTooltip !== void 0 ? customTooltip : undefined,
196
- animation: animation !== null && animation !== void 0 ? animation : true,
197
- animationDuration: animationDuration !== null && animationDuration !== void 0 ? animationDuration : 500,
198
- isAnimationActive: isAnimationActive !== null && isAnimationActive !== void 0 ? isAnimationActive : true,
199
- syncId: syncId !== null && syncId !== void 0 ? syncId : '',
200
- chartBackground: chartBackground !== null && chartBackground !== void 0 ? chartBackground : '',
201
- borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : '',
202
- padding: padding !== null && padding !== void 0 ? padding : '',
203
- shadow: shadow !== null && shadow !== void 0 ? shadow : false,
204
- aspect: aspect !== null && aspect !== void 0 ? aspect : undefined,
205
- minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : undefined,
206
- maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : undefined,
207
- minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : undefined,
208
- maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : undefined
209
- };
210
- // Merge with config - LOCAL PROPS OVERRIDE CONFIG with error handling
211
- var mergedProps;
212
- try {
213
- var result = mergeWithLocal(localProps);
214
- mergedProps = (_b = result === null || result === void 0 ? void 0 : result.props) !== null && _b !== void 0 ? _b : localProps;
215
- }
216
- catch (error) {
217
- console.error('Error merging component configuration:', error);
218
- mergedProps = localProps;
219
- }
155
+ var Lines = function (localProps) {
156
+ var _a;
157
+ // Use component configuration with variant support
158
+ var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Lines', localProps.variant).mergeWithLocal;
159
+ // Merge with config - LOCAL PROPS OVERRIDE CONFIG
160
+ var mergedProps = mergeWithLocal(localProps).props;
161
+ // Debug: Log what props are actually coming through
162
+ react_1.default.useEffect(function () {
163
+ console.log('Lines merged props:', mergedProps);
164
+ console.log('Lines config available:', Object.keys(mergedProps).length > 0);
165
+ }, [mergedProps]);
220
166
  // Parse data and series if they're strings with enhanced validation
221
167
  var parsedData = (0, react_1.useMemo)(function () {
222
168
  var parsed = parseIfString(mergedProps.data, []);
@@ -230,66 +176,15 @@ var Lines = function (_a) {
230
176
  }, [mergedProps.series]);
231
177
  // Check if we have valid data to display
232
178
  var hasValidData = parsedData.length > 0 && parsedSeries.length > 0;
233
- // Extract final values with fallbacks
234
- var final = (0, react_1.useMemo)(function () {
235
- var _a, _b, _c, _d, _e, _f;
236
- return ({
237
- data: parsedData,
238
- id: mergedProps.id || 'area-chart',
239
- series: parsedSeries,
240
- fromColor: mergedProps.fromColor || '',
241
- toColor: mergedProps.toColor || '',
242
- dy: mergedProps.dy || 0,
243
- showGrid: (_a = mergedProps.showGrid) !== null && _a !== void 0 ? _a : true,
244
- horizontalLines: (_b = mergedProps.horizontalLines) !== null && _b !== void 0 ? _b : false,
245
- showLegend: mergedProps.showLegend,
246
- showXAxis: mergedProps.showXAxis,
247
- showYAxis: mergedProps.showYAxis,
248
- showTooltip: mergedProps.showTooltip,
249
- funcss: mergedProps.funcss || '',
250
- curveType: mergedProps.curveType || 'monotone',
251
- height: mergedProps.height || "100%",
252
- width: mergedProps.width || '100%',
253
- margin: mergedProps.margin || { top: 10, right: 30, left: 0, bottom: 20 },
254
- xAxisProps: mergedProps.xAxisProps || {},
255
- yAxisProps: mergedProps.yAxisProps || {},
256
- tooltipFormatter: mergedProps.tooltipFormatter,
257
- legendProps: mergedProps.legendProps || {},
258
- tooltipProps: mergedProps.tooltipProps || {},
259
- rotateLabel: mergedProps.rotateLabel || 0,
260
- xLabelSize: mergedProps.xLabelSize || "0.8rem",
261
- yLabelSize: mergedProps.yLabelSize || "0.8rem",
262
- xInterval: mergedProps.xInterval,
263
- yInterval: mergedProps.yInterval,
264
- xAxisLabel: mergedProps.xAxisLabel || '',
265
- yAxisLabel: mergedProps.yAxisLabel || '',
266
- tickLine: (_c = mergedProps.tickLine) !== null && _c !== void 0 ? _c : true,
267
- axisLine: (_d = mergedProps.axisLine) !== null && _d !== void 0 ? _d : true,
268
- gridStroke: mergedProps.gridStroke || '',
269
- gridStrokeDasharray: mergedProps.gridStrokeDasharray || "3 3",
270
- customTooltip: mergedProps.customTooltip,
271
- animation: (_e = mergedProps.animation) !== null && _e !== void 0 ? _e : true,
272
- animationDuration: mergedProps.animationDuration || 500,
273
- isAnimationActive: mergedProps.isAnimationActive,
274
- syncId: mergedProps.syncId || '',
275
- chartBackground: mergedProps.chartBackground || '',
276
- borderRadius: mergedProps.borderRadius || '',
277
- padding: mergedProps.padding || '',
278
- shadow: (_f = mergedProps.shadow) !== null && _f !== void 0 ? _f : false,
279
- aspect: mergedProps.aspect,
280
- minHeight: mergedProps.minHeight,
281
- maxHeight: mergedProps.maxHeight,
282
- minWidth: mergedProps.minWidth,
283
- maxWidth: mergedProps.maxWidth
284
- });
285
- }, [parsedData, parsedSeries, mergedProps, hasValidData]);
179
+ // Use mergedProps directly - no need for complex fallback logic
180
+ var final = mergedProps;
286
181
  var baseGradientId = final.id || 'areaChartGradient';
287
182
  var TooltipComponent = final.customTooltip || CustomTooltip;
288
183
  // Generate per-series gradients with error handling
289
184
  var gradients = (0, react_1.useMemo)(function () {
290
- if (!final.series || !Array.isArray(final.series))
185
+ if (!parsedSeries || !Array.isArray(parsedSeries))
291
186
  return [];
292
- return final.series.map(function (s, index) {
187
+ return parsedSeries.map(function (s, index) {
293
188
  if (!s || typeof s !== 'object')
294
189
  return null;
295
190
  try {
@@ -307,7 +202,7 @@ var Lines = function (_a) {
307
202
  return null;
308
203
  }
309
204
  }).filter(Boolean);
310
- }, [final.series, baseGradientId, final.fromColor, final.toColor]);
205
+ }, [parsedSeries, baseGradientId, final.fromColor, final.toColor]);
311
206
  // Default gradient for series without custom gradients
312
207
  var defaultGradient = (0, react_1.useMemo)(function () { return (react_1.default.createElement("linearGradient", { id: baseGradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
313
208
  react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(final.fromColor || 'primary') || '#8884d8', stopOpacity: 0.8 }),
@@ -332,17 +227,17 @@ var Lines = function (_a) {
332
227
  react_1.default.createElement("div", null, "No chart data available"))));
333
228
  }
334
229
  return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: final.width, height: final.height, aspect: final.aspect, className: final.funcss, style: containerStyle },
335
- react_1.default.createElement(recharts_1.AreaChart, { data: final.data, margin: final.margin, syncId: final.syncId },
230
+ react_1.default.createElement(recharts_1.AreaChart, { data: parsedData, margin: final.margin, syncId: final.syncId },
336
231
  react_1.default.createElement("defs", null,
337
232
  defaultGradient,
338
233
  gradients),
339
234
  final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
340
235
  !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' })),
341
- 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))),
236
+ 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))),
342
237
  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))),
343
238
  final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
344
239
  final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
345
- final.series.map(function (s, index) {
240
+ parsedSeries.map(function (s, index) {
346
241
  if (!s || !s.dataKey) {
347
242
  console.warn('Invalid series configuration at index:', index);
348
243
  return null;