chore: Otp demo updates

Author: tugcekucukoglu

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

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

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

@@ -3,12 +3,12 @@ import { InputOtp } from 'primereact/inputotp';
 export default function CustomDemo() {
     return (
         <div className="card flex justify-center">
-            <InputOtp defaultValue={''}>
+            <InputOtp>
                 {Array.from({ length: 4 }, (_, index) => {
                     return (
                         <InputOtp.Text
                             key={index}
-                            className="w-[40px] text-4xl appearance-none text-center transition-all duration-200 bg-transparent border-0 border-b-2 border-b-[var(--p-inputtext-border-color)] rounded-none focus:outline-none focus:border-b-[var(--p-primary-color)]"
+                            className="w-[40px] text-4xl appearance-none shadow-none text-center transition-all duration-200 bg-transparent border-0 border-b-2 border-b-[var(--p-inputtext-border-color)] rounded-none focus:outline-none focus:border-b-[var(--p-primary-color)]"
                         />
                     );
                 })}

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

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

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

@@ -2,7 +2,7 @@ import { InputOtp } from 'primereact/inputotp';
 
 export default function InputOtpPTDemo() {
     return (
-        <InputOtp defaultValue={''}>
+        <InputOtp>
             <InputOtp.Text />
             <InputOtp.Text />
             <InputOtp.Text />

apps/showcase/demo/inputotp/integer-only-demo.tsx

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

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

@@ -3,7 +3,7 @@ import { InputOtp } from 'primereact/inputotp';
 export default function MaskDemo() {
     return (
         <div className="card flex justify-center">
-            <InputOtp defaultValue={''} mask>
+            <InputOtp mask>
                 {Array.from({ length: 4 }, (_, index) => (
                     <InputOtp.Text key={index} />
                 ))}

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

@@ -9,7 +9,7 @@ export default function SampleDemo() {
             <div className="flex flex-col items-center">
                 <div className="font-bold text-xl mb-2">Authenticate Your Account</div>
                 <p className="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
-                <InputOtp defaultValue={''} className="gap-0">
+                <InputOtp className="gap-0">
                     {Array.from({ length: 6 }, (_, index) => {
                         const inputClasses = [
                             'w-12 h-12 text-2xl appearance-none text-center transition-all duration-200',

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

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