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-14 16:40:57 -05:00
parent f224f3fa2c
commit 6c86fdd58b
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/checkbox/DangerCheckbox.tsx
View File

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function DangerCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
DangerCheckbox.displayName = "DangerCheckbox";
export default DangerCheckbox;

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

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function DarkCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
DarkCheckbox.displayName = "DarkCheckbox";
export default DarkCheckbox;

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

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function InfoCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
InfoCheckbox.displayName = "InfoCheckbox";
export default InfoCheckbox;

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

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function LightCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
LightCheckbox.displayName = "LightCheckbox";
export default LightCheckbox;

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

@@ -1,10 +1,9 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import { Checkbox } from "@headlessui/react"; import { Checkbox } from "@headlessui/react";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function MattrixwvCheckbox({
id = crypto.randomUUID().replaceAll("-", ""), id = crypto.randomUUID().replaceAll("-", ""),
className, className,
labelClassName, labelClassName,
@@ -18,7 +17,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
value, value,
disabled, disabled,
children children
}, ref ) => { }: Readonly<CheckboxProps>){
return ( return (
<Checkbox <Checkbox
id={id} id={id}
@@ -38,7 +37,6 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
value={value} value={value}
disabled={disabled} disabled={disabled}
aria-labelledby={`${id}Label`} aria-labelledby={`${id}Label`}
ref={ref}
> >
{/* Checkbox */} {/* Checkbox */}
<div <div
@@ -82,8 +80,4 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
</Checkbox> </Checkbox>
); );
}); }
MattrixwvCheckbox.displayName = "MattrixwvCheckbox";
export default MattrixwvCheckbox;

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

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function MoltenCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
MoltenCheckbox.displayName = "MoltenCheckbox";
export default MoltenCheckbox;

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

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function PrimaryCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
PrimaryCheckbox.displayName = "PrimaryCheckbox";
export default PrimaryCheckbox;

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

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function SecondaryCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
SecondaryCheckbox.displayName = "SecondaryCheckbox";
export default SecondaryCheckbox;

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

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function SuccessCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
SuccessCheckbox.displayName = "SuccessCheckbox";
export default SuccessCheckbox;

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

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function TertiaryCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
TertiaryCheckbox.displayName = "TertiaryCheckbox";
export default TertiaryCheckbox;

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

@@ -1,14 +1,13 @@
import type { CheckboxProps } from "$/types/InputTypes"; import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx"; import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox"; import MattrixwvCheckbox from "./MattrixwvCheckbox";
const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({ export default function WarningCheckbox({
className, className,
showBox = true, showBox = true,
...props ...props
}, ref) => { }: Readonly<CheckboxProps>){
return ( return (
<MattrixwvCheckbox <MattrixwvCheckbox
className={clsx( className={clsx(
@@ -19,12 +18,7 @@ const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
} }
)} )}
showBox={showBox} showBox={showBox}
ref={ref}
{...props} {...props}
/> />
); );
}); }
WarningCheckbox.displayName = "WarningCheckbox";
export default WarningCheckbox;