feat(react): add Radio component

js/react/lib/components/radio/index.ts

@@ -0,0 +1 @@
+export * from "./radio.component";

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}
+    />
+  );
+};

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";

js/react/lib/styles.css

@@ -83,6 +83,7 @@
 
   --color-light: #fafafa;
   --color-dark: #2e2e2e;
+  --color-gray: #D9D9D9;
 
   /* Fonts */
   --text-xxs: 10px;

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>
   );
 }