feat: Otp prop enhancements

Author: tugcekucukoglu

apps/showcase/assets/apidoc/index.json

@@ -304193,6 +304193,30 @@
                             "default": "",
                             "description": "The children to render."
                         },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"small\" | \"large\" | \"normal\"",
+                            "default": "",
+                            "description": "Defines the size of the InputText."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"outlined\" | \"filled\"",
+                            "default": "",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element should be disabled."
+                        },
                         {
                             "name": "value",
                             "optional": true,

apps/showcase/demo/inputotp/filled-demo.tsx

@@ -3,11 +3,11 @@ import { InputOtp } from 'primereact/inputotp';
 export default function FilledDemo() {
     return (
         <div className="card flex justify-center">
-            <InputOtp defaultValue={''}>
-                <InputOtp.Text variant="filled" />
-                <InputOtp.Text variant="filled" />
-                <InputOtp.Text variant="filled" />
-                <InputOtp.Text variant="filled" />
+            <InputOtp defaultValue={''} variant="filled">
+                <InputOtp.Text />
+                <InputOtp.Text />
+                <InputOtp.Text />
+                <InputOtp.Text />
             </InputOtp>
         </div>
     );

apps/showcase/demo/inputotp/sizes-demo.tsx

@@ -3,23 +3,23 @@ import { InputOtp } from 'primereact/inputotp';
 export default function SizesDemo() {
     return (
         <div className="card flex flex-col items-center gap-4">
-            <InputOtp defaultValue={''}>
-                <InputOtp.Text size="small" />
-                <InputOtp.Text size="small" />
-                <InputOtp.Text size="small" />
-                <InputOtp.Text size="small" />
+            <InputOtp defaultValue={''} size="small">
+                <InputOtp.Text />
+                <InputOtp.Text />
+                <InputOtp.Text />
+                <InputOtp.Text />
             </InputOtp>
             <InputOtp defaultValue={''}>
                 <InputOtp.Text />
                 <InputOtp.Text />
                 <InputOtp.Text />
                 <InputOtp.Text />
             </InputOtp>
-            <InputOtp defaultValue={''}>
-                <InputOtp.Text size="large" />
-                <InputOtp.Text size="large" />
-                <InputOtp.Text size="large" />
-                <InputOtp.Text size="large" />
+            <InputOtp defaultValue={''} size="large">
+                <InputOtp.Text />
+                <InputOtp.Text />
+                <InputOtp.Text />
+                <InputOtp.Text />
             </InputOtp>
         </div>
     );

packages/primereact/src/inputotp/InputOtp.props.ts

@@ -3,5 +3,8 @@ import type { InputOtpProps } from '@primereact/types/shared/inputotp';
 
 export const defaultProps: InputOtpProps = {
     ...HeadlessInputOtp.defaultProps,
-    as: 'div'
+    as: 'div',
+    size: undefined,
+    variant: undefined,
+    disabled: false
 };

packages/primereact/src/inputotp/text/InputOtpText.tsx

@@ -31,6 +31,9 @@ export const InputOtpText = withComponent({
                 type: inputotp?.inputType(),
                 inputMode: inputotp?.inputMode(),
                 className: inputotp?.cx('text'),
+                size: inputotp?.props.size ?? props.size,
+                variant: inputotp?.props.variant ?? props.variant,
+                disabled: inputotp?.props.disabled ?? props.disabled,
                 'data-pc-index': index,
                 onInput: (e: React.FormEvent<HTMLInputElement>) => inputotp?.onInput?.(e, index),
                 onClick: inputotp?.onClick,

packages/types/src/shared/inputotp/InputOtp.types.ts

@@ -34,7 +34,21 @@ export interface InputOtpPassThrough {
 /**
  * Defines valid properties in InputOtp component.
  */
-export interface InputOtpProps extends BaseComponentProps<InputOtpInstance, useInputOtpProps, InputOtpPassThrough> {}
+export interface InputOtpProps extends BaseComponentProps<InputOtpInstance, useInputOtpProps, InputOtpPassThrough> {
+    /**
+     * Defines the size of the InputText.
+     */
+    size?: 'small' | 'normal' | 'large' | undefined;
+    /**
+     * Specifies the input variant of the component.
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
 
 /**
  * Defines valid state in InputOtp component.