@charlesgomes/leafcode-shared-lib-react 1.0.87 → 1.0.88

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 (5) hide show
  1. package/dist/index.d.mts +23 -17
  2. package/dist/index.d.ts +23 -17
  3. package/dist/index.js +36 -19
  4. package/dist/index.mjs +36 -19
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -74,24 +74,8 @@ interface Props {
74
74
  btnSuccess?: string;
75
75
  disabledBtnSuccess?: boolean;
76
76
  type?: "submit" | "button";
77
- fonts?: {
78
- modalTitleFontWeight?: number | string;
79
- modalTitleFontSize?: number | string;
80
- modalTitleFontFamily?: string;
81
- modalBodyFontFamily?: string;
82
- modalBodyFontSize?: number | string;
83
- };
84
- colors?: {
85
- modalBgColor?: string;
86
- modalTitleColor?: string;
87
- modalBodyColor?: string;
88
- modalCloseColor?: string;
89
- };
90
- modalMaxWidth?: {
91
- modalMaxWidth?: number | string;
92
- };
93
77
  }
94
- declare function ModalBase({ show, onHide, onAction, title, children, loading, btnCancel, btnSuccess, type, disabledBtnSuccess, colors, fonts, modalMaxWidth, }: Props): react_jsx_runtime.JSX.Element;
78
+ declare function ModalBase({ show, onHide, onAction, title, children, loading, btnCancel, btnSuccess, type, disabledBtnSuccess, }: Props): react_jsx_runtime.JSX.Element;
95
79
 
96
80
  interface PaginatedResponse$1<T> {
97
81
  items: T[];
@@ -300,6 +284,7 @@ interface LeafcodeTheme {
300
284
  text: string;
301
285
  placeholder: string;
302
286
  passwordToggle: string;
287
+ labelLine: string;
303
288
  };
304
289
 
305
290
  fonts: {
@@ -345,6 +330,27 @@ interface LeafcodeTheme {
345
330
  radius: string;
346
331
  };
347
332
  };
333
+
334
+ modalBase: {
335
+ colors: {
336
+ modalTitleColor: string;
337
+ modalBgColor: string;
338
+ modalCloseColor: string;
339
+ modalBodyColor: string;
340
+ };
341
+
342
+ fonts: {
343
+ modalTitleFontFamily: string;
344
+ modalTitleFontWeight: number | string;
345
+ modalTitleFontSize: string | number;
346
+ modalBodyFontFamily: string | number;
347
+ modalBodyFontSize: string | number;
348
+ };
349
+
350
+ sizes: {
351
+ modalMaxWidth: string | number;
352
+ };
353
+ };
348
354
  };
349
355
  }
350
356
 
package/dist/index.d.ts CHANGED
@@ -74,24 +74,8 @@ interface Props {
74
74
  btnSuccess?: string;
75
75
  disabledBtnSuccess?: boolean;
76
76
  type?: "submit" | "button";
77
- fonts?: {
78
- modalTitleFontWeight?: number | string;
79
- modalTitleFontSize?: number | string;
80
- modalTitleFontFamily?: string;
81
- modalBodyFontFamily?: string;
82
- modalBodyFontSize?: number | string;
83
- };
84
- colors?: {
85
- modalBgColor?: string;
86
- modalTitleColor?: string;
87
- modalBodyColor?: string;
88
- modalCloseColor?: string;
89
- };
90
- modalMaxWidth?: {
91
- modalMaxWidth?: number | string;
92
- };
93
77
  }
94
- declare function ModalBase({ show, onHide, onAction, title, children, loading, btnCancel, btnSuccess, type, disabledBtnSuccess, colors, fonts, modalMaxWidth, }: Props): react_jsx_runtime.JSX.Element;
78
+ declare function ModalBase({ show, onHide, onAction, title, children, loading, btnCancel, btnSuccess, type, disabledBtnSuccess, }: Props): react_jsx_runtime.JSX.Element;
95
79
 
