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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const DangerProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function DangerProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-neutral)" backgroundColor="var(--color-neutral)"
progressColor="var(--color-danger)" progressColor="var(--color-danger)"
{...props} {...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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const DarkProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function DarkProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-neutral)" backgroundColor="var(--color-neutral)"
progressColor="var(--color-dark)" progressColor="var(--color-dark)"
{...props} {...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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const InfoProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function InfoProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-neutral)" backgroundColor="var(--color-neutral)"
progressColor="var(--color-info)" progressColor="var(--color-info)"
{...props} {...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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const LightProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function LightProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-dark)" backgroundColor="var(--color-dark)"
progressColor="var(--color-light)" progressColor="var(--color-light)"
{...props} {...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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const MoltenProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function MoltenProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-neutral)" backgroundColor="var(--color-neutral)"
progressColor="var(--color-molten)" progressColor="var(--color-molten)"
{...props} {...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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const PrimaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function PrimaryProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-neutral)" backgroundColor="var(--color-neutral)"
progressColor="var(--color-primary)" progressColor="var(--color-primary)"
ref={ref}
{...props} {...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 type { ProgressProps } from "$/types/ProgressTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef, useMemo } from "react"; import { useMemo } from "react";
const Progress = forwardRef<HTMLDivElement, ProgressProps>(({ export default function Progress({
id, id,
className, className,
value, value,
@@ -15,7 +15,7 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>(({
tabIndex, tabIndex,
progressColor, progressColor,
backgroundColor backgroundColor
}, ref ) => { }: Readonly<ProgressProps>){
const percentage = useMemo(() => { const percentage = useMemo(() => {
const num = !value || Number.isNaN(value) ? min : Math.max(value, min); const num = !value || Number.isNaN(value) ? min : Math.max(value, min);
const den = (!value || Number.isNaN(value) ? max : Math.max(value, max)) - 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-valuenow={value ? Math.round(value * 10000) / 100 : undefined}
aria-label={label} aria-label={label}
tabIndex={tabIndex ?? 0} tabIndex={tabIndex ?? 0}
ref={ref}
> >
<div <div
className={clsx( className={clsx(
@@ -77,8 +76,4 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>(({
/> />
</div> </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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const SecondaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function SecondaryProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-gray-300)" backgroundColor="var(--color-gray-300)"
progressColor="var(--color-neutral-500)" progressColor="var(--color-neutral-500)"
ref={ref}
{...props} {...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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const SuccessProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function SuccessProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-neutral)" backgroundColor="var(--color-neutral)"
progressColor="var(--color-success)" progressColor="var(--color-success)"
{...props} {...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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const TertiaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function TertiaryProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-neutral)" backgroundColor="var(--color-neutral)"
progressColor="var(--color-tertiary)" progressColor="var(--color-tertiary)"
{...props} {...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 type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress"; import Progress from "./Progress";
const WarningProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({ export default function WarningProgress({
...props ...props
}, ref ) => { }: Readonly<ThemedProgressProps>){
return ( return (
<Progress <Progress
backgroundColor="var(--color-neutral)" backgroundColor="var(--color-neutral)"
progressColor="var(--color-warning)" progressColor="var(--color-warning)"
ref={ref}
{...props} {...props}
/> />
); );
}); }
WarningProgress.displayName = "WarningProgress";
export default WarningProgress;