website refactor

apps/website/ui/PasswordField.tsx

@@ -1,5 +1,4 @@
 import { Eye, EyeOff } from 'lucide-react';
-import { useState } from 'react';
 import { Box } from './Box';
 import { IconButton } from './IconButton';
 import { Input, InputProps } from './Input';
@@ -9,27 +8,19 @@ export interface PasswordFieldProps extends InputProps {
   onTogglePassword?: () => void;
 }
 
+/**
+ * PasswordField
+ * 
+ * Stateless UI primitive for password inputs.
+ * For stateful behavior, manage showPassword state in the parent component/template.
+ */
 export const PasswordField = ({ 
-  showPassword: controlledShowPassword, 
+  showPassword = false, 
   onTogglePassword,
   ...props 
 }: PasswordFieldProps) => {
-  const [internalShowPassword, setInternalShowPassword] = useState(false);
-  
-  const isControlled = controlledShowPassword !== undefined;
-  const showPassword = isControlled ? controlledShowPassword : internalShowPassword;
-
-  const handleToggle = () => {
-    if (onTogglePassword) {
-      onTogglePassword();
-    }
-    if (!isControlled) {
-      setInternalShowPassword(!internalShowPassword);
-    }
-  };
-
   return (
-    <Box position="relative">
+    <Box position="relative" fullWidth>
       <Input
         {...props}
         type={showPassword ? 'text' : 'password'}
@@ -43,7 +34,7 @@ export const PasswordField = ({
       >
         <IconButton
           icon={showPassword ? EyeOff : Eye}
-          onClick={handleToggle}
+          onClick={onTogglePassword}
           variant="ghost"
           size="sm"
           title={showPassword ? 'Hide password' : 'Show password'}