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/button-group-input-group.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/button-group-input-group.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import * as React from "react"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/styles/base-nova/ui-rtl/input-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/base-nova/ui-rtl/tooltip"
+
+const translations = {
+  ar: {
+    dir: "rtl" as const,
+    add: "إضافة",
+    voicePlaceholder: "سجل وأرسل صوتًا...",
+    messagePlaceholder: "أرسل رسالة...",
+    voiceMode: "الوضع الصوتي",
+  },
+  he: {
+    dir: "rtl" as const,
+    add: "הוסף",
+    voicePlaceholder: "הקלט ושלח אודיו...",
+    messagePlaceholder: "שלח הודעה...",
+    voiceMode: "מצב קולי",
+  },
+}
+
+export function ButtonGroupInputGroup() {
+  const context = useLanguageContext()
+  const lang = context?.language === "he" ? "he" : "ar"
+  const t = translations[lang]
+  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
+
+  return (
+    <ButtonGroup dir={t.dir}>
+      <ButtonGroup>
+        <Button variant="outline" size="icon" aria-label={t.add}>
+          <PlusIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup className="flex-1">
+        <InputGroup>
+          <InputGroupInput
+            placeholder={
+              voiceEnabled ? t.voicePlaceholder : t.messagePlaceholder
+            }
+            disabled={voiceEnabled}
+          />
+          <InputGroupAddon align="inline-end">
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <InputGroupButton
+                    onClick={() => setVoiceEnabled(!voiceEnabled)}
+                    data-active={voiceEnabled}
+                    className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
+                    aria-pressed={voiceEnabled}
+                    size="icon-xs"
+                    aria-label={t.voiceMode}
+                  />
+                }
+              >
+                <AudioLinesIcon />
+              </TooltipTrigger>
+              <TooltipContent>{t.voiceMode}</TooltipContent>
+            </Tooltip>
+          </InputGroupAddon>
+        </InputGroup>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}