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

apps/v4/examples/aria/button-group-select.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRightIcon } from "lucide-react"
+
+import { Button } from "@/styles/aria-nova/ui/button"
+import { ButtonGroup } from "@/styles/aria-nova/ui/button-group"
+import { Input } from "@/styles/aria-nova/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+} from "@/styles/aria-nova/ui/select"
+
+const CURRENCIES = [
+  { label: "US Dollar", value: "$" },
+  { label: "Euro", value: "€" },
+  { label: "British Pound", value: "£" },
+]
+
+export default function ButtonGroupSelect() {
+  const [currency, setCurrency] = React.useState("$")
+
+  return (
+    <ButtonGroup>
+      <ButtonGroup>
+        <Select
+          value={currency}
+          onChange={(value) => setCurrency(value as string)}
+        >
+          <SelectTrigger className="font-mono">{currency}</SelectTrigger>
+          <SelectContent placement="bottom start">
+            <SelectGroup>
+              {CURRENCIES.map((item) => (
+                <SelectItem key={item.value} id={item.value}>
+                  {item.value}{" "}
+                  <span className="text-muted-foreground">{item.label}</span>
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Input placeholder="10.00" pattern="[0-9]*" />
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button aria-label="Send" size="icon" variant="outline">
+          <ArrowRightIcon />
+        </Button>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}