funuicss 3.9.9 → 3.9.11

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 (11) hide show
  1. package/css/fun.css +203 -204
  2. package/package.json +1 -1
  3. package/ui/chart/Bar.js +15 -28
  4. package/ui/chart/Line.js +25 -18
  5. package/ui/chart/Pie.js +14 -16
  6. package/ui/drop/Dropdown.d.ts +1 -0
  7. package/ui/drop/Dropdown.js +825 -81
  8. package/ui/table/Table.d.ts +16 -9
  9. package/ui/table/Table.js +874 -107
  10. package/ui/tooltip/ToolTip.d.ts +3 -1
  11. package/ui/tooltip/ToolTip.js +169 -35
package/css/fun.css CHANGED
@@ -6289,112 +6289,111 @@ color: var(--primary) !important;
6289
6289
  .min-w-90-vw { min-width: 90vw !important; }
6290
6290
  .min-w-100-vw { min-width: 100vw !important; }
6291
6291
 
6292
-
6293
- /* Max-width versions (responsive with width: 100%) */
6294
- .w-5 { max-width: 5px; width: 100% !important; }
6295
- .w-10 { max-width: 10px; width: 100% !important; }
6296
- .w-15 { max-width: 15px; width: 100% !important; }
6297
- .w-20 { max-width: 20px; width: 100% !important; }
6292
+ /* Absolute widths (no max-width) */
6293
+ .w-5 { width: 5px !important; }
6294
+ .w-10 { width: 10px !important; }
6295
+ .w-15 { width: 15px !important; }
6296
+ .w-20 { width: 20px !important; }
6298
6297
 
6299
6298
  /* Increments of 5 from 25-95 */
6300
- .w-25 { max-width: 25px; width: 100% !important; }
6301
- .w-30 { max-width: 30px; width: 100% !important; }
6302
- .w-35 { max-width: 35px; width: 100% !important; }
6303
- .w-40 { max-width: 40px; width: 100% !important; }
6304
- .w-45 { max-width: 45px; width: 100% !important; }
6305
- .w-50 { max-width: 50px; width: 100% !important; }
6306
- .w-55 { max-width: 55px; width: 100% !important; }
6307
- .w-60 { max-width: 60px; width: 100% !important; }
6308
- .w-65 { max-width: 65px; width: 100% !important; }
6309
- .w-70 { max-width: 70px; width: 100% !important; }
6310
- .w-75 { max-width: 75px; width: 100% !important; }
6311
- .w-80 { max-width: 80px; width: 100% !important; }
6312
- .w-85 { max-width: 85px; width: 100% !important; }
6313
- .w-90 { max-width: 90px; width: 100% !important; }
6314
- .w-95 { max-width: 95px; width: 100% !important; }
6315
-
6316
- .w-100 { max-width: 100px; width: 100% !important; }
6317
- .w-150 { max-width: 150px; width: 100% !important; }
6318
- .w-200 { max-width: 200px; width: 100% !important; }
6319
- .w-250 { max-width: 250px; width: 100% !important; }
6320
- .w-300 { max-width: 300px; width: 100% !important; }
6321
- .w-350 { max-width: 350px; width: 100% !important; }
6322
- .w-400 { max-width: 400px; width: 100% !important; }
6323
- .w-450 { max-width: 450px; width: 100% !important; }
6324
- .w-500 { max-width: 500px; width: 100% !important; }
6325
- .w-550 { max-width: 550px; width: 100% !important; }
6326
- .w-600 { max-width: 600px; width: 100% !important; }
6327
- .w-650 { max-width: 650px; width: 100% !important; }
6328
- .w-700 { max-width: 700px; width: 100% !important; }
6329
- .w-750 { max-width: 750px; width: 100% !important; }
6330
- .w-800 { max-width: 800px; width: 100% !important; }
6331
- .w-850 { max-width: 850px; width: 100% !important; }
6332
- .w-900 { max-width: 900px; width: 100% !important; }
6333
- .w-950 { max-width: 950px; width: 100% !important; }
6334
- .w-1000 { max-width: 1000px; width: 100% !important; }
6335
- .w-1050 { max-width: 1050px; width: 100% !important; }
6336
- .w-1100 { max-width: 1100px; width: 100% !important; }
6337
- .w-1150 { max-width: 1150px; width: 100% !important; }
6338
- .w-1200 { max-width: 1200px; width: 100% !important; }
6339
- .w-1250 { max-width: 1250px; width: 100% !important; }
6340
- .w-1300 { max-width: 1300px; width: 100% !important; }
6341
- .w-1350 { max-width: 1350px; width: 100% !important; }
6342
- .w-1400 { max-width: 1400px; width: 100% !important; }
6343
- .w-1450 { max-width: 1450px; width: 100% !important; }
6344
- .w-1500 { max-width: 1500px; width: 100% !important; }
6345
-
6346
- /* Fixed width versions (no max-width, just width) */
6347
- .w-5-f { width: 5px !important; }
6348
- .w-10-f { width: 10px !important; }
6349
- .w-15-f { width: 15px !important; }
6350
- .w-20-f { width: 20px !important; }
6299
+ .w-25 { width: 25px !important; }
6300
+ .w-30 { width: 30px !important; }
6301
+ .w-35 { width: 35px !important; }
6302
+ .w-40 { width: 40px !important; }
6303
+ .w-45 { width: 45px !important; }
6304
+ .w-50 { width: 50px !important; }
6305
+ .w-55 { width: 55px !important; }
6306
+ .w-60 { width: 60px !important; }
6307
+ .w-65 { width: 65px !important; }
6308
+ .w-70 { width: 70px !important; }
6309
+ .w-75 { width: 75px !important; }
6310
+ .w-80 { width: 80px !important; }
6311
+ .w-85 { width: 85px !important; }
6312
+ .w-90 { width: 90px !important; }
6313
+ .w-95 { width: 95px !important; }
6314
+
6315
+ .w-100 { width: 100px !important; }
6316
+ .w-150 { width: 150px !important; }
6317
+ .w-200 { width: 200px !important; }
6318
+ .w-250 { width: 250px !important; }
6319
+ .w-300 { width: 300px !important; }
6320
+ .w-350 { width: 350px !important; }
6321
+ .w-400 { width: 400px !important; }
6322
+ .w-450 { width: 450px !important; }
6323
+ .w-500 { width: 500px !important; }
6324
+ .w-550 { width: 550px !important; }
6325
+ .w-600 { width: 600px !important; }
6326
+ .w-650 { width: 650px !important; }
6327
+ .w-700 { width: 700px !important; }
6328
+ .w-750 { width: 750px !important; }
6329
+ .w-800 { width: 800px !important; }
6330
+ .w-850 { width: 850px !important; }
6331
+ .w-900 { width: 900px !important; }
6332
+ .w-950 { width: 950px !important; }
6333
+ .w-1000 { width: 1000px !important; }
6334
+ .w-1050 { width: 1050px !important; }
6335
+ .w-1100 { width: 1100px !important; }
6336
+ .w-1150 { width: 1150px !important; }
6337
+ .w-1200 { width: 1200px !important; }
6338
+ .w-1250 { width: 1250px !important; }
6339
+ .w-1300 { width: 1300px !important; }
6340
+ .w-1350 { width: 1350px !important; }
6341
+ .w-1400 { width: 1400px !important; }
6342
+ .w-1450 { width: 1450px !important; }
6343
+ .w-1500 { width: 1500px !important; }
6344
+
6345
+ /* Relative width versions (max-width with width: 100%) */
6346
+ .w-5-r { max-width: 5px; width: 100% !important; }
6347
+ .w-10-r { max-width: 10px; width: 100% !important; }
6348
+ .w-15-r { max-width: 15px; width: 100% !important; }
6349
+ .w-20-r { max-width: 20px; width: 100% !important; }
6351
6350
 
