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

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import {
+  IconCheck,
+  IconChevronDown,
+  IconInfoCircle,
+  IconPlus,
+} from "@tabler/icons-react"
+import { ArrowUpIcon, Search } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/styles/base-nova/ui-rtl/dropdown-menu"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/styles/base-nova/ui-rtl/input-group"
+import { Separator } from "@/styles/base-nova/ui-rtl/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/base-nova/ui-rtl/tooltip"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    search: "بحث...",
+    results: "12 نتيجة",
+    example: "example.com",
+    tooltipContent: "هذا محتوى في تلميح.",
+    askSearchChat: "اسأل، ابحث أو تحدث...",
+    add: "إضافة",
+    auto: "تلقائي",
+    agent: "وكيل",
+    manual: "يدوي",
+    used: "52% مستخدم",
+    send: "إرسال",
+  },
+  he: {
+    dir: "rtl" as const,
+    search: "חיפוש...",
+    results: "12 תוצאות",
+    example: "example.com",
+    tooltipContent: "זה תוכן בטולטיפ.",
+    askSearchChat: "שאל, חפש או שוחח...",
+    add: "הוסף",
+    auto: "אוטומטי",
+    agent: "סוכן",
+    manual: "ידני",
+    used: "52% בשימוש",
+    send: "שלח",
+  },
+}
+
+export function InputGroupDemo() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+
+  return (
+    <div dir={t.dir} className="grid w-full max-w-sm gap-6">
+      <InputGroup>
+        <InputGroupInput placeholder={t.search} />
+        <InputGroupAddon>
+          <Search />
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">{t.results}</InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder={t.example} />
+        <InputGroupAddon align="inline-end">
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <InputGroupButton
+                  className="rounded-full"
+                  size="icon-xs"
+                  aria-label={t.add}
+                />
+              }
+            >
+              <IconInfoCircle />
+            </TooltipTrigger>
+            <TooltipContent>{t.tooltipContent}</TooltipContent>
+          </Tooltip>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupTextarea placeholder={t.askSearchChat} />
+        <InputGroupAddon align="block-end">
+          <InputGroupButton
+            variant="outline"
+            className="rounded-full"
+            size="icon-xs"
+            aria-label={t.add}
+          >
+            <IconPlus />
+          </InputGroupButton>
+          <DropdownMenu>
+            <DropdownMenuTrigger render={<InputGroupButton variant="ghost" />}>
+              <IconChevronDown />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="top" align="start">
+              <DropdownMenuItem>{t.auto}</DropdownMenuItem>
+              <DropdownMenuItem>{t.agent}</DropdownMenuItem>
+              <DropdownMenuItem>{t.manual}</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <InputGroupText className="ms-auto">{t.used}</InputGroupText>
+          <Separator orientation="vertical" className="h-4!" />
+          <InputGroupButton
+            variant="default"
+            className="rounded-full"
+            size="icon-xs"
+          >
+            <ArrowUpIcon />
+            <span className="sr-only">{t.send}</span>
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder="shadcn" />
+        <InputGroupAddon align="inline-end">
+          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
+            <IconCheck className="size-3 text-white" />
+          </div>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}