@ostack.tech/ui 0.4.0 → 0.5.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.
Files changed (37) hide show
  1. package/dist/locales/pt.js +1 -1
  2. package/dist/locales/pt.js.map +1 -1
  3. package/dist/ostack-ui.css +40 -10
  4. package/dist/ostack-ui.css.map +1 -1
  5. package/dist/ostack-ui.js +418 -49
  6. package/dist/ostack-ui.js.map +1 -1
  7. package/dist/types/components/DataTable/DataTable.d.ts +6 -0
  8. package/dist/types/components/DataTable/DataTableContext.d.ts +3 -1
  9. package/dist/types/components/Portal/Portal.d.ts +1 -1
  10. package/dist/types/components/Printer/Printer.d.ts +147 -0
  11. package/dist/types/components/Printer/PrinterContent.d.ts +22 -0
  12. package/dist/types/components/Printer/PrinterContentContext.d.ts +38 -0
  13. package/dist/types/components/Printer/PrinterContext.d.ts +30 -0
  14. package/dist/types/components/Printer/PrinterTrigger.d.ts +20 -0
  15. package/dist/types/components/Printer/index.d.ts +6 -0
  16. package/dist/types/components/Printer/usePrintClassNames.d.ts +5 -0
  17. package/dist/types/components/Select/SelectContext.d.ts +2 -4
  18. package/dist/types/components/Tabs/TabContent.d.ts +6 -1
  19. package/dist/types/components/Tabs/Tabs.d.ts +2 -0
  20. package/dist/types/components/Tabs/TabsContext.d.ts +15 -1
  21. package/dist/types/index.d.ts +1 -0
  22. package/dist/types/providers/AlertDialogProvider/useAlertDialog.d.ts +2 -2
  23. package/dist/types/providers/ToastManagerProvider/useToastManager.d.ts +1 -1
  24. package/dist/types/utils/cx.d.ts +1 -1
  25. package/dist/types/utils/keyboardShortcut.d.ts +7 -1
  26. package/dist/types/utils/useCssVars.d.ts +3 -3
  27. package/package.json +3 -2
  28. package/scss/components/Card/_Card.scss +5 -6
  29. package/scss/components/Field/_Field.scss +1 -0
  30. package/scss/components/Spinner/_Spinner-variables.scss +3 -1
  31. package/scss/components/Spinner/_Spinner.scss +10 -1
  32. package/scss/components/Table/_Table.scss +6 -0
  33. package/scss/components/Tabs/_Tabs-variables.scss +16 -0
  34. package/scss/components/Tabs/_Tabs.scss +22 -5
  35. package/scss/index.scss +1 -0
  36. package/scss/scss/helpers/_print-utils.scss +13 -0
  37. package/scss/scss/utils/_spinner.scss +11 -5
package/scss/components/Tabs/_Tabs.scss CHANGED
@@ -8,8 +8,7 @@
8
8
  @use "../../scss/utils/transition" as *;
9
9
 
10
10
  .#{$prefix}tabs {
11
- display: flex;
12
- flex-direction: column;
11
+ display: block;
13
12
  min-width: 0;
14
13
 
15
14
  @each $variant in $tabs-variants {
@@ -435,9 +434,27 @@
435
434
  }
436
435
  }
437
436
 
437
+ // Tab content label (print only)
438
+ &__tab-content-label {
439
+ display: inline-flex;
440
+
441
+ margin-bottom: $tabs-tab-content-label-margin-bottom;
442
+ padding: $tabs-tab-content-label-padding-y $tabs-tab-content-label-padding-x;
443
+ border-bottom: $tabs-tab-content-label-border-bottom;
444
+ font-size: $tabs-tab-content-label-font-size;
445
+ line-height: $tabs-tab-content-label-line-height;
446
+ font-weight: $tabs-tab-content-label-font-weight;
447
+ }
448
+
438
449
  // Tab content
439
- &__tab-content:focus-visible {
440
- outline: $tabs-tab-content-focus-outline-width solid
441
- $tabs-tab-content-focus-outline-color;
450
+ &__tab-content {
451
+ &:focus-visible {
452
+ outline: $tabs-tab-content-focus-outline-width solid
453
+ $tabs-tab-content-focus-outline-color;
454
+ }
455
+
456
+ & + .#{$prefix}tabs__tab-content-label {
457
+ margin-top: $tabs-tab-content-gap-y;
458
+ }
442
459
  }
443
460
  }
package/scss/index.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @forward "utils";
2
2
 
3
3
  // Helpers
4
+ @forward "scss/helpers/print-utils";
4
5
  @forward "scss/helpers/visually-hidden";
5
6
 
6
7
  // Components
package/scss/scss/helpers/_print-utils.scss ADDED
@@ -0,0 +1,13 @@
1
+ @use "../../scss/base-variables" as *;
2
+
3
+ @media print {
4
+ .#{$prefix}print-hidden {
5
+ display: none !important;
6
+ }
7
+ }
8
+
9
+ @media not print {
10
+ .#{$prefix}print-only {
11
+ display: none !important;
12
+ }
13
+ }
package/scss/scss/utils/_spinner.scss CHANGED
@@ -1,6 +1,9 @@
1
1
  @use "../base-variables" as *;
2
2
  @use "animation" as *;
3
3
 
4
+ $spinner-track-color: var(--#{$prefix}neutral-a5) !default;
5
+ $spinner-indicator-color: currentColor !default;
6
+ $spinner-indicator-side: top !default;
4
7
  $spinner-size: 1em !default;
5
8
  $spinner-border-width: clamp(1px, 0.15em, 6px) !default;
6
9
  $spinner-animation-speed: 0.75s !default;
@@ -14,17 +17,20 @@ $spinner-reduced-animation-speed: $spinner-animation-speed * 2 !default;
14
17
  width: $spinner-size;
15
18
  height: $spinner-size;
16
19
  border-radius: 50%;
17
- border: $spinner-border-width solid currentColor;
18
- border-right-color: transparent;
19
- animation: $spinner-animation-speed linear infinite #{$prefix}spinner-rotate;
20
+ border: $spinner-border-width solid
21
+ var(--#{$prefix}spinner-track-color, $spinner-track-color);
22
+ border-#{$spinner-indicator-side}-color: var(
23
+ --#{$prefix}spinner-indicator-color,
24
+ $spinner-indicator-color
25
+ );
26
+ animation: $spinner-animation-speed linear infinite #{$prefix}spinner-spin;
20
27
 
21
- // Spin animation
22
28
  @media (prefers-reduced-motion: reduce) {
23
29
  animation-duration: $spinner-reduced-animation-speed;
24
30
  }
25
31
  }
26
32
 
27
- @keyframes #{$prefix}spinner-rotate {
33
+ @keyframes #{$prefix}spinner-spin {
28
34
  to {
29
35
  transform: rotate(360deg);
30
36
  }