toggle-group

1<script setup lang="ts">
2import type { VariantProps } from "class-variance-authority"
3import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "reka-ui"
4import type { HTMLAttributes } from "vue"
5import type { toggleVariants } from "@/registry/new-york/ui/toggle"
6import { reactiveOmit } from "@vueuse/core"
7import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui"
8import { provide } from "vue"
9import { cn } from "@/lib/utils"
10 
11type ToggleGroupVariants = VariantProps<typeof toggleVariants>
12 
13const props = defineProps<ToggleGroupRootProps & {
14  class?: HTMLAttributes["class"]
15  variant?: ToggleGroupVariants["variant"]
16  size?: ToggleGroupVariants["size"]
17}>()
18const emits = defineEmits<ToggleGroupRootEmits>()
19 
20provide("toggleGroup", {
21  variant: props.variant,
22  size: props.size,
23})
24 
25const delegatedProps = reactiveOmit(props, "class")
26 
27const forwarded = useForwardPropsEmits(delegatedProps, emits)
28</script>
29 
30<template>
31  <ToggleGroupRoot v-slot="slotProps" v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
32    <slot v-bind="slotProps" />
33  </ToggleGroupRoot>
34</template>