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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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