website refactor

apps/website/ui/TextArea.tsx

@@ -1,49 +1,61 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, TextareaHTMLAttributes } from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
 
-interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   label?: string;
-  errorMessage?: string;
-  variant?: 'default' | 'error';
+  error?: string;
+  hint?: string;
   fullWidth?: boolean;
 }
 
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ label, errorMessage, variant = 'default', fullWidth = true, className = '', ...props }, ref) => {
-    const isError = variant === 'error' || !!errorMessage;
-    
-    return (
-      <Stack gap={1.5} fullWidth={fullWidth}>
-        {label && (
-          <Text as="label" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ 
+  label, 
+  error, 
+  hint, 
+  fullWidth = false,
+  ...props 
+}, ref) => {
+  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 p-3 text-sm min-h-[100px]';
+  const errorClasses = error ? 'border-[var(--ui-color-intent-critical)]' : '';
+  const widthClasses = fullWidth ? 'w-full' : '';
+
+  const classes = [
+    baseClasses,
+    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 position="relative" fullWidth={fullWidth}>
-          <Box
-            as="textarea"
-            ref={ref}
-            fullWidth={fullWidth}
-            p={3}
-            bg="bg-deep-graphite"
-            rounded="lg"
-            color="text-white"
-            border
-            borderColor={isError ? 'var(--warning-amber)' : 'rgba(38, 38, 38, 0.8)'}
-            className={`placeholder:text-gray-500 focus:ring-2 focus:ring-primary-blue transition-all duration-150 sm:text-sm ${className}`}
-            {...props}
-          />
-          {errorMessage && (
-            <Text size="xs" color="text-warning-amber" mt={1}>
-              {errorMessage}
-            </Text>
-          )}
         </Box>
-      </Stack>
-    );
-  }
-);
+      )}
+      <textarea
+        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>
+  );
+});
 
 TextArea.displayName = 'TextArea';