feat(ui): add reusable radio card from mantine

see https://mantine.dev/core/radio/#radiocard-component

packages/ui/src/components/radio.module.css

@@ -0,0 +1,33 @@
+.root {
+  position: relative;
+  padding: var(--mantine-spacing-md);
+  transition: border-color 150ms ease;
+
+  &[data-checked] {
+    border-color: var(--mantine-primary-color-filled);
+  }
+
+  @mixin hover {
+    @mixin light {
+      background-color: var(--mantine-color-gray-0);
+    }
+
+    @mixin dark {
+      background-color: var(--mantine-color-dark-6);
+    }
+  }
+}
+
+.label {
+  font-family: var(--mantine-font-family-monospace);
+  font-weight: bold;
+  font-size: var(--mantine-font-size-md);
+  line-height: 1.3;
+  color: var(--mantine-color-bright);
+}
+
+.description {
+  margin-top: 8px;
+  color: var(--mantine-color-dimmed);
+  font-size: var(--mantine-font-size-xs);
+}

packages/ui/src/components/radio.tsx

@@ -0,0 +1,24 @@
+import type { RadioCardProps } from "@mantine/core";
+import { Group, RadioCard, RadioIndicator, Text } from "@mantine/core";
+import clsx from "clsx";
+
+import classes from "./radio.module.css";
+
+interface CustomRadioCardProps extends RadioCardProps {
+  name: string;
+  description: string;
+}
+
+export const CustomRadioCard = (props: CustomRadioCardProps) => {
+  return (
+    <RadioCard className={clsx(classes.root, props.className)} {...props}>
+      <Group wrap="nowrap" align="flex-start">
+        <RadioIndicator />
+        <div>
+          <Text className={classes.label}>{props.name}</Text>
+          <Text className={classes.description}>{props.description}</Text>
+        </div>
+      </Group>
+    </RadioCard>
+  );
+};