Combobox

1"use client"
2 
3import * as React 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 { Card, CardContent, CardFooter } from "@/registry/base-vega/ui/card"
12import {
13  Combobox,
14  ComboboxChip,
15  ComboboxChips,
16  ComboboxChipsInput,
17  ComboboxCollection,
18  ComboboxContent,
19  ComboboxEmpty,
20  ComboboxGroup,
21  ComboboxInput,
22  ComboboxItem,
23  ComboboxLabel,
24  ComboboxList,
25  ComboboxSeparator,
26  ComboboxTrigger,
27  ComboboxValue,
28  useComboboxAnchor,
29} from "@/registry/base-vega/ui/combobox"
30import {
31  Dialog,
32  DialogContent,
33  DialogDescription,
34  DialogFooter,
35  DialogHeader,
36  DialogTitle,
37  DialogTrigger,
38} from "@/registry/base-vega/ui/dialog"
39import {
40  Field,
41  FieldDescription,
42  FieldError,
43  FieldGroup,
44  FieldLabel,
45} from "@/registry/base-vega/ui/field"
46import { Input } from "@/registry/base-vega/ui/input"
47import {
48  InputGroup,
49  InputGroupAddon,
50  InputGroupInput,
51} from "@/registry/base-vega/ui/input-group"
52import {
53  Item,
54  ItemContent,
55  ItemDescription,
56  ItemTitle,
57} from "@/registry/base-vega/ui/item"
58import {
59  Select,
60  SelectContent,
61  SelectGroup,
62  SelectItem,
63  SelectTrigger,
64  SelectValue,
65} from "@/registry/base-vega/ui/select"
66import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
67 
68export default function ComboboxExample() {
69  return (
70    <ExampleWrapper>
71      <ComboboxBasic />
72      <ComboboxDisabled />
73      <ComboboxSides />
74      <ComboboxInvalid />
75      <ComboboxWithClear />
76      <ComboboxAutoHighlight />
77      <ComboboxWithGroups />
78      <ComboboxWithGroupsAndSeparator />
79      <ComboboxLargeList />
80      <ComboxboxInputAddon />
81      <ComboboxInPopup />
82      <ComboboxWithForm />
83      <ComboboxMultiple />
84      <ComboboxMultipleDisabled />
85      <ComboboxMultipleInvalid />
86      <ComboboxMultipleNoRemove />
87      <ComboboxWithCustomItems />
88      <ComboboxInDialog />
89      <ComboboxWithOtherInputs />
90      <ComboboxDisabledItems />
91    </ExampleWrapper>
92  )
93}
94 
95const frameworks = [
96  "Next.js",
97  "SvelteKit",
98  "Nuxt.js",
99  "Remix",
100  "Astro",
101] as const
102 
103const countries = [
104  { code: "", value: "", continent: "", label: "Select country" },
105  { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
106  { code: "al", value: "albania", label: "Albania", continent: "Europe" },
107// … truncated