From 4226da94ec8b0cfa69f157b48b83793ab70f0820 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 12 May 2026 21:43:35 -0700
Subject: [PATCH] add Mantine progress component

---
 .../components/progress/progress.module.css   |  7 +++++
 src/shared/components/progress/progress.tsx   | 29 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/shared/components/progress/progress.module.css
 create mode 100644 src/shared/components/progress/progress.tsx

diff --git a/src/shared/components/progress/progress.module.css b/src/shared/components/progress/progress.module.css
new file mode 100644
index 000000000..80175780c
--- /dev/null
+++ b/src/shared/components/progress/progress.module.css
@@ -0,0 +1,7 @@
+.root {
+    width: 100%;
+}
+
+.section {
+    transition: width 0.15s ease-out;
+}
diff --git a/src/shared/components/progress/progress.tsx b/src/shared/components/progress/progress.tsx
new file mode 100644
index 000000000..484ff3333
--- /dev/null
+++ b/src/shared/components/progress/progress.tsx
@@ -0,0 +1,29 @@
+import type { ProgressProps as MantineProgressProps } from '@mantine/core';
+
+import { Progress as MantineProgress } from '@mantine/core';
+import { forwardRef } from 'react';
+
+import styles from './progress.module.css';
+
+export interface ProgressProps extends MantineProgressProps {}
+
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+    ({ classNames, style, ...props }, ref) => {
+        return (
+            <MantineProgress
+                classNames={{
+                    root: styles.root,
+                    section: styles.section,
+                    ...classNames,
+                }}
+                ref={ref}
+                style={{
+                    ...style,
+                }}
+                {...props}
+            />
+        );
+    },
+);
+
+Progress.displayName = 'Progress';