From 0b425f9aa85409a88b0083d7edbeac4aa0eb246c Mon Sep 17 00:00:00 2001
From: Daniel Stock <daniel.stock@tooloop.de>
Date: Fri, 21 Nov 2025 14:04:21 +0100
Subject: [PATCH] Add progress component

---
 .../js/components/ui/progress/Progress.vue    | 36 +++++++++++++++++++
 resources/js/components/ui/progress/index.ts  |  1 +
 2 files changed, 37 insertions(+)
 create mode 100644 resources/js/components/ui/progress/Progress.vue
 create mode 100644 resources/js/components/ui/progress/index.ts

diff --git a/resources/js/components/ui/progress/Progress.vue b/resources/js/components/ui/progress/Progress.vue
new file mode 100644
index 0000000..c4f973b
--- /dev/null
+++ b/resources/js/components/ui/progress/Progress.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/resources/js/components/ui/progress/index.ts b/resources/js/components/ui/progress/index.ts
new file mode 100644
index 0000000..8598b96
--- /dev/null
+++ b/resources/js/components/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue"