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

12
lib/component/input/switch/ButtonSwitch.tsx
View File

@@ -1,8 +1,9 @@
import type { MattrixwvButtonSwitchProps } from "$/types/InputTypes";
import { Switch } from "@headlessui/react";
import { forwardRef } from "react";
export default function ButtonSwitch({
const ButtonSwitch = forwardRef<HTMLButtonElement, MattrixwvButtonSwitchProps>(({
id,
className,
name,
@@ -13,7 +14,7 @@ export default function ButtonSwitch({
disabled,
onNode,
offNode
}: MattrixwvButtonSwitchProps){
}, ref ) => {
return (
<Switch
id={id}
@@ -24,6 +25,7 @@ export default function ButtonSwitch({
checked={checked}
onChange={onChange}
disabled={disabled}
ref={ref}
>
{({ checked }) => (
<>
@@ -32,4 +34,8 @@ export default function ButtonSwitch({
)}
</Switch>
);
}
});
ButtonSwitch.displayName = "ButtonSwitch";
export default ButtonSwitch;

20
lib/component/input/switch/DangerSwitch.tsx
View File

@@ -1,33 +1,39 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
export default function DangerSwitch({
const DangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
"bg-gray-400",
"bg-neutral-mid",
className,
{
"data-checked:bg-red-600": !disabled,
"data-checked:bg-red-400/80": disabled
"data-checked:bg-danger": !disabled,
"data-checked:bg-danger-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-gray-300": disabled
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
}
});
DangerSwitch.displayName = "DangerSwitch";
export default DangerSwitch;

20
lib/component/input/switch/DarkSwitch.tsx
View File

@@ -1,33 +1,39 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
export default function DarkSwitch({
const DarkSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
"bg-gray-400",
"bg-neutral-mid",
className,
{
"data-checked:bg-black": !disabled,
"data-checked:bg-neutral-800/80": disabled
"data-checked:bg-dark": !disabled,
"data-checked:bg-dark-mid/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-gray-300": disabled
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
}
});
DarkSwitch.displayName = "DarkSwitch";
export default DarkSwitch;

39
lib/component/input/switch/InfoSwitch.tsx Normal file
View File

@@ -0,0 +1,39 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
const InfoSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
"bg-gray-400",
className,
{
"data-checked:bg-info": !disabled,
"data-checked:bg-info-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
});
InfoSwitch.displayName = "InfoSwitch";
export default InfoSwitch;

20
lib/component/input/switch/LightSwitch.tsx
View File

@@ -1,33 +1,39 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
export default function LightSwitch({
const LightSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
"bg-gray-400",
"bg-neutral-mid",
className,
{
"data-checked:bg-white": !disabled,
"data-checked:bg-neutral-300/80": disabled
"data-checked:bg-light": !disabled,
"data-checked:bg-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-black": !disabled,
"bg-neutral-800": disabled
"bg-neutral-dark": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
}
});
LightSwitch.displayName = "LightSwitch";
export default LightSwitch;

12
lib/component/input/switch/MattrixwvSwitch.tsx
View File

@@ -1,10 +1,11 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import { Field, Label, Switch } from "@headlessui/react";
import clsx from "clsx";
import { forwardRef } from "react";
import { Fragment } from "react/jsx-runtime";
export default function MattrixwvSwitch({
const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
id,
className,
knobClassName,
@@ -19,7 +20,7 @@ export default function MattrixwvSwitch({
children,
offText,
onText
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<Field as={Fragment}>
<Switch
@@ -53,6 +54,7 @@ export default function MattrixwvSwitch({
checked={checked}
onChange={onChange}
disabled={disabled}
ref={ref}
>
{
offText &&
@@ -105,4 +107,8 @@ export default function MattrixwvSwitch({
</Label>
</Field>
);
}
});
MattrixwvSwitch.displayName = "MattrixwvSwitch";
export default MattrixwvSwitch;

39
lib/component/input/switch/MoltenSwitch.tsx Normal file
View File

@@ -0,0 +1,39 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
const MoltenSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
"bg-neutral-mid",
className,
{
"data-checked:bg-molten": !disabled,
"data-checked:bg-molten-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
});
MoltenSwitch.displayName = "MoltenSwitch";
export default MoltenSwitch;

20
lib/component/input/switch/PrimarySwitch.tsx
View File

@@ -1,33 +1,39 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
export default function PrimarySwitch({
const PrimarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
"bg-gray-400",
"bg-neutral-mid",
className,
{
"data-checked:bg-blue-600": !disabled,
"data-checked:bg-blue-400/80": disabled
"data-checked:bg-primary": !disabled,
"data-checked:bg-primary-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-gray-200": disabled
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
}
});
PrimarySwitch.displayName = "PrimarySwitch";
export default PrimarySwitch;

20
lib/component/input/switch/SecondarySwitch.tsx
View File

@@ -1,33 +1,39 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
export default function SecondarySwitch({
const SecondarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
"bg-gray-400",
"bg-neutral-mid",
className,
{
"data-checked:bg-neutral-600": !disabled,
"data-checked:bg-neutral-400/80": disabled
"data-checked:bg-secondary": !disabled,
"data-checked:bg-secondary-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-gray-200": disabled
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
}
});
SecondarySwitch.displayName = "SecondarySwitch";
export default SecondarySwitch;

18
lib/component/input/switch/SuccessDangerSwitch.tsx
View File

@@ -1,32 +1,38 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
export default function SuccessDangerSwitch({
const SuccessDangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
className,
{
"bg-red-600 data-checked:bg-green-600": !disabled,
"bg-red-400/80 data-checked:bg-green-400/80": disabled
"bg-danger data-checked:bg-success": !disabled,
"bg-danger-light/80 data-checked:bg-success-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-gray-200": disabled
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
}
});
SuccessDangerSwitch.displayName = "SuccessDangerSwitch";
export default SuccessDangerSwitch;

20
lib/component/input/switch/SuccessSwitch.tsx
View File

@@ -1,33 +1,39 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
export default function SuccessSwitch({
const SuccessSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
"bg-gray-400",
"bg-neutral-mid",
className,
{
"data-checked:bg-green-600": !disabled,
"data-checked:bg-green-400/80": disabled
"data-checked:bg-success": !disabled,
"data-checked:bg-success-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-gray-200": disabled
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
}
});
SuccessSwitch.displayName = "SuccessSwitch";
export default SuccessSwitch;

18
lib/component/input/switch/TertiarySwitch.tsx
View File

@@ -1,14 +1,15 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
export default function TertiarySwitch({
const TertiarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
@@ -16,18 +17,23 @@ export default function TertiarySwitch({
"bg-gray-400",
className,
{
"data-checked:bg-purple-600": !disabled,
"data-checked:bg-purple-400/80": disabled
"data-checked:bg-tertiary": !disabled,
"data-checked:bg-tertiary-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-gray-200": disabled
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
}
});
TertiarySwitch.displayName = "TertiarySwitch";
export default TertiarySwitch;

20
lib/component/input/switch/WarningSwitch.tsx
View File

@@ -1,33 +1,39 @@
import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import MattrixwvSwitch from "./MattrixwvSwitch";
export default function WarningSwitch({
const WarningSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
className,
knobClassName,
disabled,
...props
}: MattrixwvSwitchProps){
}, ref ) => {
return (
<MattrixwvSwitch
{...props}
className={clsx(
"bg-gray-400",
"bg-neutral-mid",
className,
{
"data-checked:bg-yellow-500": !disabled,
"data-checked:bg-yellow-300/80": disabled
"data-checked:bg-warning": !disabled,
"data-checked:bg-warning-light/80": disabled
}
)}
knobClassName={clsx(
knobClassName,
{
"bg-white": !disabled,
"bg-gray-300": disabled
"bg-neutral-light": disabled
}
)}
disabled={disabled}
ref={ref}
/>
);
}
});
WarningSwitch.displayName = "WarningSwitch";
export default WarningSwitch;