Something went wrong. Try again.
ATProto-based AI Assistant Chat interface.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263import type { ComponentProps } from 'react'import { cn } from '../cn.ts'
/** * The type scale as one ladder of sizes with Tailwind's names, shared by `Text` and `Title`. Each * step is a `--text-*` token in theme.css. `md` is the step between `sm` and `base` that the * interface's controls use, and there is no `lg`, since nothing sits between body and heading. */export const textSizes = { xs: 'text-caption', sm: 'text-small', md: 'text-ui', base: 'text-body', xl: 'text-heading', '2xl': 'text-title', '3xl': 'text-display',}
export type TextSize = keyof typeof textSizes
const colors = { ink: 'text-ink', muted: 'text-muted', faint: 'text-faint', danger: 'text-danger',}
const weights = { normal: 'font-normal', medium: 'font-medium', semibold: 'font-semibold',}
interface Props extends Omit<ComponentProps<'span'>, 'ref'> { /** A span by default, or a paragraph, a side comment, or a block. */ as?: 'span' | 'p' | 'small' | 'div' /** The size around it by default. */ size?: TextSize /** The color around it by default. */ color?: keyof typeof colors /** The weight around it by default. */ weight?: keyof typeof weights}
/** * A run of text in a size, color, and weight from the theme, such as a hint in small grey. Its * `className` places it, or truncates or balances it. */export function Text(props: Props) { const { as: Tag = 'span', size, color, weight, className, ...rest } = props return ( <Tag {...rest} className={cn( size && textSizes[size], color && colors[color], weight && weights[weight], className, )} /> )}