ui-ingredients 0.20.0 → 0.21.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. package/dist/accordion/accordion-item-content.svelte +55 -55
  2. package/dist/accordion/accordion-root.svelte +66 -66
  3. package/dist/alert-dialog/alert-dialog-backdrop.svelte +49 -49
  4. package/dist/alert-dialog/alert-dialog-root.svelte +48 -48
  5. package/dist/avatar/avatar-root.svelte +46 -46
  6. package/dist/carousel/carousel-root.svelte +56 -56
  7. package/dist/checkbox/checkbox-root.svelte +59 -59
  8. package/dist/clipboard/clipboard-root.svelte +52 -52
  9. package/dist/collapsible/collapsible-root.svelte +75 -75
  10. package/dist/color-picker/color-picker-root.svelte +87 -87
  11. package/dist/combobox/combobox-root.svelte +101 -101
  12. package/dist/combobox/combobox-trigger.svelte +41 -41
  13. package/dist/date-picker/date-picker-root.svelte +89 -89
  14. package/dist/dialog/dialog-backdrop.svelte +45 -45
  15. package/dist/dialog/dialog-root.svelte +48 -48
  16. package/dist/drawer/drawer-backdrop.svelte +45 -45
  17. package/dist/drawer/drawer-root.svelte +48 -48
  18. package/dist/editable/editable-root.svelte +74 -74
  19. package/dist/field/field-error-text.svelte +50 -50
  20. package/dist/field/field-root.svelte +63 -63
  21. package/dist/file-upload/file-upload-root.svelte +66 -66
  22. package/dist/floating-panel/floating-panel-root.svelte +47 -47
  23. package/dist/hover-card/hover-card-root.svelte +52 -52
  24. package/dist/menu/menu-root.svelte +74 -74
  25. package/dist/number-input/number-input-root.svelte +74 -74
  26. package/dist/pagination/pagination-root.svelte +57 -57
  27. package/dist/pin-input/pin-input-root.svelte +68 -68
  28. package/dist/popover/popover-root.svelte +60 -60
  29. package/dist/presence/presence.svelte +48 -48
  30. package/dist/progress/progress-root.svelte +54 -54
  31. package/dist/qr-code/qr-code-root.svelte +48 -48
  32. package/dist/radio-group/radio-group-root.svelte +56 -56
  33. package/dist/rating-group/rating-group-root.svelte +63 -63
  34. package/dist/segment-group/segment-group-root.svelte +58 -58
  35. package/dist/select/select-root.svelte +88 -88
  36. package/dist/signature-pad/signature-pad-root.svelte +59 -59
  37. package/dist/slider/slider-root.svelte +69 -69
  38. package/dist/splitter/splitter-root.svelte +53 -53
  39. package/dist/steps/steps-completed-content.svelte +51 -37
  40. package/dist/steps/steps-completed-content.svelte.d.ts +2 -1
  41. package/dist/steps/steps-content.svelte +55 -32
  42. package/dist/steps/steps-content.svelte.d.ts +2 -1
  43. package/dist/steps/steps-root.svelte +65 -55
  44. package/dist/steps/steps-root.svelte.d.ts +2 -1
  45. package/dist/switch/switch-root.svelte +59 -59
  46. package/dist/tabs/tabs-root.svelte +57 -57
  47. package/dist/tags-input/tags-input-root.svelte +74 -74
  48. package/dist/time-picker/time-picker-root.svelte +81 -81
  49. package/dist/timer/timer-root.svelte +55 -55
  50. package/dist/toast/create-toaster.svelte.d.ts +1 -1
  51. package/dist/toast/toast-actor.svelte +19 -19
  52. package/dist/toast/toast-actor.svelte.d.ts +3 -3
  53. package/dist/toast/toaster.svelte +19 -21
  54. package/dist/toast/toaster.svelte.d.ts +1 -1
  55. package/dist/toggle/toggle-root.svelte +50 -50
  56. package/dist/toggle-group/toggle-group-root.svelte +58 -58
  57. package/dist/tooltip/tooltip-root.svelte +44 -44
  58. package/dist/tour/tour-backdrop.svelte +44 -44
  59. package/dist/tour/tour-root.svelte +47 -47
  60. package/dist/tree-view/tree-view-branch-content.svelte +55 -55
  61. package/dist/tree-view/tree-view-root.svelte +68 -68
  62. package/package.json +5 -5
