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

apps/v4/examples/base/button-group-rtl.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArchiveIcon,
+  ArrowLeftIcon,
+  CalendarPlusIcon,
+  ClockIcon,
+  ListFilterIcon,
+  MailCheckIcon,
+  MoreHorizontalIcon,
+  TagIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+import {
+  useTranslation,
+  type Translations,
+} from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/styles/base-nova/ui-rtl/dropdown-menu"
+
+const translations: Translations = {
+  en: {
+    dir: "ltr",
+    values: {
+      archive: "Archive",
+      report: "Report",
+      snooze: "Snooze",
+      markAsRead: "Mark as Read",
+      addToCalendar: "Add to Calendar",
+      addToList: "Add to List",
+      labelAs: "Label As...",
+      personal: "Personal",
+      work: "Work",
+      other: "Other",
+      trash: "Trash",
+    },
+  },
+  ar: {
+    dir: "rtl",
+    values: {
+      archive: "أرشفة",
+      report: "تقرير",
+      snooze: "تأجيل",
+      markAsRead: "وضع علامة كمقروء",
+      addToCalendar: "إضافة إلى التقويم",
+      addToList: "إضافة إلى القائمة",
+      labelAs: "تصنيف كـ...",
+      personal: "شخصي",
+      work: "عمل",
+      other: "آخر",
+      trash: "سلة المهملات",
+    },
+  },
+  he: {
+    dir: "rtl",
+    values: {
+      archive: "ארכיון",
+      report: "דוח",
+      snooze: "דחה",
+      markAsRead: "סמן כנקרא",
+      addToCalendar: "הוסף ליומן",
+      addToList: "הוסף לרשימה",
+      labelAs: "תייג כ...",
+      personal: "אישי",
+      work: "עבודה",
+      other: "אחר",
+      trash: "פח",
+    },
+  },
+}
+
+export function ButtonGroupRtl() {
+  const { dir, t, language } = useTranslation(translations, "ar")
+  const [label, setLabel] = React.useState("personal")
+
+  return (
+    <div dir={dir}>
+      <ButtonGroup>
+        <ButtonGroup className="hidden sm:flex">
+          <Button variant="outline" size="icon" aria-label="Go Back">
+            <ArrowLeftIcon className="rtl:rotate-180" />
+          </Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="outline">{t.archive}</Button>
+          <Button variant="outline">{t.report}</Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="outline">{t.snooze}</Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size="icon"
+                  aria-label="More Options"
+                />
+              }
+            >
+              <MoreHorizontalIcon />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align={dir === "rtl" ? "start" : "end"}
+              data-lang={dir === "rtl" ? language : undefined}
+              dir={dir}
+              className="w-40"
+            >
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <MailCheckIcon />
+                  {t.markAsRead}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ArchiveIcon />
+                  {t.archive}
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <ClockIcon />
+                  {t.snooze}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CalendarPlusIcon />
+                  {t.addToCalendar}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ListFilterIcon />
+                  {t.addToList}
+                </DropdownMenuItem>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <TagIcon />
+                    {t.labelAs}
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent
+                    dir={dir}
+                    data-lang={dir === "rtl" ? language : undefined}
+                  >
+                    <DropdownMenuRadioGroup
+                      value={label}
+                      onValueChange={setLabel}
+                    >
+                      <DropdownMenuRadioItem value="personal">
+                        {t.personal}
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="work">
+                        {t.work}
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="other">
+                        {t.other}
+                      </DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem variant="destructive">
+                  <Trash2Icon />
+                  {t.trash}
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </ButtonGroup>
+      </ButtonGroup>
+    </div>
+  )
+}