ui-ingredients 0.31.1 → 0.31.2

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 (50) hide show
  1. package/README.md +49 -49
  2. package/dist/accordion/accordion-item.svelte +64 -64
  3. package/dist/accordion/accordion-root.svelte +65 -65
  4. package/dist/alert/alert-root.svelte +45 -45
  5. package/dist/alert-dialog/alert-dialog-root.svelte +48 -48
  6. package/dist/angle-slider/angle-slider-root.svelte +58 -58
  7. package/dist/avatar/avatar-root.svelte +45 -45
  8. package/dist/carousel/carousel-root.svelte +64 -64
  9. package/dist/clipboard/clipboard-root.svelte +52 -52
  10. package/dist/collapsible/collapsible-root.svelte +73 -73
  11. package/dist/color-picker/color-picker-root.svelte +88 -88
  12. package/dist/combobox/combobox-root.svelte +102 -102
  13. package/dist/dialog/dialog-root.svelte +48 -48
  14. package/dist/drawer/drawer-root.svelte +48 -48
  15. package/dist/editable/editable-root.svelte +72 -72
  16. package/dist/field/field-root.svelte +62 -62
  17. package/dist/file-upload/file-upload-root.svelte +68 -68
  18. package/dist/floating-panel/floating-panel-root.svelte +47 -47
  19. package/dist/highlight/highlight.svelte +42 -42
  20. package/dist/hover-card/hover-card-root.svelte +51 -51
  21. package/dist/menu/menu-root.svelte +74 -74
  22. package/dist/merge-props.js +15 -17
  23. package/dist/number-input/number-input-root.svelte +74 -74
  24. package/dist/pagination/pagination-root.svelte +57 -57
  25. package/dist/pin-input/pin-input-root.svelte +67 -67
  26. package/dist/popover/popover-root.svelte +60 -60
  27. package/dist/presence/presence.svelte +43 -43
  28. package/dist/progress/progress-root.svelte +55 -55
  29. package/dist/qr-code/qr-code-root.svelte +52 -52
  30. package/dist/radio-group/radio-group-root.svelte +55 -55
  31. package/dist/rating-group/rating-group-root.svelte +62 -62
  32. package/dist/segment-group/segment-group-root.svelte +57 -57
  33. package/dist/select/select-root.svelte +88 -88
  34. package/dist/signature-pad/signature-pad-root.svelte +59 -59
  35. package/dist/slider/slider-root.svelte +68 -68
  36. package/dist/splitter/splitter-root.svelte +52 -52
  37. package/dist/steps/steps-root.svelte +64 -64
  38. package/dist/switch/switch-root.svelte +58 -58
  39. package/dist/tabs/tabs-root.svelte +58 -58
  40. package/dist/tags-input/tags-input-root.svelte +74 -74
  41. package/dist/time-picker/time-picker-root.svelte +81 -81
  42. package/dist/timer/timer-root.svelte +55 -55
  43. package/dist/toast/toast-actor.svelte +19 -19
  44. package/dist/toggle/toggle-root.svelte +49 -49
  45. package/dist/toggle-group/toggle-group-root.svelte +57 -57
  46. package/dist/tooltip/tooltip-root.svelte +44 -44
  47. package/dist/tour/tour-root.svelte +46 -46
  48. package/dist/tree-view/tree-view-branch.svelte +63 -63
  49. package/dist/tree-view/tree-view-root.svelte +68 -68
  50. package/package.json +403 -411
