MattrixwvReactComponents/lib/component/input/number/NumberInput.tsx

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>
	);
}