@insymetri/styleguide 0.1.50 → 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.
Files changed (12) hide show
  1. package/dist/IIDropdownInput/IIDropdownInput.svelte +3 -1
  2. package/dist/IIDropdownMenu/IIDropdownMenu.svelte +3 -1
  3. package/dist/icons.d.ts +4 -0
  4. package/dist/icons.js +5 -0
  5. package/dist/style/tailwind/animations.d.ts +174 -0
  6. package/dist/style/tailwind/preset.d.ts +643 -0
  7. package/dist/utils/menu/menu-styles.d.ts +3 -3
  8. package/dist/utils/menu/menu-styles.js +3 -3
  9. package/dist/utils/menu/use-click-outside.d.ts +1 -0
  10. package/dist/utils/menu/use-click-outside.js +6 -1
  11. package/dist/utils/menu/use-floating.svelte.js +4 -1
  12. package/package.json +1 -1
package/dist/IIDropdownInput/IIDropdownInput.svelte CHANGED
@@ -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
package/dist/IIDropdownMenu/IIDropdownMenu.svelte CHANGED
@@ -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
package/dist/icons.d.ts CHANGED
@@ -88,5 +88,9 @@ export declare const icons: {
88
88
  readonly eye: "<path fill=\"currentColor\" d=\"M247.31 124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57 61.26 162.88 48 128 48S61.43 61.26 36.34 86.35C17.51 105.18 9 124 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208s66.57-13.26 91.66-38.34c18.83-18.83 27.3-37.61 27.65-38.4a8 8 0 0 0 0-6.5M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.5 133.5 0 0 1 25 128a133.3 133.3 0 0 1 23.07-30.75C70.33 75.19 97.22 64 128 64s57.67 11.19 79.93 33.25A133.5 133.5 0 0 1 231.05 128c-7.21 13.46-38.62 64-103.05 64m0-112a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48m0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32\"/>";
89
89
  readonly 'eye-slash': "<path fill=\"currentColor\" d=\"M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.1 127.1 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm47.33 75.84l41.67 45.85a32 32 0 0 1-41.67-45.85M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.2 133.2 0 0 1 25 128c4.69-8.79 19.66-33.39 47.35-49.38l18 19.75a48 48 0 0 0 63.66 70l14.73 16.2A112 112 0 0 1 128 192m6-95.43a8 8 0 0 1 3-15.72a48.16 48.16 0 0 1 38.77 42.64a8 8 0 0 1-7.22 8.71a6 6 0 0 1-.75 0a8 8 0 0 1-8-7.26A32.09 32.09 0 0 0 134 96.57m113.28 34.69c-.42.94-10.55 23.37-33.36 43.8a8 8 0 1 1-10.67-11.92a132.8 132.8 0 0 0 27.8-35.14a133.2 133.2 0 0 0-23.12-30.77C185.67 75.19 158.78 64 128 64a118.4 118.4 0 0 0-19.36 1.57A8 8 0 1 1 106 49.79A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z\"/>";
90
90
  readonly robot: "<path fill=\"currentColor\" d=\"M200 48h-64V16a8 8 0 0 0-16 0v32H56a32 32 0 0 0-32 32v112a32 32 0 0 0 32 32h144a32 32 0 0 0 32-32V80a32 32 0 0 0-32-32m16 144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16Zm-52-56H92a28 28 0 0 0 0 56h72a28 28 0 0 0 0-56m-24 16v24h-24v-24Zm-60 12a12 12 0 0 1 12-12h8v24h-8a12 12 0 0 1-12-12m84 12h-8v-24h8a12 12 0 0 1 0 24m-92-68a12 12 0 1 1 12 12a12 12 0 0 1-12-12m88 0a12 12 0 1 1 12 12a12 12 0 0 1-12-12\"/>";
91
+ readonly headset: "<path fill=\"currentColor\" d=\"M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88.12,88.12,0,0,1,190.54,65.93,87.39,87.39,0,0,1,215.65,120H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h24a24,24,0,0,1-24,24H136a8,8,0,0,0,0,16h56a40,40,0,0,0,40-40V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm128,56a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24v56Z\"/>";
92
+ readonly 'bell-slash': "<path fill=\"currentColor\" d=\"M53.92,34.62A8,8,0,1,0,42.08,45.38L58.82,63.8A79.59,79.59,0,0,0,48,104c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.8a40,40,0,0,0,78.4,0h15.44l19.44,21.38a8,8,0,1,0,11.84-10.76ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a63.65,63.65,0,0,1,6.26-27.62L168.09,184Zm166-4.73a8.13,8.13,0,0,1-2.93.55,8,8,0,0,1-7.44-5.08C196.35,156.19,192,129.75,192,104A64,64,0,0,0,96.43,48.31a8,8,0,0,1-7.9-13.91A80,80,0,0,1,208,104c0,35.35,8.05,58.59,10.52,64.88A8,8,0,0,1,214,179.25Z\"/>";
93
+ readonly moon: "<path fill=\"currentColor\" d=\"M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z\"/>";
94
+ readonly coffee: "<path fill=\"currentColor\" d=\"M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z\"/>";
91
95
  };
