funuicss 3.6.20 → 3.7.0

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 (10) hide show
  1. package/css/fun.css +124 -127
  2. package/index.d.ts +1 -0
  3. package/index.js +3 -1
  4. package/package.json +1 -1
  5. package/ui/chart/Line.d.ts +68 -11
  6. package/ui/chart/Line.js +227 -26
  7. package/ui/sidebar/SideBar.js +1 -1
  8. package/ui/text/Text.js +73 -33
  9. package/ui/theme/theme.d.ts +12 -0
  10. package/ui/theme/theme.js +104 -52
package/css/fun.css CHANGED
@@ -207,7 +207,7 @@
207
207
  --loaderZindex:100;
208
208
  --snackBarZindex:20;
209
209
  --notificationZindex:29;
210
- --inputButtonHeight:2.4rem;
210
+ --inputButtonHeight:2.5rem;
211
211
  --inputPadding:1rem;
212
212
  --inputRoundedPadding:0.5rem 1rem;
213
213
  --shadowMedium:0 0.8rem 2rem 0 rgba(3, 3, 3, 0.1);
@@ -607,115 +607,114 @@
607
607
 
608
608
  /* Font utilities with matching line heights */
609
609
  .text-xs {
610
- font-size: var(--text-xs-responsive);
611
- line-height: var(--leading-xs-responsive);
610
+ font-size: var(--text-xs-responsive) !important;
611
+ line-height: var(--leading-xs-responsive) !important;
612
612
  }
613
613
 
614
614
  .text-sm {
615
- font-size: var(--text-sm-responsive);
616
- line-height: var(--leading-sm-responsive);
615
+ font-size: var(--text-sm-responsive) !important;
616
+ line-height: var(--leading-sm-responsive) !important;
617
617
  }
618
618
 
619
619
  .text-base {
620
- font-size: var(--text-base-responsive);
621
- line-height: var(--leading-base-responsive);
620
+ font-size: var(--text-base-responsive) !important;
621
+ line-height: var(--leading-base-responsive) !important;
622
622
  }
623
623
 
624
624
  .text-lg {
625
- font-size: var(--text-lg-responsive);
626
- line-height: var(--leading-lg-responsive);
625
+ font-size: var(--text-lg-responsive) !important;
626
+ line-height: var(--leading-lg-responsive) !important;
627
627
  }
628
628
 
629
629
  .text-xl {
630
- font-size: var(--text-xl-responsive);
631
- line-height: var(--leading-xl-responsive);
632
- font-weight: 400;
630
+ font-size: var(--text-xl-responsive) !important;
631
+ line-height: var(--leading-xl-responsive) !important;
632
+ font-weight: 400 !important;
633
633
  }
634
634
 
635
635
  .text-2xl {
636
- font-size: var(--text-2xl-responsive);
637
- line-height: var(--leading-2xl-responsive);
638
- font-weight: 500;
636
+ font-size: var(--text-2xl-responsive) !important;
637
+ line-height: var(--leading-2xl-responsive) !important;
638
+ font-weight: 500 !important;
639
639
  }
640
640
 
641
641
  .text-3xl {
642
- font-size: var(--text-3xl-responsive);
643
- line-height: var(--leading-3xl-responsive);
644
- font-weight: 500;
642
+ font-size: var(--text-3xl-responsive) !important;
643
+ line-height: var(--leading-3xl-responsive) !important;
644
+ font-weight: 500 !important;
645
645
  }
646
646
 
647
647
  .text-4xl {
648
- font-size: var(--text-4xl-responsive);
649
- line-height: var(--leading-4xl-responsive);
650
- font-weight: 600;
648
+ font-size: var(--text-4xl-responsive) !important;
649
+ line-height: var(--leading-4xl-responsive) !important;
650
+ font-weight: 600 !important;
651
651
  }
652
652
 
653
653
  .text-5xl {
654
- font-size: var(--text-5xl-responsive);
655
- line-height: var(--leading-5xl-responsive);
656
- font-weight: 600;
654
+ font-size: var(--text-5xl-responsive) !important;
655
+ line-height: var(--leading-5xl-responsive) !important;
656
+ font-weight: 600 !important;
657
657
  }
658
658
 
659
659
  .text-6xl {
660
- font-size: var(--text-6xl-responsive);
661
- line-height: var(--leading-6xl-responsive);
662
- font-weight: 600;
660
+ font-size: var(--text-6xl-responsive) !important;
661
+ line-height: var(--leading-6xl-responsive) !important;
662
+ font-weight: 600 !important;
663
663
  }
664
664
 
665
665
  .text-7xl {
666
- font-size: var(--text-7xl-responsive);
667
- line-height: var(--leading-7xl-responsive);
668
- font-weight: 600;
666
+ font-size: var(--text-7xl-responsive) !important;
667
+ line-height: var(--leading-7xl-responsive) !important;
668
+ font-weight: 600 !important;
669
669
  }
670
670
 
671
671
  .text-8xl {
672
- font-size: var(--text-8xl-responsive);
673
- line-height: var(--leading-8xl-responsive);
674
- font-weight: 800;
672
+ font-size: var(--text-8xl-responsive) !important;
673
+ line-height: var(--leading-8xl-responsive) !important;
674
+ font-weight: 800 !important;
675
675
  }
676
676
 
677
677
  .text-9xl {
678
- font-size: var(--text-9xl-responsive);
679
- line-height: var(--leading-9xl-responsive);
680
- font-weight: 900;
678
+ font-size: var(--text-9xl-responsive) !important;
679
+ line-height: var(--leading-9xl-responsive) !important;
680
+ font-weight: 900 !important;
681
681
  }
682
682
 
683
683
  .text-10xl {
684
- font-size: var(--text-10xl-responsive);
685
- line-height: var(--leading-10xl-responsive);
686
- font-weight: 900;
684
+ font-size: var(--text-10xl-responsive) !important;
685
+ line-height: var(--leading-10xl-responsive) !important;
686
+ font-weight: 900 !important;
687
687
  }
688
688
 
689
689
  .text-big {
690
- font-size: var(--font-size-big-responsive);
691
- line-height: var(--line-height-big-responsive);
692
- font-weight: var(--font-weight-big);
693
- font-style: var(--font-style-big);
694
- text-decoration: var(--text-decoration-big);
695
- text-transform: var(--text-transform-big);
696
- letter-spacing: var(--letter-spacing-big);
690
+ font-size: var(--font-size-big-responsive) !important;
691
+ line-height: var(--line-height-big-responsive) !important;
692
+ font-weight: var(--font-weight-big) !important;
693
+ font-style: var(--font-style-big) !important;
694
+ text-decoration: var(--text-decoration-big) !important;
695
+ text-transform: var(--text-transform-big) !important;
696
+ letter-spacing: var(--letter-spacing-big) !important;
697
697
  }
698
698
 
699
699
  .text-bigger {
700
- font-size: var(--font-size-bigger-responsive);
701
- line-height: var(--line-height-bigger-responsive);
702
- font-weight: var(--font-weight-bigger);
703
- font-style: var(--font-style-bigger);
704
- text-decoration: var(--text-decoration-bigger);
705
- text-transform: var(--text-transform-bigger);
706
- letter-spacing: var(--letter-spacing-bigger);
700
+ font-size: var(--font-size-bigger-responsive) !important;
701
+ line-height: var(--line-height-bigger-responsive) !important;
702
+ font-weight: var(--font-weight-bigger) !important;
703
+ font-style: var(--font-style-bigger) !important;
704
+ text-decoration: var(--text-decoration-bigger) !important;
705
+ text-transform: var(--text-transform-bigger) !important;
706
+ letter-spacing: var(--letter-spacing-bigger) !important;
707
707
  }
708
708
 
709
709
  .text-jumbo {
710
- font-size: var(--font-size-jumbo-responsive);
711
- line-height: var(--line-height-jumbo-responsive);
712
- font-weight: var(--font-weight-jumbo);
713
- font-style: var(--font-style-jumbo);
714
- text-decoration: var(--text-decoration-jumbo);
715
- text-transform: var(--text-transform-jumbo);
716
- letter-spacing: var(--letter-spacing-jumbo);
710
+ font-size: var(--font-size-jumbo-responsive) !important;
711
+ line-height: var(--line-height-jumbo-responsive) !important;
712
+ font-weight: var(--font-weight-jumbo) !important;
713
+ font-style: var(--font-style-jumbo) !important;
714
+ text-decoration: var(--text-decoration-jumbo) !important;
715
+ text-transform: var(--text-transform-jumbo) !important;
716
+ letter-spacing: var(--letter-spacing-jumbo) !important;
717
717
  }
