ui-ingredients 0.19.0 → 0.20.0
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -13,6 +13,8 @@ export function createAngleSlider(props) {
|
|
|
13
13
|
getRootNode: environment?.getRootNode,
|
|
14
14
|
...props,
|
|
15
15
|
}));
|
|
16
|
+
// @ts-expect-error "Incompatible version of @zag-js/svelte"
|
|
16
17
|
const [state, send] = useMachine(angleSlider.machine(context), { context });
|
|
18
|
+
// @ts-expect-error "Incompatible version of @zag-js/svelte"
|
|
17
19
|
return reflect(() => angleSlider.connect(state, send, normalizeProps));
|
|
18
20
|
}
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
import type {Snippet} from 'svelte';
|
|
3
|
-
|
|
4
|
-
export interface EnvironmentProviderProps {
|
|
5
|
-
rootNode?:
|
|
6
|
-
| ShadowRoot
|
|
7
|
-
| Document
|
|
8
|
-
| Node
|
|
9
|
-
| (() => ShadowRoot | Document | Node);
|
|
10
|
-
children: Snippet;
|
|
11
|
-
}
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<script lang="ts">
|
|
15
|
-
import {getDocument, getWindow} from '@zag-js/dom-query';
|
|
16
|
-
import {setEnvironmentContext} from './enviroment-provider-context.svelte.js';
|
|
17
|
-
|
|
18
|
-
let {rootNode, children}: EnvironmentProviderProps = $props();
|
|
19
|
-
|
|
20
|
-
let elem: HTMLSpanElement | null = $state(null);
|
|
21
|
-
|
|
22
|
-
function getRootNode() {
|
|
23
|
-
if (rootNode) {
|
|
24
|
-
return typeof rootNode === 'function' ? rootNode() : rootNode;
|
|
25
|
-
} else {
|
|
26
|
-
return elem?.ownerDocument ?? document;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
setEnvironmentContext({
|
|
31
|
-
getRootNode,
|
|
32
|
-
getDocument: () => getDocument(getRootNode()),
|
|
33
|
-
getWindow: () => getWindow(getRootNode()),
|
|
34
|
-
});
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
{@render children()}
|
|
38
|
-
|
|
39
|
-
{#if !rootNode}
|
|
40
|
-
<span bind:this={elem} hidden></span>
|
|
41
|
-
{/if}
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type {Snippet} from 'svelte';
|
|
3
|
+
|
|
4
|
+
export interface EnvironmentProviderProps {
|
|
5
|
+
rootNode?:
|
|
6
|
+
| ShadowRoot
|
|
7
|
+
| Document
|
|
8
|
+
| Node
|
|
9
|
+
| (() => ShadowRoot | Document | Node);
|
|
10
|
+
children: Snippet;
|
|
11
|
+
}
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<script lang="ts">
|
|
15
|
+
import {getDocument, getWindow} from '@zag-js/dom-query';
|
|
16
|
+
import {setEnvironmentContext} from './enviroment-provider-context.svelte.js';
|
|
17
|
+
|
|
18
|
+
let {rootNode, children}: EnvironmentProviderProps = $props();
|
|
19
|
+
|
|
20
|
+
let elem: HTMLSpanElement | null = $state(null);
|
|
21
|
+
|
|
22
|
+
function getRootNode() {
|
|
23
|
+
if (rootNode) {
|
|
24
|
+
return typeof rootNode === 'function' ? rootNode() : rootNode;
|
|
25
|
+
} else {
|
|
26
|
+
return elem?.ownerDocument ?? document;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
setEnvironmentContext({
|
|
31
|
+
getRootNode,
|
|
32
|
+
getDocument: () => getDocument(getRootNode()),
|
|
33
|
+
getWindow: () => getWindow(getRootNode()),
|
|
34
|
+
});
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
{@render children()}
|
|
38
|
+
|
|
39
|
+
{#if !rootNode}
|
|
40
|
+
<span bind:this={elem} hidden></span>
|
|
41
|
+
{/if}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
import type {Snippet} from 'svelte';
|
|
3
|
-
|
|
4
|
-
export interface LocaleProviderProps {
|
|
5
|
-
locale: string;
|
|
6
|
-
children: Snippet;
|
|
7
|
-
}
|
|
8
|
-
</script>
|
|
9
|
-
|
|
10
|
-
<script lang="ts">
|
|
11
|
-
import {isRTL} from '@zag-js/i18n-utils';
|
|
12
|
-
import {setLocaleContext} from './local-provider-context.svelte.js';
|
|
13
|
-
|
|
14
|
-
let {children, ...props}: LocaleProviderProps = $props();
|
|
15
|
-
|
|
16
|
-
setLocaleContext({
|
|
17
|
-
get locale() {
|
|
18
|
-
return props.locale;
|
|
19
|
-
},
|
|
20
|
-
get dir() {
|
|
21
|
-
return isRTL(props.locale) ? 'rtl' : 'ltr';
|
|
22
|
-
},
|
|
23
|
-
});
|
|
24
|
-
</script>
|
|
25
|
-
|
|
26
|
-
{@render children()}
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type {Snippet} from 'svelte';
|
|
3
|
+
|
|
4
|
+
export interface LocaleProviderProps {
|
|
5
|
+
locale: string;
|
|
6
|
+
children: Snippet;
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import {isRTL} from '@zag-js/i18n-utils';
|
|
12
|
+
import {setLocaleContext} from './local-provider-context.svelte.js';
|
|
13
|
+
|
|
14
|
+
let {children, ...props}: LocaleProviderProps = $props();
|
|
15
|
+
|
|
16
|
+
setLocaleContext({
|
|
17
|
+
get locale() {
|
|
18
|
+
return props.locale;
|
|
19
|
+
},
|
|
20
|
+
get dir() {
|
|
21
|
+
return isRTL(props.locale) ? 'rtl' : 'ltr';
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{@render children()}
|
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
|
3
|
-
import type {CreateToastReturn} from './create-toast.svelte.js';
|
|
4
|
-
import type {CreateToasterReturn} from './create-toaster.svelte.js';
|
|
5
|
-
|
|
6
|
-
export interface ToasterProps
|
|
7
|
-
extends HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn> {
|
|
8
|
-
toaster: CreateToasterReturn;
|
|
9
|
-
}
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<script lang="ts">
|
|
13
|
-
import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
|
|
14
|
-
import {getLocaleContext} from '../locale-provider/local-provider-context.svelte.js';
|
|
15
|
-
import {mergeProps} from '../merge-props.js';
|
|
16
|
-
import {Portal} from '../portal/index.js';
|
|
17
|
-
import {normalizeProps, useMachine} from '@zag-js/svelte';
|
|
18
|
-
import * as toast from '@zag-js/toast';
|
|
19
|
-
import type {HTMLAttributes} from 'svelte/elements';
|
|
20
|
-
import ToastActor from './toast-actor.svelte';
|
|
21
|
-
|
|
22
|
-
let {
|
|
23
|
-
ref = $bindable(null),
|
|
24
|
-
toaster,
|
|
25
|
-
children: children_,
|
|
26
|
-
...props
|
|
27
|
-
}: ToasterProps = $props();
|
|
28
|
-
|
|
29
|
-
const locale = getLocaleContext();
|
|
30
|
-
const environment = getEnvironmentContext();
|
|
31
|
-
|
|
32
|
-
let [snapshot, send] = useMachine(toaster.machine, {
|
|
33
|
-
context: {
|
|
34
|
-
dir: locale?.dir,
|
|
35
|
-
getRootNode: environment?.getRootNode,
|
|
36
|
-
},
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
let placement = $derived(snapshot.context.placement);
|
|
40
|
-
let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
|
|
41
|
-
let toasts = $derived(api.getToastsByPlacement(placement));
|
|
42
|
-
let mergedProps = $derived(
|
|
43
|
-
mergeProps<HTMLAttributes<HTMLDivElement>>(
|
|
44
|
-
api.getGroupProps({placement}),
|
|
45
|
-
props,
|
|
46
|
-
),
|
|
47
|
-
);
|
|
48
|
-
</script>
|
|
49
|
-
|
|
50
|
-
<Portal>
|
|
51
|
-
<div bind:this={ref} {...mergedProps}>
|
|
52
|
-
{#each toasts as toast (toast.id)}
|
|
53
|
-
<ToastActor actor={toast}>
|
|
54
|
-
{#snippet children(ctx)}
|
|
55
|
-
{@render children_?.(ctx)}
|
|
56
|
-
{/snippet}
|
|
57
|
-
</ToastActor>
|
|
58
|
-
{/each}
|
|
59
|
-
</div>
|
|
60
|
-
</Portal>
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
|
3
|
+
import type {CreateToastReturn} from './create-toast.svelte.js';
|
|
4
|
+
import type {CreateToasterReturn} from './create-toaster.svelte.js';
|
|
5
|
+
|
|
6
|
+
export interface ToasterProps
|
|
7
|
+
extends HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn> {
|
|
8
|
+
toaster: CreateToasterReturn;
|
|
9
|
+
}
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<script lang="ts">
|
|
13
|
+
import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
|
|
14
|
+
import {getLocaleContext} from '../locale-provider/local-provider-context.svelte.js';
|
|
15
|
+
import {mergeProps} from '../merge-props.js';
|
|
16
|
+
import {Portal} from '../portal/index.js';
|
|
17
|
+
import {normalizeProps, useMachine} from '@zag-js/svelte';
|
|
18
|
+
import * as toast from '@zag-js/toast';
|
|
19
|
+
import type {HTMLAttributes} from 'svelte/elements';
|
|
20
|
+
import ToastActor from './toast-actor.svelte';
|
|
21
|
+
|
|
22
|
+
let {
|
|
23
|
+
ref = $bindable(null),
|
|
24
|
+
toaster,
|
|
25
|
+
children: children_,
|
|
26
|
+
...props
|
|
27
|
+
}: ToasterProps = $props();
|
|
28
|
+
|
|
29
|
+
const locale = getLocaleContext();
|
|
30
|
+
const environment = getEnvironmentContext();
|
|
31
|
+
|
|
32
|
+
let [snapshot, send] = useMachine(toaster.machine, {
|
|
33
|
+
context: {
|
|
34
|
+
dir: locale?.dir,
|
|
35
|
+
getRootNode: environment?.getRootNode,
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
let placement = $derived(snapshot.context.placement);
|
|
40
|
+
let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
|
|
41
|
+
let toasts = $derived(api.getToastsByPlacement(placement));
|
|
42
|
+
let mergedProps = $derived(
|
|
43
|
+
mergeProps<HTMLAttributes<HTMLDivElement>>(
|
|
44
|
+
api.getGroupProps({placement}),
|
|
45
|
+
props,
|
|
46
|
+
),
|
|
47
|
+
);
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<Portal>
|
|
51
|
+
<div bind:this={ref} {...mergedProps}>
|
|
52
|
+
{#each toasts as toast (toast.id)}
|
|
53
|
+
<ToastActor actor={toast}>
|
|
54
|
+
{#snippet children(ctx)}
|
|
55
|
+
{@render children_?.(ctx)}
|
|
56
|
+
{/snippet}
|
|
57
|
+
</ToastActor>
|
|
58
|
+
{/each}
|
|
59
|
+
</div>
|
|
60
|
+
</Portal>
|
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.
|
|
5
|
+
"version": "0.20.0",
|
|
6
|
+
"packageManager": "pnpm@9.15.0",
|
|
7
7
|
"svelte": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
9
|
"exports": {
|
|
@@ -307,62 +307,62 @@
|
|
|
307
307
|
"release": "release-it"
|
|
308
308
|
},
|
|
309
309
|
"dependencies": {
|
|
310
|
-
"@zag-js/accordion": "^0.
|
|
311
|
-
"@zag-js/anatomy": "^0.
|
|
310
|
+
"@zag-js/accordion": "^0.77.1",
|
|
311
|
+
"@zag-js/anatomy": "^0.77.1",
|
|
312
312
|
"@zag-js/angle-slider": "^0.78.2",
|
|
313
|
-
"@zag-js/auto-resize": "^0.
|
|
314
|
-
"@zag-js/avatar": "^0.
|
|
315
|
-
"@zag-js/carousel": "^0.
|
|
316
|
-
"@zag-js/checkbox": "^0.
|
|
317
|
-
"@zag-js/clipboard": "^0.
|
|
318
|
-
"@zag-js/collapsible": "^0.
|
|
319
|
-
"@zag-js/color-picker": "^0.
|
|
320
|
-
"@zag-js/combobox": "^0.
|
|
321
|
-
"@zag-js/core": "^0.
|
|
322
|
-
"@zag-js/date-picker": "^0.
|
|
323
|
-
"@zag-js/dialog": "^0.
|
|
324
|
-
"@zag-js/dom-query": "^0.
|
|
325
|
-
"@zag-js/editable": "^0.
|
|
326
|
-
"@zag-js/file-upload": "^0.
|
|
327
|
-
"@zag-js/floating-panel": "^0.
|
|
328
|
-
"@zag-js/highlight-word": "^0.
|
|
329
|
-
"@zag-js/hover-card": "^0.
|
|
330
|
-
"@zag-js/i18n-utils": "^0.
|
|
331
|
-
"@zag-js/menu": "^0.
|
|
332
|
-
"@zag-js/number-input": "^0.
|
|
333
|
-
"@zag-js/pagination": "^0.
|
|
334
|
-
"@zag-js/pin-input": "^0.
|
|
335
|
-
"@zag-js/popover": "^0.
|
|
336
|
-
"@zag-js/presence": "^0.
|
|
337
|
-
"@zag-js/progress": "^0.
|
|
338
|
-
"@zag-js/qr-code": "^0.
|
|
339
|
-
"@zag-js/radio-group": "^0.
|
|
340
|
-
"@zag-js/rating-group": "^0.
|
|
341
|
-
"@zag-js/select": "^0.
|
|
342
|
-
"@zag-js/signature-pad": "^0.
|
|
343
|
-
"@zag-js/slider": "^0.
|
|
344
|
-
"@zag-js/splitter": "^0.
|
|
345
|
-
"@zag-js/steps": "^0.
|
|
346
|
-
"@zag-js/svelte": "^0.
|
|
347
|
-
"@zag-js/switch": "^0.
|
|
348
|
-
"@zag-js/tabs": "^0.
|
|
349
|
-
"@zag-js/tags-input": "^0.
|
|
350
|
-
"@zag-js/time-picker": "^0.
|
|
351
|
-
"@zag-js/timer": "^0.
|
|
352
|
-
"@zag-js/toast": "^0.
|
|
353
|
-
"@zag-js/toggle-group": "^0.
|
|
354
|
-
"@zag-js/tooltip": "^0.
|
|
355
|
-
"@zag-js/tour": "^0.
|
|
356
|
-
"@zag-js/tree-view": "^0.
|
|
357
|
-
"@zag-js/utils": "^0.
|
|
313
|
+
"@zag-js/auto-resize": "^0.77.1",
|
|
314
|
+
"@zag-js/avatar": "^0.77.1",
|
|
315
|
+
"@zag-js/carousel": "^0.77.1",
|
|
316
|
+
"@zag-js/checkbox": "^0.77.1",
|
|
317
|
+
"@zag-js/clipboard": "^0.77.1",
|
|
318
|
+
"@zag-js/collapsible": "^0.77.1",
|
|
319
|
+
"@zag-js/color-picker": "^0.77.1",
|
|
320
|
+
"@zag-js/combobox": "^0.77.1",
|
|
321
|
+
"@zag-js/core": "^0.77.1",
|
|
322
|
+
"@zag-js/date-picker": "^0.77.1",
|
|
323
|
+
"@zag-js/dialog": "^0.77.1",
|
|
324
|
+
"@zag-js/dom-query": "^0.77.1",
|
|
325
|
+
"@zag-js/editable": "^0.77.1",
|
|
326
|
+
"@zag-js/file-upload": "^0.77.1",
|
|
327
|
+
"@zag-js/floating-panel": "^0.77.1",
|
|
328
|
+
"@zag-js/highlight-word": "^0.77.1",
|
|
329
|
+
"@zag-js/hover-card": "^0.77.1",
|
|
330
|
+
"@zag-js/i18n-utils": "^0.77.1",
|
|
331
|
+
"@zag-js/menu": "^0.77.1",
|
|
332
|
+
"@zag-js/number-input": "^0.77.1",
|
|
333
|
+
"@zag-js/pagination": "^0.77.1",
|
|
334
|
+
"@zag-js/pin-input": "^0.77.1",
|
|
335
|
+
"@zag-js/popover": "^0.77.1",
|
|
336
|
+
"@zag-js/presence": "^0.77.1",
|
|
337
|
+
"@zag-js/progress": "^0.77.1",
|
|
338
|
+
"@zag-js/qr-code": "^0.77.1",
|
|
339
|
+
"@zag-js/radio-group": "^0.77.1",
|
|
340
|
+
"@zag-js/rating-group": "^0.77.1",
|
|
341
|
+
"@zag-js/select": "^0.77.1",
|
|
342
|
+
"@zag-js/signature-pad": "^0.77.1",
|
|
343
|
+
"@zag-js/slider": "^0.77.1",
|
|
344
|
+
"@zag-js/splitter": "^0.77.1",
|
|
345
|
+
"@zag-js/steps": "^0.77.1",
|
|
346
|
+
"@zag-js/svelte": "^0.77.1",
|
|
347
|
+
"@zag-js/switch": "^0.77.1",
|
|
348
|
+
"@zag-js/tabs": "^0.77.1",
|
|
349
|
+
"@zag-js/tags-input": "^0.77.1",
|
|
350
|
+
"@zag-js/time-picker": "^0.77.1",
|
|
351
|
+
"@zag-js/timer": "^0.77.1",
|
|
352
|
+
"@zag-js/toast": "^0.77.1",
|
|
353
|
+
"@zag-js/toggle-group": "^0.77.1",
|
|
354
|
+
"@zag-js/tooltip": "^0.77.1",
|
|
355
|
+
"@zag-js/tour": "^0.77.1",
|
|
356
|
+
"@zag-js/tree-view": "^0.77.1",
|
|
357
|
+
"@zag-js/utils": "^0.77.1"
|
|
358
358
|
},
|
|
359
359
|
"peerDependencies": {
|
|
360
360
|
"svelte": ">=5.0.0"
|
|
361
361
|
},
|
|
362
362
|
"devDependencies": {
|
|
363
363
|
"@faker-js/faker": "^9.3.0",
|
|
364
|
-
"@sveltejs/adapter-vercel": "^5.5.
|
|
365
|
-
"@sveltejs/kit": "^2.9.
|
|
364
|
+
"@sveltejs/adapter-vercel": "^5.5.1",
|
|
365
|
+
"@sveltejs/kit": "^2.9.1",
|
|
366
366
|
"@sveltejs/package": "^2.3.7",
|
|
367
367
|
"@sveltejs/vite-plugin-svelte": "^5.0.1",
|
|
368
368
|
"@testing-library/jest-dom": "^6.6.3",
|
|
@@ -377,7 +377,7 @@
|
|
|
377
377
|
"publint": "^0.2.12",
|
|
378
378
|
"release-it": "^17.10.0",
|
|
379
379
|
"resize-observer-polyfill": "^1.5.1",
|
|
380
|
-
"svelte": "^5.
|
|
380
|
+
"svelte": "^5.10.0",
|
|
381
381
|
"svelte-check": "^4.1.1",
|
|
382
382
|
"tailwind-merge": "^2.5.5",
|
|
383
383
|
"tailwind-variants": "^0.3.0",
|