BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Updated progress bars

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-14 17:19:22 -05:00
parent bcc5de6d7e
commit 61cceb41ba
11 changed files with 34 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lib/component/progress/DangerProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const DangerProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function DangerProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-neutral)"
progressColor="var(--color-danger)"
{...props}
ref={ref}
/>
);
});
DangerProgress.displayName = "DangerProgress";
export default DangerProgress;
}

12
lib/component/progress/DarkProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const DarkProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function DarkProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-neutral)"
progressColor="var(--color-dark)"
{...props}
ref={ref}
/>
);
});
DarkProgress.displayName = "DarkProgress";
export default DarkProgress;
}

12
lib/component/progress/InfoProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const InfoProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function InfoProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-neutral)"
progressColor="var(--color-info)"
{...props}
ref={ref}
/>
);
});
InfoProgress.displayName = "InfoProgress";
export default InfoProgress;
}

12
lib/component/progress/LightProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const LightProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function LightProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-dark)"
progressColor="var(--color-light)"
{...props}
ref={ref}
/>
);
});
LightProgress.displayName = "LightProgress";
export default LightProgress;
}

12
lib/component/progress/MoltenProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const MoltenProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function MoltenProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-neutral)"
progressColor="var(--color-molten)"
{...props}
ref={ref}
/>
);
});
MoltenProgress.displayName = "MoltenProgress";
export default MoltenProgress;
}

12
lib/component/progress/PrimaryProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const PrimaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function PrimaryProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-neutral)"
progressColor="var(--color-primary)"
ref={ref}
{...props}
/>
);
});
PrimaryProgress.displayName = "PrimaryProgress";
export default PrimaryProgress;
}

13
lib/component/progress/Progress.tsx
View File

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

12
lib/component/progress/SecondaryProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const SecondaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function SecondaryProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-gray-300)"
progressColor="var(--color-neutral-500)"
ref={ref}
{...props}
/>
);
});
SecondaryProgress.displayName = "SecondaryProgress";
export default SecondaryProgress;
}

12
lib/component/progress/SuccessProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const SuccessProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function SuccessProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-neutral)"
progressColor="var(--color-success)"
{...props}
ref={ref}
/>
);
});
SuccessProgress.displayName = "SuccessProgress";
export default SuccessProgress;
}

12
lib/component/progress/TertiaryProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const TertiaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function TertiaryProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-neutral)"
progressColor="var(--color-tertiary)"
{...props}
ref={ref}
/>
);
});
TertiaryProgress.displayName = "TertiaryProgress";
export default TertiaryProgress;
}

12
lib/component/progress/WarningProgress.tsx
View File

@@ -1,21 +1,15 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
const WarningProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
export default function WarningProgress({
...props
}, ref ) => {
}: Readonly<ThemedProgressProps>){
return (
<Progress
backgroundColor="var(--color-neutral)"
progressColor="var(--color-warning)"
ref={ref}
{...props}
/>
);
});
WarningProgress.displayName = "WarningProgress";
export default WarningProgress;
}