input

1import * as React from "react"
2import { Input as BaseInput } from "@base-ui/react/input"
3 
4import { cn } from "@/lib/utils"
5 
6interface InputProps extends React.ComponentProps<typeof BaseInput> {
7	inputContainerClassName?: string
8	leadingIcon?: React.ReactNode
9	trailingIcon?: React.ReactNode
10}
11 
12function Input({
13	inputContainerClassName,
14	className,
15	type,
16	leadingIcon,
17	trailingIcon,
18	disabled,
19	...props
20}: InputProps) {
21	return (
22		<div
23			className={cn(
24				"group relative w-full has-[[data-slot=input][data-disabled]]:pointer-events-none has-[[data-slot=input][data-disabled]]:opacity-50",
25				inputContainerClassName
26			)}
27			data-slot="input-container"
28		>
29			{leadingIcon && (
30				<span
31					data-slot="input-leading-icon"
32					className="text-muted-foreground absolute top-1/2 left-3 shrink-0 -translate-y-1/2 [&_svg]:shrink-0 [&_svg:not([class*='pointer-events-'])]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
33				>
34					{leadingIcon}
35				</span>
36			)}
37			<BaseInput
38				type={type}
39				data-slot="input"
40				className={cn(
41					"placeholder:text-muted-foreground selection:bg-primary group-hover:border-ring/70 selection:text-primary-foreground bg-input file:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/50 aria-invalid:border-destructive flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] md:text-sm",
42					leadingIcon && "pl-10",
43					trailingIcon && "pr-10",
44					className
45				)}
46				disabled={disabled}
47				{...props}
48			/>
49			{trailingIcon && (
50				<span
51					data-slot="input-trailing-icon"
52					className="text-muted-foreground absolute top-1/2 right-3 shrink-0 -translate-y-1/2 [&_svg]:shrink-0 [&_svg:not([class*='pointer-events-'])]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
53				>
54					{trailingIcon}
55				</span>
56			)}
57		</div>
58	)
59}
60 
61export { Input }