first commit

packages/blocks/src/elements/radio.tsx

@@ -0,0 +1,44 @@
+import { Radio } from "@cloudflare/kumo";
+import { useCallback, useEffect, useState } from "react";
+
+import type { BlockInteraction, RadioElement } from "../types.js";
+
+export function RadioElementComponent({
+	element,
+	onAction,
+	onChange,
+}: {
+	element: RadioElement;
+	onAction: (interaction: BlockInteraction) => void;
+	onChange?: (actionId: string, value: unknown) => void;
+}) {
+	const [value, setValue] = useState(element.initial_value ?? "");
+
+	useEffect(() => {
+		setValue(element.initial_value ?? "");
+	}, [element.initial_value]);
+
+	const handleChange = useCallback(
+		(newValue: string) => {
+			setValue(newValue);
+			if (onChange) {
+				onChange(element.action_id, newValue);
+			} else {
+				onAction({
+					type: "block_action",
+					action_id: element.action_id,
+					value: newValue,
+				});
+			}
+		},
+		[onChange, onAction, element.action_id],
+	);
+
+	return (
+		<Radio.Group legend={element.label} value={value} onValueChange={handleChange}>
+			{element.options.map((opt) => (
+				<Radio.Item key={opt.value} value={opt.value} label={opt.label} />
+			))}
+		</Radio.Group>
+	);
+}