website refactor

apps/website/ui/Stepper.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Button } from './Button';
+
+export interface StepperProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  label?: string;
+  disabled?: boolean;
+}
+
+export const Stepper = ({ 
+  value, 
+  onChange, 
+  min = 1, 
+  max, 
+  label,
+  disabled = false 
+}: StepperProps) => {
+  return (
+    <Box display="flex" alignItems="center" gap={2}>
+      {label && <Text size="xs" variant="low" weight="bold" uppercase>{label}</Text>}
+      <Box display="flex" alignItems="center" gap={1}>
+        <Button 
+          variant="secondary" 
+          size="sm" 
+          onClick={() => onChange(value - 1)} 
+          disabled={disabled || value <= min}
+          style={{ width: '2rem', height: '2rem', padding: 0 }}
+        >
+          −
+        </Button>
+        <Box width={10} height={8} display="flex" alignItems="center" justifyContent="center" bg="var(--ui-color-bg-surface-muted)" style={{ border: '1px solid var(--ui-color-border-default)', borderRadius: 'var(--ui-radius-md)' }}>
+          <Text size="sm" weight="bold" variant="high">{value}</Text>
+        </Box>
+        <Button 
+          variant="secondary" 
+          size="sm" 
+          onClick={() => onChange(value + 1)} 
+          disabled={disabled || (max !== undefined && value >= max)}
+          style={{ width: '2rem', height: '2rem', padding: 0 }}
+        >
+          +
+        </Button>
+      </Box>
+    </Box>
+  );
+};