319 lines
12 KiB
TypeScript
319 lines
12 KiB
TypeScript
import React, { ElementType, ReactNode, forwardRef, CSSProperties } from 'react';
|
|
import { ResponsiveValue } from './Box';
|
|
|
|
export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'base';
|
|
|
|
export interface TextProps {
|
|
children: ReactNode;
|
|
variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit';
|
|
size?: TextSize | { base: TextSize; sm?: TextSize; md?: TextSize; lg?: TextSize; xl?: TextSize };
|
|
weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
|
|
as?: ElementType;
|
|
align?: 'left' | 'center' | 'right';
|
|
mono?: boolean;
|
|
font?: 'sans' | 'mono';
|
|
uppercase?: boolean;
|
|
leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
|
|
block?: boolean;
|
|
truncate?: boolean;
|
|
maxWidth?: string | number;
|
|
lineClamp?: number;
|
|
letterSpacing?: 'tight' | 'normal' | 'wide' | 'widest' | string;
|
|
id?: string;
|
|
/** @deprecated Use semantic props (variant, intent) instead. */
|
|
color?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
className?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
style?: CSSProperties;
|
|
/** @deprecated Use semantic props instead. */
|
|
marginBottom?: number | string | ResponsiveValue<number | string>;
|
|
/** @deprecated Use semantic props instead. */
|
|
marginTop?: number | string | ResponsiveValue<number | string>;
|
|
/** @deprecated Use semantic props instead. */
|
|
mb?: number | string | ResponsiveValue<number | string>;
|
|
/** @deprecated Use semantic props instead. */
|
|
mt?: number | string | ResponsiveValue<number | string>;
|
|
/** @deprecated Use semantic props instead. */
|
|
ml?: number | string;
|
|
/** @deprecated Use semantic props instead. */
|
|
mr?: number | string;
|
|
/** @deprecated Use semantic props instead. */
|
|
mx?: string | number;
|
|
/** @deprecated Use semantic props instead. */
|
|
px?: number | string;
|
|
/** @deprecated Use semantic props instead. */
|
|
py?: number | string;
|
|
/** @deprecated Use semantic props instead. */
|
|
textAlign?: 'left' | 'center' | 'right';
|
|
/** @deprecated Use semantic props instead. */
|
|
flexGrow?: number;
|
|
/** @deprecated Use semantic props instead. */
|
|
maxHeight?: string | number;
|
|
/** @deprecated Use semantic props instead. */
|
|
overflow?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
opacity?: number;
|
|
/** @deprecated Use semantic props instead. */
|
|
groupHoverTextColor?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
lineHeight?: string | number;
|
|
/** @deprecated Use semantic props instead. */
|
|
transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
|
|
/** @deprecated Use semantic props instead. */
|
|
animate?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
transition?: boolean;
|
|
/** @deprecated Use semantic props instead. */
|
|
display?: string | ResponsiveValue<string>;
|
|
/** @deprecated Use semantic props instead. */
|
|
alignItems?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
gap?: number;
|
|
/** @deprecated Use semantic props instead. */
|
|
italic?: boolean;
|
|
/** @deprecated Use semantic props instead. */
|
|
fontSize?: string | any;
|
|
/** @deprecated Use semantic props instead. */
|
|
borderLeft?: boolean;
|
|
/** @deprecated Use semantic props instead. */
|
|
borderColor?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
pl?: number;
|
|
/** @deprecated Use semantic props instead. */
|
|
borderStyle?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
paddingX?: number;
|
|
/** @deprecated Use semantic props instead. */
|
|
whiteSpace?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
htmlFor?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
width?: string | number;
|
|
/** @deprecated Use semantic props instead. */
|
|
height?: string | number;
|
|
/** @deprecated Use semantic props instead. */
|
|
flexShrink?: number;
|
|
/** @deprecated Use semantic props instead. */
|
|
capitalize?: boolean;
|
|
/** @deprecated Use semantic props instead. */
|
|
hoverVariant?: string;
|
|
/** @deprecated Use semantic props instead. */
|
|
cursor?: string;
|
|
}
|
|
|
|
/**
|
|
* Text - Redesigned for "Modern Precision" theme.
|
|
* Enforces semantic props.
|
|
*/
|
|
export const Text = forwardRef<HTMLElement, TextProps>(({
|
|
children,
|
|
variant = 'med',
|
|
size = 'md',
|
|
weight = 'normal',
|
|
as = 'p',
|
|
align = 'left',
|
|
mono = false,
|
|
font,
|
|
uppercase = false,
|
|
leading = 'normal',
|
|
block = false,
|
|
truncate = false,
|
|
maxWidth,
|
|
lineClamp,
|
|
letterSpacing,
|
|
id,
|
|
color,
|
|
className,
|
|
style: styleProp,
|
|
marginBottom,
|
|
marginTop,
|
|
mb,
|
|
mt,
|
|
ml,
|
|
mr,
|
|
mx,
|
|
px,
|
|
py,
|
|
textAlign,
|
|
flexGrow,
|
|
maxHeight,
|
|
overflow,
|
|
opacity,
|
|
groupHoverTextColor,
|
|
lineHeight,
|
|
transform,
|
|
animate,
|
|
transition,
|
|
display,
|
|
alignItems,
|
|
gap,
|
|
italic,
|
|
fontSize,
|
|
borderLeft,
|
|
borderColor,
|
|
pl,
|
|
borderStyle,
|
|
paddingX,
|
|
whiteSpace,
|
|
htmlFor,
|
|
width,
|
|
height,
|
|
flexShrink,
|
|
capitalize,
|
|
hoverVariant,
|
|
cursor,
|
|
}, 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 sizeMap: Record<string, string> = {
|
|
xs: 'text-[10px]',
|
|
sm: 'text-xs',
|
|
base: 'text-sm',
|
|
md: 'text-sm',
|
|
lg: 'text-base',
|
|
xl: 'text-lg',
|
|
'2xl': 'text-xl',
|
|
'3xl': 'text-2xl',
|
|
'4xl': 'text-3xl',
|
|
};
|
|
|
|
const getResponsiveSize = (s: any) => {
|
|
if (!s) return sizeMap['md'];
|
|
if (typeof s === 'string') return sizeMap[s] || sizeMap['md'];
|
|
const classes = [];
|
|
if (s.base) classes.push(sizeMap[s.base]);
|
|
if (s.sm) classes.push(`sm:${sizeMap[s.sm]}`);
|
|
if (s.md) classes.push(`md:${sizeMap[s.md]}`);
|
|
if (s.lg) classes.push(`lg:${sizeMap[s.lg]}`);
|
|
if (s.xl) classes.push(`xl:${sizeMap[s.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 letterSpacingClasses: Record<string, string> = {
|
|
tight: 'tracking-tight',
|
|
normal: 'tracking-normal',
|
|
wide: 'tracking-wide',
|
|
widest: 'tracking-widest',
|
|
};
|
|
|
|
const getResponsiveSpacing = (prefix: string, value: any) => {
|
|
if (value === undefined) return '';
|
|
if (typeof value === 'object') {
|
|
const classes = [];
|
|
if (value.base !== undefined) classes.push(`${prefix}-${value.base}`);
|
|
if (value.sm !== undefined) classes.push(`sm:${prefix}-${value.sm}`);
|
|
if (value.md !== undefined) classes.push(`md:${prefix}-${value.md}`);
|
|
if (value.lg !== undefined) classes.push(`lg:${prefix}-${value.lg}`);
|
|
if (value.xl !== undefined) classes.push(`xl:${prefix}-${value.xl}`);
|
|
return classes.join(' ');
|
|
}
|
|
return ''; // Handled in style
|
|
};
|
|
|
|
const getResponsiveDisplay = (d: any) => {
|
|
if (!d) return '';
|
|
if (typeof d === 'string') return d.includes(':') ? d : `flex`; // Fallback
|
|
const classes = [];
|
|
if (d.base) classes.push(d.base);
|
|
if (d.sm) classes.push(`sm:${d.sm}`);
|
|
if (d.md) classes.push(`md:${d.md}`);
|
|
if (d.lg) classes.push(`lg:${d.lg}`);
|
|
if (d.xl) classes.push(`xl:${d.xl}`);
|
|
return classes.join(' ');
|
|
};
|
|
|
|
const classes = [
|
|
variantClasses[variant as keyof typeof variantClasses] || '',
|
|
getResponsiveSize(size),
|
|
weightClasses[weight as keyof typeof weightClasses] || '',
|
|
(align === 'center' || textAlign === 'center') ? 'text-center' : ((align === 'right' || textAlign === 'right') ? 'text-right' : 'text-left'),
|
|
(mono || font === 'mono') ? 'font-mono' : 'font-sans',
|
|
uppercase ? 'uppercase' : '',
|
|
letterSpacing ? (letterSpacingClasses[letterSpacing] || '') : (uppercase ? 'tracking-widest' : ''),
|
|
leadingClasses[leading as keyof typeof leadingClasses] || '',
|
|
block ? 'block' : 'inline',
|
|
truncate ? 'truncate' : '',
|
|
getResponsiveSpacing('mb', mb || marginBottom),
|
|
getResponsiveSpacing('mt', mt || marginTop),
|
|
getResponsiveDisplay(display),
|
|
italic ? 'italic' : '',
|
|
animate === 'pulse' ? 'animate-pulse' : '',
|
|
transition ? 'transition-all duration-200' : '',
|
|
capitalize ? 'capitalize' : '',
|
|
color?.startsWith('text-') ? color : '',
|
|
className,
|
|
].filter(Boolean).join(' ');
|
|
|
|
const style: React.CSSProperties = {
|
|
...(maxWidth !== undefined ? { maxWidth } : {}),
|
|
...(maxHeight !== undefined ? { maxHeight } : {}),
|
|
...(overflow !== undefined ? { overflow } : {}),
|
|
...(flexGrow !== undefined ? { flexGrow } : {}),
|
|
...(flexShrink !== undefined ? { flexShrink } : {}),
|
|
...(opacity !== undefined ? { opacity } : {}),
|
|
...(lineClamp !== undefined ? { display: '-webkit-box', WebkitLineClamp: lineClamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } : {}),
|
|
...(color && !color.startsWith('text-') ? { color } : {}),
|
|
...(typeof mb === 'number' || typeof mb === 'string' ? { marginBottom: typeof mb === 'number' ? `${mb * 0.25}rem` : mb } : {}),
|
|
...(typeof marginBottom === 'number' || typeof marginBottom === 'string' ? { marginBottom: typeof marginBottom === 'number' ? `${marginBottom * 0.25}rem` : marginBottom } : {}),
|
|
...(typeof mt === 'number' || typeof mt === 'string' ? { marginTop: typeof mt === 'number' ? `${mt * 0.25}rem` : mt } : {}),
|
|
...(typeof marginTop === 'number' || typeof marginTop === 'string' ? { marginTop: typeof marginTop === 'number' ? `${marginTop * 0.25}rem` : marginTop } : {}),
|
|
...(ml !== undefined ? { marginLeft: typeof ml === 'number' ? `${ml * 0.25}rem` : ml } : {}),
|
|
...(mr !== undefined ? { marginRight: typeof mr === 'number' ? `${mr * 0.25}rem` : mr } : {}),
|
|
...(mx === 'auto' ? { marginLeft: 'auto', marginRight: 'auto' } : {}),
|
|
...(px !== undefined ? { paddingLeft: typeof px === 'number' ? `${px * 0.25}rem` : px, paddingRight: typeof px === 'number' ? `${px * 0.25}rem` : px } : {}),
|
|
...(py !== undefined ? { paddingTop: typeof py === 'number' ? `${py * 0.25}rem` : py, paddingBottom: typeof py === 'number' ? `${py * 0.25}rem` : py } : {}),
|
|
...(pl !== undefined ? { paddingLeft: typeof pl === 'number' ? `${pl * 0.25}rem` : pl } : {}),
|
|
...(paddingX !== undefined ? { paddingLeft: typeof paddingX === 'number' ? `${paddingX * 0.25}rem` : paddingX, paddingRight: typeof paddingX === 'number' ? `${paddingX * 0.25}rem` : paddingX } : {}),
|
|
...(letterSpacing && !letterSpacingClasses[letterSpacing] ? { letterSpacing } : {}),
|
|
...(lineHeight ? { lineHeight } : {}),
|
|
...(transform ? { textTransform: transform as any } : {}),
|
|
...(alignItems ? { alignItems } : {}),
|
|
...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
|
|
...(cursor ? { cursor } : {}),
|
|
...(fontSize && typeof fontSize === 'string' ? { fontSize } : {}),
|
|
...(borderLeft ? { borderLeft: `1px solid ${borderColor || 'var(--ui-color-border-default)'}` } : {}),
|
|
...(whiteSpace ? { whiteSpace: whiteSpace as any } : {}),
|
|
...(width !== undefined ? { width } : {}),
|
|
...(height !== undefined ? { height } : {}),
|
|
...(styleProp || {}),
|
|
};
|
|
|
|
const Tag = as || 'p';
|
|
|
|
return (
|
|
<Tag ref={ref} className={classes} style={Object.keys(style).length > 0 ? style : undefined} id={id} htmlFor={htmlFor}>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
});
|
|
|
|
Text.displayName = 'Text';
|