website refactor

apps/website/components/onboarding/AvatarStep.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Check, Loader2, Palette, Sparkles, Upload, User } from 'lucide-react';
 import { ChangeEvent, useRef } from 'react';

apps/website/components/onboarding/OnboardingCTA.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/primitives/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 
 interface OnboardingCTAProps {
   onBack?: () => void;
@@ -23,19 +23,16 @@ export function OnboardingCTA({
   type = 'button',
 }: OnboardingCTAProps) {
   return (
-    <Stack direction="row" justify="between" mt={8} gap={4}>
-      {onBack ? (
+    <ButtonGroup alignment={onBack ? 'between' : 'end'} marginTop={8}>
+      {onBack && (
         <Button
           type="button"
           variant="secondary"
           onClick={onBack}
           disabled={isLoading}
-          className="px-8"
         >
           {backLabel}
         </Button>
-      ) : (
-        <div />
       )}
 
       <Button
@@ -43,17 +40,10 @@ export function OnboardingCTA({
         variant="primary"
         onClick={onNext}
         disabled={isLoading || !canNext}
-        className="px-8 min-w-[140px]"
+        isLoading={isLoading}
       >
-        {isLoading ? (
-          <Stack direction="row" gap={2} align="center">
-            <span className="animate-spin">⟳</span>
-            <span>Processing...</span>
-          </Stack>
-        ) : (
-          isLastStep ? 'Complete Setup' : nextLabel
-        )}
+        {isLastStep ? 'Complete Setup' : nextLabel}
       </Button>
-    </Stack>
+    </ButtonGroup>
   );
 }

apps/website/components/onboarding/OnboardingError.tsx

@@ -1,4 +1,4 @@
-import { Box } from '../../ui/primitives/Box';
+import { Box } from '../../ui/Box';
 import { Text } from '../../ui/Text';
 
 interface OnboardingErrorProps {

apps/website/components/onboarding/OnboardingForm.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, ReactNode } from 'react';
-import { Box } from '../../ui/primitives/Box';
+import { Box } from '../../ui/Box';
 
 interface OnboardingFormProps {
   children: ReactNode;

apps/website/components/onboarding/OnboardingHelpPanel.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { HelpCircle } from 'lucide-react';
 

apps/website/components/onboarding/OnboardingNavigation.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/ui/Button';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 
 interface OnboardingNavigationProps {
   onBack: () => void;
@@ -10,16 +11,14 @@ interface OnboardingNavigationProps {
 
 export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, loading }: OnboardingNavigationProps) {
   return (
-    <div className="mt-8 flex items-center justify-between">
+    <ButtonGroup alignment="between" marginTop={8}>
       <Button
         type="button"
         variant="secondary"
         onClick={onBack}
         disabled={loading}
-        className="flex items-center gap-2"
       >
-        <span>←</span>
-        Back
+        ← Back
       </Button>
 
       {!isLastStep ? (
@@ -28,31 +27,19 @@ export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, lo
           variant="primary"
           onClick={onNext}
           disabled={loading}
-          className="flex items-center gap-2"
         >
-          Continue
-          <span>→</span>
+          Continue →
         </Button>
       ) : (
         <Button
           type="submit"
           variant="primary"
           disabled={loading || !canSubmit}
-          className="flex items-center gap-2"
+          isLoading={loading}
         >
-          {loading ? (
-            <>
-              <span className="animate-spin">⟳</span>
-              Creating Profile...
-            </>
-          ) : (
-            <>
-              <span>✓</span>
-              Complete Setup
-            </>
-          )}
+          {loading ? 'Creating Profile...' : '✓ Complete Setup'}
         </Button>
       )}
-    </div>
+    </ButtonGroup>
   );
 }

apps/website/components/onboarding/OnboardingPrimaryActions.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
 
 interface OnboardingPrimaryActionsProps {

apps/website/components/onboarding/OnboardingShell.tsx

@@ -1,5 +1,5 @@
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 
 interface OnboardingShellProps {
   children: React.ReactNode;

apps/website/components/onboarding/OnboardingStepHeader.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface OnboardingStepHeaderProps {

apps/website/components/onboarding/OnboardingStepPanel.tsx

@@ -1,5 +1,5 @@
 import { Panel } from '@/ui/Panel';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface OnboardingStepPanelProps {

apps/website/components/onboarding/OnboardingStepper.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { motion } from 'framer-motion';
 

apps/website/components/onboarding/PersonalInfoStep.tsx

@@ -1,8 +1,8 @@
 import { CountrySelect } from '@/components/shared/CountrySelect';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
-import { Grid } from '@/ui/primitives/Grid';
-import { Stack } from '@/ui/primitives/Stack';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { ChevronRight, Clock } from 'lucide-react';