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

8
lib/component/input/checkbox/DangerCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-danger group-data-checked:stroke-white": box, "group-data-checked:bg-danger group-data-checked:stroke-white": showBox,
"group-data-checked:stroke-danger": !box "group-data-checked:stroke-danger": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

8
lib/component/input/checkbox/DarkCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-dark group-data-checked:stroke-light": box, "group-data-checked:bg-dark group-data-checked:stroke-light": showBox,
"group-data-checked:stroke-dark": !box "group-data-checked:stroke-dark": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

8
lib/component/input/checkbox/InfoCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-info group-data-checked:stroke-white": box, "group-data-checked:bg-info group-data-checked:stroke-white": showBox,
"group-data-checked:stroke-info": !box "group-data-checked:stroke-info": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

8
lib/component/input/checkbox/LightCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-light group-data-checked:stroke-dark": box, "group-data-checked:bg-light group-data-checked:stroke-dark": showBox,
"group-data-checked:stroke-light": !box "group-data-checked:stroke-light": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

20
lib/component/input/checkbox/MattrixwvCheckbox.tsx
View File

@@ -10,33 +10,42 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
labelClassName, labelClassName,
name, name,
size = "sm", size = "sm",
box = true, showBox = true,
onChange, onChange,
checked, checked,
defaultChecked, defaultChecked,
strokeWidth = 2, strokeWidth = 2,
value, value,
disabled,
ariaLabel,
children children
}, ref ) => { }, ref ) => {
return ( return (
<Checkbox <Checkbox
id={id} id={id}
className={clsx( className={clsx(
"group cursor-pointer", "group",
"flex flex-row items-center justify-center gap-x-2" "flex flex-row items-center justify-start gap-x-2",
{
"cursor-pointer": !disabled,
"cursor-not-allowed": disabled
}
)} )}
name={name} name={name}
checked={checked} checked={checked}
defaultChecked={defaultChecked} defaultChecked={defaultChecked}
onChange={onChange} onChange={onChange}
value={value} value={value}
disabled={disabled}
aria-label={ariaLabel}
ref={ref} ref={ref}
> >
{/* Checkbox */}
<div <div
className={clsx( className={clsx(
className, className,
{ {
"rounded border": box "border rounded": showBox
}, },
{ {
"": size === "none", "": size === "none",
@@ -51,7 +60,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
<svg <svg
viewBox="0 0 14 14" viewBox="0 0 14 14"
fill="none" fill="none"
aria-label="checkbox" aria-hidden="true"
> >
<path <path
d="M3 8L6 11L11 3.5" d="M3 8L6 11L11 3.5"
@@ -61,6 +70,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
/> />
</svg> </svg>
</div> </div>
{/* Label */}
{ {
children && children &&
<div <div

8
lib/component/input/checkbox/MoltenCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-molten group-data-checked:stroke-white": box, "group-data-checked:bg-molten group-data-checked:stroke-white": showBox,
"group-data-checked:stroke-molten": !box "group-data-checked:stroke-molten": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

8
lib/component/input/checkbox/PrimaryCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-primary group-data-checked:stroke-white": box, "group-data-checked:bg-primary group-data-checked:stroke-white": showBox,
"group-data-checked:stroke-primary": !box "group-data-checked:stroke-primary": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

8
lib/component/input/checkbox/SecondaryCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-secondary group-data-checked:stroke-white": box, "group-data-checked:bg-secondary group-data-checked:stroke-white": showBox,
"group-data-checked:stroke-secondary": !box "group-data-checked:stroke-secondary": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

8
lib/component/input/checkbox/SuccessCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-success group-data-checked:stroke-white": box, "group-data-checked:bg-success group-data-checked:stroke-white": showBox,
"group-data-checked:stroke-success": !box "group-data-checked:stroke-success": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

8
lib/component/input/checkbox/TertiaryCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-tertiary group-data-checked:stroke-white": box, "group-data-checked:bg-tertiary group-data-checked:stroke-white": showBox,
"group-data-checked:stroke-tertiary": !box "group-data-checked:stroke-tertiary": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

8
lib/component/input/checkbox/WarningCheckbox.tsx
View File

@@ -6,7 +6,7 @@ import MattrixwvCheckbox from "./MattrixwvCheckbox";
const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className, className,
box = true, showBox = true,
...props ...props
}, ref) => { }, ref) => {
return ( return (
@@ -14,11 +14,11 @@ const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className={clsx( className={clsx(
className, className,
{ {
"group-data-checked:bg-warning group-data-checked:stroke-white": box, "group-data-checked:bg-warning group-data-checked:stroke-white": showBox,
"group-data-checked:stroke-warning": !box "group-data-checked:stroke-warning": !showBox
} }
)} )}
box={box} showBox={showBox}
{...props} {...props}
ref={ref} ref={ref}
/> />

4
lib/types/InputTypes.ts
View File

@@ -130,12 +130,14 @@ export interface CheckboxProps {
labelClassName?: string; labelClassName?: string;
name?: string; name?: string;
size?: CheckboxSize; size?: CheckboxSize;
box?: boolean; showBox?: boolean;
onChange?: (newChecked: boolean) => void; onChange?: (newChecked: boolean) => void;
checked?: boolean; checked?: boolean;
defaultChecked?: boolean; defaultChecked?: boolean;
strokeWidth?: number; strokeWidth?: number;
value?: string; value?: string;
disabled?: boolean;
ariaLabel: string;
children?: React.ReactNode; children?: React.ReactNode;
} }

72
src/util/InputUtils.tsx
View File

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