feat: custom-radio

[kemuru]

PR-Codex overview

This PR introduces a new CustomRadio component along with its associated items and indicators, enhancing the radio button functionality with customizable options. It also modifies the existing RadioGroup to utilize the new RadioIndicator for a more streamlined appearance.

Detailed summary

• Added export for CustomRadio, CustomRadioItem, and RadioIndicator in src/lib/index.ts.
• Introduced RadioIndicator component in src/lib/form/radio-indicator.tsx.
• Updated RadioGroup to use RadioIndicator instead of a span for rendering.
• Created CustomRadio and CustomRadioItem components in src/lib/form/custom-radio.tsx.
• Implemented new stories for CustomRadio in src/stories/customRadio.stories.tsx, showcasing usage with cards and composition options.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

• New Features

  • Added CustomRadio for flexible radio groups (supports item lists or custom children) and CustomRadioItem for per-option composition.
  • Added RadioIndicator to show visual states (selected, hovered, pressed, focus, disabled).

• Documentation

  • Added Storybook examples demonstrating card-style options and composition with custom option content.

[netlify]

✅ Deploy Preview for kleros-v2-ui-storybook ready!

Name	Link
🔨 Latest commit	c03a925
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-ui-storybook/deploys/6a15f54d85eb8700086b8a64
😎 Deploy Preview	https://deploy-preview-88--kleros-v2-ui-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c5b1f2d1-b48e-43d4-8676-fe26c785cba8

📥 Commits

Reviewing files that changed from the base of the PR and between a15f8e1 and c03a925.

📒 Files selected for processing (2)

• src/lib/form/custom-radio.tsx
• src/stories/customRadio.stories.tsx

---

Walkthrough

This PR adds a reusable RadioIndicator component and a CustomRadio suite (CustomRadioItem + CustomRadio) built on react-aria-components, refactors radio-group to use RadioIndicator, adds Storybook examples (Cards, Composition), and exports the new components from the public library index.

Changes

Custom Radio Component Suite

Layer / File(s)	Summary
RadioIndicator: circular radio state display src/lib/form/radio-indicator.tsx	RadioIndicator renders a circular span that conditionally applies Tailwind classes based on radio state props (isSelected, isHovered, isPressed, isFocusVisible, isDisabled); supports small, focusRing, and className.
CustomRadio: group and item components src/lib/form/custom-radio.tsx	Adds CustomRadioItem (styled AriaRadio wrapper) and CustomRadio (styled AriaRadioGroup) with an items convenience API, optional groupLabel, fieldErrorProps, children override, and re-exports RadioIndicator.
RadioGroup: adopt RadioIndicator src/lib/form/radio-group.tsx	Replaces inline render-props indicator UI with the new RadioIndicator component for per-option indicator rendering.
Public API exports src/lib/index.ts	Exports CustomRadio, CustomRadioItem, and RadioIndicator from the library entry.
Storybook stories: Cards and Composition examples src/stories/customRadio.stories.tsx	Adds Cards (items-based card UI using RadioIndicator) and Composition (children-based composition with conditional TextField) stories demonstrating CustomRadio usage.

🎯 3 (Moderate) | ⏱️ ~20 minutes

"I nibble code and stitch a ring,
A tiny span for states to sing.
Cards align, compositions play,
CustomRadio hops into the day.
🐇✨"

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: custom-radio' directly describes the main feature being added—a new CustomRadio component—and aligns with the PR's primary objective of introducing this new component and its supporting infrastructure.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/custom-radio

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/lib/form/radio-indicator.tsx`:
- Line 34: The class string contains an invalid Tailwind easing token
"ease-ease" in radio-indicator.tsx; replace "ease-ease" (and any matching after:
variant like "after:ease-ease") with a valid Tailwind easing class such as
"ease", "ease-in", "ease-out", "ease-in-out", or "ease-linear" (e.g., change to
"ease-in-out after:ease-in-out transition-all after:transition-all") so the
component's transition classes are valid and consistent.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 11f917c7-d05c-4af8-a211-0dbe88151f01

📥 Commits

Reviewing files that changed from the base of the PR and between 407e2f3 and a15f8e1.

📒 Files selected for processing (5)

• src/lib/form/custom-radio.tsx
• src/lib/form/radio-group.tsx
• src/lib/form/radio-indicator.tsx
• src/lib/index.ts
• src/stories/customRadio.stories.tsx

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud