@moises.ai/design-system 3.6.2 → 3.6.4
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.
- package/dist/index.js +3415 -3328
- package/package.json +1 -1
- package/src/components/SetlistList/SetlistList.jsx +75 -48
- package/src/components/SetlistList/SetlistList.module.css +37 -5
- package/src/components/SetlistList/SetlistList.stories.jsx +164 -60
- package/src/components/Tooltip/Tooltip.jsx +67 -0
- package/src/components/Tooltip/Tooltip.module.css +129 -0
- package/src/components/Tooltip/Tooltip.stories.jsx +59 -0
- package/src/index.jsx +2 -3
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
.TooltipContent {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
gap: 8px;
|
|
5
|
+
padding: 6px 12px;
|
|
6
|
+
text-align: center;
|
|
7
|
+
font-family: var(--Typography-Font-family-text, "Articulat CF");
|
|
8
|
+
font-size: var(--Typography-Font-size-1, 12px);
|
|
9
|
+
font-style: normal;
|
|
10
|
+
font-weight: 400;
|
|
11
|
+
line-height: var(--Typography-Line-height-1, 16px);
|
|
12
|
+
letter-spacing: var(--Typography-Letter-spacing-1, 0.04px);
|
|
13
|
+
z-index: 9999;
|
|
14
|
+
animation-duration: 0.15s;
|
|
15
|
+
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
16
|
+
will-change: transform, opacity;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.TooltipContent[data-state='delayed-open'][data-side='top'] {
|
|
20
|
+
animation-name: slideDownAndFade;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.TooltipContent[data-state='delayed-open'][data-side='right'] {
|
|
24
|
+
animation-name: slideLeftAndFade;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
|
|
28
|
+
animation-name: slideUpAndFade;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.TooltipContent[data-state='delayed-open'][data-side='left'] {
|
|
32
|
+
animation-name: slideRightAndFade;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@keyframes slideUpAndFade {
|
|
36
|
+
from {
|
|
37
|
+
opacity: 0;
|
|
38
|
+
transform: translateY(2px);
|
|
39
|
+
}
|
|
40
|
+
to {
|
|
41
|
+
opacity: 1;
|
|
42
|
+
transform: translateY(0);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@keyframes slideRightAndFade {
|
|
47
|
+
from {
|
|
48
|
+
opacity: 0;
|
|
49
|
+
transform: translateX(-2px);
|
|
50
|
+
}
|
|
51
|
+
to {
|
|
52
|
+
opacity: 1;
|
|
53
|
+
transform: translateX(0);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@keyframes slideDownAndFade {
|
|
58
|
+
from {
|
|
59
|
+
opacity: 0;
|
|
60
|
+
transform: translateY(-2px);
|
|
61
|
+
}
|
|
62
|
+
to {
|
|
63
|
+
opacity: 1;
|
|
64
|
+
transform: translateY(0);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@keyframes slideLeftAndFade {
|
|
69
|
+
from {
|
|
70
|
+
opacity: 0;
|
|
71
|
+
transform: translateX(2px);
|
|
72
|
+
}
|
|
73
|
+
to {
|
|
74
|
+
opacity: 1;
|
|
75
|
+
transform: translateX(0);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* White variant */
|
|
80
|
+
.TooltipContent--white {
|
|
81
|
+
border-radius: var(--Radius-1, 3px);
|
|
82
|
+
background: var(--Colors-Neutral-Neutral-12, #EDEEF0);
|
|
83
|
+
color: var(--Colors-Neutral-Neutral-1, #111113);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Gray variant */
|
|
87
|
+
.TooltipContent--gray {
|
|
88
|
+
border-radius: var(--Radius-1, 3px);
|
|
89
|
+
background: var(--Colors-Neutral-Neutral-4, #272A2D);
|
|
90
|
+
color: var(--Colors-Neutral-Neutral-Alpha-12, rgba(252, 253, 255, 0.94));
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.TooltipText {
|
|
94
|
+
white-space: nowrap;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.TooltipShortcut {
|
|
98
|
+
font-family: var(--Typography-Font-family-text, "Articulat CF");
|
|
99
|
+
font-size: var(--Typography-Font-size-0, 11px);
|
|
100
|
+
font-style: normal;
|
|
101
|
+
font-weight: 400;
|
|
102
|
+
line-height: var(--Typography-Line-height-0, 11px);
|
|
103
|
+
letter-spacing: var(--Typography-Letter-spacing-0, 0);
|
|
104
|
+
white-space: nowrap;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* White shortcut */
|
|
108
|
+
.TooltipShortcut--white {
|
|
109
|
+
color: var(--Colors-Neutral-Neutral-8, #5A6169);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Gray shortcut */
|
|
113
|
+
.TooltipShortcut--gray {
|
|
114
|
+
color: var(--Colors-Neutral-Neutral-Alpha-10, rgba(229, 237, 253, 0.48));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.TooltipArrow {
|
|
118
|
+
fill: var(--Colors-Neutral-Neutral-4, #272A2D);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.TooltipContent--white .TooltipArrow {
|
|
122
|
+
fill: var(--Colors-Neutral-Neutral-12, #EDEEF0);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.TooltipContent {
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
gap: 0px;
|
|
129
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { Tooltip } from './Tooltip'
|
|
2
|
+
import { Button } from '../Button/Button'
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Components/Tooltip',
|
|
6
|
+
component: Tooltip,
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: 'centered',
|
|
9
|
+
},
|
|
10
|
+
tags: ['autodocs'],
|
|
11
|
+
argTypes: {
|
|
12
|
+
color: {
|
|
13
|
+
control: 'select',
|
|
14
|
+
options: ['white', 'gray'],
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export const Default = {
|
|
20
|
+
args: {
|
|
21
|
+
content: 'Tooltip',
|
|
22
|
+
color: 'gray',
|
|
23
|
+
children: <Button>Hover me</Button>,
|
|
24
|
+
},
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export const GrayVariant = {
|
|
28
|
+
args: {
|
|
29
|
+
content: 'Tooltip',
|
|
30
|
+
color: 'gray',
|
|
31
|
+
children: <Button>Hover me</Button>,
|
|
32
|
+
},
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export const WhiteVariant = {
|
|
36
|
+
args: {
|
|
37
|
+
content: 'Tooltip',
|
|
38
|
+
color: 'white',
|
|
39
|
+
children: <Button>Hover me</Button>,
|
|
40
|
+
},
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export const WithShortcutGray = {
|
|
44
|
+
args: {
|
|
45
|
+
content: 'Tooltip',
|
|
46
|
+
shortcut: '⌘ C',
|
|
47
|
+
color: 'gray',
|
|
48
|
+
children: <Button>Hover me</Button>,
|
|
49
|
+
},
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export const WithShortcutWhite = {
|
|
53
|
+
args: {
|
|
54
|
+
content: 'Tooltip',
|
|
55
|
+
shortcut: '⌘ C',
|
|
56
|
+
color: 'white',
|
|
57
|
+
children: <Button>Hover me</Button>,
|
|
58
|
+
},
|
|
59
|
+
}
|
package/src/index.jsx
CHANGED
|
@@ -32,7 +32,6 @@ import {
|
|
|
32
32
|
Switch,
|
|
33
33
|
Table,
|
|
34
34
|
Tabs,
|
|
35
|
-
Tooltip,
|
|
36
35
|
VisuallyHidden,
|
|
37
36
|
DataList,
|
|
38
37
|
} from '@radix-ui/themes'
|
|
@@ -70,7 +69,6 @@ export {
|
|
|
70
69
|
Switch,
|
|
71
70
|
Table,
|
|
72
71
|
Tabs,
|
|
73
|
-
Tooltip,
|
|
74
72
|
VisuallyHidden,
|
|
75
73
|
DataList,
|
|
76
74
|
}
|
|
@@ -154,4 +152,5 @@ export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSe
|
|
|
154
152
|
export { Card as CardWidget } from './components/Card/Card'
|
|
155
153
|
export { ProjectsList } from './components/ProjectsList/ProjectsList'
|
|
156
154
|
|
|
157
|
-
export { MoreButton } from './components/MoreButton/MoreButton'
|
|
155
|
+
export { MoreButton } from './components/MoreButton/MoreButton'
|
|
156
|
+
export { Tooltip } from './components/Tooltip/Tooltip'
|