tonality/packages/app-web/src/components/molecules/forms/NumericInput/index.tsx

import {ChangeEventHandler, FC} from 'react';
import styled from 'styled-components'

const Base = styled('div')({
	height: '3rem',
	borderRadius: '0.25rem',
	overflow: 'hidden',
	position: 'relative',
	backgroundColor: 'var(--color-bg, white)',
	'::before': {
		content: "''",
		borderWidth: 1,
		borderStyle: 'solid',
		position: 'absolute',
		top: 0,
		left: 0,
		width: '100%',
		height: '100%',
		borderRadius: 'inherit',
		boxSizing: 'border-box',
		opacity: 0.5,
	},
})

const ClickArea = styled('label')({
	position: 'relative',
	height: '100%',
})

const Label = styled('span')({
	position: 'absolute',
	left: -999999,
})

const Input = styled('input')({
	display: 'block',
	width: '100%',
	height: '100%',
	margin: 0,
	padding: '0 1rem',
	boxSizing: 'border-box',
	font: 'inherit',
	border: 0,
	backgroundColor: 'transparent',
	color: 'inherit',
	outline: 0,
})

type Props = {
	label: string,
	name: string,
	className?: string,
	block?: boolean,
	placeholder?: string,
	defaultValue?: string | number | readonly string[],
	onChange?: ChangeEventHandler<HTMLInputElement>,
	disabled?: boolean,
}

const NumericInput: FC<Props> = ({
	label,
	className,
	block,
	...etcProps
}) => {
	return (
		<Base
			className={className}
			style={{
				display: block ? 'block' : 'inline-block',
				width: block ? '100%' : undefined,
			}}
		>
			<ClickArea>
				<Label>
					{label}
				</Label>
				<Input
					{...etcProps}
					type="number"
				/>
			</ClickArea>
		</Base>
	)
}

export default NumericInput