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

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 (7) hide show
  1. package/dist/index.d.mts +29 -18
  2. package/dist/index.d.ts +29 -18
  3. package/dist/index.js +96 -64
  4. package/dist/index.mjs +96 -64
  5. package/dist/styles/input.css +18 -1
  6. package/dist/styles/modalBase.css +1 -1
  7. 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[];
@@ -272,11 +256,16 @@ declare const isSpecialMatchMode: (matchMode?: string) => boolean;
272
256
  interface LeafcodeTheme {
273
257
  colors: {
274
258
  primary: string;
259
+ primaryHover: string;
260
+ secundary: string;
261
+ secundaryHover: string;
275
262
  danger: string;
276
- border: string;
263
+ dangerHover: string;
264
+ borderDisabledBg: string;
277
265
  text: string;
278
266
  light: string;
279
267
  background: string;
268
+ placeholder: string;
280
269
  };
281
270
 
282
271
  fonts: {
@@ -300,6 +289,7 @@ interface LeafcodeTheme {
300
289
  text: string;
301
290
  placeholder: string;
302
291
  passwordToggle: string;
292
+ labelLine: string;
303
293
  };
304
294
 
305
295
  fonts: {
@@ -345,6 +335,27 @@ interface LeafcodeTheme {
345
335
  radius: string;
346
336
  };
347
337
  };
338
+
339
+ modalBase: {
340
+ colors: {
341
+ modalTitleColor: string;
342
+ modalBgColor: string;
343
+ modalCloseColor: string;
344
+ modalBodyColor: string;
345
+ };
346
+
347
+ fonts: {
348
+ modalTitleFontFamily: string;
349
+ modalTitleFontWeight: number | string;
350
+ modalTitleFontSize: string | number;
351
+ modalBodyFontFamily: string | number;
352
+ modalBodyFontSize: string | number;
353
+ };
354
+
355
+ sizes: {
356
+ modalMaxWidth: string | number;
357
+ };
358
+ };
348
359
  };
349
360
  }
350
361
 
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[];
@@ -272,11 +256,16 @@ declare const isSpecialMatchMode: (matchMode?: string) => boolean;
272
256
  interface LeafcodeTheme {
273
257
  colors: {
274
258
  primary: string;
259
+ primaryHover: string;
260
+ secundary: string;
261
+ secundaryHover: string;
275
262
  danger: string;
276
- border: string;
263
+ dangerHover: string;
264
+ borderDisabledBg: string;
277
265
  text: string;
278
266
  light: string;
279
267
  background: string;
268
+ placeholder: string;
280
269
  };
281
270
 
282
271
  fonts: {
@@ -300,6 +289,7 @@ interface LeafcodeTheme {
300
289
  text: string;
301
290
  placeholder: string;
302
291
  passwordToggle: string;
292
+ labelLine: string;
303
293
  };
304
294
 
305
295
  fonts: {
@@ -345,6 +335,27 @@ interface LeafcodeTheme {
345
335
  radius: string;
346
336
  };
347
337
  };
338
+
339
+ modalBase: {
340
+ colors: {
341
+ modalTitleColor: string;
342
+ modalBgColor: string;
343
+ modalCloseColor: string;
344
+ modalBodyColor: string;
345
+ };
346
+
347
+ fonts: {
348
+ modalTitleFontFamily: string;
349
+ modalTitleFontWeight: number | string;
350
+ modalTitleFontSize: string | number;
351
+ modalBodyFontFamily: string | number;
352
+ modalBodyFontSize: string | number;
353
+ };
354
+
355
+ sizes: {
356
+ modalMaxWidth: string | number;
357
+ };
358
+ };
348
359
  };
349
360
  }
350
361
 
package/dist/index.js CHANGED
@@ -69,12 +69,17 @@ var import_react = require("react");
69
69
  // src/provider/defaultTheme.ts
