Input

1"use client"
2 
3import * as React from "react"
4import { Input as BaseInput } from "@/components/ui/input"
5import { cn } from "@/lib/utils"
6import type { GlassCustomization } from "@/lib/glass-utils"
7import { hoverEffects, type HoverEffect } from "@/lib/hover-effects"
8 
9export interface InputProps extends Omit<React.ComponentProps<typeof BaseInput>, "glass"> {
10  icon?: React.ReactNode
11  error?: boolean
12  hover?: HoverEffect
13  glass?: GlassCustomization
14}
15 
16/**
17 * Glass UI Input - A beautifully designed input component with glassy effects
18 * Built on top of the base Input component with enhanced visual styling
19 * 
20 * @example
21 * ```tsx
22 * <Input 
23 *   glass={{
24 *     color: "rgba(255, 255, 255, 0.15)",
25 *     blur: 15,
26 *     outline: "rgba(255, 255, 255, 0.3)"
27 *   }}
28 *   placeholder="Enter text..."
29 * />
30 * ```
31 */
32export const Input = React.forwardRef<HTMLInputElement, InputProps>(
33  ({ className, variant = "glass", icon, error, hover = "none", glass, ...props }, ref) => {
34    return (
35      <div className="relative">
36        {icon && (
37          <div className="absolute left-3 top-1/2 -translate-y-1/2 z-10 text-muted-foreground pointer-events-none">
38            {icon}
39          </div>
40        )}
41        <BaseInput
42          ref={ref}
43          variant={variant}
44          glass={glass}
45          className={cn(
46            "relative overflow-hidden",
47            icon && "pl-10",
48            error && "border-destructive focus-visible:ring-destructive",
49            "transition-all duration-200 focus-visible:scale-[1.02]",
50            hoverEffects({ hover }),
51            className
52          )}
53          {...props}
54        />
55      </div>
56    )
57  }
58)
59Input.displayName = "Input"
60