718
-
719
718
  .important{
720
719
  font-weight: 700;
721
720
  color: var(--primary) !important;
@@ -723,23 +722,23 @@
723
722
 
724
723
  /* Mini sizes */
725
724
  .text-small {
726
- font-size: var(--font-size-small);
727
- line-height: var(--line-height-small);
728
- font-weight: var(--font-weight-small);
729
- font-style: var(--font-style-small);
730
- text-decoration: var(--text-decoration-small);
731
- text-transform: var(--text-transform-small);
732
- letter-spacing: var(--letter-spacing-small);
725
+ font-size: var(--font-size-small) !important;
726
+ line-height: var(--line-height-small) !important;
727
+ font-weight: var(--font-weight-small) !important;
728
+ font-style: var(--font-style-small) !important;
729
+ text-decoration: var(--text-decoration-small) !important;
730
+ text-transform: var(--text-transform-small) !important;
731
+ letter-spacing: var(--letter-spacing-small) !important;
733
732
  }
734
733
 
735
734
  .text-smaller {
736
- font-size: var(--font-size-smaller);
737
- line-height: var(--line-height-smaller);
738
- font-weight: var(--font-weight-smaller);
739
- font-style: var(--font-style-smaller);
740
- text-decoration: var(--text-decoration-smaller);
741
- text-transform: var(--text-transform-smaller);
742
- letter-spacing: var(--letter-spacing-smaller);
735
+ font-size: var(--font-size-smaller) !important;
736
+ line-height: var(--line-height-smaller) !important;
737
+ font-weight: var(--font-weight-smaller) !important;
738
+ font-style: var(--font-style-smaller) !important;
739
+ text-decoration: var(--text-decoration-smaller) !important;
740
+ text-transform: var(--text-transform-smaller) !important;
741
+ letter-spacing: var(--letter-spacing-smaller) !important;
743
742
  }
744
743
 
745
744
  /* Headings */
@@ -761,69 +760,69 @@ h1,
761
760
  font-weight: normal;
762
761
  }
763
762
 
763
+
764
764
  h1, .h1 {
765
- font-size: var(--font-size-h1-responsive);
766
- line-height: var(--line-height-h1-responsive);
767
- font-weight: var(--font-weight-h1);
768
- font-style: var(--font-style-h1);
769
- text-decoration: var(--text-decoration-h1);
770
- text-transform: var(--text-transform-h1);
771
- letter-spacing: var(--letter-spacing-h1);
765
+ font-size: var(--font-size-h1-responsive) !important;
766
+ line-height: var(--line-height-h1-responsive) !important;
767
+ font-weight: var(--font-weight-h1) !important;
768
+ font-style: var(--font-style-h1) !important;
769
+ text-decoration: var(--text-decoration-h1) !important;
770
+ text-transform: var(--text-transform-h1) !important;
771
+ letter-spacing: var(--letter-spacing-h1) !important;
772
772
  }
773
773
 
774
774
  h2, .h2 {
775
- font-size: var(--font-size-h2-responsive);
776
- line-height: var(--line-height-h2-responsive);
777
- font-weight: var(--font-weight-h2);
778
- font-style: var(--font-style-h2);
779
- text-decoration: var(--text-decoration-h2);
780
- text-transform: var(--text-transform-h2);
781
- letter-spacing: var(--letter-spacing-h2);
775
+ font-size: var(--font-size-h2-responsive) !important;
776
+ line-height: var(--line-height-h2-responsive) !important;
777
+ font-weight: var(--font-weight-h2) !important;
778
+ font-style: var(--font-style-h2) !important;
779
+ text-decoration: var(--text-decoration-h2) !important;
780
+ text-transform: var(--text-transform-h2) !important;
781
+ letter-spacing: var(--letter-spacing-h2) !important;
782
782
  }
783
783
 
784
784
  h3, .h3 {
785
- font-size: var(--font-size-h3-responsive);
786
- line-height: var(--line-height-h3-responsive);
787
- font-weight: var(--font-weight-h3);
788
- font-style: var(--font-style-h3);
789
- text-decoration: var(--text-decoration-h3);
790
- text-transform: var(--text-transform-h3);
791
- letter-spacing: var(--letter-spacing-h3);
785
+ font-size: var(--font-size-h3-responsive) !important;
786
+ line-height: var(--line-height-h3-responsive) !important;
787
+ font-weight: var(--font-weight-h3) !important;
788
+ font-style: var(--font-style-h3) !important;
789
+ text-decoration: var(--text-decoration-h3) !important;
790
+ text-transform: var(--text-transform-h3) !important;
791
+ letter-spacing: var(--letter-spacing-h3) !important;
792
792
  }
793
793
 
794
794
  h4, .h4 {
795
- font-size: var(--font-size-h4-responsive);
796
- line-height: var(--line-height-h4-responsive);
797
- font-weight: var(--font-weight-h4);
798
- font-style: var(--font-style-h4);
799
- text-decoration: var(--text-decoration-h4);
800
- text-transform: var(--text-transform-h4);
801
- letter-spacing: var(--letter-spacing-h4);
795
+ font-size: var(--font-size-h4-responsive) !important;
796
+ line-height: var(--line-height-h4-responsive) !important;
797
+ font-weight: var(--font-weight-h4) !important;
798
+ font-style: var(--font-style-h4) !important;
799
+ text-decoration: var(--text-decoration-h4) !important;
800
+ text-transform: var(--text-transform-h4) !important;
801
+ letter-spacing: var(--letter-spacing-h4) !important;
802
802
  }
803
803
 
804
804
  h5, .h5 {
805
- font-size: var(--font-size-h5-responsive);
806
- line-height: var(--line-height-h5-responsive);
807
- font-weight: var(--font-weight-h5);
808
- font-style: var(--font-style-h5);
809
- text-decoration: var(--text-decoration-h5);
810
- text-transform: var(--text-transform-h5);
811
- letter-spacing: var(--letter-spacing-h5);
805
+ font-size: var(--font-size-h5-responsive) !important;
806
+ line-height: var(--line-height-h5-responsive) !important;
807
+ font-weight: var(--font-weight-h5) !important;
808
+ font-style: var(--font-style-h5) !important;
809
+ text-decoration: var(--text-decoration-h5) !important;
810
+ text-transform: var(--text-transform-h5) !important;
811
+ letter-spacing: var(--letter-spacing-h5) !important;
812
812
  }
813
813
 
814
814
  h6, .h6 {
815
- font-size: var(--font-size-h6-responsive);
816
- line-height: var(--line-height-h6-responsive);
817
- font-weight: var(--font-weight-h6);
818
- font-style: var(--font-style-h6);
819
- text-decoration: var(--text-decoration-h6);
820
- text-transform: var(--text-transform-h6);
821
- letter-spacing: var(--letter-spacing-h6);
815
+ font-size: var(--font-size-h6-responsive) !important;
816
+ line-height: var(--line-height-h6-responsive) !important;
817
+ font-weight: var(--font-weight-h6) !important;
818
+ font-style: var(--font-style-h6) !important;
819
+ text-decoration: var(--text-decoration-h6) !important;
820
+ text-transform: var(--text-transform-h6) !important;
821
+ letter-spacing: var(--letter-spacing-h6) !important;
822
822
  }
823
823
 
824
824
 
825
825
 
826
-
827
826
  /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
828
827
  ::-webkit-scrollbar {
829
828
  width: 10px;
@@ -2312,8 +2311,14 @@ border-radius: var(--borderRadius);
2312
2311
  font-size: var(--minifiedFontSize);
2313
2312
  background-color: var(--page-bg);
2314
2313
  transition: all 0.2s ease;
2314
+ border-radius: var(--radius);
2315
+ padding-top: 1rem !important;
2316
+ height: var(--inputButtonHeight);
2317
+
2318
+
2315
2319
  }
