ui-ingredients 0.29.0 → 0.30.0
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.
|
@@ -1,88 +1,91 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
|
3
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
|
4
|
-
import type {
|
|
5
|
-
CreateDatePickerProps,
|
|
6
|
-
CreateDatePickerReturn,
|
|
7
|
-
} from './create-date-picker.svelte.js';
|
|
8
|
-
|
|
9
|
-
export interface DatePickerProps
|
|
10
|
-
extends Assign<
|
|
11
|
-
HtmlIngredientProps<'div', HTMLDivElement, CreateDatePickerReturn>,
|
|
12
|
-
CreateDatePickerProps
|
|
13
|
-
>,
|
|
14
|
-
PresenceStrategyProps {}
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<script lang="ts">
|
|
18
|
-
import {mergeProps, reflect} from '@zag-js/svelte';
|
|
19
|
-
import {createSplitProps} from '../create-split-props.js';
|
|
20
|
-
import {createPresence} from '../presence/create-presence.svelte.js';
|
|
21
|
-
import {setPresenceContext} from '../presence/presence-context.svelte.js';
|
|
22
|
-
import {createDatePicker} from './create-date-picker.svelte.js';
|
|
23
|
-
import {setDatePickerContext} from './date-picker-context.svelte.js';
|
|
24
|
-
|
|
25
|
-
let {
|
|
26
|
-
ref = $bindable(null),
|
|
27
|
-
asChild,
|
|
28
|
-
children,
|
|
29
|
-
...props
|
|
30
|
-
}: DatePickerProps = $props();
|
|
31
|
-
|
|
32
|
-
let [presenceStrategyProps, rest] = $derived(
|
|
33
|
-
createSplitProps<PresenceStrategyProps>([])(props),
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
let [createDatePickerProps, localProps] = $derived(
|
|
37
|
-
createSplitProps<CreateDatePickerProps>([
|
|
38
|
-
'closeOnSelect',
|
|
39
|
-
'disabled',
|
|
40
|
-
'fixedWeeks',
|
|
41
|
-
'focusedValue',
|
|
42
|
-
'format',
|
|
43
|
-
'id',
|
|
44
|
-
'ids',
|
|
45
|
-
'isDateUnavailable',
|
|
46
|
-
'locale',
|
|
47
|
-
'max',
|
|
48
|
-
'min',
|
|
49
|
-
'name',
|
|
50
|
-
'numOfMonths',
|
|
51
|
-
'onFocusChange',
|
|
52
|
-
'onOpenChange',
|
|
53
|
-
'onValueChange',
|
|
54
|
-
'onViewChange',
|
|
55
|
-
'open',
|
|
56
|
-
'openControlled',
|
|
57
|
-
'positioning',
|
|
58
|
-
'readOnly',
|
|
59
|
-
'selectionMode',
|
|
60
|
-
'startOfWeek',
|
|
61
|
-
'timeZone',
|
|
62
|
-
'translations',
|
|
63
|
-
'value',
|
|
64
|
-
'view',
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
{
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
|
3
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
|
4
|
+
import type {
|
|
5
|
+
CreateDatePickerProps,
|
|
6
|
+
CreateDatePickerReturn,
|
|
7
|
+
} from './create-date-picker.svelte.js';
|
|
8
|
+
|
|
9
|
+
export interface DatePickerProps
|
|
10
|
+
extends Assign<
|
|
11
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateDatePickerReturn>,
|
|
12
|
+
CreateDatePickerProps
|
|
13
|
+
>,
|
|
14
|
+
PresenceStrategyProps {}
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<script lang="ts">
|
|
18
|
+
import {mergeProps, reflect} from '@zag-js/svelte';
|
|
19
|
+
import {createSplitProps} from '../create-split-props.js';
|
|
20
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
|
21
|
+
import {setPresenceContext} from '../presence/presence-context.svelte.js';
|
|
22
|
+
import {createDatePicker} from './create-date-picker.svelte.js';
|
|
23
|
+
import {setDatePickerContext} from './date-picker-context.svelte.js';
|
|
24
|
+
|
|
25
|
+
let {
|
|
26
|
+
ref = $bindable(null),
|
|
27
|
+
asChild,
|
|
28
|
+
children,
|
|
29
|
+
...props
|
|
30
|
+
}: DatePickerProps = $props();
|
|
31
|
+
|
|
32
|
+
let [presenceStrategyProps, rest] = $derived(
|
|
33
|
+
createSplitProps<PresenceStrategyProps>([])(props),
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
let [createDatePickerProps, localProps] = $derived(
|
|
37
|
+
createSplitProps<CreateDatePickerProps>([
|
|
38
|
+
'closeOnSelect',
|
|
39
|
+
'disabled',
|
|
40
|
+
'fixedWeeks',
|
|
41
|
+
'focusedValue',
|
|
42
|
+
'format',
|
|
43
|
+
'id',
|
|
44
|
+
'ids',
|
|
45
|
+
'isDateUnavailable',
|
|
46
|
+
'locale',
|
|
47
|
+
'max',
|
|
48
|
+
'min',
|
|
49
|
+
'name',
|
|
50
|
+
'numOfMonths',
|
|
51
|
+
'onFocusChange',
|
|
52
|
+
'onOpenChange',
|
|
53
|
+
'onValueChange',
|
|
54
|
+
'onViewChange',
|
|
55
|
+
'open',
|
|
56
|
+
'openControlled',
|
|
57
|
+
'positioning',
|
|
58
|
+
'readOnly',
|
|
59
|
+
'selectionMode',
|
|
60
|
+
'startOfWeek',
|
|
61
|
+
'timeZone',
|
|
62
|
+
'translations',
|
|
63
|
+
'value',
|
|
64
|
+
'view',
|
|
65
|
+
'minView',
|
|
66
|
+
'maxView',
|
|
67
|
+
'placeholder',
|
|
68
|
+
])(rest),
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
let datePicker = createDatePicker(reflect(() => createDatePickerProps));
|
|
72
|
+
let presence = createPresence(
|
|
73
|
+
reflect(() => ({
|
|
74
|
+
...presenceStrategyProps,
|
|
75
|
+
present: datePicker.open,
|
|
76
|
+
})),
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
let mergedProps = $derived(mergeProps(datePicker.getRootProps(), localProps));
|
|
80
|
+
|
|
81
|
+
setDatePickerContext(datePicker);
|
|
82
|
+
setPresenceContext(presence);
|
|
83
|
+
</script>
|
|
84
|
+
|
|
85
|
+
{#if asChild}
|
|
86
|
+
{@render asChild(mergedProps, datePicker)}
|
|
87
|
+
{:else}
|
|
88
|
+
<div bind:this={ref} {...mergedProps}>
|
|
89
|
+
{@render children?.(datePicker)}
|
|
90
|
+
</div>
|
|
91
|
+
{/if}
|
|
@@ -1,29 +1,33 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
{
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
|
3
|
+
|
|
4
|
+
import type {DropzoneProps} from '@zag-js/file-upload';
|
|
5
|
+
export interface FileUploadDropzoneProps
|
|
6
|
+
extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, DropzoneProps> {}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
import {mergeProps} from '@zag-js/svelte';
|
|
11
|
+
import {getFileUploadContext} from './file-upload-context.svelte.js';
|
|
12
|
+
|
|
13
|
+
let {
|
|
14
|
+
ref = $bindable(null),
|
|
15
|
+
asChild,
|
|
16
|
+
children,
|
|
17
|
+
disableClick,
|
|
18
|
+
...props
|
|
19
|
+
}: FileUploadDropzoneProps = $props();
|
|
20
|
+
|
|
21
|
+
let fileUpload = getFileUploadContext();
|
|
22
|
+
let mergedProps = $derived(
|
|
23
|
+
mergeProps(fileUpload.getDropzoneProps({disableClick}), props),
|
|
24
|
+
);
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
{#if asChild}
|
|
28
|
+
{@render asChild(mergedProps)}
|
|
29
|
+
{:else}
|
|
30
|
+
<div bind:this={ref} {...mergedProps}>
|
|
31
|
+
{@render children?.()}
|
|
32
|
+
</div>
|
|
33
|
+
{/if}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { HtmlIngredientProps } from '../types.js';
|
|
2
|
-
|
|
1
|
+
import type { Assign, HtmlIngredientProps } from '../types.js';
|
|
2
|
+
import type { DropzoneProps } from '@zag-js/file-upload';
|
|
3
|
+
export interface FileUploadDropzoneProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, DropzoneProps> {
|
|
3
4
|
}
|
|
4
5
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
5
6
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
package/package.json
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
"name": "ui-ingredients",
|
|
3
3
|
"type": "module",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "0.
|
|
6
|
-
"packageManager": "pnpm@9.15.
|
|
5
|
+
"version": "0.30.0",
|
|
6
|
+
"packageManager": "pnpm@9.15.4",
|
|
7
7
|
"svelte": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
9
|
"exports": {
|
|
@@ -308,53 +308,53 @@
|
|
|
308
308
|
"release": "release-it"
|
|
309
309
|
},
|
|
310
310
|
"dependencies": {
|
|
311
|
-
"@zag-js/accordion": "^0.
|
|
312
|
-
"@zag-js/anatomy": "^0.
|
|
313
|
-
"@zag-js/angle-slider": "^0.
|
|
314
|
-
"@zag-js/auto-resize": "^0.
|
|
315
|
-
"@zag-js/avatar": "^0.
|
|
316
|
-
"@zag-js/carousel": "^0.
|
|
317
|
-
"@zag-js/checkbox": "^0.
|
|
318
|
-
"@zag-js/clipboard": "^0.
|
|
319
|
-
"@zag-js/collapsible": "^0.
|
|
320
|
-
"@zag-js/color-picker": "^0.
|
|
321
|
-
"@zag-js/combobox": "^0.
|
|
322
|
-
"@zag-js/core": "^0.
|
|
323
|
-
"@zag-js/date-picker": "^0.
|
|
324
|
-
"@zag-js/dialog": "^0.
|
|
325
|
-
"@zag-js/dom-query": "^0.
|
|
326
|
-
"@zag-js/editable": "^0.
|
|
327
|
-
"@zag-js/file-upload": "^0.
|
|
328
|
-
"@zag-js/floating-panel": "^0.
|
|
329
|
-
"@zag-js/highlight-word": "^0.
|
|
330
|
-
"@zag-js/hover-card": "^0.
|
|
331
|
-
"@zag-js/i18n-utils": "^0.
|
|
332
|
-
"@zag-js/menu": "^0.
|
|
333
|
-
"@zag-js/number-input": "^0.
|
|
334
|
-
"@zag-js/pagination": "^0.
|
|
335
|
-
"@zag-js/pin-input": "^0.
|
|
336
|
-
"@zag-js/popover": "^0.
|
|
337
|
-
"@zag-js/presence": "^0.
|
|
338
|
-
"@zag-js/progress": "^0.
|
|
339
|
-
"@zag-js/qr-code": "^0.
|
|
340
|
-
"@zag-js/radio-group": "^0.
|
|
341
|
-
"@zag-js/rating-group": "^0.
|
|
342
|
-
"@zag-js/select": "^0.
|
|
343
|
-
"@zag-js/signature-pad": "^0.
|
|
344
|
-
"@zag-js/slider": "^0.
|
|
345
|
-
"@zag-js/splitter": "^0.
|
|
346
|
-
"@zag-js/steps": "^0.
|
|
347
|
-
"@zag-js/svelte": "^0.
|
|
348
|
-
"@zag-js/switch": "^0.
|
|
349
|
-
"@zag-js/tabs": "^0.
|
|
350
|
-
"@zag-js/tags-input": "^0.
|
|
351
|
-
"@zag-js/time-picker": "^0.
|
|
352
|
-
"@zag-js/timer": "^0.
|
|
353
|
-
"@zag-js/toast": "^0.
|
|
354
|
-
"@zag-js/toggle-group": "^0.
|
|
355
|
-
"@zag-js/tooltip": "^0.
|
|
356
|
-
"@zag-js/tour": "^0.
|
|
357
|
-
"@zag-js/tree-view": "^0.
|
|
311
|
+
"@zag-js/accordion": "^0.82.0",
|
|
312
|
+
"@zag-js/anatomy": "^0.82.0",
|
|
313
|
+
"@zag-js/angle-slider": "^0.82.0",
|
|
314
|
+
"@zag-js/auto-resize": "^0.82.0",
|
|
315
|
+
"@zag-js/avatar": "^0.82.0",
|
|
316
|
+
"@zag-js/carousel": "^0.82.0",
|
|
317
|
+
"@zag-js/checkbox": "^0.82.0",
|
|
318
|
+
"@zag-js/clipboard": "^0.82.0",
|
|
319
|
+
"@zag-js/collapsible": "^0.82.0",
|
|
320
|
+
"@zag-js/color-picker": "^0.82.0",
|
|
321
|
+
"@zag-js/combobox": "^0.82.0",
|
|
322
|
+
"@zag-js/core": "^0.82.0",
|
|
323
|
+
"@zag-js/date-picker": "^0.82.0",
|
|
324
|
+
"@zag-js/dialog": "^0.82.0",
|
|
325
|
+
"@zag-js/dom-query": "^0.82.0",
|
|
326
|
+
"@zag-js/editable": "^0.82.0",
|
|
327
|
+
"@zag-js/file-upload": "^0.82.0",
|
|
328
|
+
"@zag-js/floating-panel": "^0.82.0",
|
|
329
|
+
"@zag-js/highlight-word": "^0.82.0",
|
|
330
|
+
"@zag-js/hover-card": "^0.82.0",
|
|
331
|
+
"@zag-js/i18n-utils": "^0.82.0",
|
|
332
|
+
"@zag-js/menu": "^0.82.0",
|
|
333
|
+
"@zag-js/number-input": "^0.82.0",
|
|
334
|
+
"@zag-js/pagination": "^0.82.0",
|
|
335
|
+
"@zag-js/pin-input": "^0.82.0",
|
|
336
|
+
"@zag-js/popover": "^0.82.0",
|
|
337
|
+
"@zag-js/presence": "^0.82.0",
|
|
338
|
+
"@zag-js/progress": "^0.82.0",
|
|
339
|
+
"@zag-js/qr-code": "^0.82.0",
|
|
340
|
+
"@zag-js/radio-group": "^0.82.0",
|
|
341
|
+
"@zag-js/rating-group": "^0.82.0",
|
|
342
|
+
"@zag-js/select": "^0.82.0",
|
|
343
|
+
"@zag-js/signature-pad": "^0.82.0",
|
|
344
|
+
"@zag-js/slider": "^0.82.0",
|
|
345
|
+
"@zag-js/splitter": "^0.82.0",
|
|
346
|
+
"@zag-js/steps": "^0.82.0",
|
|
347
|
+
"@zag-js/svelte": "^0.82.0",
|
|
348
|
+
"@zag-js/switch": "^0.82.0",
|
|
349
|
+
"@zag-js/tabs": "^0.82.0",
|
|
350
|
+
"@zag-js/tags-input": "^0.82.0",
|
|
351
|
+
"@zag-js/time-picker": "^0.82.0",
|
|
352
|
+
"@zag-js/timer": "^0.82.0",
|
|
353
|
+
"@zag-js/toast": "^0.82.0",
|
|
354
|
+
"@zag-js/toggle-group": "^0.82.0",
|
|
355
|
+
"@zag-js/tooltip": "^0.82.0",
|
|
356
|
+
"@zag-js/tour": "^0.82.0",
|
|
357
|
+
"@zag-js/tree-view": "^0.82.0",
|
|
358
358
|
"zagjs-legacy-svelte": "npm:@zag-js/svelte@0.77.1",
|
|
359
359
|
"zagjs-legacy-toast": "npm:@zag-js/toast@0.77.1"
|
|
360
360
|
},
|
|
@@ -362,31 +362,31 @@
|
|
|
362
362
|
"svelte": "^5.0.0"
|
|
363
363
|
},
|
|
364
364
|
"devDependencies": {
|
|
365
|
-
"@faker-js/faker": "^9.
|
|
366
|
-
"@sveltejs/adapter-vercel": "^5.5.
|
|
367
|
-
"@sveltejs/kit": "^2.
|
|
365
|
+
"@faker-js/faker": "^9.4.0",
|
|
366
|
+
"@sveltejs/adapter-vercel": "^5.5.3",
|
|
367
|
+
"@sveltejs/kit": "^2.16.0",
|
|
368
368
|
"@sveltejs/package": "^2.3.7",
|
|
369
369
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
370
370
|
"@testing-library/jest-dom": "^6.6.3",
|
|
371
371
|
"@testing-library/svelte": "^5.2.6",
|
|
372
|
-
"@testing-library/user-event": "^14.
|
|
372
|
+
"@testing-library/user-event": "^14.6.0",
|
|
373
373
|
"@types/jsdom": "^21.1.7",
|
|
374
374
|
"@untitled-theme/icons-svelte": "^0.14.1",
|
|
375
375
|
"autoprefixer": "^10.4.20",
|
|
376
376
|
"globals": "^15.14.0",
|
|
377
377
|
"jsdom": "^26.0.0",
|
|
378
|
-
"postcss": "^8.
|
|
379
|
-
"publint": "^0.3.
|
|
378
|
+
"postcss": "^8.5.1",
|
|
379
|
+
"publint": "^0.3.2",
|
|
380
380
|
"release-it": "^18.1.1",
|
|
381
381
|
"resize-observer-polyfill": "^1.5.1",
|
|
382
|
-
"svelte": "^5.
|
|
383
|
-
"svelte-check": "^4.1.
|
|
382
|
+
"svelte": "^5.19.0",
|
|
383
|
+
"svelte-check": "^4.1.4",
|
|
384
384
|
"tailwind-merge": "^2.6.0",
|
|
385
|
-
"tailwind-variants": "^0.3.
|
|
385
|
+
"tailwind-variants": "^0.3.1",
|
|
386
386
|
"tailwindcss": "^3.4.17",
|
|
387
387
|
"typescript": "^5.7.3",
|
|
388
388
|
"vite": "^6.0.7",
|
|
389
|
-
"vitest": "^
|
|
389
|
+
"vitest": "^3.0.2",
|
|
390
390
|
"vitest-axe": "^1.0.0-pre.3",
|
|
391
391
|
"vitest-canvas-mock": "^0.3.3"
|
|
392
392
|
},
|