stepper

1<script lang="ts" setup>
2import type { StepperRootEmits, StepperRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import { StepperRoot, useForwardPropsEmits } from "reka-ui"
6import { cn } from "@/lib/utils"
7 
8const props = defineProps<StepperRootProps & { class?: HTMLAttributes["class"] }>()
9const emits = defineEmits<StepperRootEmits>()
10 
11const delegatedProps = reactiveOmit(props, "class")
12 
13const forwarded = useForwardPropsEmits(delegatedProps, emits)
14</script>
15 
16<template>
17  <StepperRoot
18    v-slot="slotProps"
19    :class="cn(
20      'flex gap-2',
21      props.class,
22    )"
23    v-bind="forwarded"
24  >
25    <slot v-bind="slotProps" />
26  </StepperRoot>
27</template>