2316
2320
 
2321
+
2317
2322
  .smallInput {
2318
2323
  font-size: var(--smallFont);
2319
2324
  }
@@ -2352,7 +2357,7 @@ border-radius: var(--borderRadius);
2352
2357
  }
2353
2358
 
2354
2359
  .floating-label.active {
2355
- top: 0.35rem;
2360
+ top: 0.25rem;
2356
2361
  font-size: 0.625rem;
2357
2362
  opacity: 1;
2358
2363
  background-color: transparent;
@@ -2417,14 +2422,6 @@ border-radius: var(--borderRadius);
2417
2422
  border-bottom-color: var(--info, var(--primary));
2418
2423
  }
2419
2424
 
2420
- /* Input dimensions */
2421
- input,
2422
- select {
2423
- height: var(--inputButtonHeight);
2424
- border-radius: var(--radius);
2425
- padding-top: 1.2rem;
2426
- padding-bottom: 0.4rem;
2427
- }
2428
2425
 
2429
2426
  /* When no label, use normal padding */
2430
2427
  input:not(:placeholder-shown),
package/index.d.ts CHANGED
@@ -56,5 +56,6 @@ 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
58
  export { default as Cookie } from "./js/Cookie";
59
+ export { useVariable } from "./ui/theme/theme";
59
60
  export { FunGet } from "./js/Fun";
60
61
  export { default as GoogleAnalytics } from "./js/google/analytics";
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.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
7
+ exports.GoogleAnalytics = exports.FunGet = exports.useVariable = exports.Cookie = 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");
@@ -122,6 +122,8 @@ Object.defineProperty(exports, "Select", { enumerable: true, get: function () {
122
122
  // js
123
123
  var Cookie_1 = require("./js/Cookie");
124
124
  Object.defineProperty(exports, "Cookie", { enumerable: true, get: function () { return __importDefault(Cookie_1).default; } });
125
+ var theme_2 = require("./ui/theme/theme");
126
+ Object.defineProperty(exports, "useVariable", { enumerable: true, get: function () { return theme_2.useVariable; } });
125
127
  var Fun_1 = require("./js/Fun");
126
128
  Object.defineProperty(exports, "FunGet", { enumerable: true, get: function () { return Fun_1.FunGet; } });
127
129
  var analytics_1 = require("./js/google/analytics");
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.6.20",
2
+ "version": "3.7.0",
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/Line.d.ts CHANGED
@@ -11,23 +11,59 @@ type ChartSeries = {
11
11
  dot?: boolean;
12
12
  fromColor?: string;
13
13
  toColor?: string;
14
+ fillOpacity?: number;
15
+ strokeDasharray?: string;
16
+ activeDot?: boolean | Record<string, any>;
14
17
  };
18
+ interface XAxisProps {
19
+ interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
20
+ tick?: boolean | Record<string, any>;
21
+ tickFormatter?: (value: any) => string;
22
+ domain?: [number | string | 'auto' | 'dataMin' | 'dataMax', number | string | 'auto' | 'dataMin' | 'dataMax'];
23
+ type?: 'number' | 'category';
24
+ allowDataOverflow?: boolean;
25
+ }
26
+ interface YAxisProps {
27
+ interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
28
+ tick?: boolean | Record<string, any>;
29
+ tickFormatter?: (value: any) => string;
30
+ domain?: [number | string | 'auto' | 'dataMin' | 'dataMax', number | string | 'auto' | 'dataMin' | 'dataMax'];
31
+ type?: 'number' | 'category';
32
+ allowDataOverflow?: boolean;
33
+ }
34
+ interface LegendProps {
35
+ align?: 'left' | 'center' | 'right';
36
+ verticalAlign?: 'top' | 'middle' | 'bottom';
37
+ layout?: 'horizontal' | 'vertical';
38
+ iconType?: 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye';
39
+ }
40
+ interface TooltipProps {
41
+ cursor?: boolean | Record<string, any>;
42
+ separator?: string;
43
+ offset?: number;
44
+ allowEscapeViewBox?: {
45
+ x?: boolean;
46
+ y?: boolean;
47
+ };
48
+ }
15
49
  interface AreaChartProps {
16
- data: DataItem[];
17
- series: ChartSeries[];
50
+ data: DataItem[] | string;
51
+ series: ChartSeries[] | string;
18
52
  fromColor?: string;
19
53
  toColor?: string;
20
54
  id?: string;
55
+ variant?: string;
21
56
  showGrid?: boolean;
22
57
  horizontalLines?: boolean;
23
58
  showLegend?: boolean;
24
59
  showXAxis?: boolean;
25
60
  showYAxis?: boolean;
61
+ showTooltip?: boolean;
26
62
  funcss?: string;
27
- curveType?: 'linear' | 'monotone' | 'step' | 'basis';
28
- rotateLabel: string;
29
- xLabelSize: string | number;
30
- yLabelSize: string | number;
63
+ curveType?: 'linear' | 'monotone' | 'step' | 'basis' | 'natural';
64
+ rotateLabel?: number;
65
+ xLabelSize?: string | number;
66
+ yLabelSize?: string | number;
31
67
  height?: number | string;
32
68
  width?: number | string;
33
69
  margin?: {
@@ -36,13 +72,34 @@ interface AreaChartProps {
36
72
  left?: number;
37
73
  bottom?: number;
38
74
  };
39
- xInterval: number;
40
- yInterval: number;
75
+ xInterval?: number;
76
+ yInterval?: number;
77
+ gridStroke?: string;
78
+ gridStrokeDasharray?: string;
41
79
  dy?: number;
42
- xAxisProps?: any;
43
- yAxisProps?: any;
80
+ xAxisProps?: XAxisProps;
81
+ yAxisProps?: YAxisProps;
82
+ xAxisLabel?: string;
83
+ yAxisLabel?: string;
84
+ tickLine?: boolean;
85
+ axisLine?: boolean;
44
86
  tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
45
- legendProps?: any;
87
+ legendProps?: LegendProps;
88
+ tooltipProps?: TooltipProps;
89
+ customTooltip?: React.ComponentType<any>;
90
+ animation?: boolean;
91
+ animationDuration?: number;
92
+ isAnimationActive?: boolean;
93
+ syncId?: string;
94
+ chartBackground?: string;
95
+ borderRadius?: string;
96
+ padding?: string;
97
+ shadow?: boolean;
98
+ aspect?: number;
99
+ minHeight?: number | string;
100
+ maxHeight?: number | string;
101
+ minWidth?: number | string;
102
+ maxWidth?: number | string;
46
103
  }
47
104
  declare const Lines: React.FC<AreaChartProps>;
48
105
  export default Lines;
package/ui/chart/Line.js CHANGED
@@ -11,12 +11,56 @@ var __assign = (this && this.__assign) || function () {
11
11
  };
12
12
  return __assign.apply(this, arguments);
13
13
  };
14
- var __importDefault = (this && this.__importDefault) || function (mod) {
15
- return (mod && mod.__esModule) ? mod : { "default": mod };
16
- };
14
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
15
+ if (k2 === undefined) k2 = k;
16
+ var desc = Object.getOwnPropertyDescriptor(m, k);
17
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
18
+ desc = { enumerable: true, get: function() { return m[k]; } };
19
+ }
20
+ Object.defineProperty(o, k2, desc);
21
+ }) : (function(o, m, k, k2) {
22
+ if (k2 === undefined) k2 = k;
23
+ o[k2] = m[k];
24
+ }));
25
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
26
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
27
+ }) : function(o, v) {
28
+ o["default"] = v;
29
+ });
30
+ var __importStar = (this && this.__importStar) || (function () {
31
+ var ownKeys = function(o) {
32
+ ownKeys = Object.getOwnPropertyNames || function (o) {
33
+ var ar = [];
34
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
35
+ return ar;
36
+ };
37
+ return ownKeys(o);
38
+ };
39
+ return function (mod) {
40
+ if (mod && mod.__esModule) return mod;
41
+ var result = {};
42
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
43
+ __setModuleDefault(result, mod);
44
+ return result;
45
+ };
46
+ })();
17
47
  Object.defineProperty(exports, "__esModule", { value: true });
18
- var react_1 = __importDefault(require("react"));
48
+ var react_1 = __importStar(require("react"));
19
49
  var recharts_1 = require("recharts");
50
+ var componentUtils_1 = require("../../utils/componentUtils");
51
+ // Parse string to object utility
52
+ var parseIfString = function (value, fallback) {
53
+ if (typeof value === 'string') {
54
+ try {
55
+ return JSON.parse(value);
56
+ }
57
+ catch (error) {
58
+ console.error('Failed to parse JSON string:', error);
59
+ return fallback;
60
+ }
61
+ }
62
+ return value;
63
+ };
20
64
  // CSS var resolver
21
65
  var getCssVar = function (varName) {
22
66
  var _a;
@@ -32,34 +76,191 @@ var resolveStrokeColor = function (color) {
32
76
  return color;
33
77
  return getCssVar(color) || color;
34
78
  };
35
- // Tooltip
79
+ // Default Tooltip
36
80
  var CustomTooltip = function (_a) {
37
- var active = _a.active, payload = _a.payload, label = _a.label;
81
+ var active = _a.active, payload = _a.payload, label = _a.label, formatter = _a.formatter;
38
82
  if (active && payload && payload.length) {
39
- return (react_1.default.createElement("div", { className: "dark raised round-edge p-2 text-sm" },
40
- react_1.default.createElement("div", { className: "text-bold" }, label),
41
- payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: { lineHeight: 1 } },
42
- entry.name,
43
- ": ",
44
- react_1.default.createElement("span", { className: "font-semibold" }, entry.value))); })));
83
+ return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm", style: {
84
+ maxWidth: '300px'
85
+ } },
86
+ react_1.default.createElement("div", { className: "text-bold mb-1" }, label),
87
+ payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: {
88
+ lineHeight: 1.4,
89
+ display: 'flex',
90
+ alignItems: 'center',
91
+ gap: '8px'
92
+ } },
93
+ react_1.default.createElement("div", { style: {
94
+ width: '12px',
95
+ height: '12px',
96
+ backgroundColor: entry.color,
97
+ borderRadius: '2px'
98
+ } }),
99
+ react_1.default.createElement("span", { style: { fontWeight: 500 } },
100
+ entry.name,
101
+ ":"),
102
+ react_1.default.createElement("span", { style: { fontWeight: 600, color: 'var(--text-color, #1a202c)' } }, formatter ? formatter(entry.value, entry.name, entry) : entry.value))); })));
45
103
  }
46
104
  return null;
47
105
  };
