Many inputs added

lib/component/input/number/NumberInput.tsx

@@ -0,0 +1,58 @@
+import type { NumberInputProps } from "$/types/Input";
+import clsx from "clsx";
+
+
+export default function NumberInput({
+	id,
+	className,
+	inputClassName,
+	labelClassName,
+	name,
+	min,
+	max,
+	defaultValue,
+	value,
+	onChange,
+	disabled,
+	children
+}: NumberInputProps){
+	return (
+		<div
+			className={clsx(
+				"flex flex-row items-center justify-center rounded-lg border-2 w-full",
+				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}
+				/>
+				<label
+					className={clsx(
+						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
+						labelClassName
+					)}
+					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
+					htmlFor={id}
+				>
+					{children}
+				</label>
+			</div>
+		</div>
+	);
+}