website refactor

apps/website/ui/Heading.tsx

@@ -6,28 +6,41 @@ export interface HeadingProps {
   weight?: 'normal' | 'medium' | 'semibold' | 'bold';
   align?: 'left' | 'center' | 'right';
   uppercase?: boolean;
-  intent?: 'primary' | 'telemetry' | 'warning' | 'critical' | 'default' | any;
-  className?: string;
-  style?: 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;
+  intent?: 'primary' | 'telemetry' | 'warning' | 'critical' | 'default';
   truncate?: boolean;
-  size?: string;
   icon?: ReactNode;
   id?: string;
-  lineHeight?: string | any;
-  groupHoverColor?: string | any;
-  transition?: boolean | any;
+  /** @deprecated Use semantic props instead. */
+  className?: string;
+  /** @deprecated Use semantic props instead. */
+  style?: CSSProperties;
+  /** @deprecated Use semantic props instead. */
+  mb?: number | string;
+  /** @deprecated Use semantic props instead. */
+  marginBottom?: number | string;
+  /** @deprecated Use semantic props instead. */
+  mt?: number | string;
+  /** @deprecated Use semantic props instead. */
+  marginTop?: number | string;
+  /** @deprecated Use semantic props instead. */
+  color?: string;
+  /** @deprecated Use semantic props instead. */
+  fontSize?: string | { base: string; sm?: string; md: string; lg?: string; xl?: string };
+  /** @deprecated Use semantic props instead. */
+  letterSpacing?: string;
+  /** @deprecated Use semantic props instead. */
+  size?: string;
+  /** @deprecated Use semantic props instead. */
+  groupHoverColor?: string;
+  /** @deprecated Use semantic props instead. */
+  lineHeight?: string | number;
+  /** @deprecated Use semantic props instead. */
+  transition?: boolean;
 }
 
 /**
  * Heading - Redesigned for "Modern Precision" theme.
- * Includes extensive compatibility props to prevent app-wide breakage.
+ * Enforces semantic props.
  */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ 
   children, 
@@ -36,8 +49,11 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
   align = 'left',
   uppercase = false,
   intent = 'default',
+  truncate,
+  icon,
+  id,
   className,
-  style,
+  style: styleProp,
   mb,
   marginBottom,
   mt,
@@ -45,9 +61,10 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
   color,
   fontSize,
   letterSpacing,
-  truncate,
   size,
-  icon,
+  groupHoverColor,
+  lineHeight,
+  transition,
 }, ref) => {
   const Tag = `h${level}` as const;
   
@@ -76,8 +93,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
   };
 
   const getResponsiveFontSize = (fs: HeadingProps['fontSize']) => {
-    if (!fs) return '';
-    if (typeof fs === 'string') return ''; // Handled in style
+    if (!fs || typeof fs === 'string') return '';
     const classes = [];
     if (fs.base) classes.push(`text-${fs.base}`);
     if (fs.sm) classes.push(`sm:text-${fs.sm}`);
@@ -94,22 +110,25 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
     align === 'center' ? 'text-center' : (align === 'right' ? 'text-right' : 'text-left'),
     uppercase ? 'uppercase tracking-widest' : '',
     truncate ? 'truncate' : '',
+    transition ? 'transition-all duration-200' : '',
+    color?.startsWith('text-') ? color : '',
     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 } : {}),
+    ...(color && !color.startsWith('text-') ? { color } : {}),
     ...(letterSpacing ? { letterSpacing } : {}),
     ...(typeof fontSize === 'string' ? { fontSize } : {}),
+    ...(lineHeight ? { lineHeight } : {}),
+    ...(styleProp || {}),
   };
 
   return (
-    <Tag ref={ref} className={classes} style={combinedStyle}>
+    <Tag ref={ref} className={classes} style={Object.keys(combinedStyle).length > 0 ? combinedStyle : undefined} id={id}>
       <div className="flex items-center gap-2">
         {icon}
         {children}