Update input components

lib/component/input/number/NumberInput.tsx

@@ -10,38 +10,42 @@ export default function NumberInput({
 	name,
 	min,
 	max,
-	defaultValue,
+	step,
+	prefix,
+	suffix,
 	value,
 	onChange,
 	disabled,
 	children
-}: NumberInputProps){
+}: Readonly<NumberInputProps>){
 	return (
 		<div
 			className={clsx(
-				"flex flex-row items-center justify-center rounded-lg border-2 w-full",
+				"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 w-full"
-			>
-				<input
-					type="number"
-					id={id}
-					className={clsx(
-						"peer bg-transparent outline-none placeholder-transparent w-full",
-						"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-						inputClassName
-					)}
-					name={name}
-					min={min}
-					max={max}
-					defaultValue={defaultValue}
-					value={value}
-					onChange={(e) => onChange?.(e.target.valueAsNumber)}
-					disabled={disabled}
-				/>
+			<div className="relative flex flex-row items-center justify-center px-2 py-1 w-full">
+				<div className="flex flex-row items-center justify-start">
+					{ prefix && <span>{prefix}</span> }
+					<input
+						type="number"
+						id={id}
+						className={clsx(
+							"peer bg-transparent outline-none placeholder-transparent w-full",
+							"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+							inputClassName
+						)}
+						name={name}
+						min={min}
+						max={max}
+						step={step}
+						value={value}
+						onChange={(e) => onChange(e.target.valueAsNumber || 0)}
+						disabled={disabled}
+					/>
+					{ suffix && <span>{suffix}</span> }
+				</div>
 				<label
 					className={clsx(
 						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",