website refactor

apps/website/ui/PasswordField.tsx

@@ -0,0 +1,42 @@
+import React, { ComponentProps } from 'react';
+import { Eye, EyeOff, Lock } from 'lucide-react';
+import { Input } from './Input';
+import { Box } from './Box';
+
+interface PasswordFieldProps extends ComponentProps<typeof Input> {
+  showPassword?: boolean;
+  onTogglePassword?: () => void;
+}
+
+/**
+ * PasswordField
+ * 
+ * A specialized input for passwords with visibility toggling.
+ * Stateless UI component.
+ */
+export function PasswordField({ showPassword, onTogglePassword, ...props }: PasswordFieldProps) {
+  return (
+    <Box position="relative" fullWidth>
+      <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>
+  );
+}