ui-ingredients 0.20.0 → 0.21.1

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 (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,66 +1,66 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateFileUploadProps,
5
- CreateFileUploadReturn,
6
- } from './create-file-upload.svelte.js';
7
-
8
- export interface FileUploadProps
9
- extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateFileUploadReturn>,
11
- CreateFileUploadProps
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 {createFileUpload} from './create-file-upload.svelte.js';
20
- import {setFileUploadContext} from './file-upload-context.svelte.js';
21
-
22
- let {
23
- ref = $bindable(null),
24
- asChild,
25
- children,
26
- ...props
27
- }: FileUploadProps = $props();
28
-
29
- let [createFileUploadProps, localProps] = $derived(
30
- createSplitProps<CreateFileUploadProps>([
31
- 'id',
32
- 'ids',
33
- 'name',
34
- 'accept',
35
- 'locale',
36
- 'capture',
37
- 'invalid',
38
- 'required',
39
- 'disabled',
40
- 'validate',
41
- 'allowDrop',
42
- 'directory',
43
- 'maxFiles',
44
- 'maxFileSize',
45
- 'minFileSize',
46
- 'onFileAccept',
47
- 'onFileChange',
48
- 'onFileReject',
49
- 'translations',
50
- ])(props),
51
- );
52
-
53
- let fileUpload = createFileUpload(reflect(() => createFileUploadProps));
54
-
55
- let mergedProps = $derived(mergeProps(fileUpload.getRootProps(), localProps));
56
-
57
- setFileUploadContext(fileUpload);
58
- </script>
59
-
60
- {#if asChild}
61
- {@render asChild(mergedProps, fileUpload)}
62
- {:else}
63
- <div bind:this={ref} {...mergedProps}>
64
- {@render children?.(fileUpload)}
65
- </div>
66
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateFileUploadProps,
5
+ CreateFileUploadReturn,
6
+ } from './create-file-upload.svelte.js';
7
+
8
+ export interface FileUploadProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateFileUploadReturn>,
11
+ CreateFileUploadProps
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 {createFileUpload} from './create-file-upload.svelte.js';
20
+ import {setFileUploadContext} from './file-upload-context.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: FileUploadProps = $props();
28
+
29
+ let [createFileUploadProps, localProps] = $derived(
30
+ createSplitProps<CreateFileUploadProps>([
31
+ 'id',
32
+ 'ids',
33
+ 'name',
34
+ 'accept',
35
+ 'locale',
36
+ 'capture',
37
+ 'invalid',
38
+ 'required',
39
+ 'disabled',
40
+ 'validate',
41
+ 'allowDrop',
42
+ 'directory',
43
+ 'maxFiles',
44
+ 'maxFileSize',
45
+ 'minFileSize',
46
+ 'onFileAccept',
47
+ 'onFileChange',
48
+ 'onFileReject',
49
+ 'translations',
50
+ ])(props),
51
+ );
52
+
53
+ let fileUpload = createFileUpload(reflect(() => createFileUploadProps));
54
+
55
+ let mergedProps = $derived(mergeProps(fileUpload.getRootProps(), localProps));
56
+
57
+ setFileUploadContext(fileUpload);
58
+ </script>
59
+
60
+ {#if asChild}
61
+ {@render asChild(mergedProps, fileUpload)}
62
+ {:else}
63
+ <div bind:this={ref} {...mergedProps}>
64
+ {@render children?.(fileUpload)}
65
+ </div>
66
+ {/if}
@@ -1,47 +1,47 @@
1
- <script lang="ts" module>
2
- import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
3
- import type {Snippet} from 'svelte';
4
- import type {
5
- CreateFloatingPanelProps,
6
- CreateFloatingPanelReturn,
7
- } from './create-floating-panel.svelte.js';
8
-
9
- export interface FloatingPanelProps
10
- extends CreateFloatingPanelProps,
11
- PresenceStrategyProps {
12
- children?: Snippet<[CreateFloatingPanelReturn]>;
13
- }
14
- </script>
15
-
16
- <script lang="ts">
17
- import {createPresence} from '../presence/create-presence.svelte.js';
18
- import {setPresenceContext} from '../presence/presence-context.svelte.js';
19
- import {reflect} from '@zag-js/svelte';
20
- import {createSplitProps} from '@zag-js/utils';
21
- import {createFloatingPanel} from './create-floating-panel.svelte.js';
22
- import {setFloatingPanelContext} from './floating-panel-context.svelte.js';
23
-
24
- let {children, ...props}: FloatingPanelProps = $props();
25
-
26
- let [presenceStrategyProps, createFloatingPanelProps] = $derived(
27
- createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
28
- props,
29
- ),
30
- );
31
-
32
- let floatingPanel = createFloatingPanel(
33
- reflect(() => createFloatingPanelProps),
34
- );
35
-
36
- let presence = createPresence(
37
- reflect(() => ({
38
- ...presenceStrategyProps,
39
- present: floatingPanel.open,
40
- })),
41
- );
42
-
43
- setFloatingPanelContext(floatingPanel);
44
- setPresenceContext(presence);
45
- </script>
46
-
47
- {@render children?.(floatingPanel)}
1
+ <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
3
+ import type {Snippet} from 'svelte';
4
+ import type {
5
+ CreateFloatingPanelProps,
6
+ CreateFloatingPanelReturn,
7
+ } from './create-floating-panel.svelte.js';
8
+
9
+ export interface FloatingPanelProps
10
+ extends CreateFloatingPanelProps,
11
+ PresenceStrategyProps {
12
+ children?: Snippet<[CreateFloatingPanelReturn]>;
13
+ }
14
+ </script>
15
+
16
+ <script lang="ts">
17
+ import {createPresence} from '../presence/create-presence.svelte.js';
18
+ import {setPresenceContext} from '../presence/presence-context.svelte.js';
19
+ import {reflect} from '@zag-js/svelte';
20
+ import {createSplitProps} from '@zag-js/utils';
21
+ import {createFloatingPanel} from './create-floating-panel.svelte.js';
22
+ import {setFloatingPanelContext} from './floating-panel-context.svelte.js';
23
+
24
+ let {children, ...props}: FloatingPanelProps = $props();
25
+
26
+ let [presenceStrategyProps, createFloatingPanelProps] = $derived(
27
+ createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
28
+ props,
29
+ ),
30
+ );
31
+
32
+ let floatingPanel = createFloatingPanel(
33
+ reflect(() => createFloatingPanelProps),
34
+ );
35
+
36
+ let presence = createPresence(
37
+ reflect(() => ({
38
+ ...presenceStrategyProps,
39
+ present: floatingPanel.open,
40
+ })),
41
+ );
42
+
43
+ setFloatingPanelContext(floatingPanel);
44
+ setPresenceContext(presence);
45
+ </script>
46
+
47
+ {@render children?.(floatingPanel)}
@@ -1,52 +1,52 @@
1
- <script lang="ts" module>
2
- import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
3
- import type {Snippet} from 'svelte';
4
- import type {
5
- CreateHoverCardProps,
6
- CreateHoverCardReturn,
7
- } from './create-hover-card.svelte.js';
8
-
9
- export interface HoverCardProps
10
- extends CreateHoverCardProps,
11
- PresenceStrategyProps {
12
- children?: Snippet<[CreateHoverCardReturn]>;
13
- }
14
- </script>
15
-
16
- <script lang="ts">
17
- import {createPresence} from '../presence/create-presence.svelte.js';
18
- import {setPresenceContext} from '../presence/presence-context.svelte.js';
19
- import {reflect} from '@zag-js/svelte';
20
- import {createSplitProps} from '@zag-js/utils';
21
- import {createHoverCard} from './create-hover-card.svelte.js';
22
- import {setHoverCardContext} from './hover-card-context.svelte.js';
23
-
24
- let {children, ...props}: HoverCardProps = $props();
25
-
26
- let [createHoverCardProps, presenceStrategyProps] = $derived(
27
- createSplitProps<CreateHoverCardProps>([
28
- 'id',
29
- 'ids',
30
- 'open',
31
- 'openControlled',
32
- 'openDelay',
33
- 'closeDelay',
34
- 'positioning',
35
- 'onOpenChange',
36
- ])(props),
37
- );
38
-
39
- let hoverCard = createHoverCard(reflect(() => createHoverCardProps));
40
-
41
- let presence = createPresence(
42
- reflect(() => ({
43
- ...presenceStrategyProps,
44
- present: hoverCard.open,
45
- })),
46
- );
47
-
48
- setHoverCardContext(hoverCard);
49
- setPresenceContext(presence);
50
- </script>
51
-
52
- {@render children?.(hoverCard)}
1
+ <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
3
+ import type {Snippet} from 'svelte';
4
+ import type {
5
+ CreateHoverCardProps,
6
+ CreateHoverCardReturn,
7
+ } from './create-hover-card.svelte.js';
8
+
9
+ export interface HoverCardProps
10
+ extends CreateHoverCardProps,
11
+ PresenceStrategyProps {
12
+ children?: Snippet<[CreateHoverCardReturn]>;
13
+ }
14
+ </script>
15
+
16
+ <script lang="ts">
17
+ import {createPresence} from '../presence/create-presence.svelte.js';
18
+ import {setPresenceContext} from '../presence/presence-context.svelte.js';
19
+ import {reflect} from '@zag-js/svelte';
20
+ import {createSplitProps} from '@zag-js/utils';
21
+ import {createHoverCard} from './create-hover-card.svelte.js';
22
+ import {setHoverCardContext} from './hover-card-context.svelte.js';
23
+
24
+ let {children, ...props}: HoverCardProps = $props();
25
+
26
+ let [createHoverCardProps, presenceStrategyProps] = $derived(
27
+ createSplitProps<CreateHoverCardProps>([
28
+ 'id',
29
+ 'ids',
30
+ 'open',
31
+ 'openControlled',
32
+ 'openDelay',
33
+ 'closeDelay',
34
+ 'positioning',
35
+ 'onOpenChange',
36
+ ])(props),
37
+ );
38
+
39
+ let hoverCard = createHoverCard(reflect(() => createHoverCardProps));
40
+
41
+ let presence = createPresence(
42
+ reflect(() => ({
43
+ ...presenceStrategyProps,
44
+ present: hoverCard.open,
45
+ })),
46
+ );
47
+
48
+ setHoverCardContext(hoverCard);
49
+ setPresenceContext(presence);
50
+ </script>
51
+
52
+ {@render children?.(hoverCard)}
@@ -1,74 +1,74 @@
1
- <script lang="ts" module>
2
- import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
3
- import type {Snippet} from 'svelte';
4
- import {
5
- type CreateMenuProps,
6
- type CreateMenuReturn,
7
- } from './create-menu.svelte.js';
8
-
9
- export interface MenuRootProps
10
- extends CreateMenuProps,
11
- PresenceStrategyProps {
12
- children?: Snippet<[CreateMenuReturn]>;
13
- }
14
- </script>
15
-
16
- <script lang="ts">
17
- import {createPresence} from '../presence/create-presence.svelte.js';
18
- import {setPresenceContext} from '../presence/presence-context.svelte.js';
19
- import {reflect} from '@zag-js/svelte';
20
- import {createSplitProps} from '@zag-js/utils';
21
- import {createMenu} from './create-menu.svelte.js';
22
- import {
23
- getMenuContext,
24
- setMenuContext,
25
- setMenuTriggerItemContext,
26
- } from './menu-context.svelte.js';
27
-
28
- let {children, ...props}: MenuRootProps = $props();
29
-
30
- let [createMenuProps, presenceStrategyProps] = $derived(
31
- createSplitProps<CreateMenuProps>([
32
- 'id',
33
- 'ids',
34
- 'open',
35
- 'openControlled',
36
- 'loopFocus',
37
- 'composite',
38
- 'typeahead',
39
- 'positioning',
40
- 'anchorPoint',
41
- 'closeOnSelect',
42
- 'highlightedValue',
43
- 'aria-label',
44
- 'onSelect',
45
- 'onOpenChange',
46
- 'onFocusOutside',
47
- 'onEscapeKeyDown',
48
- 'onHighlightChange',
49
- 'onInteractOutside',
50
- 'onPointerDownOutside',
51
- ])(props),
52
- );
53
-
54
- let parentMenu = getMenuContext();
55
- let menu = createMenu(reflect(() => createMenuProps));
56
-
57
- let presence = createPresence(
58
- reflect(() => ({
59
- ...presenceStrategyProps,
60
- present: menu.open,
61
- })),
62
- );
63
-
64
- setMenuContext(menu);
65
- setPresenceContext(presence);
66
- setMenuTriggerItemContext(() => parentMenu?.getTriggerItemProps(menu) ?? {});
67
-
68
- if (parentMenu) {
69
- parentMenu.setChild(menu.machine);
70
- menu.setParent(parentMenu.machine);
71
- }
72
- </script>
73
-
74
- {@render children?.(menu)}
1
+ <script lang="ts" module>
2
+ import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
3
+ import type {Snippet} from 'svelte';
4
+ import {
5
+ type CreateMenuProps,
6
+ type CreateMenuReturn,
7
+ } from './create-menu.svelte.js';
8
+
9
+ export interface MenuRootProps
10
+ extends CreateMenuProps,
11
+ PresenceStrategyProps {
12
+ children?: Snippet<[CreateMenuReturn]>;
13
+ }
14
+ </script>
15
+
16
+ <script lang="ts">
17
+ import {createPresence} from '../presence/create-presence.svelte.js';
18
+ import {setPresenceContext} from '../presence/presence-context.svelte.js';
19
+ import {reflect} from '@zag-js/svelte';
20
+ import {createSplitProps} from '@zag-js/utils';
21
+ import {createMenu} from './create-menu.svelte.js';
22
+ import {
23
+ getMenuContext,
24
+ setMenuContext,
25
+ setMenuTriggerItemContext,
26
+ } from './menu-context.svelte.js';
27
+
28
+ let {children, ...props}: MenuRootProps = $props();
29
+
30
+ let [createMenuProps, presenceStrategyProps] = $derived(
31
+ createSplitProps<CreateMenuProps>([
32
+ 'id',
33
+ 'ids',
34
+ 'open',
35
+ 'openControlled',
36
+ 'loopFocus',
37
+ 'composite',
38
+ 'typeahead',
39
+ 'positioning',
40
+ 'anchorPoint',
41
+ 'closeOnSelect',
42
+ 'highlightedValue',
43
+ 'aria-label',
44
+ 'onSelect',
45
+ 'onOpenChange',
46
+ 'onFocusOutside',
47
+ 'onEscapeKeyDown',
48
+ 'onHighlightChange',
49
+ 'onInteractOutside',
50
+ 'onPointerDownOutside',
51
+ ])(props),
52
+ );
53
+
54
+ let parentMenu = getMenuContext();
55
+ let menu = createMenu(reflect(() => createMenuProps));
56
+
57
+ let presence = createPresence(
58
+ reflect(() => ({
59
+ ...presenceStrategyProps,
60
+ present: menu.open,
61
+ })),
62
+ );
63
+
64
+ setMenuContext(menu);
65
+ setPresenceContext(presence);
66
+ setMenuTriggerItemContext(() => parentMenu?.getTriggerItemProps(menu) ?? {});
67
+
68
+ if (parentMenu) {
69
+ parentMenu.setChild(menu.machine);
70
+ menu.setParent(parentMenu.machine);
71
+ }
72
+ </script>
73
+
74
+ {@render children?.(menu)}
@@ -1,74 +1,74 @@
1
- <script lang="ts" module>
2
- import type {Assign, HtmlIngredientProps} from '../types.js';
3
- import type {
4
- CreateNumberInputProps,
5
- CreateNumberInputReturn,
6
- } from './create-number-input.svelte.js';
7
-
8
- export interface NumberInputProps
9
- extends Assign<
10
- HtmlIngredientProps<'div', HTMLDivElement, CreateNumberInputReturn>,
11
- CreateNumberInputProps
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 {createNumberInput} from './create-number-input.svelte.js';
20
- import {setNumberInputContext} from './number-input-context.svelte.js';
21
-
22
- let {
23
- ref = $bindable(null),
24
- asChild,
25
- children,
26
- ...props
27
- }: NumberInputProps = $props();
28
-
29
- let [createNumberInputProps, localProps] = $derived(
30
- createSplitProps<CreateNumberInputProps>([
31
- 'id',
32
- 'ids',
33
- 'max',
34
- 'min',
35
- 'step',
36
- 'name',
37
- 'form',
38
- 'value',
39
- 'locale',
40
- 'pattern',
41
- 'invalid',
42
- 'disabled',
43
- 'readOnly',
44
- 'required',
45
- 'inputMode',
46
- 'spinOnPress',
47
- 'translations',
48
- 'formatOptions',
49
- 'allowOverflow',
50
- 'allowMouseWheel',
51
- 'clampValueOnBlur',
52
- 'focusInputOnChange',
53
- 'onFocusChange',
54
- 'onValueChange',
55
- 'onValueInvalid',
56
- ])(props),
57
- );
58
-
59
- let numberInput = createNumberInput(reflect(() => createNumberInputProps));
60
-
61
- let mergedProps = $derived(
62
- mergeProps(numberInput.getRootProps(), localProps),
63
- );
64
-
65
- setNumberInputContext(numberInput);
66
- </script>
67
-
68
- {#if asChild}
69
- {@render asChild(mergedProps, numberInput)}
70
- {:else}
71
- <div bind:this={ref} {...mergedProps}>
72
- {@render children?.(numberInput)}
73
- </div>
74
- {/if}
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlIngredientProps} from '../types.js';
3
+ import type {
4
+ CreateNumberInputProps,
5
+ CreateNumberInputReturn,
6
+ } from './create-number-input.svelte.js';
7
+
8
+ export interface NumberInputProps
9
+ extends Assign<
10
+ HtmlIngredientProps<'div', HTMLDivElement, CreateNumberInputReturn>,
11
+ CreateNumberInputProps
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 {createNumberInput} from './create-number-input.svelte.js';
20
+ import {setNumberInputContext} from './number-input-context.svelte.js';
21
+
22
+ let {
23
+ ref = $bindable(null),
24
+ asChild,
25
+ children,
26
+ ...props
27
+ }: NumberInputProps = $props();
28
+
29
+ let [createNumberInputProps, localProps] = $derived(
30
+ createSplitProps<CreateNumberInputProps>([
31
+ 'id',
32
+ 'ids',
33
+ 'max',
34
+ 'min',
35
+ 'step',
36
+ 'name',
37
+ 'form',
38
+ 'value',
39
+ 'locale',
40
+ 'pattern',
41
+ 'invalid',
42
+ 'disabled',
43
+ 'readOnly',
44
+ 'required',
45
+ 'inputMode',
46
+ 'spinOnPress',
47
+ 'translations',
48
+ 'formatOptions',
49
+ 'allowOverflow',
50
+ 'allowMouseWheel',
51
+ 'clampValueOnBlur',
52
+ 'focusInputOnChange',
53
+ 'onFocusChange',
54
+ 'onValueChange',
55
+ 'onValueInvalid',
56
+ ])(props),
57
+ );
58
+
59
+ let numberInput = createNumberInput(reflect(() => createNumberInputProps));
60
+
61
+ let mergedProps = $derived(
62
+ mergeProps(numberInput.getRootProps(), localProps),
63
+ );
64
+
65
+ setNumberInputContext(numberInput);
66
+ </script>
67
+
68
+ {#if asChild}
69
+ {@render asChild(mergedProps, numberInput)}
70
+ {:else}
71
+ <div bind:this={ref} {...mergedProps}>
72
+ {@render children?.(numberInput)}
73
+ </div>
74
+ {/if}