@moises.ai/design-system 3.9.18 → 3.9.20

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 (5) hide show
  1. package/dist/index.js +2103 -2068
  2. package/package.json +1 -1
  3. package/src/components/SetlistList/SetlistList.module.css +2 -1
  4. package/src/components/Sidebar/Sidebar.jsx +70 -35
  5. package/src/components/Sidebar/Sidebar.module.css +11 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moises.ai/design-system",
3
- "version": "3.9.18",
3
+ "version": "3.9.20",
4
4
  "description": "Design System package based on @radix-ui/themes with custom defaults",
5
5
  "private": false,
6
6
  "type": "module",
package/src/components/SetlistList/SetlistList.module.css CHANGED
@@ -119,10 +119,11 @@
119
119
  }
120
120
 
121
121
  .textNewSetlist {
122
- max-width: 115px;
122
+ max-width: 126px;
123
123
  opacity: 1;
124
124
  transition: opacity 360ms ease-in-out;
125
125
  white-space: nowrap;
126
+ color: var(--neutral-alpha-11);
126
127
  }
127
128
 
128
129
  .collapsed .textNewSetlist {
package/src/components/Sidebar/Sidebar.jsx CHANGED
@@ -66,16 +66,14 @@ export const Sidebar = ({
66
66
  [styles.logoInContainerHidden]: effectiveCollapsed && isHovered,
67
67
  })}
68
68
  />
69
- <Tooltip content={tooltip} side="right" sideOffset={15}>
70
- <SidebarLeftIcon
71
- width={16}
72
- height={16}
73
- className={classNames(styles.toggleInContainer, {
74
- [styles.toggleInContainerVisible]:
75
- effectiveCollapsed && isHovered,
76
- })}
77
- />
78
- </Tooltip>
69
+ <SidebarLeftIcon
70
+ width={16}
71
+ height={16}
72
+ className={classNames(styles.toggleInContainer, {
73
+ [styles.toggleInContainerVisible]:
74
+ effectiveCollapsed && isHovered,
75
+ })}
76
+ />
79
77
  </div>
80
78
  <MoisesIcon
81
79
  height={12.269}
@@ -150,32 +148,69 @@ export const Sidebar = ({
150
148
  onMouseEnter={handleMouseEnter}
151
149
  onMouseLeave={handleMouseLeave}
152
150
  >
153
- <Flex
154
- align="center"
155
- justify="between"
156
- className={classNames(styles.header, {
157
- [styles.headerCollapsed]: effectiveCollapsed,
158
- })}
159
- >
160
- <Flex
161
- align="center"
162
- gap="2"
163
- onClick={handleLogoClick}
164
- style={{ cursor: 'pointer' }}
165
- >
166
- {logoContent}
167
- </Flex>
168
- <Flex
169
- align="center"
170
- justify="center"
171
- onClick={handleToggleCollapse}
172
- className={classNames(styles.toggleButton, {
173
- [styles.toggleButtonHidden]: effectiveCollapsed,
174
- })}
175
- >
176
- <SidebarLeftIcon width={16} height={16} />
151
+ {effectiveCollapsed ? (
152
+ <div className={styles.headerWrapper}>
153
+ <Tooltip content={tooltip} side="right" sideOffset={5} align="center" alignOffset={0}>
154
+ <div className={styles.tooltipTriggerWrapper}>
155
+ <Flex
156
+ align="center"
157
+ justify="between"
158
+ className={classNames(styles.header, {
159
+ [styles.headerCollapsed]: effectiveCollapsed,
160
+ })}
161
+ >
162
+ <Flex
163
+ align="center"
164
+ gap="2"
165
+ onClick={handleLogoClick}
166
+ style={{ cursor: 'pointer' }}
167
+ >
168
+ {logoContent}
169
+ </Flex>
170
+ <Flex
171
+ align="center"
172
+ justify="center"
173
+ onClick={handleToggleCollapse}
174
+ className={classNames(styles.toggleButton, {
175
+ [styles.toggleButtonHidden]: effectiveCollapsed,
176
+ })}
177
+ >
178
+ <SidebarLeftIcon width={16} height={16} />
179
+ </Flex>
180
+ </Flex>
181
+ </div>
182
+ </Tooltip>
183
+ </div>
184
+ ) : (
185
+ <div className={styles.headerWrapper}>
186
+ <Flex
187
+ align="center"
188
+ justify="between"
189
+ className={classNames(styles.header, {
190
+ [styles.headerCollapsed]: effectiveCollapsed,
191
+ })}
192
+ >
193
+ <Flex
194
+ align="center"
195
+ gap="2"
196
+ onClick={handleLogoClick}
197
+ style={{ cursor: 'pointer' }}
198
+ >
199
+ {logoContent}
200
+ </Flex>
201
+ <Flex
202
+ align="center"
203
+ justify="center"
204
+ onClick={handleToggleCollapse}
205
+ className={classNames(styles.toggleButton, {
206
+ [styles.toggleButtonHidden]: effectiveCollapsed,
207
+ })}
208
+ >
209
+ <SidebarLeftIcon width={16} height={16} />
210
+ </Flex>
177
211
  </Flex>
178
- </Flex>
212
+ </div>
213
+ )}
179
214
  <Flex direction="column" className={styles.content}>
180
215
  {children}
181
216
  </Flex>
package/src/components/Sidebar/Sidebar.module.css CHANGED
@@ -3,6 +3,11 @@
3
3
  width: 100%;
4
4
  }
5
5
 
6
+ .tooltipTriggerWrapper {
7
+ display: block;
8
+ width: 100%;
9
+ }
10
+
6
11
  .root {
7
12
  background-color: var(--neutral-1);
8
13
  width: 240px;
@@ -81,11 +86,13 @@
81
86
  opacity: 0;
82
87
  pointer-events: none;
83
88
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
89
+
84
90
  }
85
91
 
86
92
  .toggleInContainerVisible {
87
93
  opacity: 1;
88
94
  pointer-events: auto;
95
+ padding: 4px
89
96
  }
90
97
 
91
98
  .toggleButton {
@@ -240,12 +247,15 @@
240
247
  align-items: center;
241
248
  }
242
249
 
250
+ .headerWrapper {
251
+ margin-top: 18px;
252
+ }
253
+
243
254
  .header {
244
255
  display: flex;
245
256
  align-items: center;
246
257
  justify-content: space-between;
247
258
  padding: 24px;
248
- margin-top: 18px;
249
259
  height: 48px;
250
260
  transition: padding 280ms cubic-bezier(0.4, 0, 0.2, 1);
251
261
  }