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

14
lib/component/input/radio/DangerRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function DangerRadioButton({
const DangerRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-red-600",
"group-data-checked:bg-danger",
className
)}
ref={ref}
{...props}
/>
);
}
});
DangerRadioButton.displayName = "DangerRadioButton";
export default DangerRadioButton;

14
lib/component/input/radio/DarkRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function DarkRadioButton({
const DarkRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-black",
"group-data-checked:bg-dark",
className
)}
{...props}
ref={ref}
/>
);
}
});
DarkRadioButton.displayName = "DarkRadioButton";
export default DarkRadioButton;

12
lib/component/input/radio/InfoRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function InfoRadioButton({
const InfoRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-cyan-500",
className
)}
ref={ref}
{...props}
/>
);
}
});
InfoRadioButton.displayName = "InfoRadioButton";
export default InfoRadioButton;

14
lib/component/input/radio/LightRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function LightRadioButton({
const LightRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-white",
"group-data-checked:bg-light",
className
)}
ref={ref}
{...props}
/>
);
}
});
LightRadioButton.displayName = "LightRadioButton";
export default LightRadioButton;

14
lib/component/input/radio/MoltenRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function MoltenRadioButton({
const MoltenRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-orange-600",
"group-data-checked:bg-molten",
className
)}
ref={ref}
{...props}
/>
);
}
});
MoltenRadioButton.displayName = "MoltenRadioButton";
export default MoltenRadioButton;

14
lib/component/input/radio/PrimaryRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function PrimaryRadioButton({
const PrimaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-blue-500",
"group-data-checked:bg-primary",
className
)}
ref={ref}
{...props}
/>
);
}
});
PrimaryRadioButton.displayName = "PrimaryRadioButton";
export default PrimaryRadioButton;

12
lib/component/input/radio/RadioButton.tsx
View File

@@ -1,21 +1,23 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import { Radio } from "@headlessui/react";
import clsx from "clsx";
import { forwardRef } from "react";
export default function RadioButton({
const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
id,
className,
labelClassName,
size = "sm",
value,
children
}: RadioButtonProps){
}, ref ) => {
return (
<Radio
id={id}
value={value}
className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer"
ref={ref}
>
<div
className={clsx(
@@ -41,4 +43,8 @@ export default function RadioButton({
}
</Radio>
);
}
});
RadioButton.displayName = "RadioButton";
export default RadioButton;

2
lib/component/input/radio/RadioList.tsx
View File

@@ -12,7 +12,7 @@ export default function RadioList({
defaultValue,
direction = "horizontal",
children
}: RadioListProps){
}: Readonly<RadioListProps>){
return (
<RadioGroup
id={id}

14
lib/component/input/radio/SecondaryRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function SecondaryRadioButton({
const SecondaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-neutral-600",
"group-data-checked:bg-secondary",
className
)}
ref={ref}
{...props}
/>
);
}
});
SecondaryRadioButton.displayName = "SecondaryRadioButton";
export default SecondaryRadioButton;

12
lib/component/input/radio/SuccessRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function SuccessRadioButton({
const SuccessRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-green-600",
className
)}
ref={ref}
{...props}
/>
);
}
});
SuccessRadioButton.displayName = "SuccessRadioButton";
export default SuccessRadioButton;

14
lib/component/input/radio/TertiaryRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function TertiaryRadioButton({
const TertiaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-purple-600",
"group-data-checked:bg-tertiary",
className
)}
ref={ref}
{...props}
/>
);
}
});
TertiaryRadioButton.displayName = "TertiaryRadioButton";
export default TertiaryRadioButton;

14
lib/component/input/radio/WarningRadioButton.tsx
View File

@@ -1,19 +1,25 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
export default function WarningRadioButton({
const WarningRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
className,
...props
}: RadioButtonProps){
}, ref ) => {
return (
<RadioButton
className={clsx(
"group-data-checked:bg-yellow-500",
"group-data-checked:bg-warning",
className
)}
ref={ref}
{...props}
/>
);
}
});
WarningRadioButton.displayName = "WarningRadioButton";
export default WarningRadioButton;