toggle

1<script setup lang="ts">
2import type { ToggleEmits, ToggleProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import type { ToggleVariants } from "."
5import { reactiveOmit } from "@vueuse/core"
6import { Toggle, useForwardPropsEmits } from "reka-ui"
7import { cn } from "@/lib/utils"
8import { toggleVariants } from "."
9 
10const props = withDefaults(defineProps<ToggleProps & {
11  class?: HTMLAttributes["class"]
12  variant?: ToggleVariants["variant"]
13  size?: ToggleVariants["size"]
14}>(), {
15  variant: "default",
16  size: "default",
17  disabled: false,
18})
19 
20const emits = defineEmits<ToggleEmits>()
21 
22const delegatedProps = reactiveOmit(props, "class", "size", "variant")
23 
24const forwarded = useForwardPropsEmits(delegatedProps, emits)
25</script>
26 
27<template>
28  <Toggle
29    v-slot="slotProps"
30    v-bind="forwarded"
31    :class="cn(toggleVariants({ variant, size }), props.class)"
32  >
33    <slot v-bind="slotProps" />
34  </Toggle>
35</template>