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

package/dist/components/nav/nav.js

@@ -1,5 +1,3 @@
-import SvgExpandLess from "../../vendor/@material-design-icons/svg/outlined/expand_less.js";
-import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
 import { useSlidingIndicator } from "../../lib/sliding-indicator/use-sliding-indicator.js";
 import { Button } from "../button/button.js";
 import { Tooltip as Tooltip$1 } from "../tooltip/tooltip.js";
@@ -7,11 +5,11 @@ import { NavContext } from "./nav-context.js";
 import { EntryShell, entryAttributes } from "./nav-item-view.js";
 import nav_module_default from "./nav.module.js";
 import { c } from "react/compiler-runtime";
-import { createContext, use, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { use, useState } from "react";
 import { Tooltip } from "@base-ui/react/tooltip";
-import { useRender } from "@base-ui/react/use-render";
 import { Collapsible } from "@base-ui/react/collapsible";
 // src/components/nav/nav.tsx
 var useOrientation = () => use(NavContext)?.orientation ?? "vertical";
@@ -160,7 +158,7 @@ var List = (t0) => {
 	} else t3 = $[10];
 	let t4;
 	if ($[11] !== children || $[12] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t3, children] });
+		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, children] });
 		$[11] = children;
 		$[12] = t3;
 		$[13] = t4;
@@ -289,13 +287,12 @@ var Link = (t0) => {
 	} else t5 = $[21];
 	return t5;
 };
