feat: ✨ Add bubble menu to composer

components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { reactiveOmit } from "@vueuse/core";
+import type { VariantProps } from "class-variance-authority";
+import {
+    ToggleGroupRoot,
+    type ToggleGroupRootEmits,
+    type ToggleGroupRootProps,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { type HTMLAttributes, provide } from "vue";
+import { cn } from "@/lib/utils";
+import type { toggleVariants } from "../toggle/index.ts";
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = defineProps<
+    ToggleGroupRootProps & {
+        class?: HTMLAttributes["class"];
+        variant?: ToggleGroupVariants["variant"];
+        size?: ToggleGroupVariants["size"];
+    }
+>();
+const emits = defineEmits<ToggleGroupRootEmits>();
+
+provide("toggleGroup", {
+    variant: props.variant,
+    size: props.size,
+});
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-slot="slotProps"
+    data-slot="toggle-group"
+    :data-size="size"
+    :data-variant="variant"
+    v-bind="forwarded"
+    :class="cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupRoot>
+</template>

components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { reactiveOmit } from "@vueuse/core";
+import type { VariantProps } from "class-variance-authority";
+import {
+    ToggleGroupItem,
+    type ToggleGroupItemProps,
+    useForwardProps,
+} from "reka-ui";
+import { type HTMLAttributes, inject } from "vue";
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "../toggle/index.ts";
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = defineProps<
+    ToggleGroupItemProps & {
+        class?: HTMLAttributes["class"];
+        variant?: ToggleGroupVariants["variant"];
+        size?: ToggleGroupVariants["size"];
+    }
+>();
+
+const context = inject<ToggleGroupVariants>("toggleGroup");
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    data-slot="toggle-group-item"
+    :data-variant="context?.variant || variant"
+    :data-size="context?.size || size"
+    v-bind="forwardedProps"
+    :class="cn(
+      toggleVariants({
+        variant: context?.variant || variant,
+        size: context?.size || size,
+      }),
+      'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>

components/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup.vue";
+export { default as ToggleGroupItem } from "./ToggleGroupItem.vue";