gridpilot.gg/apps/website/ui/Stack.tsx

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 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;
}

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';
  justify?: '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 = 'stretch',
  justify = 'start',
  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',
    center ? 'items-center justify-center' : `items-${align} justify-${justify}`,
    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(' ');

  return <Box as={as} className={classes} {...props}>{children}</Box>;
}