From d7ef67f72ce6a48366a1b7f6f5f13a76d6a86673 Mon Sep 17 00:00:00 2001
From: Josem1801 <Josemanuelrosales2@gmail.com>
Date: Fri, 20 Jun 2025 19:18:00 -0600
Subject: [PATCH] feat(react): add Radio component

---
 js/react/lib/components/radio/index.ts        |  1 +
 .../lib/components/radio/radio.component.tsx  | 22 +++++++++++++++++++
 js/react/lib/index.ts                         |  1 +
 js/react/lib/styles.css                       |  1 +
 js/react/showcase/App.tsx                     | 12 ++++++++++
 5 files changed, 37 insertions(+)
 create mode 100644 js/react/lib/components/radio/index.ts
 create mode 100644 js/react/lib/components/radio/radio.component.tsx

diff --git a/js/react/lib/components/radio/index.ts b/js/react/lib/components/radio/index.ts
new file mode 100644
index 0000000..b000033
--- /dev/null
+++ b/js/react/lib/components/radio/index.ts
@@ -0,0 +1 @@
+export * from "./radio.component";
diff --git a/js/react/lib/components/radio/radio.component.tsx b/js/react/lib/components/radio/radio.component.tsx
new file mode 100644
index 0000000..69fb219
--- /dev/null
+++ b/js/react/lib/components/radio/radio.component.tsx
@@ -0,0 +1,22 @@
+import { cn } from "@/utils/tw-merge";
+import { InputHTMLAttributes } from "react";
+
+type RadioProps = InputHTMLAttributes<HTMLInputElement>;
+
+export const Radio = ({ className, ...rest }: RadioProps) => {
+  return (
+    <input
+      className={cn([
+        "shadow-rb-black aspect-square appearance-none transition",
+        "flex size-4 items-center justify-center rounded-full border border-black",
+        "after:absolute after:size-2 after:rounded-full after:transition",
+        "dark:bg-dark bg-white",
+        "after:bg-gray dark:after:bg-neutral-500",
+        "checked:after:bg-primary-500",
+        className,
+      ])}
+      type="radio"
+      {...rest}
+    />
+  );
+};
diff --git a/js/react/lib/index.ts b/js/react/lib/index.ts
index 8e3ae4a..edaf843 100644
--- a/js/react/lib/index.ts
+++ b/js/react/lib/index.ts
@@ -6,4 +6,5 @@ export * from "./components/flap";
 export * from "./components/level";
 export * from "./components/avatar";
 export * from "./components/collaborators";
+export * from "./components/radio";
 export * from "./icons";
diff --git a/js/react/lib/styles.css b/js/react/lib/styles.css
index ac0134d..0461c8e 100644
--- a/js/react/lib/styles.css
+++ b/js/react/lib/styles.css
@@ -83,6 +83,7 @@
 
   --color-light: #fafafa;
   --color-dark: #2e2e2e;
+  --color-gray: #D9D9D9;
 
   /* Fonts */
   --text-xxs: 10px;
diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx
index c7f6c35..3b7bd5c 100644
--- a/js/react/showcase/App.tsx
+++ b/js/react/showcase/App.tsx
@@ -8,6 +8,7 @@ import {
   Chip,
   Level,
   Collaborators,
+  Radio,
 } from "@rustlanges/react";
 import { ShowComponent } from "./ShowComponent";
 
@@ -207,6 +208,17 @@ export function App() {
           </div>
         </div>
       </ShowComponent>
+      <ShowComponent
+        title="Radio"
+        component={Radio}
+        propsDef={{
+          checked: {
+            type: "boolean",
+            default: false,
+            optional: true,
+          },
+        }}
+      />
     </div>
   );
 }