@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { FieldBlurHandler, FieldProps } from "../field/index.ts";
+import { type NumberInputInputProps, type NumberInputRootProps } from "./number-input.tsx";
+export type NumberFieldProps = FieldProps & Omit<NumberInputRootProps, keyof FieldProps | "children"> & Pick<NumberInputInputProps, "placeholder" | "autoComplete" | "enterKeyHint" | "onFocus"> & Readonly<{
+    onBlur?: FieldBlurHandler;
+    /** Static leading text, such as a currency sign. */
+    prefix?: ReactNode;
+    /** Static trailing text, such as a unit. */
+    suffix?: ReactNode;
+    /** The decrement button's accessible name and tooltip, such as "Decrease". */
+    decrementLabel: string;
+    /** The increment button's accessible name and tooltip, such as "Increase". */
+    incrementLabel: string;
+    /** What the control announces itself as, such as "Number field". */
+    roleDescription: string;
+}>;
+/**
+ * A labelled numeric field: label, a bordered group holding the control between
+ * its stepper buttons, then the description and error. Assembled from
+ * `NumberInput`'s parts.
+ *
+ * @example
+ * <NumberField
+ * 	label="VAT rate"
+ * 	optionalLabel="optional"
+ * 	decrementLabel="Decrease"
+ * 	incrementLabel="Increase"
+ * 	roleDescription="Number field"
+ * 	format={percentFormat()}
+ * 	value={rate}
+ * 	onValueChange={setRate}
+ * />
+ */
+export declare const NumberField: ({ label, description, prefix, suffix, decrementLabel, incrementLabel, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, ...rootProps }: NumberFieldProps) => ReactNode;

package/dist/components/number-field/number-field.js

