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

Update checkboxes

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-11 22:18:32 -05:00
parent ac042d0a4f
commit c4f1ccd869
13 changed files with 92 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/util/InputUtils.tsx
View File

@@ -530,10 +530,10 @@ export function SwitchContent(){
function SwitchDisplay({
title,
children
}:{
}:Readonly<{
title: React.ReactNode;
children: React.ReactNode;
}){
}>){
return (
<div
className="flex flex-col items-center justify-center gap-y-2"
@@ -624,10 +624,10 @@ export function TextContent(){
function TextDisplay({
title,
children
}:{
}:Readonly<{
title: React.ReactNode;
children: React.ReactNode;
}){
}>){
return (
<div
className="flex flex-col items-center justify-center gap-y-2 w-full"
@@ -666,10 +666,10 @@ export function FileContent(){
function FileDisplay({
title,
children
}:{
}:Readonly<{
title: React.ReactNode;
children: React.ReactNode;
}){
}>){
return (
<div
className="flex flex-col items-center justify-center gap-y-2 w-full"
@@ -686,37 +686,33 @@ export function CheckboxContent(){
className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
>
<CheckboxDisplay title="Checkbox">
<div
className="flex flex-row items-center justify-center gap-x-8"
>
<MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true}>Default</MattrixwvCheckbox>
<PrimaryCheckbox defaultChecked={true}>Primary</PrimaryCheckbox>
<SecondaryCheckbox defaultChecked={true}>Secondary</SecondaryCheckbox>
<TertiaryCheckbox defaultChecked={true}>Tertiary</TertiaryCheckbox>
<InfoCheckbox defaultChecked={true}>Info</InfoCheckbox>
<SuccessCheckbox defaultChecked={true}>Success</SuccessCheckbox>
<WarningCheckbox defaultChecked={true}>Warning</WarningCheckbox>
<DangerCheckbox defaultChecked={true}>Danger</DangerCheckbox>
<MoltenCheckbox defaultChecked={true}>Molten</MoltenCheckbox>
<LightCheckbox defaultChecked={true}>Light</LightCheckbox>
<DarkCheckbox defaultChecked={true}>Dark</DarkCheckbox>
<div className="flex flex-row items-center justify-center gap-x-8">
<MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true} ariaLabel="Default Checkbox">Default</MattrixwvCheckbox>
<PrimaryCheckbox defaultChecked={true} ariaLabel="Primary Checkbox">Primary</PrimaryCheckbox>
<SecondaryCheckbox defaultChecked={true} ariaLabel="Secondary Checkbox">Secondary</SecondaryCheckbox>
<TertiaryCheckbox defaultChecked={true} ariaLabel="Tertiary Checkbox">Tertiary</TertiaryCheckbox>
<InfoCheckbox defaultChecked={true} ariaLabel="Info Checkbox">Info</InfoCheckbox>
<SuccessCheckbox defaultChecked={true} ariaLabel="Success Checkbox">Success</SuccessCheckbox>
<WarningCheckbox defaultChecked={true} ariaLabel="Warning Checkbox">Warning</WarningCheckbox>
<DangerCheckbox defaultChecked={true} ariaLabel="Danger Checkbox">Danger</DangerCheckbox>
<MoltenCheckbox defaultChecked={true} ariaLabel="Molten Checkbox">Molten</MoltenCheckbox>
<LightCheckbox defaultChecked={true} ariaLabel="Light Checkbox">Light</LightCheckbox>
<DarkCheckbox defaultChecked={true} ariaLabel="Dark Checkbox">Dark</DarkCheckbox>
</div>
</CheckboxDisplay>
<CheckboxDisplay title="Checks">
<div
className="flex flex-row items-center justify-center gap-x-8"
>
<MattrixwvCheckbox className="group-data-checked:stroke-amber-400 not-group-data-checked:stroke-white" defaultChecked={true} box={false}>Default</MattrixwvCheckbox>
<PrimaryCheckbox defaultChecked={true} box={false}>Primary</PrimaryCheckbox>
<SecondaryCheckbox defaultChecked={true} box={false}>Secondary</SecondaryCheckbox>
<TertiaryCheckbox defaultChecked={true} box={false}>Tertiary</TertiaryCheckbox>
<InfoCheckbox defaultChecked={true} box={false}>Info</InfoCheckbox>
<SuccessCheckbox defaultChecked={true} box={false}>Success</SuccessCheckbox>
<WarningCheckbox defaultChecked={true} box={false}>Warning</WarningCheckbox>
<DangerCheckbox defaultChecked={true} box={false}>Danger</DangerCheckbox>
<MoltenCheckbox defaultChecked={true} box={false}>Molten</MoltenCheckbox>
<LightCheckbox defaultChecked={true} box={false}>Light</LightCheckbox>
<DarkCheckbox defaultChecked={true} box={false}>Dark</DarkCheckbox>
<div className="flex flex-row items-center justify-center gap-x-8">
<MattrixwvCheckbox className="group-data-checked:stroke-amber-400 not-group-data-checked:stroke-white" defaultChecked={true} showBox={false} ariaLabel="Default Checkbox">Default</MattrixwvCheckbox>
<PrimaryCheckbox defaultChecked={true} showBox={false} ariaLabel="Primary Checkbox">Primary</PrimaryCheckbox>
<SecondaryCheckbox defaultChecked={true} showBox={false} ariaLabel="Secondary Checkbox">Secondary</SecondaryCheckbox>
<TertiaryCheckbox defaultChecked={true} showBox={false} ariaLabel="Tertiary Checkbox">Tertiary</TertiaryCheckbox>
<InfoCheckbox defaultChecked={true} showBox={false} ariaLabel="Info Checkbox">Info</InfoCheckbox>
<SuccessCheckbox defaultChecked={true} showBox={false} ariaLabel="Success Checkbox">Success</SuccessCheckbox>
<WarningCheckbox defaultChecked={true} showBox={false} ariaLabel="Warning Checkbox">Warning</WarningCheckbox>
<DangerCheckbox defaultChecked={true} showBox={false} ariaLabel="Danger Checkbox">Danger</DangerCheckbox>
<MoltenCheckbox defaultChecked={true} showBox={false} ariaLabel="Molten Checkbox">Molten</MoltenCheckbox>
<LightCheckbox defaultChecked={true} showBox={false} ariaLabel="Light Checkbox">Light</LightCheckbox>
<DarkCheckbox defaultChecked={true} showBox={false} ariaLabel="Dark Checkbox">Dark</DarkCheckbox>
</div>
</CheckboxDisplay>
</div>
@@ -726,10 +722,10 @@ export function CheckboxContent(){
function CheckboxDisplay({
title,
children
}:{
}:Readonly<{
title: React.ReactNode;
children: React.ReactNode;
}){
}>){
return (
<div
className="flex flex-col items-center justify-center gap-y-2 w-full"
@@ -812,10 +808,10 @@ export function RadioContent(){
function RadioDisplay({
title,
children
}:{
}:Readonly<{
title: React.ReactNode;
children: React.ReactNode;
}){
}>){
return (
<div
className="flex flex-col items-center justify-center gap-y-2 w-full"