@insymetri/styleguide 0.1.51 → 0.1.52
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/IIDropdownInput/IIDropdownInput.svelte +3 -1
- package/dist/IIDropdownMenu/IIDropdownMenu.svelte +3 -1
- package/dist/style/tailwind/animations.d.ts +174 -0
- package/dist/style/tailwind/preset.d.ts +643 -0
- package/dist/utils/menu/menu-styles.d.ts +3 -3
- package/dist/utils/menu/menu-styles.js +3 -3
- package/dist/utils/menu/use-click-outside.d.ts +1 -0
- package/dist/utils/menu/use-click-outside.js +6 -1
- package/dist/utils/menu/use-floating.svelte.js +4 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import {tick} from 'svelte'
|
|
3
3
|
import type {Snippet} from 'svelte'
|
|
4
|
+
import {fly} from 'svelte/transition'
|
|
4
5
|
import {IIIcon} from '../IIIcon'
|
|
5
6
|
import {cn} from '../utils/cn'
|
|
6
7
|
import {useDensity} from '../density'
|
|
@@ -256,13 +257,14 @@
|
|
|
256
257
|
</button>
|
|
257
258
|
|
|
258
259
|
{#if open}
|
|
259
|
-
<div use:portal use:clickOutside={{onClose: close}}>
|
|
260
|
+
<div use:portal use:clickOutside={{onClose: close, ignore: () => triggerEl}}>
|
|
260
261
|
<div
|
|
261
262
|
bind:this={floatingEl}
|
|
262
263
|
role="listbox"
|
|
263
264
|
data-menu-content
|
|
264
265
|
class="min-w-100 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 outline-none"
|
|
265
266
|
onkeydown={handleListKeydown}
|
|
267
|
+
transition:fly={{y: 4, duration: 150}}
|
|
266
268
|
>
|
|
267
269
|
{#if searchable}
|
|
268
270
|
<MenuSearchInput
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type {Snippet} from 'svelte'
|
|
3
|
+
import {fly} from 'svelte/transition'
|
|
3
4
|
import {cn} from '../utils/cn'
|
|
4
5
|
import {IIIcon} from '../IIIcon'
|
|
5
6
|
import {createMenuSearch, isItem, isGroup, isSub, isSeparator, menuStyles, menuItemClass, type MenuItem, type MenuEntry, type SubEntry} from '../utils/menu'
|
|
@@ -308,13 +309,14 @@
|
|
|
308
309
|
</button>
|
|
309
310
|
|
|
310
311
|
{#if open}
|
|
311
|
-
<div use:portal use:clickOutside={{onClose: close}}>
|
|
312
|
+
<div use:portal use:clickOutside={{onClose: close, ignore: () => triggerEl}}>
|
|
312
313
|
<div
|
|
313
314
|
bind:this={floatingEl}
|
|
314
315
|
role="menu"
|
|
315
316
|
data-menu-content
|
|
316
317
|
class={cn(menuStyles.content, className)}
|
|
317
318
|
onkeydown={handleMenuKeydown}
|
|
319
|
+
transition:fly={{y: 4, duration: 150}}
|
|
318
320
|
>
|
|
319
321
|
{#if searchable}
|
|
320
322
|
<MenuSearchInput
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
export declare const keyframes: {
|
|
2
|
+
loginFadeInUp: {
|
|
3
|
+
from: {
|
|
4
|
+
opacity: string;
|
|
5
|
+
transform: string;
|
|
6
|
+
};
|
|
7
|
+
to: {
|
|
8
|
+
opacity: string;
|
|
9
|
+
transform: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
loginPulse: {
|
|
13
|
+
'0%, 100%': {
|
|
14
|
+
opacity: string;
|
|
15
|
+
};
|
|
16
|
+
'50%': {
|
|
17
|
+
opacity: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
loginOrbit: {
|
|
21
|
+
'0%': {
|
|
22
|
+
transform: string;
|
|
23
|
+
};
|
|
24
|
+
'100%': {
|
|
25
|
+
transform: string;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
modalIn: {
|
|
29
|
+
from: {
|
|
30
|
+
opacity: string;
|
|
31
|
+
transform: string;
|
|
32
|
+
};
|
|
33
|
+
to: {
|
|
34
|
+
opacity: string;
|
|
35
|
+
transform: string;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
spin: {
|
|
39
|
+
to: {
|
|
40
|
+
transform: string;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
fadeIn: {
|
|
44
|
+
from: {
|
|
45
|
+
opacity: string;
|
|
46
|
+
};
|
|
47
|
+
to: {
|
|
48
|
+
opacity: string;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
scaleIn: {
|
|
52
|
+
from: {
|
|
53
|
+
opacity: string;
|
|
54
|
+
transform: string;
|
|
55
|
+
};
|
|
56
|
+
to: {
|
|
57
|
+
opacity: string;
|
|
58
|
+
transform: string;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
slideIn: {
|
|
62
|
+
from: {
|
|
63
|
+
opacity: string;
|
|
64
|
+
transform: string;
|
|
65
|
+
};
|
|
66
|
+
to: {
|
|
67
|
+
opacity: string;
|
|
68
|
+
transform: string;
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
shake: {
|
|
72
|
+
'0%, 100%': {
|
|
73
|
+
transform: string;
|
|
74
|
+
};
|
|
75
|
+
'20%, 60%': {
|
|
76
|
+
transform: string;
|
|
77
|
+
};
|
|
78
|
+
'40%, 80%': {
|
|
79
|
+
transform: string;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
shimmer: {
|
|
83
|
+
'0%': {
|
|
84
|
+
backgroundPosition: string;
|
|
85
|
+
};
|
|
86
|
+
'100%': {
|
|
87
|
+
backgroundPosition: string;
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
'skeleton-loading': {
|
|
91
|
+
'0%': {
|
|
92
|
+
opacity: string;
|
|
93
|
+
};
|
|
94
|
+
'50%': {
|
|
95
|
+
opacity: string;
|
|
96
|
+
};
|
|
97
|
+
'100%': {
|
|
98
|
+
opacity: string;
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
commandPaletteSlideIn: {
|
|
102
|
+
from: {
|
|
103
|
+
opacity: string;
|
|
104
|
+
transform: string;
|
|
105
|
+
};
|
|
106
|
+
to: {
|
|
107
|
+
opacity: string;
|
|
108
|
+
transform: string;
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
ring: {
|
|
112
|
+
'0%, 100%': {
|
|
113
|
+
transform: string;
|
|
114
|
+
};
|
|
115
|
+
'10%, 30%': {
|
|
116
|
+
transform: string;
|
|
117
|
+
};
|
|
118
|
+
'20%': {
|
|
119
|
+
transform: string;
|
|
120
|
+
};
|
|
121
|
+
'40%': {
|
|
122
|
+
transform: string;
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
rowFadeIn: {
|
|
126
|
+
from: {
|
|
127
|
+
opacity: string;
|
|
128
|
+
transform: string;
|
|
129
|
+
};
|
|
130
|
+
to: {
|
|
131
|
+
opacity: string;
|
|
132
|
+
transform: string;
|
|
133
|
+
};
|
|
134
|
+
};
|
|
135
|
+
modalOut: {
|
|
136
|
+
from: {
|
|
137
|
+
opacity: string;
|
|
138
|
+
transform: string;
|
|
139
|
+
};
|
|
140
|
+
to: {
|
|
141
|
+
opacity: string;
|
|
142
|
+
transform: string;
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
fadeOut: {
|
|
146
|
+
from: {
|
|
147
|
+
opacity: string;
|
|
148
|
+
};
|
|
149
|
+
to: {
|
|
150
|
+
opacity: string;
|
|
151
|
+
};
|
|
152
|
+
};
|
|
153
|
+
};
|
|
154
|
+
export declare const animation: {
|
|
155
|
+
spin: string;
|
|
156
|
+
'fade-in': string;
|
|
157
|
+
'scale-in': string;
|
|
158
|
+
'slide-in': string;
|
|
159
|
+
shake: string;
|
|
160
|
+
shimmer: string;
|
|
161
|
+
skeleton: string;
|
|
162
|
+
'modal-in': string;
|
|
163
|
+
'modal-out': string;
|
|
164
|
+
'fade-out': string;
|
|
165
|
+
'login-fade-in-up': string;
|
|
166
|
+
'login-pulse': string;
|
|
167
|
+
'login-orbit': string;
|
|
168
|
+
ring: string;
|
|
169
|
+
pulse: string;
|
|
170
|
+
'pulse-slow': string;
|
|
171
|
+
'row-fade-in': string;
|
|
172
|
+
};
|
|
173
|
+
export declare const loadingSkeletonsPlugin: import("tailwindcss/plugin").PluginWithConfig;
|
|
174
|
+
export declare const patternsPlugin: import("tailwindcss/plugin").PluginWithConfig;
|
|
@@ -0,0 +1,643 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
plugins: import("tailwindcss/plugin").PluginWithConfig[];
|
|
3
|
+
theme: {
|
|
4
|
+
backgroundColor: {
|
|
5
|
+
primary: string;
|
|
6
|
+
'primary-hover': string;
|
|
7
|
+
accent: string;
|
|
8
|
+
'accent-hover': string;
|
|
9
|
+
secondary: string;
|
|
10
|
+
'primary-2': string;
|
|
11
|
+
'primary-5': string;
|
|
12
|
+
'primary-8': string;
|
|
13
|
+
'primary-15': string;
|
|
14
|
+
'primary-20': string;
|
|
15
|
+
surface: string;
|
|
16
|
+
'surface-raised': string;
|
|
17
|
+
background: string;
|
|
18
|
+
'background-alt': string;
|
|
19
|
+
'background-l0': string;
|
|
20
|
+
'background-l1': string;
|
|
21
|
+
'background-l2': string;
|
|
22
|
+
'background-l3': string;
|
|
23
|
+
'background-l4': string;
|
|
24
|
+
muted: string;
|
|
25
|
+
disabled: string;
|
|
26
|
+
dark: string;
|
|
27
|
+
'dark-secondary': string;
|
|
28
|
+
success: string;
|
|
29
|
+
'success-bg': string;
|
|
30
|
+
'success-light': string;
|
|
31
|
+
'success-15': string;
|
|
32
|
+
'success-hover': string;
|
|
33
|
+
'success-dark': string;
|
|
34
|
+
'success-dark-alt': string;
|
|
35
|
+
warning: string;
|
|
36
|
+
'warning-bg': string;
|
|
37
|
+
error: string;
|
|
38
|
+
'error-bg': string;
|
|
39
|
+
'error-light': string;
|
|
40
|
+
'error-hover': string;
|
|
41
|
+
'error-dark': string;
|
|
42
|
+
info: string;
|
|
43
|
+
'info-bg': string;
|
|
44
|
+
client: string;
|
|
45
|
+
'client-light': string;
|
|
46
|
+
'client-15': string;
|
|
47
|
+
applicant: string;
|
|
48
|
+
'applicant-light': string;
|
|
49
|
+
'badge-grey': string;
|
|
50
|
+
'badge-blue': string;
|
|
51
|
+
'badge-red': string;
|
|
52
|
+
'badge-purple': string;
|
|
53
|
+
'badge-green': string;
|
|
54
|
+
'badge-orange': string;
|
|
55
|
+
'badge-cyan': string;
|
|
56
|
+
'badge-pink': string;
|
|
57
|
+
'badge-teal': string;
|
|
58
|
+
'badge-amber': string;
|
|
59
|
+
'badge-yellow': string;
|
|
60
|
+
'badge-green-border': string;
|
|
61
|
+
'input-bg': string;
|
|
62
|
+
'input-bg-disabled': string;
|
|
63
|
+
'dropdown-bg': string;
|
|
64
|
+
'dropdown-item-hover': string;
|
|
65
|
+
'dropdown-item-selected': string;
|
|
66
|
+
'button-primary': string;
|
|
67
|
+
'button-primary-hover': string;
|
|
68
|
+
'button-primary-disabled': string;
|
|
69
|
+
'button-secondary': string;
|
|
70
|
+
'button-ghost-hover': string;
|
|
71
|
+
'button-danger': string;
|
|
72
|
+
'button-danger-hover': string;
|
|
73
|
+
'button-danger-disabled': string;
|
|
74
|
+
'button-success': string;
|
|
75
|
+
'button-success-hover': string;
|
|
76
|
+
'button-success-disabled': string;
|
|
77
|
+
'button-accent': string;
|
|
78
|
+
'button-accent-hover': string;
|
|
79
|
+
'button-accent-disabled': string;
|
|
80
|
+
overlay: string;
|
|
81
|
+
'overlay-light': string;
|
|
82
|
+
'overlay-heavy': string;
|
|
83
|
+
'hover-overlay': string;
|
|
84
|
+
'subtle-bg': string;
|
|
85
|
+
'filter-bg': string;
|
|
86
|
+
'filter-remove': string;
|
|
87
|
+
'filter-remove-hover': string;
|
|
88
|
+
'tab-bg': string;
|
|
89
|
+
'tab-active': string;
|
|
90
|
+
'focus-primary': string;
|
|
91
|
+
'focus-error': string;
|
|
92
|
+
'focus-blue': string;
|
|
93
|
+
'email-bg': string;
|
|
94
|
+
'manual-bg': string;
|
|
95
|
+
'code-highlight': string;
|
|
96
|
+
'login-gradient-start': string;
|
|
97
|
+
'login-gradient-end': string;
|
|
98
|
+
'login-card': string;
|
|
99
|
+
'login-particle-link': string;
|
|
100
|
+
'inspector-bg': string;
|
|
101
|
+
'inspector-header': string;
|
|
102
|
+
white: string;
|
|
103
|
+
black: string;
|
|
104
|
+
transparent: string;
|
|
105
|
+
current: string;
|
|
106
|
+
'gray-50': string;
|
|
107
|
+
'gray-100': string;
|
|
108
|
+
'gray-200': string;
|
|
109
|
+
'gray-300': string;
|
|
110
|
+
'gray-400': string;
|
|
111
|
+
'gray-500': string;
|
|
112
|
+
'gray-600': string;
|
|
113
|
+
'gray-700': string;
|
|
114
|
+
'gray-800': string;
|
|
115
|
+
'gray-900': string;
|
|
116
|
+
};
|
|
117
|
+
textColor: {
|
|
118
|
+
primary: string;
|
|
119
|
+
'primary-hover': string;
|
|
120
|
+
'input-text': string;
|
|
121
|
+
'input-text-disabled': string;
|
|
122
|
+
'input-placeholder': string;
|
|
123
|
+
'dropdown-item': string;
|
|
124
|
+
'dropdown-item-selected': string;
|
|
125
|
+
body: string;
|
|
126
|
+
secondary: string;
|
|
127
|
+
tertiary: string;
|
|
128
|
+
inverse: string;
|
|
129
|
+
'on-primary': string;
|
|
130
|
+
'on-accent': string;
|
|
131
|
+
surface: string;
|
|
132
|
+
muted: string;
|
|
133
|
+
'muted-strong': string;
|
|
134
|
+
accent: string;
|
|
135
|
+
'accent-hover': string;
|
|
136
|
+
'button-primary': string;
|
|
137
|
+
'button-primary-disabled': string;
|
|
138
|
+
'button-secondary': string;
|
|
139
|
+
'button-secondary-hover': string;
|
|
140
|
+
'button-secondary-disabled': string;
|
|
141
|
+
'button-ghost': string;
|
|
142
|
+
'button-ghost-hover': string;
|
|
143
|
+
'button-ghost-disabled': string;
|
|
144
|
+
'button-danger': string;
|
|
145
|
+
'button-danger-disabled': string;
|
|
146
|
+
'button-success': string;
|
|
147
|
+
'button-success-disabled': string;
|
|
148
|
+
'button-accent': string;
|
|
149
|
+
'button-accent-disabled': string;
|
|
150
|
+
success: string;
|
|
151
|
+
'success-dark': string;
|
|
152
|
+
'success-dark-alt': string;
|
|
153
|
+
warning: string;
|
|
154
|
+
error: string;
|
|
155
|
+
'error-dark': string;
|
|
156
|
+
info: string;
|
|
157
|
+
client: string;
|
|
158
|
+
applicant: string;
|
|
159
|
+
'badge-grey': string;
|
|
160
|
+
'badge-blue': string;
|
|
161
|
+
'badge-red': string;
|
|
162
|
+
'badge-purple': string;
|
|
163
|
+
'badge-green': string;
|
|
164
|
+
'badge-orange': string;
|
|
165
|
+
'badge-cyan': string;
|
|
166
|
+
'badge-pink': string;
|
|
167
|
+
'badge-teal': string;
|
|
168
|
+
'badge-amber': string;
|
|
169
|
+
'badge-yellow': string;
|
|
170
|
+
'filter-text': string;
|
|
171
|
+
'filter-operator': string;
|
|
172
|
+
'filter-remove-icon': string;
|
|
173
|
+
'email-text': string;
|
|
174
|
+
'manual-text': string;
|
|
175
|
+
'login-particle': string;
|
|
176
|
+
'login-particle-link': string;
|
|
177
|
+
'inspector-text': string;
|
|
178
|
+
'inspector-keyword': string;
|
|
179
|
+
white: string;
|
|
180
|
+
black: string;
|
|
181
|
+
transparent: string;
|
|
182
|
+
current: string;
|
|
183
|
+
'gray-50': string;
|
|
184
|
+
'gray-100': string;
|
|
185
|
+
'gray-200': string;
|
|
186
|
+
'gray-300': string;
|
|
187
|
+
'gray-400': string;
|
|
188
|
+
'gray-500': string;
|
|
189
|
+
'gray-600': string;
|
|
190
|
+
'gray-700': string;
|
|
191
|
+
'gray-800': string;
|
|
192
|
+
'gray-900': string;
|
|
193
|
+
};
|
|
194
|
+
borderColor: {
|
|
195
|
+
primary: string;
|
|
196
|
+
strong: string;
|
|
197
|
+
subtle: string;
|
|
198
|
+
'button-secondary': string;
|
|
199
|
+
'button-secondary-hover': string;
|
|
200
|
+
'input-border': string;
|
|
201
|
+
'input-border-hover': string;
|
|
202
|
+
'input-border-active': string;
|
|
203
|
+
'input-border-error': string;
|
|
204
|
+
'dropdown-border': string;
|
|
205
|
+
accent: string;
|
|
206
|
+
'accent-hover': string;
|
|
207
|
+
success: string;
|
|
208
|
+
'success-dark': string;
|
|
209
|
+
warning: string;
|
|
210
|
+
error: string;
|
|
211
|
+
info: string;
|
|
212
|
+
client: string;
|
|
213
|
+
applicant: string;
|
|
214
|
+
'badge-grey': string;
|
|
215
|
+
'badge-blue': string;
|
|
216
|
+
'badge-red': string;
|
|
217
|
+
'badge-purple': string;
|
|
218
|
+
'badge-green': string;
|
|
219
|
+
'badge-orange': string;
|
|
220
|
+
'badge-cyan': string;
|
|
221
|
+
'badge-pink': string;
|
|
222
|
+
'badge-teal': string;
|
|
223
|
+
'badge-amber': string;
|
|
224
|
+
'badge-yellow': string;
|
|
225
|
+
'filter-border': string;
|
|
226
|
+
'focus-primary': string;
|
|
227
|
+
'focus-error': string;
|
|
228
|
+
'login-card': string;
|
|
229
|
+
'inspector-border': string;
|
|
230
|
+
white: string;
|
|
231
|
+
black: string;
|
|
232
|
+
transparent: string;
|
|
233
|
+
current: string;
|
|
234
|
+
'gray-50': string;
|
|
235
|
+
'gray-100': string;
|
|
236
|
+
'gray-200': string;
|
|
237
|
+
'gray-300': string;
|
|
238
|
+
'gray-400': string;
|
|
239
|
+
'gray-500': string;
|
|
240
|
+
'gray-600': string;
|
|
241
|
+
'gray-700': string;
|
|
242
|
+
'gray-800': string;
|
|
243
|
+
'gray-900': string;
|
|
244
|
+
};
|
|
245
|
+
outlineColor: {
|
|
246
|
+
primary: string;
|
|
247
|
+
error: string;
|
|
248
|
+
blue: string;
|
|
249
|
+
};
|
|
250
|
+
ringColor: {
|
|
251
|
+
primary: string;
|
|
252
|
+
error: string;
|
|
253
|
+
blue: string;
|
|
254
|
+
};
|
|
255
|
+
fontSize: {
|
|
256
|
+
readonly h1: readonly ["2.4rem", {
|
|
257
|
+
readonly lineHeight: "3.2rem";
|
|
258
|
+
readonly fontWeight: "600";
|
|
259
|
+
}];
|
|
260
|
+
readonly h2: readonly ["2.0rem", {
|
|
261
|
+
readonly lineHeight: "2.8rem";
|
|
262
|
+
readonly fontWeight: "600";
|
|
263
|
+
}];
|
|
264
|
+
readonly h3: readonly ["1.8rem", {
|
|
265
|
+
readonly lineHeight: "2.4rem";
|
|
266
|
+
readonly fontWeight: "600";
|
|
267
|
+
}];
|
|
268
|
+
readonly h4: readonly ["1.6rem", {
|
|
269
|
+
readonly lineHeight: "2.0rem";
|
|
270
|
+
readonly fontWeight: "600";
|
|
271
|
+
}];
|
|
272
|
+
readonly h5: readonly ["1.4rem", {
|
|
273
|
+
readonly lineHeight: "2.0rem";
|
|
274
|
+
readonly fontWeight: "600";
|
|
275
|
+
}];
|
|
276
|
+
readonly h6: readonly ["1.3rem", {
|
|
277
|
+
readonly lineHeight: "1.6rem";
|
|
278
|
+
readonly fontWeight: "600";
|
|
279
|
+
}];
|
|
280
|
+
readonly m1: readonly ["2.0rem", {
|
|
281
|
+
readonly lineHeight: "2.8rem";
|
|
282
|
+
readonly fontWeight: "300";
|
|
283
|
+
}];
|
|
284
|
+
readonly m2: readonly ["1.6rem", {
|
|
285
|
+
readonly lineHeight: "2.4rem";
|
|
286
|
+
readonly fontWeight: "300";
|
|
287
|
+
}];
|
|
288
|
+
readonly 'm2-emphasis': readonly ["1.6rem", {
|
|
289
|
+
readonly lineHeight: "2.4rem";
|
|
290
|
+
readonly fontWeight: "500";
|
|
291
|
+
}];
|
|
292
|
+
readonly m3: readonly ["1.4rem", {
|
|
293
|
+
readonly lineHeight: "2.0rem";
|
|
294
|
+
readonly fontWeight: "300";
|
|
295
|
+
}];
|
|
296
|
+
readonly 'm3-emphasis': readonly ["1.3rem", {
|
|
297
|
+
readonly lineHeight: "2.0rem";
|
|
298
|
+
readonly fontWeight: "500";
|
|
299
|
+
}];
|
|
300
|
+
readonly 'm3-small': readonly ["1.3rem", {
|
|
301
|
+
readonly lineHeight: "2.0rem";
|
|
302
|
+
readonly fontWeight: "400";
|
|
303
|
+
}];
|
|
304
|
+
readonly large: readonly ["1.6rem", {
|
|
305
|
+
readonly lineHeight: "2.0rem";
|
|
306
|
+
readonly fontWeight: "400";
|
|
307
|
+
}];
|
|
308
|
+
readonly 'large-emphasis': readonly ["1.6rem", {
|
|
309
|
+
readonly lineHeight: "2.0rem";
|
|
310
|
+
readonly fontWeight: "500";
|
|
311
|
+
}];
|
|
312
|
+
readonly default: readonly ["1.3rem", {
|
|
313
|
+
readonly lineHeight: "1.6rem";
|
|
314
|
+
readonly fontWeight: "400";
|
|
315
|
+
}];
|
|
316
|
+
readonly emphasis: readonly ["1.3rem", {
|
|
317
|
+
readonly lineHeight: "1.6rem";
|
|
318
|
+
readonly fontWeight: "500";
|
|
319
|
+
}];
|
|
320
|
+
readonly strong: readonly ["1.3rem", {
|
|
321
|
+
readonly lineHeight: "1.6rem";
|
|
322
|
+
readonly fontWeight: "600";
|
|
323
|
+
}];
|
|
324
|
+
readonly small: readonly ["1.2rem", {
|
|
325
|
+
readonly lineHeight: "1.6rem";
|
|
326
|
+
readonly fontWeight: "400";
|
|
327
|
+
}];
|
|
328
|
+
readonly 'small-emphasis': readonly ["1.2rem", {
|
|
329
|
+
readonly lineHeight: "1.6rem";
|
|
330
|
+
readonly fontWeight: "500";
|
|
331
|
+
}];
|
|
332
|
+
readonly 'small-strong': readonly ["1.2rem", {
|
|
333
|
+
readonly lineHeight: "1.6rem";
|
|
334
|
+
readonly fontWeight: "600";
|
|
335
|
+
}];
|
|
336
|
+
readonly tiny: readonly ["1.1rem", {
|
|
337
|
+
readonly lineHeight: "1.2rem";
|
|
338
|
+
readonly fontWeight: "400";
|
|
339
|
+
}];
|
|
340
|
+
readonly 'tiny-emphasis': readonly ["1.1rem", {
|
|
341
|
+
readonly lineHeight: "1.2rem";
|
|
342
|
+
readonly fontWeight: "500";
|
|
343
|
+
}];
|
|
344
|
+
readonly 'tiny-strong': readonly ["1.1rem", {
|
|
345
|
+
readonly lineHeight: "1.2rem";
|
|
346
|
+
readonly fontWeight: "600";
|
|
347
|
+
}];
|
|
348
|
+
readonly numeric: readonly ["1.4rem", {
|
|
349
|
+
readonly lineHeight: "1.6rem";
|
|
350
|
+
readonly fontWeight: "400";
|
|
351
|
+
}];
|
|
352
|
+
readonly 'display-lg': readonly ["4.0rem", {
|
|
353
|
+
readonly lineHeight: "1.1";
|
|
354
|
+
}];
|
|
355
|
+
readonly 'display-md': readonly ["3.0rem", {
|
|
356
|
+
readonly lineHeight: "1.2";
|
|
357
|
+
}];
|
|
358
|
+
readonly 'display-sm': readonly ["2.4rem", {
|
|
359
|
+
readonly lineHeight: "1.2";
|
|
360
|
+
readonly fontWeight: "500";
|
|
361
|
+
}];
|
|
362
|
+
};
|
|
363
|
+
spacing: Record<string, string>;
|
|
364
|
+
boxShadow: {
|
|
365
|
+
none: string;
|
|
366
|
+
pill: string;
|
|
367
|
+
subtle: string;
|
|
368
|
+
card: string;
|
|
369
|
+
'card-hover': string;
|
|
370
|
+
dropdown: string;
|
|
371
|
+
submenu: string;
|
|
372
|
+
modal: string;
|
|
373
|
+
floating: string;
|
|
374
|
+
drawer: string;
|
|
375
|
+
toast: string;
|
|
376
|
+
'focus-ring': string;
|
|
377
|
+
'selection-ring': string;
|
|
378
|
+
'comm-hover': string;
|
|
379
|
+
'login-card': string;
|
|
380
|
+
'dialog-overlay': string;
|
|
381
|
+
};
|
|
382
|
+
borderRadius: Record<string, string>;
|
|
383
|
+
zIndex: Record<string, string>;
|
|
384
|
+
minWidth: ({ theme }: {
|
|
385
|
+
theme: (key: string) => Record<string, string>;
|
|
386
|
+
}) => {
|
|
387
|
+
full: string;
|
|
388
|
+
min: string;
|
|
389
|
+
max: string;
|
|
390
|
+
fit: string;
|
|
391
|
+
screen: string;
|
|
392
|
+
};
|
|
393
|
+
minHeight: ({ theme }: {
|
|
394
|
+
theme: (key: string) => Record<string, string>;
|
|
395
|
+
}) => {
|
|
396
|
+
full: string;
|
|
397
|
+
screen: string;
|
|
398
|
+
};
|
|
399
|
+
maxWidth: ({ theme }: {
|
|
400
|
+
theme: (key: string) => Record<string, string>;
|
|
401
|
+
}) => {
|
|
402
|
+
'1200': string;
|
|
403
|
+
'1280': string;
|
|
404
|
+
'1400': string;
|
|
405
|
+
full: string;
|
|
406
|
+
min: string;
|
|
407
|
+
max: string;
|
|
408
|
+
fit: string;
|
|
409
|
+
screen: string;
|
|
410
|
+
};
|
|
411
|
+
maxHeight: ({ theme }: {
|
|
412
|
+
theme: (key: string) => Record<string, string>;
|
|
413
|
+
}) => {
|
|
414
|
+
full: string;
|
|
415
|
+
screen: string;
|
|
416
|
+
};
|
|
417
|
+
extend: {
|
|
418
|
+
keyframes: {
|
|
419
|
+
loginFadeInUp: {
|
|
420
|
+
from: {
|
|
421
|
+
opacity: string;
|
|
422
|
+
transform: string;
|
|
423
|
+
};
|
|
424
|
+
to: {
|
|
425
|
+
opacity: string;
|
|
426
|
+
transform: string;
|
|
427
|
+
};
|
|
428
|
+
};
|
|
429
|
+
loginPulse: {
|
|
430
|
+
'0%, 100%': {
|
|
431
|
+
opacity: string;
|
|
432
|
+
};
|
|
433
|
+
'50%': {
|
|
434
|
+
opacity: string;
|
|
435
|
+
};
|
|
436
|
+
};
|
|
437
|
+
loginOrbit: {
|
|
438
|
+
'0%': {
|
|
439
|
+
transform: string;
|
|
440
|
+
};
|
|
441
|
+
'100%': {
|
|
442
|
+
transform: string;
|
|
443
|
+
};
|
|
444
|
+
};
|
|
445
|
+
modalIn: {
|
|
446
|
+
from: {
|
|
447
|
+
opacity: string;
|
|
448
|
+
transform: string;
|
|
449
|
+
};
|
|
450
|
+
to: {
|
|
451
|
+
opacity: string;
|
|
452
|
+
transform: string;
|
|
453
|
+
};
|
|
454
|
+
};
|
|
455
|
+
spin: {
|
|
456
|
+
to: {
|
|
457
|
+
transform: string;
|
|
458
|
+
};
|
|
459
|
+
};
|
|
460
|
+
fadeIn: {
|
|
461
|
+
from: {
|
|
462
|
+
opacity: string;
|
|
463
|
+
};
|
|
464
|
+
to: {
|
|
465
|
+
opacity: string;
|
|
466
|
+
};
|
|
467
|
+
};
|
|
468
|
+
scaleIn: {
|
|
469
|
+
from: {
|
|
470
|
+
opacity: string;
|
|
471
|
+
transform: string;
|
|
472
|
+
};
|
|
473
|
+
to: {
|
|
474
|
+
opacity: string;
|
|
475
|
+
transform: string;
|
|
476
|
+
};
|
|
477
|
+
};
|
|
478
|
+
slideIn: {
|
|
479
|
+
from: {
|
|
480
|
+
opacity: string;
|
|
481
|
+
transform: string;
|
|
482
|
+
};
|
|
483
|
+
to: {
|
|
484
|
+
opacity: string;
|
|
485
|
+
transform: string;
|
|
486
|
+
};
|
|
487
|
+
};
|
|
488
|
+
shake: {
|
|
489
|
+
'0%, 100%': {
|
|
490
|
+
transform: string;
|
|
491
|
+
};
|
|
492
|
+
'20%, 60%': {
|
|
493
|
+
transform: string;
|
|
494
|
+
};
|
|
495
|
+
'40%, 80%': {
|
|
496
|
+
transform: string;
|
|
497
|
+
};
|
|
498
|
+
};
|
|
499
|
+
shimmer: {
|
|
500
|
+
'0%': {
|
|
501
|
+
backgroundPosition: string;
|
|
502
|
+
};
|
|
503
|
+
'100%': {
|
|
504
|
+
backgroundPosition: string;
|
|
505
|
+
};
|
|
506
|
+
};
|
|
507
|
+
'skeleton-loading': {
|
|
508
|
+
'0%': {
|
|
509
|
+
opacity: string;
|
|
510
|
+
};
|
|
511
|
+
'50%': {
|
|
512
|
+
opacity: string;
|
|
513
|
+
};
|
|
514
|
+
'100%': {
|
|
515
|
+
opacity: string;
|
|
516
|
+
};
|
|
517
|
+
};
|
|
518
|
+
commandPaletteSlideIn: {
|
|
519
|
+
from: {
|
|
520
|
+
opacity: string;
|
|
521
|
+
transform: string;
|
|
522
|
+
};
|
|
523
|
+
to: {
|
|
524
|
+
opacity: string;
|
|
525
|
+
transform: string;
|
|
526
|
+
};
|
|
527
|
+
};
|
|
528
|
+
ring: {
|
|
529
|
+
'0%, 100%': {
|
|
530
|
+
transform: string;
|
|
531
|
+
};
|
|
532
|
+
'10%, 30%': {
|
|
533
|
+
transform: string;
|
|
534
|
+
};
|
|
535
|
+
'20%': {
|
|
536
|
+
transform: string;
|
|
537
|
+
};
|
|
538
|
+
'40%': {
|
|
539
|
+
transform: string;
|
|
540
|
+
};
|
|
541
|
+
};
|
|
542
|
+
rowFadeIn: {
|
|
543
|
+
from: {
|
|
544
|
+
opacity: string;
|
|
545
|
+
transform: string;
|
|
546
|
+
};
|
|
547
|
+
to: {
|
|
548
|
+
opacity: string;
|
|
549
|
+
transform: string;
|
|
550
|
+
};
|
|
551
|
+
};
|
|
552
|
+
modalOut: {
|
|
553
|
+
from: {
|
|
554
|
+
opacity: string;
|
|
555
|
+
transform: string;
|
|
556
|
+
};
|
|
557
|
+
to: {
|
|
558
|
+
opacity: string;
|
|
559
|
+
transform: string;
|
|
560
|
+
};
|
|
561
|
+
};
|
|
562
|
+
fadeOut: {
|
|
563
|
+
from: {
|
|
564
|
+
opacity: string;
|
|
565
|
+
};
|
|
566
|
+
to: {
|
|
567
|
+
opacity: string;
|
|
568
|
+
};
|
|
569
|
+
};
|
|
570
|
+
};
|
|
571
|
+
animation: {
|
|
572
|
+
spin: string;
|
|
573
|
+
'fade-in': string;
|
|
574
|
+
'scale-in': string;
|
|
575
|
+
'slide-in': string;
|
|
576
|
+
shake: string;
|
|
577
|
+
shimmer: string;
|
|
578
|
+
skeleton: string;
|
|
579
|
+
'modal-in': string;
|
|
580
|
+
'modal-out': string;
|
|
581
|
+
'fade-out': string;
|
|
582
|
+
'login-fade-in-up': string;
|
|
583
|
+
'login-pulse': string;
|
|
584
|
+
'login-orbit': string;
|
|
585
|
+
ring: string;
|
|
586
|
+
pulse: string;
|
|
587
|
+
'pulse-slow': string;
|
|
588
|
+
'row-fade-in': string;
|
|
589
|
+
};
|
|
590
|
+
transitionDuration: {
|
|
591
|
+
fast: string;
|
|
592
|
+
base: string;
|
|
593
|
+
slow: string;
|
|
594
|
+
};
|
|
595
|
+
transitionTimingFunction: {
|
|
596
|
+
DEFAULT: string;
|
|
597
|
+
};
|
|
598
|
+
transitionProperty: {
|
|
599
|
+
bg: string;
|
|
600
|
+
};
|
|
601
|
+
backdropBlur: ({ theme }: {
|
|
602
|
+
theme: (key: string) => Record<string, string>;
|
|
603
|
+
}) => {
|
|
604
|
+
[x: string]: string;
|
|
605
|
+
};
|
|
606
|
+
borderWidth: {
|
|
607
|
+
'1.5': string;
|
|
608
|
+
'3': string;
|
|
609
|
+
};
|
|
610
|
+
flex: {
|
|
611
|
+
fill: string;
|
|
612
|
+
auto: string;
|
|
613
|
+
major: string;
|
|
614
|
+
minor: string;
|
|
615
|
+
};
|
|
616
|
+
gridTemplateColumns: {
|
|
617
|
+
'label-value': string;
|
|
618
|
+
'label-detail': string;
|
|
619
|
+
'sidebar-content': string;
|
|
620
|
+
'content-sidebar': string;
|
|
621
|
+
'6-col': string;
|
|
622
|
+
'auto-180': string;
|
|
623
|
+
'auto-200': string;
|
|
624
|
+
'auto-250': string;
|
|
625
|
+
'auto-340': string;
|
|
626
|
+
'auto-fit-200': string;
|
|
627
|
+
};
|
|
628
|
+
fontFamily: {
|
|
629
|
+
inherit: string;
|
|
630
|
+
};
|
|
631
|
+
textColor: {
|
|
632
|
+
inherit: string;
|
|
633
|
+
};
|
|
634
|
+
cursor: {
|
|
635
|
+
inherit: string;
|
|
636
|
+
};
|
|
637
|
+
accentColor: {
|
|
638
|
+
primary: string;
|
|
639
|
+
};
|
|
640
|
+
};
|
|
641
|
+
};
|
|
642
|
+
};
|
|
643
|
+
export default _default;
|
|
@@ -2,9 +2,9 @@ export declare const menuStyles: {
|
|
|
2
2
|
readonly item: "flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none";
|
|
3
3
|
readonly itemDefault: "text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover";
|
|
4
4
|
readonly itemDestructive: "text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none";
|
|
5
|
-
readonly content: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none
|
|
6
|
-
readonly subContent: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none
|
|
7
|
-
readonly searchableSubContent: "min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 pointer-events-auto outline-none overflow-hidden
|
|
5
|
+
readonly content: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none";
|
|
6
|
+
readonly subContent: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none animate-fade-in motion-reduce:animate-none";
|
|
7
|
+
readonly searchableSubContent: "min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 pointer-events-auto outline-none overflow-hidden animate-fade-in motion-reduce:animate-none";
|
|
8
8
|
readonly scrollableItems: "max-h-250 overflow-y-auto overflow-x-hidden";
|
|
9
9
|
readonly separator: "h-1 bg-muted -mx-4 my-4";
|
|
10
10
|
readonly groupHeading: "text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none";
|
|
@@ -3,9 +3,9 @@ export const menuStyles = {
|
|
|
3
3
|
item: 'flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none',
|
|
4
4
|
itemDefault: 'text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover',
|
|
5
5
|
itemDestructive: 'text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none',
|
|
6
|
-
content: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none
|
|
7
|
-
subContent: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none
|
|
8
|
-
searchableSubContent: 'min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 pointer-events-auto outline-none overflow-hidden
|
|
6
|
+
content: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none',
|
|
7
|
+
subContent: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none animate-fade-in motion-reduce:animate-none',
|
|
8
|
+
searchableSubContent: 'min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 pointer-events-auto outline-none overflow-hidden animate-fade-in motion-reduce:animate-none',
|
|
9
9
|
scrollableItems: 'max-h-250 overflow-y-auto overflow-x-hidden',
|
|
10
10
|
separator: 'h-1 bg-muted -mx-4 my-4',
|
|
11
11
|
groupHeading: 'text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none',
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export function clickOutside(node, params) {
|
|
2
|
-
let { onClose, enabled = true } = params;
|
|
2
|
+
let { onClose, enabled = true, ignore } = params;
|
|
3
3
|
let handler = null;
|
|
4
4
|
let rafId = null;
|
|
5
5
|
function setup() {
|
|
@@ -16,6 +16,10 @@ export function clickOutside(node, params) {
|
|
|
16
16
|
if (el.contains(target))
|
|
17
17
|
return;
|
|
18
18
|
}
|
|
19
|
+
// Don't close if click is on the trigger — let its own handler toggle state
|
|
20
|
+
const ignoreEl = ignore?.();
|
|
21
|
+
if (ignoreEl && ignoreEl.contains(target))
|
|
22
|
+
return;
|
|
19
23
|
onClose();
|
|
20
24
|
};
|
|
21
25
|
document.addEventListener('pointerdown', handler, { capture: true });
|
|
@@ -36,6 +40,7 @@ export function clickOutside(node, params) {
|
|
|
36
40
|
update(newParams) {
|
|
37
41
|
onClose = newParams.onClose;
|
|
38
42
|
enabled = newParams.enabled ?? true;
|
|
43
|
+
ignore = newParams.ignore;
|
|
39
44
|
setup();
|
|
40
45
|
},
|
|
41
46
|
destroy() {
|
|
@@ -22,7 +22,7 @@ export function useFloating(opts) {
|
|
|
22
22
|
},
|
|
23
23
|
}));
|
|
24
24
|
}
|
|
25
|
-
computePosition(reference, floating, {
|
|
25
|
+
return computePosition(reference, floating, {
|
|
26
26
|
placement: opts.placement ?? 'bottom-start',
|
|
27
27
|
middleware,
|
|
28
28
|
}).then(({ x, y }) => {
|
|
@@ -30,6 +30,7 @@ export function useFloating(opts) {
|
|
|
30
30
|
position: 'absolute',
|
|
31
31
|
left: `${x}px`,
|
|
32
32
|
top: `${y}px`,
|
|
33
|
+
visibility: 'visible',
|
|
33
34
|
});
|
|
34
35
|
});
|
|
35
36
|
}
|
|
@@ -42,6 +43,8 @@ export function useFloating(opts) {
|
|
|
42
43
|
}
|
|
43
44
|
if (!reference || !floating)
|
|
44
45
|
return;
|
|
46
|
+
// Hide until first positioning resolves to avoid an animated jump from (0,0)
|
|
47
|
+
floating.style.visibility = 'hidden';
|
|
45
48
|
cleanup = autoUpdate(reference, floating, () => {
|
|
46
49
|
compute(reference, floating);
|
|
47
50
|
});
|