Update input components

lib/component/input/text/TextInput.tsx

@@ -1,9 +1,10 @@
 import type { TextInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { useId } from "react";
 
 
 export default function TextInput({
-	id = crypto.randomUUID().replaceAll("-", ""),
+	id,
 	className,
 	inputClassName,
 	labelClassName,
@@ -11,11 +12,14 @@ export default function TextInput({
 	maxLength,
 	spellCheck,
 	placeholder,
-	defaultValue,
 	value,
 	onChange,
 	disabled
-}: TextInputProps){
+}: Readonly<TextInputProps>){
+	const componentId = useId();
+	const activeId = id ?? componentId;
+
+
 	return (
 		<div
 			className={clsx(
@@ -28,7 +32,7 @@ export default function TextInput({
 			>
 				<input
 					type="text"
-					id={id}
+					id={activeId}
 					className={clsx(
 						"peer bg-transparent outline-none placeholder-transparent w-full",
 						inputClassName
@@ -36,7 +40,6 @@ export default function TextInput({
 					name={name}
 					placeholder={placeholder}
 					maxLength={maxLength}
-					defaultValue={defaultValue}
 					value={value}
 					onChange={onChange}
 					disabled={disabled}
@@ -51,7 +54,7 @@ export default function TextInput({
 						labelClassName
 					)}
 					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
-					htmlFor={id}
+					htmlFor={activeId}
 				>
 					{placeholder}
 				</label>