website refactor

apps/website/ui/Heading.tsx

@@ -1,31 +1,49 @@
 import { ReactNode, forwardRef } from 'react';
-import { Box, BoxProps, ResponsiveValue, Spacing } from './Box';
 
-export interface HeadingProps extends BoxProps<any> {
+export interface HeadingProps {
   children: ReactNode;
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   weight?: 'normal' | 'medium' | 'semibold' | 'bold';
   align?: 'left' | 'center' | 'right';
-  fontSize?: string | ResponsiveValue<string>;
-  icon?: ReactNode;
-  groupHoverColor?: string;
   uppercase?: boolean;
+  intent?: 'primary' | 'telemetry' | 'warning' | 'critical' | 'default' | any;
+  className?: string;
+  style?: React.CSSProperties;
+  mb?: number | any;
+  marginBottom?: number | any;
+  mt?: number | any;
+  marginTop?: number | any;
+  color?: string;
+  fontSize?: string | { base: string; sm?: string; md: string; lg?: string; xl?: string };
   letterSpacing?: string;
-  mb?: Spacing;
+  truncate?: boolean;
+  size?: string;
+  icon?: ReactNode;
 }
 
+/**
+ * Heading - Redesigned for "Modern Precision" theme.
+ * Includes extensive compatibility props to prevent app-wide breakage.
+ */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ 
   children, 
   level = 1, 
   weight = 'bold',
   align = 'left',
-  fontSize,
-  icon,
-  groupHoverColor,
-  uppercase,
-  letterSpacing,
+  uppercase = false,
+  intent = 'default',
+  className,
+  style,
   mb,
-  ...props
+  marginBottom,
+  mt,
+  marginTop,
+  color,
+  fontSize,
+  letterSpacing,
+  truncate,
+  size,
+  icon,
 }, ref) => {
   const Tag = `h${level}` as const;
   
@@ -37,37 +55,62 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
   };
   
   const sizeClasses = {
-    1: 'text-4xl md:text-5xl',
-    2: 'text-3xl md:text-4xl',
-    3: 'text-2xl md:text-3xl',
-    4: 'text-xl md:text-2xl',
-    5: 'text-lg md:text-xl',
-    6: 'text-base md:text-lg'
+    1: 'text-4xl md:text-5xl tracking-tighter leading-none',
+    2: 'text-3xl md:text-4xl tracking-tight leading-tight',
+    3: 'text-2xl md:text-3xl tracking-tight leading-snug',
+    4: 'text-xl md:text-2xl tracking-normal leading-normal',
+    5: 'text-lg md:text-xl tracking-normal leading-normal',
+    6: 'text-base md:text-lg tracking-wide leading-normal'
+  };
+
+  const intentClasses = {
+    default: 'text-[var(--ui-color-text-high)]',
+    primary: 'text-[var(--ui-color-intent-primary)]',
+    telemetry: 'text-[var(--ui-color-intent-telemetry)]',
+    warning: 'text-[var(--ui-color-intent-warning)]',
+    critical: 'text-[var(--ui-color-intent-critical)]',
+  };
+
+  const getResponsiveFontSize = (fs: HeadingProps['fontSize']) => {
+    if (!fs) return '';
+    if (typeof fs === 'string') return ''; // Handled in style
+    const classes = [];
+    if (fs.base) classes.push(`text-${fs.base}`);
+    if (fs.sm) classes.push(`sm:text-${fs.sm}`);
+    if (fs.md) classes.push(`md:text-${fs.md}`);
+    if (fs.lg) classes.push(`lg:text-${fs.lg}`);
+    if (fs.xl) classes.push(`xl:text-${fs.xl}`);
+    return classes.join(' ');
   };
 
   const classes = [
-    'text-[var(--ui-color-text-high)]',
+    intentClasses[intent as keyof typeof intentClasses] || intentClasses.default,
     weightClasses[weight],
-    fontSize ? '' : sizeClasses[level],
+    fontSize ? getResponsiveFontSize(fontSize) : sizeClasses[level],
     align === 'center' ? 'text-center' : (align === 'right' ? 'text-right' : 'text-left'),
-    uppercase ? 'uppercase' : '',
+    uppercase ? 'uppercase tracking-widest' : '',
+    truncate ? 'truncate' : '',
+    className,
   ].join(' ');
 
+  const combinedStyle: React.CSSProperties = {
+    ...style,
+    ...(mb !== undefined ? { marginBottom: typeof mb === 'number' ? `${mb * 0.25}rem` : mb } : {}),
+    ...(marginBottom !== undefined ? { marginBottom: typeof marginBottom === 'number' ? `${marginBottom * 0.25}rem` : marginBottom } : {}),
+    ...(mt !== undefined ? { marginTop: typeof mt === 'number' ? `${mt * 0.25}rem` : mt } : {}),
+    ...(marginTop !== undefined ? { marginTop: typeof marginTop === 'number' ? `${marginTop * 0.25}rem` : marginTop } : {}),
+    ...(color ? { color } : {}),
+    ...(letterSpacing ? { letterSpacing } : {}),
+    ...(typeof fontSize === 'string' ? { fontSize } : {}),
+  };
+
   return (
-    <Box 
-      as={Tag} 
-      ref={ref} 
-      className={classes} 
-      fontSize={typeof fontSize === 'string' ? fontSize : undefined} 
-      letterSpacing={letterSpacing}
-      mb={mb}
-      {...props}
-    >
-      <Box display="flex" alignItems="center" gap={2}>
+    <Tag ref={ref} className={classes} style={combinedStyle}>
+      <div className="flex items-center gap-2">
         {icon}
         {children}
-      </Box>
-    </Box>
+      </div>
+    </Tag>
   );
 });