fix(components): fix Meter max styling (#1691)

* fix(components): fix `Meter` max styling

* fix: update progress bar

* fix: apply suggestion

Author: Niznikr

.changeset/wet-yaks-lick.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Fix `Meter` max styling

packages/components/src/Meter.tsx

@@ -2,7 +2,7 @@ import type { VariantProps } from 'class-variance-authority';
 import type { Ref } from 'react';
 import type { MeterProps as AriaMeterProps, ContextValue } from 'react-aria-components';
 
-import { cva } from 'class-variance-authority';
+import { cva, cx } from 'class-variance-authority';
 import { createContext } from 'react';
 import { Meter as AriaMeter, Text, composeRenderProps } from 'react-aria-components';
 
@@ -86,7 +86,10 @@ const Meter = ({ ref, ...props }: MeterProps) => {
 							{children}
 							<Text className={styles.value}>{valueText}</Text>
 							<div className={styles.track}>
-								<div className={styles.fill} style={{ width: `${percentage}%` }} />
+								<div
+									className={cx(styles.fill, { [styles.max]: percentage === 100 })}
+									style={{ width: `${percentage}%` }}
+								/>
 							</div>
 						</>
 					)}

packages/components/src/ProgressBar.tsx

@@ -100,7 +100,10 @@ const ProgressBar = ({ ref, ...props }: ProgressBarProps) => {
 								{children}
 								<Text className={styles.value}>{valueText}</Text>
 								<div className={styles.track}>
-									<div className={styles.fill} style={{ width: `${percentage}%` }} />
+									<div
+										className={cx(styles.fill, { [styles.max]: percentage === 100 })}
+										style={{ width: `${percentage}%` }}
+									/>
 								</div>
 							</>
 						)}

packages/components/src/styles/Meter.module.css

@@ -43,6 +43,10 @@
 	height: 100%;
 }
 
+.max {
+	border-radius: var(--lp-border-radius-medium);
+}
+
 .text {
 	fill: var(--lp-color-text-ui-primary-base);
 	font: var(--lp-text-body-1-semibold);

packages/components/src/styles/ProgressBar.module.css

@@ -53,6 +53,10 @@
 	height: 100%;
 }
 
+.max {
+	border-radius: var(--lp-border-radius-medium);
+}
+
 .base {
 	height: var(--lp-size-64);
 	width: var(--lp-size-64);