switch

1<script setup lang="ts">
2import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import {
6  SwitchRoot,
7  SwitchThumb,
8  useForwardPropsEmits,
9} from "reka-ui"
10import { cn } from "@/lib/utils"
11 
12const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
13 
14const emits = defineEmits<SwitchRootEmits>()
15 
16const delegatedProps = reactiveOmit(props, "class")
17 
18const forwarded = useForwardPropsEmits(delegatedProps, emits)
19</script>
20 
21<template>
22  <SwitchRoot
23    v-bind="forwarded"
24    :class="cn(
25      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
26      props.class,
27    )"
28  >
29    <SwitchThumb
30      :class="cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')"
31    >
32      <slot name="thumb" />
33    </SwitchThumb>
34  </SwitchRoot>
35</template>