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

Update themed components with refs and css

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-10 21:09:36 -05:00
parent 456feed128
commit 2e54b81d8f
72 changed files with 1147 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function DangerCheckbox({
const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-red-600 group-data-checked:stroke-white": box,
"group-data-checked:stroke-red-600": !box
"group-data-checked:bg-danger group-data-checked:stroke-white": box,
"group-data-checked:stroke-danger": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
DangerCheckbox.displayName = "DangerCheckbox";
export default DangerCheckbox;

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

@@ -1,24 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function DarkCheckbox({
const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-black group-data-checked:stroke-white": box,
"group-data-checked:stroke-black": !box
"group-data-checked:bg-dark group-data-checked:stroke-light": box,
"group-data-checked:stroke-dark": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
DarkCheckbox.displayName = "DarkCheckbox";
export default DarkCheckbox;

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

@@ -1,24 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function InfoCheckbox({
const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-cyan-500 group-data-checked:stroke-white": box,
"group-data-checked:stroke-cyan-500": !box
"group-data-checked:bg-info group-data-checked:stroke-white": box,
"group-data-checked:stroke-info": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
InfoCheckbox.displayName = "InfoCheckbox";
export default InfoCheckbox;

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

@@ -1,24 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function LightCheckbox({
const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-white group-data-checked:stroke-black": box,
"group-data-checked:stroke-white": !box
"group-data-checked:bg-light group-data-checked:stroke-dark": box,
"group-data-checked:stroke-light": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
LightCheckbox.displayName = "LightCheckbox";
export default LightCheckbox;

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

@@ -1,9 +1,10 @@
import type { CheckboxProps } from "$/types/InputTypes";
import { Checkbox } from "@headlessui/react";
import clsx from "clsx";
import { forwardRef } from "react";
export default function MattrixwvCheckbox({
const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
id,
className,
labelClassName,
@@ -16,7 +17,7 @@ export default function MattrixwvCheckbox({
strokeWidth = 2,
value,
children
}: CheckboxProps){
}, ref ) => {
return (
<Checkbox
id={id}
@@ -29,6 +30,7 @@ export default function MattrixwvCheckbox({
defaultChecked={defaultChecked}
onChange={onChange}
value={value}
ref={ref}
>
<div
className={clsx(
@@ -49,6 +51,7 @@ export default function MattrixwvCheckbox({
<svg
viewBox="0 0 14 14"
fill="none"
aria-label="checkbox"
>
<path
d="M3 8L6 11L11 3.5"
@@ -68,4 +71,8 @@ export default function MattrixwvCheckbox({
}
</Checkbox>
);
}
});
MattrixwvCheckbox.displayName = "MattrixwvCheckbox";
export default MattrixwvCheckbox;

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

@@ -1,24 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function MoltenCheckbox({
const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-orange-600 group-data-checked:stroke-white": box,
"group-data-checked:stroke-orange-600": !box
"group-data-checked:bg-molten group-data-checked:stroke-white": box,
"group-data-checked:stroke-molten": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
MoltenCheckbox.displayName = "MoltenCheckbox";
export default MoltenCheckbox;

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

@@ -1,24 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function PrimaryCheckbox({
const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-blue-600 group-data-checked:stroke-white": box,
"group-data-checked:stroke-blue-600": !box
"group-data-checked:bg-primary group-data-checked:stroke-white": box,
"group-data-checked:stroke-primary": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
PrimaryCheckbox.displayName = "PrimaryCheckbox";
export default PrimaryCheckbox;

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

@@ -1,24 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function SecondaryCheckbox({
const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-neutral-600 group-data-checked:stroke-white": box,
"group-data-checked:stroke-neutral-600": !box
"group-data-checked:bg-secondary group-data-checked:stroke-white": box,
"group-data-checked:stroke-secondary": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
SecondaryCheckbox.displayName = "SecondaryCheckbox";
export default SecondaryCheckbox;

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

@@ -1,25 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function SuccessCheckbox({
const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-green-600 group-data-checked:stroke-white": box,
"group-data-checked:stroke-green-600": !box
"group-data-checked:bg-success group-data-checked:stroke-white": box,
"group-data-checked:stroke-success": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
SuccessCheckbox.displayName = "SuccessCheckbox";
export default SuccessCheckbox;

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

@@ -1,24 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function TertiaryCheckbox({
const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-purple-600 group-data-checked:stroke-white": box,
"group-data-checked:stroke-purple-600": !box
"group-data-checked:bg-tertiary group-data-checked:stroke-white": box,
"group-data-checked:stroke-tertiary": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
TertiaryCheckbox.displayName = "TertiaryCheckbox";
export default TertiaryCheckbox;

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

@@ -1,24 +1,30 @@
import type { CheckboxProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function WarningCheckbox({
const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
className,
box = true,
...props
}: CheckboxProps){
}, ref) => {
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-yellow-500 group-data-checked:stroke-white": box,
"group-data-checked:stroke-yellow-500": !box
"group-data-checked:bg-warning group-data-checked:stroke-white": box,
"group-data-checked:stroke-warning": !box
}
)}
box={box}
{...props}
ref={ref}
/>
);
}
});
WarningCheckbox.displayName = "WarningCheckbox";
export default WarningCheckbox;