feat(@ui): migrate radio

src/components/settings/AppearanceShims.tsx

@@ -6,7 +6,7 @@ import pSBC from "shade-blend-color";
 
 import { Text } from "preact-i18n";
 
-import { Checkbox, ColourSwatches, ComboBox } from "@revoltchat/ui";
+import { Checkbox, ColourSwatches, ComboBox, Radio } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
 
@@ -21,7 +21,6 @@ import {
     MONOSPACE_FONT_KEYS,
 } from "../../context/Theme";
 
-import Radio from "../ui/Radio";
 import CategoryButton from "../ui/fluent/CategoryButton";
 import { EmojiSelector } from "./appearance/EmojiSelector";
 import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
@@ -117,19 +116,24 @@ export const DisplayCompactShim = () => {
             </h3>
             <div /* className={styles.display} */>
                 <Radio
+                    title={
+                        <Text id="app.settings.pages.appearance.display.default" />
+                    }
                     description={
                         <Text id="app.settings.pages.appearance.display.default_description" />
                     }
-                    checked>
+                    value={true}
-                    <Text id="app.settings.pages.appearance.display.default" />
+                />
-                </Radio>
                 <Radio
+                    title={
+                        <Text id="app.settings.pages.appearance.display.compact" />
+                    }
                     description={
                         <Text id="app.settings.pages.appearance.display.compact_description" />
                     }
-                    disabled>
+                    value={false}
-                    <Text id="app.settings.pages.appearance.display.compact" />
+                    disabled
-                </Radio>
+                />
             </div>
         </>
     );

src/components/ui/Radio.tsx

@@ -1,112 +0,0 @@
-import { Circle } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components/macro";
-
-import { Children } from "../../types/Preact";
-
-interface Props {
-    children: Children;
-    description?: Children;
-
-    checked?: boolean;
-    disabled?: boolean;
-    onSelect?: () => void;
-}
-
-interface BaseProps {
-    selected: boolean;
-}
-
-const RadioBase = styled.label<BaseProps>`
-    gap: 4px;
-    z-index: 1;
-    padding: 4px;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-
-    font-size: 1rem;
-    font-weight: 600;
-    user-select: none;
-    transition: 0.2s ease all;
-    border-radius: var(--border-radius);
-
-    &:hover {
-        background: var(--hover);
-    }
-
-    > input {
-        display: none;
-    }
-
-    > div {
-        margin: 4px;
-        width: 24px;
-        height: 24px;
-        display: grid;
-        place-items: center;
-        background: var(--foreground);
-        border-radius: var(--border-radius-half);
-
-        svg {
-            color: var(--foreground);
-            /*stroke-width: 2;*/
-        }
-    }
-
-    ${(props) =>
-        props.selected &&
-        css`
-            color: white;
-            cursor: default;
-            background: var(--accent);
-
-            > div {
-                background: white;
-            }
-
-            > div svg {
-                color: var(--accent);
-            }
-
-            &:hover {
-                background: var(--accent);
-            }
-        `}
-`;
-
-const RadioDescription = styled.span<BaseProps>`
-    font-size: 0.8em;
-    font-weight: 400;
-    color: var(--secondary-foreground);
-
-    ${(props) =>
-        props.selected &&
-        css`
-            color: white;
-        `}
-`;
-
-export default function Radio(props: Props) {
-    const selected = props.checked ?? false;
-    return (
-        <RadioBase
-            selected={selected}
-            disabled={props.disabled}
-            onClick={() =>
-                !props.disabled && props.onSelect && props.onSelect()
-            }>
-            <div>
-                <Circle size={12} />
-            </div>
-            <input type="radio" checked={props.checked} />
-            <span>
-                <span>{props.children}</span>
-                {props.description && (
-                    <RadioDescription selected={selected}>
-                        {props.description}
-                    </RadioDescription>
-                )}
-            </span>
-        </RadioBase>
-    );
-}

src/context/intermediate/modals/Prompt.tsx

@@ -7,7 +7,7 @@ import styles from "./Prompt.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { InputBox } from "@revoltchat/ui";
+import { InputBox, Radio } from "@revoltchat/ui";
 
 import { TextReact } from "../../../lib/i18n";
 
@@ -15,7 +15,6 @@ import Message from "../../../components/common/messaging/Message";
 import UserIcon from "../../../components/common/user/UserIcon";
 import Modal, { Action } from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
-import Radio from "../../../components/ui/Radio";
 import { Children } from "../../../types/Preact";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
@@ -457,15 +456,19 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 <Text id="app.main.servers.channel_type" />
                             </Overline>
                             <Radio
-                                checked={type === "Text"}
+                                title={
-                                onSelect={() => setType("Text")}>
                                     <Text id="app.main.servers.text_channel" />
-                            </Radio>
+                                }
+                                value={type === "Text"}
+                                onSelect={() => setType("Text")}
+                            />
                             <Radio
-                                checked={type === "Voice"}
+                                title={
-                                onSelect={() => setType("Voice")}>
                                     <Text id="app.main.servers.voice_channel" />
-                            </Radio>
+                                }
+                                value={type === "Voice"}
+                                onSelect={() => setType("Voice")}
+                            />
                             <Overline block type="subtle">
                                 <Text id="app.main.servers.channel_name" />
                             </Overline>