@wecareu/text-wcu

Componente de texto padronizado do WeCareU Design System.

Instalação

npm install @wecareu/text-wcu @wecareu/theme @wecareu/tokens

Uso

import { TextWcu } from '@wecareu/text-wcu'

function MyComponent() {
  return (
    <TextWcu variant="heading" color="primary">
      Título da Página
    </TextWcu>
  )
}

Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | variant | 'body' \| 'caption' \| 'heading' \| 'label' | 'body' | Variante do texto | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'huge' | - | Tamanho do texto (sobrescreve o tamanho da variante) | | weight | 'regular' \| 'medium' \| 'semibold' \| 'bold' | - | Peso da fonte (sobrescreve o peso da variante) | | color | 'primary' \| 'secondary' \| 'tertiary' \| 'disabled' \| 'link' \| 'inverse' | 'primary' | Cor do texto | | textStyle | TextStyle \| TextStyle[] | - | Estilo customizado do texto | | testID | string | - | ID para testes | | style | TextStyle \| TextStyle[] | - | Estilo customizado do container |

Variantes

body

Texto padrão para conteúdo principal.

caption

Texto pequeno para legendas e descrições.

heading

Texto para títulos e cabeçalhos.

label

Texto para labels de formulários e elementos de interface.

Cores

• primary: Cor principal do texto
• secondary: Cor secundária do texto
• tertiary: Cor terciária do texto
• disabled: Cor para texto desabilitado
• link: Cor para links
• inverse: Cor inversa (para fundos escuros)

Tamanhos

• xs: 12px
• sm: 14px
• md: 16px
• lg: 18px
• xl: 20px
• xxl: 24px
• huge: 32px

Pesos

• regular: 400
• medium: 500
• semibold: 600
• bold: 700

Exemplos

Texto básico

<TextWcu>Texto simples</TextWcu>

Título

<TextWcu variant="heading" color="primary">
  Título Principal
</TextWcu>

Texto com tamanho customizado

<TextWcu size="lg" weight="semibold">
  Texto grande e semi-negrito
</TextWcu>

Texto de link

<TextWcu color="link" onPress={handlePress}>
  Clique aqui
</TextWcu>

Texto com estilo customizado

<TextWcu 
  style={{ textAlign: 'center', marginTop: 16 }}
  textStyle={{ fontStyle: 'italic' }}
>
  Texto centralizado e itálico
</TextWcu>

Dependências

• @wecareu/theme: Sistema de tema
• @wecareu/tokens: Tokens de design
• react: ^18.2.0
• react-native: ^0.74.0