Direita para esquerda (RTL)

Todos os componentes do Midas funcionam em direita para esquerda (RTL), como no Figma (variantes Dir=RTL). Espaçamentos, cantos, bordas, ícones de seta e a navegação por teclado se invertem sozinhos.

Como ativarCopy Anchor Link

1. Coloque dir="rtl" no elemento raiz (normalmente o <html>).
2. Envolva a aplicação no DirectionProvider, para menus, carrossel, toggles e outros componentes interativos saberem a direção:

import { DirectionProvider } from "@t2-educacao/midas";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  );
}

Para só uma área da página, use os dois no mesmo container:

<div dir="rtl">
  <DirectionProvider dir="rtl">
    <ToggleGroup type="single">...</ToggleGroup>
  </DirectionProvider>
</div>

useDirectionCopy Anchor Link

Para seus próprios componentes, leia a direção atual:

import { useDirection } from "@t2-educacao/midas";

const direcao = useDirection();

Ao criar componentesCopy Anchor Link

Use classes lógicas do Tailwind, que se invertem em RTL:

Ícones que indicam direção (setas, carets) recebem rtl:rotate-180.