@igne-agency/react-web-ui 0.4.0 → 0.6.0

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

@@ -1,76 +1,164 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1bv2o_3 {
+  ._root_qb00b_3 {
     min-inline-size: 0;
   }
-  ._wrapper_1bv2o_6 {
+  ._wrapper_qb00b_6 {
     display: contents;
   }
-  ._group_1bv2o_9 {
-    --field-fg: var(--sys-color-text);
-    --field-muted-fg: var(--sys-color-text-muted);
-    --field-placeholder-fg: var(--sys-color-text-placeholder);
+  ._group_qb00b_9 {
+    --_field-fg: var(--field-fg, var(--sys-color-text));
+    --_field-muted-fg: var(
+    	--field-muted-fg,
+    	var(--sys-color-text-muted)
+    );
+    --_field-placeholder-fg: var(
+    	--field-placeholder-fg,
+    	var(--sys-color-text-placeholder)
+    );
+    --_field-caret: var(--field-caret, auto);
+  }
+  ._group_qb00b_9 {
+    --_field-fill: var(
+    	--field-bg,
+    	var(--sys-color-surface)
+    );
     align-items: center;
     box-sizing: border-box;
-    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
-    border: 1px solid var(--sys-color-border);
-    border-radius: var(--sys-radius-sm);
-    background: var(--sys-color-surface);
-    padding: var(--sys-unit-6);
-    color: var(--field-fg);
-    font: var(--sys-font-body-medium);
-  }
-  ._group_1bv2o_9 {
-    outline: 0 solid var(--sys-color-focus-ring);
-    outline-offset: var(--sys-focus-ring-offset);
-  }
-  ._group_1bv2o_9[data-focus-visible] {
-    outline-width: var(--sys-focus-ring-width);
+    min-block-size: var(--field-min-block-size, calc(1lh + 2 * var(--field-pad-y, var(--sys-unit-6)) + 2 * var(--field-border-width, 1px)));
+    border: var(--field-border-width, 1px) solid var(--field-border, var(--sys-color-border));
+    border-radius: var(--field-radius, var(--sys-radius-sm));
+    background: var(--_field-fill);
+    padding-block: var(--field-pad-y, var(--sys-unit-6));
+    padding-inline: var(--field-pad-start, var(--field-pad-x, var(--sys-unit-6))) var(--field-pad-end, var(--field-pad-x, var(--sys-unit-6)));
+    box-shadow: var(--field-shadow, none);
+    color: var(--_field-fg);
+    font: var(--field-font, var(--sys-font-body-medium));
+    caret-color: var(--_field-caret);
+    backdrop-filter: var(--field-backdrop-filter, none);
+  }
+  ._group_qb00b_9 {
+    outline: 0 solid var(--field-ring-color, var(--sys-color-focus-ring));
+    outline-offset: var(--field-ring-offset, var(--sys-focus-ring-offset));
+  }
+  ._group_qb00b_9[data-focus-visible] {
+    outline-width: var(--field-ring-width, var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._group_1bv2o_9 {
-      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    ._group_qb00b_9 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard), box-shadow var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._group_1bv2o_9:hover:not([data-disabled], [data-readonly]), ._group_1bv2o_9[data-focused], ._group_1bv2o_9[data-popup-open] {
-    border-color: var(--sys-color-primary);
-  }
-  ._group_1bv2o_9[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
-  }
-  ._group_1bv2o_9[data-pending] {
+  ._group_qb00b_9:hover:not([data-disabled],
+  [data-readonly],
+  [data-focused],
+  [data-popup-open]) {
+    border-color: var(--field-hover-border, var(--sys-color-primary));
+  }
+  ._group_qb00b_9[data-focused], ._group_qb00b_9[data-popup-open] {
+    border-width: var(--field-focus-border-width, var(--field-border-width, 1px));
+    border-color: var(--field-focus-border, var(--sys-color-primary));
+    box-shadow: var(--field-focus-shadow, var(--field-shadow, none));
+  }
+  ._group_qb00b_9:has(:autofill) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._group_qb00b_9[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
+  }
+  ._group_qb00b_9[data-pending] {
     cursor: progress;
-    caret-color: var(--sys-color-text-muted);
-  }
-  ._group_1bv2o_9[data-invalid] {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-  }
-  ._group_1bv2o_9[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+    caret-color: var(--field-pending-caret, var(--sys-color-text-muted));
+  }
+  ._group_qb00b_9[data-invalid] {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+    border-width: var(--field-invalid-border-width, var(--field-border-width, 1px));
+    box-shadow: var(--field-invalid-shadow, var(--field-shadow, none));
+  }
+  ._group_qb00b_9[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
-    background: var(--sys-color-disabled-bg);
+    --_field-fill: var(
+    	--field-disabled-bg,
+    	var(--sys-color-disabled-bg)
+    );
   }
-  ._group_1bv2o_9 {
+  ._group_qb00b_9 {
     position: relative;
     display: flex;
-    gap: var(--sys-unit-4);
+    gap: var(--field-inlay-gap, var(--sys-unit-4));
   }
-  ._group_1bv2o_9 {
+  ._group_qb00b_9 {
     inline-size: 100%;
   }
-  ._input_1bv2o_73 {
+  ._input_qb00b_138::-webkit-search-cancel-button {
+    display: none;
+    appearance: none;
+  }
+  ._input_qb00b_138::-webkit-search-decoration {
+    display: none;
+    appearance: none;
+  }
+  ._input_qb00b_138 {
+    line-height: normal;
+  }
+  ._input_qb00b_138:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
+  }
+  ._input_qb00b_138:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
+  }
+  ._input_qb00b_138 {
     flex: 1;
     min-inline-size: 0;
     border: none;
@@ -78,33 +166,34 @@
     padding: 0;
     color: inherit;
     font: inherit;
+  }
+  ._input_qb00b_138::placeholder {
+    color: var(--_field-placeholder-fg);
+  }
+  ._input_qb00b_138 {
     font-variant-numeric: tabular-nums;
     text-align: var(--number-field-text-align, end);
     cursor: text;
-    line-height: normal;
-  }
-  ._input_1bv2o_73::placeholder {
-    color: var(--field-placeholder-fg);
   }
-  ._inlay_1bv2o_89 {
+  ._inlay_qb00b_178 {
     display: inline-flex;
     flex: none;
     align-items: center;
-    gap: var(--sys-unit-2);
-    color: var(--field-muted-fg);
-    font: var(--sys-font-body-medium);
+    gap: var(--field-inlay-content-gap, var(--sys-unit-2));
+    color: var(--field-inlay-fg, var(--_field-muted-fg));
+    font: var(--field-inlay-font, var(--sys-font-body-medium));
     cursor: default;
     pointer-events: none;
     line-height: normal;
   }
-  ._action_1bv2o_100 {
+  ._action_qb00b_189 {
     position: relative;
     flex: none;
-    margin-block: calc(-1 * var(--sys-unit-6));
+    margin-block: calc(-1 * var(--field-pad-y, var(--sys-unit-6)));
     cursor: pointer;
   }
   @media (any-pointer: coarse) {
-    ._action_1bv2o_100::before {
+    ._action_qb00b_189::before {
       content: "";
       position: absolute;
       inset: 50%;

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { FieldBlurHandler, FieldProps } from "../field/index.ts";
+import { type FieldBlurHandler, type 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;
@@ -37,4 +37,4 @@ export type NumberFieldProps = FieldProps & Omit<NumberInputRootProps, keyof Fie
  * 	onValueChange={setRate}
  * />
  */
-export declare const NumberField: ({ label, description, prefix, suffix, decrementLabel, incrementLabel, decrementIcon, incrementIcon, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, ...rootProps }: NumberFieldProps) => ReactNode;
+export declare const NumberField: ({ label, description, prefix, suffix, decrementLabel, incrementLabel, decrementIcon, incrementIcon, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, optionalLabel, ...rootProps }: NumberFieldProps) => ReactNode;

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

@@ -1,4 +1,7 @@
+import { IconButton } from "../button/button.js";
+import { Field } from "../field/field.js";
 import { NumberInput } from "./number-input.js";
+import { Spinner } from "../spinner/spinner.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/number-field/number-field.tsx
@@ -22,7 +25,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var NumberField = (t0) => {
-	const $ = c(50);
+	const $ = c(54);
 	let autoComplete;
 	let decrementIcon;
 	let decrementLabel;
@@ -33,13 +36,14 @@ var NumberField = (t0) => {
 	let label;
 	let onBlur;
 	let onFocus;
+	let optionalLabel;
 	let placeholder;
 	let prefix;
 	let roleDescription;
 	let rootProps;
 	let suffix;
 	if ($[0] !== t0) {
-		({label, description, prefix, suffix, decrementLabel, incrementLabel, decrementIcon, incrementIcon, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, ...rootProps} = t0);
+		({label, description, prefix, suffix, decrementLabel, incrementLabel, decrementIcon, incrementIcon, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, optionalLabel, ...rootProps} = t0);
 		$[0] = t0;
 		$[1] = autoComplete;
 		$[2] = decrementIcon;
@@ -51,11 +55,12 @@ var NumberField = (t0) => {
 		$[8] = label;
 		$[9] = onBlur;
 		$[10] = onFocus;
-		$[11] = placeholder;
-		$[12] = prefix;
-		$[13] = roleDescription;
-		$[14] = rootProps;
-		$[15] = suffix;
+		$[11] = optionalLabel;
+		$[12] = placeholder;
+		$[13] = prefix;
+		$[14] = roleDescription;
+		$[15] = rootProps;
+		$[16] = suffix;
 	} else {
 		autoComplete = $[1];
 		decrementIcon = $[2];
@@ -67,37 +72,51 @@ var NumberField = (t0) => {
 		label = $[8];
 		onBlur = $[9];
 		onFocus = $[10];
-		placeholder = $[11];
-		prefix = $[12];
-		roleDescription = $[13];
-		rootProps = $[14];
-		suffix = $[15];
+		optionalLabel = $[11];
+		placeholder = $[12];
+		prefix = $[13];
+		roleDescription = $[14];
+		rootProps = $[15];
+		suffix = $[16];
 	}
 	let t1;
-	if ($[16] !== label) {
-		t1 = /* @__PURE__ */ jsx(NumberInput.Label, { children: label });
-		$[16] = label;
-		$[17] = t1;
-	} else t1 = $[17];
+	if ($[17] !== optionalLabel) {
+		t1 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[17] = optionalLabel;
+		$[18] = t1;
+	} else t1 = $[18];
 	let t2;
-	if ($[18] !== decrementIcon || $[19] !== decrementLabel) {
-		t2 = /* @__PURE__ */ jsx(NumberInput.Decrement, {
+	if ($[19] !== label || $[20] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(NumberInput.Label, { children: [
+			label,
+			" ",
+			t1
+		] });
+		$[19] = label;
+		$[20] = t1;
+		$[21] = t2;
+	} else t2 = $[21];
+	let t3;
+	if ($[22] !== decrementIcon || $[23] !== decrementLabel) {
+		t3 = /* @__PURE__ */ jsx(NumberInput.Decrement, { render: /* @__PURE__ */ jsx(IconButton, {
 			label: decrementLabel,
+			variant: "tertiary",
+			size: "sm",
 			children: decrementIcon
-		});
-		$[18] = decrementIcon;
-		$[19] = decrementLabel;
-		$[20] = t2;
-	} else t2 = $[20];
-	let t3;
-	if ($[21] !== prefix) {
-		t3 = prefix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: prefix });
-		$[21] = prefix;
-		$[22] = t3;
-	} else t3 = $[22];
+		}) });
+		$[22] = decrementIcon;
+		$[23] = decrementLabel;
+		$[24] = t3;
+	} else t3 = $[24];
 	let t4;
-	if ($[23] !== autoComplete || $[24] !== enterKeyHint || $[25] !== onBlur || $[26] !== onFocus || $[27] !== placeholder || $[28] !== roleDescription) {
-		t4 = /* @__PURE__ */ jsx(NumberInput.Input, {
+	if ($[25] !== prefix) {
+		t4 = prefix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: prefix });
+		$[25] = prefix;
+		$[26] = t4;
+	} else t4 = $[26];
+	let t5;
+	if ($[27] !== autoComplete || $[28] !== enterKeyHint || $[29] !== onBlur || $[30] !== onFocus || $[31] !== placeholder || $[32] !== roleDescription) {
+		t5 = /* @__PURE__ */ jsx(NumberInput.Input, {
 			"aria-roledescription": roleDescription,
 			placeholder,
 			autoComplete,
@@ -105,80 +124,82 @@ var NumberField = (t0) => {
 			onBlur,
 			onFocus
 		});
-		$[23] = autoComplete;
-		$[24] = enterKeyHint;
-		$[25] = onBlur;
-		$[26] = onFocus;
-		$[27] = placeholder;
-		$[28] = roleDescription;
-		$[29] = t4;
-	} else t4 = $[29];
-	let t5;
-	if ($[30] !== suffix) {
-		t5 = suffix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: suffix });
-		$[30] = suffix;
-		$[31] = t5;
-	} else t5 = $[31];
+		$[27] = autoComplete;
+		$[28] = enterKeyHint;
+		$[29] = onBlur;
+		$[30] = onFocus;
+		$[31] = placeholder;
+		$[32] = roleDescription;
+		$[33] = t5;
+	} else t5 = $[33];
 	let t6;
-	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(NumberInput.Pending, {});
-		$[32] = t6;
-	} else t6 = $[32];
+	if ($[34] !== suffix) {
+		t6 = suffix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: suffix });
+		$[34] = suffix;
+		$[35] = t6;
+	} else t6 = $[35];
 	let t7;
-	if ($[33] !== incrementIcon || $[34] !== incrementLabel) {
-		t7 = /* @__PURE__ */ jsx(NumberInput.Increment, {
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(NumberInput.Pending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) });
+		$[36] = t7;
+	} else t7 = $[36];
+	let t8;
+	if ($[37] !== incrementIcon || $[38] !== incrementLabel) {
+		t8 = /* @__PURE__ */ jsx(NumberInput.Increment, { render: /* @__PURE__ */ jsx(IconButton, {
 			label: incrementLabel,
+			variant: "tertiary",
+			size: "sm",
 			children: incrementIcon
-		});
-		$[33] = incrementIcon;
-		$[34] = incrementLabel;
-		$[35] = t7;
-	} else t7 = $[35];
-	let t8;
-	if ($[36] !== t2 || $[37] !== t3 || $[38] !== t4 || $[39] !== t5 || $[40] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(NumberInput.Group, { children: [
-			t2,
+		}) });
+		$[37] = incrementIcon;
+		$[38] = incrementLabel;
+		$[39] = t8;
+	} else t8 = $[39];
+	let t9;
+	if ($[40] !== t3 || $[41] !== t4 || $[42] !== t5 || $[43] !== t6 || $[44] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(NumberInput.Group, { children: [
 			t3,
 			t4,
 			t5,
 			t6,
-			t7
+			t7,
+			t8
 		] });
-		$[36] = t2;
-		$[37] = t3;
-		$[38] = t4;
-		$[39] = t5;
-		$[40] = t7;
-		$[41] = t8;
-	} else t8 = $[41];
-	let t9;
-	if ($[42] !== description) {
-		t9 = /* @__PURE__ */ jsx(NumberInput.Description, { children: description });
-		$[42] = description;
-		$[43] = t9;
-	} else t9 = $[43];
+		$[40] = t3;
+		$[41] = t4;
+		$[42] = t5;
+		$[43] = t6;
+		$[44] = t8;
+		$[45] = t9;
+	} else t9 = $[45];
 	let t10;
-	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(NumberInput.Error, {});
-		$[44] = t10;
-	} else t10 = $[44];
+	if ($[46] !== description) {
+		t10 = /* @__PURE__ */ jsx(NumberInput.Description, { children: description });
+		$[46] = description;
+		$[47] = t10;
+	} else t10 = $[47];
 	let t11;
-	if ($[45] !== rootProps || $[46] !== t1 || $[47] !== t8 || $[48] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(NumberInput.Root, {
+	if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(NumberInput.Error, {});
+		$[48] = t11;
+	} else t11 = $[48];
+	let t12;
+	if ($[49] !== rootProps || $[50] !== t10 || $[51] !== t2 || $[52] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(NumberInput.Root, {
 			...rootProps,
 			children: [
-				t1,
-				t8,
+				t2,
 				t9,
-				t10
+				t10,
+				t11
 			]
 		});
-		$[45] = rootProps;
-		$[46] = t1;
-		$[47] = t8;
-		$[48] = t9;
-		$[49] = t11;
-	} else t11 = $[49];
-	return t11;
+		$[49] = rootProps;
+		$[50] = t10;
+		$[51] = t2;
+		$[52] = t9;
+		$[53] = t12;
+	} else t12 = $[53];
+	return t12;
 };
 export { NumberField };

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

@@ -1,10 +1,10 @@
 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 root = "_root_qb00b_3";
+var wrapper = "_wrapper_qb00b_6";
+var group = "_group_qb00b_9";
+var input = "_input_qb00b_138";
+var inlay = "_inlay_qb00b_178";
+var action = "_action_qb00b_189";
 var number_field_module_default = {
 	root,
 	wrapper,

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

@@ -1,8 +1,9 @@
 import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import { useRender } from "@base-ui/react/use-render";
 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<{
+export type NumberInputRootProps = Omit<FieldProps, "label" | "description" | "optionalLabel"> & Readonly<{
     value: number | null;
     onValueChange: (value: number | null) => void;
     /** How the amount is rendered and parsed inside the control. */
@@ -24,9 +25,9 @@ export type NumberInputRootProps = Omit<FieldProps, "label" | "description"> & R
  * and projecting its state onto every part.
  *
  * @example
- * <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">…</NumberInput.Root>
+ * <NumberInput.Root value={hours} onValueChange={setHours}>…</NumberInput.Root>
  */
-declare const NumberInputRoot: ({ value, onValueChange, format, min, max, step, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending, state, name, id, className, children, }: NumberInputRootProps) => ReactNode;
+declare const NumberInputRoot: ({ value, onValueChange, format, min, max, step, disabled, readOnly, requiredness, 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;
@@ -62,27 +63,38 @@ export type NumberInputInputProps = Omit<BaseNumberField.Input.Props, "className
  * <NumberInput.Input aria-roledescription="Number field" />
  */
 declare const NumberInputInput: ({ className, ...props }: NumberInputInputProps) => ReactNode;
-export type NumberInputStepProps = Readonly<{
-    /** Accessible name and tooltip hint, such as "Increase". */
-    label: string;
-    className?: string;
-    /** The icon the button shows. */
-    children: ReactNode;
+export type NumberInputStepProps = Omit<BaseNumberField.Decrement.Props, "render" | "children"> & Readonly<{
+    /** The button to render, such as `<IconButton label="Increase" variant="tertiary" size="sm"><AddIcon /></IconButton>`. */
+    render: useRender.RenderProp;
 }>;
 /**
- * The icon-only button that steps the value down.
+ * The button that steps the value down. It renders whichever button it is
+ * given.
  *
  * @example
- * <NumberInput.Decrement label="Decrease"><RemoveIcon /></NumberInput.Decrement>
+ * <NumberInput.Decrement
+ * 	render={
+ * 		<IconButton label="Decrease" variant="tertiary" size="sm">
+ * 			<RemoveIcon />
+ * 		</IconButton>
+ * 	}
+ * />
  */
-declare const NumberInputDecrement: ({ label, className, children, }: NumberInputStepProps) => ReactNode;
+declare const NumberInputDecrement: ({ render, className, ...props }: NumberInputStepProps) => ReactNode;
 /**
- * The icon-only button that steps the value up.
+ * The button that steps the value up. It renders whichever button it is
+ * given.
  *
  * @example
- * <NumberInput.Increment label="Increase"><AddIcon /></NumberInput.Increment>
+ * <NumberInput.Increment
+ * 	render={
+ * 		<IconButton label="Increase" variant="tertiary" size="sm">
+ * 			<AddIcon />
+ * 		</IconButton>
+ * 	}
+ * />
  */
-declare const NumberInputIncrement: ({ label, className, children, }: NumberInputStepProps) => ReactNode;
+declare const NumberInputIncrement: ({ render, className, ...props }: NumberInputStepProps) => ReactNode;
 export type NumberInputPendingProps = InputPendingProps;
 export type NumberInputErrorProps = InputErrorProps;
 /** The parts of a number input. */
@@ -107,16 +119,24 @@ export type NumberInputParts = Readonly<{
  * description too. `Error` renders the errors `Root` was given.
  *
  * @example
- * <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">
- * 	<NumberInput.Label>Hours</NumberInput.Label>
+ * <NumberInput.Root value={hours} onValueChange={setHours} requiredness="optional">
+ * 	<NumberInput.Label>Hours <Field.Requiredness optionalLabel="optional" /></NumberInput.Label>
  * 	<NumberInput.Group>
- * 		<NumberInput.Decrement label="Decrease">
- * 			<RemoveIcon />
- * 		</NumberInput.Decrement>
+ * 		<NumberInput.Decrement
+ * 			render={
+ * 				<IconButton label="Decrease" variant="tertiary" size="sm">
+ * 					<RemoveIcon />
+ * 				</IconButton>
+ * 			}
+ * 		/>
  * 		<NumberInput.Input aria-roledescription="Number field" />
- * 		<NumberInput.Increment label="Increase">
- * 			<AddIcon />
- * 		</NumberInput.Increment>
+ * 		<NumberInput.Increment
+ * 			render={
+ * 				<IconButton label="Increase" variant="tertiary" size="sm">
+ * 					<AddIcon />
+ * 				</IconButton>
+ * 			}
+ * 		/>
  * 	</NumberInput.Group>
  * 	<NumberInput.Error />
  * </NumberInput.Root>