-var GroupOpenContext = createContext(false);
 /**
 * A destination with subpages: a `GroupHeader` holding its own `Link` and a
-* `GroupToggle`, over a `GroupPanel` that folds the subpages open.
+* `GroupToggle`, over a `GroupPanel` that folds open a `GroupList` of subpages.
 */
 var Group = (t0) => {
-	const $ = c(20);
+	const $ = c(17);
 	let children;
 	let className;
 	let onOpenChange;
@@ -352,17 +349,7 @@ var Group = (t0) => {
 		$[15] = t3;
 		$[16] = t4;
 	} else t4 = $[16];
-	let t5;
-	if ($[17] !== current || $[18] !== t4) {
-		t5 = /* @__PURE__ */ jsx(GroupOpenContext, {
-			value: current,
-			children: t4
-		});
-		$[17] = current;
-		$[18] = t4;
-		$[19] = t5;
-	} else t5 = $[19];
-	return t5;
+	return t4;
 };
 /** The group's row: its own `Link`, then its `GroupToggle`. Filled while that link is current. */
 var GroupHeader = (t0) => {
@@ -396,53 +383,118 @@ var GroupHeader = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The icon-only button that folds the group's subpages open and shut; its children are the chevron. */
 var GroupToggle = (t0) => {
-	const $ = c(4);
-	const { label } = t0;
-	const t1 = use(GroupOpenContext) ? SvgExpandLess : SvgExpandMore;
+	const $ = c(13);
+	let children;
+	let className;
+	let label;
+	let props;
+	if ($[0] !== t0) {
+		({label, children, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = label;
+		$[4] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		label = $[3];
+		props = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(nav_module_default.groupToggle, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ jsx(Collapsible.Trigger, {});
-		$[0] = t2;
-	} else t2 = $[0];
+		$[7] = t2;
+	} else t2 = $[7];
 	let t3;
-	if ($[1] !== label || $[2] !== t1) {
+	if ($[8] !== children || $[9] !== label || $[10] !== props || $[11] !== t1) {
 		t3 = /* @__PURE__ */ jsx(Button, {
+			...props,
 			variant: "tertiary",
 			iconOnly: true,
-			className: nav_module_default.groupToggle,
-			icon: t1,
+			className: t1,
+			icon: children,
 			label,
 			render: t2
 		});
-		$[1] = label;
-		$[2] = t1;
-		$[3] = t3;
-	} else t3 = $[3];
+		$[8] = children;
+		$[9] = label;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t3;
+	} else t3 = $[12];
 	return t3;
 };
+/** The fold that opens and shuts the group's `GroupList`. */
 var GroupPanel = (t0) => {
-	const $ = c(5);
-	const { className, children } = 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 ($[0] !== className) {
-		t1 = clsx(nav_module_default.groupList, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[3] !== className) {
+		t1 = clsx(nav_module_default.groupPanel, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[2] !== children || $[3] !== t1) {
+	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx(Collapsible.Panel, {
-			className: nav_module_default.groupPanel,
-			children: /* @__PURE__ */ jsx("ul", {
-				className: t1,
-				children
-			})
+			...props,
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The subpages, each a `Nav.Item` holding a `Nav.Link`, joined to the group by branch lines. */
+var GroupList = (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(nav_module_default.groupList, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("ul", {
+			...props,
+			className: t1
 		});
-		$[2] = children;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
 	return t2;
 };
 /**
@@ -458,7 +510,7 @@ var GroupPanel = (t0) => {
 * 	<Nav.List>
 * 		<Nav.Item>
 * 			<NavLink to="/" label="Home" activeOptions={{ exact: true }}>
-* 				<NavItemView.Icon svg={HomeIcon} />
+* 				<NavItemView.Icon><HomeIcon /></NavItemView.Icon>
 * 				<NavItemView.Label>Home</NavItemView.Label>
 * 			</NavLink>
 * 		</Nav.Item>
@@ -473,7 +525,8 @@ var Nav = {
 	Group,
 	GroupHeader,
 	GroupToggle,
-	GroupPanel
+	GroupPanel,
+	GroupList
 };
 function _temp() {
 	return Tooltip.createHandle();

package/dist/components/nav/nav.module.js

@@ -1,18 +1,18 @@
 import './nav.css';// src/components/nav/nav.module.scss
-var scroller = "_scroller_t5y6k_3";
-var list = "_list_t5y6k_7";
-var indicator = "_indicator_t5y6k_21";
-var tab = "_tab_t5y6k_59";
-var iconSlot = "_iconSlot_t5y6k_103";
-var item = "_item_t5y6k_109";
-var label = "_label_t5y6k_165";
-var hintPositioner = "_hintPositioner_t5y6k_211";
-var hintViewport = "_hintViewport_t5y6k_220";
-var group = "_group_t5y6k_233";
-var groupHeader = "_groupHeader_t5y6k_237";
-var groupToggle = "_groupToggle_t5y6k_253";
-var groupPanel = "_groupPanel_t5y6k_256";
-var groupList = "_groupList_t5y6k_271";
+var scroller = "_scroller_9ce88_3";
+var list = "_list_9ce88_7";
+var indicator = "_indicator_9ce88_21";
+var tab = "_tab_9ce88_59";
+var iconSlot = "_iconSlot_9ce88_103";
+var item = "_item_9ce88_110";
+var label = "_label_9ce88_166";
+var hintPositioner = "_hintPositioner_9ce88_215";
+var hintViewport = "_hintViewport_9ce88_224";
+var group = "_group_9ce88_237";
+var groupHeader = "_groupHeader_9ce88_241";
+var groupToggle = "_groupToggle_9ce88_257";
+var groupPanel = "_groupPanel_9ce88_268";
+var groupList = "_groupList_9ce88_283";
 var nav_module_default = {
 	scroller,
 	list,

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

@@ -11,6 +11,10 @@ export type NumberFieldProps = FieldProps & Omit<NumberInputRootProps, keyof Fie
     decrementLabel: string;
     /** The increment button's accessible name and tooltip, such as "Increase". */
     incrementLabel: string;
+    /** The decrement button's icon. */
+    decrementIcon: ReactNode;
+    /** The increment button's icon. */
+    incrementIcon: ReactNode;
     /** What the control announces itself as, such as "Number field". */
     roleDescription: string;
 }>;
@@ -25,10 +29,12 @@ export type NumberFieldProps = FieldProps & Omit<NumberInputRootProps, keyof Fie
  * 	optionalLabel="optional"
  * 	decrementLabel="Decrease"
  * 	incrementLabel="Increase"
+ * 	decrementIcon={<RemoveIcon />}
+ * 	incrementIcon={<AddIcon />}
  * 	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;
+export declare const NumberField: ({ label, description, prefix, suffix, decrementLabel, incrementLabel, decrementIcon, incrementIcon, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, ...rootProps }: NumberFieldProps) => ReactNode;

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

@@ -13,6 +13,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 	optionalLabel="optional"
 * 	decrementLabel="Decrease"
 * 	incrementLabel="Increase"
+* 	decrementIcon={<RemoveIcon />}
+* 	incrementIcon={<AddIcon />}
 * 	roleDescription="Number field"
 * 	format={percentFormat()}
 * 	value={rate}
@@ -20,11 +22,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var NumberField = (t0) => {
-	const $ = c(46);
+	const $ = c(50);
 	let autoComplete;
+	let decrementIcon;
 	let decrementLabel;
 	let description;
 	let enterKeyHint;
+	let incrementIcon;
 	let incrementLabel;
 	let label;
 	let onBlur;
@@ -35,56 +39,64 @@ var NumberField = (t0) => {
 	let rootProps;
 	let suffix;
 	if ($[0] !== t0) {
-		({label, description, prefix, suffix, decrementLabel, incrementLabel, roleDescription, placeholder, autoComplete, enterKeyHint, onBlur, onFocus, ...rootProps} = t0);
+		({label, description, prefix, suffix, decrementLabel, incrementLabel, decrementIcon, incrementIcon, 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;
+		$[2] = decrementIcon;
+		$[3] = decrementLabel;
+		$[4] = description;
+		$[5] = enterKeyHint;
+		$[6] = incrementIcon;
+		$[7] = incrementLabel;
+		$[8] = label;
+		$[9] = onBlur;
+		$[10] = onFocus;
+		$[11] = placeholder;
+		$[12] = prefix;
+		$[13] = roleDescription;
+		$[14] = rootProps;
+		$[15] = 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];
+		decrementIcon = $[2];
+		decrementLabel = $[3];
+		description = $[4];
+		enterKeyHint = $[5];
+		incrementIcon = $[6];
+		incrementLabel = $[7];
+		label = $[8];
+		onBlur = $[9];
+		onFocus = $[10];
+		placeholder = $[11];
+		prefix = $[12];
+		roleDescription = $[13];
+		rootProps = $[14];
+		suffix = $[15];
 	}
 	let t1;
-	if ($[14] !== label) {
+	if ($[16] !== label) {
 		t1 = /* @__PURE__ */ jsx(NumberInput.Label, { children: label });
-		$[14] = label;
-		$[15] = t1;
-	} else t1 = $[15];
+		$[16] = label;
+		$[17] = t1;
+	} else t1 = $[17];
 	let t2;
-	if ($[16] !== decrementLabel) {
-		t2 = /* @__PURE__ */ jsx(NumberInput.Decrement, { label: decrementLabel });
-		$[16] = decrementLabel;
-		$[17] = t2;
-	} else t2 = $[17];
+	if ($[18] !== decrementIcon || $[19] !== decrementLabel) {
+		t2 = /* @__PURE__ */ jsx(NumberInput.Decrement, {
+			label: decrementLabel,
+			children: decrementIcon
+		});
+		$[18] = decrementIcon;
+		$[19] = decrementLabel;
+		$[20] = t2;
+	} else t2 = $[20];
 	let t3;
-	if ($[18] !== prefix) {
+	if ($[21] !== prefix) {
 		t3 = prefix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: prefix });
-		$[18] = prefix;
-		$[19] = t3;
-	} else t3 = $[19];
+		$[21] = prefix;
+		$[22] = t3;
+	} else t3 = $[22];
 	let t4;
-	if ($[20] !== autoComplete || $[21] !== enterKeyHint || $[22] !== onBlur || $[23] !== onFocus || $[24] !== placeholder || $[25] !== roleDescription) {
+	if ($[23] !== autoComplete || $[24] !== enterKeyHint || $[25] !== onBlur || $[26] !== onFocus || $[27] !== placeholder || $[28] !== roleDescription) {
 		t4 = /* @__PURE__ */ jsx(NumberInput.Input, {
 			"aria-roledescription": roleDescription,
 			placeholder,
@@ -93,33 +105,37 @@ var NumberField = (t0) => {
 			onBlur,
 			onFocus
 		});
-		$[20] = autoComplete;
-		$[21] = enterKeyHint;
-		$[22] = onBlur;
-		$[23] = onFocus;
-		$[24] = placeholder;
-		$[25] = roleDescription;
-		$[26] = t4;
-	} else t4 = $[26];
+		$[23] = autoComplete;
+		$[24] = enterKeyHint;
+		$[25] = onBlur;
+		$[26] = onFocus;
+		$[27] = placeholder;
+		$[28] = roleDescription;
+		$[29] = t4;
+	} else t4 = $[29];
 	let t5;
-	if ($[27] !== suffix) {
+	if ($[30] !== suffix) {
 		t5 = suffix !== void 0 && /* @__PURE__ */ jsx(NumberInput.Affix, { children: suffix });
-		$[27] = suffix;
-		$[28] = t5;
-	} else t5 = $[28];
+		$[30] = suffix;
+		$[31] = t5;
+	} else t5 = $[31];
 	let t6;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = /* @__PURE__ */ jsx(NumberInput.Pending, {});
-		$[29] = t6;
-	} else t6 = $[29];
+		$[32] = t6;
+	} else t6 = $[32];
 	let t7;
-	if ($[30] !== incrementLabel) {
-		t7 = /* @__PURE__ */ jsx(NumberInput.Increment, { label: incrementLabel });
-		$[30] = incrementLabel;
-		$[31] = t7;
-	} else t7 = $[31];
+	if ($[33] !== incrementIcon || $[34] !== incrementLabel) {
+		t7 = /* @__PURE__ */ jsx(NumberInput.Increment, {
+			label: incrementLabel,
+			children: incrementIcon
+		});
+		$[33] = incrementIcon;
+		$[34] = incrementLabel;
+		$[35] = t7;
+	} else t7 = $[35];
 	let t8;
-	if ($[32] !== t2 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 || $[36] !== t7) {
+	if ($[36] !== t2 || $[37] !== t3 || $[38] !== t4 || $[39] !== t5 || $[40] !== t7) {
 		t8 = /* @__PURE__ */ jsxs(NumberInput.Group, { children: [
 			t2,
 			t3,
@@ -128,26 +144,26 @@ var NumberField = (t0) => {
 			t6,
 			t7
 		] });
-		$[32] = t2;
-		$[33] = t3;
-		$[34] = t4;
-		$[35] = t5;
-		$[36] = t7;
-		$[37] = t8;
-	} else t8 = $[37];
+		$[36] = t2;
+		$[37] = t3;
+		$[38] = t4;
+		$[39] = t5;
+		$[40] = t7;
+		$[41] = t8;
+	} else t8 = $[41];
 	let t9;
-	if ($[38] !== description) {
+	if ($[42] !== description) {
 		t9 = /* @__PURE__ */ jsx(NumberInput.Description, { children: description });
-		$[38] = description;
-		$[39] = t9;
-	} else t9 = $[39];
+		$[42] = description;
+		$[43] = t9;
+	} else t9 = $[43];
 	let t10;
-	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
 		t10 = /* @__PURE__ */ jsx(NumberInput.Error, {});
-		$[40] = t10;
-	} else t10 = $[40];
+		$[44] = t10;
+	} else t10 = $[44];
 	let t11;
-	if ($[41] !== rootProps || $[42] !== t1 || $[43] !== t8 || $[44] !== t9) {
+	if ($[45] !== rootProps || $[46] !== t1 || $[47] !== t8 || $[48] !== t9) {
 		t11 = /* @__PURE__ */ jsxs(NumberInput.Root, {
 			...rootProps,
 			children: [
@@ -157,12 +173,12 @@ var NumberField = (t0) => {
 				t10
 			]
 		});
-		$[41] = rootProps;
-		$[42] = t1;
-		$[43] = t8;
-		$[44] = t9;
-		$[45] = t11;
-	} else t11 = $[45];
+		$[45] = rootProps;
+		$[46] = t1;
+		$[47] = t8;
+		$[48] = t9;
+		$[49] = t11;
+	} else t11 = $[49];
 	return t11;
 };
 export { NumberField };

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

@@ -19,25 +19,70 @@ export type NumberInputRootProps = Omit<FieldProps, "label" | "description"> & R
     className?: string;
     children?: ReactNode;
 }>;
+/**
+ * The field frame around a number input, holding its value, format and bounds
+ * and projecting its state onto every part.
+ *
+ * @example
+ * <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">…</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;
 export type NumberInputLabelProps = InputLabelProps;
 export type NumberInputGroupProps = Omit<BaseNumberField.Group.Props, "className"> & Readonly<{
     className?: string;
 }>;
+/**
+ * The bordered box holding the control, its stepper buttons and its inlays.
+ *
+ * @example
+ * <NumberInput.Group><NumberInput.Input /></NumberInput.Group>
+ */
 declare const NumberInputGroup: ({ className, children, ...props }: NumberInputGroupProps) => ReactNode;
+/**
+ * A slot beside the control inside the group, such as an icon.
+ *
+ * @example
+ * <NumberInput.Inlay aria-hidden="true"><EuroIcon /></NumberInput.Inlay>
+ */
 declare const NumberInputInlay: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+/**
+ * Static text beside the control, such as a unit. Decoration only.
+ *
+ * @example
+ * <NumberInput.Affix>kg</NumberInput.Affix>
+ */
 declare const NumberInputAffix: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
 export type NumberInputInputProps = Omit<BaseNumberField.Input.Props, "className"> & Readonly<{
     className?: string;
 }>;
+/**
+ * The bare control, formatting and parsing `Root`'s value.
+ *
+ * @example
+ * <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;
 }>;
-declare const NumberInputDecrement: ({ label, className, }: NumberInputStepProps) => ReactNode;
-declare const NumberInputIncrement: ({ label, className, }: NumberInputStepProps) => ReactNode;
+/**
+ * The icon-only button that steps the value down.
+ *
+ * @example
+ * <NumberInput.Decrement label="Decrease"><RemoveIcon /></NumberInput.Decrement>
+ */
+declare const NumberInputDecrement: ({ label, className, children, }: NumberInputStepProps) => ReactNode;
+/**
+ * The icon-only button that steps the value up.
+ *
+ * @example
+ * <NumberInput.Increment label="Increase"><AddIcon /></NumberInput.Increment>
+ */
+declare const NumberInputIncrement: ({ label, className, children, }: NumberInputStepProps) => ReactNode;
 export type NumberInputPendingProps = InputPendingProps;
 export type NumberInputErrorProps = InputErrorProps;
 /** The parts of a number input. */
@@ -65,9 +110,13 @@ export type NumberInputParts = Readonly<{
  * <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">
  * 	<NumberInput.Label>Hours</NumberInput.Label>
  * 	<NumberInput.Group>
- * 		<NumberInput.Decrement label="Decrease" />
+ * 		<NumberInput.Decrement label="Decrease">
+ * 			<RemoveIcon />
+ * 		</NumberInput.Decrement>
  * 		<NumberInput.Input aria-roledescription="Number field" />
- * 		<NumberInput.Increment label="Increase" />
+ * 		<NumberInput.Increment label="Increase">
+ * 			<AddIcon />
+ * 		</NumberInput.Increment>
  * 	</NumberInput.Group>
  * 	<NumberInput.Error />
  * </NumberInput.Root>