[docs][material-ui] Add Number Field component page

docs/data/material/components/number-field/FieldDemo.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import NumberField from './components/NumberField';
+
+export default function FieldDemo() {
+  return (
+    <Box sx={{ display: 'grid', gap: 4 }}>
+      <NumberField label="Number Field" min={10} max={40} />
+      <NumberField
+        label="Small and Error"
+        min={10}
+        max={40}
+        size="small"
+        defaultValue={100}
+        error
+      />
+    </Box>
+  );
+}

docs/data/material/components/number-field/FieldDemo.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import NumberField from './components/NumberField';
+
+export default function FieldDemo() {
+  return (
+    <Box sx={{ display: 'grid', gap: 4 }}>
+      <NumberField label="Number Field" min={10} max={40} />
+      <NumberField
+        label="Small and Error"
+        min={10}
+        max={40}
+        size="small"
+        defaultValue={100}
+        error
+      />
+    </Box>
+  );
+}

docs/data/material/components/number-field/FieldDemo.tsx.preview

@@ -0,0 +1,9 @@
+<NumberField label="Number Field" min={10} max={40} />
+<NumberField
+  label="Small and Error"
+  min={10}
+  max={40}
+  size="small"
+  defaultValue={100}
+  error
+/>

docs/data/material/components/number-field/SpinnerDemo.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import NumberSpinner from './components/NumberSpinner';
+
+export default function SpinnerDemo() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+        justifyContent: 'center',
+      }}
+    >
+      <NumberSpinner label="Number Spinner" min={10} max={40} />
+      <NumberSpinner
+        label="Small and Error"
+        min={10}
+        max={40}
+        size="small"
+        defaultValue={100}
+        error
+      />
+    </Box>
+  );
+}

docs/data/material/components/number-field/SpinnerDemo.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import NumberSpinner from './components/NumberSpinner';
+
+export default function SpinnerDemo() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+        justifyContent: 'center',
+      }}
+    >
+      <NumberSpinner label="Number Spinner" min={10} max={40} />
+      <NumberSpinner
+        label="Small and Error"
+        min={10}
+        max={40}
+        size="small"
+        defaultValue={100}
+        error
+      />
+    </Box>
+  );
+}

docs/data/material/components/number-field/SpinnerDemo.tsx.preview

@@ -0,0 +1,9 @@
+<NumberSpinner label="Number Spinner" min={10} max={40} />
+<NumberSpinner
+  label="Small and Error"
+  min={10}
+  max={40}
+  size="small"
+  defaultValue={100}
+  error
+/>

docs/data/material/components/number-field/components/NumberField.js

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { NumberField as BaseNumberField } from '@base-ui-components/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';
+
+function NumberField({ id: idProp, label, error, size = 'medium', ...other }) {
+  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>
+  );
+}
+
+NumberField.propTypes = {
+  error: PropTypes.bool,
+  /**
+   * The id of the input element.
+   */
+  id: PropTypes.string,
+  label: PropTypes.node,
+  size: PropTypes.oneOf(['medium', 'small']),
+};
+
+export default NumberField;

docs/data/material/components/number-field/components/NumberField.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { NumberField as BaseNumberField } from '@base-ui-components/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>
+  );
+}