@@ -0,0 +1,168 @@
+import { NumberInput } from "./number-input.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/number-field/number-field.tsx
+/**
+* A labelled numeric field: label, a bordered group holding the control between
+* its stepper buttons, then the description and error. Assembled from
+* `NumberInput`'s parts.
+*
+* @example
+* <NumberField
+* 	label="VAT rate"
+* 	optionalLabel="optional"
+* 	decrementLabel="Decrease"
+* 	incrementLabel="Increase"
+* 	roleDescription="Number field"
+* 	format={percentFormat()}
+* 	value={rate}
+* 	onValueChange={setRate}
+* />
+*/
+var NumberField = (t0) => {
+	const $ = c(46);
+	let autoComplete;
+	let decrementLabel;
+	let description;
+	let enterKeyHint;
+	let incrementLabel;
+	let label;
+	let onBlur;
+	let onFocus;
+	let placeholder;
+	let prefix;
+	let roleDescription;
+	let rootProps;
+	let suffix;
+	if ($[0] !== t0) {
+		({label, description, prefix, suffix, decrementLabel, incrementLabel, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, ...rootProps} = t0);
+		$[0] = t0;
+		$[1] = autoComplete;
+		$[2] = decrementLabel;
+		$[3] = description;
+		$[4] = enterKeyHint;
+		$[5] = incrementLabel;
+		$[6] = label;
+		$[7] = onBlur;
+		$[8] = onFocus;
+		$[9] = placeholder;
+		$[10] = prefix;
+		$[11] = roleDescription;
+		$[12] = rootProps;
+		$[13] = suffix;
+	} else {
+		autoComplete = $[1];
+		decrementLabel = $[2];
+		description = $[3];
+		enterKeyHint = $[4];
+		incrementLabel = $[5];
+		label = $[6];
+		onBlur = $[7];
+		onFocus = $[8];
+		placeholder = $[9];
+		prefix = $[10];
+		roleDescription = $[11];
+		rootProps = $[12];
+		suffix = $[13];
+	}
+	let t1;
+	if ($[14] !== label) {
+		t1 = /* @__PURE__ */ jsx(NumberInput.Label, { children: label });
+		$[14] = label;
+		$[15] = t1;
+	} else t1 = $[15];
+	let t2;
+	if ($[16] !== decrementLabel) {
+		t2 = /* @__PURE__ */ jsx(NumberInput.Decrement, { label: decrementLabel });
+		$[16] = decrementLabel;
+		$[17] = t2;
+	} else t2 = $[17];
+	let t3;
+	if ($[18] !== prefix) {
+		t3 = prefix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: prefix });
+		$[18] = prefix;
+		$[19] = t3;
+	} else t3 = $[19];
+	let t4;
+	if ($[20] !== autoComplete || $[21] !== enterKeyHint || $[22] !== onBlur || $[23] !== onFocus || $[24] !== placeholder || $[25] !== roleDescription) {
+		t4 = /* @__PURE__ */ jsx(NumberInput.Input, {
+			"aria-roledescription": roleDescription,
+			placeholder,
+			autoComplete,
+			enterKeyHint,
+			onBlur,
+			onFocus
+		});
+		$[20] = autoComplete;
+		$[21] = enterKeyHint;
+		$[22] = onBlur;
+		$[23] = onFocus;
+		$[24] = placeholder;
+		$[25] = roleDescription;
+		$[26] = t4;
+	} else t4 = $[26];
+	let t5;
+	if ($[27] !== suffix) {
+		t5 = suffix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: suffix });
+		$[27] = suffix;
+		$[28] = t5;
+	} else t5 = $[28];
+	let t6;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(NumberInput.Pending, {});
+		$[29] = t6;
+	} else t6 = $[29];
+	let t7;
+	if ($[30] !== incrementLabel) {
+		t7 = /* @__PURE__ */ jsx(NumberInput.Increment, { label: incrementLabel });
+		$[30] = incrementLabel;
+		$[31] = t7;
+	} else t7 = $[31];
+	let t8;
+	if ($[32] !== t2 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 || $[36] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(NumberInput.Group, { children: [
+			t2,
+			t3,
+			t4,
+			t5,
+			t6,
+			t7
+		] });
+		$[32] = t2;
+		$[33] = t3;
+		$[34] = t4;
+		$[35] = t5;
+		$[36] = t7;
+		$[37] = t8;
+	} else t8 = $[37];
+	let t9;
+	if ($[38] !== description) {
+		t9 = /* @__PURE__ */ jsx(NumberInput.Description, { children: description });
+		$[38] = description;
+		$[39] = t9;
+	} else t9 = $[39];
+	let t10;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(NumberInput.Error, {});
+		$[40] = t10;
+	} else t10 = $[40];
+	let t11;
+	if ($[41] !== rootProps || $[42] !== t1 || $[43] !== t8 || $[44] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(NumberInput.Root, {
+			...rootProps,
+			children: [
+				t1,
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[41] = rootProps;
+		$[42] = t1;
+		$[43] = t8;
+		$[44] = t9;
+		$[45] = t11;
+	} else t11 = $[45];
+	return t11;
+};
+export { NumberField };

package/dist/components/number-field/number-field.module.js

@@ -0,0 +1,16 @@
+import './number-field.css';// src/components/number-field/number-field.module.scss
+var root = "_root_1bv2o_3";
+var wrapper = "_wrapper_1bv2o_6";
+var group = "_group_1bv2o_9";
+var input = "_input_1bv2o_73";
+var inlay = "_inlay_1bv2o_89";
+var action = "_action_1bv2o_100";
+var number_field_module_default = {
+	root,
+	wrapper,
+	group,
+	input,
+	inlay,
+	action
+};
+export { action, number_field_module_default as default, group, inlay, input, root, wrapper };

package/dist/components/number-field/number-input.d.ts

@@ -0,0 +1,76 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import type { ComponentProps, ReactNode } from "react";
+import { Field, type FieldProps, type FieldState } from "../field/index.ts";
+import { InputError, type InputErrorProps, InputLabel, type InputLabelProps, InputPending, type InputPendingProps } from "../field/input-parts.tsx";
+export type NumberInputRootProps = Omit<FieldProps, "label" | "description"> & Readonly<{
+    value: number | null;
+    onValueChange: (value: number | null) => void;
+    /** How the amount is rendered and parsed inside the control. */
+    format?: Intl.NumberFormatOptions;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** States no prop here owns, projected over the ones that do. */
+    state?: FieldState;
+    name?: string;
+    id?: string;
+    className?: string;
+    children?: ReactNode;
+}>;
+declare const NumberInputRoot: ({ value, onValueChange, format, min, max, step, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending, state, name, id, className, children, }: NumberInputRootProps) => ReactNode;
+export type NumberInputLabelProps = InputLabelProps;
+export type NumberInputGroupProps = Omit<BaseNumberField.Group.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+declare const NumberInputGroup: ({ className, children, ...props }: NumberInputGroupProps) => ReactNode;
+declare const NumberInputInlay: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+declare const NumberInputAffix: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+export type NumberInputInputProps = Omit<BaseNumberField.Input.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+declare const NumberInputInput: ({ className, ...props }: NumberInputInputProps) => ReactNode;
+export type NumberInputStepProps = Readonly<{
+    /** Accessible name and tooltip hint, such as "Increase". */
+    label: string;
+    className?: string;
+}>;
+declare const NumberInputDecrement: ({ label, className, }: NumberInputStepProps) => ReactNode;
+declare const NumberInputIncrement: ({ label, className, }: NumberInputStepProps) => ReactNode;
+export type NumberInputPendingProps = InputPendingProps;
+export type NumberInputErrorProps = InputErrorProps;
+/** The parts of a number input. */
+export type NumberInputParts = Readonly<{
+    Root: typeof NumberInputRoot;
+    Label: typeof InputLabel;
+    Group: typeof NumberInputGroup;
+    Inlay: typeof NumberInputInlay;
+    Affix: typeof NumberInputAffix;
+    Input: typeof NumberInputInput;
+    Decrement: typeof NumberInputDecrement;
+    Increment: typeof NumberInputIncrement;
+    Pending: typeof InputPending;
+    Description: typeof Field.Description;
+    Error: typeof InputError;
+}>;
+/**
+ * The parts of a number input: the field frame, a group carrying the border
+ * with the stepper buttons and the bare control between them. For the ordinary
+ * case, use the `NumberField` shorthand, which is assembled from exactly these
+ * parts. An `Affix` is decoration, so its meaning belongs in the label or
+ * description too. `Error` renders the errors `Root` was given.
+ *
+ * @example
+ * <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">
+ * 	<NumberInput.Label>Hours</NumberInput.Label>
+ * 	<NumberInput.Group>
+ * 		<NumberInput.Decrement label="Decrease" />
+ * 		<NumberInput.Input aria-roledescription="Number field" />
+ * 		<NumberInput.Increment label="Increase" />
+ * 	</NumberInput.Group>
+ * 	<NumberInput.Error />
+ * </NumberInput.Root>
+ */
+export declare const NumberInput: NumberInputParts;
+export {};

package/dist/components/number-field/number-input.js

@@ -0,0 +1,383 @@
+import SvgAdd from "../../vendor/@material-design-icons/svg/outlined/add.js";
+import SvgRemove from "../../vendor/@material-design-icons/svg/outlined/remove.js";
+import { Button } from "../button/button.js";
+import { Field } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldFocus, withFieldFocus } from "../field/use-field-focus.js";
+import { useFieldState } from "../field/use-field-state.js";
+import { detachHiddenInput } from "../field/hidden-input.js";
+import { focusControlOnRim } from "../field/rim-focus.js";
+import { InputError, InputLabel, InputPartsContext, InputPending, useInputPartsContext } from "../field/input-parts.js";
+import { useLocale } from "../locale-provider/locale-provider.js";
+import number_field_module_default from "./number-field.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { NumberField } from "@base-ui/react/number-field";
+// src/components/number-field/number-input.tsx
+var NumberInputRoot = (t0) => {
+	const $ = c(44);
+	const { value, onValueChange, format, min, max, step, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending: t1, state, name, id, className, children } = t0;
+	const pending = t1 === void 0 ? false : t1;
+	const ids = Field.useIds();
+	const locale = useLocale();
+	const t2 = value !== null;
+	let t3;
+	if ($[0] !== dirty || $[1] !== disabled || $[2] !== errors || $[3] !== pending || $[4] !== readOnly || $[5] !== requiredness || $[6] !== state || $[7] !== t2 || $[8] !== touched) {
+		t3 = {
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			disabled,
+			readOnly,
+			filled: t2,
+			state
+		};
+		$[0] = dirty;
+		$[1] = disabled;
+		$[2] = errors;
+		$[3] = pending;
+		$[4] = readOnly;
+		$[5] = requiredness;
+		$[6] = state;
+		$[7] = t2;
+		$[8] = touched;
+		$[9] = t3;
+	} else t3 = $[9];
+	const field = useFieldState(t3);
+	let t4;
+	if ($[10] !== errors || $[11] !== field.phase || $[12] !== field.state || $[13] !== optionalLabel) {
+		t4 = {
+			state: field.state,
+			errors,
+			optionalLabel,
+			phase: field.phase
+		};
+		$[10] = errors;
+		$[11] = field.phase;
+		$[12] = field.state;
+		$[13] = optionalLabel;
+		$[14] = t4;
+	} else t4 = $[14];
+	const t5 = field.disabled;
+	const t6 = field.invalid;
+	let t7;
+	if ($[15] !== className) {
+		t7 = clsx(number_field_module_default.root, className);
+		$[15] = className;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== field.state) {
+		t8 = fieldStateAttributes(field.state);
+		$[17] = field.state;
+		$[18] = t8;
+	} else t8 = $[18];
+	const t9 = requiredness === "required";
+	const t10 = name ?? ids.controlId;
+	let t11;
+	if ($[19] !== children || $[20] !== field.disabled || $[21] !== format || $[22] !== id || $[23] !== locale || $[24] !== max || $[25] !== min || $[26] !== onValueChange || $[27] !== readOnly || $[28] !== step || $[29] !== t10 || $[30] !== t9 || $[31] !== value) {
+		t11 = /* @__PURE__ */ jsx(NumberField.Root, {
+			value,
+			onValueChange,
+			locale,
+			format,
+			min,
+			max,
+			step,
+			disabled: field.disabled,
+			readOnly,
+			required: t9,
+			name: t10,
+			inputRef: detachHiddenInput,
+			id,
+			className: number_field_module_default.wrapper,
+			children
+		});
+		$[19] = children;
+		$[20] = field.disabled;
+		$[21] = format;
+		$[22] = id;
+		$[23] = locale;
+		$[24] = max;
+		$[25] = min;
+		$[26] = onValueChange;
+		$[27] = readOnly;
+		$[28] = step;
+		$[29] = t10;
+		$[30] = t9;
+		$[31] = value;
+		$[32] = t11;
+	} else t11 = $[32];
+	let t12;
+	if ($[33] !== dirty || $[34] !== field.disabled || $[35] !== field.invalid || $[36] !== t11 || $[37] !== t7 || $[38] !== t8 || $[39] !== touched) {
+		t12 = /* @__PURE__ */ jsx(Field.Root, {
+			disabled: t5,
+			invalid: t6,
+			dirty,
+			touched,
+			className: t7,
+			...t8,
+			children: t11
+		});
+		$[33] = dirty;
+		$[34] = field.disabled;
+		$[35] = field.invalid;
+		$[36] = t11;
+		$[37] = t7;
+		$[38] = t8;
+		$[39] = touched;
+		$[40] = t12;
+	} else t12 = $[40];
+	let t13;
+	if ($[41] !== t12 || $[42] !== t4) {
+		t13 = /* @__PURE__ */ jsx(InputPartsContext, {
+			value: t4,
+			children: t12
+		});
+		$[41] = t12;
+		$[42] = t4;
+		$[43] = t13;
+	} else t13 = $[43];
+	return t13;
+};
+var NumberInputGroup = (t0) => {
+	const $ = c(15);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	const { state } = useInputPartsContext();
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(number_field_module_default.group, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== focus || $[7] !== state) {
+		t2 = fieldStateAttributes(withFieldFocus(state, focus));
+		$[6] = focus;
+		$[7] = state;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== children || $[10] !== focus.props || $[11] !== props || $[12] !== t1 || $[13] !== t2) {
+		t3 = /* @__PURE__ */ jsx(NumberField.Group, {
+			className: t1,
+			onMouseDown: focusControlOnRim,
+			...t2,
+			...props,
+			...focus.props,
+			children
+		});
+		$[9] = children;
+		$[10] = focus.props;
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	return t3;
+};
+var NumberInputInlay = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(number_field_module_default.inlay, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var NumberInputAffix = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(number_field_module_default.inlay, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var NumberInputInput = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(number_field_module_default.input, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(NumberField.Input, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var NumberInputDecrement = (t0) => {
+	const $ = c(6);
+	const { label, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(number_field_module_default.action, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(NumberField.Decrement, {});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== label || $[4] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			iconOnly: true,
+			icon: SvgRemove,
+			label,
+			variant: "tertiary",
+			size: "sm",
+			className: t1,
+			render: t2
+		});
+		$[3] = label;
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+var NumberInputIncrement = (t0) => {
+	const $ = c(6);
+	const { label, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(number_field_module_default.action, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(NumberField.Increment, {});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== label || $[4] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			iconOnly: true,
+			icon: SvgAdd,
+			label,
+			variant: "tertiary",
+			size: "sm",
+			className: t1,
+			render: t2
+		});
+		$[3] = label;
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+/**
+* The parts of a number input: the field frame, a group carrying the border
+* with the stepper buttons and the bare control between them. For the ordinary
+* case, use the `NumberField` shorthand, which is assembled from exactly these
+* parts. An `Affix` is decoration, so its meaning belongs in the label or
+* description too. `Error` renders the errors `Root` was given.
+*
+* @example
+* <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">
+* 	<NumberInput.Label>Hours</NumberInput.Label>
+* 	<NumberInput.Group>
+* 		<NumberInput.Decrement label="Decrease" />
+* 		<NumberInput.Input aria-roledescription="Number field" />
+* 		<NumberInput.Increment label="Increase" />
+* 	</NumberInput.Group>
+* 	<NumberInput.Error />
+* </NumberInput.Root>
+*/
+var NumberInput = {
+	Root: NumberInputRoot,
+	Label: InputLabel,
+	Group: NumberInputGroup,
+	Inlay: NumberInputInlay,
+	Affix: NumberInputAffix,
+	Input: NumberInputInput,
+	Decrement: NumberInputDecrement,
+	Increment: NumberInputIncrement,
+	Pending: InputPending,
+	Description: Field.Description,
+	Error: InputError
+};
+export { NumberInput };

package/dist/components/number-field/tsf-number-field.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type NumberFieldProps } from "./number-field.tsx";
+export type TSFNumberFieldProps = Omit<NumberFieldProps, keyof ConnectedFieldProps | "value" | "onValueChange">;
+/**
+ * `NumberField` bound to the TanStack Form field it renders in, whose value is
+ * a `number | null`. Registered as `field.NumberField`.
+ *
+ * @example
+ * <form.AppField name="hours">
+ * 	{field => <field.NumberField label="Hours" optionalLabel="optional" decrementLabel="Decrease" incrementLabel="Increase" roleDescription="Number field" />}
+ * </form.AppField>
+ */
+export declare const TSFNumberField: (props: TSFNumberFieldProps) => ReactNode;