uisv 0.0.13 → 0.0.14

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 (26) hide show
  1. package/dist/components/button.svelte +409 -0
  2. package/dist/components/{button/index.d.ts → button.svelte.d.ts} +4 -3
  3. package/dist/components/index.d.ts +6 -3
  4. package/dist/components/index.js +6 -3
  5. package/dist/components/input-time.svelte +234 -0
  6. package/dist/components/input-time.svelte.d.ts +54 -0
  7. package/dist/components/input.svelte +285 -0
  8. package/dist/components/{input/index.d.ts → input.svelte.d.ts} +5 -4
  9. package/dist/components/tabs.svelte +1 -2
  10. package/dist/vite.d.ts +2 -1
  11. package/dist/vite.js +14 -39
  12. package/package.json +35 -38
  13. package/dist/components/button/button.svelte +0 -105
  14. package/dist/components/button/button.svelte.d.ts +0 -4
  15. package/dist/components/button/index.js +0 -4
  16. package/dist/components/button/style.d.ts +0 -148
  17. package/dist/components/button/style.js +0 -248
  18. package/dist/components/input/index.js +0 -2
  19. package/dist/components/input/input.svelte +0 -103
  20. package/dist/components/input/input.svelte.d.ts +0 -4
  21. package/dist/components/input/style.d.ts +0 -316
  22. package/dist/components/input/style.js +0 -128
  23. package/dist/components/input-time/index.d.ts +0 -375
  24. package/dist/components/input-time/index.js +0 -144
  25. package/dist/components/input-time/input-time.svelte +0 -39
  26. package/dist/components/input-time/input-time.svelte.d.ts +0 -4
package/dist/components/input-time/index.d.ts DELETED
@@ -1,375 +0,0 @@
1
- import { type PropColor } from '../../index.js';
2
- import type { Component, Snippet } from 'svelte';
3
- import type { ClassNameValue } from 'tailwind-merge';
4
- import { Time } from '@internationalized/date';
5
- export { Time };
6
- export { default as InputTime } from './input-time.svelte';
7
- export type InputTimeProps = {
8
- id?: string;
9
- name?: string;
10
- hourcycle?: 12 | 24;
11
- max?: Time;
12
- min?: Time;
13
- /**
14
- * The placeholder text when the input is empty.
15
- */
16
- placeholder?: string;
17
- /**
18
- * @default primary
19
- */
20
- color?: PropColor;
21
- /**
22
- * @default outline
23
- */
24
- variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
25
- /**
26
- * @default md
27
- */
28
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
29
- /**
30
- * @default off
31
- */
32
- autocomplete?: 'on' | 'off';
33
- /**
34
- * @default false
35
- */
36
- autofocus?: boolean | number;
37
- disabled?: boolean;
38
- /**
39
- * Highlight the ring color like a focus state.
40
- */
41
- highlight?: boolean;
42
- value?: Time;
43
- icon?: string | Snippet | Component;
44
- ui?: {
45
- base?: ClassNameValue;
46
- leading?: ClassNameValue;
47
- icon?: ClassNameValue;
48
- trailing?: ClassNameValue;
49
- };
50
- };
51
- export declare const INPUT_TIME_VARIANTS: import("tailwind-variants").TVReturnType<{
52
- fieldGroup: {
53
- horizontal: {
54
- root: string;
55
- };
56
- vertical: {
57
- root: string;
58
- };
59
- };
60
- size: {
61
- xs: {
62
- root: string;
63
- leading: string;
64
- trailing: string;
65
- icon: string;
66
- segment: string;
67
- };
68
- sm: {
69
- root: string;
70
- leading: string;
71
- trailing: string;
72
- icon: string;
73
- segment: string;
74
- };
75
- md: {
76
- root: string;
77
- leading: string;
78
- trailing: string;
79
- icon: string;
80
- segment: string;
81
- };
82
- lg: {
83
- root: string;
84
- leading: string;
85
- trailing: string;
86
- icon: string;
87
- segment: string;
88
- };
89
- xl: {
90
- root: string;
91
- leading: string;
92
- trailing: string;
93
- icon: string;
94
- segment: string;
95
- };
96
- };
97
- variant: {
98
- outline: {
99
- root: string;
100
- };
101
- soft: {
102
- root: string;
103
- };
104
- subtle: {
105
- root: string;
106
- };
107
- ghost: {
108
- root: string;
109
- };
110
- none: {
111
- root: string;
112
- };
113
- };
114
- color: {
115
- primary: {
116
- root: string;
117
- };
118
- surface: {
119
- root: string;
120
- };
121
- info: {
122
- root: string;
123
- };
124
- success: {
125
- root: string;
126
- };
127
- warning: {
128
- root: string;
129
- };
130
- error: {
131
- root: string;
132
- };
133
- };
134
- leading: {
135
- false: {
136
- leading: string;
137
- };
138
- };
139
- trailing: {
140
- false: {
141
- trailing: string;
142
- };
143
- };
144
- loading: {
145
- true: string;
146
- };
147
- highlight: {
148
- true: string;
149
- };
150
- type: {
151
- file: string;
152
- };
153
- }, {
154
- root: string;
155
- leading: string;
156
- trailing: string;
157
- icon: string;
158
- segment: string[];
159
- }, undefined, {
160
- fieldGroup: {
161
- horizontal: {
162
- root: string;
163
- };
164
- vertical: {
165
- root: string;
166
- };
167
- };
168
- size: {
169
- xs: {
170
- root: string;
171
- leading: string;
172
- trailing: string;
173
- icon: string;
174
- segment: string;
175
- };
176
- sm: {
177
- root: string;
178
- leading: string;
179
- trailing: string;
180
- icon: string;
181
- segment: string;
182
- };
183
- md: {
184
- root: string;
185
- leading: string;
186
- trailing: string;
187
- icon: string;
188
- segment: string;
189
- };
190
- lg: {
191
- root: string;
192
- leading: string;
193
- trailing: string;
194
- icon: string;
195
- segment: string;
196
- };
197
- xl: {
198
- root: string;
199
- leading: string;
200
- trailing: string;
201
- icon: string;
202
- segment: string;
203
- };
204
- };
205
- variant: {
206
- outline: {
207
- root: string;
208
- };
209
- soft: {
210
- root: string;
211
- };
212
- subtle: {
213
- root: string;
214
- };
215
- ghost: {
216
- root: string;
217
- };
218
- none: {
219
- root: string;
220
- };
221
- };
222
- color: {
223
- primary: {
224
- root: string;
225
- };
226
- surface: {
227
- root: string;
228
- };
229
- info: {
230
- root: string;
231
- };
232
- success: {
233
- root: string;
234
- };
235
- warning: {
236
- root: string;
237
- };
238
- error: {
239
- root: string;
240
- };
241
- };
242
- leading: {
243
- false: {
244
- leading: string;
245
- };
246
- };
247
- trailing: {
248
- false: {
249
- trailing: string;
250
- };
251
- };
252
- loading: {
253
- true: string;
254
- };
255
- highlight: {
256
- true: string;
257
- };
258
- type: {
259
- file: string;
260
- };
261
- }, {
262
- root: string;
263
- leading: string;
264
- trailing: string;
265
- icon: string;
266
- segment: string[];
267
- }, import("tailwind-variants").TVReturnType<{
268
- fieldGroup: {
269
- horizontal: {
270
- root: string;
271
- };
272
- vertical: {
273
- root: string;
274
- };
275
- };
276
- size: {
277
- xs: {
278
- root: string;
279
- leading: string;
280
- trailing: string;
281
- icon: string;
282
- segment: string;
283
- };
284
- sm: {
285
- root: string;
286
- leading: string;
287
- trailing: string;
288
- icon: string;
289
- segment: string;
290
- };
291
- md: {
292
- root: string;
293
- leading: string;
294
- trailing: string;
295
- icon: string;
296
- segment: string;
297
- };
298
- lg: {
299
- root: string;
300
- leading: string;
301
- trailing: string;
302
- icon: string;
303
- segment: string;
304
- };
305
- xl: {
306
- root: string;
307
- leading: string;
308
- trailing: string;
309
- icon: string;
310
- segment: string;
311
- };
312
- };
313
- variant: {
314
- outline: {
315
- root: string;
316
- };
317
- soft: {
318
- root: string;
319
- };
320
- subtle: {
321
- root: string;
322
- };
323
- ghost: {
324
- root: string;
325
- };
326
- none: {
327
- root: string;
328
- };
329
- };
330
- color: {
331
- primary: {
332
- root: string;
333
- };
334
- surface: {
335
- root: string;
336
- };
337
- info: {
338
- root: string;
339
- };
340
- success: {
341
- root: string;
342
- };
343
- warning: {
344
- root: string;
345
- };
346
- error: {
347
- root: string;
348
- };
349
- };
350
- leading: {
351
- false: {
352
- leading: string;
353
- };
354
- };
355
- trailing: {
356
- false: {
357
- trailing: string;
358
- };
359
- };
360
- loading: {
361
- true: string;
362
- };
363
- highlight: {
364
- true: string;
365
- };
366
- type: {
367
- file: string;
368
- };
369
- }, {
370
- root: string;
371
- leading: string;
372
- trailing: string;
373
- icon: string;
374
- segment: string[];
375
- }, undefined, unknown, unknown, undefined>>;
package/dist/components/input-time/index.js DELETED
@@ -1,144 +0,0 @@
1
- import {} from '../../index.js';
2
- import { tv } from 'tailwind-variants';
3
- import { Time } from '@internationalized/date';
4
- export { Time };
5
- export { default as InputTime } from './input-time.svelte';
6
- export const INPUT_TIME_VARIANTS = tv({
7
- slots: {
8
- root: 'inline-flex items-center rounded transition-all ring ring-inset ring-transparent',
9
- leading: 'text-muted',
10
- trailing: 'text-muted',
11
- icon: '',
12
- segment: [
13
- 'rounded text-center outline-hidden transition-all focus:bg-surface-accented shrink',
14
- 'aria-[valuetext="Empty"]:text-dimmed data-[segment="literal"]:(text-muted px-1) data-invalid:text-error data-disabled:(cursor-not-allowed opacity-75)',
15
- ],
16
- },
17
- variants: {
18
- fieldGroup: {
19
- horizontal: {
20
- root: '',
21
- },
22
- vertical: {
23
- root: '',
24
- },
25
- },
26
- size: {
27
- xs: {
28
- root: 'px-2 h-6 text-xs',
29
- leading: 'ps-2',
30
- trailing: 'pe-2',
31
- icon: 'size-4',
32
- segment: 'px-1',
33
- },
34
- sm: {
35
- root: 'px-2.5 h-7 text-xs',
36
- leading: 'ps-2.5',
37
- trailing: 'pe-2.5',
38
- icon: 'size-4',
39
- segment: 'px-1',
40
- },
41
- md: {
42
- root: 'px-2.5 h-8 text-sm',
43
- leading: 'ps-2.5',
44
- trailing: 'pe-2.5',
45
- icon: 'size-5',
46
- segment: 'px-2',
47
- },
48
- lg: {
49
- root: 'px-3 h-9 text-sm',
50
- leading: 'ps-3',
51
- trailing: 'pe-3',
52
- icon: 'size-5',
53
- segment: 'px-3',
54
- },
55
- xl: {
56
- root: 'px-3 h-10 text-base',
57
- leading: 'ps-3',
58
- trailing: 'pe-3',
59
- icon: 'size-6',
60
- segment: 'px-3',
61
- },
62
- },
63
- variant: {
64
- outline: { root: 'ring ring-surface-accented' },
65
- soft: { root: 'bg-surface-muted hover:bg-surface-elevated focus-within:bg-surface-elevated' },
66
- subtle: { root: 'ring ring-accented' },
67
- ghost: { root: 'hover:bg-surface-elevated focus-within:bg-surface-elevated' },
68
- none: { root: '' },
69
- },
70
- color: {
71
- primary: { root: '' },
72
- surface: { root: '' },
73
- info: { root: '' },
74
- success: { root: '' },
75
- warning: { root: '' },
76
- error: { root: '' },
77
- },
78
- leading: {
79
- false: { leading: 'hidden' },
80
- },
81
- trailing: {
82
- false: { trailing: 'hidden' },
83
- },
84
- loading: {
85
- true: '',
86
- },
87
- highlight: {
88
- true: '',
89
- },
90
- type: {
91
- file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
92
- },
93
- },
94
- compoundVariants: [
95
- {
96
- color: 'primary',
97
- variant: ['outline', 'subtle'],
98
- highlight: true,
99
- class: {
100
- root: 'ring-primary-500 ring-2',
101
- },
102
- },
103
- {
104
- color: 'surface',
105
- variant: ['outline', 'subtle'],
106
- highlight: true,
107
- class: {
108
- root: 'ring-surface-800 ring-2',
109
- },
110
- },
111
- {
112
- color: 'info',
113
- variant: ['outline', 'subtle'],
114
- highlight: true,
115
- class: {
116
- root: 'ring-info-500 ring-2',
117
- },
118
- },
119
- {
120
- color: 'success',
121
- variant: ['outline', 'subtle'],
122
- highlight: true,
123
- class: {
124
- root: 'ring-success-500 ring-2',
125
- },
126
- },
127
- {
128
- color: 'warning',
129
- variant: ['outline', 'subtle'],
130
- highlight: true,
131
- class: {
132
- root: 'ring-warning-500 ring-2',
133
- },
134
- },
135
- {
136
- color: 'error',
137
- variant: ['outline', 'subtle'],
138
- highlight: true,
139
- class: {
140
- root: 'ring-error-500 ring-2',
141
- },
142
- },
143
- ],
144
- });
package/dist/components/input-time/input-time.svelte DELETED
@@ -1,39 +0,0 @@
1
- <script lang="ts">
2
- import { isComponent, isSnippet } from '../../utilities.svelte.js';
3
- import { type InputTimeProps, INPUT_TIME_VARIANTS, Time } from './index.js';
4
- import { TimeField } from 'bits-ui';
5
-
6
- let {
7
- hourcycle = 12,
8
- value = $bindable(),
9
- color = 'primary',
10
- variant = 'outline',
11
- size = 'md',
12
- icon,
13
- disabled,
14
- highlight,
15
- ui = {},
16
- ...rest
17
- }: InputTimeProps = $props();
18
-
19
- const variants = $derived(
20
- INPUT_TIME_VARIANTS({
21
- size,
22
- color,
23
- variant,
24
- highlight,
25
- }),
26
- );
27
- </script>
28
-
29
- <TimeField.Root bind:value hourCycle={hourcycle}>
30
- <TimeField.Input name="hello" class={variants.root({ class: ui.root })}>
31
- {#snippet children({ segments })}
32
- {#each segments as { part, value }, i (part + i)}
33
- <TimeField.Segment {part} class={variants.segment({ class: ui.segment })}>
34
- {value}
35
- </TimeField.Segment>
36
- {/each}
37
- {/snippet}
38
- </TimeField.Input>
39
- </TimeField.Root>
package/dist/components/input-time/input-time.svelte.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import { type InputTimeProps } from './index.js';
2
- declare const InputTime: import("svelte").Component<InputTimeProps, {}, "value">;
3
- type InputTime = ReturnType<typeof InputTime>;
4
- export default InputTime;