From 73b3e1032373e7f2a27b0783cad7eecb496b88f0 Mon Sep 17 00:00:00 2001
From: Dzung Nguyen <bluesky.1289@gmail.com>
Date: Sat, 28 Sep 2024 22:58:11 +0700
Subject: [PATCH] Improve radio input, consistent UI cross browser

---
 lib/salad_ui/radio_group.ex | 42 ++++++++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/lib/salad_ui/radio_group.ex b/lib/salad_ui/radio_group.ex
index 821bdbc..4c5f150 100644
--- a/lib/salad_ui/radio_group.ex
+++ b/lib/salad_ui/radio_group.ex
@@ -53,18 +53,36 @@ defmodule SaladUI.RadioGroup do
 
   def radio_group_item(assigns) do
     ~H"""
-    <input
-      type="radio"
-      class={
-        classes([
-          "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-          @class
-        ])
-      }
-      name={@builder.name}
-      checked={normalize_boolean(@checked) || @builder.value == @value}
-      {@rest}
-    />
+    <label class={
+      classes([
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 inline-grid",
+        @class
+      ])
+    }>
+      <input
+        type="radio"
+        class="hidden peer/radio"
+        name={@builder.name}
+        checked={normalize_boolean(@checked) || @builder.value == @value}
+        {@rest}
+      />
+      <span class="hidden items-center justify-center peer-checked/radio:flex">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-circle h-2.5 w-2.5 fill-current text-current"
+        >
+          <circle cx="12" cy="12" r="10"></circle>
+        </svg>
+      </span>
+    </label>
     """
   end
 end