BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git synced 2025-12-07 06:03:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

Radio Button and Checkbox Created

Browse Source
This commit is contained in:
Mattrixwv
2025-07-30 23:10:17 -04:00
parent cb8c2c23be
commit f6f77c9d42
29 changed files with 892 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
lib/component/input/checkbox/DangerCheckbox.tsx Normal file
View File

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

24
lib/component/input/checkbox/DarkCheckbox.tsx Normal file
View File

@@ -0,0 +1,24 @@
import type { CheckboxProps } from "$/types/Input";
import clsx from "clsx";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function DarkCheckbox({
className,
box = true,
...props
}: CheckboxProps){
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-black group-data-checked:stroke-white": box,
"group-data-checked:stroke-black": !box
}
)}
box={box}
{...props}
/>
);
}

24
lib/component/input/checkbox/InfoCheckbox.tsx Normal file
View File

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

24
lib/component/input/checkbox/LightCheckbox.tsx Normal file
View File

@@ -0,0 +1,24 @@
import type { CheckboxProps } from "$/types/Input";
import clsx from "clsx";
import MattrixwvCheckbox from "./MattrixwvCheckbox";
export default function LightCheckbox({
className,
box = true,
...props
}: CheckboxProps){
return (
<MattrixwvCheckbox
className={clsx(
className,
{
"group-data-checked:bg-white group-data-checked:stroke-black": box,
"group-data-checked:stroke-white": !box
}
)}
box={box}
{...props}
/>
);
}

71
lib/component/input/checkbox/MattrixwvCheckbox.tsx Normal file
View File

@@ -0,0 +1,71 @@
import type { CheckboxProps } from "$/types/Input";
import { Checkbox } from "@headlessui/react";
import clsx from "clsx";
export default function MattrixwvCheckbox({
id,
className,
labelClassName,
name,
size = "sm",
box = true,
onChange,
checked,
defaultChecked,
strokeWidth = 2,
value,
children
}: CheckboxProps){
return (
<Checkbox
id={id}
className={clsx(
"group cursor-pointer",
"flex flex-row items-center justify-center gap-x-2"
)}
name={name}
checked={checked}
defaultChecked={defaultChecked}
onChange={onChange}
value={value}
>
<div
className={clsx(
className,
{
"rounded border": box
},
{
"": size === "none",
"size-3": size === "xs",
"size-4": size === "sm",
"size-5": size === "md",
"size-6": size === "lg",
"size-7": size === "xl"
}
)}
>
<svg
viewBox="0 0 14 14"
fill="none"
>
<path
d="M3 8L6 11L11 3.5"
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{
children &&
<div
className={labelClassName}
>
{children}
</div>
}
</Checkbox>
);
}

24
lib/component/input/checkbox/MoltenCheckbox.tsx Normal file
View File

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

24
lib/component/input/checkbox/PrimaryCheckbox.tsx Normal file
View File

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

24
lib/component/input/checkbox/SecondaryCheckbox.tsx Normal file
View File

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

25
lib/component/input/checkbox/SuccessCheckbox.tsx Normal file
View File

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

24
lib/component/input/checkbox/TertiaryCheckbox.tsx Normal file
View File

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

24
lib/component/input/checkbox/WarningCheckbox.tsx Normal file
View File

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