@@ -1,102 +1,102 @@
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
- CreateComboboxProps,
6
- CreateComboboxReturn,
7
- } from './create-combobox.svelte.js';
8
-
9
- export interface ComboboxProps
10
- extends Assign<
11
- HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>,
12
- CreateComboboxProps
13
- >,
14
- PresenceStrategyProps {}
15
- </script>
16
-
17
- <script lang="ts">
18
- import {reflect} from '@zag-js/svelte';
19
- import {createSplitProps} from '../create-split-props.js';
20
- import {mergeProps} from '../merge-props.js';
21
- import {createPresence} from '../presence/create-presence.svelte.js';
22
- import {setPresenceContext} from '../presence/presence-context.svelte.js';
23
- import {setComboboxContext} from './combobox-context.svelte.js';
24
- import {createCombobox} from './create-combobox.svelte.js';
25
-
26
- let {
27
- ref = $bindable(null),
28
- asChild,
29
- children,
30
- ...props
31
- }: ComboboxProps = $props();
32
-
33
- let [presenceStrategyProps, rest] = $derived(
34
- createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
35
- props,
36
- ),
37
- );
38
-
39
- let [createComboboxProps, localProps] = $derived(
40
- createSplitProps<CreateComboboxProps>([
41
- 'allowCustomValue',
42
- 'autoFocus',
43
- 'closeOnSelect',
44
- 'collection',
45
- 'composite',
46
- 'disableLayer',
47
- 'disabled',
48
- 'form',
49
- 'highlightedValue',
50
- 'id',
51
- 'ids',
52
- 'inputBehavior',
53
- 'inputValue',
54
- 'invalid',
55
- 'loopFocus',
56
- 'multiple',
57
- 'name',
58
- 'navigate',
59
- 'onFocusOutside',
60
- 'onHighlightChange',
61
- 'onInputValueChange',
62
- 'onInteractOutside',
63
- 'onOpenChange',
64
- 'onPointerDownOutside',
65
- 'onValueChange',
66
- 'open',
67
- 'openControlled',
68
- 'openOnChange',
69
- 'openOnClick',
70
- 'openOnKeyPress',
71
- 'placeholder',
72
- 'positioning',
73
- 'readOnly',
74
- 'required',
75
- 'scrollToIndexFn',
76
- 'selectionBehavior',
77
- 'translations',
78
- 'value',
79
- ])(rest),
80
- );
81
-
82
- let combobox = createCombobox(reflect(() => createComboboxProps));
83
- let presence = createPresence(
84
- reflect(() => ({
85
- ...presenceStrategyProps,
86
- present: combobox.open,
87
- })),
88
- );
89
-
90
- let mergedProps = $derived(mergeProps(combobox.getRootProps(), localProps));
91
-
92
- setComboboxContext(combobox);
93
- setPresenceContext(presence);
94
- </script>
95
-
96
- {#if asChild}
97
- {@render asChild(mergedProps, combobox)}
98
- {:else}
99
- <div bind:this={ref} {...mergedProps}>
100
- {@render children?.(combobox)}
101
- </div>
102
- {/if}
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
+ CreateComboboxProps,
6
+ CreateComboboxReturn,
7
+ } from './create-combobox.svelte.js';
8
+
9
+ export interface ComboboxProps
10
+ extends Assign<
11
+ HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>,
12
+ CreateComboboxProps
13
+ >,
14
+ PresenceStrategyProps {}
15
+ </script>
16
+
17
+ <script lang="ts">
18
+ import {reflect} from '@zag-js/svelte';
19
+ import {createSplitProps} from '../create-split-props.js';
20
+ import {mergeProps} from '../merge-props.js';
21
+ import {createPresence} from '../presence/create-presence.svelte.js';
22
+ import {setPresenceContext} from '../presence/presence-context.svelte.js';
23
+ import {setComboboxContext} from './combobox-context.svelte.js';
24
+ import {createCombobox} from './create-combobox.svelte.js';
25
+
26
+ let {
27
+ ref = $bindable(null),
28
+ asChild,
29
+ children,
30
+ ...props
31
+ }: ComboboxProps = $props();
32
+
33
+ let [presenceStrategyProps, rest] = $derived(
34
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
35
+ props,
36
+ ),
37
+ );
38
+
39
+ let [createComboboxProps, localProps] = $derived(
40
+ createSplitProps<CreateComboboxProps>([
41
+ 'allowCustomValue',
42
+ 'autoFocus',
43
+ 'closeOnSelect',
44
+ 'collection',
45
+ 'composite',
46
+ 'disableLayer',
47
+ 'disabled',
48
+ 'form',
49
+ 'highlightedValue',
50
+ 'id',
51
+ 'ids',
52
+ 'inputBehavior',
53
+ 'inputValue',
54
+ 'invalid',
55
+ 'loopFocus',
56
+ 'multiple',
57
+ 'name',
58
+ 'navigate',
59
+ 'onFocusOutside',
60
+ 'onHighlightChange',
61
+ 'onInputValueChange',
62
+ 'onInteractOutside',
63
+ 'onOpenChange',
64
+ 'onPointerDownOutside',
65
+ 'onValueChange',
66
+ 'open',
67
+ 'openControlled',
68
+ 'openOnChange',
69
+ 'openOnClick',
70
+ 'openOnKeyPress',
71
+ 'placeholder',
72
+ 'positioning',
73
+ 'readOnly',
74
+ 'required',
75
+ 'scrollToIndexFn',
76
+ 'selectionBehavior',
77
+ 'translations',
78
+ 'value',
79
+ ])(rest),
80
+ );
81
+
82
+ let combobox = createCombobox(reflect(() => createComboboxProps));
83
+ let presence = createPresence(
84
+ reflect(() => ({
85
+ ...presenceStrategyProps,
86
+ present: combobox.open,
87
+ })),
88
+ );
89
+
90
+ let mergedProps = $derived(mergeProps(combobox.getRootProps(), localProps));
91
+
92
+ setComboboxContext(combobox);
93
+ setPresenceContext(presence);
94
+ </script>
95
+
96
+ {#if asChild}
97
+ {@render asChild(mergedProps, combobox)}
98
+ {:else}
99
+ <div bind:this={ref} {...mergedProps}>
100
+ {@render children?.(combobox)}
101
+ </div>
102
+ {/if}
@@ -1,48 +1,48 @@
1
- <script lang="ts" module>
2
- import type {Snippet} from 'svelte';
3
- import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
4
- import type {
5
- CreateDialogProps,
6
- CreateDialogReturn,
7
- } from './create-dialog.svelte.js';
8
-
9
- export interface DialogProps
10
- extends CreateDialogProps,
11
- PresenceStrategyProps {
12
- children?: Snippet<[CreateDialogReturn]>;
13
- }
14
- </script>
15
-
16
- <script lang="ts">
17
- import {reflect} from '@zag-js/svelte';
18
- import {createSplitProps} from '../create-split-props.js';
19
- import {createPresence} from '../presence/create-presence.svelte.js';
20
- import {
21
- setPresenceContext,
22
- setPresenceStrategyPropsContext,
23
- } from '../presence/presence-context.svelte.js';
24
- import {createDialog} from './create-dialog.svelte.js';
25
- import {setDialogContext} from './dialog-context.svelte.js';
26
-
27
- let {children, ...props}: DialogProps = $props();
28
-
29
- let [presenceStrategyProps, createDialogProps] = $derived(
30
- createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
31
- props,
32
- ),
33
- );
34
-
35
- let dialog = createDialog(reflect(() => createDialogProps));
36
- let presence = createPresence(
37
- reflect(() => ({
38
- ...presenceStrategyProps,
39
- present: dialog.open,
40
- })),
41
- );
42
-
43
- setDialogContext(dialog);
44
- setPresenceContext(presence);
45
- setPresenceStrategyPropsContext(() => presenceStrategyProps);
46
- </script>
47
-
48
- {@render children?.(dialog)}
1
+ <script lang="ts" module>
2
+ import type {Snippet} from 'svelte';
3
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
4
+ import type {
5
+ CreateDialogProps,
6
+ CreateDialogReturn,
7
+ } from './create-dialog.svelte.js';
8
+
9
+ export interface DialogProps
10
+ extends CreateDialogProps,
11
+ PresenceStrategyProps {
12
+ children?: Snippet<[CreateDialogReturn]>;
13
+ }
14
+ </script>
15
+
16
+ <script lang="ts">
17
+ import {reflect} from '@zag-js/svelte';
18
+ import {createSplitProps} from '../create-split-props.js';
19
+ import {createPresence} from '../presence/create-presence.svelte.js';
20
+ import {
21
+ setPresenceContext,
22
+ setPresenceStrategyPropsContext,
23
+ } from '../presence/presence-context.svelte.js';
24
+ import {createDialog} from './create-dialog.svelte.js';
25
+ import {setDialogContext} from './dialog-context.svelte.js';
26
+
27
+ let {children, ...props}: DialogProps = $props();
28
+
29
+ let [presenceStrategyProps, createDialogProps] = $derived(
30
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
31
+ props,
32
+ ),
33
+ );
34
+
35
+ let dialog = createDialog(reflect(() => createDialogProps));
36
+ let presence = createPresence(
37
+ reflect(() => ({
38
+ ...presenceStrategyProps,
39
+ present: dialog.open,
40
+ })),
41
+ );
42
+
43
+ setDialogContext(dialog);
44
+ setPresenceContext(presence);
45
+ setPresenceStrategyPropsContext(() => presenceStrategyProps);
46
+ </script>
47
+
48
+ {@render children?.(dialog)}
@@ -1,48 +1,48 @@
1
- <script lang="ts" module>
2
- import type {Snippet} from 'svelte';
3
- import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
4
- import type {
5
- CreateDrawerProps,
6
- CreateDrawerReturn,
7
- } from './create-drawer.svelte.js';
8
-
9
- export interface DrawerProps
10
- extends CreateDrawerProps,
11
- PresenceStrategyProps {
12
- children?: Snippet<[CreateDrawerReturn]>;
13
- }
14
- </script>
15
-
16
- <script lang="ts">
17
- import {reflect} from '@zag-js/svelte';
18
- import {createSplitProps} from '../create-split-props.js';
19
- import {createPresence} from '../presence/create-presence.svelte.js';
20
- import {
21
- setPresenceContext,
22
- setPresenceStrategyPropsContext,
23
- } from '../presence/presence-context.svelte.js';
24
- import {createDrawer} from './create-drawer.svelte.js';
25
- import {setDrawerContext} from './drawer-context.svelte.js';
26
-
27
- let {children, ...props}: DrawerProps = $props();
28
-
29
- let [presenceStrategyProps, createDialogProps] = $derived(
30
- createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
31
- props,
32
- ),
33
- );
34
-
35
- let drawer = createDrawer(reflect(() => createDialogProps));
36
- let presence = createPresence(
37
- reflect(() => ({
38
- ...presenceStrategyProps,
39
- present: drawer.open,
40
- })),
41
- );
42
-
43
- setDrawerContext(drawer);
44
- setPresenceContext(presence);
45
- setPresenceStrategyPropsContext(() => presenceStrategyProps);
46
- </script>
47
-
48
- {@render children?.(drawer)}
1
+ <script lang="ts" module>
2
+ import type {Snippet} from 'svelte';
3
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
4
+ import type {
5
+ CreateDrawerProps,
6
+ CreateDrawerReturn,
7
+ } from './create-drawer.svelte.js';
8
+
9
+ export interface DrawerProps
10
+ extends CreateDrawerProps,
11
+ PresenceStrategyProps {
12
+ children?: Snippet<[CreateDrawerReturn]>;
13
+ }
14
+ </script>
15
+
16
+ <script lang="ts">
17
+ import {reflect} from '@zag-js/svelte';
18
+ import {createSplitProps} from '../create-split-props.js';
19
+ import {createPresence} from '../presence/create-presence.svelte.js';
20
+ import {
21
+ setPresenceContext,
22
+ setPresenceStrategyPropsContext,
23
+ } from '../presence/presence-context.svelte.js';
24
+ import {createDrawer} from './create-drawer.svelte.js';
25
+ import {setDrawerContext} from './drawer-context.svelte.js';
26
+
27
+ let {children, ...props}: DrawerProps = $props();
28
+
29
+ let [presenceStrategyProps, createDialogProps] = $derived(
30
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
31
+ props,
32
+ ),
33
+ );
34
+
35
+ let drawer = createDrawer(reflect(() => createDialogProps));
36
+ let presence = createPresence(
37
+ reflect(() => ({
38
+ ...presenceStrategyProps,
39
+ present: drawer.open,
40
+ })),
41
+ );
42
+
43
+ setDrawerContext(drawer);
44
+ setPresenceContext(presence);
45
+ setPresenceStrategyPropsContext(() => presenceStrategyProps);
46
+ </script>
47
+
48
+ {@render children?.(drawer)}
@@ -1,72 +1,72 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateEditableProps,
5
- CreateEditableReturn,
6
- } from './create-editable.svelte.js';
7
-
8
- export interface EditableProps
9
- extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateEditableReturn>,
11
- CreateEditableProps
12
- > {}
13
- </script>
14
-
15
- <script lang="ts">
16
- import {reflect} from '@zag-js/svelte';
17
- import {createSplitProps} from '../create-split-props.js';
18
- import {mergeProps} from '../merge-props.js';
19
- import {createEditable} from './create-editable.svelte.js';
20
- import {setEditableContext} from './editable-context.svelte.js';
21
-
22
- let {
23
- ref = $bindable(null),
24
- asChild,
25
- children,
26
- ...props
27
- }: EditableProps = $props();
28
-
29
- let [createEditableProps, localProps] = $derived(
30
- createSplitProps<CreateEditableProps>([
31
- 'activationMode',
32
- 'autoResize',
33
- 'disabled',
34
- 'edit',
35
- 'editControlled',
36
- 'finalFocusEl',
37
- 'form',
38
- 'id',
39
- 'ids',
40
- 'invalid',
41
- 'maxLength',
42
- 'name',
43
- 'onEditChange',
44
- 'onFocusOutside',
45
- 'onInteractOutside',
46
- 'onPointerDownOutside',
47
- 'onValueChange',
48
- 'onValueCommit',
49
- 'onValueRevert',
50
- 'placeholder',
51
- 'readOnly',
52
- 'required',
53
- 'selectOnFocus',
54
- 'submitMode',
55
- 'translations',
56
- 'value',
57
- ])(props),
58
- );
59
-
60
- let editable = createEditable(reflect(() => createEditableProps));
61
- let mergedProps = $derived(mergeProps(editable.getRootProps(), localProps));
62
-
63
- setEditableContext(editable);
64
- </script>
65
-
66
- {#if asChild}
67
- {@render asChild(mergedProps, editable)}
68
- {:else}
69
- <div bind:this={ref} {...mergedProps}>
70
- {@render children?.(editable)}
71
- </div>
72
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateEditableProps,
5
+ CreateEditableReturn,
6
+ } from './create-editable.svelte.js';
7
+
8
+ export interface EditableProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateEditableReturn>,
11
+ CreateEditableProps
12
+ > {}
13
+ </script>
14
+
15
+ <script lang="ts">
16
+ import {reflect} from '@zag-js/svelte';
17
+ import {createSplitProps} from '../create-split-props.js';
18
+ import {mergeProps} from '../merge-props.js';
19
+ import {createEditable} from './create-editable.svelte.js';
20
+ import {setEditableContext} from './editable-context.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: EditableProps = $props();
28
+
29
+ let [createEditableProps, localProps] = $derived(
30
+ createSplitProps<CreateEditableProps>([
31
+ 'activationMode',
32
+ 'autoResize',
33
+ 'disabled',
34
+ 'edit',
35
+ 'editControlled',
36
+ 'finalFocusEl',
37
+ 'form',
38
+ 'id',
39
+ 'ids',
40
+ 'invalid',
41
+ 'maxLength',
42
+ 'name',
43
+ 'onEditChange',
44
+ 'onFocusOutside',
45
+ 'onInteractOutside',
46
+ 'onPointerDownOutside',
47
+ 'onValueChange',
48
+ 'onValueCommit',
49
+ 'onValueRevert',
50
+ 'placeholder',
51
+ 'readOnly',
52
+ 'required',
53
+ 'selectOnFocus',
54
+ 'submitMode',
55
+ 'translations',
56
+ 'value',
57
+ ])(props),
58
+ );
59
+
60
+ let editable = createEditable(reflect(() => createEditableProps));
61
+ let mergedProps = $derived(mergeProps(editable.getRootProps(), localProps));
62
+
63
+ setEditableContext(editable);
64
+ </script>
65
+
66
+ {#if asChild}
67
+ {@render asChild(mergedProps, editable)}
68
+ {:else}
69
+ <div bind:this={ref} {...mergedProps}>
70
+ {@render children?.(editable)}
71
+ </div>
72
+ {/if}
@@ -1,62 +1,62 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateFieldProps,
5
- CreateFieldReturn,
6
- } from './create-field.svelte.js';
7
-
8
- export interface FieldProps
9
- extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>,
11
- CreateFieldProps
12
- >,
13
- PresenceStrategyProps {}
14
- </script>
15
-
16
- <script lang="ts">
17
- import {reflect} from '@zag-js/svelte';
18
- import {createSplitProps} from '../create-split-props.js';
19
- import {mergeProps} from '../merge-props.js';
20
- import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
21
- import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
22
- import {createField} from './create-field.svelte.js';
23
- import {setFieldContext} from './field-context.svelte.js';
24
-
25
- let {
26
- ref = $bindable(null),
27
- asChild,
28
- children,
29
- ...props
30
- }: FieldProps = $props();
31
-
32
- let [presenceStrategyProps, rest] = $derived(
33
- createSplitProps<PresenceStrategyProps>(['keepMounted', 'lazyMount'])(
34
- props,
35
- ),
36
- );
37
-
38
- let [createFieldProps, localProps] = $derived(
39
- createSplitProps<CreateFieldProps>([
40
- 'id',
41
- 'ids',
42
- 'invalid',
43
- 'disabled',
44
- 'readOnly',
45
- 'required',
46
- ])(rest),
47
- );
48
-
49
- let field = createField(reflect(() => createFieldProps));
50
- let mergedProps = $derived(mergeProps(field.getRootProps(), localProps));
51
-
52
- setFieldContext(field);
53
- setPresenceStrategyPropsContext(() => presenceStrategyProps);
54
- </script>
55
-
56
- {#if asChild}
57
- {@render asChild(mergedProps, field)}
58
- {:else}
59
- <div bind:this={ref} {...mergedProps}>
60
- {@render children?.(field)}
61
- </div>
62
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateFieldProps,
5
+ CreateFieldReturn,
6
+ } from './create-field.svelte.js';
7
+
8
+ export interface FieldProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>,
11
+ CreateFieldProps
12
+ >,
13
+ PresenceStrategyProps {}
14
+ </script>
15
+
16
+ <script lang="ts">
17
+ import {reflect} from '@zag-js/svelte';
18
+ import {createSplitProps} from '../create-split-props.js';
19
+ import {mergeProps} from '../merge-props.js';
20
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
21
+ import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
22
+ import {createField} from './create-field.svelte.js';
23
+ import {setFieldContext} from './field-context.svelte.js';
24
+
25
+ let {
26
+ ref = $bindable(null),
27
+ asChild,
28
+ children,
29
+ ...props
30
+ }: FieldProps = $props();
31
+
32
+ let [presenceStrategyProps, rest] = $derived(
33
+ createSplitProps<PresenceStrategyProps>(['keepMounted', 'lazyMount'])(
34
+ props,
35
+ ),
36
+ );
37
+
38
+ let [createFieldProps, localProps] = $derived(
39
+ createSplitProps<CreateFieldProps>([
40
+ 'id',
41
+ 'ids',
42
+ 'invalid',
43
+ 'disabled',
44
+ 'readOnly',
45
+ 'required',
46
+ ])(rest),
47
+ );
48
+
49
+ let field = createField(reflect(() => createFieldProps));
50
+ let mergedProps = $derived(mergeProps(field.getRootProps(), localProps));
51
+
52
+ setFieldContext(field);
53
+ setPresenceStrategyPropsContext(() => presenceStrategyProps);
54
+ </script>
55
+
56
+ {#if asChild}
57
+ {@render asChild(mergedProps, field)}
58
+ {:else}
59
+ <div bind:this={ref} {...mergedProps}>
60
+ {@render children?.(field)}
61
+ </div>
62
+ {/if}