feat: use semantic HTML element for progress component

packages/components/progress/src/index.tsx

@@ -5,9 +5,8 @@ import classNames from "classnames";
 // Styles
 import styles from "./styles/index.module.scss";
 
-// TODO: semantic - change tag to <progress />
-
-interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+interface ProgressProps
+  extends Omit<React.ProgressHTMLAttributes<HTMLProgressElement>, "children"> {
   /** Minimum value - corresponds to 0% progress */
   min?: number;
   /** Maximum value - corresponds to 100% progress */
@@ -36,14 +35,11 @@ export const Progress = ({
   }, [max, min, value]);
 
   return (
-    <div className={classNames(styles.root, className)} {...otherProps}>
-      <div
-        className={styles.bar}
-        style={{
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- necessary as react does not support CSS vars
-          ["--value" as keyof React.CSSProperties]: `${percent}%`,
-        }}
-      />
-    </div>
+    <progress
+      className={classNames(styles.root, className)}
+      value={percent}
+      max={100}
+      {...otherProps}
+    />
   );
 };

packages/components/progress/src/styles/index.module.scss

@@ -1,17 +1,22 @@
 @import "@react-ck/theme";
 
 .root {
-  background-color: get-color(neutral-light-2);
-  height: get-spacing(0.5);
-  border-radius: get-spacing(0.5);
-  overflow: hidden;
-}
+  -webkit-appearance: none;
+  appearance: none;
 
-.bar {
-  background-color: get-color(highlight-primary);
   width: 100%;
-  transform: scaleX(var(--value));
-  transform-origin: center left;
-  height: 100%;
-  transition: transform ease-in-out 0.5s;
+  height: get-spacing(0.5);
+
+  &::-webkit-progress-value,
+  &::-webkit-progress-bar {
+    border-radius: get-spacing(0.5);
+  }
+
+  &::-webkit-progress-value {
+    background-color: get-color(highlight-primary);
+  }
+
+  &::-webkit-progress-bar {
+    background-color: get-color(neutral-light-2);
+  }
 }