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

96
lib/component/button/Button.tsx
View File

@@ -4,8 +4,7 @@ import { forwardRef } from "react";
const Button = forwardRef<HTMLButtonElement, ButtonProps>((
{
const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
type="button",
rounding = "lg",
@@ -15,52 +14,53 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((
disabled,
...buttonProps
}, ref ) => {
return (
<button
data-testid="mattrixwv-button"
ref={ref}
type={type}
{...buttonProps}
disabled={disabled}
className={clsx(
className,
//Focus
"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
//Rounding
{
"rounded-sm": rounding === "sm",
"rounded-md": rounding === "md",
"rounded-lg": rounding === "lg",
"rounded-full": rounding === "full"
},
//Size and shape
{
"p-0": size === "xs" && shape === "square",
"p-1": size === "sm" && shape === "square",
"p-2": size === "md" && shape === "square",
"p-3": size === "lg" && shape === "square",
"p-4": size === "xl" && shape === "square",
return (
<button
data-testid="mattrixwv-button"
ref={ref}
type={type}
{...buttonProps}
disabled={disabled}
className={clsx(
className,
//Focus
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
//Rounding
{
"rounded-sm": rounding === "sm",
"rounded-md": rounding === "md",
"rounded-lg": rounding === "lg",
"rounded-full": rounding === "full"
},
//Size and shape
{
"p-0": size === "xs" && shape === "square",
"p-1": size === "sm" && shape === "square",
"p-2": size === "md" && shape === "square",
"p-3": size === "lg" && shape === "square",
"p-4": size === "xl" && shape === "square",
"px-1 py-0": size === "xs" && shape === "rectangle",
"px-2 py-1": size === "sm" && shape === "rectangle",
"px-4 py-2": size === "md" && shape === "rectangle",
"px-6 py-3": size === "lg" && shape === "rectangle",
"px-8 py-4": size === "xl" && shape === "rectangle",
},
//Variant
{
"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
"border-none": variant === "ghost" || variant === "icon"
},
//Disabled
{
"cursor-pointer": !disabled,
"cursor-not-allowed opacity-75": disabled
}
)}
/>
);
}
);
"px-1 py-0": size === "xs" && shape === "rectangle",
"px-2 py-1": size === "sm" && shape === "rectangle",
"px-4 py-2": size === "md" && shape === "rectangle",
"px-6 py-3": size === "lg" && shape === "rectangle",
"px-8 py-4": size === "xl" && shape === "rectangle",
},
//Variant
{
"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
"border-none": variant === "ghost" || variant === "icon"
},
//Disabled
{
"cursor-pointer": !disabled,
"cursor-not-allowed opacity-75": disabled
}
)}
/>
);
});
Button.displayName = "Button";
export default Button;

44
lib/component/button/DangerButton.tsx
View File

@@ -1,47 +1,51 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function DangerButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-danger-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-red-600 hover:bg-red-700 active:bg-red-800": (variant === "standard") && (!disabled),
"bg-red-400/80": (variant === "standard") && (disabled),
"bg-danger active:bg-danger-dark": (variant === "standard") && (!disabled),
"bg-danger-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-red-600 active:bg-red-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-danger active:bg-danger-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-red-600 hover:border-red-700 active:border-red-800": (variant === "standard" || variant === "outline") && (!disabled),
"border-red-400/80": (variant === "standard" || variant === "outline") && (disabled),
"border-red-600 hover:border-red-600 active:border-red-700": (variant === "outline-ghost") && (!disabled),
"border-red-400/80 ": (variant === "outline-ghost") && (disabled)
"border-danger active:border-danger-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-danger-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-white": variant === "standard",
"text-red-600 hover:text-red-700 active:text-red-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-red-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-red-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-red-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-danger active:text-danger-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-danger-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-danger hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
DangerButton.displayName = "DangerButton";
export default DangerButton;

45
lib/component/button/DarkButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function DarkButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-dark-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-black hover:bg-neutral-700 active:bg-neutral-600": (variant === "standard") && (!disabled),
"bg-neutral-700/80": (variant === "standard") && (disabled),
"bg-dark active:bg-dark-mid": (variant === "standard") && (!disabled),
"bg-dark-mid/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-black active:bg-neutral-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-dark active:bg-dark-mid": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-black hover:border-neutral-700 active:border-neutral-600": (variant === "standard" || variant === "outline") && (!disabled),
"border-neutral-700/80": (variant === "standard" || variant === "outline") && (disabled),
"border-black hover:border-black active:border-neutral-700": (variant === "outline-ghost") && (!disabled),
"border-neutral-700/80 ": (variant === "outline-ghost") && (disabled)
"border-dark active:border-dark-mid": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-dark-mid/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-white": variant === "standard",
"text-black hover:text-neutral-700 active:text-neutral-600": (variant === "outline" || variant === "icon") && (!disabled),
"text-neutral-700/80": (variant === "outline" || variant === "icon") && (disabled),
"text-black hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-neutral-700/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-dark active:text-dark-mid": (variant === "outline" || variant === "icon") && (!disabled),
"text-dark-mid/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-dark hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
DarkButton.displayName = "DarkButton";
export default DarkButton;

45
lib/component/button/InfoButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function InfoButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-info-button"
{...props}
{...buttonProps}
variant={variant}
disabled={disabled}
ref={ref}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-cyan-500 hover:bg-cyan-600 active:bg-cyan-700": (variant === "standard") && (!disabled),
"bg-sky-300/80": (variant === "standard") && (disabled),
"bg-info active:bg-info-dark": (variant === "standard") && (!disabled),
"bg-info-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-cyan-500 active:bg-cyan-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-info active:bg-info-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-cyan-500 hover:border-cyan-600 active:border-cyan-700": (variant === "standard" || variant === "outline") && (!disabled),
"border-sky-300/80": (variant === "standard" || variant === "outline") && (disabled),
"border-cyan-500 hover:border-cyan-500 active:border-cyan-600": (variant === "outline-ghost") && (!disabled),
"border-sky-300/80 ": (variant === "outline-ghost") && (disabled)
"border-info active:border-info-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-info-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-black": variant === "standard",
"text-cyan-500 hover:text-cyan-600 active:text-cyan-700": (variant === "outline" || variant === "icon") && (!disabled),
"text-sky-300/80": (variant === "outline" || variant === "icon") && (disabled),
"text-cyan-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-sky-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-info active:text-info-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-info-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-info hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
InfoButton.displayName = "InfoButton";
export default InfoButton;

45
lib/component/button/LightButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function LightButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-light-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-white hover:bg-neutral-300 active:bg-neutral-400": (variant === "standard") && (!disabled),
"bg-neutral-400/80": (variant === "standard") && (disabled),
"bg-light active:bg-light-dark": (variant === "standard") && (!disabled),
"bg-light-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-white active:bg-neutral-300": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-light active:bg-light-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-white hover:border-neutral-300 active:border-neutral-400": (variant === "standard" || variant === "outline") && (!disabled),
"border-neutral-400/80": (variant === "standard" || variant === "outline") && (disabled),
"border-white hover:border-white active:border-neutral-300": (variant === "outline-ghost") && (!disabled),
"border-neutral-400/80 ": (variant === "outline-ghost") && (disabled)
"border-light active:border-light-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-neutral-400/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-black": variant === "standard",
"text-white hover:text-neutral-300 active:text-neutral-400": (variant === "outline" || variant === "icon") && (!disabled),
"text-neutral-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-white hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-neutral-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-light active:text-light-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-light-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-light hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
LightButton.displayName = "LightButton";
export default LightButton;

47
lib/component/button/MoltenButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function MoltenButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-molten-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-orange-600 hover:bg-orange-700 active:bg-orange-800": (variant === "standard") && (!disabled),
"bg-orange-400/80": (variant === "standard") && (disabled),
"bg-molten active:bg-molten-dark": (variant === "standard") && (!disabled),
"bg-molten-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-orange-600 active:bg-orange-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-molten active:bg-molten-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-orange-600 hover:border-orange-700 active:border-orange-800": (variant === "standard" || variant === "outline") && (!disabled),
"border-orange-400/80": (variant === "standard" || variant === "outline") && (disabled),
"border-orange-600 hover:border-orange-600 active:border-orange-700": (variant === "outline-ghost") && (!disabled),
"border-orange-400/80 ": (variant === "outline-ghost") && (disabled)
"border-molten active:border-molten-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-molten-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-white": variant === "standard",
"text-orange-600 hover:text-orange-700 active:text-orange-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-orange-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-orange-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-orange-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-black": variant === "standard",
"text-molten active:text-molten-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-molten-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-molten hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
MoltenButton.displayName = "MoltenButton";
export default MoltenButton;

45
lib/component/button/PrimaryButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function PrimaryButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-primary-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-blue-600 hover:bg-blue-700 active:bg-blue-800": (variant === "standard") && (!disabled),
"bg-blue-400/80": (variant === "standard") && (disabled),
"bg-primary active:bg-primary-dark": (variant === "standard") && (!disabled),
"bg-primary-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-blue-600 active:bg-blue-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-primary active:bg-primary-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-blue-600 hover:border-blue-700 active:border-blue-800": (variant === "standard" || variant === "outline") && (!disabled),
"border-blue-400/80": (variant === "standard" || variant === "outline") && (disabled),
"border-blue-600 hover:border-blue-600 active:border-blue-700": (variant === "outline-ghost") && (!disabled),
"border-blue-400/80 ": (variant === "outline-ghost") && (disabled)
"border-primary active:border-primary-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-primary-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-white": variant === "standard",
"text-blue-600 hover:text-blue-700 active:text-blue-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-blue-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-blue-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-blue-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-primary active:text-primary-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-primary-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-primary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
PrimaryButton.displayName = "PrimaryButton";
export default PrimaryButton;

45
lib/component/button/SecondaryButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function SecondaryButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-secondary-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": (variant === "standard") && (!disabled),
"bg-neutral-300/80": (variant === "standard") && (disabled),
"bg-secondary active:bg-secondary-dark": (variant === "standard") && (!disabled),
"bg-secondary-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-neutral-500 active:bg-neutral-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-secondary active:bg-secondary-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-neutral-500 hover:border-neutral-600 active:border-neutral-700": (variant === "standard" || variant === "outline") && (!disabled),
"border-neutral-300/80": (variant === "standard" || variant === "outline") && (disabled),
"border-neutral-500 hover:border-neutral-500 active:border-neutral-600": (variant === "outline-ghost") && (!disabled),
"border-neutral-300/80 ": (variant === "outline-ghost") && (disabled)
"border-secondary active:border-secondary-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-secondary-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-white": variant === "standard",
"text-neutral-500 hover:text-neutral-600 active:text-neutral-700": (variant === "outline" || variant === "icon") && (!disabled),
"text-neutral-300/80": (variant === "outline" || variant === "icon") && (disabled),
"text-neutral-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-neutral-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-secondary active:text-secondary-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-secondary-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-secondary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
SecondaryButton.displayName = "SecondaryButton";
export default SecondaryButton;

47
lib/component/button/SuccessButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function SuccessButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-success-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-green-600 hover:bg-green-700 active:bg-green-800": (variant === "standard") && (!disabled),
"bg-green-400/80": (variant === "standard") && (disabled),
"bg-success active:bg-success-dark": (variant === "standard") && (!disabled),
"bg-success-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-green-600 active:bg-green-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-success active:bg-success-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-green-600 hover:border-green-700 active:border-green-800": (variant === "standard" || variant === "outline") && (!disabled),
"border-green-400/80": (variant === "standard" || variant === "outline") && (disabled),
"border-green-600 hover:border-green-600 active:border-green-700": (variant === "outline-ghost") && (!disabled),
"border-green-400/80 ": (variant === "outline-ghost") && (disabled)
"border-success active:border-success-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-success-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-white": variant === "standard",
"text-green-600 hover:text-green-700 active:text-green-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-green-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-green-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-green-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-black": variant === "standard",
"text-success active:text-success-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-success-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-success hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
SuccessButton.displayName = "SuccessButton";
export default SuccessButton;

45
lib/component/button/TertiaryButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function TertiaryButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-tertiary-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-purple-600 hover:bg-purple-700 active:bg-purple-800": (variant === "standard") && (!disabled),
"bg-purple-400/80": (variant === "standard") && (disabled),
"bg-tertiary active:bg-tertiary-dark": (variant === "standard") && (!disabled),
"bg-tertiary-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-purple-600 active:bg-purple-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-tertiary active:bg-tertiary-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-purple-600 hover:border-purple-700 active:border-purple-800": (variant === "standard" || variant === "outline") && (!disabled),
"border-purple-400/80": (variant === "standard" || variant === "outline") && (disabled),
"border-purple-600 hover:border-purple-600 active:border-purple-700": (variant === "outline-ghost") && (!disabled),
"border-purple-400/80 ": (variant === "outline-ghost") && (disabled)
"border-tertiary active:border-tertiary-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-tertiary-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-white": variant === "standard",
"text-purple-600 hover:text-purple-700 active:text-purple-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-purple-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-purple-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-purple-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-tertiary active:text-tertiary-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-tertiary-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-tertiary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
TertiaryButton.displayName = "TertiaryButton";
export default TertiaryButton;

45
lib/component/button/WarningButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function WarningButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-warning-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700": (variant === "standard") && (!disabled),
"bg-yellow-300/80": (variant === "standard") && (disabled),
"bg-warning active:bg-warning-dark": (variant === "standard") && (!disabled),
"bg-warning-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-yellow-500 active:bg-yellow-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-warning active:bg-warning-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-yellow-500 hover:border-yellow-600 active:border-yellow-700": (variant === "standard" || variant === "outline") && (!disabled),
"border-yellow-300/80": (variant === "standard" || variant === "outline") && (disabled),
"border-yellow-500 hover:border-yellow-500 active:border-yellow-600": (variant === "outline-ghost") && (!disabled),
"border-yellow-300/80 ": (variant === "outline-ghost") && (disabled)
"border-warning active:border-warning-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-warning-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-black": variant === "standard",
"text-yellow-500 hover:text-yellow-600 active:text-yellow-700": (variant === "outline" || variant === "icon") && (!disabled),
"text-yellow-300/80": (variant === "outline" || variant === "icon") && (disabled),
"text-yellow-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-yellow-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-warning active:text-warning-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-warning-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-warning hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
WarningButton.displayName = "WarningButton";
export default WarningButton;