@etsoo/materialui 1.6.27 → 1.6.28

package/lib/cjs/NumberField.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+export default function NumberField({ id: idProp, label, error, size, ...other }: BaseNumberField.Root.Props & {
+    label?: React.ReactNode;
+    size?: "small" | "medium";
+    error?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/NumberField.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = NumberField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const number_field_1 = require("@base-ui/react/number-field");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
+const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
+const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
+/**
+ * This component is a placeholder for FormControl to correctly set the shrink label state on SSR.
+ */
+function SSRInitialFilled(_) {
+    return null;
+}
+SSRInitialFilled.muiName = "Input";
+function NumberField({ id: idProp, label, error, size = "medium", ...other }) {
+    let id = React.useId();
+    if (idProp) {
+        id = idProp;
+    }
+    return ((0, jsx_runtime_1.jsxs)(number_field_1.NumberField.Root, { ...other, render: (props, state) => ((0, jsx_runtime_1.jsx)(FormControl_1.default, { size: size, ref: props.ref, disabled: state.disabled, required: state.required, error: error, variant: "outlined", children: props.children })), children: [(0, jsx_runtime_1.jsx)(SSRInitialFilled, { ...other }), (0, jsx_runtime_1.jsx)(InputLabel_1.default, { htmlFor: id, children: label }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.Input, { id: id, render: (props, state) => ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label, inputRef: props.ref, value: state.inputValue, onBlur: props.onBlur, onChange: props.onChange, onKeyUp: props.onKeyUp, onKeyDown: props.onKeyDown, onFocus: props.onFocus, slotProps: {
+                        input: props
+                    }, endAdornment: (0, jsx_runtime_1.jsxs)(InputAdornment_1.default, { position: "end", sx: {
+                            flexDirection: "column",
+                            maxHeight: "unset",
+                            alignSelf: "stretch",
+                            borderLeft: "1px solid",
+                            borderColor: "divider",
+                            ml: 0,
+                            "& button": {
+                                py: 0,
+                                flex: 1,
+                                borderRadius: 0.5
+                            }
+                        }, children: [(0, jsx_runtime_1.jsx)(number_field_1.NumberField.Increment, { render: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: size, "aria-label": "Increase" }), children: (0, jsx_runtime_1.jsx)(KeyboardArrowUp_1.default, { fontSize: size, sx: { transform: "translateY(2px)" } }) }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.Decrement, { render: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: size, "aria-label": "Decrease" }), children: (0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, { fontSize: size, sx: { transform: "translateY(-2px)" } }) })] }), sx: { pr: 0 } })) }), (0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { ml: 0, "&:empty": { mt: 0 } }, children: "Enter value between 10 and 40" })] }));
+}

