website refactor

apps/website/components/media/MediaCard.tsx

@@ -2,7 +2,8 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
 import { Text } from '@/ui/Text';
 import { Image } from '@/ui/Image';
 import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
@@ -31,15 +32,14 @@ export function MediaCard({
   actions,
 }: MediaCardProps) {
   return (
-    <Box
+    <Stack
       as={motion.div}
       whileHover={{ y: -4 }}
       transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }} // Fast ease-out
       h="full"
+      gap={0}
     >
-      <Box
-        display="flex"
-        flexDirection="col"
+      <Card
         bg="bg-charcoal/40"
         border
         borderColor="border-charcoal-outline/30"
@@ -49,14 +49,15 @@ export function MediaCard({
         onClick={onClick}
         group
         h="full"
+        p={0}
       >
-        <Box position="relative" width="full" aspectRatio={aspectRatio}>
+        <Stack position="relative" w="full" aspectRatio={aspectRatio} gap={0}>
           {isLoading ? (
             <ImagePlaceholder variant="loading" aspectRatio={aspectRatio} rounded="none" />
           ) : error ? (
             <ImagePlaceholder variant="error" message={error} aspectRatio={aspectRatio} rounded="none" />
           ) : src ? (
-            <Box w="full" h="full" overflow="hidden">
+            <Stack w="full" h="full" overflow="hidden" gap={0}>
               <Image
                 src={src}
                 alt={alt}
@@ -64,29 +65,29 @@ export function MediaCard({
                 fullWidth
                 fullHeight
               />
-            </Box>
+            </Stack>
           ) : (
             <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
           )}
           
           {actions && (
-            <Box
+            <Stack
               position="absolute"
               top="2"
               right="2"
-              display="flex"
+              direction="row"
               gap={2}
               opacity={0}
               groupHoverOpacity={1}
               transition
             >
               {actions}
-            </Box>
+            </Stack>
           )}
-        </Box>
+        </Stack>
 
         {(title || subtitle) && (
-          <Box p={3} borderTop borderColor="border-charcoal-outline/20">
+          <Stack p={3} borderTop borderStyle="solid" borderColor="border-charcoal-outline/20" gap={0}>
             {title && (
               <Text block size="sm" weight="semibold" truncate color="text-white">
                 {title}
@@ -97,9 +98,9 @@ export function MediaCard({
                 {subtitle}
               </Text>
             )}
-          </Box>
+          </Stack>
         )}
-      </Box>
-    </Box>
+      </Card>
+    </Stack>
   );
 }

apps/website/components/media/MediaFiltersBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Search, Grid, List } from 'lucide-react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Input } from '@/ui/Input';
 import { IconButton } from '@/ui/IconButton';
 import { Select } from '@/ui/Select';
@@ -25,11 +25,10 @@ export function MediaFiltersBar({
   onViewModeChange,
 }: MediaFiltersBarProps) {
   return (
-    <Box
-      display="flex"
-      flexDirection={{ base: 'col', md: 'row' }}
-      alignItems={{ base: 'stretch', md: 'center' }}
-      justifyContent="between"
+    <Stack
+      direction={{ base: 'col', md: 'row' }}
+      align={{ base: 'stretch', md: 'center' }}
+      justify="between"
       gap={4}
       p={4}
       bg="bg-charcoal/20"
@@ -37,26 +36,26 @@ export function MediaFiltersBar({
       borderColor="border-charcoal-outline/20"
       rounded="xl"
     >
-      <Box display="flex" flexGrow={1} maxWidth={{ md: 'md' }}>
+      <Stack flexGrow={1} maxWidth={{ md: 'md' }} gap={0}>
         <Input
           placeholder="Search media assets..."
           value={searchQuery}
           onChange={(e) => onSearchChange(e.target.value)}
           icon={<Search size={18} />}
         />
-      </Box>
+      </Stack>
 
-      <Box display="flex" alignItems="center" gap={3}>
-        <Box w="40">
+      <Stack direction="row" align="center" gap={3}>
+        <Stack w="40" gap={0}>
           <Select
             value={category}
             onChange={(e) => onCategoryChange(e.target.value)}
             options={categories}
           />
-        </Box>
+        </Stack>
 
         {onViewModeChange && (
-          <Box display="flex" bg="bg-charcoal/40" p={1} rounded="lg" border borderColor="border-charcoal-outline/20">
+          <Stack direction="row" bg="bg-charcoal/40" p={1} rounded="lg" border borderColor="border-charcoal-outline/20" gap={0}>
             <IconButton
               icon={Grid}
               variant={viewMode === 'grid' ? 'primary' : 'ghost'}
@@ -73,9 +72,9 @@ export function MediaFiltersBar({
               color={viewMode === 'list' ? 'text-white' : 'text-gray-400'}
               backgroundColor={viewMode === 'list' ? 'bg-blue-600' : undefined}
             />
-          </Box>
+          </Stack>
         )}
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }

apps/website/components/media/MediaGrid.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box } from '@/ui/Box';
+import { Grid } from '@/ui/Grid';
 
 export interface MediaGridProps {
   children: React.ReactNode;
@@ -10,7 +10,7 @@ export interface MediaGridProps {
     lg?: number;
     xl?: number;
   };
-  gap?: 2 | 3 | 4 | 6 | 8;
+  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
 }
 
 export function MediaGrid({
@@ -19,16 +19,13 @@ export function MediaGrid({
   gap = 4,
 }: MediaGridProps) {
   return (
-    <Box
-      display="grid"
-      responsiveGridCols={{
-        base: columns.base,
-        md: columns.md,
-        lg: columns.lg,
-      }}
-      gap={gap}
+    <Grid
+      cols={(columns.base ?? 1) as any}
+      mdCols={columns.md as any}
+      lgCols={columns.lg as any}
+      gap={gap as any}
     >
       {children}
-    </Box>
+    </Grid>
   );
 }