107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
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<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?: '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 | any;
|
|
mr?: Spacing | any;
|
|
mt?: Spacing | any;
|
|
mb?: Spacing | any;
|
|
}
|
|
|
|
export function Text<T extends ElementType = 'span'>({
|
|
as,
|
|
children,
|
|
className = '',
|
|
size = 'base',
|
|
weight = 'normal',
|
|
color = '',
|
|
font = 'sans',
|
|
align = 'left',
|
|
truncate = false,
|
|
leading,
|
|
style,
|
|
block = false,
|
|
ml, mr, mt, mb,
|
|
...props
|
|
}: TextProps<T> & ComponentPropsWithoutRef<T>) {
|
|
const Tag = (as as ElementType) || 'span';
|
|
|
|
const sizeClasses: Record<string, string> = {
|
|
xs: 'text-xs',
|
|
sm: 'text-sm',
|
|
base: 'text-base',
|
|
lg: 'text-lg',
|
|
xl: 'text-xl',
|
|
'2xl': 'text-2xl',
|
|
'3xl': 'text-3xl',
|
|
'4xl': 'text-4xl'
|
|
};
|
|
|
|
const weightClasses: Record<string, string> = {
|
|
light: 'font-light',
|
|
normal: 'font-normal',
|
|
medium: 'font-medium',
|
|
semibold: 'font-semibold',
|
|
bold: 'font-bold'
|
|
};
|
|
|
|
const fontClasses = {
|
|
mono: 'font-mono',
|
|
sans: 'font-sans'
|
|
};
|
|
|
|
const alignClasses = {
|
|
left: 'text-left',
|
|
center: 'text-center',
|
|
right: 'text-right'
|
|
};
|
|
|
|
const spacingMap: Record<number, string> = {
|
|
0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
|
|
5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
|
|
16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
|
|
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]}` : '',
|
|
mr !== undefined ? `mr-${spacingMap[mr]}` : '',
|
|
mt !== undefined ? `mt-${spacingMap[mt]}` : '',
|
|
mb !== undefined ? `mb-${spacingMap[mb]}` : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return <Tag className={classes} style={style} {...props}>{children}</Tag>;
|
|
}
|