@muraldevkit/ui-toolkit 2.32.0 → 2.33.1

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 (26) hide show
  1. package/dist/components/index.d.ts +1 -0
  2. package/dist/components/menu/MrlMenu/utilities.d.ts +0 -14
  3. package/dist/components/svg/config.d.ts +1 -1
  4. package/dist/components/tabs/MrlTab/MrlTab.d.ts +21 -0
  5. package/dist/components/tabs/MrlTab/index.d.ts +1 -0
  6. package/dist/components/tabs/MrlTabContent/MrlTabContent.d.ts +9 -0
  7. package/dist/components/tabs/MrlTabContent/index.d.ts +1 -0
  8. package/dist/components/tabs/MrlTabGroup/MrlTabGroup.d.ts +10 -0
  9. package/dist/components/tabs/MrlTabGroup/index.d.ts +1 -0
  10. package/dist/components/tabs/MrlTabs/MrlTabs.d.ts +21 -0
  11. package/dist/components/tabs/MrlTabs/index.d.ts +1 -0
  12. package/dist/components/tabs/constants.d.ts +1 -0
  13. package/dist/components/tabs/index.d.ts +4 -0
  14. package/dist/contexts/MrlTabContext/MrlTabContext.d.ts +6 -0
  15. package/dist/contexts/MrlTabContext/index.d.ts +1 -0
  16. package/dist/contexts/index.d.ts +1 -0
  17. package/dist/index.js +1 -1
  18. package/dist/styles/MrlTab/module.scss +115 -0
  19. package/dist/styles/MrlTabContent/module.scss +7 -0
  20. package/dist/styles/MrlTabGroup/module.scss +68 -0
  21. package/dist/utils/findInteractiveElement/findInteractiveElement.d.ts +8 -0
  22. package/dist/utils/findInteractiveElement/index.d.ts +1 -0
  23. package/dist/utils/index.d.ts +2 -0
  24. package/dist/utils/preventDefault/index.d.ts +1 -0
  25. package/dist/utils/preventDefault/preventDefault.d.ts +6 -0
  26. package/package.json +2 -2
