@charlesgomes/leafcode-shared-lib-react 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M16.6925 7.94254L10.4425 14.1926C10.3845 14.2507 10.3156 14.2968 10.2397 14.3282C10.1638 14.3597 10.0825 14.3759 10.0003 14.3759C9.91821 14.3759 9.83689 14.3597 9.76101 14.3282C9.68514 14.2968 9.61621 14.2507 9.55816 14.1926L3.30816 7.94254C3.19089 7.82526 3.125 7.6662 3.125 7.50035C3.125 7.3345 3.19089 7.17544 3.30816 7.05816C3.42544 6.94089 3.5845 6.875 3.75035 6.875C3.9162 6.875 4.07526 6.94089 4.19254 7.05816L10.0003 12.8668L15.8082 7.05816C15.8662 7.00009 15.9352 6.95403 16.011 6.92261C16.0869 6.89118 16.1682 6.875 16.2504 6.875C16.3325 6.875 16.4138 6.89118 16.4897 6.92261C16.5655 6.95403 16.6345 7.00009 16.6925 7.05816C16.7506 7.11623 16.7967 7.18517 16.8281 7.26104C16.8595 7.33691 16.8757 7.41823 16.8757 7.50035C16.8757 7.58247 16.8595 7.66379 16.8281 7.73966C16.7967 7.81553 16.7506 7.88447 16.6925 7.94254Z" fill="black"/>
3
+ </svg>
@@ -0,0 +1,548 @@
1
+ .disablePagination {
2
+ display: grid;
3
+ margin-bottom: 0.75rem;
4
+ gap: 0.25rem;
5
+ }
6
+
7
+ .paginatorLeft {
8
+ display: flex;
9
+ align-items: center;
10
+ gap: 10px;
11
+ }
12
+
13
+ .tableClassName {
14
+ font-weight: 500;
15
+ font-size: 0.875rem;
16
+ }
17
+
18
+ .paginatorClassName {
19
+ padding: 0 0 0.75rem 0;
20
+ font-weight: 500;
21
+ font-size: 0.875rem;
22
+ }
23
+
24
+ .custom-input {
25
+ font-weight: 500;
26
+ font-size: 0.875rem;
27
+ color: #1c1c1c;
28
+ padding: 0 1.25rem;
29
+ width: 13rem;
30
+ height: 2rem;
31
+ border: 1px solid #dadada;
32
+ border-radius: 0.375rem;
33
+ }
34
+
35
+ .custom-input:focus {
36
+ border: 1px solid #175dbf;
37
+ box-shadow: none;
38
+ }
39
+
40
+ .custom-input::placeholder {
41
+ color: #a5a5a5;
42
+ }
43
+
44
+ .PrevPage,
45
+ .NextPage {
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ width: 1.75rem;
50
+ height: 1.9rem;
51
+ border-radius: 0.375rem;
52
+ }
53
+
54
+ .PrevPageDisabled,
55
+ .NextPageDisabled {
56
+ background-color: #191919;
57
+ opacity: 0.1;
58
+ cursor: not-allowed;
59
+ }
60
+
61
+ .PrevPageEnabled,
62
+ .NextPageEnabled {
63
+ background-color: #272b2e;
64
+ cursor: pointer;
65
+ }
66
+
67
+ .PrevPageEnabled:hover,
68
+ .NextPageEnabled:hover {
69
+ background-color: #175dbf;
70
+ }
71
+
72
+ .pageReport {
73
+ font-weight: 500;
74
+ font-size: 0.875rem;
75
+ color: #191919;
76
+ padding: 0 0.5rem;
77
+ }
78
+
79
+ .custom-select {
80
+ max-width: 6rem;
81
+ max-height: 34px;
82
+ margin-inline-end: 1rem;
83
+ }
84
+
85
+ @media (min-width: 640px) {
86
+ .custom-select {
87
+ margin-inline-end: 2rem;
88
+ }
89
+ }
90
+
91
+ .custom-select-filtro {
92
+ height: 2rem;
93
+ font-weight: 500;
94
+ font-size: 0.875rem;
95
+ }
96
+
97
+ .mensagem-nenhum-dado {
98
+ text-align: center;
99
+ font-weight: 500;
100
+ padding: 2rem 0;
101
+ color: #191919;
102
+ }
103
+
104
+ .p-button.p-button-outlined {
105
+ background-color: transparent;
106
+ color: transparent;
107
+ border: 1px solid;
108
+ padding: 0;
109
+ }
110
+
111
+ .p-button {
112
+ color: #ffffff;
113
+ background: transparent;
114
+ border: 1px solid transparent;
115
+ padding: 0;
116
+ }
117
+
118
+ table {
119
+ border-collapse: separate;
120
+ /* border-right: 1px solid #edf0f2; */
121
+ }
122
+
123
+ th {
124
+ border-top: 1px solid #edf0f2;
125
+ border-bottom: 1px solid #edf0f2;
126
+ border-left: 1px solid #edf0f2;
127
+ padding: 0 14px;
128
+ font-size: 14px;
129
+ font-family: "Roboto", sans-serif;
130
+ font-weight: bold;
131
+ color: #373737;
132
+ }
133
+
134
+ td {
135
+ border-bottom: 1px solid #edf0f2;
136
+ border-left: 1px solid #edf0f2;
137
+ padding: 5px 14px;
138
+ }
139
+
140
+ .p-datatable .p-datatable-header {
141
+ background: transparent;
142
+ }
143
+
144
+ .react-flow__node.draggable {
145
+ color: #fff !important;
146
+ }
147
+
148
+ .react-flow__controls-button {
149
+ color: #fff !important;
150
+ }
151
+
152
+ .custom-select {
153
+ appearance: none;
154
+ -webkit-appearance: none;
155
+ -moz-appearance: none;
156
+ background: #fff url("../assets/images/seta.svg") no-repeat right 6px center;
157
+ padding-right: 2rem;
158
+ }
159
+
160
+ .react-tooltip {
161
+ z-index: 99 !important;
162
+ }
163
+
164
+ .p-paginator-left-content {
165
+ flex: 1;
166
+ }
167
+
168
+ .p-paginator {
169
+ padding: 0.5rem 0 !important;
170
+ border: 0;
171
+ }
172
+
173
+ th {
174
+ background-color: #f7f7f7;
175
+ font-weight: bold;
176
+ }
177
+
178
+ .p-datatable .p-datatable-tbody > tr {
179
+ background: #fff;
180
+ color: #000;
181
+ font-family: "roboto", sans-serif;
182
+ font-weight: 500;
183
+ }
184
+
185
+ .p-checkbox .p-checkbox-box {
186
+ width: 18px;
187
+ height: 18px;
188
+ border: 1px solid #094394 !important;
189
+ border-radius: 4px !important;
190
+ background-color: #fff;
191
+ }
192
+
193
+ .p-checkbox.p-highlight .p-checkbox-box {
194
+ border-color: #094394;
195
+ background: #094394;
196
+ }
197
+
198
+ .p-checkbox {
199
+ width: 18px;
200
+ height: 18px;
201
+ }
202
+
203
+ .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight
204
+ .p-checkbox-box {
205
+ border-color: #094394;
206
+ background: #094394;
207
+ color: #ffffff;
208
+ }
209
+
210
+ .p-datatable .p-datatable-tbody > tr.p-highlight {
211
+ background: #fafbfc;
212
+ }
213
+
214
+ .p-dropdown {
215
+ background-color: #fff;
216
+ border: 1px solid #e1e1e6;
217
+ height: 2.5rem;
218
+ display: flex;
219
+ align-items: center;
220
+ margin-bottom: 10px;
221
+ box-shadow: none;
222
+ }
223
+
224
+ .p-dropdown-label,
225
+ .p-dropdown-item-label {
226
+ font-size: 14px;
227
+ font-family: "roboto", sans-serif;
228
+ font-weight: bold;
229
+ padding: 0 1rem 0 1rem;
230
+ }
231
+
232
+ .p-dropdown-item-label {
233
+ padding: 6px 1rem;
234
+ font-weight: 500;
235
+ }
236
+
237
+ .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
238
+ margin: 0;
239
+ padding: 0;
240
+ border-radius: 0;
241
+ }
242
+
243
+ .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
244
+ background: #094394;
245
+ color: #fff;
246
+ padding: 0;
247
+ }
248
+
249
+ .p-column-filter-overlay {
250
+ background-color: #fff !important;
251
+ border: none !important;
252
+ padding: 1rem !important;
253
+ box-shadow: 0px 22px 20px rgba(0, 0, 0, 0.3) !important;
254
+ }
255
+
256
+ .p-column-filter-overlay-menu .p-column-filter-operator {
257
+ padding: 0.75rem 0;
258
+ border-bottom: 1px solid #e1e1e6;
259
+ color: #252525;
260
+ background: #fff;
261
+ }
262
+
263
+ .p-column-filter-overlay-menu .p-column-filter-constraint {
264
+ padding: 1.25rem 0;
265
+ border-bottom: 1px solid #e1e1e6;
266
+ }
267
+
268
+ .p-column-filter {
269
+ font-family: "Roboto", sans-serif;
270
+ font-weight: 500;
271
+ margin-top: 0.25rem;
272
+ transition: all 0.3s ease-in-out;
273
+ border: 1px solid #e1e1e6;
274
+ background-color: v#1A1D22;
275
+ color: #fff;
276
+ padding-left: 0.75rem;
277
+ padding-right: 0.75rem;
278
+ width: 100%;
279
+ height: 2.5rem;
280
+ border-radius: 0.375rem;
281
+ font-size: 13px;
282
+ box-shadow: none;
283
+ }
284
+
285
+ .p-column-filter::placeholder {
286
+ color: #a5a5a5;
287
+ }
288
+
289
+ .p-column-filter:hover,
290
+ .p-column-filter:focus {
291
+ border-color: #094394;
292
+ }
293
+
294
+ .p-column-filter-menu {
295
+ background-color: transparent;
296
+ border: none;
297
+ border-radius: 0;
298
+ width: auto;
299
+ height: auto;
300
+ padding-left: initial;
301
+ padding-right: initial;
302
+ }
303
+
304
+ .p-column-filter-menu-button {
305
+ width: 1.5rem;
306
+ height: 1.5rem;
307
+ }
308
+
309
+ .p-column-filter-menu-button {
310
+ padding: 6px;
311
+ position: relative;
312
+ top: -2px;
313
+ }
314
+
315
+ /* Botão ativo */
316
+ .p-column-filter-menu-button.p-column-filter-menu-button-active {
317
+ background-color: #094394;
318
+ color: #ffffff;
319
+ padding: 6px;
320
+ margin-left: 4px;
321
+ }
322
+
323
+ /* Quando o botão de filtro está ativo, muda também a cor do ícone de ordenação */
324
+ th:has(.p-column-filter-menu-button.p-column-filter-menu-button-active)
325
+ .p-icon.p-sortable-column-icon {
326
+ background-color: #094394;
327
+ color: #ffffff !important;
328
+ padding: 6px;
329
+ margin-left: 4px;
330
+ width: 1.5rem;
331
+ height: 1.5rem;
332
+ border-radius: 5rem;
333
+ }
334
+
335
+ [aria-sort="ascending"] .p-sortable-column-icon,
336
+ [aria-sort="descending"] .p-sortable-column-icon {
337
+ background-color: #094394;
338
+ color: #ffffff !important;
339
+ padding: 6px;
340
+ margin-left: 4px;
341
+ width: 1.5rem;
342
+ height: 1.5rem;
343
+ border-radius: 5rem;
344
+ }
345
+
346
+ .p-icon {
347
+ width: 12px;
348
+ height: 12px;
349
+ }
350
+
351
+ .p-column-title {
352
+ flex: 1;
353
+ }
354
+
355
+ .p-column-filter-add-button {
356
+ font-family: "Roboto", sans-serif;
357
+ font-weight: 500;
358
+ font-size: 12px;
359
+ color: #008236;
360
+ box-shadow: none;
361
+ display: flex;
362
+ gap: 8px;
363
+ padding: 10px 0;
364
+ }
365
+
366
+ .p-column-filter-add-button > svg {
367
+ width: 12px;
368
+ height: 12px;
369
+ }
370
+
371
+ .p-column-filter,
372
+ .p-sortable-column-icon {
373
+ color: #000 !important;
374
+ }
375
+
376
+ .p-column-filter-overlay-menu .p-column-filter-buttonbar {
377
+ padding: 1.25rem 0;
378
+ }
379
+
380
+ .p-column-filter-buttonbar .p-c {
381
+ font-family: "Roboto", sans-serif;
382
+ font-weight: 500;
383
+ font-size: 13px;
384
+ color: #fff;
385
+ background-color: #1b3540;
386
+ padding: 4px 10px;
387
+ border-radius: 4px;
388
+ }
389
+
390
+ .p-column-filter-buttonbar .p-c:hover {
391
+ background-color: #094394;
392
+ }
393
+
394
+ .p-component .p-button-outlined,
395
+ .p-button-sm {
396
+ box-shadow: none;
397
+ }
398
+
399
+ .p-column-filter-remove-button {
400
+ font-family: "Roboto", sans-serif;
401
+ font-weight: 500;
402
+ font-size: 12px;
403
+ color: #f35353;
404
+ box-shadow: none;
405
+ display: flex;
406
+ gap: 8px;
407
+ padding: 10px 0 0 0;
408
+ }
409
+
410
+ .p-column-filter-remove-button > svg {
411
+ width: 12px;
412
+ height: 12px;
413
+ }
414
+
415
+ .p-datatable .p-datatable-loading-overlay {
416
+ position: fixed;
417
+ display: flex;
418
+ align-items: center;
419
+ justify-content: center;
420
+ z-index: 99;
421
+ }
422
+
423
+ .NextPage > svg,
424
+ .PrevPage > svg {
425
+ fill: #fff;
426
+ }
427
+
428
+ .box-row-table {
429
+ position: relative;
430
+ }
431
+
432
+ .box-icones-table-actions {
433
+ display: flex;
434
+ }
435
+
436
+ .enable-button-table-actions {
437
+ display: flex;
438
+ align-items: center;
439
+ justify-content: center;
440
+ width: 1.75rem;
441
+ height: 1.75rem;
442
+ color: #1c1c1c;
443
+ background-color: transparent;
444
+ cursor: pointer;
445
+ border-radius: 9999px;
446
+ border: 0;
447
+ transition: all 0.3s ease-in-out;
448
+ }
449
+
450
+ .enable-button-table-actions:hover {
451
+ color: #fff;
452
+ background-color: #175dbf;
453
+ }
454
+
455
+ .disable-button-table-actions {
456
+ color: #1c1c1c;
457
+ border-radius: 9999px;
458
+ cursor: not-allowed;
459
+ transition: all 0.3s ease-in-out;
460
+ opacity: 0.2;
461
+ }
462
+
463
+ .disable-button-table-actions:hover {
464
+ color: #1c1c1c;
465
+ background-color: transparent;
466
+ }
467
+
468
+ .box-row-table .box-icones-actions-column {
469
+ opacity: 0;
470
+ transition: opacity 0.2s ease;
471
+ }
472
+
473
+ .box-row-table:hover .box-icones-actions-column {
474
+ opacity: 1;
475
+ }
476
+
477
+ .box-icones-actions-column {
478
+ position: absolute;
479
+ padding: 0.125rem;
480
+ width: fit-content;
481
+ height: fit-content;
482
+ margin: auto;
483
+ inset: 0;
484
+ display: flex;
485
+ align-items: center;
486
+ justify-content: center;
487
+ opacity: 0;
488
+ gap: 0.25rem;
489
+ transition: opacity 0.2s ease;
490
+ }
491
+
492
+ .box-icones-actions-column:hover {
493
+ opacity: 1;
494
+ }
495
+
496
+ .btn-icone-actions-column {
497
+ color: #1c1c1c;
498
+ cursor: pointer;
499
+ padding: 0;
500
+ border: 0;
501
+ width: 1.5rem;
502
+ height: 1.5rem;
503
+ display: flex;
504
+ align-items: center;
505
+ justify-content: center;
506
+ border-radius: 10rem;
507
+ transition: all 0.3s ease-in-out;
508
+ }
509
+
510
+ .btn-icone-actions-column:hover {
511
+ color: #ffffff;
512
+ background-color: #175dbf;
513
+ }
514
+
515
+ .tooltip-custom {
516
+ font-weight: 500;
517
+ font-size: 13px;
518
+ }
519
+
520
+ @media (max-width: 767px) {
521
+ .p-paginator-left-content {
522
+ min-width: 100vw;
523
+ margin-bottom: 8px;
524
+ }
525
+
526
+ .p-paginator-top {
527
+ display: flex;
528
+ align-items: flex-start;
529
+ justify-content: flex-start;
530
+ }
531
+
532
+ .pageReport {
533
+ position: relative;
534
+ top: 10px !important;
535
+ }
536
+
537
+ .PrevPage,
538
+ .NextPage {
539
+ position: relative;
540
+ top: 4px !important;
541
+ }
542
+
543
+ .disablePagination,
544
+ .paginatorLeft {
545
+ display: flex;
546
+ gap: 1rem;
547
+ }
548
+ }
package/package.json ADDED
@@ -0,0 +1,59 @@
1
+ {
2
+ "name": "@charlesgomes/leafcode-shared-lib-react",
3
+ "version": "1.0.0",
4
+ "description": "Lib de componentes react",
5
+ "main": "dist/index.cjs",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.mjs",
12
+ "require": "./dist/index.cjs"
13
+ },
14
+ "./table.css": "./dist/styles/table.css"
15
+ },
16
+ "files": [
17
+ "dist"
18
+ ],
19
+ "scripts": {
20
+ "build": "tsup src/index.tsx --dts --format esm,cjs --clean && cp -r src/styles dist/ && cp -r src/assets dist/",
21
+ "dev": "vite"
22
+ },
23
+ "keywords": [
24
+ "react",
25
+ "lib",
26
+ "componentes"
27
+ ],
28
+ "author": "Seu Nome",
29
+ "license": "MIT",
30
+ "publishConfig": {
31
+ "access": "public"
32
+ },
33
+ "peerDependencies": {
34
+ "primereact": "^10.9.7",
35
+ "@tanstack/react-query": "^5.85.9",
36
+ "react": ">=17",
37
+ "react-dom": ">=17"
38
+ },
39
+ "devDependencies": {
40
+ "@tanstack/react-query": "^5.85.9",
41
+ "@tailwindcss/postcss": "^4.1.12",
42
+ "@types/react": "^19.1.12",
43
+ "@types/react-dom": "^19.1.9",
44
+ "@vitejs/plugin-react": "^5.0.2",
45
+ "postcss": "^8.5.6",
46
+ "tailwindcss": "^4.1.12",
47
+ "tsup": "^8.5.0",
48
+ "typescript": "^5.9.2",
49
+ "vite": "^7.1.4"
50
+ },
51
+ "dependencies": {
52
+ "@phosphor-icons/react": "^2.1.10",
53
+ "clsx": "^2.1.1",
54
+ "react-select": "^5.10.2",
55
+ "react-tooltip": "^5.29.1",
56
+ "tailwind-merge": "^3.3.1",
57
+ "primereact": "^10.9.7"
58
+ }
59
+ }