Update themed components with refs and css

lib/component/progress/Progress.tsx

@@ -1,9 +1,9 @@
 import type { ProgressProps } from "$/types/ProgressTypes";
 import clsx from "clsx";
-import { useMemo } from "react";
+import { forwardRef, useMemo } from "react";
 
 
-export default function Progress({
+const Progress = forwardRef<HTMLDivElement, ProgressProps>(({
 	id,
 	className,
 	value,
@@ -15,7 +15,7 @@ export default function Progress({
 	tabIndex,
 	progressColor,
 	backgroundColor
-}: ProgressProps){
+}, ref ) => {
 	const percentage = useMemo(() => {
 		const num = !value || Number.isNaN(value) ? min : Math.max(value, min);
 		const den = (!value || Number.isNaN(value) ? max : Math.max(value, max)) - min;
@@ -55,6 +55,7 @@ export default function Progress({
 			aria-valuenow={value ? Math.round(value * 10000) / 100 : undefined}
 			aria-label={label}
 			tabIndex={tabIndex ?? 0}
+			ref={ref}
 		>
 			<div
 				className={clsx(
@@ -76,4 +77,8 @@ export default function Progress({
 			/>
 		</div>
 	);
-}
+});
+
+Progress.displayName = "Progress";
+
+export default Progress;