6352
6351
  /* Increments of 5 from 25-95 */
6353
- .w-25-f { width: 25px !important; }
6354
- .w-30-f { width: 30px !important; }
6355
- .w-35-f { width: 35px !important; }
6356
- .w-40-f { width: 40px !important; }
6357
- .w-45-f { width: 45px !important; }
6358
- .w-50-f { width: 50px !important; }
6359
- .w-55-f { width: 55px !important; }
6360
- .w-60-f { width: 60px !important; }
6361
- .w-65-f { width: 65px !important; }
6362
- .w-70-f { width: 70px !important; }
6363
- .w-75-f { width: 75px !important; }
6364
- .w-80-f { width: 80px !important; }
6365
- .w-85-f { width: 85px !important; }
6366
- .w-90-f { width: 90px !important; }
6367
- .w-95-f { width: 95px !important; }
6368
-
6369
- .w-100-f { width: 100px !important; }
6370
- .w-150-f { width: 150px !important; }
6371
- .w-200-f { width: 200px !important; }
6372
- .w-250-f { width: 250px !important; }
6373
- .w-300-f { width: 300px !important; }
6374
- .w-350-f { width: 350px !important; }
6375
- .w-400-f { width: 400px !important; }
6376
- .w-450-f { width: 450px !important; }
6377
- .w-500-f { width: 500px !important; }
6378
- .w-550-f { width: 550px !important; }
6379
- .w-600-f { width: 600px !important; }
6380
- .w-650-f { width: 650px !important; }
6381
- .w-700-f { width: 700px !important; }
6382
- .w-750-f { width: 750px !important; }
6383
- .w-800-f { width: 800px !important; }
6384
- .w-850-f { width: 850px !important; }
6385
- .w-900-f { width: 900px !important; }
6386
- .w-950-f { width: 950px !important; }
6387
- .w-1000-f { width: 1000px !important; }
6388
- .w-1050-f { width: 1050px !important; }
6389
- .w-1100-f { width: 1100px !important; }
6390
- .w-1150-f { width: 1150px !important; }
6391
- .w-1200-f { width: 1200px !important; }
6392
- .w-1250-f { width: 1250px !important; }
6393
- .w-1300-f { width: 1300px !important; }
6394
- .w-1350-f { width: 1350px !important; }
6395
- .w-1400-f { width: 1400px !important; }
6396
- .w-1450-f { width: 1450px !important; }
6397
- .w-1500-f { width: 1500px !important; }
6352
+ .w-25-r { max-width: 25px; width: 100% !important; }
6353
+ .w-30-r { max-width: 30px; width: 100% !important; }
6354
+ .w-35-r { max-width: 35px; width: 100% !important; }
6355
+ .w-40-r { max-width: 40px; width: 100% !important; }
6356
+ .w-45-r { max-width: 45px; width: 100% !important; }
6357
+ .w-50-r { max-width: 50px; width: 100% !important; }
6358
+ .w-55-r { max-width: 55px; width: 100% !important; }
6359
+ .w-60-r { max-width: 60px; width: 100% !important; }
6360
+ .w-65-r { max-width: 65px; width: 100% !important; }
6361
+ .w-70-r { max-width: 70px; width: 100% !important; }
6362
+ .w-75-r { max-width: 75px; width: 100% !important; }
6363
+ .w-80-r { max-width: 80px; width: 100% !important; }
6364
+ .w-85-r { max-width: 85px; width: 100% !important; }
6365
+ .w-90-r { max-width: 90px; width: 100% !important; }
6366
+ .w-95-r { max-width: 95px; width: 100% !important; }
6367
+
6368
+ .w-100-r { max-width: 100px; width: 100% !important; }
6369
+ .w-150-r { max-width: 150px; width: 100% !important; }
6370
+ .w-200-r { max-width: 200px; width: 100% !important; }
6371
+ .w-250-r { max-width: 250px; width: 100% !important; }
6372
+ .w-300-r { max-width: 300px; width: 100% !important; }
6373
+ .w-350-r { max-width: 350px; width: 100% !important; }
6374
+ .w-400-r { max-width: 400px; width: 100% !important; }
6375
+ .w-450-r { max-width: 450px; width: 100% !important; }
6376
+ .w-500-r { max-width: 500px; width: 100% !important; }
6377
+ .w-550-r { max-width: 550px; width: 100% !important; }
6378
+ .w-600-r { max-width: 600px; width: 100% !important; }
6379
+ .w-650-r { max-width: 650px; width: 100% !important; }
6380
+ .w-700-r { max-width: 700px; width: 100% !important; }
6381
+ .w-750-r { max-width: 750px; width: 100% !important; }
6382
+ .w-800-r { max-width: 800px; width: 100% !important; }
6383
+ .w-850-r { max-width: 850px; width: 100% !important; }
6384
+ .w-900-r { max-width: 900px; width: 100% !important; }
6385
+ .w-950-r { max-width: 950px; width: 100% !important; }
6386
+ .w-1000-r { max-width: 1000px; width: 100% !important; }
6387
+ .w-1050-r { max-width: 1050px; width: 100% !important; }
6388
+ .w-1100-r { max-width: 1100px; width: 100% !important; }
6389
+ .w-1150-r { max-width: 1150px; width: 100% !important; }
6390
+ .w-1200-r { max-width: 1200px; width: 100% !important; }
6391
+ .w-1250-r { max-width: 1250px; width: 100% !important; }
6392
+ .w-1300-r { max-width: 1300px; width: 100% !important; }
6393
+ .w-1350-r { max-width: 1350px; width: 100% !important; }
6394
+ .w-1400-r { max-width: 1400px; width: 100% !important; }
6395
+ .w-1450-r { max-width: 1450px; width: 100% !important; }
6396
+ .w-1500-r { max-width: 1500px; width: 100% !important; }
6398
6397
 
6399
6398
  /* Max-width and Min-width */
6400
6399
  .max-w-10 { max-width: 0.625rem !important; }
@@ -6781,112 +6780,111 @@ color: var(--primary) !important;
6781
6780
  .min-h-900 { min-height: 56.25rem !important; }
6782
6781
 
6783
6782
  /* height */
6784
- /* Max-height versions (responsive with height: 100%) */
6785
- .h-5 { max-height: 5px; height: 100% !important; }
6786
- .h-10 { max-height: 10px; height: 100% !important; }
6787
- .h-15 { max-height: 15px; height: 100% !important; }
6788
- .h-20 { max-height: 20px; height: 100% !important; }
6783
+ /* Absolute heights (no max-height) */
6784
+ .h-5 { height: 5px !important; }
6785
+ .h-10 { height: 10px !important; }
6786
+ .h-15 { height: 15px !important; }
6787
+ .h-20 { height: 20px !important; }
6789
6788
 
6790
6789
  /* Increments of 5 from 25-95 */
6791
- .h-25 { max-height: 25px; height: 100% !important; }
6792
- .h-30 { max-height: 30px; height: 100% !important; }
6793
- .h-35 { max-height: 35px; height: 100% !important; }
6794
- .h-40 { max-height: 40px; height: 100% !important; }
6795
- .h-45 { max-height: 45px; height: 100% !important; }
6796
- .h-50 { max-height: 50px; height: 100% !important; }
6797
- .h-55 { max-height: 55px; height: 100% !important; }
6798
- .h-60 { max-height: 60px; height: 100% !important; }
6799
- .h-65 { max-height: 65px; height: 100% !important; }
6800
- .h-70 { max-height: 70px; height: 100% !important; }
6801
- .h-75 { max-height: 75px; height: 100% !important; }
6802
- .h-80 { max-height: 80px; height: 100% !important; }
6803
- .h-85 { max-height: 85px; height: 100% !important; }
6804
- .h-90 { max-height: 90px; height: 100% !important; }
6805
- .h-95 { max-height: 95px; height: 100% !important; }
6806
-
6807
- .h-100 { max-height: 100px; height: 100% !important; }
6808
- .h-150 { max-height: 150px; height: 100% !important; }
6809
- .h-200 { max-height: 200px; height: 100% !important; }
6810
- .h-250 { max-height: 250px; height: 100% !important; }
6811
- .h-300 { max-height: 300px; height: 100% !important; }
6812
- .h-350 { max-height: 350px; height: 100% !important; }
6813
- .h-400 { max-height: 400px; height: 100% !important; }
6814
- .h-450 { max-height: 450px; height: 100% !important; }
6815
- .h-500 { max-height: 500px; height: 100% !important; }
6816
- .h-550 { max-height: 550px; height: 100% !important; }
6817
- .h-600 { max-height: 600px; height: 100% !important; }
6818
- .h-650 { max-height: 650px; height: 100% !important; }
6819
- .h-700 { max-height: 700px; height: 100% !important; }
6820
- .h-750 { max-height: 750px; height: 100% !important; }
6821
- .h-800 { max-height: 800px; height: 100% !important; }
6822
- .h-850 { max-height: 850px; height: 100% !important; }
6823
- .h-900 { max-height: 900px; height: 100% !important; }
6824
- .h-950 { max-height: 950px; height: 100% !important; }
6825
- .h-1000 { max-height: 1000px; height: 100% !important; }
6826
- .h-1050 { max-height: 1050px; height: 100% !important; }
6827
- .h-1100 { max-height: 1100px; height: 100% !important; }
6828
- .h-1150 { max-height: 1150px; height: 100% !important; }
6829
- .h-1200 { max-height: 1200px; height: 100% !important; }
6830
- .h-1250 { max-height: 1250px; height: 100% !important; }
6831
- .h-1300 { max-height: 1300px; height: 100% !important; }
6832
- .h-1350 { max-height: 1350px; height: 100% !important; }
6833
- .h-1400 { max-height: 1400px; height: 100% !important; }
6834
- .h-1450 { max-height: 1450px; height: 100% !important; }
6835
- .h-1500 { max-height: 1500px; height: 100% !important; }
6836
-
6837
- /* Fixed height versions (no max-height, just height) */
6838
- .h-5-f { height: 5px !important; }
6839
- .h-10-f { height: 10px !important; }
6840
- .h-15-f { height: 15px !important; }
6841
- .h-20-f { height: 20px !important; }
6790
+ .h-25 { height: 25px !important; }
6791
+ .h-30 { height: 30px !important; }
6792
+ .h-35 { height: 35px !important; }
6793
+ .h-40 { height: 40px !important; }
6794
+ .h-45 { height: 45px !important; }
6795
+ .h-50 { height: 50px !important; }
6796
+ .h-55 { height: 55px !important; }
6797
+ .h-60 { height: 60px !important; }
6798
+ .h-65 { height: 65px !important; }
6799
+ .h-70 { height: 70px !important; }
6800
+ .h-75 { height: 75px !important; }
6801
+ .h-80 { height: 80px !important; }
6802
+ .h-85 { height: 85px !important; }
6803
+ .h-90 { height: 90px !important; }
6804
+ .h-95 { height: 95px !important; }
6805
+
6806
+ .h-100 { height: 100px !important; }
6807
+ .h-150 { height: 150px !important; }
6808
+ .h-200 { height: 200px !important; }
6809
+ .h-250 { height: 250px !important; }
6810
+ .h-300 { height: 300px !important; }
6811
+ .h-350 { height: 350px !important; }
6812
+ .h-400 { height: 400px !important; }
6813
+ .h-450 { height: 450px !important; }
6814
+ .h-500 { height: 500px !important; }
6815
+ .h-550 { height: 550px !important; }
6816
+ .h-600 { height: 600px !important; }
6817
+ .h-650 { height: 650px !important; }
6818
+ .h-700 { height: 700px !important; }
6819
+ .h-750 { height: 750px !important; }
6820
+ .h-800 { height: 800px !important; }
6821
+ .h-850 { height: 850px !important; }
6822
+ .h-900 { height: 900px !important; }
6823
+ .h-950 { height: 950px !important; }
6824
+ .h-1000 { height: 1000px !important; }
6825
+ .h-1050 { height: 1050px !important; }
6826
+ .h-1100 { height: 1100px !important; }
6827
+ .h-1150 { height: 1150px !important; }
6828
+ .h-1200 { height: 1200px !important; }
6829
+ .h-1250 { height: 1250px !important; }
6830
+ .h-1300 { height: 1300px !important; }
6831
+ .h-1350 { height: 1350px !important; }
6832
+ .h-1400 { height: 1400px !important; }
6833
+ .h-1450 { height: 1450px !important; }
6834
+ .h-1500 { height: 1500px !important; }
6835
+
6836
+ /* Relative height versions (max-height with height: 100%) */
6837
+ .h-5-r { max-height: 5px; height: 100% !important; }
6838
+ .h-10-r { max-height: 10px; height: 100% !important; }
6839
+ .h-15-r { max-height: 15px; height: 100% !important; }
6840
+ .h-20-r { max-height: 20px; height: 100% !important; }
6842
6841
 
6843
6842
  /* Increments of 5 from 25-95 */
6844
- .h-25-f { height: 25px !important; }
6845
- .h-30-f { height: 30px !important; }
6846
- .h-35-f { height: 35px !important; }
6847
- .h-40-f { height: 40px !important; }
6848
- .h-45-f { height: 45px !important; }
6849
- .h-50-f { height: 50px !important; }
6850
- .h-55-f { height: 55px !important; }
6851
- .h-60-f { height: 60px !important; }
6852
- .h-65-f { height: 65px !important; }
6853
- .h-70-f { height: 70px !important; }
6854
- .h-75-f { height: 75px !important; }
6855
- .h-80-f { height: 80px !important; }
6856
- .h-85-f { height: 85px !important; }
6857
- .h-90-f { height: 90px !important; }
6858
- .h-95-f { height: 95px !important; }
6859
-
6860
- .h-100-f { height: 100px !important; }
6861
- .h-150-f { height: 150px !important; }
6862
- .h-200-f { height: 200px !important; }
6863
- .h-250-f { height: 250px !important; }
6864
- .h-300-f { height: 300px !important; }
6865
- .h-350-f { height: 350px !important; }
6866
- .h-400-f { height: 400px !important; }
6867
- .h-450-f { height: 450px !important; }
6868
- .h-500-f { height: 500px !important; }
6869
- .h-550-f { height: 550px !important; }
6870
- .h-600-f { height: 600px !important; }
6871
- .h-650-f { height: 650px !important; }
6872
- .h-700-f { height: 700px !important; }
6873
- .h-750-f { height: 750px !important; }
6874
- .h-800-f { height: 800px !important; }
6875
- .h-850-f { height: 850px !important; }
6876
- .h-900-f { height: 900px !important; }
6877
- .h-950-f { height: 950px !important; }
6878
- .h-1000-f { height: 1000px !important; }
6879
- .h-1050-f { height: 1050px !important; }
6880
- .h-1100-f { height: 1100px !important; }
6881
- .h-1150-f { height: 1150px !important; }
6882
- .h-1200-f { height: 1200px !important; }
6883
- .h-1250-f { height: 1250px !important; }
6884
- .h-1300-f { height: 1300px !important; }
6885
- .h-1350-f { height: 1350px !important; }
6886
- .h-1400-f { height: 1400px !important; }
6887
- .h-1450-f { height: 1450px !important; }
6888
- .h-1500-f { height: 1500px !important; }
6889
-
6843
+ .h-25-r { max-height: 25px; height: 100% !important; }
6844
+ .h-30-r { max-height: 30px; height: 100% !important; }
6845
+ .h-35-r { max-height: 35px; height: 100% !important; }
6846
+ .h-40-r { max-height: 40px; height: 100% !important; }
6847
+ .h-45-r { max-height: 45px; height: 100% !important; }
6848
+ .h-50-r { max-height: 50px; height: 100% !important; }
6849
+ .h-55-r { max-height: 55px; height: 100% !important; }
6850
+ .h-60-r { max-height: 60px; height: 100% !important; }
6851
+ .h-65-r { max-height: 65px; height: 100% !important; }
6852
+ .h-70-r { max-height: 70px; height: 100% !important; }
6853
+ .h-75-r { max-height: 75px; height: 100% !important; }
6854
+ .h-80-r { max-height: 80px; height: 100% !important; }
6855
+ .h-85-r { max-height: 85px; height: 100% !important; }
6856
+ .h-90-r { max-height: 90px; height: 100% !important; }
6857
+ .h-95-r { max-height: 95px; height: 100% !important; }
6858
+
6859
+ .h-100-r { max-height: 100px; height: 100% !important; }
6860
+ .h-150-r { max-height: 150px; height: 100% !important; }
6861
+ .h-200-r { max-height: 200px; height: 100% !important; }
6862
+ .h-250-r { max-height: 250px; height: 100% !important; }
6863
+ .h-300-r { max-height: 300px; height: 100% !important; }
6864
+ .h-350-r { max-height: 350px; height: 100% !important; }
6865
+ .h-400-r { max-height: 400px; height: 100% !important; }
6866
+ .h-450-r { max-height: 450px; height: 100% !important; }
6867
+ .h-500-r { max-height: 500px; height: 100% !important; }
6868
+ .h-550-r { max-height: 550px; height: 100% !important; }
6869
+ .h-600-r { max-height: 600px; height: 100% !important; }
6870
+ .h-650-r { max-height: 650px; height: 100% !important; }
6871
+ .h-700-r { max-height: 700px; height: 100% !important; }
6872
+ .h-750-r { max-height: 750px; height: 100% !important; }
6873
+ .h-800-r { max-height: 800px; height: 100% !important; }
6874
+ .h-850-r { max-height: 850px; height: 100% !important; }
6875
+ .h-900-r { max-height: 900px; height: 100% !important; }
6876
+ .h-950-r { max-height: 950px; height: 100% !important; }
6877
+ .h-1000-r { max-height: 1000px; height: 100% !important; }
6878
+ .h-1050-r { max-height: 1050px; height: 100% !important; }
6879
+ .h-1100-r { max-height: 1100px; height: 100% !important; }
6880
+ .h-1150-r { max-height: 1150px; height: 100% !important; }
6881
+ .h-1200-r { max-height: 1200px; height: 100% !important; }
6882
+ .h-1250-r { max-height: 1250px; height: 100% !important; }
6883
+ .h-1300-r { max-height: 1300px; height: 100% !important; }
6884
+ .h-1350-r { max-height: 1350px; height: 100% !important; }
6885
+ .h-1400-r { max-height: 1400px; height: 100% !important; }
6886
+ .h-1450-r { max-height: 1450px; height: 100% !important; }
6887
+ .h-1500-r { max-height: 1500px; height: 100% !important; }
6890
6888
 
6891
6889
  /* percentage */
6892
6890
  .h-10-p { height: 10% !important; }
@@ -6901,6 +6899,7 @@ color: var(--primary) !important;
6901
6899
  .h-100-p , .h-full { height: 100% !important; }
6902
6900
 
6903
6901
 
6902
+
6904
6903
  .height-10-p {
6905
6904
  height: 10%;
6906
6905
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.9.9",
2
+ "version": "3.9.11",
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
@@ -111,7 +111,7 @@ var resolveColor = function (color) {
111
111
  };
112
112
  return colorMap[color] || color || '#8884d8';
113
113
  };
114
- // Default Tooltip with error handling
114
+ // Your original CustomTooltip component (unchanged)
115
115
  var CustomTooltip = function (_a) {
116
116
  var active = _a.active, payload = _a.payload, label = _a.label, formatter = _a.formatter;
117
117
  if (!active || !payload || !Array.isArray(payload) || payload.length === 0) {
@@ -120,8 +120,6 @@ var CustomTooltip = function (_a) {
120
120
  try {
121
121
  return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm", style: {
122
122
  maxWidth: '300px',
123
- backgroundColor: 'var(--background, #fff)',
124
- border: '1px solid var(--border-color, #e2e8f0)'
125
123
  } },
126
124
  react_1.default.createElement("div", { className: "text-bold mb-1", style: { color: 'var(--text-color, #1a202c)' } }, label || 'N/A'),
127
125
  payload.map(function (entry, index) {
@@ -201,27 +199,17 @@ var Bars = function (localProps) {
201
199
  }, [final.height, isVertical, parsedData.length]);
202
200
  var TooltipComponent = final.customTooltip || CustomTooltip;
203
201
  var containerStyle = (0, react_1.useMemo)(function () { return ({
204
- height: smartHeight,
205
- width: final.width,
206
- minHeight: final.minHeight,
207
- maxHeight: final.maxHeight,
208
- minWidth: final.minWidth,
209
- maxWidth: final.maxWidth,
202
+ height: final.height || '400px', // Default height
203
+ width: final.width || '100%', // Default width
204
+ minHeight: final.minHeight || '300px', // Minimum height
205
+ maxHeight: final.maxHeight || '100%',
206
+ minWidth: final.minWidth || '100%',
207
+ maxWidth: final.maxWidth || '100%',
210
208
  background: final.chartBackground,
211
209
  borderRadius: final.borderRadius,
212
210
  padding: final.padding,
213
211
  boxShadow: final.shadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)' : undefined,
214
- }); }, [smartHeight, final]);
215
- // Handle bar radius based on layout
216
- var getBarRadius = function (seriesRadius) {
217
- if (seriesRadius !== undefined) {
218
- return Array.isArray(seriesRadius) ? seriesRadius : [seriesRadius, seriesRadius, seriesRadius, seriesRadius];
219
- }
220
- if (isVertical) {
221
- return [0, final.barRadius, final.barRadius, 0];
222
- }
223
- return [final.barRadius, final.barRadius, 0, 0];
224
- };
212
+ }); }, [final]);
225
213
  // Show empty state if no data
