website refactor

apps/website/ui/Input.tsx

@@ -5,21 +5,26 @@ import { Text } from './Text';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   label?: string;
   error?: string;
+  errorMessage?: string;
   hint?: string;
   fullWidth?: boolean;
   size?: 'sm' | 'md' | 'lg';
   icon?: React.ReactNode;
+  variant?: 'default' | 'error';
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(({ 
   label, 
   error, 
+  errorMessage,
   hint, 
   fullWidth = false,
   size = 'md',
   icon,
+  variant = 'default',
   ...props 
 }, ref) => {
+  const finalError = error || errorMessage;
   const sizeClasses = {
     sm: 'px-3 py-1.5 text-xs',
     md: 'px-4 py-2 text-sm',
@@ -27,7 +32,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
   };
 
   const baseClasses = 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-[var(--ui-color-text-high)] placeholder-[var(--ui-color-text-low)] focus:outline-none focus:border-[var(--ui-color-intent-primary)] transition-colors';
-  const errorClasses = error ? 'border-[var(--ui-color-intent-critical)]' : '';
+  const errorClasses = (finalError || variant === 'error') ? 'border-[var(--ui-color-intent-critical)]' : '';
   const widthClasses = fullWidth ? 'w-full' : '';
 
   const classes = [
@@ -59,14 +64,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
           {...props}
         />
       </Box>
-      {error && (
+      {finalError && (
         <Box marginTop={1}>
           <Text size="xs" variant="critical">
-            {error}
+            {finalError}
           </Text>
         </Box>
       )}
-      {hint && !error && (
+      {hint && !finalError && (
         <Box marginTop={1}>
           <Text size="xs" variant="low">
             {hint}