70
70
  var defaultTheme = {
71
71
  colors: {
72
- primary: "#00875F",
72
+ primary: "#6366f1",
73
+ primaryHover: "#4f46e5",
74
+ secundary: "",
75
+ secundaryHover: "",
73
76
  danger: "#ED202E",
74
- border: "#D4D4D8",
77
+ dangerHover: "#f35353",
78
+ borderDisabledBg: "#D4D4D8",
75
79
  text: "#18181B",
76
80
  light: "#FFFFFF",
77
- background: "#FFFFFF"
81
+ background: "#FFFFFF",
82
+ placeholder: "#71717A"
78
83
  },
79
84
  fonts: {
80
85
  body: "Roboto, sans-serif",
@@ -94,7 +99,8 @@ var defaultTheme = {
94
99
  background: "#FFFFFF",
95
100
  text: "#18181B",
96
101
  placeholder: "#71717A",
97
- passwordToggle: "#71717A"
102
+ passwordToggle: "#71717A",
103
+ labelLine: "#FFFFFF"
98
104
  },
99
105
  fonts: {
100
106
  label: "Roboto, sans-serif",
@@ -135,6 +141,24 @@ var defaultTheme = {
135
141
  minWidth: "8rem",
136
142
  radius: "6px"
137
143
  }
144
+ },
145
+ modalBase: {
146
+ colors: {
147
+ modalTitleColor: "#000",
148
+ modalBgColor: "#fff",
149
+ modalCloseColor: "#bf1717",
150
+ modalBodyColor: "#000"
151
+ },
152
+ fonts: {
153
+ modalTitleFontFamily: '"Roboto", sans-serif',
154
+ modalTitleFontWeight: 600,
155
+ modalTitleFontSize: "13px",
156
+ modalBodyFontFamily: '"Roboto", sans-serif',
157
+ modalBodyFontSize: "1rem"
158
+ },
159
+ sizes: {
160
+ modalMaxWidth: "36rem"
161
+ }
138
162
  }
139
163
  }
140
164
  };
