From 294740c97f50530b039775cada23ba31ec2acd3b Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sun, 1 Dec 2024 15:30:42 +0100
Subject: [PATCH] feat: :sparkles: Make composer work again

---
 components/composer/composer.vue              | 215 ++++++++++++++++--
 components/composer/dialog.vue                |   4 +
 components/notes/copyable-text.vue            |   4 +-
 components/notes/menu.vue                     |   8 +-
 components/ui/select/Select.vue               |  15 ++
 components/ui/select/SelectContent.vue        |  53 +++++
 components/ui/select/SelectGroup.vue          |  21 ++
 components/ui/select/SelectItem.vue           |  46 ++++
 components/ui/select/SelectItemText.vue       |  11 +
 components/ui/select/SelectLabel.vue          |  15 ++
 .../ui/select/SelectScrollDownButton.vue      |  30 +++
 components/ui/select/SelectScrollUpButton.vue |  30 +++
 components/ui/select/SelectSeparator.vue      |  19 ++
 components/ui/select/SelectTrigger.vue        |  38 ++++
 components/ui/select/SelectValue.vue          |  11 +
 components/ui/select/index.ts                 |  11 +
 components/ui/toggle/Toggle.vue               |  45 ++++
 components/ui/toggle/index.ts                 |  27 +++
 18 files changed, 571 insertions(+), 32 deletions(-)
 create mode 100644 components/ui/select/Select.vue
 create mode 100644 components/ui/select/SelectContent.vue
 create mode 100644 components/ui/select/SelectGroup.vue
 create mode 100644 components/ui/select/SelectItem.vue
 create mode 100644 components/ui/select/SelectItemText.vue
 create mode 100644 components/ui/select/SelectLabel.vue
 create mode 100644 components/ui/select/SelectScrollDownButton.vue
 create mode 100644 components/ui/select/SelectScrollUpButton.vue
 create mode 100644 components/ui/select/SelectSeparator.vue
 create mode 100644 components/ui/select/SelectTrigger.vue
 create mode 100644 components/ui/select/SelectValue.vue
 create mode 100644 components/ui/select/index.ts
 create mode 100644 components/ui/toggle/Toggle.vue
 create mode 100644 components/ui/toggle/index.ts

diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index 1614de4..ece6bc8 100644
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@@ -1,47 +1,216 @@
 <template>
-<Textarea :placeholder="chosenSplash" class="!border-none !ring-0 !outline-none rounded-none p-0 max-h-full min-h-48 !ring-offset-0" />
+    <Input v-model:model-value="state.contentWarning" v-if="state.sensitive"
+        placeholder="Put your content warning here" />
 
