website refactor

apps/website/ui/PasswordField.tsx

@@ -1,42 +1,35 @@
-import React, { ComponentProps } from 'react';
-import { Eye, EyeOff, Lock } from 'lucide-react';
-import { Input } from './Input';
+import React, { useState } from 'react';
+import { Input, InputProps } from './Input';
+import { Eye, EyeOff } from 'lucide-react';
+import { IconButton } from './IconButton';
 import { Box } from './primitives/Box';
 
-interface PasswordFieldProps extends ComponentProps<typeof Input> {
-  showPassword?: boolean;
-  onTogglePassword?: () => void;
-}
+export interface PasswordFieldProps extends InputProps {}
+
+export const PasswordField = (props: PasswordFieldProps) => {
+  const [showPassword, setShowPassword] = useState(false);
 
-/**
- * PasswordField
- * 
- * A specialized input for passwords with visibility toggling.
- * Stateless UI component.
- */
-export function PasswordField({ showPassword, onTogglePassword, ...props }: PasswordFieldProps) {
   return (
-    <Box position="relative" fullWidth>
+    <Box position="relative">
       <Input
         {...props}
         type={showPassword ? 'text' : 'password'}
-        icon={<Lock size={16} />}
       />
-      {onTogglePassword && (
-        <Box
-          as="button"
-          type="button"
-          onClick={onTogglePassword}
-          position="absolute"
-          right="3"
-          top={props.label ? "34px" : "50%"}
-          style={props.label ? {} : { transform: 'translateY(-50%)' }}
-          zIndex={10}
-          className="text-gray-500 hover:text-gray-300 transition-colors"
-        >
-          {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-        </Box>
-      )}
+      <Box 
+        position="absolute" 
+        right="0.5rem" 
+        top="50%" 
+        style={{ transform: 'translateY(-50%)' }}
+        zIndex={10}
+      >
+        <IconButton
+          icon={showPassword ? EyeOff : Eye}
+          onClick={() => setShowPassword(!showPassword)}
+          variant="ghost"
+          size="sm"
+          title={showPassword ? 'Hide password' : 'Show password'}
+        />
+      </Box>
     </Box>
   );
-}
+};