website refactor

apps/website/ui/Toggle.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
-import { motion } from 'framer-motion';
 
-interface ToggleProps {
+export interface ToggleProps {
   label: string;
   description?: string;
   checked: boolean;
@@ -11,64 +10,49 @@ interface ToggleProps {
   disabled?: boolean;
 }
 
-export function Toggle({ label, description, checked, onChange, disabled }: ToggleProps) {
+export const Toggle = ({ 
+  label, 
+  description, 
+  checked, 
+  onChange, 
+  disabled = false 
+}: ToggleProps) => {
   return (
     <Box 
       as="label" 
       display="flex" 
-      alignItems="start" 
+      alignItems="center" 
       justifyContent="between" 
-      cursor={disabled ? 'not-allowed' : 'pointer'} 
-      py={3} 
+      paddingY={3} 
       borderBottom 
-      borderColor="border-charcoal-outline/50"
-      className="last:border-b-0"
-      opacity={disabled ? 0.5 : 1}
+      style={{ cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1 }}
     >
-      <Box flex={1} pr={4}>
-        <Text weight="medium" color="text-gray-200" block>{label}</Text>
+      <Box flex={1} paddingRight={4}>
+        <Text weight="medium" variant="high" block>{label}</Text>
         {description && (
-          <Text size="xs" color="text-gray-500" block mt={1}>
+          <Text size="xs" variant="low" block marginTop={1}>
             {description}
           </Text>
         )}
       </Box>
       
-      <Box position="relative">
-        <Box
-          as="button"
-          type="button"
-          role="switch"
-          aria-checked={checked}
-          onClick={() => !disabled && onChange(!checked)}
-          disabled={disabled}
-          w="12"
-          h="6"
-          rounded="full"
-          transition="all 0.2s"
-          flexShrink={0}
-          ring="primary-blue/50"
-          bg={checked ? 'bg-primary-blue/20' : 'bg-charcoal-outline'}
-          className="focus:outline-none focus:ring-2"
-        >
-          <motion.div
-            className="absolute inset-0 rounded-full bg-primary-blue"
-            initial={{ boxShadow: '0 0 0px rgba(25, 140, 255, 0)' }}
-            animate={{ 
-              opacity: checked ? 1 : 0,
-              boxShadow: checked ? '0 0 10px rgba(25, 140, 255, 0.4)' : '0 0 0px rgba(25, 140, 255, 0)'
-            }}
-          />
-        </Box>
-        <motion.span
-          className="absolute top-0.5 w-5 h-5 bg-white rounded-full shadow-md"
-          initial={false}
-          animate={{ 
-            left: checked ? '26px' : '2px',
-          }}
-          transition={{ type: "spring", stiffness: 500, damping: 30 }}
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        onClick={() => !disabled && onChange(!checked)}
+        disabled={disabled}
+        className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+          checked ? 'bg-[var(--ui-color-intent-primary)]' : 'bg-[var(--ui-color-bg-surface-muted)]'
+        }`}
+      >
+        <span
+          aria-hidden="true"
+          className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+            checked ? 'translate-x-5' : 'translate-x-0'
+          }`}
         />
-      </Box>
+      </button>
     </Box>
   );
-}
+};