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

apps/v4/examples/aria/input-group-with-tooltip.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import { ChevronDownIcon, InfoIcon, StarIcon } from "lucide-react"
+import { toast } from "sonner"
+
+import {
+  ButtonGroup,
+  ButtonGroupText,
+} from "@/styles/aria-nova/ui/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/styles/aria-nova/ui/dropdown-menu"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/styles/aria-nova/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/styles/aria-nova/ui/input-group"
+import {
+  Popover,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/styles/aria-nova/ui/popover"
+import { Tooltip, TooltipTrigger } from "@/styles/aria-nova/ui/tooltip"
+
+export function InputGroupWithTooltip({
+  country,
+  setCountry,
+}: {
+  country: string
+  setCountry: (value: string) => void
+}) {
+  return (
+    <>
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="input-tooltip-20">Tooltip</FieldLabel>
+          <InputGroup>
+            <InputGroupInput id="input-tooltip-20" />
+            <InputGroupAddon align="inline-end">
+              <TooltipTrigger>
+                <InputGroupButton className="rounded-full" size="icon-xs">
+                  <InfoIcon />
+                </InputGroupButton>
+                <Tooltip>This is content in a tooltip.</Tooltip>
+              </TooltipTrigger>
+            </InputGroupAddon>
+          </InputGroup>
+          <FieldDescription>
+            This is a description of the input group.
+          </FieldDescription>
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="input-dropdown-21">Dropdown</FieldLabel>
+          <InputGroup>
+            <InputGroupInput id="input-dropdown-21" />
+            <InputGroupAddon>
+              <DropdownMenuTrigger>
+                <InputGroupButton className="text-muted-foreground tabular-nums">
+                  {country} <ChevronDownIcon />
+                </InputGroupButton>
+                <DropdownMenu
+                  placement="bottom start"
+                  className="min-w-16"
+                  offset={10}
+                  crossOffset={-8}
+                >
+                  <DropdownMenuItem onClick={() => setCountry("+1")}>
+                    +1
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setCountry("+44")}>
+                    +44
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setCountry("+46")}>
+                    +46
+                  </DropdownMenuItem>
+                </DropdownMenu>
+              </DropdownMenuTrigger>
+            </InputGroupAddon>
+          </InputGroup>
+          <FieldDescription>
+            This is a description of the input group.
+          </FieldDescription>
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="input-secure-19">Popover</FieldLabel>
+          <InputGroup>
+            <PopoverTrigger>
+              <InputGroupAddon>
+                <InputGroupButton variant="secondary" size="icon-xs">
+                  <InfoIcon />
+                </InputGroupButton>
+              </InputGroupAddon>
+              <Popover placement="bottom start">
+                <PopoverHeader>
+                  <PopoverTitle>Your connection is not secure.</PopoverTitle>
+                  <PopoverDescription>
+                    You should not enter any sensitive information on this site.
+                  </PopoverDescription>
+                </PopoverHeader>
+              </Popover>
+            </PopoverTrigger>
+            <InputGroupAddon className="pl-1 text-muted-foreground">
+              https://
+            </InputGroupAddon>
+            <InputGroupInput id="input-secure-19" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton
+                size="icon-xs"
+                onClick={() => toast("Added to favorites")}
+              >
+                <StarIcon />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+          <FieldDescription>
+            This is a description of the input group.
+          </FieldDescription>
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="url">Button Group</FieldLabel>
+          <ButtonGroup>
+            <ButtonGroupText>https://</ButtonGroupText>
+            <InputGroup>
+              <InputGroupInput id="url" />
+              <InputGroupAddon align="inline-end">
+                <InfoIcon />
+              </InputGroupAddon>
+            </InputGroup>
+            <ButtonGroupText>.com</ButtonGroupText>
+          </ButtonGroup>
+          <FieldDescription>
+            This is a description of the input group.
+          </FieldDescription>
+        </Field>
+      </FieldGroup>
+    </>
+  )
+}