Direction

Tells Base UI components the reading direction, so keyboard and layout behave in right-to-left languages.

الإشعارات

Usage

import { DirectionProvider } from "@zynactra/ui/direction"

app/layout.tsx

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

useDirection() reads the current direction inside a component.

Set dir on the HTML too. The provider handles component behaviour (arrow keys in sliders, menus opening to the correct side); dir handles text and layout.
Use logical utilities (ms-*, pe-*, start-*) instead of left/right ones in your own code so it flips with the direction.
Icons that point (arrows, chevrons) should flip in RTL; icons of objects shouldn't.

Behaviour and props come from Base UI. See the Base UI Direction Provider docs.