Progress

<!--
  Radix `Progress` → Reka UI `ProgressRoot`/`ProgressIndicator`, тот же примитив.
-->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { computed } from "vue"
import { ProgressIndicator, ProgressRoot, type ProgressRootEmits, type ProgressRootProps, useForwardPropsEmits } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<
  ProgressRootProps & {
    /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
    class?: HTMLAttributes["class"]
  }
>()
const emits = defineEmits<ProgressRootEmits>()

const delegatedProps = computed(() => {
  const { class: _class, ...delegated } = props
  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <ProgressRoot
    data-slot="progress"
    v-bind="forwarded"
    :class="cn('cn-progress relative flex w-full items-center overflow-x-hidden', props.class)"
  >
    <ProgressIndicator
      data-slot="progress-indicator"
      class="cn-progress-indicator size-full flex-1 transition-all"
      :style="{ transform: `translateX(-${100 - (props.modelValue || 0)}%)` }"
    />
  </ProgressRoot>
</template>

export { default as Progress } from "./Progress.vue"