226
214
  if (!hasValidData) {
227
215
  return (react_1.default.createElement("div", { className: "flex items-center justify-center ".concat(final.funcss), style: containerStyle },
@@ -229,13 +217,12 @@ var Bars = function (localProps) {
229
217
  react_1.default.createElement("div", { className: "text-lg mb-2" }, "\uD83D\uDCCA"),
230
218
  react_1.default.createElement("div", null, "No chart data available"))));
231
219
  }
232
- return (react_1.default.createElement("div", { style: {
233
- height: final.height || "400px",
234
- width: final.width || "100%"
235
- } },
236
- react_1.default.createElement(recharts_1.ResponsiveContainer, { aspect: final.aspect, className: final.funcss, style: containerStyle },
220
+ return (react_1.default.createElement("div", { className: final.funcss, style: containerStyle, id: final.id },
221
+ react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%" // Must be set for responsive behavior
222
+ , height: "100%" // Must be set for responsive behavior
223
+ , aspect: final.aspect, minHeight: final.minHeight ? String(final.minHeight) : undefined, minWidth: final.minWidth ? String(final.minWidth) : undefined },
237
224
  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 },
238
- 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 })),
225
+ final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('borderColor') || '#e2e8f0', horizontal: final.horizontalLines !== false, vertical: final.verticalLines !== false })),
239
226
  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 ? {
240
227
  value: final.xAxisLabel,
241
228
  position: isVertical ? 'insideBottom' : 'insideBottom',
@@ -254,12 +241,12 @@ var Bars = function (localProps) {
254
241
  return null;
255
242
  }
256
243
  try {
257
- return (react_1.default.createElement(recharts_1.Bar, { key: s.dataKey || "series-".concat(index), dataKey: s.dataKey, name: s.label || s.dataKey, fill: resolveColor(s.color), stroke: s.stroke ? resolveColor(s.stroke) : undefined, strokeWidth: s.strokeWidth || 0, fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.8, barSize: s.barSize || final.barSize, maxBarSize: s.maxBarSize || final.maxBarSize, stackId: s.stackId, background: s.background || false, minPointSize: s.minPointSize, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration, onClick: final.onBarClick, onMouseEnter: final.onBarMouseEnter, onMouseLeave: final.onBarMouseLeave, activeBar: s.activeBar !== false ? (typeof s.activeBar === 'object' ? s.activeBar : {
244
+ return (react_1.default.createElement(recharts_1.Bar, { key: s.dataKey || "series-".concat(index), dataKey: s.dataKey, name: s.label || s.dataKey, fill: resolveColor(s.color), stroke: s.stroke ? resolveColor(s.stroke) : undefined, strokeWidth: s.strokeWidth || 0, fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.8, barSize: s.barSize || final.barSize, maxBarSize: s.maxBarSize || final.maxBarSize, stackId: s.stackId, background: s.background || false, minPointSize: s.minPointSize, isAnimationActive: final.isAnimationActive !== false, animationDuration: final.animationDuration || 400, onClick: final.onBarClick, onMouseEnter: final.onBarMouseEnter, onMouseLeave: final.onBarMouseLeave, activeBar: s.activeBar !== false ? (typeof s.activeBar === 'object' ? s.activeBar : {
258
245
  fill: resolveColor(s.color),
259
246
  stroke: resolveColor(s.stroke),
260
247
  strokeWidth: 2,
261
248
  fillOpacity: 1
262
- }) : false }));
249
+ }) : false, radius: s.radius || final.barRadius }));
263
250
  }
264
251
  catch (error) {
265
252
  console.error('Error rendering bar series:', error);
package/ui/chart/Line.js CHANGED
@@ -208,12 +208,12 @@ var Lines = function (localProps) {
208
208
  react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(final.fromColor || 'primary') || '#8884d8', stopOpacity: 0.8 }),
209
209
  react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(final.toColor || 'primary200') || '#8884d8', stopOpacity: 0 }))); }, [baseGradientId, final.fromColor, final.toColor]);
