Merge pull request #34 from ivalshamkya/feat/radio

Feat/radio

apps/www/src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import Button from "@/components/neobruu/Button";
 import { IoLogoGithub } from "react-icons/io";

apps/www/src/components/CopyCode.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useState } from "react";
 import Button from "./neobruu/Button";
 import { IoCheckmark, IoCopy } from "react-icons/io5";

apps/www/src/components/MobileSidebar.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { useState } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";

apps/www/src/components/Navbar.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import Link from "next/link";
 import { AiFillGithub } from "react-icons/ai";

apps/www/src/components/Pagination.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { useRouter } from "next/navigation";
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 import Button from "@/components/neobruu/Button";

apps/www/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { usePathname } from "next/navigation";
 import components from "@/data/components";
 import Link from "next/link";

apps/www/src/components/example/AccordionExample.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Accordion from "@/components/neobruu/Accordion";
 
 export default function AccordionExample() {

apps/www/src/components/example/CheckboxExample.tsx

@@ -5,8 +5,8 @@ export default function CheckboxExample() {
     <div className="flex gap-3">
       <Checkbox />
       <Checkbox rounded="sm" variant="red" />
-      <Checkbox rounded="lg" variant="yellow" />
-      <Checkbox rounded="full" variant="blue" />
+      <Checkbox rounded="md" variant="yellow" />
+      <Checkbox rounded="lg" variant="blue" />
     </div>
   );
 }

apps/www/src/components/example/DialogExample.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { useState } from "react";
 
 import Dialog from "@/components/neobruu/Dialog";

apps/www/src/components/example/DrawerExample.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Drawer from "@/components/neobruu/Drawer";
 import { useState } from "react";
 import Button from "@/components/neobruu/Button";

apps/www/src/components/example/DropdownExample.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Dropdown from "@/components/neobruu/Dropdown";
 
 export default function DropdownExample() {

apps/www/src/components/example/InputExample.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Input from "@/components/neobruu/Input";
 import { ChangeEvent, useState } from "react";
 

apps/www/src/components/example/RadioExample.tsx

@@ -0,0 +1,12 @@
+import Radio from "@/components/neobruu/Radio";
+
+export default function RadioExample() {
+  return (
+    <div className="flex gap-3">
+      <Radio name="example" />
+      <Radio name="example" variant="red" />
+      <Radio name="example" variant="yellow" />
+      <Radio name="example" variant="blue" />
+    </div>
+  );
+}

apps/www/src/components/example/TabsExample.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Tabs from "@/components/neobruu/Tabs";
 
 export default function TabsExample() {

apps/www/src/components/example/TextareaExample.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Textarea from "@/components/neobruu/Textarea";
 import { ChangeEvent, useState } from "react";
 

apps/www/src/components/example/ToastExample.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import { useState } from "react";
 import { HiExclamation } from "react-icons/hi";
 

apps/www/src/components/neobruu/Accordion.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useEffect, useMemo, useState } from "react";
 import { cva } from "class-variance-authority";
 import { FiChevronDown } from "react-icons/fi";

apps/www/src/components/neobruu/Alert.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useState } from "react";
 import { IoClose } from "react-icons/io5";
 import { VariantProps, cva } from "class-variance-authority";

apps/www/src/components/neobruu/Button.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import Link from "next/link";
 import { VariantProps, cva } from "class-variance-authority";

apps/www/src/components/neobruu/Checkbox.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { InputHTMLAttributes, useState } from "react";
 import { BsCheck } from "react-icons/bs";
 import { VariantProps, cva } from "class-variance-authority";
@@ -23,7 +23,6 @@ const checkboxVariants = cva(
         md: "rounded-md",
         lg: "rounded-lg",
         xl: "rounded-xl",
-        full: "rounded-full",
       },
     },
     defaultVariants: {

apps/www/src/components/neobruu/Dialog.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useEffect, useState } from "react";
 import { IoClose } from "react-icons/io5";
 import { VariantProps, cva } from "class-variance-authority";

