website refactor

apps/website/ui/Text.tsx

@@ -25,14 +25,14 @@ interface ResponsiveTextAlign {
   '2xl'?: TextAlign;
 }
 
-interface TextProps<T extends ElementType = 'span'> extends Omit<BoxProps<T>, 'children' | 'className'> {
+interface TextProps<T extends ElementType = 'span'> extends Omit<BoxProps<T>, 'children' | 'className' | 'size'> {
   as?: T;
   children: ReactNode;
   className?: string;
   size?: TextSize | ResponsiveTextSize;
-  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | string;
   color?: string;
-  font?: 'mono' | 'sans';
+  font?: 'mono' | 'sans' | string;
   align?: TextAlign | ResponsiveTextAlign;
   truncate?: boolean;
   uppercase?: boolean;
@@ -43,6 +43,7 @@ interface TextProps<T extends ElementType = 'span'> extends Omit<BoxProps<T>, 'c
   style?: React.CSSProperties;
   block?: boolean;
   italic?: boolean;
+  lineClamp?: number;
   ml?: Spacing | ResponsiveSpacing;
   mr?: Spacing | ResponsiveSpacing;
   mt?: Spacing | ResponsiveSpacing;
@@ -76,6 +77,7 @@ export function Text<T extends ElementType = 'span'>({
   style,
   block = false,
   italic = false,
+  lineClamp,
   ml, mr, mt, mb,
   ...props
 }: TextProps<T> & ComponentPropsWithoutRef<T>) {
@@ -115,7 +117,7 @@ export function Text<T extends ElementType = 'span'>({
     bold: 'font-bold'
   };
   
-  const fontClasses = {
+  const fontClasses: Record<string, string> = {
     mono: 'font-mono',
     sans: 'font-sans'
   };
@@ -175,8 +177,8 @@ export function Text<T extends ElementType = 'span'>({
   const classes = [
     block ? 'block' : 'inline',
     getSizeClasses(size),
-    weightClasses[weight],
-    fontClasses[font],
+    weightClasses[weight] || '',
+    fontClasses[font] || '',
     getAlignClasses(align),
     leading ? leadingClasses[leading] : '',
     color,
@@ -184,6 +186,7 @@ export function Text<T extends ElementType = 'span'>({
     uppercase ? 'uppercase' : '',
     capitalize ? 'capitalize' : '',
     italic ? 'italic' : '',
+    lineClamp ? `line-clamp-${lineClamp}` : '',
     letterSpacing === '0.05em' ? 'tracking-wider' : letterSpacing ? `tracking-${letterSpacing}` : '',
     getSpacingClass('ml', ml),
     getSpacingClass('mr', mr),
@@ -194,6 +197,8 @@ export function Text<T extends ElementType = 'span'>({
   
   const combinedStyle = {
     ...(fontSize ? { fontSize } : {}),
+    ...(weight && !weightClasses[weight] ? { fontWeight: weight } : {}),
+    ...(font && !fontClasses[font] ? { fontFamily: font } : {}),
     ...style
   };