@charlesgomes/leafcode-shared-lib-react 1.0.88 → 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 +6 -1
  2. package/dist/index.d.ts +6 -1
  3. package/dist/index.js +71 -56
  4. package/dist/index.mjs +71 -56
  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
@@ -256,11 +256,16 @@ declare const isSpecialMatchMode: (matchMode?: string) => boolean;
256
256
  interface LeafcodeTheme {
257
257
  colors: {
258
258
  primary: string;
259
+ primaryHover: string;
260
+ secundary: string;
261
+ secundaryHover: string;
259
262
  danger: string;
260
- border: string;
263
+ dangerHover: string;
264
+ borderDisabledBg: string;
261
265
  text: string;
262
266
  light: string;
263
267
  background: string;
268
+ placeholder: string;
264
269
  };
265
270
 
266
271
  fonts: {
package/dist/index.d.ts CHANGED
@@ -256,11 +256,16 @@ declare const isSpecialMatchMode: (matchMode?: string) => boolean;
256
256
  interface LeafcodeTheme {
257
257
  colors: {
258
258
  primary: string;
259
+ primaryHover: string;
260
+ secundary: string;
261
+ secundaryHover: string;
259
262
  danger: string;
260
- border: string;
263
+ dangerHover: string;
264
+ borderDisabledBg: string;
261
265
  text: string;
262
266
  light: string;
263
267
  background: string;
268
+ placeholder: string;
264
269
  };
265
270
 
266
271
  fonts: {
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",
@@ -186,13 +191,13 @@ function Button({
186
191
  "--button-font-family": theme.components.button.fonts.family,
187
192
  "--button-font-weight": theme.components.button.fonts.weight,
188
193
  "--button-font-size": theme.components.button.fonts.size,
189
- "--button-text-color": theme.components.button.colors.text,
190
- "--button-primary-bg": theme.components.button.colors.primaryBg,
191
- "--button-primary-hover-bg": theme.components.button.colors.primaryHoverBg,
192
- "--button-secondary-bg": theme.components.button.colors.secondaryBg,
193
- "--button-secondary-hover-bg": theme.components.button.colors.secondaryHoverBg,
194
- "--button-disabled-bg-color": theme.components.button.colors.disabledBg,
195
- "--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,
196
201
  "--button-height": theme.components.button.sizes.height,
197
202
  "--button-min-width": theme.components.button.sizes.minWidth,
198
203
  "--button-border-radius": theme.components.button.sizes.radius
@@ -256,12 +261,14 @@ function TooltipErrorInput({
256
261
  }) {
257
262
  const theme = useLeafcodeTheme();
258
263
  const styleVars = {
264
+ // Fonts
259
265
  "--input-font-family": theme.components.input.fonts.input,
260
266
  "--input-font-weight": theme.components.input.fonts.inputWeight,
261
267
  "--input-font-size": theme.components.input.fonts.inputSize,
262
- "--input-text-color": theme.components.input.colors.text,
268
+ // Colors
269
+ "--input-text-color": theme.colors.light,
263
270
  "--input-text-color-hover": theme.colors.light,
264
- "--input-error-border": theme.components.input.colors.errorBorder,
271
+ "--input-error-border": theme.colors.danger,
265
272
  "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
266
273
  };
267
274
  const [isTooltipOpen, setIsTooltipOpen] = (0, import_react3.useState)(true);
@@ -352,18 +359,18 @@ var InputBase = ({
352
359
  "--input-font-weight": theme.components.input.fonts.inputWeight,
353
360
  "--input-font-size": theme.components.input.fonts.inputSize,
354
361
  // Colors
355
- "--label-color": theme.components.input.colors.text,
356
- "--label-line": theme.components.input.colors.labelLine,
357
- "--input-border": theme.components.input.colors.border,
358
- "--input-bg": theme.components.input.colors.background,
359
- "--autofill-box-shadow": theme.components.input.colors.background,
360
- "--autofill-text-color": theme.components.input.colors.text,
361
- "--autofill-border": theme.components.input.colors.focusBorder,
362
- "--input-text-color": theme.components.input.colors.text,
363
- "--input-placeholder": theme.components.input.colors.placeholder,
364
- "--input-focus-border": theme.components.input.colors.focusBorder,
365
- "--input-error-border": theme.components.input.colors.errorBorder,
366
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
362
+ "--label-color": theme.colors.text,
363
+ "--label-line": theme.colors.light,
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,
367
374
  // Sizes
368
375
  "--input-height": theme.components.input.sizes.height,
369
376
  "--input-border-radius": theme.components.input.sizes.radius
@@ -452,17 +459,17 @@ var TextAreaBase = ({
452
459
  "--input-font-weight": theme.components.input.fonts.inputWeight,
453
460
  "--input-font-size": theme.components.input.fonts.inputSize,
454
461
  // Colors
455
- "--label-color": theme.components.input.colors.text,
456
- "--label-line": theme.components.input.colors.labelLine,
457
- "--input-border": theme.components.input.colors.border,
458
- "--input-bg": theme.components.input.colors.background,
459
- "--autofill-box-shadow": theme.components.input.colors.background,
460
- "--autofill-text-color": theme.components.input.colors.text,
461
- "--input-text-color": theme.components.input.colors.text,
462
- "--input-placeholder": theme.components.input.colors.placeholder,
463
- "--input-focus-border": theme.components.input.colors.focusBorder,
464
- "--input-error-border": theme.components.input.colors.errorBorder,
465
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
462
+ "--label-color": theme.colors.text,
463
+ "--label-line": theme.colors.light,
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,
466
473
  // Sizes
467
474
  "--input-height-text-area": theme.components.input.sizes.heightTextArea,
468
475
  "--input-border-radius": theme.components.input.sizes.radius
@@ -537,15 +544,17 @@ var InputBase2 = ({
537
544
  "--input-font-weight": theme.components.input.fonts.inputWeight,
538
545
  "--input-font-size": theme.components.input.fonts.inputSize,
539
546
  // Colors
540
- "--label-color": theme.components.input.colors.text,
541
- "--input-border": theme.components.input.colors.border,
542
- "--input-bg": theme.components.input.colors.background,
543
- "--label-line": theme.components.input.colors.labelLine,
547
+ "--label-color": theme.colors.text,
548
+ "--label-line": theme.colors.light,
549
+ "--input-border": theme.colors.borderDisabledBg,
550
+ "--input-bg": theme.colors.background,
544
551
  "--input-text-color": theme.colors.light,
545
- "--input-placeholder": theme.components.input.colors.placeholder,
546
- "--input-focus-border": theme.components.input.colors.focusBorder,
547
- "--input-error-border": theme.components.input.colors.errorBorder,
548
- "--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,
549
558
  // Sizes
550
559
  "--input-height": theme.components.input.sizes.height,
551
560
  "--input-border-radius": theme.components.input.sizes.radius
@@ -655,15 +664,18 @@ function ModalBase({
655
664
  }) {
656
665
  const theme = useLeafcodeTheme();
657
666
  const styleVars = {
667
+ // Fonts
658
668
  "--modal-title-font-weight": theme.components.modalBase.fonts?.modalTitleFontWeight,
659
669
  "--modal-title-font-size": theme.components.modalBase.fonts?.modalTitleFontSize,
660
670
  "--modal-title-font-family": theme.components.modalBase.fonts?.modalTitleFontFamily,
661
671
  "--modal-body-font-family": theme.components.modalBase.fonts?.modalBodyFontFamily,
662
672
  "--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,
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
667
679
  "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
668
680
  };
669
681
  (0, import_react9.useEffect)(() => {
@@ -727,8 +739,8 @@ var LoadingSpinner = (0, import_react10.memo)(({ size = 20 }) => {
727
739
  style: {
728
740
  width: size,
729
741
  height: size,
730
- border: `3px solid ${theme.components.input.colors.focusBorder}33`,
731
- borderTopColor: theme.components.input.colors.focusBorder,
742
+ border: `3px solid ${theme.colors.primary}33`,
743
+ borderTopColor: theme.colors.primary,
732
744
  borderRadius: "50%",
733
745
  display: "inline-block",
734
746
  animation: "leafcode-spin 0.8s linear infinite"
@@ -762,18 +774,21 @@ function AutoCompleteInner(props, ref) {
762
774
  } = props;
763
775
  const theme = useLeafcodeTheme();
764
776
  const styleVars = {
765
- "--label-line": theme.components.input.colors.labelLine,
777
+ // Fonts
766
778
  "--label-font-family": theme.components.input.fonts.label,
767
779
  "--label-font-weight": theme.components.input.fonts.labelWeight,
768
780
  "--label-font-size": theme.components.input.fonts.labelSize,
769
- "--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,
770
788
  "--dropdown-item-hover-bg-color": theme.colors.primary,
771
- "--label-color": theme.components.input.colors.text,
772
- "--input-border": theme.components.input.colors.border,
773
- "--input-bg": theme.components.input.colors.background,
774
- "--input-text-color": theme.components.input.colors.text,
775
- "--input-focus-border": theme.components.input.colors.focusBorder,
789
+ "--input-focus-border": theme.colors.primary,
776
790
  "--dropdown-item-hover-color": theme.colors.light,
791
+ // Sizes
777
792
  "--input-height": theme.components.input.sizes.height,
778
793
  "--input-border-radius": theme.components.input.sizes.radius
779
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",
@@ -122,13 +127,13 @@ function Button({
122
127
  "--button-font-family": theme.components.button.fonts.family,
123
128
  "--button-font-weight": theme.components.button.fonts.weight,
124
129
  "--button-font-size": theme.components.button.fonts.size,
125
- "--button-text-color": theme.components.button.colors.text,
126
- "--button-primary-bg": theme.components.button.colors.primaryBg,
127
- "--button-primary-hover-bg": theme.components.button.colors.primaryHoverBg,
128
- "--button-secondary-bg": theme.components.button.colors.secondaryBg,
129
- "--button-secondary-hover-bg": theme.components.button.colors.secondaryHoverBg,
130
- "--button-disabled-bg-color": theme.components.button.colors.disabledBg,
131
- "--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,
132
137
  "--button-height": theme.components.button.sizes.height,
133
138
  "--button-min-width": theme.components.button.sizes.minWidth,
134
139
  "--button-border-radius": theme.components.button.sizes.radius
@@ -195,12 +200,14 @@ function TooltipErrorInput({
195
200
  }) {
196
201
  const theme = useLeafcodeTheme();
197
202
  const styleVars = {
203
+ // Fonts
198
204
  "--input-font-family": theme.components.input.fonts.input,
199
205
  "--input-font-weight": theme.components.input.fonts.inputWeight,
200
206
  "--input-font-size": theme.components.input.fonts.inputSize,
201
- "--input-text-color": theme.components.input.colors.text,
207
+ // Colors
208
+ "--input-text-color": theme.colors.light,
202
209
  "--input-text-color-hover": theme.colors.light,
203
- "--input-error-border": theme.components.input.colors.errorBorder,
210
+ "--input-error-border": theme.colors.danger,
204
211
  "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
205
212
  };
206
213
  const [isTooltipOpen, setIsTooltipOpen] = useState(true);
@@ -291,18 +298,18 @@ var InputBase = ({
291
298
  "--input-font-weight": theme.components.input.fonts.inputWeight,
292
299
  "--input-font-size": theme.components.input.fonts.inputSize,
293
300
  // Colors
294
- "--label-color": theme.components.input.colors.text,
295
- "--label-line": theme.components.input.colors.labelLine,
296
- "--input-border": theme.components.input.colors.border,
297
- "--input-bg": theme.components.input.colors.background,
298
- "--autofill-box-shadow": theme.components.input.colors.background,
299
- "--autofill-text-color": theme.components.input.colors.text,
300
- "--autofill-border": theme.components.input.colors.focusBorder,
301
- "--input-text-color": theme.components.input.colors.text,
302
- "--input-placeholder": theme.components.input.colors.placeholder,
303
- "--input-focus-border": theme.components.input.colors.focusBorder,
304
- "--input-error-border": theme.components.input.colors.errorBorder,
305
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
301
+ "--label-color": theme.colors.text,
302
+ "--label-line": theme.colors.light,
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,
306
313
  // Sizes
307
314
  "--input-height": theme.components.input.sizes.height,
308
315
  "--input-border-radius": theme.components.input.sizes.radius
@@ -391,17 +398,17 @@ var TextAreaBase = ({
391
398
  "--input-font-weight": theme.components.input.fonts.inputWeight,
392
399
  "--input-font-size": theme.components.input.fonts.inputSize,
393
400
  // Colors
394
- "--label-color": theme.components.input.colors.text,
395
- "--label-line": theme.components.input.colors.labelLine,
396
- "--input-border": theme.components.input.colors.border,
397
- "--input-bg": theme.components.input.colors.background,
398
- "--autofill-box-shadow": theme.components.input.colors.background,
399
- "--autofill-text-color": theme.components.input.colors.text,
400
- "--input-text-color": theme.components.input.colors.text,
401
- "--input-placeholder": theme.components.input.colors.placeholder,
402
- "--input-focus-border": theme.components.input.colors.focusBorder,
403
- "--input-error-border": theme.components.input.colors.errorBorder,
404
- "--color-password-toggle": theme.components.input.colors.passwordToggle,
401
+ "--label-color": theme.colors.text,
402
+ "--label-line": theme.colors.light,
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,
405
412
  // Sizes
406
413
  "--input-height-text-area": theme.components.input.sizes.heightTextArea,
407
414
  "--input-border-radius": theme.components.input.sizes.radius
@@ -480,15 +487,17 @@ var InputBase2 = ({
480
487
  "--input-font-weight": theme.components.input.fonts.inputWeight,
481
488
  "--input-font-size": theme.components.input.fonts.inputSize,
482
489
  // Colors
483
- "--label-color": theme.components.input.colors.text,
484
- "--input-border": theme.components.input.colors.border,
485
- "--input-bg": theme.components.input.colors.background,
486
- "--label-line": theme.components.input.colors.labelLine,
490
+ "--label-color": theme.colors.text,
491
+ "--label-line": theme.colors.light,
492
+ "--input-border": theme.colors.borderDisabledBg,
493
+ "--input-bg": theme.colors.background,
487
494
  "--input-text-color": theme.colors.light,
488
- "--input-placeholder": theme.components.input.colors.placeholder,
489
- "--input-focus-border": theme.components.input.colors.focusBorder,
490
- "--input-error-border": theme.components.input.colors.errorBorder,
491
- "--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,
492
501
  // Sizes
493
502
  "--input-height": theme.components.input.sizes.height,
494
503
  "--input-border-radius": theme.components.input.sizes.radius
@@ -598,15 +607,18 @@ function ModalBase({
598
607
  }) {
599
608
  const theme = useLeafcodeTheme();
600
609
  const styleVars = {
610
+ // Fonts
601
611
  "--modal-title-font-weight": theme.components.modalBase.fonts?.modalTitleFontWeight,
602
612
  "--modal-title-font-size": theme.components.modalBase.fonts?.modalTitleFontSize,
603
613
  "--modal-title-font-family": theme.components.modalBase.fonts?.modalTitleFontFamily,
604
614
  "--modal-body-font-family": theme.components.modalBase.fonts?.modalBodyFontFamily,
605
615
  "--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,
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
610
622
  "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
611
623
  };
612
624
  useEffect3(() => {
@@ -675,8 +687,8 @@ var LoadingSpinner = memo(({ size = 20 }) => {
675
687
  style: {
676
688
  width: size,
677
689
  height: size,
678
- border: `3px solid ${theme.components.input.colors.focusBorder}33`,
679
- borderTopColor: theme.components.input.colors.focusBorder,
690
+ border: `3px solid ${theme.colors.primary}33`,
691
+ borderTopColor: theme.colors.primary,
680
692
  borderRadius: "50%",
681
693
  display: "inline-block",
682
694
  animation: "leafcode-spin 0.8s linear infinite"
@@ -710,18 +722,21 @@ function AutoCompleteInner(props, ref) {
710
722
  } = props;
711
723
  const theme = useLeafcodeTheme();
712
724
  const styleVars = {
713
- "--label-line": theme.components.input.colors.labelLine,
725
+ // Fonts
714
726
  "--label-font-family": theme.components.input.fonts.label,
715
727
  "--label-font-weight": theme.components.input.fonts.labelWeight,
716
728
  "--label-font-size": theme.components.input.fonts.labelSize,
717
- "--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,
718
736
  "--dropdown-item-hover-bg-color": theme.colors.primary,
719
- "--label-color": theme.components.input.colors.text,
720
- "--input-border": theme.components.input.colors.border,
721
- "--input-bg": theme.components.input.colors.background,
722
- "--input-text-color": theme.components.input.colors.text,
723
- "--input-focus-border": theme.components.input.colors.focusBorder,
737
+ "--input-focus-border": theme.colors.primary,
724
738
  "--dropdown-item-hover-color": theme.colors.light,
739
+ // Sizes
725
740
  "--input-height": theme.components.input.sizes.height,
726
741
  "--input-border-radius": theme.components.input.sizes.radius
727
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.88",
3
+ "version": "1.0.89",
4
4
  "description": "Lib de componentes react",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",