48
106
  var Lines = function (_a) {
49
- var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.horizontalLines, horizontalLines = _c === void 0 ? false : _c, _d = _a.showLegend, showLegend = _d === void 0 ? true : _d, _e = _a.showXAxis, showXAxis = _e === void 0 ? true : _e, _f = _a.showYAxis, showYAxis = _f === void 0 ? false : _f, funcss = _a.funcss, _g = _a.curveType, curveType = _g === void 0 ? 'monotone' : _g, _h = _a.height, height = _h === void 0 ? "100%" : _h, _j = _a.width, width = _j === void 0 ? '100%' : _j, _k = _a.margin, margin = _k === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, tooltipFormatter = _a.tooltipFormatter, _o = _a.legendProps, legendProps = _o === void 0 ? {} : _o, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval;
50
- var gradientId = id || 'colorUv';
51
- return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: width, height: height, className: funcss },
52
- react_1.default.createElement(recharts_1.AreaChart, { data: data, margin: margin },
107
+ var _b;
108
+ var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _c = _a.showGrid, showGrid = _c === void 0 ? true : _c, _d = _a.horizontalLines, horizontalLines = _d === void 0 ? false : _d, _e = _a.showLegend, showLegend = _e === void 0 ? true : _e, _f = _a.showXAxis, showXAxis = _f === void 0 ? true : _f, _g = _a.showYAxis, showYAxis = _g === void 0 ? false : _g, _h = _a.showTooltip, showTooltip = _h === void 0 ? true : _h, funcss = _a.funcss, _j = _a.curveType, curveType = _j === void 0 ? 'monotone' : _j, _k = _a.height, height = _k === void 0 ? "100%" : _k, _l = _a.width, width = _l === void 0 ? '100%' : _l, _m = _a.margin, margin = _m === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _m, _o = _a.xAxisProps, xAxisProps = _o === void 0 ? {} : _o, _p = _a.yAxisProps, yAxisProps = _p === void 0 ? {} : _p, tooltipFormatter = _a.tooltipFormatter, _q = _a.legendProps, legendProps = _q === void 0 ? {} : _q, _r = _a.tooltipProps, tooltipProps = _r === void 0 ? {} : _r, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval, _s = _a.variant, variant = _s === void 0 ? '' : _s, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _t = _a.tickLine, tickLine = _t === void 0 ? true : _t, _u = _a.axisLine, axisLine = _u === void 0 ? true : _u, gridStroke = _a.gridStroke, _v = _a.gridStrokeDasharray, gridStrokeDasharray = _v === void 0 ? "3 3" : _v, customTooltip = _a.customTooltip, _w = _a.animation, animation = _w === void 0 ? true : _w, _x = _a.animationDuration, animationDuration = _x === void 0 ? 500 : _x, _y = _a.isAnimationActive, isAnimationActive = _y === void 0 ? true : _y, syncId = _a.syncId, chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _z = _a.shadow, shadow = _z === void 0 ? false : _z, aspect = _a.aspect, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth;
109
+ // Use component configuration with variant support
110
+ var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('AreaChart', variant).mergeWithLocal;
111
+ // Create local props object
112
+ var localProps = {
113
+ data: data,
114
+ id: id,
115
+ series: series,
116
+ fromColor: fromColor,
117
+ toColor: toColor,
118
+ dy: dy,
119
+ showGrid: showGrid,
120
+ horizontalLines: horizontalLines,
121
+ showLegend: showLegend,
122
+ showXAxis: showXAxis,
123
+ showYAxis: showYAxis,
124
+ showTooltip: showTooltip,
125
+ funcss: funcss,
126
+ curveType: curveType,
127
+ height: height,
128
+ width: width,
129
+ margin: margin,
130
+ xAxisProps: xAxisProps,
131
+ yAxisProps: yAxisProps,
132
+ tooltipFormatter: tooltipFormatter,
133
+ legendProps: legendProps,
134
+ tooltipProps: tooltipProps,
135
+ rotateLabel: rotateLabel,
136
+ xLabelSize: xLabelSize,
137
+ yLabelSize: yLabelSize,
138
+ xInterval: xInterval,
139
+ yInterval: yInterval,
140
+ xAxisLabel: xAxisLabel,
141
+ yAxisLabel: yAxisLabel,
142
+ tickLine: tickLine,
143
+ axisLine: axisLine,
144
+ gridStroke: gridStroke,
145
+ gridStrokeDasharray: gridStrokeDasharray,
146
+ customTooltip: customTooltip,
147
+ animation: animation,
148
+ animationDuration: animationDuration,
149
+ isAnimationActive: isAnimationActive,
150
+ syncId: syncId,
151
+ chartBackground: chartBackground,
152
+ borderRadius: borderRadius,
153
+ padding: padding,
154
+ shadow: shadow,
155
+ aspect: aspect,
156
+ minHeight: minHeight,
157
+ maxHeight: maxHeight,
158
+ minWidth: minWidth,
159
+ maxWidth: maxWidth
160
+ };
161
+ // Merge with config - LOCAL PROPS OVERRIDE CONFIG
162
+ var mergedProps = mergeWithLocal(localProps).props;
163
+ // Parse data and series if they're strings
164
+ var parsedData = (0, react_1.useMemo)(function () { return parseIfString(mergedProps.data, []); }, [mergedProps.data]);
165
+ var parsedSeries = (0, react_1.useMemo)(function () { return parseIfString(mergedProps.series, []); }, [mergedProps.series]);
166
+ // Extract final values
167
+ var final = (0, react_1.useMemo)(function () { return ({
168
+ data: parsedData,
169
+ id: mergedProps.id,
170
+ series: parsedSeries,
171
+ fromColor: mergedProps.fromColor,
172
+ toColor: mergedProps.toColor,
173
+ dy: mergedProps.dy,
174
+ showGrid: mergedProps.showGrid,
175
+ horizontalLines: mergedProps.horizontalLines,
176
+ showLegend: mergedProps.showLegend,
177
+ showXAxis: mergedProps.showXAxis,
178
+ showYAxis: mergedProps.showYAxis,
179
+ showTooltip: mergedProps.showTooltip,
180
+ funcss: mergedProps.funcss,
181
+ curveType: mergedProps.curveType,
182
+ height: mergedProps.height,
183
+ width: mergedProps.width,
184
+ margin: mergedProps.margin,
185
+ xAxisProps: mergedProps.xAxisProps,
186
+ yAxisProps: mergedProps.yAxisProps,
187
+ tooltipFormatter: mergedProps.tooltipFormatter,
188
+ legendProps: mergedProps.legendProps,
189
+ tooltipProps: mergedProps.tooltipProps,
190
+ rotateLabel: mergedProps.rotateLabel,
191
+ xLabelSize: mergedProps.xLabelSize,
192
+ yLabelSize: mergedProps.yLabelSize,
193
+ xInterval: mergedProps.xInterval,
194
+ yInterval: mergedProps.yInterval,
195
+ xAxisLabel: mergedProps.xAxisLabel,
196
+ yAxisLabel: mergedProps.yAxisLabel,
197
+ tickLine: mergedProps.tickLine,
198
+ axisLine: mergedProps.axisLine,
199
+ gridStroke: mergedProps.gridStroke,
200
+ gridStrokeDasharray: mergedProps.gridStrokeDasharray,
201
+ customTooltip: mergedProps.customTooltip,
202
+ animation: mergedProps.animation,
203
+ animationDuration: mergedProps.animationDuration,
204
+ isAnimationActive: mergedProps.isAnimationActive,
205
+ syncId: mergedProps.syncId,
206
+ chartBackground: mergedProps.chartBackground,
207
+ borderRadius: mergedProps.borderRadius,
208
+ padding: mergedProps.padding,
209
+ shadow: mergedProps.shadow,
210
+ aspect: mergedProps.aspect,
211
+ minHeight: mergedProps.minHeight,
212
+ maxHeight: mergedProps.maxHeight,
213
+ minWidth: mergedProps.minWidth,
214
+ maxWidth: mergedProps.maxWidth
215
+ }); }, [parsedData, parsedSeries, mergedProps]);
216
+ var baseGradientId = final.id || 'areaChartGradient';
217
+ var TooltipComponent = final.customTooltip || CustomTooltip;
218
+ // Generate per-series gradients
219
+ var gradients = (0, react_1.useMemo)(function () {
220
+ return final.series.map(function (s, index) {
221
+ if (!s.fromColor && !s.toColor)
222
+ return null;
223
+ var gradientId = "".concat(baseGradientId, "-").concat(index);
224
+ var startColor = resolveStrokeColor(s.fromColor || s.color || final.fromColor);
225
+ var endColor = resolveStrokeColor(s.toColor || final.toColor);
226
+ return (react_1.default.createElement("linearGradient", { key: gradientId, id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
227
+ react_1.default.createElement("stop", { offset: "5%", stopColor: startColor, stopOpacity: 0.8 }),
228
+ react_1.default.createElement("stop", { offset: "95%", stopColor: endColor, stopOpacity: 0 })));
229
+ });
230
+ }, [final.series, baseGradientId, final.fromColor, final.toColor]);
231
+ // Default gradient for series without custom gradients
232
+ var defaultGradient = (0, react_1.useMemo)(function () { return (react_1.default.createElement("linearGradient", { id: baseGradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
233
+ react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(final.fromColor || 'primary'), stopOpacity: 0.8 }),
234
+ react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(final.toColor || 'primary200'), stopOpacity: 0 }))); }, [baseGradientId, final.fromColor, final.toColor]);
235
+ var containerStyle = (0, react_1.useMemo)(function () { return ({
236
+ height: final.height,
237
+ width: final.width,
238
+ minHeight: final.minHeight,
239
+ maxHeight: final.maxHeight,
240
+ minWidth: final.minWidth,
241
+ maxWidth: final.maxWidth,
242
+ background: final.chartBackground,
243
+ borderRadius: final.borderRadius,
244
+ padding: final.padding,
245
+ boxShadow: final.shadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)' : undefined,
246
+ }); }, [final]);
247
+ return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: final.width, height: final.height, aspect: final.aspect, className: final.funcss, style: containerStyle },
248
+ react_1.default.createElement(recharts_1.AreaChart, { data: final.data, margin: final.margin, syncId: final.syncId },
53
249
  react_1.default.createElement("defs", null,
54
- react_1.default.createElement("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
55
- react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(fromColor || 'primary'), stopOpacity: 0.8 }),
56
- react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(toColor || 'primary200'), stopOpacity: 0 }))),
57
- showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
58
- !showGrid && horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false })),
59
- showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: xInterval || 0, padding: { left: 10, right: 10 }, fontSize: xLabelSize || "0.8rem", strokeWidth: horizontalLines ? 0 : 0.2, dataKey: "label", angle: rotateLabel || -35, dy: dy !== null && dy !== void 0 ? dy : 10 }, xAxisProps))),
60
- showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: yInterval || 0, strokeWidth: horizontalLines ? 0 : 0.2, fontSize: yLabelSize || "0.8rem" }, yAxisProps))),
61
- react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter }),
62
- showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
63
- series.map(function (s, index) { return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey, type: curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: "url(#".concat(gradientId, ")"), fillOpacity: 1, strokeWidth: s.strokeWidth || 2, dot: s.dot !== false ? { r: 4 } : false, activeDot: { r: 8 } })); }))));
250
+ defaultGradient,
251
+ gradients),
252
+ final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
253
+ !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' })),
254
+ final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize || "0.8rem", strokeWidth: final.horizontalLines ? 0 : 0.2, dataKey: "label", angle: final.rotateLabel || -35, dy: (_b = final.dy) !== null && _b !== void 0 ? _b : 10, tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? { value: final.xAxisLabel, position: 'insideBottom', offset: -10 } : undefined }, final.xAxisProps))),
255
+ 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))),
256
+ final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
257
+ final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
258
+ final.series.map(function (s, index) {
259
+ var hasCustomGradient = s.fromColor || s.toColor;
260
+ var gradientId = hasCustomGradient
261
+ ? "".concat(baseGradientId, "-").concat(index)
262
+ : baseGradientId;
263
+ return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey || index, type: final.curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: hasCustomGradient || final.fromColor ? "url(#".concat(gradientId, ")") : resolveStrokeColor(s.color), fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.6, strokeWidth: s.strokeWidth || 2, strokeDasharray: s.strokeDasharray, dot: s.dot !== false ? { r: 4 } : false, activeDot: s.activeDot !== false ? (typeof s.activeDot === 'object' ? s.activeDot : { r: 6, strokeWidth: 2 }) : false, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration }));
264
+ }))));
64
265
  };
65
266
  exports.default = Lines;
package/ui/sidebar/SideBar.js CHANGED
@@ -129,7 +129,7 @@ function SideBar(_a) {
129
129
  window.location.href = link.uri;
130
130
  }
131
131
  }, key: link.uri },
132
- react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "p-1 pl-2 pr-2 sidebar-link text-left ".concat(isActive ? "primary ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " \n ").concat((variant === 'standard' || popIcon) ? "p-1 ".concat(isActive ? "primary" : "lighter border", " central") : (variant === "minimal" && !isActive) ? "p-1 central lighter " : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon) },
132
+ react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "p-1 pl-2 pr-2 sidebar-link text-left ".concat(isActive ? "primary ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " \n ").concat((variant === 'standard' || popIcon) ? "p-1 ".concat(isActive ? "primary" : "lighter text-primary border", " central") : (variant === "minimal" && !isActive) ? "p-1 central lighter text-primary" : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon) },
133
133
  react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
134
134
  })));
135
135
  }))),
package/ui/text/Text.js CHANGED
@@ -28,59 +28,99 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var pi_1 = require("react-icons/pi");
31
- var getCssVariable_1 = require("../../utils/getCssVariable");
32
31
  var componentUtils_1 = require("../../utils/componentUtils");
