🎨 Palette: Add password visibility toggle (#212)

* feat: add password visibility toggle to Input component

- Added Eye/EyeOff icons from lucide-react
- Implemented state to toggle input type
- Added proper aria-labels for accessibility
- Styled for both Neo and Glass themes

* fix: associate label with input using useId

- Addressed review comment to improve accessibility
- Used React.useId() to generate unique IDs for inputs
- Linked label and input via htmlFor/id attributes
- Preserved existing ID prop behavior

* fix: destructure id prop in Input component

- Destructure id from props to prevent override issues
- Ensure inputId is correctly determined from props or generated
- Clean up props spreading on input element

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

Author: google-labs-jules[bot]

.Jules/palette.md

@@ -0,0 +1 @@
+# Palette Journal

web/components/ui/Input.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useId } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 import { useTheme } from '../../contexts/ThemeContext';
 import { THEMES } from '../../constants';
 
@@ -7,8 +8,14 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   error?: string;
 }
 
-export const Input: React.FC<InputProps> = ({ label, error, className = '', ...props }) => {
+export const Input: React.FC<InputProps> = ({ label, error, className = '', type, id, ...props }) => {
   const { style, mode } = useTheme();
+  const [showPassword, setShowPassword] = useState(false);
+  const generatedId = useId();
+  const inputId = id || generatedId;
+
+  const isPassword = type === 'password';
+  const inputType = isPassword ? (showPassword ? 'text' : 'password') : type;
 
   let inputStyles = "w-full outline-none transition-all duration-200";
 
@@ -18,10 +25,35 @@ export const Input: React.FC<InputProps> = ({ label, error, className = '', ...p
     inputStyles += ` p-3 rounded-lg border border-white/20 bg-white/5 backdrop-blur-sm focus:bg-white/10 focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 ${mode === 'dark' ? 'text-white placeholder-white/40' : 'text-gray-900 placeholder-gray-500'}`;
   }
 
+  if (isPassword) {
+    inputStyles += " pr-10";
+  }
+
   return (
     <div className="flex flex-col gap-1 w-full">
-      {label && <label className={`text-sm font-semibold ${style === THEMES.NEOBRUTALISM ? 'uppercase' : 'ml-1 opacity-80'}`}>{label}</label>}
-      <input className={`${inputStyles} ${className}`} {...props} />
+      {label && <label htmlFor={inputId} className={`text-sm font-semibold ${style === THEMES.NEOBRUTALISM ? 'uppercase' : 'ml-1 opacity-80'}`}>{label}</label>}
+      <div className="relative">
+        <input
+          id={inputId}
+          type={inputType}
+          className={`${inputStyles} ${className}`}
+          {...props}
+        />
+        {isPassword && (
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className={`absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-md transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-1 ${
+              style === THEMES.NEOBRUTALISM
+                ? (mode === 'dark' ? 'text-white opacity-80 focus:ring-white' : 'text-black opacity-60 focus:ring-black')
+                : 'text-white/60 hover:text-white focus:ring-white/50'
+            }`}
+            aria-label={showPassword ? "Hide password" : "Show password"}
+          >
+            {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+          </button>
+        )}
+      </div>
       {error && <span className="text-red-500 text-xs font-bold mt-1">{error}</span>}
     </div>
   );