@masterteam/components 0.0.139 → 0.0.141

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 (14) hide show
  1. package/assets/common.css +1 -1
  2. package/fesm2022/masterteam-components-entities.mjs +53 -7
  3. package/fesm2022/masterteam-components-entities.mjs.map +1 -1
  4. package/fesm2022/masterteam-components-select-field.mjs +2 -2
  5. package/fesm2022/masterteam-components-select-field.mjs.map +1 -1
  6. package/fesm2022/masterteam-components-tooltip.mjs +9 -5
  7. package/fesm2022/masterteam-components-tooltip.mjs.map +1 -1
  8. package/fesm2022/masterteam-components-topbar.mjs +6 -3
  9. package/fesm2022/masterteam-components-topbar.mjs.map +1 -1
  10. package/fesm2022/masterteam-components.mjs +262 -72
  11. package/fesm2022/masterteam-components.mjs.map +1 -1
  12. package/package.json +1 -1
  13. package/types/masterteam-components-entities.d.ts +35 -6
  14. package/types/masterteam-components-topbar.d.ts +4 -1
package/fesm2022/masterteam-components.mjs CHANGED
@@ -305,99 +305,289 @@ const MTPreset = (themeOptions) => {
305
305
  borderRadius: '{border.radius.md}',
306
306
  },
307
307
  },
308
+ datatable: {
309
+ root: {
310
+ borderColor: '{surface.200}',
311
+ transitionDuration: '{transition.duration}',
312
+ },
313
+ header: {
314
+ background: '{surface.0}',
315
+ borderColor: '{surface.200}',
316
+ color: '{surface.700}',
317
+ borderWidth: '0 0 1px 0',
318
+ padding: '1rem 1.25rem',
319
+ },
320
+ headerCell: {
321
+ background: '{surface.50}',
322
+ hoverBackground: '{surface.100}',
323
+ selectedBackground: '{surface.100}',
324
+ borderColor: '{surface.200}',
325
+ color: '{surface.600}',
326
+ hoverColor: '{surface.700}',
327
+ selectedColor: '{surface.700}',
328
+ gap: '0.5rem',
329
+ padding: '0.875rem 1rem',
330
+ },
331
+ columnTitle: {
332
+ fontWeight: '600',
333
+ },
334
+ row: {
335
+ background: '{surface.0}',
336
+ hoverBackground: '{surface.50}',
337
+ selectedBackground: '{surface.100}',
338
+ color: '{surface.700}',
339
+ hoverColor: '{surface.900}',
340
+ selectedColor: '{surface.900}',
341
+ stripedBackground: '{surface.50}',
342
+ },
343
+ bodyCell: {
344
+ borderColor: '{surface.200}',
345
+ padding: '0.875rem 1rem',
346
+ },
347
+ paginatorBottom: {
348
+ borderColor: '{surface.200}',
349
+ borderWidth: '1px 0 0 0',
350
+ },
351
+ colorScheme: {
352
+ light: {
353
+ root: {
354
+ borderColor: '{surface.200}',
355
+ },
356
+ header: {
357
+ background: '{surface.0}',
358
+ borderColor: '{surface.200}',
359
+ color: '{surface.700}',
360
+ },
361
+ headerCell: {
362
+ background: '{surface.50}',
363
+ hoverBackground: '{surface.100}',
364
+ selectedBackground: '{surface.100}',
365
+ borderColor: '{surface.200}',
366
+ color: '{surface.600}',
367
+ hoverColor: '{surface.700}',
368
+ selectedColor: '{surface.700}',
369
+ },
370
+ row: {
371
+ background: '{surface.0}',
372
+ hoverBackground: '{surface.50}',
373
+ selectedBackground: '{surface.100}',
374
+ color: '{surface.700}',
375
+ hoverColor: '{surface.900}',
376
+ selectedColor: '{surface.900}',
377
+ stripedBackground: '{surface.50}',
378
+ },
379
+ bodyCell: {
380
+ selectedBorderColor: '{surface.200}',
381
+ },
382
+ paginatorBottom: {
383
+ borderColor: '{surface.200}',
384
+ },
385
+ },
386
+ dark: {
387
+ root: {
388
+ borderColor: '{surface.700}',
389
+ },
390
+ header: {
391
+ background: '{surface.900}',
392
+ borderColor: '{surface.700}',
393
+ color: '{surface.100}',
394
+ },
395
+ headerCell: {
396
+ background: '{surface.900}',
397
+ hoverBackground: '{surface.800}',
398
+ selectedBackground: '{surface.800}',
399
+ borderColor: '{surface.700}',
400
+ color: '{surface.200}',
401
+ hoverColor: '{surface.0}',
402
+ selectedColor: '{surface.0}',
403
+ },
404
+ row: {
405
+ background: '{surface.950}',
406
+ hoverBackground: '{surface.900}',
407
+ selectedBackground: '{surface.800}',
408
+ color: '{surface.100}',
409
+ hoverColor: '{surface.0}',
410
+ selectedColor: '{surface.0}',
411
+ stripedBackground: '{surface.900}',
412
+ },
413
+ bodyCell: {
414
+ selectedBorderColor: '{surface.700}',
415
+ },
416
+ paginatorBottom: {
417
+ borderColor: '{surface.700}',
418
+ },
419
+ },
420
+ },
421
+ css: () => `
422
+ .p-datatable,
423
+ .p-datatable-table-container {
424
+ font-size: 0.875rem;
425
+ line-height: 1.25rem;
426
+ background: var(--p-surface-0);
427
+ }
428
+
429
+ .p-datatable-header {
430
+ background: var(--p-surface-0);
431
+ }
432
+
433
+ .p-datatable-table thead > tr > th {
434
+ font-size: 0.75rem;
435
+ letter-spacing: 0.04em;
436
+ }
437
+
438
+ .dark .p-datatable,
439
+ .dark .p-datatable-table-container,
440
+ .dark .p-datatable-header {
441
+ background: var(--p-surface-950);
442
+ }
443
+ `,
444
+ },
308
445
  paginator: {
309
446
  root: {
310
- borderRadius: '{border.radius.md}',
311
- padding: '0 .5rem',
447
+ background: '{surface.0}',
448
+ borderRadius: '{border.radius.xl}',
449
+ color: '{surface.600}',
450
+ gap: '0.125rem',
451
+ padding: '0.25rem',
312
452
  },
313
453
  navButton: {
314
- borderRadius: '0',
454
+ background: 'transparent',
455
+ borderRadius: '{border.radius.lg}',
456
+ color: '{surface.600}',
457
+ hoverBackground: '{surface.100}',
458
+ hoverColor: '{surface.700}',
459
+ selectedBackground: '{surface.100}',
460
+ selectedColor: '{surface.800}',
461
+ width: '2.5rem',
462
+ height: '2.5rem',
463
+ },
464
+ currentPageReport: {
465
+ color: '{surface.500}',
315
466
  },
316
467
  colorScheme: {
317
468
  light: {
469
+ root: {
470
+ background: '{surface.0}',
471
+ color: '{surface.600}',
472
+ },
318
473
  navButton: {
319
474
  color: '{surface.600}',
320
- hoverBackground: '#fff',
321
- selectedBackground: '{surface.200}',
322
- selectedColor: '{surface.600}',
475
+ hoverBackground: '{surface.100}',
476
+ hoverColor: '{surface.700}',
477
+ selectedBackground: '{surface.100}',
478
+ selectedColor: '{surface.800}',
323
479
  focusRing: {
324
- color: '{surface.200}',
480
+ color: '{surface.100}',
325
481
  },
326
482
  },
483
+ currentPageReport: {
484
+ color: '{surface.500}',
485
+ },
327
486
  },
328
487
  dark: {
488
+ root: {
489
+ background: '{surface.900}',
490
+ color: '{surface.200}',
491
+ },
329
492
  navButton: {
330
493
  color: '{surface.200}',
331
- hoverBackground: 'transparent',
332
- selectedBackground: 'transparent',
333
- selectedColor: '#fff',
494
+ hoverBackground: '{surface.800}',
495
+ hoverColor: '{surface.0}',
496
+ selectedBackground: '{surface.800}',
497
+ selectedColor: '{surface.0}',
334
498
  focusRing: {
335
- color: '#fff',
499
+ color: '{surface.700}',
336
500
  },
337
501
  },
502
+ currentPageReport: {
503
+ color: '{surface.400}',
504
+ },
338
505
  },
339
506
  },
340
- css: () => `
341
- .p-paginator {
342
- --p-paginator-gap: 0;
343
- --p-paginator-nav-button-width: 2.2rem;
344
- --p-paginator-nav-button-height: 2.2rem;
345
- width: fit-content;
346
- border: 1px solid var(--p-surface-200);
347
- overflow: hidden;
348
- font-size: .95rem;
349
- }
350
-
351
- .p-paginator-pages button,
352
- .p-paginator-prev,
353
- .p-paginator-next {
354
- border-color: var(--p-surface-200);
355
- }
356
-
357
- .p-paginator-pages button {
358
- border-style: solid;
359
- border-width: 0 0 0 1px;
360
- }
361
-
362
- .p-paginator-pages button:first-child {
363
- border-left: none;
364
- }
365
-
366
- .p-paginator-prev {
367
- border-right: 1px solid var(--p-surface-200);
368
- }
369
-
370
- .p-paginator-next {
371
- border-left: 1px solid var(--p-surface-200);
372
- }
373
-
374
- .p-paginator .p-select {
375
- border: 0;
376
- background: transparent;
377
- }
378
-
379
- .p-paginator .p-select .p-select-label {
380
- padding: 0;
381
- }
382
-
383
- /* Dark Mode Styles */
384
- .dark .p-paginator {
385
- border-color: var(--p-surface-500);
386
- }
387
-
388
- .dark .p-paginator-pages button,
389
- .dark .p-paginator-prev,
390
- .dark .p-paginator-next {
391
- border-color: var(--p-surface-500);
392
- }
393
-
394
- .dark .p-paginator-prev {
395
- border-right-color: var(--p-surface-500);
396
- }
397
-
398
- .dark .p-paginator-next {
399
- border-left-color: var(--p-surface-500);
400
- }
507
+ css: () => `
508
+ .p-paginator {
509
+ --p-paginator-gap: 0.125rem;
510
+ --p-paginator-nav-button-width: 2.5rem;
511
+ --p-paginator-nav-button-height: 2.5rem;
512
+ width: fit-content;
513
+ border: 1px solid var(--p-surface-200);
514
+ background: var(--p-surface-0);
515
+ box-shadow: 0 1px 2px color-mix(in srgb, var(--p-surface-950) 8%, transparent);
516
+ overflow: hidden;
517
+ font-size: 0.875rem;
518
+ line-height: 1.25rem;
519
+ }
520
+
521
+ .p-paginator .p-paginator-pages {
522
+ gap: 0.125rem;
523
+ }
524
+
525
+ .p-paginator-pages button,
526
+ .p-paginator-prev,
527
+ .p-paginator-next {
528
+ border-color: var(--p-surface-200);
529
+ }
530
+
531
+ .p-paginator-pages button {
532
+ border-style: solid;
533
+ border-width: 0 0 0 1px;
534
+ }
535
+
536
+ .p-paginator-pages button:first-child {
537
+ border-left: none;
538
+ }
539
+
540
+ .p-paginator-prev {
541
+ border-right: 1px solid var(--p-surface-200);
542
+ }
543
+
544
+ .p-paginator-next {
545
+ border-left: 1px solid var(--p-surface-200);
546
+ }
547
+
548
+ .p-paginator .p-select {
549
+ border: 0;
550
+ background: transparent;
551
+ min-width: auto;
552
+ }
553
+
554
+ .p-paginator .p-select .p-select-label {
555
+ padding: 0;
556
+ }
557
+
558
+ .p-paginator .p-select-label,
559
+ .p-paginator .p-select-dropdown,
560
+ .p-paginator .p-paginator-current,
561
+ .p-paginator .p-paginator-rpp-label {
562
+ font-size: 0.875rem;
563
+ }
564
+
565
+ .p-paginator .p-paginator-prev > div,
566
+ .p-paginator .p-paginator-next > div {
567
+ gap: 0.5rem;
568
+ color: inherit;
569
+ }
570
+
571
+ /* Dark Mode Styles */
572
+ .dark .p-paginator {
573
+ border-color: var(--p-surface-700);
574
+ background: var(--p-surface-900);
575
+ box-shadow: none;
576
+ }
577
+
578
+ .dark .p-paginator-pages button,
579
+ .dark .p-paginator-prev,
580
+ .dark .p-paginator-next {
581
+ border-color: var(--p-surface-700);
582
+ }
583
+
584
+ .dark .p-paginator-prev {
585
+ border-right-color: var(--p-surface-700);
586
+ }
587
+
588
+ .dark .p-paginator-next {
589
+ border-left-color: var(--p-surface-700);
590
+ }
401
591
  `,
402
592
  },
403
593
  toggleswitch: {