From a15f8e1083aa4105fcbf5eb51f1eb022ed9dcf7a Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Tue, 26 May 2026 21:23:21 +0200
Subject: [PATCH 1/2] feat: custom-radio

---
 src/lib/form/custom-radio.tsx       | 115 ++++++++++++++++++++++++++++
 src/lib/form/radio-group.tsx        |  28 ++-----
 src/lib/form/radio-indicator.tsx    |  56 ++++++++++++++
 src/lib/index.ts                    |   5 ++
 src/stories/customRadio.stories.tsx | 103 +++++++++++++++++++++++++
 5 files changed, 285 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/form/custom-radio.tsx
 create mode 100644 src/lib/form/radio-indicator.tsx
 create mode 100644 src/stories/customRadio.stories.tsx

diff --git a/src/lib/form/custom-radio.tsx b/src/lib/form/custom-radio.tsx
new file mode 100644
index 0000000..433b768
--- /dev/null
+++ b/src/lib/form/custom-radio.tsx
@@ -0,0 +1,115 @@
+import React, { ReactNode } from "react";
+import {
+  Radio as AriaRadio,
+  RadioGroup as AriaRadioGroup,
+  FieldError,
+  type FieldErrorProps,
+  Label,
+  type RadioGroupProps as AriaRadioGroupProps,
+  type RadioProps as AriaRadioProps,
+  type RadioRenderProps,
+} from "react-aria-components";
+import { cn } from "../../utils";
+import { RadioIndicator } from "./radio-indicator";
+
+export { RadioIndicator };
+
+interface CustomRadioItemProps extends Omit<AriaRadioProps, "className"> {
+  className?: string;
+}
+
+/** A single radio whose content is fully owned by the caller. Use the render-prop
+ *  `children` to receive `{ isSelected, isHovered, isFocusVisible, ... }` and compose your
+ *  own UI (cards, labels, ...), placing a `<RadioIndicator>` where you want it. Renders a
+ *  `<label>`, so never nest interactive controls inside it — render adornments (a help
+ *  tooltip) and conditional content (a field) as siblings within the `<CustomRadio>`. */
+export function CustomRadioItem({
+  className,
+  children,
+  ...props
+}: Readonly<CustomRadioItemProps>) {
+  return (
+    <AriaRadio
+      {...props}
+      className={cn(
+        "relative box-border block cursor-pointer",
+        "text-klerosUIComponentsPrimaryText disabled:text-klerosUIComponentsStroke disabled:cursor-default",
+        className,
+      )}
+    >
+      {children}
+    </AriaRadio>
+  );
+}
+
+export interface CustomRadioOption
+  extends Omit<AriaRadioProps, "children" | "className"> {
+  /** Custom content for this option. A function receives the react-aria render props. */
+  content: ReactNode | ((renderProps: RadioRenderProps) => ReactNode);
+  className?: string;
+}
+
+export interface CustomRadioProps
+  extends Omit<AriaRadioGroupProps, "children" | "className"> {
+  /** Convenience API for simple option lists. For per-row adornments or content
+   *  interleaved between options, use `children` (compose `<CustomRadioItem>`s) instead. */
+  items?: CustomRadioOption[];
+  children?: ReactNode;
+  /** Group label rendered above the options. */
+  groupLabel?: string;
+  className?: string;
+  /** Props for field error display.
+   * [See FieldErrorProps](https://react-spectrum.adobe.com/react-aria/RadioGroup.html#fielderror) */
+  fieldErrorProps?: FieldErrorProps;
+}
+
+/** A radio group whose options render arbitrary content (cards, tooltip-wrapped labels, ...)
+ *  while keeping react-aria's `RadioGroup` semantics (single-select, roving tab-index,
+ *  keyboard navigation, `role="radiogroup"`). Pass `items` for simple lists, or `children`
+ *  (compose `<CustomRadioItem>`s, with adornments/fields as siblings) for richer layouts.
+ *  For the plain label-only case, use `Radio` (the `options`-based group) instead.
+ *  [Extends AriaRadioGroupProps](https://react-spectrum.adobe.com/react-aria/RadioGroup.html#radiogroup-1) */
+function CustomRadio({
+  groupLabel,
+  className,
+  fieldErrorProps,
+  items,
+  children,
+  ...props
+}: Readonly<CustomRadioProps>) {
+  return (
+    <AriaRadioGroup
+      {...props}
+      className={cn(
+        "relative flex flex-col gap-2",
+        "orientation-horizontal:flex-row orientation-horizontal:items-center orientation-horizontal:gap-4",
+        className,
+      )}
+    >
+      {groupLabel && (
+        <Label className="text-klerosUIComponentsSecondaryText text-base">
+          {groupLabel}
+        </Label>
+      )}
+      {children ??
+        items?.map(({ content, className: itemClassName, ...item }) => (
+          <CustomRadioItem
+            key={String(item.value)}
+            {...item}
+            className={itemClassName}
+          >
+            {content}
+          </CustomRadioItem>
+        ))}
+      <FieldError
+        {...fieldErrorProps}
+        className={cn(
+          "text-klerosUIComponentsError self-end text-sm",
+          fieldErrorProps?.className,
+        )}
+      />
+    </AriaRadioGroup>
+  );
+}
+
+export default CustomRadio;
diff --git a/src/lib/form/radio-group.tsx b/src/lib/form/radio-group.tsx
index a6c153b..c98b083 100644
--- a/src/lib/form/radio-group.tsx
+++ b/src/lib/form/radio-group.tsx
@@ -10,6 +10,7 @@ import {
 } from "react-aria-components";
 import { cn } from "../../utils";
 import clsx from "clsx";
