website refactor

apps/website/ui/Input.tsx

@@ -1,77 +1,100 @@
 import React, { forwardRef, InputHTMLAttributes } from 'react';
 import { Box } from './Box';
+import { Icon } from './Icon';
 import { Text } from './Text';
+import { LucideIcon } from 'lucide-react';
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  icon?: LucideIcon | React.ReactNode;
+  rightElement?: React.ReactNode;
+  variant?: 'default' | 'ghost' | 'search' | 'error';
+  fullWidth?: boolean;
   label?: string;
   error?: string;
-  errorMessage?: string;
+  errorMessage?: string; // Alias for error
   hint?: string;
-  fullWidth?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-  icon?: React.ReactNode;
-  variant?: 'default' | 'error';
+  size?: string | number; // Allow size prop
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(({ 
-  label, 
-  error, 
-  errorMessage,
-  hint, 
+  icon, 
+  rightElement, 
+  variant = 'default', 
   fullWidth = false,
-  size = 'md',
-  icon,
-  variant = 'default',
+  className,
+  label,
+  error,
+  errorMessage,
+  hint,
+  id,
+  size,
   ...props 
 }, ref) => {
-  const finalError = error || errorMessage;
-  const sizeClasses = {
-    sm: 'px-3 py-1.5 text-xs',
-    md: 'px-4 py-2 text-sm',
-    lg: 'px-4 py-3 text-base'
+  const variantClasses = {
+    default: 'bg-surface-charcoal border border-outline-steel focus:border-primary-accent',
+    ghost: 'bg-transparent border-none',
+    search: 'bg-surface-charcoal/50 border border-outline-steel focus:border-primary-accent hover:border-text-low/50',
+    error: 'bg-surface-charcoal border border-critical-red focus:border-critical-red',
   };
 
-  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 = (finalError || variant === 'error') ? 'border-[var(--ui-color-intent-critical)]' : '';
-  const widthClasses = fullWidth ? 'w-full' : '';
-
-  const classes = [
-    baseClasses,
-    sizeClasses[size],
-    errorClasses,
-    widthClasses,
-    icon ? 'pl-10' : '',
-  ].filter(Boolean).join(' ');
+  const inputId = id || (label ? `input-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined);
+  const displayError = error || errorMessage;
 
   return (
-    <Box width={fullWidth ? '100%' : undefined}>
+    <Box width={fullWidth ? 'full' : 'auto'}>
       {label && (
         <Box marginBottom={1.5}>
-          <Text as="label" size="xs" weight="bold" variant="low">
+          <Text 
+            as="label" 
+            htmlFor={inputId} 
+            size="sm" 
+            weight="medium" 
+            variant="high"
+          >
             {label}
           </Text>
         </Box>
       )}
-      <Box position="relative">
+      
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        gap={3}
+        paddingX={3}
+        height="9" // h-9
+        rounded="md"
+        width="full"
+        className={`transition-all duration-200 group ${variantClasses[variant]}`}
+      >
         {icon && (
-          <Box position="absolute" left={3} top="50%" style={{ transform: 'translateY(-50%)' }}>
-            {icon}
-          </Box>
+          React.isValidElement(icon) ? icon : (
+            <Icon 
+              icon={icon as LucideIcon} 
+              size={3.5} 
+              className="text-text-low group-focus-within:text-text-high transition-colors" 
+            />
+          )
         )}
+        
         <input
           ref={ref}
-          className={classes}
+          id={inputId}
+          className="bg-transparent border-none outline-none text-sm w-full text-text-high placeholder:text-text-low/50 h-full"
           {...props}
         />
+
+        {rightElement}
       </Box>
-      {finalError && (
+
+      {displayError && (
         <Box marginTop={1}>
           <Text size="xs" variant="critical">
-            {finalError}
+            {displayError}
           </Text>
         </Box>
       )}
-      {hint && !finalError && (
+      
+      {hint && !displayError && (
         <Box marginTop={1}>
           <Text size="xs" variant="low">
             {hint}