website refactor

apps/website/ui/Text.tsx

@@ -15,8 +15,6 @@ export interface TextProps {
   leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | any;
   block?: boolean;
   truncate?: boolean;
-  className?: string;
-  style?: CSSProperties;
   mt?: number | any;
   mb?: number | any;
   ml?: number | any;
@@ -33,6 +31,9 @@ export interface TextProps {
   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;
@@ -55,8 +56,13 @@ export interface TextProps {
   gap?: number;
   cursor?: string;
   width?: string | number;
+  height?: string | number;
   htmlFor?: string;
-  transform?: string;
+  transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
+  /** @deprecated DO NOT USE. Use semantic props instead. */
+  className?: string;
+  /** @deprecated DO NOT USE. Use semantic props instead. */
+  style?: CSSProperties;
 }
 
 /**
@@ -93,6 +99,9 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
   display,
   opacity,
   maxWidth,
+  maxHeight,
+  overflow,
+  whiteSpace,
   mx,
   pl,
   px,
@@ -115,6 +124,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
   gap,
   cursor,
   width,
+  height,
   htmlFor,
   transform,
 }, ref) => {
@@ -200,6 +210,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
     italic ? 'italic' : '',
     animate === 'pulse' ? 'animate-pulse' : '',
     capitalize ? 'capitalize' : '',
+    color?.startsWith('text-') ? color : '',
     className,
   ].filter(Boolean).join(' ');
 
@@ -210,8 +221,12 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
     ...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
     ...(cursor ? { cursor } : {}),
     ...(width !== undefined ? { width } : {}),
+    ...(height !== undefined ? { height } : {}),
     ...(opacity !== undefined ? { opacity } : {}),
     ...(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` } : {}),
@@ -224,7 +239,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
     ...(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 ? { color: color.startsWith('text-') ? undefined : color } : {}),
     ...(letterSpacing ? { letterSpacing } : {}),
     ...(lineHeight ? { lineHeight } : {}),
     ...(flexGrow !== undefined ? { flexGrow } : {}),