Input Group

1"use client"
2 
3import { useState } from "react"
4import { toast } from "sonner"
5 
6import {
7  Example,
8  ExampleWrapper,
9} from "@/registry/base-vega/components/example"
10import { Button } from "@/registry/base-vega/ui/button"
11import {
12  ButtonGroup,
13  ButtonGroupText,
14} from "@/registry/base-vega/ui/button-group"
15import {
16  Card,
17  CardContent,
18  CardDescription,
19  CardFooter,
20  CardHeader,
21  CardTitle,
22} from "@/registry/base-vega/ui/card"
23import {
24  DropdownMenu,
25  DropdownMenuContent,
26  DropdownMenuItem,
27  DropdownMenuTrigger,
28} from "@/registry/base-vega/ui/dropdown-menu"
29import {
30  Field,
31  FieldDescription,
32  FieldGroup,
33  FieldLabel,
34} from "@/registry/base-vega/ui/field"
35import { Input } from "@/registry/base-vega/ui/input"
36import {
37  InputGroup,
38  InputGroupAddon,
39  InputGroupButton,
40  InputGroupInput,
41  InputGroupText,
42  InputGroupTextarea,
43} from "@/registry/base-vega/ui/input-group"
44import { Kbd, KbdGroup } from "@/registry/base-vega/ui/kbd"
45import {
46  Popover,
47  PopoverContent,
48  PopoverDescription,
49  PopoverHeader,
50  PopoverTitle,
51  PopoverTrigger,
52} from "@/registry/base-vega/ui/popover"
53import { Spinner } from "@/registry/base-vega/ui/spinner"
54import { Textarea } from "@/registry/base-vega/ui/textarea"
55import {
56  Tooltip,
57  TooltipContent,
58  TooltipTrigger,
59} from "@/registry/base-vega/ui/tooltip"
60import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
61 
62export default function InputGroupExample() {
63  const [country, setCountry] = useState("+1")
64 
65  return (
66    <ExampleWrapper className="min-w-0">
67      <InputGroupBasic />
68      <InputGroupWithAddons />
69      <InputGroupWithButtons />
70      <InputGroupWithTooltip country={country} setCountry={setCountry} />
71      <InputGroupWithKbd />
72      <InputGroupInCard />
73      <InputGroupTextareaExamples />
74    </ExampleWrapper>
75  )
76}
77 
78function InputGroupBasic() {
79  return (
80    <Example title="Basic">
81      <FieldGroup>
82        <Field>
83          <FieldLabel htmlFor="input-default-01">
84            Default (No Input Group)
85          </FieldLabel>
86          <Input placeholder="Placeholder" id="input-default-01" />
87        </Field>
88        <Field>
89          <FieldLabel htmlFor="input-group-02">Input Group</FieldLabel>
90          <InputGroup>
91            <InputGroupInput id="input-group-02" placeholder="Placeholder" />
92          </InputGroup>
93        </Field>
94        <Field data-disabled="true">
95          <FieldLabel htmlFor="input-disabled-03">Disabled</FieldLabel>
96          <InputGroup>
97// … truncated