From c487137ac5e5c687ba98b07926636d5476c681e2 Mon Sep 17 00:00:00 2001
From: Saeid Zareie <65568529+Saeid-Za@users.noreply.github.com>
Date: Tue, 5 Mar 2024 16:52:07 +0330
Subject: [PATCH] docs: adding more examples for `DropdownMenu` and `Select`
 components

---
 apps/www/__registry__/index.ts                |  42 +++++++
 .../content/docs/components/dropdown-menu.md  |  19 ++-
 apps/www/src/content/docs/components/input.md |   7 +-
 .../www/src/content/docs/components/select.md |  10 +-
 .../example/DropdownMenuCheckboxes.vue        |  49 ++++++++
 .../example/DropdownMenuRadioGroup.vue        |  40 ++++++
 .../default/example/SelectScrollable.vue      | 117 ++++++++++++++++++
 .../example/DropdownMenuCheckboxes.vue        |  49 ++++++++
 .../example/DropdownMenuRadioGroup.vue        |  40 ++++++
 .../new-york/example/SelectScrollable.vue     | 117 ++++++++++++++++++
 10 files changed, 477 insertions(+), 13 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
 create mode 100644 apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue
 create mode 100644 apps/www/src/lib/registry/default/example/SelectScrollable.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SelectScrollable.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index ccac6553..ec79dd0f 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -423,6 +423,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/DrawerDialog.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DrawerDialog.vue"],
     },
+    "DropdownMenuCheckboxes": {
+      name: "DropdownMenuCheckboxes",
+      type: "components:example",
+      registryDependencies: ["button","dropdown-menu"],
+      component: () => import("../src/lib/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DropdownMenuCheckboxes.vue"],
+    },
     "DropdownMenuDemo": {
       name: "DropdownMenuDemo",
       type: "components:example",
@@ -430,6 +437,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DropdownMenuDemo.vue"],
     },
+    "DropdownMenuRadioGroup": {
+      name: "DropdownMenuRadioGroup",
+      type: "components:example",
+      registryDependencies: ["button","dropdown-menu"],
+      component: () => import("../src/lib/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DropdownMenuRadioGroup.vue"],
+    },
     "HoverCardDemo": {
       name: "HoverCardDemo",
       type: "components:example",
@@ -605,6 +619,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/SelectForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/SelectForm.vue"],
     },
+    "SelectScrollable": {
+      name: "SelectScrollable",
+      type: "components:example",
+      registryDependencies: ["select"],
+      component: () => import("../src/lib/registry/default/example/SelectScrollable.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/SelectScrollable.vue"],
+    },
     "SeparatorDemo": {
       name: "SeparatorDemo",
       type: "components:example",
@@ -1411,6 +1432,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DrawerDialog.vue"],
     },
+    "DropdownMenuCheckboxes": {
+      name: "DropdownMenuCheckboxes",
+      type: "components:example",
+      registryDependencies: ["button","dropdown-menu"],
+      component: () => import("../src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue"],
+    },
     "DropdownMenuDemo": {
       name: "DropdownMenuDemo",
       type: "components:example",
@@ -1418,6 +1446,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DropdownMenuDemo.vue"],
     },
+    "DropdownMenuRadioGroup": {
+      name: "DropdownMenuRadioGroup",
+      type: "components:example",
+      registryDependencies: ["button","dropdown-menu"],
+      component: () => import("../src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue"],
+    },
     "HoverCardDemo": {
       name: "HoverCardDemo",
       type: "components:example",
@@ -1593,6 +1628,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/SelectForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/SelectForm.vue"],
     },
