@insymetri/styleguide 0.1.65 → 0.1.67

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/IIDateInput/IIDateInput.svelte +19 -3
  2. package/dist/IIModal/IIModal.svelte +7 -7
  3. package/dist/style/tailwind/animations.d.ts +174 -0
  4. package/dist/style/tailwind/preset.d.ts +643 -0
  5. package/package.json +1 -1
package/dist/IIDateInput/IIDateInput.svelte CHANGED
@@ -56,6 +56,21 @@
56
56
  return Array.from(segments).every(s => s.hasAttribute('data-placeholder'))
57
57
  }
58
58
 
59
+ function focusFirstSegment() {
60
+ if (!inputEl) return
61
+ const first = inputEl.querySelector<HTMLElement>(
62
+ '[data-segment]:not([data-segment="trigger"]):not([data-segment="literal"])'
63
+ )
64
+ first?.focus()
65
+ }
66
+
67
+ function handleInputMouseDown(e: MouseEvent) {
68
+ const target = e.target as HTMLElement
69
+ if (target.closest('button, [data-segment]:not([data-segment="literal"])')) return
70
+ e.preventDefault()
71
+ focusFirstSegment()
72
+ }
73
+
59
74
  function handleValueChange(newValue: DateValue | undefined) {
60
75
  if (newValue === undefined && !allSegmentsEmpty()) {
61
76
  // A segment was partially cleared — restore the internal value
@@ -76,12 +91,13 @@
76
91
  {/if}
77
92
  <DatePicker.Input
78
93
  bind:ref={inputEl}
94
+ onmousedown={handleInputMouseDown}
79
95
  class={cn(
80
- 'flex items-center gap-4 px-12 border bg-input-bg border-input-border transition-all duration-fast [&:has(:focus)]:ring-3 motion-reduce:transition-none',
96
+ 'flex items-center gap-4 pl-12 pr-4 border bg-input-bg border-button-secondary transition-all duration-fast [&:has(:focus)]:ring-3 motion-reduce:transition-none',
81
97
  densityClasses[density.value],
82
98
  showError
83
99
  ? 'border-input-border-error hover:border-input-border-error [&:has(:focus)]:border-input-border-error [&:has(:focus)]:ring-error'
84
- : 'hover:[&:not(:has(:focus))]:border-input-border-hover [&:has(:focus)]:border-accent [&:has(:focus)]:ring-primary',
100
+ : 'hover:[&:not(:has(:focus))]:border-button-secondary-hover [&:has(:focus)]:border-accent [&:has(:focus)]:ring-primary',
85
101
  disabled && 'bg-input-bg-disabled cursor-not-allowed'
86
102
  )}
87
103
  >
@@ -96,7 +112,7 @@
96
112
  {/each}
97
113
  <DatePicker.Trigger>
98
114
  {#snippet child({props})}
99
- <IIIconButton {...props} iconName="calendar" variant="ghost" size="sm" disabled={disabled} />
115
+ <IIIconButton {...props} iconName="calendar" variant="ghost" size="sm" disabled={disabled} class="ml-auto" />
100
116
  {/snippet}
101
117
  </DatePicker.Trigger>
102
118
  {/snippet}
package/dist/IIModal/IIModal.svelte CHANGED
@@ -56,8 +56,8 @@
56
56
  <Dialog.Overlay
57
57
  class={cn(
58
58
  'fixed inset-0 z-14 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none',
59
- overlay === 'dark' && 'bg-overlay',
60
- overlay === 'light' && 'bg-black/10',
59
+ overlay === 'dark' && 'bg-black/30 backdrop-blur-4',
60
+ overlay === 'light' && 'bg-black/10 backdrop-blur-2',
61
61
  overlay === 'none' && 'pointer-events-none'
62
62
  )}
63
63
  />
@@ -72,7 +72,7 @@
72
72
  if (isInsidePortaledMenu(target)) e.preventDefault()
73
73
  }}
74
74
  class={cn(
75
- 'fixed top-[30%] left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface rounded-12 w-[calc(100%-20px)] max-h-[90vh] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
75
+ 'fixed top-[30%] left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface border border-strong rounded-12 w-[calc(100%-20px)] max-h-[90vh] flex flex-col gap-20 p-24 z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
76
76
  overlay === 'none' ? 'shadow-floating' : 'shadow-modal',
77
77
  size === 'sm' && 'max-w-400',
78
78
  size === 'md' && 'max-w-500',
@@ -80,10 +80,10 @@
80
80
  className
81
81
  )}
82
82
  >
83
- <div class="flex items-center justify-between gap-12 min-h-44 px-12 py-8 border-b border-primary shrink-0">
83
+ <div class="flex items-start justify-between gap-12 shrink-0">
84
84
  <div class="flex flex-col min-w-0 flex-1">
85
85
  <div class="flex items-center gap-12 min-w-0">
86
- <Dialog.Title class="text-default text-body m-0 shrink-0">{title}</Dialog.Title>
86
+ <Dialog.Title class="text-h2 text-body m-0 shrink-0">{title}</Dialog.Title>
87
87
  {#if titleAccessory}
88
88
  {@render titleAccessory()}
89
89
  {/if}
@@ -102,11 +102,11 @@
102
102
  </Dialog.Close>
103
103
  {/if}
104
104
  </div>
105
- <div class="px-20 py-16 flex-auto min-h-0 overflow-y-auto">
105
+ <div class="flex-auto min-h-0 overflow-y-auto">
106
106
  {@render children()}
107
107
  </div>
108
108
  {#if footer}
109
- <div class="flex items-center justify-end gap-12 min-h-44 px-10 py-6 border-t border-primary shrink-0">
109
+ <div class="flex items-center justify-end gap-12 shrink-0">
110
110
  {@render footer()}
111
111
  </div>
112
112
  {/if}
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insymetri/styleguide",
3
- "version": "0.1.65",
3
+ "version": "0.1.67",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {