website refactor

apps/website/ui/SimpleCheckbox.tsx

@@ -1,35 +1,31 @@
-import React from 'react';
+import React, { forwardRef, ChangeEvent } from 'react';
 import { Box } from './primitives/Box';
 
-interface CheckboxProps {
+export interface SimpleCheckboxProps {
   checked: boolean;
   onChange: (checked: boolean) => void;
   disabled?: boolean;
-  'aria-label'?: string;
 }
 
-/**
- * SimpleCheckbox
- * 
- * A checkbox without a label for use in tables.
- */
-export function SimpleCheckbox({ checked, onChange, disabled, 'aria-label': ariaLabel }: CheckboxProps) {
+export const SimpleCheckbox = forwardRef<HTMLInputElement, SimpleCheckboxProps>(({ 
+  checked, 
+  onChange, 
+  disabled = false 
+}, ref) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.checked);
+  };
+
   return (
-    <Box
-      as="input"
+    <input
+      ref={ref}
       type="checkbox"
       checked={checked}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}
+      onChange={handleChange}
       disabled={disabled}
-      w="4"
-      h="4"
-      bg="bg-deep-graphite"
-      border
-      borderColor="border-charcoal-outline"
-      rounded="sm"
-      aria-label={ariaLabel}
-      ring="primary-blue"
-      color="text-primary-blue"
+      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)] cursor-pointer disabled:cursor-not-allowed"
     />
   );
-}
+});
+
+SimpleCheckbox.displayName = 'SimpleCheckbox';