apps/www/src/components/neobruu/Drawer.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useEffect, useState } from "react";
 import { VariantProps, cva } from "class-variance-authority";
 

apps/www/src/components/neobruu/Dropdown.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useState } from "react";
 import { FaChevronDown } from "react-icons/fa";
 import { VariantProps, cva } from "class-variance-authority";

apps/www/src/components/neobruu/Radio.tsx

@@ -0,0 +1,47 @@
+'use client';
+import React, { InputHTMLAttributes, useState } from "react";
+import { BsCheck } from "react-icons/bs";
+import { VariantProps, cva } from "class-variance-authority";
+
+const radioVariants = cva(
+  "peer relative appearance-none shrink-0 w-5 h-5 mt-1 rounded-full border-2 hover:shadow-[2px_2px_0px_0px] focus:outline-none focus:ring-offset-0 focus:ring-1 checked:border-black checked:shadow-[2px_2px_0px_0px] disabled:border-steel-400 disabled:bg-steel-400",
+  {
+    variants: {
+      variant: {
+        primary: "border-black bg-orange-400/50 checked:bg-orange-500",
+        secondary: "border-black bg-pink-500/50 checked:bg-pink-500",
+        light: "border-black bg-slate-50/50 checked:bg-slate-50",
+        dark: "border-black bg-zinc-900/50 text-white checked:bg-zinc-900",
+        blue: "border-black bg-blue-500/50 checked:bg-blue-500",
+        yellow: "border-black bg-[#f7cb46]/50 checked:bg-[#f7cb46]",
+        green: "border-black bg-green-500/50 checked:bg-green-500",
+        red: "border-black bg-red-500/50 checked:bg-red-500",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+    },
+  },
+);
+
+const Radio: React.FC<
+  InputHTMLAttributes<HTMLInputElement> & VariantProps<typeof radioVariants>
+> = ({ variant = "primary" }) => {
+  const [checked, setChecked] = useState<boolean>(false);
+
+  return (
+    <label className="relative">
+      <input
+        type="radio"
+        className={`${radioVariants({ variant })}`}
+        checked={checked}
+        onClick={() => setChecked(!checked)}
+      />
+      <BsCheck className="absolute top-0 left-0 w-5 h-5 mt-1 pointer-events-none hidden peer-checked:block stroke-white outline-none" />
+    </label>
+  );
+};
+
+Radio.displayName = "Radio";
+
+export default Radio;

apps/www/src/components/neobruu/Tabs.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useState, ReactNode } from "react";
 import { VariantProps, cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";

apps/www/src/components/neobruu/Toast.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useEffect, useState } from "react";
 import { VariantProps, cva } from "class-variance-authority";
 

apps/www/src/data/components.ts

@@ -9,6 +9,7 @@ import Dropdown from "@/components/neobruu/Dropdown";
 import Drawer from "@/components/neobruu/Drawer";
 import Dialog from "@/components/neobruu/Dialog";
 import Input from "@/components/neobruu/Input";
+import Radio from "@/components/neobruu/Radio";
 import Toast from "@/components/neobruu/Toast";
 import Tooltip from "@/components/neobruu/Tooltip";
 import Tabs from "@/components/neobruu/Tabs";
@@ -29,6 +30,7 @@ import CardExample from "@/components/example/CardExample";
 import AccordionExample from "@/components/example/AccordionExample";
 import DrawerExample from "@/components/example/DrawerExample";
 import DialogExample from "@/components/example/DialogExample";
+import RadioExample from "@/components/example/RadioExample";
 
 type ComponentObj = {
   name: string;
@@ -109,6 +111,12 @@ const components: ComponentObj[] = [
     component: Input,
     exampleComponent: InputExample,
   },
+  {
+    name: "Radio",
+    sub: "Interactive element allowing users to select or deselect options within forms or lists.",
+    component: Radio,
+    exampleComponent: RadioExample,
+  },
   {
     name: "Tabs",
     sub: "Navigation element used to organize content into separate sections or categories, allowing users to switch between them to access different sets of information or functionality.",