Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 25x 25x 470x 470x 25x | import type { HTMLAttributes } from 'react';
import { forwardRef } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const textVariants = cva(
'', // Base styles (empty for text component)
{
variants: {
variant: {
default: 'text-foreground',
muted: 'text-muted-foreground',
accent: 'text-accent-foreground',
destructive: 'text-destructive',
},
size: {
xs: 'text-xs',
sm: 'text-sm',
base: 'text-base',
lg: 'text-lg',
xl: 'text-xl',
},
weight: {
normal: 'font-normal',
medium: 'font-medium',
semibold: 'font-semibold',
bold: 'font-bold',
},
},
defaultVariants: {
variant: 'default',
size: 'base',
weight: 'normal',
},
}
);
export interface TextProps
extends HTMLAttributes<HTMLParagraphElement>,
VariantProps<typeof textVariants> {
as?: 'p' | 'span' | 'div';
size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
variant?: 'default' | 'muted' | 'accent' | 'destructive';
weight?: 'normal' | 'medium' | 'semibold' | 'bold';
}
const Text = forwardRef<HTMLParagraphElement, TextProps>(
({ className, variant, size, weight, as = 'p', ...props }, ref) => {
const Comp = as as any;
return (
<Comp
className={cn(textVariants({ variant, size, weight, className }))}
ref={ref}
{...props}
/>
);
}
);
Text.displayName = 'Text';
export { Text, textVariants };
|