init

web/src/components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { toggleVariants } from '@/components/ui/toggle'
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+
+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")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-slot="slotProps" v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot v-bind="slotProps" />
+  </ToggleGroupRoot>
+</template>

web/src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupItem, useForwardProps } from "reka-ui"
+import { inject } from "vue"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from '@/components/ui/toggle'
+
+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"
+    v-bind="forwardedProps" :class="cn(toggleVariants({
+      variant: context?.variant || variant,
+      size: context?.size || size,
+    }), props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>

web/src/components/ui/toggle-group/index.ts

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