Glass Input

1import * as React from 'react'
2 
3import { cn } from '@/lib/utils'
4 
5const GlassInput = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
6  ({ className, type, ...props }, ref) => {
7    return (
8      <input
9        type={type}
10        className={cn(
11          'flex h-10 w-full rounded-xl border border-border bg-glass px-3.5 py-2.5 text-sm text-foreground backdrop-blur-md placeholder:text-muted-foreground transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive',
12          className,
13        )}
14        ref={ref}
15        {...props}
16      />
17    )
18  },
19)
20GlassInput.displayName = 'GlassInput'
21 
22export { GlassInput }