Layout

DirectionProvider

Sets right-to-left or left-to-right for everything inside.

import { DirectionProvider } from "@flinbu/seed";

Right to left

القائمة

المحتوى

import { Card, Carousel, DirectionProvider, Resizable, ResizablePanel } from "@flinbu/seed";

<DirectionProvider dir="rtl">
  <div className="flex w-full max-w-xl flex-col gap-base">
    <Carousel aria-label="قوالب" items={["١", "٢", "٣", "٤"].map((n) => <Card key={n} className="flex h-24 items-center justify-center text-primary heading-h4-semibold">{n}</Card>)} slidesPerView={2} />
    <div className="h-32 overflow-hidden rounded-lg border border-secondary">
      <Resizable><ResizablePanel label="القائمة" defaultSize={35}><div className="p-sm text-secondary body-body-3-regular">القائمة</div></ResizablePanel><ResizablePanel><div className="p-sm text-secondary body-body-3-regular">المحتوى</div></ResizablePanel></Resizable>
    </div>
  </div>
</DirectionProvider>

Use it for

Arabic, Hebrew or Persian interfaces.

Use something else for

Mixing directions per component.

Props

Prop	Type	Default	Description
`dir`	`'ltr''rtl'`	`'ltr'`	Direction.
`wrap`	`boolean`	`true`	Render a wrapper with dir.

Accessibility

Arrow keys follow the reading direction in Carousel, Resizable and Chart.