92
96
  export type IconName = keyof typeof icons;
package/dist/icons.js CHANGED
@@ -101,4 +101,9 @@ export const icons = {
101
101
  'eye-slash': `<path fill="currentColor" d="M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.1 127.1 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm47.33 75.84l41.67 45.85a32 32 0 0 1-41.67-45.85M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.2 133.2 0 0 1 25 128c4.69-8.79 19.66-33.39 47.35-49.38l18 19.75a48 48 0 0 0 63.66 70l14.73 16.2A112 112 0 0 1 128 192m6-95.43a8 8 0 0 1 3-15.72a48.16 48.16 0 0 1 38.77 42.64a8 8 0 0 1-7.22 8.71a6 6 0 0 1-.75 0a8 8 0 0 1-8-7.26A32.09 32.09 0 0 0 134 96.57m113.28 34.69c-.42.94-10.55 23.37-33.36 43.8a8 8 0 1 1-10.67-11.92a132.8 132.8 0 0 0 27.8-35.14a133.2 133.2 0 0 0-23.12-30.77C185.67 75.19 158.78 64 128 64a118.4 118.4 0 0 0-19.36 1.57A8 8 0 1 1 106 49.79A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z"/>`,
102
102
  // Other
103
103
  robot: `<path fill="currentColor" d="M200 48h-64V16a8 8 0 0 0-16 0v32H56a32 32 0 0 0-32 32v112a32 32 0 0 0 32 32h144a32 32 0 0 0 32-32V80a32 32 0 0 0-32-32m16 144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16Zm-52-56H92a28 28 0 0 0 0 56h72a28 28 0 0 0 0-56m-24 16v24h-24v-24Zm-60 12a12 12 0 0 1 12-12h8v24h-8a12 12 0 0 1-12-12m84 12h-8v-24h8a12 12 0 0 1 0 24m-92-68a12 12 0 1 1 12 12a12 12 0 0 1-12-12m88 0a12 12 0 1 1 12 12a12 12 0 0 1-12-12"/>`,
104
+ // Status & Presence
105
+ headset: `<path fill="currentColor" d="M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88.12,88.12,0,0,1,190.54,65.93,87.39,87.39,0,0,1,215.65,120H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h24a24,24,0,0,1-24,24H136a8,8,0,0,0,0,16h56a40,40,0,0,0,40-40V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm128,56a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24v56Z"/>`,
106
+ 'bell-slash': `<path fill="currentColor" d="M53.92,34.62A8,8,0,1,0,42.08,45.38L58.82,63.8A79.59,79.59,0,0,0,48,104c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.8a40,40,0,0,0,78.4,0h15.44l19.44,21.38a8,8,0,1,0,11.84-10.76ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a63.65,63.65,0,0,1,6.26-27.62L168.09,184Zm166-4.73a8.13,8.13,0,0,1-2.93.55,8,8,0,0,1-7.44-5.08C196.35,156.19,192,129.75,192,104A64,64,0,0,0,96.43,48.31a8,8,0,0,1-7.9-13.91A80,80,0,0,1,208,104c0,35.35,8.05,58.59,10.52,64.88A8,8,0,0,1,214,179.25Z"/>`,
107
+ moon: `<path fill="currentColor" d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/>`,
108
+ coffee: `<path fill="currentColor" d="M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z"/>`,
104
109
  };
package/dist/style/tailwind/animations.d.ts ADDED
@@ -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;
package/dist/style/tailwind/preset.d.ts ADDED
@@ -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;
package/dist/utils/menu/menu-styles.d.ts CHANGED
@@ -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 origin-top-left animate-scale-in motion-reduce:animate-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 origin-top-left animate-scale-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 origin-top-left animate-scale-in motion-reduce:animate-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 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";
package/dist/utils/menu/menu-styles.js CHANGED
@@ -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 origin-top-left animate-scale-in motion-reduce:animate-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 origin-top-left animate-scale-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 origin-top-left animate-scale-in motion-reduce:animate-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 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',
package/dist/utils/menu/use-click-outside.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  type ClickOutsideParams = {
2
2
  onClose: () => void;
3
3
  enabled?: boolean;
4
+ ignore?: () => HTMLElement | null | undefined;
4
5
  };
5
6
  export declare function clickOutside(node: HTMLElement, params: ClickOutsideParams): {
6
7
  update(newParams: ClickOutsideParams): void;
package/dist/utils/menu/use-click-outside.js CHANGED
@@ -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() {
package/dist/utils/menu/use-floating.svelte.js CHANGED
@@ -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
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insymetri/styleguide",
3
- "version": "0.1.50",
3
+ "version": "0.1.52",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {