website refactor

apps/website/ui/Text.tsx

@@ -5,69 +5,106 @@ export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
 
 export interface TextProps {
   children: ReactNode;
-  variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit' | any;
-  size?: TextSize | { base: TextSize; sm?: TextSize; md?: TextSize; lg?: TextSize; xl?: TextSize } | any;
-  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | any;
+  variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit';
+  size?: TextSize | { base: TextSize; sm?: TextSize; md?: TextSize; lg?: TextSize; xl?: TextSize };
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
   as?: ElementType;
-  align?: 'left' | 'center' | 'right' | any;
+  align?: 'left' | 'center' | 'right';
   mono?: boolean;
+  font?: 'sans' | 'mono';
   uppercase?: boolean;
-  leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | any;
+  leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
   block?: boolean;
   truncate?: boolean;
-  mt?: number | any;
-  mb?: number | any;
-  ml?: number | any;
-  mr?: number | any;
-  marginTop?: number | any;
-  marginBottom?: number | any;
-  font?: 'sans' | 'mono' | string;
-  color?: string;
-  letterSpacing?: string;
-  lineHeight?: string | number;
-  flexGrow?: number;
-  flexShrink?: number;
-  lineClamp?: number;
-  display?: string | ResponsiveValue<string | any>;
-  opacity?: number;
   maxWidth?: string | number;
-  maxHeight?: string | number;
-  overflow?: string;
-  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap';
-  mx?: string | number;
-  pl?: number;
-  px?: number;
-  py?: number;
-  paddingX?: number;
-  paddingY?: number;
-  textAlign?: string;
-  groupHoverTextColor?: string;
-  transition?: boolean;
-  borderLeft?: boolean;
-  borderStyle?: string;
-  borderColor?: string;
-  ariaLabel?: string;
-  hoverVariant?: string;
-  fontSize?: string | any;
-  italic?: boolean;
-  animate?: string;
-  capitalize?: boolean;
-  alignItems?: string;
-  gap?: number;
-  cursor?: string;
-  width?: string | number;
-  height?: string | number;
-  htmlFor?: string;
-  transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
-  /** @deprecated DO NOT USE. Use semantic props instead. */
+  lineClamp?: number;
+  letterSpacing?: 'tight' | 'normal' | 'wide' | 'widest' | string;
+  id?: string;
+  /** @deprecated Use semantic props (variant, intent) instead. */
+  color?: string;
+  /** @deprecated Use semantic props instead. */
   className?: string;
-  /** @deprecated DO NOT USE. Use semantic props instead. */
+  /** @deprecated Use semantic props instead. */
   style?: CSSProperties;
+  /** @deprecated Use semantic props instead. */
+  marginBottom?: number | string | ResponsiveValue<number | string>;
+  /** @deprecated Use semantic props instead. */
+  marginTop?: number | string | ResponsiveValue<number | string>;
+  /** @deprecated Use semantic props instead. */
+  mb?: number | string | ResponsiveValue<number | string>;
+  /** @deprecated Use semantic props instead. */
+  mt?: number | string | ResponsiveValue<number | string>;
+  /** @deprecated Use semantic props instead. */
+  ml?: number | string;
+  /** @deprecated Use semantic props instead. */
+  mr?: number | string;
+  /** @deprecated Use semantic props instead. */
+  mx?: string | number;
+  /** @deprecated Use semantic props instead. */
+  px?: number | string;
+  /** @deprecated Use semantic props instead. */
+  py?: number | string;
+  /** @deprecated Use semantic props instead. */
+  textAlign?: 'left' | 'center' | 'right';
+  /** @deprecated Use semantic props instead. */
+  flexGrow?: number;
+  /** @deprecated Use semantic props instead. */
+  maxHeight?: string | number;
+  /** @deprecated Use semantic props instead. */
+  overflow?: string;
+  /** @deprecated Use semantic props instead. */
+  opacity?: number;
+  /** @deprecated Use semantic props instead. */
+  groupHoverTextColor?: string;
+  /** @deprecated Use semantic props instead. */
+  lineHeight?: string | number;
+  /** @deprecated Use semantic props instead. */
+  transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
+  /** @deprecated Use semantic props instead. */
+  animate?: string;
+  /** @deprecated Use semantic props instead. */
+  transition?: boolean;
+  /** @deprecated Use semantic props instead. */
+  display?: string | ResponsiveValue<string>;
+  /** @deprecated Use semantic props instead. */
+  alignItems?: string;
+  /** @deprecated Use semantic props instead. */
+  gap?: number;
+  /** @deprecated Use semantic props instead. */
+  italic?: boolean;
+  /** @deprecated Use semantic props instead. */
+  fontSize?: string | any;
+  /** @deprecated Use semantic props instead. */
+  borderLeft?: boolean;
+  /** @deprecated Use semantic props instead. */
+  borderColor?: string;
+  /** @deprecated Use semantic props instead. */
+  pl?: number;
+  /** @deprecated Use semantic props instead. */
+  borderStyle?: string;
+  /** @deprecated Use semantic props instead. */
+  paddingX?: number;
+  /** @deprecated Use semantic props instead. */
+  whiteSpace?: string;
+  /** @deprecated Use semantic props instead. */
+  htmlFor?: string;
+  /** @deprecated Use semantic props instead. */
+  width?: string | number;
+  /** @deprecated Use semantic props instead. */
+  height?: string | number;
+  /** @deprecated Use semantic props instead. */
+  flexShrink?: number;
+  /** @deprecated Use semantic props instead. */
+  capitalize?: boolean;
+  /** @deprecated Use semantic props instead. */
+  hoverVariant?: string;
+  /** @deprecated Use semantic props instead. */
+  cursor?: string;
 }
 
 /**
  * Text - Redesigned for "Modern Precision" theme.
- * Includes extensive compatibility props to prevent app-wide breakage.
+ * Enforces semantic props.
  */
 export const Text = forwardRef<HTMLElement, TextProps>(({ 
   children, 
@@ -77,56 +114,55 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
   as = 'p',
   align = 'left',
   mono = false,
+  font,
   uppercase = false,
   leading = 'normal',
   block = false,
   truncate = false,
+  maxWidth,
+  lineClamp,
+  letterSpacing,
+  id,
+  color,
   className,
-  style,
-  mt,
+  style: styleProp,
+  marginBottom,
+  marginTop,
   mb,
+  mt,
   ml,
   mr,
-  marginTop,
-  marginBottom,
-  font,
-  color,
-  letterSpacing,
-  lineHeight,
-  flexGrow,
-  flexShrink,
-  lineClamp,
-  display,
-  opacity,
-  maxWidth,
-  maxHeight,
-  overflow,
-  whiteSpace,
   mx,
-  pl,
   px,
   py,
-  paddingX,
-  paddingY,
   textAlign,
+  flexGrow,
+  maxHeight,
+  overflow,
+  opacity,
   groupHoverTextColor,
-  transition,
-  borderLeft,
-  borderStyle,
-  borderColor,
-  ariaLabel,
-  hoverVariant,
-  fontSize,
-  italic,
+  lineHeight,
+  transform,
   animate,
-  capitalize,
+  transition,
+  display,
   alignItems,
   gap,
-  cursor,
+  italic,
+  fontSize,
+  borderLeft,
+  borderColor,
+  pl,
+  borderStyle,
+  paddingX,
+  whiteSpace,
+  htmlFor,
   width,
   height,
-  htmlFor,
-  transform,
+  flexShrink,
+  capitalize,
+  hoverVariant,
+  cursor,
 }, ref) => {
   const variantClasses = {
     high: 'text-[var(--ui-color-text-high)]',
@@ -181,79 +217,99 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
     loose: 'leading-loose',
   };
 
-  const getResponsiveClasses = (prefix: string, value: any | ResponsiveValue<any> | undefined) => {
+  const letterSpacingClasses: Record<string, string> = {
+    tight: 'tracking-tight',
+    normal: 'tracking-normal',
+    wide: 'tracking-wide',
+    widest: 'tracking-widest',
+  };
+
+  const getResponsiveSpacing = (prefix: string, value: any) => {
     if (value === undefined) return '';
     if (typeof value === 'object') {
       const classes = [];
-      if (value.base !== undefined) classes.push(prefix ? `${prefix}-${value.base}` : String(value.base));
-      if (value.sm !== undefined) classes.push(prefix ? `sm:${prefix}-${value.sm}` : `sm:${value.sm}`);
-      if (value.md !== undefined) classes.push(prefix ? `md:${prefix}-${value.md}` : `md:${value.md}`);
-      if (value.lg !== undefined) classes.push(prefix ? `lg:${prefix}-${value.lg}` : `lg:${value.lg}`);
-      if (value.xl !== undefined) classes.push(prefix ? `xl:${prefix}-${value.xl}` : `xl:${value.xl}`);
+      if (value.base !== undefined) classes.push(`${prefix}-${value.base}`);
+      if (value.sm !== undefined) classes.push(`sm:${prefix}-${value.sm}`);
+      if (value.md !== undefined) classes.push(`md:${prefix}-${value.md}`);
+      if (value.lg !== undefined) classes.push(`lg:${prefix}-${value.lg}`);
+      if (value.xl !== undefined) classes.push(`xl:${prefix}-${value.xl}`);
       return classes.join(' ');
     }
-    return prefix ? `${prefix}-${value}` : String(value);
+    return ''; // Handled in style
+  };
+
+  const getResponsiveDisplay = (d: any) => {
+    if (!d) return '';
+    if (typeof d === 'string') return d.includes(':') ? d : `flex`; // Fallback
+    const classes = [];
+    if (d.base) classes.push(d.base);
+    if (d.sm) classes.push(`sm:${d.sm}`);
+    if (d.md) classes.push(`md:${d.md}`);
+    if (d.lg) classes.push(`lg:${d.lg}`);
+    if (d.xl) classes.push(`xl:${d.xl}`);
+    return classes.join(' ');
   };
 
   const classes = [
     variantClasses[variant as keyof typeof variantClasses] || '',
     getResponsiveSize(size),
     weightClasses[weight as keyof typeof weightClasses] || '',
-    align === 'center' || textAlign === 'center' ? 'text-center' : (align === 'right' || textAlign === 'right' ? 'text-right' : 'text-left'),
+    (align === 'center' || textAlign === 'center') ? 'text-center' : ((align === 'right' || textAlign === 'right') ? 'text-right' : 'text-left'),
     (mono || font === 'mono') ? 'font-mono' : 'font-sans',
-    uppercase ? 'uppercase tracking-widest' : '',
+    uppercase ? 'uppercase' : '',
+    letterSpacing ? (letterSpacingClasses[letterSpacing] || '') : (uppercase ? 'tracking-widest' : ''),
     leadingClasses[leading as keyof typeof leadingClasses] || '',
     block ? 'block' : 'inline',
     truncate ? 'truncate' : '',
-    getResponsiveClasses('display', display),
-    transition ? 'transition-all duration-200' : '',
+    getResponsiveSpacing('mb', mb || marginBottom),
+    getResponsiveSpacing('mt', mt || marginTop),
+    getResponsiveDisplay(display),
     italic ? 'italic' : '',
     animate === 'pulse' ? 'animate-pulse' : '',
+    transition ? 'transition-all duration-200' : '',
     capitalize ? 'capitalize' : '',
     color?.startsWith('text-') ? color : '',
     className,
   ].filter(Boolean).join(' ');
 
-  const combinedStyle: React.CSSProperties = {
-    ...style,
-    ...(typeof display === 'string' ? { display } : {}),
-    ...(alignItems ? { alignItems } : {}),
-    ...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
-    ...(cursor ? { cursor } : {}),
-    ...(width !== undefined ? { width } : {}),
-    ...(height !== undefined ? { height } : {}),
-    ...(opacity !== undefined ? { opacity } : {}),
+  const style: React.CSSProperties = {
     ...(maxWidth !== undefined ? { maxWidth } : {}),
     ...(maxHeight !== undefined ? { maxHeight } : {}),
     ...(overflow !== undefined ? { overflow } : {}),
-    ...(whiteSpace !== undefined ? { whiteSpace } : {}),
-    ...(mx === 'auto' ? { marginLeft: 'auto', marginRight: 'auto' } : {}),
-    ...(pl !== undefined ? { paddingLeft: `${pl * 0.25}rem` } : {}),
-    ...(px !== undefined ? { paddingLeft: `${px * 0.25}rem`, paddingRight: `${px * 0.25}rem` } : {}),
-    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
-    ...(paddingX !== undefined ? { paddingLeft: `${paddingX * 0.25}rem`, paddingRight: `${paddingX * 0.25}rem` } : {}),
-    ...(paddingY !== undefined ? { paddingTop: `${paddingY * 0.25}rem`, paddingBottom: `${paddingY * 0.25}rem` } : {}),
-    ...(mt !== undefined ? { marginTop: typeof mt === 'number' ? `${mt * 0.25}rem` : mt } : {}),
-    ...(mb !== undefined ? { marginBottom: typeof mb === 'number' ? `${mb * 0.25}rem` : mb } : {}),
-    ...(ml !== undefined ? { marginLeft: typeof ml === 'number' ? `${ml * 0.25}rem` : ml } : {}),
-    ...(mr !== undefined ? { marginRight: typeof mr === 'number' ? `${mr * 0.25}rem` : mr } : {}),
-    ...(marginTop !== undefined ? { marginTop: typeof marginTop === 'number' ? `${marginTop * 0.25}rem` : marginTop } : {}),
-    ...(marginBottom !== undefined ? { marginBottom: typeof marginBottom === 'number' ? `${marginBottom * 0.25}rem` : marginBottom } : {}),
-    ...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
-    ...(letterSpacing ? { letterSpacing } : {}),
-    ...(lineHeight ? { lineHeight } : {}),
     ...(flexGrow !== undefined ? { flexGrow } : {}),
     ...(flexShrink !== undefined ? { flexShrink } : {}),
+    ...(opacity !== undefined ? { opacity } : {}),
     ...(lineClamp !== undefined ? { display: '-webkit-box', WebkitLineClamp: lineClamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } : {}),
-    ...(borderLeft ? { borderLeft: `1px solid ${borderColor || 'var(--ui-color-border-default)'}` } : {}),
-    ...(fontSize ? { fontSize } : {}),
+    ...(color && !color.startsWith('text-') ? { color } : {}),
+    ...(typeof mb === 'number' || typeof mb === 'string' ? { marginBottom: typeof mb === 'number' ? `${mb * 0.25}rem` : mb } : {}),
+    ...(typeof marginBottom === 'number' || typeof marginBottom === 'string' ? { marginBottom: typeof marginBottom === 'number' ? `${marginBottom * 0.25}rem` : marginBottom } : {}),
+    ...(typeof mt === 'number' || typeof mt === 'string' ? { marginTop: typeof mt === 'number' ? `${mt * 0.25}rem` : mt } : {}),
+    ...(typeof marginTop === 'number' || typeof marginTop === 'string' ? { marginTop: typeof marginTop === 'number' ? `${marginTop * 0.25}rem` : marginTop } : {}),
+    ...(ml !== undefined ? { marginLeft: typeof ml === 'number' ? `${ml * 0.25}rem` : ml } : {}),
+    ...(mr !== undefined ? { marginRight: typeof mr === 'number' ? `${mr * 0.25}rem` : mr } : {}),
+    ...(mx === 'auto' ? { marginLeft: 'auto', marginRight: 'auto' } : {}),
+    ...(px !== undefined ? { paddingLeft: typeof px === 'number' ? `${px * 0.25}rem` : px, paddingRight: typeof px === 'number' ? `${px * 0.25}rem` : px } : {}),
+    ...(py !== undefined ? { paddingTop: typeof py === 'number' ? `${py * 0.25}rem` : py, paddingBottom: typeof py === 'number' ? `${py * 0.25}rem` : py } : {}),
+    ...(pl !== undefined ? { paddingLeft: typeof pl === 'number' ? `${pl * 0.25}rem` : pl } : {}),
+    ...(paddingX !== undefined ? { paddingLeft: typeof paddingX === 'number' ? `${paddingX * 0.25}rem` : paddingX, paddingRight: typeof paddingX === 'number' ? `${paddingX * 0.25}rem` : paddingX } : {}),
+    ...(letterSpacing && !letterSpacingClasses[letterSpacing] ? { letterSpacing } : {}),
+    ...(lineHeight ? { lineHeight } : {}),
     ...(transform ? { textTransform: transform as any } : {}),
+    ...(alignItems ? { alignItems } : {}),
+    ...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
+    ...(cursor ? { cursor } : {}),
+    ...(fontSize && typeof fontSize === 'string' ? { fontSize } : {}),
+    ...(borderLeft ? { borderLeft: `1px solid ${borderColor || 'var(--ui-color-border-default)'}` } : {}),
+    ...(whiteSpace ? { whiteSpace: whiteSpace as any } : {}),
+    ...(width !== undefined ? { width } : {}),
+    ...(height !== undefined ? { height } : {}),
+    ...(styleProp || {}),
   };
 
   const Tag = as || 'p';
 
   return (
-    <Tag ref={ref} className={classes} style={combinedStyle} aria-label={ariaLabel} htmlFor={htmlFor}>
+    <Tag ref={ref} className={classes} style={Object.keys(style).length > 0 ? style : undefined} id={id} htmlFor={htmlFor}>
       {children}
     </Tag>
   );