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

21
lib/component/message/DangerMessageBlock.tsx
View File

@@ -1,23 +1,26 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function DangerMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const DangerMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-danger-message-block"
{...messageProps}
className={clsx(
className,
"bg-red-200 text-red-600"
"bg-danger-xlight text-danger-dark"
)}
ref={ref}
/>
);
}
});
DangerMessageBlock.displayName = "DangerMessageBlock";
export default DangerMessageBlock;

21
lib/component/message/DarkMessageBlock.tsx
View File

@@ -1,23 +1,26 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function DarkMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const DarkMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-dark-message-block"
{...messageProps}
className={clsx(
className,
"bg-black text-white"
"bg-dark text-dark-xlight"
)}
ref={ref}
/>
);
}
});
DarkMessageBlock.displayName = "DarkMessageBlock";
export default DarkMessageBlock;

21
lib/component/message/InfoMessageBlock.tsx
View File

@@ -1,23 +1,26 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function InfoMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const InfoMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-info-message-block"
{...messageProps}
className={clsx(
className,
"bg-cyan-100 text-blue-600"
"bg-info-xlight text-info-xdark"
)}
ref={ref}
/>
);
}
});
InfoMessageBlock.displayName = "InfoMessageBlock";
export default InfoMessageBlock;

19
lib/component/message/LightMessageBlock.tsx
View File

@@ -1,15 +1,13 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function LightMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const LightMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-light-message-block"
@@ -18,6 +16,11 @@ export default function LightMessageBlock(props: MessageBlockProps){
className,
"bg-white text-black"
)}
ref={ref}
/>
);
}
});
LightMessageBlock.displayName = "LightMessageBlock";
export default LightMessageBlock;

23
lib/component/message/MessageBlock.tsx
View File

@@ -1,16 +1,14 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
export default function MessageBlock(props: MessageBlockProps){
const {
className,
outline = "sm",
rounded = "lg",
...messageProps
} = props;
const MessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
outline = "sm",
rounded = "lg",
...messageProps
}, ref ) => {
return (
<div
data-testid="mattrixwv-message-block"
@@ -33,6 +31,11 @@ export default function MessageBlock(props: MessageBlockProps){
"rounded-xl": rounded === "xl"
}
)}
ref={ref}
/>
);
}
});
MessageBlock.displayName = "MessageBlock";
export default MessageBlock;

21
lib/component/message/MoltenMessageBlock.tsx
View File

@@ -1,23 +1,26 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function MoltenMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const MoltenMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-molten-message-block"
{...messageProps}
className={clsx(
className,
"bg-orange-100 text-orange-600"
"bg-molten-xlight text-molten-mid"
)}
ref={ref}
/>
);
}
});
MoltenMessageBlock.displayName = "MoltenMessageBlock";
export default MoltenMessageBlock;

21
lib/component/message/PrimaryMessageBlock.tsx
View File

@@ -1,23 +1,26 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function PrimaryMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const PrimaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-primary-message-block"
{...messageProps}
className={clsx(
className,
"bg-blue-200 text-blue-600"
"bg-primary-xlight text-primary-dark"
)}
ref={ref}
/>
);
}
});
PrimaryMessageBlock.displayName = "PrimaryMessageBlock";
export default PrimaryMessageBlock;

21
lib/component/message/SecondaryMessageBlock.tsx
View File

@@ -1,23 +1,26 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function SecondaryMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const SecondaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-secondary-message-block"
{...messageProps}
className={clsx(
className,
"bg-neutral-200 text-neutral-600"
"bg-secondary-xlight text-secondary-mid"
)}
ref={ref}
/>
);
}
});
SecondaryMessageBlock.displayName = "SecondaryMessageBlock";
export default SecondaryMessageBlock;

21
lib/component/message/SuccessMessageBlock.tsx
View File

@@ -1,23 +1,26 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function SuccessMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const SuccessMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-success-message-block"
{...messageProps}
className={clsx(
className,
"bg-green-100 text-green-600"
"bg-success-xlight text-success-mid"
)}
ref={ref}
/>
);
}
});
SuccessMessageBlock.displayName = "SuccessMessageBlock";
export default SuccessMessageBlock;

20
lib/component/message/TertiaryMessageBlock.tsx
View File

@@ -1,24 +1,26 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function TertiaryMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const TertiaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-tertiary-message-block"
{...messageProps}
className={clsx(
className,
"bg-purple-200 text-purple-600"
"bg-tertiary-xlight text-tertiary-mid"
)}
ref={ref}
/>
);
}
});
TertiaryMessageBlock.displayName = "TertiaryMessageBlock";
export default TertiaryMessageBlock;

21
lib/component/message/WarningMessageBlock.tsx
View File

@@ -1,23 +1,26 @@
import type { MessageBlockProps } from "$/types/MessageTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MessageBlock from "./MessageBlock";
export default function WarningMessageBlock(props: MessageBlockProps){
const {
className,
...messageProps
} = props;
const WarningMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
className,
...messageProps
}, ref ) => {
return (
<MessageBlock
data-testid="mattrixwv-warning-message-block"
{...messageProps}
className={clsx(
className,
"bg-yellow-100 text-yellow-600"
"bg-warning-xlight text-warning-dark"
)}
ref={ref}
/>
);
}
});
WarningMessageBlock.displayName = "WarningMessageBlock";
export default WarningMessageBlock;