ui-ingredients 0.0.41 → 0.0.43
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.
- package/README.md +1 -0
- package/dist/accordion/item-content.svelte +17 -6
- package/dist/accordion/root.svelte +18 -6
- package/dist/color-picker/root.svelte +1 -1
- package/dist/combobox/content.svelte +8 -6
- package/dist/combobox/positioner.svelte +8 -6
- package/dist/combobox/root.svelte +21 -6
- package/dist/date-picker/content.svelte +8 -6
- package/dist/date-picker/positioner.svelte +8 -6
- package/dist/date-picker/root.svelte +21 -6
- package/dist/dialog/backdrop.svelte +17 -6
- package/dist/dialog/content.svelte +8 -6
- package/dist/dialog/positioner.svelte +8 -6
- package/dist/dialog/root.svelte +25 -3
- package/dist/file-upload/create-file-upload.svelte.js +1 -0
- package/dist/file-upload/root.svelte +1 -0
- package/dist/floating-panel/create-floating-panel.svelte.d.ts +6 -0
- package/dist/floating-panel/create-floating-panel.svelte.js +18 -0
- package/dist/hover-card/content.svelte +8 -6
- package/dist/hover-card/positioner.svelte +8 -6
- package/dist/hover-card/root.svelte +27 -2
- package/dist/menu/content.svelte +8 -6
- package/dist/menu/positioner.svelte +8 -6
- package/dist/menu/root.svelte +38 -2
- package/dist/popover/content.svelte +8 -6
- package/dist/popover/positioner.svelte +8 -6
- package/dist/popover/root.svelte +35 -2
- package/dist/portal/root.svelte +32 -28
- package/dist/presence/context.svelte.d.ts +2 -1
- package/dist/presence/context.svelte.js +1 -0
- package/dist/presence/create-presence.svelte.d.ts +9 -2
- package/dist/presence/create-presence.svelte.js +25 -5
- package/dist/presence/root.svelte +16 -6
- package/dist/select/content.svelte +8 -6
- package/dist/select/positioner.svelte +8 -6
- package/dist/select/root.svelte +19 -4
- package/dist/switch/control.svelte +24 -24
- package/dist/switch/hidden-input.svelte +23 -23
- package/dist/switch/label.svelte +24 -24
- package/dist/switch/root.svelte +54 -54
- package/dist/switch/thumb.svelte +24 -24
- package/dist/time-picker/content.svelte +14 -4
- package/dist/time-picker/positioner.svelte +7 -1
- package/dist/time-picker/root.svelte +29 -4
- package/dist/toast/actor.svelte +19 -19
- package/dist/toast/toaster.svelte +39 -39
- package/dist/tooltip/content.svelte +8 -6
- package/dist/tooltip/positioner.svelte +8 -6
- package/dist/tooltip/root.svelte +20 -2
- package/dist/tour/create-tour.svelte.d.ts +7 -0
- package/dist/tour/create-tour.svelte.js +18 -0
- package/package.json +46 -46
- package/dist/floating-panel/.gitkeep +0 -0
- package/dist/tour/.gitkeep +0 -0
package/dist/switch/root.svelte
CHANGED
@@ -1,54 +1,54 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {
|
4
|
-
CreateSwitchProps,
|
5
|
-
CreateSwitchReturn,
|
6
|
-
} from './create-switch.svelte.js';
|
7
|
-
|
8
|
-
export interface SwitchProps
|
9
|
-
extends Assign<
|
10
|
-
HtmlIngredientProps<'label', CreateSwitchReturn>,
|
11
|
-
CreateSwitchProps
|
12
|
-
> {}
|
13
|
-
</script>
|
14
|
-
|
15
|
-
<script lang="ts">
|
16
|
-
import {mergeProps} from '../merge-props.js';
|
17
|
-
import {reflect} from '@zag-js/svelte';
|
18
|
-
import {createSplitProps} from '@zag-js/utils';
|
19
|
-
import {setSwitchContext} from './context.svelte.js';
|
20
|
-
import {createSwitch} from './create-switch.svelte.js';
|
21
|
-
|
22
|
-
let {asChild, children, ...props}: SwitchProps = $props();
|
23
|
-
|
24
|
-
let [switchProps, otherProps] = $derived(
|
25
|
-
createSplitProps<CreateSwitchProps>([
|
26
|
-
'id',
|
27
|
-
'ids',
|
28
|
-
'form',
|
29
|
-
'name',
|
30
|
-
'label',
|
31
|
-
'value',
|
32
|
-
'checked',
|
33
|
-
'invalid',
|
34
|
-
'disabled',
|
35
|
-
'readOnly',
|
36
|
-
'required',
|
37
|
-
'onCheckedChange',
|
38
|
-
])(props),
|
39
|
-
);
|
40
|
-
|
41
|
-
let switch$ = createSwitch(reflect(() => switchProps));
|
42
|
-
|
43
|
-
let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
|
44
|
-
|
45
|
-
setSwitchContext(switch$);
|
46
|
-
</script>
|
47
|
-
|
48
|
-
{#if asChild}
|
49
|
-
{@render asChild(mergedProps, switch$)}
|
50
|
-
{:else}
|
51
|
-
<label {...mergedProps}>
|
52
|
-
{@render children?.(switch$)}
|
53
|
-
</label>
|
54
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {
|
4
|
+
CreateSwitchProps,
|
5
|
+
CreateSwitchReturn,
|
6
|
+
} from './create-switch.svelte.js';
|
7
|
+
|
8
|
+
export interface SwitchProps
|
9
|
+
extends Assign<
|
10
|
+
HtmlIngredientProps<'label', CreateSwitchReturn>,
|
11
|
+
CreateSwitchProps
|
12
|
+
> {}
|
13
|
+
</script>
|
14
|
+
|
15
|
+
<script lang="ts">
|
16
|
+
import {mergeProps} from '../merge-props.js';
|
17
|
+
import {reflect} from '@zag-js/svelte';
|
18
|
+
import {createSplitProps} from '@zag-js/utils';
|
19
|
+
import {setSwitchContext} from './context.svelte.js';
|
20
|
+
import {createSwitch} from './create-switch.svelte.js';
|
21
|
+
|
22
|
+
let {asChild, children, ...props}: SwitchProps = $props();
|
23
|
+
|
24
|
+
let [switchProps, otherProps] = $derived(
|
25
|
+
createSplitProps<CreateSwitchProps>([
|
26
|
+
'id',
|
27
|
+
'ids',
|
28
|
+
'form',
|
29
|
+
'name',
|
30
|
+
'label',
|
31
|
+
'value',
|
32
|
+
'checked',
|
33
|
+
'invalid',
|
34
|
+
'disabled',
|
35
|
+
'readOnly',
|
36
|
+
'required',
|
37
|
+
'onCheckedChange',
|
38
|
+
])(props),
|
39
|
+
);
|
40
|
+
|
41
|
+
let switch$ = createSwitch(reflect(() => switchProps));
|
42
|
+
|
43
|
+
let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
|
44
|
+
|
45
|
+
setSwitchContext(switch$);
|
46
|
+
</script>
|
47
|
+
|
48
|
+
{#if asChild}
|
49
|
+
{@render asChild(mergedProps, switch$)}
|
50
|
+
{:else}
|
51
|
+
<label {...mergedProps}>
|
52
|
+
{@render children?.(switch$)}
|
53
|
+
</label>
|
54
|
+
{/if}
|
package/dist/switch/thumb.svelte
CHANGED
@@ -1,24 +1,24 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface SwitchThumbProps extends HtmlIngredientProps<'div'> {}
|
5
|
-
</script>
|
6
|
-
|
7
|
-
<script lang="ts">
|
8
|
-
import {mergeProps} from '../merge-props.js';
|
9
|
-
import {getSwitchContext} from './context.svelte.js';
|
10
|
-
|
11
|
-
let {asChild, children, ...props}: SwitchThumbProps = $props();
|
12
|
-
|
13
|
-
let switch$ = getSwitchContext();
|
14
|
-
|
15
|
-
let mergedProps = $derived(mergeProps(props, switch$.getThumbProps()));
|
16
|
-
</script>
|
17
|
-
|
18
|
-
{#if asChild}
|
19
|
-
{@render asChild(mergedProps)}
|
20
|
-
{:else}
|
21
|
-
<div {...mergedProps}>
|
22
|
-
{@render children?.()}
|
23
|
-
</div>
|
24
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface SwitchThumbProps extends HtmlIngredientProps<'div'> {}
|
5
|
+
</script>
|
6
|
+
|
7
|
+
<script lang="ts">
|
8
|
+
import {mergeProps} from '../merge-props.js';
|
9
|
+
import {getSwitchContext} from './context.svelte.js';
|
10
|
+
|
11
|
+
let {asChild, children, ...props}: SwitchThumbProps = $props();
|
12
|
+
|
13
|
+
let switch$ = getSwitchContext();
|
14
|
+
|
15
|
+
let mergedProps = $derived(mergeProps(props, switch$.getThumbProps()));
|
16
|
+
</script>
|
17
|
+
|
18
|
+
{#if asChild}
|
19
|
+
{@render asChild(mergedProps)}
|
20
|
+
{:else}
|
21
|
+
<div {...mergedProps}>
|
22
|
+
{@render children?.()}
|
23
|
+
</div>
|
24
|
+
{/if}
|
@@ -1,24 +1,34 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TimePickerContentProps
|
4
|
+
export interface TimePickerContentProps
|
5
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
5
6
|
</script>
|
6
7
|
|
7
8
|
<script lang="ts">
|
8
9
|
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getPresenceContext} from '../presence/context.svelte.js';
|
11
|
+
import type {Action} from 'svelte/action';
|
9
12
|
import {getTimePickerContext} from './context.svelte.js';
|
10
13
|
|
11
14
|
let {asChild, children, ...props}: TimePickerContentProps = $props();
|
12
15
|
|
13
16
|
let timePicker = getTimePickerContext();
|
17
|
+
let presence = getPresenceContext();
|
14
18
|
|
15
|
-
let mergedProps = $derived(
|
19
|
+
let mergedProps = $derived(
|
20
|
+
mergeProps(
|
21
|
+
props,
|
22
|
+
timePicker.getContentProps(),
|
23
|
+
presence.getPresenceProps(),
|
24
|
+
),
|
25
|
+
);
|
16
26
|
</script>
|
17
27
|
|
18
28
|
{#if asChild}
|
19
|
-
{@render asChild(mergedProps)}
|
29
|
+
{@render asChild(presence.ref, mergedProps)}
|
20
30
|
{:else}
|
21
|
-
<div {...mergedProps}>
|
31
|
+
<div use:presence.ref {...mergedProps}>
|
22
32
|
{@render children?.()}
|
23
33
|
</div>
|
24
34
|
{/if}
|
@@ -7,14 +7,20 @@
|
|
7
7
|
|
8
8
|
<script lang="ts">
|
9
9
|
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getPresenceContext} from '../presence/context.svelte.js';
|
10
11
|
import {getTimePickerContext} from './context.svelte.js';
|
11
12
|
|
12
13
|
let {asChild, children, ...props}: TimePickerPositionerProps = $props();
|
13
14
|
|
14
15
|
let timePicker = getTimePickerContext();
|
16
|
+
let presence = getPresenceContext();
|
15
17
|
|
16
18
|
let mergedProps = $derived(
|
17
|
-
mergeProps(
|
19
|
+
mergeProps(
|
20
|
+
props,
|
21
|
+
timePicker.getPositionerProps(),
|
22
|
+
presence.getPresenceProps(),
|
23
|
+
),
|
18
24
|
);
|
19
25
|
</script>
|
20
26
|
|
@@ -1,4 +1,5 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
2
3
|
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
4
|
import type {
|
4
5
|
CreateTimePickerProps,
|
@@ -7,13 +8,16 @@
|
|
7
8
|
|
8
9
|
export interface TimePickerProps
|
9
10
|
extends Assign<
|
10
|
-
|
11
|
-
|
12
|
-
|
11
|
+
HtmlIngredientProps<'div', CreateTimePickerReturn>,
|
12
|
+
CreateTimePickerProps
|
13
|
+
>,
|
14
|
+
PresenceStrategyProps {}
|
13
15
|
</script>
|
14
16
|
|
15
17
|
<script lang="ts">
|
16
18
|
import {mergeProps} from '../merge-props.js';
|
19
|
+
import {setPresenceContext} from '../presence/context.svelte.js';
|
20
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
17
21
|
import {reflect} from '@zag-js/svelte';
|
18
22
|
import {createSplitProps} from '@zag-js/utils';
|
19
23
|
import {setTimePickerContext} from './context.svelte.js';
|
@@ -47,9 +51,30 @@
|
|
47
51
|
|
48
52
|
let timePicker = createTimePicker(reflect(() => timePickerProps));
|
49
53
|
|
50
|
-
let
|
54
|
+
let [presenceStrategyProps, elementProps] = $derived(
|
55
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
56
|
+
otherProps,
|
57
|
+
),
|
58
|
+
);
|
59
|
+
|
60
|
+
let presence = createPresence({
|
61
|
+
get present() {
|
62
|
+
return timePicker.open;
|
63
|
+
},
|
64
|
+
get lazyMount() {
|
65
|
+
return presenceStrategyProps.lazyMount;
|
66
|
+
},
|
67
|
+
get keepMounted() {
|
68
|
+
return presenceStrategyProps.keepMounted;
|
69
|
+
},
|
70
|
+
});
|
71
|
+
|
72
|
+
let mergedProps = $derived(
|
73
|
+
mergeProps(elementProps, timePicker.getRootProps()),
|
74
|
+
);
|
51
75
|
|
52
76
|
setTimePickerContext(timePicker);
|
77
|
+
setPresenceContext(presence);
|
53
78
|
</script>
|
54
79
|
|
55
80
|
{#if asChild}
|
package/dist/toast/actor.svelte
CHANGED
@@ -1,19 +1,19 @@
|
|
1
|
-
<script lang="ts">
|
2
|
-
import * as toast$ from '@zag-js/toast';
|
3
|
-
import type {Snippet} from 'svelte';
|
4
|
-
import {setToastContext} from './context.svelte.js';
|
5
|
-
import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
|
6
|
-
|
7
|
-
interface Props {
|
8
|
-
actor: toast$.Service;
|
9
|
-
children$: Snippet<[toast: CreateToastReturn]>;
|
10
|
-
}
|
11
|
-
|
12
|
-
let {actor, children$}: Props = $props();
|
13
|
-
|
14
|
-
let toast = createToast(actor);
|
15
|
-
|
16
|
-
setToastContext(toast);
|
17
|
-
</script>
|
18
|
-
|
19
|
-
{@render children$(toast)}
|
1
|
+
<script lang="ts">
|
2
|
+
import * as toast$ from '@zag-js/toast';
|
3
|
+
import type {Snippet} from 'svelte';
|
4
|
+
import {setToastContext} from './context.svelte.js';
|
5
|
+
import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
|
6
|
+
|
7
|
+
interface Props {
|
8
|
+
actor: toast$.Service;
|
9
|
+
children$: Snippet<[toast: CreateToastReturn]>;
|
10
|
+
}
|
11
|
+
|
12
|
+
let {actor, children$}: Props = $props();
|
13
|
+
|
14
|
+
let toast = createToast(actor);
|
15
|
+
|
16
|
+
setToastContext(toast);
|
17
|
+
</script>
|
18
|
+
|
19
|
+
{@render children$(toast)}
|
@@ -1,39 +1,39 @@
|
|
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', CreateToastReturn> {
|
8
|
-
toaster: CreateToasterReturn;
|
9
|
-
}
|
10
|
-
</script>
|
11
|
-
|
12
|
-
<script lang="ts">
|
13
|
-
import {mergeProps} from '../merge-props.js';
|
14
|
-
import {Portal} from '../portal/index.js';
|
15
|
-
import {normalizeProps, useMachine} from '@zag-js/svelte';
|
16
|
-
import * as toast from '@zag-js/toast';
|
17
|
-
import ToastActor from './actor.svelte';
|
18
|
-
|
19
|
-
let {toaster, children, ...props}: ToasterProps = $props();
|
20
|
-
|
21
|
-
let [snapshot, send] = useMachine(toaster.machine);
|
22
|
-
|
23
|
-
let placement = $derived(snapshot.context.placement);
|
24
|
-
let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
|
25
|
-
let toasts = $derived(api.getToastsByPlacement(placement));
|
26
|
-
let mergedProps = $derived(mergeProps(props, api.getGroupProps({placement})));
|
27
|
-
</script>
|
28
|
-
|
29
|
-
<Portal>
|
30
|
-
<div {...mergedProps}>
|
31
|
-
{#each toasts as toast (toast.id)}
|
32
|
-
<ToastActor actor={toast}>
|
33
|
-
{#snippet children$(ctx)}
|
34
|
-
{@render children?.(ctx)}
|
35
|
-
{/snippet}
|
36
|
-
</ToastActor>
|
37
|
-
{/each}
|
38
|
-
</div>
|
39
|
-
</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', CreateToastReturn> {
|
8
|
+
toaster: CreateToasterReturn;
|
9
|
+
}
|
10
|
+
</script>
|
11
|
+
|
12
|
+
<script lang="ts">
|
13
|
+
import {mergeProps} from '../merge-props.js';
|
14
|
+
import {Portal} from '../portal/index.js';
|
15
|
+
import {normalizeProps, useMachine} from '@zag-js/svelte';
|
16
|
+
import * as toast from '@zag-js/toast';
|
17
|
+
import ToastActor from './actor.svelte';
|
18
|
+
|
19
|
+
let {toaster, children, ...props}: ToasterProps = $props();
|
20
|
+
|
21
|
+
let [snapshot, send] = useMachine(toaster.machine);
|
22
|
+
|
23
|
+
let placement = $derived(snapshot.context.placement);
|
24
|
+
let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
|
25
|
+
let toasts = $derived(api.getToastsByPlacement(placement));
|
26
|
+
let mergedProps = $derived(mergeProps(props, api.getGroupProps({placement})));
|
27
|
+
</script>
|
28
|
+
|
29
|
+
<Portal>
|
30
|
+
<div {...mergedProps}>
|
31
|
+
{#each toasts as toast (toast.id)}
|
32
|
+
<ToastActor actor={toast}>
|
33
|
+
{#snippet children$(ctx)}
|
34
|
+
{@render children?.(ctx)}
|
35
|
+
{/snippet}
|
36
|
+
</ToastActor>
|
37
|
+
{/each}
|
38
|
+
</div>
|
39
|
+
</Portal>
|
@@ -21,10 +21,12 @@
|
|
21
21
|
);
|
22
22
|
</script>
|
23
23
|
|
24
|
-
{#if
|
25
|
-
{
|
26
|
-
{
|
27
|
-
|
28
|
-
{
|
29
|
-
|
24
|
+
{#if presence.mounted}
|
25
|
+
{#if asChild}
|
26
|
+
{@render asChild(presence.ref, mergedProps)}
|
27
|
+
{:else}
|
28
|
+
<div use:presence.ref {...mergedProps}>
|
29
|
+
{@render children?.()}
|
30
|
+
</div>
|
31
|
+
{/if}
|
30
32
|
{/if}
|
@@ -23,10 +23,12 @@
|
|
23
23
|
);
|
24
24
|
</script>
|
25
25
|
|
26
|
-
{#if
|
27
|
-
{
|
28
|
-
{
|
29
|
-
|
30
|
-
{
|
31
|
-
|
26
|
+
{#if presence.mounted}
|
27
|
+
{#if asChild}
|
28
|
+
{@render asChild(mergedProps)}
|
29
|
+
{:else}
|
30
|
+
<div {...mergedProps}>
|
31
|
+
{@render children?.()}
|
32
|
+
</div>
|
33
|
+
{/if}
|
32
34
|
{/if}
|
package/dist/tooltip/root.svelte
CHANGED
@@ -1,11 +1,14 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
2
3
|
import type {Snippet} from 'svelte';
|
3
4
|
import type {
|
4
5
|
CreateTooltipProps,
|
5
6
|
CreateTooltipReturn,
|
6
7
|
} from './create-tooltip.svelte.js';
|
7
8
|
|
8
|
-
export interface TooltipProps
|
9
|
+
export interface TooltipProps
|
10
|
+
extends CreateTooltipProps,
|
11
|
+
PresenceStrategyProps {
|
9
12
|
children?: Snippet<[CreateTooltipReturn]>;
|
10
13
|
}
|
11
14
|
</script>
|
@@ -13,16 +16,31 @@
|
|
13
16
|
<script lang="ts">
|
14
17
|
import {setPresenceContext} from '../presence/context.svelte.js';
|
15
18
|
import {createPresence} from '../presence/create-presence.svelte.js';
|
19
|
+
import {reflect} from '@zag-js/svelte';
|
20
|
+
import {createSplitProps} from '@zag-js/utils';
|
16
21
|
import {setTooltipContext} from './context.svelte.js';
|
17
22
|
import {createTooltip} from './create-tooltip.svelte.js';
|
18
23
|
|
19
24
|
let {children, ...props}: TooltipProps = $props();
|
20
25
|
|
21
|
-
let
|
26
|
+
let [presenceStrategyProps, tooltipProps] = $derived(
|
27
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
28
|
+
props,
|
29
|
+
),
|
30
|
+
);
|
31
|
+
|
32
|
+
let tooltip = createTooltip(reflect(() => tooltipProps));
|
33
|
+
|
22
34
|
let presence = createPresence({
|
23
35
|
get present() {
|
24
36
|
return tooltip.open;
|
25
37
|
},
|
38
|
+
get lazyMount() {
|
39
|
+
return presenceStrategyProps.lazyMount;
|
40
|
+
},
|
41
|
+
get keepMounted() {
|
42
|
+
return presenceStrategyProps.keepMounted;
|
43
|
+
},
|
26
44
|
});
|
27
45
|
|
28
46
|
setTooltipContext(tooltip);
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as tour from '@zag-js/tour';
|
2
|
+
export interface CreateTourProps extends Omit<tour.Context, 'id' | 'dir' | 'getRootNode'> {
|
3
|
+
id?: string | null;
|
4
|
+
}
|
5
|
+
export interface CreateTourReturn extends tour.Api<any> {
|
6
|
+
}
|
7
|
+
export declare function createTour(props: CreateTourProps): CreateTourReturn;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
|
2
|
+
import { getLocaleContext } from '../locale-provider/context.svelte.js';
|
3
|
+
import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
|
4
|
+
import * as tour from '@zag-js/tour';
|
5
|
+
import { uid } from 'uid';
|
6
|
+
export function createTour(props) {
|
7
|
+
const locale = getLocaleContext();
|
8
|
+
const environment = getEnvironmentContext();
|
9
|
+
const id = uid();
|
10
|
+
const context = $derived(reflect(() => ({
|
11
|
+
id: props.id ?? id,
|
12
|
+
dir: locale?.dir,
|
13
|
+
getRootNode: environment?.getRootNode,
|
14
|
+
})));
|
15
|
+
const [state, send] = useMachine(tour.machine(context), { context });
|
16
|
+
const api = $derived(reflect(() => tour.connect(state, send, normalizeProps)));
|
17
|
+
return api;
|
18
|
+
}
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "ui-ingredients",
|
3
3
|
"type": "module",
|
4
|
-
"version": "0.0.
|
4
|
+
"version": "0.0.43",
|
5
5
|
"packageManager": "pnpm@9.7.0",
|
6
6
|
"svelte": "./dist/index.js",
|
7
7
|
"types": "./dist/index.d.ts",
|
@@ -85,50 +85,50 @@
|
|
85
85
|
"release": "release-it"
|
86
86
|
},
|
87
87
|
"dependencies": {
|
88
|
-
"@zag-js/accordion": "0.
|
89
|
-
"@zag-js/anatomy": "0.
|
90
|
-
"@zag-js/avatar": "0.
|
91
|
-
"@zag-js/carousel": "0.
|
92
|
-
"@zag-js/checkbox": "0.
|
93
|
-
"@zag-js/clipboard": "0.
|
94
|
-
"@zag-js/collapsible": "0.
|
95
|
-
"@zag-js/color-picker": "0.
|
96
|
-
"@zag-js/combobox": "0.
|
97
|
-
"@zag-js/date-picker": "0.
|
98
|
-
"@zag-js/dialog": "0.
|
99
|
-
"@zag-js/dom-query": "0.
|
100
|
-
"@zag-js/editable": "0.
|
101
|
-
"@zag-js/file-upload": "0.
|
102
|
-
"@zag-js/floating-panel": "0.
|
103
|
-
"@zag-js/hover-card": "0.
|
104
|
-
"@zag-js/i18n-utils": "0.
|
105
|
-
"@zag-js/menu": "0.
|
106
|
-
"@zag-js/number-input": "0.
|
107
|
-
"@zag-js/pagination": "0.
|
108
|
-
"@zag-js/pin-input": "0.
|
109
|
-
"@zag-js/popover": "0.
|
110
|
-
"@zag-js/presence": "0.
|
111
|
-
"@zag-js/progress": "0.
|
112
|
-
"@zag-js/qr-code": "0.
|
113
|
-
"@zag-js/radio-group": "0.
|
114
|
-
"@zag-js/rating-group": "0.
|
115
|
-
"@zag-js/select": "0.
|
116
|
-
"@zag-js/signature-pad": "0.
|
117
|
-
"@zag-js/slider": "0.
|
118
|
-
"@zag-js/splitter": "0.
|
119
|
-
"@zag-js/steps": "0.
|
120
|
-
"@zag-js/svelte": "0.
|
121
|
-
"@zag-js/switch": "0.
|
122
|
-
"@zag-js/tabs": "0.
|
123
|
-
"@zag-js/tags-input": "0.
|
124
|
-
"@zag-js/time-picker": "0.
|
125
|
-
"@zag-js/timer": "0.
|
126
|
-
"@zag-js/toast": "0.
|
127
|
-
"@zag-js/toggle-group": "0.
|
128
|
-
"@zag-js/tooltip": "0.
|
129
|
-
"@zag-js/tour": "0.
|
130
|
-
"@zag-js/tree-view": "0.
|
131
|
-
"@zag-js/utils": "0.
|
88
|
+
"@zag-js/accordion": "0.67.0",
|
89
|
+
"@zag-js/anatomy": "0.67.0",
|
90
|
+
"@zag-js/avatar": "0.67.0",
|
91
|
+
"@zag-js/carousel": "0.67.0",
|
92
|
+
"@zag-js/checkbox": "0.67.0",
|
93
|
+
"@zag-js/clipboard": "0.67.0",
|
94
|
+
"@zag-js/collapsible": "0.67.0",
|
95
|
+
"@zag-js/color-picker": "0.67.0",
|
96
|
+
"@zag-js/combobox": "0.67.0",
|
97
|
+
"@zag-js/date-picker": "0.67.0",
|
98
|
+
"@zag-js/dialog": "0.67.0",
|
99
|
+
"@zag-js/dom-query": "0.67.0",
|
100
|
+
"@zag-js/editable": "0.67.0",
|
101
|
+
"@zag-js/file-upload": "0.67.0",
|
102
|
+
"@zag-js/floating-panel": "0.67.0",
|
103
|
+
"@zag-js/hover-card": "0.67.0",
|
104
|
+
"@zag-js/i18n-utils": "0.67.0",
|
105
|
+
"@zag-js/menu": "0.67.0",
|
106
|
+
"@zag-js/number-input": "0.67.0",
|
107
|
+
"@zag-js/pagination": "0.67.0",
|
108
|
+
"@zag-js/pin-input": "0.67.0",
|
109
|
+
"@zag-js/popover": "0.67.0",
|
110
|
+
"@zag-js/presence": "0.67.0",
|
111
|
+
"@zag-js/progress": "0.67.0",
|
112
|
+
"@zag-js/qr-code": "0.67.0",
|
113
|
+
"@zag-js/radio-group": "0.67.0",
|
114
|
+
"@zag-js/rating-group": "0.67.0",
|
115
|
+
"@zag-js/select": "0.67.0",
|
116
|
+
"@zag-js/signature-pad": "0.67.0",
|
117
|
+
"@zag-js/slider": "0.67.0",
|
118
|
+
"@zag-js/splitter": "0.67.0",
|
119
|
+
"@zag-js/steps": "0.67.0",
|
120
|
+
"@zag-js/svelte": "0.67.0",
|
121
|
+
"@zag-js/switch": "0.67.0",
|
122
|
+
"@zag-js/tabs": "0.67.0",
|
123
|
+
"@zag-js/tags-input": "0.67.0",
|
124
|
+
"@zag-js/time-picker": "0.67.0",
|
125
|
+
"@zag-js/timer": "0.67.0",
|
126
|
+
"@zag-js/toast": "0.67.0",
|
127
|
+
"@zag-js/toggle-group": "0.67.0",
|
128
|
+
"@zag-js/tooltip": "0.67.0",
|
129
|
+
"@zag-js/tour": "0.67.0",
|
130
|
+
"@zag-js/tree-view": "0.67.0",
|
131
|
+
"@zag-js/utils": "0.67.0",
|
132
132
|
"uid": "2.0.2"
|
133
133
|
},
|
134
134
|
"peerDependencies": {
|
@@ -150,7 +150,7 @@
|
|
150
150
|
"tailwind-merge": "2.5.2",
|
151
151
|
"tailwind-variants": "0.2.1",
|
152
152
|
"tailwindcss": "3.4.10",
|
153
|
-
"typescript": "5.
|
153
|
+
"typescript": "5.6.2",
|
154
154
|
"vite": "5.4.3",
|
155
155
|
"vitest": "2.0.5",
|
156
156
|
"vitest-axe": "0.1.0"
|
File without changes
|
package/dist/tour/.gitkeep
DELETED
File without changes
|