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

apps/v4/registry/new-york-v4/examples/input-group-button.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+import {
+  IconCheck,
+  IconCopy,
+  IconInfoCircle,
+  IconStar,
+} from "@tabler/icons-react"
+
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/registry/new-york-v4/ui/input-group"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york-v4/ui/popover"
+
+export default function InputGroupButtonExample() {
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+  const [isFavorite, setIsFavorite] = React.useState(false)
+
+  return (
+    <div className="grid w-full max-w-sm gap-6">
+      <InputGroup>
+        <InputGroupInput placeholder="https://x.com/shadcn" readOnly />
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            aria-label="Copy"
+            title="Copy"
+            size="icon-xs"
+            onClick={() => {
+              copyToClipboard("https://x.com/shadcn")
+            }}
+          >
+            {isCopied ? <IconCheck /> : <IconCopy />}
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup className="[--radius:9999px]">
+        <Popover>
+          <PopoverTrigger asChild>
+            <InputGroupAddon>
+              <InputGroupButton variant="secondary" size="icon-xs">
+                <IconInfoCircle />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </PopoverTrigger>
+          <PopoverContent
+            align="start"
+            className="flex flex-col gap-1 rounded-xl text-sm"
+          >
+            <p className="font-medium">Your connection is not secure.</p>
+            <p>You should not enter any sensitive information on this site.</p>
+          </PopoverContent>
+        </Popover>
+        <InputGroupAddon className="pl-1.5 text-muted-foreground">
+          https://
+        </InputGroupAddon>
+        <InputGroupInput id="input-secure-19" />
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            onClick={() => setIsFavorite(!isFavorite)}
+            size="icon-xs"
+          >
+            <IconStar
+              data-favorite={isFavorite}
+              className="data-[favorite=true]:fill-blue-600 data-[favorite=true]:stroke-blue-600"
+            />
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder="Type to search..." />
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton variant="secondary">Search</InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}