separator

1<script setup lang="ts">
2import type { SeparatorProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import { Separator } from "reka-ui"
6import { cn } from "@/lib/utils"
7 
8const props = withDefaults(defineProps<
9  SeparatorProps & { class?: HTMLAttributes["class"] }
10>(), {
11  orientation: "horizontal",
12  decorative: true,
13})
14 
15const delegatedProps = reactiveOmit(props, "class")
16</script>
17 
18<template>
19  <Separator
20    v-bind="delegatedProps"
21    :class="
22      cn(
23        'shrink-0 bg-border',
24        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
25        props.class,
26      )
27    "
28  />
29</template>