feat: introduce Radio component

packages/ui/src/StoryPlayground/StoryPlayground.tsx

@@ -5,6 +5,7 @@ import { ComponentProps, FC, ReactNode, useState } from "react";
 import type { StoryFn } from "@storybook/react";
 
 import { Card } from "../components/Card";
+import { Radio } from "../components/Radio";
 import { ThemeSwitcher } from "../components/ThemeSwitcher";
 import { cn } from "../utils";
 
@@ -104,16 +105,18 @@ const Variants = <
   return (
     <div className="relative inline-block p-14">
       <section className="absolute right-2 top-2 flex items-center gap-2 p-2.5">
-        <div className="btn-group">
+        <div className="join">
           {VIEW_OPTIONS.map((device) => (
-            <input
-              key={device}
-              type="radio"
-              name="viewports"
-              data-title={device.split("-").join(" ")}
-              className="btn btn-sm"
-              onClick={setView.bind(null, device)}
-            />
+            <label key={device} className="btn btn-sm join-item">
+              <span>{device.split("-").join(" ")}</span>
+              <Radio
+                key={device}
+                name="viewports"
+                onClick={setView.bind(null, device)}
+                value={device}
+                className="hidden"
+              />
+            </label>
           ))}
         </div>
         <ThemeSwitcher />
@@ -129,7 +132,6 @@ const Variants = <
               </small>
             ))}
           </Card.Title>
-
           <div
             className={cn(
               "artboard artboard-demo bg-base-300 mx-auto p-4 transition-all duration-300",

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -33,7 +33,7 @@ export interface CheckboxProps extends InputElement, VProps {
 }
 
 /**
- * A text input component
+ * A checkbox input component
  */
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   ({ variant, inputSize, className, ...props }, ref) => (

packages/ui/src/components/Radio/Radio.spec.tsx

@@ -0,0 +1,13 @@
+import { composeStories } from "@storybook/react";
+import { render } from "@testing-library/react";
+
+import * as stories from "./Radio.stories";
+
+const { Default } = composeStories(stories);
+
+describe("Radio", () => {
+  it("renders Default component story without breaking", () => {
+    const { container } = render(<Default />);
+    expect(container).toBeVisible();
+  });
+});

packages/ui/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,46 @@
+import { pluralizeKeys } from "@axelarjs/utils";
+
+import type { Meta, StoryFn } from "@storybook/react";
+
+import { configurePlayground } from "../../StoryPlayground";
+import { COLOR_VARIANTS, SIZE_VARIANTS } from "../../theme";
+import { Radio } from "./Radio";
+
+export default {
+  title: "components/Radio",
+  component: Radio,
+  docs: {
+    description: {
+      component: "Radio, Radio, does whatever a Radio do.",
+    },
+  },
+} as Meta<typeof Radio>;
+
+const Template: StoryFn<typeof Radio> = (args) => {
+  return <Radio {...args} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {};
+
+const { InputSizes, Variants } = pluralizeKeys(
+  configurePlayground(
+    Radio,
+    {
+      inputSize: {
+        values: SIZE_VARIANTS,
+        noChildren: true,
+      },
+      variant: {
+        values: COLOR_VARIANTS,
+        noChildren: true,
+      },
+    },
+    {
+      defaultChecked: true,
+    }
+  )
+);
+
+export { InputSizes, Variants };

packages/ui/src/components/Radio/Radio.tsx

@@ -0,0 +1,55 @@
+import { forwardRef } from "react";
+
+import { cva, VariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+
+const inputVariance = cva("radio", {
+  variants: {
+    variant: {
+      primary: "radio-primary",
+      secondary: "radio-secondary",
+      accent: "radio-accent",
+      success: "radio-success",
+      warning: "radio-warning",
+      error: "radio-error",
+      info: "radio-info",
+    },
+    inputSize: {
+      xs: "radio-xs",
+      sm: "radio-sm",
+      md: "radio-md",
+      lg: "radio-lg",
+    },
+  },
+});
+
+type VProps = VariantProps<typeof inputVariance>;
+
+type InputElement = Omit<JSX.IntrinsicElements["input"], "type" | "color">;
+
+export interface RadioProps extends InputElement, VProps {
+  type?: never;
+  placeholder?: never;
+}
+
+/**
+ * A radio input component
+ */
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ variant, inputSize, className, ...props }, ref) => (
+    <input
+      ref={ref}
+      type="radio"
+      className={twMerge(
+        inputVariance({
+          variant,
+          inputSize,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+);
+
+Radio.displayName = "Radio";

packages/ui/src/components/Radio/index.ts

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

packages/ui/src/components/index.ts

@@ -17,6 +17,7 @@ export * from "./Loading";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./Navbar";
+export * from "./Radio";
 export * from "./Steps";
 export * from "./Table";
 export * from "./Tabs";