ui-ingredients 0.21.0 → 0.21.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) 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 -51
  40. package/dist/steps/steps-content.svelte +55 -55
  41. package/dist/steps/steps-root.svelte +65 -65
  42. package/dist/switch/switch-root.svelte +59 -59
  43. package/dist/tabs/tabs-root.svelte +57 -57
  44. package/dist/tags-input/tags-input-root.svelte +74 -74
  45. package/dist/time-picker/time-picker-root.svelte +81 -81
  46. package/dist/timer/timer-root.svelte +55 -55
  47. package/dist/toast/create-toaster.svelte.d.ts +1 -1
  48. package/dist/toast/toast-actor.svelte +19 -19
  49. package/dist/toast/toast-actor.svelte.d.ts +3 -3
  50. package/dist/toast/toaster.svelte +19 -21
  51. package/dist/toast/toaster.svelte.d.ts +1 -1
  52. package/dist/toggle/toggle-root.svelte +50 -50
  53. package/dist/toggle-group/toggle-group-root.svelte +58 -58
  54. package/dist/tooltip/tooltip-root.svelte +44 -44
  55. package/dist/tour/tour-backdrop.svelte +44 -44
  56. package/dist/tour/tour-root.svelte +47 -47
  57. package/dist/tree-view/tree-view-branch-content.svelte +55 -55
  58. package/dist/tree-view/tree-view-root.svelte +68 -68
  59. 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}