-<DialogFooter class="items-center flex-row">
-    <Button variant="ghost" size="icon">
-        <AtSign class="!size-5" />
-    </Button>
-    <Button variant="ghost" size="icon">
-        <LetterText class="!size-5" />
-    </Button>
-    <Button variant="ghost" size="icon">
-        <Smile class="!size-5" />
-    </Button>
-    <Button variant="ghost" size="icon">
-        <FilePlus2 class="!size-5" />
-    </Button>
-    <Button variant="ghost" size="icon">
-        <TriangleAlert class="!size-5" />
-    </Button>
-    <Button type="submit" size="lg" class="ml-auto">
-        {{  relation?.type === "edit" ? "Save" : "Send" }}
-    </Button>
-</DialogFooter>
+    <Textarea :placeholder="chosenSplash" v-model:model-value="state.content"
+        class="!border-none !ring-0 !outline-none rounded-none p-0 max-h-full min-h-48 !ring-offset-0"
+        :disabled="sending" />
+
+    <DialogFooter class="items-center flex-row">
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger as="div">
+                    <Button variant="ghost" size="icon">
+                        <AtSign class="!size-5" />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>Mention someone</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger as="div">
+                    <Toggle variant="default" size="sm" :pressed="state.contentType === 'text/markdown'"
+                        @update:pressed="i => state.contentType = i ? 'text/plain' : 'text/markdown'">
+                        <LetterText class="!size-5" />
+                    </Toggle>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>Enable Markdown</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+        <Select v-model:model-value="state.visibility">
+            <SelectTrigger :as-child="true" :disabled="relation?.type === 'edit'">
+                <Button variant="ghost" size="icon">
+                    <component :is="visibilities[state.visibility].icon" class="!size-5" />
+                </Button>
+            </SelectTrigger>
+            <SelectContent>
+                <SelectItem v-for="(v, k) in visibilities" :key="k" @click="state.visibility = k" :value="k">
+                    <div class="flex flex-row gap-4 items-center w-full justify-between">
+                        <div class="flex flex-col gap-1">
+                            <span class="font-semibold">{{ v.name }}</span>
+                            <span>{{ v.text }}</span>
+                        </div>
+                        <component :is="v.icon" class="!size-5" />
+                    </div>
+                </SelectItem>
+            </SelectContent>
+        </Select>
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger as="div">
+                    <Button variant="ghost" size="icon">
+                        <Smile class="!size-5" />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>Insert emoji</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger as="div">
+                    <Button variant="ghost" size="icon">
+                        <FilePlus2 class="!size-5" />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>Attach a file</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger as="div">
+                    <Toggle variant="default" size="sm" @update:pressed="i => state.sensitive = i">
+                        <TriangleAlert class="!size-5" />
+                    </Toggle>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>Mark as sensitive</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+        <Button type="submit" size="lg" class="ml-auto" :disabled="sending" @click="submit">
+            <Loader v-if="sending" class="!size-5 animate-spin" />
+            {{ relation?.type === "edit" ? "Save" : "Send" }}
+        </Button>
+    </DialogFooter>
 </template>
 
 <script lang="ts" setup>
+import type { ResponseError } from "@versia/client";
 import type { Status } from "@versia/client/types";
 import {
     AtSign,
     FilePlus2,
+    Globe,
     LetterText,
+    Loader,
+    Lock,
+    LockOpen,
     Smile,
     TriangleAlert,
 } from "lucide-vue-next";
+import { SelectTrigger } from "radix-vue";
+import { toast } from "vue-sonner";
+import { Select, SelectContent, SelectItem } from "~/components/ui/select";
 import { Button } from "../ui/button";
+import { Input } from "../ui/input";
 import { Textarea } from "../ui/textarea";
+import { Toggle } from "../ui/toggle";
 
-defineProps<{
+const { Control_Enter, Command_Enter } = useMagicKeys();
+
+watch([Control_Enter, Command_Enter], () => {
+    if (sending.value) {
+        return;
+    }
+
+    submit();
+});
+
+const { relation } = defineProps<{
     relation?: {
-        type: "reply" | "reblog" | "edit";
+        type: "reply" | "quote" | "edit";
         note: Status;
     };
 }>();
 
+const state = reactive({
+    content: "",
+    sensitive: false,
+    contentWarning: "",
+    contentType: "text/markdown" as "text/markdown" | "text/plain",
+    visibility: "public" as Status["visibility"],
+    files: [] as {
+        apiId?: string;
+        file: File;
+        alt: string;
+        uploading: boolean;
+        updating: boolean;
+    }[],
+});
+const sending = ref(false);
+
 const splashes = useConfig().COMPOSER_SPLASHES;
 const chosenSplash = splashes[Math.floor(Math.random() * splashes.length)];
+
+const submit = async () => {
+    sending.value = true;
+
+    try {
+        if (relation?.type === "edit") {
+            await client.value.editStatus(relation.note.id, {
+                status: state.content,
+                content_type: state.contentType,
+                sensitive: state.sensitive,
+                spoiler_text: state.sensitive
+                    ? state.contentWarning
+                    : undefined,
+                media_ids: state.files
+                    .map((f) => f.apiId)
+                    .filter((f) => f !== undefined),
+            });
+        }
+
+        await client.value.postStatus(state.content, {
+            content_type: state.contentType,
+            sensitive: state.sensitive,
+            spoiler_text: state.sensitive ? state.contentWarning : undefined,
+            media_ids: state.files
+                .map((f) => f.apiId)
+                .filter((f) => f !== undefined),
+            quote_id: relation?.type === "quote" ? relation.note.id : undefined,
+            in_reply_to_id:
+                relation?.type === "reply" ? relation.note.id : undefined,
+            visibility: state.visibility,
+        });
+
+        useEvent("composer:close");
+    } catch (_e) {
+        const e = _e as ResponseError;
+        toast.error(e.message);
+    } finally {
+        sending.value = false;
+    }
+};
+
+const visibilities = {
+    public: {
+        icon: Globe,
+        name: "Public",
+        text: "Can be seen by anyone.",
+    },
+    unlisted: {
+        icon: LockOpen,
+        name: "Unlisted",
+        text: "Can be seen by anyone with the link.",
+    },
+    private: {
+        icon: Lock,
+        name: "Private",
+        text: "Can only be seen by your followers.",
+    },
+    direct: {
+        icon: AtSign,
+        name: "Direct",
+        text: "Can only be seen by mentioned users.",
+    },
+};
 </script>
\ No newline at end of file
diff --git a/components/composer/dialog.vue b/components/composer/dialog.vue
index 6018625..fb5f358 100644
--- a/components/composer/dialog.vue
+++ b/components/composer/dialog.vue
@@ -8,6 +8,10 @@ useListen("composer:open", () => {
     }
 });
 
