141 lines
4.2 KiB
TypeScript
141 lines
4.2 KiB
TypeScript
import React, { ElementType, ReactNode, forwardRef } from 'react';
|
|
import { Box, BoxProps, ResponsiveValue } from './Box';
|
|
|
|
export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'base';
|
|
|
|
export interface TextProps extends BoxProps<any> {
|
|
children: ReactNode;
|
|
variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit';
|
|
size?: TextSize | ResponsiveValue<TextSize>;
|
|
weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
|
|
as?: ElementType;
|
|
align?: 'left' | 'center' | 'right';
|
|
italic?: boolean;
|
|
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>(({
|
|
children,
|
|
variant = 'med',
|
|
size = 'md',
|
|
weight = 'normal',
|
|
as = 'p',
|
|
align = 'left',
|
|
italic = false,
|
|
mono = false,
|
|
block = false,
|
|
uppercase = false,
|
|
capitalize = false,
|
|
letterSpacing,
|
|
leading,
|
|
truncate = false,
|
|
lineHeight,
|
|
font,
|
|
hoverVariant,
|
|
htmlFor,
|
|
cursor,
|
|
...props
|
|
}, ref) => {
|
|
const variantClasses = {
|
|
high: 'text-[var(--ui-color-text-high)]',
|
|
med: 'text-[var(--ui-color-text-med)]',
|
|
low: 'text-[var(--ui-color-text-low)]',
|
|
primary: 'text-[var(--ui-color-intent-primary)]',
|
|
success: 'text-[var(--ui-color-intent-success)]',
|
|
warning: 'text-[var(--ui-color-intent-warning)]',
|
|
critical: 'text-[var(--ui-color-intent-critical)]',
|
|
telemetry: 'text-[var(--ui-color-intent-telemetry)]',
|
|
inherit: 'text-inherit',
|
|
};
|
|
|
|
const hoverVariantClasses = {
|
|
high: 'hover:text-[var(--ui-color-text-high)]',
|
|
med: 'hover:text-[var(--ui-color-text-med)]',
|
|
low: 'hover:text-[var(--ui-color-text-low)]',
|
|
primary: 'hover:text-[var(--ui-color-intent-primary)]',
|
|
success: 'hover:text-[var(--ui-color-intent-success)]',
|
|
warning: 'hover:text-[var(--ui-color-intent-warning)]',
|
|
critical: 'hover:text-[var(--ui-color-intent-critical)]',
|
|
};
|
|
|
|
const sizeMap: Record<TextSize, string> = {
|
|
xs: 'text-xs',
|
|
sm: 'text-sm',
|
|
base: 'text-base',
|
|
md: 'text-base',
|
|
lg: 'text-lg',
|
|
xl: 'text-xl',
|
|
'2xl': 'text-2xl',
|
|
'3xl': 'text-3xl',
|
|
'4xl': 'text-4xl',
|
|
};
|
|
|
|
const getResponsiveSizeClasses = (value: TextSize | ResponsiveValue<TextSize>) => {
|
|
if (typeof value === 'string') return sizeMap[value];
|
|
const classes = [];
|
|
if (value.base) classes.push(sizeMap[value.base]);
|
|
if (value.sm) classes.push(`sm:${sizeMap[value.sm]}`);
|
|
if (value.md) classes.push(`md:${sizeMap[value.md]}`);
|
|
if (value.lg) classes.push(`lg:${sizeMap[value.lg]}`);
|
|
if (value.xl) classes.push(`xl:${sizeMap[value.xl]}`);
|
|
return classes.join(' ');
|
|
};
|
|
|
|
const weightClasses = {
|
|
light: 'font-light',
|
|
normal: 'font-normal',
|
|
medium: 'font-medium',
|
|
semibold: 'font-semibold',
|
|
bold: 'font-bold',
|
|
};
|
|
|
|
const leadingClasses = {
|
|
none: 'leading-none',
|
|
tight: 'leading-tight',
|
|
snug: 'leading-snug',
|
|
normal: 'leading-normal',
|
|
relaxed: 'leading-relaxed',
|
|
loose: 'leading-loose',
|
|
};
|
|
|
|
const classes = [
|
|
variantClasses[variant],
|
|
getResponsiveSizeClasses(size),
|
|
weightClasses[weight],
|
|
align === 'center' ? 'text-center' : (align === 'right' ? 'text-right' : 'text-left'),
|
|
italic ? 'italic' : '',
|
|
(mono || font === 'mono') ? 'font-mono' : 'font-sans',
|
|
block ? 'block' : 'inline',
|
|
uppercase ? 'uppercase tracking-wider' : '',
|
|
capitalize ? 'capitalize' : '',
|
|
leading ? leadingClasses[leading] : '',
|
|
truncate ? 'truncate' : '',
|
|
hoverVariant ? hoverVariantClasses[hoverVariant] : '',
|
|
].join(' ');
|
|
|
|
const style: React.CSSProperties = {
|
|
...(letterSpacing ? { letterSpacing } : {}),
|
|
...(lineHeight ? { lineHeight } : {}),
|
|
...(cursor ? { cursor } : {}),
|
|
};
|
|
|
|
return (
|
|
<Box as={as} ref={ref} className={classes} style={style} htmlFor={htmlFor} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
Text.displayName = 'Text';
|