33
32
  var Text = function (_a) {
34
33
  var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'base' : _c, margin = _a.margin, padding = _a.padding, rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "variant", "size", "margin", "padding"]);
35
- // Use the component config hook
36
- var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', variant).mergeWithLocal;
34
+ // Only use component config if variant is provided and not empty
35
+ var shouldUseConfig = variant !== undefined && variant !== '';
36
+ // Use the component config hook only when needed
37
+ var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', shouldUseConfig ? variant : undefined).mergeWithLocal;
38
+ // Create local props object
39
+ var localProps = __assign({ bg: bg, color: color, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size, margin: margin, padding: padding }, rest);
37
40
  // Merge config with local props - local props override config
38
- var mergedProps = mergeWithLocal(__assign({ bg: bg, color: color, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size, margin: margin, padding: padding }, rest)).props;
41
+ var mergedProps = (shouldUseConfig
42
+ ? mergeWithLocal(localProps)
43
+ : { props: localProps }).props;
44
+ // Extract final values - local props take precedence, handle empty strings properly
45
+ var final = {
46
+ bg: bg !== undefined ? bg : mergedProps.bg,
47
+ color: color !== undefined ? color : mergedProps.color,
48
+ funcss: funcss !== undefined ? funcss : mergedProps.funcss,
49
+ emp: emp !== undefined ? emp : mergedProps.emp,
50
+ bold: bold !== undefined ? bold : mergedProps.bold,
51
+ block: block !== undefined ? block : mergedProps.block,
52
+ body: body !== undefined ? body : mergedProps.body,
53
+ article: article !== undefined ? article : mergedProps.article,
54
+ light: light !== undefined ? light : mergedProps.light,
55
+ lighter: lighter !== undefined ? lighter : mergedProps.lighter,
56
+ italic: italic !== undefined ? italic : mergedProps.italic,
57
+ weight: weight !== undefined ? weight : mergedProps.weight,
58
+ underline: underline !== undefined ? underline : mergedProps.underline,
59
+ align: align !== undefined ? align : mergedProps.align,
60
+ lineHeight: lineHeight !== undefined ? lineHeight : mergedProps.lineHeight,
61
+ letterSpacing: letterSpacing !== undefined ? letterSpacing : mergedProps.letterSpacing,
62
+ uppercase: uppercase !== undefined ? uppercase : mergedProps.uppercase,
63
+ lowercase: lowercase !== undefined ? lowercase : mergedProps.lowercase,
64
+ capitalize: capitalize !== undefined ? capitalize : mergedProps.capitalize,
65
+ textDecoration: textDecoration !== undefined ? textDecoration : mergedProps.textDecoration,
66
+ textTransform: textTransform !== undefined ? textTransform : mergedProps.textTransform,
67
+ whiteSpace: whiteSpace !== undefined ? whiteSpace : mergedProps.whiteSpace,
68
+ wordBreak: wordBreak !== undefined ? wordBreak : mergedProps.wordBreak,
69
+ fontFamily: fontFamily !== undefined ? fontFamily : mergedProps.fontFamily,
70
+ truncate: truncate !== undefined ? truncate : mergedProps.truncate,
71
+ textShadow: textShadow !== undefined ? textShadow : mergedProps.textShadow,
72
+ textAlign: textAlign !== undefined ? textAlign : mergedProps.textAlign,
73
+ monospace: monospace !== undefined ? monospace : mergedProps.monospace,
74
+ quote: quote !== undefined ? quote : mergedProps.quote,
75
+ opacity: opacity !== undefined ? opacity : mergedProps.opacity,
76
+ size: size !== undefined ? size : mergedProps.size,
77
+ margin: margin !== undefined ? margin : mergedProps.margin,
78
+ padding: padding !== undefined ? padding : mergedProps.padding,
79
+ };
39
80
  // If margin is provided, force block display
40
- var shouldBeBlock = mergedProps.block || !!mergedProps.margin;
81
+ var shouldBeBlock = final.block || !!final.margin;
41
82
  var Tag = shouldBeBlock ? 'div' : 'span';
42
- var sizeClass = "".concat(mergedProps.size === 'h1' ? "h1" :
43
- mergedProps.size === 'h2' ? "h2" :
44
- mergedProps.size === 'h3' ? "h3" :
45
- mergedProps.size === 'h4' ? "h4" :
46
- mergedProps.size === 'h5' ? "h5" :
47
- mergedProps.size === 'h6' ? "h6" :
48
- "text-".concat(mergedProps.size));
49
- var bdFontWeight = (0, getCssVariable_1.getCssVariableValue)('bd-font-weight');
50
- var mergedStyles = __assign(__assign({ display: shouldBeBlock ? 'block' : undefined, fontWeight: mergedProps.bold ? 'bold' : mergedProps.weight ? mergedProps.weight : Number(bdFontWeight), lineHeight: mergedProps.lineHeight, letterSpacing: mergedProps.letterSpacing, textTransform: mergedProps.textTransform, textDecoration: mergedProps.textDecoration, fontFamily: mergedProps.fontFamily, textShadow: mergedProps.textShadow, textAlign: mergedProps.textAlign, whiteSpace: mergedProps.whiteSpace, wordBreak: mergedProps.wordBreak, transform: mergedProps.transform, margin: mergedProps.margin, padding: mergedProps.padding }, customStyles), (mergedProps.truncate
83
+ var sizeClass = "".concat(final.size === 'h1' ? "h1" :
84
+ final.size === 'h2' ? "h2" :
85
+ final.size === 'h3' ? "h3" :
86
+ final.size === 'h4' ? "h4" :
87
+ final.size === 'h5' ? "h5" :
88
+ final.size === 'h6' ? "h6" :
89
+ "text-".concat(final.size));
90
+ var mergedStyles = __assign(__assign({ display: shouldBeBlock ? 'block' : undefined, fontWeight: final.bold ? 'bold' : final.weight ? final.weight : undefined, lineHeight: final.lineHeight, letterSpacing: final.letterSpacing, textTransform: final.textTransform, textDecoration: final.textDecoration, fontFamily: final.fontFamily, textShadow: final.textShadow, textAlign: final.textAlign, whiteSpace: final.whiteSpace, wordBreak: final.wordBreak, margin: final.margin, padding: final.padding }, customStyles), (final.truncate
51
91
  ? {
52
92
  display: '-webkit-box',
53
93
  WebkitBoxOrient: 'vertical',
54
- WebkitLineClamp: mergedProps.truncate,
94
+ WebkitLineClamp: final.truncate,
55
95
  overflow: 'hidden',
56
96
  textOverflow: 'ellipsis',
57
97
  }
58
98
  : {}));
59
99
  var classNames = [
60
- mergedProps.funcss || '',
100
+ final.funcss || '',
61
101
  sizeClass,
62
- mergedProps.color ? " text-".concat(mergedProps.color, " ") : '',
63
- mergedProps.align ? " text-".concat(mergedProps.align, " ") : '',
64
- mergedProps.monospace ? 'monospace' : '',
65
- mergedProps.bg || '',
102
+ final.color ? " text-".concat(final.color, " ") : '',
103
+ final.align ? " text-".concat(final.align, " ") : '',
104
+ final.monospace ? 'monospace' : '',
105
+ final.bg || '',
66
106
  hoverText ? "hover-text-".concat(hoverText) : '',
67
107
  hoverBg ? "hover-".concat(hoverBg) : '',
68
- mergedProps.light ? 'lightText' : mergedProps.lighter ? 'lighterText' : '',
69
- mergedProps.italic ? 'italicText' : '',
70
- mergedProps.underline ? 'underlineText' : '',
71
- mergedProps.body ? 'body' : '',
72
- mergedProps.article ? 'article' : '',
73
- mergedProps.emp ? 'emp' : '',
74
- mergedProps.bold ? 'bold' : '',
75
- mergedProps.uppercase ? 'uppercase' : '',
76
- mergedProps.lowercase ? 'lowercase' : '',
77
- mergedProps.capitalize ? 'capitalize' : '',
78
- mergedProps.opacity ? 'opacity-' + mergedProps.opacity : '',
108
+ final.light ? 'lightText' : final.lighter ? 'lighterText' : '',
109
+ final.italic ? 'italicText' : '',
110
+ final.underline ? 'underlineText' : '',
111
+ final.body ? 'body' : '',
112
+ final.article ? 'article' : '',
113
+ final.emp ? 'emp' : '',
114
+ final.bold ? 'bold' : '',
115
+ final.uppercase ? 'uppercase' : '',
116
+ final.lowercase ? 'lowercase' : '',
117
+ final.capitalize ? 'capitalize' : '',
118
+ final.opacity ? 'opacity-' + final.opacity : '',
79
119
  ]
80
120
  .filter(Boolean)
81
121
  .join(' ');
82
- return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, mergedProps),
83
- mergedProps.quote && (react_1.default.createElement("div", null,
122
+ return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, rest),
123
+ final.quote && (react_1.default.createElement("div", null,
84
124
  react_1.default.createElement(pi_1.PiQuotesLight, null))),
85
125
  children,
86
126
  text));
