website refactor

apps/website/ui/Input.tsx

@@ -1,59 +1,70 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { forwardRef, InputHTMLAttributes } from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   label?: string;
-  icon?: ReactNode;
-  errorMessage?: string;
-  variant?: 'default' | 'error';
+  error?: string;
+  hint?: string;
+  fullWidth?: boolean;
+  size?: 'sm' | 'md' | 'lg';
 }
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ label, icon, errorMessage, variant = 'default', className = '', ...props }, ref) => {
-    const isError = variant === 'error' || !!errorMessage;
-    
-    const baseClasses = 'w-full px-4 py-2 bg-deep-graphite border rounded-lg text-white placeholder:text-gray-500 focus:outline-none transition-all duration-150 sm:text-sm';
-    const variantClasses = isError 
-      ? 'border-warning-amber focus:border-warning-amber focus:ring-1 focus:ring-warning-amber' 
-      : 'border-charcoal-outline focus:border-primary-blue focus:ring-1 focus:ring-primary-blue';
-    
-    const classes = `${baseClasses} ${variantClasses} ${icon ? 'pl-11' : ''} ${className}`;
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ 
+  label, 
+  error, 
+  hint, 
+  fullWidth = false,
+  size = 'md',
+  ...props 
+}, ref) => {
+  const sizeClasses = {
+    sm: 'px-3 py-1.5 text-xs',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-4 py-3 text-base'
+  };
 
-    return (
-      <Stack gap={1.5} fullWidth>
-        {label && (
-          <Text as="label" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+  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 widthClasses = fullWidth ? 'w-full' : '';
+
+  const classes = [
+    baseClasses,
+    sizeClasses[size],
+    errorClasses,
+    widthClasses,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <Box width={fullWidth ? '100%' : undefined}>
+      {label && (
+        <Box marginBottom={1.5}>
+          <Text as="label" size="xs" weight="bold" variant="low">
             {label}
           </Text>
-        )}
-        <Box fullWidth position="relative">
-          {icon && (
-            <Box 
-              position="absolute" 
-              left={0} 
-              top="50%" 
-              translateY="-50%" 
-              zIndex={10} 
-              w="11" 
-              display="flex" 
-              center 
-              color="text-gray-500"
-            >
-              {icon}
-            </Box>
-          )}
-          <input ref={ref} className={classes} {...props} />
-          {errorMessage && (
-            <Text size="xs" color="text-warning-amber" mt={1}>
-              {errorMessage}
-            </Text>
-          )}
         </Box>
-      </Stack>
-    );
-  }
-);
+      )}
+      <input
+        ref={ref}
+        className={classes}
+        {...props}
+      />
+      {error && (
+        <Box marginTop={1}>
+          <Text size="xs" variant="critical">
+            {error}
+          </Text>
+        </Box>
+      )}
+      {hint && !error && (
+        <Box marginTop={1}>
+          <Text size="xs" variant="low">
+            {hint}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+});
 
 Input.displayName = 'Input';