website refactor

apps/website/ui/Select.tsx

@@ -1,64 +1,90 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { forwardRef, SelectHTMLAttributes } from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
 
-interface SelectOption {
-  value: string;
+export interface SelectOption {
+  value: string | number;
   label: string;
 }
 
-interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   label?: string;
+  options: SelectOption[];
+  error?: string;
+  hint?: string;
   fullWidth?: boolean;
-  pl?: number;
-  errorMessage?: string;
-  variant?: 'default' | 'error';
-  options?: SelectOption[];
+  size?: 'sm' | 'md' | 'lg';
 }
 
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ label, fullWidth = true, pl, errorMessage, variant = 'default', options, children, className = '', style, ...props }, ref) => {
-    const isError = variant === 'error' || !!errorMessage;
-    
-    const variantClasses = isError 
-      ? 'border-warning-amber focus:border-warning-amber' 
-      : 'border-charcoal-outline focus:border-primary-blue';
-    
-    const defaultClasses = `${fullWidth ? 'w-full' : 'w-auto'} px-3 py-2 bg-deep-graphite border rounded-lg text-white focus:outline-none transition-colors`;
-    const classes = [
-      defaultClasses,
-      variantClasses,
-      pl ? `pl-${pl}` : '',
-      className
-    ].filter(Boolean).join(' ');
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(({ 
+  label, 
+  options,
+  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={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)] focus:outline-none focus:border-[var(--ui-color-intent-primary)] transition-colors appearance-none';
+  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 
-          as="select" 
-          ref={ref} 
-          className={classes} 
-          style={style} 
+        </Box>
+      )}
+      <div className="relative">
+        <select
+          ref={ref}
+          className={classes}
           {...props}
         >
-          {options ? options.map(opt => (
-            <option key={opt.value} value={opt.value}>{opt.label}</option>
-          )) : children}
-        </Box>
-        {errorMessage && (
-          <Text size="xs" color="text-warning-amber" mt={1}>
-            {errorMessage}
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
+          <svg className="w-4 h-4 text-[var(--ui-color-text-low)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </div>
+      {error && (
+        <Box marginTop={1}>
+          <Text size="xs" variant="critical">
+            {error}
           </Text>
-        )}
-      </Stack>
-    );
-  }
-);
+        </Box>
+      )}
+      {hint && !error && (
+        <Box marginTop={1}>
+          <Text size="xs" variant="low">
+            {hint}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+});
 
 Select.displayName = 'Select';