package/ui/theme/theme.d.ts CHANGED
@@ -4,6 +4,10 @@ export type ThemeName = 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-
4
4
  interface ThemeConfig {
5
5
  [key: string]: any;
6
6
  }
7
+ interface Variable {
8
+ name: string;
9
+ value: any;
10
+ }
7
11
  interface ProjectData {
8
12
  theme_config?: {
9
13
  colors?: Record<string, string>;
@@ -12,6 +16,7 @@ interface ProjectData {
12
16
  };
13
17
  components?: Record<string, any>;
14
18
  default_variation?: ThemeVariant;
19
+ variables?: Variable[];
15
20
  name?: string;
16
21
  project_id?: string;
17
22
  version?: number;
@@ -38,6 +43,11 @@ export declare const useVariant: () => {
38
43
  variant: ThemeVariant;
39
44
  setVariant: React.Dispatch<React.SetStateAction<ThemeVariant>>;
40
45
  };
46
+ export declare const getVariable: (name: string) => {
47
+ name: string;
48
+ value: any;
49
+ } | undefined;
50
+ export declare const getAllVariables: () => Variable[];
41
51
  declare const ThemeProvider: React.FC<ThemeProviderProps>;
42
52
  export default ThemeProvider;
43
53
  export declare const useThemeValue: (key: string) => string | undefined;
@@ -49,3 +59,5 @@ export declare const useProjectData: () => ProjectData | null;
49
59
  export declare const useColor: (colorName: string) => string | undefined;
50
60
  export declare const useTypographyValue: (property: string) => string | undefined;
51
61
  export declare const useComponentVariant: (componentName: string, variantName?: string) => any;
62
+ export declare const useVariables: () => Variable[];
63
+ export declare const useVariable: (name: string) => any;
package/ui/theme/theme.js CHANGED
@@ -70,7 +70,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
70
70
  }
71
71
  };
72
72
  Object.defineProperty(exports, "__esModule", { value: true });
73
- exports.useComponentVariant = exports.useTypographyValue = exports.useColor = exports.useProjectData = exports.useThemeConfig = exports.useTypography = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.useVariant = exports.useTheme = void 0;
73
+ exports.useVariable = exports.useVariables = exports.useComponentVariant = exports.useTypographyValue = exports.useColor = exports.useProjectData = exports.useThemeConfig = exports.useTypography = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.getAllVariables = exports.getVariable = exports.useVariant = exports.useTheme = void 0;
74
74
  var react_1 = __importStar(require("react"));
75
75
  var themes_1 = require("./themes");
76
76
  var darkenUtils_1 = require("./darkenUtils");
@@ -97,53 +97,64 @@ var useVariant = function () {
97
97
  };
98
98
  exports.useVariant = useVariant;
99
99
  /* -------------------------------------------------------------------------- */
100
- /* CDN THEME LOADER */
100
+ /* LOCAL FILE MANAGEMENT */
101
101
  /* -------------------------------------------------------------------------- */
102
- var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
103
- var publicResponse, data, error_1, publicUrl, response, data, error_2;
102
+ var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
103
+ var response, data, error_1;
104
104
  return __generator(this, function (_a) {
105
105
  switch (_a.label) {
106
106
  case 0:
107
107
  _a.trys.push([0, 4, , 5]);
108
- return [4 /*yield*/, fetch("/funui.json", {
108
+ return [4 /*yield*/, fetch('/funui.json', {
109
109
  cache: 'no-cache',
110
110
  })];
111
111
  case 1:
112
- publicResponse = _a.sent();
113
- if (!publicResponse.ok) return [3 /*break*/, 3];
114
- return [4 /*yield*/, publicResponse.json()];
112
+ response = _a.sent();
113
+ if (!response.ok) return [3 /*break*/, 3];
114
+ return [4 /*yield*/, response.json()];
115
115
  case 2:
116
116
  data = _a.sent();
117
- console.log('✅ Loaded theme from public folder');
117
+ console.log('✅ Loaded theme from local file');
118
118
  return [2 /*return*/, data];
119
119
  case 3: return [3 /*break*/, 5];
120
120
  case 4:
121
121
  error_1 = _a.sent();
122
- console.log('No theme in public folder, checking Firebase Storage...');
122
+ console.log('No local theme file found');
123
123
  return [3 /*break*/, 5];
124
- case 5:
125
- _a.trys.push([5, 10, , 11]);
124
+ case 5: return [2 /*return*/, null];
125
+ }
126
+ });
127
+ }); };
128
+ /* -------------------------------------------------------------------------- */
129
+ /* CDN THEME LOADER */
130
+ /* -------------------------------------------------------------------------- */
131
+ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
132
+ var publicUrl, response, data, error_2;
133
+ return __generator(this, function (_a) {
134
+ switch (_a.label) {
135
+ case 0:
136
+ _a.trys.push([0, 5, , 6]);
126
137
  publicUrl = "https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/themes%2F".concat(projectId, ".json?alt=media");
127
138
  return [4 /*yield*/, fetch(publicUrl, {
128
139
  cache: 'no-cache',
129
140
  })];
130
- case 6:
141
+ case 1:
131
142
  response = _a.sent();
132
- if (!response.ok) return [3 /*break*/, 8];
143
+ if (!response.ok) return [3 /*break*/, 3];
133
144
  return [4 /*yield*/, response.json()];
134
- case 7:
145
+ case 2:
135
146
  data = _a.sent();
136
147
  console.log('✅ Loaded theme from Firebase Storage CDN');
137
148
  return [2 /*return*/, data];
138
- case 8:
149
+ case 3:
139
150
  console.error('Firebase Storage fetch failed:', response.status, response.statusText);
140
- _a.label = 9;
141
- case 9: return [3 /*break*/, 11];
142
- case 10:
151
+ _a.label = 4;
152
+ case 4: return [3 /*break*/, 6];
153
+ case 5:
143
154
  error_2 = _a.sent();
144
155
  console.error('Error loading from Firebase Storage:', error_2);
145
- return [3 /*break*/, 11];
146
- case 11: return [2 /*return*/, null];
156
+ return [3 /*break*/, 6];
157
+ case 6: return [2 /*return*/, null];
147
158
  }
148
159
  });
149
160
  }); };
