feat: add InputOTP component for OTP input functionality

src/once-ui/components/InputOTP.module.scss

@@ -0,0 +1,90 @@
+.input {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--font-size-heading-xl);
+    width: var(--static-space-64);
+    height: var(--static-space-64);
+    margin: 0 var(--static-space-8);
+    border: 1px solid var(--neutral-border-medium);
+    border-radius: var(--radius-m);
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &:focus-within {
+      border-color: var(--brand-border-weak);
+      box-shadow: 0 0 0 2px var(--brand-alpha-weak);
+      animation: focusAnimation 0.3s forwards;
+    }
+
+    &:not(:focus-within):not(:placeholder-shown) {
+      animation: filledAnimation 0.3s forwards;
+    }
+  }
+
+  .inputs {
+
+
+    justify-content: center;
+    padding: 0;
+    border-radius: var(--radius-l);
+    background: transparent;
+    font-size: var(--font-size-heading-xl);
+    text-align: center;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    width: var(--static-space-48);
+
+
+    input {
+      width: 100%;
+      height: 100%;
+      border: none;
+      outline: none;
+      background: transparent;
+      font-size: inherit;
+      text-align: center;
+      line-height: var(--static-space-64);
+      padding: 0;
+    }
+
+    &:focus-within {
+      border-color: var(--brand-border-strong);
+      box-shadow: 0 0 0 2px var(--brand-alpha-strong);
+      animation: focusAnimation 0.3s forwards;
+    }
+
+    &:not(:focus-within):not(:placeholder-shown) {
+      animation: filledAnimation 0.3s forwards;
+    }
+  }
+
+  @keyframes focusAnimation {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes filledAnimation {
+    0% {
+      background-color: var(--neutral-background-strong);
+    }
+    100% {
+    }
+  }
+
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--static-space-8);
+
+    & > :nth-child(3) {
+      margin-right: var(--static-space-24);
+    }
+  }

src/once-ui/components/InputOTP.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React, { useState, useRef } from "react";
+import { Flex, Input } from ".";
+import styles from "./InputOTP.module.scss";
+
+interface InputOTPProps {
+  length?: number;
+  onComplete?: (code: string) => void;
+  onError?: (message: string) => void;
+}
+
+const InputOTP: React.FC<InputOTPProps> = ({ 
+  length = 6, 
+  onComplete,
+  onError 
+}) => {
+  const [values, setValues] = useState<string[]>(Array(length).fill(""));
+  const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
+
+  const handleChange = (index: number, value: string) => {
+    if (value === "" || /^[0-9]$/.test(value)) {
+      const newValues = [...values];
+      newValues[index] = value;
+      setValues(newValues);
+
+      if (value && index < length - 1) {
+        inputsRef.current[index + 1]?.focus();
+      }
+
+      if (newValues.every((val) => val !== "") && onComplete) {
+        onComplete(newValues.join(""));
+      }
+    } else {
+      onError?.("Please enter numbers only.");
+    }
+  };
+
+  const handleKeyDown = (
+    index: number,
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    if (event.key === "Backspace") {
+      if (values[index]) {
+        setValues((prevValues) => {
+          const newValues = [...prevValues];
+          newValues[index] = "";
+          return newValues;
+        });
+      } else if (index > 0) {
+        inputsRef.current[index - 1]?.focus();
+      }
+    }
+  };
+
+  return (
+    <Flex gap="8" justifyContent="center" className={styles.container}>
+      {Array.from({ length }, (_, index) => (
+        <Input
+          key={index}
+          ref={(el) => {
+            inputsRef.current[index] = el;
+          }}
+          id={`otp-${index}`}
+          label=" "
+          labelAsPlaceholder
+          type="text"
+          inputMode="numeric"
+          maxLength={1}
+          value={values[index]}
+          onChange={(e) => handleChange(index, e.target.value)}
+          onKeyDown={(e) => handleKeyDown(index, e)}
+          className={styles.inputs}
+        />
+      ))}
+    </Flex>
+  );
+};
+
+export { InputOTP };
+export type { InputOTPProps };

src/once-ui/components/index.ts

@@ -1,4 +1,5 @@
 export { Accordion } from './Accordion';
+export { InputOTP } from './InputOTP';
 export { Arrow } from './Arrow';
 export { Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';