96
80
  interface PaginatedResponse$1<T> {
97
81
  items: T[];
@@ -300,6 +284,7 @@ interface LeafcodeTheme {
300
284
  text: string;
301
285
  placeholder: string;
302
286
  passwordToggle: string;
287
+ labelLine: string;
303
288
  };
304
289
 
305
290
  fonts: {
@@ -345,6 +330,27 @@ interface LeafcodeTheme {
345
330
  radius: string;
346
331
  };
347
332
  };
333
+
334
+ modalBase: {
335
+ colors: {
336
+ modalTitleColor: string;
337
+ modalBgColor: string;
338
+ modalCloseColor: string;
339
+ modalBodyColor: string;
340
+ };
341
+
342
+ fonts: {
343
+ modalTitleFontFamily: string;
344
+ modalTitleFontWeight: number | string;
345
+ modalTitleFontSize: string | number;
346
+ modalBodyFontFamily: string | number;
347
+ modalBodyFontSize: string | number;
348
+ };
349
+
350
+ sizes: {
351
+ modalMaxWidth: string | number;
352
+ };
353
+ };
348
354
  };
349
355
  }
350
356
 
package/dist/index.js CHANGED
@@ -94,7 +94,8 @@ var defaultTheme = {
94
94
  background: "#FFFFFF",
95
95
  text: "#18181B",
96
96
  placeholder: "#71717A",
97
- passwordToggle: "#71717A"
97
+ passwordToggle: "#71717A",
98
+ labelLine: "#FFFFFF"
98
99
  },
99
100
  fonts: {
100
101
  label: "Roboto, sans-serif",
@@ -135,6 +136,24 @@ var defaultTheme = {
135
136
  minWidth: "8rem",
136
137
  radius: "6px"
137
138
  }
139
+ },
140
+ modalBase: {
141
+ colors: {
142
+ modalTitleColor: "#000",
143
+ modalBgColor: "#fff",
144
+ modalCloseColor: "#bf1717",
145
+ modalBodyColor: "#000"
146
+ },
147
+ fonts: {
148
+ modalTitleFontFamily: '"Roboto", sans-serif',
149
+ modalTitleFontWeight: 600,
150
+ modalTitleFontSize: "13px",
151
+ modalBodyFontFamily: '"Roboto", sans-serif',
152
+ modalBodyFontSize: "1rem"
153
+ },
154
+ sizes: {
155
+ modalMaxWidth: "36rem"
156
+ }
138
157
  }
139
158
  }
140
159
  };
