From e65c3cd801b1c4c15ac9710f845a9086d98f031f Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Wed, 26 Nov 2025 18:21:07 +0100
Subject: [PATCH] feat(ui): add reusable radio card from mantine see
 https://mantine.dev/core/radio/#radiocard-component

---
 packages/ui/src/components/radio.module.css | 33 +++++++++++++++++++++
 packages/ui/src/components/radio.tsx        | 24 +++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 packages/ui/src/components/radio.module.css
 create mode 100644 packages/ui/src/components/radio.tsx

diff --git a/packages/ui/src/components/radio.module.css b/packages/ui/src/components/radio.module.css
new file mode 100644
index 000000000..46eedff7d
--- /dev/null
+++ b/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);
+}
diff --git a/packages/ui/src/components/radio.tsx b/packages/ui/src/components/radio.tsx
new file mode 100644
index 000000000..ac7beeba2
--- /dev/null
+++ b/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>
+  );
+};