{"name":"direction","title":"Direction","description":"Sets the text direction (ltr/rtl) for its descendants.","installCommand":"bunx marko-ui add direction -y","usageTags":"<DirectionProvider>","importSnippet":"import DirectionProvider from \"@/components/ui/direction/direction-provider.marko\";\nimport { getDirection } from \"@/components/ui/direction/direction.ts\";","usageSnippet":"<html dir=\"rtl\">\n  <body>\n    <DirectionProvider direction=\"rtl\">\n      <!-- Your app content -->\n    </DirectionProvider>\n  </body>\n</html>","tags":["DirectionDirectionProvider"],"parts":[],"props":[{"name":"dir","type":"'ltr' | 'rtl'","required":false,"description":"Text direction propagated to descendants."},{"name":"direction","type":"'ltr' | 'rtl'","required":false,"description":"Alias for `dir`, matching the shadcn source's extra `direction` prop."}],"events":[],"keyboard":[],"accessibilityNotes":["`dir` on the wrapping element is a real HTML attribute, so it participates in the browser's native bidi algorithm and is picked up by assistive technology the same way `dir` on any other element is — no ARIA wiring required.","Prefer setting `dir` on `<html>` for the whole document's default direction; use `DirectionProvider` to override direction for a subtree (e.g. previewing RTL content, or a widget whose content direction differs from the page).","`getDirection(element)` lets non-Marko-reactive code (event handlers, imperative DOM logic) read the effective direction the same way descendants inherit it visually — useful for direction-aware keyboard handling (e.g. swapping ArrowLeft/ArrowRight) outside of Zag machines, which already resolve `dir` themselves."],"examples":[{"id":"card-rtl","title":"RTL","source":"import DirectionProvider from \"@marko-ui/shadcn/ui/direction/direction-provider.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardAction from \"@marko-ui/shadcn/ui/card/action.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<DirectionProvider direction=\"rtl\" class=\"w-full max-w-sm\">\n  <Card>\n    <CardHeader>\n      <CardTitle>تسجيل الدخول إلى حسابك</CardTitle>\n      <CardDescription>أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك</CardDescription>\n      <CardAction>\n        <Button type=\"button\" variant=\"link\">إنشاء حساب</Button>\n      </CardAction>\n    </CardHeader>\n    <CardContent>\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"grid gap-2\">\n          <Label for=\"direction-card-rtl-email\">البريد الإلكتروني</Label>\n          <TextInput id=\"direction-card-rtl-email\" type=\"email\" placeholder=\"m@example.com\" required/>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"direction-card-rtl-password\">كلمة المرور</Label>\n            <a href=\"#\" class=\"ms-auto inline-block text-sm underline-offset-4 hover:underline\">\n              نسيت كلمة المرور؟\n            </a>\n          </div>\n          <TextInput id=\"direction-card-rtl-password\" type=\"password\" required/>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter class=\"flex-col gap-2\">\n      <Button type=\"submit\" class=\"w-full\">تسجيل الدخول</Button>\n      <Button type=\"button\" variant=\"outline\" class=\"w-full\">تسجيل الدخول باستخدام Google</Button>\n    </CardFooter>\n  </Card>\n</DirectionProvider>","description":"Wrap any subtree in `DirectionProvider` with `direction=\"rtl\"` to flip it into right-to-left layout — descendants like `Card` restyle correctly via inherited `dir` and logical (`ms-*`/`me-*`) utility classes."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div","composition":"`DirectionProvider` is a single-file component: it wraps its\nbody in one element and sets `dir` on it directly (see the deviation note\nabove). There is no separate trigger/content/etc. anatomy to compose —\njust wrap the subtree that should adopt the given direction."}