@@ -1,56 +1,56 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateRadioGroupProps,
5
- CreateRadioGroupReturn,
6
- } from './create-radio-group.svelte.js';
7
-
8
- export interface RadioGroupProps
9
- extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateRadioGroupReturn>,
11
- CreateRadioGroupProps
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 {createRadioGroup} from './create-radio-group.svelte.js';
20
- import {setRadioGroupContext} from './radio-group-context.svelte.js';
21
-
22
- let {
23
- ref = $bindable(null),
24
- asChild,
25
- children,
26
- ...props
27
- }: RadioGroupProps = $props();
28
-
29
- let [createRadioGroupProps, localProps] = $derived(
30
- createSplitProps<CreateRadioGroupProps>([
31
- 'id',
32
- 'ids',
33
- 'form',
34
- 'name',
35
- 'value',
36
- 'disabled',
37
- 'readOnly',
38
- 'orientation',
39
- 'onValueChange',
40
- ])(props),
41
- );
42
-
43
- let radioGroup = createRadioGroup(reflect(() => createRadioGroupProps));
44
-
45
- let mergedProps = $derived(mergeProps(radioGroup.getRootProps(), localProps));
46
-
47
- setRadioGroupContext(radioGroup);
48
- </script>
49
-
50
- {#if asChild}
51
- {@render asChild(mergedProps, radioGroup)}
52
- {:else}
53
- <div bind:this={ref} {...mergedProps}>
54
- {@render children?.(radioGroup)}
55
- </div>
56
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateRadioGroupProps,
5
+ CreateRadioGroupReturn,
6
+ } from './create-radio-group.svelte.js';
7
+
8
+ export interface RadioGroupProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateRadioGroupReturn>,
11
+ CreateRadioGroupProps
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 {createRadioGroup} from './create-radio-group.svelte.js';
20
+ import {setRadioGroupContext} from './radio-group-context.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: RadioGroupProps = $props();
28
+
29
+ let [createRadioGroupProps, localProps] = $derived(
30
+ createSplitProps<CreateRadioGroupProps>([
31
+ 'id',
32
+ 'ids',
33
+ 'form',
34
+ 'name',
35
+ 'value',
36
+ 'disabled',
37
+ 'readOnly',
38
+ 'orientation',
39
+ 'onValueChange',
40
+ ])(props),
41
+ );
42
+
43
+ let radioGroup = createRadioGroup(reflect(() => createRadioGroupProps));
44
+
45
+ let mergedProps = $derived(mergeProps(radioGroup.getRootProps(), localProps));
46
+
47
+ setRadioGroupContext(radioGroup);
48
+ </script>
49
+
50
+ {#if asChild}
51
+ {@render asChild(mergedProps, radioGroup)}
52
+ {:else}
53
+ <div bind:this={ref} {...mergedProps}>
54
+ {@render children?.(radioGroup)}
55
+ </div>
56
+ {/if}
@@ -1,63 +1,63 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateRatingGroupProps,
5
- CreateRatingGroupReturn,
6
- } from './create-rating-group.svelte.js';
7
-
8
- export interface RatingGroupProps
9
- extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateRatingGroupReturn>,
11
- CreateRatingGroupProps
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 {createRatingGroup} from './create-rating-group.svelte.js';
20
- import {setRatingGroupContext} from './rating-group-context.svelte.js';
21
-
22
- let {
23
- ref = $bindable(null),
24
- asChild,
25
- children,
26
- ...props
27
- }: RatingGroupProps = $props();
28
-
29
- let [createRatingGroupProps, localProps] = $derived(
30
- createSplitProps<CreateRatingGroupProps>([
31
- 'id',
32
- 'ids',
33
- 'form',
34
- 'name',
35
- 'count',
36
- 'value',
37
- 'disabled',
38
- 'readOnly',
39
- 'required',
40
- 'autoFocus',
41
- 'allowHalf',
42
- 'translations',
43
- 'onHoverChange',
44
- 'onValueChange',
45
- ])(props),
46
- );
47
-
48
- let ratingGroup = createRatingGroup(reflect(() => createRatingGroupProps));
49
-
50
- let mergedProps = $derived(
51
- mergeProps(ratingGroup.getRootProps(), localProps),
52
- );
53
-
54
- setRatingGroupContext(ratingGroup);
55
- </script>
56
-
57
- {#if asChild}
58
- {@render asChild(mergedProps, ratingGroup)}
59
- {:else}
60
- <div bind:this={ref} {...mergedProps}>
61
- {@render children?.(ratingGroup)}
62
- </div>
63
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateRatingGroupProps,
5
+ CreateRatingGroupReturn,
6
+ } from './create-rating-group.svelte.js';
7
+
8
+ export interface RatingGroupProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateRatingGroupReturn>,
11
+ CreateRatingGroupProps
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 {createRatingGroup} from './create-rating-group.svelte.js';
20
+ import {setRatingGroupContext} from './rating-group-context.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: RatingGroupProps = $props();
28
+
29
+ let [createRatingGroupProps, localProps] = $derived(
30
+ createSplitProps<CreateRatingGroupProps>([
31
+ 'id',
32
+ 'ids',
33
+ 'form',
34
+ 'name',
35
+ 'count',
36
+ 'value',
37
+ 'disabled',
38
+ 'readOnly',
39
+ 'required',
40
+ 'autoFocus',
41
+ 'allowHalf',
42
+ 'translations',
43
+ 'onHoverChange',
44
+ 'onValueChange',
45
+ ])(props),
46
+ );
47
+
48
+ let ratingGroup = createRatingGroup(reflect(() => createRatingGroupProps));
49
+
50
+ let mergedProps = $derived(
51
+ mergeProps(ratingGroup.getRootProps(), localProps),
52
+ );
53
+
54
+ setRatingGroupContext(ratingGroup);
55
+ </script>
56
+
57
+ {#if asChild}
58
+ {@render asChild(mergedProps, ratingGroup)}
59
+ {:else}
60
+ <div bind:this={ref} {...mergedProps}>
61
+ {@render children?.(ratingGroup)}
62
+ </div>
63
+ {/if}
@@ -1,58 +1,58 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateSegmentGroupProps,
5
- CreateSegmentGroupReturn,
6
- } from './create-segment-group.svelte.js';
7
-
8
- export interface SegmentGroupProps
9
- extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateSegmentGroupReturn>,
11
- CreateSegmentGroupProps
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 {createSegmentGroup} from './create-segment-group.svelte.js';
20
- import {setSegmentGroupContext} from './segment-group-context.svelte.js';
21
-
22
- let {
23
- ref = $bindable(null),
24
- asChild,
25
- children,
26
- ...props
27
- }: SegmentGroupProps = $props();
28
-
29
- let [createSegmentGroupProps, localProps] = $derived(
30
- createSplitProps<CreateSegmentGroupProps>([
31
- 'id',
32
- 'ids',
33
- 'form',
34
- 'name',
35
- 'value',
36
- 'disabled',
37
- 'readOnly',
38
- 'orientation',
39
- 'onValueChange',
40
- ])(props),
41
- );
42
-
43
- let segmentGroup = createSegmentGroup(reflect(() => createSegmentGroupProps));
44
-
45
- let mergedProps = $derived(
46
- mergeProps(segmentGroup.getRootProps(), localProps),
47
- );
48
-
49
- setSegmentGroupContext(segmentGroup);
50
- </script>
51
-
52
- {#if asChild}
53
- {@render asChild(mergedProps, segmentGroup)}
54
- {:else}
55
- <div bind:this={ref} {...mergedProps}>
56
- {@render children?.(segmentGroup)}
57
- </div>
58
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateSegmentGroupProps,
5
+ CreateSegmentGroupReturn,
6
+ } from './create-segment-group.svelte.js';
7
+
8
+ export interface SegmentGroupProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateSegmentGroupReturn>,
11
+ CreateSegmentGroupProps
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 {createSegmentGroup} from './create-segment-group.svelte.js';
20
+ import {setSegmentGroupContext} from './segment-group-context.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: SegmentGroupProps = $props();
28
+
29
+ let [createSegmentGroupProps, localProps] = $derived(
30
+ createSplitProps<CreateSegmentGroupProps>([
31
+ 'id',
32
+ 'ids',
33
+ 'form',
34
+ 'name',
35
+ 'value',
36
+ 'disabled',
37
+ 'readOnly',
38
+ 'orientation',
39
+ 'onValueChange',
40
+ ])(props),
41
+ );
42
+
43
+ let segmentGroup = createSegmentGroup(reflect(() => createSegmentGroupProps));
44
+
45
+ let mergedProps = $derived(
46
+ mergeProps(segmentGroup.getRootProps(), localProps),
47
+ );
48
+
49
+ setSegmentGroupContext(segmentGroup);
50
+ </script>
51
+
52
+ {#if asChild}
53
+ {@render asChild(mergedProps, segmentGroup)}
54
+ {:else}
55
+ <div bind:this={ref} {...mergedProps}>
56
+ {@render children?.(segmentGroup)}
57
+ </div>
58
+ {/if}
@@ -1,88 +1,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
- CreateSelectProps,
6
- CreateSelectReturn,
7
- } from './create-select.svelte.js';
8
-
9
- export interface SelectProps
10
- extends Assign<
11
- HtmlIngredientProps<'div', HTMLDivElement, CreateSelectReturn>,
12
- CreateSelectProps
13
- >,
14
- PresenceStrategyProps {}
15
- </script>
16
-
17
- <script lang="ts">
18
- import {mergeProps} from '../merge-props.js';
19
- import {createPresence} from '../presence/create-presence.svelte.js';
20
- import {setPresenceContext} from '../presence/presence-context.svelte.js';
21
- import {reflect} from '@zag-js/svelte';
22
- import {createSplitProps} from '@zag-js/utils';
23
- import {createSelect} from './create-select.svelte.js';
24
- import {setSelectContext} from './select-context.svelte.js';
25
-
26
- let {
27
- ref = $bindable(null),
28
- asChild,
29
- children,
30
- ...props
31
- }: SelectProps = $props();
32
-
33
- let [createSelectProps, rest] = $derived(
34
- createSplitProps<CreateSelectProps>([
35
- 'id',
36
- 'ids',
37
- 'form',
38
- 'name',
39
- 'open',
40
- 'openControlled',
41
- 'value',
42
- 'invalid',
43
- 'multiple',
44
- 'disabled',
45
- 'readOnly',
46
- 'required',
47
- 'loopFocus',
48
- 'composite',
49
- 'positioning',
50
- 'deselectable',
51
- 'closeOnSelect',
52
- 'highlightedValue',
53
- 'onOpenChange',
54
- 'onValueChange',
55
- 'onFocusOutside',
56
- 'onHighlightChange',
57
- 'onInteractOutside',
58
- 'onPointerDownOutside',
59
- 'scrollToIndexFn',
60
- 'collection',
61
- ])(props),
62
- );
63
-
64
- let [presenceStrategyProps, localProps] = $derived(
65
- createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(rest),
66
- );
67
-
68
- let select = createSelect(reflect(() => createSelectProps));
69
- let presence = createPresence(
70
- reflect(() => ({
71
- ...presenceStrategyProps,
72
- present: select.open,
73
- })),
74
- );
75
-
76
- let mergedProps = $derived(mergeProps(select.getRootProps(), localProps));
77
-
78
- setSelectContext(select);
79
- setPresenceContext(presence);
80
- </script>
81
-
82
- {#if asChild}
83
- {@render asChild(mergedProps, select)}
84
- {:else}
85
- <div bind:this={ref} {...mergedProps}>
86
- {@render children?.(select)}
87
- </div>
88
- {/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
+ CreateSelectProps,
6
+ CreateSelectReturn,
7
+ } from './create-select.svelte.js';
8
+
9
+ export interface SelectProps
10
+ extends Assign<
11
+ HtmlIngredientProps<'div', HTMLDivElement, CreateSelectReturn>,
12
+ CreateSelectProps
13
+ >,
14
+ PresenceStrategyProps {}
15
+ </script>
16
+
17
+ <script lang="ts">
18
+ import {mergeProps} from '../merge-props.js';
19
+ import {createPresence} from '../presence/create-presence.svelte.js';
20
+ import {setPresenceContext} from '../presence/presence-context.svelte.js';
21
+ import {reflect} from '@zag-js/svelte';
22
+ import {createSplitProps} from '@zag-js/utils';
23
+ import {createSelect} from './create-select.svelte.js';
24
+ import {setSelectContext} from './select-context.svelte.js';
25
+
26
+ let {
27
+ ref = $bindable(null),
28
+ asChild,
29
+ children,
30
+ ...props
31
+ }: SelectProps = $props();
32
+
33
+ let [createSelectProps, rest] = $derived(
34
+ createSplitProps<CreateSelectProps>([
35
+ 'id',
36
+ 'ids',
37
+ 'form',
38
+ 'name',
39
+ 'open',
40
+ 'openControlled',
41
+ 'value',
42
+ 'invalid',
43
+ 'multiple',
44
+ 'disabled',
45
+ 'readOnly',
46
+ 'required',
47
+ 'loopFocus',
48
+ 'composite',
49
+ 'positioning',
50
+ 'deselectable',
51
+ 'closeOnSelect',
52
+ 'highlightedValue',
53
+ 'onOpenChange',
54
+ 'onValueChange',
55
+ 'onFocusOutside',
56
+ 'onHighlightChange',
57
+ 'onInteractOutside',
58
+ 'onPointerDownOutside',
59
+ 'scrollToIndexFn',
60
+ 'collection',
61
+ ])(props),
62
+ );
63
+
64
+ let [presenceStrategyProps, localProps] = $derived(
65
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(rest),
66
+ );
67
+
68
+ let select = createSelect(reflect(() => createSelectProps));
69
+ let presence = createPresence(
70
+ reflect(() => ({
71
+ ...presenceStrategyProps,
72
+ present: select.open,
73
+ })),
74
+ );
75
+
76
+ let mergedProps = $derived(mergeProps(select.getRootProps(), localProps));
77
+
78
+ setSelectContext(select);
79
+ setPresenceContext(presence);
80
+ </script>
81
+
82
+ {#if asChild}
83
+ {@render asChild(mergedProps, select)}
84
+ {:else}
85
+ <div bind:this={ref} {...mergedProps}>
86
+ {@render children?.(select)}
87
+ </div>
88
+ {/if}
@@ -1,59 +1,59 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateSignaturePadProps,
5
- CreateSignaturePadReturn,
6
- } from './create-signature-pad.svelte.js';
7
-
8
- export interface SignaturePadProps
9
- extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateSignaturePadReturn>,
11
- CreateSignaturePadProps
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 {createSignaturePad} from './create-signature-pad.svelte.js';
20
- import {setSignaturePadContext} from './signature-pad-context.svelte.js';
21
-
22
- let {
23
- ref = $bindable(null),
24
- asChild,
25
- children,
26
- ...props
27
- }: SignaturePadProps = $props();
28
-
29
- let [createSignaturePadProps, localProps] = $derived(
30
- createSplitProps<CreateSignaturePadProps>([
31
- 'id',
32
- 'ids',
33
- 'name',
34
- 'drawing',
35
- 'required',
36
- 'disabled',
37
- 'readOnly',
38
- 'translations',
39
- 'onDraw',
40
- 'onDrawEnd',
41
- ])(props),
42
- );
43
-
44
- let signaturePad = createSignaturePad(reflect(() => createSignaturePadProps));
45
-
46
- let mergedProps = $derived(
47
- mergeProps(signaturePad.getRootProps(), localProps),
48
- );
49
-
50
- setSignaturePadContext(signaturePad);
51
- </script>
52
-
53
- {#if asChild}
54
- {@render asChild(mergedProps, signaturePad)}
55
- {:else}
56
- <div bind:this={ref} {...mergedProps}>
57
- {@render children?.(signaturePad)}
58
- </div>
59
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateSignaturePadProps,
5
+ CreateSignaturePadReturn,
6
+ } from './create-signature-pad.svelte.js';
7
+
8
+ export interface SignaturePadProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateSignaturePadReturn>,
11
+ CreateSignaturePadProps
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 {createSignaturePad} from './create-signature-pad.svelte.js';
20
+ import {setSignaturePadContext} from './signature-pad-context.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: SignaturePadProps = $props();
28
+
29
+ let [createSignaturePadProps, localProps] = $derived(
30
+ createSplitProps<CreateSignaturePadProps>([
31
+ 'id',
32
+ 'ids',
33
+ 'name',
34
+ 'drawing',
35
+ 'required',
36
+ 'disabled',
37
+ 'readOnly',
38
+ 'translations',
39
+ 'onDraw',
40
+ 'onDrawEnd',
41
+ ])(props),
42
+ );
43
+
44
+ let signaturePad = createSignaturePad(reflect(() => createSignaturePadProps));
45
+
46
+ let mergedProps = $derived(
47
+ mergeProps(signaturePad.getRootProps(), localProps),
48
+ );
49
+
50
+ setSignaturePadContext(signaturePad);
51
+ </script>
52
+
53
+ {#if asChild}
54
+ {@render asChild(mergedProps, signaturePad)}
55
+ {:else}
56
+ <div bind:this={ref} {...mergedProps}>
57
+ {@render children?.(signaturePad)}
58
+ </div>
59
+ {/if}