Updated several input components

lib/component/input/TextArea.tsx

@@ -0,0 +1,61 @@
+import type { TextAreaProps } from "$/types/Input";
+import clsx from "clsx";
+
+
+export default function TextArea({
+	id = crypto.randomUUID().replaceAll("-", ""),
+	className,
+	inputClassName,
+	labelClassName,
+	maxLength,
+	rows,
+	cols,
+	spellCheck,
+	placeholder,
+	defaultValue,
+	value,
+	onChange,
+	disabled
+}: TextAreaProps){
+	return (
+		<div
+			className={clsx(
+				"flex flex-row items-center justify-center rounded-lg border-2",
+				className
+			)}
+		>
+			<div
+				className="relative flex flex-row items-center justify-center px-2 py-1"
+			>
+				<textarea
+					id={id}
+					className={clsx(
+						"peer bg-transparent outline-none placeholder-transparent resize",
+						inputClassName
+					)}
+					placeholder={placeholder}
+					maxLength={maxLength}
+					rows={rows}
+					cols={cols}
+					defaultValue={defaultValue}
+					value={value}
+					onChange={onChange}
+					disabled={disabled}
+					spellCheck={spellCheck}
+				/>
+				<label
+					className={clsx(
+						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
+						"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:cursor-text",
+						"flex items-center",
+						labelClassName
+					)}
+					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
+					htmlFor={id}
+				>
+					{placeholder}
+				</label>
+			</div>
+		</div>
+	);
+}