website refactor

apps/website/ui/Text.tsx

@@ -3,19 +3,45 @@ 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;
 
+type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+
+interface ResponsiveTextSize {
+  base?: TextSize;
+  sm?: TextSize;
+  md?: TextSize;
+  lg?: TextSize;
+  xl?: TextSize;
+  '2xl'?: TextSize;
+}
+
+type TextAlign = 'left' | 'center' | 'right';
+
+interface ResponsiveTextAlign {
+  base?: TextAlign;
+  sm?: TextAlign;
+  md?: TextAlign;
+  lg?: TextAlign;
+  xl?: TextAlign;
+  '2xl'?: TextAlign;
+}
+
 interface TextProps<T extends ElementType = 'span'> extends Omit<BoxProps<T>, 'children' | 'className'> {
   as?: T;
   children: ReactNode;
   className?: string;
-  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  size?: TextSize | ResponsiveTextSize;
   weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
   color?: string;
   font?: 'mono' | 'sans';
-  align?: 'left' | 'center' | 'right';
+  align?: TextAlign | ResponsiveTextAlign;
   truncate?: boolean;
+  uppercase?: boolean;
+  letterSpacing?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | '0.05em';
   leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
+  fontSize?: string;
   style?: React.CSSProperties;
   block?: boolean;
+  italic?: boolean;
   ml?: Spacing | any;
   mr?: Spacing | any;
   mt?: Spacing | any;
@@ -32,9 +58,13 @@ export function Text<T extends ElementType = 'span'>({
   font = 'sans',
   align = 'left',
   truncate = false,
+  uppercase = false,
+  letterSpacing,
   leading,
+  fontSize,
   style,
   block = false,
+  italic = false,
   ml, mr, mt, mb,
   ...props
 }: TextProps<T> & ComponentPropsWithoutRef<T>) {
@@ -50,6 +80,21 @@ export function Text<T extends ElementType = 'span'>({
     '3xl': 'text-3xl',
     '4xl': 'text-4xl'
   };
+
+  const getSizeClasses = (value: TextSize | ResponsiveTextSize | undefined) => {
+    if (value === undefined) return '';
+    if (typeof value === 'object') {
+      const classes = [];
+      if (value.base) classes.push(sizeClasses[value.base]);
+      if (value.sm) classes.push(`sm:${sizeClasses[value.sm]}`);
+      if (value.md) classes.push(`md:${sizeClasses[value.md]}`);
+      if (value.lg) classes.push(`lg:${sizeClasses[value.lg]}`);
+      if (value.xl) classes.push(`xl:${sizeClasses[value.xl]}`);
+      if (value['2xl']) classes.push(`2xl:${sizeClasses[value['2xl']]}`);
+      return classes.join(' ');
+    }
+    return sizeClasses[value];
+  };
   
   const weightClasses: Record<string, string> = {
     light: 'font-light',
@@ -64,12 +109,27 @@ export function Text<T extends ElementType = 'span'>({
     sans: 'font-sans'
   };
   
-  const alignClasses = {
+  const alignClasses: Record<string, string> = {
     left: 'text-left',
     center: 'text-center',
     right: 'text-right'
   };
 
+  const getAlignClasses = (value: TextAlign | ResponsiveTextAlign | undefined) => {
+    if (value === undefined) return '';
+    if (typeof value === 'object') {
+      const classes = [];
+      if (value.base) classes.push(alignClasses[value.base]);
+      if (value.sm) classes.push(`sm:${alignClasses[value.sm]}`);
+      if (value.md) classes.push(`md:${alignClasses[value.md]}`);
+      if (value.lg) classes.push(`lg:${alignClasses[value.lg]}`);
+      if (value.xl) classes.push(`xl:${alignClasses[value.xl]}`);
+      if (value['2xl']) classes.push(`2xl:${alignClasses[value['2xl']]}`);
+      return classes.join(' ');
+    }
+    return alignClasses[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',
@@ -88,13 +148,16 @@ export function Text<T extends ElementType = 'span'>({
   
   const classes = [
     block ? 'block' : 'inline',
-    sizeClasses[size],
+    getSizeClasses(size),
     weightClasses[weight],
     fontClasses[font],
-    alignClasses[align],
+    getAlignClasses(align),
     leading ? leadingClasses[leading] : '',
     color,
     truncate ? 'truncate' : '',
+    uppercase ? 'uppercase' : '',
+    italic ? 'italic' : '',
+    letterSpacing === '0.05em' ? 'tracking-wider' : letterSpacing ? `tracking-${letterSpacing}` : '',
     ml !== undefined ? `ml-${spacingMap[ml]}` : '',
     mr !== undefined ? `mr-${spacingMap[mr]}` : '',
     mt !== undefined ? `mt-${spacingMap[mt]}` : '',
@@ -102,5 +165,10 @@ export function Text<T extends ElementType = 'span'>({
     className
   ].filter(Boolean).join(' ');
   
-  return <Tag className={classes} style={style} {...props}>{children}</Tag>;
+  const combinedStyle = {
+    ...(fontSize ? { fontSize } : {}),
+    ...style
+  };
+  
+  return <Tag className={classes} style={combinedStyle} {...props}>{children}</Tag>;
 }