next: Number Input

packages/bits-ui/src/lib/bits/index.ts

@@ -19,6 +19,7 @@ export * as LinkPreview from "./link-preview/index.js";
 export * as Listbox from "./listbox/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as NavigationMenu from "./navigation-menu/index.js";
+export * as NumberInput from "./number-input/index.js";
 export * as Pagination from "./pagination/index.js";
 export * as PinInput from "./pin-input/index.js";
 export * as Popover from "./popover/index.js";

packages/bits-ui/src/lib/bits/number-input/components/number-input.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { NumberInputRootProps } from "../types.js";
+	import { useNumberInputRoot } from "../number-input.svelte.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		value = $bindable(0),
+		onValueChange = noop,
+		format = true,
+		locale = "en-US",
+		localeMatcher = "best fit",
+		mode = "decimal",
+		prefix,
+		suffix,
+		currency,
+		currencyDisplay = "symbol",
+		useGrouping = true,
+		minFractionDigits = 0,
+		maxFractionDigits = 3,
+		roundingMode = "halfEven",
+		min,
+		max,
+		step = 1,
+		allowEmpty = true,
+		highlightOnFocus = true,
+		disabled = false,
+		readonly = false,
+		...restProps
+	}: NumberInputRootProps = $props();
+
+	const rootState = useNumberInputRoot({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref as HTMLInputElement,
+			(v) => (ref = v)
+		),
+		value: box.with(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			}
+		),
+		format: box.with(() => format),
+		locale: box.with(() => locale),
+		localeMatcher: box.with(() => localeMatcher),
+		mode: box.with(() => mode),
+		prefix: box.with(() => prefix),
+		suffix: box.with(() => suffix),
+		currency: box.with(() => currency),
+		currencyDisplay: box.with(() => currencyDisplay),
+		useGrouping: box.with(() => useGrouping),
+		minFractionDigits: box.with(() => minFractionDigits),
+		maxFractionDigits: box.with(() => maxFractionDigits),
+		roundingMode: box.with(() => roundingMode),
+		min: box.with(() => min),
+		max: box.with(() => max),
+		step: box.with(() => step),
+		allowEmpty: box.with(() => allowEmpty),
+		highlightOnFocus: box.with(() => highlightOnFocus),
+		disabled: box.with(() => disabled),
+		readonly: box.with(() => readonly),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+<input {...mergedProps} />

packages/bits-ui/src/lib/bits/number-input/index.ts

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/number-input.svelte";
+
+export type { NumberInputRootProps as RootProps } from "./types.js";