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

apps/v4/examples/radix/pagination-rtl.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  useTranslation,
+  type Translations,
+} from "@/components/language-selector"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/styles/radix-nova/ui-rtl/pagination"
+
+const translations: Translations = {
+  en: {
+    dir: "ltr",
+    values: {
+      previous: "Previous",
+      next: "Next",
+    },
+  },
+  ar: {
+    dir: "rtl",
+    values: {
+      previous: "السابق",
+      next: "التالي",
+    },
+  },
+  he: {
+    dir: "rtl",
+    values: {
+      previous: "הקודם",
+      next: "הבא",
+    },
+  },
+}
+
+function toArabicNumerals(num: number): string {
+  const arabicNumerals = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"]
+  return num
+    .toString()
+    .split("")
+    .map((digit) => arabicNumerals[parseInt(digit, 10)])
+    .join("")
+}
+
+export function PaginationRtl() {
+  const { dir, t, language } = useTranslation(translations, "ar")
+
+  const formatNumber = (num: number): string => {
+    if (language === "ar") {
+      return toArabicNumerals(num)
+    }
+    return num.toString()
+  }
+
+  return (
+    <Pagination dir={dir}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" text={t.previous} />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">{formatNumber(1)}</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            {formatNumber(2)}
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">{formatNumber(3)}</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" text={t.next} />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}