website refactor

apps/website/ui/primitives/Stack.tsx

@@ -0,0 +1,167 @@
+import React, { ReactNode, ElementType } from 'react';
+import { Box, BoxProps, ResponsiveValue } 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 ResponsiveGap {
+  base?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+}
+
+interface ResponsiveSpacing {
+  base?: Spacing;
+  sm?: Spacing;
+  md?: Spacing;
+  lg?: Spacing;
+  xl?: Spacing;
+  '2xl'?: Spacing;
+}
+
+export interface StackProps<T extends ElementType> extends Omit<BoxProps<T>, 'children' | 'className' | 'gap'> {
+  children: ReactNode;
+  className?: string;
+  direction?: 'row' | 'col' | { base?: 'row' | 'col'; md?: 'row' | 'col'; lg?: 'row' | 'col' };
+  gap?: number | ResponsiveGap;
+  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;
+  center?: boolean;
+  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;
+  'aria-label'?: string;
+  'aria-live'?: 'polite' | 'assertive' | 'off';
+}
+
+export function Stack<T extends ElementType = 'div'>({ 
+  children, 
+  className = '', 
+  direction = 'col',
+  gap = 4,
+  align,
+  justify,
+  wrap = false,
+  center = false,
+  m, mt, mb, ml, mr,
+  p, pt, pb, pl, pr, px, py,
+  rounded,
+  as,
+  ...props
+}: 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',
+    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> = {
+    0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
+    5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
+    16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
+    48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
+  };
+
+  const roundedClasses = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+    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' 
+      ? (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',
+    wrap ? 'flex-wrap' : '',
+    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(' ');
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { alignItems, justifyContent, ...restProps } = props as any;
+
+  return (
+    <Box 
+      as={as} 
+      className={classes} 
+      alignItems={center ? 'center' : (align || alignItems)} 
+      justifyContent={center ? 'center' : (justify || justifyContent)} 
+      {...restProps}
+    >
+      {children}
+    </Box>
+  );
+}