website refactor

apps/website/ui/Stack.tsx

@@ -0,0 +1,55 @@
+import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
+import { Box, BoxProps, ResponsiveValue } from './Box';
+
+/**
+ * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
+ * 
+ * Stack is for flexbox-based layouts (stacking elements).
+ * 
+ * - DO NOT add positioning props (absolute, top, zIndex).
+ * - DO NOT add grid props.
+ * - DO NOT add background/border props unless it's a specific styled stack.
+ * 
+ * If you need a more specific layout, create a new component in apps/website/components.
+ */
+
+export interface StackProps<T extends ElementType> extends BoxProps<T> {
+  as?: T;
+  children?: ReactNode;
+  direction?: 'row' | 'col' | ResponsiveValue<'row' | 'col'>;
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | ResponsiveValue<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | ResponsiveValue<'start' | 'center' | 'end' | 'between' | 'around'>;
+  wrap?: boolean;
+}
+
+export const Stack = forwardRef(<T extends ElementType = 'div'>(
+  { 
+    children, 
+    direction = 'col',
+    gap = 4,
+    align,
+    justify,
+    wrap = false,
+    as,
+    ...props
+  }: StackProps<T>,
+  ref: ForwardedRef<HTMLElement>
+) => {
+  return (
+    <Box 
+      as={as} 
+      ref={ref}
+      display="flex"
+      flexDirection={direction}
+      gap={gap}
+      alignItems={align}
+      justifyContent={justify}
+      flexWrap={wrap ? 'wrap' : 'nowrap'}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+});
+
+Stack.displayName = 'Stack';