Idiomas e RTL

Traduza os textos que os componentes trazem, defina o locale dos componentes de data e use qualquer estilo da direita para a esquerda.

Textos embutidosCopy Anchor Link

Quase todo texto numa interface feita com o Camaleo é seu: rótulos, títulos, texto dos botões. Alguns componentes também trazem textos próprios, como o nome de um botão de fechar, a mensagem de uma tabela vazia ou o "Página 3" lido pelo leitor de tela. Esses vêm em inglês por padrão.

Ponha um MessagesProvider perto da raiz para trocá-los. Escolha um idioma abaixo: só os textos dos componentes mudam.

import { MessagesProvider } from "@camaleo/react";

<MessagesProvider locale="pt-BR">{children}</MessagesProvider>

O locale escolhe um pacote embutido: "en" (o padrão) ou "pt-BR". A prop do componente sempre vence o provider, então <Pagination previousLabel="Voltar" /> continua dizendo "Voltar".

Troque só alguns textosCopy Anchor Link

O messages aceita qualquer parte das chaves. Cada grupo que você passa é mesclado sobre o conjunto de baixo, então você só escreve o que muda:

<MessagesProvider
  locale="pt-BR"
  messages={{ drawer: { close: "Fechar painel" }, dataTable: { empty: "Nenhum pedido ainda." } }}
>
  {children}
</MessagesProvider>

Providers podem ser aninhados. Um provider interno sem locale parte dos textos do pai, o que ajuda quando uma área tem o próprio vocabulário:

<MessagesProvider messages={{ dataTable: { empty: "Nenhum pedido com esses filtros." } }}>
  {children}
</MessagesProvider>

Para um idioma que o Camaleo não traz, escreva um conjunto completo com o tipo Messages e passe em messages. O tipo garante que nenhuma chave fique faltando.

Servidor ou clienteCopy Anchor Link

Algumas mensagens são funções, como pagination.page(3) → "Página 3". O React não passa funções de um Server Component para um de cliente, então:

• Num Server Component (um layout raiz), passe locale e messages só com textos.
• Para trocar uma função, ponha o provider num componente de cliente:

"use client";
import { MessagesProvider } from "@camaleo/react";

export function AppMessages({ children }: { children: React.ReactNode }) {
  return (
    <MessagesProvider
      locale="pt-BR"
      messages={{ pagination: { page: (page) => `Ir para a página ${page}` } }}
    >
      {children}
    </MessagesProvider>
  );
}

Leia os textos nos seus componentes com useMessages() (cliente) ou <Message pick="spinner.label" /> (servidor). Veja Server Components e SSR.

Todas as chaves de mensagemCopy Anchor Link

Esta é a interface Messages de packages/react/src/messages.tsx, com os valores dos pacotes en e ptBR. As chaves que são funções mostram o resultado de uma chamada de exemplo.

Datas e horáriosCopy Anchor Link

O MessagesProvider não mexe em datas. Os componentes de data (Calendar, RangeCalendar, DatePicker, DateRangePicker, DateField, TimeField) recebem a prop locale, que define a ordem dos segmentos, os nomes dos meses e dos dias, o primeiro dia da semana e o relógio. A mesma data em três locales:

Sem locale, eles usam o I18nProvider mais próximo (que o Camaleo reexporta) e depois o idioma do navegador. Defina no servidor, para o servidor e o navegador formatarem igual:

import { I18nProvider, MessagesProvider } from "@camaleo/react";

<MessagesProvider locale="pt-BR">
  <I18nProvider locale="pt-BR">{children}</I18nProvider>
</MessagesProvider>

Da direita para a esquerdaCopy Anchor Link

Os estilos e o CSS dos componentes usam propriedades lógicas (margin-inline-start, inset-inline-end, border-start-start-radius…), então o mesmo CSS funciona nas duas direções. Para virar uma página ou uma seção para RTL, faça três coisas juntas:

1. dir="rtl" no elemento, para o layout do navegador.
2. lang no mesmo elemento, para o leitor de tela escolher a voz certa.
3. <DirectionProvider direction="rtl"> em volta, para os componentes inverterem o teclado (setas em abas, sliders e menus) e os popups.

Troque a direção abaixo e depois escolha outros estilos na barra "visualizar em": abas, slider, switch e botões espelham em todos os estilos.

import { DirectionProvider } from "@camaleo/react";

const dir = lang === "ar" ? "rtl" : "ltr";

<html lang={lang} dir={dir}>
  <body>
    <DirectionProvider direction={dir}>{children}</DirectionProvider>
  </body>
</html>

Popups abertos dentro de uma seção RTL continuam RTL: o invólucro do portal copia a direção. Ícones seus que significam "avançar" ou "voltar" (setas, chevrons) precisam ser invertidos em RTL; ícones que mostram uma coisa (um sino, uma lixeira) não.