feat(components): add password visibility toggle to Input

components/ui/icons.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { Eye, EyeOff } from 'lucide-react'
+
 import { cn } from '@/lib/utils'
 
 function IconLogo({ className, ...props }: React.ComponentProps<'svg'>) {
@@ -19,4 +21,7 @@ function IconLogo({ className, ...props }: React.ComponentProps<'svg'>) {
   )
 }
 
-export { IconLogo }
+const IconEye = Eye
+const IconEyeOff = EyeOff
+
+export { IconEye, IconEyeOff, IconLogo }

components/ui/input.tsx

@@ -1,22 +1,51 @@
 import * as React from 'react'
+import { useState } from 'react'
 
 import { cn } from '@/lib/utils/index'
 
+import { IconEye, IconEyeOff } from '@/components/ui/icons'
+
+import { Button } from './button'
+
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false)
+    const inputType = type === 'password' && showPassword ? 'text' : type
+
+    const togglePasswordVisibility = () => {
+      setShowPassword(!showPassword)
+    }
+
     return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className
+      <div className="relative">
+        <input
+          type={inputType}
+          className={cn(
+            'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        {type === 'password' && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+            onClick={togglePasswordVisibility}
+          >
+            {showPassword ? (
+              <IconEyeOff className="h-4 w-4" />
+            ) : (
+              <IconEye className="h-4 w-4" />
+            )}
+          </Button>
         )}
-        ref={ref}
-        {...props}
-      />
+      </div>
     )
   }
 )