snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/base/spinner-rtl.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  useTranslation,
+  type Translations,
+} from "@/components/language-selector"
+import {
+  Item,
+  ItemContent,
+  ItemMedia,
+  ItemTitle,
+} from "@/styles/base-nova/ui-rtl/item"
+import { Spinner } from "@/styles/base-nova/ui-rtl/spinner"
+
+const translations: Translations = {
+  en: {
+    dir: "ltr",
+    values: {
+      title: "Processing payment...",
+      amount: "$100.00",
+    },
+  },
+  ar: {
+    dir: "rtl",
+    values: {
+      title: "جاري معالجة الدفع...",
+      amount: "١٠٠.٠٠ دولار",
+    },
+  },
+  he: {
+    dir: "rtl",
+    values: {
+      title: "מעבד תשלום...",
+      amount: "$100.00",
+    },
+  },
+}
+
+export function SpinnerRtl() {
+  const { dir, t } = useTranslation(translations, "ar")
+
+  return (
+    <div
+      className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]"
+      dir={dir}
+    >
+      <Item variant="muted" dir={dir}>
+        <ItemMedia>
+          <Spinner />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle className="line-clamp-1">{t.title}</ItemTitle>
+        </ItemContent>
+        <ItemContent className="flex-none justify-end">
+          <span className="text-sm tabular-nums">{t.amount}</span>
+        </ItemContent>
+      </Item>
+    </div>
+  )
+}