uisv 0.0.13 → 0.0.15

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 (58) hide show
  1. package/dist/components/alert.svelte +8 -2
  2. package/dist/components/alert.svelte.d.ts +2 -2
  3. package/dist/components/badge.svelte +18 -18
  4. package/dist/components/badge.svelte.d.ts +2 -2
  5. package/dist/components/banner.svelte +8 -2
  6. package/dist/components/banner.svelte.d.ts +2 -2
  7. package/dist/components/breadcrumb.svelte +75 -0
  8. package/dist/components/breadcrumb.svelte.d.ts +38 -0
  9. package/dist/components/button.svelte +415 -0
  10. package/dist/components/{button/index.d.ts → button.svelte.d.ts} +9 -4
  11. package/dist/components/calendar.svelte +99 -0
  12. package/dist/components/calendar.svelte.d.ts +16 -0
  13. package/dist/components/card.svelte +11 -10
  14. package/dist/components/card.svelte.d.ts +2 -1
  15. package/dist/components/collapsible.svelte +76 -0
  16. package/dist/components/collapsible.svelte.d.ts +15 -0
  17. package/dist/components/icon.svelte +58 -0
  18. package/dist/components/icon.svelte.d.ts +8 -0
  19. package/dist/components/index.d.ts +18 -3
  20. package/dist/components/index.js +18 -3
  21. package/dist/components/input-number.svelte +175 -0
  22. package/dist/components/input-number.svelte.d.ts +38 -0
  23. package/dist/components/input-time.svelte +233 -0
  24. package/dist/components/input-time.svelte.d.ts +53 -0
  25. package/dist/components/input.svelte +285 -0
  26. package/dist/components/{input/index.d.ts → input.svelte.d.ts} +6 -5
  27. package/dist/components/kbd.svelte +35 -35
  28. package/dist/components/kbd.svelte.d.ts +2 -2
  29. package/dist/components/pin-input.svelte +20 -20
  30. package/dist/components/pin-input.svelte.d.ts +2 -2
  31. package/dist/components/placeholder.svelte +1 -1
  32. package/dist/components/select.svelte +2 -2
  33. package/dist/components/select.svelte.d.ts +2 -2
  34. package/dist/components/seperator.svelte +212 -0
  35. package/dist/components/seperator.svelte.d.ts +22 -0
  36. package/dist/components/tabs.svelte +1 -2
  37. package/dist/date.d.ts +1 -0
  38. package/dist/date.js +1 -0
  39. package/dist/index.d.ts +2 -0
  40. package/dist/utilities.svelte.d.ts +7 -0
  41. package/dist/utilities.svelte.js +20 -0
  42. package/dist/vite.d.ts +1 -1
  43. package/dist/vite.js +24 -39
  44. package/package.json +41 -49
  45. package/dist/components/button/button.svelte +0 -105
  46. package/dist/components/button/button.svelte.d.ts +0 -4
  47. package/dist/components/button/index.js +0 -4
  48. package/dist/components/button/style.d.ts +0 -148
  49. package/dist/components/button/style.js +0 -248
  50. package/dist/components/input/index.js +0 -2
  51. package/dist/components/input/input.svelte +0 -103
  52. package/dist/components/input/input.svelte.d.ts +0 -4
  53. package/dist/components/input/style.d.ts +0 -316
  54. package/dist/components/input/style.js +0 -128
  55. package/dist/components/input-time/index.d.ts +0 -375
  56. package/dist/components/input-time/index.js +0 -144
  57. package/dist/components/input-time/input-time.svelte +0 -39
  58. package/dist/components/input-time/input-time.svelte.d.ts +0 -4