+useListen("composer:close", () => {
+    open.value = false;
+});
+
 const open = ref(false);
 </script>
 
diff --git a/components/notes/copyable-text.vue b/components/notes/copyable-text.vue
index 4c59957..a82b432 100644
--- a/components/notes/copyable-text.vue
+++ b/components/notes/copyable-text.vue
@@ -27,8 +27,6 @@ const { text } = defineProps<{
 const { copy } = useClipboard();
 const copyText = () => {
     copy(text);
-    toast("Copied to clipboard", {
-        icon: <Check class="size-5 text-green-500" />,
-    });
+    toast.success("Copied to clipboard");
 };
 </script>
\ No newline at end of file
diff --git a/components/notes/menu.vue b/components/notes/menu.vue
index d5fbcd8..e950184 100644
--- a/components/notes/menu.vue
+++ b/components/notes/menu.vue
@@ -34,17 +34,13 @@ const { copy } = useClipboard();
 
 const copyText = (text: string) => {
     copy(text);
-    toast("Copied to clipboard", {
-        icon: <Check class="size-5 text-green-500" />,
-    });
+    toast.success("Copied to clipboard");
 };
 
 const blockUser = async (id: string) => {
     await client.value.blockAccount(id);
 
-    toast("User blocked", {
-        icon: <Ban class="size-5 text-destructive" />,
-    });
+    toast.success("User blocked");
 };
 </script>
 
diff --git a/components/ui/select/Select.vue b/components/ui/select/Select.vue
new file mode 100644
index 0000000..dd1fc56
--- /dev/null
+++ b/components/ui/select/Select.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from "radix-vue";
+import { SelectRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps<SelectRootProps>();
+const emits = defineEmits<SelectRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/components/ui/select/SelectContent.vue b/components/ui/select/SelectContent.vue
new file mode 100644
index 0000000..8c299dc
--- /dev/null
+++ b/components/ui/select/SelectContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    SelectContent,
+    type SelectContentEmits,
+    type SelectContentProps,
+    SelectPortal,
+    SelectViewport,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+import { SelectScrollDownButton, SelectScrollUpButton } from ".";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        position: "popper",
+    },
+);
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/components/ui/select/SelectGroup.vue b/components/ui/select/SelectGroup.vue
new file mode 100644
index 0000000..2ffe8f4
--- /dev/null
+++ b/components/ui/select/SelectGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectGroup, type SelectGroupProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectGroupProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/components/ui/select/SelectItem.vue b/components/ui/select/SelectItem.vue
new file mode 100644
index 0000000..e94456b
--- /dev/null
+++ b/components/ui/select/SelectItem.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-vue-next";
+import {
+    SelectItem,
+    SelectItemIndicator,
+    type SelectItemProps,
+    SelectItemText,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectItemProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-10 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-3 flex size-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="size-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText class="w-full">
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/components/ui/select/SelectItemText.vue b/components/ui/select/SelectItemText.vue
new file mode 100644
index 0000000..e2719b8
--- /dev/null
+++ b/components/ui/select/SelectItemText.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from "radix-vue";
+
+const props = defineProps<SelectItemTextProps>();
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/components/ui/select/SelectLabel.vue b/components/ui/select/SelectLabel.vue
new file mode 100644
index 0000000..ab4df03
--- /dev/null
+++ b/components/ui/select/SelectLabel.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectLabel, type SelectLabelProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<
+    SelectLabelProps & { class?: HTMLAttributes["class"] }
+>();
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/components/ui/select/SelectScrollDownButton.vue b/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..79a0903
--- /dev/null
+++ b/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-vue-next";
+import {
+    SelectScrollDownButton,
+    type SelectScrollDownButtonProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/components/ui/select/SelectScrollUpButton.vue b/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..6e10c7d
--- /dev/null
+++ b/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronUp } from "lucide-vue-next";
+import {
+    SelectScrollUpButton,
+    type SelectScrollUpButtonProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/components/ui/select/SelectSeparator.vue b/components/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000..81d657d
--- /dev/null
+++ b/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectSeparator, type SelectSeparatorProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectSeparatorProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/components/ui/select/SelectTrigger.vue b/components/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000..4ece093
--- /dev/null
+++ b/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-vue-next";
+import {
+    SelectIcon,
+    SelectTrigger,
+    type SelectTriggerProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectTriggerProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/components/ui/select/SelectValue.vue b/components/ui/select/SelectValue.vue
new file mode 100644
index 0000000..61bd93e
--- /dev/null
+++ b/components/ui/select/SelectValue.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from "radix-vue";
+
+const props = defineProps<SelectValueProps>();
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/components/ui/select/index.ts b/components/ui/select/index.ts
new file mode 100644
index 0000000..d911c4e
--- /dev/null
+++ b/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from "./Select.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectGroup } from "./SelectGroup.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as SelectItemText } from "./SelectItemText.vue";
+export { default as SelectLabel } from "./SelectLabel.vue";
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue";
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue";
+export { default as SelectSeparator } from "./SelectSeparator.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectValue } from "./SelectValue.vue";
diff --git a/components/ui/toggle/Toggle.vue b/components/ui/toggle/Toggle.vue
new file mode 100644
index 0000000..b7e1602
--- /dev/null
+++ b/components/ui/toggle/Toggle.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    Toggle,
+    type ToggleEmits,
+    type ToggleProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+import { type ToggleVariants, toggleVariants } from ".";
+
+const props = withDefaults(
+    defineProps<
+        ToggleProps & {
+            class?: HTMLAttributes["class"];
+            variant?: ToggleVariants["variant"];
+            size?: ToggleVariants["size"];
+        }
+    >(),
+    {
+        variant: "default",
+        size: "default",
+        disabled: false,
+    },
+);
+
+const emits = defineEmits<ToggleEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, size, variant, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <Toggle
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Toggle>
+</template>
diff --git a/components/ui/toggle/index.ts b/components/ui/toggle/index.ts
new file mode 100644
index 0000000..bfff238
--- /dev/null
+++ b/components/ui/toggle/index.ts
@@ -0,0 +1,27 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Toggle } from "./Toggle.vue";
+
+export const toggleVariants = cva(
+    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+    {
+        variants: {
+            variant: {
+                default: "bg-transparent",
+                outline:
+                    "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+            },
+            size: {
+                default: "h-10 px-3",
+                sm: "h-9 px-2.5",
+                lg: "h-11 px-5",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;