+    "SelectScrollable": {
+      name: "SelectScrollable",
+      type: "components:example",
+      registryDependencies: ["select"],
+      component: () => import("../src/lib/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/SelectScrollable.vue"],
+    },
     "SeparatorDemo": {
       name: "SeparatorDemo",
       type: "components:example",
diff --git a/apps/www/src/content/docs/components/dropdown-menu.md b/apps/www/src/content/docs/components/dropdown-menu.md
index 503461e4..51e64a93 100644
--- a/apps/www/src/content/docs/components/dropdown-menu.md
+++ b/apps/www/src/content/docs/components/dropdown-menu.md
@@ -1,18 +1,17 @@
 ---
 title: Dropdown Menu
 description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
-source: apps/www/src/lib/registry/default/ui/dropdown-menu 
+source: apps/www/src/lib/registry/default/ui/dropdown-menu
 primitive: https://www.radix-vue.com/components/dropdown-menu.html
 ---
 
-
-<ComponentPreview name="DropdownMenuDemo" /> 
+<ComponentPreview name="DropdownMenuDemo" />
 
 ## Installation
 
 ```bash
 npx shadcn-vue@latest add dropdown-menu
-``` 
+```
 ## Usage
 
 ```vue
@@ -40,4 +39,14 @@ import {
     </DropdownMenuContent>
   </DropdownMenu>
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### Checkboxes
+
+<ComponentPreview name="DropdownMenuCheckboxes" />
+
+### Radio Group
+
+<ComponentPreview name="DropdownMenuRadioGroup" />
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index ae55f1d9..ecb66a15 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -3,8 +3,7 @@ title: Input
 description: Displays a form input field or a component that looks like an input field.
 ---
 
-
-<ComponentPreview name="InputDemo" class="max-w-xs" /> 
+<ComponentPreview name="InputDemo" class="max-w-xs" />
 
 ## Installation
 
@@ -26,8 +25,6 @@ npx shadcn-vue@latest add input
 
 </Steps>
 
-
-
 </template>
 </TabPreview>
 
@@ -43,6 +40,8 @@ import { Input } from '@/components/ui/input'
 </template>
 ```
 
+## Examples
+
 ### Default
 
 <ComponentPreview name="InputDemo" class="max-w-xs" />
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index caae327d..ca6e1f53 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -1,16 +1,14 @@
 ---
 title: Select
 description: Displays a list of options for the user to pick from—triggered by a button.
-source: apps/www/src/lib/registry/default/ui/select 
+source: apps/www/src/lib/registry/default/ui/select
 primitive: https://www.radix-vue.com/components/select.html
 ---
 
-
-<ComponentPreview name="SelectDemo" /> 
+<ComponentPreview name="SelectDemo" />
 
 ## Installation
 
-
 ```bash
 npx shadcn-vue@latest add select
 ```
@@ -49,6 +47,10 @@ import {
 
 ## Examples
 
+### Scrollable
+
+<ComponentPreview name="SelectScrollable" />
+
 ### Form
 
 <ComponentPreview name="SelectForm" />
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
new file mode 100644
index 00000000..e8ed233e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { DropdownMenuCheckboxItemProps } from 'radix-vue'
+import { ref } from 'vue'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/lib/registry/default/ui/dropdown-menu'
+
+type Checked = DropdownMenuCheckboxItemProps['checked']
+
+const showStatusBar = ref<Checked>(true)
+const showActivityBar = ref<Checked>(false)
+const showPanel = ref<Checked>(false)
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline">
+        Open
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="w-56">
+      <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuCheckboxItem
+        v-model:checked="showStatusBar"
+      >
+        Status Bar
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        v-model:checked="showActivityBar"
+        disabled
+      >
+        Activity Bar
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        v-model:checked="showPanel"
+      >
+        Panel
+      </DropdownMenuCheckboxItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue
new file mode 100644
index 00000000..77f23ce4
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/lib/registry/default/ui/dropdown-menu'
+
+const position = ref('bottom')
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline">
+        Open
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="w-56">
+      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuRadioGroup v-model="position">
+        <DropdownMenuRadioItem value="top">
+          Top
+        </DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="bottom">
+          Bottom
+        </DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="right">
+          Right
+        </DropdownMenuRadioItem>
+      </DropdownMenuRadioGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/SelectScrollable.vue b/apps/www/src/lib/registry/default/example/SelectScrollable.vue
new file mode 100644
index 00000000..e16e0b64
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/SelectScrollable.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+</script>
+
+<template>
+  <Select>
+    <SelectTrigger class="w-[280px]">
+      <SelectValue placeholder="Select a timezone" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>North America</SelectLabel>
+        <SelectItem value="est">
+          Eastern Standard Time (EST)
+        </SelectItem>
+        <SelectItem value="cst">
+          Central Standard Time (CST)
+        </SelectItem>
+        <SelectItem value="mst">
+          Mountain Standard Time (MST)
+        </SelectItem>
+        <SelectItem value="pst">
+          Pacific Standard Time (PST)
+        </SelectItem>
+        <SelectItem value="akst">
+          Alaska Standard Time (AKST)
+        </SelectItem>
+        <SelectItem value="hst">
+          Hawaii Standard Time (HST)
+        </SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>Europe & Africa</SelectLabel>
+        <SelectItem value="gmt">
+          Greenwich Mean Time (GMT)
+        </SelectItem>
+        <SelectItem value="cet">
+          Central European Time (CET)
+        </SelectItem>
+        <SelectItem value="eet">
+          Eastern European Time (EET)
+        </SelectItem>
+        <SelectItem value="west">
+          Western European Summer Time (WEST)
+        </SelectItem>
+        <SelectItem value="cat">
+          Central Africa Time (CAT)
+        </SelectItem>
+        <SelectItem value="eat">
+          East Africa Time (EAT)
+        </SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>Asia</SelectLabel>
+        <SelectItem value="msk">
+          Moscow Time (MSK)
+        </SelectItem>
+        <SelectItem value="ist">
+          India Standard Time (IST)
+        </SelectItem>
+        <SelectItem value="cst_china">
+          China Standard Time (CST)
+        </SelectItem>
+        <SelectItem value="jst">
+          Japan Standard Time (JST)
+        </SelectItem>
+        <SelectItem value="kst">
+          Korea Standard Time (KST)
+        </SelectItem>
+        <SelectItem value="ist_indonesia">
+          Indonesia Central Standard Time (WITA)
+        </SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>Australia & Pacific</SelectLabel>
+        <SelectItem value="awst">
+          Australian Western Standard Time (AWST)
+        </SelectItem>
+        <SelectItem value="acst">
+          Australian Central Standard Time (ACST)
+        </SelectItem>
+        <SelectItem value="aest">
+          Australian Eastern Standard Time (AEST)
+        </SelectItem>
+        <SelectItem value="nzst">
+          New Zealand Standard Time (NZST)
+        </SelectItem>
+        <SelectItem value="fjt">
+          Fiji Time (FJT)
+        </SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>South America</SelectLabel>
+        <SelectItem value="art">
+          Argentina Time (ART)
+        </SelectItem>
+        <SelectItem value="bot">
+          Bolivia Time (BOT)
+        </SelectItem>
+        <SelectItem value="brt">
+          Brasilia Time (BRT)
+        </SelectItem>
+        <SelectItem value="clt">
+          Chile Standard Time (CLT)
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue b/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
new file mode 100644
index 00000000..6b8cde6a
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { DropdownMenuCheckboxItemProps } from 'radix-vue'
+import { ref } from 'vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/lib/registry/new-york/ui/dropdown-menu'
+
+type Checked = DropdownMenuCheckboxItemProps['checked']
+
+const showStatusBar = ref<Checked>(true)
+const showActivityBar = ref<Checked>(false)
+const showPanel = ref<Checked>(false)
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline">
+        Open
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="w-56">
+      <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuCheckboxItem
+        v-model:checked="showStatusBar"
+      >
+        Status Bar
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        v-model:checked="showActivityBar"
+        disabled
+      >
+        Activity Bar
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        v-model:checked="showPanel"
+      >
+        Panel
+      </DropdownMenuCheckboxItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue
new file mode 100644
index 00000000..d0a8e768
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/lib/registry/new-york/ui/dropdown-menu'
+
+const position = ref('bottom')
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline">
+        Open
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="w-56">
+      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuRadioGroup v-model="position">
+        <DropdownMenuRadioItem value="top">
+          Top
+        </DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="bottom">
+          Bottom
+        </DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="right">
+          Right
+        </DropdownMenuRadioItem>
+      </DropdownMenuRadioGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SelectScrollable.vue b/apps/www/src/lib/registry/new-york/example/SelectScrollable.vue
new file mode 100644
index 00000000..50ff747b
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SelectScrollable.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+</script>
+
+<template>
+  <Select>
+    <SelectTrigger class="w-[280px]">
+      <SelectValue placeholder="Select a timezone" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>North America</SelectLabel>
+        <SelectItem value="est">
+          Eastern Standard Time (EST)
+        </SelectItem>
+        <SelectItem value="cst">
+          Central Standard Time (CST)
+        </SelectItem>
+        <SelectItem value="mst">
+          Mountain Standard Time (MST)
+        </SelectItem>
+        <SelectItem value="pst">
+          Pacific Standard Time (PST)
+        </SelectItem>
+        <SelectItem value="akst">
+          Alaska Standard Time (AKST)
+        </SelectItem>
+        <SelectItem value="hst">
+          Hawaii Standard Time (HST)
+        </SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>Europe & Africa</SelectLabel>
+        <SelectItem value="gmt">
+          Greenwich Mean Time (GMT)
+        </SelectItem>
+        <SelectItem value="cet">
+          Central European Time (CET)
+        </SelectItem>
+        <SelectItem value="eet">
+          Eastern European Time (EET)
+        </SelectItem>
+        <SelectItem value="west">
+          Western European Summer Time (WEST)
+        </SelectItem>
+        <SelectItem value="cat">
+          Central Africa Time (CAT)
+        </SelectItem>
+        <SelectItem value="eat">
+          East Africa Time (EAT)
+        </SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>Asia</SelectLabel>
+        <SelectItem value="msk">
+          Moscow Time (MSK)
+        </SelectItem>
+        <SelectItem value="ist">
+          India Standard Time (IST)
+        </SelectItem>
+        <SelectItem value="cst_china">
+          China Standard Time (CST)
+        </SelectItem>
+        <SelectItem value="jst">
+          Japan Standard Time (JST)
+        </SelectItem>
+        <SelectItem value="kst">
+          Korea Standard Time (KST)
+        </SelectItem>
+        <SelectItem value="ist_indonesia">
+          Indonesia Central Standard Time (WITA)
+        </SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>Australia & Pacific</SelectLabel>
+        <SelectItem value="awst">
+          Australian Western Standard Time (AWST)
+        </SelectItem>
+        <SelectItem value="acst">
+          Australian Central Standard Time (ACST)
+        </SelectItem>
+        <SelectItem value="aest">
+          Australian Eastern Standard Time (AEST)
+        </SelectItem>
+        <SelectItem value="nzst">
+          New Zealand Standard Time (NZST)
+        </SelectItem>
+        <SelectItem value="fjt">
+          Fiji Time (FJT)
+        </SelectItem>
+      </SelectGroup>
+      <SelectGroup>
+        <SelectLabel>South America</SelectLabel>
+        <SelectItem value="art">
+          Argentina Time (ART)
+        </SelectItem>
+        <SelectItem value="bot">
+          Bolivia Time (BOT)
+        </SelectItem>
+        <SelectItem value="brt">
+          Brasilia Time (BRT)
+        </SelectItem>
+        <SelectItem value="clt">
+          Chile Standard Time (CLT)
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>