progress

1<script setup lang="ts">
2import type { ProgressRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import {
6  ProgressIndicator,
7  ProgressRoot,
8} from "reka-ui"
9import { cn } from "@/lib/utils"
10 
11const props = withDefaults(
12  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
13  {
14    modelValue: 0,
15  },
16)
17 
18const delegatedProps = reactiveOmit(props, "class")
19</script>
20 
21<template>
22  <ProgressRoot
23    v-bind="delegatedProps"
24    :class="
25      cn(
26        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
27        props.class,
28      )
29    "
30  >
31    <ProgressIndicator
32      class="h-full w-full flex-1 bg-primary transition-all"
33      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
34    />
35  </ProgressRoot>
36</template>