@@ -167,13 +191,13 @@ function Button({
167
191
  "--button-font-family": theme.components.button.fonts.family,
168
192
  "--button-font-weight": theme.components.button.fonts.weight,
169
193
  "--button-font-size": theme.components.button.fonts.size,
170
- "--button-text-color": theme.components.button.colors.text,
171
- "--button-primary-bg": theme.components.button.colors.primaryBg,
172
- "--button-primary-hover-bg": theme.components.button.colors.primaryHoverBg,
173
- "--button-secondary-bg": theme.components.button.colors.secondaryBg,
174
- "--button-secondary-hover-bg": theme.components.button.colors.secondaryHoverBg,
175
- "--button-disabled-bg-color": theme.components.button.colors.disabledBg,
176
- "--button-disabled-border-color": theme.components.button.colors.disabledBorder,
194
+ "--button-text-color": theme.colors.light,
195
+ "--button-primary-bg": theme.colors.primary,
196
+ "--button-primary-hover-bg": theme.colors.primaryHover,
197
+ "--button-secondary-bg": theme.colors.secundary,
198
+ "--button-secondary-hover-bg": theme.colors.secundaryHover,
199
+ "--button-disabled-bg-color": theme.colors.borderDisabledBg,
200
+ "--button-disabled-border-color": theme.colors.borderDisabledBg,
177
201
  "--button-height": theme.components.button.sizes.height,
178
202
  "--button-min-width": theme.components.button.sizes.minWidth,
179
203
  "--button-border-radius": theme.components.button.sizes.radius
@@ -237,12 +261,14 @@ function TooltipErrorInput({
237
261
  }) {
238
262
  const theme = useLeafcodeTheme();
239
263
  const styleVars = {
264
+ // Fonts
240
265
  "--input-font-family": theme.components.input.fonts.input,
241
266
  "--input-font-weight": theme.components.input.fonts.inputWeight,
242
267
  "--input-font-size": theme.components.input.fonts.inputSize,
243
- "--input-text-color": theme.components.input.colors.text,
268
+ // Colors
269
+ "--input-text-color": theme.colors.light,
244
270
  "--input-text-color-hover": theme.colors.light,
245
- "--input-error-border": theme.components.input.colors.errorBorder,
271
+ "--input-error-border": theme.colors.danger,
246
272
  "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
247
273
  };
248
274
  const [isTooltipOpen, setIsTooltipOpen] = (0, import_react3.useState)(true);
@@ -333,18 +359,18 @@ var InputBase = ({
333
359
  "--input-font-weight": theme.components.input.fonts.inputWeight,
334
360
  "--input-font-size": theme.components.input.fonts.inputSize,
335
361
  // Colors
336
- "--label-color": theme.components.input.colors.text,
362
+ "--label-color": theme.colors.text,
337
363
  "--label-line": theme.colors.light,
338
- "--input-border": theme.components.input.colors.border,
339
- "--input-bg": theme.components.input.colors.background,
340
- "--autofill-box-shadow": theme.components.input.colors.background,
341
- "--autofill-text-color": theme.components.input.colors.text,
342
- "--autofill-border": theme.components.input.colors.focusBorder,
343
- "--input-text-color": theme.components.input.colors.text,
344
- "--input-placeholder": theme.components.input.colors.placeholder,
345
- "--input-focus-border": theme.components.input.colors.focusBorder,
346
- "--input-error-border": theme.components.input.colors.errorBorder,
347
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
364
+ "--input-border": theme.colors.borderDisabledBg,
365
+ "--input-bg": theme.colors.background,
366
+ "--autofill-box-shadow": theme.colors.background,
367
+ "--autofill-text-color": theme.colors.text,
368
+ "--autofill-border": theme.colors.primary,
369
+ "--input-text-color": theme.colors.text,
370
+ "--input-placeholder": theme.colors.placeholder,
371
+ "--input-focus-border": theme.colors.primary,
372
+ "--input-error-border": theme.colors.danger,
373
+ "--color-password-toggle": theme.colors.placeholder,
348
374
  // Sizes
349
375
  "--input-height": theme.components.input.sizes.height,
350
376
  "--input-border-radius": theme.components.input.sizes.radius
@@ -433,17 +459,17 @@ var TextAreaBase = ({
433
459
  "--input-font-weight": theme.components.input.fonts.inputWeight,
434
460
  "--input-font-size": theme.components.input.fonts.inputSize,
435
461
  // Colors
436
- "--label-color": theme.components.input.colors.text,
462
+ "--label-color": theme.colors.text,
437
463
  "--label-line": theme.colors.light,
438
- "--input-border": theme.components.input.colors.border,
439
- "--input-bg": theme.components.input.colors.background,
440
- "--autofill-box-shadow": theme.components.input.colors.background,
441
- "--autofill-text-color": theme.components.input.colors.text,
442
- "--input-text-color": theme.components.input.colors.text,
443
- "--input-placeholder": theme.components.input.colors.placeholder,
444
- "--input-focus-border": theme.components.input.colors.focusBorder,
445
- "--input-error-border": theme.components.input.colors.errorBorder,
446
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
464
+ "--input-border": theme.colors.borderDisabledBg,
465
+ "--input-bg": theme.colors.background,
466
+ "--autofill-box-shadow": theme.colors.background,
467
+ "--autofill-text-color": theme.colors.text,
468
+ "--input-text-color": theme.colors.text,
469
+ "--input-placeholder": theme.colors.placeholder,
470
+ "--input-focus-border": theme.colors.primary,
471
+ "--input-error-border": theme.colors.danger,
472
+ "--color-password-toggle": theme.colors.placeholder,
447
473
  // Sizes
448
474
  "--input-height-text-area": theme.components.input.sizes.heightTextArea,
449
475
  "--input-border-radius": theme.components.input.sizes.radius
@@ -518,15 +544,17 @@ var InputBase2 = ({
518
544
  "--input-font-weight": theme.components.input.fonts.inputWeight,
519
545
  "--input-font-size": theme.components.input.fonts.inputSize,
520
546
  // Colors
521
- "--label-color": theme.components.input.colors.text,
522
- "--input-border": theme.components.input.colors.border,
523
- "--input-bg": theme.components.input.colors.background,
547
+ "--label-color": theme.colors.text,
524
548
  "--label-line": theme.colors.light,
549
+ "--input-border": theme.colors.borderDisabledBg,
550
+ "--input-bg": theme.colors.background,
525
551
  "--input-text-color": theme.colors.light,
526
- "--input-placeholder": theme.components.input.colors.placeholder,
527
- "--input-focus-border": theme.components.input.colors.focusBorder,
528
- "--input-error-border": theme.components.input.colors.errorBorder,
529
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
552
+ "--input-text-single-color": theme.colors.text,
553
+ "--input-placeholder": theme.colors.placeholder,
554
+ "--input-focus-border": theme.colors.primary,
555
+ "--input-error-border": theme.colors.danger,
556
+ "--color-password-toggle": theme.colors.placeholder,
557
+ "--dropdown-item-hover-bg-color": theme.colors.primaryHover,
530
558
  // Sizes
531
559
  "--input-height": theme.components.input.sizes.height,
532
560
  "--input-border-radius": theme.components.input.sizes.radius
@@ -632,22 +660,23 @@ function ModalBase({
632
660
  btnCancel = "Cancel",
633
661
  btnSuccess = "Save",
634
662
  type = "button",
635
- disabledBtnSuccess,
636
- colors,
637
- fonts,
638
- modalMaxWidth
663
+ disabledBtnSuccess
639
664
  }) {
665
+ const theme = useLeafcodeTheme();
640
666
  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
667
+ // Fonts
668
+ "--modal-title-font-weight": theme.components.modalBase.fonts?.modalTitleFontWeight,
669
+ "--modal-title-font-size": theme.components.modalBase.fonts?.modalTitleFontSize,
670
+ "--modal-title-font-family": theme.components.modalBase.fonts?.modalTitleFontFamily,
671
+ "--modal-body-font-family": theme.components.modalBase.fonts?.modalBodyFontFamily,
672
+ "--modal-body-font-size": theme.components.modalBase.fonts?.modalBodyFontSize,
673
+ // Colors
674
+ "--modal-bg-color": theme.colors.background,
675
+ "--modal-title-color": theme.colors.text,
676
+ "--modal-body-color": theme.colors.background,
677
+ "--modal-close-color": theme.colors.danger,
678
+ // Sizes
679
+ "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
651
680
  };
652
681
  (0, import_react9.useEffect)(() => {
653
682
  const handleKeyDown = (event) => {
@@ -710,8 +739,8 @@ var LoadingSpinner = (0, import_react10.memo)(({ size = 20 }) => {
710
739
  style: {
711
740
  width: size,
712
741
  height: size,
713
- border: `3px solid ${theme.components.input.colors.focusBorder}33`,
714
- borderTopColor: theme.components.input.colors.focusBorder,
742
+ border: `3px solid ${theme.colors.primary}33`,
743
+ borderTopColor: theme.colors.primary,
715
744
  borderRadius: "50%",
716
745
  display: "inline-block",
717
746
  animation: "leafcode-spin 0.8s linear infinite"
@@ -745,18 +774,21 @@ function AutoCompleteInner(props, ref) {
745
774
  } = props;
746
775
  const theme = useLeafcodeTheme();
747
776
  const styleVars = {
748
- "--label-line": theme.colors.light,
777
+ // Fonts
749
778
  "--label-font-family": theme.components.input.fonts.label,
750
779
  "--label-font-weight": theme.components.input.fonts.labelWeight,
751
780
  "--label-font-size": theme.components.input.fonts.labelSize,
752
- "--dropdown-empty-color": theme.components.input.colors.text,
781
+ // Colors
782
+ "--label-color": theme.colors.text,
783
+ "--label-line": theme.colors.light,
784
+ "--input-border": theme.colors.borderDisabledBg,
785
+ "--input-bg": theme.colors.background,
786
+ "--input-text-color": theme.colors.text,
787
+ "--dropdown-empty-color": theme.colors.text,
753
788
  "--dropdown-item-hover-bg-color": theme.colors.primary,
754
- "--label-color": theme.components.input.colors.text,
755
- "--input-border": theme.components.input.colors.border,
756
- "--input-bg": theme.components.input.colors.background,
757
- "--input-text-color": theme.components.input.colors.text,
758
- "--input-focus-border": theme.components.input.colors.focusBorder,
789
+ "--input-focus-border": theme.colors.primary,
759
790
  "--dropdown-item-hover-color": theme.colors.light,
791
+ // Sizes
760
792
  "--input-height": theme.components.input.sizes.height,
761
793
  "--input-border-radius": theme.components.input.sizes.radius
762
794
  };
package/dist/index.mjs CHANGED
@@ -5,12 +5,17 @@ import { createContext, useContext } from "react";
5
5
  // src/provider/defaultTheme.ts
6
6
  var defaultTheme = {
7
7
  colors: {
8
- primary: "#00875F",
8
+ primary: "#6366f1",
9
+ primaryHover: "#4f46e5",
10
+ secundary: "",
11
+ secundaryHover: "",
9
12
  danger: "#ED202E",
10
- border: "#D4D4D8",
13
+ dangerHover: "#f35353",
14
+ borderDisabledBg: "#D4D4D8",
11
15
  text: "#18181B",
12
16
  light: "#FFFFFF",
13
- background: "#FFFFFF"
17
+ background: "#FFFFFF",
18
+ placeholder: "#71717A"
14
19
  },
15
20
  fonts: {
16
21
  body: "Roboto, sans-serif",
@@ -30,7 +35,8 @@ var defaultTheme = {
30
35
  background: "#FFFFFF",
31
36
  text: "#18181B",
32
37
  placeholder: "#71717A",
33
- passwordToggle: "#71717A"
38
+ passwordToggle: "#71717A",
39
+ labelLine: "#FFFFFF"
34
40
  },
35
41
  fonts: {
36
42
  label: "Roboto, sans-serif",
@@ -71,6 +77,24 @@ var defaultTheme = {
71
77
  minWidth: "8rem",
72
78
  radius: "6px"
73
79
  }
80
+ },
81
+ modalBase: {
82
+ colors: {
83
+ modalTitleColor: "#000",
84
+ modalBgColor: "#fff",
85
+ modalCloseColor: "#bf1717",
86
+ modalBodyColor: "#000"
87
+ },
88
+ fonts: {
89
+ modalTitleFontFamily: '"Roboto", sans-serif',
90
+ modalTitleFontWeight: 600,
91
+ modalTitleFontSize: "13px",
92
+ modalBodyFontFamily: '"Roboto", sans-serif',
93
+ modalBodyFontSize: "1rem"
94
+ },
95
+ sizes: {
96
+ modalMaxWidth: "36rem"
97
+ }
74
98
  }
75
99
  }
76
100
  };
@@ -103,13 +127,13 @@ function Button({
103
127
  "--button-font-family": theme.components.button.fonts.family,
104
128
  "--button-font-weight": theme.components.button.fonts.weight,
105
129
  "--button-font-size": theme.components.button.fonts.size,
106
- "--button-text-color": theme.components.button.colors.text,
107
- "--button-primary-bg": theme.components.button.colors.primaryBg,
108
- "--button-primary-hover-bg": theme.components.button.colors.primaryHoverBg,
109
- "--button-secondary-bg": theme.components.button.colors.secondaryBg,
110
- "--button-secondary-hover-bg": theme.components.button.colors.secondaryHoverBg,
111
- "--button-disabled-bg-color": theme.components.button.colors.disabledBg,
112
- "--button-disabled-border-color": theme.components.button.colors.disabledBorder,
130
+ "--button-text-color": theme.colors.light,
131
+ "--button-primary-bg": theme.colors.primary,
132
+ "--button-primary-hover-bg": theme.colors.primaryHover,
133
+ "--button-secondary-bg": theme.colors.secundary,
134
+ "--button-secondary-hover-bg": theme.colors.secundaryHover,
135
+ "--button-disabled-bg-color": theme.colors.borderDisabledBg,
136
+ "--button-disabled-border-color": theme.colors.borderDisabledBg,
113
137
  "--button-height": theme.components.button.sizes.height,
114
138
  "--button-min-width": theme.components.button.sizes.minWidth,
115
139
  "--button-border-radius": theme.components.button.sizes.radius
@@ -176,12 +200,14 @@ function TooltipErrorInput({
176
200
  }) {
177
201
  const theme = useLeafcodeTheme();
178
202
  const styleVars = {
203
+ // Fonts
179
204
  "--input-font-family": theme.components.input.fonts.input,
180
205
  "--input-font-weight": theme.components.input.fonts.inputWeight,
181
206
  "--input-font-size": theme.components.input.fonts.inputSize,
182
- "--input-text-color": theme.components.input.colors.text,
207
+ // Colors
208
+ "--input-text-color": theme.colors.light,
183
209
  "--input-text-color-hover": theme.colors.light,
184
- "--input-error-border": theme.components.input.colors.errorBorder,
210
+ "--input-error-border": theme.colors.danger,
185
211
  "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
186
212
  };
187
213
  const [isTooltipOpen, setIsTooltipOpen] = useState(true);
@@ -272,18 +298,18 @@ var InputBase = ({
272
298
  "--input-font-weight": theme.components.input.fonts.inputWeight,
273
299
  "--input-font-size": theme.components.input.fonts.inputSize,
274
300
  // Colors
275
- "--label-color": theme.components.input.colors.text,
301
+ "--label-color": theme.colors.text,
276
302
  "--label-line": theme.colors.light,
277
- "--input-border": theme.components.input.colors.border,
278
- "--input-bg": theme.components.input.colors.background,
279
- "--autofill-box-shadow": theme.components.input.colors.background,
280
- "--autofill-text-color": theme.components.input.colors.text,
281
- "--autofill-border": theme.components.input.colors.focusBorder,
282
- "--input-text-color": theme.components.input.colors.text,
283
- "--input-placeholder": theme.components.input.colors.placeholder,
284
- "--input-focus-border": theme.components.input.colors.focusBorder,
285
- "--input-error-border": theme.components.input.colors.errorBorder,
286
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
303
+ "--input-border": theme.colors.borderDisabledBg,
304
+ "--input-bg": theme.colors.background,
305
+ "--autofill-box-shadow": theme.colors.background,
306
+ "--autofill-text-color": theme.colors.text,
307
+ "--autofill-border": theme.colors.primary,
308
+ "--input-text-color": theme.colors.text,
309
+ "--input-placeholder": theme.colors.placeholder,
310
+ "--input-focus-border": theme.colors.primary,
311
+ "--input-error-border": theme.colors.danger,
312
+ "--color-password-toggle": theme.colors.placeholder,
287
313
  // Sizes
288
314
  "--input-height": theme.components.input.sizes.height,
289
315
  "--input-border-radius": theme.components.input.sizes.radius
@@ -372,17 +398,17 @@ var TextAreaBase = ({
372
398
  "--input-font-weight": theme.components.input.fonts.inputWeight,
373
399
  "--input-font-size": theme.components.input.fonts.inputSize,
374
400
  // Colors
375
- "--label-color": theme.components.input.colors.text,
401
+ "--label-color": theme.colors.text,
376
402
  "--label-line": theme.colors.light,
377
- "--input-border": theme.components.input.colors.border,
378
- "--input-bg": theme.components.input.colors.background,
379
- "--autofill-box-shadow": theme.components.input.colors.background,
380
- "--autofill-text-color": theme.components.input.colors.text,
381
- "--input-text-color": theme.components.input.colors.text,
382
- "--input-placeholder": theme.components.input.colors.placeholder,
383
- "--input-focus-border": theme.components.input.colors.focusBorder,
384
- "--input-error-border": theme.components.input.colors.errorBorder,
385
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
403
+ "--input-border": theme.colors.borderDisabledBg,
404
+ "--input-bg": theme.colors.background,
405
+ "--autofill-box-shadow": theme.colors.background,
406
+ "--autofill-text-color": theme.colors.text,
407
+ "--input-text-color": theme.colors.text,
408
+ "--input-placeholder": theme.colors.placeholder,
409
+ "--input-focus-border": theme.colors.primary,
410
+ "--input-error-border": theme.colors.danger,
411
+ "--color-password-toggle": theme.colors.placeholder,
386
412
  // Sizes
387
413
  "--input-height-text-area": theme.components.input.sizes.heightTextArea,
388
414
  "--input-border-radius": theme.components.input.sizes.radius
@@ -461,15 +487,17 @@ var InputBase2 = ({
461
487
  "--input-font-weight": theme.components.input.fonts.inputWeight,
462
488
  "--input-font-size": theme.components.input.fonts.inputSize,
463
489
  // Colors
464
- "--label-color": theme.components.input.colors.text,
465
- "--input-border": theme.components.input.colors.border,
466
- "--input-bg": theme.components.input.colors.background,
490
+ "--label-color": theme.colors.text,
467
491
  "--label-line": theme.colors.light,
492
+ "--input-border": theme.colors.borderDisabledBg,
493
+ "--input-bg": theme.colors.background,
468
494
  "--input-text-color": theme.colors.light,
469
- "--input-placeholder": theme.components.input.colors.placeholder,
470
- "--input-focus-border": theme.components.input.colors.focusBorder,
471
- "--input-error-border": theme.components.input.colors.errorBorder,
472
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
495
+ "--input-text-single-color": theme.colors.text,
496
+ "--input-placeholder": theme.colors.placeholder,
497
+ "--input-focus-border": theme.colors.primary,
498
+ "--input-error-border": theme.colors.danger,
499
+ "--color-password-toggle": theme.colors.placeholder,
500
+ "--dropdown-item-hover-bg-color": theme.colors.primaryHover,
473
501
  // Sizes
474
502
  "--input-height": theme.components.input.sizes.height,
475
503
  "--input-border-radius": theme.components.input.sizes.radius
@@ -575,22 +603,23 @@ function ModalBase({
575
603
  btnCancel = "Cancel",
576
604
  btnSuccess = "Save",
577
605
  type = "button",
578
- disabledBtnSuccess,
579
- colors,
580
- fonts,
581
- modalMaxWidth
606
+ disabledBtnSuccess
582
607
  }) {
608
+ const theme = useLeafcodeTheme();
583
609
  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
610
+ // Fonts
611
+ "--modal-title-font-weight": theme.components.modalBase.fonts?.modalTitleFontWeight,
612
+ "--modal-title-font-size": theme.components.modalBase.fonts?.modalTitleFontSize,
613
+ "--modal-title-font-family": theme.components.modalBase.fonts?.modalTitleFontFamily,
614
+ "--modal-body-font-family": theme.components.modalBase.fonts?.modalBodyFontFamily,
615
+ "--modal-body-font-size": theme.components.modalBase.fonts?.modalBodyFontSize,
616
+ // Colors
617
+ "--modal-bg-color": theme.colors.background,
618
+ "--modal-title-color": theme.colors.text,
619
+ "--modal-body-color": theme.colors.background,
620
+ "--modal-close-color": theme.colors.danger,
621
+ // Sizes
622
+ "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
594
623
  };
595
624
  useEffect3(() => {
596
625
  const handleKeyDown = (event) => {
@@ -658,8 +687,8 @@ var LoadingSpinner = memo(({ size = 20 }) => {
658
687
  style: {
659
688
  width: size,
660
689
  height: size,
661
- border: `3px solid ${theme.components.input.colors.focusBorder}33`,
662
- borderTopColor: theme.components.input.colors.focusBorder,
690
+ border: `3px solid ${theme.colors.primary}33`,
691
+ borderTopColor: theme.colors.primary,
663
692
  borderRadius: "50%",
664
693
  display: "inline-block",
665
694
  animation: "leafcode-spin 0.8s linear infinite"
@@ -693,18 +722,21 @@ function AutoCompleteInner(props, ref) {
693
722
  } = props;
694
723
  const theme = useLeafcodeTheme();
695
724
  const styleVars = {
696
- "--label-line": theme.colors.light,
725
+ // Fonts
697
726
  "--label-font-family": theme.components.input.fonts.label,
698
727
  "--label-font-weight": theme.components.input.fonts.labelWeight,
699
728
  "--label-font-size": theme.components.input.fonts.labelSize,
700
- "--dropdown-empty-color": theme.components.input.colors.text,
729
+ // Colors
730
+ "--label-color": theme.colors.text,
731
+ "--label-line": theme.colors.light,
732
+ "--input-border": theme.colors.borderDisabledBg,
733
+ "--input-bg": theme.colors.background,
734
+ "--input-text-color": theme.colors.text,
735
+ "--dropdown-empty-color": theme.colors.text,
701
736
  "--dropdown-item-hover-bg-color": theme.colors.primary,
702
- "--label-color": theme.components.input.colors.text,
703
- "--input-border": theme.components.input.colors.border,
704
- "--input-bg": theme.components.input.colors.background,
705
- "--input-text-color": theme.components.input.colors.text,
706
- "--input-focus-border": theme.components.input.colors.focusBorder,
737
+ "--input-focus-border": theme.colors.primary,
707
738
  "--dropdown-item-hover-color": theme.colors.light,
739
+ // Sizes
708
740
  "--input-height": theme.components.input.sizes.height,
709
741
  "--input-border-radius": theme.components.input.sizes.radius
710
742
  };
package/dist/styles/input.css CHANGED
@@ -250,7 +250,7 @@ input:-webkit-autofill:focus {
250
250
  .dropdown-clear {
251
251
  position: absolute;
252
252
  right: 0.75rem;
253
- top: 0.75rem;
253
+ top: 0.8rem;
254
254
  background: none;
255
255
  border: none;
256
256
  padding: 0;
@@ -260,3 +260,20 @@ input:-webkit-autofill:focus {
260
260
  .icone-clear {
261
261
  color: var(--input-error-border, #f87171);
262
262
  }
263
+
264
+ /* O container da lista (Menu) */
265
+ .react-select__menu {
266
+ background-color: var(--input-bg, #ffffff) !important;
267
+ border: 1px solid var(--input-bg, #ffffff);
268
+ }
269
+
270
+ /* Quando você passa o mouse por cima (Hover/Focus) */
271
+ .react-select__option--is-focused {
272
+ background-color: var(--dropdown-item-hover-bg-color, #333333) !important;
273
+ color: var(--input-text-color, #ffffff) !important;
274
+ }
275
+
276
+ /* O texto dentro da caixa principal */
277
+ .react-select__single-value {
278
+ color: var(--input-text-single-color, #070707) !important;
279
+ }
package/dist/styles/modalBase.css CHANGED
@@ -69,7 +69,7 @@
69
69
  padding: 1.5rem;
70
70
  font-family: var(--modal-body-font-family, "roboto", sans-serif);
71
71
  font-size: var(--modal-body-font-size, 1rem);
72
- color: var(--modal-body-color, #000);
72
+ color: #000;
73
73
  }
74
74
 
75
75
  .modal-backdrop {
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.89",
4
4
  "description": "Lib de componentes react",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",