package/lib/cjs/NumberSpinner.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+export default function NumberSpinner({ id: idProp, label, error, size, ...other }: BaseNumberField.Root.Props & {
+    label?: React.ReactNode;
+    size?: "small" | "medium";
+    error?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/NumberSpinner.js

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = NumberSpinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const number_field_1 = require("@base-ui/react/number-field");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
+const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
+const OpenInFull_1 = __importDefault(require("@mui/icons-material/OpenInFull"));
+function NumberSpinner({ id: idProp, label, error, size = "medium", ...other }) {
+    let id = React.useId();
+    if (idProp) {
+        id = idProp;
+    }
+    return ((0, jsx_runtime_1.jsxs)(number_field_1.NumberField.Root, { ...other, render: (props, state) => ((0, jsx_runtime_1.jsx)(FormControl_1.default, { size: size, ref: props.ref, disabled: state.disabled, required: state.required, error: error, variant: "outlined", sx: {
+                "& .MuiButton-root": {
+                    borderColor: "divider",
+                    minWidth: 0,
+                    bgcolor: "action.hover",
+                    "&:not(.Mui-disabled)": {
+                        color: "text.primary"
+                    }
+                }
+            }, children: props.children })), children: [(0, jsx_runtime_1.jsxs)(number_field_1.NumberField.ScrubArea, { render: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "span", sx: { userSelect: "none", width: "max-content" } }), children: [(0, jsx_runtime_1.jsx)(FormLabel_1.default, { htmlFor: id, sx: {
+                            display: "inline-block",
+                            cursor: "ew-resize",
+                            fontSize: "0.875rem",
+                            color: "text.primary",
+                            fontWeight: 500,
+                            lineHeight: 1.5,
+                            mb: 0.5
+                        }, children: label }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.ScrubAreaCursor, { children: (0, jsx_runtime_1.jsx)(OpenInFull_1.default, { fontSize: "small", sx: { transform: "translateY(12.5%) rotate(45deg)" } }) })] }), (0, jsx_runtime_1.jsxs)(Box_1.default, { sx: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)(number_field_1.NumberField.Decrement, { render: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", "aria-label": "Decrease", size: size, sx: {
+                                borderTopRightRadius: 0,
+                                borderBottomRightRadius: 0,
+                                borderRight: "0px",
+                                "&.Mui-disabled": {
+                                    borderRight: "0px"
+                                }
+                            } }), children: (0, jsx_runtime_1.jsx)(Remove_1.default, { fontSize: size }) }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.Input, { id: id, render: (props, state) => ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { inputRef: props.ref, value: state.inputValue, onBlur: props.onBlur, onChange: props.onChange, onKeyUp: props.onKeyUp, onKeyDown: props.onKeyDown, onFocus: props.onFocus, slotProps: {
+                                input: {
+                                    ...props,
+                                    size: Math.max((other.min?.toString() || "").length, state.inputValue.length || 1) + 1,
+                                    sx: {
+                                        textAlign: "center"
+                                    }
+                                }
+                            }, sx: { pr: 0, borderRadius: 0, flex: 1 } })) }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.Increment, { render: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", "aria-label": "Increase", size: size, sx: {
+                                borderTopLeftRadius: 0,
+                                borderBottomLeftRadius: 0,
+                                borderLeft: "0px",
+                                "&.Mui-disabled": {
+                                    borderLeft: "0px"
+                                }
+                            } }), children: (0, jsx_runtime_1.jsx)(Add_1.default, { fontSize: size }) })] })] }));
+}

package/lib/cjs/index.d.ts

@@ -94,7 +94,9 @@ export * from "./MUGlobal";
 export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./NotifierPopupProps";
+export * from "./NumberField";
 export * from "./NumberInputField";
+export * from "./NumberSpinner";
 export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./OptionGroupFlag";

package/lib/cjs/index.js

@@ -110,7 +110,9 @@ __exportStar(require("./MUGlobal"), exports);
 __exportStar(require("./MUUtils"), exports);
 __exportStar(require("./NotifierMU"), exports);
 __exportStar(require("./NotifierPopupProps"), exports);
+__exportStar(require("./NumberField"), exports);
 __exportStar(require("./NumberInputField"), exports);
+__exportStar(require("./NumberSpinner"), exports);
 __exportStar(require("./OptionBool"), exports);
 __exportStar(require("./OptionGroup"), exports);
 __exportStar(require("./OptionGroupFlag"), exports);

