website refactor

apps/website/ui/Stack.tsx

@@ -11,6 +11,15 @@ interface ResponsiveGap {
   xl?: number;
 }
 
+interface ResponsiveSpacing {
+  base?: Spacing;
+  sm?: Spacing;
+  md?: Spacing;
+  lg?: Spacing;
+  xl?: Spacing;
+  '2xl'?: Spacing;
+}
+
 interface StackProps<T extends ElementType> extends Omit<BoxProps<T>, 'children' | 'className' | 'gap'> {
   children: ReactNode;
   className?: string;
@@ -20,18 +29,18 @@ interface StackProps<T extends ElementType> extends Omit<BoxProps<T>, 'children'
   justify?: 'start' | 'center' | 'end' | 'between' | 'around';
   wrap?: boolean;
   center?: boolean;
-  m?: Spacing | any;
-  mt?: Spacing | any;
-  mb?: Spacing | any;
-  ml?: Spacing | any;
-  mr?: Spacing | any;
-  p?: Spacing | any;
-  pt?: Spacing | any;
-  pb?: Spacing | any;
-  pl?: Spacing | any;
-  pr?: Spacing | any;
-  px?: Spacing | any;
-  py?: Spacing | any;
+  m?: Spacing | ResponsiveSpacing;
+  mt?: Spacing | ResponsiveSpacing;
+  mb?: Spacing | ResponsiveSpacing;
+  ml?: Spacing | ResponsiveSpacing;
+  mr?: Spacing | ResponsiveSpacing;
+  p?: Spacing | ResponsiveSpacing;
+  pt?: Spacing | ResponsiveSpacing;
+  pb?: Spacing | ResponsiveSpacing;
+  pl?: Spacing | ResponsiveSpacing;
+  pr?: Spacing | ResponsiveSpacing;
+  px?: Spacing | ResponsiveSpacing;
+  py?: Spacing | ResponsiveSpacing;
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
   style?: React.CSSProperties;
   role?: string;
@@ -99,6 +108,21 @@ export function Stack<T extends ElementType = 'div'>({
     full: 'rounded-full'
   };
 
+  const getSpacingClass = (prefix: string, value: Spacing | ResponsiveSpacing | undefined) => {
+    if (value === undefined) return '';
+    if (typeof value === 'object') {
+      const classes = [];
+      if (value.base !== undefined) classes.push(`${prefix}-${spacingMap[value.base]}`);
+      if (value.sm !== undefined) classes.push(`sm:${prefix}-${spacingMap[value.sm]}`);
+      if (value.md !== undefined) classes.push(`md:${prefix}-${spacingMap[value.md]}`);
+      if (value.lg !== undefined) classes.push(`lg:${prefix}-${spacingMap[value.lg]}`);
+      if (value.xl !== undefined) classes.push(`xl:${prefix}-${spacingMap[value.xl]}`);
+      if (value['2xl'] !== undefined) classes.push(`2xl:${prefix}-${spacingMap[value['2xl']]}`);
+      return classes.join(' ');
+    }
+    return `${prefix}-${spacingMap[value]}`;
+  };
+
   const classes = [
     'flex',
     typeof direction === 'string' 
@@ -111,18 +135,18 @@ export function Stack<T extends ElementType = 'div'>({
     getGapClasses(gap) || 'gap-4',
     center ? 'items-center justify-center' : `items-${align} justify-${justify}`,
     wrap ? 'flex-wrap' : '',
-    m !== undefined ? `m-${spacingMap[m]}` : '',
-    mt !== undefined ? `mt-${spacingMap[mt]}` : '',
-    mb !== undefined ? `mb-${spacingMap[mb]}` : '',
-    ml !== undefined ? `ml-${spacingMap[ml]}` : '',
-    mr !== undefined ? `mr-${spacingMap[mr]}` : '',
-    p !== undefined ? `p-${spacingMap[p]}` : '',
-    pt !== undefined ? `pt-${spacingMap[pt]}` : '',
-    pb !== undefined ? `pb-${spacingMap[pb]}` : '',
-    pl !== undefined ? `pl-${spacingMap[pl]}` : '',
-    pr !== undefined ? `pr-${spacingMap[pr]}` : '',
-    px !== undefined ? `px-${spacingMap[px]}` : '',
-    py !== undefined ? `py-${spacingMap[py]}` : '',
+    getSpacingClass('m', m),
+    getSpacingClass('mt', mt),
+    getSpacingClass('mb', mb),
+    getSpacingClass('ml', ml),
+    getSpacingClass('mr', mr),
+    getSpacingClass('p', p),
+    getSpacingClass('pt', pt),
+    getSpacingClass('pb', pb),
+    getSpacingClass('pl', pl),
+    getSpacingClass('pr', pr),
+    getSpacingClass('px', px),
+    getSpacingClass('py', py),
     rounded ? roundedClasses[rounded] : '',
     className
   ].filter(Boolean).join(' ');