@@ -334,7 +353,7 @@ var InputBase = ({
334
353
  "--input-font-size": theme.components.input.fonts.inputSize,
335
354
  // Colors
336
355
  "--label-color": theme.components.input.colors.text,
337
- "--label-line": theme.colors.light,
356
+ "--label-line": theme.components.input.colors.labelLine,
338
357
  "--input-border": theme.components.input.colors.border,
339
358
  "--input-bg": theme.components.input.colors.background,
340
359
  "--autofill-box-shadow": theme.components.input.colors.background,
@@ -434,7 +453,7 @@ var TextAreaBase = ({
434
453
  "--input-font-size": theme.components.input.fonts.inputSize,
435
454
  // Colors
436
455
  "--label-color": theme.components.input.colors.text,
437
- "--label-line": theme.colors.light,
456
+ "--label-line": theme.components.input.colors.labelLine,
438
457
  "--input-border": theme.components.input.colors.border,
439
458
  "--input-bg": theme.components.input.colors.background,
440
459
  "--autofill-box-shadow": theme.components.input.colors.background,
@@ -521,7 +540,7 @@ var InputBase2 = ({
521
540
  "--label-color": theme.components.input.colors.text,
522
541
  "--input-border": theme.components.input.colors.border,
523
542
  "--input-bg": theme.components.input.colors.background,
524
- "--label-line": theme.colors.light,
543
+ "--label-line": theme.components.input.colors.labelLine,
525
544
  "--input-text-color": theme.colors.light,
526
545
  "--input-placeholder": theme.components.input.colors.placeholder,
527
546
  "--input-focus-border": theme.components.input.colors.focusBorder,
@@ -632,22 +651,20 @@ function ModalBase({
632
651
  btnCancel = "Cancel",
633
652
  btnSuccess = "Save",
634
653
  type = "button",
635
- disabledBtnSuccess,
636
- colors,
637
- fonts,
638
- modalMaxWidth
654
+ disabledBtnSuccess
639
655
  }) {
656
+ const theme = useLeafcodeTheme();
640
657
  const styleVars = {
641
- "--modal-title-font-weight": fonts?.modalTitleFontWeight,
642
- "--modal-title-font-size": fonts?.modalTitleFontSize,
643
- "--modal-title-font-family": fonts?.modalTitleFontFamily,
644
- "--modal-body-font-family": fonts?.modalBodyFontFamily,
645
- "--modal-body-font-size": fonts?.modalBodyFontSize,
646
- "--modal-bg-color": colors?.modalBgColor,
647
- "--modal-title-color": colors?.modalTitleColor,
648
- "--modal-body-color": colors?.modalBodyColor,
649
- "--modal-close-color": colors?.modalCloseColor,
650
- "--modal-max-width": modalMaxWidth?.modalMaxWidth
658
+ "--modal-title-font-weight": theme.components.modalBase.fonts?.modalTitleFontWeight,
659
+ "--modal-title-font-size": theme.components.modalBase.fonts?.modalTitleFontSize,
660
+ "--modal-title-font-family": theme.components.modalBase.fonts?.modalTitleFontFamily,
661
+ "--modal-body-font-family": theme.components.modalBase.fonts?.modalBodyFontFamily,
662
+ "--modal-body-font-size": theme.components.modalBase.fonts?.modalBodyFontSize,
663
+ "--modal-bg-color": theme.components.modalBase.colors?.modalBgColor,
664
+ "--modal-title-color": theme.components.modalBase.colors?.modalTitleColor,
665
+ "--modal-body-color": theme.components.modalBase.colors?.modalBodyColor,
666
+ "--modal-close-color": theme.components.modalBase.colors?.modalCloseColor,
667
+ "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
651
668
  };
652
669
  (0, import_react9.useEffect)(() => {
653
670
  const handleKeyDown = (event) => {
@@ -745,7 +762,7 @@ function AutoCompleteInner(props, ref) {
745
762
  } = props;
746
763
  const theme = useLeafcodeTheme();
747
764
  const styleVars = {
748
- "--label-line": theme.colors.light,
765
+ "--label-line": theme.components.input.colors.labelLine,
749
766
  "--label-font-family": theme.components.input.fonts.label,
750
767
  "--label-font-weight": theme.components.input.fonts.labelWeight,
751
768
  "--label-font-size": theme.components.input.fonts.labelSize,
package/dist/index.mjs CHANGED
@@ -30,7 +30,8 @@ var defaultTheme = {
30
30
  background: "#FFFFFF",
31
31
  text: "#18181B",
32
32
  placeholder: "#71717A",
33
- passwordToggle: "#71717A"
33
+ passwordToggle: "#71717A",
34
+ labelLine: "#FFFFFF"
34
35
  },
35
36
  fonts: {
36
37
  label: "Roboto, sans-serif",
@@ -71,6 +72,24 @@ var defaultTheme = {
71
72
  minWidth: "8rem",
72
73
  radius: "6px"
73
74
  }
75
+ },
76
+ modalBase: {
77
+ colors: {
78
+ modalTitleColor: "#000",
79
+ modalBgColor: "#fff",
80
+ modalCloseColor: "#bf1717",
81
+ modalBodyColor: "#000"
82
+ },
83
+ fonts: {
84
+ modalTitleFontFamily: '"Roboto", sans-serif',
85
+ modalTitleFontWeight: 600,
86
+ modalTitleFontSize: "13px",
87
+ modalBodyFontFamily: '"Roboto", sans-serif',
88
+ modalBodyFontSize: "1rem"
89
+ },
90
+ sizes: {
91
+ modalMaxWidth: "36rem"
92
+ }
74
93
  }
75
94
  }
76
95
  };
@@ -273,7 +292,7 @@ var InputBase = ({
273
292
  "--input-font-size": theme.components.input.fonts.inputSize,
274
293
  // Colors
275
294
  "--label-color": theme.components.input.colors.text,
276
- "--label-line": theme.colors.light,
295
+ "--label-line": theme.components.input.colors.labelLine,
277
296
  "--input-border": theme.components.input.colors.border,
278
297
  "--input-bg": theme.components.input.colors.background,
279
298
  "--autofill-box-shadow": theme.components.input.colors.background,
@@ -373,7 +392,7 @@ var TextAreaBase = ({
373
392
  "--input-font-size": theme.components.input.fonts.inputSize,
374
393
  // Colors
375
394
  "--label-color": theme.components.input.colors.text,
376
- "--label-line": theme.colors.light,
395
+ "--label-line": theme.components.input.colors.labelLine,
377
396
  "--input-border": theme.components.input.colors.border,
378
397
  "--input-bg": theme.components.input.colors.background,
379
398
  "--autofill-box-shadow": theme.components.input.colors.background,
@@ -464,7 +483,7 @@ var InputBase2 = ({
464
483
  "--label-color": theme.components.input.colors.text,
465
484
  "--input-border": theme.components.input.colors.border,
466
485
  "--input-bg": theme.components.input.colors.background,
467
- "--label-line": theme.colors.light,
486
+ "--label-line": theme.components.input.colors.labelLine,
468
487
  "--input-text-color": theme.colors.light,
469
488
  "--input-placeholder": theme.components.input.colors.placeholder,
470
489
  "--input-focus-border": theme.components.input.colors.focusBorder,
@@ -575,22 +594,20 @@ function ModalBase({
575
594
  btnCancel = "Cancel",
576
595
  btnSuccess = "Save",
577
596
  type = "button",
578
- disabledBtnSuccess,
579
- colors,
580
- fonts,
581
- modalMaxWidth
597
+ disabledBtnSuccess
582
598
  }) {
599
+ const theme = useLeafcodeTheme();
583
600
  const styleVars = {
584
- "--modal-title-font-weight": fonts?.modalTitleFontWeight,
585
- "--modal-title-font-size": fonts?.modalTitleFontSize,
586
- "--modal-title-font-family": fonts?.modalTitleFontFamily,
587
- "--modal-body-font-family": fonts?.modalBodyFontFamily,
588
- "--modal-body-font-size": fonts?.modalBodyFontSize,
589
- "--modal-bg-color": colors?.modalBgColor,
590
- "--modal-title-color": colors?.modalTitleColor,
591
- "--modal-body-color": colors?.modalBodyColor,
592
- "--modal-close-color": colors?.modalCloseColor,
593
- "--modal-max-width": modalMaxWidth?.modalMaxWidth
601
+ "--modal-title-font-weight": theme.components.modalBase.fonts?.modalTitleFontWeight,
602
+ "--modal-title-font-size": theme.components.modalBase.fonts?.modalTitleFontSize,
603
+ "--modal-title-font-family": theme.components.modalBase.fonts?.modalTitleFontFamily,
604
+ "--modal-body-font-family": theme.components.modalBase.fonts?.modalBodyFontFamily,
605
+ "--modal-body-font-size": theme.components.modalBase.fonts?.modalBodyFontSize,
606
+ "--modal-bg-color": theme.components.modalBase.colors?.modalBgColor,
607
+ "--modal-title-color": theme.components.modalBase.colors?.modalTitleColor,
608
+ "--modal-body-color": theme.components.modalBase.colors?.modalBodyColor,
609
+ "--modal-close-color": theme.components.modalBase.colors?.modalCloseColor,
610
+ "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
594
611
  };
595
612
  useEffect3(() => {
596
613
  const handleKeyDown = (event) => {
@@ -693,7 +710,7 @@ function AutoCompleteInner(props, ref) {
693
710
  } = props;
694
711
  const theme = useLeafcodeTheme();
695
712
  const styleVars = {
696
- "--label-line": theme.colors.light,
713
+ "--label-line": theme.components.input.colors.labelLine,
697
714
  "--label-font-family": theme.components.input.fonts.label,
698
715
  "--label-font-weight": theme.components.input.fonts.labelWeight,
699
716
  "--label-font-size": theme.components.input.fonts.labelSize,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charlesgomes/leafcode-shared-lib-react",
3
- "version": "1.0.87",
3
+ "version": "1.0.88",
4
4
  "description": "Lib de componentes react",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",