@insymetri/styleguide 0.1.64 → 0.1.66

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 (8) hide show
  1. package/dist/IICombobox/IICombobox.svelte +2 -2
  2. package/dist/IIDateInput/IIDateInput.svelte +20 -4
  3. package/dist/IIDropdownInput/IIDropdownInput.svelte +2 -2
  4. package/dist/IIInput/IIInput.svelte +1 -1
  5. package/dist/IISegmentedControl/IISegmentedControl.svelte +1 -1
  6. package/dist/style/tailwind/animations.d.ts +174 -0
  7. package/dist/style/tailwind/preset.d.ts +643 -0
  8. package/package.json +1 -1
package/dist/IICombobox/IICombobox.svelte CHANGED
@@ -66,14 +66,14 @@
66
66
  compact: 'h-28 rounded-control text-tiny',
67
67
  default: 'h-32 rounded-control text-small',
68
68
  comfortable: 'h-40 rounded-control text-small',
69
- mobile: 'h-48 rounded-control text-default',
69
+ mobile: 'h-48 rounded-control text-large',
70
70
  } as const
71
71
 
72
72
  const itemDensityClasses = {
73
73
  compact: 'py-4 text-tiny',
74
74
  default: 'py-6 text-small',
75
75
  comfortable: 'py-8 text-small',
76
- mobile: 'py-10 text-default',
76
+ mobile: 'py-10 text-large',
77
77
  } as const
78
78
 
79
79
  let inputValue = $state('')
package/dist/IIDateInput/IIDateInput.svelte CHANGED
@@ -36,7 +36,7 @@
36
36
  compact: 'h-28 rounded-control text-tiny',
37
37
  default: 'h-32 rounded-control text-small',
38
38
  comfortable: 'h-40 rounded-control text-small',
39
- mobile: 'h-48 rounded-control text-default',
39
+ mobile: 'h-48 rounded-control text-large',
40
40
  } as const
41
41
 
42
42
  const showError = $derived(error || !!errorMessage)
@@ -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/IIDropdownInput/IIDropdownInput.svelte CHANGED
@@ -56,14 +56,14 @@
56
56
  compact: 'h-28 rounded-control text-tiny',
57
57
  default: 'h-32 rounded-control text-small',
58
58
  comfortable: 'h-40 rounded-control text-small',
59
- mobile: 'h-48 rounded-control text-default',
59
+ mobile: 'h-48 rounded-control text-large',
60
60
  } as const
61
61
 
62
62
  const itemDensityClasses = {
63
63
  compact: 'py-4 text-tiny',
64
64
  default: 'py-6 text-small',
65
65
  comfortable: 'py-8 text-small',
66
- mobile: 'py-10 text-default',
66
+ mobile: 'py-10 text-large',
67
67
  } as const
68
68
 
69
69
  let open = $state(false)
package/dist/IIInput/IIInput.svelte CHANGED
@@ -40,7 +40,7 @@
40
40
  compact: 'h-28 rounded-control text-small',
41
41
  default: 'h-32 rounded-control text-small',
42
42
  comfortable: 'h-40 rounded-control text-small',
43
- mobile: 'h-48 rounded-control text-default',
43
+ mobile: 'h-48 rounded-control text-large',
44
44
  } as const
45
45
 
46
46
  const showError = $derived(error || !!errorMessage)
package/dist/IISegmentedControl/IISegmentedControl.svelte CHANGED
@@ -46,7 +46,7 @@
46
46
  compact: 'px-8 text-tiny leading-[22px]',
47
47
  default: 'px-8 text-small leading-[26px]',
48
48
  comfortable: 'px-12 text-small leading-[32px]',
49
- mobile: 'px-8 text-small leading-[40px]',
49
+ mobile: 'px-8 text-large leading-[40px]',
50
50
  } as const
51
51
 
52
52
  const thumbInset = {
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.64",
3
+ "version": "0.1.66",
4
4
  "description": "Insymetri shared UI component library built with Svelte 5",
5
5
  "type": "module",
6
6
  "scripts": {