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

Update radio buttons

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-14 16:55:54 -05:00
parent 6c86fdd58b
commit 1743ed6ce4
11 changed files with 33 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

@@ -1,25 +1,19 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import RadioButton from "./RadioButton";
const PrimaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
export default function PrimaryRadioButton({
className,
...props
}, ref ) => {
}: Readonly<RadioButtonProps>){
return (
<RadioButton
className={clsx(
"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,10 +1,9 @@
import type { RadioButtonProps } from "$/types/InputTypes";
import { Radio } from "@headlessui/react";
import clsx from "clsx";
import { forwardRef } from "react";
const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
export default function RadioButton({
id = crypto.randomUUID().replaceAll("-", ""),
className,
labelClassName,
@@ -12,7 +11,7 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
value,
disabled,
children
}, ref ) => {
}: Readonly<RadioButtonProps>){
return (
<Radio
id={id}
@@ -28,7 +27,6 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
)}
disabled={disabled}
aria-labelledby={`${id}Label`}
ref={ref}
>
<div
className={clsx(
@@ -55,8 +53,4 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
}
</Radio>
);
});
RadioButton.displayName = "RadioButton";
export default RadioButton;
}

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

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

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

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

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

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