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

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 (9) hide show
  1. package/dist/index.css +55 -54
  2. package/dist/index.d.mts +20 -1
  3. package/dist/index.d.ts +20 -1
  4. package/dist/index.js +126 -63
  5. package/dist/index.mjs +126 -63
  6. package/dist/styles/input.css +28 -2
  7. package/dist/styles/modalBase.css +1 -1
  8. package/dist/styles/table.css +55 -54
  9. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -11,20 +11,20 @@
11
11
  gap: 10px;
12
12
  }
13
13
  .tableClassName {
14
- font-weight: 500;
15
- font-family: "Roboto", sans-serif;
16
- font-size: 0.875rem;
14
+ font-weight: var(--table-font-weight, 600);
15
+ font-family: var(--table-font-family, "Roboto", sans-serif);
16
+ font-size: var(--table-font-size, 0.875rem);
17
17
  }
18
18
  .paginatorClassName {
19
19
  padding: 0 0 0.75rem 0;
20
- font-weight: 500;
21
- font-family: "Roboto", sans-serif;
22
- font-size: 0.875rem;
20
+ font-weight: var(--table-font-weight, 600);
21
+ font-family: var(--table-font-family, "Roboto", sans-serif);
22
+ font-size: var(--table-font-size, 0.875rem);
23
23
  }
24
24
  .custom-input {
25
- font-weight: 500;
26
- font-family: "Roboto", sans-serif;
27
- font-size: 0.875rem;
25
+ font-weight: var(--table-custom-font-weight, 500);
26
+ font-family: var(--table-font-family, "Roboto", sans-serif);
27
+ font-size: var(--table-font-size, 0.875rem);
28
28
  color: #1c1c1c;
29
29
  padding: 0 1.25rem;
30
30
  width: 13rem;
@@ -33,7 +33,7 @@
33
33
  border-radius: 0.375rem;
34
34
  }
35
35
  .custom-input:focus {
36
- border: 1px solid #175dbf;
36
+ border: 1px solid var(--custom-input-focus, #6366f1);
37
37
  box-shadow: none;
38
38
  }
39
39
  .custom-input::placeholder {
@@ -61,12 +61,12 @@
61
61
  }
62
62
  .PrevPageEnabled:hover,
63
63
  .NextPageEnabled:hover {
64
- background-color: #175dbf;
64
+ background-color: var(--prev-next-enabled-hover, #6366f1);
65
65
  }
66
66
  .pageReport {
67
- font-weight: 500;
68
- font-family: "Roboto", sans-serif;
69
- font-size: 0.875rem;
67
+ font-weight: var(--table-custom-font-weight, 500);
68
+ font-family: var(--table-font-family, "Roboto", sans-serif);
69
+ font-size: var(--table-font-size, 0.875rem);
70
70
  color: #191919;
71
71
  padding: 0 0.5rem;
72
72
  }
@@ -77,14 +77,14 @@
77
77
  }
78
78
  .custom-select-filtro {
79
79
  height: 2rem;
80
- font-weight: 500;
81
- font-family: "Roboto", sans-serif;
82
- font-size: 0.875rem;
80
+ font-weight: var(--table-custom-font-weight, 500);
81
+ font-family: var(--table-font-family, "Roboto", sans-serif);
82
+ font-size: var(--table-font-size, 0.875rem);
83
83
  }
84
84
  .mensagem-nenhum-dado {
85
85
  text-align: center;
86
- font-weight: 500;
87
- font-family: "Roboto", sans-serif;
86
+ font-weight: var(--table-custom-font-weight, 500);
87
+ font-family: var(--table-font-family, "Roboto", sans-serif);
88
88
  padding: 2rem 0;
89
89
  color: #191919;
90
90
  }
@@ -109,8 +109,8 @@ th {
109
109
  border-bottom: 1px solid #edf0f2;
110
110
  border-left: 1px solid #edf0f2;
111
111
  padding: 0 0 0 7px;
112
- font-size: 14px;
113
- font-family: "Roboto", sans-serif;
112
+ font-size: var(--table-th-font-size, 14px);
113
+ font-family: var(--table-font-family, "Roboto", sans-serif);
114
114
  font-weight: bold;
115
115
  color: #373737;
116
116
  }
@@ -148,27 +148,27 @@ th {
148
148
  .p-datatable .p-datatable-tbody > tr {
149
149
  background: #fff;
150
150
  color: #000;
151
- font-family: "roboto", sans-serif;
152
- font-weight: 500;
151
+ font-family: var(--table-font-family, "Roboto", sans-serif);
152
+ font-weight: var(--table-custom-font-weight, 500);
153
153
  }
154
154
  .p-checkbox .p-checkbox-box {
155
155
  width: 1rem;
156
156
  height: 1rem;
157
- border: 1px solid #094394 !important;
157
+ border: 1px solid var(--p-checkbox-box-border, #6366f1) !important;
158
158
  border-radius: 4px !important;
159
159
  background-color: #fff;
160
160
  }
161
161
  .p-checkbox.p-highlight .p-checkbox-box {
162
- border-color: #094394;
163
- background: #094394;
162
+ border-color: var(--p-checkbox-highlight-border, #6366f1);
163
+ background: var(--p-checkbox-highlight-bg, #6366f1);
164
164
  }
165
165
  .p-checkbox {
166
166
  width: 1rem;
167
167
  height: 1rem;
168
168
  }
169
169
  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
170
- border-color: #094394;
171
- background: #094394;
170
+ border-color: var(--p-checkbox-boder-hover, #4f46e5);
171
+ background: var(--p-checkbox-bg, #6366f1);
172
172
  color: #ffffff;
173
173
  }
174
174
  .p-datatable .p-datatable-tbody > tr > td.p-selection-column {
@@ -197,7 +197,7 @@ th {
197
197
  left: -2px;
198
198
  }
199
199
  .p-datatable .p-datatable-tbody > tr.p-highlight {
200
- background: #fafbfc;
200
+ background: #f3f3f3;
201
201
  }
202
202
  .p-dropdown {
203
203
  background-color: #fff;
@@ -210,15 +210,15 @@ th {
210
210
  }
211
211
  .p-dropdown-label,
212
212
  .p-dropdown-item-label {
213
- font-size: 14px;
214
- font-family: "roboto", sans-serif;
213
+ font-size: var(--table-th-font-size, 14px);
214
+ font-family: var(--table-font-family, "Roboto", sans-serif);
215
215
  font-weight: bold;
216
216
  padding: 0 1rem 0 1rem;
217
217
  }
218
218
  .p-dropdown-item-label {
219
219
  padding: 6px 1rem;
220
- font-weight: 500;
221
- font-family: "Roboto", sans-serif;
220
+ font-weight: var(--table-custom-font-weight, 500);
221
+ font-family: var(--table-font-family, "Roboto", sans-serif);
222
222
  }
223
223
  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
224
224
  margin: 0;
@@ -226,7 +226,7 @@ th {
226
226
  border-radius: 0;
227
227
  }
228
228
  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
229
- background: #094394;
229
+ background: var(--p-dropdown-bg, #6366f1);
230
230
  color: #fff;
231
231
  padding: 0;
232
232
  }
@@ -247,8 +247,8 @@ th {
247
247
  border-bottom: 1px solid #e1e1e6;
248
248
  }
249
249
  .p-column-filter {
250
- font-family: "Roboto", sans-serif;
251
- font-weight: 500;
250
+ font-family: var(--table-font-family, "Roboto", sans-serif);
251
+ font-weight: var(--table-custom-font-weight, 500);
252
252
  margin-top: 0.25rem;
253
253
  transition: all 0.3s ease-in-out;
254
254
  border: 1px solid #e1e1e6;
@@ -267,7 +267,7 @@ th {
267
267
  }
268
268
  .p-column-filter:hover,
269
269
  .p-column-filter:focus {
270
- border-color: #094394;
270
+ border-color: var(--p-column-filter-hover-focus, #6366f1);
271
271
  }
272
272
  .p-column-filter-menu {
273
273
  background-color: transparent;
@@ -288,7 +288,7 @@ th {
288
288
  top: -2px;
289
289
  }
290
290
  .p-column-filter-menu-button.p-column-filter-menu-button-active {
291
- background-color: #094394;
291
+ background-color: var(--p-column-filter-button-active, #6366f1);
292
292
  color: #ffffff;
293
293
  padding: 6px;
294
294
  margin-left: 4px;
@@ -299,7 +299,7 @@ th {
299
299
  }
300
300
  [aria-sort=ascending] .p-sortable-column-icon,
301
301
  [aria-sort=descending] .p-sortable-column-icon {
302
- background-color: #094394;
302
+ background-color: var(--p-sortable-column-icon-bg, #6366f1);
303
303
  color: #ffffff !important;
304
304
  padding: 6px;
305
305
  margin-left: 4px;
@@ -314,12 +314,13 @@ th {
314
314
  .p-column-title {
315
315
  flex: 1;
316
316
  text-align: left;
317
+ font-weight: var(--table-th-font-weight, 800);
317
318
  }
318
319
  .p-column-filter-add-button {
319
- font-family: "Roboto", sans-serif;
320
- font-weight: 500;
320
+ font-family: var(--table-font-family, "Roboto", sans-serif);
321
+ font-weight: var(--table-custom-font-weight, 500);
321
322
  font-size: 12px;
322
- color: #094394;
323
+ color: var(--p-column-filter-add-button-color, #6366f1);
323
324
  box-shadow: none;
324
325
  display: flex;
325
326
  gap: 8px;
@@ -337,24 +338,24 @@ th {
337
338
  padding: 1.25rem 0;
338
339
  }
339
340
  .p-column-filter-buttonbar .p-c {
340
- font-family: "Roboto", sans-serif;
341
- font-weight: 500;
341
+ font-family: var(--table-font-family, "Roboto", sans-serif);
342
+ font-weight: var(--table-custom-font-weight, 500);
342
343
  font-size: 13px;
343
344
  color: #fff;
344
- background-color: #1b3540;
345
+ background-color: var(--p-column-filter-buttonbar-bg, #6366f1);
345
346
  padding: 4px 10px;
346
347
  border-radius: 4px;
347
348
  }
348
349
  .p-column-filter-buttonbar .p-c:hover {
349
- background-color: #094394;
350
+ background-color: var(--p-column-filter-buttonbar-bg-hover, #4f46e5);
350
351
  }
351
352
  .p-component .p-button-outlined,
352
353
  .p-button-sm {
353
354
  box-shadow: none;
354
355
  }
355
356
  .p-column-filter-remove-button {
356
- font-family: "Roboto", sans-serif;
357
- font-weight: 500;
357
+ font-family: var(--table-font-family, "Roboto", sans-serif);
358
+ font-weight: var(--table-custom-font-weight, 500);
358
359
  font-size: 12px;
359
360
  color: #f35353;
360
361
  box-shadow: none;
@@ -398,7 +399,7 @@ th {
398
399
  }
399
400
  .enable-button-table-actions:hover {
400
401
  color: #fff;
401
- background-color: #175dbf;
402
+ background-color: var(--enable-button-table-actions-hover, #6366f1);
402
403
  }
403
404
  .disable-button-table-actions {
404
405
  color: #1c1c1c;
@@ -457,10 +458,10 @@ th {
457
458
  }
458
459
  .btn-icone-actions-column:hover {
459
460
  color: #ffffff;
460
- background-color: #175dbf;
461
+ background-color: var(--btn-icone-actions-column-hover, #6366f1);
461
462
  }
462
463
  .tooltip-custom {
463
- font-weight: 500;
464
+ font-weight: var(--table-custom-font-weight, 500);
464
465
  font-size: 13px;
465
466
  }
466
467
  @media (max-width: 767px) {
@@ -504,14 +505,14 @@ th {
504
505
  }
505
506
  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
506
507
  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
507
- color: #4b5563 !important;
508
+ color: var(--p-datepicker, #4f46e5) !important;
508
509
  }
509
510
  .p-datepicker .p-datepicker-header .p-datepicker-prev,
510
511
  .p-datepicker .p-datepicker-header .p-datepicker-next {
511
- color: #6b7280 !important;
512
+ color: var(--p-datepicker-prev-next, #4f46e5) !important;
512
513
  }
513
514
  .p-datepicker .p-timepicker button {
514
- color: #6b7280 !important;
515
+ color: var(--p-datepicker-button, #4f46e5) !important;
515
516
  }
516
517
  .p-datepicker-calendar th {
517
518
  padding: 0;
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: {
@@ -330,7 +335,21 @@ interface LeafcodeTheme {
330
335
  radius: string;
331
336
  };
332
337
  };
338
+ table: {
339
+ colors: {
340
+ text: string;
341
+ primaryBg: string;
342
+ primaryHoverBg: string;
343
+ };
333
344
 
345
+ fonts: {
346
+ family: string;
347
+ weight: number | string;
348
+ customWeight: number | string;
349
+ thWeight: number | string;
350
+ size: string | number;
351
+ };
352
+ };
334
353
  modalBase: {
335
354
  colors: {
336
355
  modalTitleColor: string;
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: {
@@ -330,7 +335,21 @@ interface LeafcodeTheme {
330
335
  radius: string;
331
336
  };
332
337
  };
338
+ table: {
339
+ colors: {
340
+ text: string;
341
+ primaryBg: string;
342
+ primaryHoverBg: string;
343
+ };
333
344
 
345
+ fonts: {
346
+ family: string;
347
+ weight: number | string;
348
+ customWeight: number | string;
349
+ thWeight: number | string;
350
+ size: string | number;
351
+ };
352
+ };
334
353
  modalBase: {
335
354
  colors: {
336
355
  modalTitleColor: string;
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: "#3c3fe8",
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",
@@ -119,7 +124,7 @@ var defaultTheme = {
119
124
  button: {
120
125
  colors: {
121
126
  text: "#FFFFFF",
122
- primaryBg: "#6366f1",
127
+ primaryBg: "#3c3fe8",
123
128
  primaryHoverBg: "#4f46e5",
124
129
  secondaryBg: "#bf1717",
125
130
  secondaryHoverBg: "#f35353",
@@ -137,6 +142,20 @@ var defaultTheme = {
137
142
  radius: "6px"
138
143
  }
139
144
  },
145
+ table: {
146
+ colors: {
147
+ text: "#FFFFFF",
148
+ primaryBg: "#3c3fe8",
149
+ primaryHoverBg: "#4f46e5"
150
+ },
151
+ fonts: {
152
+ family: '"Roboto", sans-serif',
153
+ customWeight: 500,
154
+ thWeight: 600,
155
+ weight: 800,
156
+ size: "13px"
157
+ }
158
+ },
140
159
  modalBase: {
141
160
  colors: {
142
161
  modalTitleColor: "#000",
@@ -186,13 +205,13 @@ function Button({
186
205
  "--button-font-family": theme.components.button.fonts.family,
187
206
  "--button-font-weight": theme.components.button.fonts.weight,
188
207
  "--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,
208
+ "--button-text-color": theme.colors.light,
209
+ "--button-primary-bg": theme.colors.primary,
210
+ "--button-primary-hover-bg": theme.colors.primaryHover,
211
+ "--button-secondary-bg": theme.colors.secundary,
212
+ "--button-secondary-hover-bg": theme.colors.secundaryHover,
213
+ "--button-disabled-bg-color": theme.colors.borderDisabledBg,
214
+ "--button-disabled-border-color": theme.colors.borderDisabledBg,
196
215
  "--button-height": theme.components.button.sizes.height,
197
216
  "--button-min-width": theme.components.button.sizes.minWidth,
198
217
  "--button-border-radius": theme.components.button.sizes.radius
@@ -256,12 +275,14 @@ function TooltipErrorInput({
256
275
  }) {
257
276
  const theme = useLeafcodeTheme();
258
277
  const styleVars = {
278
+ // Fonts
259
279
  "--input-font-family": theme.components.input.fonts.input,
260
280
  "--input-font-weight": theme.components.input.fonts.inputWeight,
261
281
  "--input-font-size": theme.components.input.fonts.inputSize,
262
- "--input-text-color": theme.components.input.colors.text,
282
+ // Colors
283
+ "--input-text-color": theme.colors.light,
263
284
  "--input-text-color-hover": theme.colors.light,
264
- "--input-error-border": theme.components.input.colors.errorBorder,
285
+ "--input-error-border": theme.colors.danger,
265
286
  "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
266
287
  };
267
288
  const [isTooltipOpen, setIsTooltipOpen] = (0, import_react3.useState)(true);
@@ -352,25 +373,25 @@ var InputBase = ({
352
373
  "--input-font-weight": theme.components.input.fonts.inputWeight,
353
374
  "--input-font-size": theme.components.input.fonts.inputSize,
354
375
  // 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,
376
+ "--label-color": theme.colors.text,
377
+ "--label-line": theme.colors.light,
378
+ "--input-border": theme.colors.borderDisabledBg,
379
+ "--input-bg": theme.colors.background,
380
+ "--autofill-box-shadow": theme.colors.background,
381
+ "--autofill-text-color": theme.colors.text,
382
+ "--autofill-border": theme.colors.primary,
383
+ "--input-text-color": theme.colors.text,
384
+ "--input-placeholder": theme.colors.placeholder,
385
+ "--input-focus-border": theme.colors.primary,
386
+ "--input-error-border": theme.colors.danger,
387
+ "--color-password-toggle": theme.colors.placeholder,
367
388
  // Sizes
368
389
  "--input-height": theme.components.input.sizes.height,
369
390
  "--input-border-radius": theme.components.input.sizes.radius
370
391
  };
371
392
  const handleChange = (e) => {
372
393
  let val = e.target.value;
373
- if (validationMode === "restricted") {
394
+ if (validationMode === "restricted" && !showPasswordToggle) {
374
395
  val = val.replace(/[^a-zA-Z0-9_.-]/g, "");
375
396
  val = val.replace(/^\.+/, "");
376
397
  val = val.replace(/\.+$/, "");
@@ -379,7 +400,8 @@ var InputBase = ({
379
400
  e.target.value = val;
380
401
  onChange?.(e);
381
402
  };
382
- const [show, setShow] = (0, import_react4.useState)(true);
403
+ const [show, setShow] = (0, import_react4.useState)(false);
404
+ const isPassword = showPasswordToggle;
383
405
  const handleClick = () => setShow(!show);
384
406
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
385
407
  "div",
@@ -402,7 +424,8 @@ var InputBase = ({
402
424
  id: name,
403
425
  name,
404
426
  disabled,
405
- type: show ? "text" : "password",
427
+ type: isPassword ? show ? "text" : "password" : rest.type ?? "text",
428
+ autoComplete: isPassword ? rest.autoComplete ?? "current-password" : rest.autoComplete,
406
429
  className: `input ${error && "input-error"} ${isUppercaseText && "is-uppercase"}`,
407
430
  placeholder,
408
431
  onFocus,
@@ -452,17 +475,17 @@ var TextAreaBase = ({
452
475
  "--input-font-weight": theme.components.input.fonts.inputWeight,
453
476
  "--input-font-size": theme.components.input.fonts.inputSize,
454
477
  // 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,
478
+ "--label-color": theme.colors.text,
479
+ "--label-line": theme.colors.light,
480
+ "--input-border": theme.colors.borderDisabledBg,
481
+ "--input-bg": theme.colors.background,
482
+ "--autofill-box-shadow": theme.colors.background,
483
+ "--autofill-text-color": theme.colors.text,
484
+ "--input-text-color": theme.colors.text,
485
+ "--input-placeholder": theme.colors.placeholder,
486
+ "--input-focus-border": theme.colors.primary,
487
+ "--input-error-border": theme.colors.danger,
488
+ "--color-password-toggle": theme.colors.placeholder,
466
489
  // Sizes
467
490
  "--input-height-text-area": theme.components.input.sizes.heightTextArea,
468
491
  "--input-border-radius": theme.components.input.sizes.radius
@@ -537,15 +560,17 @@ var InputBase2 = ({
537
560
  "--input-font-weight": theme.components.input.fonts.inputWeight,
538
561
  "--input-font-size": theme.components.input.fonts.inputSize,
539
562
  // 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,
563
+ "--label-color": theme.colors.text,
564
+ "--label-line": theme.colors.light,
565
+ "--input-border": theme.colors.borderDisabledBg,
566
+ "--input-bg": theme.colors.background,
544
567
  "--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,
568
+ "--input-text-single-color": theme.colors.text,
569
+ "--input-placeholder": theme.colors.placeholder,
570
+ "--input-focus-border": theme.colors.primary,
571
+ "--input-error-border": theme.colors.danger,
572
+ "--color-password-toggle": theme.colors.placeholder,
573
+ "--dropdown-item-hover-bg-color": theme.colors.primaryHover,
549
574
  // Sizes
550
575
  "--input-height": theme.components.input.sizes.height,
551
576
  "--input-border-radius": theme.components.input.sizes.radius
@@ -655,15 +680,18 @@ function ModalBase({
655
680
  }) {
656
681
  const theme = useLeafcodeTheme();
657
682
  const styleVars = {
683
+ // Fonts
658
684
  "--modal-title-font-weight": theme.components.modalBase.fonts?.modalTitleFontWeight,
659
685
  "--modal-title-font-size": theme.components.modalBase.fonts?.modalTitleFontSize,
660
686
  "--modal-title-font-family": theme.components.modalBase.fonts?.modalTitleFontFamily,
661
687
  "--modal-body-font-family": theme.components.modalBase.fonts?.modalBodyFontFamily,
662
688
  "--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,
689
+ // Colors
690
+ "--modal-bg-color": theme.colors.background,
691
+ "--modal-title-color": theme.colors.text,
692
+ "--modal-body-color": theme.colors.background,
693
+ "--modal-close-color": theme.colors.danger,
694
+ // Sizes
667
695
  "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
668
696
  };
669
697
  (0, import_react9.useEffect)(() => {
@@ -727,8 +755,8 @@ var LoadingSpinner = (0, import_react10.memo)(({ size = 20 }) => {
727
755
  style: {
728
756
  width: size,
729
757
  height: size,
730
- border: `3px solid ${theme.components.input.colors.focusBorder}33`,
731
- borderTopColor: theme.components.input.colors.focusBorder,
758
+ border: `3px solid ${theme.colors.primary}33`,
759
+ borderTopColor: theme.colors.primary,
732
760
  borderRadius: "50%",
733
761
  display: "inline-block",
734
762
  animation: "leafcode-spin 0.8s linear infinite"
@@ -762,18 +790,21 @@ function AutoCompleteInner(props, ref) {
762
790
  } = props;
763
791
  const theme = useLeafcodeTheme();
764
792
  const styleVars = {
765
- "--label-line": theme.components.input.colors.labelLine,
793
+ // Fonts
766
794
  "--label-font-family": theme.components.input.fonts.label,
767
795
  "--label-font-weight": theme.components.input.fonts.labelWeight,
768
796
  "--label-font-size": theme.components.input.fonts.labelSize,
769
- "--dropdown-empty-color": theme.components.input.colors.text,
797
+ // Colors
798
+ "--label-color": theme.colors.text,
799
+ "--label-line": theme.colors.light,
800
+ "--input-border": theme.colors.borderDisabledBg,
801
+ "--input-bg": theme.colors.background,
802
+ "--input-text-color": theme.colors.text,
803
+ "--dropdown-empty-color": theme.colors.text,
770
804
  "--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,
805
+ "--input-focus-border": theme.colors.primary,
776
806
  "--dropdown-item-hover-color": theme.colors.light,
807
+ // Sizes
777
808
  "--input-height": theme.components.input.sizes.height,
778
809
  "--input-border-radius": theme.components.input.sizes.radius
779
810
  };
@@ -1296,9 +1327,13 @@ function DataTableAdvancedFilterWrapper({
1296
1327
  };
1297
1328
  const [page, setPage] = (0, import_react17.useState)(initialState.page);
1298
1329
  const [rows, setRows] = (0, import_react17.useState)(initialState.rows);
1299
- const [first, setFirst] = (0, import_react17.useState)((initialState.page - 1) * initialState.rows);
1330
+ const [first, setFirst] = (0, import_react17.useState)(
1331
+ (initialState.page - 1) * initialState.rows
1332
+ );
1300
1333
  const [sortField, setSortField] = (0, import_react17.useState)(initialState.sortField);
1301
- const [sortOrder, setSortOrder] = (0, import_react17.useState)(initialState.sortOrder ?? 1);
1334
+ const [sortOrder, setSortOrder] = (0, import_react17.useState)(
1335
+ initialState.sortOrder ?? 1
1336
+ );
1302
1337
  const [searchText, setSearchText] = (0, import_react17.useState)(initialState.filter ?? "");
1303
1338
  const [filters, setFilters] = (0, import_react17.useState)({
1304
1339
  ...initFilters,
@@ -1438,7 +1473,35 @@ function DataTableAdvancedFilterWrapper({
1438
1473
  customActions
1439
1474
  ]
1440
1475
  );
1441
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
1476
+ const theme = useLeafcodeTheme();
1477
+ const styleVars = {
1478
+ "--table-font-family": theme.components.table.fonts.family,
1479
+ "--table-font-weight": theme.components.table.fonts.weight,
1480
+ "--table-custom-font-weight": theme.components.table.fonts.customWeight,
1481
+ "--table-font-size": theme.components.table.fonts.size,
1482
+ "--table-th-font-weight": theme.components.table.fonts.thWeight,
1483
+ "--table-th-font-size": theme.components.table.fonts.size,
1484
+ "--custom-input-focus": theme.colors.primary,
1485
+ "--prev-next-enabled-hover": theme.colors.primaryHover,
1486
+ "--p-checkbox-box-border": theme.colors.primary,
1487
+ "--p-checkbox-highlight-border": theme.colors.primary,
1488
+ "--p-checkbox-highlight-bg": theme.colors.primary,
1489
+ "--p-checkbox-boder-hover": theme.colors.primaryHover,
1490
+ "--p-checkbox-bg": theme.colors.primary,
1491
+ "--p-dropdown-bg": theme.colors.primary,
1492
+ "--p-column-filter-hover-focus": theme.colors.primary,
1493
+ "--p-column-filter-button-active": theme.colors.primary,
1494
+ "--p-sortable-column-icon-bg": theme.colors.primary,
1495
+ "--p-column-filter-add-button-color": theme.colors.primary,
1496
+ "--p-column-filter-buttonbar-bg": theme.colors.primary,
1497
+ "--p-column-filter-buttonbar-bg-hover": theme.colors.primaryHover,
1498
+ "--enable-button-table-actions-hover": theme.colors.primaryHover,
1499
+ "--btn-icone-actions-column-hover": theme.colors.primaryHover,
1500
+ "--p-datepicker": theme.colors.primary,
1501
+ "--p-datepicker-prev-next": theme.colors.primary,
1502
+ "--p-datepicker-button": theme.colors.primary
1503
+ };
1504
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: styleVars, children: [
1442
1505
  disablePagination && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "disablePagination", children: TableHeaderAndTableActions }),
1443
1506
  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
1444
1507
  import_datatable.DataTable,