@@ -1,148 +0,0 @@
1
- export declare const BUTTON_VARIANTS: import("tailwind-variants").TVReturnType<{
2
- color: {
3
- primary: string;
4
- surface: string;
5
- error: string;
6
- success: string;
7
- info: string;
8
- warning: string;
9
- };
10
- variant: {
11
- link: string;
12
- solid: string;
13
- outline: string;
14
- soft: string;
15
- subtle: string;
16
- ghost: string;
17
- };
18
- size: {
19
- xs: {
20
- base: string;
21
- icon: string;
22
- };
23
- sm: {
24
- base: string;
25
- icon: string;
26
- };
27
- md: {
28
- base: string;
29
- icon: string;
30
- };
31
- lg: {
32
- base: string;
33
- icon: string;
34
- };
35
- xl: {
36
- base: string;
37
- icon: string;
38
- };
39
- };
40
- block: {
41
- true: string;
42
- };
43
- disabled: {
44
- true: string;
45
- false: string;
46
- };
47
- }, {
48
- icon: string;
49
- base: string;
50
- }, undefined, {
51
- color: {
52
- primary: string;
53
- surface: string;
54
- error: string;
55
- success: string;
56
- info: string;
57
- warning: string;
58
- };
59
- variant: {
60
- link: string;
61
- solid: string;
62
- outline: string;
63
- soft: string;
64
- subtle: string;
65
- ghost: string;
66
- };
67
- size: {
68
- xs: {
69
- base: string;
70
- icon: string;
71
- };
72
- sm: {
73
- base: string;
74
- icon: string;
75
- };
76
- md: {
77
- base: string;
78
- icon: string;
79
- };
80
- lg: {
81
- base: string;
82
- icon: string;
83
- };
84
- xl: {
85
- base: string;
86
- icon: string;
87
- };
88
- };
89
- block: {
90
- true: string;
91
- };
92
- disabled: {
93
- true: string;
94
- false: string;
95
- };
96
- }, {
97
- icon: string;
98
- base: string;
99
- }, import("tailwind-variants").TVReturnType<{
100
- color: {
101
- primary: string;
102
- surface: string;
103
- error: string;
104
- success: string;
105
- info: string;
106
- warning: string;
107
- };
108
- variant: {
109
- link: string;
110
- solid: string;
111
- outline: string;
112
- soft: string;
113
- subtle: string;
114
- ghost: string;
115
- };
116
- size: {
117
- xs: {
118
- base: string;
119
- icon: string;
120
- };
121
- sm: {
122
- base: string;
123
- icon: string;
124
- };
125
- md: {
126
- base: string;
127
- icon: string;
128
- };
129
- lg: {
130
- base: string;
131
- icon: string;
132
- };
133
- xl: {
134
- base: string;
135
- icon: string;
136
- };
137
- };
138
- block: {
139
- true: string;
140
- };
141
- disabled: {
142
- true: string;
143
- false: string;
144
- };
145
- }, {
146
- icon: string;
147
- base: string;
148
- }, undefined, unknown, unknown, undefined>>;
@@ -1,248 +0,0 @@
1
- import { tv } from 'tailwind-variants';
2
- export const BUTTON_VARIANTS = tv({
3
- slots: {
4
- icon: '',
5
- base: 'transition flex-inline items-center font-sans',
6
- },
7
- variants: {
8
- color: {
9
- primary: '',
10
- surface: '',
11
- error: '',
12
- success: '',
13
- info: '',
14
- warning: '',
15
- },
16
- variant: {
17
- link: '',
18
- solid: 'text-inverted',
19
- outline: 'border',
20
- soft: '',
21
- subtle: 'border',
22
- ghost: '',
23
- },
24
- size: {
25
- xs: {
26
- base: 'font-medium text-xs px-2 h-6 rounded gap-1',
27
- icon: 'size-4',
28
- },
29
- sm: { base: 'font-medium text-xs px-2 h-7 rounded gap-1', icon: 'size-4' },
30
- md: { base: 'font-medium text-sm rounded-md px-2 h-8 gap-2', icon: 'size-5' },
31
- lg: { base: 'font-medium text-sm px-3 h-9 rounded-md gap-2', icon: 'size-6' },
32
- xl: { base: 'font-medium px-3 h-10 rounded-md gap-2', icon: 'size-6' },
33
- },
34
- block: {
35
- true: 'w-full',
36
- },
37
- disabled: {
38
- true: 'cursor-not-allowed',
39
- false: 'cursor-default',
40
- },
41
- },
42
- compoundVariants: [
43
- {
44
- color: 'primary',
45
- variant: 'solid',
46
- class: 'bg-primary-500 hover:(bg-primary-400)',
47
- },
48
- {
49
- color: 'surface',
50
- variant: 'solid',
51
- class: 'bg-surface-inverted text-inverted hover:(bg-toned)',
52
- },
53
- {
54
- color: 'info',
55
- variant: 'solid',
56
- class: 'bg-info-500 hover:(bg-info-400)',
57
- },
58
- {
59
- color: 'success',
60
- variant: 'solid',
61
- class: 'bg-success-500 hover:(bg-success-400)',
62
- },
63
- {
64
- color: 'error',
65
- variant: 'solid',
66
- class: 'bg-error-500 hover:(bg-error-400)',
67
- },
68
- {
69
- color: 'warning',
70
- variant: 'solid',
71
- class: 'bg-warning-500 hover:(bg-warning-400)',
72
- },
73
- {
74
- color: 'primary',
75
- variant: 'outline',
76
- class: {
77
- base: [
78
- 'border-primary/50 text-primary-500 hover:(bg-primary-50)',
79
- 'dark:hover:bg-primary-950',
80
- ],
81
- },
82
- },
83
- {
84
- color: 'surface',
85
- variant: 'outline',
86
- class: {
87
- base: [
88
- 'border-surface-accented text-surface-inverted hover:bg-surface/10',
89
- 'dark:hover:bg-surface-800',
90
- ],
91
- },
92
- },
93
- {
94
- color: 'info',
95
- variant: 'outline',
96
- class: {
97
- base: ['border-info/50 text-blue-500 hover:bg-info/10', 'dark:hover:bg-info-950'],
98
- },
99
- },
100
- {
101
- color: 'success',
102
- variant: 'outline',
103
- class: {
104
- base: [
105
- 'border-success/50 text-success-500 hover:bg-success/10',
106
- 'dark:hover:bg-success-950',
107
- ],
108
- },
109
- },
110
- {
111
- color: 'error',
112
- variant: 'outline',
113
- class: {
114
- base: ['border-red/50 text-red-500 hover:bg-red/10', 'dark:hover:bg-red-950'],
115
- },
116
- },
117
- {
118
- color: 'warning',
119
- variant: 'outline',
120
- class: {
121
- base: [
122
- 'border-warning/50 text-warning-500 hover:(bg-warning/10)',
123
- 'dark:hover:bg-warning-950',
124
- ],
125
- },
126
- },
127
- {
128
- color: 'primary',
129
- variant: 'soft',
130
- class: 'bg-primary-50 text-primary-500 hover:(bg-primary-100)',
131
- },
132
- {
133
- color: 'surface',
134
- variant: 'soft',
135
- class: 'bg-surface-100 text-surface-800 hover:(bg-surface-200)',
136
- },
137
- {
138
- color: 'info',
139
- variant: 'soft',
140
- class: 'bg-blue-100 text-blue-500 hover:(bg-blue-50)',
141
- },
142
- {
143
- color: 'success',
144
- variant: 'soft',
145
- class: 'bg-green-100 text-green-500 hover:(bg-green-50)',
146
- },
147
- {
148
- color: 'error',
149
- variant: 'soft',
150
- class: 'bg-red-100 text-red-500 hover:(bg-red-50)',
151
- },
152
- {
153
- color: 'warning',
154
- variant: 'soft',
155
- class: 'bg-yellow-100 text-yellow-500 hover:(bg-yellow-50)',
156
- },
157
- {
158
- color: 'primary',
159
- variant: 'subtle',
160
- class: 'bg-primary-50 text-primary-500 border-primary-200 hover:(bg-primary-100)',
161
- },
162
- {
163
- color: 'surface',
164
- variant: 'subtle',
165
- class: 'bg-surface-50 text-surface-800 border-surface-300 hover:(bg-surface-100)',
166
- },
167
- {
168
- color: 'info',
169
- variant: 'subtle',
170
- class: 'bg-blue-50 text-blue-600 border-blue-200 hover:(bg-blue-100)',
171
- },
172
- {
173
- color: 'success',
174
- variant: 'subtle',
175
- class: 'bg-green-100 text-green-600 border-green-300 hover:(bg-green-100)',
176
- },
177
- {
178
- color: 'error',
179
- variant: 'subtle',
180
- class: 'bg-red-50 text-red-600 border-red-200 hover:(bg-red-100)',
181
- },
182
- {
183
- color: 'warning',
184
- variant: 'subtle',
185
- class: 'bg-yellow-50 text-yellow-600 border-yellow-300 hover:(bg-yellow-100)',
186
- },
187
- {
188
- color: 'primary',
189
- variant: 'ghost',
190
- class: 'text-primary-500 hover:(bg-primary-100)',
191
- },
192
- {
193
- color: 'surface',
194
- variant: 'ghost',
195
- class: 'text-surface-inverted hover:(bg-surface-elevated text-surface-inverted)',
196
- },
197
- {
198
- color: 'info',
199
- variant: 'ghost',
200
- class: 'text-blue-600 hover:(bg-blue-100)',
201
- },
202
- {
203
- color: 'success',
204
- variant: 'ghost',
205
- class: 'text-green-600 hover:(bg-green-100)',
206
- },
207
- {
208
- color: 'error',
209
- variant: 'ghost',
210
- class: 'text-red-600 hover:(bg-red-100)',
211
- },
212
- {
213
- color: 'warning',
214
- variant: 'ghost',
215
- class: 'text-yellow-600 hover:(bg-yellow-100)',
216
- },
217
- {
218
- color: 'primary',
219
- variant: 'link',
220
- class: 'text-primary-500 hover:(text-primary-400)',
221
- },
222
- {
223
- color: 'surface',
224
- variant: 'link',
225
- class: 'text-muted hover:(text-surface-inverted)',
226
- },
227
- {
228
- color: 'info',
229
- variant: 'link',
230
- class: 'text-blue-500 hover:(text-blue-400)',
231
- },
232
- {
233
- color: 'success',
234
- variant: 'link',
235
- class: 'text-green-500 hover:(text-green-400)',
236
- },
237
- {
238
- color: 'error',
239
- variant: 'link',
240
- class: 'text-red-500 hover:(text-red-400)',
241
- },
242
- {
243
- color: 'warning',
244
- variant: 'link',
245
- class: 'text-yellow-500 hover:(text-yellow-400)',
246
- },
247
- ],
248
- });
@@ -1,2 +0,0 @@
1
- export { default as Input } from './input.svelte';
2
- export * from './style.js';
@@ -1,103 +0,0 @@
1
- <script lang="ts">
2
- import { isComponent, isSnippet } from '../../utilities.svelte.js';
3
- import { type InputProps, INPUT_VARIANTS } from './index.js';
4
- import { maska } from 'maska/svelte';
5
-
6
- let {
7
- type,
8
- value = $bindable(),
9
- color = 'primary',
10
- variant = 'outline',
11
- size = 'md',
12
- icon,
13
- iconposition,
14
- disabled,
15
- highlight,
16
- leading,
17
- loading,
18
- loadingicon = 'i-lucide-loader-circle',
19
- required,
20
- trailing,
21
- mask,
22
- ui = {},
23
- ...rest
24
- }: InputProps = $props();
25
- const id = $props.id();
26
-
27
- const variants = $derived(
28
- INPUT_VARIANTS({
29
- size,
30
- color,
31
- variant,
32
- highlight,
33
- loading,
34
- leading: !!leading || (!!icon && iconposition === 'leading') || loading,
35
- trailing: !!trailing || (!!icon && iconposition === 'trailing'),
36
- type: type === 'file' ? 'file' : undefined,
37
- }),
38
- );
39
- </script>
40
-
41
- <div class={variants.root({ class: ui.root })}>
42
- {#if leading || (icon && iconposition === 'leading') || loading}
43
- {@const TrailingIcon = loading ? loadingicon : icon}
44
-
45
- <span class={variants.leading({ class: ui.leading })}>
46
- {#if !!leading && !loading}
47
- {#if typeof leading === 'string'}
48
- {leading}
49
- {:else if isSnippet(leading)}
50
- {@render leading()}
51
- {:else if isComponent(leading)}
52
- {@const Leading = leading}
53
- <Leading />
54
- {/if}
55
- {:else if typeof TrailingIcon === 'string'}
56
- <div
57
- class={variants.icon({
58
- class: [loading && 'animate-spin', TrailingIcon, ui.icon],
59
- })}
60
- ></div>
61
- {:else if isSnippet(TrailingIcon)}
62
- {@render TrailingIcon()}
63
- {:else if isComponent(TrailingIcon)}
64
- <TrailingIcon class={variants.icon({ class: [ui.icon] })} />
65
- {/if}
66
- </span>
67
- {/if}
68
-
69
- <input
70
- {id}
71
- {type}
72
- {...rest}
73
- class={variants.base({ class: [ui.base] })}
74
- {...rest}
75
- use:maska={mask}
76
- />
77
-
78
- {#if trailing || (icon && iconposition === 'trailing')}
79
- <span class={variants.trailing({ class: ui.trailing })}>
80
- {#if !!trailing}
81
- {#if typeof trailing === 'string'}
82
- {trailing}
83
- {:else if isSnippet(trailing)}
84
- {@render trailing()}
85
- {:else if isComponent(trailing)}
86
- {@const Trailing = trailing}
87
- <Trailing />
88
- {/if}
89
- {:else if typeof icon === 'string'}
90
- <div
91
- class={variants.icon({
92
- class: [icon, ui.icon],
93
- })}
94
- ></div>
95
- {:else if isSnippet(icon)}
96
- {@render icon()}
97
- {:else if isComponent(icon)}
98
- {@const Icon = icon}
99
- <Icon class={variants.icon({ class: [ui.icon] })} />
100
- {/if}
101
- </span>
102
- {/if}
103
- </div>
@@ -1,4 +0,0 @@
1
- import { type InputProps } from './index.js';
2
- declare const Input: import("svelte").Component<InputProps, {}, "value">;
3
- type Input = ReturnType<typeof Input>;
4
- export default Input;