package/dist/styles/MrlTab/module.scss ADDED
@@ -0,0 +1,115 @@
1
+ @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
2
+ .MrlTab-Text {
3
+ border-bottom: var(--mrl-line-width-control) solid transparent;
4
+ display: block;
5
+ line-height: var(--mrl-line-height-08);
6
+ margin: 0;
7
+ padding: var(--mrl-space-stack-related-small) var(--mrl-space-stack-related) var(--mrl-spacing-01);
8
+ position: relative;
9
+ text-wrap: nowrap;
10
+ z-index: 5;
11
+ }
12
+ .MrlTab-icon {
13
+ display: block;
14
+ height: var(--mrl-spacing-07);
15
+ margin: var(--mrl-spacing-01) auto;
16
+ overflow: hidden;
17
+ width: var(--mrl-spacing-07);
18
+ }
19
+ .MrlTab {
20
+ background-color: transparent;
21
+ border: none;
22
+ color: var(--mrl-color-text-emph);
23
+ display: inline-block;
24
+ font-family: var(--mrl-heading-font);
25
+ font-size: var(--mrl-font-size-01);
26
+ font-weight: var(--mrl-font-weight-02);
27
+ letter-spacing: var(--mrl-letter-spacing-04);
28
+ line-height: var(--mrl-line-height-08);
29
+ margin-left: var(--mrl-spacing-03);
30
+ padding: 0;
31
+ position: relative;
32
+ vertical-align: bottom;
33
+ &:first-child {
34
+ margin-left: 0;
35
+ }
36
+ &:not(.MrlTab-selected) .MrlTab-icon {
37
+ opacity: 0.8;
38
+ }
39
+ &:hover {
40
+ color: var(--mrl-color-text-hover);
41
+ .MrlTab-icon {
42
+ opacity: 1;
43
+ }
44
+ .MrlTab-Text {
45
+ border-bottom-color: var(--mrl-color-text-emph-hover);
46
+ }
47
+ }
48
+ &:active {
49
+ color: var(--mrl-color-text-active);
50
+ .MrlTab-icon {
51
+ opacity: 1;
52
+ }
53
+ }
54
+ &:focus-visible {
55
+ background-color: var(--mrl-color-background);
56
+ border-color: transparent;
57
+ outline: none;
58
+ &::after {
59
+ @include mrl-focus-pseudo-element;
60
+ border-radius: var(--mrl-border-radius-content-large);
61
+ }
62
+ .MrlTab-Text {
63
+ border-color: var(--mrl-color-line-emph);
64
+ }
65
+ &:hover .MrlTab-Text {
66
+ border-bottom-color: var(--mrl-color-text-emph-hover);
67
+ }
68
+ }
69
+ }
70
+ .MrlTab-selected {
71
+ .MrlTab-Text {
72
+ border-bottom-color: var(--mrl-color-text-emph-selected);
73
+ color: var(--mrl-color-text-emph-selected);
74
+ }
75
+ &:hover {
76
+ .MrlTab-Text {
77
+ border-bottom-color: var(--mrl-color-text-emph-selected);
78
+ color: var(--mrl-color-text-emph-selected);
79
+ }
80
+ }
81
+ &:focus-visible {
82
+ .MrlTab-Text {
83
+ border-bottom-color: var(--mrl-color-text-emph-selected);
84
+ }
85
+ &:hover {
86
+ .MrlTab-Text {
87
+ border-bottom-color: var(--mrl-color-text-emph-selected);
88
+ }
89
+ }
90
+ }
91
+ }
92
+ :global(.MrlTabs-caps) {
93
+ .MrlTab {
94
+ text-transform: capitalize;
95
+ }
96
+ }
97
+ :global(.MrlTabs-large) {
98
+ .MrlTab {
99
+ font-size: var(--mrl-font-size-03);
100
+ line-height: var(--mrl-line-height-07);
101
+ padding-top: var(--mrl-spacing-01);
102
+ }
103
+ .MrlTab-Text {
104
+ padding-bottom: var(--mrl-space-stack-related-small);
105
+ }
106
+ .MrlTab-icon {
107
+ margin-bottom: 0;
108
+ margin-top: 0;
109
+ }
110
+ }
111
+ :global(.MrlTabs-evenSpacing) {
112
+ .MrlTab {
113
+ flex: 1;
114
+ }
115
+ }
package/dist/styles/MrlTabContent/module.scss ADDED
@@ -0,0 +1,7 @@
1
+ .MrlTabContent {
2
+ display: block;
3
+ padding: var(--mrl-spacing-05) 0 0;
4
+ &-hidden {
5
+ display: none;
6
+ }
7
+ }
package/dist/styles/MrlTabGroup/module.scss ADDED
@@ -0,0 +1,68 @@
1
+ $zindex-container-base: 5;
2
+ $zindex-navigation-buttons: $zindex-container-base + 1;
3
+ .MrlTabGroup-container {
4
+ display: flex;
5
+ overflow: hidden;
6
+ padding: 4px;
7
+ position: relative;
8
+ z-index: $zindex-container-base;
9
+ &::after {
10
+ background-color: var(--mrl-color-background-decorative);
11
+ bottom: 4px;
12
+ content: '';
13
+ height: var(--mrl-line-width-control);
14
+ left: -4px;
15
+ position: absolute;
16
+ right: -4px;
17
+ z-index: -1;
18
+ }
19
+ }
20
+ .MrlTabGroup {
21
+ display: inline-flex;
22
+ position: relative;
23
+ transform: translateX(0);
24
+ width: 100%;
25
+ @media (prefers-reduced-motion: no-preference) {
26
+ transition: 0.3s ease-in-out;
27
+ }
28
+ }
29
+ .MrlTabGroup-fade {
30
+ bottom: 6px;
31
+ position: absolute;
32
+ top: 0;
33
+ width: 3.4375rem;
34
+ }
35
+ .MrlTabGroup-fadeNext {
36
+ background: linear-gradient(
37
+ to right,
38
+ rgba(var(--mrl-white), 0) 0%,
39
+ rgba(var(--mrl-white), 0.4) 20%,
40
+ rgba(var(--mrl-white), 0.6) 30%,
41
+ var(--mrl-color-background) 60%
42
+ );
43
+ right: 0;
44
+ }
45
+ .MrlTabGroup-fadePrev {
46
+ background: linear-gradient(
47
+ to left,
48
+ rgba(var(--mrl-white), 0) 0%,
49
+ rgba(var(--mrl-white), 0.4) 20%,
50
+ rgba(var(--mrl-white), 0.6) 30%,
51
+ rgba(var(--mrl-white), 1) 60%
52
+ );
53
+ left: 0;
54
+ }
55
+ .MrlTabGroup-nav {
56
+ align-items: center;
57
+ bottom: 0;
58
+ display: flex;
59
+ position: absolute;
60
+ top: 0;
61
+ z-index: $zindex-navigation-buttons;
62
+ }
63
+ .MrlTabGroup-next {
64
+ right: 0;
65
+ }
66
+ .MrlTabGroup-prev {
67
+ left: 0;
68
+ }
package/dist/utils/findInteractiveElement/findInteractiveElement.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Find the interactive element immediately before or after a reference element
3
+ *
4
+ * @param ref - The reference element
5
+ * @param direction - The direction to search in
6
+ * @returns The interactive element or null if none is found
7
+ */
8
+ export declare const findInteractiveElement: (ref: React.RefObject<HTMLElement> | undefined, direction?: 'next' | 'previous') => HTMLElement | null;
package/dist/utils/findInteractiveElement/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './findInteractiveElement';
package/dist/utils/index.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  export * from './commonProps';
2
+ export * from './findInteractiveElement';
2
3
  export * from './getCamelCase';
3
4
  export * from './isObject';
4
5
  export * from './setAttributes';
5
6
  export * from './noop';
7
+ export * from './preventDefault';
6
8
  export * from './trapFocus';
7
9
  export * from './scrollToElementWithLabel';
package/dist/utils/preventDefault/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './preventDefault';
package/dist/utils/preventDefault/preventDefault.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Prevent default on event
3
+ *
4
+ * @param e - The event
5
+ */
6
+ export declare const preventDefault: (e: React.MouseEvent | React.KeyboardEvent | MouseEvent | KeyboardEvent) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "2.32.0",
3
+ "version": "2.33.1",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -58,7 +58,7 @@
58
58
  "@babel/preset-env": "7.21.4",
59
59
  "@babel/preset-react": "7.18.6",
60
60
  "@babel/preset-typescript": "7.21.4",
61
- "@muraldevkit/ds-foundation": "2.4.0",
61
+ "@muraldevkit/ds-foundation": "2.4.1",
62
62
  "@muraldevkit/ds-icons": "3.0.1",
63
63
  "@storybook/addon-a11y": "7.0.26",
64
64
  "@storybook/addon-docs": "7.0.26",