website refactor

apps/website/ui/Text.tsx

@@ -14,12 +14,15 @@ export interface TextProps extends BoxProps<any> {
   mono?: boolean;
   block?: boolean;
   uppercase?: boolean;
+  capitalize?: boolean;
   letterSpacing?: string;
   leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
   truncate?: boolean;
   lineHeight?: string | number;
   font?: 'sans' | 'mono';
   hoverVariant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical';
+  htmlFor?: string;
+  cursor?: string;
 }
 
 export const Text = forwardRef<HTMLElement, TextProps>(({ 
@@ -33,12 +36,15 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
   mono = false,
   block = false,
   uppercase = false,
+  capitalize = false,
   letterSpacing,
   leading,
   truncate = false,
   lineHeight,
   font,
   hoverVariant,
+  htmlFor,
+  cursor,
   ...props
 }, ref) => {
   const variantClasses = {
@@ -112,6 +118,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
     (mono || font === 'mono') ? 'font-mono' : 'font-sans',
     block ? 'block' : 'inline',
     uppercase ? 'uppercase tracking-wider' : '',
+    capitalize ? 'capitalize' : '',
     leading ? leadingClasses[leading] : '',
     truncate ? 'truncate' : '',
     hoverVariant ? hoverVariantClasses[hoverVariant] : '',
@@ -120,10 +127,11 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
   const style: React.CSSProperties = {
     ...(letterSpacing ? { letterSpacing } : {}),
     ...(lineHeight ? { lineHeight } : {}),
+    ...(cursor ? { cursor } : {}),
   };
 
   return (
-    <Box as={as} ref={ref} className={classes} style={style} {...props}>
+    <Box as={as} ref={ref} className={classes} style={style} htmlFor={htmlFor} {...props}>
       {children}
     </Box>
   );