website refactor

apps/website/ui/Stack.tsx

@@ -1,13 +1,21 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { ReactNode, ElementType } from 'react';
 import { Box, BoxProps } from './Box';
 
 type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
 
-interface StackProps extends Omit<BoxProps<'div'>, 'children' | 'className' | 'gap'> {
+interface ResponsiveGap {
+  base?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+}
+
+interface StackProps<T extends ElementType> extends Omit<BoxProps<T>, 'children' | 'className' | 'gap'> {
   children: ReactNode;
   className?: string;
-  direction?: 'row' | 'col';
-  gap?: number;
+  direction?: 'row' | 'col' | { base?: 'row' | 'col'; md?: 'row' | 'col'; lg?: 'row' | 'col' };
+  gap?: number | ResponsiveGap;
   align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
   justify?: 'start' | 'center' | 'end' | 'between' | 'around';
   wrap?: boolean;
@@ -26,9 +34,12 @@ interface StackProps extends Omit<BoxProps<'div'>, 'children' | 'className' | 'g
   py?: Spacing | any;
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
   style?: React.CSSProperties;
+  role?: string;
+  'aria-label'?: string;
+  'aria-live'?: 'polite' | 'assertive' | 'off';
 }
 
-export function Stack({ 
+export function Stack<T extends ElementType = 'div'>({ 
   children, 
   className = '', 
   direction = 'col',
@@ -40,17 +51,35 @@ export function Stack({
   m, mt, mb, ml, mr,
   p, pt, pb, pl, pr, px, py,
   rounded,
+  as,
   ...props
-}: StackProps) {
+}: StackProps<T>) {
   const gapClasses: Record<number, string> = {
     0: 'gap-0',
     1: 'gap-1',
     2: 'gap-2',
     3: 'gap-3',
     4: 'gap-4',
+    5: 'gap-5',
     6: 'gap-6',
     8: 'gap-8',
-    12: 'gap-12'
+    10: 'gap-10',
+    12: 'gap-12',
+    16: 'gap-16'
+  };
+
+  const getGapClasses = (value: number | ResponsiveGap | undefined) => {
+    if (value === undefined) return '';
+    if (typeof value === 'object') {
+      const classes = [];
+      if (value.base !== undefined) classes.push(gapClasses[value.base]);
+      if (value.sm !== undefined) classes.push(`sm:${gapClasses[value.sm]}`);
+      if (value.md !== undefined) classes.push(`md:${gapClasses[value.md]}`);
+      if (value.lg !== undefined) classes.push(`lg:${gapClasses[value.lg]}`);
+      if (value.xl !== undefined) classes.push(`xl:${gapClasses[value.xl]}`);
+      return classes.join(' ');
+    }
+    return gapClasses[value];
   };
 
   const spacingMap: Record<number, string> = {
@@ -72,8 +101,14 @@ export function Stack({
 
   const classes = [
     'flex',
-    direction === 'col' ? 'flex-col' : 'flex-row',
-    gapClasses[gap] || 'gap-4',
+    typeof direction === 'string' 
+      ? (direction === 'col' ? 'flex-col' : 'flex-row')
+      : [
+          direction.base === 'col' ? 'flex-col' : (direction.base === 'row' ? 'flex-row' : ''),
+          direction.md === 'col' ? 'md:flex-col' : (direction.md === 'row' ? 'md:flex-row' : ''),
+          direction.lg === 'col' ? 'lg:flex-col' : (direction.lg === 'row' ? 'lg:flex-row' : ''),
+        ].filter(Boolean).join(' '),
+    getGapClasses(gap) || 'gap-4',
     center ? 'items-center justify-center' : `items-${align} justify-${justify}`,
     wrap ? 'flex-wrap' : '',
     m !== undefined ? `m-${spacingMap[m]}` : '',
@@ -92,5 +127,5 @@ export function Stack({
     className
   ].filter(Boolean).join(' ');
 
-  return <Box className={classes} {...props}>{children}</Box>;
+  return <Box as={as} className={classes} {...props}>{children}</Box>;
 }