Select

1"use client"
2 
3import {
4  Example,
5  ExampleWrapper,
6} from "@/registry/base-vega/components/example"
7import { Button } from "@/registry/base-vega/ui/button"
8import {
9  Dialog,
10  DialogContent,
11  DialogDescription,
12  DialogHeader,
13  DialogTitle,
14  DialogTrigger,
15} from "@/registry/base-vega/ui/dialog"
16import {
17  Field,
18  FieldDescription,
19  FieldError,
20  FieldLabel,
21} from "@/registry/base-vega/ui/field"
22import { Input } from "@/registry/base-vega/ui/input"
23import {
24  Item,
25  ItemContent,
26  ItemDescription,
27  ItemTitle,
28} from "@/registry/base-vega/ui/item"
29import {
30  NativeSelect,
31  NativeSelectOption,
32} from "@/registry/base-vega/ui/native-select"
33import {
34  Select,
35  SelectContent,
36  SelectGroup,
37  SelectItem,
38  SelectLabel,
39  SelectSeparator,
40  SelectTrigger,
41  SelectValue,
42} from "@/registry/base-vega/ui/select"
43import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
44 
45export default function SelectExample() {
46  return (
47    <ExampleWrapper>
48      <SelectBasic />
49      <SelectSides />
50      <SelectWithIcons />
51      <SelectWithGroups />
52      <SelectLargeList />
53      <SelectMultiple />
54      <SelectSizes />
55      <SelectPlan />
56      <SelectWithButton />
57      <SelectItemAligned />
58      <SelectWithField />
59      <SelectInvalid />
60      <SelectInline />
61      <SelectDisabled />
62      <SelectInDialog />
63    </ExampleWrapper>
64  )
65}
66 
67function SelectBasic() {
68  const items = [
69    { label: "Select a fruit", value: null },
70    { label: "Apple", value: "apple" },
71    { label: "Banana", value: "banana" },
72    { label: "Blueberry", value: "blueberry" },
73    { label: "Grapes", value: "grapes" },
74    { label: "Pineapple", value: "pineapple" },
75  ]
76  return (
77    <Example title="Basic">
78      <Select items={items}>
79        <SelectTrigger>
80          <SelectValue />
81        </SelectTrigger>
82        <SelectContent>
83          <SelectGroup>
84            {items.map((item) => (
85              <SelectItem key={item.value} value={item.value}>
86                {item.label}
87              </SelectItem>
88            ))}
89          </SelectGroup>
90        </SelectContent>
91      </Select>
92    </Example>
93  )
94}
95 
96function SelectSides() {
97  const items = [
98    { label: "Select", value: null },
99    { label: "Apple", value: "apple" },
100    { label: "Banana", value: "banana" },
101    { label: "Blueberry", value: "blueberry" },
102  ]
103  return (
104    <Example title="Sides" containerClassName="col-span-2">
105      <div className="flex flex-wrap justify-center gap-2">
106        {(
107// … truncated