website refactor

apps/website/ui/Checkbox.tsx

@@ -1,33 +1,50 @@
-import React from 'react';
+import React, { forwardRef, ChangeEvent } from 'react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
 
-interface CheckboxProps {
+export interface CheckboxProps {
   label: string;
   checked: boolean;
   onChange: (checked: boolean) => void;
   disabled?: boolean;
+  error?: string;
 }
 
-export function Checkbox({ label, checked, onChange, disabled }: CheckboxProps) {
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ 
+  label, 
+  checked, 
+  onChange, 
+  disabled = false,
+  error
+}, ref) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.checked);
+  };
+
   return (
-    <Box as="label" display="flex" alignItems="center" gap={2} cursor={disabled ? 'not-allowed' : 'pointer'}>
-      <Box
-        as="input"
-        type="checkbox"
-        checked={checked}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}
-        disabled={disabled}
-        w="4"
-        h="4"
-        bg="bg-deep-graphite"
-        border
-        borderColor="border-charcoal-outline"
-        rounded="sm"
-        ring="primary-blue"
-        color="text-primary-blue"
-      />
-      <Text size="sm" color={disabled ? 'text-gray-500' : 'text-white'}>{label}</Text>
+    <Box>
+      <Box as="label" display="flex" alignItems="center" gap={2} style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}>
+        <input
+          ref={ref}
+          type="checkbox"
+          checked={checked}
+          onChange={handleChange}
+          disabled={disabled}
+          className="w-4 h-4 rounded-none border-[var(--ui-color-border-default)] bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-intent-primary)] focus:ring-[var(--ui-color-intent-primary)]"
+        />
+        <Text size="sm" variant={disabled ? 'low' : 'high'}>
+          {label}
+        </Text>
+      </Box>
+      {error && (
+        <Box marginTop={1}>
+          <Text size="xs" variant="critical">
+            {error}
+          </Text>
+        </Box>
+      )}
     </Box>
   );
-}
+});
+
+Checkbox.displayName = 'Checkbox';