+import { RadioIndicator } from "./radio-indicator";
 
 interface RadioOption extends AriaRadioProps {
   label: string;
@@ -70,29 +71,12 @@ function RadioGroup({
             option.className,
           )}
         >
-          {({ isSelected, isHovered, isDisabled, isPressed }) => (
+          {(renderProps) => (
             <>
-              <span
-                className={cn(
-                  "border-klerosUIComponentsStroke absolute top-1 left-0 rounded-full border",
-                  "after:bg-klerosUIComponentsPrimaryBlue after:absolute after:hidden after:rounded-full",
-                  "ease-ease after:ease-ease transition-all after:transition-all",
-                  small
-                    ? "size-4 after:top-0.75 after:left-0.75 after:size-2"
-                    : "size-6 after:top-1.25 after:left-1.25 after:size-3",
-                  isSelected && [
-                    "bg-klerosUIComponentsWhiteBackground border-klerosUIComponentsPrimaryBlue after:block",
-                  ],
-                  isHovered && [
-                    "border-klerosUIComponentsSecondaryBlue bg-klerosUIComponentsLightBlue",
-                  ],
-                  isPressed && [
-                    "border-klerosUIComponentsSecondaryBlue after:bg-klerosUIComponentsSecondaryBlue",
-                  ],
-                  isDisabled && [
-                    "border-klerosUIComponentsStroke after:hidden",
-                  ],
-                )}
+              <RadioIndicator
+                {...renderProps}
+                small={small}
+                className="absolute top-1 left-0"
               />
               {option.label}
             </>
diff --git a/src/lib/form/radio-indicator.tsx b/src/lib/form/radio-indicator.tsx
new file mode 100644
index 0000000..605267d
--- /dev/null
+++ b/src/lib/form/radio-indicator.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { type RadioRenderProps } from "react-aria-components";
+import { cn } from "../../utils";
+
+interface RadioIndicatorProps extends Partial<RadioRenderProps> {
+  small?: boolean;
+  /** Show the focus-visible outline on the circle itself (default). Set `false` when the
+   *  surrounding option already renders its own focus ring (e.g. a card whose whole surface
+   *  is the target), so you don't get a ring on both the card and the circle. */
+  focusRing?: boolean;
+  className?: string;
+}
+
+/** The standard radio circle, decoupled from layout so a caller can place it anywhere
+ *  (e.g. on the right of a card, or absolutely positioned beside a label). Spread the
+ *  react-aria render props (`isSelected`, `isHovered`, `isFocusVisible`, ...) onto it to
+ *  drive its state. Shared by `Radio` (the plain group) and `CustomRadio`. */
+export function RadioIndicator({
+  small,
+  isSelected,
+  isHovered,
+  isPressed,
+  isFocusVisible,
+  isDisabled,
+  focusRing = true,
+  className,
+}: Readonly<RadioIndicatorProps>) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "border-klerosUIComponentsStroke relative box-border inline-block shrink-0 rounded-full border",
+        "after:bg-klerosUIComponentsPrimaryBlue after:absolute after:hidden after:rounded-full",
+        "ease-ease after:ease-ease transition-all after:transition-all",
+        small
+          ? "size-4 after:top-0.75 after:left-0.75 after:size-2"
+          : "size-6 after:top-1.25 after:left-1.25 after:size-3",
+        isSelected && [
+          "bg-klerosUIComponentsWhiteBackground border-klerosUIComponentsPrimaryBlue after:block",
+        ],
+        isHovered && [
+          "border-klerosUIComponentsSecondaryBlue bg-klerosUIComponentsLightBlue",
+        ],
+        isPressed && [
+          "border-klerosUIComponentsSecondaryBlue after:bg-klerosUIComponentsSecondaryBlue",
+        ],
+        isFocusVisible &&
+          focusRing && [
+            "outline-klerosUIComponentsPrimaryBlue outline-2 outline-offset-2",
+          ],
+        isDisabled && ["border-klerosUIComponentsStroke after:hidden"],
+        className,
+      )}
+    />
+  );
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5cc56fe..be65bc0 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -26,6 +26,11 @@ export { default as FileUploader } from "./form/file-uploader";
 export { default as Datepicker } from "./form/datepicker";
 
 export { default as Radio } from "./form/radio-group";
+export {
+  default as CustomRadio,
+  CustomRadioItem,
+  RadioIndicator,
+} from "./form/custom-radio";
 export { default as Checkbox } from "../lib/form/checkbox";
 export { default as Switch } from "../lib/form/switch";
 
diff --git a/src/stories/customRadio.stories.tsx b/src/stories/customRadio.stories.tsx
new file mode 100644
index 0000000..327e83b
--- /dev/null
+++ b/src/stories/customRadio.stories.tsx
@@ -0,0 +1,103 @@
+import React, { Fragment, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IPreviewArgs } from "./utils";
+
+import CustomRadio, {
+  CustomRadioItem,
+  RadioIndicator,
+} from "../lib/form/custom-radio";
+import Card from "../lib/container/card";
+import TextField from "../lib/form/text-field";
+import { cn } from "../utils";
+
+const meta = {
+  component: CustomRadio,
+  title: "Input/CustomRadio",
+  tags: ["autodocs"],
+} satisfies Meta<typeof CustomRadio>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & IPreviewArgs;
+
+/** `items` API — the simplest case. Each option is a full card with the indicator on
+ *  the right; the whole card is the click target (it is the radio's `<label>`). Because
+ *  the card is the target, the focus ring and selected emphasis go on the card (driven by
+ *  the render props), not on the small circle — so `RadioIndicator` gets `focusRing={false}`
+ *  to avoid a double ring. This mirrors react-aria's own card-radio example. */
+export const Cards: Story = {
+  args: { themeUI: "dark", backgroundUI: "light" },
+  render: function Render() {
+    const [value, setValue] = useState("scratch");
+    return (
+      <CustomRadio
+        aria-label="Creation method"
+        value={value}
+        onChange={setValue}
+        items={[
+          { value: "scratch", title: "Create a case from scratch" },
+          { value: "duplicate", title: "Duplicate an existing case" },
+        ].map(({ value: v, title }) => ({
+          value: v,
+          content: (rp) => (
+            <Card
+              hover
+              className={cn(
+                "flex h-fit w-[420px] items-center gap-4 p-4",
+                rp.isSelected && "border-klerosUIComponentsPrimaryBlue",
+                rp.isFocusVisible &&
+                  "ring-klerosUIComponentsPrimaryBlue ring-2 ring-offset-2",
+              )}
+            >
+              <span className="text-klerosUIComponentsPrimaryText grow text-base">
+                {title}
+              </span>
+              <RadioIndicator {...rp} focusRing={false} />
+            </Card>
+          ),
+        }))}
+      />
+    );
+  },
+};
+
+/** Composition API (`children` + `<CustomRadioItem>`). Use this when options need
+ *  per-row adornments or interleaved content that the flat `items` array can't express.
+ *  Here a conditional `<TextField>` is rendered as a sibling of the selected option —
+ *  it must NOT go inside the radio's `<label>` (interactive controls there are invalid
+ *  and would toggle the radio). The `RadioIndicator` is driven by the item's render props. */
+export const Composition: Story = {
+  args: { themeUI: "dark", backgroundUI: "light" },
+  render: function Render() {
+    const [value, setValue] = useState("all");
+    const options = [
+      { value: "all", label: "All jurors in the court" },
+      { value: "gated", label: "Jurors owning a specific ERC-20" },
+    ];
+    return (
+      <CustomRadio
+        aria-label="Eligibility"
+        groupLabel="Eligibility"
+        value={value}
+        onChange={setValue}
+      >
+        {options.map(({ value: v, label }) => (
+          <Fragment key={v}>
+            <CustomRadioItem value={v}>
+              {(rp) => (
+                <span className="flex items-center gap-2">
+                  <RadioIndicator {...rp} small />
+                  {label}
+                </span>
+              )}
+            </CustomRadioItem>
+            {v === "gated" && value === "gated" ? (
+              <TextField aria-label="Token address" placeholder="0x..." />
+            ) : null}
+          </Fragment>
+        ))}
+      </CustomRadio>
+    );
+  },
+};

From c03a92504f57532f6b35220eb9d33287ba935255 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Tue, 26 May 2026 21:32:18 +0200
Subject: [PATCH 2/2] fix: sonarcloud issues

---
 src/lib/form/custom-radio.tsx       |  3 +-
 src/stories/customRadio.stories.tsx | 64 +++++++++++++++++------------
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/lib/form/custom-radio.tsx b/src/lib/form/custom-radio.tsx
index 433b768..7bb534d 100644
--- a/src/lib/form/custom-radio.tsx
+++ b/src/lib/form/custom-radio.tsx
@@ -10,9 +10,8 @@ import {
   type RadioRenderProps,
 } from "react-aria-components";
 import { cn } from "../../utils";
-import { RadioIndicator } from "./radio-indicator";
 
-export { RadioIndicator };
+export { RadioIndicator } from "./radio-indicator";
 
 interface CustomRadioItemProps extends Omit<AriaRadioProps, "className"> {
   className?: string;
diff --git a/src/stories/customRadio.stories.tsx b/src/stories/customRadio.stories.tsx
index 327e83b..a0bf07a 100644
--- a/src/stories/customRadio.stories.tsx
+++ b/src/stories/customRadio.stories.tsx
@@ -1,11 +1,13 @@
 import React, { Fragment, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import type { RadioRenderProps } from "react-aria-components";
 
 import { IPreviewArgs } from "./utils";
 
 import CustomRadio, {
   CustomRadioItem,
   RadioIndicator,
+  type CustomRadioOption,
 } from "../lib/form/custom-radio";
 import Card from "../lib/container/card";
 import TextField from "../lib/form/text-field";
@@ -21,11 +23,40 @@ export default meta;
 
 type Story = StoryObj<typeof meta> & IPreviewArgs;
 
-/** `items` API — the simplest case. Each option is a full card with the indicator on
- *  the right; the whole card is the click target (it is the radio's `<label>`). Because
- *  the card is the target, the focus ring and selected emphasis go on the card (driven by
- *  the render props), not on the small circle — so `RadioIndicator` gets `focusRing={false}`
- *  to avoid a double ring. This mirrors react-aria's own card-radio example. */
+/** A full-card option with the indicator on the right; the whole card is the click target
+ *  (it is the radio's `<label>`). Because the card is the target, the focus ring and selected
+ *  emphasis go on the card (driven by the render props), not on the small circle — so
+ *  `RadioIndicator` gets `focusRing={false}` to avoid a double ring. Defined at module scope
+ *  (not inside the story's `render`) so it keeps a stable identity across renders. */
+const CreationMethodCard = ({
+  title,
+  ...rp
+}: RadioRenderProps & { title: string }) => (
+  <Card
+    hover
+    className={cn(
+      "flex h-fit w-[420px] items-center gap-4 p-4",
+      rp.isSelected && "border-klerosUIComponentsPrimaryBlue",
+      rp.isFocusVisible &&
+        "ring-klerosUIComponentsPrimaryBlue ring-2 ring-offset-2",
+    )}
+  >
+    <span className="text-klerosUIComponentsPrimaryText grow text-base">
+      {title}
+    </span>
+    <RadioIndicator {...rp} focusRing={false} />
+  </Card>
+);
+
+const CREATION_METHOD_ITEMS: CustomRadioOption[] = [
+  { value: "scratch", title: "Create a case from scratch" },
+  { value: "duplicate", title: "Duplicate an existing case" },
+].map(({ value, title }) => ({
+  value,
+  content: (rp) => <CreationMethodCard title={title} {...rp} />,
+}));
+
+/** `items` API — the simplest case. This mirrors react-aria's own card-radio example. */
 export const Cards: Story = {
   args: { themeUI: "dark", backgroundUI: "light" },
   render: function Render() {
@@ -35,28 +66,7 @@ export const Cards: Story = {
         aria-label="Creation method"
         value={value}
         onChange={setValue}
-        items={[
-          { value: "scratch", title: "Create a case from scratch" },
-          { value: "duplicate", title: "Duplicate an existing case" },
-        ].map(({ value: v, title }) => ({
-          value: v,
-          content: (rp) => (
-            <Card
-              hover
-              className={cn(
-                "flex h-fit w-[420px] items-center gap-4 p-4",
-                rp.isSelected && "border-klerosUIComponentsPrimaryBlue",
-                rp.isFocusVisible &&
-                  "ring-klerosUIComponentsPrimaryBlue ring-2 ring-offset-2",
-              )}
-            >
-              <span className="text-klerosUIComponentsPrimaryText grow text-base">
-                {title}
-              </span>
-              <RadioIndicator {...rp} focusRing={false} />
-            </Card>
-          ),
-        }))}
+        items={CREATION_METHOD_ITEMS}
       />
     );
   },