Port over more UI elements.

src/components/ui/Checkbox.tsx

@@ -1,6 +1,6 @@
 import { Check } from '@styled-icons/feather';
+import { Children } from "../../types/Preact";
 import styled, { css } from 'styled-components';
-import { VNode } from 'preact';
 
 const CheckboxBase = styled.label`
 	gap: 4px;
@@ -62,8 +62,8 @@ interface Props {
     checked: boolean;
     disabled?: boolean;
     className?: string;
-    children: VNode | string;
-    description?: VNode | string;
+    children: Children;
+    description?: Children;
     onChange: (state: boolean) => void;
 }
 

src/components/ui/ColourSwatches.tsx

@@ -0,0 +1,118 @@
+import { useRef } from 'preact/hooks';
+import { Check } from '@styled-icons/feather';
+import styled, { css } from 'styled-components';
+import { Pencil } from '@styled-icons/bootstrap';
+
+interface Props {
+    value: string;
+    onChange: (value: string) => void;
+}
+
+const presets = [
+    [
+        "#7B68EE",
+        "#3498DB",
+        "#1ABC9C",
+        "#F1C40F",
+        "#FF7F50",
+        "#FD6671",
+        "#E91E63",
+        "#D468EE"
+    ],
+    [
+        "#594CAD",
+        "#206694",
+        "#11806A",
+        "#C27C0E",
+        "#CD5B45",
+        "#FF424F",
+        "#AD1457",
+        "#954AA8"
+    ]
+];
+
+const SwatchesBase = styled.div`
+    gap: 8px;
+    display: flex;
+
+    input {
+        opacity: 0;
+        margin-top: 44px;
+        position: absolute;
+        pointer-events: none;
+    }
+`;
+
+const Swatch = styled.div<{ type: 'small' | 'large', colour: string }>`
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: ${ props => props.colour };
+
+    display: grid;
+    place-items: center;
+
+    &:hover {
+        border: 3px solid var(--foreground);
+        transition: border ease-in-out .07s;
+    }
+
+    svg {
+        color: white;
+    }
+
+    ${ props => props.type === 'small' ? css`
+        width: 30px;
+        height: 30px;
+
+        svg {
+            stroke-width: 2;
+        }
+    ` : css`
+        width: 68px;
+        height: 68px;
+    ` }
+`;
+
+const Rows = styled.div`
+    gap: 8px;
+    display: flex;
+    flex-direction: column;
+
+    > div {
+        gap: 8px;
+        display: flex;
+        flex-direction: row;
+    }
+`;
+
+export function ColourSwatches({ value, onChange }: Props) {
+    const ref = useRef<HTMLInputElement>();
+
+    return (
+        <SwatchesBase>
+            <Swatch colour={value} type='large'
+                onClick={() => ref.current.click()}>
+                <Pencil size={32} />
+            </Swatch>
+            <input
+                type="color"
+                value={value}
+                ref={ref}
+                onChange={ev => onChange(ev.currentTarget.value)}
+            />
+            <Rows>
+                {presets.map(row => (
+                    <div>
+                        { row.map(swatch => (
+                            <Swatch colour={swatch} type='small'
+                                onClick={() => onChange(swatch)}>
+                                {swatch === value && <Check size={18} strokeWidth={2} />}
+                            </Swatch>
+                        )) }
+                    </div>
+                ))}
+            </Rows>
+        </SwatchesBase>
+    )
+}

src/components/ui/LineDivider.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const LineDivider = styled.div`
+    height: 0px;
+    opacity: 0.6;
+    flex-shrink: 0;
+    margin: 8px 10px;
+    border-top: 1px solid var(--tertiary-foreground);
+`;

src/components/ui/Overline.tsx

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components';
+import { Children } from '../../types/Preact';
+
+interface Props {
+    block?: boolean;
+    error?: Children;
+    children?: Children;
+    type?: "default" | "subtle" | "error";
+}
+
+const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
+    display: inline;
+    margin: 0.4em 0;
+    margin-top: 0.8em;
+
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--foreground);
+    text-transform: uppercase;
+
+    ${ props => props.type === 'subtle' && css`
+        font-size: 12px;
+        color: var(--secondary-foreground);
+    ` }
+
+    ${ props => props.type === 'error' && css`
+        font-size: 12px;
+        font-weight: 400;
+        color: var(--error);
+    ` }
+
+    ${ props => props.block && css`display: block;` }
+`;
+
+export function Overline(props: Props) {
+    return (
+        <OverlineBase {...props}>
+            { props.children }
+            { props.children && props.error && <> &middot; </> }
+            { props.error && (
+                <Overline type="error">
+                    { props.error }
+                </Overline>
+            ) }
+        </OverlineBase>
+    )
+}

src/components/ui/Preloader.tsx

@@ -0,0 +1,3 @@
+export function Preloader() {
+    return <span>LOADING</span>
+}

src/components/ui/Radio.tsx

@@ -0,0 +1,108 @@
+import { Children } from "../../types/Preact";
+import styled, { css } from 'styled-components';
+import { CircleFill } from "@styled-icons/bootstrap";
+
+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;
+    border-radius: 4px;
+    transition: .2s ease all;
+
+    &:hover {
+        background: var(--hover);
+    }
+
+    > input {
+        display: none;
+    }
+
+    > div {
+        margin: 4px;
+        width: 24px;
+        height: 24px;
+        display: grid;
+        border-radius: 50%;
+        place-items: center;
+        background: var(--foreground);
+
+        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 function Radio(props: Props) {
+    return (
+        <RadioBase
+            selected={props.checked}
+            disabled={props.disabled}
+            onClick={() => !props.disabled && props.onSelect && props.onSelect()}
+        >
+            <div>
+                <CircleFill size={12} />
+            </div>
+            <input
+                type="radio"
+                checked={props.checked}
+            />
+            <span>
+                <span>{props.children}</span>
+                {props.description && (
+                    <RadioDescription selected={props.checked}>
+                        {props.description}
+                    </RadioDescription>
+                )}
+            </span>
+        </RadioBase>
+    );
+}

src/components/ui/Tip.tsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { Info } from "@styled-icons/feather";
+import { Children } from "../../types/Preact";
+
+export const TipBase = styled.div`
+	display: flex;
+    padding: 12px;
+    overflow: hidden;
+    align-items: center;
+
+    font-size: 14px;
+    border-radius: 7px;
+    background: var(--primary-header);
+    border: 2px solid var(--secondary-header);
+
+    a {
+        cursor: pointer;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+    
+    svg {
+        flex-shrink: 0;
+        margin-right: 10px;
+    }
+`;
+
+export function Tip(props: { children: Children }) {
+    return (
+        <TipBase>
+            <Info size={20} strokeWidth={2} />
+            <span>{ props.children }</span>
+        </TipBase>
+    )
+}