InputWithAddons.tsx41 lines · main

1	import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
2	import { cn } from 'ui'
3
4	export interface InputWithAddonsProps extends InputHTMLAttributes<HTMLInputElement> {
5	leading?: ReactNode
6	trailing?: ReactNode
7	containerClassName?: string
8	}
9
10	export const InputWithAddons = forwardRef<HTMLInputElement, InputWithAddonsProps>(
11	({ leading, trailing, containerClassName, className, ...props }, ref) => {
12	return (
13	<div
14	className={cn(
15	'group border-input ring-offset-background flex h-10 w-full rounded-sm border bg-transparent text-sm overflow-hidden',
16	'focus-within:ring-ring focus-within:outline-hidden focus-within:ring-2 focus-within:ring-offset-2',
17	containerClassName
18	)}
19	>
20	{leading ? (
21	<div className="border-input px-2 flex items-center justify-center">{leading}</div>
22	) : null}
23	<input
24	className={cn(
25	'bg-transparent w-full px-0 py-2 focus:outline-hidden border-0 placeholder:text-foreground-lighter ',
26	'disabled:cursor-not-allowed disabled:opacity-50 text-[0.75rem]',
27	className
28	)}
29	ref={ref}
30	{...props}
31	/>
32	{trailing ? (
33	<div className="border-input bg-muted/50 border-l px-3 py-2 flex items-center justify-center">
34	{trailing}
35	</div>
36	) : null}
37	</div>
38	)
39	}
40	)
41	InputWithAddons.displayName = 'InputWithAddons'