210
210
  var containerStyle = (0, react_1.useMemo)(function () { return ({
211
- height: final.height,
212
- width: final.width,
213
- minHeight: final.minHeight,
214
- maxHeight: final.maxHeight,
215
- minWidth: final.minWidth,
216
- maxWidth: final.maxWidth,
211
+ height: final.height || '400px', // Default height
212
+ width: final.width || '100%', // Default width
213
+ minHeight: final.minHeight || '300px', // Minimum height
214
+ maxHeight: final.maxHeight || '100%',
215
+ minWidth: final.minWidth || '100%',
216
+ maxWidth: final.maxWidth || '100%',
217
217
  background: final.chartBackground,
218
218
  borderRadius: final.borderRadius,
219
219
  padding: final.padding,
@@ -226,20 +226,27 @@ var Lines = function (localProps) {
226
226
  react_1.default.createElement("div", { className: "text-lg mb-2" }, "\uD83D\uDCCA"),
227
227
  react_1.default.createElement("div", null, "No chart data available"))));
228
228
  }
229
- return (react_1.default.createElement("div", { style: {
230
- height: final.height || "400px",
231
- width: final.width || "100%",
232
- } },
233
- react_1.default.createElement(recharts_1.ResponsiveContainer, { aspect: final.aspect, className: final.funcss, style: containerStyle },
234
- react_1.default.createElement(recharts_1.AreaChart, { data: parsedData, margin: final.margin, syncId: final.syncId },
229
+ return (react_1.default.createElement("div", { className: final.funcss, style: containerStyle, id: final.id },
230
+ react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%" // Must be set for responsive behavior
231
+ , height: "100%" // Must be set for responsive behavior
232
+ , aspect: final.aspect, minHeight: final.minHeight ? String(final.minHeight) : undefined, minWidth: final.minWidth ? String(final.minWidth) : undefined },
233
+ react_1.default.createElement(recharts_1.AreaChart, { data: parsedData, margin: final.margin || { top: 10, right: 30, left: 0, bottom: 20 }, syncId: final.syncId },
235
234
  react_1.default.createElement("defs", null,
236
235
  defaultGradient,
237
236
  gradients),
238
- final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
239
- !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' })),
240
- 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))),
241
- 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))),
242
- final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
237
+ final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray || '3 3', stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
238
+ !final.showGrid && final.horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray || '3 3', horizontal: true, vertical: false, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
239
+ final.showXAxis !== false && (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 !== false, axisLine: final.axisLine !== false, label: final.xAxisLabel ? {
240
+ value: final.xAxisLabel,
241
+ position: 'insideBottom',
242
+ offset: -10
243
+ } : undefined }, final.xAxisProps))),
244
+ final.showYAxis !== false && (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 !== false, axisLine: final.axisLine !== false, label: final.yAxisLabel ? {
245
+ value: final.yAxisLabel,
246
+ angle: -90,
247
+ position: 'insideLeft'
248
+ } : undefined }, final.yAxisProps))),
249
+ final.showTooltip !== false && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
243
250
  final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
244
251
  parsedSeries.map(function (s, index) {
245
252
  if (!s || !s.dataKey) {
@@ -251,7 +258,7 @@ var Lines = function (localProps) {
251
258
  var gradientId = hasCustomGradient
252
259
  ? "".concat(baseGradientId, "-").concat(index)
253
260
  : baseGradientId;
254
- return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey || "series-".concat(index), type: final.curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: hasCustomGradient || final.fromColor ? "url(#".concat(gradientId, ")") : resolveStrokeColor(s.color), fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.6, strokeWidth: s.strokeWidth || 2, strokeDasharray: s.strokeDasharray, dot: s.dot !== false ? { r: 4 } : false, activeDot: s.activeDot !== false ? (typeof s.activeDot === 'object' ? s.activeDot : { r: 6, strokeWidth: 2 }) : false, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration }));
261
+ return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey || "series-".concat(index), type: final.curveType || "monotone", dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: hasCustomGradient || final.fromColor ? "url(#".concat(gradientId, ")") : resolveStrokeColor(s.color), fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.6, strokeWidth: s.strokeWidth || 2, strokeDasharray: s.strokeDasharray, dot: s.dot !== false ? { r: 4 } : false, activeDot: s.activeDot !== false ? (typeof s.activeDot === 'object' ? s.activeDot : { r: 6, strokeWidth: 2 }) : false, isAnimationActive: final.isAnimationActive !== false, animationDuration: final.animationDuration || 400 }));
255
262
  }
256
263
  catch (error) {
257
264
  console.error('Error rendering area series:', error);