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

Update themed components with refs and css

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-10 21:09:36 -05:00
parent 456feed128
commit 2e54b81d8f
72 changed files with 1147 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,21 @@
import type { ThemedProgressProps } from "$/types/ProgressTypes";
import { forwardRef } from "react";
import Progress from "./Progress";
export default function PrimaryProgress(props: ThemedProgressProps){
const PrimaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
...props
}, ref ) => {
return (
<Progress
backgroundColor="var(--color-gray-300)"
progressColor="var(--color-blue-500)"
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 { 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;

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

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

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

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

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

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

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

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