package/lib/mjs/NumberField.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+export default function NumberField({ id: idProp, label, error, size, ...other }: BaseNumberField.Root.Props & {
+    label?: React.ReactNode;
+    size?: "small" | "medium";
+    error?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/NumberField.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import IconButton from "@mui/material/IconButton";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import InputAdornment from "@mui/material/InputAdornment";
+import InputLabel from "@mui/material/InputLabel";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+/**
+ * This component is a placeholder for FormControl to correctly set the shrink label state on SSR.
+ */
+function SSRInitialFilled(_) {
+    return null;
+}
+SSRInitialFilled.muiName = "Input";
+export default function NumberField({ id: idProp, label, error, size = "medium", ...other }) {
+    let id = React.useId();
+    if (idProp) {
+        id = idProp;
+    }
+    return (_jsxs(BaseNumberField.Root, { ...other, render: (props, state) => (_jsx(FormControl, { size: size, ref: props.ref, disabled: state.disabled, required: state.required, error: error, variant: "outlined", children: props.children })), children: [_jsx(SSRInitialFilled, { ...other }), _jsx(InputLabel, { htmlFor: id, children: label }), _jsx(BaseNumberField.Input, { id: id, render: (props, state) => (_jsx(OutlinedInput, { label: label, inputRef: props.ref, value: state.inputValue, onBlur: props.onBlur, onChange: props.onChange, onKeyUp: props.onKeyUp, onKeyDown: props.onKeyDown, onFocus: props.onFocus, slotProps: {
+                        input: props
+                    }, endAdornment: _jsxs(InputAdornment, { position: "end", sx: {
+                            flexDirection: "column",
+                            maxHeight: "unset",
+                            alignSelf: "stretch",
+                            borderLeft: "1px solid",
+                            borderColor: "divider",
+                            ml: 0,
+                            "& button": {
+                                py: 0,
+                                flex: 1,
+                                borderRadius: 0.5
+                            }
+                        }, children: [_jsx(BaseNumberField.Increment, { render: _jsx(IconButton, { size: size, "aria-label": "Increase" }), children: _jsx(KeyboardArrowUpIcon, { fontSize: size, sx: { transform: "translateY(2px)" } }) }), _jsx(BaseNumberField.Decrement, { render: _jsx(IconButton, { size: size, "aria-label": "Decrease" }), children: _jsx(KeyboardArrowDownIcon, { fontSize: size, sx: { transform: "translateY(-2px)" } }) })] }), sx: { pr: 0 } })) }), _jsx(FormHelperText, { sx: { ml: 0, "&:empty": { mt: 0 } }, children: "Enter value between 10 and 40" })] }));
+}

package/lib/mjs/NumberSpinner.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+export default function NumberSpinner({ id: idProp, label, error, size, ...other }: BaseNumberField.Root.Props & {
+    label?: React.ReactNode;
+    size?: "small" | "medium";
+    error?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/NumberSpinner.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import OpenInFullIcon from "@mui/icons-material/OpenInFull";
+export default function NumberSpinner({ id: idProp, label, error, size = "medium", ...other }) {
+    let id = React.useId();
+    if (idProp) {
+        id = idProp;
+    }
+    return (_jsxs(BaseNumberField.Root, { ...other, render: (props, state) => (_jsx(FormControl, { size: size, ref: props.ref, disabled: state.disabled, required: state.required, error: error, variant: "outlined", sx: {
+                "& .MuiButton-root": {
+                    borderColor: "divider",
+                    minWidth: 0,
+                    bgcolor: "action.hover",
+                    "&:not(.Mui-disabled)": {
+                        color: "text.primary"
+                    }
+                }
+            }, children: props.children })), children: [_jsxs(BaseNumberField.ScrubArea, { render: _jsx(Box, { component: "span", sx: { userSelect: "none", width: "max-content" } }), children: [_jsx(FormLabel, { htmlFor: id, sx: {
+                            display: "inline-block",
+                            cursor: "ew-resize",
+                            fontSize: "0.875rem",
+                            color: "text.primary",
+                            fontWeight: 500,
+                            lineHeight: 1.5,
+                            mb: 0.5
+                        }, children: label }), _jsx(BaseNumberField.ScrubAreaCursor, { children: _jsx(OpenInFullIcon, { fontSize: "small", sx: { transform: "translateY(12.5%) rotate(45deg)" } }) })] }), _jsxs(Box, { sx: { display: "flex" }, children: [_jsx(BaseNumberField.Decrement, { render: _jsx(Button, { variant: "outlined", "aria-label": "Decrease", size: size, sx: {
+                                borderTopRightRadius: 0,
+                                borderBottomRightRadius: 0,
+                                borderRight: "0px",
+                                "&.Mui-disabled": {
+                                    borderRight: "0px"
+                                }
+                            } }), children: _jsx(RemoveIcon, { fontSize: size }) }), _jsx(BaseNumberField.Input, { id: id, render: (props, state) => (_jsx(OutlinedInput, { inputRef: props.ref, value: state.inputValue, onBlur: props.onBlur, onChange: props.onChange, onKeyUp: props.onKeyUp, onKeyDown: props.onKeyDown, onFocus: props.onFocus, slotProps: {
+                                input: {
+                                    ...props,
+                                    size: Math.max((other.min?.toString() || "").length, state.inputValue.length || 1) + 1,
+                                    sx: {
+                                        textAlign: "center"
+                                    }
+                                }
+                            }, sx: { pr: 0, borderRadius: 0, flex: 1 } })) }), _jsx(BaseNumberField.Increment, { render: _jsx(Button, { variant: "outlined", "aria-label": "Increase", size: size, sx: {
+                                borderTopLeftRadius: 0,
+                                borderBottomLeftRadius: 0,
+                                borderLeft: "0px",
+                                "&.Mui-disabled": {
+                                    borderLeft: "0px"
+                                }
+                            } }), children: _jsx(AddIcon, { fontSize: size }) })] })] }));
+}

package/lib/mjs/index.d.ts

@@ -94,7 +94,9 @@ export * from "./MUGlobal";
 export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./NotifierPopupProps";
+export * from "./NumberField";
 export * from "./NumberInputField";
+export * from "./NumberSpinner";
 export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./OptionGroupFlag";

package/lib/mjs/index.js

@@ -94,7 +94,9 @@ export * from "./MUGlobal";
 export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./NotifierPopupProps";
+export * from "./NumberField";
 export * from "./NumberInputField";
+export * from "./NumberSpinner";
 export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./OptionGroupFlag";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.27",
+  "version": "1.6.28",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -36,6 +36,7 @@
   },
   "homepage": "https://github.com/ETSOO/ReactMU#readme",
   "dependencies": {
+    "@base-ui/react": "^1.2.0",
     "@dnd-kit/react": "^0.3.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",

package/src/NumberField.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import IconButton from "@mui/material/IconButton";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import InputAdornment from "@mui/material/InputAdornment";
+import InputLabel from "@mui/material/InputLabel";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+
+/**
+ * This component is a placeholder for FormControl to correctly set the shrink label state on SSR.
+ */
+function SSRInitialFilled(_: BaseNumberField.Root.Props) {
+  return null;
+}
+SSRInitialFilled.muiName = "Input";
+
+export default function NumberField({
+  id: idProp,
+  label,
+  error,
+  size = "medium",
+  ...other
+}: BaseNumberField.Root.Props & {
+  label?: React.ReactNode;
+  size?: "small" | "medium";
+  error?: boolean;
+}) {
+  let id = React.useId();
+  if (idProp) {
+    id = idProp;
+  }
+  return (
+    <BaseNumberField.Root
+      {...other}
+      render={(props, state) => (
+        <FormControl
+          size={size}
+          ref={props.ref}
+          disabled={state.disabled}
+          required={state.required}
+          error={error}
+          variant="outlined"
+        >
+          {props.children}
+        </FormControl>
+      )}
+    >
+      <SSRInitialFilled {...other} />
+      <InputLabel htmlFor={id}>{label}</InputLabel>
+      <BaseNumberField.Input
+        id={id}
+        render={(props, state) => (
+          <OutlinedInput
+            label={label}
+            inputRef={props.ref}
+            value={state.inputValue}
+            onBlur={props.onBlur}
+            onChange={props.onChange}
+            onKeyUp={props.onKeyUp}
+            onKeyDown={props.onKeyDown}
+            onFocus={props.onFocus}
+            slotProps={{
+              input: props
+            }}
+            endAdornment={
+              <InputAdornment
+                position="end"
+                sx={{
+                  flexDirection: "column",
+                  maxHeight: "unset",
+                  alignSelf: "stretch",
+                  borderLeft: "1px solid",
+                  borderColor: "divider",
+                  ml: 0,
+                  "& button": {
+                    py: 0,
+                    flex: 1,
+                    borderRadius: 0.5
+                  }
+                }}
+              >
+                <BaseNumberField.Increment
+                  render={<IconButton size={size} aria-label="Increase" />}
+                >
+                  <KeyboardArrowUpIcon
+                    fontSize={size}
+                    sx={{ transform: "translateY(2px)" }}
+                  />
+                </BaseNumberField.Increment>
+
+                <BaseNumberField.Decrement
+                  render={<IconButton size={size} aria-label="Decrease" />}
+                >
+                  <KeyboardArrowDownIcon
+                    fontSize={size}
+                    sx={{ transform: "translateY(-2px)" }}
+                  />
+                </BaseNumberField.Decrement>
+              </InputAdornment>
+            }
+            sx={{ pr: 0 }}
+          />
+        )}
+      />
+      <FormHelperText sx={{ ml: 0, "&:empty": { mt: 0 } }}>
+        Enter value between 10 and 40
+      </FormHelperText>
+    </BaseNumberField.Root>
+  );
+}

package/src/NumberSpinner.tsx

@@ -0,0 +1,154 @@
+import * as React from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import OpenInFullIcon from "@mui/icons-material/OpenInFull";
+
+export default function NumberSpinner({
+  id: idProp,
+  label,
+  error,
+  size = "medium",
+  ...other
+}: BaseNumberField.Root.Props & {
+  label?: React.ReactNode;
+  size?: "small" | "medium";
+  error?: boolean;
+}) {
+  let id = React.useId();
+  if (idProp) {
+    id = idProp;
+  }
+  return (
+    <BaseNumberField.Root
+      {...other}
+      render={(props, state) => (
+        <FormControl
+          size={size}
+          ref={props.ref}
+          disabled={state.disabled}
+          required={state.required}
+          error={error}
+          variant="outlined"
+          sx={{
+            "& .MuiButton-root": {
+              borderColor: "divider",
+              minWidth: 0,
+              bgcolor: "action.hover",
+              "&:not(.Mui-disabled)": {
+                color: "text.primary"
+              }
+            }
+          }}
+        >
+          {props.children}
+        </FormControl>
+      )}
+    >
+      <BaseNumberField.ScrubArea
+        render={
+          <Box
+            component="span"
+            sx={{ userSelect: "none", width: "max-content" }}
+          />
+        }
+      >
+        <FormLabel
+          htmlFor={id}
+          sx={{
+            display: "inline-block",
+            cursor: "ew-resize",
+            fontSize: "0.875rem",
+            color: "text.primary",
+            fontWeight: 500,
+            lineHeight: 1.5,
+            mb: 0.5
+          }}
+        >
+          {label}
+        </FormLabel>
+        <BaseNumberField.ScrubAreaCursor>
+          <OpenInFullIcon
+            fontSize="small"
+            sx={{ transform: "translateY(12.5%) rotate(45deg)" }}
+          />
+        </BaseNumberField.ScrubAreaCursor>
+      </BaseNumberField.ScrubArea>
+      <Box sx={{ display: "flex" }}>
+        <BaseNumberField.Decrement
+          render={
+            <Button
+              variant="outlined"
+              aria-label="Decrease"
+              size={size}
+              sx={{
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+                borderRight: "0px",
+                "&.Mui-disabled": {
+                  borderRight: "0px"
+                }
+              }}
+            />
+          }
+        >
+          <RemoveIcon fontSize={size} />
+        </BaseNumberField.Decrement>
+
+        <BaseNumberField.Input
+          id={id}
+          render={(props, state) => (
+            <OutlinedInput
+              inputRef={props.ref}
+              value={state.inputValue}
+              onBlur={props.onBlur}
+              onChange={props.onChange}
+              onKeyUp={props.onKeyUp}
+              onKeyDown={props.onKeyDown}
+              onFocus={props.onFocus}
+              slotProps={{
+                input: {
+                  ...props,
+                  size:
+                    Math.max(
+                      (other.min?.toString() || "").length,
+                      state.inputValue.length || 1
+                    ) + 1,
+                  sx: {
+                    textAlign: "center"
+                  }
+                }
+              }}
+              sx={{ pr: 0, borderRadius: 0, flex: 1 }}
+            />
+          )}
+        />
+
+        <BaseNumberField.Increment
+          render={
+            <Button
+              variant="outlined"
+              aria-label="Increase"
+              size={size}
+              sx={{
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeft: "0px",
+                "&.Mui-disabled": {
+                  borderLeft: "0px"
+                }
+              }}
+            />
+          }
+        >
+          <AddIcon fontSize={size} />
+        </BaseNumberField.Increment>
+      </Box>
+    </BaseNumberField.Root>
+  );
+}

package/src/index.ts

@@ -100,7 +100,9 @@ export * from "./MUGlobal";
 export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./NotifierPopupProps";
+export * from "./NumberField";
 export * from "./NumberInputField";
+export * from "./NumberSpinner";
 export * from "./OptionBool";
 export * from "./OptionGroup";
 export * from "./OptionGroupFlag";