wip

apps/website/ui/Text.tsx

@@ -1,25 +1,29 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
+import { Box, BoxProps } from './Box';
 
 type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
 
-interface TextProps extends HTMLAttributes<HTMLSpanElement> {
+interface TextProps<T extends ElementType = 'span'> extends Omit<BoxProps<T>, 'children' | 'className'> {
+  as?: T;
   children: ReactNode;
   className?: string;
   size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
   color?: string;
   font?: 'mono' | 'sans';
   align?: 'left' | 'center' | 'right';
   truncate?: boolean;
+  leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
   style?: React.CSSProperties;
   block?: boolean;
-  ml?: Spacing;
-  mr?: Spacing;
-  mt?: Spacing;
-  mb?: Spacing;
+  ml?: Spacing | any;
+  mr?: Spacing | any;
+  mt?: Spacing | any;
+  mb?: Spacing | any;
 }
 
-export function Text({ 
+export function Text<T extends ElementType = 'span'>({ 
+  as,
   children, 
   className = '', 
   size = 'base',
@@ -28,12 +32,15 @@ export function Text({
   font = 'sans',
   align = 'left',
   truncate = false,
+  leading,
   style,
   block = false,
   ml, mr, mt, mb,
   ...props
-}: TextProps) {
-  const sizeClasses = {
+}: TextProps<T> & ComponentPropsWithoutRef<T>) {
+  const Tag = (as as ElementType) || 'span';
+
+  const sizeClasses: Record<string, string> = {
     xs: 'text-xs',
     sm: 'text-sm',
     base: 'text-base',
@@ -44,7 +51,8 @@ export function Text({
     '4xl': 'text-4xl'
   };
   
-  const weightClasses = {
+  const weightClasses: Record<string, string> = {
+    light: 'font-light',
     normal: 'font-normal',
     medium: 'font-medium',
     semibold: 'font-semibold',
@@ -69,12 +77,22 @@ export function Text({
     48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
   };
   
+  const leadingClasses: Record<string, string> = {
+    none: 'leading-none',
+    tight: 'leading-tight',
+    snug: 'leading-snug',
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+    loose: 'leading-loose'
+  };
+  
   const classes = [
     block ? 'block' : 'inline',
     sizeClasses[size],
     weightClasses[weight],
     fontClasses[font],
     alignClasses[align],
+    leading ? leadingClasses[leading] : '',
     color,
     truncate ? 'truncate' : '',
     ml !== undefined ? `ml-${spacingMap[ml]}` : '',
@@ -84,5 +102,5 @@ export function Text({
     className
   ].filter(Boolean).join(' ');
   
-  return <span className={classes} style={style} {...props}>{children}</span>;
+  return <Tag className={classes} style={style} {...props}>{children}</Tag>;
 }