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

78
src/util/InputUtils.tsx
View File

@@ -29,8 +29,10 @@ import WarningRadioButton from "$/component/input/radio/WarningRadioButton";
import ButtonSwitch from "$/component/input/switch/ButtonSwitch";
import DangerSwitch from "$/component/input/switch/DangerSwitch";
import DarkSwitch from "$/component/input/switch/DarkSwitch";
import InfoSwitch from "$/component/input/switch/InfoSwitch";
import LightSwitch from "$/component/input/switch/LightSwitch";
import MattrixwvSwitch from "$/component/input/switch/MattrixwvSwitch";
import MoltenSwitch from "$/component/input/switch/MoltenSwitch";
import PrimarySwitch from "$/component/input/switch/PrimarySwitch";
import SecondarySwitch from "$/component/input/switch/SecondarySwitch";
import SuccessDangerSwitch from "$/component/input/switch/SuccessDangerSwitch";
@@ -206,6 +208,44 @@ export function SwitchContent(){
</TertiarySwitch>
</div>
</SwitchDisplay>
<SwitchDisplay title="Info">
{
sizes.map((size) => (
<div
key={size}
className="flex flex-row items-center justify-center gap-x-2"
>
<InfoSwitch
size={size}
defaultChecked={true}
>
{size} Switch
</InfoSwitch>
</div>
))
}
<div
className="flex flex-row items-center justify-center gap-x-2"
>
<InfoSwitch
size="md"
disabled={true}
>
Disabled Switch
</InfoSwitch>
</div>
<div
className="flex flex-row items-center justify-center gap-x-2"
>
<InfoSwitch
size="md"
disabled={true}
checked={true}
>
Disabled Switch
</InfoSwitch>
</div>
</SwitchDisplay>
<SwitchDisplay title="Success">
{
sizes.map((size) => (
@@ -320,6 +360,44 @@ export function SwitchContent(){
</DangerSwitch>
</div>
</SwitchDisplay>
<SwitchDisplay title="Molten">
{
sizes.map((size) => (
<div
key={size}
className="flex flex-row items-center justify-center gap-x-2"
>
<MoltenSwitch
size={size}
defaultChecked={true}
>
{size} Switch
</MoltenSwitch>
</div>
))
}
<div
className="flex flex-row items-center justify-center gap-x-2"
>
<MoltenSwitch
size="md"
disabled={true}
>
Disabled Switch
</MoltenSwitch>
</div>
<div
className="flex flex-row items-center justify-center gap-x-2"
>
<MoltenSwitch
size="md"
disabled={true}
checked={true}
>
Disabled Switch
</MoltenSwitch>
</div>
</SwitchDisplay>
<SwitchDisplay title="Dark">
{
sizes.map((size) => (