@@ -155,7 +166,6 @@ var applyTypographyVariables = function (typography, root) {
155
166
  return;
156
167
  Object.entries(typography).forEach(function (_a) {
157
168
  var key = _a[0], value = _a[1];
158
- // Convert flat keys to CSS custom property format
159
169
  var cssVarName = "--".concat(key.replace(/_/g, '-'));
160
170
  root.style.setProperty(cssVarName, value);
161
171
  });
@@ -165,7 +175,6 @@ var applyColorVariables = function (colors, root) {
165
175
  return;
166
176
  Object.entries(colors).forEach(function (_a) {
167
177
  var key = _a[0], value = _a[1];
168
- // Convert flat keys to CSS custom property format
169
178
  var cssVarName = "--".concat(key.replace(/_/g, '-'));
170
179
  root.style.setProperty(cssVarName, value);
171
180
  });
@@ -173,15 +182,12 @@ var applyColorVariables = function (colors, root) {
173
182
  var applyThemeConfig = function (themeConfig, root) {
174
183
  if (!themeConfig)
175
184
  return;
176
- // Apply colors if they exist
177
185
  if (themeConfig.colors) {
178
186
  applyColorVariables(themeConfig.colors, root);
179
187
  }
180
- // Apply typography if it exists
181
188
  if (themeConfig.typography) {
182
189
  applyTypographyVariables(themeConfig.typography, root);
183
190
  }
184
- // Apply any other theme config properties
185
191
  Object.entries(themeConfig).forEach(function (_a) {
186
192
  var key = _a[0], value = _a[1];
187
193
  if (key !== 'colors' && key !== 'typography' && typeof value === 'string') {
@@ -191,6 +197,23 @@ var applyThemeConfig = function (themeConfig, root) {
191
197
  });
192
198
  };
193
199
  /* -------------------------------------------------------------------------- */
200
+ /* VARIABLES HELPER */
201
+ /* -------------------------------------------------------------------------- */
202
+ var cachedProjectData = null;
203
+ var getVariable = function (name) {
204
+ if (!(cachedProjectData === null || cachedProjectData === void 0 ? void 0 : cachedProjectData.variables)) {
205
+ console.warn('No variables available. Make sure ThemeProvider is mounted.');
206
+ return undefined;
207
+ }
208
+ var variable = cachedProjectData.variables.find(function (v) { return v.name === name; });
209
+ return variable;
210
+ };
211
+ exports.getVariable = getVariable;
212
+ var getAllVariables = function () {
213
+ return (cachedProjectData === null || cachedProjectData === void 0 ? void 0 : cachedProjectData.variables) || [];
214
+ };
215
+ exports.getAllVariables = getAllVariables;
216
+ /* -------------------------------------------------------------------------- */
194
217
  /* COMPONENT */
195
218
  /* -------------------------------------------------------------------------- */
196
219
  var ThemeProvider = function (_a) {
@@ -223,7 +246,7 @@ var ThemeProvider = function (_a) {
223
246
  });
224
247
  }
225
248
  }, [theme]);
226
- /* ---------------------- CDN Theme Sync ----------------------- */
249
+ /* ---------------------- CDN Theme Sync with Local File ----------------------- */
227
250
  (0, react_1.useEffect)(function () {
228
251
  if (typeof window === 'undefined' || !projectId) {
229
252
  setIsLoading(false);
@@ -232,51 +255,68 @@ var ThemeProvider = function (_a) {
232
255
  }
233
256
  var root = document.documentElement;
234
257
  var pollTimer;
235
- var fetchFromCDN = function () { return __awaiter(void 0, void 0, void 0, function () {
236
- var cdnTheme, newVersion, err_1;
258
+ var syncTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
259
+ var localTheme, localVersion, cdnTheme, cdnVersion, err_1;
237
260
  return __generator(this, function (_a) {
238
261
  switch (_a.label) {
239
262
  case 0:
240
- _a.trys.push([0, 2, 3, 4]);
241
- return [4 /*yield*/, loadThemeFromCDN(projectId)];
263
+ _a.trys.push([0, 3, 4, 5]);
264
+ return [4 /*yield*/, loadLocalTheme()];
242
265
  case 1:
266
+ localTheme = _a.sent();
267
+ localVersion = (localTheme === null || localTheme === void 0 ? void 0 : localTheme.version) || 0;
268
+ return [4 /*yield*/, loadThemeFromCDN(projectId)];
269
+ case 2:
243
270
  cdnTheme = _a.sent();
271
+ cdnVersion = (cdnTheme === null || cdnTheme === void 0 ? void 0 : cdnTheme.version) || 0;
244
272
  if (cdnTheme) {
245
- newVersion = cdnTheme.version || Date.now();
246
- if (!currentVersion || newVersion !== currentVersion) {
247
- // Apply theme data to CSS variables and state
273
+ // Compare versions and use the newer one
274
+ if (cdnVersion !== localVersion) {
275
+ console.log("\uD83D\uDD04 Version mismatch: Local(".concat(localVersion, ") vs CDN(").concat(cdnVersion, ")"));
276
+ console.log('ℹ️ Using CDN version. Please update your local funui.json file manually.');
277
+ }
278
+ // Always use CDN theme if available
279
+ if (!currentVersion || cdnVersion !== currentVersion) {
248
280
  applyThemeData(cdnTheme, root);
249
- setCurrentVersion(newVersion);
250
- console.log('✅ Theme updated from CDN');
281
+ setCurrentVersion(cdnVersion);
282
+ console.log('✅ Theme loaded from CDN');
251
283
  }
252
284
  else {
253
- console.log('✓ Theme unchanged');
285
+ console.log('✓ Theme up to date');
254
286
  }
255
287
  setError(null);
256
288
  }
289
+ else if (localTheme) {
290
+ // CDN not available but we have local
291
+ console.log('⚠️ Using local theme (CDN unavailable)');
292
+ applyThemeData(localTheme, root);
293
+ setCurrentVersion(localVersion);
294
+ setError(null);
295
+ }
257
296
  else {
258
- console.warn('⚠️ No theme found in CDN');
259
- setError('Theme not found in CDN');
297
+ // No theme available anywhere
298
+ console.warn('⚠️ No theme found');
299
+ setError('Theme not found');
260
300
  }
261
- return [3 /*break*/, 4];
262
- case 2:
263
- err_1 = _a.sent();
264
- console.error('Error loading theme from CDN:', err_1);
265
- setError('Failed to load theme from CDN');
266
- return [3 /*break*/, 4];
301
+ return [3 /*break*/, 5];
267
302
  case 3:
303
+ err_1 = _a.sent();
304
+ console.error('Error syncing theme:', err_1);
305
+ setError('Failed to sync theme');
306
+ return [3 /*break*/, 5];
307
+ case 4:
268
308
  setIsLoading(false);
269
309
  setIsInitialLoad(false);
270
310
  return [7 /*endfinally*/];
271
- case 4: return [2 /*return*/];
311
+ case 5: return [2 /*return*/];
272
312
  }
273
313
  });
274
314
  }); };
275
- // Initial load
276
- fetchFromCDN();
315
+ // Initial sync
316
+ syncTheme();
277
317
  // Poll for updates every 5 minutes
278
318
  pollTimer = setInterval(function () {
279
- fetchFromCDN();
319
+ syncTheme();
280
320
  }, 5 * 60 * 1000);
281
321
  return function () {
282
322
  clearInterval(pollTimer);
@@ -289,6 +329,8 @@ var ThemeProvider = function (_a) {
289
329
  setVariant(newVariant);
290
330
  setThemeConfig(themeConfig);
291
331
  setProjectData(data);
332
+ // Cache for variable access
333
+ cachedProjectData = data;
292
334
  // Apply all theme config to CSS variables
293
335
  applyThemeConfig(themeConfig, root);
294
336
  };
@@ -346,22 +388,32 @@ var useProjectData = function () {
346
388
  return projectData;
347
389
  };
348
390
  exports.useProjectData = useProjectData;
349
- // Get specific color value
350
391
  var useColor = function (colorName) {
351
392
  var colors = (0, exports.useColors)();
352
393
  return colors[colorName];
353
394
  };
354
395
  exports.useColor = useColor;
355
- // Get specific typography value
356
396
  var useTypographyValue = function (property) {
357
397
  var typography = (0, exports.useTypography)();
358
398
  return typography[property];
359
399
  };
360
400
  exports.useTypographyValue = useTypographyValue;
361
- // Get component variant
362
401
  var useComponentVariant = function (componentName, variantName) {
363
402
  if (variantName === void 0) { variantName = 'default'; }
364
403
  var componentConfig = (0, exports.useComponentConfig)(componentName);
365
404
  return componentConfig[variantName] || {};
366
405
  };
367
406
  exports.useComponentVariant = useComponentVariant;
407
+ // Hook to access variables
408
+ var useVariables = function () {
409
+ var projectData = (0, exports.useTheme)().projectData;
410
+ return (projectData === null || projectData === void 0 ? void 0 : projectData.variables) || [];
411
+ };
412
+ exports.useVariables = useVariables;
413
+ // Hook to get a specific variable
414
+ var useVariable = function (name) {
415
+ var variables = (0, exports.useVariables)();
416
+ var variable = variables.find(function (v) { return v.name === name; });
417
+ return variable === null || variable === void 0 ? void 0 : variable.value;
418
+ };
419
+ exports.useVariable = useVariable;