Direction

function DirectionDemo() {  const [dir, setDir] = useState<"ltr" | "rtl">("ltr")​  return (    <Stack gap="3">      <HStack gap="2">        <Button size="sm" variant={dir === "ltr" ? "solid" : "outline"} onClick={() => setDir("ltr")}>          LTR        </Button>        <Button size="sm" variant={dir === "rtl" ? "solid" : "outline"} onClick={() => setDir("rtl")}>          RTL        </Button>      </HStack>      <Direction.Root dir={dir}>        <Card.Root p="4" maxW="sm">          <Text fontSize="sm" fontWeight="medium">            {dir === "rtl" ? "مرحبا بكم في التطبيق" : "Welcome to the app"}          </Text>          <HStack gap="2" mt="3">            <Button size="sm" variant="outline">Cancel</Button>            <Button size="sm">Continue</Button>          </HStack>        </Card.Root>      </Direction.Root>    </Stack>  )}