[@mantine/core] PinInput: Allow passing props to individual input ele…

…ments depending on index with `getInputProps` (#6588)

packages/@mantine/core/src/components/PinInput/PinInput.tsx

@@ -16,7 +16,7 @@ import {
   useStyles,
 } from '../../core';
 import { Group } from '../Group';
-import { Input } from '../Input';
+import { Input, InputProps } from '../Input';
 import { InputBase } from '../InputBase';
 import { createPinArray } from './create-pin-array/create-pin-array';
 import classes from './PinInput.module.css';
@@ -119,6 +119,9 @@ export interface PinInputProps
 
   /** Assigns ref of the root element */
   rootRef?: React.ForwardedRef<HTMLDivElement>;
+
+  /** Props added to the input element depending on its index */
+  getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'>;
 }
 
 export type PinInputFactory = Factory<{
@@ -178,6 +181,7 @@ export const PinInput = factory<PinInputFactory>((props, ref) => {
     id,
     hiddenInputProps,
     rootRef,
+    getInputProps,
     ...others
   } = useProps('PinInput', defaultProps, props);
 
@@ -415,6 +419,7 @@ export const PinInput = factory<PinInputFactory>((props, ref) => {
             unstyled={unstyled}
             aria-label={ariaLabel}
             readOnly={readOnly}
+            {...getInputProps?.(index)}
           />
         ))}
       </Group>